/* The Modal (background) */
  

.modal {
    
	display: none; /* Hidden by default */


    	position: fixed; /* Stay in place */

        z-index: 1000; /* Sit on top */

        padding-top: 100px; /* Location of the box */

        left: 0;

        top: 0;
    
        width: 100%; /* Full width */

        height: 100%; /* Full height */

        overflow: auto; /* Enable scroll if needed */

        background-color: rgb(0,0,0); /* Fallback color */

        background-color: rgba(0,0,0,0.8); /* Black w/ opacity */

}



/* Modal Content (Image) */


.modal-content {

	position: relative;

        margin: auto;

    	display: block;

    	width: 960px;
	height: 520px;

    	max-width: 1024px;

    	border-radius: 5px;

    	cursor: pointer;

    	transition: 0.3s;

    	image-rendering: pixelated;
}


	
.modal-content {

	animation-name: zoom;

	animation-duration: 0.3s;

}



@keyframes zoom {from {transform:scale(0)}
 to {transform:scale(1)}
}

/* The Close Button */


.close {

	display: block;
	position: relative;

	top: 8px;

	right: -908px;

	color: rgb(100,100,100);

	font-size: 50px;

	font-weight: bold;

	transition: 0.2s;

	z-index: 99999999999;
}

.close:hover {

	color: rgb(210,210,210);

    	text-decoration: none;

    	cursor: pointer;

}



.mySlides {

	display: block;
	position: relative;
	text-align: center;
	margin: auto;
	width: 896px;
	image-rendering: pixelated;
}



.cursor {

  	cursor: pointer;

}



/* Next & previous buttons */


.prev,
.next {

  	cursor: pointer;

  	position: absolute;

  	top: 242px;

  	width: auto;

  	padding: 8px;

   	color: rgb(100,100,100);
  	font-weight: bold;

  	font-size: 50px;

  	transition: 0.2s ease;

    	user-select: none;

  	-webkit-user-select: none;

}

.next:hover {
	color: rgb(210,210,210);
}

.prev:hover {
	color: rgb(210,210,210);
}


/* Position the "next button" to the right */


.next {

	right: -8px;

}



.prev {

  	left: -8px;

}













/* MOBILE */
  

.mobimodal {
	display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}

.mobimodal-content {
	position: relative;
    margin: auto;
  	display: block;
  	width: 530px;
    max-width: 1024px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    image-rendering: pixelated;
}
	
.mobimodal-content {
	animation-name: zoom;
	animation-duration: 0.3s;
}

@keyframes zoom {from {transform:scale(0)}
 to {transform:scale(1)}
}

.mobiclose {
	display: block;
	position: relative;
	top: 8px;
	right: -530px;
	color: rgb(100,100,100);
	font-size: 50px;
	font-weight: bold;
	transition: 0.2s;
	z-index: 99999999999;
}

.mobiclose:hover {
	color: rgb(210,210,210);
    text-decoration: none;
    cursor: pointer;
}

.mobimySlides {
	display: block;
	position: relative;
	text-align: center;
	margin: auto;
	width: 540px;
	margin-left:-2px;
	image-rendering: pixelated;
}

.mobimySlides img{margin-left:-7px;}

.mobicursor {
  	cursor: pointer;
}

.mobiprev,
.mobinext {
  	cursor: pointer;
  	position: absolute;
  	top: 180px;
  	width: auto;
  	padding: 8px;
   	color: rgb(100,100,100);
  	font-weight: bold;
  	font-size: 50px;
  	transition: 0.2s ease;
    user-select: none;
  	-webkit-user-select: none;
}

.mobinext:hover {
	color: rgb(210,210,210);
}

.mobiprev:hover {
	color: rgb(210,210,210);
}

.mobinext {
	right: -7px;
}

.mobiprev {
  	left: -8px;
}