/* ----------------------
  Contact Header
----------------------- */

header.contact {
	position: relative;
}

header.contact .cover {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	background-image: url(/imgs/banners/contact_bg.webp);
	background-size: cover;
	z-index:0;
}

header.contact .slider {
	color: #fff;
}

header.contact .slider h1 {
	font-size: 20px;
	font-family: 'poppins', Arial, sans-serif;
	font-weight: 600;
	margin-bottom: 20px;
	position: relative;
}

header.contact .slider h2 {
	font-size: 17px;
	font-weight: 200;
	font-family: 'poppins', Arial, sans-serif;
	margin-bottom: 25px;
	position: relative;
}

header.contact .slider h2 strong {
	font-weight: 600;
}

header.contact .slider p {
	position: relative;
	font-size: 14px;
	opacity: 0.7;
}

/* ----------------------
	Contact > Layer 1
----------------------- */

.contact .layer-1{
	background-image: url(/imgs/auction-bg.webp);
	background-size: cover;
	position: relative;
}

.contact .layer-1 .wrapper{
	padding: 40px 0;
	color: #1f5475;
}

.contact .layer-1 .col-2 {
	margin-top: 30px;
}

.contact .layer-1 .robo-im {
	width: 384px;
	height: 628px;
	background-image: url(/imgs/contact_robo.webp);
}

.contact .layer-1 .icons {
	text-align: center;
}

.contact .layer-1 .icons a {
	transition: border-color 300ms ease-out;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.contact .layer-1 .icons a:hover{
	border-color: rgba(228, 235, 240, 0.9)
}

.contact .layer-1 .icons i {
	display: block;
	width: 55px;
	height: 55px;
	transition: transform 300ms ease-out;
	margin-bottom: 10px;
}

.contact .layer-1 .icons a:hover i {
	transform: translateY(5px);
}

.contact .layer-1 .icons i.ic-phone{
	background-position: -630px -89px;
}

.contact .layer-1 .icons i.ic-email{
	background-position: -685px -89px;
}

.contact .layer-1 .icons i.ic-ticket{
	background-position: -740px -89px;
}

.contact .layer-1 .icons span{
	font-size: 13px;
	opacity: 0.8;
	color: #384650;
}

.contact .layer-1 .text{
	text-align: center;
}

.contact .layer-1 h2{
	font-size: 17px;
	font-family: 'poppins', Arial, sans-serif;
	margin-bottom: 25px;
}

.contact .layer-1 h3{
	font-size: 14px;
	opacity: 0.8;
}

.contact .layer-1 form{
	margin-top: 25px;
}

.contact .layer-1 form .f-line{
	padding-right: 12px;
	margin-bottom: 15px;
}

.contact .layer-1 form .f-label{
	padding-bottom: 4px;
	font-size: 14px;
	opacity: 0.95;
}

.contact .layer-1 form input[type=text],
.contact .layer-1 form select,
.contact .layer-1 form textarea{
	display: block;
	width: 100%;
	border: 1px solid #f0f0f0;
	box-shadow: 1px 1px 1px 0px rgba(8, 43, 65, 0.07);
	font-size: 14px;
	border-radius: 6px;
	padding: 10px;
	font-family: Arial, sans-serif;
	color: #1f5475;
	transition: border-color 200ms;
}

.contact .layer-1 form input[type=text]:focus,
.contact .layer-1 form input[type=text]:focus,
.contact .layer-1 form select:focus,
.contact .layer-1 form select:focus,
.contact .layer-1 form textarea:focus,
.contact .layer-1 form textarea:active {
	border-color: #0780e3;
}

.contact .layer-1 form textarea{
	height: 140px;
}

.contact .layer-1 form button[type=submit]{
	display: inline-block;
	cursor: pointer;
	background-color: #0780e3;
	color: #fff;
	border: 1px solid #0780e3;
	border-radius: 6px;
	padding: 11px 35px;
	text-align: center;
	font-family: 'poppins', Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;	
	transition: background-color 200ms, color 200ms;
}

.contact .layer-1 form button[type=submit]:hover{
	background-color: #fff;
	color: #0780e3;
}

/* ----------------------
	Contact > Layer 2
----------------------- */

.contact .layer-2{
	background-color: #f4f6f8;
}

.contact .layer-2 .wrapper{
	padding-bottom: 40px;
	font-size: 0;
	overflow: hidden;
	color: #1f5475;
}

.contact .layer-2 .row-1{
	position: relative;
	margin-top: 30px;
}

.contact .layer-2 .row-1 .col {
	border: 1px solid rgba(56, 70, 80, 0.1);
	border-radius: 12px;
	background-color: #fff;
	padding: 0 30px 30px 30px;
	box-shadow: 8px 8px 10px 0px rgba(56, 70, 80, 0.05);
	transition: box-shadow 300ms ease-out;
}

.contact .layer-2 .row-1 .col:hover{
	box-shadow: 6px 6px 12px 0px rgba(56, 70, 80, 0.16);
}

.contact .layer-2 .row-1 .col .title{
	padding: 30px 0px;
	position: relative;
	transition: transform 300ms ease-out;
}

.contact .layer-2 .row-1 .col:hover .title{
	transform: translateX(8px);
}

.contact .layer-2 .row-1 .col .title h3{
	transition: color 200ms ease-out;
}

.contact .layer-2 .row-1 .col:hover .title h3{
	color: #0780e3;
}

.contact .layer-2 .row-1 .col .title:after{
	display: block;
	content: '';
	width: 100%;
	height: 1px;
	background-image: linear-gradient(to right, rgba(20,69,104,0) 0%, rgba(20,69,104,0.30196) 46%, rgba(20,69,104,0) 100%);
	position: absolute;
	left: 0;
	bottom: 0;
}

.contact .layer-2 .row-1 .col h3{
	font-family: 'poppins', Arial, sans-serif;
	font-size: 22px;
	color: #384650;
}

.contact .layer-2 .row-1 .col p.descr{
	margin-top: 20px;
	font-size: 13px;
	opacity: 0.8;
}

.contact .layer-2 .row-1 .col .info{
	margin-top: 20px;
}

.contact .layer-2 .row-1 .col p.label{
	font-size: 14px;
	opacity: 0.8;
}

.contact .layer-2 .row-1 .col p.txt{
	font-size: 18px;
	opacity: 0.8;
	font-weight: 600;
}

.contact .layer-2 .row-1 .col a.btn-ticket{
	position: relative;
	margin-top: 30px;
	display: block;
	font-size: 14px;
	font-family: 'poppins', Arial, sans-serif;
	font-weight: 500;
	text-align: center;
	padding: 11px 0;
	background-color: #0780e3;
	color: #fff;
	border: 1px solid #0780e3;
	border-radius: 6px;
	overflow: hidden;
	transition: all 250ms;
}

.contact .layer-2 .row-1 .col a.btn-ticket:hover {
	color: #0780E3;
	background-color: #fff;
	border: 1px solid #0780E3;
	padding-left: 30px;
}

.contact .layer-2 .row-1 .col a.btn-ticket:after {
	content: '';
	position: absolute;
	left: -35px;
	top: 0;
	bottom: 0;
	margin: auto 0;
	width: 30px;
	height: 29px;
	background-image: url(/imgs/sprite.webp);
	background-size: 643px 944px;
	background-position: -337px -344px;
	transition: all 150ms;
}

.contact .layer-2 .row-1 .col a.btn-ticket:hover:after {
	left: 5px;
}

.contact .layer-2 .row-2{
	margin-top: 28px;
	background-color: #fff;
	border: 1px solid rgba(56, 70, 80, 0.1);
	box-shadow: 8.485px 8.485px 10px 0px rgba(56, 70, 80, 0.05);
	border-radius: 12px;
}

.contact .layer-2 .row-2 .col{
	padding: 25px;
}

.contact .layer-2 .row-2 .col h3{
	font-size: 17px;
	font-family: 'poppins', Arial, sans-serif;
	margin-bottom: 30px;
}

.contact .layer-2 .row-2 .col p {
	font-size: 14px;
	color: #1f5475;
	opacity: 0.8;
}

.contact .layer-2 .row-2 .col p.bold{
	font-weight: 600;
}

.contact .layer-2 .row-2 .col .mt{
	margin-top: 20px;
}

.contact .layer-2 .gmap{
	background-color: #f8fafb;
	margin-top: 30px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 8.485px 8.485px 10px 0px rgba(56, 70, 80, 0.05);
	background: rgba(255, 255, 255, 0.1);
}

.contact #map{
	height: 330px;
}

/* Breakpoint 768 */

@media only screen and (min-width : 768px) {

	header.contact .slider h1 {
		font-size: 26px;
	}
	
	header.contact .slider h2 {
		font-size: 20px;
	}
	
	.contact .layer-1 h2 {
		font-size: 20px;
	}

	.contact .layer-1 .icons a {
		border-radius: 50%;
		border: 8px solid rgba(228, 235, 240, 0.45);
		background-color: #fff;
		width: 150px;
		height: 150px;
	}
	
	.contact .layer-2 .row-2 .col h3{
		font-size: 20px;
	}

	.contact .layer-2 .row-2 .col p {
		font-size: 15px;
	}
}

/* Breakpoint 1200 */

@media only screen and (min-width: 1200px) {

	header.contact {
		height: 560px;
	}
	
	header.contact .slider h1 {
		font-size: 44px;
	}
	
	header.contact .slider h2 {
		font-size: 22px;
	}
	
	.contact .layer-1 .wrapper{
		padding: 80px 0;
	}
	
	.contact .layer-1 .icons {
		text-align: left;
	}
	
	.contact .layer-1 .col-2{
		margin-top: 0;
	}
	
	.contact .layer-1 .text{
		text-align: left;
	}
	
	.contact .layer-1 h2{
		font-size: 28px;
	}
	
	.contact .layer-2 .wrapper{
		padding-bottom: 85px;
		overflow: visible;
	}
	
	.contact .layer-2 .row-1{
		margin-top: -80px;
	}
	
	.contact .layer-2 .row-2 .col{
		padding: 50px;
	}
	
	.contact .layer-2 .row-2 .col h3{
		font-size: 22px;
	}
	
	.contact .layer-2 .row-2 .col p {
		font-size: 16px;
	}
}