/* Diese CSS file ist zugeschnitten fuer Frieda Artwork */

/* GLOBAL */

/* finger-paint-regular - latin */
@font-face {
  font-family: 'Finger Paint';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/finger-paint-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/finger-paint-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/finger-paint-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/finger-paint-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/finger-paint-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/finger-paint-v15-latin-regular.svg#FingerPaint') format('svg'); /* Legacy iOS */
}

/* reenie-beanie-regular - latin */
@font-face {
  font-family: 'Reenie Beanie';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/reenie-beanie-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/reenie-beanie-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/reenie-beanie-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/reenie-beanie-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/reenie-beanie-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/reenie-beanie-v16-latin-regular.svg#ReenieBeanie') format('svg'); /* Legacy iOS */
}

/* montserrat-alternates-regular - latin */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-alternates-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-alternates-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-alternates-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-alternates-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-alternates-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-alternates-v17-latin-regular.svg#MontserratAlternates') format('svg'); /* Legacy iOS */
}

/* chilanka-regular - latin */
@font-face {
  font-family: 'Chilanka';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/chilanka-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/chilanka-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/chilanka-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/chilanka-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/chilanka-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/chilanka-v18-latin-regular.svg#Chilanka') format('svg'); /* Legacy iOS */
}

/* trade-winds-regular - latin */
@font-face {
  font-family: 'Trade Winds';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/trade-winds-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/trade-winds-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/trade-winds-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/trade-winds-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/trade-winds-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/trade-winds-v17-latin-regular.svg#TradeWinds') format('svg'); /* Legacy iOS */
}

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}

/* width */
::-webkit-scrollbar {
  width: 16px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px lime; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #b30000; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: red; 
}

body
{
        overflow-y: scroll; /* Show vertical scrollbar */
        max-width:150em;
        margin:0.4em auto;
        border-top:0.5em groove #606060;
        border-bottom:0.5em ridge #606060;  
        background:#330000;
}

h3
{
        font-family:'Trade Winds'; 
        font-size:1.6em;
        line-height:1.2em;
        text-align:center;
        color:#606060;
        margin-top:1em;
}

a
{
        text-decoration:none;
        color:inherit;
        transition:color .5s ease;
}

strong
{
        font-weight:bold; 
}

.container
{
        width:100%; 
        margin:0 auto;
}

/* HEADER */

header
{
        width:100%;
        margin:0 auto 3em;
        text-align:center;
}

header img
{
        width:19.99999%;
        height:auto;
}

.weihn
{
        left:26.5em;
        top:-2.3em;
        width:19.99999%;
        height:auto;
}  

header h1
{
        font-family:'Finger Paint', serif;  
        font-size:2em;
        line-height:1.2em;
        color:#e63b7a;
}

header h2
{
        font-family:'Reenie Beanie'; 
        font-size:2em;
        font-weight:bold; 
        color:#ff6a00;
        line-height:0.9em;
        padding: 0.2em 0 0 0em;
}

header p
{
        font-family:'Reenie Beanie';
        font-size:1.9em;
        line-height:0.9em;
        color:#a9fc22;
}

header nav
{
        width:40%;
        min-width:8em;
        margin:0 auto;
        font-size:1.2em;
        font-weight:bold;
        overflow:hidden;
}

header nav ul
{
        list-style-type:none;
        font-family: 'Montserrat Alternates', sans-serif;
        margin:0 auto 0 auto;
        padding:0 auto;    
          
}


header nav li
{
        margin-left:0;
        padding:0.5em 0 0 0;
}

header nav a
{
        display:block;
        padding:2px;
        margin:0 auto 0 auto;
        background-color:#606060;
        color:black;
        border-top:0.1em solid gray;
        border-bottom:0.1em solid gray;
        border-left:0.1em solid gray;
}

header nav ul span
{       /* aktuelle Unterseite kennzeichnen */
        display:block;
        padding:2px;
        font-weight:bold;
        letter-spacing:.22em;
        color:#330000;    
        background-color:#909090;
        border-top:0.1em solid gray;
        border-bottom:0.1em solid gray;
        border-left:0.1em solid gray;
}

header nav a:hover
{
        padding:2px;
        background-color:#909090;
        font-weight:bold;
        color:#330000;
        border-top:0.1em solid gray;
        border-bottom:0.1em solid gray;
        border-left:0.1em solid gray;
}

.elem1 { order: 3; }
.elem2 { order: 1; }
.elem3 { order: 2; }

.elem4 { order: 1; }
.elem5 { order: 3; }
.elem6 { order: 2; }

.elem7 { order: 1; }
.elem8 { order: 2; }
.elem9 { order: 3; }

.flex-container
{
          display: flex;
          background-color: #330000;
          flex-flow: column wrap;
          justify-content: center;
          justify-content: space-around;
          align-items: center;
          text-align:center;
}

.flex-button
{
          background-color: #330000;
          margin: .3em;
          padding:.31em .7em ;
          font-size: 1.4em;
          color:#909090;
          box-shadow: .1em .1em 1em #DF7401 inset;
          border-radius: .7em;
          font-family:'Finger Paint';  
}

.flex-button-span
{      /* aktuelle Unterseite kennzeichnen */
          background-color: #330000;
          wwwidth: 6em;
          margin: .3em;
          padding:.31em .7em ;
          font-size: 1.4em;
          color:#B55510;
          box-shadow: .1em .1em 1em green inset;
          border-radius: .7em;
          font-family:'Finger Paint';  
}

.flex-container a:hover
{
          font-weight:bold;
          color:#B55510;
}

div.desc-first nav
{
        width:80%;
        min-width:8em;
        font-size:1em;
        font-weight:bold;
}

div.desc-first nav ul
{
       display: flex;
       flex-direction: row;
       font-family: 'Montserrat Alternates', sans-serif;
}

div.desc-first nav a
{
        display:block;
        padding:2px;
        margin:0 auto 0 auto;
        background-color:#606060;
        color:black;
        border-top:0.1em solid gray;
        border-bottom:0.1em solid gray;
        border-left:0.1em solid gray;
}

div.desc-first nav ul span
{       /* aktuelle Unterseite kennzeichnen */
        display:block;
        padding:2px;
        font-weight:bold;
        color:#330000;    
        background-color:#909090;
        border-top:0.1em solid gray;
        border-bottom:0.1em solid gray;
        border-left:0.1em solid gray;
}

div.desc-first nav a:hover
{
        padding:2px;
        background-color:#909090;
        font-weight:bold;
        color:#330000;
        border-top:0.1em solid gray;
        border-bottom:0.1em solid gray;
        border-left:0.1em solid gray;
}

* {
        box-sizing:border-box;
}

div.desc-kopf
{
        margin:1.2em auto 1.7em;
        text-align:center;
        font-size:2em;
        letter-spacing:.25em;
        line-height:1.5em;
        color:#B55510;
        font-family:'Finger Paint';
        -moz-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        -o-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        transform: rotate(10deg);
}

div.desc-kopf span
{
        font-size:1.5em;
}

div.desc-gallery
{
        margin:1.7em auto 2.5em;
        text-align:center;
        font-variant: small-caps;
        font-weight: 300;
        font-size:2.1em;
        line-height:1.5em;
        color:#aaaaaa;
        font-family:'Finger Paint';
        -moz-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        -o-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        transform: rotate(355deg);
}

.desc-rolle
{
        margin:1.3em auto 1.5em;
        text-align:center;
        font-variant: small-caps;
        font-weight: 300;
        font-size:2em;
        color:#909090;
}

.desc-rolle-galerie
{
        margin:.3em auto .5em;
        text-align:center;
        font-variant: small-caps;
        font-weight: 300;
        font-size:2em;
        color:green;
}

.desc-rolle-homestyle
{
        margin:.3em auto .5em;
        text-align:center;
        font-variant: small-caps;
        font-weight: 300;
        font-size:2em;
        color:green;
}

.desc-rolle-archiv
{
        margin:.3em auto .5em;
        text-align:center;
        font-variant: small-caps;
        font-weight: 300;
        font-size:2em;
        color:green;
}

div.desc
{
        margin:1.3em auto 1.5em;
        font-family: 'Chilanka', cursive;
        font-size:1.5em;
        line-height:1.2em;
        color:#909090;
        text-align:center;
}

div.desc-first
{
        font-family: 'Chilanka', cursive;
        font-weight:500;
        letter-spacing:.03em;
        font-size:1.9em;
        line-height:1.2em;
        color:#909090;
        text-align:center;
}

div.desc-first h1
{
        font-size:1.2em;
        font-weight:600;
        letter-spacing:.3em;

}

div.desc-first h2
{
        font-size:.9em;
        font-weight:600;
        letter-spacing:.09em;
}

div.desc-kontakt
{
       	font-family:'Montserrat Alternates', sans-serif;
        margin:1.5em auto 1.3em;
        line-height:1.3em;
        font-size: 1.5em;
        color:silver;
        text-align:center;
}

div.frage
{
       	font-family:'Montserrat Alternates', sans-serif;
        text-align:center;
        margin:0.6em auto 1.3em;
        line-height:1.3em;
        font-size: 1.5em;
        color:silver;
        box-shadow: .1em .1em 1em #DF7401 inset;
        border-radius: .7em;
        padding:.6em;
}

.desc-impressum
{
       	font-family:'Montserrat Alternates', sans-serif;
        line-height:1.3em;
        margin:.6em auto 0;
        font-size: 1.5em;
        color:silver;
        text-align:center;
}

div.desc-webdesign
{
        line-height:1.2em;
        margin:.2em auto .3em;
        line-height:1.3em;
       	font-family:'Montserrat Alternates', sans-serif;
        font-size: 1.5em;
        color:silver;
        text-align:center;
}

div.desc-haftung p
{
		font-family:'Montserrat Alternates', sans-serif;
        margin:.5em auto .6em 2em;
        line-height:1.3em;
        font-size: 1.4em;
        color:silver;
}

.responsive
{
        left:1px;
        top:20px;
        width:100%;
        height:auto;
}

div.gallery
{
        background-color:#330000;
        width:90%;
        margin:30px auto;
        overflow:hidden;   
}

div.gallery img 
{
        width:100%;
        height:auto;
}

div.column img
{
       margin-top: 8px;
       vertical-align: middle;
       width: 90%;
       display:block;
       margin:2px auto;
}


div.column-highres
{
display:block;
       width: 100%;
       height:auto;
         margin:0 auto;
         text-align:center;
}

div.column-highres img
{
       width: 30%;
       height:auto;
         margin:0 auto;
}




/* FOOTER */

.footer
{
        width:80%; 
        margin:0 auto;
        padding:.2em;
}

div.responsive-footer
{       /* entspricht "responsive */
        left:1px;
        margin-left:auto;
        margin-right:auto;
        padding:0 0 0 0;
        width:100%;
        height:auto;      

}

div.gallery-footer
{       /* entspricht "galerie */
        width:80%;
        margin:30px auto;
        overflow:hidden;
        background-color: #330000;
        border-top:0.5em groove #606060;
        border-bottom:0.5em ridge #606060;
        box-shadow: 5px 0 180px #606060 inset, 5px 0 111px #606060;
}

div.descfooter img
{       /* bilder -inge-und-farbklecks- im footer */
        width:100%;
        height:auto;
        width:19.99999%;
}

div.descfooter
{
        padding:5px 0 1px 0;
        text-align:center;
}

div.descfooter-startseite
{
        padding:1em 0 1em 1em;
        text-align:left;
        font-size:16px;
        color:#606060;
        font-family:'Finger Paint';     
}

div.descfooter-span
{
        padding:1em 0 1em 2em;
        text-align:center;
        font-size:16px;
        color:#606060;
        font-family:'Finger Paint';     
}

div.descfooter-span span
{       padding:.3em 1.2em;
        margin-left:-1.3em;
        background-color:#330000;
        font-weight:bold;
        color:green;
        border:.1em solid #606060;
}

div.descfooter-span span a:hover
{  
        padding:.3em -.2em .3em .2em;
        color:#b51a00;
}

div.descfooter-startseite a:hover
{
        padding:.3em 1.2em;
        margin-left:-1.3em;
        background-color:#909090;
        font-weight:bold;
        color:#330000;
        border:0.1em solid #303030;
}

div.descfooter-startseite span
{
        padding:.3em 1.2em;
        margin-left:-1.3em;
        background-color:#909090;
        font-weight:bold;
        color:green;
        border:0.1em solid #303030;
}

div.descfooter-startseite span a:hover
{  
        padding:.3em -.2em .3em .2em;
        background-color:#330000;
        font-weight:bold;
        color:red;
}

div.descfooter-galerie
{
        padding:1em 0 1em 0;
        text-align:center;
        font-size:16px;
        color:#606060;
        font-family:'Finger Paint';     
}

div.descfooter-galerie a:hover
{
        padding:.3em 1.2em;
        background-color:#909090;
        font-weight:bold;
        color:#330000;
        border:0.1em solid #303030;
}

div.descfooter-galerie span a:hover
{
        background-color:#330000;
        font-weight:bold;
        color:#ffffff;
        border-style:hidden;
}

div.descfooter-homestyle
{
        padding:1em 0 1em 1em;
        text-align:left;
        font-size:16px;
        color:#606060;
        font-family:'Finger Paint';     
}

div.descfooter-homestyle a:hover
{
        padding:.3em 1.2em;
        margin-left:-1.2em;
        background-color:#909090;
        font-weight:bold;
        color:#330000;
        border:0.1em solid #303030;
}

div.descfooter-homestyle span a:hover
{
        background-color:#330000;
        font-weight:bold;
        color:#ffffff;
        border-style:hidden;
}

div.descfooter-archiv
{
        padding:0 2em 1em 0;
        text-align:right;
        font-size:16px;
        color:#606060;
        font-family:'Finger Paint';     
}

div.descfooter-archiv a:hover
{
        padding:.3em 1.2em;
        margin-right:-1.3em;
        background-color:#909090;
        font-weight:bold;
        color:#330000;
        border:0.1em solid #303030;
}

div.descfooter-archiv span a:hover
{
        background-color:#330000;
        font-weight:bold;
        color:#ffffff;
        border-style:hidden;
}

div.descfooter-kontakt
{
        padding:0 0 2em 0;
        text-align:center;
        font-size:16px;
        color:#606060;
        font-family:'Finger Paint';     
}

div.descfooter-kontakt a:hover
{
        padding:.3em 1.2em;
        background-color:#909090;
        font-weight:bold;
        color:#330000;
        border:0.1em solid #303030;
}

div.descfooter-kontakt span a:hover
{
        background-color:#330000;
        font-weight:bold;
        color:#ffffff;
        border-style:hidden;
}


div.descfooter-impressum
{
        padding:0 0 1em 0;
        text-align:center;
        font-size:16px;
        color:#606060;
        font-family:'Finger Paint'; 
}

div.descfooter-impressum a:hover
{
        padding:.3em 1.2em;
        background-color:#909090;
        font-weight:bold;
        color:#330000;
        border:0.1em solid #303030;
}

div.descfooter-impressum span a:hover
{
        background-color:#330000;
        font-weight:bold;
        color:#ffffff;
        border-style:hidden;
}

.descfooter-face
{   
        ppposition:relative; 
        padding:0 0 .3em 0;
        text-align:left;
}

.descfooter-face img
{       /* bild -face- im footer */
        width:100%;
        height:auto;
        width:9.99999%;
}


div.descfooter-face
{
        padding:1em 0 1em 1em;
        text-align:left;
        font-size:16px;
        color:#606060;
        font-family:'Finger Paint';     
}

div.descfooter-face a:hover
{
        padding:.3em 1.2em;
        margin-left:-1.2em;
        bbbackground-color:#909090;
        fffont-weight:bold;
        color:#909090;
        bbborder:0.1em solid #303030;
}

div.archiv-responsive-footer
{       /* entspricht "responsive */
        left:1px;
        margin-left:auto;
        margin-right:auto;
        padding:0 0 0 0;
        width:100%;
        height:auto;
}

div.archiv-gallery-footer
{       /* entspricht "galerie */
        width:80%;
        margin:30px auto;
        overflow:hidden;   
        background-color: #330000;
        border-top:0.5em groove #606060;
        border-bottom:0.5em ridge #606060;
        box-shadow: 5px 0 180px #606060 inset, 5px 0 111px #606060;
}

div.archiv-descfooter img
{
        width:100%;
        height:auto;
        width:19.99999%;
}

div.archiv-descfooter
{
        padding:5px 0 1px 0;
        text-align:center;
}

ffffffooter p
{
        margin:.7em;
        text-align:center;
        font-size:1em;         
        font-family: 'Montserrat Alternates', sans-serif;
        color:#606060;
}

.flex-footer
{
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
        justify-content: space-between;
        background-color: #330000;
        color:#606060; 
}

.flex-footer > div
{
        background-color: #330000;
        wwwidth: 100px;
        margin: 10px;
        text-align: center;
        font-size: 1em;
}

.flex-footer a
{
        box-shadow: inset 0 -3px 0 -1px #606060;
        padding: .25em 0;
        text-decoration: none;
        transition: all .5s;
}

.flex-footer a:hover,
.flex-footer a:focus
{
        box-shadow: inset 0 -30px 0 #606060;
        color: #330000;
        border-radius: .7em;
}

/* SKIPLINK */

.back-to-top
{
     	position: fixed;
        bottom: .6em;
        left: .002em;
        font-family:'Montserrat Alternates', sans-serif;
        text-decoration: none;
        color:  lime;
        font-size: 3em;
        padding:.001em;
        text-align:center;
        line-height:0.001em;
}

.back-to-top:hover
{
        color: silver;
}

/* MISC */

.clear
{
        clear:both;
}

.hidden
{
        position:absolute;
        clip:rect(1px 1px 1px 1px); /* IE6 & 7 */
        clip:rect(1px, 1px, 1px, 1px);
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {                        /** CSS media query beginn für alle **/

    // IE10+ CSS here

}

@media only screen and (min-width: 600px) {                                                    /** CSS media query 600 **/

{
        font-size:2.7em;
}

div.desc-kontakt
{
        margin:1.5em auto 1.3em;
        color:lime;
}

.elem1 { order: 2; }
.elem2 { order: 1; }
.elem3 { order: 3; }

.elem4 { order: 1; }
.elem5 { order: 2; }
.elem6 { order: 3; }

.elem7 { order: 1; }
.elem8 { order: 3; }
.elem9 { order: 2; }

.flex-container
{
        flex-flow: row wrap;
}

.desc-rolle-galerie
{
        margin:.3em auto .5em 2em;
}

.desc-rolle-homestyle
{
        margin:.3em auto .5em .5em;
}

.desc-rolle-archiv
{
        margin:.3em auto .5em -1em;
}

.row
{
        position:relative;
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
        padding: 20px 4px 40px 4px;
        margin:auto;
        max-width:2400px;
}

.column
{
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
}

div.descfooter-startseite
{
        padding:1em 0 0 2em;
}

div.descfooter-homestyle
{
        padding:1em 0 0 6em;
}

}

@media only screen and (min-width: 970px) {                                               /** CSS media query 970 **/


.container
{
        width:80%; 
        padding:10px 10px 0 0;
}

header
{
        position:absolute;
        width:500px;
        height:50vh;
        top:25vh;
        margin:0 auto 20px auto;
        padding:0 0 0 0;    
}

header img
{
        position:absolute;
        left:-1.5em;
        top:-1em;
        width:29.99999%;
        height:auto;
}

.weihn
{
        left:22em;
        top:-2em;
        width:14.99999%;
        height:auto;
}

header h1
{
        font-size:2.2em;
        padding:0.1em 0 0 1em;
}

header h2
{
        font-size:1.8em;
        padding:0.3em 0 0 1.5em;
}

header p
{
        font-size:1.8em;
        padding:0.1em 0 0 1.5em;
}

header nav
{
        padding:2em 13em 0 9em;
        width:200px;
        color:#000;
        font-size:.9em;
}

header nav a
{
        width:130px;
}

header nav ul span
{       /* aktuelle Unterseite kennzeichnen */
        padding:2px 20px;
        width:160px;
        letter-spacing:.30em;
        border-top:0.1em solid gray;
        border-bottom:0.1em solid gray;
        border-left:0.1em solid gray;
}

header nav a:hover
{
        width:160px;
}

.responsive
{
        position:relative;
        left:250px;
        margin-left:auto;
        margin-right:auto;
        padding:0 0 0 0;
        width:59.99999%;
        height:auto;
}

div.gallery
{
        left:600px;
        top:160px;
        width:90%;
}


div.desc-kopf
{
        font-size:2.2em;
}

.desc-first
{
        line-height:1.2em;
        margin:.1em auto 2em;
        font-size:2em;
}

div.desc-kontakt
{
        margin:9em auto 1.3em;
        font-size: 1.5em;
        color:red;
}

.elem1 { order: 2; }
.elem2 { order: 1; }
.elem3 { order: 3; }

.elem4 { order: 1; }
.elem5 { order: 2; }
.elem6 { order: 3; }

.elem7 { order: 1; }
.elem8 { order: 3; }
.elem9 { order: 2; }

.flex-container
{
          flex-flow: row wrap;
}

.flex-button
{
          font-size: 1.2em;
}

.flex-button-span
{         /* aktuelle Unterseite kennzeichnen */
          font-size: 1.2em;
}

.row
{
          position:relative;
          display: -ms-flexbox; /* IE10 */
          display: flex;
          -ms-flex-wrap: wrap; /* IE10 */
          flex-wrap: wrap;
          padding: 20px 4px 40px 4px;
          margin:auto;
          max-width:2400px;
}

/* Create four equal columns that sits next to each other */
.column
{
         -ms-flex: 25%; /* IE10 */
         flex: 25%;
         max-width: 25%;
         padding: 0 4px;
}

.column img
{
         margin-top: 8px;
         vertical-align: middle;
         width: 100%;
}

/* FOOTER */

div.archiv-responsive-footer
{       /* entspricht "responsive */
        text-align:center;
        margin-left:auto;
        margin-right:auto;
        padding:0 0 0 0;
        width:80%;
        height:auto;
}

div.archiv-gallery-footer
{       /* entspricht "galerie */
        left:600px;
        top:160px;   
        width:100%;
        margin:30px auto;
        overflow:hidden;   
}

div.archiv-descfooter
{
        padding:5px 0 1px 0;
        text-align:center;
}

ddddddddddddddddddddddddddddddddiv.archiv-descfooter-textoben
{
        padding:5px 0 20px 0;
        text-align:center;
        font-size:16px;
        color:#606060;
        font-family:'Finger Paint';     
}

dddddddddddddddddddddddddddddddddiv.archiv-descfooter-textunten
{
        padding:5px 0 5px 0;
        text-align:center;
        font-size:16px;
        color:#606060;
        font-family:'Finger Paint'; 
}

div.archiv-descfooter img
{
        width:100%;
        height:auto;
        width:14.99999%;
}

div.responsive-footer
{       /* entspricht "responsive */
        position:relative;
        left:250px;
        width:59.99999%;
        height:auto;
}

div.gallery-footer
{       /* entspricht "galerie */
        left:600px;
        top:160px;   
}

}

@media only screen and (min-width: 998px) {                                               /** CSS media query 998 **/

.flex-button
{
        font-size: 1.4em;
}

.flex-button-span{ /* aktuelle Unterseite kennzeichnen */
        font-size: 1.4em;
}

}

@media only screen and (min-width: 1260px ) {                                               /** CSS media query 1260 **/

header img
{
        position:absolute;
        left:-50px;
        top:-30px;
        width:39.99999%; 
        max-width:100%;;
}

.silv
{
        left:26.5em;
        top:-2.3em;
        width:17.99999%;
        height:auto;
}  

header h1
{
        font-size:2.7em;
        padding:0.1em 0 0 3em;
}

header h2
{
        font-size:2.2em;
        padding:0.3em 0 0 3.7em;
}

header p
{
        font-size:2.2em;
        padding:0.1em 0 0 3.7em;
}

header nav
{
        padding:2em 13em 0 15em;
        width:200px;
        height:456px;
        color:#000;
}

header nav a
{
        width:130px;
}

header nav ul span
{       /* aktuelle Unterseite kennzeichnen */
        padding:2px 20px;
        width:160px;
        letter-spacing:.30em;
        border-top:0.1em solid gray;
        border-bottom:0.1em solid gray;
        border-left:0.1em solid gray;
}

header nav a:hover
{
        width:160px;
}

.responsive
{
        position:relative;
        left:250px;
        margin-left:auto;
        margin-right:auto;
        padding:0 0 0 0;
        width:59.99999%;
        height:auto;
}

div.gallery
{
        left:600px;
        top:160px;
        width:80%;
}

div.desc-kopf
{
        font-size:2.6em;
        letter-spacing:.25em;
        line-height:1.5em;
}

div.desc-kontakt
{
        margin:9em auto 1.3em;
        font-size: 1.5em;
        color:yellow;
}

div.archiv-gallery-footer
{       /* entspricht "galerie */
        width:70%;
}

}