/* === GENERELLES === */

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
  background-color: #F0F0F0;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

h1 {
  text-align: center;
  font-size: 2.5rem;
  padding-top: 3.5rem;
  background-color: #f0f0f0;
  color: #fff;
}

/* === FONTS === */

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

/* === BUTTONS === */

.btn-typ-1 {
  background-color: transparent;
  border: 2px solid #FFF;
  color: #000;
  padding: .4rem .6rem;
  transition: color .5s ease-in-out, border .5s ease-in-out;
  margin-bottom: .7rem;
}

.btn-typ-3 {
  background-color: #FFF;
  border: 2px solid #3D3F45;
  color: #000;
  font-size: 1rem;
  font-weight: bold;
  transition: border .5s ease-in-out, color .5s ease-in-out;
}

.btn-typ-3:hover {
  border: 2px solid #1874CD;
  color: #1874CD;
  font-weight: bold;
}

.angebot-info-btn {
  font-weight: bold;
  text-decoration: none;
  height: auto;
  width: 50%;
  display: inline-block;
  padding-top: .5rem;
  margin-top: 1.5rem;
}

.btn-typ-shop {
  background-color: transparent;
  border: 2px solid #FFF;
  color: #000;
  padding: .4rem .6rem;
  transition: color .5s ease-in-out, border .5s ease-in-out;
  margin-bottom: .7rem;
  width: 8rem;
  margin-right: 1rem;
}

@media (max-width: 840px){
    .btn-typ-shop {
    width: 10rem;
  }
}

@media (max-width: 340px){
    .btn-typ-shop {
    width: 5rem;
  }
}

.angebot-info-btn:link {
  color: #fff;
}

.angebot-info-btn:visited {
  color: #fff;
}

.angebot-info-btn:active {
  color: #fff;
}

.angebot-info-btn:hover {
  color: #1874CD;
  border: 2px solid #1874CD;
}

/* === NAVIGATIONSLEISTE DESKTOP === */

#active {
  background-color: grey !important;
}

.flexbox-nav {
  position: fixed;
  top: 0;
  left: 0;
  margin: auto;
  width: 100%;
}

 .flexbox-nav ul {
  height: 4.5rem;
  list-style: none;
  width: auto;
  display: flex;
  background-color: #303237;
  color: black;
  justify-content: space-around;
  align-items: center;
}

.flexbox-nav li {
  width: auto;
  height: 4.5rem;
  display: flex;
  padding: .1rem .7rem .1rem .7rem;
}

.flexbox-nav ul > li > a {
  text-decoration: none;
  font-weight: bold;
  color: #FFF;
  font-size: 1.25rem;
  margin-top: 1.4rem;
}

.flexbox-nav a:focus,
.flexbox-nav a:hover,
.flexbox-nav a:active
.flexbox-nav a:link {
  text-decoration: none;
  color: #888;
}

.nav-logo {
  width: 130px;
  height: auto;
  margin-top: -1.5rem;
}

@media (max-width: 1000px) {
  .flexbox-nav ul > li > a {
    text-decoration: none;
    font-weight: bold;
    color: #FFF;
    font-size: 1rem;
    margin-top: 1.5rem;
  }
}

@media (max-width: 768px) {
  .flexbox-nav {
    display: none;
  }
}

/* === NAVIGATIONSLEISTE MOBIL === */

.flexbox-nav-mobil {
  height: 4.5rem;
  list-style: none;
  width: auto;
  display: block;
  background-color: #303237;
  -webkit-appearance: none;
}

@media (min-width: 769px) {
 .flexbox-nav-mobil {
   display: none;
  -webkit-appearance: none;
 }
}

@media (min-width: 768px){
  .flexbox-nav-mobil #active {
      background-color: grey !important;
      -webkit-appearance: none;
    }

  .flexbox-nav-mobil a:focus,
  .flexbox-nav-mobil a:hover,
  .flexbox-nav-mobil a:active
  .flexbox-nav-mobil a:link {
    text-decoration: none;
    color: grey;
  }

}

@media (min-width: 769px) {
  #mobile-nav-button {
    display: none;
  }
}

@media (max-width: 769px) {
  #mobile-nav-button {
    color: #fff;
    float: right;
    font-size: 3.2rem;
    border: 2px solid #fff;
    width: 55px;
    height: 55px;
    position: relative;
    margin-top: .5rem;
    margin-bottom: .5rem;
    margin-right: 5.55rem;
    -webkit-appearance: none;
    -webkit-overflow-scrolling: touch;
  }

  #mobile-nav-button > span {
    position: absolute;
    margin-left: 10px;
    margin-top: -5px;
  }

  #mobile-nav-content > ul {
    background-color: #303237;
  }

  #mobile-nav-content > ul >li {
    display: flex;
    height: 50px;
    padding-right: 1rem;
    padding-left: 1rem;
    align-items: center;
    justify-content: center;
  }

  #mobile-nav-content a {
    text-decoration: none;
    color: #fff;
  }

  #mobile-nav-dropdown {
    position: relative;
    float: right;
    -webkit-appearance: none;
  }

  #mobile-nav-content {
    position: absolute;
    margin-top: 72px;
    display: none;
    -webkit-appearance: none;
  }

  #mobile-nav-dropdown:hover > #mobile-nav-content {
    display: inline-block;
    text-decoration: none;
  }
}

/* === FOTO - HEADER === */

.foto-stein-mit-wasser img {
  width: 100%;
  height: auto;
  margin-top: 3.5rem;
  border-bottom-left-radius: 15px;
 border-bottom-right-radius: 15px;
}

@media (max-width: 768px) {
  .foto-stein-mit-wasser img {
    width: 100%;
    height: auto;
    margin-top: 0;
  }
}

 /* === SEITEN -ÜBERSCHIRFT === */

#seiten-überschrift-startseite {
  background-color: #F0F0F0;
}

#seiten-überschrift-startseite h1 {
  background-color: #F0F0F0;
  color: #000;
  margin-top: 3rem;
  padding: 0;
  padding-top: 4rem;
}

#seiten-überschrift-startseite p {
  background-color: #F0F0F0;
  color: #000;
  margin-top: 2rem;
  text-align: center;
}

/* === Über Mich === */

#portrait-startseite {
  width: 350px;
  height: auto;
  border-radius: 25px;
}

.flexbox-übermich {
  display: flex;
  width: 100%;
  margin-right: auto;
  justify-content: space-around;
  align-items: center;
  padding: 3.5rem 5rem 0 5rem;
}

.über-mich-box {
  background-color: #FFF;
  flex-basis: 40%;
  color: #000;
  padding: 2rem 4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: 25px;
}

.über-mich-box h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  margin-top: .7rem;
}

.über-mich-box h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #555;
}

.über-mich-box p {
  text-align: left;
  margin-bottom: 1rem;
}

@media (max-width: 1290px) {
  .über-mich-box {
    flex-basis: 55%;
    padding: 2rem 4rem;
    justify-content: space-between;
  }
}

@media (max-width: 1085px) {
  .flexbox-übermich {
    flex-direction: column-reverse;
    margin-bottom: 0;
    width: 85%;
    margin-left: 7.5%;
  }

  #portrait-startseite {
    display: none;
  }
}

@media (max-width: 768px) {
  .flexbox-übermich {
    flex-direction: column-reverse;
    margin-bottom: 0;
    width: 90%;
    margin-left: 5%;
  }

  #portrait-startseite {
    display: none;
  }
}

/* === Angebote-BEREICH === */

.angebot {
  background-color: #F0F0F0;
}

.seiten-überschrift-meine-angebote {
  color: black;
}

.flex-container-angebot {
  display: flex;
  width: 85%;
  margin-left: 5rem;
  padding-top: 5rem;
  padding-bottom: 5rem;
  margin-right: auto;
  justify-content: space-around;
  align-items: center;
}

.angebot-box {
  height: 425px;
  background-color: #4f535d;
  flex-basis: 40%;
  color: #fff;
  padding: 1rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.angebot-box li {
  text-align: left;
  margin-left: 1rem;
  line-height: 1.5rem;
}

.angebot-box > h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  margin-top: .7rem;
}
#reico-colour-h2 {
  color: #7d7c3d;
}

#nikken-colour-h2 {
  color: #0BA6B6;
}

#angebot-box-emmi-startseite h2 {
  color: #0081C2;
}

.flexbox-buttons-shop {
  display: flex;
  justify-content: flex-start;
  padding: 1rem 1rem;
}

@media (max-width: 1085px) {
  .angebot-box {
    height: 450px;
  }
}

@media (max-width: 840px) {
  .angebot-box {
    height: auto;
    margin-top: 3rem;
  }

  .flex-container-angebot {
    display: block;
    margin-left: auto;
    padding: 0;
  }

  #überschrift-meine-angebote-startseite h1 {
    padding-bottom: 3rem;
  }

  #angebot-box-1 {
    margin-top: 0;
  }

  #angebot3und4 {
    padding-top: .01rem;
    padding-bottom: 5rem;
  }
}

/* == ZELLINFORMATION === */

#zellinformation-bild-header img {
  margin-top: 3rem;
  width: 100%;
  height: auto;
}

#überschrift-zellinformation {
  color: #6EC1E4;
  font-weight: bold;
  font-size: 3.5rem;
}

.container-zellinformation {
  display: flex;
  width: 90%;
  margin-left: 5%;
  flex-wrap: wrap;
}

.flexbox-zellinformation {
  width: 50%;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 280px;
}

.flexbox-zellinformation h1 {
  color: #6EC1E4;
  width: 70%;
  margin-top: 10.5%;
}

.zellinformation-shop-button {
    padding: .5rem 2rem;
    border: 2px solid #6EC1E4;
    color: #6EC1E4;
    text-decoration: none;
    font-weight: bold;
    margin-left: 2rem;
}

.flexbox-zellinformation p {
  margin-left: 2rem;
}

@media (max-width: 768px) {

  .flexbox-zellinformation {
    justify-content: center;
  }

  #zellinformation-bild-header img {
  margin-top: 0;
 }

 .flexbox-zellinformation h1 {
  margin-left: 15%;
  margin-top: 0;
}

#überschrift-zellinformation {
  color: #6EC1E4;
  font-weight: bold;
  font-size: 2.2rem;
}

}

/* EMMI - SEITE */

.flexbox-seiten-überschrift-emmi {
  width: 90%;
  height: 5rem;
  margin-top: 2rem;
  margin-left: 5%;
  display: flex;
  justify-content: center;
  background-color: #F0F0F0;
}

#seiten-überschrift-emmi h1 {
  font-size: 2.5rem;
  color: #000;
  background-color: #F0F0F0;
  margin-top: 1.2rem;
  padding: 0;
}

.flex-section-emmi {
  width: 90%;
  height: auto;
  margin-left: 5%;
  background-color: #FFF;
  margin-top: 2rem;
}

.flexbox-container-emmi {
  height: 30rem;
  justify-content: center;
  display: flex;
  flex-direction: row;
  margin-bottom: 2.5rem;
}

.button-emmi-shop1 {
  padding: .5rem 2rem;
  border: 2px solid #0081c2;
}

.button-emmi-shop2 {
  padding: .5rem 2rem;
  border: 2px solid #3BA79D;
}

.button-emmi-shop3 {
  padding: .5rem 2rem;
  border: 2px solid #FFA500;
}

#emmi-air-h2 {
  margin-top: 1rem;
}

#emmi-air-bild {
  width: 30rem;
  height: auto;
}

.flex-item-emmi-dent1 {
  margin: 0 1.5rem;
  text-align: center;
}

.flex-item-emmi-dent1 h2 {
  font-size: 2.5rem;
  color: #0081C2;
  margin-top: 3rem;
  margin-bottom: 2rem;
}

.flex-item-emmi-dent1 h3 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.flex-item-emmi-dent1 p {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.flex-item-emmi-dent1 a {
  color: #0081c2;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: bold;
}

.flex-item-emmi-dent2 {
  margin: 2rem 4rem;
  text-align: center;
}

.flex-item-emmi-dent2 p {
  font-weight: bold;
  text-align: center;
  margin-bottom: 1rem;
}

.flex-item-emmi-pet2 {
  padding-right: 1.5rem;
  padding-left: 2.5rem;
  text-align: center;
}

.flex-item-emmi-pet2 h2 {
  font-size: 2.5rem;
  color: #3BA79D;
  margin-top: 2.5rem;
  margin-bottom: 2rem;
}

.flex-item-emmi-pet2 h3 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.flex-item-emmi-pet2 p {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.flex-item-emmi-pet2 a {
  color: #3BA79D;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: bold;
}

.flex-item-emmi-pet1 {
  display: flex;
  align-items: center;
}

#emmi-pet-paket-bild {
  width: 30rem;
  margin-left: 2rem;
  border: 5px solid #F0F0F0;
}

.flex-item-emmi-skin1 {
  width: 45%;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  text-align: center;
}

.flex-item-emmi-skin1 h2 {
  font-size: 2.5rem;
  color: #D9BCC6;
  margin-top: 2.5rem;
  margin-bottom: 2rem;
}

.flex-item-emmi-skin1 h3 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.flex-item-emmi-skin1 p {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.flex-item-emmi-skin2 a {
  color: #FFA500;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: bold;
}

.flex-item-emmi-skin2 {
  width: 45%;
  text-align: center;
}

.flex-item-emmi-skin2 h2 {
  font-size: 2.5rem;
  color: #FFA500;
  margin-top: 2.5rem;
  margin-bottom: 2rem;
}

.flex-item-emmi-skin2 img {
  width: 250px;
  height: auto;
  margin-top: 2.5rem;
  padding-bottom: 2rem;
}

@media (max-width: 1210px) {

  .flexbox-container-emmi {
    height: auto;
    flex-direction: column;
  }

  .flex-item-emmi-skin1, .flex-item-emmi-skin2 {
    width: auto;
  }

  #emmi-pet-paket-bild {
    display: none;
  }

  #emmi-skin-last-item {
    margin-bottom: 2rem;
  }

  .flex-item-emmi-skin2 {
    margin-top: 3rem;
  }

  #emmi-air-bild {
    align-items: center;
  }

}

@media (max-width: 750px) {
  .flex-item-emmi-dent2 iframe {
    width: auto;
    height: auto;
  }
}

/* === REICO === */

#überschrift-reico-section {
  color: #000;
  margin-bottom: 2rem;
}

.flexbox-reico {
  width: 70%;
  height: auto;
  margin-left: 15%;
  background-color: #F0F0F0;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
}

.flex-section-reico {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.flex-item-reico {
  width: 50%;
  justify-content: center;
  text-align: center;
  margin-top: 1.5rem;
  padding: 1.5rem;
}

.flex-item-reico h3 {
  color: #7d7c3d;
  font-size: 1.5rem;
  margin-top: 1rem;
}

.flex-item-reico p {
  margin-bottom: 2rem;
}

.flex-item-reico img {
  width: 75%;
}

.flex-item-reico video {
  width: 75%;
  max-width: 1400px;
}

.flex-item-reico a {
  border-color: #7d7c3d;
  color: #7d7c3d;
}

#reico-bild {
  width: 100%;
}

@media (max-width: 660px) {

    #jetzt-bestellen-reico {
      padding: .5rem;
    }

    .flex-item-reico {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
  }

  .flex-section-reico {
    flex-direction: column;
    margin: 0;
  }

    .flexbox-reico {
    width: 100%;
    margin: 0;
  }

}

/* === ÜBER MICH === */

.über-mich-div {
  width: 75%;
  height: auto;
  margin-left: 12.5%;
  margin-right: 12.5%;
}

.über-mich-div h1 {
  color: #000;
  margin-bottom: 3rem;
}

/* === FOOTER === */

.flexbox-footer ul {
 width: 100%;
 height: 3.5rem;
 list-style: none;
 width: auto;
 display: flex;
 background-color: #303237;
 margin-top: 7.5rem;
 align-items: center;
 justify-content: center;
}

.flexbox-footer span {
color: white;
margin-right: 15rem;
font-size: 1rem;
}

.flexbox-footer a {
text-decoration: none;
color: white;
margin-left: 15rem;
font-size: 1.2rem;
}

@media (max-width: 825px) {
  .flexbox-footer span {
  margin-right: 5rem;
  font-size: .75rem;
  }

  .flexbox-footer a {
  margin-left: 5rem;
  font-size: 1rem;
  }
}

@media (max-width: 525px) {
  .flexbox-footer span {
  color: white;
  margin-right: 2rem;
  font-size: .75rem;
  }

  .flexbox-footer a {
  text-decoration: none;
  color: #FFF;
  margin-left: 2rem;
  font-size: 1rem;
  }
}

/* EMMI NEU */

.flexbox-emmi {
  width: 90%;
  height: auto;
  margin-left: 5%;
  background-color: #F0F0F0;
  margin-top: 1rem;
  display: flex;
}

.flex-item-emmi {
  justify-content: center;
  text-align: center;
  margin-top: 1.5rem;
  background-color: #FFF;
  padding: 1.5rem;
  flex-direction: column;
  display: flex;
  width: 50%;
}

#foto-header-emmi {
  width: 100%;
  margin-top: 3.5rem;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

#seiten-überschrift-emmi {
  width: 90%;
  height: 5rem;
  margin-top: 2rem;
  margin-left: 5%;
  display: flex;
  justify-content: center;
  background-color: #F0F0F0;
}

.button-emmi-shopNEU {
  padding: .5rem 2rem;
  border: 2px solid #0081c2;
  color: #0081c2;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: bold;
}

#emmi-air-bild {
  width: 30rem;
  height: auto;
}


/* Comning Soon Box Startseite*/

#ComingSoon {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 10rem;
}