/*Changes the main page Carousel Caption to have Gradient background*/
.carousel-caption{
  width:100%;
  height:100%;
  
  padding-top:5%;

  left:0;
  right:0;
  bottom:0;
  
  
  

	/* fallback for old browsers */
	background: #000000;

	/* Chrome 10-25, Safari 5.1-6 */
	background: -webkit-linear-gradient(to top, rgba(89, 89, 89, 0), rgba(0, 0, 0, 0.7));

	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	background: linear-gradient(to top, rgba(89, 89, 89, 0), rgba(0, 0, 0, 0.7))
		
}

#carouselSpacer{
	width:100%;
	/*height:100%;*/
	/*margin-top:70%;*/
}

#carouselContent{
	width:100%;
	height:30%;
	/*margin-top:50%;*/
}
/*Carousel Background End*/



#projectGalleryRow{
	/*height:240px;*/
}

.flex-container{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}



/*Responsive Gallery CSS - Start*/
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 8px;
  margin: 3px;
  text-align: center;
}

.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) {
  .column {
    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) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
/*Responsive Gallery CSS - End*/




/*		###FLIP CARDS###		*/
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 260px;
  height: 400px;
  /* border: 1px solid #f1f1f1; */
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color:#ff8c1a;
  color: black;
  /*z-index:-1;*/
}

/* Style the back side */
.flip-card-back {
  background-color:grey;
  color: white;
  transform: rotateY(180deg);
}
/*		###FLIP CARDS - END###		*/