@font-face {

    font-family: MyriadPro-SemiBold;

    src: url(../../../../Fonts/MyriadPro-Semibold.otf);

}



@font-face {

    font-family: MyriadPro-Bold;

     src: url(../../../../Fonts/MyriadPro-Bold.otf);

}



.web-header {

    top: 0 ;

    width: 100% ;

    z-index: 3000 ;

    position: fixed ;

    background: #fff ; }

    .header-flyer img {

        height: 65px ;

        overflow: hidden ;

        transition: all .2s ease-in-out ; }

        .header-flyer img {

            width: 100% ;

            height: 100% ;

            display: block ;

            object-fit: contain ; }

    .header-top {

        height: 32px ;

        color: #424242 ;

        font-size: 11px ;

        overflow: hidden ;

        background: #f5f5f5 ;

        text-transform: uppercase ;

        transition: all .2s ease-in-out ; }

        .header-top-ul, .header-top-ul:after {

            clear: both ; }

        .header-top-ul:after, .header-top-ul:before {

            content: "" ;

            display: table ; }

        .header-top-ul {

            padding: 0 ;

            height: 20px ;

            margin: 6px 0 ; }

        .header-top-ul > li {

            float: left ;

            padding: 0 5px ; }

        .header-top-ul > li.information {

            width: 75% ;

            overflow: hidden ;

            text-overflow: ellipsis ;

            display: -webkit-box ;

            -webkit-line-clamp: 1 ;

            -webkit-box-orient: vertical ; }

            @media only screen and (max-width: 480px) {

                .header-top-ul > li.information {

                    width: 65% ; } }

        .header-top-ul > li.language {

            width: auto ;

            float: right ; }

            .header-language-ul, .header-language-ul:after {

                clear: both ; }

            .header-language-ul:after, .header-language-ul:before {

                content: "" ;

                display: table ; }

            .header-language-ul {

                margin: 0 auto ; }

            .header-language-ul li {

                padding: 0 ;

                float: left ;

                margin-left: 10px ; }

            .header-language-ul li:first-child {

                margin-left: 0 ; }

    .header-middle {

        padding: 0 ;

        /*height: 90px ;*/

        background: #fff ;

        transition: all .2s ease-in-out ; }

        .header-middle .logo a {

            display: block ; }

        .header-middle .logo a img {

            width: 100% ;

            height: 90px ;

            padding: 5px 0 ;

            margin: 0 auto ;

            display: block ;

            object-fit: contain ; }

        .navigation_menu_box {

            line-height: 90px ; }

            .menu > ul:before, .menu > ul:after {

                content: "" ;

                display: table ; }

            .menu > ul:after {

                clear: both ; }

            .menu > ul {

                padding: 0 ;

                width: 100% ;

                margin: 0 auto ;

                list-style: none ;

                position: relative ;

                text-align: center ;

                box-sizing: border-box ; }

                .menu > ul > li {

                    font-weight: 600 ;

                    padding-bottom: 0 ;

                    display: inline-block ; }

                    .menu > ul > li > a {

                        display: block ;

                        color: #000000 ;

                        font-size: 12px ;

                        padding: 0 26px 0 0;

                        font-weight: 600 ;

                        letter-spacing: 0.5px ;

                        text-decoration: none ;

                        transition: transform .2s ; }

                        .menu > ul > li > a > span {

                            font-family: MyriadPro-Bold;

                            position: relative ;

                            font-weight: 1000;

                            font-size: 18px;

                            letter-spacing: -0.5px;  }

                        .menu > ul > li > a > span:before {

                            left: 0 ;

                            width: 0 ;

                            content: '' ;

                            height: 1px ;

                            bottom: -2px ;

                            display: block ;

                            position: absolute ;

                            -webkit-transition: width 0.3s ease ;

                            -moz-transition: width 0.3s ease ;

                            -ms-transition: width 0.3s ease ;

                            -o-transition: width 0.3s ease ;

                            transition: width 0.3s ease ;

                            visibility: hidden ;  }                            

                        .menu > ul > li > a:hover > span:before {

                            width: 100% ;

                            visibility: visible ; }

                    .menu > ul > li > ul:before, .menu > ul > li > ul:after {

                        content: "" ;

                        display: table ; }

                    .menu > ul > li > ul:after {

                        clear: both ; }

                    .menu > ul > li > ul {

                        left: 0 ;

                        margin: 0 ;

                        width: 100% ;

                        z-index: 99 ;

                        height: 300px ;

                        display: none ;

                        padding: 20px ;

                        overflow: auto ;

                        list-style: none ;

                        position: absolute ;

                        background: #f0f0f0 ;

                        box-sizing: border-box ; }

                        .menu > ul > li > ul::-webkit-scrollbar-track {

                            border-radius: 10px ;

                            background-color: #F5F5F5 ;

                            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) ; }

                        .menu > ul > li > ul::-webkit-scrollbar {

                            width: 6px ;

                            background-color: #F5F5F5 ; }

                        .menu > ul > li > ul::-webkit-scrollbar-thumb {

                            border-radius: 10px ;

                            background-color: #000 ;

                            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3) ; }

                    .menu > ul > li > ul.normal-sub {

                        left: auto ;

                        width: 300px ;

                        padding: 10px 20px ; }

                        .menu > ul > li > ul > li {

                            margin: 0 ;

                            width: 25% ;

                            float: left ;

                            list-style: none ;

                            background: none ;

                            text-align: left ;

                            padding-bottom: 0 ; }

                            .menu > ul > li > ul > li a {

                                width: 100% ;

                                color: #777 ;

                                display: block ;

                                padding: .2em 0 ;

                                line-height: initial ;

                                text-transform: capitalize ;

                                border-bottom: 1px solid #ccc ; }

                            .menu > ul > li > ul > li > ul:before, .menu > ul > li > ul > li > ul:after {

                                content: "" ;

                                display: table ; }

                            .menu > ul > li > ul > li > ul:after {

                                clear: both ; }

                            .menu > ul > li > ul > li > ul {

                                padding: 0 ;

                                display: block ;

                                margin: 10px 0 0 ;

                                list-style: none ;

                                box-sizing: border-box ; }

        .header-icon-ul, .header-icon-ul:after {

            clear: both ; }

        .header-icon-ul:after, .header-icon-ul:before {

            content: "" ;

            display: table ; }

        .header-icon-ul {

            width: 100% ;

            margin: 0 auto ;

            line-height: 90px ; }

        .header-icon-ul li {

            padding: 0 ;

            float: right ;

            position: relative ;

            margin-right: 15px ; }

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

                .header-icon-ul li{

                    margin-right: 10px;

                }

            }

        .header-icon-ul li a {

            display: block ;

            position: relative ; }

        .header-icon-ul li i {

            font-size: 24px ;

            vertical-align: middle ; }

            @media (min-width: 980px) and (max-width: 1200px) {

                .header-icon-ul li i {

                    font-size: 18px ; } }

                @media (min-width: 945px) and (max-width: 980px) {

                    .header-icon-ul li i {

                        font-size: 17px ;

                        /* padding-right: 8px ;  */

                    } }

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

                    .header-icon-ul li i{

                        font-size: 15px;

                    }

                }

        .header-icon-ul li a .cart_item {

            top: 40% ;

            color: #fff ;

            width: 18px ;

            right: -10px ;

            font-size: 12px ;

            line-height: 18px ;

            position: absolute ;

            text-align: center ;

            border-radius: 50% ;

            background-color: #000 ;

            transform: translate(0, 50%) ; }

            /* @media (min-width: 768px) and (max-width: 980px) {

                .header-icon-ul li a .cart_item {

                    right: 0px ; } } */

        .header-icon-ul li .welcomeText {

            font-size: 12px ;

            white-space: nowrap ;

            display: inline-block ; }

        .header-icon-ul li .dropdown {

            z-index: 1000 ;

            cursor: pointer ;

            position: relative ;

            display: inline-block ; }

        .header-icon-ul li .dropdown-content {

            z-index: 1 ;

            top: 60px ;

            right: 50% ;

            display: none ;

            min-width: 120px ;

            position: absolute ;

            text-align: center ;

            line-height: initial ;

            background-color: #f9f9f9 ;

            transform: translate(50%, 0) ;

            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2) ; }

        .header-icon-ul li .dropdown:hover .dropdown-content {

            display: block ; }

        .header-icon-ul li .dropdown-content a {

            color: black ;

            display: block ;

            padding: 12px 16px ;

            text-decoration: none ;

            border-top: 1px solid #ddd ; }

        .header-icon-ul li .dropdown-content a:hover {

            background-color: #f1f1f1 ; }

        .header-icon-ul li .search-control {

            float:right ;

            width: 130px ;

            margin: 26.5px 0 ;

            padding-right: 35px ;

            -webkit-transition: width 0.4s ease-in-out ;

            transition: width 0.4s ease-in-out ; }

        .header-icon-ul li .search-control:focus {

          width: 100% ; }

        .header-icon-ul li .search-icon {

            top: 50% ;

            right: 10px ;

            position: absolute ;

            transform: translate(0, -50%) ; }

        .menu-mobile, .menu-mobile-close {

            display: none ; }

        .menu-mobile:after {

            color: #000 ;

            content: "\f0c9" ;

            font-size: 2.1rem ;

            position: relative ;

            font-family: "Fontawesome" ;

            -webkit-transform: translateY(-25%) ;

            -ms-transform: translateY(-25%) ;

            transform: translateY(-25%) ; }

        .menu-mobile-close:after {

            color: #000 ;

            content: "\f00d" ;

            font-size: 2.1rem ;

            position: relative ;

            font-family: "Fontawesome" ;

            -webkit-transform: translateY(-25%) ;

            -ms-transform: translateY(-25%) ;

            transform: translateY(-25%) ; }

        .menu-dropdown-icon:before, .menu-dropdown-icon-open:before {

            right: 0 ;

            z-index: 1 ;

            color: #000 ;

            display: none ;

            cursor: pointer ;

            padding: 1.5em 2em ;

            position: absolute ;

            font-family: "Fontawesome" ; }

        .menu-dropdown-icon:before {

            content: "\f067" ; }

        .menu-dropdown-icon-open:before {

            content: "\f068" ; }



.web-header-scroll {

    box-shadow: 0 0px 10px grey ; }

    .web-header-scroll .header-flyer {

        height: 0 ; }

    .web-header-scroll .header-top {

        height: 0 ; }

    .web-header-scroll .header-middle {

        /*height: 85px ;*/ }

        .web-header-scroll .header-middle .logo a img {

            height: 80px ; }

        .web-header-scroll .navigation_menu_box {

            line-height: 85px ; }

        .web-header-scroll .header-icon-ul li .search-control {

            margin: 21.5px 0 ; }

        .web-header-scroll .header-icon-ul {

            line-height: 85px ; }



.web-content {

    margin-top: 167px ; }





@media only screen and (max-width: 768px) {

    .header {

        position: relative ; }

        .header-middle {

            height: 90px ;

            position: relative ; }

            .header-middle .logo a img {

                top: 50% ;

                left: 50% ;

                z-index: 1 ;

                width: 157px ;

                padding: 0 15px ;

                position: absolute ;

                transform: translate(-50%, -50%) ; }

            .header-icon-ul li.cart, .header-icon-ul li.search {

                display: none ; }

            .menu-mobile, .menu-mobile-close {

                top: 50% ;

                left: 20px ;

                z-index: 1 ;

                display: block ;

                position: absolute ;

                transform: translate(0, -50%) ; }

            .menu-dropdown-icon:before,  .menu-dropdown-icon-open:before{

                display: block ; }

            .menu > ul {

                display: none ; }

            .menu > ul > li {

                width: 100% ;

                float: none ;

                margin-left: 0 ;

                position: relative ; }

            .menu > ul > li > a {

                width: 100% ;

                padding: 1.5em ;

                display: block ;

                line-height: initial ; }

            .menu > ul > li > ul {

                position: relative ; }

            .menu > ul > li > ul.normal-sub {

                width: 100% ; }

            .menu > ul > li > ul > li {

                float: none ;

                width: 100% ;

                margin-top: 20px ; }

            .menu > ul > li > ul > li:first-child {

                margin: 0 ; }

            .menu > ul > li > ul > li > ul {

                position: relative ; }

            .menu > ul > li > ul > li > ul > li {

                float: none ; }

            .menu .show-on-mobile {

                left: 0 ;

                top: 95px ;

                line-height: 1 ;

                display: block ;

                overflow: auto ;

                margin-bottom: 0 ;

                position: absolute ;

                background: #dddddd ; }

            .header-icon-ul {

                right: 0 ;

                top: 50% ;

                position: absolute ;

                transform: translate(0, -50%) ; }



    .web-header-scroll {

        display:block ; }

        .web-header-scroll .header-top{

            height: 32px ; }



    .web-content {

        margin-top: 123px ; }

}



.menu-grid-group {

    text-align: left;

    left: 30% ;

    /* top: 67%; */

    top: 60%;

    z-index: 1 ;

    display:none ;

    width: 305px ;

    position: absolute ;

    background-color: #ffffff ;

    transform: translate(-50%, 0px) ; }

    @media only screen and (max-width: 768px) {

        .menu-grid-group {

            width: 85% ; 

            left: 53%;

            z-index: 2;

            top: 80%;

        } }

    .menu-grid {

        width: 100% ; }

        .menu-grid a {

            padding: 5px ;

            display: block ;

            text-align: left ;

            font-size: 13px; }

        .menu-grid-sizer {

            width: auto ; }

        .menu-grid-list {

            width: 25% ;

            float: left ;

            padding: 10px ;

            line-height: 1.5 ;

            padding-bottom: 15px ; }

            @media only screen and (max-width: 767px) {

                .menu-grid-list {

                    width: 100% ; } }

            .menu-grid-list.current > a.underline {

                border-bottom: 1px solid #ccc ; }

        .menu-grid-list-sub {

            }

            .menu-grid-list-sub .title {

                line-height: 1.5 ;

                font-weight: 100 ; }

            .menu-grid-list-sub .view-more {

                line-height: 1.5 ;

                font-weight: bold ; }



.dropdown_items>ul {

    margin: 5px 0 0 0;

    line-height: 47px;

}



.dropdown_items>ul>li {

    pointer-events: none;

}



.dropdown_items>ul>li:hover {

    background-color: #02bee1;

}



.dropdown_items>ul>li>a {

    padding: 0 0 0 23px;

    color: #000000;

    pointer-events: auto;

    font-size: 14px;

}



.dropdown_items>ul>li>a:hover {

    color: #ffffff;

}



@media (min-width:945px) and (max-width:1200px){

    .menu > ul > li > a{

        padding: 0 15px 0 0;

    }

    .menu > ul > li > a > span,

    .dropdown_items>ul>li>a{

        font-size: 16px;

    }                                

}

@media (min-width:894px) and (max-width:945px){

    .menu > ul > li > a{

        padding: 0 16px 0 0;

    }

    .menu > ul > li > a > span,

    .dropdown_items>ul>li>a {

        font-size: 15px;

    }

}

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

    .menu > ul > li > a{

        padding: 0 9.7px 0 0;

    }

    .menu > ul > li > a > span,

    .dropdown_items>ul>li>a {

        font-size: 14px;

    }

}