body{
    margin:2% 0%;
    padding:0;
    text-align:center;
    
    background: rgb(255, 246, 236);
    font-family: 'Signika Negative', sans-serif;
}

li
{
    text-align: left;
}

/* Anfang Grid Gallery*/ 
.container{
    margin:0% 12%;
    display:grid;
    grid-template-columns: repeat(6,1fr);
    grid-auto-rows:150px 200px;
    grid-gap:50px;
    grid-auto-flow: dense;
    
}

.gallery-item{
    width:100%;
    height:100%;
    position:relative;
}

.gallery-item .image{
    width:100%;
    height:100%;
    overflow:hidden;
}

.gallery-item .image img, .gallery-item .image video{
    width:100%;
    height:100%;
    object-fit: cover;
    object-position:50% 50%;
    cursor:pointer;
    transition:.5s ease-in-out;
    border-radius: 10px 10px 10px 10px;
    _border: solid 2px rgb(0, 0, 0);	
}



.gallery-item:hover .image img, .gallery-item:hover .image video{
    transform:scale(1.4);
    border-radius: 50px 50px 50px 50px;
}

.gallery-item .text{
    opacity:0;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#fff;
    font-size:350%;
    line-height: 1;
    font-family: 'Darumadrop One', cursive;
    
    pointer-events:none;
    z-index:4;
    transition: .3s ease-in-out;
    _-webkit-backdrop-filter: blur(5px) saturate(1.8);
    _backdrop-filter: blur(5px) saturate(1.8);
    background-color: black;
    padding-bottom: 16px;
    width:100%;
}

.gallery-item:hover .text{
    opacity:1;
    animation: move-down .3s linear;
    _padding:1em;
    _width:100%;
}


.w-1{
    grid-column: span 1;
}
.w-2{
    grid-column: span 2;
}
.w-3{
    grid-column: span 3;
}
.w-4{
    grid-column: span 4;
}
.w-5{
    grid-column: span 5;
}
.w-6{
    grid-column: span 6;
}

.h-1{
    grid-row: span 1;
}
.h-2{
    grid-row: span 2;
}
.h-3{
    grid-row: span 3;
}
.h-4{
    grid-row: span 4;
}
.h-5{
    grid-row: span 5;
}
.h-6{
    grid-row: span 6;
}

/* Ende Grid Galllery*/ 

/* Anfang Navi */ 
#mySidenav, #mobile-button
{
	display:none;
}

.navipunkt
{	
	font-size: 160%;
	padding: 15px;	
	padding-left: 15px;	
	padding-right: 15px;
	_border: solid 1.5px white;	
	background:#000000;
}

.navipunkt:hover
{
	background:#1be225;
	cursor: pointer;
	color: black;
	transition:0.3s;
}

#navi
{
	/* Scroll-Navi - sichtbar wenn nach unten gescrollt wird */
    padding-top: 7px;
	width:100%;
	margin: auto;
	_color: white;
	display:flex;
	justify-content:space-around;
    background-color: #000000;
}

.fixed_navi
{
	z-index: 700;
	
		width: 95%;
		position: absolute;
		left: 50%;
		top: 20px;
		transform: translate(-50%, -50%);
}

/* Ende Navi*/ 

/* Style für den Hintergrund*/ 
.polygon
{
    z-index: -10;
    position: absolute;
    top: 780px;
    left:0px;
    height: 2000px;
    width: 100%;
    background: black;
    transform: rotate(-11deg) skew(-11deg);
    margin:0px 0px 0px 0px;
}

.polygon2
{
    z-index: -10;
    position: absolute;
    top: 4780px;
    left:0px;
    height: 4000px;
    width: 100%;
    background: rgb(0, 0, 0);
    transform: rotate(-11deg) skew(-11deg);
    margin:0px 0px 0px 0px;
}

.polygon3
{
    z-index: -10;
    position: absolute;
    top: 780px;
    left:1%;
    height: 1500px;
    width: 97%;
    _background: black;
    border:5px dashed #000000;
    transform: rotate(-11deg) skew(-11deg);
    margin:0px 0px 0px 0px;
    
}
/*Ende für den Hintergrund */ 

#thxjoe{
    _border: 10px dotted black;
    padding-bottom: 40px;
}


/* Anfang Pop Up Gallery */ 
.gallery
{
    margin: 2% 12%;
}

.gallery img{
    _width: 500px;
    height:auto;
    transition: 0.5s;
    margin:4% 4%;
}
.gallery img:hover{
    filter: grayscale(80%);
    transform: scale(1.02);
}

.gallery video{
    padding:20px;
    width: 400px;
}

/* Ende Pop Up Gallery */

/* fadeshow*/
.fadeshow
{
	_display:flex;
	
	z-index: 0;
    
}

#fadeshow1
{
	border: solid 1.5px white;
    
}

.fadeshow_container
{
    width: 205px;
    margin: 0px 20px 20px 0px;

}

.showcase_box
{
    
    _display:flex;
    width: 60%;
    font-size: 130%;
    background: #000000;
    color: antiquewhite;
    padding: 50px;
    text-align: left;
    justify-content: flex-start;
    margin:auto;
    margin-top: 85px;
    border-radius: 20px;
}

.showcase_box0
{
    
    display:flex;
    width: 60%;
    font-size: 130%;
    background: #000000;
    color: antiquewhite;
    padding: 50px;
    text-align: left;
    justify-content: flex-start;
    margin:auto;
    margin-top: 85px;
    border-radius: 20px;
}

.showcase_box2
{
    
    display:flex;
    width: 60%;
    font-size: 130%;
    background: white;
    color: black;
    padding: 30px 50px 30px 50px;
    text-align: left;
    justify-content: flex-start;
    margin:auto;
    margin-top: 85px;
    border-radius: 20px;
    border: 2px solid black;
}

.showcase_box a, .showcase_box0 a, .showcase_box2 a
{
    font-family: 'Signika Negative', sans-serif;
}

.showcase_box img, .showcase_box2 img, .showcase_box2 video, .showcase_box0 img
{
    margin-right:50px;
    
}

.showcase_box3 a
{
    font-family: 'Signika Negative', sans-serif;
    color:#1be225;
}

.showcase_box2 p, .showcase_box2 a
{
    padding: 0px;
    margin-top: -10px;
    color: #000000;
}

.showcase_box p
{
    padding: 0px;
    margin-top: -10px;
}

.showcase_box3 
{
    _display:flex;
    width: 60%;
    font-size: 130%;
    background: #000000;
    color: antiquewhite;
    padding: 50px;
    text-align: left;
    justify-content: flex-start;
    align-items: flex-start;

    margin:auto;
    margin-top: 85px;
    border-radius: 20px;
    border: 5px solid antiquewhite;
}

.showcase_box3 iframe
{
    margin-top: 50px;
   
}
   

.book
{
    display:block;
    width: 920px;
    font-size: 130%;
    background: #000000;
    color: antiquewhite;
    padding: 50px;
    text-align: left;
    text-align:center;
    margin:auto;
    margin-top: 85px;
    border-radius: 20px;
}

.book h2, .book p, .showcase_box3 h2 , .showcase_box3 p
{
    text-align: left;
    margin-top: -15px;
}

.book img
{
    
    margin-bottom:50px;
}

.book_margin_small{
    margin-right: 16.5px;
}

h1{
    font-family: 'Darumadrop One', cursive;
    font-size: 350%;
}

h2{
    font-family: 'Darumadrop One', cursive;
}

a
{
    font-family: 'Darumadrop One', cursive;
    color:antiquewhite;
    text-decoration:none;
}

a:hover
{
	color:#1be225;
	cursor: pointer;
	transition:0.2s;
}


.footer{
    display:flex;
    text-align: right;
    margin-top: 450px;
    margin-bottom: 60px;
    justify-content: space-between;
}

.footer_a{
    
    padding:14px;
    padding-bottom: 19px;
    padding-left: 20px;
    padding-right: 20px;
    margin-right:2%;
    margin-left:2%;
    color: antiquewhite;
    font-size: 150%;
    background-color: #000000;
    border-radius: 40px;
    border: 2px solid antiquewhite;
}

.footer2_a
{
    color: black;
    padding:14px;
    padding-bottom: 19px;
    padding-left: 20px;
    padding-right: 20px;
    margin-right:2%;
    margin-left:2%;
    font-size: 150%;
}

.footer a:hover
{
	color:#1be225;
	cursor: pointer;
	transition:0.2s;
}


/*Ausklapp*/

    summary
  {
    text-align: center;
    border: 1.5px solid antiquewhite;
    border-radius: 20px;
    width:90px;
    margin-left:90%;
    
    _padding-bottom: 5px;
  }

  summary:hover
  {
    color:#1be225;
	cursor: pointer;
	transition:0.1s;
    border: 2px solid #1be225;
  }


    details {
    _background: gainsboro;
    _padding: 10px;
  }
  
  details summary {
    cursor: pointer;
    transition: margin 150ms ease-out;
  }
  
  details[open] summary {
    margin-bottom: 50px;
  }
/*wishlist button*/

  .WLbutton 
  {
    text-align: center;
    border: 1.5px solid antiquewhite;
    border-radius: 20px;
    _width:60%;
    _margin-left:90%;
    cursor: pointer;
    padding:15px 15px 15px 15px;
    margin-bottom: 30px;
  }

  .WLbutton:hover
  {
    color:#1be225;
	cursor: pointer;
	transition:0.1s;
    border: 12px solid #1be225;
  }

/*generic*/

.margin_auto{
    margin:auto;
}

.flex{
    display: flex;
}

.flex2{
    display: flex;
    justify-content: space-evenly;
}

.flex2 img{
    width:45%;
}

.block{
    display: block;
}

.lil_topmargin{
    margin-top:150px;
}
.lil_rightmargin{
    margin-right:50px;
}

.full-width{
    width:100%;
    _padding-top: 25px;
    _padding-bottom: 25px ;
}

.col_cream
{
    color: antiquewhite;
    background-color: #000000;
    width:98%;
    margin-left:1%;
}

.cream_bg{
    background:rgb(255, 246, 236);
    max-width: 500px;
    margin: auto;
}

@media screen and (max-width:1020px) 
{
    .flex{
        display:block;
    }
    .flex2{
        display:block;
    }
    .flex2 img{
        width: 100%;
    }


    .showcase_box0, .showcase_box2{
        display: block;
    }

    .showcase_box0, .showcase_box2, .showcase_box3, .showcase_box
    {
        padding: 30px;
        width: 75%;
        font-size: 120%;
    }

    .showcase_box0 img, .showcase_box2 img, .showcase_box3 img, .showcase_box img
    {
        margin: auto;
        margin-bottom: 30px;
    }

    .navipunkt
    {	
	font-size: 120%;
	_padding: 15px;	
	_padding-left: 15px;	
	_padding-right: 15px;
	_border: solid 1.5px white;	
	background:#000000;
    }
    summary
    {
      margin-left:80%;
    }

    .book
    {
            display:block;
            width: 90%;
            font-size: 125%;
            
            padding: 4%;
 
    }
}

@media screen and (max-width:840px) 
{
    #navi
    {	
	display: none;
    }
    
    #mySidenav
	{
		display:block;
	}

	#mobile-button
	{
		display:block;
		position:fixed;
		
		background:#000000;
		top:0px;
        color: antiquewhite;
        text-align: left;
		width: 100%;
		z-index: 500;
		padding-left: 20px;
		padding-bottom: 1px;
		

	}

	.sidenav 
	{
		height: 100%;
		width: 0;
		position: fixed;
		z-index: 1000;
		top: 0;
		left: -1px;
		background-color: rgb(0, 0, 0);
		overflow-x: hidden;
		transition: 0.5s;
		padding-top: 60px;
		border-right: antiquewhite 2.5px solid;
	}

	.sidenav > a 
	{
		padding: 8px 8px 8px 32px;
		text-decoration: none;
		font-size: 25px;
		color: antiquewhite;
		display: block;
		transition: 0.3s;
	}

	.sidenav > a:hover 
	{
		color: #ffffff;
	}

	.sidenav .closebtn 
	{
		position: absolute;
		top: 0;
		right: 25px;
		font-size: 36px;
		margin-left: 50px;
	}

    #thxjoe{
        _border: 10px dotted black;
        padding-top: 7%;
    }

    .gallery-item .text{
        opacity:1;
        position:absolute;
        top:50%;
        left:50%;
        _transform:translate(-50%,-50%);
        color:#fff;
        font-size:150%;
        line-height: 1;
        font-family: 'Darumadrop One', cursive;
        
        pointer-events:none;
        z-index:4;
        transition: .3s ease-in-out;
        _-webkit-backdrop-filter: blur(5px) saturate(1.8);
        _backdrop-filter: blur(5px) saturate(1.8);
        background-color: hsla(0, 0%, 0%, 0.75);
        padding-bottom: 9px;
        
        width:100%;
    }

    h1{
        font-size: 180%;
    }

    .footer{
        text-align: center;
        margin-top: 100px;
    }
    .footer a{
        text-align: center;
        font-size: 100%;
    }

    .lil_topmargin
    {
        margin-top: 70px;
    }

    .book
    {
            font-size: 120%;
    }
    
    iframe{
        height: 400px;
    }
}

@media screen and (max-width:750px) 
{
    .container{
        grid-template-columns: repeat(1,1fr);
        grid-auto-rows:150px 50px;
    }
    .w-1,.w-2,.w-3,.w-4,.w-5,.w-6{
        grid-column:span 1;
    }

    img
	{
		max-width:100%;
		height:auto;
	}

    .gallery
    {
        margin:auto;
    }
    .gallery img
    {
       max-width: 90%;
    }
    summary
    {
      margin-left:70%;
    }
    .showcase_box0, .showcase_box2, .showcase_box3, .showcase_box
    {
        padding: 30px;
        width: 75%;
        font-size: 100%;
    }

    .book
    {
            font-size: 115%;
    }

    iframe{
        height: 300px;
    }
}

@media screen and (max-width:600px) 
{
    summary
    {
      margin-left:70%;
    }

    .book
    {
            padding-top: 15px;
            font-size: 105%;
    }

    iframe{
        height: 220px;
    }

}

@media screen and (max-width:450px) 
{
    .gallery video
    {
        max-width: 90%;
        height: auto;
        margin: auto;
    }
    iframe{
        height: 220px;
    }
}

@media screen and (max-width:400px) 
{
    summary
    {
      margin-left:60%;
    }

    .book
    {
            font-size: 95%;
    }

    .gallery video
    {
        max-width: 85%;
        height: auto;
        margin: auto;
    }

    iframe{
        height: 200px;
    }
}



@keyframes move-down{

    0%{
        top:10%;
    }
    50%{
        top:35%;
    }
    100%{
        top:50%;
    }
}