@font-face {
    font-family: 'prata-regular';
    src: url('../fonts/prata-regular-webfont.woff2') format('woff2'),
        url('../fonts/prata-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'karla-regular';
    src: url('../fonts/karla-regular-webfont.woff2') format('woff2'),
        url('../fonts/karla-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


body {
    background-color: #f0f0f0;
}

section#ask-sample a,
section#ask-sample a:focus,
section#ask-sample a:hover,
section#ask-sample a:visited,
section#ask-sample a:active,
.legal a,
.legal a:focus,
.legal a:hover,
.legal a:visited,
.legal a:active{
    color: #000;
    text-decoration: underline;
}

.cc-cookies a,
.cc-cookies a:focus,
.cc-cookies a:hover,
.cc-cookies a:visited,
.cc-cookies a:active{
    color: #fff;
}

body.legal .content {
    margin: 30px 50px;
}
body.legal h1 img {
    width: 200px;
    height: auto;
}
body.legal h2 {
    margin-top: 30px;
    font-size: 20px;
    text-decoration: underline;
}
body.legal h4 {
    margin-bottom: 0;
}

body.legal p,
body.legal li {
    font-size: 14px;
    line-height: 1.5;
}

.icon {
    display: inline-block;
    margin: 0px 5px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.icon-fb {
    background-image: url('../img/icon-facebook.svg');
}

.icon-twit {
    background-image: url('../img/icon-twitter.svg');
}

.icon-inst {
    background-image: url('../img/icon-instagram.svg');
}

.icon-cart {
    background-image: url('../img/icon-cart.svg');
}

/* CUSTOM CHACKBOX & RADIO */
input[type="checkbox"]:not(:checked),
input[type="checkbox"]:checked,
input[type="radio"]:not(:checked),
input[type="radio"]:checked {
    position: absolute;
    left: -9999px;
}

input[type="checkbox"]:not(:checked) + label,
input[type="checkbox"]:checked + label,
input[type="radio"]:not(:checked) + label,
input[type="radio"]:checked + label {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    /*vertical-align: middle;*/
}

input[type="checkbox"]:not(:checked) + label:after,
input[type="radio"]:not(:checked) + label:after{
    opacity: 0;
    /*transform: scale(0);*/
}
input[type="checkbox"]:checked + label:after,
input[type="radio"]:checked + label:after{
    opacity: 1;
    /*transform: scale(1);*/
}

/* checkbox box */
input[type="checkbox"]:not(:checked) + label:before,
input[type="checkbox"]:checked + label:before {
    content: '';
    position: absolute;
    left:0; top: -4px;
    width: 20px; height: 20px;
    border: 1px solid #dddddd;
    background: #ffffff;
    vertical-align: middle;
}
/* checkbox checkmark */
input[type="checkbox"]:not(:checked) + label:after,
input[type="checkbox"]:checked + label:after {
    content: '';
    position: absolute;
    top: 3px; 
    left: 6px;
    width: 20px; height: 20px;
    background-image: url('../img/icon-checkmark.png');
    background-size: 11px 9px;
    background-repeat: no-repeat;
    /*background-position: center center;*/
    transition: all .2s;
}
/* radio box */
input[type="radio"]:not(:checked) + label:before,
input[type="radio"]:checked + label:before {
    content: '';
    position: absolute;
    left:0; top: -4px;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 1px solid #dddddd;
    background: #ffffff;
    vertical-align: middle;
}
/* radio checkmark */
input[type="radio"]:not(:checked) + label:after,
input[type="radio"]:checked + label:after {
    content: '';
    position: absolute;
    top: 3px; left: 7px;
    width: 8px; height: 8px;
    border-radius: 50%;
    color: #000000;
    background: #000000;
    transition: all .2s;
}


header {
    /*position: fixed;*/
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    font-family: karla-regular;
    font-weight: bold;
    font-size: 13px;
    /*letter-spacing: 1px;*/
    /*border-bottom: 1px solid #d3d3d3;*/
}

header nav a {
    color: inherit;
    text-decoration: none;
}

header nav ul {
    width: 100%;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

header nav li {
    display: inline-block;
    box-sizing: border-box;
    /*width: 16.66%;*/
    width: 50%;
    margin: 0px;
    padding: 0px;
    line-height: 44px;
    white-space: nowrap;
}

header nav li:nth-child(odd) {
    text-align: left;
    padding-left: 20px;
}
header nav li:nth-child(even) {
    text-align: right;
    padding-right: 20px;
}

header nav li.beonme-logo img {
    vertical-align: middle;
    height: 18px;
}

header nav li.cart-menu {
    color: #ff2211;
    text-transform: uppercase;
    font-size: 15px;
}
header nav li.cart-menu .icon-cart {
    margin-left: 20px;
    width: 22px;
    height: 22px;
    background-size: 22px 22px;
}


section h2 {
    font-family: prata-regular;
    font-size: 28px;
    text-align: center;
    font-weight: normal;
    color: #5ab7b2; /* #3f65ef;*/
    margin: 150px 20px 50px 20px;
}

section#bottle-showcase {
}

section#bottle-showcase .tube {
    width: 250px;
    margin: 0px auto 0px auto;
    background-image: url('../img/bottle.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 250px 750px; /* 300px 900px; */
    height: 750px;
    /*height: 600px;*/
    text-align: center;

    /*outline: 1px solid red;*/
}
section#bottle-showcase img.bottle-logo {
    margin-top: 200px;
    width: 180px;
}

section#bottle-showcase img.bottle-payoff {
    margin: 20px 0px 30px 0px;
    width: 180px;
}

section#bottle-showcase .icon-scroll-down {
    margin: 30px 0px 0px 0px;
    height: 27px;
    background-image: url("../img/icon-scroll-down.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 12px 27px;
    
}


#bubble-morph {
    /*position: absolute;*/
    /*display: block;*/
    width: 210px;
    height: 210px;
    /*top: 300px;*/
    /*left: 50%;*/
    /*margin-left: -135px;*/
}

#bubble-morph path {
    visibility:hidden;
}

#bubble-morph path:first-child {
    visibility: visible;
    fill: transparent;
    /*fill: url('#bubble-texture');*/
    fill-rule: nonzero;
    stroke: #aaa;
    stroke-width: 0.2;
}

#bubble-texture {

}




section#organic {
}

section#organic h2 {
    margin-top: 20px;
    margin-bottom: 60px;
}

section#organic h3 {
    font-family: karla-regular;
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    color: #000;
    margin: 10px 0px 20px 0px;
}

section#organic .content {
    margin: 20px auto;
    text-align: center;
    max-width: 900px;
    /*border: 1px solid red;*/
}

section#organic .content > div {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;

    width: 33%;
    min-width: 200px;
    margin-top: 20px;
    padding: 80px 2% 10px 2%;

    font-family: karla-regular;
    font-size: 12px;
    color: #5f5f5f;
    text-align: center;

    background-position: top center;
    background-repeat: no-repeat;
    background-size: 80px 80px;

    /*border: 1px solid;*/
}
section#organic .content .box-vegan {
    background-image: url('../img/choose-us-fill/icon-vegan.svg');
}
section#organic .content .box-organic {
    background-image: url('../img/choose-us-fill/icon-organic.svg');
}
section#organic .content .box-skin {
    background-image: url('../img/choose-us-fill/icon-skin.svg');
}
section#organic .content .box-green {
    background-image: url('../img/choose-us-fill/icon-green.svg');
}
section#organic .content .box-recyclable {
    background-image: url('../img/choose-us-fill/icon-recyclable.svg');
}
section#organic .content .box-ethic {
    background-image: url('../img/choose-us-fill/icon-ethic.svg');
}


section#ask-sample {
    position: relative;
    padding: 1px 0px 110px 0px;
    box-sizing: border-box;
}
section#ask-sample .blob-cover{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
}


#blob {
    width: 100%;
    min-width: 1400px;
    height: 100%;
}
#blob path {
    visibility:hidden;
}
#blob path:first-child {
    visibility: visible;
    fill: transparent;
/*    fill: url(#blob-texture);*/
    fill-rule: nonzero;
    stroke: #aaa;
    stroke-width: 0;
}

section#ask-sample .content {
    text-align: center;
}
section#ask-sample .content h2 {
    font-size: 25px;
}
section#ask-sample form {
    font-family: prata-regular;
    font-size: 12px;
    color: #888;
    letter-spacing: 1px;
}
section#ask-sample .content input[type='text'],
section#ask-sample .content input[type='email'], 
section#ask-sample .content input[type='submit'] {
    display: block;
    border: none;
    font-family: Montserrat;
    font-size: 11px;
    margin:  auto;
    line-height: 44px;
    height: 44px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;

}
section#ask-sample .content input[type='text'],
section#ask-sample .content input[type='email'] {
    background-color: #ffffff;
    width: 300px;
}
section#ask-sample .content input[type='submit'] {
    background-color: #222;
    color: white;
    min-width: 200px;
    padding: 0 20px;
}
section#ask-sample .content input[type='submit']:disabled{
    opacity: 0.5;
}

section#ask-sample .content input[type='submit'].success{
    background-color: #5ab7b2;
}

section#ask-sample .content input[type='submit'].error{
    background-color: #ff0000;
}

section#ask-sample .content ul.orizontal-input-list {
    list-style-type: none;
    margin: 40px 0px;
    padding: 0px;
}
section#ask-sample .content ul.orizontal-input-list li {
    display: inline-block;
    margin: 0px 20px;
    padding: 0px;
    white-space: nowrap;

}

section#ask-sample .content ul.orizontal-input-list.privacy{
    margin-bottom: 10px;
}

section#ask-sample .content ul.orizontal-input-list.privacy li{
    height: 50px;
}

section#ask-sample .content ul.orizontal-input-list input {
    margin-right: 10px;
    vertical-align: middle;
}
section#ask-sample .content ul.orizontal-input-list label {
    font-family: Montserrat;
    font-size: 11px;
    color: #000;
    vertical-align: middle;
}
section#ask-sample .content ul.orizontal-input-list label.error{
    color: #ff0000;
    display: block;
    margin-top: 10px;
    font-family: Montserrat;
}

@media screen and (max-width: 667px) {

    section#ask-sample .content ul.orizontal-input-list { 
        margin: 0px auto;
        width: 200px;
    }
    section#ask-sample .content ul.orizontal-input-list li {
        width: 100%;
        line-height: 50px;
        text-align: left;
    }

    section#ask-sample .content ul.orizontal-input-list.privacy li {
        white-space: normal;
        line-height: 20px;
        margin: 15px 20px;
        height: 80px;
    }
}

footer {
    box-sizing: border-box;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: top;
    width: 100%;
    padding: 50px 5% 30px 5%;
    background-color: #222;
    font-family: Montserrat;
    font-size: 11px;
    color: #777;
    text-transform: uppercase;
}

footer a {
    color: #777;
    text-decoration: none;
}

footer a:hover {
    color: white;
}

footer > div {
    /*outline: 1px solid red;*/
    box-sizing: border-box;
    width: 20%;
}

footer > .left {
    color: white;
    line-height: 1.8;
    letter-spacing: 2px;
    font-size: 10px;
    text-align: left;
    white-space: nowrap;
}
footer > .middle {
    text-align: center;
}
footer > .middle img {
    width: 125px;
    height: 25px;
}
footer > .right {
    white-space: nowrap;
    text-align: right;
    padding-left: 5%;
}
footer > .privacy {
    font-size: 11px;
    line-height: 1.8;
    text-align: right;
}
footer > .wide {
    width: 100%;
    text-align: center;
    margin-top: 40px;
    text-transform: none;
}


footer .content .icon {
    padding: 0px 8px;
    cursor: pointer;
}

@media screen and (max-width: 667px) {
    header {
        display: none;
    }

    footer {
        padding-top:30px;
    }

    footer .left,
    footer .middle,
    footer .right,
    footer .privacy {
        width: 100%;
        margin-top: 20px;
        padding: 0px;
        text-align: center;
    }
}

.form-group.text {
    height: 44px;
    padding: 34px 0;
}
label.error{
    color: #ff0000;
    display: block;
    margin-top: 10px;
    font-family: Montserrat;
    font-size: 11px;
}