/*!
 * Web Fonts from Fontspring.com
 *
 * All OpenType features and all extended glyphs have been removed.
 * Fully installable fonts can be purchased at http://www.fontspring.com
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Fontspring. The fonts are protected under domestic and international trademark and 
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2010-2018 Fontspring
 *
 *
 *
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * Vendor:      Horizon Type
 * License URL: https://www.fontspring.com/licenses/horizon-type/webfont
 *
 *
 */

 @font-face {
    font-family: 'acherusgrotesque-regular';
    src: url('../webfont/acherusgrotesque-regular-webfont.woff2') format('woff2'),
         url('../webfont/acherusgrotesque-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



/*!
 * Web Fonts from Fontspring.com
 *
 * All OpenType features and all extended glyphs have been removed.
 * Fully installable fonts can be purchased at http://www.fontspring.com
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Fontspring. The fonts are protected under domestic and international trademark and 
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2010-2018 Fontspring
 *
 *
 *
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * Vendor:      Horizon Type
 * License URL: https://www.fontspring.com/licenses/horizon-type/webfont
 *
 *
 */

 @font-face {
    font-family: 'acherusgrotesque-regularitalic';
    src: url('../webfont/acherusgrotesque-regularitalic-webfont.woff2') format('woff2'),
         url('../webfont/acherusgrotesque-regularitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


/*!
 * Web Fonts from Fontspring.com
 *
 * All OpenType features and all extended glyphs have been removed.
 * Fully installable fonts can be purchased at http://www.fontspring.com
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Fontspring. The fonts are protected under domestic and international trademark and 
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2010-2018 Fontspring
 *
 *
 *
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * Vendor:      Horizon Type
 * License URL: https://www.fontspring.com/licenses/horizon-type/webfont
 *
 *
 */

 @font-face {
    font-family: 'acherusgrotesque-bold';
    src: url('../webfont/acherusgrotesque-bold-webfont.woff2') format('woff2'),
         url('../webfont/acherusgrotesque-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


/*!
 * Web Fonts from Fontspring.com
 *
 * All OpenType features and all extended glyphs have been removed.
 * Fully installable fonts can be purchased at http://www.fontspring.com
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Fontspring. The fonts are protected under domestic and international trademark and 
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2010-2018 Fontspring
 *
 *
 *
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * Vendor:      Horizon Type
 * License URL: https://www.fontspring.com/licenses/horizon-type/webfont
 *
 *
 */

 @font-face {
    font-family: 'acherusgrotesque-bolditalic';
    src: url('../webfont/acherusgrotesque-bolditalic-webfont.woff2') format('woff2'),
         url('../webfont/acherusgrotesque-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


html, body {
    font-family: 'acherusgrotesque-regular';
    width: 100%;
}
nav ul {
    list-style: none;
}
h1, h2, h3, h4, h5 {
    font-weight: 200;
    letter-spacing: 1px;
    font-family: 'acherusgrotesque-regular';
}
a {
    color: #008cd4;
}


/* ============================================ HEADER */
.jf-mainheader {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    background: #fff;
    box-shadow: 0px 0px 5px #696969;
    z-index: 100;
}
.jf-mainheader .row {
    padding: 10px 0;
}
.jf-mainheader img {
    max-width: 100px;
}
.jf-mainheader nav {
    text-align: right;
}

.jf-mainheader ul {
    list-style: none;
    margin: 10px 0 0 0;
}
.jf-mainheader ul li {
    display: inline-block;
}

.jf-mainheader ul a {
    color: #008cd4;
    margin: 0 12px;
    padding: 4px 0px 6px 0px;
    border-bottom: 1px solid #fff;
    -moz-transition: all;
    -moz-transition-duration: 300ms;
    -moz-transition-timing-function: ease-in-out;   
    -o-transition: all;
    -o-transition-duration: 300ms;
    -o-transition-timing-function: ease-in-out;
    -webkit-transition: all;
    -webkit-transition-duration: 300ms;
    -webkit-transition-timing-function: ease-in-out;
    transition: all;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
}
.jf-mainheader ul a:hover, .jf-mainheader ul a:focus {
    border-bottom: 1px solid #076ca3;
    color: #076ca3;
    padding-bottom: 0px;
}
.jf-mainheader .contactbutton, #mobilemenuontrigger {
    color: #fff;
    background-color: #008cd4;
    font-weight: 800;
    font-family: 'acherusgrotesque-bold';
    padding: 4px 8px;
    margin-right: 0;
    -moz-transition: all;
    -moz-transition-duration: 300ms;
    -moz-transition-timing-function: ease-in-out;   
    -o-transition: all;
    -o-transition-duration: 300ms;
    -o-transition-timing-function: ease-in-out;
    -webkit-transition: all;
    -webkit-transition-duration: 300ms;
    -webkit-transition-timing-function: ease-in-out;
    transition: all;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
}
.jf-mainheader .contactbutton:hover, .jf-mainheader .contactbutton:focus, #mobilemenuontrigger:hover, #mobilemenuontrigger:focus {
    background-color: #076ca3;
    color: #f1f1f1;
    border-bottom: 1px solid #fff;
    padding: 4px 8px;
}
#mobilemenuontrigger {
    display: none;
    width: 100%;
    max-width: 90px;
    text-align: center;
    position: fixed;
    top: 20px;
    right: 16px;
}
/* ============================================ Mobilemenu */
.mobilenavbar {
    background: #008cd4e6;
    width: 100%;
    margin: 66px 0 0 0;
    padding: 15px 16px 5px 12px;
    text-align: right !important;
    color: #008cd4;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    position: fixed;
    z-index: 90;
}
.mobilenavbar .activemobilenav {
    display: block;
}
.mobilenavlisting li{
    list-style: none;
}
.mobilenavbar .mainnavigationlink {
    background: #fff;
    color: #018bd3;
    padding: 5px 8px;
    margin: 10px 0 0 0;
    display: inline-block;
    -moz-transition: all;
    -moz-transition-duration: 200ms;
    -moz-transition-timing-function: ease-in-out;   
    -o-transition: all;
    -o-transition-duration: 200ms;
    -o-transition-timing-function: ease-in-out;
    -webkit-transition: all;
    -webkit-transition-duration: 200ms;
    -webkit-transition-timing-function: ease-in-out;
    transition: all;
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;
}
.mobilenavbar .mainnavigationlink:hover, .mobilenavbar .mainnavigationlink:focus {
    margin-right: 10px;
    color: #076ca3;
}
.mobilecontactinformation {
    border-top: 1px solid #fff;
    padding-top: 24px;
    font-size: .9rem;
    color: #fff;
}
.mobilecontactinformation h3 {
    font-weight: 800;
    font-family: 'acherusgrotesque-bold';
    font-size: 1rem;
}
.mobilecontactinformation a {
    color: #ebebeb;
    border-bottom: 1px dotted #ebebeb;
}
.mobilecontactinformation a:hover, .mobilecontactinformation a:focus {
    color: #fff;
    border-bottom: 1px solid #fff;    
}

/* ============================================ SPLASH */

.splash {
    background-image: url(../images/break-1.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    min-height: 600px;
    color: #fff;
    text-align: center;
    margin-top: 65px;
    padding-top: 64px;
}
.splash img {
    max-width: 126px;
    margin: 22px;
}
.splash p {
    max-width: 620px;
    margin: 14px auto 0 auto;
    font-size: 1.2rem;
    padding: 8px;
}
.splashfooter {
    margin-top: 155px;
}
.splashfooter .infobutton {
    color: #fff;
    border: 2px solid #fff;
    padding: 4px 10px;
    margin: 0 20px;
    min-width: 140px;
    display: inline-block;
    -moz-transition: all;
    -moz-transition-duration: 200ms;
    -moz-transition-timing-function: ease-in-out;   
    -o-transition: all;
    -o-transition-duration: 200ms;
    -o-transition-timing-function: ease-in-out;
    -webkit-transition: all;
    -webkit-transition-duration: 200ms;
    -webkit-transition-timing-function: ease-in-out;
    transition: all;
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;
}
.splashfooter .infobutton:hover, .splashfooter:focus {
    background-color:#fff;
    color: #008cd4;
}
.splashfooter .contactbutton {
    background: #fff;
    padding: 4px 10px;
    border: 2px solid #fff;
    min-width: 140px;
    display: inline-block;
    -moz-transition: all;
    -moz-transition-duration: 200ms;
    -moz-transition-timing-function: ease-in-out;   
    -o-transition: all;
    -o-transition-duration: 200ms;
    -o-transition-timing-function: ease-in-out;
    -webkit-transition: all;
    -webkit-transition-duration: 200ms;
    -webkit-transition-timing-function: ease-in-out;
    transition: all;
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;
}
.splashfooter .contactbutton:hover, .splashfooter .contactbutton:focus {
    background-color: #008cd4;
    color: #fff;
}


/* ============================================ FIRST TEXT */
.firsttext {
    text-align: center;
    margin: 120px 0 0 0;
    padding: 10px 0 50px 0;
}
.firsttext h3 {
    color: #008cd4;
}
.firsttext p {
    max-width: 640px;
    margin: 20px auto 0 auto;
}

/* ============================================ ABOUT */
.aboutinfo {
    background: #f1f1f1;
    width: 100%;
    margin: 110px 0 70px 0;
    padding: 80px 0 70px 0;
    text-align: right;
}
.portraitwrapper {

    position: relative;
    height: 340px;
    margin-bottom: 40px;
}
.portraitwrapper img {

    max-width: 240px;
    float: left;

}
.imageovertext {

    background: #fff;
    position: absolute;
    float: right;
    text-align: right;
    right: 10%;
    min-width: 270px;
    bottom: 30px;
    padding: 3px 20px;
    box-shadow: 0px 0px 3px #00000011;

}
.imageovertext p {

    margin-bottom: 0px;
    font-size: 1.4rem;
    font-weight: 200;
    color: #008cd4;

}
.linesubline::before {

    content: " ";
    display: inline-block;
    border-bottom: 1px solid #008cd4;
    height: 1px;
    width: 100px;
    padding-bottom: 10px;
    margin-bottom: 3px;
    margin-right: 10px;

}
.linesubline {

    display: block;
    font-size: 0.8rem;
    font-weight: 400;

}
/* ============================================ LEISTUNGEN */

.leistung {
    width: 100%;
    background: #fff;
}
.leistungen-header {
    text-align: center;
}
.leistungen-header img {
    width: 100%;
    height: auto;
    max-width: 1400px;
    margin: 0 auto;
}

.secondimageovertext {
    background: #fff;
    text-align: center;
    width: 100%;
    padding: 3px 20px;
    box-shadow: 0px 0px 3px #00000011;
    margin: -36px auto 70px auto;
    position: relative;
    max-width: 640px;
}
.secondimageovertext p {

    margin-bottom: 0px;
    font-size: 1.4rem;
    font-weight: 200;
    color: #008cd4;

}
.secondimageovertext .subline {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    margin-top: -8px;
}
.leistungen {
    width: 100%;
    background: #fff;
}
.leistung .row {
    background: #f1f1f1;
    margin-bottom: 30px;
    max-width: 640px;
    position: relative;
}
.small-4.medium-2.columns.bluecolumn {
    background: #008cd4;
    height: 100%;
    position: absolute;
    display: table;
}
.leistung .columns {
    padding: 10px 0;
}
.bluecolumn p {
    display: table-cell;
    vertical-align: middle;
    color: #fff;
    font-size: 1.5rem;
    text-align: center;
}
.leistung h4 {
    font-weight: 800;
    font-family: 'acherusgrotesque-bold';
    font-size: 1.1rem;
    margin-bottom: 0;
}
.leistungsbeschreibung h4, .leistungsbeschreibung p {
    margin: 10px;
}
.leistungen-footer {
    text-align: center;
    max-width: 640px;
    margin: 70px auto 0 auto;
}
.leistungen-footer h3 {
    font-size: 1.5rem;
    color: #008cd4;
    margin-bottom: 0;
}
.leistungen-footer h3::before {
    content: " ";
    display: block;
    height: 60px;
    width: 1px;
    background: #008cd4;
    margin: 0 auto 12px auto;
}

/* ============================================ RESPONSIVE */
.kontakt {
    color: #fff;
    margin-top: 12px;
    background: #008cd4;
    padding: 0 0 32px 0;
}
.row.kontakthead {
    padding-left: 13px;
}
.kontakt:before {
    content: " ";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #fff;
    margin-bottom: 1px;
    padding-top: 1px;
    border-top:1px solid #008cd4;
}

.kontakt .kontakthead{
    padding-top: 52px;
}
.kontakt h3 {
    font-size: 1.5rem;
}
.beforeline {
    width: 50px;
    height: 1px;
    background: #fff;
    display: inline-block;
    margin-bottom: 4px;
    margin-right: 10px;
}
.contactinfo {
    margin-top: 28px;
}
.contactinfo h5 {
    font-weight: 400;
    font-size: 1rem;
}
.contactinfo h5::after {
    content: " ";
    width: 34px;
    height: 1px;
    background: #fff;
    display: block;
    margin-top: 8px;
    margin-bottom: -3px;
}
.contactinfo .row {
    max-width: 909px;
}
.contactinfo .columns {
    margin-bottom: 10px;
}
.contactinfo a {
    color: #fff;
    font-weight: 800;
    font-family: 'acherusgrotesque-bold';
    border-bottom: 1px dotted #fff;
    -moz-transition: all;
    -moz-transition-duration: 300ms;
    -moz-transition-timing-function: ease-in-out;   
    -o-transition: all;
    -o-transition-duration: 300ms;
    -o-transition-timing-function: ease-in-out;
    -webkit-transition: all;
    -webkit-transition-duration: 300ms;
    -webkit-transition-timing-function: ease-in-out;
    transition: all;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
}
.contactinfo a:hover, .contactinfo a:focus {
    border-bottom: 1px solid #fff;
}
/* ============================================ FOOTER */
.jf-mainfooter {
    background: #000;
    color: #fff;
    padding-top: 20px;
    padding-bottom: 10px;
    font-size: 14px;
}
.footer-navigation {
    text-align: right;
}
.footer-navigation a {
    color: #fff;
    border-bottom: 1px dotted #fff;
    -moz-transition: all;
    -moz-transition-duration: 300ms;
    -moz-transition-timing-function: ease-in-out;   
    -o-transition: all;
    -o-transition-duration: 300ms;
    -o-transition-timing-function: ease-in-out;
    -webkit-transition: all;
    -webkit-transition-duration: 300ms;
    -webkit-transition-timing-function: ease-in-out;
    transition: all;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
}
.footer-navigation a:hover {
    border-bottom: 1px solid #fff;
}
.footer-navigation li {
    display: inline-block;
    margin-left: 10px;
}

/* ============================================ SERVICES */

.services {
    background: #f1f1f1;
    padding-bottom: 50px;
}
.einzelseitenintro {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 380px;
    padding: 50px 0 32px 0;
    background-color: #008cd4;
    margin-top: 50px;
    color: #fff;
    position: relative;
}
.einzelseitefirsttext {
    margin-top: 60px;
    margin-bottom: 60px;
}
.serviceseiteintro {
    background-image: url(../images/break-2.jpg);
}
.aktuellesseiteintro {
    background-image: url(../images/break-2.jpg);
}
.einzelseiteintro {
    background-image: url(../images/break-1.jpg);
}
.einzelseitenintro .row {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 10px;
}
.einzelseitenintro h1 {
    font-size: 2.5rem;
}
.einzelseitenintro h1::after {
    content: " ";
    display: block;
    width: 60%;
    height: 1px;
    background: #fff;
}

.servicesselection {
    width: 100%;
    max-width: 640px;
    margin: 60px auto 50px auto;
}
.servicesselection a {
    display: inline;
    color: #fff;
    background: #008cd4;
    padding-right: 15px;
    padding-left: 5px;
    margin-right: 8px;
    margin-left: 8px;
}

.service .row {
    position: relative;
    background: #fff;
    margin-bottom: 50px;
    max-width: 640px;
}
.small-4.medium-4.columns.titelcolumn {
    background: #008cd4;
    height: 100%;
    position: absolute;
    display: table;
    color: #fff;
    text-align: center;
}
.servicetitelcontent {
    display: table-cell;
    vertical-align: middle;
}

.servicetitelcontent h4 {
    font-size: 1.3rem;
    margin: 0;
}

.servicetitelcontent p {
    font-size: 1rem;
    margin: 0;
}
.servicebeschreibung {
    padding-top: 12px;
}

/* ============================================ QUOTE */

.quotebreaker {
    background: #fff;
    padding: 80px 0 70px 0;
    text-align: center;
    width: 100%;
    max-width: 640px;
    margin: 20px auto 10px auto;
}
.quotebreaker blockquote {
    border: none;
    color: #008cd4;
    font-size: 1.5rem;
    font-weight: 200;
    font-style: italic;
    font-family: 'acherusgrotesque-regularitalic';
    text-transform: uppercase;
    letter-spacing: 1px;
}
.authorofquote {
    color: #008cd4;
}
.authorofquote::before {
    content: " ";
    display: block;
    width: 1px;
    height: 70px;
    background-color: #008cd4;
    margin: 0 auto;
}
/* ============================================ AKTUELLES */
.aktuellesfirsttext {
    background-color: #f1f1f1;
    margin: 0;
    padding: 80px 0 72px 0;
    border-bottom: 1px solid #008cd4;
}
.aktuelles-feed {
    background: #fff;
    padding: 70px 0;
}
.aktuelles-feed .row {
    width: 100%;
    max-width: 640px;
}
.aktuellemeldung {
    margin: 10px 0 90px 10px;
    padding: 0;
}
.meldungsauszug {
    background: #f1f1f1;
    padding: 20px 16px 20px 10px;
}
.meldungstitel {
    background: #008cd4;
    color: #fff;
    padding: 0 0 0 10px;
}
.meldungstitel h4 {
    font-size: 1.2rem;
    margin: 0;
}
.button.meldungsbutton {
    background: #fff;
    color: #008cd4;
    box-shadow: 0px 0px 3px #00000011;
    float: right;
    margin-top: -20px;
    border-radius: 0;
    margin-right: 0px;
    padding: 11px 11px;
    font-weight: 800;
    font-family: 'acherusgrotesque-bold';
}
.button.meldungsbutton:hover, .button.meldungsbutton:focus {
    box-shadow: 0px 0px 4px #0000002d;
    color: #076ca3;
    -moz-transition: all;
    -moz-transition-duration: 300ms;
    -moz-transition-timing-function: ease-in-out;   
    -o-transition: all;
    -o-transition-duration: 300ms;
    -o-transition-timing-function: ease-in-out;
    -webkit-transition: all;
    -webkit-transition-duration: 300ms;
    -webkit-transition-timing-function: ease-in-out;
    transition: all;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
}
/* ============================================ EINZELSEITE */
.singlepagecontent {
    background: #f1f1f1;
    border-bottom: 1px solid #008cd4;
}
.singlepagecontent .row {
    background: #fff;
    padding: 70px 30px 80px 30px;
    width: 100%;
    max-width: 700px;
}

/* ============================================ RESPONSIVE */

@media screen and (max-width: 640px) {
    #mobilemenuontrigger {
        display: block;
    }
    .jf-mainheader nav {
        display: none;
    }
    .fritzbiografie p {
        text-align: left;
    }
    .imageovertext {
        position: absolute;
        right: auto;
        left: 0;
    }
    .splashfooter .infobutton, .splashfooter .contactbutton {
        display: block;
        width: 100%;
        max-width: 80%;
        float: none;
        min-width: none;
        margin: 0 auto 10px auto;
    }
    .einzelseitenintro {
        height: 100%;
        min-height: 400px;
        padding: 62px 10px 32px 10px;
        margin-top: 64px;
        background-image: none;
        background-color: #008cd4;
    }
    .einzelseitenintro h1 {
        font-size: 2rem;
        padding: 70px 10px 10px 10px;
        margin-top: 20px;
    }
    .einzelseitenintro p {
        padding: 10px;
    }
    .einzelseitenintro .row {
        position: relative;
    }
    .servicesselection {
        padding: 10px;
    }
    .servicesselection a {
        display: inline-block;
        margin-left: 0px;
        margin-bottom: 5px;
    }
    .servicebeschreibung, .titelcolumn {
        width: 100%
    }
    .small-4.medium-4.columns.titelcolumn {
        height: 100%;
        position: relative;
    }
    .aktuellemeldung {
        margin: 10px 0 90px 10px;
        padding: 0;
        width: 90%;
        margin: 0 auto 72px auto;
    }
    .firsttext p {
        padding: 0 10px;
    }
    .leistungsbeschreibung h4, .leistungsbeschreibung p {
        margin: 10px;
        font-size: 1rem;
    }
    .small-4.medium-2.columns.bluecolumn {
        position: relative;
        width: 100%;
    }
    .small-8.medium-10.columns.leistungsbeschreibung {
        width: 100%;
    }
}
.wichtigemitteilung {
    background: #008cd4;
    padding: 10px 20px 25px 20px;
    margin-top: 40px;
    color: #fff;
}
.moreservices {

    padding-top: 50px;
    border-bottom: 2px solid #008cd4;

}