@font-face {font-family: ScalaSans; src: url(/fonts/ScalaSansWebPro.woff);}
@font-face {font-family: ScalaSansBlack; src: url(/fonts/ScalaSansWebPro-Black.woff);}
@font-face {font-family: ScalaSansBold; src: url(/fonts/ScalaSansWebPro-Bold.woff);}
@font-face {font-family: ScalaSansCond; src: url(/fonts/ScalaSansWebPro-Cond.woff);}
@font-face {font-family: ScalaSansLight; src: url(/fonts/ScalaSansWebPro-Light.woff);}

body {background: url(https://ninohooymans.nl/files/background.jpg);background-size: cover;background-position: top;overflow: hidden;}

p, a, h1, h2, h3, h4, h5 {margin: 0; padding: 0;}

.menu {display: flex; margin: auto; position: absolute; top: 50%; width: 100%; max-width: 700px; left: calc(50% - 350px); -ms-transform: translateY(-50%); transform: translateY(-50%);}
.menu .l-menu {display: flex; flex-wrap: wrap; align-content: center; width: 50%;border-right: solid 2px white;}
.menu .l-menu .collectie{display: block;color: #131313;background: #bea060;text-decoration: none;font-weight: 500;font-size: 18px;padding: 20px;border-radius: 15px;text-align: center;text-transform: uppercase;width: fit-content;cursor: pointer;transition: 0.5s;margin: 0 49px 0 auto;box-shadow: 0 0 10px black;}
.menu .l-menu .collectie:hover {background: #ffffffc7; border: solid 1px #ffffffc7; color: #222; padding: 20px 30px;}
.menu .l-menu .tour {text-align: center; width: 100%; color: #fff; font-size: 30px; font-weight: 300; padding: 25px 0 0 0; margin: 0 25px 0 auto; text-decoration: none; text-shadow: 0px 0px 20px #000000;}
.menu .r-menu {width: 50%;}
.menu .r-menu .item {display: block;text-decoration: none;color: #fff;font-size: 30px;padding: 10px 0 10px 50px;border-left: solid 0px #ffffff;transition: 0.5s;cursor: pointer;text-shadow: 3px 3px 10px #000000;}
.menu .r-menu .item:hover {border-left: solid 5px #ffffff;}
.menu .r-menu .socials {padding: 10px 0 10px 50px;}
.menu .r-menu .socials a {font-size: 30px;color: #fff;margin-right: 10px;text-shadow: 0 0 10px black;}





.toggleNewsletter {display: none; position: fixed; bottom: 0; left: calc(50% - 90px); background: #dd1e26; padding: 15px; color: #fff; font-weight: 300; width: 150px; text-align: center; border-radius: 10px 10px 0 0; text-decoration: none;}
.newsletter {position: absolute; bottom: 0; left: 50px; background: #dd1e26; padding: 25px; max-width: 450px;}
.newsletter h2 {color: #fff; font-size: 24px; font-weight: 500;}
.newsletter span {display: block; color: #fff; font-size: 16px; font-weight: 300; margin: 15px 0;}
.newsletter .flex {display: flex; justify-content: space-between;}
.newsletter .flex input {font-family: 'Montserrat', sans-serif; padding: 10px; width: calc(70% - 25px); height: fit-content; border: 0; outline: none; font-size: 16px;}
.newsletter .flex .button {font-family: 'Montserrat', sans-serif; padding: 10px; background: #fff; border: 0; width: calc(30% - 15px); margin-top: 0; outline: none; cursor: pointer; font-weight: 300;}







/* MOBILE LOGO */
.logo {display: none;margin: auto;background: #fff;width: 350px;max-width: 75%;border-radius: 0 0 10px 10px;padding: 10px;}
.logo h1 {display: flex;flex-wrap:wrap;width: fit-content;margin: auto;font-family: 'ScalaSansLight';font-size: 40px;text-shadow: 0 0 25px #ffffff;}
.logo h1 .red {color: #dd1e26; font-family: ScalaSansBold; margin: 0 0 0 auto;}
.logo h1 .white {color: #949494; margin: 0 auto 0 0;}
.logo h1 .sub {font-family: ScalaSansLight; font-size: 20px; width: 100%; margin: auto; color: #949494; text-align: center;}





/* MESSAGE */
.message {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 20px);
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    padding: 15px 10px;
    background: #bea060;
    color: #fff;
    font-size: 18px;
    font-weight: 300;
    border-bottom: solid 3px #000;
    box-shadow: 0px -1px 20px #4e4e4e;
    z-index: 99;
}

.message.hidden {
    display: none;
}

.message img {
    width: 250px;
}

.message span {
    text-align: center;
}





/* TABLET */
@media (min-width: 801px) and (max-width: 1024px) {
    .logo {display: block;}
}





/* MOBILE */
@media (max-width: 800px) {
    .logo {display: block;}
    .menu {flex-wrap: wrap; margin: auto; position: unset; top: 0; width: 100%; max-width: unset; left: unset; -ms-transform: unset; transform: unset;}
    .menu .l-menu {width: 100%; border: 0;}
    .menu .l-menu .collectie {margin: 45px auto 35px auto;}
    .menu .r-menu {width: 100%; text-align: center;}
    .menu .r-menu .item {padding: 10px 0;}
    .menu .r-menu .socials {padding: 50px 0;}

    .newsletter {display: none;}

    .toggleNewsletter {display: block;}

    .message {
        position: unset;
        flex-direction: column;
    }
}





/* IE */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .menu {max-width: 800px; left: calc(50% - 400px);}
    .menu .l-menu .collectie {margin-right: 50px;}
    .menu .l-menu .collectie:hover {background: #fff; border: solid 1px #fff; color: #222; padding: 20px 30px;}
}