@charset "UTF-8";
/* CSS Document */


*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
}

.container {
  display: flex;
  align-items: center;
  height: 11.11vh;
  width: 100vw;
  overflow: hidden;
}

#bg-strip1 {
	background-image: url("sample_background-strip1.jpg");

}
#bg-strip2 {
	background-image: url("sample_background-strip2.jpg");

}
#bg-strip3 {
	background-image: url("sample_background-strip3.jpg");

}
#bg-strip4 {
	background-image: url("sample_background-strip4.jpg");

}
#bg-strip5 {
	background-image: url("sample_background-strip5.jpg");

}
#bg-strip6 {
	background-image: url("sample_background-strip6.jpg");

}
#bg-strip7 {
	background-image: url("sample_background-strip7.jpg");

}
#bg-strip8 {
	background-image: url("sample_background-strip8.jpg");

}
#bg-strip9 {
	background-image: url("sample_background-strip9.jpg");

}
.scroll-parent {
  position: relative;
  width: 100vw;
  height: 20rem;
	margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.tile {
	width: 240px;
	height: 240px;
}

.tile > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.color0 {
	background-color: darksalmon;
}
.color1 {
	background-color: aqua;
}
.color2 {
	background-color: azure;
}
.color3 {
	background-color: antiquewhite;
}
.color4 {
	background-color: lemonchiffon;
}
.color1 {
	background-color: pink;
}
.color5 {
	background-color: cadetblue;
}
.color6 {
	background-color: burlywood;
}
.color7 {
	background-color: darkgray;
}
.color8 {
	background-color: darkcyan;
}
.color9 {
	background-color: darkkhaki;
}
.bg-color-none {
}

.scroll-element {
  width: inherit;
  height: inherit;
  position: absolute;
  left: 0%;
  top: 0%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

/* .scroll-element img {
  width: 15%;
} */

.primary {
  animation: primary 60s linear infinite; 
}

.secondary {
  animation: secondary 60s linear infinite; 
}

.larger-tile-container {
	width: 100vw;
	height: 100vh;
    overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	float: left;
}

.larger-scroll-parent {
  width: 100vw;
  height: 20rem;
	margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.larger-scroll-element {
  width: inherit;
  height: inherit;
  position: absolute;
  left: 0%;
  top: 0%;
  align-items: center;
  justify-content: space-around;
	float: left;
}

.larger-tile1 {
	width: 720px;
	height: 720px;
	position: relative;
	top: 240px;
	left: 240px;
	margin-left: 0;
}

.larger-tile2 {
	width: 480px;
	height: 480px;
	position: relative;
	top: -240px;
	margin-left: 1920px;
}

.larger-tile3 {
	width: 720px;
	height: 480px;
	position: relative;
	top: 0;
	margin-left: 960px;
}

.larger-tile4 {
	width: 720px;
	height: 720px;
	position: relative;
	top: -960px;
	margin-left: 2880px;
}

.larger-tile5 {
	width: 720px;
	height: 480px;
	position: relative;
	top: -720px;
	margin-left: 3360px;
}

.front1 > img, .front2 > img, .front3 > img, .front4 > img, .front5 > img, .back1 > img, .back2 > img, .back3 > img, .back4 > img, .back5 > img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

@keyframes primary {
  from {
    left: 0%;
  }
  to {
    left: -100%;
  }
}

@keyframes secondary {
  from {
    left: 100%;
  }
  to {
    left: 0%;
  }
}


/* entire container, keeps perspective */
.flip-container1, .flip-container2, .flip-container3, .flip-container4, .flip-container5 {
perspective: 1000;
}

/* flip the pane when hovered */


.flip-container1, .front1, .back1, .flip-container4, .front4, .back4 {
width: 720px;
height: 720px;
}

.flip-container2, .front2, .back2 {
width: 480px;
height: 480px;
}

.flip-container3, .front3, .back3, .flip-container5, .front5, .back5 {
width: 720px;
height: 480px;
}

/* flip speed goes here */
.flipper1, .flipper2, .flipper3, .flipper4, .flipper5 {
transform-style: preserve-3d;

position: relative;
}

/* hide back of pane during swap */
.front1, .back1, .front2, .back2, .front3, .back3, .front4, .back4, .front5, .back5 {
backface-visibility: hidden;

position: absolute;
top: 0;
left: 0;
}

/* front pane, placed above back */
.front1, .front2, .front3, .front4, .front5 {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back1, .back2, .back3, .back4, .back5 {
transform: rotateY(180deg);
}


@keyframes flip {
  from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
	54% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
    58% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
  to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}

.flipper1 {
	animation: flip 10s 5s infinite alternate;
/*	animation-duration: 5s;
	animation-direction: alternate;
	animation-delay: 3s;
	animation-iteration-count: infinite;
	animation-fill-mode: both; */
}

.flipper2 {
	animation: flip 30s 7s infinite alternate;
}

.flipper3 {
	animation: flip 15s 5s infinite alternate;
}

.flipper4 {
	animation: flip 10s 3s infinite alternate;
}
.flipper5 {
	animation: flip 10s 1s infinite alternate;
}