body{
    background: #fffffc;
	font-family: roboto_slablight, Georgia, serif;
    font-weight: normal;
}

@font-face {
    font-family: 'roboto_slablight';
    src: url('../fonts/RobotoSlab-Light-webfont.woff');
    src: url('../fonts/RobotoSlab-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/RobotoSlab-Light-webfont.woff') format('woff')
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto_condensedregular';
    src: url('../fonts/RobotoCondensed-Regular-webfont.woff');
    src: url('../fonts/RobotoCondensed-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/RobotoCondensed-Regular-webfont.woff') format('woff'),
    font-weight: normal;
    font-style: normal;
}

#head {
    background-image: url('../images/ontdekkingsreiziger_bg.jpg');
	background-repeat: no-repeat;
    background-position: left 10%; 
    height: 28em;
}

#main {
    margin-left: auto; 
    margin-right: auto;
    max-width: 1366px;
	padding-bottom: 3em;
}
#menu ul {
    font-family: roboto_condensedregular, Helvetica, Arial, sans-serif;
}

#menu ul li {
    float: left;
    display: block;
    margin: 0;
    margin-bottom: 1em;
    padding: 0;
}

#menu ul li:first-child {
	-webkit-clip-path: polygon(0 0%, 100% 0, 100% 100%, 11% 100%);
	clip-path: polygon(0 0%, 100% 0, 100% 100%, 11% 100%);
}

#menu ul li:last-child {
	-webkit-clip-path: polygon(0 0, 90% 0, 100% 82%, 0 100%);
	clip-path: polygon(0 0, 90% 0, 100% 82%, 0 100%);
}

#menu ul li a {
    padding: 16px;
    display: block;
}

#content, #index-content {
	margin-left: auto; 
    margin-right: auto;
    clear: both;
}

#content {
	width: 700px;
}

#content img.text{
	width: 966px;
	left: -133px;
	position: relative;
}

#head h1 {
    padding: 40px 0 20px 70px ;
}

#head h2 {
	padding: 0 0 0 70px;
}


h1, h2 {
    font-family: roboto_condensedregular, Helvetica, Arial, sans-serif;
    margin: 0;
	padding: 1em 0;
}

.riddle_title h2 {
	padding: 0;
}

h1 {
	padding: 0.5em 0;
}

h3 {
	font-size: 100%;
}

.answer {
    display: none;
}

.riddle {
    display: none;
}

.show {
    display: block;
}

li.riddle_title:hover {
    background-color: #ffff00; 
    cursor: pointer;
	transition: all 0.5s ease;
}

li.riddle_title {
    display: block;
    background-color: #ffffcc; 
    border: 1px solid #000;
    padding: 1ex;
    margin: 1ex;
}

li.answer_clickme {
    font-style: italic;
    background-color: #ffffcc; 
    padding: 1ex;
    margin: 1ex;
    display: none;
}

li.answer_clickme.show {
    display: block;
}

li.answer_clickme:hover {
    background-color: #ffff00; 
    cursor: pointer;
	transition: all 0.5s ease;
}

ol, ul {
    padding: 0;
	padding-left: 3ex;
    margin: 0;
}

li {
    padding-right: 2ex;
    padding-bottom: 1ex;
	line-height: 1.7;
}

li.show {
	padding-left: 2ex;
}

#menu a {
	background-color: #ffff00; 
}

#menu a:hover {
    background-color: #ffffcc; 
	transition: all 0.5s ease;
}

a {
    text-decoration: none;
    color: black;
    background-color: #ffff00; 
}

a:hover {
    color: black;
    background-color: #ffffcc; 
	transition: all 0.5s ease;
}

p {
    text-align: justify;
    padding: 0; 
    margin: 0;
    margin-top: 1ex;
	line-height: 1.7;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] 
 {
	border: 1px solid #000;
	border-radius: 4px;
	background: #ffff00;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 1em;
	font-weight: 600;
}

input[type="text"], input[type="file"], textarea, input[type="checkbox"], select {
	border-radius: 4px;
	border: 2px solid #000;
	padding: 5px;
	margin: 1ex 0;
}

input[type="text"]:focus, textarea:focus, input[type="checkbox"]:focus, select:focus {
	border: 2px solid #ff0;
}

input[type="text"], textarea {
	width: 100%;
}

input[type="file"] {
	background: #ff0;
}

textarea {
  height: 40ex;
  padding: 12px 20px;
  box-sizing: border-box;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background: #ffffcc;
	border: 1px solid #ffff00;
}

.featured_category {
	min-width: 53ex;
}

.featured {
	width: 430px;
	height: 550px;
	float: left;
	margin-top: 2em;
	margin-bottom: 2em;
	transition: all 2s ease;
}

.featured:hover {
	background-color: #ffc;
}

.text_wrapper {
	transition: all 2s ease;
}

.text_wrapper:hover {
	background-color: #ff0;
}

.featured h2 {
	padding: 0 1em;
	position: relative;
	height: 3em;
}

.featured a.featured_text {
	background-color: transparent;
}

.featured img {
	height: 300px;
}

img {
	max-height: 400px;
	width: 100%;
	object-fit: cover;
}

.featured p {
	padding: 0 2ex;
}

.featured_category a.category {
	display: inline-block;
	padding: 0 1ex;
}

.clear {
	clear: both;
}

.statusMsg {
  margin:20px auto;
  padding:30px;
  position:relative;
  border-radius:5px;
}

.statusMsg.errordiv {
	background-color:#ffc;
    border-left:5px solid #cc0000;
}

.statusMsg.succdiv {
	background-color:#a8f0c6;
    border-left:5px solid #060;
}