/********************************************************************************/
/*
 * Datei: style.css
 * Autor: Sebastian Becker
 * Datum: 30.01.2017
 *
 */

/********************************************************************************/

/********************************************************************************/
/* ALLGEMEINE-STYLES                                                            */
/********************************************************************************/

.modal-open { padding-right: 0 !important; }

html {
  overflow-y: scroll !important;
}

.map-container {
  width: 100%;
  height: 400px;
}

.map-container iframe {
  width: 100%;
  height: 400px;
  display: block;
  pointer-events: none;
  position: relative;
  /* IE needs a position other than static */
}

.map-container iframe.clicked {
  pointer-events: auto;
}

.paddingLeft { padding-left: 45px; }

a:hover, a:focus {
  text-decoration: none;
  color: white;
}

.site-page { height: auto; padding: 2.25em 0em; }

.site-page .headline {
  font-size: 200%;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: dinPro, "Helvetica";
  padding-bottom: 5px;
  border-bottom: 2px solid black;
  margin-bottom: 2.5em;
}

.font-green   { color: #6EB114; }
.font-red     { color: #DC1C0A; }
.font-blue    { color: #2D84CD; }
.font-yellow  { color: #F2CB15; }

.border-green   { border-color: #6EB114 !important; }
.border-red     { border-color: #DC1C0A !important; }
.border-blue    { border-color: #2D84CD !important; }
.border-yellow  { border-color: #F2CB15 !important; }

.bck-green            { background-color: #6EB114; }
.bck-green:before     { background-color: #6EB114; }

.bck-blue             { background-color: #2D84CD; }
.bck-blue:before      { background-color: #2D84CD; }

.bck-red              { background-color: #DC1C0A; }
.bck-yellow           { background-color: #F2CB15; }
.bck-yellow:before    { background-color: #F2CB15; }

a.font-green:hover    { background-color: #6EB114; }
a.font-blue:hover     { background-color: #2D84CD; }
a.font-yellow:hover   { background-color: #F2CB15; }

.btn-red:hover    { background-color: #ec2a18 !important; }
.btn-yellow:hover { background-color: #fddb3b !important; }
.btn-blue:hover   { background-color: #46a1ec !important; }

.subheadline {
  font-size: 180%;
  margin-top: 0px;
  margin-bottom: 40px;
}

/******************** OWN-FONTS ********************/
@font-face {
  font-family: dinPro;
  src: url("../font/DINPro-Regular.ttf");
  font-weight: normal;
}

@font-face {
  font-family: dinPro;
  src: url("../font/DINPro-Bold.ttf");
  font-weight: bold;
}

@font-face {
  font-family: dinPro;
  src: url("../font/DINPro-Medium.ttf");
  font-weight: 500;;
}

@font-face {
  font-family: roundedElegance;
  src: url("../font/Rounded_Elegance.ttf");
}


/********************************************************************************/
/* NAVIGATION                                                                   */
/********************************************************************************/

.navbar {
  height: 110px;
  background-color: #ffffff;
  border-bottom: 5px solid #6EB114;
  margin-bottom: 0px;
}

.navbar-brand > img { width: 240px; margin-top: 5px; }

.navbar-nav { float: right;}

.navbar-default .navbar-nav > li > a {
  color: #2D84CD;
  font-family: dinPro;
  font-size: 16px;
  line-height: 105px;
  display: block;
  margin: 0;
  padding: 0px 0.5em;
  text-transform: uppercase;
}

.navbar-default .navbar-nav > li > a:hover {
  color: #6EB114;
  /*background-color: rgba(110, 177, 20, 0.15)*/
}

/********************************************************************************/
/* HEADER                                                                       */
/********************************************************************************/

header#main-header {
  height: calc(100vh - 110px);
  margin-bottom: 110px;
  background-image: url("../images/header-img.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 800px;
  position: relative;
  left: 0;
  top: 110px;
}

header section#box-service {
  margin-top: 150px;
  float: right;
}

/********** BOX-SERVICE **********/
header #box-service h1 {
  margin: 0;
  color: white;
  font-family: roundedElegance;
  font-size: 200%;
  width: 330px;
  padding: 8px 0px 8px 50px;
  margin: 18px 0px;
}

header #box-service h1:nth-of-type(1) {
  background-color: #6EB114;
  position: relative;
}

header #box-service h1:nth-of-type(1):before {
  content: "";
  background: url("../images/assets.png")no-repeat;
  background-position: 0px -19px;
  width: 55px;
  height: 55px;
  position: absolute;
  left: -14px;
  top: -3px;
}

header #box-service h1:nth-of-type(2) {
  background-color: #DC1C0A;
  position: relative;
  left: -25px;
}

header #box-service h1:nth-of-type(2):before {
  content: "";
  background: url("../images/assets.png")no-repeat;
  background-position: -59px -19px;
  width: 55px;
  height: 55px;
  position: absolute;
  left: -14px;
  top: -3px;
}

header #box-service h1:nth-of-type(3) {
  background-color: #2D84CD;
  position: relative;
  left: -50px;
}

header #box-service h1:nth-of-type(3):before {
  content: "";
  background: url("../images/assets.png")no-repeat;
  background-position: -117px -19px;
  width: 55px;
  height: 55px;
  position: absolute;
  left: -14px;
  top: -2px;
}

header #box-service h1:nth-of-type(4) {
  background-color: #F2CB15;
  position: relative;
  left: -75px;
}

header #box-service h1:nth-of-type(4):before {
  content: "";
  background: url("../images/assets.png")no-repeat;
  background-position: -175px -19px;
  width: 55px;
  height: 55px;
  position: absolute;
  left: -14px;
  top: -2px;
}

/********** BOX-CONTACT **********/

header #box-contact {
  background-color: #fff;
  width: 400px;
  margin-top: -6%
}

header #box-contact .box-header {
  background-color: #6EB114;
  padding: 15px;
  font-family: roundedElegance;
  color: white;
  position: relative;
}

header #box-contact .box-content {
  padding: 15px;
  height: 200px;
}

header #box-contact .box-header h1,
.box-content h1 {
  font-size: 220%;
  padding-left: 40px;
}

header #box-contact .box-content h1 {
  color: #6EB114;
  font-family: dinPro;
}

.btn-green {
  background-color: #6EB114;
  padding: 0.45em;
  padding-left: 35px;
  border-radius: none !important;
  display: block;
  width: 300px;
  text-align: center;
  color: white;
  font-size: 28px;
  margin: 15px auto 0px auto;
  position: relative;
}

.btn-green:before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #6EB114;
  position: absolute;
  left: 50%;
  top: -10px;
  -webkit-transform: translateX( -50% ) rotate( -45deg );
  transform: translateX( -50% ) rotate( -45deg );
}

.btn-green:after {
  content: "";
  width: 45px;
  height: 65px;
  background: url(../images/assets.png)no-repeat;
  background-position: -521px -20px;
  position: absolute;
  left: 10px;
  top: 6px;
}

/********************************************************************************/
/* DIENSTLEISTUNGEN                                                             */
/********************************************************************************/

#services { height: auto; }

#services header {
  background-image: none !important;
  height: auto;
}

.border-small { border: 1px solid; }

/********** ARTICLE-BOX **********/

.service-box {
  min-height: 500px;
  box-sizing: border-box;
  margin: 3em 0em 0em 0em;
}

.service-box h1 {
  color: white;
  font-family: roundedElegance;
  font-size: 160%;
  text-align: center;
  margin: 0;
  padding: 15px;
}


.service-box header.green {
  background-color: #6EB114;
    position: relative;
}

.service-box header.red {
  background-color: #DC1C0A;
  position: relative;
}

.service-box header.yellow {
  background-color: #F2CB15;
    position: relative;
}

.service-box header.blue {
  background-color: #2D84CD;
    position: relative;
}

.service-box header.green:before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #6EB114;
  position: absolute;
  left: 50%;
  bottom: 0px;
  -webkit-transform: rotate( -45deg ) translateX( -50% );
  transform: rotate( -45deg ) translateX( -50% );
}

.service-box header.red:before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #DC1C0A;
  position: absolute;
  left: 50%;
  bottom: 0px;
  -webkit-transform: rotate( -45deg ) translateX( -50% );
  transform: rotate( -45deg ) translateX( -50% );
}

.service-box header.yellow:before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #F2CB15;
  position: absolute;
  left: 50%;
  bottom: 0px;
  -webkit-transform: rotate( -45deg ) translateX( -50% );
  transform: rotate( -45deg ) translateX( -50% );
}

.service-box header.blue:before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #2D84CD;
  position: absolute;
  left: 50%;
  bottom: 0px;
  -webkit-transform: rotate( -45deg ) translateX( -50% );
  transform: rotate( -45deg ) translateX( -50% );
}

section.service-content p {
  padding: 3em 0em;
  font-family: dinPro;
  color: #666;
  font-size: 110%;
  padding: 2.5em 10px 3.5em 10px;
}

section.service-content img {
  max-width: 100%;
  display: block;
}

.modal-button {
  width: 100%;
  text-align: center;
  display: block;
  padding: 1.25em 0;
  border: none;
  color: white;
  font-family: roundedElegance;
  font-size: 115%;
  outline: none !important;
  position: relative;
}

.modal-button:before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: white;
  position: absolute;
  left: 50%;
  top: -17px;
  -webkit-transform: rotate( -45deg ) translateX( -50% );
  transform: rotate( -45deg ) translateX( -50% );
}

.md-btn-green   { background-color: #6EB114 !important; }
.md-btn-red     { background-color: #DC1C0A !important; }
.md-btn-yellow  { background-color: #F2CB15 !important; }
.md-btn-blue    { background-color: #2D84CD !important; }

/********** DIENSTLEISTUNG-MODAL **********/
.modal-dialog {
  width: 100%;
  margin: 0;
  margin-top: 200px;
  position: relative;
}

.modal-content {
  border-radius: 0px;
}

.modal-header {
  border-top: 5px solid;
  border-bottom: 0px;
  padding: 25px 0px;
}

.modal-header .close {
  margin-right: 25px;
  font-size: 50px;
  opacity: 0.75;
  outline: none !important;
}

.modal-header .close:hover {
  color: #DC1C0A;
}

.modal-title {
  color: white;
  width: 300px;
  padding: 15px 0px 15px 40px;
  font-family: dinPro;
  font-size: 160%;
}

.modal-body {
  padding-left: 40px;
  padding-bottom: 60px;
  border-bottom: 5px solid;
  font-family: dinPro;
  font-size: 16px;
}

.modal-body h2 {
  margin-top: 0px;
  font-size: 150%;
}

.modal-btn {
  width: 200px;
  height: 45px;
  color: white;
  font-family: dinPro;
  margin: 0 auto;
  display: table;
  margin-top: 25px;
  border: 0px;
  border-radius: 0px;
  font-size: 16px;
  outline: none !important;
}

.modal-btn:hover {
  background: #7dc51d;
  color: white;
}
/********************************************************************************/
/* TEAM                                                                         */
/********************************************************************************/

.about-img {
  width: 20%;
  position: relative;
  left: -15px;
  top: -90px;
}

.box {
  min-height: 500px;
  margin-top: 3em;
  padding: 15px;
  position: relative;
}

.about h1 {
  font-size: 200%;
  font-family: dinPro;
  padding-left: 100px;
  padding-bottom: 5px;
  border-bottom: 3px solid #2D84CD;
}

.about ul {
  margin-top: -130px;
  margin-left: 35px;
  border-left: 3px solid #2D84CD;
  padding-top: 20px;
  padding-bottom: 75px;
  font-family: dinPro;
  font-size: 22px;
 }

.about ul li { list-style-type: none; }

.siegel {
  background: url("../images/assets.png")no-repeat;
  background-position: -606px -72px;
  width: 127px;
  height: 160px;
  position: absolute;
  bottom: 100px;
  right: 0px;
}

section.qualifikation { margin-top: 75px;}

section.qualifikation-mitarbeiter {
  border-left: 3px solid;
  padding-left: 25px;
  margin-bottom: 60px;
}

section.qualifikation-mitarbeiter li {
  list-style-type: none;
  position: relative;
  font-size: 18px;
}

section.qualifikation-mitarbeiter li:before {
  content: "";
  width: 10px;
  height: 2px;
  background-color: #6EB114;
  position: absolute;
  left: -20px;
  top: 9px;
}

section.qualifikation-service {
  border-left: 3px solid;
  padding-left: 25px;
}

section.qualifikation-service p { font-size: 18px; }

.qualifikation {
  font-family: roundedElegance;
 }

 .qualifikation-mitarbeiter h1, .qualifikation-service h1 {
   font-size: 170%;
 }

 /********************************************************************************/
 /* PFLEGEGRAD                                                                   */
 /********************************************************************************/

#pflegegrad { font-family: dinPro; color: #6EB114; }

 table.pflegegrad {
   width: 100%;
   border: 3px solid #6EB114;
   box-sizing: border-box;
   border-collapse: separate;
   font-size: 130%;
 }

table thead { background-color: #6EB114; color: white; }

table thead tr th { padding: 12px; font-size: 130%; text-align: left;}

table thead tr th:nth-child(2) { padding: 12px; font-size: 130%; text-align: right;}

table tbody tr td:nth-child(2) { text-align: right; padding-right: 15px;}

table.pflegegrad td {  padding: 12px 0px 12px 12px; }

/* Jede zweite Zeile einfärben */
table.pflegegrad tr:nth-of-type(even) { background-color: rgba(110, 177, 20, 0.25); }

.table-headline {
  font-size: 200%;
  margin-top: 0px;
}

#pflegegrad small { float: right; margin-top: 6px;}

.verband-box { margin-top: 6.4em; margin-left: 100px; }

.verband-box img {
  float: left;
  margin-right: 15px;
}

.verband-box figure figcaption h3 {
  font-size: 15px;
  font-weight: normal;
  line-height: 1.15;
}

.links { margin-top: 20px; margin-left: 100px;}

table.links-table td { padding: 10px 0px;}

table.links-table tr td:nth-of-type(2) { padding-left: 50px; }

table.links-table a {
  color: red;
  padding: 6px 16px;
  border: 1px solid #DC1C0A;
  transition: all ease-in-out 0.25s;
}

table.links-table a:hover {
  color: white;
  background-color: #DC1C0A;
}

/********************************************************************************/
/* INFO                                                                   */
/********************************************************************************/

#info {
  font-family: roundedElegance;
}

article.post {
  border: 2px solid transparent;
  min-height: 400px;
  overflow: hidden;
}

.post header h1 {
  color: white;
  padding: 15px;
  font-size: 180%;
  position: relative;
  padding: 20px;
  margin-top: 0px;
  margin-bottom: 50px;
}

.post header h1:before {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 100%;
  position: absolute;
  left: 20px;
  bottom: -15px;
}

.post .article-content p {
  font-size: 16px;
  padding: 0px 20px 0px 20px;
}

.post .article-content a {
  padding: .75em;
  text-align: center;
  border: 2px solid #6EB114;
  font-size: 16px;
  width: 160px;
  display: block;
  margin: 0 auto;
  margin-bottom: 30px;
  transition: all ease-in-out 0.25s;
  font-weight: bold;
}

.mdlclosebtn {
  padding: .75em;
  text-align: center;
  border: 2px solid #6EB114;
  font-size: 16px;
  width: 160px;
  display: block;
  transition: all ease-in-out 0.25s;
  font-weight: bold;
}

.mdlclosebtn:hover {
  background-color: #DC1C0A;
  color: #fff;
}

.openblogpostinmodal:hover {
	color: black;
}

.post .article-content a:hover {
  color: #fff;
}

.button {
  padding: .9em;
  background: #EBECEC url("../images/button-icon.png")no-repeat;
  padding-left: 25px;
  display: block;
  width: 200px;
  margin: 40px auto;
  color: black;
  font-size: 16px;
  transition: all ease-in-out 0.65s;
}

.button:hover {
  background-color: #DC1C0A ;
  color: ;
}

/********************************************************************************/
/* JOBS                                                                         */
/********************************************************************************/

#jobs img {
  display: block;
  width: 100%;
  border-right: 2px solid;
  padding: 30px 0px;
}

#jobs article h1 {
  font-family: roundedElegance;
  font-size: 180%;
  padding-left: 60px;
  margin-top: 30px;
}

#jobs article span {
  padding-left: 80px;
  position: relative;
}

#jobs article span:before {
  content: "";
  background: url("../images/assets.png")no-repeat;
  background-position: -231px -25px;
  width: 60px;
  height: 52px;
  position: absolute;
  left: 0;
  top: -12px;
}

/********************************************************************************/
/* ANFAHRT                                                                      */
/********************************************************************************/

#anfahrt {
  padding: 4em 0em;
}

#anfahrt img { padding-left: 30px;}

#anfahrt h1.adresse {
  font-size: 160%;
  font-family: roundedElegance;
  text-align: right;
  padding-top: 130px;
  padding-right: 100px;
  position: relative;
}

#anfahrt h1.adresse:before {
  content: "";
  background: url("../images/logo-content.png")no-repeat;
  width: 151px;
  height: 135px;
  position: absolute;
  left: 50px;
  top: 90px;
}

/********************************************************************************/
/* KONTAKT                                                                      */
/********************************************************************************/

#kontakt { padding-bottom: 6em;}

.form-control {
  margin: 12px 0px;
  height: 50px;
  border: none;
  border-radius: 0px;
  outline: none;
  box-shadow: none;
  background-color: #EBECEC;
  font-size: 18px;
  color: #9D9E9E;
  padding-left: 35px;
}

#kontakt .icon-box {
  position: relative;
  left: 0;
  top: 0;
}

#kontakt .icon-box::before {
  content: "";
  width: 65px;
  height: 52px;
  background-color: green;
  position: absolute;
  left: -53px;
  top: 0px;
}

#kontakt .icon-box:nth-of-type(1):before {
  background: url("../images/assets.png")no-repeat;
  background-position: -324px -22px;
}

#kontakt .icon-box:nth-of-type(2):before {
  background: url("../images/assets.png")no-repeat;
  background-position: -324px -22px;
}

#kontakt .icon-box:nth-of-type(3):before {
  background: url("../images/assets.png")no-repeat;
  background-position: -451px -22px;
}

#kontakt .icon-box:nth-of-type(4):before {
  background: url("../images/assets.png")no-repeat;
  background-position: -515px -22px;
}

#kontakt .icon-box:nth-of-type(5):before {
  background: url("../images/assets.png")no-repeat;
  background-position: -580px -22px;
}

.form-control:focus {
  box-shadow: none;
}

input[type="reset"], input[type="submit"] { padding-left: 12px;}

textarea {
  max-height: 210px;
  max-width: 100%;
}

textarea[type="message"] { padding-top: 12px; }

#kontakt h3 {
  font-size: 120%;
}

.form-button {
  position: relative;
  height: 450px;
}
.form-content {
  position: absolute;
  left: 0;
  bottom: -20px;
}

.form-btn {
  width: 150px;
  padding: 8px 12px;
  border: none;
  color: #fff;
  font-size: 18px;
  margin-top: 20px;
}

/********************************************************************************/
/* FOOTER                                                                       */
/********************************************************************************/

#main-footer {
  border-top: 5px solid;
  padding: 2.5em 0em 0em 0em;
  height: auto;
}

#main-footer img {
  display: table;
  margin: 0 auto;
  width: 350px;
}

#main-footer .btn-green:before {
  left: 0;
  top: 22px;
}

#main-footer ul.sub-navigation {
  margin: 50px auto 20px auto;
  padding: 0;
  display: table;
}

#main-footer ul li {
  list-style-type: none;
  float: left;
}

#main-footer ul.sub-navigation li a {
  padding: 1em 1.25em;
  display: block;
  font-size: 17px;
  height: 60px;
}

#main-footer ul.sub-navigation li a:hover {
  border-bottom: 3px solid;
  color: inherit;
}

#main-footer section {
  padding: 12px 0px;
}

#main-footer section ul {
  display: table;
  margin: 0 auto;
  color: #fff;
  font-size: 15px;
}

#main-footer section h1 {
  margin: 0;
  padding: 0;
  font-size: 125%;
}

#main-footer section ul  li  { padding: 0px .65em;}

#main-footer section ul li a { color: white; }

#main-footer section ul li a:hover { color: #DC1C0A; transition: all ease 0.5s; }

/********************************************************************************/
/* IMPRESSUM                                                                   */
/********************************************************************************/
#impressum {
  height: auto;
  padding: 8em 0em;
  font-family: dinPro;
}

#impressum .main-headline {
  font-size: 180%;
  border-bottom: 2px solid;
  padding-bottom: 10px;
}

#impressum p { font-size: 16px; }

#impressum h2 { font-size: 140%; margin-top: 25px; margin-bottom: 10px;}