/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Sky Story CSS 2022
Initial CSS, HTML, and .js originally done by Jonathan Nicol (f6design.com)

Table of Contents:
1.Reset
2.Global styles
3.Typography
4. Page Structure
5. Navigation
6. Augmented Reality and Video Button Styles
7. Parallax Styles 
8. Easter Egg
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1. Reset
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

html, body, div, span,  object, h1, h2, h3, h4, h5, h6, p, a, em, img, strong, b, u, i, center, ol, ul, li, fieldset, form, label, legend, caption, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, section, time, mark, audio, video {	margin: 0;	padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {	content: '';content: none;}


*, *:before, *:after, #man-bg, #mother-bg {
-moz-box-sizing: none;
-webkit-box-sizing: none;

}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2. Global site styles
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

html {
  color: black;
  font-size:18px;
    line-height: 1.2;
    --typescale: 1.45;

    --base-font-size: 1rem;
  
  --font_primaryFamily: 'GT America', helvetica, arial, sans-serif;
  --font_bodyFamily: 'Dashiell', serif;

    /* Type Presets are just multipliers of the typescale */

    --type-preset-1__fontSize: calc(1em * var(--typescale) * var(--typescale) * var(--typescale) * var(--typescale) * var(--typescale));
    --type-preset-2__fontSize: calc(1em * var(--typescale) * var(--typescale) * var(--typescale) * var(--typescale));
    --type-preset-3__fontSize: calc(1em * var(--typescale) * var(--typescale) * var(--typescale));
    --type-preset-4__fontSize: calc(1em * var(--typescale) * var(--typescale));
    --type-preset-5__fontSize: calc(1em * var(--typescale));
    --type-preset-6__fontSize: 1em;
    --type-preset-7__fontSize: calc(1em / var(--typescale));

 
 
    
}

body {background: #fff; overflow-x: hidden; 
	font-size: var(--base-font-size);
  line-height: var(--big-line-height);
}

.panel{
	
	background: blue;
}
.homepage{height: 14000px; }
.intructions {height: 400px;}
.clearfix:after {   content: ".";   visibility: hidden;   display: block;   height: 0;   clear: both;}
img { 	display:block;	}
#wrapper {position: relative;}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3. Typography
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/



/* Define the type presets */
.font-primary{
  font-family: var(--font_primaryFamily);
}


.font-body{
  font-family: var(--font_bodyFamily);
}

/* Define the type presets */
.type-preset-1 {
  font-size: var(--type-preset-1__fontSize);
}
.type-preset-2 {
  font-size: var(--type-preset-2__fontSize);
}
.type-preset-3 {
  font-size: var(--type-preset-3__fontSize);
}
.type-preset-4 {
  font-size: var(--type-preset-4__fontSize);
}
.type-preset-5 {
  font-size: var(--type-preset-5__fontSize);
}
.type-preset-6 {
  font-size: var(--type-preset-6__fontSize);
}
.type-preset-7 {
  font-size: var(--type-preset-7__fontSize);
}

   
  /* font modifiers, a la https://tailwindcss.com/docs/ */
.font-thin	{
    font-weight: 100;
  }

.font-extra-light	{
    font-weight: 200;
  }

.font-light	{
    font-weight: 300;
  }
.font-regular	{
    font-weight: 400;
  }
.font-medium	{
    font-weight: 500;
  }
.font-semibold	{
  font-weight: 600;
  }
.font-bold	{
    font-weight: 700;
  }
.font-extrabold	{
  font-weight: 800;
  }

.font-black	{
  font-weight: 900;
  }

  
.tracking-wide	{
    letter-spacing: 0.05em;
  }
.tracking-tight {
    letter-spacing: -0.025em;
  
} 
.tracking-tighter {
    letter-spacing: -0.05em;
  
}  
.uppercase	{ 
    text-transform: uppercase;
  }



h1, h2, h3, h4, h6, p, .interactive ul li a, .buttons{font-family: "roc-grotesk", Helvetica, Arial, sans-serif; color: #000d1c; }
h1, h2, h3, h4, h6{ font-weight: 700;} 
p, .interactive ul li a, .buttons{font-weight: 500; font-style: normal; }

h1{ margin: 0 0 25px 0;}
h2{ margin: 0 0 40px 0; }
h3{  }
h4{  }
h6{}
p{ }

/** the description of the project, etc **/

.columns{width:70%}
/* .columns h3, .text-area h3 { font-size: 1.4em; line-height: 140%; padding: 20px 15px 0 15px;  background: rgba(255, 255, 255, .95);} */
.columns p, .text-area p{  }

/* #title p {font-size: 1em; font-weight: normal; text-shadow: none; border: none; padding: 5px; width: 100%; line-height: 140%; margin: 0 0; background: none; padding: 0 15px 15px 15px; background: rgba(255, 255, 255, .95); } */

.text-area{ margin: 0 0 5px 0; border: 1px solid #80b8da; max-width: 800px;padding:60px 40px 60px 40px; background: rgba(255, 255, 255, .95); }

article a, article a:link, article a:active, article a:visited {color:#117dc2;outline: none;	text-decoration:none;}
a:hover { 	color:#000;	}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4. Page structure
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/



/** Header  **/
#branding {	width: 100%;background: #fff; height:70px;	z-index: 800;	position: fixed;	}
#branding img {	margin: 25px 0 5px 15px;	float:left;	width: 120px; height:auto;}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
5. Navigation
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


nav#primary {	z-index: 200; float:right;  margin:20px 75px 3px 0; }
nav#primary li {	position: relative;	height: 20px; margin:0 0; padding: 0; float:left; display: block}
nav#primary a {	display: block;	width: 20px;height: 20px;text-indent: -9999px;background:  url(../images/hi/pf-images-sprite.png) no-repeat  -397px -136px; opacity: .5;}
nav#primary a:hover, nav#primary a.active {	background: url(../images/hi/pf-images-sprite.png) no-repeat  -397px -136px; opacity: 1}
/* nav#primary span {	position: absolute;	right: 22px;top: 15px;display: none;padding: 4px 20px 4px 7px;color: #fff;white-space: nowrap;background: transparent url('../images/nav-arrow.png') 100% 50% no-repeat;	}
*/

nav#primary li a span{   display:none;   color:#fff;  font-family: Helvetica, Arial, sans-serif;   background:rgba(51,51,51,0.75);padding:5px;  width:150px;  text-indent: 0;   text-align:center;   position: absolute;   top:30px;    right:-75px;  z-index:600;
}
nav#primary li a { display: inline-block;}
nav#primary li a:hover span{ display:block; }

/*next and Previous buttons*/
a.prev,a.next {display: block; 	width: 48px;height: 48px;text-indent: -9999px;  top: 50px; right:20px;}
a.prev {margin: 0;background: transparent url( ) 0 -95px no-repeat;}
a.prev:hover {background: transparent url( ) 0 0 no-repeat;}

a.next {margin: 0; background:url(../images/hi/pf-images-sprite.png) no-repeat -377px -605px; }
a.next:hover {background: transparent  url(../images/hi/pf-images-sprite.png) no-repeat -428px -605px;}

/** Internalnav and rotate properties 
unused - #title .internalnav{-webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);-ms-transform: rotate(20deg);-o-transform: rotate(20deg); transform: rotate(20deg);}

.internalnav{width:75px; height:75px; float: right;}	**/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
6. Augmented Reality and Video Button Styles
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/



.buttons{float: right; width:100%; position: relative; height:60px;  margin: 0 0 0 0; padding: 5px 0;   }

.buttons a.next{float:right;}
article .buttons a{ height:37px;  color:#fff; display:block; float:left; padding:15px 10px 0 0; margin:-5px 5px 0 0; background: rgba(50, 175, 227, .7); }
article .buttons a:hover{ background: rgba(90, 159, 119, .7); }

.buttons a .ar-icon{background:url(../images/hi/pf-images-sprite.png) no-repeat -377px -505px;  width:48px; height:48px; display: block; float: left; margin: -13px 8px 0 5px;  }
.buttons a .video-icon{background:url(../images/hi/pf-images-sprite.png) no-repeat -377px -555px; width:48px; height:48px; display: block; float: left; margin: -13px 8px 0 5px;  }

.buttons a:hover .ar-icon{background:  url(../images/hi/pf-images-sprite.png) no-repeat -428px -505px;}
.buttons a:hover .video-icon{background: url(../images/hi/pf-images-sprite.png) no-repeat -428px -555px;}



/*.buttons  a span{   display:none;   color:#fff;  font-family: Helvetica, Arial, sans-serif;   background:rgba(51,51,51,0.75);padding:5px;   width:190px;  bottom:60px;    right:-5px;  text-indent: 0;   text-align:center;   position: absolute;   z-index:600;
}
.buttons a:hover span{ display:block; }*/


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
7. Parallax Styles
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* content */
#content {z-index: 300;position: relative; padding: 0 10px 0 0 0;margin: 0 auto; }	
#content article { }

.info{ margin-top:400px; max-width:800px}
/** article block styles
If I use % to set padding, the actual heights of the ##s will always be different, esp if I use 1000px as the article height.
 **/

/*the left transitions, to ease out the width resize*/	
#title-bg, #many-bg, #close-bg1,  #close-bg2,  #close-bg3,  #close-bg4, #woman-bg, #man-bg, #mother-bg, #lazyday-bg1, #lazyday-bg2, #lazyday-bg3, #lazyday-bg4, #singing-bg, #bewitched-bg, #thatswhy-bg, #about-bg{-webkit-transition: left 0.3s ease-in-out; -moz-transition: left 0.3s ease-in-out; -o-transition: left 0.3s ease-in-out; transition: left 0.3s ease-in-out;}

#parallax-triangle1, #parallax-triangle2, #parallax-wisp3, #parallax-wisp2, #parallax-wisp1{-webkit-transition: width 0.3s ease-in-out; -moz-transition: width 0.3s ease-in-out; -o-transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out;}




#title, #many, #power, #close, #woman, #man, #mother, #lazyday, #beautiful, #singing, #bewitched, #suddenly, #thatswhy, #about {position: absolute; ; display:block;  clear:both;}

#title {top: 0px; height:800px; padding: 200px 0 0 20%;  }
#many  {top: 1000px; height:900px; padding: 100px 0 0 5%;  }
#power {top: 2000px;  height:900px; padding: 100px 0 0 25%;  }
#close {top: 3000px; height:700px; padding: 300px 0 0 15%;  }	

#woman {top: 4000px; height:1000px; width:95%; padding: 0; }	
#man {top: 5000px; height:1000px; width:95%; padding: 0; }
#mother {top: 6000px; height:1000px; width:95%; padding: 0; }

#lazyday {top: 7000px; height:800px; padding: 200px 0 0 20%;  }
#beautiful {top: 8000px; height:800px; padding: 200px 0 0 25%;  }
#singing {top: 9000px; height:950px; padding: 50px 0 0 0; }

#bewitched {top: 10000px;  height:800px; padding: 200px 0 0 21%;}
#suddenly {top: 11000px;  height:950px; padding: 50px 0 0 23%; }
#thatswhy {top: 12000px;  height:700px; padding: 70px 0 0 6%; }
														
#about {top: 12700px;  height:400px;width:89%; padding: 200px 0 0 10%; }
#postscript {top: 13100px;  height:600px;width:89%; padding: 200px 0 0 10%; }


/*Global parallax div styles.*/	

		
#parallax-triangle1, #parallax-triangle2, #parallax-wisp3, #parallax-wisp2, #parallax-wisp1{	position: fixed;left: 50%; top:0;width: 1200px;margin-left: -600px;}

/** sprite styles **/
.triangle1-1, .triangle1-2, .wisp2-4, .wisp2-5 {width:500px; height:270px; background: url(../images/hi/pf-images-sprite.png) no-repeat -227px 0; }
.wisp1-5, .triangle2-1, .triangle2-2, .wisp2-6, .wisp2-8, #lazyday-bg2 {width:700px; height:177px; background: url(../images/hi/pf-images-sprite.png) no-repeat 0 -808px;}

/* all wisp/cloud div backgrounds.  The alignment is below, per id */
/*longest*/.wisp1-1, .wisp1-2, .wisp2-3{width:500px; height:146px; background: url(../images/hi/pf-images-sprite.png) no-repeat  0 -659px;}
/*medium*/.wisp1-4, .wisp2-1, .wisp2-2, .wisp2-7, .wisp3-4{background: url(../images/hi/pf-images-sprite.png) no-repeat  -401px -273px; width:300px; height:110px;}
/*curly*/.wisp1-3, .wisp2-9, .wisp3-1, .wisp3-3{background: url(../images/hi/pf-images-sprite.png) no-repeat -483px -394px; width:215px; height:107px;}

/* all aondo head div backgrounds.  The alignment is below, per id */
.wisp1-3, .wisp3-2 {background: url(../images/hi/pf-images-sprite.png) no-repeat 0 0; width:225px; height:347px;}


/** parallax bg absolute positioning **/
.triangle1-1, .triangle1-2, .triangle2-1, .triangle2-2, .wisp3-1, .wisp3-2, .wisp3-3, .wisp3-4, .wisp2-1, .wisp2-2, .wisp2-3, .wisp2-4, .wisp2-5, .wisp2-6, .wisp2-7, .wisp2-8, .wisp2-9, .wisp2-10, .wisp1-1, .wisp1-2, .wisp1-3, .wisp1-4, .wisp1-5, #title-bg, #many-bg, #close-bg1,  #close-bg2,  #close-bg3,  #close-bg4, #woman-bg, #man-bg, #mother-bg, #lazyday-bg1, #lazyday-bg2, #lazyday-bg3, #lazyday-bg4, #singing-bg, #bewitched-bg, #thatswhy-bg, #about-bg {position: absolute;}
	

/* triangle styles 1 */
#parallax-triangle1 {z-index: 70; }
	.triangle1-1 {top: 1090px;left: 40%;}
	.triangle1-2 {top: 2100px;left: 5%;}

/* triangle styles 2 */
#parallax-triangle2 {z-index: 60;}
	.triangle2-1 {top: 1200px;left: 20%;}
	.triangle2-2 {top: 2390px;left: 5%;}
	
/* wisp styles 3 */
#parallax-wisp3 {z-index: 50; }
	.wisp3-1 {top: 900px;  left:  95%;}
	.wisp3-2 {top: 980px; left:  10%;}
	.wisp3-3 {top: 2600px; left: -18%;}
	.wisp3-4 {top: 3030px; left:  80%;}

/* wisp styles 2 */
#parallax-wisp2 {z-index: 40; }   
	.wisp2-1 {top: 1240px;left: 100%;}
	.wisp2-2 {top: 2800px;left: -30%;}
	.wisp2-3 {top: 2243px;left: -25%;}
	.wisp2-4 {top: 3080px;left:  70%;}
	.wisp2-5 {top: 3700px;left: 100%;}
	.wisp2-6 {top: 3800px;left:   1%;}
	.wisp2-7 {top: 3890px;left:  10%;}
	.wisp2-8 {top: 6550px;left:  30%;}	
	.wisp2-9 {top: 6300px;left: -21%;}	

			
/* wisp styles 1 */
#parallax-wisp1 {z-index: 30;}
	.wisp1-1 {top:  500px;left: -30%;}
	.wisp1-2 {top: 1000px;left:  40%;}
	.wisp1-3 {top: 2880px;left:     4%;}
	.wisp1-4 {top: 2500px;left:   -10%;}
	.wisp1-5 {top: 2800px;left:    60%;}


		

/* foreground (ballons/landscape) positon:static means I can scroll it all on ipad, but will have to set the bg image of each section in css.  */
#parallax-backgrounds {z-index: 1;	position:fixed;	left: 10%; top: 0;	width: 1200px;margin-left: -470px;}




	/* backgrounds */
	#title-bg 	{background: url(../images/hi/title-mountains-bg.jpg) no-repeat 320px 53px; width:2400px; height:720px; top: 00px;	left: 25%; }
	#many-bg 	{background: url(../images/hi/title-mountains-bg.jpg) no-repeat 0 -670px; width:2400px; height:800px; top: 900px;	left: -5%; }
	/*power-bg is called above*/
	#close-bg1 	{
	background-image: url(../images/hi/triangle-repeat-white.png), url(../images/hi/white-blue-fade.png) ;
	background-position:  0 bottom, 0 0 ;background-repeat: repeat-x; width:2400px; height:650px; padding:100px 200px 0 200px;	top: 2000px;left: -15%; }
	#close-bg2 	{
	background:url(../images/hi/pf-images-sprite.png) repeat-x 0 -352px; width:369px; height:302px; padding:0;	top: 2100px;left: 20%; }
	#close-bg3 	{
	background:url(../images/hi/pf-images-sprite.png) repeat-x 0 -352px; width:369px; height:302px; padding:0;	top: 2100px;left: 60%; }
	#close-bg4 	{
	background:url(../images/hi/pf-images-sprite.png) repeat-x 0 -352px; width:369px; height:302px; padding:0;	top: 2100px;left: 100%; }

	
	
	
	#woman-bg {background:url(../images/hi/pf-people.jpg) no-repeat 100px 262px;  width:2400px; height:800px;  top: 3000px;left: 45%;}
	#man-bg {	background: #f0fafb url(../images/hi/pf-people.jpg) no-repeat 400px -562px;  width:2400px; height:640px; padding:0 700px 0 700px; border-top: 200px solid #f0fafb; border-bottom: 150px solid #f0fafb; top: 4000px;left: 15%;}
	#mother-bg {background: #f7ede3 url(../images/hi/pf-people.jpg) repeat-x 0 -1221px;  width:2400px; height:520px;  padding:0; border-top: 100px solid #f7ede3; border-bottom: 180px solid #f7ede3; top: 4950px;left: 10px;  }	
		
	#lazyday-bg1 {background: url(../images/hi/pf-images-sprite.png) no-repeat -519px -511px; width:180px; height:208px; top: 5700px;left: 28%; padding:0;}
	#lazyday-bg2 { top: 6050px;left: 32%; padding:0 0 0  300px;}
	#lazyday-bg3 {background: url(../images/hi/pf-images-sprite.png) no-repeat -519px -511px; width:180px; height:208px; top: 6000px;left: 38%; padding:0;}
	#lazyday-bg4 {background: url(../images/hi/pf-images-sprite.png) no-repeat -519px -511px; width:180px; height:208px; top: 6200px;left: 99%; padding:0;}	
	
	#singing-bg{background: url(../images/hi/pf-people.jpg) repeat-x -220px -1770px; width:472px; height:385px; top: 7400px;left: 70%;}
	#bewitched-bg{background: url(../images/hi/title-mountains-bg.jpg) no-repeat 0 -670px; width:2400px; height:800px; top: 8000px;left: 2%;}
	#thatswhy-bg{ background-image: url(../images/hi/triangle-repeat-white.png), url(../images/hi/white-blue-fade.png) ;background-position: 0 bottom, 0 0 ;
	background-repeat: repeat-x;width:2400px; height:1000px; top: 8800px; left: -2%;}
	#about-bg{ background: url(../images/hi/pf-people.jpg) no-repeat -120px -2160px; width:900px; height:458px;  top: 10300px; left: 65%;}