/**********  Animation   *********/
.SceneBtnAni{
    animation: Left-in-Menu 0.5s ease-out;
    animation-fill-mode: forwards; 
}
.SceneBtnAni-Out{
    animation: Left-out-Menu 0.5s ease-out;
    animation-fill-mode: forwards;
}
.SceneBtnAni-Out-First{
    animation: Left-out-Menu-First 0.5s ease-out;
    animation-fill-mode: forwards;
}
.Rollout{
    animation: Right-out-Page 0.5s linear;
    animation-fill-mode: forwards;
}
.Rollin{
    animation: Right-in-Page 0.5s linear;
    animation-fill-mode: forwards;
}
.Rollout-first{
    animation: Right-out-Page-first 0.5s linear;
    animation-fill-mode: forwards;
}
.Rollin-left{
    animation: Left-in-Page 0.3s ease-in-out;
    animation-fill-mode: forwards;
}
.Rollout-left{
    animation: Left-out-Page 0.3s ease-in;
    animation-fill-mode: forwards;
}
.text-roll-left-in{
    animation: text-roll-in 0.3s ease-out;
    animation-fill-mode: forwards;
}
.text-roll-right-out{
    animation: text-roll-out 0.3s ease-out;
    animation-fill-mode: forwards;
}
.line-roll-right-in{
    animation: line-roll-in 0.3s ease-out;
    animation-fill-mode: forwards;
}
.line-roll-right-out{
    animation: line-roll-out 0.3s ease-out;
    animation-fill-mode: forwards;
}

.icon .menu::after {
    background: #9FB1BD;
    content: '';
    display: block;
    height: 2px;
    position: absolute;
    transition: background ease .3s, top ease .3s .3s, transform ease .3s;
    width: 20px;
}
.icon .menu::before {
    top: -6px;
}

.icon .menu::after {
    top: 6px;
}

#menu:checked + .icon .menu {
    background: transparent;
}

#menu:checked + .icon .menu::before {
    transform: rotate(45deg);
}

#menu:checked + .icon .menu::after {
    transform: rotate(-45deg);
}

#menu:checked + .icon .menu::before,
#menu:checked + .icon .menu::after {
    top: 0;
    transition: top ease .3s, transform ease .3s .3s;
}
.image_rotated{ 

    -webkit-animation:spin 0.3s linear ;
    -moz-animation:spin 0.3s linear ;
    animation:spin 0.3s linear ;
    }



.slide-in {
        animation: slide-in 0.5s forwards;
        -webkit-animation: slide-in 0.5s forwards;
    }

.slide-out {
        animation: slide-out 0.5s forwards;
        -webkit-animation: slide-out 0.5s forwards;
    }
    
@keyframes slide-in {
        100% { transform: translateX(0%); }
    }

@-webkit-keyframes slide-in {
        100% { -webkit-transform: translateX(0%); }
    }
    
@keyframes slide-out {
        0% { transform: translateX(0%); }
        100% { transform: translateX(-100%); }
    }

@-webkit-keyframes slide-out {
        0% { -webkit-transform: translateX(0%); }
        100% { -webkit-transform: translateX(-100%); }
    }





    
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

@keyframes Left-in-Page{
    0%{
        opacity: 0;
        width: 100%;
        height: 0%;
        transform: translateX(0) translateY(0);
    }
    100%{
        opacity: 1;
        width:100%;
        height: 100%;
        transform: translateX(0) translateY(0);
    }
    
}
@keyframes Left-out-Page{
    0%{
        opacity: 1;
        width:100%;
        height: 100%;
        transform: translateX(0) translateY(0);
    }
    100%{
        opacity: 0;
        width: 0%;
        height: 0%;
        transform: translateX(0) translateY(0);
    }
}

@keyframes Right-out-Page{
    0%{

        transform: translateX(0);
       /* -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(6px);*/
    }
    100%{
        transform: translateX(100%);
       /* -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);*/

    }
}

@keyframes Right-out-Page-first{
    0%{

        transform: translateX(100%);
       /* -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(6px);*/
    }
    100%{
        transform: translateX(100%);
       /* -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);*/

    }
}
@keyframes Right-in-Page{
    0%{

        transform: translateX(100%);
       /* -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(6px);*/
    }
    100%{
        transform: translateX(0);
       /* -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);*/

    }
}
@keyframes Left-in-Menu{
    0%{
        opacity: 0;
        transform: translateX(-100%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes Left-out-Menu{
    0%{
        opacity: 1;
        transform: translateX(0);
    }
    100%{
        opacity: 0;
        transform: translateX(-100%);
    }
}

@keyframes Left-out-Menu-First {
    0%{
        opacity: 0;
        transform: translateX(-100%);
    }
    100%{
        opacity: 0;
        transform: translateX(-100%);
    }
}
@keyframes text-roll-in{
    0%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(0%);
    }
}
@keyframes text-roll-out{
    0%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(0%);
    }
}
@keyframes line-roll-in{
    0%{
        opacity: 1;
        transform: translateX(0%);
    }
    100%{
        opacity: 1;
        transform: translateX(0%);
    }
}
@keyframes line-roll-out{
    0%{
        opacity: 1;
        transform: translateX(0%);
    }
    100%{
        transform: translateX(0%);
        opacity: 1;
    }
}
@keyframes Roll-down-Canvas{
    0%{
        transform: translateY(0);
        opacity: 1;
    }
    100%{
        transform: translateY(90vh);
        opacity: 0.4;
    }
}
@keyframes Fade-out-WelcomeAnim{
    0%{
        opacity: 1;
    }
    60%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@keyframes Fade-out-Canvas{
    0%{
        transform: translate(-50%, -50%) scale(0.4);
        opacity: 1;
    }
    50%{
        transform: translate(-50%, -50%) scale(0.4);
        opacity: 1;
    }
    100%{
        transform: translate(-50%, -50%) scale(0.1);
        opacity: 0.1;
    }
}
@keyframes Fade-out-Canvas-mobile{
    0%{
        transform: translate(-50%, -50%) scale(0.28);
        opacity: 1;
    }
    55%{
        transform: translate(-50%, -50%) scale(0.28);
        opacity: 1;
    }
    80%{
        transform: translate(-50%, -50%) scale(0.1);
        opacity: 0.7;
    }
    100%{
        transform: translate(-50%, -50%) scale(0.1);
        opacity: 0.1;
    }
}
@keyframes Roll-down-Swirl{
    0%{
        transform: rotate(0);
        opacity: 1;
    }
    90%{
        transform: rotate(-180deg);
        opacity: 0;
    }
    100%{
        transform: rotate(-180deg);
        opacity: 0;
    }
}
@keyframes Roll-up-Swirl{
    0%{
        transform: rotate(180deg);
        opacity: 1;
    }
    90%{
        transform: rotate(0deg);
        opacity: 0;
    }
    100%{
        transform: rotate(0deg);
        opacity: 0;
    }
}
@keyframes Roll-down-Swirl-mobile{
    0%{
        transform: rotate(0);
        opacity: 1;
    }
    90%{
        transform: translateX(-4rem) translateY(7rem) rotate(-75deg);
        opacity: 0;
    }
    100%{
        transform: translateX(-4rem) translateY(7rem) rotate(-75deg);
        opacity: 0;
    }
}
@keyframes Roll-up-Swirl-mobile{
    0%{
        transform: rotate(180deg);
        opacity: 1;
    }
    90%{
        transform: translateX(7rem) translateY(-7rem) rotate(85deg);
        opacity: 0;
    }
    100%{
        transform: translateX(7rem) translateY(-7rem) rotate(85deg);
        opacity: 0;
    }
}



@keyframes circle {
    0%{
      opacity: 0;
      transform: scale(0);
    }
    60%{
      opacity: 1;
      transform: scale(1.1);
    }
    70%{
      transform: scale(1);
    }
    
    100%{
      opacity: 1;
      transform: scale(1)
    }
  }
  
@keyframes scales {
    0%{
      transform: scale(0.3)
    }
    30%{
      transform: scale(1.2)
    }
    60%{
      transform: scale(0.9)
    }
    100%{
      transform: scale(1)
    }
  }