/**
 * @author c3labs
 */


/*********************************************
 * FONT-FACE DEFINITIONS
 *********************************************/

@font-face {
	font-family: 'League Gothic';
	src: url('../assets/fonts/leaguegothic/league_gothic-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}


/*********************************************
 * GLOBAL STYLES
 *********************************************/

html, body {
	padding: 0;
	margin: 0;
	overflow: hidden;

	font-family: 'Lato', Times, 'Times New Roman', serif;
	font-size: 28px;
	font-weight: 100;

	background: #000;
	color: #000;

	width: 100%;
	height: 100%;

	background-image: -webkit-gradient(
		radial,
		50% 50%, 0,
		50% 50%, 800,
		from(rgba(95,95,90,1.0)),
		to(rgba(30,30,30,1.0))
	);

	background-image: -moz-radial-gradient(
		50% 50% 90deg,
		rgba(95,95,90,1.0) 0%,
		rgba(30,30,30,1.0) 100%
	);

}

#hint span {
	font-size: 12px;
	color: #222;
	background: rgba(220,255,0,0.8);
	padding: 0.2em;
	margin: 0 auto;
	top: 30px;
	left: auto;
	font-weight: 400;
}


/*********************************************
 * HEADERS
 *********************************************/
h1, h2, h3, h4, h3 span {
	margin: 0 0 20px 0;
	font-family: 'League Gothic', Arial, Helvetica, sans-serif;
	line-height: 0.9em;
	letter-spacing: 0.02em;
	/*text-transform: uppercase;*/
	color: #181818;
	text-shadow: 0px 0px 3px #191919;
}

h1 { font-size: 136px;	}
h2 { font-size: 76px;	}
h3 { font-size: 56px;	}
h4 { font-size: 36px;	}

h1.inverted,
h2.inverted,
h3.inverted,
h4.inverted {
	color: #fff;
	text-shadow: 0px 0px 7px #666;
}

h3 span, h2 span, h4 span, h1 span {
	background: rgb(220,255,0); color: #222;
}


/*********************************************
 * SLIDES
 *********************************************/
#main {
	position: absolute;
	width: 800px;
	height: 600px;

	left: 50%;
	top: 50%;
	margin-left: -400px;
	margin-top: -280px;

	text-align: center;

	-webkit-perspective: 300px;
 	-webkit-perspective-origin: 50% 25%;
}

#main>section,
#main>section>section {
	display: none;

	position: absolute;
	width: 100%;
	min-height: 600px;

	-webkit-transform-style: preserve-3d;

	-webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
	   -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
	     -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
	        transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}

#main section.past {
	display: block;
	opacity: 0;

	-webkit-transform: 	translate3d(-100%, 0, 0)
						rotateY(-90deg)
						translate3d(-100%, 0, 0);
}

#main section.present {
	display: block;
}

#main section.future {
	display: block;
	opacity: 0;

	-webkit-transform: 	translate3d(100%, 0, 0)
						rotateY(90deg)
						translate3d(100%, 0, 0);
}

#main section>section.past {
	display: block;
	opacity: 0;

	-webkit-transform: 	translate3d(0, -50%, 0)
						rotateX(70deg)
						translate3d(0, -50%, 0);
}
#main section>section.future {
	display: block;
	opacity: 0;

	-webkit-transform: 	translate3d(0, 50%, 0)
						rotateX(-70deg)
						translate3d(0, 50%, 0);
}


/*********************************************
 * DEFAULT ELEMENT STYLES
 *********************************************/

#main>section {
	line-height: 1.2em;
	/*text-shadow: 0px 0px 2px #fff, 0px 0px 4px #bbb;*/
	font-weight: 300;
}

ol {
	list-style: decimal;
	list-style-position: inside;
}

li, p {
	margin-bottom: 10px;
	font-size: 20px;
}

a:not(.image) {
	color: #DCFF00;
	text-decoration: none;
	border-bottom: 1px dashed rgba(0,0,0,0.3);
	padding: 1px 3px;
}

a:not(.image):hover {
	color: #222;
	background: rgb(220,255,0);
	border: none;
}

img.hakim {
	margin: 30px 0 0 0;
	background: rgba(255,255,255,0.12);
	border: 4px solid #eee;

	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
	   -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
	        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);

	-webkit-transition: all .11s linear;
	   -moz-transition: all .11s linear;
	     -o-transition: all .11s linear;
	        transition: all .11s linear;
}

	a.image:hover img {
		background: rgba(255,255,255,0.2);

		-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
		   -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
		        box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
	}