/*
	####################
	                    ####
	####################  ##
	##                ##  ####
	##  ##############  ##    ##
	##  ##            ##  ##  ##
	##  ############  ##  ##  ##
	##                ##  ##  ##
	  ################  ##    ##
	                  ##  ####
	 ###################  ##
	##                ######
	 ###################
   
	------------------------------------------------   
	Direction / Design / Code ©2018
	www.evanonearth.net
	contact@evanonearth.net
	------------------------------------------------
*/

/**************************************************
	01. Header
 **************************************************/
 
 /* HEADER */
 

	.fixedheader {
	position: fixed;
	display: block;
	top: 0;
	width: 100vw;
	height: 65px;
	background-color: #fff;
	overflow: visible;
	transition: top 0.2s ease-in-out; 
	z-index: 999;
	}
	
	@media (max-width: 1020px) {
		.fixedheader {
			left: 0;
			text-indent: 7px;
		}
	}
	
	.fixedheader-smlscrn {
	position: fixed;
	display: none;
	top: 0;
	width: 100vw;
	height: 65px;
	background-color: #fff;
	overflow: visible;
	text-indent: 7px;
	transition: top 0.2s ease-in-out; 
	z-index: 999;
	}
			
	@media (orientation: landscape) and (max-height: 600px) {
		.fixedheader-smlscrn {
			display: block;
		}
		.fixedheader {
			display: none !important;	
		} 
		
	}
	
	.hide {
	display: none;
	}
	
	span.headertitle, span.headertitle-strong {
  	font-style: normal;
  	text-align: left;
  	font-size: 11px;
  	letter-spacing: 3px;
  	line-height: 66px;
  	color: #000;
  	padding-left: 2.5vw;
  	display: inline-block;
	}
	
	span.headertitle {
	font-family: "nimbus-sans-extended", Nimbus Sans Extended, sans serif;
	font-weight: 700;
	}
	
	span.headertitle a {
	color: #272727;
	}
	
	span.headertitle a:hover {
	color: #ec5000;
	-webkit-transition: 500ms;
	-moz-transition: 500ms;
	transition: 500ms;
	}
	
	span.headertitle-strong {
	font-family: "nimbus-sans-extended", Nimbus Sans Extended, sans serif;
	font-weight: 900;
	}
	
	@media only screen and (max-width: 1020px) {
			span.headertitle, span.headertitle-strong {
				font-size: 10px;
				line-height: 67px;
				letter-spacing: 3px;
				}
			}
	@media only screen and (max-width: 899px) {
			span.headertitle, span.headertitle-strong {
				display: none;
				}
			}
			
			
	.fixedheader:after, .fixedheader-smlscrn:after {
	content: '';
	background-image: url('../img/stripededge_wht_seg.svg');
	background-size: auto 140%;
	background-position: center bottom;
	background-repeat: repeat-x;
	position: absolute;
	bottom: -20px;
	width: 100%;
	height: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 12;
	}
	
/* TOP FILL */

	#headerfill {
	position: fixed;
    top: 0px;
    height: 65px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 30px);
    background-color: #000;
	}
	
	#headerfill-tthcnews {
	position: fixed;
    top: 0px;
    height: 65px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 30px);
    background-color: #000;
	}
	
	@media only screen and (max-width: 899px) {
			#headerfill {
				width: 100vw;
				left: 0%;
    			transform: none;
			}
	}
	
	@media only screen and (max-width: 549px) {
			#headerfill-tthcnews {
				width: 100vw;
				left: 0%;
    			transform: none;
			}
	}
	
/* HEADER LOGO */

	#wowlogotype {
	background-image: url('../img/wow_logotype_8.svg');
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	top: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 230px;
	height: auto;
	}
	
	#wowlogotype a {
    width: 230px;
    height: 75px;
    display: block;
	}
	
	@media only screen and (max-width: 400px) {
		#wowlogotype {
			top: -4px;
			width: 215px;
		}
	}
	
/* SOCIAL MEDIA */

	.shareicon {
	    background-image: url('../img/share_grey.svg');
		background-size: 100% auto;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		width: 25px;
		top: 22px;
		right: 2vw;
		margin-right: 45px;
		height: 25px;
	}
	
	.shareicon:hover {
		background-image: url('../img/share_blu.svg');
		-webkit-transition: 400ms;
		-moz-transition: 400ms;
		transition: 400ms;
	}
	
	@media (max-width: 900px) {
		.shareicon {
			margin-right: 0px;
		}
	}
	
	@media (max-width: 600px) and (orientation: portrait) {
		.shareicon {
			margin-right: 1.5vw;
		}
	}
	
/* HAMBURGER*/
	
	.hamburger3_overlay {
		  position: absolute;
		  width: 48px;
		  top: 4px;
		  right: 2vw;
		  margin-right: -10px;
		  z-index: 999;
		  }
		  
		@media only screen and (max-width: 1020px) {
				.hamburger3_overlay {
					top: 4px;
					right: 1vw;
					margin-right: 0px;
					}
				}
			
	.hamburger3_overlay_1col {
		  display: none;
		  }
		
	
	.c-hamburger3 {
		  display: block;
		  position: absolute;
		  right: 0px;
		  overflow: hidden;
		  margin: 0;
		  padding: 0;
		  width: 48px;
		  height: 48px;
		  font-size: 0;
		  text-indent: -9999px;
		  appearance: none;
		  box-shadow: none;
		  border-radius: none;
		  border: none;
		  cursor: pointer;
		  transition: background 0.3s;
		}

	.c-hamburger3:focus {
		  outline: none;
		}

	.c-hamburger3 span {
		  display: block;
		  position: absolute;
		  top: 28px;
		  left: 12px;
		  right: 12px;
		  height: 3px;
		  background-color: #272727;
		  border-radius: 1px;
		}

	.c-hamburger3 span::before,
	.c-hamburger3 span::after {
		  position: absolute;
		  display: block;
		  left: 0;
		  width: 100%;
		  height: 3px;
		  background-color: #272727;
		  border-radius: 1px;
		  content: "";
		}

	.c-hamburger3 span::before {
		  top: -8px;
		}

	.c-hamburger3 span::after {
		  bottom: -8px;
		}


	.c-hamburger3--htx {
		  background-color: rgba(0, 0, 0, 0);
		}

	.c-hamburger3--htx span {
		  transition: background 0s 0.3s;
		}

	.c-hamburger3--htx span::before,
	.c-hamburger3--htx span::after {
		  transition-duration: 0.3s, 0.3s;
		  transition-delay: 0.3s, 0s;
		}

	.c-hamburger3--htx span::before {
		  transition-property: top, transform;
		}

	.c-hamburger3--htx span::after {
		  transition-property: bottom, transform;
		}

	/* active state, i.e. menu open */

	.c-hamburger3--htx.is-active {
		  background-color: rgba(0, 0, 0, 0);
		}

	.c-hamburger3--htx.is-active span {
		  background: rgba(0, 0, 0, 0);
		}

	.c-hamburger3--htx.is-active span::before {
		  top: 0;
		  transform: rotate(45deg);
		  background-color: #a0a0a0;
		}

	.c-hamburger3--htx.is-active span::after {
		  bottom: 0;
		  transform: rotate(-45deg);
		  background-color: #a0a0a0;
		}

	.c-hamburger3--htx.is-active span::before,
	.c-hamburger3--htx.is-active span::after {
		  transition-delay: 0s, 0.3s;
		}
		
	@media (max-width: 899px) {
	.hamburger3_overlay {
		  left: 1vw;
		  }
	}

	
	/* TOP NAV */

	.nav {
    width: 100vw;
    height: calc(45px + 2.5vw);
    position: fixed;
    top: 0px;
    left: 0;
    padding:0;
    margin-top: 85px;
    overflow:visible;
    z-index: 888;
	}

	.navbckgrnd {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0%;
	}
	
	.navtopbckgrnd {
		position: absolute;
		width: 100%;
		height: 45px;
		top: 0%;
		background-color: #d9bf8c;
	}
	
	.navextension {
		position: absolute;
		width: 95%;
		height: 2.5vw;
		bottom: 0%;
		background-color: #d9bf8c;
		left: 2.5%; 
	}
	
	.navnotchleft {
 	position: absolute;
 	bottom: 0;
 	left: 0;
 	width: 2.5vw;
 	height: 2.5vw;
 	overflow:hidden;
 	background-color: rgba(255,0,0,0);
  	background-image: linear-gradient(to bottom left, #d9bf8c 50%, rgba(255,0,0,0) 50%);
 	}
 
 	.navnotchright {
 	position: absolute;
 	bottom: 0;
 	right: 0;
 	width: 2.5vw;
 	height: 2.5vw;
 	overflow:hidden;
 	background-color: rgba(255,0,0,0);
  	background-image: linear-gradient(to bottom right, #d9bf8c 50%, rgba(255,0,0,0) 50%);
 	}

	.menu {
	position: relative;
	display: flex;
  	flex-direction: row;
  	flex-wrap: no-wrap;
  	justify-content: center;
  	align-items: center;
	line-height:0;
	line-height:0;
	width: 95%;
	height: 100%;
	margin: 0px auto 0px auto;
	border:0;
	overflow:visible;
	background-color: none;
	z-index: 100;
	}
	
		@media only screen and (min-width: 550px) and (max-width: 1020px) {
				.menu {
					width: 93%;
					padding-left: 18px;	
				}
			}
		
		@media only screen and (max-width: 549px) {
			.menu {
				width: 88%;	
			}
		}
	
		@media only screen and (max-width:300px) {
				.menu {
					width: 95%;	
				}
			}
			
		@media (orientation: portrait) {
			.menu {
				height: 90%;
			}
		}
	
	.menubox  {
  	position: relative;
    width: auto;
    height: 60%;
    padding-top: 1px;
    padding-left: .2%;
    padding-right: 3%;
    background-color: none;
    list-style-type: none;
    z-index: 120;
    border-top: 2px solid #272727;
    border-right: 2px solid #272727;
	}

	span.menuitem {
	font-family: "nimbus-sans-extended", Nimbus Sans Extended, sans serif;
	font-weight: 700;
  	font-style: normal;
  	text-transform: uppercase;
  	font-size: 9px;
  	letter-spacing: 1px;
  	line-height: 2;
  	color: #272727;
  	text-align: center; 
	}
	
	span.menuitem:after {
	background-image: url('../img/uparrow-red.svg');
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	content: "";
	position: absolute;
	top: 0%;
	left: 28%;
	height: 100px;
	width: 20px;
	opacity: 0;
	}
	
	span.menuitem:hover {
	color: #cb1e46;
	webkit-transition: 400ms;
	-moz-transition: 400ms;
	-o-transition: 400ms;
	transition: 400ms;	
	}
	
	span.menuitem:hover:after {
	opacity: 1;
	webkit-transition: 100ms;
	-moz-transition: 100ms;
	-o-transition: 100ms;
	transition: 100ms;
	-webkit-transition-delay: 250ms;
	-moz-transition-delay: 250ms;
	-o-transition-delay: 250ms;
	transition-delay: 250ms;	
	}
	
/* SHARE MENU */

	.sharemenu {
    width: 100vw;
    height: calc(45px + 2.5vw);
    position: fixed;
    top: 0px;
    left: 0;
    padding:0;
    margin-top: 85px;
    overflow:visible;
    z-index: 888;
	}
	
	.sharelist {
	position: relative;
	width: 180px;
	margin: 19px auto 0;
	background-color: #d9bf8c;
	z-index: 100;
	}
	
	.shareblocked {
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	width: 180px;
	margin-top: 17px;
	z-index: 99;
	}
	
	.sharebckgrnd {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0%;
	}
	
	.sharetopbckgrnd {
		position: absolute;
		width: 100%;
		height: 45px;
		top: 0%;
		background-color: #d9bf8c;
	}
	
	.shareextension {
		position: absolute;
		width: 95%;
		height: 2.5vw;
		bottom: 0%;
		background-color: #d9bf8c;
		left: 2.5%; 
	}
	
	.sharenotchleft {
 	position: absolute;
 	bottom: 0;
 	left: 0;
 	width: 2.5vw;
 	height: 2.5vw;
 	overflow:hidden;
 	background-color: rgba(255,0,0,0);
  	background-image: linear-gradient(to bottom left, #d9bf8c 50%, rgba(255,0,0,0) 50%);
 	}
 
 	.sharenotchright {
 	position: absolute;
 	bottom: 0;
 	right: 0;
 	width: 2.5vw;
 	height: 2.5vw;
 	overflow:hidden;
 	background-color: rgba(255,0,0,0);
  	background-image: linear-gradient(to bottom right, #d9bf8c 50%, rgba(255,0,0,0) 50%);
 	}
 	
/* MEDIA QUERIES */
	
	@media (min-width: 900px) {
 		.sharemenu {
			width: calc(100% - 30px);
			left: 15px;
		}
 	}
 	@media only screen and (min-width:301px) and (max-width:549px) {
				span.menuitem {
					font-weight: 600;
					letter-spacing: 2px;	
				}
	}
	@media only screen and (max-width:318px) {
				span.menuitem {
					font-weight: 600;
					font-size: 9px;
					letter-spacing: 1px;	
				}
	}
	@media only screen and (min-width: 1024px) {
		.sharelist, .shareblocked {
			margin-top: calc(1.25vw + 7px);
		}
	}
	
	@media only screen and (min-width: 1900px) {
		.nav,
		.sharemenu {
			height: calc(45px + 1vw);
		}
		.sharelist, .shareblocked {
			margin-top: calc(.5vw + 7px);
		}
		.navextension,
		.shareextension {
			height: 1vw;
			width: 98%;
			left: 1%;
		}
		.navnotchleft,
		.sharenotchleft {
			width: 1vw;
			height: 1vw;
		}
		.navnotchright,
		.sharenotchright {
			width: 1vw;
			height: 1vw;
		}
	}
	
	@media only screen and (max-width: 800px) and (orientation: portrait),
	(max-width: 900px) and (orientation: landscape) {
		.nav {
			height: calc(100vh - 85px);
		}
		.sharemenu {
			height: 65px;
		}
		.sharelist, .shareblocked {
			margin: 16px auto 0;
		}
		.navextension {
			height: 5vh;
			width: calc(100% - 10vh);
			left: 5vh;
		}
		.shareextension {
			height: 20px;
			width: calc(100% - 40px);
			left: 20px;
		}
		.navnotchleft {
			width: 5vh;
			height: 5vh;
		}
		.navnotchright {
			width: 5vh;
			height: 5vh;
		}
		.sharenotchleft,
		.sharenotchright {
			width: 20px;
			height: 20px;
		}
		.navtopbckgrnd {    
			height: calc(100% - 5vh);
		}
		.menu {
			position: relative;
			display: flex;
			flex-direction: column;
			flex-wrap: no-wrap;
			justify-content: flex-start;
			align-items: center;
			margin-top: 2%;
		}
		.menubox  {
			height: 9%;
			width: 100%;
			margin-top: 1vh;
			border-right: none;
			border-top: none;
			border-bottom: 2px solid #272727;
		}
		#menu1 {
			margin-top: 2vh;
		}
		span.menuitem {
			font-size: 11px;
		}
		span.menuitem:after {
			background-image: url('../img/uparrow-272727.svg');
			background-size: auto 100%;
			background-position: center;
			background-repeat: no-repeat;
			content: "";
			position: absolute;
			bottom: 0%;
			left: 72%;
			height: 94%;
			width: 35px;
			opacity: 1;
			top: auto;
		}
	
	}
	
	@media only screen and (max-width: 800px) and (orientation: portrait) {
		.menubox  {
			min-height: 40px;
			flex: 1 0 auto;
		}
	}
	
	@media only screen and (max-width: 900px) and (orientation: landscape)   {
		.menubox  {
			height: 9%;
			width: 100%;
			margin-top: .5%;
			border-right: none;
			border-top: none;
			border-bottom: 2px solid #272727;
		}
		#menu1 {
			margin-top: 0;
		}
	}
	
	@media only screen and (max-width: 800px) and (orientation: landscape) {
		.menubox  {
			min-height: 40px;
		}
	}
	
	@media (min-width: 900px) {
		.nav {
		width: calc(100vw - 30px);
		left: 15px;
		}
	}
	
	@media (max-height: 600px) and (orientation: landscape) {
		.menu {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			align-items: flex-start;
			-webkit-display: flex;
			-webkit-flex-direction: row;
			-webkit-flex-wrap: wrap;
			-webkit-justify-content: center;
			-webkit-align-items: flex-start;
			height: 90%;
			padding-left: 0;
		}
		.menubox {
			flex-grow: 0;
			flex-shrink: 1;
			flex-basis: auto;
			-webkit-flex-grow: 0;
			-webkit-flex-shrink: 0;
			-webkit-flex-basis: auto;
			width: 45%;
			min-height: 65px;
			margin-top: 0;
		}
		.menu1 {
			margin-top: 0;
		}
		span.menuitem:after {
			left: 85%;
		}
	}
	@media (max-width: 550px) and (orientation: landscape) {
		span.menuitem {
			letter-spacing: 1px;
		}
		span.menuitem:after {
			left: 91%;
		}
	}
	
	@media (max-height: 400px) and (orientation: landscape) {
		.menubox {
			min-height: 58px;
		}
	}
	
	@media (max-height: 350px) and (orientation: landscape) {
		.menubox {
			min-height: 45px;
		}
	}
	
	/* SECTION DIVIDER */

	.dividerstripe {
		background-size: auto 140%;
		background-position: center bottom;
		background-repeat: repeat-x;
		position: absolute;
		width: 100%;
		height: 20px;
		left: 50%;
		transform: translateX(-50%);
		overflow: hidden;
		}
		
	.stripe-f5f4f3 {
		background-image: url('../img/stripededge_f5f4f3_seg.svg');
		top: 0px;
		z-index: 10;
	}
	
	.stripe-f9f9f9 {
		background-image: url('../img/stripededge_f9f9f9_seg.svg');
		z-index: 10;
	}
	
	.stripe-ffffca {
		background-image: url('../img/stripededge_ffffca_seg.svg');
		z-index: 10;
	}
	
	.stripe-dbf1ff {
		background-image: url('../img/stripededge_dbf1ff_seg.svg');
		z-index: 10;
	}