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


/* ==========================================================================
   General styles
   ========================================================================== */

html {
	background-color: #fff;
}

body {
	font-family: 'Roboto', sans-serif;
	max-width: 58rem;
	min-width: 22rem;
	margin: 0 auto;
	padding: 1rem;
	font-size: 1.5rem;
	line-height: 1.25;
}

img, a {
	border: 0;
	outline: 0;
}

a {
	color: black;
}

a:hover {
	color: #afafaf;
}

.right p {
	margin-bottom: 1.5rem;
}

/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
	font-family: 'Roboto';
    src: url('/frontend/core/layout/fonts/Roboto-Regular-webfont.eot');
    src: url('/frontend/core/layout/fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/frontend/core/layout/fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('/frontend/core/layout/fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('/frontend/core/layout/fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'RobotoBold';
    src: url('/frontend/core/layout/fonts/Roboto-Bold-webfont.eot');
    src: url('/frontend/core/layout/fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/frontend/core/layout/fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('/frontend/core/layout/fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('/frontend/core/layout/fonts/Roboto-Bold-webfont.svg#robotobold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'RobotoLight';
    src: url('/frontend/core/layout/fonts/Roboto-Light-webfont.eot');
    src: url('/frontend/core/layout/fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/frontend/core/layout/fonts/Roboto-Light-webfont.woff') format('woff'),
         url('/frontend/core/layout/fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('/frontend/core/layout/fonts/Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'RobotoThin';
    src: url('/frontend/core/layout/fonts/Roboto-Thin-webfont.eot');
    src: url('/frontend/core/layout/fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('/frontend/core/layout/fonts/Roboto-Thin-webfont.woff') format('woff'),
         url('/frontend/core/layout/fonts/Roboto-Thin-webfont.ttf') format('truetype'),
         url('/frontend/core/layout/fonts/Roboto-Thin-webfont.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* ==========================================================================
   Header
   ========================================================================== */

.wrapper > header {
	margin-bottom: 3rem;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

/* main menu */

#mainmenu {
	width: 100%;
	position: relative;
	padding-top: 22%;
}

#mainmenu div {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

#mainmenu img {
	width: 100%;
	height: 100%;
}

#mainmenu img.hidden {
	display: none;
}

#mainmenu ul {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
}

#mainmenu ul li {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 53%;
	list-style: none;
}

#mainmenu ul li + li {
	position: absolute;
	left: 53%;
	width: 29%;
}

#mainmenu ul li + li + li {
	position: absolute;
	left: 82%;
	width: 18%;
}

#mainmenu ul li a {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	text-indent: -100%;
	overflow: hidden;
	white-space: nowrap;
	background-image: url(/frontend/core/layout/images/bg.png);
}

/* submenu */

#submenu {
	margin-left: 3.5%;
	margin-bottom: 2rem;
}

#submenu li {
	float: left;
	width: 31.6%;
	padding-top: 31.6%;
	margin-left: 2.6%;
	margin-bottom: 2.6%;
	position: relative;
}

#submenu li.col-1 {
	margin-left: 0;
}

#submenu ul a {
  	-webkit-transition: all 0.1s ease-in-out;
	display: block;
	font-family: RobotoBold;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	text-decoration: none;
	overflow: hidden;
}

/* submenu, grid */

#submenu.grid li {
	background-image: url(/frontend/core/layout/images/nav_stoeltje.jpg);
	background-size: 100%;
	position: relative;
}

#submenu.grid li:hover a, #submenu.grid li.selected a {
	background-color: #000;
	background-color: rgba(0,0,0,0.7);
}

#submenu.grid a {
	color: white;
	font-size: 0.9rem;
	line-height: 120%;
	padding-left: 10%; 
	padding-top: 15%; 
} 

#submenu.grid.center a {
	line-height: 400%;
	text-align: center;	
	white-space: nowrap;
	margin: 0;
	padding-left: 0;
	font-size: 1.2rem;
	line-height: 1.7rem;
	padding-top: 25%; 
}

.right {
	margin-left: 3.5%;
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
	text-align: right;
	border-top: 1px solid black;
	padding-top: 1rem;
	font-size: 1.2rem;
	margin-top: 4rem;
	margin-bottom: 4rem;
	clear:both; 
	margin-left: 3.5%;
}

footer a {
	color: black;
	text-decoration: none;
}

footer a:hover, footer a:focus {
	text-decoration: underline;
}

.out footer {
	margin-left: 0; 
}

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

@media (min-width: 320px) {
	#submenu.grid a {
		font-size: 1.2rem;
	}
	#submenu.grid.center a {
		font-size: 1.6rem;
	}
	body {
		font-size: 1.8rem;
	}
}	

@media (min-width: 370px) {
	#submenu.grid a {
		font-size: 1.4rem;
	}
	#submenu.grid.center a {
		font-size: 2.2rem;
	}
	body {
		font-size: 1.5rem;
	}
}	

@media (min-width: 430px) {
	#submenu.grid a {
		font-size: 1.6rem;
	}
	#submenu.grid.center a {
		font-size: 2.2rem;
	}
}	

@media (min-width: 500px) {
	#submenu.grid a {
		font-size: 2rem;
	}
	#submenu.grid.center a {
		font-size: 2.8rem;
	}
	body {
		font-size: 1.8rem;
	}
}	

@media (min-width: 1000px) {
	#submenu.grid a {
		font-size: 0.9rem;
	}
	#submenu.grid.center a {
		font-size: 1.3rem;
	}
	.wrapper > header {
		width: 24%;
	}
	body {
		max-width: 96rem;
	}
	.content > .left {
		width: 24%;
		float: left;
		margin-right: 5.5%;
	}
	.content > .right {
		margin-left: 29.5%;
	}
	footer {
		margin-left: 29.5%;
	}
	body {
		font-size: 1.2rem;
	}

}