@media (min-width: 600px) {
	#logo {
		margin-top: 3%;
	}
	
	#logo img {
		width:60%;
	}
	
	figure {
		opacity: 0.7;
		transform: rotateY(30deg);
		transition: transform .5s, opacity 1s;
	}

	figure:hover {
		transform: rotateY(0deg);
		opacity: 1;
	}

	#waves {
		font-size: 2.4em;
		margin-top: 1%;
	}

	#logo, #waves {
		width: auto;
		margin-left: auto;
		margin-right: auto;
		background-color:rgba(38, 72, 152, 0.65);
		border: 1px solid #777;
		border-radius: .2em;
	}
	
	#sell, #social {
		margin-top: 3%;
	}
	
	:root {
		--cols:16;
	}
	
	[id^="arrow-col"] {
		background-size: 60% 30%;		
	}
	
	#arrow-col10 {
	background-image: url("../resources/layout_images/arrow-single2.gif"); 	
	animation-direction: alternate;		
	}
	
	#arrow-col13 {
		background-image: url("../resources/layout_images/arrow-reverse.gif"); 
		animation-direction: alternate-reverse;		
	}
	
	#arrow-col14, #arrow-col15, #arrow-col16 {
		display: block;
	}

}

@media (min-width: 1000px) {
	#logo {
		margin-top: 1%;
		background-color:rgba(38, 72, 152, 0.85);
		border: 1px solid #777;
		border-radius: .2em;
	}

	#logo img {
		width:50%;
	}

	#waves {
		font-size: 3em;
		background-color:rgba(38, 72, 152, 0.85);
		border: 1px solid #777;
		border-radius: .2em;
	}
	
	#sell, #social {
		margin-top: 1%;
	}

	:root {
		--cols:19;
	}
	
	[id^="arrow-col"] {
		background-size: 40% 30%;		
	}
	
	#arrow-col13 {
	background-image: url("../resources/layout_images/arrow-single.gif"); 	
	animation-direction: alternate;		
	}
	
	#arrow-col15 {
		background-image: url("../resources/layout_images/arrow-reverse.gif"); 
		animation-direction: alternate-reverse;		
	}
	
	#arrow-col17, #arrow-col18, #arrow-col19 {
		display: block;
	}

}