<style>


/* NAVIGATION */




@media (max-width: 991px){
	.gnsNavContainer{
		grid-template-columns: repeat(2, 1fr) !important;
	}
}


@media (max-width: 768px){
	.gnsNavContainer{
		grid-template-columns: repeat(1, 1fr) !important;
	}
}

.gnsNavContainer{
	width:100%;
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap:20px;
	margin-bottom:40px;
}


.gnsNavItem{
	background-color:#f1f1f1;
	height:100%;
}

.gnsNavItem:hover, .gnsNavItem:focus{
	background-color:#e64626;
}

.gnsNavItem h2{
	margin:20px 0px;
	font-size: 24px;
	padding: 0px 20px;
	font-weight: 300;
	line-height:30px;
}

.gnsNavItem p{
	padding: 0px 20px;
	font-size: 14px;
}

.gnsLink{
	text-decoration: none;
	color:#333333;
}

.gnsLink:hover, .gnsLink:focus{
	text-decoration: none;
}

.gnsLink:hover{
	color:#ffffff;
}

.gnsNavImg{
	width:100%;
	height:200px;
	background-size: cover;
	resize: both;
	background-position: center;
}


/* ON THIS PAGE */

.gnsOtpContainer{
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas: "gnsOtpText gnsOtpImg";
	grid-gap:20px;
}


.gnsOtpImg{
	grid-area: gnsOtpImg;
	background-size: cover;
	resize: both;
	background-position: center;
}


.gnsOtpText{
	grid-area: gnsOtpText;
	padding:20px;
	background-color: #f1f1f1;
}


.gnsOtpText h2{
	border-bottom: 2px solid #141414;
	font-size: 24px;
	font-weight: 300;
	margin-top: 0px;
}

.gnsOtpText ul{
		font-size: 16px;
}

.gnsOtpText ul li{
		margin-bottom: 5px;
}


/* FEATURE */

.gnsFeatureContainer{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap:20px;
	margin-bottom: 40px;
}

.gnsFeatureLeft{
	grid-template-areas: "gnsFeatureText gnsFeatureImage";
}

.gnsFeatureRight{
	grid-template-areas: "gnsFeatureImage gnsFeatureText";
}

.gnsFeatureLeft .gnsFeatureText{
	grid-column: 1 / span 2;
	grid-row 1 / span 1;
}

.gnsFeatureLeft .gnsFeatureImage{
	grid-column: 3 / span 1;
	grid-row 1 / span 1;
}

.gnsFeatureRight .gnsFeatureText{
	grid-column: 2 / span 2;
	grid-row 1 / span 1;
}

.gnsFeatureRight .gnsFeatureImage{
	grid-column: 1 / span 1;
	grid-row 1 / span 1;
}

.gnsFeatureImage{
	grid-area: gnsFeatureImage;
	background-size: cover;
	resize: both;
	background-position: center;
}

.gnsFeatureText:hover{
	background-color: #d3d3d3;
}

.gnsFeatureLink{
	display: grid;
}

.gnsFeatureLink, .gnsFeatureLink:hover, .gnsFeatureLink:focus{
	text-decoration: none;
	color: #141414;
}

.gnsFeatureText{
	grid-area: gnsFeatureText;
	border-top: 2px solid #141414;
	padding:20px;
	background-color: #f1f1f1;
}

.gnsFeatureText h2{
	margin-top:5px;
	font-size:24px;
	line-height:28px;
}



/* CTA */

.gnsCtaContainer{
	width:100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap:20px;
	margin-bottom:40px;
}


@media (max-width: 991px){
	.gnsCtaContainer{
		grid-template-columns: repeat(1, 1fr) !important;
	}
}

.gnsCtaItem{
	padding:20px;
	border-top: 3px solid #333333;
}

.gnsCtaLink{
	background-color: #f1f1f1;
	color: #333333;
	text-decoration:none;
	position: relative;
}

.gnsCtaLink:hover{
	background-color: #d3d3d3;
}

.gnsCtaLink:hover, .gnsCtaLink:focus{
	text-decoration:none;
	color: #333333;
}

.gnsCtaText{
	padding-bottom: 20px;
	margin-bottom: 0px;
}

.gnsCtaHeading h3{
	margin-top: 0px! important;
}

.gnsCtaArrow{
	position: absolute;
	bottom: 20px;
	margin-left:20px;
}

.gnsCtaArrow p{
	margin-top:10px;
	margin-bottom: 0px;
}

</style>

