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

html { background-color: #000; } 
body {
	min-height: 100vh;
	max-width: 1325px;
	margin: 0 auto;
	background-color: white;
}


div {
	position: absolute;
	text-align: center;
	line-height: 300px;
	font-size: 3em;
	font-weight: 600;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-variant: small-caps;
}


.fallingbox {
  width: 300px;
  height: 300px;
  border: 5px solid black;
  border-radius: 25px;
  animation-fill-mode: forwards;
  box-shadow: 5px 5px 10px #888888;	
}


.box1 {
  animation-name: bottomrow;
  margin-left: 25px;
  animation-duration: 1.5s;
  background: white;
  animation-timing-function: ease-in;
	background-image: url("#");
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
}
#oc-logo {
    display: block;
    height: 295px;
    text-indent:-9999px;
    width: 295px;
}
.box2 {
  animation-name: bottomrow;
  margin-left: 350px;
  animation-duration: 2s;
  background: white;
	animation-timing-function: ease;
	background-image: url("https://www.jointventuresystems.com/images/jvs_letterlogo_512.png");
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
}
#jvs-logo {
    display: block;
    height: 295px;
    text-indent:-9999px;
    width: 295px;
}
.box3 {
  animation-name: bottomrow;
  margin-left: 675px;
  animation-duration: 1.25s;
	animation-timing-function: ease-out;
	background-image: url("https://justmattphotos.com/wp-content/uploads/2020/10/cropped-Logo_simple.png");
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
	background-color: black;
}
#jmp-logo {
    display:block;
    height:295px;
    text-indent:-9999px;
    width:295px;
}
.box4 {
  animation-name: bottomrow;
  margin-left: 1000px;
  animation-duration: 1.25s;
	animation-timing-function: ease-in;
	background-image: url("https://www.clapboard.org/wp-content/uploads/2016/07/cropped-clapboard_850-2.png");
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
	background-color: green;
}
#clapboard-logo {
    display: block;
    height: 295px;
    text-indent:-9999px;
    width: 295px;
}

.box5 {
  animation-name: toprow;
  margin-left: 25px;
  animation-duration: 1.75s;
  background: green;
	background-image: url("#");
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
}
.box6 {
  animation-name: toprow;
  margin-left: 350px;
  animation-duration: 1s;
  background: yellow;
	background-image: url("#");
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
}
#XXX-logo {
    display: block;
    height: 295px;
    text-indent:-9999px;
    width: 295px;
}
.box7 {
  animation-name: toprow;
  margin-left: 675px;
  animation-duration: 1.25s;
  background: purple;
	background-image: url("#");
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
}
.box8 {
  animation-name: toprow;
  margin-left: 1000px;
  animation-duration: 1.25s;
	animation-timing-function: ease-in;
	background-image: url("https://www.clapboard.org/wp-content/uploads/2016/07/cropped-clapboard_850-2.png");
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
	background-color: green;
}
#clapboard-logo {
    display: block;
    height: 295px;
    text-indent:-9999px;
    width: 295px;
}



.fadingbox {
	animation-name: smallboxes;
  width: 150px;
  height: 150px;
  border: 5px solid black;
  border-radius: 25px;
  animation-fill-mode: forwards;
  box-shadow: 5px 5px 10px #888888;
	line-height: normal;
	font-size: 1em;
	animation-duration: 5s;	

}
.box9 {
	margin-left: 25px;
	background-image: url("https://www.tiburonboutiquecigars.com/wp-content/uploads/2020/01/cropped-tiburon-favicon.png");
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
}
#tiburon-logo {
    display: block;
    height: 150px;
	width: 150px;
    text-indent:-9999px;
}
.box10 {
	margin-left: 213px;
	background-image: url("#");
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
}
#knight-logo {
    display: block;
    height: 150px;
	width: 150px;
    text-indent:-9999px;
}
.box11 {
	margin-left: 401px;
	background-image: url("https://www.jointventuresystems.com/images/2020/10/03/branded_temp1.jpg");
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
}
#branded-logo {
    display: block;
    height: 150px;
	width: 150px;
    text-indent:-9999px;
}
.box12 {
	margin-left: 589px;
	background-image: url("#");
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
}
#wine-logo {
    display: block;
    height: 150px;
	width: 150px;
    text-indent:-9999px;
}
.box13 {
	margin-left: 777px;
	background-image: url("https://www.wardrobesupplies.com/media/logo/stores/1/preview-lightbox-MWS_Logo_Main-01.png");
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
}
#mws-logo {
    display: block;
    height: 150px;
	width: 150px;
    text-indent:-9999px;
}
.box14 {
	margin-left: 965px;
	background-image: url("https://www.jointventuresystems.com/images/2020/10/03/brownies_temp1.jpg");
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
}
#brownie-logo {
    display: block;
    height: 150px;
	width: 150px;
    text-indent: -9999px;
}
.box15 {
	margin-left: 1153px;
}
#XXX-logo {
    display: block;
    height: 150px;
	width: 150px;
    text-indent:-9999px;
}




@keyframes bottomrow {
  from {top: 0px; margin-top: -350px;}
  to {top: 100%; margin-top: -500px;}
}

@keyframes toprow {
  from {top: 0px; margin-top: -350px;}
  to {top: 100%; margin-top: -850px;}
}
@keyframes original {
  from {top: 0px; margin-top: -350px;}
  to {top: 100%; margin-top: -325px; background-color: purple;}
}

@keyframes smallboxes {
	from {top: 100%; opacity: 0; margin-top: -175px;}
	to {top: 100%; opacity: 1; margin-top: -175px;}
}