body {
  background-color: #D0D0D0; /*#D4D4D4*/
}

@font-face {
   font-family: Vineta;
   src: url(vineta-bt-regular.ttf);
}

.Intro {
	inherits: true;
 	position: fixed;
 	top: 10%;
 	left:34%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2.6em;
	background-color: white;
	padding: 15px;
	border-radius: 5px;
	z-index:5;
/* Animation: name duration timing-function delay fill-mode */
	animation: fadeOut 0.5s ease 5s forwards;
}

@keyframes fadeOut {
  from { opacity: 1; visibility: visible; }
  to { 
    opacity: 0; 
    visibility: hidden; 
    /* pointer-events prevents clicking through the invisible box */
    pointer-events: none; 
  } 
}

#Barn {
	width: 1276px;
	height: 718px;
	display: flex;
	left:109px;
	top:0;
	position:fixed;
	Z-index:2;
}

#Wood{
	inherits: true;
	width:20.661%;
	height:37.137%;
	left:59.339%;
	top:62.863%;
	position:absolute;
	z-index:4;
	
}

#Razor{
	inherits: true;
	height: 7.5%;
	width:4.202%;
	left: 26.926%;
	top:2%;
	position: absolute;
	z-index:3;
}

#Razor:hover ~ #Aerobie{
	transition:opacity 1s;
	z-index:6;
	opacity:0.9;
}

#Aerobie{
	inherits: true;
	width: 50%;
	top: 26.74%;
	left: 23.249%;
	background-color:white;
	border-radius:15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2.6em;
	text-align: justify;
	padding:1%;
	opacity:0;
	position:absolute;
	z-index:1;
	transition:opacity 0.50s linear;	
}

#BarnRun{
	inherits: true;
	height: 6.915%;
	width:33.960%;
	left:32.35%;
	top:2%;
	opacity:0.75;
	position: absolute;
	z-index:3;
}

#BarnRun:hover ~ #Welcome{
	z-index:6;
	opacity:0.9;
}

#Welcome{
	width: 72.0%;
	height: 46%;
	background-color:white;
	border-radius:15px;
	opacity:0;
	top: 26.74%;
	left: 11.25%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2.8em;
	text-align: justify;
	padding:1%;
	position:absolute;
	z-index:1;
	transition:opacity 0.50s linear;
}

#Niteize{
	inherits: true;
	height: 7.5%; /* 6.816% */
	width:4.075%;
	left:67.3%;
	top:2%;
	z-index:3;	
	position: absolute;
}

#Niteize:hover ~ #Night{
	transition:opacity 1s linear;
	z-index:6;
	opacity:0.9;
}

#Night{
	inherits: true;
	width: 50%;
	top: 26.74%;
	left: 23.249%;
	border-radius:15px;
	background-color:white;
	padding:1%;
	opacity:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 3em;
	text-align: justify;
	position:absolute;
	z-index:1;
	transition:opacity 0.50s linear;	
}

#Bldg{
	inherits: true;
	width: 4.319%;
	height:3.804%;
	top: 10.166%;
	left: 47.160%;
	position:absolute;
	z-index:3;
}

#Bldg:hover ~ #Build{
	transition:opacity 1s linear;
	z-index:6;
	opacity:0.9;	
}

#Build{
	inherits: true;
	width: 4.163%;
	height: 5.947%;
	top: 20.539%;
	left: 47.40%;
	opacity:0;
	position:absolute;
	z-index:1;
	transition:opacity 0.25s linear;		
}

#Morton{
	width: 4.163%;
	height: 5.947%;
	top: 20.539%;
	left: 47.40%;
	position: absolute;
	z-index:3;
}

#Morton:hover ~ #Rules{
	transition:opacity 1s linear;
	z-index:6;
	opacity:0.9;
}

#Rules{
	inherits: true;
	width: 80.12%;
	height: 73.5%;
	background-color:white;
	border-radius:15px;
	opacity:0;
	top: 26.74%;
	left: 8.189%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2.4em;
	position:absolute;
	z-index:1;
	transition:opacity 0.50s linear;
}

#FramesBox {
	inherits:true;
	top: 28.5%;
	left:39%;
	width: 20%;
	height: 3.5%;
	text-align:center;
	position: absolute;
	z-index:3;
}

#Frames{
	display: inline; /* Allows width to fit content */
	min-width: 1%;
 	text-align: center;
 	padding-top: 1%;
 	padding-bottom:1%;
 	padding-left: 2%;
 	padding-right:2%;
	border-radius: 12px;
	font-size: 2.5em;
	border: 0px solid rgb(232,201,170,0.5);
	background-color: rgb(232,201,170,0.5); 
	font-family: Arial, Helvetica, sans-serif;
	
	z-index:3;
}

#Slider{
	inherits: true;
	width: auto;
	height: 53.8%;
	top: 35%;
	left: 28.535%;
	background-color: #FFFFFF;
	position: absolute;
	z-index:3;
}

#HighBrake{
	inherits: true;
	width:4.903%;
	height:1.660%;
	left:6.226%;
	top:60.788%;
	border:0;
	position:absolute;
	z-index:3;
}

#HighBrake:hover ~ #Brake{
	inherits: true;	
	transition:opacity 01s linear;
	z-index:5;
	opacity:0.9;
}

#Brake{
	inherits: true;
	height:10.364%;
	left:8.716%;
	top:50.079%;
	bottom:60.443%;
	opacity:0;
	position:absolute;
	z-index:1;
}

#License{
	inherits: true;
	left:2.790%;
	top:88.000%;
	width:6.252%;
	height:3.000%;
	position:absolute;
	z-index:3;
}

#License:hover ~ #Plate{
	opacity:0.9;
	z-index:6;
}

#Plate{
	inherits: true;
	width: 17.887%;
	height: 7.010%;
	margin:0.5%;
	opacity:0;
	top: 70%;
	left:1.290%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2.4em;
	position:absolute;
	z-index:1;
	transition:opacity 0.50s linear;
}

#Deere{
	inherits: true;
	width:11.362%;
	height:9.544%;
	left:81.673%;
	top:72.407%;
	position:absolute;
	z-index:3;
}

#Deere:hover ~ #Gator{
	inherits: true;
	opacity:0.9;
	z-index:6;
}

#Gator{
	inherits:true;
	width:25%;
	height:10%;
	left:81.673%;
	top:62.407%;
	opacity:0;
	position:absolute;
	transition:opacity 0.50s linear;
	Z-index:1;
}

#DescrTextBox {
	inherits:true;
	top: 88.8%; /* 88.8% */
	left:10%;
	width: 80%;
	text-align:center;
	position: absolute;
	z-index:5;
}

#Description {
	display: inline; /* Allows width to fit content */
	min-width: 1%;
 	text-align: center;
	border: 0px solid gb(204,204,204,0.7);
	border-radius: 1em;
	font-size: 4.5em;
	background-color: rgb(204,204,204,0.7); 
	font-family: Arial, Helvetica, sans-serif;
	z-index:5;
}

#Footer1{
	top: 96.75%;
	left: 21.316%;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	font-size: 2.5em;
	position:absolute;
	z-index:4;
}
#Footer2{
	top: 96.75%;
	left: 35.137%;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	font-size: 2.5em;
	position:absolute;
	z-index:4;
}
#Footer3{
	top: 96.75%;
	left: 44.168%;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	font-size: 2.5em;
	position:absolute;
	z-index:4;
}

#Footer2:Hover ~ #PACLand{
	transition:opacity 1s;
	z-index:6;
	opacity:1;
}

#PACLand {
	inherits: true;
	top: 10%;
	height:86%;
	left: 6.965%;
	width:80%;
	opacity:0;
	position:absolute;
	z-index:1;
	transition:opacity 0.50s linear;	
}

#Visitors {
	width: 2%;
	height: 3.5%;
	top: 0.5%;
	left: 0.5%;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	font-size: 2.5em;
	position:fixed;
	position:absolute;
	z-index:4;
}