/*** 960px --> ***/  
@media only screen and (max-width: 1099px) {
    *{}
nav ul{width: 90px;}
h2.sub-title{font-size:21px; line-height:23px;}


}


/*** 768px - 959px ***/ 
@media only screen and (max-width: 959px) {
    *{}
header{margin: 0 10px; padding: 20px 0;}
.logo{padding-bottom: 20px;}
.welcome-text{font-size: 16px; line-height: 20px;}
nav{padding: 20px 0 0 0; margin-bottom: 20px;}   
nav ul, nav ul:first-child{height: 140px;width: 110px;}
.left-area ul{width: auto; height: auto; text-align: center;}
.left-area li{float: none; display: block;}
.left-area li a{padding: 0; margin: 0; border: 0;}
.details-slider, .careers-intro, .google-map{width: 45%;}
.accordion{width: 55%;}
.listing li{width: 33%;}
.video-player{width: 62%;}
.work-details{width: 38%;}
h2.sub-title{font-size:19px; line-height:21px;} 



}


/*** 640px - 767px ***/ 
@media only screen and (max-width: 767px) {
    *{}

nav ul, nav ul:first-child{width:22% ; margin-right: 5%;}    
.accordion .acc-header{font-size: 18px; line-height: 28px;} 
.listing li{width: 50%;}   
.listing li .title{max-width: 190px;}
h2.sub-title{font-size:17px; line-height:19px;} 
    
}


/*** 480px - 639px ***/ 
@media only screen and (max-width: 639px) {
    *{}
.left-area{width: auto; float: none; clear: both; max-width: none; margin-bottom: 0;}
header{max-width: none; text-align: center;}  
.logo{margin: 0 auto;} 
.welcome-text{padding-bottom: 0; font-size: 16px; line-height: 18px;} 
 
.main-content{width: auto; float: none; clear: both;} 
   
nav{float: none;}
nav ul, nav ul:first-child{width: auto; margin: 0; height: auto; float: none; clear: both; padding: 10px 20px; display: block;}
nav ul:first-child{border: 0;}
.details-slider, .careers-intro, .google-map, .accordion{width: auto; float: none;clear: both; margin-bottom: 20px;} 

.main-slider .details .title{font-size: 16px; line-height: 16px;}
    
footer{text-align: center;}    
    
.accordion .acc-header{font-size: 16px; line-height: 24px;}    
.listing li{width: 33%;}     
.video-player, .work-details{width: auto; float: none; clear: both;}    
 
 h2.sub-title{font-size:15px; line-height:17px;} 
    
}


/***  --> 479px ***/ 
@media only screen and (max-width: 479px) {
    *{}
.listing li{width: 50%;}    
.tabs{display: block;text-align: center;float: none;padding: 0;} 
.tabs li{display: block; float: none;margin: 0; padding: 5px;}
.tabs li a, .tabs li:first-child a{border: 1px solid #fff; padding: 5px; display: block; width: auto; margin: 0 auto;}
 
nav li{display: none;}
nav ul li:first-child{display: block;} 
h2.sub-title{font-size:14px; line-height:16px;}  
 
        
}