﻿/* -----------------------------------------------------
	WEBSITE-NAME
	AVR-MARINE
----------------------------------------------------- */

@media screen and ( min-width:992px) {
	.mobile-toggle{display:none;}
}

@media screen and ( max-width:2220px) {
	.imports .inner-banner{ min-height: 520px; }
}

@media screen and ( max-width:1920px) {
	.imports .inner-banner{ min-height: 460px; }
}


@media screen and ( max-width:1599px) {
	.imports .inner-banner{ min-height: 410px; }
}

@media screen and ( max-width:1399px) {
	.imports .inner-banner{ min-height: 370px; }
}
@media screen and ( max-width:1199px) {
	header .header-bg{padding: 15px;}
	header .header-bg.affix{padding: 5px 15px;}
	header .navbar-nav li {padding-right: 15px;}
	.inner-banner{min-height: 340px;}
	.banner .item{min-height: 560px;}
	.about-block .about-company figure img {margin-top: 15px;}
	.imports .inner-logo{  top: 26px;  max-width: 300px; }
	.imports header .logo { height: 60px; }
	.imports .mobile-toggle{ margin-top: -46px; }
	.imports .section { padding: 25px 0; }
	.imports .inner-banner{ min-height: 335px; }
}

@media screen and ( max-width:991px) {
header nav#nav.is-active{opacity:1;visibility:visible}
header nav#nav{position:fixed;top:0;left:0;margin-top:0;z-index:990;opacity:0;visibility:hidden;height:100%;width:100%;transition:all .35s ease-in-out; overflow-y: scroll; overflow-x: hidden; background-image:url(images/banner2.jpg); background-position: center; background-size: cover; background-repeat: no-repeat;}
.mobile-toggle{display:inline-block; position:relative;right:0;z-index:999;display:inline-block;cursor:pointer;transition-property:opacity,filter;transition-duration:.25s;transition-timing-function:linear;background-color:transparent;border:0;margin:-64px 0 0;overflow:visible;padding:0;width:34px;height:28px;float:right;}
.mobile-toggle:hover{opacity:.7}
.mobile-toggle:focus{outline:0}
.mobile-toggle-box{width:34px;height:28px;display:inline-block;position:relative}
.mobile-toggle-inner{display:block;top:50%;margin-top:-2px}
.mobile-toggle-inner,
.mobile-toggle-inner::before,
.mobile-toggle-inner::after{width:34px;height:3px;background-color:#16335a;border-radius:4px;position:absolute;transition-property:transform;transition-duration:.15s;transition-timing-function:ease}
.is-active .mobile-toggle-inner,
.is-active .mobile-toggle-inner::before,
.is-active .mobile-toggle-inner::after{background-color::#16335a}
header.affix .mobile-toggle--squeeze.is-active .mobile-toggle-inner, 
header.affix .mobile-toggle--squeeze.is-active .mobile-toggle-inner::before, 
header.affix .mobile-toggle--squeeze.is-active .mobile-toggle-inner::after{background-color:#fff}
.mobile-toggle-inner::before,.mobile-toggle-inner::after{content:"";display:block}
.mobile-toggle-inner::before{top:-10px}
.mobile-toggle-inner::after{bottom:-10px}
.mobile-toggle--squeeze .mobile-toggle-inner{ -webkit-transition-duration:.075s;-ms-transition-duration:.075s;transition-duration:.075s;-webkit-transition-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);-ms-transition-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);transition-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}
.mobile-toggle--squeeze .mobile-toggle-inner::before{-webkit-transition:top .075s .12s ease,opacity .075s ease;-ms-transition:top .075s .12s ease,opacity .075s ease;transition:top .075s .12s ease,opacity .075s ease}
.mobile-toggle--squeeze .mobile-toggle-inner::after{-webkit-transition:bottom .075s .12s ease,transform .075s cubic-bezier(0.55,0.055,0.675,0.19);-ms-transition:bottom .075s .12s ease,transform .075s cubic-bezier(0.55,0.055,0.675,0.19);transition:bottom .075s .12s ease,transform .075s cubic-bezier(0.55,0.055,0.675,0.19)}
.mobile-toggle--squeeze.is-active .mobile-toggle-inner{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition-delay:.12s;-ms-transition-delay:.12s;transition-delay:.12s;-webkit-transition-timing-function:cubic-bezier(0.215,0.61,0.355,1);-ms-transition-timing-function:cubic-bezier(0.215,0.61,0.355,1);transition-timing-function:cubic-bezier(0.215,0.61,0.355,1)}
.mobile-toggle--squeeze.is-active .mobile-toggle-inner::before{top:0;opacity:0;transition:top .075s ease,opacity .075s .12s ease}
.mobile-toggle--squeeze.is-active .mobile-toggle-inner::after{bottom:0;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);-webkit-transition:bottom .075s ease,transform .075s .12s cubic-bezier(0.215,0.61,0.355,1);-ms-transition:bottom .075s ease,transform .075s .12s cubic-bezier(0.215,0.61,0.355,1);transition:bottom .075s ease,transform .075s .12s cubic-bezier(0.215,0.61,0.355,1)}

.header-bg.affix .mobile-toggle{margin-top: -55px;}
header nav#nav:after{position: fixed; content: ""; top:0; left:0; right: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5);}
header .navbar-nav{float: none; text-align: center; padding-top: 180px; position: relative; z-index: 5;}
header .header-bg.affix  .navbar-nav{padding-top: 180px;}
header .navbar-nav li {float: none; margin-bottom: 30px;padding-right: 0; }
header .navbar-nav li a{ font-size: 22px; }
header .header-bg {padding: 5px 15px;}
header .navbar-nav li .dropdown-menu{float: none; right:0; margin: 0 auto; max-width: 300px; }
header .navbar-nav li .dropdown-menu li{ text-align: center; margin-bottom: 0;}
header .navbar-nav li .dropdown-menu li a{font-size: 16px !important; white-space:normal; padding: 5px 15px 5px 25px; }
footer .links-block {padding-left: 50px;}
.popup-gallery li a:before{height: 40px; width: 39px;}
.imports .inner-banner{ min-height: 300px; }
.imports .inner-banner{ min-height: 260px; }
}

@media screen and (max-width:900px){
.imports .inner-banner{ min-height: 235px; }
}

@media screen and (max-width:767px){
.banner .item{min-height: 450px;}
.welcome-block .company-blog li{width: 50%;}
.section{padding: 40px 0;}
.welcome-block h2{font-size: 28px;}
.sub-heading{font-size: 28px;}
.product-types .full-width{margin-bottom: 20px;}
.product-types .full-width:nth-child(3){margin-bottom: 0;}
.brands-block img{max-width: 250px;}
.brands-block .brand-images{margin-top: 30px;}
header .header-bg,
header .header-bg.affix{padding: 5px 0;}
.navbar-nav .open .dropdown-menu{background-color: #fff;}
footer .links-block {padding-left: 15px; margin-bottom: 30px;}
footer .footer-company{margin-bottom: 30px;}
footer .footer-company{max-width: 350px;}
footer .contact li .adress{max-width: 300px;}
footer .copy-rights p{margin-right: 0; padding: 0 15px;}

.about-company img{margin-top: 20px; width: 100%;}
.about-block .about-company {margin-top: 0px; padding-top:30px; }
.about-block .about-company figure img{width:100%;}
/*.product-page .sub-heading{margin-bottom: 0;}*/
.product-names{padding-top: 30px;}
.product-names img{margin-top: 20px; width: 100%;}
.popup-gallery li{width: 33.33%;}
.filtr-list li{margin: 0 1px; padding: 5px 10px; font-size: 16px;}
.contact-form form{margin-bottom: 30px;}
.contact-page .address-block{margin-bottom: 20px;}
.contact-page .address-block p{max-width: 300px;}
.contact-form{padding-top: 25px;}
.about-block .about-company figure img{max-width: 100%;}
.careers-page .contact-us .text{max-width: 400px;}
form{margin-top: 40px;}
.careers-page .contact-us,
.careers-page .side-bar{max-width: 450px;}
.imports .inner-banner {min-height: 210px;}
}
	
@media screen and (max-width: 599px){
.mobile-toggle{ margin-top: -48px;}
header .logo img{max-width: 200px;}
.banner .item {min-height: 400px;}
.banner .banner-content{top:65%; transform: translateY(-65%); -webkit-transform: translateY(-65%); -ms-transform: translateY(-65%); -moz-transform: translateY(-65%);}
.welcome-block .company-blog li h6{font-size: 20px;}
.brands-block img{max-width: 100%; margin-right: 0; margin-top: 10px;}
footer .copy-rights {padding-top: 30px;}

.inner-banner{min-height: 280px;}
.contact-page .address-block{width: 100%;}

.imports .inner-logo { max-width: 245px; padding-bottom: 58px; top: 0; }
.imports .inner-banner { min-height: 180px; }

.product-page ul li{ width: 48%; margin-right: 2%; }

}

@media screen and (max-width: 479px){
.header-bg.affix .mobile-toggle{ margin-top: -45px;}
header .header-bg,
header .header-bg.affix{padding: 5px 0;}
.banner .item {min-height: 350px;}
.banner .banner-content h1{font-size: 27px; line-height: 35px;}
.welcome-block .company-blog li{width: 100%;}
header .logo img{max-width: 180px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
header .header-bg.affix .logo img{max-width: 160px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
.welcome-block .company-blog li{max-width: 100%;}
.product-types .full-width{width: 100%;}
.welcome-block .company-blog{margin-top: 10px;}
.welcome-block h2,
.sub-heading {font-size: 24px;}
.item img{margin: 0 auto; max-width: 270px; text-align: center;}
.filtr-list li{margin: 5px 2px;}
.popup-gallery li{width: 50%;}
.popup-gallery li a:before{font-size: 20px;}
.imports header .header-bg{ box-shadow: none; }
.inner-banner { min-height: 150px; }
.imports .inner-banner { min-height: 135px; }
.imports header .logo { height: 30px; }
.imports .mobile-toggle{ top: 17px; }
}

@media screen and (max-width: 375px){
	.imports .inner-banner { min-height: 120px; }
}



