@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInDisabled {
    from {
        opacity: 0;
        visibility: hidden;
    }

    to {
        opacity: 0.4;
        visibility: visible;
    }
}


@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes scale {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
@keyframes scaleUpAndDown {
    0% {
        transform: scale(1);
    } 
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes shake {
  0%   { transform: translateX(0); }
  10%  { transform: translateX(-5px); }
  20%  { transform: translateX(5px); }
  30%  { transform: translateX(-5px); }
  40%  { transform: translateX(5px); }
  50%  { transform: translateX(-5px); }
  60%  { transform: translateX(5px); }
  70%  { transform: translateX(-5px); }
  80%  { transform: translateX(5px); }
  90%  { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}
@keyframes scrollVertical {
    to {
        background-position-y: 100%;
    }
}

.start-template-content {

    .st-icon-1,
    .st-icon-2,
    .st-icon-3,
    .st-icon-4, h1, h2, .btn, .st-footnote {
        opacity: 0;
    }
 
    [data-st-icon-animate="true"] .st-icon-1 {
        animation: fadeIn 0.4s linear 0.1s forwards, fadeOut 0.4s linear 1.7s forwards;
    }

    [data-st-icon-animate="true"] .st-icon-2 {
        animation: fadeIn 0.4s linear 0.5s forwards, fadeOut 0.4s linear 2.1s forwards;
    }

    [data-st-icon-animate="true"] .st-icon-3 {
        animation: fadeIn 0.4s linear 0.9s forwards, fadeOut 0.4s linear 2.5s forwards;
    }

    [data-st-icon-animate="true"] .st-icon-4 {
        animation: fadeIn 0.4s linear 1.3s forwards, fadeOut 0.4s linear 2.9s forwards;
    }

    h1 {
        animation: fadeIn 0.2s linear 0.1s forwards;
    }

    h2 {
        animation: fadeIn 0.2s linear 0.3s forwards;
    }

    .btn {
        animation: fadeIn 0.2s linear 0.5s forwards;
    }

    .st-footnote {
        animation: fadeIn 0.2s linear 0.7s forwards;
    }

}

.challenge-template-content  {
    h2, p, li, .btn {
        opacity: 0;
    }

    h2 {
        animation: fadeIn 0.2s linear 0.1s forwards;
    }

    p {
        animation: fadeIn 0.2s linear 0.3s forwards;
    }

    ul li:first-child {
        animation: fadeIn 0.1s linear 0.5s forwards;
    } 
    
    ul li:nth-child(2) {
        animation: fadeIn 0.1s linear 0.6s forwards;
    }
    
    ul li:nth-child(3) {
        animation: fadeIn 0.1s linear 0.7s forwards;
    }
    
    ul li:nth-child(4) {
        animation: fadeIn 0.1s linear 0.8s forwards;
    }
    
    ul li:nth-child(5) {
        animation: fadeIn 0.1s linear 0.9s forwards;
    }
    
    ul li:nth-child(6) {
        animation: fadeIn 0.1s linear 1s forwards;
    }
    
    ul li:last-child {
        animation: fadeIn 0.1s linear 1.1s forwards;
    }

    .btn {
        animation: fadeIn 0.2s linear 1.2s forwards;
    }
}

.gs-template-content {
    h2, p, .otr-symptoms li {
        opacity: 0;
    }
    .otr-primary-symptom {
        transform: scale(0);
    }

    h2 {
        animation: fadeIn 0.2s linear 0.1s forwards;
    }

    p {
        animation: fadeIn 0.2s linear 0.3s forwards;
    }

    .otr-disease li:first-child .otr-primary-symptom {
        animation: scale 0.3s ease-in-out 0.5s forwards;
    } 

    .otr-disease li:nth-child(2) .otr-primary-symptom {
        animation: scale 0.3s ease-in-out 0.9s forwards;
    } 

    .otr-disease li:last-child .otr-primary-symptom {
        animation: scale 0.3s ease-in-out 1.3s forwards;
    } 

    .otr-symptoms li:first-child {
        animation: fadeIn 0.1s linear 1.6s forwards;
    }

    .otr-symptoms li:nth-child(2) {
        animation: fadeIn 0.1s linear 1.7s forwards;
    }

    .otr-symptoms li:nth-child(3) {
        animation: fadeIn 0.1s linear 1.8s forwards;
    }

    .otr-symptoms li:nth-child(4) {
        animation: fadeIn 0.1s linear 1.9s forwards;
    }

    .otr-symptoms li:nth-child(5) {
        animation: fadeIn 0.1s linear 2s forwards;
    }

    .otr-symptoms li:nth-child(6) {
        animation: fadeIn 0.1s linear 2.1s forwards;
    }

    .otr-symptoms li:last-child {
        animation: fadeIn 0.1s linear 2.2s forwards;
    }
}

.gs-correct-content {
    animation: scrollVertical 5s linear infinite;

    h2, .gs-line, p, .gs-b-points, .btn {
        opacity: 0;
    }

    .otr-coins {
        animation: scaleUpAndDown 0.4s linear 0.1s forwards;
    }

    .gs-correct > div > h2:first-child {
        animation: fadeIn 0.2s linear 0.1s forwards;
    }
    .gs-correct > div > h2.light-heading {
        animation: fadeIn 0.2s linear 0.3s forwards;
    }
    .gs-correct > div > h2:nth-child(3) {
        animation: fadeIn 0.2s linear 0.6s forwards;
    }
    .gs-line {
        animation: fadeIn 0.2s linear 0.8s forwards;
    }
    p {
        animation: fadeIn 0.2s linear 1s forwards;
    }
    .gs-b-points {
        animation: fadeIn 0.2s linear 1.2s forwards, shake 0.6s ease-in-out 1.6s forwards;
    }
    .btn {
        animation: fadeIn 0.2s linear 1.4s forwards;
    }
}

.gs-wrong-content {
    
    .otr-coins {
        animation: scaleUpAndDown 0.4s linear 0.1s forwards;
    }

    .gs-wrong {
        transform: scale(0);
        animation: scale 0.2s linear 0.2s forwards;
    }

    .btn  {
        opacity: 0;
        animation: fadeIn 0.2s linear 0.4s forwards;
    }
}

.ms-template-content {
    h2, p, .btn, .otr-symptoms [draggable="true"], [disabled]:not([data-draggable-layer]) {
        opacity: 0;
    }

    .otr-disease > li {
        transform: scale(0);
    }

    h2 {
        animation: fadeIn 0.2s linear 0.1s forwards;
    }

    p {
        animation: fadeIn 0.2s linear 0.3s forwards;
    }

    .otr-disease > li:first-child {
        animation: scale 0.2s linear 0.5s forwards;
    }

    .otr-disease > li:nth-child(2) {
        animation: scale 0.2s linear 0.7s forwards;
    }

    .otr-disease > li:last-child {
        animation: scale 0.2s linear 0.9s forwards;
    }

    [draggable="true"][data-drag-type="body-ache"] {
        animation: fadeIn 0.2s linear 1.1s forwards;
    }

    [draggable="true"][data-drag-type="fpp"] {
        animation: fadeIn 0.2s linear 1.2s forwards;
    }

    [draggable="true"][data-drag-type="rrn"] {
        animation: fadeIn 0.2s linear 1.3s forwards;
    }

    [draggable="true"][data-drag-type="sneezing"] {
        animation: fadeIn 0.2s linear 1.4s forwards;
    }

    [disabled]:not([data-draggable-layer]) {
        animation: fadeInDisabled 0.2s linear 1.5s forwards;
    }

    [draggable="true"][data-drag-type="rss"] {
        animation: fadeIn 0.2s linear 1.4s forwards;
    }

    [draggable="true"][data-drag-type="iwe"] {
        animation: fadeIn 0.2s linear 1.4s forwards;
    }

}

.ms-finish-content {
    animation: scrollVertical 5s linear infinite;

    h2, p, .btn {
        opacity: 0;
    }

    .otr-disease > li {
        transform: scale(0);
    }

    h2 {
        animation: fadeIn 0.2s linear 0.1s forwards;
    }

    p {
        animation: fadeIn 0.2s linear 0.3s forwards;
    }

    .otr-coins {
        animation: scaleUpAndDown 0.4s linear 0.1s forwards;
    }

    .otr-disease > li:first-child {
        animation: scale 0.3s ease-in-out 0.5s forwards;
    } 

    .otr-disease > li:nth-child(2) {
        animation: scale 0.3s ease-in-out 0.9s forwards;
    } 

    .otr-disease > li:last-child {
        animation: scale 0.3s ease-in-out 1.3s forwards;
    } 

    .btn {
        animation: fadeIn 0.2s linear 1.6s forwards;
    }

}

.ms-failure-content {
    h2, .btn {
        opacity: 0;
    }
    .otr-disease > li {
        transform: scale(0);
    }

    h2 {
        animation: fadeIn 0.2s linear 0.1s forwards;
    }

    .otr-disease > li:first-child {
        animation: scale 0.2s linear 0.3s forwards;
    }

    .otr-disease > li:nth-child(2) {
        animation: scale 0.2s linear 0.5s forwards;
    }

    .otr-disease > li:last-child {
        animation: scale 0.2s linear 0.7s forwards;
    }

    .otr-coins {
        animation: scaleUpAndDown 0.4s linear 0.1s forwards;
    }

    .btn {
        animation: fadeIn 0.2s linear 1.6s forwards;
    }

}

.identify-match-content,
.im-success-content,
.im-failure-content {
    h2, p, .btn, .im-list-box, .im-list-box > div {
        opacity: 0;
    }

    .otr-disease > li {
        transform: scale(0);
    }

    h2 {
        animation: fadeIn 0.2s linear 0.1s forwards;
    }

    p {
        animation: fadeIn 0.2s linear 0.3s forwards;
    }

    .otr-disease > li:first-child {
        animation: scale 0.2s linear 0.5s forwards;
    }

    .otr-disease > li:nth-child(2) {
        animation: scale 0.2s linear 0.7s forwards;
    }

    .otr-disease > li:last-child {
        animation: scale 0.2s linear 0.9s forwards;
    }

    .im-list-box {
        animation: fadeIn 0.2s linear 1.1s forwards;
    }

    .im-list-box > div:first-child {
        animation: fadeIn 0.2s linear 1.3s forwards;
    }

    .im-list-box > div:nth-child(2) {
        animation: fadeIn 0.2s linear 1.5s forwards;
    }

    .im-list-box > div:last-child {
        animation: fadeIn 0.2s linear 1.7s forwards;
    }
}

.im-success-content,
.im-failure-content {
    .otr-coins {
        animation: scaleUpAndDown 0.4s linear 0.1s forwards;
    }

    .btn {
        animation: fadeIn 0.2s linear 1.1s forwards;
    }
}

.im-success-content {
    animation: scrollVertical 5s linear infinite;
}

.cc-journey-content, .rh-journey-content, .ar-journey-content {
    h2, .btn, .otr-journey-img {
        opacity: 0;
    }

    .otr-journey-block {
        transform: scale(0);
    }

    h2 {
        animation: fadeIn 0.2s linear 0.1s forwards;
    }

    .otr-journey-img {
        animation: fadeIn 0.2s linear 0.3s forwards;
    }

    .otr-journey-block {
        animation: scale 0.2s linear 0.5s forwards;
    }

    .btn {
        animation: fadeIn 0.2s linear 0.7s forwards;
    }

}

.ortivin-carousel-content {
    h2, .carousel__img_footnote, .btn{
        opacity: 0;
    }
    .occ-block {
        transform: scale(0);
    }
    .carousel__slide.is-active h2 {
        animation: fadeIn 0.2s linear 0.1s forwards;
    }
    .carousel__slide.is-active .carousel__img_footnote {
        animation: fadeIn 0.2s linear 0.3s forwards;
    }
    .carousel__slide.is-active .occ-block {
        animation: scale 0.2s linear 0.5s forwards;
    }
    .btn {
        animation: fadeIn 0.2s linear 0.7s forwards;
    }
}

.did-you-know-content {
    h1, .btn {
        opacity: 0;
    }

    .did-you-know-block {
        transform: scale(0);
    }

    h1 {
        animation: fadeIn 0.2s linear 0.1s forwards;
    }

    .did-you-know-block {
        animation: scale 0.2s linear 0.3s forwards;
    }

    .btn {
        animation: fadeIn 0.2s linear 0.5s forwards;
    }
}

.score-content {
    .otr-top-layer h2, .score-block, .score-higlight, .score-block h2, .score-flex > div, .btn {
        opacity: 0;
    }
    .otr-top-layer h2 {
        animation: fadeIn 0.2s linear 0.1s forwards;
    }
    .score-block {
        animation: fadeIn 0.2s linear 0.3s forwards;
    }
    .score-higlight {
        animation: fadeIn 0.2s linear 0.5s forwards;
    } 
    .score-block h2 {
        animation: fadeIn 0.2s linear 0.7s forwards;
    } 
    .score-flex > div:first-child {
        animation: fadeIn 0.2s linear 0.9s forwards;
    }
    .score-flex > div:nth-child(2) {
        animation: fadeIn 0.2s linear 1.1s forwards;
    }
    .score-flex > div:last-child {
        animation: fadeIn 0.2s linear 1.3s forwards;
    }
    .btn {
        animation: fadeIn 0.2s linear 1.5s forwards;
    }
}

.thank-you-content {
    h1, h3, h2, .healthy-indoor-challenge-img, .btn {
        opacity: 0;
    }
    h1 {
        animation: fadeIn 0.2s linear 0.1s forwards;
    }
    h3 {
        animation: fadeIn 0.2s linear 0.3s forwards;
    }
    h2 {    
        animation: fadeIn 0.2s linear 0.5s forwards;
    }
    .healthy-indoor-challenge-img {
        animation: fadeIn 0.2s linear 0.7s forwards;
    }
    .btn {
        animation: fadeIn 0.2s linear 0.9s forwards;
    }
}

#references {
    opacity: 0;
    animation: fadeIn 0.1s linear 0.8s forwards;
}


/* #references {
    animation: fadeIn 0.2 linear 0.8s forwards;
}

/* [data-active-template="template-find-gs"] #reference-slot:not(hidden) #references {
    animation: fadeIn 0.2 linear 2.4s forwards;
}

[data-active-template="template-match-symptoms"] #references {
    animation: fadeIn 0.2 linear 1.7s forwards;
}

[data-active-template="template-ms-failure"] #references,
[data-active-template="template-ms-finish"] #references {
    animation: fadeIn 0.2 linear 1.9s forwards;
}

[data-active-template="template-identify-match"] #references,
[data-active-template="template-im-success"] #references,
[data-active-template="template-im-failure"] #references {
    animation: fadeIn 0.2 linear 2s forwards;
}

[data-active-template="template-cc-journey"] #references,
[data-active-template="template-rh-journey"] #references,
[data-active-template="template-ar-journey"] #references,
[data-active-template="template-otrivin-carousel"] #references {
    animation: fadeIn 0.2 linear 1s forwards;
}

[data-active-template="template-did-you-know"] #references  {
    animation: fadeIn 0.2 linear 0.8s forwards;
} */