/* GLOBAL
================================= */

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-size: 112.5%;
}

@media only screen and (max-width: 991px) {
    html {
        font-size: 100%;
    }
}

@media only screen and (max-width: 764px) {
    html {
        font-size: 87.5%;
    }
}

body {
    position: relative;
    font-family: 'Cantarell', sans-serif;
    color: rgba(35, 54, 57, 1);
    font-size: 1rem;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: rgba(252, 253, 244, 1.0);
}

img {
    max-width: 100%;
    display: block;
}

img.center {
    position: relative;
    display: block;
    margin: 0 auto;
}

.bio-vertical-align {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 991px) {
    .bio-vertical-align {
        display: block;
    }
}

/* TYPOGRAPHY
================================= */

.caps {
    text-transform: uppercase;
}

.text-italic,
.italic {
    font-style: italic;
}

.cut {
    display: block;
}

.big {
    font-size: 200%;
    font-weight: 900;
}

b,
strong {
    font-weight: 600;
}

.medium {
    font-size: 75%;
}

.quote {
    font-size: 80%;
}

.wht {
    color: rgba(255, 255, 255, 1);
}

.red {
    color: rgba(222, 76, 25, 1.00) !important;
}

.blck {
    color: rgba(59, 59, 59, 1);
}

.green-bio {
    color: rgba(102, 151, 14, 1.0);
}

.yellow {
    color: rgba(255, 210, 0, 1);
}

.green-light {
    color: rgba(195, 214, 0, 1);
}

.green-bio-chart {
    color: rgba(222, 236, 91, 1) !important;
}

.green-special {
    color: rgba(239, 255, 107, 1.00);
}

.green-special:hover,
.green-light:hover {
    color: rgba(128, 169, 54, 1.00);
}

.bold {
    font-weight: 600;
    letter-spacing: 1px;
}

.bolder {
    font-weight: 900;
    letter-spacing: 1px;
}

.lowercase {
    text-transform: lowercase;
}

.underline {
    text-decoration: underline;
    text-underline-position: under;
}

.thick-underline {
    border-bottom: 5px solid #fff;
}

.slim-underline {
    border-bottom: 2px solid #fff;
}

.slim {
    font-weight: 300;
}

.remark {
    display: block;
    padding: 10px 20px;
    font-weight: 300;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #f4e790;
}

.remark-dashed {
    display: inline-flex;
    background: rgba(250, 250, 250, 1);
    border: 3px dashed #f4e790;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    font-weight: 700
}

sup {
    top: -1em;
    font-size: 50%;
}

.free-badge {
    display: inline-block;
    vertical-align: text-top;
    margin-top: 3px;
    margin-right: 4px;
    margin-left: 0px;
    padding: 0 3px;
    line-height: 16px;
    font-weight: 400;
    font-size: 10px;
    color: rgba(255, 255, 255, 1);
    text-shadow: 0 1px #902a27;
    background: #e93631;
    border-radius: 2px;
    background-image: -webkit-linear-gradient(top, #f65d5f, #e93631);
    background-image: -moz-linear-gradient(top, #f65d5f, #e93631);
    background-image: -o-linear-gradient(top, #f65d5f, #e93631);
    background-image: linear-gradient(to bottom, #f65d5f, #e93631);
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.2);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: rgba(35, 54, 57, 1);
    font-family: 'Cantarell', sans-serif;
    z-index: 100;
    position: relative;
}

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

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

p {
    margin-bottom: 1.3em;
}

/*p:last-child{ margin-bottom: 0; }*/

h1,
h2,
h3,
h4 {
    margin: 1.414em 0 0.5em;
    font-weight: inherit;
    line-height: 1.2;
}

h1 {
    font-family: 'Fjalla One', sans-serif;
    margin-top: 0;
    font-size: 3.298em;
}

h2 {
    font-family: 'Fjalla One', sans-serif;
    text-transform: capitalize;
    margin-top: 0px;
    font-size: 2.527em;
}

@media only screen and (max-width: 991px) {
    h2 {
        font-size: 1.927em;
    }
}

@media only screen and (max-width: 760px) {
    h2 .cut {
        display: inline;
    }
    h2 {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media only screen and (max-width: 464px) {
    h2 {
        font-size: 1.898em;
    }
}

@media only screen and (max-width: 390px) {
    h2 {
        font-size: 1.798em;
    }
}

@media only screen and (max-width: 360px) {
    h2 {
        font-size: 1.498em;
    }
}

h3 {
    font-size: 2.299em;
}

@media only screen and (max-width: 768px) {
    h3 {
        font-size: 1.699em;
    }
}

@media only screen and (max-width: 760px) {
    h3 {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media only screen and (max-width: 510px) {
    h3 {
        font-size: 1.199em;
    }
}

h4 {
    font-size: 1.414em;
}

@media only screen and (max-width: 425px) {
    h4 {
        font-size: 1.114em;
    }
}

small,
.font_small {
    font-size: 0.707em;
}

p,
.fact-list li,
.number-list li,
li {
    font-size: 1em;
    font-family: 'Cantarell', sans-serif;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 300;
    letter-spacing: .5px;
    line-height: 1.5;
}

p.disclaimer-box {
    padding: 15px;
    border: 1px solid #666;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

p.testimonials {
    font-family: 'Cantarell', sans-serif;
}

span.name-testimonials {
    font-family: 'Cantarell', sans-serif;
}

.box-body p {
    margin-bottom: 0px;
    margin-left: 7px;
}

#disclaimer p {
    font-size: 13px;
    font-weight: 300;
    line-height: 1.2em;
    color: rgba(255, 255, 255, 0.4);
}

.copyrights p {
    padding: 10px 0;
}

p.navbar-text {
    font-size: 13px;
    font-weight: 300;
    line-height: 1.2em;
    color: rgba(255, 255, 255, 0.4);
}

@media only screen and (max-width: 844px) {
    .navbar-text {
        float: none !important;
        text-align: center !important;
        margin: 3px;
    }
    .navbar-text span.cut {
        display: inline;
    }
}

@media only screen and (max-width: 768px) {
    p.navbar-text {
        font-size: 0.8em;
    }
}

@media only screen and (max-width: 386px) {
    p.navbar-text {
        font-size: 11px;
    }
}

@media only screen and (max-width: 320px) {
    p.navbar-text {
        font-size: 10px;
    }
}

/* BACKGROUND
================================= */

.bg-green-gradient {
    background: rgb(130, 188, 22);
    background: -moz-linear-gradient(top, rgba(130, 188, 22, 1) 0%, rgba(101, 150, 14, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(130, 188, 22, 1) 0%, rgba(101, 150, 14, 1) 100%);
    background: linear-gradient(to bottom, rgba(130, 188, 22, 1) 0%, rgba(101, 150, 14, 1) 100%);
    filter: progid: dximagetransform.Microsoft.gradient( startColorstr="#82bc16", endColorstr="#65960e", GradientType=0);
}

.bg-warning {
    position: relative;
    padding-top: 0px;
    background: rgba(222, 76, 25, 1.00);
    background-color: rgba(222, 76, 25, 1.00);
}

.bg-light-green {
    background: rgba(243, 255, 253, 1.0);
    background-color: rgba(243, 255, 253, 1.0);
}

.bg-white-light-green-gradient {
    background: -webkit-linear-gradient(rgba(255, 255, 255, 1.0) 0%, rgba(243, 255, 253, 1.0) 100%);
    background: -o-linear-gradient(rgba(255, 255, 255, 1.0) 0%, rgba(243, 255, 253, 1.0) 100%);
    background: linear-gradient(rgba(255, 255, 255, 1.0) 0%, rgba(243, 255, 253, 1.0) 100%);
}

.bg-light-green-white-gradient {
    background: -webkit-linear-gradient(rgba(243, 255, 253, 1.0) 0%, rgba(255, 255, 255, 1.0) 100%);
    background: -o-linear-gradient(rgba(243, 255, 253, 1.0) 0%, rgba(255, 255, 255, 1.0) 100%);
    background: linear-gradient(rgba(243, 255, 253, 1.0) 0%, rgba(255, 255, 255, 1.0) 100%);
}

.bg-dark-fruits-top-faded {
    background: url("https://fb-v1.cdn-bio.com/assets/dark-fruits-top-faded-background-a876ad20b1c9575ffbd7e9a9715fb6d2.png") center top/100% no-repeat scroll, -webkit-linear-gradient(rgba(15, 20, 36, 1), rgba(7, 7, 9, 1.0));
    background: url("https://fb-v1.cdn-bio.com/assets/dark-fruits-top-faded-background-a876ad20b1c9575ffbd7e9a9715fb6d2.png") center top/100% no-repeat scroll, -o-linear-gradient(rgba(15, 20, 36, 1), rgba(7, 7, 9, 1.0));
    background: url("https://fb-v1.cdn-bio.com/assets/dark-fruits-top-faded-background-a876ad20b1c9575ffbd7e9a9715fb6d2.png") center top/100% no-repeat scroll, linear-gradient(rgba(15, 20, 36, 1), rgba(7, 7, 9, 1.0));
    color: rgba(255, 255, 255, 1);
}

.bg-dark-foods-bottom {
    background: url('./dark-foods-bottom.jpg') bottom/100% no-repeat scroll, -webkit-linear-gradient(rgba(7, 7, 9, 1.0), rgba(7, 7, 9, 1.0));
    background: url('./dark-foods-bottom.jpg') bottom/100% no-repeat scroll, -o-linear-gradient(rgba(7, 7, 9, 1.0), rgba(7, 7, 9, 1.0));
    background: url('./dark-foods-bottom.jpg') bottom/100% no-repeat scroll, linear-gradient(rgba(7, 7, 9, 1.0), rgba(7, 7, 9, 1.0));
    color: rgba(255, 255, 255, 1);
}

.bg-dark-foods-top {
    background: url('./dark-foods-top.jpg') top/100% no-repeat scroll, -webkit-linear-gradient(rgba(12, 12, 12, 1.0), rgba(12, 12, 12, 1));
    background: url('./dark-foods-top.jpg') top/100% no-repeat scroll, -o-linear-gradient(rgba(12, 12, 12, 1.0), rgba(12, 12, 12, 1));
    background: url('./dark-foods-top.jpg') top/100% no-repeat scroll, linear-gradient(rgba(12, 12, 12, 1.0), rgba(12, 12, 12, 1));
}

.bg-light-fruits-top {
    background: url("https://fb-v1.cdn-bio.com/assets/light-fruits-top-background-10ece84a18eadfdf761093818c535cec.png") center top/100% no-repeat scroll, url("https://fb-v1.cdn-bio.com/assets/light-fruits-bottom-background-69f7fb46632ebaecfb5660694ce6f6ae.png") center bottom/100% no-repeat scroll, -webkit-linear-gradient(rgba(189, 238, 237, 1.0), rgba(197, 242, 235, 1.0));
    background: url("https://fb-v1.cdn-bio.com/assets/light-fruits-top-background-10ece84a18eadfdf761093818c535cec.png") center top/100% no-repeat scroll, url("https://fb-v1.cdn-bio.com/assets/light-fruits-bottom-background-69f7fb46632ebaecfb5660694ce6f6ae.png") center bottom/100% no-repeat scroll, -o-linear-gradient(rgba(189, 238, 237, 1.0), rgba(197, 242, 235, 1.0));
    background: url("https://fb-v1.cdn-bio.com/assets/light-fruits-top-background-10ece84a18eadfdf761093818c535cec.png") center top/100% no-repeat scroll, url(./assets/img/bg/light-fruits-bottom-background.png) center bottom/100% no-repeat scroll, linear-gradient(rgba(189, 238, 237, 1.0), rgba(197, 242, 235, 1.0));
}

.bg-citrus-top-faded {
    background: -webkit-linear-gradient(rgba(230, 230, 230, .8), rgba(230, 230, 230, 1)), url("https://fb-v1.cdn-bio.com/assets/citrus-top-faded-background-a1dbdc5c969900b4cae59c414ae9cc02.png") center top/100% no-repeat scroll;
    background: -o-linear-gradient(rgba(230, 230, 230, .8), rgba(230, 230, 230, 1)), url("https://fb-v1.cdn-bio.com/assets/citrus-top-faded-background-a1dbdc5c969900b4cae59c414ae9cc02.png") center top/100% no-repeat scroll;
    background: linear-gradient(rgba(230, 230, 230, .8), rgba(230, 230, 230, 1)), url("https://fb-v1.cdn-bio.com/assets/citrus-top-faded-background-a1dbdc5c969900b4cae59c414ae9cc02.png") center top/100% no-repeat scroll;
}

.bg-light-food-left-right {
    background: url("https://fb-v1.cdn-bio.com/assets/light-food-left-background-cf6a7034dd99e45fc3d80ddc6f2716a2.png") left top/50% no-repeat scroll, url("https://fb-v1.cdn-bio.com/assets/light-food-right-background-0941375aea267201f2bd7d562d33a787.png") right top/50% no-repeat scroll;
}

.bg-purple {
    background: rgba(187, 193, 245, 1.0);
    background-color: rgba(187, 193, 245, 1.0);
}

.bg-purple-dark {
    background: rgba(44, 43, 89, 1);
    background-color: rgba(44, 43, 89, 1);
}

.bg-aqua-green {
    background: rgba(112, 231, 193, 1);
    background-color: rgba(112, 231, 193, 1);
}

.bg-aqua-green-gradient {
    background-image: -webkit-linear-gradient(left, rgba(157, 231, 228, 1.0), rgba(205, 245, 236, 1.0));
    background-image: -o-linear-gradient(left, rgba(157, 231, 228, 1.0), rgba(205, 245, 236, 1.0));
    background-image: linear-gradient(to right, rgba(157, 231, 228, 1.0), rgba(205, 245, 236, 1.0));
}

.bg-aqua-green-gradient-stripes {
    background: rgba(29, 233, 182, 1);
    background-image: -moz-linear-gradient(top, rgba(17, 221, 170, 1) 0%, rgba(29, 233, 182, 1) 24%, rgba(29, 233, 182, 1) 100%);
    background-image: linear-gradient(-180deg, rgba(17, 221, 170, 1) 0%, rgba(29, 233, 182, 1) 24%, rgba(29, 233, 182, 1) 100%);
}

.bg-aqua-green-gradient-stripes:before {
    content: '';
    -webkit-clip-path: polygon(100% 100%, 100% 0%, 0 100%);
    clip-path: polygon(100% 100%, 100% 0%, 0 100%);
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    height: 254px;
    width: 100%;
    background: rgba(29, 233, 182, 1);
    background-image: -moz-linear-gradient(top, rgba(24, 215, 167, 1) 0%, rgba(29, 233, 182, 1) 100%);
    background-image: linear-gradient(180deg, rgba(24, 215, 167, 1) 0%, rgba(29, 233, 182, 1) 100%);
}

.stripes {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: -webkit-linear-gradient(rgba(17, 221, 170, 1) 0%, rgba(29, 233, 182, 1) 24%, rgba(29, 233, 182, 1) 100%);
    background-image: -o-linear-gradient(rgba(17, 221, 170, 1) 0%, rgba(29, 233, 182, 1) 24%, rgba(29, 233, 182, 1) 100%);
    background-image: linear-gradient(rgba(17, 221, 170, 1) 0%, rgba(29, 233, 182, 1) 24%, rgba(29, 233, 182, 1) 100%);
    top: 0px;
    transform: skewY(-12deg);
    left: 0
}

.stripes .stripe {
    position: absolute;
    height: 190px;
}

.stripes .s1 {
    top: 0;
    left: 12%;
    width: 40%;
    background: -webkit-linear-gradient(left, rgba(171, 251, 191, .02), rgba(171, 251, 191, .49));
    background: -o-linear-gradient(left, rgba(171, 251, 191, .02), rgba(171, 251, 191, .49));
    background: linear-gradient(to right, rgba(171, 251, 191, .02), rgba(171, 251, 191, .49));
}

.stripes .s2 {
    bottom: 0;
    left: 0;
    width: 51%;
    background: -webkit-linear-gradient(left, rgba(68, 216, 203, 1.0), rgba(68, 216, 203, .04));
    background: -o-linear-gradient(left, rgba(68, 216, 203, 1.0), rgba(68, 216, 203, .04));
    background: linear-gradient(to right, rgba(68, 216, 203, 1.0), rgba(68, 216, 203, .04));
}

/* VIDEO
================================= */

/*
VIMEO VIDEO
*/

.embed-container {
    position: relative;
    height: auto;
    max-width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 15px 20px rgba(50, 50, 93, .07), 0 5px 5px rgba(0, 0, 0, .07);
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-frame {
    border: 6px solid rgba(34, 211, 123, 0.41);
;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

/*
YOUTUBE VIDEO
*/

.video-box {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 0px;
    height: 0;
}

.video-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* BUTTON
================================= */

.custom-button,
.custom-button:focus {
    position: relative;
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: 1.4em;
    font-weight: 800;
    transition: .1s color;
    letter-spacing: -.5px;
    text-transform: uppercase;
    color: #4f482d;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    outline: none;
    background-color: #ffd200;
    box-shadow: 0 6px #ffae00;
    white-space: pre-wrap;
}

.custom-button:hover,
.custom-button:active,
.custom-button.active.focus,
.custom-button.active:focus,
.custom-button.active:hover,
.custom-button:active.focus,
.custom-button:active:focus,
.custom-button:active:hover,
.open>.dropdown-toggle.custom-button.focus,
.open>.dropdown-toggle.custom-button:focus,
.open>.dropdown-toggle.custom-button:hover {
    top: 2px;
    color: rgba(0, 0, 0, .8);
    border-color: rgba(255, 255, 255, .1);
    outline: none;
    background-color: #ffd200;
    box-shadow: 0 4px #ffae00;
}

.custom-button,
.custom-button:focus {
    font-size: 1.2em;
    font-weight: 700;
    padding: 15px 0px;
    font-family: 'Cantarell', sans-serif;
    margin-top: 30px;
}

.custom-button:active {
    top: 6px;
    outline: none;
    box-shadow: 0 0 #ab3c3c;
}

.custom-button:visited {
    outline: none;
}

.cta-txt-block {
    display: block;
    margin: auto;
    width: 379px;
}

.acid-reflux .cta-txt-block {
    width: 625px;
}

.constipation .cta-txt-block {
    width: 545px;
}

.ctatxt {
    font-size: 2.2rem;
    /*font-size: 1.4rem;*/
    font-weight: 800;
    letter-spacing: -.5px;
}

.mtxt {
    text-align: left;
    color: #563400;
    font-family: "Oswald", sans-serif;
    font-size: 6rem;
    font-weight: 900;
    float: left;
}

.restxt {
    margin-top: 27px;
    display: block;
    font-size: 1.8rem;
    text-align: left;
    font-weight: 300;
    float: right;
}

.restxt-small {
    padding-top: 0;
}

.cta-headline {
    color: rgba(255, 255, 255, 1);
    font-size: 2.3rem;
    line-height: 1.2
}

.logo {
    float: left;
    width: auto;
    max-width: 150px;
    max-height: 100%;
    padding-top: 4px;
    /*height: 40px;*/
    margin: 4px 0;
    -webkit-transition: all 600ms ease;
    -moz-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    transition: all 600ms ease;
}

@media only screen and (max-width: 768px) {
    .logo {
        float: none;
        margin: 0px auto
    }
}

#bio-wiki .logo {
    float: none;
    width: auto;
    max-width: 150px;
    max-height: 100%;
    padding-top: 4px;
    /*height: 40px;*/
    margin: 4px auto;
    display: block;
    -webkit-transition: all 600ms ease;
    -moz-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    transition: all 600ms ease;
}

.site-nav {
    float: right;
    margin-top: 35px;
    margin-right: 40px;
    -webkit-transition: all 600ms ease;
    -moz-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    transition: all 600ms ease;
}

.site-nav ul {
    padding: 0;
    margin: 0;
    list-style: outside none none;
}

.site-nav ul li {
    display: inline-block;
    padding-right: 7px;
    padding-left: 7px;
}

.site-nav ul li a {
    padding: 0 10px 25px;
    font-weight: 300;
    text-transform: uppercase;
    color: #949494;
}

.navbar-inverse .navbar-nav>li>a:focus,
.navbar-inverse .navbar-nav>li>a:hover {
    opacity: .9;
    color: #949494;
}

.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>li.topactive a {
    padding: 0 10px 19px;
    font-weight: normal;
    opacity: 1;
    color: #949494;
    border-bottom: 6px solid #aab818;
    background: transparent;
}

.navbar {
    margin-bottom: 0;
    border-radius: 0px;
}

/*
NAV INVISIBLE
*/

.nav-invisible {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}

.nav-invisible.navbar-inverse {
    background-color: transparent;
    border-color: transparent;
}

.nav-invisible.navbar-inverse .navbar-text {
    color: rgba(35, 54, 57, 1);
}

.nav-invisible.navbar-inverse .navbar-text.wht {
    color: rgba(255, 255, 255, 1);
;
}

/*
NAV WHITE
*/

.nav-white.navbar-inverse {
    background-color: rgba(255, 255, 255, 1);
    border-color: transparent;
}

.nav-white.navbar-inverse .navbar-text {
    color: rgba(35, 54, 57, 1);
}

.logo.scrolled {
    height: 25px;
    margin: 4px 0;
}

.site-nav.scrolled {
    margin-top: 10px;
    font-size: .8rem;
}

/* CTA
================================= */

.cta-button .order-cta-wrapper {
    margin-bottom: 15px;
}

.cta-button .order-cta-wrapper {
    background: url("https://fb-v1.cdn-bio.com/assets/arrow-left-0c01b4155fb63344035b5fe1d8d44b9e.svg") top left 125px no-repeat;
}

@media only screen and (max-width: 1200px) {
    .cta-button .order-cta-wrapper {
        background: url("https://fb-v1.cdn-bio.com/assets/arrow-left-0c01b4155fb63344035b5fe1d8d44b9e.svg") top left 30px no-repeat;
    }
}

@media only screen and (max-width: 991px) {
    .cta-button .order-cta-wrapper {
        background: transparent;
    }
}

.cta-button .order-cta-wrapper .order-cta-inner {
    background: url("https://fb-v1.cdn-bio.com/assets/arrow-right-5190458605cd96ba392576db2c91f12b.svg") top right 125px no-repeat;
}

@media only screen and (max-width: 1200px) {
    .cta-button .order-cta-wrapper .order-cta-inner {
        background: url("https://fb-v1.cdn-bio.com/assets/arrow-right-5190458605cd96ba392576db2c91f12b.svg") top right 30px no-repeat;
    }
}

@media only screen and (max-width: 991px) {
    .cta-button .order-cta-wrapper .order-cta-inner {
        background: transparent;
    }
}

.cta-button .order-cta-wrapper,
.cta-button .order-cta-wrapper .order-cta-inner {
    background-size: 100px;
    padding-bottom: 2vw;
}

.cta-button .order-cta-wrapper .order-cta-inner a {
    display: inline-block;
    text-decoration: none;
    font-size: 2.25rem;
    line-height: 2.375rem;
    font-weight: 900;
    font-style: italic;
    border-radius: 7px;
    transition: all .2s ease-out;
    cursor: pointer;
    background: #fcc819;
    color: #000;
    width: 100%;
    padding: 8px 0;
    margin-top: 25px;
    border: 1px solid #edbb1b;
    border-bottom: 4px solid #edbb1b;
    font-family: 'Fjalla One', sans-serif;
    font-weight: 900;
    position: relative;
}

@media only screen and (min-width: 760px) {
    .cta-button .order-cta-wrapper .order-cta-inner a {
        font-size: 1rem;
        line-height: 1.4;
        width: 657px;
        box-shadow: 0 5px 0 0 rgba(229, 229, 229, .9);
        padding: 18px 0;
        text-transform: uppercase;
    }
}

.cta-button .order-cta-wrapper .order-cta-inner a:hover {
    color: #000;
    background: #fcc819;
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
    -ms-transform: scale(1.02);
    transition: all .2s ease-out;
}

.cta-button .payment-info a {
    cursor: default;
}

span.yes {
    font-size: 250%;
    position: absolute;
    top: 1px;
    left: 10%;
}

@media only screen and (max-width: 768px) {
    span.yes {
        font-size: 1.2em;
        position: initial;
        top: 1px;
        left: 10%;
    }
}

/* LIST
================================= */

ul,
ol {
    padding-left: 30px;
}

ul.question {
    padding-left: 60px;
}

li {
    padding: 0px;
    list-style: none;
}

li p {
    display: inline;
}

ul.str-odd li:nth-child(odd) p,
ul.str-odd li:nth-child(odd),
ol.str-odd li:nth-child(odd) p,
ol.str-odd li:nth-child(odd) {
    font-weight: 600;
}

ul.str-even li:nth-child(even) p,
ul.str-even li:nth-child(even),
ol.str-even li:nth-child(even) p,
ol.str-even li:nth-child(even) {
    font-weight: 600;
}

ul.arrow-ul li:before {
    content: '\00bb';
    padding-right: 17px;
    margin-left: -1.5em;
    top: -3px;
    font-weight: 900;
}

ol.count-group {
    counter-reset: li;
    padding-left: 60px;
}

.count-group-item::before {
    counter-increment: li;
    content: counters(li, ".") ".";
    position: absolute;
    left: 2em;
    padding: 0;
    font-family: Droid Serif;
    font-style: italic;
    font-size: 0.75em;
    text-align: center;
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 35px;
    line-height: 2.1;
    height: 35px;
    margin-top: -4px;
    background: #e0f9fe;
    color: rgba(94, 205, 221, 1.0);
    font-weight: 300;
}

/* GENERAL
================================= */

main {
    overflow: hidden;
}

section {
    position: relative;
    clear: both;
    padding: 13vh 0;
    z-index: 1;
}

/* ARTICLE PAGE
================================= */

/* HERO
================================= */

section.hero {
    margin: 0vw auto;
    padding: 7vw 0;
}

.hero {
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-yogurt {
    background-image: url("https://fb-v1.cdn-bio.com/assets/yogurt-bg-a41122da11d3ca68363fac0319f47638.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 30vmax;
}

.hero {
    padding-bottom: 0px;
    padding-top: 20px;
}

@media only screen and (max-width: 1199px) {
    .hero {
        padding-bottom: 20px;
    }
}

.hero h3,
.hero h1 {
    margin-bottom: 0px;
    /*margin-top: 0px;*/
    color: #fff;
}

.hero h1 {
    margin-bottom: 20px;
    margin-top: 0px;
}

@media only screen and (max-width: 991px) {
    .hero h1 {
        font-size: 3.398em;
    }
}

@media only screen and (max-width: 597px) {
    .hero h1 {
        font-size: 2.898em;
    }
}

@media only screen and (max-width: 597px) {
    .hero h1 {
        font-size: 2.598em;
    }
}

@media only screen and (max-width: 464px) {
    .hero h1 {
        font-size: 2.198em;
        margin-top: 1.4em;
    }
}

@media only screen and (max-width: 390px) {
    .hero h1 {
        font-size: 1.998em;
    }
}

@media only screen and (max-width: 360px) {
    .hero h1 {
        font-size: 1.798em;
    }
}

.hero h1 span {
    font-size: 150%;
    text-transform: uppercase;
    display: block;
    font-weight: 900;
}

@media only screen and (max-width: 991px) {
    .hero h1 span {
        font-size: 120%
    }
}

.hero h1 span.hero-small {
    font-size: 115%;
}

.hero h3,
.hero .feature-box h3 {
    font-weight: 600;
    font-family: 'Cantarell', sans-serif;
    font-size: 1.499em
}

@media only screen and (max-width: 991px) {
    .hero h3 {
        font-size: 1.399em;
    }
}

@media only screen and (max-width: 728px) {
    .hero h3 {
        font-size: 1.299em;
    }
}

@media only screen and (max-width: 728px) {
    .hero h3 {
        font-size: 1.199em;
    }
}

@media only screen and (max-width: 510px) {
    .hero h3,
    .hero .feature-box h3 {
        font-size: 1.199em;
    }
}

@media only screen and (max-width: 510px) {
    .hero h3,
    .hero .feature-box h3 {
        margin-top: 0px;
    }
}

@media only screen and (max-width: 440px) {
    .hero h3,
    .hero .feature-box h3 {
        font-size: 1.099em;
    }
}

@media only screen and (max-width: 390px) {
    .hero h3,
    .hero .feature-box h3 {
        font-size: .999em;
    }
}

.hero .feature-box {
    margin-top: 4vw;
    padding: 30px 50px;
}

@media only screen and (max-width: 991px) {
    .hero .feature-box {
        overflow: auto;
    }
}

.feature-box h3 {
    text-transform: uppercase;
}

.hero .feature-box_bg {
    background-color: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 1);
    overflow: hidden;
}

.hero .feature-box_bg h3 {
    color: rgba(255, 255, 255, 1);
}

.feature-box_bg .feature-box-right {
    z-index: 2;
}

.hero .feature-box_bg .feature-box_img {
    background-image: url(./colon.jpg);
    width: 100%;
    height: 100%;
}

.hero .feature-box_bg .feature-box_img {
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    top: 0;
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, .9) 41%, rgba(0, 0, 0, 0.13) 100%), url(../img/bg/colon.jpg) top/1084px no-repeat scroll;
    background: -o-linear-gradient(left, rgba(0, 0, 0, .9) 41%, rgba(0, 0, 0, 0.13) 100%), url(../img/bg/colon.jpg) top/1084px no-repeat scroll;
    background: linear-gradient(to right, rgba(0, 0, 0, .9) 41%, rgba(0, 0, 0, 0.13) 100%), url(../img/bg/colon.jpg) top/1084px no-repeat scroll;
    z-index: 1;
    left: 0px;
}

/*
POST SIGN INFO BOX
*/

.info-box {
    background-color: rgba(43, 222, 173, 1.0);
    padding: 20px 40px;
    margin-bottom: 40px;
    border-radius: 15px;
    box-shadow: 0 15px 20px rgba(42, 155, 235, .09), 0 5px 5px rgba(0, 0, 0, .07);
    position: relative;
}

.info-box h3.info-box-tittle {
    margin-top: 0px;
}

.info-box p.info-box-description {
    font-family: 'Cantarell', sans-serif;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 0px;
    font-size: 1em;
}

/* GREEKYOGURT
================================= */

section.greek-yogurt {
    padding: 6vw 0 4vw;
}

@media only screen and (max-width: 990px) {
    section.greek-yogurt {
        padding: 19vw 0 4vw;
    }
}

section.greek-yogurt img.wrong {
    max-width: 400px;
    width: 100%;
    padding: 1vw 0 2vw;
}

section.greek-yogurt p.special-line {
    font-size: 135%;
    font-weight: 600;
    position: relative;
    line-height: 1;
    left: 60px;
}

section.greek-yogurt .special-line span {
    font-family: Droid Serif;
    font-size: 300%;
    padding-right: 2px;
    position: absolute;
    left: -60px;
    top: -7px;
}

/*
AUTHOR BIO BOX
*/

.author-bio-box {
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translate(-50%, -0%);
}

.greek-yogurt .author-bio-box {
    top: 4%;
    left: 75%;
    transform: translate(-75%, -0%);
}

@media only screen and (max-width: 1199px) {
    .greek-yogurt .author-bio-box {
        left: 77%;
        top: 0%;
        transform: translate(-70%, -0%);
    }
}

@media only screen and (max-width: 990px) {
    .greek-yogurt .author-bio-box {
        top: -10%;
        left: 50%;
        transform: translate(-50%, -0%);
    }
}

@media only screen and (max-width: 950px) {
    .greek-yogurt .author-bio-box {
        display: none;
    }
}

.author-bio-box img.small-profile {
    width: 100px;
}

.author-bio-box {
    background: rgba(255, 255, 255, 1);
    padding: 1vw;
    font-size: 1em;
    box-shadow: 0 15px 20px rgba(50, 50, 93, .07), 0 5px 5px rgba(0, 0, 0, .07);
    border-radius: 5px;
}

.author-bio-photo {
    float: left;
    padding: 0 1vw;
}

.greek-yogurt .author-bio-photo {
    float: none;
    padding: 1vw;
}

.author-bio-box h4 {
    font-weight: 800;
    letter-spacing: -1px;
    margin-top: 0px;
    font-size: 1em;
    text-transform: uppercase;
}

.greek-yogurt .author-bio-box h4 {
    text-align: center;
}

.author-bio-box ul {
    padding-left: 160px;
}

.author-bio-box ul li {
    font-size: 0.9em;
    margin-bottom: 0px;
}

.author-bio-box ul.arrow-ul li:before {
    content: '\00bb';
    padding-right: 5px;
    margin-left: -1.5em;
    top: 0px;
    font-weight: 900;
}

.greek-yogurt .author-bio-box ul {
    padding-left: 25px;
}

/* SECTION YOGURT PROBLEMS
================================= */

.yogurt-border {
    border: 15px solid rgba(0, 0, 0, 0.06);
    padding: 3vw 0;
}

.yogurt-tittle {
    position: relative;
    background: rgba(255, 255, 255, 1);
    padding: 1vw;
    top: 9%;
    left: 50%;
    transform: translate(-50%, -100%);
    font-size: 1.8em;
    margin-bottom: 0px;
    display: inline-table;
    color: rgba(242, 74, 66, 0.96);
}

.yogurt-tittle.first {
    top: 4%;
}

@media only screen and (max-width: 1199px) {
    .yogurt-tittle {
        transform: translate(-50%, -90%);
    }
}

.yogurt-tittle span {
    display: block;
    /* font-size: 75%; */
    /* text-transform: uppercase; */
}

.yogurt-description {
    margin-top: -60px;
}

section#problem-1.yogurt-box,
section#problem-1.yogurt-box .yogurt-tittle {
    background-color: rgba(252, 243, 158, 1.0)
}

section#problem-1.yogurt-box .count-group-item::before {
    counter-increment: li;
    content: counters(li, ".") ".";
    position: absolute;
    left: 3%;
    padding: 0;
    font-family: Droid Serif;
    font-style: italic;
    font-size: 2.05em;
    text-align: center;
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 50px;
    line-height: 2.1;
    height: 76px;
    margin-top: -25px;
    background: transparent;
    color: rgba(242, 74, 66, 0.96);
    font-weight: 600;
}

section#problem-2.yogurt-box,
section#problem-2.yogurt-box .yogurt-tittle {
    background-color: rgba(252, 253, 245, 1.0);
}

section#problem-3.yogurt-box,
section#problem-3.yogurt-box .yogurt-tittle {
    background-color: rgba(232, 170, 27, 1.0)
}

section#problem-4.yogurt-box,
section#problem-4.yogurt-box .yogurt-tittle {
    background-color: rgba(255, 255, 255, 1)
}

/* PROTEIN FACTS
================================= */

section.protein-facts {
    background-color: rgba(242, 74, 66, 1);
}

.protein-facts-text {
    font-family: 'Droid Serif', serif;
    font-style: italic;
    font-size: 1.4em;
    color: rgba(255, 255, 255, 1);
}

/* CTA ARTICLE
================================= */

section.cta-article .cta-button .order-cta-wrapper .order-cta-inner a {
    padding-left: 30px;
}

@media only screen and (max-width: 768px) {
    section.cta-article .cta-button .order-cta-wrapper .order-cta-inner a {
        padding-left: 0px;
        font-size: 1rem;
    }
}

/* TESTIMONIALS
================================= */

section.testimonials {
    color: rgba(255, 255, 255, 1);
}

.testimonials h3,
.testimonials h2 {
    color: rgba(29, 233, 182, 1);
}

.testimonial-featured {
    border-radius: 3px;
    margin-bottom: 4vw;
    background-color: hsla(0, 0%, 100%, 1.0);
    box-shadow: 0 15px 20px rgba(50, 50, 93, .07), 0 5px 5px rgba(0, 0, 0, .07);
    display: flex;
    flex-flow: row wrap;
    color: rgba(35, 54, 57, 1);
}

.testimonial-featured .testimonial-header {
    margin-bottom: 1.5rem;
}

.testimonial-featured .testimonial-text {
    position: relative;
    padding: 1.5rem 1.5rem 4.5rem;
    width: calc(100% - 376px);
    min-height: 450px;
}

.testimonial-featured.noname .testimonial-header {
    width: 100%;
    margin: 1.5rem auto 1.5rem;
    text-align: center;
}

.testimonial-featured.noname .testimonial-text {
    padding-top: 0;
}

.testimonial-featured .testimonial-name {
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 0;
}

.testimonial-featured .testimonial-title {
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: normal;
}

.testimonial-description.testimonial-long-text p,
.testimonial-description p,
.testimonial-normal p {
    font-size: 0.9rem;
}

.testimonial-featured .testimonial-disclaimer {
    position: absolute;
    bottom: 0.75rem;
    margin-right: 1.5rem;
    font-style: italic;
}

.testimonial-featured .testimonial-disclaimer>p {
    font-size: 0.75rem;
    line-height: 1;
    color: hsla(0, 0%, 50%, 1.0);
    margin-bottom: 0.25rem;
}

.testimonial-featured .testimonial-image {
    width: 376px;
    position: relative;
}

.testimonial-featured .testimonial-image img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.testimonial-featured.testimonial-video .testimonial-video-box {
    width: 75%;
    margin: 0 auto 1.5rem;
}

.testimonial-featured.testimonial-video .testimonial-text {
    width: 100%;
}

@media screen and (max-width: 1001px) {
    .testimonial-featured {
        width: auto;
        margin: 0 auto 1.5rem;
    }
    .testimonial-featured .testimonial-name,
    .testimonial-featured .testimonial-title,
    .testimonial-normal h3 {
        text-align: center;
    }
    .testimonial-featured .testimonial-text {
        order: 2;
        width: 100%;
        padding-bottom: 1.5rem;
        min-height: initial;
    }
    .testimonial-featured .testimonial-image {
        order: 1;
        width: 100%;
        margin-bottom: 1.5rem;
    }
    .testimonial-featured .testimonial-image img {
        width: auto;
        margin: 0 auto;
        position: relative;
        top: 0;
        transform: none;
        border-bottom-right-radius: 0;
        border-top-left-radius: 5px;
    }
    .testimonial-featured .testimonial-disclaimer {
        position: static;
        margin: 3rem 0 0 0;
    }
    .testimonial-featured.testimonial-video .testimonial-video-box {
        width: 100%;
    }
}

.testimonial-normal {
    padding: 3rem 1.5rem 0.75rem;
    margin: 4vw 0;
    position: relative;
    background-color: hsla(0, 0%, 100%, 1.0);
    border-radius: 3px;
    border-top: 5px solid hsla(0, 0%, 30%, 1.0);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    color: rgba(35, 54, 57, 1);
}

.testimonial-normal:before {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: hsla(0, 0%, 100%, 1.0);
    border-radius: 50%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    color: hsla(0, 0%, 30%, 1.0);
    content: "\f10e";
    font-family: 'FontAwesome';
    font-size: 1.5rem;
    left: 50%;
    line-height: 3rem;
    position: absolute;
    top: -1.5rem;
    width: 3rem;
    text-align: center;
}

.testimonial-normal {
    border-color: hsla(332, 35%, 80%, 1.0);
}

.testimonial-normal:before {
    color: hsla(332, 35%, 80%, 1.0);
}

.testimonial-normal h3 {
    font-size: 1.5rem;
    line-height: 1;
}

.testimonial-disclaimer {
    margin-top: 2rem;
    text-align: left;
    font-style: italic;
}

.testimonial-disclaimer>p {
    font-size: 0.75rem;
    line-height: 1;
    color: hsla(0, 0%, 50%, 1.0);
    margin-bottom: 0.5rem;
}

/* BOXES
================================= */

.feature-box {
    position: relative;
    background-color: rgba(255, 255, 255, 0.41);
    border-radius: 4px;
    padding: 30px;
    box-shadow: 0 15px 20px rgba(50, 50, 93, .07), 0 5px 5px rgba(0, 0, 0, .07);
    margin-bottom: 30px;
}

.feature-box:last-child {
    margin-bottom: 0px;
}

.feature-box h3 {
    font-family: 'Caveat Brush', cursive;
    color: rgba(35, 54, 57, 1);
    line-height: 1.5;
    margin-bottom: 1em;
    font-size: 2.199em
}

@media only screen and (max-width: 768px) {
    .feature-box h3 {
        font-size: 1.899em;
    }
}

@media only screen and (max-width: 500px) {
    .feature-box h3 {
        font-size: 1.699em;
        margin-top: 0px;
    }
}

@media only screen and (max-width: 390px) {
    .feature-box ul,
    ol {
        padding-left: 0px;
    }
}

@media only screen and (max-width: 360px) {
    .feature-box>div {
        padding: 0px;
    }
    .feature-box>.feature-box-left {
        padding-left: 15px;
    }
}

.green {
    background-color: rgba(231, 250, 251, 1.0);
    color: rgba(14, 189, 202, 1);
}

/* EXPERT BOX */

.expert img,
.expert .expert-name {
    display: inline-block;
    vertical-align: middle;
}

.expert {
    margin: 0px auto;
    display: table;
}

.cream-expert-box {
    background-color: rgba(226, 225, 208, 0.30);
}

.purple-expert-box {
    background-color: rgba(236, 231, 252, 0.30);
}

.expert img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 5px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

.expert .expert-name {
    text-align: left;
    line-height: 1.2;
}

.expert .expert-name li:last-child {
    font-size: 0.75rem;
}

/* FAQ BOX */

.faq-feature-box {
    background-image: url("https://fb-v1.cdn-bio.com/assets/question_bg-4e6335b86404bf5a245cdd31223f0955.png");
    background-repeat: no-repeat;
    background-position: right 21px;
}

/* OPTION BOX */

.option-box {
    background-color: rgba(243, 255, 253, 1.0);
    box-shadow: 0 15px 20px rgba(198, 246, 234, .07), 0 5px 5px rgba(0, 0, 0, .07);
}

/*
BOX REMARK
*/

.box-remark {
    border: 3px solid;
    padding: 2vw;
    margin-bottom: 2vw;
    background: rgba(255, 255, 255, 1);
}

.box-remark-title {
    text-transform: uppercase;
    margin-top: 0;
}

.box-remark p:last-child {
    margin-bottom: 0;
}

/* YES BOX */

.box-yes-cta {
    background-color: #72beff;
    padding: 1px 40px 40px;
    margin: 40px 40px 0px;
    border-radius: 15px;
    box-shadow: 0 15px 20px rgba(42, 155, 235, .09), 0 5px 5px rgba(0, 0, 0, .07);
    position: relative;
}

@media only screen and (max-width: 530px) {
    .box-yes-cta {
        width: 100%;
        margin: 0px;
    }
}

.box-yes-cta h2 {
    padding-left: 248px;
    position: relative;
    color: rgba(255, 255, 255, 1);
    font-size: 2.4em;
}

@media only screen and (max-width: 1200px) {
    .box-yes-cta h2 {
        padding-left: 205px;
        font-size: 1.8em;
    }
}

@media only screen and (max-width: 991px) {
    .box-yes-cta h2 {
        padding-left: 179px;
        font-size: 1.5em;
    }
}

@media only screen and (max-width: 638px) {
    .box-yes-cta h2 {
        padding-left: 0px;
        text-align: center;
    }
}

.yes--big {
    font-size: 210%;
    font-weight: 900;
    position: absolute;
    left: 40px;
}

@media only screen and (max-width: 991px) {
    .yes--big {
        font-size: 300%;
        font-weight: 900;
        position: absolute;
        left: -10px;
    }
}

@media only screen and (max-width: 767px) {
    .yes--big {
        top: -13px;
    }
}

@media only screen and (max-width: 733px) {
    .yes--big {
        top: 4px;
    }
}

@media only screen and (max-width: 638px) {
    .yes--big {
        display: block;
        position: relative;
    }
}

section.cost .box-yes-cta h2 {
    padding-left: 200px;
    margin-top: 2vw;
}

@media only screen and (max-width: 1024px) {
    section.cost .box-yes-cta h2 {
        padding-left: 150px;
        margin-top: 2vw;
    }
}

@media only screen and (max-width: 768px) {
    section.cost .box-yes-cta h2 {
        padding-left: 110px;
    }
}

@media only screen and (max-width: 425px) {
    section.cost .box-yes-cta h2 {
        padding-left: 0px;
    }
}

section.cost .yes--big {
    font-size: 300%;
    left: -20px;
}

@media only screen and (max-width: 425px) {
    section.cost .yes--big {
        left: 0;
    }
}

.box-yes-cta ul li,
.box-yes-orderpage {
    font-size: 1.2em;
    font-style: italic;
    color: rgba(51, 51, 153, 1);
}

.box-yes-cta ul li:before,
.box-yes-orderpage ul li:before {
    content: '\2713';
    position: absolute;
    left: 1.7em;
    padding: 0;
    padding-right: 6px;
    font-style: italic;
    font-size: 0.75em;
    text-align: center;
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 35px;
    line-height: 2.1;
    height: 35px;
    margin-top: -4px;
    background: #e0f9fe;
    color: rgba(94, 205, 221, 1.0);
    font-weight: 900;
}

/*
BOX YES ORDERPAGE
*/

section.box-yes-orderpage .yes-box-bottle-img-box {
    max-width: 500px;
    width: calc(100% - 3em);
    position: absolute;
    top: -210px;
    left: -370px;
}

@media only screen and (max-width: 900px) {
    section.box-yes-orderpage .yes-box-bottle-img-box {
        display: none;
    }
}

section.box-yes-orderpage {
    position: relative;
    clear: both;
    padding: 2vw 0 8vw;
    z-index: 1;
}

.box-yes-orderpage h2 {
    margin-top: 0px;
    padding-left: 200px;
    font-size: 2.2em;
}

.box-yes-orderpage .yes--big {
    font-size: 210%;
    font-weight: 900;
    position: absolute;
    left: 20px;
}

@media only screen and (max-width: 1199px) {
    .box-yes-orderpage .yes-box-description h2 {
        font-size: 2em;
    }
}

@media only screen and (max-width: 991px) {
    .box-yes-orderpage .yes-box-description h2 {
        padding-left: 212px;
    }
    .box-yes-orderpage .yes-box-description .yes--big {
        left: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .box-yes-orderpage .yes-box-description h2 {
        padding-left: 195px;
    }
    .box-yes-orderpage .yes-box-description .yes--big {
        left: 0px;
        top: 0px;
    }
}

@media only screen and (max-width: 731px) {
    .box-yes-orderpage .yes-box-description h2 {
        padding-left: 275px;
    }
    .box-yes-orderpage .yes-box-description .yes--big {
        left: 50px;
        top: 10px;
    }
}

@media only screen and (max-width: 677px) {
    .box-yes-orderpage .yes-box-description h2 {
        padding-left: 0px;
        text-align: center;
        margin-bottom: 15px;
    }
    .box-yes-orderpage .yes-box-description .yes--big {
        display: block;
        position: initial;
    }
}

@media only screen and (max-width: 400px) {
    .box-yes-orderpage .yes-box-description h2 {
        font-size: 1.5em;
    }
}

.box-yes-orderpage ul {
    padding-left: 90px;
}

.box-yes-orderpage ul li:before {
    left: 3.3em;
}

@media only screen and (max-width: 480px) {
    .box-yes-orderpage ul {
        padding-left: 30px;
    }
    .box-yes-orderpage ul li:before {
        left: 0.3em;
    }
}

/* EXIT POP UP
================================= */

h2.modal-exitpop {
    font-size: 1.499em;
    margin-top: 5px;
}

span.title-bigger {
    display: block;
    font-weight: 900;
    font-size: 120%;
}

p.lead {
    font-size: 1em;
}

.modal-content {
    background-color: rgba(230, 230, 230, 1.0);
}

.form-group-lg .form-control {
    height: 40px;
    padding: 10px 16px;
    font-size: 0.8em;
}

p.text-muted.text-center {
    font-size: 1em;
}

.modal-btn .exit-popup-description {
    padding-top: 2vw;
}

.modal-btn .custom-button {
    font-size: 1em;
    font-weight: 600;
    margin-top: 0px;
    font-family: 'Fjalla One', sans-serif;
    display: inherit;
}

@media only screen and (max-width: 991px) {
    .modal-btn .custom-button {
        padding-left: 110px;
        white-space: normal;
        text-align: left;
    }
}

@media only screen and (max-width: 768px) {
    .modal-btn .custom-button {
        padding-left: 0px;
        padding-left: 0px;
        white-space: normal;
        text-align: center;
        font-size: 1.2em;
    }
}

@media only screen and (max-width: 420px) {
    .modal-btn .custom-button {
        font-size: 1.1em;
    }
}

@media only screen and (max-width: 380px) {
    .modal-btn .custom-button {
        font-size: 1em;
        font-weight: 400;
    }
}

@media only screen and (max-width: 360px) {
    .modal-btn .custom-button {
        font-size: 0.8em;
    }
}

.modal-btn span.yes {
    font-size: 250%;
    position: absolute;
    top: 10px;
    left: 10%;
}

@media only screen and (max-width: 768px) {
    .modal-btn span.yes {
        font-size: 1.2em;
        position: initial;
        top: 0;
        left: 0;
        padding: 0px;
    }
}

.modal-body hr {
    margin-top: 5px;
    margin-bottom: 5px;
}

.modal-form {
    margin-top: 10px;
}

@media only screen and (max-width: 991px) {
    .modal-ipad-img {
        max-width: 275px;
        margin: auto;
    }
}

/* SALES PAGE
================================= */

/* HERO - POWERFUL YOGURT
================================= */

.hero-coconuts-recipe {
    background-image: url("https://fb-v1.cdn-bio.com/assets/hero-sp-276639095ea8d7f69b23df959ab4da6f.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    /* height: 30vmax; */
}

@media only screen and (max-width: 425px) {
    .hero-coconuts-recipe {
        height: 50vmax;
    }
}

.hero.hero-coconuts-recipe h1 {
    text-shadow: -3px -3px 0 rgba(0, 0, 0, 1), 3px -3px 0 rgba(0, 0, 0, 1), -3px 3px 0 rgba(0, 0, 0, 1), 3px 3px 0 rgba(0, 0, 0, 1);
}

@media only screen and (max-width: 1200px) {
    .hero.hero-coconuts-recipe h1,
    .hero-almonds-recipe h1 {
        font-size: 3em;
    }
}

@media only screen and (max-width: 991px) {
    .hero.hero-coconuts-recipe h1,
    .hero-almonds-recipe h1 {
        font-size: 2.5em;
        margin-top: 2vw;
    }
}

@media only screen and (max-width: 637px) {
    .hero.hero-coconuts-recipe h1,
    .hero-almonds-recipe h1 {
        font-size: 2.2em;
        margin-top: 3vw;
    }
}

@media only screen and (max-width: 540px) {
    .hero.hero-coconuts-recipe h1,
    .hero-almonds-recipe h1 {
        font-size: 2em;
        margin-top: 3vw;
        text-shadow: -1px -1px 0 rgba(0, 0, 0, 1), 1px -1px 0 rgba(0, 0, 0, 1), -1px 1px 0 rgba(0, 0, 0, 1), 1px 1px 0 rgba(0, 0, 0, 1);
    }
}

@media only screen and (max-width: 540px) {
    .hero.hero-coconuts-recipe h1,
    .hero-almonds-recipe h1 {
        font-size: 1.8em;
        margin-top: 9vw;
    }
}

/* RECIPE - POWERFUL YOGURT
================================= */

section.recipe .recipe-box {
    background-color: rgba(252, 253, 244, 0.8);
    padding: 2vw;
}

ul.ingredients li:before {
    display: inline-block;
    height: 24px;
    width: 24px;
    background-size: 24px 24px;
    position: absolute;
    left: 40px;
}

@media only screen and (max-width: 768px) {
    ul.ingredients li:before {
        left: 30px;
    }
}

@media only screen and (max-width: 564px) {
    ul.ingredients li:before {
        left: 20px;
    }
}

ul.ingredients li.coconuts:before {
    content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaWQ9IkxheWVyXzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDk3IDk3OyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgOTcgOTciIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6IzgyQTFEMzt9Cgkuc3Qxe2ZpbGw6I0ZGRkZGRjt9Cgkuc3Qye2ZpbGw6I0YxNkM2Qjt9Cgkuc3Qze2ZpbGw6I0ZCQ0E2MDt9Cgkuc3Q0e2ZpbGw6IzUwQkZFODt9Cgkuc3Q1e2ZpbGw6IzY4QkQ2MTt9Cgkuc3Q2e2ZpbGw6I0I0QUFEMzt9Cgkuc3Q3e2ZpbGw6IzY5QzNBMzt9Cgkuc3Q4e2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6NDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQo8L3N0eWxlPjxnPjxjaXJjbGUgY2xhc3M9InN0NCIgY3g9IjQ4LjUiIGN5PSI0OC41IiByPSI0OCIvPjxnPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik03MC45LDUwYy0xMy41LDAtMjUuNC05LjUtMjguMi0yMy4yYy0wLjEtMC43LTAuMi0xLjMtMC4zLTJDMzIsMjcuNSwyNC41LDM3LjEsMjQuNSw0OC4xICAgIGMwLDEzLjQsMTAuOCwyNC4yLDI0LDI0LjJjMTIuNiwwLDIzLTkuOSwyNC0yMi40QzcyLDQ5LjksNzEuNCw1MCw3MC45LDUweiIvPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik02OSw0NS4xTDQ3LjksMjcuNkM1MC42LDM3LjQsNTkuMiw0NC4zLDY5LDQ1LjF6Ii8+PC9nPjwvZz48L3N2Zz4=);
}

ul.ingredients li.capsules:before {
    content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTcgOTciIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA5NyA5NyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGc+PGNpcmNsZSBjeD0iNDguNSIgY3k9IjQ4LjUiIGZpbGw9IiNCNEFBRDMiIHI9IjQ4Ii8+PGc+PHBhdGggZD0iTTQ0LjksMzkuM2MtMS43LTEuMi0zLjgtMS43LTUuOC0xLjRjLTIuMSwwLjMtMy45LDEuNS01LjEsMy4ybC04LjEsMTEuNWMtMi41LDMuNS0xLjcsOC40LDEuOCwxMSAgICBjMS4zLDEsMi45LDEuNSw0LjUsMS41YzAuNCwwLDAuOSwwLDEuMy0wLjFjMi4xLTAuMywzLjktMS41LDUuMS0zLjJsOC4xLTExLjVDNDkuMiw0Ni43LDQ4LjQsNDEuOCw0NC45LDM5LjN6IiBmaWxsPSIjRkZGRkZGIi8+PHBhdGggZD0iTTY2LjYsMjhsLTE0LjEtMy4zYy0yLTAuNS00LTAuMS01LjcsMWMtMS43LDEuMS0yLjksMi44LTMuNCw0LjhsLTAuMSwwLjVDNDIuNCwzNSw0NSwzOS4xLDQ5LDQwbDE0LjEsMy4zICAgIGgwYzAuNiwwLjEsMS4xLDAuMiwxLjcsMC4yYzEuNCwwLDIuOC0wLjQsNC0xLjJjMS43LTEuMSwyLjktMi44LDMuNC00LjhsMC4xLTAuNUM3My4yLDMzLDcwLjcsMjguOSw2Ni42LDI4eiIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Ik02MSw0NS4yYy0xLjgtMS0zLjktMS4yLTUuOS0wLjZjLTIsMC42LTMuNiwyLTQuNiwzLjhsLTYuNiwxMi41Yy0yLDMuOC0wLjYsOC42LDMuMiwxMC42ICAgIGMxLjEsMC42LDIuNCwwLjksMy43LDAuOWMwLjgsMCwxLjUtMC4xLDIuMy0wLjNjMi0wLjYsMy42LTIsNC42LTMuOGw2LjYtMTIuNUM2Ni4yLDUyLDY0LjgsNDcuMyw2MSw0NS4yeiIgZmlsbD0iI0ZGRkZGRiIvPjwvZz48L2c+PC9zdmc+);
}

ul.ingredients li.glass-jar:before {
    content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDk2IDk2IiBpZD0iTGF5ZXJfMSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgOTYgOTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxjaXJjbGUgY3g9IjQ4IiBjeT0iNDgiIGZpbGw9IiM2OEJFNjMiIHI9IjQ3LjUiLz48Zz48cGF0aCBkPSJNNjguNSwyNS43Yy02LjEsMC0xMSw0LjktMTEsMTFjMCwxLjEsMC45LDIsMiwyYzYuMSwwLDExLTQuOSwxMS0xMUM3MC41LDI2LjYsNjkuNiwyNS43LDY4LjUsMjUuN3oiIGZpbGw9IiNGRkZGRkYiLz48cGF0aCBkPSJNNjkuMyw0My43Yy0xLjEtMS41LTIuNi0yLjMtNC4yLTIuNWMtMS45LTAuMi0zLjcsMC41LTUuNCwyLjFjLTAuMiwwLjItMC4zLDAuMi0wLjUsMCAgICBjLTEuNi0xLjUtMy41LTIuMy01LjQtMi4xYy0xLjYsMC4yLTMuMSwxLTQuMiwyLjVjLTIsMi41LTIuOCw2LjUtMi4zLDEwLjdjMC45LDYuOCw1LjEsMTEuOCw5LjUsMTEuM2MwLjktMC4xLDEuOC0wLjQsMi41LTAuOSAgICBjMC44LDAuNSwxLjYsMC44LDIuNSwwLjljMC4yLDAsMC40LDAsMC42LDBjNC4zLDAsOC4xLTQuOSw4LjktMTEuM0M3Mi4xLDUwLjIsNzEuMyw0Ni4yLDY5LjMsNDMuN3oiIGZpbGw9IiNGRkZGRkYiLz48Zz48cGF0aCBkPSJNNTIuOCwzMi4ydi02YzAtMS4xLTAuOS0yLTItMmgtMjFjLTEuMSwwLTIsMC45LTIsMnY2SDUyLjh6IiBmaWxsPSIjRkZGRkZGIi8+PHBhdGggZD0iTTQzLjUsNTQuOWMtMC43LTUuMywwLjQtMTAuMywzLjEtMTMuNmMxLjgtMi4zLDQuMi0zLjcsNi45LTRjMC4yLDAsMC40LDAsMC42LDBjLTAuNS0wLjQtMS0wLjgtMS42LTEuMSAgICAgSDI4LjFjLTIuMywxLTMuOSwzLjQtMy45LDYuMnYyM2MwLDMuNSwyLjYsNi4zLDUuOSw2LjNoMjAuNGMxLjgsMCwzLjQtMC45LDQuNC0yLjJDNDkuMiw2OC43LDQ0LjUsNjIuOCw0My41LDU0Ljl6IiBmaWxsPSIjRkZGRkZGIi8+PC9nPjwvZz48L2c+PC9zdmc+);
}

ul.ingredients li.sweetener:before {
    content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaWQ9IkxheWVyXzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNFNjVENUM7fQoJLnN0MXtmaWxsOiNGRkZGRkY7fQo8L3N0eWxlPjxnPjxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjI1NiIgY3k9IjI1NiIgcj0iMjU2Ii8+PHBhdGggY2xhc3M9InN0MSIgZD0iTTQxMy4yLDMwMy40Yy05LTI5LjEtMzguNy00Ny41LTY4LjgtNDNjLTIuNCwwLjQtNC44LDAuOS03LjEsMS44Yy0zLjgsMS42LTYuNiw0LjMtOS42LDcuMSAgIGMtMi4xLTExLTUuNS0yNC4yLTExLjEtMzguNmMtOC43LTIyLjItMjAuOS00Mi41LTM2LjMtNjAuMmMtNy4zLTguNC0xNS4zLTE2LjItMjQtMjMuNGM5LjQtOC4xLDIwLTE1LjgsMzIuMS0yMyAgIGMtMS0yLjItMS45LTMuNy0yLjQtNS43Yy0xMi41LDcuNC0yNCwxNS42LTM0LjUsMjQuN2MtMTAuNi04LjMtMjIuMS0xNS44LTM0LjUtMjIuM2MtMC41LDIuMS0xLjMsMy42LTIuMiw1LjggICBjMTIsNi40LDIyLjYsMTMuNCwzMiwyMC43Yy04LDcuMy0xNS4zLDE1LjItMjEuOSwyMy41Yy0xNC42LDE4LjQtMjYsMzkuMi0zMy43LDYxLjhjLTUsMTQuNi03LjgsMjgtOS40LDM5LjEgICBjLTMuMS0yLjYtNi01LjItOS45LTYuN2MtMi4zLTAuOS00LjctMS4zLTcuMS0xLjVjLTMwLjMtMy4yLTU5LjEsMTYuNS02Ni44LDQ2Yy04LjYsMzMuMSwxMS4yLDY2LjksNDQuMyw3NS41bDI1LjIsNi42ICAgYzMzLjEsOC42LDY2LjktMTEuMiw3NS41LTQ0LjNjNy45LTMwLjMtOC44LTYyLjMtMzgtNzMuNmMtNi40LTIuNS0xMC44LTEuNC0xNy4yLTAuNmMxLjUtMTAuOSw0LjMtMjQuMiw5LjItMzguNiAgIGM4LjMtMjQuNCwyNC4zLTU1LjUsNTQuNy04My40YzMyLjMsMjYuNyw0OS44LDU3LjUsNTkuMyw4MS43YzUuNSwxNC4yLDguOSwyNy4zLDEwLjksMzguMWMtNi40LTAuNS0xMC45LTEuNC0xNy4yLDEuMyAgIGMtMjguNywxMi41LTQzLjksNDUuMi0zNC43LDc1LjJjMTAuMSwzMi43LDQ0LjcsNTEsNzcuNCw0MC45bDI0LjktNy43QzQwNSwzNzAuNyw0MjMuMywzMzYuMSw0MTMuMiwzMDMuNHogTTEzNS42LDI4Ni45ICAgYy01LjUsNC41LTEwLDEwLjMtMTMuNSwxNi40Yy03LjUsMTMtOC44LDI4LTIuNCw0MS44YzEsMi4yLDAuNyw1LTEuNiw2LjNjLTIsMS4xLTUuMiwwLjYtNi4zLTEuNmMtNy41LTE2LjEtNy0zMy40LDEuMy00OS4xICAgYzMuOS03LjQsOS40LTE0LjgsMTYtMjAuMmMxLjktMS42LDQuNi0xLjksNi41LDBDMTM3LjIsMjgyLDEzNy41LDI4NS4zLDEzNS42LDI4Ni45eiBNNDAxLjMsMzQ0LjJjLTEsMi4zLTQuMiwzLTYuMiwxLjkgICBjLTIuNC0xLjItMi45LTMuOS0xLjktNi4yYzUuOC0xNCwzLjgtMjktNC4yLTQxLjZjLTMuOC01LjktOC42LTExLjYtMTQuMi0xNS44Yy0yLTEuNS0xLjgtNC44LTAuMy02LjVjMS44LTIsNC41LTEuOCw2LjUtMC4zICAgYzYuOCw1LjEsMTIuNiwxMi4yLDE2LjksMTkuNUM0MDYuOCwzMTAuNSw0MDguMSwzMjcuOCw0MDEuMywzNDQuMnoiLz48L2c+PC9zdmc+);
}

section.recipe ol.count-group {
    counter-reset: li;
    padding-left: 30px;
}

section.recipe .count-group-item::before {
    counter-increment: li;
    content: counters(li, ".") ".";
    position: absolute;
    left: 40px;
    padding: 0;
    font-family: Droid Serif;
    font-style: italic;
    font-size: 0.75em;
    text-align: center;
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 35px;
    line-height: 2.1;
    height: 35px;
    margin-top: -4px;
    background: transparent;
    color: rgba(94, 205, 221, 1.0);
    font-weight: 300;
}

@media only screen and (max-width: 768px) {
    section.recipe .count-group-item::before {
        left: 30px;
    }
}

@media only screen and (max-width: 564px) {
    section.recipe .count-group-item::before {
        left: 20px;
    }
}

.coconuts-recipe {
    background: url("https://fb-v1.cdn-bio.com/assets/yogurt-recipe-82a92b692061b8891bd5040364f141a0.jpg") no-repeat bottom right;
    width: 946px;
    height: 776px;
    right: 0;
    top: 0px;
    position: absolute;
    z-index: -1;
    background-size: 655px;
}

/* CRITICAL FACTORS
================================= */

section.critical-factors {
    background-color: rgba(251, 249, 232, 1.0);
}

section.critical-factors h3 {
    margin-top: 0;
    margin-bottom: 0;
}

@media only screen and (max-width: 1024px) {
    section.critical-factors h3 {
        font-size: 1.999em;
    }
}

@media only screen and (max-width: 768px) {
    section.critical-factors h3 {
        font-size: 1.799em;
    }
}

section.critical-factors h4 {
    margin-top: 0;
    text-transform: uppercase;
    position: relative;
    top: -73px;
    padding: 1vw;
    background-color: rgba(255, 255, 255, 1);
    border-top: 15px solid rgba(0, 0, 0, 0.06);
}

@media only screen and (max-width: 425px) {
    section.critical-factors h4 {
        top: -67px;
    }
}

section.critical-factors h4::before,
section.critical-factors h4::after {
    content: '';
    position: absolute;
    bottom: 0px;
    height: 20px;
    border-left: 15px solid rgba(0, 0, 0, 0.06);
    top: 0;
}

section.critical-factors h4::before {
    left: 0;
}

section.critical-factors h4::after {
    right: 0;
}

section.critical-factors h4 span {
    display: block;
    font-weight: 900;
    font-size: 0.9em;
    letter-spacing: -1.4px;
}

section.critical-factors .critical-factors-box {
    border: 15px solid rgba(0, 0, 0, 0.06);
    padding: 3vw;
    margin-bottom: 3vw;
    background-color: rgba(255, 255, 255, 1);
}

@media only screen and (max-width: 1024px) {
    section.critical-factors .critical-factors-box {
        margin-top: 7vw;
    }
}

@media only screen and (max-width: 425px) {
    section.critical-factors .critical-factors-box {
        margin-top: 17vw;
    }
}

section.critical-factors .critical-factors-box:first-child {
    margin-top: 3vw;
}

@media only screen and (max-width: 1024px) {
    section.critical-factors .critical-factors-box:first-child {
        margin-top: 5vw;
    }
}

@media only screen and (max-width: 425px) {
    section.critical-factors .critical-factors-box:first-child {
        margin-top: 15vw;
    }
}

section.critical-factors .critical-factors-description {
    margin-top: -70px;
}

/* ACTUALLY NEED PROBIOTICS
================================= */

/* NO-PRODUCT-WORKED
================================= */

section.no-product-worked {
    background-color: rgba(255, 255, 255, 1);
}

/* PICK PROBIOTIC
================================= */

section.pick-probiotic {
    background-color: rgba(242, 74, 66, 1);
    color: rgba(255, 255, 255, 1);
}

.pick-probiotic .count-group-item::before {
    counter-increment: li;
    content: counters(li, ".") ".";
    position: absolute;
    left: 3%;
    padding: 0;
    font-family: Droid Serif;
    font-style: italic;
    font-size: 2.75em;
    text-align: center;
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 50px;
    line-height: 2.1;
    height: 76px;
    margin-top: -25px;
    background: transparent;
    color: rgba(94, 205, 221, 1.0);
    font-weight: 600;
}

/* NAVY SEALS PROBIOTICS
================================= */

/*.p3om-bottle{
background: url(../img/sales-yogurt/p3om-bottle-guarantee-seal.png) no-repeat bottom right;
width: 946px;
height: 776px;
right: 0;
top: 0px;
position: absolute;
z-index: -1;
background-size: 655px;
}*/

section.navy-seals-probiotics .navy-seals-probiotics-box {
    border: 15px solid rgba(0, 0, 0, 0.06);
    padding: 3vw;
    margin-bottom: 3vw;
    background-color: rgba(255, 255, 255, 1);
}

section.navy-seals-probiotics h4 {
    margin-top: 0;
    text-transform: uppercase;
}

/* COST
================================= */

section.cost {
    background: linear-gradient(rgba(236, 231, 216, 1), rgba(209, 216, 209, 1));
}

section.cost .cta-button .order-cta-wrapper .order-cta-inner a {
    font-size: 1.7rem;
    box-shadow: 0 5px 0 0 rgba(229, 229, 229, .4);
}

section.cost .cta-button .order-cta-wrapper,
section.cost .cta-button .order-cta-wrapper .order-cta-inner {
    padding-bottom: 0;
}

/* TRUST
================================= */

section.guarantee {
    background-color: rgba(60, 64, 66, 1.0);
    color: rgba(254, 254, 254, 1.0);
}

section.guarantee h2 {
    color: rgba(254, 254, 254, 1.0);
}

/* TRUST
================================= */

section.trust {
    background-color: rgba(251, 249, 232, 1.0);
}

.trust .author-bio-box {
    position: initial;
    top: 0%;
    left: 0%;
    transform: translate( 0%, 0%);
    margin-bottom: 2vw;
}

/* STUDIES RESOURCES
================================= */

section.studies-resources {
    background: url("https://fb-v1.cdn-bio.com/assets/light-fruits-bottom-background-69f7fb46632ebaecfb5660694ce6f6ae.png") center bottom/100% no-repeat scroll, linear-gradient(hsla(60, 26%, 96%, 1.0), hsla(60, 26%, 96%, 1.0));
}

.resources-box {
    background: linear-gradient(rgba(247, 247, 242, 1), rgba(247, 247, 242, 1));
}

ul.arrow-ul.resources {
    font-size: 0.7em;
}

ul.arrow-ul.resources li:before {
    content: '\00bb';
    padding-right: 0px;
    margin-left: 0em;
    top: 0px;
}

/* ORDER PAGE
================================= */

/* ORDER PAGE HERO
================================= */

#p3om-yogurt-op section {
    padding: 3em 0;
}

section.hero-aqua {
    background-image: url(./hero-aqua-bg.jpg);
    position: relative;
}

img.top-arrow {
    position: absolute;
    top: 0;
    height: 60px;
}

section.hero-orderpage {
    padding: 0;
}

section.hero-orderpage h2 {
    color: rgba(255, 255, 255, 1);
    margin-top: 10px;
    margin-bottom: 10px;
}

section.hero-orderpage h2 .save {
    color: rgba(44, 43, 89, 1);
}

@media only screen and (max-width: 991px) {
    section.hero-orderpage {
        padding-bottom: 2vw;
    }
}

@media only screen and (max-width: 687px) {
    section.hero-orderpage h2 {
        font-size: 1.727em;
    }
}

@media only screen and (max-width: 435px) {
    section.hero-orderpage h2 {
        font-size: 1.427em;
        margin-top: 0px;
    }
}

@media only screen and (max-width: 386px) {
    section.hero-orderpage h2 {
        font-size: 1.227em;
        margin-top: 45px;
    }
}

section.hero-orderpage h3 {
    margin-bottom: 10px;
}

section.hero-orderpage h3.guarantee {
    color: rgba(35, 54, 57, 1);
    margin-top: 10px;
    text-transform: uppercase;
}

@media only screen and (max-width: 687px) {
    section.hero-orderpage h3 {
        font-size: 1.299em;
    }
}

@media only screen and (max-width: 435px) {
    section.hero-orderpage h3 {
        font-size: 1.099em;
        margin-bottom: 5px;
        margin-top: 10px;
    }
}

@media only screen and (max-width: 386px) {
    section.hero-orderpage h3 {
        font-size: 0.999em;
    }
}

/* ORDER PAGE PACKAGE
================================= */

section.package-offer-orderpage h2 {
    color: rgba(44, 43, 89, 1);
}

.multiple-pricing-table .pricing-item {
    border-radius: 3px;
    margin-bottom: 4vw;
    background-color: hsla(0, 0%, 100%, 1.0);
    box-shadow: 0 15px 20px rgba(50, 50, 93, .07), 0 5px 5px rgba(0, 0, 0, .07);
    color: rgba(35, 54, 57, 1);
    padding: 2vw;
}

.multiple-pricing-table p {
    font-family: 'Source Sans Pro', sans-serif;
    margin-bottom: 0px;
    text-align: center;
}

.multiple-pricing-table .custom-button,
.multiple-pricing-table .custom-button:focus {
    font-size: 1em;
    font-weight: 600;
    margin-top: 0px;
    margin-bottom: 15px;
}

@media only screen and (max-width: 1199px) {
    .multiple-pricing-table .custom-button,
    .multiple-pricing-table .custom-button:focus {
        font-size: 1em;
    }
    .pricing-cta,
    .pricing-img {
        padding-top: 2vw;
    }
    .package-vertical span.product-name {
        display: block
    }
}

@media only screen and (max-width: 991px) {
    .multiple-pricing-table .custom-button,
    .multiple-pricing-table .custom-button:focus {
        font-size: 1.4em;
        padding: 1vw;
        font-weight: 600;
    }
}

@media only screen and (max-width: 532px) {
    .multiple-pricing-table .custom-button,
    .multiple-pricing-table .custom-button:focus {
        font-size: 0.9em;
        padding: 2vw;
        font-weight: 400;
    }
}

.multiple-pricing-table h2 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 900;
    font-size: 1.727em;
    text-align: center;
    margin-bottom: 0px;
    margin-top: 0px;
    color: rgba(35, 54, 57, 1);
}

p.package-price-today {
    margin-top: -50px;
}

@media only screen and (max-width: 699px) {
    p.package-price-today {
        margin-top: 0px;
    }
}

.package-price-today .price {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 5em;
    line-height: 0.8;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -0.05em;
}

.package-price-today .your-price {
    font-weight: 200;
    font-size: 0.9em;
}

@media only screen and (max-width: 699px) {
    .package-price-today .your-price {
        display: block;
    }
}

p.package-price-retail.saving {
    font-size: 1.4em;
    line-height: 1;
}

.multiple-pricing-table .remark {
    display: block;
    padding: 10px 20px;
    font-weight: 300;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #f4e790;
    margin: 1vw auto;
    font-size: 1em;
}

.strikeout {
    position: relative;
    line-height: 1em;
}

.strikeout::after {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    margin-top: calc(.125em / 2 * -1);
    content: "";
    border-bottom: .125em solid red;
}

span.save {
    font-weight: 800;
    color: rgba(221, 74, 97, 1.0);
}

@media only screen and (max-width: 702px) {
    .pricing-content,
    .pricing-img {
        display: block;
        margin: auto;
    }
}

sup.small {
    top: -25px;
    font-size: 60%;
}

/* FOOTER
================================= */

footer {
    position: relative;
    padding-top: 40px;
    background-color: #1a1a1a;
    /*margin-top: 60px;*/
}

#bio-wiki footer {
    position: relative;
    padding-top: 0px;
    background-color: rgba(252, 253, 243, 1);
}

footer .link-bg {
    margin-bottom: 20px;
    background-color: #222;
}

footer p {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2em;
    color: rgba(255, 255, 255, 0.4);
}

footer a {
    color: #c3d600;
}

footer .list-inline {
    padding-top: 35px;
}

#disclaimer p {
    font-size: .8rem;
    line-height: 1.4em;
}

p.disclaimer-box,
p.copy.box {
    padding: 15px;
    border: 1px solid #666;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: transparent;
    margin-bottom: 20px;
}

p.disclaimer {
    font-size: 0.8em;
    border-top: 1px solid #eee;
    margin-top: 20px;
}

ul li:before {
    position: relative;
    color: #dded5c;
}

ul.footer-bottom-links li:after {
    content: ": :";
    padding-left: 10px;
}

ul.footer-bottom-links li:last-of-type:after {
    content: "";
}

.footer-bottom-links li {
    font-size: 0.8em;
    margin-bottom: 0px;
    padding-bottom: 0px;
}