/* all default layout for mobile */

/* animated background divs */

:root {
	--cols:13;
}

[id^="arrow-col"] {
	width: calc(100%/var(--cols));
	position: absolute;
	display: block;
	top: 0;
	height: 100%;
	z-index: -1;
	background-image: url("../resources/layout_images/arrow-single.gif"); 
	background-repeat: repeat-y;
	background-size: 80% 30%;
	background-position: 50% 60%;
	animation-name: arrow-scroll;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	opacity: 0.8;
}

[id^="arrow-col"]:nth-child(even) {
	background-image: url("../resources/layout_images/arrow-single2.gif"); 
}

#arrow-col1 {
	left: 0;
	animation-duration: 200s;
}

#arrow-col2 {
	left: calc(100%/var(--cols));
	animation-duration: 223s;
}

#arrow-col3 {
	left: calc(2*(100%/var(--cols)));
	animation-duration: 133s;
 	}

#arrow-col4 {
	left: calc(3*(100%/var(--cols)));
	animation-duration: 357s;
}

#arrow-col5 {
	left: calc(4*(100%/var(--cols)));
	animation-duration: 189s;
}

#arrow-col6 {
	left: calc(5*(100%/var(--cols)));
	animation-duration: 246s;
}

#arrow-col7 {
	left: calc(6*(100%/var(--cols)));
	animation-duration: 101s;
}

#arrow-col8 {
	left: calc(7*(100%/var(--cols)));
	animation-duration: 295s;
}

#arrow-col9 {
	left: calc(8*(100%/var(--cols)));
	animation-duration: 231s;
}

#arrow-col10 {
	background-image: url("../resources/layout_images/arrow-reverse.gif"); 
	animation-direction: alternate-reverse;
	left: calc(9*(100%/var(--cols)));
	animation-duration: 223s;
}

#arrow-col11 {
	left: calc(10*(100%/var(--cols)));
	animation-duration: 219s;
}

#arrow-col12 {
	left: calc(11*(100%/var(--cols)));
	animation-duration: 3109s;
}

#arrow-col13 {
	left: calc(12*(100%/var(--cols)));
	animation-duration: 161s;
}

#arrow-col14 {
	left: calc(13*(100%/var(--cols)));
	animation-duration: 229s;
	display: none;
}

#arrow-col15 {
	left: calc(14*(100%/var(--cols)));
	animation-duration: 118s;
	display: none;
}

#arrow-col16 {
	left: calc(15*(100%/var(--cols)));
	animation-duration: 294s;
	display: none;
}

#arrow-col17 {
	left: calc(16*(100%/var(--cols)));
	animation-duration: 229s;
	display: none;
}

#arrow-col18 {
	left: calc(17*(100%/var(--cols)));
	animation-duration: 89s;
	display: none;
}

#arrow-col19 {
	left: calc(18*(100%/var(--cols)));
	animation-duration: 311s;
	display: none;
}

@keyframes arrow-scroll {
	from{background-position: 50% 0%;}
	to{background-position: 50% 200%;}
}

@keyframes spinner {
	from {
		transform: rotateY(0deg);
		}
	to {
		transform: rotateY(-360deg);
		}
}
/* general box layout divs */

figure {
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	padding: 2px;
}

#logo {
	width: 100%;
	padding: 2%;
	position: relative;
	margin-top: 5%;
	left: 0;
	z-index: 4;
	background-color: #24448f;
}

#logo img {
	width: 80%;
}

#waves {
	padding: 2%;
	position: relative;
	left: 0;
	z-index: 4;
	background-color: #24448f;
}

#sell, #social {
	width: auto;
	min-width: 220px;
	margin-top: 5%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 8px;
	background-color:rgba(128, 128, 128, 0.5);
	border: 1px solid #777;
	border-radius: .2em;
}

#sell figure {
	width: 20%;
	min-width: 100px;
	max-width: 362px;
	padding-left: 1em;
	padding-right: 1em;
}

#sell figure img {
	width: 20%;
	min-width: 90px;
	max-width: 362px;
}

#social {
	width:100%;
	height: 5em;
	position: absolute;
	bottom: 0;
	border: none;
}

#social figure {
	padding-left: 1em;
	padding-right: 1em;
}