html, body {
font-family : times new roman;
font-size : 100%;
color : gold;
background-color : #aa7503;
height : auto;
text-align : center;
}
h2, h3 {
text-decoration : none;
text-decoration : none;
}
.header1 {
max-width : 100%;
display : grid;
grid-template-columns : 33% 33% 33% ;
grid-auto-flow : row dense;
background-color : black;
position : relative;
text-align : center;
height : auto;
margin-bottom : 0.5em;
padding : 0.5em 12px 12px 12px;
overflow : auto;
box-sizing : content-box;
box-shadow : -3px -3px 3px darkslategrey inset;
overflow : hidden;
-webkit-border-top-left-radius: 1em;
	-webkit-border-bottom-right-radius: 1em;
	-webkit-border-top-right-radius: 1em;
	-webkit-border-bottom-left-radius: 1em;
}
.links {
grid-column : 1;
grid-row: 1 ;
max-width : 75px;
height : auto;
border : darkgoldenrod solid 2px;
margin-top : 0.5em;
margin-left : 1em;
text-align: center ;
position : relative;
}
h1	{	grid-column : 2;
}
.rechts {
grid-column : 3;
grid-row: 1 ;
max-width : 65px;
height : auto;
border : darkgoldenrod solid 2px;
margin-top : 0.5em;
margin-right : 1em;
text-align: center ;
position : relative;
}
.zeile	{	grid-column : 2;
			grid-row: 2 ;
		}
.links:hover {
border : #4CDC13 solid 2px;
}
.rechts:hover {
border : #4CDC13 solid 2px;
}
.desc {
color : gold;
}
.kursiv {
font-style : italic;
}
/* ====================================================  main   ==================================================== */
main {
max-width : 100%;
display : grid;
grid-template-columns : 2fr 2fr 1fr;
grid-auto-flow : dense;
position : relative;
}
main.impress {
max-width : 100%;
display : grid;
grid-template-columns : 1fr 2fr 1fr;
grid-auto-flow : dense;
position : relative;
}
/* ====================================================  /main; article   ==================================================== */
article {
grid-column: 1 ;
background-color : black;
position : relative;
text-align : left;
margin-right: 0.5em;
margin-bottom : 0.5em;
padding : 1em ;
overflow : auto;
box-sizing : content-box;
box-shadow : -3px -3px 3px darkslategrey inset;
clear : right;
float : left;
	-webkit-border-top-left-radius: 1em;
	-webkit-border-bottom-right-radius: 1em;
	-webkit-border-top-right-radius: 1em;
	-webkit-border-bottom-left-radius: 1em;
}
article.wett {
background-color : black;
position : relative;
text-align : left;
width : 12em;
height : auto;
margin-bottom : 0.5em;
margin-left : 0.5em;
margin-right : 0.5em;
padding : 2% 2%;
overflow : auto;
box-sizing : content-box;
box-shadow : -3px -3px 3px darkslategrey inset;
clear : right;
float : left;
	-webkit-border-top-left-radius: 1em;
	-webkit-border-bottom-right-radius: 1em;
	-webkit-border-top-right-radius: 1em;
	-webkit-border-bottom-left-radius: 1em;
}
article.impress {
grid-column : 1;
background-color : black;
position : relative;
text-align : left;
margin-bottom : 0.5em;
margin-right : 0.5em;
padding : 12px 12px;
overflow : auto;
box-sizing : content-box;
box-shadow : -3px -3px 3px darkslategrey inset;
clear : right;
float : left;
	-webkit-border-top-left-radius: 1em;
	-webkit-border-bottom-right-radius: 1em;
	-webkit-border-top-right-radius: 1em;
	-webkit-border-bottom-left-radius: 1em;
}

article.theol {
grid-column : 1 / 5;
max-width : 100%;
background-image : url("https://wolftaxi.de/img/Aaronit2.jpg");
border : black solid 2px;
color : gold;
position : relative;
text-align : left;
margin-bottom : 0.5em;
margin-right : 0.5em;
padding : 0 12px 12px 12px;
overflow : auto;
box-sizing : content-box;
float : left;
}
div.right {
text-align : right;
}

}
#impress {
grid-column : 1;
width : 80%;
background-color : black;
position : relative;
text-align : left;
margin-bottom : 0.5em;
margin-right : 0.5em;
box-sizing : content-box;
box-shadow : -3px -3px 3px darkslategrey inset;
float : left;
	-webkit-border-top-left-radius: 1em;
	-webkit-border-bottom-right-radius: 1em;
	-webkit-border-top-right-radius: 1em;
	-webkit-border-bottom-left-radius: 1em;
}

span.pust {
grid-column : 2 / 5 ;
background-color : black;
max-width : 100%;
max-height : 100%;
box-sizing : content-box;
margin-top : 0 ;
margin-bottom : 0.5em;
margin-right : 0.5em;
box-shadow : -3px -3px 3px darkslategrey inset;
clear : both;
	-webkit-border-top-left-radius: 1em;
	-webkit-border-bottom-right-radius: 1em;
	-webkit-border-top-right-radius: 1em;
	-webkit-border-bottom-left-radius: 1em;
}
.puste {
max-width : 10em;
height : auto;
position : relative;
top : 10%;
left : 0;
border : darkgoldenrod solid 2px;
}
.puste:hover {
border : #4CDC13 solid 2px;
}
#haft {
grid-column : 1 / 5;
background-color : black;
max-width : 100%;
position : relative;
text-align : left;
margin-bottom : 0.5em;
margin-right : 0.5em;
padding : 0 12px 12px 12px;
overflow : auto;
box-sizing : content-box;
box-shadow : -3px -3px 3px darkslategrey inset;
float : left;
	-webkit-border-top-left-radius: 1em;
	-webkit-border-bottom-right-radius: 1em;
	-webkit-border-top-right-radius: 1em;
	-webkit-border-bottom-left-radius: 1em;
}
.copy2 {
font-size : x-small;
text-align : left;
position : absolute;
padding-left : 3.5em;
padding-top : 0.5em;
}
#mail {
width : 10em;
height : 10em;
padding : 0.5em;
margin : 0.5em;
float : left;
left : 0;
}
/* ====================================================  /article; media    ==================================================== */
.video {
width : 90%;
height : auto;
position : relative;
top : 0;
left : 5% ;
}
audio {
width : 9em;
height : 1em;
padding : 1% 10%;
}
/* ====================================================  /media; nav   ==================================================== */
a {
text-decoration : none;
outline : none;
}
a {
color : gold;
}
a:hover {
color : #4CDC13;
}
a:active {
color : darkslategrey;
}
nav {
grid-column : 5 / 6;
background-color : black;
position : relative;
width : 11em;
max-height : 100%;
margin-bottom : 0.5em;
margin-right : 0.25em;
overflow : auto;
box-sizing : content-box;
box-shadow : -3px -3px 3px darkslategrey inset;
clear : both;
-webkit-border-top-left-radius: 1em;
	-webkit-border-bottom-right-radius: 1em;
	-webkit-border-top-right-radius: 1em;
	-webkit-border-bottom-left-radius: 1em;
}
nav ul {
list-style : none;
position : fixed;
width : 7em;
padding-bottom: 0.5em ;
background-color : black;
margin : 8px;
-webkit-border-top-left-radius: 1em;
	-webkit-border-bottom-right-radius: 1em;
	-webkit-border-top-right-radius: 1em;
	-webkit-border-bottom-left-radius: 1em;
}
nav li {
position : relative;
right : 20px;
margin : 0.5em;
border : darkgoldenrod solid 2px;
background-color : darkslategrey;
}
nav a {
display : block;
text-decoration : none;
font-weight : bold;
color : gold;
background-color : darkslategrey;
}
nav a:focus, nav a:hover, nav a:active {
text-decoration : none;
width : 5em;
border : darkgoldenrod solid 1px;
background-color : midnightblue;
padding : 2px;
}
/* ====================================================  /nav; gallery   ==================================================== */
#gallery {
grid-column : 2 / 5;
background-color : black;
width: auto ;
max-height : 100%;
margin-bottom : 0.5em;
margin-left : 0.5em;
margin-right : 0.5em;
padding : 0.5em;
box-sizing : content-box;
box-shadow : -3px -3px 3px darkslategrey inset;
	-webkit-border-top-left-radius: 1em;
	-webkit-border-bottom-right-radius: 1em;
	-webkit-border-top-right-radius: 1em;
	-webkit-border-bottom-left-radius: 1em;
}
#gallery2 {
background-color : black;
box-sizing : content-box;
box-shadow : -3px -3px 3px darkslategrey inset;
clear : both;
padding-top : 0;
padding-bottom : 0;
padding-left : 0;
padding-right : 0;
	-webkit-border-top-left-radius: 1em;
	-webkit-border-bottom-right-radius: 1em;
	-webkit-border-top-right-radius: 1em;
	-webkit-border-bottom-left-radius: 1em;
}
span.gallery {
grid-column : 2 / 5;
background-color : black;
max-width : 100%;
position : relative;
margin-bottom : 0.5em;
margin-right : 0.5em;
padding : 0.25em 6px 6px 6px;
box-sizing : content-box;
box-shadow : -3px -3px 3px darkslategrey inset;
	-webkit-border-top-left-radius: 1em;
	-webkit-border-bottom-right-radius: 1em;
	-webkit-border-top-right-radius: 1em;
	-webkit-border-bottom-left-radius: 1em;
}
a.icon {
background-color : black;
margin : 0.25em;
border : darkgoldenrod solid 1px;
float : left;
max-width : 7em;
min-height : 11em;
padding : 0.5em;
	-webkit-border-top-left-radius: 1em;
	-webkit-border-bottom-right-radius: 1em;
	-webkit-border-top-right-radius: 1em;
	-webkit-border-bottom-left-radius: 1em;
}
img.icon {
background-color : black;
float : left;
text-align: center ;
max-width : 7em;
max-height : 10em;
	-webkit-border-top-left-radius: 1em;
	-webkit-border-bottom-right-radius: 1em;
	-webkit-border-top-right-radius: 1em;
	-webkit-border-bottom-left-radius: 1em;
}
div.gallery2:hover {
border : #4CDC13 solid 1px;
}
div.gallery2 img {
width : 100%;
height : 100%;
padding-top : 10px;
}
div.gallery {
background-color : black;
margin : 0.25em;
border : darkgoldenrod solid 1px;
float : left;
width : 7em;
height : 160px;
	-webkit-border-top-left-radius: 1em;
	-webkit-border-bottom-right-radius: 1em;
	-webkit-border-top-right-radius: 1em;
	-webkit-border-bottom-left-radius: 1em;
}
a.icon:hover {
border : #4CDC13 solid 1px;
}
div.gallery:hover {
border : #4CDC13 solid 1px;
}
div.gallery img {
width : 70%;
height : auto;
padding-top : 10px;
}
div.desc {
padding : 10px;
text-align : center;
}
/* ====================================================  /gallery; media queries    ==================================================== */
@media (min-width: 700px) {
.dropbtn {
display : none;
}

}
@media screen and (min-width: 1px) and (max-width: 700px) {
article : { min-width : 10em
		}
.pust {
display : none;
}
.pustImpress {
display : none;
}
.rechts {
display : none;
}

.dropbtn a:hover span {
background : black;
}

main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
main.impress {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}



gallery {
	grid-column: 2 ;
}

nav .menu {
visibility : hidden;
height : 0;
z-index : 1000;
}
nav .menu li {
display : block;
width : 15em;
}
nav li:hover .menu, nav li:active .menu, nav li:focus .menu {
visibility : visible;
height : auto;
}
nav {
width : 0;
background-color : transparent;
padding-top : 0;
padding-bottom : 0;
top : 0;
}
nav ul, nav li, nav li ul li, nav a, nav ul #menu {
height : 0;
font-size : 0;
margin : 0;
padding : 0;
overflow : hidden;
}
}
/* ====================================================  /media queries ; bottom   ==================================================== */
.oben {
margin : 0.5em;
width : 1em;
height : 1em;
opacity: 0.6;
}
#back-top a {
background-color : black;
margin : 0.1em;
border : none;
position : fixed;
bottom : 6em;
right : 0.1em;
width : 2em;
height : 2em;
border : white solid 2px;
opacity: 0.6;
box-sizing : content-box;
box-shadow : -3px -3px 3px darkslategrey inset;
-webkit-border-top-left-radius: 0.75em;
	-webkit-border-bottom-right-radius: 0.75em;
	-webkit-border-top-right-radius: 0.75em;
	-webkit-border-bottom-left-radius: 0.75em;
}
#back-top span {
width : 60px;
}
#back-top a:hover span {
background : black;
}

.imp {
grid-column : 1 ;
grid-row: 1 ;
text-align : center;
margin : 0.5em;
color : gold;
}
.haft {
grid-column : 2 ;
grid-row: 1 ;
text-align : center;
margin : 0.5em;
color : gold;
}
.dat {
grid-column : 3 ;
grid-row: 1 ;
text-align : center;
margin : 0.5em;
color : gold;
}
.copyright {
grid-row: 2 ;
grid-column : 3 ;
font-size : x-small;
text-align : right;
position : relative;
padding-left : 4.5em;
}

.copyright2 {
font-size : x-small;
text-align : right;
position : relative;
}
	
footer {
max-width : 100%;
display : grid;
grid-template-columns : 33% 33% 33% ;
grid-auto-flow : row dense;
background-color : black;
position : relative;
text-align : center;
height : auto;
margin-top : 0;
padding : 0.5em 12px 12px 12px;
overflow : auto;
box-sizing : content-box;
box-shadow : -3px -3px 3px darkslategrey inset;
overflow : hidden;
-webkit-border-top-left-radius: 1em;
	-webkit-border-bottom-right-radius: 1em;
	-webkit-border-top-right-radius: 1em;
	-webkit-border-bottom-left-radius: 1em;
}