body{margin:0;padding:0}
p{font-family:'Montserrat',sans-serif;font-size:1rem;line-height:30px}
h1,h2{font-family:'Montserrat',sans-serif;font-weight:600;font-size:48px}
.header{position:fixed;z-index:10;width:100%;top:0;right:0;left:0;padding-top:5px;padding-bottom:5px;border-bottom:1px solid #ddd;transition:background .3s,border .3s;background-color:#fff;animation: showTop 1s;}
@keyframes showTop {

    from {top:-10%;}

    to {top:0;}

}

.logo{width:200px;float:left}
.logo img{width:165px}

#menu {}
.active_menu {
    color: #dc0038;
    font-weight: 600;
}

.menu-left-block{font-family:'Montserrat',sans-serif;display:block;right:0;position:relative;padding: 20px 20px 0 20px;}
.menu-left-block li{list-style:none;padding:10px 0}
.menu-left-block li a:hover{color:#ce1632;font-weight:400}
.menu-left-block a{color:#000000;text-decoration:none}
.menu-left-block img{width:13px;height:13px;display:block;float:left}
.menu-left-block i{display:block;position:relative;float:left;padding-right:8px;width:20px;height:20px;margin-top:10px}
.dropdown-content-left{
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 260px;
    padding: 10px 0;
    box-shadow: 0 8px 24px 0 #bfbfbf;
    z-index: 1;
    border-radius: 10px;
    border-bottom: 2px solid #fff;
    margin: -30px 0 0 0;
    left: 145px;
}
.dropdown-content-left i {
    padding: 0;
    margin: 3px 0;
}
.dropdown-content-left a{color:#515151;padding:6px 20px;text-decoration:none;display:block;font-size:14px}
.dropdown-content-left a:hover{background-color:#e5e5e5}
.navdrop:hover .dropdown-content-left{display:block}
.navdrop:hover .dropbtn{background-color:#3e8e41}
.dropdown-content-left span{background:#45b6ff;font-weight:600;font-size:12px;text-align:center;display:block;padding:7px 18px;margin:-10px 0 0;color:#fff;border-top-left-radius:10px;border-top-right-radius:10px}
.menu{font-family:'Montserrat',sans-serif;display:flex;float:left;right:0;top: 6px;position:relative;font-size:14px}
.menu li{list-style:none;padding:0 30px}
.menu ul a{color:#000;text-decoration:none}
.menu ul a:hover {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23453886' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
    background-position: bottom;
    background-repeat: repeat-x;
    background-size: 20%;
    border-bottom: 0;
    padding-bottom: .3em;
    text-decoration: none;
}

.dropdown-content{display:none;position:absolute;background-color:#0d1c33;min-width:160px;box-shadow:0 8px 24px 0 #000;z-index:1;border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-bottom:2px solid #fff}
.dropdown-content a{color:#000;padding:12px 30px;text-decoration:none;display:block}
.dropdown-content a:hover{background-color:#0f2548}
.navdrop:hover .dropdown-content{display:block}
.navdrop:hover .dropbtn{background-color:#3e8e41}

.social {
    display: grid;
    padding: 0;
    position: absolute;
    left: 39.66%;
    bottom: 12%;
}
.social i {

}
.social a {
    border: 1px solid #ddd;
    padding: 10px 13px;
    border-radius: 100px;
    margin: 4px;
    color: #9f9f9f;
    text-align: center;
}

.social a:hover {
    background: #0d1c33;
    color: #ffffff;
    box-shadow: 0 0 25px #999999;
}

.copyright {
    font-family:'Montserrat',sans-serif;
    font-size: 12px;
    display: block;
    position: absolute;
    bottom: 76px;
    left: 44px;
}

.phone{font-family:'Montserrat',sans-serif;color:#000;position:fixed;right:0;top:16px;font-size:1rem;font-weight:700}
.phone i{margin-right:16px}
.phone a{
    color: #000;
    text-decoration: none;
    padding: 20px 40px;
    border-left: 1px solid #ddd;
}
.phone a:hover{
    color: #fff;
    background: #45b6ff;
    padding: 22px 40px;
}
.header-block{display:flex;padding-left:20px;padding-right:20px;margin-left:auto;margin-right:auto}
.content-block{
    display: block;
    position: relative;
    margin-top: 4.66%;
    width: auto;
    padding-left: 50px;
    padding-right: 0;
    margin-left: 10%;
    margin-right: auto;
}

.content-block h1 {
    font-family: 'Yeseva One', cursive;
    font-size: 3em;
    color: #41464b;
    margin-bottom: 40px;
}

.menu-left{position:fixed;top:50px;left:0;border-right:1px solid #ddd;width:180px;height:100%;background:#fff;box-shadow:0 0 15px #d3d3d3;z-index:9;font-size:14px;animation: showLeft 1s;}
@keyframes showLeft {

    from {left:-10%;}

    to {left:0;}

}

.arrow {
    display: block;
    float: right;
    position: relative;
    margin-top: -13px;
    margin-right: -20px;
    color: #ddd;
}
.arrow:hover {
    color: #ce1632;
}

.backboard {
    background-image: url(img/backboard.png);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: top;
    background-size: contain;
    display: block;
    padding: 5px 0;
}

.backboard h1 {
    font-family: 'Montserrat',sans-serif;
    font-weight: 300;
    font-size: 36px;
    color: #626161;
}

.bukovel-img-logo {
    margin-top: -36px;
}

.bukovel-img-logo img {
    width: 500px;
    margin-top: 30px;
    margin-bottom: 0;
}

.motiv-one {
    clear: both;
    height: auto;
    overflow: hidden;
    display: block;
}

.motiv-one img {
    display: block;
    float: left;
    margin-right: 30px;
}

.motiv-one h2 {
    font-size: 30px;
    color: #626161;
}

.motiv-one p {

}

.mot-block {
    margin: 114px 0;
}

.serv {
    width: 93.33%;
    margin: 0px 0px 100px 0px;
}
.serv-img-right {
    float: left;
    display: flex;
    width: 40%;
    height: 350px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 8px 7px 35px #0000003d;
    margin-right: 30px;
}

.serv-img-left {
    float: right;
    display: flex;
    width: 40%;
    height: 350px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 8px 7px 35px #0000003d;
    margin-left: 30px;
}

.serv img {
    width: 100%;
}

.serv-block-od {

}

.serv-block-od a {
    background: #0d6efd;
    color: #fff;
    padding: 10px 30px;
    display: inline-flex;
    border-radius: 100px;
    text-decoration: none;
    margin-top: 10px;
    font-size: 16px;
    text-transform: inherit;
}

.serv-block-od a:hover {
    background: #ce1632;
    color: #fff;
}

.serv-block-od i {
    display: block;
    padding: 0px 10px 0px 0px;
    font-size: 25px;
    margin-left: -15px;
}

.serv-title {
    font-size: 2em;
    color: #ce1632;
    padding-bottom: 0;
    margin: 20px 0px 0 0;
    font-family: 'Yeseva One', cursive;
    border-bottom: 2px solid #ce1632;
}

.serv-txt {
    font-size: 1.2em;
    padding: 10px;
}

/** Якоря - начало **/
#Firewall {padding-top: 50px;position: relative;}
#Flag {padding-top: 50px;position: relative;}
#Citylights {padding-top: 50px;position: relative;}
#Led {padding-top: 50px;position: relative;}
#Cashier {padding-top: 50px;position: relative;}
#Billboards {padding-top: 50px;position: relative;}
#Bridges {padding-top: 50px;position: relative;}
#Lifts {padding-top: 50px;position: relative;}

/** Якоря - конец **/

.icon-serv-block {
    list-style: none;
    margin-bottom: 0px;
    position: fixed;
    right: 0;
    z-index: 999;
    box-shadow: 0 0 7px #0006;
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
}

.icon-serv {

}

.icon-serv i {
    font-size: 20px;
    text-align: center;
    padding-top: 0px;
    display: grid;
}

.icon-serv-block a {
    display: grid;
    text-align: center;
    font-size: 14px;
    width: 50px;
    height: 40px;
    padding: 10px;
    text-decoration: none;
    color: rgba(0,0,0,0.54);
    border: 1px solid #ddd;
}

.icon-serv-block a:hover {
    background: #0d1c33;
    color: #fff;
    transition: 0.8s all;
}

[data-tooltip] {
    position: relative; /* Относительное позиционирование */
}
[data-tooltip]::after {
    content: attr(data-tooltip); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    width: 300px; /* Ширина подсказки */
    right: 50px;
    top: 0; /* Положение подсказки */
    background: #0d1c33; /* Синий цвет фона */
    color: #fff; /* Цвет текста */
    padding: 0.5em; /* Поля вокруг текста */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Параметры тени */
    pointer-events: none; /* Подсказка */
    opacity: 0; /* Подсказка невидима */
    transition: 1s; /* Время появления подсказки */
}
[data-tooltip]:hover::after {
    opacity: 1; /* Показываем подсказку */
    top: 2em; /* Положение подсказки */
}

.feedback-top {
    position: absolute;
    right: 15%;
    top: 23.33%;
}

.feedback-top a {

}

.feedback-top a:hover {
    background: #ce1632;
    color: #fff;
    transition: 0.5s all;

}
.feedback-top i {
    margin-right: 10px;
}


* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.open-popup {
    display: inline-block;
    padding: 3px 15px;
    background: #2982ff;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    border-radius: 100px;
}

.popup__bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: 0.5s all;
}

.popup__bg.active {
    opacity: 1;
    pointer-events: all;
    transition: 0.5s all;
}

.popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: #fff;
    width: 400px;
    padding: 25px;
    transition: 0.5s all;
    border-radius: 10px;
    box-shadow: 0 0 60px #00000057;
}

.popup.active {
    transform: translate(-50%, -50%) scale(1);
    transition: 0.5s all;
}

.close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.popup svg {
    fill:#ddd;
}

.popup label {
    width: 100%;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column-reverse;
}

.popup .label__text {
    font-size: 14px;
    color: #383838;
    margin-bottom: 5px;
    font-family: 'Montserrat',sans-serif;
}

.popup input {
    height: 30px;
    font-size: 16px;
    line-height: 34px;
    padding-bottom: 10px;
    padding-left: 10px;
    border: none;
    outline: none;
    border-bottom: 1px solid #cfd0d3;
}

.popup placeholder {

}

.popup input:focus {
    border-bottom: 1px solid #2982ff;
}

.popup input:focus + .label__text {
    color: #2982ff;
}

.popup textarea {
    resize: none;
    width: 100%;
    height: 150px;
    border: none;
    outline: none;
    border-bottom: 1px solid #cfd0d3;
    font-size: 16px;
    padding: 5px 0px 0px 10px;
}

.popup textarea:focus {
    border-bottom: 1px solid #2982ff;
}

.popup textarea:focus + .label__text {
    color: #2982ff;
}

.popup button {
    width: 100%;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    border: 2px solid #2982ff;
    background: #2982ff;
    cursor: pointer;
    transition: 0.5s all;
    border-radius: 6px;
}

.popup button:hover {
    background: #fff;
    color:#2982ff;
    transition: 0.5s all;
}


.back-to-top {
    background: #3E64FF;
    border-radius: 50%;
    position: fixed;
    bottom: -50px;
    padding: 10px 12px;
    right: 50px;
    cursor: pointer;
    transition: 0.3s all;
}

.back-to-top svg {
    fill: #ffffff;
}

.back-to-top i {
    color: #fff;
    padding: 0;
    font-size: 20px;
    transform: rotate(-69deg);
}

.back-to-top.active {
    bottom: 50px;
    transition: 0.3s all;
}

/**Footer**/

.footer{background:#fff;position:absolute;margin:0;padding:40px 0;font-size:1rem;font-family:'Montserrat',sans-serif;bottom: 0;}
.footer a{color:hsla(0,0%,100%,.6);text-decoration:none}
.footer a:hover{color:#dc0038}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{line-height:30px;padding:0;margin:0;font-size:12px}
.footer .title-menu{color:#fff;font-size:24px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid hsla(0,0%,100%,.2);padding-right:20px;line-height:1.17}
.footer .modul-block{margin-left:50px;margin-right:50px}
.footer-block{
    display: block;
    padding-left: 50px;
    padding-right: 50px;
    margin-left: auto;
    margin-right: auto;
    }

/**Footer**/