/*
   __
  |  ""--.--.._                                             __..    ,--.
  |       `.   "-.'""\_...-----..._   ,--. .--..-----.._.""|   |   /   /
  |_   _    \__   ).  \           _/_ |   \|  ||  ..    >  `.  |  /   /
    | | `.   ._)  /|\  \ .-"""":-"   "-.   `  ||  |.'  ,'`. |  |_/_  /
    | |_.'   |   / ""`  \  ===/  ..|..  \     ||      < ""  `.  "  |/__
    `.      .    \ ,--   \-..-\   /"\   /     ||  |>   )--   |    /    |
     |__..-'__||__\   |___\ __.:-.._..-'_|\___||____..-/  |__|--""____/
                           _______________________
                          /                      ,'
                         /      ___            ,'
                        /   _.-'  ,'        ,-'   /
                       / ,-' ,--.'        ,'   .'/
                      /.'     `.         '.  ,' /
                     /      ,-'       ,"--','  /
                          ,'        ,'  ,'    /
                         ,-'      ,' .-'     /
                      ,-'                   /
                    ,:________Steph________/

*/

body,html {
  background-color:#b5aa94;
  color:#270402;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

a{color: #7900ff;text-decoration: none;  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;}
a:hover{color: #cc00ff}

.center{margin:0 auto;}



#intro{
	/*max-height: 1200px;*/ 
	/* The above seems to do nothing except break the intro on very large screens; idk why it was here but want to give some credence to the notion that there may be a reason, which may be easier to ascertain at some future date because this helpful comment is here letting you, future person, know that there was once a max-height property set on this selector. —Toph Tucker, eleventh of November, anno domini two thousand fifteen */
	width: 100%;
	overflow: hidden;
	background: #000;
	position: fixed;
	top:0;
	z-index: 9;
	}

h1{font-size: 140px;font-weight:400;line-height:150px;margin: 0;}
h2{font-size: 40px;font-weight:400;line-height:44px;margin: 0}
.subhead {font-family: "BWHaasText-55Roman",Helvetica, Arial, sans-serif;font-size:20px;text-align:center;margin-top:50px;color:#ffd400}


#title{
	font-family:'Germania One', cursive, serif;
	color:#000;
	text-align: center;
	max-width: 1100px;
	height:520px;
	margin-top: -260px;
	margin-left:-550px;
	top:55%;
	left:50%;
	position: absolute;
	z-index:9;
}

#subFade3{margin-top: 24px}
#art{
	height:1000px;
  max-width: 2000px;
  margin: 0 auto;
	background: rgb(135,0,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(135,0,255,1) 0%, rgba(187,9,0,1) 46%, rgba(234,104,0,1) 70%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(135,0,255,1)), color-stop(46%,rgba(187,9,0,1)), color-stop(70%,rgba(234,104,0,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(135,0,255,1) 0%,rgba(187,9,0,1) 46%,rgba(234,104,0,1) 70%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(135,0,255,1) 0%,rgba(187,9,0,1) 46%,rgba(234,104,0,1) 70%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(135,0,255,1) 0%,rgba(187,9,0,1) 46%,rgba(234,104,0,1) 70%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(135,0,255,1) 0%,rgba(187,9,0,1) 46%,rgba(234,104,0,1) 70%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8700ff', endColorstr='#ea6800',GradientType=0 ); /* IE6-9 */
	overflow:hidden;
	position: relative;
	}

#layer1,#layer2,#layer3,#layerFire,#layerClouds{position:absolute;}
#layer1{
	z-index: 6;
	width: 800px;
	height:953px;
	left:50%;
	transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
}
#layer2{
	z-index: 5;
	width:2000px;
	height:504px;
	left:50%;
	transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
	}
#layerFire{
	z-index: 4;
	width:500px;
	height:114px;
	background: url(../img/fire.gif) repeat-x;
	left:34%;
	transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
	}
#layer3{
	z-index: 3;
	width:2000px;
	height:787px;
	left:50%;
	transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
}
#layerClouds{
	z-index: 2;
	width:100%;
	height:800px;
	left:50%;
	transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);

	background: url(../img/clouds.png);
	background-size: 100%;
	background-position: center;
	display: block;
}



.blaze{
	background: url(../img/fire.gif) repeat-x;
	height: 114px;
	width: 100%;
	position: absolute;
	bottom: -10px;
	left: 0px;
	display:block;
}

.inlineImg{max-width: 460px;}
.inlineImg img{width: 100%;}
.small{font-family:'Germania One', cursive, serif; font-weight: 400;font-size:12px;line-height: 14px;margin-top: 6px;}
.caption{margin-top: 10px;position:relative;font-size: 14px;line-height:16px;}

.pull{font-family:'Germania One', cursive, serif;font-weight: 400;font-size: 44px; line-height:48px;}

.qR{float:right;margin: 26px -200px 26px 26px;}
.qL{float:left;margin: 26px 26px 26px -200px }
.qR img, .qL img { max-width: 100%; }

.padded{padding: 22px;}

.panelRow{min-width:580px;display: inline-block;vertical-align: top;text-align: center }
.panel{display: inline-block;vertical-align: text-top;}
.panel img{max-width: 280px;padding: 5px;}

.bubbleR, .bubbleL
{
min-height: 200px;
width: 400px;
position: relative;
padding: 10px;
background: #ffd400;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: #FF9000 solid 4px;
}

.bubbleR:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 10px 16px 10px 0;
border-color: transparent #ffd400;
display: block;
width: 0;
z-index: 1;
left: -16px;
top: 175px;
}

.bubbleR:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 13px 19px 13px 0;
border-color: transparent #FF9000;
display: block;
width: 0;
z-index: 0;
left: -23px;
top: 172px;
}

.bubbleL:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 10px 0 10px 16px;
border-color: transparent #ffd400;
display: block;
width: 0;
z-index: 1;
right: -16px;
top: 175px;
}

.bubbleL:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 13px 0 13px 19px;
border-color: transparent #FF9000;
display: block;
width: 0;
z-index: 0;
right: -23px;
top: 172px;
}





.credits{font-size:28px;line-height: 30px;font-family:'Germania One', cursive, serif;  font-weight: 400;text-transform: uppercase;margin-top: 40px;}
.creditsB{font-family:'Germania One', cursive, serif;  font-weight: 700;}



.break{margin: 0 auto; max-width: 1200px;text-align: center;}
.break img{width: 100%;display: block;margin: 0;}
#subFade1,#subFade2,#subFade3{opacity: 0;}
.centerImg{margin: 0 auto;}
.try2 img{width: 50%;display: inline-block;vertical-align: top;margin:0}

.dek {
  font-family: "BWHaasText-55Roman",Helvetica, Arial, sans-serif;
  font-size: 20px;
  line-height: 26px;
  max-width: 800px;
  text-align: left;
  margin:0 auto;
}





.recirc{width:80%;padding:20px 0 80px 0;margin:0 auto;}
.recirc a{font-family:'Germania One', cursive, serif; font-size: 28px;}
.recirc1{width: 50%;display: block; float: left; padding: 10px; box-sizing: border-box; vertical-align: top; }
.recirc1 img{width:100%;height: auto;}


/* perecnt read */
#percentread{
	background: #FF9000;
	position: fixed;
	top:0;left:0;
	width:0;
	height: 4px;
	z-index: 5555;
}



hr{background: #270402;height:4px;border:0;margin:40px auto;}





/* fire text */


/* .fire{text-shadow: 0px -1px 4px white, 0px -2px 10px yellow, 0px -10px 20px #ff8000, 0px -18px 40px red;} */

.fire {
  animation: animation 1s ease-in-out infinite alternate;
  -moz-animation: animation 1s ease-in-out infinite alternate;
  -webkit-animation: animation 1s ease-in-out infinite alternate;
  -o-animation: animation 1s ease-in-out infinite alternate;
}

.fire2 {
  animation: animation .65s ease-in-out infinite alternate;
  -moz-animation: animation .65s ease-in-out infinite alternate;
  -webkit-animation: animation .65s ease-in-out infinite alternate;
  -o-animation: animation .65s ease-in-out infinite alternate;
}

@keyframes animation
{
0% {text-shadow: 0 0 20px #ffd400,
  5px -5px 10px #feec85,
  -5px -5px 10px #ffae34,
  5px -15px 20px #ec760c,
  -5px -20px 20px #cd4606,
  0 -30px 25px #973716,
  5px -35px 30px #451b0e;}
100% {text-shadow: 0 0 20px #ffd400,
  5px -5px 5px #ffd400,
  -5px -5px 10px #feec85,
  6px -16px 20px #ffae34,
  -6px -19px 15px #ec760c,
  0 -31px 30px #cd4606,
  5px -35px 30px  #973716;}
}

@-moz-keyframes animation
{
0% {text-shadow: 0 0 20px #ffd400,
  5px -5px 10px #feec85,
  -5px -5px 10px #ffae34,
  5px -15px 20px #ec760c,
  -5px -20px 20px #cd4606,
  0 -30px 25px #973716,
  5px -35px 30px #451b0e;}
100% {text-shadow: 0 0 20px #ffd400,
  5px -5px 5px #ffd400,
  -5px -5px 10px #feec85,
  6px -16px 20px #ffae34,
  -6px -19px 15px #ec760c,
  0 -31px 30px #cd4606,
  5px -35px 30px  #973716;}
}

@-webkit-keyframes animation
{
0% {text-shadow: 0 0 20px #ffd400,
  5px -5px 10px #feec85,
  -5px -5px 10px #ffae34,
  5px -15px 20px #ec760c,
  -5px -20px 20px #cd4606,
  0 -30px 25px #973716,
  5px -35px 30px #451b0e;}
100% {text-shadow: 0 0 20px #ffd400,
  5px -5px 5px #ffd400,
  -5px -5px 10px #feec85,
  6px -16px 20px #ffae34,
  -6px -19px 15px #ec760c,
  0 -31px 30px #cd4606,
  5px -35px 30px  #973716;}
}

@-o-keyframes animation
{
0% {text-shadow: 0 0 20px #ffd400,
  5px -5px 10px #feec85,
  -5px -5px 10px #ffae34,
  5px -15px 20px #ec760c,
  -5px -20px 20px #cd4606,
  0 -30px 25px #973716,
  5px -35px 30px #451b0e;}
100% {text-shadow: 0 0 20px #ffd400,
  5px -5px 5px #ffd400,
  -5px -5px 10px #feec85,
  6px -16px 20px #ffae34,
  -6px -19px 15px #ec760c,
  0 -31px 30px #cd4606,
  5px -35px 30px  #973716;}
}



/* for non-skrollr */

.no-skrollr #intro{
  position: relative;
}

.no-skrollr #art {
  height: 400px;
}

.no-skrollr #layer1 {
  width: 100%;
  height: 100%;
  bottom: 0px;
  text-align: center;
}

.no-skrollr #layer2 {
  width: 100%;
  height: auto;
  bottom: -3px;
}

.no-skrollr #layerFire {
  bottom: 50px;
}

.no-skrollr #layer3 {
  width: 100%;
  height: auto;
  bottom: -3px;
}

.no-skrollr #art div img {
  max-width: 100%;
  max-height: 100%;
}


/* queries */

@media only screen and (max-width: 1210px) {
	.qR{float:right;margin: 26px 0 26px 26px;}
	.qL{float:left;margin: 26px 26px 26px 0 }
	.dek {margin:0 auto;padding:0 12px}
	#title{
		max-width: 760px;
		height:460px;
		margin-top: -240px;
		margin-left:-400px;
	}
	h1{font-size: 96px;line-height:100px;}
	h2{font-size: 34px;line-height:36px;}
}



@media only screen and (max-width: 728px)  {
	h1{font-size: 74px;line-height:78px;}
	h2{font-size: 30px;line-height:32px;}
	#title{
		max-width: 500px;
		height:400px;
		margin-top: -200px;
		margin-left:-250px;
	}
	#subFade3{margin-top: 20px}
	.pull{font-size: 34px; line-height:36px;}
	.bubbleR, .bubbleL{min-height: 200px;width: 280px;}


}

@media only screen and (max-width: 620px)  {

	.dek {font-size: 18px; line-height: 22px;}
	.qR{float:none;margin: 12px;}
	.qL{float:none;margin: 12px; }
	.qR, .qL img{width: 100%}

	.bubbleR, .bubbleL
	{	width: 90%;min-height: 100px;
	position: relative;	}
	.bubbleR:after 	{	display: none;	}
	.bubbleR:before 	{	display: none;	}
	.bubbleL:after 	{	display: none;	}
	.bubbleL:before 	{	display: none;	}
	.panelRow{min-width:480px;}
	.panel img{max-width: 240px;}




}


/* MOBILE window less than 568px wide */
@media only screen and (max-width: 520px)  {
	.dek {font-size: 16px; line-height: 20px;}
	h1{font-size: 50px;line-height:54px;}
	h2{font-size: 22px;line-height:24px;}
	.subhead{font-size: 14px; line-height: 1.2em;}
	#title{
		max-width: 400px;
		height:300px;
		margin-top: -150px;
		margin-left:-200px;
	}
	.panelRow{min-width:400px;}
	.panel img{max-width: 200px;}
	.try2 img{width: 100%}

  .recirc1 {width: 100%;}
}



@media only screen and (max-width: 400px)  {
	.dek {font-size: 16px; line-height: 20px;}
	h1{font-size: 40px;line-height:45px;}
	h2{font-size: 16px;line-height:18px;}
	#title{
		max-width: 300px;
		height:200px;
		top:40%;
		margin-left:-150px;
	}
	.panelRow{min-width:320px;}
	.panel img{max-width: 160px;}
}