body { position: absolute; display: block; margin: 0; padding: 0; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; border: none; overflow: auto; color: #eee; font-family: 'Comic Neue', cursive; font-size: 1.2em; }
h1,h2,h3,h4,h5,h6 { font-family: 'Source Sans Pro', sans-serif; }
body div { position: absolute; display: block; z-index: 0; top: 0; width: 50%; height: 100%; opacity: 1.0; }
p { text-align: center; margin: 0; font-size: 3.2em; }
body > div:first-of-type { left: 0; /* background: url(../images/lighthouse-bigger.jpg) #202f4e bottom left no-repeat; background-size: 100% auto; */ 
background-color: #1f2e4b; 
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#374151+0,374151+10,343e4e+15,202f4e+25,202f4e+77,e6eaeb+86,e6eaeb+91,202f4e+100 */
	background: rgb(55,65,81); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(55,65,81,1) 0%, rgba(55,65,81,1) 10%, rgba(52,62,78,1) 15%, rgba(32,47,78,1) 25%, rgba(32,47,78,1) 77%, rgba(230,234,235,1) 86%, rgba(230,234,235,1) 91%, rgba(32,47,78,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(55,65,81,1) 0%,rgba(55,65,81,1) 10%,rgba(52,62,78,1) 15%,rgba(32,47,78,1) 25%,rgba(32,47,78,1) 77%,rgba(230,234,235,1) 86%,rgba(230,234,235,1) 91%,rgba(32,47,78,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(55,65,81,1) 0%,rgba(55,65,81,1) 10%,rgba(52,62,78,1) 15%,rgba(32,47,78,1) 25%,rgba(32,47,78,1) 77%,rgba(230,234,235,1) 86%,rgba(230,234,235,1) 91%,rgba(32,47,78,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#374151', endColorstr='#202f4e',GradientType=0 ); /* IE6-9 */
}
body > div:last-of-type { right: 0; background: none; background-color: #1f2e4b; 
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#374151+0,374151+10,343e4e+15,202f4e+25,202f4e+77,e6eaeb+86,e6eaeb+91,202f4e+100 */
	background: rgb(55,65,81); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(55,65,81,1) 0%, rgba(55,65,81,1) 10%, rgba(52,62,78,1) 15%, rgba(32,47,78,1) 25%, rgba(32,47,78,1) 77%, rgba(230,234,235,1) 86%, rgba(230,234,235,1) 91%, rgba(32,47,78,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(55,65,81,1) 0%,rgba(55,65,81,1) 10%,rgba(52,62,78,1) 15%,rgba(32,47,78,1) 25%,rgba(32,47,78,1) 77%,rgba(230,234,235,1) 86%,rgba(230,234,235,1) 91%,rgba(32,47,78,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(55,65,81,1) 0%,rgba(55,65,81,1) 10%,rgba(52,62,78,1) 15%,rgba(32,47,78,1) 25%,rgba(32,47,78,1) 77%,rgba(230,234,235,1) 86%,rgba(230,234,235,1) 91%,rgba(32,47,78,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#374151', endColorstr='#202f4e',GradientType=0 ); /* IE6-9 */
}
.altGrad1 {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#202f4e+25,202f4e+77,e6eaeb+86,e6eaeb+91,202f4e+100 */
	background: rgb(32,47,78); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(32,47,78,1) 25%, rgba(32,47,78,1) 77%, rgba(230,234,235,1) 86%, rgba(230,234,235,1) 91%, rgba(32,47,78,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(32,47,78,1) 25%,rgba(32,47,78,1) 77%,rgba(230,234,235,1) 86%,rgba(230,234,235,1) 91%,rgba(32,47,78,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(32,47,78,1) 25%,rgba(32,47,78,1) 77%,rgba(230,234,235,1) 86%,rgba(230,234,235,1) 91%,rgba(32,47,78,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#202f4e', endColorstr='#202f4e',GradientType=0 ); /* IE6-9 */
}
header { position: relative; display: block; z-index: 5; text-align: center; padding: 0.45rem; width: calc(100% - 20px); height: calc(5.5em - 22px); background: url(../images/pharos-banner-red.png) rgb(199, 1, 24) center left no-repeat; background-size: auto 100%; border-bottom: 2px solid #500; overflow: visible; 
	-o-box-shadow: 0px 15px 10px -15px rgba(0,0,0,0.75);
	-ms-box-shadow: 0px 15px 10px -15px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 15px 10px -15px rgba(0,0,0,0.75);
	-webkit-box-shadow: 0px 15px 10px -15px rgba(0,0,0,0.75);
	box-shadow: 0px 15px 10px -15px rgba(0,0,0,0.75);
}
.oldHeader { background-color: #bbb; /* border-bottom: 2px solid #444; */
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c70118+0,c70118+20,c70118+20,b0b0b0+25,b0b0b0+75,c70118+80,c70118+80,c70118+100 */
	background: rgb(199,1,24); /* Old browsers */
	background: -moz-linear-gradient(left, rgba(199,1,24,1) 0%, rgba(199,1,24,1) 20%, rgba(199,1,24,1) 20%, rgba(176,176,176,1) 25%, rgba(176,176,176,1) 75%, rgba(199,1,24,1) 80%, rgba(199,1,24,1) 80%, rgba(199,1,24,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(199,1,24,1) 0%,rgba(199,1,24,1) 20%,rgba(199,1,24,1) 20%,rgba(176,176,176,1) 25%,rgba(176,176,176,1) 75%,rgba(199,1,24,1) 80%,rgba(199,1,24,1) 80%,rgba(199,1,24,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(199,1,24,1) 0%,rgba(199,1,24,1) 20%,rgba(199,1,24,1) 20%,rgba(176,176,176,1) 25%,rgba(176,176,176,1) 75%,rgba(199,1,24,1) 80%,rgba(199,1,24,1) 80%,rgba(199,1,24,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c70118', endColorstr='#c70118',GradientType=1 ); /* IE6-9 */
	-o-box-shadow: 0 30px 12px -15px rgba(0,0,0,0.75);
	-ms-box-shadow: 0 30px 12px -15px rgba(0,0,0,0.75);
	-moz-box-shadow: 0 30px 12px -15px rgba(0,0,0,0.75);
	-webkit-box-shadow: 0 30px 12px -15px rgba(0,0,0,0.75);
	box-shadow: 0 30px 12px -15px rgba(0,0,0,0.75);
}
header div { position: absolute; display: block; z-index: 1; }
header > div:first-of-type { top: 12px; left: 102px; width: calc(100% - 102px); height: 24px; background: url(../images/light-beam2.png) transparent center left no-repeat; background-size: cover; 
	transform-origin: left center; 
	-webkit-animation: searchlight 10s infinite linear;
	-moz-animation: searchlight 10s infinite linear;
	-o-animation: searchlight 10s infinite linear;
	-ms-animation: searchlight 10s infinite linear;
	animation: searchlight 10s infinite linear;
}
header > div:last-of-type { z-index: 2; min-width: 1px; max-width: 11px; min-height: 1px; max-height: 11px; border-radius: 5px; background: none; background-color: rgba(0, 0, 0, 0); background-color: yellow; border: none; /* border-radius: 5px; */
	transition: all 10s ease-in-out;
	-moz-transition: all 10s ease-in-out;
	-webkit-transition: all 10s ease-in-out;
	-webkit-animation: searchbeam-landscape 10s infinite ease-in-out;
	-moz-animation: searchbeam-landscape 10s infinite ease-in-out;
	-o-animation: searchbeam-landscape 10s infinite ease-in-out;
	-ms-animation: searchbeam-landscape 10s infinite ease-in-out;
	animation: searchbeam-landscape 10s infinite ease-in-out;
}
header h1 { position: relative; z-index: 2; margin: 0; text-transform: uppercase; font-size: 4rem; text-shadow: -2px -2px 2px #777, 2px 2px 2px #444, 0 7px 7px rgba(0,0,0,0.75); letter-spacing: 2.25px; white-space: nowrap; color: #eee; /* color: #202f4e; */ }
header img { background: url(images/clientLogo_header.png) transparent top left no-repeat; }
main { position: absolute; display: block; z-index: 1; text-align: center; width: 100%; height: calc(100% - (6.4rem + 32px)); overflow: hidden; }

/* --- */

aside,main aside { display: none; }

main fieldset { position: absolute; display: block; text-align: center; z-index: 5; padding: 0.667em 0; top: 80%; left: 10%; width: 80%; min-height: 22px; background: url(../images/blank-long-red.png) #000 center center no-repeat; background-size: calc(100% - 8px) calc(100% - 8px); border: 5px outset #888; border-radius: 32px; transform-origin: 0 500%; transform: rotateX(-90deg); transition: all 2s; }
main fieldset legend { position: absolute; display: inline-block; z-index: 6; padding: 10px; top: -50%; left: 0; background: url(../images/burst.png) transparent center left no-repeat; background-size: 80% 2.6em; color: #fff; font-weight: bolder; text-shadow: 0 0 1px #000, 0 0 2px #000, 0 2px 2px #444; font-size: 0; transform: rotate(0deg); overflow: visible; transition: all 3s; }
main fieldset.showMe { transform: rotateX(0deg); transition: all 2s;
	box-shadow: 0 20px 15px -15px rgba(0,0,0,0.75);
	-o-box-shadow: 0 20px 15px -15px rgba(0,0,0,0.75);
	-moz-box-shadow: 0 20px 15px -15px rgba(0,0,0,0.75);
	-webkit-box-shadow: 0 20px 15px -15px rgba(0,0,0,0.75);
}
main fieldset.showMe legend { font-size: 1em; transform: rotate(-3deg); transition: all 1.5s; }

main fieldset p { position: absolute; display: none; padding: 10px 0; top: 0; left: 0; width: 100%; height: calc(100% - 20px); background-color: rgba(244,0,0,0.8); border-radius: 32px; font-family: 'Source Sans Pro', sans-serif; font-size: 1.2em; color: #fff; text-shadow:  0 0 1px #000, 0 0 2px #000, 0 2px 2px #444; }
main fieldset label { position: relative; display: none; margin: 0 1% 0 10%; width: auto; color: #fff; text-shadow:  0 0 1px #000, 0 0 2px #000, 0 2px 2px #444; }
main fieldset input { display: none; border-radius: 16px; padding: 4px 10px; width: 50%; }
main fieldset button { display: none; margin: 0 0 0 0.5em; padding: 3px 12px 5px 12px; background-color: #0a0; border: 3px outset #070; border-radius: 10px; color: #ff0; text-shadow: 0 0 1px #ff0, -1px 0 1px #080, 1px 0 1px #0c0; }
main fieldset button.closeSub { position: absolute; display: block; top: -33%; right: 2rem; width: 2rem; height: 2rem; background: url(../images/closeSub.png) #222 center center no-repeat; background-size: 85%; border-radius: 1rem; border: 4px solid #ddd; border-radius: 1rem; }
main fieldset.subscribe label { display: inline-block; }
main fieldset.subscribe input { display: inline-block; }
main fieldset.subscribe button.subscribe { display: inline-block; }

main fieldset.unsubscribe p { display: inline-block; }
main fieldset.unsubscribe p button.unsubscribe { display: inline-block; vertical-align: top; }

/* --- */

main div.aspect32 { position: absolute; display: block; z-index:2; opacity: 1.0; box-sizing: border-box; margin: 0; padding: 2%; transform: translate(-50%, -50%); top: 50%; left: 50%; width: 85vh; height: 85vh; /* resize: horizontal; */ overflow: auto; max-width: 100%; background: none; }

/* - - - */

h2 { position: absolute; display: block; margin: 0; padding: 0; bottom: -12%; left: 66%; font-family: 'Comic Neue', cursive; font-size: xx-large; font-weight: bold; color: #ee0; text-shadow: 0 0 1px #ee0, 0 0 2px #ee0, 0 0 3px #ee0, 0 0 4px #000; }
article { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; }
dl { position: relative; display: block; vertical-align: top; text-align: left; margin: 0 calc(20vw - 1vh); padding: 2vh 10vw; width: 40vw; background-color: #000; background-color: rgba(0,0,0,0.85); list-style-type: none; }
dh { position: relative; display: block; float: left; width: 48%; background-color: #005; margin: 0.5%; }
dt { position: relative; display: block; float: left; vertical-align: top; padding: 0.5em 0 0 0; width: 48%; font-size: x-large; font-weight: bold; text-shadow: 0 0 1px #eee, 0 0 2px #eee; }
dd { position: relative; display: block; float: left; vertical-align: top; width: 48%; margin: 0; padding: 0.5em 0 0 0; width: 50%; clear: none; }
img { position: relative; display: block; float: left; margin: 0 0 1em 0; padding: 0 5% 0 0; width: 45%; height: auto; }
ul { position: relative; display: inline-block; margin: 2vh 10vw 10vh 10vw; padding: 2vw; width: 56vw; background-color: #000; background-color: rgba(0,0,0,0.85); }
li { position: relative; display: block; vertical-align: top; float: left; margin: 0 0 0 0.5em; width: calc((100% / 3) - 0.5em); min-height: calc(60vw / 3); background-color: #000; }
li img { position: absolute; display: block; float: none; margin: 0;padding: 0; top: 50%; width: 100%;height: auto; transform: translateY(-50%); }
ul span { position: relative; display: block; text-align: center; margin: 0 0 0.5em 0; }
li:first-of-type { background-color: #eee; }
button.backHome { position: absolute; display: block; top: 0.75em; right: 1em; width: 6em; height: 6em; background: url(../images/convictor-clientLogo.png) #000 center center no-repeat; background-size: 85%; border-radius: 3em; border-color: #f00; color: #ee0; text-shadow: 0 1px 1px #333; }

/* - - - */

section { position: relative; z-index: 2; box-sizing: border-box; margin-left: calc((6.625/10.125) * 25%); width: calc((6.625/10.125) * 100%); height: 100%; /* background-color: #500; */ background: url(../images/1-convictor-unhinged.jpg) #000 center center no-repeat; background-size: cover; border: 2px outset #200; overflow: hidden; 
	box-shadow: 0 30px 12px -15px rgba(0,0,0,0.75);
	-o-box-shadow: 0 30px 12px -15px rgba(0,0,0,0.75);
	-ms-box-shadow: 0 30px 12px -15px rgba(0,0,0,0.75);
	-moz-box-shadow: 0 30px 12px -15px rgba(0,0,0,0.75);
}

section.present { background-image: none; overflow: hidden; }

section figure { position: absolute; display: block; z-index:-2; opacity: 0.0; margin: 0; padding: 0; top: 0; left: 0; width: 100%; height: 100%; box-shadow: none; -o-box-shadow: none; -ms-box-shadow: none; -moz-box-shadow: none; background-size: contain; background-position: center center; background-repeat: no-repeat; background-color: transparent; border: none; 
	transition: opacity 5s;
	-moz-transition: opacity: 5s;
	-webkit-transition: opacity: 5s;
}

section figure.showCover { z-index: 2; opacity: 1.0; 
	transition: opacity 5s;
	-moz-transition: opacity: 5s;
	-webkit-transition: opacity: 5s;
}

img.convictor { margin: 25px auto; width: 80%; height: auto; }
/* 10 and 1/8 inches by 6 and 5/8 inches (25.7 cm x 16.8 cm) */
nav { position: absolute; display: inline-block; z-index: 2; top: 2rem; right: 2rem; bottom: 2rem; width: 25%; height: calc(100% - 4rem); border: 2px solid transparent; }
nav.gallery { display: none; opacity: 0; margin-top: 1.5vw; right: auto; left: 2em; overflow: hidden; }
nav p { margin: 0.5vw 0; text-transform: uppercase; font-size: 2.4rem; text-shadow: 0 0 2px #444, 0 2px 2px #444; }
nav button { margin-bottom: 2vw; width: 25vw; height: calc(25vw * (50/152)); 
	box-shadow: 0px 20px 10px -10px rgba(0,0,0,0.75);
	-o-box-shadow: 0px 20px 10px -10px rgba(0,0,0,0.75);
	-ms-box-shadow: 0px 20px 10px -10px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 20px 10px -10px rgba(0,0,0,0.75);
}
nav button:hover { margin-top: 4px; margin-bottom: calc(2vw - 4px); }
nav button.icd { background: url(../images/20201006-announcement.jpg) #000 center center no-repeat; background-size: cover; border: none; }
nav button.kickstarter { background: url(../images/kickstarter-now-live.jpg) #000 center center no-repeat; background-size: cover; border: none; }
nav button.indiegogo { background: url(../images/indiegogo-now-live.jpg) #000 center center no-repeat; background-size: cover; border: none; }
nav button.convictor { background: url(../images/convictor-button.jpg) #000 center center no-repeat; background-size: cover; border: none; }
nav button.shop { background: url(../images/shop-button.jpg) #000 center center no-repeat; background-size: cover; border: none; }
nav button.kofi { background: url(../images/ko-fi.png) #000 center center no-repeat; background-size: cover; border: none; }
nav button.ksresurge { background: url(../images/resurgence-kickstarter.jpeg) #000 center center no-repeat; background-size: cover; border: none; }
nav button.ksunhinge { background: url(../images/unhinged-kickstarter.jpg) #000 center center no-repeat; background-size: cover; border: none; }
/* Updated L&R Margins 10/01 From 1vw to 0.25vw */
nav button.social { margin: 0 0.25vw; height: calc(20vw * (25/152)); width: calc(20vw * (25/152)); border-radius: 50%; background-position: center center; background-repeat: no-repeat; background-color:transparent; background-size: contain; border: 2px solid #888; }
nav button.social:hover { margin-top: 0; margin-bottom: 2vw; border-color: #eee; }
nav button.social.facebook { background-image: url(../images/social-facebook.png); }
nav button.social.instagram { background-image: url(../images/social-instagram.png); }
nav button.social.twitter { background-image: url(../images/social-twitter.png); }
nav button.social.twitchtv { background-image: url(../images/social-twitchtv.png); }
nav button.social.youtube { background-image: url(../images/social-youtube.png); }
nav button.social.mailinglist { background-image: url(../images/social-mailing_list.png); }
.zzz { z-index: 2; box-sizing: border-box; overflow: hidden; position: relative; }
nav.mainNav button.convictorComics { display: none; }

footer { position: absolute; display: block; bottom: 0; left: 0; width: 100%; height: 32px; background-color: #bbb; border-top: 2px solid #444; color: #500; 
	box-shadow: 0px -15px 10px -15px rgba(0,0,0,0.75);
	-o-box-shadow: 0px -15px 10px -15px rgba(0,0,0,0.75);
	-ms-box-shadow: 0px -15px 10px -15px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px -15px 10px -15px rgba(0,0,0,0.75);
}
footer p { font-family: 'Source Sans Pro', sans-serif; font-size: 24px; color: #eee; letter-spacing: 7px; text-transform: uppercase; text-shadow: 0 -2px 1px #888,0 2px 2px #444; }
footer div { position: absolute; display: block; margin-top: 100%; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; overflow: hidden; background-color: #500; color: #eee; 
	-o-transition: margin 1s ease-in-out;
	-ms-transition: margin 1s ease-in-out;
	-moz-transition: margin 1s ease-in-out;
	-webkit-transition: margin 1s ease-in-out;
	transition: margin 1s ease-in-out;
}
footer.activate div { margin-top: 0;
	-o-transition: margin 3s ease-in-out;
	-ms-transition: margin 3s ease-in-out;
	-moz-transition: margin 3s ease-in-out;
	-webkit-transition: margin 3s ease-in-out;
	transition: margin 3s ease-in-out;
}
footer div span { position: relative; display: inline-block; margin: 0 0 0 110%; width: auto; font-family: 'Source Sans Pro', sans-serif; font-size: 24px; letter-spacing: 7px; text-transform: uppercase; text-shadow: 0 -2px 1px #ccc, 0 2px 2px #eee; white-space: nowrap; 
	-o-transition: margin 1s ease-in-out;
	-ms-transition: margin 1s ease-in-out;
	-moz-transition: margin 1s ease-in-out;
	-webkit-transition: margin 1s ease-in-out;
	transition: margin 1s ease-in-out;
}
footer.activate div span { margin-left: -150%; 
	-o-transition: margin 32s ease-in-out;
	-ms-transition: margin 32s ease-in-out;
	-moz-transition: margin 32s ease-in-out;
	-webkit-transition: margin 32s ease-in-out;
	transition: margin 32s ease-in-out;
}

@-webkit-keyframes searchlight {
	0% { -webkit-transform: rotateY(0deg); }
	100% { -webkit-transform: rotateY(360deg); }
}
@-moz-keyframes searchlight {
	0% { -moz-transform: rotateY(0deg); }
	100% { -moz-transform: rotateY(360deg); }
}
@-o-keyframes searchlight {
	0% { -o-transform: rotateY(0deg); }
	100% { -o-transform: rotateY(360deg); }
}
@-ms-keyframes searchlight {
	0% { -ms-transform: rotateY(0deg); }
	100% { -ms-transform: rotateY(360deg); }
}
@-keyframes searchlight {
	0% { transform: rotateY(0deg); }
	100% { transform: rotateY(360deg); }
} 

@-webkit-keyframes searchbeam-landscape {
	0% { top: 20px; left: 98px; width: 1px; height: 1px; opacity: 0.5; }
	25% { top: 15px; left: 93px; width: 11px; height: 11px; opacity: 1.0; }
	50% { top: 20px; left: 98px;  width: 1px; height: 1px; opacity: 0.5; }
	75% { top: 15px; left: 93px; width: 11px; height: 11px; opacity: 0.0; }
	100% { top: 20px; left: 98px; width: 1px; height: 1px; opacity: 0.5; }
}
@-moz-keyframes searchbeam-landscape {
0% { top: 20px; left: 98px; width: 1px; height: 1px; opacity: 0.5; }
25% { top: 15px; left: 93px; width: 11px; height: 11px; opacity: 1.0; }
50% { top: 20px; left: 98px;  width: 1px; height: 1px; opacity: 0.5; }
75% { top: 15px; left: 93px; width: 11px; height: 11px; opacity: 0.0; }
100% { top: 20px; left: 98px; width: 1px; height: 1px; opacity: 0.5; }
}
@-o-keyframes searchbeam-landscape {
0% { top: 20px; left: 98px; width: 1px; height: 1px; opacity: 0.5; }
25% { top: 15px; left: 93px; width: 11px; height: 11px; opacity: 1.0; }
50% { top: 20px; left: 98px;  width: 1px; height: 1px; opacity: 0.5; }
75% { top: 15px; left: 93px; width: 11px; height: 11px; opacity: 0.0; }
100% { top: 20px; left: 98px; width: 1px; height: 1px; opacity: 0.5; }
}
@-ms-keyframes searchbeam-landscape {
0% { top: 20px; left: 98px; width: 1px; height: 1px; opacity: 0.5; }
25% { top: 15px; left: 93px; width: 11px; height: 11px; opacity: 1.0; }
50% { top: 20px; left: 98px;  width: 1px; height: 1px; opacity: 0.5; }
75% { top: 15px; left: 93px; width: 11px; height: 11px; opacity: 0.0; }
100% { top: 20px; left: 98px; width: 1px; height: 1px; opacity: 0.5; }
}
@-keyframes searchbeam-landscape {
0% { top: 20px; left: 98px; width: 1px; height: 1px; opacity: 0.5; }
25% { top: 15px; left: 93px; width: 11px; height: 11px; opacity: 1.0; }
50% { top: 20px; left: 98px;  width: 1px; height: 1px; opacity: 0.5; }
75% { top: 15px; left: 93px; width: 11px; height: 11px; opacity: 0.0; }
100% { top: 20px; left: 98px; width: 1px; height: 1px; opacity: 0.5; }
} 

@-webkit-keyframes searchbeam-kindle { /* top: 20 -- 15px; left: 98 -- 93px; width: 1 -- 11px; */
	0% { top: 10px; left: 36px; width: 1px; height: 1px; opacity: 0.5; }
	25% { top: 5px; left: 33px; width: 7px; height: 7px; opacity: 1.0; }
	50% { top: 10px; left: 36px;  width: 1px; height: 1px; opacity: 0.5; }
	75% { top: 5px; left: 33px; width: 7px; height: 7px; opacity: 1.0; }
	100% { top: 10px; left: 36px; width: 1px; height: 1px; opacity: 0.5; }
}
@-moz-keyframes searchbeam-kindle {
	0% { top: 10px; left: 36px; width: 1px; height: 1px; opacity: 0.5; }
	25% { top: 5px; left: 33px; width: 7px; height: 7px; opacity: 1.0; }
	50% { top: 10px; left: 36px;  width: 1px; height: 1px; opacity: 0.5; }
	75% { top: 5px; left: 33px; width: 7px; height: 7px; opacity: 1.0; }
	100% { top: 10px; left: 36px; width: 1px; height: 1px; opacity: 0.5; }
}
@-o-keyframes searchbeam-kindle {
	0% { top: 10px; left: 36px; width: 1px; height: 1px; opacity: 0.5; }
	25% { top: 5px; left: 33px; width: 7px; height: 7px; opacity: 1.0; }
	50% { top: 10px; left: 36px;  width: 1px; height: 1px; opacity: 0.5; }
	75% { top: 5px; left: 33px; width: 7px; height: 7px; opacity: 1.0; }
	100% { top: 10px; left: 36px; width: 1px; height: 1px; opacity: 0.5; }
}
@-ms-keyframes searchbeam-kindle {
	0% { top: 10px; left: 36px; width: 1px; height: 1px; opacity: 0.5; }
	25% { top: 5px; left: 33px; width: 7px; height: 7px; opacity: 1.0; }
	50% { top: 10px; left: 36px;  width: 1px; height: 1px; opacity: 0.5; }
	75% { top: 5px; left: 33px; width: 7px; height: 7px; opacity: 1.0; }
	100% { top: 10px; left: 36px; width: 1px; height: 1px; opacity: 0.5; }
}
@-keyframes searchbeam-kindle {
	0% { top: 10px; left: 36px; width: 1px; height: 1px; opacity: 0.5; }
	25% { top: 5px; left: 33px; width: 7px; height: 7px; opacity: 1.0; }
	50% { top: 10px; left: 36px;  width: 1px; height: 1px; opacity: 0.5; }
	75% { top: 5px; left: 33px; width: 7px; height: 7px; opacity: 1.0; }
	100% { top: 10px; left: 36px; width: 1px; height: 1px; opacity: 0.5; }
}

/* --- All These Keyframes! --- */

@media only screen and (orientation: landscape) and (aspect-ratio > 2/1) {
	nav { top: 1em; bottom: 1em; height: calc(100% - 2em); }
	nav button { width: calc(14vh * (152/50)); height: 14vh; }
/*	footer { background-color: #000; } */
}

@media only screen and (orientation: landscape) and (aspect-ratio > 1280/601) {
	nav { top: 1em; bottom: 1em; height: calc(100% - 2em); }
	nav button { width: calc(10vh * (152/50)); height: 10vh; }
	footer { background-color: #000; } 
}

@media only screen and (max-width: 1088px) {
	nav p { font-size: 1.8rem; }
}

@media only screen and (max-width: 870px) {
	header { height: calc(4.75em - 22px); }
	header h1 { font-size: 3rem; }
	nav p { font-size: 1em; }
}

@media only screen and (max-width: 680px) {
	header { height: calc(3.75em - 22px); }
	header h1 { font-size: 2rem; }
}

@media only screen and (max-width: 500px) {
	header h1 { margin-top: 0.5rem; font-size: 1.85rem; }
}

@media only screen and (orientation: landscape) and (max-height: 500px) {
	header { height: 1.75em; }
	header h1 { margin-top: 5px; font-size: 1.25rem; }
}

/* @media only screen and (orientation: portrait) and (max-width: 1024px) { */
@media only screen and (orientation: portrait) and (max-width: 1280px) {
	/* Scale Cover Perpendicularly */
	header > div:first-of-type { top: 0; left: 34px; width: calc(100% - 34px); }
	header > div:last-of-type { max-width: 7px; max-height: 7px; border-radius: 3px; 
		-webkit-animation: searchbeam-kindle 10s infinite ease-in-out;
		-moz-animation: searchbeam-kindle 10s infinite ease-in-out;
		-o-animation: searchbeam-kindle 10s infinite ease-in-out;
		-ms-animation: searchbeam-kindle 10s infinite ease-in-out;
		animation: searchbeam-kindle 10s infinite ease-in-out;
	}
	main { top: 2vw; bottom: 4vw; height: calc(100% - 6vw - 22px); }
	main div.aspect32 { width: 100%; height: 100%; top: 2vh; left: 2vh; max-height: 75vw; max-width: 75vw; transform: translate(0,0); } 
	main fieldset { top: 90%; }
	main fieldset.showMe legend { font-size: 0.8em; top: -45%; }
	main fieldset.subscribe label { font-size: 0.8em; margin-left: 0; padding-left: 0; }
	main fieldset p { padding-top: 0.667em; padding-bottom: 0; font-size: 0.75em; }
	section { margin-left: 0; width: calc((6.625/10.125) * 100%); height: 100%; }
	nav { top: auto; bottom: 0; left: 20px; right: 20px; width: auto; height: auto; }
	nav p { margin: 1vw 0; /* font-size: 2.4rem; */ text-shadow: 0 0 1px #444, -2px -2px 2px #ccc, 2px 2px 2px #444; }
	nav button { margin-left: 1vw; margin-right: 1vw; width: 38vw; height: 12.5vw; }
	nav button.social { margin-left: 1vw; margin-right: 1vw; height: calc(25vw * (75/152)); width: calc(25vw * (75/152)); }
	footer p { margin-top: 2px; font-size: 20px; letter-spacing: 5px; }
}

/* Portrait Happy At Max Width 650px When Only Two Buttons & Social Media Present */

/* @media only screen and (orientation: portrait) and (max-width: 650px) { */
@media only screen and (orientation: portrait) and (max-width: 1024px) {
	header { padding: 0.15rem 0.45rem 0.45rem 0.45rem; height: 0.75cm; }
	header h1 { font-size: 1.5rem; }
	main div.aspect32 { width: 100%; height: 100%; left: calc(50% - 45vw); max-height: 90vw; max-width: 90vw; } 
}

@media only screen and (orientation: portrait) and (max-width: 960px) {
	main div.aspect32 { top: 10vh; left: 2vh; max-width: 85vw; max-height: 85vw; }
	nav { top: 11vh; bottom: 2vh; left: calc((6.625/10.125) * 90%); right: 2vh; }  
	nav button { margin-bottom: 4vw; width: 34.2vw; height: 11.25vw; }
	nav button:hover { margin-bottom: calc(4vw - 4px); }
	nav button.social { margin: 1.5vw 0.25vw; width: calc(20vw * (75/152)); height: calc(20vw * (75/152)); }
	nav p { font-size: 1.6rem; }
}

@media only screen and (orientation: portrait) and (max-width: 500px) {
  	main div.aspect32 { top: 2vh; left: 50%; transform: translate(-50%,0); max-height: 90vw; max-width: 90vw; }
	section { margin-left: calc((6.625/10.125) * 25%); }
	nav { top: auto; bottom: 0; left: 20px; right: 20px; width: auto; height: auto; }
	nav button { width: 38vw; height: 12.5vw; margin-bottom: calc(4vw + 4px); }
	nav button:hover { margin-bottom: 4vw; }
	nav p { font-size: 2.4rem; }
}

@media only screen and (orientation: portrait) and (max-width: 420px) {
	header h1 { margin-top: 5px; font-size: 1.25rem; }
	main div.aspect32 { top: 6vh; max-height: 96vw; max-width: 96vw; }
	main fieldset { z-index: 7; top: 85%; min-height: 50px; }
	main fieldset button.unsubscribe { margin-top: 0.25em; }
	main fieldset.showMe legend { top: -1.667em; font-size: 0.5em; }
	main fieldset.subscribe label { display: none; }
	main fieldset p { padding-top: 0.667em; padding-bottom: 0; font-size: 0.5em; }
	main fieldset button.closeSub { top: -1.25em; right: 1em; width: 1em; height: 2em; }
	nav p { font-size: 1.5rem; }
	footer p { margin-top: 2px; font-size: 15px; letter-spacing: 3px; }
}

@media only screen and (orientation: portrait) and (max-width: 360px) {
	main div.aspect32 { top: 7vh; max-width: 75vw; max-height: 75vw; }
	nav p { font-size: 1.25rem; }
	footer p { margin-top: 4px; font-size: 17px; letter-spacing: 3px; }
}

@media only screen and (orientation: portrait) and (max-width: 320px) {
	main div.aspect32 { top: 7vh; max-width: 72vw; max-height: 72vw; }
	nav p { font-size: 1rem; }
	footer p { margin-top: 4px; font-size: 16px; letter-spacing: 2px; }
}

/* The Convictor */

body.convictor h1{ display: none; }

body.convictor > div:first-of-type, body.convictor > div:last-of-type {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#effc00+0,effc00+8,990000+10,990000+12,ddac5d+18,ddac5d+25,ddac5d+33,202f4e+78,2f2f2f+86,e6eaeb+91,e6eaeb+94,202f4e+98,202f4e+100;48 */
	background: rgb(239,252,0); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(239,252,0,1) 0%, rgba(239,252,0,1) 8%, rgba(153,0,0,1) 10%, rgba(153,0,0,1) 12%, rgba(221,172,93,1) 18%, rgba(221,172,93,1) 25%, rgba(221,172,93,1) 33%, rgba(32,47,78,1) 78%, rgba(47,47,47,1) 86%, rgba(230,234,235,1) 91%, rgba(230,234,235,1) 94%, rgba(32,47,78,1) 98%, rgba(32,47,78,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(239,252,0,1) 0%,rgba(239,252,0,1) 8%,rgba(153,0,0,1) 10%,rgba(153,0,0,1) 12%,rgba(221,172,93,1) 18%,rgba(221,172,93,1) 25%,rgba(221,172,93,1) 33%,rgba(32,47,78,1) 78%,rgba(47,47,47,1) 86%,rgba(230,234,235,1) 91%,rgba(230,234,235,1) 94%,rgba(32,47,78,1) 98%,rgba(32,47,78,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(239,252,0,1) 0%,rgba(239,252,0,1) 8%,rgba(153,0,0,1) 10%,rgba(153,0,0,1) 12%,rgba(221,172,93,1) 18%,rgba(221,172,93,1) 25%,rgba(221,172,93,1) 33%,rgba(32,47,78,1) 78%,rgba(47,47,47,1) 86%,rgba(230,234,235,1) 91%,rgba(230,234,235,1) 94%,rgba(32,47,78,1) 98%,rgba(32,47,78,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#effc00', endColorstr='#202f4e',GradientType=0 ); /* IE6-9 */
}

body.convictor header { margin-bottom: -70px; width: calc(100% - 14px); height: 150px; background-image: url(../images/new-unhinged-header.jpg); background-size: 100% auto; }
body.convictor header div { display: none; }
body.convictor main div { display: none; }
body.convictor main nav.mainNav { top: calc(100% - 10rem); }
body.convictor main nav.mainNav button { display: none; }
body.convictor main nav.mainNav button.convictorComics { display: inline-block; }
body.convictor main nav.gallery { display: block; z-index: 3; opacity: 1; width: 15%; left: calc(50vw - (50vh - 2em - 10px) - 2em - 15%); }
body.convictor main nav.gallery button { width: 15vw; height: calc(15vw * (1/4)); background-color: #006; color: #3ff; margin-bottom: 1.5vw; background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; }
body.convictor main nav.gallery button.active { outline: 4px solid gold; }
body.convictor main aside { display: block; }

/* These aside definitions can go up top... */

aside { position: absolute; display: block; z-index: 2; top: calc(50% - 32px); left: calc(50% - 32px); right: calc(50% - 32px); bottom: calc(50% - 32px); width: auto; height: auto; background: none; background-image: url(../images/spinner.jpeg); background-color: #fff; background-size: 100% 100%; border: 0 outset #fee; border-radius: 32px; overflow: hidden;
    -o-box-shadow: 0 20px 20px -10px rgba(0,0,0,0.75);
    -ms-box-shadow: 0 20px 20px -10px rgba(0,0,0,0.75);
    -moz-box-shadow: 0 20px 20px -10px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0 20px 20px -10px rgba(0,0,0,0.75);
    box-shadow: 0 20px 20px -10px rgba(0,0,0,0.75);
	-o-transition: all 2s;
	-ms-transition: all 2s;
	-moz-transition: all 2s;
	-webkit-transition: all 2s;
	transition: all 2s;
}

aside.unfold { top: calc(2em - 10px); left: calc(50vw - (50vh - 2em)); right: calc(50vw - (50vh - 2em)); bottom: calc(2em - 10px); border: 10px outset #fee; background: url(../images/stainless-steel-background2.jpeg) #ccc center center no-repeat;
	-o-transition: all 2s;
	-ms-transition: all 2s;
	-moz-transition: all 2s;
	-webkit-transition: all 2s;
	transition: all 2s;
}

aside ul { display: none; }

aside.unfold ul:first-of-type {
    position: absolute;
    display: block;
    z-index: 0;
    margin: 1em 2em 3em 2em;
    padding: 0;
    border: 2px inset #400;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    list-style-type: none;
    background-color: rgba(0,0,0,0.85);
}

aside.unfold ul:first-of-type li {
    position: absolute;
    display: block;
    z-index: -1;
    opacity: 0;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
	-o-transition: opacity 1.5s ease-in-out;
	-ms-transition: opacity 1.5s ease-in-out;
	-moz-transition: opacity 1.5s ease-in-out;
	-webkit-transition: opacity 1.5s ease-in-out;
	transition: opacity 1.5s ease-in-out;
}
aside li.active { opacity: 1;
	-o-transition: opacity 1.5s ease-in-out;
	-ms-transition: opacity 1.5s ease-in-out;
	-moz-transition: opacity 1.5s ease-in-out;
	-webkit-transition: opacity 1.5s ease-in-out;
	transition: opacity 1.5s ease-in-out;
}
aside button {
    position: absolute;
/*  display: block; */
	display: none;
    z-index: 2;
    opacity: 0.5;
    margin: 1em;
    padding: 1em 0.5em;
    top: calc(50% - 5em);
    width: 2em;
    height: 5em;
}

aside button:first-of-type { left: 0; }

aside button:last-of-type { right: 0; }

aside.unfold ul:last-of-type {
    position: absolute;
    display: block;
    z-index: 0;
    margin: 1em 2em 1em 2em;
    padding: 0;
    border: 2px inset #400;
    top: calc(100% - 3em);
    left: 0;
    right: 0;
    width: calc(100% - 4em - 4px);
    height: 1em;
    text-align: center;
    background-color: #333;
    border-radius: 0.5em;
}

aside.unfold ul:last-of-type li {
    position: relative;
    display: none;
    width: calc(1em - 8px);
    height: calc(1em - 8px);
    background-color: #555;
    border: 2px outset #444;
    border-radius: 50%;
}

aside ul:last-of-type li.chosen { display: inline-block; background-color: #fff; }

aside ul:last-of-type li.active {
	display: inline-block;
}

aside.unfold ul:first-of-type li.active { opacity: 1;
	-o-transition: opacity 1.5s ease-in-out;
	-ms-transition: opacity 1.5s ease-in-out;
	-moz-transition: opacity 1.5s ease-in-out;
	-webkit-transition: opacity 1.5s ease-in-out;
	transition: opacity 1.5s ease-in-out;
}

@media only screen and (orientation: portrait) {
	body.convictor header { background-size: auto 100%; height: 105px; }
	aside.unfold { top: calc(7em - 10px); left: calc(2em - 10px); right: calc(2em - 10px); bottom: calc(11em - 10px); }
	body.convictor main nav.gallery { margin: 0; width: 100%; top: auto; left: 0; right: 0; bottom: 1em; }
	body.convictor main nav.gallery button { margin-bottom: 2em; width: calc((100vw / 3.33) - 1em); height: calc((100vw / (3.33 * 4)) - 1em); }
	h2 { bottom: -30%; font-size: large; }
	button.backHome { width: 2em; height: 2em; border-radius: 1em; top: 0.5em; }
	main { top: 4vh; bottom: 4vh; height: calc(100% - 8vh - 22px); }
	dl { margin: 0 1vh; padding: 2vh 2vw; width: calc(100vw - 4vw - 2vh); }
	ul { width: 92vw; margin: 2vh 2vw; }
	li { min-height: calc(98vw / 3); }
}

@media only screen and (orientation: portrait) and (max-width: 420px) {
	body.convictor header { height: 5vh; }
	aside.unfold { border: 5px outset #fee; top: calc(5em - 5px); left: calc(1em - 5px); right: calc(1em - 5px); bottom: calc(10em - 5px); }
	aside.unfold ul:first-of-type { margin: 1em 1em 3em 1em; border: 5px inset #400; }
	body.convictor main nav.gallery { bottom: 0; }
	body.convictor main nav.gallery button { margin-bottom: 1.5em; width: calc((100vw / 2.5) - 0.5em); height: calc((100vw / (2.5 * 4)) - 0.5em); }
	body.convictor main nav.mainNav { top: calc(2em - 10px); }
	body.convictor main nav.mainNav button { margin: 0 1vh; }
	footer.activate div span { letter-spacing: 1px; }
	dh { width: 100%; }
	dh:first-of-type { display: none; }
/*	dh span { display: none; } */
	img { margin-top: 0.5em; width: calc(50% + 1em); }
	dt { padding: 0.25em 0 0 0; width: calc(100% - 1em); }
	dd { padding: 0.25em 0 0.5em 0; width: calc(100% + 1em); }
}