/* ==========================================================================
   Fonts
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

img { max-width: 100%; }
ul, li { list-style: none; padding: 0; margin: 0; }
p { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6 { font-weight: normal; margin: 0; line-height: 1em; padding: 0; }
a { text-decoration: none; color: #DC1928; }
input[type="text"], input[type="email"] { -webkit-appearance:none; -webkit-border-radius:0; }

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* WebKit browsers */
	opacity:1;
}
input:-moz-placeholder, textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	opacity:1;
}
input::-moz-placeholder, textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
	opacity:1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* Internet Explorer 10+ */
	opacity:1;
}

/* ==========================================================================
   Responsive helpers
   ========================================================================== */

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.table{ display: table; width: 100%; height: 100%; }
.table-cell{ display: table-cell; vertical-align: middle; width: 100%; }

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

/* ==========================================================================
   General styles
   ========================================================================== */
html { }
body { font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace; font-size: 14px; color: #000; }
a, a:hover { color: #000; }

/* ==========================================================================
   Homepage
   ========================================================================== */
#main-wrapper { margin: 40px 0 10px; position: relative; }

header { top: 110px; position: absolute; left: 0; width: 227px; }
#menu { max-width: 95px; margin: 110px auto 0; }
#menu ul li { display: block; margin-bottom: 8px; }
#menu ul li.on a { font-weight: bold; text-transform: uppercase; letter-spacing: .5px; }

#main { min-height: 525px; padding-left: 360px; }

.contact-info { }
.contact-info h3 { font-weight: bold; font-size: 14px; margin-bottom: 15px; }

.slideshow-wrapper { margin-top: 120px; }
.slideshow-wrapper .caption { margin-top: 30px; font-size: 16px; }
.slideshow img { display: none; }



/* ==========================================================================
   Pages
   ========================================================================== */
/* clearfix */
.container:before, .container:after {content: ""; display: table;}
.container:after {clear: both;}
.item {float: left; margin-bottom: 5px;}
.item img {max-width: 100%; max-height: 100%; vertical-align: bottom;}
.first-item {clear: both;}

/* remove margin bottom on last row */
.last-row, .last-row ~ .item {margin-bottom: 0;}
.masonry .item span {position: absolute; padding: 4px 6px; opacity: 0; width: 100px;}
.masonry .item:hover span {opacity: 1; z-index: 1;}
.masonry .item {position: relative;}
.item a {display: block; position: relative; height: 100%;}
.masonry .item:hover img {opacity: 0.3; display: block;}

/*
.masonry .item a.Groen {background: #bae8c4;}
.masonry .item a.Geel {background: #ffdd61;}
.masonry .item a.Blauw {background: #619cff;}
.masonry .item a.Rood {background: #ff6161;}
*/

.masonry .item a.Groen {background: #cff0c2;}
.masonry .item a.Geel {background: #ffe993;}
.masonry .item a.Blauw {background: #c1ebe4;}
.masonry .item a.Rood {background: #f5cbc8;}
.masonry .item a.Oranje {background: #ffc485;}


.masonry .item a.transparant {background: transparent;}

.masonry .item:hover a.transparant img{opacity: 1;}
.cright {text-align: right;}
.slideshow-wrapper.slider-img div#alt-caption {width: 91%; margin-top: -20px; margin-bottom: 170px;}
.slideshow-wrapper.slider-img a#prev {font-weight: 600;}
.slideshow-wrapper.slider-img a#next {font-weight: 600; margin-left: 10px;}
.slideshow-wrapper.slider-img a#prev:hover, .slideshow-wrapper.slider-img a#next:hover, .slideshow-wrapper.slider-img a#prev:active, .slideshow-wrapper.slider-img a#next:active, .slideshow-wrapper.slider-img a#prev:focus, .slideshow-wrapper.slider-img a#next:focus {text-decoration: none;}
.slideshow-wrapper.slider-img .cycle-slideshow {margin-bottom: 8px;}
.slideshow-wrapper.slider-img .cycle-slideshow img {max-height: 100%;}
.slideshow-wrapper h3 {font-weight: bold; font-size: 14px; margin-bottom: 15px;}
.slideshow-wrapper h3 span {font-weight: normal;}
.slideshow-wrapper.about-contact h3 span {display: block; margin-top: 4px;}
.slideshow-wrapper.contact-area p {margin-bottom: 18px;}
.slideshow-wrapper.contact-area .row {margin-bottom: 28px;}
.slideshow-wrapper.contact-area {margin-bottom: 170px;}
.slideshow-wrapper.souk-more .intro {margin-bottom: 100px;}


/* ==========================================================================
   Media Queries
   ========================================================================== */
/*
 * Small desktop
 */
@media only screen and (max-width: 1400px) {
    header { width: 180px; }
    #main { padding-left: 280px; }
}
/*
 * Tablet
 */
@media only screen and (max-width: 992px) {

    body { font-size: 12px; }

    header { width: 150px; }
    #main { padding-left: 200px; }

    .contact-info h3 { font-size: 12px; }
    .slideshow-wrapper .caption { font-size: 14px; }


}
/*
 * Mobile
 */
@media only screen and (max-width: 767px) {

    header { position: relative; top: 0; width: 100%; overflow: hidden; }
    #logo { width: 113px; display: block; float: left; }
    #menu { float: right; margin: 0; }

    #main-wrapper { margin: 25px 0; }
    #main { padding-left: 0px; }

    .slideshow-wrapper { margin-top: 30px; margin-bottom: 40px; }
    .slideshow-wrapper .caption { margin-top: 15px; }

    .contact-info p { margin-bottom: 30px; }
	
	.slideshow-wrapper.contact-area .row > div {margin-bottom: 30px;}

}