/*
Theme Name: Probe-Theme
Theme URI: 
Author: Bjoern Zschernack
Author URI: https://madeforbrowser.com/
Description: Blank Bootstrap Theme 
Version: 1.0
*/
    
    body,
    html {
        font-size: 16px;
        font-size: 100%;
        background: #fff;
        height: 100%;
        height: auto;
        overflow: auto;
        overflow-x: hidden;
        width: 100%;
        padding: 0;
        font-family: "Source Sans Pro", "Arial", sans-serif;
        color: #023E84;
    }
    
    header {
        min-height: 103px;
        background-image: linear-gradient(to right, #FFDE12, #FFDE12), linear-gradient(to right, #CCEAF1, #CCEAF1), linear-gradient(to right, #63C2CD, #63C2CD), linear-gradient(to right, #CCEAF1, #CCEAF1), linear-gradient(to right, #023e84, #023e84), linear-gradient(to right, #63C2CD, #63C2CD), linear-gradient(to right, #E9435C, #E9435C), linear-gradient(to right, #a2c62e, #a2c62e), linear-gradient(to right, #FFDE12, #FFDE12), linear-gradient(to right, #95D2DD, #95D2DD), linear-gradient(to right, #F29213, #F29213);
        background-size: 13.2% 3px, 22.8% 3px, 29.6% 3px, 37.4% 3px, 52.3% 3px, 58.3% 3px, 69.8% 3px, 81.3% 3px, 85.4% 3px, 89.5% 3px, 100% 3px;
        background-repeat: no-repeat;
        background-position: 0 bottom, 0 bottom, 0 bottom, 0 bottom, 0 bottom, 0 bottom, 0 bottom, 0 bottom, 0 bottom, 0 bottom, 0 bottom;
        top: 0;
        background-color: #fff !important;
        z-index: 10
    }
    
    .mobile {
        display: none;
    }
    
    #header_top_row {
        padding: 30px 0 !important;
    }
    
    .buhlbtn {
        border-radius: 5px;
        align-items: center;
        padding: 6px 16px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        color: #fff;
        border-radius: 5px;
        margin-right: 30px;
        display: inline-flex;
    }
    
    .loginbtn {
        background-color: #023e84;
        border: 2px solid #023e84;
        display: inline-flex;
    }
    
    .buhlbtn.hidden {
        display: none;
    }
    
    .buhlbtn:hover {
        color: #fff;
        text-decoration: none;
    }
    
    .testbtn {
        background-color: #ee751b;
        border: 2px solid #ee751b;
    }
    
    .container {
        max-width: 1440px
    }
    
    iframe {
        height: 100%;
        width: 100%;
    }
    
    img#mainlogo {
        height: 35px;
        width: auto;
    }
    
    img#toplogo {
        max-height: 35px;
        width: auto;
        padding-top: 7px
    }
    
    .pageteaser {
        min-height: 300px;
        height: auto;
        background: #ffe620;
        padding-top: 50px;
        padding-bottom: 100px;
    }
    
    #maincontent {
        padding-top: 120px !important;
    }
    
    #maincontent p {
        font-size: 1.1125em;
    }
    
    h1 {
        font-family: "Cairo" !important;
        color: #023E84;
        text-align: left;
        font-size: 72px;
        font-weight: 700
    }
    
    h4 {
        padding-top: 15px;
        text-align: left;
        font-size: 1em;
        font-weight: 700;
        line-height: 1;
        font-family: 'Cairo';
    }
    
    footer {
        background-color: #06437b;
        height: auto;
        padding-bottom: 30px;
        ;
    }
    
    footer::before {
        content: "";
        background-image: linear-gradient(to right, #FFDE12, #FFDE12), linear-gradient(to right, #CCEAF1, #CCEAF1), linear-gradient(to right, #63C2CD, #63C2CD), linear-gradient(to right, #CCEAF1, #CCEAF1), linear-gradient(to right, #023e84, #023e84), linear-gradient(to right, #63C2CD, #63C2CD), linear-gradient(to right, #E9435C, #E9435C), linear-gradient(to right, #a2c62e, #a2c62e), linear-gradient(to right, #FFDE12, #FFDE12), linear-gradient(to right, #95D2DD, #95D2DD), linear-gradient(to right, #F29213, #F29213);
        background-size: 13.2% 3px, 22.8% 3px, 29.6% 3px, 37.4% 3px, 52.3% 3px, 58.3% 3px, 69.8% 3px, 81.3% 3px, 85.4% 3px, 89.5% 3px, 100% 3px;
        background-repeat: no-repeat;
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
        width: 100%;
        height: 3px;
        position: absolute;
        left: 0;
        z-index: 999;
    }
    
    #footercontent {
        color: white;
        padding-top: 60px !important
    }
    
    .footer_headline {
        text-transform: uppercase;
        font-size: 1.2em;
        font-weight: 600
    }
    
    .whitelogo {
        max-height: 35px;
        width: auto;
        cursor: pointer;
    }
    
    #footerbottom {
        padding-top: 60px !important;
    }
    /**videos */
    
    .youtube-video {
        width: 100%;
    }
    
    .youtube-video img {
        width: 100%;
        height: auto;
        background-color: #fff;
    }
    
    #videocontent {
        padding-top: 60px !important;
        padding-bottom: 120px !important
    }
    
    .youtube-video .play-button,
    .youtube-video .play-button:before {
        width: 56px;
        height: 56px;
        position: absolute;
        background: none !important;
        margin-top: 103px;
        margin-left: 205px;
    }
    
    img.playbtn {
        width: 56px;
        height: 56px;
        background: none !important;
        cursor: pointer;
    }
    /** menu */
    
    #menu-mainmenu {
        margin: 0;
        padding: 0;
        list-style: none;
        width: 100%;
        align-items: center;
        font-size: 1.1875em;
        padding-top: 7px;
        padding-left: 100px;
    }
    
    #menu-mainmenu li {
        margin-right: 40px;
    }
    
    #menu-mainmenu li a {
        font-weight: 600;
        text-decoration: none;
        color: #023e84;
    }
    
    #menu-mainmenu li a:hover {
        font-weight: 600;
        text-decoration: none;
        color: #ee751b;
    }
    
    #menu-mainmenu li a::after {
        display: -webkit-inline-box;
        content: "";
        width: 12px;
        height: 12px;
        margin: 2px 0 0 8px;
        background: url(assets/images/funktion_arrow.svg) no-repeat center;
        background-size: contain;
        transform: rotate( 0deg);
        transition: transform 0.3s ease;
    }
    
    #menu-mainmenu li a:hover::after {
        transform: rotate( 90deg);
        transition: transform 0.3s ease;
    }
    
    #menuopener {
        padding-top: 6px
    }
    
    #footermenu {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    #footermenu li {
        margin-left: 60px;
    }
    
    #footermenu li a {
        color: white;
        text-decoration: none;
    }
    
    #footermenu li a:hover {
        color: white;
        text-decoration: underline;
    }
    /** icons*/
    
    .buhl-b-icon {
        margin-right: 18px;
    }
    
    .loginicon {
        margin-right: 15px;
    }
    
    .loginicon::before {
        display: inline-block;
        content: "";
        width: 24px;
        height: 24px;
        background-image: url(assets/images/icon-anmelden.svg);
        background-repeat: no-repeat;
        background-size: contain;
    }
    
    .burgericon::before {
        display: inline-block;
        content: "";
        width: 24px;
        height: 24px;
        background-image: url(assets/images/menu-mobile-burger.svg);
        background-repeat: no-repeat;
        background-size: contain;
    }
    
    .buhl-b-icon::before {
        display: inline-block;
        content: "";
        width: 24px;
        height: 24px;
        background-image: url(assets/images/buhl_icon.svg);
        background-repeat: no-repeat;
        background-size: contain;
    }
    
    @media(max-width:1680px) {
        #videocontent,
        #footercontent,
        #footerbottom {
            padding-left: 100px !important;
            padding-right: 100px !important;
        }
        #maincontent {
            padding-left: 100px !important;
            padding-right: 100px !important;
        }
        #header_top_row {
            padding-left: 100px !important;
            padding-right: 100px !important;
        }
        .youtube-video .play-button,
        .youtube-video .play-button:before {
            width: 46px;
            height: 46px;
            margin-top: 84px;
            margin-left: 172px;
        }
    }
    
    @media(max-width:1440px) {
        .desktop {
            display: none;
        }
        .mobile {
            display: inline-block;
        }
        .buhlbtn {
            display: none
        }
        header {
            min-height: 65px
        }
        #header_top_row {
            padding-left: 100px !important;
            padding-right: 100px !important;
            padding-top: 10px !important;
            padding-bottom: 10px !important
        }
        #menu-mainmenu {
            display: none !important;
        }
        .youtube-video .play-button,
        .youtube-video .play-button:before {
            width: 56px;
            height: 56px;
            margin-top: 84px;
            margin-left: 172px;
        }
        img.playbtn {
            width: 56px;
            height: 56px;
        }
    }
    
    @media(max-width:1200px) {
        #footermenu li {
            margin-left: 30px;
        }
    }
    
    @media(max-width:1024px) {
        #footerbottom {
            flex-direction: column;
            justify-content: start;
            align-items: baseline;
        }
        #footermenu li {
            margin-left: 0px;
        }
        #footermenu {
            margin-bottom: 60px;
            margin-top: 30px;
            flex-direction: column;
        }
        #footermenu li {
            margin-top: 10px;
        }
    }
    
    @media(max-width:768px) {
        #footermenu {
            flex-direction: column;
        }
        #header_top_row {
            padding-left: 10px !important;
            padding-right: 15px !important;
            padding-top: 10px !important;
            padding-bottom: 10px !important
        }
        #menu-mainmenu {
            display: none !important;
        }
        #footerbottom {
            margin: 30px 0;
        }
        #videocontent,
        #footercontent,
        #footerbottom {
            padding-left: 30px !important;
            padding-right: 30px !important;
        }
        #maincontent {
            padding-left: 30px !important;
            padding-right: 30px !important;
        }
    }