@charset "utf-8";
/* CSS Document */

/* =========================
   ROSTER PAGE CONTAINER
   ========================= */

.roster-page #container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    background: #111;
}

/* =========================
   ROSTER SECTION HEADER
   ========================= */

.roster-page .roster-section-header {
    width: 100%;
    text-align: center;
    margin: 20px 0;
}

.roster-page .roster-section-header img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

/* =========================
   ROSTER GALLERY
   ========================= */

.roster-page .rosterGallery {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;

    width: 100%;
    margin: 0;
    padding: 0;
}


/* =========================
   WRESTLER CARD
   ========================= */

.roster-page .wrestler_container {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;

    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}


/* =========================
   WRESTLER IMAGE
   ========================= */

.roster-page .wrestler_container_img {
    width: 100%;
    margin: 0;
    padding: 0;
}

.roster-page .wrestler_container_img img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
	transition: opacity 0.2s ease;
}

.roster-page .wrestler_container_img:hover img {
	opacity: 0.88;
}

/* =========================
   WRESTLER NAME
   ========================= */

.roster-page .wrestler_container_name {
    position:absolute;
	left:0;
	bottom:0;
	width: 100%;
	z-index: 2;
	
    margin: 0;
    padding: 8px 6px;
	box-sizing:border-box;

    text-align: center;
	color:#fff;
	background: rgba(0, 0, 0, 0.7);
	
	transition: color 0.2s ease;
}

.roster-page .wrestler_container:hover .wrestler_container_name {
    color: #ff00aa;
}




/* =========================
   RESPONSIVE BREAKPOINTS
   ========================= */

@media (max-width: 1200px) {
    .roster-page .rosterGallery {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .roster-page .rosterGallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .roster-page #container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .roster-page .rosterGallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}


/* =========================
   ALUMNI STYLING
   ========================= */

.roster-page .alumniGallery .wrestler_container {
	border-bottom: 3px #C0A100;
}

.roster-page [class^="alumni_"] {
    width: 100%;
    aspect-ratio: 300 / 220;

    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

.roster-page [class^="alumni_"]:hover {
    background-position: bottom center;
}

.roster-page .alumni_athena {
    background-image: url("../roster/images/container/alumni/athena.jpg");
}

.roster-page .alumni_avery {
    background-image: url("../roster/images/container/alumni/avery.jpg");
}

.roster-page .alumni_candice {
    background-image: url("../roster/images/container/alumni/candice.jpg");
}

.roster-page .alumni_chelsea {
    background-image: url("../roster/images/container/alumni/chelsea.jpg");
}

.roster-page .alumni_heidi {
    background-image: url("../roster/images/container/alumni/heidi.jpg");
}

.roster-page .alumni_kennadi {
    background-image: url("../roster/images/container/alumni/kennadi.jpg");
}

.roster-page .alumni_marina {
    background-image: url("../roster/images/container/alumni/marina.jpg");
}

.roster-page .alumni_mia {
    background-image: url("../roster/images/container/alumni/mia.jpg");
}

.roster-page .alumni_nikki {
    background-image: url("../roster/images/container/alumni/nikki.jpg");
}

.roster-page .alumni_nyla {
    background-image: url("../roster/images/container/alumni/nyla.jpg");
}

.roster-page .alumni_penelope {
    background-image: url("../roster/images/container/alumni/penelope.jpg");
}

.roster-page .alumni_priscilla {
    background-image: url("../roster/images/container/alumni/priscilla.jpg");
}

.roster-page .alumni_red {
    background-image: url("../roster/images/container/alumni/red.jpg");
}

.roster-page .alumni_taya {
    background-image: url("../roster/images/container/alumni/taya.jpg");
}

.roster-page .alumni_tesha {
    background-image: url("../roster/images/container/alumni/tesha.jpg");
}

.roster-page .alumni_thea {
    background-image: url("../roster/images/container/alumni/thea.jpg");
}

.roster-page .alumni_thunder {
    background-image: url("../roster/images/container/alumni/thunder.jpg");
}

.roster-page .alumni_toni {
    background-image: url("../roster/images/container/alumni/toni_storm.jpg");
}

.roster-page .alumni_viper {
    background-image: url("../roster/images/container/alumni/viper.jpg");
}

.roster-page .alumni_willow {
    background-image: url("../roster/images/container/alumni/willow.jpg");
}