@charset "utf-8"; /* CSS Document */ #inbearbeitung {padding: 0px 20px 20px 20px; margin: auto; text-align: center; font-size: 1.5em;} body {width: 100%; margin: 0; font-family: "Poppins Light"; font-weight: 400; letter-spacing: 0px; font-size: 15px; line-height:; background-color: #f4eee1; } #wrapper {max-width: 1300px; height: auto; margin:auto;background: #ffffff; box-shadow: 10px 20px 30px #999; } /* logo */ #logo-bellavi {max-width: ; height: auto; margin:auto;} #logo-bellavi img {width: 100%; height:auto;} #bodyandface {width: 100%; height:auto; background: #ebe3db;} #bodyandface img {width: 70%; height: auto; margin:auto;} #bellavi-bodyandface-kosmetik {width: 100%; height: auto; margin:auto; text-align: center; font-size: 5em; line-height: 3em; background: #fad0be; color: #ebe4da;} #bellavi-bodyandface-kosmetik img {width: 100%; height:auto;} #behandlung-katerina-militsis li {list-style-type: none; text-align: left;} .ul3 {list-style: none;} /* partner */ #partner {width:100%; height:auto;} #partner img /* über mich */ #uebermich img {width: 100%; height:auto;} #uebermich ul {list-style-type:none; margin:auto;} #uebermich ul li {padding-bottom: 1em; font-weight:bolder;} #euro {width: 100%; height:auto; text-align: center; color: #128ea7; font-weight: bolder; padding: 5px 0 5px 0;} /* Wir färben den rot zwischen 500 und 600 Pixeln, sowie ab 800 Pixeln bis unendlich */ @media screen and (min-width: 500px) and (max-width:600px), screen and (min-width: 800px) { body { background: ; } } /* Wir färben den grandpa bis 600px dunkelgrau */ @media screen and (max-width: 600px){ #flexgrandpa { /* Hintergrundfarbe um Seiten-Container abzusetzen */ background-color: #333;} } /*bis zu der Größe 639px*/ @media screen and (max-width: 639px){ .card {background: #ffffff;} } /*bis zu der Größe 600px*/ @media screen and (max-width: 600px){ .flexchild { /* Hintergrundfarbe um Seiten-Container abzusetzen */ background-color: pink;} .wohin {background: blue; display: flex; flex-direction:; width:100%;} .flexparent {width: 100%;} #slogan p {width: 95%; color: ;} .top-right {right:-65px;} .top-right img {width: 45%; height:auto;} #uebermich {width:95%; margin:auto;} } /*bis zu der Größe 716px*/ @media screen and (max-width: 716px){ .2boxen{flex-wrap:wrap;} } /*bis zu der Größe 516px*/ @media screen and (max-width: 516px){ .textboxen {display: none;} .fotoboxen {width:100%;} #vegan h1 {padding-top: 15px;background: #08c1b942;} } /*ab der Größe 500px*/ @media screen and (min-width: 500px){ #vegan h1 {padding-top: 50px;} #uebermich {width: 70%; margin:auto;} } /*ab der Größe 950px*/ @media screen and (min-width: 950px){ .fotoboxen {width: 70%; margin:auto; text-align: center;} } .article.card {background: #fffffb;} /*ab der Größe 601px*/ @media screen and (min-width: 601px){ .flexchild { /* Hintergrundfarbe um Seiten-Container abzusetzen */ display: flex;} .flexparent {background: yellow;} #slogan p {width: 75%;} } /*ab der Größe 1100px*/ @media screen and (min-width: 1100px){ #slogan p {width: 55%;} } /* neu */ #flexgrandpa a { background: #f5f1e4; color: #59595b; text-decoration: none; border: 1px solid lightgrey; padding: 10px; margin: 5px; } #flexgrandpa {margin:auto; } .flexparent {display: ; justify-content:center; padding: 20px; border: 1px solid grey;} .flexchild { display: ; flex-direction: row; margin: auto; padding: 10px; border: 1px solid green;} .flexchild img {max-width:125px; height:auto;} .flexchild h2 {font-size: 16px;} #videoaktuell {width: 100%; height:auto;} #preise {color: #95966b; margin-left: 0.7em; list-style-type: ;} #preise li {} #ausbildungen {color: #95966b; margin-left: 0.7em; list-style-type: ;} #ausbildungen li {} #tanzen {color: #95966b; margin-left: 0.7em; list-style-type: ;} #tanzen li {} #tanzenwirkung {color: #95966b; margin-left: 0.7em; list-style-type: ;} #tanzenwirkung li {} .selektor1 {color: #db9c28; font-size: 1em;} #logo { position: absolute; top: 59%; left: 50%; transform: translate(-50%, -50%); } #logo img {width:70%; height: auto;} .container {position: relative;margin: auto; border: 2px solid green;} .containerblocks a { display: block; width: 100%; margin-bottom: 10px; /* padding-bottom: 18px; */ border: 1px solid #9b9b9b; text-align: center; text-decoration: none; background: transparent; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; background-size: 100%; background-image: linear-gradient(transparent, transparent); position: relative; z-index: 100;} #slogan {max-width: 100%; padding: 1.3em; font-weight:400; text-align: center; background: #f5f1e4; line-height: 1.3em;} #umschlag {display:flex; flex-direction: row; /*flex-flow:column; untereinander*/ width: 100%; margin-top: -20px; margin: auto; line-height: 1.7em; } #umschlag img {width: 100%; heights: auto; padding: 0;} #blue {display: flex; flex-direction: row; width: 100%; background: #e0d8cf8a; padding-bottom: 40px;} .kiste {flex: 1; padding:1em; background: #fafaf8; margin-right: 0.5em;border-radius: ; } #mitte {flex:1; padding: 1em; background: #fafaf8; margin-right: 0.5em; border-radius: ; } #rechts { flex: 1; padding:1em;background: #fafaf8; border-radius: 5px; } h1 {font-size:1.0em; margin: 0; padding-bottom: 0.5em; color: #272F39;} #links, #mitte, #rechts {margin-top: -20px; margin-bottom: 35px;} #links, #mitte, #rechts img {width: 100%; height: auto;} /*---------------------------ul beschreibung--------------------------*/ ul#beschreibung {list-style-type: none; min-height:120px; width:70%; padding: 10px; margin:auto; border: 1px solid green;} ul#beschreibung li {float: left;} #vegan {background: linear-gradient(0deg, rgba(255, 255, 255, 0.6895133053221288) 39%, rgb(192 225 234) 100%)} #vegan img {width: 100%; height: auto;} #vegan h1 {text-align: center; font-size: 26px; color: #0e2951; padding:;} #meine_produkte {background: #ffffff;} #meine_produkte img {width: 100%; height: auto;} /*---------------------------bottom--------------------------*/ #bottom {display: flex; flex-direction: row; justify-content:center; background: #e2dbd3; } #bottom a:link, a:visited, a:active, a:hover {text-decoration: none; color: #59595B;} #bottom a:hover {text-decoration: none; color: #ffffff;} /* Container holding the image and the text */ .labelrechts { position: relative; text-align: center; color: white; } /* Bottom left text */ .bottom-left { position: absolute; bottom: 8px; left: 16px; } /* Top left text */ .top-left { position: absolute; top: 8px; left: 16px; } /* Top right text */ .top-right { position: absolute; top: 0px; right: 16px; } /* Bottom right text */ .bottom-right { position: absolute; bottom: 8px; right: 16px; } /* Centered text */ .textmittig { position: absolute; top: 59%; left: 50%; transform: translate(-50%, -50%); } .textmittig img {width:70%; height:auto;} .box { background: #e2dbd3; text-align: center; padding: 10px; font-size: 1em; margin: 35px 0 35px 0; color: #59595B; text-decoration: none;} .box a:link, a:visited, a:active; {color: #59595B;} .box a:hover {color: #59595B;} @media screen and (max-width:650px) { #bottom {flex-direction: column;padding: 20px 0 30px 0;} .box {padding: 0px; margin: 0;} .kiste {margin-right:0;} .column .image { width: 100%; height: 339px; } .responsive_map { height: 0; overflow: hidden; padding-bottom: 56%; position: relative; } .responsive_map iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }