html, body { overflow-x: hidden;  height: 100%; }
body { background: url(../images/achtergrond.jpg) no-repeat; background-size: cover; height: 100%; font-family: Arial, arial, sans-serif; position: relative; }

#default-addthis { height: 30px; }

h1 { margin: 0 0 20px 0; font-family: 'Exo', sans-serif; font-size: 24px; font-weight: bold; }
p { line-height: 23px; }

.jummy { display: none; }

#home-slideshow { margin-bottom: 30px; }
#home-slideshow img { width: 100%; height: auto; }

#content-container { width: 983px; margin: 0 auto; overflow: hidden; }

#content { width: 100%; min-height: 200px; background: #f31058; padding: 22px; color: #fff; margin-bottom: 20px; }
#sidebar { width: 100%; min-height: 200px; background: #eb6a3d; padding: 22px; }

#content a { color: #fff; font-weight: bold; }

.sidebar-nieuws-titel { color: #fff; line-height: 24px; font-size: 24px; font-family: 'Exo', sans-serif; font-weight: bold; margin-bottom: 20px; }
.sidebar-nieuws { list-style: none; margin: 0; padding: 0; }
.sidebar-nieuws-item { overflow: hidden; margin-bottom: 16px; }
.sidebar-nieuws-item:last-child { margin-bottom: 0; }
.sidebar-nieuws-item a { color: #fff; display: block; }
.sidebar-nieuws-item a:hover { text-decoration: none; color: #000; overflow: hidden; }
.sidebar-nieuws-item img { float: left; border: 4px solid #fff; margin: 3px 13px 0 0; }

.sidebar-nieuws-item.actief img { border-color: #000; }
.sidebar-nieuws-item.actief a { color: #000; }

.sidebar-contact-titel { color: #fff; line-height: 24px; font-size: 24px; font-family: 'Exo', sans-serif; font-weight: bold; margin-bottom: 20px; }
.sidebar-contact-form { color: #fff; }
.sidebar-contact-form input[type='text'] { width: 100%; height: 32px; line-height: 32px; border: 0; padding: 0 5px;  }
.sidebar-contact-form input[type='text'].error { border: 1px solid #000; }
.sidebar-contact-form input[type='submit'] { background: #594a51 url(../images/verzendenbg.png) no-repeat right 10px top 9px; height: 29px; text-align: left; color: #fff; padding: 0 30px 0 10px; float: right; border: 0; }


/** Nieuwsmodule **/
.nieuws-item { overflow: hidden; }
.nieuws-item img { border: 6px solid #fff; float: left; margin: 3px 20px 15px 0; }

/** Sieraden module **/
#hoofdcarousel { width: 100%; position: relative; height: 481px; background: #bfbfbf; }
#hoofdcarousel .itemscontainer { width:361000px;overflow:visible; }
#hoofdcarousel ul { position:relative; list-style: none; margin: 0; padding: 0; height: 481px;overflow:visible; }
#hoofdcarousel ul li { float: left; opacity: 0.2; position: relative;width:361px;overflow:visible; }
#hoofdcarousel ul li.active { opacity: 1; }

#hoofdcarousel ul li .info-knop { cursor: pointer; font-size: 16px; color: #fff; display: none; background: url(../images/meerinfoknop.png); height: 41px; width: 169px; padding: 0 0 0 40px; line-height: 38px; position: absolute; bottom: 0; left: 0; }
#hoofdcarousel ul li.active .info-knop { display: block; }
#hoofdcarousel ul li .info-container { position: absolute; top: 0; left: 0; height: 481px; background: #fff; z-index: 99; width: 983px; display: none; }

#mobile-hoofdcarousel { width: 100%; position: relative; height: 481px; background: #bfbfbf; }
#mobile-hoofdcarousel ul { list-style: none; margin: 0; padding: 0; height: 481px; }
#mobile-hoofdcarousel ul li { float: left; opacity: 0.2; position: relative; width: 361px; }
#mobile-hoofdcarousel ul li.active { opacity: 1; }

#mobile-hoofdcarousel ul li .info-knop { cursor: pointer; font-size: 16px; color: #fff; display: none; background: url(../images/meerinfoknop.png); height: 41px; width: 169px; padding: 0 0 0 40px; line-height: 38px; position: absolute; bottom: 0; left: 0; }
#mobile-hoofdcarousel ul li.active .info-knop { display: block; }
#mobile-hoofdcarousel ul li .info-container { position: absolute; top: 0; left: 0; height: 481px; background: #fff; z-index: 99; width: 983px; display: none; }

.sieraad-detail-image { width: 616px; height: 481px; float: left; }
.sieraad-detail { width: 367px; height: 481px; float: right; padding: 20px; position: relative; }
.sieraad-detail-titel { color: #ef3d41; font-size: 20px; font-weight: bold; font-family: 'Exo', sans-serif; margin-bottom: 10px; }

.content-scroll-wrapper { width: 326px; height: 220px; overflow-x: hidden; overflow-y: auto; position: relative; }
.content-scroll { width: 343px; height: 220px; }

.sieraad-detail-content-table { margin-bottom: 20px; width: 100%; }
.sieraad-detail-content-table tr { border-bottom: 1px solid #ccc; }
.sieraad-detail-content-table tr td { padding: 5px 10px 5px 0; }

.sieraad-detail-sluiten { cursor: pointer; font-size: 16px; color: #fff; position: absolute; bottom: 0; left: 0; background: url(../images/meerinfosluiten.png); width: 142px; height: 41px; padding: 0 0 0 40px; line-height: 38px; }
.sieraad-detail-reserveren { cursor: pointer; font-size: 16px; color: #fff; position: absolute; bottom: 0; right: 0; background: url(../images/meerinforeserveren.png); width: 224px; height: 41px; padding: 0 0 0 40px; line-height: 38px; }

.sieraad-detail-image-zoom { display: none; cursor: pointer; background: url(../images/zoom.png); width: 95px; height: 41px; position: absolute; left: 0; bottom: 0; }

.sieraad-detail-reserveer-form { display: none; color: #fff; width: 367px; height: 410px; position: absolute; top: 0; right: 0; background: #f31058; padding: 20px; }
.sieraad-detail-reserveer-form h1 { font-size: 20px; }
.sieraad-detail-reserveer-form p { text-align: right; }
.sieraad-detail-reserveer-form input[type="text"] { width: 100%; height: 32px; line-height: 32px; border: 0; padding: 0 5px; }
.sieraad-detail-reserveer-form input[type="text"].error { border: 1px solid #000; }
.sieraad-detail-reserveer-form textarea { width: 100%; height: 128px; border: 0; padding: 0 5px; }
.sieraad-detail-reserveer-form textarea.error { border: 1px solid #000; }
.sieraad-detail-reserveer-form input[type="submit"] { background: #594a51; height: 41px; text-align: center; color: #fff; padding: 0 20px; float: right; border: 0; }

.alg-vw { float: left; font-size: 12px; width: 200px; }
.alg-vw a { text-decoration: underline; color: #fff; font-weight: bold; }

.navigation-wrapper { height: 82px; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,0.4); position: relative; z-index: 10; margin-bottom: 30px;}
.navigation { width: 972px; margin: 0 auto; position: relative}
.jcarousel { overflow: hidden; position: relative}
.jcarousel ul { width:20000em; position: relative; list-style: none; margin: 0; padding: 0; }
.jcarousel li { float: left}

.carousel-navigation { height: 82px; width: 972px; margin: 0 auto; background:#fff; }
.carousel-navigation li { cursor:pointer; padding: 7px; }
.carousel-navigation li img { display: block; border: 2px solid #fff; }
.carousel-navigation li.active img { border-color: #ccc; }

.carousel-navigation .sieraad-item { opacity: 0.5; }
.carousel-navigation .sieraad-item.active { opacity: 1; }

/** Navigation carousel controls **/
.prev-navigation,
.next-navigation { display: block; position: absolute; width: 17px; height: 30px; color: #fff; text-decoration: none; text-shadow: 0 0 1px #000; font: 16px/29px Arial, sans-serif; }
.prev-navigation { left: -15px; top: 22px; text-indent: 6px; background: url(../images/prev.png); }
.next-navigation { right: -15px; top: 22px; text-indent: 20px; background: url(../images/next.png); }
.prev-navigation.inactive,
.next-navigation.inactive { opacity: .5; cursor: default; }

/** Filter opties **/
#filter { position: absolute; top: 121px; right: 0; }
#filter .titel { cursor: pointer; color: #fff; font-size: 16px; background: #f31058 url(../images/zoeken.png) no-repeat left 8px top 10px; padding: 0 40px 0 40px; line-height: 41px; }
#filter form { display: none; background: #9b0a38; width: 100%; padding: 10px; overflow: hidden; }
#filter form select { padding: 1px; display: block; width: 100%; margin-bottom: 10px; border: 1px solid #fff; background: #9b0a38; color: #fff; font-size: 13px; }
#filter form input[type="submit"] { float: right; background: #f31058; border: 0; color: #fff; padding: 3px 7px; }


/** Main contactformulier **/
.contact-form { color: #fff; width: 400px; }
.contact-form input[type='text'] { width: 100%; height: 32px; line-height: 32px; border: 0; padding: 0 5px;  }
.contact-form input[type='text'].error { border: 1px solid #000; }
.contact-form input[type='submit'] { background: #594a51 url(../images/verzendenbg.png) no-repeat right 10px top 9px; height: 29px; text-align: left; color: #fff; padding: 0 30px 0 10px; float: right; border: 0; }
.contact-form textarea { width: 100%; height: 132px; line-height: 32px; border: 0; padding: 0 5px; }


/*
This is the visible area of you carousel.
Set a width here to define how much items are visible.
The width can be either fixed in px or flexible in %.
Position must be relative!
*/
#sieraden-hoofdslider { position: relative; overflow: hidden;}

/*
This is the container of the carousel items.
You must ensure that the position is relative or absolute and
that the width is big enough to contain all items.
*/
#sieraden-hoofdslider ul { width: 20000em; position: relative; list-style: none; margin: 0; padding: 0; }

/*
These are the item elements. jCarousel works best, if the items
have a fixed width and height (but it's not required).
*/
#sieraden-hoofdslider li { float: left; }


#sieraden-kleineslider-container { height: 82px; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,0.4); position: relative; z-index: 10; }
#kleineslider-wrapper { width: 983px; margin: 0 auto; }

#sieraden-kleineslider { position: relative; overflow: hidden;}
#sieraden-kleineslider ul { width: 20000em; position: relative; list-style: none; margin: 0; padding: 0; }
#sieraden-kleineslider li { float: left; }

#copyregel { width: 983px; margin: 20px auto 0; color: #424243; }


/* Large desktop */
@media (min-width: 1200px) {


}

@media (max-width: 992px) {
    #content-container { width: 100%; }

    .contact-form { width: 100%; }
    #hoofdcarousel { margin-bottom: 20px; overflow: hidden; }

    #hoofdcarousel ul li .info-container { box-sizing: border-box; position: absolute; left: 0; }
    #hoofdcarousel ul li .info-container .sieraad-detail { width: 100%; box-sizing: border-box; }

    .navigation-wrapper .navigation { width: 100%; }
    .carousel-navigation { width: 100%; }

    #copyregel { display: none; }
    #cookiecontainer { display: none; }
}

/* Minimaal groter dan Portrait tablet */
@media (min-width: 768px) {


}


/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {


}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

}

/* Landscape phones and down */
@media (max-width: 468px) {
    #logo { width: 50%; }
}