@font-face {
  font-family: "Alte-Regular";
  src:
    local("Alte"),
    url("fontes/AlteHaasGroteskRegular.ttf") format("truetype")
    
}

@font-face {
  font-family: "Alte-Bold";
  src:
    local("Alte"),
    url("fontes/AlteHaasGroteskBold.ttf") format("truetype")
    
}

body {
  font-family: "Alte-Bold", sans-serif;
  font-weight: 900;
  font-style: normal;
  width: 100%;
  margin: auto;
  
} 

p {
  font-family: Alte-Regular;
    width: auto;
    font-size: 1.3vw;
    line-height: 1.2em;
    color: #ffffff;
     /**   -webkit-text-stroke: 2px rgb(255, 255, 255);
  paint-order: stroke fill;  **/
   /** border: 5px solid red; **/
    margin: 0px 10px 0 10px; 
    padding: 5px 10px 5px 10px; 
    background: rgba(173, 173, 173, 0.45);
    border-radius: 15px;

}

p:hover {

}

.title {
      margin-top: 20vh;
      text-align: center;
   /** border: 2px solid blue; **/
}

.button {
    display: flex;
    width: 100%;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	align-content: stretch;
}

#button {
    font-family: "Alte-Bold", sans-serif;
    font-size: 1.2vw; 
    color: white; 
    padding: 5px 10px 5px 10px; 
    background: rgba(173, 173, 173, 0.4);
    border-radius: 20px 20px 20px 20px;
}

#button:hover{
    color: white; 
    background: rgba(255, 71, 20, 0.8);
    opacity: 100%;
    cursor: pointer;
}

a {
  color: rgba(255, 71, 20, 0.8);
  text-decoration: none;
}

a:hover {
  color: #ffffff;
background: rgba(255, 71, 20, 0.8);
border-radius: 15px; 

}

#h1 {
    font-family: Alte-Regular;
-webkit-text-stroke: 1.5px white;
letter-spacing: -0.06em;
    color: white;
    font-size: 8.5vw; 
     line-height: 0.85em;
}

.h2 {
font-family: Alte-Regular;
letter-spacing: -0.05em;
    color: white;
    font-size: 2vw; 
    line-height: 1.1em;
    text-align: center;
      width: auto;
    margin: 0px 10px 0 10px; 
    padding: 5px 10px 5px 10px; 
    background: rgba(173, 173, 173, 0.5);
    border-radius: 15px;
}

#h2 {
  font-family: Alte-Regular;
letter-spacing: -0.05em;
    color: white;
    font-size: 2.75vw; 
    line-height: 1.1em;
    text-align: center;
      width: auto;
    margin: 0px 10px 0 10px; 
    padding: 5px 10px 5px 10px; 
}

.box {
    width: auto;
    height: 100vh;
    padding: 20px 5px 0 5px;
    
  /**  border: 5px solid #ff48e4; **/ 
}

#box1, #box2, #box3, #box4, #box5, #box6, #box7, #box8, #box9, #box10 {
  position: relative;
  z-index: 1;
  background: transparent;
}

#box2, #box3, #box4, #box5, #box6, #box7, #box8, #box9, #box10 {
  margin: 0px 10px 0 10px;
   display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
	align-content: stretch;
}


#background-media {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

#background-media video,
#background-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease; /** temps du fondu **/ 
  opacity: 0;
}



/*VEROuiLLER LE SCROLL */ 

html {
  scroll-snap-type: y mandatory;
}
.box {
  scroll-snap-align: start;
}


/* RESPONSIVE */ 

#rotate-device {
  display: none;
  position: fixed;
  margin:auto;
  width: 100%;
  height: 100vh;
  font-family: Alte-Regular;
  background: black;
  color: white;
  z-index: 9999;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#rotate-device.show {
  display: flex;
}

@media screen and (max-width: 650px) and (orientation: landscape) {
 p{
 font-size: 20px;
 }

 #h1 {
letter-spacing: -0.06em;
    color: white;
    font-size: 4rem; 
     line-height: 0.85em;
}

.h2 {
     font-size: 1.3rem; 
    line-height: 1.1em;
}

#h2 {
letter-spacing: -0.05em;
    font-size: 1.5rem; 
    line-height: 1.1em;
}

}