/**
 * Name: grid.css
 * Version: 1.0.0
 *	
 *	-
 *
 *	T.O.C
 *	
 *	#Base Grid
 *  #Large Display
 *	#Tablet (Portrait)
 *  #Mobile (Portrait and landscape)
 *  #Align
 *	#Responsive Images and embeds
 *	#Clearing
 *  #ResponsiveFormInputs
 */
 

/* ==========================================================================
   #Base Grid
   ========================================================================== */

	.row { 
		position: relative; 
		width: 940px; 
		margin: 0 auto;
	}
	
	.row .row { 
		width: auto; 
		margin: 0;
	 }

 	.span1, 
	.span2, 
	.span3, 
	.span4, 
	.span5, 
	.span6, 
	.span7, 
	.span8, 
	.span9, 
	.span10, 
	.span11, 
	.span12 { float: left; }


	
	.span6 { 
		width: 460px; 
		margin-left: 20px; 
	}

	.span1:first-child, 
	.span2:first-child, 
	.span3:first-child, 
	.span4:first-child, 
	.span5:first-child, 
	.span6:first-child, 
	.span7:first-child, 
	.span8:first-child, 
	.span9:first-child, 
	.span10:first-child, 
	.span11:first-child, 
	.span12:first-child { margin-left: 0; }
 
	.visible-phone { display: none !important; }
	.visible-tablet { display: none !important; }
	.hidden-desktop { display: none !important; }
	.visible-desktop { display: inherit !important; } 

/* ==========================================================================
   #Large Display
   ========================================================================== */

	@media (min-width: 1400px) {
	
		.row { width: 1170px; }
	

		}
		
		.span6 { 
			width: 570px; 
			margin-left: 30px; 
		}
		

		
	}
 
/* ==========================================================================
   #Tablet (Portrait)
   ========================================================================== */

	@media (min-width: 768px) and (max-width: 979px) {
		
		.row { width: 705px; }
	

		
		.span6 { 
			width: 345px; 
			margin-left: 15px; 
		}

		
		.hidden-desktop { display: inherit !important; } 
		.visible-desktop { display: none !important; }
		.visible-tablet { display: inherit !important; } 
		.hidden-tablet { display: none !important; }
		
	}

/* ==========================================================================
   #Mobile (Portrait and Landscape )
   ========================================================================== */

	@media (max-width: 767px) {
		
		.row { width: auto; }
		
		.span1,
		.span2,
		.span3,
		.span4,
		.span5,
		.span6,
		.span7,
		.span8,
		.span9,
		.span10,
		.span11,
		.span12 { 
			float: none;
			display: block;
			width: 100%;
			-webkit-box-sizing: border-box;
			   -moz-box-sizing: border-box;
					box-sizing: border-box;
			margin-left: 0;
		}
		
		.hidden-desktop { display: inherit !important; }
		.visible-desktop { display: none !important; }
		.visible-phone { display: inherit !important; }
		.hidden-phone { display: none !important; }
		
	}
	
/* ==========================================================================
   #Align
   ========================================================================== */

	.float-left { float: left; }
	.float-right { float: right; }

/* ==========================================================================
   #Responsive Images and Embeds
   ========================================================================== */

	.responsive-img {
		display: block; 
		max-width: 100%; 
		height: auto; 
	}
	
	/**
 	 * 1. 16/9 ratio
 	 */
	 
	.responsive-embed {
		position: relative;
		overflow: hidden;
		height: 0;
		padding: 0;
		padding-bottom: 56.25%; /* 1 */	
		margin-bottom: 20px;
	}

	.responsive-embed iframe,
	.responsive-embed object,
	.responsive-embed embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
/* ==========================================================================
   #Parallax
   ========================================================================== */

	.parallax {
		overflow: hidden;
		margin: 40px 0;
		background-attachment: scroll;
		background-repeat: no-repeat;
		background-position: 50% 0;
		-webkit-background-size: cover;
				background-size: cover;		
	}
	
	.parallax.parallax-enabled { background-attachment: fixed !important; }
	
	#bg-parallax-1 { background-image: url(../../_content/backgrounds/1920x1000.jpg); }
	#bg-parallax-2 { background-image: url(../../_content/backgrounds/1920x500.jpg); }
	#bg-parallax-3 { background-image: url(../../_content/backgrounds/1920x1600.jpg); }
	#bg-parallax-4 { background-image: url(../../_content/backgrounds/1920x400.jpg); }
	#bg-parallax-5 { background-image: url(../../_content/backgrounds/1920x700.jpg); }
	#bg-parallax-6 { background-image: url(../../_content/backgrounds/1920x1400.jpg); }
	#bg-parallax-7 { background-image: url(../../_content/backgrounds/1920x1200.jpg); }
	#bg-parallax-8 { background-image: url(../../_content/backgrounds/1920x800.jpg); }
	#video-parallax-1 { background-image: url(../../_content/backgrounds/1920x1000.jpg); }
	#bg-portfolio-box { background-color: #dff5d8; }
	
	/*
	 * 1. Overwite element color when in parallax
	 */
	
	.parallax { color :#fff; } /* 1 */
	
	.parallax h1, 
	.parallax h2, 
	.parallax h3, 
	.parallax h4, 
	.parallax h5, 
	.parallax h6,
	.parallax a,
	.parallax .btn,
	.parallax .milestone .milestone-content,
	.parallax .milestone .milestone-description,
	.parallax .tabs-container .tabs-menu li a,
	.parallax .vertical-tabs-container .tabs-menu li a,
	.parallax .icon-box-4 i,
	.parallax .headline span.bullet:before,
	.parallax .headline span.bullet:after,
	.parallax .headline-2 i,
	.parallax .icon-box-1 h3 a,
	.parallax .icon-box-2 h3 a,
	.parallax .icon-box-3 h3 a,
	.parallax .icon-box-4 h3 a,
	.parallax .icon-box-5 h3 a,
	.parallax .icon-box-6 h3 a,
	.parallax .icon-box-7 h3 a,
	.box h1, 
	.box h2, 
	.box h3, 
	.box h4, 
	.box h5, 
	.box h6,
	.box a,
	.box .btn,
	.box .milestone .milestone-content,
	.box .milestone .milestone-description,
	.box .tabs-container .tabs-menu li a,
	.box .vertical-tabs-container .tabs-menu li a,
	.box .icon-box-4 i,
	.box .headline span.bullet:before,
	.box .headline span.bullet:after,
	.box .headline-2 i,
	.box .icon-box-1 h3 a,
	.box .icon-box-2 h3 a,
	.box .icon-box-3 h3 a,
	.box .icon-box-4 h3 a,
	.box .icon-box-5 h3 a,
	.box .icon-box-6 h3 a,
	.box .icon-box-7 h3 a { color: #fff; }
	
	.parallax abbr[title] { border-bottom: 1px dotted #fff; }		
	
	/*
	 * 1. added this because adding position: relative; to .parallax breaks parallax backgrounds in chrome
	 * 2. Parallax texture overlay
	 * 3. should be used to wrap parallax content if you are using a Parallax texture overlay
	 *
	 */
	
	.parallax-content { 	/* 1 */
		position: relative;
		z-index: 1;	
	}
	
	.parallax-overlay { /* 2 */
		position: absolute;
		z-index: 2;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-attachment: scroll;
		background-repeat: repeat;
		background-position: 0 0;
	}
	
	.parallax-content-inner { /* 3 */
		position: relative;
		z-index: 3;
	}
	
	.parallax .accordion,
	.parallax .toggle,
	.box .accordion,
	.box .toggle { margin-bottom: 0; }
	
	.parallax .accordion-item-toggle,
	.parallax .toggle-item-toggle,
	.box .accordion-item-toggle,
	.box .toggle-item-toggle { color: #555; }
	
	.parallax .accordion-item-toggle,
	.parallax .toggle-item-toggle,
	.box .accordion-item-toggle,
	.box .toggle-item-toggle { border-bottom: none; }
	
	.parallax .icon-box-4,
	.box .icon-box-4 { background-color: transparent; }
	
	.parallax .table-bordered th:first-child,
	.parallax .client-logos li,
	.box .table-bordered th:first-child,
	.box .client-logos li { border-left-color: #fff; }
	
	.parallax .client-logos li:last-child,
	.box .client-logos li:last-child { border-right-color: #fff; }
	
	.parallax .client-logos,
	.box .client-logos,
	.parallx #newsletter-subscribe-form,
	.box #newsletter-subscribe-form { margin-bottom: 0; }
	
	.parallax .headline:before,
	.parallax .headline:after,
	.box .headline:before,
	.box .headline:after { border-color: #fff; }
	
	.parallax ul.check,
	.box ul.check { margin: 30px 0 30px 30px; }
	
	.parallax ul.check li,
	.box ul.check li {
		margin-bottom: 10px;
		font-size: 18px; 
	}
	
	.parallax ul.check li:last-child,
	.box ul.check li:last-child { margin-bottom: 0; }
	
	.parallax ul.check li:before,
	.box ul.check li:before { font-size: 18px; }
	
	.box {
		position: relative;
		padding: 30px 0;
		margin: 40px 0;
		background: #4b5759 no-repeat center center;
		color: #fff;
	}
	
	.box-overlay {
		position: absolute;
		z-index: 2;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-attachment: scroll;
		background-repeat: repeat;
		background-position: 0 0;
	}
	
	.box-content {
		position: relative;
		z-index: 3;
	}
	
	.box-2 {
		padding: 60px 0;
		border-top: 1px solid #d7d7d7;
		border-bottom: 1px solid #d7d7d7;
		margin: 40px 0;
		background-color: #f3f3f3;
	}
	
	.box-2 .portfolio-strip { margin-bottom: 0; }
	
	.box-2 .headline:after { background-color: #dff5d8; }
	
	.get-in-touch-box {
		padding-top: 20px;
		border-top: 1px solid #d7d7d7;
		border-bottom: 1px solid #d7d7d7;
		margin: 100px 0 40px 0;
		background: #f3f3f3 url(../../_content/backgrounds/1920x70.jpg) no-repeat bottom center;
	}
	
	.get-in-touch-box img {
		display: block;
		margin-top: -80px;
	}
	
	.get-in-touch-box h2 { color: #fff; }
	
	@media (min-width: 768px) and (max-width: 979px) {
			
		.get-in-touch-box img { margin-top: -25px; }
		
	}
	
	@media (max-width: 767px) {
			
		.get-in-touch-box img { margin-top: 0; }
		.get-in-touch-box h2 { color: #4b5759; }
		
	}	

@media screen and (max-width: 960px) {
  #video {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}

@media screen and (min-width: 960px) {
  #novideo {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}