@charset "UTF-8";

section.contacts {
	position : relative;
	z-index : 20;
	width : 100vw;
	background-image : url("../img/contacts.jpg"); 
	background-position : 50% 100%;
	background-repeat : no-repeat;
	background-size : cover;
	}
	
section.contacts::before {
	position : absolute;
	left : 0;
	top : 0;
	z-index : 10;
	width : 100%;
	height : 100%;
	background-color : rgba(0, 0, 0, 0.6);
	content : "";
	}
	
section.contacts > div { 
	position : relative;
	z-index : 20;
	max-width : 1360px;
	margin : 0 auto;
	color : rgba(255, 255, 255, 1);
	}
	
section.contacts > div > h6 {
	position : relative;
	padding : 0 0 40px 0;
	margin : 0;
	text-align : center;
	}
	
section.contacts > div > h6::before {
	position : absolute;
	bottom : 12px;
	left : calc(50% - 20px);
	z-index : 10;
	width : 40px;
	height : 10px;
	background-color : rgba(225, 100, 40, 1);
	content : "";
	}

section.contacts > div,
section.contacts > div > h6,
section.contacts > div > blockquote { text-align : center; }

section.contacts > div > ul {
	display : flex;
	flex-wrap : wrap;
	width : 100%;
	padding : 0;
	margin : 0;
	list-style : none;
	}
	
section.contacts > div > ul > li { 
	padding-left : 20px;
	padding-right : 20px;
	font: normal 18px/24px "Regular", Arial, sans-serif;
	text-align : left;
	}

section.contacts > div > ul > li > ul > li > strong,
section.contacts > div > ul > li > ul > li > a { font: normal 20px/26px "Regular", Arial, sans-serif; }
section.contacts > div > ul > li > ul > li { margin-bottom : 20px; }
section.contacts > div > ul > li > ul > li > span { display : block; }
section.contacts > div > ul > li > ul > li > a { color : rgba(255, 255, 255, 1); }
section.contacts > div > ul > li > ul > li > a:hover { text-decoration : none; }

section.contacts > div > ul > li > form {
	position : relative;
	width : 280px;
	}
	
section.contacts > div > ul > li > form > div > ul,
section.contacts > div > ul > li > ul {
	width : 100%;
	padding : 0;
	margin : 0;
	list-style : none;	
	}

section.contacts > div > ul > li > form > div,
section.contacts > div > ul > li > form > div > ul > li,
section.contacts > div > ul > li > form > div > textarea, 
section.contacts > div > ul > li > form > div > ul > li > input[type=text] {
	position : relative;
	width : 100%;
	}

section.contacts > div > ul > li > form > div.textarea::before,
section.contacts > div > ul > li > form > div > ul > li::before {
	display : block;
	position : absolute;
	z-index : 1;
	width : 100%;
	height : 100%;
	background-color : rgba(255, 255, 255, 1);
	content : "";
	}
	
section.contacts > div > ul > li > form > div > ul > li > input[type=text],
section.contacts > div > ul > li > form > div > textarea {
	display : block;
	z-index : 2;
	margin-bottom : 20px;
	font: normal 18px/24px "Regular", Arial, sans-serif;
	background-color : rgba(255, 255, 255, 0);
	}
	
section.contacts > div > ul > li > form > div > ul > li > input[type=text] {
	padding : 18px 12px;
	border : 2px solid rgba(255, 255, 255, 1);
	}
	
section.contacts > div > ul > li > form > div > ul > li > input.error { border : 2px solid rgba(255, 0, 0, 1); }
section.contacts > div > ul > li > form > div > ul > li > input.success { border : 2px solid rgba(0, 255, 0, 1); }

section.contacts > div > ul > li > form > div > textarea {
	min-height : 180px;
	padding : 16px 10px;
	border : 2px solid rgba(255, 255, 255, 1);
	resize : none;
	}
	
section.contacts > div > ul > li > form > div > ul > li > input[type=text] + span,
section.contacts > div > ul > li > form > div > textarea + span {
	display : block;
	position : absolute;
	top : 20px;
	left : 12px;
	z-index : 1;
	color : rgba(0, 0, 0, 0.5);
	transform : scale(1,1);
	transition : all 0.25s;
	font: normal 18px/24px "Regular", Arial, sans-serif;
	}
	
section.contacts > div > ul > li > form > div > ul > li > input[type=text]:focus + span,
section.contacts > div > ul > li > form > div > ul > li > input[type=text] + span.selected,
section.contacts > div > ul > li > form > div > textarea:focus + span,
section.contacts > div > ul > li > form > div > textarea + span.selected { transform : scale(0,0); }

section.contacts > div > ul > li > form > div.required {
	position : relative;
	padding-left : 40px;
	}

input[type=checkbox] { display : none !important; }
	
section.contacts > div > ul > li > form > div.required > span.checkbox {
	display : block;
	position : absolute;
	top : 0;
	left : 0;
	z-index : 1;
	width : 24px;
	height : 24px;
	border : 2px solid rgba(225, 100, 40, 1);
	cursor : pointer;
	}
	
section.contacts > div > ul > li > form > div.required > span.checkbox.checked { background-color : rgba(225, 100, 40, 1); }
	
section.contacts > div > ul > li > form > div.required > span.checkbox.checked::before {
	position : absolute;
	content : "";
	top : 5px;
	left : 5px;
	z-index : 20;
	width : 8px;
	height : 4px;
	border-left : solid 2px rgba(255, 255, 255, 1);
	border-bottom : solid 2px rgba(255, 255, 255, 1);
	content : "";
	transform : rotate(-45deg);
	}
	
section.contacts > div > ul > li > form > div.required > span > a { color : rgba(225, 100, 40, 1); }
section.contacts > div > ul > li > form > div.required > span > a:hover { text-decoration : none; }

section.contacts > div > ul > li > form > button {
	display : block;
	width : 100%;
	padding : 0 30px;
	margin : 20px auto;
	border : 0;
	background-color : rgba(243, 243, 243, 1);
	color : rgba(0, 0, 0, 0.5);
	font : normal 18px/48px "Bold", Arial, sans-serif;
	transition : all 0.25s ease;
	}
		
section.contacts > div > ul > li > form > button.active {
	background-color : rgba(225, 100, 40, 1);
	color : rgba(255, 255, 255, 1);
	cursor : pointer;
	}
	
div.social {
	margin : 30px 0 0 0;
	}
	
#__utl-buttons-1 .uptl_toolbar > ul > li > .sn-icon, 
#__utl-buttons-1 .uptl_share_more_popup__list .sn-icon, 
#__utl_follow-popup-panel-wrapper___utl-buttons-1 p .__utl_logo > .sn-icon {
    margin-left : -3px !important;
    margin-right : 15px !important;
	color : rgba(255, 255, 255, 1) !important;
	border : solid 2px rgba(255, 255, 255, 1) !important; 
	}
	
#__utl-buttons-1 .uptl_toolbar > ul > li > .sn-icon:hover, 
#__utl-buttons-1 .uptl_share_more_popup__list .sn-icon:hover, 
#__utl_follow-popup-panel-wrapper___utl-buttons-1 p .__utl_logo > .sn-icon:hover { 
	color : rgba(225, 100, 40, 1) !important;
	border : solid 2px rgba(225, 100, 40, 1) !important; 
	}
	
@media only screen and (min-width : 1441px) {
	section.contacts > div { padding : 60px; }
	section.contacts > div > h6 { font: normal 72px/72px "Headers", sans-serif; }
	section.contacts > div > blockquote { font: normal 28px/32px "Regular", sans-serif; }
	section.contacts > div > ul { margin-top : 30px; }

	section.contacts > div > ul > li { 
		width : 50%; 
		padding-top : 30px;
		}
	
	section.contacts > div > ul > li > form { left : calc(100% - 280px); }
	}
	
@media only screen and (min-width : 1281px) and (max-width : 1440px) {
	section.contacts > div { padding : 50px; }
	section.contacts > div > h6 { font: normal 63px/63px "Headers", sans-serif; }
	section.contacts > div > blockquote { font: normal 26px/30px "Regular", sans-serif; }
	section.contacts > div > ul { margin-top : 25px; }

	section.contacts > div > ul > li { 
		width : 50%; 
		padding-top : 25px;
		}
		
	section.contacts > div > ul > li > form { left : calc(100% - 280px); }
	}
	
@media only screen and (min-width : 961px) and (max-width : 1280px) {
	section.contacts > div { padding : 40px; }
	section.contacts > div > h6 { font: normal 54px/54px "Headers", sans-serif; }
	section.contacts > div > blockquote { font: normal 24px/28px "Regular", sans-serif; }
	section.contacts > div > ul { margin-top : 20px; }
	
	section.contacts > div > ul > li { 
		width : 50%; 
		padding-top : 20px;
		}
		
	section.contacts > div > ul > li > form { left : calc(100% - 280px); }
	}
	
@media only screen and (min-width : 481px) and (max-width : 960px) {
	section.contacts > div { padding : 30px; }
	section.contacts > div > h6 { font: normal 45px/45px "Headers", sans-serif; }
	section.contacts > div > blockquote { font: normal 22px/26px "Regular", sans-serif;  }
	section.contacts > div > ul { margin-top : 15px; }
	
	section.contacts > div > ul > li { 
		width : 100%; 
		padding-top : 15px;
		padding-bottom : 15px;
		}
	
	section.contacts > div > ul > li > form { left : calc(50% - 140px); }
	}
	
@media only screen and (max-width : 480px) {
	section.contacts > div { padding : 20px; }
	section.contacts > div > h6 { font: normal 36px/36px "Headers", sans-serif; }
	section.contacts > div > blockquote { font: normal 20px/24px "Regular", sans-serif;  }
	section.contacts > div > ul { margin-top : 10px; }

	section.contacts > div > ul > li { 
		width : 100%;
		padding-left : 0;
		padding-right : 0;
		padding-top : 10px;
		padding-bottom : 10px;
		}

	section.contacts > div > ul > li > form { left : calc(50% - 140px); }
	}