/*
Version: 1.0.0
Author: Ansonika
Author URI: http://themeforest.net/user/Ansonika/

CSS STRUCTURE:

1. BASE
2.  COMMON
3. MEDIA QUERIES

/*============================================================================================*/
/* 1.  BASE  */
/*============================================================================================*/

.menu_container {
	text-align:right;
	margin: 22px 0 0 0;
	text-transform:uppercase;
	font-weight:700;
}
.menu > li {
	display:inline;
	border:none;
	margin:0;
	color:#011679;
	padding-right:10px;
	border-left: 1px solid #011679;
	padding-left:15px;
}
.menu > li:first-child {
	border-left: none;
	padding-left:none;
}
.menu > li a{
	color:#30b6f5;
	text-decoration:none;
	}
.menu > li a:hover{
	color:#f2ab3b;
	text-decoration:none;
	}

		.menu > li a.drop-down {
			background-image:url("../_img/arrow-down.png");
			background-repeat: no-repeat;
			background-position:right 20px;
			padding:14px 15px 15px 0;
			color:#30b6f5
			outline:none;
		}

		.menu > li a.drop-down:hover {
			cursor:pointer;
			color:#f2ab3b;
			outline:none;
		}

		.menu> li.active .drop-down{
			cursor:pointer;
			background-image:url("../_img/arrow-down.png");
			color:#f2ab3b;
		}	
		a#menu-button-mobile {
			display:none;
			float:right;
			margin-top:-5px;
			outline:none;
			border:none;
			color:#f2ab3b;
			font-size:28px;
			margin-right:-5px;
	
		}
		a#menu-button-mobile.active {
			color:#999;
			cursor:pointer;
		}

.drop-down-container ul{
	list-style:none;
	margin:0;
	padding:20px 0 0 0;
}

.drop-normal {
	position:relative;
}
.menu > li .drop-down-container.normal {
	 position:absolute; top:40px; left:0px;
	display: none;
	z-index:999;
	overflow-y: visible;
	width:auto;
	padding-top:0;
	padding-bottom:0;
	background:none;
	height:auto;
	text-transform:none;
}
.drop-down-container.normal ul{
	list-style:none;
	margin:0;
	padding:0;
}
.drop-down-container.normal ul li{
	text-align:left;
}
.drop-down-container.normal ul li a{
	display:block;
	padding:10px;
	width:260px;
	border-bottom:1px solid #fff;
	color:#fff;
	background-color:#30b6f5;
}
.drop-down-container.normal ul li a:hover{
	background:#fff;
	color:#011679;
	padding-left:15px;
}



/*============================================================================================*/
/* 3.  MEDIA QUERIES  */
/*============================================================================================*/


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

    /* Hamburger button */
    a#menu-button-mobile{
        display: block !important;
        position: relative;
        top: 0;
        right: 23px;
        z-index: 15001; /* above header */
        padding: 10px;
        border-radius: 4px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        background-color: #DDDDDD !important;
        height: 25px !important;
        width: 25px !important;
        outline: none;
    }

    a#menu-button-mobile::before{
        content: "≡";
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 28px;
        color: #333;
        font-weight: bold;
    }

    /* Menu panel (first level) - sits under fixed header */
    ul.menu{
        display: none; /* toggled by JS */
        position: fixed;
        left: 0;
        right: 0;
        top: calc(var(--vp-announcement-h) + var(--vp-header-h));
        z-index: 14999;
        max-height: calc(100vh - var(--vp-announcement-h) - var(--vp-header-h));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        padding: 0;
        margin: 0;
        background: #011679; /* royal blue */
        width: 100%;
    }

    .menu > li{
        float: none;
        width: 100%;
        text-align: left;
        display: block;
        margin: 0;
        padding: 0;
        border-top: 1px solid rgba(255,255,255,0.15);
        background: #011679;
    }

    .menu > li:first-child{ border-top: none; }

    .menu > li > a,
    .menu > li > a.drop-down{
        display: block;
        width: 100%;
        margin: 0;
        padding: 14px 15px;
        line-height: 20px;
        background: #011679;
        color: #30b6f5; /* sky blue */
        text-decoration: none;
    }

    .menu > li > a:hover,
    .menu > li > a.drop-down:hover{
        background: #021a8a;
        color: #f2ab3b;
    }

    .menu > li a.drop-down{
        background-position: 98.5% center;
    }

    /* Dropdown containers on mobile */
    .menu > li .drop-down-container,
    .menu > li .drop-down-container.normal{
        position: relative;
        top: 0;
        left: 0;
        width: auto;
        height: auto;
        padding: 0;
    }

    /* Submenu items = match desktop (blue bg + white text) */
    .drop-down-container.normal ul{
        margin: 7px 0 0 0;
        padding: 0;
        list-style: none;
    }

    .drop-down-container.normal ul li{
        margin: 0;
        padding: 0;
        border-top: 1px solid #ededed;
        background: none;
    }

    .drop-down-container.normal ul li a{
        display: block;
        width: 100%;
        background-color: #30b6f5;
        color: #fff;
        border-bottom: 1px solid #fff;
        padding: 10px 12px;
    }

    .drop-down-container.normal ul li a:hover{
        background: #fff;
        color: #011679;
        padding-left: 15px;
    }
}