@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {

}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		6;
	dw-num-cols-desktop:	8;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/*Page CSS*/

@font-face {
    font-family:delicious-roman;
	src:url(Fonts/delicious-roman-webfont.eot);
	src:url(Fonts/delicious-roman-webfont.ttf);
	src:url(Fonts/delicious-roman-webfont.woff);

}
@font-face {
    font-family:delicious-Bold;
	src:url(Fonts/delicious-bold-webfont.eot);
	src:url(Fonts/delicious-bold-webfont.ttf);
	src:url(Fonts/delicious-bold-webfont.woff);

}

@font-face {
    font-family:delicious-italic;
	src:url(Fonts/delicious-italic-webfont.eot);
	src:url(Fonts/delicious-italic-webfont.ttf);
	src:url(Fonts/delicious-italic-webfont.woff);
}

@font-face {
    font-family:OpenSans-Light;
	src:url(Fonts/Alegrey/AlegreyaSans-Light.otf);
}


@font-face {
    font-family:BebasNeue-Bold;
	src:url("Fonts/BebasNeue-Bold.ttf");
}

@font-face {
    font-family:BebasNeue-Regular;
	src:url("Fonts/BebasNeue-Regular.ttf");
}

@font-face {
    font-family:BebasNeue-Book;
	src:url("Fonts/BebasNeue-Book.ttf")
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (min-width: 0px)
{
body{
	background-color: #98a055;
	margin-top: 0px;
	font: normal 75.5%/1.5 Helvetica, Arial, sans-serif;
	letter-spacing: 0;
	color: #333;
	padding: 0px;
	margin: 0px;
}

a:link {
	color: #276ac4;
	text-decoration:none;
	font-family:delicious-Bold;
	letter-spacing:.1em;
	font-size:22px;
}

a:hover {
	font-family:delicious-Bold;
	color: #FFF;
	text-decoration:none;
	letter-spacing:.1em;
	font-size:22px;
}  /* mouse over link */

a:active {
	color: #276ac4;
	text-decoration:none;
	font-family:delicious-Bold;
	letter-spacing:.1em;
	font-size:22px;
}  

a:visited {
	color: #D6D6D6;
	text-decoration: none;
	font-family:delicious-Bold;
	letter-spacing: 0.1em;
	font-size:22px;
} 

.projects a
{
	font-family:delicious-Bold;
	color: #EC781B;
	text-decoration:none;
	letter-spacing:.05em;
	font-size:15px;
}

.projects a:visited
{
	font-family:delicious-Bold;
	color: #276ac4;
	text-decoration:none;
	letter-spacing:.05em;
	font-size:15px;
}

.projects a:hover
{
	color: #276ac4;
}
 
.projects a:active
{
	font-family:delicious-Bold;
	color: #EC781B;
	text-decoration:none;
	letter-spacing:.05em;
	font-size:14px;
}

.SocialImg{
	border: none;
	margin: 0px;
	width: 32px;
	height: 32px;
	margin-top: 5px;
	margin-left: 5px;
}

h2.ContactText
{
	font-family: BebasNeue-Bold;
	font-size: 26px;
	padding: 0px;
	margin: 0px;
	text-align: center;
	letter-spacing: 1px;
	color:#000;
}

h2
{
	font-family: BebasNeue-Bold;
	font-size: 20px;
	padding: 0px;
	margin: 0px;
	text-align: center;
	letter-spacing: 1px;
	color:#000;
}
	
hr{
	text-decoration: none;
	color: #666666;
	border-color: #666666;
	margin-bottom: 40px;
	margin-top: 40px;
}

hr .welkom{
	text-decoration: none;
	color: #2F1C1D;
	border-color: #2F1C1D;
}

ul#welkom li
{
	font-size: 1.5em;
	font-family: OpenSans-Regular;
}

ul.CenterUL {
  display:inline-block;
  margin-left:-25px;
}

p
{
	font-family: BebasNeue-Regular;
	font-size: 1.65em;
	line-height: 1.1em;
	color: #ccc;
	letter-spacing: 0.035em;
	color: #121212;
}

p.projects
{
	font-family: delicious-italic;
	font-size: 1.75em;
	line-height: 1.6em;
	color: #666;
	letter-spacing: 0.02em;
}

p2.sub
{
	font-family: delicious-italic;
	font-size: 1.3em;
	color:#161616;
	line-height: 15px;
}
	
p.welcome
{
	font-family: delicious-italic;
	font-size: 1.5em;
	letter-spacing: 0px;
	line-height: 25px;
	color: #121212;
	margin-top: 0px;
}


p.center
{
	text-align:center;
	color: #121212;
}
p.black
{
	color: #000;
}

.Trademark
{
	font-size:22px;
}

.dot {
	height: 10px;
	width: 10px;
	margin-left: 5px;
	margin-right: 5px;
	background-color: #FFFFFF;
	border-radius: 20%;
	display: inline-block;
}

p.contact
{
	line-height: 25px;
	padding: 0px;
	margin: 0px;
}

.ContactImg
{
	vertical-align: middle;
	padding: 2px;
}

h1
{
	font-family: BebasNeue-Bold;
	font-style: normal;
	line-height: 45px;
	font-size: 4em;
	font-weight: bold;
	padding: 0px;
	padding-top: 0px;
	margin: 0px;
	color: #121212;
}

h2
{
	font-family: BebasNeue-Bold;
	font-style: normal;
	font-size: 3.25em;
	padding-top: 2px;
	text-align: center;
	margin-bottom: 0px;
	margin-top: 0px;
	color: #fff;
	line-height: 80px;
}

h3
{
	font-family: BebasNeue-Bold;
	font-size: 7em;
	text-align: center;
	color: #fff;
	line-height: 75px;
	letter-spacing: 0px;
	margin-bottom: 0px;
	margin-top: 0px;
}
	h4
{
	font-family: BebasNeue-Bold;
	font-size: 55px;
	padding: 0px;
	margin: 0px;
	text-align: center;
	letter-spacing: 1px;
	line-height: 48px;
	color:#d31616;
}
	
h5
{
	font-family: BebasNeue-Regular;
	font-size: 50px;
	padding: 0px;
	margin: 0px;
	text-align: center;
	letter-spacing: 1px;
	line-height: 48px;
	color:#fff;
}
	
	
#wrapper
{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	margin-top: -270px;
}

.Logo
{
	height: auto;
	max-width: 265px;
	width: 100%;
	z-index:700;
}

.ConsoleIcon
{
	width: 42px;
	height: auto;
	margin-top: 40px;
	margin-bottom: 0px;
}

#ContactContainer
{
	clear: both;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 0px;
	padding-top: 0px;
	height: 120px;
	max-width: 400px;
	width: 80%;
	min-width: 320px;
	z-index: 1000;
	margin-bottom: 0px;
	margin-top: 20px;
}

#ContactBox
{
	width: 290px;
	height: 80px;
	border-radius: 15px;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	background-color:#ffd33a;
	display:flex;
	justify-content: center;
	align-items: center;
	z-index:1500;
}

#ContactBox:hover
{
   background-color:#ccc;
   color:#000;
	z-index:1500;
}

#ContactBox.Left
{
	float:left;
	z-index:1500;
}

#ContactBox.Right
{
	float:right;
	z-index:1500;
}

	#ContactBox.Center
{
	margin-left: auto;
	margin-right: auto;
	z-index:1500;
}
	
.fancybox-custom .fancybox-skin 
{
			box-shadow: 0 0 50px #222;
		}

#logo
{
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	width: 90%;
	text-align: center;
	padding-top: 20px;
}

.anker
{
	width:15px;
	height:15px;
}

.HeaderContainer
{
  height: 640px;
  overflow: hidden;
  position: relative;
	z-index: -100;
}
	
.HeaderImage
{
  width: 100%;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -640px;
  z-index:-100;
}

.random-image
{
	 display: block;
	 margin: 0 auto;
	 z-index:-100;
	width: 1280px;
}

#menucontainer 
{
	top: 0;
	height: 90px;
	width: 100%;
	height: auto;
	z-index: 500;
	}
	
.Menu
{
	margin-top: 10px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
	width: 80%;
	height: 50px;
	max-width: 450px;
}

.MenuItem
{
	font-family:Verdana, Geneva, sans-serif;
	font-size:15px;
	margin-right:10px;
	height:auto;
	text-align:center;
	}

.Info
{
	width: 85%;
	background-color: #6FB144;
	border-radius: 22px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	padding-bottom: 20px;
	padding-top: 20px;
}

#InfoBox
{
	width: 75%;
	background-color: #6FB144;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding: 10px;
}

.icon
{
	padding-bottom: 5px;
}


.Welkom
{
	width: 95%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	clear: both;
	margin-bottom: 20px;
}

.projecten
{
	height: auto;
	width: 80%;
	margin-top: 40px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
	text-align: center;
}

.ProjectImage
{
	width:96px;
	height:96px;
	float:left;
	padding:10px;
}

#curator-feed-default-feed-layout
{
	margin-top:50px;
}

#curator-feed-default-feed-layout .crt-post-text
{
	font-size:14px;
	line-height:1.75em;
	border:0px;
	letter-spacing:0.05em;
}

#curator-feed-default-feed-layout .crt-carousel-stage
{
	max-height:auto;
}

#curator-feed-default-feed-layout .crt-panel-next
{
	width:35px;
	height:35px;
	background-color:#6FB144;
}

#curator-feed-default-feed-layout .crt-panel-prev
{
	width:35px;
	height:35px;
	background-color:#6FB144;
}

#curator-feed-default-feed-layout .crt-post-border
{
	border: 1px solid;
	border-color:#CCC;
}

#curator-feed-default-feed-layout .crt-post
{
	background-color:#9f9f9f;
}

#curator-feed-default-feed-layout .crt-post-text a
{
	color:#FFF;
	letter-spacing: 0.05em;
	font-size:14px;
}


#curator-feed-default-feed-layout .crt-post-fullname a
{
	font-size:28px;
	letter-spacing:1px;
	margin-top:0px;
}

#curator-feed-default-feed-layout .crt-post-footer
{
	background-color:#FFF;	
}

.contact
{
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.adres
{
	width: 90%;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	}

.footer
{
	width: 95%;
	height: 50px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: 10px;
	line-height: 25px;
	color: #231f20;
	vertical-align: middle;
	margin-top: 10px;
	}

.mapouter
{
	
}

.carousel
{
}

#informatie
{
	margin-left:auto;
	margin-right:auto;
	width:auto;
	height:auto;
}

#projecten
{
	margin-left:auto;
	margin-right:auto;
	width:auto;
	height:auto;
}

#contact
{
	margin-left:auto;
	margin-right:auto;
	width:auto;
	height:auto;
}

#carousel ul {
	list-style: none;
	width:1345px;
	margin: 0;
	padding: 0;
	position:relative;
	float:left;
	border:none;
}
#carousel li {
	display:inline;
	list-style: none;
	border:none;

}

.CardContainer{
	display: block;
	margin-bottom: 20px;
	}
	
.Cards {
	/* equal width */
  width: 80%;
  height: 80%;
	margin-left: auto;
	margin-right: auto;
	}
	
.Cards h2 {
	color: white;
	line-height: 30px;
	margin-bottom: 5px;
	padding: 0px;
	}
	
.Cards p {
	color: black;
	line-height: 20px;
	margin-bottom: 0px;
	padding: 0px;
	margin-top: 5px;
	margin-bottom: 5px;
	}
	
.CardImage{
	width: 75%;
	height: 75%;
	object-fit: cover;
	margin-bottom: 10px;
}

.CenterContainer{
	display: block;
	width: 100%;
	}	
	
.CenterImage{
	width: 95%;
	height: 95%;
	max-width: 750px;
	object-fit:cover;
	margin-bottom: 20px;
}

#Youtube{
	display: block;
}
	
.myIframe {
  position: relative;
  padding-bottom: 65.25%;
  padding-top: 30px;
  height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /*<<--- THIS IS THE KEY*/ 
  border: solid black 1px;
}

.myIframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
	
/*-----------------------------------------------------------------------------------------------------------------------------------------*/
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	
#wrapper
{
	width:95%;
	margin-top: -250px;
	}

.Welkom
{
	width: 80%;
}

	.HeaderContainer
{
  height: 640px;
  overflow: hidden;
  position: relative;
}
	
.HeaderImage
{
  width: 100%;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -640px;
  z-index:-100;
}

.random-image
{
 display: block;
 margin: 0 auto;
 z-index:-100;
	width: 1280px;
}

	.Info
{
	width: 95%;
	height:auto;
	background-color: #6FB144;
	border-radius: 22px;
	margin-left: auto;
	margin-right: auto;
	margin-top:30px;
	padding-bottom:20px;
	padding-top:20px;
	display:flex;
	justify-content: center;
	align-items: top;


}

#InfoBox
{
	width:35%;
	text-align: center;
	padding:10px;
}


.projecten
{
	height: auto;
	width: 90%;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
	clear:both;
}
	
hr{
	border:none;
}

hr.welkom{
	border-top: 1px solid;
	text-decoration: none;
	border-color: #666666;
}
	
.CardContainer{
		display: flex;
	}
	
.Cards {
	flex: 1;
	padding: 10px;
	margin-bottom: 0px;
}
	
.CardImage{
object-fit:cover;
	width: 95%;
	height: 100%;
	}

	
}
.CenterContainer{
	display: block;
	width: 100%;
	}	
	
.CenterImage{
	width: 100%;
	height: 100%;
	max-width: 650px;
	object-fit:cover;
	margin-bottom: 20px;
}

#Youtube{
	
}
	
/*-----------------------------------------------------------------------------------------------------------------------------------------*/
/* Large devices (laptops/desktops, 1024px and up) */
@media only screen and (min-width: 1280px) {
	
#wrapper
{
	width:68%;
	max-width:1080px;
	margin-top: -70px;
	}
	
.Welkom
{
	width: 85%;
	max-width:840px;
}

.Info
{
	width: 95%;
	background-color: #6FB144;
	border-radius: 22px;
	margin-left: auto;
	margin-right: auto;
	margin-top:30px;
	padding-bottom:20px;
	padding-top:20px;
	height:auto;
	display:flex;
	justify-content: center;
	align-items: top;
}

.HeaderContainer
{
  height: 640px;
  overflow: hidden;
  position: relative;
}
	
.HeaderImage
{
  width: auto;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -960px;
  z-index:-100;
}

.random-image
{
 display: block;
 margin: 0 auto;
 z-index:-100;
	width: 1920px;
}

#InfoBox
{
	width:45%;
	text-align: center;
	padding:10px;

}

	
.projecten
{
	height: auto;
	width: 90%;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
	clear:both;
}

hr{
	border:none;
}
.CardContainer{
		display: flex;
	}
	
.Cards {
	flex: 1;

}
.CardImage{
object-fit: cover;
}
	.CenterContainer{
	display: block;
	width: 100%;
	}	
	
.CenterImage{
	width: 100%;
	height: 100%;
	max-width: 550px;
	object-fit:cover;
	margin-bottom: 20px;
}
#Youtube{

}
	
}
}