/* Start of mobile */
@media screen and (max-width: 768px)
{
/* Modal Content large image */.modal-content {position: relative;  background-color: #fefefe;  margin: auto;  padding: 0px 5% 0px 5%;  width: 90%;  height: auto}
/* small img space between eack inage */.row > .column {padding: 10px 0px 0px 0px;}
.largeimg {width:100%; height:auto; border-radius: 0px;}
/* small img column */.column {margin: 0px auto 0px auto;width: 90%;text-align: center;border: 0px solid #115588}
.mySlides { display: none;  padding: 10px 0px 0px 0px;}
}

/* Start of ipad screem */
@media screen and (min-width: 769px)
{
/* Modal Content large image */.modal-content {position: relative;  background-color: #fefefe;  margin: auto;  padding: 0;  width: 640px;  height: 480px;}
/* small img space between eack inage */.row > .column {padding: .5% .5%;}
.largeimg {width:640px; height:480px; border-radius: 0px;}
/* small img column */.column {float: left;width: 18.5%;text-align: center;border: 0px solid #115588}
.mySlides {display: none;}
}
/* Start of larger screen */
@media screen and (min-width: 1025px)
{
/* Modal Content large image */.modal-content {position: relative;  background-color: #fefefe;  margin: auto;  padding: 0;  width: 640px;  height: 480px;}
/* small img space between eack inage */.row > .column {padding: .5% .5%;}
.largeimg {width:640px; height:480px; border-radius: 0px;}
/* small img column */.column {float: left;width: 18.5%;text-align: center;border: 0px solid #115588}
.mySlides {display: none;}
}
/* Start general */
/* The Modal (background) */.modal {  display: none;  position: fixed;  z-index: 1;  padding-top: 100px;  left: 0;  top: 0;  width: 100%;  height: 100%;  overflow: auto;   background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */}
/* thumb nail images sixe */.smallimg {width: 100%; height: auto}
.row:after {content: "";display: table;clear: both;}
/* The Close Button */.close {color: white;position: absolute;top: 10px;right: 25px;font-size: 35px;font-weight: bold;}
.close:hover,.close:focus {color: #999;text-decoration: none;cursor: pointer;}
.cursor {cursor: pointer}
/* Next & previous buttons */.prev {cursor: pointer;position: absolute;top: 50%;left: 0;width: auto;padding: 16px;margin-top: -50px;color: white;font-weight: bold;font-size: 50px;transition: 0.6s ease;border-radius: 0 3px 3px 0;user-select: none;-webkit-user-select: none;}
/* Position the "next button" to the right */.next{right: 0; cursor: pointer;position: absolute;top: 50%;width: auto;padding: 16px;margin-top: -50px;color: white;font-weight: bold;font-size: 50px;transition: 0.6s ease;border-radius: 0 3px 3px 0;user-select: none;-webkit-user-select: none;}
/* On hover, add a black background color with a little bit see-through */.prev:hover,.next:hover {background-color: rgba(0, 0, 0, 0.8);}
.caption-container{width:100%;text-align: center; background-color: black; color: white;}
.demo{opacity: 0.6;}
.active,.demo:hover {opacity: 1;}
img.hover-shadow {transition: 0.3s}
.hover-shadow:hover {cursor: -moz-zoom-in;cursor: -webkit-zoom-in;cursor: zoom-in;}