:root {
	
}

@keyframes slideUp {
	0% {bottom: -1.25vw;}
	100% {bottom: 1.25vw;}
}

@keyframes shake {
	10%, 90% {
		transform: translate3d(-1px, 0, 0);
	}
  
	20%, 80% {
		transform: translate3d(2px, 0, 0);
	}

	30%, 50%, 70% {
		transform: translate3d(-4px, 0, 0);
	}

	40%, 60% {
		transform: translate3d(4px, 0, 0);
	}
}

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

[class*="col-"] {
	float: left;
    padding: 15px;
	width: 100%;
}

[class*="col-"] img {
	max-width: 100%;
}

.row::after {
    clear: both;
    content: "";
    display: table;
}

body, input, select, button, textarea {
	font-family: "Oswald";
	font-weight: 400;
	/* font-size: 22px; */
	line-height: 1.5;
}

body.page-backend header, body.page-backend footer, body.page-backend .sticked { display: none; }

input, select, textarea, button {
	border: none;
	background: transparent;
	outline: none;
	border-radius: 0;
	-webkit-appearance: none;
}

input, select, textarea {
	border-bottom: solid 1px #A2A4AD;
	min-width: 176px;
	color: black;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

input:focus, select:focus, textarea:focus, input:active, select:active, textarea:active, .popup form [autofocus]:invalid {
	background: yellow !important;
}

input.error, select.error { border-bottom: solid 3px #e70800 !important; }
label.error, select.error { color: #e70800; }

span[data-error-show] { position: relative; display: inline-block; }
span[data-error-show] label.error { position: absolute; bottom: -18px; left: 0px; font-size: 0.7em; font-weight: 400; }

select:required:invalid { color: #747474; }

.right { float: right; }

.popup { 
	z-index: 9999;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
}

.popup .w {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	background-color: #ffffff;
	box-shadow: 8px 0 24px 0 rgba(23,26,33,.2);
}

.popup .w::before {
	z-index: 0;
	content: "";
	position: absolute;
	top: 0;
	display: block;
	height: 100%;
	background-color: #f8f8f8;
	right: 0;
	left: 0;
	transform: scaleX(.67);
	transform-origin: 100% 50%;
}

.popup .w [data-form] { display: none; }

.popup .c {
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow: scroll;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
	padding: 15vw;
}

.popup .c section {
	width: 90vw;
	position: absolute;
	left: 6vw;
	font-size: 4.3vw;
	text-align: center;
}

.popup .h { z-index: 2; display: block; position: absolute; top: 2vw; right: 2vw; cursor: pointer; }
.popup .h img { max-width: 45px; }
.popup .h:hover img, .popup .h:active img { animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); }

.popup h2 { font-size: 7vw; font-weight: 400; }
.popup h2 br { display: none; }
.popup p.note { line-height: 2; color: #e70800; }
.popup form { font-weight: 700; line-height: 2; }
.popup form input:not([value]), .popup form select:not([value]) { font-weight: 400; font-size: 4.05vw; text-align: center; }
.popup form button, .popup form .button { background: #e70800 url('../img/layout/512px-Arrow_right_font_awesome.png') right 15px center no-repeat; background-size: 20px; color: #000000; font-weight: 400; padding: 15px 45px 15px 15px; cursor: pointer; font-size: 4.5vw; transition: background-position 0.3s ease; color: #ffffff; text-decoration: none; line-height: 1.5; width: 100%; }
.popup form button:hover, .popup form button:active, .popup form .button:hover, .popup form .button:active { background: transparent url('../img/layout/512px-Arrow_right_font_awesome2.png') right 5px center no-repeat; background-size: 20px; color: #000000; }
.popup [data-form] .button.outline { color: #000000; background-color: transparent; background: transparent; border: solid 1px #000000; padding: 15px; margin-bottom: 45px; }
.popup [data-form] .button.outline:hover, .popup [data-form] .button.outline:active { border-color: #e70800; color: #e70800; }
.popup [data-form] .button.outline.right { float: unset; }
.popup [data-form] div.success { color: #e70800; display: none; }
.popup [data-form] div.error { color: #e70800; display: none; }

.popup form a.flip, .popup form .comment {
	overflow: hidden;
	position: relative;
	display: block;
	margin-top: 10px;
	width: 100%;
	font-weight: 400;
	font-size: 3.6vw; 
	color: #a2a4ad;
	text-decoration: none;
	cursor: pointer;
	text-align: center;
	margin-bottom: 45px;
}

.popup form a.flip::before, .popup form a.flip::after {
	content: '';
	position: absolute;
	width: 100%;
	left: 0;
}

.popup form a.flip::before {
	background-color: #e70800;
	height: 2px;
	bottom: 0;
	width: 25px !important;
	margin: 0 auto;
	left: 0;
	right: 0;
	transform: scaleX(0);
	transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}

.popup form a.flip::after {
	content: attr(data-part-0) " " attr(data-part-1) "@" attr(data-part-2) "." attr(data-part-3);
	height: 100%;
	top: 0;
	transform-origin: 100% 50%;
	transform: translate3d(0, 200%, 0);
	transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}

.popup form a.flip:hover::before, .popup form a.flip:active::before {
	transform-origin: 0% 50%;
	transform: scaleX(1);
}

.popup form a.flip:hover::after, .popup form a.flip:active::after {
	transform: translate3d(0, 0, 0);
	color: #e70800;
}

.popup form a.flip span {
	display: inline-block;
	transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}

.popup form a.flip:hover span, .popup form a.flip:active span {
	transform: translate3d(0, -200%, 0);
}

header { position: fixed; background: #ffffff; z-index: 999; width: 100vw; text-align: center; padding: 10px 15px; font-size: 3.9vw; font-weight: 300; box-shadow: 0px 10px 20px #0000000D; line-height: 1.2; }
header a img { max-width: 70vw; }
header label { display: inline-block; }
header.scrolled { font-size: 3vw; box-shadow: 0px 10px 20px #0000000D; top: 0px; }
header.scrolled a img { max-width: 50vw; }

footer { min-height: 100px; }

main { padding-top: 120px; }

.grid { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(2, 1fr); padding: 0 5vw; grid-gap: 5px; }
.grid .item { background: #f8f8f8; /* aspect-ratio: 1/1; */ min-height: calc((100vw - (2 * 5vw) - (1 * 5px)) / 2); padding: 2.5vw; position: relative; font-size: 3vw; font-weight: 400; cursor: pointer; z-index: 1; }
.grid a.item { color: inherit; text-decoration: none; display: block; width: 100%; height: 100%; }

.grid .item.choosable:before { background-color: #000000; content: ""; display: block; position: absolute; width: 100%; height: 100%; transform: translate(-50%,-50%) scale(0); transition: transform .2s, opacity .2s; transform-origin: center center; top: 50%; left: 50%;}
.grid .item.choosable:after { content: ""; background: url('../img/layout/512px-Arrow_right_font_awesome2.png'); background-size: 100%; width: 10px; height: 10px; bottom: 2.5vw; right: 2.5vw; position: absolute; }
.grid .item.choosable:hover, .grid .item.choosable:active { color: #ffffff;  }
.grid .item.choosable:hover:before, .grid .item.choosable:active:before { transform: translate(-50%, -50%) scale(1); }
.grid .item.choosable:hover:after, .grid .item.choosable:active:after { filter: brightness(0) invert(1); transform: rotateY(0deg) rotate(45deg); transition: transform .5s }
.grid .item.choosable label { font-size: 8.53vw; line-height: 1; }
.grid .item.choosable:hover label, .grid .item.choosable:active label { color: white; position: relative; }
.grid .item.choosable h2 { z-index: 2; position: absolute; left: 2.5vw; bottom: 2.5vw; font-size: 3.9vw; font-weight: 900; max-width: 85%; white-space: pre-line; }
.grid .item.choosable:hover h2, .grid .item.choosable:active h2 { display: inline; position: relative; left: unset; bottom: unset; }
.grid .item.choosable p { font-weight: 300; display: none; position: absolute; left: 2.5vw; max-width: 85%; bottom: 2.5vw; font-size: 3.4vw; }
.grid .item.choosable p br { display: none; }
.grid .item.choosable:hover p, .grid .item.choosable:active p { color: white; z-index: 2; animation: slideUp ease .3s; display: block; }

.grid .item.thumb { background-size: cover; cursor: auto; }

.grid .item:nth-child(3), .grid .item:nth-child(9) { grid-column: 2; }

.sticked { position: fixed; left: 0px; bottom: -40px; cursor: pointer; z-index: 999; min-width: 100vw; }
.sticked:hover, .sticked:active { bottom: 0; }
.sticked .c { background-color: #000000; color: #fff; padding: 15px 70px 15px 35px; -webkit-animation: slide-down .8s cubic-bezier(.65,0,.35,1); animation: slide-down .8s cubic-bezier(.65,0,.35,1); transition: transform .4s,min-height .4s; line-height: 1; }
.sticked .c:hover, .sticked .c:active { animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); }
.sticked h2 { font-weight: normal; font-size: 4.5vw; }
.sticked img { max-width: 20px; filter: brightness(0) invert(1); vertical-align: top; float: right; }
.sticked span { font-size: 3vw; padding-right: 45px; background: url('../img/layout/512px-Arrow_right_font_awesome.png') right 25px center no-repeat; background-size: 12px; transition: background-position 0.3s ease; white-space: nowrap; }
.sticked span:hover, .sticked span:active { background-position: right 5px center; text-decoration: underline; }

.eyebrow__flashing-dot {
	background-color: #e70800;
	content: " ";
	width: 16px;
	height: 16px;
	border-radius: 50%;
	margin-right: 10px;
	margin-left: 2px;
	top: -2px;
	position: relative;
	vertical-align: middle;
	display: inline-block;
	-webkit-box-flex: 0;
	-ms-flex: none;
	flex: none;
}

.eyebrow__flashing-dot::before {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	top: 0;
	left: 0;
	border-radius: 50%;
	background: #f74424;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	z-index: 1;
	-webkit-animation: smallPulse 2s ease-out infinite;
	animation: smallPulse 2s ease-out infinite;
}

@keyframes smallPulse {
	0% {
		-webkit-transform:scale(.75);
		transform:scale(.75);
		opacity:1
	}
	95%,
	to {
		-webkit-transform:scale(2);
		transform:scale(2);
		opacity:0
	}
}

.box-expired { background: #e70800; color: #ffffff; padding: .5vw 5vw; font-size: 3.4vw; line-height: 1.2; font-weight: 300; text-align: center; }
body.form.expired .box-expired { position: absolute; top: 0px; width: 100%; z-index: 99999; }

img.arrow { position: absolute; max-width: 7.5vw; top: -17vw; left: -15px; }

@keyframes spin {
  0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(0.5);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

.btn-loader {
	position: relative;
}

.btn-loader:after {
	animation: spin 1s linear infinite;
	content: "";
	border-color: #ffffff transparent #ffffff transparent;
	border-radius: 50%;
	border-style: solid;
	border-width: 5px;    
	display: block;
	height: 30px;
	width: 30px;
	position: absolute;
	left: 0px;
	right: 0px;
	top: 10%;
	margin: auto;
}

.disabled {
	background-color: #EBEBEB !important;
	/* border-color: #EBEBEB !important; */
	color: #9A9A9A !important;
	pointer-events: none;
}

@media only screen and (max-width: 768px) {
	body.form.expired .popup .h { top: 10vw; }
	body.form.expired .popup .c { padding-top: 20vw; }
	body.expired header:not(.scrolled) { top: 35px; }
	body.form.expired main { padding-top: 150px; }
}

@media only screen and (min-width: 768px) {
    .col-m-1 {
		width: 8.33%;
	}
	
    .col-m-2 {
		width: 16.66%;
	}
	
    .col-m-3 {
		width: 25%;
	}
	
    .col-m-4 {
		width: 33.33%;
	}
	
    .col-m-5 {
		width: 41.66%;
	}
	
    .col-m-6 {
		width: 50%;
	}
	
    .col-m-7 {
		width: 58.33%;
	}
	
    .col-m-8 {
		width: 66.66%;
	}
	
    .col-m-9 {
		width: 75%;
	}
	
    .col-m-10 {
		width: 83.33%;
	}
	
    .col-m-11 {
		width: 91.66%;
	}
	
    .col-m-12 {
		width: 100%;
	}
	
	.popup h2 { font-size: 3vw; }
	.popup h2 br { display: unset; }
	.popup form input:not([value]), .popup form select:not([value]) { font-size: 1.7vw; }
	.popup form button, .popup form .button { font-size: 1.8vw; width: unset; }
	.popup form a.flip, .popup form .comment { font-size: 1.6vw; }
	.popup form button, .popup form .button { background-position: right 45px center; padding: 15px 75px 15px 45px; }
	.popup [data-form] .button.outline { padding: 15px 45px; }
	.popup [data-form] .button.outline.right { float: right; }
	
	.popup .c section {
		width: 90vw;
		top: 50%;
		transform: translate(0, -50%);
		font-size: 1.77vw;
		text-align: left;
	}
	
	header { position: absolute; top: 5vw; left: 5vw; background: unset; width: unset; text-align: unset; padding: unset; box-shadow: unset; font-size: 1.9vw; transition: top .3s; }
	header a img { max-width: 45vw;  }
	header.scrolled { position: fixed; top: 0; left: unset; width: 100vw; padding: 10px 0px 10px 5vw; font-size: 1.3vw; background: #ffffff; }
	header.scrolled a img { max-width: 30vw; }
	
	main { padding-top: 15vw; }
	
	footer { min-height: 250px; }
	
	.grid { grid-template-columns: repeat(5, 1fr); grid-gap: 8px; }
	.grid .item { padding: 1.25vw; font-size: .8vw; min-height: calc((100vw - (2 * 5vw) - (4 * 8px)) / 5); }
	
	.grid .item.choosable:after { width: 15px; height: 15px; bottom: 1.25vw; right: 1.25vw; }
	.grid .item.choosable label { font-size: 3vw; }
	.grid .item.choosable h2 { left: 1.25vw; bottom: 1.25vw; font-size: 1.5vw; }
	.grid .item.choosable p { left: 1.25vw; bottom: 1.25vw; font-size: 1.2vw; max-width: 80%; }
	.grid .item.choosable p br { display: unset; }
	
	.grid .item:nth-child(1) { top: 23vw; }
	.grid .item:nth-child(2) { top: 30vw; grid-column: 2; }
	.grid .item:nth-child(3), .grid .item:nth-child(4) { top: 21vw; grid-column: 3; } 
	.grid .item:nth-child(5), .grid .item:nth-child(6), .grid .item:nth-child(8) { top: 11vw; grid-column: 4; }
	.grid .item:nth-child(7), .grid .item:nth-child(9), .grid .item:nth-child(10) { grid-column: 5; top: 20vw; }
	
	.grid .item:nth-child(7) { grid-row: 2; }
	.grid .item:nth-child(9) { display: none; }
	
	.sticked { right: 6.02vw; bottom: -55px; left: unset; min-width: unset; }
	.sticked .c { padding: 35px 70px 35px 35px; }
	.sticked h2 { font-size: 2.2vw; }
	.sticked img { max-width: 25px; }
	.sticked span { font-size: 1.7vw; }
	
	.box-expired { font-size: 1.5vw; text-align: left; }
	.box-expired br { display: none; }
	body.form.expired .popup .h { top: 2vw; }
	body.form.expired .popup .c { padding-top: 15vw; }
	
	img.arrow { max-width: 3vw; top: -7vw; left: -25px; }
}

@media only screen and (min-width: 1024px) {
	.popup h2 { font-size: 2.6vw; }
	.popup form input:not([value]), .popup form select:not([value]) { font-size: 1.3vw; }
	.popup form button, .popup form .button { font-size: 1.4vw; }
	.popup form a.flip, .popup form .comment { font-size: 1.2vw; }
	
	.popup .c section {
		width: 70vw;
		font-size: 1.37vw;
	}
	
	header { font-size: 1.5vw; }
	header a img { max-width: 35vw;  }
	header.scrolled { font-size: 1.1vw; }
	header.scrolled a img { max-width: 25vw; }
	
	main { padding-top: unset; }
	
	.sticked h2 { font-size: 1.8vw; }
	.sticked span { font-size: 1.3vw; }
	
	.box-expired { font-size: 1.1vw; }
	
	img.arrow { max-width: 2.2vw; top: -5.5vw; left: -25px; }
}

@media only screen and (min-width: 1280px) {
    .col-1 {
		width: 8.33%;
	}
		
    .col-2 {
		width: 16.66%;
	}
		
    .col-3 {
		width: 25%;
	}
		
    .col-4 {
		width: 33.33%;
	}
		
    .col-5 {
		width: 41.66%;
	}
		
    .col-6 {
		width: 50%;
	}
		
    .col-7 {
		width: 58.33%;
	}
	
    .col-8 {
		width: 66.66%;
	}
		
    .col-9 {
		width: 75%;
	}
		
    .col-10 {
		width: 83.33%;
	}
	
    .col-11 {
		width: 91.66%;
	}
		
    .col-12 {
		width: 100%;
	}
	
	.wrapper {
		margin: 0px auto;
		/* width: 1200px; */
	}
	
	.popup h2 { font-size: 2.4vw; }
	.popup form input:not([value]), .popup form select:not([value]) { font-size: 1.1vw; }
	.popup form button, .popup form .button { font-size: 1.2vw; }
	.popup form a.flip, .popup form .comment { font-size: 1vw; }
	
	.popup .c section {
		width: 58vw;
		font-size: 1.17vw;
	}
	
	header { top: 4vw; left: 5vw; font-size: 1.3vw; }
	header a img { max-width: 30vw;  }
	header.scrolled { font-size: .84vw; }
	header.scrolled a img { max-width: 20vw; }
	
	footer { min-height: 210px; }
	
	.grid { grid-template-columns: repeat(6, 1fr); grid-gap: 15px; }
	.grid .item { min-height: calc((100vw - (2 * 5vw) - (5 * 15px)) / 6); }
	
	.grid .item.choosable label { font-size: 2.7vw; }
	.grid .item.choosable h2 { font-size: 1.2vw; }
	.grid .item.choosable p { font-size: .9vw; max-width: 74%; }
	
	.grid .item:nth-child(1) { top: 19vw; }
	.grid .item:nth-child(2) { top: 25vw; grid-column: 2; }
	.grid .item:nth-child(3), .grid .item:nth-child(4) { top: 17.5vw; grid-column: 3; } 
	.grid .item:nth-child(5), .grid .item:nth-child(6) { top: 10.5vw; grid-column: 4; }
	.grid .item:nth-child(7), .grid .item:nth-child(8), .grid .item:nth-child(9) { top: 6.8vw; grid-column: 5; }
	.grid .item:nth-child(10) { grid-column: 6; top: 13vw; }
	
	.grid .item:nth-child(7) { grid-row: unset; }
	.grid .item:nth-child(7), .grid .item:nth-child(9) { display: unset; }
	
	.sticked h2 { font-size: 1.5vw; }
	.sticked img { max-width: 25px; }
	.sticked span { font-size: 1vw; }
	
	img.arrow { max-width: 2.2vw; top: -5vw; left: -25px; }
}

@media only screen and (min-width: 1680px) {
	.popup h2 { font-size: 2.2vw; }
	.popup form input:not([value]), .popup form select:not([value]) { font-size: .9vw; }
	.popup form button, .popup form .button { font-size: 1vw; }
	.popup form a.flip, .popup form .comment { font-size: .8vw; }
	
	.popup .c section {
		width: 55vw;
		font-size: 1.15vw;
	}
	
	footer { min-height: 270px; }
	
	.sticked img { max-width: 30px; }
	.sticked span { font-size: .8vw; }
	
	.box-expired { font-size: .8vw; }
	
	img.arrow { max-width: 2vw; top: -5vw; left: -40px; }
}