/*iPhone*/

@media only screen and (max-device-width: 480px) {
    /*HOME*/
    
    .header {
        padding: 0px 60px;
    }
    .box {
        padding: 0 60px;
    }
    h4 {
        font-size: 14px;
    }
    p {
        font-size: 12px;
    }
    figure.frame-img-home figcaption.unique p {
        font-size: 12px;
    }
    div.season-box figure.season-store {
        height: 50%;
    }
    .footer-menu {
        height: 240px;
        padding: 15px 60px 0px;
    }
    div.f-menu {
        width: 29%;
    }
    #newsletter input {
        width: 120px;
    }
    #newsletter button.btn-custom-sm {
        margin: 1 0 0 10px;
    }
    blockquote.footer-quote {
        font-size: 12px
    }
    /*DESIGN*/
    
    .images-item {
        margin-bottom: 3%;
    }
    div.images-item figure.z-out-flash {
        height: 50%;
    }
    .images-item p {
        padding: 5px;
    }
    /*AWARE*/
    
    .upper-title {
        font-size: 12px;
    }
    figure.forest > img#trees {
        width: 23%;
    }
    figure.forest img {
        height: 60%;
    }
    figure.social img {
        height: 51%;
        width: 32.333%;
    }
    blockquote.db-quote {
        font-size: 16px;
    }
    .readless,
    .readmore,
    article,
    .hidden-parag {
        font-size: 12px;
    }
    .grid-box {
        max-height: 150px;
    }
    figure #caption {
        top: 70px;
    }
    div.special-row {
        padding-left: 45px;
    }
    .img-mtrl {
        height: 351px;
    }
    /*ABOUT*/
    
    #one {
        width: 20%;
        height: 400px;
    }
    #two {
        width: 50%;
        height: 400px;
    }
    blockquote.double-quote {
        font-size: 18px;
    }
    figure.aaa img {
        height: 200px;
    }
    figure.etique img {
        height: 50%;
    }
    /*Inspiring*/
    
    div#vid-carousel-wrapper .caroufredsel_wrapper {
        height: 500px!important;
    }
    a#prev-vid {
        height: 75px;
        top: 20%;
    }
    a#next-vid {
        height: 75px;
        top: 20%;
    }
    /*Locator*/
    
    .images-item figure.z-out {
        height: 176px;
    }
    .images-item img.img-responsive {
        height: 130px;
    }
    .locator-form {
        font-size: 12px;
    }
    .ads-icon {
        margin: 0 20px 0 0;
    }
}
/*iPad*/

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
    /*Home Page*/
    
    .header {
        padding: 0px 60px;
    }
    ul.nav-menu > li a {
        font-size: 1em;
    }
    .box {
        padding: 0 60px;
    }
    .carousel-caption {
        bottom: -470px;
    }
    .carousel-inner {
        height: 500px;
    }
    .left .flipper {
        height: 490px;
    }
    .right .flipper {
        height: 490px;
    }
    figure.frame-img-home figcaption.unique p {
        font-size: 14px;
    }
    figure.frame-img-home p,
    figure.frame-img-home2 p {
        font-size: 1em;
    }
    h4 {
        font-size: 16px;
    }
    p {
        font-size: 12px;
    }
    div.season-box figure.season-store {
        height: 50%;
    }
    .footer-menu {
        height: 260px;
        padding: 15px 60px 0px;
    }
    div.f-menu {
        width: 29%;
    }
    #newsletter input {
        width: 150px;
    }
    #newsletter button.btn-custom-sm {
        margin: 1 0 0 10px;
    }
    blockquote.footer-quote {
        font-size: 12px
    }
    /*DESIGN*/
    
    div.images-item {
        margin-bottom: 3%;
    }
    div.images-item figure.z-out-flash {
        height: 170px;
    }
    .images-item p {
        padding: 5px;
    }
    /*AWARE*/
    
    .upper-title {
        font-size: 12px;
    }
    figure.forest > img#trees {
        width: 23%;
    }
    figure.forest img {
        height: 60%;
    }
    figure.social img {
        height: 51%;
        width: 32.333%;
    }
    blockquote.db-quote {
        font-size: 16px;
    }
    .readless,
    .readmore,
    article,
    .hidden-parag {
        font-size: 12px;
    }
    .grid-box {
        max-height: 150px;
    }
    figure #caption {
        top: 70px;
    }
    div.special-row {
        padding-left: 45px;
    }
    .img-mtrl {
        height: 351px;
    }
    /*ABOUT*/
    
    #one {
        width: 20%;
        height: 400px;
    }
    #two {
        width: 50%;
        height: 400px;
    }
    blockquote.double-quote {
        font-size: 18px;
    }
    figure.aaa img {
        height: 200px;
    }
    figure.etique img {
        height: 50%;
    }
    /*Inspiring*/
    
    div#vid-carousel-wrapper .caroufredsel_wrapper {
        height: 500px!important;
    }
    a#prev-vid {
        height: 75px;
        top: 20%;
    }
    a#next-vid {
        height: 75px;
        top: 20%;
    }
    /*Locator*/
    
    .images-item figure.z-out {
        height: 176px;
    }
    .images-item img.img-responsive {
        height: 130px;
    }
    div.images-item {
        margin-bottom: 6%;
    }
    .locator-form {
        font-size: 12px;
    }
    .ads-icon {
        margin: 0 20px 0 0;
    }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* For landscape layouts only */
    
    .header {
        padding: 0px 60px;
    }
    ul.nav-menu > li a {
        font-size: 1em;
    }
    .box {
        padding: 0 60px;
    }
    .carousel-caption {
        bottom: -470px;
    }
    .carousel-inner {
        height: 500px;
    }
    .left .flipper {
        height: 490px;
    }
    .right .flipper {
        height: 490px;
    }
    figure.frame-img-home figcaption.unique p {
        font-size: 14px;
    }
    figure.frame-img-home p,
    figure.frame-img-home2 p {
        font-size: 1em;
    }
    h4 {
        font-size: 16px;
    }
    p {
        font-size: 12px;
    }
    div.season-box figure.season-store {
        height: 50%;
    }
    .footer-menu {
        height: 260px;
        padding: 15px 60px 0px;
    }
    div.f-menu {
        width: 29%;
    }
    #newsletter input {
        width: 150px;
    }
    #newsletter button.btn-custom-sm {
        margin: 1 0 0 10px;
    }
    blockquote.footer-quote {
        font-size: 12px
    }
    /*DESIGN*/
    
    div.images-item {
        margin-bottom: 3%;
    }
    div.images-item figure.z-out-flash {
        height: 170px;
    }
    .images-item p {
        padding: 5px;
    }
    /*AWARE*/
    
    .upper-title {
        font-size: 12px;
    }
    figure.forest > img#trees {
        width: 23%;
    }
    figure.forest img {
        height: 60%;
    }
    figure.social img {
        height: 51%;
        width: 32.333%;
    }
    blockquote.db-quote {
        font-size: 16px;
    }
    .readless,
    .readmore,
    article,
    .hidden-parag {
        font-size: 12px;
    }
    .grid-box {
        max-height: 150px;
    }
    figure #caption {
        top: 70px;
    }
    div.special-row {
        padding-left: 45px;
    }
    .img-mtrl {
        height: 351px;
    }
    .frame-unborder {
        margin: 0 0 20px;
    }
    /*ABOUT*/
    
    #one {
        width: 20%;
        height: 400px;
    }
    #two {
        width: 50%;
        height: 400px;
    }
    blockquote.double-quote {
        font-size: 18px;
    }
    figure.aaa img {
        height: 200px;
    }
    figure.etique img {
        height: 50%;
    }
    /*Inspiring*/
    
    div#vid-carousel-wrapper .caroufredsel_wrapper {
        height: 500px!important;
    }
    a#prev-vid {
        height: 75px;
        top: 20%;
    }
    a#next-vid {
        height: 75px;
        top: 20%;
    }
    /*Locator*/
    
    .images-item figure.z-out {
        height: 176px;
    }
    .images-item img.img-responsive {
        height: 130px;
    }
    div.images-item {
        margin-bottom: 6%;
    }
    .locator-form {
        font-size: 12px;
    }
    .ads-icon {
        margin: 0 20px 0 0;
    }
}

@media (min-width: 1824px) {
    /*padding: 0 160px;*/
    /*### Collections ###*/
    
    .images-item figure.z-out-flash {
        height: 355px;
        max-height: 550px;
        width: 100%;
    }
    .images-item figure.z-out-flash figcaption {
        top: 25%!important;
    }
    figure.z-out-flash figcaption h4 {
        top: -25%;
        font-size: 24px!important;
    }
    .images-item figure.z-out-flash {
        height: 100%!important;
        max-height: 372px!important;
    }
    .images-item figure.z-out-flash img.imgs {
        display: block;
        height: auto;
        opacity: 1;
        width: 100%;
        position: relative;
    }
    .images-item p {
        font-size: 25px!important;
        width: 94.8%;
    }
    .bx-wrapper .bx-prev {
        background: url("../img/left-arrow.png");
        background-repeat: no-repeat;
        background-position: -8px center;
        background-size: 80% auto;
        background-color: transparent;
        left: -60px;
    }
    .bx-wrapper .bx-next {
        background: url("../img/right-arrow.png");
        background-repeat: no-repeat;
        background-position: 12px center;
        background-size: 80% auto;
        background-color: transparent;
        right: -60px;
    }
    .mdl {
        width: 1000px!important;
        height: 850px!important;
    }
    .modal-body {
        /*
        height: 400px!important;
        */
    }
    #carousel img.glare,
    #thumbs img.glare {
        height: 100%;
        margin-left: 130px;
        margin-top: 10px;
        width: auto;
    }
    /*### Home page ###*/
    /*efek map*/
    
    div#frame-world-map img.world-map {
        -webkit-transform: scale3d(0.76, 0.90, 1);
        transform: scale3d(0.76, 0.90, 1);
        -webkit-transform: scale3d(0.76, 0.90, 1);
    }
    .carousel-inner {
        height: 700px;
        width: 100%;
    }
    .left-slide,
    .right-slide {
        margin-top: 300px;
    }
    .carousel-inner > .item > img,
    .carousel-inner > .item > a > img {
        width: 100%;
        height: auto;
    }
    .carousel-caption {
        bottom: -480px;
        font-size: 4.5em;
        left: 8%;
        position: relative;
    }
    figure.frame-img-home figcaption.unique {
        top: 43%!important;
    }
    figure.frame-img-home p,
    figure.frame-img-home2 p {
        font-size: 29px!important;
    }
    figure.frame-img-home:hover img,
    figure.frame-img-home2:hover img {
        opacity: 0.4;
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
    }
    div.left {
        float: left;
        height: 700px;
    }
    div.right {
        float: right;
        height: 700px;
    }
    .leaf {
        height: 832px;
        background-size: 95% 95%;
    }
    .leaf-frame {
        min-height: 500px;
        padding-top: 315px;
        padding-left: 115px;
    }
    .hi-icon-wrap {
        margin: 20px 0;
        text-align: center;
    }
    .hi-icon {
        width: 85px!important;
        height: 85px!important;
    }
    .hi-icon:after {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    /*.a-tree-icon,.a-recycle-icon {
        margin-right: 30px;
    }*/
    
    .a-tree-icon:before {
        ;
        background: url("../img/d-Bodhi_awareness_icons.png");
        background-repeat: no-repeat!important;
        background-position: 4px 2px!important;
        background-size: 250px auto!important;
        background-color: rgba(0, 0, 0, 0)!important;
        height: 80px!important;
        width: 80px!important;
        margin: 0 0 22px!important;
    }
    .a-recycle-icon:before {
        background: url("../img/d-Bodhi_awareness_icons.png");
        background-repeat: no-repeat!important;
        background-position: -85px 2px!important;
        background-size: 250px auto!important;
        background-color: rgba(0, 0, 0, 0)!important;
        height: 80px!important;
        width: 80px!important;
        margin: 0 0 15px!important;
    }
    .a-respect-icon:before {
        background: url("../img/d-Bodhi_awareness_icons.png");
        background-repeat: no-repeat!important;
        background-position: -171px 2px!important;
        background-size: 250px auto!important;
        background-color: rgba(0, 0, 0, 0)!important;
        height: 80px!important;
        width: 80px!important;
        margin: 0 0 22px!important;
    }
    .hi-icon-effect-1 .hi-icon {
        /*background: rgba(0,0,0,0.08);*/
        
        transition: background 0.2s, color 0.2s;
    }
    .hi-icon-effect-1 .hi-icon:after {
        top: -7px;
        left: -7px;
        padding: 7px;
        box-shadow: 0 0 0 4px #eee;
        -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
        -webkit-transform: scale(.8);
        -moz-transition: -moz-transform 0.2s, opacity 0.2s;
        -moz-transform: scale(.8);
        -ms-transform: scale(.8);
        transition: transform 0.2s, opacity 0.2s;
        -webkit-transform: scale(.8);
        transform: scale(.8);
        opacity: 0;
    }
    /* Effect 1a */
    
    .hi-icon-effect-1a .hi-icon:hover {
        background: rgba(255, 255, 255, 1);
        color: #41ab6b;
    }
    .hi-icon-effect-1a .hi-icon:hover:after {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    .hi-icon-effect-1b .hi-icon:hover {
        background: rgba(0, 0, 0, 0.18);
        color: #b0c53a;
    }
    .hi-icon-effect-1b .hi-icon:after {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    .hi-icon-effect-1b .hi-icon:hover:after {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    .home-vid {
        position: relative;
        padding: 0;
    }
    .home-vid iframe {
        width: 100%;
        height: 600px;
    }
    div#frame-world-map img.world-map {
        height: auto;
        left: -35px;
        width: 100%;
    }
    .img-stores {
        height: 460px;
        position: relative;
        width: 100%;
    }
    /*inspiring-page*/
    
    iframe.video-carousel {
        width: 100%;
        height: 100%;
    }
    .vid-desc {
        height: 629px;
    }
    /*about-page*/
    
    figure.weare img {
        height: 100%;
    }
    #one {
        width: 20%;
    }
    #two {
        width: 45%;
    }
    figure.aaa img {
        max-height: 350px;
        max-width: 100%;
        width: 100%;
    }
    figure.etique img {
        height: 88%;
        min-height: 20px;
    }
    /*aware-page## material*/
    
    .grid-box {
        max-height: 350px;
    }
    .grid-box figure {
        height: auto;
        max-height: 350px!important;
    }
    div.grid-box .wood,
    div.grid-box .rubber,
    div.grid-box .paper,
    div.grid-box .plate,
    div.grid-box .denim,
    div.grid-box .iron {
        max-height: 350px!important;
        height: 350px!important;
    }
    .grid-box figure figcaption {
        height: auto!important;
        top: 45%!important;
    }
    #caption {
        top: 0!important;
        font-size: 25px!important;
        -webkit-transition: all 1s ease 0s;
    }
    div.grid-box:hover #caption {
        top: 45%;
        -webkit-transition: 0.5s;
    }
    /*store locator page*/
    
    div > ul.ddown-locator {
        min-width: 100%;
    }
    .images-item figure.z-out {
        height: 280px!important;
        width: 100%;
    }
    .images-item img.img-responsive {
        /*IMAGE SIZE MUSTBE 330X185*/
        
        height: 280px!important;
        width: 100%;
    }
    @media (min-width: 1920px) {
        /*menu*/
        
        ul.nav-menu {
            width: 1156px;
        }
        .menu {
            margin-top: 40px;
        }
        div.container-menu {
            max-width: 1200px;
            padding: 0;
        }
        ul.nav-menu > li a {
            font-size: 20px
        }
        ul.dropdown-menu > li > a {
            font-size: 14px!important;
        }
        /*home - store*/
        
        .carousel-inner {
            width: 100%;
            height: 700px;
        }
        .season-box figure.season-store {
            position: relative;
            float: left;
            overflow: hidden;
            height: 85%;
            width: 100%;
            text-align: center;
            cursor: pointer;
            background: #000;
        }
        figure.season-store img.img-stores {
            height: auto;
            display: block;
            width: 100%;
            position: relative;
        }
        /*collection */
        
        figure.frame-img-home:hover img,
        figure.frame-img-home2:hover img {
            opacity: 0.4;
            transform: scale(1);
            -webkit-transform: scale(1);
        }
        figure.z-out-flash:hover img.imgs {
            opacity: 0.2;
        }
        /*aware page*/
        
        figure.forest img {
            height: 70%;
            margin-left: 1%;
            position: relative;
            float: right;
        }
        figure.forest > img#tree {
            width: auto;
            margin-left: 40px;
        }
        figure.forest > img#tag {
            width: auto;
        }
        figure.forest > img#trees {
            width: auto;
        }
        figure.social img {
            float: right;
            height: auto;
            margin-left: 1%;
            position: relative;
            width: auto;
        }
        /*collection carousel*/
        
        div.jscarousal-vertical {
            width: 16%;
            height: 700px;
            background-color: transparent;
            border: solid 0px #7A7677;
            margin: 0 0 0 0;
            padding: 0;
            position: relative;
            overflow: hidden;
        }
        div.jscarousal-contents-vertical {
            overflow: hidden;
            width: 276px;
            height: 700px
        }
        div.jscarousal-contents-vertical > div {
            width: 280px;
            height: 576px;
            margin-top: 23px;
        }
        div.jscarousal-contents-vertical > div > div {
            height: 168px;
            margin: 17px 17px 0;
            width: 252px;
        }
        div.jscarousal-contents-vertical img {
            height: auto!important;
            width: 100%;
        }
        div.jscarousal-vertical-back {
            right: 35%;
            top: -14%!important;
            width: 82px;
            height: 276px;
        }
        div.jscarousal-vertical-forward {
            right: 35%;
            bottom: -14%!important;
            width: 82px;
            height: 276px;
        }
        .jscarousal-vertical-back {
            background-position: 0 55%;
            background-repeat: no-repeat;
            background-size: 100% 30%;
        }
        .jscarousal-vertical-forward {
            background-position: 0 55%;
            background-repeat: no-repeat;
            background-size: 100% 30%;
        }
        /*about page*/
        
        article#etique {
            width: 46.6666%;
        }
        figure.aaa img {
            height: 340px !important;
        }
        figure.etique img {
            height: auto;
            width: auto;
        }
    }
}