.u-section-1 {
  background-image: linear-gradient(0deg, rgba(255,255,255,0.65), rgba(255,255,255,0.65)), url("images/schoolbg.jpg");
  background-position: 50% 50%;
}

.u-section-1 .u-sheet-1 {
  min-height: 410px;
}

.u-section-1 .u-text-1 {
  --animation-custom_in-translate_x: 0px;
  --animation-custom_in-translate_y: -300px;
  --animation-custom_in-opacity: 0;
  --animation-custom_in-rotate: 0deg;
  --animation-custom_in-scale: 1;
  font-size: 4.5rem;
  width: 733px;
  margin: 32px auto 0;
}

.u-section-1 .u-text-2 {
  --animation-custom_in-translate_x: 0px;
  --animation-custom_in-translate_y: 300px;
  --animation-custom_in-opacity: 0;
  --animation-custom_in-rotate: 0deg;
  --animation-custom_in-scale: 1;
  font-size: 2.25rem;
  font-weight: 700;
  width: 771px;
  margin: 125px auto 60px;
}

@media (max-width: 1199px) {
  .u-section-1 .u-sheet-1 {
    min-height: 338px;
  }

  .u-section-1 .u-text-1 {
    margin-left: 103px;
    margin-right: 103px;
  }
}

@media (max-width: 991px) {
  .u-section-1 .u-sheet-1 {
    min-height: 259px;
  }

  .u-section-1 .u-text-1 {
    width: 720px;
    font-size: 3.75rem;
    margin-left: auto;
    margin-right: auto;
  }

  .u-section-1 .u-text-2 {
    width: 720px;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .u-section-1 .u-sheet-1 {
    min-height: 194px;
  }

  .u-section-1 .u-text-1 {
    width: auto;
    font-size: 3rem;
    margin-left: 300px;
    margin-right: 300px;
  }

  .u-section-1 .u-text-2 {
    width: 540px;
  }
}

@media (max-width: 575px) {
  .u-section-1 .u-sheet-1 {
    min-height: 122px;
  }

  .u-section-1 .u-text-1 {
    font-size: 1.875rem;
    width: 340px;
    margin-left: auto;
    margin-right: auto;
  }

  .u-section-1 .u-text-2 {
    width: 340px;
  }
}.u-section-2 .u-sheet-1 {
  min-height: 400px;
} .u-section-3 {
  background-image: none;
}

.u-section-3 .u-sheet-1 {
  min-height: 795px;
}

.u-section-3 .u-layout-wrap-1 {
  margin-top: 170px;
  margin-bottom: 79px;
}

.u-section-3 .u-layout-cell-1 {
  min-height: 500px;
  --animation-custom_in-translate_x: 0px;
  --animation-custom_in-translate_y: 300px;
  --animation-custom_in-opacity: 0;
  --animation-custom_in-rotate: 0deg;
  --animation-custom_in-scale: 1;
}

.u-section-3 .u-container-layout-1 {
  padding: 30px 60px;
}

.u-section-3 .u-text-1 {
  margin: 0;
}

.u-section-3 .u-text-2 {
  margin: 20px 0 0;
}

.u-section-3 .u-text-3 {
  margin: 0;
}

.u-section-3 .u-text-4 {
  margin: 0;
}

.u-section-3 .u-layout-cell-2 {
  min-height: 500px;
}

.u-section-3 .u-container-layout-2 {
  padding: 20px;
}

.u-section-3 .u-map-1 {
  --animation-custom_in-translate_x: 0px;
  --animation-custom_in-translate_y: 300px;
  --animation-custom_in-opacity: 0;
  --animation-custom_in-rotate: 0deg;
  --animation-custom_in-scale: 1;
}

@media (max-width: 1199px) {
  .u-section-3 .u-sheet-1 {
    min-height: 500px;
  }
}

@media (max-width: 991px) {
  .u-section-3 .u-container-layout-1 {
    padding-left: 30px;
    padding-right: 30px;
  }

  .u-section-3 .u-container-layout-2 {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media (max-width: 767px) {
  .u-section-3 .u-sheet-1 {
    min-height: 400px;
  }

  .u-section-3 .u-layout-cell-1 {
    min-height: auto;
  }

  .u-section-3 .u-container-layout-1 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .u-section-3 .u-container-layout-2 {
    padding-left: 10px;
    padding-right: 10px;
  }
}.u-section-4 .u-sheet-1 {
  min-height: 89px;
}

html, body {
        margin: 0;
        width: 100%;
        height: 100%;
        font-family: 'Roboto', sans-serif;
        background-color: #eee;
      }

      a:link, a:visited{
        color: #bdc3c7;
      }

* {box-sizing: border-box}

/* Container needed to position the overlay. Adjust the width as needed */
.container {
  position: relative;
  z-index: 999;
  width: 50%;
  max-width: 300px;
}

/* Make the image to responsive */
.image {
  display: block;
  z-index: 999;
  width: 100%;
  height: auto;
}

/* The overlay effect - lays on top of the container and over the image */
.overlay {
  position: relative;
  z-index: 999;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

/* When you mouse over the container, fade in the overlay title */
.container:hover.overlay {
  opacity: 1;
}
}
      /*https://www.w3schools.com/howto/howto_css_image_overlay_title.asp*/
      .credit{
        position: absolute;
        text-align: center;
        width: 100%;
        padding: 20px 0;
        color: #fff;
      }

      #gallery-container {
        z-index: 999;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 20px;
      }

      .title {
        width: 100%;
        height: 80px;
        line-height: 80px;
        text-align: center;
        font-size: 24px;
      }

      #panorama-container {
        position: fixed;
        z-index: 999;
        display: flex;
        width: 100%;
        height: 100%;
        top: 0;
        background: rgba(0,0,0,0.9);
        transform: scale(0,0);
        opacity: 0;
        -webkit-transition: all 0.5s ease-out;
        transition: all 0.5s ease-out;
      }

      #panorama-container.open {
        opacity: 1;
        transform: scale(1,1);
      }
      .content_img{
 position: relative;
 width: 200px;
 height: 200px;
 float: left;
 margin-right: 10px;
}

/* Child Text Container */
.photo div{
 position: absolute;
  z-index: 999;
 bottom: 0;
 right: 0;
 background: black;
 color: white;
 margin-bottom: 5px;
 font-family: sans-serif;
 opacity: 0;
 visibility: hidden;
 -webkit-transition: visibility 0s, opacity 0.5s linear; 
 transition: visibility 0s, opacity 0.5s linear;
}

/* Hover on Parent Container */
.photo:hover{
 cursor: pointer;
}

.photo:hover div{
 width: 150px;
 padding: 8px 15px;
 visibility: visible;
 opacity: 0.7; 
}
      
      .photo {
        z-index: 999;
        flex-grow: 1;
        width: 360px;
        height: 240px;
        background-size: cover;
        margin: 65px;
        border: 0px solid #ccc;
        cursor: pointer;
      }

      .photo:hover {
        border-color: #000;
      }

      #progress-bar {
        z-index: 999;
        position: fixed;
        top: 0;
        width: 0;
        height: 5px;
        background-color: #fff;
        transition: opacity 0.5s ease;
      }

      .close {
        width: 44px;
        height: 44px;
        position: absolute;
        right: 0;
        margin: 20px;
        cursor: pointer;
      }

      .close > i {
        color: #fff;
        font-size: 44px;
      }

      #main-container {
        z-index: 999;
        width: 100%;
        height: 80%;
        align-self: center;
        background-color: #000;
      }