@import url('https://fonts.googleapis.com/css?family=Itim|Rosario');
  
* { margin: 0; padding: 0; }

body {
	background-color: #acbcb5;
	font-family: 'Rosario', sans-serif;
	font-size:24px;
	color:#9c4546;
	background-image:url(bg5.jpg);
	background-size: 100% auto;
	background-position: 0 -620px;
	background-repeat:no-repeat;
}


article {
	padding:60px;
	margin-top:60px;
	height:100%;
	min-height:1200px;
	background-color: #fefbdc;
	width:calc(100% - 120px);
	border-radius:20px;
	
}

article p { max-width: 800px; }

#intro {
	text-align:center;
	overflow:hidden;
}

#intro p {
	display:block;
	max-width:700px;
	margin: 0 auto;
}

.note2 { 
	position:relative;
	top:-10px;
}

i.fa.fa-music {
	opacity:0.4;
	font-size:40px;
}

a { 
	color:inherit;
}

h1 {
	font-family: 'Itim', cursive;
	font-size:60px;
	color:white;
	padding:20px;
	position:relative;
	width:80%;
	max-width:800px;
	text-align:center;
	border-radius:20px;
	margin-left:auto;
	margin-right:auto;
	margin-top:100px;
	border: 1px white solid;
	text-shadow: 0 0 2px #000;
}

h2 {
	margin-top:40px;
}

#slogan-container {
	text-align:center;
	margin:20px;
	background-color:#fff;
	max-width:600px;
	margin-left:auto;
	margin-right:auto;
	border-radius:20px;
	padding:6px;

}

#slogan {
	color:#9c4546;
}

@media (max-width:1600px) {
	body { 
		background-size: 100% auto;
		background-position: 0 -220px;
	}
}

@media (max-width:1200px) {
	body { 
		background-size: 100% auto;
		background-position: 0 -0px;
	}
}

@media (max-width:800px) {
	body { 
		background-size: auto 900px;
		background-position: -400px -200px;
	}
	article { 
		margin-top:40px;
	}
	body #tabcontact, body #tabhome { margin-top:-6px;}
	h1 { 
		margin-top:20px;
	}
	
}


@media (max-width:640px) {
	#slogan-container {
		margin-left:20px;
		margin-right:20px;
	}
}

h2 { 
	margin-bottom:20px;
}

.foto.foto_teun {
	background-image:url(teun.jpg);
	height:880px;
}
.foto_dansen {
	background-image:url(dansen.jpg);
}
.foto_polenaise {
	background-image:url(polenaise.jpg);
}
.foto_hip {
	background-image:url(hip.jpg);
}
.foto_zanger {
	background-image:url(zanger.jpg);
}

.foto_cafe {
	background-image:url(cafe.jpg);
}

.grid-item.video {
	overflow:hidden;
	background-color:#000;
	text-align:center;
}

.grid-item.video iframe {
	
}

.foto {
	background-position:center;
	background-size:cover;
	height:320px;
}

.foto img { display:none; }

.groen { background-color:#acbcb5; color:#fff; }
.rood { background-color:#9c4546; color:#fff; }
.geel { background-color:#fff; color:#9c4546; }

.grid-item img {
	width:100%;
	border-radius:20px;
}

.plaatje {
	background-color:white;
}


.grid-item { min-height:400px; width: calc(25% - 80px); float:left; padding:20px; margin:20px; border-radius:20px; }
.grid-item--width3 { min-height:400px; width: calc(75% - 80px); float:left; padding:20px; margin:20px; border-radius:20px; }



@media (max-width:1280px) {
	.grid-item,.grid-item--width3 { width: calc(50% - 80px); float:left; padding:20px; margin:20px; border-radius:20px; }
	
}

@media (max-width:760px) {
	article { padding: 10px; width:calc(100% - 20px); }
	.grid-item,.grid-item--width3  { width: calc(100% - 80px); float:left; padding:20px; margin:20px; border-radius:20px; }
	.foto.foto_teun { height:200px;	}
	
}

.grid-item > p > b {
	text-align:center;
	width:100%;
	display:block;
}

.play {
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 60px solid #9c4546;
  margin: 100px auto 50px auto;
  position: relative;
  z-index: 1;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  left: 10px;
}
.play:before {
  content: '';
  position: absolute;
  top: -75px;
  left: -115px;
  bottom: -75px;
  right: -35px;
  border-radius: 50%;
  border: 10px solid #9c4546;
  z-index: 2;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.play:after {
  content: '';
  opacity: 0;
  transition: opacity 0.6s;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
}
.play:hover:before, .play:focus:before {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
}
.play.active {
  border-color: transparent;
}
.play.active:after {
  content: '';
  opacity: 1;
  width: 50px;
  height: 80px;
  background: #9c4546;
  position: absolute;
  right: 5px;
  top: -40px;
  border-left: 20px solid #9c4546;
  box-shadow: inset 30px 0 0 0 #9c4546;
}

footer {
	color: #fff;
	text-align:center;
	padding:20px;
}

body.article article .wrap {
	margin-left:auto;
	margin-right:auto;
	width:calc(100% - 40px);
	padding:20px;
	max-width:800px;
}



#tabhome {
	background-color: #fefbdc;
	border-radius: 6px;
	padding: 8px;
	text-decoration: none;
	float: right;
	margin-top: 14px;
	margin-right: 4px;
	border-bottom:1px #340 solid;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	box-shadow:2px -3px 1px 1px rgba(0,0,0,0.5);
}

#tabcontact {
	background-color: #fefbdc;
	border-radius: 6px;
	padding: 8px;
	text-decoration: none;
	float: right;
	margin-top: 14px;
	margin-right: 24px;
	border-bottom:1px #340 solid;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	box-shadow:2px -3px 1px 1px rgba(0,0,0,0.5);
}