body {
background-color:#ffffff;
background-image: url('../media/site-back.png');
color:#111;
font-family:"BarlowCondensed", sans;
padding-top:5%;
}

h1 a,
h1 a:hover,
h1 a:focus,
h1 a:visited,
p a,
p a:hover,
p a:focus,
p a:visited {
  color: inherit;
  text-decoration: none;
}

.popup-message {
position:absolute;
top:14vw;
left:3vw;   
transform:rotate(-20deg);
transition:.2s;
}
.popup-message:active {
transform:rotate(350deg);
transition:.5s;
}
  
.text-align-center{
text-align:center;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 105px;
  z-index: 1000;
  background-color: #111;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-bottom:#555 solid 3px;    
border-opacity:25%;  
transition:1s;
transition-delay:3s;
}
.navbar:hover{
overflow:visible;
transition:1s;
transition-delay:3s;
}

.navbar-button-container {
margin-right:1.5%;
height:90%;
}
.navbar-button {
  float: right;
  display: block;
  color: #111;
  text-align: center;
  height:30%;
  width:10%;  
text-decoration: none;
  font-size: 1.25vw;
  background-color:#efe00e;
  margin-left:.75%;
  padding-top:.5%;
  border-bottom:.5vw solid #fff;
  font-family:"BarlowCondensed";
  font-weight:500;
	transition:.15s;
	margin-top:2.5%;
}

.navbar-button:hover {
  background-color: #553;
  color: white;
	border-bottom: .5vw solid #111;
}

.navbar-button.active {
  background-color: #111;
  color: white;
}

.navbar-logo-container{
width:35%;
margin-left:8%;
float:left;
font-family:"FlashFont";
color:white;
margin-top:.5%;
}
.navbar-logo{
width:15%;
float:left;
margin-right:5%;
margin-top:5%;
}
.navbar-logo-text{
width:72%;
float:left;
font-size:2.5vw;
color:white;
margin-top:7%;
font-weight:100;
}

.backgroundtest{
font-weight:700;
background-color:#f0f;

}

/* BACKEND CLASSES */
.fullpage {
	max-width: 100%;
	margin:11% 0;
}

/* BACKEND CLASSES END */
/* Test Classes */
.anim-header-div {
	max-width: 85%;
	height:13rem;
	
}

.anim-body-div {
	max-width: 72%;
	overflow:hidden;
	margin-left: auto;
	margin-right: 0;
	height:16rem;
}

.image-container {
	max-width: 90%;
	margin: auto;
	margin-bottom:40.5%;
}

.image-button-div{
	float: left;
	width: 31.834%;
	padding: .5%;
}


/* ANIMATIONS */
.animation-header {
	background-color: #efe00e;
	padding: 5% 2% 4% 10%;
	margin: 0;
	margin-right: 10%;
	text-align: end;
	color: #000000;
	animation-name: movein;
	animation-duration: 1.2s;
	animation-iteration-count: 1;
	animation-direction: reverse;
	position: relative;
	font-size:8vw;
	font-family:"FlashFont";
	font-weight:100;
	box-shadow:black 5px 5px 10px;
}
.animation-header:active {
animation:none;

}
.animation-body:active {
animation:none;

}


@keyframes movein {
	0% {
		transform: translateX(0%);
	}
	
	18% {
		transform: translateX(10%);
	}
	
	100% {
		transform: translateX(-100%);
	}
}

.animation-body {
	background-color: #202020;
	color: #efe00e;
	padding: 3% 0 3% 7%;
	position: relative;
	top: 1em;
	margin-left: 10%;
	font-weight: 600;
	text-align: left;
	animation-name: moveinbody;
	animation-duration: 1.2s;
	animation-iteration-count: 1;
	animation-direction: reverse;
	font-size:2vw;
	box-shadow:black -5px 5px 10px;
}

@keyframes moveinbody {
	0% {
		transform: translateX(0%);
	}
	
	18% {
		transform: translateX(-8%);
	}
	
	100% {
		transform: translateX(100%);
	}
}

.animation-body-mobile {
	background-color: #202020;
	color: #efe00e;
	padding: 2%;
	padding-right: 3%;
	text-align: right;
	animation-name: moveinbodymobile;
	animation-duration: .6s;
	animation-iteration-count: 1;
	animation-direction: reverse;
	position: relative;
	left: 2%;
}

@keyframes moveinbodymobile {
	0% {
		transform: translateX(0%);
	}
	
	5% {
		transform: translateX(-2%);
	}
	
	75% {
		transform: translateX(100%);
	}
	
	100% {
		transform: translateX(100%);
	}
}

/* ANIMATION END */
/* SCREEN SPECIFIC CLASSES */
/* DESKTOP */
@media (min-width: 768px) {
	.animation-body-mobile {
		display: none;
	}
	
	.desktop-only {
		display: block;
	}
	
	.mobile-only {
		display: none;
	}
}

.image-button-desktop {
	width: 98%;
	background-color: #000000;
	display: block;
	opacity: 90%;
	margin: auto;
	transition: .2s;
	position:relative;
	z-index:1;
}

.image-button-desktop:hover {
	transform: scale(1.1,1.1);
	outline: .5rem solid #efe00e;
  outline-offset: 0px;
	border-radius: 5%;
	background-color: #efe00e;
	opacity: 100%;
	z-index: 2; 
	position:relative;
}	
}



/* MOBILE */
@media screen and (max-width: 800px) {
	

	.animation-header {
		animation-duration: 1s;
		text-align: left;
		font-size:1.5rem;	
}
	
	.animation-body {
		animation-duration: 1s;
		text-align: left;
	}
	
	.anim-header-div {
		max-width: 100%;
		height:5rem;	
	}
	
	.anim-body-div {
		max-width: 100%;
	height:10rem;	
}
		
	.desktop-only {
		display: none;
	}
	
	.mobile-only {
		display: block;
	}

	}

	/* 2k DESKTOP */
	@media (min-width: 2050px) {
	
}


/* SCREEN SPECFIC CLASSES END */
/* IMAGE CLASSES */
.image-opacity {
	opacity: 80%;
}
.animation-subtype{
font-size:1.25vw;           
font-weight:300;
}   


footer{
background-color:#111;
color:white;
height:260px;
border-top:#555 solid 4.5px;
border-opacity:25%;
width:100%;
float:left;
}
.footer-container{
width:66%;
float:left;
margin-top:2.8%;
}

.footer-item-container{
width:20%;
float:left;
margin-top:-1.6%;
}
.footer-item{
text-align:center;
margin-bottom:-5%;
}
p.footer-item{
text-decoration:underline;
font-size:1.1rem;
}
h2.footer-item{
font-family:'FlashFont';
font-weight:100;
text-transform:uppercase;
font-size:1.6rem;
}

.footer-logo{
width:25%;
margin-left:8%;
float:left;
margin-top:4%;
}
.footer-logo-logo{
width:40%;
}

@media screen and (max-width: 800px) {
footer{
height:450px;

}
.footer-container{
width:100%;
}        
.footer-item-container{
width:100%;
margin-top:8%;
height:10px;
}
.footer-item{
width:100%;
float:left;
font-size:1rem;
text-align:center;
}
p.footer-item{
margin-top:8%;;
font-size:.9rem;
width:45%;
margin-left:3%;
}

.footer-logo{
width:100%;
margin-left:0%;
margin-top:12%;
margin-bottom:-7%;
}
.footer-logo-logo{
width:40%;
margin-left:30%;
}


.image-button-div {
                width: 100%;
                margin: auto;
                padding: 5% 0%;
        }
 
  .animation-header {
                animation-duration: 1s;
                text-align: left;
                font-size:10vw;
}

.anim-body-div{
height:10rem;
}
.anim-header-div{
height:5rem;
}
.animation-subtype{
font-size:3vw;
}
.popup-message{
top:200px;
font-size:3vw;
}
 
        .animation-body {
                animation-duration: 1s;
                text-align: left;
		font-size:3.5vw;
		margin-right:2%;
        }
 
        .anim-header-div {
                max-width: 100%;
 
        }
 
        .anim-body-div {
                max-width: 100%;
        }
 
        .desktop-only {
                display: none;
        }
 
        .mobile-only {
                display: block;
        } 
.button{
font-size:5vw;
} 
.navbar{
position:inherit;
height:180px;
margin-top:-8%;
}
.navbar-logo-container{
width:100%;
margin-left:.5%;
margin-bottom:-5%;
}
.navbar-button{
width:32.58%;
font-size:3vw;
height:5vw;
} 
.navbar-button-container{
margin-left:.9%;
}
.navbar-logo-text{
font-size:6vw;
width:100%;
text-align:center;
}
.navbar-logo{
margin-left:42.5%;
margin-bottom:-4%;
}


}