@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'Champagne-Limousines';
    src:url('../fonts/Champagne-Limousines.ttf.woff') format('woff'),
        url('../fonts/Champagne-Limousines.ttf.svg#Champagne-Limousines') format('svg'),
        url('../fonts/Champagne-Limousines.ttf.eot'),
        url('../fonts/Champagne-Limousines.ttf.eot?#iefix') format('embedded-opentype'); 
        font-weight: normal;
        font-style: normal;
}

html { 
 
 font-family: 'Champagne-Limousines';
 /*font-family:Tahoma, Verdana, Arial,  Helvetica, sans-serif;*/
font-style: normal;

	font-size:25px;
 
}

body
{
height:100%;
color:#fff;
font-size:20px;				
		
}
.img-gallery{max-height: calc(100vh - 200px);
    overflow-y: auto;}
.goud{color:#cd7f32;}
h1{  font-family: 'Champagne-Limousines'; }
h1 { 
   font-family: 'Champagne-Limousines';

} 
.titlestart{
  font-family: 'Champagne-Limousines';	
	font-size:2em;
	color:#cd7f32;
	font-weight:500;
}

.treedbinnen{position: absolute;  bottom: 10%;}



#content h1{
	font-size:30px;
	font-weight:500;
	margin-top:0px;
	padding-top:0px;
	margin-bottom:15px;
		}
	#content h2{font-size:25px;
		  font-family: 'Champagne-Limousines';
	font-weight:500;
	margin-top:20px;
	padding-top:0px;
	margin-bottom:-10px;}
#content  h1 {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#content h1:before,
#content h1:after {
    content: '';
    border-top: 1px solid;
    margin: 0 20px 0 0;
    flex: 1 0 20px;
}

#content h1:after {
    margin: 0 0 0 20px;
}

.row.display-flex{
	display:flex;
	flex-wrap:wrap;
	
}
.row.display-flex > [class*='column']{
	display:flex;
	flex-direction:column;
	
}
.menubar{text-align:center;}


p.fontscript {  font-family: 'Champagne-Limousines';
font-size:30px;}

a {color:#fff;
text-decoration:none;}
			
#content a{
	color:#fff;
text-decoration:none;}

#content {padding-top:50px;}
#header{padding:10px; padding-left:0px;}

#header h1 {font-size:50px;

margin-top:10px; margin-bottom:10px;
font-weight:300;
	text-align:center;


}

.scrolldiv{max-height:40vh;
overflow-y: scroll;
overflow-x: hidden;}

p{margin-bottom:5px;}

/*Voor de navigatie*/

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
	margin-top:60px;
	
  
}


/* Float the list items side by side */
ul.topnav li {float: left;}



/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
   font-family: 'Champagne-Limousines'; 
    text-align: center;
    padding-top: 14px;
	padding-bottom:0px;
	padding-left:8px;
	padding-right:8px;
    text-decoration: none;
  
    font-size: 18px;
	color:#fff;
	border:1px solid transparent;
}


ul.font2 li a{  font-family: 'Champagne-Limousines', cursive; font-size:20px;}


/* Change background color of links on hover */
ul.topnav li a:hover {border:1px solid #fff;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

 /* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:992px) {
	

	body
{

overflow: scroll;
-webkit-overflow-scrolling: touch;
}
	
#header{ text-align:center;}
	
#header h1 {font-size:50px;


}
  ul.topnav li {display: none; }
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:1200px) {
	
	
	.titlestart{
  font-family: 'Champagne-Limousines';	
	font-size:2em;
	font-weight:500;
		font-size:2em;
	color:#cd7f32;
}

.treedbinnen{position: absolute;  bottom: 30%;}

	
	.img-gallery{
		max-width:100%;
		height:auto;
		
	}
	
	.scrolldiv{height:100%;
overflow:visible;}
	
	ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
	margin-top:10px;
		float:none;
		width:100%;
  
}
	
	ul.topnav li a {color:#fff;}
	ul.topnav li a:hover {background-color:#333;}
  ul.topnav.responsive {position: relative;
  background-color:#333;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
	
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
	  
	
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

.navbar-default {
  background-color: #1A242F;
  border-color: transparent;
}
.navbar-default .navbar-nav > .active > a:focus {
  color: #ffffff;
  background-color: #2C3E50;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color:  #2C3E50;
}


.textcenter{
text-align: center;
}

.img-centered {
    margin: 0 auto;
}

header {
    text-align: center;
    color: #fff;
}

header .container {
    padding-top: 100px;
    padding-bottom: 50px;
	background-color:#333;
}





.full{display: block;
  max-width: 100%;
  height: auto;}


/*ipad landscape*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES GO HERE */
ul.topnav li a {
    display: inline-block;
  font-family: 'Champagne-Limousines';
    text-align: center;
    padding: 14px 5px;
    text-decoration: none;
  
    font-size: 16px;
	color:#fff;

	
	
	
}
	
}

@media(min-width:1200px)

{
	

	.menuwrapper{display:inline-block;}
    .navbar-fixed-top {
        padding: 25px 0;
        -webkit-transition: padding .3s;
        -moz-transition: padding .3s;
        transition: padding .3s;
    }

    .navbar-fixed-top .navbar-brand {
        font-size: 2em;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
    }

    .navbar-fixed-top.navbar-shrink {
        padding: 10px 0;
    }

    .navbar-fixed-top.navbar-shrink .navbar-brand {
        font-size: 1.5em;
    }
}

.navbar {
    text-transform: uppercase;
	 font-family: 'Champagne-Limousines';
    /*font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;*/
    font-weight: 700;
}

.navbar a:focus {
    outline: 0;
}

.navbar .navbar-nav {
    letter-spacing: 1px;
}

.navbar .navbar-nav li a:focus {
    outline: 0;
}

.navbar-default {
    border: 0;
}





/*slideshow*/

* {
  box-sizing: border-box;
}

.row > .column {
  padding: 8px 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
	right:  unset;
     bottom: unset;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
	  width: 100vw;
  height: 100vh;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
	/*opacity:0.3;*/
	
	
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color:black;
  margin: auto;
  padding: 0;
  width: 80%;
	max-height:95vh;
 
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption { 
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
	text-align:center;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */

img {
  margin-bottom: -4px;
}



.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*When the modal fills the screen it has an even 2.5% on top and bottom*/
/*Centers the modal*/
.modal-dialog {
  margin: 2.5vh auto;
}

/*Sets the maximum height of the entire modal to 95% of the screen height*/
.modal-content {
  max-height: 95vh;
  overflow: hidden;
}

/*Sets the maximum height of the modal body to 90% of the screen height*/
.modal-body {
  
}
/*Sets the maximum height of the modal image to 69% of the screen height*/
.modalimage {
  max-height: 80vh;
}


@media(min-width:1200px)

{

ul.topnav li a {
    
  
    font-size: 22px;
	
	}}

@media screen and (max-width:992px) {
	.column{width:50%;}
}