/* Webfont: Lato-Black */@font-face {
    font-family: 'Lato-Black';
    src: url('fonts/Lato-Black.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-Black.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-Black.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-BlackItalic */@font-face {
    font-family: 'Lato-BlackItalic';
    src: url('fonts/Lato-BlackItalic.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-BlackItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-BlackItalic.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-BlackItalic.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-BlackItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Bold */@font-face {
    font-family: 'Lato-Bold';
    src: url('fonts/Lato-Bold.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-Bold.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-Bold.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-BoldItalic */@font-face {
    font-family: 'Lato-BoldItalic';
    src: url('fonts/Lato-BoldItalic.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-BoldItalic.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-BoldItalic.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-BoldItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Hairline */@font-face {
    font-family: 'Lato-Hairline';
    src: url('fonts/Lato-Hairline.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-Hairline.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-Hairline.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-Hairline.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-Hairline.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-HairlineItalic */@font-face {
    font-family: 'Lato-HairlineItalic';
    src: url('fonts/Lato-HairlineItalic.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-HairlineItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-HairlineItalic.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-HairlineItalic.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-HairlineItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Heavy */@font-face {
    font-family: 'Lato-Heavy';
    src: url('fonts/Lato-Heavy.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-Heavy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-Heavy.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-Heavy.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-Heavy.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-HeavyItalic */@font-face {
    font-family: 'Lato-HeavyItalic';
    src: url('fonts/Lato-HeavyItalic.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-HeavyItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-HeavyItalic.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-HeavyItalic.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-HeavyItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Italic */@font-face {
    font-family: 'Lato-Italic';
    src: url('fonts/Lato-Italic.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-Italic.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-Italic.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-Italic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Light */@font-face {
    font-family: 'Lato-Light';
    src: url('fonts/Lato-Light.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-Light.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-Light.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-Light.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-LightItalic */@font-face {
    font-family: 'Lato-LightItalic';
    src: url('fonts/Lato-LightItalic.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-LightItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-LightItalic.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-LightItalic.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-LightItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Medium */@font-face {
    font-family: 'Lato-Medium';
    src: url('fonts/Lato-Medium.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-Medium.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-Medium.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-Medium.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-MediumItalic */@font-face {
    font-family: 'Lato-MediumItalic';
    src: url('fonts/Lato-MediumItalic.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-MediumItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-MediumItalic.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-MediumItalic.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-MediumItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Regular */@font-face {
    font-family: 'Lato-Regular';
    src: url('fonts/Lato-Regular.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Semibold */@font-face {
    font-family: 'Lato-Semibold';
    src: url('fonts/Lato-Semibold.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-Semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-Semibold.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-Semibold.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-Semibold.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-SemiboldItalic */@font-face {
    font-family: 'Lato-SemiboldItalic';
    src: url('fonts/Lato-SemiboldItalic.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-SemiboldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-SemiboldItalic.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-SemiboldItalic.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-SemiboldItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Thin */@font-face {
    font-family: 'Lato-Thin';
    src: url('fonts/Lato-Thin.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-Thin.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-Thin.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-Thin.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-ThinItalic */@font-face {
    font-family: 'Lato-ThinItalic';
    src: url('fonts/Lato-ThinItalic.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-ThinItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-ThinItalic.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-ThinItalic.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-ThinItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}


*     
 {
  color: white;
}
/*{
  background-image: url("Test10.mp4");
  background-position: center;
  background-size: cover;
   background-attachment: fixed;
    background-repeat: no-repeat; 
    color: white;*/

    /* Style the video: 100% width and height to cover the entire window */
#myVideo {
background-size: cover;
  position: fixed;
    top: 50%;
    left: 50%;
    min-width: 50%;
    min-height: 50%;
    width: 300%;
    height: 300%;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);

}



#transparent
{
  opacity: 0;
}
.liste
{
    font-size: 0.85em;
    text-justify: inter-word;
}
.date
{
     font-family: 'Lato-Thin', Arial, serif;
    font-size: 0.6em;
}
.category
{
    font-family: 'Lato-Medium', Arial, serif;
    font-size: 1em;
}
.place
{
    font-size: 0.9em;

}
.country
{
    font-size: 0.9em;
    color: blue;
    
}

.quote
{
    width: 350px;
    font-family: 'Lato-SemiboldItalic', Arial, serif;
    font-size: 1em;
    text-align: justify;
   padding: 12px;
   margin: 20px; /* Marge extérieure de 50px */
}
h2 
{
    font-family: 'Lato-Black', Arial, serif;
    font-size: 0.8em; 
}

.sub
{font-family: 'Lato-Semibold';
font-size: 1em;
text-align: center;
}

.subtitle_portfolio
{
    font-family: 'Lato-Thin', Arial, serif;
    font-size: 0.7em; 
}

.sidetext
{
     width: 350px;
    font-family: 'Lato-Regular', Arial, serif;
    font-size:0.7em;
   text-align: justify;
  color: #272727;
   padding: 12px;
   margin: 20px; /* Marge extérieure de 50px */
}
.sidetexttitle
{
    width: 400px;
    font-family: 'Lato-Regular', Arial, serif;
    font-size:2em;
   text-align: center;
   
}

.sidetexttitle
{
    width: 350px;
    font-family: 'Lato-Bold', Arial, serif;
    font-size:1em;
   text-align: center;
  color: black;

    -webkit-text-underline-position: under;
  -ms-text-underline-position: below;
  text-underline-position: under; 
   
}

.sidetexttitle:hover a
{
    width: 350px;
    font-family: 'Lato-Bold', Arial, serif;
    font-size:1em;
   text-align: center;
      color: grey;
      transition:all 0.6s;

   
}

.sidetexttitleresearch
{
    width: 350px;
    font-family: 'Lato-Bold', Arial, serif;
    font-size:1.2em;
   text-align: center;
  color: black;

    -webkit-text-underline-position: under;
  -ms-text-underline-position: below;
  text-underline-position: under; 
   
}

.sidetexttitleresearch:hover a
{
    width: 350px;
    font-family: 'Lato-Bold', Arial, serif;
    font-size:1em;
   text-align: center;
      color: grey;
      transition:all 0.6s;

   
}

.indextitle
{
    text-align: center;
    font-family: 'Lato-Bold', Arial, serif;
    font-size:2em;
    color: black;

 }

.indextitle:hover a
{
    text-align:center;
    font-family: 'Lato-Bold', Arial, serif;
    font-size:1.5em;
       color: grey;
      transition:all 0.6s;

   
}

.sidetextsubtitle
{
    width: 500px;
    font-family: 'Lato-Regular', Arial, serif;
    font-size:1.8em;
   text-align: center;
   
}
.sidetextgrey
{
    width: 350px;
    font-family: 'Lato-Regular', Arial, serif;
    font-size:1em;
   text-align: center;
   color: grey;
   
}
.element_0
{
    width: 1px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}
.element_1
{
      width: 250px;
      font-family: 'Lato-Thin', Arial, serif;
}
.element_2
{
      width: 250px;
      font-family: 'Lato-Thin', Arial, serif;
}
.element_3
{
      width: 110px;
      font-family: 'Lato-Thin', Arial, serif;


}
.contact
{
    text-align: center;

}
.elementportfoliodic
{
    text-align: center;
}

.link
{
    text-align: center;
    text-decoration: underline;
}
#conteneurtitle
{
	font-family: 'Lato-Thin', Arial, serif;
	font-size:2;
}

.legend
{
  width: 350px;
    font-family: 'Lato-Italic', Arial, serif;
    font-size:0.6em;
   text-align: center;
   color: grey;
}
h1 /* Utilisation de la police qu'on vient de définir sur les titres */
{
    font-family: 'Lato-Thin', Arial, serif;
    font-size: 2em; 
   
}

h3
{
	font-family: 'Lato-LightItalic', Arial, serif;
	font-size:0.7em;
}
h4
{
	font-family: 'Lato-LightItalic', Arial, serif;
	font-size:1.2em;
}
h5
{
    font-family: 'Lato-Hairline', Arial, serif;
    font-size:1em;
}
h6
{
    font-family: 'Lato-Medium', Arial, serif;
    font-size:1em;
}

.opacity
{opacity: 0.5;}

#conteneursubtitle
{
	position: absolute;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    font-family: 'Lato-Thin', Arial, serif;
    font-size: 0.7em; 
    height:800px; /* Un peu de hauteur pour que les éléments aient la place de bouger */
    margin-top: 450px;
    
 }
  #conteneursubtitlew
{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    font-family: 'Lato-Thin', Arial, serif;
    font-size: 0.7em; 
    height:0px; /* Un peu de hauteur pour que les éléments aient la place de bouger */
    
 }
 #conteneursubtitle2
{
    
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: stretch;
    font-family: 'Lato-Thin', Arial, serif;
    height: 500px; /* Un peu de hauteur pour que les éléments aient la place de bouger */
    

 }
 .video
 {
 	justify-content: flex-end;
 	align-items: flex-end;
 }

  .videoindex
 {
 	   display: flex;
 	   flex-wrap: wrap;
 	justify-content: flex-end;
 	align-items: flex-end;
 	 height: 150px;
 }
#conteneurportfolio
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#conteneurlink
{
    display: flex;
     flex-wrap: wrap;
    justify-content: space-around;
    height: 150px; /* Un peu de hauteur pour que les éléments aient la place de bouger */
    font-family: 'Lato-Thin', Arial, serif;
    font-size: 1.5em; 

}
#conteneurtitle
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    height: 100px; /* Un peu de hauteur pour que les éléments aient la place de bouger */
}
/* Mobil format */.s, .m, .l
{
  max-width:100%;
  height:auto;
  display:block;
  margin-bottom:8px;
}
img{
  display:block;
  max-width:100%;
  height:auto;
}
body{
  margin:24px;
}

/*.grid{
  display:grid;
  grid-template-columns: repeat(3, 400px);
  grid-auto-rows: 288px;
  gap: 24px;
  grid-auto-flow: row dense;
}*/

/*.s{
  grid-column-end: span 1;
  grid-row-end:span 1;
}

.m{
  grid-column-end: span 1;
  grid-row-end:span 2;
}

.l{
  grid-column-end: span 2;
  grid-row-end:span 2;
}
*/
/* Image transparency link */

.a-img-txt{
  display:grid; 
}
 
.a-img-txt>*{
  grid-area:1/1/-1/-1; 

}
 
.a-txt{
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
  opacity:0;
  transition:opacity .8s;
  font-family: 'Lato-ThinItalic', Arial, serif;
font-size: 0.8em; 
}
 
/* les couleurs c1 et c2 */
.c1{
    background:#FFFFFF70; /* avec alpha */
}
 
.c2{
    background:#FFFFFF70; /* avec alpha */
}
 
/* le survol */
.a-txt:hover{
  opacity:1;
font-family: 'Lato-ThinItalic', Arial, serif;
font-size: 0.8em; 
}
 

img{
  max-width:100%;
  height:auto;
}
a{
  text-decoration:none;
}

.book 
{ 
position: relative;
  right: -350px; 
  bottom: -200px; 
 }

 .bookbis
{ 
position: relative;
  right: 0px; 
  bottom: 0px; 
 }

.contener {
    background-color: #fff;
    
}
.secondaire{
    width: 0;
    padding-left: 950px;
}
.secondaire{
    display: inline-block;
    vertical-align: top;
    text-align: left;
      font-family: 'Lato-Thin', Arial, serif;
    font-size: 1em; 
}
nav.contener {
    padding: 10px;
    position: fixed;
    top: 20px;
    width: 200px;
}

nav.contener a {
   
    display: block;
    padding: 5px 10px;
    cursor: pointer;
    color: #333;

}

nav.contener a:hover{  background-color: #fff;
        color: #333;
transition: all 6s}
          


.grey img {
filter: grayscale(1);
-webkit-filter: grayscale(1);

-webkit-transition:all 0.3s;
transition:all 0.6s;

}
.grey img:hover {
filter: grayscale(0);
-webkit-filter: grayscale(0);
}

#conteneurresearch
  {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    font-family: 'Lato-Thin', Arial, serif;
    font-size: 0.7em; 
    height:800px; /* Un peu de hauteur pour que les éléments aient la place de bouger */
    text-align: center;
 }