/* Lola AZNAR : 09/01/2019 */
/* Feuille de style  */

/*  Les styles */


h1
{ font-size: 100px;
  font-family: Kodex;
  color: #10322a;
  text-align:center;
  margin: 20px;}


h2
{font-size: 30px;
  font-family: Kodex;
  color: #10322a;
  text-align:center;
  margin-top: 0px;}


p {font-family: Kodex; font-size: 24px; margin-top: 100px; color: #10322a; text-align: center;}


a:link {color: #10322a;
text-decoration: none;}
a:visited {color: #10322a;}


/*Les éléments de la page */

body
{ background-image: url(fond2.jpg);
  background-size: auto 100% ;
  background-attachment:fixed;}


section {text-align: center;}


 header
{ display: inline;
  float: left;
  margin-left: 80px;
  margin-right: 80px;
  margin-top: -80px;}


.fleche {float: right;}


.logo
{ width:170px;
  float: left;
  margin-top: 0px;
  position: absolute;}

.logo:hover {box-shadow: 8px 8px 12px #aaa}

footer {display: block;}

#footer
{ height: 100px;
  position: absolute;
  bottom: 0;}

/* Le menu */


#menu ul
{ margin:0px;
  padding:0px;
  list-style-type:none;
  text-align:center;
  font-family: gobold;}


#menu li
{float:right;
 margin:0px;
 padding:0px;}

#menu li a
{display:block;
 width:150px;
 color: #10322a;
 text-decoration:none;}

 #menu li a:hover {font-family: hollow;}

 #menu ul li ul {display:none;}

#menu ul li:hover ul {display:block;}

#menu li:hover ul li {float:none;}

#menu li ul {position:absolute; z-index: 1;}


/*  Le HOVER de l acceuil */
/* Quand on passe sur une image, le texte s'affiche */

figure
{   position: relative;
    display: inline-block;
    overflow: hidden;
    margin: 0;}

img, figcaption {transition: all .25s ease;}

figure img {display: block;}

figcaption
{   position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    padding-top: 25%;
    background: #000;
    background: rgba(0, 0, 0,0.75);
    color: #fff;
    opacity: 0;
    font-family: hollow;
    font-size: 30px;}

figure:hover img {transform: scale(1);}

figure:hover figcaption {opacity: 0.75;}


/* L'affichage des photos */


.Barcelone1{float: left; margin-left: 7%;}
.Barcelone2{margin-top: 5%;}
.Barcelone3{float: right; margin-right: 7%;}
.Barcelone4{margin-bottom: 3%;}




.Hyeres1{float: left; margin-left: 7%;}
.Hyeres2{margin-bottom: 3%;}
.Hyeres5{float: left; margin-left: 7%;}
.Hyeres7{margin-bottom: 3%;}
.Hyeres9{float: right; margin-right: 7%;}





.paris1{float: left; margin-left: 7%;}
.paris3{margin-bottom: 3%;}


.paris16{float: right; margin-right: 7%; }
.paris17{margin-bottom: 3%;}
.paris19{float: left; margin-left: 7%; }
.paris20{margin-bottom: 3%;}



.brl10{float: right; margin-right: 7%;}
.brl11{margin-bottom: 3%;}

.bdx4{ float: right; margin-right: 7%;}
.bdx3{margin-bottom: 3%;}

.bdx17{float: left; margin-left: 7%;}
.bdx18{margin-bottom: 3%;}



/* Polices */

@font-face {
font-family: 'Kodex';
src: url('Kodex-Regular.eot');
src: url('Kodex-Regular.otf') format('truetype'),
     url('Kodex-Regular.woff') format('woff'),
     url('Kodex-Regular.eot?#iefix') format('embedded-opentype');}

@font-face {
font-family: 'Gobold';
src: url('Gobold Bold.eot');
src: url('Gobold Bold.otf') format('opentype'),
     url('Gobold Bold.eot?#iefix') format('embedded-opentype');}

 @font-face {
font-family: 'Hollow';
src: url('Gobold Hollow Bold.eot');
src: url('Gobold Hollow Bold.otf') format('opentype'),
     url('Gobold Hollow Bold.eot?#iefix') format('embedded-opentype');}