/*
Theme Name: Blijdorp Festival 2018
Theme URI: www.blijdorpfestival.nl
Author: Howling | Martijn Wolfs
Author URI: http://www.howling.nl
Description: The Wordpress theme for Blijdorp Festival 2018
Version: 1.0
*/


body{
    background: #f4f45b;
    font-family: "proxima-nova",sans-serif;
}

h1, h2, h3{
    font-family: "proxima-nova",sans-serif;
    font-weight: bold;
}
h2{
    font-size: 42px;
    letter-spacing: 1px;
    margin-bottom: 20px;
    line-height: 1;
}
h3{
    font-size: 32px;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], textarea{
    border-radius: 0;
    box-shadow: 0;
    border: 0;
    padding-left: 12px;
}

.centered{
    display: flex;
    align-items: center;
    justify-content: center;
}

a{
    font-weight: bold;
    text-decoration: underline;
    color: #0a0a0a;
}
.button{
    background: #98f5aa;
    border-radius: 0;
    font-family: "proxima-nova",sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    padding: 15px 40px;
    font-weight: bold;
    color: #000;
    text-decoration: none;
}
.secondary.button{
    background: #f4f45b;
}
.button:hover, .secondary.button:hover{
    background: #000;
    color: #fff;
}

.cover{
    width: 100%;
    height: 90vh;
    z-index: 10;
    background: url(img/achtergrond.jpg) no-repeat center center / cover;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
@media screen and (min-width: 64em) {
    .cover{
        height: 100vh;
    }
}
.single.cover{
    height: auto;
    position: relative;
}
.single.cover h1{
    padding: 2.8em 1em 1.2em 1em;
    line-height: 1.2;
    font-size: 50px;
    position: relative;
    z-index: 5;
}
.single.cover .overlayy{
    background: rgba(244, 244, 91, .7);
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2;
}
@media screen and (min-width: 64em) {
    .single.cover h1{
        padding: 3em 1em 2.5em 1em;
        font-size: 50px;
    }
}
#logo{
    visibility: hidden;
    height: 100%;
    max-height: 90vh;
}
#title{
    width: 200px;    
    float: left;
}
@media screen and (min-width: 64em) {
    #title{
        margin-left: 10px;
    }
}
.date{
    position: absolute;
    bottom: 15px;
    left: 25px;
    width: 90%;
    max-width: 800px;
    text-align: left;
}
@media screen and (min-width: 64em) {
    .date{
        bottom: 25px;
        left: 40px;
    }
}
.date div{
    width: 40px;
    float: left;
    text-align: center;
    line-height: 1;
    font-size: 18px;
    text-transform: uppercase;
    margin-right: 20px;
    font-weight: bold;
}
.date span{
    font-size: 40px;
}
.date p{
    font-weight: bold;
    font-size: 22px;
    line-height: .9;
    margin-top: 5px;
}
@media screen and (min-width: 64em) {
    .date p{
        font-size: 26px;
    }
}
.date p a{
    display: inline-block;
    margin-top: 10px;
    font-size: 15px;
    color: #000;
    letter-spacing: 1px;
    background: yellow;
    padding: 8px 20px;
    text-transform: uppercase;
}

.menu-container{
    position: fixed;
    top: 5px; left: 10px; right: 10px;
    z-index: 2;
}
@media screen and (min-width: 64em) {
    .menu-container{
        top: 10px;
    }
}
.menu-container .grid-container{
    border-radius: 10px;
    padding: 12px;
}
.menu a{
    color: #000;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 17px;
    transition: all .25s ease;
}
.menu a:hover{
    background: #f4f45b;
}
#kleinlogo{
    opacity: 0;
    transition: all .4s ease;
}
#tekst{
    transform: translate(-480px, 0);
    transition: all .4s ease;
}


.sticky #kleinlogo, #title:hover #kleinlogo{
    opacity: 1;
}
.sticky #tekst,  #title:hover #tekst{
    transform: translate(0, 0);
}


p{
    font-size: 17px;
    text-align: justify;
    font-weight: Medium;
}
.nopadding{
    padding: 0;
    margin: 0;
}
.padding{
    padding: 20px;
}
@media screen and (min-width: 64em) {
    .padding{
        padding: 40px 75px;
    }
}
.green{
    background: #98f5aa;
}
.dark{
    background: #000;
    color: #fff;
}
.block-image{
    min-height: 450px;
    object-fit: cover;
}


.responsive-embed.widescreen, .flex-video.widescreen{
    padding-bottom: 56%;
    margin-bottom: 0;
}

.cls-1 {
    fill: #fff;
}

.cls-2 {
    fill: #d3d3d3;
}

.cls-3 {
    fill: url(#linear-gradient);
}

.cls-4,
.cls-7 {
    fill: none;
    stroke: #000;
    stroke-miterlimit: 10;
}

.cls-4 {
    stroke-width: 7.32px;
}

.cls-5 {
    fill: url(#linear-gradient-2);
}

.cls-6 {
    fill: url(#linear-gradient-3);
}

.cls-7 {
    stroke-width: 5.49px;
}

.cls-8 {
    fill: url(#linear-gradient-4);
}

.cls-9 {
    fill: url(#linear-gradient-5);
}

.cls-10 {
    fill: url(#linear-gradient-6);
}

.cls-11 {
    fill: url(#linear-gradient-7);
}

.cls-12 {
    fill: url(#linear-gradient-8);
}

.cls-13 {
    fill: url(#linear-gradient-9);
}

.cls-14 {
    fill: url(#linear-gradient-10);
}
.footer{
    color: #fff;
    background: #000;
    padding: 50px 20px 50px 20px;
    font-size: 80%;
}
@media screen and (min-width: 64em) {
    .footer{
        padding: 5em 2em;
    }
}
.footer-logo{
    width: 150px;
    margin-bottom: 3em;
}
.footer a{
    color: #fff;
    padding: 6px 0;
    font-size: 15px;
}
.footer a:hover{
    background: #000;
    color: yellow;
}
.footer hr{
    border-bottom: 1px solid #fff;
    margin-bottom: 0;
    margin-right: 0.9375rem;
    margin-left: 0.9375rem;
    max-width: 100%;
}







.button_container {
  position: fixed;
  top: 30px;
  right: 20px;
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 100;
  transition: opacity .25s ease;
}
.button_container.active .top {
  transform: translateY(11px) translateX(0) rotate(45deg);
  background: #000;
}
.button_container.active .middle {
  opacity: 0;
  background: #000;
}
.button_container.active .bottom {
  transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #000;
}
.button_container span {
  background: #000;
  border: none;
  height: 5px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .35s ease;
  cursor: pointer;
}
.button_container span:nth-of-type(2) {
  top: 11px;
}
.button_container span:nth-of-type(3) {
  top: 22px;
}

.overlay {
  position: fixed;
  background: #98f5aa;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
}
.overlay.open {
  opacity: 1;
  visibility: visible;
  height: 100%;
}
.overlay.open li {
  animation: fadeInRight .5s ease forwards;
  animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
  animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
  animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
  animation-delay: .50s;
}
.overlay nav {
  position: relative;
  height: 70%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;
  font-weight: 400;
  text-align: center;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li {
  display: block;
  height: 25%;
  height: calc(100% / 4);
  min-height: 50px;
  position: relative;
  opacity: 0;
}
.overlay ul li a {
  display: block;
  position: relative;
  color: #000;
  text-decoration: none;
  overflow: hidden;
  text-transform: uppercase;
    font-weight: bold;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%;
}
.overlay ul li a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  transform: translateX(-50%);
  height: 3px;
  background: #000;
  transition: .35s;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}



.news .inner{
    padding: 3em;
}
.news img{
    width: 100%;
    height: 70vh;
    max-height: 600px;
    object-fit: cover;
}


.grid-item{
    position: relative;
}
.grid-overlay{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index 1;
    background: linear-gradient(to top, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0));
}
.grid-item h2{
    position: absolute;
    z-index: 3 !important;
    bottom: 1rem;
    left: 2.2rem;
    right: 2.2rem;
    color: #fff;
    line-height: 1;
}
.grid-item h2 a{
    color: #fff;
    display: block;
    font-size: 1rem;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid #fff;
    padding: 0;
    height: 0;
    overflow: hidden;
    width: 150px;
    text-align: center;
    transition: all .3s ease;
    line-height: 1;
    margin: 1rem 0 0 0;
}
.grid-item:hover h2 a{
    height: 35px;
    padding-top: 8px;
}




.grid-item img{
    width: 100%;
    object-fit: cover;

}


.large-width, .medium-width, .small-width{
    width: 100%;
}
@media screen and (min-width: 64em) {
    .large-width{
        width: 50%;
    }
    .medium-width{
        width: 33.333333%;
    }
    .small-width{
        width: 25%;
    }
}
.large-height img{
    height: 600px;
}
.medium-height img{
    height: 450px;
}
.small-height img{
    height: 300px;
}



.green-background{
    background: #98f5aa;
}

.questions{
    padding-top: 5em;
    padding-bottom: 5em;
    max-width: 1100px;
}
div.panel { 
    display: none; 
    text-align: left;
}
div.panel.active {
    display: block;
    font-size: 1em;
}
.panel p{
    margin: 1.2em 0;
    font-size: 1em;
}

.questions .link{
    background: #000;
    display: block;
    padding: .6em 2em;
    text-decoration: none;
    margin-bottom: 1em;
    color: #fff !important;
}