﻿/*Slide Function Styles*/
input.slideMenuActivation,
input.slideMenuActivation + label { display: none; }

/*-- Default Navigation Rules --*/
.menu { user-select: none; }
    .menu ul { position: relative; width: 100%; margin: 0 auto; clear: both; padding: 0; list-style: none; z-index:1; }
        .menu ul li { display: inline-block; text-align: left; margin: 0; padding: 0; }
            .menu ul li a { color: #1c3f95; text-decoration: none; padding: 10px; margin: 0 40px 5px 0; display: block; font-size: 24px; }
                .menu ul li a:hover { color: #000; }

        .menu ul.stMenu ul { display: none; width: auto; min-width: 200px; position: absolute; background-color: rgba(255,255,255,0.85); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; overflow: hidden; }
            .menu ul.stMenu ul li { width: 100%; display: block; }
                .menu ul.stMenu ul li a { font-size: 18px; padding: 5px 10px; margin: 0; }
                    .menu ul.stMenu ul li a:hover { background-color: #1c3f95; color: #fff; }

            .menu ul.stMenu ul ul { position: relative; display: block; background: transparent; }
                .menu ul.stMenu ul ul li a { background: none; }
                    .menu ul.stMenu ul ul li a:before { content: "-"; width: 15px; display: inline-block; }

            /*1st Level*/
            .menu ul.stMenu ul li li a { padding-left: 20px; }
            /*2nd Level*/
            .menu ul.stMenu ul li li li a { padding-left: 40px; }
            /*3rd Level*/
            .menu ul.stMenu ul li li li li a { padding-left: 60px; }
            /*4th Level*/
            .menu ul.stMenu ul li li li li li a { padding-left: 80px; }
            /*5th Level*/
            .menu ul.stMenu ul li li li li li li a { padding-left: 100px; }





    /*Mobile Icon*/
    .menu .mobileMenu::after { content: ""; display: inline-block; width: 50px; height: 51px; position: relative; background: transparent url('./menuIcon.png') center center no-repeat; background-size: contain; }
    .menu .stMobileMenu.hideMenu { display: block; -moz-animation: LoadOut 0.15s both; -webkit-animation: LoadOut 0.15s both; animation: LoadOut 0.15s both; }




    /*Mobile Menu*/
    .menu ul.stMobileMenu { display: none; float: left; clear: both; width: 100%; overflow: hidden; margin: 0 auto; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #1c3f94; padding: 0; z-index: 2; }

        .menu ul.stMobileMenu li { width: 100%; }
        .menu ul.stMobileMenu a { width: 100%; border-bottom: 1px solid #333; color: #fff; margin: 0; }
            .menu ul.stMobileMenu a:hover { color: #000; background-color: #fff; }

        .menu ul.stMobileMenu ul ul { position: relative; display: block; }

        /*1st Level*/
        .menu ul.stMobileMenu ul li a { padding-left: 30px; }
        /*2nd Level*/
        .menu ul.stMobileMenu ul li li a { padding-left: 50px; }
        /*3rd Level*/
        .menu ul.stMobileMenu ul li li li a { padding-left: 70px; }
        /*4th Level*/
        .menu ul.stMobileMenu ul li li li li a { padding-left: 90px; }
        /*5th Level*/
        .menu ul.stMobileMenu ul li li li li li a { padding-left: 110px; }


    /*Active Mobile Menu*/
    .menu .stMobileMenu.showMenu { display: flex; overflow: auto; padding: 0 0 20px; margin-top: 70px; flex-direction: row; flex-wrap: wrap; align-content: flex-start; flex-shrink: 0; justify-content: center; -moz-animation: LoadIn 0.15s both; -webkit-animation: LoadIn 0.15s both; animation: LoadIn 0.15s both; z-index: 100; }


    /*Mobile Device View*/
    .menu .mobileMenu { display: none; float: left; position: relative; width: 80px; padding-left: 0; text-align: center; }


    /*Close Buttons*/
    .menu .callAndClose { display: flex; align-content: center; width: 100%; position: fixed; top: 0; height: 70px; background-color: #000; border-bottom: 1px solid #fff; left: 0; right: 0; z-index: 101; }
        /*Mobile Phone Number Call*/
        .menu .callAndClose .callBtn { display: flex; justify-content: center; align-items: center; position: absolute; top: 4px; left: 10px; text-align: center; border: 1px solid green; border-radius: 15px; background-color: green; }
            .menu .callAndClose .callBtn:hover { cursor: pointer; }
            .menu .callAndClose .callBtn::after { display: inline-block; content: "Call"; color: #fff; font-size: 28px; padding: 11px; }


        /*Mobile Close Menu*/
        .menu .callAndClose .closeBtn { display: flex; justify-content: center; align-items: center; position: absolute; top: 10px; right: 10px; text-align: center; background-color: red; border-radius: 100px; border: 1px solid #fff; }
            .menu .callAndClose .closeBtn:hover { cursor: pointer; }
            .menu .callAndClose .closeBtn::after { display: flex; content: "X"; color: #fff; font-size: 28px; padding: 0; width: 45px; height: 45px; justify-content: center; align-items: center; }








/*Responsive Rule Set*/
@media only screen and (max-width: 1480px) {
    .menu ul.stMenu > li a { font-size: 22px; }
}

@media only screen and (max-width: 1366px) {
    .menu ul.stMenu > li a { font-size: 20px; }
}


@media only screen and (max-width: 1280px) {
    .menu ul.stMenu > li a { margin: 0 15px 5px 0; }
}

@media only screen and (max-width: 992px) {
    .menu ul.stMenu { display: none; }

    .menu .mobileMenu,
    .menu .mobileMenu::before { display: inline-block; cursor: pointer; margin-top: 5px; }

    .menu.homePg div.mobileMenu { display: none; }
    .menu.homePg ul.stMobileMenu { display: block; }
}








@keyframes LoadIn {
    0% { opacity: 0; transform: scale(0); }
    100% { opacity: 1; transform: scale(1); }
}

@-webkit-keyframes LoadIn { /* Safari and Chrome */
    0% { opacity: 0; transform: scale(0); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes LoadOut {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0); }
}

@-webkit-keyframes LoadOut { /* Safari and Chrome */
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0); }
}


@keyframes FadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-webkit-keyframes FadeIn { /* Safari and Chrome */
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.menu ul.stMobileMenu > li > .subMenu.activeSubPg { -moz-animation: FadeIn .5s both; -webkit-animation: FadeIn .5s both; animation: FadeIn .5s both; }







/*Footer*/
footer .stMenu { list-style: none; display: flex; flex-direction: row; justify-content: center; }
    footer .stMenu li { display: block; margin: 0; padding: 0 10px; }
        footer .stMenu li ul { display: none; }
