.titleFade{
    animation-name: titleFadeAnime;
    animation-delay: 1s;
    animation-duration: 1s;
    animation-fill-mode: backwards;
}

.h1In{
     font-size: 2.5em;
     text-align: center;
     text-transform: uppercase;
     animation-name: mainTitleAnime;
     animation-duration: 1s;
     animation-delay: 2s;
     animation-fill-mode: backwards;
     animation-timing-function: ease-out;}
     

.headerIn{
    animation-name: titleFadeAnime;
    animation-duration: 2s;
    animation-fill-mode: backwards;
}


 .scriptBoxIn{
    animation-name: titleFadeAnime;
    animation-duration: 2s;
    animation-delay: 2s;
    animation-fill-mode: backwards;
 }
 .contBoxIn{
    animation-name: titleFadeAnime;
    animation-duration: 2s;
    animation-delay: 3s;
    animation-fill-mode: backwards;
 }
 .subCaption{
    animation-name: subCaptionAnime;
    animation-duration: 1.2s;
    animation-timing-function: ease-out;
    backface-visibility: hidden;
    animation-delay: 3s;
    animation-fill-mode: backwards;}

.copyright{font-size: 12px;
     text-align: center;
     letter-spacing: 6px;
     word-spacing: 5px;
     margin-top: -20px;
     animation-name: titleFadeAnime;
     animation-delay: 5s;
     animation-fill-mode: backwards;
     animation-duration: 2s;
     
}
@keyframes titleFadeAnime
{
0%{
   opacity:0;
}    
100%{
   opacity: 1;
}
}
@keyframes mainTitleAnime {
   0%{
       opacity: 0;
       transform: translateX(15px);
   }
    
   100%{
       opacity: 1;
               }
}

@keyframes subCaptionAnime{
   
   0%{
       opacity: 0;

       transform: translatex(-15px);
   }

   100%{
       opacity: 1;
        transform: translate(0);
   }
}

@keyframes buttonSwoopAnime{
    0%{
        opacity: 0;
        transform: translatey(70);
    }

    100%{
        opacity: 1;
        transform: translatex(0);
    }
}