body {
	padding:0;
	margin:0;
	overflow:hidden;
	width:100vw;
	height:100vh;
	background-image: url("img/ground.gif");
	font-family: "DS-DIGI";
}

@font-face {
    font-family: "DS-DIGI";
    src: url('ds_digital/DS-DIGI.TTF');
}
@font-face {
    font-family: "DS-DIGII";
    font-style: italic;
    src: url('ds_digital/DS-DIGII.TTF');
}
@font-face {
    font-family: "DS-DIGIB.TTF";
    font-weight: bold;
    src: url('ds_digital/DS-DIGIB.ttf');
}

#lol{
	position: absolute;
	top:-4vh;
	font-family: "DS-DIGI";
	font-size:5vh;
	color:#87FE60;
	height:10vh;
	width:130vw;
}
.content{
	margin-top: -10vh;
	background-image: url("img/telephone.png");
	background-size: cover;
	background-position: center;
	height: 110vh;
	width: 130vh;
	margin: auto;
}

#mecs{
	height: 32vh;
	width: 50vh;
	background-position: center;
	margin: auto;
	left: 4vh;
	position: relative;
	top: 35vh;
	flex-flow: row wrap;
	justify-content: space-between;
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-flex-flow: row wrap; /* Safari 6.1+ */


}
.mec {	cursor:url('http://ekladata.com/hazukicreations.eklablog.com/perso/curseurs/Painted-heart.cur'), pointer;
		height: 10vh;
		width: 10vh;
		border-radius:50%;
		background-size:cover;
		margin:1vh;
		 border-color: pink;
}
#damien{
	background-image: url("img/bg8.jpg");

}

#giordano{
	background-image: url("img/giordano.jpg");

}

#loic{
	background-image: url("img/bg11.jpg");

}

#philippe{
	background-image: url("img/bg3.jpg");

}

#chut{
	background-image: url("img/bg7.jpg");

}

#papi{
	background-image: url("img/men.jpg");

}


#ludovic{
	background-image: url("img/bg9.png");

}

#michel{
	background-image: url("img/papi.jpg");
	background-position: center;


}

#anim{
	position: relative;
	top:43vh;
	left: 5vh;
	margin: auto;
	height: 10vh;
	width: 69vh;
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.gif{
z-index: -1;
position: absolute;	
opacity: 0.8;
height: 19vh;
width: 10vh;

}




#gif13{ 
	top:1%;
	left: 1%;
	opacity: 0.5;
    height: 22vh;
    width: 16vh;
	

}


#gif131{
	top:99%;
	right: 28%;
	opacity: 0.4;
    height: 30vh;
    width: 19vh;
	

}
#gif132{
	top: 16%;
	left: 7%;

}
#gif133{
	top: 75%;
	left: 19%;
	

}
#gif134{
	
top: 46%;
	left: 9%;
}
#gif135{
	
top: 90%;
	right: 90%;
}
#gif136{
	
top: 4%;
	right: 19%;
}
#gif137{
	top: 85%;
	right: 15%;
	}
#gif138{
	top: 40%;
	right: 20%;
	}
#gif139{
	top: 98%;
	left: 25%;
	}
#gif140{
	top: 92%;
	left: 90%;
	}


.gif1{
	z-index: -1;
	position: absolute;	
	opacity: 0.2;
	height: 35vh;
	width: 26vh;
}

#gif1{
	top: 1%;
	left: 15%;

}

#gif12{
	opacity: 0.3;
	top: 15%;
	left: 4%;

}

#gif13{
	opacity: 0.3;
	top: 25%;
	left: 92%;
	width: 40vh;
	height: 50vh;

}

#gif14{
	top: 6%;
	left: 79%;

}

#gif15{
	opacity: 0.2;
	top: 75%;
	left: 1%;
	width: 40vh;
	height: 50vh;

}

#gif16{
	opacity: 0.5;
	top: 38%;
	left: 80%;

}

#gif17{
	top: 90%;
	left: 3%;

}
#gif18{
	top: 70%;
	left: 72%;

}

#gif110{
	top: 89%;
	left: 38%;

}

#gif111{
	top: 0;
	left: 66%;

}


.gif2{
	z-index: -1;
	position: absolute;	
	opacity: 0.4;
	height: 26vh;
	width: 32vh;

}

#gif2{
	opacity: 0.1;
	width:50vh; 
	height:35vh;
	top: -3%;
	left: 35%;
}

#gif21{
	top: 0;
	left: 93%;
}

#gif22{
	top: 5%;
	left: 2%;
}

#gif23{
	top: 40%;
	left:0;
}

#gif24{
	top: 50%;
	left: 17%;
}
#gif25{
	top: 66%;
	left: 85%;
}

#gif26{
	top: 96%;
	left: 80%;
}

#gif27{
	top: 95%;
	left: 17%;
}

.gif3{
	z-index: -1;
	position: absolute;	
	opacity: 0.6;
	height: 13vh;
	width: 6vh;

}

#gif3{
	top: 2%;
	left: 28%;
}

#gif31{
	top: 0;
	left: 93%;
}

#gif32{
	top: 5%;
	left: 2%;
}

#gif33{
	top: 40%;
	left:0;
}

#gif34{
	top: 50%;
	left: 17%;
}
#gif35{
	top: 66%;
	left: 85%;
}

#gif36{
	top: 30%;
	left: 80%;
}

#gif37{
	top: 80%;
	left: 70%;
}

#gif38{
	top: 90%;
	left: 99%;
}

#gif39{
	top: 96%;
	left: 1%;
}

#gif310{
	top:99%;
	left: 60%;
}
#gif311{
	top: 97%;
	left: 49%;
}