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


/*Background Properties*/

.wrapper {
	background-color: rgba(255,255,255,0.44);
	width: 99%;
	margin-right: auto; 
	margin-left: auto;
	padding-top: 1%;
	border-top-left-radius: 40px;
	border-bottom-right-radius: 40px;
}

.footer {
	background-color:rgba(255,255,255,0.44);
	margin: 0;
	padding-top: 0.5%;
	padding-bottom: 0.5%;
	font-family: Verdana, sans-serif;
	font-size:12px;
	text-align:center; 
	color:rgba(0,0,0,1);
}


/*Content Box*/

.box_1 {
	width: 90%; 
	margin-right: auto; 
	margin-left: auto;
}
.box_2 {
	width: 90%; 
	margin-left: auto;
	margin-right: auto;
}
.clear {
	clear:both;
}
.clear_small {
	visibility:visible; 
	clear: both;
}

/*Nav Bar*/

.nav_buttons {
	width: 46%;
	margin-left: 1%;
	margin-top: 1%;
	float: left;
	clear: none;
	display: inline;
}
.nav_buttons_selected {
	border-bottom: medium solid #0C0C0C;
	width: 46%;
	margin-left: 1%;
	margin-top: 1%;
	float: left;
	clear: none;
	display: inline;
}

/*Sub Nav Bar*/

.sub_nav {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top:5%;
	margin-bottom:2%;
	font-family: Verdana, sans-serif;
	font-size: 15px;
	text-align:center;
}
.sub_backcolor_about /*GREEN*/ {
	background-color: #6FCE6C;
}
.sub_backcolor_process /*YELLOW*/ {
	background-color: #ECE95D;
}
.sub_backcolor_games /*ORANGE*/ {
	background-color: #FFCC6F;
}
.sub_backcolor_outcomes /*PURPLE*/ {
	background-color:#C895FF;
}


/*Text Controlers*/

.header {
	font-family:Helvetica Neue, Helvetica, Verdana, Arial, sans-serif;
	font-size:30px;
	text-align:center;
}
.header_sub {
	font-family:Helvetica Neue, Helvetica, Verdana, Arial, sans-serif;
	font-size:23px;
	text-align:center;
	text-decoration:underline;
}
.text_main {
	font-family: Helvetica Neue, Helvetica, Verdana, Arial, sans-serif; 
	font-size: 16px; 
	text-align:left;
}
.text_figcation {
	font-family: Helvetica Neue, Helvetica, Verdana, Arial, sans-serif;
	font-size: 10px;
	text-align: left;
}

/*Image Controlers*/

.image_title {
	width: 100%; 
	float: right; 
}
.image_character { 
	width: 100%; 
	float: right; 
}
.image_character_purple /*PURPLE GUY ON OUTCOMES*/{
	width: 100%; 
	float: right; 
	margin-top: -175px;
}
.image_smallcharacter {
	width: 50%; 
	margin-bottom: -23%;
}
.image_pic_purple {
	width: 100%;
	border: medium solid #7D4C81;
}
.image_pic_orange {
	width: 100%;
	border: medium solid #FFCC6F;
}
.image_size {
	width: 100%;
}

/*Video Controlers*/

.video_size {
	width: 95%;
	max-width: 850px;
	margin-right: auto; 
	margin-left: auto;
	background-color: #00BAC5;
}
.video_scale {
	width: 100%;
	border:0;
}

/*Image Carosel --- THE REST OF THE PAGE*/

/* Slideshow container */
.slideshow-container {
	max-width: 400px;
	margin-left: auto; 
	margin-right: auto;
	position: relative;
	align-content: center;
	text-align: center;
	align-items: center;
	padding: auto;
	border: thick double #E78E13;
}

/* Next & previous buttons */
.prev {
	cursor: pointer;
	position: absolute;
	top: 12px;
	color: #E78E13;
	font-weight: bold;
	font-size: 25px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	left: 10px;
}

.next {
	cursor: pointer;
	position: absolute;
	top: 12px;
	color: #E78E13;
	font-weight: bold;
	font-size: 25px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	right: 10px;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}