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,font,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{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
.float-wrap {overflow:hidden}
.fl {float:left}
.fr {float:right}
.abs-wrap { position:relative;}
.abs-pos { position:absolute;}
.hidden { display:none; }
input, textarea, select {font-size:12px}
a {text-decoration:none}

#popup-wrap{bottom:0; left:0; top:0; right:0;  position:fixed; z-index:999; overflow:auto; background-color:rgba(0,0,0,.6); -webkit-overflow-scrolling: touch;-webkit-transform: translateZ(0px)}
#popup-wrap #popup{height:auto; max-width:980px; margin:20px auto; position:relative; overflow:hidden}
#popup-wrap #popup .popup-in{height:auto; max-width:980px; margin:20px auto; position:relative; background:#fff; overflow:hidden; border:1px solid #666666; box-shadow:0px 2px 14px rgba(0,0,0,.6);-moz-box-shadow:0px 2px 14px rgba(0,0,0,.6);-webkit-box-shadow:0px 2px 14px rgba(0,0,0,.6)}html {width:100%; min-height: 100%}
body {font-size:14px; min-height:100%; color:#010101; background: #010201; font-family: 'Roboto Condensed', sans-serif; overflow-y:scroll;}

#site-wrap {width: 100%; max-width: 960px; margin:0 auto; background: #f3f3f4;}

.site-padding {padding: 0 20px;}
.site-wrap {width: 100%; max-width: 1420px; margin: 0 auto;}

#debug {position: fixed; top: 20px; right: 20px; z-index: 1000; padding: 20px; background: #fff; font-size: 12px; line-height: 16px; color: #222; max-height: 400px; overflow-y: auto;}

a{color:#0091d5;}
a:hover{color:#00aeff;}

h1,.h1 {display: block; font-size: 30px; font-weight: 400;}
h2,.h2 {display: block; font-size: 25px; font-weight: 400;}
h3,.h3 {display: block; font-size: 20px; font-weight: 700;}

.roboto {font-family: 'Roboto', sans-serif;}

.basic-text {font-size: 13px; line-height: 19px;}
.basic-text p {padding-top: 10px;}
.basic-text ul, .basic-text ol {padding-left: 15px;}
.basic-text ul li {padding-top: 5px; list-style: disc;}
.basic-text ol li {padding-top: 5px; list-style: decimal;}

#top-bar {position: fixed; top: 0; left: 0; z-index: 100; max-height: 50px; width: 100%; background: #000;}
#top-bar .float-wrap {height: 100%;}
.img-bg {width: 100%; max-height: 45px;}
.img-logo {position: absolute; left: 20%; top: 50%; width: 30%; max-width: 100px; transform: translateY(-60%); -webkit-transform: translateY(-60%); -ms-transform: translateY(-60%); }

#menu-icon {display: block; position: absolute; left: 0; top: 0; height: 99%;}
#menu-icon svg {height: 100%; max-height: 50px;  background: #000000;}
#menu-icon:hover svg {opacity: 1; transition: all .5s;}

#top-phone {position: absolute; display: inline-block; right: 10%; top: 50%; color: #fff; text-decoration: none; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); }
#top-phone a {color: #fff; text-decoration: none;}

#top-bar-menu {position: fixed; top: 0; left: 0; z-index: 90; width: 100%; background: #fff; height: 0;}
#top-bar-menu-wrap {background: #fafafa;}
.top-bar-menu-ul {float: left; width: 50%;}
.top-bar-menu-ul li {border: 1px solid #eee;}
.top-bar-menu-ul li a {display: block; padding: 10px; color: #555; font-size: 16px; text-decoration: underline;}
.top-bar-menu-ul li a:hover {background: #eee;}
.top-bar-menu-ul li ul li {border: none;}
.top-bar-menu-ul li ul li a {padding: 7px 30px; font-size: 14px;}

@media screen and (max-width: 400px)
{
   .top-bar-menu-ul {float: none; width: 100%;}
}

#header {width: 100%;}
#header img {width: 100%;}


.big-block-title {color: #000; font-size: 30px; line-height: 30px; text-align: center; text-transform: uppercase; font-weight: 300; padding: 20px 0 10px;}
.block-title {color: #777; font-size: 20px; line-height: 22px; text-align: center; font-style: italic; font-weight: 300; padding-bottom: 20px;}

a.green-button {display: inline-block; font-size: 14px; color: #fff; background: #44b255; border-bottom: 2px solid #03703b; padding: 10px 20px; border-radius: 4px;}



.products-menu {background: #000;}
.products-menu-li {float: left; height: 50px; background: #000; text-align: center;}
.products-menu-li svg {display: inline-block; max-height: 40px; max-width: 80%; position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); }
.products-menu-li a {display: block; width: 100%; height: 100%;}
.products-menu-li a:hover, .products-menu-li.active a {background: #d8ab23; background: #44b255;}
.products-menu-li-1 {width: 50%;}
.products-menu-li-2 {width: 50%;}
.products-menu-li-3 {width: 33%;}
.products-menu-li-4 {width: 34%;}
.products-menu-li-5 {width: 33%;}

#products-info-wrap {height: 400px; background: #000;}

.product-info {height: 400px;}
.product-screen {height: 400px; width: 100%;}
.product-info .product-flacon {position: absolute; left: -8%; top: 10px; width: 50%; text-align: center;}
.product-info .product-flacon img {height: 300px;}
.product-info .product-text {position: absolute; left: 45%; top: 10px; width: 50%;}
.product-info .product-text .logoprice {font-size: 20px; color: #fff; font-weight: 300; padding: 10px 0; opacity: .6;}
.product-info .product-text .title {font-size: 24px; color: #fff; font-weight: 700;}
.product-info .product-text .text {font-size: 14px; line-height: 16px; color: #fff; font-weight: 300;}
.product-info .product-text .button  {padding: 10px 0 0;}
.product-info .product-text .comment  {font-size: 10px; line-height: 10px; color: #aaa; font-weight: 300; padding-top: 10px;}

.components-block {position: absolute; left: 10%; bottom: 30px; width: 90%;}
.components-switch {width: 100%; text-align: center;}
.components-switch li {display: inline-block; width: 25%; margin-right: 3%; vertical-align: top;}
.components-switch li .img {width: 90%; margin: 0 auto; text-align: center;}
.components-switch li .img img {max-width: 100%;}
.components-switch li .component-title {font-size: 12px; color: #fff; text-align: center;}


#effects-wrap {padding-top: 10px;}
#effects-wrap .effect {float: left; width: 33%; text-align: center; font-size: 12px; padding-bottom: 5px; font-weight: 300;}
#effects-wrap .effect img {max-width: 90%;}
#effects-wrap .effect .percent {font-size: 30px; color: #d2232a; font-weight: 700;}


#form {padding: 60px 0;}


.products-line .label {font-size: 12px; text-align: center; color: #777; padding-bottom: 10px;}
.product-cell {margin-top: 10px; height: 40px;}
.product-cell .img {float: left; width: 35%; text-align: right;}
.product-cell .img svg {height: 30px; opacity: .4;}
.product-cell .product-qty {float: left; width: 35%; text-align: center;}
.product-cell .product-qty a.plus-minus {display: inline-block; width: 30px; height: 30px; text-align: center; font-size: 14px; line-height: 30px; background: #44b255; color: #fff; vertical-align: top;}
.product-cell .product-qty input {display: inline-block;  width: 30px; height: 30px; text-align: center; font-size: 14px; line-height: 30px; background: #f3f3f4; border: none; vertical-align: top;}
.product-cell .price {float: left; width: 30%; text-align: left; font-size: 20px; font-weight: 300; padding-top: 5px;}

.fill-the-form-label {font-size: 12px; text-align: center; color: #777; padding: 10px 0;}
.line {margin-top: 10px;}
.line .label {float: left; width: 35%; text-align: right; margin-right: 5%; opacity: .5; padding-top: 5px;}
.line .input {float: left; width: 55%; }
.line .input input[type=text] {font-size: 16px; width: 100%; padding: 0;}
.line .input input[type=tel] {font-size: 16px; width: 100%; padding: 0;}
.line .input input[type=submit] {width: 1px; height: 1px; position: absolute; left: -10000px;}

.line .input .radio-option {padding: 5px 0;}
.line .input .radio-option input {float: left; width: 5%;}
.line .input .radio-option .radio-text {float: left; width: 90%; color: #fff; padding: 3px 0 0 0;}
.line .input .radio-option .radio-text .radio-title {font-size: 15px; color: #777; font-weight: 700;}
.line .input .radio-option .radio-text .radio-hint {font-size: 12px; padding-top: 3px; color: #aaa;}

#promocode {width: 90%;}
#promocode-check {padding-top: 5px;}
#promocode-check a {display: inline-block; padding: 5px 10px; background: #777; color: #fff; }
#promocode-loading {height: 0;}
#not-valid-promocode {font-size: 12px; color: #777; padding-top: 5px;}

#request-form .price-line {padding-top: 20px;}
#total-price {font-size: 20px; color: #777;}
#total-price span {font-size: 32px; color: #000;}

#order-old-price {text-decoration: line-through; color: #fb0000; opacity: .5;}
#order-old-price span {font-size: 20px; color: #fb0000;}

#order-discount-info {font-size: 14px; color: #333; padding-top: 5px;}


.ui-helper-hidden-accessible {display: none;}
.ui-autocomplete { position: absolute; top: 0; left: 0; z-index: 1000; cursor: default; max-height: 200px; overflow: hidden; overflow-y: scroll;}
.ui-menu {background: #fff; border: 2px solid #000; padding: 0;}
.ui-menu-item {background: #fff; border-bottom: 1px solid #eee;}
.ui-menu .ui-menu-item a {
   display: block;
   padding: 10px;
   color: #3b68df;
   font-size: 14px;
   background: #fff;
   min-height: 0; /* support: IE7 */
}
.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active {
   background: #fffddb;
   min-height: 0; /* support: IE7 */
}


#delivery-address-select {padding: 10px 0 0 30px;}


#pickpoint-select {padding: 10px 0 0 30px;}
#pickpoint-select a {display: inline-block; padding: 9px; text-align: center; color: #fff; text-decoration: none; background: #68b773; }
#postamat-html-title {color: #fff; font-size: 13px; line-height: 16px; padding: 10px; background:#79779f}


#before-and-after {margin-top: 50px;}
#before-and-after-ul {width: 90%; margin: 0 auto;}
#before-and-after-ul li {width: 100%; margin-bottom: 10px; text-align: center;}
#before-and-after-ul li img {width: 100%; max-width: 960px; }


#footer {background: #fff;}
.footer-link {display: block;}
.footer-link-logo {float: left; display: block; width: 30%; max-height: 60px; text-align: center; margin: 10px 0;}
.footer-link-text {float: left; width: 60%; margin-left: 10%; font-size: 12px; line-height: 16px; color: #666; padding: 15px 0 10px;}

#developer {padding: 20px 0; font-size: 12px; color: #aaa; text-align: center;}
#developer a {color: #aaa; text-decoration: underline;}



#preorder {text-align: center; padding: 100px 0;}
.preorder-text {padding-top: 10px; font-size: 14px; padding: 0 20px;}