/*
TODO:

- √ More reliable video playback.

- [.] Gradient title

- Video
	- [√] Poster frames for movie.
	- [ ] Move video to github. (Host it!)
	- √ Test videos multiple devices
	- √ Proper video compression
	- [.] Can click video to watch bigger on mobile

- Mute
	- √ if you click on the mute icon itself it ALSO works.
	- [.] Can toggle audio between videos on desktop


- √ Fix right margin of multi-columns

- √ Cut Isaac's animation (doesn't read well in small size)
- √ Final text (OK-ish)
- √ Final video edits (OK-ish)

*/

body {
	padding:0px;
	margin:0px;
	background-image: url('/image/Background.png');
	background-size: 500px;
}

body,
header,
footer {
	background-color: #353535;
}

.main-col {
	max-width: 800px;
	width:100%;
	margin-left: auto;
	margin-right: auto;
	padding-left:16px;
	padding-right:16px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.clearleft {
	clear:left;
}

.clearboth {
	clear:both;
}

.row {
	clear:left;
}

h1 {
	font-family: 'Oswald', sans-serif;
	font-size: 48pt;
	font-weight: bold;
	margin-bottom: 0px;
	margin-top:8px;
	text-transform: none;
	color:#FFF;
	text-shadow: 1px 2px 8px #444;
}

h2 {
	font-family: 'Oswald', sans-serif;
	font-size: 30pt;
	font-weight: 500;
	margin-bottom: 0px;
	color:#FFF;
	text-shadow: 1px 2px 8px #222;
}

h3 {
	font-family: 'Oswald', sans-serif;
	font-size: 18pt;
/*	font-weight: 500;*/
	margin-bottom: 12px;
	margin-top: 12px;
	color:#FFF;
	text-shadow: 1px 2px 8px #222;
}

p {
	font-family: 'Raleway', sans-serif;
/*	font-family: avenir-book,avenir book,verdana,sans-serif;*/
/*	font-style: normal;*/
/*	text-align: justify;*/
/*	margin-top: 0px;*/
/*	margin-right: 16px;*/
/*	margin-left: 4px;*/
	font-size: 13pt;
	color:#EEE;
}

#back-story p {
	line-height: 1.4;
}

.download p {
/*	font-size: 10pt;*/
/*	color:#222;*/
	text-indent: 3px;
}

.download a:link {
/*    color: #999;*/
	text-decoration: none;
}

/* unvisited link */
a:link {
    color: hotpink;
	text-decoration: none;
}

/* visited link */
a:visited {
    color: #cc6933;
	text-decoration: none;
}

/* mouse over link */
a:hover,
.download a:hover
{
    color: hotpink;
	text-decoration: underline;
}

/* selected link */
a:active {
    color: hotpink;
}

.game {
	width:50%;
	float:left;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.game:first-of-type {
	padding-right:32px;
}

.game:last-of-type {
	padding-left:32px;
}

.call {
	width:33%;
	float:left;
	padding-right:16px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.call:last-of-type {
	padding-right:0px;
}

.game-loop-plate video,
.game-loop-plate img
{
	width:100%;
}

.banner-video {
	width:100%;
/*	position: absolute;*/
/*	top: 0;*/
/*	left: 0;*/
}

.sound-on,
.sound-off
{
	position: absolute;
	bottom: 0;
	left: 0;
	color: white;
	padding:16px;
	font-size:32;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	text-shadow: 1px 2px 8px #000;
}

.videoWrapper-16x9 {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
/*	padding-top: 25px;*/
	height: 0;
}
.videoWrapper-16x9 iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.game-loop-plate {
	background-color:#443355;
/*	max-width:300px;*/
	width:100%;
}

.lead-loop-plate {
	background-color:#553344;
	width:100%;
	position: relative;
}

.lead {
	float:left;

/*	width:auto;*/
	width:80%;
}

.lead-icon
{
	float:right;
	width:20%;
	padding-right:0px;
	margin-right:0px;
	margin-bottom:16px;
	padding-left:8px;
	padding-top:30px;


	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.foot-friends {
	width:50%;
	max-width:300px;
	margin-left:auto;
	margin-right:auto;
	margin-top:16px;
	margin-bottom:24px;
}

.foot-icon {
	float:left;
	width:33%;
}

.foot-icon,
.foot-icon-solo {
	margin-bottom:32px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	padding-left:4px;
	padding-right:4px;
}

.foot-icon-solo {
	width: 25%;
	margin-top:32px;
	margin-left:auto;
	margin-right:auto;
}

.lead-icon img,
.foot-icon img,
.foot-icon-solo img {
	width:100%;
	height:auto;
}

@media (max-width: 720px) {
	.game:first-of-type,
	.call {
		padding-right:8px;
	}

	.game:last-of-type {
		padding-left:8px;
	}

	p {
		margin-right: 4px !important;
/*		margin-left: 4px !important;*/
	}

/*	.lead-icon {*/
/*		width: 50%;*/
/*		float:none;*/
/*	}*/
}

@media (max-width: 560px) {

	.call,
	.game {
		width: 100%;
	}

	.game:first-of-type {
		padding-right:0px;
	}

	.game:last-of-type {
		padding-left:0px;
	}

	p {
		margin-right: 0px !important;
		margin-left: 0px !important;
	}

	.main-col {
		padding-right:16px !important;
		padding-left:16px !important;
	}

	.lead {
		width:100%;
	}

	.lead-icon {
		width: 35%;
		float:none;
		margin-left:auto;
		margin-right:auto;
	}
}

.wrapper {
  width: 100%;
  margin: auto;
  text-align: left;
  line-height: 1;
}

.wrapper svg {
  height: 90px;
}

text {
  fill: url(#tabla-gradient);
  font-family: 'Oswald';
  font-size: 3em;
}