@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;700&display=swap');
* {
    margin: 0;
}

html,
body {
    margin: 0;
    background-color: #000;
    font-family: 'Montserrat', sans-serif;
}

header {
    height: 75px;
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    position: relative;
    color: #fff;
}

header>.container {
    width: 80%;
    margin: 0 auto;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

header>.container div.logo {
    flex-grow: 1;
}

header>.container span {
    text-transform: uppercase;
    letter-spacing: 1px;
}

header>.container span:nth-child(1) {
    font-weight: 100;
    margin: 0 6px 0 0;
}

header>.container span:nth-child(2) {
    font-weight: 800;
}

section {
    display: flex;
    top: -75px;
    position: relative;
}

section>figure {
    flex-grow: 1;
    height: 100vh;
    position: relative;
    filter: grayscale(0.7) brightness(0.6);
    transition: flex-grow 1s ease, filter 1s ease;
    -webkit-transition: flex-grow 1s ease, filter 1s ease;
    -moz-transition: flex-grow 1s ease, filter 1s ease;
    -ms-transition: flex-grow 1s ease, filter 1s ease;
    -o-transition: flex-grow 1s ease, filter 1s ease;
    -webkit-filter: grayscale(0.7) brightness(0.6);
}

section>figure:hover {
    flex-grow: 1.5;
    filter: grayscale(0) brightness(1);
    -webkit-filter: grayscale(0) brightness(1);
}

section>figure:nth-child(1) {
    background: url('/img/sectionBG_code.jpg');
    background-size: cover;
    z-index: 3;
}

section>figure:nth-child(2) {
    background: url('/img/sectionBG_broadcast.jpg');
    background-size: cover;
    z-index: 2;
}

section>figure:nth-child(3) {
    background-color: blue;
    z-index: 1;
}