/*Logo Animation*/
 .rotatingLogo {
     animation: rotate 10s infinite;

     &:hover {
         animation-play-state: paused;
     }
 }

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

     33% {
         transform: rotate(120deg);
     }

     66% {
         transform: rotate(240deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .logoConatinerHome {
     padding: 10%;
 }

 /*Landing Page backgrounds*/
 .defaultText {
     font-size: 1.8vw;
 }

 .defaultImg {}

 @media only screen and (max-width: 768px) {
     .logoConatinerHome {
         padding: 2%;
     }

     .defaultText {
         font-size: 5vw;
     }

     .defaultImg {
         max-width: 50vw;
     }
 }

 .homePageContent {
     background-color: var(--defaultBackgroundDark);
     color: var(--defaultBackground);
 }

 .homePageHighlighted {
     color: var(--green1);
 }

 .homePage {
     height: 100vh;
     padding: 100px;
     min-height: 100px;
     align-content: center;
     text-align: center;
 }

 .homePageWithImageBackground {
     background-image: url(https://static.igem.wiki/teams/5117/images-wiki/home/wave-long.webp);
     background-repeat: no-repeat;
     background-position: bottom left;
     background-size: 100% auto;
 }

 .homePageWithImageBackground_Truck {
     background-image: url(https://static.igem.wiki/teams/5117/images-wiki/home/clothespile.webp);
     background-repeat: no-repeat;
     background-size: 30% auto;
     background-position: bottom left;
 }

 .TruckAniamtionConatiner {
     position: relative;
 }

 .TruckAniamtionConatiner>div>img {
     position: absolute;
     bottom: 0;
 }

 @media only screen and (max-width: 768px) {
     .homePage {
         padding: 10px;
     }

     .homePageWithImageBackground {
         background-image: url(https://static.igem.wiki/teams/5117/images-wiki/home/wave-long.webp);
         background-repeat: no-repeat;
         background-size: 100% auto;
         background-position: bottom left;
     }

     .homePageWithImageBackground_Truck {
         padding-top: 30vh;
         background-image: url(https://static.igem.wiki/teams/5117/images-wiki/home/clothespile.webp);
         background-repeat: no-repeat;
         background-size: 40% auto;
         background-position: bottom left;
     }
 }

 .waveText {
     align-content: normal;
 }

 @media only screen and (max-width: 768px) {
     .waveText {
         align-content: center;
         padding-bottom: 85vw;
     }
 }

 .landingPage1 {
     height: 100vh;
     padding: 100px;
     min-height: 100px;
     background-color: var(--defaultBackgroundDark);
     color: var(--defaultBackground);

     align-content: center;
 }

 /*Video*/
 .landingPage2 {
     height: 100vh;
     padding: 5vh;
     min-height: 100px;
     text-align: center;
 }

 .videos {
     height: 100%;
     gap: 0.5rem;
     padding: 0.5rem;
     margin: 0;
 }

 .iframeSize {
     width: 55vw;
     height: calc(55vw * (9/16));
 }

 @media only screen and (max-width: 768px) {
     .landingPage2 {
         padding-left: 0vh;
         padding-right: 0vh;
         padding-top: 5vh;
     }

     .iframeSize {
         width: 85vw;
         height: calc(85vw * (9/16));
     }

     .videos {
         margin-top: 10%;
         padding: 0rem;
     }
 }


 /*Events*/
 .landingPage3 {
     min-height: 100px;
     height: 100vh;
     padding: 100px;
     text-align: center;
 }

 .EventContainer {
     background-color: var(--purple4);
     color: var(--green1);
     border-radius: 16px;
     font-size: 2vw;
     padding: 5%;
 }

 .EventContainer>p {
     height: 150px;
     align-content: center;
 }

 .testTruckHome {
     background-size: contain;
     background-repeat: no-repeat;
     position: absolute;
     width: 300px;
     height: 200px;
     animation: truckMovement 6s infinite;
     left: 20vw;
     opacity: 100%;
     bottom: 0;
 }

 @keyframes truckMovement {
     0% {
         background-image: url(https://static.igem.wiki/teams/5117/images-wiki/home/tshirts-truck-new.webp);
         left: 20vw;
         opacity: 100%;
     }

     5% {
         background-image: url(https://static.igem.wiki/teams/5117/images-wiki/home/tshirts-truck-unloaded.webp);
     }

     40% {
         background-image: url(https://static.igem.wiki/teams/5117/images-wiki/home/tshirts-truck-unloaded.webp);
         opacity: 0%;
     }

     50% {
         left: 80vw;
         opacity: 0%;
         background-image: url(https://static.igem.wiki/teams/5117/images-wiki/home/tshirts-truck-unloaded.webp);
     }

     60% {
         background-image: url(https://static.igem.wiki/teams/5117/images-wiki/home/tshirts-truck-new.webp);
         opacity: 0%;
     }

     100% {
         background-image: url(https://static.igem.wiki/teams/5117/images-wiki/home/tshirts-truck-new.webp);
         left: 20vw;
         opacity: 100%;
     }
 }

 .TruckContainerMoving {
     text-align: left;
     position: relative;
     height: 100%;
 }

 @media only screen and (max-width: 768px) {

     .TruckContainerMoving {
         text-align: left;
         position: relative;
         height: 90%;
     }

     .landingPage3 {
         padding-left: 1vh;
         padding-right: 1vh;
         padding-top: 10vh;
     }

     .EventContainer {
         background-color: var(--purple4);
         color: var(--green1);
         border-radius: 8px;
         font-size: 5vw;
     }

     .EventContainer>p {
         height: 75px;
         align-content: center;
     }

     .testTruckHome {
         position: absolute;
         width: 100px;
         height: 60px;
         animation: truckMovement 4s infinite;
         left: 20vw;
         opacity: 100%;
         bottom: 0;
     }

     @keyframes truckMovement {
         0% {
             background-image: url(https://static.igem.wiki/teams/5117/images-wiki/home/tshirts-truck-new.webp);
             left: 20vw;
             opacity: 100%;
         }

         60% {
             background-image: url(https://static.igem.wiki/teams/5117/images-wiki/home/tshirts-truck-new.webp);
             left: 65vw;
             opacity: 0%;
         }

         100% {
             background-image: url(https://static.igem.wiki/teams/5117/images-wiki/home/tshirts-truck-new.webp);
             left: 20vw;
             opacity: 100%;
         }
     }
 }

 @media only screen and (max-device-width: 1000px) {

     /*Tablets*/
     @keyframes truckMovement {
         0% {
             background-image: url(https://static.igem.wiki/teams/5117/images-wiki/home/tshirts-truck-new.webp);
             left: 20vw;
             opacity: 100%;
         }

         45% {
             background-image: url(https://static.igem.wiki/teams/5117/images-wiki/home/tshirts-truck-new.webp);
             opacity: 0%;
         }

         50% {

             left: 55vw;
         }

         55% {
             background-image: url(https://static.igem.wiki/teams/5117/images-wiki/home/tshirts-truck-new.webp);
             opacity: 0%;
         }

         100% {
             background-image: url(https://static.igem.wiki/teams/5117/images-wiki/home/tshirts-truck-new.webp);
             left: 20vw;
             opacity: 100%;
         }
     }
 }

 .clickable {
     height: 100%;
     width: 100%;
     left: 0;
     top: 0;
     position: absolute;
     z-index: 1;
 }

 div.covered-div {
     position: relative;
 }

 a.cover-link {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
 }


 .headlineText {
     margin-top: 3%;
     margin-bottom: 3%;
     font-size: 1.5vw;
 }

 @media only screen and (max-width: 768px) {
     .headlineText {
         font-size: 18px;
     }

     .circleLogo {
         padding: 15%;
     }
 }

 @media screen and (orientation: landscape) {
    .homePageContent {
    font-size: 2vw;
    }
  }