/* ==================================================================
PART 1-WHAT WE DO
------------------
1.1 SCROLL-FIRST PAGE
1.2 SCROLL-SECOND PAGE
1.3 SCROLL-THIRD PAGE


PART 2-HOW WE DO IT
-------------------
2.1 SCROLL-TOP SECTION
2.2 SCROLL-BOTTOM SECTION
================================================================== */


/* WHAT WE DO */
/* 1.1 SCROLL-FIRST PAGE */
.centre-circle-cls-1 {
    fill: #e3a38b;
}

.centre-circle-cls-2 {
    fill: #fef8f0;
}

.centre-circle-cls-3 {
    fill: none;
    stroke: #e3a38b;
    stroke-miterlimit: 10;
    stroke-width: 2px;
}

.custom-transition {
    transform-origin: center;
    -webkit-animation: rotation 3s;
    -moz-animation: rotation 3s;
    -ms-aniamation: rotation 3s;
    -o-animation: rotation 3s;
    animation: rotation 3s;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-o-keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-ms-keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 1.2 SCROLL-SECOND PAGE */

.centre-circle-2-cls-1 {
    fill: #fef8f0;
}

.centre-circle-2-cls-2 {
    fill: #e3a38b;
}

.centre-circle-2-cls-3 {
    fill: none;
    stroke: #e3a38b;
    stroke-miterlimit: 10;
    stroke-width: 2px;
}

.custom-transition2 {
    transform-origin: center;
    -webkit-animation: rotation 7s;
    -moz-animation: rotation 7s;
    -ms-aniamation: rotation 7s;
    -o-animation: rotation 7s;
    animation: rotation 7s;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-o-keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-ms-keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 1.3 SCROLL-THIRD PAGE */

.centre-circle-3-cls-1 {
    fill: #dda189;
}

.centre-circle-3-cls-2 {
    fill: #fcf7ef;
}

.custom-transition3 {
    transform-origin: center;
    -webkit-animation: rotation 9s;
    -moz-animation: rotation 9s;
    -ms-aniamation: rotation 9s;
    -o-animation: rotation 9s;
    animation: rotation 9s;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-o-keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-ms-keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* PART 2-HOW WE DO IT */
/* 2.1 SCROLL-TOP SECTION */

.centre-circle-4-cls-1 {
    fill: none;
}

.centre-circle-4-cls-2 {
    fill: #0d2440;
}

.centre-circle-4-cls-3 {
    fill: #dcd2c9;
}

.delay {
    display: inline-block;
    animation-duration: 3s;
}

.custom-transition4 {
    transform-origin: center;
    -webkit-animation: rotation 5s;
    -moz-animation: rotation 5s;
    -ms-aniamation: rotation 5s;
    -o-animation: rotation 5s;
    animation: rotation 5s;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-o-keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-ms-keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.repeat {
    animation-iteration-count: infinite;
    animation-duration: 3s;
}
.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
  }


@keyframes slideInLeft {
    from {
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
      visibility: visible;
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  
  @-webkit-keyframes slideInLeft {
    from {
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
      visibility: visible;
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }