@charset "UTF-8";
/* CSS Document */

/*------------------lightbox-------------------------*/

.row > .column {padding: 0 8px;}
.row:after {content: "";display: table;clear: both;}
.column {width:100%;height:100px;margin-top:20px;overflow-x: scroll;display:flex; }

/* 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); z-index:95;}

/* Modal Content */
.modal-content {position: relative;background-color: transparent;margin: auto; padding: 0 0 200px 0;width: 95%;}

.mySlides img{width:50%; height:100%; padding-bottom:3%}
/* The Close Button */
.close {
  color: rgba(150,150,150,1);
  position: fixed;
  width:15%;
  height:15%;
  float:right;
  top: 1%;
  right: 2%;
  font-size: 50px;
  z-index:99;
}

.close:hover,
.close:focus {
  color:rgba(250,250,250,1);
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none; bottom:20px;
}

/* Next & previous buttons */
.next:before{ content:'';z-index:100;width:20px; height:20px;position:absolute; top:40%; left:0px;border:2px solid #fff; border-top:2px solid transparent; border-left:2px solid transparent; transform: rotate(-45deg);cursor:poniter;}
.prev:before{ content:'';z-index:100;width:20px; height:20px;position:absolute; top:40%; left:15px;border:2px solid #fff; border-top:2px solid transparent; border-left:2px solid transparent; transform: rotate(135deg);cursor:poniter;}
.prev,.next {
  cursor: pointer;
  position: fixed;
  top:35%;
  padding: 30px;
  margin-top: 0px;
  color: white;
  width:10px; height:15%;
  background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,0));
  transition: 0.6s ease;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.prev {
    float: left;
    left: 15px;
}
.next {
  right: 0;
}

/* On hover, add a black background color with a little bit see-through 

.prev:hover{background:linear-gradient(-90deg,rgba(0,0,0,0),rgba(0,0,0,0.2));}
.next:hover { background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,0.2));
}*/

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.caption-container {
  text-align: center;
  background-color: transparent;
  padding: 2px 16px;
  color: white;
}

img.demo {
  opacity: 0.6; 
  width:auto; 
  height:70px;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

@media screen and (max-width:768px){
	.mySlides img{ width:90%; height:100%; padding-bottom:7%}
	.prev,.next {
  cursor: pointer;
  position: fixed;
  top:35%;
  padding: 0%;
  margin-top: 0;
  color: white;
  width:10%; height:15%;
  background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,0));
  transition: 0.6s ease;
  user-select: none;
  -webkit-user-select: none;
}
}