/* Main CSS */

/* #Basic Styles
================================================== */
html{}

body{  
	background-color:#8996a6;
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment: fixed;}
body img{max-width: 100%; height: auto;}

#background{position:absolute; width:100%;}

.hide-on-desktop{display:none;}

/* #Header
================================================== */
#header-wrap{}
#logo{text-align:center; margin-top:70px; margin-bottom:40px;}
#secondary-logo{text-align: left; width:30%; padding-left:20px;}

#header-feature{width:12%; position:absolute; margin-top:15px; margin-right:15px; float:right; right:0;}

.edit-mode{position:relative !important; margin-top:5px; margin-bottom:5px; z-index:auto !important;}

/*Navigation 
================================================== */
@media only screen and (min-width: 768px) { 
	#mobile-dropdown-button{display:none;}
	#navigation-wrap{background:url("images/grey-bg-trans.png"); width:18%; margin-top:80px; position:absolute; z-index:10;}
	#navigation{padding:20px 0;}
	#navigation a{display:block; text-decoration:none; }
	#navigation a:hover{}
	#navigation>#mobile-dropdown>ul{padding-left:10px; margin:0; list-style:none; width:100%; font-size: 16px}
	#navigation>#mobile-dropdown>ul>li{position:relative; }
	#navigation>#mobile-dropdown>ul>li>a{color:#ffffff; padding:5px 10px; font-style: normal; font-weight: bold;}
    #navigation>#mobile-dropdown>ul>li:hover>a{color:#002046;}

	#navigation>#mobile-dropdown>ul>li>ul{
			display:none;
	    padding:0 10px;}
	#navigation>#mobile-dropdown>ul>li:hover>ul{display:block;}
	#navigation>#mobile-dropdown>ul>li>ul>li{list-style-type:none; height:auto !important; }
	#navigation>#mobile-dropdown>ul>li>ul>li>a{padding:5px 15px; font-weight:bold; color:#ffffff; margin:auto; text-decoration:none; font-size:16px;}	
	#navigation>#mobile-dropdown>ul>li>ul>li a:hover{color:#002046;}


	#navigation>#mobile-dropdown>ul>li:hover>ul{display:block;}
	#navigation>#mobile-dropdown>ul>li:hover>ul>li>a{font-style: normal; color:#ffffff;}
	#navigation>#mobile-dropdown>ul>li:hover>ul>li a:hover{color:#002046;}

	#navigation>#mobile-dropdown>ul>li>ul>li>ul{display:none; }
}
/* #Content
================================================== */

#content-wrap{border-top:5px solid #002046; margin-bottom:200px;}
#header-container{background:url("images/white-bg-trans.png");}
#content-container{background:url("images/grey-bg-trans.png"); padding:20px 10px;}
#feature-container{background:url("images/white-bg-trans.png"); border-bottom:20px solid #002046; border-top:10px solid #f8c30a; padding:30px;}
.secondary-content{margin-top:75px;}


#main-wrap{padding:10px 0;}
#main, #secondary-main, #sidebar, #tertiary-main, #tertiary-sidebar{padding-top:10px;}

#secondary-main{width:49%; float:left;}
#sidebar{width:49%; float:right;}

#tertiary-main{width:60%; float:left;}
#tertiary-sidebar{width:39%; float:right;}
.tertiary-feature{padding:0 !important;}

#body-bg{  
	padding:30px;
	float:left;
	background-size:cover;
	background-repeat:no-repeat;
	background-position: bottom;}

/* #Footer
================================================== */

#footer-container{background:#002046; color:#fff; padding:0 30px;}
#footer{ margin-bottom:5px;}

#copyright{}

/* #Mobile
=================================================== */
@media only screen and (max-width: 768px) { 

	#header-feature{position:relative; width:50%;}
	#secondary-main, #sidebar, #tertiary-main, #tertiary-sidebar{width:100%; float:none;}
	#body-bg{background-image:none !important; float:none;}
	#secondary-logo{width:100%;}
	#footer-container{margin-top:-2px; padding-bottom:10px;}
	.hide-on-mobile{display:none;}
	.hide-on-desktop{display:block;}
	
	#mobile-dropdown-button{display:block; padding:10px; width:90%; margin:0 auto; cursor:pointer; font-weight:bold; color:#000000; background:#ffffff; position:relative;}
	#mobile-dropdown{display:none; z-index:5; width:100%; position:absolute; }
	#mobile-dropdown a{display:block; color:#ffffff; font-style: normal; width:100%; padding:8px 25px; text-decoration:none;}
	#mobile-dropdown>ul{list-style:none; padding:0; background:#002046; width:90%; margin:0 auto; box-shadow: 1px 1px 4px #536b88; }
	#mobile-dropdown a:hover{background-color:#013a7d; }
	#mobile-dropdown ul>li>ul {list-style:none; padding-left:0;}
	#mobile-dropdown ul>li>ul a{padding-left:50px;}
	#mobile-dropdown ul>li>ul>li>ul a{padding-left:70px;}
}