@import url('https://fonts.googleapis.com/css?family=Baloo|Convergence');

*{
	margin: 0px;
	padding: 0px;
	font-family: 'Convergence', sans-serif;
	/*font-family: 'Hammersmith One', sans-serif;*/
	overflow-y: hidden;
	overflow-x: hidden;
	font-weight: normal;
}
 html, body {
	height: 100%;
	width: 100%;
	color: #FFFFFF;

	background: url('img/bg.jpg') no-repeat center bottom fixed;

	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

header{
	width: 100%;
	height: 64px;
	/*background-color: #134646;*/
	/*box-shadow: 0px 1px 10px #052828;*/
	margin-bottom: 12px;

}

header ul{
	height: 100%;
	display: block;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0px;
	padding: 0px;
}

header ul li{
	margin-right: 12px;
	margin-left: 12px;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

div{
	overflow-x: hidden;
	margin: 0px auto 0px auto;
}

body{
	background-color: #1db8a8;
	width: 100vw;
	overflow-x: hidden;
	overflow-y: scroll;
	text-align: center;

	background: url('img/clouds.png') center bottom fixed;
	animation: animatedBackground 60s linear infinite;

	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;


}

.leftcontent{
	text-align: left;
}

li{
	display: list-item;
}

p{
		padding: 0px 6px 10px 6px;
		margin: 0px auto 0px auto;
		padding-left: 16px;
		padding-right: 16px;
		font-size: 110%;
		line-height: 1.3em;
		text-align: left;
		color: #51cdc0;
}

.exdata{
	font-size: 80%;
}

h1{
	padding: 0px 12px 8px 12px;
	margin: 8px auto 0px auto;
	color: #FFFFFF;
	padding-left: 32px;
	padding-right: 32px;
	font-size: 200%;
	line-height: 1.5em;
	font-family: 'Baloo', cursive;
}

h2{
	padding: 0px 12px 8px 12px;
	margin: 8px auto 0px auto;
	color: #FFFFFF;
	padding-left: 32px;
	padding-right: 32px;
	font-size: 150%;
	line-height: 1.5em;
	font-family: 'Baloo', cursive;
}

h3{
	padding: 0px 6px 8px 6px;
	margin: 0px auto 0px auto;
	padding-left: 16px;
	padding-right: 16px;
	color: #FFFFFF;
	font-size: 120%;
	line-height: 1.5em;
	font-family: 'Baloo', cursive;
}

.leftcontent p{
	padding-bottom: 24px;
	line-height: 1.5em;

}

.leftcontent h3{
	padding-bottom: 8px;
	padding-top: 24px;
	line-height: 1.5em;
}

.leftcontent ul{
	list-style-type: circle;
	width: 100%;
	display: block;
	color: #51cdc0;

}

.leftcontent li{
	display: list-item;
	width: 80%;
	padding-left: 48px;
	padding-right: 12px;
	margin-bottom: 16px;
	color: #51cdc0;
}

.cpurple{
	color: #e4b7ff;
}

.corange{
	color: #ffb72a;
}

.cnotice{
	color: #ff8482;
}

.cgreen{
	color: #81fb4b;
}

main{
	width: 95%;
	max-width: 960px;
	margin: 0px auto 24px auto;
	overflow: visible;
}

.boxed{
	background: url('img/mainbg.png');
	border-radius: 15px;
	box-shadow: 0px 1px 10px #052828;
}

.boxorange{
	background: url('img/mainbg2.png');
}

.boxorange p{
	color: #ffc9b7;
}

.boxgreen{
	background: url('img/mainbg3.png');
}

.mainvid{
	width: 95%;
	max-width: 960px;
	margin: 0px auto 12px auto;
	border-radius: 15px;
	box-shadow: 0px 1px 10px #052828;
}

.vsize{
	height: 100%;
	width: auto;
}

.hboxes{
	float: right;
	width: 25%;
	margin-left: auto;
	margin-right: auto;
}

.hboxes3{
	float: right;
	width: 33.333%;
	margin-left: auto;
	margin-right: auto;
}

.wkcnews{
	text-align: center;
	width: 95%;
	max-width: 960px;
	margin-bottom:12px;
}

.wkcnews p{
		color: #e0ffed;
		margin: 8px auto 8px auto;
		text-align: center;
		padding-bottom:0px;
}

.winicon{
	background: url('img/windows.png');
	width: 128px;
	height: 128px;
}

.buttondiv:hover .winicon{
	background: url('img/windows2.png');

}

.buttondiv p{
	line-height: 1.5em;
	font-size: 130%;
	text-align: center;
}

.clearblue{
	color: #51cdc0;
}

.osxicon{
	background: url('img/osx.png');
	width: 128px;
	height: 128px;
}

.buttondiv:hover .osxicon{
	background: url('img/osx2.png');

}

.mainhead{
	width: 100%;
	height: 100%;
}

.fullwidth{
	width:100%;
	margin-bottom: 8px;
	border-top: 1px solid #a25141;
	border-bottom: 1px solid #a25141;
}

.iosicon{
	background: url('img/ios.png');
	width: 128px;
	height: 128px;
}

.buttondiv:hover .iosicon{
	background: url('img/ios2.png');

}

.andicon{
	background: url('img/android.png');
	width: 128px;
	height: 128px;
}

.buttondiv:hover .andicon{
	background: url('img/android2.png');

}

.steamicon{
	background: url('img/steam.png');
	width: 128px;
	height: 128px;
}

.buttondiv:hover .steamicon{
	background: url('img/steam2.png');

}

#mainlogo{
	height: 100%;
	width: auto;
}

#mainmenu{
	float: right;
	height: 100%;
	margin-right:4px;

}

.buttondiv:hover p{
	color: #ffb72a;
}

.video{
	width:100%;
	margin:auto;
	margin-bottom: 0px;

}

.floatboxdiv{
	display: flex;
	overflow: visible;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}

.videoc{
	height:0px;
	width:100%;
	padding-top:56.25%;
	position:relative;
}

.videoc iframe{
	position:absolute;
	height:100%;
	width:100%;
	top:0px;
	left:0px;
	background-color: #134646;
}

footer{

	font-size: 70%;
	text-align: center;

	max-width: 960px;
	width: 100%;
	margin: auto;
	margin-bottom: 32px;
	margin-top: 4px;
	padding-top: 16px;
}
footer p{
	padding-bottom: 2px;
	text-align: center;
	color: #ffffff;
}

@keyframes animatedBackground {
	0%{
		background-position: 0 bottom;
	  }
	100%{
		background-position:-100vw bottom;
	  }
}

.medium{
	font-size: 100%;
}

.mini{
	font-size: 80%;
}

.storebadges{
	float:right;
	width: 33.333%;
}

.storebadges img{
	width: 100%;
	max-width: 180px;
}

.badgecontainer{
	max-width:640px;
	width: 95%;
	margin-bottom: 24px;
}

@media (min-width: 960px){

	

	.thcont{
		width: 32.5%;
		margin-bottom:24px;
	}
}

@media (max-width: 959px){


	
	.hboxes{
		width: 100%;
		margin-left: 0px;
		margin-right: 0px;
	}

	.thcont{
		width: 100%;
		margin-bottom:24px;
	}
}

a{
	color: #51cdc0;
	text-decoration: none;
}

main a{
	color: #95E8DF;
	text-decoration: none;
}

footer a{
	color: #ffffff;
}

header a{
	color: #ffffff;
}


a:hover {
    color: #ffb72a;
}

a:active {
    color: #ffb72a;
}

.boxgreen a{
	color: #a3ff8e;
	text-decoration: none;
}

.boxgreen a:hover {
    color: #ddff71;
}

.boxgreen a:active {
    color: #a3ff8e;
}