/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
  font-family: 'Bodoni72';
  src: url('../fonts/bod72ob_.eot');
  src: url('../fonts/bod72ob_.eot?#iefix') format('embedded-opentype'), url('../fonts/bod72ob_.woff') format('woff'), url('../fonts/bod72ob_.ttf') format('truetype'), url('../fonts/bod72ob_.svg#BodoniXTRegular') format('svg');
  font-display:auto;font-style:normal;font-weight:700;
}

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

* {
  box-sizing: border-box;
}

html,
button,
input,
select,
textarea {
    color: #3B0C18;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

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

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

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

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

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #c0c0c0;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Grid system and layout
   ========================================================================== */

.menu { position: fixed; z-index:40; }
.menu button, .menu .button { margin: 20px 20px; }

.pageheader { height: 120vw; max-height: 750px; overflow: hidden; position: relative; }
.pageheader.theme-red-bright { background: linear-gradient(0deg, rgba(214,113,121,1) 0%, rgba(245,148,148,1) 10%); }
.pageheader.theme-green-bright { background: linear-gradient(0deg, rgba(216,230,165,1) 0%, rgba(252,253,183,1) 10%); }
.pageheader img { max-width: 100%; }
.glassgraphics { display: block; margin: auto; }
.glass { position:absolute;z-index: 20;  top: 0; width: 100%; text-align: center; }
.glass {  }
.winetitle { position:absolute;z-index: 10; top: 30vw; width: 100%;}
.winebutton { position:absolute;z-index: 30; top: 59vw; width: 100%; }
.wineinfo { padding: 100px 0 1px; text-align: center; }
@media only screen and (min-width: 720px) { 
  .winetitle { top: 220px; }
  .winebutton { top: 430px; }
}
@media only screen and (min-width: 993px) { 
  .pageheader { height: auto; max-height: none; overflow: inherit; }
  .pageheader.theme-red-bright { background: #F59494; }
  .pageheader.theme-green-bright { background: #FCFDB7; }
  .wineinfo { position:absolute;z-index: 30; top: 620px; width: 100%; text-align: left; background: transparent !important;}
}

.abouttitle { position:absolute;z-index: 10; top: 320px; }

.footer { padding: 40px 0; }

/* NEW Materialize grid */


.container {
  margin: 0 auto;
  max-width: 1280px;
  width: 90%;
}

@media only screen and (min-width: 601px) {
  .container {
    width: 85%;
  }
}

@media only screen and (min-width: 993px) {
  .container {
    width: 70%;
  }
}

.col .row {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.section.no-pad {
  padding: 0;
}

.section.no-pad-bot {
  padding-bottom: 0;
}

.section.no-pad-top {
  padding-top: 0;
}

.row {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.row .col {
  float: left;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  min-height: 1px;
}

.row .col[class*="push-"], .row .col[class*="pull-"] {
  position: relative;
}

.row .col.s1 {
  width: 8.3333333333%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.s2 {
  width: 16.6666666667%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.s3 {
  width: 25%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.s4 {
  width: 33.3333333333%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.s5 {
  width: 41.6666666667%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.s6 {
  width: 50%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.s7 {
  width: 58.3333333333%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.s8 {
  width: 66.6666666667%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.s9 {
  width: 75%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.s10 {
  width: 83.3333333333%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.s11 {
  width: 91.6666666667%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.s12 {
  width: 100%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.offset-s1 {
  margin-left: 8.3333333333%;
}

.row .col.pull-s1 {
  right: 8.3333333333%;
}

.row .col.push-s1 {
  left: 8.3333333333%;
}

.row .col.offset-s2 {
  margin-left: 16.6666666667%;
}

.row .col.pull-s2 {
  right: 16.6666666667%;
}

.row .col.push-s2 {
  left: 16.6666666667%;
}

.row .col.offset-s3 {
  margin-left: 25%;
}

.row .col.pull-s3 {
  right: 25%;
}

.row .col.push-s3 {
  left: 25%;
}

.row .col.offset-s4 {
  margin-left: 33.3333333333%;
}

.row .col.pull-s4 {
  right: 33.3333333333%;
}

.row .col.push-s4 {
  left: 33.3333333333%;
}

.row .col.offset-s5 {
  margin-left: 41.6666666667%;
}

.row .col.pull-s5 {
  right: 41.6666666667%;
}

.row .col.push-s5 {
  left: 41.6666666667%;
}

.row .col.offset-s6 {
  margin-left: 50%;
}

.row .col.pull-s6 {
  right: 50%;
}

.row .col.push-s6 {
  left: 50%;
}

.row .col.offset-s7 {
  margin-left: 58.3333333333%;
}

.row .col.pull-s7 {
  right: 58.3333333333%;
}

.row .col.push-s7 {
  left: 58.3333333333%;
}

.row .col.offset-s8 {
  margin-left: 66.6666666667%;
}

.row .col.pull-s8 {
  right: 66.6666666667%;
}

.row .col.push-s8 {
  left: 66.6666666667%;
}

.row .col.offset-s9 {
  margin-left: 75%;
}

.row .col.pull-s9 {
  right: 75%;
}

.row .col.push-s9 {
  left: 75%;
}

.row .col.offset-s10 {
  margin-left: 83.3333333333%;
}

.row .col.pull-s10 {
  right: 83.3333333333%;
}

.row .col.push-s10 {
  left: 83.3333333333%;
}

.row .col.offset-s11 {
  margin-left: 91.6666666667%;
}

.row .col.pull-s11 {
  right: 91.6666666667%;
}

.row .col.push-s11 {
  left: 91.6666666667%;
}

.row .col.offset-s12 {
  margin-left: 100%;
}

.row .col.pull-s12 {
  right: 100%;
}

.row .col.push-s12 {
  left: 100%;
}

@media only screen and (min-width: 601px) {
  .row .col.m1 {
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.m2 {
    width: 16.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.m3 {
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.m4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.m5 {
    width: 41.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.m6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.m7 {
    width: 58.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.m8 {
    width: 66.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.m9 {
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.m10 {
    width: 83.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.m11 {
    width: 91.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.m12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.offset-m1 {
    margin-left: 8.3333333333%;
  }
  .row .col.pull-m1 {
    right: 8.3333333333%;
  }
  .row .col.push-m1 {
    left: 8.3333333333%;
  }
  .row .col.offset-m2 {
    margin-left: 16.6666666667%;
  }
  .row .col.pull-m2 {
    right: 16.6666666667%;
  }
  .row .col.push-m2 {
    left: 16.6666666667%;
  }
  .row .col.offset-m3 {
    margin-left: 25%;
  }
  .row .col.pull-m3 {
    right: 25%;
  }
  .row .col.push-m3 {
    left: 25%;
  }
  .row .col.offset-m4 {
    margin-left: 33.3333333333%;
  }
  .row .col.pull-m4 {
    right: 33.3333333333%;
  }
  .row .col.push-m4 {
    left: 33.3333333333%;
  }
  .row .col.offset-m5 {
    margin-left: 41.6666666667%;
  }
  .row .col.pull-m5 {
    right: 41.6666666667%;
  }
  .row .col.push-m5 {
    left: 41.6666666667%;
  }
  .row .col.offset-m6 {
    margin-left: 50%;
  }
  .row .col.pull-m6 {
    right: 50%;
  }
  .row .col.push-m6 {
    left: 50%;
  }
  .row .col.offset-m7 {
    margin-left: 58.3333333333%;
  }
  .row .col.pull-m7 {
    right: 58.3333333333%;
  }
  .row .col.push-m7 {
    left: 58.3333333333%;
  }
  .row .col.offset-m8 {
    margin-left: 66.6666666667%;
  }
  .row .col.pull-m8 {
    right: 66.6666666667%;
  }
  .row .col.push-m8 {
    left: 66.6666666667%;
  }
  .row .col.offset-m9 {
    margin-left: 75%;
  }
  .row .col.pull-m9 {
    right: 75%;
  }
  .row .col.push-m9 {
    left: 75%;
  }
  .row .col.offset-m10 {
    margin-left: 83.3333333333%;
  }
  .row .col.pull-m10 {
    right: 83.3333333333%;
  }
  .row .col.push-m10 {
    left: 83.3333333333%;
  }
  .row .col.offset-m11 {
    margin-left: 91.6666666667%;
  }
  .row .col.pull-m11 {
    right: 91.6666666667%;
  }
  .row .col.push-m11 {
    left: 91.6666666667%;
  }
  .row .col.offset-m12 {
    margin-left: 100%;
  }
  .row .col.pull-m12 {
    right: 100%;
  }
  .row .col.push-m12 {
    left: 100%;
  }
}

@media only screen and (min-width: 993px) {
  .row .col.l1 {
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.l2 {
    width: 16.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.l3 {
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.l4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.l5 {
    width: 41.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.l6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.l7 {
    width: 58.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.l8 {
    width: 66.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.l9 {
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.l10 {
    width: 83.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.l11 {
    width: 91.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.l12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.offset-l1 {
    margin-left: 8.3333333333%;
  }
  .row .col.pull-l1 {
    right: 8.3333333333%;
  }
  .row .col.push-l1 {
    left: 8.3333333333%;
  }
  .row .col.offset-l2 {
    margin-left: 16.6666666667%;
  }
  .row .col.pull-l2 {
    right: 16.6666666667%;
  }
  .row .col.push-l2 {
    left: 16.6666666667%;
  }
  .row .col.offset-l3 {
    margin-left: 25%;
  }
  .row .col.pull-l3 {
    right: 25%;
  }
  .row .col.push-l3 {
    left: 25%;
  }
  .row .col.offset-l4 {
    margin-left: 33.3333333333%;
  }
  .row .col.pull-l4 {
    right: 33.3333333333%;
  }
  .row .col.push-l4 {
    left: 33.3333333333%;
  }
  .row .col.offset-l5 {
    margin-left: 41.6666666667%;
  }
  .row .col.pull-l5 {
    right: 41.6666666667%;
  }
  .row .col.push-l5 {
    left: 41.6666666667%;
  }
  .row .col.offset-l6 {
    margin-left: 50%;
  }
  .row .col.pull-l6 {
    right: 50%;
  }
  .row .col.push-l6 {
    left: 50%;
  }
  .row .col.offset-l7 {
    margin-left: 58.3333333333%;
  }
  .row .col.pull-l7 {
    right: 58.3333333333%;
  }
  .row .col.push-l7 {
    left: 58.3333333333%;
  }
  .row .col.offset-l8 {
    margin-left: 66.6666666667%;
  }
  .row .col.pull-l8 {
    right: 66.6666666667%;
  }
  .row .col.push-l8 {
    left: 66.6666666667%;
  }
  .row .col.offset-l9 {
    margin-left: 75%;
  }
  .row .col.pull-l9 {
    right: 75%;
  }
  .row .col.push-l9 {
    left: 75%;
  }
  .row .col.offset-l10 {
    margin-left: 83.3333333333%;
  }
  .row .col.pull-l10 {
    right: 83.3333333333%;
  }
  .row .col.push-l10 {
    left: 83.3333333333%;
  }
  .row .col.offset-l11 {
    margin-left: 91.6666666667%;
  }
  .row .col.pull-l11 {
    right: 91.6666666667%;
  }
  .row .col.push-l11 {
    left: 91.6666666667%;
  }
  .row .col.offset-l12 {
    margin-left: 100%;
  }
  .row .col.pull-l12 {
    right: 100%;
  }
  .row .col.push-l12 {
    left: 100%;
  }
}

@media only screen and (min-width: 1201px) {
  .row .col.xl1 {
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.xl2 {
    width: 16.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.xl3 {
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.xl4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.xl5 {
    width: 41.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.xl6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.xl7 {
    width: 58.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.xl8 {
    width: 66.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.xl9 {
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.xl10 {
    width: 83.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.xl11 {
    width: 91.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.xl12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.offset-xl1 {
    margin-left: 8.3333333333%;
  }
  .row .col.pull-xl1 {
    right: 8.3333333333%;
  }
  .row .col.push-xl1 {
    left: 8.3333333333%;
  }
  .row .col.offset-xl2 {
    margin-left: 16.6666666667%;
  }
  .row .col.pull-xl2 {
    right: 16.6666666667%;
  }
  .row .col.push-xl2 {
    left: 16.6666666667%;
  }
  .row .col.offset-xl3 {
    margin-left: 25%;
  }
  .row .col.pull-xl3 {
    right: 25%;
  }
  .row .col.push-xl3 {
    left: 25%;
  }
  .row .col.offset-xl4 {
    margin-left: 33.3333333333%;
  }
  .row .col.pull-xl4 {
    right: 33.3333333333%;
  }
  .row .col.push-xl4 {
    left: 33.3333333333%;
  }
  .row .col.offset-xl5 {
    margin-left: 41.6666666667%;
  }
  .row .col.pull-xl5 {
    right: 41.6666666667%;
  }
  .row .col.push-xl5 {
    left: 41.6666666667%;
  }
  .row .col.offset-xl6 {
    margin-left: 50%;
  }
  .row .col.pull-xl6 {
    right: 50%;
  }
  .row .col.push-xl6 {
    left: 50%;
  }
  .row .col.offset-xl7 {
    margin-left: 58.3333333333%;
  }
  .row .col.pull-xl7 {
    right: 58.3333333333%;
  }
  .row .col.push-xl7 {
    left: 58.3333333333%;
  }
  .row .col.offset-xl8 {
    margin-left: 66.6666666667%;
  }
  .row .col.pull-xl8 {
    right: 66.6666666667%;
  }
  .row .col.push-xl8 {
    left: 66.6666666667%;
  }
  .row .col.offset-xl9 {
    margin-left: 75%;
  }
  .row .col.pull-xl9 {
    right: 75%;
  }
  .row .col.push-xl9 {
    left: 75%;
  }
  .row .col.offset-xl10 {
    margin-left: 83.3333333333%;
  }
  .row .col.pull-xl10 {
    right: 83.3333333333%;
  }
  .row .col.push-xl10 {
    left: 83.3333333333%;
  }
  .row .col.offset-xl11 {
    margin-left: 91.6666666667%;
  }
  .row .col.pull-xl11 {
    right: 91.6666666667%;
  }
  .row .col.push-xl11 {
    left: 91.6666666667%;
  }
  .row .col.offset-xl12 {
    margin-left: 100%;
  }
  .row .col.pull-xl12 {
    right: 100%;
  }
  .row .col.push-xl12 {
    left: 100%;
  }
}



/* OLD GRID

.block { float: left; width: 100%; clear: both; }

.col { display: block; float:left; }

.span_s16 { width: 100%; }
.span_s15 { width: 93.75%; }
.span_s14 { width: 87.5%; }
.span_s13 { width: 81.25%; }
.span_s12 { width: 75%; }
.span_s11 { width: 68,75%; }
.span_s10 { width: 62.5%; }
.span_s9 { width: 56.25%; }
.span_s8 { width: 50%; }
.span_s7 { width: 43.75%; }
.span_s6 { width: 37.5%; }
.span_s5 { width: 31.25%; }
.span_s4 { width: 25%; }
.span_s3 { width: 18.75%; }
.span_s2 { width: 12.5%; }
.span_s1 { width: 6.25%; }

.right_s16 { margin-right: 100%; }
.right_s15 { margin-right: 93.75%; }
.right_s14 { margin-right: 87.5%; }
.right_s13 { margin-right: 81.25%; }
.right_s12 { margin-right: 75%; }
.right_s11 { margin-right: 68,75%; }
.right_s10 { margin-right: 62.5%; }
.right_s9 { margin-right: 56.25%; }
.right_s8 { margin-right: 50%; }
.right_s7 { margin-right: 43.75%; }
.right_s6 { margin-right: 37.5%; }
.right_s5 { margin-right: 31.25%; }
.right_s4 { margin-right: 25%; }
.right_s3 { margin-right: 18.75%; }
.right_s2 { margin-right: 12.5%; }
.right_s1 { margin-right: 6.25%; }

.left_s16 { margin-left: 100%; }
.left_s15 { margin-left: 93.75%; }
.left_s14 { margin-left: 87.5%; }
.left_s13 { margin-left: 81.25%; }
.left_s12 { margin-left: 75%; }
.left_s11 { margin-left: 68,75%; }
.left_s10 { margin-left: 62.5%; }
.left_s9 { margin-left: 56.25%; }
.left_s8 { margin-left: 50%; }
.left_s7 { margin-left: 43.75%; }
.left_s6 { margin-left: 37.5%; }
.left_s5 { margin-left: 31.25%; }
.left_s4 { margin-left: 25%; }
.left_s3 { margin-left: 18.75%; }
.left_s2 { margin-left: 12.5%; }
.left_s1 { margin-left: 6.25%; }

@media only screen and (min-width: 601px) {

  .span_m16 { width: 100%; }
  .span_m15 { width: 93.75%; }
  .span_m14 { width: 87.5%; }
  .span_m13 { width: 81.25%; }
  .span_m12 { width: 75%; }
  .span_m11 { width: 68,75%; }
  .span_m10 { width: 62.5%; }
  .span_m9 { width: 56.25%; }
  .span_m8 { width: 50%; }
  .span_m7 { width: 43.75%; }
  .span_m6 { width: 37.5%; }
  .span_m5 { width: 31.25%; }
  .span_m4 { width: 25%; }
  .span_m3 { width: 18.75%; }
  .span_m2 { width: 12.5%; }
  .span_m1 { width: 6.25%; }

  .right_m16 { margin-right: 100%; }
  .right_m15 { margin-right: 93.75%; }
  .right_m14 { margin-right: 87.5%; }
  .right_m13 { margin-right: 81.25%; }
  .right_m12 { margin-right: 75%; }
  .right_m11 { margin-right: 68,75%; }
  .right_m10 { margin-right: 62.5%; }
  .right_m9 { margin-right: 56.25%; }
  .right_m8 { margin-right: 50%; }
  .right_m7 { margin-right: 43.75%; }
  .right_m6 { margin-right: 37.5%; }
  .right_m5 { margin-right: 31.25%; }
  .right_m4 { margin-right: 25%; }
  .right_m3 { margin-right: 18.75%; }
  .right_m2 { margin-right: 12.5%; }
  .right_m1 { margin-right: 6.25%; }

  .left_m16 { margin-left: 100%; }
  .left_m15 { margin-left: 93.75%; }
  .left_m14 { margin-left: 87.5%; }
  .left_m13 { margin-left: 81.25%; }
  .left_m12 { margin-left: 75%; }
  .left_m11 { margin-left: 68,75%; }
  .left_m10 { margin-left: 62.5%; }
  .left_m9 { margin-left: 56.25%; }
  .left_m8 { margin-left: 50%; }
  .left_m7 { margin-left: 43.75%; }
  .left_m6 { margin-left: 37.5%; }
  .left_m5 { margin-left: 31.25%; }
  .left_m4 { margin-left: 25%; }
  .left_m3 { margin-left: 18.75%; }
  .left_m2 { margin-left: 12.5%; }
  .left_m1 { margin-left: 6.25%; }

}

@media only screen and (min-width: 993px) {

  .span_l16 { width: 100%; }
  .span_l15 { width: 93.75%; }
  .span_l14 { width: 87.5%; }
  .span_l13 { width: 81.25%; }
  .span_l12 { width: 75%; }
  .span_l11 { width: 68,75%; }
  .span_l10 { width: 62.5%; }
  .span_l9 { width: 56.25%; }
  .span_l8 { width: 50%; }
  .span_l7 { width: 43.75%; }
  .span_l6 { width: 37.5%; }
  .span_l5 { width: 31.25%; }
  .span_l4 { width: 25%; }
  .span_l3 { width: 18.75%; }
  .span_l2 { width: 12.5%; }
  .span_l1 { width: 6.25%; }

  .right_l16 { margin-right: 100%; }
  .right_l15 { margin-right: 93.75%; }
  .right_l14 { margin-right: 87.5%; }
  .right_l13 { margin-right: 81.25%; }
  .right_l12 { margin-right: 75%; }
  .right_l11 { margin-right: 68,75%; }
  .right_l10 { margin-right: 62.5%; }
  .right_l9 { margin-right: 56.25%; }
  .right_l8 { margin-right: 50%; }
  .right_l7 { margin-right: 43.75%; }
  .right_l6 { margin-right: 37.5%; }
  .right_l5 { margin-right: 31.25%; }
  .right_l4 { margin-right: 25%; }
  .right_l3 { margin-right: 18.75%; }
  .right_l2 { margin-right: 12.5%; }
  .right_l1 { margin-right: 6.25%; }

  .left_l16 { margin-left: 100%; }
  .left_l15 { margin-left: 93.75%; }
  .left_l14 { margin-left: 87.5%; }
  .left_l13 { margin-left: 81.25%; }
  .left_l12 { margin-left: 75%; }
  .left_l11 { margin-left: 68,75%; }
  .left_l10 { margin-left: 62.5%; }
  .left_l9 { margin-left: 56.25%; }
  .left_l8 { margin-left: 50%; }
  .left_l7 { margin-left: 43.75%; }
  .left_l6 { margin-left: 37.5%; }
  .left_l5 { margin-left: 31.25%; }
  .left_l4 { margin-left: 25%; }
  .left_l3 { margin-left: 18.75%; }
  .left_l2 { margin-left: 12.5%; }
  .left_l1 { margin-left: 6.25%; }

}

*/

.padding { padding: 0 15px; }
.padding-left { padding-left: 15px; }
.padding-right { padding-right: 15px; }
.padding-top { padding-top: 40px;}
.padding-bottom { padding-bottom: 40px;}
.padding-top-bottom { padding: 40px 0; }
.padding-top-half { padding-top: 20px;}
.padding-bottom-half { padding-bottom: 20px;}
.padding-top-bottom-half { padding: 20px 0; }
.no-padding-top {padding-top: 0;}
.no-padding-bottom {padding-bottom: 0;}
.no-margin-top {margin-top: 0;}
.no-margin-bottom {margin-bottom: 0;}


.height-view { min-height: 100vh; }
.height-50 { min-height: 50vh; }

/*
 * Cover layout module
 */

.cover { display: flex; flex-direction: column; padding: 20px; position: relative; text-align: center; }
.cover > * { margin-top: 1rem; margin-bottom: 1rem; }
.cover > .focus-content { margin-top: auto; margin-bottom: auto; }
.cover > :first-child:not(.focus-content) { margin-top: 60px; }
.cover > :last-child:not(.focus-content) { margin-bottom: 60px; }

/*
 * Cover image
 */

 .cover-image { 
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.cover-image-historien  { 
  background: url('../img/cover_historien.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.cover-image-odlingen {
  background: url('../img/cover_odlingen.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

@supports (-webkit-overflow-scrolling: touch) {
  .cover-image {
    background-attachment: scroll;
  } 
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html { height: 100%; padding: 10px; }
html:before, html:after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    height: 10px;
    z-index: 200;
}
html:before {
    top: 0;
}
html:after {
    bottom: 0;
}
body {
    min-height: 100%;
    float: left;
    clear: both;
    width: 100%;
}

body {  background: #F0EFE4;  font-family: 'Crimson Text', serif; font-size: 18px; line-height: 24px; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, th, dl, .sansserif {font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; text-transform: uppercase; }
h1, h2, h3, h4, h5, h6, th { margin: 0; padding: 1em 0 .5em;}
h1, .h1 { font-family: 'Bodoni72', serif; text-transform: none; font-size: 64px; line-height: 64px;  font-weight: bold; padding-top: 0;}
h1 .altline, .h1 .altline { display: block; }
h1.small { font-size: 30px; line-height: 36px; }
h2, .h2 { font-size: 30px; line-height: 36px; font-weight: normal;}
h3, .h3 { font-size: 22px; line-height: 26px; font-weight: normal;}
h4, .h4, dl, th {font-weight: bold; font-size: 14px;}

p {margin: 0; padding: 0 0 1em; }
.boldline { font-family: 'Bodoni72', serif; font-weight: bold; font-size: 20px; }
.boldline.large {font-size: 54px; }


@media only screen and (max-width: 500px) {
  h1, .h1 { font-size: 48px; line-height: 48px; }
  .boldline.large {font-size: 38px; }
}
@media only screen and (max-width: 400px) {
  h1, .h1 { font-size: 40px; line-height: 40px; }
  .boldline.large {font-size: 30px; }
}


header .boldline { padding-bottom: .5em; }

a, a h1, a h3 { 
  -webkit-transition: all linear 0.2s;
  -moz-transition: all linear 0.2s;
  -ms-transition: all linear 0.2s;
  -o-transition: all linear 0.2s;
  transition: all linear 0.2s;
}

img { max-width: 100%; }

table { width: 100%; text-align: left; margin-bottom: 1em;}
tr {border-bottom: 1px solid; }
td {padding: 5px 0;}

dl { width: 100%; border-top: 1px solid;  }
dt { float: left; clear: left; text-align: right; width: 50%; display: inline-block; padding: 5px 10px 5px 0; }
dd { margin: 0;  padding: 5px 0; text-align: left; }
dt+dd { border-bottom: 1px solid;}

.large { font-size: 24px; line-height: 30px; }
.thin { font-weight: normal; }
.bold { font-weight: bold; }
.center { text-align: center; }

.border-top { border-top-width: 1px; }

/* Images 
-------------------------------------------------------------------------------------------------- */
img {
  /*width: 100%;
  max-width: 100%;*/
  border: none;
}
img.noresize {
  width: auto;
  max-width: none;
}
/* Forms 
-------------------------------------------------------------------------------------------------- */
label {
  display: block;
}
/* Buttone 
-------------------------------------------------------------------------------------------------- */
button, .button { display: inline-block; box-sizing: content-box; padding: 5px 20px; border-radius: 5px; font-size: 14px; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; text-transform: uppercase; text-decoration: none; border: none; }
button { padding: 9px 20px; }
table .button { padding: 2px 20px; width: 50%; text-align: center;}
.button.round { font-size: 24px; }
.button.round { width: 104px; height: 24px; border-radius: 52px; padding: 40px 0; font-size: 24px; box-sizing: content-box; }

@media only screen and (max-width: 500px) {
  .button.round { width: 94px; padding: 35px 0;}
}
@media only screen and (max-width: 400px) {
  .button.round { width: 84px; padding: 30px 0;}
}

/* ==========================================================================
   Sidr menu
   ========================================================================== */

.sidr{
    display:none; position:absolute; position:fixed; top:0;height:100%;z-index:999999;overflow-x:none;overflow-y:auto;
    width:260px;
    font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
    font-size:15px;
    background:#83213B;
    color: #F59494;
}
.sidr .sidr-inner{
    padding: 10px;
}
.sidr .sidr-inner>p{
    margin-left:15px;
    margin-right:15px;
}
.sidr.right{
    left:auto;right:-260px
}
.sidr.left{
    left:-260px;right:auto
    }
.sidr h1,.sidr h2,.sidr h3,.sidr h4,.sidr h5,.sidr h6{
    font-size:11px;
    font-weight:normal;
    padding:0 15px;
    margin:0 0 5px;
    line-height:24px;
    color: #F59494;
}
.sidr a {
  color: #FCFDB7;
}
.sidr p{
    font-size:13px;
    margin:0 0 12px;
}
.sidr>p{
    margin-left:15px;
    margin-right:15px;
}
.sidr ul{
    display:block;
    margin:15px 0 30px;
    padding:0;
    border-bottom:1px dotted #F59494;
}
.sidr ul li{display:block;margin:0;line-height:48px;border-top:1px dotted #F59494;}
.sidr ul li:hover,.sidr ul li.active,.sidr ul li.sidr-class-active{}
.sidr ul li:hover>a,.sidr ul li:hover>span,.sidr ul li.active>a,.sidr ul li.active>span,.sidr ul li.sidr-class-active>a,.sidr ul li.sidr-class-active>span{background:rgba(0,0,0,0.1);}
.sidr ul li a,.sidr ul li span{padding:0 15px;display:block;text-decoration:none;}
.sidr ul li ul{border-bottom:none;margin:0}
.sidr ul li ul li{line-height:40px;font-size:13px}
.sidr ul li ul li:last-child{border-bottom:none}
.sidr ul li ul li:hover,.sidr ul li ul li.active,.sidr ul li ul li.sidr-class-active{border-top:none;line-height:41px}
.sidr ul li ul li:hover>a,.sidr ul li ul li:hover>span,.sidr ul li ul li.active>a,.sidr ul li ul li.active>span,.sidr ul li ul li.sidr-class-active>a,.sidr ul li ul li.sidr-class-active>span{ }
.sidr ul li ul li a,.sidr ul li ul li span{color:rgba(255,255,255,0.8);padding-left:30px}
.sidr form{margin:0 15px}
.sidr label{font-size:13px}
.sidr input[type="text"],.sidr input[type="password"],.sidr input[type="date"],.sidr input[type="datetime"],.sidr input[type="email"],.sidr input[type="number"],.sidr input[type="search"],.sidr input[type="tel"],.sidr input[type="time"],.sidr input[type="url"],.sidr textarea,.sidr select{width:100%;font-size:13px;padding:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;border:none;background:rgba(0,0,0,0.1);color:rgba(255,255,255,0.6);display:block;clear:both}
.sidr input[type=checkbox]{width:auto;display:inline;clear:none}
.sidr input[type=button],.sidr input[type=submit]{color:#333;background:#fff}
.sidr input[type=button]:hover,.sidr input[type=submit]:hover{background:rgba(255,255,255,0.9)}



/* ==========================================================================
   Colour themes
   ========================================================================== */

/* 

Default + Red theme
===============================

#83213B // Mörk
#ED174D // Klar
#F59494 // Blek
#3B0C18 // Textfärg

Globala:
#FCFDB7 //Blekgul
#F0EFE4 // Ljusgrå

*/

/* Bakgrund */
body { background-color: #F0EFE4; }
/* Ram */
html, html:before, html:after, html.theme-red, html.theme-red:before, html.theme-red:after { background: #83213B;}
/* Rubrik 1 */
h1, .h1, .theme-red h1, .theme-red .h1  { color: #ED174D; }
/* Rubrik 1 altfärg */
h1 .altline, .boldline, .theme-red h1 .altline, .h1 .altline, .boldline, .theme-red .h1 .altline, .theme-red .boldline { color: #83213B; }
/* Rubriker 2-6 */
h2, h3, h4, h5, h6, .h2, .h3, .h4, .h5, .h6, th, dl, 
.theme-red h2, .theme-red h3, .theme-red h4, .theme-red h5, .theme-red h6, 
.theme-red .h2, .theme-red .h3, .theme-red .h4, .theme-red .h5, .theme-red .h6, .theme-red th, .theme-red dl { color: #83213B; }
/* Text */
html, dd, .theme-red, .theme-red dd { color: #3B0C18; }
/* Knapp, länkar */
button, .button, .theme-red button, .theme-red .button { background: #ED174D; color: #FCFDB7;}
a, .theme-red a { color: #ED174D; }
/* Kantlinjer, illustrationer */
tr, dl, dt+dd, .border-top, .theme-red tr, .theme-red dl, .theme-red dt+dd, .theme-red .border-top { border-color: #F59494; }


/*
.theme-red-bright
--------------------------------
*/

/* Bakgrund */
.theme-red-bright { background-color: #F59494; }
/* Rubriker 1 */
.theme-red-bright h1, .theme-red-bright .h1 { color: #FCFDB7; }
/* Rubriker 1 altfärg */
.theme-red-bright h1 .altline, .theme-red-bright .h1 .altline, .theme-red-bright .boldline { color: #83213B; }
/* Rubriker 2-6 */
.theme-red-bright h2, .theme-red-bright h3, .theme-red-bright h4, 
.theme-red-bright h5, .theme-red-bright h6,
.theme-red-bright .h2, .theme-red-bright .h3, .theme-red-bright .h4, 
.theme-red-bright .h5, .theme-red-bright .h6 { color: #FCFDB7; }
/* Knapp, länkar */
.theme-red-bright button, .theme-red-bright .button { background: #FCFDB7; color: #83213B;}
.theme-red-bright a { color: #FCFDB7; }
/* Kantlinjer, illustrationer */
.theme-red-bright tr, .theme-red-bright dl, 
.theme-red-bright dt+dd, .theme-red-bright .border-top { border-color: #FCFDB7; }


/*
.theme-red-dark + .sidr
--------------------------------
*/

/* Bakgrund */
.sidr, .theme-red-dark { background-color: #83213B; }
/* Rubrik 1 */
.theme-red-dark h1, .theme-red-dark .h1 { color: #FCFDB7; }
/* Rubrik 1 altfärg */
.theme-red-dark h1 .altline, .theme-red-dark .h1 .altline, .theme-red-dark .boldline { color: #ED174D; }
/* Rubriker 2-6 */
.sidr h4, .sidr .h4,
.theme-red-dark h2, .theme-red-dark h3, .theme-red-dark h4, .theme-red-dark h5, .theme-red-dark h6, 
.theme-red-dark .h2, .theme-red-dark .h3, .theme-red-dark .h4, .theme-red-dark .h5, .theme-red-dark .h6, 
.theme-red-dark th, .theme-red-dark dl { color: #FCFDB7; }
/* Text */
.sidr,
.theme-red-dark, .theme-red-dark dd { color: #fff; }
/* Knapp, länkar */
.sidr button, .theme-red-dark button, .sidr .button, .theme-red-dark .button { background: #FCFDB7; color: #025B3A;}
.sidr a, .sidr ul li a, .theme-red-dark a, .theme-red .sidr a, .theme-red .sidr ul li a { color: #FCFDB7; }
/* Kantlinjer, illustrationer */
.sidr ul, .sidr ul li,
.theme-red-dark tr, .theme-red-dark dl, .theme-red-dark dt+dd, .theme-red-dark .border-top { border-color: #ED174D; }




/* 

Green theme
===============================

#025B3A // Mörk
#62BB46 // Klar
#77A48D // Blek
#08271B // Textfärg

Globala:
#FCFDB7 //Blekgul
#F0EFE4 // Ljusgrå

*/

/* Ram */
html.theme-green, html.theme-green:before, html.theme-green:after { background-color: #025B3A; }
/* Rubriker 1-2 */
.theme-green h1, .theme-green .h1, .theme-green .boldline { color: #62BB46; }
/* Rubriker 1-2 altfärg */
.theme-green h1 .altline, .theme-green .h1 .altline { color: #025B3A; }
/* Rubriker 3-6 */
.theme-green h2, .theme-green h3, .theme-green h4, .theme-green h5, .theme-green h6, 
.theme-green .h2, .theme-green .h3, .theme-green .h4, .theme-green .h5, .theme-green .h6, 
.theme-green th, .theme-green dl { color: #025B3A; }
/* Text */
.theme-green, .theme-green dd { color: #08271B; }
/* Knapp, länkar */
.theme-green button, .theme-green .button { background: #62BB46; color: #FCFDB7;}
.theme-green a { color: #62BB46; }
/* Kantlinjer, illustrationer */
.theme-green tr, .theme-green .border-top, .theme-green dl, .theme-green dt+dd { border-color: #77A48D; }


/*
.theme-green-bright
--------------------------------
*/

/* Bakgrund */
.theme-green-bright { background-color: #FCFDB7; }
/* Rubrik 1 */
.theme-green-bright h1, .theme-green-bright .h1 { color: #025B3A; }
/* Rubrik 1 altfärg */
.theme-green-bright h1 .altline, .theme-green-bright .h1 .altline, .theme-green-bright .boldline { color: #62BB46; }
/* Rubriker 2-6 */
.theme-green-bright h2, .theme-green-bright h3, .theme-green-bright h4, 
.theme-green-bright h5, .theme-green-bright h6,
.theme-green-bright .h2, .theme-green-bright .h3, .theme-green-bright .h4, 
.theme-green-bright .h5, .theme-green-bright .h6 { color: #62BB46; }
/* Knapp, länkar */
.theme-green-bright button, .theme-green-bright .button { background: #025B3A; color: #FCFDB7;}
.theme-green-bright a { color: #025B3A; }
/* Kantlinjer, illustrationer */
.theme-green-bright tr, .theme-green-bright .border-top, .theme-green-bright dl, .theme-green-bright dt+dd { border-color: #62BB46; }


/*
.theme-green-medium
--------------------------------
*/

/* Bakgrund */
.theme-green-medium { background-color: #77A48D; }
/* Rubrik 1 */
.theme-green-medium h1, .theme-green-medium .h1 { color: #FCFDB7; }
/* Rubrik 1 altfärg */
.theme-green-medium h1 .altline, .theme-green-medium .h1 .altline, .theme-green-medium .boldline { color: #025B3A; }
/* Rubriker 2-6 */
.theme-green-medium h2, .theme-green-medium h3, .theme-green-medium h4, .theme-green-medium h5, .theme-green-medium h6, 
.theme-green-medium .h2, .theme-green-medium .h3, .theme-green-medium .h4, .theme-green-medium .h5, .theme-green-medium .h6, 
.theme-green-medium th, .theme-green-medium dl { color: #FCFDB7; }
/* Text */
.theme-green-medium .large, .theme-green-medium dd { color: #fff; }
/* Knapp, länkar */
.theme-green-medium button, .theme-green-medium .button { background: #FCFDB7; color: #025B3A;}
.theme-green-medium a { color: #FCFDB7; }
/* Kantlinjer, illustrationer */
.theme-green-medium tr, .theme-green-medium .border-top, .theme-green-medium dl, .theme-green-medium dt+dd { border-color: #62BB46; }


/*
.theme-green-dark + .sidr
--------------------------------
*/

/* Bakgrund */
.theme-green-dark, .theme-green .sidr { background-color: #025B3A; }
/* Rubrik 1 */
.theme-green-dark h1, .theme-green-dark .h1 { color: #FCFDB7; }
/* Rubrik 1 altfärg */
.theme-green-dark h1 .altline, .theme-green-dark .h1 .altline, .theme-green-dark .boldline { color: #62BB46; }
/* Rubriker 2-6 */
.theme-green .sidr h4, .theme-green .sidr .h4,
.theme-green-dark h2, .theme-green-dark h3, .theme-green-dark h4, .theme-green-dark h5, .theme-green-dark h6, 
.theme-green-dark .h2, .theme-green-dark .h3, .theme-green-dark .h4, .theme-green-dark .h5, .theme-green-dark .h6, 
.theme-green-dark th, .theme-green-dark dl { color: #FCFDB7; }
/* Text */
.theme-green-dark, .theme-green-dark dd, .theme-green .sidr { color: #fff; }
/* Knapp, länkar */
.theme-green-dark button, .theme-green-dark .button { background: #FCFDB7; color: #025B3A;}
.theme-green-dark a, .theme-green .sidr a, .theme-green .sidr ul li a { color: #FCFDB7; }
/* Kantlinjer, illustrationer */
.theme-green-dark tr, .theme-green-dark .border-top, .theme-green-dark dl, .theme-green-dark dt+dd,
.theme-green .sidr ul, .theme-green .sidr ul li { border-color: #62BB46; }


/* 

Purple theme
===============================

#633F65 // Mörk
#F59494 // Klar
#A997A4 // Blek
#300833 // Textfärg

Globala:
#FCFDB7 //Blekgul
#F0EFE4 // Ljusgrå

*/

/* Ram */
html.theme-purple, html.theme-purple:before, html.theme-purple:after { background-color: #633F65; }
/* Rubriker 1-2 */
.theme-purple h1, .theme-purple .h1, .theme-purple .boldline { color: #F59494; }
/* Rubriker 1-2 altfärg */
.theme-purple h1 .altline, .theme-purple .h1 .altline { color: #633F65; }
/* Rubriker 3-6 */
.theme-purple h2, .theme-purple h3, .theme-purple h4, .theme-purple h5, .theme-purple h6, 
.theme-purple .h2, .theme-purple .h3, .theme-purple .h4, .theme-purple .h5, .theme-purple .h6, 
.theme-purple th, .theme-purple dl { color: #633F65; }
/* Text */
.theme-purple, .theme-purple dd { color: #300833; }
/* Knapp, länkar */
.theme-purple button, .theme-purple .button { background: #F59494; color: #FCFDB7;}
.theme-purple a { color: #F59494; }
/* Kantlinjer, illustrationer */
.theme-purple tr, .theme-purple .border-top, .theme-purple dl, .theme-purple dt+dd { border-color: #A997A4; }

/*
.theme-purple-medium
--------------------------------
*/

/* Bakgrund */
.theme-purple-medium { background-color: #A997A4; }
/* Rubrik 1 */
.theme-purple-medium h1, .theme-purple-medium .h1 { color: #FCFDB7; }
/* Rubrik 1 altfärg */
.theme-purple-medium h1 .altline, .theme-purple-medium .h1 .altline, .theme-purple-medium .boldline { color: #633F65; }
/* Rubriker 2-6 */
.theme-purple-medium h2, .theme-purple-medium h3, .theme-purple-medium h4, .theme-purple-medium h5, .theme-purple-medium h6, 
.theme-purple-medium .h2, .theme-purple-medium .h3, .theme-purple-medium .h4, .theme-purple-medium .h5, .theme-purple-medium .h6, 
.theme-purple-medium th, .theme-purple-medium dl { color: #FCFDB7; }
/* Text */
.theme-purple-medium .large, .theme-purple-medium dd { color: #fff; }
/* Knapp, länkar */
.theme-purple-medium button, .theme-purple-medium .button { background: #FCFDB7; color: #633F65;}
.theme-purple-medium a { color: #FCFDB7; }
/* Kantlinjer, illustrationer */
.theme-purple-medium tr, .theme-purple-medium .border-top, .theme-purple-medium dl, .theme-purple-medium dt+dd { border-color: #F59494; }

/*
.theme-purple-dark + .sidr
--------------------------------
*/

/* Bakgrund */
.theme-purple-dark, .theme-purple .sidr { background-color: #633F65; }
/* Rubrik 1 */
.theme-purple-dark h1, .theme-purple-dark .h1 { color: #FCFDB7; }
/* Rubrik 1 altfärg */
.theme-purple-dark h1 .altline, .theme-purple-dark .h1 .altline, .theme-purple-dark .boldline { color: #F59494; }
/* Rubriker 2-6 */
.theme-purple .sidr h4, .theme-purple .sidr .h4,
.theme-purple-dark h2, .theme-purple-dark h3, .theme-purple-dark h4, .theme-purple-dark h5, .theme-purple-dark h6, 
.theme-purple-dark .h2, .theme-purple-dark .h3, .theme-purple-dark .h4, .theme-purple-dark .h5, .theme-purple-dark .h6, 
.theme-purple-dark th, .theme-purple-dark dl { color: #FCFDB7; }
/* Text */
.theme-purple-dark, .theme-purple-dark dd, .theme-purple .sidr { color: #fff; }
/* Knapp, länkar */
.theme-purple-dark button, .theme-purple-dark .button { background: #FCFDB7; color: #633F65;}
.theme-purple-dark a, .theme-purple .sidr a, .theme-purple .sidr ul li a { color: #FCFDB7; }
/* Kantlinjer, illustrationer */
.theme-purple-dark tr, .theme-purple-dark .border-top, .theme-purple-dark dl, .theme-purple-dark dt+dd,
.theme-purple .sidr ul, .theme-purple .sidr ul li { border-color: #F59494; }


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

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}