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;
}















table#zone_service1 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 195%;
  padding: 10%;
}

table#zone_service1 > tr > th {
  width : 33.3%;
}

.carte_service1 {
  margin-left: 15%;
  margin-top: 4%;
  width: 70%;
  height: auto;
  border-color: #ffffff;
  border-radius: 30px;
  border-width: 5px;
  border-style: ridge;
  background-color: #ffffff0a;
}

.carte_service1:hover {
  border-color: #ffffff;
  border-radius: 50px;
  border-width: 5px;
  border-style: ridge;
  background-color: #098086;
}

.carte_service1 > h3 {
  color: #ffffff;
  text-align: center;
  font-size : 1.75vw;
  font-weight: lighter;
  font-family: 'Fjalla One', sans-serif;
  text-decoration: none;
}

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
















div#zone_texte1 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 265%;
  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 : 75%;
}

th#col_4 {
  width : 5%;
}

th#col_5 {
  width : 5%;
}

#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;
}

#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;
  opacity : 0.35;
}

#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 : 42%;
  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#tit3:hover {
  cursor: pointer;
}

div#tit4 {
  position : absolute;
  width : auto;
  height : auto;
  margin-left : 86.5%;
  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 : 93%;
  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#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: block;
  width : 75%;
  left : 12.5%;
}

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

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





















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

nav#navbar1 > ul {
  position : absolute;
  width : 97.5%;
  height : auto;
  top : 377.5%;
  z-index : 15;
  text-align: center;
}

nav#navbar1 > ul > li {
  width : auto;
  height : auto;
  margin-right : 2%;
  font-weight: light;
  font-family: 'Fjalla One', sans-serif;
  color : #ffffff;
  text-align: center;
  font-size: 1.5vw;
  z-index : 15;
  display: inline;
  list-style: none;
  opacity: 0.35;
}

nav#navbar1 > ul > li:hover {
  cursor: pointer;
  opacity: 1;
}

nav#navbar1 > ul > #li1 {
  opacity: 1;
  color : #10aeb7;
}

table#tabphoto_1, table#tabphoto_2, table#tabphoto_3, table#tabphoto_4, table#tabphoto_5{
  position : absolute;
  height : auto;
  width : 85%;
  top : 395%;
  left : 5%;
}

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

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

img.imgcolaffi {
  width : 20vw;
  margin-left: 2%;
  margin-right: 2%;
  margin-bottom: 10%;
}

img.imgcollogo {
  width : 40%;
  margin-left: 4%;
  margin-bottom: 10%;
}

table#tabphoto_1 {
  display: block;
}

table#tabphoto_2, table#tabphoto_3, table#tabphoto_4, table#tabphoto_5 {
  display: none;
}













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: 245%;
    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;
  }


















  
  h1#Titre_page {
    width : 100%;
    top : 350%;
    font-size: 8vw;
  }

  nav#navbar1 > ul {
    width : 100%;
    height : auto;
    top : 360%;
    left: -7.5%;
  }

  nav#navbar1 > ul > li {
    width : auto;
    height : auto;
    margin-right : 2%;
    font-size: 5.75vw;
  }

  nav#navbar1 > ul > #li1 {
    opacity: 1;
    color : #10aeb7;
  }

















  
  table#tabphoto_1, table#tabphoto_2, table#tabphoto_3, table#tabphoto_4, table#tabphoto_5{
    height : auto;
    width : 95%;
    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;
  }
  
  img.imgcolaffi {
    width : 40vw;
    margin-left: 2%;
    margin-right: 2%;
    margin-bottom: 10%;
  }

  img.imgcollogo {
    width : 70%;
    margin-left: 4%;
    margin-bottom: 10%;
  }
}