/* Hurricane Two - Expression Web 4 vriendelijke versie
   Bewust gemaakt zonder CSS Grid, Flexbox, CSS-variabelen of moderne layout-technieken.
   Daardoor blijft de ontwerpweergave in Microsoft Expression Web 4 veel netter. */
html, body { margin:0; padding:0; }
body { font-family: Arial, Helvetica, sans-serif; color:#10142a; background:#073caa; background-image:linear-gradient(135deg,#073caa 0%,#0b58e6 35%,#ffffff 35%,#ffffff 38%,#e9253f 38%,#e9253f 70%,#ffd21e 70%,#ffd21e 100%); background-attachment:fixed; font-size:16px; line-height:1.55; }
a { color:#0747c8; }
.wrapper { width:960px; margin:0 auto; }
.header { background:#091538; color:white; border-bottom:6px solid #ffd21e; }
.header-inner { width:960px; margin:0 auto; padding:18px 0 16px 0; }
.logo { float:left; color:white; text-decoration:none; font-size:42px; line-height:34px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; }
.logo span { display:block; color:#ffd21e; font-size:23px; letter-spacing:8px; }
.nav { float:right; padding-top:14px; }
.nav a { display:inline-block; color:#ffffff; background:#e9253f; text-decoration:none; font-weight:bold; padding:9px 13px; margin-left:5px; border-radius:18px; }
.nav a:hover { background:#ffd21e; color:#091538; }
.clear { clear:both; }
.hero, .box, .card, .page-title, .video-box { background:#ffffff; border-radius:18px; padding:26px; margin:24px 0; box-shadow:0 8px 24px rgba(0,0,0,0.20); border:1px solid #eeeeee; }
.page-title { border-top:8px solid #ffd21e; }
.kicker { color:#0747c8; font-weight:bold; text-transform:uppercase; letter-spacing:2px; margin:0 0 8px 0; }
h1 { font-size:46px; line-height:48px; margin:5px 0 12px 0; color:#10142a; }
h2 { font-size:28px; margin:6px 0 12px 0; color:#0747c8; }
h3 { font-size:21px; margin:16px 0 6px 0; color:#0747c8; }
.lead { font-size:21px; color:#27304c; }
.button { display:inline-block; background:#e9253f; color:white !important; text-decoration:none; font-weight:bold; padding:11px 18px; border-radius:22px; margin:5px 6px 5px 0; }
.button.blue { background:#0747c8; }
.hero-text { float:left; width:500px; }
.hero-photo { float:right; width:350px; text-align:center; }
.hero-photo img, .main-photo { width:350px; height:auto; border-radius:14px; border:4px solid #ffd21e; }
.card { float:left; width:310px; height:220px; margin-right:15px; box-sizing:border-box; }
.card-last { margin-right:0; }
.photo-card { float:left; width:210px; margin:0 18px 22px 0; background:#fff; border:1px solid #ddd; border-radius:12px; padding:10px; text-align:center; box-shadow:0 5px 15px rgba(0,0,0,.16); }
.photo-card img { width:190px; height:140px; object-fit:cover; border:1px solid #ccc; }
.photo-card a { text-decoration:none; font-weight:bold; }
.side-menu { float:left; width:210px; background:#fff; border-radius:14px; padding:15px; margin:0 20px 20px 0; box-shadow:0 8px 20px rgba(0,0,0,.18); }
.side-menu a { display:block; padding:9px; text-decoration:none; font-weight:bold; border-bottom:1px solid #eee; }
.info-main { float:left; width:675px; }
.price-card { float:left; width:300px; height:220px; margin:0; background:#fff; border-radius:16px; padding:20px; box-shadow:0 8px 20px rgba(0,0,0,.18); border-top:7px solid #ffd21e; box-sizing:border-box; }
.price-card + .price-card { margin-left:30px; }
.video-frame { float:left; width:570px; }
.video-text { float:right; width:310px; }
.video-frame iframe { width:560px; height:315px; border:0; }
.playlist-list { columns:3; -webkit-columns:3; -moz-columns:3; line-height:1.65; }
.playlist-list li { margin-bottom:2px; }
.legal p, .legal li { line-height:1.7; }
.contact-left { float:left; width:440px; }
.contact-right { float:right; width:410px; }
.social-links a { display:inline-block; background:#0747c8; color:white !important; text-decoration:none; font-weight:bold; padding:8px 12px; margin:5px 4px 5px 0; border-radius:18px; }
.social-links a:nth-child(2) { background:#e9253f; }
.social-links a:nth-child(3) { background:#111111; }
.footer { background:#091538; color:white; padding:24px; margin-top:30px; border-top:6px solid #ffd21e; }
.footer a { color:#ffd21e; }
.footcol { float:left; width:285px; margin-right:20px; }
.copy { text-align:center; color:#dddddd; margin-top:18px; }
@media only screen and (max-width:980px) { .wrapper,.header-inner{width:92%;} .logo,.nav,.hero-text,.hero-photo,.card,.price-card,.video-frame,.video-text,.side-menu,.info-main,.contact-left,.contact-right,.footcol{float:none; width:auto; height:auto; margin-right:0; margin-left:0;} .nav{padding-top:15px;} .nav a{margin:3px;} h1{font-size:34px; line-height:38px;} .hero-photo img,.main-photo{width:100%; max-width:350px;} .photo-card{width:42%;} .photo-card img{width:100%; height:auto;} .video-frame iframe{width:100%; height:260px;} .playlist-list{columns:1;} }

/* Extra aanpassingen: zichtbare headerfoto en sfeerfoto's per pagina */
.site-photo-header { background:#ffffff; padding:14px; margin:22px auto; border-radius:18px; box-shadow:0 8px 24px rgba(0,0,0,0.20); border-bottom:7px solid #ffd21e; text-align:center; }
.site-photo-header img { width:760px; height:400px; max-width:100%; border:0; display:block; margin:0 auto; }
.photo-strip { background:#ffffff; border-radius:18px; padding:22px; margin:24px 0; box-shadow:0 8px 24px rgba(0,0,0,0.20); border-top:7px solid #e9253f; }
.photo-strip h2 { margin-top:0; }
.sfeer-photo { float:left; width:285px; margin:0 18px 14px 0; text-align:center; }
.sfeer-photo img { width:270px; height:180px; object-fit:cover; border:4px solid #ffd21e; border-radius:12px; }
.video-note { font-size:14px; color:#555; }
@media only screen and (max-width:980px) { .sfeer-photo{float:none;width:auto;margin-right:0;} .sfeer-photo img{width:100%; max-width:300px; height:auto;} .site-photo-header img{height:auto;} }

/* Compact menu op telefoon */
@media only screen and (max-width: 600px) {
    .nav {
        width: 100%;
        text-align: center;
        white-space: nowrap;
    }

    .nav a {
        padding: 9px 8px;
        margin: 2px 1px;
        font-size: 15px;
        border-radius: 18px;
    }
}
/* BEGIN MOBIELE HEADER HURRICANE TWO
   Plaats dit helemaal onderaan assets/css/expression.css */
@media only screen and (max-width: 600px) {

    .header-inner {
        padding-top: 12px;
        padding-bottom: 10px;
        text-align: center;
    }

    .logo {
        float: none;
        display: block;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 0;
        font-size: 31px;
        line-height: 36px;
        letter-spacing: 1px;
        white-space: nowrap;
        text-align: center;
    }

    .logo span {
        display: inline;
        margin-left: 7px;
        font-size: 31px;
        line-height: 36px;
        letter-spacing: 1px;
    }

    .nav {
        float: none;
        width: 100%;
        padding-top: 0;
        text-align: center;
        white-space: nowrap;
    }

    .nav a {
        display: inline-block;
        padding: 8px 7px;
        margin: 2px 0;
        font-size: 14px;
        line-height: 20px;
        border-radius: 18px;
    }
}
/* EINDE MOBIELE HEADER HURRICANE TWO */

header,
.header,
.site-header,
nav {
    border-bottom-width: 3px !important;
}


/* Footer: sociale knoppen op laptop netjes naast elkaar */
.footer .social-links {
    white-space: nowrap;
}

.footer .social-links a {
    padding: 7px 9px;
    margin: 5px 2px 5px 0;
    font-size: 14px;
}


/* Mobiel: kostenblokken exact onder elkaar uitlijnen */
@media only screen and (max-width:980px) {
    .price-card + .price-card {
        margin-left:0;
    }
}