.monly {
    display:none;
}

@media only screen and (max-width : 640px)  {
    .monly {
        display:block;
    }
    .donly {display:none;}
    #animenu {
        display:none;
    }
    
    #menucontainer {
        display:none;
    }
    
    #fp-nav.right {
        right:5px;
    }
    
    .sall-text {
        font-size:1.2em;
        line-height:1.3em;
        text-align: left;
    }
    
    #mfdacode {
        position: fixed;
        bottom:5px;
        width:90%;
        left:5%;
        z-index: 99;
        font-size:80%;
        color:#333;
        text-align: center;
        line-height: 1em;
        text-shadow: 1px 1px #ffffff;
    }

    
    /*======section 0 ====== */
    #s0-bg {width:250%; left:-70%; top:7%;}
    #s0-splash {width: 160%;
    height: 90%;
    right: -40%;
    opacity: 1;
    background-size: cover;
    top: 5%;}
    #s0-tophead {display:none;}
    #s0-scroll {
        display:none;
        }
    #s0-title {width: 50%;
    top: 33%;
    left: 5%;
        }
    #s0-product {position:absolute; width:90%; left:0; bottom:28%; z-index:8;}
    #s0-sign {position:absolute; width:80%; left:10%; bottom:20%; z-index:9;}
    
    /*======section 1 ====== */
    .bubble {
    width: 10%;
    padding-top:10%;
        border:0px;
    }
    
    #s1-icon {
    top:25%;
    left:49%;
    width:20%;
}
    
    #s1-packshot {
        left:1%;
        width:90%;
        bottom:20%;
        z-index:999;
    }
    
    #s1-lens {
    right: 45%;
    top: 20%;
    width: 33%;
    }
    #s1-lensback {
        right: 45%;
        top: 20%;
        width: 33%;
    }

    #s1-content {
        width: 30% ;
        top: 40% !important;
        left: 55%;
    }

    #s1-3x {
        width: 30%;
        top: 20%;
        left: 45%;
    }
    
    #s1-title {
        font-size:3.5em;
        line-height:1.1em;
    }
    
    @-webkit-keyframes s13x {
    0%,
    100% {
        -webkit-transform: scale(0.75);
        -moz-transform: scale(0.75);
        transform: scale(0.75);
    }
    50% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
    }
}

@-moz-keyframes s13x {
    0%,
    100% {
        -webkit-transform: scale(0.75);
        -moz-transform: scale(0.75);
        transform: scale(0.75);
    }
    50% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
    }
}

@-o-keyframes s13x {
    0%,
    100% {
        -webkit-transform: scale(0.75);
        -moz-transform: scale(0.75);
        transform: scale(0.75);
    }
    50% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
    }
}
    
    
    @-webkit-keyframes moveclouds { 
    0% { 
        right: 100%;
        top:15%;
    }
    100% { 
        right: -10%;
        top:40%;
    }
    }

    @-webkit-keyframes sideWays { 
        0% { 
            margin-top:10%;
        }
        100% { 
            margin-top:25%;
        }
    }

    @-moz-keyframes moveclouds {     
        0% { 
            right: 100%;
            top:15%;
        }
        100% { 
            right: -10%;
            top:40%;
        }
    }

    @-moz-keyframes sideWays {
        0% { 
            margin-top:10%;
        }
        100% { 
            margin-top:25%;
        }
    }
    @-o-keyframes moveclouds {
        0% { 
            right: 100%;
            top:15%;
        }
        100% { 
            right: -10%;
            top:40%;
        }
    }

    @-o-keyframes sideWays {
        0% { 
            margin-top:10%;
        }
        100% { 
            margin-top:25%;
        }
    }
    
    #s1-footnote {
        width:90%;
        left:5%;
        bottom:6%;
        font-size:0.8em;
        text-align:left;
    }
    
    /*======section 2 ====== */
    #s2-title {
    font-size: 2.7em;
    text-align: left;
    line-height: 1.0em;
    }
    
    #s2-icon {
    top:14%;
    left:7%;
    width:20%;
}
    
    #s2-text {
        padding-top:0px;
        text-align:left;
    }
    
    #s2-canvas {
        display:none;
    }

    #s2-content {
        width: 62%;
        top: 14% !important;
        left: 30%;
    }

    #s2-clariti {
        width: 62%;
        top: 40%;
        left: 15%;
    }

    #s2-claritifill {


        top: 74%;
        left: 17%;
        width: 15%;
        height: 1%;

       /* 
        top: 68%;
        left: 5%;
        width: 39%;
        height: 4%;
        */
    }
    
    #s2-claritipercent {
        font-size:2em;
        color:#0bafdb;
    }
    #s2-tradpercent {
        font-size:2em;
        margin-left:20%;
    }
    #s2-tradpercent span {
        font-size:0.5em;
        position:absolute;
        top:17%;
        left:17%;
    }
    
    #s2-clariti-txt {
        font-size: 0.9em;
    }
    #s2-clariti-txt img {
        width:80%;
    }
    
    #s2-structure {
    width: 20%;
    top: 58%;
    left: 58%; 
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
}
    
    #s2-wetloc {
    width:25%;
    top: 58%;
    left: 62%;
}

.bubbleo2  {
    border:none;
}
    
    
    
    /*======== Section 3 =============== */

    #s3-lens {
        bottom: 51%;
        left: 5%;
        width: 38%;
        z-index:10;
    }
    
    #s3-icon {
    top:46%;
    left:13%;
    width:20%;
}

    #s3-shield {
        bottom: 51%;
        left: 5%;
        width: 38%;
        z-index: 10;
    }
    
    #s3-desc {
        line-height:1.5em;
        font-size:1em;
    }
    
    #s3-sun {
        width: 130%;
        top: -45%;
        right: -30%;
        z-index: 12;
    }

    #s3-title {
        font-size: 2.7em;
        line-height: 1.1em;
    }

    #s3-content {
        width: 80%;
        bottom: 35%;
        right: 10%;
        z-index: 99;
    }

    #s3-sunray {
        width:55%;
        height:30%;
        z-index: 11;
        left:30%;
        top:1%;
    }

    #s3-arrows {
        bottom: 55%;
        left: 8%;
        width: 38%;
        z-index: 20;
    }
    
    #s3-footnote {
        width:98%;
        font-size:0.8em;
        color:#333;
        bottom:20%;
        left:9%;
        line-height:1.3em;
    }

    
/*======== Section 4 =============== */

    #s4-content {
        width: 80%;
        top: 7%;
    }
    
    #s4-title {
        font-size: 1.8em !important;
        margin-bottom: 3%;
        text-align: left;
        line-height: 1.1em;
    }
    
    #s4-desc {
        line-height:1.3em;
    }

    #s4-person {
            width: 80%;
        top: 30%;
        left: 10%;
        height: 20%;
    }
    
    #s4-persondesc {
        font-size:0.9em;
    }

    #s4-dash {
        display:none;
    }

    #s4-product {
        width: 47%;
        left: -50%;
        top:66%;
        height:20%;
    }

    #s4-personname {
        font-size: 1.3em;
    }
    
    #s4-switch {
        display:none;
    }
    
    
/*======== section 5 =============== */

    #s5-content {
        width: 80%;
        left:10%;
        position:absolute;
        top: 53%;
    }

    #s5-title {
        font-size: 2.7em;
        line-height: 1.1em;
    }

    #s5-clariti {
        width: 44%;
        position: absolute;
            top: 10%;
        left: 26%;
    }

    #s5-trad {
        width: 44%;
        position: absolute;
        top: 6%;
        right: 5%;
    }

    #s5-trad-img {
        margin-top: 51%;
    }

    #s5-clariti-txt {
        color: #55b7b3;
        font-size: 1em;
        bottom:-50%;
    }

    #s5-clariti-txt img {
        display: inline;
        width: 70%;
    }

    #s5-clariti-img {
        margin-top: 51%;
        width:95%;
    }

    #s5-trad-txt {
        font-size: 1em;
        position: absolute;
        bottom: -40%;

    }

    #s5-clariti .s5-coins {
        height:63%;
    }
    

    
    
    
/*======== section 6 =============== */
   
/*======== section 6 =============== */

.slide {position:relative;}

.s6-img {
   width:70%;
    position: absolute;
    top:5%;
    left:15%;

}

.s6-content{
    width:92%;
    position: absolute;
    top:25%;
    right:3%;
    text-align: left;
    
}

.s6-content img {
    width:30% !important;
}

.s6-title {
    color:#333;
    font-size: 1em;
}

.s6-content table {
    width:93%;
    margin:1% 0 3% 0;
    border-spacing: 0;
    border-collapse: collapse;
}

.s6-content table th {
    background: #59b7b1;
    color:#fff;
}

.s6-content table td, .s6-content table th {
    padding:5px;
    border:1px solid #ccc;
    font-size:0.7em;
    line-height:1.5em;
}

.s6-content table td {
    background:#f9f9f9;
    color:#333;
}
    
    .s6-spheretitle, .s6-torictitle {
        font-size:1.8em;
        line-height:2.2em;
    }

.s6-locate {
    width:50%;
    margin-top:5%;
    padding:2% 0;
    border:2px solid #59b7b1;
    border-radius: 10px;
    
    cursor: pointer;
    text-align: center;
    font-size:1.7em;
    color:#59b7b1;
    overflow: hidden;
    margin-left:10%;
    position:absolute;
    top:0;
    right:7%;
}

.s6-content .s6-locate img {
    width:80%;
}
    .s6-switch {
        display:none;
    }
    
    
.fp-controlArrow.fp-prev {
    left:2%;
    top:15%;
}

.fp-controlArrow.fp-next {
    right:2%;
    top:15%;
}
    
    /*===== push menu ======= */
    
    #s6-footnote {display:none;}
.featherlight .featherlight-content {width:90%;}


    
    
}

@media (max-width:640px){
    #s4-desc {font-size:1.1em;}
    #s4-person img {width:50%;}
    #s4-personname {margin-top:52%;}
    #s6-content img {width:60%;}
    #s6-content h2 {margin-top:-10%;}
    #s6-content p {line-height:1.1em;}
}

