/*==========================================================================================
	
Media CSS File
This file contains all styles for responsive layout

==========================================================================================*/


/*----------------------------------------------------*/
/*	1.	More than 1041px
/*----------------------------------------------------*/
@media only screen and (max-width: 1041px) {
	
	.prev {left:20px !important;}
	.next {right:20px !important;}
	
	#header.sticky .after {display:none !important;}
	
	#header li.center {display:none !important;}
	
	#core .core-values li .core {background-color:#f9f9f9!important;}
	#core .core-values li .fa {color:#000!important;}
	
	.review .left {width:100% !important;margin:0 !important;}
	.review .right {width:100% !important;margin:0 !important;}
	
	.wrap-project {padding:0 4% !important;}
	
	#mobile {display:block !important;float:left !important;color:#fff !important;font-family: 'Ubuntu', sans-serif !important;margin:2px 0 0 2px !important;}
	
	#services .testimonial {padding-left:5% !important;padding-right:5% !important;/*width:90% !important;*/}
	
	#portfolio li {width:50% !important;}
	
	#header{background-color:#ffffff !important;}
	.wrap {width:100% !important;}
	
	#contacts .get-in-touch {width:323px !important;}
	#contacts .text {width:350px !important;margin-left:-350px !important;top:70px !important;}
	
	.smart-wrap {width:570px !important;}
	
	/* mobile navigation menu */
	#navigation {left:100% !important;position:fixed !important;width:100% !important;top:60px !important;background-color:#252525 !important;}
	#navigation.visible {left:0 !important;}
	#navigation li {width:100% !important;float:left !important;}
	#navigation li a {padding:10px !important;text-align:center !important;color:#fff!important;}
	#navigation li.parent {display:none !important;}
	
	#nav-mobile {display:block !important;float:right !important;width:60px !important;height:60px !important;background: #252525 url(../img/sprite.png) no-repeat 21px -245px !important;cursor:pointer !important;}
	#nav-mobile:hover {background-color:#252525 !important;}
	
	#core .core-values li {width:50% !important;}
	#core .core-values li .fa {left:44% !important;top:45px !important;}
	
	.references {padding-bottom:30px !important;}
	.chart {margin:0 20px 25px 20px!important;}
	
	.title-contact-mobile {display:inline-block !important;margin:50px 0 !important;}
	
	#contacts .contacts-mobile-over {display:block !important;}
	
	#contacts .get-in-touch {width:100% !important;top:10px !important;left:auto !important;padding:0 20px !important;}
	#contacts .get-in-touch input, #contacts .get-in-touch textarea, #zoomout, #zoomin, #contacts .get-in-touch button {
		box-shadow:none !important;-moz-box-shadow:none !important;-webkit-box-shadow:none !important;
	}
	
	#footer .bottom {display:none !important;}
	
	.post .vimeo-frame {height:250px !important;}
	
	#navigation li a.active {background-color:#535353 !important;color:#fff !important;}
	#navigation li a.active:hover {background-color:#fff !important;color:#000 !important;}
	#navigation li a span.border {display:none!important;}
	#navigation li a:hover {background-color:#000!important;}
	
	.smart-slide {margin-bottom:10px !important;}
	
	.laptop-over {left:120px !important;top:787px !important;}
	
	#about .present .image a.button {padding:10px 0px !important;}
	
	.cr-video-content {width:500px !important;margin-left:-250px !important;}
	.cr-video-content {font-size:2em !important;}
	.cr-video-content a {padding:7px 30px !important;border:4px solid #fff !important;}
	
	.pies li p {height:100px !important;}
	
	#phone .left {display:none !important;}
	#phone .right {width:100% !important;}
	
	.capture-img {height:auto !important;width:100% !important;}
	
	.wrap.youtube-wrap {margin-left:-384px !important;}
	
}

/*----------------------------------------------------*/
/*	1.	Between 1041px and 800px
/*----------------------------------------------------*/
@media only screen and (max-width: 800px) {
	
	.page-title {font-size:35px !important;}
	.page-subtitle {font-size:15px !important;}
	
	.screens .center {width:100% !important;float:left !important;left:auto !important;margin-left:auto !important;text-align:center !important;}
	.screens .center img {max-width:100% !important;}
	
	#portfolio .client {display:none!important;}
	
	.big-text {font-size:30px !important;margin-top:-40px !important;}
	.small-text {font-size:15px !important;margin-top:14px !important;}
	
	.screens .left, .screens .right {display:none !important;}
	
	#about .facts li {width:40% !important;margin-bottom:45px !important;}
	#about .facts li.break {display:none !important;}
	
	.customers li {width:25% !important;}
	
	#core .core-values li .fa {left:46.2% !important;top:50px !important;}
	
	#carousel .center-holder .right {display:none !important;}
	#carousel .center {}
	#carousel .center {position:absolute !important;left:0 !important;margin-left:0 !important;}
	
	#contacts .get-in-touch {width:100% !important;top:10px !important;}
	#contacts .text {width:350px !important;margin-left:-350px !important;top:70px !important;}
	
	.smart-wrap {width:190px !important;}
	
	.pies li {max-width:49% !important;height: 400px !important;}
	.pies li p {padding: 0 20px !important;height: 130px !important;}
	
	#core .core-values li {width:100% !important;}
	
	#footer {min-height:130px !important;}
	#footer .wrap {width:100% !important;padding:0 20px !important;box-sizing:border-box !important;-moz-box-sizing:border-box !important;-webkit-box-sizing:border-box !important;}
	#footer .hide-mobile {display:none !important;}
	
	#map {height:540px !important;}
	
	.post .vimeo-frame {height:175px !important;}
	
	.article-nav .to_date, .article-nav .fa {display:none !important;}
	.article-nav .prev a {padding-left:10px !important;}
	.article-nav .next a {padding-right:10px !important;}
	
	.comment-list ul {margin-left:40px !important;}
	
	.tabs-holder .tabs li a {padding:7px !important;}
	
	.column {margin-bottom:20px !important;}
	.column-1, .column-2, .column-3 {width:100% !important;}
	
	.space {padding:5px 0 !important;margin:0 !important;}
	
	#skills {margin-bottom:30px !important;}
	
	.laptop-over {display:none !important;}
	.laptop {width:400px !important;height:232px !important;background-size:cover !important;-moz-background-size:cover !important;-webkit-background-size:cover !important;}
	
	#about .present .image a.button {display:none !important;}
	
	.cr-video-content {width:320px !important;margin-left:-160px !important;}
	.cr-video-content {font-size:1.5em !important;}
	.cr-video-content a {padding:5px 25px !important;border:3px solid #fff !important;}
	
	.wrap.youtube-wrap {margin-left:-200px !important;}
	
	.youtube-wrap {display:none !important;}
}

@media only screen and (max-width: 600px) {
	#portfolio li {width:100% !important;}
}

/*----------------------------------------------------*/
/*	1.	Between 800px and 400px
/*----------------------------------------------------*/
@media only screen and (max-width: 400px) {
	
	.page-title {font-size:25px !important;}
	.page-subtitle {font-size:15px !important;}
	
	.customers li {width:33% !important;}
	
	.prev {top:117px !important;left:30px !important;}
	.next {top:117px !important;right:30px !important;}
	
	.pies li {max-width:100% !important;height: 343px !important;}
	
	.post .vimeo-frame {height:130px !important;}
	
	.post {padding-left:0 !important;}
	
	.tabs-holder .tabs li a {font-size:0.8em !important;}
	
	.laptop {width:320px !important;height:185px !important;}
	
	.wrap.youtube-wrap {display:none !important;left:0 !important;bottom:0 !important;top:auto !important;margin:0 !important;}
	#youtube-controls h2, #youtube-controls h3 {display:none !important;}
	#youtube-controls {margin:0 !important;}
}