.header nav .menu-item-home,
.responsive-nav-logo {display: none;}

@media only screen and (max-width:1280px) {
.fromnature .i {width:400px; right: 47%}
.fromnature h2.top {right:48%;}
.fromnature .i2, .fromnature .i4, .fromnature .to h2.top {right:auto; left:48%;}
.site-2 .fromnature .i h3 { font-size: 25px;}
}
@media only screen and (max-width:1230px) {
.news .button {margin-top: 20px;}
}
@media only screen and (max-width:1200px) {
.iqout {
    min-height: 950px
}
.news p {max-width: 100%;}
.about ul li .text {top:35%;}
}
@media only screen and (max-width:1100px) {
    .about ul li .text {top:26%;}
    .about ul li .text div {max-width: 255px;}
    .header {
        background: #fff
    }
    body.header-alert-visible .header {border-top:1px solid #ddd;}

    /*.nav-up .header {
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        transform: translateY(-100%)
    }*/
    .header h1 {
        left: 32px
    }
    .header h1 a path,
    .header h1 a polyline,
    .header h1 a rect {
        -webkit-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        fill: #494949
    }
    .footer .row {padding: 0 30px;}
    .mobilemenu {
        position: absolute;
        top: 40px;
        right: 28px;
        width: 32px;
        z-index: 1501;
        transition: all 0.5s ease-out
    }
    .mobilemenu span {
        height: 3px;
        background: #494949;
        display: block;
        margin-bottom: 5px;
        -webkit-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out
    }
  /*  .menuopen .mobilemenu {
      transform: translate3d(-200px, 0, 0);
    }*/
    /*
    .menuopen .mobilemenu span {
        background: #fff
    }*/
    .menuopen .mobilemenu span:first-child {
        -webkit-transform: rotate(45deg) translateX(5px) translateY(5px);
        -ms-transform: rotate(45deg) translateX(5px) translateY(5px);
        transform: rotate(45deg) translateX(5px) translateY(5px)
    }
    .menuopen .mobilemenu span:nth-child(2) {
        -webkit-transform: rotate(-45deg) translateX(0px) translateY(0px);
        -ms-transform: rotate(-45deg) translateX(0px) translateY(0px);
        transform: rotate(-45deg) translateX(0px) translateY(0px)
    }
    .menuopen .mobilemenu span:nth-child(3) {
        opacity: 0
    }
    .header nav .menu-item-home {display: block;}
    .responsive-nav-logo {display: block;
      position: absolute;
      bottom:170px;
      left:50%;
      width: 90px;
      text-align: center;
      transform: translateX(-50%);
    }
    .responsive-nav-logo svg * {fill: #c3c3c3;}
      .header nav {
        height: 100%;
        height: calc(100vh - 100px);
        right: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        width: 100%;
        max-width: 200px;
        background: #494949;
        position: fixed;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-transition: all 0.5s ease-out;
        -o-transition: all 0.5s ease-out;
        transition: all 0.5s ease-out;
        z-index: 1500;
        top: 100px!important;
        padding: 0 0 30px 0;
        -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0);
        box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0);
        z-index: 10
    }
    .header nav .social {
      display: block;
      position: absolute;
      bottom:125px;
      left:0;
      text-align: center;
      width: 100%;
    }
    .header nav .social a {
      font-size:26px;

    }
    .header nav .social .s { height: 26px;}
    .header nav .privacy-link {
      display: block;
      position: absolute;bottom: 100px;
      font-size: 9px;
      font-weight: bold;
      color:#afafaf;
      border-bottom: 1px solid #afafaf;
      left:50%;
      transform: translateX(-50%);
      white-space: nowrap;
    }
    .header nav ul li a:after {display: none;}
    .menuopen .header nav {
        -webkit-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
        /*-webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5)*/
    }
    .header nav ul {
        float: none
    }
    .header nav ul li {
        float: none;
        padding: 0 20px;
        display: block;
        height: auto!important;
        padding-left: 13px;
        border-left:7px solid #efa56a;
    }
    .header nav ul li:nth-child(2) {border-left-color:#e4746e}
    .header nav ul li:nth-child(3) {border-left-color:#60bdcb}
    .header nav ul li:nth-child(4) {border-left-color:#fbeca6}

    .header nav ul li a,
    .header nav ul li span {
        padding: 0;
        line-height: 70px!important;
        color: #fff!important;
        height: auto!important;
        display: block;
        text-transform: uppercase;
        font-weight: bold;
        font-family: 'futuramc',sans-serif;
        background: url(../img/nav-arrow.svg) right center no-repeat;
        background-size: 11px auto;
    }
    /*.header nav ul li.current-menu-item {
      border-left:7px solid #60bdcb;
      padding-left: 8px;
    }*/
    .header nav ul li a:focus,
    .header nav ul li a:hover,
    .header nav ul li span:focus,
    .header nav ul li span:hover {
        color: #fff;

    }
    .header nav ul li ul {
        position: relative;
        background: none;
        top: auto;
        left: auto;
        padding-top: 5px
    }
    .header nav ul li ul li {
        height: auto;
        white-space: normal
    }
    .header nav ul li ul li a {
        padding: 7px 0;
        text-transform: none
    }
    .hero ul .text {padding-top:100px;}
    .fromnature .i {
        top: 230px
    }
    .fromnature .i p {
        font-size: 14px; line-height: 1.3
    }
    .fromnature .i .ico {
        width: 70px;
        height: 70px
    }
    .fromnature .i h3 {
        font-size: 26px
    }
    .fromnature .i,
    .fromnature .i3 {
        margin-right: 130px;
        width: 360px;
        padding-right: 90px
    }
    .fromnature .i2,
    .fromnature .i4 {
        margin-left: 120px;
        width: 320px;
        padding-left: 90px;
        padding-right: 0
    }
    .fromnature .i3,
    .fromnature .i4 {
        top: 420px
    }
    .fromnature h2 {
        white-space: nowrap
    }
    .fromnature .to .i,
    .fromnature .to .i3 {
        width: 350px
    }
    .fromnature .to .i2,
    .fromnature .to .i4 {
        width: 380px
    }
    .domore .cleanser .i2 {
        right: auto;
        left: 50%
    }
    .domore .cleanser .i1 {
        max-width: 400px;
        left: auto;
        right: 50%;
        margin-right: 50px
    }
    .tweets .tweet {
        padding: 20px 20px 20px 335px
    }
    .tweets .tweet p {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 30px
    }
    .tweets .tweet .reply {
        margin-bottom: 15px;
        padding-left: 60px;
        padding-top: 0
    }
    .tweets .tweet .reply p {
        font-size: 14px;
        margin-bottom: 0
    }
    .tweets .tweet .reply .avatar {
        width: 50px;
        height: 50px
    }

    .intheknow .slider {
        max-width: 800px
    }
    .vs .almond {
        margin-left: 230px
    }
    .vs .i p {
        font-size: 16px
    }
    .vs .dairy {
        margin-right: 230px
    }
    .iq .iqin .iqin2 {
        padding: 100px 50px
    }
    .iq .iqsteps {
        width: 400px;
        height: 400px
    }
    .iq .iqsteps h3 {
        font-size: 22px
    }
    .steps .text .i {
        padding: 0 30px
    }
    .steps .mythsslider h3 {
        font-size: 28px
    }
    .fromnature .from h2 {
      margin-right: 170px;
    }
    .fromnature .to h2 {
      margin-left:160px;
    }
    #fakeScrollContainer {display: none;}
    .tweets .row {display: block;}
    .tweets .columns {
        width: 100%
    }
    .tweets .row .columns.medium-5 {margin-top:40px;}
    .fromnature:after {    background-size: auto 60%;}


}

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

    .site-2 .steps .imgs { width: 50%;}
    .site-2 .steps .text { width: 100%;}
    .site-2 .steps .stepsin { padding-left: 50%;}
    .site-2 .steps .imgs li .bg { background-position: top center; }
    .site-2 .steps .bx-pager { left: 50%;}
    .scroll .languages a {color: #fff;}
    .menu-main-menu-container { width: 100%;}
}

@media only screen and (max-width: 1024px) {
    .site-2 .steps .text p {font-size: 16px; line-height: 1.3;}
}

@media only screen and (max-width: 880px) {
.site-2 .steps .mythsslider .answer { max-height: none;}
}

@media only screen and (max-width: 700px) {
.site-2 .steps .mythsslider { padding-left: 0; }
.site-2 .steps .bx-pager { left: 0; }
.site-2 .steps .imgs { width: 100%; }
}

@media only screen and (max-width: 1024px) {
	.about ul {flex-wrap: wrap;}
	.medium-block-grid-3 > li {width: 100%;}
  .about ul li.active {width: 100%;}
	.about ul li.inactive {width: 100%;}
	.about ul li .text {top: 30%;}
  .about ul li .text div {max-width: 500px;}
	.tweets, .steps {padding-bottom: 90px;}
  .button:before,
  button:before {display: none!important;}
  .fromnature h2.top {position: relative; top:30px!important; left:40px;width:100%;float:left;margin-bottom:40px;}
  .fromnature h2.top .title,
  .fromnature h2.top span {text-align: left; float:left;width: auto; position: static;clear:none; }
  .fromnature h2.top span {margin-top:20px;}
  .fromnature h2.top .title span {float:left; width: auto;}
  .fromnature h2.top .s {float:left;transform: rotate(90deg) translate(28px, 0px);}
  .fromnature .to h2.top {margin-left:0px;left:40px;}
  .fromnature .i h3 {line-height: 1;}
  .calculator li .result.loose p {font-size:18px;}
  .hero .bx-pager {background:transparent;box-shadow: none;}
  .hero .bx-pager .bx-pager-item a:before {background-color:#fff;}
  .steps .text p {font-size: 16px; line-height: 1.3;}
}
@media only screen and (max-width: 1024px) and (min-width:810px) {
  .vs .vsin .figure {
      width: 250px;
      height: 250px;
  }
  .vs .a1, .vs .d1 {margin-top: -70px;}
  .vs .a2, .vs .d2 {margin-top: -90px;}
  .vs .a3, .vs .d3 {margin-top: -110px;}

  .vs .dairy {margin-right:130px;}
  .vs .almond {margin-left:130px;}
}

@media only screen and (max-width:950px) {
    .roundtheclock .round {zoom: 0.8;}
    .about ul li .text div {max-width:100%;}
    .about ul li.inactive, .about ul li {padding-bottom: 60%;}
    .about ul li.active {padding-bottom: 70%;}

    .hero ul h2 {
        font-size: 48px
    }
    .domore {
        overflow: hidden
    }
    .domore .cleanser .i1 {
        width: 100%;
        max-width: 100%;
    }
    .domore .cleanser .i2 {
        width: 100%
    }
    .domore .cleanser .i2 .bg {
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover!important
    }
    .tweets .row {display: block;}
    .tweets .columns {
        width: 100%
    }
    .tweets .tweet {
        padding: 30px 30px 30px 345px
    }
    .tweets .tweet p {
        font-size: 18px;
    }
    .tweets .tweet .reply {
        margin-bottom: 25px
    }
    .tweets .hashtag {
        max-width: 550px;
        margin: 0 auto
    }
    .iq .i .text {
        left: 30px;
    }
    .iq .i h3 {
        font-size: 30px
    }
    .iq .iqin .iqin2 {
        padding: 60px 30px
    }
    .intheknow .slider {
        max-width: 700px
    }
    .intheknow ul a {
        max-width: 320px
    }
    .steps .imgs {
        width: 330px
    }
    .steps .imgs li .bg {
        background-position: center
    }
    .steps .stepsin {
        padding-left: 330px;
        min-height: 500px;

    }
    .steps .imgs li {height: 500px;background-color: #fff7e8;}
    .steps .mythsslider .card {
        min-height: 350px;
    }
    .steps .bx-pager {
        left: 330px;
        right: 0
    }
    .news {
        text-align: center
    }
    .news .columns {
        width: 100%
    }
    .news .columns:nth-child(1) {
      margin-bottom:20px;
    }
    .news img {
        width: 100%;
        /*margin-bottom: 50px*/
    }
    .news h2,
    .news p {
        max-width: 550px;
        margin: 0 auto 20px
    }

    .news .button {
        float: none
    }
    .footer  {
        height: auto;
        padding-bottom: 15px
    }
    .footer  p {
        text-align: left;
        margin-top: 10px
    }
    .didyouknow .medium-5 {
        width: 50%;
        margin: 0!important
    }
    .didyouknow .i.large h4 {
        font-size: 38px
    }
    .iq, .iqout {height: auto;}
    .iq .row .columns {
      width:100%;
      height: auto;
    }
    .iq .i {padding-bottom:50%;}
    .iq .iqsteps {
        width: auto;
        padding-bottom: 100%;
        height: auto
    }
    .iq .iqsteps .bx-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }
    .iq .iqsteps ul li {
        padding-top: 40px
    }
    .iq .iqsteps .bx-pager {
        bottom: 30px
    }
    .iq .iqstepsout {
        margin: 0 -40px
    }
    .iq .iqstepsout .i {
        padding: 0 30px
    }
    .iq .iqstepsout .i h3 {
        font-size: 24px
    }
    .roundtheclock .round {
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9)
    }
    .vs h2 {
        font-size: 50px;
            padding-left: 0;
    }
    .vs h2 span {
        font-size: 80px
    }
    .vs .vsin {
        height: 1050px;
        padding-top: 70px
    }
    .vs .vsin .figure:before {
        height: 50px
    }
    .vs .vsin .figure:after {
        height: 500px
    }
    .vs .dairy {
        margin-right: 50px
    }
    .vs .almond {
        margin-left: 50px
    }
    .vs .a1,
    .vs .d1 {
        top: 520px
    }
    .vs .a2,
    .vs .d2 {
        top: 690px
    }
    .vs .a3,
    .vs .d3 {
        top: 860px
    }
    .fromnature:after {
      display: none;
    }
    .fromnature .from h2 {
      margin-right: 60px;
    }
    .fromnature .to h2 {
      margin-left:60px;
    }
    .fromnature .from h2:not(.top),
    .fromnature .to h2:not(.top) {
      top: 50%;
      transform: translateY(-50%);
      white-space: normal;
    }
    .fromnature .line .handler,
    .site-2 .fromnature .line .handler {
      width:86px;
      height: 86px;
      background: url(../img/blue-circle-handler.png) center no-repeat;
      background-size:cover;
      border-radius: 50%;
      padding: 0 15px;
    }
    .fromnature .line .handler:before,
    .fromnature .line .handler:after {
      content:'';
      float:left;
      margin: 0 5px;
      width: 15px;
      height: 86px;
      background: url(../img/arroww.svg) center center no-repeat;
      animation-name: bounceAlpha;
      animation-duration:1.4s;
      animation-iteration-count:infinite;
      animation-timing-function:linear;
      background-size:13px;
    }
    .fromnature .line .handler:before {
      background-image: url(../img/arroww-p.svg);
      animation-name: bounceAlpha-r;
    }
    .fromnature .line .handler:after {
      float:right;
    }
    .fromnature .i, .fromnature .i2,
    .fromnature .i3, .fromnature .i4 {
      float:left; margin-left: 40px; margin-top:20px;
      position: relative;
      top: auto;
      left:0;
      padding-left:90px;
      padding-right:0;
      width:80%!important;

    }
    .fromnature .i {opacity: 0;transition: all 0.5s ease;}
    .fromnature .active .i {opacity: 1;}
    .fromnature .i .ico,
    .fromnature .i h3, .fromnature .i p {left:0!important; transform: none!important; transition: none!important;}

    .fromnature .active .i h3,
    .fromnature .active .i p {text-align: left; line-height: 1.3; transform:none;}

    .domore {
        padding-bottom: 50px
    }
    .domore .cleanser {
        background: #d6f0f1;
        margin: 0 20px;
        padding: 20px 20px 40px;
        margin-top: 15px;
        height: auto
    }
    .domore .cleanser .watch {
        top: 100%;
        left: 50%;
        margin: -56px 0 0 -56px
    }
    .domore .cleanser .i2 {
        position: relative;
        left: auto;
        right: auto;
        width: 100%;
        padding-bottom: 100%;
        height: auto
    }
    .domore .cleanser .i1 {
        margin: 0;
        right: auto;
        position: relative;
        top: auto;
        height: auto!important;
        margin-top: 130px
    }
    .domore .cleanser .i1 .badge {
        display: none
    }
    .domore .cleanser .i1 .bg {
        display: none
    }
    .domore .cleanser .i1 .text {
        position: relative;
        top: auto
    }
    .intheknow .next, .intheknow .prev {top:120px;}
    .article--eight .columns.medium-10.medium-offset-1 {margin-left:0!important; width: 100%}

    .roundtheclock .round {
        display: none
    }
    .roundtheclock .mobileslider {
        display: block;
        position: relative;
        margin-bottom: 50px
    }
    .roundtheclock .mobileslider ul {
        margin: 0;
        padding: 0
    }
    .roundtheclock .mobileslider ul li {
        list-style: none;
        margin: 0;
        padding: 0
    }
    .roundtheclock .mobileslider .bg {
        width: 260px;
        height: 260px;
        border-radius: 100%;
        background-position: center;
        background-size: cover;
        margin: 0 auto 20px;
        border: 10px solid #bbbbbb
    }
    .roundtheclock .mobileslider .text {
        text-align: center
    }
    .roundtheclock .mobileslider .text .time {
        font-family: 'HanleyScript';
        text-transform: none;
        font-weight: normal;
        color: #494949;
        font-size: 26px
    }
    .roundtheclock .mobileslider .text h2 {
        color: #efa56a
    }
    .roundtheclock .mobileslider .bx-next,
    .roundtheclock .mobileslider .bx-prev {
        width: 40px;
        height: 40px;
        border: 2px solid #efa56a;
        display: block;
        text-indent: -3000px;
        font-size: 0;
        overflow: hidden;
        border-radius: 100%;
        position: absolute;
        top: 110px;
        right: -10px
    }
    .roundtheclock .mobileslider .bx-next div,
    .roundtheclock .mobileslider .bx-prev div {
      width: 40px;
      height: 40px;
    }

    /*.roundtheclock .mobileslider .bx-next.disabled,
    .roundtheclock .mobileslider .bx-prev.disabled {
        opacity: 0.3;
        pointer-events: none
    }
    .roundtheclock .mobileslider .bx-next:before,
    .roundtheclock .mobileslider .bx-prev:before {
        position: absolute;
        content: '';
        display: block;
        right: 0;
        top: 0%;
        bottom: 0%;
        left: auto;
        width: 0;
        background: #efa56a;
        -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
    }
    .roundtheclock .mobileslider .bx-next:after,
    .roundtheclock .mobileslider .bx-prev:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        background: url(../img/arrow.svg) no-repeat center
    }
    .roundtheclock .mobileslider .bx-next:hover:before,
    .roundtheclock .mobileslider .bx-prev:hover:before {
        left: 0;
        width: 100%
    }
    .roundtheclock .mobileslider .bx-next:hover:after,
    .roundtheclock .mobileslider .bx-prev:hover:after {
        background: url(img/arroww.svg) no-repeat center
    }*/
    .roundtheclock .mobileslider .bx-prev {
        left: -10px;
        right: auto;
        -webkit-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
        transform: scaleX(-1)
    }
    .domore .cleanser .text .title {font-size: 30px;}
}

@media only screen and (max-width:1050px) {
.site-2 .steps .mythsslider .options .option, .site-2 .steps .mythsslider .button--back { width: auto; padding: 7px 10px 0 10px; }
.site-2 .steps .mythsslider .options span.or { width: 100%; text-align: center;}
.site-2 .steps .text .title { line-height: 1; margin-bottom: 10px;font-size: 20px;}
}

@media only screen and (max-width:815px) {
  .site-2 .vs .i h3 { font-size: 22px;}
  .site-2 .vs .i p { font-size: 14px;}
}

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

    .about ul li,   .about ul li.inactive {padding-bottom:90%;}
    .about ul li.active {padding-bottom: 100%;}
    .header {
        height: 66px
    }
    .header nav {top:66px!important; height: calc(100vh - 66px);}
    .header nav ul li a, .header nav ul li span {
      line-height: 66px!important;
    }
    .hero ul .text {padding-top:66px;}
    .header h1 {
        left: 30px;
        top: 8px
    }
    .header h1 a {
        width: 94px
    }

    .site-2 .header h1 a { width: 145px; height: 45px;}
    .site-2 .header h1 a svg { float: left; width: 100%; height: auto;}


    .mobilemenu {
        top: 25px;
        right: 26px
    }
    /*.menuopen .mobilemenu {
      transform: translate3d(-180px, 0, 0);
  }*/
    .hero, .header-alert {
        height: 50vh;
        min-height: 400px
    }
    .hero ul h2 {
        font-size: 32px
    }
    .hero ul h3 {
        font-size: 22px
    }
    .hero ul h3:after,
    .hero ul h3:before {
        width: 20px;
        margin-top: 15px
    }
    .hero ul h3:before {
        margin-right: 10px
    }
    .hero ul h3:after {
        margin-left: 10px
    }
    .values figure {
        width: 240px;
        height: 240px
    }
    .values .bx-next {
        right: -10px;
        top: 110px;
        width: 40px;
        height: 40px
    }
    .values .bx-prev {
        left: -10px;
        top: 110px;
        width: 40px;
        height: 40px
    }
    .values .bx-next div,
    .values .bx-prev div {
      width: 40px;
      height: 40px;
      top:-2px;
    }
    .values li h3 {
      font-size:18px;
    }
    .values li .text {
        margin: 0 -10px
    }
    .values li .text p {
        font-size: 16px; line-height: 1.4;
    }
    h2.sectiontitle {
        font-size: 36px
    }

    .tweets {
        padding-bottom: 50px
    }
    .tweets .tweet {
        display: none
    }
    .tweets .row .columns.medium-5 {margin-top:0;}
    .iqout {
        max-height: unset;
        height: auto
    }
    .iq .i {
        padding-bottom: 80%;
        text-align: center
    }
    .iq .i .text {
        left: 0;
        width: 100%;
        padding: 0 20px;
        max-width: none;
        bottom:auto; top:50%;transform: translateY(-50%);
    }
    .iq .i h3 {
        font-size: 26px
    }
    .iq .iqin {
        height: auto
    }
    .iq .iqin .iqin2 {
        position: relative;
        height: auto;
        padding: 50px 20px
    }
    .iq .iqin h2 {
        font-size: 46px
    }
    .iq .iqin .q {
        font-size: 22px;
        margin-bottom: 30px
    }
    .intheknow ul a {
        max-width: 280px
    }
    .intheknow ul a h3 {
        padding: 0
    }
    .intheknow .next,
    .intheknow .prev {
        top: 76px
    }
    .steps {
        padding-bottom: 50px
    }
    .steps .stepsin {
        height: auto;
        padding-top: 270px;
        padding-left: 0;
        padding-bottom: 60px
    }
    .steps .imgs {
        height: 250px;
        width: 100%
    }
    .steps .imgs ul li {
        height: 250px
    }
    .steps .imgs ul li .bg {
        background-size: contain
    }
    .steps .bx-pager {
        left: 0;
        bottom: 20px
    }
    .steps .text li {
        padding-bottom: 30px;
        height: auto;
        padding-top: 30px
    }
    .steps .text .i {
        padding: 0 30px
    }
    .steps .text .i p {
        font-size: 16px
    }
    .news p {
        display: none
    }
    .footer  {
        text-align: center
    }
    .footer  a.footerlogo {
        margin: 0 auto 10px
    }
    .footer  .social {
        text-align: right
    }
    .footer  p {
        text-align: center
    }
    .steps .mythsslider {
        margin: 0 -20px;
        margin-top:50px
    }
    .steps .mythsslider .stepsin {
        margin: 0 20px;
        padding-bottom: 40px
    }
    .steps .mythsslider .text .i {
        padding: 0 20px
    }
    .steps .mythsslider .options a {
        width: 100px;
        font-size: 26px
    }
    .didyouknow .medium-5 {
        width: 100%
    }
    .didyouknow__columns .columns:nth-child(2) { margin-top:50px!important;padding-bottom:50px;}
    .didyouknow__columns .columns:nth-child(2) .i { padding-top:50px; border-top:3px solid #efa56a; }

    .vs h2 {
        padding-left: 0px;
        font-size: 28px
    }
    .vs h2 span {
        font-size: 40px
    }
    .vs .vsin {
        height: 1050px;
        padding-top: 30px
    }
    .vs .vsin .figure {
        width: 270px;
        height: 270px;
        -webkit-transform: translateX(-3px);
        -ms-transform: translateX(-3px);
        transform: translateX(-3px)
    }
    .vs .vsin .figure:before {
        height: 50px
    }
    .vs .vsin .figure:after {
        height: 500px
    }
    .vs .i .f {
        width: 50px;
        height: 50px;
        padding: 10px;
        top: -60px
    }
    .vs .i .f img {
        max-height: 26px
    }
    .vs .i h3 {
        font-size: 22px;
        line-height: 1.2
    }
    .vs .i p {
        font-size: 14px;
        line-height: 1.5
    }
    .vs .dairy {
        margin-right: 20px;
        padding-right: 0px
    }
    .vs .almond {
        margin-left: 20px;
        padding-left: 0px
    }
    .vs .a1,
    .vs .d1 {
        top: 380px
    }
    .vs .a2,
    .vs .d2 {
        top: 620px
    }
    .vs .a3,
    .vs .d3 {
        top: 830px
    }
    .article {
        padding: 40px 0
    }
    .article p {
        font-size: 16px;
        line-height: 1.6
    }
    .article .hl {
        padding: 0;
        font-size: 36px;
        line-height: 1.2
    }
    .article .video {
        margin: 40px -20px;
        padding-bottom: 70%
    }
    .article__row {padding: 40px 0;}
    .article .hl, .article blockquote p {padding: 0; font-size: 36px; line-height: 1}
    .fromnature h2 span { white-space: normal;}
    .fromnature .to h2.top {left:40px;}
    .fromnatureout, .fromnature {min-height: 850px}
    .fromnatureout {margin:0; padding:0;}
    .error-404.not-found {height: 100vh;}
    .error-404.not-found .contents p {font-size:24px;}
    .error-404 .contents {margin-top:30px;}
    .header h1 {
        left: 20px;
    }
    .mobilemenu {
        right: 16px
    }

    .article .columns.sep:after {
      width: 100%;
      height: 2px;
      left: auto;
      top: auto;
      bottom: 0;
      position: relative;
      display: block;
      margin: 50px auto;}
    .article--eight .columns.medium-10.medium-offset-1  .medium-6 {width:100%;}
}

@media only screen and (max-width: 720px) and (max-height: 440px) {
    .error-404 .page-title {top: 40%;}
    .responsive-nav-logo {display: none;}
      .header nav ul li a, .header nav ul li span {
        line-height: 36px!important;
      }
      .header nav .social {bottom:100px}
      .header nav .privacy-link {bottom:80px}
}

@media only screen and (max-width:640px) {
    .iq .iqstepsout {
        margin: 0 auto;
        max-width: 400px
    }
    .iq .iqstepsout .i h3 {
        font-size: 22px;
        margin: 0px 0 10px
    }
    .didyouknow .slider ul {
        margin: 0;
        padding: 0
    }
    .didyouknow .slider ul li {
        list-style: none;
        margin: 0;
        padding: 0
    }
    .didyouknow .i {
        padding-bottom: 10px
    }
    .didyouknow .bx-pager {
        text-align: center
    }
    .didyouknow .bx-pager-item {
        display: inline-block;
        width: 20px;
        padding-top: 20px
    }
    .didyouknow .bx-pager-item a {
        width: 20px;
        height: 20px;
        position: relative;
        display: block;
        text-indent: -3000px;
        font-size: 0;
        overflow: hidden;
        overflow: visible
    }
    .didyouknow .bx-pager-item a:before {
        width: 8px;
        height: 8px;
        background-color: #4d4c45;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -4px 0 0 -4px;
        content: '';
        display: block;
        border-radius: 100%;
        -webkit-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out
    }
    .didyouknow .bx-pager-item a:after {
        border: 2px solid #efa56a;
        width: 24px;
        height: 24px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -12px 0 0 -12px;
        border-radius: 100%;
        content: '';
        display: block;
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        -webkit-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out
    }
    .didyouknow .bx-pager-item a.active:after {
        border-color: #efa56a;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    .about ul li {
        padding-bottom: 80%
    }
    .about ul li.active {
        padding-bottom: 100%
    }
    .about ul li .text {top: 25%;}
    .about ul li.active .text {top: 15%;}
    .about ul li .bg {
        background-position: center;
        background-size: cover;
        background-position: top
    }
    .iq .i {
    padding-bottom: 88%;
		}
		.news h2 {
    font-size: 25px;
		}
		.vs .vsin .figure {
    width: 270px;
    height: 270px;
		}
    .didyouknow { padding-bottom: 0;overflow: hidden;}
    .didyouknow .sectiontitle + h4 { margin-bottom: 0;}
    .fromnature .i h3 {font-size: 22px;margin-top:0;}

    .fromnature .from h2:not(.top), .fromnature .to h2:not(.top) { margin: 0;   transform: translateY(-50%) scale(.6);   }
    .fromnature h2:not(.top) {right:55%;}
    .fromnature .to h2:not(.top) {left:55%; right:auto;}
    .fromnature .i .ico {transform: scale(.6)!important; transition: none;transform-origin: left top}
    .fromnature .i {padding-left:55px;margin-left:20px; width:calc(100% - 40px)!important;}
    .fromnature h2.top {left: 20px;}
    .fromnature .to h2.top {left: 20px;}
    .fromnature h2.top .title {font-size:26px;}
    .fromnature h2.top .s {transform:rotate(90deg) translate(17px, 0px); width:20px; height: 2px;}
    .fromnature h2.top span {margin-top:8px;font-size: 16px;}
    .fromnature .i, .fromnature .i2, .fromnature .i3, .fromnature .i4 {margin-top:20px;}
    .didyouknow .i.large p {font-size:30px;}
    .didyouknow .i.large .button {margin-top:0;}
    .footer .social { text-align: center }
    .header nav {width:100%;}
    .header h1 {top:12px;}
    .mobilemenu {top:22px;}
    .calculator li .result p strong {font-size: 40px;margin-bottom:5px;}
    .calculator li p {font-size: 18px; line-height: 1.3;padding: 0 20px}
    .calculator li .result.loose p {font-size:16px;}

    .values .figurein2,.values li.active-slide .figurein2 { transform: scale3d(1,1,1); }

}
@media only screen and (max-width: 500px) {

.header-alert p {
  line-height: 1.2;padding: 10px; height: auto;
}
.header-alert p a {line-height: 1.2;height: auto;}
.header-alert p a span {height: 10px;margin-top:-3px;}
body.header-alert-visible .header {top:54px;}
}
@media only screen and (max-width: 450px) {
	.about ul li p {width: 100%;}
    .intheknow .slider {margin: 20px auto 0;}
    .intheknow ul li {padding:0 0 20px;}
    .didyouknow .columns.sep.in:after {height: 0;}
    .error-404 .page-title {top: 40%;}
    .calculator li .step-contents {padding: 30px;}

    .calculator li .dropdown {max-width: none; width: calc(100% + 40px);
    transform: translateX(-20px);}
    .iq--calculator, .iqout--calculator {min-height: 700px;}
    .calculator li .step-wrapper {min-height: 350px;}
    .fromnature .i h3 {margin-bottom:0;}
    .about ul li,
    .about ul li.inactive, .about ul li.active {padding-bottom:150%;}
    .about ul li .text div {margin-bottom:10px;}
    .fromnatureout, .fromnature {min-height: 750px}
    .steps .mythsslider .card {min-height: 450px;}
    .steps .mythsslider .answer {max-height: 450px}

    .hero ul h3 {
      font-size: 16px;
    }
    .hero ul h3:after, .hero ul h3:before {
      margin-top:10px;
    }
    .footer__link {
      display: block;
    }
    .steps .text .i {padding: 0 10px;}
    .steps .text .title {font-size: 23px; white-space: nowrap;}
    h2.sectiontitle+h4 {font-size: 23px;}
    h2.sectiontitle {
        font-size: 30px
    }
    .site-2 .steps .stepsin {
      padding-left:0;
    }
    .site-2 .about ul li.active .btn, .site-2 .about ul li.active p { line-height: 1.3; }
}

@media only screen and (max-width:360px) {
  .fromnature.aos-animate .line .handler {transform: translate(-50%,-50%) scale(0.6);}
  .fromnature .to h2:not(.top) {right:auto;}
  .fromnature .i .ico {transform: scale(.4)!important;}
  .fromnature .active .i h3 {font-size:20px; margin-top:0;}
  .fromnature h2.top .title {
    font-size: 22px;
    margin-top: 3px;
  }
  .site-2 .fromnature h2.top .title {font-size: 19px;}
  .site-2 .fromnature h2.top span {font-size: 15px;}
  .fromnature .i {padding-left:40px;}
    .fromnatureout {height: 800px;}

    

    .header h1 {left:15px;}
    .mobilemenu {right:11px;}
    .about ul li, .about ul li.inactive, .about ul li.active {
    padding-bottom: 170%;
    }
    .about ul li.active {
      padding-bottom: 200%;
    }

    .about ul li .text {top: 20px;}
    .about ul li.active .text {top:10%;}

    .hero ul h2 { font-size: 25px; }
}
@media only screen and (min-width:900px) and (max-height:760px) {
  .fromnature .i {transform: translateY(-60px);}
  .fromnature .i3, .fromnature .i4 {transform: translateY(-75px);}
  .fromnature .i h3 {margin:0;}
}

@media only screen and (max-width:600px) and (max-height:321px) {
  .header nav .social {bottom: 90px;}
  .header nav .privacy-link {bottom: 70px;}

}
@media only screen and (max-width:820px) and (max-height:450px) {
  .header-alert { min-height: 0;height: 100vh;}
  .header-alert img {max-height: 90vh;}

}

@media screen and (max-device-width: 768px){
  body{
    -webkit-text-size-adjust: none;
  }
}

@media only screen and (max-width: 400px) {
.site-2 .vs .i h3 { font-size: 20px;}
.site-2 .vs .i p { font-size: 12px;}
.site-2 .calculator li p { font-size: 13px;}
.site-2 .calculator li .result p strong { font-size: 20px;}
.site-2 .calculator li .result.loose p { font-size: 11px;}

.site-2 .fromnature .from h2:not(.top), .fromnature .to h2:not(.top) { font-size: 40px;}
.site-2 .fromnature .i h3 { font-size: 20px;}
}
@media only screen and (max-width: 350px) {
.site-2 .fromnature .from h2:not(.top), .site-2 .fromnature .to h2:not(.top) { font-size: 35px;}
.responsive-nav-logo { display: none;}
.header nav { max-width: 200px;}
}

@media only screen and (max-height: 430px) {
  .header nav ul li a, .header nav ul li span { line-height: 40px!important;}
  .responsive-nav-logo { display: none;}
  .header nav .social { bottom: 20px;}
}