* {
         box-sizing: border-box;
         }

         .row > .column {
         padding: 0 8px;
         }

         .row:after {
         content: "";
         display: table;
         clear: both;
         }

         .column {
         float: left;
         width: 33%;
         height: 300px;
         margin-bottom: 20px;
         }

         /* The Modal (background) */
         .mymodal {
         display: none;
         position: fixed;
         z-index: 1;
         padding-top: 50px;
         left: 0;
         top: 0;
         bottom: 0;
         right: 0;
         width: 100%;
         height: 100%;
         overflow: auto;
         /* background-color: rgba(210, 37, 37, 0.8); */
         background-color: rgba(0, 0, 0, 0.8);
         }

         /* Modal Content */
         .slider-modal-content {
         position: relative;
         /* background-color: blue; */
         margin: auto;
         padding: 0;
         width: auto;
         max-width: auto;
        
         }

         /* The Close Button */
         .close {
         
         position: absolute;
         
         top: 10px;
         right: 25px;
         font-size:50px;
         font-weight: bold;
         }

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

         .mySlides {
         display: none;
         /* background-color: rgb(97, 75, 75); */
         /* background-color: rgba(0, 0, 0, 0.8); */

         height: 100vh;
         position: relative;
         top: 0;
            
         }
         
         .mySlides img {
             width: auto;
	         height: 96vh;
	         object-fit: cover;
         }
         .cursor {
         cursor: pointer;
         }

         /* Next & previous buttons */
         .prev,
         .next {
         cursor: pointer;
         position: absolute;
         top: 50%;
         width: auto;
         padding: 16px;
         margin-top: -50px;
         color: white;
         font-weight: bold;
         font-size: 20px;
         transition: 0.6s ease;
         border-radius: 0 3px 3px 0;
         user-select: none;
         -webkit-user-select: none;
         background-color: white;
         }

         /* Position the "next button" to the right */
         .next {
         right: 0;
         border-radius: 3px 0 0 3px;

          background-color: white;
         }

         /* On hover, add a black background color with a little bit see-through */
         .prev:hover,
         .next:hover
         {
          background-color: rgba(0, 0, 0, 0.8);
         }

         /* 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: black;
         padding: 2px 16px;
         color: white;
         }

         .demo {
         opacity: 0.6;
         }
         .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);
         }
         .g-row {
         display: -ms-flexbox; /* IE10 */
         display: flex;
         -ms-flex-wrap: wrap; /* IE10 */
         flex-wrap: wrap;
         padding: 0 4px;
         width: 90%;
         margin:auto;
         }
         /* Create four equal columns that sits next to each other */
         .g-column {
         -ms-flex: 25%; /* IE10 */
         flex: 25%;
         max-width: 25%;
         padding: 0 4px;
         }
         .g-column img {
         margin-top: 8px;
         vertical-align: middle;
         width: 100%;
         }
         /* Responsive layout - makes a two column-layout instead of four columns */
         @media screen and (max-width: 800px) {
         .g-column {
         -ms-flex: 50%;
         flex: 50%;
         max-width: 50%;
         }
         }

         /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
         @media screen and (max-width: 600px) {
         .g-column {
         -ms-flex: 100%;
         flex: 100%;
         max-width: 100%;

             }
         }

         @media only screen and (max-width: 479px){
            img{
                object-fit: contain;
                width: 100vw;
            }
         }