/* ####### Hausarztpraxis Harpen CSS ######### */

body {
font-family: 'Roboto';
}

.gruen {
  color: #45b348;
}
.blau {
  color: #3cace0;
}

.button {
color: #ffffff;
background-color: #45b348;
font-size: 16px;
font-weight: 500;
padding: 6px 12px;
}
.button:hover {
color: #ffffff;
background-color: #3cace0;
}

/* #---------------- Top-Bar --------------# */
#sp-top1 .sp-column {
  text-align:center !important;
}
@media (min-width: 992px) {
  #sp-top1 .sp-column {
    text-align:right !important;
  }
}

.button-top {
color: #ffffff;
background-color: #45b348;
font-size: 12px;
font-weight: 500;
padding: 4px 10px;
}
.button-top:hover {
color: #ffffff;
background-color: #3cace0;
}

.button-top-notfall {
color: #ffffff;
background-color: #b34545;
font-size: 12px;
font-weight: 500;
padding: 4px 10px;
}
.button-top-notfall:hover {
color: #ffffff;
background-color: #3cace0;
}

.popover-body {
  color: #ffffff;
  background-color: #2ba84a;
  box-shadow:6px 6px 5px rgba(73, 80, 87,0.4);
}

#sp-top-bar a {
  color: #ffffff;
}

#sp-top-bar {
font-size: 18px;
padding: 9px 0;
border-bottom: 4px solid #45b348;
margin-bottom: 20px;
line-height: 30px;
}

@media (min-width: 576px) {
#sp-top-bar {
padding: 16px 0;
border-bottom: 5px solid #45b348;
margin-bottom: 15px;
}  
}
@media (min-width: 992px) { 
#sp-top-bar {
padding: 18px 0;
border-bottom: 7px solid #45b348;
margin-bottom: 20px;
}
.button-top {
font-size: 14px;
padding: 3px 10px;
} 
.button-top-notfall {
font-size: 14px;
padding: 3px 10px;
}
}

#sp-header {
  box-shadow: none;
}
/* #---------------- Navigation --------------# */
#sp-menu {
padding-left: 40px;
}

#sp-menu > .sp-column {
  justify-content: flex-end;
}

@media (min-width: 992px) { 
#sp-menu > .sp-column {
justify-content: flex-end !important;
}
}

.sp-megamenu-parent > li:last-child > a {
  padding: 0px 10px 0px 10px;
}

.sp-megamenu-parent > li {
margin: 0px 7px;
}

.sp-megamenu-parent > li a{
color: #ffffff;
background-color: #3e4547;
min-width: 90px;
text-align: center;
text-transform: uppercase;
}

.sp-megamenu-parent > li.active:hover > a,.sp-megamenu-parent > li.active > a {
  color: #ffffff;
  background-color: #2ba84a;
}

/* #---------------- Slider --------------# */
#sp-title {
margin-top: 20px;
border-bottom: 7px solid #45b348;
}
#carouselHausarztpraxis .carousel-caption {
position: absolute;
left: 15%;
bottom: 30%;
max-width: 30%;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
color: #fff;
text-align: center;
}
#carouselHausarztpraxis .carousel-caption h2{
font-size: 2.4rem;
font-weight: 500;  
color: #45b348;
}

#carouselHausarztpraxis .carousel-caption2 {
position: absolute;
right: 0px;
top: 0px;
width: 90px;
height: 90px;
padding-top: 8px;
text-align: center;
vertical-align: center;
background-color: #3cace0;
z-index: 10000;
}
#carouselHausarztpraxis .carousel-caption2 a{
font-size: 0.9rem;
color: #fff;
}
#carouselHausarztpraxis .carousel-caption2:hover {
background-color: #3e4547;
}
/* ---------------- Content -------------- */
.jumptarget {
  position: relative;
  width: 10px;
  z-index: 0;
  }
  
  .jumptarget:before {
  width: 10px;
  display: block;
  content: " ";
  margin-top: -115px;
  height: 115px;
  visibility: hidden;
  }

.headline {
  font-family: 'Roboto Condensed';
  font-weight: 500;  
  color: #45b348;
}
.headline-blau {
  font-family: 'Roboto Condensed';
  font-weight: 500;  
  color: #3cace0;
}

p,td{
line-height: 28px;
font-size: 1.2rem;
hyphens: auto;
-webkit-hyphens: auto;
-webkit-hyphenate-limit-lines: 4;
-ms-hyphens: auto;
-ms-hyphenate-limit-lines: 4;
}

.list {
  line-height:28px;
  font-size: 1.2rem;
  hyphens: auto;
  -webkit-hyphens: auto;
  -webkit-hyphenate-limit-lines: 4;
  -ms-hyphens: auto;
  -ms-hyphenate-limit-lines: 4; 
}

.list1 {
list-style-type:none; 
padding-left: .2rem; 
}
.list1 li{
font-size: 1.2rem;
}
.list2 {
list-style-type:none; 
}  
/* ---- parallax  --- */
.parallax {
position: relative;
background-image: url("../../../images/parallax/parallax-home.jpg");
min-height: 360px; 
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
}
.parallax-content {
display: block;
z-index: 2;
height: 360px;
backdrop-filter: blur(2px);
background-color: rgba(255, 255, 255,0.5);
}

.parallax-content h5 {
color:#2ba84a;
font-size: 2.50rem;
font-weight: 400; 
}

@media (min-width: 768px) { 
.parallax-content {
backdrop-filter: none;
background-color: transparent;
}
.parallax-content h5 {
font-size: 3.10rem;
}
}
/* ---- Leistungen Home  --- */
.box-gruen {
color: #ffffff;
background-color: #2ba84a;
padding: 20px 20px;
}
.box-blau {
color: #ffffff;
background-color: #3cace0;
padding: 20px 20px;
}
.box-gruen h4, .box-blau h4{
font-size: 1.80rem;  
font-weight: 300;
}
.box-gruen img, .box-blau img{
height: 80px;
width: auto;
}

.button-box-gruen,.button-box-blau {
color: #ffffff;
background-color: transparent;
padding: 4px 15px;
border: 1px solid #ffffff;
}

.button-box-gruen:hover {
color: #ffffff;
background-color: #3cace0;
}
  
.button-box-blau:hover {
color: #ffffff;
background-color: #45b348;
}
/* ---- Leistungen Home2  --- */
#sp-position5 h3 {
  font-family: 'Roboto Condensed';
  color: #45b348;  
  font-weight: 500; 
  text-transform: uppercase;  
}

/* ---- Sprechzeiten  --- */
#sp-position6 h2 {
font-family: 'Roboto Condensed';
color: #45b348;  
font-weight: 500; 
text-transform: uppercase;  
}

#sp-position6 img {
max-width: 300px; 
}

.box-sprechstunde {
color: #ffffff;
background-color: #45b348;
padding: 15px 15px;
}


/* ------------ Spektrum/Leistungen  ------------- */

.gruene-linie {
  border-bottom: 7px solid #45b348;
}
.bg-hellblau {
background-color: #e1edf9;
}
/* ------------ Bottom Überschrift  ------------- */
#sp-bottom .newsflash-title {
color: #ffffff;
font-family: 'Roboto Condensed';
font-weight: 500; 
text-transform: uppercase;
}
/* ------------ Aktuelles Blog ------------- */
#sp-right .sp-module {
background-color: #f3f3f3;  
border: 1px solid #f3f3f3;

}
.sp-module .sp-module-title {
color: #2ba84a;  
font-weight: 500 !important;
text-transform: uppercase;
}

#sp-component .blog div.row .col-md-4{
margin-bottom: 30px;
}
#sp-component .blog div.row .article{
  position: relative;
height: 100%;
}

#sp-component .blog div.row .article .article-body div.readmore{
position: absolute;
bottom: 10px;
}

.article-list .article .article-header h2 a{
font-family: 'Roboto Condensed';
font-weight: 500;   
color: #45b348 !important;
text-transform: uppercase;
}

.readmore a{
color: #ffffff !important;
background-color: #45b348;
font-size: 16px;
font-weight: 500;
padding: 6px 12px;
width: auto;
}
.readmore a:hover {
color: #ffffff;
background-color: #3cace0;
}

/* ------------ Kontakt ------------- */

.form-feld {
background-color: #e1edf9;
border-radius: none;
}

input[type="text"]:not(.form-control), input[type="email"]:not(.form-control), input[type="url"]:not(.form-control), input[type="date"]:not(.form-control), input[type="password"]:not(.form-control), input[type="search"]:not(.form-control), input[type="tel"]:not(.form-control), input[type="number"]:not(.form-control), select:not(.form-select):not(.form-control) {
  font-size: 1.0rem;
  color: #495057;
  background-color: #e1edf9;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0px;
}

.convertforms .cf-input {
font-size: 1.0rem;
}

.bg-rot {
  background-color: rgba(255, 102, 102, 0.5);
}