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: #d6d5d6; font-family: 'Roboto Condensed', sans-serif; overflow-y:scroll;}
#site-wrap {width: 100%; min-width: 1260px; max-width: 1920px; margin:0 auto; background: #f3f3f4 url('../img/interface/body-bg.jpg') center top;}
.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;}

.green-button {display: block; height: 63px;}
.green-button .yb-left {float: left; display: block; width: 10px; height: 63px; font-size: 0;}
.green-button .yb-left img {width: 10px; height: 63px; background: url('../img/interface/green-button-bg.png') no-repeat 0 0;}
.green-button:hover .yb-left img {background-position: 0 -210px;}
.green-button .yb-right {float: left; display: block; width: 10px; height: 63px; font-size: 0;}
.green-button .yb-right img {width: 10px; height: 63px; background: url('../img/interface/green-button-bg.png') no-repeat 0 -140px;}
.green-button:hover .yb-right img {background-position: 0 -350px;}
.green-button .yb-content {float: left; display: block; height: 63px; background: url('../img/interface/green-button-bg.png') repeat-x 0 -70px;}
.green-button:hover .yb-content {background-position: 0 -280px;}
.green-button .yb-content span {display: block; text-align: center; font-size: 20px; font-weight: 700; font-style: italic; color: #ffffff; padding-top: 12px; text-transform: uppercase; text-shadow: 0 1px 1px #337d3f;}


.waves {position: absolute; left: 0; bottom: 0; z-index: 100; width: 100%; height: 30px;}
.hr {width: 100%; height: 2px; background: url('../img/interface/hr.png') 0 0 repeat-x;}

#header {position: absolute; left: 0; width: 100%; z-index: 20;}
#header-image {position: fixed; left: 0; top: -80px; width: 100%; min-width: 1400px; z-index: 10; background: #c1c1c2;}
#header-sand {position: absolute; left: 0; top: 0; width: 100%; height: auto;}
#header-logo {position: absolute; left: 0; top: 60px; z-index: 15; height: auto;}
#header-text {position: absolute; left: 0; top: 350px; font-size: 36px; line-height: 40px; font-weight: 400; font-style: italic; color: #000; margin-left: 15%; text-shadow: 0 1px 1px #fff; letter-spacing: -1px;}
#header-text-comment {position: absolute; left: 0; top: 600px; font-size: 16px; line-height: 21px; font-weight: 400; color: #000; margin-left: 15%;}
#header-text p {padding-top: 15px;}
#header-waves {background: url('../img/interface/waves.png') 0 0 repeat-x;}

#content-wrap {background: #c1c1c2; position: absolute; width: 100%; left: 0; top: 0; z-index: 30; background: #f3f3f4 url('../img/interface/body-bg.jpg') center top}
#benefits {background: url('../img/interface/benefits-shells.png') left top no-repeat; padding-bottom: 70px;}
#benefits .title {float: left; width: 28%; padding-top: 70px; font-size: 40px; line-height: 48px; font-style: italic; color: #000; font-weight: 300; text-transform: uppercase;}
#benefits .title strong {font-weight: 700;}
#benefits .benefit {float: left; width: 24%; padding-top: 10px; text-align: center; font-size: 21px; color: #000; font-weight: 300;}

#products {}

#products-waves {position: absolute; left: 0; bottom: 0; z-index: 100; width: 100%; height: 35px; background: url('../img/interface/products-waves.png') 0 0 repeat-x;}

#products-switch-bg {position: absolute; left: 0; top: 0; z-index: 100; height: 60px; width: 100%; background: #fff;}
#products-switch {margin: 0 auto; height: 60px; }
#products-switch li {position: absolute; top: 0; font-size: 20px; color: #fff; text-align: center; height: 60px; cursor:pointer;}
#products-switch li img {width: 100%;}
#products-switch li .logo-regular {display: block;}
#products-switch li .logo-hover {display: none;}
#products-switch li.active .logo-regular, #products-switch li.hover .logo-regular {display: none;}
#products-switch li.active .logo-hover, #products-switch li.hover .logo-hover {display: block;}

#products-switch li.active {cursor:default;}


#products-switch li:before,#products-switch li:after {content: ''; width: 0; height: 0; position: absolute;}
#products-switch li:before { border-top: 60px solid transparent; top: 0; left: -15px;}
#products-switch li:after { border-bottom: 60px solid transparent; top: 0; right: -15px;}

#product-switch-1 {background: #fff;}
#product-switch-1.active, #product-switch-1.hover {background: #332c69;}
#product-switch-1.active:before, #product-switch-1.hover:before { border-right: 15px solid #332c69;}
#product-switch-1.active:after, #product-switch-1.hover:after {  border-left: 15px solid #332c69;}

#product-switch-2 {background: #fff;}
#product-switch-2.active, #product-switch-2.hover {background: #006b9e;}
#product-switch-2.active:before, #product-switch-2.hover:before { border-right: 15px solid #006b9e;}
#product-switch-2.active:after, #product-switch-2.hover:after {  border-left: 15px solid #006b9e;}

#product-switch-3 {background: #fff;}
#product-switch-3.active, #product-switch-3.hover {background: #351d13;}
#product-switch-3.active:before, #product-switch-3.hover:before { border-right: 15px solid #351d13;}
#product-switch-3.active:after, #product-switch-3.hover:after {  border-left: 15px solid #351d13;}

#product-switch-4 {background: #fff;}
#product-switch-4.active, #product-switch-4.hover {background: #0f0f0f;}
#product-switch-4.active:before, #product-switch-4.hover:before { border-right: 15px solid #0f0f0f;}
#product-switch-4.active:after, #product-switch-4.hover:after {  border-left: 15px solid #0f0f0f;}

#product-switch-5 {background: #fff;}
#product-switch-5.active, #product-switch-5.hover {background: #0f6e1c;}
#product-switch-5.active:before, #product-switch-5.hover:before { border-right: 15px solid #0f6e1c;}
#product-switch-5.active:after, #product-switch-5.hover:after {  border-left: 15px solid #0f6e1c;}

.product-info {width: 100%; margin-top: 60px;}
.product-info .product-shells {position: absolute; left: 0; bottom: 0px; z-index: 10;}
.product-screen {width: 100%; max-width: 1400px; margin: 0 auto; z-index: 20;}
.product-screen .flacon {position: absolute; left: -1500px; top:0;}
.product-screen .logo {position: absolute; left: 43%; top:-500px;}
.product-screen .text {position: absolute; left: 43%; top:-500px; font-size: 24px; line-height: 30px; font-weight: 300; color: #fff; color: rgba(255,255,255,.6); width: 50%;}
.product-screen .button {position: absolute; left: 43%; top:1500px; width: 250px;}
.product-screen .comment {position: absolute; left: 43%; top:750px; font-size: 13px; line-height: 18px; font-style: italic; font-weight: 300; color: #fff; color: rgba(255,255,255,.5);}
.product-screen .components-block {position: absolute; left: 143%; top:270px; width: 560px; height: 360px;}
.product-screen .components-block .component-title {font-size: 36px; color: #fff; font-weight: 700; font-style: italic; padding-bottom: 6px;}
.product-screen .components-block .component-latin-title {font-size: 24px; color: #fff; font-weight: 300; font-style: italic; padding-bottom: 10px;}
.product-screen .components-block .component-text {font-size: 16px; line-height: 24px; color: #fff; color: rgba(255,255,255,.6); font-weight: 300; width: 370px;}
.product-screen .components-block .component-img {position: absolute; top: -30px; left: 350px;}
.product-screen .components-block .components-switch {position: absolute; left: 0; bottom: 0; width: 570px;}
.product-screen .components-block .components-switch li {float: left; width: 190px; opacity: .5; cursor: pointer;}
.product-screen .components-block .components-switch li.active {opacity: 1; cursor: default;}
.product-screen .components-block .components-switch li .img {float: left; width: 80px; height: 80px; border: 1px solid #fff; border-radius: 80px;}
.product-screen .components-block .components-switch li .title {float: left; width: 90px; margin: 19px 0 0 6px; font-size: 18px; line-height: 21px; color: #fff; font-style: italic; font-weight: 300;}

#effects {padding: 80px 0;}
#effects .title {color: #000; font-size: 72px; line-height: 72px; font-style: italic; text-align: center; text-transform: uppercase; font-weight: 300; padding-bottom: 50px;}
#effects .title strong {font-weight: 700;}
#effects-wrap {width: 960px; margin: 0 auto;}
#effects-wrap .effect {float: left; width: 33%; text-align: center; font-size: 30px; color: #000;  opacity: 0;}
#effects-wrap .effect .percent {font-size: 72px; color: #d2232a; font-style: italic; font-weight: 700; font-family: 'Roboto Condensed', sans-serif; }
#effects-wrap .effect .img img {padding-bottom: 10px;}

#before-and-after {padding: 20px 0;}
#before-and-after .title {color: #000; font-size: 48px; line-height: 48px; font-style: italic; text-align: center; font-weight: 300;}
#before-and-after .title span {color: #bcbdd1; text-shadow: 0 1px 1px #333;}
#slider-wrap {width: 100%; max-width: 1280px; height: 230px; margin: 10px auto;}
#slider-width-wrap {margin: 0 auto;}
#slider {height: 230px;}
#slider li {position: absolute; left: 0; top: 0; height: 230px;}
#slider li img {width: 100%;}
.slider-arrow {position: absolute; top: 90px; width: 24px; height: 56px;}
.slider-arrow img {width: 24px; height: 56px; background-image: url('../img/interface/slider-arrows.png');}
#slider-left {left: 0;}
#slider-left img {background-position: 0 0;}
#slider-left:hover img {background-position: -25px 0;}
#slider-right {right: 0;}
#slider-right img {background-position: 0 -60px;}
#slider-right:hover img {background-position: -25px -60px;}

#feedback {}
#feedback .title {color: #000; font-size: 72px; line-height: 72px; font-style: italic; text-align: center; text-transform: uppercase; font-weight: 300; padding: 40px 0 0;}
#feedback-switches-wrap {max-width: 1238px; margin: 0 auto;}
#feedback-switches {padding: 40px 0; width: 110%;}
#feedback-switches li {float: left; width: 25%; opacity: .5; cursor: pointer;}
#feedback-switches li.active {opacity: 1; cursor: default;}
#feedback-switches li .img {float: left; width: 34px; text-align: center; padding-top: 2px;}
#feedback-switches li .img img {width: 32px; height: 30px; border-radius: 6px; box-shadow: 0 1px 2px #8b8a8a;}
#feedback-switches li .name {float: left; margin-left: 10px; font-size: 20px; color: #404040; padding-top: 5px;}
#feedback-switches li .name a {color: #28a9c9; text-decoration: underline;}
#feedback-switches li .name a:hover {color: #16a7cb;}
.feedback {font-size: 28px; line-height: 36px; color: #000; text-align: center; width: 60%; min-width: 800px; margin: 0 auto; font-weight: 300; padding-bottom: 26px;}

#instagram {}
#instagram-grid {padding: 50px 20px;}
#instagram-grid li {float: left; width: 230px; height: 230px;}
#instagram-grid li img {width: 100%; height: 100%;}

.flip-container {-webkit-perspective: 1000; -moz-perspective: 1000; perspective: 1000; background: #211c4f; }
.flip-container:hover .flipper, .flip-container.hover .flipper, #flip-toggle.flip .flipper {-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);transform: rotateY(-180deg);filter: FlipH;-ms-filter: "FlipH";}
.flip-container, .front, .back {width: 230px; height: 230px;}
.flipper {-webkit-transition: 0.6s;-webkit-transform-style: preserve-3d;-moz-transition: 0.6s;-moz-transform-style: preserve-3d;transition: 0.6s;transform-style: preserve-3d;position: relative;}
.front, .back {-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;backface-visibility: hidden;position: absolute;top: 0;left: 0;}
.front {background: lightgreen;z-index: 2;}
.back {background: #252525;-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);transform: rotateY(-180deg);}

#map {padding: 40px 0; width: 1256px; margin: 0 auto;}
#map-wrap {float: left; width: 916px; height: 553px; background: url('../img/interface/map.png') 0 0 no-repeat; margin-right: 40px}
.map-pointer {position: absolute; width: 32px; height: 54px; background: url('../img/interface/map-pointer.png') 0 0 no-repeat; z-index: 10;}
.country-bubble {position: absolute; width: 80px; height: 45px; background: #252525;  z-index: 10; cursor: pointer; text-align: center;}
.country-bubble .flag {padding-top: 2px;}
.country-bubble .text {width: 310px; margin: 0 auto; font-size: 21px; line-height: 24px; color: #fff; padding: 0; text-align: center; font-weight: 300;}

#twitter-wrap {float: left; width: 300px;}

#form-waves-blue {float: left; width: 70%; height: 35px; background: url('../img/interface/form-waves-blue.png') right top repeat-x;}
#form-waves-green {float: left; width: 30%; height: 35px; background: url('../img/interface/form-waves-green.png') left top repeat-x;}
#form-or {position: absolute; left: 70%; top: 160px; margin-left: -40px;}

/*#form-wrap-blue {float: left; width: 70%; height: 1400px; background: #262262;}*/
#form-wrap-blue {float: left; width: 70%; height: 1400px; background: #222;}
#form-wrap-blue .title {width: 80%; max-width: 800px; min-width: 610px; margin: 35px 60px 0 auto; font-size: 36px; line-height: 48px; font-weight: 300; font-style: italic; color: #fff; text-align: center; }
#form-wrap-blue .title strong {font-weight: 700;}

#request-form {width: 460px; margin: 20px 20% 0 auto;}
#request-form .line {padding-bottom: 6px;}
#request-form .line .label {float: left; width: 115px; font-size: 16px; line-height: 21px; padding-top: 3px; color: #fff; font-weight: 300;}
#request-form .line .label span {color: #fff; }
#request-form .line .label label.error {color: #d01b24;}
#request-form .line .input {float: left; width: 344px;;}
#request-form .line .input input[type=text] {width: 100%; font-size: 14px; padding: 8px 5px; background: #E6E6FA/*#7d7aa1*/; border: none; /*color: #fff;*/}
#request-form .line .input input[type=text]:focus {}
#request-form .line .input input[type=text].error {background: #7d597f; background: rgba(255,226,226,.7);}
#request-form .line .input input[type=tel] {width: 100%; font-size: 14px; padding: 8px 5px; background: #E6E6FA/*#7d7aa1*/; border: none; /*color: #fff;*/}
#request-form .line .input input[type=tel]:focus {}
#request-form .line .input input[type=tel].error {background: #7d597f; background: rgba(255,226,226,.7);}
#request-form .line .input select {width: 100%; background: #777; font-size: 14px; padding: 8px 5px;  border: none; color: #fff;}
#request-form .line .input input[type=submit] {width: 1px; height: 1px; opacity: 0;}
#request-form .line .input .radio-option {padding: 5px 0;}
#request-form .line .input .radio-option input {float: left;}
#request-form .line .input .radio-option .radio-text {float: left; width: 300px; color: #fff; padding: 3px 0 0 10px;}
#request-form .line .input .radio-option .radio-text .radio-title {font-size: 15px; }
#request-form .line .input .radio-option .radio-text .radio-hint {font-size: 12px;padding-top: 3px; color: #ddd; color: rgba(255,255,255,.5);}
.form-error {padding: 20px; margin-bottom: 10px; border: 1px solid #d01b24;}


#request-form .products-line {width: 660px; padding-bottom: 30px; margin-left: -87px}
#request-form .products-line .label {font-size: 14px; line-height: 21px; padding-top: 10px; color: #fff; font-weight: 300; text-align: center;width:297px;margin:0 auto;}
#request-form .products-line .label.error {background: #7d597f;}
#request-form .products-line .products-wrap {padding-top: 10px;width: 660px;}
#request-form .products-line .products-wrap .product-cell {float: left; width: 100px; margin-right: 10px; text-align: center;}
#request-form .products-line .products-wrap .product-cell .img {height: 25px;}
#request-form .products-line .products-wrap .product-cell .product-qty {width: 100px; padding-top: 10px;}
#request-form .products-line .products-wrap .product-cell .product-qty .plus-minus {float: left; background: #5a5788; background: rgba(255,255,255,.3); color: #fff; text-decoration: none;}
#request-form .products-line .products-wrap .product-cell .product-qty .plus-minus:hover { background: rgba(255,255,255,.5);}
#request-form .products-line .products-wrap .product-cell .product-qty .plus-minus span {display: block; width: 31px; height: 30px; font-size: 28px; line-height: 30px; font-family: Arial;}
#request-form .products-line .products-wrap .product-cell .product-qty input {float: left; width: 38px; height: 30px; border: none; background: #ccc; padding: 0 !important; margin: 0 !important; font-size: 20px; line-height: 30px; text-align: center; color: #000;}
#request-form .products-line .products-wrap .product-cell .price {padding-top: 6px; font-size: 16px;  color: #fff; color: rgba(255,255,255,.5);}
#request-form .products-line .products-wrap .product-cell .price span {font-size: 18px; color: #fff;}

#request-form .price-line {padding-top: 20px;}
#total-price {font-size: 20px; color: #fff; color: rgba(255,255,255,.5);}
#total-price span {font-size: 32px; color: #fff;}

#order-old-price {text-decoration: line-through;}
#order-old-price span {font-size: 20px; color: #fff; color: rgba(255,255,255,.5);}

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

#promocode {float: left; width: 200px !important;}
#promocode.valid {background: #aaf5b7 !important; color: #262262 !important;}

#promocode-check {float: left; width: 100px; padding: 2px 0 0 5px;}
#promocode-check a {display: block; padding: 9px; text-align: center; color: #fff; text-decoration: none; background: #5a5788; background: rgba(255,255,255,.3); }
#promocode-check a:hover {background: #68649b;  background: rgba(255,255,255,.5);}

#promocode-loading {float: left; width: 0px;}
#promocode-loading img {padding: 8px 0 0 10px;}
#not-valid-promocode {padding-top: 5px; font-size: 14px; color: #fff; color: rgba(255,255,255,.5);}


#preorder {width: 80%; max-width: 800px; min-width: 610px; margin: 0 60px 0 auto; text-align: center;}
.preorder-title {padding-top: 20px; font-size: 28px; font-weight: 700; color: #fff;}
.preorder-text {padding: 10px 0 30px; font-size: 14px; color: #fff; text-align: center;}

#form-comment {width: 80%; max-width: 800px; min-width: 610px; margin: 5px 60px 0 auto; font-size: 13px; color: #fff; color: rgba(255,255,255,.5); text-align: center;}

/*#form-wrap-green {float: left; width: 30%; height: 1400px; background: #4fbc61;}*/
#form-wrap-green {float: left; width: 30%; height: 1400px; background: #d8ab23;}
#form-wrap-green .title {width: 270px; margin: 35px auto 0; font-size: 24px; line-height: 42px; font-weight: 300; font-style: italic; color: #fff; text-align: center; }
#form-wrap-green .title strong {font-size: 36px; line-height: 36px; font-weight: 700;}
#form-wrap-green ul {width: 220px; margin: 15px auto 0; }
#form-wrap-green ul li {background: url('../img/interface/form-links-shell.png') 10px 0 no-repeat; padding: 1px 0 15px 50px; font-size: 24px; color: #000; font-weight: 700;}
#form-wrap-green ul li a {color: #000; text-decoration: underline;}

#buy-comment {width: 270px; margin: 25px auto 0; font-size: 13px; line-height: 16px; color: #fff; color: rgba(255,255,255,.5); text-align: center;}

#footer {background: #fff; padding: 25px 0 50px;}
#footer-logo {float: left; width: 20%; text-align: center;}
#footer-copyright {float: left; width: 50%; font-size: 14px; line-height: 16px; font-style: italic; color: #898989; font-family: Arial; padding-top: 25px}
#developer {float: left; width: 30%; font-size: 12px; line-height: 16px; font-weight: 300; color: #898989; font-family: Arial; padding-top: 25px; text-align: right;}
#developer a {color: #777; text-decoration: underline; }

.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}

.logoprice {
color: rgba(255,255,255,.6);
top: 74px;
position: absolute;
left: 84%;
font-size: 35px;
font-family: 'Roboto';
}
@media only screen and (min-width: 320px) and (max-width: 1000px) {
.logo {
max-width:450px;
}
}