/* CSS stylesheet voor de crowdfunding website op academysoft.nl/CycloOnline */
/* Deze stylesheet bepaalt hoe plaatjes zich moeten gedragen op de pagina   */

.photoleft, .photoright {
	position: absolute;
	top: 0px;
	margin: 0;
	width: 20vw;
	z-index: 150;
}
.photoleft {
	right: 140%;
	text-align: right;
}
.photoright {
	left: 140%;
	text-align: left;
}
.photoleft img, .photoright img {
	max-width: 100%;
}

.tooltipleft, .tooltipright {
	position: relative;
	bottom: 22px;
	visibility: hidden;
	width: 100%;
	background: #4C5050;
	background-image: url("http://www.academysoft.nl/img/achtergrond.png");
	text-align: left;
	
}
figcaption p {
	padding: 10px;
}
.photoleft:hover .tooltipleft, .photoright:hover .tooltipright {
	visibility: visible;
}

p.contact img {
	margin-left: 10%;
	margin-right: 5px;
	vertical-align: middle;
	width: 40px;
}

.voordekunst:hover img {	
	outline: 10px solid #23e173;
	outline-offset: -10px;
}
.rewards:hover img {	
	outline: 10px solid #fff;
	outline-offset: -10px;
}

.fixedimg {
	margin: 0;
	
	position: fixed;
	max-width: 21%;
	top: calc(50vh - 10vw);
}
.fixedimg img {
	max-width: 100%;
}
.fixedleft {
	left: 2%;
}
.fixedright {
	right: 2%;
}

.countdown {
	margin-left: 30%;
	margin-top: 40px;
}

.thumb img { 
	border: 1px solid #000;
}
.thumb:hover {
	border: 0; /* IE6 needs this to show large image */
}
.popup { 
	position: fixed;
	top: 70px;
	bottom: 70px;
	right: 5vw;
	left: 5vw;
	visibility: hidden;
	text-align: left;
}
.photoleft .popup {
	left: 25vw;
}
.photoright .popup {
	right: 25vw;
}
.popup img {
	max-height: 100%;
	z-index: 999;
}
.thumb:hover + .popup { 
	visibility:visible;
}

.clothing {
	position: fixed;
	float: left;
	top: 35%;
}

.material {
	float: right;
	position: fixed;
	top: 35%;
	margin-left:-3%;
}