/* BODY */
body { 
margin: 0px; 
position:relative;
/* background-color: rgb(255, 242, 228);*/
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
color: #2d2b31;
background: linear-gradient(rgb(255 239 197 / 50%), rgb(255 239 197 / 50%));
  background-repeat: repeat;
  background-size: 300px 300px;

    
}

a {
    color: #2d2b31;
    transition: 0.3s;
}

.content {
    animation: fadeIn 2s;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* FONTS */
@import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap');
@import url('https://fonts.googleapis.com/css?family=Reenie+Beanie&display=swap');


/* NEW CODE */


#scroll_fade_in {
  opacity: 0;
  transform: translateY(20%);
  transition: opacity 2s, transform 2s;
}

#scroll_fade_in.fade-up {
  opacity: 1;
  transform: translateY(0%);
}

.scroll-fade-in-right-wrapper {
  width: 100%;
  overflow-x: hidden;
}

#scroll_fade_in_right {
  opacity: 0;
  transform: translateX(50%);
  transition: opacity 2s, transform 2s;
}


  #scroll_fade_in_right.fade-in-right {
    opacity: 1;
    transform: translateX(0%);
  }



.scroll-fade-in-left-wrapper {
  width: 100%;
  overflow-x: hidden;
}

#scroll_fade_in_left {
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 2s, transform 2s;
}
 
  #scroll_fade_in_left.fade-in-left {
    opacity: 1;
    transform: translateX(0%);
  }






#feestjeContainer {
  display: flex;
  justify-content: center;
  align-items: center;  
  position: relative;
    background-color: rgba(0, 0, 0, 0.05);
}

@media screen and (max-width: 700px) {
    #feestjeContainer {
        background-color:none!important;
    }
    }

.feestje {
  display: none;
  transition: opacity 0.5s;
  opacity: 0; 
}

.feestje.active {
  display: flex;
  opacity: 1;
}



/* HEADER */
.header{ 
margin-left: auto;
margin-right: auto;
width: 100%;
border-bottom:3px solid rgba(94,159,156,1);
text-align: center;
padding: 15px;
background-color:white;
    box-shadow: -1px -17px 100px -50px;
}

.header titel{
line-height: 110%;
font-size: 40px;
text-transform: uppercase;
font-weight: 400;

}

.header slogan{ 
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
line-height: 1.15;
font-size: 14px;
font-weight: 400;
text-transform:uppercase;
} 



/* SLIDESHOW */
#slideshow {
  width: 100%;
  height: 500px;
animation: fadeIn 5s;
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
border-radius:10px;
  background-size: cover;
  background-position: center;
  position: absolute;
  z-index:0;
  opacity:0;
  transition: opacity 3s ease-in-out;
}
.active-slide{
  z-index:1;
  opacity:1;
}





.feestjes {
  width: 100%;
  height: 300px;
  background-size: cover;
  background-position: center;
    border-radius:10px;
}






/* CONTENT */
.logo{ 
text-align:center;  
width:100%;
height:auto; 
animation: fadeIn 2s;

}
 
.logo img {
    transition:.5s;
}

.logo img:hover {
    transform: scale(.975);
    opacity:.8;
    transition:.5s;
}

.logo .responsive {
  width: 70%;
  height: auto;
  max-width:500px;
}

 

.review {
background-color: rgba(199, 144, 53, 0.63);
	padding: 10px; 
	margin: 20px 0px; 
            }



footer{
padding: 50px;
bottom: 0;
width: 100%;
background-color:rgba(94,159,156,1);
color: #fff;  
margin-top: 5em;
text-align: center;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}

footer titel {
font-weight:bold;
 text-transform: uppercase; 
line-height:2rem; 
border-bottom:2px solid gold;
font-size:25px; 
}

footer .text_pulse {
    animation: pulse 4s;
}

footer a {
    color:white; 
    text-decoration:none; 
}

footer a:hover {
    color:grey;
}

icon {
    padding:5px; 
}




  .fade {
    transition: opacity 0.5s;
    opacity: 1;
  }

    #text-slideshow {
line-height: 1.6rem; 
margin-top:1.5em; 
    } 

.blok{ 
margin-left: auto;
margin-right: auto;
width: 60%;
text-align: center;
}
 
@media screen and (max-width: 700px) {
  .content p {
    font-size:15px !important;
  }
}
.content p {
    -webkit-font-smoothing: antialiased;   
line-height: 1.6rem;
font-family: Karla,Verdana,sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
}

.container {
max-width: 90%;
margin-left: auto;
margin-right: auto;
margin-top:4em;
}

.container_feestjes {
    max-width:90%;
    margin-top:2em;
    margin-left: auto;
    margin-right: auto; 
}

.container_feestjes_inner {
    max-width:100%; 
  /*background-color: rgba(0, 0, 0, 0.09);
background-color:rgba(187, 149, 87, 0.25);*/ 
 transition: .5s;
}

 .container_feestjes_inner:hover{
    transform: scale(.975);
    transition: .5s;
    }

.container titel {
font-weight:bold;
 text-transform: uppercase;
/*background-color: #f4cb48;*/
line-height:2rem;  
font-size:25px;  
}



.container_feestjes_inner titel {
font-weight:bold;
 text-transform: uppercase; 
line-height:2rem;  
font-size:25px; 
}
 

.column {
  float: left;
  width: 33%;
padding:10px;
}
 
.column_intro {
  float: left;
width:50%; 
/*background-color: rgba(0, 0, 0, 0.09);
background: linear-gradient(to top, rgba(207, 198, 171, 0.5), rgba(196, 196, 193, 0.5)), url("images/dunesbg.jpeg"); 
background: linear-gradient(to top, rgba(207, 198, 171, 0.5), rgba(196, 196, 193, 0.5)), url("images/glas_wijn_bg.jpeg"); 
background-size:cover; 
border-radius: 10px;*/
padding:10px;
transition:.5s;
}

   .column_intro:hover{
    transform: scale(.975);
    transition: .5s;
    }

 .column_slideshow {
  float: left;
padding:10px;
margin-top: -10px; 
animation: slide-in-right 2s ease-in-out both;
transform: translateX(100%);
width:50%; 
min-height:500px;
}

 @keyframes slide-in-right {
        0% {
          transform: translateX(100%);
        }
        100% {
          transform: translateX(0%);
        }
      }

.column_feestjes {
 /*background: linear-gradient(to top, rgba(207, 198, 171, 0.5), rgba(196, 196, 193, 0.5)), url("images/glas_wijn_bg.jpeg"); 
border: 1px solid rgba(33, 33, 33, 0.11);
   background: url(images/sandbg.jpg);
  background-repeat: repeat;
  background-size: 200px 200px;
border-radius: 10px;*/
    width:100%;
    padding:10px;
    float: left;
}
  .column_content{
            text-align:center;
            padding:10px;
        }


 .column_overons{
            padding:50px;text-align:center; margin-left:5%; margin-right:5%;
        }


/* TELEFOOOOOOOOOOOONN */


@media screen and (max-width: 700px) {
  .column {
    width: 100% !important; 
  }
    
    
    .column_intro {
width:100% !important;
background-color:transparent!important;
border:transparent !important;
border-radius:0px;
}
    
 
 .column_slideshow {
margin-top: 0px; 
animation: fadeIn 5s;
width:100%!important; 
transform: translateX(0%);
min-height:500px;
}
    
.column_feestjes {
 width:100% !important;
background:transparent!important;
border:transparent!important;
}
    
    .container_feestjes_inner { 
        border-radius:0px !important;
    }
    
.column_overons{
            padding:20px;text-align:center; margin-left:0; margin-right:0;
        }
    
  .container{
      max-width:100%!important;
      text-align:center;
    }
    
     .container_feestjes{
      max-width:100%!important;
      text-align:center;
    margin-top:0em;
    }
    
    .content p {
        text-align: center;
    }
    
    
    
    .content titel {
        text-align: center;
    }
    
    
    .column_header {
        text-align: center !important;
    }

    
    .column_content{
            text-align:center !important;
            padding:10px;
        }
    
    
    .wrapper ul{
  left: 45% !important;
    }
    
    
}

   


.btn{
background: rgba(94,159,156,1);
color: #fff;
padding: 1em 5em;
opacity: .9;
text-transform: uppercase;
font-size: 14px;
line-height: 4;
border-radius: 4px;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
text-decoration: none;
}

.btn:hover{
    background:#cfa92d;
    transition:.3s;
}


@media screen and (max-width: 1000px){
.btn {
padding: 10px 4px!important;
}
}

 

.btn_contact{
background: #cfa92d;
color: #fff;
padding: 1em 5em;
opacity: .9;
text-transform: uppercase;
font-size: 14px;
line-height: 6;
border-radius: 4px;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
text-decoration: none;
}

.btn_contact:hover{
    background:#cfa92d;
    transition:.3s;
}


@media screen and (max-width: 700px){
.btn_contact {
padding: 10px 30px!important;
font-size:11px;
}
}


/* NAVIGATIE */

*{
 
  box-sizing: border-box; 
}

.wrapper{
  position: fixed;
  top: 0; 
  right: -100%;
  height: 100%;
  width: 100%;
z-index:10;
  background: #000; 
  transition: all 0.6s ease-in-out;
}
#active:checked ~ .wrapper{
  /*left: 0;*/
  right:0;
}
.menu-btn{
  position: absolute;
  z-index: 11;
  right: 20px;
  /*left: 20px; */
  top: 20px;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer; 
  transition: all 0.3s ease-in-out;
}
.menu-btn span,
.menu-btn:before,
.menu-btn:after{
	content: "";
	position: absolute;
	top: calc(50% - 1px);
	left: 30%;
	width: 40%;
	border-bottom: 2px solid #000;
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu-btn:before{
  transform: translateY(-8px);
}
.menu-btn:after{
  transform: translateY(8px);
}


.close {
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transition: background .6s;
}

/* closing animation */
#active:checked + .menu-btn span {
	transform: scaleX(0);
}
#active:checked + .menu-btn:before {
	transform: rotate(45deg);
  border-color: #fff;
}
#active:checked + .menu-btn:after {
	transform: rotate(-45deg);
  border-color: #fff;
}
.wrapper ul{
  position: absolute;
  top: 60%;
  left: 50%;
  height: 90%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
}
.wrapper ul li{
  height: 10%;
  text-transform: uppercase;
  margin: 30px 0;
}
.wrapper ul li a{
  text-decoration: none;
  font-size: 30px;
  font-weight: 500; 
  color: #fff;
  border-radius: 50px;
    margin-top:20px;
  opacity: 0;
  transition: all 0.3s ease;
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrapper ul li a:after{ 
  content: "";  
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 50px;
  transform: scaleY(0);
  z-index: -1;
  transition: transform 1s ease;
}
.wrapper ul li a:hover:after{
  transform: scaleY(1);
}
.wrapper ul li a:hover{
  color: #cfa92d;
}
input[type="checkbox"]{
  display: none;
}
 
.wrapper ul li a:active ~ label[for="active"]{
    pointer-events: auto;
    cursor: pointer;
}

.wrapper ul li a {
    cursor: pointer;
}


#active:checked ~ .wrapper ul li a{
  opacity: 1;
}
.wrapper ul li a{
  transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translateX(100px);
}
#active:checked ~ .wrapper ul li a{
	transform: none;
	transition: 0.3s ease;
  transform: translateX(-100px);
}