style.css

/*Подключение шрифтов*/
@font-face {
	font-family: "TruenoLt"; 
	src: url("fonts/TruenoLt.otf") format("truetype"); 
	font-style: normal; 
	font-weight: normal; 
}

@font-face {
	font-family: "TruenoBlk"; 
	src: url("fonts/TruenoBlk.otf") format("truetype"); 
	font-style: normal; 
	font-weight: normal; 
}

@font-face {
	font-family: "TruenoBd"; 
	src: url("fonts/TruenoBd.otf") format("truetype"); 
	font-style: normal; 
	font-weight: normal; 
}
/*Подключение шрифтов*/



/*Общие стили*/
body {
    margin: 0px;
    font-family: "TruenoLt";
}

.wrap{
	overflow: hidden;
	max-width: 1024px;
	margin: auto;
}

button{
	font-family: "TruenoBd";
	margin: 0;
	border-style: none;
	background: #ff7373;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	padding: 15px 47px;
	cursor: pointer;
}

#banner_text button, #advertising button{
	font-family: "TruenoBd";
	margin: 0;
	border-style: none;
	background: #ff7373;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	padding: 15px 47px;
}
/*Общие стили*/



/*Style for Header Top*/
#header_top{
	background: #472424;
	float: left;
	width: 100%;
}

#header_top_nav{
	float: left;
	width: 70%;
}

#cart{
	float: left;
	width: 15%;
}

#cart span{
	color: #dcc5b8;
}

#login{
	float: left;
	width: 15%;
}
.nav ul{
	margin: 0px;
	padding: 0px;
}

.nav ul li{
	float: left;
	list-style-type: none;
}

.nav ul li a{
	height: 17px;
	font-size: 13px;
	font-weight: 400;
	color: #ffffff;
	text-decoration: none;
	padding: 15px;
	display: block;
	transition: 0.3s;
}

#header_top_nav ul li a:hover{
	background: #6b3737ad
}

#cart h5{
	font-size: 13px;
	font-weight: 400;
	float: left;
    padding: 15px 5px;
    margin: 0;
    color: #fff;
}

#cart img{
	padding: 12px 5px;
	float: left;
}

#login ul li a{
	height: 17px;
	border-left: 1px solid #844444;
}

#loginLink{
	border-right: 1px solid #844444;
}

#login ul li a:hover{
	background: #ff7373;
}
/*Style for Header Top*/




/*Style for Header*/
#header{
	background: #623232;
	float: left;
	width: 100%;
}

.logo{
	float: left;
	width: 40%;
}

.logo{
	font-family: "TruenoBlk";
	font-size: 16px;
	font-weight: 400;
}

.logo h2{
	color: #fff;
	padding: 15px;
    margin: 0;

}

.logo span{
	color: #ff7373;
}

#header_nav{
	position: relative;
    z-index: 1;
	float: left;
    width: 60%;
    box-sizing: border-box;
    padding: 5px 0px 0px 22px;
}

#header_nav ul li a{
	min-height: 21px;
	font-size: 16px;
}

#header_nav ul li a:hover{
	border-bottom: 3px solid #ff7373;
}

#header_nav li.icon{
	display: none;
}
/*Style for Header*/





/*Style for Banner*/
#banner{
	background: #f0efee;
	float: left;
	width: 100%;
}

#banner_img{
	margin-bottom: -43px;
    float: left;
    width: 45%;
}

#banner_text{
	padding: 50px 0px 0px 30px;
	float: left;
	width: 35%;
}

#banner_text h3{
	margin: 0;
	color: #633231;
	font-size: 30px;
	font-weight: 400;
}

#banner_text h1{
	margin: 0;
	font-family: "TruenoBlk";
	color: #633231;
	font-size: 70px;
	font-weight: 400;
}

#banner_text h2{
	margin: 0;
	font-family: "TruenoBlk";
	color: #ff7270;
	font-size: 50px;
	font-weight: 400;
}

#banner_text p{
	color: #c0bebd;
	font-size: 16px;
	font-weight: 400;
}

#banner_img img{
	width: 100%;
	position: relative;
	bottom: 40px;
}
/*Style for Banner*/




/*Style for advertising*/
#advertising{
	text-align: center;
	float: left;
	width: 100%;
}

#left_adver{
	margin: 50px 10px;
	width: 47%;
	height: 542px;
	float: left;
	background: url(image/Nike_Kyrie.png) no-repeat  center black;
	background-size: 135%;
}

#left_adver h1, #right_adver h1{
	font-family: "TruenoBd";
	font-size: 30px;
	font-weight: 400;
	color: #42d9ce;
	margin-top: 0;
}

#left_adver h3, #right_adver h3{
	margin-bottom: 0;
	font-size: 30px;
	font-weight: 400;
	color: #fff;
}

#left_adver button{
	margin-top: 300px;
	color: #000;
	padding: 15px 30px;
	background: #4bd8cd;
}

#right_adver{
	width: 50%;
	padding: 50px 10px;
	box-sizing: border-box;
	float: left;
}

#top_bann{
	width: 98%;
	height: 257px;
	background: #ff7373;
}

#top_bann_img{
	float: left;
	
}

#top_bann_img img{
	position: relative;
    bottom: 19px;
    right: 20px;
}

#top_bann_text{
	padding-top: 30px;
}

#right_adver h1{
	color: #fff;
}

#right_adver button{
	margin-top: 10px;
	color: #fff;
	padding: 15px 30px;
	background: #623232;
}

#bottom_bann {
	padding-top: 28px;
}

#bottom_bann_left, #bottom_bann_right{
	float: left;
	width: 47%;
	height: 257px;
	background: #cecece;
}

#bottom_bann_right{
	margin-left: 20px;
}

#bottom_bann_right h3{
	color: #6b7072;
}

#bottom_bann_right img{
	margin-top: 11px;
}

#bottom_bann_left h1{
	color: #ff7270;
}

#bottom_bann_left{
	background: url(image/post-image7.jpg) no-repeat center;
    background-size: cover;
}
/*Style for advertising*/





/*Style for products_nav*/
#products_nav{
	float: left;
	width: 100%;
}

#products_nav ul li a{
	font-size: 30px;
	font-weight: 400;
	color: #bdb9b5;
	font-family: "TruenoLt";
}

#products_nav ul li a span{
	color: #623232;
	font-family: "TruenoBd";
}

#products_nav_wrap {
    width: 960px;
    margin: 0 auto;
}

#products_nav_wrap ul {
    display: table;
    margin: 0 auto;
}
/*Style for products_nav*/




/*Style for Product Sale*/
#sale{
	float: left;
	width: 100%;
}

.product{
	padding: 10px;
	box-sizing: border-box;
	float: left;
	width: 25%;
}

.product_border{
	min-height: 371px;
	box-sizing: border-box;
	padding: 0px 0px 10px 30px;
	float: left;
    border: 1px solid #000;
    width: 100%;
}

#sale h5, #sale h6, #sale span{
	text-align: -webkit-auto;
	font-size: 16px;
	font-weight: 400;
}

#sale h5{
	margin: 0;
	color: #8a8784;
	font-family: "TruenoLt";
}

#sale h6{
	margin: 10px 0px;
	color: #8a8784;
	font-family: "TruenoBd";
}

#sale span{
	color: #bdb9b5;
	font-size: 13px;
}

.product img{
	width: 87%;
}

.product h4{
	position: relative;
    margin-bottom: -30px;
	float: left;
	color: #ff7373;
	font-family: "TruenoLt";
	font-size: 24px;
	font-weight: 400;
}

.product h4 span{
	color: #8a8784;
	font-size: 16px;
	text-decoration: line-through;	
}

#sale .discount{
	margin-top: 23px;
    padding: 9px 11px;
    float: right;
    color: #fff;
    background: #ff7373;
    font-family: "TruenoBd";
	font-size: 16px;
	font-weight: 400;
}

#sale .full_price{
	color: #8a8784;
	font-family: "TruenoLt";
	font-size: 24px;
	font-weight: 400;
}

#sale .full_price span{
	color: #fff;
}

#sale .full {
	display: none;
}
/*Style for label*/
#label{
	float: left;
	width: 100%;
}

.label_img{
	text-align: center;
	box-sizing: border-box;
	padding: 100px 30px 50px 30px;
	width: 16%;
	float: left;
	line-height: 100px;
}
/*Style for label*/
/*Style for Product Sale*/




/*Style for review*/
#review{
	text-align: center;
	height: 100%;
	float: left;
	width: 100%;
	background: url(image/glenn-carstens-peters.png) no-repeat center top;
}

.img_overlay{
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #472424, #472424d9);
}

.avatar{
	opacity: 0.6;
	float: left;
    padding: 60px 0px;
    width: 33.33%;
    box-sizing: border-box;
}

.avatar_img{
	height: 60px;
	width: 60px;
	border: 1px solid #fff;
	border-radius: 50%;
}

.avatar h5{
	margin: 0px;
	color: #ffffff;
	font-family: "TruenoBd";
	font-size: 16px;
	font-weight: 400;
}

.active{
	opacity: 1;
}

#review p{
	margin-top: -20px; 
	float: left;
	color: #ffffff;
	font-family: "TruenoLt";
	position: relative;
	background: #5e3f4096;
	padding:20px;
}

#review p:after, #review p:before{
	bottom: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
 
#review p:after{
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #5e3f4096;
	border-width: 18px;
	left: 50%;
	margin-left: -18px;
}

#review p:before{
	border-color: rgba(125, 145, 133, 0);
	border-bottom-color: #5e3f4096;
	border-width: 19px;
	left: 50%;
	margin-left: -19px;
}
/*Style for review*/





/*Style for news*/
#news{
	padding: 100px 0px 100px 0px;
	float: left;
	width: 100%;
}

#news h2{
	text-align: center;
	color: #623232;
	font-family: "TruenoBd";
	font-size: 30px;
	font-weight: 400;
}

.news_block{
	margin: 6px;
	box-sizing: border-box;
   	float: left;
   	width: 32%;
}

#news i{
	color: #ff7373;
	margin: 3px;
}

#news h4{
	color: #fff;
	font-family: "TruenoBd";
	font-weight: 400;
	margin: 5px;
}

#news h5{
	color: #fff;
	font-size: 13px;
	margin: 5px;
}

#news h6{
	color: #ff7373;
	font-size: 13px;
	margin: 5px;
}

#left_news{
	background: url(image/Layer29.png) no-repeat center;
}

#center_news{
	background: url(image/Layer30.png) no-repeat;
}

#right_news{
	background: url(image/Layer31.png) no-repeat;
}

.news_overlay{
	padding: 250px 10px 12px 10px;
	background: linear-gradient(to top right, #472325d1, #4723257a);
}
/*Style for news*/





/*Style for Help*/
#support{
	padding: 75px 0px 75px 0px;
	float: left;
	width: 100%;
	background: #ff7373;
}

#support i{
	color: #fff;
	float: left;
}

#support_text{
	float: left;
	padding-left: 10px;
}

#support h3{
	margin: 0;
	color: #ffffff;
	font-family: "TruenoBd";
	font-size: 30px;
}

#support p{
	margin: 0;
	color: #ffffff;
}

#support button{
	margin-top: 10px;
	float: right;
	background-color: #623232;
}
/*Style for Help*/



/*STYLE FOR FOOTER*/

/*Style for footer_advantages*/
#footer_advantages, #footer_nav, #footer{
	padding-top: 50px;
	width: 100%;
	float: left;
	background: #623232;
}

.advantages{
	float: left;
	width: 16.66%;
	text-align: center;
}

#footer_advantages i{
	color: #ff7373;
}

.advantages > div{
	padding-top: 30px;
	color: #fff;
}
/*Style for footer_advantages*/




/*Style for footer_nav*/
#footer_nav_border{
	padding: 100px 0px;
	border-top: 3px solid #ffffff26;
	border-bottom: 3px solid #ffffff26;
}

#contact{
	float: left; 
	width: 29%;
}

#contact i{
	line-height: 60px;
	color: #fff
}

.contact_icon{
	margin: 20px 0px;
	float: left;
	text-align: center;
	background: #ff7373;
	width: 60px;
	height: 60px;
}

.contact_text h5{
	color: #ff7373;
	font-family: "TruenoBd";
	margin: 5px 0px;
}

.contact_text{
	margin: 20px 10px;
	float: left;
	color: #ffffff;
}

.contact_border{
    clear: both;
}

#navigator{
	box-sizing: border-box;
	padding-left: 50px;
	float: right;
	width: 71%;
}

.footer_list{
	float: left;
	width: 25%;
}

.footer_list h3{
	padding-left: 16px;
	color: #ff7373;
	font-family: "TruenoBd";
}

.footer_list ul{
	padding-left: 16px;
}

.footer_list ul li{
	padding-top: 20px;
	list-style-type: none;
}

.footer_list ul li a{
	text-decoration: none;
	color: #ffffff;
}
/*Style for footer_nav*/ 




/*Style for footer*/
#footer h3{
	color: #fff;
	float: left;
	text-align: center;
}

#social{
	float: right;
}

#social i{
	color: #fff;
	margin: 5px;
}
/*Style for footer*/ 

/*STYLE FOR FOOTER*/





/*Адаптация*/
@media (max-width: 1315px){
	#banner_text{
   		width: 41%;
	}
}

@media (max-width: 1150px){
	#banner_text{
	    padding-top: 30px;
    	width: 50%;
	}
}

@media (max-width: 1050px){
	#header_top_nav {
    	width: 65%;
	}

	#cart {
    	width: 15%;
	}

	#login {
    	width: 20%;
	}

	#banner_text{
    	padding-top: 10px;
		width: 50%;
	}

	#header_nav {
   		width: 65%;
	}

	.logo {
 	   	width: 35%;
	}

	#contact {
		clear: both;
   		width: 100%;
	}

	.contact_border {
		clear: none;
		box-sizing: border-box;
		padding-left: 50px;
	}

	#navigator {
		clear: both;
	    width: 100%;
	}

	#footer_nav_border {
		padding: 40px 0px;
    }		    
}

@media (max-width: 995px){
	#banner_text{
    	padding-top: 5px;
		width: 50%;
	}

	#cart{
    	width: 16%;
	}

	#header_top_nav{
		width: 64%;
	}

	.news_block{
		width: 48%;
	}
}

@media (max-width: 980px){
	#banner_text{
		padding: 10px;
		width: 50%;
	}

	#banner_text h2{
	 	font-size: 30px;
	}

	#banner_text h1{
 		font-size: 50px;
	}    
	
	#header_nav ul li a{
    	font-size: 14px;
	}	
		
	.logo{
 	   	width: 35%;
	}

	#left_adver{
		margin: 15px 0px;
		width: 100%;
		background-size: 100%
	}
		
	#right_adver{
    	width: 100%;
    	padding: 15px 10px;
	}

	.adver_border{
		margin: auto;
    	width: 55%;
	}

	#top_bann{
		width: 100%;
    }

	#bottom_bann_left, #bottom_bann_right{
		margin: 0;
		width: 49%;
    }

	#bottom_bann_right{
		float: right;
	}				
}

@media (max-width: 934px){
	#banner_text{
	    padding-top: 5px;
    	width: 50%;
	}

	#cart{
    	width: 18%;
	}

	#header_top_nav{
		width: 62%;
	}

	#header_nav{
   		width: 67%;
	}

	.logo{
 	   	width: 33%;
	}

	#news{
		padding: 30px 0px 70px 0px;
	}	
}

@media (max-width: 870px){
	#header_nav{
   		width: 69%;
	}

	.logo {
 	   	width: 31%;
	}

	#banner_text button{
		padding: 10px 30px;
	}

	#banner_text h2{
	 	font-size: 20px;
	}

	#banner_text h3{
	 	font-size: 20px;
	}

	#banner_text h1{
 		font-size: 40px;
	}

	#banner_text{
		width: 42%;	
	}

	.product_border{
		min-height: 374px;
	}

	.product{
    	width: 33.33%;
	}

	#products_nav_wrap ul{
		display: inline;
	}
}


@media (max-width: 840px){
	#banner_img{
		display: none;
	}

	#banner_text h2{
	 	font-size: 30px;
	}

	#banner_text h1{
 		font-size: 50px;
	}

	#banner_text{
	    float: none;
	    width: 46%;
	    margin: 0 auto;
	}

	#cart{
		width: 20%;
	}

	#header_nav ul li a{
		font-size: 16px;
	}

	#header_nav ul li{
		min-height: 54px;
	}

	#header_top_nav{
		width: 60%;
	}

	#header_nav{
		background: #6d3b3b;
		padding: 5px 0px 0px 0px;
       	width: 100%;
	}

	.label_img{
    	padding: 30px 0px 0px 0px;
	    width: 33.33%;
		min-height: 185px;
	}

	.adver_border{
			width: 60%;
	}

	#news{
		padding: 0px 0px 25px 0px;
	}

	.contact_text{
	  	font-size: 15px;
	}

	#header_nav ul.topnav li:not(:first-child){
		display: none;
	}

	#header_nav ul.topnav li.icon{
		display: block;
		float: right;
	}
}

@media (max-width: 840px){
	#heade_nav ul.topnav.responsive{
		position: relative;
	}

	#header_nav ul.topnav.responsive li{
		min-height: 54px;
		display: block;
		float: none;
	}

	#header_nav ul.topnav.responsive li a{
		display: block;
		text-align: center;
	}

	#header_nav ul.topnav.responsive li.icon{
		position: absolute;
		top: 0;
		right: 0;
	}
}

@media (max-width: 790px){		
	#support button{
    	float: none;
    	margin-left: 10px;
 	}

	.advantages{
	    padding-top: 10px;
	    width: 33.33%;
	}

	.contact_text{
		font-size: 12px;
	}

	.adver_border{
		width: 65%;
	}	    
} 	

@media (max-width: 770px){
	#banner_text{
		width: 50%;	
	}

	#cart{
    	width: 24%;
	}

	#login{
    	width: 25%;
	}

	#header_top_nav{
		width: 51%;
	}

	.adver_border{
		width: 70%;
	}

	.product{
    	width: 50%;
	}

	.product_border{
		min-height: 454px;
	}

	#support{
    	padding: 25px 0px 30px 0px;
	}

	#footer h3{
		width: 100%;
	  	font-size: 16px;
	}

}	

@media (max-width: 693px){
	.contact_border{
		clear: both;
	}

	.contact_text{
		font-size: 16px;
	}

	.adver_border{
		width: 80%;
	}

	.news_block{
		width: 76%;
		float: none;
		margin: 10px auto;
    }

	#left_adver{
		background-size: 135%
	}
}

@media (max-width: 660px){
	#banner_text{
		width: 60%;	
	}

	#cart{
    	width: 50%;
	}

	#login {
    	width: 50%;
	}

	#header_top_nav{
		width: 100%;
	}

	.cart-login-border{
		width: 51%;
		float: left;
	}

	.product_border{
		min-height: 406px;
	}

	.footer_list{
	  	width: 50%;
	}
}

@media (max-width: 617px){
	.adver_border{
		width: 100%;
	}

	.cart-login-border{
		width: 54%;
	}			
}	

@media (max-width: 575px){
	#banner_text{
		width: 92%;	
	}

	.active{
	    float: none;
	    margin: 0px auto;
	}

	.not_active{
		display: none;
	}

	.cart-login-border{
		width: 58%;
	}		
}

@media (max-width: 538px){
	#bottom_bann_left, #bottom_bann_right{
       	width: 100%;
 	}

    #bottom_bann_right{
		margin-top: 10px;
	}

	.news_block{
		width: 95%;
	}

	.cart-login-border{
		width: 61%;
	}	
}

@media (max-width: 515px){
	#banner_text{
		width: 100%;	
	}

	#cart{
    	width: 40%;
	}

	#login{
    	width: 50%;
	}

	#header_top_nav{
		width: 100%;
	}

	.product{
    	width: 100%;
	}

	.star{
		width: 100%;
	}

	.cart-login-border{
		width: 85%;
	}

	#products_nav ul li a{
		font-size: 20px;
    }	
}

@media (max-width: 450px){
	#top_bann_text{
    	padding-top: 1px;
	}
	
	#left_adver h3, #right_adver h3, #left_adver h1, #right_adver h1{
        font-size: 25px;
	}

	#bottom_bann_right img{
    	margin-top: 30px;
	}

	#right_adver button{
	    margin-top: 0px;
	    padding: 10px 20px;
	}
	 
	#review{
    	height: 522px;
    }

	.cart-login-border{
		width: 100%;
	}	    
}

@media (max-width: 385px){
	#cart{
    	width: 42%;
	}

	#login{
    	width: 50%;
	}

	#header_top_nav{
		width: 100%;
	}
	
	#top_bann_img{
	    width: 50%;
	}

	.footer_list{
		width: 100%;
	}

	.contact_text{
		font-size: 14px;
	}

	.logo h2{
		padding: 7px;
	}	
}
/*Адаптация*/