header {
    position: relative;
    z-index: 2;
}
#transition {
    position: absolute;
    background-color: white;
    opacity: 0;
    width: 100vw;
    height: 100vh;
    animation-name: transition;
    animation-duration: 2s;
    animation-timing-function: ease;
} 
    @keyframes transition {
        from {opacity: 1;}
        to {opacity: 0;}
    }

#backgroundVideo {
    display: block;
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
}
#logo {
    position: absolute;
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
}
#showreelTextWrap {    
    margin-top: 30vh;
    display: flex;
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
}
#showreelText {
    color: black;
    font-size: 1vw;
    opacity: 1;
    animation-name: textTransition;
    animation-duration: 3s;
    animation-timing-function: ease-in;
} 
    @keyframes textTransition {
        from {opacity: 0;}
        to {opacity: 1;}
    }
#presentation {
    width: 100vw;
    position: relative;
    display: flex;
    background-color: white;
    justify-content: space-between;
    box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5);
}
#presentationTransition {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    transform-origin: right;
    transition: 1.5s;
    animation-timing-function: ease;
    transform: scaleX(1);
}
#presentationTransition[data-scroll="in"] {
    transform: scaleX(0);
}
#profil {
    width: 20vw;
    margin: 1vw;
    padding: 3vw;
}
#quartCercleOrange {    
    width: 20vw;
    align-self: end;
}
#textWrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0vw 3vw;
}
#presentationText {
    align-self: center;
    text-align: center;
    margin: 0.5vw 4vw;
}
#doubleQuote1 {
    width: 3vw;
    align-self: flex-start;
}
#doubleQuote2 {
    width: 4vw;
    align-self: flex-end;
}
#gallerieWrap {
    overflow-x: hidden;
    overflow-y: scroll;
    display: block;
    width: 100vw;
    height: 93vh;
    background-color: #efd9c780;
    position: relative;
}
#title {
    text-align: center;
    padding: 13vh 0vh 7vh 0vh;
}
#gallerie {
    position: relative;
    display: flex;
    width: 100vw;
    height: 60vh;
    justify-content: space-evenly;
    align-items: flex-start;
    flex-wrap: wrap;
}
.viewer {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.iframeViewer {
    top: 0;
    left: 0;
    width: 30vw;
    height: 16.875vw;
    border: 0;
}
#quartCercleBleu {
    position: absolute;
    width: 20vw;
    right: 0;
    top: 0;
}
#demiCercleBleu {    
    position: absolute;
    width: 20vw;
    left: 0;
    bottom: 0;
    transform: translateY(7vh);
}
footer {
    position: relative;
    display: flex;
    background-color: white;
    height: 7vh;
    width: 100vw;
    align-items: center;
    justify-content: space-between;
    padding: 0vw 2vw;
    box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5);
}
#contactWrap {
    display: flex;
}
#instagramWrap {
    display: flex;
}
#instagram {
    height: 1.5vw;
}