/*--RES MENU--*/
@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot');
	src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.woff') format('woff'),
		url('../fonts/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Common styles of menus */
header nav.res-menu{display: block; width: 100%;}

.dl-menuwrapper {
	width: 100%;
	max-width: 300px;
	float: left;
	position: relative;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	-webkit-perspective-origin: 50% 200%;
	perspective-origin: 50% 200%;
}

.dl-menuwrapper:first-child {
	margin-right: 0px;
}

.dl-menuwrapper button {
	background: none;
	border: none;
	width: 48px;
	height: 45px;
	text-indent: -900em;
	overflow: hidden;
	position: relative;
	cursor: pointer;
	outline: none;
}

.dl-menuwrapper button:hover, .dl-menuwrapper button.dl-active{background: none;}

.dl-menuwrapper ul {
	background: #f7f7f7;
}

.dl-menuwrapper button:after {
	content: '';
	position: absolute;
	width: 68%;
	height: 5px;
	background: #39a3e1;
	top: 10px;
	left: 16%;
	box-shadow: 
		0 10px 0 #39a3e1, 
		0 20px 0 #39a3e1;
	border-radius: 20px;
}

.dl-menuwrapper ul {
	list-style: none;
	padding: 0;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	width: 100%;
	margin: 15px 0 10px;
}

.dl-menuwrapper li {
	position: relative;
	margin: 5px 0;
}

.dl-menuwrapper li a {
	display: block;
	position: relative;
	padding: 15px 20px;
	line-height: 20px;
	color: #666;
	outline: none;
	text-align: left;
	letter-spacing: 0.05em;
	font: normal 14px 'barlowsemibold';
	text-transform: uppercase;
}

.dl-menuwrapper li a:hover {
	font: normal 14px 'barlowsemibold';
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0;
	color: #39a3e1;
}

.no-touch .dl-menuwrapper li a:hover {
	background: rgba(255,248,213,0.1);
}

.dl-menuwrapper li.dl-back > a {
	padding-left: 30px;
	background:#EEEEEE;
}

.dl-menuwrapper li.dl-back:after,
.dl-menuwrapper li > a:not(:only-child):after {
	position: absolute;
	top: 0;
	line-height: 43px;
	font-family: 'icomoon';
	speak: none;
	-webkit-font-smoothing: antialiased;
	content: "\e000";
}

.dl-menuwrapper li.dl-back:after {
	left: 10px;
	color: #666;
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.dl-menuwrapper li > a:after {
	right: 10px;
	color: #666;
}

.dl-menuwrapper .dl-menu {
	margin: 45px 0 0 5px;
	position: absolute;
	width: 95%;
	opacity: 0;
	pointer-events: none;
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.dl-menuwrapper .dl-menu.dl-menu-toggle {
	transition: all 0.3s ease;
}

.dl-menuwrapper .dl-menu.dl-menuopen {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
}

/* Hide the inner submenus */
.dl-menuwrapper li .dl-submenu {
	display: none;
}

/* 
When a submenu is openend, we will hide all li siblings.
For that we give a class to the parent menu called "dl-subview".
We also hide the submenu link. 
The opened submenu will get the class "dl-subviewopen".
All this is done for any sub-level being entered.
*/
.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a {
	display: none;
}

.dl-menu.dl-subview li.dl-subview,
.dl-menu.dl-subview li.dl-subview .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
	display: block;
}

/* Dynamically added submenu outside of the menu context */
.dl-menuwrapper > .dl-submenu {
	position: absolute;
	width: 100%;
	top: 50px;
	left: 0;
	margin: 0;
}

/* Animation classes for moving out and in */
.dl-menu.dl-animate-out-3 {
	-webkit-animation: MenuAnimOut3 0.4s ease;
	animation: MenuAnimOut3 0.4s ease;
}

@-webkit-keyframes MenuAnimOut3 {
	0% { }
	100% {
		-webkit-transform: translateZ(300px);
		transform: translateZ(300px);
		opacity: 0;
	}
}

@keyframes MenuAnimOut3 {
	0% { }
	100% {
		-webkit-transform: translateZ(300px);
		transform: translateZ(300px);
		opacity: 0;
	}
}

.dl-menu.dl-animate-in-3 {
	-webkit-animation: MenuAnimIn3 0.4s ease;
	animation: MenuAnimIn3 0.4s ease;
}

@-webkit-keyframes MenuAnimIn3 {
	0% {
		-webkit-transform: translateZ(300px);
		transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes MenuAnimIn3 {
	0% {
		-webkit-transform: translateZ(300px);
		transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		transform: translateZ(0px);
		opacity: 1;
	}
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-3 {
	-webkit-animation: SubMenuAnimIn3 0.4s ease;
	animation: SubMenuAnimIn3 0.4s ease;
}

@-webkit-keyframes SubMenuAnimIn3 {
	0% {
		-webkit-transform: translateZ(-300px);
		transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn3 {
	0% {
		-webkit-transform: translateZ(-300px);
		transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		transform: translateZ(0px);
		opacity: 1;
	}
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-3 {
	-webkit-animation: SubMenuAnimOut3 0.4s ease;
	animation: SubMenuAnimOut3 0.4s ease;
}

@-webkit-keyframes SubMenuAnimOut3 {
	0% {
		-webkit-transform: translateZ(0px);
		transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(-300px);
		transform: translateZ(-300px);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut3 {
	0% {
		-webkit-transform: translateZ(0px);
		transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(-300px);
		transform: translateZ(-300px);
		opacity: 0;
	}
}

/* No JS Fallback */
.no-js .dl-menuwrapper .dl-menu {
	position: relative;
	opacity: 1;
	-webkit-transform: none;
	transform: none;
}

.no-js .dl-menuwrapper li .dl-submenu {
	display: block;
}

.no-js .dl-menuwrapper li.dl-back {
	display: none;
}

.no-js .dl-menuwrapper li > a:not(:only-child) {
	background: rgba(0,0,0,0.1);
}

.no-js .dl-menuwrapper li > a:not(:only-child):after {
	content: '';
}
/*--RES MENU--*/



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	.content-area{width: 90%; margin: 0 auto; float: none;}
	.res-dis-none{display: none;}
	h2{font-size: 22px;}
	p{font-size: 14px;}
	main p{font-size: 13px; letter-spacing: 0.06em; float: left;}
	main p a, main p a:hover{font-size: 13px; letter-spacing: 0.06em;}
	main ul li{font-size: 13px; letter-spacing: 0.06em; margin: 0 0 20px;}
	main u{font-size: 14px; letter-spacing: 0.06em;}
	main h1{font-size: 35px;}
	
	header nav.cl-effect-1{display: none;}
	header nav.res-menu{display: block;}
	header .logo{width: 100%; max-width: 267px; height: auto; float: left; display: block;}
	#banner{height: 70vh;/*test and change if required*/ background-position: 35% 0;}
	#abt-banner{height: 70vh;/*test and change if required*/ background-position: 60% 0;}
	#cc-banner{height: 70vh;/*test and change if required*/ background-position: 25% 0;}
	#lg-banner{height: 70vh;/*test and change if required*/ background-position: 52% 0;}
	#ff-banner{height: 70vh;/*test and change if required*/ background-position: 42% 0;}
	#wh-banner{height: 70vh;/*test and change if required*/ background-position: 42% 0;}
	#vas-banner{height: 70vh;/*test and change if required*/ background-position: 26% 0;}
	#ins-banner{height: 70vh;/*test and change if required*/ background-position: 80% 0;}
	#dd-banner{height: 70vh;/*test and change if required*/ background-position: 60% 0;}
	#contact-banner{height: 70vh;/*test and change if required*/ background-position: 63% 0;}

	#gp1 .num{width: 100%;}
	#gp1 .line1{width: 90%; max-width: 450px;}
	#gp1 #exp{margin: 50px 0 0 0;}
	#gp1 .tagline1a{margin: 0px 0 0 10px; float: left; clear: both;}
	#gp1 .txt{width: 100%; margin: 30px 0 0 0;}
	#gp1 h2{font-size: 24px; line-height: 1.2em;}
	#gp1 .v-line1{display: none;}
	#gp1 p{width: 100%; margin: 5px 0 24px 0; float: left; line-height: 1.8em; text-align: left;}
	#gp1 .yrs{font-size: 200px;}
	
	#gp2{background-position: center;}
	#gp2 #service-holder{margin: 20px 0 0; flex-direction: column;}
	#gp2 #service-holder .box{margin: 0 0 25px;}
	#gp2 #service-holder .box img{width: 100%; max-width: 225px;}
	#gp2 h4{line-height: 2em;}
	#gp2 .b-hline{width: 60%; max-width: 310px;}
	#gp2 .btn-holder{float: left; margin: 0;}
	#gp2 .btn-holder .btn{min-width: 50%;}
	#gp2 .res-dis-none{display: none;}

	#gp3{height: auto; background-position: 65% 0%;}
	#gp3 h2{width: 90%; font: normal 18px 'century_gothicregular'; line-height: 1.3em;}
	
	#gp4{padding: 60px 0;}
	#gp4 .title-holder{width: 100%; margin: 0 0 20px;}
	#gp4 h2{margin:5px 0; float: left;}
	#gp4 .b-hline{width: 52%; max-width: 310px;}
	#gp4 .res-dis-none{display: none;}
	#gp4 .txt{width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; margin: 0 auto;}		
	@media screen and (max-width: 450px) {
		#gp4 .txt{width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-around; margin: 0 auto; align-items: center;}		
	}	
	#gp4 .txt .box{width: 50%; display: flex; flex-direction: column; align-items: center; padding: 16px; margin: 10px 0;}
	#gp4 .txt .box img{width: 100px; max-width: 120px; height: 100px;}
	#gp4 .txt .box h4{font: normal 13px 'barlowsemibold'; line-height: 3em; letter-spacing: 0.08em;}
	
	#gp5{padding: 60px 0;}
	#gp5 h2{float: left; margin: 5px 0;}
	#gp5 .b-hline{width: 55%; max-width: 310px;}
	#gp5 #txt-holder{width: 100%; margin: 20px 0 0; float: left;}
	#gp5 #txt-holder .box, #gp5 #txt-holder .box2{width: 100%; float: left;}
	#gp5 #txt-holder .num{font: normal 150px 'Arial'; margin: 0 0 0 -5px;}
	#gp5 #txt-holder .box .txt, #gp5 #txt-holder .box2 .txt{width: 90%; margin: 0 0 0 -50px;}
	#gp5 h4{font: normal 18px 'century_gothicregular'; line-height: 1.2em; letter-spacing: 0.04em;}
	#gp5 p{font: normal 13px 'barlowregular'; line-height: 1.5em; letter-spacing: 0.02em; text-align: justify;}
	
	#gp6{display: none;}
	
	footer .content-area{display: flex; flex-direction: column; justify-content: space-around;}
	footer .box{margin: 0 0 25px 0;}
	footer #container{width: 90%; margin: 40px auto 0;}
	footer #container .res-float-lt{float: left!important; clear: both;}
	
	
	main#abtus-pg section, main section.service-pg, main#cc-pg section, main#lg-pg section, main#ff-pg section, main#wh-pg section, main#vas-pg section, main#ins-pg section, main#dd-pg section{width: 100%; height: auto; display: block;}
	main .main-tag{font-size: 12px;}
	main .sub-heading-holder .sub-heading, main .service-pg-heading, main .ind-pg-heading{width: 100%;}
	
	main .res-abt-img{width: 100%; max-width: 400px; display: flex; margin: 0 auto; float: none !important;}
	main .sub-heading-holder .sub-heading h2{width: 168px;}
	main#abtus-pg .sub-heading-holder .sub-heading img{width: 62px;}
	
	main .res-ser-img{width: 100%; max-width: 400px; display: flex; justify-content: center; margin: 0 auto !important; float: none !important;}
	main .txt-holder{width: 100%; float: left; margin: 15px 0 0;}	
	main .service-pg-heading h2{width: 160px;}
	main .service-pg-heading img{width: 82px;}
	main .services-box .service img{width: 90px;}
	main ul.service-pg{margin: 15px 0 10px 30px; column-count: 1; column-gap: normal;}
	main #industry{width: 100%; float: left; margin-top: 20px;}
	main .ind-pg-heading h2{width: 232px;}
	main .ind-pg-heading img{width: 41px;}
	main .ind-box .service img{width: 100px;}
		
	main .res-cc-img{width: 100%; max-width: 400px; display: flex; justify-content: center; margin: 0 auto 20px !important; float: none !important;}
	main#cc-pg .cc-img2{width: 100%; max-width: 450px; display: flex; justify-content: center; margin: 0px auto!important; float: none !important; padding: 40px 0 0;}
	main#cc-pg .cc-service{width: 100%; height: auto; float: left; display: block;}
	
	main .res-lg-img{width: 100%; max-width: 400px; display: flex; justify-content: center; float: none !important; margin: 0 auto 20px !important;}
	
	main .res-ff-img{width: 100%; max-width: 400px; display: flex; justify-content: center; float: none !important; margin: 0 auto 20px !important;}
	main#ff-pg .sub-heading-holder .sub-heading img{width: 81px;}
	main#ff-pg .list-holder{width: 100%;}
	main#ff-pg .list-holder br{display: none;}
	
	main .res-wh-img{width: 100%; max-width: 400px; display: flex; justify-content: center; float: none !important; margin: 0 auto 20px !important;}
	main#wh-pg .list-holder{width: 100%; margin: 40px 0 0;}
	main#wh-pg .sub-heading-holder .sub-heading img{width: 81px;}
	main#wh-pg .list-holder br{display: none;}
	
	main .res-vas-img{width: 100%; max-width: 400px; display: flex; justify-content: center; float: none !important; margin: 0 auto 20px !important;}
	
	main .res-ins-img{width: 100%; max-width: 400px; display: flex; justify-content: center; float: none !important; margin: 0 auto 20px !important;}
	main#ins-pg .list-holder{width: 100%; margin: 40px 0 0;}
	main#ins-pg .sub-heading-holder .sub-heading img{width: 56px;}
	
	main .res-dd-img{width: 100%; max-width: 400px; display: flex; justify-content: center; float: none !important; margin: 0 auto 20px !important;}
	
	.contact-container{display: block;}
	.form-container{width: 100%;}
	.form-container form{width: 100%; max-width: 400px;}
	#ad-holder{width: 100%; display: block; float: left; clear: both; margin: 60px 0 0;}

	main#quote-pg{background: none;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen 
	and (min-width: 600px)
	and (max-width: 768px){
	.content-area{width: 90%; margin: 0 auto; float: none;}
	.res-dis-none{display: none;}
	h2{font-size: 22px;}
	p{font-size: 14px;}
	main p{font-size: 13px; letter-spacing: 0.06em; float: left;}
	main p a, main p a:hover{font-size: 13px; letter-spacing: 0.06em;}
	main ul li{font-size: 13px; letter-spacing: 0.06em; margin: 0 0 20px;}
	main u{font-size: 14px; letter-spacing: 0.06em;}
	main h1{font-size: 35px;}
	
	header nav.cl-effect-1{display: none;}
	header nav.res-menu{display: block;}
	header .logo{width: 100%; max-width: 267px; height: auto; float: left; display: block;}
	#banner{height: 70vh;/*test and change if required*/ background-position: 35% 0;}
	#abt-banner{height: 70vh;/*test and change if required*/ background-position: 60% 0;}
	#cc-banner{height: 70vh;/*test and change if required*/ background-position: 25% 0;}
	#lg-banner{height: 70vh;/*test and change if required*/ background-position: 52% 0;}
	#ff-banner{height: 70vh;/*test and change if required*/ background-position: 52% 0;}
	#wh-banner{height: 70vh;/*test and change if required*/ background-position: 42% 0;}
	#vas-banner{height: 70vh;/*test and change if required*/ background-position: 26% 0;}
	#ins-banner{height: 70vh;/*test and change if required*/ background-position: 74% 0;}
	#dd-banner{height: 70vh;/*test and change if required*/ background-position: 60% 0;}
	#contact-banner{height: 70vh;/*test and change if required*/ background-position: 63% 0;}
	
	#gp1 .num{width: 100%;}
	#gp1 .line1{width: 90%; max-width: 450px;}
	#gp1 #exp{margin: 50px 0 0 0;}
	#gp1 .tagline1a{margin: 0px 0 0 10px; float: left; clear: both;}
	#gp1 .txt{width: 100%; margin: 30px 0 0 0;}
	#gp1 h2{font-size: 24px; line-height: 1.2em;}
	#gp1 .v-line1{display: none;}
	#gp1 p{width: 100%; margin: 5px 0 24px 0; float: left; line-height: 1.8em; text-align: left;}
	#gp1 .yrs{font-size: 200px;}
	
	#gp2{background-position: center;}
	#gp2 #service-holder{margin: 20px 0 0; flex-direction: row; flex-wrap: wrap;}
	#gp2 #service-holder .box{width: 50%; margin: 0 0 25px;}
	#gp2 #service-holder .box img{width: 100%; max-width: 225px;}
	#gp2 h4{line-height: 2em;}
	#gp2 .b-hline{width: 60%; max-width: 310px;}
	#gp2 .btn-holder{float: left; margin: 0;}
	#gp2 .btn-holder .btn{min-width: 50%;}
	#gp2 .res-dis-none{display: none;}

	#gp3{height: auto; background-position: 65% 0%;}
	#gp3 h2{width: 90%; font: normal 18px 'century_gothicregular'; line-height: 1.3em;}
	
	#gp4{padding: 60px 0;}
	#gp4 .title-holder{width: 100%; margin: 0 0 20px;}
	#gp4 h2{margin:5px 0; float: left;}
	#gp4 .b-hline{width: 52%; max-width: 310px;}
	#gp4 .res-dis-none{display: none;}
	#gp4 .txt{width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; margin: 0 auto;}		
	@media screen and (max-width: 450px) {
		#gp4 .txt{width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-around; margin: 0 auto; align-items: center;}		
	}	
	#gp4 .txt .box{width: 50%; display: flex; flex-direction: column; align-items: center; padding: 16px; margin: 10px 0;}
	#gp4 .txt .box img{width: 100px; max-width: 120px; height: 100px;}
	#gp4 .txt .box h4{font: normal 13px 'barlowsemibold'; line-height: 3em; letter-spacing: 0.08em;}
	
	#gp5{padding: 60px 0;}
	#gp5 h2{float: left; margin: 5px 0;}
	#gp5 .b-hline{width: 55%; max-width: 310px;}
	#gp5 #txt-holder{width: 100%; margin: 20px 0 0; float: left; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
	#gp5 #txt-holder .num{font: normal 150px 'Arial'; margin: 0 0 0 -5px;}
	#gp5 #txt-holder .box .txt, #gp5 #txt-holder .box2 .txt{width: 90%; margin: 0 0 0 -50px;}
	#gp5 h4{font: normal 18px 'century_gothicregular'; line-height: 1.2em; letter-spacing: 0.04em;}
	#gp5 p{font: normal 13px 'barlowregular'; line-height: 1.5em; letter-spacing: 0.02em; text-align: justify;}
	
	#gp6{display: none;}
	
	footer .content-area{display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;}
	footer .box{margin: 0 0 25px 0; width: 40%;}
	footer #container{width: 90%; margin: 40px auto 0;}
	footer #container .res-float-lt{float: left!important; clear: both;}
	
	main#abtus-pg section, main section.service-pg, main#cc-pg section, main#lg-pg section, main#ff-pg section, main#wh-pg section, main#vas-pg section, main#ins-pg section, main#dd-pg section{width: 100%; height: auto; display: block;}	
	main .main-tag{font-size: 12px;}
	main#abtus-pg .abt-bg{padding: 40px 0 60px;}
	main .res-abt-img{width: 100%; max-width: 400px; display: flex; margin: 0 auto; float: none !important;}
	main .txt-holder{width: 100%; float: left; margin: 15px 0 0;}
	
	main .res-ser-img{width: 100%; max-width: 400px; display: flex; justify-content: center; margin: 0 auto !important; float: none !important;}
	main .service-pg-heading h2{width: 160px;}
	main .services-box .service img{width: 90px;}
	main ul.service-pg{margin: 15px 0 10px 30px; column-count: 1; column-gap: normal;}
	main #industry{width: 100%; float: left; margin-top: 20px;}
	main .ind-pg-heading h2{width: 232px;}
	main .ind-box .service img{width: 95px;}
		
	main .res-cc-img{width: 100%; max-width: 400px; display: flex; justify-content: center; margin: 0 auto 20px !important; float: none !important;}
	main#cc-pg .cc-img2{width: 100%; max-width: 450px; display: flex; justify-content: center; margin: 0px auto!important; float: none !important; padding: 40px 0 0;}
	main#cc-pg .cc-service{width: 100%; height: auto; float: left; display: block;}
	
	main .res-lg-img{width: 100%; max-width: 400px; display: flex; justify-content: center; float: none !important; margin: 0 auto 20px !important;}

	main .res-ff-img{width: 100%; max-width: 400px; display: flex; justify-content: center; float: none !important; margin: 0 auto 20px !important;}
	main#ff-pg .list-holder{width: 100%; margin: 40px 0 0;}
	main#ff-pg .list-holder br{display: none;}
	
	main .res-wh-img{width: 100%; max-width: 400px; display: flex; justify-content: center; float: none !important; margin: 0 auto 20px !important;}
	main#wh-pg .list-holder{width: 100%; margin: 40px 0 0;}
	main#wh-pg .list-holder br{display: none;}

	main .res-vas-img{width: 100%; max-width: 400px; display: flex; justify-content: center; float: none !important; margin: 0 auto 20px !important;}
		
	main .res-ins-img{width: 100%; max-width: 400px; display: flex; justify-content: center; float: none !important; margin: 0 auto 20px !important;}
	main#ins-pg .list-holder{width: 100%; margin: 40px 0 0;}
	main#ins-pg .sub-heading-holder .sub-heading img{width: 56px;}

	main .res-dd-img{width: 100%; max-width: 400px; display: flex; justify-content: center; float: none !important; margin: 0 auto 20px !important;}

	.contact-container{display: block;}
	.form-container{width: 100%;}
	.form-container form{width: 100%; max-width: 400px;}
	#ad-holder{width: 100%; display: block; float: left; clear: both; margin: 60px 0 0;}

	main#quote-pg{background: none;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen 
	and (min-width: 768px)
	and (max-width: 1024px){
	.content-area{width: 90%; margin: 0 auto; float: none;}
	.res-dis-none{display: none;}
	h2{font-size: 22px;}
	p{font-size: 14px;}
	main p{font-size: 13px; letter-spacing: 0.06em; float: left;}
	main p a, main p a:hover{font-size: 13px; letter-spacing: 0.06em;}
	main ul li{font-size: 13px; letter-spacing: 0.06em; margin: 0 0 20px;}
	main u{font-size: 14px; letter-spacing: 0.06em;}
	main h1{font-size: 35px;}
		
	header nav.cl-effect-1{display: none;}
	header nav.res-menu{display: block;}
	header .logo{width: 100%; max-width: 267px; height: auto; float: left; display: block;}
	#banner{height: 70vh;/*test and change if required*/ background-position: 35% 0;}
	#services-banner{height: 60vh;}
	#cc-banner{height: 60vh;/*test and change if required*/ background-position: 25% 0;}
	#lg-banner{height: 70vh;/*test and change if required*/ background-position: 52% 0;}
	#ff-banner{height: 70vh;/*test and change if required*/ background-position: 40% 0;}
	#wh-banner{height: 70vh;/*test and change if required*/ background-position: center center;}
	#vas-banner{height: 70vh;/*test and change if required*/ background-position: 25% 0;}
	#ins-banner{height: 70vh;/*test and change if required*/ background-position: 74% 0;}
	#dd-banner{height: 70vh;/*test and change if required*/ background-position: 60% 0;}
	#contact-banner{height: 70vh;/*test and change if required*/ background-position: 63% 0;}
		
	#gp1 .num{width: 40%;}
	#gp1 .yrs{font-size: 200px;}
	#gp1 .line1{width: 90%; max-width: 450px;}
	#gp1 #exp{margin: 50px 0 0;}
	#gp1 .tagline1a{margin: 5px 0 0 10px;}
	#gp1 .txt{width: 50%; height: 295px; display: flex; flex-direction: column; justify-content: center;}
	#gp1 .txt h2{font-size: 22px;}
	#gp1 .v-line1{display: none;}
	#gp1 .txt p{text-align: left; margin: 12px 0; width: 100%; line-height: 1.8em;}
	
	#gp2{background-position: center;}
	#gp2 #service-holder{margin: 20px 0 0; flex-direction: row; flex-wrap: wrap;}
	#gp2 #service-holder .box{width: 50%; margin: 0 0 25px;}
	#gp2 #service-holder .box img{width: 100%; max-width: 225px;}
	#gp2 h4{line-height: 2em;}
	#gp2 .b-hline{width: 60%; max-width: 310px;}
	#gp2 .btn-holder{float: left; margin: 0;}
	#gp2 .btn-holder .btn{min-width: 50%;}
	#gp2 .res-dis-none{display: none;}

	#gp3{height: auto; background-position: 80% 0%;}
	#gp3 h2{width: 50%; font: normal 18px 'century_gothicregular'; line-height: 1.3em;}
	
	#gp4{padding: 60px 0;}
	#gp4 .title-holder{width: 100%; margin: 0 0 20px;}
	#gp4 h2{margin:5px 0; float: left;}
	#gp4 .b-hline{width: 52%; max-width: 310px;}
	#gp4 .res-dis-none{display: none;}
	#gp4 .txt{width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; margin: 0 auto;}		
	#gp4 .txt .box{width: 50%; display: flex; flex-direction: column; align-items: center; padding: 16px; margin: 10px 0;}
	#gp4 .txt .box img{width: 100px; max-width: 120px; height: 100px;}
	#gp4 .txt .box h4{font: normal 13px 'barlowsemibold'; line-height: 3em; letter-spacing: 0.08em;}
	
	#gp5{padding: 60px 0;}
	#gp5 h2{float: left; margin: 5px 0;}
	#gp5 .b-hline{width: 55%; max-width: 310px;}
	#gp5 #txt-holder{width: 100%; margin: 20px 0 0; float: left; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
	#gp5 #txt-holder .num{font: normal 150px 'Arial'; margin: 0 0 0 -5px;}
	#gp5 #txt-holder .box .txt, #gp5 #txt-holder .box2 .txt{width: 90%; margin: 0 0 0 -50px;}
	#gp5 h4{font: normal 18px 'century_gothicregular'; line-height: 1.2em; letter-spacing: 0.04em;}
	#gp5 p{font: normal 13px 'barlowregular'; line-height: 1.5em; letter-spacing: 0.02em; text-align: justify;}
	
	#gp6{display: none;}
	
	footer .content-area{display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;}
	footer .box{margin: 0 0 25px 0; width: 40%;}
	@media screen and (min-width: 900px) {
		footer .box{width: auto; margin: 0 0 25px 0;}	
	}	
	footer #container{width: 90%; margin: 40px auto 0;}
	footer #container .res-float-lt{float: left!important; clear: both;}
		
	
	main .txt-holder .res-abt-img{width: 50%; max-width: 400px; float: right;}
	main#abtus-pg section{height: auto; float: left; display: block;}
		
	main .res-ser-img{width: 40%; max-width: 400px;}
	main section.service-pg{margin: 0 0 60px;}
	main .services-box .service img{width: 100px;}
	main ul.service-pg{margin: 15px 0 10px 30px; column-count: 1; column-gap: normal;}
	main #industry{width: 100%; float: left; margin-top: 20px;}
	main .ind-box .service img{width: 100px;}
		
	main .res-cc-img{width: 47%; max-width: 400px; float: right;}
	main .res-cc-txt{width: 50%; float: left;}
	main#cc-pg section{width: 100%; height: auto; display: block;}
	main#cc-pg .cc-img2{width: 47%; max-width: 450px; margin: 0; padding: 40px 0 0;}
		
	main .res-lg-img{width: 45%; max-width: 400px;}
		
	main .res-ff-img{width: 45%; max-width: 400px;}
	main#ff-pg section{align-content: flex-start;}
	main#ff-pg .list-holder br{display: none;}
		
	main .res-wh-img{width: 45%; max-width: 400px;}
		
	main .res-vas-img{width: 45%; max-width: 400px;}
	main#vas-pg section{height: 255px;}
		
	main .res-ins-img{width: 45%; max-width: 400px;}
	main#ins-pg section{height: 260px;}
		
	main .res-dd-img{width: 45%; max-width: 400px;}

	.contact-container{display: block;}
	.form-container{width: 100%;}
	.form-container form{width: 100%; max-width: 400px;}
	#ad-holder{width: 100%; display: block; float: left; clear: both; margin: 60px 0 0;}

	main#quote-pg{background: none;}
}

/* Bigger screens*/
@media only screen and (min-width: 1025px) {
	#gp4 .bs-dis-none, main .res-cc-img{display: none;}
	header nav.res-menu{display: none;}
}