/*Extra small devices (portrait phones, less than 576px)*/
/*No media query since this is the default in Bootstrap*/

html {
    font-size: 2em;
}

.medium {
    font-size: 1.25rem;
}

h1,
.large {
    font-size: 1.5rem;
}


@media (max-width: 767px) {

    * {
        font-size: 20px;
    }

    .mobile-h2 { font-size: 22px; }
    .mobile-p-0 { padding: 0 !important; }
    .mobile-m-0 { margin: 0 0 0 0 !important; }
    .mobile-pt-1 { padding-top: 0.25rem !important;}
    .mobile-p-b-1 { padding-bottom: 0.75em !important; }
    .mobile-text-justify { text-align:justify !important; }
    .mobile-text-smaller { font-size: 15px; }
    .mobile-button-font-smaller { font-size: 16px; }
    .mobile-col-6 { width: 50%; max-width: 50% !important;}
    .mobile-col-12 { width: 100%; max-width:100% !important; flex:100%; }
    .mp-2 { padding: 0.75em !important; }
    .mobile-margin-bottom-0 { margin-bottom: 0 !important; }
    .mobile-margin-bottom-1 { margin-bottom: 0.50em !important; }
    .mobile-hide { display: none !important; }
    #footer { padding-bottom: 30px; margin-top: 15px; }
    .mouseover-msg { margin-left: 4px !important; margin-right: 4px !important; }

    .screen .page_title { font-size: 25px; }
    p { margin-bottom: 0.75rem; }

    /* registreer footerbanner en omhoog icoon */
    .fixed, .fixed.up {
        bottom: 0;
        top: unset;
        color: white;
        width: auto;
        min-height: 40px;
        min-width: 40px;
        background-color: #4c7f9e;
    }
    .fixed.up a { display: inline-block; width: auto; background-color: #4c7f9e; font-size:15px; }
    .fixed.up a.right { right: 0px;top: 4px; position: absolute; width: 100px; background-color: #4c7f9e }
    .fixed.up.register { width:100%; }

    /* topmenu in en uitloggen buttons */
    div#right-buttons a { font-size: 14px; }
    div#right-buttons { top: 32.5% !important; padding-right: 20px; }

    form#login_form label > div > div { display: none; }
    form#login_form label > div div.mouse_overs { display: none !important; }
    form#login_form label > div > input { width: 100%; border-radius: 2px; }


    /* faq */
    div.faq-page > div.content > div > div > div:nth-child(odd) {
        color: #6388b5;
    }

    /* searchform */
    div.search-button-container label div.label { display: none ; }
    button.main-search-button {
        font-size: 14px !important;
        padding: 5px 20px !important;
        z-index: 10;
        position: absolute;
        right: 1px;
        top: 90px;
        float: none;
    }
    /* advanced search */
    div#searching div.search-button-container button { padding: 20px 15px !important; }

    /* active profile pulldown */
    #select_profile {
        width: 160px;
        position: absolute;
        right: 1px;
        top: 20px;
        font-size: 16px !important;
    }

    /* new profile */
    span.step-icon {
        font-size: 16px;
        width: 28px;
        padding: 2px 9px !important;
    }

    /* menu */
    #mobileMenuSidebar { margin-top: 1em !important; }
    .menuOption { font-size: 14px !important; }
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {



    #menuBar:not(.floating) .logo-container + * {
        /* padding-left: 7rem !important; */
    }

    .logo-container + * {
        margin-top: 0;
    }

    .position-sm-absolute {
        position: absolute !important;
    }
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .h-md-auto {
        height: auto !important;
    }

    #bottomfixregister { display: none; }
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    h1 {
        font-size: 2.5rem;
    }

    .medium {
        font-size: 1.5rem;
    }

    .large {
        font-size: 2rem;
    }

    .h-lg-auto {
        height: auto !important;
    }
    html {
        font-size: 1em;
    }

    #description {
        background: url("../img/Links/iStock-470937578.jpg");
    }

    .screen {
        padding: 2em 5px;
    }

    #explain p {
        max-width: 15em;
    }

    div#page-content > #welcome.screen:first-of-type {
        background-image: url("../img/Links/iStock-481040302 bewerkt.jpg");
        padding-top: 13em;
    }

    .icon-container {
        position: absolute;
        transform: translateY(-50%);
        width: auto!important;
    }

}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .short_long_button,
    .content_short {
        display: none;
    }
    .border-bottom-lg-0 {
        border-bottom: 0 !important;
    }

    .border-lg-right {
        border-right: 1px solid !important;
    }
}

/* not mobile first */
@media (max-width: 768px) {
    .screen {
        padding-left: 0;
        padding-right: 0;
    }
}
@media (max-width: 709px) {
    #mobileMenuCheckbox:checked + #menuBar > .logo-container,
    #mobileMenuCheckbox:checked + #menuBar > #right-buttons {
        display: none;
    }
}
@media (max-width: 992px) {
    .button:not(.inactive):hover::before {
        display: none;
    }

    .mobile-p-0 {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}
@media (max-width: 1200px) {
    .content_short_long:checked + .content_short,
    .content_short_long:checked + .content_long + .content_short,
    .content_short_long:not(:checked) + .content_short + .content_long,
    .content_short_long:not(:checked) + .content_long {
        display: none;
    }
}