html, body {
    background-color:white;
    min-height: 100%;
    font-weight: 300;
    line-height: 1.5;
    margin:auto;
  }

  header {
    padding: 20px 0;
  }
  
  header .row,
  footer .row {
    display: flex;
    align-items: center;
  }

  header p {
    padding: 0 20px;
    margin: 0;
  }

h1 {
    color: black;
}

h2{
    font-size: 35px;
    color: chartreuse;
    font-family: Impact, Charcoal, sans-serif;
    line-height: 30px;
    margin-left: 15;
}

h3{
    font-size:28px;
    color: black;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    margin-left:15;
    }

p{
    font-size: 20px;
    margin-left: 15;
}

p2{
    font-size:30px; 
    font-family:Impact, Charcoal, Sans-Serif;
    margin-left:15px;
    }

p3{
    font-size:18px; 
    color:black;
    }
p4{
  font-size:18px;
  font-family:Impact;
  font-weight: lighter;
}

p.ex1{
  max-width:60%;
}    

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.past-exhibitions{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
        
}

.exhibition-poster{
    margin: 20px;
        }

section .row img {
    margin: 0 0 30px;
    width: 100%;
}

.gallery {
  display: grid;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 17vw);
  grid-gap: 15px;
  }

  .container {
    font-size: 23px;
    font-weight: 600;
    margin-top: 30;
    margin-left: auto;
    margin-right: auto;
  }
  
  
  .close:hover,
  .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
  }

  .side {
    flex: 30%;
    padding: 20px;
  }
  
  /* Main column */
  .main {
    flex: 70%;
    background-color: white;
    padding: 20px;
  }

  @media only screen and (max-width: 1800px){
    .column{
      flex:80%;
      max-width:70%;
      }

    .vidswap{
      flex:50%;
      max-width:50%;
      min-width:50%;
      }
     .pandemicimg{
       flex:60%;
       max-width:50%;
     } 
     .veniceAge{
      flex: 80%;
      min-width:50%;
      max-width:70%;
      min-height:55%;
    }
    .licks{
      flex:40%;
      max-width:30%;
    }

  }
  .licks2{
    flex:40%;
    max-width:80%;
  }
    .bright{
      flex: 100%;
      min-width:30%;
      max-width:30%;
    }
  
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 768px){
    .modal-content {
      width: 100%;
    }
    .column {
      flex: 100%;
      min-width:90%;
      max-width:90%;
    }
    .vidswap{
      flex:90%;
      max-width:100%;
      max-height:20%; 
    }
    .pandemicimg{
      flex:100%;
      min-width:90%;
      max-width:90%;
    }
    .veniceAge{
      flex: 100%;
      min-width:90%;
      max-width:90%;
    }
    .licks{
      flex: 100%;
      min-width:90%;
      max-width:90%;
    }
    .licks2{
      flex: 100%;
      min-width:90%;
      max-width:90%;
    }
    .bright{
      flex: 100%;
      min-width:90%;
      max-width:90%;
    }
  }


  /* Slideshow container */
  
.button {
transition-duration: 0.4s;
font-size: 24px;
color: white;
display: block;
margin-left: auto;
margin-right: auto;
margin-block-start: 10px;
width: 80%;
}

.button:hover {
background-color:  chartreuse;
color: white;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

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

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

/* 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);
}

/* Caption text */
.text {
color:chartreuse;
font-size: 20px;
padding: 8px 12px;
position: absolute;
bottom:20px;
width: 100%;
text-align: center;
font-family:Impact;
}
.mySlides {
display:none;
}
.active-slide {
display:block;
}
/* Number text (1/3 etc) */
.numbertext {
color: RGB(50,50,50);
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* The dots/bullets/indicators */
/* .dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: rgb(92, 88, 88);
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active, .dot:hover {
background-color: #717171;
}

/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: .5s;
animation-name: fade;
animation-duration: 10000s;
}

@-webkit-keyframes fade {
from {opacity: 1}
to {opacity: 1}
}

@keyframes fade {
from {opacity: 1}
to {opacity: 1}
}


.as-console-row { display: table-row; font-family: monospace; font-size: 13px; }
.as-console-row:after { display: table-cell; padding: 3px 6px; color: rgba(0,0,0,.35); border: 1px solid #ccc; content: attr(data-date); vertical-align: top; }
.as-console-row + .as-console-row > * { border: 1px solid #ccc; }
.as-console-row-code { width: 100%; white-space: pre-wrap; padding: 3px 5px; display: table-cell; font-family: monospace; font-size: 13px; vertical-align: middle; }
.as-console-error:before { content: 'Error: '; color: #f00; }
.as-console-assert:before { content: 'Assertion failed: '; color: #f00; }
.as-console-info:before { content: 'Info: '; color: #00f; }
.as-console-warning:before { content: 'Warning: '; color: #e90 }
@-webkit-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@-moz-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@-ms-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
.as-console-row-code, .as-console-row:after { -webkit-animation: flash 1s; -moz-animation: flash 1s; -ms-animation: flash 1s; animation: flash 1s; }

.responsive {
  width: 100%;
  height: auto;
}


<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background-color: RGB(50,50,50);
  color: chartreuse;
  font-family:Impact;
  font-size:20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  width: 65px;
  border-style: solid;
  border-color: red;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  bottom: 0;
  right: 15px;
  z-index: 9;
  font-family:Impact;
  width:100%;
}

/* Add styles to the form container */
.form-container {
  max-width: 100%;
  padding: 10px;
  background-color: white;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  font-family:sans-serif;
  font-size:15px;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  background-color: chartreuse;
  font-size:20px;
  font-family:Impact;
  color: RGB(50,50,50);
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
  font-family:Impact;
  color:RGB(50,50,50);
  font-size:20px;
  width:50%;

}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}