/*		Mobile Layout: 320px and 480px and more but less than or equal to 767px.
----------------------------------------------------------------------------------
*/

@media only screen and (max-width: 767px) {
	
*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
/*** Begin header ***/
.wrapper{padding:10px}
.header{ height:70px; padding-left:129px;}
.header-right{ height:70px;}
.logo{ height:70px;}
.txt-img{ display:none;}
.all-banner{ height:83px;}
.banner{ width:100%;}
.banner-icons{ margin:70px auto 0;}
.banner h1{ font-size:22px; line-height:24px; letter-spacing:2px; padding:135px 0 0;}


.top-nav{ float:none; margin:0; padding:0;}
.phone-nav{	position:relative; display:block; width:100%; padding-right:7px; height:70px; margin:0 auto; padding-top:27px; text-align:center; background:url(../images/up-down.png) no-repeat 82% 32px; text-transform:uppercase; font-size:14px; color:#787878; cursor:pointer; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; font-family: 'ralewaybold';	}
.nav-opened{ background:url(../images/up-down.png) no-repeat 82% -56px; color:#fff;}
.nav-item{ float:none; display:none; width:100%; position:absolute; left:0; top:72px; background:#000;}
.nav-item li{ float:none; width:100%; background:none; padding:7px 0; text-align:center;}
.nav-item li:first-child{ padding-top:20px;}
.nav-item li:last-child{ padding-bottom:20px;}
.nav-item li a{ float:none; display:compact; height:auto; padding:0;}
.nav-item li a span{ display:block; background:url(../images/up-down.png) no-repeat 80% 4px;}
.nav-item li.drpdown a span{background-position:80% -84px;}
.nav-item li a:hover,
.nav-item li.drpdown a{ background:none;}
.nav-item li div{position:static;left:auto;top:auto;width:100%;	padding:0;background:#2c2c2c; margin-top:12px;}
.nav-item li.drpdown div{ display:block;}
.nav-item li.drpdown ul li{float:none; text-align:center;}
.nav-item li li:first-child{ padding-top:7px;}
.nav-item li li:last-child{ padding-bottom:7px;}
.nav-item li ul li a{ color:#fff;}
.nav-item li.drpdown ul li a{width:100%; padding:0; color:#fff;}
.nav-item li.drpdown ul li a:hover{ color:#f8961d;}

/*** End header ***/

/*** Begin contents ***/
.contents{ width:100%;padding:20px 0;}
.right-conts,
.left-conts{ float:none; width:100%; overflow:hidden;}
.left-conts h2{ font-size:18px;}
/*** End contents ***/

/*** Begin space interior ***/
.ineterior-page .all-banner{ height:200px;}
.ineterior-page .banner-icons{ width:46px; height:44px;}
.ineterior-page .banner h1{ padding-top:90px;}

.rightbx-title,
.rightbx-conts{ display:none;}
.right-calculate{ padding:0; width:100%; margin:0 auto 25px;}
.right-calculate dfn{ clear:none; float:left; font-size:12px; line-height:16px; padding:3px 0 0 40px; min-height:33px; width:62%; background-position:5px 5px}
.right-calculate .calculate-btn{ float:right; margin:-1px; width:38%; padding-left:1px; padding-right:1px; font-size:12px; line-height:16px; height:40px;}
.key-process .col{ float:none; width:100%;}
.enquiry-form .row input,
.enquiry-form textarea{ float:none; width:100%; margin-right:0}
.interior-tabs li a{ width:55px; height:40px; padding:0; font-size:9px; text-indent:-9999px;}
/*** End space interior ***/

/*** Begin calculator ***/
.calculator-page .all-banner{ height:200px;}
.calculator-page .banner-icons{ width:46px; height:46px; margin-top:55px;}
.calculator-page .banner h1{ padding-top:10px;}
.apprx-space, .apprx-cost{ float:none; clear:both; height:80px; width:100%;}
.apprx-space{ margin-bottom:20px;}
.calculate-form input, .detail-form .left input{ padding-top:5px; line-height:18px;}
.calculate-form .right{ width:80%;}
.detail-form .left{ float:none; width:100%; padding-bottom:20px;}
.detail-form .right{ float:none; width:100%;}
.detail-form .left input{ width:100%;}
/*** End calculator ***/

/*** Begin article ***/
.right-search{ width:100%;}
.right-search input{ width:86%;}
.right-tags{ display:none;}
.post-detail span{ background:none;}
.post-detail dfn{ display:block;}
.tweet-widget,
.fb-widget{ float:right; clear:left;}
.article-left section{ padding-bottom:15px;}
.article-left .thumb{ width:70px;}
.article-left .right{ width:70%; padding:10px 0 0 15px}
.article-left .right p{ margin-left:-70px;}
.post-by{ margin-left:-70px; width:138%;}
.article-left .right h2{ min-height:60px;}
/*** End article ***/

/*** Begin case study ***/
.case-study .all-banner{ height:200px;}
.gallery-phone-nav{color:#000;height:40px;padding:11px 0 0 15px;display:block;font-size:11px;cursor:pointer;text-transform:uppercase;font-family: 'ralewaybold';background:url(../images/nav-arrow.png) no-repeat right 17px;background-color:#dbdbdb;-webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out;}
.gallery-nav-item{ position:absolute; left:0; width:100%; top:40px; border:0; display:none;}
.gallery-nav-item li{ float:left; border:0; width:100%; display:block; border-top:1px solid #f4f4f4;}
.gallery-nav-item li:last-child{ border-right:0;}
.gallery-nav-item li span{ height:30px; padding:7px 0 0 15px; width:100%; background-position: right 13px; background-color:#e9e9e9 !important;}
.gallery-nav-item ul{ position:relative; width:100%; left:auto; border:0; top:0; overflow:hidden;}
.gallery-nav-item li li{ float:none;}
.gallery-nav-item li:last-child ul{ width:100%;}
.gNav-opened{ background-position: right -38px;}
.gallery-nav-item li .gItem-opened{background-position: right -42px;}
.gallery-nav-item li span{border-bottom:1px solid #d0d0d0;}
.gallery-in{ margin:0 -8px;}
.gallery-thumb{margin: 0 8px 20px; min-height:195px; width:44.6%;}
.older-article{ padding-top:9px; line-height:16px; height:30px;}
/*** End case study ***/

/*** Begin team ***/
.team-nav-item li{ width:49.46%;}
.team-nav-item > li:first-child{ border-left:0;}
.team-nav-item > li:last-child{ border-right:0;}
.team-nav-item li span{ height:40px;}
.team-nav-item ul{ left:0; border:0; width:100%;}
.team-nav-item > li:first-child ul{ width:102.2%;}
.team-in{ margin:0 -10px;}
.team-member{ margin:0 9px 20px; min-height:180px; width:43.4%;}
.team-member .overlay{ font-size:86%;}
.team-member .overlay span{ line-height:130%;}

/*** End team ***/

/*** Begin contact ***/
.contact-info{margin:0 -10px;}	
.contact-info section{ width:43.3%; margin:0 10px  20px;}
.google-map{ height:150px;}
/*** End contact ***/



/*** Begin footer ***/
.footer{ height:auto; padding:11px 0;}
.footer .left{ width:45%;}
.footer ul{ padding:7px 0 0 15px;}
.footer li{ display:block; width:100%;}
.footer li a{ background:none; padding:0;}
.footer .right{ width:45%;}
.footer .right img{ margin:3px 15px 3px 10px;}
.footer .right .row{ clear:both; width:100%; overflow:hidden;}
/*** End footer ***/

/*** Begin home ***/
.home-footer{ display:none;}
.home-footer .footer{ bottom:10px;}
.home-wrap{ padding:0;}
.home-header{ margin:0 10px;}
.home-footer{ margin:0 10px;}
.home-header .header{ top:10px; padding-left:129px;}

.caption-overlay{ padding:0 10px; bottom:52px; position:relative;}
.caption-bar1, .caption-bar2, .caption-bar3, .caption-bar4, .caption-bar5{height:auto; background:none;}
.captionBg1, .captionBg2, .captionBg3, .captionBg4, .captionBg5{ height:auto; width:100%; padding:15px;}

.slide-tabs-wrap{ width:100%; padding:0 10px; left:auto; bottom:10px;}
.slide-tabs{ position:relative;}
.slide-tabs li{ position:static;}
.slide-tabs li a{ width:55px; height:40px; padding:0; font-size:9px; text-indent:-999px;}
.slide-tabs p a{ text-indent:inherit; font-size:13px; height:auto; width:auto;}

/*** End home ***/
}


/*		Tablet Layout: 768px.
-----------------------------------------------------------------
*/

@media only screen and (min-width: 768px) and (max-width: 1024px) {

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
/*** Begin header ***/
.txt-img{ display:none;}
.nav-item li a{padding:38px 14px 0; height:90px;}
.banner{ width:100%;}
/*** End header ***/

/*** Begin contents ***/
.contents{ width:100%;padding:30px 0;}
.right-conts,
.left-conts{ float:none; width:100%; overflow:hidden;}
.right-conts{ padding-bottom:30px;}
/*** End contents ***/

/*** Begin space interior ***/
.rightbx-title,
.rightbx-conts{ display:none;}
.right-calculate{ padding:0; width:385px; margin:0 auto 25px;}
.right-calculate dfn{ clear:none; float:left; font-size:14px; line-height:16px; padding:3px 20px 0 40px; width:60%; background-position:5px 5px}
.right-calculate .calculate-btn{ float:right; margin:-1px; width:40%; font-size:16px; padding-top:11px; line-height:20px; height:40px;}
.enquiry-form .rowIn{margin:0 -3px 0 -2px;}
.enquiry-form .row input{ width:32.64%; margin-left:2px; margin-right:3px;}
.enquiry-form textarea{width:100%;}
.interior-tabs li a{ width:55px; height:40px; padding:0; font-size:9px; text-indent:-9999px;}

/*** End space interior ***/

/*** Begin calculator ***/
.apprx-space, .apprx-cost{ height:80px; width:48%;}
.calculate-form input, .detail-form .left input{ padding-top:5px; line-height:18px;}
.calculate-form .right{ width:80%;}
.detail-form .left{ width:40%;}
.detail-form .right{ width:35%;}
.detail-form .left input{ width:90%;}
.detail-form .right label{ width:85%;}
/*** End calculator ***/


/*** Begin article ***/
.article-page .right-calculate{ clear:none; margin:0; float:right;}
.right-tags{ display:none;}
.right-search{ height:auto; margin:0;}
/*** End article ***/

/*** Begin case study ***/
.gallery-nav-item li:first-child{ border-left:0;}
.gallery-nav-item li:last-child{ border-right:0;}
.gallery-nav-item li{ width:20%; display:block; float:left;}
.gallery-nav-item ul{ width:102.2%;}
.gallery-nav-item li:last-child ul{ width:102.2%;}
.gallery-nav-item li span{ height:40px; padding-left:10px;}
.gallery-nav-item li li{ float:none;}
.gallery-nav-item .activeNav ul{ border:2px solid #fff;}
.gallery-nav-item .activeNav span{height:42px; position:relative; z-index:9; margin-bottom:-2px;}
.gallery-nav-item ul li a{ padding-left:10px;}
.gallery-in{ margin:0 -12px;}
.gallery-thumb{margin: 0 12px 20px; min-height:230px; width:30%;}
.older-article{ padding-top:9px; line-height:16px; height:30px;}
/*** End case study ***/

/*** Begin team ***/
.team-nav-item li{ width:194px; display:inline-block;}
.team-nav-item li span{ height:40px; padding-left:10px;}
.team-nav-item li li{ float:none;}
.team-nav-item ul li a{ padding-left:10px;}
.team-in{ margin:0 -10px;}
.team-member{ margin:0 8px 20px; min-height:220px; width:22.3%;}
.team-nav-item li:first-child ul{ width:198px;}
/*** End team ***/

/*** Begin contact ***/
.contact-page .right-calculate{ margin-bottom:0}
.contact-info section{ width:29.3%;}
/*** End contact ***/


.footer{ height:40px;}
	
/*** Begin home ***/
.captionBg1, .captionBg2, .captionBg3, .captionBg4, .captionBg5{ height:150px; width:340px;}
.slide-tabs-wrap{ width:60%; background:green}
.slide-tabs li a{ width:55px; height:40px; padding:0; font-size:9px; text-indent:-999px;}
.slide-tabs p a{ text-indent:inherit; font-size:13px; height:auto; width:auto;}
.nav-item li.drpdown ul li a{ padding-left:15px;}
/*** End home ***/

}


/*	Retina media query.
	Overrides styles for devices with a 
	device-pixel-ratio of 2+, such as iPhone 4.
-----------------------------------------------    */
@media 
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-device-pixel-ratio: 2) {	
}		
		
@media only screen and (min-width: 992px) and (max-width: 1024px) {
.gallery-in{ margin:0 -15px;}
.gallery-thumb{margin: 0 15px 30px; width:30.1%; min-height:230px;}
.contact-info{ margin:0 -20px;}
.contact-info section{ margin:0 20px 30px;}
.enquiry-form .row input{ width:32.8%;}	
.team-member{ width:22.99%; min-height:260px;}
}
@media only screen and (max-width: 1300px) {
	.txt-img{ width:16%;}
	.gallery-thumb{width:29%;}
}