/* --------------------------- */
/*           Banner            */
/* --------------------------- */

section.banner{
    height: 45rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
section.banner::before{
    content: "";
    position: absolute;
    height: inherit;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../images/banner-full.png);
    z-index: -1;
    filter: blur(2px);
    -moz-filter: blur(2px);
    -webkit-filter: blur(2px);
    -o-filter: blur(2px);
}
section.banner > .banner-content{
    width: 100%;
    display: grid;
    grid-template-rows: 50% 50%;
    place-items: center;
}
section.banner > .banner-content > .banner-title{
    padding-bottom: 4rem;
    font-size: xxx-large;
    font-weight: bold;
    text-align: center;
    color: white;
}
section.banner > .banner-content > .banner-search{
    height: 8rem;
    width: 90%;
    max-width: 32rem;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    display: grid;
    grid-template-rows: 5rem calc(100% - 5rem);
}
section.banner > .banner-content > .banner-search > .banner-options{
    height: calc(100% - 2rem);
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 1rem 0 0 1rem;
}
section.banner > .banner-content > .banner-search > .banner-options > button{
    height: calc(100% - 1rem);
    width: max-content;
    background-color: transparent;
    border: none;
    color: white;
    font-size: large;
    font-weight: bold;
    padding-bottom: 1rem;
}
section.banner > .banner-content > .banner-search > .banner-options > button:nth-child(1){
    border-radius: 15px 0 0 0;
}
section.banner > .banner-content > .banner-search > .banner-options > .button-focus{
    border: 6px solid #006446;
    border-style: none none solid none;
}

section.banner > .banner-content > .banner-search > form{
    display: grid;
    grid-template-columns: calc(100% - 4rem) 48px;
    padding: 0 1rem;
}
section.banner > .banner-content > .banner-search > form > input[type=text]{
    border: none;
    width: 100%;
    padding: 0;
    height: 2rem;
    border-radius: 12px 0 0 12px;
    padding-left: 0.5rem;
    font-family: 'Roboto', sans-serif;
    font-size: medium;
    font-weight: normal;    
}
section.banner > .banner-content > .banner-search > form > button{
    border: none;
    background-color: #00412d;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 2rem;
    padding: 0;
    border-radius: 0 12px 12px 0;
}

@media only screen and (max-width: 1024px) {
    section.banner{
        height: 22.5rem!important;
    }
    section.banner > .banner-content > .banner-title{
        padding-bottom: 2rem;
    }
}

/* --------------------------- */
/*          Sponsors           */
/* --------------------------- */

section.sponsors{
    height: 20rem;
    width: 90%;
    max-width: 1200px;
    margin: auto;
    margin-top: 2rem;
    padding: 1rem 0;
    gap: 1rem;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    overflow-x: scroll;
    overflow-y: hidden;

}
section.sponsors > .sponsor-module{
    height: inherit;
    width: 18rem;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
section.sponsors > .sponsor-module > img{
    height: 100%;
    width: auto;
}
section.sponsors > .sponsor-module > .sponsor-text{
    height: 5rem;
    width: calc(100% - 2rem);
    position: absolute;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 50%);
    color: white;
    font-size: large;
    font-weight: bold;
    padding: 1rem;
}
section.sponsors > .sponsor-module > .sponsor-text > p:nth-child(2){
    font-weight: normal;
    overflow-wrap: break-word;
}
section.sponsors > .sponsor-module > .sponsor-text > p:nth-child(2){
    color: white;
    text-decoration: underline;
}
@media only screen and (max-width: 1024px) {
    section.sponsors{
        height: 12rem!important;
    }
    section.sponsors > .sponsor-module{
        width: 10rem!important;
    }
}

/* --------------------------- */
/*         PC-SPORTS           */
/* --------------------------- */

section.pc-sports{
    width: 100%;
    position: relative;
    max-width: 1200px;
    margin: 6rem auto 0 auto;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 15px;
}
section.pc-sports > .pcsport-grid{
    display: grid;
    grid-template-columns: 50% 50%;
    place-items: center;
    height: inherit;
    padding-bottom: 1rem;
}
section.pc-sports > .pcsport-grid >  .pcsport-image{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
section.pc-sports > .pcsport-grid >  .pcsport-image > img{
    height: 30rem;
    max-width: 100vw;
    animation: 6s ease-in-out infinite hover;
}
section.pc-sports > .pcsport-grid > .pcsports-text{
    font-weight: 500;
    margin: 0 1rem 0 1rem;
}
section.pc-sports > .pcsport-grid > .pcsports-text > *{
    margin-bottom: 1rem;
}
section.pc-sports > .pcsport-grid > .pcsports-text > .pcsport-title{
    font-size: xx-large;
    font-weight: 700;
}
section.pc-sports > .pcsport-grid > .pcsports-text > .pcsport-subtitle{
    font-size: large;
    color: rgb(139, 139, 139);
}
section.pc-sports > .pcsport-grid > .pcsports-text > .pcsport-buy-now{
    background: #00573d;
    height: 4rem;
    width: 16rem;
    margin: 4rem auto 0 auto;
    border-radius: 15px;
    transition: .2s;
}
section.pc-sports > .pcsport-grid > .pcsports-text > .pcsport-buy-now:hover{
    transform: scale(1.2);
}
section.pc-sports > .pcsport-grid > .pcsports-text > .pcsport-buy-now > a{
    font-size: 22pt;
    text-decoration: none;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
@keyframes hover {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}
@media only screen and (max-width: 800px) {
    section.pc-sports > .pcsport-grid{
        display: grid;
        grid-template-columns: auto;
    }
    section.pc-sports > .pcsport-grid >  .pcsport-image > img{
        height: 20rem;
    }
    section.pc-sports > .pcsport-grid > .pcsports-text{
        text-align: center;
    }
    section.pc-sports > .pcsport-grid > .pcsports-text > .pcsport-buy-now{
        margin: 2rem auto 0 auto;
    }
}