.timeline{padding-bottom:0;}
.timeline > li:last-child{ margin:0;}

#mobileBanner{display:none; position:relative; z-index:999;}

@media only screen and (max-width:1024px) {
	
	#intro{display:flex;}
	header{ background:rgba(255,255,255,.98); position:fixed; top:0; left:0; width:100%;}
	
	header a.logo span{color:#008E00;}
	
	nav ul li{display:none;}
	nav ul li:last-child{display:block;}
	
#puzzle.showing, #banner video{display:none;}
	#banner{background:url(../img/video-poster.jpg) center / cover;}
	
	#product-sec .owl-nav button.owl-prev{left:-15px;}
	#product-sec .owl-nav button.owl-next{right:-15px;}
	
	.missionContent{ max-width:100%; flex:0 0 100%;}
	
	.timeline > li{margin-bottom:50px;}
	
	.timeline > li > .timeline-panel{width:100%; padding-top:50px;}
	.timeline > li > .timeline-panel:before, .timeline > li > .timeline-panel:after{display:none;}
	.timeline > li > .timeline-badge{ top:-18px;}
	
	#contentSec h1{font-size:25px;}

	#product-sec .products .box .desc, #product-sec .products .item:hover img{opacity:1; visibility:visible;}
	#product-sec .products .item:hover .box{box-shadow:none;}
	#product-sec .products figure{height:inherit;}
	#product-sec .products .box .desc{position:relative;}
	#product-sec .products h4{display:none;}
	#product-sec .products .box p{margin:0;}
	#product-sec .owl-carousel .owl-item img{max-width:200px;}
	#product-sec .owl-nav button{top:30%;}
	#product-sec .wave{display:none;}
}

@media only screen and (max-height:700px) {
	

	
#services-sec .container{ max-width:600px;}
.servicesasimg .logoOnly{width:70px; height:70px; margin:0 !important; transform:translate(-50%, -50%); }
.servicesasimg{background-size:200px auto; padding-bottom:32px;}
}

@media only screen and (max-width:800px) {
	
	
		.formCover,
		.formCover.career{width:calc(100% - 28px); left:50%; top:50%; bottom:auto; margin:0; padding:26px 22px; max-height:calc(100% - 28px); overflow:auto; transform:translate(-50%, -50%);}
		.form-metric strong{font-size:56px;}
		.form-metric > span{font-size:25px;}
	
	#banner{height:auto;}
	#banner .container{position:relative; max-width:100%; width:100%; left:0; margin:0; height:auto; padding:0; }
	.billboard{position:relative; background:none; height:auto; display:none;}
	.ad{margin:0; width:100%;}
	
	
	#banner .container{display:none;}
	#mobileBanner{display:block;}

	/* Keep the Folder 1 hero readable on smaller screens. */
	#banner{
		width:100%;
		min-height:100vh;
		min-height:100dvh;
		height:100vh;
		height:100dvh;
		flex-basis:100dvh;
		padding:70px 30px 40px;
		background:url(../img/video-poster.jpg) center / cover;
	}
	#banner .hero-text h1{font-size:38px;}
	#banner .hero-text h2{font-size:30px;}
	#banner .hero-text p{font-size:17px;}
	#banner .billboard-wrapper{display:none;}
	#mobileBanner{display:none;}
	
	
	
	.section{min-height:inherit;}
	
	.focusservice, .servicesasimg{display:none;}
	.mobileContent{display:block;}
	
	#product-sec{ background:linear-gradient(rgba(0, 110, 23, .91), rgba(0, 83, 16, .94)), url(../img/product-bg.jpg) center / cover; padding-top:30px;}
	
	#devProcess{padding-top:30px;}
	#devProcess .process{padding:30px 0;}
	#devProcess .process span:after, #devProcess .belt{display:none;}
	
	#valuesSec{min-height:inherit; padding-bottom:0;}
	#valuesSec img{display:none;}
	#valuesSec .branch h3{position:relative; left:0;}
	#valuesSec .branch{padding:0 20px; width:100%; margin-bottom:30px;}
	#valuesSec .values{position:relative; left:inherit !important; top:inherit !important; bottom:inherit !important; display:block; 
	width:23.5%; float:left; margin:5px; font-size:13px; padding:0 20px; height:80px; display:flex; align-items:center; background-color:#E0F1EE; border-radius:6px;}
	#valuesSec .bg{position:relative;}
	
	.servicesiconshape {background-size:70% auto;}
	
	
	footer .contactSupport span{font-size:13px; display:block; margin-bottom:15px;}
	footer .contactSupport a.phone{font-size:15px; display:block;}
	footer address{font-size:11px;}
	

}

@media only screen and (max-width:600px) {
	
	
	#product-sec h1{font-size:20px;}
	#product-sec h1 strong{font-size:26px;}
	
	#devProcess img.gear{display:none;}
	#devProcess [class*=col-]{padding:0 30px;}

	#valuesSec .values{width:48%;}
	
	
	
	footer ul{display:none;}
	footer address{display:block; text-align:center;}
	footer address a{display:flex; justify-content:center;}
}

@media only screen and (max-width:500px) {
	#valuesSec .values{width:46%;}
	
}