@font-face { font-family: Lifehack; src: url('/style/fonts/lifehack-sans-3.otf'); ont-weight: 400; font-style: normal; font-display: swap; }
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:wght@300;400;500&display=swap');

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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
.clear {clear:both;}
html, body {width: 100%; height: 100%; padding: 0; margin: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;}
body {font-size: 16px; font-family: "Fira Sans Extra Condensed", sans-serif; width: 100%; height: 100%; line-height:140%; color:#2f2f2f; font-weight:300; }
img {max-width:100%; height:auto;}
.wrapper {width: 100%; margin: 0 auto;}
header {text-align: center; padding: 50px 0 20px; }
.title{min-height: 106px; font-family: "Lifehack",Verdana, Arial, sans-serif;}
.title{ background: url("/images/logo.svg") no-repeat left center; background-size: 100px; padding: 0 0 0 120px; text-align: left; width: 500px; margin: 0 auto;}
section{ text-align: center;}
h1{ font-size: 50px; font-weight: 600; line-height: 1; padding: 20px 0 0; color: rgba(99,99,99,1.00);}
h1 img{ width: 100px; height: 100px; display: inline-block; padding: 0 30px 0 0; vertical-align: middle;}
.subtitle{ font-size: 17px; text-align: left; font-family: "Fira Sans Extra Condensed", sans-serif; color: rgba(120,120,120,1.00)}
.subtitle span{ color: rgba(217,60,99,1.00);}
*:focus { outline: none;}
*, *::before, *::after { box-sizing: border-box;}
a{ text-decoration: none;}
a:hover{ color: inherit; opacity: 0.8;}

input { vertical-align: top;font-family: "Fira Sans Extra Condensed", sans-serif;}

input[type="text"] {font-family: "Fira Sans Extra Condensed", sans-serif;  margin: 0; }


input[type=text] {width: 549px; padding: 12px 20px; margin: 0; box-sizing: border-box; font-family: "Fira Sans Extra Condensed", sans-serif; border: 3px solid rgba(54,169,225,1.00); border-radius: 10px 0 0 10px; border-right: none;font-size: 22px; line-height: 0; }

input[type=number] {width: 64px; height: 44px; padding: 10px 0; margin: 0; box-sizing: border-box; font-family: "Fira Sans Extra Condensed", sans-serif; border: 3px solid rgba(54,169,225,1.00); border-radius: 15px; font-size: 22px; line-height: 0; text-align: center;}


.numberWrapper{ display: inline-block; background: rgba(54,169,225,1.00); border-radius: 10px;}


.sel label{ display: block;}
/* Для Chrome и Safari */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

/* Для IE и Edge */
input[type="number"]::-ms-clear {
  display: none;
}

.spin {
    display: inline-block;
}
.spin span {
    display: inline-block;
    width: 20px;
    height: 22px;
    text-align: center;
    padding-top: 2px;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}
.spin span:first-child {
    border-radius: 4px 0 0 4px;
}
.spin input {
    width: 40px;
    height: 20px;
    text-align: center;
    font-weight: bold;
}


.checkbox-ya {

	display: inline-block;    

	height: 50px;    

	line-height: 50px;  

	margin-right: 10px;      

	position: relative;

	vertical-align: middle;

	user-select: none;

}

.checkbox-ya .checkbox-ya-switch {

	display: inline-block;

	box-sizing: border-box;	

	width: 160px;

	height: 50px;	

	margin: 0 auto;

	position: relative;	

	background: linear-gradient(90deg, #FFEB9D 0%, #FFEB9D 50%, #e8e9e9 50%, #e8e9e9 200%);

	background-position: -160px 0;

	background-size: 200% 100%;

	border: 1px solid #bababb;

	border-radius: 3px;

	font-size: 13px;

	color: #000;

	transition: all 150ms ease-in;	

}

.checkbox-ya .checkbox-ya-switch:before {

	content: '';

	display: block;

	box-sizing: border-box;	

	width: 50px;

	height: 50px;	

	position: absolute;

	top: 50%;

	left: -1px;

	text-indent: -100%;

	background-color: rgba(54,169,225,1.00);    

	border: 1px solid rgba(0,0,0,.2);

	border-radius: 3px;

	transform: translateY(-50%);

	transition: all 150ms ease-in;

}

.checkbox-ya .checkbox-ya-feature {

	position: relative;

	display: block;

	height: 50px;

	line-height: 50px;	

	overflow: hidden;

}

.checkbox-ya .checkbox-ya-feature:before, .checkbox-ya .checkbox-ya-feature:after {

	content: '';

	display: block;

	position: absolute;

	top: 50%;

	transform: translateY(-50%);

	transition: all 150ms ease-in;

}

.checkbox-ya .checkbox-ya-feature:before {

	content: attr(data-label-on);

	left: -60%;

}

.checkbox-ya .checkbox-ya-feature:after {

	content: attr(data-label-off);

	right: 8px;

}

.checkbox-ya input[type=checkbox] {

	display: block;	

	width: 0;

	height: 0;	

	position: absolute;

	z-index: -1;

	opacity: 0;

}

.checkbox-ya input[type=checkbox]:checked + .checkbox-ya-switch {

	background-position: 0 0;

	border-color: rgba(153,122,0,.5);

}

.checkbox-ya input[type=checkbox]:checked + .checkbox-ya-switch:before {

	left: calc(100% - 50px);

}

.checkbox-ya input[type=checkbox]:checked + .checkbox-ya-switch .checkbox-ya-feature:before {

	left: 13px;

}

.checkbox-ya input[type=checkbox]:checked + .checkbox-ya-switch .checkbox-ya-feature:after {

	right: -60%;

}

 

/* Hover */

.checkbox-ya input[type=checkbox]:not(:disabled) + .checkbox-ya-switch:hover:before {

	border-color: rgba(0,0,0,.6);

}

.checkbox-ya input[type=checkbox]:not(:disabled) + .checkbox-ya-switch:hover {

	cursor: pointer;

}

 

/* Disabled */

.checkbox-ya input[type=checkbox]:disabled + .checkbox-ya-switch {

	border-color: rgba(0, 0, 0, .1);	

	filter: grayscale(70%);

}

.checkbox-ya input[type=checkbox]:disabled + .checkbox-ya-switch .checkbox-ya-feature {

	color: #999;

}

 

/* Focus */

.checkbox-ya.focused .checkbox-ya-switch:before {

	border-width: 2px;

	border-color: #ffdb4d;

}



button.number-minus{ display: inline-block; cursor: pointer; border-radius: 10px 0 0 10px ;width: 50px;padding: 12px 20px 13px; margin: 0; box-sizing: border-box; font-size: 34px; line-height: 0; background: rgba(54,169,225,1.00); background-size: 45px; color: rgba(255,255,255,1.00); border: none; height: 52px;}

button.number-plus{ display: inline-block; cursor: pointer; border-radius: 0 10px 10px 0;width: 50px;padding: 12px 20px 13px; margin: 0; box-sizing: border-box; font-size: 34px; line-height: 0; background: rgba(54,169,225,1.00); background-size: 45px; color: rgba(255,255,255,1.00); border: none; height: 52px;}

input[type=checkbox] { display: inline-block; cursor: pointer; border-radius: 0 10px 10px 0;width: 50px;padding: 12px 20px 13px; margin: 0; box-sizing: border-box; font-size: 18px; background: rgba(54,169,225,1.00); background-size: 45px; color: rgba(255,255,255,1.00); border: none; height: 52px;}


input[type=submit] { border-radius: 0 10px 10px 0;cursor: pointer; width: 150px; padding: 16px 23px 17px; margin: 0; box-sizing: border-box; font-size: 18px; background: rgba(217,60,99,1.00); color: rgba(255,255,255,1.00); border: 1px solid rgba(217,60,99,1.00); }
.form { width: 700px; margin: 50px auto 0;; text-align: left;}
.form p{font-family: Verdana, Arial, sans-serif; font-size: 14px; text-align: left; line-height: 1; padding: 0 0 5px; margin: 0; color: rgba(118,118,118,0.6);}
.msg{ text-align: center; margin: 30px 10px; color: rgba(97,171,0,1.00);}
.msg span{ font-size: 14px; text-align: center; margin: 0; color: rgba(54,169,225,1.00); display: block;}
.copy-form input[type=text] {width: 350px; padding: 22px 20px; margin: 0; box-sizing: border-box; font-family: "Fira Sans Extra Condensed", sans-serif; border: 3px solid rgba(217,60,99,1.00); border-radius: 10px 0 0 10px; font-size: 24px; text-align: center;}
.copy-form input[type=submit] { border-radius: 0 10px 10px 0; width: 130px; padding: 27px 20px 28px; margin: 0; box-sizing: border-box; font-size: 18px; background: rgba(217,60,99,1.00); color: rgba(255,255,255,1.00); border: 1px solid rgba(217,60,99,1.00); }
button{ display: inline-block; cursor: pointer; border-radius: 0 10px 10px 0;width: 78px;padding: 12px 20px 13px; margin: 0; box-sizing: border-box; font-size: 18px; background: rgba(217,60,99,1.00) url("/images/copy.svg") no-repeat center; background-size: 45px; color: rgba(255,255,255,1.00); border: 1px solid rgba(217,60,99,1.00); height: 78px;}
.result{ display: none; color: rgba(54,169,225,1.00); font-size: 12px;}
.msg-error{ color: rgba(95,95,95,1.00); text-align:  center;}
.msg-error span{ color: rgba(95,95,95,1.00); text-align:  center; font-size: 20px; color:rgba(217,60,99,1.00); font-weight: 500; display: block; padding: 10px;}
.msg-error a{ color: rgba(54,169,225,1.00); text-align:  center;}
.content{ margin: 100px auto 0; max-width: 800px; padding:20px; }
.content h2{   font-family: "Lifehack",Verdana, Arial, sans-serif; font-size: 22px;color: rgba(99,99,99,1.00); margin: 14px 0 0;}
.content p {  font-family: Verdana, Arial, sans-serif;  font-size: 14px;  color: rgba(118,118,118,0.6); padding: 8px 0 0;}
.promo{margin: 100px auto 0; max-width: 800px; padding:20px; text-align: center; font-size: 12px; color: rgba(142,142,142,1.00); }
.promo a{text-decoration: underline; color: rgba(142,142,142,1.00); }
@media screen and (max-width: 720px) {.form { width: 90%; margin: 50px auto 0;; text-align: center; max-width: 600px;}
.form p{text-align: center;} input[type=text] {width: calc(100% - 10px); padding: 12px 20px; margin: 0 0 15px; box-sizing: border-box; font-family: "Fira Sans Extra Condensed", sans-serif; border: 3px solid rgba(54,169,225,1.00); border-radius: 10px;}
input[type=submit] { border-radius: 10px; width: 250px; padding: 12px 20px 13px; margin: 0; box-sizing: border-box; font-size: 18px; background: rgba(217,60,99,1.00); color: rgba(255,255,255,1.00); border: 1px solid rgba(217,60,99,1.00); background-size: 20px; }
}

@media screen and (max-width: 600px){.copy-form input[type="text"] { width: calc(100% - 88px); padding: 22px 20px; }
.form { width: 100%;}
.form p { text-align: center; max-width: 300px; margin: 0 auto;} 
.title { background: url("/images/logo.svg") no-repeat top center; background-size: auto; background-size: 100px; padding: 110px 0 0 0; text-align: center; width: 100%; margin: 0 auto;}
.subtitle{ font-size: 16px; text-align: center; font-family: "Fira Sans Extra Condensed", sans-serif; color: rgba(120,120,120,1.00)}
input[type=submit] { border-radius: 10px; width: 150px; padding: 12px 20px 13px; margin: 0; box-sizing: border-box; font-size: 18px; background: rgba(217,60,99,1.00); color: rgba(255,255,255,1.00); border: 1px solid rgba(217,60,99,1.00); }
h1 { font-size: 40px; padding: 10px 7px; } 
header { padding: 30px 0 20px; }
.form { margin: 30px auto 0; } 
}