@charset "UTF-8";
/* CSS Document */
@-webkit-keyframes typing { from { width: 0; } }
@-webkit-keyframes blink-caret { 50% { border-color: transparent; } }
@font-face {
	font-family: "Resistance";
	src: url('font/BluuNext-Bold.otf');
}
@font-face {
	font-family: "Pixel";
	src: url('font/MisterPixelRegular.otf');
}
* {
    margin: 0;
    padding: 0;
}
.output {
display:none;
}
.active:after {
  content: '_';
}
html, body
{
	background-color:black;
	overflow:hidden;
	
}


.courant
{
    padding-left: 22px;
    font-family: Roboto, sans-serif;
    font-size: 8pt;
    margin-bottom: 6px;
}
 #intro
 {
	 width:270px;
	position:absolute;
	     margin-top: 23px;
    font-family: Resistance, sans-serif;
    font-size: 19.2pt;
    margin-left: 13px;
    margin-right: 0;
    color: #ffffff;
	z-index: 100;
 }
  #intro2
 {
	 margin-top:-5px;
    font-family: Roboto, sans-serif;
    font-size: 10pt;
	z-index: 100;
	}
a {

color: #ffffff;
text-decoration:none; 
}
a:hover {
background-color:black;
color: #ffffff;
}
		  
		  div
		  {
	margin-left: auto;
	margin-right: auto;
	width: 1008px;
			  }
			 
			  
			  img{
				   
					position: relative;
					margin: 0;
					padding: 0;
					
					
				   }
			    ul.menu
		  {
	font-family: Roboto, sans-serif;
	font-size: 10pt;
	margin-left: 0px;
	margin-right: auto;
	float: left; 
	padding-left:inherit;
			  }
			   
			  


.travaux{
 box-shadow:5px 3px 15px rgba(0, 0, 0, 0.2);;
}
#content {
	top: 56px;
    width: 1200px;
    height: 540px;
    position: relative;
    /* left: 13px; */
    bottom: 0px;
    /* top: 105px; */
    z-index: 90;
    margin-left: auto;
    margin-right: auto;
    /* float: left; */
}	
#rectangle1 {
	    top: 56px;
    background-color: rgb(255,255,255);
	background-image: url(img/rectangle1.png);
    width: 270px;
    height: 540px;
    position: relative;
    /* left: 13px; */
    bottom: 0px;
    /* top: 105px; */
    z-index: 90;
    margin-left: 10px;
    margin-right: 10px;
    float: left; 
}			  
#rectangle2 {
	    top: 56px;
    background-color: rgb(255,255,255);
	background-image: url(img/rectangle2.png);
    width: 270px;
    height: 540px;
    position: relative;
    /* left: 13px; */
    bottom: 0px;
    /* top: 105px; */
    z-index: 90;
    margin-left: 10px;
    margin-right: 10px;
    float: left; 
}
#rectangle3 {
	    top: 56px;
    background-color: rgb(255,255,255);
	background-image: url(img/rectangle3.png);
    width: 270px;
    height: 540px;
    position: relative;
    /* left: 13px; */
    bottom: 0px;
    /* top: 105px; */
    z-index: 90;
    margin-left: 10px;
    margin-right: 10px;
     float: left; 
}
#resultat {
	    top: 56px;
    background-color: rgb(255,255,255);
	background-image: url(img/resultat.png);
    width: 270px;
    height: 540px;
    position: relative;
    /* left: 13px; */
    bottom: 0px;
    /* top: 105px; */
    z-index: 90;
    margin-right: 20px;
    float: float;
}
.prompt{
	color:white;
}
#texte {
    text-align: center;
    margin-top: 121px;
    /* top: auto; */
    height: 100px;
    width: 100%;
    white-space: nowrap;
    font-family: Resistance, sans-serif;
    font-size: 20.6pt;
    position: relative;
    /* left: 13px; */
    /* top: 105px; */
    margin-left: auto;
    margin-right: auto;
    color: white;
    /* float: left; */
    /* -webkit-animation: typing 2s steps(18, end); */
}
#info {
 
    text-align: center;
    margin-top: 34px;
    /* top: auto; */
    /* height: 50px; */
    width: 100%;
    white-space: nowrap;
    font-family: Resistance, sans-serif;
    font-size: 20.6pt;
    position: absolute;
    /* left: 13px; */
    /* top: 105px; */
    margin-left: auto;
    margin-right: auto;
    color: white;
    /* float: left; */
    /* -webkit-animation: typing 2s steps(18, end); */
}

#footer {
	background-color: black;
    color: #ffffff;
    width: 272px;
    position: absolute;
    right: 0;
    bottom: 0;
    /* top: 482px; */
    z-index: 108;
    margin-left: 0px;
    padding-left: inherit;
    margin-right: 0px;
    /* float: left; */
    max-height: 259px;
}

#twitter{
    bottom: 0px;
    float: left;
    top: 182px;
    margin: 3px;
    left: -62px;
}
#instagram{
    bottom: 0px;
    float: left;
    top: 206px;
    margin: 3px;
    left: -35px;
}
.bold{
	 font-weight: 700;
	   text-transform: uppercase; 
}

#picto1 {
	cursor:move;
    cursor:grab;
			
	position: absolute;
    left: 1183px;
    top: 178px;
	z-index: 99;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
#picto2 {
	cursor:move;
    cursor:grab;
	position: absolute;
    left: 1129px;
    top: 117px;
	z-index: 99;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
#picto3 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 1075px;
    top: 56px;
	z-index: 99;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
#picto4 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 299px;
	bottom: 0px;
	top: 193px;
	z-index: 99;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
 .reseau {

    float: left;
    height: 69px;
    width: 62px;
    position: relative;
    margin-left: 12px;
    margin-bottom: 11px;
    top: 9px;
	


}








.strut, #contener {
    /* on permet à ces éléments de s'aligner verticalement */
    display:inline-block;
    vertical-align:middle;
}
.strut {
    /* hauteur de la fenêtre, par rapport à laquelle les éléments vont être alignés */
    height:100%;
}