*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: 'Exo 2', sans-serif; font-size: 12pt; -webkit-font-smoothing: antialiased; }
.cb { clear: both; }
.left { float: left; }
.right { float: right; }

a { color: white; }

.desktop { display: table; }
.desktopb { display: block; }
.mobile { display: none; }
.mobileb { display: none; }

.section { width: 100%; }
.darker { background-color: rgba( 0,0,0,0.2 ); }
.content { max-width: 1024px; margin: 0 auto; padding: 50px 0; }
.content .title { font-size: 18pt; text-align: center; padding: 5px 0; background-color: rgba( 0,0,0,0.4 ); margin-bottom: 30px; }
.content .subtitle { font-size: 16pt; text-align: left; padding: 5px 0; color: white; margin-bottom: 10px; text-decoration: underline; }

.threec { -webkit-column-count: 3; -webkit-column-gap: 60px; -moz-column-count: 3; -moz-column-gap: 60px; column-count: 3; column-gap: 60px; }
.threecres { -webkit-column-count: 3; -webkit-column-gap: 60px; -moz-column-count: 3; -moz-column-gap: 60px; column-count: 3; column-gap: 60px; }
.twoc { -webkit-column-count: 2; -webkit-column-gap: 60px; -moz-column-count: 2; -moz-column-gap: 60px; column-count: 2; column-gap: 60px; }
.spacerb { margin-bottom: 30px; }
.dib { display:inline-block }
.block { width: 33%; float: left; }

.flexslider { position: relative; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; box-shadow: 0 0; -webkit-box-shadow: 0 0; -moz-box-shadow: 0 0; -o-box-shadow: 0 0;}
.flexslider .flex-direction-nav .flex-prev { left: 5px; }
.flexslider .flex-direction-nav .flex-next { right: 5px; }

#navigation {background-color: rgba(34,34,34,0.9); position: fixed; top: 0; z-index: 15; text-align: center; color: white;}
#navigation .content { padding: 0; position: relative; }
#navigation ul { list-style: none;padding: 15px 0; margin: 0 auto;/* background-color: rgba( 0,0,0,0.0 ); */}
#navigation ul li { float: left;  }
#navigation ul li[rel="introduction"] { width: 8%; }
#navigation ul li[rel="house"] { width: 10%; }
/*#navigation ul li[rel="garden"] { width: 6%; }*/
#navigation ul li[rel="environment"] { width: 11%; }
#navigation ul li[rel="pictures"] { width: 9%; }
#navigation ul li[rel="prices"] { width: 10%; }
#navigation ul li[rel="availability"] { width: 18%; }
#navigation ul li[rel="reservation"] { width: 12%; }
#navigation ul li[rel="contact"] { width: 14%; }
#navigation ul li a { color: white; text-decoration: none;font-size: 12pt;}
#navigation ul li a.active { text-decoration: underline; }
#navigation ul li a:hover { text-decoration: underline; }

.contact { color: #ffffff; text-align: left; font-size: 10pt; padding: 5px 10px; font-weight: bold; background-color: rgba( 0,0,0,0.0 ); }
.contact .disabled { font-weight: normal; }
.contact a { color: #ffffff; text-decoration: none; }
.contact a:hover { text-decoration: underline; }

#header #email
{
    clear: right;
    float: right;
    color: #ffffff;
}

#slogan .content { padding: 0; }
#slogan .slogan {padding: 55px 50px 0 0; width: 100%; text-align: right; color: #0a80ba;font-size: 13pt; font-style: italic; letter-spacing: -1px; text-shadow: 1px 0 #dddddd;}

#navigation_mobile { background-color: #0a80ba; position: fixed; top: 0; z-index: 10; color: white; display: none; padding: 10px 0; width: 100%; }

#teaser { margin-top: 0; }
#teaser .flexslider { margin: 0 0 10px; }
#teaser .flexslider .flex-control-nav { bottom: 0; }
#teaser .flexslider .flex-viewport ul { margin: 0; padding: 0; list-style: none; }

#introduction {background-color: rgba( 10, 128, 186, 0.8 );color: white;}

#house { background-image: url("../images/front/duinen2.jpg"); background-size: cover; background-attachment: fixed; color: white; }
#garden { background-color: rgba( 10, 128, 186, 0.8 ); color: white; }
#environment { background-image: url("../images/front/vuurtoren2.jpg"); background-size: cover; background-attachment: fixed; color: white; }

#pictures { background-color: rgba( 10, 128, 186, 0.8 ); color: white; }
#pictures .group { float: left; width: 32%; position: relative; cursor: pointer; margin-right: 20px; margin-bottom: 20px; background-color: white; }
#pictures .group.last { margin-right: 0px; }
#pictures .group .selected { width:100%; height:100%; position: absolute; top: 0; left: 0; display: none; }
#pictures .group:hover .selected { background-color: rgba( 256, 256, 256, 0.5 ); display: block; }
#pictures .group img { max-width:100%; height: 175px; display: block; }
#pictures .group .title { margin-bottom: 0; position: absolute; bottom: 15px; left: 0; background-color: rgba( 0,0,0,0.5); width: 100%; padding: 5px; }
#pictures .flexslider { margin: 0 0 10px; }
#pictures .carousel { background-color: transparent; }
#pictures .carousel li { margin-right: 3px; }
#pictures .carousel img { display: block; opacity: .7; cursor: pointer; background-color: white; }
#pictures .carousel img:hover { opacity: 1; }
#pictures .carousel .flex-active-slide img { opacity: 1; cursor: default; }

#prices { background-color: rgba( 10, 128, 186, 0.8 ); color: white; }
#prices table { width: 100%; border-spacing: 5px; padding: 0; }
#prices table td { padding: 5px }
#prices table td.prijzen {}
#prices table td.prijzenhigh { font-weight: bold; background-color: rgba( 255,255,255,0.3 ); text-align: center; }
#prices table td.prijzenlow { background-color: rgba( 255,255,255,0.3 ); }

#availability { background-color: rgba( 0, 0, 0, 0.7 ); color: white; }

#availability #dayrow { overflow: hidden; }
#availability .monthrow { overflow: hidden; margin: 0 0 10px 0; display:inline-block; }

#availability .intro { color: white; padding: 2px 2px 2px 0; white-space: nowrap; font-size: 12pt; }
#availability .day { float: left; width: 14%; color: white; text-align: center; }
#availability .day .box { margin: 2px; padding: 2px; }
#availability .day.red .box { background-color: #FF2222 }
#availability .day.red.weekend .box { background-color: #990000; }
#availability .day.green .box { background-color: #0a80ba; }
#availability .day.green.weekend .box { background-color: #0a5a8a; }
#availability .day.long { width: 18%; }
#availability #dayrow .day .box { background-color: rgba( 0,0,0,0.3 ); }

#reservation { background-image: url("../images/front/pier2.jpg"); background-size: cover; background-attachment: fixed; color: white; }
#reservation iframe { height: 700px; }

#reservationwrapper { color: white; }
div.reservation { width: 100%; padding: 2px; border-spacing: 0; border-collapse: separate; }
div.reservation div.label { color: white; margin-bottom: 3px; }
div.reservation div.input input { width: 100%; font-size: 12pt; color: white; font-weight: bold; padding: 7px; border-radius: 3px; border: 1px solid white; background-color: rgba( 256,256,256,0.2 ); }
div.reservation div.input select { width: 100%; font-size: 12pt; color: white;; font-weight: bold; padding: 7px; border-radius: 3px; border: 1px solid white; background-color: rgba( 256,256,256,0.2 ); }
div.reservation div.input textarea { width: 100%; font-size: 12pt; color: white;; font-weight: bold; padding: 7px; border-radius: 3px; border: 1px solid white; background-color: rgba( 256,256,256,0.2 ); }
div.reservation div.submit { text-align: right; margin-bottom: 45px; }
div.reservation div.submit input[type=submit] { font-size: 14pt; padding: 5px;  }
div.reservation div.error { margin-bottom: 10px; color: #ff1212; font-weight: bold; }

#reservationok { text-align: center; }
#reservationok .label { width: 100%; }
#reservationok .value { font-weight: bold; font-size: 14pt; width: 100%; margin-bottom: 10px; }

#contact { background-color: rgba( 10, 128, 186, 0.9 ); color: white; }

#footer { background-color: #0a80ba; color: white; }
#footer .footer { margin: 0 auto; font-size: 10pt; text-align: center; padding: 10px 0; background-color: rgba( 0,0,0,0.3 ); }
#footer .footer a { color: #ffffff; font-style: italic; font-weight: normal; text-decoration: none; }
#footer .footer a:hover { text-decoration: underline; }
#footer .footer a.creator { color: #ffA500; font-weight: bold; }

@media only screen and (max-device-width : 1024px)
{
    .content { padding: 50px 20px;}
    .darker { background-color: inherit; }
    #reservation iframe { height: 730px; }
}

@media only screen and (max-device-width : 800px)
{
    #navigation ul li a { font-size: 9pt; }
    .darker { background-color: inherit; }

}

@media only screen and (max-device-width : 768px)
{
    .threecres { -webkit-column-count: 2; -webkit-column-gap: 0; -moz-column-count: 2; -moz-column-gap: 0; column-count: 1; column-gap: 0; }
}

@media only screen and (max-device-width : 667px)
{
    .desktop { display: none; }
    .desktopb { display: none; }
    .mobile { display: table; }
    .mobileb { display: block; }
    .content { padding: 20px; }
    .darker { background-color: inherit; }

    #navigation { display: none; }
    #navigation .content {}
    #navigation_mobile { display: block; padding-left: 20px; font-size: 18pt; }
    #navigation_mobile img { vertical-align: middle; }
    #navigation { text-align: left; }
    #navigation ul { padding: 20px; }
    #navigation ul li { float: none; padding: 3px 0 3px 10px; border-bottom: 1px solid grey; }
    #navigation ul li[rel="introduction"] { width: 100%; }
    #navigation ul li[rel="house"] { width: 100%; }
    #navigation ul li[rel="garden"] { width: 100%; }
    #navigation ul li[rel="environment"] { width: 100%; }
    #navigation ul li[rel="pictures"] { width: 100%; }
    #navigation ul li[rel="prices"] { width: 100%; }
    #navigation ul li[rel="availability"] { width: 100%; }
    #navigation ul li[rel="reservation"] { width: 100%; }
    #navigation ul li[rel="contact"] { width: 100%; }
    #navigation ul li a { font-size: 14pt; }
    #navigation ul li.sep { display: none; }

    #slogan .slogan { font-size: 11pt; padding: 60px 10px 0 0; }

    .threec { -webkit-column-count: 1; -webkit-column-gap: 0; -moz-column-count: 1; -moz-column-gap: 0; column-count: 1; column-gap: 0; }
    .threecres { -webkit-column-count: 1; -webkit-column-gap: 0; -moz-column-count: 1; -moz-column-gap: 0; column-count: 1; column-gap: 0; }
    .twoc { -webkit-column-count: 1; -webkit-column-gap: 0; -moz-column-count: 1; -moz-column-gap: 0; column-count: 1; column-gap: 0; }

    #reservation iframe { height: 1400px; }
    #availability .day { width: 13%; }
    #availability .day.long { width: 33%; }
}

@media only screen and (max-device-width : 340px)
{
    #navigation_mobile { font-size: 16pt; }
}

/*Reservation module*/

.title3 { font-size: 18px; font-weight: bold; border-bottom: 1px dotted #0a80ba; padding: 0px 0px 5px 0; }
.inline .title3 {  font-size: 18px;  font-weight: bold;  border-bottom:1px dotted #0a80ba;  padding: 0px 0px 5px 0;  }
.inline a:link, .inline a:visited { color:#0a80ba; font-weight:normal; text-decoration:none; }
.inline a:hover { color:#7B8A2B; font-weight:normal; text-decoration:underline; }
.rowP { color: #992222; }
.rowA { color: #888888; }
.inline .error { color: #992222; }
.inline .message { color: #222299; }
.inline textarea, .inline input, .inline select { color: #333333; font-size: 12px; width: 250px; }
.inline textarea.extra, .inline input.extra, .inline select.extra { width: 500px; }