* {margin: 0; padding: 0; outline: none; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
*:before, *:after {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
html {height: 100%;}
body {height: 100%; min-height: 100%; font: 400 15px/1.4 'Roboto', sans-serif; color: #262626;}

aside, nav, footer, header, section, article, menu {display: block;}

a, a:hover, a:active, a:visited {color: #ff7b00; text-decoration: underline; cursor:pointer;}
a img {border:none;}
img {vertical-align: middle; max-width: 100%; height: auto;}

p {margin:0 0 20px 0;}

ol {margin: 0 0 20px 30px;}
ol li {margin: 0 0 10px 0;}
ul {margin: 0 0 20px 30px;}
ul li {margin: 0 0 10px 0;}

nav ul, nav ul li {list-style: none; margin: 0;}

/* Grid */
#pageWrap {min-height: 100%; min-width: 320px; border-left: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; background: #fff; position: relative;}
header {width: 100%; height: 100px; background: #262626; position: absolute; left: 0; top: 0; z-index: 100; padding: 22px 40px; text-align: center;}
header .logo {width: 200px; height: 56px; display: inline-block; vertical-align: middle; background: url(../img/logo-new.png) center center no-repeat; background-size: contain; cursor: default}
footer {width: 100%; height: 100px; background: #262626; position: absolute; left: 0; bottom: 0; z-index: 100;
	padding: 30px 40px; color: #fff;}
footer .copy {max-width: 200px; margin: 0 auto; text-align: center; font: 400 12px/1.6 'Roboto', sans-serif;}
#page {width: 100%; min-height: 500px; position: relative; padding: 120px 30px;}

.content {min-height: 100%; margin: 0 0 5px 0;}
.clearfix {display: block; width: 100%; height: 0; clear: both;}

/* Titles */
h1, .H1 {font: 600 18px/1.2 'Roboto', sans-serif; margin: 0 0 10px 0; text-transform: uppercase;}
h2, .H2 {font: 600 16px/1.4 'Roboto', sans-serif; margin: 0 0 10px 0; text-transform: uppercase;}
h3, .H3 {font: 400 16px/1.4 'Roboto', sans-serif; margin: 0 0 10px 0;}

/* Elements */
article {padding: 20px;}
article ul {list-style: none; margin: 0 0 20px 35px; font: 600 1em/1.4 'Roboto', sans-serif;}
article ul li:before {content: ''; display: inline-block; vertical-align: middle; width: 15px; height: 2px; background: #ff7b00; margin: 0 20px 0 -35px;}
article ol {list-style: none; counter-reset: numlist; font: 600 1em/1.4 'Roboto', sans-serif;}
article ol li:before {counter-increment: numlist; content: counter(numlist); display: inline-block; vertical-align: middle; width: 15px; color: #ff7b00; margin: 0 5px 0 -20px;}

.pageHead {color: #ff7b00;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-transform: uppercase;border-bottom: 1px dotted #3d3d3d;margin: 0 0 35px 0;
	padding: 0 0 10px 0;}
.pageHead h1 {margin: 0 20px 0 0;}
.pageHead .step {font: 600 18px/1.2 'Roboto', sans-serif;}



/* Forms */
textarea {resize:none; overflow: hidden;}
fieldset {border: none;}

::-webkit-input-placeholder {color: #454545;}
::-moz-placeholder {color: #454545;}
:-moz-placeholder {color: #454545;}
:-ms-input-placeholder {color: #454545;}

.input { position: relative;}
.input input {display: block; width: 100%; padding: 0 15px; font: 400 14px/38px 'Roboto', sans-serif; border: 1px solid #aeaeae; border-radius: 3px; background: #fff; color: #454545;}
.input textarea {display: block; width: 100%; height: 100px; padding: 10px 15px; font: 400 14px/1.2 'Roboto', sans-serif; border: 1px solid #aeaeae; border-radius: 3px; background: #fff; color: #454545;}
.input.error input {color: #ff7b00;}
.input input:focus, .input textarea:focus, .input.error input, .input.error textarea {border: 1px solid #ff7b00;}
.input.error .errLabel {color: #ff7b00; font: 400 12px/1.2 'Roboto', sans-serif; margin: 5px 0 0 0;}

.checkBox {}
.checkBox input {display: none;}
.checkBox label {display: block; padding: 0 0 0 30px; font: 400 13px/1.2 'Roboto', sans-serif; color: #606060; cursor: pointer; transition: all .3s ease;}
.checkBox label i {display: inline-block; vertical-align: middle; width: 16px; height: 16px; line-height: 10px; text-align: center; border: 3px solid #ff7b00; border-radius: 50%; margin: 0 14px 0 -30px;}
.checkBox label i:before {content: ''; display: inline-block; vertical-align: middle; width: 4px; height: 4px; border-radius: 50%; background: #ff7b00; opacity: 0; transition: all .3s ease;}
.checkBox input:checked + label i:before {opacity: 1;}

.radioBox {}
.radioBox input {display: none;}
.radioBox label {display: block; padding: 0 0 0 30px; font: 400 14px/1.2 'Roboto', sans-serif; color: #212121; cursor: pointer; transition: all .3s ease;}
.radioBox label i {display: inline-block; vertical-align: middle; width: 21px; height: 21px; line-height: 13px; text-align: center; border: 3px solid #ff7b00; border-radius: 50%; margin: 0 9px 0 -30px; background: #fff;}
.radioBox label i:before {content: ''; display: inline-block; vertical-align: middle; width: 5px; height: 5px; border-radius: 50%; background: #ff7b00; opacity: 0; transition: all .3s ease;}
.radioBox input:checked + label {font: 600 14px/1.2 'Roboto', sans-serif;}
.radioBox input:checked + label i:before {opacity: 1;}

/* Buttons */
.Button {display: inline-block; vertical-align: middle; cursor: pointer; text-decoration: none; white-space: nowrap; transition: all .3s ease; border-radius: 3px; text-transform: uppercase; font: 500 16px/42px 'Roboto', sans-serif; text-align: center;}
.Button input {display: block; width: 100%; background: none; border: none; cursor: pointer; color: inherit; font: inherit; text-transform: uppercase; text-align: center;}
.Button input, a.Button {padding: 0 25px;}

.orangeBtn {background: #ff7b00; color: #fff;}
.orangeBtn:hover {box-shadow: 0 0 15px rgba(255,123,0,.65)}

.grayBtn {background: #aeaeae; color: #fff;}
.grayBtn:hover {box-shadow: 0 0 15px rgba(174, 174, 174, 0.65)
}

/* Install */
.installFormBlock {position: relative;display: flex; justify-content: space-between;}
.installFormBlock.process .installForm, .installFormBlock.complete .installForm {opacity: 0;}
.installForm {width: 60%}
.installForm .radioSet .radioBox {margin: 0 0 25px 0;}
.installForm .inputSet {background: #f6f6f6; border-radius: 3px; border: 1px solid #e6e6e6; padding: 30px;}
.installForm .inputSet .input {max-width: 470px; margin: 0 auto 15px auto;}
.installForm .inputSet .addressInput {max-width: 470px; margin: 0 auto 25px auto;}
.installForm .inputSet .checkBox {max-width: 310px; margin: 0 auto 25px auto;}
.installForm .inputSet .Button {max-width: 310px; margin: 0 auto; display: block;}
.installForm .inputSet .note {color: #606060; font: 400 13px/1.4 'Roboto', sans-serif; max-width: 470px; margin: 10px 15px 0 15px;}

.addressInput {}
.addressInput .namePart {background: #aeaeae; padding: 0 15px; color: #fff; line-height: 38px;}
.addressInput .namePart:first-child {border-radius: 3px 0 0 3px;}
.addressInput .namePart:last-child {border-radius: 0 3px 3px 0;}
.addressInput .input {border: 1px solid #aeaeae; border-radius: 3px; background: #fff; display: flex; }
.addressInput .input input {border: none; width: auto; flex-grow: 1;}
.addressInput .input.error {
	border-color: #ff7b00;
}

.addressInput .input.error .namePart {
	background-color: #ff7b00;
}

.addressInput.error .errLabel {color: #ff7b00; font: 400 12px/1.2 'Roboto', sans-serif; margin: 5px 0 0 0;}
.checkBox.error .errLabel {color: #ff7b00; font: 400 12px/1.2 'Roboto', sans-serif; margin: 5px 0 0 0;}

.messageLayer {visibility: hidden; opacity: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #606060; background: #fff; display: flex; align-items: center; justify-content: center; transform: scale(0); text-align: center; transition: opacity .5s ease;}
.messageLayer .message {max-width: 720px;}
.messageLayer .img {display: inline-block; vertical-align: middle; margin: 0 0 40px 0;}
.messageLayer .img .animation {display: block; animation: rotate 2s steps(12,end) infinite;}
@keyframes rotate {from {transform: rotate(0deg);} to {transform: rotate(360deg);}}
@-moz-keyframes rotate {from {transform: rotate(0deg);} to {transform: rotate(360deg);}}
.messageLayer .text {margin: 0 0 40px 0;}
.messageLayer .title {margin: 0 0 50px 0; text-transform: uppercase;}
.messageLayer.complete .title {font: 500 25px/1.2 'Roboto', sans-serif; color: #49c81d;}
.messageLayer.process .title {font: 500 18px/1.4 'Roboto', sans-serif; color: #ff7b00;}

.installFormBlock.process .messageLayer.process, .installFormBlock.complete .messageLayer.complete {opacity: 1; visibility: visible; transform: scale(1);}


.hidden-form {display: none}
.hidden {display: none}