@font-face{font-family:Rubik;src:url(../assets/fonts/Rubik-Light.woff2) format('woff2'),url(../assets/fonts/Rubik-Light.woff) format('woff');font-weight:300;font-style:normal}
@font-face{font-family:Rubik;src:url(../assets/fonts/Rubik-Regular.woff2) format('woff2'),url(../assets/fonts/Rubik-Regular.woff) format('woff');font-weight:400;font-style:normal}
@font-face{font-family:Rubik;src:url(../assets/fonts/Rubik-Medium.woff2) format('woff2'),url(../assets/fonts/Rubik-Medium.woff) format('woff');font-weight:500;font-style:normal}
@font-face{font-family:Rubik;src:url(../assets/fonts/Rubik-Bold.woff2) format('woff2'),url(../assets/fonts/Rubik-Bold.woff) format('woff');font-weight:700;font-style:normal}
*{scroll-behavior:smooth;box-sizing:border-box;line-height: normal;}
body,html{margin:0;padding:0;background:#fff;color:#24418F;font-family:Rubik,sans-serif}
video,img{max-width: 100%;}
#ingredients li{display: flex;}
#ingredients .listitem{margin-bottom: 2rem;}
#ingredients li small{font-size: .6rem;}
#ingredients li .en{direction: ltr;text-align: left;}
#ingredients li p{margin: 0;}
#ingredients li .val p{line-height: .5;}
#ingredients .listitem > p{color: #fff;background-color: #05DBFB;display: inline-block;padding: .25rem;font-size: 1.2rem;}
#ingredients ul{padding: 0;}
#howto .content .item.i-1{background:#DEE0E070}
#howto .content .item.i-2{background: #23B0E438;}
#foot{color: #000;text-align: center;}
#foot .text{margin: 2rem auto 1rem;border: .15rem solid;padding: 1.5rem;}
#foot .trademarks ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;direction: ltr;justify-content: center;}
#sideeffects a,#video .leaflet a{color: #24418F;border: .075rem solid; border-radius: 1.5rem;padding: .5rem 1rem;}
#usage .steps .text p{margin: 0;}
.hero .legal{color: #fff;background:#05DBFB;display: inline-block;padding: .5rem;}
.hero .legal p{margin: 0;}
#before{background: #E7E9ED40;}
#before2 em{font-style: normal;color: #05DBFB;font-weight: bold;}
#header{background: #e7e9ed!important;}
#video{text-align: center;color: #000;}
#video h2{font-weight: 500;color: #24418F;text-align: right;}
#video .left .video{width: 100%;}
#video .leaflet{margin: 2rem 0;}
.navbar-brand span{font-size: .5rem;margin-right: -.75rem;}
#login{height: 80vh;margin-top: 10vh;}
.formbox{margin-top: 3rem;background-color: #F7F7F9;box-shadow: 0px 3px 6px #00000029;border-radius: 2rem;padding: 2rem;position: relative;}
#login-form input[type="password"]{width: 100%;}
#login-form .submit_button{background-color: #24418F;border-color: #24418F;font-weight: bold;padding: .5rem 3rem;position: absolute;right: 50%;transform: translateX(50%);bottom: -3.5rem;color: #fff;border-style: solid;border-radius: .5rem;}
.formbox div{position: relative;margin-bottom: 2rem;}
.formbox label{position: absolute;right: .75rem;bottom: 50%;transform: translateY(50%);margin: 0;}
.formbox label.top{bottom: 135%;}
#login .col-12{text-align: center;}
#login h1{font-size: 1.3rem;}
@media(max-width: 1000px){
body,html{font-size:4.4vw}
    .content-section{padding: 0 1rem }
    .hero{height: 36rem;}
    .hero .text br{display: none;}
    .hero .legal{font-size: .8rem;}
    h1{font-size: 4rem;font-weight: bold;margin-bottom: 1rem;}
    h1 p{margin: 0;}
    h1 small{font-size: 1.5rem;}
        #ingredients li{font-size: .9rem;margin-bottom: .25rem;}
        #ingredients .listitem > p{font-size: 1.1rem;}
        #ingredients li .he{flex:0 0 40%;}
        #ingredients li .en{margin-right: auto;flex:0 0 40%;}
        #howto .content .item{padding: 1rem;margin-bottom: 2rem;font-size: .9rem;}
        #before .inner, #before2 .inner{padding: 1.5rem 0 0;margin-bottom: 1.5rem;}
        #video .left{margin: 2rem 0;}
 #howto .content .item .sub{font-size: 1.2rem;font-weight: 700;}
 .step .img{text-align: center;}
  #usage .steps .step{margin-bottom: 2rem;}
#usage .steps .text{display: flex;align-items: end;font-size: .9rem;margin-top: .5rem;}
 #usage .steps .step .num{font-size: 3rem;font-weight: 500;margin-left: 1rem;}
 #foot{font-size: .8rem;}
 #foot .trademarks li{margin: .5rem;text-align: left;}
 #foot .trademarks li img{height: 1.5rem;}
}
@media(min-width:1001px){
    body,html{font-size:calc(1vw + .8px)}
    h2{font-size: 2.4rem;font-weight: 500;}
    .content-section{padding: 0 5rem }
    #header{position: fixed;top: 0;right: 0;z-index: 9999999;width: 100%;}
    .hero{height: 47rem;}
    .hero .inner{padding-top: 5rem;}
    h1{font-size: 9rem;font-weight: bold;}
    h1 small{font-size: 2.4rem;}
    .hero .text{font-size: 1.5rem;}
    .hero .legal{font-size: 1rem;}
    #ingredients .inner{width: 50rem;margin:3rem auto;}
    #ingredients li{font-size: 1.2rem;margin-bottom: .75rem;}
    #ingredients li div{flex: 0 0 33%;}
    #before{padding: 6rem 0 0;}
    #before .inner{display: flex;flex-direction: row-reverse;}
    #before .textwrap{padding-left: 4rem;}
    #before .textwrap p{line-height: 1.4;}
    #before .imgwrap{flex: 0 0 36.5rem}
    #before .inner .st{font-size: 1.5rem;}
    #before2 .inner{font-size: 1.5rem;width: 70rem;padding: 3rem 0;}
    #howto .content{display: flex;justify-content: space-between;padding: 5rem 0;}
    #howto .content .item{flex:0 0 40rem;padding: 2rem 1rem 1rem;font-size: 1.5rem;line-height: 1.6;}
    #howto .content .item .sub{font-size: 2.4rem;font-weight: 700;}
    #usage{background:#D1D1D126;}
    #usage .inner{padding: 3rem 0 0;}
    #usage h2{text-align: center;}
    #usage .steps,#usage .steps .text{display: flex;font-size: 1.5rem;align-items: end;}
    #usage .steps .step{flex: 0 0 27rem;margin: auto;}
    #usage .steps .step .img{text-align: center;}
    #usage .steps .step .num{font-size: 6rem;font-weight: 500;margin-left: 1rem;}
    #usage{padding: 0 5rem;margin-bottom: 5rem;}
    #usage .note {margin-top: 3rem;text-align: center;margin-bottom: -1.5rem;}
    #usage .note p{font-size: 1.5rem;color: #fff;background: #05DBFB;display: inline;padding: .25rem;}
    #video .inner{display: flex;justify-content: space-between;padding: 5rem 0;width: 64rem;margin: auto;}
    
    #video{font-size: 1.5rem;}
    #video .left{flex: 0 0 31.5rem;margin-right: 2rem;}
    #video .left video{height: 31.5rem;width: 100%;}
    .navbar .container-fluid{padding: 0 5rem;flex-direction: row-reverse;justify-content: space-between;}
    .navbar .nav-item{margin-left: 2rem;}
    #sideeffects{font-size: 1.5rem;}
    #foot .text{width: 51rem;}
    #foot{font-size: 1.5rem;}
    #foot .trademarks ul{font-size: 1.25rem;}
    #foot .trademarks li{display: flex;align-items: center;margin: .5rem 1rem;}
    #foot .trademarks li img{height: 2rem;}
}