body, html {
width:100vw; height:auto; margin:0; padding:0; font-family: 'Open Sans', sans-serif; color:rgba(0,0,0,0.8); overflow-X:hidden;}
html {background-image:linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0.9)), url(images/bg/bg_1_sw.jpg); background-size:cover; background-position:center center; background-attachment:fixed; background-repeat:no-repeat; }
*, *:before, *:after {box-sizing:border-box; margin:0; padding:0; transition:all 0.5s .05s ease-in-out; line-height:1.4;}
img {border:none;}
ul {list-style-type:none; margin:0; padding:0;}
a {text-decoration:none;}
a.hauptlink {font-size:20px; line-height:20px; font-family: 'Open Sans', sans-serif; color:rgba(255,255,255,1.0);}
a.unterlink {font-size:18px; line-height:18px; font-family: 'Open Sans', sans-serif; color:rgba(0,0,0,0.8);}
a.adresslink {font-size: 16px; color:rgba(0,0,255,1.0); text-decoration: underline;}
a.adresslink:hover, a.adresslink:active, a.adresslink:focus {color:rgba(218,43,51,0.8);}
a.textlink {font-size: 18px; color:rgba(0,0,255,1.0); text-decoration: underline;}
a.textlink:hover, a.textlink:active, a.textlink:focus {color:rgba(218,43,51,0.8);}
a.contact {text-decoration:underline; color:rgba(255,255,255,1.0); font-size:17px;}
a.contact:hover {color:rgba(218,43,51,0.8);}
a.facebook, a.facebook:hover {font-size:18px; line-height:1.4; color:rgba(0,0,0,0.8); background-color}
p.fb {margin-left:20px;}
footer p {font-size:18px; line-height:1.4; color:white; background:rgba(0,0,0,0.08);}
/*font-family: 'Source Sans Pro', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Montserrat', sans-serif;
font-family: 'Poppins', sans-serif;
font-family: 'Dosis', sans-serif;
font-family: 'Syncopate', sans-serif;
32,178,170 (lightseagreen)
218,43,51
178,34,34 (firebrick)
47,79,79 (darkslategray)
0,128,128(teal))*/
h1.title {font-size:71px; font-family: 'Syncopate', sans-serif; font-weight:900; text-shadow:10px 10px 10px rgba(0,0,0,0.5);}
h2.subtitle {font-size:27px; font-family: 'Open Sans', sans-serif;}
h1.section {font-size:29px; font-family:'Syncopate', sans-serif; text-shadow:5px 5px 5px rgba(0,0,0,0.3); margin:20px 0; hyphens:auto;}
h2.adresse, h2.oeffnungszeiten {font-size:18px; line-height:1.5; font-weight:700; margin:10px 0 5px 0; hyphens:auto;}
aside div.background p {font-size:18px;}
h3 {font-size:18px; line-height:1.4; hyphens:auto;}
p {font-size:18px; line-height:1.4; hyphens:auto;}
p strong {font-weight:bolder; }
p.red {color:rgba(218,43,51,1.0);}
p.green {color:rgba(32,178,170,1.0);}
aside.hinweis p {font-size:17px;}
span.underline {text-decoration:underline;}
ul.circle {padding:5px 0;}
ul.circle li {font-size:18px; padding-left:20px; position:relative;}
ul.circle li i.fa {font-size:18px; line-height:20px; color:rgba(218,43,51,1.0);}
header#topheader { position:fixed; top:0; z-index:2; width:calc(100vw-100px); background-image:linear-gradient(to bottom, rgba(255,255,255,0.4), rgba(255,255,255,0.4)), url(images/bg/bg_1.jpg); background-size:cover; background-position:center center; background-attachment:fixed; background-repeat:no-repeat; height:210px; display:flex; flex-direction:column; justify-content: space-between; z-index:20;}
footer {position:relative; width:100%; height:auto; padding:5px 50px 5px 50px; background:rgba(0,128,128,0.8); z-index:20; display:flex; justify-content:center; align-items:center; flex-wrap:wrap;}
main {position:absolute; top:210px; width:100vw; /*padding:0px 50px;background:rgba(255,255,255,0.7);*/ display:flex; flex-direction:column; justify-content:flex-start; }
div#title {flex:1 1 auto; display:flex; flex-direction:column; padding:40px 50px 0 50px;}
nav#menu {width:100vw; flex:0 0 34px; background:rgba(0,128,128,0.8); z-index:5; display:flex; justify-content:flex-start;}
ul.haupt {display:flex; justify-content:flex-start; align-items:center; width:631px; margin-left:50px;}
li.hl {flex:1 1 auto; display:flex; justify-content:center; aling-items:center; position:relative;}
a.hauptlink { flex:1 1 auto; padding:7px 20px; flex:1 1 auto; border-left:2px dotted rgba(32,178,170,0.8); background:rgba(0,0,0,0.08); align-self:center;}
li.hl:last-child a.hauptlink {border-right: 2px dotted rgba(32,178,170,0.8); }
a.hauptlink:hover, a.hauptlink:active {background: rgba(255,255,255,1.0); color:rgba(0,0,0,0.8);}
a.hauptlink i.fa-arrow-right, a.hauptlink i.fa-arrow-left {color:rgba(218,43,51,1.0); line-height:34px; }
a.hauptlink.aktionen {display:flex; justify-content:space-arround;}
div.untermenu {display:none; z-index:100; box-shadow:2px 3px 5px rgba(0,0,0,0.8);}
li.hl:hover div.untermenu { display:block; }
ul.dropdown { position: absolute; top:34px; left:0; display:flex; flex-direction:column; width:255px;}
ul.dropdown>li.ul {display:flex; width:100%; background:transparent; display:flex;}
a.unterlink {flex:1 1 100%; color:rgba(0,0,0,0.8); padding:7px 20px; background:rgba(250,250,250,1.0); border-bottom:1px solid rgba(32,178,70,0.4);}
a.unterlink:hover, a.unterlink:active {background:rgba(255,255,255,1.0);}
div#zen {position:fixed; background:silver; z-index:10; top:10px; right:15px; display:none; justify-content:center; align-items:center; font-size:55px; background:transparent; height:55px; line-height:55px;}
a.oeffnen, a.zuklappen {color:rgba(0,0,0,0.8);}
a.oeffnen:hover, a.zuklappen:hover {color:rgba(32,178,170,0.8);}
/*LAYOUT NAV BEI SCROLL TOP*/
header#topheader.fix {height:34px;}
header#topheader.fix div#title {flex:0 0 auto; padding:0 50px;}
header#topheader.fix h1.title.fix, header#topheader.fix h2.subtitle.fix {display:none;}
main.fix {top:34px; }
/*Layout - neue Sections
Unterteilung: h1.section, article.main <- darin: A) aside.adresse (mit Log, Öffnungszeiten, Kontaktdaten) und div.main (mit bg Foto, oder Foto), darüber und nach rechts verschoben div.text, darunter div.fotocontainer*/
section {flex:1 1 auto; display:flex; flex-direction: column; justify-content:flex-start; background:transparent; padding:30px 50px; position:relative; z-index:1; }
div.bg_bilder {z-index:-1; position:absolute; top:120px; left:0; right:0; height:30vw; background-size:cover; background-position:center center; background-attachment:fixed; background-repeat:no-repeat; }
div#apotheke {background-image: url(images/home/apotheke.jpg);}
div#azzurro {background-image: url(images/geschaefte/azzurro/azzurro_2.jpg);}
div#tresor {background-image: url(images/geschaefte/tresor/IMG-20171030-WA0001.jpg);}
div#chiri {background-image: url(images/home/home_14.jpg);}
div#co-op {background-image: url(images/geschaefte/coop/bild_26_breit.jpg);}
div#thelook {background-image: url(images/geschaefte/thelook/TheLook_1.jpg); }
div#rock {background-image: url(images/geschaefte/rockzwergae/rockzwerg4_breit.jpg); }
div#star_cosmetic {background-image: url(images/geschaefte/starcosmetic/A_starcosmetic2_s.jpg); }
article.main {flex:1 1 auto; display:flex; justify-content:space-between; z-index:10; position:relative; width:100%;}
aside.adress {flex: 0 0 240px; display:flex; padding:0; box-shadow:4px 5px 10px rgba(0,0,0,0.8); background:rgba(255,255,255,0.85); align-self:flex-start; height:auto; }
div.white {background:rgba(0,0,0,0.15);flex:1 1 auto; height:100%; display:flex; flex-direction:column; align-items: center;}
div.text_adress {padding:20px 30px 30px 30px; flex:1 1 auto;}
div.text_adress.rockzwerg {padding-top:0; margin-top:-5px;}
div.text_adress p {font-size:16px;}
img.logo, img.tresor { width:230px; align-self:center; flex:0 0 auto; padding:15px 5px 0 5px;}
a img.logo.rockzwerge {width:190px; flex:0 0 auto; padding-left:35px;}
div.main {flex:0 0 40vw; position:relative; height:auto; background:transparent; align-self:flex-start; margin-top:8vw;}
div.main.map, div.main.werbung {flex:1 1 auto; align-self:flex-start; margin-top:0; }
img.fotobackground { width:100%; height:auto;}
div.text { flex:1 1 auto; align-self:flex-start; height:100%; padding:20px; background:/*rgba(255,219,109,0.95) / rgba(255,223,159,1.0); rgba(255,231,100,0.95);*/rgba(255,236,135,1.0); display:flex; flex-direction:column;}
div.text::before, div.text::after {z-index:-1; position:absolute; bottom: 15px; width: 50%; top: 80%; max-width:300px;}
div.text::before { content:""; background:transparent; left: 10px; box-shadow:0 15px 10px rgba(0,0,0,0.85); transform:rotate(-3deg);}
div.text::after { content:""; background:transparent; right:10px; box-shadow:0px 15px 10px rgba(0,0,0,0.85); transform:rotate(3deg);}
div.text p {font-size:18px; line-height:1.4;}
div.fotocontainer {flex: 1 1 auto; width:100%; background:transparent; display:flex; justify-content:flex-start; align-content:flex-start; margin:10px 0 10px 0px; flex-wrap:wrap;}
aside.aktuell img {width:120px; height:auto; float:left; margin-right:5px;}
/*FOTOS DES FOTOCONTAINERS*/
figure.IMG, figure.boutique { position:relative; width:150px; height:200px; margin:5px; overflow:hidden; box-shadow:2px 2px 3px rgba(0,0,0,0.5);}
/*figure.boutique:last-child {margin-right:0;}
figure.boutique:first-child {margin-left:0;}*/
figure.IMG.quer_200_150, figure.boutique.quer {height:150px; width:200px; }
figure.IMG.hoch_133_200 {width:133.334px; height:200;}
figure.IMG.hoch_100_150, figure.boutique.small {height:150px; width:100px;}
figure.IMG.quer_225_150, figure.boutique.quer.breit {width:225px; height:150px;}
figure.IMG.hoch_150_200 {width:150px; height:200px;}
figure.IMG.quer_300_150 {width:300px; height:150px;}
figure.IMG.hoch_112_150 {width:112.2px; height:150px;}
figure.IMG.coop1 {width:255px; height:150px;}
figure.IMG.coop2 {width:211px; height:150px;}
figure.IMG.tresor {width:100px; height:178px;}
figcaption.IMG, figcaption.boutique {position:absolute; left:100%; width:100%; bottom:0; height:auto; display:flex; fustify-content:flex-start; align-items:center; background-color:rgba(0,0,0,0.5); color:white; padding:5px; font-size:15px; }
figcaption.IMG {position:absolute; left:100%; bottom:0; height:auto; display:flex; justify-content:flex-start; align-items:center; background-color:rgba(0,0,0,0.5); color:white; padding:5px; font-size:15px;}
figure.IMG:hover figcaption.IMG, figure.boutique:hover figcaption.boutique {left:0; }
img.IMG, img.boutique {width:100%; height:100%; border:none; }
figure.IMG:hover img.IMG, figure.boutique:hover img.boutique {transform:scale(1.3);}
figcaption.IMG span, figcaption.boutique span {display:block; position:absolute; left:-20px; font-size:20px; bottom:5px; width:10%; padding-right:5px; align-self:center; color:white; font-size:21px; transition:all 0.3s ease;}
/*HOME*/
article.home {flex:1 1 auto; margin:20px 20px 40px 20px; position:relative; }
/*div.images_content {flex:1 1 auto; margin:20px 20px 20px 20px; position:relative;}*/
div.content {flex: 1 1 auto; margin:0 20px; position:relative; }
div.images_content { margin:0 -50px; width:100vw; flex:0 0 600px; overflow:hidden; position:relative;}
img.home {width:100vw; height:auto; display:none; position:absolute; left:0; right:0; top:50%; animation: scaleImage 6s 1s ease-in-out;}
@keyframes scaleImage {
0% {transform:scale(1);}
99.9% {transform:scale(1.1);}
100% {transform:scale(1);}}
/*ANFAHRT & WERBUNG*/
aside.anfahrt, aside.werbung {flex: 0 0 250px; align-self:flex-start; display:flex; flex-direction:column; background:rgba(0,0,0,0.15);}
h2.adresse.hinweis {margin-top:10px; padding-left:20px; position:relative;}
h2.adresse.hinweis:before { content:""; position:absolute; left:5px; top:5px; bottom:5px; border-left:5px solid rgba(32,178,170,1.0); border-radius:5px;}
iframe.google {height:400px; width:100%; /*border:1px solid rgba(0,0,0,0.8);*/ box-shadow:4px 5px 10px rgba(0,0,0,0.8);}
/*SECTIONS*/
/*figure.geschaefte {flex:1 1 auto; margin:20px 0 20px 20px;}*/
article.geschaefte {display:flex; }
div.background {background-color:rgba(0,128,128,0.1); padding:10px; border:2px dotted rgba(0,128,128,0.8); width:100%; height:auto; box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.4);}
aside.hinweis {margin-top:10px; padding-left:20px; position:relative;}
aside.hinweis:before { content:""; position:absolute; left:5px; top:5px; bottom:5px; border-left:5px solid rgba(32,178,170,1.0); border-radius:5px;}
aside.aktuell {padding-left:20px; position:relative; margin-top:20px;}
aside.aktuell::before { content:""; position:absolute; left:5px; top:5px; bottom:5px; border-left:5px solid rgba(0,128,128,0.8); border-radius:5px;}
blockquote { position: relative; text-align: left; font-size: 18px; margin:0; padding:20px 50px; }
blockquote:before, blockquote:after { position: absolute; width: 60px; height: 60px; font-size: 120px; line-height: 1;}
blockquote.green:before { color:rgba(32,178,170,0.8);}
blockquote.red:before { color:rgba(218,43,51,0.8);}
blockquote.green:after { color:rgba(32,178,170,0.8);}
blockquote.red:after { color:rgba(218,43,51,0.8);}
blockquote:before { top: 0; left: 0; content: "\201C"; }
blockquote:after { bottom: 0; right: 0; content: "\201D"; }
span.autor {font-size:12px; font-style:italic; color:rgba(0,128,128,1);}
/*AKTUELL*/
.ziel {animation:animated 10s 1s ease-in-out;}
@keyframes animated {
0% {background:transparent; z-index:2;}
30% {background:rgba(0,128,128,0.8); transform:scale(1.15); color:white; }
70% {background:rgba(0,128,128,0.8); transform:scale(1.15); color:white; }
100% {background:transparent; transform:scale(1); border:none;}
}
/*BREAKPOINTS*/
@media screen and (max-width:1500px){
div.images_content { flex:0 0 500px; }
}
@media screen and (max-width:1000px){
div.bg_bilder {height:40vw;}
div.images_content { flex:0 0 400px; }
}
@media screen and (max-width:800px){
div.bg_bilder {height:50vw;}
div.images_content { flex:0 0 300px; }
}
@media screen and (max-width:746px){
h1 span.second::before {content:"\A"; white-space:pre;}
header#topheader {height: 280px;}
main {top:320px;}
ul.haupt {width:auto; }
}
@media screen and (max-width:731px){
nav#menu { justify-content:center}
ul.haupt {margin-left:0;}
section {padding:30px;}
div.images_content {margin:0 -30px;}
div#title {padding:40px 30px 14px 30px;}
}
@media screen and (max-width:689px){
header#topheader {height: 240px; width:100vw;}
div#title {flex:1 1 auto; display:flex; flex-direction:column;}
div#title { padding-bottom:15px;}
nav#menu { justify-content:flex-start;}
main {top:240px;}
div#zen {display:block; z-index:20000; margin-right:-5px; margin-top:-5px;}
a.zuklappen {display:none; }
a.oeffnen {display:block; }
:not(:target) nav#menu {display:flex; position:fixed; top:-350px; left:0; right:0; width:100vw;}
nav#menu:target { top:0px;}
ul.haupt {flex-direction:column; align-items:flex-start; width:40vw;}
li.hl { width:100%; position:relative; z-index:1; }
/*li.hl:hover * {overflow:visible; }*/
a.hauptlink { border:none; padding-left:50px; width:40%; border-bottom:1px solid white;}
li.hl:last-child a.hauptlink {border:none;}
li.hl:hover div.untermenu { display:flex; position:absolute; top:-34px; left:100%; z-index:100; width:40vw;}
li.hl:hover ul.dropdown {display:flex; width:100%;}
a.unterlink {width:100%;}
nav#menu:target + div#zen a.oeffnen {display:none;}
nav#menu:target + div#zen a.zuklappen {display:block;}
/*LAYOUT NAV BEI SCROLL TOP*/
header#topheader.fix {height:60px; padding:0; margin:0; ;}
header#topheader.fix h1.title.fix, header#topheader.fix h2.subtitle.fix {display:inline;}
header#topheader.fix div#title.fix {flex:1 1 auto; padding:0 50px 5px 50px; margin:0 40px 0 0; justify-content:center;}
h1.title.fix { font-size:25px; align-self:flex-end;}
h1.title.fix span.second::before {content:"";}
h2.subtitle.fix { font-size:15px; align-self:flex-end; }
main.fix {top:60px; }
}
@media screen and (max-width:660px){
section {padding:20px 30px 20px 20px;}
div.images_content {margin:0 -20px;}
article.main { flex-direction:column; flex:1 1 auto; width:calc(100vw - 50px); }
aside.adress, aside.anfahrt, aside.werbung {flex:1 1 auto; margin:5px 0; width:100%;}
aside.anfahrt, aside.werbung {margin-top:0; margin-bottom:10px; padding:0 50px;}
div.main {flex:1 1 auto; margin:5px 0; width:100%;}
div.white {flex-direction:column; align-items:flex-start;}
div.text_adress {flex: 1 1 auto; width:100%; display:flex; justify-content:flex-start; align-items:flex-start; padding:20px;}
div.text_adress.werbung, div.text_adress.anfahrt{padding:10px 10px;}
div.content {padding:10px 50px; margin:0;}
img.logo, img.tresor {width:200px; height:auto;}
/*a img.logo {flex:0 020%; padding:5px 0 0 0; align-self:flex-start;}
a img.logo.rockzwerge { width:180px; height:auto; padding-left:15px;}*/
div.oeffnung {flex:1 1 50%; margin:0 5px 0 10px;}
div.kontakt {flex:1 1 50%; margin:0 5px 0 10px;}
/*BEREITS HIER SCHON LOGO ÜBER TEXT_ADRESS!*/
a img.logo, a img.logo.rockzwerge, img.logo, img.tresor {flex:1 1 auto; padding:30px 20px 0 30px; align-self:flex-start;}
div.fotocontainer { padding:20px 15px;}
div.bg_bilder {display:none; height:0;}
aside.anfahrt, aside.werbung {flex: 1 1 auto;}
div.text_adress.anfahrt, div.text_adress.werbung {flex-direction:column;}
div.text_adress.rockzwerg {margin-top:0; }
h1.section {margin-left:30px;}
}
@media screen and (max-width:569px){
h1.title {font-size:61px;}
h2.subtitle {font-size:23px;}
header#topheader {height: 213px;}
div#title { flex:0 0 173px;}
main {top:243px;}
}
@media screen and (max-width:560px){
section {padding:0;}
div.images_content {margin:0;}
div.main {align-items:center;}
article.main, aside.adress, aside.werbung, div.main {width:100vw; margin-left:0; margin-right:0; flex:1 1 auto; position:relative;}
}
@media screen and (max-width:499px){
h1.title {font-size:51px; }
h2.subtitle {font-size:23px;}
header#topheader {height: 195px;}
div#title { flex:0 0 155px;}
main {top:215px;}
div.fotocontainer {justify-content:center;}
}
@media screen and (max-width:467px){
h1.title {font-size:51px;}
h2.subtitle {font-size:19px;}
}
@media screen and (max-width:450px){
section.home {padding:0; margin:0; }
img.home {height:300px; width:450px; top:0; bottom:0; right:50%; left:50%; margin-left:-225px; margin-top:0; margin-right:-225px;}
}
@media screen and (max-width:435px){
div.white {flex:1 1 auto; align-items:center; width:100%;}
div.text_adress, div.text_adress.rockzwerg { flex:1 1 auto; width:auto; padding:20px; flex-direction:column; justify-content:flex-start; align-items:flex-start; }
div.oeffnung, div.kontakt {flex:0 0 auto; width:100%; align-self:flex-start; }
a img.logo, a img.logo.rockzwerge, img.logo, img.tresor { align-self:flex-start; padding-left:20px;}
}
@media screen and (max-width:428px){
h1.title {font-size:41px; margin-top:10px;}
h2.subtitle {font-size:18px;}
header#topheader {height: 175px;}
div#title { flex:0 0 135px;}
main {top:195px;}
}
@media screen and (max-width:399px){
h2.subtitle {font-size:17px;}
aside.adress, div.main, div.anfahrt {margin:0; }
aside.map {margin:0;}
div.content.map {padding:0; width:100vw;}
section {margin:0;}
div.text::before, div.text::after {display:none;}
iframe.google {width:100%; box-shadow:none; border:1px solid rgba(0,0,0,0.8);}
footer {padding:5px 10px;}
}
@media screen and (max-width:386px){
h1.title {font-size:35px; margin-top:10px;}
h2.subtitle {font-size:15px;}
h2.subtitle.fix {font-size:0; line-height:0;}
* {line-height:1.0;}
}