@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
            /* CSS styles for the sports carousel */
            .sportsmenudiv {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 20px;
            }
            /*
             * Menu items
             */
            .sportsmenu {
				flex-wrap:wrap;
                display: flex;
                justify-content: center;
                align-items: center;
                list-style-type: none;
                padding: 0;
                margin: 0;
                max-width: 100%;
            }

            .sportsmenuitem {
                padding: 3px 9px;
                font-size: 1.5rem;
                color: white;
                margin: 10px;
                transition: all 0.5s;
                cursor: pointer;
                -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
            }
            .sportsmenuitem:hover {
                background-color: #ffffff77;
                color: #222222;
                transform: translateY(-10%);
                box-shadow: 0 1px 20px rgba(255, 255, 255, 0.50);
            }

            

            .active-sportmenuitem {
                background-color: white;
                color: #222222;
                transform: translateY(-10%);
				box-shadow: 0 1px 20px rgba(255, 255, 255, 0.75);
            }
            .active-sportmenuitem:hover {
                background-color: white;
                color: #222222;
                transform: translateY(-10%);
				box-shadow: 0 1px 30px rgba(255, 255, 255, 0.75);
            }
            
            .sport-arrow {
                font-size: 2rem;
                color: #222222;
                cursor: pointer;
                margin: 0 20px;
                transition: all 0.2s;
				background-color: #ECFF5C;
				padding:0 5px;
            }
            .sport-arrow:hover {
                background-color: #F1F5F9;
				transform: scale(1.25);
            }
            /*
             * Excerpt
             */
            .sport-excerpt {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                max-width: 100vw;
                opacity: 0;
                font-size: 1.2rem;
                line-height: 1.5;
                color: #F1F5F9;
                margin-bottom: 20px;
                height:300px;
            }
            .active-sport-excerpt{
                z-index: 20;
            }
            .sport-excerpt.active-sport-excerpt {
                opacity: 0;
            }
            .sport-excerpt.active-sport-excerpt {
                animation: fadeInSlideVertical 0.5s ease forwards;
            }

            .sport-excerpt.inactive-sport-excerpt {
                animation: fadeOutSlideVertical 0.5s ease forwards;
            }

            @keyframes fadeInSlideVertical {
                from {
                    opacity: 0;
                    transform: translateY(0);
                }

                to {
                    opacity: 1;
                    transform: translateY(50%);
                }
            }

            @keyframes fadeOutSlideVertical {
                from {
                    opacity: 1;
                    transform: translateY(50%);
                }

                to {
                    opacity: 0;
                    transform: translateY(100%);
                }
            }
            /*
             * Carousel
             */
            .sports-mountain {
                position: relative;
                width: 600px;
                max-width: 100%;
                height: 600px;
                margin: auto;
            }

            #mountainpeak {
                position: absolute;
                top: 25%;
                left: 50%;
                transform: translateX(-50%);
                width: 512px;
                height: auto;
                max-width: 90vw;
            }
            /* Carousel image */
            .sports-carousel-image {
                position: absolute;
                top: 18%;
                left: 0;
                width: 100%;
                max-width: 512px;
                height: 420px;
                max-height: 42vh;
                object-fit: contain;
                object-position: center;
                opacity: 0;

            }

            .sports-carousel-image.active-sportimg {
                animation: fadeInSlide 0.5s ease forwards;
            }

            .sports-carousel-image.inactive-sportimg {
                animation: fadeOutSlide 0.5s ease forwards;
            }
            
            @keyframes fadeInSlide {
                from {
                    opacity: 0;
					transform: scale(0.5) translateX(-100%);
                }

                to {
                    opacity: 1;
					transform: scale(1) translateX(0);
                }
            }

            @keyframes fadeOutSlide {
                from {
                    opacity: 1;
                    transform: scale(1) translateX(0);
				}
                to {
                    opacity: 0;
					transform: scale(0.5) translateX(100%);
                }
			}
            .sport-link {
                background-color: #ECFF5C;
                color: #222222;
                padding: 10px 20px;
                transition: all 0.3s;
				display:block;
				width:fit-content;
            }
            .sport-link:hover {
                background-color: #F1F5F9;
                color: #222222;
            }
            @media screen and (max-width: 1200px) and (min-width: 562px) {
                .sports-carousel-image {
                    width: 100%;
                    max-width: 100%;
                    height: auto;
                    max-height: 50vh;
                }
                .sport-excerpt {
                    top: -10vh;
                }
                #mountainpeak {
                    width: 100%;
                    max-width: 100%;
                    height: auto;
                }
            
            }
            @media screen and (max-width: 562px) {
                .inactive-sportmenuitem {
                display: none;
                }
                .active-sportmenuitem {
                    display: block;
                }
				.sport-arrow {
                position:absolute;
					margin:0;
            	}
				#sportleftarrow {
					left:0;
				}
				#sportrightarrow {
					right:0;
				}
				.sport-excerpt{
					top:14em;
				}
				.sports-row {
                    height: 135vh;
                }
				.sports-mountain {
					height:auto;
				}
            }
            @media screen and (max-width: 400px) {
                .sports-row {
                    height: 160vh;
                }
            }