@font-face {
    font-family: 'crimsonsemibold';
    src: url('fonts/crimson-semibold.woff2') format('woff2'),
         url('fonts/crimson-semibold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

*{
  margin:0;
  padding:0;
}

body{
  margin:0;
  font-size:20px;
  color:white;
  line-height:1.6;
}

#showcase{
  background-image:url('img/image001.png');
  background-size:cover;
  background-position:center;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:0 20px;
  text-shadow: black 0.1em 0.1em 0.2em;
}

#showcase h1{
  font-family: 'crimsonsemibold';
  font-weight:normal;
  font-size:50px;
  line-height:1.2;
  color:#FFEDC3;
}

#showcase p{
  font-family: 'crimsonsemibold';
  font-weight:normal;
  font-size:25px;
  color:#FFEDC3;
}

#showcase .button{
  font-size:18px;
  text-decoration:none;
  color:black;
  border:#926239 1px solid;
  padding:10px 20px;
  border-radius:10px;
  margin-top:20px;
  background:#AE7542;
}

#showcase .button:hover{
  background:#926239;
  color:#fff;
}


#section-a{
  padding:20px;
  background:#A9560F;
  color:black;
  text-align:center;
}

#section-a h2{
padding:20px;
}


#section-b{
  padding:20px;
  background:#D7C796;
  color:black;
  text-align:center;
  display:none;
}

#section-c{
  display:flex;
  flex-direction:row;
  justify-content: space-evenly; 
  background:#A9560F;
}

#section-c .box-1, #section-c .box-2, #section-c .box-3{
  background:#A9560F;
  padding:30px 0 30px 0;
  color:black;
  width:20vw;
}

h2 img {
width: 50px;
height: auto;
margin-top: -.235ex;
vertical-align: middle;
}

@keyframes scroll-down-pulse {
		from { transform:translateY(-8px); opacity: .3; }
		50% { transform:translateY(8px); opacity: 1; }
		to { transform:translateY(-8px); opacity: .3; }
}
.mouse{
  position:relative;
  margin-top:100px;
  border:2px solid #fff;
  width:1rem;
  height:2rem;
  border-radius:15px;
  animation: scroll-down-pulse 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}
.mouse:before{
  display:block;
  content:'';
  box-sizing:border-box;
  width:0;
  height:25%;
  border-right:2px solid #fff;  
  position:absolute;
  top:.3rem;
  left:50%;
  margin-left:-1px;
}
.mouse:after{
  content:'';
  display:block;
  width:.5rem;
  height:.5rem;
  border-right:2px solid #fff;  
  border-bottom:2px solid #fff;  
  position:absolute;
  bottom:-1rem;
  left:50%;
  margin-left:-.325rem;
  transform:rotate(45deg);
}
.mouse-info{
 position: relative; /* on positionne le conteneur */
    margin: auto 0;
	top:40px;
     right:25px;
 text-align:center;
 color:#fff;
}

.info-box {
    border:1px solid black; 
    border-radius:3px; 
    background:rgba(34, 0, 5, 0.31); 
    padding:10px;
}

@media screen and (max-width: 480px) {
#section-c {
  display:block;
   text-align:center;
}

#section-c .box-1, #section-c .box-2, #section-c .box-3{
  display:block;
  width:auto;
}

}