/* CSS Document */
/* Thank you for looking at this code */
/* copyright Karin Bilang, atelier ono */


     
	/* ======================================================== */
  	/* ============== SCHRIFTART GOOGLE FONTS ================ */
    /* ======================================================== */


        @import url('https://fonts.googleapis.com/css?family=Teko:300,400&display=swap');
	

	/* ======================================================== */
	/* ======= EIGENE SCHRIFTARTEN DAFONT.COM EINBETTEN ======= */
	/* ======================================================== */
		

		@font-face {
        font-family:'lakersregular';
        src:url("../schriftarten/Lakers_Regular.otf");
		font-weight:600;
    	}
		


	/* ====================================================== */
	/* ===================== CSS RESET ====================== */
	/* ====================================================== */	


		*{
		 box-sizing:border-box; 
		 margin:0; 
		 padding:0;
		 }	
		

	/* ====================================================== */
	/* ================ ALLGEMEINE HTML TAGS ================ */
	/* ====================================================== */	


	body {
		background-color:rgba(36,35,35,1);
		color:white;
		font-family:'Teko', 'lakersregular', sans-serif;
		font-weight:300;
		font-size:1.5rem;
		letter-spacing:1px;
		}


	h1, h2 {
		font-family:'lakersregular';
		font-size:4rem;
		text-align:center;
		line-height:1.3;
		z-index: 20;
		}

	h3 {
		font-family:'lakersregular';
		font-size:2rem;
		line-height:1.3;
		}

	h4 {
		font-family:'lakersregular';
		font-size:4rem;
		margin:2rem 0rem;
		text-align:center;
		line-height:1.3;
		z-index: 20;
		}
	
	.flex_zentriert {
		display:flex;
		justify-content: center; /*horizontal*/
		align-items: center; /*vertikal*/
		}

	.flex_zentriert-wrap {
		display:flex; /*umbrechen*/
		flex-wrap:wrap;
		justify-content: center; /*horizontal*/
		align-items: center; /*vertikal*/
		}


	a:link {
		color:white;
		text-decoration:none;
		transition: color 0.3s ease-in-out;
		}


	a:visited {
       	color:white;
        }

	
	a:hover {
		color:#BE9C5C;
		}

	
	a:active {
        color:rgba(36,35,35,1);
        }


	ul {
		margin-left:1rem;
		}		


	
	/* ====================================================== */	
	/* ============== HEADER LAYOUT STARTSEITE ============== */
	/* ====================================================== */


	#tophead {
		padding:1rem 1rem;
		text-align:center;
		}

	#containerstartseite .flex_zentriert {
		max-width:1900px;
		}

	#headerbild {
		background-image:url("../bilder/schmiedstube-bar-ambiente.jpg");
		background-attachment:scroll;
		background-position:center;
		background-repeat:no-repeat;
		background-size:cover;
		height:900px;
		width:100%;
		}


	nav ul  {
 		font-family: 'lakersregular';
  		font-size:1.5rem;
		list-style-type: none;
  		margin: 0;
  		padding: 0;
 		overflow: hidden;
  		position:fixed;
		top:3.5rem;
		z-index:100;	
		}

	nav ul li {
  		float: left;
		}

	nav ul li a {
 		color: white;
		display: block;
  		text-align: center;
  		vertical-align:top; 
  		text-decoration: none;
		margin-left:2.8rem;
		}

    nav .aktiv {
		border-bottom:0.5rem solid #BE9C5C;
		padding:0rem 0.5rem 0rem 0.5rem; /*länge goldener rand unten*/
		}

	#hamburger {
		cursor:pointer;
		position:fixed;
		display:none;
		left:0.3rem;
		top:3rem;
		font-size:2.5rem;
		padding:0.5rem;
		width:4rem;
		heigth:4rem;
		text-align:center;
		z-index:200;
		}

	#socialmedia {
		display:flex;
		flex-direction:row;
		font-size:1.8rem;
		letter-spacing:1rem;
		position:absolute;
		right:2.5rem;
		top:3.5rem;
		z-index:2;	
		
		}


	#logozentriert {
		background-image:url("../bilder/logo_gross.png");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		height:500px;
		width:500px;
		position:absolute;
		left:0;	
		right:0;
		margin-left:auto;
		margin-right:auto;
		z-index:1;
		}
	
	.pfeil {
		bottom:7rem;
		height:6rem;
		position:absolute;
		right:4.9rem;
		}
	
	.scroll {
		bottom:13.5rem;		
		font-family:'lakersregular';
		font-size:1.5rem;
		position:absolute;
		right:3.5rem;
		}

	.back-to-top {
		color:#BE9C5C;
		cursor:pointer;
		font-size:2.5rem;
		position:fixed;
		bottom:1vh;
		right:1vw;
		width:50px;
		height:50px;
		}
	

	.tiki  {
		position:absolute;
		right:10rem;
		top:3.5rem;
		z-index:10;

		}

	.tiki img {
		width:100px;
		}


	/* ====================================================== */
	/* =================== LAYOUT STRIPES =================== */
	/* ====================================================== */


		.parallax {
			background-attachment:fixed;
			background-position:center;
			background-repeat:no-repeat;
			background-size:cover;
			height:700px;
			}

		.parallax.drunk {
			background-image:url("../bilder/makemedrunk.jpg");
			}

		.parallax.tap {
			background-image:url("../bilder/bier-auswahl.jpg");
			}

		.parallax.gin {
			background-image:url("../bilder/gin.jpg");
			}

		.parallaxstripes {
			background-image:url("../bilder/streifen-hintergrund.jpg");
			background-attachment:scroll;
			background-position:center;
			background-repeat:no-repeat;
			background-size:cover;
			height:500px;
			}

		.parallaxstripes.unten {
			height:200px;
			}
		
		.parallaxstripes {
			display:flex;
			align-items: center;
			justify-content: center;
			height:500px;
			}

		.parallaxstripes div {
			padding:0rem 1rem 0rem 1rem;
			}

		.rahmen {
			border-bottom:0.5rem solid #BE9C5C; /*bleibt ist ein designelement */
			display:inline;
			}
		

	/* ====================================================== */
	/* ================= NEWSBOX 1 STARTSEITE =============== */
	/* ====================================================== */

		
		.border {
		border-top:0.5px solid white;
		border-bottom:0.5px solid white;
		padding-top:1rem;
		}
		

        .newsbox {
			 align-content:center;
			 display:flex;
			 justify-content:center;
			 height:auto;
			
			 }
         
		.newsbox_text {
			padding:4rem 4rem;
			position:relative;
			text-align:center;
			width:33.333333%;
			heigth:auto;
			}
        
        .newsbox_bild {
			background-image: url("../bilder/getraenke.jpg");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
			width:33.333333%;
			height:auto;
			}

		.logo_zystigsklub_startseite { /*STARTSEITE*/
			display:flex;
			justify-content: center;
			align-content: center;
			}

		.logo_zystigsklub_startseite img { /*STARTSEITE*/
			height:155px;
			}

		
		.blitz-startseite { /*STARTSEITE*/
			margin:0 auto;
			transition:transform ease-in-out 0.3s;
			animation:herzschlag 1s ease-in-out infinite alternate;
			}

		.blitz-startseite img { /*STARTSEITE*/
			height:140px;
			}

		/* Animationskeyframes */

		@keyframes herzschlag {
					0% {transform:scale(1);}
					50% {transform:scale(1.1);}
					100% {transform:scale(1);}
					
					0% {rotate:scale(1);}
					50% {transform:scale(1.1);}
					100% {transform:scale(1);}
					}


	/* ====================================================== */
	/* ======= SECTION TEXT LINKS 50% BILD RECHTS 50% ======= */
	/* ====================================================== */
		

		.container5050 {
			display:flex;
			justify-content: center;
			height:auto;
			}
	
		.containerboxlinks {
			margin:2rem 0rem 2rem 2rem;
			width:50%;
			}

		.containerboxlinks img {
			height:700px;
			display:block;
			margin:0;
			}

		.containerboxlinks img:hover {
			background-color: rgba(0,0,0,.8);
			opacity:0.6;
			transition:opacity .5s;
			}

		.containerboxlinks a {
			display:block;
			margin:0 1rem;
			z-index:20;
			}

		.containerboxrechts {
			background-image: url("../bilder/drink-tequila.jpg");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
			width:50%;
			}

		.drinks_ueberschrift {
			font-size:6rem;
			}

		.drinks_ueberschrift_mobile {
			display:none;
			}


		/* ====================================================== */
		/* ================= NEWSBOX 2 STARTSEITE =============== */
		/* ====================================================== */


        .newsbox_2.flex_zentriert {
			height:auto;
		    }
         
		.newsbox_2_text {
			text-align:center;
			width:400px;
			display:flex;
			justify-content: space-between;
			}

		.newsbox_2_text img {
			height:500px;
			}
        
     
		/* ====================================================== */
		/* ================== GUTSCHEIN FORMULAR ================ */
   		/* ====================================================== */  


		.section_gutschein {
			border:1px solid #BE9C5C;
			margin:0 auto;
			margin:1rem;
			padding:2rem 0.5rem 2rem 0rem;
			text-align:center;
			width:800px;
			}

		form div {
			display:flex;
			justify-content: space-between;
			width:auto;
			margin:0 auto;
			}	

		.gutschein_formularfeld {
			border:none;
			border-bottom: 1px solid #BE9C5C;
			background-color:transparent;
			box-shadow:none;
			color:white;
			font-size:1.5rem;
			font-family:'Teko';
			font-weight:300;
			margin:1.5rem 0rem 0rem 0rem;
			outline:0 transparent;
			}
		
		.gutschein_betrag {
			background-color:transparent;
			border:none;
			border: 1px solid #BE9C5C;
			color:white;
			font-size:1.5rem;
			font-family:'Teko';
			font-weight:300;
			margin:2rem 0rem 1rem 0rem;
			padding-left:0.5rem;
			outline:0 transparent;
			width:800px;
			}

		::placeholder {
			color:#BE9C5C;
			font-size:1.5rem;
			font-family:'Teko';
			font-weight:300;
			}

		

		/* ====================================================== */		
		/* ============== HEADER LAYOUT FOLGESEITEN ============= */
		/* ====================================================== */
		

		.headerbildfolgeseiten {
			background-attachment:scroll;
			background-position:center;
			background-repeat:no-repeat;
			background-size:cover;
			height:500px;
			width:100%;
			}

		.events {
			background-image:url("../bilder/events.jpg");
			}

		.galerie {
			background-image:url("../bilder/schmiedstube-bar-ambiente-1.jpg");
			background-position:bottom!important;
			}

		.kontakt {
			background-image:url("../bilder/champagner-gläser.jpg");
			}

		.datenschutz_impressum {
			background-image:url("../bilder/streifen-hintergrund.jpg");
			}

		.logofolgeseiten {
			background-image:url("../bilder/logo_gross.png");
			background-size: contain;
			background-repeat: no-repeat;
			height:350px;
			width:350px;
			position:absolute;
			top:7rem;
			z-index:1;
			}
				
		/* ====================================================== */	
		/* =========== EVENTSEITE - BOXEN OBEN ================== */
		/* ====================================================== */	
			

		#section_box {
			display:flex;
			justify-content:center;
			width:auto;
			margin-top:5rem;
			}

		.einleitungtext {
			display:flex;
			justify-content: center;
			align-items: center;
			height:250px;
			}	

		.box_zystigsklub {
			display:flex;
			justify-content:center;
			align-items:center;
			width:450px;
			flex-wrap:wrap;
			}

		.box_bookyourevent {
			display:flex;
			justify-content:center;
			align-items:center;
			flex-wrap:wrap;
			height:200px;
			width:450px;
			}

		.ueberschriftbox {
			padding-top:1rem;
			}

		.text {
			text-align:center;
			display:flex;
			justify-content: center;
			align-items:center;
			width:400px;
			height:150px;
			z-index:3;
			}
		
		.logo_zystigsklub { /*EVENTPAGE*/
			display:flex;
			justify-content: center;
			width:400px;
			}
	
		.logo_zystigsklub img { /*EVENTPAGE*/
			height:150px;
			}

		.blitz {   /*EVENTPAGE*/
			width:100px;
			margin-top:-1rem;
			position:absolute;
			transition:transform ease-in-out 0.3s;
			animation:herzschlag 1s ease-in-out infinite alternate;
			}
	
		.mehr_infos_button_1 {
			background-color:#BE9C5C;
			cursor:pointer;
			display:inline-block;
			font-weight: 400;
			flex-wrap:wrap;
			font-size:1rem;
			height:40px;
			padding: 0.5rem 1.8rem;
 			text-align: center; 
			text-transform:uppercase;
			z-index:5;
			}

		.mehr_infos_button_2 {
			background-color:#BE9C5C;
			cursor:pointer;
			display:inline-block;
			font-weight: 400;
			flex-wrap:wrap;
			font-size:1rem;
			height:40px;
			padding: 0.5rem 1.8rem;
			text-align: center; 
			text-transform:uppercase;
			z-index:5;
			}
	
		.box_mehr_infos_1 {
			background-color:rgba(36,35,35,1);
			border: solid 1px #BE9C5C;
			width:700px; 
			height:auto;
			position:absolute;
			padding:3rem;
			top:52rem;
			text-align:center;
			z-index:20;
			}

		.box_mehr_infos_2 {
			background-color:rgba(36,35,35,1);
			border: solid 1px #BE9C5C;
			height:auto;
			width:700px; 
			position:absolute;
			padding:3rem;
			top:52rem;
			text-align:center;
			}
		
		.schliessen_1 {
			color:#BE9C5C;
			cursor:pointer;
			font-size:2rem;
			position:absolute;
			right:-2.5rem;
			top:0;
			}

		.schliessen_2 {
			color:#BE9C5C;
			cursor:pointer;
			font-size:2rem;
			position:absolute;
			right:-2.5rem;
			top:0;
			}

		.discokugel  {
			height:300px;
			width:100%;
			margin-top:-8.2rem;
			margin-bottom:2rem;
			position:relative;
			z-index:-5;
			}
	

		/* ====================================================== */		
		/* ================== EVENTS CONTAINER ================== */
		/* ====================================================== */


		.eventcontainer {
			display:flex;
			flex-wrap:wrap;
			margin:0 auto;
			max-width:945px;
			}

		.eventdatumsbox {
			background-color: rgba(250,250,250,0.7);
			border-bottom:1px white solid; /* rahmen bleibt ist designelement*/
			color: rgba(36,35,35,1);
			height:150px;
			width:80px;
			}

		.datum {
			font-size:4rem;
			}

		.eventtagmonatbox {
			background-color: rgba(250,250,250,0.7);
			border-bottom:1px white solid; /* rahmen bleibt ist designelement*/
			color: rgba(36,35,35,1);
			height:150px;
			width:60px;
			display:flex;
			align-items:center;
			line-height:1;
			}

		.tagmonat {
			font-size:1.2rem;
			}

		.taganderefarbe {
			font-weight:400;
			}

		.eventbeschreibung {
			background-color: rgba(250,250,250,0.7);
			border-bottom:1px white solid; /* rahmen bleibt ist designelement*/
			color: rgba(36,35,35,1);
			height:150px;
			line-height:1;
			width:550px;
			display:flex;
			align-items:center;
			font-size:2rem;
			}		

		.eventmehrinfos {
			background-color: rgba(250,250,250,0.7);
			border-bottom:1px white solid; /* rahmen bleibt ist designelement*/
			color: rgba(36,35,35,1);
			height:150px;
			width:170px;
            /*padding-top:1.5rem;*/
            
			}

		.iconbox {
			background-color: rgba(250,250,250,0.7);
			border-bottom:1px white solid; /* rahmen bleibt ist designelement*/
			height:150px;
			width:80px;
			}

		.iconbox img {
			height: 40%;
			}

		.abstand {
			height:10rem;
			}

		.socialmedia_eventseite {
			font-size:1.8rem; 
			text-align:center;
			width:80px;
			}


	/* ====================================================== */		
	/* ================== BILDER GALERIE ==================== */
	/* ====================================================== */
		
		*::before,
		*::after{
			box-sizing: border-box;
			margin:0;
			padding:0;
			}
			
		.container {
			max-width:120rem;
			margin: auto;
			margin-bottom:12rem;
			width:80%;
			}
		
		.image-gallery {
			display:grid;
			align-items: center;
			justify-content: center;
			grid-template-columns: 20% 20% 20% 20%;
			grid-template-rows: auto;
			grid-gap:.5rem;
			grid-template-areas:
				'img-1 img-2 img-3 img-3' 
				'img-1 img-4 img-5 img-6' 
				'img-7 img-7 img-8 img-6'
				'img-10 img-9 img-11 img-13'
				'img-10 img-12 img-14 img-13';
			}
		
		.image-gallery a{
			background-position: center;
			background-repeat:no-repeat;
			background-size:cover;
			height:12rem;
			width:100%;
			position:relative;
			text-decoration:none;
			}
		
		.image-gallery a::before {
			background-color: rgba(0,0,0,.8);
			content: '';
			opacity:0;
			position:absolute;
			transition:opacity .5s;
			width:100%;
			height:100%;
			top:0;
			left:0;
			}
				
		.image-gallery a:hover i,
		.image-gallery a:hover::before {
			opacity: 1;
			}
		
		.img-1 {
			grid-area: img-1;
			min-height:24.5rem;
			background-image:url("../bilder/bilder-galerie/schmiedstube-bar-ambiente.jpg");
			}
		
		.img-2 {
			grid-area: img-2;
			background-image:url("../bilder/bilder-galerie/tonic.jpg");
			}
		
		.img-3 {
			grid-area: img-3;
			background-image:url("../bilder/bilder-galerie/bier-zapfhahnen2.jpg");
			}
				
		.img-4 {
			grid-area: img-4;
			background-image:url("../bilder/bilder-galerie/schmiedstube-ambiente-3.jpg");
			}
	
		.img-5 {
			grid-area: img-5;
			background-image:url("../bilder/bilder-galerie/gin-tonic-set.jpg");
			}
		
		.img-6 {
			grid-area: img-6;
			min-height:24.5rem;
			background-image:url("../bilder/bilder-galerie/bild-motorhead.jpg");
			}
		
		.img-7 {
			grid-area: img-7;
			background-image:url("../bilder/bilder-galerie/innenaufnahme-bar.jpg");
			}
		
		.img-8 {
			grid-area: img-8;
			background-image:url("../bilder/bilder-galerie/schmiedstube-innen.jpg");
			}

		.img-9 {
			grid-area: img-9;
			background-image:url("../bilder/bilder-galerie/home-sweet-home.jpg");
			background-position:top!important;
			}

		.img-10 {
			grid-area: img-10;
			background-image:url("../bilder/bilder-galerie/schmiedstube-ambiente.jpg");
			min-height:24.5rem;
			}

		.img-11 {
			grid-area: img-11;
			background-image:url("../bilder/bilder-galerie/schmiedstube-ambiente-2.jpg");
			}

		.img-12 {
			grid-area: img-12;
			background-image:url("../bilder/bilder-galerie/schmiedstube-drinks-1.jpg");
			}
     
		.img-13 {
			grid-area: img-13;
			background-image:url("../bilder/bilder-galerie/schmiedstube-drinks-2.jpg");
			min-height:24.5rem;
			}
     
		.img-14 {
			grid-area: img-14;
			background-image:url("../bilder/bilder-galerie/bild-frau-david-bowie.jpg");
			}
     
     
	/* ====================================================== */
	/* ================== KONTAKT FORMULAR ================== */
    /* ====================================================== */  

	
		#formular {
			display:flex;
			margin:0 auto;
			width:1200px;
			margin-bottom: 5rem;
			}

		#formularbox {
			display:flex;
			justify-content: center;
			margin-right:6rem;
			}

		#kontakt_rechts {
			text-align:left;
			width:400px;
			}

		.telefon {
			margin-bottom:2rem;
			width:180px;
			}

		form div {
			display:flex;
			justify-content: space-between;
			width:600px;
			}		

		.formularfeld {
			border:none;
			border-bottom: 1px solid #BE9C5C;
			background-color:transparent;
			box-shadow:none;
			color:white;
			font-size:1.5rem;
			font-family:'Teko';
			font-weight:300;
			margin:1.5rem 0rem 1.5rem 0rem;
			outline:0 transparent;
			}

		.formularfeld_bemerkungen {
			background-color:transparent;
			border:none;
			border: 1px solid #BE9C5C;
			color:white;
			font-size:1.5rem;
			font-family:'Teko';
			font-weight:300;
			margin:2rem 0rem 2rem 0rem;
			padding-left:0.5rem;
			outline:0 transparent;
			height:200px;
			width:100%;
			}

		::placeholder {
			color:#BE9C5C;
			font-size:1.5rem;
			font-family:'Teko';
			font-weight:300;
			}

		input:-webkit-autofill,
		input:-webkit-autofill:hover, 
		input:-webkit-autofill:focus,
		textarea:-webkit-autofill,
		textarea:-webkit-autofill:hover,
		textarea:-webkit-autofill:focus,
		select:-webkit-autofill,
		select:-webkit-autofill:hover,
		select:-webkit-autofill:focus 
		{
 		-webkit-text-fill-color: white;
 		-webkit-box-shadow: 0 0 0px 1000px rgba(36,35,35,1) inset;
  		transition: background-color 5000s ease-in-out 0s;
		}
		
		/* - Chrome ≤56,
	   - Safari 5-10.0
	   - iOS Safari 4.2-10.2
	   - Opera 15-43
	   - Opera Mobile >12
	   - Android Browser 2.1-4.4.4
	   - Samsung Internet
	   - UC Browser for Android
	   - QQ Browser */
		::-webkit-input-placeholder {
    	font-family:'Teko';
		font-size:1.5rem;
		}

		/* Firefox 4-18 */
		:-moz-placeholder, ::-moz-placeholder {
    	font-family:'Teko';
		font-size:1.5rem;
		}
		
		/* Firefox 4-18 */
		:-moz-placeholder  {
    	font-family:'Teko';
		font-size:1.5rem;
		}
			
		/* Firefox 19-50 */
		::-moz-placeholder {
    	font-family:'Teko';
		font-size:1.5rem;
		}

		/* - Internet Explorer 10–11
   		- Internet Explorer Mobile 10-11 */
		:-ms-input-placeholder {
   		font-family:'Teko' !important;
   		font-size:1.5rem !important;
		}


	/* ====================================================== */
	/* ===================== FOOTER ========================= */
    /* ====================================================== */  


        footer {
            align-content:center;
			display:flex;
            justify-content: center;
            font-size:1rem;
			height:auto;
			position:relative;
			}  
        
        /* Alle 3 Divs */
        
		footer div {
			padding:3rem 0rem 3rem 5vw;
			width:25%;
			}

		footer div h3 {
			line-height:0rem;
			}
         
		.closed {
			width:140px;
			position:absolute;
			transform:rotate(15deg);
			top:4.2rem;
			right:10vw;
			}

		.impressum_datenschutz {
			font-size:0.9rem;
			margin-top:2rem;
			padding:0rem;	
			word-spacing:0.8rem;
			width:auto;
			}

		.copyright {
			font-size:0.8rem;
			margin-top:2rem;
			word-spacing:0rem;
			}

		.icontour {
			display:flex;
			margin-top:1rem;
			transition:transform 0.3s ease-in-out;
			height:80px;
			width:80px;
			}
		
		.icontour:hover {
			transform:scale(1.2);
			transition:transform 0.6s ease-in-out;
			}


	/* ====================================================== */	
 	/* ================= BUTTON LAYOUT ====================== */
	/* ====================================================== */	
	

		.linkbutton {
 			 background-color:#BE9C5C;
			 display: inline-block;
			 font-weight: 400;
			 font-size:1rem;
			 padding: 0.5rem 1.8rem;
 			 text-align: center; 
			 text-transform:uppercase;
			 border:none;
			 color:white;
			 font-family:'teko';
			 width:150px;
			 }

		.linkbutton:hover {
			color:rgba(36,35,35,1);
			}

.linkbuttonevents {
	margin-top:0.3rem;
	margin-bottom:1rem;
	}
				

	/* ====================================================== */	
 	/* ========== IMPRESSUM/DATENSCHUTZ LAYOUT ============== */
	/* ====================================================== */


		.datenschutz_impressum_text {
			font-size:1rem;
			height:auto;
			margin:0 auto;
			max-width:900px;
			}

		


	/* ========================================================================= */
	/* ========================================================================= */
	/* ========================================================================= */
	/* ============================= MEDIA QUERIES ============================= */
	/* ========================================================================= */
	/* ========================================================================= */
	/* ========================================================================= */
       




	/* ============================================== */ 
	/* ============ DESKTOP AND LAPTOP ============== */  
	/* ============================================== */ 
	

	@media screen and (min-width:1224px) and (max-width:1400px){	

	/* ========== STARTSEITE ========== */   
		
		
		/* NEWSBOX BOOK YOUR EVENT UND ZYSTIGSKLUB */
		
		.newsbox_text {
			width:50%;
			margin:0 auto;
			}
        
        .newsbox_bild {
			display:none;
			}
			
		/* NEWSBOX BARKARTE */
		
		.containerboxlinks {
			margin:2rem 0rem 2rem 0rem;
			}

		.containerboxlinks img {
			height:550px;
			}
		   		
		
		/* NEWSBOX GUTSCHEINE */
		
		.newsbox_2_text {
			text-align:center;
			width:300px;
			display:flex;
			justify-content: space-between;
			}

		.newsbox_2_text img {
			height:400px;
			}
			
     						
	/* ========== LAYOUT FOLGESEITEN ========== */	
		
				
		.rahmen {
			border-bottom:0.5rem solid #BE9C5C; /*bleibt ist ein designelement */
			}	
			
				
	/* ========== EVENTSEITE ========== */		
		
		.eventcontainer {
			width:891px;
			}
		
		.box_mehr_infos_1 {
			top:50rem;
			}

		.box_mehr_infos_2 {
			top:50rem;
			}

		.einleitungtext {
			margin-top:-3rem;
			}	
								
		.eventbeschreibung {
			font-size:2rem;
			height:150px;
			width:500px;
           	}
			
		.eventdatumsbox {
			height:150px;
			width:80px;
			}

		.eventtagmonatbox {
			height:150px;
			}
			
		.eventmehrinfos {
			height:150px;
			}

		.iconbox {
			height:150px;
			}

		.iconbox img {
			height: 40%;
			}
			
		.linkbutton {
 			font-size:0.8rem;
			font-weight:300;
  			 }
		
					
	/* ========== BILDER GALERIE  ========== */		
			
		
		.image-gallery{
			grid-template-areas:
				'img-1 img-1 img-2 img-2' 
				'img-1 img-1 img-3 img-3' 
				'img-4 img-4 img-5 img-5'
				
				'img-6 img-6 img-8 img-8'
				'img-7 img-7 img-8 img-8'
				'img-9 img-9 img-10 img-10'
				'img-13 img-13 img-13 img-13'
				'img-11 img-11 img-12 img-12'
				'img-11 img-11 img-14 img-14';
				}
			
		.image-gallery a {
				heigth:12rem;
				}
			
		.img-1 {
				min-height:24.5rem;
			}
			
		.img-6 {
				min-height:12rem;
			}	
			
		.img-8 {
				min-height:24.5rem;
			}	
			
		.img-9 {
				min-height:24.5rem;
			}	
			
		.img-11 {
				min-height:24.5rem;
			}	
			
			
	/* ========== KONTAKT FORMULAR ========== */	
	
		
		#formular {
			flex-direction:column;
			}
		
		#formularbox {
			margin-right:0rem;
			}
				
		#kontakt_rechts {
			width:100%;
			}
		
		#kontakt_rechts div {
			text-align:center;
			}
					
		.telefon {
			width:100px;
			padding:4rem 0rem;
			margin:0 auto;
			}
		
		.icontour {
			margin:0 auto;
			width:50px;
			}
		
		.closed {
			right:5vw;
			}
		
		
	} /* ===================== ENDE MEDIA DESKTOP AND LAPTOP =====================*/


	

	/* ============================================== */ 
	/* ==================== TABLET ================== */  
	/* ============================================== */ 

		@media screen and (min-width:912px) and (max-width:1224px) {

			
    /* ========== STARTSEITE ========== */   
		
			
		h1,h2 {
			font-size:3rem;
			}
			
		h4 {
			font-size:3rem;
			}
			
		.pfeil {
			bottom:6rem;
			height:4rem;
			position:absolute;
			right:4.9rem;
			}
	
		.scroll {
			bottom:10.5rem;		
			font-family:'lakersregular';
			font-size:1.5rem;
			position:absolute;
			right:3.5rem;
			}	
			
		#logozentriert {
			width:40%;
			}
			
		/* NEWSBOX BOOK YOUR EVENT UND ZYSTIGSKLUB */		
			
		.newsbox_text {
			margin:0 auto;
			padding:4rem 2rem 4rem 2rem;
			width:50%;
			}
        
        .newsbox_bild {
			display:none;
			}
					
	
		/* NEWSBOX DRINK MENÜ */	
				
		.container5050 {
			flex-direction:column;
			margin-top:2rem;
			}
	
		.containerboxlinks {
			width:100%;
			margin-left:0rem;
			}
			
		.containerboxlinks img {
			height:auto;
			width:400px;
			}

		.containerboxrechts {
			display:none;
			}

		.drinks_ueberschrift_mobile {
			display:flex;
			align-items:center;
			justify-content: center;
			}
		  		
			
		/* NEWSBOX GUTSCHEINE */
		
		.newsbox_2_text {
			text-align:center;
			width:300px;
			display:flex;
			justify-content: space-between;
			}

		.newsbox_2_text img {
			height:400px;
			}	
						
		.section_gutschein {
			width:550px;
			}

		.section_gutschein form div {
			width:500px;
			}	

		.gutschein_formularfeld {
			width:220px;
			}
		
		.gutschein_betrag {
			margin-top:2rem;
			}
		
						
	/* ========== LAYOUT FOLGESEITEN ========== */	
		
			
		.rahmen {
			border-bottom:0.5rem solid #BE9C5C; /*bleibt ist ein designelement */
			}	
			
					
	/* =========== LAYOUT STRIPES ============= */
	
			
		.parallax {
			height:400px;
			}
						
  		.drunk, .tap, .gin {
			background-attachment:scroll !important;
			background-size: cover;
			height: 400px;
			width: 100%;
			overflow: hidden;
  			}

		.parallaxstripes {
			height:400px;
			}
			
		.parallaxstripes div {
			height:400px;
			display:flex;
			justify-content: center;
			align-items: center;
			}
					
					
	/* ========== EVENTSEITE ========== */		
		
		.box_mehr_infos_1 {
			top:50rem;
			}

		.box_mehr_infos_2 {
			top:50rem;
			}

		.einleitungtext {
			margin-top:-3rem;
			}	
								
		.eventcontainer {
			width:892px;
			}		
			
		.eventbeschreibung {
			font-size:1.5rem;
			height:150px;
			width:500px;
			}
			
		.eventdatumsbox {
			height:150px;
			width:80px;
			}

		.eventtagmonatbox {
			height:150px;
			}
			
		.eventmehrinfos {
			height:150px;
			}

		.iconbox {
			height:150px;
			}

		.iconbox img {
			height: 30%;
			}
			
		.linkbutton {
 			font-size:0.8rem;
			font-weight:300;
  			 }
					
		.discokugel  {
			margin-top:-8rem;
			height:200px;
			}
			
	/* ========== BILDER GALERIE  ========== */		
			
			
		.image-gallery{
			grid-template-areas:
				'img-1 img-1 img-2 img-2' 
				'img-1 img-1 img-3 img-3' 
				'img-4 img-4 img-5 img-5'
				
				'img-6 img-6 img-8 img-8'
				'img-7 img-7 img-8 img-8'
				'img-9 img-9 img-10 img-10'
				'img-13 img-13 img-13 img-13'
				'img-11 img-11 img-12 img-12'
				'img-11 img-11 img-14 img-14';
			}
					
		.image-gallery a {
				heigth:12rem;
				}
			
		.img-1 {
				min-height:24.5rem;
				}
			
		.img-6 {
				min-height:12rem;
				}	
			
		.img-8 {
				min-height:24.5rem;
				}	
			
		.img-9 {
				min-height:24.5rem;
				}	
			
		.img-11 {
				min-height:24.5rem;
				}	
			
			
	/* ========== KONTAKT FORMULAR ========== */	
				
		#formular {
			flex-direction:column;
			display:flex;
			align-items: center;
			width:auto;
			
			}
		
		#formularbox {
			margin-right:0rem;
			display:flex;
			align-items: center;
			}	
			
		#kontakt_rechts {
			text-align:left;
			width:400px;
			}

		.telefon {
			margin-bottom:2rem;
			width:180px;
			}

		form div {
			display:flex;
			justify-content: space-between;
			width:600px;
			}		

		.formularfeld {
			border:none;
			border-bottom: 1px solid #BE9C5C;
			background-color:transparent;
			box-shadow:none;
			color:white;
			font-size:1.5rem;
			font-family:'Teko';
			font-weight:300;
			margin:1.5rem 0rem 1.5rem 0rem;
			outline:0 transparent;
			}

		.formularfeld_bemerkungen {
			background-color:transparent;
			border:none;
			border: 1px solid #BE9C5C;
			color:white;
			font-size:1.5rem;
			font-family:'Teko';
			font-weight:300;
			margin:2rem 0rem 2rem 0rem;
			padding-left:0.5rem;
			outline:0 transparent;
			height:200px;
			width:100%;
			}
					
		#kontakt_rechts {
			width:100%;
			}
		
		#kontakt_rechts div {
			text-align:center;
			}
					
		.telefon {
			width:100px;
			padding:4rem 0rem;
			margin:0 auto;
			}
		
		.icontour {
			margin:0 auto;
			width:50px;
			}

		
				
	/* ========== IMPRESSUM/DATENSCHUTZ LAYOUT ========== */

			
		.datenschutz_impressum_text {
			padding:3rem;
			}		
						
			
	/* ========== FOOTER ========== */
			
			
		footer {
                flex-direction: column;
            	}
        
       	footer div {
			    padding:2rem;
			    width:100%;
                text-align:center;  
				margin-top:2rem;
            	}
			
		.closed {
			width:100px;
			top:28.5rem;
			right:28vw;
			}
			
			

	} /* ===================== ENDE MEDIA QUERIES TABLET =====================*/
	

	/* ============================================== */ 
	/* ================ 768 - 912 PX ================ */  
	/* ============================================== */ 

	@media screen and (min-width:768px) and (max-width:912px) {

		
		/* ========== STARTSEITE ========== */   
		
			
		h1,h2 {
			font-size:3rem;
			/*line-height:3.2rem;*/
			}
		
		h4 {
			font-size:3rem;
			}
		
		#socialmedia {
			flex-direction:column;
			right:0;
			text-align:center;
			}
		
		.tiki  {
	
		right:5rem;
	

	}

.tiki img {
		width:70px;
}
				
		.pfeil {
			display:none;
			}
	
		.scroll {
			display:none;
			}	
			
		#logozentriert {
			width:40%;
			}
								     
		.newsbox_text {
			margin:0 auto;
			padding:4rem 2rem 4rem 2rem;
			width:50%;
			}
        
        .newsbox_bild {
			display:none;
			}
				
		.container5050 {
			flex-direction:column;
			margin-top:2rem;
			}
	
		.containerboxlinks {
			width:100%;
			margin-left:0rem;
			}
		
		.containerboxlinks img {
			height:auto;
			width:400px;
			}
		
		.containerboxrechts {
			display:none;
			}

		.drinks_ueberschrift_mobile {
			display:flex;
			align-items:center;
			justify-content: center;
			}
		  
		.newsbox_2_text {
			display:none;
			}
				      
        .newsbox_2_formular {
			margin:0 auto;
			width:100%;
			}
		
		.section_gutschein {
			width:600px;
			}

		form div { /*ACHTUNG DEFINITIONEN HIER GELTEN AUCH BEI KONTAKT*/
			display:flex;
			justify-content: space-between;
			width:500px;
			margin:0 auto;
			}	
		
		.gutschein_formularfeld {
			width:220px;
			}

						
	/* ========== LAYOUT FOLGESEITEN ========== */	
		
			
		.logofolgeseiten {
			top:10rem;
			width:250px;
			}
			
		.rahmen {
			border-bottom:0.5rem solid #BE9C5C; /*bleibt ist ein designelement */
			}	
			
			
		
	/* =========== LAYOUT STRIPES ============= */
	
			
		.parallax {
			height:400px;
			}
					
  		.drunk, .tap, .gin {
			background-attachment:scroll !important;
			background-size: cover;
			height: 400px;
			width: 100%;
			overflow: hidden;
  			}

		.parallaxstripes {
			height:400px;
			}
		
		.parallaxstripes div {
			height:400px;
			display:flex;
			justify-content: center;
			align-items: center;
			}
					
					
	/* ========== EVENTSEITE ========== */		
		
		.text {
			width:400px;
			}
		
		.logo_zystigsklub { /*EVENTPAGE*/
			width:400px;
			}
			
		.box_mehr_infos_1 {
			width:600px; 
			height:auto;
			top:50rem;
			}
		
		.box_mehr_infos_2 {
			width:600px; 
			height:auto;
			top:50rem;
			}

		.einleitungtext {
			height:200px;
			}
								
		.eventcontainer {
			width:722px;
			}		
			
		.eventbeschreibung {
			font-size:1.2rem;
			height:150px;
			width:420px;
			}
			
		.eventdatumsbox {
			height:150px;
			width:60px;
			}

		.datum {
			font-size:3rem;
			}

		.eventtagmonatbox {
			height:150px;
			width:40px;
			}
			
		.eventmehrinfos {
			height:150px;
			width:120px;
            
			}

		.iconbox {
			height:150px;
			}

		.iconbox img {
			height: 30%;
			}
			
		.linkbutton {
 			font-size:0.8rem;
			font-weight:300;
  			 }
		
		.discokugel  {
			height:200px;
			margin-top:-6.5rem;
			}
		
	/* ========== BILDER GALERIE  ========== */		
			
			
		.image-gallery{
			grid-template-areas:
				'img-1 img-1 img-2 img-2' 
				'img-1 img-1 img-3 img-3' 
				'img-4 img-4 img-5 img-5'
				
				'img-6 img-6 img-8 img-8'
				'img-7 img-7 img-8 img-8'
				'img-9 img-9 img-10 img-10'
				'img-13 img-13 img-13 img-13'
				'img-11 img-11 img-12 img-12'
				'img-11 img-11 img-14 img-14';
			}
					
		.image-gallery a {
				heigth:12rem;
				}
			
		.img-1 {
				min-height:24.5rem;
				}
			
		.img-6 {
				min-height:12rem;
				}	
			
		.img-8 {
				min-height:24.5rem;
				}	
			
		.img-9 {
				min-height:24.5rem;
				}	
			
		.img-11 {
				min-height:24.5rem;
				}	
			
			
	/* ========== KONTAKT FORMULAR ========== */	
				
		#formular {
			flex-direction:column;
			display:flex;
			align-items: center;
			width:auto;
			}
		
		#formularbox {
			margin-right:0rem;
			display:flex;
			align-items: center;
			}	
		
		.formularfeld {
			width:200px;
			}
				
		#kontakt_rechts {
			width:100%;
			}
		
		#kontakt_rechts div {
			text-align:center;
			}
					
		.telefon {
			width:100px;
			padding:4rem 0rem;
			margin:0 auto;
			}
		
		.icontour {
			margin:0 auto;
			width:50px;
			}
	
		
			
	/* ========== IMPRESSUM/DATENSCHUTZ LAYOUT ========== */


		.datenschutz_impressum_text {
			padding:3rem;
			}			
			
			
	/* ========== FOOTER ========== */
			
			
	   footer {
                flex-direction: column;
            	}
        
       footer div {
			    padding:2rem;
			    width:100%;
                text-align:center;  
				margin-top:2rem;
            	}
			
	.closed {
			width:100px;
			top:28.5rem;
			right:24vw;
			}
			
			
	} /* ===================== ENDE MEDIA QUERIES 768 - 912 PX =====================*/		




	/* ============================================== */ 
	/* ================== 480-768 PX ================ */  
	/* ============================================== */ 

		@media screen and (min-width:480px) and (max-width:768px) {

			
    /* ========== STARTSEITE ========== */   
		
		
		body{
			font-size:1rem;	
			}
		
		#headerbild {
			height:400px;
			}
		
		#socialmedia {
			flex-direction:column;
			right:0;
			text-align:center;
			}
			
			
				.tiki  {
	
		right:5rem;
	

	}

.tiki img {
		width:70px;
}
		
		h1,h2 {
			font-size:2rem;
			}
			
		h3 {
			font-size:1.5rem;
			}
			
		h4 {
			font-size:2rem;
			margin:1rem 0rem;
			}
		
		.einleitungtext {
			height:200px;
			}
			
		.einleitungtext div {
			margin-top:0rem;
			}
			
		.events_abstand {
			margin-top:-3rem;
			}
						
		nav ul li {
  			margin:0rem 0rem 1rem -1rem;
			}
				
		#logozentriert {
			width:40%;
			}
			
		.pfeil {
			display:none;
			}
	
		.scroll {
			display:none;
			}
	
		.newsbox_bild {
			display:none;
			}
		
		.newsbox {
			flex-direction:column;
			justify-content: center;
			align-items:center;
			height:auto;
			}
				
		.newsbox_text {
			width:80vw;
			}	
					
		.container5050 {
			flex-direction:column;
			height:auto;
			width:100%;
			margin:1.5rem 0rem 0rem 0rem;
			}
							
		.containerboxrechts {
			display:none;
			}
		
		.drinks_ueberschrift_mobile {
			display:flex;
			align-items:center;
			justify-content: center;
			}
		
		.containerboxlinks {
			flex-direction:column;
			width:100%;
			margin:0 auto;
			}
			
		.containerboxlinks a {
			display:block;
			margin:1rem 1rem;
			z-index:20;
			}
		
		.containerboxlinks img {
			height:auto;
			width:300px;
			}
			
		 .newsbox_2_text {
			display:none;
			}
		    							
		.section_gutschein {
			flex-direction:column;
			display:flex;
			align-items: center;
			width:450px;
			}

		form div {
			display:flex;
			align-items: center;
			flex-direction:column;
			width:600px;
			}	

		.gutschein_formularfeld {
			width:400px;
			font-size:1rem;
			}
		
		.gutschein_betrag {
			font-size:1rem;
			height:100px;
			width:400px;
			}
		
				
				
	/* ========== LAYOUT FOLGESEITEN ========== */	
		
		
		.logofolgeseiten {
			width:250px;
			}	
		
		.headerbildfolgeseiten {
			height:400px;
			}
			
		
	/* =========== LAYOUT STRIPES ============= */
	
				
		.parallax {
			height:300px;
			}
			
  		.drunk  {
			background-attachment:scroll;
			height:300px;
  			}
		
		.tap, .gin {
			display:none;
			}
		
		.parallaxstripes {
			height:300px;
			}
			
		.parallaxstripes div {
			height:300px;
			display:flex;
			justify-content: center;
			align-items: center;
			}
		
					
	/* ========== EVENTSEITE ========== */		
		
		
		#section_box {
			flex-direction:column;
			margin-top:5rem;
			display:flex;
			align-items:center;
			}
			
		.box_zystigsklub {
			width:200px;
			margin:0 auto;
			margin-bottom:3rem;
			}

		.box_bookyourevent {
			width:200px;
			margin:0 auto;
			margin-bottom:2rem;
			}
			
		.blitz {   
			width:80px;
			}
					
		.logo_zystigsklub img {
			height:120px;
			}

		.mehr_infos_button_1 {
			font-size:0.8rem;
			height:35px;
			}

		.mehr_infos_button_2 {
			font-size:0.8rem;
			height:35px;
			margin-top:-3rem;
			}

		.box_mehr_infos_1 {
			width:400px; 
			top:41rem;
			}

		.box_mehr_infos_2 {
			width:400px; 
			top:55rem;
			}

		.schliessen_1 {
			right:0.5rem;
			top:0.5rem;
			}

		.schliessen_2 {
			right:0.5rem;
			top:0.5rem;
			}
		
		.discokugel  {
			height:200px;
			margin-top:-7rem;
			}
								
		.eventcontainer {
			width:450px;
			}
		
		.eventbeschreibung {
			border:none;
			font-size:1.2rem;
			height:60px;
			padding:1rem;
			width:450px;
          
			}
			
		.eventdatumsbox {
			border:none;
			height:60px;
			justify-content: flex-start;
			padding:1rem;
			width:60px;
			}

		.datum {
			font-size:3rem;
			}

		.eventtagmonatbox {
			border:none;
			height:60px;
			width:390px;
			}
			
		.eventmehrinfos {
			height:120px;
			width:225px;
			justify-content: center;
            padding-left:0rem;
       
			}

		.iconbox {
			height:120px;
			width:225px;
			}

		.iconbox img {
			height: 40%;
			}
			
		.linkbutton {
 			font-size:0.8rem;
			font-weight:300;
  			 }
		
		
	/* ========== BILDERGALERIE ========== */	
		
		.image-gallery{
			grid-template-areas:
				'img-1 img-1 img-1 img-1' 
				'img-2 img-2 img-2 img-2' 
				'img-3 img-3 img-3 img-3'
				
				'img-4 img-4 img-4 img-4'
				'img-5 img-5 img-5 img-5'
				'img-6 img-6 img-6 img-6'
				'img-7 img-7 img-7 img-7'
				'img-8 img-8 img-8 img-8'
				'img-9 img-9 img-9 img-9'
				'img-10 img-10 img-10 img-10'
				'img-11 img-11 img-11 img-11'
				'img-12 img-12 img-12 img-12'
				'img-13 img-13 img-13 img-13'
				'img-14 img-14 img-14 img-14';
				}
			
			.image-gallery a,
			.img-1,
			.img-6{
				heigth:8rem;
				min-height:8rem;
				}
			
		
	/* ========== KONTAKT FORMULAR ========== */		
		
		#formular {
			flex-direction:column;
			display:flex;
			align-items: center;
			width:auto;
			}
		
		#formularbox {
			margin-right:0rem;
			}	
			
		form div {
			display:flex;
			align-items: center;
			flex-direction:column;
			width:600px;
			}
		
		#kontakt_rechts {
			width:100%;
			}
		
		#kontakt_rechts div {
			text-align:center;
			}
					
		.telefon {
			width:100px;
			padding:4rem 0rem;
			margin:0 auto;
			}
		
		.icontour {
			margin:0 auto;
			width:50px;
			}

		.formularfeld {
			width:400px;
			}

		.formularfeld_bemerkungen {
			width:400px;
			}
						
	/* ========== IMRESSUM/DATENSCHUTZ ========== */	
		
			
		.datenschutz_impressum_text {
			padding:2rem;
			}	
		
			
	/* ========== FOOTER ========== */
		
			
		footer {
                flex-direction: column;
            	}
        
        footer div {
			    margin-top:2rem;
				padding:2rem;
			 	text-align:center; 
			    width:100%;
                }
			
	.closed {
			width:80px;
			top:25.5rem;
			right:12vw;
			}
			
			
        

} /* ===================== ENDE MEDIA QUERIES 480-768 PX ======================== */
	


	/* ======================================= */ 
	/* ============= SMARTPHONE ============== */  
	/* ======================================= */ 


	@media screen and /*(min-width : 320px) 
	and */ (max-width : 480px) {
		
    /* ========== STARTSEITE ========== */   
		
		body{
			font-size:1rem;	
			}
		
		#headerbild {
			height:400px;
			}
		
		#socialmedia {
			flex-direction:column;
			right:0;
			text-align:center;
			}
		
		
			
				.tiki  {
		top:9rem;
		right:0.6rem;
		

	}

.tiki img {
		width:40px;
}
		
		.socialmedia_eventseite {
			font-size:1.8rem; 
			text-align:center;
			width:60px;
			}
		
		h1,h2 {
			font-size:8vw;
			}
		
		h3 {
			font-size:1.5rem;
			}
		
		h4 {
			font-size:8vw;
			margin:1rem 0rem;
			}
			
		.rahmen {
			margin: 0 auto;
			margin:1rem 0rem 1rem 0rem;
			padding:0rem 0rem;
			width:100%;
			}	
						
		nav ul {
 		 	display:flex;
			flex-direction:column;
			flex-wrap:wrap;
			margin:5rem 0rem 5rem 0rem;
  			width:200px;
			top:0;
			left:15%;
			z-index:100;
			}
		
		.menu_background_mobile {
			background-color:rgba(36,35,35,0.9);
			height:100vh;
			width:600px;
			left:-600px;
			position:fixed;
			top:0;
			z-index:40;
			}

		nav ul li {
  			margin:1rem 0rem 1rem 0rem;
			}
		
		nav {
			display:none;
			}
		
		nav .aktiv {
			border:none;
			}

		#hamburger {
			display:block;
			}
		
		#logozentriert {
			width:50%;
			}
			
		.pfeil {
			display:none;
			}
	
		.scroll {
			display:none;
			}
	
		.newsbox_bild {
			display:none;
			}
		
		.newsbox {
			flex-direction:column;
			height:auto;
			width:100%;
			}
		
		.newsbox_text {
			width:100%;
			}	
		
		.logo_zystigsklub_startseite img { /*STARTSEITE*/
			height:100px;
			}

		.blitz-startseite img { /*STARTSEITE*/
			height:90px;
			}
				
		.container5050 {
			flex-direction:column;
			height:auto;
			width:100%;
			margin:1.5rem 0rem 0rem 0rem;
			}
							
		.containerboxrechts {
			display:none;
			}	
		
		.drinks_ueberschrift_mobile {
			display:flex;
			align-items:center;
			justify-content: center;
			}
		
		.containerboxlinks {
			flex-direction:column;
			width:100%;
			margin:0 auto;
			}
		
		.containerboxlinks a {
			display:block;
			margin:1rem 1rem;
			z-index:20;
			}
		
		.containerboxlinks img {
			height:auto;
			width:80vw;
			}
							
	   	.newsbox_2 {
			flex-direction: column;
		   	margin-top:1rem;
		    }
         
		.newsbox_2_text {
			display:none;
			}
		
		.section_gutschein {
			flex-direction:column;
			display:flex;
			align-items: center;
			width:80vw;
			}

		form div {
			display:flex;
			align-items: center;
			flex-direction:column;
			width:300px;
			}	

		.gutschein_formularfeld {
			width:200px;
			font-size:1rem;
			}
		
		.gutschein_betrag {
			font-size:1rem;
			margin-top:2rem;
			height:100px;
			width:200px;
			}

		::placeholder {
			font-size:1rem;
			}
			
		/* - Chrome ≤56,
	   - Safari 5-10.0
	   - iOS Safari 4.2-10.2
	   - Opera 15-43
	   - Opera Mobile >12
	   - Android Browser 2.1-4.4.4
	   - Samsung Internet
	   - UC Browser for Android
	   - QQ Browser */
		::-webkit-input-placeholder {
		font-size:1rem;
		}

		/* Firefox 4-18 */
		:-moz-placeholder, ::-moz-placeholder {
		font-size:1rem;
		}
		
		/* Firefox 4-18 */
		:-moz-placeholder  {
		font-size:1rem;
		}
			
		/* Firefox 19-50 */
		::-moz-placeholder {
		font-size:1rem;
		}

		/* - Internet Explorer 10–11
   		- Internet Explorer Mobile 10-11 */
		:-ms-input-placeholder {
   		font-size:1rem !important;
		}

				
	/* ========== LAYOUT FOLGESEITEN ========== */	
		
		
		.logofolgeseiten {
			top:8rem;
			width:200px;
			}	
		
		.headerbildfolgeseiten {
			height:400px;
			}
			
		
	/* =========== LAYOUT STRIPES ============= */
	
		
		.parallax {
			height:200px;
			}
			
  		.drunk  {
			background-attachment:scroll;
			height:200px;
  			}
		
		.tap, .gin {
			display:none;
			}
		
		.parallaxstripes {
			height:400px;
			}
		
		.parallaxstripes div {
			display:flex;
			justify-content: center;
			align-items:center;
			height:400px;
			}
		
		.einleitungtext {
			height:150px;
			}	
		
				
		
	/* ========== EVENTSEITE ========== */		
		
		
		#section_box {
			flex-direction:column;
			margin-top:5rem;
			display:flex;
			align-items:center;
			}
		
		.box_zystigsklub {
			height:150px;
			width:60vw;
			margin:0 auto;
			margin-bottom:2rem;
			}

		.box_bookyourevent {
			height:190px;
			width:60vw;
			margin:0 auto;
			margin-bottom:2rem;
			}
				
		.text {
			font-size:2.2rem;
			}
					
		.events_abstand {
			margin-top:-2rem;
			}
		
		.blitz {   
			width:80px;
			}
		
		.logo_zystigsklub {
			width:250px;
			}
							
		.logo_zystigsklub img {
			height:100px;
			}
							
		.mehr_infos_button_1 {
			font-size:0.8rem;
			height:35px;
			}

		.mehr_infos_button_2 {
			font-size:0.8rem;
			height:35px;
			}

		.box_mehr_infos_1 {
			padding:1rem 1rem;
			width:80vw; 
			height:auto;
			top:41rem;
			}

		.box_mehr_infos_2 {
			width:80vw; 
			height:auto;
			top:54rem;
			}

		.schliessen_1 {
			right:0.5rem;
			top:0.5rem;
			}

		.schliessen_2 {
			right:0.5rem;
			top:0.5rem;
			}
		
		.discokugel  {
			height:180px;
			margin-top:-5.5rem;
			}
								
		.eventcontainer {
			width:300px;
			}
		
		.eventbeschreibung {
			border:none;
			font-size:1.2rem;
			height:auto;
			min-height:100px;
			padding:1rem;
			width:300px;
			}
			
		.eventdatumsbox {
			border:none;
			height:60px;
			justify-content: flex-start;
			padding:1rem;
			width:60px;
			}

		.datum {
			font-size:3rem;
			}

		.eventtagmonatbox {
			border:none;
			height:60px;
			width:240px;
			}
			
		.eventmehrinfos {
			height:120px;
			width:200px;
			justify-content: center;
            padding-left:0rem;
			}

		.iconbox {
			height:120px;
			width:100px;
			}

		.iconbox img {
			height: 40%;
			}
			
		.linkbutton {
 			font-size:0.8rem;
			font-weight:300;
  			 }
		
		
	/* ========== BILDERGALERIE ========== */	
		
		.image-gallery{
			grid-template-areas:
				'img-1 img-1 img-1 img-1' 
				'img-2 img-2 img-2 img-2' 
				'img-3 img-3 img-3 img-3'
				
				'img-4 img-4 img-4 img-4'
				'img-5 img-5 img-5 img-5'
				'img-6 img-6 img-6 img-6'
				'img-7 img-7 img-7 img-7'
				'img-8 img-8 img-8 img-8'
				'img-9 img-9 img-9 img-9'
				'img-10 img-10 img-10 img-10'
				'img-11 img-11 img-11 img-11'
				'img-12 img-12 img-12 img-12'
				'img-13 img-13 img-13 img-13'
				'img-14 img-14 img-14 img-14';
				}
			
			.image-gallery a,
			.img-1,
			.img-6{
				heigth:8rem;
				min-height:8rem;
				}
			
		
	/* ========== KONTAKT FORMULAR ========== */		
				
				
		#formular {
			flex-direction:column;
			display:flex;
			align-items: center;
			width:auto;
			}
		
		#formularbox {
			margin-right:0rem;
			width:80vw;
			}	
			
		form div {
			display:flex;
			align-items: center;
			flex-direction:column;
			width:80vw;
			}
		
		#kontakt_rechts {
			padding:0rem 2rem;
			width:100%;
			}
		
		#kontakt_rechts div {
			text-align:center;
			}
					
		.telefon {
			width:100px;
			padding:4rem 0rem;
			margin:0 auto;
			}
		
		.icontour {
			margin:0 auto;
			width:50px;
			}

		.formularfeld {
			width:80vw;
			font-size:1rem;
			}

		.formularfeld_bemerkungen {
			max-width:80vw;
			font-size:1rem;
			}
		
						
	/* ========== IMRESSUM/DATENSCHUTZ ========== */	
		
		
		.datenschutz_impressum_text {
			height:auto;
			padding:1rem;
			}
			
	/* ========== FOOTER ========== */
			
		footer {
                flex-direction: column;
            	}
        
        footer div {
			    margin-top:2rem;
				padding:2rem;
			 	text-align:center; 
			    width:100%;
                }
			
		.closed {
			width:80px;
			top:23.5rem;
			right:5vw;
			}
			
        

} /* ===================== ENDE MEDIA QUERIES SMARTPHONE ======================== */