/* CSS for the home page */
/* Custom font-family are in the style.css file of the child theme */

h1 {
    font-family: RobotoSlab;
    font-size: 40pt;
}

a {
    font-family: RobotoSlab;
}

#homeHeaderSection {
    background: url('https://louisvilleroseawards.com/wp-content/uploads/2025/07/ROSE-Awards-2024-Rivertown-Photo-Booths-65-X5-scaled.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 54vw;
}

#secSection {
    padding: 5em 0em;
}


#fourthSection {
    margin-top: -4em;
    padding: 0px 19vw;
}

#fifthSection {
    padding: 5em 0em;
}

.width-100-percent {
    width: 100%;
}

/* padding for left and right */
.plr-21vw {
    padding: 0px 21vw;
}

.plr-30vw {
    padding: 0em 30vw;
}

.row {
    text-align: center;
}

.white-text {
    color: white;
}


.square-container {
    position: relative;
    z-index: 1;
    border: 0px solid;
    box-shadow: 0px 5px 24px #888888;
    padding: 4em 4em;
    background: white;
}

.video-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

h1 a {
    text-decoration: none!important;
    color: #ed1c24!important;
}

h1 a:hover {

}

@media (max-width: 1199px) {
    .plr-21vw {
        padding: 0px 6vw;
    }

    #fourthSection {
        padding: 0px 6vw;
    }

    .plr-30vw {
        padding: 0px 18vw;
    }
}

@media (max-width: 992px) {
    #homeHeaderSection {
        background: url('https://louisvilleroseawards.com/wp-content/uploads/2023/07/LouisvilleRoseAwardsHero23v1-topShader.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        height: 97vw;
    }

    .plr-30vw {
        padding: 0px 11vw;
    }
}

@media (max-width: 767px) {
    .plr-30vw {
        padding: 0px 6vw;
    }

    h1 {
        font-size: 32pt;
    }
}

@media (max-width: 479px) {
    #secSection {
        padding: 3em 0em;
    }

    #homeHeaderSection {
        background-position: 35% 100%;
        height: 138vw;
    }
}

@media (max-width: 400px) {
    h1 {
        font-size: 26pt;
    }
}

@media (max-width: 356px) {
    h1 {
        font-size: 22pt;
    }
}

@media (max-width: 350px) {
    .square-container {
        padding: 4em 2em;
    }
}