/**
 * Front-end Framework
 *
 * Base CSS
 * Starting point for each project
 *
 * @author          Rembrand Le Compte (rembrand@marlon.be)
 * @copyright       Marlon BVBA <http://www.marlon.be>
 * @date            2012-01-23
 */
 
/* Import fonts
========================================================== */

@font-face {
    font-family: 'AsapRegular';
    src: url('../fonts/asap/Asap-Regular-webfont.eot');
    src: url('../fonts/asap/Asap-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/asap/Asap-Regular-webfont.woff') format('woff'),
         url('../fonts/asap/Asap-Regular-webfont.ttf') format('truetype'),
         url('../fonts/asap/Asap-Regular-webfont.svg#AsapRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AsapItalic';
    src: url('../fonts/asap/Asap-Italic-webfont.eot');
    src: url('../fonts/asap/Asap-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/asap/Asap-Italic-webfont.woff') format('woff'),
         url('../fonts/asap/Asap-Italic-webfont.ttf') format('truetype'),
         url('../fonts/asap/Asap-Italic-webfont.svg#AsapItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AsapBold';
    src: url('../fonts/asap/Asap-Bold-webfont.eot');
    src: url('../fonts/asap/Asap-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/asap/Asap-Bold-webfont.woff') format('woff'),
         url('../fonts/asap/Asap-Bold-webfont.ttf') format('truetype'),
         url('../fonts/asap/Asap-Bold-webfont.svg#AsapBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AsapBoldItalic';
    src: url('../fonts/asap/Asap-BoldItalic-webfont.eot');
    src: url('../fonts/asap/Asap-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/asap/Asap-BoldItalic-webfont.woff') format('woff'),
         url('../fonts/asap/Asap-BoldItalic-webfont.ttf') format('truetype'),
         url('../fonts/asap/Asap-BoldItalic-webfont.svg#AsapBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Arvil';
    src: url('../fonts/arvil/arvil_sans-webfont.eot');
    src: url('../fonts/arvil/arvil_sans-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/arvil/arvil_sans-webfont.woff') format('woff'),
         url('../fonts/arvil/arvil_sans-webfont.ttf') format('truetype'),
         url('../fonts/arvil/arvil_sans-webfont.svg#Arivl') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* =======================================================
 * SCREEN  
 * ======================================================= */

/*! normalize.css 2011-11-04T15:38 UTC - http://github.com/necolas/normalize.css */

/* HTML5 display definitions
========================================================== */

/*
 * Corrects block display not defined in IE6/7/8/9 & FF3
 */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block;}

/*
 * Corrects inline-block display not defined in IE6/7/8/9 & FF3
 */
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }

/*
 * Prevents modern browsers from displaying 'audio' without controls
 */
audio:not([controls]) { display: none; }

/*
 * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
 * Known issue: no IE6 support
 */
[hidden] { display: none; }


/* Base
========================================================== */

/*
 * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
 *    http://clagnut.com/blog/348/#c790
 * 2. Keeps page centered in all browsers regardless of content height
 * 3. Prevents iOS text size adjust after orientation change, without disabling user zoom
 *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 */

html {
    overflow-y: scroll;
    height: 100%;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
    height: 100%;
    background:url(../img/pattern-body.png);
    font: 0.938em/1.313em 'AsapRegular', sans-serif; /* 15/20 */
    color:#3d3d3d;
}

html,
butnavn,
input,
select,
textarea {
    font-family: 'AsapRegular', sans-serif;
}

/* Common
========================================================== */

.hide {
    display: none;
    padding: 0 !important;
    left: -9999px !important;    
    height: 0px !important;
    line-height: 0px !important;
    background: none !important;
}

.hidden {
    text-indent: -9999px;
}

/* Browser fixes
========================================================== */

/* Clearfix updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */
.group:before,
.group:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden; 
}
.group:after {clear: both;}
.group {zoom: 1;} /* IE < 8 */

.clear {
    clear: both;
}

/* Links
========================================================== */

a {
    color:#3d3d3d;
    text-decoration:none;
}

/* Background images & sprites
---------------------------------------------------------- */

/* sprite_ui (interface elements) */

a#logo-zahia, 
.header-banner, 
section.workshops .top, 
section.workshops .bottom,
section.cadeaubon .graphic,
section.cadeaubon .icon-present,
section.social .volgons,
section.social .facebook,
section.social .pinterest, 
.stamp,
.klant-inde-kijker .top, .klant-inde-kijker .bottom,
footer .badge,
.ribbon,
#toTop, .prettycheckbox a,
.prettyradio a,
h2.answer, .blog-search .button-search,
.label-oh, .foursquare-button
{
    background: url(../img/sprite-ui.png) no-repeat;
}

/* Typography
========================================================== */

h1.primary {
    font:1.73em 'AsapRegular', sans-serif; /*26*/
    text-transform: uppercase;
    margin:0 0 2px 0;
    padding:0;
}

h1.secundary {
    font:1.6em 'AsapRegular', sans-serif; /*24*/
    margin:0 0 25px 0;
    padding:0;
    color:#e44e29;
    line-height:1.375em;
}

h2 {
    font:1.2em 'AsapRegular', sans-serif; /*18*/
    margin:0 0 9px 0;
    padding:0;
    line-height:1.250em;  
}

h2 a:hover {
    color:#e44e29;
}

h3 {
    color:#e44f29;
    font-size:1.2em; /* 18 */
    margin:0 0 16px 0;
    padding:0;
    font-weight:normal;
}

h4 {
    color:#fff;
    font:1.73em 'Arvil', sans-serif; /* 26 */
    margin:0;
    padding:0;
    font-weight:normal;
    line-height:1em;
}

h5 {
    font:0.93em 'AsapBold', sans-serif; /*14*/
    margin:0 0 5px 0;
    padding:0;
    color:#3d3d3d;
    text-transform: uppercase;
}

p {
    margin:0;
}

i {
    font-style: normal;
    font-family:'AsapItalic',sans-serif;
}

/*
 * Addresses style set to 'bolder' in FF3+, S4/5, Chrome
*/

strong, b {
    font-weight: normal;
    font-family:'AsapBold',sans-serif;
}


/*
 * 1. Addresses CSS quotes not supported in IE6/7
 * 2. Addresses quote property not supported in S4
 */

 /* 1 */
 blockquote, q {
    quotes: none;
    border-left:3px solid #3d3d3d;
    padding-left:25px;
    font-family:'AsapItalic',sans-serif;
    margin:0 0 25px 0;
}

 /* 1 */
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

small {
    font-size: 85%; 
}

ins {
    text-decoration: none;
    color: #000;
    background-color: #ff9;
}

/*
 * Addresses styling not present in IE6/7/8/9
 */

mark {
    font-weight: bold;
    color: #000;
    background-color: #ff9;
}

del {
    text-decoration: line-through;
}

/*
 * Addresses styling not present in S5, Chrome
 */

dfn { font-style: italic; }

abbr, acronym {
    font-style: normal;
    border-bottom: none;
    cursor: help;
}

/*
 * Addresses styling not present in IE7/8/9, S5, Chrome
 */
abbr[title], dfn[title] {
    border-bottom: 1px dotted inherit;
}

a abbr {
    border: none;
}

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

/*
 * Corrects font family set oddly in IE6, S4/5, Chrome
 * en.wikipedia.org/wiki/User:Davidgothberg/Test59
 */

pre, code, kbd, samp {
    font-family: monospace, monospace;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers
 */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

hr {
    display: none;
}

/*lists
========================================================== */

ul, ol {
    margin:0;
    padding:0;
}

dd {
    margin: 0;
}

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

/* embedded content
========================================================== */

/*
 * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
 * 2. Improves image quality when scaled in IE7
 *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

/*
 * Corrects overflow displayed oddly in IE9 
 */

svg:not(:root) {
    overflow: hidden;
}

/* Figures
========================================================== */

/*
 * Addresses margin not present in IE6/7/8/9, S5, O11
 */

figure {
    margin: 0;
}

/* Forms
========================================================== */

form {
    margin: 0px;
}

/*
 * Define consistent border, margin, and padding
 */

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

/*
 * 1. Corrects color not being inherited in IE6/7/8/9
 * 2. Corrects text not wrapping in FF3 
 * 3. Corrects alignment displayed oddly in IE6/7
 */

legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}

/*
 * 1. Corrects font size not being inherited in all browsers
 * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
 * 3. Improves appearance and consistency in all browsers
 */

button, select, input, textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

.lte7 button, .lte7 select, .lte7 input, .lte7 textarea {
    vertical-align: middle;
}

/*
 * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
 */

input {
    border-radius: 0; 
    webkit-border-radius: 0
}

input:focus {
    outline: none;
}

button, input {
    line-height: normal;
}

.lte7 button, .lte7 input {
    overflow: visible;
}

.lte7 table button, .lte7 table input {
    overflow: auto;
}

button { 
    width: auto; /* or replace with a fixed width */
}

 /*
 * 1. Improves usability and consistency of cursor style between image-type 'input' and others
 * 2. Corrects inability to style clickable 'input' types in iOS
 * 3. Removes inner spacing in IE7 without affecting normal text inputs
 *    Known issue: inner spacing remains in IE6
 */

button,
input[type="button"], 
input[type="reset"], 
input[type="submit"] {
    cursor: pointer; /* 1 */
    -webkit-appearance: none; /* 2 */
    *overflow: visible;  /* 3 */
}

/*
 * 1. Addresses box sizing set to content-box in IE8/9
 * 2. Removes excess padding in IE8/9
 * 3. Removes excess padding in IE7
      Known issue: excess padding remains in IE6
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}

/*
 * 1. Addresses appearance set to searchfield in S5, Chrome
 * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
 */

input[type="search"] {
    -webkit-appearance: none; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in S5, Chrome on OS X
 */


input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

/*
 * Removes inner padding and border in FF3+
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* align checkboxes, radios, text inputs with their label
   by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

input:active {
    outline: none; /* no outline when clicking a button */
    -moz-outline-style: none;
}

input.idle,
textarea.idle {
    color:#f2af9e;
}

/*
 * 1. Removes default vertical scrollbar in IE6/7/8/9
 * 2. Improves readability and alignment in all browsers
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* Form fields
---------------------------------------------------------- */

.field {
    padding: ;
    border: ;
}

textarea.field {
}

footer input::-webkit-input-placeholder,
footer textarea::-webkit-input-placeholder {
    color:#f2af9e;
}

footer input:-moz-placeholder,
footer textarea:-moz-placeholder {
    color:#f2af9e;
}

.blog-search input::-webkit-input-placeholder,
.blog-search textarea::-webkit-input-placeholder {
    color:#666;
}

.blog-search input:-moz-placeholder,
.blog-search textarea:-moz-placeholder {
    color:#666;
}

/* Form field sizes
---------------------------------------------------------- */
 
.xx-small { width: 32px; }
.x-small { width: 54px; }
.small { width: 96px; }
.medium { width: 255px; }
.large { width: 214px; }
.x-large { width: 348px }
.xx-large { width: 564px; }

select.small {}
select.medium {}

textarea.medium {}
textarea.large {}

/* Form -> focus
---------------------------------------------------------- */

.focus .field {
    /* fancy CSS3 animation */
    -o-webkit-animation: focusGlow 2s infinite;
    -moz-webkit-animation: focusGlow 2s infinite;
    -webkit-animation: focusGlow 2s infinite;
    animation: focusGlow 2s infinite;
}

/* Table styles
========================================================== */

table {
    border-collapse: collapse;
    border-spacing:0;
}

caption {
    font-style: italic;
    color: #666;
}

td, td img { vertical-align: top; }

/* header.webshop */

header.webshop {
    width: 100%;
}

header.webshop .wrap {
    background:url(../img/pattern-green.png);
    color: #fff;
    height: 41px;
}

header.webshop .header-bottom {
    background:url(../img/header-webshop-bottom.gif) repeat-x bottom left;
    padding: 10px 27px 12px 27px;
    min-height: 5px;
}

header.webshop a {
    color: #fff;
}

header.webshop .basket {
    background:url(../img/header-webshop-basket.gif) no-repeat 0 3px;
    padding-left: 25px;
}

header.webshop .arrow {
    text-transform: none;
    background: url(../img/arrow-white-small.png) no-repeat 100% 20%; }

header.webshop .webshop-link {
    float: right;
}


/* header
---------------------------------------------------------- */

.wrap {
    width:1014px;
    margin:0 auto;
    position:relative;
}

header.primary {
    width: 100%;
    padding-bottom:45px;
}

header.primary .wrap {
    background:url(../img/pattern-header.png);
    min-height:148px;
}

.header-bottom {
    background:url(../img/header-bottom.gif) repeat-x bottom left;
    position: relative;
    min-height:148px;
}

#webshop-badge {
    display: block;
    position: absolute;
    width: 120px;
    height: 120px;
    text-indent: -9999px;
    font-size: 0;
    bottom: -40px;
    right: -60px;
    background: url(../img/webshop-badge.png) no-repeat top left;
    background-size: 100%;
}

a#logo-zahia {
    display:block;
    position:absolute;
    width:238px;
    height:107px;
    text-indent:-9999px;
    font-size:0;
    bottom:-25px;
    left:27px;
}

/*.header-banner {
    position:absolute;
    top:0px;
    right:27px;
    background-position:-238px 0;
    width:272px;
    height:60px;
    text-transform:uppercase;
    padding:18px 16px 0 18px;
}*/

.header-banner {
    position:absolute;
    top:0px;
    right:27px;
    background-position:0 -528px;
    width:296px;
    height:77px;
    text-transform:uppercase;
    padding:18px 24px 0 34px;
    line-height:1.125em; /* 18 */
}

.header-banner a {
    display:block;
}

.header-banner a:hover span em {
    padding:0px 26px 0 0;
}

.header-banner span {
    color:#3d3d3d;
    font-size:1.2em; /* 18 */
    margin-top:3px;
    line-height:1.375em; /* 18 */
}

.header-banner span em {
    font-style:normal;
}

.header-banner span.link {
    font-size:1.2em; /* 18 */
    background:url(../img/arrow-orange-big.png) 100% 30% no-repeat;
    margin-top:3px;
    line-height:1.375em; /* 18 */
}

.header-banner span.link em {
    font-style:normal;
    padding:0px 24px 0 0;
}


/* navigation
---------------------------------------------------------- */

nav.smartphone, nav.footer-smartphone {
    display:none;
}

nav.primary {
    position:absolute;
    top:115px;
    left:356px;
    font:0.96em 'AsapBold', sans-serif; /* 14,5 */
    text-shadow: -1px 0 0 #eee;
}

nav.primary ul li {
    float:left;
    margin-right:21px;
}

nav.primary li a {
    color:#333;
}

nav.primary li.selected a {
    color:#e44f29;
}

nav.primary li a:hover {
    color:#e44f29;
}

nav.secundary {
    background:url(../img/divider-dots.png) repeat-x bottom left;
    font:0.8em 'AsapRegular', sans-serif; /*12*/
    text-transform: uppercase;
    padding:21px 27px 13px 27px;
}

nav.secundary ul li {
    float:left;
    margin-right:21px;
}

nav.secundary li a {
    color:#666;
}

nav.secundary li.selected a {
    color:#e44f29;
}

nav.secundary li a:hover {
    color:#333;
}


/* main
---------------------------------------------------------- */

#main {
    width: 100%;
    position:relative;
}


/* aside
---------------------------------------------------------- */

aside {
    width:276px;
    float:left;
    padding-left:27px;
}

.promo-widget {
    width:276px;
    float:left;
    /*min-height:216px;*/
    margin-bottom:24px;
    background: url(../img/pattern-green.png);
    position: relative;
    padding: 0px;
}

.promo-widget .promo-widget-container {
    float:left;
    /*padding-left:160px;*/
    color: #fff;
    background: url(../img/header-webshop-bottom.gif) repeat-x bottom right;
    padding: 10px 10px 12px 10px;
}

.promo-widget .promo-widget-container .inner  {
  border: 1px dashed #d3e7e9;
  padding: 8px 10px 50px 10px;
  display: block;
  position:relative,
} 

.promo-widget h2 {
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
}

.promo-widget .inner:hover h2 {
    color: #fff;
}


.promo-widget p {
    font-size: .9em;
}

.promo-widget span {
    color:#fff;
    font-family:'AsapRegular', sans-serif;
    font-size: 1.06em;
}


.flag {
  width: 112px;
  height: 23px;
  padding-top: 5px;
  position: absolute;
  left:-10px;
  bottom: 25px;
  background: #e44f29;
  color: white;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  -webkit-box-shadow: -3px 3px 5px 0px rgba(0,0,0,0.34);
  -moz-box-shadow: -3px 3px 5px 0px rgba(0,0,0,0.34);
  box-shadow: -3px 3px 5px 0px rgba(0,0,0,0.34);
  color: white;
}

.flag:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-right: 8px solid #127F87;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}

.flag:before {
  content: "";
  position: absolute;
  left: 0;
  top: -5px;
  width: 0;
  height: 0;
  border-right: 10px solid #3d3d3d;
  border-top: 5px solid transparent;
}

.arrow {
    color:#e44f29;
    text-transform: uppercase;
    font-size:0.8em; /* 12 */
    background:url(../img/arrow-orange-small.png) 100% 10% no-repeat;
}

.arrow em {
    font-style:normal;
    padding:0px 18px 0 0;
}

.arrow:hover em {
    padding:0px 21px 0 0;
}

.single-arrow {
    color:#e44f29;
    text-transform: uppercase;
    font-size:0.8em; /* 12 */
    background:url(../img/single-arrow-orange.png) 100% 10% no-repeat;
}

.single-arrow em {
    font-style:normal;
    padding:0px 18px 0 0;
}

.breadcrumb {
    padding-left:7px;
    color:#e44f29;
    text-transform: uppercase;
    font-size:0.8em; /* 12 */
}

.arrow-back {
    color:#e44f29;
    text-transform: uppercase;
    font-size:0.8em; /* 12 */
    background:url(../img/arrow-back.png) top left no-repeat;
    padding-left:19px;
}

.arrow-back:hover {
    padding-left:22px;
}


section.workshops {
    padding-bottom:13px;
    line-height:1.250em;
}

section.workshops .top {
    background-position:0 -108px ;
    width:276px;
    height:31px;
    margin-top:13px;
}

section.workshops .middle {
    background:url(../img/desktop-workshops.png) repeat-y;
    width:276px;
}

section.workshops .bottom {
    background-position:0 -143px ;
    width:276px;
    height:15px;
}

section.workshops .inner {
    padding:10px 20px;   
}

section.workshops .item {
    background:url(../img/divider-dots.png) repeat-x bottom left;
    padding-bottom:15px;
    margin-bottom:15px;
}

section.workshops .item img, section.workshops .item-last img {
    box-shadow: 2px 2px 2px #888888;
    width:50px;
    float:left;
}

section.workshops .item div, section.workshops .item-last div {
    width:168px;
    padding-left:18px;
    float:left;
}

section.workshops .item p, section.workshops .item-last p {
    font-size:0.86em; /* 13 */
    margin:-3px 0 3px 0;
}

#workshop-counter {
    width: 150px;
    height: 180px;
    position: absolute;
    left: -140px;
    margin-top: -100px;
    background: url(../img/circled.png) no-repeat top left;
    background-size: 100%;
    padding: 95px 0px 0px 10px;
    text-align: center;
}

#workshop-counter span{
    display: block;
    color: #e44f29;
    font: 1.73em 'AsapBold', sans-serif;
}

section.cadeaubon {
    margin:21px 0 36px 0;
}

section.cadeaubon .graphic {
    background-position:-288px -89px ;
    width:271px;
    height:46px;
    margin-bottom:10px;
}

section.cadeaubon .graphic a {
    display: block;
    height:46px;
}

section.cadeaubon .icon-present {
    background-position:0 -159px;
    height:21px;
    padding-left:25px;
    margin-left:25px;
}

section.social .volgons {
    background-position:0 -183px ;
    width:105px;
    height:33px;
    margin-bottom:12px;
}

section.social a.facebook {
    float:left;
    background-position:0 -226px ;
    width:91px;
    height:120px;
}

section.social a.pinterest {
    float:left;
    background-position:-91px -226px ;
    width:99px;
    height:120px;
}

section.social a.instagram {
    background: url(../img/instagram.png) no-repeat;
    float:left;
    background-position: 0px 0px ;
    width:86px;
    height:101px;
}

section.social a.facebook:hover {
    float:left;
    background-position:0 -346px ;
    width:91px;
    height:120px;
}

section.social a.pinterest:hover {
    float:left;
    background-position:-91px -346px ;
    width:99px;
    height:120px;
}

section.social a.instagram:hover {
    float:left;
    background-position: 0px -101px;
    width:86px;
    height:101px;
}

.aside-blog {
    padding-top:20px;
}

.aside-blog .content {
    padding:20px 0 13px 0;
}

.aside-blog article {
    padding-top:10px;
}

.aside-blog article a {
    display:block;
}

.aside-blog article a:hover {
    color:#e44f29;
}

.aside-blog article .date {
    display:inline-block;
    background:url(../img/divider-dots.png) repeat-x bottom left;
    padding:13px 0;
    margin-bottom:13px;
    color:#666;
    font-size:0.93em; /* 14 */
}

aside .title {
    min-height:67px;
}

section.kalender, section.kalender-view {
    padding-bottom:13px;
}

section.kalender p a {
    border-bottom: 1px solid #93918D;
}

section.kalender p a:hover {
    border-bottom: 1px solid #3d3d3d;
}

section.kalender h2 {
    margin:20px 0 9px 0;
}

section.kalender p, section.kalender-view p {
    line-height:1.413em;
    padding-bottom:10px;
}

section.kalender-view h2 {
    margin:0 0 13px 0;
}

section.kalender-view .item {
    padding-bottom:34px;
}

ul.date {
    list-style-type:none;
    font-size:0.93em; /* 14 */
}

ul.date .arrow {
    list-style-type:none;
    font-size:0.86em; 
}

ul.date .arrow:hover em {
    padding:0 18px 0 0;
}

ul.date li {
    background:url(../img/divider-dots.png) repeat-x bottom left;
    padding:6px 0 5px 0;
    min-height:21px;
}

ul.date li .where {
    float:left;
}

ul.date li .subscribe {
    float:right;
    color:#666;
}

/* aside-medewerkers */

.aside-medewerkers .title {
    min-height:47px;
}

.aside-medewerkers .medewerker {
    margin-bottom:20px;
}

.aside-medewerkers .medewerker .pic {
    float:left;
    margin-right:20px;
    background:url(../img/pattern-light-brown.png);
    padding:4px;
    width:74px;
    height:61px;
}

.aside-medewerkers .medewerker .content {
    float:left;
    width:170px;
}

.aside-medewerkers .medewerker .content a {
    border-bottom:1px solid #93918D;
}

.aside-medewerkers .medewerker .content a:hover {
    border-bottom:1px solid #3d3d3d;
}


/* blog-search */

.blog-search {
    margin-bottom:34px;
}

.blog-search dl {
    margin:0 0 10px 0;
    padding:0;
}

.blog-search dd {
    position:relative;
    height:60px;
}

.blog-search .field {
    background:url(../img/pattern-light-brown.png);
    border:none;
    box-shadow: 0 0 5px #C1BDB6 inset;
    color:#666;
    float: left;
    font:0.938em/1.313em 'AsapItalic',sans-serif;
    padding: 10px 20px;
    width:236px;
}

.blog-search .button-search {
    position:absolute;
    top:9px;
    right:0;
    background-position:-784px -6px;
    width:44px;
    height:30px;
    border:none;
    text-indent:-9999px;
    font-size:0;
}


/* blog-archive */

.blog-archive {
    margin-bottom:34px;
}

.blog-archive .title {
    min-height:47px;
}


/* blog-tags */

.blog-tags {
    margin-bottom:10px;
}

.blog-tags .title {
    min-height:47px;
}

.blog-tags ul {
    list-style-type:none;
}

.blog-tags li {
    float:left;
    height:33px;
    margin-right:6px;
    font-size:0.86em; /* 13 */
}

.blog-tags li a {
    background:url(../img/pattern-dark-brown.png);
    border-radius:7px;
    padding:6px 12px; 
    color:#666;
}

.blog-tags li a:hover {
    background:url(../img/pattern-orange.png);
    color:#fff;
}


/* actions */

.actions {
    position:relative;
    margin-top:34px;
    height:40px;
}

.actions .prev {
    position:absolute;
    top:0;
    left:0;
}

.actions .next {
    position:absolute;
    top:0;
    right:0;
}


/* blog-detail */

section.blog-detail article {
    width:631px;
    font:1.06em/1.438em 'AsapRegular',sans-serif;
    margin-bottom:34px;
}

section.blog-detail .title {
    min-height:67px;
}

section.blog-detail h2 {
    font: 1.06em/1.25em 'AsapBold',sans-serif;
    margin:0 0 10px 0;
}

section.blog-detail h2 a {
    font: 1.06em/1.25em 'AsapBold',sans-serif;
    margin:0 0 10px 0;
}

section.blog-detail span.date {
    background: url("../img/divider-dots.png") repeat-x left bottom;
    color: #666;
    display: inline-block;
    font-size: 0.93em;
    margin-bottom: 20px;
    padding-bottom: 12px;
}

section.blog-detail .image {
    background: url("../img/pattern-light-brown.png");
    padding:6px 6px 0 6px;
    margin:25px 0;
}

section.blog-detail ul, .content-page ul {
    list-style-type:none;
    margin:15px 0;
}

section.blog-detail ul li, .content-page ul li {
    background: url("../img/arrow-grey-small.png") no-repeat 0 5px;
    margin-bottom: 7px;
    padding-left: 20px;
}

section.blog-detail ol, .content-page ol {
    padding-left: 20px;
    margin:15px 0;
}

section.blog-detail img {
    margin:15px 15px 15px 0;
}


/* letters */

ul.letters {
    list-style-type: none;
    margin-bottom:34px;
}

ul.letters li {
    float:left;
    margin:0 8px 14px 0;
}

ul.letters li a {
    padding:4px 11px;
    border-radius: 20px;
    background:#444;
    color:#fff;
    font:1.4em 'Arvil', sans-serif; /* 27 */
}

ul.letters li a:hover  {
    background: url("../img/pattern-orange.png");
}

ul.letters li.selected a {
    background: url("../img/pattern-orange.png");
}

ul.letters li.unactive a {
    color:#999;
    cursor:default;
}

ul.letters li.unactive a:hover {
    background:#444;
}


/* kalender-desktop
---------------------------------------------------------- */

#kalender {
    padding:0 23px;
    min-height:515px;
    width:968px;
    margin-bottom:34px;
}

.kalender-info {
    width:650px;
}

.kalender-info .action-prev, .kalender-info .action-next {
    float:left;
    width:150px;
    margin:15px 0;
}

.kalender-top {
    margin-top:13px;
    background:url(../img/desktop-kalender-top.png);
    width:964px;
    height:31px;
}

.kalender-content {
    background:url(../img/desktop-kalender-content.png);
    width:966px;
    min-height:200px;
}

.kalender-bottom {
    background:url(../img/desktop-kalender-bottom.png);
    width:964px;
    height:7px;
}

.kalender-content .inner {
    padding-left:3px;
}

.kalender-content .days-wrapper {
    position: relative;
    list-style: none;
}

.calendar {
    position: relative;
}

.kalender-content .day {
    float:left;
    margin: 0 0 0 -1px;
    padding: 0;
    width:138px;
    border-left: 1px dotted #999;
}

.kalender-content .first {
    border-left:none;
    width:132px;
}

.kalender-content .last {
    border-right:none;
    width:132px;
}

.kalender-content .today {
    background:url(../img/desktop-kalender-active.gif) repeat-y;
}

.today .day-title {
    background:url(../img/pattern-orange.png);
    color:#fff;
}

.day-title {
    padding:7px 11px;
    border-top:1px dotted #999;
    border-bottom:1px dotted #999;
}

.day-title h1 {
    font-size:0.93em; /* 14 */
    text-transform:uppercase;    
    margin:0;
    padding:0;
}

.day-title h2 {
    margin:0;
}

.day-workshop {
    padding:15px 11px;
    border-bottom:1px dotted #999;
}

.day-workshop a.workshop-link {
    display:block;
    text-decoration: underline;
    margin-bottom:10px;
    font-size:0.86em; /* 13 */
    line-height:1.313em; 
}

.day-workshop a.workshop-link:hover {
    color:#e44f29;
}

.day-workshop .workshop-details {
    font-size:0.86em; /* 13 */
    line-height:1.313em; 
}

.day-workshop .subscribe {
    margin-top:12px;
    color:#666;
}

.kalender-content .days {
    width: 960px;
    overflow: hidden;
}


/* content
---------------------------------------------------------- */

#content {
    float:right;
    padding-right:23px;
    min-height:515px;
}


/* subnav */

ul.subnav {
    list-style-type:none;
    margin-bottom:34px;
    border-top:1px dotted #928f85;
}

ul.subnav li {
    border-bottom:1px dotted #928f85;
    padding:9px 0 7px 0;
}

ul.subnav li a {
    display:block;
    background:url(../img/arrow-black-small.png) no-repeat 100% 50%;
    color:#000;
}

ul.subnav li a:hover, ul.subnav li a:focus {
    color:#e44f29;
}

ul.subnav li.selected a {
    color:#e44f29;
    background:url(../img/arrow-orange-small.png) no-repeat 100% 50%;
}


/* visual */

section.visual {
    width:631px;
    margin-bottom:40px;
}

section.visual .background {
    background:url(../img/pattern-orange.png);
    width:631px;
}

section.visual .fade-flexslider {
    padding:6px;
    width:619px;
}

section.visual .caption {
    background:url(../img/pattern-orange.png);
    width:619px;
    padding:0;
}

section.visual .caption h1.primary {
    font-size:1.33em; /*20*/
    margin-bottom:7px;
}

section.visual .caption div {
    padding:14px 20px 10px 20px;
    color:#fff;
    line-height:1.438em;
}

section.visual .flex-control-nav {
    display:none;
}

section.visual .flex-direction-nav .flex-prev {
    left: 20px;
    width: 30px;
}

section.visual .flex-direction-nav .flex-next {
    right: 20px;
    width: 30px;
    background-position:100% 0;
}

section.visual .bottom {
    background:url(../img/visual-bottom.gif) repeat-x;
    height:2px;
    width:631px;
}

section.slider .flex-direction-nav .flex-prev {
    left: 20px;
    width: 30px;
}

section.slider .flex-direction-nav .flex-next {
    right: 20px;
    width: 30px;
}

.header-banner .flex-direction-nav .flex-prev {
    display:none;
}

.header-banner .flex-direction-nav .flex-next {
    display:none;
}

/* blog */

.blog article {
    margin-top:34px;
}

.blog article .pic {
    float:left;
    background:url(../img/pattern-light-brown.png);
    width:277px;
    /*height:231px;*/
}

.blog article .pic:hover, .blog article .pic:focus {
    background:url(../img/pattern-dark-brown.png);
}

.blog article .pic img {
    margin:6px 0 0 6px;
    max-width:265px;
}

.blog article .content {
    float:left;
    margin-left:34px;
    width:320px;
}

.blog article .content p {
    margin-bottom:13px;
}

.blog article .date {
    display:inline-block;
    background:url(../img/divider-dots.png) repeat-x bottom left;
    padding-bottom:12px;
    margin-bottom:20px;
    color:#666;
    font-size:0.93em; /* 14 */
}

/* page */

section.page {
    width:631px;
    margin-bottom:34px;
}

section.page .title, section.page-fiche .title {
    min-height:67px;
}

section.page .content .col01, section.page .content .col02 {
    float:left;
} 

section.page .content .inner {
    font-size:0.93em; /* 14 */
} 

section.page-fiche .content h2 {
    font: 1.06em/1.25em 'AsapBold',sans-serif;
    margin:25px 0 9px 0;
}  

section.page .content .col01 {
    margin:31px 31px 0 0;
    width:209px;
}

section.page .content .col02 {
    margin-top:31px;
    width:329px;
}

.social-buttons {
    margin:0 0 15px 0;
}


/* orange-intro */

section.page .orange-intro {
    background:url(../img/pattern-orange.png);
    width:619px;
    margin-bottom:34px;
    padding:6px;
    color:#fff;
    font: 1.06em/1.438em 'AsapRegular', sans-serif; /* 16/23 */
}

section.page .orange-intro img {
    float:left;
    width:373px;
    margin:0 25px 10px 0;
}

section.page .orange-intro .content {
    padding:20px 25px;
}

section.page .orange-intro .content a {
    color:#fff;
    border-bottom:1px solid #eda594;
}

section.page .orange-intro .content a:hover {
    color:#fff;
    border-bottom:1px solid #fff;
}

section.page .widgetrow {
    margin-bottom:15px;
}


/* content-page */

section.page .content-page {
    background:url(../img/pattern-light-brown.png);
    width:619px;
    margin-bottom:34px;
    padding:6px;
    color:#3d3d3d;
    font: 1.06em/1.438em 'AsapRegular', sans-serif; /* 16/23 */
}

section.page .content-page img {
    float:left;
    width:373px;
    margin:0 25px 10px 0;
}

section.page .content-page .content {
    padding:20px 25px;
}

section.page .content-page .content a {
    color:#3d3d3d;
    border-bottom:1px solid #93918d;
}

section.page .content-page .content a:hover {
    color:#3d3d3d;
    border-bottom:1px solid #3d3d3d;
}

section.page .content-page .content h3 {
    color:#3d3d3d;
    margin:24px 0 16px 0;
}


/* faq-page */

section.page .faq-page {
    background:url(../img/pattern-light-brown.png);
    width:619px;
    margin-bottom:34px;
    color:#3d3d3d;
    font: 1.06em/1.438em 'AsapRegular', sans-serif; /* 16/23 */
}

section.page .faq-page .block {
    padding:20px 25px;
    border-bottom:1px dotted #928f85;
    margin-bottom:10px;
}

section.page .faq-page .block-last {
    padding:20px 25px;
    border-bottom:none;
    margin-bottom:0;
}

section.page .faq-page h2 {
    font:1.06em/1.25em 'AsapBold',sans-serif; /* 15,9 */
    margin:0 0 20px 0;
    text-transform:uppercase;
}

section.page .faq-page h2.answer {
    background-position:-777px -81px;
    padding-left:30px;
    margin:0 0 20px 0;
    text-transform:none;
}

section.page .faq-page .block a, section.page .faq-page .block-last a {
    border-bottom:1px solid #93918D;
}

section.page .faq-page .block a:hover, section.page .faq-page .block-last a:hover {
    border-bottom:1px solid #3d3d3d;
}



/* intro-inschrijven */

section.page .intro-inschrijven {
    background:url(../img/pattern-orange.png);
    width:619px;
    margin-bottom:34px;
    padding:6px;
    color:#fff;
    font: 1.06em/1.438em 'AsapRegular', sans-serif; /* 16/23 */
}

section.page .intro-inschrijven img {
    float:left;
    width:373px;
}

section.page .intro-inschrijven .content {
    float:left;
    padding-top:20px;
    width:233px;
}

section.page .intro-inschrijven .content a {
    color:#fff;
    border-bottom:1px solid #eda594;
}

section.page .intro-inschrijven .content a:hover {
    color:#fff;
    border-bottom:1px solid #fff;
}

section.page .intro-inschrijven .content span {
    display:block;
    text-transform: uppercase;
    font-size:0.8em; /* 12 */
    margin:0 0 15px 20px;
}

section.page .intro-inschrijven .content .workshop-title {
    height:180px;
    margin-left:20px;
}

.ribbon {
    background-position:-573px -276px;
    width:193px;
    height:50px;
    text-transform: uppercase;
    font-size:0.8em; /* 12 */
    line-height:1.5em;
    padding:12px 20px 0 20px;
}


/* section.page big-items */

section.page .big-items {
    width:667px;
    margin-left:-24px;
}

section.page .item-big .pic {
    float:left;
    background:url(../img/pattern-light-brown.png);
    width:304px;
    height:253px;
    margin:0 0 24px 24px;
}

section.page .item-big .pic:hover, section.page .item-big .pic:focus {
    background:url(../img/pattern-dark-brown.png);
}

section.page .item-big .pic img {
    margin:6px 0 0 6px;
}


/* section.page article */

section.page article {
    margin:34px 0;
}

section.page article .pic {
    float:left;
    background:url(../img/pattern-light-brown.png);
    width:139px;
    min-height:50px;
}

section.page article .pic:hover, section.page article .pic:focus {
    background:url(../img/pattern-dark-brown.png);
}

section.page article .pic img {
    margin:6px 0 0 6px;
}

section.page article .content {
    float:left;
    margin-left:33px;
    width:459px;
}

section.page article .content p {
    margin-bottom:13px;
}

section.page .items {
    width:631px;
    margin:0 0 25px -15px;
}

section.page .item {
    float:left;
    background:url(../img/pattern-light-brown.png);
    width:300px;
    min-height:116px;
    margin:0 0 15px 15px;
    position: relative;
}

.label-new {
    position:absolute;
    top:82px;
    /*left:6px;*/
    left:150px;
    background:url(../img/label-new.png);
    width:69px;
    height:28px;
}

section.page .item .image {
    float:left;
    background:url(../img/pattern-light-brown.png);
    width:127px;
    height:104px;
    margin:6px 10px 0 6px;
}

section.page .item .content {
    background:url(../img/workshop-arrow.png) bottom right no-repeat;
    float:left;
    width:156px;
    min-height:116px;
    font: 0.86em/1.375em 'AsapRegular', sans-serif; /* 13/23 */
}

section.page .item a:hover .content {
    background:url(../img/workshop-arrow-active.png) bottom right no-repeat;
    float:left;
    width:156px;
    min-height:116px;
    font: 0.86em/1.375em 'AsapRegular', sans-serif; /* 13/23 */
}

section.page .item .content div {
    padding:10px;
}

section.page .workshop-info {
    width:631px;
    margin-bottom:34px;
}

section.page .workshop-info .cost {
    float:left;
    width:180px;
    padding-right:20px;
}

.note {
    color:#666;
    font-size:0.86em; /* 13 */
    padding-top:6px;
}

section.page .workshop-info .subscribe-info {
    float:left;
    width:399px;
    padding-left:31px;
    border-left:1px dotted #B7B6B3;
}

section.page .workshop-info .subscribe-info h2 {
    margin:0 0 20px 0;
}


/* page */

.fiche-letter {
    float:left;
    padding-right:20px;
    width:100px;
    color:#666;
    font:13.3em 'Arvil', sans-serif; /* 200 */
    line-height:0.7em;
}

.fiche-content {
    border-left: 1px dotted #B7B6B3;
    float: left;
    padding-left: 31px;
    width: 479px;
}

section.page-fiche article {
    margin:0 0 34px 0;
}

section.page-fiche article .pic {
    background: url("../img/pattern-light-brown.png") repeat scroll 0 0 transparent;
    float: left;
    height: 116px;
    width: 139px;
}

section.page-fiche article .pic:hover {
    background: url("../img/pattern-dark-brown.png") repeat scroll 0 0 transparent;
}

section.page-fiche article .pic img {
    margin:6px 0 0 6px;
}

section.page-fiche article .content {
    float:left;
    margin-left:33px;
    width:259px;
}

section.page-fiche article .content p {
    margin-bottom:13px;
}

section.page-fiche .fiche-content article .content h2 {
    margin:0 0 9px 0;
    font:1.2em/1.25em 'AsapRegular',sans-serif;
}

section.page-fiche .fiche-content .inner .pic {
    background: url("../img/pattern-light-brown.png") repeat scroll 0 0 transparent;
    float: right;
    height: 116px;
    width: 139px;
    margin:0 0 25px 25px;
}

section.page-fiche .fiche-content .inner .pic img {
    margin:6px 0 0 6px;
}


/* subscribe-form */

.subscribe-form dl {
    position:relative;
}

.subscribe-form dt {
    position:absolute;
    top:7px;
    left:0;
    width:180px;
}

.subscribe-form dd {
    position:relative;
    padding:0 0 0 200px;
}

.subscribe-form label {
    color:#666;
    font-size:0.86em; /* 13 */
}

.subscribe-form .radio {
    padding-left:5px;
}

.subscribe-form .field {
    float:left;
    background:url(../img/pattern-light-brown.png);
    padding:10px 20px;
    font-family:'AsapItalic', sans-serif; 
    color:#3d3d3d;
    border:none;
    -moz-box-shadow:    inset 0 0 5px #c1bdb6;
    -webkit-box-shadow: inset 0 0 5px #c1bdb6;
    box-shadow:         inset 0 0 5px #c1bdb6;
}

.subscribe-form .field:focus {
    -moz-box-shadow:    inset 0 0 5px #95928d;
    -webkit-box-shadow: inset 0 0 5px #95928d;
    box-shadow:         inset 0 0 5px #95928d;
}

.subscribe-form .checkbox {
    vertical-align: text-top;
    margin:5px 7px 0 0;
    font-size:0.86em; /* 13 */
}

.subscribe-form .extra {
    line-height:2.5em;
    margin-left:15px;
    float:left;
}

.subscribe-form .error input {
    border:3px solid #e44f29;
}

.subscribe-form input.button {
    background:#3d3d3d;
    padding:10px 20px;
    font-family:'AsapRegular', sans-serif; 
    color:#fff;
    border:none;
    text-transform:uppercase;
    margin:8px 0;
}

.subscribe-form input.button:hover, .subscribe-form input.button:focus {
    background:#e44f29;
}

.subscribe-form .error-msg {
    float:left;
    padding-left:25px;
    color:#e44f29;
    text-transform: uppercase;
    font-size:0.8em; /* 12 */
    padding-top:9px;
}

.subscribe-form .info-msg {
    padding-left:200px;
    font:0.8em 'AsapItalic',sans-serif;
}


/* ul.grey-arrows */

ul.grey-arrows {
    list-style-type: none;
}

ul.grey-arrows li {
    list-style-type: none;
    background:url(../img/arrow-grey-small.png) no-repeat 0 5px;
    padding-left:20px;
    margin-bottom:7px;
}

ul.grey-arrows a:hover {
    border-bottom:1px solid #3d3d3d;
}

.related-fiches {
    margin-bottom:34px;
}

ul.grey-arrows a {
    border-bottom:1px solid #93918D;
}

ul.grey-arrows a:hover {
    border-bottom:1px solid #3d3d3d;
}

section.page .faq-page ul.grey-arrows a {
    border-bottom:none;
}

section.page .faq-page ul.grey-arrows a:hover {
    border-bottom:1px solid #3d3d3d;
}

a.foursquare-button {
    float:right;
    background-position:-640px -509px;
    width:87px;
    height:20px;
    display:block;
    text-indent:-9999px;
    font-size:0;
    margin-left:12px;
}



/* footer
---------------------------------------------------------- */

footer {
    width: 100%;
    position:relative;
    margin-top:34px;
    color:#fff;
}

footer h3 {
    font-size:1.2em; /* 18 */
    margin:13px 0 9px 0;
}

.footer-top {
    background:url(../img/footer-top.gif) repeat-x top left;
    width:1014px;
    margin:0 auto;
    position:relative;
    height:2px;
}

footer .wrap {
    background:url(../img/pattern-orange.png);
    padding-bottom:21px;
}

footer .col01 {
    position:relative;
    float:left;
    padding:27px 0 0 27px;
    width:305px;
}

footer .col02 {
    float:left;
    padding:27px 0 0 24px;
    width:278px;
}

footer .col03 {
    float:left;
    padding:27px 0 0 34px;
    width:320px;
}

footer .content {
    font-size:0.86em; /* 13 */
}

footer .content a {
    color:#fff;
}

footer .content a:hover {
    color:#fff;
    border-bottom:1px solid #e9846b;
}

footer .title {
    height:70px;
}

footer .col02 .arrow {
    color:#f2af9e;
    text-transform: uppercase;
    font-size:0.8em; /* 12 */
    background:url(../img/arrow-lightorange-small.png) 100% 10% no-repeat;
    border:none;
}

footer .col02 .arrow:hover {
    color:#f2af9e;
    border:none;
}

footer ul {
    list-style-type:none;
}

footer .wrap li {
    background:url(../img/arrow-lightorange-small.png) 0 5px no-repeat;
    padding:0 0 13px 20px;
}

footer fieldset {
    padding: 5px 0;
    margin:0;
}

footer .msg {
    margin:20px 0 5px 0;
    font-family:'AsapItalic',sans-serif;
    font-size:1.06em; /* 16 */
    border:1px solid #e9846b;
    padding:5px 10px;
}

footer fieldset dl {
    padding-top: 13px;
    margin:0;
}

footer fieldset dd.col-left {
    float:left;
    margin-right:18px;
}

footer fieldset dd.col-right {
    float:left;
}

footer input.field {
    background:url(../img/pattern-input-footer.png);
    width:238px;
    padding:10px 20px;
    font-family:'AsapItalic', sans-serif; 
    color:#f2af9e;
    border:none;
    -moz-box-shadow:    inset 0 0 5px #93421a;
    -webkit-box-shadow: inset 0 0 5px #93421a;
    box-shadow:         inset 0 0 5px #93421a;
}

footer .placeholder {
    color:#f2af9e;
}

footer input.field:focus {
    -moz-box-shadow:    inset 0 0 5px #6a220f;
    -webkit-box-shadow: inset 0 0 5px #6a220f;
    box-shadow:         inset 0 0 5px #6a220f;
}

footer input.button {
    background:#95371f;
    padding:10px 20px;
    font-family:'AsapRegular', sans-serif; 
    color:#fff;
    border:none;
    text-transform:uppercase;
}

footer input.button:hover {
    background:#3d3d3d;
}

.stamp {
    background-position:-315px -346px ;
    width:267px;
    height:80px;
    margin-left:10px;
}

.footer-bottom {
    margin: 0 auto;
    width: 1014px;
    background:url(../img/pattern-orange.png);
    color:#fff;
}

footer .divider {
    background:url(../img/divider-dots.png) repeat-x top left;
    height:1px;
}

.footer-bottom .inner {
    padding:13px 27px 21px 27px;
    font:0.8em 'AsapRegular', sans-serif; /*12*/
    text-transform: uppercase;
    color:#702714;
    position: relative;
}

.footer-bottom .inner a {
    color:#702714;
}

.footer-bottom .inner a:hover {
    color:#3e150b;
}

.footer-bottom .credits {
    position:absolute;
    top:13px;
    right:27px;
}

.footer-bottom .copyright li {
    float:left;
    padding-right:21px;
}

.klant-inde-kijker {
    padding-left:55px;
    width:196px;
    position:relative;
}

.klant-inde-kijker .top {
    background-position:-582px 0;
    width:196px;
    height:13px;
}

.klant-inde-kijker .middle {
    background:url(../img/desktop-klantindekijker.png);
    width:196px;
}

.klant-inde-kijker .middle .inner {
    padding:0 13px 13px 13px;
    color:#3d3d3d;
}

.klant-inde-kijker .age {
    display:block;
    color:#666;
    padding-bottom:12px;
    font-size:0.93em; /*14*/
}

.klant-inde-kijker p {
    font-size:0.93em; /*14*/
    padding-bottom:10px;
}

.klant-inde-kijker .bottom {
    background-position:-582px -27px;
    width:196px;
    height:19px;
}

footer .badge {
    background-position:-190px -346px ;
    width:125px;
    height:123px;
    position:absolute;
    top:-20px;
    left:27px;
}

footer .badge h4 {
    text-align: center;
    padding:35px 25px;
}

.smartphone-show, .tablet-show {
    display:none;
}


/* toTop
---------------------------------------------------------- */

#toTop {
    display:none;
    text-decoration:none;
    position:fixed;
    bottom:90px;
    right:7px;
    overflow:hidden;
    width:62px;
    height:62px;
    border:none;
    text-indent:-999px;
    background-position:-503px -276px;
}

#toTopHover {
    background-position:-503px -276px;
    width:62px;
    height:62px;
    display:block;
    overflow:hidden;
    float:left;
    opacity: 0;
    -moz-opacity: 0;
    filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
    outline:none;
}


/* selectbox
---------------------------------------------------------- */

.sbHolder{
    background:url(../img/pattern-light-brown.png);
    width:276px;
    height:34px;
    font:0.938em/1.313em 'AsapItalic',sans-serif;
    color:#f2af9e;
    border:none;
    -moz-box-shadow:    inset 0 0 5px #c1bdb6;
    -webkit-box-shadow: inset 0 0 5px #c1bdb6;
    box-shadow:         inset 0 0 5px #c1bdb6;
    position: relative;
    margin-bottom:34px;
    outline:none;
}

.sbSelector{
    background:url(../img/arrow-down.png) no-repeat 100% 50%;
    display: block;
    height: 34px;
    left: 0;
    line-height: 34px;
    outline: none;
    overflow: hidden;
    position: absolute;
    text-indent: 20px;
    top: 0;
    width: 256px;
}
.sbSelector:link, .sbSelector:visited, .sbSelector:hover {
    color: #666;
    outline: none;
    text-decoration: none;
}

.sbOptions{
    background:url(../img/pattern-light-brown.png);
    list-style: none;
    left: 0;
    margin: 1px 0 0 0;
    padding: 0;
    position: absolute;
    top: 34px;
    width: 276px;
    z-index: 1;
    overflow-y: auto;
    -moz-box-shadow:    inset 0 0 5px #c1bdb6;
    -webkit-box-shadow: inset 0 0 5px #c1bdb6;
    box-shadow:         inset 0 0 5px #c1bdb6;
}
.sbOptions li{
    padding: 0;
}
.sbOptions a{
    border-bottom: dotted 1px #b7b6b3;
    display: block;
    outline: none;
    padding: 7px 0 7px 20px;
}
.sbOptions a:link, .sbOptions a:visited{
    color: #666;
    text-decoration: none;
}
.sbOptions a:hover,
.sbOptions a:focus,
.sbOptions a.sbFocus{
    color: #e44f29;
}
.sbOptions li.last a{
    border-bottom: none;
}
.sbOptions .sbDisabled{
    border-bottom: dotted 1px #b7b6b3;
    color: #ccc;
    display: block;
    padding: 7px 0 7px 3px;
}
.sbOptions .sbGroup{
    border-bottom: dotted 1px #b7b6b3;
    color: #3d3d3d;
    display: block;
    font-weight: bold;
    padding: 7px 0 7px 3px;
}
.sbOptions .sbSub{
    padding-left: 17px;
}


/* selectbox footer
---------------------------------------------------------- */

footer .sbHolder{
    background:url(../img/pattern-input-footer.png);
    width:130px;
    height:34px;
    font:0.938em/1.313em 'AsapItalic',sans-serif;
    color:#f2af9e;
    border:none;
    -moz-box-shadow:    inset 0 0 5px #93421a;
    -webkit-box-shadow: inset 0 0 5px #93421a;
    box-shadow:         inset 0 0 5px #93421a;
    position: relative;
    margin-bottom:13px;
}

footer .sbSelector{
    background:url(../img/arrow-down.png) no-repeat 100% 50%;
    display: block;
    height: 34px;
    left: 0;
    line-height: 34px;
    outline: none;
    overflow: hidden;
    position: absolute;
    text-indent: 20px;
    top: 0;
    width: 110px;
}
footer .sbSelector:link, footer .sbSelector:visited, footer .sbSelector:hover{
    color: #f2af9e;
    outline: none;
    text-decoration: none;
}

footer .sbOptions{
    background:url(../img/pattern-input-footer.png);
    list-style: none;
    left: 0;
    margin: 1px 0 0 0;
    padding: 0;
    position: absolute;
    top: 34px;
    width: 130px;
    z-index: 1;
    overflow-y: auto;
    -moz-box-shadow:    inset 0 0 5px #93421a;
    -webkit-box-shadow: inset 0 0 5px #93421a;
    box-shadow:         inset 0 0 5px #93421a;
}

footer .wrap .sbOptions li {
    background:none;
}

footer .content .sbHolder a:hover {
    border-bottom:none;
    color: #f2af9e;
}

footer .sbOptions li{
    padding: 0;
}

footer .sbOptions a {
    border-bottom: dotted 1px #702714;
    display: block;
    outline: none;
    padding: 7px 0 7px 20px;
}
footer .sbOptions a:link, footer .sbOptions a:visited{
    color: #f2af9e;
    text-decoration: none;
}
footer .sbOptions a:hover,
footer .sbOptions a:focus,
footer .sbOptions a.sbFocus{
    color: #fff;
}

footer .content .sbHolder .sbOptions a:hover,
footer .content .sbHolder .sbOptions a:focus,
footer .content .sbHolder .sbOptions a.sbFocus
{
    border-bottom: dotted 1px #702714;
    color: #fff;
}

footer .sbOptions li.last a{
    border-bottom: none;
}
footer .sbOptions .sbDisabled{
    border-bottom: dotted 1px #702714;
    color: #ccc;
    display: block;
    padding: 7px 0 7px 3px;
}
footer .sbOptions .sbGroup{
    border-bottom: dotted 1px #702714;
    color: #3d3d3d;
    display: block;
    font-weight: bold;
    padding: 7px 0 7px 3px;
}
footer .sbOptions .sbSub{
    padding-left: 17px;
}


/* checkbox design
---------------------------------------------------------- */

.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {clear: both;}

.clearfix {*zoom: 1;}

.prettycheckbox,
.prettyradio {
    display: inline-block;
    padding:0;
    margin:0;
}

.prettycheckbox a,
.prettyradio a{
    background-position:-613px -361px;
    width: 12px;
    height: 12px;
    display: block;
    float: left;
    cursor: pointer;
    margin:0;
}

.prettyradio a {background-position:-613px -361px;}

.prettycheckbox a:focus,
.prettyradio a:focus {outline: 0 none;}

.prettycheckbox a:focus{background-position:-613px -361px;}
.prettyradio a:focus{background-position:-613px -361px;}

.prettycheckbox a.checked{background-position:-613px -391px;}
.prettyradio a.checked {background-position:-613px -391px;}

.prettycheckbox a.checked:focus{ background-position:-613px -391px; }
.prettyradio a.checked:focus { background-position:-613px -391px; }

.prettycheckbox label,
.prettyradio label {
  display: block;
  float: left;
  margin: 6px 5px;
  cursor: pointer;
}


/* flexslider - kalender workshops
---------------------------------------------------------- */

/* Browser Resets */
.flex-container a:active,
.flexslider a:active, .fade-flexslider a:active,
.flex-container a:focus,
.flexslider a:focus, .fade-flexslider a:focus  {outline: none;}

.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider, .fade-flexslider {margin: 0; padding: 0;}
.flexslider .slides > li, .fade-flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
/*.flexslider .slides img {width: 100%; display: block;}*/
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider, .fade-flexslider {margin: 0; position: relative; zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides, .fade-flexslider .slides {zoom: 1;}

.carousel li {margin-right: 5px}

/* Direction Nav */
.flex-direction-nav {*height: 0;}
section.visual .flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(../img//bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 173px; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(../img//bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0; right:20px; }
.flex-direction-nav .flex-prev {left: 20px;}
.flexslider:hover .flex-next, .fade-flexslider:hover .flex-next, .calendar:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev, .fade-flexslider:hover .flex-prev, .calendar:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover, .fade-flexslider:hover .flex-next:hover, .fade-flexslider:hover .flex-prev:hover, .calendar:hover .flex-next:hover, .calendar:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; top: -105px; text-align: right;text-indent:-9999px;font-size:;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; font-size:0; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}




/* 404
---------------------------------------------------------- */

#error-page {
    margin:50px auto;
    min-height:515px;
    width:300px;
    margin-bottom:34px;
    text-align:center;
}

#error-page a#logo-zahia {
    bottom:0;
    display: block;
    left:31px;
    position: relative;
}

.label-oh {
    background-position:-609px -426px;
    width:102px;
    height:60px;
    margin:20px 0 20px 99px;
}

#error-page a {
    text-decoration: underline;
    display: block;
    margin-top:3px;
}

/* *******************************************************
 *
 * MEDIA QUERIES  
 *
********************************************************** */

/* screens inside ideal designed boundaries and bigger  */
@media screen and (max-width: 950px) {

    .wrap {
        width:737px;
    }

    /* header */
    
    #webshop-badge {
        right: 0px;
    }

    nav.secundary ul li {
        margin-right:27px;
    }

    nav.primary {
        position:absolute;
        top:80px;
        left:356px;
        font:0.96em 'AsapBold', sans-serif; /* 14,5 */
        text-shadow: -1px 0 0 #eee;
    }

    nav.primary ul li {
        margin:0 27px 18px 0;
    }

    .header-banner {
        display:none;
    }

    /* content */

    #content {
        float:none;
        padding-left:23px;
    }

    section.visual {
        width:683px;
        margin-bottom:34px;
    }

    section.visual .bottom {
        width:683px;
    }

    section.visual .background {
        width:683px;
    }

    section.visual .pic {
        position:absolute;
        top:0;
        left:0;
        background:url(../img/pattern-light-brown.png);
        width:683px;
        height:330px;
        margin-bottom:34px;
    }

    section.visual img {
        width:671px;
        height:318px;
    }

    section.visual .fade-flexslider {
        padding:6px;
        width:671px;
    }

    .blog article .content {
        width:370px;
    }

    section.blog-detail article {
        width:690px;
    }

    /* page */

    section.page, section.page-fiche {
        width:690px;
    }

    section.page .orange-intro, section.page .content-page {
        width:678px;
    }

    section.page .faq-page {
        width:690px;
    }

    section.page article {
        width:683px;
    }

    section.page article .content {
        width:511px;
    }

    section.page .intro-inschrijven {
        width:683px;
    }

    section.page-fiche .fiche-content article {
        width:545px;
    }

    section.page-fiche .fiche-content article .content {
        width: 365px;
    }


    /* kalender
    ---------------------------------------------------------- */

    #kalender {
        padding:0 23px;
        min-height:515px;
        width:691px;
    }

    #kalender-desktop {
        display:none;
    }

    #kalender-tablet {
        display:block;
        padding:0 23px;
        min-height:515px;
        width:691px;
        margin-bottom:34px;
    }

    .kalender-top {
        background:url(../img/tablet-kalender-top.png);
        width:691px;
        height:32px;
    }

    .kalender-content {
        background:url(../img/tablet-kalender-content.png);
        width:691px;
        min-height:200px;
    }

    .kalender-bottom {
        background:url(../img/tablet-kalender-bottom.png);
        width:691px;
        height:8px;
    }

    .kalender-content .next {
        border-right:none;
        width:133px;
        color:#666;
    }

    .kalender-content .prev {
        border-left:none;
        width:132px;
        color:#666;
    }

    .kalender-content .next a {
        color:#666;
    }

    .kalender-content a.col-next {
        display:block;
        height:300px;
    }

    .kalender-content .days {
        width: 682px;
    }

    .kalender-content .day {
        border-left: 1px dotted #999999;
        float: left;
        margin: 0 0 0 -1px;
        padding: 0;
        width: 138px;
    }

    .arrow-grey-big {
        color:#666;
        background:url(../img/arrow-grey-small.png) 100% 45% no-repeat;
    }

    .arrow-grey-big em {
        font-style:normal;
        padding:0px 18px 0 0;
    }

    .arrow-grey-big:hover em {
        padding:0px 21px 0 0;
    }
    

    /* aside */

    aside {
        width:690px;
        float:none;
        padding:34px 0 0 23px;
    }

    .aside-left {
        float:left;
    }

    .aside-right {
        float:left;
        width:332px;
    }

    .aside-blog {
        float:left;
        padding:0 0 0 34px;
        width:370px;
    }

    .aside-cadeaubon-social {
        float:left;
        padding-left:34px;
    }

    section.workshops {
        padding-bottom:13px;
    }

    #workshop-counter{
        left: 300px;
        background: url(../img/circled-flipped.png) no-repeat top left;
        background-size: 100%;
        padding-left: 0px;
        width: 160px;
    }

    section.cadeaubon {
        margin:0px 0 36px 0;
    }

    section.social {
        padding-left:34px;
    }

    .aside-cadeaubon-social-col {
        float:none;
        clear:both;
        padding-top:20px;
    }

    .aside-cadeaubon-social-col section.cadeaubon {
        float:left;
        margin:0px 0 36px 0;
        width:277px;
    }

    .aside-cadeaubon-social-col section.social {
        float:left;
        padding-left:85px;
        width:320px;
    }

    .aside-cadeaubon-social-col section.social .volgons {
        background-position:-503px -234px;
        float:left;
        padding-left:35px;
        width:95px;
    }

    /* footer */

    .footer-top, .footer-bottom {
        width:737px;
    }

    footer .col01 {
        float:none;
        padding:27px 0 0 27px;
        width:710px;
    }

    footer .col02 {
        float:left;
        padding:27px 0 0 24px;
        width:278px;
    }

    footer .col03 {
        float:left;
        padding:27px 0 0 34px;
        width:320px;
    }

    .klant-inde-kijker {
        padding-left:73px;
        width:609px;
        position:relative;
    }

    .klant-inde-kijker .top {
        background-position:0 -473px;
        width:609px;
        height:13px;
    }

    .klant-inde-kijker .middle {
        background:url(../img/tablet-klantindekijker.png);
        width:609px;
    }

    .klant-inde-kijker .middle .inner {
        padding:0 13px;
        color:#3d3d3d;
    }

    .klant-inde-kijker img {
        float:left;
        width:187px;
    }

    .klant-inde-kijker .klant {
        float:left;
        padding-left:34px;
        width:347px;
    }

    .klant-inde-kijker .bottom {
        background-position:0 -499px;
        width:609px;
        height:19px;
    }

    section.page .items {
        width:735px;
        margin:0 0 25px -31px;
    }

    section.page .item {
        float:left;
        background:url(../img/pattern-light-brown.png);
        width:332px;
        min-height:116px;
        margin:0 0 16px 31px;
    }

    section.page .item .image {
        float:left;
        background:url(../img/pattern-light-brown.png);
        width:127px;
        height:104px;
        margin:6px 10px 0 6px;
    }

    section.page .item .content {
        background:url(../img/workshop-arrow.png) bottom right no-repeat;
        float:left;
        width:188px;
        min-height:116px;
        font: 0.86em/1.375em 'AsapRegular', sans-serif; /* 13/23 */
    }

    section.page .item a:hover .content {
        background:url(../img/workshop-arrow-active.png) bottom right no-repeat;
        float:left;
        width:188px;
        min-height:116px;
        font: 0.86em/1.375em 'AsapRegular', sans-serif; /* 13/23 */
    }

    section.page .workshop-info {
        width:695px;
    }

    section.page .workshop-info .subscribe-info {
        width:451px;
    }

    section.kalender, section.kalender-view {
        width:695px;
    }

    .sbHolder{
        width:332px;
    }

    .sbSelector{
        width:312px;
    }

    .sbOptions{
        width:332px;
    }

    .blog-search .field {
        width:292px;
    }

    .blog-search .placeholder {
        color:#666;
    }

    .blog-tags li {
        height:50px;
        margin-right:18px;
        font-size:0.86em; /* 13 */
    }

    .blog-tags li a {
        background:url(../img/pattern-dark-brown.png);
        border-radius:7px;
        padding:10px 14px; 
        color:#666;
    }

    section.kalender .col01, section.kalender-view .col01 {
        float:left;
        width:332px;
        margin-right:31px;
    }

    section.kalender .col02, section.kalender-view .col02 {
        float:left;
        width:332px;
    }

    section.kalender-view .col03 {
        width:735px;
        margin-right:-31px;
    }

    section.kalender-view .item {
        float:left;
        width:332px;
        margin-right:31px;
        padding-bottom: 34px;
    }

    aside .title {
        min-height:47px;
    }

    .tablet-hide {
        display:none;
    }

    .tablet-show {
        display:block;
    }

    .tablet-show ul.subnav {
        display:block;
        width:735px;
        margin-left:-31px;
        border:none;
    }

    .tablet-show ul.subnav li {
        float:left;
        width:332px;
        margin-left:31px;
    }

    .blog-search-n-archive {
        width:698px;
    }

    .blog-search {
        float:left;
        width:332px;
        margin-right:31px;
    }

    .blog-archive {
        float:left;
        width:332px;
    }
    
    .aside-medewerkers .medewerker {
        float:left;
        width:345px;
        margin-bottom:20px;
    }

    ul.letters li {
        float:left;
        margin:0 15px 25px 0;
    }

    ul.letters li a {
        padding:7px 15px;
        border-radius: 20px;
        background:#444;
        color:#fff;
        font:1.4em 'Arvil', sans-serif; /* 27 */
    }

    .flex-control-nav {
        top: -77px;
    }

    .flex-control-nav li {
        display: inline-block;
        margin: 0 12px;
    }

    .flex-control-paging li a {
        width: 21px; 
        height: 21px; 
    }

    /* section.page big-items */

    section.page .big-items {
        width:830px;
        margin-left:-76px;
    }

    section.page .item-big .pic {
        float:left;
        background:url(../img/pattern-light-brown.png);
        width:304px;
        height:253px;
        margin:0 0 24px 76px;
    }

    section.page .item-big .pic:hover, section.page .item-big .pic:focus {
        background:url(../img/pattern-dark-brown.png);
    }

    section.page .item-big .pic img {
        margin:6px 0 0 6px;
    }

}

@media screen and (max-width: 700px) {

    #webshop-badge {
        right: 0px;
    }

    .wrap {
        width:100%;
        /*width:320px;*/
    }

    .smartphone-hide {
        display:none;
    }

    h1.primary {
        font:1.33em 'AsapRegular', sans-serif; /* 20 */
        text-transform: uppercase;
        margin:0 0 2px 0;
        padding:0;
    }

    h1.secundary {
        font:1.2em 'AsapRegular', sans-serif; /* 18 */
        line-height:1.313em;
    }

    h2 {
        font:1.06em 'AsapRegular', sans-serif; /* 16 */
        margin:0 0 9px 0;
        padding:0;      
    }

    /* header */

    header.primary {
        padding-bottom:34px;
    }

    header.primary .wrap {
        min-height:108px;
    }

    .header-bottom {
        background:url(../img/header-bottom.gif) repeat-x bottom left;
        min-height:108px;
    }

    nav.primary, nav.secundary {
        display:none;
    }

    nav.smartphone {
        background:url(../img/pattern-smartphone-nav.png);
        display:block;
        position:relative;
        width:100%;
    }

    nav.smartphone .menu {
        /*background-position:-284px -139px;
        height:42px;
        width:100%;*/
        background:url(../img/icon-menu.png) no-repeat top right;
        height:42px;
    }

    nav.smartphone a.kies-button {
        display:block;
        font-size:1.33em; /* 20 */
        background-position:0 -499px;
        padding:12px 0 7px 0;
        text-indent:12px;
        text-transform: uppercase;
        background:url(../img/divider-dots.png) repeat-x bottom left;
        width:100%;
        line-height:1.17em;
        margin:0 auto;
    }

    nav.smartphone ul {
        font:0.93em 'AsapBold',sans-serif;
        text-align: center;
        display:none;
    }

    nav.smartphone ul li {
        background:url(../img/divider-dots.png) repeat-x bottom left;
        padding:14px 27px;
    }

    nav.smartphone ul li a {
        display:block;
        color:#3d3d3d;
    }

    nav.smartphone ul li a:hover, nav.smartphone ul li a:focus {
        color:#e44e29;
    }

    a#logo-zahia {
        background-position:-582px -51px;
        width:180px;
        height:81px;
        
        position:relative;
        margin:0 auto;
        bottom:-15px;
        left:0;
    }

    /* main */

    #main {
        margin:0 auto;
    }


    /* content */

    #content {
        padding:0;
    }

    section.blog {
        width:296px;
        margin:0 auto;
    }

    section.visual {
        position:relative;
        width:300px;
        margin:0 auto 34px auto;
    }

    section.visual .bottom {
        width:300px;
    }

    section.visual .background {
        background:url(../img/pattern-orange.png);
        width: 300px;
    }

    section.visual img {
        width:288px;
        height:147px;
    }

    section.visual .fade-flexslider {
        padding: 6px;
        width: 288px;
    }

    section.visual .caption {
        width:288px;
    }

    section.visual .caption div {
        padding:12px 13px;
    }

    #workshop-counter {
        left: auto;
        margin-left: 170px;
    }

    /* blog */

    .blog article {
        margin-top:13px;
    }

    .blog article .pic {
        width:143px;
        height:119px;
    }

    .blog article .pic img {
        margin:4px 0 0 4px;
        width:135px;
        height:111px;
    }

    .blog article .content {
        width:133px;
        margin-left:17px;
    }

    .blog article .content p, .blog article .content a.arrow {
        display:none;
    }

    .blog article .date {
        background:none;
    }

    /* page */

    section.page {
        width:296px;
        margin:0 auto;
        margin-bottom:34px;
    }

    section.page .title {
        min-height:67px;
    }

    section.page .orange-intro, section.page .content-page  {
        width:284px;
        font: 0.93em/1.500em 'AsapRegular', sans-serif; /* 14/23 */
    }

    section.page .faq-page {
        width:296px;
        font: 0.93em/1.500em 'AsapRegular', sans-serif; /* 14/23 */
    }

    section.page .orange-intro img, section.page .content-page img {
        float:none;
        width:284px;
        margin:0;
    }

    section.page .orange-intro .content, section.page .content-page .content {
        padding:15px;
    }

    section.page .intro-inschrijven {
        width:296px;
        padding:0;
    }

    section.page .intro-inschrijven img {
        float:none;
        width:284px;
        margin:6px;
    }

    section.page .intro-inschrijven .content {
        float:none;
        padding-top:10px;
    }

    section.page .intro-inschrijven .content .workshop-title {
        height:auto;
        padding-bottom:25px;
        font: 0.93em/1.500em 'AsapRegular', sans-serif; /* 14/23 */
    }

    .subscribe-form dt {
        position:relative;
        width:296px;
    }

    .subscribe-form dd {
        padding:15px 0 0 0;
        width:296px;
    }

    .subscribe-form .small, .subscribe-form .medium {
        width:255px;
    }

    .subscribe-form .error .small, .subscribe-form .error .medium {
        width:249px;
    }

    .subscribe-form .error-msg {
        float:none;
        padding:0;
        margin-top:50px;
    }

    .subscribe-form input.button {
        text-align:center;
        width:296px;
        padding:12px 0;
        margin:4px 0;
    }

    .subscribe-form .info-msg {
        padding:0;
    }

    .subscribe-form .field {
        padding:12px 20px;
    }


    section.page article {
        margin:34px 0;
        width:296px;
    }

    section.page article .pic {
        float:left;
        background:url(../img/pattern-light-brown.png);
        width:143px;
        height:119px;
    }

    section.page article .pic:hover, section.page article .pic:focus {
        background:url(../img/pattern-dark-brown.png);
    }

    section.page article .pic img {
        margin:4px 0 0 4px;
        width:135px;
        height:111px;
    }

    section.page article .content {
        float:left;
        margin-left:17px;
        width:133px;
    }

    section.page article .content p {
        display:none;
    }

    section.page article .content p {
        margin-bottom:13px;
    }

    /* aside */

    aside { 
        padding:24px 0 0 0;
        width:296px;
        margin:0 auto;
    }

    .aside-left, .aside-cadeaubon-social, .aside-cadeaubon-social-col {
        float:none;
        padding:0;
    }

    .aside-blog {
        float:none;
        padding:34px 0 0 0;
        width:284px;
    }

    .aside-cadeaubon-social-col section.cadeaubon {
        float:none;
    }

    .aside-cadeaubon-social-col section.social {
        float:none;
        padding-left:58px;
        width:230px;
    }

    .aside-cadeaubon-social-col section.social .volgons {
        background-position:0 -183px;
        width:105px;
        float:none;
    }

    .aside-cadeaubon-social-col section.social .stamps {
        width:205px;
    }

    section.workshops .top {
        background-position:-498px -183px ;
        width:301px;
        height:31px;
        margin-top:13px;
    }

    section.workshops .middle {
        background:url(../img/smartphone-workshops.png) repeat-y;
        width:301px;
    }

    section.workshops .bottom {
        background-position:-498px -215px ;
        width:301px;
        height:14px;
    }

    section.cadeaubon {
        padding:18px 0 0 12px;
    }

    section.social {
        padding-left:58px;
    }

    section.kalender, section.kalender-view {
        width:296px;
    }

    section.kalender .col01, section.kalender-view .col01 {
        float:none;
        width:301px;
        margin-right:0;
    }

    section.kalender .col02, section.kalender-view .col02 {
        float:none;
        width:301px;
    }

    section.kalender-view .col03 {
        width:296px;
        margin-right:0;
    }

    section.page .items {
        width:301px;
        margin:0 0 25px 0;
    }

    section.page .item {
        float:none;
        background:url(../img/pattern-light-brown.png);
        width:301px;
        min-height:116px;
        margin:0 0 16px 0;
    }

    section.page .item .image {
        float:left;
        background:url(../img/pattern-light-brown.png);
        width:127px;
        height:104px;
        margin:6px 7px 0 6px;
    }

    section.page .item .content {
        background:url(../img/workshop-arrow.png) bottom right no-repeat;
        float:left;
        width:160px;
        min-height:116px;
        font: 0.86em/1.375em 'AsapRegular', sans-serif; /* 13/23 */
    }

    section.page .item a:hover .content {
        background:url(../img/workshop-arrow-active.png) bottom right no-repeat;
        float:left;
        width:160px;
        min-height:116px;
        font: 0.86em/1.375em 'AsapRegular', sans-serif; /* 13/23 */
    }



    /* kalender
    ---------------------------------------------------------- */

    #kalender {
        min-height:515px;
        width:300px;
        margin:0 auto;
        padding:0;
    }

    #kalender-tablet {
        display:none;
    }

    #kalender-smartphone {
        display:block;
        padding:0 0 0 12px;
        min-height:515px;
        width:300px;
        margin-bottom:34px;
    }

    .kalender-top {
        background:url(../img/smartphone-kalender-top.png);
        width:300px;
        height:31px;
    }

    .kalender-content {
        background:url(../img/smartphone-kalender-content.png);
        width:300px;
        min-height:200px;
    }

    .kalender-bottom {
        background:url(../img/smartphone-kalender-bottom.png);
        width:300px;
        height:8px;
    }

    .kalender-content .day {
        border-right:none;
        width:151px;
    }

    .kalender-content .next {
        border-right:none;
        width:109px;
        color:#666;
    }

    .kalender-content .prev {
        border-left:none;
        width:132px;
        color:#666;
    }

    .kalender-content .next a {
        color:#666;
    }

    .kalender-content a.col-next {
        display:block;
        height:300px;
    }

    .kalender-content .days {
        width: 294px;
    }

    .kalender-content .today {
        background:#f7f7f5;
    }

    .kalender-info, .title, .tablet-show {
        width:294px;
        margin:0 auto;
    }

    .kalender-info .action-prev, .kalender-info .action-next {
        float:left;
        width:135px;
        margin:15px 0;
    }

    .arrow-grey-big {
        color:#666;
        background:url(../img/arrow-grey-small.png) 100% 45% no-repeat;
    }

    .arrow-grey-big em {
        font-style:normal;
        padding:0px 18px 0 0;
    }

    .arrow-grey-big:hover em {
        padding:0px 21px 0 0;
    }


    /* footer */

    .footer-top, .footer-bottom {
        width:100%;
    }

    .footer-bottom .inner {
        padding:13px 12px 21px 12px;
    }

    .footer-bottom .credits {
        right:12px;
    }

    footer .col01 {
        float:none;
        padding-top:27px;
        width:290px;
        margin:0 auto;
    }

    footer .col02 {
        float:none;
        padding:27px 0 0 0;
        width:295px;
        margin:0 auto;
    }

    footer .col03 {
        float:none;
        padding:27px 0 0 0;
        width:295px;
        margin:0 auto;
    }

    footer input.field {
        width:255px;
        color:#f2af9e;
        padding:12px 20px;
    }

    footer input.button {
        text-align:center;
        width:296px;
        padding:12px 0;
    }

    .klant-inde-kijker {
        padding-left:75px;
        width:196px;
        position:relative;
    }

    .klant-inde-kijker .top {
        background-position:-582px 0;
        width:196px;
        height:13px;
    }

    .klant-inde-kijker .middle {
        background:url(../img/desktop-klantindekijker.png);
        width:196px;
    }

    .klant-inde-kijker .middle .inner {
        padding:0 13px 13px 13px;
        color:#3d3d3d;
    }

    .klant-inde-kijker img {
        float:none;
        width:167px;
    }

    .klant-inde-kijker .klant {
        float:none;
        width:167px;
        padding:0;
    }

    .klant-inde-kijker .bottom {
        background-position:-582px -27px;
        width:196px;
        height:19px;
    }

    footer .badge {
        left:12px;
    }

    nav.footer-smartphone {
        background:url(../img/pattern-input-footer.png);
        display:block;
        position:relative;
        width:100%;
    }

    nav.footer-smartphone ul {
        /*font-size:0.8em; /* 12 */
        font-size:0.866em; /* 13 */
        text-transform:uppercase;
    }

    nav.footer-smartphone ul li {
        background:url(../img/divider-dots.png) repeat-x top left;
        padding:15px 12px 13px 12px;
        text-align: center;
    }

    nav.footer-smartphone ul li a {
        display:block;
        color:#f2af9e;
    }

    nav.footer-smartphone ul li a:hover, nav.footer-smartphone ul li a:focus {
        color:#fff;
    }

    .smartphone-hide {
        display:none;
    }

    .smartphone-show {
        display:block;
    }

    .smartphone-show .button {
        display:block;
        background:#3d3d3d;
        text-align:center;
        padding:9px 7px 6px 7px;
        margin-bottom:27px;
        color:#fff;
        text-transform: uppercase;
    }

    .smartphone-show .button:hover, .smartphone-show .button:focus {
        background:#e44f29;
    }

    section.page .smartphone-show .item {
        background:none;
        width: 296px;
        margin:0;
    }

    section.kalender-view {
        padding:0;
    }

    .sbHolder{
        width:296px;
    }

    .sbSelector{
        width: 276px;
    }

    .sbOptions{
        width: 296px;
    }

    section.page .workshop-info {
        width: 296px;
    }

    section.page .workshop-info .cost {
        float:none;
        width: 296px;
        padding:0;
    }

    section.page .workshop-info .subscribe-info {
        float:none;
        margin-top:34px;
        width: 296px;
        padding:0;
        min-height:50px;
        border-left:none;
    }

    .tablet-show ul.subnav {
        display:block;
        width:296px;
        margin:0 auto 34px auto;
        border-top:1px dotted #928f85;
    }

    .tablet-show ul.subnav li {
        float:left;
        width:296px;
        margin-left:0;
        padding:11px 0 9px 0;
    }

    .blog-search-n-archive {
        width:296px;
    }

    .blog-search {
        float:none;
        width:296px;
        margin-right:0;
    }

    .blog-archive {
        float:none;
        width:296px;
    }

    .blog-search .field {
        width:256px;
    }

    section.blog-detail article {
        width: 296px;
        font:0.93em/1.5em 'AsapRegular',sans-serif;
    }

    section.blog-detail article img {
        width: 100%;
    }

    .aside-medewerkers .medewerker {
        float:none;
        width:296px;
        margin-bottom:20px;
    }

    section.page .content .col01, section.page .content .col02 {
        float:none;
        width:260px;
        margin:0;
    }

    .fiche-letter {
        display:none;
    }

    .fiche-content {
        border:none;
        float:none;
        padding:0;
        width:296px;
    }

    section.page-fiche .fiche-content article {
        width:296px;
    }

    section.page-fiche .fiche-content article .pic {
        height: 111px;
        width: 135px;
    }

    section.page-fiche .fiche-content article img {
        margin:4px 0 0 4px;
        height:103px;
        width: 127px;
    }

    section.page-fiche .fiche-content article .content {
        width:133px;
        margin-left:17px;
    }

    section.page-fiche .fiche-content article .content p {
        display:none;
    }

    .flex-control-nav, .flex-direction-nav {
        display:none;
    }

    section.page-fiche {
        width:296px;
        margin:0 auto;
    }

    /* letters */

    ul.letters {
        width:296px;
    }

    .fiche {
        width:296px;
    }

    .actions {
        width:296px;
        margin:13px auto 0 auto;
    }

    section.blog-detail {
        width:296px;
        margin:0 auto;
    }


    /* 404 */

    #error-page {
        margin:30px auto;
        min-height:515px;
        width:260px;
        margin-bottom:34px;
        text-align:center;
    }

    #error-page a#logo-zahia {
        bottom:0;
        display: block;
        left:40px;
        position: relative;
        margin:0;
    }

    .label-oh {
        background-position:-609px -426px;
        width:102px;
        height:60px;
        margin:20px 0 20px 79px;
    }

    #error-page a {
        text-decoration: underline;
        display: block;
        margin-top:3px;
    }

    #toTop {
        display:none !important; /* bij smartphone geen to top knop want werkt niet in verschillende versies */
    }

    #toTopHover {
        display:none; /* bij smartphone geen to top knop want werkt niet in verschillende versies */
    }

    footer .sbHolder {
        line-height:38px;
        width:138px;
        height:38px;
    }

    footer .sbSelector {
        line-height:38px;
        width:118px;
        height:38px;
    }

    footer .sbOptions {
        width:138px;
    }

    footer .sbOptions a {
        padding: 0 20px;
    }


    /* section.page big-items */

    section.page .big-items {
        width:296px;
        margin-left:0px;
    }

    section.page .item-big .pic {
        float:none;
        background:url(../img/pattern-light-brown.png);
        width:296px;
        height:246px;
        margin:0 0 24px 0;
    }

    section.page .item-big .pic:hover, section.page .item-big .pic:focus {
        background:url(../img/pattern-dark-brown.png);
    }

    section.page .item-big .pic img {
        margin:6px 0 0 6px;
        width:284px;
    }

    section.kalender-view .item {
        float:left;
        width:284px;
        margin-right:0;
        padding-bottom: 34px;
    }

}



@media screen and (max-width: 400px) {

    /* delivery */

    #webshop-badge {
        width: 90px;
        height: 90px;
        right: 10px;
        top: 50px;
        background-size: 100%;
    }
}