/*************************************************************************
*
* Holoworlds Saga Project
* A Reanimality Studios LLC site for HTML5/CSS3 
*
*  Author : Marc J. Driftmeyer
*  Date   : November 09, 2015
*  Update : August 13, 2016
*  Rev    : 0.2
*  
*************************************************************************/
/*

Font Families

*/

@font-face {
	font-family: "HelveticaNeue LT 35 Thin";
	src: url('/fonts/HelveticaNeue_LT_35_Thin.eot') format('eot'), /* IE9 Compat Modes */
		 url('/fonts/HelveticaNeue_LT_35_Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('/fonts/HelveticaNeue_LT_35_Thin.woff2') format('woff2'), /* Super Modern Browsers */
		 url('/fonts/HelveticaNeueLT-Thin.woff') format('woff'), /* Pretty Modern Browsers */
		 url('/fonts/HelveticaNeue_LT_35_Thin.ttf') format('truetype'), /* Safari, Android, iOS */
		 url() format('svg'); /* Legacy iOS */
}
@font-face {
  src: url('/fonts/Corsica.MX.Light.Cond.otf');
  font-family: "Corsica MX Light Cond";
}
@font-face {
	font-family: "Corsica MX Light";
	src: url('/fonts/Corsica_MX_Light.eot')format('eot'),/* IE9 Compat Modes */
		 url('/fonts/Corsica_MX_Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('/fonts/Corsica_MX_Light.woff2') format('woff2'), /* Super Modern Browsers */
		 url('/fonts/CorsicaMX-Light.woff') format('woff'), /* Pretty Modern Browsers */
  		 url('/fonts/Corsica_MX_Light.otf')format('opentype'), /* Safari, Android, iOS */
		 url('/fonts/CorsicaMX-Light.svg') format('svg'); /* Legacy iOS */
}
@font-face {
	font-family: "Corsica MX Regular";
	src: url('/fonts/Corsica_MX_Regular.eot')format('eot'),/* IE9 Compat Modes */
		 url('/fonts/Corsica_MX_Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('/fonts/Corsica_MX_Regular.woff2') format('woff2'), /* Super Modern Browsers */
		 url('/fonts/CorsicaMX-Regular.woff') format('woff'), /* Pretty Modern Browsers */
		 url('/fonts/Corsica_MX_Regular.otf')format('opentype'), /* Safari, Android, iOS */
		 url('/fonts/CorsicaMX-Regular.svg') format('svg'); /* Legacy iOS */
}
@font-face {
	font-family: "Corsica MX Bold";
	src: url('/fonts/Corsica_MX_Bold.eot')format('eot'),/* IE9 Compat Modes */
		 url('/fonts/Corsica_MX_Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('/fonts/Corsica_MX_Bold.woff2') format('woff2'), /* Super Modern Browsers */
		 url('/fonts/CorsicaMX-Bold.woff') format('woff'), /* Pretty Modern Browsers */
		 url('/fonts/Corsica_MX_Bold.otf')format('opentype'), /* Safari, Android, iOS */
		 url('/fonts/CorsicaMX-Bold.svg') format('svg'); /* Legacy iOS */
}
@font-face {
	font-family: "Corsica MX Book";
	src: url('/fonts/Corsica_MX_Book.eot')format('eot'),/* IE9 Compat Modes */
		 url('/fonts/Corsica_MX_Book.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('/fonts/Corsica_MX_Book.woff2') format('woff2'), /* Super Modern Browsers */
		 url('/fonts/CorsicaMX-Book.woff') format('woff'), /* Pretty Modern Browsers */
		 url('/fonts/Corsica_MX_Book.otf')format('opentype'), /* Safari, Android, iOS */
		 url('/fonts/CorsicaMX-Book.svg') format('svg'); /* Legacy iOS */
}

/*

Animation

*/


@-webkit-keyframes snow {
    0% { background-position: 0px 0px, 0px 0px, 0px 0px }
    50% { background-color: #b4cfe0 }
    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
        background-color: #6b92b9;
    }
}
@-moz-keyframes snow {
    0% { background-position: 0px 0px, 0px 0px, 0px 0px }
    50% { background-color: #b4cfe0 }
    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
        background-color: #6b92b9;
    }
}
@-ms-keyframes snow {
    0% { background-position: 0px 0px, 0px 0px, 0px 0px }
    50% { background-color: #b4cfe0 }
    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
        background-color: #6b92b9;
    }
}
@keyframes snow {
    0% { background-position: 0px 0px;opacity:.5; }
    50% { background-color: #000 ;opacity:.7; }
    100% {
        background-position: 5px 1000px;
     opacity:.8;
    }
}

body {
background:transparent;
overflow:scroll;
}

div.clouds {
font-size:1em;
overflow:hidden;
   width:100%;height:100vh;
  background-image:
   url('/images/pngs/animation/big-sky-clouds.png');
  background-repeat:repeat-y;
  background-size:300% 700%;
  opacity:.5;
    -webkit-animation: snow 60s linear infinite;  animation-direction: alternate; 
    -moz-animation: snow 60s linear infinite;
    -ms-animation: snow 60s linear infinite;
    animation: snow 60s linear infinite;
animation-iteration-count: 1;
}
div.forest{
  background-image:
 url('/images/jpgs/animation/Widescreen5k.Olympic.Mtn.RainForrest-1024-600dpi.jpg');background-size:cover;position:fixed;top:0;left:0;width:100%;height:100vh;
  animation: zoom 120s infinite;
opacity:1;
animation-iteration-count: 1;
overflow:hidden;
}
@keyframes zoom {
    0% { transform:scale(1,1); }
    50% { transform:scale(1.2,1.2); }
    100% {transform:scale(1,1); }
}

/*

Cross Fading Quotes

The "30s" at "-webkit-animation: imageAnimation 30s linear infinite 0s;" tells that the animation 
for each image will last 30 seconds in infinete number of times.

*/
#crossfade > img.quote { 
    width: auto;
    height: auto;
    position: absolute;
    bottom: 60%;
    left: 30%;
    color: transparent;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 70s linear 0s;
	-webkit-animation-iteration-count: 1;
    -moz-animation: imageAnimation 70s linear infinite 0s;
    -o-animation: imageAnimation 70s linear infinite 0s;
    -ms-animation: imageAnimation 70s linear infinite 0s;
    animation: imageAnimation 70s linear 0s; 
	animation-iteration-count:2;
}

#crossfade > img.quote:nth-child(2)  {
/*	background-image: url("/images/pngs/animation/quotesFades/selfDoubtItsOffspringFade.png");
	background-repeat:no-repeat; */
	width: auto;
    height: auto;
    position: absolute;
    bottom: 58%;
    left: 45%;
    color: transparent;
    -webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
    -o-animation-delay: 10s;
    -ms-animation-delay: 10s;
    animation-delay: 10s; 
}
#crossfade > img.quote:nth-child(3) {
/*	background-image: url("/images/pngs/animation/quoteFades/holyShitFullFade.png");
	background-repeat:no-repeat; */
	width:auto;
	height:auto;
	position: absolute;
    bottom: 58%;
    left: 30%;
    color: transparent;
    -webkit-animation-delay: 20s;
    -moz-animation-delay: 20s;
    -o-animation-delay: 20s;
    -ms-animation-delay: 20s;
    animation-delay: 20s; 
}
#crossfade > img.quote:nth-child(4) {
/*	background-image: url("/images/pngs/animation/quoteFades/seattle1979MsChaste.png");
	background-repeat:no-repeat; */
	width:auto;
	height:auto;
position: absolute;
    bottom: 54%;
    left: 35%;
    color: transparent;
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}
#crossfade > img.quote:nth-child(5) {
/*	background-image: url("/images/pngs/animation/quoteFades/fearIsTheKillerFade.png");
	background-repeat:no-repeat; */
	width:auto;
	height:auto;
	position: absolute;
    bottom: 30%;
    left: 60%;
    color: transparent;
    -webkit-animation-delay: 40s;
    -moz-animation-delay: 40s;
    -o-animation-delay: 40s;
    -ms-animation-delay: 40s;
    animation-delay: 40s; 
}
#crossfade > img.quote:nth-child(6) {
/*	background-image: url("/images/pngs/animation/quoteFades/fearIsTheKillerFade.png");
	background-repeat:no-repeat; */
	width:auto;
	height:auto;
	position: absolute;
    bottom: 58%;
    right: 30%;
    color: transparent;
    -webkit-animation-delay: 50s;
    -moz-animation-delay: 50s;
    -o-animation-delay: 50s;
    -ms-animation-delay: 50s;
    animation-delay: 50s; 
}
#crossfade > img.quote:nth-child(7) {
/*	background-image: url("/images/pngs/animation/quoteFades/fearIsTheKillerFade.png");
	background-repeat:no-repeat; */
	width:auto;
	height:auto;
	position: absolute;
    bottom: 54%;
    left: 23%;
    color: transparent;
    -webkit-animation-delay: 60s;
    -moz-animation-delay: 60s;
    -o-animation-delay: 60s;
    -ms-animation-delay: 60s;
    animation-delay: 60s; 
}

@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/*

Font Awesome Overrides

*/

.socialNetworks	{
margin:35px auto;
width:50%;
min-height:50px;
height:auto;
text-shadow: 1px 1px 2px rgba(0,0,0,1);
border:0px red solid;
overflow:hidden;
}

/*
Social network links
*/
#apple, #facebook, #instagram, #tumblr, #twitter 	{
font-size:2em;
padding-right:10px;
height:50px;
color:rgba(135,235,135,1);
text-align:right;
}
#apple a:link, #apple a:active, #apple a:visited  {
color:rgba(135,235,135,1);
font-size:2em;
text-decoration:none;
border:0px dotted red;
}
#facebook a:link, #facebook a:active, #facebook a:visited {
color:rgba(135,235,135,1);
font-size:2em;
text-decoration:none;
border:0px dotted red;
}
#instagram a:link, #instagram a:active, #instagram a:visited  {
color:rgba(135,235,135,1);
font-size:2em;
text-decoration:none;
border:0px dotted red;
}
#tumblr a:link, #tumblr a:active, #tumblr a:visited  {
color:rgba(135,235,135,1);
font-size:2em;
text-decoration:none;
border:0px dotted red;
}
#twitter a:link, #twitter a:active, #twitter a:visited  {
color:rgba(135,235,135,1);
font-size:2em;
text-decoration:none;
border:0px dotted red;
}

a#apple:hover, a#facebook:hover, a#instagram:hover, a#tumblr:hover, a#twitter:hover	{
color:rgba(255, 124, 0,1);
font-size:2em;
text-decoration:none;
}

section	{
margin-top:0;
overflow:hidden;
width:100%;
min-height:780px;
height:auto;
border:0px dotted red;
text-align:center;
}

#logoSeries	{
margin-top:10em;
overflow:hidden;
width:1161px;
min-height:155px;
border:0px dotted red;
text-align:center;
}

#logoTitle	{
margin-top:10em;
overflow:hidden;
width:817px;
height:263px;
border:0px dotted red;
text-align:center;
}

/***************
Navigation nav
***************/

nav.navSupport {
z-index:1;
position:fixed;
top:0;
left:0;
margin:0;
padding:0;
height:60px;
min-width:728px;
width:100%;
overflow:hidden;
background: linear-gradient(rgba(0,0,0,.85), rgba(0,0,0,.75), rgba(0,0,0,.85));
}

#reanimastudioLogo	{
float:left;
width:50px;
height:60px;
background: url("/images/pngs/logos/reanimastudios/ReanimaStudios.Logo.Flat_48x48.png") no-repeat center center;
}
.navSupport ul	{
font-size:1em;
line-height:100px;
padding:0;
margin:0;
list-style:none;
height:60px;
position:relative;
top:0;
left:0px;
overflow:hidden;
min-width:728px;
width:auto;
max-width:100%;
}

nav ul li:nth-child(3)	{
margin-left:50%;
}

nav ol	{
padding:0;
margin:0;
list-style:none;
height:100px;
line-height:100px;
/*background-color:rgba(33,33,33,.25); */
position:relative;
top:0;
right:5.25%;
}
nav li	{
line-height:inherit;
border:0px dotted red;
line-height:60px;
height:60px;
font-size:100%;
float:left;
min-width:50px;
width:auto;
text-decoration:none;
color:rgba(255,199,0,1);
padding:0;
margin-right:4px;
margin-left:4px;
}

nav li a:nth-child(1)	{
color:rgba(235,235,235,1);
text-decoration:none;
}

nav li a:hover:nth-child(1)	{
color:rgba(26, 169, 245,1);
text-decoration:none;
}

/*

iBooks

*/

#topBox {
position:absolute;
bottom:22%;
left:8%;
float:left;
padding:10px auto;
width:240px;
min-height:370px;
height:auto;
/* background: radial-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.5)); */
overflow:hidden;
border:0px dashed red;
}
.textbox	{
box-shadow: 4px 4px 8px rgba(0,0,0,1);
background:url("/images/jpgs/inline-covers/Rise.Of.The.Beasts.Cover.Full.title_188x288.jpg") center center no-repeat;
background-size:contain;
/* rounded corners */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;
min-height:288px;
width:188px;
height:auto;
padding:0;
/*background:radial-gradient(rgba(0,0,0,1), rgba(0,0,0,.75)); */
border:1px solid rgba(0,0,0,.5);

}

h1	{
font-family:"Corsica MX Light", sans-serif;
font-size: 700%;
color:rgba(194,0,0,1);
text-align:center;
margin-top:3em;
font-variant:small-caps;
text-shadow: 1px 1px 2px rgba(0,0,0,1);
}

h2	{
font-family:"Corsica MX Light", sans-serif;
font-size: 400%;
color:rgba(194,0,0,1);
text-align:center;
margin-top:.5em;
font-variant:small-caps;
text-shadow: 1px 1px 2px rgba(0,0,0,1);
}

h3	{
font-family:"Corsica MX Light", sans-serif;
font-size: 300%;
color:rgba(194,0,0,1);
text-align:center;
margin-top:1em;
margin-bottom:.5em;
font-variant:small-caps;
text-shadow: 1px 1px 2px rgba(0,0,0,1);
}

footer.anchorFeet	{
background: linear-gradient(rgba(0,0,0,.85), rgba(0,0,0,.75), rgba(0,0,0,.85));
position:fixed;
bottom:0;
left:0;
margin-top:1.5em;
display:block;
overflow:hidden;
min-height:100px;
height:auto;
width:100%;
}
.leftHalf	{
font-family:"Corsica MX Regular", sans-serif;
font-size:.8em;
line-height:1.2em;
color:rgb(93,93,93,1);
width:70%;
float:left;
text-align:left;
margin-left:0em;
min-height:100px;
height:auto;
overflow:hidden;
margin-top:0em;
padding-bottom:0em;
}

.leftHalf p {
color:rgba(153,153,153,1);
margin-left:1em;
text-decoration:none;
text-align:left;
line-height:3em;
padding-left:1em;
vertical-align:middle;
}

.leftHalf a:link, a:visited, a:active 	{
color:rgba(93,253,93,1);
text-decoration:none;
}

.leftHalf a:hover	{
color:rgba(255,125,31,1);
text-decoration:none;
}

.leftHalf img	{
padding:0;
float:left;
margin-left:0em;
}
.leftHalf p:nth-child(2)	{
color:rgba(153,153,153,1);
margin-left:1em;
margin-top:-1.5em;
float:left;
}

.rightHalf 	{
width:30%;
min-height:100px;
height:auto;
float:left;
overflow:hidden;
margin:0;
}

#html5Logo {
display:inline;
font-family:"Corsica MX Regular", sans-serif;
font-size:.8em;
line-height:1.2em;
color:rgba(93,93,93,1);
padding-top:0em;
float:left;
margin-top:0em;
text-align:left;
min-height:40px;
height:auto;
overflow:hidden;
margin-left:1em;
border:1px dotted green;
}

footer p:nth-child(1), footer p:nth-child(2) {
font-family:"Corsica MX Regular", sans-serif;
font-size:.85em;
color:rgba(193,193,193,1);
text-align:left;
}