html, body {
  overflow-x : hidden;
  box-sizing : border-box;
  margin : 0px;
  padding : 0px;
  scroll-behavior : smooth;
}

body {
  background-color : #070707;
}

/* Selection */
::selection {
  color : #ffffff;
  background-color: #098086;
}


/* Designing for scroll-bar */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgb(242, 242, 242);
  border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background-color: #098086;
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: #065f63;
}











img#Logo_PS {
  position: absolute;
  top : 24.5%;
  left : 11.5%;
  width: 30%;
}

h1#texte_accueil1 {
  position: absolute;
  top : 24.5%;
  left : 50%;
  width: 20%;
  color: #ffffff;
  font-size : 2.25vw;
  font-weight: bold;
  font-family: 'Fjalla One', sans-serif;
  color : #b6b6b6;
}

h2#texte_accueil2 {
  position: absolute;
  top : 27%;
  left : 50%;
  width: 35%;
  color: #ffffff;
  font-size : 4vw;
  font-weight: light;
  font-family: 'Fjalla One', sans-serif;
  color : #ffffff;
}

h3#texte_accueil3 {
  position: absolute;
  top : 53%;
  left : 50%;
  width: 40%;
  color : #b6b6b6;
  font-size : 1.5vw;
  font-weight: bold;
  font-family: 'Fjalla One', sans-serif;
}

a#texte_accueil5 {
  position: absolute;
  top : 85.5%;
  left : 0%;
  width: 100%;
  color: #ffffff;
  text-align: center;
  font-size : 1.1vw;
  font-weight: lighter;
  font-family: 'Fjalla One', sans-serif;
  color : #b9b9b9;
  text-decoration: none;
  display: block;
}

a#texte_accueil5_tel {
  position: absolute;
  top : 85.5%;
  left : 0%;
  width: 100%;
  color: #ffffff;
  text-align: center;
  font-size : 1.1vw;
  font-weight: lighter;
  font-family: 'Fjalla One', sans-serif;
  color : #b9b9b9;
  text-decoration: none;
  display: none;
}

a#texte_accueil4 {
  width: 100%;
  position: absolute;
  top : 90%;
  left : 0%;
  color: #ffffff;
  text-align: center;
  font-size : 1.1vw;
  font-weight: lighter;
  font-family: 'Fjalla One', sans-serif;
  text-decoration: none;
  padding-left: 45.5%;
}

div#border_texte_accueil4 {
  border-width: 1px;
  border-color: #ffffff;
  background-color: #070707;
  border-style: solid;
  border-radius: 20px;
  width: 8vw;
  padding : 4px;
}

a#texte_accueil3:hover {
  cursor: pointer;
  color : #ffffff;
}

.social_1 {
  z-index: 10;
  position: fixed;
  width : 2vw;
  height : 4vh;
  top : 87vh;
  right: 2.5vw;
  opacity : 1;
  transition: all 0.25s ease-out;
}

.social_2 {
  z-index: 10;
  position: fixed;
  width : 2vw;
  height : 4vh;
  top : 92vh;
  right: 2.5vw;
  opacity : 1;
  transition: all 0.25s ease-out;
}

.social_1:hover, .social_2:hover {
  cursor: pointer;
  opacity: 0.35;
}
















div#zone_texte1 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 200%;
  padding: 10%;
}

div#zone_texte1 > .video_texte1 {
  width: 40%;
  height: 60%;
}

div#zone_texte1 > .img_texte1 {
  width: 40%;
}

div#zone_texte1 > p {
  position: absolute;
  left: 45%;
  top: 15%;
  width: 30%;
  font-size : 1vw;
  font-weight: normal;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color : #ffffff;
}

a#but_texte1 {
  width: 100%;
  position: absolute;
  top : 53%;
  left : 0%;
  color: #ffffff;
  text-align: center;
  font-size : 1.1vw;
  font-weight: lighter;
  font-family: 'Fjalla One', sans-serif;
  text-decoration: none;
  padding-left: 55%;
}

div#border_but_texte1 {
  border-width: 1px;
  border-color: #ffffff;
  background-color: #070707;
  border-style: solid;
  border-radius: 20px;
  width: 8vw;
  padding : 4px;
}















table {
  position : absolute;
  width : 95%;
  height : 95%;
  margin-left : 2.5%;
  top : 102.5%;
}

th#col_1 {
  width : 5%;
}

th#col_2 {
  width : 5%;
}

th#col_3 {
  width : 5%;
}

th#col_4 {
  width : 5%;
}

th#col_5 {
  width : 75%;
}

#img1 {
  height : 100%;
  width : 100%;
  background-image: url("images/photo/portrait/IMG\ 93.jpg");
  background-size: cover;
  background-position: center;
  transition: all 0.25s ease-out;
  opacity : 0.35;
}

#img1:hover {
  cursor : pointer;
}

#img2 {
  height : 100%;
  width : 100%;
  background-image: url("images/photo/evenement/Photo\ Aaron-29.jpg");
  background-size: cover;
  background-position : center;
  transition: all 0.25s ease-out;
  opacity : 0.35;
}

#img2:hover {
  opacity : 1;
  cursor : pointer;
}

#img3 {
  height : 100%;
  width : 100%;
  background-image: url("images/info/infoaffi02.jpg");
  background-size: cover;
  background-position: center;
  transition: all 0.25s ease-out;
  opacity : 0.35;
}

#img3:hover {
  opacity : 1;
  cursor : pointer;
}

#img4 {
  height : 100%;
  width : 100%;
  background-image: url("images/photo/portrait/Img-7.jpg");
  background-size: cover;
  background-position: center;
  transition: all 0.25s ease-out;
  opacity : 0.35;
}

#img4:hover {
  opacity : 1;
  cursor : pointer;
}

#img5 {
  height : 100%;
  width : 100%;
  background-image: url("images/photo/auto/IMG\ 123.jpg");
  background-size: cover;
  background-position: center;
  transition: all 0.25s ease-out;
}

#img5:hover {
  opacity : 1;
  cursor : pointer;
}



















div#tit1 {
  position : absolute;
  width : auto;
  height : auto;
  margin-left : 0%;
  top : 180%;
  transform: rotate(-90deg);
  text-align : center;
  font-size : 2vw;
  font-weight: bold;
  font-family: 'Fjalla One', sans-serif;
  color : #ffffff;
  z-index : 5;
}

div#tit1:hover {
  cursor: pointer;
}

div#tit2 {
  position : absolute;
  width : auto;
  height : auto;
  margin-left : 8.25%;
  top : 180%;
  transform: rotate(-90deg);
  text-align : center;
  font-size : 2vw;
  font-weight: bold;
  font-family: 'Fjalla One', sans-serif;
  color : #ffffff;
  z-index : 5;
}

div#tit2:hover {
  cursor: pointer;
}

div#tit3 {
  position : absolute;
  width : auto;
  height : auto;
  margin-left : 11%;
  top : 180%;
  transform: rotate(-90deg);
  text-align : center;
  font-size : 2vw;
  font-weight: bold;
  font-family: 'Fjalla One', sans-serif;
  color : #ffffff;
  z-index : 5;
}

div#tit3:hover {
  cursor: pointer;
}

div#tit4 {
  position : absolute;
  width : auto;
  height : auto;
  margin-left : 17%;
  top : 180%;
  transform: rotate(-90deg);
  text-align : center;
  font-size : 2vw;
  font-weight: bold;
  font-family: 'Fjalla One', sans-serif;
  color : #ffffff;
  z-index : 5;
}

div#tit4:hover {
  cursor: pointer;
}

div#tit5 {
  position : absolute;
  width : auto;
  height : auto;
  margin-left : 56%;
  top : 180%;
  transform: rotate(0deg);
  text-align : center;
  font-size : 4vw;
  font-weight: bold;
  font-family: 'Fjalla One', sans-serif;
  color : #ffffff;
  z-index : 5;
}

div#tit5:hover {
  cursor: pointer;
}

















.fondlien {
  position: absolute;
  height : 90%;
  top : 103.5%;
  z-index: 5;
}

#fondlien_1 {
  display: none;
  width : 75%;
  left : 2.5%;
}

#fondlien_2 {
  display: none;
  width : 75%;
  left : 7.5%;
}

#fondlien_3 {
  display: none;
  width : 75%;
  left : 12.5%;
}

#fondlien_4 {
  display: none;
  width : 75%;
  left : 17.5%;
}

#fondlien_5 {
  display: block;
  width : 75%;
  left : 22.5%;
}





















div#tel2 {
  margin-top : 150%;
  width: 80%;
  margin-left: 10%;
}

h1#Titre_page {
  position : absolute;
  width : 80%;
  height : auto;
  top : 305%;
  font-weight: bold;
  font-family: 'Fjalla One', sans-serif;
  color : #ffffff;
  text-align: center;
  font-size: 3vw;
  z-index : 15;
}

form {
  position: absolute;
  width : 40%;
  height : 80%;
  top : 331%;
  left : 32%;
}

label {
  font-weight: normal;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 1.125vw;
  color: #dadada;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

input.saisie, .saisie2 {
  background : none;
  border : none;
  border-bottom-color: #ffffff;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  color : #ffffff;
}

.saisie2 {
  width: 36.5vw;
  height: 15vh;
}

#pos1 > input.saisie, #pos2 > input.saisie, 
#pos3 > input.saisie, #pos4 > input.saisie {
  width : 16.5vw;
}

#pos1 {
  position: absolute;
  left : 0%;
}

#pos2 {
  position: absolute;
  left : 50%;
}

#pos3 {
  position: absolute;
  top : 17.5%;
  left : 0%;
}

#pos4 {
  position: absolute;
  top : 17.5%;
  left : 50%;
}

#pos5 > input.saisie, #pos6 > input.saisie {
  width : 36.5vw;
}

#pos5 {
  position: absolute;
  top : 45%;
  left : 0%;
}

#pos6 {
  position: absolute;
  top : 62.5%;
  left : 0%;
}

#pos7 {
  position: absolute;
  top : 35%;
  left : 0%;
}

input.bout {
  z-index : 3;
  position: absolute;
  top : 95%;
  left : 35%;

  width: 20%;
  height: 6%;
  background-color : #070707;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-color: #ffffff;
  border-width: 1px;
  border-style: solid;
  border-radius: 312px;
  padding-left : 1%;
  padding-right : 1.75%;
  padding-top : 0.5%;

  font-size : 1.1vw;
  font-weight: lighter;
  font-family: 'Fjalla One', sans-serif;
  text-decoration: none;
  color: #dadada;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease-out;
}

input.bout:hover {
  background: #ffffff;
  border-color : #070707;
  cursor: pointer;
  color: #070707;
}










.multiselect {
  width: 15vw;
  margin-left : 11vw;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: normal;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 1.125vw;
  color: #dadada;
  background : #070707;
  border : none;
  border-bottom-color: #ffffff;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 0.5px #dadada solid;
  background-color: #070707ab;
  font-weight: normal;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 1.125vw;
  color: #dadada;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #10aeb7;
}

div#espace_form {
  position: absolute;
  top: 110%;
  width: 10%;
  height: 10%;
}





















div#tel1 {
  display: block;
}

div#tel2 {
  display: block;
}

div#table1 {
  display : block;
}

div#table2 {
  display : none;
  clear : both
}







@media screen and (max-width : 600px) and (orientation: portrait) {
  
  img#Logo_PS {
    top : 20%;
    left : 10%;
    width: 80%;
  }

  h1#texte_accueil1 {
    position: absolute;
    top : 50%;
    left : 10%;
    width: 80%;
    font-size : 7.25vw;
    text-align: center;
  }

  h2#texte_accueil2 {
    top : 53%;
    left : 10%;
    width: 80%;
    font-size : 10vw;
    text-align: center;
  }

  h3#texte_accueil3 {
    top : 69%;
    left : 10%;
    width: 80%;
    font-size : 5vw;
    text-align: center;
  }

  a#texte_accueil5 {
    top : 85.5%;
    left : 0%;
    width: 100%;
    color: #ffffff;
    font-size : 4.1vw;
    display: none;
  }

  a#texte_accueil5_tel {
    top : 85.5%;
    left : 0%;
    width: 100%;
    color: #ffffff;
    font-size : 4.1vw;
    display: block;
  }

  a#texte_accueil4 {
    left : -12.5%;
    font-size : 4.1vw;
  }

  div#border_texte_accueil4 {
    border-radius: 50px;
    width: 30vw;
    padding : 5px;
  }

  .social_1 {
    display: none;
  }

  .social_2 {
    display: none;
  }














  table#zone_service1 {
    width: 100%;
    height: 100%;
    top: 180%;
    padding: 10%;
  }
  
  table#zone_service1 > tr > th {
    width : 33.3%;
  }
  
  .carte_service1 {
    margin-left: 0%;
    margin-right: 4%;
    margin-top: 10%;
    width: auto;
    border-radius: 15px;
  }
  
  .carte_service1 > h3 {
    font-size : 3.75vw;
  }

  h1#Titre_services {
    font-size: 8vw;
    top : 205%;
  }






















  div#zone_texte1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 205%;
    padding: 10%;
  }
  
  div#zone_texte1 > .video_texte1 {
    width: 40%;
    height: 60%;
  }
  
  div#zone_texte1 > .img_texte1 {
    width: 80%;
  }
  
  div#zone_texte1 > p {
    position: absolute;
    left: 10%;
    top: 32.5%;
    width: 65%;
    font-size : 3vw;
    font-weight: normal;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color : #ffffff;
  }
  
  a#but_texte1 {
    width: 100%;
    position: absolute;
    top : 83%;
    left : -22.5%;
    color: #ffffff;
    text-align: center;
    font-size : 3.1vw;
    font-weight: lighter;
    font-family: 'Fjalla One', sans-serif;
    text-decoration: none;
    padding-left: 55%;
  }
  
  div#border_but_texte1 {
    border-width: 1px;
    border-radius: 50px;
    width: 20vw;
    padding : 8px;
  }


















  
  div#tel2 {
    margin-top : 150%;
    width: 80%;
    margin-left: 10%;
  }
  
  h1#Titre_page {
    position : absolute;
    width : 80%;
    height : auto;
    top : 310%;
    font-weight: bold;
    font-family: 'Fjalla One', sans-serif;
    color : #ffffff;
    text-align: center;
    font-size: 8vw;
    z-index : 15;
  }
  
  form {
    position: absolute;
    width : 80%;
    height : 80%;
    top : 321%;
    left : 10%;
  }
  
  label {
    font-weight: normal;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 4.125vw;
    color: #dadada;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  }
  
  input.saisie, .saisie2 {
    background : none;
    border : none;
    border-bottom-color: #ffffff;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    color : #ffffff;
  }
  
  .saisie2 {
    width: 75vw;
    height: 15vh;
  }
  
  #pos1 > input.saisie, #pos2 > input.saisie, 
  #pos3 > input.saisie, #pos4 > input.saisie {
    width : 35.5vw;
  }
  
  #pos5 > input.saisie, #pos6 > input.saisie {
    width : 75vw;
  }
  
  input.bout {
    top : 95%;
    left : 35%;
  
    width: 30%;
    height: 6%;
  
    font-size : 3.1vw;
    background: #ffffff;
    border-color : #070707;
    cursor: pointer;
    color: #070707;
  }















  
  .multiselect {
    width: 55vw;
    margin-left : 11vw;
  }

  .selectBox select {
    width: 100%;
    font-weight: normal;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 3.125vw;
    color: #dadada;
    background : #070707;
    border : none;
    border-bottom-color: #ffffff;
    border-bottom-width: 1px;
    border-bottom-style: solid;
  }

  .overSelect {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

  #checkboxes {
    display: none;
    border: 0.5px #dadada solid;
    background-color: #070707ab;
    font-weight: normal;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1.125vw;
    color: #dadada;
  }

  #checkboxes label {
    display: block;
  }

  #checkboxes label:hover {
    background-color: #10aeb7;
  }

  div#espace_form {
    position: absolute;
    top: 110%;
    width: 10%;
    height: 10%;
  }



















  
  table#tabphoto_1, table#tabphoto_2, table#tabphoto_3, table#tabphoto_4, table#tabphoto_5{
    height : auto;
    width : 100%;
    top : 370%;
    left : 0%;
  }

  table#tabphoto_1 > tr > th {
    width : 100%;
  }

  table#tabphoto_2 > tr > th {
    width : 100%;
  }



















  div#table1 {
    display : none;
  }

  div#table2 {
    display : block;
  }

  th#col_1_2, th#col_2_2, th#col_3_2, th#col_4_2, th#col_5_2 {
    width : 100%;
    height : 20%;
    cursor : pointer;
  }

  div#tit1_2, div#tit2_2, div#tit3_2, div#tit4_2, div#tit5_2 {
    position : absolute;
    width : 100%;
    height : auto;
    text-align : center;
    font-size : 6vh;
    font-weight: bold;
    font-family: 'Fjalla One', sans-serif;
    color : #ffffff;
    z-index : 5;
  }

  div#tit1_2 {
    top : 109%;
  }

  div#tit2_2 {
    top : 128%;
  }

  div#tit3_2 {
    top : 147%;
  }

  div#tit4_2 {
    top : 166%;
  }

  div#tit5_2 {
    top : 185%;
  }

  #lienimg1_2 {
    left : 0%;
    width : 75%;
  }
  
  #lienimg2_2 {
    left : 9%;
    width : 74%;
  }
  
  #lienimg3_2 {
    left : 17.5%;
    width : 74%;
  }
  
  #lienimg4_2 {
    left : 25.25%;
    width : 75%;
  }

  #img1 {
    background-position: 50%;
  }

  #img5 {
    background-position: 20%;
  }

  #img1, #img2, #img3, #img4, #img5 {
    opacity : 1;
  }
}