@font-face {
  font-family: 'Comic Sans MS';
  src: url('fonts/comic-sans.woff') format('woff');
}

* {
  margin: 0;
  padding: 0;
}

#content {
  top: 0px;
  left: 200px;
  position: absolute;
}

#main_navigation {
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: 200px;
  position: fixed;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: pink;
  background-image: url('../images/bg/pink.gif');
  background-size: 100% auto;
  z-index: 20000;

  color: yellow;
  font-weight: bold;
}

#main_navigation #menu_desktop {
	margin-bottom: 12px;
}

#main_navigation #menu_btn_mobile {
	display: none;
}

#main_navigation img {
  max-width: 100%;
}

#main_navigation nav {
  top: 120px;
  bottom: 0px;
  left: 0;
  padding: 0 20px;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

#main_navigation ul {
  margin: 0;
  padding: 0;
}

#main_navigation ul li {
  list-style: none;
  text-align: center;
  margin-bottom: 15px;
}

#main_navigation li a {
    color: yellow;
    font-size: 20px;
}

#main_navigation li a:hover {
  color: white;
  font-style: italic;
}

#hitcounter {
  background-color: yellow;
  width: 100%;
  padding: 5px;
  color: black;
  font-size: 17px;
  margin-bottom: 5px;
  font-weight: bold;
  font-style: italic;
}

#main_navigation img#hoofd {
  max-width: 100px;
  margin: 0 auto;
  display: block;
}

#main_navigation #menu_border_mobile {
	display: none;
}

.twist {
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-o-transition: 1s;
	-ms-transition: 1s;
	transition: 1s;
}

.twist:hover {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
}

#hoofd {
		-webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
		}
}

@media (max-width: 768px) {
	#main_navigation {
		right: 0;
		bottom: auto;
		width: 100%;
		height: 80px;
		position: absolute;
		background-size: auto 80px;
	}

	#main_navigation nav {
		top: 0;
		padding-bottom: 10px;
		position: static;
		display: block;
	}

	#main_navigation nav ul li {
		width: 50%;
		height: 140px;
		box-sizing: border-box;
		position: relative;
		display: block;
		float: left;
	}

	#main_navigation nav ul li:nth-child(odd) a {
		right: 12px;
	}

	#main_navigation nav ul li:nth-child(even) a {
		left: 12px;
	}

	#main_navigation nav ul li a {
		left: 0;
		bottom: 0;
		width: 100%;
		position: absolute;
	}

	#main_navigation img#hoofd {
		float: left;
		max-height: 80px;
	}

	#main_navigation #menu_desktop {
		display: none;
	}

	#main_navigation #menu_btn_mobile {
		top: 15px;
		right: 15px;
		height: 50px;
		display: block;
		position: absolute;
		cursor: pointer;
	}

	#main_navigation ul {
		display: none;
	}

	#main_navigation.open {
		height: auto;
		padding-bottom: 12px;
	}

	#main_navigation.open ul {
		display: block;
		overflow: hidden;
	}

	#main_navigation.open #menu_border_mobile {
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: none;
		position: absolute;
		display: block;
	}

	#hitcounter {
		display: none;
	}

	#content {
		top: 80px;
		left: 0;
		right: 0;
		padding: 0 12px;
		box-sizing: border-box;
	}

	#content img {
		max-width: 100%;
	}

  #chicklets {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: hotpink;
    padding: 5px;
    color: black;
    font-size: 17px;
    margin-bottom: 5px;
    font-weight: bold;
    font-style: italic;
  }

  #chicklets {
    display: none;
  }
}