/*
EM - PX zum kopieren oder nachschauen
10px = 0.6em
12px = 0.76em
14px = 0.9em
16px = 1.0em
18px = 1.12em
22px = 1.38em
26px = 1.63em
*/
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/open-sans-v34-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/open-sans-v34-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v34-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v34-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v34-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v34-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}

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

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

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

/* open-sans-300italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/open-sans-v34-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/open-sans-v34-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v34-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v34-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v34-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v34-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

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

/* open-sans-600italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/open-sans-v34-latin-600italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/open-sans-v34-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v34-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v34-latin-600italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v34-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v34-latin-600italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-700italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/open-sans-v34-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/open-sans-v34-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v34-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v34-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v34-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v34-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* playfair-display-regular - latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/playfair-display-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/playfair-display-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/playfair-display-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/playfair-display-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/playfair-display-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/playfair-display-v30-latin-regular.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
}

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

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

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

/* playfair-display-600italic - latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/playfair-display-v30-latin-600italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/playfair-display-v30-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/playfair-display-v30-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/playfair-display-v30-latin-600italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/playfair-display-v30-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/playfair-display-v30-latin-600italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
}

/* playfair-display-800italic - latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/playfair-display-v30-latin-800italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/playfair-display-v30-latin-800italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/playfair-display-v30-latin-800italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/playfair-display-v30-latin-800italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/playfair-display-v30-latin-800italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/playfair-display-v30-latin-800italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
}
body {
	margin: 0;
	padding: 0;
	font-size: 100.01%;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    background-color: #f3f3f3;
    color:#514b29;
}
p, h1, h2, h3, h4 {
    margin: 0 0 1em 0;
}
h1 {
    font-size:2em;
}
h4 {
    font-size: 0.8em;
}
h1, h2, h3 {
    font-weight: 600;
    color: #82b7d8;
    transition: color 3s;
}
strong, h4 {
    font-weight: 600;
}
.bezeichnung {
    font-weight: 600;
    font-size: 0.5em;
    color:#514b29;
}
/*h1, h2, h3 {
    font-family: 'Playfair Display', serif;
} */
h2 {
    font-size: 1.5em;
}
a {
    position: relative;
    color:#ed959d;
    transition: color 0.5s;
}
a, p, h1, h2, h3, h4, ul {
    position: relative;
    z-index: 5;
}
a:hover, a:active {
    color:#47637b;
}
a:active, a:focus {
    outline: none;
    text-decoration: none;
}
.zitat a {
    text-shadow: 1px 1px 3px #000;
}
.trennbild a:hover, a:active {
    color:#fff;
}
ul {
    list-style-type: none;
    margin-left:1em; text-indent:-1em;
}
li::before { 
    width:1em;
    content: "■"; 
    padding-right:0.4em;
    color: #82b7d8;  }
#pfeil {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    width:80px;
    height:70px;
    position: fixed;
    bottom: 2em;
    right: 2em;
    padding-bottom: 10px;
    display: flex;
   align-items: center;
   justify-content: center;
    text-align: center;
    color: #FFF;
    font-size: 1.75em;
    text-decoration: none;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    background-color: #ed959d;
    transition: all 0.5s;
    box-shadow: 0px 0px 3px #666;
    z-index: 20;
}
#pfeil:hover {
    background-color: #47637b;
}
#container {
    font-size: 1.2em;
    position: relative;
    width:100%;
    /*background-color: #faf8ec;
    margin: 0 auto;
    box-shadow: 0px 0px 15px silver;*/
}
#head {
    padding:20px 80px;
    background-color: rgba(255,255,255,0.75);
    text-align: center;
}
.quelle {
	font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size:0.35em;
    white-space: nowrap;
    font-style: normal;
}
.logo {
    width:auto;
}
.headerbild {
    position: relative;
    /*background: url(images/100516-20-Langeoog-Pano-41-1280.jpg) no-repeat top center fixed;
    -moz-background-size: auto;
    background-size: auto;*/
    box-shadow: 0px 0px 40px #666 inset;
    min-height:50em;
}
.headerbild p, .trennbild p, .headerbild strong {
    position: relative;
    color:#fff;
    text-shadow: 1px 1px 3px #444;
}
.headerbild .zitat {
    padding-top: 6em;
}
.trennbild {
    position: relative;
    color:#fff;
    width:100%;
    /*min-height:604px;*/
    min-height:30em;
    padding-top: 8em;
    /*-moz-background-size: cover;
    background-size: cover;*/
    box-shadow: 0px 0px 40px #666 inset;
    background: transparent;
}
.trennbild a {
    font-weight: 600;
}
.trennbild.footer {
    min-height:auto;
    padding-top: 0;
}
.hg-1 {
    background: url(images/moewe.jpg) no-repeat center center fixed; 
    background-size: cover;
}
.iphone .hg-1 {
    background: url(images/moewe.jpg) no-repeat center center scroll; 
    background-size: auto 100%;
}
.hg-2 {
    background: url(images/100516-20-Langeoog-Pano---46.jpg) no-repeat top center fixed; 
    background-size: cover;
}
.iphone .hg-2 {
    background: url(images/100516-20-Langeoog-Pano---46.jpg) no-repeat top center scroll; 
    background-size: auto 100%;
}
.hg-5 {
    background: url(images/100516-20-Langeoog-Pano-54.jpg) no-repeat top center fixed; 
    -moz-background-size: cover;
    background-size: cover;
}
.iphone .hg-5 {
    background: url(images/100516-20-Langeoog-Pano-54.jpg) no-repeat top center scroll; 
    background-size: auto 100%;
}
.hg-4 {
    background: url(images/100516-20-Langeoog-Pano-60.jpg) no-repeat top center fixed; 
    -moz-background-size: cover;
    background-size: cover;
}
.iphone .hg-4 {
    background: url(images/100516-20-Langeoog-Pano-60.jpg) no-repeat top center scroll; 
    background-size: auto 100%;
}
.hg-3 {
    background: url(images/Q24A2556-schluessel-2.jpg) no-repeat top center fixed; 
    -moz-background-size: cover;
    background-size: cover;
	}
.iphone .hg-3 {
    background: url(images/Q24A2556-schluessel-2.jpg) no-repeat top center scroll; 
    background-size: auto 100%;
	}
.hg-9 {
    background: url(images/100516-20-Langeoog-Pano---07.jpg) no-repeat top center fixed; 
    -moz-background-size: cover;
    background-size: cover;
	}
.iphone .hg-9 {
    background: url(images/100516-20-Langeoog-Pano---07.jpg) no-repeat top center scroll; 
    background-size: auto 100%;
	}
.hg-10 {
    background: url(images/110807-Wenningstedt---05.jpg) no-repeat top center fixed; 
    -moz-background-size: cover;
    background-size: cover;
}
.iphone .hg-10 {
    background: url(images/110807-Wenningstedt---05.jpg) no-repeat top center scroll; 
    background-size: auto 100%;
}
/*
@supports (-webkit-overflow-scrolling: touch) {
    .hg-1 {
    background: url(images/moewe.jpg) no-repeat center center scroll; 
    background-size: auto 100%;
}
    .hg-2 {
    background: url(images/100516-20-Langeoog-Pano---46.jpg) no-repeat top center scroll; 
    background-size: auto 100%;
}
    .hg-5 {
    background: url(images/100516-20-Langeoog-Pano-54.jpg) no-repeat top center scroll; 
    background-size: auto 100%;
}
.hg-4 {
    background: url(images/100516-20-Langeoog-Pano-60.jpg) no-repeat top center scroll; 
    background-size: auto 100%;
}
.hg-3 {
    background: url(images/Q24A2556-schluessel-2.jpg) no-repeat top center scroll; 
    background-size: auto 100%;
	}
.hg-9 {
    background: url(images/100516-20-Langeoog-Pano---07.jpg) no-repeat top center scroll; 
    background-size: auto 100%;
	}
.hg-10 {
    background: url(images/110807-Wenningstedt---05.jpg) no-repeat top center scroll; 
    background-size: auto 100%;
}
}
*/
.artikel {
    padding:80px 80px 80px 160px;
    position: relative;
}
#window .artikel {
    padding:80px;
    position: relative;
}
.content {
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
}
.portrait {
    float:right;
    box-shadow: 0px 0px 4px #AAA;
    border:2px solid #FFF;
    margin-left: 1em;
    margin-top: 0.4em;
    margin-bottom: 1em;
}
.portrait2 {
    float:left;
    box-shadow: 0px 0px 4px #AAA;
    border:2px solid #FFF;
    margin-right: 1em;
    margin-top: 0.4em;
    margin-bottom: 1em;
}
.subline {
    clear: both;
    top:-10em;
    font-size: 1.2em;
}
.impressum {
    font-size: 0.75em;
    float:left;
    width:25%;
}
.dgs {
    top:0;
    float:right;
    width:40%;
    text-align: right;
}
.dgs img {
    padding-right:1em;
}
/*#eingerueckt .artikel p, #eingerueckt .artikel h2, #eingerueckt .artikel h4, #eingerueckt .artikel ul {
    margin-left: 80px;
}
#eingerueckt .artikel p.zitat {
    margin-left: 0;
}
#eingerueckt .headerbild .artikel p strong {
    margin-left: -2.2em;
}*/
.nummer {
    position:absolute;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    float: left;
    font-size: 600%;
    margin-left:-0.75em;
    margin-top:-0.5em;
    color: #c0d8e4;
    z-index: 0;
}
.hellblau {
    background-color: #f4fbff;
}
.beige {
    background-color: #faf8ec;
}
.dunkel {
    background-color: rgba(0,0,0,0.35);
}
.text-hellblau {
    color: #82b7d8;
}

.zitat::before { 
    content: "”"; 
    float: left;
    font-size: 700%;
    color: #82b7d8;
    margin-top:-0.21em;
    margin-right:-0.0em;
    line-height: 1.2em;
    z-index: 0; 
    display: block;
    height:1.7em;
}
.zitat.kleiner::before { 
    height:2.65em;
}
.zitat {
    position: absolute;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 2.5em;
    color: #c0d8e4;
    left: -2.8em;
    z-index: 1;
    padding-right: 36%;
}
.kleiner {
    font-size:1.75em;
}
.zitat.kleiner {
    padding-right: 0;
}
.kleiner .quelle {
    font-size:0.5em;
}
.preisboxzeile {
    display: flex;
    display : -ms-flexbox;
    flex-flow: wrap;
    -ms-flex-wrap : wrap;
    justify-content : center;
    position: relative;
    margin-top:2em;
    text-align: center;
}
.preisbox {
    /*flex: auto;*/
    width:28%;
    margin: 0 3% 0 0;
    padding:0;
    background-color: #fff;
    box-shadow: 0px 0px 4px #AAA;
}
.preisbox p {
    margin:0;
    padding:0.5em 0.5em 0 0.5em;
}
.preisbox h4 {
    background-color: #82b7d8;
    display: block;
    margin:0;
    padding: 0.5em;
    color:#fff;
}
.preisbox .preis {
    font-size: 2.5em;
    padding-top:0;
    padding-bottom:0.5em;
    line-height: 100%;
}
.klein {
    font-size: 0.45em;
}
/*Viewport-Effekt*/
.mein-element {
    opacity: 0;
    transition: all .25s ease-in-out;
}
.mein-element {
    transform: translateY(90%);
}
/*
.mein-element:nth-of-type(even) {
    transform: translateY(90%);
}
*/
.mein-element.visible {
    transform:translateY(0);
    opacity: 1;
}
.klappname {display:inline-block;}
.trenner {margin:0;}
.toklapp {display:none;}
/*[id^="kl_"] p {border:1px solid;padding:.5em;background:#eee;}*/
[id^="klapp"] {text-decoration:none;}
[id^="klapp"] span:nth-of-type(2) {text-decoration:underline;}

@media all and (max-width: 1000px) {
    .preisbox {
        margin-bottom: 1em;
        float: none;
        width:100%;
    }
    .zitat {
        padding-right: 15%;
    }
    .dgs img {
        padding-top:1em;
    }
    .dgs {
        width:200px;
    }
    .portrait2 {
    width:145px;
}
     .dgs {
         text-align: left;
         clear:both;
        float:none;
         width:100%;
    }
    .impressum {
        width:50%;
    }
}

@media all and (max-width: 800px) {
    #pfeil {
    transform: scale(0.7);
        bottom: 0.5em;
    right: 0.5em;
}
    .quelle {
    font-size:0.5em;
    }
    .zitat::before { 
    height:2em;
}
    .nummer {
    font-size: 420%;
    margin-left:-0.65em;
    letter-spacing: -0.07em;
    }
    .zitat::before { 
    font-size: 500%;
    margin-top:-0.15em;
    }
    .artikel {
    padding:40px 40px 40px 85px;
    }
    #window .artikel {
        padding:40px;
        }
    
    
   /* .bqstart {
        margin-top:-0.11em;
        line-height: 1em;
    }*/
    .trennbild {
    min-height:20em;
    padding-top: 7em;
    }
    #container {
        font-size: 1.12em;
    }
    .zitat {
    font-size: 2em;
    left: -2em;
    padding-right: 1%;
    }
    .portrait {
        float:none;
    margin-top: 2em;
        margin-left: 0;
    }
    .subline {
    top:-7em;
}
    .logo {
    width:75%;
}
    .impressum {
        width:100%;
    }
    
    
    
    /*#eingerueckt .artikel p, #eingerueckt .artikel h2, #eingerueckt .artikel h4, #eingerueckt .artikel ul, .preisboxzeile {
    margin-left: 50px;
    }
    #eingerueckt .preisbox h4 {
        margin:0;
    }*/
}
@media all and (max-width: 650px) {
    #container {
        font-size: 1em;
    }
    .zitat {
        font-size: 1.5em;
        width:120%;
    }
    h2 {
        font-size: 1.2em;
    }
    h1 {
        font-size: 1.5em;
    }
    h4 {
        font-size: 0.75em;
    }
    .artikel {
        padding:30px 25px 30px 85px;
        }
        #window .artikel {
            padding:20px;
            }
    .subline {
    top:-4em;
        font-size: 1em;
}
    .logo {
        width: 100%;
    } 
}