/*
|----------------------------------------------------------------------
|       Media Queries
|----------------------------------------------------------------------
*/

@media screen and (min-width:1200px) {}

@media screen and (min-width:992px) and (max-width:1200px) {
    /*_____ Home _____*/
    #banner .content:before {
        /* left: -130px; */
    }
}

@media screen and (min-width:768px) and (max-width:991px) {}

@media screen and (max-width:991px) {
    /*_____ Navigation _____*/
    .logo {
        /*margin-left: 40px;*/
    }
    #lang {
        display: none;
    }
    .toggle {
        display: block;
    }
    nav {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        background: #000;
        margin: 0 !important;
        flex-flow: wrap;
        border-top: 1px solid #464646;
        opacity: 0;
        visibility: hidden;
        overflow: auto;
    }
    nav.active {
        opacity: 1;
        visibility: visible;
    }
    nav > ul {
        width: 100%;
        flex-flow: column;
    }
    nav > ul > li {
        border-top: 1px solid #464646;
    }
    nav > ul > li.btnLi {
        display: none;
    }
    nav > ul > li.lang {
        display: block;
    }
    nav > ul > li > a {
        height: 50px;
        display: block;
        padding-top: 16px;
    }
    nav > ul > li.lang > a span {
        justify-content: center;
    }
    /*_____ All Site _____*/
    #banner .ouTer {
        flex-flow: wrap-reverse;
        justify-content: center;
        padding-bottom: 0;
        border-bottom: 0;
    }
    #banner .kidImg {
        margin: 0 0 30px;
    }
    #launch .content {
        text-align: left;
    }
    #launch .content .secHeading:before {
        margin: 0;
    }
    #offer:before {
        display: none;
    }
    #offer .contain {
        flex-flow: column;
    }
    #offer .watch {
        margin: auto;
    }
    #offer .offer {
        width: auto;
        min-width: 100%;
        padding-right: 70px;
        justify-content: center;
        margin: 0 -15px;
    }
    #offer .offer .lst {
        flex-flow: column;
    }
    #offer .offer .lst > li.auto {
        padding: 10px 0 20px;
    }
    #strip .outer {
        flex-flow: column;
    }
    #strip .content {
        margin: 0 0 20px;
    }
    #strip .bTn {
        width: 100%;
        max-width: 380px;
        margin: auto;
    }
    #about .flexRow > .col1 {
        max-width: 300px;
    }
    #about .flexRow > .col {
        width: 100%;
        padding-left: 15px;
    }
    #app #appes .flexRow > .col {
        width: 100%;
    }
    #app #appes .flexRow > .col2 {
        order: -1;
    }
    #app #appes .flexRow > .col2:before {
        display: none;
    }
    #app #appes .flexRow > .col2 .image {
        float: none;
    }
}

@media screen and (max-width:767px) {
    /*_____ All Site _____*/
    h1 {
        font-size: 24px;
    }
    h2 {
        font-size: 20px;
    }
    h3 {
        font-size: 18px;
    }
    h4 {
        font-size: 15px;
    }
    .secHeading {
        /* font-size: 30px; */
    }
    p.pre {
        font-size: 16px;
    }
    /*_____ Home _____*/
    .popup[data-popup="langauge"] ._inner {
        padding: 25px;
    }
    .popup[data-popup="order"] .flexGrp label {
        min-width: initial;
    }
    .popup[data-popup="order"] ._inner .confirmBlk .bTn {
        margin-top: 30px;
    }
    .copyright {
        flex-flow: column-reverse;
        text-align: center;
    }
}

@media screen and (max-width:580px) {
    /*_____ col-xx-? _____*/
    .col-xx-12 {
        width: 100%;
    }
    .col-xx-11 {
        width: 91.66666667%;
    }
    .col-xx-10 {
        width: 83.33333333%;
    }
    .col-xx-9 {
        width: 75%;
    }
    .col-xx-8 {
        width: 66.66666667%;
    }
    .col-xx-7 {
        width: 58.33333333%;
    }
    .col-xx-6 {
        width: 50%;
    }
    .col-xx-5 {
        width: 41.66666667%;
    }
    .col-xx-4 {
        width: 33.33333333%;
    }
    .col-xx-3 {
        width: 25%;
    }
    .col-xx-2 {
        width: 16.66666667%;
    }
    .col-xx-1 {
        width: 8.33333333%;
    }
    .secHeading {
        /* font-size: 28px; */
    }
    /*_____ Common _____*/
    .common {
        background-size: auto;
        background-position: top 70px left -80px;
        padding-top: 50px;
    }
    #feature .flexRow > .col1 {
        display: none;
    }
    #feature .flexRow > .col2 {
        width: 100%;
        padding-left: 15px;
    }
    #manual .outer > .col2 {
        display: none;
    }
    #manual .content .txtGrp .webBtn {
        display: flex;
        width: 100%;
    }
    #manual .content .txtGrp .webBtn em {
        flex: 1;
        text-align: left;
    }
    #manual .content .txtGrp .webBtn i {
        top: 0;
        align-self: center;
    }
    #watch #standard .blockLst {
        flex-flow: wrap;
    }
    #offer .offer .priceBlk {
        flex-flow: wrap;
        text-align: center;
    }
    #offer .offer .priceBlk > span {
        flex: initial;
        width: 100%;
        font-size: 12px;
        padding: 20px 0;
    }
    /*_____ Common _____*/
    .ckEditor figure,
    .ckEditor p > img {
        width: 220px !important;
    }
    .popup .list > li {
        flex-flow: column;
    }
    .popup .list > li > div:nth-child(1) {
        width: 100%;
        min-width: 100px;
        margin: 0 0 3px;
    }
    .copyright {
        padding: 25px 0;
    }
    .copyright .conect > li:nth-last-child(1) {
        display: block;
        /* margin-top: 10px; */
        /* padding-top: 10px; */
        /* border-top: 1px solid #7b7b7b; */
    }
}

@media screen and (max-width:480px) {
    /*_____ col-xx-? _____*/
    .col-xx-12,
    .col-xx-11,
    .col-xx-10,
    .col-xx-9,
    .col-xx-8,
    .col-xx-7,
    .col-xx-6,
    .col-xx-5,
    .col-xx-4,
    .col-xx-3,
    .col-xx-2,
    .col-xx-1 {
        width: 100% !important;
    }
    .secHeading {
        /* font-size: 26px; */
    }
    /*_____ Home _____*/
    #offer .offer {
        padding: 100px 40px 40px;
    }
    #offer .offer .monogram {
        top: 5px;
        left: -20px;
        padding: 4px 150px 4px 50px;
    }
    #app .topBlk .icon {
        width: 50px;
        min-width: 50px;
        margin-right: 10px;
    }
    #app #appes .flexRow > .col2 .image {
        margin: auto;
    }
    .popup[data-popup="langauge"] .langLst {
        flex-flow: wrap;
    }
    .popup[data-popup="langauge"] .langLst .inBlk {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 15px;
    }
    .popup[data-popup="langauge"] .langLst > li .ico {
        width: 24px;
        min-width: 24px;
        height: 24px;
        margin: 0;
        margin-right: 20px;
    }
    .popup[data-popup="langauge"] .langLst > li .miniLbl {
        position: initial;
        margin-left: 10px;
    }
    /*_____ Common _____*/
    .ckEditor figure,
    .ckEditor p > img {
        float: none !important;
    }
}

@media screen and (max-width:380px) {
    /*_____ All Site _____*/
    .secHeading {
        /* font-size: 26px; */
    }
    p.pre {
        font-size: 15px;
    }
    /*_____ Home _____*/
}

/*
|----------------------------------------------------------------------
|       Media Queries Height
|----------------------------------------------------------------------
*/

@media screen and (max-height:420px) {
    #banner .image {
        /* padding-bottom: 50%; */
    }
}

@media screen and (min-height:768px) {
    body > main {
        display: block;
    }
}

@media screen and (max-height:768px) {
    body > main {
        /* display: flex; */
        /* flex-direction: column; */
        /* justify-content: center; */
    }
}

@media screen and (min-height:1040px) {
    #banner:before {
        /* top: 15%; */
        /* margin: -10px auto 0; */
    }
    #banner .image {
        /* top: 15%; */
        /* bottom: 15%; */
    }
}