/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  ============ RESPONSIVE FOR DEVICES =======================
//////////////////////////////////////////////////////////////////////////////////////////////////////////// */


/* =====================================
     > 1920 /////////////////////////////////////////////////////////// */
@media screen and (min-width: 1920px) {
    .layout {
    }
}


/* =====================================
     < 1920 /////////////////////////////////////////////////////////// */
@media screen and (max-width: 1919px) {
    .layout {
    }
}


/* =====================================
     < 1600 /////////////////////////////////////////////////////////// */
@media screen and (max-width: 1599px) {
    .layout {
    }
}


/* =====================================
     < 1440 /////////////////////////////////////////////////////////// */
@media screen and (max-width: 1339px) {
    .layout {
    }
}


/* =====================================
     < 1366 /////////////////////////////////////////////////////////// */
@media screen and (max-width: 1365px) {
    .layout {
    }
}


/* =====================================
     < 1280 /////////////////////////////////////////////////////////// */
@media screen and (max-width: 1279px) {
    .layout {
    }
}


/* =====================================
     < 1200 /////////////////////////////////////////////////////////// */
@media screen and (max-width: 1199px) {
    .layout {
    }
}


/* =====================================
     < 1152 /////////////////////////////////////////////////////////// */
@media screen and (max-width: 1151px) {
    .layout {
    }
}


/* =====================================
     < 1080 /////////////////////////////////////////////////////////// */
@media screen and (max-width: 1079px) {
    .layout {
    }
}


/* =====================================
     < 1024 /////////////////////////////////////////////////////////// */
@media screen and (max-width: 1023px) {
    .layout {
    }
}


/* =====================================
     < 960 /////////////////////////////////////////////////////////// */
@media screen and (max-width: 959px) {
    .layout {
    }
}


/* =====================================
     < 900 /////////////////////////////////////////////////////////// */
@media screen and (max-width: 899px) {
    .layout {
    }
}


/* =====================================
     < 854 /////////////////////////////////////////////////////////// */
@media screen and (max-width: 853px) {
    .layout {
    }
}


/* =====================================
     < 800 /////////////////////////////////////////////////////////// */
@media screen and (max-width: 799px) {
    .layout {
    }
}


/* =====================================
     < 768 /////////////////////////////////////////////////////////// */
@media screen and (max-width: 767px) {
    .layout {
    }
}


/* =====================================
     < 720 /////////////////////////////////////////////////////////// */
@media screen and (max-width: 719px) {
    .layout {
    }
}


/* =====================================
     < 640 /////////////////////////////////////////////////////////// */
@media screen and (max-width: 639px) {
    .layout {
    }
}


/* =====================================
     < 576 /////////////////////////////////////////////////////////// */
@media screen and (max-width: 575px) {
    .layout {
    }

    .menu-main-area {
        background: #D3E4F6;
    }

    ul.menu-main {
        display: block;
    }

    ul.menu-main > li {
        display: block;
        padding-right: 0;
    }

    ul.menu-main > li #mainNav > li {
        padding: 5px 0;
        text-align: left;
    }

    ul.menu-main > li:hover #mainNav > li  {
        background: #FFF;
    }

    ul.menu-main > li #mainNav > li > a {
        padding: 0 15px;
    }

    ul.menu-main > li #mainNav > li > ul {
        position: relative;
    }

}


/* =====================================
     < 480 /////////////////////////////////////////////////////////// */
@media screen and (max-width: 479px) {
    .layout {
    }
}


/* =====================================
     < 360 /////////////////////////////////////////////////////////// */
@media screen and (max-width: 359px) {
    .layout {
    }
}