.thumb {
    
    display: inline;
    max-height: 50px;
}
#thumblist {  

    text-align: center;
    border-radius: 8px;
    padding: 0;    
}
#thumblist img {
    border-radius: 8px;
}
.description {
      color: white;
      text-decoration: none;
}

/** relevant CSS Below **/

.lightbox {

    top: 120px;
    left: 150px;
    display: none; /**sets the default display to hide the lightbox until it's the :target**/
    position: fixed; /**the rest of this styling makes the lightbox full screen when selected**/
    z-index: 999;
    width: 80%;
    height: 80%;
    text-align: center;
    /*background: rgba(0,0,0,.8);*/
    background: white;
   
}
.lightbox img { /**sets the styling of the image in the lightbox**/
    max-width: 80%;
    max-height: 90%;
    text-align: center;
    margin-top: 2%;

}
.lightbox:target { /**this is where the magic happens. makes the lightbox display when it's the target of a clickable link**/
    outline: none;
    display: block;
}
.previous { /**styling the left arrow**/
    /*background: green;*/   
    position: fixed;
    top: 270px;
    left: 370px;    
    width: 40px;
}
.exit { /**styling the exit button**/
   /* background: yellow;*/   
    position: fixed;
    top: 150px;
    right: 370px;
    width: 40px;
}
.next { /**styling the right arrow**/   
    /*background: red;*/ 
    position: fixed;
    right: 370px;
    top: 40%;
    width: 40px;
}

@media only screen and (max-width: 500px) and (min-width: 341px) {

#thumblist {    
    margin-top: -100px;   
}
#thumblist img {   
    border-radius: 5px;
    padding: 8px;    
}
.lightbox img { /**sets the styling of the image in the lightbox**/   
    max-width: 80%;
    max-height: 90%;
    text-align: center;
   }
.lightbox:target { /**this is where the magic happens. makes the lightbox display when it's the target of a clickable link**/  
    margin-left: -100px;
    height: 250px;
}
.previous { /**styling the left arrow**/  
    top: 200px;
    left: 70px;    
    width: 40px;
}
.exit { /**styling the exit button**/  
    top: 120px;
    right: 80px;
    width: 40px;
}
.next { /**styling the right arrow**/  
    position: fixed;
    right: 80px;
    top: 200px;
    width: 40px;
}

} 

/* Para 320px */  
@media only screen and (max-width: 340px) and (min-width: 5px)  {
#thumblist {   /**esto es las fotografias
    **/ 
        
    margin-top: -350px;   
}
#thumblist img {   
    border-radius: 5px;
    padding: 8px;    
}
.lightbox img { /**sets the styling of the image in the lightbox**/   
    max-width: 80%;
    max-height: 90%;
    text-align: center;
   }
.lightbox:target { /**cuadro cuando sale la foto**/  
    background: white;
    margin-top: 500px;
    margin-left: -200px;
    height: 150px;
    width: 350px;
}
.previous { /**styling the left arrow**/  
    top: 650px;
    left: 10px;    
    width: 40px;
}
.exit { /**styling the exit button**/  
    top: 600px;
    left: 250px;
    width: 40px;
}
.next { /**styling the right arrow**/  
    position: fixed;
    left: 250px;
    top: 650px;
    width: 40px;
}






}