.square {
    width: 360px;
    height: 500px; 
    margin: 20px;
    padding: 30px;
    transition: padding 300ms ease;
}

.square-animation > img {
  scale: 1.0;
  transition: scale 300ms ease;
}

.square-animation:hover > img {
  scale: 1.1;
}

@media (prefers-reduced-motion: no-preference) {
    .square-animation {
      animation: wipe-enter 1s 1;
    }
}

@keyframes wipe-enter {
	0% {
		transform: scale(0, .025);
	}
	50% {
		transform: scale(1, .025);
	}
}

@media (prefers-reduced-motion: no-preference) {
    .square {
      animation-name: wipe-enter;
      animation-duration: 1s;
      animation-iteration-count: 1;
    }
  }

  .parallax {
    /*background-image: linear-gradient(rgba(119, 176, 170, 0.7), rgba(55, 195, 174, 0.35)), url("/media/images/DJI_0638_3_sepia.original.jpg");*/
    background-image: url("/media/images/DJI_0638_3_sw.original.jpg");
    background-image: url("/media/images/DJI_0651_sw.original.jpg");
    /*min-height: 500px;*/
    //height: 100%;
    background-attachment: fixed;
    background-position: start;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .left-video, .center-video, .right-video {
    opacity: 1.0;
    transition: all 400ms ease-in-out;
  }

  .center-video {
    z-index: 9;
  }

  .hidden-video {
    opacity: 0.0;
    transition: all 800ms ease-in-out;
  }

  .left-video, .right-video {
    scale: 0.7;
    z-index: 1;
  }

  @media only screen and (max-width: 800px) {
    .square {
      width: 280px;
      height: 400px; 
      margin: 10px;
    }

    .square img {
      width: 200px;
      height: 200px; 
    }

    .construction_pic {
      width: 100px;
    }
  }