body {
	  font-family: 'Source Sans Pro', sans-serif;
	}
	
	#gridGallery {
	  max-width: 1170px;
	  margin-left: auto;
	  margin-right: auto;
	}
	
	h2,
	.ms-WPBody h2 {
	  color: #000;
	}
	
	.box h3 {
	  color: #fff;
	  font-family: 'Source Sans Pro';
    font-weight:700;
	}
	
	section {
	  margin: 25px 0;
	}
	
	#gridGallery .row {
	  background-color: black;
	}
	
	.box {
	  background-position: center center;
	  background-size: cover;
	  border: 1px solid #fff;
	  transition: opacity .25s;
	  overflow: hidden;
	}
	
	.hiddenText {
	  display: none !important;
	}
	
	.box:hover {
	  cursor: pointer;
	  z-index: 1;
	}
	
	#boxOne,
	#boxTwo,
	#boxSeven,
	#boxEight {
	  height: 300px;
	}
	
	#boxThree,
	#boxFour,
	#boxFive,
	#boxSix {
	  height: 150px;
	}
	
	#boxOne {
	  background-image: url('http://www.ucdenver.edu/SiteCollectionImages/GridGallery/imageOne.jpg');
	}
	
	#boxEight {
	  background-image: url('http://www.ucdenver.edu/SiteCollectionImages/GridGallery/imageEight.jpg');
	}
	
	#boxTwo {
	  background-image: url('http://www.ucdenver.edu/SiteCollectionImages/GridGallery/imageTwo.jpg');
	}
	
	#boxSeven {
	  background-image: url('http://www.ucdenver.edu/SiteCollectionImages/GridGallery/imageSeven.jpg');
	}
	
	#boxThree {
	  background-image: url('http://www.ucdenver.edu/SiteCollectionImages/GridGallery/imageThree.jpg');
	}
	
	#boxSix {
	  background-image: url('http://www.ucdenver.edu/SiteCollectionImages/GridGallery/imageSix.jpg');
	}
	
	#boxFour {
	  background-image: url('http://www.ucdenver.edu/SiteCollectionImages/GridGallery/imageFour.jpg');
	}
	
	#boxFive {
	  background-image: url('http://www.ucdenver.edu/SiteCollectionImages/GridGallery/imageFive.jpg');
	}
	
	.full {
	  float: none;
	  height: 600px !important;
	  width: 1170px;
	  position: absolute;
	  z-index: 2;
	}
	
	#gridH {
	  background-color: #eee;
	  min-height: 600px;
	  margin-bottom: 50px;
	}
	
	#gridH .row {
	  margin-top: 150px;
	}
	
	#gridH .row .full {
	  margin-top: -150px;
	}
	
	.full:hover {
	  transform: scale(1);
	  box-shadow: none;
	}
	
	.opacity {
	  opacity: .8;
	}
	
	.captionBox {
	  background-color: rgba(0, 0, 0, 0.8);
	  bottom: 50px;
	  color: white;
	  left: 50px;
	  padding: 25px;
	  position: absolute;
	  opacity: 0;
	}
	
	.captionBox p {
	  font-size: 16px;
    font-weight:300;
	}
	
	.captionBox h3 {
	  margin-top: 0;
	  text-transform: uppercase;
	}
	
	.transition {
	  transition: 1s;
	}
	
	.bottomRight {
	  left: auto;
	  right: 80px;
	}
	
	.topRight {
	  left: auto;
	  right: 50px;
	  bottom: auto;
	  top: 50px;
	}
	
	.topLeft {
	  bottom: auto;
	  top: 50px;
	}
	
	.toggleIcon {
	  background-color: rgba(0, 0, 0, 0.7);
	  background-position: center center;
	  background-repeat: no-repeat;
	  background-size: 26px 26px;
	  border-radius: 3px;
	  bottom: 15px;
	  height: 36px;
	  left: -100px;
	  opacity: 0;
	  padding: 10px;
	  position: absolute;
	  width: 36px;
	}
	
	.box.full .toggleIcon {
	  background-color: rgba(0, 0, 0, 0.57);
	  background-position: center center;
	  background-repeat: no-repeat;
	  border-radius: 3px;
	  top: 26px;
	  height: 36px;
	  left: 50px;
	  opacity: 0;
	  padding: 10px;
	  position: absolute;
	  width: 36px;
	}
	
	.box:hover .toggleIcon {
	  opacity: 1;
	  left: 15px;
	  transition: all 0.25s ease 0s;
	  background-image: url('http://www.ucdenver.edu/SiteCollectionImages/GridGallery/openIcon.png');
	}
	
	.box.full .toggleIcon {
	  opacity: 1;
	  left: 50px;
	  top: 26px;
	  border-radius: 0;
	  background-image: url('http://www.ucdenver.edu/SiteCollectionImages/GridGallery/closeIcon.png');
	  background-size: 55%;
	}
	
	.box.full .toggleIcon:hover {
	  background-color: black;
	  transition: all 0s ease 0;
	}
	
	#gridGallery > .row {
	  margin: 0;
	}
	
	@media (max-width: 1200px) {
	  .full {
	    width: 970px;
	  }
	}
	
	@media (max-width: 992px) {
	  .full {
	    width: 750px;
	  }
	}
	
	@media (max-width: 768px) {
	  #boxThree,
	  #boxFour,
	  #boxFive,
	  #boxSix {
	    height: 300px;
	  }
	  .toggleIcon {
	    display: none;
	  }
	  .full .captionBox {
	    bottom: 0;
	    left: 0;
	    position: absolute;
	    width: 100%;
	    padding: 10px;
	  }
	  .full .captionBox p {
	    display: none;
	  }
	  .full .captionBox h3 {
	    margin-bottom: 0;
	  }
	  .box.full {
	    height: inherit;
	    width: 100%;
	  }
	  .box {
	    max-height: 150px !important;
	  }
	  #gridGallery .row {
	    background-color: transparent;
	  }
	  #gridH .row {
	    margin-top: 0px;
	  }
	  .box.full .toggleIcon {
	    height: 50px !important;
	    left: 0 !important;
	    top: 0 !important;
	    width: 50px !important;
	    display: block;
	  }
	  .mobileFunction {
	    float: left;
	    height: 150px;
	    width: 100%;
	  }
	  /* SHAREPOINT ONLY */
	}

$(document).ready(function() {

  $(".box").on("click", function() {
    $(this).siblings().toggleClass("hidden");
    $(this).toggleClass("full");
    $(".captionBox").toggleClass("hiddenText");
    $(this).children().animate({
      opacity: "1"
    }, 500, function() {});
  });

  if ($(window).width() < 768) {
    $(".box").on("click", function() {
      $("#gridGallery").toggleClass("mobileFunction");
    });
  }

  if ($(window).width() >= 768) {

    $(".box").hover(function() {
      $(this).siblings().toggleClass("opacity");
    });

  }

  $(".horizontal").click(function() {
    $(this).toggleClass("full");
    $(".captionBox").toggleClass("hiddenText");
    $(this).children().animate({
      opacity: "1"
    }, 500, function() {});
  });

  $(".horizontal").hover(function() {
    $(this).siblings().toggleClass("opacity");
  });

});