body{font-family: Lato,arial,verdana,tahoma;
    font-size: 16px;
    color: #707070;
    /*background: url("../img/768_krok2.jpg") no-repeat center 582px ; opacity:0.6;*/
    background: url("../images/top-3-pasek.gif") repeat-x;
}
.free-text strong{
    font-size: 14px!important;
}
article{width: 100%; max-width: 768px; box-sizing:border-box; padding:0 1.2em; margin:0 auto;}
header article { background: url("../images/top-3.png") 0 center no-repeat; height: 86px;    }
header .logo{background: url("../images/logo.png") 0 center no-repeat; width:236px;
height: 78px; padding:0.4em 0; display: inline-block; margin-top: 10px; }
header .slogan{width: 65%; float:right; list-style: none; margin:1.1em 0;}
header .slogan li{float: left; width: 54%; display: inline-block;
vertical-align: middle; box-sizing:border-box; padding: 0 0 0 40px; height:35px;margin:0 0 0.5em 0; font-size: 0.88em;}
header .slogan li.s1{background:url("../img/c_security.png") no-repeat; width: 46%; line-height: 1;}
header .slogan li.s2{background:url("../img/c_calendar.png") no-repeat; line-height: 35px;}
header .slogan li.s3{background:url("../img/c_shield.png") no-repeat; width: 46%; }
header .slogan li.s4{background:url("../img/c_quality.png") no-repeat;}
article > h2{font-size: 1.35em; color:#000; margin:0.7em 0 0 0;}
.prawo{float:right;}
.lewo{float:left;}
ul{list-style: none;}
article > p{font-size:1.14em; padding:0.4em 0;}
.step{margin-top:0.2em; position: relative;}

h3{background:#d0d9e2; color:#2d4467;
padding:1.14em 1.2em; font-size: 1.14em; font-weight: 400; margin:0.2em 0; text-transform: uppercase; }
h3.active{background:#2d4467 url("../img/arrow_up.png") 98% center  no-repeat; color:#fff;}
h3.error{background:#B10505 url("../img/arrow_up.png") 98% center  no-repeat;}
h3.completed{background:#8DBBEC url("../img/arrow_down+dark.png") 98% center  no-repeat; color:#2D4467;  font-size: 1.14em; font-weight: 400; cursor: pointer;}
h3 span{font-weight:700; padding-right:1em;}
.packProducts li {width: 32.33%; display:inline-block;
vertical-align: top; border: solid 1px #c1c1c1; margin:0.5em 0;
box-sizing:border-box; padding:0.4em 0.4em; height: 276px; position:relative; cursor: pointer;}
.packProducts .num2{margin:0.5em 1.5%;}
.packProducts li.selected,.packProducts li:hover {box-shadow: 0px 1px 10px #888888; background:#F0F7FF; }
.packProducts li.selected h4,
.orderPay li.selected h4,
.packProducts li:hover h4,
.orderPay li:hover h4{color:#000;}
.packProducts li h4, .orderPay li h4{color:#8dbbed; text-transform: uppercase; font-size: 1.2em; padding-left:0.2em;}
.packProducts li h4 span s{color: #d0d9e2; font-weight: 400;}
.packProducts li h4 span{color:#000; display: block;}
.packProducts li h4 span span{font-size:0.9em; text-transform: none; background:#abd233; color:#fff;
 padding:0.2em 0.5em; font-weight: 400; line-height: 1.4;}
.packProducts li .select, .orderPay li .select{background: url("../img/radiobutton_NA.png") no-repeat; width:40px; height: 40px;
display: inline-block; vertical-align: top; margin-top:0.3em;}
.packProducts li.selected .select,
.packProducts li:hover .select,
.orderPay li.selected .select,
.orderPay li:hover .select{background: url("../img/radiobutton_A.png") no-repeat;}
.packProducts li .title, .orderPay li .title{width: 79%; height:100px; display: inline-block; vertical-align: top;}
.packProducts li .information{width: 66%; display: inline-block; vertical-align: top; line-height: 1; margin-top: 20px; margin-left: 1em; }
.packProducts li .information h5{font-weight: 400; font-size: 1.1em; padding-bottom: 5px;}
.packProducts li .information p{font-size: 0.88em; line-height: 1.3;}
.packProducts li .information .free_delivery{display:none;}
.packProducts li .img{ vertical-align: bottom; display: inline-block;
text-align: right; position:absolute; right:0.5em; bottom: 3em;}

.packProducts li.num1 .img{background: url("../img/produkt1.png") no-repeat center center /contain; width: 98px; height: 110px;}
.packProducts li.num2 .img{background: url("../img/produkt2.png") no-repeat center center /contain; width: 98px; height: 110px;}
.packProducts li.num3 .img{background: url("../img/produkt3.png") no-repeat center center /contain; width: 98px; height: 110px;}
.packUpsell .img{background: url("../images/produkt-MX.png") no-repeat center center; width: 92px; height: 83px; }

.packUpsell{padding:1.5em 0; width: 50%; position: relative;  display: inline-block; vertical-align: bottom; margin-bottom: 1em;}
.packUpsell .select, .processing li .select{background: url("../img/check_box_NA.png") no-repeat; background-size:cover; width:30px; height: 30px; cursor: pointer;
display: inline-block; vertical-align: top; margin-top:0.3em;}
.processing li .select.active, .packUpsell li.active .select{background: url("../img/check_box_A.png") no-repeat; background-size:cover;}
div h2{font-size: 1.16em; font-weight: 400; padding-top:1em;}
.processing li a{color:#8DBBEC; text-decoration: none;}
.packUpsell h4{width: 80%; display:inline-block; vertical-align: top;
padding-left:1em; font-weight: 300; font-size: 1.25em; line-height: 1.08;}
.packUpsell h4 span{display: block;}
.packUpsell h4 span span{display: inline-block; font-style: italic;}
.packUpsell .information{width: 62%; display: inline-block;}
.packUpsell p{ padding-top:1em; line-height: 1.5;}
.packUpsell li .img{width: 23%; vertical-align: bottom; display: inline-block;
text-align: right; position:absolute; right:0.5em; bottom: 1.5em; min-width: 88px;}
div.bt{width: 32%; text-align: center; position: relative;  display: inline-block;
vertical-align: bottom; margin:1em 0 0.7em 0;}
#step1 div.bt{position:absolute; right:0em; bottom: 1em; margin:0;}
button.bt{color:#fff; text-transform: uppercase; text-align: center; text-decoration: none;
 padding:0.6em 0; width: 100%; display: block; font-weight:700; font-size:1.3em; border:none;
 /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e8af3e+0,b48239+100 */
background: #e8af3e; /* Old browsers */
background: -moz-linear-gradient(top,  #e8af3e 0%, #b48239 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #e8af3e 0%,#b48239 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #e8af3e 0%,#b48239 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8af3e', endColorstr='#b48239',GradientType=0 ); /* IE6-9 */
 }
 .step button.bt{margin-bottom: 0.6em;}
 div.bt > span{background: url("../img/ICO_SHIELD.png") no-repeat left center; padding:0 0 0 1.5em ;}

.orderPay li {width: 49%; display:inline-block;
vertical-align: top; border: solid 1px #c1c1c1; margin:0.5em 0;
box-sizing:border-box; padding:0.4em 0.4em; min-height: 276px; position:relative;}
.orderPay li.selected,.orderPay li:hover { background:#F0F7FF; }
.orderPay li:nth-child(2n){margin-left:2%;}
.orderPay li .title{height: auto; padding:0.2em 0 0.5em 0; vertical-align: middle;}
.orderPay li .information{padding:0 0.5em 0 2em; color:#000;}
.orderPay li h4{text-transform: none;}
.orderPay li .information p{padding:0.5em 0; border-top:solid 1px #c1c1c1; }
.orderPay li .information p span{width:43%;display: inline-block; vertical-align: top;}
.orderPay li .information p strong{width: 55%; display: inline-block; line-height: 1;}
#SofortOption.otherPayment{padding-bottom: 25px !important;}
#PayPal_DEOption.otherPayment{padding-bottom: 30px !important;}
.otherPayment:after{
        position: absolute;
    bottom: 0px;
        right: 20px;
        z-index:9;
        border-radius:6px;
        content:'';
    display:block;
}
#PayPal_DEOption.otherPayment:after
{
    width:162px;
    height:42px;
    background:url(../includes/platnosci_icon/payment_paypal.png) no-repeat center;
    background-size: contain;
}
#SofortOption.otherPayment:after{
    width:84px;
    height:46px;
    background:url(/includes/platnosci_icon/sofort.png) no-repeat center;
    background-size: contain;
}
#GiroPayOption.otherPayment:after {
    width: 65px;
    height: 30px;
    background: url(/includes/platnosci_icon/giropay.png) no-repeat center;
}

#hc24Option.otherPayment:after
{
    width:162px;
    height:42px;
    background:url(/includes/platnosci_icon/pay-now-ico_HerbalCenter.png) no-repeat center;
    background-size: contain;
}

footer{background: #F8F8F8; margin:1.5em 0 0 0;}
footer article{text-align: center; padding:1.5em 0;}
footer article a{color:#2d4467;}
footer article p{font-size: 1em; padding:0.5em;}

/*formularz*/
#step2{color:#000;}
ul.form li{padding:0.6em 0 0.45em 0; float:left; width: 100%;}
ul.form li .infoError{display:none; }
ul.form li input, ul.form li select{width: 100%; padding:0.8em; box-sizing:border-box; border: solid 1px #000; color:#000; }
ul.form li select {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #e8e8e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 0%,#e8e8e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 0%,#e8e8e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e8e8e8',GradientType=0 ); /* IE6-9 */
}
ul.form li label{color:#000; padding-bottom: 0.1em; display: block; font-size: 100%;}
ul.form li h4{color:#000;font-size: 1.35em; text-transform: uppercase; padding-top:0em;}
ul.form li:nth-child(6) h4{padding-top:0.5em;}
ul.form li:nth-child(7) p{padding-bottom: 0.4em;}
span.klodka{color:#2D4466; margin:0.7em 0; display: block;}
span.klodka img{margin:-10px 0.5em 0 0}
ul.form li span{font-style: italic; color:#707070;}
ul.form li span.desclabel{display:none;}
ul.form li .input input, ul li .input select{font-style: normal;}
ul.form li.text{padding:0; float:none; clear:both;}
ul.form li.text p{font-style: italic; color:#707070; font-size: 100%;}

ul.form li.error label{color:#FF0301; }
ul.form li.error input{border:solid 1px #FF0301;}
ul.form li.error .infoError{display: block; color:#FF0301; font-style:normal; transition: 0.3s linear all; font-weight: 700; font-size:1em; }
ul.form li.error .infoError:before{content:''; display: inline-block;
background: url("../img/arrow_error.png") no-repeat center center; width: 23px; height: 14px; padding-right:0.5em;}
ul.form li .infoError.error{display:block; font-size:1em; width: 50%; font-style: normal;
    transition: 0.3s linear all;
    font-weight: 700; color:transparent;}
/*
ul.form li.apartmentNumber label:after{content:'(falls zutreffend)'; font-size:1em; display: inline-block; color:#707070; font-style: italic;}
*/
ul.form li.email{width: 49%;  margin-right:2%;}
ul.form li.firstName{width: 49%}
ul.form li.lastName{width: 49%; margin-right:2%;}
ul.form li.telephone{width: 49%;}
ul.form li.streetName{width: 49%; margin-right:2%;}
ul.form li.streetNumber{width: 17%; margin-right:2%;}
ul.form li.apartmentNumber{width: 30%;}
ul.form li.postalCode{width: 17%; margin-right:2%;}
ul.form li.city{width: 25%; margin-right:7%;}
ul.form li.country{width: 49%;}

.processing .more{display:none;}
.summary{ border-right:none; margin:1em 0; width: 57%; min-height:298px; display:inline-block;
vertical-align: middle; beox-sizing:border-box; padding:1em; background:url("../img/summary.jpg") no-repeat; background-size:100% 100%;
box-sizing:border-box; position:relative; z-index:2; color:#000; }

/*.summary:before{content:''; display:inline-block; width: 4em; top:0.35em; right:-2.4em;
height: 55.5%; background:#F0F7FF; border-right: solid 1px #c1c1c1; position:absolute; z-index:-1;
transform:rotate(-25deg); -webkit-transform:rotate(-25deg);
-moz-transform:rotate(-25deg); -o-transform:rotate(-25deg);
}
.summary:after{content:''; display:inline-block; width: 4em; bottom:0.35em; right:-2.4em;
height: 55.5%; background:#F0F7FF; border-right: solid 1px #c1c1c1; position:absolute; z-index:-1;
transform:rotate(25deg); -webkit-transform:rotate(25deg);
-moz-transform:rotate(25deg); -o-transform:rotate(25deg);
}*/
.summary div{margin-bottom: 0.5em; width: 86%;}
.summary .suma{border-top:solid 1px #c1c1c1; font-size: 1.4em; text-transform: uppercase; font-weight: 700;}
.summary p{padding:0.3em 0; font-size: 1.1em;}
.summary p span{width: 80%; display:inline-block; vertical-align: top;}
.summary p strong{width: 18%; display:inline-block; vertical-align: top;}
.summary ul.processing{width: 86%;}
.summary .processing p{color:#707070; font-size: 0.85em; width: 85%; display: inline-block;
vertical-align: top; margin-left:1%;}
#step4 div.bt {width: 40%; float:none; vertical-align: middle; margin-top:3em; margin-left: 1em;}
#step4 div.bt > span{background: url("../img/c_shield.png") 0 5px no-repeat;  padding:1em 0 1em 3em; font-size: 0.9em;}

@media handheld,only screen and (max-width:600px){
    header .logo{background: url("../images/logo.png") 0 center no-repeat; background-size: contain; width:130px;
height: 55px; padding:0.5em 0; display: inline-block;}
    header article{padding:0 0.4em;}
    header .slogan{width: 60%; margin: 0.2em 0; }
    header .slogan li.s3 span{display:none; }
    header .slogan li.s1,header .slogan li.s3{width: 100%; line-height: 1;}
    header .slogan li.s2, header .slogan li.s4{display:none;}
    article{padding:0;}
    .packProducts li.selected, .packProducts li:hover{box-shadow:none; width: 100%;  border-top:none; border-right:none; border-left:none;}
    article > h2{display:none;}
    article > p{display:none;}
    .packProducts li{padding: 1em; border-bottom: solid 1px #c1c1c1;  min-height: 220px;
    margin:0; width: 100%; border-top:none; border-right:none; border-left:none; height: auto;}
    .packProducts li.num1{min-height: 190px;}
    .packProducts li.num2{min-height: 210px;}
    .packProducts .num2{margin:auto;}
    .packProducts li .img{right: 1em; bottom: 1em;}
    .packProducts li h4 span{display: block;}
    .packProducts li .title{height: auto;}
    .packProducts li .information h5{background:#c1c1c1; color:#fff; line-height: 1.5;
    padding:0 0.5em; display: inline-block;}
    .packProducts li .information .free_delivery{display: inline-block;
    background: url("../img/ico_delivery.png") 0.5em 0.5em no-repeat #abd233;
    padding-left:1.8em; font-size:1.1em; text-transform: none; color:#fff;
 padding:0.2em 0.5em; font-weight: 400; line-height: 1.4; margin:0.5em 0; padding-left:2em;}
 .packProducts li .img{bottom:0.5em; right: 0.75em;}
 .packProducts li.num3 .img{background: url("../img/produkt3.png") no-repeat center center /contain; width: 120px; height: 200px; }
.packProducts li.num2 .img{background: url("../img/produkt2.png") no-repeat center center /contain; width: 120px; height: 200px; }
.packProducts li.num1 .img{background: url("../img/produkt1.png") no-repeat center center /contain; width: 120px; height: 200px; }
.packUpsell .img{background: url("../images/produkt-MX.png") no-repeat center center; width: 88px; height: 150px;background-size:contain}

    .packProducts li h4 span span{display:none;}
    .upsell{padding:0em 1em; border-top:solid 2px #c1c1c1;}

    .packUpsell{width: 100%;}
    #step1 div.bt{float:none; width: 90%; position: relative; padding:0em 1em;}
    .step h3 span{padding-right: 0.5em;}
    .step h3{padding: 1.14em 1em;}
    ul.form li label{}
    ul.form li span.desclabel{display:block;}
    ul.form li span.desc{display:none;}
    ul.form{padding:0 1em;}
    ul.form li.email{width: 100%; margin:auto;}
    ul.form li.firstName{width: 100%;}
    ul.form li.lastName{width: 100%; margin-right:auto;}
    ul.form li.telephone{width: 100%;}
    ul.form li.streetName{width: 100%; margin-right:auto;}
    ul.form li.streetNumber{width: 37%; margin-right:2%;}
    ul.form li.apartmentNumber{width: 61%;}
    ul.form li.postalCode{width: 37%; margin-right:2%;}
    ul.form li.city{width: 61%; margin-right:auto;}
    ul.form li.country{width: 100%;}
    div.bt{float:none; width: 90%; position: relative; padding:0em 1em;}
    span.klodka{padding-left:1em;}
    .orderPay li{padding: 1em; border-top: solid 3px #c1c1c1;
    margin:0; width: 100%; border-bottom:none; border-right:none; border-left:none; height: auto; min-height:100%;}
    .orderPay li:nth-child(even){margin-left:0%;}
    .summary{width: 100%; background: #fff; border:none; margin-right:0; margin:0; padding-top:0;}
    .summary:before, .summary:after{display:none;}
    .summary div{width: 100%;}
    .summary ul.processing{width: 100%;}
    #step4 div.bt{float:none; width: 90%; position: relative; padding:0em 1em; margin:auto;}
    h3{padding:1.14em 0.8em;}
    h3 span{padding-right:0.2em;}

    ul.form li {  margin-top: 0px; }


    /*.orderPay li .title{width: 60%;}
    .otherPayment{padding-bottom: 0 !important;}
    .otherPayment:after{position:absolute; top:0; right:0;}*/

}

@media handheld,only screen and (max-width:320px){
    body{font-size: 15px;}
    header .logo{background: url("../images/logo.png") center center no-repeat; width:100%;
height: 55px; padding:0.5em 0; display: inline-block;}
    header .slogan{width: 100%; float:none;}
    header .slogan{display:none; }
    form{margin-top:0;}
    h3{font-size: 1.1em;}
    .step h3{font-size: 1.1em;}
    .packProducts li .title{width: 65%;}
    .packProducts li .img{bottom:0.5em; right: 0;}
    .packProducts li.num3 .img{background: url("../img/produkt3.png") no-repeat center center /contain; width: 98px; height: 182px;}
.packProducts li.num2 .img{background: url("../img/produkt2.png") no-repeat center center /contain; width: 98px; height: 182px;}
.packProducts li.num1 .img{background: url("../img/produkt1.png") no-repeat center center /contain; width: 98px; height: 182px;}
.packUpsell .img{background: url("../images/produkt-MX.png") no-repeat center center; width: 87px; height: 149px;background-size:contain}

    ul.form li {  margin-top: 0px; }

}
/*
ul.form li.error { margin-bottom: -30px; }
ul.form li { margin-top: 30px; }
*/

ul.form li.postalCode { clear: both; }

.masscollectcost,
.deliverycost { color: green; }

.free-text strong{
    font-size: 13px!important;
}

.icon-error div.input {
    position: relative;
}

.icon-error div.input:before {
    content: '\f058';
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: "FontAwesome";
    font-size: 20px;
    z-index: 200;
    color: #008000;
    opacity: 0;
    transition: all 0.5s;
}

.icon-error.error div.input:before {
    opacity: 1;
    color: red;
    content: '\0f06a';
}

.green.icon-error div.input:before {
    opacity: 1;
    color: #008000;
    content: '\f058';
}

.icon-error.error input.input,
.icon-error.error input.firstName,
.icon-error.error input.lastName,
.icon-error.error input.streetName,
.icon-error.error input.streetNumber,
.icon-error.error input.apartmentNumber,
.icon-error.error input.city,
.icon-error.error input.fvPostalCode,
.icon-error.error input.fvCompanyName,
.icon-error.error input.fvStreetName,
.icon-error.error input.fvStreetNumber,
.icon-error.error input.fvApartmentNumber,
.icon-error.error input.fvCity {
    border: 1px solid #c00!important;
    background: #fee !important;
}

.green.icon-error input.input,
.green.icon-error input.firstName,
.green.icon-error input.lastName,
.green.icon-error input.streetName,
.green.icon-error input.streetNumber,
.green.icon-error input.apartmentNumber,
.green.icon-error input.city,
.green.icon-error input.fvPostalCode,
.green.icon-error input.fvCompanyName,
.green.icon-error input.fvStreetName,
.green.icon-error input.fvStreetNumber,
.green.icon-error input.fvApartmentNumber,
.green.icon-error input.fvCity {
    border: 1px solid #090!important;
    background: #efe !important;
}

.ui-menu {
    list-style-type: none;
    padding: 15px;
    background-color: #fff;
    display: inline-block;
    border: 1px solid #C7C7C9;
    border-top: 0;
    z-index: 300;
}

.ui-menu li {
    margin-bottom: 5px;
    transition: all 0.5s;
}

.ui-menu li:hover {
    opacity: 0.5;
    cursor: pointer;
}

.ui-menu li:last-child {
    margin-bottom: 0;
}

.ui-helper-hidden-accessible,
ul.form li.error .infoError {
    display: none!important;
}