﻿/*------------------------------------------------------------------
[1. Main navigation ]
--------------------------------------------------------------------*/

nav.main-nav {
	text-align:center;
	position:fixed;
	top:0;
	left:0;
	background-color: #205377;
	width:100%;
	height:40px;
	padding:0;
}

nav.main-nav a{
	border-right:0px solid #ccc;
	padding:10px 20px;
	line-height: 40px;
	font-size:24px;
}
nav.main-nav a > span {
	color: #fff;
	font-size: 12px;
	display: inline;
}

nav.main-nav .fa{
	font-size:28px;
	color:#ccc;
	line-height:40px;
}

nav.main-nav a:hover .fa, nav.main a.active .fa{
	color:#fff;
}


nav.main-nav .language-selection {
	padding-top: 3px;
	float: right;
}


@media (min-width: 64em) {

	nav.main-nav a{
		padding:10px 30px;
		line-height:60px;
	}


	nav.main-nav {
		height:60px;
	}

	nav.main-nav .language-selection {
		padding-top: 12px;
	}

}

@media (max-width: 335px) {

	nav.main-nav .fa {
		font-size: 24px;
	}
	nav.main-nav a {
		padding: 10px 15px;
	}

}




.antwoorden input {
	display: none;
}
.antwoorden-multiple li:before {
	content: "\f096";
}
.antwoorden-multiple li.selected:before {
	content: "\f046";
}
.homepage-action.intro img {
	position: static;
	margin-top: -50px;
}

.slide-container {
	margin-top: 20px;
	height: 560px;
}
.slider-arrow {
	padding-top: 280px;
}
.slide {
	padding: 0px;
}

.slide-navigation .previous {
	float: left;
	margin-left: 20px;
}
.slide-navigation .next {
	float: right;
	margin-right: 20px;
}

.current-category-name {
	padding-top: 0px;
	font-size: 1.5rem;
}

.categories-wrapper {
	padding: 0px;
}

.category-name {
	font-size: 1rem;
	color: #fff;
}

.category-thumbs li.invisible-slide {
	width: 220px;
	background: none;
}

.category-thumbs {
	background-color: #aaa;
	padding: 5px;
	height: 160px;
	text-align: center;
	margin: 0px;
	margin-bottom: 20px;

}

.category-thumbs li {
	display: inline-block;
	margin: 5px;
}

.category-thumbs li.category-slide {
	width: 220px;
	height: 120px;
	opacity: 0.85;
	padding: 10px;
	background-color: #fff;
	cursor: pointer;
	display: inline-block;
	margin: 5px;
}

.category-thumbs li.selected-category {
	box-shadow: 0px 0px 15px #222;
	opacity: 1;
	height: 140px;
}
.category-thumbs img {

}

.category-thumbs .nav {
	padding-top: 50px;
	margin-top: 0px;
	background: none;
	color: #fff;
	font-size: 1.5rem;
	opacity: 0.5;
	cursor: default;
}
.category-thumbs .nav-enabled {
	opacity: 1;
}

.progress-dots-wrapper {
	padding: 0px;
}
.progress-dots {
	margin: 0px;
	list-style-type: none;
	background-color: #555;
	padding: 10px 0px;
}
.progress-dots li {
	color: #fff;
	font-size: 1.5rem;
	display: inline-block;
}
.progress-dots .dot {
	position: relative;
	color: #aaa;
}
.progress-dots .dot:before {
	content: "\f111";
}
.progress-dots .dot.current {
	color: #fff;
}
.progress-dots .dot.current:before {
	content: "\f111";
}
.progress-dots .dot.completed {
	color: #f8b033;
}
.progress-dots .dot.completed:before {
	/*content: "\f058";*/
}

.progress-dots .bar {
	position: relative;
	background-color: #aaa;
	top: 14px;
	width: 50%;
	height: 4px;
	display: inline-block;
	float: left;
}
.progress-dots .bar.current {
	background-color: #fff;
}

.progress-dots .bar.completed {
	background-color: #f8b033;
}
.progress-dots .bar.hidden {
	opacity: 0;
}



@media (min-width: 40em) {
	.homepage-action.intro img {
		position: static;
		margin-top: -25px;
	}
}

