/*
Theme Name: De Molen Reclame
Author: Stijn ter Keurs
*/

/* Default */

html {
    overflow-x: hidden;
    scroll-behavior: smooth
}

body {
    margin: 0;
    padding: 0;
    background-image: url(/assets/img/shared/background.jpg);
    background-size: 110%;
    overflow: hidden;
}

.Loader {
    display: unset !important;
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    position: absolute;
    top: 50%;
    z-index: 99;
    left: 0;
    right: 0;
    margin: 0 auto;
}



@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@font-face {
    font-family: 'Norwester';
    src: url(/assets/fonts/Norwester/Norwester-Regular.eot);
    src: url(/assets/fonts/Norwester/Norwester-Regular.eot?#iefix) format('embedded-opentype'),
    url(/assets/fonts/Norwester/Norwester-Regular.woff2) format('woff2'),
    url(/assets/fonts/Norwester/Norwester-Regular.woff) format('woff'),
    url(/assets/fonts/Norwester/Norwester-Regular.ttf) format('truetype'),
    url(/assets/fonts/Norwester/Norwester-Regular.svg#Norwester-Regular) format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

nav div.Logo {
    z-index: 99;
    height: auto;
    background-image: url(/assets/img/shared/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
}

/* Typography */
h1, h2 {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
}

h1 span, h2 span {
    color: #790d00;
}

section.Header h1 {
    font-size: 6.5rem;
}

section.Content h2 {
    font-family: 'Norwester', serif;
    color: rgba(0, 0, 0, 0.87);
    font-size: 7rem;
    margin-bottom: 0.6em;
}

h5 {
    font-family: 'Kaushan Script', cursive;
    color: #790d00;
}

p, section.Footer a, nav a {
    font-family: 'Roboto Slab', serif;
    font-weight: 600 !important;
    font-size: 18px;
    text-align: center;
    color: rgba(0, 0, 0, 0.87) !important;
}

a {
    color: #790d00;
}

input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #790d00;
    -webkit-box-shadow: 0 1px 0 0 #790d00;
    box-shadow: 0 1px 0 0 #790d00;
}

input:not([type]):focus:not([readonly]) + label, input[type=text]:not(.browser-default):focus:not([readonly]) + label, input[type=password]:not(.browser-default):focus:not([readonly]) + label, input[type=email]:not(.browser-default):focus:not([readonly]) + label, input[type=url]:not(.browser-default):focus:not([readonly]) + label, input[type=time]:not(.browser-default):focus:not([readonly]) + label, input[type=date]:not(.browser-default):focus:not([readonly]) + label, input[type=datetime]:not(.browser-default):focus:not([readonly]) + label, input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label, input[type=tel]:not(.browser-default):focus:not([readonly]) + label, input[type=number]:not(.browser-default):focus:not([readonly]) + label, input[type=search]:not(.browser-default):focus:not([readonly]) + label, textarea.materialize-textarea:focus:not([readonly]) + label {
    color: #000;
}

/* Elements */
.navbar-fixed {
    z-index: 998;
}

img {
    pointer-events: none;
}

div.card-title {
    font-family: 'Norwester', serif;
    text-transform: uppercase;
    text-align: left;
    margin-bottom: unset;
}

div.divider {
    background-color: unset !important;
}

div.Divider {
    position: absolute;
    width: 100vw;
    height: 135px;
    background-image: url(/assets/img/shared/divider.png);
    background-size: cover;
    background-repeat: no-repeat;
}

div.Container {
    max-width: 1180px;
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

section.Content div.Container:nth-child(2),
section.Websites div.Container,
section.Webshops div.Container,
section.Dashboards div.Container,
section.Social div.Container {
    max-width: 876px;
}

section.Websites div.Container p,
section.Websites div.Container h1,
section.Websites div.Container h2,
section.Webshops div.Container p,
section.Webshops div.Container h1,
section.Webshops div.Container h2,
section.Dashboards div.Container p,
section.Dashboards div.Container h1,
section.Dashboards div.Container h2,
section.Social div.Container p,
section.Social h1,
section.Social div.Container h2 {
    text-align: left !important;
}

div.ClearBoth {
    clear: both;
}

/* Form input */
input {
    border-bottom: 1px solid #1b1b1b !important;
}

div.input-field label {
    color: #1b1b1b;
    font-family: 'Roboto Slab', serif !important;
    font-weight: 600 !important;
    font-size: 14px;
}

textarea {
    border-bottom: 1px solid #1b1b1b !important;
}

button.btn button.btn-large .btn:hover, .btn-large:hover, .btn-small:hover {
    background-color: #790d00 !important;
}

/* Vendors */
.owl-carousel .owl-stage-outer {
    overflow: visible;
}

/* Laptop */
@media only screen and (max-width: 1200px) {

    h1 {
        font-size: 3rem;
        /*text-align: center !important;*/
    }

}

@media screen and (max-width: 786px) {

    section.Header svg {
        display: none;
    }

    section.Header h1 {
        font-size: 80px !important;
    }

}

/* S */
@media screen and (max-width: 600px) {

    p {
        font-size: 16px;
    }

    h1 {
        font-size: 3.2rem;
        text-align: center !important;
    }

    section.Header h1 {
        font-size: 4.25rem !important;
    }

    section.Content h2 {
        font-size: 5.4rem !important;
    }

    div.Container {
        width: 90%;
    }

}

@media screen and (max-width: 600px) {

    h1 {
        font-size: 3.2rem;
        text-align: center !important;
    }

    section.Header h1 {
        font-size: 3.75rem !important;
    }

    section.Content h2 {
        font-size: 5rem !important;
    }

}

@media screen and (max-width: 450px) {

    section.Header h1 {
        font-size: 42px !important;
    }

}
ul#slide-out {
    background-image: url(/assets/img/shared/background.jpg);
    background-size: 110%;
    overflow-x: hidden;
}

ul#slide-out li:first-child {
    height: 250px;
}

ul#slide-out div.Logo {
    background-image: url(/assets/img/shared/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: 100%;
    height: 250px;
}

ul#slide-out li > a {
    font-size: 18px;
    height: 48px;
    font-family: 'Norwester', serif;
    text-transform: uppercase;
}

@media screen and (min-width: 993px) {

    .Trigger {
        display: none;
    }

}