/* =============================================================================
   FONT
   ========================================================================== */
   
@font-face {
font-family: 'HelveticaNeueLTStd-Bd';
src: url('../../fonts/HelveticaNeueLTStd-Bd.eot'); /* IE9 Compat Modes */
src: url('../../fonts/HelveticaNeueLTStd-Bd.eot?#iefix') format('embedded-opentype'), 
url('../../fonts/HelveticaNeueLTStd-Bd.woff') format('woff'), 
url('../../fonts/HelveticaNeueLTStd-Bd.ttf')  format('truetype'),
url('../../fonts/HelveticaNeueLTStd-Bd.svg#HelveticaNeueLTStd-Bd') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'HelveticaNeueLTStd-Lt';
src: url('../../fonts/HelveticaNeueLTStd-Lt.eot'); /* IE9 Compat Modes */
src: url('../../fonts/HelveticaNeueLTStd-Lt.eot?#iefix') format('embedded-opentype'), 
url('../../fonts/HelveticaNeueLTStd-Lt.woff') format('woff'), 
url('../../fonts/HelveticaNeueLTStd-Lt.ttf')  format('truetype'),
url('../../fonts/HelveticaNeueLTStd-Lt.svg#HelveticaNeueLTStd-Lt') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'HelveticaNeueLTStd-Roman';
src: url('../../fonts/HelveticaNeueLTStd-Roman.eot'); /* IE9 Compat Modes */
src: url('../../fonts/HelveticaNeueLTStd-Roman.eot?#iefix') format('embedded-opentype'), 
url('../../fonts/HelveticaNeueLTStd-Roman.woff') format('woff'), 
url('../../fonts/HelveticaNeueLTStd-Roman.ttf')  format('truetype'),
url('../../fonts/HelveticaNeueLTStd-Roman.svg#HelveticaNeueLTStd-Roman') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'HelveticaNeueLTStd-Th';
src: url('../../fonts/HelveticaNeueLTStd-Th.eot'); /* IE9 Compat Modes */
src: url('../../fonts/HelveticaNeueLTStd-Th.eot?#iefix') format('embedded-opentype'), 
url('../../fonts/HelveticaNeueLTStd-Th.woff') format('woff'), 
url('../../fonts/HelveticaNeueLTStd-Th.ttf')  format('truetype'),
url('../../fonts/HelveticaNeueLTStd-Th.svg#HelveticaNeueLTStd-Th') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'HelveticaNeueLTStd-ThCn';
src: url('../../fonts/HelveticaNeueLTStd-ThCn.eot'); /* IE9 Compat Modes */
src: url('../../fonts/HelveticaNeueLTStd-ThCn.eot?#iefix') format('embedded-opentype'), 
url('../../fonts/HelveticaNeueLTStd-ThCn.woff') format('woff'), 
url('../../fonts/HelveticaNeueLTStd-ThCn.ttf')  format('truetype'),
url('../../fonts/HelveticaNeueLTStd-ThCn.svg#HelveticaNeueLTStd-ThCn') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'HelveticaNeueLTStd-UltLt';
src: url('../../fonts/HelveticaNeueLTStd-UltLt.eot'); /* IE9 Compat Modes */
src: url('../../fonts/HelveticaNeueLTStd-UltLt.eot?#iefix') format('embedded-opentype'), 
url('../../fonts/HelveticaNeueLTStd-UltLt.woff') format('woff'), 
url('../../fonts/HelveticaNeueLTStd-UltLt.ttf')  format('truetype'),
url('../../fonts/HelveticaNeueLTStd-UltLt.svg#HelveticaNeueLTStd-UltLt') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'MinionPro-Regular';
src: url('../../fonts/MinionPro-Regular.eot'); /* IE9 Compat Modes */
src: url('../../fonts/MinionPro-Regular.eot?#iefix') format('embedded-opentype'), 
url('../../fonts/MinionPro-Regular.woff') format('woff'), 
url('../../fonts/MinionPro-Regular.ttf')  format('truetype'),
url('../../fonts/MinionPro-Regular.svg#MinionPro-Regular') format('svg');
font-weight: normal;
font-style: normal;
}


/*------- BEGIN RESET -----*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
html {
    height: 100%; 
width: 100%;
overflow-x: hidden; 
	line-height: 1;
overflow-y:scroll;	
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*------- END RESET -----*/

/* =============================================================================
   GENERAL
   ========================================================================== */

/*
 * A better looking default horizontal rule
 */

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */




/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}



/* =============================================================================
   BODY
   ========================================================================== */

body {
    margin:0 0 0 0;
    padding: 0 0 0 0;
}

/* =============================================================================
   OVERLAY MENU
   ========================================================================== */

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index:1001;
    top: 0;
    left: 0;
    background-color: rgb(255,255,255);
    background-color: rgba(255,255,255, 1);
    overflow-x: hidden;
    transition: 0.5s;
    -webkit-box-shadow: 10px 0 5px -2px #404040;
    box-shadow: 10px 0 5px -2px #404040;
}

.overlay-content {
    position: relative;
    top: 7%;
    width: 100%;
    text-align: center;
    margin-top: 0px;
}

.overlay h1 a{
    font-family: 'HelveticaNeueLTStd-Th';
    font-size:20px;
    line-height: 28px;
    font-weight:300;
    padding: 8px;
    text-decoration: none;
    color: #482d0d;
    display: block;
    transition: 0.3s;
    text-transform:uppercase;
    margin:30px 0 20px 0;
}

.overlay h1 a:hover, .overlay a:focus {
    color: #af1a1c;
}

.overlay p  {
    font-family: 'HelveticaNeueLTStd-Th';
    font-size:12px;
    line-height: 16px;
    font-weight:300;
    text-decoration: none;
    color: #482d0d;
    display: block;
    text-transform:uppercase;
    transition: 0.3s;
}

.overlay p a {
    font-family: 'HelveticaNeueLTStd-Th';
    font-size:12px;
    line-height: 16px;
    font-weight:300;
    text-decoration: none;
    color: #482d0d;
    display: block;
    text-transform:uppercase;
    transition: 0.3s;
}

.overlay a {
    font-family: 'HelveticaNeueLTStd-Th';
    font-size: 24px;
    line-height:40px;
    font-weight:300;
    padding: 8px;
    text-decoration: none;
    color: #482d0d;
    display: block;
    transition: 0.3s;
}

.overlay p a:hover, .overlay a:focus {
    color: #af1a1c;
}

.openbtn {
    position: fixed;
    top: 43px;
    left: 100px;
    z-index:100000;
    font-size: 30px;
    cursor:pointer;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    z-index:1000;
    color:white;
    transition: color 0.2s ease;
}

.openbtn:hover {
    color:#af1a1c;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
    z-index:1002;
}

.lijntje2 {
    display:block;
    clear:both;
    height:1px;
    background-color:#ccc;
    width:15%;
    margin: 5% 0 0 42.5%;
    padding: 0 0 0 0;
}







/* =============================================================================
   IFRAME
   ========================================================================== */

iframe {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

.youtube {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#video-wrap { 
    width: 70%;
    margin: 40px auto; 
}



/* =============================================================================
   COLOR & TEXT CLASSES
   ========================================================================== */

.gold {
    color: #ad8f6c;
}

.goldbg {
    background-color: #ad8f6c;
}

.underline {
    text-decoration: underline;
}

.uppercase {
    text-transform: uppercase;
}

.black {
    color: #423131;
}

.blackbg {
    background-color: #423131;
}

.brown {
    color: #482d0d;
}

.brownbg {
    background-color: #482d0d;
}

/* =============================================================================
   Wrappers
   ========================================================================== */

.scrollwrapper1 {
    position:absolute;
	width: 100%;
	top:0;
	height:auto;
	margin: 0 auto 0 auto;
	padding: 0 0 0 0;
	background-color:none;
	z-index:1;
	}
	
.scrollwrapper2 {
    position:fixed;
	width: 100%;
	top:0;
	height:auto;
	margin: 0 auto 0 auto;
	padding: 0 0 0 0;
	background-color:none;
	z-index:0;
	}
	
.scrollwrapper2b {
    position:fixed;
	width: 100%;
	top:0;
	height:auto;
	margin: 0 auto 0 auto;
	padding: 100px 0 0 0;
	background-color:none;
	z-index:0;
	}
	
.scrollwrapper3 {
    position:fixed;
	width: 100%;
	top:300;
	height:auto;
	margin: 0 auto 0 auto;
	padding: 0 0 0 0;
	background-color:none;
	z-index:0;
	}

.wrapper100 {
	width: 100%;
	max-width:1500px;
	height:auto;
	margin: 0 auto 0 auto;
	padding: 0 0 0 0;
	background-color:white;
	}
	
	

/* =============================================================================
   Spacer
   ========================================================================== */
.spacer2px { 
  clear:both;
  display:block;
  float:left;
  width: 100%;  
  height:1px;
  background-color:#f1d5c4;
  margin: 2% 0 2% 0;
}

.spacer2pxnobot { 
  clear:both;
  display:block;
  float:left;
  width: 100%;  
  height:1px;
  background-color:#f1d5c4;
  margin: 2% 0 0 0;
}

.spacer2pxwhite { 
  clear:both;
  display:block;
  float:left;
  width: 100%;  
  height:1px;
  background-color:white;
  margin: 0 0 2% 0;
}




/* =============================================================================
   Scrollers
   ========================================================================== */
.scrolldown {
  position:absolute;
  top:640px;
  left:50%;
  width: 56px;  
  height:56px;
  /*background-color:red;*/
  margin: 0 0 0 -28px;
  z-index:1000;
}

.scrollup {
  position:relative;
  float:left;
  width: 100%;  
  height:56px;
  /*background-color:red;*/
  margin: -28px 0 0 0;
  text-align:center;
}

/* ==========================================================================
   Slidenavigation
   ========================================================================== */

#slidenav {
  margin:0 auto;
  width:800px;
  background:url(images/open.png);
  height:350px;
  padding:20px 50px;
  position:relative;
}
#open {
  margin:0 auto;
  width:200px;
  background:url(images/open.png);
  text-align:center;
  padding:5px;
  font-size:30px;
}

/* ==========================================================================
   Logo
   ========================================================================== */
.logo {
    display:inline-block;
    width:20%;
    height:auto;
    margin:1.5% 0 1.5% 40%;
    padding:0 0 0 0;
    /*background-image: url(../../uploads/images/xxx.png);*/
    /*background-color:red;*/
}

.logo img {
    width:100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.logogroot {
    display:inline-block;
    width:30%;
    height:auto;
    margin:4% 0 0 35%;
    padding:0 0 0 0;
    /*background-image: url(../../uploads/images/xxx.png);*/
    /*background-color:red;*/
}

.logogroot img {
    width:100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

/* ==========================================================================
   banner
   ========================================================================== */
.banner{
    position:relative;
    clear:both;
    float:left;
    width:100%;
    max-width:1500px;
    height:auto;
    margin:0 0 0 0;
    padding:0 0 -20px 0;
    background-color:white;
}

.paralaxbanner{
    position:relative;
    clear:both;
    float:left;
    width:100%;
    max-width:1500px;
    height:4000px;
    margin:0 0 0 0;
    padding:0 0 -20px 0;
    background-color:black;
}

.paralaxbannersmall{
    position:relative;
    clear:both;
    float:left;
    width:100%;
    max-width:1500px;
    height:800px;
    margin:0 0 0 0;
    padding:0 0 -20px 0;
    background-color:black;
}

.banner3{
    position:relative;
    clear:both;
    float:left;
    width:100%;
    max-width:1500px;
    height:auto;
    margin:0 0 0 0;
    padding:0 0 -20px 0;
    background-color:white;
}

.filmdesktop {
    display:block;
    position:relative;
    float:left;
    width:100%;
    height:auto;
    margin:0 0 0 0;
    padding:0 0 0 0;
}

.filmmobile {
    display:none;
    position:relative;
    float:left;
    width:100%;
    height:auto;
    margin:0 0 0 0;
    padding:0 0 0 0;
}

/* ==========================================================================
   caroussel
   ========================================================================== */
.carousselwrapper{
    position:relative;
    clear:both;
    float:left;
    width:100%;
    max-width:1500px;
    height:auto;
    margin:0 0 0 0;
    padding:3% 0 0 0;
    background-color:white;
}

/* =============================================================================
   The Collections wrapper
   ========================================================================== */
.thecollectionswrapper {
  position:relative;
  float:left;
  clear:both;
  width: 82%;  
  height:auto;
  background-color:white;
  margin: 0 0 0 0;
  padding: 15% 9% 11% 9%;
  text-align:left;
}

.thecollections h1 {
    font-family: 'HelveticaNeueLTStd-UltLt';
    font-size:28px;
    text-align: center; 
    line-height: 34px;
    margin: 0 0 0 0; 
    padding:0 0 2% 0;
    text-transform:uppercase;
    letter-spacing: 2px;
    color: #612e10;
}

.thecollections p {
    font-family: 'HelveticaNeueLTStd-Th';
    font-size:16px;
    text-align: center; 
    line-height: 22px;
    margin: 0 0 0 0;  
    padding:0 0 0 0;
    color: #612e10;
    letter-spacing: 1px;
}

.thecollections p a {
    font-family: 'HelveticaNeueLTStd-UltLt';
    font-size:20px;
    text-align: center; 
    line-height: 24px;
    color:#ad8f6c;
    text-decoration:none;
}

/* =============================================================================
   Collectionwrapper
   ========================================================================== */
.collectiewrapper {
  position:relative;
  float:left;
  width: 80%;  
  height:auto;
  margin: 0 0 0 0;
  padding: 6% 7% 3% 13%;
  background-color:white;
}

.collectieblok {
  position:relative;
  float:left;
  width: 30%;  
  height:auto;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

.collectiebeeld {
  position:relative;
  float:left;
  width: 100%;  
  height:auto;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

.collectiebeeld img {
  width: 100%; 
}

.collectietekst a {
    position:absolute;
    top:0;
    width:100%;
    height:55%;
    padding: 45% 0 0 0;
    font-family: 'HelveticaNeueLTStd-Th';
    font-size:12px;
    text-align: center; 
    line-height: 18px;
    font-weight:300;
    color:#ccc;
    text-decoration:none;
    text-transform:uppercase;
    transition: background-color 0.5s ease;
    background-color: rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.6);
    letter-spacing:1px;
}

.collectietekst a:hover {
    position:absolute;
    top:0;
    width:100%;
    height:55%;
    padding: 45% 0 0 0;
    font-family: 'HelveticaNeueLTStd-Bd';
    font-size:12px;
    text-align: center; 
    line-height: 18px;
    font-weight:300;
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    background-color: rgba(0, 0, 0, 0.0);
    background: rgba(0, 0, 0, 0.0);
    letter-spacing:1px;
}

.leaveskolom img {
  width: 100%; 
}

.regel1 {
    display:block;
    clear:both;
    text-align: center;
    margin: 0 0 0 0;
    padding: 0 0 2% 0;
}

.lijntje {
    display:block;
    clear:both;
    height:1px;
    background-color:#ccc;
    width:15%;
    margin: 0 0 0 42.5%;
    padding: 0 0 0 0;
}



.regel2 {
    display:block;
    clear:both;
    text-align: center;
    margin: 0 0 0 0;
    padding: 2% 0 0 0;
}

/* =============================================================================
   Leaves Collectionwrapper
   ========================================================================== */
.leavescollectiewrapper {
  position:relative;
  float:left;
  width: 80%;  
  height:auto;
  margin: 0 0 0 0;
  padding: 6% 10% 3% 10%;
  /*background-color:yellow;*/
}

.leavescollectieimgwrapper {
  position:relative;
  float:left;
  width: 100%;  
  height:auto;
  margin: 10% 0 0 0;
  padding: 0;
  text-align:center;
}

.leaveskolom {
  position:relative;
  float:left;
  width: 35%;  
  height:auto;
  margin: 0 7.5% 0 7.5%;
  padding: 0 0 0 0;
  /*background-color:red;*/
}

.leaveskolom h1 {
    font-family: 'HelveticaNeueLTStd-UltLt';
    font-size:22px;
    text-align: center; 
    line-height: 28px;
    margin: 0 0 0 0; 
    padding:0 0 10% 0;
    text-transform:none;
    letter-spacing: 2px;
    color: #612e10;
}

.leaveskolom p {
    font-family: 'HelveticaNeueLTStd-Th';
    font-size:16px;
    text-align: center; 
    line-height: 22px;
    margin: 0 0 0 0;  
    padding:0 5% 0 5%;
    color: #612e10;
    letter-spacing: 1px;
}

.leavescollectieblok {
  position:relative;
  float:left;
  width: 100%;  
  height:auto;
  margin: 0 0 10% 0;
  padding: 0 0 0 0;
}


/* =============================================================================
   Gap 1
   ========================================================================== */
.gap1 {
  position:relative;
  float:left;
  width: 100%;  
  height:580px;
  background-color:none;
  margin: 0 0 0 0;
  padding: 200px 0 0 0;
  text-align:center;
}

.gap1.minoffset {
  position:relative;
  float:left;
  width: 100%;  
  height:580px;
  background-color:none;
  margin: 0 0 0 0;
  padding: 150px 0 0 0;
  text-align:center;
}

.gap1 h1 {
    font-family: 'HelveticaNeueLTStd-UltLt';
    font-size:32px;
    text-align: center; 
    line-height: 40px;
    margin: 0 0 0 0; 
    padding:0 0 1.5% 0;
    text-transform:uppercase;
    letter-spacing: 2px;
    color: #a79866;
}

.gap1 h2 {
    font-family: 'HelveticaNeueLTStd-UltLt';
    font-size:32px;
    text-align: center; 
    line-height: 40px;
    margin: 0 0 0 0; 
    padding:4% 0 1.5% 0;
    text-transform:uppercase;
    letter-spacing: 2px;
    color: #a79866;
}

.gap1 p {
    font-family: 'HelveticaNeueLTStd-UltLt';
    font-size:14px;
    text-align: center; 
    line-height: 24px;
    margin: 0 0 0 0; 
    padding:0 0 4% 0;
    text-transform:uppercase;
    letter-spacing: 2px;
    color: #fff;
}

.lijntjegap1 {
    display:block;
    clear:both;
    height:1px;
    background-color:#a79866;
    width:15%;
    margin: 0 0 0 42.5%;
    padding: 0 0 0 0;
}

.gap1b {
  position:relative;
  float:left;
  width: 100%;  
  height:380px;
  background-color:none;
  margin: 0 0 0 0;
  padding: 200px 0 0 0;
  text-align:left;
}

.gap1b h1 {
    font-family: 'HelveticaNeueLTStd-UltLt';
    font-size:32px;
    text-align: center; 
    line-height: 40px;
    margin: 0 0 0 0; 
    padding:0 0 1.5% 0;
    text-transform:uppercase;
    letter-spacing: 2px;
    color: #a79866;
}

.gap1b h1 a{
    color: #a79866;
    text-decoration:none;
}

.gap1b h2 {
    font-family: 'HelveticaNeueLTStd-UltLt';
    font-size:32px;
    text-align: center; 
    line-height: 40px;
    margin: 0 0 0 0; 
    padding:4% 0 1.5% 0;
    text-transform:uppercase;
    letter-spacing: 2px;
    color: #a79866;
}

.gap1b h2 a{
    color: #a79866;
    text-decoration:none;
}

.gap1b p {
    font-family: 'HelveticaNeueLTStd-UltLt';
    font-size:14px;
    text-align: center; 
    line-height: 24px;
    margin: 0 0 0 0; 
    padding:0 0 4% 0;
    text-transform:uppercase;
    letter-spacing: 2px;
    color: #fff;
}

.lijntjegap1b {
    display:block;
    clear:both;
    height:1px;
    background-color:#a79866;
    width:15%;
    margin: 0 0 0 42.5%;
    padding: 0 0 0 0;
}

.gap1b img{
  width:100%;
}

/* =============================================================================
   Brand Awareness wrapper
   ========================================================================== */
.brandawarenesswrapper {
  position:relative;
  float:left;
  clear:both;
  width: 82%;  
  height:auto;
  background-color:white;
  margin: 0 0 0 0;
  padding: 15% 9% 11% 9%;
  text-align:left;
}

.brandawareness h1 {
    font-family: 'HelveticaNeueLTStd-UltLt';
    font-size:28px;
    text-align: center; 
    line-height: 34px;
    margin: 0 0 0 0; 
    padding:0 0 2% 0;
    text-transform:uppercase;
    letter-spacing: 2px;
    color: #612e10;
}

.brandawareness h2 {
    font-family: 'HelveticaNeueLTStd-Th';
    font-size:16px;
    text-align: center; 
    line-height: 22px;
    margin: 0 0 0 0; 
    padding:2.5% 26% 3% 26%;
    text-transform:uppercase;
    letter-spacing: 1px;
    color: #a79866;
}

.brandawareness p {
    font-family: 'HelveticaNeueLTStd-Th';
    font-size:16px;
    text-align: center; 
    line-height: 22px;
    margin: 0 0 0 0;  
    padding:0 20% 0 20%;
    color: #612e10;
    letter-spacing: 1px;
}

.brandawareness p a {
    font-family: 'HelveticaNeueLTStd-UltLt';
    font-size:20px;
    text-align: center; 
    line-height: 24px;
    color:#ad8f6c;
    text-decoration:none;
}

/* =============================================================================
   Collection text
   ========================================================================== */
.collectiontextwrapper {
  position:relative;
  float:left;
  clear:both;
  width: 82%;  
  height:auto;
  background-color:white;
  margin: 0 0 0 0;
  padding: 5% 9% 11% 9%;
  text-align:left;
}

.collectiontext h1 {
    font-family: 'HelveticaNeueLTStd-UltLt';
    font-size:24px;
    text-align: center; 
    line-height: 30px;
    margin: 0 0 0 0; 
    padding:0 0 5% 0;
    /*text-transform:uppercase;*/
    letter-spacing: 2px;
    color: #612e10;
}

.collectiontext h2 {
    font-family: 'HelveticaNeueLTStd-Th';
    font-size:20px;
    text-align: center; 
    line-height: 28px;
    margin: 0 0 0 0; 
    padding:2.5% 26% 2% 26%;
    text-transform:uppercase;
    letter-spacing: 1px;
    color: #a79866;
}

.collectiontext p {
    font-family: 'HelveticaNeueLTStd-Th';
    font-size:14px;
    text-align: center; 
    line-height: 22px;
    margin: 0 0 0 0;  
    padding:0 25% 0 25%;
    color: #612e10;
    letter-spacing: 1px;
}

.collectiontext p a {
    font-family: 'HelveticaNeueLTStd-UltLt';
    font-size:20px;
    text-align: center; 
    line-height: 24px;
    color:#ad8f6c;
    text-decoration:none;
}

/* =============================================================================
   Gap 2
   ========================================================================== */
.gap2 {
  position:relative;
  float:left;
  width: 100%;  
  height:575px;
  background-color:black;
  margin: 0 0 0 0;
  padding: 100px 0 0 0;
  text-align:left;
}

.gap2 h1 {
    font-family: 'HelveticaNeueLTStd-UltLt';
    font-size:42px;
    text-align: center; 
    line-height: 40px;
    margin: 0 0 0 0; 
    padding:0 0 1.5% 0;
    text-transform:uppercase;
    letter-spacing: 2px;
    color: #a79866;
}

.gap2 h2 {
    font-family: 'HelveticaNeueLTStd-UltLt';
    font-size:24px;
    text-align: center; 
    line-height: 30px;
    margin: 0 0 0 0; 
    padding:4% 0 0.3% 0;
    text-transform:uppercase;
    letter-spacing: 2px;
    color: #a79866;
}

.gap2 p {
    font-family: 'HelveticaNeueLTStd-Th';
    font-size:14px;
    text-align: center; 
    line-height: 24px;
    margin: 0 0 0 0; 
    padding:3% 0 3% 0;
    text-transform:uppercase;
    letter-spacing: 2px;
    color: #a79866;
}

.gap2 p a {
    color: #a79866;
    text-decoration:none;
}

.gap2 p a:hover {
    font-family: 'HelveticaNeueLTStd-Bd';
    color: #a79866;
    text-decoration:none;
}

.lijntjegap2 {
    display:block;
    clear:both;
    height:1px;
    background-color:#a79866;
    width:15%;
    margin: 0 0 0 42.5%;
    padding: 0 0 0 0;
}

.gap2 img{
  width:100%;
}

/* =============================================================================
   Contact wrapper
   ========================================================================== */
.contact {
  position:absolute;
  top:0;
  width: 100%;  
  height:auto;
  background-color:none;
  margin: 0 0 0 0;
  padding: 12% 0 0 0;
  text-align:center;
  z-index:2000;
}

.contact h1 {
    font-family: 'HelveticaNeueLTStd-UltLt';
    font-size:28px;
    text-align: center; 
    line-height: 34px;
    margin: 0 0 0 0; 
    padding:0 0 2% 0;
    text-transform:uppercase;
    letter-spacing: 2px;
    color: #fff;
}

.contact h2 {
    font-family: 'HelveticaNeueLTStd-Th';
    font-size:10px;
    text-align: center; 
    line-height: 16px;
    margin: 0 0 0 0; 
    padding:2.5% 26% 3% 26%;
    text-transform:uppercase;
    letter-spacing: 1px;
    color: #fff;
}

.contact p {
    font-family: 'HelveticaNeueLTStd-Th';
    font-size:14px;
    text-align: center; 
    line-height: 20px;
    margin: 0 0 0 0;  
    padding:0 20% 5% 20%;
    color: #fff;
    letter-spacing: 1px;
}

.contact p a {
    color: #fff;
    letter-spacing: 1px;
    text-decoration:underline;
}




/* ==========================================================================
   Menu
   ========================================================================== */
.desktopmenu {
    position:relative;
    float:left;
    display:inline;
}

.slicknav_menu {
	display:none;
}


/* ==========================================================================
   kolommen
   ========================================================================== */


/* ==========================================================================
   contact + socialmedia
   ========================================================================== */

.contactsocialwrapper {
  position:relative;
  float:left;
  width: 82%;  
  height:auto;
  background-color:white;*/
  margin: 0 0 0 0;
  padding: 5% 9% 5% 9%;
  text-align:left;
}

.contactbutton {
    position:relative;
    float:left;
    width:auto;
    height:34px;
    margin:0 2% 0 0;
    padding:0 4% 0 0;
    border-bottom:1px solid #423131;
}

.contactbutton a{
    font-family: 'font-family: 'Optima-Regular';';
    font-size:20px;
    text-align: left; 
    line-height: 24px;
    color: #423131;
    text-decoration:none;
    text-transform:uppercase;
}

.socialmedia{
    position:relative;
    float:right;
    width:70px;
    height:34px;
    margin:0 0 0 0;
    padding:0 0 0 0;
    /*background-color:red;*/
}

.homebutton {
    position:relative;
    float:left;
    width:auto;
    height:34px;
    margin:0 2% 0 0;
    padding:0 4% 0 0;
    border-bottom:1px solid #423131;
}

.homebutton a{
    font-family: 'font-family: 'Optima-Regular';';
    font-size:20px;
    text-align: left; 
    line-height: 24px;
    color: #423131;
    text-decoration:none;
    text-transform:uppercase;
}

/* ==========================================================================
   contactpage
   ========================================================================== */
.contactwrap{
    position:relative;
    float:left;
    width:40%;
    height:auto;
    margin:0 0 0 10%;
    padding:0 0 5% 0;
    /*background-color:yellow;*/
}

.adreswrap{
    position:relative;
    float:left;
    width:40%;
    height:auto;
    margin:0 0 0 5%;
    padding:0 0 5% 0;
    /*background-color:yellow;*/
}

.adreswrap p{
    font-family: 'AvenirNext-UltraLight';
    font-size:24px;
    text-align: left; 
    line-height: 34px;
    margin: 0 0 0 0;  
    padding:0 0 0 0;
}



/* ==========================================================================
   content
   ========================================================================== */
.content {
    position:relative;
    clear:both;
    float:left;
    width:100%;
    height:auto;
    margin:0px 0px 0px 0px;
    padding:0 0 0 0;
    /*background-image: url(../../uploads/images/btree-logo.png);*/
    /*background-color:yellow;*/
}





/* ==========================================================================
   Google maps
   ========================================================================== */

.googlemaps {
    position:relative;
    float:left;
    width:100%;
    height:400px;
    margin:10px 0px 0px 0px;
    padding:0 0 0 0;
    /*background-image: url(../../uploads/images/xxx.png);*/
    background-color:white;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footerwrapper {
  position:relative;
  float:left;
  width: 92%;  
  height:auto;
  background-color:white;
  margin: 0 0 0 0;
  padding: 5% 4% 5% 6%;
  text-align:left;
}

.footerblok {
  position:relative;
  float:left;
  width: 15%;  
  height:200px;
  /*background-color:green;*/
  margin: 1.5% 1.5% 0 0;
  padding: 0 0 0 0;
  text-align:left;
}

.footermenutitle {
    display:block;
  position:relative;
  float:left;
  width: auto;  
  height:auto;
  background-color:yeellow;
  margin: 0 0 0 0;
  padding: 0 5% 5% 0;
  text-align:left;
  font-family: 'AvenirNext-Regular';
  font-size:20px;
  text-align: left; 
  line-height: 26px;
  color:#000;
  text-transform:uppercase;
  border-bottom:1px solid #aaa;
}

.footermenutitle a {
  text-decoration:none;
  color:#000;
}

.footermenutitle a:hover {
    color: #ad8f6c;
}



.footermenutitleunder {
    display:block;
  position:relative;
  float:left;
  clear:right;
  width: auto;  
  height:auto;
  background-color:yeellow;
  margin: 0 0 0 0;
  padding: 5% 5% 5% 0;
  text-align:left;
  font-family: 'AvenirNext-Regular';
  font-size:20px;
  text-align: left; 
  line-height: 26px;
  color:#000;
  text-transform:uppercase;
}

.footermenutitleunder a {
  text-decoration:none;
  color:#000;
}

.footermenutitleunder a:hover {
    color: #ad8f6c;
}

.footermenutekst {
  position:relative;
  float:left;
  clear:both;
  width: 100%;  
  height:auto;
  background-color:yeellow;
  margin: 5% 0 0 0;
  padding: 0 0 0 0;
  text-align:left;
  font-family: 'AvenirNext-Regular';
  font-size:14px;
  text-align: left; 
  line-height: 30px;
  color:#666666;
  text-transform:uppercase;
}

.footermenutekst a {
  text-decoration:none;
  color:#666666;
}

.footermenutekst a:hover {
    color: #ad8f6c;
}














/* Stylesheet: ROELL: layout Modified On 2018-01-31 09:24:17 */
   
/* ==========================================================================
   BEGIN MEDIA QUERY 980
   ========================================================================== */ 
@media screen and (max-width: 980px) {
    
	.js #menu {
		display:none;
	}
	
	.js .slicknav_menu {
		display:block;
	}    
    
.desktopmenu {
    display:none;
}

/* ==========================================================================
   Logo
   ========================================================================== */
.logo {
    display:inline-block;
    width:40%;
    height:auto;
    margin:1.5% 0 1.5% 30%;
    padding:0 0 0 0;
    /*background-image: url(../../uploads/images/xxx.png);*/
    /*background-color:red;*/
}

/* =============================================================================
   Collection text
   ========================================================================== */
.collectiontextwrapper {
  position:relative;
  float:left;
  clear:both;
  width: 82%;  
  height:auto;
  background-color:white;
  margin: 0 0 0 0;
  padding: 30% 9% 11% 9%;
  text-align:left;
}

.collectiontext h2 {
    font-family: 'HelveticaNeueLTStd-Th';
    font-size:20px;
    text-align: center; 
    line-height: 28px;
    margin: 0 0 0 0; 
    padding:2.5% 10% 2% 10%;
    text-transform:uppercase;
    letter-spacing: 1px;
    color: #a79866;
}

.collectiontext p {
    font-family: 'HelveticaNeueLTStd-Th';
    font-size:14px;
    text-align: center; 
    line-height: 22px;
    margin: 0 0 0 0;  
    padding:0 10% 0 10%;
    color: #612e10;
    letter-spacing: 1px;
}

}

/* ==========================================================================
   END MEDIA QUERY 980
   ========================================================================== */


   
/* ==========================================================================
   BEGIN MEDIA QUERY 550
   ========================================================================== */ 
@media screen and (max-width: 550px) {

/* ==========================================================================
   Logo
   ========================================================================== */
.logo {
    display:inline-block;
    width:80%;
    height:auto;
    margin:1.5% 0 1.5% 10%;
    padding:0 0 0 0;
    /*background-image: url(../../uploads/images/xxx.png);*/
    /*background-color:red;*/
}

/* =============================================================================
   Collectionwrapper
   ========================================================================== */
.collectiewrapper {
  position:relative;
  float:left;
  width: 100%;  
  height:auto;
  margin: 0 0 0 0;
  padding: 6% 0 3% 0;
  background-color:white;
}

.collectieblok {
  position:relative;
  float:left;
  width: 100%;  
  height:auto;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

/* =============================================================================
   Leaves Collectionwrapper
   ========================================================================== */
.leavescollectiewrapper {
  position:relative;
  float:left;
  width: 100%;  
  height:auto;
  margin: 0 0 0 0;
  padding: 6% 0 3% 0;
  /*background-color:yellow;*/
}

.leaveskolom {
  position:relative;
  float:left;
  width: 100%;  
  height:auto;
  margin: 0 0 10% 0;
  padding: 0 0 0 0;
  /*background-color:red;*/
}

/* =============================================================================
   Collection text
   ========================================================================== */
.collectiontextwrapper {
  position:relative;
  float:left;
  clear:both;
  width: 82%;  
  height:auto;
  background-color:white;
  margin: 0 0 0 0;
  padding: 40% 9% 11% 9%;
  text-align:left;
}

.collectiontext h2 {
    font-family: 'HelveticaNeueLTStd-Th';
    font-size:20px;
    text-align: center; 
    line-height: 28px;
    margin: 0 0 0 0; 
    padding:2.5% 5% 2% 5%;
    text-transform:uppercase;
    letter-spacing: 1px;
    color: #a79866;
}

.collectiontext p {
    font-family: 'HelveticaNeueLTStd-Th';
    font-size:14px;
    text-align: center; 
    line-height: 22px;
    margin: 0 0 0 0;  
    padding:0 5% 0 5%;
    color: #612e10;
    letter-spacing: 1px;
}

/* =============================================================================
   Gap 1
   ========================================================================== */
.gap1 {
  position:relative;
  float:left;
  width: 80%;  
  height:auto;
  background-color:none;
  margin: 0 0 0 0;
  padding: 20% 10% 20% 10%;
  text-align:center;
}

.gap1 p {
    font-family: 'HelveticaNeueLTStd-UltLt';
    font-size:14px;
    text-align: center; 
    line-height: 24px;
    margin: 0 0 0 0; 
    padding:0 5% 4% 5%;
    text-transform:uppercase;
    letter-spacing: 2px;
    color: #fff;
}

/* =============================================================================
   Brand Awareness wrapper
   ========================================================================== */
.brandawarenesswrapper {
  position:relative;
  float:left;
  clear:both;
  width: 82%;  
  height:auto;
  background-color:white;
  margin: 0 0 0 0;
  padding: 15% 9% 11% 9%;
  text-align:left;
}

.brandawareness h1 {
    font-family: 'HelveticaNeueLTStd-UltLt';
    font-size:28px;
    text-align: center; 
    line-height: 34px;
    margin: 0 0 0 0; 
    padding:0 0 2% 0;
    text-transform:uppercase;
    letter-spacing: 2px;
    color: #612e10;
}

.brandawareness h2 {
    font-family: 'HelveticaNeueLTStd-Th';
    font-size:16px;
    text-align: center; 
    line-height: 22px;
    margin: 0 0 0 0; 
    padding:2.5% 5% 3% 5%;
    text-transform:uppercase;
    letter-spacing: 1px;
    color: #a79866;
}

.brandawareness p {
    font-family: 'HelveticaNeueLTStd-Th';
    font-size:16px;
    text-align: center; 
    line-height: 22px;
    margin: 0 0 0 0;  
    padding:0 5% 0 5%;
    color: #612e10;
    letter-spacing: 1px;
}

/* =============================================================================
   Gap 2
   ========================================================================== */
.gap2 {
  position:relative;
  float:left;
  width: 100%;  
  height:auto;
  background-color:black;
  margin: 0 0 0 0;
  padding: 10% 0 10% 0;
  text-align:left;
}

/* =============================================================================
   Contact wrapper
   ========================================================================== */
.contact {
  position:relative;
  top:0;
  width: 100%;  
  height:auto;
  background-color:black;
  margin: 0 0 0 0;
  padding: 12% 0 10% 0;
  text-align:center;
  z-index:2000;
}

/* =============================================================================
   Scrollers
   ========================================================================== */
.scrolldown {
  display:none;
}

.openbtn {
    position: fixed;
    top: 43px;
    left: 20px;
    z-index:100000;
    font-size: 30px;
    cursor:pointer;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    z-index:1000;
    color:white;
    transition: color 0.2s ease;
}

}

/* ==========================================================================
   END MEDIA QUERY 550
   ========================================================================== */
   
   
/* =============================================================================
   IPAD Portrait & Landscape
   ========================================================================== */   
@media screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 
    
.filmdesktop {
    display:none;
}

.filmmobile {
    display:block;
}

} 

/* =============================================================================
   IPAD 1&2 Portrait & Landscape
   ========================================================================== */
@media screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1){ 
 .filmdesktop {
    display:none;
}

.filmmobile {
    display:block;
}   
    }


/* =============================================================================
   IPAD RETINA Portrait & Landscape
   ========================================================================== */   
@media screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { 
.filmdesktop {
    display:none;
}

.filmmobile {
    display:block;
}

}


/* =============================================================================
   IPhone 6 in portrait & landscape
   ========================================================================== */
@media screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) {
.filmdesktop {
    display:none;
}

.filmmobile {
    display:block;
}

}

/* =============================================================================
   IPhone 6 Plus in portrait & landscape
   ========================================================================== */
@media screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) {
.filmdesktop {
    display:none;
}

.filmmobile {
    display:block;
}
}

/* =============================================================================
   iPhone 5 & 5S in portrait & landscape
   ========================================================================== */
@media screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {
.filmdesktop {
    display:none;
}

.filmmobile {
    display:block;
}    
}

/* =============================================================================
   iPhone 2G-4S in portrait & landscape
   ========================================================================== */
@media screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.filmdesktop {
    display:none;
}

.filmmobile {
    display:block;
}    
}


/* Stylesheet: ROELL: mediaquery Modified On 2018-01-31 09:26:48 */
/* ==========================================================================
NAVIGATION
========================================================================== */

.nav {
    position:relative;
    float:left; 
    width:100%;
    max-width:900px;
    height:auto; 
    /*background-color:red;*/ 
    color:#42424c; 
    margin:5% 0px 0px 0px;
    padding: 0 0 0 0;
    z-index:100000;
    border-top: 1px solid #f1d5c4;
    border-bottom: 1px solid #f1d5c4;
}

.nav ul li a {
    font-family: 'Sansumi-Bold',sans-serif;
    font-size:13px;
    color:#42424c;
    display:block;
    width:auto;
    height:auto; 
    text-align:center;
    padding: 10px 34px 10px 34px;
}

.nav ul li:hover > a {
    font-family: 'Sansumi-Bold',sans-serif;
    background-color:#f1d5c4;
    /*color:#00a4e1;*/
    color:#42424c;
}

.nav ul li:hover > a.menuactive {
    font-family: 'Sansumi-Bold',sans-serif;
    background-color:#f1d5c4;
    font-weight:600;
    /*color:#00a4e1;*/
    color:#42424c;
}


.nav ul li a.menuactive {
    font-family: 'Sansumi-Bold',sans-serif;
    background-color:#f1d5c4;
    color:#42424c;
    font-weight:600;
    /*color:white;*/
}


.nav ul li ul li a {
    font-family: 'Sansumi-Bold',sans-serif;
    font-size:12px;
    color:white;
    padding:10px 10px 10px 10px;
    text-align:left;
    width:220px;
}

.nav ul li ul li a:hover {
    font-family: 'Sansumi-Bold',sans-serif;
    color:#f1d5c4;
    
}

#menu {
    position:relative;
    float:left; 
    width:auto; 
    height:auto;
}

.menu a {
    float:left;
    text-decoration:none; 
    padding:0px 0px 0px 0px;
    background-color:none;

}

.menu span {
    float:left; 
    color:#eee; 
    text-decoration:none; 
    height:28px; 
    padding:0px 0px 0px 0px
}



.menu {
    list-style:none; 
    font-family: 'Sansumi-Bold',sans-serif;
    text-align:left; 
    margin:0 auto; 
    text-transform:uppercase;
}

.menu li {
    position:relative; 
    float:left; 
    padding:0px 0px 0px 0px; 
    z-index:1000;
    
}

.menu ul {
    position:relative;
    float:left;
    font-family: 'Sansumi-Bold',sans-serif;
    top:0px; 
    left:0; 
    background:#000; 
    display:none; 
    list-style:none
}

.menu ul li {
    float:none; 
    border-top:1px solid #000; 
    width:auto;
    color:#fff;

}

.menu ul li a {
    float:none; 
    display:block; 
    background:none; 
    width:auto;
    height:auto; 
    padding-top:0px
    padding-bottom:0px;
    color:#fff;
}







/* Stylesheet: ROELL: menu Modified On 2017-12-13 17:02:17 */
/*
    Mobile Menu Core Style
*/

.slicknav_btn { position: relative; display: block; vertical-align: middle; float: right; padding: 0.438em 0.625em 0.438em 0.625em; line-height: 1.125em; cursor: pointer; }
.slicknav_menu  .slicknav_menutxt { display: block; line-height: 1.188em; float: left; }
.slicknav_menu .slicknav_icon { float: left; margin: 0.188em 0 0 0.438em; }
.slicknav_menu .slicknav_no-text { margin: 0 }
.slicknav_menu .slicknav_icon-bar { display: block; width: 1.125em; height: 0.125em; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 0.188em }
.slicknav_nav { clear: both;}
.slicknav_nav ul,
.slicknav_nav li { display: block }
.slicknav_nav .slicknav_arrow { font-size: 0.8em; margin: 0 0 0 0.4em; }
.slicknav_nav .slicknav_item { display: block; cursor: pointer; }
.slicknav_nav a { display: block }
.slicknav_nav .slicknav_item a { display: inline }
.slicknav_menu:before,
.slicknav_menu:after { content: " "; display: table; }
.slicknav_menu:after { clear: both }
/* IE6/7 support */
.slicknav_menu { *zoom: 1 }

/* 
    User Default Style
    Change the following styles to modify the appearance of the menu.
*/

.slicknav_menu {
	font-size:12px;
}
/* Button */
.slicknav_btn {
	margin: 5px 2% 5px;	
	text-decoration:none;	
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;  
	background-color: #222222;
}
/* Button Text */
.slicknav_menu  .slicknav_menutxt {
    font-family: Arial, sans-serif;
	color: white;
	font-weight: bold;	
	text-shadow: 0 1px 3px #000;	
}
/* Button Lines */
.slicknav_menu .slicknav_icon-bar {
  background-color: #f5f5f5;
}
.slicknav_menu {
	background:#4c4c4c;
	padding:5px 5px 5px 5px;
}
.slicknav_nav {
	color:#fff;
	margin:0;	
	padding:0;
	font-size:12px;
}
.slicknav_nav, .slicknav_nav ul {
	list-style: none;
	overflow:hidden;
}
.slicknav_nav ul {
	padding:0;
	margin:0 0 0 20px;
}
.slicknav_nav .slicknav_item {
	padding:5px 10px;
	margin:2px 5px;
}
.slicknav_nav a{
	padding:5px 10px;
	margin:5px 5px;
	text-decoration:none;
	color:#fff;
	font-size:13px;
	font-family: Arial, sans-serif;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	background:#515151;

}
.slicknav_nav .slicknav_item a {
	padding:0;
	margin:0;
	background:none;
}
.slicknav_nav .slicknav_item:hover {
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	background:#ccc;
	color:#fff;	
}
.slicknav_nav a:hover{
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	background:#ccc;
	color:#222;
}
.slicknav_nav .slicknav_txtnode {
     margin-left:15px;   
}
/* Stylesheet: ROELL: mobile menu Modified On 2017-12-13 17:02:24 */
@charset "utf-8";

/* =============================================================================
   Gallery masonry
   ========================================================================== */
   
.gallerycontainer {
    position:relative;
    float:left;
    width:100%;
    height:auto;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}   

/* reset */
.photoMosaic,
.photoMosaic img, .photoMosaic div, .photoMosaic span,
.photoMosaic a:link, .photoMosaic a:visited, .photoMosaic a:active, .photoMosaic a:hover {
    background:none; outline:none; border:0; height:auto; width:auto; max-height:none !important; max-width:none !important; 
    min-height:0 !important; min-width:0 !important; font-style:normal; font-variant:normal; font-weight:normal;
    list-style:none; margin:0; padding:0; position:static; float:none; visibility:visible;
    overflow:visible; color:#000000; letter-spacing:normal; line-height:120%; text-align:left; text-decoration:none; 
    text-indent:0; text-transform:none; vertical-align:baseline; white-space:normal; word-spacing:normal;
}

/* selective reset */
.photoMosaic img, .photoMosaic a:link, .photoMosaic a:visited, .photoMosaic a:active, .photoMosaic a:hover {
    margin:0 !important; padding:0 !important;
}

/* base */
.photoMosaic { position:relative; overflow:hidden; margin-bottom:2em; }
    .photoMosaic span,
    .photoMosaic a:link,
    .photoMosaic a:visited,
    .photoMosaic a:active,
    .photoMosaic a:hover { display:block; overflow:hidden; position:absolute; }

/* FOTO GREY FILTER */
/*.photoMosaic img { 
display:block; position:relative; top:0px; opacity:1; filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); */

/* Firefox 10+, Firefox on Android */    
/*-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);*/
/*-ms-filter: grayscale(100%);*/
/*filter: grayscale(100%);*/
/*filter: gray; /* IE 6-9 */}*/
/*   
.photoMosaic a:hover img { 
opacity:1;    
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
filter: none; 
}*/

        .photoMosaic img.thumbnail,
        .photoMosaic img.medium,
        .photoMosaic img.large { position:absolute; opacity:0;}

/* loading */
.photoMosaic .photoMosaicLoading { background:transparent url('../images/spinner-arrows.gif') 0px 0px no-repeat; padding:0 0 0 20px; line-height:20px; }

.photoMosaic.loading .photomosaic-spinner { background:#efefef url('../images/spinner-snake.gif') 50% 50% no-repeat; }
.photoMosaic.loading .photomosaic-item.loaded .photomosaic-spinner { display:none; }

.PM_preloadify { visibility:hidden; position:absolute; bottom:5px; right:10px; }

.PM_js .photoMosaicTarget .gallery { display:none; }


/* overflow:hidden; on a container kills 3d */
/* base */
.PM_csstransforms.PM_csstransitions .photoMosaic .photomosaic-item,
.PM_csstransforms.PM_csstransitions .photoMosaic img {
    -webkit-transform-origin: center center;
       -moz-transform-origin: center center;
        -ms-transform-origin: center center;
         -o-transform-origin: center center;
            transform-origin: center center;

    -webkit-transition: all 0.3s ease-out 0s;
       -moz-transition: all 0.3s ease-out 0s;
        -ms-transition: all 0.3s ease-out 0s;
         -o-transition: all 0.3s ease-out 0s;
            transition: all 0.3s ease-out 0s;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;

    -webkit-backface-visibility: visible;
       -moz-backface-visibility: visible;
        -ms-backface-visibility: visible;
         -o-backface-visibility: visible;
            backface-visibility: visible;

    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
}

/* The .loaded is added after all of the images have loaded */
.PM_csstransforms.PM_csstransitions .photoMosaic.resize-transition-none .photomosaic-item,
.PM_csstransforms.PM_csstransitions .photoMosaic.loading-transition-none img,
.PM_csstransforms.PM_csstransitions .photoMosaic.resize-transition-none .loaded img {
    -webkit-transition: none;
       -moz-transition: none;
        -ms-transition: none;
         -o-transition: none;
            transition: none;
}

.PM_csstransforms.PM_csstransitions .photoMosaic.transition-none .loading img,
.PM_csstransforms.PM_csstransitions .photoMosaic.loading-transition-none .loading img { }

.PM_csstransforms.PM_csstransitions .photoMosaic.transition-custom .loading img,
.PM_csstransforms.PM_csstransitions .photoMosaic.loading-transition-custom .loading img {
    /* good for example
        opacity:0;
        -webkit-transform: rotate( -5deg ) scale( 0.95 );
           -moz-transform: rotate( -5deg ) scale( 0.95 );
            -ms-transform: rotate( -5deg ) scale( 0.95 );
             -o-transform: rotate( -5deg ) scale( 0.95 );
                transform: rotate( -5deg ) scale( 0.95 );
    */
}

.PM_csstransforms.PM_csstransitions .photoMosaic.transition-fade .loading img,
.PM_csstransforms.PM_csstransitions .photoMosaic.loading-transition-fade .loading img {
    opacity: 0;
}

.PM_csstransforms.PM_csstransitions .photoMosaic.transition-scale-up .loading img,
.PM_csstransforms.PM_csstransitions .photoMosaic.loading-transition-scale-up .loading img {
    opacity: 0;
    -webkit-transform: scale( 0.95 );
       -moz-transform: scale( 0.95 );
        -ms-transform: scale( 0.95 );
         -o-transform: scale( 0.95 );
            transform: scale( 0.95 );
}

.PM_csstransforms.PM_csstransitions .photoMosaic.transition-scale-down .loading img,
.PM_csstransforms.PM_csstransitions .photoMosaic.loading-transition-scale-down .loading img {
    opacity: 0;
    -webkit-transform: scale( 1.15 );
       -moz-transform: scale( 1.15 );
        -ms-transform: scale( 1.15 );
         -o-transform: scale( 1.15 );
            transform: scale( 1.15 );
}

.PM_csstransforms.PM_csstransitions .photoMosaic.transition-slide-up .loading img,
.PM_csstransforms.PM_csstransitions .photoMosaic.loading-transition-slide-up .loading img {
    opacity: 0;
    -webkit-transform: translateY( 5% );
       -moz-transform: translateY( 5% );
        -ms-transform: translateY( 5% );
         -o-transform: translateY( 5% );
            transform: translateY( 5% );
}

.PM_csstransforms.PM_csstransitions .photoMosaic.transition-slide-down .loading img,
.PM_csstransforms.PM_csstransitions .photoMosaic.loading-transition-slide-down .loading img {
    opacity: 0;
    -webkit-transform: translateY( -5% );
       -moz-transform: translateY( -5% );
        -ms-transform: translateY( -5% );
         -o-transform: translateY( -5% );
            transform: translateY( -5% );
}

.PM_csstransforms.PM_csstransitions .photoMosaic.transition-slide-left .loading img,
.PM_csstransforms.PM_csstransitions .photoMosaic.loading-transition-slide-left .loading img {
    opacity: 0;
    -webkit-transform: translateX( 5% );
       -moz-transform: translateX( 5% );
        -ms-transform: translateX( 5% );
         -o-transform: translateX( 5% );
            transform: translateX( 5% );
}

.PM_csstransforms.PM_csstransitions .photoMosaic.transition-slide-right .loading img,
.PM_csstransforms.PM_csstransitions .photoMosaic.loading-transition-slide-right .loading img {
    opacity: 0;
    -webkit-transform: translateX( -5% );
       -moz-transform: translateX( -5% );
        -ms-transform: translateX( -5% );
         -o-transform: translateX( -5% );
            transform: translateX( -5% );
}
/* Stylesheet: ROELL: photomosaic Modified On 2017-04-03 11:54:00 */
#parent{
	position: relative;
	width: 70%;
	margin: 0 0 0 15%;
	height:500px;
}

#prev{
	cursor: pointer;
	position: absolute;
	left: -10%;
	top: 250px;
	z-index:100000;
}

#next{
	cursor: pointer;
	position: absolute;
	right: -10%;
	top: 250px;
	z-index:100000;
}


/*
 * FUNCTIONALITY
 * The following block serves to make Boutique function properly. Don't edit or edit carefully.
 */

.boutique{ margin:0; padding:0; position:relative; z-index:1; }
.boutique-frame{ margin:0; padding:0; list-style:none; position:absolute; z-index:1; display:none; border-width:0; }
.boutique-frame-image{ border:0; vertical-align:bottom; }
.boutique-frame-title{ cursor:default; }
.boutique-frame-text{ display:block; position:absolute; left:0; right:0; bottom:0; text-align:left; cursor:default; margin:0; }
.boutique-frame-link, .boutique-frame-link:hover{ display:block; cursor:default; text-decoration:none; outline:none; }
.boutique-frame-image, .boutique-frame, .boutique-frame-link{ -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -o-user-select:none; user-select:none; -webkit-user-drag:none; -moz-user-drag:none; user-drag:none; }
.boutique.rtl .boutique-frame-title, .boutique.rtl .boutique-frame-text{ text-align:right; }

/*
 * THEMING
 * Edit this section to style the frames, text, alignments etc.
 * If the id of your Boutique instance is different, do a find/replace on #boutique.
 * To overwrite these for a second instance on the same page, copy and prepend the classes with the #id of the other instance, like so: #boutique2 .boutique-frame{}
 */

#boutique,
.boutique{
	display: none; /* Start invisible until the plugin is loaded */
	margin: 0 auto;
}

/* The frames */
.boutique-frame{	
	background: none url(../scripts/images/loading.gif) center no-repeat; /* Color of the frame behind and around the image */
	border: 0px solid; /* Outer border around frame */
	border-color: #fff #fff #fff #fff;
}

/* Headers of all frames */
.boutique-frame-title{
	margin: 0;
	line-height: 1.3;
	font-family: sans-serif;
	font-weight: normal;
	color: #222;
	text-align:center;
}

/* Text area of all frames */
/* Note that this is the complete text layer, including the title header inside */
.boutique-frame-text{
	font-family: Verdana, sans-serif;
	line-height: 1.2;
	color: #444;
	background: none;
	margin: 0;
	padding: 10px 15px 14px;
}

/* The most frontal item (frame 3) */
.boutique .front .boutique-frame-image{
	margin: 6px; /* Determines the gap between image and frame border */
}
.boutique .front .boutique-frame-title{
	font-size: 14px; /* Front frame title header */
}
.boutique .front .boutique-frame-text{
	font-size: 10px; /* Front frame description text */
}

/* The further back items (frame 2 and 4) */
.boutique .behind .boutique-frame-image{ /* Determines the gap between image and frame border */
	margin: 3px;
}
.boutique .behind .boutique-frame-title{ /* Behind frame title headers */
	font-size: 10px;
}
.boutique .behind .boutique-frame-text{ /* Behind frame description text */
	font-size: 10px;
}

/* The furthest back items (frame 1 and 5) */
.boutique .back .boutique-frame-image{ /* Determines the gap between image and frame border */
	margin: 1px;
}
.boutique .back .boutique-frame-title{ /* Back frames title headers */
	font-size: 11px;
}
.boutique .back .boutique-frame-text{ /* Back frame description text */
	font-size: 6px;
}

/* ==========================================================================
   BEGIN MEDIA QUERY 1000
   ========================================================================== */ 
@media (max-width: 1000px) {
    
#parent{
	position: relative;
	width: 80%;
	margin: 0 0 0 10%;
	height:400px;
}

}


/* ==========================================================================
   BEGIN MEDIA QUERY 480
   ========================================================================== */ 
@media (max-width: 480px) {
    
#parent{
	position: relative;
	width: 80%;
	margin: 0 0 0 10%;
	height:400px;
}

}

/* Stylesheet: ROELL: carroussel Modified On 2017-04-20 18:30:43 */