@charset "UTF-8";
:root {
	--carousel-width: 100vw;
	--carousel-height: calc(0.7 * var(--carousel-width));
	--carousel-padding: 5px;
	/***FOR SM CAROUSEL ONLY*/
	--sm-carousel-width: 100vw;
	--sm-carousel-height: calc(0.25 * var(--sm-carousel-width));
}

@media (max-width: 479px) {
	:root {
		--carousel-width: 100vw;
	}
}

.carousel-container {
	max-width: 100%;	
	background-color: transparent;
}

.viewport {
	width: 100vw;
	height: 25vw;
	margin: 0 auto 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: transparent;
}

/*.carousel-frame {
	background: #c9ff17;
	padding: 10px;
	border-radius: 3px;
	border: 1px solid #ddd;
	width: calc(var(--carousel-width) + (2 * var(--carousel-padding)));
	height: calc(var(--carousel-height) + (2 * var(--carousel-padding)));
} 
REMOVED FROM HTML SEEMS TO WORK BETTER WITHOUT*/

.carousel {
	width: var(--carousel-width);
	height: var(--carousel-height);
}

.scroll {
	display: flex;
	/*align-items: center;*/
	overflow-x: auto;
	overflow-y: hidden;
	width: 100%;
	height: 100%;
	webkit-overflow-scrolling: touch;
	background-color: transparent;
}

ul.scroll {
	width: 100%; /*ADDED*/
	margin: 0;
	padding: 0;
	list-style: none;
}

.scroll-item-outer {
	width: 25vw;
	height: 25vw;
	margin: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;

}

.scroll-item {
	width: var(--carousel-width);
	height: 100%;
	background-color: transparent;
}

.scroll-img {
	object-fit: contain;
	width: 25vw;
	height: 25vw;
}

@supports (scroll-snap-align: start) {
	/*MODERN SCROLL SNAP POINTS*/
	.scroll {
		scroll-snap-type: x mandatory;
	}
	.scroll-item-outer {
		scroll-snap-align: center;
	}
}

@supports not (scroll-snap-align: start) {
	/*OLD SCROLL SNAP POINTS SPEC*/
	.scroll {
		-webkit-scroll-snap-type: mandatory;
				scroll-snap-type: mandatory;
		-webkit-scroll-snap-destination: 0 50%;
				scroll-snap-destination: 0 50%;
		-webkit-scroll-snap-points-x: reapeat(100%);
				scroll-snap-points-y: reapeat(100%);
	}
	.scroll-item-outer {
		scroll-snap-coordinate: 0 0;
	}
}

.indicators {
  display: flex;
  width: 100%;
  justify-content: center;
}

ul.indicators {
  margin: 0;
  padding: 0;
  list-style: none;
}

.indicator {
  padding: 60px;
}

.indicator-button {
  cursor: pointer;
  background: none;
  border: none;
  color: #000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.indicator-button:after {
  content: '○';
  font-size: 1.4em;
  padding: 12px 15px 17px;
}

.indicator-button:hover {
  color: #666
}

.indicator-button:active {
  color: #fff;
  padding: 0;
}

.indicator-button[aria-pressed="true"]:after {
  content: '●';
}

/*REFERENCE: https://nolanlawson.com/2019/02/10/building-a-modern-carousel-with-css-scroll-snap-smooth-scrolling-and-pinch-zoom/*/

@media (max-width: 700px) {
	.carousel-container {
		width: 100%;
		height: 550px;
		background-color: transparent;
	}
	
	.viewport {
		width: 100%;
		height: 450px;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: transparent;
	}
	
	.scroll {
		display: flex;
		align-items: center;
		overflow-x: auto;
		overflow-y: hidden;
		width: 100%;
		height: 400px;
		webkit-overflow-scrolling: touch;
		background-color: transparent;
	}	
	
	ul.scroll {
		width: 100%; /*ADDED*/
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	.scroll-item-outer {
		width: 50vw;
		min-width: 300px;
		height: 300px;
		margin: 10px 10px 10px 0px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: transparent;
		border-radius: 10px;
		border: solid 3px #ffffff;
	}
	
	.scroll-item {
		width: 100%;
		min-width: 290px;
		height: 100%;
		background-color: transparent;
	}
	
	.scroll-img {
		object-fit: contain;
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 10px;
	}
	
}

/************SMALL CAROUSEL**************/

.sm-carousel-container {
	width: 100%;
	height: 640px;
	background-image: url("../images/logos/league_logos/pdxgt_bg.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.sm-viewport {
	width: 100%;
	height: 450px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: transparent;
}

.sm-carousel {
	width: var(--sm-carousel-width);
	height: var(--sm-carousel-height);
	background-color: transparent;
}

.sm-scroll {
	display: flex;
	/*align-items: center;*/
	overflow-x: auto;
	overflow-y: hidden;
	width: 100%;
	height: 400px;
	webkit-overflow-scrolling: touch;
	background-color: transparent;
}

ul.sm-scroll {
	width: 100%; /*ADDED*/
	margin: 0;
	padding: 0;
	list-style: none;
}

.sm-scroll-item-outer {
	width: 25vw;
	min-width: 210px;
	height: 400px;
	margin: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;

}

.sm-scroll-item {
	width: 210px;
	min-width: 210px;
	height: 350px;
	background: #2F2C2D;
	border-radius: 10px;
	border: solid 3px #ffffff;
}

.sm-scroll-item a {
	text-decoration: none;
}

.sm-scroll-item-img-container {
	width: 100%;
	height: 65%;
	background: #6D6767;
	border-radius: 10px 10px 0px 0px;
	overflow: hidden;
	background-image: url("../images/logos/league_logos/pdxgt_bg.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.sm-scroll-item-text-container {
	width: 100%;
	height: 35%;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: 500;
	background: #000000;
	border-radius: 0px 0px 10px 10px;
	padding: 5px 10px 2px;
}


.sm-scroll-item-text-container span {
	background-color: transparent;
	color: #FFFFFF;
}

.sm-scroll-img01 {
	object-fit: cover;
	transform: scale(1.75); /*Zoom amount*/
	transform-origin: center; /*Keep zoom centered*/
	width: 100%;
	min-width: 200px;
	display: block;
	background-color: transparent;
}

.sm-scroll-img02 {
	object-fit: cover;
	transform: scale(.70); /*Zoom amount*/
	transform-origin: top; /*Keep zoom centered*/
	width: 100%;
	min-width: 200px;
	display: block;
	background-color: transparent;
}

.sm-scroll-img03 {
	object-fit: cover;
	transform: scale(1); /*Zoom amount*/
	transform-origin: top; /*Keep zoom centered*/
	width: 100%;
	min-width: 200px;
	margin: -40px -0px 0px 0px;
	display: block;
	background-color: transparent;
}

.sm-scroll-imgstd {
	object-fit: cover;
	transform: scale(1); /*Zoom amount*/
	transform-origin: center; /*Keep zoom centered*/
	width: 100%;
	min-width: 200px;
	display: block;
	background-color: transparent;
}

@supports (scroll-snap-align: start) {
	/*MODERN SCROLL SNAP POINTS*/
	.sm-scroll {
		scroll-snap-type: x mandatory;
	}
	.sm-scroll-item-outer {
		scroll-snap-align: center;
	}
}

@supports not (scroll-snap-align: start) {
	/*OLD SCROLL SNAP POINTS SPEC*/
	.sm-scroll {
		-webkit-scroll-snap-type: mandatory;
				scroll-snap-type: mandatory;
		-webkit-scroll-snap-destination: 0 50%;
				scroll-snap-destination: 0 50%;
		-webkit-scroll-snap-points-x: reapeat(100%);
				scroll-snap-points-y: reapeat(100%);
	}
	.sm-scroll-item-outer {
		scroll-snap-coordinate: 0 0;
	}
}