#navbar {
  overflow: hidden;
  background-color: #311847;
  padding: 40px 10px;
  transition: 0.4s;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
  opacity:0.9;
  
}

#navbar #logo {
  transition: 0.4s;
  max-width: 100%;
  height:auto;
  
}


.nav-link{
	font-family: 'Permanent Marker', cursive;
	color:white;
	margin-left: 50px;
	padding: 10px 20px;
	text-align: center;
}

.nav-link:hover{
	background-color: white;
	border-radius:15px;
	padding: 10px 20px;
	color: #EF5D60;
	
}

.sr-only{
	color: #EF5D60;
	border-color: white;
	border-radius:15px;
		
}

.menu-button{
	color: white;
	font-family: 'Permanent Marker', cursive;
	border-radius:15px;
	padding: 10px 20px;
}

.menu-button:hover{
	color: #EF5D60;
	background-color: white;
	border-radius:15px;
	padding: 10px 20px;
}

.menu-button:active, .menu-button:focus{
	color: #EF5D60;
	background-color: white;
	border-radius:15px;
	padding: 10px 20px;
}

.navbar-toggler{
	border:none !important;
	outline:none !important;
	box-shadow:none !important;
}

.dark-overlay{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	min-height: 700px;
	background: rgba(0,0,0,0.7);
}

.cocktail-intro{
	margin-bottom: 50px;
}

.container-titel{
	padding-top: 400px;
	padding-bottom: 120px;
}

.titel{
	font-family: 'Chelsea Market', cursive;
	color: white;
	text-shadow: 2px 2px 0px black;
	font-size:60px;
}

.text-cocktails{
	color:white;
	margin-top: 50px;
}


.purple-background{
	background-color: #A01A7D;
}

.cocktail-explosion{
	max-width: 500px;
	height:auto;
}


.gin-column{
	margin-bottom: 50px;
}

.gin-title{
	font-family: 'Chelsea Market', cursive;
	color: white;
	font-size:30px;
}

.gin-subtitle{
	color: white;
	font-size:20px;
}

.gin-text{
	color: white;
	margin-top: 20px;
	font-size: 13px;
	padding-left: 20px;
	padding-right: 20px;
}

.winkel-button{
	font-family: 'Chelsea Market', cursive;
	color: #A01A7D;
	background-color: white;
	border-color: #E09F7D;
	border-style: solid;
	border-width: 3px;
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
}

.winkel-button:hover{
	font-family: 'Chelsea Market', cursive;
	color: white;
	background-color:#A01A7D;
	border-color: white;
	border-style: solid;
	border-width: 3px;
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;}

.dark-purple-background{
	background-color: #311847;
	clear:left;
	padding-bottom: 50px;
	padding-top: 50px;
}

.alg-voorwaarden{
	text-decoration: none;
	color: white;
	padding: 7px;
	font-size: 12px;
}

.alg-voorwaarden:hover{
	text-decoration: none;
	color: white;
	border: solid 3px;
	border-color:white;
	padding: 5px;
	font-size: 12px;
}

.footer-text{
	color: white;
	font-size: 12px;
}
  
 .onze-sponsoren{
	color: white;
	font-size: 12px;
	margin-left: auto;
    margin-right: 0px;
 }
 
  .brands {
     max-width: 100%;
     height:auto;
 }

 .brands_slider_container {
     height: 100px;
     width:100px;
     border: solid 0px #e8e8e8;
     margin-left: auto;
     margin-right: auto;
 }

 .brands_item img{
     max-width: 100px;
     height:auto;
 }


 .brands_nav {
     position: absolute;
     top: 50%;
     -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     -o-transform: translateY(-50%);
     transform: translateY(-50%);
     padding: 5px;
     cursor: pointer;
 }

 .brands_nav i {
     color: #e5e5e5;
     -webkit-transition: all 200ms ease;
     -moz-transition: all 200ms ease;
     -ms-transition: all 200ms ease;
     -o-transition: all 200ms ease;
     transition: all 200ms ease;
 }

 .brands_prev {
     left: 10px;
 }

 .brands_next {
     right: 10px;
 }
 
  .carousel .carousel-inner{
  	height:768px
}

.carousel-inner .carousel-item img{
	min-height:768px;
	object-fit:cover;
}

 @media screen and (max-width: 580px) {
	 
	 .navbar {
	    padding: 10px 10px !important;
	  }
	  
	  .onze-sponsoren{
		margin-left: auto;
		margin-right: auto;
		margin-top: 10px;
		margin-bottom: 10px;
	  }
	  
	  .brands_slider_container{
		margin-top: 10px;   
		 
	   }
	   
	  .footer-text{
		margin-bottom: 10px;
	  }
	  

}

@media(max-width:768px){
	
	
	.carousel .carousel-inner{
	height:auto
	 }
	
	.footer{
		text-align: center;
	}
	
	.alg-voorwaarden{
	 	margin: 50px 0px 0px 0px;
	 	display: block;
	}
	
	.alg-voorwaarden:hover{
	 	margin: 50px 0px 0px 0px;
	 	display: block;
	}

	.gin-text{ 
		padding-left: 60px;
		padding-right: 60px;
	}
	
	.cocktail-intro{
	margin-top: 270px;
	}
 
}

@media(max-width:991px){
	
	.nav-link{
		margin-left:8px;
	}
	
		.cocktail-intro{
	margin-top: 250px;
	}

}

@media(max-width:1140px){
	

}

@media(max-width:1200px){
	
	.titel{
		font-size: 40px;
	}
 
}