* {
	margin:0px;
	padding:0px;
	
}

body {
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	
}

h1 {
	font-size:2.5em;
	text-align:center;
	margin-top:20px;
	margin-bottom:15px;
	
}

p {
	color:black;
	line-height: 22px;
	font-size:1.1em;
	
}

header {
	padding:15px 0 15px 0;
	background-color:black;
	
}

.container {
	width:1200px;
	margin:auto;
	
}

.logo {
	width:230px;
	float:left;
	overflow:hidden;
	
}

.logoImage {
	background-image:url(images/logo.png);
	background-size:cover;
	height:60px;
	
	
}

.social_media {
	float:left;
	width:300px;
	margin-left:30px;
margin-top: 9px;
	
}

.social_media ul li {
	display:inline-block;
	
}

.social_media ul li a:hover {
	color:white;
	
}

.mobile_button {
	
	background-color:red;
	display:none;
	margin-top:15px;
	padding:10px;
	color:white;
	font-weight:bold;
	
}

.mobile_button:hover {
	cursor:pointer;
	
}

header nav {
	float:right;
	margin-top: 17px;
	
	
}

header nav ul li {
	display:inline-block;
	margin-right:15px;
	
}

header nav ul li:last-child {
	margin-right:0px;
	
}

header a {
	color:white;
	font-weight:bold;
	font-size: 1.429em;
	
}

header nav ul li a:hover {
	text-decoration:none;
	color:red;
	
}


/* slideshows */

.homepageSlideshow {
	width:100%;
	background-color:black;
	overflow:hidden;
	margin:auto;
	position:relative;
	
}

.slideshowImageContainer {
	position:absolute;
	top:0px;
	left:0px;
	
}

.slideshowImageContainer img {
	width:100%;
	
}

.slideshowImageText {
	padding:10px;
	position:absolute;
	bottom:0px;
	left:0px;
	background-color:black;
	width:100%;
	color:white;
	
}

.slideshowImageText p {
	color:white;
	line-height:20px;
}



.button {
	width: 20px;
height: 20px;
	border-radius:20px;
	background-color:red;
	display:inline-block;
	margin-right:10px;
	margin-top:15px;
	
}

.button:hover {
	cursor:pointer;
	background-color:black;
	
}

.button:last-child {
	margin-right:0px;
	
}

.active_button {
	background-color:black;
	
}



.slideshowPictureMove {
	-webkit-animation-name:slideshowPictureMove;
	-webkit-animation-duration:2s;
	-webkit-animation-timing-function:ease;
}

.visable {
	z-index:2;
	
}

.visableText {
	z-index:3;
}



.animationPicture {
	z-index:4;
	
}

.animationText {
	z-index:5;
	
}

.slideshowImageText h4 {
	font-size: 1.4em;
	
}

.slideshowImageText h5 {
	font-size: 1.1em;
	
}

.slideshowImageText p {
	font-size: .9em;
	
}

.slideshowImageText h4, .slideshowImageText h5, .slideshowImageText p {
	margin-top:2px;
	margin-bottom:2px;
	
}




@keyframes slideshowPictureMove {
	0% {
		top:-100%;
	}
	100% {
		top:0%;
	}
}


.introText {
	margin-top:10px;
	
}
.introText h1 {
	text-align:center;
	
}



.portal_link {
	width: 372px;
	height:auto;
	display:inline-block;
	margin-right:15px;
	position:relative;
	overflow:hidden;
	margin-bottom:15px;
	margin-top: 10px;
	
}

.portal_link:hover {
	cursor:pointer;
	
}



.portal_link .opacityBackground {
	position:absolute;
	top:-100%;
	left:0px;
	width:100%;
	height:auto;
	opacity:.5;
	
}

.portal_link h3 {
	 position:absolute;
  top: 150%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  color:white;
  font-weight:bold;
  font-size:1.9em;
  -webkit-user-select:none;
  text-align:center;
	
}

.overlay {
	width:100%;
	height:100%;
	background-color:black;
	position:fixed;
	top:0px;
	left:0px;
	z-index:100;
	overflow:scroll;
	display:none;
	
}

.game_overview_container {
	width:70%;
	margin:auto;
	padding:30px;
	background-color:white;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	opacity:1;
	
}

.gameOverviewImage {
	width:48%;
	float:left;
	
}

.gameOverviewDetails {
	float:right;
	width:48%;
	
}


.exitButton {
	position:absolute;
	top:20px;
	right:20px;
	font-size:36px;
	color:white;
	-webkit-user-select:none;
	z-index:10000;
	
}

.exitButton:hover {
	cursor:pointer;
	color:red;
	
}


.testimonies {
	position:relative;
	overflow:hidden;
	
}

.testimony_area {
	
	height: 100px;
	width:75%;
	margin:auto;
	margin-top:25px;
}

.testimony_example {
	text-align:center;
	width:100%;
	position: absolute;
	left: 0%;
	
}

.testimony_example p {
	font-style:italic;
	
}

.testimony_example h5 {
	font-weight:bold;
	font-style:italic;
	
}



.testimony_arrows {
	position:relative;
	
}
.arrow {
	position:absolute;
	width:20px;
	height:20px;

}

.arrow:hover {
	cursor:pointer;
	
}

.right_arrow {
	right:0px;
	bottom:0px;
	background-image:url(images/next_arrow.png);
	background-size:cover;
	
}

.left_arrow {
	left:0px;
	bottom:0px;
	background-image:url(images/prev_arrow.png);
	background-size:cover;
	
}
	


.oldTestimony {
	-webkit-animation-name:oldTestimony;
	-webkit-animation-duration:1s;
	
	
}

@keyframes oldTestimony {
	0% {
		left:0%;
		
		
	}
	100% {
		left:100%;
		
	}
	
}

.newTestimony {
	-webkit-animation-name:newTestimony;
	-webkit-animation-duration:1s;
	
}

@keyframes newTestimony {
	0% {
		left:-100%;
		
		
	}
	100% {
		left:0%;
		
	}
	
}



.oldTestimonyRight {
	-webkit-animation-name:oldTestimonyRight;
	-webkit-animation-duration:1s;
	
}

@keyframes oldTestimonyRight {
	0% {
		left:0%;
		
	}
	
	100% {
		left:-100%;
		
	}
	
}


.newTestimonyRight {
	-webkit-animation-name:newTestimonyRight;
	-webkit-animation-duration:1s;
	
}

@keyframes newTestimonyRight {
	0% {
		left:100%;
		
	}
	
	100% {
		left:0%;
		
	}
	
}


.end_sentence {
	margin-top:25px;
	margin-bottom:25px;
	
}



footer {
	padding:15px;
	background-color:black;
	
}

.footer_logo {
	width:230px;
	
}

.footer_logo img {
	width:100%;
	
}





/* ABOUT US PAGR */

.aboutUsBannerSlideshow {
	width:100%;
	margin-top: 10px;
	position:relative;
	overflow:hidden;
	
}

.aboutUsBannerSlideshow img {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	
	
}

.aboutUsInfo {
	margin-top: 15px;
	
}


.aboutUsInfo ul li {
	margin-bottom:8px;
	
}

.aboutUsInfo ul li:last-child {
	margin-bottom:0px;
	
}

.keyMemberOfStaff {
	display:inline-block;
	width: 31%;
	margin-top: 10px;
	margin-right: 2%;
	position:relative;
	
}

.staffPictures img {
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
	
}


.keyMemberOfStaff h4, .keyMemberOfStaff h5 {
	text-align:center;
	
}
.keyMemberOfStaff h4 {
	font-size:1.2em;
	margin-top:8px;
	margin-bottom:4px;
	
}

.keyMemberOfStaff h5 {
	font-size:.9em;
	
}

.lastMemberOfStaffInRow {
	margin-right:0px!important;
	
}

.slideshowButton {
	height:5px;
	width:10px;
	display:inline-block;
	background-color:black;
	
}

.staff_slideshow_images {
	position:relative;
	
}

.staff_slideshow_animated_images img {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	
	
}



/* games page */

.gameCover {
	text-align:center;
	margin-top:15px;
	margin-bottom:15px;
	
	
}

.gameCover img:hover {
	cursor:pointer;
	opacity:.6;
}



/* store page */

.product {
	text-align:center;
	
}

.product h4 {
	font-size:0.9em;
	
}

.store_form {
	margin-top:15px;
	margin-bottom:15px;
	
}

.store_button {
	margin-bottom:100px;
	
}

.store_button, .store_active_Button {
	display:inline-block;
	margin-right:15px;
	padding:10px;
	background-color:black;
	color:white;
	
}

.store_active_Button {
	background-color:red;
	color:white;
	
	
	
	
}





/* media quries */

@media screen and (max-width:1200px) {
	.container {
		width:1000px;
		
	}
	
	.social_media {
   		 width: 187px;
  	}
	
	.portal_link {
   width: 305px;
}

/* about page */


	
}

@media screen and (max-width:1000px) {
	
	header nav {
		display:inline-block;
		
	}
	
	.container {
		width:750px;
		
	}
	
	.social_media {
    width: 153px;
	margin-left: 10px;
}

header nav {
    float: right;
    margin-top: 22px;
}

header nav ul li {
    display: inline-block;
    margin-right: 10px;
}

header nav ul li a {
    color: white;
    font-weight: bold;
   font-size: 14px;
}

.portal_link {
    width: 222px;
}


/* about page */

.chevron  {
	font-size:10px;
	
}


	
	
}

@media screen and (max-width:800px) {
	
	.container {
		width:98%;
		
	}
	
	.mobile_button {
		float:right;
		
	}
	
	.logo, .social_media  {
		margin: auto;
	}
	
	
	
	.social_media  {
		margin-top:0px;
		width: 100%;
		
	}
	
	.social_media ul, .mobile_button {
		display:inline-block;
	}
	
	.social_media ul {
		width:90%!important;
	}
	
	
	
	header nav {
    float: none;
	margin:auto;
	display:none;
	clear: both;

}

.gameSortForm select {
	width:100%;
}







header nav ul li {

    display:block;
    margin-right: 15px;
	width:100%;
	

}

header nav ul li a {
	font-size:22px;
	
}

.portal_link {
    width: 30%;
	margin-bottom:25px;
	margin-right: 2%;
}

.portal_link h3 {
	font-size:1.4em;
	
}

.gameOverviewImage {
	width:100%;
	float:none;
	margin-bottom:25px;
	
}

.gameOverviewDetails {
	float:none;
	width:100%;
	
}

.game_overview_container {
    width: 90%;
    margin: auto;
    padding: 30px;
    background-color: white;
    position: static;
    top: auto;
    left: auto;
   transform: none;
    opacity: 1;
}


/* about page */


.keyMemberOfStaff h4 {
    font-size: 1em;
}




}

@media screen and (max-width:500px) {
	h1 {
		font-size:1.9em;
		
	}
	
	.slideshowImageText h4 {

    font-size: 1em;
	

}

.testimony_area {
	height:125px;
	
}

.slideshowImageText h5 {

    font-size: .8em;

}

.slideshowImageText {
	padding: 6px;
	
}

.slideshowImageText p {

    font-size: .7em;

}

.slideshowButtons {
    width: 136px;

}

.button {
    width: 20px;
    height: 20px;
}

.portal_link {
    width: 80%;
	margin:auto;
	display:block;
	margin-bottom:25px;
}

.keyMemberOfStaff {
    width: 80%;
	margin:auto;
	display: block;
	margin-bottom:20px;
}

.lastMemberOfStaffInRow {
	margin-right:auto!important;
	
}

/* games page */

.gameCover {
	width:80%;
	float:none;
	margin:auto;
	margin-bottom:15px;
	margin-top:15px;
	
}

.chevron  {
	font-size:8px;
	
}



	
}

@media screen and (max-width:380px) {
	.logo {
    width: 206px;
   

}

.logoImage {
    height: 55px;




}

.testimony_area {
	height:145px;
	
}
	
}

@media screen and (max-width:354px) { 
.logo {

    width: 187px;

}

.logoImage {

    height: 44px;

}

.chevron  {
	font-size:5px;
	font-weight:bold; 
	
}



}





















.chevron::before {
	border-style: solid;
	border-width: 0.25em 0.25em 0 0;
	content: '';
	display: inline-block;
	height: 3em;
	transform: rotate(-45deg);
	vertical-align: top;
	width: 3em;
	
}


.left {
	top:50%;
	left:2%;
	
}

.right {
	top:50%;
	right:2%;
	
}
.chevron {
	position:absolute;
	color:white;
	
}

.chevron:hover {
	color:red;
	cursor:pointer;
	
}

.chevron.right:before {
	left: 0;
	transform: rotate(45deg);
}

.chevron.bottom:before {
	top: 0;
	transform: rotate(135deg);
}

.chevron.left:before {
	left: 0.25em;
	transform: rotate(-135deg);
}