/* Table of Content
==================================================
	#Font-Face
	#Site Styles
	#Media Queries */

/* #Font-Face
================================================== */
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900&display=swap');
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

/* #Site Styles
================================================== */

/* ### general ### */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { font-family: 'Montserrat', sans-serif; font-size: 12px; color: #000; }
body { background: #fff; }
input, select, textarea { font-family: 'Montserrat', sans-serif; font-size: 12px; color: #000; }
img { border: 0; display: block; }
ul, li { list-style: none; }
:focus { outline: none; }

/* ### global classes ### */
.clear { clear: both; visibility: hidden; line-height: 0; height: 0; }
.center { margin: 0 auto; position: relative; max-width: 1010px; }
.centered { padding-right: calc((100% - 1010px) / 2); padding-left: calc((100% - 1010px) / 2); }
.button { padding: 10px 20px; display: inline-block; text-align: center; font-size: 14px; color: #0f0f0f; text-decoration: none; font-weight: 700; background: #fbc61c; border-radius: 11px; transition: 0.5s; }
.button:hover , .button:focus {color: #fff; background: #6d0b0b; text-decoration: none; }
button:focus { outline: none; }
.error { color: red; margin: 1em; padding: 8px; border: 2px solid red; }

/* ### wrapper ### */
#wrapper { position: relative; display: block; width: 100%; min-height: 100%; }

/* ### main container ### */
#mainCntr { width: 100%; overflow: hidden; }

/* ### header container ### */
#headerCntr { padding-top: 20px; padding-bottom: 20px; overflow: hidden; position: relative; width: 100%; }
#headerCntr .logo { float: left; }
#headerCntr .logo img { max-width: 100%; }
#headerCntr .mobileMenu { margin-top: 10px; display: none; cursor: pointer; z-index: 15; float: right; width: 40px; height: 40px; position: relative; transition: 0.2s; overflow: hidden; }
#headerCntr .mobileMenu span { display: block; height: 4px; text-indent: -9999px; background: #6d0b0b; position: absolute; top: 50%; right: 20%; left: 20%; transition: 0.2s; }
#headerCntr .mobileMenu span:before,
#headerCntr .mobileMenu span:after { display: block; width: 100%; height: 4px; content: ''; background-color: #6d0b0b; transition-duration: 0.2s,0.2s; position: absolute; left: 0; }
#headerCntr .mobileMenu span:before { top: -7px; }
#headerCntr .mobileMenu span:after { bottom: -7px; }
.mm-opened #headerCntr .mobileMenu span { background: none; }
.mm-opened #headerCntr .mobileMenu.is-active span:before,
.mm-opened #headerCntr .mobileMenu.is-active span:after { transition-delay: 0s, 0.2s; }
.mm-opened #headerCntr .mobileMenu span:before { top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.mm-opened #headerCntr .mobileMenu span:after { bottom: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

/* ### menu box ### */
.menuBox:not(.mm-menu) { margin-top: 15px; float: right; }
.menuBox:not(.mm-menu) ul { width: auto; }
.menuBox:not(.mm-menu) ul li { padding: 0 5px; float: left; }
.menuBox:not(.mm-menu) ul li a { padding: 9px 15px; font-size: 14px; color: #000; text-decoration: none; position: relative; }
.menuBox:not(.mm-menu) ul li a:hover { background: #e8e8e8; border-radius: 3px; border-bottom: none; }
.menuBox:not(.mm-menu) ul li ul { display: none; }

/* ### language box ### */
.headerLanguageBox { float: right; display: flex; align-items: center; height: 90%; }
.headerLanguage { margin: 0 2px; cursor: pointer; }
.headerLanguageBoxMobile { display: none; float: right; align-items: center; height: 100%; padding-top: 5px; }



/* ### content container ### */
#contentCntr { width: 100%; }

/* ### form box ### */
.formBox { padding-top: 85px; padding-bottom: 330px; width: 100%; position: relative; background: url(../img/bg-poly2.png) center bottom no-repeat; background-size: cover; }
.formBox:before { position: absolute; left: 0; bottom: 0; content:''; width: 100%; height: 300px; background: url(../img/header-mountains.svg) center top no-repeat; background-size: cover; }
.formBox .left { padding-right: 80px; width:calc(100% - 315px); float: left; }
.formBox .left h1 { margin: 0; font-size: 45px; color: #480606; font-weight: 300; }
.formBox .left p { padding: 23px 0; margin: 0; font-size: 14px; color: #480606; line-height: 26px; }
.formBox .image { position: absolute; left: 140px; bottom: -50px; }
.formBox .right { width: 315px; float: left; }
.formBox .right h2 { font-size: 24px; color: #480606; font-weight: 800; }
.formBox .right p { padding: 16px 0; margin: 0; font-size: 14px; color: #480606; line-height: 26px;}
.formBox .right p.small { padding: 0; font-size: 12px; line-height: 20px; }
.formBox .right p a { color: #dc3232; text-decoration: underline; }
.formBox .right p a:hover { text-decoration: none; }
.formBox .right ul.inputSet { padding-bottom: 22px; }
.formBox .right ul.inputSet li { width: 50%; float: left; }
.formBox .right .inputSet label { margin-bottom: 0; padding-left: 30px; position: relative; cursor: pointer; }
.formBox .right .inputSet label input { opacity: 0; position: absolute;}
.formBox .right .inputSet label span:before { width: 20px; height: 20px; border: 1px solid #d6246a; content: ''; position: absolute; left: 0; background: #fff; }
.formBox .right .inputSet label input:checked + span:after { content: ''; width: 14px; height: 14px; position: absolute; left: 4px; top: 4px; background: #d02f28;}
.formBox .right .inputSet label input[type="radio"] + span:before { border-radius: 50%; }
.formBox .right .inputSet label input[type="radio"]:checked + span:after { content: ''; width: 12px; height: 12px; border-radius: 50%; position: absolute; left: 4px; top: 4px; background: #d6246a;}
.formBox .right .form-group { margin-bottom: 18px; }
.formBox .right .form-control { padding: 5px 9px; height: 32px; border-color: #ffd7d7; border-radius: 0; font-size: 14px; color: #a1a1a1; }
.formBox .right .form-control:focus { box-shadow: none; }
.formBox .right .button { border: none; width: 100%; display: block; cursor: pointer; }
.formBox .right ul.pagination { margin: 15px 0 10px 0; width: 100%; display: block; text-align: center; }
.formBox .right ul.pagination li { padding: 0 8px; display: inline-block; }
.formBox .right ul.pagination li a { width: 8px; height: 8px; border-radius: 100%; display: block; text-indent: -99999px; background: #fff; }
.formBox .right ul.pagination li a:hover, .formBox .right ul.pagination li.is-active a { background: #d6246a; }

/* ### text box ### */
.textBox { padding-top: 93px; padding-bottom: 160px; width: 100%; background: #6d0b0b; }
.textBox .content { padding-right: 95px; width:calc(100% - 480px); float: left; }
.textBox h2 { margin: 0; font-size: 45px; color: #fff; font-weight: 300; }
.textBox p { margin: 0; padding: 20px 0 26px; font-size: 14px; color: #fff; line-height: 22px; }
.textBox h6 { margin: 0 0 10px 0; font-size: 14px; font-weight: 700; color: #fff; }
.textBox ul { margin: 0 0 26px; }
.textBox li { padding-left: 22px; position: relative; font-size: 14px; color: #fff; line-height: 22px;}
.textBox li:before { position: absolute; left: 0; top: 9px; content:''; width: 6px; height: 6px; background: #fff; border-radius: 100%; }
.textBox .button { min-width: 173px; }
.textBox figure { width: 480px; float: left; }
.textBox figure img { width: 100%; }
.textBox.contentBox { padding-top: 135px; padding-bottom: 207px; width: 100%; position: relative;  background: #871818; }
.textBox.contentBox:before { width: 100%; height: 721px; position: absolute; left: 0; bottom: -1px; content:''; background: url(../img/bird-tree.svg) center bottom no-repeat; background-size: cover; }
.textBox .right { width: 480px; float: right; }

/* ### plan box ### */
.planBox { padding-top: 140px; padding-bottom: 215px; width: 100%; position: relative;
	background: #ffffff; background: linear-gradient(to bottom, #ffffff 0%,#ffe7e7 100%); }
.planBox:before { position: absolute; right: -200px; bottom: 0; content:''; width: 100%; height: 400px; background: url(../img/bottom-mountains.svg) right top no-repeat; background-size: cover; }
.planBox h2 { padding-bottom: 67px; font-size: 45px; color: #6D0B0B; font-weight: 300; text-align: center; }
.planBox .holder { padding: 0 43px; margin-right: -40px; }
.planBox .block { width: calc(50% - 40px); margin-right: 40px; float: left; padding: 50px 65px 120px 65px; text-align: center; color: #6D0B0B;  background: #fff; border-radius: 5px;  }
.planBox .block:nth-child(2){ transform: matrix(1.030,0,0,1.029,0,0);}
.planBox .top { padding-bottom: 30px; border-bottom: 1px solid #ccc; }
.planBox .bottom { padding: 23px 0 28px 0; min-height: 260px; }
.planBox .bottom p { font-size: 14px; }
.planBox h3 { font-size: 44px; font-weight: 300; }
.planBox .price { margin: 0; font-size: 55px; font-weight: 900; line-height: 55px; margin-bottom: 5px; }
.planBox small { font-size: 15px; }
.planBox .text { margin: 0; display: block; padding-top: 20px; font-weight: 700; font-size: 14px; }
.planBox ul { list-style: none; }
.planBox li { padding-left: 30px; font-size: 14px; line-height: 24px; position: relative; background: url(../img/arrow.png) left 6px no-repeat; text-align: left; }
.planBox li.first { background: url(../img/arrow2.png) left 6px no-repeat; }
.planBox .bottomText { position: absolute; left: 0; bottom: 35px; width: 100%; font-size: 14px; }
.planBox .bottomText a { color: #6D0B0B; text-decoration: underline; font-weight: 700; }
.planBox .bottomText a:hover { text-decoration: none; }
.planBox .text2 { margin: 0; padding: 25px 0 0 0; }

/* ### bottom box ### */
.bottomBox { padding-top: 50px; padding-bottom: 50px; width: 100%; background: #6d0b0b; }
.bottomBox .holder { padding: 0 30px; }
.bottomBox .block { position: relative; padding: 25px 30px; height:100%; border: 1px solid #979797; background: #fbc61c; display: block; text-decoration: none; color: #353535; }
.bottomBox h5 { margin: 0; padding: 0 0 10px 0; font-size: 19px; color: #1c1c1c; font-weight: 700; }
.bottomBox p { margin: 0; padding: 0; font-size: 14px; color: #353535; line-height: 20px; }
.bottomBox .block:before { position: absolute; right: 25px; top: 50%; transform: translateY(-50%); font-size: 33px;  content: "\f105"; font-family: 'FontAwesome';}
.bottomBox .block:hover { text-decoration: none!important; }

/* ### footer container ### */
#footerCntr { width: 100%; background: linear-gradient(to bottom, #6d0b0b, #210606); }

/* ### footer row ### */
.footerRow { color: rgba(255,255,255,.7); border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; padding-top: 40px; padding-bottom: 40px; }
.footerDivider { margin: 0 10px; }
.footerAddress { line-height: 2; display: block; }
.footerAddress > a { color: rgba(255,255,255,.7) }
.footerLanguageBox { display: flex; }
.footerLanguage { margin: 0 4px; cursor: pointer; }

/* ### contact box ### */
.contactBox { padding-top: 150px; padding-bottom: 330px; width: 100%; position: relative; background: url(../img/bg-poly3.jpg) center top no-repeat; background-size: cover; }
.contactBox-noBg { background: none}
.contactBox:before { position: absolute; left: 0; bottom: 0; content:''; width: 100%; height: 300px; background: url(../img/header-mountains.svg) center top no-repeat; background-size: cover; }
.contactBoxTitle { margin: 50px 0 80px; font-size: 45px; color: #480606; font-weight: 300; text-align: center; }
.contactBoxSubtitle { font-size: 24px; color: #480606; font-weight: 800; text-align: center; }
.contactBoxClosingWords { margin: 0 0 10px 0; font-size: 14px; font-weight: 700; color: #480606; text-align: center; margin-bottom: 40px; }
.contactBoxContact {display: flex; justify-content: center; margin: 30px 0}
.contactBoxContact > * {margin: 0 20px;}
.contentBoxAddress {display: flex; flex-direction: column;}
.contentBoxAddress > .prim { display: flex; margin-bottom: 20px;}
.contentBoxAddress > .second { margin-left: 30px;}
.contactBoxForm .form-control { padding: 19px 14px; border: 1px solid #FFC9C9; }
.contactBox-noBg .form-control { padding: 19px 14px; border: 1px solid #ccc; }
.contactBoxForm .row { margin-bottom: 1.5em; }
.contactBoxForm .button { width: 254px; display: block; margin: 3em auto 0; border: none; cursor: pointer; }
.contactBoxContact a { font-size: 14px; color: #480606; line-height: 24px; display: flex; align-items: flex-start; padding: 10px; }
.contactBoxContact a span { margin-left: 10px; }

/* ### form fabric reusable styles ### */
.ffHeading { margin: 0 0 2em; font-size: 45px; color: #480606; font-weight: 300; }
.ffText { padding: 0; margin: 0 0 2em; font-size: 14px; color: #480606; line-height: 26px; }
.ffBgPoly { padding-top: 85px; padding-bottom: 330px; width: 100%; position: relative; background: url(../img/bg-poly3.jpg) center bottom no-repeat; background-size: cover; }
.ffBgPoly:before { position: absolute; left: 0; bottom: 0; content:''; width: 100%; height: 300px; background: url(../img/header-mountains.svg) center top no-repeat; background-size: cover; }
.ffBgWhite { padding: 100px 0; background: #fff; }
.ffBgDarkRed { padding: 100px 0; background: #6D0B0B; }
.ffBgLightRed { padding: 100px 0; background: #871818; }
.ffHeadingLight { margin: 0 0 2em; font-size: 45px; color: #fff; font-weight: 300; }
.ffTextLight { padding: 0; margin: 0 0 2em; font-size: 14px; color: #fff; line-height: 26px; }
.ffImgContainer { text-align: center; }
.ffImgContainer img { margin: 0 auto; width: 100%; }
.ffImgPadRight { padding-right: 80px; }
.ffImgPadLeft { padding-left: 80px; }
.ffIconWrapper {
	display: flex;
	flex-wrap: wrap;
}
.ffIconBlock {
	flex: 1 0 50%;
	padding: 30px 50px;
}
.ffIconBlockTitle {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}
.ffTitleText {
	margin: 0 0 0 10px;
	font-size: 14px;
	color: #480606;
	line-height: 26px;
	font-weight: bold;
}

/* #Media Queries
================================================== */
@media only screen and (max-width: 1300px) {
	.planBox:before { right: 0; }
}

@media only screen and (max-width: 1024px) {
	.centered { padding-left: 20px; padding-right: 20px; }
	.center { padding-left: 20px; padding-right: 20px; }
	.formBox .left h1 { font-size: 42px; }
	.formBox { padding-top: 50px; }
	.textBox { padding-top: 60px; padding-bottom: 120px; }
	.textBox .content { padding-right: 40px; }
	.textBox h2 { font-size: 42px; }
	.textBox.contentBox { padding-top: 100px; }
	.textBox.contentBox::before { height: 640px; }
	.planBox { padding-top: 100px; }
	.planBox h2 { font-size: 42px; }
	.bottomBox { min-height: 350px; padding-top: 50px; background: center top; }
}

@media only screen and (max-width: 979px) {
	.menuBox:not(.mm-menu) ul li a { padding: 9px 10px; }
	.formBox .right { width: 280px; }
	.formBox .left { padding-right: 50px; width: calc(100% - 280px);}
	.formBox .left h1 { font-size: 38px; }
	.formBox .left .image img { width: 75%; }
	.formBox::before { height: 250px; }
	.formBox { padding-bottom: 260px; }
	.textBox figure { width: 320px; }
	.textBox .content { padding-right: 30px; width: calc(100% - 320px);}
	.textBox { padding-top: 50px; padding-bottom: 80px; }
	.textBox .right { width: 350px; }
	.textBox.contentBox { padding-top: 80px; padding-bottom: 125px; }
	.textBox.contentBox::before { height: 560px; }
	.planBox .holder { padding: 0; margin-right: -35px; }
	.planBox .block { padding: 40px 30px 120px 30px;}
	.planBox h3 { font-size: 38px; }
	.planBox .price { font-size: 45px; line-height: 45px; }
	.bottomBox .holder { padding: 0; }
	.bottomBox { min-height: 300px; }
	.planBox h2 { font-size: 38px; }
	.menuBox:not(.mm-menu) ul li.is-active a:after { left: 10px; width: calc(100% - 20px); }
}

@media only screen and (max-width: 767px) {
	.menuBox:not(.mm-menu) { display: none; }
	.headerLanguageBox { display: none; }
	.headerLanguageBoxMobile { display: flex; }
	#headerCntr .mobileMenu { display: block; }
	.formBox .left { width: 100%; padding: 0 0 40px 0; }
	.formBox .right { width: 100%; }
	.formBox::before { height: 186px; }
	.formBox { padding-bottom: 320px; }
	.formBox .left .image { left: 50%; transform: translateX(-50%); bottom: -150px; width: 160px; }
	.formBox .left .image img { width: 100%; }
	.textBox .content { width: 100%; padding: 0 0 30px 0; }
	.textBox figure { width: 100%; }
	.textBox h2 { font-size: 35px; }
	.textBox .right { width: 100%; }
	.textBox.contentBox::before { height: 260px; }
	.textBox.contentBox { padding-top: 60px; padding-bottom: 150px; }
	.planBox { padding-top: 50px; }
	.planBox h2 { font-size: 33px; padding-bottom: 50px; }
	.planBox h2 br { display: none; }
	.planBox .holder { margin: 0; }
	.planBox .block { padding-bottom: 90px; width: 100%; margin: 0 0 30px 0; }
	.planBox .block:nth-child(2) { transform: none; }
	.planBox .bottomText { bottom: 45px; }
	.bottomBox .block { margin-bottom: 20px; height: auto; min-height: 124px; }
	.bottomBox { min-height: inherit; padding-bottom: 50px;}
	.formBox .right { position: relative; z-index: 10; }
	.mm-listview > li.is-active a { color: #000; font-weight: bold; }
	.contactBoxContact { flex-direction: column; align-items: center; }
	.ffBgPoly::before { height: 186px; }
	.ffBgPoly { padding-bottom: 320px; }
	.ffBgWhite { padding: 60px 0; }
	.ffBgDarkRed { padding: 60px 0; }
	.ffBgLightRed { padding: 60px 0; }
	.ffImgContainer img { margin: 50px auto; max-width: 300px; }
	.ffImgPadRight { padding-right: 15px; }
	.ffImgPadLeft { padding-left: 15px; }
	.ffIconBlock { padding: 10px}
}

@media only screen and (max-width: 479px) {
	.formBox .left h1 { font-size: 30px; }
	.formBox .left p { font-size: 13px; line-height: 22px; }
	.formBox .right p { font-size: 13px; line-height: 24px; }
	.formBox .right h2 { font-size: 22px; }
	.textBox { padding-top: 30px; padding-bottom: 50px; }
	.textBox h2 { font-size: 24px; }
	.textBox p { font-size: 13px; }
	.textBox li { font-size: 13px; }
	.textBox.contentBox::before { height: 150px; }
	.planBox h2 { padding-bottom: 30px; font-size: 25px; }
	.planBox h3 { font-size: 30px; }
	.planBox .price { font-size: 38px; line-height: 38px; }
	.planBox .top { padding-bottom: 18px; }
	.planBox li { font-size: 13px; }
	.bottomBox { padding-top: 0; }
	.bottomBox .block { padding: 20px 33px 20px 20px; }
	.bottomBox h5 { font-size: 17px; }
	.bottomBox p { font-size: 13px; }
	.ffIconBlock {
		flex: 1 0 100%;
	}
}

@media only screen and (min-width: 2000px) {
	.textBox.contentBox::before { background-size: contain; }
}
