/* CSS Document */



@font-face {
  font-family: 'MyriadPro-Regular';
  src: url('../fonts/MyriadPro-Regular.eot');
  src: local('☺'), url('../fonts/MyriadPro-Regular.woff') format('woff'), url('../fonts/MyriadPro-Regular.ttf') format('truetype'), url('../fonts/MyriadPro-Regular.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MyriadPro-Bold';
  src: url('../fonts/MyriadPro-Bold.eot');
  src: local('☺'), url('../fonts/MyriadPro-Bold.woff') format('woff'), url('../fonts/MyriadPro-Bold.ttf') format('truetype'), url('../fonts/MyriadPro-Bold.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'Fontfabric-UniNeueHeavy';
  src: url('../fonts/Fontfabric-UniNeueHeavy.eot');
  src: local('☺'), url('../fonts/Fontfabric-UniNeueHeavy.woff') format('woff'), url('../fonts/Fontfabric-UniNeueHeavy.ttf') format('truetype'), url('../fonts/Fontfabric-UniNeueHeavy.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'Fontfabric-UniNeueRegular';
    src: url('../fonts/Fontfabric - UniNeueRegular.eot');
    src: local('☺'), url('../fonts/Fontfabric - UniNeueRegular.woff') format('woff'), url('../fonts/Fontfabric - UniNeueRegular.ttf') format('truetype'), url('../fonts/Fontfabric - UniNeueRegular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body {
    height: 100%;
    min-height:100%;
    -webkit-text-size-adjust:none;
    -webkit-font-smoothing: antialiased !important;
    background:#fff;


}

img {
    border: 0px;
    margin: 0px;
    padding: 0px;
}

form {
    margin: 0px;
    padding: 0px;
}

strong{
   
}
 

body{
    margin: 0px;
    padding: 0px;
    font-family: 'Fontfabric-UniNeueRegular';
    font-size: 18px;
    color: #1E3E79;
}

body.locked{
    overflow:hidden;
}

a {
    text-decoration: none;
    outline: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}


.clear {
    clear: both;
}

ol, ul, li {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6,
p {
    margin: 0px;
    padding: 0px;
    font-weight: normal;
}

#wrapper {
    position: relative;
    width:100%;
    min-height:100%;
    padding: 0px;
    margin: 0 auto 0 auto;
    padding:0px 0 0px 0;
    margin: 0 auto;
    overflow: hidden;
}



body.locked{
    overflow:hidden;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline:none;
}

.mob{
    display:none !important;
}




/* //////////////////////////////////////////////// */


.loader{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 10000000;
    background: #253B7C url("../images/ajax-loader.gif") no-repeat center center;
}



header{
    height:160px;
    position:absolute;
    z-index: 80;
    top: 0px;
    left: 0px;
    width: 100%;
}



header .logo{
    width: 12vw;
    display:block;
    position: absolute;
    left: 8.3vw;
    top: 0px;

}

header .logo img{
    width:100%;
}


footer {
    position: absolute;
    bottom: 1.5vw;
    left: 0px;
    width: 100%;
    color: #fff;
}

footer .links{
    display: block;
    text-align: center;
    color: #fff;
    font-size: 0.8vw;
    word-spacing: 2vw;
}

footer .links span{
    word-spacing: 0px;    
}

footer .links a{
    color: #fff;
    font-size: 0.8vw;
    word-spacing: 0px;
}

footer .social{
    display: inline-block;
    vertical-align: middle;    
    position: absolute;
    right: 5vw;
    bottom: -0.2vw;
}

footer .social a{
    background: url("../images/icon-social-fb-white.svg") no-repeat center center;
    background-size: contain;
    width: 2.2vw;
    height: 2.2vw;
    display:inline-block;
    vertical-align: middle;
    margin: 0 0 0 10px;
    position: relative;
    transition: all 200ms;
}

footer .social a:hover{
    opacity: 0.7;
}

footer .social a.yt{
    background-image: url("../images/icon-social-yt-white.svg");
}









.hero{
    position: relative;
    opacity: 0;
}

.hero img{
    width: 100%;
}


.hero .title{
    text-align: center;
    position: absolute;
    top: 4.4vw;
    left: 0px;
    width: 100%;
    z-index: 5;
    color: #fff;
    font-size: 1.5vw;
    font-family: 'Fontfabric-UniNeueHeavy';
    z-index: 90;
}


.hero .side-title{
    text-align: center;
    position: absolute;
    top: 25.7vw;
    left: calc(50% + 19vw);
    white-space: nowrap;
    z-index: 5;
    color: #fff;
    font-size: 1.7vw;
    font-family: 'Fontfabric-UniNeueHeavy';

    -ms-transform: rotate(13deg);
    -webkit-transform: rotate(13deg);
    transform: rotate(13deg);

}

.hero .content{
    text-align: center;
    position: absolute;
    bottom: 11vw;
    left: 0px;
    width: 100%;
    z-index: 5;
}


.hero .content .text{
    font-size: 1.5vw;
    line-height: 160%;
    color: #002F87;
    font-family: 'Fontfabric-UniNeueHeavy';
}




.vitamins{
    position:relative;
}

.vitamins img{
    width: 100%;
}


.vitamins .title{
    text-align: center;
    position: absolute;
    top: 2vw;
    left: 0px;
    width: 100%;
    z-index: 5;
    color: #fff;
    font-size: 2.2vw;
    font-weight: bold;
}


.vitamins .content{
    text-align: center;
    position: absolute;
    bottom: 15.5vw;
    left: calc(50% + 6.5vw);
    width: 30vw;
    z-index: 5;
    text-align: left;
}


.vitamins .content .text{
    font-size: 1.2vw;
    line-height: 140%;
    color: #fff;
    font-family: 'Fontfabric-UniNeueRegular';
    font-weight: bold;
}


.environment{
    position:relative;
}

.environment img{
    width: 100%;
}

.environment .title{
    text-align: center;
    position: absolute;
    top: 1.3vw;
    left: 0px;
    width: 100%;
    z-index: 5;
    color: #002F87;
    font-size: 2.2vw;
    font-weight: bold;
}

.environment .text{
    text-align: center;
    position: absolute;
    top: 5.5vw;
    left: 50%;
    width: 43.7vw;
    z-index: 5;
    color: #002F87;
    font-size: 1.4vw;
    line-height: 150%;
    font-weight: bold;

    -ms-transform: translate(-50%, -0%);
    -webkit-transform: translate(-50%, -0%);
    transform: translate(-50%, -0%);
}


.environment .content{
    position: absolute;
    top: 12.5vw;
    left: 0px;
    width: 100%;
}


.environment .sub-title{
    text-align: center;
    position: absolute;
    top: 1.6vw;
    left: 0px;
    width: 100%;
    z-index: 5;
    color: #002F87;
    font-size: 2.5vw;
    font-family: 'Fontfabric-UniNeueHeavy';
}


.environment .percent{
    text-align: center;
    position: absolute;
    top: 6vw;
    left: 0px;
    width: 100%;
    z-index: 5;
    color: #002F87;
    font-size: 4vw;
    line-height: 100%;
    font-family: 'Fontfabric-UniNeueHeavy';
}

.environment .percent img{
    display: inline-block;
    vertical-align: middle;
    width: 6vw;
    margin: 0 0.5vw 0.7vw 0;
}


.environment .sub-text{
    text-align: center;
    position: absolute;
    top: 10.6vw;
    left: 0px;
    width: 100%;
    z-index: 5;
    color: #002F87;
    font-size: 1.8vw;
    font-family: 'Fontfabric-UniNeueHeavy';
}


.environment .items{
    text-align: center;
    position: absolute;
    top: 17.2vw;
    left: 0px;
    width: 100%;
}

.environment .items .item{
    display: inline-block;
    width: 17.8vw;
    vertical-align: top;
    margin: 0 1.2vw;
    position: relative;
}

.environment .items .item .item-photo img{
    width:8vw;
    height: auto;
    margin: 0 auto;
}

.environment .items .item .item-text{
    background: #003282;
    border-radius: 10px;
    color: #fff;
    margin: 0.7vw 0 0 0;
    font-size: 1.2vw;
    padding: 1vw 0.5vw 0.5vw 0.5vw;
    min-height: 8vw;
}

.environment .items .item .item-text strong{
    font-family: 'Fontfabric-UniNeueHeavy';
}

.environment .items .item.i3 .item-text strong,
.environment .items .item.i4 .item-text strong{
    text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.8);
}

.environment .items .item.i3 .item-text,
.environment .items .item.i4 .item-text{
    min-height: 7vw;
}

.environment .items .item.i1 .item-text{
    padding-top: 1.6vw;
}

.environment .items .item.i2 .item-text{
    padding-top: 0.8vw;
}

.environment .items .item.i4 .item-text{
    padding-top: 1.8vw;
}

.environment .items .item-sub-text{
    text-align: center;
    color: #002F87;
    font-size: 2.2vw;
    font-family: 'Fontfabric-UniNeueHeavy';
    line-height: 110%;
    padding: 2.3vw 0;
}



.environment .items .item.i3::before,
.environment .items .item.i4::before{
    content: "";
    position:absolute;
    left:-1.2vw;
    top:-0.7vw;
    background: url("../images/img-bubble-lines.png") no-repeat center center;
    background-size:contain;
    width: 1.9vw;
    height: 1.9vw;
}


.environment .video-pre-title{
    text-align: center;
    position: absolute;
    top: 54.2vw;
    left: 50%;
    width: 27vw;
    -ms-transform: translate(-50%, -0%);
    -webkit-transform: translate(-50%, -0%);
    transform: translate(-50%, -0%);
}


.environment .video-pre-title .pop{
    text-align: center;
    position: absolute;
    top: 3.6vw;
    left: 0px;
    width: 100%;
    z-index: 5;
    color: #002F87;
    font-size: 1.5vw;
    font-family: 'Fontfabric-UniNeueHeavy';
}



.environment .video{
    position: relative;
    padding: 0 20px;
    text-align: center;
    position: absolute;
    top: 68.2vw;
    left: 50%;
    -ms-transform: translate(-50%, -0%);
    -webkit-transform: translate(-50%, -0%);
    transform: translate(-50%, -0%);
}

.environment .video .video-hold{
    position: relative;
    z-index: 5;
    display: inline-block;
}

.environment .video .video-hold a,
.environment .video .video-hold iframe,
.environment .video .video-hold video{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.environment .video img{
    
    width: 57.4vw;
    height: auto;
    margin: 0 auto;
    display: block;
    position: relative;
    z-index: 10;
}



.environment .copy{
    padding: 0 20px;
    text-align: center;
    position: absolute;
    top: 102.2vw;
    left: 0%;
    width: 100%;
    font-weight: bold;
    font-size: 0.8vw;
    line-height: 170%;
}

.environment .copy img{
    width: 19vw;
    margin: 0 auto 1.5vw auto;
    display: block;
}



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


    .mob{
        display: block !important;
    }

    .desk{
        display: none !important;
    }




    header .logo{
        width: 20vw;
        left: 5.3vw;
    }




    .hero .title{
        top: 19.2vw;
        font-size: 3vw;
    }


    .hero .side-title{
        top: 36.5vw;
        left: calc(50% + 17vw);
        font-size: 2.4vw;
    }

    .hero .content{
        bottom: 38vw;
    }


    .hero .content .text{
        font-size: 5vw;
    }





    .vitamins .title{
        font-size: 6.2vw;

        padding: 0 9vw;
    }


    .vitamins .content{
        bottom: 46.5vw;
        left: 5vw;
        width: 92vw;
    }


    .vitamins .content .text{
        font-size: 4vw;
    }



    .environment .title{
        top: 11.3vw;
        font-size: 6.2vw;
    }

    .environment .text{
        top: 32.5vw;
        width: 91.7vw;
        font-size: 4.5vw;

    }


    .environment .content{
        top: 70.5vw;
    }


    .environment .sub-title{
        top: 13.6vw;
        font-size: 6vw;
    }


    .environment .percent{
        top: 28.2vw;
        font-size: 14vw;
    }

    .environment .percent img{
        width: 22vw;
    }


    .environment .sub-text{
        top: 53.2vw;
        font-size: 5.8vw;
    }


    .environment .items{
        top: 80vw;
    }

    .environment .items .item{
        display: block;
        width: 66vw;
        margin: 0 auto;
    }

    .environment .items .item .item-photo img{
        width:30vw;
    }

    .environment .items .item .item-text,
    .environment .items .item.i1 .item-text,
    .environment .items .item.i2 .item-text,
    .environment .items .item.i3 .item-text,
    .environment .items .item.i4 .item-text{
        font-size: 4.2vw;
        padding: 3vw;
        min-height: 1vw;
    }

    .environment .items .item.i4 .item-text{
        padding: 6vw 3vw;
    }

    .environment .items .item.i3{
        margin-bottom: 10vw;
    }
    .environment .items .item.i1{
        margin-bottom: 5vw;
        margin-top: 5vh;
    }


    .environment .items .item-sub-text{
        font-size: 6.2vw;
        padding: 16.3vw 0 9vw 0;
    }



    .environment .items .item.i3::before,
    .environment .items .item.i4::before{
        left: -7.2vw;
        top: -5.7vw;
        width: 9vw;
        height: 9vw;
    }


    .environment .video-pre-title{
        top: 330.2vw;
        width: 75vw;
    }


    .environment .video-pre-title .pop{
        top: 9.6vw;
        font-size: 5.5vw;
    }

    .environment .video-pre-title .pop br{
        display: none;
    }



    .environment .video{
        padding: 0px;
        top: 369.2vw;
    }


    .environment .video img{
        width: 95.4vw;
    }



    .environment .copy{
        
        top: 436.2vw;
        font-size: 3vw;
        line-height: 190%;

    }

    .environment .copy img{
        width: 68vw;
        margin: 0 auto 5.5vw auto;
    }




    footer {
        bottom: 21.5vw;
    }

    footer .links{
        font-size: 3.5vw;
        word-spacing: 2vw;
        line-height: 190%;
    }

    footer .links span{
        word-spacing: 0px;    
        display: block;
        padding: 0 0 5vw 0;
    }

    footer .links a{
        font-size: 3.5vw;
        display: block;
    }

     footer .links b{
        -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        display: inline-block;
     }

    footer .social{
        
        right: auto;
        left: 50%;
        bottom: -14.2vw;

        -ms-transform: translate(-50%, -0%);
        -webkit-transform: translate(-50%, -0%);
        transform: translate(-50%, -0%);

    }

    footer .social a{
        width: 9.2vw;
        height: 9.2vw;
        margin: 0 10px;
    }



}