@charset "utf-8";
/* CSS Document */

/* Table of Contents
-----------------------------------------------------------------------------
	1. Mobile
	2. Large Mobile
	3. iPad
	4. Other
*/

/* 1. Mobile responsive css 640px
------------------------------------------------------------------------------*/
@media (max-width:640px) {
.container{padding:0 10px;}
#content-area{padding: 0 0 50px;}

/* header */
header{height: 60px; margin: 0 0 20px;}
.logo{width:230px; margin:30px 0 0;}
.logo::after{bottom: -20px; width: 20px; height: 20px; background-size:cover;}

.text-slider ul.bxslider li{font-size: 25px; line-height: 30px;}
.text-slider{margin:0 0 35px 0;}
.bx-wrapper .bx-pager{padding-top: 5px !important;}
.bx-pager-link{transform:scale(0.7); -webkit-transform:scale(0.7);}
.text-slider .bx-wrapper .bx-pager .bx-pager-item, .text-slider .bx-wrapper .bx-controls-auto .bx-controls-auto-item{margin-bottom: 5px;}
.text-slider .bx-wrapper .bx-pager, .text-slider .bx-wrapper .bx-controls-auto{right:0;}
.work-gallery .work-filters li{letter-spacing:normal; margin: 0 9px 0 0; font-size: 12px;}
.work-gallery .work-filters{margin: 0 0 35px;}
.text-slider .bx-wrapper .bx-viewport{max-width: 90%;}

/* nav */
nav{display:none;}
.btn-m-nav{width:40px; height:30px; background:url(../images/mobile-icon.jpg) no-repeat 0 0; float:right; cursor:pointer; margin:20px 0 0 0;} 
.mobile-nav{width:100%; height:auto;}
.mobile-nav ul{margin:0;}
.mobile-nav ul li{color:#fff; font-size:12px; line-height:35px; list-style:none; padding:0; background:#666666; border-bottom:1px solid #777777; text-align:center; font-weight:600; margin:0;}
.mobile-nav ul li:last-child{border:none;}
.mobile-nav ul li a{color:#fff; display:block; font-weight:600;}
.mobile-nav ul li:hover{background:#cccccc;}
.mobile-nav ul li a:hover{text-decoration:none; color:#ff7801;}

/* content */
.contact-detail .contact-form{max-width: 355px;}
.contact-detail .contact-form .block input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"]{width:90%;}
.contact-detail .contact-form .block{width:100%;}
.contact-detail .contact-form .block textarea{width:90%;}
.contact-detail .address-block{margin: 30px 20px 0 0; float:left;}
.contact-detail{margin: 0;}
.contact-detail .contact-form .block{margin: 0 10px 10px 0;}
.contact-detail .contact-form .block.last{margin: 0 0 10px 0 !important;}
.contact-detail .contact-form .block label{margin: 0 0 5px 0;}

.text-caption{margin: 0 0 20px;}
.text-caption h1{font-size: 20px; line-height: 28px;}
.about-director .director-info.last{margin:0;}
.about-director .director-info{max-width: 100%; margin:0 0 20px 0;}
.about-director .director-info .image-caption{margin: 0 0 20px;}
.about-director .director-info .title{margin: 0 0 20px;}

.bottom-client-block h2{font-size: 20px; line-height: 30px;}
.bottom-client-block figure{margin: 0 3% 5%;}

.work-bottom-block .video-caption iframe{width:100%;} 
.work-bottom-block .video-caption{float:none;}
.work-bottom-block .text-caption{margin:20px 0 0 0; float:none; max-width:none;}
.work-top-block{margin: 0 0 25px;}
.work-top-block h1{font-size:25px;}
.work-top-block .img-block a{transform:scale(0.7); -webkit-transform:scale(0.7); margin: 0 5px 0 0;}
.work-bottom-block .slider-img-caption{width:100%;}
.work-bottom-block .slider-text-caption{width:100%; max-width:none; float:left; margin:60px 0 0 0; position:relative;}
.work-bottom-block .slider-text-caption .title{margin: 0 0 10px;}
.pagination-block{position:absolute; top:-40px; left:0;}

.work-gallery .work-block{width:300px; margin:0 auto;}
.work-gallery .work-block .block.big figure{width: 296px;}
.work-gallery .work-block .block.square figure{width: 145px;}
.work-gallery .work-block .block.slim figure{width: 145px;}
.work-gallery .work-block .block .overlay .title span{font-size: 12px; line-height:15px; padding:0 20px;}

/* footer */
footer{padding: 30px 0;}
.footer-left{margin: 0 0 20px;}
.footer-left span{font-size: 20px; line-height: 30px;}
.footer-right{float:left; width:auto; max-width:none;}
.footer-right .title{font-size: 20px; line-height:35px;}
.footer-right p{margin: 0 0 20px;}
.copyright{font-size: 10px; margin: 20px 0 0;}

/* client block */
.clients .clients-block .text-caption{width:100%; display:block;}
.clients .clients-block .img-caption{float: left;}
.client-text-caption h1{font-size:22px; line-height:30px;}
.client-text-caption{margin: 0 0 20px;}
.clients .clients-block .img-caption figure{max-width: 170px;}
.clients .clients-block .text-caption p{font-size:13px; line-height:20px;}
.clients .clients-block .text-caption .title{margin:0 0 8px 0;}
}

/* 2. Large Mobile responsive css 640px
------------------------------------------------------------------------------*/
@media (min-width:641px) and (max-width:767px) {
.container{padding:0 10px;}
#content-area{padding: 0 0 50px;}

/* header */
header{height: 100px; margin: 0 0 20px;}
.logo{width:230px; margin: 65px 0 0;}
.logo::after{bottom: -20px; width: 20px; height: 20px; background-size:cover;}

.bx-wrapper .bx-pager{padding:10px 0 0 0 !important;}
.text-slider ul.bxslider li{font-size: 30px; line-height:40px;}
.text-slider{margin:0 0 35px 0;}
.text-slider .bx-wrapper .bx-pager, .text-slider .bx-wrapper .bx-controls-auto{right:0;}
.client-text-caption h1{font-size: 32px; line-height: 40px;}
.client-text-caption{margin: 0 0 40px;}

/* nav */
nav{margin: 65px 0 0;}
nav ul li{font-size:12px;}

/* content */
.contact-detail .contact-form{max-width:355px;}
.contact-detail .contact-form .block input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"]{width:270px;}
.contact-detail .contact-form .block{width:300px;}
.contact-detail .contact-form .block textarea{width:270px;}
.contact-detail .address-block{margin: 0 20px 0 0;}
.contact-detail{margin: 0;}

.text-caption{margin: 0 0 40px;}
.text-caption h1{font-size: 28px; line-height: 40px;}
.about-director .director-info.last{margin:0;}
.about-director .director-info{max-width: 48%;}

.bottom-client-block h2{font-size: 32px; line-height: 40px;}
.bottom-client-block figure{margin: 0 2px 4px;}

.work-gallery .work-filters li{font-size:12px;}
.work-bottom-block .video-caption{width:100%;}
.work-bottom-block .video-caption iframe{width:100%;} 
.work-bottom-block .text-caption .title{font-size:18px;}
.work-bottom-block .text-caption{margin:0; width:100; float:left; max-width:none;}
.work-bottom-block .text-caption .title{margin: 20px 0 15px;}
.work-top-block .img-block a{transform:scale(0.9); -webkit-transform:scale(0.9); margin: 0 15px 0 0;}
.work-bottom-block .slider-img-caption{width:100%;}
.work-bottom-block .slider-text-caption{width:100%; max-width:none; float:left; margin:60px 0 0 0; position:relative;}
.work-bottom-block .slider-text-caption .title{margin: 0 0 10px;}
.pagination-block{position:absolute; top:-40px; left:0;}
.work-gallery .work-block{width:620px; margin:0 auto;}
.work-gallery .work-block .block.big figure{width: 407px;}
.work-gallery .work-block .block.square figure{width: 201px;}
.work-gallery .work-block .block.slim figure{width: 201px;}
.work-gallery .work-block .block .overlay .title span{padding: 0 30px; font-size: 15px; line-height:20px;}

/* footer */
footer{padding: 30px 0;}
.footer-left span{font-size: 30px;}
.footer-right .title{font-size: 30px;}

/* client block */
.clients .clients-block .text-caption{max-width:380px;}
}

/* 3. iPad responsive css 768px to 1023px
------------------------------------------------------------------------------*/
@media (min-width:768px) and (max-width:925px) {
.container{padding:0 10px;}

/* header */
header{margin: 0 0 20px; height:130px;}
.logo{width:350px; margin:70px 0 0;}
.logo:after{ width:37px; height:24px; bottom:-25px; background-size: cover;}

.text-slider .bx-wrapper .bx-pager, .text-slider .bx-wrapper .bx-controls-auto{right:0;}

/* nav */
nav{margin:78px 0 0;}
nav ul li{font-size:13px; margin:0 20px 0 0;}

/* content */
.contact-detail .contact-form{max-width: 60%;}
.contact-detail .contact-form .block input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"]{width:170px;}
.contact-detail .contact-form .block{width:200px;}
.contact-detail .contact-form .block textarea{width:400px;}
.contact-detail .address-block{margin: 0 35px 0 0;}
.contact-detail{margin: 0 0 20px;}

.work-bottom-block .video-caption{width:65%;}
.work-bottom-block .video-caption iframe{width:100%;} 
.work-bottom-block .text-caption{margin:0; width:30%;}
.work-bottom-block .slider-img-caption{width:65%; background-size:cover;}
.work-bottom-block .slider-img-caption .slider-img{width:450px; height:395px; background-size:cover;}
.work-bottom-block .slider-text-caption{margin:0; width:30%}
.work-gallery .work-block{width:744px; margin:0 auto;}
.work-gallery .work-block .block.big figure img{width: 492px;}
.work-gallery .work-block .block.square figure img{width: 244px;}
.work-gallery .work-block .block.slim figure img{width: 244px;}
.work-gallery .work-block .block .overlay .title span{padding: 0 30px; font-size: 17px; line-height:20px;}

.clients .clients-block .text-caption{max-width:500px;}
.text-caption h1{font-size:32px; line-height:49px;}
}


/* 4. Other media-query
------------------------------------------------------------------------------*/
@media (min-width:568px) and (max-width:640px) {
.bottom-client-block figure{margin: 0 1% 5%;}	
.contact-detail .contact-form{width:50%;}
.contact-detail .contact-form .block{width: 270px;}
.contact-detail .contact-form{max-width: 100%;}
.contact-detail .address-block{margin: 0;}
.contact-detail .contact-form .block.full-width{width:90%;}
.contact-detail .contact-form .block textarea{width: 80%;}
.about-director .director-info{max-width: 49%; margin:0 10px 0 0;}
.text-caption h1{font-size: 25px;}
.contact-detail .contact-form .block input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"]{width:80%;}
.text-slider .bx-wrapper .bx-viewport{max-width:95%;}

/*.clients .clients-block .text-caption{max-width: 65%; display:table-cell;}
.clients .clients-block .img-caption{float:right;}
.clients .clients-block .text-caption p{font-size: 13px; line-height:20px;}
.clients .clients-block .text-caption .title{font-size: 14px;}*/

.work .video-caption{float:left;}
.work .text-caption{margin:20px 0 0 0; float:right; max-width:210px;}
.video-caption iframe{width:320px;}
.work-gallery .work-filters li{font-size: 14px; margin: 0 20px 0 0; letter-spacing: 0.1em;}
}