/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    font-family: "myriad-pro",sans-serif;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

   html, body {
        height: 100%;
   }

   a,
   a:visited {
      color: #0091C8;
      text-decoration: none;
   }

   a:focus {
      outline: none;
   }

   .no-touch a:hover,
   .no-touch a:visited:hover {
      color: #1dbcf8;
   }

   p {
    font-family: "myriad-pro",sans-serif;
   }

   body {
     background-color: #FAFAFA;
   }
   
   .embed-container {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;}
   .embed-container iframe, .embed-container object, .embed-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


  .main-header {
     width: 100%;
     position: absolute;
     background-color: #FFF;
     -webkit-box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);
     box-shadow: 0 0 3px 3px rgba(0,0,0,0.1);
     z-index: 10;
     transition: all .2s ease-in-out;
  }

   .main-header.fixed {
     position: fixed;
     z-index: 10;
     opacity: 0.97;
   }

   .main-header nav {
     max-width: 1140px;
     width: auto;
     margin: 0 auto;
     padding: 0 20px;
     position: relative;
   }

   .main-header nav a#logo {
     height: 86px;
     width: 76px;
     display: block;
     float: left;
     margin: 21px 0;
     position: relative;
   }

   .main-header.fixed nav a#logo {
     height: 31px;
   }

   .main-header nav a#logo figure {
     margin: 0;
     display: block;
   }

   .main-header nav a#logo figure#top {
     width: 42px;
     height: 42px;
     background-image: url(../img/logo-top.svg);
     margin: 0 auto 12px;
   } .no-svg .main-header nav a#logo figure#top {background-image: url(../img/logo-top.png);}

   .main-header.fixed nav a#logo figure#top {
     display: none;
   }

   .main-header nav a#logo figure#pointer {
     height: 1px;
     width: 1px;
     bottom: 56px;
     right: 0px;
     position: absolute;
   }

   .main-header nav a#logo figure#bottom {
     width: 76px;
     height: 31px;
     background-image: url(../img/logo-bottom.svg);
   } .no-svg .main-header nav a#logo figure#bottom {background-image: url(../img/logo-bottom.png);}

   .main-header nav ul {
     float: right;
     margin: 0;
     padding: 0;
   }

   .main-header nav ul#main {
     margin-top: 72px;
     border-right: 1px solid #666666;
   }

   .main-header.fixed nav ul#main {
     margin-top: 25px;
   }

   .main-header nav ul#main li {
     float: left;
     height: 30px;
     text-align: center;
     margin: 0;
     padding: 0 24px;
     border-left: 1px solid #666666;
     position: relative;
   }

   .main-header nav ul#main li a, .main-header nav ul#main li a:visited {
     text-decoration: none;
     color: #00155E;
   }

   .main-header nav ul#main li.blue a {color: #0091c8;}
   .main-header nav ul#main li.yellow a, .main-header nav ul#main li.yellow.active a:hover {color: #febe10;}
   .main-header nav ul#main li.green a, .main-header nav ul#main li.green.active a:hover {color: #00A651;}
   .main-header nav ul#main li.pink a, .main-header nav ul#main li.pink.active a:hover {color: #ce118c;}

   .main-header nav ul#main li.flyout.blue:hover {
     background-color: #0091c8;
   } .main-header nav ul#main li.flyout.blue:hover a {color:#FFF;}

   .main-header nav ul#main li.flyout.yellow:hover {
     background-color: #febe10;
   } .main-header nav ul#main li.flyout.yellow:hover a {color:#FFF;}

   .main-header nav ul#main li.flyout.green:hover {
     background-color: #00A651;
   } .main-header nav ul#main li.flyout.green:hover a {color:#FFF;}

   .main-header nav ul#main li.flyout.pink:hover {
     background-color: #ce118c;
   } .main-header nav ul#main li.flyout.pink:hover a {color:#FFF;}

  .main-header nav ul#main li.flyout:hover {
    padding-top: 20px;
    margin-top: -20px;
    border: none;
    padding-left: 25px;
  }

   .main-header nav ul#main li strong, .main-header nav ul#main li em {
     display: block;
   }

   .main-header nav ul#main li strong {
     text-transform: uppercase;
     font-family: FishmongerECS;
     font-weight: normal;
     font-style: normal;
     font-size: 23px;
   }

   .main-header nav ul#main li em {
     font-size: 14px;
     color: #666666;
   }

   .main-header nav ul#main li figure {
     height: 30px;
     width: 1px;
     background-color: #FFF;
     position: absolute;
     margin: 0;
     right: -1px;
     top: 20px;
     z-index: 1;
     display: none;
   }

   .main-header nav ul#main li:hover figure {display: block;}

   .main-header nav ul#main li section.flyout {
     position: absolute;
     width: 560px;
     color: #FFF;
     left: 0px;
     top: 50px;
     text-align: left;
     padding: 20px;
     display: none;
   }

   .main-header nav ul#main li.flyout:hover section.flyout {
     display: block;
   }

   .main-header nav ul#main li section.flyout img {
     width: 226px;
     float: left;
     margin-right: 20px;
   }

   .main-header nav ul#main li section.flyout h3 {
     margin: 0;
     text-transform: uppercase;
     font-family: "FishmongerECS";
     font-weight: normal;
     font-style: normal;
     font-size: 23px;
   }

   .main-header nav ul#main li.blue section.flyout {background-color: #0091c8;}
   .main-header nav ul#main li.yellow section.flyout {background-color: #febe10;}
   .main-header nav ul#main li.green section.flyout {background-color: #00A651;}
   .main-header nav ul#main li.pink section.flyout {background-color: #ce118c;}

   .main-header nav ul#main li ul {
     border: none;
     position: absolute;
     width: 100%;
     left: 0;
     background-color: #FFF;
     border: none;
     display: none;
   }

   .main-header nav ul#main li:hover ul {
     display: block;
   }

   .main-header nav ul#main li ul li {
     border: none;
     float: none;
     padding: 5px 24px;
     text-align: left;
   }

   .main-header nav ul#main li ul li a {
     font-family: "FishmongerECS";
     font-weight: normal;
     font-style: normal;
     font-size: 18px;
     text-transform: uppercase;

   }

   .main-header nav ul#sub {
     position: absolute;
     right: 20px;
     top: 27px;
   }

   .main-header.fixed nav ul#sub {
     display: none;
   }

   .main-header nav ul#sub li {
     float: right;
     margin-left: 16px;
   }

   .main-header nav ul#sub li a {
     font-family: FishmongerECS;
     font-weight: normal;
     font-style: normal;
     text-transform: uppercase;
     color: #666666;
     text-decoration: none;
     font-size: 14px;
   }

  .main-header nav ul#sub li a i {
    font-size: 26px;
    color: #555;
    opacity: 0.5;
    transition: opacity .2s ease-out;
  }
  .main-header nav ul#sub li a i:hover {
    opacity: 1;
  }
  .main-header nav ul#sub li img.m {
    margin-top: -1px;
    margin-right: -1px;
    opacity: 0.5;
    transition: opacity .2s ease-out;
  }
    .main-header nav ul#sub li img.m:hover {
      opacity: 1;
    }

   /* -- MAIN -- */
   main {
     width: auto;
     min-height: 100%;
     height: auto !important;
     height: 100%;
     margin: 0 auto -110px;
     overflow: auto;
   }

   main section#wrapper {
     max-width: 1140px;
     width: auto;
     margin: 158px auto 0;
     padding: 0 20px;
   }

   main section#wrapper ul#bullets {
     margin: 0;
     padding: 0;
     list-style: none;
   }

   main section#wrapper ul#bullets li {
     width: 30%;
     margin: 2.5% 5% 2.5% 0;
     float: left;
     display: block;
     cursor: pointer;
     background-color: #232d69;
   }

   main section#wrapper ul#bullets li a {
     text-decoration: none;
   }

   main section#wrapper ul#bullets li.last {
     margin-right: 0;
   }

   main section#wrapper ul#bullets li.bewoners {
     background-color: #0091c8;
   }

   main section#wrapper ul#bullets li.uw-project {
     background-color: #febe10;
   }

   main section#wrapper ul#bullets li.unieke-setting {
     background-color: #00A651;
   }

   main section#wrapper ul#bullets li div {
     padding: 20px;
     color: #FFF;
   }

   main section#wrapper ul#bullets li div h2 {
     margin: 0;
     font-family: FishmongerECS;
     font-weight: normal;
     font-style: normal;
     text-transform: uppercase;
     font-size: 28px;
   }

   main section#wrapper ul#bullets li div em {
     font-size: 18px;
   }

   main section#wrapper section#image {
     background-image: url(../img/banner.jpg);
     background-repeat: no-repeat;
     background-size: cover;
   }

   main section#wrapper section#image a {
     text-decoration: none;
   }

   main section#wrapper section#image section {
     padding: 24px;
     overflow: auto;
     color: #FFF;
     display: none;
     background-image: url(../img/dark-blue-bg.png);
   }


   main section#wrapper section#image section#bewoners {
     background-image: url(../img/bewoners-bg.png);
     display: block;
   }

   main section#wrapper section#image section#uw-project {
     background-image: url(../img/project-bg.png);
   }

   main section#wrapper section#image section#unieke-setting {
     background-image: url(../img/unieke-setting-bg.png);
   }

   main section#wrapper section#image section img {
     float: left;
     margin-right: 24px;
   }

   main section#wrapper section#image section h4 {
     margin: 24px 0 0;
     font-size: 30px;
     font-weight: normal;
   }

   main section#wrapper section#image section h3 {
     margin: 12px 0 0;
     font-family: FishmongerECS;
     font-weight: normal;
     font-style: normal;
     font-size: 45px;
     text-transform: uppercase;
   }

   main section#wrapper section#image section p {
     margin: 12px 0 0 364px;
     font-size: 18px;
     line-height: 1.5;
   }

   main section#wrapper section.under {
     width: 30%;
     margin: 2.5% 5% 2.5% 0;
     float: left;
     display: block;
   }

   main section#wrapper section.under#calendar {
     margin-right: 0;
   }

   main section#wrapper section.under h3 {
     font-family: FishmongerECS;
     font-weight: normal;
     font-style: normal;
     text-transform: uppercase;
     font-size: 30px;
     color: #232d69;
     margin: 0 0 24px 0;
   }

   main section#wrapper section.under p {
     padding: 24px;
     background-color: #F0F0F0;
     font-size: 15px;
     color: #666;
     line-height: 1.5;
     margin: 0;
   }

   main section#wrapper section.under#news ul {
     list-style: none;
     margin: 0;
     padding: 12px;
     background-color: #F0F0F0;
     overflow: auto;
   }

   main section#wrapper section.under#news ul li {
     margin: 12px;
     float: left;
   }

   main section#wrapper section.under#news ul li a, main section#wrapper section.under#news ul li a:visited {
     text-decoration: none;
     color: #666;
   }

   main section#wrapper section.under#news ul li a:hover {
     text-decoration: underline;
   }

   main section#wrapper section.under#news ul li h4 {
     margin: 0;
     font-size: 18px;
     font-family: FishmongerECS;
     font-weight: normal;
     font-style: normal;
     text-transform: uppercase;
   }

   main section#wrapper section.under#news ul li time {
     font-size: 14px;
     margin-top: 12px;
     float: left;
   }

   main section#wrapper section.under#calendar ul {
     list-style: none;
     padding: 0;
     margin: 0;
   }

   main section#wrapper section.under#calendar ul li {
     position: relative;
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
     margin-bottom: 24px;
     float: left;
     min-height: 100px;
     width: 100%;
   }

   main section#wrapper section.under#calendar ul li a {
     display: block;
     overflow: auto;
     padding-bottom: 46px;
     text-decoration: none;
     color: #FFF;
   }

   main section#wrapper section.under#calendar ul li a span {
     font-size: 15px;
     color: #666;
     line-height: 1.5;
     padding: 12px 12px 0 12px;
     color: #FFF;
     display: block;
     visibility: hidden;
     position: relative;
     z-index: 2;
   }

   main section#wrapper section.under#calendar ul li a:hover span {
     visibility: visible;
   }

   main section#wrapper section.under#calendar ul li a figure {
     position: absolute;
     height: 100%;
     width: 100%;
     background-image: url(../img/kalender-bg.png);
     display: none;
   } main section#wrapper section.under#calendar ul li a:hover figure {display: block;}

   main section#wrapper section.under#calendar ul li a h4 {
     display: block;
     width: 100%;
     bottom: 0px;
     position: absolute;
     margin: 0;
     z-index: 2;
     background-image: url(../img/kalender-bg.png);
   } main section#wrapper section.under#calendar ul li a:hover h4 {background: none;}

   main section#wrapper section.under#calendar ul li a h4 strong {
     font-size: 22px;
     font-family: FishmongerECS;
     font-weight: normal;
     font-style: normal;
     text-transform: uppercase;
     float: left;
     padding: 9px 12px 5px;
   }

   main section#wrapper section.under#calendar ul li a h4 time {
     float: right;
     padding: 14px 12px 0 0;
     font-size: 14px;
   }

   /* -- END MAIN -- */

   /* -- DETAIL -- */

   .detail main section#wrapper h1 {
     color: #232d69;
     font-family: FishmongerECS;
     font-size: 30px;
     font-style: normal;
     font-weight: normal;
     margin: 24px 0 0;
     text-transform: uppercase;
   }

   .detail main section#wrapper > div.text {
     width: 65%;
     color: #333333;
     font-size: 15px;
     line-height: 1.5;
     margin: 0 5% 0 0;
     float: left;
   }

   .detail main section#wrapper > div.text a {
     color: #0091C8;
     text-decoration: underline;
   }
   .detail main section#wrapper > div.text a:hover {
	   color: #1dbcf8;
   }

   .detail main section#wrapper > div.text img {
     max-width: 100% !important;
     height: auto !important;
   }
  .detail main section#wrapper > div.text iframe {
     margin-top: 2em;
     margin-bottom: 2em;
   }

   .detail main section#wrapper > .right {
     width: 26%;
     float: right;
     background: #eee;
     padding: 2%;
     margin-top: -43px;
     clear:right;
     line-height: 1.5em;
   }

   .detail.erfgoed main section#wrapper > .right {
   	 margin: 0 0 25px 0;
   }
   .detail.erfgoed main section#wrapper > .right.first {
	   margin-top: -35px;
   }
   .detail.uw-project main section#wrapper > .right {
	   margin-top: -35px;
   }
   .detail.uw-project.hall-detail main section#wrapper > .right {
	   margin-top: 5px; /* hier staat de section.right voor de h1 */
   }

   .detail main section#wrapper > .right p {
	   margin-top: 0;
   }
   .detail main section#wrapper > .right a {
	   text-decoration: underline;
   }

  .detail main section#wrapper > .rel {
     width: 26%;
     float: right;
     background: #fff;
     padding: 2%;
     padding-top: 0;
     margin-top: 20px;
	 clear: right;
   }

   .detail main section#wrapper > .right > h2 {
		margin-top: 1.4em;
	}
   .detail main section#wrapper > .right + h2 {
		margin: 0;
	}

   .detail main section#wrapper > .right img,
   .detail main section#wrapper > .rel img {
     width: 100%;
   }

   .detail main section#wrapper h2 {
     font-family: FishmongerECS;
     font-size: 23px;
     font-style: normal;
     font-weight: normal;
     text-transform: uppercase;
     color: #232d69;
   }

   .detail main section#wrapper .frame {
     padding: 0;
     overflow: auto;
   }

   .detail main section#wrapper .frame h2 {
     margin: 0;
     font-family: FishmongerECS;
     font-size: 23px;
     font-style: normal;
     font-weight: normal;
     text-transform: uppercase;
     color: #333333;
   }

   .detail main section#wrapper .frame p {
     color: #666;
     font-size: 15px;
     line-height: 1.5;
   }

   .detail main section#wrapper .frame a {
     color: #666;
   }

   /* -- END DETAIL -- */

   /* -- HOME -- */

   .timeline {
     max-width: 1148px;
     width: auto;
     margin: 150px auto 0;
     padding: 0 20px;
     overflow: auto;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     border-bottom: 1px solid #eee;
     padding-bottom: 24px;
   }

   .agenda .timeline {
    margin: 150px auto 25px;
   }
   
	
	/* HOME videos */
	.home-videos {
		max-width: 1148px;
		margin: 2rem auto;
	}
	.home-videos div.block {
		box-sizing: border-box;
		width: 50%;
		padding: 2%;
		float: left;
		text-align: center;
	}
	
	@media only screen and (max-width: 840px)
	{
		.home-videos {
			max-width: 100%;
		}
		.home-videos div.block {
			width: 100%;
			float: none;
		}
	}
   

   /* -- END HOME -- */
   /* -- BEWONERS -- */

   .detail.bewoners main section#wrapper h1 {
     color: #0091c8;
   }

   .detail main section#wrapper ul#banners {
     list-style: none;
     margin: 0;
     padding: 0;
     overflow: auto;
   }

   .detail main section#wrapper ul#banners li {
     display: block;
     float: left;
     width: 47.5%;
     width: 49%;
     margin: 1% 2% 1% 0;
     position: relative;
     color: #FFF;
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
   }

   .detail main section#wrapper ul#banners li a {
     text-decoration: none;
   }

   .detail main section#wrapper ul#banners li div {
     /*padding: 12px 12px 0 12px;*/
     position: relative;
     z-index: 2;
     visibility: hidden;
   }

   .detail main section#wrapper ul#banners li:hover div {
     visibility: visible;
   }

   .detail main section#wrapper ul#banners li div p {
    margin: 12px;
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    padding-left: 2%;
    padding-right: 2%;
    margin-top: 6%;
   }

   .detail main section#wrapper ul#banners li h2 {
     overflow: auto;
     min-height: 44px;
     margin: 0;
     padding: 0;
     position: relative;
     z-index: 2;
     background-image: url(../img/bewoners-bg.png);
     color: #FFF;
   }

   .detail main section#wrapper ul#banners li:hover h2 {
     background: none;
   }

   .detail main section#wrapper ul#banners li h2 strong {
     float: left;
     font-family: FishmongerECS;
     font-size: 22px;
     font-style: normal;
     font-weight: normal;
     padding: 9px 12px 5px;
     text-transform: uppercase;
   }

   .detail main section#wrapper ul#banners li h2 time {
     float: right;
     font-size: 14px;
     padding: 14px 12px 0 0;
   }

   .detail main section#wrapper ul#banners li figure {
     position: absolute;
     width: 100%;
     height: 100%;
     margin: 0;
     left: 0px;
     top: 0px;
     background-image: url(../img/bewoners-bg.png);
     z-index: 1;
     visibility: hidden;
   }

   .detail main section#wrapper ul#banners li:hover figure {
     visibility: visible;
   }

   .detail main section#wrapper ul#banners li.second {
     margin-right: 0;
   }

   .detail.bewoners main section#wrapper ul#banners li {
     min-height: 390px;
     position: relative;
   }

   .detail.bewoners main section#wrapper ul#banners li h2 {
     position: absolute;
     bottom: 0px;
     width: 100%;
   }

   /* -- END BEWONERS -- */
   /* -- UW PROJECT -- */
   
   
   .detail.uw-project main section#wrapper h1 {
     color: #febe10;
   }

   .detail.uw-project main section#wrapper ul#banners {
	   overflow: visible;
   }
   .detail.uw-project main section#wrapper ul#banners li {
     position: relative;
     width: 370px;
     height: 200px;
     margin: 1% 15px 1% 0;
   }
   .detail.uw-project main section#wrapper ul#banners li.third {
	 margin-right: 0;
	}
	
	@media only screen and (max-width: 1180px)
	{
		.detail.uw-project main section#wrapper ul#banners li {
			width: 32%;
			margin: 1% 1.3% 1% 0;
		}
	}
	@media only screen and (max-width: 900px)
	{
		.detail.uw-project main section#wrapper ul#banners li {
			width: 100%;
			margin: 2% 0;
		}
	}

	
   .detail.uw-project main section#wrapper ul#banners li a {
     text-decoration: none;
     color: #FFF;
     display: block;
     height: 100%;
     width: 100%;
   }

   .detail.uw-project main section#wrapper ul#banners li figure {
     background-image: url(../img/project-bg.png);
   }

   .detail.uw-project main section#wrapper ul#banners li h2 {
     background-image: url(../img/project-bg.png);
     position: absolute;
     bottom: 0px;
     width: 100%;
   }

   .detail.uw-project main section#wrapper ul#banners li:hover h2 {
     background: none;
   }
   
   /* -- END UW PROJECT -- */

   /* -- UNIEKE SETTING -- */

   .detail.erfgoed main section#wrapper h1 {
     color: #00A651;
   }

   .detail.erfgoed main section#wrapper .frame {
     background-color: #eee;
   }

   .detail.erfgoed main section#wrapper .frame h2,
   .detail.erfgoed main section#wrapper .frame p,
   .detail.erfgoed main section#wrapper .frame a {
     color: #333;
   }

   /* -- END UNIEKE SETTING -- */

   /* -- NIEUWS -- */

   .detail.nieuws main section#wrapper ul#banners li {
     width: 30%;
   }

   .detail.nieuws main section#wrapper ul#banners li.second {
     margin-right: 0;
   }

   .detail.nieuws main section#wrapper ul#banners li a {
     text-decoration: none;
   }

   .detail.nieuws main section#wrapper ul#banners li h2,
   .detail.nieuws main section#wrapper ul#banners li figure {
     background-image: url(../img/dark-blue-bg.png);
   }

   .detail.nieuws main section#wrapper ul#banners li:hover h2 {
     background: none;
   }

   .detail.nieuwsdetail main section#wrapper h1,
   .detail.kalenderdetail main section#wrapper h1 {
     margin-bottom: 6px;
   }

   .detail.nieuwsdetail main section#wrapper time,
   .detail.kalenderdetail main section#wrapper time {
     color: #666;
     font-family: FishmongerECS;
     font-size: 23px;
     font-style: normal;
     font-weight: normal;
     text-transform: uppercase;
   }

   .detail.nieuwsdetail main section#wrapper > .right ul#event li a figure,
   .detail.nieuwsdetail main section#wrapper > .right ul#event li a h4 {
     background-image: url(../img/dark-blue-bg.png);
   }

   /* -- END NIEUWS -- */

   /* -- CALENDAR -- */

   .detail.agenda main section#wrapper,
   .detail.archief main section#wrapper {
     margin-top: 0;
   }

   .detail.agenda main section#wrapper ul#cal_cat,
   .detail.archief main section#wrapper ul#cal_cat {
     margin: 0;
     padding: 0;
     /*text-align: center;*/
     display: block;
   }

   .detail.agenda main section#wrapper ul#cal_cat li,
   .detail.archief main section#wrapper ul#cal_cat li {
     display: inline-block;

     font-family: "FishmongerECS";
     font-size: 18px;
     font-style: normal;
     font-weight: normal;
     text-transform: uppercase;
   }

   .detail.agenda main section#wrapper ul#cal_cat li a,
   .detail.archief main section#wrapper ul#cal_cat li a {
     color: #666;
     text-decoration: none;
     padding: 0 10px;
     transition: all .3s ease-out;
   }

   .detail.agenda main section#wrapper ul#cal_cat li:hover a,
   .detail.agenda main section#wrapper ul#cal_cat li.active a,
   .detail.archief main section#wrapper ul#cal_cat li:hover a,
   .detail.archief main section#wrapper ul#cal_cat li.active a {
     background-image: url(../img/list-item.gif);
     background-position: left center;
     background-repeat: no-repeat;
     color: #232d69;
   }

   .detail.agenda main section#wrapper ul#calendarlist,
   .detail.archief main section#wrapper ul#calendarlist {
     list-style: none;
     padding: 0;
     margin: 0;
   }

   .detail.agenda main section#wrapper ul#calendarlist > li,
   .detail.archief main section#wrapper ul#calendarlist > li {
     position: relative;
     overflow: auto;
     
     display: block;
     float: left;
     
     min-height: 365px;

     width: 31.3%;
     margin: 1% 2% 0 0;
     
   }
   
   .detail.agenda main section#wrapper ul#calendarlist > li.third,
   .detail.archief main section#wrapper ul#calendarlist > li.third {
     width: 33.3%;
     margin-right: 0;
	}   
   
	@media only screen and (max-width: 1024px)
	{
		.detail.agenda main section#wrapper ul#calendarlist > li,
		.detail.archief main section#wrapper ul#calendarlist > li, 
		.detail.agenda main section#wrapper ul#calendarlist > li.third,
		.detail.archief main section#wrapper ul#calendarlist > li.third {
			width: 48%;
			margin-right: 1%;
		}
	}
	@media only screen and (max-width: 840px)
	{
		.detail.agenda main section#wrapper ul#calendarlist > li,
		.detail.archief main section#wrapper ul#calendarlist > li,
		.detail.agenda main section#wrapper ul#calendarlist > li.third,
		.detail.archief main section#wrapper ul#calendarlist > li.third {
			width: 100%;
			margin-right: 0;
		}
	}
	
   .detail.agenda main section#wrapper ul#calendarlist > li a.img,
   .detail.archief main section#wrapper ul#calendarlist > li a.img {
     display: block;
     border: 1px solid #ddd;
     margin-bottom: 10px;
     max-height: 252px;
     overflow: hidden;
	}   
	


   .detail.agenda main section#wrapper ul#calendarlist > li div,
   .detail.archief main section#wrapper ul#calendarlist > li div {
     padding-bottom: 20px;
   }

   .detail.agenda main section#wrapper ul#calendarlist img,
   .detail.archief main section#wrapper ul#calendarlist img {
     display: block;
     width: 100%;


   }

   .detail.agenda main section#wrapper ul#calendarlist time,
   .detail.archief main section#wrapper ul#calendarlist time,
   .detail.agenda main section#wrapper ul#calendarlistNext time  {
     font-family: "FishmongerECS";
     font-size: 18px;
     font-style: normal;
     font-weight: normal;
     text-transform: uppercase;
     color: #232d69;
     margin: 0;
     display: block;
   }

   .detail.agenda main section#wrapper ul#calendarlist time span,
   .detail.archief main section#wrapper ul#calendarlist time span,
   .detail.agenda main section#wrapper ul#calendarlistNext time span {
     text-transform: none;
   }

   .detail.agenda main section#wrapper ul#calendarlist h2,
   .detail.agenda main section#wrapper ul#calendarlist h2 a,
   .detail.archief main section#wrapper ul#calendarlist h2,
   .detail.archief main section#wrapper ul#calendarlist h2 a,
   .detail.agenda main section#wrapper ul#calendarlistNext h2,
   .detail.agenda main section#wrapper ul#calendarlistNext h2 a {
     font-family: "FishmongerECS";
     font-size: 20px;
     font-style: normal;
     font-weight: normal;
     text-transform: uppercase;
     text-decoration: none;
     color: #232d69;
     margin: 0;
   }

   .detail.agenda main section#wrapper ul#calendarlist ul,
   .detail.archief main section#wrapper ul#calendarlist ul,
   .detail.agenda main section#wrapper ul#calendarlistNext ul {
     display: block;
     list-style: none;
     overflow: auto;
     padding: 0;
     margin: 0;
   }

   .detail.agenda main section#wrapper ul#calendarlist ul li,
   .detail.archief main section#wrapper ul#calendarlist ul li,
   .detail.agenda main section#wrapper ul#calendarlistNext ul li  {
     float: left;
     margin-right: 10px;
   }

   .detail.agenda main section#wrapper ul#calendarlist ul li a,
   .detail.archief main section#wrapper ul#calendarlist ul li a,
   .detail.agenda main section#wrapper ul#calendarlistNext ul li a {
     font-size: 12px;
     color: #666;
     text-decoration: none;
   }

   .detail.agenda main section#wrapper ul#calendarlist ul li a:hover,
   .detail.archief main section#wrapper ul#calendarlist ul li a:hover,
   .detail.agenda main section#wrapper ul#calendarlist ul li a:hover {
     text-decoration: underline;
   }

   .detail.agenda main section#wrapper ul#calendarlist p,
   .detail.archief main section#wrapper ul#calendarlist p,
   .detail.agenda main section#wrapper ul#calendarlistNext p {
    color: #666;
   }

   .detail.agenda main section#wrapper ul#calendarlist a.more,
   .detail.archief main section#wrapper ul#calendarlist a.more,
   .detail.agenda main section#wrapper ul#calendarlistNext a.more {
     font-family: "FishmongerECS";
     font-size: 18px;
     font-style: normal;
     font-weight: normal;
     text-transform: uppercase;
     color: #232d69;
     text-decoration: none;
     /*
     position: absolute;
     bottom: 32px;
     */
     line-height: 0.5;
   }

   .detail.agenda main section#wrapper ul#calendarlist a.more:hover,
   .detail.archief main section#wrapper ul#calendarlist a.more:hover {
     text-decoration: underline;
   }

   .detail main section#wrapper h2.soon {
     text-align: center;
     font-size: 32px;
     color: #ce118c;
     margin: 32px 0 64px;
   }

   .detail.agenda main section#wrapper ul#calendarlistNext {
     list-style: none;
     padding: 0;
     margin: 0;
   }

   .detail.agenda main section#wrapper ul#calendarlistNext > li {
     display: block;
     float: left;
     width: 20%;
     margin-right: 6.6665%;
     position: relative;
     padding-bottom: 32px;
   }

   .detail.agenda main section#wrapper ul#calendarlistNext li.last {
     margin-right: 0;
   }

   .detail.agenda main section#wrapper ul#calendarlistNext li img {
     width: 100%;
   }

   .detail.agenda main section#wrapper ul#calendarlistNext h2,
   .detail.agenda main section#wrapper ul#calendarlistNext h2 a {
     font-size: 22px;
     margin-bottom: 10px;
   }

   .detail.agenda main section#wrapper ul#calendarlistNext li p {
     font-size: 14px;
   }

   .detail.agenda main section#wrapper ul#calendarlistNext a.more {
     bottom: 6px;
   }

   .detail.agenda main figure#loader {
     position: absolute;
     top: 0px;
     left: 0px;
     height: 100%;
     width: 100%;
     background-color: rgba(255,255,255,0.8);
     display: none;
   }

   .detail.agenda main figure#loader figure {
     position: absolute;
     width: 50px;
     height: 50px;
     left: 50%;
     top: 50%;
     margin-left: -25px;
     margin-top: -25px;
     background-color: #FFF;
     background-image: url(../img/ajax-loader.gif);
     background-repeat: no-repeat;
     background-position: center center;
   }

   /* -- END CALENDAR -- */
   /* -- ARCHIEF -- */

   .detail.archief main section#wrapper {
     margin-top: 158px;
   }

   .detail.archief main section#wrapper #dateSelect {
     width: 358px;
     margin: 0 auto;
   }

   .detail.archief main section#wrapper #dateSelect a {
    cursor: pointer;
    width: 8px;
    height: 16px;
    background: url(../img/arrows.png) no-repeat;
    background-repeat: no-repeat;
    background-position: -7px top;
    margin: 0 48px;
    text-indent: -9999px;
    display: block;
    float: left;
   }

   .detail.archief main section#wrapper #dateSelect a.next {
     background-position: 0px top;
   }

   .detail.archief main section#wrapper #dateSelect h2 {
     color: #000A61;
     font-size: 26px;
     font-family: FishmongerECS;
     font-weight: normal;
     font-style: normal;
     text-transform: uppercase;
     width: 150px;
     float: left;
     margin: 0;
     text-align: center;
     line-height: 1;
   }


   /* -- END ARCHIEF -- */
   /* -- CALENDAR DETAIL -- */

   .detail.kalenderdetail figure#mainimg {
     width: 100%;
     max-width: 1600px;
     margin: 0 auto;
     text-align: center;
     /*margin-top: 148px;*/
     margin-bottom: 4em;
   }

   .detail.kalenderdetail figure#mainimg img {
     width: 100%;
     height: auto;
   }

   .detail.kalenderdetail main section#wrapper {
     margin-top: 0;
   }

   .detail.kalenderdetail main section#wrapper h2 {
     color: #ce118c;
   }
  .detail.kalenderdetail main section#wrapper h2.lineup,
  .detail .orga {
     margin-top: 2em;
  }
  .detail .tickets {
    margin-top: 2em;
  }


  .detail main section#wrapper > .right ul.events,
  .detail main section#wrapper > .rel ul.events {
     list-style: none;
     padding: 0;
     margin: 0;
   }

   .detail main section#wrapper > .right li,
   .detail main section#wrapper > .rel li{
     position: relative;
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
     margin-bottom: 24px;
     /*float: left;*/
     min-height: 160px;
     width: 100%;
   }

   .detail main section#wrapper > .right ul.events li a,
   .detail main section#wrapper > .rel ul.events li a {
     display: block;
     overflow: auto;
     padding-bottom: 46px;
     text-decoration: none;
     color: #FFF;
   }

   .detail main section#wrapper > .right ul.events li a span,
   .detail main section#wrapper > .rel ul.events li a span {
     font-size: 15px;
     color: #666;
     line-height: 1.5;
     padding: 12px 12px 0 12px;
     color: #FFF;
     display: block;
     visibility: hidden;
     position: relative;
     z-index: 2;
   }



   .detail main section#wrapper > .right ul.events li a figure,
   .detail main section#wrapper > .rel ul.events li a figure {
     position: absolute;
     height: 100%;
     width: 100%;
     background-image: url(../img/kalender-bg.png);
     display: none;
   }


   .detail main section#wrapper > .right ul.events li a h4,
   .detail main section#wrapper > .rel ul.events li a h4 {
     display: block;
     width: 100%;
     bottom: 0px;
     position: absolute;
     margin: 0;
     z-index: 2;
     background-image: url(../img/kalender-bg.png);
   }



   .detail main section#wrapper > .right ul.events li a h4 strong,
   .detail main section#wrapper > .rel ul.events li a h4 strong {
     font-size: 16px;
     font-family: FishmongerECS;
     font-weight: normal;
     font-style: normal;
     text-transform: uppercase;
     float: left;
     padding: 9px 12px 5px;
   }

   .detail main section#wrapper > .right ul.events li a h4 time,
   .detail main section#wrapper > .rel ul.events li a h4 time {
     float: right;
     padding: 12px 12px 0 0;
     font-size: 14px;
     color: #FFF;
   }


  /* DATA */
  .detail .right .data ul,
  .detail .rel .data ul {
      padding: 0;
      margin: 0;
      list-style: none;
   }
 .detail .right .data li,
 .detail .rel .data li {
      padding: 0;
      margin: 0 !important;
      min-height: 0px !important;
   }

	.data .soldout,
	.data .performance,
	.data .avant_premiere,
	.data .premiere,
	.data .opening,
	.data .finale,
	.data .uitgesteld,
	.data .afgelast,
	.data .kids {
		font-size:12px;
		color:#FFFFFF;
		background:#b22222;
		padding:3px 8px;
		margin-left:5px;
	}
	.data .performance,
	.data .avant_premiere {
		background-color: #00a651;
	}
	.data .premiere {
		background-color: #00a651;
	}
	.data .opening {
		background-color: #febe10;
	}
	.data .finale {
		background-color: #1692c5;
	}
	.data .uitgesteld {
		background-color: #bbb;
	}
	.data .afgelast {
		background-color: #000;
	}
	.data .kids {
		background-color: #ce118c;
	}

   /* -- END CALENDAR DETAIL -- */

   /* -- CONTACT -- */

   .detail.contact main section#wrapper form {
     width: 100%;
   }

   .detail.contact main section#wrapper form ul {
     list-style: none;
     margin: 0;
     padding: 0;
   }

   .detail.contact main section#wrapper form ul li {
     float: left;
     width: 180px;
     padding: 0 5.3% 2.5% 0;
   }

   .detail.contact main section#wrapper form ul li input[type='text'], .detail.contact main section#wrapper form ul li input[type='email'], .detail.contact main section#wrapper form ul li input[type='tel'], .detail.contact main section#wrapper form ul li input[type='submit'] {
     width: 158px;
     height: 42px;
     border: 1px solid #F0F0F0;
     padding: 0 10px;
     margin: 0;
   }

   .detail.contact main section#wrapper form ul li label {
     margin-top: 10px;
     float: left;
     font-size: 14px;
     color: #666;
   }

   .detail.contact main section#wrapper form ul li label input[type='checkbox'] {
     margin-right: 10px;
   }

   .detail.contact main section#wrapper form ul li.email, .detail.contact main section#wrapper form ul li.vraag, .detail.contact main section#wrapper form ul li.verzenden {
     clear: both;
   }

   .detail.contact main section#wrapper form ul li.vraag {
     width: 100%;
     padding-right: 0;
   }

   .detail.contact main section#wrapper form ul li.vraag textarea {
     width: 97.4%;
     padding: 1.3%;
     height: 176px;
     border: 1px solid #F0F0F0;
   }

   .detail.contact main section#wrapper form ul li.verzenden input {
     background-color: #232d69;
     color: #FFF;
     font-family: FishmongerECS;
     font-size: 20px;
     font-style: normal;
     font-weight: normal;
     text-transform: uppercase;
   }

   .detail.contact main section#wrapper p.error {
     color: red;
     display: none;
   }

   .detail.contact main section#wrapper p.confirm {
     color: #00A651;
     font-weight: bold;
   }


   .detail.contact main section#wrapper .frame {
     background-color: #eee;
     color: #333 !important;
   }

   .detail.contact main section#wrapper .frame h2, .detail.contact main section#wrapper .frame p, .detail.contact main section#wrapper .frame a {
    	color: #333;
	}

  .detail.erfgoed main section#wrapper .partners {
    background: #00a651;
  }
  .detail.erfgoed main section#wrapper .partners p,
  .detail.erfgoed main section#wrapper .partners h2 {
    color: #fff;
  }


   /* -- END CONTACT -- */
   footer, .push {
       height: 62px; /* .push must be the same height as .footer */
       margin-top: 48px;
   }

   footer {
     background-color: #222;
   }

   footer section {
     margin: 0 auto;
     max-width: 1140px;
     padding: 0 20px;
     position: relative;
   }

   footer #newsletter {
      width: 31%;
      position: absolute;
      right: 10px;
      bottom: 0;
      background-color: #f0f0f0;
      display: none;
      z-index: 10;
   }

   footer #newsletter form {
     display: block;
     padding: 20px;
   }

   footer #newsletter form input {
     background-color: #fff;
     border: none;
     height: 42px;
     margin: 0 0 20px 0;
     padding: 0 2%;
     width: 96%;
   }

   footer #newsletter form input[type='submit'] {
     margin-bottom: 0px;
     background-color: #232d69;
     color: #FFF;
     padding: 0;
     width: 100%;
     font-family: FishmongerECS;
     font-size: 20px;
     font-style: normal;
     font-weight: normal;
     text-transform: uppercase;
   }

   footer section strong {
     width: 30%;
     display: block;
     float: right;
     height: 34px;
     background-color: transparent;
     font-family: FishmongerECS;
     font-size: 20px;
     font-style: normal;
     font-weight: normal;
     text-transform: uppercase;
     text-align: center;
     cursor: pointer;
     padding-top: 8px;
     margin-top: 10px;
     border: 1px solid #f0f0f0;
     color: #fff;
     transition: all .3s ease-in-out;
   }

   .no-touch footer section strong:hover {
      background-color: #f0f0f0;
      color: #333;
   }

   footer p {
    font-size: 14px;
    color: #666;
    padding-top: 10px;
    float: left;
   }




   /* MAIN BANNER */


   .owl-carousel {
     max-width: 1600px;
     width: auto;
     margin: 0 auto;
     padding: 0px;
     overflow: auto;
     position: relative;
   }

   .owl-carousel .owl-item div {
     position: relative;
     width: 100%;
   }

   .owl-carousel .owl-item a{
     position: relative;
     width: 100%;
     display: block;
     overflow: auto;
     text-decoration: none;
   }

   .owl-carousel .owl-item a > div{
     width: 1140px;
     bottom: 134px;
     left: 50%;
     margin-left: -570px;
   }

   .owl-carousel .owl-item a div section {
      max-width: 1140px;
    width: auto;
    margin: 0 auto;
    padding: 0 20px;
   }

   .owl-carousel .owl-item a div section div {
     width: 40%;
     margin: 0;
     padding: 1%;
     background-color: #000A61;
   }

   .owl-carousel .owl-item a div section div.yellow {background-color: #febe10;}
   .owl-carousel .owl-item a div section div.green {background-color: #8AC43E;}
   .owl-carousel .owl-item a div section div.pink {background-color: #ce118c;}
   .owl-carousel .owl-item a div section div.red {background-color: #cc3333;}
   .owl-carousel .owl-item a div section div.blue {background-color: #0091c8;}
   .owl-carousel .owl-item a div section div.darkblue {background-color: #00155E;}
   .owl-carousel .owl-item a div section div.darkgreen {background-color: #00A450;}

   .owl-carousel .owl-item a div section h4,
   .owl-carousel .owl-item a div section p {
     color: #FFF;
     margin: 0;
   }

   .owl-carousel .owl-item a div section h4 {
     font-family: FishmongerECS;
     font-size: 28px;
     font-style: normal;
     font-weight: normal;
     text-transform: uppercase;
     margin-bottom: 6px;
   }

   .owl-carousel .owl-item a div section h5 {
     font-family: FishmongerECS;
     font-size: 22px;
     font-style: normal;
     font-weight: normal;
     text-transform: uppercase;
     margin: 0 0 6px 0;
     color: #FFF;
   }

   .owl-carousel .owl-item a div section p {
   }

   .owl-controls {
   }

   .owl-dots {
     position: absolute;
     right: 20px;
     top: 20px;
     width: 20px;
   }

   .owl-dots .owl-dot {
     width: 11px;
     height: 11px;
     background-color: #FFF;
     margin: 7.5px 0;
     border: 1px solid #FFF;
   }

   .owl-dots .owl-dot.active {
     /*background-color: #232d69;*/
     background-color: #febe10;
   }

   .owl-nav {
     position: absolute;
     top: 50%;
     margin-top: -20px;
     width: 100%;
     display: none;
   }

   .owl-nav div {
     width: 24px;
     height: 40px;
     text-indent: -9999px;
     position: absolute;
     left: 24px;
     background-color: #FFF;
     background-image: url(../img/arrow-left.svg);
     background-position: center center;
     background-repeat: no-repeat;
   } .no-svg .owl-nav div {background-image: url(../img/arrow-left.png);}

   .owl-nav div.owl-next {
     right: 24px;
     left: auto;
     background-image: url(../img/arrow-right.svg);
   } .no-svg .owl-nav div.owl-next {background-image: url(../img/arrow-right.png);}

   /* HOME MAIN TEXT */

   section.home {
     width: auto;
     background-color: #FFF;
     overflow: auto;
     padding-top: 2em;
     padding-bottom: 2em;
   }

   section.home div {
     margin: 24px auto;
     padding: 0 20px;
     max-width: 728px;
     width: auto;
     text-align: center;
   }

   section.home h1 {
     margin: 0;
     text-align: center;
     display: inline-block;
     background-image: url(../img/logo-top.svg);
     background-repeat: no-repeat;
     background-size: 87px 87px;
     height: 87px;
     padding-left: 111px;
     font-family: FishmongerECS;
     font-size: 28px;
     font-style: normal;
     font-weight: normal;
     text-transform: uppercase;
     font-size: 40px;
     color: #232d69;
     line-height: 1;
     margin: 12px 0;
   } .no-svg section.home h1 {background-image: url(../img/main-text.png);}

   section.home h1 strong,
   section.home h1 span {
     display: block;
     font-style: normal;
     font-weight: normal;
     margin-top: 7px;
   }

   section.home h1 span {
     font-size: 35px;
     color: #CC118A;
   }

   section.home p {
     color: #333333;
     font-size: 15px;
     text-align: left;
   }

   section.home p em {
     font-size: 18px;
   }

   /* HOME FACEBOOK */



   section.facebook {
     max-width: 1140px;
     width: auto;
     margin: 0 auto;
     padding: 1em;
   }

   section.facebook h2,
   section.facebook h2 a {
     text-align: center;
     font-family: FishmongerECS;
     font-size: 40px;
     font-style: normal;
     font-weight: normal;
     text-transform: uppercase;
     color: #3B5999;
     text-decoration: none;
     transition: all .3s ease-in-out;
   }

   section.facebook ul {
     list-style: none;
     margin: 0;
     padding: 0;
   }

   section.facebook ul li {
     float: left;
     width: 24%;
     margin-right: 2%;
   }

   section.facebook ul li a,
   section.facebook ul li a:visited {
     color: #888;
     font-style: italic;
     text-decoration: none;
     transition: all .3s ease-in-out;
   }
   section.facebook ul li a:hover,
   section.facebook ul li a:visited:hover {
    color: #333;
   }

   section.facebook ul li:last-child {
     margin-right: 0;
     width: 22%;
   }

   section.facebook ul li figure {
     width: 100%;
     height: 230px;
     margin: 0;
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
   }

   section.facebook ul li h3 {
     font-size: 1em;
     font-weight: normal;
     font-family: myriad-pro;
   }

   #hamburger {
     display: none;
   }

.zalen {
  list-style-type: none;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 2em;
}
.zalen li {
  display: inline;
  padding-right: 10px;
  padding-left: 10px;
  margin-left: 34px;
}
.zalen li:first-child {
  padding-left: 0;
  margin-left: 0;
}
.zalen li a {
  color: #00155e;
}
.no-touch .zalen li a:hover {
  color: #00155e;
}

/* */
/* MOBILE NAV */
/* */
.mobilenav-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  z-index: 200;
  opacity: 0;
}

.mobilenav-overlay ul {
  margin: 0px auto;
  text-align: center;
  padding: 0;
  list-style-type: none;
  list-style: none;
}

.mobilenav-overlay li {
  font-size: 1.4rem;
  color: #333;
  border-bottom: 1px solid #eee;
}

.mobilenav-overlay li:last-child {
  border-bottom: none;
}

.mobilenav-overlay li a {
  display: block;
  color: #333;
  padding: 15px;
  text-decoration: none;
  opacity: 0.5;
  cursor: pointer;
  vertical-align: middle;
  letter-spacing: 1px;
  font-family: "FishmongerECS";
  font-size: 1.6rem;
  text-decoration: none;
  text-transform: uppercase;
}

.no-touch .mobilenav-overlay li a:hover {
  background: #1692c5;
  color: #fff;
  opacity: 1;
}

.mobilenav-trigger {
  background: url('../img/trigger.png');
  cursor: pointer;
  float: right;
  height: 20px;
  margin: 4px 20px;
  width: 20px;
}

.mobilenav-trigger.activated {
  background-position: -20px 0;
}

#mce-error-response,
#mce-success-response {
  color: #333;
  padding-bottom: 20px;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.bold {
  font-weight: bold;
  color: #000A61 !important;
}
/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* FILTER HOMEPAGE */

.filter{
  box-sizing: border-box;
  padding: 0 20px 0 10px;
  margin: 0;
  list-style-type: none;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  /*justify-content: space-between;*/
}

.filter__item{
  padding: 6px 10px;
}

.filter__item a{
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  font-size: 18px;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

.filter__item a:hover{
  -webkit-text-stroke-color: #ECDC00;
  -webkit-text-fill-color: #ECDC00;
}

.filter__item--active{
  color: #ECDC00;
  -webkit-text-stroke-color: #ECDC00 !important;
  -webkit-text-fill-color: #ECDC00;
}

/* GRID HOMEPAGE */

.grid{
  margin: 36px 20px 0 20px;
  display: flex;
  flex-wrap: wrap;
}

.grid__item{
  width: 100%;
  margin-bottom: 54px;
}

.item__photo{
  width: 100%;
  height: auto;
  margin-bottom: 30px;
  position: relative;
}

.item__photo .category{
  position: absolute;
  top: 12px;
  right: 12px;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 0.5px;
  background-color: #ECDC00;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  padding: 0 4px 0 16px;
}

.item__photo .category p{
  margin: 0;
}

.item__photo a img{
  max-width: 100%;
}

.item__date {
  text-transform: uppercase;
  display: flex;
  font-size: 18px;
  margin-bottom: 16px;
  /*font-weight: 400;*/
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

.item__date .date{
  margin: 0;
}

.item__date .line{
  width: 32px;
  height: 2px;
  background-color: black;
  margin: 17px 9px 0;
}

.item__title a{
  color: black;
  font-family: FishmongerECS;
  text-transform: uppercase;
  font-size: 31.25px;
  margin: 0;
}

.item__title a:hover{
  color: black !important ;
}

.item__summary p{
  margin: 14px 0 16px;
}

.item__readmore{
  margin-bottom: 25px;
}

.item__readmore a{
  color: black;
  text-transform: uppercase;
  font-style: italic;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  letter-spacing: 0.5px;
}

.item__readmore a:hover{
  -webkit-text-stroke-color: black;
  -webkit-text-fill-color: black;
  border-bottom: 2px solid black;
}

.item__btn a {
  text-transform: uppercase;
  font-size: 20px;
  padding: 2px 16px;
  letter-spacing: 0.5px;
}

.item__btn--full{
  color: white;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
  -webkit-text-fill-color: white;
  background-color: #ECDC00;
  border: 2px solid #ECDC00;
}

.item__btn--full:hover{
  -webkit-text-stroke-color: black;
  -webkit-text-fill-color: black;
}

.item__btn--border{
  color: #ECDC00;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #ECDC00;
  -webkit-text-fill-color: #ECDC00;
  border: 2px solid #ECDC00;
  cursor: default;
}

/* LOAD MORE HOMEPAGE */

.loadmore{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 100px;
}

.loadmore a{
  margin-right: 20px;
  font-size: 20px;
  text-transform: uppercase;
  font-style: italic;
  padding-left: 16px;
  border-bottom: 2px solid black;
  color: black;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  -webkit-text-fill-color: black;
}

@media(min-width: 768px){

    /* GRID HOMEPAGE */

    .grid{
      justify-content: space-between;
      margin-top: 54px;
    }
    .grid__item{
      flex: 0 48%;
      margin-bottom: 72px;
    }
}

@media(min-width: 841px){

  /* FILTER HOMEPAGE */

  .filter{
    margin-top: 54px;
  }
}

@media(min-width: 1024px){

  /* GRID HOMEPAGE */

  .grid__item{
    flex: 0 31%;
    
  }
}

@media(min-width: 1100px){

  /* FILTER HOMEPAGE */

  .filter{
    justify-content: space-between;
  }

}

@media(min-width: 1180px){

  /* FILTER HOMEPAGE */

  .filter{
    max-width: 1135px;
    margin: 72px auto 0;
    padding: 0;
  }

  .filter__item:first-child{
    padding-left: 0;
  }

  .filter__item:last-child{
    padding-right: 0;
  }

  /* GRID HOMEPAGE */
  
  .grid{
    max-width: 1135px;
    margin: 72px auto 0;
  }

  /* LOAD MORE HOMEPAGE */

  .loadmore{
    max-width: 1135px;
    margin: auto;
  }

  .loadmore a{
    margin-right: 0;
  }
}


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (max-width: 1180px) {
    .owl-carousel .owl-item a > div {
      width: 100%;
      margin-left: auto;
      left: auto;
    }
    .owl-carousel .owl-item a div section {
      padding: 0 70px;
    }
}



@media only screen and (max-width: 900px) {
    header nav ul#main li {
      padding: 0 24px;
    }


    header nav ul#main li section.flyout {
      top: 50px;
    }

    header nav ul#main li figure {
      top: 14px;
    }

    .detail main section#wrapper > div.text {
      width: 100%;
    }

    .detail main section#wrapper > .right {
      width: 100%;
      padding: 0;
      margin-top: 20px;
      background: inherit;
    }
    .detail main section#wrapper .right .frame {
	  padding: 5%;
	}
    .detail main section#wrapper > .right .data {
      margin-top: 2em;
    }
    .detail main section#wrapper > .rel {
      width: 100%;
      padding: 0;
      background: inherit;
    }
    .zalen li {
      display: block;
      padding: 0;
      margin: 0;
    }
}

@media only screen and (max-width: 840px) {


    header nav ul#main li {
      padding: 0 11px;
    }
    header nav ul#main li strong {
      font-size: 20px;
    }

    .owl-carousel .owl-item a > div {
      position: static;
    }
    .owl-carousel .owl-item a div section {
      padding: 0;
      width: 100%;
    }
    .owl-carousel .owl-item a div section div {
      width: auto;
      padding: 20px;
    }

}

@media only screen and (max-width: 840px) {
  .timeline_top {
    display: none;
  }
  .timeline_bottom {
    margin-top: 20px;
  }
  .timeline_top li,
  .timeline_bottom li {
    width: 14%;
  }
  .home #timeline {
    display: none;
  }
  .home .owl-carousel {
    margin-top: 158px;
  }

}

@media only screen and (max-width: 840px) {

  .main-header {
    position: fixed;
  }


.main-header nav ul {
    display: none;
  }

  .main-header nav a#logo {
    height: 31px;
    width: 76px;
  }

  .main-header nav a#logo figure#top {
    display: none;
  }

  .main-header nav ul {
    /*display: none;*/
    clear: both;
  }

  .main-header nav ul#main {
    margin: 20px 0 0 0;
    float: none;
    border: none;
    width: 50%;
  }

  .main-header nav ul#main li {
    float: none;
    border: none;
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: left;
  }

  .main-header nav ul#main li.flyout:hover section.flyout {
    display: none;
  }

  .main-header nav ul#main li.flyout.blue:hover {
    background-color: transparent;
      color: #0091c8;
    } .main-header nav ul#main li.flyout.blue:hover a {color:#0091c8;}

    .main-header nav ul#main li.flyout.yellow:hover {
      background-color: transparent;
      color: #febe10;
    } .main-header nav ul#main li.flyout.yellow:hover a {color:#febe10;}

    .main-header nav ul#main li.flyout.green:hover {
      background-color: transparent;
      color: #00A651;
    } .main-header nav ul#main li.flyout.green:hover a {color:#00A651;}

    .main-header nav ul#main li.flyout.pink:hover {
      background-color: transparent;
      color: #ce118c;
    } .main-header nav ul#main li.flyout.pink:hover a {color:#ce118c;}

    .main-header nav ul#main li.flyout:hover {
      padding-left: 0px;
    }

    .main-header nav ul#sub {
      width: 50%;
      float: left;
      margin-top: 45px;
      right: 20px;
    }
    .main-header nav ul#sub li {
      width: 100%;
      text-align: right;
    }

    .main-header nav ul#sub li a {
      font-size: 20px;
    }

    .main-header nav ul#sub li.facebook > span {
      display: none;
      margin: 0;
    }

    .main-header nav ul#sub li.facebook span {
      margin: 0;
    }
    .main-header nav ul#sub li img.m {
      margin-bottom: 6px;
    }
    #hamburger {
      display: block;
      height: 20px;
      width: 30px;
      position: absolute;
      right: 20px;
      top: 26px;
      cursor: pointer;
      background-image: url(../img/nav-figure.svg);
      background-position: -30px center;
    }

    #hamburger.active {
      background-position: left center;
  }

  section.facebook ul li {
    width: 100%;
    margin: 0 0 5% 0;
  }

  .home .owl-carousel {
    margin-top: 74px;
  }

  .owl-nav {
    display: none;
  }

  main section#wrapper {
    margin-top: 87px;
  }

  .detail main section#wrapper > div.text {
    width: 100%;
    margin: 0;
  }

  .detail main section#wrapper > .right {
    width: 100%;
  }

  .detail main section#wrapper ul#banners li {
    width: 100%;
    margin-right: 0;
  }
  li.facebook {
    display: none;
  }


  footer p {
    font-size: 14px;
    color: #666;
    padding-top: 14px;
    float: none;
    text-align: center;
  }
  footer section strong {
    display: none;
  }

  .agenda .timeline {
    margin-top: 87px;
  }

  .timeline_lastyear,
  .timeline_lastmonth,
  .timeline_nextmonth,
  .timeline_nextyear {
    margin: 0 24px;
  }
  .timeline {
      margin: 105px auto 28px;
    }
  section.home h1 {
    padding: 0;
    background: 0;
  }

}


@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
      /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}