/*keep this same for all*/
/*the main div container parallel to and above mainBox div*/
#wepLab4
{
	position: relative;
	width:100%;
	height:100%;

	top:0%;
	left:0%;

	margin:0;
	padding:0;	

	/*background-color: #37C2DA;*/
	
	/*change only this*/

}


/*class to add for next page blink*/
.nextPageBlink
{
	animation-duration: 1s;
  animation-name: nextPage;
  animation-iteration-count: infinite;
}

@keyframes nextPage {
  0% {
    opacity: 0;
    color:yellow;
  }

  25% {
   opacity: 0.3;
   color:green;
  }

  50% {
   opacity: 0.7;
   color:blue;
  }

   75% {
   opacity: 1;
   color:brown;
  }

   100% {
   opacity: 0.5;
   color:black;
  }
}

/*class to be added for the blinkEffect*/
.blinkEffect
{
  animation-duration: 1s;
  animation-name: blink;
  animation-iteration-count: infinite;
}

@keyframes blink {
  from {
    opacity: 0;
  }

  to {
   opacity: 1;
  }
}

/*class to be added for shake effect*/
.startRaceEffect
{
  animation-duration: 1s;
  animation-name: shakeMe;
  animation-iteration-count: infinite;
}

@keyframes shakeMe {
  0% {
    left: 10%;
    color:green;
  }

  50% {
   left: 11%;
   color:brown;
  }

100%{
	left: 10%;

	}

}

/*rotating effect along y axis*/
.rotateEffect
{
	animation-duration: 1s;
 	 animation-name: rotateMe;
 	 animation-iteration-count: infinite;
}

@keyframes rotateMe {
  0% {
   -webkit-transform: rotateX(0deg); /* Chrome, Safari, Opera */
	transform: rotateX(0deg);
  }

50% {
   -webkit-transform: rotateX(180deg); /* Chrome, Safari, Opera */
	transform: rotateX(180deg);
  }
  
 100% {
   -webkit-transform: rotateX(0deg); /* Chrome, Safari, Opera */
	transform: rotateX(0deg);
  }
}

/*slide A */
#slideA, #slideB
{
	position:absolute;
	top:15%;
	left:10%;

	width:80%;
	height:70%;

	/*border:1px solid red;*/
}

#slideA
{
	/*display: none;*/
}

/*how do we do work text*/
#energyWork, #reasonEnergy
{
	position: absolute;
	top:5%;

	width: 100%;
	text-align: center;
	
	color:white;

	font-size: 2em;

	text-shadow:0px 6px 8px #000000;	

	font-weight: bolder;
}


#reasonEnergy
{
	display: none;
	top:90%;
	
}

/*static and moving body*/
#slideAbody, #slideAbodyMotion
{
	position: absolute;
	top:25%;
	left:42%;

	width:20%;

	opacity: 1;
}

#slideAbodyMotion
{
	top:23%;
	left:40%;

	width:23%;

	opacity: 0;
}

/*to slideB button*/
#toSlideB
{
	display: none;
	position: absolute;
        z-index: 10;
        padding: 0;
        top: 95%;
        right: -10%;
      
        padding:1%;
       
       
        border-radius: 50%;
        cursor: pointer;
      /*  color: #890000;
        box-shadow: 0 0 5px 2px #890000, 0 0 5px #c9c9c9; background: #fff;*/

        width: 12%;

}


#toSlideB:hover #activityNextHoverBtn,
#toSlideA:hover #activityPrevHoverBtn
{
  display: block;
}


#toSlideB:hover #activityNextBtn,
#toSlideA:hover #activityPrevBtn
{
  display: none;
}




/*slideB */
#slideB{
	display: none; /*everything else defined above with slideA*/
}

#slideBQ1 {
	position: absolute;
	top:0%;
	width:100%;

	text-align: center;

	color:white;

	font-size: 1.5em;
}

#slideBQ2
{	display: none;
	position: absolute;
	top:0%;
	width:100%;

	text-align: center;
	color:white;

	font-size: 2em;

	text-shadow:0px 6px 8px #000000;	

	font-weight: bolder;
}

 
/*for the land to run*/
#land1, #land2
{
	position:absolute;
	top:40%;
	left:5%;
	width: 90%;
	height: 0.1%;
	border: 1px solid white;
}

#land2
{
	position: absolute;
	top:90%;
}

#land1Mark1, #land2Mark1
{
	position: absolute;
	top:37%;
	left:10%;
	height: 5%;
	border: 1px solid brown;
}

#land1Mark2, #land2Mark2
{
	display: none;
	position: absolute;
	top:37%;
	left:70%;
	height: 5%;
	border: 1px solid brown;
}

#land2Mark1, #land2Mark2
{
	top:87%; /* override this top position */
}

 #land2Mark2
 {
 	left:51%; /*override this left position*/
 }

 /*strong and weak man images*/
 #slideBstrong{
 	position: absolute;
	top:13.5%;
	left:3%;
 	width:8%;
 }

 #slideBstrongLast{
	opacity: 0;
	position: absolute;
	top:13.5%;
	left:64%;
 	width:7%;
 }

 #strongMove{
		opacity: 0;
 	position: absolute;
	top:12%;
	left:7%;
 	width:9%;
 }

 #slideBweak{
 	position: absolute;
 	top:66%;
 	left:4%;
 	width: 6%;
 }

 #slideBweakLast{
	opacity: 0;
	position: absolute;
 	top:67%;
 	left:47%;
 	width: 8%;
 }

 #weakMove{
	opacity: 0;
 	position: absolute;
 	top:64.5%;
 	left:7%;
 	width: 8%;
 }

/*start race hand*/
 #startRace{
 	position: absolute;
 	top:50%;
 	left:10%;
	
	cursor: pointer;

 	font-size: 2em;
 }

 /*how this happens transition*/
 #howThisHappen{
	display: none;
	position: absolute;
	top:50%;
	left:90%;
	width: 5%;
	height:9%;
	cursor: pointer;

	background-image: url("../../../../../images/arrows/arrow.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#howThisHappen:hover{
	background-image: url("../../../../../images/arrows/arrow_hover.png");
}

#pointDescribeStrong, #pointDescribeWeak
{
	display: none;
	position: absolute;
	top:25%;
	right:40%;

	font-size: 1.3em;

	color:darkgreen;
}

#pointDescribeWeak{
	top:70%;
	right:55%;

	color:darkblue;
}

/*reason for different distances*/
#slideBreasonStrong
{
	display: none;
	position: absolute;
	top:20%;
	left:70%;

	font-size: 1.3em;
	width:50%;
	
	/*border:1px solid red;*/
}

#slideBreasonStrong > img
{
	position: absolute;
	top:10%;
	left:0%;

	width:20%;
}

#slideBreasonStrong > p
{
	position: relative;
	top:0%;
	left:25%;
	
	color:darkgreen;
}

#slideBreasonWeak
{
	display: none;
	position: absolute;
	top:75%;
	left:55%;
	
	font-size: 1.3em;
	width:50%;
	
	/*border:1px solid red;*/
}

#slideBreasonWeak > img
{
	position: absolute;
	top:10%;
	left:0%;

	width:20%;
}

#slideBreasonWeak > p
{
	position: relative;
	top:0%;
	left:25%;
	
	color: darkblue;
}

#whatIsEnergy{
	display: none;
	position: absolute;
	top:100%;
	width:100%;

	text-align: center;
	color:white;

	font-size: 2em;

	text-shadow:0px 6px 8px #000000;	

	font-weight: bolder;
}

/*replay for lab 4*/
#toSlideA{
	display: none;
  	position: absolute;
    z-index: 10;
    padding: 0;
    top: 85%;
    right: 95%;
  
    padding:1%;
    cursor: pointer;
   /* background: #fff;
   
    border-radius: 50%;
    
    color: #890000;
    box-shadow: 0 0 5px 2px #890000, 0 0 5px #c9c9c9;*/\
    width:12%;
 }

 #toSlideA > img{
 	width: 200%;
 }