/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; padding: 0; }
img { vertical-align: middle; }
fieldset { border: 0; margin: 0; padding: 0; }
.chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

html { box-sizing: border-box; *behavior: url(boxsizing.htc); }
*, *:before, *:after { box-sizing: inherit; }

/* ==========================================================================
   Custom styles
   ========================================================================== */

body { font-family: "TyponineSans Regular 23"; font-size: 14px; color: #999; }
i, em { font-family: "TyponineSans Regular Italic 19"; }
a { color: #999; text-decoration: none; }
a:hover, a.active { color: #333; }
img { width: 100%; height: auto; }
h1 { font-size: 19px; line-height: 1.05; color: #333; font-weight: normal; margin: 0; padding: 0; margin-bottom: 20px; }
p { font-size: 14px; line-height: 1.07;  margin: 0; padding: 0; margin-bottom: 10px; }

.wrapper { width: 90%; max-width: 828px; margin: 0 auto; }

header { padding: 10px 0 0 0; position: relative; z-index: 9999 }

.logo a { color: #333; }


/* Flexnav Base Styles */

.flexnav { -webkit-transition: none; -moz-transition: none; -ms-transition: none; transition: none; -webkit-transform-style: preserve-3d; overflow: hidden; margin: 0 auto; width: 100%; max-height: 0; }
.flexnav.opacity { opacity: 0; }
.flexnav.flexnav-show { max-height: 2000px; opacity: 1; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } 
.flexnav li { font-size: 100%; position: relative; overflow: hidden; display: block; }
.flexnav li a { font-size: 14px; position: relative; display: block; z-index: 2; overflow: hidden; padding: 5px 0; }
.flexnav li ul { width: auto; }
.flexnav li ul li { font-size: 100%; position: relative; overflow: hidden; /*float: left;*/ }
.flexnav li ul.flexnav-show li { overflow: visible; }
.flexnav li ul li a { display: block; line-height: 1; background: #e6e6e6; color: #4d4d4d; padding: 0 40px 10px 10px; margin: 0;  }
.flexnav li ul li:first-child a { padding-top: 10px; }
.flexnav li ul li a:hover { color: #333; }
.flexnav ul li ul li a { background: #e6e6e6; }
.flexnav ul li ul li ul li a { background: #e6e6e6; }
.flexnav .touch-button { position: absolute; z-index: 999; top: 5px; right: 0; width: 50px; display: inline-block; text-align: center; }
.flexnav .touch-button:hover { cursor: pointer; }
.menu-button { position: relative; display: block; cursor: pointer; padding: 10px 0; }
.menu-button .touch-button { position: absolute; z-index: 999; top: 10px; right: 0; width: 50px; display: inline-block; text-align: center; }

.headerFooter { clear: both; padding: 40px 0 10px 0; border-bottom: 1px dotted #333; }

.headerHeadline {   
  float: left; color: #333; line-height: 15px; letter-spacing: 0.2em;
 -moz-font-feature-settings:"smcp" 1, "c2sc" 1; 
-moz-font-feature-settings:"smcp=1, c2sc=1"; 
-ms-font-feature-settings:"smcp" 1, "c2sc" 1; 
-o-font-feature-settings:"smcp" 1, "c2sc" 1; 
-webkit-font-feature-settings:"smcp" 1, "c2sc" 1; 
font-feature-settings:"smcp" 1, "c2sc" 1;
}
.social { float: right; }
.social a { float: left; display: block; width: 15px; height: 15px; background-image: url(../img/social.svg); background-repeat: no-repeat; margin-left: 15px; }
.social a:first-child { margin-left: 0; }
#ref_fb {}
#ref_tw { background-position: 0 -30px; }
#ref_mail { background-position: 0 -60px; }


.thumbs { margin: 0 -7px; }
.thumb { position: relative; display: inline-block; *display: inline; zoom: 1; vertical-align: top; padding: 0 7px; margin-bottom: 14px; }
.thumbImg { /*width: 100%; position: relative; overflow: hidden;*/ } 
/*.thumbImg img { position: absolute; top:0; left:0; width: 100%; height:100%; object-fit: cover; object-position: center center; overflow: hidden; }*/

.width100 { width: 100%; }
.width100 .thumbImg { padding-top: 46.01449275362319%;} 
.width50 { width: 50%; }
.width50 .thumbImg { padding-top: 46.01449275362319%;} 
.width25 { width: 25%; }
.width25 .thumbImg { padding-top: 100%;} 
.width33 { width: 33.333333333%; }

.thumbHover {
  position: absolute; top: 0; left: 7px; bottom: 0;
  display: inline-block; *display: inline; zoom: 1;
  background-color: #fff; background-color: rgba(255,255,255,0.8); 
  padding: 15px;
  opacity: 0;
  transition: opacity .5s ease-out;
  -moz-transition: opacity .5s ease-out;
  -webkit-transition: opacity .5s ease-out;
  -o-transition: opacity .5s ease-out;
}
.thumb:hover .thumbHover { opacity: 1; }
.width100 .thumbHover { width: 25%; width: calc(25% - 14px); height: 50%; }
.width50 .thumbHover { width: 50%; width: calc(50% - 14px) }
.width25 .thumbHover { width: 100%; width: calc(100% - 13px) }

.thumbHover p { color: #333; line-height: 1.14; margin: 0; }
.thumbHover p span { color: #999; }

.thumbTxt { padding-top: 7px; }
.thumbTxt p { color: #333; line-height: 1.14; margin: 0; }
.thumbTxt p span { color: #999; }

.col14 { float: left; width: 25%; }
.col34 { float: left; width: 75%; }
.col12 { float: left; width: 50%; }

.colTxt { margin: 14px 0; padding-right: 15px; }
.col12.colTxt { padding-right: 10%; }

.itemImage img { display: block; margin-bottom: 14px; }

.newsItem { border-bottom: 1px dotted #333;  }
.newsItem:last-child { border-bottom: 0  }

.datum { color: #333 }

.addToCart { border-top: 1px dotted #333; padding-top: 14px; margin-top: 20px  }
.addToCart a { color: #333 }

.contact { line-height: 1.26; }
.contact a { color: #333 }

.gMap { position: relative; padding-bottom: 100%; height: 0; overflow: hidden; }
.gMap iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;  }

.pager { padding: 20px 7px; }
.older { float: left; }
.newer { float: right; }

.thumbInfo { padding-top: 14px; padding-bottom: 14px; }

.hRuler { height: 1px; border-top: 1px dotted #333; margin: 14px 0; }

.itemKlijent { margin: 0 -7px }

.colKlijent { padding-left: 7px; }


footer { color: #333; border-top: 1px dotted #333; padding-top: 14px; }


/* ==========================================================================
   Media Queries
   ========================================================================== */

@media all and (min-width: 480px) {

.logo { width: 31.4%; float: left; }
nav { width: 68.6%; float: left; }
.flexnav { overflow: visible; text-align: justify; font-size: 0.1px; }  
.flexnav:after { content: ''; width: 100%; display: inline-block; }
.flexnav.opacity { opacity: 1; }
.flexnav.one-page { top: 0; right: auto; max-width: 1080px; }
.flexnav li { position: relative; list-style: none; display: inline-block; overflow: visible; }
.flexnav li a { padding: 0; }
.flexnav li > ul { position: absolute; top: auto; left: 0; }
.flexnav li > ul li { width: 100%; }
.flexnav li ul li { float: left; }
.flexnav li ul li > ul { margin-left: 100%; top: 0; }
.flexnav li ul li a {  }
.flexnav li ul.open { display: block; opacity: 1; visibility: visible; z-index: 1; }
.flexnav li ul.open li { overflow: visible; max-height: 100px; }
.flexnav li ul.open ul.open { margin-left: 100%; top: 0; }
.flexnav li ul li:first-child { padding-top: 66px; } 
.menu-button { display: none; } 


}

@media all and (max-width: 640px) {

  .thumbs { margin: 0;  }
  .home-thumbs { margin: 0 -7px; }
  .thumbsShop { margin: 0 -7px; }
  .thumb { display: block; padding: 0; }
  .thumbShop { display: inline-block; *display: inline; zoom: 1; padding: 0 7px; }
  .width50 { width: 100%; }
  .width25, .width33 { width: 50%; }
  .width25 .thumbImg { padding-top: 100%;} 
  .thumbHover { position: relative; top: auto; left: auto; bottom: auto; padding: 15px 0 0 0; opacity: 1; }
  .width100 .thumbHover, .width50 .thumbHover, .width25 .thumbHover { width: 100%; height: auto; }

  .col14, .col34, .col12 { float: none; width: 100%; }
  .colTxt, .col12.colTxt { padding-right: 0; }

  .thumbInfo { width: 100%; padding-top: 14px; padding-bottom: 14px; }
  .hRuler { display: none; }

}



@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir { background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; }
.ir:before { content: ""; display: block; width: 0; height: 150%; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
    a, a:visited { text-decoration: underline; }
    a[href]:after { content: " (" attr(href) ")"; }
    abbr[title]:after { content: " (" attr(title) ")"; }
    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    thead { display: table-header-group; }
    tr, img { page-break-inside: avoid; }
    img { max-width: 100% !important; }
    @page { margin: 0.5cm; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3 { page-break-after: avoid; }
}