@charset "utf-8";

@font-face {
  font-family: 'Acknowledge';
  src: url('../fonts/acknowtt.ttf');
}

@font-face {
  font-family: 'Russo';
  src: url('../fonts/RussoOne-Regular.ttf');
}


* {
	padding:0;
	margin:0;
}

object,embed  {
	outline:none;
}

a, img {
    border:none;
}

a {
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

a:link {
	
	color: #0099FF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #0099FF;
}
a:hover {
	text-decoration: none;
	color: #FFA800;
}
a:active {
	text-decoration: none;
	color: #FF9900;
}

body {
	
	/*margin:0.2em;*/
	
	background:#7697b2 url('../images/bg_top.png') repeat-x top;
	font-family:"Russo", "Century Gothic", "Verdana", "Arial";
	font-size:1em;
	color:#FFF;
	
}

h2 {
	margin:0;
	padding:0;
}

/*  BUTTONS   */

.buttonTopQR img {
	
	padding-top: 1.5em;
	padding-left: 1em;
	
}

.buttonTopAppstore {
	margin: 5px auto;
	width: 172px;
	
	display:block;
	
}

.buttonGreen {
	margin: 10px auto;
	width: 215px;
	
	display:block;
	
	background:#00ff36;
	width: 215px;
	height: 50px;
	border-radius: 10px;
	
	/* IE10 Consumer Preview */ 
	background-image: -ms-linear-gradient(top, #00ff36 0%, #009820 100%);
	
	/* Mozilla Firefox */ 
	background-image: -moz-linear-gradient(top, #00ff36 0%, #009820 100%);
	
	/* Opera */ 
	background-image: -o-linear-gradient(top, #00ff36 0%, #009820 100%);
	
	/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00ff36), color-stop(1, #009820));
	
	/* Webkit (Chrome 11+) */ 
	background-image: -webkit-linear-gradient(top, #00ff36 0%, #009820 100%);
	
	/* W3C Markup, IE10 Release Preview */ 
	background-image: linear-gradient(to bottom, #00ff36 0%, #009820 100%);
	
	box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.2);
	
}


	.buttonGreen:hover {
		background-image: -ms-linear-gradient(top, #00ff36 0%, #009820 100%);
		
		background-image: -moz-linear-gradient(top, #00ff36 0%, #009820 100%);
		
		background-image: -o-linear-gradient(top, #00ff36 0%, #009820 100%);
		
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #009820), color-stop(1, #009820));
		
		background-image: -webkit-linear-gradient(top, #00ff36 0%, #009820 100%);
		
		background-image: linear-gradient(to bottom, #00ff36 0%, #009820 100%);
		
	}
	

	.buttonGreenLabel {
		margin: auto;
		display:block;
		font-size: 1.6em;
		line-height: 2em;
		/*padding-left: 2em;*/
		
		float:left;
		
		text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
	}
	
	a:link .buttonGreenLabel {
		color:#fff;
		
		-webkit-transition: all 0.2s ease-out; 
		-moz-transition: all 0.2s ease-out; 
		-o-transition: all 0.2s ease-out; 
		-ms-transition: all 0.2s ease-out;
	}
	
	a:hover .buttonGreenLabel {
		color:#fff200;
	}
	
	a:visited .buttonGreenLabel, a:active .buttonGreenLabel  {
		color:#fff;
	}
	
		.buttonGreenIcon {
			/*padding: 0.8em;
			padding-right: 0.2em;*/
			float:left;
			width:50px;
			height:50px;
		}
			.buttonGreenIconPlay {
				background:url("../images/button_icon_play.png") no-repeat center;
			}
				a:hover .buttonGreenIconPlay {
					background:url("../images/button_icon_play_over.png") no-repeat center;
				}
		
		

/*  UPDATE   */

.top {
	position:fixed;
		top:10px;
		right:10px;
}

	.top img {
		box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.2);
	}


.header {
	margin: 20px auto;
	margin-bottom: 10px;
	width: 620px;
	height: 435px;
}

	.headerLeft {
		float: left;
		width: 245px;
		display:table-column;
	}
	
		.headerBox {
			float:none;
			width: 634px;
			height: 432px;
			background: url("../images/thecrazyprogram_box.png");
			margin-left:-170px;
		}
	
	.headerRight {
		float: left;
		width: 375px;
		height: auto;
		display:table-column;
	}
	
		.headerRight .logoTop {
			margin:10px 0 20px 20px;
		}
		
		.topColumns {
			width:260px;
			margin:auto;
		}
			
			.topColumnLeft {
				margin:auto;
				width:180px;
				float:left;
				display:table-column;
			}
			.topColumnRight {
				margin:auto;
				width:80px;
				float:left;
				display:table-column;
			}
			
		.topButtons {
			width: 100%;
			margin: auto;
			float: left;
		}


.messageCenter {
	margin: 10px auto;
	width: 620px;
	font-size: 1.6em;
	
	line-height: 2.0em;
	
	text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
	
	
	text-align:center;
	
}

	.messageCenter img {
		vertical-align:middle;
	}

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

.content {
	
	margin:4px 0;
	width:100%;
	text-align:center;
	
}

.facebook {
	
	margin:4px auto;
	padding:10px 14px;
	width:400px;
	text-align:center;
	
}

.video {
	
	margin: 20px auto;
	width: 620px;
	height: 363px;
	
	background:#012544;
	
	box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.2);
	
}

.screenshots {
	
	margin: 40px auto;
	width: 620px;
	min-height: 171px;
}

	.screenshots img {
		box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.2);
		margin: 0 24px;
		
	}
	
	/*.screenshots a:nth-child(odd) {
		margin-right:10px;
	}
	
	.screenshots a:nth-child(even) {
		margin-left:10px;
	}*/

.platforms {
	
	margin: 20px auto;
	width: 620px;
	
	text-align:center;
	
	font-size:1.6em;
	
}

	.platforms img {
		margin:4px;
	}

.textContent {
	
	margin:12px auto;
	margin-bottom:30px;
	padding:20px 14px;
	width:620px;
	text-align:center;
	
	border-radius:12px;
	
	font-family:"Verdana", "Russo", "Arial";
	
	background:#fff;
	
	overflow:auto;
	
	color:#000000;
	
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	
}

	.textContent img {
		vertical-align:middle;
	}
	
	.textContent ul {
		list-style:none;
		
		/*list-style:circle url("../images/bullet_star.png");
		vertical-align:middle;
		list-style-position:inside;*/
		
	}
	
	.textContent li {
		line-height: 3em;
		background: url("../images/bullet_star.png") left center no-repeat;
		padding-left: 2.5em;
		
		font-size:1.2em;
	}
	
	.textContentColumnLeft {
		float:left;
		width:auto;
		margin: 1em;
		margin-left:2em;
	}
	
	.textContentColumnRight {
		float:left;
		text-align:left;
		margin: 1em;
		margin-right:2em;
	}
	

	.teamMember {
		width:600px;
		margin: 0.5em auto;
		float:left;
	}
	
		.teamMemberImage {
			float:left;
			width:125px;
			margin:1em;
			box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
		}
		
		.teamMemberBio {
			float:left;
			width:430px;
			text-align:left;
			margin: 0.7em 0;
			margin-left:0.5em;
		}
			
			.teamMemberName {
				font-size: 1.2em;
				font-weight:bold;
				margin-bottom: 0.1em;
			}
			
			.teamMemberLinks {
				margin-bottom: 0.1em;
			}
			.teamMemberText {
				font-size: 0.9em;
				margin-bottom: 0.1em;
			}
	
	
.twoColumn {
	margin: 20px auto;
	width: 640px;
	height:250px;
	
	overflow:auto;
}

	.twoColumnSingle {
		float:left;
		width:285px;
		height:220px;
		padding:10px;
		
		color:#000;
		
		text-align:center;
		
		background:#fff;
		
		border-radius:12px;
		
	}
	
	.twoColumnSingle:nth-child(odd) {
		margin-right: 15px;
	}
	
	.twoColumnSingle:nth-child(even) {
		margin-left: 15px;
	}
	
		.twoColumnSingle:nth-child(odd) img {
			margin:1em;
			box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
		}
		
		.twoColumnSingle:nth-child(even) img {
			margin-top:1em;
		}
	
	.devlog {
		
		width:300px;
		
	}
	
	.mail {
		
		/*width:300px;*/
		
	}
	
.moreContainer {
	/*overflow:auto;*/
}

.moreColumn {
	float:left;
	width:300px;
	height:220px;
	margin-left:5px;
	/*padding:10px;*/
}

	.moreColumn img {
		border-radius:10px;
		box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
	}

	.moreTitle {
		float:left;
		width:100%;
	}
	
	.moreIcon {
		float:left;
		width:125px;
	}
	
		.moreIcon img {
			border-radius:20px;
		}
	
	.moreShops {
		float:left;
		width:140px;
		margin-top:16px;
		margin-left:6px;
	}


.empty {
	
	margin:12px auto;
	padding:20px 14px;
	width:400px;
	text-align:center;
	
}

#footer {
	
	margin:10px auto;
	width:620px;
	
	overflow:auto;
	
	text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}

	.footerLeft {
		float:left;
		width:100px;
	}
	
	.footerRight {
		float:left;
	}
	
		.footerText {
			margin: 20px 0 0 0;
			font-size:1.6em;
		}

		#copyright {
			
			color:#fff;
			
			margin:16px 0;
			width:100%;
			text-align:center;
			
			font-size:1.2em;
			
		}
		
		#footer  a:link {
			color:#fff;
		}
		
			#footer  a:hover {
				color:#0099FF;
			}

/*   INPUT STUFFS */

.mail input[type="text"], .mail input[type="email"] {
				
				font-family: "Russo", "Century Gothic", Verdana, Helvetica, Arial, Helvetica, Georgia, Sans-serif;
				font-size:1em;
				font-weight:normal;
				
				width: 200px;
				margin: 4px auto;
				padding:4px 8px;
				
				border: medium none;
				border-radius: 10px;
				box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset;
				
				color: #fff;
				background: #7a96af;
				
				background-image: -ms-linear-gradient(top, #4e6070 0%, #7a96af 100%);
				background-image: -moz-linear-gradient(top, #4e6070 0%, #7a96af 100%);
				background-image: -o-linear-gradient(top, #4e6070 0%, #7a96af 100%);
				background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00ff36), color-stop(1, #7a96af));
				background-image: -webkit-linear-gradient(top, #4e6070 0%, #7a96af 100%);
				background-image: linear-gradient(to bottom, #4e6070 0%, #7a96af 100%);
				
				
				-webkit-transition: all 0.2s ease-out; 
				-moz-transition: all 0.2s ease-out; 
				-o-transition: all 0.2s ease-out; 
				-ms-transition: all 0.2s ease-out;
			}
			
				.mail input[type="text"]:hover {
					background:#0099FF;
				}
			
			.mail input[type="submit"] {
				
				margin: 10px auto;
				width: 215px;
				
				color:#fff;
				font-family:"Russo","Century Gothic", "Arial";
				font-size:1em;
				
				display:block;
				
				background:#00ff36;
				width: 215px;
				height: 50px;
				border: medium none;
				border-radius: 10px;
				
				/* IE10 Consumer Preview */ 
				background-image: -ms-linear-gradient(top, #00ff36 0%, #009820 100%);
				
				/* Mozilla Firefox */ 
				background-image: -moz-linear-gradient(top, #00ff36 0%, #009820 100%);
				
				/* Opera */ 
				background-image: -o-linear-gradient(top, #00ff36 0%, #009820 100%);
				
				/* Webkit (Safari/Chrome 10) */ 
				background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00ff36), color-stop(1, #009820));
				
				/* Webkit (Chrome 11+) */ 
				background-image: -webkit-linear-gradient(top, #00ff36 0%, #009820 100%);
				
				/* W3C Markup, IE10 Release Preview */ 
				background-image: linear-gradient(to bottom, #00ff36 0%, #009820 100%);
				
				box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.2);
			}
			
			.mail input[type="submit"]:hover {
				/*background:#FFD83A;*/
				color:#fff200;
			}