/*
* Skeleton V1.1
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 8/17/2011
*/

/* #Base 960 Grid
================================================== */

.container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.column, .columns                           { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row                                        { margin-bottom: 20px; }

/* Nested Column Classes */
.column.alpha, .columns.alpha               { margin-left: 0; }
.column.omega, .columns.omega               { margin-right: 0; }

/* Base Grid */
.container .one.column                      { width: 40px;  }
.container .two.columns                     { width: 100px; }
.container .three.columns                   { width: 160px; }
.container .four.columns                    { width: 220px; }
.container .five.columns                    { width: 280px; }
.container .six.columns                     { width: 340px; }
.container .seven.columns                   { width: 400px; }
.container .eight.columns                   { width: 460px; }
.container .nine.columns                    { width: 520px; }
.container .ten.columns                     { width: 580px; }
.container .eleven.columns                  { width: 640px; }
.container .twelve.columns                  { width: 700px; }
.container .thirteen.columns                { width: 760px; }
.container .fourteen.columns                { width: 820px; }
.container .fifteen.columns                 { width: 880px; }
.container .sixteen.columns                 { width: 940px; }

.container .one-third.column                { width: 300px; }
.container .two-thirds.column               { width: 620px; }

/* Offsets */
.container .offset-by-one                   { padding-left: 60px;  }
.container .offset-by-two                   { padding-left: 120px; }
.container .offset-by-three                 { padding-left: 180px; }
.container .offset-by-four                  { padding-left: 240px; }
.container .offset-by-five                  { padding-left: 300px; }
.container .offset-by-six                   { padding-left: 360px; }
.container .offset-by-seven                 { padding-left: 420px; }
.container .offset-by-eight                 { padding-left: 480px; }
.container .offset-by-nine                  { padding-left: 540px; }
.container .offset-by-ten                   { padding-left: 600px; }
.container .offset-by-eleven                { padding-left: 660px; }
.container .offset-by-twelve                { padding-left: 720px; }
.container .offset-by-thirteen              { padding-left: 780px; }
.container .offset-by-fourteen              { padding-left: 840px; }
.container .offset-by-fifteen               { padding-left: 900px; }



/* #Tablet (Portrait)
================================================== */

/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {
  .container                                  { width: 768px; }
  .container .column,
  .container .columns                         { margin-left: 10px; margin-right: 10px;  }
  .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
  .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }

  .container .one.column                      { width: 28px; }
  .container .two.columns                     { width: 76px; }
  .container .three.columns                   { width: 124px; }
  .container .four.columns                    { width: 172px; }
  .container .five.columns                    { width: 220px; }
  .container .six.columns                     { width: 268px; }
  .container .seven.columns                   { width: 316px; }
  .container .eight.columns                   { width: 364px; }
  .container .nine.columns                    { width: 412px; }
  .container .ten.columns                     { width: 460px; }
  .container .eleven.columns                  { width: 508px; }
  .container .twelve.columns                  { width: 556px; }
  .container .thirteen.columns                { width: 604px; }
  .container .fourteen.columns                { width: 652px; }
  .container .fifteen.columns                 { width: 700px; }
  .container .sixteen.columns                 { width: 748px; }

  .container .one-third.column                { width: 236px; }
  .container .two-thirds.column               { width: 492px; }

  /* Offsets */
  .container .offset-by-one                   { padding-left: 48px; }
  .container .offset-by-two                   { padding-left: 96px; }
  .container .offset-by-three                 { padding-left: 144px; }
  .container .offset-by-four                  { padding-left: 192px; }
  .container .offset-by-five                  { padding-left: 240px; }
  .container .offset-by-six                   { padding-left: 288px; }
  .container .offset-by-seven                 { padding-left: 336px; }
  .container .offset-by-eight                 { padding-left: 348px; }
  .container .offset-by-nine                  { padding-left: 432px; }
  .container .offset-by-ten                   { padding-left: 480px; }
  .container .offset-by-eleven                { padding-left: 528px; }
  .container .offset-by-twelve                { padding-left: 576px; }
  .container .offset-by-thirteen              { padding-left: 624px; }
  .container .offset-by-fourteen              { padding-left: 672px; }
  .container .offset-by-fifteen               { padding-left: 720px; }
}


/*  #Mobile (Portrait)
================================================== */

/* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {
  .container { width: 300px; }
  .columns, .column { margin: 0; }

  .container .one.column,
  .container .two.columns,
  .container .three.columns,
  .container .four.columns,
  .container .five.columns,
  .container .six.columns,
  .container .seven.columns,
  .container .eight.columns,
  .container .nine.columns,
  .container .ten.columns,
  .container .eleven.columns,
  .container .twelve.columns,
  .container .thirteen.columns,
  .container .fourteen.columns,
  .container .fifteen.columns,
  .container .sixteen.columns,
  .container .one-third.column,
  .container .two-thirds.column  { width: 300px; }

  /* Offsets */
  .container .offset-by-one,
  .container .offset-by-two,
  .container .offset-by-three,
  .container .offset-by-four,
  .container .offset-by-five,
  .container .offset-by-six,
  .container .offset-by-seven,
  .container .offset-by-eight,
  .container .offset-by-nine,
  .container .offset-by-ten,
  .container .offset-by-eleven,
  .container .offset-by-twelve,
  .container .offset-by-thirteen,
  .container .offset-by-fourteen,
  .container .offset-by-fifteen { padding-left: 0; }

}


/* #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .container { width: 460px; }
  .columns, .column { margin: 0; }

  .container .one.column,
  .container .two.columns,
  .container .three.columns,
  .container .four.columns,
  .container .five.columns,
  .container .six.columns,
  .container .seven.columns,
  .container .eight.columns,
  .container .nine.columns,
  .container .ten.columns,
  .container .eleven.columns,
  .container .twelve.columns,
  .container .thirteen.columns,
  .container .fourteen.columns,
  .container .fifteen.columns,
  .container .sixteen.columns,
  .container .one-third.column,
  .container .two-thirds.column { width: 420px; }
}


/* #Clearing
================================================== */

/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.row:after,
.clearfix:after {
  clear: both; }
.row,
.clearfix {
  zoom: 1; }

/* You can also use a <br class="clear" /> to clear columns */
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}





.scrollblur { 
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 100% Auto;
  background-attachment: fixed;
  min-height: 90%;
}
@media only screen and (max-width: 1023px) {
  .scrolblur {
    background-image: none !important;
  }
}

/* success */
.prevNext {
  position: absolute; z-index:500;
  background: rgba(100,100,100,0.2);
  margin-top: 75px; 
  padding: 50px 3px;
  font-size: 15px; font-weight: bold; color: #fff;
  border-radius: 5px;
}



/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }
body {
  line-height: 1; }
ol, ul {
  list-style: none; }
blockquote, q {
  quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }
table {
  border-collapse: collapse;
  border-spacing: 0; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
.ie7 img { -ms-interpolation-mode: bicubic; }


/* #Basic Styles
================================================== */
body {
  background: #fBfBff;
  font: 13px/18px 'Open Sans', sans-serif;
  color: #303030;
  -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
  -webkit-text-size-adjust: 100%;
  -webkit-backface-visibility: hidden; /* Fix this webkit bug: http://stackoverflow.com/questions/11589985/webkit-text-aliasing-gets-weird-during-css3-animations */
}


/* #Typography
================================================== */
h1, h2, h3, h4, h5, h6 {
  color: #303030;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  text-shadow: 0px 1px 0px #fff;
}
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
  color: #efefef;
  text-shadow: 0px 2px #000;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 30px; line-height: 35px; margin-bottom: 10px; }
h2 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
h3 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
h4 { font-size: 16px; line-height: 24px; }
h5 { font-size: 14px; line-height: 21px; }
h6 { font-size: 13px; line-height: 19px; }
.subheader { color: #444; }
.dark .subheader {
  color: #ccc;
  text-shadow: none;
}

p { margin: 0 0 10px 0; }

p, li, label { text-shadow: 0px 1px 2px #fff; }

p img { margin: 0; }
p.lead { font-size: 21px; line-height: 27px; color: #777;  }

em {font-style: italic;}
strong {font-weight: bold; color: #111;}
.dark strong {color: #dbdbdb;}
small {font-size: 80%;}

/*  Blockquotes  */
blockquote, blockquote p { font-size: 15px; line-height: 24px; color: #777; font-style: italic; }
blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
blockquote cite { display: block; font-size: 14px; color: #555; }
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }

hr {
  border: none;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #fff;
  clear: both;
  margin: 10px 0;
  height: 0;
}
.dark hr {
  border-top: 1px solid #000;
  border-bottom: 1px solid #2c2c2c;
}

::selection {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: rgba(34, 34, 34, .99);
  text-shadow: none;
}
.dark ::selection {
  color: #111;
  -webkit-text-fill-color: #111;
  background: rgba(255, 255, 255, .99);
  text-shadow: none;
}
img::selection {
  background: rgba(0, 0, 0, .3);
}
.dark img::selection {
  background: rgba(0, 0, 0, .3);
}

::-moz-selection {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: rgba(34, 34, 34, .99);
  text-shadow: none;
}
.dark ::-moz-selection {
  color: #111;
  -webkit-text-fill-color: #111;
  background: rgba(255, 255, 255, .99);
  text-shadow: none;
}
img::-moz-selection {
  background: rgba(0, 0, 0, .3);
}
.dark img::-moz-selection {
  background: rgba(0, 0, 0, .3);
}



/* #Links
================================================== */
a, a:visited, button { 
  color: #555; 
  text-decoration: underline; 
  outline: 0;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition:all 1s ease;
}
a:hover, a:focus, button:hover {
  color: #000;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
p a, p a:visited { line-height: inherit; }

.dark a, .dark a:visited {color:#999;}
.dark a:hover, .dark a:focus { color: #fff; }

a img {
  opacity: 1;
  -webkit-transition:opacity 1s ease;
  -moz-transition:opacity 1s ease;
  -o-transition:opacity 1s ease;
  transition:opacity 1s ease;
}
a:hover img {
  zoom: 1;
  opacity: 0.7;
  filter: alpha(opacity=70);
  -webkit-transition:opacity 0.3s ease;
  -moz-transition:opacity 0.3s ease;
  -o-transition:opacity 0.3s ease;
  transition:opacity 0.3s ease;
}
.no-transition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: all 0 ease !important;
  transition: none !important;
}


/* #Lists
================================================== */
ul, ol { margin-bottom: 20px; }
ul { list-style: none outside; }
ol { list-style: decimal; }
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc { list-style: disc outside; }
ul ul, ul ol,
ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%;  }
ul ul li, ul ol li,
ol ol li, ol ul li { margin-bottom: 6px; }
li { line-height: 18px; margin-bottom: 12px; }
ul.tight li { line-height: 15px; margin-bottom: 6px; }
ul.large li { line-height: 21px; }
li p { line-height: 21px; }


/* #Images
================================================== */

img.scale-with-grid {
  max-width: 100%;
  height: auto;
}
img.alignright {
  float: right;
  margin: 0 0 10px 10px;
}
img.alignleft {
  float: left;
  margin: 0 10px 10px 0;
}


/* #Buttons (default color: grey)
================================================== */

a.button,
a.button:visited,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wOSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.09) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.09))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.09) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.09) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.09) 100%); /* IE10+ */
  background: linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.09) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#17000000',GradientType=0 ); /* IE6-8 */
  background-color: #fff;
  color: #555;
  text-shadow: 1px 1px rgba(255, 255, 255, 1);
  border: 1px solid #eee;
  border-top: 1px solid #ccc;
  -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.3),
           0px 0px 5px 0px rgba(255, 255, 255, 0.7) inset;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.3),
              0px 0px 5px 0px rgba(255, 255, 255, 0.7) inset;
  box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.3),
        0px 0px 5px 0px rgba(255, 255, 255, 0.7) inset;
        
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  padding: 4px 12px;
  margin-bottom: 20px;
  line-height: 21px;
  font-family: 'Open Sans', sans-serif; 
}

a.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
  background-color: #f1f1f1;
  border-bottom: 1px solid #e7e7e7;
  text-shadow: 1px 1px rgba(255, 255, 255, 0.6);
  -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.3), 
           0px 0px 5px 0px rgba(255, 255, 255, 0.7) inset;
  -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.3), 
              0px 0px 5px 0px rgba(255, 255, 255, 0.7) inset;
  box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.3), 
        0px 0px 5px 0px rgba(255, 255, 255, 0.7) inset;
}

a.button:active,
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
  background-color: #ddd;
  border: 1px solid #999;
  border-bottom: 1px solid #888;
  -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3),
           0px 1px 10px -3px #000 inset;
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3), 
            0px 1px 10px -3px #000 inset;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3),
        0px 1px 10px -3px #000 inset;
  text-shadow: 1px 1px rgba(255, 255, 255, 0.3);
}


/* CvA Gelb */
a.yellowbutton,
a.yellowbutton:visited,
.yellowbutton {
  color: #303030;
  background: #f1e767; /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxZTc2NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZWI2NDUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, #f1e767 0%, #feb645 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1e767), color-stop(100%,#feb645)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f1e767 0%,#feb645 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f1e767 0%,#feb645 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f1e767 0%,#feb645 100%); /* IE10+ */
  background: linear-gradient(to bottom, #f1e767 0%,#feb645 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645',GradientType=0 ); /* IE6-8 */
}

.ie7 a.button,
.ie7 a.button:visited,
.ie7 button,
.ie7 input[type="submit"],
.ie7 input[type="reset"],
.ie7 input[type="button"],
.ie8 a.button,
.ie8 a.button:visited,
.ie8 button,
.ie8 input[type="submit"],
.ie8 input[type="reset"],
.ie8 input[type="button"] {
  border: 1px solid #ccc;
  border-bottom: 1px solid #acacac;
}


/* === Buttons in dark context === */
.dark a.button,
.dark a.button:visited,
.dark button,
.dark input[type="submit"],
.dark input[type="reset"],
.dark input[type="button"] {
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjA5Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.09)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.09) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,0.09) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,0.09) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(top,  rgba(255,255,255,0.09) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-8 */
  background-color: #202020;
  border: none;
  color: #ccc;
  text-shadow: 1px 1px rgba(0, 0, 0, 1);
  -moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,1),
           0px 0px 1px 0px rgba(255, 255, 255, 0.2) inset;
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,1),
              0px 0px 1px 0px rgba(255, 255, 255, 0.2) inset;
  box-shadow: 0px 1px 5px 0px rgba(0,0,0,1),
        0px 0px 1px 0px rgba(255, 255, 255, 0.2) inset;
}

.dark a.button:hover,
.dark button:hover,
.dark input[type="submit"]:hover,
.dark input[type="reset"]:hover,
.dark input[type="button"]:hover {
  background-color: #2b2b2b;
  color: #fff;
  -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,1),
           0px 0px 1px 0px rgba(255, 255, 255, 0.2) inset;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,1),
              0px 0px 1px 0px rgba(255, 255, 255, 0.2) inset;
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,1), 
        0px 0px 1px 0px rgba(255, 255, 255, 0.2) inset;
}

.dark a.button:active,
.dark button:active,
.dark input[type="submit"]:active,
.dark input[type="reset"]:active,
.dark input[type="button"]:active {
  background-color: #222;
  color: #999;
  -moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.1), 
           0px 1px 10px 2px rgba(0, 0, 0, 0.7) inset;
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.1), 
            0px 1px 10px 2px rgba(0, 0, 0, 0.7) inset;   
  box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.1), 
        0px 1px 10px 2px rgba(0, 0, 0, 0.7) inset;
}
.ie7 .dark a.button,
.ie7 .dark a.button:visited,
.ie7 .dark button,
.ie7 .dark input[type="submit"],
.ie7 .dark input[type="reset"],
.ie7 .dark input[type="button"],
.ie8 .dark a.button,
.ie8 .dark a.button:visited,
.ie8 .dark button,
.ie8 .dark input[type="submit"],
.ie8 .dark input[type="reset"],
.ie8 .dark input[type="button"] {
  border: 1px solid #313131;
  border-top: 1px solid #414141;
}

/* On-the-fly classes to change button's color (experimental)
.blue {
  background-color: #5891b5;
  color: #033b5e;
  text-shadow: 0 1px rgba(255, 255, 255, .35);
  border: 1px solid #5891b5;
}
*/


/* ie9 fails to render rounded-corners + gradient made with filter */
.ie9 a.button,
.ie9 a.button:visited,
.ie9 button,
.ie9 input[type="submit"],
.ie9 input[type="reset"],
.ie9 input[type="button"] {
  filter: none;
}


.button.full-width,
button.full-width,
input[type="submit"].full-width,
input[type="reset"].full-width,
input[type="button"].full-width {
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center; 
}
textarea.full-width {
  width: 98%;
}

a.button.featured,
a.button.featured:visited,
button.featured,
.button.featured,
.button.call-to-action,
.button.call-to-action:visited {
  display: block;
  width: 60%;
  text-align: center;
  margin: 10px auto 10px auto;
  font-size: 14px;
  line-height: auto;
  padding: 7px 20px;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px;
}


/* #Tabs
================================================== */
ul.tabs {
  display: block;
  margin: 0;
  padding: 0;
  border-bottom: solid 1px #ddd; }
.dark ul.tabs {
  border-color: #262626;
}
ul.tabs li {
  display: block;
  width: auto;
  height: 30px;
  padding: 0;
  float: left;
  margin-bottom: 0; }
ul.tabs li a {
  display: block;
  text-decoration: none;
  width: auto;
  height: 29px;
  padding: 0px 20px;
  line-height: 30px;
  border: solid 1px #ddd;
  border-width: 1px 1px 0 0;
  margin: 0;
  background: #f5f5f5;
  font-size: 13px;
  -webkit-transition: background 1s ease,
            color 1s ease;
  -moz-transition: background 1s ease,
           color 1s ease;
  -o-transition: background 1s ease,
           color 1s ease;
  transition: background 1s ease,
        color 1s ease;
}
ul.tabs li a:hover {
  background: #f0f0f0;
  color: #111;
  -webkit-transition: background 0.3s ease,
            color 0.3s ease;
  -moz-transition: background 0.3s ease,
           color 0.3s ease;
  -o-transition: background 0.3s ease,
           color 0.3s ease;
  transition: background 0.3s ease,
        color 0.3s ease;
}
ul.tabs li a.active {
  background: #f6f6f6;
  height: 30px;
  position: relative;
  top: -4px;
  padding-top: 4px;
  border-left-width: 1px;
  margin: 0 0 0 -1px;
  color: #111;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
}
ul.tabs li:first-child a.active {
  margin-left: 0; }
ul.tabs li:first-child a {
  border-width: 1px 1px 0 1px;
  -moz-border-radius-topleft: 3px;
  -webkit-border-top-left-radius: 3px;
  border-top-left-radius: 3px; }
ul.tabs li:last-child a {
  -moz-border-radius-topright: 3px;
  -webkit-border-top-right-radius: 3px;
  border-top-right-radius: 3px; }

ul.tabs-content {
  background: #f6f6f6;
  color: #4c4c4c;
  margin: 0;
  padding: 20px 10px 10px 10px;
  display: block;
  border: solid 1px #ddd;
  border-width: 0 1px 1px 1px;
  -webkit-border-radius: 0 0 3px 3px;
  -moz-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
}
/* Tabs in black context */
.dark ul.tabs li a {
  background: #0e0e0e;
  border-color: #262626;
}
.dark ul.tabs li a:hover {
  background: #090909;
  color: #fff;
}
.dark ul.tabs li a.active {
  background: #171717;
  border-color: #2C2C2C;
  color: #fff;
}
.dark ul.tabs-content {
  background: #171717;
  color: #ccc;
  border-color: #262626;
}
ul.tabs-content > li { display:none; }
ul.tabs-content > li.active { display: block; }

/* Clearfixing tabs for beautiful stacking */
ul.tabs:before,
ul.tabs:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
ul.tabs:after {
  clear: both; }
ul.tabs {
  zoom: 1; }


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

form {
  margin-bottom: 20px;
}
fieldset {
  margin-bottom: 20px; 
}
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  border: 1px solid #ccc;
  padding: 6px 10px;
  margin: 0;
  outline: none;
  font: 13px 'Open Sans', sans-serif;
  color: #777;
  width: 100%;
  max-width: 100%;
  background: #fff;
  
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  /* "all" isn't used because then height is also transitioned and interfers with user's action on textarea height */
  -webkit-transition:border 0.3s ease, background 0.3s ease, box-shadow 0.2s ease, color 0.6s ease;
  -moz-transition:border 0.3s ease, background 0.3s ease, box-shadow 0.2s ease, color 0.6s ease;
  -o-transition:border 0.3s ease, background 0.3s ease, box-shadow 0.2s ease, color 0.6s ease;
  transition:border 0.3s ease, background 0.3s ease, box-shadow 0.2s ease, color 0.6s ease;

  /* Act as display:block; 
     see http://stackoverflow.com/questions/1030793/input-with-displayblock-is-not-a-block-why-not 
     ie7 isn't supported here, see static fix bellow */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.ie7 input[type="text"],
.ie7 input[type="password"],
.ie7 input[type="email"],
.ie7 textarea,
.ie7 select {
  width: 378px; /* 378px + 10px_padding_x2 + 1px_border_x2 = 400px (seven columns full width) */
  /* note: ie7 doesn't support media-queries so this fix is enough for desktop uses */
}

.dark input[type="text"],
.dark input[type="password"],
.dark input[type="email"],
.dark textarea,
.dark select {
  border: 1px dashed #333;
  color: #a1a1a1;
  background: #191919;
  -webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.4);
}
  
select {
  padding: 0;
}

form .row {
  margin-bottom: 10px;
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
textarea:hover {
  background: #f2f2f2;
}
.dark input[type="text"]:hover,
.dark input[type="password"]:hover,
.dark input[type="email"]:hover,
.dark textarea:hover {
  background: #161616;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
  border: 1px solid #aaa;
  color: #444;
  background: #f2f2f2;

  -moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
  -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
  box-shadow:  0 0 3px rgba(0,0,0,.2);
}
  
.dark input[type="text"]:focus,
.dark input[type="password"]:focus,
.dark input[type="email"]:focus,
.dark textarea:focus {
  border: 1px solid #282828;
  color: #fff;
  background: #191919;

  /* if the outer shadow isn't specified, transition doesn't occur */
  -webkit-box-shadow: 0 0 0 transparent, 1px 1px 5px 1px rgba(0, 0, 0, 1) inset;
  -moz-box-shadow: 0 0 0 transparent, 1px 1px 5px 1px rgba(0, 0, 0, 1) inset;
  box-shadow:0 0 0 transparent, 1px 1px 5px 1px rgba(0, 0, 0, 1) inset;
}
  
textarea {
  min-height: 130px;
  overflow: auto;
}
label,
legend {
  display: block;
  font-weight: bold;
  font-size: 13px;
  text-align: left;
  padding-right: 20px;
}
select {
  width: 220px; }
input[type="checkbox"] {
  display: inline; }
label span,
legend span {
  font-weight: normal;
  font-size: 13px;
  color: #444; 
  display: block;
}

.ajax-response {
  margin: 6px 0 0 5px;
  font-weight: bold;
}
.form-success-msg {
  margin: 6px 0 0 5px;
  color: #00B040;
}
.form-error-msg {
  margin: 6px 0 0 5px;
  color: #d82f2f;
}
.form-error {
  -moz-box-shadow: 0 0px 15px -5px #FF0000 !important;
  -webkit-box-shadow: 0 0px 15px -5px #FF0000 !important;
  box-shadow: 0 0px 15px -5px #FF0000 !important;
  border: 1px solid rgba(255, 0, 0, 0.5) !important;
}
.dark input[type="text"].form-error:focus,
.dark input[type="password"].form-error:focus,
.dark input[type="email"].form-error:focus,
.dark textarea.form-error:focus {
  -moz-box-shadow: 0 0px 15px -5px #FF0000, 1px 1px 5px 1px rgba(0, 0, 0, 1) inset !important;
  -webkit-box-shadow: 0 0px 15px -5px #FF0000, 1px 1px 5px 1px rgba(0, 0, 0, 1) inset !important;
  box-shadow: 0 0px 15px -5px #FF0000, 1px 1px 5px 1px rgba(0, 0, 0, 1) inset !important;

}
form li {
  float: left;
  padding: 3px;
  margin: 3px 0;
  background: #111;
  background: none;
}


form li label {
  width: 130px;
  float: left;
  text-align: left;
  padding-right: 15px;
}
form li label span {
  color: #999;
  display: block;
}
form button {
  float: right;
  margin: 0 10px 0 0;
}



/* #Misc
================================================== */
.remove-bottom { margin-bottom: 0 !important; }
.half-bottom { margin-bottom: 10px !important; }
.add-bottom { margin-bottom: 20px !important; }
.add-more-bottom { margin-bottom: 40px !important; }
.add-top { margin-top: 10px !important; }
.add-more-top { margin-top: 20px !important; }


/* Spark Layout */
body, html {
  overflow: hidden;
}
html.mobile,
html.modern-mobile {
  overflow: auto;
}
#main {
    position: absolute;
    overflow-y: scroll;
  top:120px;
  left:0; 
  bottom:0; 
  right:0;
}
header {
  background: #fff;
  border-top: 6px solid #000;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
}


/* ==== Webkit Mobile (iOS5.1+ and Android 4.0+) ==== */
.modern-mobile #main {
  position: static;
  overflow: hidden;
  margin-top: 120px;
}

/* ==== All other mobile platforms (including old Webkit Mobile versions) ==== */
.mobile #main { 
  position: static;
  overflow: hidden;
}
.mobile header { /* old mobiles: no fixed-header */
  position: relative;
}


header h1.logo {
  float: left;
  margin-top: 0;
  margin-bottom: 0;
}
header h1 a {
  display:block;
  max-height: 80px;
}
nav ul, .mainmenu ul {
  float: right;
  height: 30px;
}
.mainmenu ul {
  height: 41px;
}
nav li, .mainmenu li {
  list-style: none;
  display: block;
  float: left;
  margin-top: -6px;
  margin-bottom: 0;
}


/* Blurr effect (experimentation) */
/*
nav:hover a {
  color: #9a9ca6;
  color: rgba(0,0,0, 0.01);
  text-shadow: 0 0 4px #9a9ca6 !important;
  }

nav a:hover {
  color: #fff;
  color: rgba(255,255,255, 1.0);
  text-shadow: none !important;
}
*/

nav a, 
nav a:visited,
nav a:focus,
.mainmenu a,
.mainmenu a:visited,
.mainmenu a:focus {
  display: block;
  height: 40px;
  padding: 0 20px 0 20px;
  text-decoration: none;
  color:#666;
  font-weight: bold;
  border-top: 3px solid #000;
  margin-top: 1px;
}

.mainmenu a,
.mainmenu a:visited,
.mainmenu a:focus {
  height: 20px;
  padding: 20px 20px 0 20px;
  font-size: 1.2em;
  border: none;
  margin-top: 0;
}

nav a:hover {
  color: red;
  border-top-color: #c1c1c1;
}
nav a.active,
nav a.active:focus {
  color: #37b1ff;
  border-top-color: #37b1ff;
  -webkit-transition:color 0.3s ease, 
             border-color 0.3s ease,
             background-color 0.3s ease;
  -moz-transition:color 0.3s ease, 
          border-color 0.3s ease,
          background-color 0.3s ease;
  -o-transition:color 0.3s ease, 
          border-top-color 0.3s ease,
          background-color 0.3s ease;
  transition:color 0.3s ease, 
         border-color 0.3s ease,
         background-color 0.3s ease;
}
nav a.active:hover {
  color: #000;
  border-top-color: #37b1ff;
}
nav a span,
.mainmenu a span {
  color: #c1c1c1;
  font-size: 12px;
  font-weight : normal;
}



article {
  padding: 50px 0 50px 0;
}
#main article:first-of-type {
  padding-top: 20px;
}
#main article:last-of-type {
  padding: 50px 0 150px 0;
}

article .row:last-of-type {
  margin-bottom: 0;
}
.mobile-only, /* singular variant kept for compatibility */
.mobiles-only, .tablets-only {
  display: none; /* display:block; in the Media-Queries */
}
.dark {
  background: #212121 url("../images/black_paper.jpg") repeat;
  color: #dbdbdb;
}

/* Box styling */
.box {
  background: #fff;
  display: block;
  padding: 10px;
  -webkit-box-shadow: 0 0 5px #d5d5d5;
  -moz-box-shadow: 0 0 5px #d5d5d5;
  box-shadow: 0 0 5px #d5d5d5;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.container .column.box,
.container .columns.box {
  margin-left: 0;
  margin-right: 0;
}
.container .row.box {
  padding: 10px 0;
}
.dark .container .column.box,
.dark .container .columns.box,
.dark .box,
.dark .box.dark {
  background: #000;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 1px solid #2c2c2c;
  margin-left: -1px; /* Compensate the 1px border */
  margin-right: -1px;
}
.box.dark {
  background: #222;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  box-shadow: 1px 1px 3px 0px #fff;
  background: #212121 url("../images/black_paper.jpg") repeat;
}


.box.light {
  background: rgba(255,255,255,0.5);
}
.dark .container .column.box.light,
.dark .container .columns.box.light,
.dark .box.light,
.dark .box.light {
  background: rgba(0,0,0,0.3);
}
.box.scale-with-grid {
  max-width: 90%;
}

.featured {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0px 15px 40px -20px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 15px 40px -20px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 15px 40px -20px rgba(0, 0, 0, 0.7);
}
.dark .featured {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.box.featured {
  margin-top: -15px;
  padding-top: 15px;
}
img.featured {
  -webkit-box-shadow: 0px 8px 40px -10px rgba(0, 0, 0, 1);
  -moz-box-shadow: 0px 8px 40px -10px rgba(0, 0, 0, 1);
  box-shadow: 0px 8px 40px -10px rgba(0, 0, 0, 1);
}
.dark img.featured {
  -webkit-box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 1);
  -moz-box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 1);
  box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 1);
}
/*
blockquote,
.blockquote {
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  -webkit-box-shadow:0 0 3px rgba(0,0,0,0.3);
  -moz-box-shadow:0 0 3px rgba(0,0,0,0.3);
  box-shadow:0 0 3px rgba(0,0,0,0.3);
  background:rgba(255,255,255,0.04);
  border:1px dashed rgba(255,255,255,0.1);
}
*/




a.imglink {
  text-decoration: none;
}

/* Apply .headset to any container that should have a floating img */
.headset img {
  float:left;
  margin: 0 10px 5px 0;
}
.headset p,
.headset h2,
.headset h3,
.headset h4,
.headset h5,
.headset li {
  margin-left: 70px;
}
.headset.price p, 
.headset.price h2, 
.headset.price h3, 
.headset.price h4, 
.headset.price h5 {
  float: left;
  margin: 10px 0 0 5px;
}
.headset span {
  float: right;
  font-size: 30px;
  padding: 15px 0px 2px 0;
}
.headset span sup {
  font-size: 18px;
}
.headset span sub {
  bottom: 0;
  font-size: 18px;
}
.titleset {
  margin-bottom: 30px;
}

/* gradients */
.bottom-gradient {
  position:relative;
  height:0;
  border-top:1px solid #ddd;
  border-bottom:1px solid #fff;
  z-index:-99;
  clear:both;
  margin:0;
}
.bottom-gradient.between-rows {
  margin: -15px 0 15px 0;
}
.bottom-gradient .container {
  height: 0;
}
.bottom-gradient span {
    border: medium none;
    display: block;
    height: 80px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: -80px;
    z-index: -100;
} 
.bottom-gradient .left {
  background:no-repeat url(../images/combined_gradient.png) 0 0;
  background:-webkit-radial-gradient(bottom right,circle,rgba(0,0,0,0.06),rgba(0,0,0,0) 80px);
  background:-moz-radial-gradient(bottom right,rgba(0,0,0,0.05),rgba(0,0,0,0) 80px);
  width:80px;
  left:0;
}

.bottom-gradient .center {
  background:no-repeat url(../images/combined_gradient.png) -114px 0;
  background:-webkit-radial-gradient(bottom left,circle,rgba(0,0,0,0.06),rgba(0,0,0,0) 80px);
  background:-moz-radial-gradient(bottom left,rgba(0,0,0,0.05),rgba(0,0,0,0) 80px);
  width:80px;
  right:0;
}

.bottom-gradient .right {
  position:relative;
  margin-left:80px;
  margin-right:80px;
  top:-80px;
  background:url(../images/gradient.png);
  background:-webkit-linear-gradient(bottom,rgba(0,0,0,0.06),rgba(0,0,0,0) 80px);
  background:-moz-linear-gradient(bottom,rgba(0,0,0,0.05),rgba(0,0,0,0) 80px);
}

.dark .bottom-gradient {
  border-top: 1px solid #000;
  border-bottom: 1px solid #2c2c2c;
  z-index: 0;
}
.dark .bottom-gradient span {
  display: none;
}

/* content-specific containers */
.welcome-container {
  padding: 10px 20px;
}

/* Shadows effect (experimental. not yet ported on .dark sections) */
.enjoliver {
  position: relative;
  line-height: 0px;
  float: left;
  width: auto;
  height: auto;
  max-width: 100%;
  padding: 7px;
  border-radius: 1px;
  border: 1px solid #f9f9f9;
  background: #fff;
  
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.12) inset;
  -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.12) inset; 
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.12) inset; 
}
.enjoliver img {
  -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 1);
  -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 1);
}
.enjoliver:before,
.enjoliver:after {
  content: '';
  z-index: -1;
  position: absolute;
  left: 10px;
  bottom: 12px;
  width: 70%;
  max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
  max-height: 100px;
  height: 55%;
  
  -webkit-box-shadow: 0 12px 15px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 12px 15px rgba(0, 0, 0, 0.2);
  box-shadow: 0 12px 15px rgba(0, 0, 0, 0.2);
  
  -webkit-transform: skew(-15deg) rotate(-6deg);
  -moz-transform: skew(-15deg) rotate(-6deg);
  -ms-transform: skew(-15deg) rotate(-6deg);
  -o-transform: skew(-15deg) rotate(-6deg);
  transform: skew(-15deg) rotate(-6deg);
}
.enjoliver:after {
  left: auto;
  right: 10px;
  
  -webkit-transform: skew(15deg) rotate(6deg);
  -moz-transform: skew(15deg) rotate(6deg);
  -ms-transform: skew(15deg) rotate(6deg);
  -o-transform: skew(15deg) rotate(6deg);
  transform: skew(15deg) rotate(6deg);
}

/* Responsive video embed support */
.video {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 80px; 
  height: 0;
  overflow: hidden;
}

.video iframe, .video object, .video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 300px;
}


/* End of file to load last */





/* Media Queries */ 

/* CvA reg Box */
@media only screen and (min-width: 768px) {
  .regBoxPadding {
    margin-left: 25px !important; 
    padding-left: 25px;
  }
}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {

  #main {
    top: 90px; /* header height */
  }
  .modern-mobile #main {
    margin-top: 90px;
  }
  
  nav ul {
    height: 40px;
  }
  nav li a,
  nav li a:visited,
  nav li a:focus {
    display: inline-block;
    height: 40px;
    width: auto;
    padding: 10px 15px 0 15px;    
  }
  nav li a span {
    display: none;
  }
  
  .video iframe, .video object, .video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 91%;
  }
  
  

}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {

  #main {
    top: 105px; /* header height (including top border) */
  }
  .modern-mobile #main {
    margin-top: 105px;
  }
  
  
  header h1,
  header h1 a,
  header h1 a img {
    max-height: 60px;
  }

  /* Fix for skeleton when a column have both alpha and omega classes */
  .column.alpha.omega,
  .columns.alpha.omega {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Helper classes */
  .hide-for-tables, /* misspelled, kept for compatibility */
  .hide-for-tablets,
  .hide-for-mobile { /* since added ".hide-for-mobileS" (which doesn't hide for tablets), keeping this version for compatibility */
    display: none;
  }
  .tablets-only {
    display: block;
  }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

  .container .column.box,
  .container .columns.box,
  .container .box .column,
  .container .box .columns {
    width: 280px;
  }
  .box.featured {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .container .row.box {
    padding: 10px;
  }

  header h1.logo {
    margin-top: 5px; /* Header's height is 60px in tablet mode and logo (mobile version) is expected to be 50px so we center it vertically. */
  }
  
  label,
  legend {
    text-align: left;
    padding: 0 0 10px 5px;
  }
  label span,
  legend span { 
    display: inline;
    margin-left: 10px;
  }
  
  /* Helper classes */
  .hide-for-mobiles {
    display: none;
  }
  .mobiles-only {
    display: block;
  }
  
  nav a, 
  nav a:visited,
  nav a:focus,
  .mainmenu a,
  .mainmenu a:visited,
  .mainmenu a:focus {
    font-size: 1em;
    height: 33px;
    padding: 15px 10px 0 10px;
  }
  
  .video iframe, .video object, .video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 97%;
  }
  
  .regBoxPadding {
    margin-left: 0; padding-left: 0;
  }
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

  #main {
    top: 125px; /* header height (including top border) */
  }
  .modern-mobile #main {
    margin-top: 125px;
  }
  
  nav li a,
  nav li a:visited,
  nav li a:focus {
    height: 33px;
    padding: 15px 10px 0 10px;    
  }
  
  .mainmenu ul {
    height: 80px;
  }

  .container .column.box,
  .container .columns.box,
  .container .box .column,
  .container .box .columns {
    width: 400px;
  }
  
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

  #main {
    top: 145px; /* header height (including top border) */
  }
  .modern-mobile #main {
    margin-top: 145px;
  }
  
  nav li a,
  nav li a:visited,
  nav li a:focus {
    height: 10px;
    padding: 5px 3px 0 3px;   
  }
  nav ul {
    height: 30px;
  }
  
  .mainmenu ul {
    height: 110px;
  }
  .mainmenu li {
    list-style: none;
    display: inline;
    clear: both;
  }
  .mainmenu a,
  .mainmenu a:visited,
  .mainmenu a:focus {
    height: 20px;   
  }


  header h1.logo {
    margin-top: 0; /* Remove previously added margin as now the header is 50px */
  }
  
  .video {
    padding-top: 30px; 
  }
  
  .video iframe, .video object, .video embed {
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
    height: 100%;
  }
  
}



/* CSS sprites made using spritegen.website-performance.org */

.large-icons {
  width:48px; 
  height:48px;
  background: url('../images/combined_v1.1.png') no-repeat top left;
}
.medium-icons {
  width:32px; 
  height:32px;
  background: url('../images/combined_v1.1.png') no-repeat top left;
}


/* large icons */
.icon-menu {background-position: -98px -294px;}
.dark .icon-menu {background-position: -98px -196px;}

.icon-layers {background-position: -98px -490px;}
.dark .icon-layers {background-position: -98px -392px;}

.icon-font {background-position: 0 -1919px;}
.dark .icon-font {background-position: 0 -1821px;}

.icon-resize {background-position: 0 -294px;}
.dark .icon-resize {background-position: 0 -196px;}

.icon-dashboard {background-position: 0 -1559px;}
.dark .icon-dashboard {background-position: 0 -1461px;}

.icon-globe {background-position: -98px -98px;}
.dark .icon-globe {background-position: -98px 0;}

.icon-link {background-position: -98px -686px;}
.dark .icon-link {background-position: -98px -588px;}

.icon-grid {background-position: 0 -98px;}
.dark .icon-grid {background-position: 0 0;}

.icon-pin {background-position: -98px -1210px;}
.dark .icon-pin {background-position: -98px -1112px;}

.icon-cloud {background-position: 0 -1363px;}
.dark .icon-cloud {background-position: 0 -1265px;}

.icon-cert {background-position: 0 -1167px;}
.dark .icon-cert {background-position: 0 -1069px;}

.icon-bookmark {background-position: 0 -579px;}
.dark .icon-bookmark {background-position: 0 -481px;}

.icon-shopcart {background-position: -98px -1586px;}
.dark .icon-shopcart {background-position: -98px -1488px;}

.icon-burst {background-position: 0 -971px;}
.dark .icon-burst {background-position: 0 -873px;}


/* medium icons */
.icon-facebook {background-position: 0 -1739px;}
.dark .icon-facebook {background-position: 0 -1657px;}
.icon-twitter {background-position: -98px -1766px;}
.dark .icon-twitter {background-position: -98px -1684px;}



/* 
  Optional file for easily change colors.
  Color scheme: Blue
*/

/* ==== Background motifs ==== */
/* If you want to change header's background
header     {background: #111 url(../images/motifs/random_grey_variations.png) repeat;}
.dark header {background: #111 url(../images/motifs/random_grey_variations.png) repeat;}
*/

/* If you want to change main body's background 
body {background: #eee url("../images/motifs/grangray.png") repeat;}
*/

/* If you want to change .dark sections background
.dark {background: #212121 url("../images/motifs/random_grey_variations.jpg") repeat; color: #fff;}
*/



/* ==== Top navigation ==== */
header,
nav a, 
nav a:visited,
nav a:focus {
  border-top-color: #4a4a4a;
  color: #333;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}
nav a:hover {
  color: #000;
  border-top-color: #c1c1c1;
}
header.dark,
.dark nav a, 
.dark nav a:visited,
.dark nav a:focus {
  color: #ccc;
  text-shadow: none;
}
.dark nav a:hover {
  color: #fff;
  border-top-color: #c1c1c1;
}
/* Active page link */
.mainmenu a.active,
nav a.active,
nav a.active:focus,
.dark nav a.active,
.dark nav a.active:focus {
  color: #0070c0;
  border-top-color: #0070c0;
}
nav a.active:hover {
  color: #000;
  border-top-color: #0070c0;
}
.dark nav a.active:hover {
  color: #fff;
  border-top-color: #0070c0;
}
nav a span {
  color: #888;
  font-size: 12px;
  font-weight : normal;
}

/* Content links */
a, a:visited {color: #0070c0;}
a:hover, a:focus {color: #000;}

/* Content links in dark context */
.dark a, .dark a:visited {color:#0070c0;}
.dark a:hover, .dark a:focus {color: #fff;}

/* CvA */
h1, h2, h3, h4 { color: #0090c0; }
/* h3, h4 { color: #0070c0; } */