/* -------------------------------- 

File#: _1_stacking-cards
Title: Stacking Cards
Descr: Cards stack effect on vertical scrolling
Usage: codyhouse.co/license

-------------------------------- */

/* variables */
:root {
  /* colors */
  --sg0-color-primary-hsl: 250, 84%, 54%;
  --sg0-color-bg-hsl: 0, 0%, 100%;
  --sg0-color-contrast-high-hsl: 230, 7%, 23%;
  --sg0-color-contrast-higher-hsl: 230, 13%, 9%;
  --sg0-color-bg-light-hsl: 0, 0%, 100%;

  /* spacing */
  --sg0-space-sm: 0.75rem;
  --sg0-space-md: 120px;
}

@media(min-width: 64rem){
  :root {
    /* spacing */
    --sg0-space-sm: 1.125rem;
    --sg0-space-md: 120px;
  }
}

/* component */
.stack-cards {
  --stack-cards-gap: var(--sg0-space-sm);
  /*--stack-cards-item-ratio: 2/1;*/ /*needed more control over height for responsiveness
 /*CUSTOM*/
	position:relative;
	
}

.stack-cards__item {
  position: relative;
  position: -webkit-sticky;
  position: sticky;
  top: var(--sg0-space-md);
  height: 0;
  padding-bottom: calc(100%/(2.3/1)); /*was 2/1*/
  -webkit-transform-origin: center top;
          transform-origin: center top;
}

.stack-cards__item > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* utility classes */
.sg0-overflow-hidden {
  overflow: hidden;
}

.sg0-shadow-md {
  box-shadow:0 0.9px 1.5px rgba(0, 0, 0, 0.03),0 3.1px 5.5px rgba(0, 0, 0, 0.08),0 14px 25px rgba(0, 0, 0, 0.12);
}

.sg0-radius-lg {
  border-radius: 0.5em;
}

.sg0-bg {
  --sg0-bg-o: 1;
  background-color: hsla(var(--sg0-color-bg-hsl), var(--sg0-bg-o, 1));
}

.sg0-flex-center {
  justify-content: center;
  align-items: center;
}

.sg0-flex {
  display: flex;
	flex-direction: column;/*Added by kendra*/
	padding:15px;/*Added by kendra*/
}

:where(.sg0-inner-glow) {
  position: relative;
}

.sg0-inner-glow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075);
}

.sg0-bg-light {
  --sg0-bg-o: 1;
  background-color: hsla(var(--sg0-color-bg-light-hsl), var(--sg0-bg-o, 1));
}
	
	
/* -------------------------------- 

Custom styles – not part of the codyhouse code


-------------------------------- */
	
.spacer-40{
  clear: both;
  height: 40px;
}
	
.spacer-100{
  clear: both;
  height: 100px;
}
	
.salary-wrapper, .duration-wrapper{
	position: sticky;
	top: 20px;
	float:right;
	width:50%;
	text-align:right;
	font-size: 18px;
	opacity: 1;
	font-weight:bold;
	transition:opacity .5s ease-in-out;
}

.salary-wrapper .h3, .duration-wrapper .h3{
	font-size:1.1rem;
	margin-bottom:0px;
}
#salary-counter{
	color:#63AF41;	
	font-size:1.5rem;
	z-index:19;
	position:relative;
}

@keyframes pulse {
  0% {
   
	  opacity: 1;
	  margin-top:0px;
  }
	40%{
		opacity: 0;
	  margin-top:-40px;
	}
  45%{
		opacity: 0;
	  margin-top:40px;
	}
  50% {
    
	  opacity: 0;
	  margin-top:40px;
	  
  }
  100% {
    
	  opacity: 1;
	  margin-top:0px;
  }
}

.fade-pulse {
  animation: pulse 0.5s;
}
@media (prefers-reduced-motion) {
	.fade-pulse {
		animation: fadeinout 0.8s;
	}
}
	
@keyframes fadeinout {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fade-inout {
  animation: fadeinout 0.5s;
}
		
	
	
.duration-wrapper{
	float:left;
	text-align:left;
}
#duration-counter{
	margin-left:22px; /*Tooltip aligment*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 3px solid #860037;
    position: relative;
	max-width:280px;
}
	
.progress-circle{
	  display: flex;
  justify-content: center;
  align-items: center;
    width: 20px;
    height: 20px;
    border: 3px solid #860037;
    margin-top: -12px;
    border-radius: 50%;
    background-color: #fff;
}
	
.progress-circle.filled{
		background-color:#860037;
		
	}
	
	#duration-text{

    margin-bottom: 45px;
	}
	.d-info-wrap{
		float:left;
		width:calc(100% - 62px);
	}
	
	.stack-hat{
		width:47px;
		height:75px;
		position:relative;
		float:left;
		margin-right:15px;
	}

	.stack-hat .hat-top{
        width: 47px;
        height: 36px;
        background-image: url(https://www.coloradomesa.edu/images/svg/stacking-credentials/hat-top.svg);
        background-size: 100%;
        background-position: center;
        margin-bottom: -16px;
        position: absolute;
        bottom: 0;
		transition:bottom .3s ease-in-out;
	}
	.stack-hat .hat-lvl{
		width: 47px;
		height: 8px;
		background-image: url(https://www.coloradomesa.edu/images/svg/stacking-credentials/hat-stack.svg);
		background-size: 31px 8px;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		bottom: 0;
		transition:opacity .3s ease-in-out;
	}
	
	
	.custom-tooltip{
		opacity:0; 
		transition:opacity .3s ease-in-out;
		position: absolute;
	  top:-45px;
      padding: 5px;
      background: rgba(0, 0, 0, 0.75);
      color: #fff;
      border-radius: 3px;
      font-size: 12px;
		white-space:nowrap;
	}
	.custom-tooltip.active {
	  opacity:1;

    }
	.ribbon{
		position:absolute;
		width:70px;
		
		top:-5px;
		right:30px;
		background-color:#860037;
		padding-top:35px;
		padding-bottom:20px;
		z-index:1;
	}
	.ribbon:after{
		content:'';
		 width: 0; 
		 height: 0; 
		 border-left: 35px solid transparent;
		 border-right: 35px solid transparent;
		 border-bottom: 10px solid #fff;
		position:absolute;
		bottom:0;
		left:0;
		right:0;
		
	}
	.seal{

		z-index:1;
		opacity:.6;
		width:70px;
		height:70px;
		margin:0 auto;
		background-image:url('https://www.coloradomesa.edu/images/png/university-seal-onecolor-white1.png');
		background-size:cover;
		background-repeat:no-repeat;
	}
	
	/*Card content styles*/
	.table-content{
		max-width: 400px;
		width: 100%;
		margin-top: 20px;
	}
	.table-content ul li{
		border-bottom: 1px dotted #ddd;
		margin-bottom: 10px;
		font-weight:900;
	}
	.table-content ul li span.right-align{
		float:right;
		
		
	}
	.credentials.alert-info{
		max-width: 500px;
		width: 100%;
		padding: 10px;
	}
	.credentials ul{margin-top:10px; margin-bottom:0;}
	.credentials ul li{
		display: inline-block;
	}
	.credentials ul li:last-child{
		border-right:none;
	}
	.credentials ul.smaller{line-height:1.1rem;}
	.credentials ul.smaller li{font-size:.8rem;}
	.credentials ul.smaller li:after{content:',';}
	.credentials ul.smaller li:last-child:after{content:'';}
	
	.iris-callout .ic-icon{
	    background-size:cover;
	    width:120px;
	    height:120px;
	    background-image:url('https://www.coloradomesa.edu/admissions/images/counselors/2021-headshots/adam_2023.jpg');
	    top:-48px;
	    
	}
	.iris-callout .ic-icon:after{width:154px; height:154px;}
	.iris-callout h2{margin-top:50px;}
	@media screen and (max-width: 991px) {
	.stack-cards__item{
		padding-bottom: calc(100%/(1.3/1));
	}
}
@media screen and (max-width: 767px) {
	.stack-cards__item{
		padding-bottom: calc(100%/(1.1/1));
	}
	.ribbon{display:none;}
}
	@media screen and (max-width: 575px) {
		.stack-hat{display:none;}
		.stack-cards__item{
			padding-bottom: 0;
			height:450px;
			font-size:.9rem;
		}
		.salary-wrapper, .duration-wrapper{
			float:none;
			text-align: center;
    		width: 100%;
			top:55px;
		}
		.salary-wrapper{top:75px;}
		#salary-counter{font-size:1.3rem; margin-top:5px;}
		.salary-wrapper .h3, .duration-wrapper .h3{display:none;}
		.d-info-wrap{float:none; width:100%;}
		.stack-cards .spacer-40{height:20px;}
		#duration-counter{max-width:unset;}
		.stack-cards__item .h4, .stack-cards__item p{text-align:center;}
		.stack-cards__item .h4{font-size:1.1rem;}
		.stack-cards__item p{font-size:.8rem;}
	}