@charset "utf-8";
/* CSS Document */

* {
  box-sizing: border-box;
   margin: 0;
}
.banner {
  height: 100vh;
  display:flex;
}
.banner__item {
  flex:1;
  color:white;
  font-weight:bold;
  font-size: 1.2em;
  display:flex;
  justify-content: center;
  align-items:center;
  transition: flex-grow 0.3s;
}
.banner__item:hover {
  flex-grow: 5;
  cursor:pointer;
}
.banner__item:hover .banner__title {
  transform: rotate(0);
}
.banner__item:nth-child(1){
  background-image: linear-gradient(rgba(29, 29, 29, 0.5), rgba(29, 29, 29, 0.5)), url("image-760x470xc.jpg");height:100%;background-position: center;background-repeat: no-repeat;background-size: cover;
}
.banner__item:nth-child(2){
  background-image: linear-gradient(rgba(29, 29, 29, 0.5), rgba(29, 29, 29, 0.5)), url("image-28227013_l-1920.jpg");height:100%;background-position: center;background-repeat: no-repeat;background-size: cover;
}
.banner__item:nth-child(3){
  background-image: linear-gradient(rgba(29, 29, 29, 0.5), rgba(29, 29, 29, 0.5)), url("image-20240430192551-37.jpg");height:100%;background-position: center;background-repeat: no-repeat;background-size: cover;
}
.banner__item:nth-child(4){
  background-image: linear-gradient(rgba(29, 29, 29, 0.5), rgba(29, 29, 29, 0.5)), url("image-5e9c5280605f4.jpg");height:100%;background-position: center;background-repeat: no-repeat;background-size: cover;
}
.banner__item:nth-child(5){
  background-image: linear-gradient(rgba(29, 29, 29, 0.5), rgba(29, 29, 29, 0.5)), url("image-Ferme-du-Vent_-Puits-HD_0.jpg");height:100%;background-position: center;background-repeat: no-repeat;background-size: cover;
}

.banner__title {
 margin: 0;
 transform: rotate(-90deg);
 transition: transform 0.3s;
}

h2{font-family: "Stick No Bills", sans-serif;font-size:2em;text-transform:uppercase;}


/* ----------- NAVIGATION ----------- */

.header{background-color:transparent;position:absolute;width:100%;z-index: 1;}

nav{margin:auto;}
nav img{width:18%;padding:1% 5%;}
nav img:hover{padding:1% 7%;transition: all 0.6s ease;}

.header ul{list-style:none;overflow:hidden;padding-right:5%;background:#f2f2f2;}
.header ul a{display:block;padding:20px;font-size:2em;text-decoration:none;color:#1a1a1a;}
.header ul a:hover{background:#1a1a1a;color:#f2f2f2;transition: all 0.6s ease;}

.header .menu-icon{padding: 28px 20px;position:relative;float:right;cursor: pointer;}
.header .menu-icon .nav-icon{background:#f2f2f2;display:block;height:2px;width:18px;position:relative;transition:background .2s ease-out;}
.header .menu-icon .nav-icon:before{background:#f2f2f2;content:"";display:block;height:100%;width:100%;position:absolute;transition:all .2s ease-out;top:5px;}
.header .menu-icon .nav-icon:after{background:#f2f2f2;content:"";display:block;height:100%;width:100%;position:absolute;transition:all .2s ease-out;top:-5px;}

.header .menu-btn{display:none;}
.header .menu-btn:checked ~ .menu{max-height:300px;}
.header .menu-btn:checked ~ .menu-icon .nav-icon{background:transparent;}
.header .menu-btn:checked ~ .menu-icon .nav-icon:before{transform: rotate(-45deg);top:0;}
.header .menu-btn:checked ~ .menu-icon .nav-icon:after{transform: rotate(45deg);top:0;}

.header .menu{clear:both;max-height:0;transition:max-height .2s ease-out;text-align: right;font-weight: bold;}