body {
	margin: 0px;
	background-color: #f3efdf;
}

#toparea {
	margin: 0px;
	overflow: hidden;
	position: relative;
}

#topAreaSpiralContainer {
	position: absolute;
	width: 100%;
	height: 1000px;
	background-color: #9dac7a;
	z-index: -1;
	overflow:hidden;
}

#topAreaSpiral {
	background-image: url(../img/spiral-giant.png);
	background-position: center center;
	position:absolute;
	left: -50%;
	top: -150%;
	width: 200%;
	height:400%;
	animation-name: spiral-rotate;
	animation-duration: 40s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.gecko #topAreaSpiral {
		background-image: url(../img/spiral.svg);

}

#midvoid #topAreaSpiral {
	top: -250%;
}

@keyframes spiral-rotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

#nav {
	margin:0px;
	padding:0px;
	width:100%;
	background-color: #f3efdf;
	height: 60px;
	text-decoration: none;
}

#nav ul {
	margin: 0px auto;
	padding-top: 10px;
	padding-right: 20px;
	max-width: 1300px;
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;


}

#nav li {
	display:inline;
	padding:0px;
	text-align: center;
	text-decoration: none;
}

#nav a {
	text-decoration: none;	
}

#nav a .dimmed:hover {
	color: #a29d8e;
}



#nav .dimmed {
	color: #7b8e55;
	
	transition: color .2s linear;
}

#nav .mega-dimmed {
	color: #e8e2d0;
	transition: color .2s linear;
}

#nav h3 {
	font-size: 10px;
	line-height: 14px;
	margin:0px;
	padding-bottom: 0px;
	font-family: ccchatterboxitalic;
	font-weight: normal;
}

#nav h1 {
	font-size: 18px;
	font-family: tradegothiccondensed;
	font-weight: normal;
	margin:0px;
	padding: 0;
	line-height: 28px;

}

.skunkapeSmall {
	height:32px;
}

@media screen and (min-width: 1300px) {



	
	#nav {
		height: 100px;
	}

	#nav ul {
		padding-top: 25px;
	}

	#nav h1 {
		font-size: 28px;
	}
	
	#nav h3 {
		font-size: 12px;
		line-height: 14px;
		padding-bottom: 7px;
	}
	
	.skunkapeSmall {
		height:44px;
	}

	.navArrowInline {
		display: block;
	}
	
}

#navarrowContainer {
	max-width:1300px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	display: block;
}

#navArrow {
	width:176px;
	height: 21px;
	background-image: url(../img/nav-arrow.png);
	background-size: contain;
	margin-left: 180px;
}

.navArrowInline {
	position: relative;
	background-image: url(../img/nav-arrow.png);
	background-size: contain;
	width: 176px;
	height: 21px;
	margin-left: auto;
	margin-right: auto;
	top: 25px;
	display: none;
	left: 0;
	right: 0;
	text-align: center;
	transition: top .2s ease-in-out;
}

@media screen and (min-width: 1300px) {
	.navArrowInline {
		display: block;
	}
}

.dimmed .navArrowInline {
	top: 0px;
}

.dimmed:hover .navArrowInline {
	top: 18px;
}

#logoBox {
	height: 850px;
	width: 100%;
	text-align: center;
	font-weight: normal;
	font-family: ccchatterboxitalic;
	font-size: 24px;
}

#buttonFAQ {
	font-weight: normal;
	font-family: ccchatterboxitalic;
	font-size: 24px;
	text-align: center;
	padding-bottom: 50px;
	border-bottom: none;
}

#buttonFAQ li {
		padding-left: 20px;
		padding-right: 20px;
		border-bottom: none;
}

#buttonFAQ a:link, #buttonFAQ a:visited  {
	color: black;
	text-decoration: none;
	border-bottom: none;
	font-family: ccchatterboxbolditalic;
}

#logoSaveTheWorld {
	width: 946px;
	height: 634px;
	background-image: url(../img/logo-savetheworld.png);
	background-size: contain;
	align-content: center;
	margin: 0 auto;
}

#mainContent {

	background-color:  #f3efdf;

}

#trailerBox {
	max-width: 1140px;
    max-height: 640px;
	height: 44vw;
	width: 77vw;
	background-color: white;
	margin: 0 auto;
	transform: rotate(-1deg);
	position:relative;
	top: -50px;
	background-image: url(../img/trailer-thumb.jpg);
	background-size: cover;
	background-position: center;
	border: 10px solid white;
	transform-origin: center center;
	box-shadow: 0px 5px 8px 0px rgba(129,87,62,.5);

	
	transition: transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#trailerBox:hover {
	transform: scale3d(1.1, 1.1, 1.1) rotate(1deg);
	box-shadow: 0px 25px 15px -15px rgba(129,87,62,.5);

}

#trailerBox.casefile {
	background-image: url(../img/casefile-main-thumb.jpg);
}

.copyBlock {
	width: 800px;
	margin: 0 auto;
	font-family: tradegothic;
	font-size: 22px;
	font-weight: normal;
	line-height: 32px;
	//-webkit-text-fill-color: transparent;
	//background: -webkit-linear-gradient(transparent, transparent), url(../img/distress.jpg) top center / 50% auto repeat;
	//-webkit-background-clip: text;
}

.copyBlock strong, .copyBlock h3 {
	font-family: tradegothicbold;
	font-weight: normal;
}

.copyBlock h1 {
	font-family: ccchatterboxitalic;
	font-weight: normal;
	font-size: 32px;

}


.copyBlock h2 {
	font-family: ccchatterboxitalic;
	font-weight: normal;
	font-size: 24px;
	padding-top: 20px;
}

.copyBlock a:link, .copyBlock a:visited {
	text-decoration:none;
	font-family: tradegothicbold;
	color: #c29500;
	border-bottom: 2px dotted #e7b91e;
}

.copyBlock a:hover {
	color: black;
	border-bottom: 2px solid #e7b91e;

}

a:link.noborder, a:visited.noborder, a:hover.noborder {
	border-bottom: none;
}


.linkimg {
	max-width: 800px;
	margin: 20px 0px;
	transition: transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	border-bottom: none;
	

}

.linkimg a:link, .linkimg a:visited, .linkimg a:hover {
	border-bottom: none;
}	

.linkimg:hover {
	transform: scale3d(1.1, 1.1, 1.1) rotate(-1deg);
	box-shadow: 0px 25px 15px -15px rgba(129,87,62,.5);
	border-bottom: none;
}

ul.purchaseButtons {
    padding-left: 0;
	padding-inline-start:0px;
	text-align: center;
	margin-top: 5px;
}

.purchaseButtons li {
	display:inline-block;
	background-color: #e7b91e;
	margin: 20px;
	padding: 10px 20px;
	border-radius: 10px;
	box-shadow: 0px 10px 15px rgba(51,76,0,.5);
	transition: transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transform-origin: center center;

}



.purchaseButtons li:hover {
	transform: scale3d(1.25, 1.25, 1.25);
	background-color: white;
		cursor: pointer;
}

#topButtons a:link, #topButtons a:visited  {
	color: black;
}


.purchaseButtons #comparison1thumb {
	background-image: url(../img/comparison1_old.jpg);
	background-position: center center;
	width: 100px;
	height: 90px;
	background-size: cover;
}

.purchaseButtons #comparison1thumb:hover {
	background-image: url(../img/comparison1_new.jpg);
}

.purchaseButtons #comparison2thumb {
	background-image: url(../img/comparison2_old.jpg);
	background-position: center center;
	width: 100px;
	height: 90px;
	background-size: cover;
}

.purchaseButtons #comparison2thumb:hover {
	background-image: url(../img/comparison2_new.jpg);
}

.purchaseButtons #comparison3thumb {
	background-image: url(../img/comparison3_old.jpg);
	background-position: center center;
	width: 100px;
	height: 90px;
	background-size: cover;
}

.purchaseButtons #comparison3thumb:hover {
	background-image: url(../img/comparison3_new.jpg);
}



#comparison2, #comparison3 {
	display: none;
}

#midvoid {
	position: relative;
	overflow: hidden;
}



#midvoidContainer {
	width: 820px;
	margin: 0 auto;
	padding-top: 50px;
	padding-bottom:10px;
}

#midvoidContainer .cocoen {
	width: 800px;
}

#midvoidInnerContainer {
	border: 10px solid white;
	box-shadow: 0px 10px 15px rgba(51,76,0,.5);

}

.episodeArt {
	max-width: 1300px;
	display:block;
	width: 95vw;
	margin: 0 auto;
}

.skunkapeSmall.footer {
	height:44px;
}

#nav.footer {
	padding-top: 40px;
}

#nav.footer ul {
width: 800px;
padding: 0px;
}

#nav.footer h3 {
	text-align: right;
	padding-top: 7px;
}


#rating {
	margin: 30px auto;
	width: 200px;
	height: 80px;
	font-family: tradegothic;
	font-size: 12px;
	padding: 8px;
	border: 1px solid black;
	background-color: white;
	text-decoration: none;
	color: black;
}

#rating img {
	float: left;
	margin-right: 10px;
}

#rating_text {
	padding: 10px;

}


.fancybox-content {
	border-radius: 15px;
	border: 4px solid black;
	filter: drop-shadow(2.5px 4px 0px #000000);
}


.fancybox-iframe {
	border-radius: 11px;
}

.fancybox-caption {
	font-family: ccchatterboxitalic;
	font-size: 20px;
}

.fancybox-infobar {
	font-family: ccchatterboxbolditalic;
}

.fancybox-image {
	border-radius: 11px;
}