@font-face {
    font-family: "Shelly Allegro" ; /* имя шрифта для CSS правил */
    src: url(../fonts/Wolfgang_Amadeus_Mozart.ttf); /* если шрифт не установлен, тогда загружаем его по указанному пути */
}
@font-face {
    font-family: "AgoraSlab" ; /* имя шрифта для CSS правил */
    src: url(../fonts/pfagoraslabpro-medium.ttf); /* если шрифт не установлен, тогда загружаем его по указанному пути */
}
@font-face {
    font-family: "SybillaHeavy" ; /* имя шрифта для CSS правил */
    src: url(../fonts/SybillaHeavy.woff2); /* если шрифт не установлен, тогда загружаем его по указанному пути */
}

body {
    font-family: 'PT Serif', serif;
}

/*#####################################################################################################
__________________________ ВІДСТУПИ CLASS: .padding-top & .paddinf-bottom ______________________ */
.padding-top10 {
    padding-top: 10%;
}
.padding-top5 {
    padding-top: 5%;
}
.padding-top4 {
    padding-top: 4%;
}
.padding-top3 {
    padding-top: 3%;
}
.padding-top2 {
    padding-top: 2%;
}
.padding-top1 {
    padding-top: 1%;
}

.padding-bottom5 {
    padding-bottom: 5%;
}
.padding-bottom4 {
    padding-bottom: 4%;
}
.padding-bottom3 {
    padding-bottom: 3%;
}
.padding-bottom2 {
    padding-bottom: 2%;
}
.padding-bottom1 {
    padding-bottom: 1%;
}


/*
#top-nav .navbar-li-a #vodostok-prop-item-background ul,li{
    list-style:none;
}
*/

a{
    color:inherit;
    text-decoration:none;
    -webkit-transition:all 0.2s ease-out 0s;
    -moz-transition:all 0.2s ease-out 0s;
    -o-transition:all 0.2s ease-out 0s;
    transition:all 0.2s ease-out 0s;
}

/*#####################################################################################################
_________________________ПУЛЬСУЮЧА КНОПКА PULSE BUTTON _____________________________________________________*/
@-webkit-keyframes si-button-pulse {from {box-shadow: 0 0 8px 6px #8faf3b, 0 0 12px 14px #8faf3b;}to {box-shadow: 0 0 18px 6px rgba(255, 48, 26, 0),0 0 4px 71px rgba(255, 48, 26, 0);}}
@-moz-keyframes si-button-pulse {from { box-shadow: 0 0 8px 6px #8faf3b, 0 0 12px 14px #8faf3b;} to {box-shadow: 0 0 18px 6px rgba(255, 48, 26, 0), 0 0 4px 71px rgba(255, 48, 26, 0);}}

@keyframes si-button-pulse {
    from{box-shadow: 0 0 4px 5px #8faf3b, 0 0 6px 10px #8faf3b;}
    to {box-shadow: 0 0 1px 5px rgba(255, 48, 26, 0), 0 0 5px 30px rgba(255, 48, 26, 0);}
}

.pulse-button{
    box-shadow:none;
    -webkit-animation: si-button-pulse 2s 0s ease-out infinite;
    -moz-animation: si-button-pulse 2s 0s ease-out infinite;
    animation: si-button-pulse 2s 0s ease-out infinite;
}
.pulse-button:hover{
    box-shadow:none;
    -webkit-animation: si-button-pulse 0.8s 0s ease-out infinite;
    -moz-animation: si-button-pulse 0.8s 0s ease-out infinite;
    animation: si-button-pulse 0.8s 0s ease-out infinite;
    text-decoration: none;
    color: #fff;
}
.btn-call{
    background-color: #8faf3b;
}

/*#####################################################################################################
__________________________________________ стрілка вниз на відео _________________________________________*/
#aroow-down{
    vertical-align: bottom;
    display: inline-block;
}

/*#####################################################################################################
__________________________________________ КРЕДИТ _________________________________________*/
.credit_banner{
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 9;
    transition:.5s;
}
.credit_banner>a{
    height: 0;
    display: flex;
    position: relative;
    padding-top: 56%;
    width: 25vw;
}
.credit_banner a>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom right;
    position: absolute;
    top: 0;
}
.credit_banner:hover a>img{box-shadow:0 0 8px 5px #8faf3b}



/*#####################################################################################################
__________________________________________ ШАПКА _________________________________________________________*/
#top-nav li a{
    font: 500 18px/19px 'PT Sans';
    display:block;
    padding:18px 0;
    background-color: #fff;
}
#top-nav li a:hover{
    color:#78A91D;
}
#top-nav li a:before,#top-nav li a:after{
    display:block;
    content:'';
    position:absolute;
    bottom:0;
    width:0;
    height:7px;
    background:#78A91D;
    -webkit-transition:all 0.2s ease-out 0s;
    -moz-transition:all 0.2s ease-out 0s;
    -o-transition:all 0.2s ease-out 0s;
    transition:all 0.2s ease-out 0s;
}
/*плавне появлення полоски у різні боки*/
#top-nav li a:hover:before,#top-nav li a:hover:after,#top-nav li a.active:before,#top-nav li a.active:after{width:50%;}
#top-nav li a:before{right:50%;}
#top-nav li a:after{left:50%;}
/*активація полоски при загрузці сторінки*/
#top-nav li a:hover:before,
#top-nav li a.hover:before,
#top-nav li a:hover:after,
#top-nav li a.hover:after,
#top-nav li a.active:before,
#top-nav li a.active:after{width:50%;}
#top-nav li a:before{right:50%;}
#top-nav li a:after{left:50%;}
 /* id кожного пункту меню */
#first_link {display: none}
#second_link {display: none}
#third_link {display: none}
#fourth_link {display: none}
#fifth_link {display: none}
#sixth_link { display: none;}

 #logo-position{
     margin-top: -10px;
 }
#logo{
    padding: 0 20px 0;
}
#logo #text{
    font: 900 19px/21px 'PT Sans', sans-serif;
    color: #000;
    display:block;
    float:left;
    width:80px;
}
#logo #subtext{
    display:block;
    float:left;
    font: 100 14px/19px 'PT Sans', sans-serif;
    color:#777;
    padding:0 0 0;
}

.green{
    color: #87a732;
}
#navbarbig {
    height: 80px;
}
.header {
    position: relative;
}

.header-content {
    position: absolute;
    top: 120px;
    left: 0;
    width: 100%;
    z-index: 10;
}
#headerbrand{
    color: #fff;
}
#headerbrand-font{
    font: 100 15px/18px Shelly Allegro;
}


 /* Центральна надпись */
.title > h1 {
    letter-spacing: 3px;
    font: 700 90px/72px SybillaHeavy;
    color: white;
    z-index: 11;
}
.title > h1 > p {
    color: #87a732;
    text-align: right;
}
#test111{
    font: 900 200px/72px SybillaHeavy;
    color: #87a732;
}
.block {
    width: 180px;
    height: 180px;
    z-index: 11;
}
.block img {
    max-width: 100%;
    max-height: 100%;
    z-index: 11;
}

#text-white{
    color: #f1f1f1;
}


/*#####################################################################################################
 _____________________________ НАВІГАЦІНЕ МЕНЮ _______________________________________________________ */
.container-header-custom-width {
    max-width:1600px;
    width:100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.container-header-custom-width:before,
.container-header-custom-width:after {display: none}
.navbar-white {
    background-color: #FFFFFF;
    box-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.navbar-li-a > li > a {
    font: 100 15px/18px 'PT Sans';
    color: #0f0f0f;
    text-align: center;
}

.header_velux_col{
    display: inline-block;
    height: 40px;
    width: 120px;
}
.header_velux_col a{display:block}
.header_velux_col a img{
    width: auto;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    transition: .5s;
}
.header_velux_col a img:hover{
    opacity:.5;
}

nav .navbar-header .navbar-toggle{display: none !important;}

@media only screen and (max-width:768px) {
    .header .video-block .title-img{display: none;}
    .header-content #headerbrand .button,
    .header-content #headerbrand h3,
    .header-content #headerbrand .col-xs-dissabled{display: none !important;}
    .header-content #headerbrand h1{text-align:center}
}

    /*#####################################################################################################
    __________________________________ БЛОК РОЗРАЇУНОК _______________________________________________________*/
#rozrahunok-background{
    background: url("../image/stroyka_4_02.jpg") fixed bottom no-repeat;
    z-index: -99;
    position: relative;
}
#rozrahunok-background .row:before{
    background: url("../image/green_up_tails.png") top center  no-repeat;
    display:block;
    content:'';
    width:100%;
    height:200px;
    position:absolute;
    left:0;
    z-index:2;
}
#rozrahunok-background .col-md-12:after{
    background: url("../image/green_down_tails.png") bottom no-repeat;
    display:block;
    content:'';
    width:100%;
    height: 100%;
    position:absolute;
    left:0;
    z-index:2;
}
#rozrahunok-item-background{
    background-color: #78A91D;
    font: 1.6em AgoraSlab;
    color: #ffffff;
    opacity: 0.95;
    height: 30em;
    z-index: -1;
}
#rozrahunok-item-background>ul {
    font: 16pt/20pt 'PT Sans';
    z-index: 3;
}
#rozrahunok-item-background li{
    list-style: none;
    list-style-position: outside;
    list-style-image: url("../image/icon_ok.png") ;
    padding-left: 2%;

}



/*#####################################################################################################
_____________________________________________ БЛОК ЗАЦІКАВЛЕНЬ _______________________________________*/
#background-proposition{
    /*картинка у вигляді стрілки вниз, для блоку черепиці*/
    background: url("../image/hata-background.jpg") top center no-repeat  #F5F9EA;
    content:  '             ';
}



/*#####################################################################################################
 ________________________________________________ БЛОК ЧЕРЕПИЦІ______________________________________ */
#button-slider-tovar {
    padding-left: 1.5%; /* Відстань віж кнопками пропозицій*/
    padding-right: 1.5%;
}
.fluide {
    width: 100%; /*Кнопка виду товару на весь блок*/
    cursor: pointer;
}

.block-shadow-hover:hover {
      /* плавність показування тіні*/
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    /*тінь на блок з товаром*/
    box-shadow: 0 1px 15px rgba(0,0,0,.5)
}
#background-triangle {
    /*картинка у вигляді стрілки вниз, для блоку черепиці*/
    background: #F3F3F3 url("../image/plans-bg.png") no-repeat center top;
}
#roof-square-background{
    content: '';
    height: 6em;
    background: #F5F9EA;
}
#roof-triangle-background-up{
    background: url("../image/green_up_tails.png") top center no-repeat ;
}
#roof-padding-minus{
    margin-top: -5%;
}
/*Кнопка*/
a{
    color:#fff;
    text-decoration:none;
    -webkit-transition:all 0.2s ease-out 0s;
    -moz-transition:all 0.2s ease-out 0s;
    -o-transition:all 0.2s ease-out 0s;
    transition:all 0.2s ease-out 0s;
}
a:hover{text-decoration: none;}
a:focus{text-decoration: none;}
a.button{
    text-align: center;
    text-decoration:none;
    position:relative;
    display:inline-block;
    font:600 19px/22px 'PT Serif';
    color:#000;
    border:3px solid #87a732;
    padding:12px 20px;
    margin:10px 0;
    -webkit-transition:background 0.4s ease-out 0s,  border-color 0.2s ease-out 0s;
    -moz-transition:background 0.4s ease-out 0s,  border-color 0.2s ease-out 0s;
    -o-transition:background 0.4s ease-out 0s, border-color 0.2s ease-out 0s;
    transition:background 0.4s ease-out 0s, border-color 0.2s ease-out 0s;
}
a.button:hover{
    text-decoration:none;
    background:#87a732;
    color:#fff;
    box-shadow: 0 1px 5px rgba(0,0,0,.4)
}
a.button:active{
    text-decoration:none;
    top:1px;
    background:#759422;
    border-color:#759422;
    color:#fff;
}

a.button.wide{
    padding:16px 60px;
}

/*карусель в діалоговому вікні дахів */
.carousel-example-generic01{
    height: 1000px;
}


/*#####################################################################################################
_____________________________________________ БЛОК ПРОПОЗИЦІЯ ВОДОСТОКИ ___________________________________________*/
#vodostok-prop-background .container-fluid:before {
    display:block;
    content:'';
    width:100%;
    height:100%;
    background: url("../image/green_up_tails.png") top center no-repeat;
    position:absolute;
    left:0;
    top:-1px;
    z-index:2;
}
#vodostok-prop-background{
    background: url("../image/bryzaaa.jpg") fixed bottom no-repeat;
    z-index: -99;
    position: relative;
}
#vodostok-prop-square-background{
    content: '';
    height: 15em;
    background: #F5F9EA;
}
#vodostok-prop-triangle-background-down{
    background: url("../image/green_down_tails.png") bottom center no-repeat;
    z-index: 10;
    opacity: .99;
    content: '';
}
#vodostok-button-position{
    position: absolute;
    z-index: 99;
}
#vodostok-prop-item-background{
    background-color: #78A91D;
    font: 1.6em AgoraSlab;
    color: #ffffff;
    opacity: 0.95;
    height: 30em;
    z-index: -1;
}
#vodostok-prop-item-background>ul {
    font: 16pt/20pt 'PT Sans';
    z-index: 3;
}
#vodostok-prop-item-background li{
    list-style: none;
    list-style-position: outside;
    list-style-image: url("../image/icon_ok.png") ;
    padding-left: 2%;

}


/*#####################################################################################################
 ________________________________________________ БЛОК ФАСАДИ ______________________________________ */

#gofasad{
    background-color: #F5F9EA;
}
#fasad-galary{
    background-color: #F5F9EA;
}


a{text-decoration: none}
a:hover{text-decoration: none;}
a:active{text-decoration: none;}

.fasad-tab-type-buttom img{
    top: 0;
    padding-top: 20%;
}

.fasad-tab-type-buttom:hover{
    background:#87a732;

    -webkit-transition:all 0.2s ease-out 0s;
    -moz-transition:all 0.2s ease-out 0s;
    -o-transition:all 0.2s ease-out 0s;
    transition:all 0.2s ease-out 0s;
}

.fasad-tab-type-buttom-lupa{
    background: url("../image/icon_lupa.png") center top no-repeat;
    -webkit-transition:all 0.2s ease-out 0s;
    -moz-transition:all 0.2s ease-out 0s;
    -o-transition:all 0.2s ease-out 0s;
    transition:all 0.2s ease-out 0s;
}
.fasad-tab-type-buttom-hide{
    visibility: hidden;
    -webkit-transition:all 0.2s ease-out 0s;
    -moz-transition:all 0.2s ease-out 0s;
    -o-transition:all 0.2s ease-out 0s;
    transition:all 0.2s ease-out 0s;
}

.thumbnail-green{
    background-color: #F5F9EA;
    border: solid 2px #87a732;
}
.thumbnail-none{
    background-color: #F5F9EA;
    border:  2px #87a732;
}
#works{padding:90px 0 0;}
.works-wrapper{margin:50px 125px 0;}
.works{}
.work-item{}
.work-tabs-wrapper{
    text-align:center;
    margin:0 0 40px;
    -webkit-transition:all 0.5s ease-out 0s;
    -moz-transition:all 0.5s ease-out 0s;
    -o-transition:all 0.5s ease-out 0s;
    transition:all 0.5s ease-out 0s;
}
.work-tabs{display:inline-block;}
.work-tab{color:#c3c9aa; font:18px/24px 'PT Sans'; display:block;float:left;padding:15px 0;max-width:270px;width:100%;position:relative;text-align:center;border:2px solid #c3c9aa;margin-left:-2px;}
.work-tab:hover{color:#87a732}
.work-tab.active{background:#87a732;border-color:#87a732;color:#fff;text-decoration: none;}
.work-tab:nth-child(1){z-index:5;}
.work-tab:nth-child(2){z-index:4;}
.work-tab:nth-child(3){z-index:3;}
.work-tab:after{display:block;content:'';position:absolute;width:0;height:0;border:14px solid #87a732;border-color: transparent;left:50%;margin-left:-14px;bottom:-27px;-moz-transform: translateY(-14px);-webkit-transform: translateY(-14px);-o-transform: translateY(-14px);-ms-transform: translateY(-14px);transform: translateY(-14px);-webkit-transition:all 0.2s ease-out 0.2s;-moz-transition:all 0.2s ease-out 0.2s;-o-transition:all 0.2s ease-out 0.2s;transition:all 0.2s ease-out 0.2s;}
.work-tab.active:after{border-color:#87a732 transparent transparent;opacity:1;-moz-transform: translateY(0px);-webkit-transform: translateY(0px);-o-transform: translateY(0px);-ms-transform: translateY(0px);transform: translateY(0px);}




/*#####################################################################################################
_____________________________________ БЛОК ВІДГУКИ ____________________________________________________*/

#feed-background{
    background:  #F5F9EA;
    color: #000000;
    font: 20px/28px 'arial';
}

.feed-title {
    font: 45px/45px AgoraSlab;
}

.feed-control{
    position: absolute;
    top: 25%;
    bottom: 0;
    left: 0;
    width: 10%;
    height: 30%;
    text-align: center;
}
.feed-control.feed-left{
    left: 0;
    background: url("../image/arrow-prev-green.png") center no-repeat ;
}
.feed-control.feed-right{
    right: 0;
    left: auto;
    background: url("../image/arrow-next-green.png") center no-repeat ;
}



/*#####################################################################################################
_____________________________________ БЛОК СЕРТИФІКАТИ ____________________________________________________*/
.certificate_row{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    height: 25vw;
}
    .certificate_row .cerf_item {
        width: 33%;
        height: 100%;
        padding: 1vw;
        max-width: 20vw;
    }
        .certificate_row .cerf_item>img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
        }


/*#####################################################################################################
___________________________________ БЛОК СХЕМА РОБОТИ ___________________________________________*/
#background-schema-work {
    background: url("../image/scheme-bg.png") center no-repeat #ffffff;
    height: 631px;
    width: 100%;
    content: '';
    position: relative;
}
.schema-block-position-one{
    padding-top: 100px;
}
.schema-block-position-two{
    padding-top: 170px;
}
.right-sch{
    float: right;
}
.schema-font-black{
    color: #000000;
    font: 20px/26px 'PT Sans';
}
.schema-font-white{
    color: #ffffff;
    font: 20px/26px 'PT Sans';
}
.schema-six-angle-black{
    background: url("../image/six-angle-black.png") 50% center no-repeat;
    font: 40px/54px AgoraSlab;
    text-align: center;
    color: #000000;
    content: '';
    height: auto;
    width: auto;
}
.schema-six-angle-white{
    background: url("../image/six-angle-white.png") 50% center no-repeat;
    font: 40px/54px AgoraSlab;
    text-align: center;
    color: #ffffff;
    content: '';
}
/*#####################################################################################################
_____________________________________ КОНТАКТИ _______________________________________________________*/

.background-color-contact {
    background: #F4F9EA;
}
.contact-text{
    font: 18px/22px 'PT Sans';
}
.contact-name{
    font: 600 20px/23px 'PT Sans';
}
.contact-info{
    padding-left: 10px;
}
#contact-title{
    font: 60px/60px AgoraSlab;
}
.contact-text h3 a,
.contact-text p>a{color:#333}



/* new  modal */

.si-overlay, .si-overlay-2{display:none;background:rgba(255,255,255,.8);position:absolute;top:0;left:0;right:0;bottom:0;z-index:203;}
.si-overlay-2{z-index:205}
.si-modals-wrapper, .si-modals-wrapper-2{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:203;overflow:auto;-webkit-overflow-scrolling:touch;}
.si-modals-wrapper-2{z-index:205}

.si-modal{display:none;position:relative;background:#fff;padding:20px;width:460px;margin:50px auto;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.7);-moz-transform:scale(0.7);-webkit-transform:scale(0.7);-o-transform:scale(0.7);-ms-transform:scale(0.7);transform:scale(0.7);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:transform 0.5s ease-out 0s;-moz-transition:transform 0.5s ease-out 0s;-o-transition:transform 0.5s ease-out 0s;transition:transform 0.5s ease-out 0s;}
.si-modal.si-visible{-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
.si-modal-inner{border:2px solid #90ad41;padding:30px 10px;}
.modal-form .form-title{font:45px/45px AgoraSlab;}
.modal-time{padding:20px 0;font:22px/26px 'PT Sans'}

.si-close{display:block;width:70px;height:70px;background:#fff;position:absolute;right:0;top:0;}
.si-close:before,.si-close:after{position:absolute;top:20px;right:20px;display:block;content:'';width:26px;height:27px;background:url(../image/icon_close_green.png) top center no-repeat;opacity:0;-webkit-transition:all 0.2s ease-out 0s;-moz-transition:all 0.2s ease-out 0s;-o-transition:all 0.2s ease-out 0s;transition:all 0.2s ease-out 0s;}
.si-close:before{opacity:1;}
.si-close:hover:before,.si-close:active:before{opacity:.3;}
.si-close:after{opacity:0;}
.si-close:hover:after,.si-close:active:after{opacity:1;}
.si-close:before{}
.si-close:after{background: url(../image/icon_close_black.png) top center no-repeat}

/* === Inputs === */
.input, textarea{position:relative;width:313px;border:3px solid #87a732;background:#fff;text-align:center;color:#000;font:18px 'PT Sans';padding:15px 20px;box-sizing:border-box;margin:15px 0;-webkit-transition:all 0.2s ease-out 0s;-moz-transition:all 0.2s ease-out 0s;-o-transition:all 0.2s ease-out 0s;transition:all 0.2s ease-out 0s;}
.input:focus, textarea:focus{box-shadow:0 0 10px #fff;}
.input.si-error, textarea.si-error{color:#cb0707;border-color:#cb0707}
textarea{resize:none;overflow:hidden;}

.submit{-webkit-appearance:none;cursor:pointer;border:0;position:relative;width:313px;border:3px solid #87a732;padding:14px 0;margin:15px 0;font:700 20px/24px 'PT Sans';background:transparent;color:#000;-webkit-transition:all 0.2s ease-out 0s;-moz-transition:all 0.2s ease-out 0s;-o-transition:all 0.2s ease-out 0s;transition:all 0.2s ease-out 0s;}
.submit:hover{background:#87a732;color:#fff;}
.submit:active{top:1px;background:#759422;border-color:#759422;color:#fff}
.submit.disabled{cursor:default;filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");filter:gray;-webkit-filter:grayscale(100%);}

.submit.white{color:#fff;border-color:#fff;}
.submit.white:hover{background:#fff;color:#000;}
.submit.white:active{background:#f4f4f4;border-color:#f4f4f4;color:#000;}

@media only screen and (max-width:768px) {
    .work-tab{max-width:100%}
}