@font-face {
    font-family: 'itc_avant_garde_gothicmedium';
    src: url('fonts/avant-garde-gothic-medium-webfont.woff2') format('woff2'),
         url('fonts/avant-garde-gothic-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'itc_avant_garde_gothicbook';
    src: url('fonts/ITC-Avant-Garde-Gothic-CE-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	font-family: 'itc_avant_garde_gothicmedium', Arial, Helvetica, sans-serif;
}

#main{
	text-align: center;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 100px 6.66vw;
	position: relative;
}

#main .logo{
	position: absolute;
	top: 30px;
	left: 6.66vw;
}

#main .container{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
}

#main h1{
	font-size: 60px;
	line-height: 1em;
	margin-bottom: 20px;
	color: #303030;
	/*font-family: avantgarde-demi, Arial, Helvetica, sans-serif;*/
}

#main .separator{
	background: #E04C87;
	height: 4px;
	width: 2.66vw;
	min-width: 40px;
	border-radius: 4px;
	margin-bottom: 40px;
}
#main .txt-1{
	font-size: 22px;
	line-height: 1.1em;
	margin-bottom: 14px;
	color: #909090;
}
#main .txt-2{
	font-size: 16px;
	line-height: 1.1em;
	margin-bottom: 77px;
	color: #909090;
	font-family: 'itc_avant_garde_gothicbook', Arial, Helvetica, sans-serif;
}

#main .cta-box{
	background: #EDF1FF;
	border-radius: 30px;
	display: flex;
	justify-content: center;
	align-items: stretch;
	padding: 40px 0;
	width: 100%;
	max-width: 740px;
}
#main .cta-box .col{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 50%;
	padding: 20px 40px;
}
#main .cta-box .col:first-of-type{
	border-right: solid 1px #D8D8D8;
}
#main .cta-box  h2{
	font-size: 18px;
	line-height: 1.1em;
	color: #303030;
	/*font-family: avantgarde-demi, Arial, Helvetica, sans-serif;*/
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 32px;
	margin-bottom: 30px;
}
#main .cta-box  h2 img{
	margin-right: 15px;
}
#main .cta-box .cta{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	text-decoration: none;
}
#main .cta-box .cta.btn{
	padding: 17px 25px;
	background: #1242D4;
	border-radius: 16px;
	color: #fff;
	font-size: 16px;
	line-height: 1em;
	transition: all ease .4s;
}
#main .cta-box .cta.btn:hover{
	background: #4b76f8;
}
@media (max-width: 992px){
	#main .cta-box .col{
		padding: 20px 40px;
	}
	#main .cta-box{
		min-width: 0px;
		max-width: 740px;
	}
}

@media (max-width: 768px){
	#main{
		padding: 60px 40px;
		flex-direction: column;
	}
	#main .logo{
		position: static;
		margin-bottom: 60px
	}
}

@media (max-width: 600px){
	#main .cta-box{
		flex-direction: column;
		padding: 0 40px;
	}
	#main .cta-box .col{
		width: 100%;
		padding: 40px;
	}
	#main .cta-box .col:first-of-type {
	    border-bottom: solid 1px #D8D8D8;
	    border-right: none;
	}
}

@media (max-width: 480px){

	#main{
		padding: 60px 20px;
	}
	#main h1{
		font-size: 40px;
		margin-bottom: 20px;
	}

	#main .txt-2{
		margin-bottom: 60px;
	}
	#main .cta-box .col{
		padding: 40px 0;
	}
}