@media (min-width: 576px) {
    
}

@media (min-width: 768px) {

    
    
}

@media (min-width: 992px) {
    
}

@media (min-width: 1200px) {
    
}

@media (min-width: 1400px) {
    
}

/* Max sitze */

@media (max-width: 575.98px) {

    /* Place the timelime to the left */
  .timeline::after {
  left: 31px;
  }
  
  /* Full-width timelineContainers */
  .timelineContainer {
  width: 100%;
  padding-left: 70px;
  padding-right: 25px;
  }
  
  /* Make sure that all arrows are pointing leftwards */
  

  /* Make sure all circles are at the same spot */
  .left::after, .right::after {
  left: 18px;
  }
  
  /* Make all right timelineContainers behave like the left ones */
  .right {
  left: 0%;
  }
    
    
    
}

@media (max-width: 767.98px) {

    .cardDeck.card-2,
    .cardDeck.card-3,
    .cardDeck.card-4,
    .cardDeck.card-5,
    .cardDeck.card-6,
    .cardDeck.card-7{
        --columns: 1 !important;
    }

      
  
    
}

@media (max-width: 991.98px) {

    .content .contentText{
        padding: 15px 10px 0px 20px;
        width: 100% !important;
    }

    .content .contentImage{
        padding: 0;
        width: 100% !important;
    } 

    .content .contentImage img{
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
        width: 100%;
        height: auto;
    }
    
}

@media (max-width: 1199.98px) {
    
}

@media (max-width: 1399.98px) {
    
}

/* Between size */

@media (min-width: 576px) and (max-width: 767.98px) {

    
    
}

@media (min-width: 576px) and (max-width: 991.98px) {
    
}



@media (min-width: 768px) and (max-width: 991.98px) {


    .cardDeck.card-3,
    .cardDeck.card-4,
    .cardDeck.card-5,
    .cardDeck.card-6,
    .cardDeck.card-7{
        --columns: 2 !important;
    }
    
}

@media (min-width: 768px) and (max-width: 991.98px) {
    
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    
}