#slideshow {width:100%; max-width:768px; margin:0 auto 20px auto; background:#3e3e3e; padding:10px 0 0 0;}
#slideshow input {display:none;}
#slideshow a {text-decoration:none;}
#slideshow h1 {text-align:center; font:700 17px/20px 'Lato', arial, sans-serif; color:#95b0b9;}
#slideshow h1 span {color:#ebebeb;}

#slideshow #icons {width:95%; max-width:672px; margin:0 auto; min-height:36px; position:relative;}
#slideshow #icons img {display:inline-block;}
#slideshow .info {display: inline-block; cursor:pointer;}
#slideshow .information {max-height:0; overflow:hidden; font:400 15px/20px 'Lato', arial, sans-serif; color:#ebebeb; text-align:justify;
-webkit-transition:0.25s;
transition:0.25s;
}
#slideshow .information a {color:#95b0b9;}
#slideshow .information span {text-decoration:underline; font-weight:700; line-height:30px;}
#slideshow #info:checked ~ .information {max-height:400px; padding-top:10px;}
#slideshow #icons p.page {font:400 15px/30px 'Lato', arial, sans-serif; color:#ebebeb; position:absolute; left:50%; top:5px;}
#slideshow #icons p.page span {display:inline-block; font:400 15px/30px 'Lato', arial, sans-serif; color:#95b0b9; margin:1px;}
#slideshow #icons p.page a span {color:#fff; text-decoration:underline;}
#slideshow #icons p.page a:hover span {color:#95b0b9; text-decoration:none;}
#slideshow #icons p.mob {font:400 16px/32px 'Lato', arial, sans-serif; color:#ebebeb; display:block; float:right;}
#slideshow #icons p.mob span.number {display:inline-block; vertical-align:middle; display:none;}
#slideshow #icons p.mob a {display:inline-block; height:29px; vertical-align:middle; opacity:0.7;}
#slideshow #icons p.mob a img {display:inline-block; height:100%;}
#slideshow #icons p.mob span.page {color:#95b0b9;}
#slideshow #icons p.mob span.page a {height:36px; opacity:1; color:#ebebeb;}
#slideshow #icons p.mob span.page a:hover {color:#95b0b9;}

#thumbs {text-align:center; width:95%; max-width:672px; margin:10px auto 0 auto; position:relative;}

#thumbs a.thumb {display:inline-block; width:64px; height:64px; position:relative; margin-right:12px}
#thumbs a.thumb:last-child {margin-right:0;}
#thumbs a.thumb img {display:block; position:absolute; left:0; top:0; cursor:pointer; z-index:10;}
#thumbs a.thumb img.color {opacity:0; z-index:20;
filter: alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
-webkit-transition:0.25s;
transition:0.25s;
}
#thumbs a.thumb:hover img.color {opacity:1;
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}

/* This defines the width and height ratio of the image frame. 672px x 0.703 = 472.4px which rounds down to 472px */
#large {width:95%; max-width:672px; height:0; padding-bottom:70.3%; margin:5px auto; position:relative; overflow:hidden;}

/* Because the #large frame is height:0; we need to set the link height to 472px using position:absolute; with width and height:100% */ 
#large a {display:block; position:absolute; left:0; top:0; width:100%; height:100%;}

/* This sets the image to either 100% height or 100% width. The one selected by CSS keeps the image contained and centered within the link frame */
#large a img {display: block; position:static; width:100%; height:100%; object-fit:contain;}

#caption {width:100%; text-align:center;}
#caption p {font:400 14px/20px 'Lato', arial, sans-serif; color:#ebebeb; padding:5px 0;}

@media only screen and (max-width: 740px) {
#slideshow #icons p.mob span.number {display:inline-block;}
#slideshow #icons p.mob span.page {display:none;}
#thumbs {display:none;}
#large {margin-top:0;}
#slideshow #icons p.mob a {height:25px;}
}
@media only screen and (max-width: 480px) {
#slideshow h1 {font-size:15px}
html, body {min-height:100%; background:#3e3e3e;}
}
@media only screen and (max-width: 480px) and (orientation: landscape) {
#slideshow h1 {font-size:15px}
#large {width:35%; padding-bottom:25%}
}