/************************************************
 * full page background
 */
html {
	height: 100%;
}

body {
	height: 100%;
	padding: 0;
	margin: 0;

	overflow: hidden;

	background-image: url("http://www.czirpczirp.cc/wp-content/themes/minnow-child/ocf/background-day.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-size: cover;
}

.plain {
	background-color: #555555;
}



/************************************************
 * czirp czrip
 */
 .czirpczirp {
	position: absolute;
	left: 5vh;
	top: 5vh;
}

.czirpczirp img {
	max-width: 14vw;
	height: auto;

	border-radius: 10px;
	background: #e0e0e055;
	box-shadow:  5px 5px 40px #d0d0d0aa,
	-5px -5px 40px #f0f0f0aa,
	inset 20px 20px 40px #d0d0d066,
	inset -20px -20px 40px #f0f0f066;

	z-index: 1;
}

.czirpczirp img:hover {
	cursor: pointer;
}



/************************************************
 * Oceanic Feeling
 */
 .ocf {
	position: absolute;
	right: 5vh;
	bottom: 5vh;
}

.ocf img {
	max-width: 19vw;
	height: auto;

	opacity: 0.95;

	z-index: 1;
}

.ocf img:hover {
	cursor: pointer;
}



/************************************************
 * Artists
 */
.artists {
	position: absolute;
	right: 7vh;
	top: 5vh;
}

.artists img {
	max-width: 8vw;
	height: auto;

	border-radius: 10px;
	background: #e0e0e055;
	box-shadow:  5px 5px 40px #d0d0d0aa,
	-5px -5px 40px #f0f0f0aa,
	inset 20px 20px 40px #d0d0d066,
	inset -20px -20px 40px #f0f0f066;

	z-index: 1;
}

.artists img:hover {
	cursor: pointer;
}



/************************************************
 * video coverflow
 */
#videos {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	width: 100%;

	/* fade-in animation, to give images the time to load */
	animation: fadeIn 2s;

	/* initially invisible, until the images have loaded: */
	/*visibility: hidden;*/
}

@keyframes fadeIn {
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

.coverflow {
}

.coverflow img {
	height: 50vh;
	/*box-shadow:
			0 0 30px 15px #fff,
			0 0 50px 30px #f0f,
			0 0 70px 45px #0ff;*/
	/*box-shadow: 0 0 70px 45px #55aee5;*/
	user-select: none;
}

.coverflow img:hover {
	cursor: pointer;
}



/************************************************
 * full-screen video
 */
#fullscreen-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	/*position: absolute;
	top: 5vh;
	left: 5vw;
	width: 90vw;
	height: 90vh;*/

	visibility: hidden;
	opacity: 0;

	z-index: 998;
}



/************************************************
 * back button for full-screen video
 */
 .back {
	position: absolute;
	 left: 1vh;
	 top: 1vh;
	 /*transform: translate(-50%, 0);*/

	visibility: hidden;

	z-index: 999;
}

.back img {
	width: max(3vw, 3vh);
	height: auto;
}

.back img:hover {
	cursor: pointer;
}



/************************************************
 * sponsor logos
 */
.sponsor-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4vh;
	min-height: 50px;
	/*min-height: 10vh;
	max-height: 10vh;*/

	padding: 2vh;

	background: #FFFFFF;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	align-items: center;

	z-index: 2;
}

.sponsor-bar .sponsor {
	width: auto;
	max-width: 10%;
	height: 100%;

	vertical-align: middle;

	flex: 1 1 auto;
}

.sponsor-bar .sponsor img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}