.main-menu a {
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.8);
}

@media only screen and (min-width: 768px){

    .main-menu > li > a {
        text-shadow:    1px 1px         rgba(12, 12, 25, 0.2),
                        1px -1px        rgba(12, 12, 25, 0.2),
                        -1px 1px        rgba(12, 12, 25, 0.2),
                        -1px -1px       rgba(12, 12, 25, 0.2),
                        0px 0px 2px    rgb(12, 12, 25),
                        0px 0px 3px    rgb(12, 12, 25);
    }

    .main-navbar {
        display: block;
        width: 100%;
        position: absolute;
        bottom: 4px;
    }
    #menu-toggle,
    .submenu-toggle {
        display: none;
    }
    .main-menu-container {
        float: right;
        width: 100%;
        padding-left: 150px;
    }


    .main-menu {
        display: block;
        width: 100%;
        padding: 0px;
        margin: 0px;
        list-style: none;
        text-align: right;
    }
    .main-menu > li {
        display: inline-block;
        padding: 0px;
        margin: 0px;
    }
    .main-menu > li > a {
        display: inline-block;
        padding: 10px 20px;
        margin: 0px;
        font-size: 20px;
        color: #fff;
        text-decoration: none;
    }
    .main-menu > li:last-child > a {
        /*padding-right: 0px;*/
    }
    .main-menu > li > a:hover,
    .main-menu > li.active > a {
        color: #7f98d6;
    }




    .sub-menu {
        display: block;
        position: absolute;
        padding: 30px 0px 20px 0px;
        margin: 0px;
        list-style: none;

        visibility: hidden;
        opacity: 0;

        min-width: 180px;
        /*background-color: rgba(0, 55, 104, 0.9);*/
        background-color: rgba(0, 0, 52, 0.85);

        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }
    .sub-menu > li {
        display: block;
        padding: 0px;
        margin: 0px;
    }
    .sub-menu > li > a {
        display: block;
        padding: 3px 20px;
        margin: 0px;
        font-size: 15px;
        color: #fff;
        text-transform: uppercase;
        font-weight: 600;
        text-decoration: none;
    }

    .sub-menu > li > a:hover,
    .sub-menu > li.active > a {
        /*color: #1a2c61;*/
        color: #7f98d6;
        text-shadow:    1px 1px         rgba(12, 12, 25, 0.2),
                        1px -1px        rgba(12, 12, 25, 0.2),
                        -1px 1px        rgba(12, 12, 25, 0.2),
                        -1px -1px       rgba(12, 12, 25, 0.2);
    }


    .main-menu > li:hover .sub-menu {
        visibility: visible;
        opacity: 1;
    }



}

@media only screen and (max-width: 767px){
    .main-navbar {
        float: right;
        width: 36px;
        height: 36px;
        cursor: pointer;
    }

    #menu-toggle {
        display: block;
        position: absolute;
        right: 15px;
        top: 21px;
        width: 36px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        /*background:url(../img/toggle.png) center center no-repeat;*/
        background-size: contain;
        cursor: pointer;
    }
    #menu-toggle i {
        font-size: 30px;
        color: #fff;
    }
    #menu-toggle i:hover {
        color: #e7e7e7;
    }

    .submenu-toggle {
        background-color: rgba(159, 170, 219, 0.38);
        width: 35px;
        height: 33px;
        line-height: 34px;
        text-align: center;
        position: absolute;
        right: 1px;
        top: 0px;
        z-index: 10;
        color: #fff;
    }
    .submenu-toggle i {
        font-size: 15px;
        color: #fff;
    }
    .submenu-toggle i:hover {
        color: #132148;
    }

    .main-menu {
        position: absolute;
        display: block;
        top: 75px;
        right: 15px;
        padding: 15px 0px;
        margin: 0px;
        list-style: none;
        text-align: right;
        min-width: 260px;
        max-width: 300px;

        /*background-color: rgba(0, 55, 104, 0.9);*/
        background-color: rgba(0, 0, 52, 0.85);

        visibility: hidden;
        opacity: 0;

        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }
    .main-menu > li {
        display: block;
        padding: 0px;
        margin: 0px;
        position: relative;
    }
    .main-menu > li.has-submenu > a {
        width: calc(100% - 40px);
    }
    .main-menu > li > a {
        display: block;
        padding: 2px 15px;
        margin: 0px;
        font-size: 20px;
        color: #fff;
        font-weight: 500;
        text-decoration: none;
        /*text-transform: uppercase;*/
        text-shadow:    1px 1px         rgba(12, 12, 25, 0.2),
                        1px -1px        rgba(12, 12, 25, 0.2),
                        -1px 1px        rgba(12, 12, 25, 0.2),
                        -1px -1px       rgba(12, 12, 25, 0.2);
    }

    .main-menu > li > a:hover,
    .main-menu > li.active > a {
        color: #7f98d6;/*132148*/
    }

    .sub-menu {
        display: none;
        padding: 0px;
        margin: 0px;
        list-style: none;
    }
    .sub-menu > li {
        display: block;
        padding: 0px;
        margin: 0px;
    }
    .sub-menu > li > a {
        display: block;
        padding: 3px 30px;
        margin: 0px;
        font-size: 14px;
        color: #fff;
        text-transform: uppercase;
        font-weight: 400;
        text-decoration: none;
        text-shadow:    1px 1px         rgba(12, 12, 25, 0.2),
                        1px -1px        rgba(12, 12, 25, 0.2),
                        -1px 1px        rgba(12, 12, 25, 0.2),
                        -1px -1px       rgba(12, 12, 25, 0.2);
    }

    .sub-menu > li > a:hover,
    .sub-menu > li.active > a {
        color: #7f98d6;/*132148*/
    }


    .scrollUp .top-menu.hasOpenedMenu .main-menu {
        /*display: none;*/
        visibility: hidden;
        opacity: 0;
    }
    .top-menu.hasOpenedMenu .main-menu {
        /*display: block;*/
        visibility: visible;
        opacity: 1;
    }
    .hasOpenedSubMenu ul {
        display: block;
    }
}





















