*, ::before, ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  text-decoration: none;
  list-style-type: none; 
  font-family: "zen dots";
}

html {
background: #1c1c1c;
color: #f7f4f4;
}


.loaderContainer {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: black;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.loaderContainer.hiddenLoader {
  animation: fadeOut 1s forwards;
}

@keyframes fadeOut {

  100% {
    opacity: 0;
    visibility: hidden;
  }

}


.animRotation {
 width:  100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
}

.loader {
  display: block;
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top-color: #8b1a1a;
  animation: spin 2s linear infinite;
}

.loader::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 10px;
  left: 10px;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top-color: #8b1a1a ;
  animation: spin 3s linear infinite;
}

.loader::after {
  content: "";
  position: absolute;
  top: 15px;
  bottom: 15px;
  right: 15px;
  left: 15px;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top-color: #8b1a1a ;
  animation: spin 1.5s linear infinite;
}


@keyframes spin {
  
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.target {
  display: block;
  position: relative;
  left: -9rem;
  align-items: center;
  justify-content: center;
  height: 6rem;
  width: 6rem;
  background: #8b1a1a;
  border-radius: 50%;
  cursor:pointer;
}

.emojis {
  position: relative;
  perspective: 1000px;
}

.emojis div {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
}

.fleche {
position: fixed;
bottom: 15px;
right: 15px;
opacity: 0;
pointer-events: none;
transition: opacity .8s;
}

.fleche.visible {
pointer-events: auto;
opacity: 1;
}

.fleche img {
height: 200px;
width: 200px;
cursor: url("http://www.rw-designer.com/cursor-extern.php?id=104961"), pointer;
}

#deadpoolBan {
margin-bottom: -25px;
margin-left: 260px;
}

#changeQuote {
background-color: #1c1c1c;
color: #f7f4f4;
font-family: 'BadaBoom BB', sans-serif;
font-size: 25px;
padding: 15px 15px;
border:3px groove #8b1a1a;
cursor: url("http://www.rw-designer.com/cursor-extern.php?id=104961"), pointer;
margin-left: 140px;
}

#changeQuote:hover {
background-color: #1c1c1c;
color: #f7f4f4;
border:3px solid #8b1a1a;
font-family: 'BadaBoom BB', sans-serif;
}

.navigation {
  font-size: 25px;
  outline: 1px 1px #8b1a1a;
  text-align: center;
  margin-left: 10%;
  margin-right: 10%;
}

.menu {
  display: flex;
  justify-content: space-between;
  background-color: #1c1c1c;
  box-shadow: 5px 5px 60px #8b1a1a;
  border:5px groove #8b1a1a;
}

.link {
  padding: 15px 15px;
  border:3px solid #1c1c1c;
  cursor: url("http://www.rw-designer.com/cursor-extern.php?id=104961"), pointer;
  width: 250px;
  list-style: none;
  font-family: 'BadaBoom BB', sans-serif;
  color: #f7f4f4;
  
}

.link:hover {
  background-color: #1c1c1c;
  color: #f7f4f4;
  border:3px groove #8b1a1a;
  font-family: 'BadaBoom BB', sans-serif;
  
}

/* Begin mobile navbar */


.deadpool {
  padding-top: 10vh;
  padding-bottom: 5vh;
  text-align: center;
}

.bio {
  text-align: justify;
  margin-left: 10%;
  margin-right: 10%;
  font-size: 30px;
  margin-bottom: 50px;
}

.slideContainer {
width: 100%;
position: relative;

}

.slider img {
width: 100%;
height: 80%;
display: none;
object-fit: none;
padding-top: 15vh;
}

.slider .landscape {
position: relative;
width: 60vw;
object-fit: contain;
text-align: center;
margin: 0 20%;
}


.contrast {
filter: contrast(120%);
}



.slider img.active {
display: inline-block;
animation: fade 0.4s;
} 

@keyframes fade {

from {
  opacity:0;
}

to { opacity: 1;
}

}

.arrow-part { 
position: relative;
}

.arrow {
width: 6rem;
background-color: transparent;
border-radius: 50%;
position: absolute;
animation: pulse 1.3s infinite;
cursor: pointer;
top: -21.9rem;
}

.arrow-right {
right: 10%;
box-shadow: 15px 0 8px 0 #fff;

}

.arrow-right:active {
transform: scale(1.5) rotate(-45deg);
}

.arrow-left {
left: 10%;
box-shadow: -15px 0 8px 0 #fff;

}

.chevron-part {
display: none;

}


.arrow-left:active {
transform: scale(1.5) rotate(45deg);
}


@keyframes pulse {
to {
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.01);
}
}



#title1 , #title2 {
font-size:2em;
margin-bottom:5%;
}

.middle {
  font-size: 90%;
  display: flex;
  flex-direction: row;
}
article{
  text-align: center;
  width: 35%;
  margin: 3%;
  font-size: 1.1em;
}

#imgPool3, #imgPool1, #imgPool2, #imgPool4, #imgPool5{
height: 38.6vh;
width: 30%;
position:absolute;
z-index: 2;
margin-left: 41.5vw;
padding-top: 35px;
}


.middle {
padding-top: 15vh;
}

.board{ 
  margin: 35px;
  height: 35vh;
  border-collapse: collapse;
  width: auto;
  box-shadow: 5px 5px 60px #8b1a1a;
  text-align: center;
  font-size: 1em;
}

thead th {
  background-color:#8b1a1a;
}

tbody tr, td, th{
  border: 1px solid rgba(80, 75, 75, 0.521);
  color:#fff;
}

tr:nth-child(even){
  background-color:#8b1a1a;
}

tr:nth-child(odd){
  background-color:#1c1c1c;
}

caption {
  color:grey;
  text-align: left;
  caption-side: bottom;
}


#mapid {
 height: 50vh;
 width: 80%;
 margin-left: 10%;
}

form{
  margin: 5%;
}

input {
  width: 40%;
  display: block;
}

textarea{
  width: 70%;
  height: 30%;
  position: relative;
}

label{
  display: block;

}

select{
  margin-bottom: 1%;
  padding: 4px;
  border-radius: 8px;

}

.formButton{
margin-top: 18px;
width: 120px;
padding: 4px;
border-radius: 8px;
margin-left: 31%;
}

.blockTextArea{
position: relative;
}

.Advisor{
  height: 23%;
  width: 23%;
  margin: 5%;
}

.Avis{
display: flex;
flex-wrap: wrap;
padding-top: 10vh;
}

.Avis h3{
  margin-bottom: 3%;
}

.formImage {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.Avis h4{
margin-bottom: 3%;
}

#deadform{
margin-left: 25%;
position: absolute;
height: 125px;
top: -85px;

}




footer {
  margin-top: 7rem;
  background: #1b1919;
  padding-bottom: 1rem;
  
}

.contenu-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 0rem 0 0 3%;
  color: white;
  position: relative;
  
  
}

.footer-bloc {
  margin-top: 2.5rem;
  width: 30%;
}

footer h2 {
  margin-bottom: 0.8rem;
  font-size: 1.3rem;
  white-space: nowrap; 
  color: white;
}

.list a {
  line-height: 2rem;
  white-space: nowrap;  
  color: white;
}



.list li:hover {
  text-decoration: underline;
}



@media screen and (max-width: 1300px){ 


.slider img {
  width: 50%;
  height: 50%;
  object-fit:fill;
  margin: 0 25%;
  }

.slider .landscape {
 
  width: 50vw;
  object-fit: contain;
  margin: 0 25%;
}
  
.formButton {
  margin-left: 38%;
}

.arrow-right {
  right: 10%;
}

.arrow-left {
 left:10%;
}

}

@media screen and (max-width: 830px){ 

  .slider img {
    width: 70%;
    height: 70%;
    object-fit:fill;
    margin: 0 15%;
    }

  .arrow {
    display: none;
  }

  .slider .landscape {
    width: 80vw;
    margin: 0 10%;
    height: 60%;
    object-fit: fill;
  }

 

  }


@media screen and (max-width: 600px){     
    .slider img {
      height: 60%;
    }          
    .bio {       
      margin-bottom: 10px;     
    }      
    .contenu-footer {       
      flex-direction: column;       
      flex: 1 0 auto;       
      margin-left: 10%;       
      left: 20%;          
    }     
    footer {       
      margin-top: 3rem;       
      padding-top: 0.5rem;     
    }        
    footer h2 {       
      margin: 1rem 0;     
    }        
    .footer-bloc {       
      margin: 1rem 0;     
    }      
}



@media screen and (min-width: 415px) and (max-width: 1300px){


  .middle{
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  caption{
    display: none;
    content-visibility: hidden;
  }

  .fleche {
    position: fixed;
    bottom: 50px;
    right: 60px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .8s;
    }
    
    .fleche.visible {
    pointer-events: auto;
    opacity: 1;
    }

    .burger {
      display: none;
    }

#changeQuote {
  display: none;
}

#deadpoolBan {
  height: 12vh;
  display: flex;
  margin-left: auto;
  margin-bottom: auto;
  margin-right: 50px;
}

.bio {
  font-size: 2em;
}

#linkBio {
  padding-top: 5vh;
}

  #imgPool3, #imgPool1, #imgPool2, #imgPool4, #imgPool5{
    display: none;
  }

  textarea {
    width: 90%;
  }
  input {
    width: 50%;
  }
  .itemAlign > article > p {
    max-width: 100%;
  }

  .board{
    font-size: 1.5rem;
    order:3;
    text-align: center;
  }
  article{
    font-size: 1.5rem;
    width: auto;
  }}

@media screen and (max-width: 414px){

  .contenu-footer {
    margin-left: 4%;
  }


  html, body {
    width: 100vw;
    overflow-X: hidden;
  }

  .fleche {
    width: auto;
  }

  .burger {
    position: relative;
    width: 42px;
    height: 24px;
    cursor: pointer;
  }

  .burger span {
    width: 100%;
    height: 4px;
    background-color: #8b1a1a;
    display: block;
    position: absolute;
    top: 110%;
    transform: translateY(-50%);
    transition: background-color 0.5s ease-in-out;
  }


.burger span::before, .burger span::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: #8b1a1a;
  transition: transform 0.5s ease-in-out;
  right: 0px;
}

.burger span::before {
transform: translateY(-10px);
}
.burger span::after{
transform: translateY(10px);
}

.burger.active span {
  background-color: transparent;
}

.burger.active span::after {
  transform: translateY(0px) rotateZ(45deg);
}

.burger.active span::before {
  transform: translateY(0px) rotateZ(-45deg);
}


  #deadpoolBan {
    display: none;
  }

  #changeQuote {
    display: none;
  }
  
  .deadpool {
    text-shadow: #8b1a1a 1px 1px;
  }

  .menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #1c1c1c;
    box-shadow: 5px 5px 60px #8b1a1a;
    border:5px groove #8b1a1a;
    margin-top: 19.9px;
    align-items: center;
    max-height: 0;
    opacity: 0;
    transition: 0.5s;
    pointer-events: none;
  }

  .menu.active {
    display: flex;
    max-height: 100vh;
    opacity: 1;
    pointer-events: inherit;
  }

  .middle{
  display: flex;
  flex-direction: column;
  align-items: center;
  
}

caption{
  display: none;
  content-visibility: hidden;
}

#imgPool3, #imgPool1, #imgPool2, #imgPool4, #imgPool5{
  display: none;
}

.board{
order:3;
text-align: center;
}

article{
  width: auto;
}

#linkBio {
  padding-top: 5vh;
}

.bio {
  font-size: 1em;

}


textarea {
  width: 90%;
}

input {
  width: 50%;
}
.itemAlign > article > p {
  max-width: 100%;
}
#deadform{
  display: none;
}

.formButton {
  margin-left: 30.3%;
}

}