/* Useful vars 
--------------
BG gray: rgba( 50, 68, 78, 1 );
Font gray: rgba( 201, 207, 208, 1 );
Font purple: #6e60cc;
*/


/* -------------------------------------------------------------
 * Fonts
 * ---------------------------------------------------------- */
/*@import url( 'https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&display=swap' );
@import url('https://fonts.googleapis.com/css2?family=Saira+Extra+Condensed:wght@500&display=swap');*/

@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500&display=swap');

@font-face {
    font-family: 'espinosa';
    src: url( '../fonts/espinosanova-regular-webfont.woff2' ) format( 'woff2' ),
         url( '../fonts/espinosanova-regular-webfont.woff' ) format( 'woff' );
    font-weight: 300;
    font-style: normal;

}

@font-face {
    font-family: 'espinosa';
    src: url( '../fonts/espinosanova-regular-webfont.woff2' ) format( 'woff2' ),
         url( '../fonts/espinosanova-regular-webfont.woff' ) format( 'woff' );
    font-weight: 300;
    font-style: normal;

}

@font-face {
    font-family: 'espinosa';
    src: url( '../fonts/espinosanova-italic-webfont.woff2' ) format( 'woff2' ),
         url( '../fonts/espinosanova-italic-webfont.woff' ) format( 'woff' );
    font-weight: 300;
    font-style: italic;

}

@font-face {
    font-family: 'espinosa';
    src: url( '../fonts/espinosanova-bold-webfont.woff2' ) format( 'woff2' ),
         url( '../fonts/espinosanova-bold-webfont.woff' ) format( 'woff' );
    font-weight: 500;
    font-style: normal;

}

@font-face {
    font-family: 'espinosa';
    src: url( '../fonts/espinosanova-bolditalic-webfont.woff2' ) format( 'woff2' ),
         url( '../fonts/espinosanova-bolditalic-webfont.woff' ) format( 'woff' );
    font-weight: 500;
    font-style: italic;

}


/* -------------------------------------------------------------
 * Basics & resets
 * ---------------------------------------------------------- */

* {
  font-family: 'espinosa', serif;
  font-weight: 300;
  line-height: 1.6em;
}

html, body {
  /*background-image: url( "../img/site/background.jpg" );*/
  /*background-repeat: repeat-y;*/
  /*background-position: top center;*/
  /*background-size: cover;*/
  background-color: #081118;
  /*background-color: rgba( 50, 68, 78, 1 );*/
  color: rgba( 201, 207, 208, 1 );
  font-size: 100%;
  margin: 0;
  padding: 0;
}

  @media( max-width: 600px ){
    html, body {
      /*font-size: 90%;*/
    }
  }

h1, h1 *, h2, h2 *, h3, h3 *, h4, h4 *, h5, h5 *, h6, h6 * {
  font-family: 'Red Hat Display', sans-serif;
  font-weight: 700;
  margin: 0.5rem 0;
}

  h1.border-bottom,
  h2.border-bottom {
    border-bottom: 1px solid;
  }

    /*h1.border-bottom.border-purple,
    h2.border-bottom.border-purple {
      border-color: #6e60cc;
    }  */ 

  /*@media( max-width: 600px ){
    h1, h1 *, h2, h2 *, h3, h3 *, h4, h4 *, h5, h5 *, h6, h6 * {
      text-align: center;
    }
  }*/

h1 {
  font-size: 2.2rem;
  text-transform: uppercase;
  color: white;
}

  /*@media( max-width: 600px ){
    h1 {
      font-size: 1.8rem;
    }
  }*/

h2 {
  text-transform: uppercase;
}

h3 {
  font-size: 1.5rem;
}

p {
  font-size: 1.1rem;
  margin: 1rem 0 1.7rem;
  padding: 0;
}

a {
  color: rgba( 201, 207, 208, 1 );
  transition: color 0.2s linear;
}

  a:hover {
    color: white;
    text-decoration: underline;
  }

  a:hover .highlight-on-hover {
    box-shadow: 0 0 1rem 0 white;
  }

  a.light {
    background-color: transparent;
    color: #ffffff;
    opacity: 0.9;
    /*text-decoration: underline;*/
    transition: opacity 0.2s linear;
  }

  a.light:hover {
    opacity: 1;
  }

strong, strong * {
  font-weight: 500;
}

ul li {
  list-style-type: circle;
  /*line-height: 1.6rem;*/
  font-family: inherit;
}

  ul.season-grid,
  ul.season-list {
    padding-inline-start: 0;
  }

  ul.season-list li {
    display: block;
  }

  ul.season-grid li {
    display: inline-block;
    /*width: 33%;*/
    border-bottom: 15px solid #27292c;
    /*border-bottom: 15px solid #465861;*/ /* A lighter gray */
    /*border-bottom: 15px solid hsla( 201, 13%, 33%, 1 );*/
    vertical-align: bottom;
    padding: 0 1rem 0 1rem;
  }

    @media( max-width: 800px ) {
      ul.season-grid li {
        padding: 0 1rem;
        width: auto;
      }
    }

    ul.season-grid li .season-grid-item-container {
      /*background-color: hsla( 186, 9%, 45%, 1 );*/
      background-color: #16181a;
      /*background-color: #586a73;*/ /* A light gray */
      height: 20rem;
      width: 16rem;
    }

    ul.season-grid li .season-grid-item-container img {
      max-height: 20rem;
      width: auto;
      position: absolute;
      transform: translateX(-50%);
      bottom: 0;
      left: 50%;
    }

  ul.season-list li .season-list-item-container  {
      /*background-color: hsla( 186, 9%, 45%, 1 );*/
      background-color: #586a73;
      /*height: 20rem;*/
    }


  .pastille {
    position: absolute; 
    background-color: black; 
    /*color: white;*/
    color: black;
    line-height: 2.6rem; 
    height: 2.6rem; 
    width: 2.6rem; 
    border-radius: 50%;
    margin-top: -1.3rem;
    left: 50%; 
    transform: translateX( -50% ); 
    text-align: center;
    box-shadow: 0 0 0 6px white;
    z-index: 100;
  }

    .pastille:after {
      content: " ";
      position: absolute;
      background-color: transparent;
      width: 2.8rem;
      height: 2.8rem;
      left: -0.2rem;
      top:  -0.2rem;
      border: 2px dotted rgba( 50, 68, 78, 1 );
      border-radius: 50%;
    }
    
    .pastille.active {
      /*background-color: hsla( 12, 87%, 67%, 1 );*/ /* Orange */
      background-color: #ffffff;
    }

      a:hover .pastille.active {
        box-shadow: 0 0 0 6px white, 0 0 1rem 0.75rem yellow;
      }

    .pastille.inactive {
      background-color: rgba( 201, 207, 208, 1 );
      color: black;
      box-shadow: none;
    }

      a:hover .pastille.inactive {
          box-shadow: 0 0 1rem 0.5rem yellow;
        }

      .pastille.inactive:after {
        border: none;
      }


abbr {
  border-bottom: 1px dotted rgba( 0, 0, 0, 0.5 );
  text-decoration: none;
  /*background-color: rgba( 255, 255, 255, 1 );*/
}

button {
  background: 0 0;
  border: 2px solid;
  border-radius: 3px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 400;
  margin: auto;
  min-width: 6rem;
  padding: .5rem .8rem;
  outline: none;
  text-align: center;
  text-transform: uppercase;
  transition: all .2s ease;
}

  button.btn-small {
    font-size: 1.0rem;
    min-width: 4rem;
    padding: .25rem .5rem;
  }

  button.btn-xsmall {
    font-size: 0.8rem;
    min-width: 3rem;
    padding: .25rem .5rem;
  }

  button.btn-with-margin-sm {
    margin: 0.25rem;
  }

  button.green {
    border-color: #ffffff;
    color: #ffffff;
  }

    button.green:hover {
      background-color: #ffffff;
      color: rgba( 142, 182, 63, 1 );
    }

  button.green-reverse {
    background-color: rgba( 142, 182, 63, 1 );
    border-color: rgba( 142, 182, 63, 1 );
    color: #ffffff;
  }

    button.green-reverse:hover {
      background-color: #ffffff;
      color: rgba( 142, 182, 63, 1 );
    }

  button.purple {
    background-color: #ffffff;
    border-color: #6e60cc;
    color: #6e60cc;
  }

    button.purple:hover {
      background-color: #6e60cc;
      color: #ffffff;
    }

  button.black {
    background-color: #ffffff;
    border-color: #000000;
    color: #000000;
  }

  button.white-reverse {
    background-color: #ffffff;
    border-color: gray;
    color: gray;
  }

    button.white-reverse:hover {
      background-color: gray;
      color: #ffffff;
    }

  button.btn-full-width {
    width: 100%;
  }

  button.btn-label {
    border: none;
  }

    button.btn-label.btn-green,
    button.btn-label.btn-green a {
      color: white;
      background-color: hsla( 120, 81%, 41%, 1 );
    }

      button.btn-label.btn-green:hover {
        background-color: hsla( 120, 91%, 41%, 1 );
      }

    button.btn-label.btn-red,
    button.btn-label.btn-red a {
      color: white;
      /*background-color: hsla( 120, 81%, 41%, 1 );*/
      background-color: red;
    }

    button.btn-label.btn-gray,
    button.btn-label.btn-gray a {
      color: white;
      background-color: hsla( 0, 0%, 50%, 1 );
    }

      button.btn-label.btn-gray:hover {
        background-color: hsla( 0, 0%, 60%, 1 );
      }

    button.btn-label.btn-orange, 
    button.btn-label.btn-orange a {
      color: white;
      /*background-color: hsla( 120, 81%, 41%, 1 ); /* orange */
      background-color: hsla( 39, 100%, 50%, 1 ); 
    }

      button.btn-label.btn-orange:hover {
        background-color: hsla( 42, 100%, 50%, 1 );
      }

/* Beautiful table */

.beautiful-table {
  border-collapse: separate;
  border-spacing: 0;
  margin: auto;
}

  .beautiful-table.table-full-width {
    width: 100%;
  }

  .beautiful-table.valign-top td {
    vertical-align: top;
  }

  .beautiful-table thead {
    background-color: #534f9c; 
    background: radial-gradient( circle at 50% 50%, #6e60cc, #3a3769 400% );
    color: #ffffff;
    font-size: 1.25em;
    font-weight: 500;
    /*margin: 0;*/
  }

    .beautiful-table thead tr th {
      padding: 0.75rem 0.75rem;
    }

    .beautiful-table thead tr th:first-child {
      border-top-left-radius: 3px; 
    }

    .beautiful-table thead tr th:last-child {
      border-top-right-radius: 3px; 
    }

  .beautiful-table tbody {
    /*border: 1px solid #6e60cc;*/
  }

    .beautiful-table tbody tr th:first-child,
    .beautiful-table tbody tr td:first-child {
      border-left: 1px solid #6e60cc;
    }

      .beautiful-table tbody tr th.no-border:first-child,
      .beautiful-table tbody tr td.no-border:first-child {
        border-left: none;
      }

    .beautiful-table tbody tr th:last-child,
    .beautiful-table tbody tr td:last-child {
      border-right: 1px solid #6e60cc;
    }

      .beautiful-table tbody tr th.no-border:last-child,
      .beautiful-table tbody tr td.no-border:last-child {
        border-right: none;
      }

    .beautiful-table tbody tr th {
      border-top: 1px solid #6e60cc;
      font-weight: 500;
      padding: 0.5rem 0.75rem;
    }    

    .beautiful-table tbody tr:hover {
      color: #6e60cc;
    }

      .beautiful-table tbody tr.no-highlight-on-hover:hover {
        color: inherit;
      }

    .beautiful-table tbody tr td {
      padding: 0.25rem;
    }

      .beautiful-table tbody tr td:first-child {
        padding-left: 0.75rem;
      }

      .beautiful-table tbody tr td:last-child {
        padding-right: 0.75rem;
      }

      .beautiful-table tbody tr td a {
        text-decoration: none;
      }

  .beautiful-table tfoot tr th:first-child {
      border-bottom-left-radius: 3px;
    }

    .beautiful-table tfoot tr th:last-child {
      border-bottom-right-radius: 3px; 
    }

  .beautiful-table tfoot tr th {
    border-left: 1px solid #6e60cc;
    border-right: 1px solid #6e60cc;
    border-bottom: 1px solid #6e60cc;
  }

/* End of beautiful table */



/* -------------------------------------------------------------
 * Page specific styles
 * ---------------------------------------------------------- */

/* Header */
.language-selection {
  position: absolute;
  right: 0;
  top: 0;
}

/* 
 * Index
 * */

.teaser-container {
  background-color: white;
  /*height: 488px;  ratio : 1,6389 (1770 / 1080) */
  /*width: 800px;*/
  /*max-width: 800px;*/
  position: relative;
  box-shadow: 0 0 20px rgba( 255, 255, 255, 0.99 );
  padding-bottom: 58%; /* 61% but less a few percent to account for the curved border */
}

  @media( max-width: 600px ){
    .teaser-container {
      padding-bottom: 55%;
    }
  }

  /* Kudos to https://stackoverflow.com/questions/16388078/is-a-concave-border-radius-possible */
  .teaser-container:before{
    background: rgba(44, 61, 68, 1);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    border-top-left-radius: 50% 10px ;
    border-top-right-radius: 50% 10px;
    display: inline-block;
    content: '';
    box-shadow: 0 15px 20px 10px rgba( 44, 61, 68, 1 ), inset 0 10px 8px 0 rgba( 255, 255, 255, 0.35 );
    z-index: 10;
  }

  .teaser-container:after{
    background: rgba(44, 61, 68, 1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    border-bottom-left-radius: 50% 10px ;
    border-bottom-right-radius: 50% 10px;
    display: inline-block;
    content: '';
    box-shadow: 0 -15px 20px 10px rgba( 44, 61, 68, 1 ), inset 0 -10px 8px 0 rgba( 255, 255, 255, 0.35 );
  }

/* Icons to change view between list and grid */
.home-icon {
  display: inline-block;
  width: 4rem; /* = 3 * 1.68 */
  /*fill: hsla( 201, 13%, 33%, 1 );*/
  fill: #465861;
}

  .home-icon.active {
    /*fill: hsla( 186, 9%, 45%, 1 );*/
    fill: #586a73;
  }

/* 
 * Antichamber 
 * */
.watch-movie {
  text-transform: uppercase;
  color: rgba( 50, 68, 78, 1 );
}

  .watch-movie span {
    border: 1px dotted rgba( 50, 68, 78, 1 );
    border-radius: 50%;
    border-width: 2px;
    height: 2rem;
    line-height: 2rem;
    width: 2rem;
    text-align: center;
    background-color: white;
    display: inline-block;
    margin: 6px;
    box-shadow: 0 0 0 3px white;
  }

    a:hover .watch-movie span {
      border-color: red;
      box-shadow: 0 0 0 3px white, 0 0 15px 7px yellow;
    }

/* -------------------------------------------------------------
 * Containers
 * ---------------------------------------------------------- */

.wrapper {
}


/*--------------------------------------------------------------
# Columns
--------------------------------------------------------------*/

.three-columns {
  columns: 3;
}

  @media( max-width: 600px ){
    .three-columns {
      columns: 1;
    }
  }


.col-one-third {
  display: inline-block;
  margin: 0 auto;
  /*min-width: 20rem;*/
  vertical-align: top;
  width: 33.33%;
  /*outline: 1px solid salmon;*/
}

  @media( max-width: 600px ){
    .col-one-third {
      display: block;
      width: 100%;
    }
  }

.col-50-percent {
  display: inline-block;
  margin: 0 auto;
  position: relative;
  vertical-align: top;
  width: 50%;
  /*outline: 1px solid salmon;*/
}

  @media( max-width: 600px ){
    .col-50-percent {
      display: block;
      width: 100%;
    }
  }

.col-40-percent {
  display: inline-block;
  margin: 0 auto;
  width: 40%;
  /*outline: 1px solid salmon;*/
  vertical-align: middle; /* If we don’t put it here, it does not work! Damn… */
}

  @media( max-width: 600px ){
    .col-40-percent {
      display: block;
      text-align: center;
      width: 100%;
    }
  }

.col-60-percent {
  display: inline-block;
  margin: 0 auto;
  width: 60%;
  /*outline: 1px solid salmon;*/
  vertical-align: middle; /* If we don’t put it here, it does not work! Damn… */
}

  @media( max-width: 600px ){
    .col-60-percent {
      display: block;
      width: 100%;
    }
  }

.col-two-thirds {
  display: inline-block;
  margin: 0 auto;
  vertical-align: top;
  width: 66.66%;
  /*outline: 1px solid salmon;*/
}

  @media( max-width: 600px ){
    .col-two-thirds {
      display: block;
      width: 100%;
    }
  }

/*--------------------------------------------------------------
# Modifiers
--------------------------------------------------------------*/

/* Width limit */
.width-limit {
  max-width: 54rem; /* 860px / 16px (=1rem) = ~54rem */
  margin: auto;
}

.full-width {
  width: 100%;
}

/* Positions */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.stretch {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}


/* Alignments */
.center {
  text-align: center;
  margin: auto;
}

  @media( max-width: 600px ){
    .sm-center {
      text-align: center;
      margin: auto;
    }
  }

.middle {
  vertical-align: middle;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.middle-absolute {
  position: absolute;
  left: 0; 
  right: 0;
  top: 0;
  top: 50%;
  transform: translateY(-50%);
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

/* Typography */
.serif {
  font-family: 'espinosa', serif;
}

.sans-serif {
  font-family: 'Red Hat Display', sans-serif;
}

.condensed {
  font-family: 'Saira Extra Condensed', 'Franklin Gothic Medium', 'Arial Narrow', sans-serif;
}

/* Text sizes */
.text-sm {
  font-size: 0.8rem;
}

.text-md {
  font-size: 1.2rem;
}

.text-lg {
  font-size: 1.4rem;
}

.text-xl {
  font-size: 1.7rem;
}

  @media( max-width: 600px ){
    .text-xl {
      font-size: 1.5rem;
    }
  }

.text-xxl {
  font-size: 2.0rem;
}

.text-xxxl {
  font-size: 2.3rem;
}

/* Text modifiers */
.font-light {
  font-weight: 300;
}

.font-heavy {
  font-weight: 700;
}

.font-italic {
  font-style: italic;
}

.text-underline {
  text-decoration: underline;
}

.text-no-underline {
  text-decoration: none !important;
}

.font-main-color {
  color: rgba( 201, 207, 208, 1 );
} 

.font-main-color:hover {
  color: white;
} 

/* Paddings & margins */
.padding-xs {
  padding: 1rem;
}

.padding-sm {
  padding: 2rem;
}
  @media( max-width: 600px ){
    .padding-sm {
      padding: 1rem;
    }
  }

.padding-md {
  padding: 4rem;
}

.padding-lg {
  padding: 6rem;
}

.padding-bottom-sm {
  padding-bottom: 2rem;
}

.padding-bottom-md {
  padding-bottom: 4rem;
}

.padding-bottom-lg {
  padding-bottom: 6rem;
}

  @media( max-width: 600px ){
    .padding-bottom-lg {
      padding-bottom: 4rem;
    }
  }

.padding-top-sm {
  padding-top: 2rem;
}

.padding-top-md {
  padding-top: 4rem;
}

.padding-top-lg {
  padding-top: 6rem;
}

  @media( max-width: 600px ){
    .padding-top-lg {
      padding-top: 4rem;
    }
  }

.margin-auto {
  margin: auto;
}

.margin-none {
  margin: 0;
}

.margin-xxs {
  margin: 0.5rem;
}

.margin-xs {
  margin: 1rem;
}

.margin-sm {
  margin: 2rem;
}
  @media( max-width: 600px ){
    .margin-sm {
      margin: 1rem;
    }
  }

.margin-md {
  margin: 4rem;
}

.margin-lg {
  margin: 6rem;
}

.margin-bottom-none {
  margin-bottom: 0;
}

.margin-bottom-xs {
  margin-bottom: 1rem;
}

.margin-bottom-sm {
  margin-bottom: 2rem;
}

.margin-bottom-md {
  margin-bottom: 4rem;
}

  @media( max-width: 600px ){
    .margin-bottom-md {
      margin-bottom: 3rem;
    }
  }

.margin-bottom-lg {
  margin-bottom: 6rem;
}

.margin-top-none {
  margin-top: 0;
}

.margin-top-xs {
  margin-top: 1rem;
}

.margin-top-sm {
  margin-top: 2rem;
}

.margin-top-md {
  margin-top: 4rem;
}

  @media( max-width: 600px ){
    .margin-top-md {
      margin-top: 3rem;
    }
  }

.margin-top-lg {
  margin-top: 6rem;
}

.margin-left-xs {
  margin-left: 1rem;
}

.margin-left-sm {
  margin-left: 2rem;
}

.margin-left-md {
  margin-left: 4rem;
}

  @media( max-width: 600px ){
    .margin-left-md {
      margin-left: 3rem;
    }
  }

.margin-left-lg {
  margin-left: 6rem;
}

.margin-right-xs {
  margin-right: 1rem;
}

.margin-right-sm {
  margin-right: 2rem;
}

.margin-right-md {
  margin-right: 4rem;
}

  @media( max-width: 600px ){
    .margin-right-md {
      margin-right: 3rem;
    }
  }

.margin-right-lg {
  margin-right: 6rem;
}

/* Lateral margin to avoid crammed content on small screens */
.sm-lateral-margin {
  margin-left: 1rem;
  margin-right: 1rem;
}

.sm-lateral-padding {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Responsiveness */
.responsive {
  height: auto;
  max-width: 100%;
}

/* Varia */
.inline-block {
  display: inline-block; 
}

@media( max-width: 600px ){
  .sm-block {
    display: block;
  }

}

/* Prevent line breaks in elements */
.nowrap {
  white-space: nowrap;
}

.cursor-pointer:hover {
  cursor: pointer;
}


.cursor-forbidden:hover {
  cursor: not-allowed;
}

.hidden {
  display: none !important;
}

   @media( max-width: 800px ){
    .md-hidden {
      display: none;
    }
  }

.invisible {
  opacity:  0;
}

.sm-visible {
  display: none;
}

  @media( max-width: 600px ){
    .sm-visible {
      display: initial;
    }
  }

.shadow {
  text-shadow: 0 0 4px rgba( 0, 0, 0, 1 );
}

.box-shadow-sm {
  box-shadow: 0 0 1rem white;
}

.box-shadow-md {
  box-shadow: 0 0 2rem white;
}

.box-shadow-lg {
  box-shadow: 0 0 3rem white;
}

/* Lists */

ul.no-icon {
  padding: 0;
}

ul.star, ul.thumb, ul.hand, ul.tickmark, ul.fire {
  padding-inline-start: 0;
}

  ul.star li, ul.thumb li, ul.hand li, ul.tickmark li, ul.fire, ul.no-icon li {
    list-style: none; 
    margin-bottom: 5px;
  }

  ul.tickmark li {
    padding-left: 2rem;
  }

    ul.star li:before {
      /*content: "\2605  ";*/ /* star */
      content: "☆  ";
    }

    ul.hand li:before {
      content: "✌  ";
      font-size: 0.9rem;
      position: absolute;
      left: 10px;
    }

    ul.thumb li:before {
      content: "👍";
      font-size: 0.9rem;
      position: absolute;
      left: 10px;
    }

    ul.fire li:before {
      content: "🔥";
      font-size: 0.9rem;
      position: absolute;
      left: 10px;
    }

    ul.tickmark li:before {
      content: "[   ]";
      /*position: absolute;*/
      margin-right: 0.5rem;
      margin-left: -2rem;
    }

      ul.tickmark li.checked:before {
        content: "[✓]";
      }

ul.list-bubbles {
  margin: 0;
  padding: 0;
}

  ul.list-bubbles li {
    background-color: #534f9c;
    background: radial-gradient( circle at 50% 50%, #6e60cc, #3a3769 400% );
    border: 0;
    border-radius: 3px;
    color: white;
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 400;
    list-style: none;
    /*margin: auto;*/
    margin: 0.25rem;
    min-width: 7rem;
    padding: .5rem .8rem;
    outline: none;
    text-align: center;
    /*text-transform: uppercase;*/
    transition: all .15s ease;
  }

    ul.list-bubbles li:hover {
      box-shadow: 0 0 0.5rem rgba( 0, 0, 0, 0.75 );
      opacity: 0.97;
    }

/*--------------------------------------------------------------
# Clearfix (as per Nicolas Gallagher - http://nicolasgallagher.com/micro-clearfix-hack/)
--------------------------------------------------------------*/
.cf {
  height: 0;
}

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

.cf:after {
  clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
  *zoom: 1;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
.form-field-container {
  margin-top: 2rem;
  position: relative;
}

input[type=text], input[type=number], input[type=email], textarea {
  background-color: #fbfbfb;
  border: 1px solid #ddd;
  border-radius: 3px;
  color: inherit;
  font-size: 1.1rem;
  padding: .3rem .5rem;
}

input[type=submit] {
  background-color: transparent;
  border: 1px solid #6e60cc;
  border-radius: 3px;
  color: #6e60cc;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 400;
  min-width: 6rem;
  padding: .3rem .5rem;
  /*outline: none;*/
  text-align: center;
  transition: all .2s ease;
}

  input[type=submit]:disabled,
  input[type=submit]:disabled:hover,
  input[type=submit]:disabled:active,
  input[type=submit]:disabled:focus {
    background-color: gray;
    color: lightgray;
    cursor: not-allowed;
  }

  input[type=submit]:hover {
    background-color: #6e60cc;
    color: #ffffff;
  }

  input[type=submit]:active {
    background-color: #534f9c;
    color: #ffffff;
  }


  input[type=submit].reverse {
    background-color: #6e60cc;
    color: #ffffff;
  }

    input[type=submit].reverse:hover {
      background-color: #534f9c;
      color: #ffffff;
    }

    input[type=submit].reverse:active {
      color: #6e60cc;
      background-color: #ffffff;
    }

input.sm, textarea.sm {
  width: 5rem;
}

input.lg, textarea.lg {
  width: 20rem;
}

input.xl, textarea.xl {
  max-width: 100%;
  width: 30rem;
}

input.xxl, textarea.xxl {
  max-width: 100%;
  width: 40rem;
}

textarea.lg {
  height: 7rem;
}

input.error, textarea.error {
  background-color: #fff0df;
  border-color: red;
  border-width: 2px;
}


/*--------------------------------------------------------------
# Centered modal
--------------------------------------------------------------*/

/*Frosted background */
.frosted {
  -webkit-filter: blur( 3px );
  filter: blur(3px);
  display: block;
}

.modal {
}

  .black-background {
    position: fixed;
    bottom: 0px;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
    
    opacity: 0.3;
    background-color: #000;
  }

  .modal.modal-container {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
  }

  .modal .modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate( -50%, -50% );
    transform: translate( -50%, -50% );
    z-index: 1000;

    min-width: 25%;
    max-width: 90%;
    
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 3px;
  }

    @media( max-width: 600px ){

      .modal .modal-content {
        width: 80%;
      }
    }

    .modal .modal-content p {
      margin: 1rem 0;
    }

    .modal .modal-content.with-spinner {
      background-image: url( ../images/site/spinner.gif );
    }


/*--------------------------------------------------------------
# Cookies
--------------------------------------------------------------*/
  
.cookie-consent-container {
  background-color: rgba( 0, 0, 0, 0.8 );
  bottom: 0;
  color: white;
  /*line-height: 1.25rem;*/
  margin: 0 1rem 1rem 1rem;
  padding: 0.8rem;
  position: fixed;
  right: 0;
  width: 50%;
  z-index: 1000000;
}

  .cookie-consent-container h4 {
    font-size: 1.0rem;
    margin: 0 0 0.5rem 0;
  }

  .cookie-consent-container p {
    font-size: 1.0rem;
    line-height: 1.5rem;
    margin: 0 0 0.5rem 0;
  }

  .cookie-consent-container button {
    background-color: #ffffff;
    border: none; 
    border-radius: 2px;
    cursor: pointer;
    float: right;
    font-weight: bold; 
    line-height: 2.0rem;
    margin: none;
  }


/* debug */
.debug {
  outline: 1px dotted red;
}