@media (max-width:575px) {

    body {
        font-size: 13px;
        line-height: 20px;
        letter-spacing: 0
    }

    .formacion {
        margin-right: 0 !important
    }



    h1 {
        font-size: 23.21428571px;
        line-height: 38.18181818px
    }

    h2 {
        font-size: 18.57142857px;
        line-height: 24.54545455px
    }

    h4 {
        font-size: 18.57142857px;
        line-height: 24.54545455px
    }

    .slick-slide:first-child {
        margin-right: 0 !important
    }


    .timeline {
        width: auto;
        float: none;
        margin-left: 0;
        margin-right: 0
    }

    .timeline {
        margin-left: 0;
        margin-right: 0;
        width: auto
    }

    .timeline .timeline-box {
        margin: 15px auto;
        max-width: 90%
    }

    .timeline .timeline-box {
        max-width: 90%
    }

    .timeline .timeline-box.right {
        margin: 15px auto;
        max-width: 90%
    }

    .timeline .timeline-box.right {
        max-width: 90%
    }
}


@media (min-width:576px) {

    .container {
        max-width: 540px
    }

    .modal {
        --modal-modal-margin: 1.75rem;
        --modal-modal-box-shadow: var(--modal-box-shadow);
      }
      .modal-dialog {
        max-width: var(--modal-modal-width);
        margin-right: auto;
        margin-left: auto;
      }
      .modal-sm {
        --modal-modal-width: 300px;
      }
    
}


@media (max-width:767px) {


    .imagen-position {
        margin: 0 auto 37px;
        max-width: 80%;
        position: relative !important;
        top: 0
    }

   
    .slick-slider .slick-next,
    .slick-slider .slick-prev {
        display: none !important
    }

    .timeline {
        width: 74%;
        margin: 50px 13% 0
    }

    .timeline .timeline-box {
        float: none;
        clear: both;
        right: auto;
        left: auto;
        margin: 25px auto;
        max-width: 80%;
        width: auto
    }

    .timeline .timeline-box {
        max-width: 80%
    }

    .timeline .timeline-box.right {
        float: none;
        clear: both;
        right: auto;
        left: auto;
        margin: 25px auto;
        max-width: 80%;
        width: auto
    }

    .timeline .timeline-box.right {
        max-width: 80%
    }

    .timeline .timeline-box.left:after,
    .timeline .timeline-box.left:before,
    .timeline .timeline-box.right:after,
    .timeline .timeline-box.right:before {
        display: none
    }

    .exp-timeline {
        width: 100%;
        margin: 0
    }

    .exp-timeline .timeline-bar {
        display: none
    }

    .exp-timeline .timeline-box:after,
    .exp-timeline .timeline-box:before {
        display: none !important
    }
}

@media (min-width:768px) {
    .container {
        max-width: 720px;
        width: 750px
    }

    .col-md-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-md-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-md-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-md-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }


    .col-md-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

}

@media (max-width:991px) {


    .imagen-position {
        top: 5px
    }

    .exp-timeline .timeline-bar {
        left: -4.1%
    }

    .exp-timeline .timeline-box:after,
    .exp-timeline .timeline-box:before {
        left: -4.1%
    }

    .exp-timeline .timeline-box.right {
        float: right
    }

    .exp-timeline .timeline-box.right:before {
        left: -3.4%
    }

}

@media (min-width:992px) {
    .container {
        max-width: 960px;
        width: 970px

    }

    .col-lg-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }


    .col-lg-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-lg-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .modal-lg,
    .modal-xl {
      --modal-modal-width: 800px;
    }

}

@media (min-width:1200px) {
    .container {
        max-width: 1140px;
        width: 1170px

    }    

    .col-xl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .modal-xl {
        --modal-modal-width: 1140px;
      }

}