/* intro */
div#welcomeDiv {
    z-index:99999;
    /* width:100%; */
    /* text-align: center; */
    /* margin-top:40vh;     */
}
div#welcomeDiv * {
    vertical-align: middle;
}
/* ul containing li with welcome messages */

ul#welcomeUL {
    list-style-type: none;
}

/* li containing welcome messages */
ul#welcomeUL li {
    font-size: 3em;
    position:fixed;
}
ul#welcomeUL li  {
    max-height: 100%;
    font-weight:600;
}
ul#welcomeUL li#li0 {
    top:45vh;
    left:40vw;
}

ul#welcomeUL li#li1 {
    top:30vh;
    left:15vw;
}

ul#welcomeUL li#li2 {
    top:60vh;
    left:60vw;
}

ul#welcomeUL li#li3 {
    top:65vh;
    left: 15vw;
}

ul#welcomeUL li#li4 {
    top:25vh;
    left:65vw;
}

ul#welcomeUL li[class*='hide'] {
    visibility: hidden;
}

ul#welcomeUL li[class*='active'] {
    animation : fadinout 5s forwards;
    /* animation : fadinout 5s forwards; */
    animation-duration: fadeinout 6s;
    -webkit-animation: fadeinout 5s forwards; 
}
@keyframes fadeinout {
    0% {opacity: 0;}
    20% {opacity: 0.7;}
    50%  {opacity: 1;}
    80%   {opacity: 0.7;}
    100% {opacity: 0;}
}
/* @media (min-width: 641px) { */
/* ******************************************************** */
/* ********************   FROM BOTTOM    ******************* */
/* ******************************************************** */
div.left,
#navHeader, 
#headerSkipIntro
 {
        animation-duration: 1s;
        animation-name: slideinFromBottom;
      }

@keyframes  slideinFromBottom{
from {
    margin-top: 100vh;
}
to {
    margin-top: 0;
    }
}

/* ******************************************************** */
/* ********************   FROM RIGHT    ******************* */
/* ******************************************************** */
div.top, #siteHeader {
    animation-duration: 1s;
    animation-name: slideinFromRight;
  }

@keyframes  slideinFromRight{
    from {
        margin-left: 100vw;
    }
    to {
        margin-left: 0;
    }
}

/* ******************************************************** */
/* ********************   FROM TOP    ********************* */
/* ******************************************************** */
div.right {
    animation-duration: 1s;
    animation-name: slideinFromTop;
  }

  #footerSocial svg#academiaLogo {
    animation-duration: 1s;
    animation-name: slideinFromTop;
  }

  @keyframes  slideinFromTop{
    from {
        margin-bottom: 100vh;
        margin-right:0;
        margin-left:0;
    }
    to {
        margin-bottom: 0;
        margin-right:0;
        margin-left:0;
    }
}

/* ******************************************************** */
/* ********************   FROM LEFT   ********************* */
/* ******************************************************** */
div.bottom,
svg#linkedinLogo  {
    animation-duration: 1s;
    animation-name: slideinFromLeft;
  }
  

  @keyframes  slideinFromLeft{
    from {
        margin-right: 100vw;
    }
    to {
        margin-right: 0%;
    }
}

/* ******************************************************** */
/* ******************  FROM BOTTOM-LEFT  ****************** */
/* ******************************************************** */
#optionsHeader {
    animation-duration: 1s;
    animation-name: slideinFromBottomLeft;
  }
  
  @keyframes  slideinFromBottomLeft{
    from {
        margin-right: 100vw;
        margin-top:100vh;
    }
    to {
        margin-right: 0%;
        margin-top:0%;
    }
}
/* } */

/* home page fades in */
 #mainContent {
    animation : fadein 2s forwards;
    animation-duration: fadein 2s;
    -webkit-animation: fadein 2s forwards;
}

@keyframes fadein {
    0%   {opacity: 0;}
    60% {opacity: 0;}
    90%  {opacity: 1;}
    100% {opacity: 1;}
}





@media (max-width: 750px) {
    /*************************************/
    /********** INTRO ANIMATIONS *********/
    /*************************************/
    ul#welcomeUL li {
        font-size: 1em;
    }
    div#mainDiv {
        animation : none;
    }
    #mainContent {
        animation : none;
    }
    h1#siteTitle {
        animation-duration:none;
      }
      div.bottom,
      svg#linkedinLogo, 
      svg#academiaLogo  {
          animation: none;
        }
}