/*
    Theme Responsive Design
*/
@media all and (max-width: 1400px) and (min-width: 768px) {
    

    .scene div.clouds {max-width: 651px;right: 0; bottom:0; height: 700px; 
  background: url(../img/main-banner-fan.png) no-repeat center; background-size: cover; z-index: 100;}
}

@media (min-width: 1170px) {
	.port {width:90%; }
}

/* ---- Start of max-width 992px CSS ---- */
@media (max-width: 992px) {
    ul.nav > li > a {
        font-size: 10px;
        padding: 0 5px;
    }
	.sm-padding{
		padding: 15px;
	}
	.slider_item{
        height: 480px;
    }
    .about_content {
        padding: 0;
    }     

}
/* ---- End of max-width 992px CSS ---- */


/* ---- Start of min-width 480px and max-width 768px CSS ---- */
@media all and (min-width: 480px) and (max-width: 768px) {
	
}
/* ---- End of min-width 480px and max-width 768px CSS ---- */


/* ---- Start of max-width 767px CSS ---- */
@media all and (max-width: 767px) {
    body, p{
        font-size: 14px;
        line-height: 22px;
    }
    h1{
        font-size: 30px;
    }
    h2{
        font-size: 20px;
    }
    h3{
        font-size: 16px;
    }
    p br{
        display: none;
    }
    .slider-subtitle1 {font-size: 22px;}
    .padding{
        padding: 60px 0;
    }
    .xs-padding{
    	padding: 15px;
    }
    .navbar-header {
        padding: 5px 0;
    }
    .navbar-header .brand {
        display: block;

    }
    .scene div.clouds {max-width: 700px;
        left: -40%;
        height: 480px;
        background: url(../img/main-banner-fan.png) no-repeat center;
        background-size: cover;
        z-index: 100;}
    .home .navbar-fixed-top.header_section a {color: #fff;}
    .header_section img {max-height: 57px;}

    .navbar-collapse {
        background-color: #232323;
        border-top: medium none;
        box-shadow: none;
        margin-top: -5px;
        overflow-x: visible;
        padding-left: 0;
        padding-right: 0;
    }
    ul.nav{
        margin: 0;
        overflow: hidden;
    }
    ul.nav > li{
        display: block;
        margin: 0;
    }
    ul.nav > li > a{
        display: block;
        font-size: 14px;
        color: #fff;
        line-height: 45px;
        padding: 0 30px;
    }
    ul.nav > li > a:hover,
    ul.nav > li.active > a {
        background-color: #444;
        color: #fff;
    }
    .slider_item{
        height: 400px;
    }
    .cta_section.overlay:before{
        width: 100%;
    }
	.contact_form .form-group .col-sm-6:first-child{
        margin-bottom: 15px;
    }
    .banner-content {
        left: 0; max-width: 95%;
        margin-left: 0; bottom: 10% !important;
    }
    .banner-content h2 { line-height: 1.2; font-size: 18px; }
    .banner-content h1{
        font-size: 28px;
    }
    .contact_wrapper {padding-left: 0; margin-bottom: 40px}
    #scroll-to-top{bottom: 10px; right: 10px }
    .mat_content h3 {font-size: 18px;}
    .mat_content {padding: 30px 20px;}
    .mat_content li {font-size: 14px;
padding: 6px 0 4px 30px;
background: url(../img/icon_next.svg) no-repeat left 12px;}
.works_items .works_item img {
    width: 100%;
    height: 200px;
}
.port ul {padding: 0 3%; width: 94%}
.port ul li img {
   max-width: 100%;
   border: 2px solid #ffbebe; margin-bottom: 24px; text-align: center;
}
.port ul li {
   width: 32.5%; display: inline-block;
}
.c-home-category_link {

    height: 260px;
}
.scene {
    height:70vh
}
}
/* ---- End of max-width 767px CSS ---- */


/* ---- Start of max-width 480px CSS ---- */
@media all and (max-width: 480px) {
    .col-xs-6{
		float: none;
		width: 100%;
	}
    .hero_section{
        height: 380px;
    }
    .banner-content h1{
        font-size: 28px !important;
    }
    article.news-black .bg-block-news-black {display: none;}
    article.news-black .content-block-news-black {width: 80%; left: 20%;}
    article h2 {width: 90%; margin: 0 0 30px}
    .port ul li {
   width: 49%; display: inline-block;
}
}
/* ---- End of max-width 480px CSS ---- */


/* ---- Start of max-width 420px CSS ---- */
@media all and (max-width: 420px) {
    
}
/* ---- End of max-width 420px CSS ---- */


/* ---- Start of max-width 380px CSS ---- */
@media all and (max-width: 380px) {
	
}
/* ---- End of max-width 380px CSS ---- */