@-ms-viewport  { width: device-width; }

@media (min-width: 1600px), (min-height: 900px) {
    body { font-size: 16px; }
}

@media (min-width: 1750px), (min-height: 900px) {
    body { font-size: 17px; }
}

@media (max-width: 1300px) and (min-width: 768px), (max-height: 700px) and (min-width: 768px) {

}

@media (max-width: 1200px) and (min-width: 768px), (max-height: 650px) and (min-width: 768px) {
    body {
        font-size: 14px;
    }

    /*.site-header {*/
        /*transform: scale(0.9);*/
        /*-ms-transform: scale(0.9);*/
        /*-webkit-transform: scale(0.9);*/
        /*-o-transition: scale(0.9);*/
        /*left: -2.2%;*/
        /*right: -2.2%;*/
    /*}*/

    /* Home */
    .flubber { left: 7%; }
    .flubber .flubber-quote { width: 120px; }
    .main-logo {
        transform: scale(0.9);
        -ms-transform: scale(0.9);
        -webkit-transform: scale(0.9);
        -o-transition: scale(0.9);
    }
    /*.main-quote { font-size: 13px; }*/
    /* End Home */

    /* Who */
    /*#who-text h1 {*/
        /*font-size: 74px;*/
        /*line-height: 64px;*/
        /*margin: 80px 0 40px;*/
    /*}*/
    /*#who-text {*/
        /*font-size: 15px;*/
        /*line-height: 28px;*/
    /*}*/
    /* End Who */

    /* The List */
    .awards-list li,
    .brands-list li { margin-bottom: 10px; }
    /* End The List */

    /* The Poke */
    #form-contact input.text { height: 51px; }
    #form-contact textarea { height: 150px; }
    /* End The Poke */
}

@media (max-width: 1050px) and (min-width: 768px), (max-height: 550px) and (min-width: 768px) {
    body {
        font-size: 12px;
    }

    /* Home */
    .flubber { left: 4%; }
    .flubber .flubber-quote { width: 100px; }
    .main-logo {
        transform: scale(0.8);
        -ms-transform: scale(0.8);
        -webkit-transform: scale(0.8);
        -o-transition: scale(0.8);
    }
    .main-quote { font-size: 12px; }
    /* End Home */

    /* Who */
    /*#who-text h1 {*/
        /*font-size: 64px;*/
        /*line-height: 54px;*/
        /*margin: 70px 0 30px;*/
    /*}*/
    /*#who-text {*/
        /*font-size: 14px;*/
        /*line-height: 26px;*/
    /*}*/
    /* End Who */

    /* The Poke */
    #form-contact input.text { height: 41px; }
    #form-contact textarea { height: 130px; }
    /* End The Poke */
}

@media (max-width: 900px) and (min-width: 768px), (max-height: 450px) and (min-width: 768px) {
    body {
        font-size: 11px;
    }

    /* Home */
    .flubber { display: none; }
    .main-quote { display: none; }
    /* End Home */

    /* Who */
    #who-text h1 {

    }
    /* End Who */

    /* The Poke */
    #form-contact textarea { height: 110px; }
    /* End The Poke */
}

@media (max-width: 800px) and (min-width: 768px) {

}

@media (max-width: 767px) {
    body.index {
        overflow-y: visible;
        overflow-x: hidden;
    }
    #site-holder { overflow: visible; }
    #flip { left: 0px !important; }

    #mobile-nav,
    #flip,
    .site-header .nav-trigger,
    #page.case {
        -webkit-transition: all 200ms ease-in-out;
        -o-transition: all 200ms ease-in-out;
        -moz-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out;
    }
    .show-sidebar #mobile-nav,
    .show-sidebar #flip,
    .show-sidebar #page.case {
        transform: translateX(122px);
        -ms-transform: translateX(122px);
        -webkit-transform: translateX(122px);
        -o-transition: translateX(122px);
    }

    .site-header {
        position: relative;
        padding: 18px 15px 0px;
        left: 0;
        top: 0;
        right: 0;
    }
    .site-header .site-menu { display: none; }

    .site-header1 .nav-trigger:hover {
        background-color: #72C9B9;
        border-color: #72C9B9;
    }
    .site-header1.green .nav-trigger:hover {
        background-color: #fff;
        border-color: #fff;
    }

    .container .f-page,
    .container .f-page:nth-child(2),
    .container .f-page:nth-child(3),
    .container .f-page:nth-child(4),
    .container .f-page:nth-child(5) {
        left: 0px;
        height: 100%;
        position: relative;
    }

    .g-screen { min-height: 100%; }
    .site-content.full-height {
        background: #f8f8f8;
        padding-bottom: 1px;
        height: auto;
    }
    .green-bkg .site-content.full-height {
        background: #ffa800;      
    }

    .container .f-page { display: none; }
    .container .f-page.active.no-mob-loader { display: none; }
    .container .f-page.active,
    .container .f-page.mob-active { display: block; }
    .container .f-page.active.no-mob-loader.mob-active { display: block !important; }

    .content-frame {
        overflow: visible;
        position: static;
    }

    #content-loader { margin-top: -30px; }
    #content-loader .tips,
    #content-loader #bar2 { display: none; }

    /* The G */
    .flubber { display: none; }
    .main-logo { top: 22.3%; }
    .main-quote { display: none; }
    .g-screen.fixed-screen { overflow: hidden;  }
    /* End The G */

    /* The Who */
    #who-text {
        position: static;
        margin: 0px 15px 40px;
        padding-top: 40px;
        width: auto;
    }
    #who-text h1 {
        margin: 0px 0px 35px;
        font-size: 55px;
        white-space: nowrap;
    }
    #who-image {
        position: relative;
        left: auto;
        margin: 0px auto;
        width: 410px;
    }
    #who-image img { width: 100%; }
    /* End The Who */
ul.rig{padding:0px;}
    /* The What */
    #arrow { display: none; }
    #screen-the-what .content-frame { padding-top: 45px; }
    .content-frame #content-frame-mask { display: none; }
    .what-text h2 {
        font-size: 24px;
        line-height: 30px;
    }
    .what-row {
        margin: 0px 15px 50px;
        left: 0;
        width: auto;
    }
    .what-row:first-child { margin-top: 0px; }
    .what-image { display: none; }
    .what-image-mobile { display: block; }
    .what-text,
    .what-row.image-on-right .what-text {
        float: none;
        width: auto;
    }
    /* End The What */

    /* The List */
    #the-list-here {
        top: auto;
        position: relative;
        padding: 0px 15px 1px;
        left: auto;
        width: auto;
    }
    .content-the-list,
    .content-the-list .awards-list,
    .content-the-list .awards-list.second {
        float: none;
        width: auto;
    }
    .content-the-list {
        margin-bottom: 40px;
        padding-top: 50px;
    }
    #brands,
    #awards {
        font-size: 60px;
        line-height: 66px;
        margin-bottom: 20px;
    }
    /* End The List */

    /* The Poke */
    #form-contact {
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 45px;
        position: relative;
        top: auto;
        width: auto;
        left: auto;
    }
    #hello {
        font-size: 42px;
        line-height: 54px;
        margin-bottom: 40px;
    }
    #form-contact .formfield .col,#form-contact .formfield .col1,
    #form-contact .formfield .col.second {
        margin-bottom: 30px;
        float: none;
        width: auto;
        margin-right:0px;
    }
    #form-contact .formfield .col.second { margin-bottom: 0px; }
    #result {
        clear: both;
        display: block;
        padding-top: 20px;
        padding-bottom: 20px;
        float: none;
    }
    /* End The Poke */

    #phones-area .phones {
        margin-right: 3%;
        width: 48.5%;
    }
    #phones-area .phones:nth-child(2n) { margin-right: 0px; }
    #case {
        margin-top: 50px;
        margin-left: 15px;
        margin-right: 15px;
        width: auto;
    }

    #content-browser {
        margin-top: -150px;
        left: 10px;
        right: 10px;
        margin-left: 0px;
        width: auto;
    }
    #content-browser h1 {
        font-size: 130px;
        line-height: 130px;
        margin-bottom: 12px;
    }
    #content-browser button,
    #content-browser a.button {
        margin-top: 60px;
        width: 220px;
    }
}
@media (max-width: 499px) {
    .screenshot,
    #phones-area { margin-bottom: 30px; }
    #phones-area .phones,
    #phones-area .phones:nth-child(2n),
    #phones-area .phones:nth-child(4n) {
        float: none;
        margin: 0px auto 20px;
        max-width: 250px;
        width: auto;
    }
}