/* ---------- WCC SITE SPECIFIC AREA ---------------------------------------------------------------------------------------- */

#wcc_site_specific_area{
    font-size:1vw;
	margin-top:12vh;
}

/* ----------UPPER AREA- COntain TOP and Navigation areas--------------------------------------------------------- */
#upper{
    position:fixed;
    z-index:100;
    width:100vw;
	top:0;
}

/* ---------- TOP AREA ---------------------------------------------------------------------------------------- */
#top{
	height:4vh;
}
#top H2{
    font-size:2vh;
	padding:0px;
	margin:0px;
	padding-top:0.5vh;
}

/* ---------- NAVIGATION---------------------------------------------------------------------------------------- */
#navarea{
    background-color:var(--primary2);
    position:relative;
    width:100%;
    font-size:0;
}
/* ---------- Create a standard for mobile icons ----------------- */
#mobile_icons{
    position:relative;
    bottom:auto;
    width:15%;
    background-color:transparent;
    display:inline-block;
    vertical-align:top;
    border-top:none;
}
.mobile_icon{
    height:8vh;
	margin-left:0;
    margin-right:0;
}
#home_logo{
   width:70%;
}
/* ---------- hide the hamburger menu icon when not needed ----------------- */
#shownav{
    display:none;
}
/* ---------- Define the navigation area ----------------- */
#navigation{
    height:auto;
    width:85%;
    left:0vw;
    position:relative;
    background-color:transparent;
    display:inline-block;
    vertical-align:top;
    font-size:1.2vw;
}
#navigation ul{
    background-color:transparent;
}
/* ------ FIRST LEVEL ----- */
#navigation li{
    float:left;
    vertical-align:top;
    margin:0px;
    border-top:none;
}
#navigation li a{
	height:8vh;
	
    color:var(--white);
    padding-top:0;
    padding-bottom:0;
    padding-left:1em;
    padding-right:1em;
    line-height:1em;
    display: flex;
    justify-content: center;
    flex-direction: column;
	font-weight:700;
    border-top:4px solid transparent;
}
#navigation ul li a.hascontent{
    background-color:var(--white);
    color:var(--primary3);
    border-top:4px solid var(--primary3);
    background-image:url("../images/arrow.svg");
    background-size:auto 70%;
    background-position:right center;
}

#navigation li a:focus{
    background-color:var(--white);
    color:var(--primary3);
    border-top:4px solid var(--primary3);
    background-image:url("../images/arrow.svg");
    background-repeat:no-repeat;
    background-size:auto 70%;
    background-position:right center;
}
/* ------ SECOND LEVEL ----- */
#navigation ul ul{
    position:absolute;
    left:0;
    width:100%;
    padding-left:18%;
	margin-left:-18%;
	background-color:var(--white);
    padding-top:0;
    padding-bottom:0;
    border-bottom:1px solid var(--tonal2);
}
#navigation ul ul li{
    border-top:none;
    display:block;
}
#navigation ul ul li a{
    text-align:center;
    font-size:0.8em;
    min-height:2vh;
    background-color:transparent;
	font-weight:400;
    color:var(--black);
    border-left:1px solid var(--tonal2);
    padding-bottom:1.3em;
    padding-top:1.2em;
    border-top:4px solid transparent;
}

#navigation ul ul li a:hover{
    background-repeat:no-repeat;
	color:var(--primary3);
    border-top:4px solid var(--primary3);
    background-image:url("../images/arrow_right.svg");
    background-size:auto 60%;
    background-position:right center;
}




/* ---------- CONTENT AREA ---------------------------------------------------------------------------------------- */
#content{
    width:70vw;
}
/* ----- setup a width and height for embedded videos -----*/

/* ---------- FOOTER AREA ---------------------------------------------------------------------------------------- */
#footer{
    margin-bottom:0;
}