:root {
    /* declare --foo: bar */
    /* use "cssproperty: var(--foo)" to get "cssproperty: bar" */

    --lila-dark: #732A79;
    --lila-light: #AE84B2;
}

body {
    margin: 0;
    padding-top: 185px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    font-size: 18px;
    font-family: 'BenchNine', sans-serif;
    background-color: #fff;
    color: var(--lila-light);
}

.nav-anchor {
    /* display: block;
    position: relative;
    top: -172px; */
    padding-top: 172px; 
    margin-top: -172px;
    /* visibility: hidden; */
}

/* header {
    font-size: 1.35vw !important;
} */

#div_cookiealert {
    margin: 30px;
    color: var(--lila-dark) !important;
    /* border: solid 5px var(--lila-dark);    
    background-color: rgba(255, 0, 0, 0.527) !important; */
    border: solid 5px rgba(255, 0, 0);    
    background-color: white 6important;
}

a:hover,
a:visited,
a {
    color: var(--lila-light);
    text-decoration: none;
}

h1,
h2 {
    text-transform: uppercase;
    color: var(--lila-dark);
    font-weight: bold;
}

h1 {
    text-align: center;
    /* font-size: 70px; */
    font-size: 5vw !important;
    margin-top: 50px;
    margin-bottom: 20px;
}

.logo {
    /* border: solid 2px var(--lila-light); */
    /* padding: 5%; */
    position: relative;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    display: block;
    max-width: 100%;
    max-height: 110px;
    width: auto;
    height: auto;
}

.portrait {
    /* border: solid 2px var(--lila-light); */
    /* padding: 5%; */
    position: relative;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    display: block;
    max-width: 100%;
    max-height: 450px;
    width: auto;
    height: auto;
}

ol.carousel-indicators li {
    background: var(--lila-dark) !important;
}

ol.carousel-indicators li:hover {
    background: var(--lila-light) !important;
}

a.carousel-control-prev,
a.carousel-control-next {
    color: var(--lila-dark) !important;
}

a.carousel-control-prev:hover,
a.carousel-control-next:hover {
    color: var(--lila-light) !important;
}

footer {
    margin-top: 20px;
}

footer .row {
    color: var(--lila-dark);
    background-color: var(--lila-dark);
    padding: 10px 0px;
    border-top: 3px solid var(--lila-light);
}

footer img {
    padding: 3px 0px;
    max-height: 24px;
}

footer a:hover {
    color: #ffffff;
}

ul.navbar {
    border-top: 2px solid var(--lila-light);
}

.nav-menu-border-right {
    border-right: 2px solid var(--lila-light);    
}

.nav-menu-border-bottom {
    border-bottom: 2px solid var(--lila-light);
}

.navbar-list li {
    list-style: none;
}

li.nav-menu-address {
    /* margin-left: 30px !important;
    margin-right: 30px !important;  */
    font-size: 1.85vw !important;
}

a.nav-link {
    /* font-size: 18px; */
    font-weight: 700;
    font-size: 2vw !important;
    color: var(--lila-dark) !important;
}

.nav-link {
    padding: 0.2rem 0.5rem !important;
}

div.legal p {
    text-align: justify;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    /* border: solid 3px var(--lila-dark) !important; */
}

.item {
    position: relative;
}

/*about area*/

.about h4 {
    font-size: 24px;
    color: #737373;
    margin-bottom: 45px;
}

.about-img img {
    width: 100%;
}

.single-about-detail {
    position: relative;
}

.pentagon-text h1 {
    text-align: center;
    font-size: 50px !important;
    color: var(--lila-dark);
    margin-top: 0;
    transition: all .7s ease 0s;
    -webkit-transition: all .7s ease 0s;
    -moz-transition: all .7s ease 0s;
    -o-transition: all .7s ease 0s;
    -ms-transition: all .7s ease 0s;
    position: absolute;
    left: 15%;
    width: 50px;
    top: -6%;
}

.pentagon-text {
    width: 70px;
    height: 52px;
    background: #fff;
    position: relative;
    top: -30px;
    left: 43%;
}

.pentagon-text:before {
    content: "";
    position: absolute;
    top: -15px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 34px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 15px solid #fff;
}

.pentagon-text:after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 0;
    height: 0px;
    border-left: 36px solid transparent;
    border-right: 34px solid transparent;
    border-top: 15px solid #fff;
}

.about-details {
    background: var(--lila-light);
    border-top: 2px solid #fff;
    transition: all .7s ease 0s;
    -webkit-transition: all .7s ease 0s;
    -moz-transition: all .7s ease 0s;
    -o-transition: all .7s ease 0s;
    -ms-transition: all .7s ease 0s;
}

.about-details h3 {
    text-align: center;
    font-size: 30px;
    color: #fff;
    margin-top: 0;
}

/* 
.about-details h3:hover {
    font-size: 30px;
    color: #383838;
    margin-top: 0;
} */

.about-details p {    
    font-size: 18px;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    /* padding: 0 25px; */
    padding-bottom: 30px;
}

.about-details li {
    text-align: left;
    list-style: none;
    font-size: 18px;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
}

/* .about-details li:hover {    
    font-weight: 700;
} */

.single-about-detail:hover .about-details {
    background: var(--lila-dark);
}

.single-about-detail:hover .pentagon-text h1 {
    color: var(--lila-light);
}

.single-about-detail h3 {
    color: var(--lila-dark);
}

.single-about-detail:hover h3 {
    color: var(--lila-light);
}

/* Verordnung - Kontakt */

ul.text-icon-block {
    /* text-align: center; */
    /* margin-left: 10px;
    margin-right: 10px; */
    color: var(--lila-light) !important;
}

ul.text-icon-block:hover {
    color: var(--lila-dark) !important;
}

.contact-map {
    display: block;
    max-width: 100%;
    min-height: 200px;
    max-height: 450px;
    height: auto; 
    height: auto;
    border: solid 6px var(--lila-light);
    background-color: var(--lila-dark);
}

.contact-map:hover {
    border: solid 6px var(--lila-dark);
}

/*service area*/

.service {
    background: url(../img/pattern.jpg);
    background-repeat: repeat-y;
    margin-top: 40px;
}

.service h2 {
    font-size: 90px;
    color: #fff;
    margin-top: 70px;
    margin-bottom: 0;
}

.service h4 {
    font-size: 24px;
    color: #fff;
    margin-top: 0;
    margin-bottom: 70px;
    display: block;
}

.single-service-img {
    width: 205px;
    height: 125px;
    background: #fff;
    position: relative;
    left: 50%;
    margin-left: -100px;
}

.single-service-img:before {
    content: "";
    position: absolute;
    top: -42px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 102px solid transparent;
    border-right: 104px solid transparent;
    border-bottom: 42px solid #fff;
}

.single-service-img:after {
    content: "";
    position: absolute;
    bottom: -42px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 102px solid transparent;
    border-right: 102px solid transparent;
    border-top: 42px solid #fff;
    z-index: 10;
}

.service-img {
    width: 200px;
    height: 123px;
    background: #00FF00;
    position: relative;
    top: 1px;
    left: 2px;
}

.service-img:before {
    content: "";
    position: absolute;
    top: -40px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 40px solid var(--lila-light);
}

.service-img:after {
    content: "";
    position: absolute;
    bottom: -39px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 40px solid var(--lila-light);
    z-index: 999;
}

.single-service h3 {
    margin-top: 60px;
    color: #fff;
    padding-bottom: 90px;
}

.service-img img.heart {
    left: 20%;
    top: 18%;
}

.service-img img.brain {
    left: 26%;
    top: 11%;
}

.service-img img.knee {
    left: 38%;
}

.service-img img.bone {
    left: 25%;
    top: 14%;
}

.service-img img {
    position: absolute;
}


/*team section*/

.team {
    padding-bottom: 60px;
}

.team h2 {
    font-size: 90px;
    color: var(--lila-dark);
    margin-top: 50px;
    margin-bottom: 0;
}

.team h4 {
    font-size: 24px;
    color: #737373;
    margin-top: 0;
    margin-bottom: 45px;
}

.single-member {
    margin: 0;
    padding: 0;
}

.person img {
    width: 100%;
}

.person-detail {
    padding: 10px;
    background: var(--lila-dark);
    position: relative;
    transition: all .7s ease 0s;
    -webkit-transition: all .7s ease 0s;
    -moz-transition: all .7s ease 0s;
    -o-transition: all .7s ease 0s;
    -ms-transition: all .7s ease 0s;
}

.arrow-top {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--lila-dark);
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    bottom: -10px;
    left: 46%;
    transition: all .7s ease 0s;
    -webkit-transition: all .7s ease 0s;
    -moz-transition: all .7s ease 0s;
    -o-transition: all .7s ease 0s;
    -ms-transition: all .7s ease 0s;
}

.arrow-bottom {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--lila-dark);
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    top: -9px;
    left: 46%;
    transition: all .7s ease 0s;
    -webkit-transition: all .7s ease 0s;
    -moz-transition: all .7s ease 0s;
    -o-transition: all .7s ease 0s;
    -ms-transition: all .7s ease 0s;
}

.person-detail h3 {
    font-size: 30px;
    color: #fff;
}

.person-detail p {
    font-size: 13px;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
}

.single-member:hover .person-detail {
    background: #2a2a2a;
}

.single-member:hover .arrow-top {
    background: #2a2a2a;
}

.single-member:hover .arrow-bottom {
    background: #2a2a2a;
}


/*contact section*/

.info-detail {
    width: 100%;
    text-align: center;
    vertical-align: middle;
    padding-bottom: 15px;
    /* margin-left: 30px;
    margin-right: 30px; */
}

.info-detail:hover i {
    color: var(--lila-dark);
}

.info-detail i {
    width: 50px; 
}
 
.form {
    margin-top: 30px !important;
    padding-top: 30px !important;
    /* border: 2px solid var(--lila-dark);
    background: var(--lila-light) !important; */
}

.form-control {
    margin-bottom: 10px !important;
    color: var(--lila-light);
    border: 2px solid var(--lila-dark);
}

.btn-primary {
    color: #fff !important;
    background-color: var(--lila-dark) !important;
    /* border-color: var(--lila-light)  !important; */
    /* border: 2px; */
}

.contact-caption {
    background: var(--lila-light);
}

.contact-heading h2 {
    color: #fff;
    font-size: 90px;
}

.contact-info {
    padding-left: 40px;
}

.contact-info h3 {
    padding-left: 0;
    font-size: 30px;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    border-bottom: 1px solid #13849c;
    padding-bottom: 12px;
    margin-bottom: 0;
}

.contact-form h3 {
    padding-left: 0;
    font-size: 30px;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    border-bottom: 1px solid #13849c;
    padding-bottom: 12px;
    margin-bottom: 0;
}

.contact-info ul {
    margin: 0;
    padding: 0;
}

.contact-info ul li {
    list-style: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #fff;
}

.contact-info i.fa {
    font-size: 16px;
    padding-right: 12px;
    width: 25px;
    height: 38px;
}

.contact-info ul li span {
    font-weight: bold;
}

.contact-form input {
    width: 100%;
    height: 40px;
    background: #fff;
    font-size: 13px;
    color: #084a5c;
    font-family: 'Open Sans', sans-serif;
    padding: 12px;
    border: 0;
    margin-bottom: 12px;
}

.contact-form textarea {
    font-family: 'Open Sans', sans-serif;
    padding: 12px;
    width: 100%;
    height: 140px;
    border: 0;
    margin-bottom: 12px;
}

.contact-form input.submit-btn {
    width: 180px;
    height: 50px;
    float: right;
    font-size: 24px;
    color: #fff;
    background: url(../img/btn-bg.jpg);
    background-repeat: no-repeat;
    padding: 0;
    font-family: 'BenchNine', sans-serif;
    font-weight: bold;
}

.contact-form {
    padding-right: 40px;
}

.contact {
    position: absolute;
    width: 100%;
    height: 830px;
    margin-top: 0px;
    left: 0;
    margin-top: -830px;
    background: rgba(0, 0, 0, 0.51);
}

.contact-caption {
    margin-top: 120px;
}

#map {
    height: 830px;
}

/*footer*/

.footer-para {
    margin: 0;
    padding: 0;
}

.footer p {
    font-size: 12px;
    color: #000;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    margin: 0;
    padding: 25px 0;
}

.footer a i.fa {
    font-size: 24px;
    color: #b1b1b1;
    padding: 22px 10px;
}

.footer a i.fa:hover {
    color: var(--lila-light);
}

/* just for demo purpose */

html,
body {
    height: 100%;
}


/******************************
responsive area
********************************/


/* md */

@media (min-width: 992px) and (max-width: 1199px) {
    .navbar-default .navbar-nav>li>a {
        font-size: 20px;
        padding: 14px 12px;
    }
    h2 {
        font-size: 75px !important;
    }
    h4 {
        font-size: 22px !important;
    }
    .person-detail h3 {
        font-size: 26px;
    }
    .person-detail p {
        font-size: 12px;
    }
}


/* sm */

@media (min-width: 768px) and (max-width: 991px) {
    .navbar-default .navbar-nav>li>a {
        font-size: 16px;
        padding: 10px 8px;
    }
    h2 {
        font-size: 70px !important;
    }
    h4 {
        font-size: 18px !important;
    }
}


/* xs */

@media (min-width: 480px) and (max-width: 767px) {
    .navbar-default .navbar-nav>li>a {
        font-size: 20px;
    }
    .contact {
        height: 1120px;
        margin-top: -1120px;
    }
    h2 {
        font-size: 70px !important;
    }
    h4 {
        font-size: 21px !important;
    }
}


/* XS Portrait */

@media (max-width: 479px) {
    .top-header img.logo {
        margin: 20px 10px;
    }
    .navbar-default .navbar-toggle {
        border-color: #fff;
        margin-top: -7px;
        right: 10%;
    }
    .navbar-default .navbar-nav>li>a {
        font-size: 16px;
        text-align: left;
    }
    .about h2 {
        font-size: 50px;
        color: var(--lila-light);
        margin-top: 30px;
    }
    .service h2 {
        font-size: 50px;
        margin-top: 40px;
    }
    .team h2 {
        font-size: 50px;
        margin-top: 40px;
    }
    h4 {
        font-size: 18px !important;
    }
    .info-detail {
        margin-left: 8px;
    }
}