@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Medium.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Light.ttf") format("truetype");
  font-weight: 700;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}

a img {border: 0;}


body{font-family: 'Roboto', sans-serif;color:#000;font-size:14px;font-weight:400;}
.u-full-width{width:100%;box-sizing:border-box;}
.u-max-full-width{max-width:100%;box-sizing:border-box;}
.u-pull-right{float:right;}
.u-pull-left{float:left;}
.wrap:after,.row:after,.u-cf{content:"";display:table;clear:both;}
.wrap{position:relative;width:1200px;margin:0 auto;box-sizing:border-box;height:100%;}
.column, .columns{width:100%;float:left;box-sizing:border-box;}
.column:first-child, .columns:first-child, li:first-child{margin-left:0!important;}
.column:last-child {margin-right:0!important;}
.hcenter{text-align:center;}
.acenter{position:absolute;left:50%;transform:translateX(-50%);}
.abscenter{position:absolute;left:0;right: 0; top:50%;transform:translateY(-70%);}

.swap-vr {    display: flex;    flex-direction: column-reverse;}

header {margin-top:25px;}

.logo { float:left;}

header .phones {
float:right;
margin-right:52px;
line-height: 16px;
position:relative;
background:url('../images/arrow.svg') right center no-repeat;
background-size:10px 5px;
width:190px;
margin-top:8px;
display: block;
}

header .phones a {color: #4A4A4A;
font-size: 14px;
font-weight: 500;
text-decoration:none;
    
}

header .phones img {
margin-right:10px;
vertical-align:middle;
width:16px;
height:16px;
}

header .phones .d-phones {
position:absolute;
top:20px;
left:42px;
display:none;
background: #fff;
padding: 0 15px 0 10px;
z-index: 5;
line-height: 22px;
}

header .phones:hover .d-phones {
display:block;
}

header .telegr {
float:right;
margin-right:52px;
margin-top:8px;
}
header .telegr a,.telegram a {
color: #4A4A4A;
background:url('../images/telegram.svg') left center no-repeat;
background-size:24px 24px;
padding: 5px 0 5px 30px;
text-decoration:none;
font-size: 14px;
font-weight: 500;
line-height: 16px;

}
header .callback {
float:right;

}
header .callback a{ background:url('../images/phone_icn.svg') #F7BF25 left 10px center no-repeat; background-size:16px 16px; color: #000;	font-size: 12px;	font-weight: bold;	line-height: 27px;	padding: 2px 14px 2px 30px;	border-radius: 100px;	display: block;	text-align: center;	text-decoration: none;}
header .callback a:hover {background-color: #f7b30a;}




#main {
    margin-top:70px;
    
}

#main .content {float:left;width:540px;margin-top: 50px;}
#main .c_img {float:right;width:520px;}
#main .c_img img {width:100%;height:auto;}

#main h1 {
	color: #4A4A4A;
	font-size: 40px;
	font-weight: 500;
	line-height: 47px;

}

#main h1::after {
    content: '';
    background: #25B2F7;
    width:140px;
    height:5px;
    display: block;
    margin-top: 30px;
    
}

#main .text {
margin-top: 20px;
	color: #000000;
	font-size: 18px;
	line-height: 28px;
    
}

#main .but {
   
	width: 250px;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	line-height: 19px;
    padding:15px 20px ;
    text-align: center;
background: #25B2F7;
    text-decoration: none;
    border-radius: 25px;
        display: block;
}
#main .but:hover {
background: #1EA3E5;
}

footer {margin-top:120px;color: #4A4A4A;font-size: 12px;line-height: 16px;}
footer .column {width:500px;}
footer .column:last-child {width: 180px;float: right;}
footer .zag {	color: #3D3D3D;font-size: 14px;text-transform: uppercase;margin-bottom: 15px;}
footer a {color:#22A6E6;}
footer .skype {
background:url('../images/skype.svg') left center no-repeat;
padding: 3px 0 3px 25px;
}
footer .facebook {
background:url('../images/facebook-letter-logo.svg') left 15px center no-repeat;
padding: 5px 20px 5px 30px;
text-decoration:none;
border: 1px solid #22A6E6;
border-radius: 100px;
display:inline-block;
}

footer .copy {padding:10px 0 20px;}

#callbackForm span{	color: #000000;		font-size: 14px;	font-weight: 500;	line-height: 22px;}
.callback-window-answer i{	font-size: 60px;	color: #62c4fa;}
.callback-window-answer{	padding: 40px;	margin-top: 35px;}
.callback-window-answer h3{	padding-top: 15px;	color: #62c4fa;	font-size: 17px;}
/*#callback-window-answer{	top: 150px;	width: 450px;	height: 300px;	background: #fff;	position: relative;	display: inline-block;	z-index: 9999;	border: 5px solid #62c4fa;}*/


#callbackForm h2,#callback-window-answer .call-answer{color: #25B2F7;	font-size: 14px;	font-weight: 500;	line-height: 20px;text-align:left;max-width:265px;margin-top:67px;margin-bottom:20px;}
#callback-window-answer .call-answer{color: #000;	font-size: 16px;	font-weight: 500;	line-height: 24px;}
#popup-close-btn{	background:url('../images/close.svg') no-repeat;	outline: none;	border: none;	position: absolute;	right: 28px;	top: 36px;	width: 24px;height: 24px;}
.div-callback-window{	text-align: center;	width: auto;}
#callback-window #callback-phone-input{	width: 288px;	border-radius: 3px;	border: 1px solid #e1e1e1;	padding: 5px 10px 7px 10px;	font-size: 14px;	color: #000;	margin-left: 5px;	margin-right: 5px;	line-height: 16px;	height: 40px;box-sizing: border-box;font-weight:500;font-family: inherit;}

#callback-window #callback-phone-input::-webkit-input-placeholder {  color: #818181; font-weight:400;}
#callback-window #callback-phone-input::-moz-placeholder { color: #818181;   opacity: 1;    font-weight:400;}
#callback-window #callback-phone-input:-ms-input-placeholder {  color: #818181;   font-weight:400;}
#callback-window #callback-phone-input:-moz-placeholder {  color: #818181;  font-weight:400;}

#callback-window #sendCallback,#callback-window-answer #closeCallback{width:160px;height:40px;    color: #FFFFFF;    font-size: 14px;    font-weight: bold;    line-height: 27px;    padding: 2px 16px;    border-radius: 100px;    background-color: #25B2F7;    text-align: center;    text-decoration: none;	transition: 0.5s all ease;	display: block;border: none;margin-top:70px;font-family: inherit;cursor: pointer;    -webkit-appearance: none; 
   -moz-appearance: none;   appearance: none;}
#callback-window-answer #closeCallback {margin-top:40px;}
#callback-window #sendCallback:hover,#callback-window-answer #closeCallback:hover{	background-color: #1EA3E5;}
#callback-window,#callback-window-answer{	top:50%;transform:translateY(-50%);	width: 640px;	height: 400px;	background: #fff;	position: relative;	display: inline-block;	z-index: 999;	border: 8px solid #25B2F7;	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.24);}
.callback-window-content{	padding: 28px;}
.div-callback-window{	background: rgba(33, 33, 33, 0.8);	display: inline-block;	position: fixed;	top: 0;	left: 0;	right: 0;	bottom: 0;	z-index: 10000;}

.call-title {color: #4A4A4A;font-size: 30px;	font-weight: 500;	line-height: 35px;	text-align:left;}
#callback-window .call-bg {position:absolute;top:100px;right:36px;	background:url('../images/operator.svg') no-repeat;width:140px;height:184px;}
#callback-window-answer .call-bg {position:absolute;top:130px;right:36px;	background:url('../images/phone-call.svg') no-repeat;width:147px;height:147px;}

#callbackForm {text-align:left;}


@media only screen and (max-width:1279px){
    .wrap {    width: 940px;} 
    #main .content {    width: 460px;margin: 0 0 60px;}
    
    #main .c_img {    width: 440px;}
    footer .column {    width: 380px;}
    }

@media only screen and (max-width:959px){
     .wrap {    width: 720px;} 
    header .telegr {display:none;}
    #main .c_img {    width: 260px;}
    footer .column {    width: 220px;    margin: 0 25px;}
}

@media only screen and (max-width:800px){
     .wrap {    width: 620px;} 
    #main .content {    width: 360px;}
    #main h1 {    font-size: 30px;    line-height: 37px;}
    footer .column {    width: 190px;    margin: 0 15px;}
}

@media only screen and (max-width:699px){
    .wrap {    width: 460px;} 
    header .phones {    margin-right: 0;    margin-top: 20px;}
    #main .content {    width: 100%;margin-bottom: 10px;}
    #main .c_img {    width: 260px;    float: none;    margin: 20px auto 30px;    clear: both;}
    #main .but {margin:0 auto;}
    
    footer .column {    width: 230px;    margin: 0;}
    .column:last-child {    float: left !important;}
    
   #callback-window, #callback-window-answer {        width: 380px;    height: 260px;}
#callback-window .call-bg, #callback-window-answer .call-bg {display:none;}

#callbackForm h2, #callback-window-answer .call-answer {    max-width: 100%;    margin-top: 20px;    margin-bottom: 20px;}
#callback-window #sendCallback, #callback-window-answer #closeCallback {margin-top:20px;}
#callback-window #callback-phone-input {    width: 250px;}
.call-title {    font-size: 24px;}


    }

@media only screen and (max-width:479px){
    .wrap {    width: 360px;} 
    footer .column {    width: 100%;    margin: 0 0 20px 0;}
    #callback-window, #callback-window-answer {     width: 280px;    height: 270px;}
#callback-window .call-bg, #callback-window-answer .call-bg {display:none;}

#callbackForm h2, #callback-window-answer .call-answer {    max-width: 100%;    margin-top: 20px;    margin-bottom: 20px;}
#callback-window #sendCallback, #callback-window-answer #closeCallback {margin-top:20px;}
#callback-window #callback-phone-input {    width: 200px;}
.call-title {    font-size: 20px;}

.callback-window-content {    padding: 10px;}
#popup-close-btn {    right: 10px;    top: 10px;}

}

@media only screen and (max-width:399px){
    .wrap {    width: 280px;} 
    header .callback {    margin-top: 20px;}
    #main h1 {    font-size: 24px;    line-height: 32px;}
}