@import url('https://fonts.googleapis.com/css2?family=Bellota+Text:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Bellota+Text:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Shadows+Into+Light+Two&display=swap');



@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Shadows+Into+Light+Two&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap');


* {box-sizing:border-box;}

body {
	background-color: 	white;
	font-family: 		Bellota Text,  Arial, Verdana, sans-serif; 
	margin:				0px;
}

body a {
	text-decoration: 	none;
	color:				white;
}

body a:hover {
	text-decoration: underline solid 2px;
	text-underline-offset: 0.3em;
}
/* drop down menu for small screens ----------------------------- */
button {
	font-family:		Bellota Text,  Arial, Verdana, sans-serif; 
}

.textBorder_blue {
	border: 			5px solid #b0cce8;
	padding:			10px 20px 10px 20px;
	border-radius:		10px;
	
}


#menubuttonwrapper {
	width:				100%;
	height:				60px;
	position:			absolute;
	top:				5px;
	padding-right:		20px;
	text-align:			right;
	z-index:			101;
	border:				solid 0px red;
	display:			none;
}
#dropdownmenubutton {
	width:				60px;
	height:				60px;
	background-image: 	url("images/menuicon.png");
	background-size: 	cover;
	border: 			none;
	cursor: 			pointer;
	background-color: 	transparent;
}

/* from W3 Schools */


/* The container <div> - needed to position the dropdown content */
.dropdown {

	position: 			relative;
	display: 			inline-block;
  
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	
	top: 				70px;
	width:				200px;
	display: 			none;
	position: 			absolute;
	background-color: 	#f1f1f1;
	min-width: 			160px;
	box-shadow: 		0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 			102;
}

/* Links inside the dropdown */
.dropdown-content a {
	color: 				black;
	padding: 			12px 16px;
	text-decoration: 	none;
	display: 			block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
		background-color: 	#c6d9ec;
		text-decoration:	none;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}




/* ------------------------------------------------------------- */

#wrapper {
	position:			relative;
	background-color: 	white;
	position: 			relative;
	
}

#nav_bg {
	position: 			absolute;
	top:				0px;
	left:				0px;
	width:				100%;
	height:				70px;
	padding-top:		30px;
	text-align:			center;
	background-color: 	#8cb3d9; 
	z-index:			50;
	opacity:			0.3;
	border-top: 		0px solid #1d4062;
}
#nav_container {
	position: 			absolute;
	top:				0px;
	left:				0px;
	width:				100%;
	height:				70px;
	padding-top:		30px;
	text-align:			center;
	z-index:			50;
	opacity:			1.0;
	border-bottom: 		5px solid white;
}

nav {
	font-family:		Cal Sans, Arial;
	width:				450px;
	margin: 			auto;
	padding:			auto;
	font-size:			13px;
	color:				orange; /* #cccc00; */
	border: 			solid 0px white;
}

nav ul {
	list-style-type: 	none;
	display: 			flex;
	flex-direction: 	row;
	margin: 			auto;
	padding-left: 		0;
	padding-right: 		0;
	
}
nav li {
	padding: 			5px 10px 5px 10px;
	text-align:			center;
}
nav a {
	text-decoration: 	none;
	color:				black; /* #ffffb3; */
}

nav a:link {
	color: 				white; /* #ffffb3; */
}
nav a:visited {
	color: 				white; /* #ffffb3; */
}

nav a:hover {
	color: 			 	#ffff66; 
	text-decoration: 	underline solid 5px #ff5c33;
	text-underline-offset: 1.35em; 
	
}	
.line {
	/* color: 			 #ffffb3; */
	text-decoration: underline solid 5px #ff5c33;
	text-underline-offset: 0.5em; 
	
}	
#contactButton {
	border:				0;
	font-family: 		Cal Sans, Bellota Text,  Arial, Verdana, sans-serif;
	background:			#ffcc00; /* #cccc00; */
	font-size:			11px;
	color:				#333300;
	border-radius:		10px;
	width:				125px;
	cursor:				pointer;
}
#contactButton:hover {
	background:			#ffff66;
}

#quicklinkssection {
	position:			relative;
	top: 20px;
	margin-top:			-20px;
	background-color: 	#b3cde5;
	text-align:			center;
	width:				100%;
	z-index:			10;
	align-items: 		center;
	font-size:			16px;
	color: 				black;
	background-size:	1200px;
	border: 			1px solid #b3cde5;
	padding-bottom:		0px;
	opacity:			1;
}

#quicklinkspanel {

	position: 			relative;
	display: 			flex;
	flex-wrap: 			wrap;
	max-width:			685px;
	width:				80%;
	background-repeat: 	no-repeat;
	z-index:			7;
	margin: 			0 auto;
	border: 			solid 0px red;
	margin-bottom:		20px;
	align-items:		center;
}

.quicklinkwrapper_orange {

	border: 			solid 0px blue;
	top: 				0px;
	width:				150px;
	height:				250px;
	margin: 			10px 10px 10px 10px;
	border-top-left-radius: 50px;
	border-bottom-right-radius: 50px;
	background: 		white;
	cursor:				pointer;
}
.quicklinkwrapper_orange:hover {
	/* box-shadow: 		-4px 4px 0px 4px rgba(255, 194, 102, 0.8); */
	box-shadow: 		0px 0px 0px 10px rgba(255, 194, 102, 0.8);
}
.quicklinkwrapper_pink {

	border: 			solid 0px blue;
	top: 				0px;
	width:				150px;
	height:				250px;
	margin: 			10px 10px 10px 10px;
	border-top-left-radius: 50px;
	border-bottom-right-radius: 50px;
	background: 		white;
	cursor:				pointer;
}
.quicklinkwrapper_pink:hover {
	box-shadow: 		0px 0px 0px 10px rgba(255, 128, 193, 0.5);
}
.quicklinkwrapper_blue {

	border: 			solid 0px blue;
	top: 				0px;
	width:				150px;
	height:				250px;
	margin: 			10px 10px 10px 10px;
	border-top-left-radius: 50px;
	border-bottom-right-radius: 50px;
	background: 		white;
	cursor:				pointer;
}
.quicklinkwrapper_blue:hover {
	box-shadow: 		0px 0px 0px 10px rgba(122, 167, 209, 0.7);
}

.quicklinkimg {
	border: solid 0px green;
	width:	150px;
	height: 140px;
	padding-top:	20px;
	border-top-left-radius: 50px;
	
	
}

.quicklinkimg_orange {
	border: solid 0px green;
	width:	150px;
	height: 140px;
	padding-top:	20px;
	border-top-left-radius: 50px;
	background-color: #ffebcc;
	
}

.quicklinkwrapper_green {
	border: 			solid 0px blue;
	top: 				0px;
	width:				150px;
	height:				250px;
	margin: 			10px 10px 10px 10px;
	border-top-left-radius: 50px;
	border-bottom-right-radius: 50px;
	background: 		white;
	cursor:				pointer;
}
.quicklinkimg_green {
	border: solid 0px green;
	width:	150px;
	height: 140px;
	padding-top:	20px;
	border-top-left-radius: 50px;
	background-color: #ccffcc;
	
}
.quicklinkwrapper_green:hover {
	box-shadow: 		0px 0px 0px 10px rgba(179, 255, 179, 0.8);
}

.quicklinkimg_pink {
	border: solid 0px green;
	width:	150px;
	height: 140px;
	padding-top:	20px;
	border-top-left-radius: 50px;
	background-color: #ffcce6;
	
}
.quicklinkimg_blue {
	border: solid 0px green;
	width:	150px;
	height: 140px;
	padding-top:	20px;
	border-top-left-radius: 50px;
	background-color:	#cce6ff;
	
}

.quicklinkimg img {
	border-top-left-radius: 50px
}
.quicklinktext {
	border: 			solid 0px purple;
	width:				150px;
	height:				110px;
	border-bottom-right-radius: 50px;
	text-align:			left;
	padding: 			10px;
	background-color:	#c6d9ec;
}


#footerdiv {
	position:			relative;
	padding:			15px;
	top:				20px;
	background-color: 	#17334f;
	text-align:			center;
	line-height:		8px;
	height:				100px;
	width:				100%;
	z-index:			5;
	text-align:			center;
	align-items: 		center;
	font-size:			12px;
	color: 				lightblue;
}

#footerdiv img {
	width:				20px;
	height:				20px;
	margin-left:		10px;
	margin-right:		10px;
}
#footerdiv a {
	text-decoration: 	none;
}

#footerdiv a:link {
	color: 				#ffffcc;
}
#footerdiv a:hover {
	color: 				white;
	text-decoration: 	underline;
	text-underline-offset: 0.3em;
}
#footerdiv a:visited {
	color: 				#ffffcc;
}
	
#logo {
	position:			absolute;
	top:				100px;
	left:				30px;
	z-index:			100;
	background-image:	url("images/newicon.png");
	background-size:	cover;
	width:				100px;
	height:				100px;
	opacity:			0.9;
	cursor: 			pointer;
}

#title {
	position:			absolute;
	top:				103px;
	left:				130px;
	height:				100px;
	z-index:			100;
	font-family: 		Cal Sans, Bellota Text, Shadows Into Light Two,  Arial, Verdana, sans-serif; 
	color:				white;
	padding-left:		25px;
	padding-top:		10px;
	font-size:			25px;
	text-shadow: 		2px 2px 5px black;
	opacity:			1;
}

#pagetitle {
	border: 			solid 0px purple;
	position: 			absolute;
	top:				153px;
	left:				130px;
	height:				50px;
	width:				200px;
	font-family: 		Cal Sans, Bellota Text, Shadows Into Light Two,  Arial, Verdana, sans-serif; 
	color:				#b0cce8;
	padding-left:		25px;
	font-size:			15px;
	z-index:			100;
	opacity:			0.7;
	text-shadow: 		2px 2px 5px black;
}

#homehero {
	position: 			absolute;
	top:				0px;
	left:				0px;	
	background-color: 	white;
	height: 			350px;
	width:				100%;
	background-image: 	linear-gradient(to bottom, rgb(0, 0, 153, 0.8), rgb(0, 0, 153, 0.3), rgb(255, 255, 255, 0), rgb(255, 255, 255, 0), rgb(255, 255, 255, 0)), url("images/mainherobg.jpg");
	background-size: 	cover;
	background-repeat: 	no-repeat;
	background-attachment: fixed;
	
	z-index:			1;
	
}
#programminghero {
position: 			absolute;
	top:				0px;
	left:				0px;	
	background-color: 	white;
	height: 			350px;
	width:				100%;
	background-image: 	linear-gradient(to right, rgb(0, 26, 51, 0.8), rgb(0, 53, 102, 0.7), rgb(0, 53, 102, 0.5), rgb(0, 53, 102, 0.2), rgb(0, 53, 102, 0.2)), url("images/secondarybg.png");
	background-size: 	cover;
	background-position:	center 0px;
	background-repeat: 	no-repeat;
	background-attachment: fixed;
	z-index:			1;	
}
#starchasergamehero {
	position: 			absolute;
	top:				0px;
	left:				0px;	
	background-color: 	white;
	height: 			350px;
	width:				100%;
	background-image: 	linear-gradient(to bottom, rgb(0, 0, 153, 1.0), rgb(0, 0, 153, 0.4), rgb(255, 255, 255, 0), rgb(255, 255, 255, 0), rgb(255, 255, 255, 0)), url("images/gameherobg.png");
	background-size: 	cover;
	background-repeat: 	no-repeat;
	background-attachment: fixed;
	z-index:			1;
	
}

#slotmachinegamehero {
	position: 			absolute;
	top:				0px;
	left:				0px;	
	background-color: 	white;
	height: 			350px;
	width:				100%;
	background-image: 	linear-gradient(to bottom, rgb(0, 0, 153, 1.0), rgb(0, 0, 153, 0.4), rgb(255, 255, 255, 0), rgb(255, 255, 255, 0), rgb(255, 255, 255, 0)), url("images/slotmachinehero.jpg");
	background-size: 	cover;
	background-repeat: 	no-repeat;
	background-attachment: fixed;
	z-index:			1;
	
}

#hobbieshero {
	position: 			absolute;
	top:				0px;
	left:				0px;	
	background-color: 	white;
	height: 			350px;
	width:				100%;
	background-image: 	linear-gradient(to bottom, rgb(0, 0, 77, 0.8), rgb(0, 0, 77, 0.6), rgb(57, 115, 172, 0.6), rgb(57, 115, 172, 0.2), rgb(57, 115, 172, 0.2)), url("images/hobbiesherobg.jpg");
	background-size:	800px;
	background-repeat: 	repeat-x;
	
	
	z-index:			1;
	
}


.reefbutton {
	margin: 0 auto;
	text-align: center;

}

.reefbutton button{
	background-color: 	#ffad33;
	color: 				black;
	margin: 			0 auto;
	margin-bottom:		20px;
	padding: 			5px;
	width: 				200px;
	border-radius: 		15px;
	text-align: 		center;
	font-size: 			14px;
	border: 			none;
	
}
.reefbutton a  button{
	text-decoration: 	none;
}
.reefbutton a:hover button {
	background-color: 	#ffdb4d;
	text-decoration: 	none;
	
}


#butterflyfish1 {
	border: 			solid 0px purple;
	position: 			absolute;
	top:				130px;
	left:				500px;
	height:				130px;
	width:				150px;
	padding-left:		25px;
	font-size:			17px;
	z-index:			19;
	background-image: 	url("images/copperbandfish.png");
	background-repeat:	no-repeat;
	background-size:	150px;
}

#butterflyfish2 {
	border: 			solid 0px purple;
	position: 			absolute;
	top:				100px;
	left:				700px;
	height:				85px;
	width:				95px;
	z-index:			18;
	background-image: 	url("images/copperbandfish2.png");
	background-repeat:	no-repeat;
	background-size:	90px;
}

#butterflyfish3 {
	border: 			solid 0px purple;
	position: 			absolute;
	top:				150px;
	left:				1200px;
	height:				65px;
	width:				70px;
	z-index:			18;
	background-image: 	url("images/copperbandfish2.png");
	background-repeat:	no-repeat;
	background-size:	65px;
}

#herocurve {
	position: 			absolute;
	top:				260px;
	left:				0px;
	
	width: 				100%;
	height: 			60px;

	background-image:	url("images/herocurve.png");
	background-size: 	100% 100%;
	background-repeat: 	no-repeat;
	z-index:			20;
	border: 			solid 0px red;
}
#content {
	position: 			absolute;
	top:				320px;
	left:				0px;
	
	width: 				100%;

	background-color:	white;
	background-size: 	100%;
	background-repeat: 	no-repeat;
	z-index:			20;
	border: 			solid 0px green;
	padding:			auto;
	padding-bottom:		20px;
	border: 			solid 0px green;
}

#content_wrapper{
	position: 			relative;
	display: 			flex;
	flex-wrap: 			nowrap;
	max-width:			1000px;
	min-height:			400px;
	background-size: 	100%;
	background-repeat: 	no-repeat;
	z-index:			7;
	margin: 			0 auto;
	padding:			0px;
	border: 			solid 0px blue;
}

#subpage_intro {
	position: 			relative;
	max-width:			1000px;
	background-color:	white;
	background-size: 	100%;
	background-repeat: 	no-repeat;
	z-index:			7;
	margin: 			0 auto;
	text-align:			center;
	border: 			solid 0px red;
	padding:			30px;
}

#content a {
	color:				black;
}

.prog_bluerow {
	margin-top:			10px;
	margin-bottom:		10px;
	border-top-right-radius:		150px;
	border-bottom-right-radius:		150px;
	width:				95%;
	border-top: 		0px solid #b3cde5;
	background-color: 	#d9e6f2;
	background-size:	1200px;
	background-position:	right;
	background-repeat:	repeat-y;
	background-image:	linear-gradient(to right, rgb(179, 205, 229, 0), rgb(179, 205, 229, 0), rgb(179, 205, 229, 0), rgb(179, 205, 229, 0), rgb(179, 205, 229, 0), rgb(179, 205, 229, 0.6), rgb(179, 205, 229, 0.7)); /* ), url("images/gamedivbg1.png"); */
}
.prog_greenrow {
	border-top-right-radius:		150px;
	border-bottom-right-radius:		150px;
	border-top: 		0px solid #b3cde5;
	width:				95%;
	background-color: 	#e6ffe6;
	background-size:	900px;
	background-position:	right;
	background-repeat:	repeat-y;
	background-image:	linear-gradient(to right, rgb(179, 255, 179, 0), rgb(179, 255, 179, 0), rgb(179, 255, 179, 0), rgb(179, 255, 179, 0), rgb(179, 255, 179, 0), rgb(179, 255, 179, 0.8), rgb(179, 255, 179, 1)); /*), url("images/webbg1.png"); */
	
	margin-top:			10px;
	margin-bottom:		10px;
}
.prog_purplerow {
	border-top-right-radius:		150px;
	border-bottom-right-radius:		150px;
	border-top: 		0px solid #b3cde5;
	width:				95%;
	background-color: 	#e7ddee;
	background-size:	900px;
	background-position:	right;
	background-repeat:	repeat-y;
	background-image:	linear-gradient(to right, rgb(195, 170, 212, 0), rgb(195, 170, 212, 0), rgb(195, 170, 212, 0), rgb(195, 170, 212, 0), rgb(195, 170, 212, 0), rgb(195, 170, 212, 0.5), rgb(195, 170, 212, 0.7)); /*), url("images/webbg1.png"); */
	
	margin-top:			10px;
	margin-bottom:		10px;
}
.progrow_contentwrapper{
	position: 			relative;
	display: 			flex;
	flex-wrap: 			wrap-reverse;
	max-width:			800px;
	background-size: 	100%;
	background-repeat: 	no-repeat;
	z-index:			7;
	margin: 			0 auto;
	padding:			20px 30px 20px 20px;
	border: 			solid 0px blue;
}
.progrow_leftcontent {
	margin: 			auto;
	border: 			solid 0px green;
		
}

.progrow_leftcontent img {
	width:				100px;
	height:				150px;
}

.progrow_rightcontent {
	float: 				left;
	margin: 			auto;
	width:				70%;
	text-align: 		left;
	padding:			0px;
	padding-left:		20px;
	border: 			solid 0px purple;
}


#left_content {
	
	width: 				600px;
	max-width: 			800px;
	min-width:			400px;
	margin: 			auto;
	text-align: 		right;
	padding:			20px;
	padding-right:		30px;
	border: 			solid 0px green;
	text-align:			justify;
}
#right_content {
	margin: 			auto;
	border: 			solid 0px blue;
	padding:			20px;
}

	
.item img{
	border-radius:		0px; 
	border-top-left-radius:	45px;
	border-bottom-right-radius:	45px;
}

#garden_contentwrapper {
	background-color: 	#c6ecd9;
	width:				100%;
	border:				0px solid #c6ecd9;
}

#reef_contentwrapper {
	background-color: 	white;
	width:				100%;
	padding:			20px;
	border:				0px solid #c6ecd9;
}

#content_wrapper_reversewrap{
	display: 			flex;
	flex-wrap: 			wrap-reverse;
	max-width: 			1000px;
	margin: 			auto;
	padding: 			auto;
	border: 			solid 0px red;
}
#left_content_righttext {
	margin: 			auto;
	border: 			solid 0px green;
}

#right_content_righttext {
	margin: 			auto;
	min-width: 			400px;
	max-width: 			600px;
	text-align: 		left;
	padding:			20px;
	border: 			solid 0px purple;
}

/* additional content sub section ---------------------------- */

#subcontent {
	
	position:			relative;
	background-color: 	#76a6d6;
	text-align:			center;
	width:				100%;
	z-index:			10;
	opacity:			1;
	align-items: 		center;
	font-size:			16px;
	color: 				black;
	border: 			0px solid red;
	padding:			20px 30px 20px 30px;
	opacity:			1;
	
}

/* - end of additional sub content section -------------------- */

.slideshowimg {
	margin:				20px 5px 10px 5px;
}

.slideshowimg img {
	border-radius:		25px;

}


/* game div --------------------------- */

/* game display div when the screen is too small for the game */

#gamediv_4smallscreens {
	width:				100%;
	padding:			20px;
	border:				solid 0px red;
	display:			none;
	background-color:	yellow;
	text-align:			center;
}

#game_displaydiv{
	display: 			flex;
	flex-wrap: 			wrap-reverse;
	max-width: 			1000px;
	margin: 			auto;
	margin-top:			30px;
	margin-bottom:		20px;
	padding: 			auto;
	border: 			solid 0px red;
}
#slotmachinegame_leftdiv {
	width:				100%;
	max-width:			550px;
	margin: 			auto;
	margin-top:			20px;
	border: 			solid 0px green;
	z-index:			6;
}

#slotmachinediv_4smallscreens {
	width:				100%;
	padding:			20px;
	border:				solid 0px red;
	display:			none;
	background-color:	yellow;
	text-align:			center;
}
#game_leftdiv {
	width:				450px;
	margin: 			auto;
	margin-top:			20px;
	border: 			solid 0px green;
	z-index:			6;
}

#game_rightdiv {
	position:			relative;
	margin: 			auto;
	min-width: 			300px;
	max-width: 			430px;
	text-align: 		left;
	padding:			0px;
	margin-top:			20px;
	border: 			solid 0px purple;
	z-index:			6;
}


#game_pagedescription_menu {
	border: 			solid 0px red;

	top:				0;
	width:				430px;
	height:				50px;
	text-align: 		left;
	padding:			0px;
	padding-left:		20px;
	background:			#8cb3d9;
	font-weight:		bold;
	font-size:			18px;
	color:				white;
	display:			flex;
	align-items: 		center;
	border-top-right-radius:		10px;
	border-top-left-radius:		10px;
	z-index:			5;
}
#game_pagedescription_body {

	border: 			solid 0px blue;
	top:				30px;
	width:				430px;
	height:				95px;
	text-align: 		left;
	padding:			20px;
	background:			#b3cce6;
	font-size:			16px;
	
	z-index:			4;
}

#game_gamedescription_menu {
	border: 			solid 0px red;
	top:				135px;
	width:				430px;
	height:				50px;
	text-align: 		left;
	padding:			0px;
	padding-left:		20px;
	background:			#c6c66c;
	font-weight:		bold;
	font-size:			18px;
	color:				white;
	display:			flex;
	align-items: 		center;
	z-index:			5;
}
#game_gamedescription_body {
	border: 			solid 0px blue;
	top:				165px;
	width:				430px;
	height:				145px;
	text-align: 		left;
	padding:			10px;
	padding-top:		20px;
	padding-left:		20px;
	background:			#dbdba3;
	font-size:			16px;
	z-index:			4;
}

#game_gameinstruction_menu {
	border: 			solid 0px red;
	top:				135px;
	width:				430px;
	height:				50px;
	text-align: 		left;
	padding-top:		0px;
	padding-left:		20px;
	background:			#c785a6;
	font-weight:		bold;
	font-size:			18px;
	color:				white;
	display:			flex;
	align-items: 		center;
	z-index:			5;
}
#game_gameinstruction_body {
	border: 			solid 0px blue;
	top:				165px;
	width:				430px;
	height:				350px;
	text-align: 		left;
	padding:			10px;
	padding-top:		20px;
	padding-left:		20px;
	background:			#dfb9cc;
	font-size:			16px;
	z-index:			4;
}
#game_gameinstruction_body img {
	vertical-align:		sub;
}

#game_endpiece {

	border: 			solid 0px blue;
	top:				30px;
	width:				430px;
	height:				20px;
	text-align: 		left;
	padding:			0px;
	background:			#8cb3d9;
	font-size:			16px;
	
	z-index:			4;
	border-bottom-right-radius:		10px;
	border-bottom-left-radius:		10px;
}

#game_rightdiv image {
	float: left;
}

#game_bgimage1 {
	position:			absolute;
	top:				250px;
	left:				55%;
	width:				296px;
	height:				293px;
	background-image:	url('images/gamecontroller1.png');
	z-index:			2;
	opacity:			0.6;
}
	
#game_bgimage2 {
	position:			absolute;
	top:				-40px;
	left:				65%;
	width:				239px;
	height:				188px;
	background-image:	url('images/gamecontroller2.png');
	z-index:			2;
	opacity:			0.6;
}



#content_wrapper_progpage_{
	display: 			flex;
	flex-wrap: 			wrap;
	max-width: 			600px;
	margin: 			auto;
	padding: 			auto;
	border: 			solid 0px red;
}
.floatImageLeft {
	float: 				left;
}

.floatImageRight {
	float: 				right;
}


/* popup modal for reef video */

#modal {
    position: 			fixed;
	z-index: 			9999;
    top: 				0;
    left: 				0;
    height: 			100%;
    width: 				100%;
    background-color: 	rgba(0,0,0,.5);
    display: 			none;
    justify-content: 	center;
    align-items: 		center;
	text-decoration: 	none;
}

.modal__window {
  position: 			relative;
  z-index: 				9999;
  top: 					10px;
  background-color: 	white;
  background-image: 	linear-gradient(to bottom, rgba(0, 153, 204, 0.70), rgba(0, 153, 204, 0.30), white,  rgba(128, 128, 255, 0.00));
  padding: 				1em 1.5em;
  border-radius: 		15px;
}

.modal__close {
  position: 			absolute;
  top: 					0px;
  right: 				10px;
  color: 				black;
  font-size:			28px;
  font:					arial;
  cursor:				pointer;
}

/*
#modal:not(:target) {
    visibility: 		hidden;
    opacity: 			0;
}

*/

/* ******************************** */



@media only screen and (max-width: 1280px) {
	#butterflyfish1 {
		left:			475px;
	}
	#butterflyfish2 {
		left:			650px;
	}
	#butterflyfish3 {
		left:		85%;
	}
	
}

@media only screen and (max-width: 950px) {

	#butterflyfish3 {
		display:		none;
	}
}

@media only screen and (max-width: 900px) {
	#game_bgimage1 {
		top:			20px;
		left: 			40px;
	}
	
	#slotmachinegamehero {
		background-size:	1100px;
	}
}	

@media only screen and (max-width: 860px) {	

	#butterflyfish1 {
		left:			55%;
	}
	#butterflyfish2 {
		left:			75%;
	}
	
	#quicklinkspanel {
		max-width:	350px;
	}
}

@media only screen and (max-width: 765px) {	
	#butterflyfish1 {
		left:			55%;
	}
	#butterflyfish2 {
		left:		75%;
	}
	
}


@media only screen and (max-width: 700px) {
	
	#content {
		display: 		flex;
		flex-wrap: 		wrap;

	}
	#content_wrapper{
		display: 		flex;
		flex-wrap: 		wrap;
		margin: 		auto;
	}
	#left_content {
		width: 			100%;
		padding-top: 	20px;
		padding-bottom: 20px;
		height:			50%;
		text-align: 	left;
	}

	#right_content {
		margin-bottom:	20px;
	}
	#game_leftdiv {
		width:	100%;
	}
	#slotmachinegamehero {
		background-size:		1000px;
	}
	
}
@media only screen and (max-width: 600px) {
	#menubuttonwrapper { /*  display the hamburger menu when the screen is <= 600px */
		display: 		inline; 
		top:			15px;
	}
	#dropdownmenubutton {
		width:			40px;
		height:			40px;
	}
	nav {
		display: 		none;
	}
	#content {
		display: 		flex;
		flex-wrap: 		wrap;

	}
	#content_wrapper{
		display: 		flex;
		flex-wrap: 		wrap;
		margin: 		auto;
	}
	#left_content {
		width: 			100%;
		padding-top: 	20px;
		height: 		100%;
		text-align: 	left;
	}

	#right_content {
		margin-bottom:	20px;
	}
	
	#modal iframe {
		width:			448px;
		height:			247px;
	}
}

@media only screen and (max-width: 500px) {

	
	#right_content {
		margin-bottom:	20px;
	}
	#slotmachinediv_4smallscreens {
		display:		inline;
	}
	#slotmachine_container {
		display:		none;
	}
	#game_rightdiv {
		padding-left:	20px;
		padding-right:	20px;
		width:			100%;
		min-width:		50px;
	}
	#modal iframe {
		width:			399px;
		height:			220px;
	}
	
}

@media only screen and (max-width: 450px) {	

	#butterflyfish2 {
		display:		none;
	}

	#right_content {
		margin-bottom:	30px;
	}
	#quicklinkssection {
		display:		none;
	}
	
	#game_rightdiv {
		padding-left:	20px;
		padding-right:	20px;
		width:			100%;
		min-width:		50px;
	}
	
	#modal iframe {
		width:			348px;
		height:			192px;
	}
	
	#subcontent {
		top:			20px;
	}
	
}
@media only screen and (max-width: 420px) {	
	.progrow_rightcontent {
		width:		90%;
		padding-left:	0px;
	}
	
	
}
@media only screen and (max-width: 390px) {	

	#left_content {
		width: 				325px;
		max-width: 			350px;
		min-width:			275px;
		margin-left:		10px;
	}
	
	#title {
		font-size:			20px;
	}
	#modal iframe {
		width:			295px;
		height:			165px;
	}
	
}

@media only screen and (max-width: 350px) {	
/* hide the game div as it's too big
	Display the link instead */
	
	#game_leftdiv {
		display: 	none;
	}
	
	#game_rightdiv {
		padding:		20px;
	}
	#gamediv_4smallscreens {
		display:	inline;	
	}
	
	
	
}


/* SLIDESHOW CSS ******************************************/

/*!
 * jQuery Brazzers Carousel v1.0.0 (http://webdesign-master.ru)
 * Copyright 2015 WebDesign Master.
 */
 
.brazzers-daddy:after {
	content: "";
	display: table;
	clear: both;
}
.brazzers-daddy {
	position: relative;
}
.brazzers-daddy img {
	width: 100%;
	position: relative;
	display: none;
	top: 0;
	left: 0;
	margin-bottom: 10px;
}
.brazzers-daddy img:first-child {
	display: block;
}
.tmb-wrap {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}
.tmb-wrap .tmb-wrap-table {
	display: table;
	height: 100%;
	width: 100%;
}
.tmb-wrap-table div {
	display: table-cell;
	transition: all .3s ease;
	border-bottom: 5px solid transparent;
	padding-top: 10px;
	-webkit-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}
.tmb-wrap-table div.active {
	border-color: #FBB254;
}
.tmb-wrap-table div:first-child:last-child {
	border-color: transparent;
}