/* animacijas */

  .slideanim {visibility:hidden;}
  .slide {
    overflow: hidden;
    animation-name: slide;
    -webkit-animation-name: slide;
    animation-duration: 2.5s;
    -webkit-animation-duration: 2.5s;
    visibility: visible;
  }
  
  @keyframes slide {
    0% {
      opacity: 0;
      transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  @-webkit-keyframes slide {
    0% {
      opacity: 0;
      -webkit-transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      -webkit-transform: translateY(0%);
    }
  }

.slideanim-left {visibility:collapse;}
.slide-in-left {
    animation: slide-in-left forwards;
    -webkit-animation: slide-in-left forwards;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
}

.slideanim-right {visibility:collapse;}
.slide-in-right {
    animation: slide-in-right forwards;
    -webkit-animation: slide-in-right forwards;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
}
    
@keyframes slide-in-left {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0%); }
}

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


@keyframes slide-in-right {
    0% { transform: translateX(+120%); }
    100% { transform: translateX(0%); }
}

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

@media screen and (min-width: 801px) {
    .jumbotron {
        font-size: 2vw;
    }
}

@media screen and (max-width: 800px) {
    
    @keyframes slide-in-right {
        0% { transform: translateX(-120%); }
        100% { transform: translateX(0%); }
    }

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