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

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


/*----------------------------------------------------*/
/*	1.	More than 1041px
/*----------------------------------------------------*/


.toggle-link { display:none;}

@media only screen and (max-width: 1475px) {
    #programs i.fa { font-size:40px;}
}

@media only screen and (max-width: 1041px) {
	
	
	.prev {left:20px;}
	.next {right:20px;}
	
	#header.sticky .after {display:none;}
	
	#header li.center {display:none;}
	
	#core .core-values li .core {background-color:#f9f9f9!important;}
	#core .core-values li .fa {color:#000!important;}
	
	.review .left {width:100%;margin:0;}
    .review .left img {margin:0 auto;}
	.review .right {width:100%;margin:0;}
	
	.wrap-project {padding:0 4%;}
	
	#mobile {
	display:block;
	float:left;
	font-family: 'Quintessential', cursive;
	font-weight:600; 
	font-size:44px; 
	text-transform:lowercase; 
	margin:0 0 0 20px;
	letter-spacing:.1rem;
	line-height: none;
	color:#fff;
	-webkit-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-o-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	transform: rotate(-30deg);
	z-index: 999;

	}

	#services .testimonial {padding-left:5%;padding-right:5%;width:90%;}
	
	#programs li {width:50%;}
    #programs i.fa { font-size:40px;}
	
	#header{background: rgba(0,0,0,0.75);}
	.wrap {width:100%;}
	
	#contacts .get-in-touch {width:323px;}
	#contacts .text {width:350px;margin-left:-350px;top:70px;}
	
	.smart-wrap {width:570px;}
	
	/* mobile navigation menu */
	#navigation {left:100%;position:fixed;width:100%;top:60px;background: rgba(0,0,0,0.75);}
	#navigation.visible {left:0;}
	#navigation li {width:100%;float:left;}
	#navigation li.programs { width:100%;}
	#navigation li a {padding:10px;text-align:center;color:#fff!important;}
	#navigation li.parent {display:none;}
	
	#navigation li a.active {background-color:#535353;color:#fff;}
	#navigation li a.active:hover {background-color:#fff;color:#000;}
	#navigation li a span.border {display:none!important;}
	#navigation li a:hover {background-color:#000!important;}

	/* navigation submenu */
	#navigation ul.sub-menu {position:absolute;margin:0;padding:0;text-align:left;}
	#navigation ul.sub-menu li {margin-bottom: 4px; float:right;}
	#navigation ul.sub-menu li a {width:100%;background-color:#000;padding:10px 20px;}
	#navigation ul.sub-menu li a:hover {background-color:#fff !important;color:#000 !important;}
	#navigation li:hover > ul {display:block; position:relative !important;}

    /* navigation sub sub menu */
    #navigation ul li ul {display:none;position:absolute;top:0;left:190px;}
	
	#nav-mobile {display:block;float:right;width:60px;height:60px; padding-right:16px;background: url("/images/shared/sprite.png") no-repeat 21px -245px;cursor:pointer;}
	#nav-mobile:hover {background: url("/images/shared/sprite.png") no-repeat 21px -245px rgba(0,0,0,0.50);}

    .nav-controls-staff { top:300px;}
    .nav-controls-staff  .btn-large {
    /* border-radius: 6px;
    font-size: 17.5px;
    padding: 11px 19px;*/

    border-radius: 3px;
    font-size: 12px;
    padding: 4px 14px;}

    .nav-controls-staff .dropdown-menu {top:40px; min-width: 180px; font-size: 12px;}

	/* styling the toggle menu */
	.toggle-link{
	  height:38px;
	  width: 70px;
	  background:#000;
	  display: block;
	  position:absolute;
	  right:0px;             
	  z-index:200;
	  color:#fff;
	  font-family: FontAwesome;
	  font-style: normal;
	  font-weight: normal;
	  text-decoration: inherit;
	  cursor:pointer;
	  speak: none;
	}
	
	/* arrow to indicate that we have subnav*/
	.menu .has-subnav > .toggle-link:after{        
	  content: "\f0d7";
	  position:absolute;            
	  width:50px;
	  top:50%;
	  margin-top:-8px;
	  bottom:50%;
	  right:12px;
	  font-size:28px;
	  color:#fff;
	}
	.menu .has-subnav  > .toggle-link.active:after{ 
	  content: "\f0d8";
	  margin-top:-12px;
	}

	/* submenu ! */
	.sub-menu {
      position: absolute;               
	  max-height: 0em;
	  overflow: hidden;        
	}
	
	
	/* unhide the 2nd level */
	li:hover .sub-menu{ 
	  max-height: 0em; 
	  transition:none;
	  
	} 
	.sub-menu{    
	  background:none;
	  margin-left:0px;
	  margin-top:1px;
	  display:block;
	  width: 100%;
	
	}
	.menu .has-subnav{
	  position:relative;
	}    
	li .sub-menu.active{        
	  overflow:visible;
	  position:relative;
	  transition: max-height 0.5s ease-out;
	}

	#core .core-values li {width:50%;}
	#core .core-values li .fa {left:44%;top:50px;}
	
	.references {padding-bottom:30px;}
	.chart {margin:0 20px 25px 20px!important;}
	
	.title-contact-mobile {display:inline-block;margin:50px 0;}
    .remove-mobile { display:none;}
	
	#contacts .contacts-mobile-over {display:block;}
	
	#contacts .get-in-touch {width:100%;top:10px;left:auto;padding:0 20px;}
	#contacts .get-in-touch input, #contacts .get-in-touch textarea, #zoomout, #zoomin, #contacts .get-in-touch button {
		box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
	}
	
	#footer .bottom {display:none;}
	
	.post .vimeo-frame {height:250px;}
	
	.smart-slide {margin-bottom:10px;}
	
	.laptop-over {left:120px;top:787px;}
	
	#about .present .image a.button {padding:10px 0px;}
	
	.cr-video-content {width:500px;margin-left:-250px;}
	.cr-video-content {font-size:2em;}
	.cr-video-content a {padding:7px 30px;border:4px solid #fff;}
	
	.pies li p {height:100px;}
	
	#phone .left {display:none;}
	#phone .right {width:100%;}
	
	.capture-img {height:auto;width:100%;}
	
	.wrap.youtube-wrap {margin-left:-384px;}
	
}


/*----------------------------------------------------*/
/*	1.	Between 1041px and 800px
/*----------------------------------------------------*/

@media only screen and (max-width: 850px) {
    .main-text {font-weight:700;font-size:40px;line-height:60px;}
    .main-text span {font-weight:700;font-size:30px;line-height:50px;}
    .sub-text {font-weight:400;font-size:18px; line-height:40px; }



}

/*----------------------------------------------------*/
/* iPads (portrait and landscape) ----------- */
/*----------------------------------------------------*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {



}
/*----------------------------------------------------*/
/* iPads (landscape) ----------- */
/*----------------------------------------------------*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

    .review .left {width:50%;margin:0;padding-right:20px;}
    .review .left img {margin:0 auto;}
	.review .right {width:50%;margin:0;}
    .review .right h3.page-title {font-size:35px;font-weight:800;}

}
/*----------------------------------------------------*/
/* iPads (portrait) ----------- */
/*----------------------------------------------------*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    .review .left {width:100%;margin:0;}
    .review .left img {margin:0 auto;}
	.review .right {width:100%;margin:0;}
}


@media only screen and (max-width: 800px) {
	
    .main-text {font-weight:700;font-size:40px;line-height:60px;}
    .main-text span {font-weight:700;font-size:30px;line-height:50px;}
    .sub-text {font-weight:400;font-size:18px; line-height:30px; }
	
	.page-title {font-size:35px;}
	.page-subtitle {font-size:15px;}
	
	.screens .center {width:100%;float:left;left:auto;margin-left:auto;text-align:center;}
	.screens .center img {max-width:100%;}

    #programs .item .over h3.page-subtitle {font-size:16px;font-weight:300;padding:0px 50px;margin-top:10px;border-box;width:auto;}
    #programs .item .over i.fa {display:none!important;}

	
	/*#portfolio .client {display:none!important;}*/
	
	.big-text {font-size:30px;margin-top:-40px;}
	.small-text {font-size:15px;margin-top:14px;}
	
	.screens .left, .screens .right {display:none;}
	
	#incentives .facts li {width:40%;margin-bottom:45px;}
	#incentives .facts strong {font-size:22px;}
	#incentives .facts li.break {display:none;}
	
	.customers li {width:25%;}

	#core .core-values li {width:50%; padding-top:20px;}
	#core .core-values li .fa {left:46.2%;top:50px;}
	
	#carousel .center-holder .right {display:none;}
	#carousel .center {}
	#carousel .center {position:absolute;left:0;margin-left:0;}
	
	#contacts .get-in-touch {width:100%;top:10px;}
	#contacts .text {width:350px;margin-left:-350px;top:70px;}
	
	.smart-wrap {width:190px;}
	
	.pies li {max-width:49%;height: 400px;}
	.pies li p {padding: 0 20px;height: 130px;}
	
	
	
	#footer {min-height:130px;}
	#footer .wrap {width:100%;padding:0 20px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
	#footer .hide-mobile {display:none;}
	
	#map {height:540px;}
	
	.post .vimeo-frame {height:175px;}
	
	.article-nav .to_date, .article-nav .fa {display:none;}
	.article-nav .prev a {padding-left:10px;}
	.article-nav .next a {padding-right:10px;}
	
	.comment-list ul {margin-left:40px;}
	
	.tabs-holder .tabs li a {padding:7px;}
	
	.column {margin-bottom:20px;}
	.column-1, .column-2, .column-3 {width:100%;}
	
	.space {padding:5px 0;margin:0;}
	
	#skills {margin-bottom:30px;}
	
	.laptop-over {display:none;}
	.laptop {width:400px;height:232px;background-size:cover;-moz-background-size:cover;-webkit-background-size:cover;}
	
	#about .present .image a.button {display:none;}
	
	.cr-video-content {width:320px;margin-left:-160px;}
	.cr-video-content {font-size:1.5em;}
	.cr-video-content a {padding:5px 25px;border:3px solid #fff;}
	
	.wrap.youtube-wrap {margin-left:-200px;}
	
	.youtube-wrap {display:none;}
}

@media only screen and (max-width: 600px) {
	#programs li {width:100%;}
    #incentives .facts li {width:40%;margin-bottom:20px;}
	#incentives .facts strong {font-size:16px;}
	#incentives .facts li.break {display:none;}

    .main-text {font-weight:700;font-size:30px;line-height:60px;}
    .main-text span {font-weight:700;font-size:30px;line-height:50px;}
    .sub-text {font-weight:400;font-size:20px; line-height:30px; }
}

/*----------------------------------------------------*/
/*	1.	Between 800px and 400px
/*----------------------------------------------------*/
@media only screen and (max-width: 400px) {
	
	#incentives .facts li {width:40%;margin-bottom:20px;}
	#incentives .facts strong {font-size:16px;}
	#incentives .facts li.break {display:none;}

    .main-text {font-weight:700;font-size:28px;line-height:50px;}
    .main-text span {font-weight:700;font-size:28px;line-height:20px;}
    .sub-text {font-weight:400;font-size:20px; line-height:30px; }
	
	.page-title {font-size:25px;}
	.page-subtitle {font-size:15px;}
	
	.customers li {width:33%;}
	
	.prev {top:117px;left:30px;}
	.next {top:117px;right:30px;}
	
	.pies li {max-width:100%;height: 343px;}
	
	.post .vimeo-frame {height:130px;}
	
	.post {padding-left:0;}
	
	.tabs-holder .tabs li a {font-size:0.8em;}
	
	.laptop {width:320px;height:185px;}
	
	.wrap.youtube-wrap {display:none;left:0;bottom:0;top:auto;margin:0;}
	#youtube-controls h2, #youtube-controls h3 {display:none;}
	#youtube-controls {margin:0;}
}