/*
 * Page specific styles
 *
 * @author Rogier van der Linde <rogier.vanderlinde@kahosl.be>
 */


/* submenu, mosaic */

#submenu.mosaic span {
	color: black;
	opacity: 0;
	text-decoration: none;
	overflow: hidden;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	text-transform: uppercase;
} 

#submenu.mosaic a {
	font-size: 1.1rem;
} 

#submenu.mosaic a:hover span, #submenu.mosaic a:focus span, #submenu.mosaic li.selected span {
	opacity: 1;
  	-webkit-transition: all 0.1s ease-in-out;
} 

#submenu.mosaic img {
	width: 100%;
}

#submenu.mosaic li a:hover img, #submenu.mosaic li a:focus img, #submenu.mosaic li.selected img {
	visibility: hidden;
}

/* panel */

div.col {
	width: 31%;
	float: left;
}

div.col + div.col {
	margin-left: 3%;
}

div.out {
	position: relative;
}

.panel {
	position: absolute;
	left: 0;
	right: 0;
	overflow: hidden;
}

#submenu {
	position: relative;
	width: 100%;
	left: 0;
	background-color: white;
	z-index: 1;
	margin-left: 0;
	padding-left: 0;
}

#submenu li {
	float: none;
	width: 100%;
	padding-top: 100%;
	margin-bottom: 9%;
}


.restore {
	margin-bottom: 2rem;
	display: none;
}

.restore a {
	text-decoration: none;
	color: black;
	text-transform: uppercase;
	font-family: Roboto;
	font-size: 1.2rem;
}

.project {
	position: relative;
	margin-left: 3.5%;
	z-index: 10;
	display: none;
}

/* project content */

h3 {
	font-family: RobotoBold;
	font-size: 2rem;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}
h3 + p {
	font-family: Roboto;
	font-size: 1.5rem;
	text-transform: uppercase;
}

.project {
	display: none;
}

.project header {
	margin-bottom: 3rem;
}

.photo .desc {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
	text-align: justify;
}

.photo img {
	max-width: 100%;
	max-height: 44.7rem;
	margin-bottom: 3rem;
}

.photo strong {
	font-family: RobotoBold;
	font-weight: normal;
}

.restore {
	display: none;
}

/* ==========================================================================
   Media queries
   ========================================================================== */

@media (min-width: 370px) {
	#submenu.mosaic a {
		font-size: 1.2rem;
	}
}	

@media (min-width: 430px) {
	#submenu.mosaic .col a {
		font-size: 1.4rem;
	}
}	

@media (min-width: 500px) {
	#submenu.mosaic .col a {
		font-size: 1.6rem;
	}
}	

@media (min-width: 600px) {
	#submenu.mosaic .col a {
		font-size: 1.8rem;
	}
}	

@media (min-width: 1000px) {
	#submenu.mosaic a span {
		font-size: 0.8rem;
	}

	#submenu.mosaic a span + span {
		font-size: 1.1rem;
	}
	.panel {
		position: static;
	}
	.restore {
		display: none;
	}
	.project {
		margin-left: 29.5%;
		display: none;
	}
	.project header {
		margin-bottom: 1.8rem;
	}
	.project {
		top: -6.6rem;
	}


}