body {
    font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 1.1rem;
    line-height: 1.6rem;
}
h2, h3, h4 {
    font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    padding: 10px 0;
    position: relative;
}
h3 {
    text-transform: none;
    font-size: 1.1rem;
    font-weight: bold;
}
a {
    color: inherit;
    text-decoration: none;
}
.text-blue {
    color: #51788E;
}
.bg-blue {
    background-color: #51788E;
}
.bg-grey {
    background-color: #E0DFDA;
}
.bg-green {
    background-color: #677A34;
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active {
    border: none !important;
    box-shadow: none;
}
#nav_logo {
    filter: brightness(0) invert(1);
    max-width: 200px;
}

#header {
    height: 100vh;
    background-image: url('../images/9teufel-header.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    padding: 0px;
}
#header > div {
    width: 100%;
    margin: 0;
    background-color: #ffffffaa;
    padding: calc(8% + 40px) 0 1% 0;
    font-family: 'Hind Siliguri', Arial, Helvetica, sans-serif;
}
#header > div > h1 {
    max-width: 400px;
    padding: 15px 0 0 80px;
    line-height: 1.6rem;
    font-size: 1.4rem;
    text-align: left;
}
#logo {
    max-width: 400px;
}
@media (max-width: 800px) {
    #logo {
        max-width: 300px;
    }
}
#social_links a {
    padding: 0 10px 0 10px;
}
#social_links a img {
    width: 20px;
    height: auto;
}
#offcanvasNavbar .offcanvas-body ul li {
    padding: 10px 0 0;
}
#offcanvasNavbar .offcanvas-body ul li a {
    text-decoration: none;
}
#offcanvasNavbar .offcanvas-body ul.rights {
    padding: 40px 0 0;
}
#offcanvasNavbar .offcanvas-body ul.rights li {
    font-size: 0.8rem;
    padding: 0 0 0;
}

#leistungen .list {
    text-align: left;
}
#leistungen .list > div > div {
    padding: 0 0 0 30px;
}
#leistungen .list > div > div {
    border-right: 1px solid #E0DFDA;
    height: 100%;
}
#leistungen .list > div:last-child > div {
    border-right: 0px solid #E0DFDA;
}
#leistungen .list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#leistungen .list ul li {
    list-style-type: "· ";
    list-style-position: inside;
    padding: 0;
}

.nt_icon {
    height: 40px;
    width: auto;
}


#footer {
    box-shadow: 0 10px 20px #00000033 inset;
    font-size: 0.8rem;
}
#footer a {
    text-decoration: none;
    padding: 0 30px 0 0;
    text-transform: uppercase;
}



#offcanvasImprint,
#offcanvasPrivacy {
    min-width: 50vw;
    font-size: 0.8rem;
}
#offcanvasImprint table,
#offcanvasPrivacy table {
    width: 100%;
}
#offcanvasImprint table tr td,
#offcanvasPrivacy table tr td {
    width: 50%;
}
#offcanvasImprint h3,
#offcanvasPrivacy h3 {
    color: #51788E;
    margin-top: 10px;
    margin-bottom: 2px;
}

#kontakt .nt_icon {
    height: 20px;
    width: auto;
}
#kontakt p {
    text-align: left;
}

form {
    text-align: left;
}
form input,
form textarea {
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid #ddd !important;
}
form button {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    font-weight: bold !important;
    color: inherit !important;
    position: relative;
}

.grecaptcha-badge {
    opacity: 0;
}




.slick-prev:before,
.slick-next:before {
    color: black;
    content: '';
}

.slick-arrow {
    width: 55px;
    height: 55px;
    z-index: 5;
    border-top: 3px solid #000000;
    border-right: 3px solid #000000;
    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
}

.slick-arrow:hover {
    opacity: .5
}

.slick-prev {
    left: 0%;  
    transform: rotate(225deg);
}

.slick-next {
    right: 0%;
    transform: rotate(45deg);
}





@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.team,
.portfolio {
    position: relative;
    overflow: hidden;
    border-top: 0.5rem solid transparent;
    border-bottom: 0.5rem solid transparent;
    border-left: 0.75rem solid transparent;
    border-right: 0.75rem solid transparent;
}
.team {
    border: none;
}

.team img,
.portfolio img{
    transition: 1s ease;
}
@media (max-width: 990px) {
    .team {
        flex: 0 0 100%;
    }
    .team img {
        width: 50%;
        margin: 10px 0 10px 0;
    }
}
.team img.scale,
.portfolio img.scale{
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    transition: 1s ease;
}
.grayscale img {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
.grayscale img:hover {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%)
}

.nt-info {
    display: none;
    position: absolute;
    z-index: 5;
    text-align: center;
    width: 100%;
    top: 42%;
    left: 0;
    padding: 0 20px;
    color: black;
}
.team .nt-info{
    top: 67%;
}
@media (max-width: 990px) {
    .team .nt-info{
        top: 42%;
        width: 50%;
        left: calc(25%);
    }
}

.nt-info-headline {
    font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #51788E;
    font-weight: bold;
    position: relative;
    padding-bottom: 10px;
}
.line-after:after,
.nt-info-headline:after {
    position: absolute;
    content: "";
    left: 50%;
    margin-left: -15px;
    bottom: 3px;
    height: 3px;
    width: 30px;
    background-color: #51788E;
    z-index: 5;
}

.line-after:after {
    left: 15px;
}
button.line-after:after {
    left: 27px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
button.line-after:hover::after {
    width: calc(100% - 24px);
}

.nt-info-body {
    font-size: 1.0rem;
}

.team:after,
.portfolio:after {
    position: absolute;
    content: "";
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background-color: rgba(255, 255, 255, 0.9);
    top: 110%;
    left: 10px;
    bottom: 10px;
    right: 10px;
    z-index: 0;
}
.portfolio:hover:after {
    /*top: 10px; HIEEEEEEEEEEEEEEEEEEEER */
}
.team:hover:after{
    top: 50%;
}
@media (max-width: 990px) {
    .team:hover:after{
        top: 10px;
        left: calc(25% - 5px);
        right: calc(25% - 5px);
    }
}

.nt-animated {
    -webkit-animation-duration: 1000ms;
    -moz-animation-duration: 1000ms;
    -ms-animation-duration: 1000ms;
    -o-animation-duration: 1000ms;
    animation-duration: 1000ms;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}

.nt-fadeInUp {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -ms-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;
}