/*Start Updates and Additions to the Admissions Statistics Page*/
   
ul.cu-stat-table li {
    margin: 8px 0px;
    padding: 4px;
}
.cu-stat.sans-serif-stat{
font-family: 'trade-gothic-next-condensed',sans-serif,verdana !important;
font-style: italic;
font-weight: 900;
letter-spacing: -1px;
}
ul.cu-stat-table.geo-data li{
    color:#532D80;
    padding: 8px;
    vertical-align:middle ;
    margin: 8px 0;
    font-weight: 800;
    line-height: 2rem;
}
  ul.cu-stat-table.geo-data li:first-child{
    padding: 8px;
    background-color: #f56600;
}
ul.cu-stat-table.geo-data  li .cu-stat.sans-serif-stat{
   color:#f56600;
     
 }
   ul.cu-stat-table.geo-data  li:first-child .cu-stat.sans-serif-stat{
   color:#ffffff;
     
 }
 /* End Updates and Additions to the Admissions Statistics Page*/
 
  /* Start CSS for Experiential Learning */
    
.heading-icon {
 font-size: 64px;
 margin-right: 16px;
 margin-bottom: 16px;
}
.clipped {
 padding: 2rem 2rem 4rem 4rem;
 -webkit-clip-path: none;
 clip-path: none;
}
.story-slant-foreground {
 background-image: url(https://www.clemson.edu/_images/academics/experiential-learning/fire-fg.webp);
 background-repeat: no-repeat;
 background-size: cover;
 padding: 2rem;
 p {
     font-family: 'Tiempos Text Regular';
     max-width: 600px;
}
}
.story-slant-quote {
 padding: 2rem;
 p {
     font-family: 'trade-gothic-next-condensed';
     font-weight: 600;
     font-size: 25.8px;
     line-height: 1.75rem;
     text-align: right;
     &.name {
         font-family: 'trade-gothic-next-condensed';
         font-weight: 600;
         font-size: 0.975rem;
         line-height: 1rem;
    }
}
 blockquote {
     border-left-color: #fff;
     color: #fff;
}
}
.yt_shorts_area{
 .cell:first-of-type {
     .yt-short-thumbnail {
         background-image: url(https://www.clemson.edu/_images/academics/experiential-learning/rob-background.jpg);
         background-size: 100%;
    }
}
 .cell:nth-of-type(2) {
     .yt-short-thumbnail {
         background-image: url(https://www.clemson.edu/_images/academics/experiential-learning/katie.jpg);
         background-size: 100%;
    }
}
 .cell:nth-of-type(3) {
     .yt-short-thumbnail {
         background-image: url(https://www.clemson.edu/_images/academics/experiential-learning/grayce.jpg);
         background-size: 100%;
    }
}
}
.yt-short-thumbnail {
 position: relative;
 width: 100%;
 max-height: 100%;
 aspect-ratio: 9 / 16;
 .yt-short-graphic {
     position: relative;
     z-index: -1;
     max-width: 100%;
     aspect-ratio: 9 / 16;
     &.vid {
         z-index: 1;
    }
}
 h2 {
     position: absolute;
     left: 16px;
     bottom: 16px;
     font-family: 'trade-gothic-next-compressed';
     font-size: 8.5vw;
     line-height: 7vw;
     width: 85%;
     margin-bottom: 0;
}
 .play-button-container button {
     position: absolute;
     right: calc(50% - 32px);
     bottom: 45%;
     width: 64px;
     height: 64px;
     padding: 8px;
     border: none;
     border-radius: 64px;
     font: inherit;
     font-size: 2.75rem;
     text-align: center;
     color: inherit;
     opacity: 0.8;
     cursor: pointer;
     background: radial-gradient(50% 50% at 50% 50%, #F56600 0%, #C95400 100%);
     .la-play:before {
         padding-left: 4px;
    }
}
 &:hover .play-button-container button {
     right: calc(50% - 36px);
     bottom: 43%;
     width: 72px;
     height: 72px;
     box-shadow: 2px 2px 16px -2px #1b1818;
     opacity: 1;
     transition: all 0.4s ease-in-out;
     z-index:2;
}
}
.yt-short-iframe {
 position: relative;
 iframe {
     position: relative;
     width: 100%;
     height: 100%;
     aspect-ratio: 9 / 16;
}
 .close-button-container {
     position: absolute;
     bottom: 64px;
     left: calc(50% - 16px);
     button {
         width: 32px;
         height: 32px;
         padding: 2px;
         border: none;
         border-radius: 64px;
         font: inherit;
         color: #ffffff;
         -webkit-text-stroke: 1px white;
         -moz-text-stroke: 1px white;
         font-size: 1.25rem;
         text-align: center;
         opacity: 0;
         cursor: pointer;
         background: #ff6600;
         transition: opacity 0.25s ease-in-out;
    }
}
 &:hover {
     .close-button-container {
         button {
             opacity: 0.9;
        }
    }
}
 &:focus {
     .close-button-container {
         button {
             opacity: 0.9;
        }
    }
}
}
/* VIMEO */
.vimeo_shorts_area {

	.cell:first-of-type {
		.vimeo_placeholder {
			background-image: url(https://www.clemson.edu/_images/academics/experiential-learning/rob-background.jpg);
			background-size: 100%;
		}
	}
	.cell:nth-of-type(2) {
		.vimeo_placeholder {
			background-image: url(https://www.clemson.edu/_images/academics/experiential-learning/katie.jpg?asdf);
			background-size: 102%;
			background-position: center center;
		}
	}
	.cell:nth-of-type(3) {
		.vimeo_placeholder {
			background-image: url(https://www.clemson.edu/_images/academics/experiential-learning/grayce.jpg);
			background-size: 100%;
		}
	}

	h2 {
		position: absolute;
		left: 16px;
		bottom: 16px;
		font-family: 'trade-gothic-next-compressed';
		font-size: 8.5vw;
		line-height: 7vw;
		width: 85%;
		margin-bottom: 0;
	}

	.vimeo_placeholder {
		aspect-ratio: 9 /16;
		background-size: cover;
		position: relative;
		overflow: hidden;

		.video_container {
			opacity: 0;
			width: 101%;
			height: 101%;
			transition: opacity 0.25s ease-in-out;

			iframe {
				/* display:none; */
				position: relative;
				width: 100%;
				height: 100%;
				aspect-ratio: 9 / 16;
				transition: opacity 0.25s ease-in-out;
			}

			.vimeo-preview-video {
				position: relative;
				width: 100%;
				height: 100%;
				aspect-ratio: 9 / 16;
			}
		}
		.close-button-container {
			display: none;
		}
		.play-button-container button {
			position: absolute;
			right: calc(50% - 32px);
			bottom: 45%;
			width: 64px;
			height: 64px;
			padding: 8px;
			border: none;
			border-radius: 64px;
			font: inherit;
			font-size: 2.75rem;
			text-align: center;
			color: inherit;
			opacity: 0.8;
			cursor: pointer;
			background: radial-gradient(50% 50% at 50% 50%, #F56600 0%, #C95400 100%);
	
			.la-play:before {
				padding-left: 4px;
			}
		}
		@media (hover: hover) {
			&:hover {
				.play-button-container button {
					right: calc(50% - 36px);
					bottom: 43%;
					width: 72px;
					height: 72px;
					box-shadow: 2px 2px 16px -2px #1b1818;
					opacity: 1;
					transition: all 0.4s ease-in-out;
					z-index: 2;
				}
				h2 {
					display: none;
				}
			}
		}

		&.previewing {
			.video_container {
				opacity: 1;
				iframe {
					/* display:none; */
				}
				video {
					display: block;
				}
			}
			h2 {
				display: none;
			}
		}
		&.buffering {
			&::before {
				content: '';
				position: absolute;
				top: 20px;
				left: 20px;
				transform: translate(-50%, -50%);
				width: 40px;
				height: 40px;
				background-image: url('https://www.clemson.edu/_images/cu-loading.svg');
				background-size: cover;
				background-repeat: no-repeat;
				z-index: 3;
			}
		}

		&.playing {
			.video_container {
				opacity: 1;
				iframe {
					display:block;
				}
				video {
					display: none;
				}
			}
			.play-button-container {
				display: none;
			}
			.close-button-container {
				position: absolute;
				bottom: 64px;
				left: calc(50% - 16px);
				display:block;
		
				button {
					width: 32px;
					height: 32px;
					padding: 2px;
					border: none;
					border-radius: 64px;
					font: inherit;
					color: #ffffff;
					-webkit-text-stroke: 1px white;
					-moz-text-stroke: 1px white;
					font-size: 1.25rem;
					text-align: center;
					opacity: 0;
					cursor: pointer;
					background: #ff6600;
					transition: opacity 0.25s ease-in-out;
					&:focus {
						opacity: 0.9;
					}
				}
			}
			h2 {
				display: none;
			}
			@media (hover: hover) {
				&:hover {
					.close-button-container {
						button {
							opacity: .9;
						}
					}
				}
			}
			
		}
	}
}
/* VIMEO */

/* Static Content */
.static_shorts_area {
 h2 {
     position: absolute;
     left: 16px;
     bottom: 16px;
     font-family: 'trade-gothic-next-compressed';
     font-size: 8.5vw;
     line-height: 7vw;
     width: 85%;
     margin-bottom: 0;
}
 .static_placeholder {
     position: relative;
     .image_container {
         img {
             margin-bottom: 0;
        }
    }
     .play-button-container button {
         position: absolute;
         right: calc(50% - 32px);
         bottom: 45%;
         width: 64px;
         height: 64px;
         padding: 8px;
         border: none;
         border-radius: 64px;
         font: inherit;
         font-size: 2.75rem;
         text-align: center;
         color: inherit;
         opacity: 0.8;
         cursor: pointer;
         background: radial-gradient(50% 50% at 50% 50%, #F56600 0%, #C95400 100%);
         .la-play:before {
             padding-left: 4px;
        }
    }
     &:hover {
         .play-button-container button {
             right: calc(50% - 36px);
             bottom: 43%;
             width: 72px;
             height: 72px;
             box-shadow: 2px 2px 16px -2px #1b1818;
             opacity: 1;
             transition: all 0.4s ease-in-out;
             z-index: 2;
        }
         h2 {
             transition: all 0.4s ease-in-out;
             display: none;
        }
    }
}
}
/* Static Content */
@media print, screen and (min-width: 48em) {
 .yt-short-thumbnail h2, .vimeo_shorts_area h2, .sh_shorts_area h2, .static_shorts_area h2 {
     font-size: clamp(16px,3.25vw,56px);
     line-height: clamp(18px,3vw,54px);
}
}
@media print, screen and (min-width: 64em) {
 .clipped {
     padding: 4rem 7rem 4rem 6rem;
     -webkit-clip-path: polygon(0 0, 100% 0%, 80% 100%, 0% 100%);
     clip-path: polygon(0 0, 100% 0%, 80% 100%, 0% 100%);
}
 .story-slant-background {
     background-image: url(https://www.clemson.edu/_images/academics/experiential-learning/fire-bg.webp);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: right bottom;
}
 .story-slant-quote {
     padding-right: 6rem;
}
 .story-slant-quote p {
     font-family: 'trade-gothic-next-condensed';
     font-weight: 600;
     font-size: 31.2px;
     line-height: 2.25rem;
     text-align: right;
}
 .story-slant-quote p.name {
     font-family: 'trade-gothic-next-condensed';
     font-weight: 600;
     font-size: 1.125rem;
     line-height: 1.25rem;
}
}
@media print, screen and (min-width: 80em) {
 .clipped {
     padding: 5rem 16rem 5rem 6rem;
}
 .story-slant-background {
     background-size: contain;
}
}

  /* end CSS for  Experiential Learning */