body{font:18px/1.4 'Roboto',sans-serif;color:#222}
a{color:#222;cursor:pointer;text-decoration:none}
a:hover{color:#f33}
img,iframe{max-width:100%}
h2{font-family:Oswald, sans-serif;padding:1em 0;text-align:center}
form a[target]{font-size:11px;color:#bbb;display:table;margin:1em auto}
form a[target]:hover{text-decoration:underline}
section{padding:2em 0}

header {background-image:url(/image/background.png);background-repeat:no-repeat;background-size:100% 100%;border-bottom:3px solid #febf00;margin-bottom:8px}

.head1{padding:0.5em 0;font-size:0.9em}
.head1 .d1 a {font-size:1.1em;margin:0.1em 0.3em;padding:0.2em 0.5em}
.head1 .d2{text-align:right}
.head1 .d3{}
@media (max-width: 700px) {
.head1, .head1 .d2{text-align:center}
.head1 .d2{margin:0.5em auto}
}

.head2{padding:1em 0;font-size:0.9em;border-top:3px solid #febf00}
.head2 .d1{font-size:1.2em;font-weight:bold;text-transform:uppercase}
.head2 nav{text-align:right}
.head2 nav a{display:inline-block;position:relative;text-transform:uppercase;font-size:0.95em;padding:0.4em 0.2em}
.head2 nav a::after {display:block;position:absolute;content:"";bottom:0;left:0;width:0;height:2px;background:#333;transition: all .3s linear}
.head2 nav a:hover::after {width:100%}
.head2 img {width:80px}

.head3 {position:relative}
.head3 h1 {z-index:1;margin:0.5em auto;font-family:Oswald,sans-serif;text-transform:uppercase;font-size:calc(2em + 1vw);font-weight:400;line-height:1.2}
.head3 p {z-index:1;margin-bottom:0.5em;font-size:1.4em;line-height:1.2;}

img.animated {display:block;position:absolute;bottom:-1em;right:0;width:55%}
.animated{animation-name:zoomIn;animation-duration:1s;animation-fill-mode:both;}
@keyframes zoomIn{
from{opacity:0;transform:scale3d(.3, .3, .3);}
50%{opacity:1;}
}

#ddmenu {position:fixed;top:-0.2em;right:0.4em;z-index:99999}
#ddmenu li:last-child{text-align:center;font-size:0.8em}
#ddmenu li a:hover, #ddmenu a.current{background:rgba(255,255,255,.15)}

#about {background:linear-gradient(#f5f5f5,#fff)}
#about h2 {text-align:left}
#about .d2 {font-size: 1.2em;font-family: Oswald, sans-serif;text-align:center}
#about .d2 span {font-size:2em;margin: 1em auto 0;padding:0.1em 0;display:block;background: url(/image/0.png) no-repeat center;}
#about .d2 div:hover span {transform: scale(1.1)}


#action{background: linear-gradient(#febf00, tomato);padding:0 0 1em}
#action .container{position: relative}
#action img.animated{width:50%}
#action h2{text-align:left;padding-bottom:0}
#action p {font-family: Oswald, sans-serif;font-size:2em}

.service {background:linear-gradient(#f5f5f5,#fff);text-align:center}
.service .row div{background:linear-gradient(#eee,#fff)}
.service .row div:hover{background:linear-gradient(#ddd,#fff)}
.service img {width:100%;max-width:300px;height:140px;object-fit:cover;border-bottom:8px solid #febf00}
.service .row div:hover img{border-bottom:8px solid tomato}
.service p{text-transform:uppercase;padding-top:0.4em}

#advantage {background-color:#333;background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.9)),url('/image/advantage.jpg');background-repeat: no-repeat;background-size:cover;background-attachment:fixed}
#advantage h2 {color:#fff}
#advantage .row div{color:#fff;text-align:center;font-size:1.05em;padding:1em 0}
#advantage .row div:hover {transform:scale(1.1);transition: 0.5s}
#advantage .row div:hover .fa {transform: rotate3d(180,270,90,-360deg);transition: 0.7s}
#advantage .fa {font-size: 1.4em;color: #febf00;}


#step {background: linear-gradient(#fff,#eee);}
#step .step div span {display: block;position: relative;float: left;width: 40px;height: 40px;background-color: #febf00;border-radius: 50%;text-align: center;font-size: 20px;font-weight: 700;line-height: 39px;}
#step .step div:hover span {transform: rotate(360deg);transition: 0.7s;background:linear-gradient(#febf00, tomato);}
#step .step div span::after {display: block;position: absolute;content: "";top: -13px;left: -13px;width: 63px;height: 63px;border-radius: 50%;border: 1px solid #e4e4e4;}
#step .step div h3 {display: block;position: relative;float: left;width: calc(100% - 40px);font-size: 1.1em;font-weight: 700;	text-transform: uppercase;z-index: 1;margin-top: 23px;margin-bottom: 26px;margin-left: -12px;}
#step .step div h3::after {display: block;position: absolute;content: "";bottom: -6px;left: 0;width: 3em;height: 1px;	background-color: #febf00;}
#step .step div:hover h3::after {transition: 0.5s;width:4em;background:linear-gradient(#febf00, tomato);}
#step .step div p {font-size:0.9em;}


#foto{border-top: 3px solid #febf00;border-bottom: 3px solid #febf00;text-align:center;
background-image:linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0.5)),url('/image/foto/4.jpg');background-repeat: no-repeat;background-size:cover;background-attachment:fixed}
#foto img{width:150px;height:110px;object-fit:cover;border:2px solid #fff;padding:1px;margin:2px}
#foto img:hover{transform:scale(1.2);transition:0.5s}


#review .item{font-size:0.85em}
#review h3 {font-size:1em}
#review h3 small{color:#999}
#review .item p{line-height:1.3}
#review .item .fa{float:left;color:#ddd;margin-right:0.3em}
#review .item:hover .fa{color:#eee}
#review .item:hover .fa::before{content:"\f2be"}

#contact {border-top: 3px solid #febf00;background:linear-gradient(#f5f5f5, #ccc);}
#contact h2{text-align:left}
#contact form {background:#fff;padding:1em;text-align:center;margin:auto;position:sticky;top:0;border-top:4px solid #febf00}
#contact form input, #contact form textarea{margin: 1em auto 0; max-width:260px}

.modal .modal-dialog{margin-top:2vh}
.modal{font-size:0.9em;text-align:center}
.modal .service2{background:#f33;color:#fff}
.modal label{display:block;margin-bottom:1em;text-align:left;color:#666}
.modal input, .modal textarea, .modal select{margin-bottom:0.5em}
.modal .modal-header{padding:0.5em 1em;background:linear-gradient(#fff,#f5f5f5)}

input[name], textarea[name], select[name]{border:1px inset #ccc;border-radius:0.5em;background:linear-gradient(#eee,#fff)}

.social.fa{color:#369;font-size:30px}
.social.fa.fa-skype{color:#39f}
.social.fa.fa-instagram{color:#f03}
.social.fa.fa-whatsapp{color:#093}
.social.fa.fa-phone-square{color:#834995}
.social.fa.fa-vk{color:#369}
.social.fa.fa-facebook-square{color:#336}
.social.fa.fa-odnoklassniki{color:#c30}
.social.fa:hover{transform:scale(1.2)}


#js-cookie-box{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    color: #0c1b26;
    -webkit-transition: all .75s cubic-bezier(.19,1,.22,1);
    transition: all .75s cubic-bezier(.19,1,.22,1);
    z-index: 100;
    border-top: 1px solid rgba(12,27,38,.1);
}
button.close {
    margin: 0 -20px;
    font-size: 20px;
    opacity: 0.8;
}

.win_inner {
    background-color: #fff;
    padding: 10px 30px 10px 10px;
    border: 1px solid #ddd;
    box-shadow: 0 0 30px black;
    font-size: 14px;
}

.win_inner button.close {
    float: right;
    border: none;
    background: none;
}

.win_inner p {
    margin: 0;
}

/***   bootstrap  ***/
.row {
  margin-right: -15px;
  margin-left: -15px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}
.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-1 {
  width: 8.33333333%;
}
@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
}
/***   bootstrap  ***/