/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background */
.imghplg-container {
  display: flex;   
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.imghplg-imginfo {
 flex-grow: 1; 
 flex-shrink: 1;
 flex-basis: 30%;
 background-color: #3b83db;
 transform-origin: bottom;
 color: #fff;
 padding: 1.0rem;
}

.imgplg-imginfo-link {
  color: #ffffff;
  text-decoration: underline;
}

.imgplg-imginfo-link:visited {
  color: #ffff00;
  text-decoration: underline;
}

.imghplg-img {
 flex-grow: 1; 
 flex-shrink: 1;
 flex-basis: 70%;
}

.imghplg-container:nth-child(odd) .imghplg-img  {
 order: 1;
 margin-right: 0.5rem;
}

.imghplg-container:nth-child(odd) .imghplg-imginfo  {
 order: 2;
}

.imghplg-container:nth-child(even) .imghplg-img {
 order: 2;
 margin-left: 0.5rem;
}

.imghplg-container:nth-child(even) .imghplg-imginfo {
 order: 1;
}

.imghplg-extra {
	padding: 1.0 rem;
}

/* Modal handling: https://www.w3schools.com/howto/howto_css_modal_images.asp */
.imghplg-image {
   border-radius: 5px;
   cursor: pointer;
   transition: 0.3s;
 }
 
 .imghplg-image:hover {opacity: 0.7;}
 
 /* The Modal (background) */
 .imghplg-modal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 10; /* Sit on top - has to be larger than 5 due to an element in the top of the template*/
   padding-top: 20px; /* 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.9); /* Black w/ opacity */
 }
 
 /* Modal Content (image) */
 .imghplg-modal-content {
   margin: auto;
   display: block;
   width: 80%;
   height: auto;
   max-width: 1400px;
 }
 
 /* Caption of Modal Image */
 #imghplg-caption {
   margin: auto;
   display: block;
   width: 80%;
   max-width: 1400px;
   text-align: center;
   color: #ccc;
   padding: 10px 0;
   height: 150px;
 }
 
 /* Add Animation */
 .imghplg-modal-content, #imghplg-caption {  
   -webkit-animation-name: zoom;
   -webkit-animation-duration: 0.6s;
   animation-name: zoom;
   animation-duration: 0.6s;
 }
 
 @-webkit-keyframes zoom {
   from {-webkit-transform:scale(0)} 
   to {-webkit-transform:scale(1)}
 }
 
 @keyframes zoom {
   from {transform:scale(0)} 
   to {transform:scale(1)}
 }
 
 /* The Close Button */
 .imghplg-close {
   position: absolute;
   top: 15px;
   right: 35px;
   color: #f1f1f1;
   font-size: 40px;
   font-weight: bold;
   transition: 0.3s;
 }
 
 .imghplg-close:hover,
 .imghplg-close:focus {
   color: #bbb;
   text-decoration: none;
   cursor: pointer;
 }
 
 /* 100% Image Width on Smaller Screens */
 @media only screen and (max-width: 700px){
   .modal-content {
     width: 100%;
   }
 }