/*********************
*
Theme Name:    Business Theme
Author:        Webdachs
Author URI:    https://webdachs.dev
Description:   Zweispaltiges responsives Theme basierend auf dem Framework Bootstrap.
Version:       1.0
Keywords:      2 Spalten, responsiv, volle Breite, fluid, türkis, Hero Image, Bootstrap
*
*********************/


/*** Inhaltsverzeichnis

1. Universelle CSS-Regeln (für einfache Selektoren wie html, body)
2. Farben
3. Above the fold
4. Main Content
5. Sidebar Content
6. Widgets/Block Content
7. Footer Content
8. Kommentare und Formulare

END Inhaltsverzeichnis ***/



/***** 1. Universelle CSS-Regeln *****/

html, body {
  height: 100%;
  scroll-behavior: smooth; /* Funktioniert nicht in Safari */
}

body {

  position: relative;
  font-family: 'Roboto', sans-serif;
}
h1 {

  font-size: 72px;
  color: #efefef;
  margin-bottom: 24px;
  font-weight: bold;
}

p {

  font-size: 1.2em;
  line-height: 1.6em;
  font-family
}

h1, h2, h3, h4, h5, h6 {

  font-family: 'Roboto', sans-serif;
}


/***** 2. Farben *****/

.primary-color {

  background-color: #4d9cc2;
  color: #efefef;
}

.secondary-color {

  background-color: #FFFFFF;
  color: #5a5a5a;
}

.legal-stuff a:link, .legal-stuff a:visited {
  color: #5a5a5a;
}

.wd-text-light {

  color: #efefef;
}



/***** 3. Above the fold *****/

.vh-100 { /* Inhalt above the fold erstreckt sich über die komplette Höhe */
  min-height: 100vh;
}

.navbar-brand {
  text-transform: uppercase;
}

.navbar-brand::before {
  padding-right: 10px;
  content: url(../images/logo/logo.png)

}


/***** HERO IMAGE *****/

#hero { /* above the fold */

  min-height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}


@media (min-width: 992px), screen and (-webkit-min-device-pixel-ratio: 2) {

  #hero {

    background-image: -webkit-linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/dach-regen-lg.jpg');
    background-image: -o-linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/dach-regen-lg.jpg');
    background-image: linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/dach-regen-lg.jpg');
  }
}


@media (max-width: 991px) {

  #hero {
    background-attachment: scroll;
    background-image: -webkit-linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/dach-regen-md.jpg');
    background-image: -o-linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/dach-regen-md.jpg');
    background-image: linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/dach-regen-md.jpg');
  }
}






#hero-text {

  font-size: 1.4em;
  color: #efefef;
  margin-top: 75px;
}

#hero-text .description {
  margin: 75px auto;
}

.subtitle {

  font-size: 1.5em;
}

@media (max-width: 576px), (max-width: 992px) and (orientation: landscape) {

  h1 {

    font-size: 64px;
  }

  .subtitle {

    font-size: 1.2em;
  }

  #hero-text {

    font-size: 1em;
  }

  #hero-text .description {

    margin: 20px auto;
  }
}


.navbar-nav > li {

  padding-right: 20px;
}

.navbar-nav > li:last-child {

  padding-right: 0px;
}

.lists li {
  list-style: square;
  margin-bottom: 10px;
  font-size: 1.2em;
}

.lists p {
  padding: 0;
  margin: 0;
  font-weight: bold;

}

.hidden {
  display: none;
}



/***** 4. Main Content *****/

.company-title {
  text-transform: uppercase;
}

.content-block, .image-block {

  min-height: 50vh;
}



.about-image {

  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}


@media (min-width: 992px) {

  .about-image {

    background-image: -webkit-linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/buero-beratung-lg.jpg');
    background-image: -o-linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/buero-beratung-lg.jpg');
    background-image: linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/buero-beratung-lg.jpg');
  }
}


@media (max-width: 991px) {

  .about-image {

    background-image: -webkit-linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/buero-beratung-md.jpg');
    background-image: -o-linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/buero-beratung-md.jpg');
    background-image: linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/buero-beratung-md.jpg');
  }
}


.services-image {

  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}


@media (min-width: 992px) {

  .services-image {

    background-image: -webkit-linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/zahnarztpraxis-scheffer-lg.jpg');
    background-image: -o-linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/zahnarztpraxis-scheffer-lg.jpg');
    background-image: linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/zahnarztpraxis-scheffer-lg.jpg');
  }
}


@media (max-width: 991px) {

  .services-image {

    background-image: -webkit-linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/zahnarztpraxis-scheffer-md.jpg');
    background-image: -o-linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/zahnarztpraxis-scheffer-md.jpg');
    background-image: linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/zahnarztpraxis-scheffer-md.jpg');
    background-position: right top;
  }
}


.team-image {

  background-image: -webkit-linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/baustellenhelme.jpg');
  background-image: -o-linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/baustellenhelme.jpg');
  background-image: linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/baustellenhelme.jpg');
  background-repeat: no-repeat;
  background-size: cover;
    background-position: center center;
}



#portfolio {

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  color: #efefef;
  min-height: 50vh;
}


@media (min-width: 992px) {

  #portfolio {

    background-image: -webkit-linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/dach-baustelle-lg.jpg');
    background-image: -o-linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/dach-baustelle-lg.jpg');
    background-image: linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/dach-baustelle-lg.jpg');
  }
}


@media (max-width: 991px) {

  #portfolio {

    background-attachment: scroll;
    background-image: -webkit-linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/dach-baustelle-md.jpg');
    background-image: -o-linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/dach-baustelle-md.jpg');
    background-image: linear-gradient(rgba(77, 156, 194, 0.30), rgba(13, 49, 90, 0.85)), url('../images/dach-baustelle-md.jpg');
  }
}

@media (max-width: 991px) { /* Korrespondiert mit ≤ md in Bootstrap. Angabe von d-sm-none etc. klappt nicht. Bei großen Geräten werden sonst die Aufzählungspunkte nicht angezeigt. */

  li.hide-devices {
    display: none;
  }
}



.wd-inner-space {

  padding: 50px 50px;
}

.c2a-contact {

  margin: auto 20px;
  font-family: 'Montserrat', sans-serif;
}


.fa-icons {

  margin-bottom: 0.5em;
  margin-top: 20px;
}

.c2a-attention > i {

  padding-right: 10px;
}

.c2a-attention {

  font-size: 2.5em;
  font-weight: bold;
}

a:hover {
  color: #efefef;
}


ul.external-links {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1.2em;
}

a[target=_blank]::before {

  font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.9em; content: "\f35d";
  padding: 0 5px;
}

ul.external-links a[target=_blank]::before{

  padding: 0 10px 0 0;
}




@media (min-width: 768px) {

  #kontakt .border-right {

    border-color: rgba(53, 135, 148, 0.5) !important; /* Rahmenfarbe ändert sich sonst nicht. Rahmenfarbe wird mit rgba halbtransparent. Sehr gut. */
  }
}

@media (max-width: 767px) {

  #kontakt .border-right {

    border: 0px solid !important;
  }
}



/***** 5. Sidebar Content

       No need to peak. *****/





/***** 6. Widgets *****/

iframe { /* Karte ist sonst inline und hat unten einen unerwünschten Abstand */

  display: block;
}

/***** 7. Footer

       No need to peak. *****/


/***** 8. Kommentare und Formulare


       No need to peak. *****/