﻿ 

.image_gallery {
  max-width: 100%; 
  position: relative;
  margin: auto;
  /*touch-action: none; */
	touch-action: pan-y !important;
  /* Hide the images by default */
  /* Controls */
  /* Next and Previous Buttons */
  /* Caption */ 
	clear: both; 
}

  .image_gallery .image_gallery_image {
    display: none; 
	}


    .image_gallery .image_gallery_image img {
        cursor: pointer;
        width: 100%;
        height: auto;
        min-height: 300px;
        max-height: 300px;
        object-fit: contain;
    }
  .image_gallery .image_gallery_controls {
    text-align: center;
    width: 98%;
	  
    /*border: 2px solid #000;
    border-radius: 20px;*/
    padding: 10px 1%; 
	/*background-color: #4f2683;
	border-bottom: 1px solid #4f2683;*/
	}
  .image_gallery .previous, .image_gallery .next {
    cursor: pointer;
    width: auto;
    font-weight: bold;
    font-size: 35px;
    transition: 0.6s ease;
    padding: 0;
    margin: 0 auto;
	color: #4f2683;
	}

    .image_gallery .previous:hover, .image_gallery .next:hover {
      background-color: #4f2683;
      color: #fff !important; 
	  text-decoration: none;
	}


  .image_gallery .next {
    float: right; }
  .image_gallery .previous {
    float: left; }
  .image_gallery .caption {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center; }
  .image_gallery .image_gallery_indicator {
    cursor: pointer;
    height: 5px;
    width: 150px;
    margin: 0 2px;
    background-color: #bbb; }
    .image_gallery .image_gallery_indicator:hover {
      background-color: #000; }
  .image_gallery .active {
    background-color: #000; }
  .image_gallery .image_gallery_thumbnail_indicator {
    cursor: pointer;
    margin: 2px;
    padding: 2px;
    display: inline-block; }

    .image_gallery .image_gallery_thumbnail_indicator img {
        /*max-height: 50px;
      min-height: 50px; width: 23%;  */
        max-width: 50px;
        min-width: 50px;
        max-height: 40px;
    }

.image_gallery .image_gallery_thumbnail_indicator:hover {
      background-color: #000; 
}

  .image_gallery .image_modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.8);
    margin: 0 auto; }
.image_gallery .image_modal .modal_content {
	background-color: #FFF;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #888;
    width: 60%; 
}




      .image_gallery .image_modal .modal_content .modal_header {
        padding-bottom: 10px; }

.modal_content {
	position: relative;
}
.image_gallery .image_modal .modal_content .modal_header .close {
	color: #FFF;
	float: right;
	font-size: 28px;
	font-weight: bold; 
	background-color: #4f2683;
	padding: 0 20px;
	position: absolute;
	top: 0;
	right: 0;

}
.image_gallery .image_modal .modal_content .modal_header .close:hover, .image_gallery .image_modal .modal_content .modal_header .close:focus {
	color: #FFF;
	background-color: #000;
	text-decoration: none;
	cursor: pointer; 
}
      .image_gallery .image_modal .modal_content .modal_body {
        padding: 2px 16px; }
        .image_gallery .image_modal .modal_content .modal_body .image_gallery_modal_image {
          display: none; }
            .image_gallery .image_modal .modal_content .modal_body .image_gallery_modal_image img {
                max-height: 600px;
                min-height: 600px;
                object-fit: contain;
                width: 100%;
                /*width: calc(100vh-100px);*/
            }
      .image_gallery .image_modal .modal_content .modal_footer {
        text-align: center;
        /* Controls */
        /* Next and Previous Buttons */ }
        .image_gallery .image_modal .modal_content .modal_footer .image_gallery_modal_controls {
          text-align: center;
          width: 100%;
          border: 2px solid #000;
          border-radius: 20px;
          padding: 10px; }
.image_gallery .image_modal .modal_content .modal_footer .previous_modal, .image_gallery .image_modal .modal_content .modal_footer .next_modal {
	cursor: pointer;
	width: auto;
	font-weight: bold;
	font-size: 50px;
	transition: 0.6s ease;
	padding: 0;
	margin: 0 auto; 
	color: #4f2683;
}
.image_gallery .image_modal .modal_content .modal_footer .previous_modal:hover, .image_gallery .image_modal .modal_content .modal_footer .next_modal:hover {
	background-color: #4f2683;
	color: #fff !important; 
	text-decoration: none;
}


        .image_gallery .image_modal .modal_content .modal_footer .next_modal {
          float: right; }
        .image_gallery .image_modal .modal_content .modal_footer .previous_modal {
          float: left; }
        .image_gallery .image_modal .modal_content .modal_footer .image_gallery_modal_thumbnail_indicator {
          cursor: pointer;
          margin: 2px;
          padding: 2px;
          display: inline-block; }
            .image_gallery .image_modal .modal_content .modal_footer .image_gallery_modal_thumbnail_indicator img {
                max-height: 100px;
                min-height: 100px;
                max-width: 110px;
                min-width: 110px;
            }
          .image_gallery .image_modal .modal_content .modal_footer .image_gallery_modal_thumbnail_indicator:hover {
            background-color: #000; }






@media screen and (max-width: 480px) {
	.image_gallery .image_modal .modal_content {  
    width: 90%;  
	padding: 2%;	
	}
}




