/* TO DO - Proper Mobile Styling*/



.gradivisgallery {
	 	 		display: flex;
	      flex-direction: row;
	      flex-wrap: wrap;
	      justify-content: center;
	      align-items: center;
				width: 100%;
				padding:1%;
				margin-left: 0vw;
	
 }
 .placeholder {
				width: 80%;
				margin: 1%;
				float: left;
				opacity: 1;
				background-color: #fff;
 }

 .placeholder img {
				border: 1px solid #d1d1d1 !important;
				border-radius: 0px;
				width: 100%;
				height:100%;
				max-height: 1200px;
 }

.placeholder img:hover {
	cursor: zoom-in;
}

 .gallery-images {
				width: 80%;
				margin: 1%;
				float: left;
 }

 .gradivisimage  {
				width: 20%;
				float: left;
				margin: 1%;
				cursor: pointer;
				border: 0px solid #d1d1d1 !important;
				border-radius: 14px;
			    margin-top: 20px;
			    margin-right: 10px;
			   	transition: 0.3s;
			   	overflow: hidden;
			   	
 }

 .gradivisimage img {
				width: 100%;
				float: left;
				margin: 1%;
				transition: 0.3s;
				/*margin-top: 10px;
	      		margin-right: 10px;*/
 }

.gradivisimage img:hover {
	opacity: 0.7;
	
}

/* Mobile Styling for Gallery */
@media only screen and (max-width: 749px) {  
 .gradivisgallery {
	flex-direction:column !important; 
	margin-left: 0vw !important;
 } 
 .gradivisimage img {
	width: 100% !important;
	position: relative;
	z-index: 9999999999;
 }
 .placeholder {
	width: 80% !important;
 }
 .gallery-images {
	width: 90% !important; 
  margin-left: 0vw !important;
  /*float: none !important;
  column-count: 2 !important;
	-webkit-column-count: 2 !important;
	-moz-column-count: 2 !important;
  column-gap: 20px;*/
	
 }
}

/* Begin Additional CSS for Zoom */
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; 
    padding-top: 20px; 
    left: 0;
    right:0; 
    top: 0;
    bottom: 0;
    overflow: auto; 
    background-color: rgb(253,250,246); 
    background-color: rgba(0,0,0,0.4); 
    z-index: 9999; 
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 65%;
}


/* Add Animation */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

.out {
  animation-name: zoom-out;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(1)}
    to {-webkit-transform:scale(2)}
}

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

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

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Heading Style */


.gradivislogo {
	font-family: "Vibur" !important;
  text-align: center;
  height: 150px;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
   user-select: none;
	margin-top: 10vh;
}

.gradivislogo b{
  font: 400 60px "Vibur";
  color: #fee;
  text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #8013dd, 0 0 0.5em #8013dd, 0 0 0.1em #8013dd, 0 10px 3px #000;
}