body { font-size: 11px; line-height: 15px; }

.wrapper { min-width: 500px; min-height: 700px; margin: 0 auto; position: relative; }

.yellow nav li ul a, .ons-bedrijf nav li ul a, .antieke-klokken nav li ul a { color: #927E1A; }

.purple nav li ul a, .horloges nav li ul a, .moderne-klokken nav li ul a { color: #c678a7; }
/*.red nav li ul a, .reparaties nav li ul a { color: #b70510; text-shadow: 0 0 1px #fff; }*/

header > a { display: none; }

nav { position: absolute; top: 110px; left: 20px; right: 20px; padding-left: 14px; padding-right: 14px; margin: 0; }
nav .left-nav { float: left; }
nav .right-nav { float: right; }
nav ul { margin: 0; }
nav > ul > li > a.active { border-bottom: 1px solid #fff !important; background-color: rgba(11, 21, 28, 0.3) !important; }
.horloges nav ul ul { max-width: 80%; }
nav li { display: inline-block; }
nav li ul { display: none; position: absolute; left: 16px; top: 100%; right: 16px; text-shadow: 1px 1px 1px #000; }
nav li ul a { padding: 4px 4px; border-top: none; }
nav li ul a.active { color: #fff; border-top: none; }
nav li ul a:hover { border-top: none; color: #fff; }
nav li ul li + li a:before { content: ' | '; color: #365C71; }
nav li.r { float: right; }
nav li a { border: none; padding: 4px 6px 6px 6px; -webkit-transition: border-color .3s; -moz-transition: border-color .3s; -o-transition: border-color .3s; -ms-transition: border-color .3s; transition: border-color .3s; border-bottom: 1px solid transparent; margin-bottom: -1px; border-top: 1px solid transparent; }
nav li a:hover { border-top: 1px solid #fff; }
nav li a.active { border-top-color: transparent !important; }
nav li a.active + ul { display: block; }
nav li a.active + ul a { padding: 4px 0 4px 4px; margin-top: 0; }
nav li a.active + ul a.active { border-bottom: none; }

article { width: 365px; margin: 10px; float: left; padding: 10px; padding-right: 200px; border: 1px solid #b70510; }

h1 { min-height: 140px; margin-bottom: 0; }

.horloges h1 { min-height: 160px; }

footer { background: none; min-height: 0; right: 20px; left: 572px; top: 30px; height: 65px; padding: 0; text-align: right; z-index: 1; }
footer .dash { display: inline; }
footer address { position: absolute; bottom: 0; right: 0; }
footer .country-name { display: none; }
footer em { display: inline; }
footer h3 { display: none; }
footer a { cursor: text; }
footer a:hover { text-decoration: none; }
footer .adr { display: inline; }
footer a[href^="mailto"], footer a.tel { padding: 0; display: inline; background: none; margin: 0; float: none; }
footer address:hover a[href^="mailto"] { cursor: pointer; text-decoration: underline; }

a[rel="home"] { position: absolute; }

article .images { position: absolute; z-index: 2; left: 450px; right: 20px; top: 181px; }
.horloges article .images { top: 201px; }
article .images > img { margin-bottom: 10px; }
article .images h3 {
  font-size: 16px;
  margin-bottom: 15px;
}
article .images li { width: 50px; height: 50px; overflow: hidden; float: left; margin-right: 10px; margin-bottom: 10px; }
.js article .images li + li img {
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
}
.js article .images li + li { cursor: pointer; }
.js article .images li + li:hover,
.js article .images li.active { outline: 3px solid #fff; }
article .images li .image-content { display: none; }
article .images li:first-child { width: 300px; max-width: 100%; height: auto; overflow: visible; margin-left: 0px; margin-bottom: 15px; }
article .images li:first-child .image-content { display: block; position: absolute; left: 310px; bottom: 0px; }

.product-list h3 { display: none; }

.product-pictures li + li img { margin-top: 0; }

.images figcaption { position: absolute; left: 315px; bottom: 0; }
figure.product-pictures figcaption { position: static; }
figure.product-pictures ul { margin-bottom: 0; }

@media screen and (max-width: 1024px) { article { width: 390px; padding-right: 110px; } }
@media screen and (max-width: 936px) { article .images li:first-child .image-content { position: static; margin-top: 15px; } }
@media screen and (max-width: 976px) { address em { display: block; }
  address .dash { display: none; }
  article .images li:first-child { width: 240px; }
  article .images li:first-child .image-content { left: 255px; } }
@media screen and (max-width: 870px) { address em { display: none; } }
@media screen and (max-width: 816px) { nav li a { padding: 4px 4px 6px 4px; } }
body > span { position: relative; display: block; width: 100%; height: 300px; text-indent: -1234em; margin-top: -300px; background: url(img/fade.png) repeat-x 50% 100%; }


.bottom {
  clear: both; padding: 20px; max-width: 356px; color: rgba(255, 255, 255, 0.4);
  position :relative;
  z-index: 2;
}
.copy, .product-list {
  position: relative;
  z-index: 2;
}

figure.video {
  height: 0;
  margin-bottom: 15px;
  padding-top: 56.25%;
  position: relative;
}
figure.video > * {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
figure.video iframe {
  width: 100%;
  height: 100%;
  border: none;
  overflow: hidden;
}