.banner_info {
    width: 100%;
    height: max-content;
    /* min-height: 100% !important; */
    /* height: 100%; */
  }

  .banner {
    width: 74.5%;
    background-color: var(--primary);
    /* height: 100%; */
    border-radius: 15px;
    /* border-right: 5px solid var(--background); */
  }

  /* SLIDESHOW */

  .mySlides {
    display: none;
  }

  .mySlides img {
    vertical-align: middle;
    width: 100%;
  }

  /* Slideshow container */
  .slideshow-container {
    /* max-width: 1000px; */
    position: relative;
    margin: auto;
  }

  /* Caption text */
  .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
  }

  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }

  .banner_dots{
    text-align: center;
    display: none;
  }

  /* The dots/bullets/indicators */
  .dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }

  .active {
    background-color: #717171;
  }

  /* Fading animation */
  .fade {
    animation-name: fade;
    animation-duration: 1.5s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }


  .info {
    width: 24.5%;
    margin-left: 1%;
    background-color: var(--lahti_red);
    min-height: 100% !important;
    height: 100%;
    border-radius: 15px;
    padding: 0px;
  }

  .info-container{
    margin: auto;
    display: block;
  }

  .info-container img{
    vertical-align: middle;
    width: 100%;
    border-radius: 15px;
  }

  .info-container hr{
    display: none;
    color: #ffffff;
  }

  .infos {
    display: none;
    text-align: center;
    color: #ffffff;
    padding: 25px 0px;
  }

  .infos i{
    font-size: 75px;
  }


  @media only screen and (min-width: 350px) {
    /* For mobile: */

    


  }
  
  @media only screen and (min-width: 600px) {
    /* For tablets: */

    :root {
      --progress-bar-width: 100px;
      --progress-bar-height: 100px;
      --font-size: 1.3rem;
    }

  }

  @media only screen and (min-width: 768px) {
    /* For desktop: */

    :root {
      --progress-bar-width: 75px;
      --progress-bar-height: 75px;
      --font-size: 1rem;
    }


  }

  @media only screen and (min-width: 1024px) {

    .progress>li:after {     
      top: 4.3rem;    
      font-size: 2.2rem;
  }
    
  .progress svg {
      width: 11rem;
      height: 11rem;
  }
    .progress {
        padding: 58px;
    }
  }

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

    .banner{
      width: 100%;
    }

    .info{
      width: 100%;
      margin-left: 0;
      margin-top: 15px;
    }

    .info-container img{
      display: none;
    }

    .infos, .infos img, .info-container hr{
      display: block;
    }

    .infos img{
      width: 50px;
      margin: 5px auto;
    }
    
  }
  
  @media screen and (max-width: 570px) {

    .col-5 {
      width: 100%;
    }

    .col-11 {
      width: 93%;
    }

  }