body {
	background-color: #2056bb;
	background-image: url(../mu_bg.png);
	position: relative;
	}

	#welkom {padding-top:50px;padding-bottom:30px;color: #fff; background-color: #2056bb;}
	#deelnemers {padding-top:50px;padding-bottom:30px;color: #fff; background-color: #df8500;}
	#locaties {padding-top:50px;padding-bottom:30px;color: #fff; background-color: #2056bb;}
	#kaartje {padding-top:50px;padding-bottom:30px;color: #fff; background-color: #2056bb;}
	#programma {padding-top:50px;padding-bottom:30px;color: #2056bb; background-color: #eee; text-align: left}
	#sponsors {padding-top:50px;padding-bottom:30px;color: #2056bb; background-color: #fff;}
	#contact {padding-top:50px;padding-bottom:30px;color: #fff; background-color: #2056bb;}
	#albums {padding-top:50px;padding-bottom:30px;color: #fff; background-color: #df8500;}

	#map-container { height: 500px; margin-left: 100px; margin-right: 100px; }

  .deelnemer-oneven {padding-top:50px;padding-bottom:30px;color: #fff; background-color: #2056bb;}
  .deelnemer-even {padding-top:50px;padding-bottom:30px;color: #fff; background-color: #df8500;}

  .locatie-oneven {padding-top:50px;padding-bottom:30px;color: #fff; background-color: #2056bb;}
  .locatie-even {padding-top:50px;padding-bottom:30px;color: #fff; background-color: #df8500;}

a {
	color: rgba(255,255,255,1.0)
}
a:hover{
	color: rgba(255,255,255,1.0);
	text-decoration: underline
}
a:visited{
	color: rgba(255,255,255,1.0);
	text-decoration: underline
}
.myheader {
	color:#fff;
	height:246px;
	padding:0px;
	background-color: #df8500;
	background-image: url(../mu_header_bg.png);
}
@media (max-width: 375px) {
	.myheader {
		background-image: url(../mu_header_bg2.png);
	}
}

.navbar {
    margin-bottom: 0;
    background-color: #df8500;
    z-index: 9999;
    border: 0;
    font-size: 11px !important;
    line-height: 1.42857143 !important;
    letter-spacing: 1px;
    border-radius: 0;
}

.navbar li a, .navbar .navbar-brand {
    color: #fff !important;
}

.navbar-nav li a:hover, .navbar-nav li.active a {
    color: #f4511e !important;
    background-color: #fff !important;
}

.navbar-default .navbar-toggle {
    border-color: transparent;
    color: #fff !important;
}  

.affix {
    top: 0;
    width: 100%;
	left: 1;
}

.affix + .container-fluid {
    padding-top: 70px;
}

    /* Add a gray background color and some padding to the footer */
    /* Set black background color, white text and some padding */
    footer {
      background-color: #2056bb;
      color: white;
      padding: 15px;
    }


	/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {height: 450px}

    /* Set gray background color and 100% height */
    .sidenav {
      padding-top: 20px;
      background-color: #transparent;
      height: 100%;
	  padding-right: 20px;
	  border-right: 1px solid #transparant;
	  text-align: left;
    }

	.well{
		color: #2056bb;
	}

.zijmenutext {
	font-family: "Verdana", monospace;
	font-size: 13px;
	font-style: normal;
	font-weight: bold;
	line-height: normal;
	text-decoration: none;
	color: #fff;
	width: 100%;
	margin-right: 20px;
	margin-bottom: 10px;
}
.zijmenubg {
	width: 100%;
	padding-top: 4px;
	padding-bottom: 8px;
	border-top: 1px dotted #fff;
}
a.zijmenu:link {
	background: transparent;
	color: #fff;
	text-decoration: none;
	line-height: normal;
}
a.zijmenu:visited {
	background: transparent;
	color: #fff;
	text-decoration: none;
}
a.zijmenu:hover {
	background: transparent;
	color: #fff;
	text-decoration: underline;
}
a.zijmenu:active {
	background: transparent;
	color: #ddd;
	text-decoration: none;
}

.programmatabel {
	width: 100%;
	text-align: left;
	background: #fff;
}
.programmatabel h3{
	font-size: 1.2em;
	font-weight: bold;
}
.programmatabel h4{
	font-size: 1.1em;
	font-weight: normal;
}

.programmaitem {
	border-top: 1px dotted #2056bb;
	padding-top: 4px;
	padding-bottom: 4px;
}
.dividerrow {
	background: #eee;
}
a.programmalink:link {
	background: transparent;
	color: #2056bb;
	text-decoration: none;
	line-height: normal;
}
a.programmalink:visited {
	background: transparent;
	color: #2056bb;
	text-decoration: none;
}
a.programmalink:hover {
	background: transparent;
	color: #df8500;
	text-decoration: none;
}
a.programmalink:active {
	background: transparent;
	color: #df8500;
	text-decoration: none;
}

a.colofonlink:link {
	background: transparent;
	color: #ffffff;
	text-decoration: none;
	line-height: underline;
}
a.colofonlink:visited {
	background: transparent;
	color: #ffffff;
	text-decoration: underline;
}
a.colofonlink:hover {
	background: transparent;
	color: #ffffff;
	text-decoration: underline;
}
a.colofonlink:active {
	background: transparent;
	color: #ffffff;
	text-decoration: underline;
}

.zijmenukop {
	font-family: "Verdana", monospace;
	font-size: 16px;
	font-style: normal;
	font-weight: bold;
	line-height: normal;
	text-decoration: none;
	color: #df8500;
	margin-right: 20px;
	margin-bottom: 20px;
}

/* 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;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

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

.modal-header {
    padding: 2px 16px;
    background-color: #df8500;
    color: white;
}

.modal-body {
	padding: 2px 16px;
	color: black; 
	height: 400px; 
	overflow: auto;
}

.modal-footer {
    padding: 2px 16px;
    background-color: #2056bb;
    color: white;
}

.img-link {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.img-link:hover, .hvr-trim:focus, .hvr-trim:active {
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}


.locatiemapheader {
	font-size: 15px;
	color: #777;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
}
.locatiemaptekst {
	font-size: 10px;
	color: #777;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
}

  /* Hide the thumbnailimages when the screen is less than 400 pixels wide */
  @media (max-width: 767px) {
    .deelnemer-images {
      display: small;
	}
	.locatie-images {
      display: small;
	}
	.welkomimg {
      display: none;
	}
	.img-kop {
	  width: 320px;
	}

   }

   /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height:auto;} 
    }

    @media (min-width: 1300px) {
	  .container-fluid {
	    width: 1280px;
		margin-left: 0px;
	  }
	  .wrapper {
		width: 1280px;
		margin: 0px auto;
	  }

    }

    @media (min-width: 1280px) {
	  .navbar {
	    font-size: 14px !important;
	  }
    }