@media screen and (max-width:850px) {

	#legende {
		width:  18em;
	}

	.css-typing {
		font-size:  35px;
	}

	.qui {
		left:  55%;
	}

}
@media screen and (max-width:650px) {

	.qui {
		left:  62%;
	}
    
    .participer {
	  position: relative;
		width: 125px; 
	  height: 72.17px;
	  background-color: #24961c;
	  margin: 36.08px 0;
	   -webkit-transition: all 1s ease;
		-o-transition: all 1s ease;
		-moz-transition: all 1s ease;
		-ms-transition: all 1s ease;
		-kthtml-transition: all 1s ease;
	}

	.participer:hover{
		-webkit-box-shadow: 0 0 50px 10px rgba(17,255,0,1);
		-moz-box-shadow: 0 0 50px 10px rgba(17,255,0,1);
		box-shadow: 0 0 50px 10px rgba(17,255,0,1);
		background-color:white;
	}

	.participer:hover a{
		color:#24961c;
	}

	.participer:hover:before,
	.participer:hover:after{
		-webkit-box-shadow: 0 0 50px 10px rgba(17,255,0,1);
		-moz-box-shadow: 0 0 50px 10px rgba(17,255,0,1);
		box-shadow: 0 0 50px 10px rgba(17,255,0,1);
	}

	.participer:before,
	.participer:after {
	  content: "";
	  position: absolute;
	  z-index: 1;
	 width: 88.39px;
	height: 88.39px;
	  -webkit-transform: scaleY(0.5774) rotate(-45deg);
	  -ms-transform: scaleY(0.5774) rotate(-45deg);
	  transform: scaleY(0.5774) rotate(-45deg);
	  background-color: inherit;
	  left: 18.3058px;
	}

	.participer:before {
	 top: -44.1942px;
	}

	.participer:after {
	  bottom: -44.1942px;
	}

	/*cover up extra shadows*/
	.participer a {
	  display: block;
	  position: absolute;
	  top:0px;
	  left: 0;
	 width:125px;
		height:72.1688px;
	  z-index: 2;
	  background: inherit;
	}
	.participer a{
		text-decoration:none;
		font-family: Tahoma;
		font-variant:small-caps;
		color:white;
		text-align:center;
		font-size:23px;
		line-height:14px;
	}
	.participer br:nth-child(3){display:none;}
    
	.pres{
		position:absolute;
		top:47%;
		left:42%;
	}

	.participer{
		position:absolute;
		left:12%;
		bottom:5%;
	}

}

@media screen and (max-width: 600px)
{
	img { max-width: 100%; }
	
	#toggle-bar{
	position:absolute;
	right:0;
	 top:0;
	 width: 75px;
     height: 75px;
     background: #003471;
     border-radius: 0 0 0 75px;
     -moz-border-radius: 0 0 0 75px;
     -webkit-border-radius: 0 0 0 75px;
	 float:right;
	 z-index:9999;
	}
	
	.navicon {
	height: 5px;
    width: 25px;
    margin-top: 25%;
	margin-left:40%;
    border-top: 15px double #fff;
    border-bottom: 5px solid #fff;
    font-size:0;
	}
	
	/** Titre **/
	.css-typing{
		width: 25em;
		white-space:nowrap;
		overflow:hidden;
		-webkit-animation: type 5s steps(50, end);
		animation: type 5s steps(50, end);
		color:rgba(255,255,255,0.9);
		font-family: Ubuntu;
		margin-left:25px;
		font-size:30px;
		margin-bottom:15px;
	}

	@keyframes type{
		from { width: 0; }
	}

	@-webkit-keyframes type{
		from { width: 0; }
	}

	#legende{
		color:rgba(255,255,255,0.9);
		font-size:11px;
		font-family: Ubuntu;
		width:17em;
		margin-left:50px;
		font-style:italic;
	}
	
	.qui{
	position:absolute;
	left:65%;
	top:30%;
	}
    
    .pres{
        top:27%;
    }
	
	.pres {
	  position: relative;
	  width: 100px; 
	  height: 57.74px;
	  background-color: #00aeef;
	  margin: 28.87px 0;
		-webkit-transition: all 1s ease;
		-o-transition: all 1s ease;
		-moz-transition: all 1s ease;
		-ms-transition: all 1s ease;
		-kthtml-transition: all 1s ease;
	}

	.pres:before,
	.pres:after {
	  content: "";
	  position: absolute;
	  z-index: 1;
	  width: 70.71px;
		height: 70.71px;
	  -webkit-transform: scaleY(0.5774) rotate(-45deg);
	  -ms-transform: scaleY(0.5774) rotate(-45deg);
	  transform: scaleY(0.5774) rotate(-45deg);
	  background-color: inherit;
	  left: 14.6447px;
	}

	.pres:before {
	  top: -35.3553px;
	}

	.pres:after {
	  bottom: -35.3553px;
	}

	/*cover up extra shadows*/
	.pres a {
	  display: block;
	  position: absolute;
	  top:0px;
	 width:100px;
		height:57.7350px;
	  z-index: 2;
	  background: inherit;
	  text-decoration:none;
		font-family: Tahoma;
		font-variant:small-caps;
		color:white;
		text-align:center;
		font-size:16px;
	}

}

@media screen and (max-width:320px) {

	.css-typing {
		font-size:  30px;
	}
    
    .pres{
        top:18%;
    }
}