#enrollment-deposit {
    overflow:hidden;
}
#enrollment-deposit .confetti-intro{
    margin-bottom: 1rem;
}
 #enrollment-deposit .intro-text h2{
     margin-top: 0em;
     font-size: 2.5rem;
    z-index: 10;
    position: relative;
 }

 #enrollment-deposit .intro-text::before {
	content: "";
    background-image: url(/college-admissions/apply/_assets-enrollment-deposit/images/confetti-mullti.png);
    background-size: 55% auto;
    background-position: left;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -2;
    left: 0rem;
    top: -33rem;
    background-repeat: repeat-x;
    opacity: .75;
}

 img.u-circleOutline {
	 max-width: min(350px, 100%);
	 margin: 2rem;
} 
@media (max-width:767.98px) {
    img.u-circleOutline {
        margin:0 auto;
        margin-bottom:1rem;
    }
}

#enrollment-deposit .red-accent {
    color:var(--gfColors-red);
}
#enrollment-deposit .hint {
    position:relative;
    margin-left: 1.25rem;
}
.hint::before {
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    left: -1.5rem;
    top: -.5rem;
    background-image: url(/__template/t1/images/gold-asterisk.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
}

@media(min-width:575px) {
    .intro-text {
    background-color: white;
    padding: .25rem 0;
}
}
 #enrollment-deposit .intro-text::before {
        background-size: 52rem auto;
        top: -48rem;
        left: -15px;
}
@media(min-width:992px) {
    #enrollment-deposit .intro-text::before {
     background-size: 57% auto;
    background-position: right;
    position: absolute;
    height: 42rem;
    width: 100%;
    z-index: -2;
    left: 0rem;
    top: -7rem;
    background-repeat: repeat;
    opacity: 0.55;
    }
    
     #enrollment-deposit .intro-text h3{
     font-size: 3.25rem;
 }
}


@media (max-width:767px) {
    #enrollment-deposit .intro-text h2 {
        padding-top: 1rem;
        margin-top: -1rem;
        padding-left:0rem;
        padding-right:0rem;
    }
    #enrollment-deposit .intro-text::before {
           top: -32%;
    }
}


@media(min-width:575.98px) and (max-width:767.98px) {
     #enrollment-deposit .intro-text::before {
        top: -39%;
     }
}

@media(max-width:575.98px) {
    #enrollment-deposit .intro-text::before {
        background-size: 45rem auto;
        opacity: .55;
        top: -75rem;
    }
}




.doodle-img {
    position:relative;
}
@media(min-width:767.87px) {
    .doodle-img::after {
        background-image: url(/__template/t1/images/doodle-illustrations/gold-doodle-ribbon.png);
        content: "";
        background-repeat: no-repeat;
        background-size: contain;
        height: 9rem;
        width: 7rem;
        position: absolute;
        bottom: -23rem;
        right: 16rem;
        transform: rotate(348deg);
    }
}

/*
@keyframes confetti-slow {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg);
  }
}
@keyframes confetti-medium {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg);
  }
}
@keyframes confetti-fast {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg);
  }
}
.confetti-container {
  perspective: 700px;
  position: absolute;
  height: 50vh;
  overflow: hidden;
  top: 200px;
  right: 0;
  bottom: 0;
  left: 0;
}
@media(min-width:992px) {
  .confetti-container {
      top:0;
      left:450px;
      height:90vh;
  }
}
@media(min-width:768px) and (max-width:991.98px) {
    .confetti-container {
      top:100px;
      left:200px;
  }
}
.confetti {
  position: absolute;
  z-index: 1;
  top: -10px;
  border-radius: 0;
}
.confetti--animation-slow {
  animation: confetti-slow 2.5s linear 1 forwards;
}
.confetti--animation-medium {
  animation: confetti-medium 1.75s linear 1 forwards;
}
.confetti--animation-fast {
  animation: confetti-fast 1.25s linear 1 forwards;
}
@media (max-width:575.98px) {
        .confetti--animation-slow {
        animation: confetti-slow 3.25s linear 1 forwards;
    }
        .confetti--animation-medium {
        animation: confetti-medium 2.5s linear 1 forwards;
    }
        .confetti--animation-fast {
        animation: confetti-fast 2s linear 1 forwards;
    }
}
*/