/* General Demo Style */



/* Global */



 








html { height: 100%; }

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

body {
    font-family: 'Roboto', Arial, sans-serif;
    background: #b0b0b0;
    font-weight: 400;
    font-size: 16px;
    color: #333;
    -webkit-font-smoothing: antialiased;
}

a {
	color: #555;
	text-decoration: none;
}

.social{
	position: absolute;
	top: 0;
	text-align:right;
	padding-right:15px;
	line-height:50px;
	height: 50px;
	right: 0;
	cursor: pointer;
	z-index: 9999999;

	
	}
	
	.logo{
		
		position: absolute;
	bottom:20px;
	right:20px;
	text-align:right;
	padding-right:15px;
		z-index: 9999998;
	}

.intro{
	position: absolute;
	top: 0;
	width : 100%;
	height: 100%;
	left: 0;
	cursor: pointer;
	z-index: 999999;
	background-color: #FFF;
	background-image: url(../images/bg-0.gif);
	background-repeat: no-repeat;
	background-position: center top;	
}

.backtointro{
	cursor: pointer;
	margin-left:15px;
	line-height:36px;
	float:left;
	}
.contenu_intro{
	position:absolute;
	
	width: 700px ;
	height: 340px ;
	top:30%;
	left:50%;
	margin-top:-170px;
	margin-left:-350px;
	}
	
	.contenu_intro img{
	padding-left:250px;
	}

.text_intro{
	padding-top:20px;
	font-family: "Roboto", Arial;
	font-size: 14px;
	line-height: 20px;
	color: #000;	
	}

h1{
	font-family: "Roboto", Arial;
	font-weight:300;
	font-size: 55px;
	color: #000;
	line-height:60px;

	

	
		
	
	}

.container {
	width: 100%;
	position: relative;
}

.container.demo-1 {
	height: 100%;
	position: absolute;
}

.clr {
	clear: both;
	padding: 0;
	height: 0;
	margin: 0;
}

.main {
	width: 90%;
	margin: 0 auto;
	position: relative;
}

.container > header,
.content-wrapper {
	padding: 30px;
	width: 80%;
	max-width: 960px;
	margin: 0 auto;
}

.content-wrapper p{
	padding-top: 30px;
	line-height: 26px;
}

.container > header h1 {
	font-size: 34px;
	line-height: 38px;
	margin: 0;
	font-weight: 700;
	color: #333;
	float: left;
}

.container > header h1 span {
	display: block;
	font-size: 20px;
	font-weight: 300;
}


/* Header Style */
.codrops-top {
	
   
	
	background-color: #FFF;
	height:36px;
	line-height:36px;
	background: rgba(0, 0, 0, 0.5);
	text-transform: uppercase;
	z-index: 9999;
	position: relative;
	font-family: 'Roboto', Arial, serif;
	
	

}



.titre{
	
	text-transform: uppercase;
	line-height: 36px;;
	height:36px;
	color: #FFF;
	font-size: 18px;
	display: inline-block;
	font-weight:700;
}



.codrops-top a:hover {
	background: rgba(255,255,255,0.6);
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: block;
}

/* Demo Buttons Style */
.codrops-demos {
	float: right;
	padding-top: 10px;
}

.demo-1 .codrops-demos {
	position: absolute;
	z-index: 2000;
	top: 30px;
	left: 30px;
}

.codrops-demos a {
    display: inline-block;
    margin: 10px;
    color: #333;
    font-weight: 700;
    line-height: 30px;
    border-bottom: 4px solid transparent;
}

.codrops-demos a:hover {
	color: #883d59;
	border-color: #883d59;
}

.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
	color: #aaa;
	border-color: #aaa;
}