html, body {
font-family:TextFont,Arial, Helvetica, sans-serif;
padding:0px;
margin:0px;
background-color:#B12D49;
}

@font-face{
font-family:TitleFont;
src:url("font/timeless/Timeless-Bold.ttf");
}

@font-face{
font-family:TextFont;
src:url("font/roboto/Roboto-Regular.ttf");
}

nav {
opacity:0.9;
font-size:0.9vw;
font-weight:light;
line-height:250%;
letter-spacing:3px;
word-spacing:15px;
text-align:right;
position:absolute;
width:100%;
z-index:10;
top:2%;
right:30px;
}

nav a:link{
color:white;
text-decoration:none;
}

nav a:visited{
color:white;
text-decoration:none;
}

nav  a:hover{
animation:2s spacing;
color:white;
font-weight:bold;
text-decoration:none;
}

@keyframes spacing{
0% {letter-spacing:inherit;}
100% {letter-spacing:20px;}
}

nav  a:active{
color:white;
text-decoration:none;
}

#controle .flecheb, #controle .flecheh, #controle .I, #controle .II, #controle .III{ /* "nav" de controle pour naviguer */
position:fixed;
width:3%;
right:1%;
z-index:9;
}

.flecheh{
bottom:58%;
}

.flecheh:hover{
bottom:60%;
}

.I{
bottom:51%;
}

.II{
bottom:44%;
}

.III{
bottom:37%;	
}

.flecheb{
bottom:30%;
}

.flecheb:hover{
bottom:28%;
}

.I:hover,.II:hover,.III:hover{
animation-name:rotation;
animation-duration:1s;
}

@keyframes rotation{
0%   {transform:rotate(0deg);}
100%   {transform:rotate(180deg);}
}


@keyframes slidy { /*Slider*/
0% { left: 0%; }
15% { left: 0%; }
25% { left: -100%; }
35% { left: -100%; }
50% { left: -200%; }
65% { left: -200%; }
75% { left: -100%; }
85% { left: -100%; }
100% { left: -0%; }
}

div#slider {overflow: hidden;top:0%;z-index:2;opacity:0.5;}
div#slider figure img{width:20%; float: left; }
div#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: center;
  font-size: 0;
  animation: 25s slidy infinite; 
  z-index:2;
}


#s1,#s2,#s3{background-color:rgb(251, 251, 240); margin-top:5%;} /* Couleur de fond des sections : beige */

h1{
font-family:TitleFont;
letter-spacing:3px;
font-size:1.7vw;
}

.section1{ /* Section présentation */
text-align:justify;
display:inline-block;
width:40%;
margin:3% 0% 2% 20%;
}

.section1 h1{
margin-left:-8%;
padding-bottom:5%;
}

.section1 p{
font-size:1.05vw;
font-weight:lighter;
line-height:200%;
margin-top:5%;
}

.section1 span{
font-weight:700;
text-decoration:none;
}

.section1 .moi{
opacity:0.95;
margin-top:-18%;
margin-left:96%;
width:50%;
float:left;
transition:opacity 2s;
}

.section1 .moi:hover{
animation-name:mouvement;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
opacity:0.3;  
}

@keyframes mouvement {
0%   {transform:rotate(-5deg);}
100%   {transform:rotate(5deg);}
}


#competences{
margin:2% auto;
animation-name:retrecir;
animation-duration: 1s;
animation-fill-mode:forwards;
}

@keyframes retrecir {
0%   {padding-bottom:15%;}
100%   {padding-bottom:13%;}
}


#audiovisuel, #programmation, #infographie{
font-size:1vw;
font-weight:600;
letter-spacing:1px;
color:white;
margin-top:2%;
position:absolute;
width:12%;
padding:1%;
border-radius: 10px;
text-align:center;
}

#audiovisuel{
background-color:#235e5e; 
left:10%;
}

#infographie{
background-color:#bdbe80;
left:44%;
}

#programmation{
background-color:#58495f;
right:10%;
}

#audiovisuel:hover, #programmation:hover, #infographie:hover{
animation-duration: 0.5s;
animation-name:ombre;	
animation-fill-mode:forwards;
}

@keyframes ombre {
0%   {box-shadow: 0px 0px 0px #555;}
100%   {box-shadow: 1px 1px 12px #555;}
}

#test, #catinfo,#catprog{
display:none;
position:absolute;
width:20%;
height:30%;
}

#test{margin:8% 0% 0% 12%;}
#catinfo{margin:8% 0% 0% 44%;}
#catprog{margin:8% 0% 0% 74%;}

#test img, #catinfo img, #catprog img{
margin:6% auto;
width:23%;	
display:inline-block;
}

#competences:hover{
animation-name:elargir;
animation-duration: 1s;
animation-fill-mode:forwards;
}

@keyframes elargir {
0%   {padding-bottom:13%;}
100%   {padding-bottom:15%;}
}

.section2{ /* Section réalisation*/
text-align:center;
display:inline-block;
width:90%;
margin-left:5%;
margin-top:3%;
}


#galerie{
display:inline-block;
width:100%;
text-align:center;
margin-top:2%;
height:550px; 
width:100%;  
overflow:auto; /* Rajout du scroll automatique */
margin-bottom:7%;
}


#galerie img, object{
padding:0% 1.5% 5% 1.5%;
opacity:0.8;
vertical-align:top;
}

#galerie img:hover, object:hover{
animation-name:couleur;
animation-duration:2s;	
}

@keyframes couleur{
0%   {opacity:0.2;}
100%   {opacity:0.9;}
}


#galerie .hey p, .ndk p, .di p, .eof p, .p p, .pluip p, .haiku p, .foundfootage p, .transmedia p{ /* Propriétés cadres de texte galerie */
color:white;
line-height:140%;
font-size: 1vw;
margin-top:0%;
padding:1.5% 1.5% 1.5% 1.5%;
float:left;
width:10%;
}

#galerie .hey , .ndk , .haiku{ /* Bordure Domaine de l'infographie */
opacity:0.9;
border-top:solid 4px #bdbe80; /* Couleur or*/
}
	

#galerie .di, .pluip, .foundfootage{  /* Bordure domaine de l'audiovisuel */
opacity:0.9;
border-top:solid 4px #235e5e; /* Couleur bleu */
}

#galerie .p, .transmedia, .pluip{ /* Bordure domaine projets personnels */
opacity:0.9;
border-top:solid 4px #58495f; /* Couleur aubergine */
}

#galerie .hey p, .ndk p, .haiku p{ /* Couleur arrière plan : infographie */
background-color:#bdbe80; /* Couleur or*/
}

#galerie .di p, .foundfootage p{ /* Couleur arrière plan : audiovisuel */
background-color:#235e5e; /* Couleur bleu */
}

#galerie .p p, .transmedia p, .pluip p{ /* Couleur arrière plan : projets personnels */
background-color:#58495f; /* Couleur aubergine */
}

	
#galerie span{ /* Nom des domaines */
line-height:200%;
font-size:1vw;
font-weight:800;
letter-spacing:1px;
color:white;	
}

/* Taille des images/vidéos de la galerie */

#galerie #hey1 {width:12%;}
#galerie #hey2{width:28%;}
#galerie #hey3 {width:28%;}

#galerie #ndk1 {width:14%;}
#galerie #ndk2{width:28%;}
#galerie #ndk3 {width:14%;}

#galerie #haiku1 {width:14%;}
#galerie #haiku2 {width:14%;}

#galerie #di1 {width:15.5%;}
#galerie #di2{width:28%;}

#galerie #p1 {width:13%;}
#galerie #p2 {width:13%;}
#galerie #p3{width:18.4%;}
#galerie #p4{width:25%;}

#galerie #transmedia1{width:50%;}

#galerie #pluip1{width:15%;}
#galerie #pluip2{width:28%;}
#galerie #pluip3{width:15%;}

#galerie #ff{width:28%;}


#galerie img:hover, object:hover{
opacity:1;
}

.section3{
text-align:center;
display:inline-block;
width:100%;
margin:12.5% 0% -4% 0%;
}

.section3 h1{
font-size:1.4vw;
}

.section3 p{
font-size:1.05vw;
margin-top:2%;	
}

@keyframes grandir {
0%   {hr:blue;}
100% {h:green;}
}

.girafe{
position:relative;
margin-top:-15%;
width:20%;
display:block;
}

hr{
margin-top:2%;	
height:4px;
background-color:#bdbe80; /* Couleur or */
width:90%;
}

#social{ /* Adresse mail et icones */
color:black;
font-weight:bold;
font-size:130%;
line-height:300%;
word-spacing:50px;
display:inline-block;
margin-top:0%;
}

#social p{ /* Adresse mail */
margin-top:0%;
font-size:1.3vw;
}

#social .imgfb, .imglk, .imgpint{
width:4%;
transition:width 1s;
}

#social .imgfb:hover, .imglk:hover, .imgpint:hover{
width:5%;
}


footer{
background-color:#B12D49;
text-align: center;
display:inline-block;
width:100%;
padding:0.3% 0% 0.3% 0%;
margin-bottom:0%;
}

footer p{
color:white;
font-size:0.9vw;
text-align:right;
padding-right:2%;
}