﻿@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&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;}
input:focus, select:focus, option:focus, textarea:focus{outline: none;}
/*Обнуление стилей*/

::-webkit-input-placeholder{color:#2e2e2e;}
::-moz-placeholder{color:#2e2e2e;}/* Firefox 19+ */
:-moz-placeholder{color:#2e2e2e;}/* Firefox 18- */
:-ms-input-placeholder{color:#2e2e2e;}

img{border: none; max-width: 980px;}
a, input[type="submit"] {cursor: pointer;-webkit-transition: 0.2s linear;-moz-transition: 0.2s linear;-o-transition: 0.2s linear;transition: 0.2s linear;}
input {-webkit-transition: 0.2s linear;-moz-transition: 0.2s linear;-o-transition: 0.2s linear;transition: 0.2s linear;}
body{font: normal 18px "Roboto Condensed";}
.clear{clear: both;}

.main-head{background: url(../images/bg-head-1.jpg) top no-repeat;}

.top-menu{background: #323a45;position: fixed;width: 100%;z-index: 1000; opacity: 1; -webkit-transition: 0.5s ease-out;-moz-transition: 0.5s ease-out;-o-transition: 0.5s ease-out;transition: 0.5s ease-out;}
.top-menu:hover{opacity: 1;}
.top-menu ul{text-align: center; max-width: 1000px; margin: 0 auto;}
.top-menu ul li{display: inline-block;}
.top-menu ul li a{padding: 10px 14px;display: block;font-size: 16px;color: #fff;text-decoration: none;}
.top-menu ul li a:hover, .top-menu ul li.active a{color: #fa9d22;}
.slicknav_menu{display: none;}

.head{padding-top: 40px; min-height: 660px;}
.top-head{max-width: 1050px;margin: 0 auto;padding: 30px 0 18px;overflow: hidden;}
.top-head .logo{float: left;background: url(../images/logo.png) center left no-repeat;font-family: "Roboto Condensed";font-weight: bold;color: #2e2e2e;text-decoration: none;font-size: 24px;margin-right: 60px;padding: 4px 0 5px 60px;}
.top-head .adress{float: left;margin-right: 50px;color: #2e2e2e;font-size: 18px;line-height: 25px;padding: 8px 0;}
.top-head .adress a{display: block; color: #2f7bb4; font-size: 16px;}
.top-head .adress a:hover{text-decoration: none;}
.top-head .tel{float: left; margin-top: 18px;}
.top-head .tel a{display: block; color: #2e2e2e; font-size: 25px; font-weight: bold; text-decoration: none; line-height: 30px;}
.top-head .tel a span{font-size: 16px; font-weight: normal;}
.top-head .btn{float: right;margin: 15px 0;}
.top-head .btn a{font-size: 16px; padding: 8px 15px; background: #9ccc49;}
.top-head .btn a:hover{ background: #fa921f; background: -moz-linear-gradient(top,  #fa921f 0%, #f96215 100%); background: -webkit-linear-gradient(top,  #fa921f 0%,#f96215 100%); background: linear-gradient(to bottom,  #fa921f 0%,#f96215 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa921f', endColorstr='#f96215',GradientType=0 );}

.btn{position: relative;z-index: 100;}
.btn a, .btn input{color: #fff; text-decoration: none; display: block; z-index: 100; border-radius: 6px;position: relative;-webkit-transition: none;-moz-transition: none;-o-transition: none;transition: none;}
.btn .shadow{background: url(../images/shadow.png) right bottom no-repeat;width: 100%;height: 36px;display: block;position: absolute;top: 10px;right: 0px;z-index: 0;}

.head .offer{max-width: 980px; margin: 0 auto; text-align: center; color: #2e2e2e; text-transform: uppercase; font-weight: bold;}
.head .offer h1{font-size: 37px;}
.head .offer span{display: block; font-size: 30px;}

.head .main-form{max-width: 980px; margin: 0 auto; overflow: hidden;}
.head .form{width: 314px;float: right;margin: 60px 0 0;text-align: center;}
.head .form .dark{background: #4c535b; background: -moz-linear-gradient(top,  #4c535b 0%, #39414b 100%); background: -webkit-linear-gradient(top,  #4c535b 0%,#39414b 100%); background: linear-gradient(to bottom,  #4c535b 0%,#39414b 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c535b', endColorstr='#39414b',GradientType=0 );}
.head .form::before{content: " "; background: url(../images/form-top.png) center bottom no-repeat; width: 100%; display: block; height: 30px;}
.head .form::after{content: " "; background: url(../images/form-bottom.png) center top no-repeat; width: 100%; display: block; height: 30px;}
.head .form .title{color: #fff; font-size: 27px; text-transform: uppercase; font-weight: bold; padding: 20px 0 10px; line-height: 30px;}
.head .form .title span{font-size: 18px; display: block; text-transform: none;}

.head .form form{padding-bottom: 20px;}
.head .form form input{width: 240px; border: none; font-size: 16px; color: #2e2e2e; margin: 7px 0; padding: 8px 15px; border-radius: 6px;}
.head .form form .btn{width: 270px;margin: 0 auto;}
.head .form form .btn input[type="submit"]{width: 100%; background: #fa921f; background: -moz-linear-gradient(top, #fa921f 0%, #f96215 100%); background: -webkit-linear-gradient(top, #fa921f 0%,#f96215 100%); background: linear-gradient(to bottom, #fa921f 0%,#f96215 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa921f', endColorstr='#f96215',GradientType=0 ); color: #fff; text-transform: uppercase; font-weight: 600; font-size: 14px; padding: 12px 0px;}
.head .form form .btn input[type="submit"]:hover{background: #ff9c00;}
.head .form form .btn .shadow{top: 20px;}

.row{margin: 0px auto;max-width: 980px;padding: 40px 0;overflow: hidden;}
.row .title{font-size: 37px; text-align: center;text-transform: uppercase; font-weight: 700; padding: 0px 0 40px;}

.main-kompany{background: #efefef;}
.kompany{}
.kompany .title{color: #2e2e2e;}
.kompany ul{overflow: hidden;}
.kompany ul li{float: left;font-size: 20px;font-weight: bold;text-transform: uppercase;-webkit-transition: 0.2s linear;-moz-transition: 0.2s linear;-o-transition: 0.2s linear;transition: 0.2s linear;cursor: default;}
.kompany ul li div{text-align: left; display: inline-block; vertical-align: middle; padding: 61px 0;}
.kompany ul li div .min{text-transform: none; font-weight: normal; display: block; font-size: 16px;}
.kompany ul li .number{font-size: 90px;vertical-align: middle;font-weight: bold;padding-right: 6px;}
.kompany ul li:nth-child(1){color: #2e2e2e;background: #fff;width: 230px;text-align: center;}
.kompany ul li:nth-child(2){background: url(../images/kompany-2.jpg) center no-repeat;width: 500px;color: #fff;padding-left: 18px;}
.kompany ul li:nth-child(3){background: #9ccc49;color: #fff;width: 212px;padding: 0 0 0 20px;}
.kompany ul li:nth-child(4){background: url(../images/kompany-4.jpg) center no-repeat; width: 470px; color: #fff; padding-left: 19px;}
.kompany ul li:nth-child(5){color: #2e2e2e;padding-left: 29px;background: #fff;width: 462px;}
.kompany ul li:nth-child(6){background: url(../images/kompany-6.jpg) center no-repeat; width: 310px; color: #fff; padding-left: 17px;}
.kompany ul li:nth-child(6) div{width: 200px; padding: 51px 0;}
.kompany ul li:nth-child(7){background: #323a45; width: 405px; color: #fff; padding-left: 17px;}
.kompany ul li:nth-child(7) div{width: 140px; padding: 52px 0 51px;}
.kompany ul li:nth-child(8){background: url(../images/kompany-8.jpg) center no-repeat; width: 210px; color: #fff; padding-left: 21px;}
.kompany ul li:hover{opacity: 0.8;}

.main-svay{background: #323a45;position: relative;}
.svay{min-height: 410px; position: relative;}
.svay .title{color: #fff;}
.svay .left{float: left;width: 335px;margin-top: 45px;}
.svay .left p{font-size: 18px; color: #fff; margin-bottom: 25px;}
.svay .left .btn{display: inline-block;}
.svay .left .btn a{background: #fa9f22;background: -moz-linear-gradient(top,  #fa9f22 0%, #f96b17 100%);background: -webkit-linear-gradient(top,  #fa9f22 0%,#f96b17 100%);background: linear-gradient(to bottom,  #fa9f22 0%,#f96b17 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9f22', endColorstr='#f96b17',GradientType=0 );color: #fff;text-decoration: none;font-size: 16px;padding: 8px 15px;display: block;z-index: 100;border-radius: 6px;position: relative;-webkit-transition: none;-moz-transition: none;-o-transition: none;transition: none;}
.svay .left .btn a:hover{background: #ff9c00;}


.svay .right{background: url(../images/svai.png) left top no-repeat;position: absolute;width: 840px;height: 430px; top: 60px;right: 0px; right: -110px;}
.svay .right ul{position: relative; margin: 50px 100px; font-size: 16px; color: #fff;}
.svay .right ul li{position: absolute;}
.svay .right ul li:nth-child(1){top: 57px; left: 50px; width: 105px;}
.svay .right ul li:nth-child(2){top: 33px; left: 258px; width: 105px;}
.svay .right ul li:nth-child(3){top: 5px; left: 450px; width: 155px;}
.svay .right ul li:nth-child(4){top: 302px; left: 178px; width: 170px;}
.svay .right ul li:nth-child(5){top: 255px; left: 440px; width: 160px;}

.block-bottom::after{content: " ";height: 36px;width: 980px;display: block;margin: 0 auto;}
.main-svay .block-bottom{background-color: #efefef;}
.main-svay .block-bottom::after{background: url(../images/block-bottom-black.png) 90% -7px no-repeat;}

.main-use{background: #efefef;}
.use{}
.use .title{color: #2e2e2e;}
.use ul{text-align: center;}
.use ul li{display: inline-block;font-size: 18px;color: #2e2e2e;margin: 0 20px;}
.use ul li:nth-child(1), .use ul li:nth-child(2), .use ul li:nth-child(3){width: 220px;padding: 160px 30px 0;margin: 0 20px 15px;}
.use ul li:nth-child(4), .use ul li:nth-child(5){width: 150px;padding: 160px 70px 0;margin: 0 20px 0px;}
.use ul li:nth-child(1){background: url(../images/primenenie-penoblok.png) center top no-repeat;}
.use ul li:nth-child(2){background: url(../images/primenenie-promishlennost.png) center top no-repeat;}
.use ul li:nth-child(3){background: url(../images/primenenie-reklama.png) center top no-repeat;}
.use ul li:nth-child(4){background: url(../images/primenenie-derevo.png) center top no-repeat;}
.use ul li:nth-child(5){background: url(../images/primenenie-kirpich.png) center top no-repeat;}
.use ul li:nth-child(6){width: 220px;padding: 195px 30px 0;background: url(../images/primenenie-voda.png) center top no-repeat; margin-top: -30px;}

.main-progress{background: #7aa234;}
.progress{}
.progress .title{color: #fff;}
.progress ul{background: url(../images/progress-bg.png) center 0 no-repeat; height: 410px; position: relative;}
.progress ul li{color: #e5fabd;position: absolute;}
.progress ul li span{color: #fff; font-size: 20px; text-transform: uppercase; display: block;}
.progress ul li:nth-child(1), .progress ul li:nth-child(2), .progress ul li:nth-child(3){text-align: right; padding-right: 60px;}
.progress ul li:nth-child(4), .progress ul li:nth-child(5), .progress ul li:nth-child(6){text-align: left; padding-left: 60px;}
.progress ul li:nth-child(1){width: 200px;background: url(../images/progress-1.png) center right no-repeat;top: 10px;left: 60px;}
.progress ul li:nth-child(2){width: 185px;background: url(../images/progress-2.png) center right no-repeat;top: 135px;left: 15px;}
.progress ul li:nth-child(3){width: 150px;background: url(../images/progress-3.png) center right no-repeat;top: 323px;left: 103px;}
.progress ul li:nth-child(4){width: 230px;background: url(../images/progress-4.png) center left no-repeat;top: 10px;right: 30px;}
.progress ul li:nth-child(5){width: 175px;background: url(../images/progress-5.png) center left no-repeat;top: 140px;right: 25px;}
.progress ul li:nth-child(6){width: 175px;background: url(../images/progress-6.png) center left no-repeat;top: 320px;right: 80px;}
.main-progress .block-bottom{background-color: #ffffff;}
.main-progress .block-bottom::after{background: url(../images/block-bottom-green.png) 90% -7px no-repeat;}

.main-fundament{background: #fff;}
.fundament{}
.fundament .title{color: #2e2e2e;}
.fundament .vids{text-align: center;}
.fundament .vid{display: inline-block;margin: 0px 30px 40px;}
.fundament .vid span.name{display: block;font-size: 20px;font-weight: bold;color: #2e2e2e;text-transform: uppercase;paddi;padding-bottom: 10px;}
.fundament .vid img{width: 260px; height: 165px;}
.fundament .vid .btn{margin: 5px 60px;}
.fundament .vid .btn a{font-size: 20px;padding: 5px 0;background: #9ccc49;}
.fundament .vid .btn a:hover{background: #fa9f22; background: -moz-linear-gradient(top, #fa9f22 0%, #f96b17 100%); background: -webkit-linear-gradient(top, #fa9f22 0%,#f96b17 100%); background: linear-gradient(to bottom, #fa9f22 0%,#f96b17 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9f22', endColorstr='#f96b17',GradientType=0 );}

.main-price{background: #efefef;}
.price{}
.price .title{color: #2e2e2e;}
.price .title.h2{color: #2e2e2e; font-size: 26px; padding: 0px 0 20px;}

.tabel-price{margin-bottom: 30px;}
.price .price-desk{display: block; padding: 12px 30px; background: #efefef; color: #525252; font-size: 18px; border-radius: 6px 6px 0 0; margin-left: 250px;}
.price .price-desk span{font-weight: bold;}
.price table{text-align: left; width: 100%; border-radius: 6px;}
.price table tr{background: #fafafa; color: #2e2e2e; font-size: 16px;}
.price table tr:hover, .price table tr:nth-child(2n):hover{background: #d2d2d2;}
.price table tr td{padding: 10px 25px;}
.price table tr:first-child{font-size: 16px; color: #fff; font-weight: 500; background: #323a45; text-transform: uppercase;}
.price table tr:nth-child(2n){background: #efefef;}

.price .kalk-price{overflow: hidden;background: #fff;border-radius: 6px;padding: 30px 0;margin: 0px 0 30px;text-align: center;}
.price .kalk-price .calc_block{margin: 0px 25px;display: inline-block;}
.price .kalk-price .calc_block label{display: block; color: #2e2e2e; font-size: 18px; font-weight: 500; margin-bottom: 10px;}
.price .kalk-price .calc_block select{font-size: 15px;color: #2e2e2e;padding: 8px;border-radius: 5px;border: 1px solid #e6e6e6;width: 210px;background: #fafafa url(../images/kalk-select-bg.png) 98% center no-repeat;-webkit-appearance: none;-ms-appearance: none;-moz-appearance: none;}
.price .kalk-price .calc_block select:hover{background: #fafafa url(../images/kalk-select-bg-hover.png) 98% center no-repeat;}
.price .kalk-price .calc_block input{font-size: 15px;color: #2e2e2e;padding: 8px 5px 8px 8px;background: #fafafa;border-radius: 5px;border: 1px solid #e6e6e6;width: 100px;background: #fafafa url(../images/kalk-numder-bg.png) 97% center no-repeat;}
.price .kalk-price .calc_summa{margin: 30px 0px 0;}
.price .kalk-price .calc_summa label{font-weight: bold;font-size: 25px;margin-bottom: 0px;display: inline-block;margin-right: 5px;}
.price .kalk-price .calc_summa label:after{content: ":";}
.price .kalk-price .calc_summa #result{font-size: 20px;color: #2e2e2e;font-weight: 500;display: inline-block;}
.price .kalk-price .calc_summa #result span{color: #f97118; font-size: 35px; font-weight: bold;}
.price .kalk-price .btn{margin: 30px auto 0;display: inline-block;}
.price .kalk-price .btn a{background: #fa9f22; background: -moz-linear-gradient(top, #fa9f22 0%, #f96b17 100%); background: -webkit-linear-gradient(top, #fa9f22 0%,#f96b17 100%); background: linear-gradient(to bottom, #fa9f22 0%,#f96b17 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9f22', endColorstr='#f96b17',GradientType=0 ); padding: 12px 20px; text-transform: uppercase;}
.price .kalk-price .btn a:hover{background: #ff9c00;}
.price .kalk-price .btn .shadow{top: 20px;}
.price .kalk-price .calc_kol::after{content: " шт.";font-size: 15px;}
.price .kalk-price .calc_km::after{content: " км.";font-size: 15px;}
.price .kalk-price .clear{text-align: center;}
.price .kalk-price .clear .desc_rashet{color: #2e2e2e; font-size: 15px; margin: 20px 0 0;}


.tabs {position: relative; text-align: center;}
.tabs label {color: #2e2e2e;cursor: pointer;display: inline-block;line-height: 43px;position: relative;font-size: 18px;padding: 0 30px;border-radius: 6px 6px 0 0;background: url(../images/tab-activ.png) right bottom no-repeat;margin: 0 -2px;}
.tabs input {position: absolute; left: -9999px;}
#tab_1:checked  ~ #tab_l1, #tab_2:checked  ~ #tab_l2, #tab_3:checked  ~ #tab_l3, #tab_4:checked  ~ #tab_l4{top: 0;z-index: 3;color: #2e2e2e;background: url(../images/tab.png) right bottom no-repeat;color: #fff;}
.tabs_cont {background: #fff;position: relative;z-index: 2;padding: 20px 30px;border-radius: 6px;}
.tabs_cont > div {position: absolute;left: -9999px;top: 0;opacity: 0;-moz-transition: opacity .5s ease-in-out;-webkit-transition: opacity .5s ease-in-out;transition: opacity .5s ease-in-out;}
#tab_1:checked ~ .tabs_cont #tab_c1, #tab_2:checked ~ .tabs_cont #tab_c2, #tab_3:checked ~ .tabs_cont #tab_c3, #tab_4:checked ~ .tabs_cont #tab_c4 {position: static; left: 0; opacity: 1;}

.main-step{background: #323a45 url(../images/step-bg.png) center no-repeat;}
.step{padding-bottom: 100px;}
.step .title{color: #fff;}
.step .title span{font-size: 30px; display: block;}
.step ul{width: 800px; height: 215px; float: right; border-style: dashed; border-color: #dba23c; border-bottom-width: 1px; border-top-width: 1px; border-right-width: 1px; border-top-right-radius: 115px; border-bottom-right-radius: 115px; position: relative; margin: 30px 0;}
.step ul li{color: #fff; font-size: 16px; text-align: center; padding: 20px 0; position: absolute;}
.step ul li .number{background: #323a45 url(../images/step.png) center no-repeat;display: inline-block;width: 49px;font-size: 22px;font-weight: bold;line-height: 49px;border-radius: 50%;margin: 0px 0 10px 0;position: relative;}
.step ul li span{font-size: 20px; text-transform: uppercase; display: block;}
.step ul li:nth-child(1){top: -45px; left: -140px; width: 240px;}
.step ul li:nth-child(2){top: -45px; left: 200px; width: 240px;}
.step ul li:nth-child(3){top: -45px; right: 40px; width: 220px;}
.step ul li:nth-child(4){bottom: -115px;right: 30px;width: 240px;}
.step ul li:nth-child(5){bottom: -95px;left: 200px;width: 240px;}
.step ul li:nth-child(6){bottom: -95px;left: -150px;width: 260px;}
.step ul li:nth-child(2) .number::before, .step ul li:nth-child(3) .number::before{content: " ";background: url(../images/step-right.png) center no-repeat;width: 16px;height: 12px;position: absolute;top: 19px;left: -16px;}
.step ul li:nth-child(4) .number::before, .step ul li:nth-child(5) .number::before, .step ul li:nth-child(6) .number::before{content: " ";background: url(../images/step-left.png) center no-repeat;width: 16px;height: 12px;position: absolute;top: 22px;right: -17px;}
.step ul li .btn{margin: 15px 30px;}
.step ul li .btn a{font-size: 20px; padding: 5px 0; background: #fa9f22; background: -moz-linear-gradient(top, #fa9f22 0%, #f96b17 100%); background: -webkit-linear-gradient(top, #fa9f22 0%,#f96b17 100%); background: linear-gradient(to bottom, #fa9f22 0%,#f96b17 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9f22', endColorstr='#f96b17',GradientType=0 );}
.step ul li .btn a:hover{background: #ff9c00;}
.main-step .block-bottom{background-color: #ffffff;}
.main-step .block-bottom::after{background: url(../images/block-bottom-black.png) 90% -7px no-repeat;}

.main-foto{}
.foto{text-align: center;}
.foto .title{}
.foto #carousel{width:960px; margin: 0px auto; height:400px; position:relative; clear:both; overflow:hidden; background:#FFF; padding-bottom: 20px;}
.foto #carousel img{visibility:hidden; cursor:pointer; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);}
.foto #carousel img.carousel-center{cursor: auto;}
.foto .nav{position: relative;height: 100%;}
.foto .nav #prev, .foto .nav #next{width: 34px;height: 34px;display: block;-webkit-transition: none;-moz-transition: none;-o-transition: none;transition: none;position: absolute;top: 50%;z-index: 100;}
.foto .nav #prev{background: url(../images/nav.png) 0 -34px no-repeat;left: 0;}
.foto .nav #next{background: url(../images/nav.png) -34px -34px no-repeat;right: 0;}
.foto .nav #prev:hover{background: url(../images/nav.png) 0 0px no-repeat;}
.foto .nav #next:hover{background: url(../images/nav.png) -34px 0px no-repeat;}
.foto .btn{margin: 15px auto; display: inline-block;}
.foto .btn a{background: #fa9f22; background: -moz-linear-gradient(top, #fa9f22 0%, #f96b17 100%); background: -webkit-linear-gradient(top, #fa9f22 0%,#f96b17 100%);background: linear-gradient(to bottom, #fa9f22 0%,#f96b17 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9f22', endColorstr='#f96b17',GradientType=0 ); padding: 12px 20px; text-transform: uppercase;}
.foto .btn a:hover{background: #ff9c00;}
.foto .btn .shadow{top: 20px;}

.main-kont{position: relative;height: 520px;}
#map{width: 100%;height: 100%;position: absolute;}
.kont{padding: 0;}
.kont .block-kont{position: absolute;background: #fff;z-index: 100;top: 15px;text-align: center;padding: 30px;border-radius: 6px;color: #2e2e2e;}
.kont .block-kont .title{font-size: 35px; padding: 0 0 20px;}
.kont .block-kont .desk{font-size: 20px; width: 320px; margin: 0 auto;}
.kont .block-kont .tel{margin: 15px 0;}
.kont .block-kont .tel a{display: block; font-size: 25px; text-decoration: none; color: #2e2e2e; font-weight: bold; line-height: 30px;}
.kont .block-kont .tel a span{font-size: 20px; font-weight: normal;}
.kont .block-kont .btn{margin: 15px auto; width: 260px;}
.kont .block-kont .btn a{font-size: 16px;padding: 12px 0;background: #9ccc49;text-transform: uppercase;font-weight: 500;}
.kont .block-kont .btn a:hover{background: #fa921f; background: -moz-linear-gradient(top, #fa921f 0%, #f96215 100%); background: -webkit-linear-gradient(top, #fa921f 0%,#f96215 100%); background: linear-gradient(to bottom, #fa921f 0%,#f96215 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa921f', endColorstr='#f96215',GradientType=0 );}
.kont .block-kont .btn .shadow{top: 20px;}
.kont .block-kont .adress{font-size: 20px;}
.kont .block-kont .mail{font-size: 16px; color: #2e2e2e; line-height: 25px; display: block;}
.kont .block-kont .mail:hover{text-decoration: none;}
.kont .block-kont .time{margin: 5px 0;}
.kont .block-kont .time span{display: block; text-transform: uppercase; font-size: 20px; font-weight: bold;}
.kont .block-kont .proizvodstvo{margin: 10px 0; font-size: 20px;}
.kont .block-kont .proizvodstvo span{font-weight: bold; display: block;}

.main-foot{}
.foot{padding: 25px 0;}
.foot .copy{text-align: center; color: #2e2e2e;}
.foot .copy .logo{ background: url(../images/logo.png) center left no-repeat; font-family: "Roboto Condensed"; font-weight: bold; color: #2e2e2e; text-decoration: none; font-size: 24px; padding: 18px 0 18px 60px;}

div>div.mod-okno{display: none;}
.mod-okno{background: #a2d24f;background: -moz-linear-gradient(top,  #a2d24f 0%, #6c9c17 100%);background: -webkit-linear-gradient(top,  #a2d24f 0%,#6c9c17 100%);background: linear-gradient(to bottom,  #a2d24f 0%,#6c9c17 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a2d24f', endColorstr='#6c9c17',GradientType=0 );padding: 10px 20px;border-radius: 6px;width: 300px;}
.mod-okno .title{color: #FFFFFF;text-transform: uppercase;display: block;text-align: center;font-size: 27px;font-weight: bold;padding: 20px 0;}
.mod-okno form{}
.mod-okno form input{border: none;font-size: 16px;color: #2e2e2e;display: block;width: 280px;border-radius: 6px;padding: 8px 10px;margin: 10px 0;}
.mod-okno textarea{border-radius: 6px;padding: 8px 10px;font-size: 16px;margin: 10px 0;display: block;width: 280px;font-family: "Roboto Condensed";}
.mod-okno .btn{width: 170px; margin: 20px auto;}
.mod-okno .btn input{background: #fa921f; background: -moz-linear-gradient(top, #fa921f 0%, #f96215 100%); background: -webkit-linear-gradient(top, #fa921f 0%,#f96215 100%); background: linear-gradient(to bottom, #fa921f 0%,#f96215 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa921f', endColorstr='#f96215',GradientType=0 ); color: #fff; text-transform: uppercase; width: 100%; font-size: 18px;}
.mod-okno .btn input:hover{background: #ff9c00;}
.mod-okno table{width: 100%; margin-bottom: 20px; display: table;}
.mod-okno table tr{}
.mod-okno table tr td{padding: 3px 0; border: 1px solid #000; color: #fff; text-align: center;}

/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp{padding: 0;margin: 0;border: 0;outline: none;vertical-align: top;}
.fancybox-wrap {position: absolute;top: 0;left: 0;z-index: 8020;}
.fancybox-skin {position: relative;color: #444;text-shadow: none;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
.fancybox-opened {z-index: 8030;}
.fancybox-opened .fancybox-skin {-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);}
.fancybox-outer, .fancybox-inner {position: relative;}
.fancybox-type-iframe .fancybox-inner {-webkit-overflow-scrolling: touch;}
.fancybox-error {color: #444;font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;margin: 0;padding: 15px;white-space: nowrap;}
.fancybox-image, .fancybox-iframe {display: block;width: 100%;height: 100%;}
.fancybox-image {max-width: 100%;max-height: 100%;}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {background-image: url('../images/fancybox_sprite.png');}
#fancybox-loading {position: fixed;top: 50%;left: 50%;margin-top: -22px;margin-left: -22px;background-position: 0 -108px;opacity: 0.8;cursor: pointer;z-index: 8060;}
#fancybox-loading div {width: 44px;height: 44px;background: url('../images/fancybox_loading.gif') center center no-repeat;}
.fancybox-close {position: absolute;top: -18px;right: -18px;width: 36px;height: 36px;cursor: pointer;z-index: 8040;}
.fancybox-nav {position: absolute;top: 0;width: 40%;height: 100%;cursor: pointer;text-decoration: none;background: transparent url('../images/fancybox_blank.gif'); /* helps IE */-webkit-tap-highlight-color: rgba(0,0,0,0);z-index: 8040;}
.fancybox-prev {left: 0;}
.fancybox-next {right: 0;}
.fancybox-nav span {position: absolute;top: 50%;width: 36px;height: 34px;margin-top: -18px;cursor: pointer;z-index: 8040;visibility: hidden;}
.fancybox-prev span {left: 10px;background-position: 0 -36px;}
.fancybox-next span {right: 10px;background-position: 0 -72px;}
.fancybox-nav:hover span {visibility: visible;}
.fancybox-tmp {position: absolute;top: -99999px;	left: -99999px;visibility: hidden;max-width: 99999px;max-height: 99999px;overflow: visible !important;}
/* Overlay helper */
.fancybox-lock {width: auto;}
.fancybox-overlay {position: absolute;top: 0;left: 0;display: none;z-index: 8010; background: rgba(0, 0, 0, 0.7);}
.fancybox-overlay-fixed {position: fixed;bottom: 0;right: 0;}
.fancybox-lock .fancybox-overlay {overflow: auto; overflow-y: auto;}
/* Title helper */
.fancybox-title {visibility: hidden;	font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;position: relative;text-shadow: none;z-index: 8050;}
.fancybox-opened .fancybox-title {visibility: visible;}
.fancybox-title-float-wrap {position: absolute;bottom: 0;right: 50%;margin-bottom: -35px;z-index: 8050;text-align: center;}
.fancybox-title-float-wrap .child {display: inline-block;margin-right: -100%;padding: 2px 20px;background: transparent; /* Fallback for web browsers that doesn't support RGBa */background: rgba(0, 0, 0, 0.8);-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;text-shadow: 0 1px 2px #222;color: #FFF;font-weight: bold;line-height: 24px;white-space: nowrap;}
.fancybox-title-outside-wrap {position: relative;margin-top: 10px;color: #fff;}
.fancybox-title-inside-wrap {padding-top: 10px;}
.fancybox-title-over-wrap {position: absolute;bottom: 0;left: 0;	color: #fff;padding: 10px;background: none;}

/* SlickNav Responsive Mobile Menu v1.0.3 */
 .slicknav_menu:after,.slicknav_menu:before{display:table;content:" "}.slicknav_btn,.slicknav_nav .slicknav_item{cursor:pointer}.slicknav_menu,.slicknav_menu *{box-sizing:border-box}.slicknav_nav,.slicknav_nav ul{padding:0;list-style:none;overflow:hidden}.slicknav_btn{position:relative;display:block;vertical-align:middle;float:right;padding:.438em .625em;line-height:1.125em}.slicknav_btn .slicknav_icon-bar+.slicknav_icon-bar{margin-top:.188em}.slicknav_menu .slicknav_menutxt{display:block;line-height:1.188em;float:left;color:#fff;font-weight:700;text-shadow:0 1px 3px #000}.slicknav_menu .slicknav_icon{float:left;margin:.188em 0 0 .438em}.slicknav_menu .slicknav_no-text{margin:0}.slicknav_menu .slicknav_icon-bar{display:block;width:1.125em;height:.125em;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.25);-moz-box-shadow:0 1px 0 rgba(0,0,0,.25);box-shadow:0 1px 0 rgba(0,0,0,.25)}.slicknav_menu:after{clear:both}.slicknav_nav li,.slicknav_nav ul{display:block}.slicknav_nav .slicknav_arrow{font-size:.8em;margin:0 0 0 .4em}.slicknav_nav .slicknav_item a{display:inline}.slicknav_nav .slicknav_row,.slicknav_nav a{display:block}.slicknav_nav .slicknav_parent-link a{display:inline}.slicknav_menu{*zoom:1;font-size:16px;background:#4c4c4c;padding:5px}.slicknav_menu .slicknav_icon-bar{background-color:#fff}.slicknav_btn{margin:5px 5px 6px;text-decoration:none;text-shadow:0 1px 1px rgba(255,255,255,.75);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;background-color:#222}.slicknav_nav{clear:both;color:#fff;margin:0;font-size:.875em}.slicknav_nav ul{margin:0 0 0 20px}.slicknav_nav .slicknav_row,.slicknav_nav a{padding:5px 10px;margin:2px 5px}.slicknav_nav .slicknav_row:hover{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;background:#ccc;color:#fff}.slicknav_nav a{text-decoration:none;color:#fff}.slicknav_nav a:hover{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;background:#ccc;color:#222}.slicknav_nav .slicknav_txtnode{margin-left:15px}.slicknav_nav .slicknav_item a,.slicknav_nav .slicknav_parent-link a{padding:0;margin:0}.slicknav_brand{float:left;color:#fff;font-size:18px;line-height:30px;padding:7px 12px;height:44px}

.spasibo h2 {text-align: center; margin-top: 150px;font-size: 50px;}
.spasibo h3 {text-align:center; margin-bottom: 50px;font-size: 30px;}
.spasibo a {text-align: center; display: block; font-size: 30px; color: #D40909;}
.spasibo a:hover {text-decoration: none;}

.page-head{background: #efefef;}
.page-head .top-head {padding: 50px 0 10px;}

.fix a{position: fixed;top: 50%;right: 0;display: block;background: #FE0000 url(../images/call.jpg) center left no-repeat;text-decoration: none;margin-top: -100px;height: 200px;width: 35px;border-radius: 10px 0 0 10px;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}
.fix a:hover {width: 50px;}
 
@media screen and (max-width: 1257px){
    .svay .right{width: 800px;margin: 0;top: 60px;right: 0px;}
}

@media screen and (max-width: 1050px){
    .svay{padding-bottom: 0px;}
    .svay .left {float: none; width: 100%; margin-top: 0;}
    .svay .right{position: static; margin: 0 auto; background: url(../images/svai.png) center -50px no-repeat; height: 380px;}
    .svay .right ul {margin: 10px 80px;}
    .svay .left .btn {display: block; width: 190px; margin: 0 auto;}
    .svay .left .btn a{text-align: center;}
}

@media screen and (max-width: 1020px){
	.head {padding: 40px 10px 0;}
	.row {padding: 40px 10px;}
	.kont {padding: 0;}
	.head .offer h1 {font-size: 32px;}
	.head .offer span {font-size: 28px;}
	.kompany ul li:nth-child(1){width: 300px;}
	.kompany ul li:nth-child(3){width: 309px;}
	.kompany ul li:nth-child(7){width: 570px;}
	.kompany ul{max-width: 820px; margin: 0 auto;}
	.step {padding-bottom: 100px;}
}

@media screen and (max-width: 1005px){
	.use ul li:nth-child(1), .use ul li:nth-child(2), .use ul li:nth-child(3), .use ul li:nth-child(4), .use ul li:nth-child(5), .use ul li:nth-child(6){    margin: 0 20px 40px;}
}

@media screen and (max-width: 996px){
	.foto #carousel {max-width: 100%;}
	.block-bottom::after {width: 100%;}
	.progress ul{background: none; height: auto; position: static; text-align: center;}
	.progress ul li{position: static; display: inline-block; margin: 0px 20px 30px; vertical-align: top;}
	.progress ul li:nth-child(1), .progress ul li:nth-child(2), .progress ul li:nth-child(3), .progress ul li:nth-child(4), .progress ul li:nth-child(5), .progress ul li:nth-child(6){text-align: center;padding: 50px 0 0 0;background-position-x: center;background-position-y: top;width: 265px;}
	.progress ul li span{font-size: 20px;text-transform: none;font-weight: 500;}
	.price .kalk-price{text-align: center;}
	.price .kalk-price .calc_block{float: none; margin: 0 20px; display: inline-block;}
	.price .kalk-price .calc_summa{text-align: center; margin: 20px 0 0; float: none; display: block;}
	.price .kalk-price .btn {margin: 10px auto 0;}
}

@media screen and (max-width: 980px){
	.step ul{width: 100%; height: auto; float: none; border: none; border-radius: 0; position: static; margin: 0 0 30px;}
	.step ul li{position: static; width: 100%;}
	.step ul li:nth-child(1), .step ul li:nth-child(2), .step ul li:nth-child(3), .step ul li:nth-child(4), .step ul li:nth-child(5), .step ul li:nth-child(6){width: auto; padding: 0 0 30px;}
	.step ul li .btn {margin: 15px auto; width: 200px;}
	.step ul li:nth-child(2) .number::before, .step ul li:nth-child(3) .number::before{content: none;}
	.step ul li:nth-child(4) .number::before, .step ul li:nth-child(5) .number::before, .step ul li:nth-child(6) .number::before{content: none;}
	.step {padding-bottom: 0px;}
	.step ul li .number{margin: 0px 0 5px 0;}
}

@media screen and (max-width: 970px){
	.top-menu ul li a {padding: 10px; font-size: 15px;}
	.top-head .logo{margin-right: 30px;}
	.top-head .adress{margin-right: 50px;}
}

@media screen and (max-width: 960px){
	.foto .nav #prev {left: 10px;}
	.foto .nav #next {right: 10px;}
}

@media screen and (max-width: 910px){
	.top-head .logo, .top-head .adress{margin-right: 20px;}
	.price table tr:first-child{text-transform: none;}
	.price .price-desk{margin-left: 0;}
}

@media screen and (max-width: 875px){
	.head .offer h1 {font-size: 30px;}
	.top-head .adress{display: none;}
	.top-head .tel {float: right;}
	.top-head .btn {margin: 15px 20px;}
}

@media screen and (max-width: 855px){
	.kompany ul li:nth-child(1){width: 239px;}
	.kompany ul li:nth-child(3){width: 248px;}
	.kompany ul li:nth-child(5){width: 420px; padding-left: 10px;}
	.kompany ul li:nth-child(7){width: 509px;}
	.kompany ul {max-width: 760px;}
	.top-menu{display: none;}
	.slicknav_menu {display: block; position: fixed; width: 100%; z-index: 9999;}
	
}

@media screen and (max-width: 820px){
	.head .offer h1 {font-size: 26px;}
	.head .offer span {font-size: 22px;}
	.svay .right {width: 700px;}
	.svay .right ul {margin: 10px 30px;}
}

@media screen and (max-width: 795px){
	.kompany ul li:nth-child(1){width: 240px;}
	.kompany ul li:nth-child(2){background: #323a45; width: 330px; padding-left: 10px;}
	.kompany ul li:nth-child(3){width: 240px;}
	.kompany ul li:nth-child(4){background: #9ccc49; width: 310px; padding-left: 10px;}
	.kompany ul li:nth-child(5){width: 280px; padding-left: 0px;}
	.kompany ul li:nth-child(6){background: #6aabbf; width: 290px; padding-left: 10px;}
	.kompany ul li:nth-child(7){width: 350px; padding-left: 0px;}
	.kompany ul li:nth-child(8){width: 210px; padding-left: 20px; background: #5f6982;}
	.kompany ul {max-width: 585px;}
}

@media screen and (max-width: 740px){
	.svay .right {width: 640px;}
	.svay .right ul {margin: 10px 0px;}
}

@media screen and (max-width: 715px){
	.head .offer h1 {font-size: 30px;}
	.main-kont{position: static; height: auto;}
	#map {height: 425px; position: static;}
	.kont .block-kont {position: static;}
	.main-foot {display: none;}
	.foto {padding: 40px 10px 0;}
}

@media screen and (max-width: 670px){
	.svay .right {display: none;}
	.svay {min-height: auto;}
}

@media screen and (max-width: 660px){
	.top-head .btn {display: none;}
	.kompany .title {padding-bottom: 20px; font-size: 30px;}
}

@media screen and (max-width: 650px){
	.tabs_cont{padding: 20px 2px;}
	.price .kalk-price .calc_block {margin: 0px 20px 10px;}
}

@media screen and (max-width: 620px){
	.kompany ul {max-width: 435px;}
	.kompany ul li:nth-child(1), .kompany ul li:nth-child(2), .kompany ul li:nth-child(3), .kompany ul li:nth-child(4), .kompany ul li:nth-child(5), .kompany ul li:nth-child(6), .kompany ul li:nth-child(7), .kompany ul li:nth-child(8){width: 435px; padding: 0;}
	.kompany ul li:nth-child(4) {background: #25344b;}
}

@media screen and (max-width: 595px){
	.price table tr td {padding: 10px;}
}

@media screen and (max-width: 560px){
	.head .offer h1 {font-size: 25px;}
	.head .offer span {font-size: 20px;}
	.head .form {float: none; margin: 60px auto 0;}
	.main-head {background: url(../images/bg-head-2.jpg) top no-repeat;}
}

@media screen and (max-width: 540px){
	.kompany .title {font-size: 26px;}
}

@media screen and (max-width: 475px){
	.top-head .logo, .top-head .tel{float: none;}
	.top-head .logo{font-size: 30px;margin: 0;display: inline-block;}
	.top-head .tel{float: none;}
	.top-head {text-align: center; padding-bottom: 30px;}
	.top-head .tel a {font-size: 30px;line-height: 40px;}
	.top-head .tel a span {font-size: 24px;}
	.head .offer {background: rgba(255, 255, 255, 0.9); padding: 10px; border-radius: 6px;}
	.head .offer h1 {margin-bottom: 15px;}
	.head .form::before,.head .form::after{height: 0px;}
	.head .form {margin: 30px auto 0;}
	.head .form .dark {border-radius: 6px;}
	.kompany .title {font-size: 20px;}
	.kompany ul {width: 100%;}
	.kompany ul li:nth-child(1), .kompany ul li:nth-child(2), .kompany ul li:nth-child(3), .kompany ul li:nth-child(4), .kompany ul li:nth-child(5), .kompany ul li:nth-child(6), .kompany ul li:nth-child(7), .kompany ul li:nth-child(8){width: 100%;}
	.kompany ul li div, .kompany ul li:nth-child(6) div, .kompany ul li:nth-child(7) div {padding: 15px 0;}
	.kompany ul li .number {font-size: 50px; padding-left: 10px;}
	.kompany ul li:nth-child(6) div, .kompany ul li:nth-child(7) div {width: auto;}
	.kompany ul li:nth-child(2n){background: #9ccc49;}
	.kompany ul li:nth-child(2n+1){background: #fff;}
	.kompany ul li:nth-child(3), .kompany ul li:nth-child(7){color: #2e2e2e;}
	.row .title {font-size: 30px;}
	.kont .block-kont .title {font-size: 30px;}
	.fix {display: none;}
}

@media screen and (max-width: 460px){
	.tabs label{font-size: 16px; padding: 0 10px; background: #fff; line-height: 35px; margin: 0px;}
	#tab_1:checked  ~ #tab_l1, #tab_2:checked  ~ #tab_l2, #tab_3:checked  ~ #tab_l3{background: #fd8d1b;}
	.price table tr td {padding: 10px 5px;}
}

@media screen and (max-width: 445px){
	.kompany ul li{font-size: 16px;}
}

@media screen and (max-width: 425px){
	.head .form {margin: 15px auto 0;}
	.progress ul li{margin: 0px 0px 30px;}
	.fundament .vid {margin: 0px 0px 40px;}
	.foto .nav #prev {left: 5px;}
	.foto .nav #next {right: 5px;}
}

@media screen and (max-width: 400px){
	.fancybox-close {top: 0; right: 0;}
	.mod-okno{padding: 10px 5px; width: 95%; margin: 0 auto;}
	.mod-okno form input, .mod-okno textarea{width: 90%; margin: 10px auto;}
	.mod-okno .title {font-size: 20px; padding: 20px 0 10px;}
}

@media screen and (max-width: 395px){
	.kont .block-kont .title {font-size: 26px;}
	.kont .block-kont .desk {max-width: 100%;}
}

@media screen and (max-width: 386px){
	.price table tr, .price table tr:first-child{font-size: 14px;}
	.price .price-desk{font-size: 16px; padding: 4px 30px;}
	.tabs label{font-weight: 500;}
}

@media screen and (max-width: 365px){
	.kompany ul li .number {display: block; text-align: center; padding: 0;}
	.kompany ul li {font-size: 15px;}
	.kompany ul li div {width: 100%; text-align: center; padding: 0; font-size: 20px;}
	.kompany ul li:nth-child(1), .kompany ul li:nth-child(2), .kompany ul li:nth-child(3), .kompany ul li:nth-child(4), .kompany ul li:nth-child(5), .kompany ul li:nth-child(6), .kompany ul li:nth-child(7), .kompany ul li:nth-child(8){padding: 20px 0;}
	.kompany ul li:nth-child(6) div, .kompany ul li:nth-child(7) div {width: 100%; padding: 0;}
	.kompany ul li:nth-child(1) div{font-size: 24px;}
	.kompany ul li:nth-child(1) div span{font-size: 20px;}
	.use ul li:nth-child(1), .use ul li:nth-child(2), .use ul li:nth-child(3), .use ul li:nth-child(4), .use ul li:nth-child(5), .use ul li:nth-child(6){margin: 0 0px 40px;}
}

@media screen and (max-width: 360px){
	.head .form {width: 100%;}
	.head .form form input{width: 80%;}
	.head .form form .btn {width: 90%;}
	.head .form form .btn input[type="submit"] {text-transform: none; font-weight: bold; font-size: 16px;}
}

@media screen and (max-width: 350px){
	.price table tr, .price table tr:first-child{font-size: 16px;}
	#tab_1:checked ~ .tabs_cont #tab_c1, #tab_2:checked ~ .tabs_cont #tab_c2, #tab_3:checked ~ .tabs_cont #tab_c3, .bez-montaga{white-space: nowrap; width: 100%; overflow-x: scroll;}
	.price .price-desk{background: none;font-size: 14px;}
	.tabs label{font-size: 14px; padding: 0 4px;}
	
}

@media screen and (max-width: 340px){
	.kont .block-kont .btn{width: 100%;}
	.kont .block-kont .btn a{font-size: 18px; text-transform: none; font-weight: normal;}
}

@media screen and (max-width: 330px){
	.use ul li {font-size: 16px;}
	.use ul li:nth-child(4), .use ul li:nth-child(5){padding: 160px 60px 0;}
}

@media screen and (max-width: 320px){
	.top-head .logo {font-size: 26px;}
	.head .form .title span {font-size: 17px;}
	.use ul li {font-size: 16px;}
}
.dropbtn {
    /*background-color: #4CAF50;*/
    color: white;
    /*padding: 16px;*/
    font-size: 16px;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #586372;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
        top: 39px;
        cursor:pointer;


}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {}

.dropdown:hover .dropdown-content {display: flex;
    flex-direction: column;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}


@media screen and (max-width: 480px) {
body .dropdown-content{

	margin-left: 0px;
	    position: initial;
}
.dropdown-content a {
    color: white;

 }
 .dropbtn i{
 	display: none;
 }
}

ul.breadcrumb {
    padding: 10px 16px;
    list-style: none;
    background-color: #eee;
}

ul.breadcrumb li {
    display: inline;
    font-size: 18px;
}

ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}

ul.breadcrumb li a {
    color: #0275d8;
    text-decoration: none;
}

ul.breadcrumb li a:hover {
    color: #01447e;
    text-decoration: underline;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99999; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
    margin-bottom: 200px;
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}