@media only screen and (min-width: 0px) {
    .slideshow-container {
        position: relative;
        width: 100%;}
        .sliderProyectos {
            float: left;
            position: relative;
            width: 100%;
        }
    /* The container */
    .container {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
 #Anteriores .container, #Proyectos .container{
    cursor: pointer;
 }
    /* Hide the browser's default radio button */
    .container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

    /* Create a custom radio button */
    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        z-index: 1;
        height: 25px;
        width: 25px;
        background-color: #6a184c;
        border:1px solid #f3218a;
        border-radius: 50%;
        -webkit-animation-name: parpadea;
        -webkit-animation-duration: 1.35s;
        animation-name: parpadea;
        animation-duration: 1.35s;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
    }
    @-webkit-keyframes parpadea {
        0% {height:25px; width:25px;} 
        50% {height:27px;width:27px;}
        100% {height:25px; width:25px;} 
      }
      
      @keyframes parpadea {
        0% {height:25px; width:25px;} 
        50% {height:27px;width:27px;}
        100% {height:25px; width:25px;} 
      }
    /* On mouse-over, add a grey background color */
    .container:hover input ~ .checkmark {
        background-color: #ff04a3;
        border: 0px solid #f3218a;
    }

    /* When the radio button is checked, add a blue background */
    .container input:checked ~ .checkmark {
        background-color: #f3218a;
    }

    /* Create the indicator (the dot/circle - hidden when not checked) */
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Show the indicator (dot/circle) when checked */
    .container input:checked ~ .checkmark:after {
        display: block;
    }

    /* Style the indicator (dot/circle) */
    .container .checkmark:after {
        top: 9px;
        left: 9px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }
    .time_line{
        position: relative;
        margin: 0 auto;
        display: table;
    }
    #Anteriores .time_line{
        width: auto;
        float: inherit;
    }
    .nodos{
        float: left;
        position: relative;
        width: 100%;
        margin: 100px 0;
    }

    .nodo_indiv{
        float: left;
        position: relative;
        margin: 37px 0px 0 13px;
    }
    .carrusel img{
        float: left;
        position: relative;
        width: 45px;
        background: none;
    }
    button.w3-button.w3-black.w3-display-left.carrusel {
        background: none;
        border: none;
    }
    .proy1, .proy2, #primero, #segundo, #tercero, #cuarto, #quinto, #sexto, #prepoyeUno, #prepoyeDos, #prepoyeTres, #prepoyeCuatro, #prepoyeCinco, #prepoyeSeis,#prepoyeSiete,#prepoyeOcho,#prepoyeNueve,#prepoyeDiez,#prepoyeOnce, #facebookLiga,#twitterLiga,#Instaliga  {
        display: none;
    }
    #prepoyeDoceavo, #prepoyeTreceavo, #prepoyeDecimoCuarto, #prepoyeDecimoQuinto, #prepoyeDecimoSexto, #prepoyeDecimoSeptimo, #prepoyeDecimoOctavo , #prepoyeDecimoNoveno, #prepoyeVigesimo, #prepoyeVigesimoUno,  #prepoyeVigesimoSegundo, #prepoyeVeintiTres{
        display: none;
    }
    .w3-display-right {
        float: right!important;
        position: relative;
        right: 0;
        background: none;
        border: none;
    }
    button.carrusel {
        float: left;
        position: relative;
    }
    button.carrusel:hover {
    opacity: 0.5;
    cursor:pointer;
    }
    .btnDireccion {
        position: absolute;
        width: 100%;
        top: 26%;
    }

    .cuadroResultado {
        margin: 0 auto;
        display: table;
        padding-top: 60px;
    }
    .cuadroProyecto{
        position: relative;
        margin: 0 auto;
        display: table;
    }
 
    
    .proyectoDiag {
        position: absolute;
        float: left;
        bottom: 62px;
        left: 22%;
    }
    .proyectoDiag.Inv {
        bottom: -60px;
        left: 42%;
    }
    .proyectoDiag.Inv.Adelante {
        left: 88%;
    }
    .proyectoDiag.Inv.Adelante.nuevo {
        left: 95%;
        bottom: 60px;
    }
    .proyectoDiag.AdelanteDos{
        left: 68%; 
    } 
    .bullets_slider {
        float: left;
        position: absolute;
        width: 100%;
        bottom: 0;
    }
    /**********************/
    /*        proyectos  */
    .preProy{
        float: left;
        position: relative;
        width: 100%;
        cursor:pointer;
        transition: all 0.5s;
    }
    .investigacion{
        background: #f32189;
    }
    .ttlProyecto {
        margin: 0 auto;
        display: table;
    }
    .ttlProyecto h2{
        font-size: 16px;
        text-align: center;       
        color: #fff;     
        padding: 20px;     
        margin: 0;
    }
    .ttlProyecto a{
        color: #EC008C;
    float: right;
    font-size: 13px;
    margin: 20px 5px;
    border-top: 1px solid #ff0898;
    }
    .ttlProyecto a:hover {
        color:#ffffff;
        text-decoration: none;
    }
    .slideshow-container a {
        float: left;
        position: relative;
        width: 100%;
    }
    .fondoBlanco{
        background: #ffffff;
        color: #b81e8b; 
        margin: 0;
    }
    .fondoBlanco p{
        padding: 10px;
        text-align: center;
        font-weight: 600;
        font-size: 12px;
        margin: 0;
        margin-top: 10px;
    }
    .preProy:hover{
        box-shadow: 19px 13px 32px #000000;
    }
    /****************/
    /*MODAL */
    .modal-dialog {
       max-width: 700px!important;
    }
    .modal-content {
        background: #6a184c!important;
    }
    .artista {
        float: left;
        position: relative;
        width: 100%;
    }
    .textoProyecto{
        float: left;
        position: relative;
        width: 100%;
    }
    .textoProyecto .ttlProyecto h2{
        color: #ffffff;
        font-weight: 900;
        font-size: 20px;
        text-align: left;
        padding: 10px;
    }
    .modal-dialog .ttlProyecto {
        float: left;
        width: 100%;
        margin: 10px;
    }
    .textoProyecto p{
        color: #ffffff;
        line-height: 30px;
        width: 100%;
        float: left;
        position: relative;
        font-size: 15px;
        font-weight: 300;
        float: right;
        padding: 0 10px;
        text-align: justify;
    }
    .fondoBlanco span {
        float: left;
        position: relative;
        width: 100%;
        color: #b9a9b1;
        font-size: 10px;
        text-transform: uppercase;
        text-align: center;
        padding: 7px 0;
        background: #6a184c;
    }
    .ttlProyecto p {
        float: right;
        text-align: left;
    }
    .ttlProyecto span{
        font-family: 'Merriweather Sans', sans-serif;
        font-weight: 100;
        font-size: 12px;
    }
    .modal-content .ttlProyecto span{
        font-size: 15px;
    }
    .close span {
        float: right;
        padding: 10px;
        color: #ffffff;
    }
    .textoProyecto .artista h2{
        color: #f32189;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 19px;
        float: left;
        padding: 0 20px;
    }
    .biografia {
        float: left;
        position: relative;
        width: 100%;
        margin-top:15px; 
      
    }
    .biografia h2 {
        color: #ffffff;
    }
    .biografia span{
        font-weight: 900;
    }
    #slideDos .proyectoDiag.Inv{
        left:0%;
    }
    #slideDos .proyectoDiag.Adelante{
        left:60%
    }
    .imgProyecto {
        width: 30%; 
        float: left;
        position: relative;
    }
    .imgProyecto img {
        width: 55px;
        margin: 0 auto;
        display: table;
        padding: 20px 0 30px 0;
    }
    .txtProyectos_borde{
        float: left;
        position: relative;
    }

    /****/
    /*PRUEBA PURE CSS SLIDE*/
    .slide-figure img {
        max-width: 100%;
        vertical-align: middle;
      }
      
      .trigger {
        display: none;
      }
      
      .slider, .slider-wrapper {
        position: relative;
        height: 320px;
      }
      
      .slide {
        width: 100%;
        overflow: hidden;
        position: absolute;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 5000;
        opacity: 1;
        transition: opacity .5s ease-in-out;
      }
      .trigger:checked + .slide {
        z-index: 6000;
        opacity: 1;
      }
      .slide-img {
        filter: brightness(80%);
        height: 100%;
        object-fit: fill;
        display: block;
        margin: 0 auto;
      }
      
      .slide-figure {
        height: auto;
        position: relative;
        margin: 30px 0;
        float: left;
        width: 100%;
      }
      
      .slide-caption {
        position: absolute;
        bottom: 30%;
        width: calc(100% - 1rem);
        color: white;
        text-align: center;
        left: 50%;
      }
      
      .trigger:checked + .slide {
        z-index: 6000;
        opacity: 1;
      }
     .imgProyecto_descripcion .trigger:checked + .slide {
        z-index: 6000;
        opacity: 1;
        display: block;
      }
      
      .slider-nav {
        width: 100%;
        text-align: center;
        margin: 0;
        padding: 0;
      }
      
      .slider-nav__item {
        display: inline-block;
      }
      
      .slider-nav__label {
        font-size: 13px;
        background-color: #6a184c;
        border: 1px solid #f3218a;
        display: block;
        height: 20px;
        line-height: 1em;
        width: 20px;
        margin:10px 5px;
        text-align: center;
        border-radius: 50%;
        color: white;
        cursor: pointer;
        transition: background-color .25s, color .25s ease-in-out;
      }
      
      .slider-nav__label:hover,
      .slider-nav__label:active,
      .slider-nav__label:focus {
        background-color:#f3218a;
      }
   input[type="radio"]:checked + label{ 
        background-color: #f3218a;
    } 
}
@media only screen and (min-width: 768px) {
    .time_line{
        float:left;
        width:100%;
    }
    .ttlProyecto a{
    font-size: 15px;
    }
    .nodo_indiv{
        margin:0 20px;
    }
    .textoProyecto{
        padding: 20px;
    }
    .imgProyecto {
        width: 30%;
    }
    .modal-dialog .ttlProyecto {
        width: 90%;
    }
    .textoProyecto .ttlProyecto h2{
        padding: 10px 0px 0 50px;
    }
    .modal-dialog .ttlProyecto {
        margin: 0px 0 30px 0;
    }
    .ttlProyecto p {
        padding: 0px 0px 0 80px;
    }
    .circuloSliders{
        margin: 15px 0 0 0;
    }
    .slide-figure {
        margin: 50px 0;
      }
    .slide-img {
        width: 100%;
        height: auto;
      }

}

@media only screen and (min-width: 1024px) {
    .cuadroProyecto {
        padding: 50px 0;
    }
  
    .time_line{
         width: auto;
         padding-bottom: 60px;
    }
    #Anteriores .time_line{
        float: inherit;
    }
    .slider, .slider-wrapper {
        height: 480px;
      }
    
      .slide-caption {
        width: 65%;
        font-size: 1.5rem;
      }
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {
    .slider, .slider-wrapper {
      height: 360px;
    }
  
    .slide-caption {
      width: 75%;
      font-size: 1.25rem;
    }
    .slider-nav__label {
        height: 15px;
        width: 15px;
        margin:5px;
      }
      
  }