/* ************************* GENERAL >> START ************************* */
html {font-size: 100%; background: #222;}

body {font-family: Lato, 'Yanone Kaffeesatz', 'Helvetica Neue', Arial; font-size: 62.5%; /* Reduce to 10px base /} p { font-size: 1.2em / 12px */ background: #222;}

a, p {font-size: 1.6em; color: #333;}

a {text-decoration: none;}

p a, li a {font-size: 1.0em; color: #333;}
p a:hover, li a:hover {color: #555;}
		 
h1, h2, h3, h4, h5, h6 {font-family: Lato, 'Yanone Kaffeesatz', 'Helvetica Neue', Arial; font-weight: normal;}

h1 {font-size: 3.4em;}
h2 {font-size: 2.8em;}
h3 {font-size: 2.2em;}
h4 {font-size: 2.0em;}
h5 {
	font-size: 1.4em;
}
h6 {font-size: 1.6em;}

.intro.layer {width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 10000; background: rgba(0,0,0,1.0);}
.intro.layer div {width: 0; height: 5px; position: absolute; top: 0; background: #FFF;}

.logo {width: 50%; position: absolute; top: 30%; left: 0; z-index: 60;}
.logo img {float: right; margin: 0 50px 0 0; cursor: pointer; opacity: 0.85; transition: opacity .2s linear; -o-transition: opacity .2s linear; -moz-transition: opacity .2s linear; -webkit-transition: opacity .2s linear;}

.logo img:hover {opacity: 1;}

.left 			{float: left;}
.right 			{float: right;}

/* ************************* GENERAL >> END ************************* */



/* ************************* MASK LAYOUT >> START ************************* */
.mask-left {position: absolute; top: 0; left: 0; bottom: 0; width: 50%; z-index: 51; background: #222;}
.mask-left div {width: 100%; position: absolute; top: 0; bottom: 0;}

.mask-right {position: absolute; top: 0; right: 0; bottom: 0; width: 50%; z-index: 40; }
.mask-right div {width: 100%; position: absolute; top: 0; bottom: 0;}

.mask-middle {width: 10px; position: absolute; top: 0; bottom: 0; left: 50%; z-index: 60;}
/* ************************* MASK LAYOUT >> END ************************* */



/* ************************* NAVIGATION >> START ************************* */
.navi {
	position: fixed;
	bottom: 0;
	left: 20px;
	z-index: 100;
	overflow: hidden;
	
	border-radius: 10px 10px 0 0;
	-o-border-radius: 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0;
	-khtml-border-radius: 10px 10px 0 0;
	-webkit-border-radius-top-left: 10px;
	
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	-o-box-shadow: 0 0 10px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.navi li {
	height: 28px; 
	padding: 10px 30px; 
	display: block; 
	margin: 0; 
	cursor: pointer; 
	overflow: hidden; 
	border-top: 1px solid #020202; 
	border-bottom: 1px solid #181818;
	background: rgba(10,10,10,0.75);
	
	transition: background .2s linear;
	-o-transition: background .2s linear;
	-moz-transition: background .2s linear;
	-webkit-transition: background .2s linear;
}

.navi li:first-child {
	border-top: none;
	border-radius: 10px 10px 0 0; 
	-o-border-radius: 10px 10px 0 0; 
	-moz-border-radius: 10px 10px 0 0; 
	-khtml-border-radius: 10px 10px 0 0; 
	-webkit-border-radius: 10px 10px 0 0;
}

.navi li a {float: left; padding: 3px 0; color: #999; font-size: 2.0em;}
.navi li img {float: left; margin: 0 20px 0 0;}
.navi li span {font-size: 0.8em;}

.navi li:hover {background: rgba(15,15,15,0.75);}

.navi li:hover a {color: #FFF;}

/* ************************* NAVIGATION >> END *************************** */



/* ************************* CARDS >> GENERAL >> START ************************* */
.card-holder {width: 100%; top: 35%; bottom: 0; position: fixed; z-index: 50; margin: auto;}

.cards {width: 900px; margin: auto; position: relative;}

.cards .card {
	width: 450px; 
	height: 240px; 
	position: absolute; 
	left: -50px; 
	box-shadow: 0px 5px 20px rgba(0,0,0,0.5); 
	-o-box-shadow: 0px 5px 20px rgba(0,0,0,0.5); 
	-moz-box-shadow: 0px 5px 20px rgba(0,0,0,0.5); 
	-webkit-box-shadow: 0px 5px 20px rgba(0,0,0,0.5);
}

.cards .card:first-child {left: 450px;}

.cards .card .inner {
	width: 450px;
	height: 240px;
	position: absolute;
	z-index: 5;
	color: #000;
	background: #EEE;
	box-shadow: 0px 5px 20px rgba(0,0,0,0.5);
	-o-box-shadow: 0px 5px 20px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 5px 20px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0px 5px 20px rgba(0,0,0,0.5);
}

/* ************************* CARDS >> GENERAL >> END *************************** */



/* ************************* CARDS >> ROTATED >> START ************************* */
.cards.rotated {margin: -50px auto 0;}
.cards.rotated .card {transform: rotate(-25deg); -o-transform: rotate(-25deg); -moz-transform:  rotate(-25deg); -webkit-transform:rotate(-25deg) scale(1); }
.cards.rotated .card:first-child {left: 400px;}
/* ************************* CARDS >> ROTATED >> END *************************** */



/* ************************* CARDS >> LAYOUT >> START ************************* */
.card .header {text-align: center;}

.card .footer {width: 80%; padding: 30px 10%; position: absolute; bottom: 0;}
.card .footer p {line-height: 20px;}

.card h2 {padding: 20px 0 10px 0; font-size: 3.6em;}
/* ************************* CARDS >> LAYOUT >> END *************************** */



/* ************************* CARDS >> SOCIAL NETWORK LINKS >> START ************************* */
.card .social-networks {width: 35px; height: 110px; position: absolute; top: 40px; right: -35px; z-index: 3;}
.card .social-networks li {width: 35px; height: 35px; margin: 10px 0; background: #EEE;}

.card .social-networks a {
	width: 35px; 
	height: 35px; 
	float: left; 
	opacity: 0.5;
	transition: opacity .2s linear;
	-o-transition: opacity .2s linear;
	-moz-transition: opacity .2s linear;
	-webkit-transition: opacity .2s linear;
	box-shadow: 0 0 20px rgba(0,0,0,0.5);
	-o-box-shadow: 0 0 20px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 0 20px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.card .social-networks a:hover {opacity: 1.0;}

.card .social-networks .facebook 	{background: url(../images/icons-social.png) no-repeat top left;}
.card .social-networks .twitter 	{background: url(../images/icons-social.png) no-repeat bottom left;}

.card .social-networks .facebook:hover 	{background: url(../images/icons-social.png) no-repeat top right;}
.card .social-networks .twitter:hover 	{background: url(../images/icons-social.png) no-repeat bottom right;}
/* ************************* CARDS >> SOCIAL NETWORK LINKS >> END *************************** */



/* ************************* BROWSER SPECIFIC STYLES >> IE >> START ************************* */
.ua-ie .cards.rotated {margin: 0 auto;}
.ua-ie .cards.rotated .card:first-child {left: 450px;}
/* ************************* BROWSER SPECIFIC STYLES >> IE >> END ************************* */



/* ************************* BROWSER SPECIFIC STYLES >> IE7 & IE8 >> START ************************* */
.ua-ie-7 .intro.layer, .ua-ie-8 .intro.layer {background: #000;}
.ua-ie-7 .navi, .ua-ie-8 .navi {background: url(../images/ie.png) repeat;}
/* ************************* BROWSER SPECIFIC STYLES >> IE7 & IE8 >> END ************************* */



/* ************************* BROWSER SPECIFIC STYLES >> IE7 >> START ************************* */
.ua-ie-7 .navi li {border: none;}
/* ************************* BROWSER SPECIFIC STYLES >> IE7 >> END ************************* */