html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    font-family: 'Raleway', sans-serif;
    color: #0c0c0c;
}

a {
    color: #0c0c0c;
}

    a:hover {
        text-decoration: none;
        color: #0c0c0c;
    }

main {
    padding-top: 110px;
}

h1, h2, h3, h4, h5 {
    font-family: 'Arvo', serif;
    color: #352c78;
}

h1 {
    padding-top: 5px;
    padding-bottom: 5px;
    /*background: url(../img/cadeau1.gif) no-repeat 0 0 #FFFFFF;
    padding: 10px 0 0 50px;
    margin: 5px 0 8px 0px;*/
}

h2 {
    padding-top: 5px;
    padding-bottom: 5px;
    /*background: url(../img/cadeau2.gif) no-repeat 0 0 #FFFFFF;
    padding: 10px 0 0 50px;
    margin: 5px 0 8px 0px;*/
}

.fold {
    background-image: url(/img/header.jpg);
    background-position: center;
    background-attachment: fixed;
    padding: 40px 0px 40px 0px
}

    .fold h1 {
        color: #fff;
        text-shadow: 0px 0px 5px #000;
    }

.intro {
    background-image: url(/img/pepernotenachter.png);
    background-position: center;
    background-attachment: fixed;
    padding: 60px 0px 60px 0px;
    text-align: center;
}

    .intro h1 {
        font-size: 56pt;
    }

    .intro h1 {
        color: #fff;
        text-shadow: 0px 0px 5px #000;
    }

.jumbotron {
    font-family: 'Arvo', serif;
    font-size: 56pt;
    color: #fff;
    text-shadow: 0px 0px 5px #000;
}

.nomargin {
    margin: 0 !important;
}

.lightblock {
    margin-top: 30px;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 30px;
}

.darkblock {
    color: #fff;
    margin-top: 30px;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 30px;
}

    .darkblock h1 {
        color: #fff;
    }

    .darkblock h2 {
        color: #fff;
    }

    .darkblock h3 {
        color: #fff;
    }

    .darkblock a {
        color: #fff;
    }

        .darkblock a:hover {
            text-decoration: none;
            color: #fff;
        }

    .darkblock input[type=submit], .darkblock button[type=submit] {
        background: #fff;
        color: #352c78;
        font-family: 'Arvo', serif;
        border: none;
        border-radius: 10px;
        padding: 5px;
        border: 1px solid #fff;
        transition: 1s;
        cursor: pointer;
    }

        .darkblock input[type=submit]:hover, .darkblock button[type=submit]:hover {
            background: #352c78;
            color: #fff !important;
            border: 1px solid #fff;
            transition: 1s;
        }

.display-block {
    display: inline-block;
}

.transpwhite {
    background: rgba(255,255,255,0.8);
}

.purple {
    background: #352c78;
}

.purpleborder {
    border: 2px solid #352c78;
}

.yellow {
    background: #e8900c;
}

.blue {
    background: #008b92;
}

.red {
    background: #c61003;
}

.green {
    background: #008046;
}

.rooftop {
    background-image: url(/img/daken.png), -moz-linear-gradient(top, #221d4d, #352C78);
    background-image: url(/img/daken.png), -webkit-gradient(linear, left top, left bottom, from(#221d4d), to(#352C78));
    background-attachment: fixed;
    background-position: center bottom;
    background-repeat: repeat-x;
}

.book {
    padding: 0px;
    padding-bottom: 1px;
    width: 100%;
    max-width: 550px;
    height: 100%;
    background: #c61003;
    border-radius: 20px 4px 12px 32px;
    background-image: linear-gradient(to right,#7A0A02 35px, #580802 36px, transparent 36px);
}

.booktext {
    padding: 20px 20px 20px 50px;
}

.bookpages {
    margin: 0px 0px 6px 6px;
    padding-bottom: 6px;
    height: 52px;
    width: calc (100% - 6px);
    background: white;
    border-radius: 32px 0px 4px 32px;
    box-shadow: inset 4px 6px 0px 0px #E4E0CE;
    background-image: linear-gradient(to bottom, transparent 6px, #E4E0CE 8px, transparent 8px, transparent 12px, #E4E0CE 12px, transparent 14px, transparent 18px,#E4E0CE 18px, transparent 20px, transparent 24px, #E4E0CE 24px, transparent 26px, transparent 30px, #E4E0CE 30px, transparent 32px, transparent 36px, #E4E0CE 36px, transparent 38px, transparent 42px, #E4E0CE 42px, transparent 44px, transparent 48px, #E4E0CE 48px, transparent 50px);
}

.tilt-right {
    rotate: 3deg;
}

.tilt-left {
    rotate: -3deg;
}

.round-edge {
    border-radius: 20px;
}

.shadow {
    box-shadow: 10px 10px 10px rgba(0,0,0,0.25) !important;
}

.darkbutton {
    background: #fff;
    color: #352c78 !important;
    text-decoration: none;
    font-family: 'Arvo', serif;
    border: none;
    border-radius: 10px;
    padding: 5px 30px 5px 30px;
    border: 1px solid #fff;
    transition: 1s;
    cursor: pointer;
}

    .darkbutton:hover {
        background: #352c78;
        color: #fff !important;
        border: 1px solid #fff;
        transition: 1s;
    }

input[type=text], input[type=date], input[type=time], input[type=email], select, textarea, button, .hs-form-field {
    width: 100%;
    border-radius: 10px;
    padding: 5px;
    border: solid 1px #352c78;
    resize: none;
}
/* TODO: Sjoerd
    input::placeholder, textarea::placeholder {
        color: #000 !important;
    }
*/
.form-group {
    margin-top: 20px;
}

.custom-select {
    color: #352c78;
}

input[type=submit], button[type=submit] {
    background: #352c78;
    color: white;
    font-family: 'Arvo', serif;
    border: none;
    border-radius: 10px;
    padding: 5px;
    border: 1px solid #352c78;
    transition: 1s;
    cursor: pointer;
}

    input[type=submit]:hover, button[type=submit]:hover {
        background: #fff;
        color: #352c78;
        border: 1px solid #352c78;
        transition: 1s;
    }

.smallmargin {
    margin-top: 30px;
}

.smallmarginbottom {
    margin-bottom: 30px;
}

.topmargin {
    margin-top: 50px;
}

.bottommargin {
    margin-bottom: 50px;
}

.listmijter {
    list-style-image: url(/img/link_body.png);
}

.listpepernoot {
    list-style-image: url(/img/list_pepernoot.png);
}

.nolist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.centered {
    text-align: center;
}

.right {
    text-align: right;
}

.countdown {
    background: -moz-linear-gradient(top, #fff, #e2e2e2);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e2e2e2));
    padding: 5px 10px 5px 10px;
    color: #c61003;
    font-family: 'Arvo', serif;
    border-radius: 4px;
    font-size: 2em;
    font-weight: 700 !important;
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.4);
}

.footer {
    margin-top: 50px;
    padding-top: 30px;
    position: relative !important;
    background: #352c78;
    color: #fff;
    line-height: 40px !important;
}

    .footer h3 {
        color: #fff;
    }

    .footer a {
        color: #fff !important;
        text-decoration: none;
    }

        .footer a:hover {
            text-decoration: underline;
        }

.darkfooter {
    margin-top: 0px;
    padding-top: 0px;
    background: #221d4d;
    color: #fff;
}

    .darkfooter a {
        color: #fff !important;
        text-decoration: none;
    }

        .darkfooter a:hover {
            text-decoration: underline;
        }

.cta {
    color: #fff;
    background-image: url(/img/cta.jpg);
    background-position: center;
    padding: 40px 0px 40px 0px;
}

    .cta h2 {
        color: #fff;
    }

.menubar {
    background: #fff;
    position: fixed;
    height: 90px;
    z-index: 999;
    /*border-bottom: solid 1px #352c78;*/
}

.navbar {
    height: 90px;
    padding-top: 15px;
}

.nav-link-admin {
    background: #352c78;
    margin-left: 10px;
    border-radius: 10px;
    color: #fff !important;
    border: 1px solid #352c78;
}
    .nav-link-admin:hover {
        background: #fff;
        color: #352c78 !important;
        border: 1px solid #352c78;
        transition: 1s;
    }
.nav-link {
    background: #352c78;
    margin-left: 10px;
    border-radius: 10px;
    color: #fff !important;
    border: 1px solid #352c78;
}

    .nav-link:hover {
        background: #fff;
        color: #352c78 !important;
        border: 1px solid #352c78;
        transition: 1s;
    }

.dropdown-item {
    color: #352c78 !important;
    border-left: solid 1px #352c78;
}

    .dropdown-item:hover {
        background: #352c78;
        color: #fff !important;
    }

.dropdown-menu {
    border-radius: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

@media (max-width:992px) {
    .navbar-collapse {
        background: white;
        border-radius: 10px;
        border: 1px solid #352c78;
    }

    .menubar {
        height: 110px;
    }

    .nav-link {
        border: none;
        background: #fff;
        color: #352c78 !important;
        border-radius: 0px;
    }

        .nav-link:hover {
            background: #352c78;
            color: #fff !important;
            border: none;
            margin-right: 10px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

    .dropdown-menu {
        border: none;
    }
}

@media (min-width:992px) {
    .hs-logo-menu {
        margin-top: 40px;
    }
}

@media (min-width:576px) {
    .menubar {
        height: 110px;
    }
}

.hs-spreuk {
    margin-top: 100px;
    margin-bottom: 100px;
}

.hs-menu {
    width: 100%
}

.hs-menu-toggle {
    float: right;
    margin-top: -80px;
}

.hs-logo-menu {
    max-width: 80%;
}

.hs-pakjesavond-banner {
    text-align: center;
    background-color: #5A567B;
    color: white;
    margin-bottom: 5px;
    border-radius: 10px;
}

    .hs-pakjesavond-banner div {
        padding: 20px;
    }

.hs-btn-danger {
    background: #c61003;
}
    .hs-btn-danger:hover {
        color: #c61003 !important;
        border: 1px solid #c61003 !important;
        transition: 1s;
    }

.hs-input-btn-danger {
    background: #c61003 !important;
    margin-left: 10px;
    padding: 8px;
    border-radius: 10px;
    color: #fff !important;
    border: 1px solid #352c78;
    text-decoration: none;
}
    .hs-input-btn-danger:hover {
        background: white !important;
        color: #c61003 !important;
        border: 1px solid #c61003 !important;
        transition: 1s;
    }

.hs-inputasbutton {
    padding: 8px !important;
}

.hs-floatright {
    float: right;
}

.hs-floatleft {
    float: left;
}

.slogan1 {
    font-family: 'Arvo', serif;
    font-size: larger;
}

.slogan2 {
    font-family: 'Arvo', serif;
    font-size: xx-large;
}