@charset "UTF-8";
/* CSS Document */

body{
	font-family: Arial, Helvetica, sans-serif;
	background-color:black;
}

#cover-mask{
	position:absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left:0;
	z-index: 20;
	background-color:black;
	
	-webkit-animation-name: cover-mask;
    -webkit-animation-delay: 2s;
	-webkit-animation-duration: 24s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;

	/* CSS3 - Chrome, Edge, Firefox, and Internet Explorer */
	animation-name: cover-mask;
	animation-delay: 2s;
	animation-duration: 20s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

@-webkit-keyframes cover-mask {
	  0% {opacity: 1.0;}
	 40% {opacity: 0.0;}
	 80% {opacity: 0.0;}
	100% {opacity: 1.0;}
}

@keyframes cover-mask {
	  0% {opacity: 1.0;}
	 40% {opacity: 0.0;}
	 80% {opacity: 0.0;}
	100% {opacity: 1.0;}
}

#cover-header{
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	top: 5%;
	/*color: #B2DEFF;*/
	color:white;
	font-size: 0;
	font-weight: 800;
	font-style: oblique;
	z-index:50;
	opacity:0;
	
		/* Safari not yet CSS3 Compliant */
	-webkit-animation-name: cover-header;
	-webkit-animation-delay: 5s;
	-webkit-animation-duration: 5s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;

	/* CSS3 - Chrome, Edge, Firefox, and Internet Explorer */
	animation-name: cover-header;
	animation-delay: 5s;
	animation-duration: 5s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
#navigate{
	position: absolute;
	left: 0;
	right: 0;
	top: 6.25rem;
	height: auto;
	z-index:21;
}

#open{
	position:relative;
	float: left;
	margin-left: 10%;
	z-index:21;
}
#open a{
	posistion:relative;
	font-weight: 800;
	text-decoration: none;
	opacity:0;
	color: white;	
	
	/* Safari not yet CSS3 Compliant */
	-webkit-animation-name: open;
	-webkit-animation-delay: 8s;
	-webkit-animation-duration: 5s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;

	/* CSS3 - Chrome, Edge, Firefox, and Internet Explorer */
	animation-name: open;
	animation-delay: 8s;
	animation-duration: 5s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

#help{
	position:relative;
	float: right;
	margin-right: 10%;
	z-index:21;
}
#help a{
    position:relative;
	font-weight: 800;
	text-decoration: none;
	opacity:0;
	color: white;

	/* Safari - not yet CSS3 compliant */	
	-webkit-animation-name: help;
	-webkit-animation-delay: 8s;
	-webkit-animation-duration: 5s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;

	/* CSS3 - Chrome, Edge, Firefox, and Internet Explorer */	
	animation-name: help;
	animation-delay: 8s;
	animation-duration: 5s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
/* The videoinsert class is used for making a video be the background instead of an image. */
.videoInsert {
    position: absolute; 
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -100;
    background-size: cover;
    overflow: hidden;
}

/*@media screen only and (min-width:1201px){*/

#animation-backdrop{
	position: absolute; 
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto;
    z-index: 19;
    background-size: cover;
    overflow: hidden;
}
}

@-webkit-keyframes cover-header {
	  0% {opacity: 0; font-size:0; letter-spacing: 0.3rem;}
     70% {opacity: 1; font-size:2.75rem; letter-spacing: 0.5rem;}
	100% {opacity: 0.7; font-size:2.75rem; letter-spacing: 0.5rem]}
}

@keyframes cover-header {
	  0% {opacity: 0; font-size:0.3rem; letter-spacing: 0.3rem;}
     70% {opacity: 1; font-size:2.75rem; letter-spacing: 0.5rem;}
	100% {opacity: 0.7; font-size:2.75rem; letter-spacing: 0.5rem;}
}

@-webkit-keyframes open {
	  0% {opacity: 0; font-size:0;}
     80% {opacity: 1; font-size:2rem;}
	100% {opacity: 0.7; font-size:1.75rem;}
}

@keyframes open {
	  0% {opacity: 0; font-size:0;}
     80% {opacity: 1; font-size:2rem;}
	100% {opacity: 0.7; font-size:1.75rem;}
}

@-webkit-keyframes help {
	  0% {opacity: 0; font-size:0;}
     80% {opacity: 1; font-size:2rem;}
	100% {opacity: 0.7; font-size:1.75rem;}
}

/*CSS3 - Chrome, Edge, Firefox, and Internet Explorer */
@keyframes help{ 
	  0% {opacity: 0; font-size:0;}
     80% {opacity: 1; font-size:2rem;}
	100% {opacity: 0.7; font-size:1.75rem;}
}

@media only screen and (orientation:portrait){
   #animation-backdrop{
	  background-image:url(../Media/Images/heidi-and-mark-portrait.jpg);
   }	
}
@media only screen and (orientation:landscape){
   #animation-backdrop{
	  background-image:url(../Media/Images/heidi-and-mark-yellowstone-1920x1080.jpg);
   }	
}

/*****************************************
  smartphones
******************************************/  

@media only screen and (max-width:750px){
	
   @-webkit-keyframes cover-header {
	  0% {opacity: 0; font-size:0; letter-spacing: 0.3rem;}
     70% {opacity: 1; font-size:1.75rem; letter-spacing: 0.3rem}
	100% {opacity: 0.7; font-size:1.25rem; letter-spacing: 0.3rem}
   }

   @keyframes cover-header {
	  0% {opacity: 0; font-size:0; letter-spacing: 0.3rem;}
     70% {opacity: 1; font-size:1.75rem; letter-spacing: 0.3rem}
	100% {opacity: 0.7; font-size:1.25rem; letter-spacing: 0.3rem}
   }

   @-webkit-keyframes open {
	  0% {opacity: 0; font-size:0;}
     80% {opacity: 1; font-size:1.5rem;}
	100% {opacity: 1; font-size:1.0rem;}
   }

   @keyframes open {
	  0% {opacity: 0; font-size:0;}
     80% {opacity: 1; font-size:1.5rem;}
	100% {opacity: 1; font-size:1.0rem;}
   }

   @-webkit-keyframes help {
	  0% {opacity: 0; font-size:0;}
     80% {opacity: 1; font-size:1.5rem;}
	100% {opacity: 1; font-size:1.0rem;}
   }

   /*CSS3 - Chrome, Edge, Firefox, and Internet Explorer */
   @keyframes help{ 
	  0% {opacity: 0; font-size:0;}
     80% {opacity: 1; font-size:1.5rem;}
	100% {opacity: 1; font-size:1.0rem;}
   }

}

@media only screen and and (max-width:750px) (orientation:landscape){
   #animation-backdrop{
	  background-image:url(../Media/Images/heidi-and-mark-yellowstone-1920x1080.jpg);
   }	   
}

@media only screen and and (max-width:750px) (orientation:portrait){
   #animation-backdrop{
	  background-image:url(../Media/Images/heidi-and-mark-portrait.jpg);
   }	   
}