/* Key-colors ( https://colorscheme.ru/#3s31TpfJ.w0w0 ):
	#136 - darkBlue
	#39c - lightBlue
	#d44b38 - red

	blue:
	#3399CC - blue
	#115F85 - darkBlue
	#87C7E6 - lightBlue
	#437D99 - desaturateBlue
	#64BBE6 - saturateBlue

	orange:
	#FFC736 - orange
	#BFA04E - desaturateOrange
	#A67D12 - darkOrange
	#FFD568 - lightOrange
	#FFE090 - beige

	red:
	#FF6036 - red
	#BF664E - desaturateRed
	#A63012 - darkRed
	#FF8868 - lightRed
	#FFA790 - pink
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
  blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
  font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl,
  dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
  tfoot, thead, tr, th, td {
	/* вместо звёздочки */
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

html {
	font-size: 20px;
	font-family: sans-serif;
}

audio, canvas, video { display: inline-block; max-width: 100%; }

html, body { overflow-x: hidden; }

article, aside, details, figcaption, figure, footer,
  header, hgroup, main, nav, section, summary {
	/* для старых браузеров */
	display: block;
}

section {
	text-align: center;
}

a { color: inherit; }



/* ОСТАЛЬНОЕ */
.wrapper, .wrapperTape {
	position: relative;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}
.wrapperTape {
	position: absolute;
	top: 0;
}
.wrapperTape { max-width: 1520px; }

.numberTape {
	position: absolute;
	display: inline-block;
	text-align: center;
	background: #39c;
	color: #fff;
	font-weight: bold;
	right: 3%;
	padding: 15px;
	padding-top: 50px;
	border-radius: 0 0 15px 15px;
	/*border: 5px solid #fff;*/
	margin-top: -40px;
	opacity: 0.9;
	z-index: 1;
}
	.numberTape p {
		color: #fff;
		text-decoration: none;
	}
	.numberTape p:first-child {
		background: url('../img/icon24White.svg') no-repeat left center / 20px 20px;
		margin-bottom: 5px;
		text-indent: 22px;
	}

.logo {
	position: absolute;
	left: 10%;
	margin-top: 10px;
	z-index: 1;
}

header {
	background: url(../img/bg.png) no-repeat center center / cover;
	height: 500px;
	overflow-x: hidden;
}
	.numberMain {
		color: #000;
		text-decoration: none;
		padding-top: 100px;
		font-size: calc(1em + 4vw);
		font-weight: bold;
		text-align: center;
	}

.evacuator {
	position: absolute;
	right: calc(50% - 50px);
	top: 185px;
}

.advantagesTop {
	position: absolute;
	list-style: none;
	top: 200px;
	right: calc(50% - 310px);
}
	.advantagesTop li {
		border-radius: 15px;
		padding: 15px;
		padding-left: 65px;
		margin-bottom: 15px;
		opacity: 0.95;
	}
	.advantagesTop li:nth-child(1) {
		background: #fff url('../img/iconMoney.svg') no-repeat 15px center / 40px 40px;
	}
	.advantagesTop li:nth-child(2) {
		background: #fff url('../img/iconTime.svg') no-repeat 15px center / 40px 40px;
	}
	.advantagesTop li:nth-child(3) {
		background: #fff url('../img/iconCard.svg') no-repeat 15px center / 40px 40px;
	}

.order {

}
	.order .wrapper { max-width: 800px; }
	.orderTape .orderItem { display: inline-block; }
	.orderTape .orderItem::before {
		content: '';
		display: block;
		position: absolute;
		background-color: #3399CC;
		height: 3px;
		width: 100%;
		opacity: 0;
		bottom: -20px;
		transition: .3s;
	}
	.orderTape .orderItem:hover::before,
		.orderTape .orderItem.active::before {
		opacity: 1;
		bottom: -5px;
	}
	.orderTape .orderItem:not(:last-child) {
		margin-right: 15px;
	}
	.order form {
		padding-top: 30px;
		max-width: 300px;
		margin: 0 auto;
	}
	.order form div:not(:first-child) {
		margin-top: 20px;
	}
	.order input {
		font-size: 20px;
		min-width: 280px;
		padding: 6px 10px;
	}
	.order select {
		font-size: 20px;
		min-width: 304px;
		padding: 6px 0 6px 33px;
	}
	.order label {
		position: absolute;
		padding: 5px 0 5px 40px;
		color: #777;
		left: 0; top: 3px;
		cursor: text;
		-webkit-transition: .5s;
		-ms-transition: .5s;
		transition: .5s;
	}
	.order input[type="submit"] {
		min-width: 218px;
		padding: 8px;
		border: none;
		cursor: pointer;
		transition: .3s;
	}
	.order input[type="submit"]:hover {
		opacity: .7;
	}
	.order select { background: url('../img/logo-image.png') no-repeat 8px center / 25px 25px; }
	.order label[for="from"] { background: url('../img/iconFrom.svg') no-repeat 8px center / 25px 25px; }
	.order label[for="when"] { background: url('../img/iconTime.svg') no-repeat 8px center / 25px 25px; }
	.order label[for="phone"] { background: url('../img/iconPhone.svg') no-repeat 8px center / 25px 25px; }
	form input:focus + label, form input:valid + label {
		opacity: 0;
		visibility: hidden;
	}
@media (max-width: 420px) {
	.orderItem img { max-width: 120px; }
}



section.alter {
	background: #39c;
	color: #fff;
	padding: 30px 15px;
	margin: 20px 0;
}
	section.alter .wrapper img { height: 110px; }
	.contactIcons {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		max-width: 580px;
		margin: 0 auto;
	}
	.contactIcons figure {
		margin: 0;
		transition: .5s;
	}
	.contactIcons figure:hover { opacity: .7; }
	.contactIcons figcaption {
		color: #fff;
		text-decoration: underline;
		margin-top: 10px;
	}
@media (max-width: 420px) {
	section.alter .wrapper h3 { font-size: 20px; }
	section.alter .wrapper img { height: 55px; }
}

section.about {
	margin: 30px 15px;
}
	section.about .wrapper {
		max-width: 800px;
		margin: 0 auto;
	}
	.aboutBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.aboutItem {
		max-width: 47%;
		text-align: left;
		margin-bottom: 20px;
	}
	.aboutItem h2 {
		background: url('../img/ok.svg') no-repeat left top / 26px 26px;
		padding: 2px 5px 10px 35px;
		font-weight: bold;
	}
@media (min-width: 601px) {
	.aboutItem:nth-child(2n) { text-align: right; }
	.aboutItem:nth-child(2n) h2 {
		background: url('../img/ok.svg') no-repeat right top / 26px 26px;
		padding: 2px 35px 10px 5px;
	}
}
@media (max-width: 600px) {
	.aboutItem {
		max-width: 100%;
	}
}



.infoList {
	padding-left: 15px;
}



footer {
	position: relative;
	padding: 30px 15px;
}
	footer .wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		max-width: 700px;
		margin: 0 auto;
	}
	footer::before {
		content: '';
		position: absolute;
		top: 0; left: 0;
		width: 100%;
		height: 4px;
		background: #555;
	}
	footer p, footer p a {
		color: #000;
		text-decoration: none;
	}
@media (max-width: 360px) {
	footer p:first-child { margin-bottom: 20px; }
}






/* Анимации */
.animate {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
	.animate1_5 { animation-duration: 1.5s; }
	.animate2 { animation-duration: 2s; }
	.animate2_5 { animation-duration: 2.5s; }
	.animate3 { animation-duration: 3s; }

@-webkit-keyframes bounce {
    100%,
    20%,
    50%,
    80% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    0%, 40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}
@keyframes bounce {
    100%,
    20%,
    50%,
    80% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    0%, 40% {
        -webkit-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    60% {
        -webkit-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}
	.bounce {
	    -webkit-animation-name: bounce;
	    animation-name: bounce;
	}

@-webkit-keyframes bounceInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(25px);
        transform: translateY(25px);
    }
    80% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes bounceInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-500px);
        -ms-transform: translateY(-500px);
        transform: translateY(-500px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(25px);
        -ms-transform: translateY(25px);
        transform: translateY(25px);
    }
    80% {
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
	.bounceInDown {
	    -webkit-animation-name: bounceInDown;
	    animation-name: bounceInDown;
	}

@-webkit-keyframes rotateRight {
	0% {
		opacity: 0;
		transform: translateX(-500px);
		-webkit-transform: translateX(-500px);
	}
	50% { opacity: 1; }
	100% {
		transform: translateX(0) rotate(2turn);
		-webkit-transform: translateX(0) rotate(2turn);
	}
}
@keyframes rotateRight {
	0% {
		opacity: 0;
		transform: translateX(-500px);
		-webkit-transform: translateX(-500px);
		-ms-transform: translateX(-500px);
	}
	50% { opacity: 1; }
	100% {
		transform: translateX(0) rotate(2turn);
		-webkit-transform: translateX(0) rotate(2turn);
		-ms-transform: translateX(0) rotate(2turn);
	}
}
	.rotateRight {
		-webkit-animation-name: rotateRight;
		animation-name: rotateRight;
	}

@-webkit-keyframes slideLeft {
	0% {
		opacity: 0;
		transform: translateX(500px);
		-webkit-transform: translateX(500px);
	}
	50% { opacity: 1; }
	100% {
		transform: translateX(0);
		-webkit-transform: translateX(0);
	}
}
@keyframes slideLeft {
	0% {
		opacity: 0;
		transform: translateX(500px);
		-webkit-transform: translateX(500px);
		-ms-transform: translateX(500px);
	}
	50% { opacity: 1; }
	100% {
		transform: translateX(0);
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
	}
}
	.slideLeft {
		-webkit-animation-name: slideLeft;
		animation-name: slideLeft;
	}

@-webkit-keyframes slideRight {
	0% {
		opacity: 0;
		transform: translateX(-500px);
		-webkit-transform: translateX(-500px);
	}
	50% { opacity: 1; }
	100% {
		transform: translateX(0);
		-webkit-transform: translateX(0);
	}
}
@keyframes slideRight {
	0% {
		opacity: 0;
		transform: translateX(-500px);
		-webkit-transform: translateX(-500px);
		-ms-transform: translateX(-500px);
	}
	50% { opacity: 1; }
	100% {
		transform: translateX(0);
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
	}
}
	.slideRight {
		-webkit-animation-name: slideRight;
		animation-name: slideRight;
	}

@keyframes slideUp {
	0% {
		opacity: 0;
		transform: translateY(500px);
		-webkit-transform: translateY(500px);
		-ms-transform: translateY(500px);
	}
	50% { opacity: 1; }
	100% {
		transform: translateY(0);
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
	}
}
	.slideUp {
		-webkit-animation-name: slideUp;
		animation-name: slideUp;
	}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}
	.pulse {
	    -webkit-animation-name: pulse;
	    animation-name: pulse;
	}

@-webkit-keyframes flash {
    0%,
    100%,
    50% {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0;
    }
}
@keyframes flash {
    0%,
    100%,
    50% {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0;
    }
}
	.flash {
	    -webkit-animation-name: flash;
	    animation-name: flash;
	}

@-webkit-keyframes flashEase {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes flashEase {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
	.flashEase {
	    -webkit-animation-name: flashEase;
	    animation-name: flashEase;
	}

.wrapperThin { max-width: 600px; }


/* Утилиты */
.blueBlock { background-color: #3399CC; }
.blueText { color: #3399CC; }
.darkBlueBlock { background-color: #115F85; }
.darkBlueText { color: #115F85; }
.orangeBlock { background-color: #FFC736; }
.orangeText { color: #FFC736; }
.beigeBlock { background-color: #FFE090; }
.beigeText { color: #FFE090; }
.redBlock { background-color: #FF6036; }
.redText { color: #FF6036; }
.darkRedBlock { background-color: #A63012; }
.darkRedBlock { color: #A63012; }
.whiteText { color: #fff; }

.size16 { font-size: 16px; }
.size18 { font-size: 18px; }
.size25 { font-size: 25px; }
.size30 { font-size: 30px; }
.size35 { font-size: 35px; }
.size40 { font-size: 40px; }
.bold { font-weight: bold; }

.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }

.textAlignLeft { text-align: left; }
.textAlignCenter { text-align: center; }
.textAlignRight { text-align: right; }
.blockAlignCenter { margin-left: auto; margin-right: auto; }

.relative { position: relative; }
.absolute { position: absolute; }


/* Ключевые разрешения */
@media (max-width: 768px) {
	.logo { left: 4%; }
}
@media (max-width: 500px) {
	.advantagesTop { right: calc(50% - 115px); }
	.evacuator {
		margin-top: 0;
		right: calc(100% - 300px);
	}
}