.menu, .first-panel, .mobile-menu {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.first-panel-websites, .first-panel-websites .menu, .first-panel-websites .mobile-menu {
    background-image: url('../images/websites-bg.jpeg');
}

.first-panel-websites-blurred, .first-panel-websites-blurred .menu, .first-panel-websites-blurred .mobile-menu {
    background-image: url('../images/websites-bg-blurred.jpeg');
}

.first-panel-professors, .first-panel-professors .menu, .first-panel-professors .mobile-menu {
    background-image: url('../images/professor-bg.jpg');
}

.first-panel-small-business, .first-panel-small-business .menu, .first-panel-small-business .mobile-menu {
    background-image: url('../images/small-business-bg.jpg');
}

.first-panel-client-portal, .first-panel-client-portal .menu, .first-panel-client-portal .mobile-menu {
    background-image: url('../images/businessman.jpg');
}

.first-panel {
    color: white;
    text-align: center;
    height: 100vh;
    max-height: 100vh;
}

.down-arrow {
    position: absolute;
    bottom: 50px;
    z-index: 1;

    left: 50%;
    transform: translate(-50%, -50%);
}

.first-panel p {
    text-shadow: 2px 2px 1px black;
}

.down-arrow:hover {
    filter: brightness(0.8);
    cursor: pointer;
}

.first-panel h3 {
    font-family: "Roboto Light";
}

.first-panel-home {
    overflow-y: hidden;
}

.first-panel a {
    color: white;
}

.first-panel-short {
    height: 90px;
}

.first-panel-short #menu-logo {
    height: 55px;
    transition: none;
}

.first-panel-short .menu {
    height: 90px;
    min-height: 40px;
}

@media screen and (max-width: 700px) {
    .first-panel h1 {
        font-size: 40px;
        margin-top: 150px;
    }

    .first-panel h2 {
        font-size: 30px;
        margin: 0;
    }

    .first-panel h3 {
        font-size: 25px;
        max-width: 90vw;
        display: inline-block;
    }

    .first-panel h4 {
        font-size: 20px;
        max-width: 90vw;
        display: inline-block;
    }
}

@media screen and (max-width: 700px) {
    .first-panel h1 {
        font-size: 45px;
        margin-top: 200px;
    }

    .first-panel h2 {
        font-size: 40px;
        margin: 0;
    }

    .first-panel h3 {
        font-size: 25px;
    }

    .first-panel h4 {
        font-size: 20px;
        margin: 0;
    }
}

@media screen and (max-width: 700px) {
    .logo-mobile img {
        display: initial;
        height: 50px;
        width: auto;
        margin-bottom: 10px;
    }

    .first-panel {
        padding-top: 25px;
    }

    .first-panel h1, .first-panel h2, .first-panel h3 {
        max-width: 90vw;
        display: inline-block;
    }

    .first-panel p {
        max-width: 80vw;
        display: inline-block;
    }

    .first-panel-short {
        height: 130px;
    }
}

@media screen and (min-width: 700px) {
    .first-panel p {
        max-width: 50vw;
        display: inline-block;
    }

    .first-panel h1 {
        padding-top: 150px;
        margin-bottom: 0;
    }

    .first-panel h2 {
        margin: 0;
    }
}