@media (max-width: 768px) {
    .slide-wrapper{
        width: 100%;
    }
    #menu{
        top:0!important;
        left:0!important;
        width: auto;
        right: 0;
        height: 0;
        background: rgba(0,0,7,0.6);
        margin-top: 0;
        padding-top: 0;
        transition: all 0.5s;
    }
    #menu.visible{
        height: 7%;
    }
    #menu .arrow-top,
    #menu .decor-top,
    #menu .decor-bottom,
    #menu .line-top,
    #menu .socialmedia{
        display: none;
    }
    #menu .wrapper{
        width: 92px;
        height: 0;
        float: right;
        background: transparent url(../img/menu-ico.png) no-repeat scroll center center;
        transition: all 0s;
        border-left: 1px solid rgba(255,255,255,0.12);
        cursor: pointer;
        transition: all 0.5s;
    }
    #menu.visible .wrapper{
        height: 100%;
    }

    #menu .wrapper ul{
        /*display: none;*/
        /*display: block;*/
        position: fixed;
        height: auto;
        max-height: 0;
        margin-top: 1px;
        /*        opacity:0;
                filter:alpha(opacity=0);*/
        top: 7%;
        left: 0;
        width: 100%;
        right: 0;
        padding: 0;
        transition: all 0s;
    }
    #menu .wrapper.opened ul{
        max-height: 805px;
        transition: all 0.5s;
        /*        opacity:1;
                filter:alpha(opacity=100);*/
    }
    #menu .wrapper.opened ul a{
        display: block;
    }
    #menu .wrapper.opened ul li{
        background: rgba(0,0,7,0.8);
        font-size: 22px;
        font-weight: bold;
        height: 7%;
        line-height: 68px;
        margin-bottom: 1px;
        white-space: nowrap;
        padding: 0;
    }
    #menu .scrollDown{
        width: 92px;
        height: 0;
        float: left;
        background: transparent url(../img/arrow-down-menu.png) no-repeat scroll center center;
        transition: all 0s;
        display: block;
        cursor: pointer;
        border-right: 1px solid rgba(255,255,255,0.12);
        transition: all 0.5s;
    }
    #menu.visible .scrollDown{
        height: 100%;
    }
    #menu .scrollDown.scrollTop{
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }

    #bottle{
        background: transparent url(../img/bottle-tablet.png) no-repeat scroll 0 0;
        left: 55px!important;
        bottom: -100%!important;
        width: 460px;
        height: 877px;
        transition: bottom 1.0s ease, opacity 1s;
        max-height: 80%;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
    #bottle.position-1{
        bottom: -100%;
        /*        bottom: -460px;
                left: 36%;
                transition: all 1s, left 0s;*/
        opacity:0;
        filter:alpha(opacity=0);
    }
    #bottle.position-2{
        bottom: 20px!important;
        left: 55px!important;
        opacity:1;
        filter:alpha(opacity=100);
        /*transition: all 1s, left 0s;*/
    }
    #bottle.position-3{
        bottom: 20px!important;
        left: 55px!important;
        z-index: 23;
    }
    #bottle.position-4,
    #bottle.position-5{
        bottom: 20px!important;
        left: 55px!important;
    }
    #bottle.position-6{
        bottom: 20px!important;
        left: 0px!important;
        -webkit-transition: all 0s 1s, -webkit-transform 0s 1s;
        transition: all 0s 1s, transform 0s 1s;
    }
    #bottle.position-7{
        bottom: 20px!important;
        left: 0px!important;
        transition: all 1s, -webkit-transform 0s;
        z-index: 19;
    }
    #can{
        background: transparent url(../img/can-t.png) no-repeat scroll 0 0;
        width: 194px;
        height: 471px;
        bottom: 65px;
        left: 105px;
        opacity:0;
        filter:alpha(opacity=0);
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
        transition: all 0.7s 0.7s;
        max-height: 45%;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
    #can.position-4{
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
        opacity:0;
        filter:alpha(opacity=0);
        z-index: -1;
    }
    #can.position-6{
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
        transition: all 0.7s;
        opacity:0;
        filter:alpha(opacity=0);
        -webkit-transition: opacity 1s, -webkit-transform 0s 1s;
        transition: opacity 1s, transform 0s 1s;
        z-index: 18;
    }
    #can.position-7{
        -webkit-transform: translate(45px,0);
        transform: translate(450px,0);
        opacity:1;
        filter:alpha(opacity=100);
        z-index: 18;
    }
    #hop,
    #grain,
    #corn,
    #glass-small{
        display: none;
    }
    #bubbles-bg{
        background-image: url('../img/bg-slide-6-t.jpg');
    }
    #bubbles-bg #bubbles-video{
        display: none;
    }
    #bubbles-bg #glass-big{
        background: transparent url(../img/glass-big-t.png) no-repeat scroll 0 0;
        width: 584px;
        height: 1114px;
    }
    #wide-bg{
        background-image: url('../img/bg-slide-4-t.jpg');
    }
    #wide-bg img{
        display: none;
    }
    #contact-bg{
        background-image: url('../img/bg-slide-7-t.jpg');
    }
    .slide-wrapper .title{
        font-size: 36px;
    }
    .slide-wrapper .para-lead{
        font-size: 22px;
    }
    .slide-wrapper .para-normal{
        font-size: 16px;
    }
    .slide.first{
        background-image: url('../img/bg-slide-1-t.jpg');
    }
    .slide.second{
        background-image: url('../img/bg-slide-2-t.jpg');
    }
    .slide.third{
        background-image: url('../img/bg-slide-3-t.jpg');
    }
    /*    .slide.fourth{
            background-image: url('../img/bg-slide-4-t.jpg');
        }
        .slide.fifth{
            background-image: url('../img/bg-slide-4-t.jpg');
        }*/
    /*    .slide.sixth{
            background-image: url('../img/bg-slide-6-t.jpg');
        }*/
    /*    .slide.seventh{
            background-image: url('../img/bg-slide-7-t.jpg');
        }*/


    .slide.first .bottle{
        background: transparent url(../img/bottle-tablet.png) no-repeat scroll 0 0;
        width: 225px;
        height: 415px;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -112px;
        display: block;
        max-height: 40%;
        /*        -webkit-background-size: contain;
                -moz-background-size: contain;
                -o-background-size: contain;
                background-size: contain;*/
    }
    .slide.first .elem-1{
        position: absolute;
        top: 15%;
        left: 0;
        width: 100%;
    }
    .slide.first .elem-2{
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        margin-top: 5%;

    }
    .slide.first .scrollDown{
        position: absolute;
        bottom: 35px;
        left: 50%;
        margin-left: -75px;
        width: 151px;
        height: 49px;
        border: 2px solid #fff;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 7px;
    }
    slide.first .scrollDown:after{
        content: '';
        position: absolute;
        left: 50%;
        bottom: 8px;
        margin-left: -10px;
        background: transparent url('../img/scroll-down.png') no-repeat scroll center center;
        width: 20px;
        height: 10px;
        transition: all 0s ease;
    }
    .slide.first.active .scrollDown:after{
        bottom: 8px;
        transition: all 0s ease;
    }
    .slide.first .elem-1 img{
        width: auto;
    }
    .slide.second .elem-1{
        /*        position: absolute;
                top: 22%;
                left: 40%;
                width: 40%;*/
        width: 66%;
        left: 33%;
    }
    .slide.second .elem-2{
        /*        position: absolute;
                top: 40%;
                left: 40%;
                width: 40%;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                padding: 0 2%;*/
    }
    .slide.second .elem-3{
        /*        position: absolute;
                top: 55%;
                left: 38%;
                width: 45%;*/
    }
    .slide.third .elem-1{
        /*        position: absolute;
                top: 22%;
                left: 40%;
                width: 48%;*/
        width: 66%;
        left: 33%;
    }
    .slide.third .elem-2{
        /*        position: absolute;
                top: 41%;
                left: 41%;
                width: 46%;*/
    }
    .slide.third .elem-3{
        /*        position: absolute;
                top: 62%;
                left: 40%;
                width: 47%;*/
    }
    .slide.fourth .elem-1{
        /*        position: absolute;
                top: 22%;
                left: 40%;
                width: 46%;*/
        width: 56%;
        left: 40%;
    }
    .slide.fourth .elem-2{
        /*        position: absolute;
                top: 35.5%;
                left: 40%;
                width: 46%;*/
    }
    .slide.fourth .elem-3{
        /*        position: absolute;
                top: 55%;
                left: 40%;
                width: 46%;*/
    }
    .slide.fifth .elem-1{
        /*        position: absolute;
                top: 16%;
                left: 39%;
                width: 47%;*/
        width: 66%;
        left: 33%;
    }
    .slide.fifth .elem-2{
        /*        position: absolute;
                top: 32%;
                left: 38%;
                width: 49%;
                padding: 0;*/
    }
    .slide.fifth .elem-3{
        /*        position: absolute;
                top: 61%;
                left: 40%;
                width: 46%;
                padding: 0;*/
    }
    .slide.fifth .elem-4{
        /*        position: absolute;
                top: 77%;
                left: 43%;
                width: 39%;*/
    }
    .slide.sixth .elem-1{
        /*        position: absolute;
                top: 15%;
                left: 45%;
                width: 40%;*/
        width: 66%;
        left: 33%;
    }
    .slide.sixth .faq-wrapper{
        top: 28%;
        left: 40%;
        height: 50%;
        padding-left: 0;
        width: 50%;
    }
    .slide.sixth .counter-wrapper {
        position: absolute;
        top: 82%;
        left: 50%;
        width: 241px;
        margin: 0;
    }
    .slide.sixth .counter-wrapper #counter {
        width: 80px;
        float: left;
    }
    .slide.sixth .counter-wrapper #question-prev,
    .slide.sixth .counter-wrapper #question-next {
        width: 80px;
        float: left;
    }
    .slide.sixth .counter-wrapper #question-prev {
        background: transparent url(../img/arrow-left.png) no-repeat scroll center center;
    }
    .slide.sixth .counter-wrapper #question-next {
        background: transparent url(../img/arrow-right.png) no-repeat scroll center center;
    }
    .slide.seventh .elem-1{
        /*        position: absolute;
                top: 16%;
                left: 47%;
                width: 40%;*/
        width: 66%;
        left: 33%;
    }
    .slide.seventh .elem-2{
        /*        position: absolute;
                top: 28.5%;
                left: 50%;
                width: 35%;
                padding: 0;*/
    }

    .slide.seventh .scrollUp{
        /*        top: 76%;
                left: 63%;*/
    }
    .slide.seventh .mustache.mustache-1,
    .slide.seventh .mustache.mustache-2,
    .slide.seventh .mustache.mustache-3,
    .slide.seventh .mustache.mustache-4,
    .slide.seventh .mustache.mustache-5,
    .slide.seventh .mustache.mustache-12,
    .slide.seventh .mustache.mustache-13,
    .slide.seventh .mustache.mustache-14,
    .slide.seventh .mustache.mustache-18,
    .slide.seventh .mustache.mustache-20{
        display: none;
    }
    .slide .move{
        /*transition: all 0s 1s;*/
        -webkit-transition: -webkit-transform 0s;
        transition: transform 0s;
    }
    .slide .move-100{
        -webkit-transform: translate(0, 0px);
        transform: translate(0, 0px);
    }
    .slide .move-200{
        -webkit-transform: translate(0, 0px);
        transform: translate(0, 0px);
    }
    .slide .move-300{
        -webkit-transform: translate(0, 0px);
        transform: translate(0, 0px);
    }
    .slide .move-400{
        -webkit-transform: translate(0, 0px);
        transform: translate(0, 0px);
    }
    .slide .move-500{
        -webkit-transform: translate(0, 0px);
        transform: translate(0, 0px);
    }
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    .slide-wrapper .title{
        font-size: 32px;
    }
    .slide-wrapper .para-lead{
        font-size: 16px;
    }
    .slide-wrapper .para-normal{
        font-size: 14px;
        font-weight: normal;
    }
    .slide.seventh .scrollUp{
        top: 75%;
        left: 21%;
    }
    /*    .slide-wrapper .para-color{
            font-size: 14px;
        }*/
    #bubbles-bg{
        background-image: url('../img/bg-slide-6-t.jpg');
        background-repeat: no-repeat;
        background-position: center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

}