#main-container{
    text-align: center !important;
}

.img-school{
    padding: 5px;
    border-radius: 20px;
    /*background-color: rgba(0,0,0,.50);*/
    width: 50px !important;
    margin: 3px;
}

.div-school{
    display: inline-block;
    width:150px !important;
    height:150px !important;
    border-radius: 20px;
    background-color: rgba(0,0,0,.50);
    margin:10px
}

.div-school-name{
    max-width:127px !important;
    white-space:nowrap;
    font-size: 60%;
    color:#ffffff;
}

.div-school:hover{
    cursor: pointer;
    background-color: rgba(255,255,255,.50);
}

.div-school.div-school-name:hover{
    color:black;
}

#champ-rings{
    width: 300px;
    margin-top:9px;
    margin-right: 10px;
    border-radius: 20px;
    margin-bottom: 20px;
    border: solid 2px;
    border-color: grey;
}

#letter-jackets{
    width: 300px;
    margin-top:9px;
    margin-right: 10px;
    border-radius: 20px;
    margin-bottom: 20px;
    border: solid 2px;
    border-color: grey;
}

.left-bgi{
    background-image: url("/images/500.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height:500px;
    border: solid 2px;
    border-color: grey;
}

.right-bgi{
    background-image: url("/images/grad_products_2025.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height:500px;
    border: solid 2px;
    border-color: grey;
}

#bottom-sec{
    text-align: center;
    height:300px;
    margin-bottom: 10px;
}

#top-row{
    margin-top:25px;
}

#row-2{
    margin-top: 10px;
    margin-bottom: 10px;
    border: solid 1px black;
    height: 250px;
    background-image: url("/images/ring-fist.jpg");
    background-position: center;
    position: relative;
}

.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#grad-products-container{
    display: flex;
    justify-content: center;
    align-items: center;
}

#show-schools{
    padding: 10px;
    background-color: white;
    border: 2px color black;
    border-radius: 20px;
    margin-left: 15px;
    margin-right: 15px;
    height:435px;
}

.tri-left{
    background-image: url("/images/letterjacket_bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width:33%;
}


.tri-middle{
    background-image: url("/images/champ_bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width:34%;
}

.tri-right{
    background-image: url("/images/yearbook2_bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width:33%;
}

.third-row-button{
    position: relative;
    top:50%;
}

#school-result-container{
    height: 300px;
    overflow-y: auto;
}

#btn-shop-grad-products{
    display:none;
}