* {}

body p {
    font-size: 16px;
    line-height: 1.5;
}

html, body, h1, h2, h3, h4, h5, h6 {
  font-family: "roc-grotesk", sans-serif!important;
}

/* Colours */

.w3-salmon {background-color:#E2725B; }
.w3-sandy {background-color: #F3E9D2;}
.w3-brownish {background-color: #D9B77E;}
.w3-turkish {background-color:#B9D6D2}
.w3-turkish-dark {background-color:#2F6D7A;}
.w3-blacky {background-color: #1d1d1b;}


/* Header */

#logo {
    width: 30vw;
    min-width: 200px;
    max-width: 400px;
    height: auto;
}

#header {
    padding: 46px 0;
    background: linear-gradient(
    to bottom, 
    #F3E9D2 86%, 
    #D9B77E 14%);
}

#header .w3-flex {
    justify-content:center;
    align-items:flex-end;
    overflow: hidden;
    gap: 8px;
}


#header .illu {
    width: 40vw;
    min-width: 200px;
    max-width: 500px;
    height: auto;
    
}

/* Menus */

.w3-bar-item {color:#fff;}
.menu .fa-bars {
    color: #F3E9D2;
}

/* Video*/

#video {
    align-items: center;
    justify-content: center;
    display:flex;
    flex-flow: column wrap;
}

#video video {
    width:100%;
    max-width: 980px;
}

/*Portraits*/

#ensemble .w3-flex {
    justify-content:center;
    flex-wrap:wrap;
    
}
#ensemble .w3-flex div {
    
    flex-basis: 200px;
    margin: 32px 6px;
}

#ensemble .w3-flex div p:first-child {
    height: 26px;
}

#ensemble .w3-flex img {
    width: 110%;
    height: auto;
    margin-top: -10%;
}


/* Slideshow*/

#slideshow {
    width: 100vw;
    height: 600px;
    overflow: hidden;
    display: flex;
    
}


#slideshow img {
    object-fit: cover;
    width:100%;
}


/* W3 */

button.w3-button {
  background-color: #E2725B;
  color: #fff;
  text-transform: uppercase;
  line-height: 36px;
  padding: 12px 60px;
  margin: 6px;
}

button a {text-decoration: none!important;}


@media only screen and (max-width: 600px) {

#logo {
  min-width: 150px;
    }
    
h3 {
  font-size: 16px!important;
}

#header .w3-flex {

    gap: 0px;
}


}