@import url(font-defined.css);
@import url(circle.css);
@import url('https://fonts.googleapis.com/css?family=Exo+2:300&subset=cyrillic,latin-ext');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans&subset=latin-ext');

html, body {
    background-color: #FFF;
    margin: 0;
    font-family: 'Exo 2', sans-serif;
}

article {
    width: 100%;
}

section, article{
    overflow: hidden;
}

footer {
    width: 100%;
}

footer * {
    max-width: 100%;
}

header.top-ref {
    width: 100%;
    height: 1080px;
    overflow: hidden;
}

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

[class*=show-on] {
    display: none;
}

.og-bag {
    height: 165px;
    width: 100%;
    margin-top: -165px;
    margin-bottom: -1px;
    background-image: url(../img/500_bg_top.png);
    position: relative;
    background-size: 1920px 165px;
    background-position: 50% 0;
}

.mask {
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 100;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.logo-sguai-smart-cup {
    top: 40px;
    left: 50px;
}

.header-warpper {
    top: 340px;
    left: calc(50% - 480px);
}

h1.header,
p.header-content {
    margin: 0 0 15px;
}

p.header-content > * {
    vertical-align: middle;
}


.circle25 {
    padding-top: 5px;
    padding-right: 10px;
    z-index: 100;
    position: relative;
}

.background01-warpper {
    top: 210px;
    left: calc(50% - 240px);
}

.background01.circle{
    width: 172px;
    height: 172px;
}

.background01.circle.color .circle-bar{
    border-color: #38D1B6;
}

.header-warpper h1.header {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
    opacity: 0;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    width: 470px;
}

.header-warpper p.header-content.text {
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    opacity: 0;
    -webkit-transition: all 0.6s ease 0.2s;
    transition: all 0.6s ease 0.2s;
    width: 500px;
}

.animation.header-warpper h1.header,
.animation.header-warpper p.header-content.text {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

.animation.rotate.water {
    -webkit-animation: rotate-water 2.75s ease forwards;
            animation: rotate-water 2.75s ease forwards;
}

@-webkit-keyframes rotate-water {
    0% {
        -webkit-transform: rotate(0deg) scale(0.355, 0.355);
                transform: rotate(0deg) scale(0.355, 0.355);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(1, 1);
                transform: rotate(360deg) scale(1, 1);
    }
}

@keyframes rotate-water {
    0% {
        -webkit-transform: rotate(0deg) scale(0.355, 0.355);
                transform: rotate(0deg) scale(0.355, 0.355);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(1, 1);
                transform: rotate(360deg) scale(1, 1);
    }
}


.parallax-warpper {
    top: 0;
    left: 0;
}

#parallax {
    width: 100vw;
}

.scene.cup1 {
    top: 450px;
    left: calc(50% - 1170px);
}

.rotate.water,
.scene.cup2 {
    top: 240px;
    left: calc(50% + 130px);
}

.rotate.water {
    left: calc(50% + 40px);
}

.scene.cup3 {
    top: 915px;
    left: calc(50% + 600px);

}

.scene.cup4 {
    top: 255px;
    right: calc(50% - 896px);

}

.scene.cup5 {
    top: 50px;
    left: calc(50% - 340px);
}

.scene.cup6 {
    top: 810px;
    left: calc(50% - 520px);
}


section.drinking-me {
 position: relative;
 height: 696px;
}

.womanBg {
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    right: calc(19.53% - 375px);
    top: 0;
    opacity: 0;
}

.animation.drinking-me .womanBg {
    opacity: 1;
}

h2.drinking-me {
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    opacity: 0;
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
}

p.drinking-me {
    -webkit-transition: all 0.6s ease 0.2s;
    transition: all 0.6s ease 0.2s;
    opacity: 0;
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
}

.animation.drinking-me h2.drinking-me,
.animation.drinking-me p.drinking-me {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
}

.drinkTrangle {
    -webkit-transition: all 2.5s ease;
    transition: all 2.5s ease;
    bottom: 0;
    left: calc(50% - 960px);
    -webkit-transform: translateX(-40px);
            transform: translateX(-40px);
}

.animation.drinking-me .drinkTrangle {
    -webkit-transform: translateX(0);
            transform: translateX(0);
}

.drinking-me-content {
    left: 25%;
    top: 125px;
}

.fade-warpper {
    left: calc(25% + 8px);
    bottom: 50%;
}

.drink-01 {
    -webkit-transform: translateY(85px);
            transform: translateY(85px);
}

.drink-02 {
    -webkit-transform: translate(100px ,0px);
            transform: translate(100px ,0px);
}

.drink-03 {
    -webkit-transform: translate(341px, 85px);
            transform: translate(341px, 85px);
}

.fade-in {
    top: 10px;
    opacity: 0;
    -webkit-transition: 0.6s all ease;
    transition: 0.6s all ease;
}

.drinking-me.animation .fade-in {
    top: 0;
    opacity: 1;
}

.drinking-me.animation .drink-01 {
    -webkit-transition-delay: 0.4s;
            transition-delay: 0.4s;
}

.drinking-me.animation .drink-02 {
    -webkit-transition-delay: 0.8s;
            transition-delay: 0.8s;
}

.drinking-me.animation .drink-03 {
    -webkit-transition-delay: 1.2s;
            transition-delay: 1.2s;
}


.costomized-water {
    height: 869px;
    width: 100%;
    background-image: url(../img/blackclock_bg.jpg);
    background-size: auto 100%;
    background-position: 100%;
    background-repeat: no-repeat;
}

.bluetimeTragale {
    -webkit-transition: 0.6s all ease;
    transition: 0.6s all ease;
    top: 0;
    right: 0;
    opacity: 0;
    z-index: 0;
    -webkit-transform: translateX(40px);
            transform: translateX(40px);
}

.animation.costomized-water .bluetimeTragale {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
}

.costomized-water .costomized-water-01,
.costomized-water .costomized-water-02 {
    top: 106px;
    left: 23%;
    z-index: 100;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    -webkit-transition: 1.6s all ease;
    transition: 1.6s all ease;
}

.costomized-water .costomized-water-02 {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    -webkit-transition: 1.6s all ease 0.6s;
    transition: 1.6s all ease 0.6s;
}

.animation.costomized-water .costomized-water-01,
.animation.costomized-water .costomized-water-02 {
    opacity: 1;
}

.animation.costomized-water .costomized-water-01 {
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
.animation.costomized-water .costomized-water-02 {
    -webkit-transform: translateX(-66px);
            transform: translateX(-66px);
}

.costomized-water-content {
    text-align: center;
    top: 85px;
    right: 18%;
}

.timer {
    top: 350px;
    right: 44.27%;
}



.timer-01 {
    top: 194px;
    left: 199px;
}

.timer-02 {
    top: 70px;
    left: 109px;
}

.timer-03 {
    top: 87px;
    left: 130px;
}

.timer-03-content.color .circle-bar {
    border-color: #00B7EE;
    border-width: 2.5px;
}

.animation.costomized-water .circle-right > .circle-bar {
    -webkit-animation: loading-1 0.9s linear forwards 1.4s;
            animation: loading-1 0.9s linear forwards 1.4s;
}
.animation.costomized-water .circle-left > .circle-bar {
    -webkit-animation: costomized-water-time 0.47355s linear forwards 2.3s;
            animation: costomized-water-time 0.47355s linear forwards 2.3s;
}

@-webkit-keyframes costomized-water-time {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(94.72deg);
                transform: rotate(94.72deg);
    }
}

@keyframes costomized-water-time {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(94.72deg);
                transform: rotate(94.72deg);
    }
}


.timer img[class*=timer],
.timer p[class*=timer],
.timer .olock{
    opacity: 0;
    -webkit-transition: 0.4s all 1.4s;
    transition: 0.4s all 1.4s;
}

.animation.costomized-water .timer img[class*=timer],
.animation.costomized-water .timer p[class*=timer],
.animation.costomized-water .timer .olock{
    opacity: 1;
}

.timer-630 {
    top: 341px;
    left: 358px;
}
.timer-830 {
    top: 380px;
    left: 256px;
}
.timer-1100 {
    top: 356px;
    left: 128px;
}
.timer-1300 {
    top: 281px;
    left: 30px;
}
.timer-1530 {
    top: 169px;
    left: 10px;
}
.timer-1730 {
    top: 80px;
    left: 25px;
}
.timer-1830 {
    top: 10px;
    left: 110px;
}
.timer-2130 {
    top: -9px;
    left: 227px;
}

h2.costomized-water-content {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
    -webkit-transition: all 0.4s ease 0.8s;
    transition: all 0.4s ease 0.8s;
    font-size: 36px;
    color: rgb(255, 255, 255);
    line-height: 1.1;
    text-transform: uppercase;
}

p.costomized-water-content {
    opacity: 0;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    -webkit-transition: all 0.6s ease 1s;
    transition: all 0.6s ease 1s;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.729);
    line-height: 1.7;
    width: 535px;
    font-weight: 800;
}

.animation.costomized-water h2.costomized-water-content,
.animation.costomized-water p.costomized-water-content {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

.after-clear-fix:after {
    clear: both;
}

.left {
    float: left;
}

.right {
    float: right;
}


.remainder-and-sensor {
    height: 950px;
    width: 100%;
}

section.expired-remainders {
    background-color: #FFF;
    width: 50%;
    height: 100%;
}

.tragaleGreenLeft {
    top: 268px;
    left: -2px;
    -webkit-transform: translateX(-60px);
            transform: translateX(-60px);
    -webkit-transition: 0.6s all ease ;
    transition: 0.6s all ease ;
    opacity: 0;
}
.redheadBottle {
    bottom: 0;
    left: 8.33%;
    left: calc(30% - 179px);
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    opacity: 0;
    -webkit-transition: 0.6s all ease 0.3s;
    transition: 0.6s all ease 0.3s;
}

.animation.remainder-and-sensor .tragaleGreenLeft,
.animation.remainder-and-sensor .redheadBottle{
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
}

.expired-remainders-content {
    top: 240px;
    right: 10%;
    text-align: center;
}

h2.expired-remainders,
p.expired-remainders {
    margin-top: 0;
    opacity: 0;
}

h2.temperature-sensor,
p.temperature-sensor {
    opacity: 0;
}


h2.expired-remainders,
h2.temperature-sensor {
    -webkit-transition: 0.4s all ease 0.9s;
    transition: 0.4s all ease 0.9s;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
}

h2.expired-remainders {
    color: rgb(58, 58, 58);
    font-size: 36px;
    line-height: 1.1;
    text-align: center;
    margin-bottom: 18px;
}

p.expired-remainders {
    font-size: 16px;
    color: rgb(58, 58, 58);
    line-height: 1.7;
    text-align: center;
    width: 420px;
    font-weight: 500;
}

span.flashingreminder {
    font-size: 18px;
    color: rgba(255, 0, 0, 0.929);
}

span.flashingreminder.flashingreminder-02 {
    color: rgba(56, 209, 182, 0.929);
}

span.expired-remainders-01 {
    color: rgba(56, 209, 182, 0.929);
}

h2.temperature-sensor {
    -webkit-transition: 0.4s all ease 1.0s;
    transition: 0.4s all ease 1.0s;
    font-size: 36px;
    color: #FFF;
    line-height: 1.2;
    text-align: center;
}

p.expired-remainders.text,
p.temperature-sensor {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    -webkit-transition: 0.6s all ease 1.4s;
    transition: 0.6s all ease 1.4s;
}

p.temperature-sensor {
    -webkit-transition: 0.6s all ease 1.5s;
    transition: 0.6s all ease 1.5s;
    width: 590px;
    font-size: 16px;
    color: #FFF;
    line-height: 1.8;
    text-align: center;
    font-weight: 100;
}

.animation.remainder-and-sensor h2.expired-remainders,
.animation.remainder-and-sensor p.expired-remainders,
.animation.remainder-and-sensor h2.temperature-sensor,
.animation.remainder-and-sensor p.temperature-sensor {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
}

.demo-warpper {
    opacity: 0.4;
    -webkit-transition: 0.6s all ease 2s;
    transition: 0.6s all ease 2s;
}

.animation.remainder-and-sensor .demo-warpper {
    opacity: 1;
}

li[class*=sensor-demo-] {
    opacity: 0.1;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
}

li.sensor-demo-1 {
    -webkit-transition: 0.6s all ease 2.25s;
    transition: 0.6s all ease 2.25s;
}

li.sensor-demo-2 {
    -webkit-transition: 0.6s all ease 2.5s;
    transition: 0.6s all ease 2.5s;
}

li.sensor-demo-3 {
    -webkit-transition: 0.6s all ease 2.75s;
    transition: 0.6s all ease 2.75s;
}



section.temperature-sensor {
    opacity: 0;
    -webkit-transition: 0.6s all ease 0.7s;
    transition: 0.6s all ease 0.7s;
    -webkit-transform: translateX(15px);
            transform: translateX(15px);
}

.animation.remainder-and-sensor section.temperature-sensor {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}

.animation.remainder-and-sensor li[class*=sensor-demo-] {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

.flashDot {
    -webkit-animation: flash-dot 0.3s ease 2s infinite alternate;
            animation: flash-dot 0.3s ease 2s infinite alternate;
    display: block;
    margin: auto;
    margin-top: 175px;
    margin-bottom: 7px;
}

@-webkit-keyframes flash-dot {
    0% {
        opacity: 0.3;
    }
    100% {
        opacity: 1;
    }
}

@keyframes flash-dot {
    0% {
        opacity: 0.3;
    }
    100% {
        opacity: 1;
    }
}

p.expired-remainders.flashes {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    -webkit-transition: 0.6s all ease 1.1s;
    transition: 0.6s all ease 1.1s;
}


section.temperature-sensor {
    background-color: #FAB555;
    width: 50%;
    height: 100%;
}

.temperature-sensor-content {
    top: 245px;
    right: calc(50% - 295px);
    text-align: center;
}

.demo-warpper {
    top: 540px;
    right: calc(50% - 330px);
}

section.water-mp4 {
    height: 740px;
    background-color: #FFF;
    overflow-y: hidden;
    text-align: center;
}

section.water-mp4 > video {
    opacity: 0.7;
}

.water-mp4-content {
    top: 95px;
    text-align: center;
    left: calc(50% - 394.5px);
}

.greenLight-mp4 {
    bottom: 325px;
    left: calc(50% - 99.5px);
    z-index: 1;
}

.greenHeadBottle-mp4 {
    bottom: 0;
    left: calc(50% - 200px);
}

h2.water-mp4 {
    opacity: 0;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
    -webkit-transition: 0.6s all ease ;
    transition: 0.6s all ease ;
    font-size: 36px;
    color: #424343;
    text-align: center;
}

p.water-mp4 {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    -webkit-transition: 0.6s all ease 0.2s;
    transition: 0.6s all ease 0.2s;
    font-size: 16px;
    color: rgb(67, 67, 67);
    line-height: 1.8;
    text-align: center;
    width: 789px;
}

.greenLight-mp4 {
    opacity: 0;
    -webkit-transform: translateY(400px);
            transform: translateY(400px);
    -webkit-transition: 0.3s all ease 0.6s;
    transition: 0.3s all ease 0.6s;
}

.greenHeadBottle-mp4 {
    opacity: 0;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    -webkit-transition: 0.6s all ease 0.4s;
    transition: 0.6s all ease 0.4s;
}

.animation.water-mp4 h2.water-mp4,
.animation.water-mp4 p.water-mp4,
.animation.water-mp4 .greenLight-mp4 ,
.animation.water-mp4 .greenHeadBottle-mp4 {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

section.cool-desgin {
    background-image: url(../img/man_bg.jpg);
    height: 823px;
    background-position: 29% 0;
}

.cool-desgin-content {
    top: 155px;
    left: calc(50% - 590px);
}

.cool-desgin-graph-warpper {
    top: 303px;
    right: calc(50% + 55px);
}

h2.cool-desgin {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 36px;
    color: #00B7EE;
    line-height: 1.4;
}

p.cool-desgin {
    font-size: 16px;
    color: #585858;
    line-height: 1.5;
    width: 545px;
}

.cool-desgin-content h2.cool-desgin,
.cool-desgin-content p.cool-desgin {
    opacity: 0;
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
}

.cool-desgin-content h2.cool-desgin {
    -webkit-transition: 0.4s all ease;
    transition: 0.4s all ease;
}
.cool-desgin-content p.cool-desgin {
    -webkit-transition: 0.6s all ease 0.2s;
    transition: 0.6s all ease 0.2s;
}

.animation.cool-desgin h2.cool-desgin,
.animation.cool-desgin p.cool-desgin {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}

.desgin-body {
    -webkit-transform: translate(20px,10px);
            transform: translate(20px,10px);
    -webkit-transition: 0.6s all ease 0.6s;
    transition: 0.6s all ease 0.6s;
    z-index: 100;
}
.desgin-top {
    top: 60px;
    -webkit-transform: translate(20px,10px);
            transform: translate(20px,10px);
    -webkit-transition: 0.6s all ease 1.0s;
    transition: 0.6s all ease 1.0s;
    z-index: 101;
}

[class^=apartText] {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
}


span[class^=apart-letters-] {
    display: block;
    text-align: center;
    margin-top: 8px;
}

span.apart-letters-1 {
    width: 101px;
}

span.apart-letters-2 {
    width: 102px;
}

span.apart-letters-3 {
    width: 101px;
}

span.apart-letters-4 {
    width: 84px;
}

span.apart-letters-5 {
    width: 120px;
}

span.apart-letters-6 {
    width: 147px;
}

.apartText1 {
    top: -60px;
    left: 105px;
    -webkit-transition: 0.4s all ease 1.3s;
    transition: 0.4s all ease 1.3s;
}
.apartText2 {
    top: -6px;
    left: 205px;
    -webkit-transition: 0.4s all ease 1.5s;
    transition: 0.4s all ease 1.5s;
}
.apartText3 {
    top: 65px;
    left: 280px;
    -webkit-transition: 0.4s all ease 1.7s;
    transition: 0.4s all ease 1.7s;
}
.apartText4 {
    top: 140px;
    left: 350px;
    -webkit-transition: 0.4s all ease 1.9s;
    transition: 0.4s all ease 1.9s;
}
.apartText5 {
    top: 180px;
    left: 420px;
    -webkit-transition: 0.4s all ease 2.2s;
    transition: 0.4s all ease 2.2s;
}
.apartText6 {
    top: 250px;
    left: 500px;
    -webkit-transition: 0.6s all ease 2.5s;
    transition: 0.6s all ease 2.5s;
}

.cool-desgin-graph {
    z-index: 200;
}

.cool-desgin-graph > p {
    font-size: 12px;
    color: #00B7EE;
    line-height: 1;
}

.cool-desgin-graph > img,
.cool-desgin-graph > p {
    opacity: 0;
}

.animation.cool-desgin .cool-desgin-graph > img {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
}

.animation.cool-desgin .cool-desgin-graph > p {
    opacity: 1;
    -webkit-transform: translate(6px, 2px);
            transform: translate(6px, 2px);
}


section.lifetime-and-tempgrid {
    height: 665px;
    background-color: #F8B551;
}

.life-whiteBottle {
    bottom: 25px;
    left: calc(50% - 585px);
    -webkit-transition: 0.4s all ease;
    transition: 0.4s all ease;
    opacity: 0;
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
}

.animation.lifetime-and-tempgrid .life-whiteBottle {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
}

.lifetime-content {
    top: 75px;
    left: calc(50% - 310px);
}

.animation.lifetime-and-tempgrid .life-whiteBottle {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
}

h2.lifetime {
    margin-bottom: 6px;
    opacity: 0;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
    -webkit-transition: 0.4s all ease 0.2s;
    transition: 0.4s all ease 0.2s;
    font-size: 36px;
    color: #FFF;
}

p.lifetime.text {
    margin-top: 65px;
    margin-bottom: 45px;
    opacity: 0;
    -webkit-transition: 0.6s all ease 0.4s;
    transition: 0.6s all ease 0.4s;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    font-size: 16px;
    color: #FFF;
    line-height: 1.6;
    width: 341px;
    text-align: left;
}

p.lifetime.ml {
    opacity: 0;
    -webkit-transition: 0.6s all ease 0.4s;
    transition: 0.6s all ease 0.4s;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    font-size: 53px;
    color: #FFF;
}

span.oz {
    font-size: 18px;
    color: #FFF;
}

.animation.lifetime-and-tempgrid h2.lifetime,
.animation.lifetime-and-tempgrid p.lifetime{
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

.tempgrid-content {
    top: 150px;
    right: calc(50% - 155px);
}

h2.temptext {
    padding-left : 5px;
    -webkit-transition: 0.4s all ease 0.6s;
    transition: 0.4s all ease 0.6s;
    opacity: 0;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
    font-size: 20px;
    color: #FFF;
    text-align: center;
    margin-bottom: 30px;
    font-weight: 100;
}

.tempgrid,
.degree-sersie-warpper,
.degree-feelings,
.table-time-series,
.degree-correlation-table-warpper {
    -webkit-transition: 0.6s all ease 0.8s;
    transition: 0.6s all ease 0.8s;
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
}

.tempgrid {
    left: 33px;
}

.scalable {
    top: 15px;
    left: 40px;
    width: 0px;
    opacity: 1;
    -webkit-transition: 1.2s all ease 1.4s;
    transition: 1.2s all ease 1.4s;
    overflow: hidden;
    z-index: 1;
}

.animation.lifetime-and-tempgrid .scalable {
    width: 295px;
}

.animation.lifetime-and-tempgrid .degree-correlation-table-warpper,
p.series {
    -webkit-transition: 0.6s all ease 1.6s;
    transition: 0.6s all ease 1.6s;
}

.animation.lifetime-and-tempgrid h2.temptext,
.animation.lifetime-and-tempgrid .tempgrid,
.animation.lifetime-and-tempgrid .degree-sersie-warpper,
.animation.lifetime-and-tempgrid .degree-feelings,
.animation.lifetime-and-tempgrid .table-time-series,
.animation.lifetime-and-tempgrid .degree-correlation-table-warpper {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
}


.wave {
    bottom: -3px;
    height: 136px;
    background-image: url(../img/wave3.png),
    url(../img/wave2.png),
    url(../img/wave1.png);
    background-position: 50% bottom, 50% bottom, 70% bottom;
    background-repeat: repeat-x;
    background-size: auto 110%, auto 100%, auto 70%;
    width: 100%;
    -webkit-animation: wave-bg-1 18s linear alternate infinite,
    wave-bg-2 1s ease alternate infinite;
            animation: wave-bg-1 18s linear alternate infinite,
    wave-bg-2 1s ease alternate infinite;
}

@-webkit-keyframes wave-bg-1 {
    0% {
        background-position-x: 0%, 0%, 20%;
    }
    50% {
        background-position-x: -25%, 0%, -25%;
    }
    100% {
        background-position-x: 50%, 0%, 80%;
    }
}

@keyframes wave-bg-1 {
    0% {
        background-position-x: 0%, 0%, 20%;
    }
    50% {
        background-position-x: -25%, 0%, -25%;
    }
    100% {
        background-position-x: 50%, 0%, 80%;
    }
}

@-webkit-keyframes wave-bg-2 {
    0% {
        background-position-y: 70%, 40%, bottom;
    }
    100% {
        background-position-y: 0%, 0%, bottom;
    }
}

@keyframes wave-bg-2 {
    0% {
        background-position-y: 70%, 40%, bottom;
    }
    100% {
        background-position-y: 0%, 0%, bottom;
    }
}

.wave3, .wave2, .wave1 {
    bottom: -3px;
}

section.two-batteries {
    height: 1000px;
}

.wateGold {
    bottom: 20px;
    left: 90px;
}

.tragaleGreenR {
    bottom: -210px;
    right: 0;
    opacity: 0;
    -webkit-transition: 0.6s all ease;
    transition: 0.6s all ease;
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
}
.twoGoldBottle {
    top: 230px;
    left: 0;
    opacity: 0;
    -webkit-transition: 0.6s all ease 0.2s;
    transition: 0.6s all ease 0.2s;
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
}
.twoBlackBottle {
    top: 350px;
    right: 0;
    z-index: 1;
    opacity: 0;
    -webkit-transition: 0.6s all ease 0.2s;
    transition: 0.6s all ease 0.2s;
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
}

.two-batteries-content {
    top: 106px;
    left: calc(50% - 285px);
    text-align: center;
}

.lots-days-content {
    top: 490px;
    left: calc(50% - 170px);
    text-align: center;
}

.health-life-content {
    top: 710px;
    left: 35.94%;
    text-align: center;
}

h2.two-batteries,
h2.lots-days,
h2.health-life {
    opacity: 0;
    -webkit-transform: translateY(-9px);
            transform: translateY(-9px);
}

p.two-batteries,
p.lots-days,
p.health-life {
    opacity: 0;
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
}

h2.two-batteries {
    -webkit-transition: 0.6s all ease 0.4s;
    transition: 0.6s all ease 0.4s;
}

h2.two-batteries,
h2.health-life {
    font-size: 36px;
    color: #38D1B6;
    line-height: 1;
}

p.two-batteries {
    -webkit-transition: 0.6s all ease 0.6s;
    transition: 0.6s all ease 0.6s;
    max-width: 570px;
    width: calc(100% - 40px);
}

p.two-batteries,
p.lots-days,
p.health-life {
    font-size: 16px;
    color: #535353;
    line-height: 1.8;
}

h2.lots-days {
    -webkit-transition: 0.6s all ease 0.8s;
    transition: 0.6s all ease 0.8s;
    font-size: 74px;
    color: rgb(56, 209, 182);
}

span.lots-days-unit {
    font-size: 18px;
    color: rgb(74, 73, 73);
}

p.lots-days {
    -webkit-transition: 0.6s all ease 1s;
    transition: 0.6s all ease 1s;
    max-width: 340px;
    width: calc(100% - 40px);
    padding-top: 160px;
    opacity: 0!important;
}

h2.health-life {
    -webkit-transition: 0.6s all ease 1.3s;
    transition: 0.6s all ease 1.3s;
}

p.health-life {
    -webkit-transition: 0.6s all ease 1.6s;
    transition: 0.6s all ease 1.6s;
    width: 536px;
}

.animation.two-batteries .tragaleGreenR,
.animation.two-batteries .twoGoldBottle,
.animation.two-batteries .twoBlackBottle {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
}

.animation.two-batteries h2.two-batteries,
.animation.two-batteries h2.lots-days,
.animation.two-batteries h2.health-life,
.animation.two-batteries p.two-batteries,
.animation.two-batteries p.lots-days,
.animation.two-batteries p.health-life {
    opacity: 1;
    -webkit-transform: translate(0, 11px);
            transform: translate(0, 11px);
}


div.iterable-fixed-size-warpper {
    height: calc(1070px * 3);
    width: 100%;
}

section.iterable-warpper.show-01,
section.iterable-warpper {
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    background-position: 50% 0%;
    overflow-y: visible;
    -webkit-transition: 0.4s all ease;
    transition: 0.4s all ease;
}

section.iterable-warpper,
section.iterable-warpper.show-01 {
    background-image: url(../img/304_bg.jpg);
}

section.iterable-warpper.show-02 {
    background-image: url(../img/bottle2_bg.jpg);
}
section.iterable-warpper.show-03 {
    background-image: url(../img/bottle3_bg.jpg);
}

.timeline {
    height: 100%;
    left: 50%;
    height: 1070px;
    top: 0;
}

.timeline1 {
    top:0;
    -webkit-transition: 0.3s all ease;
    transition: 0.3s all ease;
}

.timeline2 {
    bottom: 0;
    -webkit-transition: 0.7s all ease 0.2s;
    transition: 0.7s all ease 0.2s;
}

.timeline1, .timeline2 {
    height: 0;
    width: 2px;
}

.tragaleGreenR1 {
    right: -6px;
    top: -10px;
    opacity: 0;
    -webkit-transition: 0.3s all ease;
    transition: 0.3s all ease;
}

.animation.iterable-warpper .timeline1{
    height: 360px;
}
.animation.iterable-warpper .timeline2{
    height: 615px;
}

.animation.iterable-warpper .tragaleGreenR1,
.animation.tragaleGreenR1{
    top: 0;
    opacity: 1;
}

div.iterable-images-list-warpper {
    top: 0;
    right: 50%;
}

ul.iterable-images-list {
    width: 50%;
}

li.iterable-images-01 {
    top: 240px;
    right: 98px;
}

li.iterable-images-02 {
    top: 240px;
    right: 98px;
}

img.iterable-images-02-1 {
    top: 0;
    right: 0;
}

img.iterable-images-02-2 {
    top: 162px;
    right: 87px;
    -webkit-animation: laminated-copper 0.75s linear infinite alternate;
            animation: laminated-copper 0.75s linear infinite alternate;
}

@-webkit-keyframes laminated-copper {
    0% {
        opacity: 0.3;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes laminated-copper {
    0% {
        opacity: 0.3;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

li.iterable-images-03 {
    top: 240px;
    right: 98px;
}

li[class^=iterable-images-] > * {
    -webkit-transition: 0.4s all ease;
    transition: 0.4s all ease;
}

li[class^=iterable-images-]:not(.show) > * {
    opacity: 0;
    -webkit-transform: translateX(60px);
            transform: translateX(60px);
}

li.show[class*=iterable-images-] > *{
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}

.iterable-icons-list-warpper {
    top: 370px;
    left: 50%;
}

.timeline.fixed,
div.iterable-images-list-warpper.fixed,
.iterable-icons-list-warpper.fixed {
    position: fixed;
}

li[class^=iterable-icons-] > img  {
    -webkit-transition: 0.4s all ease;
    transition: 0.4s all ease;
    margin-left: -50%;
}

li[class^=iterable-icons-]:not(.show) > img {
    opacity: 0;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
}

li.show[class^=iterable-icons-] > img {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

.iterable-content-list-warpper {
    top: 0;
    left: 50%;
}

li[class^="iterable-content-"] {
    padding-top: 400px;
    padding-left: 105px;
    // border: 1px #FFF solid;
}

li.iterable-content-01 {
    padding-bottom: 500px;
}

li.iterable-content-02 {
    padding-bottom: 315px;
}

li.iterable-content-03 {
    padding-bottom: 360px;
}

h2.iterable-content {
    opacity: 0;
    -webkit-transform: translateX(-60px);
            transform: translateX(-60px);
    -webkit-transition: 0.4s all ease 1s;
    transition: 0.4s all ease 1s;
    font-size: 32px;
    color: rgb(248, 181, 81);
}

p.iterable-content {
    opacity: 0;
    -webkit-transform: translateX(-60px);
            transform: translateX(-60px);
    -webkit-transition: 0.6s all ease 1.2s;
    transition: 0.6s all ease 1.2s;
    font-size: 16px;
    color: rgb(246, 246, 246);
    line-height: 1.8;
    text-align: left;
    width: 380px;
}


/* deletes if it is real*/
.animation.iterable-warpper li[class^=iterable-content-] > h2.iterable-content,
.animation.iterable-warpper li[class^=iterable-content-] > p.iterable-content{
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

section.colors-availales {
    height: 1130px;
    background-color: #EAEFF3;
}

.tragaleOrange {
    left: 0;
    opacity: 0;
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
    -webkit-transition: 0.6s all ease;
    transition: 0.6s all ease;
}

.animation.tragaleOrange {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}

.colors-availales-content {
    margin-top: 150px;
}

.colors-availales {
    text-align: center;
}

h2.colors-availales {
    margin-bottom: 10px;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
    opacity: 0;
    -webkit-transition: 0.4s all ease;
    transition: 0.4s all ease;
    color: rgb(0, 183, 238);
    font-size: 36px;
}

p.colors-availales {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    opacity: 0;
    -webkit-transition: 0.6s all ease 0.2s;
    transition: 0.6s all ease 0.2s;
    font-size: 18px;
    color: rgb(83, 83, 83);
    line-height: 1.6;
}

a.buyBtn {
    display: inline-block;
    border-radius: 11px;
    height: 45px;
    text-align: center;
    -webkit-transition: 0.6s all ease 1.6s;
    transition: 0.6s all ease 1.6s;
    opacity: 0.05;
    text-decoration: none;
}


.animation.colors-availales h2.colors-availales,
.animation.colors-availales p.colors-availales,
.animation.colors-availales a.buyBtn {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
}

ul.colors-list {
    letter-spacing: 55px;
    margin-top: 55px;
    margin-bottom: 55px;
}

li[class^="colors-list-"] {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: -17px 465px;
    height: 610px;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
    -webkit-transition: 0.6s all ease;
    transition: 0.6s all ease;
    opacity: 0.1;
}

li[class^="colors-list-"]:after {
    content: attr(data-color);
    text-align: center;
    text-transform: capitalize;
    letter-spacing: 0px;
    color: rgba(95, 96, 96, 0.839);
    margin-top: 64px;
    display: block;
    font-size: 16px;
}

li[class^="colors-list-"] > img {
    display: block;
    margin: auto;
}

li.colors-list-01 {
    -webkit-transition-delay: 0.5s;
            transition-delay: 0.5s;
}
li.colors-list-02 {
    -webkit-transition-delay: 0.7s;
            transition-delay: 0.7s;
}
li.colors-list-03 {
    -webkit-transition-delay: 0.9s;
            transition-delay: 0.9s;
}
li.colors-list-04 {
    -webkit-transition-delay: 1.2s;
            transition-delay: 1.2s;
}
li.colors-list-05 {
    -webkit-transition-delay: 1.5s;
            transition-delay: 1.5s;
}
li.colors-list-06 {
    -webkit-transition-delay: 1.9s;
            transition-delay: 1.9s;
}

.animation.colors-availales li[class^="colors-list-"] {
    background-image: url(../img/bottle_shadow.png);
    background-position: -17px 505px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
}

/*/ 之後再搞
// .animation.colors-availales li[class^="colors-list-"]:hover,
// li[class^="colors-list-"]:hover {
//     transform: translateY(-15px);
//     transition-duration: 0.1s;
//     transition-delay: 0.1s;
// } */

li[class^="colors-list-"] {
    position: relative;
}

.color-name {
    position: absolute;
    bottom: 0;
    left: 45%;
}

section.water-app {
    height: 745px;
    background-image: url(../img/app_bg.jpg);
    background-position: 50% 0;
    background-position: 19% 0;
    background-size: auto 100%;
}

.iphonex {
    top: 210px;
    left: calc(50% - 594px);
    opacity: 0;
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
    -webkit-transition: 0.6s all ease;
    transition: 0.6s all ease;
}

.water-app-content {
    top: 270px;
    left: calc(50% - 222px);
    text-align: center;
}

h2.water-app {
    opacity: 0;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
    -webkit-transition: 0.4s all ease 0.4s;
    transition: 0.4s all ease 0.4s;
    font-size: 30px;
    color: rgb(0, 183, 238);
    line-height: 1.2;
    text-align: center;
}

p.water-app {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
    -webkit-transition: 0.6s all ease 0.6s;
    transition: 0.6s all ease 0.6s;
    margin-bottom: 60px;
    width: 444px;
    font-size: 16px;
    color: rgb(92, 94, 94);
    line-height: 1.8;
    text-align: center;
}

.qrcode {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    -webkit-transition: 0.3s all ease 1.1s;
    transition: 0.3s all ease 1.1s;
}

.animation.water-app .iphonex,
.animation.water-app h2.water-app,
.animation.water-app p.water-app,
.animation.water-app .qrcode {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
}

.iphone {
    right: 4.5%;
}

.backiphone {
    right: 12.5%;
}


h1, h2, p {
    font-size: 36px;
    color: rgb(56, 209, 182);
    line-height: 0.694;
    font-weight: 100;
}

.sec1_text3 {
    font-size: 16px;
    color: rgb(86, 86, 86);
    line-height: 1.8;
    text-align: left;
}

.header-content-intro {
    font-size: 20px;
    color: rgb(56, 209, 182);
    line-height: 1.248;
    text-align: left;
    display: inline-block;
    text-transform: uppercase;
}


h2, p {
    margin-top: 0;
    margin-bottom: 10px;
}

span, dd, dt {
    margin: 0;
    padding: 0;
}

h2.drinkingtime1 {
    font-size: 36px;
    color: rgb(248, 181, 81);
    line-height: 1.5;
}

p.drinkingtime2 {
    font-size: 16px;
    color: rgb(97, 96, 96);
    line-height: 1.8;
    width: 575px;
}

span.smart1 {
    font-size: 30px;
    color: rgb(95, 96, 96);
    line-height: 1;
}

span.costomized-blue-01 {
    color: #30ADD2;
}

p.drinking-time-1 {
    font-size: 30px;
    color: rgba(255, 255, 255, 0.659);
    line-height: 0.9;
    text-align: center;
}

dt.timer-olock{
    font-size: 23px;
    color: rgba(0, 183, 238, 0.71);
    text-align: left;
}

dd.timer-olock{
    font-size: 14px;
    color: rgba(255, 255, 255, 0.671);
    line-height: 1;
    margin-left: 3px;
    letter-spacing: 0.2px;
    width: 144px;
}

span.water-TA {
    color: #38D1B6;
}



.degree-correlation-table-warpper li {
    display: inline-block;
}


.degree-sersie-warpper {
    top: 22px;
    left: -10px;
    font-size: 14px;
    color: #FFF;
    line-height: 1.5;
    text-align: center;
}

.degree-sersie-warpper > li {
    margin-bottom: 13px;
    font-size: 14px;
    line-height: 1.25;
}

.degree-feelings {
    top: 80px;
    left: 350px;
}

.degree-feelings > li {
    margin-bottom: 9px;
}

.degree-feelings-1 {
    color: #FF6900;
}

.degree-feelings-2 {
    color: rgba(246, 246, 246, 0.761);
}

.degree-feelings-3 {
    color: rgb(35, 124, 192);
}

.table-time-series > li {
    display: inline-block;
    width: 42px;
}

.table-time-series {
    top: 170px;
    left: 90px;
    width: 275px;
    font-size: 14px;
    color: #FFF;
}

.table-time-series > .table-time-series-6 {
    margin: 0;
}

p.series {
    padding-top: 220px;
}

.degree-correlation-table-warpper {
    top: 230px;
    left: 20px;
    width: 335px;
}


.degree-interval-part > li {
    width: 18%;
    text-align: center;
}

.timeseries-interval-part > li {
    width: 18%;
    text-align: center;
}

li.degree-feelings-warm {
    padding-left: 10px;
}

li.degree-feelings-cold {
    float: right;
    padding-right: 24px;
    color: #0068B7;
}


li.degree-feelings-cold:after{
    clear: both;
}

ul.degree-feelings-part {
    font-size: 14px;
    color: #FF6900;
}

ol.degree-interval-part {
    font-size: 16px;
    color: #FF6900;
    line-height: 1.9;
}

li.degree-interval-5{
    color: #0068B7;
}

ol.timeseries-interval-part {
    font-size: 16px;
    color: #FFF;
}


footer {
    background-color: rgb(0, 183, 238);
    padding-top: 20px;
    text-align: center;
}

p.launching,
p.minilogo {
    font-size: 14px;
    color: rgb(255, 255, 255);
    line-height: 1.429;
    text-align: center;
    height: 34px;
    margin-bottom: 20px;
    margin-top: 20px;
    vertical-align: middle;
}

p.minilogo {
    margin-top: 10px;
}



span.minilogo {
    font-size: 15px;
    color: rgba(255, 254, 254, 0.91);
}

input.mail-mailinput {
    border-radius: 7px;
    line-height: 2.75;
    color: rgb(92, 94, 94);
    width: 440px;
    border: none;
    padding-left: 15px;
    outline: none;
    margin-right: 15px;
    margin-left: 175px;
}

input.mail-submit {
    border-radius: 7px;
    background-color: rgb(0, 183, 238);
    height: 36px;
    font-size: 12px;
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    border: none;
    outline: none;
    border: 1px rgb(255, 255, 255) solid;
    width: 155px;
    cursor: pointer;
}

span.shareus {
    color: rgb(255, 254, 254);
    text-transform: uppercase;
    text-decoration: none;
}

a.mail-to-support,
a.share-fb {
    text-decoration: none;
    color: rgb(255, 254, 254);
    cursor: pointer;
}

p.copyright {
    font-size: 12px;
    font-family: "Noto Sans";
    color: rgba(255, 254, 254, 0.988);
    text-align: center;
    background-color: rgb(27, 27, 27);
    margin-bottom: 0;
    padding-bottom: 10px;
    padding-top: 20px;
    height: 20px;
    letter-spacing: -0.2px;
}

span.copyright-1 {
    left: 60px;
}

span.copyright-3 {
    top: 20px;
    right: 60px;
}

*::-moz-selection {
    background-color: rgba(56, 209, 128, 0.5);
}

*::selection {
    background-color: rgba(56, 209, 128, 0.5);
}

.mail-success-warpper,
.mail-failure-warpper,
.reserve-your-spot-warpper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(27, 27, 27, 0.7);
    z-index: 10000;
}

.reserve-your-spot-frame {
    position: fixed;
    top: calc(50vh - 186px);
    left: calc(50vw - 281.5px);
    background-color: rgb(0, 183, 238);
    max-width: 563px;
    height: 372px;
    width: calc(100% - 40px);
    text-align: center;
}


input.reserve-cancel {
    padding-top: 20px;
    padding-right: 20px;
    cursor: pointer;
}

h2.reserve-your-spot {
    text-transform: uppercase;
    margin-top: 100px;
    margin-bottom: 30px;
    color: #EEE;
    font-weight: 200;
    font-size: 22px;
    letter-spacing: 2px;
}

input.reserve-mail {
    width: 60%;
    line-height: 2.5;
    padding-left: 12px;
    border: none;
    font-size: 16px;
}

input.reserve-submit {
    line-height: 2.5;
    padding: 7px 26px;
    background-color: transparent;
    color: #EEE;
    border-width: 1px;
    font-size: 10px;
    font-weight: 100;
    cursor: pointer;
    border-style: solid;
}

input.reserve-submit:hover {
    color: rgb(0, 183, 238);
    background-color: #EEE;
}

input.reserve-mail,
input.reserve-submit {
    display: block;
    margin: auto;
    margin-bottom: 40px;
    border-radius: 7px;
    letter-spacing: 1px;
}


input {
    outline: none;
}

div.pre-order-now-top {
    z-index: 101;
}


img.pre-order-now {
    cursor: pointer;
    border-radius: 7px;
    z-index: 2001;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    display: inline-block;
    margin-bottom: 12px;
}

p.pre-order-now {
    width: 283px;
    font-size: 14px;
    color: rgb(108, 108, 108);
    line-height: 1.429;
    text-align: left;
    margin-top: -7px;
    z-index: -1;
}

img.fbIcon {
    margin-left: 13px;
    margin-top: -7px;
}

.temperature-sensor-img {
    display: inline-block;
}

.temperature-sensor-img:after {
    content: attr(data-temperature);
    font-size: 15px;
    color: #FFF;
    z-index: 1000;
    display: block;
    text-align: center;
    letter-spacing: 1px;
    font-size: 18px;
    padding-top: 24px;
}

img.pre-order-now:hover,
img.pre-order-now:hover {
    opacity: 0.7;
}


input.mail-submit:hover {
    background-color: #FFF;
    color: rgb(0, 183, 238);
}

span.text-block {
    display: inline-block;
}

@media all and (max-width: 1700px) {
    .iphone {
        width: 280px;
    }
    .backiphone {
        width: 400px;
    }

    .costomized-water .costomized-water-01,
    .costomized-water .costomized-water-02 {
        left: 10%;
    }

    img.twoGoldBottle {
        display: none;
    }

    section.lots-days-content {
        top: auto;
        bottom: 80px;
    }

    p.lots-days {
        padding-top: 60px;
    }

    img.wateGold {
        bottom: 15px;
        left: calc(50% - 790px);
    }

    .iterable-images-02-2 {
        width: 300px;
    }

    .iterable-images-02-1,
    li.iterable-images-01 > img,
    li.iterable-images-03 > img {
        width: 400px;
    }

}
@media (min-width: 1280px) and (max-width: 1700px) {

    img.tragaleGreenLeft {
        left: calc(50% - 490px);
    }

}

@media (min-width: 1280px) and (max-width: 1400px) {
    img.redheadBottle {
       width: 315px;
       left: 5px;
   }
}

@media (min-width: 1400px) and (max-width: 1700px){
    img.redheadBottle {
       left: calc(50% - 400px);
   }
}

@media all and (max-width: 1500px) {
    .iphone {
        width: 250px;
    }
    .backiphone {
        width: 370px;
    }

    .demo-warpper.temperature-sensor {
        right: calc(50% - 261px);
    }

    li.temperature-sensor-img {
        width: 180px;
    }

    img.width-img-1500 {
        width: 180px;
    }

}


@media all and (max-width: 1400px) {
    .cup1,
    .cup3,
    .cup5 {
        display: none;
    }

    img.bluetimeTragale {
        width: 15%;
    }

}

@media all and (max-width: 1366px) {
    .iphone {
        right: 3.5%;
    }

    .backiphone {
        right: 9.5%;
    }

    .demo-warpper.temperature-sensor {
        right: calc(50% - 264px);
    }

    video.absolute-1366 {
        position: absolute;
        bottom: 0;
        left: 0;
    }

    img.tragaleGreenR {
        right: -3vw;
    }

    img.tragaleGreenR1 {
        right: -3vw;
        top: -0.3vw;
    }

    .animation.iterable-warpper .tragaleGreenR1,
    .animation.tragaleGreenR1,
    .animation.two-batteries .tragaleGreenR,
    .two-batteries .tragaleGreenR,
    .tragaleGreenR {
        opacity: 0.5;
    }

    section.two-batteries-content {
        top: 60px;
    }

    .cool-desgin-graph-warpper {
        right: auto;
        left: calc(50% - 160px);
        top: 330px;
    }

    p.cool-desgin {
        width: 440px;
    }
}

img.twoBlackBottle.show-at-massion {
    display: none;
}

@media (min-width: 769px) and (max-width: 1366px) {
    img.twoBlackBottle.show-at-massion {
        display: block;
        display: block;
        left: calc(50% - 520px);
        right: auto;
    }

    img.show-at-all.twoBlackBottle {
        display: none;
    }

}


@media (min-width: 769px) and (max-width: 1280px) {
    img.twoBlackBottle.show-at-massion {
        height: 220px;
        top: 400px;
        left: calc(50% - 370px);
    }
}

@media all and (max-width: 1280px) {
    .iphone {
        right: 2.5%;
        width: 240px;
    }

    .backiphone {
        right: 7.5%;
        width: 320px;
    }

    .iphonex {
        left: calc(55% - 594px);
    }

    .costomized-water .costomized-water-01,
    .costomized-water .costomized-water-02 {
        left: 5%;
        width: 350px;
        bottom: 0;
        top: auto;
    }

    section.expired-remainders,
    section.temperature-sensor {
        width: 100%;
        height: 950px;
    }

    section.remainder-and-sensor {
        height: 1900px;
    }

    .cool-desgin-graph-warpper {
        top: 420px;
        left: calc(50% - 280px);
    }

    .cool-desgin-content {
        top: 80px;
        left: 45px;
    }

    p.cool-desgin {
        width: 550px;
    }

    section.cool-desgin {
        height: 890px;
    }

}


@media all and (max-width: 1120px) {
    .iphone,
    .backiphone {
        display: none;
    }

    .timer {
        right: 50%;
    }

    p.iterable-content {
        width: calc(100% - 20px);
    }

    .animation.iterable-warpper .tragaleGreenR1,
    .animation.tragaleGreenR1,
    .animation.two-batteries .tragaleGreenR,
    .two-batteries .tragaleGreenR,
    .tragaleGreenR {
        opacity: 0;
    }

    .iterable-images-02-2 {
        width: 210px;
    }

    li.iterable-images-01 > img,
    .iterable-images-02-1,
    li.iterable-images-03 > img {
        width: 300px;
    }


    li.iterable-content-01 {
        padding-bottom: 460px;
    }

    li.iterable-content-02 {
        padding-bottom: 270px;
    }

    li.iterable-content-03 {
        padding-bottom: 320px;
    }

    span.copyright-1 {
        position: static;
        display: block;
        margin-bottom: 20px;
    }

    p.copyright {
        height: auto;
        padding-bottom: 20px;
    }

    span.copyright-3 {
        position: static;
        margin-left: 20px;
    }

    img.life-whiteBottle {
        left: 15px;
    }

    .lifetime-content {
        left: calc(50% - 280px);
    }

    .tempgrid-content {
        right: calc(50% - 110px);
    }

}


@media all and (max-width: 900px) {
    li[class^="iterable-content-"] {
        padding-top: 350px;
    }
    ul.colors-list {
        letter-spacing: 30px;
    }
}

@media all and (max-width: 1080px) {
    .iphonex {
        left: auto;
        right: 10%;
    }

    .water-app-content {
        top: 200px;
        left: calc(50% - 312px);
        text-align: center;
    }

    .header-warpper {
        left: 80px;
    }

    img.rotate.water {
        display: none;
    }

    img.will-rotateZ-1080 {
        -webkit-transform: rotateZ(15deg) translateX(25px) translateY(105px);
                transform: rotateZ(15deg) translateX(25px) translateY(105px);
        width: 290px;
    }

    .scene.cup6 {
        top: 860px;
    }

    section.lifetime-and-tempgrid {
        height: 890px;
    }

    img.life-whiteBottle {
        left: calc(25% - 245px / 4);
    }

    p.lifetime.ml {
        position: absolute;
        bottom: -390px;
        right: 130px;
    }

    .lifetime-content{
        top: 60px;
        left: calc(50% - 380px);
    }

    .tempgrid-content {
        top: 150px;
        right: calc(50% - 20px);
    }


}

@media all and (max-width: 1000px) {
    .costomized-water .costomized-water-01,
    .costomized-water .costomized-water-02 {
        width: 250px;
        left: -10px;
    }

    .timer {
        right: 66%;
    }

    .position-768-unset {

    }

}

@media (min-width: 768px) and (max-width: 900px) {
    input.mail-mailinput.mailinput-02 {
        margin-left: 30px;
    }
}

@media (max-width: 900px) {

    section.lifetime-and-tempgrid {
        height: 1160px;
    }

    .tempgrid-content {
        top: 250px;
        right: calc(50% + 170px);
    }

    .lifetime-content {
        top: 60px;
        left: calc(50% - 310px);
    }

    p.lifetime.text {
        width: 80%;
        margin-top: 35px;
    }

    p.lifetime.ml {
        bottom: -590px;
        right: 190px;
    }

    h2.lifetime {
        width: calc(100% - 40px);
        line-height: 1.1;
    }

}

.show-lower-768 {
    display: none;
}

@media all and (max-width: 768px) {
    .no-768,
    .mask,
    .parallax-warpper,
    .rotate.water {
        display: none;
    }

    .non-iterable-warpper {
        text-align: center;
    }

    section[class*="intro-on-mobile-"].show-lower-768 {
        padding-top: 80px;
        padding-bottom: 50px;
    }

    .non-iterable-warpper img.icon {
        width: 117px;
    }

    .non-iterable-warpper h2.intro-mobile {
        margin-top: 40px;
        line-height: 1.1;
    }

    .non-iterable-warpper p.intro-mobile {
        margin-top: 15px;
        margin-bottom: 40px;
        font-size: 16px;
    }

    .non-iterable-warpper .imgs {
        height: 560px;
    }

    .non-iterable-warpper .imgs > img {
        height: 100%;
    }

    .intro-on-mobile-2 .imgs {
        position: relative;
    }

    .intro-on-mobile-2 .imgs > img:last-child {
        position: absolute;
    }

    p.intro-mobile {
        color: #d9d6d6;
        line-height: 1.6;
        max-width: 450px;
        margin: auto;
        width: calc(100% - 40px);
        font-size: 16px;
    }

    h2.intro-mobile {
        color: #FFB55A;
    }

    .intro-on-mobile-1.show-lower-768 {
        background-position: 50% 50%;
        background-image: url(../img/304_bg.jpg);
        background-size: auto 100%;
    }
    .intro-on-mobile-2.show-lower-768 {
        background-position: 50% 50%;
        background-image: url(../img/bottle2_bg.jpg);
        background-size: auto 100%;
    }
    .intro-on-mobile-3.show-lower-768 {
        background-position: 50% 50%;
        background-image: url(../img/bottle3_bg.jpg);
        background-size: auto 100%;
    }



    .intro-on-mobile-2 .imgs > img:last-child {
        bottom: -20px;
        height: 470px;
        left: calc(50% - 80px);
    }

    .show-lower-768 {
        display: block;
    }

    .iphone,
    .backiphone {
        display: none;
    }

    .bluetimeTragale,
    .costomized-water-01,
    .costomized-water-02 {
        display: none;
    }

    div.iterable-fixed-size-warpper,
    .twoGoldBottle,
    .wateGold,
    .tragaleGreenR {
        display: none;
    }

    .position-768-unset {
        position: static;
    }

    .float-768-unset {
        float: none;
    }

    .absolute-768 {
        position: absolute;
    }

    header.top-ref {
        height: 1300px;
    }


    section.drinking-me {
        height: 560px;
    }

    section.water-app {
        height: auto;
        padding-bottom: 60px;
    }

    section.costomized-water {
        height: 900px;
    }

    section.remainder-and-sensor {
        height: auto;
    }

    section.expired-remainders {
        height: 1005px;
        width: 100%;
    }

    section.temperature-sensor {
        height: auto;
        width: 100%;
    }

    section.water-mp4 {
        height: 880px;
    }

    section.cool-desgin {
        height: 940px;
    }

    section.lifetime-and-tempgrid {
        // height: 975px;
    }

    .tempgrid-content {
        left: calc(50% - 200px);
        top: 230px;
    }

    ol.degree-sersie-warpper{
        left: 0px;
    }

    p.lifetime.ml {
        bottom: 245px;
        right: 10px;
        padding-left: 24%;
    }

    section.two-batteries {
        height: auto;
    }

    section.colors-availales {
        height: auto;
    }

    img.logo-sguai-smart-cup {
        width: 223px;
        margin-top: 26px;
        margin-left: 26px;
    }

    .header-warpper h1.header,
    h2.drinking-me.drinkingtime1,
    h2.water-app {
        width: calc(100% - 40px);
        margin: 20px auto 15px;
        text-align: center;
    }
    .header-warpper p.header-content.text {
        max-width: 654px;
        width: calc(100% - 40px);
        text-align: center;
        margin: auto;
    }

    .header-warpper {
        margin-top: 30px;
    }

    p.header-content {
        text-align: center;
    }

    .background01-warpper {
        top: 297px;
        left: calc(50% - 90px);
    }

    img.circle25 {
        padding-left: 150px;
        padding-top: 25px;
    }

    p.drinking-me.drinkingtime2 {
        max-width: calc(100% - 40px);
        text-align: center;
        margin: auto;
    }

    .fade-warpper {
        bottom: 50%;
        left: calc(50% - 224px);
    }

    h2.water-app {
        padding-top: 70px;
    }

    p.water-app {
        max-width: 521px;
        width: calc(100% - 40px);
        margin: auto;
    }

    img.iphonex.absolute.position-768-unset {
        display: block;
        margin: auto;
        margin-top: 80px;
    }

    h2.costomized-water-content {
        padding-top: 70px;
    }

    p.costomized-water-content {
        max-width: 588px;
        width: calc(100% - 40px);
        margin: auto;
    }

    .timer {
        top: auto;
        bottom: 530px;
        right: calc(50% + 228px);
    }

    h2.expired-remainders {
        padding-top: 70px;

    }
    p.expired-remainders {
        max-width: 552px;
        width: calc(100% - 40px);
        margin: auto;
    }

    img.flashDot {
        margin-top: 40px;
    }

    .redheadBottle {
        left: calc(50% - 168.5px);
    }

    h2.temperature-sensor {
        padding-top: 80px;
    }

    p.temperature-sensor {
        max-width: 640px;
        width: calc(100% - 40px);
        margin: auto;
    }

    h2.water-mp4 {
        max-width: 580px;
        width: calc(100% - 40px);
        margin: auto;
        margin-top: 117px;
    }

    p.water-mp4 {
        max-width: 590px;
        width: calc(100% - 40px);
        margin: auto;

    }

    video {
        bottom: 0;
        left: 0;
    }

    h2.cool-desgin {
        max-width: 555px;
        width: calc(100% - 40px);
        margin: auto;
        padding-top: 90px;
        text-align: center;
    }

    p.cool-desgin {
        max-width: 600px;
        width: calc(100% - 40px);
        margin: auto;
        text-align: center;
    }

    .cool-desgin-graph-warpper {
        left: calc(50% - 150px);
        bottom: 465px;
        top: auto;
        right: auto;
    }

    h2.lifetime {
        padding-top: 60px;
        max-width: 440px;
        width: calc(100% - 40px);
        text-align: center;
        margin: auto;
        line-height: 1.1;
        margin-bottom: 10px;
    }

    p.lifetime.text {
        text-align: center;
        width: calc(100% - 40px);
        max-width: 570px;
        margin: auto;
    }

    // .tempgrid-content {
    //     left: 280px;
    //     top: auto;
    //     bottom: 470px;
    // }

    .lifetime.ml {
        bottom: 510px;
        left: 225px;
    }

    .life-whiteBottle {
        left: 0;
        bottom: 75px;
    }

    p.two-batteries {
        margin: auto;
        height: 24em;
    }

    .lots-days-content {
        margin: auto;
        margin-top: 300px;
        margin-bottom: 80px;
    }

    p.lots-days {
        padding-top: 50px;
        margin: auto;
        height: 6em;
    }

    // p.two-batteries {
    //     height: 12em;
    // }

    li[class^="colors-list-"] > img {
        width: 100px;
    }

    .colors-availales-content {
        margin-top: 60px;
    }

    ul.colors-list {
        letter-spacing: 40px;
        margin-top: 45px;
        margin-bottom: 55px;
    }

    li[class^="colors-list-"] {
        height: 420px;
        background-position: -5px 275px;
        background-size: 105px 84px;
        // background-size: 100% auto;
    }

    .animation.colors-availales li[class^="colors-list-"] {
        background-position: -5px 315px;
    }

    input.mail-mailinput {
        margin-left: 0;
    }

    .show-on-768-block {
        display: block;
    }

    .show-on-768-inline {
        display: inline;
    }

    .show-on-768-inline-block {
        display: inline-block;
    }

    p.pre-order-now {
        margin: 0;
        display: inline-block;
    }

    img.blackBottleMobile {
        padding-right: 30px;

    }

    img.pre-order-now {
        margin-bottom: 80px;
    }

    .cool-desgin-graph > p {
        // font-size: 13px;
    }

    ul.letter-768 {
        letter-spacing: -12px;
        margin-right: auto;
        margin-left: auto;
        width: 300px;
    }

    h2.water-mp4 {
        line-height: 1.2;
        margin-bottom: 15px;
    }

    .greenLight-mp4 {
        bottom: 354px;
    }

    img.pre-order-now.margin-top-768 {
        margin-top: 250px;
    }

    .animation.drinking-me .womanBg,
    .drinking-me .womanBg {
        top: -90px;
        opacity: 0.7;
    }

    .demo-warpper {
        margin-top: 50px;
        margin-bottom: 80px;
    }

    img.twoBlackBottle {
        height: 35vw;
    }

    .demo-warpper.temperature-sensor {
        text-align: center;
    }

    img.desgin-body {
        top: -30px;
    }

    p.apartText1.frame-line-768 {
        top: 30px;
        left: 290px;
    }

    p.apartText2.frame-line-768 {
        top: 110px;
        left: 290px;
    }

    p.apartText3.frame-line-768 {
        top: 170px;
        left: 260px;
    }

    p.apartText4.frame-line-768 {
        top: 230px;
        left: 260px;
    }

    p.apartText5.frame-line-768 {
        top: 280px;
        left: 270px;
    }

    p.apartText6.frame-line-768 {
        top: 350px;
        left: 240px;
    }

    .frame-line-768-lines {
        display: inline-block;
        padding-right: 70px;
        height: 1px;
        background-color: #00B7EE;
        top: 50%;
        left: -60px;
    }

    p.apartText6.frame-line-768 {
        left: 153px;
    }

    p.apartText5.frame-line-768 {
        left: 180px;
    }

    p.apartText4.frame-line-768 {
        left: 216px;
    }

    p.apartText3.frame-line-768 {
        left: 199px;
    }

    p.apartText2.frame-line-768 {
        left: 198px;
    }

    p.apartText1.frame-line-768 {
        left: 199px;
    }

    span.frame-line-768-lines.the-line-5 {
        padding-left: 16px;
        left: -69px;
    }

    span.frame-line-768-lines.the-line-4 {
        padding-left: 51px;
        left: -112px;
    }

    span.frame-line-768-lines.the-line-3 {
        padding-left: 25px;
        left: -85px;
    }

    span.frame-line-768-lines.the-line-2 {
        padding-left: 10px;
    }

    span.frame-line-768-lines.the-line-1 {
        padding-left: 12px;
        left: -69px;
    }

}

@media all and (max-width: 660px) {

    li.temperature-sensor-img {
        display: block;
    }

    section.temperature-sensor {
        height: auto;
    }

    .temperature-sensor-img:after {
        display: inline-block;
        padding: 0;
        width: 120px;
        position: absolute;
        margin-top: 100px;
        text-align: left;
    }

    section.lots-days-content {
        margin-top: 40vw;
    }

    input.mail-mailinput {
        display: block;
        margin: auto;
        margin-bottom: 25px;
        margin-top: 30px;
    }

    span.text-block {
        font-size: smaller;
    }
}

@media all and (max-width: 580px) {

    div.pre-order-now-top {
        width: 300px;
        margin: auto;
        text-align: center;
        margin-top: 50px;
        margin-bottom: 40px;
    }

    .no-show-580 {
        display: none;
    }

    img.blackBottleMobile {
        margin: auto;
        padding: 0;
        float: none;
    }

    img.pre-order-now.margin-580 {
        margin: 25px auto;
    }

    header.top-ref {
        height: auto;
    }

    ul.colors-list {
        width: 300px;
        margin: auto;
        margin-top: 50px;
        margin-bottom: 80px;
        letter-spacing: 75px;
    }

    li.colors-list-04 {
        margin-top: 60px;
    }

}

@media all and (max-width: 550px) {
    ul.width-550 {
        width: 330px;
    }

    img.tragaleGreenLeft {
        display: none;
    }

    img.life-whiteBottle {
        width: 210px;
    }

    .tempgrid-content {
        top: 300px;
        left: calc(50% - 200px);
    }

    p.lifetime.ml.absolute-768 {
        padding-left: 13%;
    }

    input.mail-mailinput {
        width: 65%;
    }

    h2.water-mp4 {
        margin-top: 80px;
    }

    span.text-block {
        font-size: 5vw;
    }

}

@media all and (max-width: 548px) {
    .background01-warpper {
        left: calc(50% - 140px);
    }

    img.circle25 {
        padding-left: 50px;
    }

}

@media all and (max-width: 499px) {

    h2.water-app,
    h2.expired-remainders,
    h2.temperature-sensor {
        padding-top: 60px;
    }
    h2.expired-remainders,
    h2.temperature-sensor,
    h2.two-batteries {
        width: calc(100% - 40px);
        margin-left: auto;
        margin-right: auto;
    }

    p.launching {
        width: 275px;
        margin: 20px auto;
    }

    section.lots-days-content {
        margin-top: 30vw;
    }

    img.twoBlackBottle {
        top: 390px;
    }

    .drinking-me img.drink-02.fade-in {
        width: 175px;
        top: 35px;
    }

    img.fade-in.drink-03 {
        left: -80px;
    }

    .fade-warpper {
        left: calc(50% - 170px);
        bottom: 40%;
    }

    img.iphonex {
        width: 200px;
    }

    img.redheadBottle {
        width: 280px;
        left: calc(50% - 140px);
    }

    section.expired-remainders {
        height: 870px;
    }
}

@media all and (max-width: 462px) {
    section.expired-remainders {
        height: 910px;
    }

    h2.water-mp4 {
        margin-top: 50px;
    }
}

.show-on-453 {
    display: none;
}

@media all and (max-width: 453px) {

    span.header-content-intro {
        display: block;
        margin: auto;
        margin-top: 15px;
        width: 135px;
    }

    img.circle25 {
        padding-left: 0;
        padding-bottom: 0;
        padding-right: 0;
    }

    .background01-warpper{
        left: calc(50% - 90px);
    }

    img.blackBottleMobile.show-on-768-block {
        width: 150px;
    }

    ul.colors-list {
        letter-spacing: 50px;
    }

    h2.cool-desgin {
        padding-top: 50px;
    }

    p.colors-availales,
    h2.colors-availales {
        width: calc(100% - 40px);
        margin-left: auto;
        margin-right: auto;
    }

    p.lots-days {
        padding-top: 20px;
    }

    .no-453 {
        display: none;
    }

    .show-on-453 {
        display: block;
    }

    img.tempPic-453 {
        width: calc(100% - 40px);
        margin: auto;
        margin-top: 50px;
        min-width: 320px;
        -webkit-transform: translateY(15px);
        transform:  translateY(15px);
        opacity: 0;
        -webkit-transition: all 0.6s ease 0.7s;
        -moz-transition: all 0.6s ease 0.7s;
        -ms-transition: all 0.6s ease 0.7s;
        -o-transition: all 0.6s ease 0.7s;
        transition: all 0.6s ease 0.7s;
    }

    .animation img.tempPic-453 {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform:  translateY(0);
    }

}

@media all and (max-width: 440px) {
    .background01-warpper {
        top: 355px;
    }

    .drinking-me img.drink-02.fade-in {
        left: -40px;
    }


    ul.width-440 {
        width: 250px;
    }

    img.fade-in.drink-02 {
        width: 145px;
        top: 55px;
        left: -20px;
    }

    img.fade-in.drink-03 {
        left: -120px;
        height: 70px;
    }

    img.fade-in.drink-03 {}

    .fade-warpper {
        left: calc(50% - 150px);
    }

    h1.header,
    h2.drinking-me.drinkingtime1,
    h2.water-app,
    h2.costomized-water-content,
    h2.expired-remainders,
    h2.temperature-sensor,
    h2.cool-desgin,
    h2.two-batteries,
    h2.health-life,
    h2.colors-availales
    {
        font-size: 30px;
    }

    .header-warpper p.header-content.text,
    p.drinkingtime2,
    p.water-app,
    p.costomized-water-content,
    p.expired-remainders,
    span.flashingreminder,
    p.temperature-sensor,
    p.water-mp4,
    p.cool-desgin,
    p.lifetime.text,
    span.oz,
    p.colors-availales,
    p.two-batteries,
    p.lots-days
    {
        // font-size: 24px;
    }
}

@media all and (max-width: 385px) {
    .background01-warpper {
        top: 377px;?
    }

    .temperature-sensor-img:after {
        display: block;
        position: static;
        padding: 0;
        margin: auto;
        text-align: center;
    }

    ul.letter-768 {
        margin-right: auto;
        margin-left: auto;
    }

    .remainder-and-sensor li[class*=sensor-demo-] {
        margin: auto;
    }

    img.twoBlackBottle {
        top: 425px;
    }
}

@media all and (max-width: 369px) {
    h1.header {
        line-height: 1.1;
    }

    .background01-warpper {
        // top: 425px;
        top: 385px;
    }

    img.fade-in.drink-02 {
        width: 150px;
        top: 50px;
    }

    img.fade-in.drink-03 {
        height: 60px;
    }

    section.water-mp4 {
        height: 900px;
    }
}

.show-500 {
    display: none;
}

@media all and (max-width: 500px) {
    .no-show-500 {
        display: none;
    }

    .show-500 {
        display: block;
        max-width: 450px;
        width: 90%;
        margin: auto;
        margin-top: 90px;
    }

    .timer-mobile-need.timer-block-animation-dalay-01 {
        -webkit-transition-delay: 0.2s;
        -moz-transition-delay: 0.2s;
        -ms-transition-delay: 0.2s;
        -o-transition-delay: 0.2s;
        transition-delay: 0.2s;
    }

    .timer-mobile-need.timer-block-animation-dalay-02 {
        -webkit-transition-delay: 0.4s;
        -moz-transition-delay: 0.4s;
        -ms-transition-delay: 0.4s;
        -o-transition-delay: 0.4s;
        transition-delay: 0.4s;
    }

    .timer-mobile-need.timer-block-animation-dalay-03 {
        -webkit-transition-delay: 0.7s;
        -moz-transition-delay: 0.7s;
        -ms-transition-delay: 0.7s;
        -o-transition-delay: 0.7s;
        transition-delay: 0.7s;
    }

    .timer-mobile-need.timer-block-animation-dalay-04 {
        -webkit-transition-delay: 1s;
        -moz-transition-delay: 1s;
        -ms-transition-delay: 1s;
        -o-transition-delay: 1s;
        transition-delay: 1s;
    }

    img.logo-sguai-smart-cup {
        height: 44px;
        width: auto;
    }


}

img.timerMobile {
    opacity: 0;
    -webkit-transform: translateY(15px);
    transform:  translateY(15px);
    -webkit-transition: 0.6s all;
    -moz-transition: 0.6s all;
    -ms-transition: 0.6s all;
    -o-transition: 0.6s all;
    transition: 0.6s all;
}

.animation img.timerMobile {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform:  translateY(0);
}

@media all and (max-width: 603px) {
    .reserve-your-spot-frame {
        left: 20px;
    }
    img.rotate.water.mobile {
        width: 300px;
        right: 3%;
    }
}


@media all and (max-width: 768px) {
    p.header.like-h1 {
        text-align: center;
    }

    p.header-content.text.sec1_text3 {
        line-height: 1.2;
    }

    .header-bottles {
        text-align: right;
        padding-right: 60px;
        padding-bottom: 70px;
        margin-top: 60px;
        margin-bottom: 50px;
        overflow: hidden;
    }

    .bground-bottles-warpper {
        top: 0;
    }
    .rotate.water.mobile {
        display: block;
    }

    .pre-order-now-top.mobile {
        bottom: 0;
        // left: 40px;
        left: 150px;
    }

    img.pre-order-now.mobile {
        margin-bottom: 10px;
        display: block;
    }

    img.mobile-cup-2 {
        width: 28.74%;
        left: 18%;
        top: 0;
    }

    img.rotate.water.mobile {
        overflow: hidden;
        width: 40%;
        top: auto;
        left: auto;
        right: 3%;
        bottom: 0;
    }

    img.mobile-cup-1 {
        width: 62%;
        top: -10px;
        left: -38%;
    }

    img.mobile.blackBottleMobile {
        width: 18%;
    }

    div.header.show-lower-768 * {
        opacity: 0;
        -webkit-transition: 0.6s all;
        -moz-transition: 0.6s all;
        -ms-transition: 0.6s all;
        -o-transition: 0.6s all;
        transition: 0.6s all;
    }

    div.header.show-lower-768.animation * {
        opacity: 1;
    }

    .mobile-header-animation-00 {
        transition-delay: 0;
    }
    .mobile-header-animation-01 {
        transition-delay: 0.2s
    }
    .mobile-header-animation-02 {
        transition-delay: 0.4s
    }
    .mobile-header-animation-03 {
        transition-delay: 0.6s
    }
    .mobile-header-animation-04 {
        transition-delay: 0.8s
    }
    .mobile-header-animation-05 {
        transition-delay: 1.0s
    }
    .mobile-header-animation-06 {
        transition-delay: 1.3s
    }
    .mobile-header-animation-07 {
        transition-delay: 1.5s
    }
    .mobile-header-animation-08 {
        transition-delay: 1.8s
    }
    .mobile-header-animation-09 {
        transition-delay: 2.2s
    }

}


@media all and (max-width: 500px) {
    img.mobile.blackBottleMobile {
        width: 23%;
    }

    img.mobile-cup-1 {
        top: 30px;
    }

    p.header.like-h1 {
        line-height: 1.3;
    }

    .tempgrid-content.absolute {
        left: calc(50% - 200px);
        top: 320px;
    }
}

@media all and (max-width: 385px) {
    p.header.like-h1.mobile-header-animation-02 {
        line-height: 1.3;
        font-size: 30px;
    }


}

@media all and (max-width: 414px) {
    .will-be-gone {
        display: none;
    }

    .header-warpper.mobile {
        margin-top: 10px;
    }

    img.logo-sguai-smart-cup {
        height: 44px;
        width: auto;
    }

    p.header.like-h1 {
        font-size: 30px;
    }

    .header-bottles {
        margin-top: 10px;
    }

    p.lifetime.ml.absolute-768 {
        padding-left: 16px;
    }

    img.life-whiteBottle {
        left: 15px;
    }
}

@media all and (max-width: 580px) {
    .pre-order-now-top.mobile {
        position: static;
        text-align: center;
        margin-top: -100px;
    }

    img.rotate.water.mobile {
        width: 200px;
        right: 3%;
    }

    p.pre-order-now {
        text-align: center;
    }

    img.pre-order-now.mobile {
        margin: auto;
        margin-bottom: 10px;
        position: relative;
        z-index: 100;
    }

}

@media all and (max-width: 400px) {
    p.lifetime.ml.absolute-768 {
        padding-left: 0;
    }
}

@media (min-width: 769px) and (max-width: 960px) {
    h2.water-app,
    p.water-app {
        width : 350px
    }
}

.server-feedback-warpper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(27, 27, 27, 0.7);
    z-index: 10001;
}

.server-feedback-frame {
    position: fixed;
    top: calc(50vh - 125px);
    left: calc(50vw - 215px);
    background-color: rgb(0, 183, 238) !important;
    max-width: 430px;
    height: 250px;
    width: calc(100% - 40px);
    text-align: center;
}

p.server-feedback-context,
p.server-feedback-title {
    text-transform: uppercase;
    margin-top: 30px;
    margin-bottom: 30px;
    color: #EEE;
    font-weight: 200;
    font-size: 22px;
    letter-spacing: 2px;
}

p.server-feedback-context {
     font-size: 18px;
}

span.server-feedback-ok {
        display: block;
        margin: auto;
        /* margin-bottom: 40px; */
        border-radius: 7px;
        letter-spacing: 1px;
        cursor: pointer;
        width: 100px;
        line-height: 3;
        border: 1px #FFF solid;
        color: #FFF;
        margin-top: 70px;
}

span.server-feedback-ok:hover {
    background-color: #FFF;
    color: rgb(0, 183, 238);
}

@media (max-width: 488px) {
    .server-feedback-frame {
        left: 20px;
    }
}


/*




img.pre-order-now.mobile {
    width: 140px;
    margin: auto;
    margin-bottom: 10px;
    padding-top: 40px;
}

.header-bottles {
    padding-bottom: 140px;
}

img.mobile.blackBottleMobile {
    width: 23%;
}

.header-bottles {
    margin-top: 0px;
}

img.mobile-cup-1 {
    top: 77px;
    left: -38%;
}



p.pre-order-now {
    padding: 0;
    margin: 0;
    margin-left: -15px;
    margin: auto;
    text-align: center;
}

    .drinking-me img.drink-02.fade-in {
        left: -40px;
    }

*/