body {
    font-family: utile-display, sans-serif;
    font-style: normal;
    font-weight: 200;
	max-width: 80em;
    font-size: 14pt;
    background-color: #a2a2a2;
    background-origin: border-box;
    background-repeat: repeat-x;
}

header {
    height: 200px;
}


#home {
    background-image: url(images/logo-hero-screen.jpg);
}
#ausstellungen {
    background-image: url(images/ausstellungshero.jpg);
}

#bio {
    background-image: url(images/biohero.jpg);
}

#seminare {
    background-image: url(images/seminarhero.jpg);
}

#impressum {
    background-image: url(images/landschafthero2.jpg);
}

#pastell {
    background-image: url(images/pastellhero.jpg)
}
#oel {
    background-image: url(images/oelhero.jpg)
}
#acryl {
    background-image: url(images/acrylhero.jpg)
}
#aquarell {
    background-image: url(images/aquarellhero-b.jpg)
}

#mixed {
    background-image: url(images/mixedhero.jpg)
}

#konzept {
    background-image: url(images/zeichnunghero.jpg)
}    

    
/*      HAUPTNAVIGATION     */


nav ul {
    list-style-type: none;
    margin-top: 150px;
    padding: 0;
    float: right;
    width: 80%;
}


nav li {
    float: left;
}

#gotop {
    position: fixed;
    right: 10px;
    bottom: 5px;
    padding: 5px 0;
    border-radius: 8px;
    background-color: #a2a2a2;
    opacity: 0;
    -webkit-transition: 600ms;
    transition: 600ms;
}

nav li a, .gal-btn, #gotop a:link, #gotop a:visited {
    display: inline-block;
    color: black;
    font-size: 16pt;
    text-shadow: 0 0 2px white;
    font-weight: bold;
    text-align: center;
    margin: 8px 17px;
    text-decoration: none;
    background-color: #dadada;
    padding: 3px 5px 6px 5px;
    border-radius: 8px;
    opacity: 0.8;
    -webkit-transition: 400ms;
    transition: 400ms;
}

.gal-themes {
    background-color: #a2a2a2;
    border-radius: 8px;
    box-shadow: 4px 4px 6px #757575;
    display: none;
    position: absolute;
    z-index: 1;    
}

nav li a:hover, nav li a:active, .galerie:hover, galerie:active, .gal-btn:hover, .gal-btn:active, .gal-themes a:hover, #gotop a:hover, #gotop a:active {
    color: white;
    background-color: #787878;
    text-shadow: 0 0 2px black;
}


nav li .active {
    color: white;
    font-weight: bold;
    text-shadow: 0 0 2px gray; 
    background-color: black;
    padding: 3px 5px 6px 5px;
    border-radius: 8px;
}
    
nav li .galerie {
    display: inline-block;  
}


.gal-themes a {
    color: black;
    margin: 15px 20px;
    text-decoration: none;
    display: block;
    text-align: left;
    -webkit-transition: 400ms;
    transition: 400ms;
}

.galerie:hover .gal-themes {
    display: block;
}

.fa-bars, .fa-times {
    color: black;
    padding: 5px;
    border: 2px solid black;
    border-radius: 8px;
    background-color: #dadada;
    text-shadow: 0 0 2px white;
    box-shadow: 0 0 2px white;
}

.top {
    padding: 5px;
    border: solid 2px;
    border-radius: 8px;
}


#closed, .open {
    display: none;
}

#social {
    position: absolute;
    top: 240px;
    right: 5px;
}

#social a:link, #social a:visited {
    text-decoration: none;
    margin-right: 10px;
    padding: 5px;
    color: black;
    -webkit-transition: 400ms;
    transition: 400ms;
}

#social a:hover, #social a:focus, #social a:active {
    color: white;
    background-color: #787878;
    border-radius: 5px;
}

/*          Ende Navigation     */

h1 {
    font-family: utile-display, sans-serif;
    text-align: center;
    font-size: 42pt;
    font-weight: semi-bold;
    margin: auto;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

h2 {
    font-family: utile-display, sans-serif;
    font-size: 36pt;
    font-weight: lighter;
	text-align: center;
    margin:auto;
    margin-top: 1.5em;
    margin-bottom: 0.5em
}

h3 {
    font-family: utile-display, sans-serif;
    font-size: 24pt;
    font-weight: lighter;
	text-align: center;
    margin:auto;
    margin-top: 1em;
    margin-bottom: 0.5em
}

h4 {
    font-family: utile-display, sans-serif;
    font-size: 16pt;
    font-weight: bold;
	text-align: left;
    margin-top: 1em;
    margin-bottom: 0.5em 
}

.red {
	color: red;
}

.right {
    text-align: right;
}

figure {
    margin: 0;
}

figcaption {
    font-size: 10pt;
    padding-left: 5px;
}

/*
big {
	font-size: 48px;
	font-weight: bold;
	text-align: center;
	}
*/

/* für Trennliniencontainer */

.line {
    clear: both;
    padding: 5px;
}

/* Für email in aside (Impressum)  */

.hintergrundhell{
	background-color: black;
	opacity: 0.6;
}

.einzug {
	margin-left: 1em;
    padding-left: 5px;
}

/* Tabelle für Biographie */

table {
	table-layout: fixed;
}

ul {
    list-style-type: none;
}

td {
	vertical-align: top;
}

footer {
	text-align: center;
	margin-top: 3em;
}

/*      Grid für Bilderseiten       */

#dense {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: (minmax(80px, 1fr))[auto-fill];
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	grid-auto-flow: dense;	
	-webkit-box-pack: justify;	
	-ms-flex-pack: justify;	
	justify-content: space-between;
	grid-gap: 20px;
	-ms-flex-line-pack: center;
	align-content: center;
	-ms-grid-row-align: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

#dense img {
    width: 100%;
}


.quer,
.quer2,
.quer4,
.quer5,
.quer6,
.hoch,
.hoch3,
.hoch4,
.hoch1,
.sehrhoch,
.panorama {
	padding: 5px;
	margin: auto;
}

.quer,
.hoch3 {
	-ms-grid-column: span 3;
	grid-column: span 3;
	justify-self: center;
}

.hoch,
.quer2 {
	-ms-grid-column:span 2;
	grid-column:span 2;
	justify-self: center;
}


.quer4{
	-ms-grid-column: span 4;
	grid-column: span 4;
	justify-self: center;
}

.quer5 {
	-ms-grid-column: span 5;
	grid-column: span 5;
	justify-self: center;
	}

.quer6 {
	-ms-grid-column: span 6;
	grid-column: span 6;
	justify-self: center;
	}

.hoch4{
	-ms-grid-column: span 4;
	grid-column: span 4;
	justify-self: center;
	}

.hoch1 {
	justify-self: center;
}


/* Bild in Hochkant für aside*/

.lang {
	width: 50%;
	padding-left: 25%;
}

.fastlang {
    width: 66%;
    padding-left: 17%;
}

.bisschenlang {
    width: 84%;
    padding-left: 8%;
}



/* Media Query Related Stuff
... mobile first!!! */

aside {
	color: white;
	width: 90%;
	background-color: #787878;
	margin: auto;
    padding-top: 5px;
	padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
}

aside a:link, aside a:visited {
    color: aliceblue;
}

aside a:hover, aside a:active, aside a:focus {
    color: yellow;
}

main {
	display: block;
	width: 90%;
	margin: auto;
}

div .haupt {
	display: block;
	width: 90%;
	margin: auto;
}

.screen {
    display: none;
}

.handheld {
    display: inline-block;
}


@media all and (min-width:810px) {

	.links {
		width: 40%;
		float: left;
		margin-right: 2%;
	}

    .onlauss {
        width: 560px;
        float: left;
        margin-right: 2%;
    }
    
	.rechts {
		width: 40%;
		float: right;
		margin-left: 2%;
	}
    
    .screen {
        display: inline-block;
    }
    
    .handheld {
        display: none;
    }
}




	/* Navigation muss toggeln */

@media all and (max-width:768px) {
    nav {
        display: none;
    }
    
    #home {
    background-image: url(images/logo-hero-handheld.jpg);
    }
    
    #bio {
        background-image: url(images/biohero-handheld.jpg)
    }
    
    .open {
        display: none;
    }
    
    #closed {
        display: block;
        position: fixed;
        top: 10px;
        right: 10px;
    }
    
    #mininav:target .open {
        display: block;
        position: fixed;
        top: 10px;
        right: 10px;
    }
    
    #mininav:target #closed {
        display: none
    }
    
    #mininav:target nav {
        display: block;
        width: 30%;
        float: right;
    } 
    
    nav ul {
        margin-top: 50px;
    }
  /*
    .gal-themes {
        position: fixed;
        top: 115px;
        right: 20vw;
    }
*/
    .gal-themes a {
        margin: 0;
        padding: 5px;
    }

    .gal-themes {
        position: relative;
        left: -50px;
    }   
}

/*  je kleiner der Bildschirm wird um so weiter links muss das Menü sein */

@media all and (max-width:650px) {
    #mininav:target nav{
    width: 35%;
    } 
}

@media all and (max-width:568px) {
    #mininav:target nav{
    width: 40%;
    } 
}

@media all and (max-width:490px) {
    #mininav:target nav {
    width: 45%;
    }   
}

@media all and (max-width:438px) {
    #mininav:target nav {
    width: 50%;
    }   
}

@media all and (max-width:383px) {
    #mininav:target nav {
    width: 60%;
    }     
}

@media all and (max-width:323px) {
    #mininav:target nav{
    width: 80%;
    }    
}

@media print {
    body {
    width: 20cm;}
}