.login h1 a {
    background: url(../images/login-logo-alt.svg) no-repeat top center;
    width: 320px;
    height: 66px;
    text-indent: -9999px;
    overflow: hidden;
    padding-bottom: 0px;
    display: block;
}

.ysd-services {
    display: none;
}

@media (min-width: 450px) {

    body.login {
        font-family: 'Montserrat';
        background-image: url(../images/backgrounds.php);
        background-color: #412458;
        background-size: cover;
        background-position: center;
        overflow: hidden;
    }

    body.login:after {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        content: "";
        opacity: 0.6;
        z-index: 1;
        pointer-events: none;
        background-color: #412458;
    }

    body.login .humanity {
        text-align: right;
    }

    .humanity strong {
        display: block;
        color: #d72550;
    }

    p.forgetmenot {
        padding-top: 7px;
    }

    #login {
        position: relative;
        z-index: 10;
        margin: 0 0 0 80px;
    }

    .wp-core-ui .button-primary {
        background: #412458;
        border: none;
        box-shadow: none;
        text-shadow: none;
        transition: 300ms;
    }

    .wp-core-ui .button-primary:hover,
    .wp-core-ui .button-primary:focus,
    .wp-core-ui .button-primary:active {
        background: #766186;
        border: none;
        box-shadow: none;
        text-shadow: none;
    }

    .login .message {
        border-radius: 6px;
    }

    .login form .input,
    .login form input[type=checkbox],
    .login input[type=text] {
        border-radius: 3px;
    }

    .login form .input:focus,
    .login form input[type=checkbox]:focus,
    .login input[type=text]:focus {
        box-shadow: none;
        border: 1px solid #412458;
    }

    .login form {
        color: #412458;
        background-color: #fff;
        border: none;
        box-shadow: none;
        border-radius: 10px;
    }

    .login form .input {
        border: 1px solid #aaa;
        border-radius: 8px;
    }

    .login label {
        color: #412458;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    .login #nav a,
    .login #backtoblog a,
    .login .privacy-policy-link {
        color: #ffffff;
        transition: 300ms;
    }

    .login #nav a:hover,
    .login #backtoblog a:hover,
    .login .privacy-policy-link:hover {
        color: #ddd;
    }

    .login h1 a {
        background: url(../images/login-logo.svg) no-repeat top center;
        width: 320px;
        height: 66px;
        text-indent: -9999px;
        overflow: hidden;
        padding-bottom: 0px;
        display: block;
    }

    .language-switcher {
        position: relative;
        z-index: 10;
        margin: 0 0 0 95px;
        text-align: left;
    }

    .language-switcher label {
        filter: brightness(0) invert(1);
    }

    .login input#wp-submit {
        background: #D72650;
        border-radius: 50px;
        padding: 4px 22px;
        font-weight: 600;
        text-transform: lowercase;
    }

    .login input#wp-submit:hover {
        background: #f93f6b;
    }

    .privacy-policy-page-link {
        display: none;
    }

    #language-switcher select {
        border-radius: 50px;
    }

    form#language-switcher .button {
        border-radius: 50px;
    }

    .login #backtoblog,
    .login #nav {
        padding: 0px 2px;
        margin-bottom: 0;
    }

    .login #nav a {
        text-decoration: underline;
    }

}

@media(min-width:992px) {
    .ysd-services:before {
        content: "";
        background: url(../images/pijl-ysd-login-1.svg) no-repeat;
        width: 430px;
        height: 260px;
        left: 58%;
        top: -160px;
        position: absolute;
        z-index: 12;
    }

    .ysd-services {
        display: block;
    }

    .login h1 a {
        width: 250px;
        height: 50px;
        margin: 0 0 34px 0px;
    }

    .ysd-services {
        background: rgb(65 36 88 / 94%);
        line-height: 1.85;
        position: absolute;
        transition: 400ms;
        z-index: 10;
        bottom: -130px;
        right: 0;
        left: 0;
    }

    .ysd-services:hover {
        bottom: 0;
    }

    .ysd-services-formula {
        max-width: 940px;
        margin: 0 auto;
        color: #ffffff8a;
        padding: 3% 15px 4%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 24px;
    }

    .ysd-services:hover .ysd-services-formula {
        color: #fff;
    }

    .ysd-service-branding h3,
    .ysd-service-coding h3,
    .ysd-service-marketing h3,
    .ysd-service-groei h3 {
        position: relative;
        font-weight: 700;
        font-size: clamp(16px, 2vw, 26px);
        margin-bottom: 12px;
    }

    .ysd-service-branding h3:after,
    .ysd-service-coding h3:after,
    .ysd-service-marketing h3:after {
        content: "+";
        position: absolute;
        right: 16px;
        font-weight: 700;
        color: #D72650;
    }

    .ysd-service-marketing h3:after {
        content: "=";
    }

    .ysd-services-formula ul {
        list-style: none;
    }

    .ysd-services-formula a {
        line-height: 2.4;
        color: #fff;
        display: block;
        text-decoration: none;
        cursor: pointer;
        opacity: 0.6;
        font-size: 14px;
        font-weight: 200;
        transition: .5s;
        letter-spacing: 0.3px;
    }

    .ysd-services-formula a:before {
        content: "";
        mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNTA3LjMgMjY3LjNjNi4yLTYuMiA2LjItMTYuNCAwLTIyLjZsLTE0NC0xNDRjLTYuMi02LjItMTYuNC02LjItMjIuNiAwcy02LjIgMTYuNCAwIDIyLjZMNDU3LjQgMjQwIDE2IDI0MGMtOC44IDAtMTYgNy4yLTE2IDE2czcuMiAxNiAxNiAxNmw0NDEuNCAwTDM0MC43IDM4OC43Yy02LjIgNi4yLTYuMiAxNi40IDAgMjIuNnMxNi40IDYuMiAyMi42IDBsMTQ0LTE0NHoiLz48L3N2Zz4=");
        -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNC4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIzIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNTA3LjMgMjY3LjNjNi4yLTYuMiA2LjItMTYuNCAwLTIyLjZsLTE0NC0xNDRjLTYuMi02LjItMTYuNC02LjItMjIuNiAwcy02LjIgMTYuNCAwIDIyLjZMNDU3LjQgMjQwIDE2IDI0MGMtOC44IDAtMTYgNy4yLTE2IDE2czcuMiAxNiAxNiAxNmw0NDEuNCAwTDM0MC43IDM4OC43Yy02LjIgNi4yLTYuMiAxNi40IDAgMjIuNnMxNi40IDYuMiAyMi42IDBsMTQ0LTE0NHoiLz48L3N2Zz4=");
        mask-size: contain;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        mask-position: center;
        -webkit-mask-position: center;
        width: 0px;
        height: 12px;
        margin-right: 6px;
        margin-left: -4px;
        background-color: #35b6b4;
        display: inline-block;
        position: relative;
        top: 1px;
        transition: 300ms;
    }

    .ysd-services-formula a:hover:before {
        width: 12px;
    }

    .ysd-service-branding a:hover,
    .ysd-service-coding a:hover,
    .ysd-service-marketing a:hover,
    .ysd-service-groei a:hover {
        line-height: 2.4;
        color: #35b6b4;
        opacity: 1;
        font-weight: 500;
        -webkit-font-smoothing: antialiased;
    }

    .ysd-service-coding a:hover {
        color: #5aa1d8;
    }

    .ysd-service-coding a:before {
        background-color: #5aa1d8;
    }

    .ysd-service-marketing a:hover {
        color: #f39325;
    }

    .ysd-service-marketing a:before {
        background-color: #f39325;
    }

    .ysd-service-groei a:hover {
        color: #D72650;
    }

    .ysd-service-groei a:before {
        background-color: #D72650;
    }
}

@media(max-height:800px) {
    .ysd-services {
        display: none;
    }
}