/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Italianno|Gabriela|IM Fell French Canon SC);
body, html {
	font-size: 100%;
	padding: 0;
	margin: 0;
}
/* Reset */
*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	font-family: IM Fell French Canon SC, Georgia, sans-serif;
	color: #663300;
}
.headline {
	font-family: Zapfino, Georgia, serif;
	font-style: italic;
	font-size: 1em;
}
a {
	color: #CC6600;
	text-decoration: none;
}
a:hover {
	color: #000;
}
/*--------------------------------------------------------------------------------------BEGIN HEADER*/
.main, .container > header {
	width: 95%;
	/*	max-width: 69em;
*/	margin: 0 auto;
}
.container > header {
	padding: 1em 0 1.875em 2em;
	position: fixed;
}
#logo {
	margin: 0;
	float: left;
	clear: left;
	-webkit-background: url(../images/logo400.jpg) no-repeat top center;
	height: 106px;
	min-width: 400px;
	width: auto !important;
	width: 400px;
	margin-top: 1em;
	background: url(../images/logo400.jpg) no-repeat top center;
	height: 106px;
	min-width: 400px;
	width: auto !important;
	width: 400px;
	margin-top: 1em;
}
}
/*----------------------------------------------------EINDE HEADER*/

/*--------------------------------------------------------------------------------------BEGIN NAVIGATIE*/
.container > header nav {
	padding-top: 2em;
	float: right;
	position: fixed;
}
.container > header nav a {
	display: block;
	float: right;
	position: relative;
	width: 3em;
	height: 3em;
	background: #FFF;
	border-radius: 50%;
	color: transparent;
	margin: 0.2em 0.2em;
	border: 3px solid #663300;
	text-indent: -8000px;
	font-family: Zapfino, Georgia, serif;
	font-style: italic;
	text-shadow: 1px 1px 0px rgba(207, 127, 81, 0.5);
	font-weight: 700;
}
#nav1 {
	background-image: url(../images/home.png);
	background-repeat: no-repeat;
	background-position: center;
}
#nav2 {
	background-image: url(../images/overons.png);
	background-repeat: no-repeat;
	background-position: center;
}
#nav3 {
	background-image: url(../images/luisteren.png);
	background-repeat: no-repeat;
	background-position: center;
}
#nav4 {
	background-image: url(../images/kijken.png);
	background-repeat: no-repeat;
	background-position: center;
}
#nav5 {
	background-image: url(../images/fb50.png);
	background-repeat: no-repeat;
	background-position: center;
}
#nav6 {
	background-image: url(../images/contact.png);
	background-repeat: no-repeat;
	background-position: center;
}
.container > header nav a:after {
	content: attr(data-info);
	color: #663300;
	position: absolute;
	width: 600%;
	top: 120%;
	text-align: right;
	right: 0;
	opacity: 0;
	pointer-events: none;
}
.container > header nav a:hover:after {
	opacity: 1;
}
.container > header nav a:hover {
	background: #B3ECFF;
}
.container > header nav a:hover:before {
	color: #fff;
}
/*----------------------------------------------------EINDE NAVIGATIE*/



/* -------------------------------------------------------------------------------------BEGIN PAGINA HOME*/


.content_index {
	display: block;
	clear: left;
	float: left;
	top: auto;
	position: relative;
	width: 40%;
	min-width: 20em;
	height: auto;
	min-height: 20em;
	/*	background: #fff;	*/
/*	border-radius: 5%;	*/
	margin: 13em 1em 1em 7em;/*	border: 0px solid #CF7F00;	*/
/*	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color:#663300;	*/
/*	font-weight: 400;
	padding: 1em 1em 1em 1em;
/*	-webkit-box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
	-moz-box-shadow:    6px 6px 5px 4px rgba(83, 50, 50, 0.65);
	box-shadow:         6px 6px 5px 4px rgba(83, 50, 50, 0.65);	*/
}
/* this is our container. Lets imagine, that it is our sidebar where we want to put testimonials 
.testimonial {
	width:30%;
	margin:20px;
}
*/

/* testimonials slider geometry */

.tsl-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: relative;
	overflow: hidden;
}
.tsl-item {
	position: relative;
	top: 0;
	left: 100%;
	margin-left: -100%;
	width: 100%;
	float: left;
	animation: tsl-fade-in-out 35s infinite;
	animation-play-state: running;
	-webkit-animation: tsl-fade-in-out 35s infinite;
	-webkit-animation-play-state: running;
}
/* lets hide all items from second */
.tsl-item + .tsl-item {
	opacity: 0;
}
/* animation */

/* animation shift */
/* negative delay needed to pause works correctly on hover */
.tsl-item:nth-child(2) {
	animation-delay: -28s;
}
.tsl-item:nth-child(3) {
	animation-delay: -21s;
}
.tsl-item:nth-child(4) {
	animation-delay: -14s;
}
.tsl-item:nth-child(5) {
	animation-delay: -7s;
}
.tsl-item:nth-child(2) {
	-webkit-animation-delay: -28s;
}
.tsl-item:nth-child(3) {
	-webkit-animation-delay: -21s;
}
.tsl-item:nth-child(4) {
	-webkit-animation-delay: -14s;
}
.tsl-item:nth-child(5) {
	-webkit-animation-delay: -7s;
}

/*
we have 5 items.
we want each slide plays ≈5s

each slide will play 1/5 of animation = 20%
1% of animation is for transitions (fading)
*/

@keyframes tsl-fade-in-out {
 0% {
opacity:0;
 z-index:2;
}
 1% {
opacity:1;
 z-index:2;
}
 20% {
opacity:1;
}
 21% {
opacity:0;
 z-index:1;
}
 100% {
opacity:0;
}
}
 @-webkit-keyframes tsl-fade-in-out {
 0% {
opacity:0;
 z-index:2;
}
 1% {
opacity:1;
 z-index:2;
}
 20% {
opacity:1;
}
 21% {
opacity:0;
 z-index:1;
}
 100% {
opacity:0;
}
}
/* pause on hover */


/* testimonials theme */
.tsl-content {
	font-size: 2em;
	font-family: Italianno;
	line-height: 1;
	padding: 0 0 0em 0.1em;
	clear: left;
	float: left;
	color: #663300;
}
.tsl-content p {
	margin-top: 5;
}
.tsl-meta {
	font-size: 1em;
	text-align: right;
}
.tsl-meta p {
	margin-bottom: 0;
}
/* thats all */
/* -------------------------------------------------------EINDE PAGINA HOME*/
/* -------------------------------------------------------------------------------------BEGIN PAGINA OVER ONS*/
.content_overons {
	display: block;
	clear: left;
	float: left;
	top: auto;
	position: relative;
	width: 50%;
	min-width: 20em;
	max-width: 35em;
	height: auto;
	min-height: 15%;
	background: #fff;
	border-radius: 5%;
	margin: 10em 1em 1em 5em;
	border: 0px solid #663300;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #663300;
	font-weight: 400;
	padding: 1em 1em 1em 1em;
	-webkit-box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
	-moz-box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
	box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
}
.content_overons p {
	font-size: 1em;
	line-height: 1.25;
}

#Stan {
	float: left;
	width: 50%;
	padding-right: 1em;
}
#Leonie {
	float: right;
	width: 50%;
}
/* ---------------------------------------------------EINDE PAGINA OVER ONS*/
/* -------------------------------------------------------------------------------------BEGIN PAGINA KIJKEN*/

.content_kijken {
	display: block;
	clear: left;
	float: left;
	top: auto;
	position: relative;
	width: 50%;
	min-width: 15em;
	max-width: 35em;
	height: auto;
	min-height: 20em;
	background: #fff;
	border-radius: 5%;
	margin: 10em 1em 1em 5em;
	border: 0px solid #663300;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #663300;
	padding: 1em 0 1em 0;
	-webkit-box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
	-moz-box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
	box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
}
/* ------------------------------------------------------EINDE PAGINA KIJKEN*/
/* ---------------------------------------------------------------------------------BEGIN PAGINA LUISTEREN*/

.content_luisteren {
	display: block;
	clear: left;
	float: left;
	top: auto;
	position: relative;
	width: 55%;
	min-width: 20em;
	max-width: 40em;
	height: auto;
	min-height: 20em;
	background: #fff;
	border-radius: 5%;
	margin: 10em 1em 1em 5em;
	border: 0px solid #663300;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #663300;
	padding: 2em 1em 1em 1em;
	-webkit-box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
	-moz-box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
	box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
}
#mixplayer {
	background-color: transparent;
	margin-top: -10px;
	opacity: 0.7;
}
/* ---------------------------------------------------EINDE PAGINA LUISTEREN*/

/* ------------------------------------------------------------------------------------BEGIN PAGINA GASTENBOEK*/

.ContentGB {
	display: block;
	clear: left;
	float: left;
	top: auto;
	position: relative;
	width: 50%;
	min-width: 20em;
	max-width: 35em;
	height: auto;
	min-height: 20em;
	background: #fff;
	border-radius: 5%;
	margin: 10em 1em 1em 5em;
	border: 0px solid #663300;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #663300;
	padding: 1em 1em 1em 1em;
	-webkit-box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
	-moz-box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
	box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
}
/* ---------------------------------------------------EINDE PAGINA GASTENBOEK*/

/* ----------------------------------------------------------------------------------------BEGIN PAGINA CONTACT*/

.content_contact {
	display: block;
	clear: left;
	float: left;
	top: auto;
	position: relative;
	width: 40%;
	min-width: 30em;
	height: auto;
	min-height: 16em;
	background: #fff;
	border-radius: 5%;
	margin: 10em 1em 1em 5em;
	border: 0px solid #663300;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #663300;
	padding: 1em 1em 1em 1em;
	-webkit-box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
	-moz-box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
	box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
}

.content_contact p {
	font-size: 1em;
	line-height: 1.25;
}


/* ------------------------------------------------------EINDE PAGINA CONTACT*/

/*----------------------------------------------------------------------------------------------MEDIA QUERIES*/


@media only screen and (min-width : 20px) and (max-width : 320px) {
#logo {
	background: url(../images/logo300.jpg) no-repeat top center;
	height: 89px;
	min-width: 300px;
	width: auto !important;
	width: 300px;
	margin-top: 1em;
}
#logo {
	-webkit-background: url(../images/logo300.jpg) no-repeat top center;
	height: 89px;
	min-width: 300px;
	width: auto !important;
	width: 300px;
	margin-top: 1em;
}

.content {
	font-size: 60%;
}
.container > header .logo {
	font-size: 75%;
}
.container > header nav a {
	font-size: 75%;
}
.container > header span {
	font-size: 75%;
}
#nav1, #nav2, #nav3,  #nav4, #nav5, #nav6 {
	font-size: 75%;
}
#nav4, #nav5	{
	display: none;
}
.container > header {
	padding: 0 0 0 1em;
	width: 100%;
}
.container > header nav {
	float: left
}
.container > header nav a {
	border: 2px solid #663300;
}
.cbp-bislideshow {
	display: none;
}
.container {
	background: url(../images/logo320480.jpg) repeat top center;
	height: 480px;
	min-width: 320px;
	width: auto !important;
	width: 320px;
	margin-top: 0;
}
.content_index {
	width: 80%;
	height: auto;
	min-height: 20em;
	margin: 15em 3em 1em 3em;
}
.content_luisteren {
	display: block;
	clear: left;
	float: left;
	top: auto;
	position: relative;
	width: 100%;
	min-width: 100%;
	max-width: 100%;
	height: auto;
	min-height: 20em;
	background: #fff;
	border-radius: 0%;
	margin: 16em 0 0 0;
	border: 0px solid #663300;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #663300;
	padding: 1em 0 0 0;
	-webkit-box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
	-moz-box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
	box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
}
.content_overons {
	display: block;
	clear: left;
	float: left;
	top: auto;
	position: relative;
	width: 95%;
	height: auto;
	min-height: 20em;
	background: #fff;
	border-radius: 0%;
	margin: 16em 0 0 0;
	border: 0px solid #663300;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #663300;
	font-weight: 400;
	padding: 1em 1em 1em 1em;
	-webkit-box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
	-moz-box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
	box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
}
.content_overons p {
	font-size: 1.5em;
	line-height: 1.25;
}

#Leonie {
	float: left;
	width: 100%;
}
#Stan {
	float: left;
	width: 100%;
	padding-right: 0;
}
.content_kijken {
	display: none;
	clear: left;
	float: left;
	top: auto;
	position: absolute;
	width: 50%;
	height: auto;
	min-height: 1em;
	background: #fff;
	border-radius: 0%;
	margin: 16em 0 0 0;
	border: 0px solid #663300;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #663300;
	padding: 0 0 0 0;
	-webkit-box-shadow: 0px 0px 0px 0px rgba(83, 50, 50, 0.65);
	-moz-box-shadow: 0px 0px 0px 0px rgba(83, 50, 50, 0.65);
	box-shadow: 0px 0px 0px 0px rgba(83, 50, 50, 0.65);
}
.ContentGB {
	display: none;
	clear: left;
	float: left;
	top: auto;
	position: relative;
	width: 100%;
	height: auto;
	min-height: 20em;
	background: #fff;
	border-radius: 0%;
	margin: 16em 0 0 0 0;
	border: 0px solid #663300;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #663300;
	padding: 0 0 0 0;
	-webkit-box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
	-moz-box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
	box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
}
.contentGB p,.content_contact p {
	font-size: 1.5em;
	line-height: 1.25;
}
.content_contact {
	display: block;
	clear: left;
	float: left;
	top: auto;
	position: relative;
	width: 95%;
	height: auto;
	min-height: 16em;
	background: #fff;
	border-radius: 0%;
	margin: 16em 0 0 0;
	border: 0px solid #663300;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #663300;
	padding: 1em 1em 1em 1em;
	-webkit-box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
	-moz-box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);
	box-shadow: 6px 6px 5px 4px rgba(83, 50, 50, 0.65);

}
}
 @media only screen and (min-width : 321px) and (max-width : 750px) {
#logo {
	background: url(../images/logo300.jpg) no-repeat top center;
	height: 89px;
	min-width: 300px;
	width: auto !important;
	width: 300px;
	margin-top: 1em;
}
#logo {
	-webkit-background: url(../images/logo300.jpg) no-repeat top center;
	height: 89px;
	min-width: 300px;
	width: auto !important;
	width: 300px;
	margin-top: 1em;
}
.content {
	font-size: 75%;
}
.container > header .logo {
	font-size: 75%;
}
.container > header nav a {
	font-size: 75%;
}
.container > header span {
	font-size: 75%;
}
#nav1, #nav2, #nav3,  #nav4, #nav5, #nav6 {
	font-size: 75%;
}
}
 @media only screen and (min-width : 751px) and (max-width : 980px) {
#logo {
	background: url(../images/logo400.jpg) no-repeat top center;
	height: 116px;
	min-width: 400px;
	width: auto !important;
	width: 400px;
	margin-top: 1em;
}
#logo {
	-webkit-background: url(../images/logo400.jpg) no-repeat top center;
	height: 116px;
	min-width: 400px;
	width: auto !important;
	width: 400px;
	margin-top: 1em;
}
.content {
	font-size: 75%;
}
.container > header .logo {
	font-size: 75%;
}
.container > header nav a {
	font-size: 75%;
}
.container > header span {
	font-size: 75%;
}
#nav1, #nav2, #nav3,  #nav4, #nav5, #nav6 {
	font-size: 75%;
}
 
}