/* ===========================================
	Main Navigation small screen
============================================== */



#mainmenu-smallscreen-items {
	position:absolute;
	right:0;
	display: none;
	width: 100%;
	height:100vh;
	padding: 40px 0 0 30px;
	background-color: rgba(0, 0, 0, 1);
	list-style: none;
	z-index: 100000;
	}


#mainmenu-smallscreen-button{
	width:40px;
	position:absolute;
	right:20px;
	top:50px;
	z-index:200000;
	}
	@media screen and (min-width: 850px) {#mainmenu-smallscreen-button {right:30px;top:50px;width:50px;}}


#mainmenu-smallscreen {
	display: block;
	}
	@media screen and (min-width: 850px) {#mainmenu-smallscreen {display: none;}}










/* ===========================================
	Main Navigation wide screen
============================================== */



#mainmenu-widescreen{
	clear:both;
	background:#ffffff;
	width:100%;
	height:120px;
	padding:30px 0 0 0;
	display:block;
	overflow:visible;
	z-index:500000;
	}
	@media screen and (min-width: 850px) {#mainmenu-widescreen {padding:25px 0 0 0;height:130px;}}
	@media screen and (min-width: 1000px) {#mainmenu-widescreen {padding:20px 0 0 0;height:140px;}}
	@media screen and (min-width: 1250px) {#mainmenu-widescreen {padding:11px 0 0 0;height:160px;}}



.mainmenu-widescreen-margin-left{
	height:100%;
	width:12%;
	float:left;
	}
	@media screen and (min-width: 850px) {.mainmenu-widescreen-margin-left {width:10%;}}


.mainmenu-widescreen-margin-right{
	height:100%;
	width:0%;
	float:left;
	}
	@media screen and (min-width: 850px) {.mainmenu-widescreen-margin-right {width:2%;}}


.mainmenu-widescreen-content{
	height:100%;
	width:88%;
	float:left;
	}
	@media screen and (min-width: 850px) {.mainmenu-widescreen-content {width:88%;}}




.mainmenu-widescreen-logo{
	height:100%;
	width:85%;
	float:left;
	padding:15px 0 10px 0;
	}
	@media screen and (min-width: 450px) {.mainmenu-widescreen-logo {width:80%;padding:5px 0 0 0;}}
	@media screen and (min-width: 850px) {.mainmenu-widescreen-logo {width:40%;padding:15px 0 0 0;}}
	@media screen and (min-width: 1000px) {.mainmenu-widescreen-logo {width:40%;padding:25px 0 0 0;}}
	@media screen and (min-width: 1250px) {.mainmenu-widescreen-logo {width:40%;padding:40px 0 0 0;}}


.mainmenu-widescreen-logo img{	
	width:80%;
	}	
	@media screen and (min-width: 450px) {.mainmenu-widescreen-logo img {width:300px;}}
	@media screen and (min-width: 850px) {.mainmenu-widescreen-logo img {width:300px;}}
	@media screen and (min-width: 1000px) {.mainmenu-widescreen-logo img {width:325px;}}
	@media screen and (min-width: 1250px) {.mainmenu-widescreen-logo img {width:400px;}}




.mainmenu-widescreen-buttons{
	height:100%;
	width:200%;
	float:left;
	padding:20px 0 0 0;
	display:none;
	}
	@media screen and (min-width: 850px) {.mainmenu-widescreen-buttons {width:60%;display:block;}}


.mainmenu-widescreen-buttons-floatright{
	float:right;
	}



.menu-item-current{
	border-top:#000 solid 2px!important;
	color: #000000!important;
	}





/* ===========================================
	Main Navigation Items
============================================== */


.navmain-item{
	float:left;
	position: relative; 
	margin: 0 0 0 10px;
	z-index:50000;
	}
	@media screen and (min-width: 850px) {.navmain-item {margin: 20px 10px 0 5px;}}
	@media screen and (min-width: 1000px) {.navmain-item {margin: 25px 20px 0 5px;}}
	@media screen and (min-width: 1250px) {.navmain-item {margin: 40px 30px 0 5px;}}

.navmain-item-button{
	padding:0 0 0 20px;
	}

.navmain-item-button a{
	display:block;
	font-family: 'Merriweather', serif;	
	font-weight:200;
	font-style: normal;
	font-size:1em;
	line-height:2em;
	border-top:#ffffff solid 1px;
	color: #666666;
	text-decoration:none;
	padding: 0 0 10px 0;
	}
	@media screen and (min-width: 850px) {.navmain-item-button a {font-size:1.2em;}}
	@media screen and (min-width: 1000px) {.navmain-item-button a {font-size:1.4em;}}
	@media screen and (min-width: 1250px) {.navmain-item-button a {font-size:1.6em;}}



.navmain-item-button a:hover,
.navmain-item-button a:focus-within {
	color: #416c71;
	border-top:#416c71 solid 1px;
	transition: color .5s;
	transition: border-top .5s;
	}
		

.navmain-item-sub {
	position:absolute;
	display: none;
	background:#edf3ed;
	padding: 5px 20px 5px 20px;
	}

.navmain-item-sub a:hover,
.navmain-item-sub a:focus-within {
	color:#000000;
	transition: color .5s;
	}
	
.navmain-item-sub ul li {
	border-bottom: 1px solid rgba( 0, 0, 0, 0.2 );
	border-top: 1px solid rgba( 0, 0, 0, 0 );
	list-style: none;
	}
	
.navmain-item-sub ul li a {
	width: 175px;
	display: block;
	padding: 15px 0 15px 0;
	font-family: 'Merriweather', serif;	
	font-weight:200;
	font-style: normal;
	font-size:.9em;
	line-height:1.5em;
	color: #205157;
	text-decoration:none;
	}
	@media screen and (min-width: 1000px) {.navmain-item-sub ul li a {font-size:1em;}}

	
.navmain-item-sub ul li:last-child {
	margin:0 0 20px 0;
	border-bottom: 1px solid rgba( 0, 0, 0, 0 );
	}


.navmainsmall-item{
	float:none;
	position: relative; 
	margin: 20px 0 0 0;
	z-index:50000;
	}
	@media screen and (min-width: 850px) {.navmainsmall-item {margin: 75px 0 0 10px;}}

.navmainsmall-item-button a{
	display:block;
	font-family: 'Merriweather', serif;	
	font-weight:200;
	font-style: normal;
	font-size:2em;
	line-height:2em;
	color:#ffffff;
	padding: 10px 0 5px 10%;	
	}
	@media screen and (min-width: 850px) {.navmainsmall-item-button a {font-size:3.5em;font-weight:300;}}

.navmainsmall-item-sub {
	display: none;
	padding: 5px 25% 5px 15%;	
	}
	
.navmainsmall-item-sub ul li {
	border-bottom: 1px solid rgba( 255, 255, 255, 0.2 );
	border-top: 1px solid rgba( 255, 255, 255, 0 );
	list-style: none;
	}

.navmainsmall-item-sub ul li a {
	width: 250px;
	display: block;
	padding: 10px 0 10px 0;
	font-family: 'Merriweather', serif;	
	font-weight:200;
	font-style: normal;
	font-size:1em;
	line-height:1.5em;
	color: #ffffff;
	text-decoration:none;
	}
	@media screen and (min-width: 850px) {.navmainsmall-item-sub ul li a {font-size:1.5em;}}

.navmainsmall-item-sub ul li:last-child {
	margin:0 0 20px 0;
	border-bottom: 1px solid rgba( 255, 255, 255, 0 );
	}