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


/*Background Properties*/

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

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


/*Content Box*/

.box_1 {
	width: 45%; 
	float: left;
	margin-left: 3.5%;
}
.box_2 {
	width: 90%; 
	margin-left: auto;
	margin-right: auto; 
}
.clear {
	clear:both;
}
.clear_small {
	visibility:hidden; 
}


/*Nav Bar*/

.nav_buttons {
	width: 22%;
	float: left;
	margin-left: 2.5%;
	clear: none;
	display: inline;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-bottom: -15px;
}
.nav_buttons_selected {
	border-bottom: medium solid #0C0C0C;
	width: 22%;
	float: left;
	margin-left: 2.5%;
	clear: none;
	display: inline;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-bottom: -15px;
}

/*Sub Nav Bar*/

.sub_nav {
	width: 98%;
	margin-left: auto;
	margin-right: auto;
	margin-top:4%;
	margin-bottom:2%;
	text-align:center;
	font-family: Verdana, sans-serif;
	font-size:16px;
}
.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:20px;
	text-align:left;
	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: 90%;
	float: right;
	margin-right: 5%;
}
.image_character { 
	width: 100%; 
	margin: auto;
}
.image_character_purple /*PURPLE GUY ON OUTCOMES*/{
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	margin-top: -170px;
}
.image_smallcharacter {
	width: 40%; 
	margin-bottom: -20%;
}
.image_pic_purple {
	width: 100%;
	border: medium solid #7D4C81;
}
.image_pic_orange {
	width: 100%;
	border: medium solid #FFCC6F;
}
.image_size {
	width: 100%;
	display: inherit;
}



/*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}
}