body {
    background-color:whitesmoke;
}

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

#link{
filter: blur(0px);
   
}

#link:hover{
    filter: blur(0.5px);
}


H1{
    font-weight: 500;
    color: black;
    font-family: serif;
    font-size: 2.5vh;
    position: relative;
    top: 2%;
    padding-top: 0%;
    margin-right: 80%; 
}



H2{
  font-weight: 500;
   color: black;
    font-family: serif;
    font-size: 1.6vh;
    filter: blur(0px);
}



   p{
    font-family: serif;
    color: black;
    font-size: 1.6vh;
    display: block;
    font-weight: 100;
    line-height: 1.6vh;
}


H2:hover{
    filter: blur(0.5px);
}

div.scrollmenu {
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
    padding-top: 3%;
    padding-right: 15%;
    padding-bottom: 5%;
}

#accueil{
    position: static;
}

#images1{
    max-height: 75vh;
    max-width: auto;
}

#images2{
     float: right;
    max-height: 60vh;
    max-width: 60vh;
}

#images3{
    max-height: auto;
    max-width: auto;
}

#video{
    max-height: 75vh;
    max-width: auto;
}

.hide{
    display: none;	
}

#link:hover + .hide {
    display: inherit;
    position:fixed;
right: 4%;
bottom: 25%;
animation-name: FadeIn;
animation-duration: 0.5s;
transition-timing-function: linear;
}


#link:hover ~ .cycle-slideshow {
  display: none;
}

#link:not(:hover) ~ .cycle-slideshow{
     animation-name: FadeIn;
animation-duration: 0.7s;
transition-timing-function: linear;
}



#apropos{
     position: fixed;
  left:1%;
  bottom: 0%;
  font-size: 1.6vh;
  line-height: 2.6vh;
}


#footer{
  position: fixed;
  margin-top: 12vh;
  left:1%;
  bottom: 0%;
  font-size: 1.6vh;
  line-height: 2.6vh;
 
}


.cycle-slideshow {
  display: flex;
  position: fixed;
    top:5%;
    bottom:5%;
    right:2%;
    max-width: 50%;
 z-index: -3;
}

.cycle-slideshow img {
    display: block;
    position: fixed;
   max-width: 50%;
    max-height: auto;
    max-width: 100%;
}

.cycle-prev{  
   cursor: w-resize;
   position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: 800;
    height: 100%;
}

.cycle-next{
    cursor: e-resize;
    margin-left: 50%;
     position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: 800;
    height: 100%;
}


@keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media all and (max-width: 1024px) and (orientation : portrait) {
    
    
    #images1{
        margin-top: 20%;
        height: 50vh;
        width: auto;   
    }
    
     #video{
         max-width:75vh;
         max-height:50vh;  
    }
    
    
    h1{
       margin-right: 40%;  
    }
    
    
    #titre{
        position: inherit;
    }
    
    
    #link:hover + .hide {
  display: none;
position: fixed;
right: 4%;
bottom: 8%;
animation-name: FadeIn;
animation-duration: 0.5s;
transition-timing-function: linear;
}
    
    .cycle-slideshow {
        display: none;
    }
    
    .cycle-slideshow img {
        display: none;
    }