/* 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:266px; min-height:150px; margin-right:15px; }
.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:266px; min-height:170px; margin-right:15px; background:#fff; border-radius:16px; padding:20px; box-shadow:0 8px 20px rgba(0,0,0,.18); border-top:7px solid #ffd21e; }
.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; margin-right: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;} }