
/* FONTS ________________________________________________________________________________*/
@font-face {
    font-family: hn_b;
    src: url(fonts/hn_b.ttf);
}
@font-face {
    font-family: hn_m;
    src: url(fonts/hn_m.ttf);
}
@font-face {
    font-family: hn_r;
    src: url(fonts/hn_r.ttf);
}

body {
	background-color: #FBFCFC;
	font-family: 'hn_r';
	margin:0;
    padding:0;
}

a {
	color: #000000;
}

.bg_element1 {
	position: absolute;
	left: 0px;
	top: 100px;
	width: 300px;
}
.bg_element2 {
	position: absolute;
	right: 0px;
	bottom:-22px;
	width: 450px;
}

.background {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
}

.logo {
	position: absolute;
	width: 150px;
	margin:auto;
	right: 0; left: 0;
	margin-top: 20px;
}

.content {
	position: relative;
	margin-right:auto;
	margin-left:auto;
	width: 80%;
	height: 98vh;
}

.section1 {
	position: relative;
	width: 100%;
	height:auto;
	top: 150px;
}

.s1_h1 {
	position: relative;
	width: 100%;
	text-align: center;
	color:#000000;
	font-family: 'hn_m';
}

.s1_p1 {
	position: relative;
	width: 100%;
	text-align: center;
	color:#6A7895;
	font-family: 'hn_r';
	font-size:14px;
	width: 60%;
	left: 20%;
}

.section2 {
	position: relative;
	width: 100%;
	height:250px;
	top: 150px;
	margin-top: 50px;
	margin-bottom:50px;
}

.s2_card1 {
	position: absolute;
	width: 22%;
	left: 1.5%;
	height: 250px;
	background-color: #ffffff;
	box-shadow: 0px 2px 5px #F3F6F7;
	border-radius: 3px;
	border:1px solid #F2F3F5;

}

.s2_card2 {
	position: absolute;
	width: 22%;
	left: 26.5%;
	height: 250px;
	background-color: #ffffff;
	box-shadow: 0px 2px 5px #F3F6F7;
	border-radius: 3px;
	border:1px solid #F2F3F5;
}

.s2_card3 {
	position: absolute;
	width: 22%;
	right: 26.5%;
	height: 250px;
	background-color: #ffffff;
	box-shadow: 0px 2px 5px #F3F6F7;
	border-radius: 3px;
	border:1px solid #F2F3F5;
}

.s2_card4 {
	position: absolute;
	width: 22%;
	right: 1.5%;
	height: 250px;
	background-color: #ffffff;
	box-shadow: 0px 2px 5px #F3F6F7;
	border-radius: 3px;
	border:1px solid #F2F3F5;
}


.s2_card_h1 {
	position: relative;
	width: 90%;
	font-size: 18px;
	font-family: 'hn_m';
	left: 5%;
	top: 0%;
	text-align: center;
}

.s2_card_img {
	position: relative;
	width: 60%;
	left: 20%;
	margin-top:20px;
}


.s2_card_p1 {
	position: relative;
	width: 90%;
	font-size: 12px;
	font-family: 'hn_r';
	left: 5%;
	color: #5B696F;
}

.center {
	position: absolute;
	width: 100%;
	height: 225px;
	max-height: 200px;
	margin:auto;
	top:0; bottom:0;
	left:0; right: 0;
	max-width: 250px;
}


.button {
	position: absolute;
	height: 40px;
	width: 120px;
	border-radius: 40px;
	background-color: #0037FF;
	left: 2%;
	top: 50px;
}

.button_label {
	position: absolute;
	width: 100%;
	text-align:center;
	color: #ffffff;
	font-family: 'hn_m';
	font-size: 12px;
	line-height: 16px;
}

.section3 {
	position: relative;
	width: 100%;
	height:250px;
	top: 150px;
	margin-top: 50px;
	margin-bottom:50px;
}

.s3_h1 {
	position: relative;
	width: 100%;
	left: 0%;
	text-align:center;
	font-size: 16px;
	font-family: 'hn_b';
}

.s3_cards{
	position: relative;
	width: 750px;
	margin:auto;
	left: 0; right: 0;
	height: 175px;
	top: 10px;

}

.s3_card1 {
	position: absolute;
	width: 220px;
	height: 175px;
	background-color: #ffffff;
	box-shadow: 0px 2px 5px #F3F6F7;
	border-radius: 3px;
	left: 0px;
	border:1px solid #F2F3F5;
}

.s3_card2 {
	position: absolute;
	width: 220px;
	height: 175px;
	background-color: #ffffff;
	box-shadow: 0px 2px 5px #F3F6F7;
	border-radius: 3px;
	margin:auto;
	left: 0; right: 0;
	border:1px solid #F2F3F5;
}
.s3_card3 {
	position: absolute;
	width: 220px;
	height: 175px;
	background-color: #ffffff;
	box-shadow: 0px 2px 5px #F3F6F7;
	border-radius: 3px;
	right: 0px;
	border:1px solid #F2F3F5;
}

.s3_card_h1 {
	position: relative;
	width: 90%;
	font-size: 16px;
	font-family: 'hn_m';
	left: 5%;
	top:125px;
	text-align: center;
}

.s3_cards_img {
	position: absolute;
	width: 150px;
	margin:auto;
	left: 0; right: 0;
	top: 0; bottom: 0;
}

.grow img{
	transition: 1s ease;
}

.grow img:hover{
	-webkit-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
	transition: 0.6s ease;
}


@media screen and (max-width: 968px) and (min-width: 0px) { 



.section1 {
	position: relative;
	width: 100%;
	height:auto;
	top: 150px;
}

.s1_h1 {
	position: relative;
	width: 100%;
	text-align: center;
	color:#000000;
	font-family: 'hn_m';
	font-size: 25px;
}

.s1_p1 {
	position: relative;
	text-align: center;
	color:#6A7895;
	font-family: 'hn_r';
	font-size:14px;
	width: 90%;
	left: 5%;

}

.section2 {
	position: relative;
	width: 100%;
	height:450px;
	top: 130px;
	margin-top: 50px;
	margin-bottom:50px;
}

.s2_card1 {
	position: absolute;
	width: 48%;
	left: 0%;
	height: 230px;
	background-color: #ffffff;
	box-shadow: 0px 2px 5px #F3F6F7;
	border-radius: 3px;
	border:1px solid #F2F3F5;
}

.s2_card2 {
	position: absolute;
	width: 48%;
	right: 0%;
	left: auto;
	float: right;
	height: 230px;
	background-color: #ffffff;
	box-shadow: 0px 2px 5px #F3F6F7;
	border-radius: 3px;
	border:1px solid #F2F3F5;
}

.s2_card3 {
	position: absolute;
	width: 48%;
	left: 0%;
	height: 230px;
	background-color: #ffffff;
	box-shadow: 0px 2px 5px #F3F6F7;
	border-radius: 3px;
	top: 250px;
	border:1px solid #F2F3F5;
}

.s2_card4 {
	position: absolute;
	width: 48%;
	right: 0%;
	left: auto;
	height: 230px;
	background-color: #ffffff;
	box-shadow: 0px 2px 5px #F3F6F7;
	border-radius: 3px;
	top: 250px;
	border:1px solid #F2F3F5;
}

.s2_card5 {
	position: absolute;
	width: 48%;
	left: 0%;
	height: 150px;
	background-color: #ffffff;
	box-shadow: 0px 2px 5px #F3F6F7;
	border-radius: 3px;
	top: 350px;
}

.s2_card6 {
	position: absolute;
	width: 48%;
	left: auto;
	right: 0%;
	height: 150px;
	background-color: #ffffff;
	box-shadow: 0px 2px 5px #F3F6F7;
	border-radius: 3px;
	top: 350px;
}

.s2_card7 {
	position: absolute;
	width: 48%;
	left: 0%;
	height: 150px;
	background-color: #ffffff;
	box-shadow: 0px 2px 5px #F3F6F7;
	border-radius: 3px;
	top: 525px;
}

.s2_card8 {
	position: absolute;
	width: 48%;
	right: 0%;
	left: auto;
	height: 150px;
	background-color: #ffffff;
	box-shadow: 0px 2px 5px #F3F6F7;
	border-radius: 3px;
	top: 525px;
}

.bg_element1 {
	width: 200px;
	top: 100px;
}
.bg_element2 {
	width: 450px;
}

.button {
	position: absolute;
	height: 40px;
	width: 80px;
	border-radius: 40px;
	background-color: #0037FF;
	left: 2%;
	top: 50px;
}

.button_label {
	position: absolute;
	width: 100%;
	text-align:center;
	color: #ffffff;
	font-family: 'hn_m';
	font-size: 12px;
	line-height: 16px;
}

.section3 {
	top: 150px;
	height: 280px;
}

.s3_h1 {
	position: relative;
	width: 100%;
	left: 0%;
	text-align:center;
	font-size: 16px;
	font-family: 'hn_b';
}

.s3_cards {
	position: relative;
	width: 100%;
	margin:auto;
	left: 0; right: 0;
	height: 280px;
	top: 0px;

}

.s3_card1 {
	position: relative;
	width: 100%;
	height: 75px;
	background-color: #ffffff;
	box-shadow: 0px 2px 5px #F3F6F7;
	border-radius: 3px;
	margin-bottom:20px;
	overflow:hidden;
	border:1px solid #F2F3F5;
}

.s3_card2 {
	position: relative;
	width: 100%;
	height: 75px;
	background-color: #ffffff;
	box-shadow: 0px 2px 5px #F3F6F7;
	border-radius: 3px;
	margin-bottom:20px;
	overflow:hidden;
	border:1px solid #F2F3F5;
}
.s3_card3 {
	position: relative;
	width: 100%;
	height: 75px;
	background-color: #ffffff;
	box-shadow: 0px 2px 5px #F3F6F7;
	border-radius: 3px;
	margin-bottom:20px;
	overflow:hidden;
	border:1px solid #F2F3F5;
}

.s3_card_h1 {
	position: relative;
	width: 90%;
	font-size: 16px;
	font-family: 'hn_m';
	left: 5%;
	top:125px;
	text-align: center;

}

.s3_cards_img {
	position: absolute;
	width: 130px;
	margin:auto;
	left: 0; right: 0;
	top: 0; bottom: 0;
}

.bg_element1 {
	display: none;
}
.bg_element2 {
	display: none;
}

}


