/**
*** Responsive
*   
*** @ 2017, Muzaffer Dede
*   
*** Lexionlu Design Firm
*   
*** Responsive Style 
*/
/*##Desktop##*/
@media (max-width: 1200px) {
    /*Header*/
    .header .bottom .navigation-wrapper {
        justify-content: space-between;
        flex-direction: row-reverse;
    }

        .header .bottom .navigation-wrapper .left {
            text-align: left;
            flex: 11 auto;
            margin-right: 4.188rem;
        }

        .header .bottom .navigation-wrapper .right {
            text-align: left;
            flex: 0 0 4rem;
        }

            .header .bottom .navigation-wrapper .right > button {
                display: inline-block;
            }

    /*Menu*/
    .main-menu {
        position: fixed;
        left: -18rem;
        top: 8.5rem;
        bottom: 0;
        background: #f0ede8;
        width: 18rem;
        overflow: auto;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
        max-width: 100%;
    }

        .main-menu.active {
            left: 0;
            box-shadow: 1rem 0 1rem -1rem #333;
        }

        .main-menu ul,
        .main-menu .menu-dropdown,
        .main-menu .sub-dropdown,
        .main-menu ul li,
        .main-menu ul li a {
            display: block !important;
            position: static !important;
            margin: 0 !important;
            padding: 0 !important;
            color: #fff !important;
            text-align: left !important;
            border: 0 !important;
            top: auto !important;
            bottom: auto !important;
            left: auto !important;
            box-sizing: border-box !important;
            line-height: normal !important;
            width: auto !important;
        }

            .main-menu ul li {
                position: relative !important;
                background: #89847c;
            }

                .main-menu ul li a {
                    padding: 1rem !important;
                    border-bottom: 1px solid #fff !important;
                    border-radius: 0 !important;
                    background: inherit !important;
                    display: -webkit-box !important;
                    display: -moz-box !important;
                    display: -ms-flexbox !important;
                    display: -webkit-flex !important;
                    position: relative !important;
                }

                    .main-menu ul li a button {
                        right: 0;
                        top: 0;
                        bottom: 0;
                        width: 2rem;
                        border: 0;
                        position: absolute;
                        z-index: 20;
                        display: block;
                        background: none;
                    }

        .main-menu > ul > li:last-child a {
            border-bottom: none !important;
        }

        .main-menu ul li > a:after {
            content: "\f054";
            font-family: FontAwesome;
            margin-right: 0.5rem;
            font-size: 1rem;
            position: absolute;
            top: 1.3rem;
            right: 0;
            display: block;
            border: 0;
        }

        .main-menu ul li.open > a:after {
            content: "\f078";
        }

        .main-menu .menu-dropdown a {
            padding-left: 2rem !important;
            background: #6f99bb !important;
        }

        .main-menu .menu-dropdown > ul > li > a:before {
            content: "\f111";
            left: 1rem;
            top: 1.5rem;
            position: absolute;
            font-family: FontAwesome;
            font-size: 0.5rem;
        }

        .main-menu .menu-dropdown {
            display: none !important;
        }


        .main-menu .sub-dropdown {
            background: #808080 !important;
            display: none !important;
        }

            .main-menu .sub-dropdown a {
                background: #8a7d72 !important;
            }

        .main-menu .menu-banner-container .menu-banners {
            display: block;
        }

            .main-menu .menu-banner-container .menu-banners a {
                padding: 0.5rem !important;
            }

        .main-menu ul li.open > .menu-dropdown,
        .main-menu ul li.open > .menu-banner-container,
        .main-menu ul li.open > .sub-dropdown {
            display: block !important;
        }

        .main-menu ul li a:hover,
        .main-menu ul li.active > a,
        .main-menu ul li a:active {
            background: #a7d8fd !important;
        }

    /*Homepage*/
    .homepage .login-widget {
        margin: 0;
        top: 0;
        padding: 0.5rem;
        display: block;
    }

    .login-widget > .right .widget-help {
        border-left: 0;
    }


    /*Componments*/
    /*Cards*/
    .cards {
        justify-content: center;
    }
    /*#Componments*/
}

/*##iPad##*/
@media (max-width: 1023px) {
    /*Header*/
    .header > .top {
        display: none;
    }

    .main-menu {
        top: 4.25rem;
    }

        .main-menu > .extra-top {
            display: block;
        }

        .main-menu > ul > li > .menu-dropdown > ul > li:hover > a, .main-menu > ul > li > .menu-dropdown > ul > li.active > a {
            box-shadow: none;
        }

    /*Page*/
    .page {
        padding-top: 4.2rem;
    }

    /*Componments*/
    /*Tab Panels*/
    .tab-panels .tabs {
        flex-direction: column;
        margin-bottom: 0;
        background: #fff;
        display: none;
    }

        .tab-panels .tabs.open {
            display: block;
        }

    .tab-panels .accordion-wrap-trigger {
        display: block;
    }

    .tab-panels .panels {
        border-radius: 0;
    }

    .tab-panels .tabs li {
        border: 1px solid #65afe3;
        border-bottom: 0;
        margin-right: 0;
    }

        .tab-panels .tabs li:first-child, .tab-panels .tabs li:last-child {
            border-radius: 0;
        }
    /*Shops*/
    .shops .-list .-item {
        width: 100%;
    }
    /*Image Titles*/

    .image-title .-row,
    .image-title .-row .-left,
    .image-title .-row .-left .-image {
        flex-direction: column;
        margin: 0;
        margin-bottom: 1rem;
        flex: auto;
        width: auto;
    }
    /*Scroll Block*/
    .scroll-block {
        background-size: cover;
    }
    /*#Scroll Block*/
    /*#Componments*/

    /*Homepage*/
    .login-widget > .bottom > .panel {
        flex-direction: column;
    }

        .login-widget > .bottom > .panel > .right .btn {
            min-width: 7rem;
        }

    .home-promotions {
        flex-direction: column;
    }

    .social-platform .-banner {
        display: none;
    }
    /*#Homepage*/
    /*ATM*/
    .atm {
        flex-direction: column;
    }

    .keyboard {
        padding: 0.5rem;
    }
    /*#ATM*/
    /*#Image Banners*/
    .image-banners {
        flex-direction: column;
    }
    /*#Image Banners*/
}



/*##Mobile##*/
@media (max-width: 767px) {
    /*Page*/
    .page .key-image .item .item-description {
        text-align: center;
        background: rgba(238, 238, 238, 0.65);
        padding: 0.5rem;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

        .page .key-image .item .item-description h2 {
            font-size: 1.5rem;
            line-height: 2rem;
        }


    /*Homepage*/
     .panel > .right,
     .panel > .left .widget-forms .rows,
     .panel > .left .widget-forms .rows .colm {
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        margin-bottom: 1rem !important;
        width: 100% !important;
    }

     .panel.active {
        display: block;
    }

     .panel > .left .widget-forms .rows {
        margin-bottom: 2rem !important;
    }

    .home-news-list {
        flex-direction: column;
        padding: 0.5rem;
    }

    .home-news .home-news-list .colm {
        margin: 1rem 0;
    }

        .home-news .home-news-list .colm .item:last-child {
            border-bottom: 1px solid #ccc;
        }


    .social-platform .-posts {
        flex-wrap: wrap;
    }

    .app-links {
        flex-wrap: wrap;
    }

    /*Footer*/
    .footer .mid .row {
        flex-direction: column;
        border: 0;
        margin: 0;
        padding: 0;
    }

        .footer .mid .row .item {
            width: 100%;
            padding: 0;
        }

            .footer .mid .row .item ul {
                background: #e9e5dd;
                padding: 1rem;
                border-radius: 0.25rem;
                display: none;
            }

            .footer .mid .row .item.active ul {
                display: block;
                border-radius: 0;
                box-sizing: border-box;
            }

            .footer .mid .row .item h2 {
                padding: 1rem;
                cursor: pointer;
                margin-bottom: 0;
                border-bottom: 1px solid #d9d6cf;
            }

                .footer .mid .row .item h2:after {
                    display: -webkit-box;
                    display: -moz-box;
                    display: -ms-flexbox;
                    display: -webkit-flex;
                    display: flex;
                }

            .footer .mid .row .item.active h2:after {
                content: "\f056";
            }

    /*Componments*/
    /*Layers*/
    .layer-tabs {
        margin: 0;
        padding: 0;
    }

        .layer-tabs.-scrollable {
            padding: 0 0.5rem;
        }

            .layer-tabs.-scrollable .-scroll-control {
                display: none;
            }

        .layer-tabs .link-wrapper {
            display: none !important;
        }

            .layer-tabs .link-wrapper.open {
                display: block !important;
                border-bottom: 1px solid #ccc;
            }

        .layer-tabs .link-wrap-trigger {
            display: block !important;
        }

    .first.layer-tabs .link-wrapper > * {
        border-radius: 0;
        margin: 0;
    }

    .third.layer-tabs .link-wrapper a {
        margin-left: 3rem;
    }

        .third.layer-tabs .link-wrapper a:before {
            content: "\f0c8";
            border-left: 0;
            height: 1rem;
        }

        .third.layer-tabs .link-wrapper a:first-child:before {
            display: block;
        }

    /*Plan Grid*/
    .plan-grid .rows {
        display: block;
    }

        .plan-grid .rows .item {
            width: auto !important;
            margin: 0.5rem 0;
        }

            .plan-grid .rows .item h3 span:first-child {
                display: none;
            }

            .plan-grid .rows .item h3 span:last-child {
                display: block;
            }

            .plan-grid .rows .item ul {
                bottom: 0;
                top: 50%;
                justify-content: space-around;
                flex-direction: column;
            }

                .plan-grid .rows .item ul li, .plan-grid .rows .item.double ul li {
                    display: inline-block;
                    width: 100%;
                    padding: 0.2rem;
                }

            .plan-grid .rows .item.double img {
                display: none;
            }

                .plan-grid .rows .item.double img.mobile-only {
                    display: block;
                }

            .plan-grid .rows .item:before {
                display: block;
            }

    /*Table Chart*/
    .table-chart-wrapper {
        padding-top: 2rem;
    }

        .table-chart-wrapper:after {
            display: block;
        }

    .table-chart {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        flex-wrap: nowrap;
        background: #fff;
        overflow: auto;
    }

        .table-chart .rows {
            width: 18rem;
            background: #fcfbfb !important;
            box-sizing: border-box;
            flex-direction: column;
            margin: 1rem;
            align-items: flex-start;
            justify-content: flex-start;
            min-width: 18rem;
        }

        .table-chart .title-rows {
            display: none;
        }

        .table-chart .rows .colm {
            background: #fcfbfb;
            max-width: 100%;
        }

            .table-chart .rows .colm > span {
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                justify-content: space-between;
            }

            .table-chart .rows .colm strong {
                display: inline-block;
            }

            .table-chart .rows .colm:nth-child(odd) {
                background: #fcfbfb;
            }

            .table-chart .rows .colm:nth-child(even) {
                background: #fff;
            }

            .table-chart .rows .colm:first-child {
                background: #eee;
            }

                .table-chart .rows .colm:first-child > span {
                    font-weight: bold;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    align-items: center;
                    justify-content: center;
                }

            .table-chart .rows .colm:last-child {
                border-bottom: 0;
            }

    /*Click Me*/
    a.click-me {
        width: 5rem;
        font-size: 1rem;
    }

    /*Steps*/
    .steps {
        flex-direction: column;
        border: 0;
    }

        .steps .step {
            border-bottom: 1px solid #dfdfdf;
            margin-bottom: 1rem;
        }

            .steps .step span.step-no {
                height: 3rem;
                width: 3rem;
                font-size: 2rem;
                line-height: 3rem;
                margin: 0;
                margin-bottom: 1rem;
            }

    /*Forms*/
    .form .-row {
        margin-bottom: 0;
    }

        .form .-colm .input, .form .-colm, .form .-row .-colm .-label,
        .form .-row .-colm .-tip,
        .form .-row .-colm .-error {
            width: 100%;
            margin-right: 0 !important;
            padding-right: 0 !important;
            width: 100% !important;
            min-width: 100%;
        }

    /*Image*/
    .image img {
        display: block;
        margin: 0 0 1rem 0;
        width: 100%;
        float: none;
    }

    .-vertical .card, .-horizontal .card {
        display: block !important;
        margin: 0;
        margin-bottom: 1rem;
        width: 100%;
    }

        .-vertical .card .-header {
            text-align: left;
        }

    /*Action Button*/
    .action-box {
        text-align: center !important;
        justify-content: center !important;
        flex-direction: column;
    }

        .action-box .btn {
            display: block;
        }


    /*Cards*/
    .circles .-row, .circles.-full .-row .-item {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

        .circles .-row .-item .right {
            margin-left: 0;
        }

        .circles .-row .-item .left span {
            font-size: 1.3rem;
        }

    .circles.-linking .-row {
        flex-direction: row;
    }

        .circles.-linking .-row .-item {
            margin: 0.5rem;
            width: 40%;
            justify-content: center;
        }

            .circles.-linking .-row .-item i {
                width: 5rem;
                height: 5rem;
            }

    .google-map-list .-secure strong:before {
        height: 3rem;
        width: 3rem;
    }

    .google-map-list .-secure strong:after {
        height: 1.2rem;
        width: 1.2rem;
        background-size: 100%;
    }

    .dashboard.-card-list {
        justify-content: center;
    }


    /*Fancblock*/
    .-fancy-block .-side {
        width: 100%;
        max-width: 100%;
    }
    /*#Fancblock*/


    /*#Componments*/
}