/*Theme Name: Septik Klen
Theme URI:
Author: Mikhail Epikhin
Author URI:
Description: Original theme
Version: 1.0*/


html{min-height: 100%;}
body{position: relative; margin: 0; white-space: normal; font-family: 'Ubuntu', sans-serif; background: #FFFFFF; line-height: 1.1; font-size: 100%; font-weight: normal; color: #000000;}


a, input, a div, a span, .interior .wrapper div{
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
a{color: #000000; text-decoration: none;}
a:hover{color: #000000;}

img{border: 0px;}
ul{margin: 0; padding: 0; vertical-align: top;}
ol{margin: 0; padding: 0; vertical-align: top;}
li{vertical-align: top; list-style: none;}
h1, h2, p{margin: 0px; font-weight: normal}
h1{font-size: 280% !important;}
p{line-height: 1.4;}

div, ul, li, a, span{position: relative; vertical-align: top; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}

input, textarea, select{-webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none !important; -moz-border-radius: 0px; -webkit-border-radius: 0px; -khtml-border-radius: 0px; border-radius: 0px; border: 0;}

input::-webkit-input-placeholder {color: rgba(255, 255, 255, 0.8);}
input::-moz-placeholder          {color: rgba(255, 255, 255, 0.8);}/* Firefox 19+ */
input:-moz-placeholder           {color: rgba(255, 255, 255, 0.8);}/* Firefox 18- */
input:-ms-input-placeholder      {color: rgba(255, 255, 255, 0.8);}

input[type="text"], input[type="tel"], input[type="password"], textarea, select{font-family: 'Ubuntu', sans-serif !important; display: inline-block; width: 100%; margin: 10px 0px; padding: 10px; color: rgba(255, 255, 255, 0.8); font-size: 100%; border-radius: 10px; background: none; border: 1px solid rgba(255, 255, 255, 0.8); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
select::-ms-expand {display: none;}
input[type="checkbox"]{-webkit-appearance: checkbox; -moz-appearance: checkbox; -ms-appearance: checkbox; appearance: checkbox !important;}

.wpcf7-submit, .button{display: inline-block; padding: 11px 15px; font-family: 'Ubuntu', sans-serif; font-size: 100%; font-weight: bold; cursor: pointer; color: #000000 !important; background: #FFCC00; white-space: nowrap; overflow: hidden; border-radius: 10px;}
:hover.wpcf7-submit, :hover.button{background: #f5ad3b;}

.headline, .subheadline, .date{display: block;}
.tel{white-space: nowrap;}
.tel span, .headline{color: #26b968;}

.offer form input[type="tel"]{width: 70%; border-radius: 10px 0px 0px 10px; border-right: 0px;}
.offer form input[type="submit"]{width: 30%; border-radius: 0px 10px 10px 0px;}
.offer p.privacy{margin-top: 10px; color: rgba(255, 255, 255, 0.5); font-size: 115%;}
.offer p.privacy b{color: #FF0000;}
.offer p.privacy a{color: rgba(255, 255, 255, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.5);}
.offer p.privacy a:hover{color: rgba(255, 255, 255, 1); border-color: rgba(255, 255, 255, 1);}
.offer input[type="checkbox"]{display: none;}
.offer input[type="checkbox"] + span{display: inline-block; margin-right: 5px; width: 20px; height: 20px; background: url('/wp-content/themes/klen/images/checkbox.png') center center no-repeat; cursor: pointer;}
.offer input[type="checkbox"]:checked + span{background-image: url('/wp-content/themes/klen/images/checkbox-checked.png');}
.offer input[type="checkbox"]:checked + input[type="submit"]{background: #FF0000;}

div.wpcf7-response-output{color: #FFCC00 !important;}

#contact_form_pop{padding: 15px;}
#contact_form_pop input[type="text"]{border-color: rgba(0, 0, 0, 0.5); color: #000000;}
#contact_form_pop input[type="submit"]{margin-top: 10px;}

label.push div{display: none;}
input:checked ~ label.push div{display: block; background: rgba(0, 0, 0, 0.7); position: fixed; left: 0px; top: 0px; height: 100%; width: 100%; z-index: 350; cursor: pointer;}
#nav{display: none;}

.wrapper{position: relative; margin: 0 auto; max-width: 1400px;}
.page-wrapper{clear: both; background: #F0F0F0;}

.header .wrapper{padding: 10px 30px;}
.header a.logo{display: inline-block; padding: 10px 0px 0px 210px; width: 324px; height: 61px; font-size: 90%; background: url('/wp-content/themes/klen/images/logo.png') left center no-repeat;}
.header-contact{width: 100%; display: table;}
.header-contact li{vertical-align: middle; display: table-cell; padding: 10px 0px 10px 30px;}
.header-contact li.logo{width: 280px; padding: 0px;}
.header-contact b{display: block; margin: 0px 0px 5px; color: #999999; font-size: 80%; font-weight: normal;}
.header-contact .address{font-size: 90%; font-weight: bold;}
.header-contact .tel{font-size: 125%; font-weight: bold;}
.header-contact li:last-child{text-align: right;}

.menu{background: linear-gradient(to top, #13934c, #26b968); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); z-index: 88;}
.menu .wrapper{padding: 0px 20px 0px 15px;}

.menu-catalog{display: inline-block;}
.menu-catalog > li{display: inline-block; float: left;}
.menu-catalog > li > a{display: block; padding: 15px; color: #FFFFFF; font-size: 90%; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;}
.menu-catalog > li:hover > a{background: rgba(0, 0, 0, 0.1);}
.menu-catalog > li.current-menu-item a{background: rgba(0, 0, 0, 0.15);}

.menu-links{float: right; display: inline-block;}
.menu-links li{display: inline-block; float: left; padding: 14px 10px;}
.menu-links a{color: #FFFFFF; font-size: 80%; border-bottom: 1px solid #CCCCCC;}
.menu-links a:hover{color: #26b968; border-color: #26b968;}

.menu .catalog{display: none;}
.menu .catalog li{display: inline-block; width: 50%;}
.menu .catalog li:nth-child(odd){border-right: 1px solid rgba(0, 0, 0, 0.1);}
.menu .catalog a{padding: 15px;}
.menu .catalog .title{color: #FFFFFF;}
.menu .catalog .capacity{color: rgba(255, 255, 255, 0.5);}
.menu .catalog .ground{color: rgba(0, 0, 0, 0.5);}

.sidebar{display: inline-block; width: 240px; padding: 0px;}
.catalog li{border-bottom: 1px solid #CCCCCC;}
.catalog a{display: block; padding: 15px 30px;}
.catalog a:hover{background: rgba(0, 0, 0, 0.1);}
.catalog li.catsel a{background: rgba(0, 0, 0, 0.15);}
.catalog span{display: block;}
.catalog .title{color: #26b968; font-size: 100%; font-weight: bold;}
.catalog .capacity{margin: 8px 0px; font-size: 80%;}
.catalog .ground{padding-left: 15px; color: #999999; font-size: 80%; background: left center no-repeat; background-size: contain}
.catalog .low{background-image: url('/wp-content/themes/klen/images/drop-low.svg');}
.catalog .high{background-image: url('/wp-content/themes/klen/images/drop-high.svg');}
.sidebar ul.info{margin: 0px;}
.sidebar ul.info li{display: block; width: 100% !important; padding: 0px; border-bottom: 1px solid #CCCCCC;}
.sidebar ul.info a{display: table; width: 100%; min-height: 85px;}
.sidebar ul.info .text{display: table-cell; vertical-align: middle; padding: 15px 30px 15px 75px; text-align: left;}
.sidebar ul.info .date{display: block; font-size: 80%; color: #999999;}
.sidebar ul.info .title{margin-top: 0px; font-size: 90%;}
.sidebar ul.info .photo{height: 45px; width: 45px; position: absolute; top: 20px; left: 15px;}
.sidebar ul.info .photo div{height: 45px; width: 45px; background: center center no-repeat; background-size: cover; border-radius: 50%;}

.right-area{display: inline-block; width: calc(100% - 240px); padding: 0px 0px 45px; background: #FFFFFF; box-shadow: -2px 0px 3px rgba(0, 0, 0, 0.2);}

.index-welcome{padding: 45px 0px 15px; background: url('/wp-content/themes/klen/images/welcome-bg.jpg') center center no-repeat; background-size: cover;}
.welcome{padding: 0px 30px; background: url('/wp-content/themes/klen/images/scheme.png') right bottom no-repeat; min-height: 550px;}
.welcome span{max-width: 800px;}
.welcome .headline{font-size: 360%; font-weight: bold; line-height: 0.9;}
.welcome .subheadline{display: block; margin: 30px 0 30px; font-size: 200%; line-height: 0.9;}
.tips{margin: 15px -15px; position: absolute; left: 30px; bottom: 0px;}
.tips li{padding: 7px 15px 8px;}
.tips a{display: inline-block; padding: 10px; font-size: 115%; font-weight: bold; color: #FFFFFF; background: #26b968; border-radius: 15px 0px;}
.tips a:hover{background: #13934c;}

.offer-index{background: url('/wp-content/themes/klen/images/offer-index.jpg') center center no-repeat !important; background-size: cover;}

.offer{max-width: 500px;}
.offer form{}
.offer .headline{margin-bottom: 15px; font-size: 200%; font-weight: bold;}

.advantages{padding: 60px 30px;}
.advantages img{display: block; margin: 0px auto 30px; max-width: 100%;}
.advantages .headline{text-align: center; font-size: 200%; font-weight: bold;}
.advantages ul{margin: 30px -15px;}
.advantages li{display: inline-block; padding: 15px 30px 15px 105px; width: 50%; background: 15px 15px no-repeat; background-size: 60px 60px;}
.advantages li span{color: #26b968; font-size: 125%; font-weight: bold;}
.advantages p{margin: 15px 0px 0px; text-align: left; font-size: 90%; border-bottom: 5px dotted #FFFFFF;}

.video{padding: 45px 30px; text-align: center; background: #333333;}
.video iframe{max-width: 100%;}

.select-model div{display: inline-block; padding: 45px 30px;}
.select-form{width: 40%;}
.select-form .headline{color: #000000; font-size: 150%; font-weight: bold;}
.select-form p{margin: 15px 0px 30px; color: #999999; font-size: 100%;}
.select-form form{margin: 30px -10px;}
.select-form select{display: inline-block; margin: 0px 10px; width: calc(50% - 20px); border: 1px solid #26b968; color: #000000; background: url('/wp-content/themes/klen/images/select.png') right center no-repeat;}
.select-result{width: 60%;}
.select-result div{float: right; width: 180px; height: 180px; background: center center no-repeat; background-size: contain;}
.select-result span{display: block;}
.select-result .headline{color: #26b968; font-size: 200%; font-weight: bold;}
.select-result .capacity{margin-top: 5px; color: #999999; font-size: 90%;}
.select-result p{margin: 15px 0px 15px; font-size: 90%;}
.select-result .price{font-size: 150%; font-weight: bold;}
.select-result .button{margin-top: 30px;}

.guarantee{clear: both; padding: 30px 30px 45px; text-align: center;}
.guarantee .headline{font-size: 200%; font-weight: bold;}
.guarantee .headline span{display: block;}
.guarantee p{margin: 30px auto; max-width: 700px; font-size: 100%;}
.guarantee .also{font-size: 125%; font-weight: bold;}

.toaction{padding: 45px 30px; background: url('/wp-content/themes/klen/images/toaction-bg.jpg') center center no-repeat #999999; background-size: cover;}
.toaction .offer{margin: 0 auto; text-align: center;}

.more-advantages{padding: 45px 30px 30px;}
.more-advantages .headline{margin-bottom: 30px; text-align: center; font-size: 200%; font-weight: bold;}
.more-advantages li{display: inline-block; vertical-align: middle; padding: 30px 15px 30px 60px; width: 25%; font-size: 90%; font-weight: bold; background: left center no-repeat; background-size: 45px 45px;}

div.items{padding: 30px 0px;}
div.items h1{margin: 0px 30px 30px; font-size: 200%; font-weight: bold;}
div.items .select-result{width: 50%;}

div.info{padding: 30px 0px;}
div.info .headline{text-align: center; font-size: 200%; font-weight: bold;}
ul.info{margin: 30px 20px;}
ul.info li{display: inline-block; width: 33%; padding: 10px;}
ul.info li:nth-child(3n+2){width: 34%;}
ul.info a{display: block;}
ul.info .text{padding: 15px 0px; text-align: center;}
ul.info .date{display: block; font-size: 80%; color: #999999;}
ul.info .title{display: block; margin-top: 8px; font-size: 115%; font-weight: bold;}
ul.info .photo{height: 150px;}
ul.info .photo div{height: 150px; background: center center no-repeat; background-size: cover; border-radius: 10px;}
ul.info a:hover .photo div{opacity: 0.8;}
div.info .more{text-align: center;}

.wp-pagenavi{margin: 0px 0px 30px; text-align: center;}
.wp-pagenavi a{display: inline-block; margin: 5px; padding: 10px 15px; color: #26b968; font-size: 115%; font-weight: bold; border: 1px solid #26b968; border-radius: 10px; opacity: 0.5;}
.wp-pagenavi a:hover{opacity: 1;}
.wp-pagenavi .current{display: inline-block; margin: 5px; padding: 10px 15px; color: #26b968; font-size: 115%; font-weight: bold; border: 1px solid rgba(0, 0, 0, 0); border-radius: 10px; opacity: 1;}

.page{padding: 30px;}
.page .headline{font-weight: bold; margin-bottom: 30px;}
.page h2{font-size: 200%; font-weight: bold; margin: 30px 0px 20px;}
.page p{margin: 15px 0px; font-size: 100%; line-height: 1.5;}
.page ul{clear: both; margin: 20px 0px;}
.page li{padding: 10px 0px 10px 30px; font-size: 100%; line-height: 1.5; background: url('/wp-content/themes/klen/images/bullet.png') left 12px no-repeat; background-size: 20px 20px;}
.page div{margin: 30px 0px;}
.page img{max-width: 100%; height: auto;}
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
margin: 0px 30px 30px 0px;
float: left;
}
.alignright {
margin: 0px 0px 30px 30px;
float: right;
}

.contact-list{margin: 20px 0px;}
.contact-list li{padding: 10px 0px; text-align: right; border-bottom: 1px dotted rgba(0, 0, 0, 0.2); background: none;}
.contact-list b{float: left;}
.map{height: 400px;}

.model{padding: 30px 30px 0px;}
.model .photo{float: right; width: 270px; height: 270px; background: center center no-repeat; background-size: contain; z-index: 55;}
.model span{display: block;}
.model .headline{color: #26b968; font-size: 200%; font-weight: bold;}
.model-info{margin: 15px 0px; font-size: 100%;}
.model-info li{padding: 10px 0px; border-bottom: 1px dotted rgba(0, 0, 0, 0.2);}
.model p{margin: 30px 0px; font-size: 100%;}
.model-params{margin: 15px 0px; font-size: 90%;}
.model-params li{display: inline-block; padding: 3px 30px 3px 0px;}
.model-params b{color: #26b968;}
.model .price{margin: 30px 0px 15px; font-size: 200%; font-weight: bold;}
.full{display: table; width: 100%; padding: 10px 15px; font-weight: bold; background: rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 10px;}
.full div{display: table-cell; vertical-align: middle;}
.full div:last-child{text-align: right;}
.full-title{font-size: 115%;}
.full-price{color: #26b968; font-size: 150%;}
#spoiler{display: none; border-bottom: 1px dotted rgba(0, 0, 0, 0.1);}

#footer{padding: 30px 0px; background: #F0F0F0; box-shadow: inset 0px 3px 3px rgba(0, 0, 0, 0.1);}
#footer .wrapper{display: table; box-sizing: border-box; width: 100%;}
.copyright{display: table-cell; vertical-align: middle; padding: 5px 0px 0px 30px; width: 210px;}
.copyright a.logo{display: inline-block; width: 150px; height: 45px; background: url('/wp-content/themes/klen/images/logo.png') left center no-repeat; background-size: contain;}
.copyright .description{display: block; margin: 15px 0px 0px; text-indent: -12px; font-size: 80%;}
div.footer-contact{display: table-cell; vertical-align: middle; padding: 0px 30px;}
.footer-contact ul.footer-contact li{display: inline-block; padding: 10px; font-size: 90%; font-weight: bold;}
.footer-contact ul.links li{display: inline-block; float: left; padding: 10px; font-size: 90%;}
.footer-contact ul.links a{border-bottom: 1px solid rgba(0, 0, 0, 0.5);}
.designed{display: table-cell; vertical-align: middle; padding: 0px 30px 0px 0px; width: 125px;}
.designed a{display: inline-block; width: 125px; height: 36px; padding: 4px 0px; font-size: 80%; color: rgba(27, 20, 11, 1); background: url('/wp-content/themes/klen/images/wd.png') no-repeat; background-position: 88px 0px;}
.designed a:hover{color: rgba(222, 200, 162, 0) !important; background-position: 0px 0px;}

@media only screen and (max-width: 1050px) {
.header-contact li:nth-child(2){display: none;}
.select-form{width: 100%;}
.select-result{width: 100%}
.more-advantages li{width: 50%;}
}

@media only screen and (max-width: 900px) {
.advantages li{width: 100%;}
}
@media only screen and (max-width: 800px) {
body{font-size: 90%;}

.header .wrapper{padding: 5px 15px;}
.header a.logo{padding: 0px; width: 80px; height: 30px; text-indent: -9999px; background-size: contain;}
.header-contact li{padding-left: 15px;}
.header-contact li:first-child{width: 80px;}
.header-contact li:last-child{display: none;}

#nav:checked ~ .menu {display: block; opacity: 1; transition: all 0.2s;}
.menu{display: none; position: absolute; top: 52px; left: 0px; z-index: 999; margin: 0px; width: 100%;}
label.burger{display: block; position: absolute; right: 15px; top: 17px; height: 35px; width: 35px; z-index: 400; cursor: pointer; background: url('/wp-content/themes/klen/images/burger.png') center center no-repeat;}
input[type="checkbox"]:checked + label.burger{background: url('/wp-content/themes/klen/images/burger-close.png') center center no-repeat #26b968; z-index: 400;}
.menu .wrapper{padding: 0px;}
.menu li{border-bottom: 1px solid rgba(0, 0, 0, 0.2);}
.menu-catalog{display: block;}
.menu-catalog > li{display: block; float: none;}
.menu-catalog > li:hover > a{background: rgba(0, 0, 0, 0.1);}
.menu-links{float: none; display: block;}
.menu-links li{display: block; float: none; padding: 0px;}
.menu-links a{display: block; padding: 10px 15px; border: 0px;}
.menu .catalog{display: block;}

.sidebar{display: none;}
.right-area{width: 100%;}

.index-welcome{padding: 30px 0px 30px;}
.welcome{padding: 0px 15px;}
.welcome{background-size: contain;}
.welcome .headline{font-size: 280%;}
.tips{position: relative; left: auto; bottom: auto;}
.tips a{font-size: 100%;}

.advantages{padding: 60px 15px;}
.advantages li{padding: 15px 15px 15px 75px; background: 15px 15px no-repeat; background-size: 45px 45px;}

.video{padding: 45px 15px;}

.select-model{padding: 30px 0px;}
.select-model div{padding: 30px 15px;}

.guarantee{padding: 30px 15px 45px;}

.toaction{padding: 45px 15px;}

.more-advantages{padding: 45px 15px 30px;}

div.items h1{margin: 0px 15px 0px;}
div.items .select-result{width: 100%;}

.page{padding: 30px 15px;}

.model{padding: 30px 15px 0px;}

.copyright{display: block; width: 100%; padding: 0px 15px;}
.copyright a.logo{width: 80px; height: 30px;}
div.footer-contact{margin: 30px 0px; display: block; padding: 0px 5px;}
.footer-contact ul.links li{float: none;}
.designed{display: block; width: 100%; padding: 0px 15px;}
}
@media only screen and (max-width: 600px) {
ul.info li{width: 50% !important;}
.model .photo{width: 180px; height: 180px;}
.full div{display: block; text-align: center !important;}
.full-price{margin: 10px 0px;}
}
@media only screen and (max-width: 400px) {
.more-advantages li{width: 100%;}
ul.info li{width: 100% !important;}
}