/* Member Value Header Styles
*************************************************/
.membership-value-header {
    padding: 4rem 0rem 2rem 0rem;
    position: relative;
  }
  
.membership-value-header h1 {
    font-size: 7.5rem !important;
    font-family: "Open Sans";
    font-weight: 100 !important;
}
  
.bold {
    font-weight: bold !important;
    color: #003876;
    display: inline-block;
}
.member-value-cost {
      position: relative;
      top: -5rem;
      right: -12rem;
}
.member-value-container {
    height: 15rem;
}
/* SVG Styles */
#Layer_1 {
    position: absolute;
    top: -3.5rem;
    width: 25rem;
    right: -9rem;
}
.cls-1 {
    fill: #1f3d74;
}
.cls-2 {
    fill: #288ab0;
}
/* Animations for SVG */
@keyframes flash {
    from,
    50%,
    to {
      opacity: 1;
    }
  
    25%,
    75% {
      opacity: 0;
    }
}
  
.flash {
    animation-name: flash;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}
.animation-duration1s {
    animation-duration: 1s;
}
.animation-duration2s {
    animation-duration: 2s;
}
.animation-duration3s {
    animation-duration: 3s;
}
.animation-duration4s {
    animation-duration: 4s;
}
.animation-duration5s {
    animation-duration: 5s;
}

@media (max-width: 1288px) {
    .membership-value-header h1 {
        font-size: 9vw !important;
    }
    #Layer_1 {
        top: -1.6rem;
        width: 26vw;
        right: -6rem;
    }
}
@media (max-width: 1060px) {
    #Layer_1 {
        top: -0.6rem;
        right: -4rem;
    }
}
@media (max-width: 950px) {
    #Layer_1 {
        top: 0rem;
    }
}
@media (max-width: 500px) {
    #Layer_1 {
        top: 2rem;
        right: -2rem;
    }
}

/* Member Benefits & Value Section Styles
*************************************************/
/* .membership-value-additional {
    background: #fafafa;
} */
.member-benefits-item {
    margin-bottom: 1rem;
    color: #555;
}
.member-benefits-text {
    font-size: 1.4rem;
    color: #555;
}
  
.member-value {
    font-size: 10rem;
    font-weight: 600;
    line-height: 1;
}
.member-value-text {
    background-color: #008ab0;
    padding: 0.5rem;
    font-weight: bold;
    font-size: 1.8rem;
    text-transform: uppercase;
}
.member-value::before {
    content: "$";
}
.membership-value-additional h4 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.1rem !important;
}
.membership-value-additional p, 
.membership-value-additional h4 {
    color: #555;
}
.membership-value-additional .media-object {
    margin-bottom: 0.5rem !important;
}
@media (max-width: 1200px) {
    .member-value-cost {
        right: -9rem;
        top: -4rem;
    }
}
@media (max-width: 1023px) {
    .join-btn .column {
        padding-top: 5rem !important;
    }
}
@media (max-width: 500px) {
    .join-btn .column {
        padding-top: 5rem;
    }
    .member-value {
        font-size: 8rem;
    }
    .member-value-cost {
        right: -7rem;
        top: -4rem;
    }
}
/* Member Benefits & Value Section Animations
*************************************************/
@keyframes bounceIn {
    from,
    20%,
    40%,
    60%,
    80%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
  
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }
  
    20% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);
    }
  
    40% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);
    }
  
    60% {
      opacity: 1;
      -webkit-transform: scale3d(1.03, 1.03, 1.03);
      transform: scale3d(1.03, 1.03, 1.03);
    }
  
    80% {
      -webkit-transform: scale3d(0.97, 0.97, 0.97);
      transform: scale3d(0.97, 0.97, 0.97);
    }
  
    to {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
}
  
.animated {
    visibility: hidden;
}
.bounceIn {
    animation-duration: 1s;
    animation-name: bounceIn;
    animation-fill-mode: both;
}
.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}
.delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}
.delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}
.delay-5halfs {
    animation-delay: 5.385s;
}
.delay-6s {
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}
.delay-6halfs {
    animation-delay: 6.385s;
}
.delay-7s {
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
}
  
/* Animation Testing    */
.strikethrough {
	display: inline-block;
	position: relative;
	transition: all 0.5s cubic-bezier(.55, 0, .1, 1);
}

.strikethrough:after {
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 0.5rem;
	/* box-shadow: 0 1px rgba(255,255,255,0.6); */
	margin-top: -5rem;
	background: #c8362e;
	transform-origin: center left;
	/* animation: strikethrough 1s 2s cubic-bezier(.55, 0, .1, 1) 1;
    transition: transform 0.5s cubic-bezier(.55, 0, .1, 1); */
    animation-name: strikethrough;
    animation-timing-function: ease-in;
    animation-duration: 250ms;
    animation-fill-mode: both;
    animation-delay: 5s;
}
.student.strikethrough:after {
    animation-delay: 6s;
}

@keyframes strikethrough {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

@keyframes rubberBand {
    from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
      transform: scale3d(1.25, 0.75, 1);
    }
  
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
      transform: scale3d(0.75, 1.25, 1);
    }
  
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
      transform: scale3d(1.15, 0.85, 1);
    }
  
    65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
      transform: scale3d(0.95, 1.05, 1);
    }
  
    75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
      transform: scale3d(1.05, 0.95, 1);
    }
  
    to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
  
.rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-delay: 5s;
}
.student.rubberBand {
    animation-delay: 6s;
}
.bg_greyFAFAFA {
	background-color: #fafafa;
}