/*--THIS IS THE JLR CSS --*/


:root {
    
    /*------------ background-color: var(--boston-bruins-yellow); on html page ------------*/
    
    --montreal-canadiens-red: #AF1E2D;
    --montreal-canadiens-blue: #192168; 
    
    --boston-bruins-yellow: #FFB81C;
    --boston-bruins-black: #000000; 
    
    --toronto-maple-leafs-blue: #00205B;
    
    --detroit-red-wings-red: #CE1126;
    
    --new-york-rangers-blue: #0038A8;
    --new-york-rangers-red: #CE1126;
    
    --chicago-blackhawks-red: #CF0A2C;
    --chicago-blackhawks-orange: #FF671B;
    --chicago-blackhawks-green: #00833E;
    --chicago-blackhawks-yellow: #FFD100;
    --chicago-blackhawks-tan: #D18A00;
    --chicago-blackhawks-blue: #001970;
    
    --st-louis-blues-blue: #002F87;
    --st-louis-blues-yellow: #FCB514;
    --st-louis-blues-navy-blue: #041E42; 
    
    --pittsburgh-penguins-gold: #CFC493;
    --pittsburgh-penguins-black: #000000;
    --pittsburgh-penguins-yellow:#FCB514;
    
    --la-kings-black: #111111;
    --la-kings-silver: #A2AAAD;
    
    --philadelphia-flyers-orange: #F74902;
    --philadelphia-flyers-black: #000000;
    
    --vancouver-canucks-blue: #00205B;
    --vancouver-canucks-green:#00843D;
    --vancouver-canucks-dark-blue:#041C2C;
    --vancouver-canucks-gray:#99999A;
    
    --buffalo-sabres-blue: #003087;
    --buffalo-sabres-yellow: #FFB81C;
    
    --calgary-flames-red: #D2001C;
    --calgary-flames-yellow: #FAAF19; 
    
    --edmonton-oilers-blue: #041E42;
    --edmonton-oilers-orange: #FF4C00;
    
    --washington-capitals-blue: #041E42;
    --washington-capitals-red: #C8102E;
    
    --new-york-islanders-blue: #00539B;
    --new-york-islanders-orange: #F47D30;
    
    --new-jersey-devils-red: #CE1126;
    --new-jersey-devils-black: #000000;
    
    --san-jose-sharks-teal: #006D75;
    --san-jose-sharks-orange: #EA7200;
    --san-jose-sharks-black: #000000;
    
    --ottowa-senators-black: #000000;
    --ottowa-senators-red: #DA1A32;
    --ottowa-senators-gold: #B79257;
    
    --tampa-bay-lightning-blue: #002868;
    
    --anaheim-ducks-orange: #F47A38;
    --anaheim-ducks-gold: #B9975B;
    --anaheim-ducks-silver: #C1C6C8;
    --anaheim-ducks-black: #000; 
    
    --florida-panthers-navy: #041E42;
    --florida-panthers-red: #C8102E;
    --florida-panthers-tan: #B9975B;
    
    --dallas-stars-green: #006847;
    --dallas-stars-silver: #8F8F8C;
    --dallas-stars-black: #111111;
    
    --colorado-avalanche-burgundy: #6F263D;
    --colorado-avalanche-blue: #236192;
    --colorado-avalanche-silver: #A2AAAD;
    --colorado-avalanche-black: #000000;
    
    --arizona-coyotes-red: #8C2633;
    --arizona-coyotes-sand: #E2D6B5;
    --arizona-coyotes-black: #111111;
    
    --carolina-hurricanes-red: #CE1126;
    --carolina-hurricanes-gray: #A4A9AD;
    --carolina-hurricanes-black: #000000;
    
    --nashville-predators-gold: #FFB81C;
    --nashville-predators-navy: #041E42;
    
    --columbus-blue-jackets-blue: #002654;
    --columbus-blue-jackets-red: #CE1126;
    --columbus-blue-jackets-silver: #A4A9AD;
    
    --minnesota-wild-red: #A6192E;
    --minnesota-wild-green: #154734;
    --minnesota-wild-sand: #DDCBA4;
    --minnesota-wild-gold: #EAAA00;
    
    --winnipeg-jets-navy: #041E42;
    --winnipeg-jets-blue: #004C97;
    --winnipeg-jets-red: #AC162C;
    --winnipeg-jets-maroon: #7B303E;
    --winnipeg-jets-darkgray: #55565A;
    --winnipeg-jets-silver: #8E9090;
    
    --vegas-golden-knights-gold: #B4975A;
    --vegas-golden-knights-gray: #333F42;
    --vegas-golden-knights-red: #C8102E;
    --vegas-golden-knights-black: #000000;
    
    --seattle-kraken-seablue: #001628;
    --seattle-kraken-iceblue: #99D9D9;    
    --seattle-kraken-boundlessblue: #355464;
    --seattle-kraken-shadowblue: #68A2B9;
    --seattle-kraken-red: #E9072B;
    
/* ---Other color pallets--- */
/* ---Other color pallets--- */
/* ---Other color pallets--- */

    --atlanta-thrashers-blue: #041E42;
    --atlanta-thrashers-iceblue: #5C88DA;
    --atlanta-thrashers-red: #862633;
    --atlanta-thrashers-copper: #B86125;
    --atlanta-thrashers-gold: #FFA300;
    
    --hartford-whalers-blue: #00205B;
    --hartford-whalers-green: #046A38;
    --hartford-whalers-gray: #A2AAAD;
    
    --minnesota-north-stars-green: #009639;
    --minnesota-north-stars-yellow: #FFD100;
    --minnesota-north-stars-black: #000000;
    
    --quebec-nordiques-red: #DA291C;
    --quebec-nordiques-blue: #005EB8;
    
    
    --jlr-purple: #773DBD;
}





* {
    margin: 0;
    padding: 0;
    font-family: sans-serif; 
    box-sizing: border-box; 
    text-decoration: none;
    
}

html, body {
    background-color: white;
    padding: 0px;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}


html{
    scroll-behavior: smooth;
}


/*----====================================THESE FEATURES WILL DELETE THE ITEMS YOU DONT NEED IN ALL PAGES=============================================----*/

#mature{
    display: "";/*note. Keep "" if you want the text to stay visible in pictures. Blocks takes it away.*/
}

#go-to-full-gallery{
    display: none; /* this is the go to full gallery button under the Load More Pictures Buttons.*/
}

#return-to-roster-page{
    display: ""; /* this Button returns full gallery to Roster Page.*/
}

.nhl-mass-container{
    display: "";
}

.full-gallery {/*None this when you upload this is my help to get me to full galleries.*/
    display: "";
}
/*----====================================THESE FEATURES WILL DELETE THE ITEMS YOU DONT NEED IN ALL PAGES=============================================----*/




/*----=================================================================================----*/
/*----=================================================================================----*/
/*----=================================================================================----*/


/*------------ NAVBAR CREATION ------------*/
/*------------ NAVBAR CREATION ------------*/
/*------------ NAVBAR CREATION ------------*/
.logo {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
}


#logo1 {
width: 75px;
height: 100%;
margin-right: 10px;
}

#logo2 {
    width: 200px; 
    height: 100%;
}


nav{
    height: 80px;
    background: white;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .2);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;

}

nav .logo{
    position: absolute;
    top: 3px;
    left: 5%;
}

nav ul{
    float: right;
    margin-right: 25px;
}

nav ul li{
    display: inline-block; /* this causes the stacked li's to become lined up next to each other */
    line-height: 80px; /* this causes the li's to go from hanging out in the ceiling to being in the middle of nav */
}
nav ul li a{
    position: relative;
    padding: 5px 12px; /* this causes the text and red animated underlines to separate more */
    color: black;
    font-size: .9rem;
    text-transform: uppercase;
}

nav ul .active{
    background: black;
    color: white;
}

nav ul li a:before{ /* this creates the red underline under the letters */
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: black; /* this the last time you see the red underlines */
    transform: scaleX(0); /* this causes the line to disappear */
    transform-origin: right; /* in the future the red lines will apear from the right */
    transition: transform .4s linear;
}

nav ul li a:hover:before{
    transform: scaleX(1);
    transform-origin: left;
}



.checkbtn{
    font-size: 30px;
    color: black;
    float: right;
    line-height: 40px;
    margin: 30px;
    cursor: pointer;
    display: none;
}

#check{
    display: none;
}
/*------------ NAVBAR CREATION ------------*/
/*------------ NAVBAR CREATION ------------*/
/*------------ NAVBAR CREATION ------------*/















/*------------ SCROLL UP AND DOWN BUTTONS ------------*/
/*------------ SCROLL UP AND DOWN BUTTONS ------------*/
/*------------ SCROLL UP AND DOWN BUTTONS ------------*/
.top-btn{
    display: ;/*--set it up on individual pages---*/
    position: fixed;
    bottom: 120px;
    right:50px;
    transition: transform 0.3s;
    z-index:50;
}



.top-btn img{
    width: 70px;
    border-radius: 100px;
    border: 0px solid black;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .2);
}

.top-btn:hover{
    transform: scale(1.1);
    cursor: pointer;
    background:none;
}


.bottom-btn{
    display: ;/*--set it up on individual pages---*/
    position: fixed;
    bottom: 40px;
    right:50px;
    transition: transform 0.3s;
    z-index:50;
}

.bottom-btn img{
    width: 70px;
    border-radius: 100px;
    border: 3px solid var(--jlr-purple);
   
}

.bottom-btn:hover{
    transform: scale(1.1);
    cursor: pointer;
    background:none;
}

.bottom-btn img:hover{
     box-shadow: 0 0 10px 2px rgba(0, 0, 0, .2);
}
/*------------ SCROLL UP AND DOWN BUTTONS ------------*/
/*------------ SCROLL UP AND DOWN BUTTONS ------------*/
/*------------ SCROLL UP AND DOWN BUTTONS ------------*/


















/*------------ VIDEO BACKGROUND FOR HOME PAGE ------------*/
/*------------ VIDEO BACKGROUND FOR HOME PAGE ------------*/
/*------------ VIDEO BACKGROUND FOR HOME PAGE ------------*/
.video-box{
    min-height: 100vh;
    display: ;/*--set it up on individual pages---*/
    position: relative;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.video-box img{
    width: 60%;
    margin-top: 100px;
    transform: rotate(-7deg);
    z-index: 1;
}

.video-box .background-clip {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover; 
}
/*------------ VIDEO BACKGROUND FOR HOME PAGE ------------*/
/*------------ VIDEO BACKGROUND FOR HOME PAGE ------------*/
/*------------ VIDEO BACKGROUND FOR HOME PAGE ------------*/








/*------------ PLAIN VIDEO BACKGROUN FOR OTHER PAGES ------------*/
/*------------ PLAIN VIDEO BACKGROUN FOR OTHER PAGES ------------*/
/*------------ PLAIN VIDEO BACKGROUN FOR OTHER PAGES ------------*/
.plain-main-background {
    height: 500px;
    top: 80px;
    display: ;/*--set it up on individual pages---*/
    position: relative;
    align-items: center;
    align-content: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;  
}

.plain-main-background img {
    width: 50%;
    height: auto;
    transform: rotate(-7deg);
}

.plain-main-background-helpbox {
    display: ;/*--set it up on individual pages---*/
    width: 85%;
    height: 100px;
    margin: auto;
    justify-content: center;
    align-items: center;
    background-color: white;
}
/*------------ PLAIN VIDEO BACKGROUN FOR OTHER PAGES ------------*/
/*------------ PLAIN VIDEO BACKGROUN FOR OTHER PAGES ------------*/
/*------------ PLAIN VIDEO BACKGROUN FOR OTHER PAGES ------------*/







/*------------ BUTTON RETURN BUTTON ------------*/
/*------------ BUTTON RETURN BUTTON ------------*/
/*------------ BUTTON RETURN BUTTON ------------*/
.button-return {
    display: ;/*--set it up on individual pages---*/
    max-width: 85%;
    margin: 20px auto;
    text-align: left;
}

.button-return button {
  background-color: var(--jlr-purple); /* Green */
  border: none;
  color: white;
  border-radius: 25px;
  padding: 15px 32px;
  border: 2px solid var(--jlr-purple);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  transition: 0.3s;
    
}

.button-return button:hover{
    color: var(--jlr-purple);
    background-color: white;
    border: 2px solid var(--jlr-purple);
    cursor: pointer;
    
}
/*------------ BUTTON RETURN BUTTON ------------*/
/*------------ BUTTON RETURN BUTTON ------------*/
/*------------ BUTTON RETURN BUTTON ------------*/











/*------------ QUEEN BIO TEXT WRAPPER ------------*/
/*------------ QUEEN BIO TEXT WRAPPER ------------*/
/*------------ QUEEN BIO TEXT WRAPPER ------------*/
.queen-bio-wrapper {
    display: flex;
    max-width: 600px;
    margin: 50px auto;
    flex-direction: column;
    align-items: center;
    column-gap: 10px;
    padding: 30px 30px;
}



.queen-bio-wrapper .thumbnail{
    width: 250px;
    height: 250px;
    position: relative;  
    flex-shrink: 0;
}




.queen-bio-wrapper .thumbnail img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}


.queen-bio-wrapper .aside{
    width: 300px;
    height: 190px;
    font-size: 20px;
    background-color: none;
    position: flex;
    flex-shrink: 0;
}

.queen-bio-wrapper .aside li{
    margin: 5px;
    
}
/*------------ QUEEN BIO TEXT WRAPPER ------------*/
/*------------ QUEEN BIO TEXT WRAPPER ------------*/
/*------------ QUEEN BIO TEXT WRAPPER ------------*/

























/*------------ THE RED LINE WITH LOGO DIVIDER ------------*/
/*------------ THE RED LINE WITH LOGO DIVIDER ------------*/
/*------------ THE RED LINE WITH LOGO DIVIDER ------------*/
.gear-divider-container {
    position: relative;
    margin: 20px auto 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}


.gear-divider-container .wheel-color-line {
    background-color: ""; /*----Make adjustment on pages------*/
    position: absolute;
    width: 85%;
    height: 5px;
}

.gear-divider-container .logo img{
    margin-bottom: 0px;
    width:100px;
    position: relative;
    z-index: 1;
}
/*------------ THE RED LINE WITH LOGO DIVIDER ------------*/
/*------------ THE RED LINE WITH LOGO DIVIDER ------------*/
/*------------ THE RED LINE WITH LOGO DIVIDER ------------*/








/*------------ TITLE COLOR BAR DIVIDER ------------*/
/*------------ TITLE COLOR BAR DIVIDER ------------*/
/*------------ TITLE COLOR BAR DIVIDER ------------*/
.title-divider {
    width: 85%;
    margin: auto;
    border-radius: 0px;
    margin-bottom: 40px; /*--this gives space at bottom of bars--*/
    margin-top: 0px;
}


.title-divider-main {
    width: 100%;
    text-align: center;
    border-radius: 0px;
    font-size: 1.3rem; /*--or 25px as original------*/
    background-color: ;/*--set it up on individual pages---*/
    color: ;/*--set it up on individual pages---*/
    padding: 15px;
    
    /*--ABOLITION FONT if you want---*/
    /*--font-family: abolition;---*/
    /*--font-weight: 10;---*/
    /*--font-size: 2rem;------*/
    
    /*--ORIGINAL FONT---*/
    /*--font-size: 1.3rem; /*--or 25px as original------*/ 
}
    
.title-divider-underline {
    background-color: ;/*--set it up on individual pages---*/
    width: 100%;
    height: 5px;
    box-shadow: 0 0 3px 0px rgba(0, 0, 0, .3);
    margin-bottom: 0px;
}

.title-divider .small-notes-prompt{
    text-align: center;
    font-size: .8rem;
}
/*------------ TITLE COLOR BAR DIVIDER ------------*/
/*------------ TITLE COLOR BAR DIVIDER ------------*/
/*------------ TITLE COLOR BAR DIVIDER ------------*/








/*------------ this helps provide space ------------*/
.space-help {
    visibility: hidden;
    width: 85%;
    margin: auto;
    border-radius: 0px;
    margin-bottom: 40px; /*--this gives space at bottom of bars--*/
    margin-top: 0px;}


.space-help-main {
    width: 100%;
    text-align: center;
    border-radius: 0px;
    font-size: 1.3rem; /*--or 25px as original------*/
    background-color: ;/*--set it up on individual pages---*/
    color: ;/*--set it up on individual pages---*/
    padding: 15px;}
/*------------ this helps provide space ------------*/  














/*------------ TEXT BOX WITH COLOR DIVIDERS ------------*/
/*------------ TEXT BOX WITH COLOR DIVIDERS ------------*/
/*------------ TEXT BOX WITH COLOR DIVIDERS ------------*/
.text-box-container {
    max-width: 75%;
    margin: 20px auto 100px;
}

.text-box-container .color-line {
    background-color: ;/*--set it up on individual pages---*/
    width: 100%;
    height: 5px;
    margin: 0;
}

.text-box-container .text {
    text-align: center;
    color: black;
    padding: 15px;
    border-radius: 5px;
}
/*------------ TEXT BOX WITH COLOR DIVIDERS ------------*/
/*------------ TEXT BOX WITH COLOR DIVIDERS ------------*/
/*------------ TEXT BOX WITH COLOR DIVIDERS ------------*/

































/*=====================================================================ART GALLERIES====================================================================*/
/*=====================================================================ART GALLERIES====================================================================*/
/*=====================================================================ART GALLERIES====================================================================*/



/*------------------------ BUSH MATES, CLASSY MACYS HOVER IMAGE CHANGE ANIMATION PICTURES ------------------------*/
/*------------------------ BUSH MATES, CLASSY MACYS HOVER IMAGE CHANGE ANIMATION PICTURES ------------------------*/
/*------------------------ BUSH MATES, CLASSY MACYS HOVER IMAGE CHANGE ANIMATION PICTURES ------------------------*/
.bush-mates-feature-wrapper-with-hover-change, .classy-macys-feature-wrapper-with-hover-change{
    max-width: 75%;
    padding: 10px;
    border: 10px solid black;
    margin: 20px auto 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply;
    
    
}

main-support-figure{

    float: center;
    margin: 10px;
    transition: .3s;
    
}


main-support-figure:hover{
    transform: scale(1.09) rotate(-2deg);
    z-index: 1;
}

.hover-card-support{
    position: relative;
    height: 389px;
    width: 300px;
}


.hover-card-support img{
    position: absolute;
    height: auto;
    width: 300px;
    transition: opacity 0.3s ease-in-out;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .2); 
    
}

.hover-card-support img.img-front:hover{
    opacity: 0;
    cursor: pointer;   }

/*------------------------ BUSH MATES, CLASSY MACYS HOVER IMAGE CHANGE ANIMATION PICTURES ------------------------*/
/*------------------------ BUSH MATES, CLASSY MACYS HOVER IMAGE CHANGE ANIMATION PICTURES ------------------------*/
/*------------------------ BUSH MATES, CLASSY MACYS HOVER IMAGE CHANGE ANIMATION PICTURES ------------------------*/











/*------------ FEATURE ARTWORKS ,BUSH MATES, CLASSY MACYS,AND OTHER BANNER FOR GIRLS AND OTHERS ------------*/
/*------------ FEATURE ARTWORKS ,BUSH MATES, CLASSY MACYS,AND OTHER BANNER FOR GIRLS AND OTHERS ------------*/
/*------------ FEATURE ARTWORKS ,BUSH MATES, CLASSY MACYS,AND OTHER BANNER FOR GIRLS AND OTHERS ------------*/
.feature-wrapper, .bush-mates-feature-wrapper, .classy-macys-feature-wrapper, .other-artworks-feature-wrapper{
    max-width: 75%;
    padding: 10px;
    border: 10px solid black;
    margin: 20px auto 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply;
}

.feature-wrapper img, .bush-mates-feature-wrapper img, .classy-macys-feature-wrapper img, .other-artworks-feature-wrapper img {
    width: 300px;
    height: auto;
    object-fit: cover;
    padding: 0px;
    margin: 5px;
    transition: transform 0.3s;
    cursor: pointer;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .2);
}

.feature-wrapper img:hover {
    transform: scale(1.05);
}

.bush-mates-feature-wrapper img:hover {
    transform: scale(1.05);
}

.classy-macys-feature-wrapper img:hover {
    transform: scale(1.05);
}

.other-artworks-feature-wrapper img:hover{
    transform: scale(1.05);
}

/*------------ FEATURE ARTWORKS ,BUSH MATES, CLASSY MACYS,AND OTHER BANNER FOR GIRLS AND OTHERS ------------*/
/*------------ FEATURE ARTWORKS ,BUSH MATES, CLASSY MACYS,AND OTHER BANNER FOR GIRLS AND OTHERS ------------*/
/*------------ FEATURE ARTWORKS ,BUSH MATES, CLASSY MACYS,AND OTHER BANNER FOR GIRLS AND OTHERS ------------*/

























/*------------ FEATURE ARTWORKS ALTERNATIVE WITH TEXT DESCRIPTION BOX ANIMATION ON HOVER ------------*/
/*------------ FEATURE ARTWORKS ALTERNATIVE WITH TEXT DESCRIPTION BOX ANIMATION ON HOVER ------------*/
/*------------ FEATURE ARTWORKS ALTERNATIVE WITH TEXT DESCRIPTION BOX ANIMATION ON HOVER ------------*/
.feature-wrapper-with-text {
    max-width: 85%;
    padding: 10px;
    border: 10px solid black;
    margin: 20px auto 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply;
}


.feature-wrapper-with-text .card{
    height: auto;
    object-fit: cover;
    border-radius: 0px;
    width:300px;
    display: flex;
    margin: 10px;
    transition: transform 0.3s;
    position: relative;
    margin-bottom: px; /* this creates space in the insivible frames, from the sides not the top*/
    align-items: flex-end; /* This brings title to ground level*/
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .2);  
}

.feature-wrapper-with-text .card:hover{
    transform: scale(1.1);
}



.feature-wrapper-with-text .card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
         
}


.feature-wrapper-with-text .card .info {
    position: absolute;
    z-index: 3;
    opacity: 0;
    transform: translateY(20px);
    transition: 0.5s all; 
}

.feature-wrapper-with-text .card:hover .info{
    opacity: 1;
    transform: translateY(20px);
}

.feature-wrapper-with-text .card .info h1{
    color: white;
    font-size: .8rem;
    width: auto;
    height: auto;
    margin: 10px;
    display: inline-block; /*   brings them blocks to life  */
    line-height: 5px; /* this brings the socials centeer*/
    text-align: center;/*  this brings the socials finally center of box   */
    border-radius: 50%;
}

.feature-wrapper-with-text .card .info p{
    color: red;
    font-size: .8rem;
    margin-bottom: 30px;
    margin-left: 10px;
    text-align: left;/*  this brings the socials finally center of box   */
    transform: translateY(-10px);
}

.feature-wrapper-with-text .card .info i{
    color: white;
    line-height: 27px;
    border: 1px solid white;
    border-radius: 500px;
    width: 30px;
    height: 30px;
}



.feature-wrapper-with-text .card:hover:before{
    opacity: 1;
}


.feature-wrapper-with-text .card.hide{
    display: none;
    transition: 5s;
    transform: translateY(5px);
}

.feature-wrapper-with-text .card:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background:linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,.9));
    z-index: 2;
    transition: 0.5s all;
    opacity: 0;
}
.feature-wrapper-with-text .card:hover:before{
    opacity: 1;
}
/*------------ FEATURE ARTWORKS ALTERNATIVE WITH TEXT DESCRIPTION BOX ANIMATION ON HOVER ------------*/
/*------------ FEATURE ARTWORKS ALTERNATIVE WITH TEXT DESCRIPTION BOX ANIMATION ON HOVER ------------*/
/*------------ FEATURE ARTWORKS ALTERNATIVE WITH TEXT DESCRIPTION BOX ANIMATION ON HOVER ------------*/















/*------------------------ JERSEY LINE-UP WITH HOVER IMAGE CHANGE ANIMATION PICTURE ------------------------*/
/*------------------------ JERSEY LINE-UP WITH HOVER IMAGE CHANGE ANIMATION PICTURE ------------------------*/
/*------------------------ JERSEY LINE-UP WITH HOVER IMAGE CHANGE ANIMATION PICTURE ------------------------*/
.jersey-line-up-feature-wrapper-with-hover-change {
    max-width: 100%;
    padding: 10px;
    margin: 20px auto 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-repeat: repeat-x;
    background-size: contain; 
    box-shadow: 0 0 3px 0px rgba(0, 0, 0, .3);
}


main-support-figure{

    float: center;
    margin: 10px;
    transition: .3s;
    
}


main-support-figure:hover{
    transform: scale(1.09) rotate(-2deg);
    z-index: 1;
}

.hover-card-support{
    position: relative;
    height: 389px;
    width: 300px;
}


.hover-card-support img{
    position: absolute;
    height: auto;
    width: 300px;
    transition: opacity 0.3s ease-in-out;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .2); 
    
}

.hover-card-support img.img-front:hover{
    opacity: 0;
    cursor: pointer;   }
/*------------------------ JERSEY LINE-UP WITH HOVER IMAGE CHANGE ANIMATION PICTURE ------------------------*/
/*------------------------ JERSEY LINE-UP WITH HOVER IMAGE CHANGE ANIMATION PICTURE ------------------------*/
/*------------------------ JERSEY LINE-UP WITH HOVER IMAGE CHANGE ANIMATION PICTURE ------------------------*/






















/*------------ ALL NHL TEAM ICONS TO FIND MASCOT EASILY ------------*/
/*------------ ALL NHL TEAM ICONS TO FIND MASCOT EASILY ------------*/
/*------------ ALL NHL TEAM ICONS TO FIND MASCOT EASILY ------------*/
.all-nhl-icons-wrapper{
    max-width: 75%;
    padding: 10px;
    margin: 20px auto 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.all-nhl-icons-wrapper img{
    width: 100px;
    height: auto;
    object-fit: cover;
    border-radius: 100%;
    padding: 0px;
    margin: 20px;
    transition: transform 0.3s;
    cursor: pointer;
}


.all-nhl-icons-wrapper img:hover{
    transform: scale(1.2);
}
/*------------ ALL NHL TEAM ICONS TO FIND MASCOT EASILY ------------*/
/*------------ ALL NHL TEAM ICONS TO FIND MASCOT EASILY ------------*/
/*------------ ALL NHL TEAM ICONS TO FIND MASCOT EASILY ------------*/








/*------------ DIVISION QUEENS AND WHO THEY ASSOCIATE WITH ------------*/
/*------------ DIVISION QUEENS AND WHO THEY ASSOCIATE WITH ------------*/
/*------------ DIVISION QUEENS AND WHO THEY ASSOCIATE WITH ------------*/
.division-icons-wrapper {
    max-width: 75%;
    padding: 10px;
    margin: 20px auto 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.division-icons-wrapper img{
    width: 160px;
    height: auto;
    padding: 0px;
    transition: transform 0.3s;
    cursor: pointer;
}

.division-icons-wrapper img:hover{
    transform: scale(1.2);
}
/*------------ DIVISION QUEENS AND WHO THEY ASSOCIATE WITH ------------*/
/*------------ DIVISION QUEENS AND WHO THEY ASSOCIATE WITH ------------*/
/*------------ DIVISION QUEENS AND WHO THEY ASSOCIATE WITH ------------*/











/*------------------------ MAJOR ART GALLERY NO EFFECTS ------------------------*/
/*------------------------ MAJOR ART GALLERY NO EFFECTS ------------------------*/
/*------------------------ MAJOR ART GALLERY NO EFFECTS ------------------------*/

.gallery-container-no-text{
    max-width: 75%;
    margin: 20px auto;
}


.gallery-container-no-text .gallery-image-container {
    position: relative;
    columns: 5 210px;
    grid-gap:15px;
    margin-top: 40px;
    background-color: white;
}

.gallery-container-no-text .gallery-image-container img{
    margin-bottom: 10px;
    border-radius: 0px;
    width:100%;
    transition: transform 0.3s;
}


.gallery-container-no-text .gallery-image-container img:hover{
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .2);
    transform: scale(1.05);
}
/*------------------------ MAJOR ART GALLERY NO EFFECTS ------------------------*/
/*------------------------ MAJOR ART GALLERY NO EFFECTS ------------------------*/
/*------------------------ MAJOR ART GALLERY NO EFFECTS ------------------------*/















/*------------ MAJOR ART GALLERY W/ ONE TITLE ANIMATION ------------*/
/*------------ MAJOR ART GALLERY W/ ONE TITLE ANIMATION ------------*/
/*------------ MAJOR ART GALLERY W/ ONE TITLE ANIMATION ------------*/
.gallery-container-one-text {
    max-width: 75%;
    margin: 20px auto 100px;
}


.gallery-container-one-text .gallery-image-container {
    position: relative;
    columns: 5 210px;
    grid-gap: 15px;
    margin-top: 40px;
    background-color: white;
}


.gallery-container-one-text .gallery-image-container .card{
    margin-bottom: 10px;
    border-radius: 0px;
    width: 100%;
    display: none;
    transition: transform 0.3s;
    position: relative;
    margin: px; /* this creates space in the insivible frames, from the sides not the top*/
    align-items: flex-end; /* This brings title to ground level*/
}



.gallery-container-one-text .gallery-image-container .card:nth-child(1),
.gallery-container-one-text .gallery-image-container .card:nth-child(2),
.gallery-container-one-text .gallery-image-container .card:nth-child(3),
.gallery-container-one-text .gallery-image-container .card:nth-child(4),
.gallery-container-one-text .gallery-image-container .card:nth-child(5){
   display: flex;
}

.gallery-container-one-text .gallery-image-container .card:hover{
    transform: scale(1.05);/*1.05*/
    z-index: 10;
}

.gallery-container-one-text .gallery-image-container .card img{
    width: 100%;
}


.gallery-container-one-text .gallery-image-container .card .info {
    position: absolute;
    z-index: 3;
    opacity: 0;
    transform: translateY(20px);
    transition: 0.5s all; 
}


.gallery-container-one-text .gallery-image-container i{
    color: white;
    line-height: 27px;
    border: 1px solid white;
    border-radius: 500px;
    width: 30px;
    height: 30px;
}

.gallery-container-one-text .gallery-image-container .card:hover .info{
    opacity: 1;
    transform: translateY(20px);
}

.gallery-container-one-text .gallery-image-container .card .info h1{
    color: white;
    font-size: .8rem;
    width: auto;
    height: auto;
    margin: 10px;
    transform: translateY(-20px);
    display: inline-block; /*   brings them blocks to life  */
    line-height: 20px; /* this brings the socials centeer*/
    text-align: center;/*  this brings the socials finally center of box   */
}

.gallery-container-one-text .gallery-image-container .card .info h3{
    display: none;
}


.gallery-container-one-text .gallery-image-container .card:hover:before{
    opacity: 1;
}


.gallery-container-one-text .gallery-image-container .card.hide{
    display: none;
    transition: 5s;
    transform: translateY(5px);
}

.gallery-container-one-text .gallery-image-container .card:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background:linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,.9));/*0,0,0,.9*/
    z-index: 2;
    transition: 0.5s all;
    opacity: 0;
}
.gallery-container-one-text .gallery-image-container .card:hover:before{
    opacity: 1;
}

/*------------ MAJOR ART GALLERY W/ ONE TITLE ANIMATION ------------*/
/*------------ MAJOR ART GALLERY W/ ONE TITLE ANIMATION ------------*/
/*------------ MAJOR ART GALLERY W/ ONE TITLE ANIMATION ------------*/

















/*------------ MAJOR ART GALLERY W/ TWO TITLES ANIMATION ------------*/
/*------------ MAJOR ART GALLERY W/ TWO TITLES ANIMATION ------------*/
/*------------ MAJOR ART GALLERY W/ TWO TITLES ANIMATION ------------*/
.gallery-container-two-text {
    max-width: 75%;
    margin: 20px auto;
}


.gallery-container-two-text .gallery-image-container {
    position: relative;
    columns: 5 210px;
    grid-gap:15px;
    margin-top: 40px;
    background-color: white;
}


.gallery-container-two-text .gallery-image-container .card{
    margin-bottom: 10px;
    border-radius: 0px;
    width:100%;
    display: flex;
    transition: transform 0.3s;
    position: relative;
    margin: px; /* this creates space in the insivible frames, from the sides not the top*/
    align-items: flex-end; /* This brings title to ground level*/
}

.gallery-container-two-text .gallery-image-container .card:hover{
    transform: scale(1.05);
}

.gallery-container-two-text .gallery-image-container .card img{
    width: 100%;
}


.gallery-container-two-text .gallery-image-container .card .info {
    position: absolute;
    z-index: 3;
    opacity: 0;
    transform: translateY(20px);
    transition: 0.5s all; 
}

.gallery-container-two-text .gallery-image-container .card:hover .info{
    opacity: 1;
    transform: translateY(20px);
}

.gallery-container-two-text .gallery-image-container .card .info h1{
    color: white;
    font-size: .8rem;
    width: auto;
    height: auto;
    margin: 10px;
    display: inline-block; /*   brings them blocks to life  */
    line-height: 5px; /* this brings the socials centeer*/
    text-align: center;/*  this brings the socials finally center of box   */
    border-radius: 50%;
}

.gallery-container-two-text .gallery-image-container .card .info p{
    color: ghostwhite;
    font-size: .8rem;
    margin-bottom: 30px;
    margin-left: 10px;
    text-align: left;/*  this brings the socials finally center of box   */
}

.gallery-container-two-text .gallery-image-container .card .info h3{
    display: none;
}


.gallery-container-two-text .gallery-image-container .card:hover:before{
    opacity: 1;
}


.gallery-container-two-text .gallery-image-container .card.hide{
    display: none;
    transition: 5s;
    transform: translateY(5px);
}

.gallery-container-two-text .gallery-image-container .card:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background:linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,.9));
    z-index: 2;
    transition: 0.5s all;
    opacity: 0;
}
.gallery-container-two-text .gallery-image-container .card:hover:before{
    opacity: 1;
}
/*------------ MAJOR ART GALLERY W/ TWO TITLES ANIMATION ------------*/
/*------------ MAJOR ART GALLERY W/ TWO TITLES ANIMATION ------------*/
/*------------ MAJOR ART GALLERY W/ TWO TITLES ANIMATION ------------*/







/*------------ LOAD MORE BUTTON FOR GALLERIES ------------*/
/*------------ LOAD MORE BUTTON FOR GALLERIES ------------*/
/*------------ LOAD MORE BUTTON FOR GALLERIES ------------*/
#load-more{
    display: "block";
    border-radius: 25px;
    text-align: center;
    padding: 15px 32px;
    align-content: center;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: auto;
    margin: 60px auto 10px;
    cursor: pointer;
    transition: 0.3s; 
}


#load-more:hover{
    cursor: pointer;
}
/*------------ LOAD MORE BUTTON FOR GALLERIES ------------*/
/*------------ LOAD MORE BUTTON FOR GALLERIES ------------*/
/*------------ LOAD MORE BUTTON FOR GALLERIES ------------*/





/*------------ GO TO FULL GALLERIES BUTTON ------------*/
/*------------ GO TO FULL GALLERIES BUTTON ------------*/
/*------------ GO TO FULL GALLERIES BUTTON ------------*/
#go-to-full-gallery{
    display: "block";
    border-radius: 25px;
    text-align: center;
    padding: 15px 32px;
    align-content: center;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: auto;
    margin: 60px auto 10px;
    cursor: pointer;
    transition: 0.3s; 
}


#go-to-full-gallery:hover{
    cursor: pointer;
}
/*------------ GO TO FULL GALLERIES BUTTON ------------*/
/*------------ GO TO FULL GALLERIES BUTTON ------------*/
/*------------ GO TO FULL GALLERIES BUTTON ------------*/






/*------------ 32 ROSTER FACE-0FF QUEENS LINE-UP CONTAINER ------------*/
/*------------ 32 ROSTER FACE-0FF QUEENS LINE-UP CONTAINER ------------*/
/*------------ 32 ROSTER FACE-0FF QUEENS LINE-UP CONTAINER ------------*/
.main-32-roster-wrapper{
    position: relative;
    justify-content: center;
    width: 75%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    
    
}

.main-32-roster-wrapper main-roster-figure{
    float: center;
    margin: 10px;
    transition: .3s;
    
}


.main-32-roster-wrapper main-roster-figure:hover{
    transform: scale(1.09) rotate(-2deg);
    z-index: 1;
}

.main-32-roster-wrapper .hover-card{
    position: relative;
    height: 389px;
    width: 300px;
}


.main-32-roster-wrapper .hover-card img{
    position: absolute;
    height: auto;
    width: 300px;
    transition: opacity 0.3s ease-in-out;
    
}

.main-32-roster-wrapper .hover-card img.img-front:hover{
    opacity: 0;
    cursor: pointer;   
}
/*------------ 32 ROSTER FACE-0FF QUEENS LINE-UP CONTAINER ------------*/
/*------------ 32 ROSTER FACE-0FF QUEENS LINE-UP CONTAINER ------------*/
/*------------ 32 ROSTER FACE-0FF QUEENS LINE-UP CONTAINER ------------*/




/*=====================================================================ART GALLERIES====================================================================*/
/*=====================================================================ART GALLERIES====================================================================*/
/*=====================================================================ART GALLERIES====================================================================*/













/*=================================ACCORDIAN QUESTIONS FOR FACE-OFF QUEENS=================================*/
/*=================================ACCORDIAN QUESTIONS FOR FACE-OFF QUEENS=================================*/
/*=================================ACCORDIAN QUESTIONS FOR FACE-OFF QUEENS=================================*/
.queen-accordian-storage {
    max-width: 85%;
    margin: 20px auto 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.queen-accordian-photo {
    width: 500px;
    height: auto;
    margin: 10px 0;
    
}

.queen-accordian-photo img{
    width: 100%;
    height: auto;
}

.queen-wrapper {
    max-width: 500px;
    padding: 0px;
    margin: 10px 0;
}

.queen-wrapper .queen-parent-tab{
    margin-bottom: 8px;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.18);
}


.queen-wrapper .queen-parent-tab label{
    font-size: 1.1rem;
    background: "";
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    position: relative;
    z-index: 2;   }

.queen-wrapper label span{
    color: "";
    text-shadow: 0 -1px 1px #0056b3;
}

.queen-wrapper label .icon{
    position: relative;
    height: 30px;
    width: 30px;
    color: "";
    display: block;
    background: "";
    border-radius: 50%;
    text-shadow: 0 -1px 1px #0056b3;
}



.queen-wrapper .queen-parent-tab input:checked ~ label .icon i:before{
    content: '\f068';
}


.queen-wrapper label .icon i{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.queen-wrapper .queen-parent-tab .queen-answers-content{
    max-height: 0px;
    overflow: hidden;
    transition: all 0.4s ease;
    
}


.queen-parent-tab input:checked ~ .queen-answers-content{
    max-height: 100vh;
}


.queen-wrapper .queen-parent-tab .queen-answers-content p{
    padding: 15px 20px;
    font-size: .8rem; 
    text-align: center;
  
    background-color: "";
    height: 160px; /* this controlls the height of the answer content. */
    /* if you dont want it, then delee the height entirely. */
}


.queen-wrapper input{
    display: none;
}
/*=================================ACCORDIAN QUESTIONS FOR FACE-OFF QUEENS=================================*/
/*=================================ACCORDIAN QUESTIONS FOR FACE-OFF QUEENS=================================*/
/*=================================ACCORDIAN QUESTIONS FOR FACE-OFF QUEENS=================================*/












.search-box-filter {
    max-width: 85%;
    margin: 10px auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.search-box-filter i{
    margin-right: 10px;
    font-size: 1.3rem;
}
.search-box-filter h1{
    font-size: 1.2rem;
}
.search-box-filter input{
    width: 300px;
    height: 40px;
    padding: 5px 16px;
    background: transparent;
    border: 4px solid black;
    border-radius: 20px;
}



























/*------------ FOOTER CREATION ------------*/
/*------------ FOOTER CREATION ------------*/
/*------------ FOOTER CREATION ------------*/
#footer{
    text-align: center;
    background-color: white;
    padding: 20px;
    margin-top: 50px;
    box-shadow: 0 -5px 15px rgba(100,0,0,0.06);
    position: relative;
    width: 100%;

}
#footer .social{
    text-align: center;
    color: white;
}
#footer .social a{
    color: inherit;
    background-color: black;
    width: 40px;
    height: 40px;
    align-items: center;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    margin: 20px 8px;
    opacity: 0.50;
}

#footer .social a i{
    line-height: 40px;
}
#footer .social a:hover{
    opacity: 0.9;
}

#footer p{
    font-size: .8rem;
}
/*------------ FOOTER CREATION ------------*/
/*------------ FOOTER CREATION ------------*/
/*------------ FOOTER CREATION ------------*/


/*----=================================================================================----*//*----=================================================================================----*/
/*----=================================================================================----*//*----=================================================================================----*/
/*----=================================================================================----*//*----=================================================================================----*/













@media (max-width: 850px){
/*=====================NAVBAR RESPONSIVE=====================*/
    nav .logo {top: 8px;}
    #logo1 {width: 65px;}
    #logo2 {width: 170px;}
    
    nav ul li a{
        padding: 5px 2px; 
        font-size: .7rem;}
 /*=====================NAVBAR RESPONSIVE=====================*/   
    
    }





/*==========853px RESPONSIVE==========*/
/*=====================32 FACE-OFF ROSTER=====================*/
@media (max-width: 853px){
.main-32-roster-wrapper .hover-card{
        height: 466px;
        width: 360px;}


.main-32-roster-wrapper .hover-card img{
        width: 360px;  } 
}
/*=====================32 FACE-OFF ROSTER RESPONSIVE=====================*/





@media (max-width: 699px){
/*=====================NAVBAR RESPONSIVE=====================*/
    nav .logo {top: 10px;}
    #logo1 {width: 60px;}
    #logo2 {width: 150px;}
 /*=====================NAVBAR RESPONSIVE=====================*/ 
    
    
    .video-box img{
    width: 80%;
    }
    
    .background-clip {
        display: none;}
        
    .video-box {
        height: 350px;
        background: url(images/Background-White.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        height: calc(100vh-80px);}  
 }





@media (max-width: 600px){
/*=====================NAVBAR RESPONSIVE=====================*/    
    nav .logo{ left: 10%;}
     
    #logo2{
        display: none;}
    
    nav ul{
        position: fixed;
        width: 100%;
        height: 100vh;
        background: white;
        top: 80px;
        left: -100%;
        text-align: center;
        transition: all .5s;}
    
    nav ul li{
        display: block;
        margin: 50px 0; 
        line-height: 30px;}
    
    nav ul li a{
        font-size: 1rem;}
    
    #check:checked ~ ul{
        left: 0;}
    
     .checkbtn{
        display: block;}
/*=====================NAVBAR RESPONSIVE=====================*/
    
/*=====================QUEEN BIO RESPONSIVE=====================*/   
    .queen-bio-wrapper .thumbnail {
        width: 300px;
        height: 300px;}
    
    .queen-bio-wrapper .aside ul{
        text-align: center;
        list-style-type: none;}
  
    
    .queen-bio-wrapper {
        margin: 0px auto 50px;}
    

    .queen-bio-wrapper .aside li{
        margin: 10px;}
/*=====================QUEEN BIO RESPONSIVE=====================*/ 
}

    
    
    



@media (min-width: 600px){
/*=====================QUEEN BIO RESPONSIVE=====================*/ 
    .queen-bio-wrapper{
        flex-direction: row;
        padding: 0px 100px;
    }
/*=====================QUEEN BIO RESPONSIVE=====================*/ 
}
    
    

    

/*---------------MEDIA RESPONSIVE JERSEY LINE-UP-----------*/
/*------------------------ JERSEY LINE-UP WITH HOVER IMAGE CHANGE ANIMATION PICTURE ------------------------*/
@media (max-width: 659px){
.jersey-line-up-feature-wrapper-with-hover-change{
    background-size: cover; }
.jersey-line-up-feature-wrapper-with-hover-change .hover-card-support img{
    width: 350px;
    margin-left: -25px;}
    
main-support-figure{
    margin: 50px;}
 }
/*------------------------ JERSEY LINE-UP WITH HOVER IMAGE CHANGE ANIMATION PICTURE ------------------------*/