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

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

#cover-header{
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	top: 5%;
	/*color: #B2DEFF;*/
	color:white;
	font-size: 24px;
	font-weight: 800;
	font-style: oblique;
	z-index:50;
	letter-spacing:0.5em;
	opacity:1;
}
	
#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:1;
	color: white;	
}

#help{
	position:relative;
	float: right;
	margin-right: 10%;
	z-index:21;
}

#help a{
    position:relative;
	font-weight: 800;
	text-decoration: none;
	opacity:1;
	color: white;
}
/* 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;
}

@media only screen and (orientation:portrait){
   #animation-backdrop{ 
	  background-image:url(../Media/Images/sheep-portrait.jpg);
   }	
   #cover-header{
	   font-size:18px;
	   letter-spacing:0.25em;
   }
}
@media only screen and (orientation:landscape){
   #animation-backdrop{
	  background-image:url(../Media/Images/sheep-landscape.jpg);
   }	
   #open{
	   font-size: 14px;
   }
   #help{
	   font-size: 14px;
   }
}

/*****************************************
  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/sheep-landscape.jpg);
   }	   
}

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