@charset "UTF-8";
/*********************************************************



# Main SCSS Collection 






**********************************************************/
/******************************** 

Vendor / Framework :

*********************************/
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
@import '../fonts/open-sans/style.css';
@import '../fonts/open-sans-condensed/style.css';
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type=checkbox],
input[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type=search] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/******************************** 

01 Config :

*********************************/
@font-face {
  font-family: "icomoon";
  src: url("../fonts/icomoon.eot?8stfw6");
  src: url("../fonts/icomoon.eot?8stfw6#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?8stfw6") format("truetype"), url("../fonts/icomoon.woff?8stfw6") format("woff"), url("../fonts/icomoon.svg?8stfw6#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
/****************************

	# Colors

*****************************/
/****************************

	# URLs

*****************************/
/****************************

	# Font Stacks

*****************************/
/****************************

	# Images

*****************************/
/* Clearfix */
/******************************** 

Vendor:

*********************************/
/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
}
[dir=rtl] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* Slider */
.slick-loading .slick-list {
  background: #fff url("./ajax-loader.gif") center center no-repeat;
}

/* Icons */
@font-face {
  font-family: "slick";
  src: url("./fonts/slick.eot");
  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  outline: none;
  background: transparent;
  color: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}
.slick-prev:before,
.slick-next:before {
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  color: white;
  opacity: 0.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: -25px;
}
[dir=rtl] .slick-prev {
  left: auto;
  right: -25px;
}
.slick-prev:before {
  content: "←";
}
[dir=rtl] .slick-prev:before {
  content: "→";
}

.slick-next {
  right: -25px;
}
[dir=rtl] .slick-next {
  left: -25px;
  right: auto;
}
.slick-next:before {
  content: "→";
}
[dir=rtl] .slick-next:before {
  content: "←";
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 20px;
  width: 20px;
  outline: none;
  line-height: 0px;
  font-size: 0px;
  color: transparent;
  padding: 5px;
  cursor: pointer;
}
.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
  opacity: 1;
}
.slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "•";
  width: 20px;
  height: 20px;
  font-family: "slick";
  font-size: 6px;
  line-height: 20px;
  text-align: center;
  color: black;
  opacity: 0.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  color: black;
  opacity: 0.75;
}

body.hidden-scroll {
  overflow: hidden;
}

.sl-overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #fff;
  opacity: 0.7;
  display: none;
  z-index: 1035;
}

.sl-wrapper {
  z-index: 1040;
}
.sl-wrapper button {
  border: 0 none;
  background: transparent;
  font-size: 28px;
  padding: 0;
  cursor: pointer;
}
.sl-wrapper button:hover {
  opacity: 0.7;
}
.sl-wrapper .sl-close {
  display: none;
  position: fixed;
  right: 30px;
  top: 30px;
  z-index: 10060;
  margin-top: -14px;
  margin-right: -14px;
  height: 44px;
  width: 44px;
  line-height: 44px;
  font-family: Arial, Baskerville, monospace;
  color: #000;
  font-size: 3rem;
}
.sl-wrapper .sl-close:focus {
  outline: none;
}
.sl-wrapper .sl-counter {
  display: none;
  position: fixed;
  top: 30px;
  left: 30px;
  z-index: 1060;
  color: #000;
  font-size: 1rem;
}
.sl-wrapper .sl-navigation {
  width: 100%;
  display: none;
}
.sl-wrapper .sl-navigation button {
  position: fixed;
  top: 50%;
  margin-top: -22px;
  height: 44px;
  width: 22px;
  line-height: 44px;
  text-align: center;
  display: block;
  z-index: 10060;
  font-family: Arial, Baskerville, monospace;
  color: #000;
}
.sl-wrapper .sl-navigation button.sl-next {
  right: 5px;
  font-size: 2rem;
}
.sl-wrapper .sl-navigation button.sl-prev {
  left: 5px;
  font-size: 2rem;
}
.sl-wrapper .sl-navigation button:focus {
  outline: none;
}
@media (min-width: 35.5em) {
  .sl-wrapper .sl-navigation button {
    width: 44px;
  }
  .sl-wrapper .sl-navigation button.sl-next {
    right: 10px;
    font-size: 3rem;
  }
  .sl-wrapper .sl-navigation button.sl-prev {
    left: 10px;
    font-size: 3rem;
  }
}
@media (min-width: 50em) {
  .sl-wrapper .sl-navigation button {
    width: 44px;
  }
  .sl-wrapper .sl-navigation button.sl-next {
    right: 20px;
    font-size: 3rem;
  }
  .sl-wrapper .sl-navigation button.sl-prev {
    left: 20px;
    font-size: 3rem;
  }
}
.sl-wrapper .sl-image {
  position: fixed;
  -ms-touch-action: none;
  touch-action: none;
  z-index: 10000;
}
.sl-wrapper .sl-image img {
  margin: 0;
  padding: 0;
  display: block;
  border: 0 none;
  width: 100%;
  height: auto;
}
@media (min-width: 35.5em) {
  .sl-wrapper .sl-image img {
    border: 0 none;
  }
}
@media (min-width: 50em) {
  .sl-wrapper .sl-image img {
    border: 0 none;
  }
}
.sl-wrapper .sl-image iframe {
  background: #000;
  border: 0 none;
}
@media (min-width: 35.5em) {
  .sl-wrapper .sl-image iframe {
    border: 0 none;
  }
}
@media (min-width: 50em) {
  .sl-wrapper .sl-image iframe {
    border: 0 none;
  }
}
.sl-wrapper .sl-image .sl-caption {
  display: none;
  padding: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  font-size: 1rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.sl-wrapper .sl-image .sl-caption.pos-top {
  bottom: auto;
  top: 0;
}
.sl-wrapper .sl-image .sl-caption.pos-outside {
  bottom: auto;
}
.sl-wrapper .sl-image .sl-download {
  display: none;
  position: absolute;
  bottom: 5px;
  right: 5px;
  color: #000;
  z-index: 1060;
}

.sl-spinner {
  display: none;
  border: 5px solid #333;
  border-radius: 40px;
  height: 40px;
  left: 50%;
  margin: -20px 0 0 -20px;
  opacity: 0;
  position: fixed;
  top: 50%;
  width: 40px;
  z-index: 1007;
  -webkit-animation: pulsate 1s ease-out infinite;
  -moz-animation: pulsate 1s ease-out infinite;
  -ms-animation: pulsate 1s ease-out infinite;
  -o-animation: pulsate 1s ease-out infinite;
  animation: pulsate 1s ease-out infinite;
}

.sl-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

.sl-transition {
  transition: -moz-transform ease 200ms;
  transition: -ms-transform ease 200ms;
  transition: -o-transform ease 200ms;
  transition: -webkit-transform ease 200ms;
  transition: transform ease 200ms;
}

@-webkit-keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@-moz-keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@-o-keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@-ms-keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
/******************************** 

02 Logic : (Mixins)

*********************************/
/* Media Query, based on Breakpoints in variables.scss  */
/* Set a rem font size with pixel fallback */
/* Cross browser opacity */
/* Block Center */
/* Block Center */
/* Box Shadow */
/* Border-radius */
/* Gradient */
/* Layout */
/* Overlay */
/* Ornament (Strich) */
/* Circle */
/******************************** 

03 Motion  : 

*********************************/
/******************************** 

04 Base  : 

*********************************/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body,
html {
  background-color: #ffffff !important;
  font-size: 1rem;
  color: rgb(44, 47, 49);
  padding: 0;
  height: auto;
}

* {
  box-sizing: border-box;
}

.container,
#container,
.inside {
  width: 100%;
  padding-left: 1.5em;
  padding-right: 1.5em;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (min-width: 45em) {
  .container,
  #container,
  .inside {
    width: 100%;
    padding-left: 2em;
    padding-right: 2em;
    max-width: 800px;
  }
}
@media screen and (min-width: 60em) {
  .container,
  #container,
  .inside {
    padding: 0;
    max-width: 960px;
    width: 100%;
  }
}
@media screen and (min-width: 81.25em) {
  .container,
  #container,
  .inside {
    max-width: 1080px;
  }
}
.container .container,
.container #container,
.container .inside,
#container .container,
#container #container,
#container .inside,
.inside .container,
.inside #container,
.inside .inside {
  padding-left: 0;
  padding-right: 0;
}

div {
  width: 100%;
  display: block;
}

/* --------------------------------------------
   #Helper Classes 
   -------------------------------------------- */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}

.block-center {
  display: block;
  clear: both;
  margin: 0 auto;
}

.invisible {
  display: none;
}

@media screen and (max-width: 44.9375em) {
  .sc {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
  }
}

@media screen and (min-width: 45em) {
  .float_right {
    float: right;
  }
}

@media screen and (min-width: 45em) {
  .float_left {
    float: left;
  }
}

.flex-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.flex-row > h1, .flex-row > h2, .flex-row > h3, .flex-row > p {
  width: 100%;
}
@media screen and (min-width: 60em) {
  .flex-row > h1, .flex-row > h2, .flex-row > h3, .flex-row > p {
    width: 48%;
  }
}

.full-width, .full {
  width: 100% important;
  max-width: none !important;
}
.full-width img, .full-width picture, .full img, .full picture {
  width: 100% important;
  max-width: none !important;
}

.flex-grow {
  flex-grow: 1 !important;
}

.flex-shrink {
  flex-shrink: 1 !important;
}

/* --------------------------------------------
   # Fonts 
   -------------------------------------------- */
body {
  font-family: "Open Sans", sans-serif !important;
  font-weight: 400;
  color: rgb(44, 47, 49);
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7rem;
}
@media screen and (min-width: 45em) {
  body {
    font-size: 1rem;
    line-height: 1.8rem;
  }
}
@media screen and (min-width: 60em) {
  body {
    font-size: 1rem;
    line-height: 1.9rem;
  }
}
@media screen and (min-width: 81.25em) {
  body {
    font-size: 1.05rem;
    line-height: 1.95rem;
  }
}

/* --------------------------------------------
   # Headings
   -------------------------------------------- */
h1,
h2,
h3 {
  font-family: "Open Sans Condensed", sans-serif;
  font-weight: 300;
  letter-spacing: 0em;
  font-weight: 100;
  text-align: center;
  font-size: 1.6rem;
  line-height: 2rem;
  color: rgb(110, 158, 178);
}
@media screen and (min-width: 45em) {
  h1,
  h2,
  h3 {
    text-align: left;
    font-size: 2rem;
    line-height: 2.2rem;
  }
}
@media screen and (min-width: 60em) {
  h1,
  h2,
  h3 {
    text-align: left;
    font-size: 2.3rem;
    line-height: 2.6rem;
  }
}

h1 {
  color: rgb(77, 114, 130);
}

h1.first {
  color: rgb(77, 114, 130);
  margin-top: 1em;
  margin-bottom: 1em;
}
@media screen and (min-width: 60em) {
  h1.first {
    margin-top: 2em;
    margin-bottom: 2em;
  }
}

h2,
h3 {
  color: rgb(77, 114, 130);
  font-weight: 100;
  font-family: "Open Sans Condensed", sans-serif;
  text-align: left;
}
@media screen and (min-width: 45em) {
  h2,
  h3 {
    margin: 60px 0;
    max-width: 50%;
    text-align: left;
  }
}

@media screen and (min-width: 60em) {
  h2.ce_headline, h1 {
    text-align: left;
  }
}

h3 {
  text-transform: none;
  letter-spacing: 0;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  text-align: left;
  position: relative;
  letter-spacing: 0em;
  font-size: 1.1rem;
  line-height: 1.9rem;
  margin: 1em 0;
}
@media screen and (min-width: 45em) {
  h3 {
    font-size: 1.2rem;
    margin: 1.5em 0;
    text-align: left;
  }
}
@media screen and (min-width: 60em) {
  h3 {
    font-size: 1.4rem;
    text-align: left;
    margin: 2em 0 1em 0;
  }
}
h4 {
  font-family: "Open Sans", sans-serif;
  color: rgb(77, 114, 130);
  margin: 1em 0;
  font-size: 1.1rem;
  line-height: 1.6rem;
}
h4 strong {
  color: rgb(44, 47, 49);
}
@media screen and (min-width: 45em) {
  h4 {
    text-align: left;
    margin: 1.5em 0 1em 0;
  }
}
@media screen and (min-width: 45em) {
  h4 {
    margin: 2em 0 1.5em 0;
  }
}

h5 {
  font-size: 1rem;
  line-height: 1.5rem;
}
@media screen and (min-width: 45em) {
  h5 {
    text-align: left;
  }
}

h6 {
  font-size: 1rem;
  font-family: "Open Sans", sans-serif;
  margin-top: 2em;
  color: rgb(210, 150, 67);
}
@media screen and (min-width: 45em) {
  h6 {
    text-align: left;
  }
}

/* --------------------------------------------
   # Paragraphs
   -------------------------------------------- */
p {
  margin: 0;
  font-family: "Open Sans", sans-serif;
}

strong, b {
  font-weight: 600;
}

small {
  line-height: 55%;
}

.type-alter {
  font-family: "Open Sans Condensed", sans-serif !important;
  letter-spacing: 0em;
  /* border-top: 1px solid #ccc; */
}

::selection {
  background: rgb(77, 114, 130);
  /* WebKit/Blink Browsers */
  color: #ffffff;
}

::-moz-selection {
  background: rgb(77, 114, 130);
  /* Gecko Browsers */
  color: #ffffff;
}

/* --------------------------------------------
   # Accent Elements
   -------------------------------------------- */
blockquote {
  text-align: center;
  font-family: "Open Sans Condensed", sans-serif;
  font-size: 15px;
  line-height: 20px;
  position: relative;
  font-style: italic;
  width: 60%;
  margin: 30px auto;
  z-index: 100;
}
blockquote small {
  clear: both;
  display: inline-block;
}
@media (min-width: lg) {
  blockquote small {
    clear: none;
    display: inline;
  }
}
blockquote:before, blockquote:after {
  font-size: 60px;
  font-weight: 900;
  content: "_";
  display: block;
  clear: both;
  height: 20px;
  line-height: 0;
  text-align: center;
  margin-bottom: 40px;
  position: absolute;
  left: 50%;
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  content: "{";
  font-family: "Open Sans Condensed", sans-serif;
  font-weight: 100;
  position: absolute;
  font-style: normal;
  font-size: 80px;
  left: -35%;
  top: 50%;
  padding: 0px 30px;
  opacity: 0.3;
  z-index: 90;
}
blockquote:after {
  content: "}";
  right: -30%;
  left: auto;
}

.intro {
  margin: 20px 0;
}
@media screen and (min-width: 45em) {
  .intro {
    font-size: 1.8rem;
    font-weight: 100;
    margin: 2rem 0;
    line-height: 2.7rem;
  }
}
@media screen and (min-width: 60em) {
  .intro {
    font-size: 1.9rem;
    line-height: 2.9rem;
    font-weight: 100;
    margin: 3rem 0;
  }
}
.intro:after {
  font-size: 60px;
  font-weight: 900;
  content: "_";
  display: block;
  clear: both;
  height: 20px;
  line-height: 0;
  text-align: center;
  margin-bottom: 40px;
  position: absolute;
  left: 50%;
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

/* Lists */
ul {
  padding: 0;
}
ul li {
  list-style: none;
  padding: 0;
}

/*
dl {
    margin-top: 0;
    line-height: 26px;
    border: 1px solid $c-sub-light;
    border-width: 1px 0;
    padding: 15px 0;
    dt {
        font-size: 10px;
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: 5px;
        color: $c-secondary;
        @include min-mq(sm) {
            float: left;
            width: 30%;
        }
    }
    dd {
        margin: 0;
        @include min-mq(sm) {
            float: right;
            width: 70%;
        }
    }
    dd:after {
        display: block;
    }
    code {
        font-size: 13px;
    }
}

*/
/******************************** 

05 Sections  : 

*********************************/
#header {
  background: rgb(77, 114, 130);
  min-height: 100px;
  display: flex;
}
#header .inside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-width: 37.5em) {
  #header {
    min-height: 120px;
  }
}
@media screen and (min-width: 45em) {
  #header {
    min-height: 160px;
  }
}
@media screen and (min-width: 60em) {
  #header {
    min-height: 190px;
  }
}
@media screen and (min-width: 81.25em) {
  #header {
    min-height: 210px;
  }
}
#header .sticky-container {
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  border-top: 7px solid rgb(210, 150, 67);
  display: flex;
}

@media screen and (min-width: 45em) {
  #header.sticky .sticky-container {
    width: 100%;
    position: fixed;
    left: 0;
    -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    opacity: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    background: rgb(77, 114, 130);
    z-index: 1000;
  }
}
#header.sticky .sticky-container.go {
  opacity: 1;
}
@media screen and (min-width: 45em) {
  #header.sticky #logo {
    margin: 0;
    display: none;
  }
}
@media screen and (min-width: 60em) {
  #header.sticky #logo {
    margin: 0;
    display: block;
  }
}
@media screen and (min-width: 45em) {
  #header.sticky #logo .mark {
    max-width: 30px;
  }
}
#header.sticky #logo h4 {
  display: none;
}

#logo {
  font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 auto;
}
#logo a {
  display: flex;
  align-items: center;
}
#logo i {
  color: rgb(210, 150, 67);
  font-weight: 400;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 31.25em) {
  #logo {
    width: 260px;
  }
}
@media screen and (min-width: 60em) {
  #logo {
    margin-left: 0;
    margin-top: 30px;
    margin-bottom: 30px;
    width: 30%;
    font-size: 0.8rem;
    line-height: 1.5rem;
  }
}
@media screen and (min-width: 81.25em) {
  #logo {
    width: 25%;
  }
}
#logo .mark {
  max-width: 50px;
  margin-right: 20px;
}
#logo h4 {
  color: #ffffff;
}
#logo svg {
  width: 100%;
  fill: #ffffff;
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
#logo .animated {
  animation-delay: 1s;
}
#logo a {
  color: rgb(7.8064516129, 8.3387096774, 8.6935483871);
}

#topstage {
  margin-bottom: 1em;
  overflow: hidden;
  position: relative;
}
@media screen and (min-width: 60em) {
  #topstage {
    margin-bottom: 3em;
  }
}

.signet35 {
  max-width: 120px;
  width: 100%;
  height: auto;
  margin: 10px auto;
  padding: 0;
}
@media screen and (min-width: 60em) {
  .signet35 {
    background-color: transparent;
  }
}
@media screen and (min-width: 100em) {
  .signet35 {
    position: absolute;
    right: 0;
    margin: 0;
    top: 50px;
    max-width: 120px;
    padding: 2px 5px;
    background-color: #ffffff;
  }
}

/* --------------------------------------------
   #Global Layout 
   -------------------------------------------- */
#main {
  width: 100%;
}
@media screen and (min-width: 45em) {
  #main {
    flex-basis: 68%;
    flex-grow: 1;
  }
}
@media screen and (min-width: 60em) {
  #main {
    flex-basis: 68%;
    flex-grow: 1;
  }
}

@media screen and (min-width: 45em) {
  #left {
    padding-top: 4em;
    flex-basis: 28%;
    flex-shrink: 1;
  }
}
@media screen and (min-width: 60em) {
  #left {
    font-size: 0.9rem;
    flex-basis: 25%;
    flex-shrink: 1;
    padding-right: 4%;
    margin-right: 4%;
    border-right: 1px solid rgb(223, 228, 230);
  }
}

@media screen and (min-width: 45em) {
  #right {
    padding-top: 4em;
    flex-basis: 28%;
    flex-shrink: 1;
  }
}
@media screen and (min-width: 60em) {
  #right {
    font-size: 0.9rem;
    flex-basis: 25%;
    flex-shrink: 1;
    padding-left: 4%;
    margin-left: 4%;
    border-left: 1px solid rgb(223, 228, 230);
  }
}

#footer {
  font-size: 0.8em;
  background-color: rgb(240.1789473684, 242.4947368421, 243.4210526316);
  margin-top: 3em;
}
@media screen and (min-width: 60em) {
  #footer {
    margin-top: 3em;
    padding-top: 4em;
    padding-bottom: 4em;
  }
}

#footer .inside {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}

#footer .ce_text {
  width: 100%;
}
@media screen and (min-width: 43.75em) {
  #footer .ce_text {
    width: 60%;
  }
}
@media screen and (min-width: 60em) {
  #footer .ce_text {
    width: 65%;
  }
}
@media screen and (min-width: 81.25em) {
  #footer .ce_text {
    width: 65%;
  }
}

#footer h4 {
  color: rgb(210, 150, 67);
}
@media screen and (min-width: 60em) {
  #footer h4 {
    margin-top: 0;
  }
}

#footer nav {
  width: 100%;
}
@media screen and (min-width: 43.75em) {
  #footer nav {
    width: 40%;
  }
}
@media screen and (min-width: 60em) {
  #footer nav {
    width: 31%;
  }
}
@media screen and (min-width: 81.25em) {
  #footer nav {
    width: 31%;
  }
}

/******************************** 

06 Components  : 

*********************************/
.loading-layer,
.loading-bar {
  display: none;
}

.loading-layer {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: white;
  position: fixed;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  background-repeat: no-repeat;
  background-position: center center;
  box-shadow: none;
  transition: all 1s ease-in 0.5s;
  -moz-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
.loading-layer.out {
  transition: all 0.5s cubic-bezier(0.36, 0, 0.69, 0.37) 1s;
  opacity: 0;
  visibility: hidden;
}
.loading-layer.in {
  transition: all 1s ease-in 1s;
  -moz-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  display: block;
  opacity: 1;
}

.soccas-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.soccas-loader svg {
  width: 50px;
  height: 50px;
  -webkit-animation: pulse 1s linear infinite;
  -moz-animation: pulse 1s linear infinite;
  -ms-animation: pulse 1s linear infinite;
  -o-animation: pulse 1s linear infinite;
  animation: pulse 1s linear infinite;
  transform-origin: 50% 50%;
  overflow: visible;
}
.soccas-loader svg #form1 {
  display: none;
}

.loader {
  font-size: 10px;
  border-top: 1px solid rgba(44, 47, 49, 0.2);
  border-right: 1px solid rgba(44, 47, 49, 0.2);
  border-bottom: 1px solid rgba(44, 47, 49, 0.2);
  border-left: 1px solid rgb(44, 47, 49);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

.loader,
.loader:after {
  border-radius: 50%;
  width: 30px;
  height: 30px;
}

[class^=icon-], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  margin-right: 10px;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-shopping-cart:before {
  content: "\e910";
}

.icon-eye:before {
  content: "\e000";
}

.icon-mail:before {
  content: "\e002";
}

.icon-bell:before {
  content: "\e006";
}

.icon-ribbon:before {
  content: "\e009";
}

.icon-image:before {
  content: "\e010";
}

.icon-heart:before {
  content: "\e024";
}

.icon-search:before {
  content: "\e036";
}

.icon-zoom-in:before {
  content: "\e037";
}

.icon-zoom-out:before {
  content: "\e038";
}

.icon-head:before {
  content: "\e074";
}

.icon-speech-bubble:before {
  content: "\e076";
}

.icon-tag:before {
  content: "\e085";
}

.icon-star:before {
  content: "\e093";
}

.icon-arrow-left:before {
  content: "\e094";
}

.icon-arrow-right:before {
  content: "\e095";
}

.icon-arrow-up:before {
  content: "\e096";
}

.icon-arrow-down:before {
  content: "\e097";
}

.icon-bag:before {
  content: "\e106";
}

.icon-ban:before {
  content: "\e107";
}

.icon-expand:before {
  content: "\e110";
}

.icon-contract:before {
  content: "\e111";
}

.icon-plus:before {
  content: "\e114";
}

.icon-minus:before {
  content: "\e115";
}

.icon-check:before {
  content: "\e116";
}

.icon-cross:before {
  content: "\e117";
}

.icon-menu:before {
  content: "\e120";
}

.icon-inbox:before {
  content: "\e122";
}

.icon-outbox:before {
  content: "\e123";
}

.icon-file:before {
  content: "\e124";
}

.icon-ellipsis:before {
  content: "\e129";
}

.icon-cart:before {
  content: "\e900";
}

.icon-chevron-thin-up:before {
  content: "\e902";
}

.icon-chevron-thin-right:before {
  content: "\e903";
}

.icon-chevron-thin-left:before {
  content: "\e904";
}

.icon-chevron-thin-down:before {
  content: "\e905";
}

.icon-chevron-small-up:before {
  content: "\e906";
}

.icon-chevron-small-right:before {
  content: "\e907";
}

.icon-chevron-small-left:before {
  content: "\e908";
}

.icon-chevron-small-down:before {
  content: "\e909";
}

.icon-chevron-right:before {
  content: "\e90a";
}

.icon-chevron-left:before {
  content: "\e90b";
}

.icon-chevron-down:before {
  content: "\e90c";
}

.icon-chevron-up:before {
  content: "\e90d";
}

.icon-home:before {
  content: "\e901";
}

.icon-facebook:before {
  content: "\ea90";
}

.icon-instagram:before {
  content: "\ea92";
}

.icon-twitter:before {
  content: "\ea96";
}

.icon-pinterest2:before {
  content: "\ead2";
}

.icon-amazon:before {
  content: "\ea87";
}

.icon-youtube:before {
  content: "\e90f";
}

[class*=fa-] {
  margin-right: 10px;
}

.iconshape,
.iconlink,
.round-icon {
  height: 32px;
  width: 32px;
  border-radius: 32px;
  font-family: "icomoon";
  display: block;
  font-size: 12px;
  text-align: center;
  line-height: 32px;
  background-color: #ffffff;
  color: #ffffff;
  cursor: pointer;
  content: "\f054";
  border: 1px solid rgb(44, 47, 49);
  display: inline-block;
}
.iconshape span,
.iconlink span,
.round-icon span {
  line-height: 30px;
}

.square-icon {
  height: 50px;
  width: 50px;
  border-radius: 50px;
  font-family: "icomoon";
  display: block;
  font-size: 25px;
  text-align: center;
  line-height: 50px;
  background-color: #ffffff;
  color: rgb(210, 150, 67);
  cursor: pointer;
  content: "\f054";
  position: relative;
  animation-delay: 1s;
  overflow: hidden;
  margin: 10px;
  vertical-align: middle;
  border-radius: 0;
  display: inline-block;
}
@media screen and (min-width: 60em) {
  .square-icon {
    height: 80px;
    width: 80px;
    border-radius: 80px;
    font-family: "icomoon";
    display: block;
    font-size: 40px;
    text-align: center;
    line-height: 80px;
    background-color: #ffffff;
    color: rgb(210, 150, 67);
    cursor: pointer;
    content: "\f054";
    border-radius: 0;
    display: inline-block;
  }
}

.open-icon {
  height: 50px;
  width: 50px;
  border-radius: 50px;
  font-family: "icomoon";
  display: block;
  font-size: 25px;
  text-align: center;
  line-height: 50px;
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  content: "\f054";
  position: relative;
  animation-delay: 1s;
  overflow: hidden;
  margin: 10px;
  vertical-align: middle;
  border-radius: 0;
  display: inline-block;
}
@media screen and (min-width: 60em) {
  .open-icon {
    height: 80px;
    width: 80px;
    border-radius: 80px;
    font-family: "icomoon";
    display: block;
    font-size: 40px;
    text-align: center;
    line-height: 80px;
    background-color: transparent;
    color: #ffffff;
    cursor: pointer;
    content: "\f054";
    border-radius: 0;
    display: inline-block;
  }
}

.iconshape,
.iconlink {
  height: 40px;
  width: 40px;
  border-radius: 40px;
  font-family: "icomoon";
  display: block;
  font-size: 23px;
  text-align: center;
  line-height: 40px;
  background-color: rgb(223, 228, 230);
  color: #ffffff;
  cursor: pointer;
  content: "\f054";
  float: left;
  margin-right: 10px;
}
.iconshape:hover,
.iconlink:hover {
  color: rgb(223, 228, 230);
}

.small-icon {
  width: 16px;
  height: 16px;
}

a {
  color: rgb(56, 81, 92);
  outline: none;
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  text-decoration: none;
  font-weight: 600;
}
a:link, a:visited {
  text-decoration: none;
  outline: none;
  color: rgb(56, 81, 92);
}
a:hover, a:active {
  text-decoration: none;
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  outline: none;
  color: rgb(210, 150, 67);
}
a.active {
  text-decoration: none;
  outline: none;
}
a:focus {
  color: rgb(110, 158, 178);
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  outline: none;
}

a[title*=more]:before {
  font-family: "icomoon";
  content: "\e095";
  font-size: 10px;
  margin-right: 10px;
}

.more,
.back {
  font-size: 0.8rem;
  background: rgb(210, 150, 67);
  color: #ffffff !important;
  padding: 0.2em 0.5em;
  display: inline-block;
}
@media screen and (min-width: 45em) {
  .more,
  .back {
    font-size: 0.9rem;
    padding: 0.2em 0.5em;
  }
}
.more:hover,
.back:hover {
  background: rgb(247, 184, 99);
}
.more a,
.back a {
  color: #ffffff;
}

ul {
  padding: 0;
  margin: 0 !important;
}
ul li {
  list-style: none;
}

#main ul li {
  position: relative;
  display: block;
  font-weight: 400;
  padding-left: 30px;
}
#main ul li:before {
  font-family: "icomoon";
  content: "\e903";
  color: rgb(210, 150, 67);
  margin-right: 20px;
  position: absolute;
  left: 0px;
}

.checklist ul,
.marklist ul {
  margin: 10px 0;
  padding: 0;
  display: block;
}
@media screen and (min-width: 45em) {
  .checklist ul,
  .marklist ul {
    margin: 0px 0;
  }
}
@media screen and (min-width: 60em) {
  .checklist ul,
  .marklist ul {
    margin: 0px 0;
  }
}
.checklist li,
.marklist li {
  font-size: 1.1em;
  margin: 10px 0;
  font-weight: 100;
  position: relative;
  background-color: #ffffff;
  color: rgb(7.8064516129, 8.3387096774, 8.6935483871);
  text-align: left;
  padding: 7px;
  vertical-align: middle;
}
.checklist li span,
.marklist li span {
  padding: 4px;
  display: inline-block;
  background-color: rgb(210, 150, 67);
  height: 100%;
  width: 40px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.8em;
  font-family: "icomoon";
  content: "\e116";
  font-style: normal;
  margin: 0;
  left: 0;
  top: 0;
  position: absolute;
  vertical-align: middle;
  color: #ffffff;
}
@media screen and (min-width: 45em) {
  .checklist li span,
  .marklist li span {
    width: 60px;
  }
}
@media screen and (min-width: 60em) {
  .checklist li span,
  .marklist li span {
    font-size: 1.3em;
  }
}
.checklist li small,
.marklist li small {
  font-size: 0.75em;
  display: block;
}

.marklist li:before {
  content: "\f138";
}

.nav-toggle {
  text-align: center;
  font-family: "icomoon" !important;
  display: block;
  z-index: 200;
  cursor: pointer;
  color: #ffffff !important;
  background: rgb(210, 150, 67);
  width: 60px;
  height: 60px;
  padding: 0;
  position: fixed;
  z-index: 10000;
  display: block;
  border: 0;
  line-height: 65px;
  right: 0;
  top: 0px;
}
.nav-toggle:hover, .nav-toggle:focus, .nav-toggle:active {
  color: rgb(77, 114, 130);
}
.nav-toggle:before, .nav-toggle:after {
  background: transparent;
  position: static;
  font-size: 22px;
  width: auto;
  height: auto;
  left: 0;
  top: 0;
}
.nav-toggle:before {
  content: "\e120";
}
.nav-toggle span {
  display: none;
}
@media screen and (min-width: 45em) {
  .nav-toggle {
    display: none;
  }
}

.dropdown-toggle {
  position: absolute;
  right: 0;
  top: 0;
  height: 60px;
  width: 50px;
  display: flex;
  font-size: 30px;
  font-weight: 600;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  background: rgb(223, 228, 230);
  border-bottom: 1px solid rgb(110, 158, 178);
}
.dropdown-toggle:after {
  content: "+";
}
.dropdown-toggle.is-toggled:after {
  content: "-";
}
@media screen and (min-width: 45em) {
  .dropdown-toggle {
    display: none;
  }
}

/* --------------------------------------------
   #Nav 
   -------------------------------------------- */
.main-navigation {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 100vw;
  background: rgb(56, 81, 92);
  z-index: 100;
  padding: 0em;
  overflow-y: scroll;
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
@media screen and (min-width: 45em) {
  .main-navigation {
    position: static;
    overflow: visible;
    width: 100%;
    height: auto;
    top: auto;
    left: auto;
    background-color: transparent;
    margin-bottom: 2em;
  }
}
@media screen and (min-width: 60em) {
  .main-navigation {
    width: 69%;
    margin-bottom: 0em;
  }
}
@media screen and (min-width: 81.25em) {
  .main-navigation {
    margin-bottom: 0;
    width: 68%;
  }
}
.main-navigation.main-navigation.opened {
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  left: 0;
}

.main-navigation ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0;
}
@media screen and (min-width: 45em) {
  .main-navigation ul {
    flex-wrap: no-wrap;
    margin-bottom: 2em;
  }
}
@media screen and (min-width: 81.25em) {
  .main-navigation ul {
    flex-wrap: no-wrap;
    margin-bottom: 0em;
  }
}
.main-navigation ul li {
  position: relative;
  display: block;
  width: 100%;
}
@media screen and (min-width: 45em) {
  .main-navigation ul li {
    width: auto;
  }
}
.main-navigation ul li > a,
.main-navigation ul li > strong {
  display: block;
  font-family: "Open Sans Condensed", sans-serif;
  color: #ffffff;
  border-bottom: 1px solid rgb(110, 158, 178);
  padding: 0.2em 0.8em;
  font-size: 1.1rem;
  font-weight: 600;
  height: 60px;
  display: flex;
  align-items: center;
}
@media screen and (min-width: 45em) {
  .main-navigation ul li > a,
  .main-navigation ul li > strong {
    justify-content: center;
    height: auto;
    font-size: 1.1rem;
    width: auto;
    border-bottom: 1px solid rgb(77, 114, 130);
    background: transparent;
    color: #ffffff;
    padding-left: 0.6em;
    padding-right: 0.6em;
    border-radius: 1px;
  }
}
@media screen and (min-width: 60em) {
  .main-navigation ul li > a,
  .main-navigation ul li > strong {
    padding-left: 0.4em;
    padding-right: 0.4em;
    text-align: left;
  }
}
@media screen and (min-width: 81.25em) {
  .main-navigation ul li > a,
  .main-navigation ul li > strong {
    font-size: 1.2rem;
    padding-left: 0.5em;
    padding-right: 0.5em;
    text-align: left;
  }
}
@media screen and (min-width: 45em) {
  .main-navigation ul li a.home {
    width: 30px;
  }
}
.main-navigation ul li a.home > span {
  display: none;
}
.main-navigation ul li a.home:before {
  font-family: "icomoon";
  content: "\e901";
  font-size: 14px;
}
@media screen and (min-width: 45em) {
  .main-navigation ul li a.home {
    display: none;
  }
}
@media screen and (min-width: 45em) {
  .main-navigation ul li a.facebook {
    width: 30px;
  }
}
.main-navigation ul li a.facebook > span {
  display: none;
}
.main-navigation ul li a.facebook:before {
  font-family: "icomoon";
  content: "\ea90";
  font-size: 14px;
}
@media screen and (min-width: 45em) {
  .main-navigation ul li:hover > a {
    background-color: rgb(240.1789473684, 242.4947368421, 243.4210526316);
    color: rgb(56, 81, 92);
    border-bottom: 1px solid rgb(210, 150, 67);
  }
}
.main-navigation ul li.active > a,
.main-navigation ul li.trail > a {
  color: rgb(210, 150, 67);
  border-bottom: 1px solid rgb(210, 150, 67);
}
@media screen and (min-width: 45em) {
  .main-navigation ul li.submenu > a:after {
    font-family: "icomoon";
    content: "\e905";
    margin-left: 1em;
    font-size: 11px;
  }
}

/* --------------------------------------------
   #Nav Submenu
   -------------------------------------------- */
@media screen and (min-width: 45em) {
  .main-navigation li.submenu {
    height: auto;
  }
}
.main-navigation li.submenu ul {
  height: 0;
  overflow: hidden;
  display: block;
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
@media screen and (min-width: 45em) {
  .main-navigation li.submenu ul {
    position: absolute;
    width: 300px;
    background: #ffffff;
    box-shadow: 0px 8px 25px rgba(56, 81, 92, 0.2);
    opacity: 0;
    transform: translateX(-8px);
  }
}
@media screen and (min-width: 45em) {
  .main-navigation li.submenu ul > li {
    width: 100%;
    background: transparent;
    padding: 0;
    border-bottom: 1px solid rgb(240.1789473684, 242.4947368421, 243.4210526316);
  }
}
.main-navigation li.submenu ul > li > a,
.main-navigation li.submenu ul > li > strong {
  background-color: rgb(56, 81, 92);
  padding-left: 3em;
  font-weight: 400;
}
@media screen and (min-width: 45em) {
  .main-navigation li.submenu ul > li > a,
  .main-navigation li.submenu ul > li > strong {
    width: 100%;
    font-size: 1rem;
    line-height: 1.5rem;
    background: transparent;
    font-family: "Open Sans", sans-serif;
    border: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: rgb(77, 114, 130);
    padding: 0.9em 1em;
    text-align: left;
  }
}
.main-navigation li.submenu ul > li > a:before,
.main-navigation li.submenu ul > li > strong:before {
  font-family: "icomoon";
  content: "\e095";
  font-size: 10px;
  margin-right: 10px;
}
@media screen and (min-width: 45em) {
  .main-navigation li.submenu ul > li.active > a,
  .main-navigation li.submenu ul > li.active > strong,
  .main-navigation li.submenu ul > li.trail > a,
  .main-navigation li.submenu ul > li.trail > strong {
    background-color: transparent;
    color: rgb(77, 114, 130);
  }
}
.main-navigation li.submenu ul > li:hover > a,
.main-navigation li.submenu ul > li:hover > strong {
  background-color: rgb(223, 228, 230);
  color: rgb(56, 81, 92);
}

/* --------------------------------------------
   #Nav Subsubmenu
   -------------------------------------------- */
@media screen and (min-width: 45em) {
  .main-navigation li.submenu > ul li.submenu ul.level_3 {
    position: absolute;
    width: 250px;
    left: 300px;
    top: 0;
  }
}
.main-navigation li.submenu > ul li.submenu ul.level_3 > li > a,
.main-navigation li.submenu > ul li.submenu ul.level_3 > li > strong {
  padding-left: 5em;
}
@media screen and (min-width: 45em) {
  .main-navigation li.submenu > ul li.submenu ul.level_3 > li > a,
  .main-navigation li.submenu > ul li.submenu ul.level_3 > li > strong {
    padding-left: 1em;
  }
}

/* --------------------------------------------
#Nav Toglle / Dropdown Interactions
-------------------------------------------- */
.main-navigation li.submenu.is-open > ul {
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
@media screen and (max-width: 44.9375em) {
  .main-navigation li.submenu.is-open > ul {
    height: auto;
    overflow: visible;
    opacity: 1;
    transform: translateX(0);
  }
}
.main-navigation li.submenu:hover > ul {
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
@media screen and (min-width: 45em) {
  .main-navigation li.submenu:hover > ul {
    height: auto;
    overflow: visible;
    opacity: 1;
    transform: translateX(0);
  }
}

/* --------------------------------------------
#Nav Submenu 3rd Level
-------------------------------------------- */
/* Pagination */
.pagination {
  clear: both;
  float: right;
  margin-bottom: 40px;
  width: auto;
}
.pagination p {
  float: left;
  font-size: 0.8em;
  padding: 3px 5px 3px 10px;
}
.pagination ul {
  float: left;
  margin-bottom: 20px;
}
.pagination ul li {
  background: none repeat scroll 0 0 rgb(223, 228, 230);
  float: left;
  margin-right: 2px;
  padding: 0;
  width: auto;
}
.pagination ul li a,
.pagination ul li span {
  font-size: 11px;
  font-weight: normal;
  padding: 3px 8px;
  width: auto;
}

.section.mod_navigation ul li {
  border-bottom: 1px solid rgb(240.1789473684, 242.4947368421, 243.4210526316);
}
@media screen and (min-width: 45em) {
  .section.mod_navigation ul li > a,
  .section.mod_navigation ul li > strong {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.9rem;
    line-height: 1.5rem;
    padding: 0.5em 0.2em;
  }
}
@media screen and (min-width: 45em) {
  .section.mod_navigation ul li > a,
  .section.mod_navigation ul li > strong {
    font-size: 1rem;
    line-height: 1.6rem;
  }
}
@media screen and (min-width: 45em) {
  .section.mod_navigation ul li > a:before,
  .section.mod_navigation ul li > strong:before {
    font-family: "icomoon";
    content: "\e095";
    font-size: 10px;
    margin-right: 10px;
    color: rgb(110, 158, 178);
  }
}

.home .mod_breadcrumb {
  display: none;
}

#main .mod_breadcrumb {
  width: 100%;
  display: none;
}
@media screen and (min-width: 45em) {
  #main .mod_breadcrumb {
    display: block;
  }
}
#main .mod_breadcrumb ul {
  display: flex;
  align-items: top;
}
#main .mod_breadcrumb ul li {
  display: flex;
  font-size: 0.9rem;
  color: rgb(44, 47, 49);
  padding-left: 0;
  position: relative;
}
#main .mod_breadcrumb ul li:before {
  font-family: "icomoon";
  margin-left: 5px;
  margin-right: 5px;
  content: "\e903";
  position: relative;
}
#main .mod_breadcrumb ul a {
  display: inline-block;
}
#main .mod_breadcrumb ul li:first-of-type {
  overflow: hidden;
}
#main .mod_breadcrumb ul li:first-of-type:before {
  display: none;
}
#main .mod_breadcrumb ul li:first-of-type span {
  display: none;
}
#main .mod_breadcrumb ul li:first-of-type a:before {
  font-family: "icomoon";
  content: "\e901";
  font-size: 12px;
  margin-right: 10px;
}

button:focus {
  color: #ffffff;
}

.btn, button {
  font-family: "Open Sans", sans-serif;
  font-size: 1em;
  padding: 5px 10px;
  border-color: rgb(44, 47, 49);
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  border-radius: 0px;
  color: #ffffff;
  background-color: rgb(210, 150, 67);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.btn [class*=fa-], button [class*=fa-] {
  font-size: 12px;
}
.btn:hover, .btn:focus, button:hover, button:focus {
  color: rgb(223, 228, 230);
  background-color: rgb(182.3519313305, 124.1545064378, 43.6480686695);
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  outline: none;
}
.btn svg, button svg {
  max-height: 20px;
  max-width: 20px;
  margin-right: 10px;
  width: auto;
  fill: #ffffff;
}

.drop-btn {
  padding: 1.5rem 2.25rem;
  border: 1px solid rgb(223, 228, 230);
  color: #ffffff;
  background-color: rgb(77, 114, 130);
  text-align: center;
  display: block;
  font-size: 1.2rem;
  margin: 50px auto 70px auto;
}
.drop-btn a:link, .drop-btn a:visited {
  color: #ffffff;
}
.drop-btn a:link:before, .drop-btn a:visited:before {
  font-family: "icomoon";
  content: "\e095";
  color: rgb(210, 150, 67);
  margin-right: 20px;
}

#up {
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  left: auto;
  position: fixed;
  top: auto;
  font-family: "icomoon";
  height: 60px;
  width: 60px;
  border-radius: 60px;
  font-family: "icomoon";
  display: block;
  font-size: 15px;
  text-align: center;
  line-height: 60px;
  background-color: rgba(240.1789473684, 242.4947368421, 243.4210526316, 0.7);
  color: rgb(77, 114, 130);
  cursor: pointer;
  content: "\f054";
  right: 0em;
  bottom: 0em;
}
@media screen and (min-width: 45em) {
  #up {
    height: 50px;
    width: 50px;
    border-radius: 50px;
    font-family: "icomoon";
    display: block;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    background-color: rgba(240.1789473684, 242.4947368421, 243.4210526316, 0.7);
    color: rgb(77, 114, 130);
    cursor: pointer;
    content: "\f054";
    right: 0.5em;
    bottom: 0.5em;
  }
}
@media screen and (min-width: 60em) {
  #up {
    height: 60px;
    width: 60px;
    border-radius: 60px;
    font-family: "icomoon";
    display: block;
    font-size: 20px;
    text-align: center;
    line-height: 60px;
    background-color: rgba(240.1789473684, 242.4947368421, 243.4210526316, 0.7);
    color: rgb(77, 114, 130);
    cursor: pointer;
    content: "\f054";
    right: 2em;
    bottom: 2em;
  }
}
#up {
  border-radius: 0;
  opacity: 0;
  visibility: hidden;
}
#up:before {
  content: "\e902";
}
#up.in {
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.acc-head {
  border: 1px solid rgb(223, 228, 230);
  color: #2a313a;
  cursor: pointer;
  font-weight: 700;
  padding: 1.5rem;
  width: 100%;
  display: block;
  display: flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.acc-head:hover, .acc-head.active {
  background: rgb(240.1789473684, 242.4947368421, 243.4210526316);
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.acc-content {
  height: 0;
  overflow: hidden;
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  background: rgb(240.1789473684, 242.4947368421, 243.4210526316);
  padding: 0 1em;
  margin: 0;
}

.acc-content.open {
  height: auto;
  background: rgb(240.1789473684, 242.4947368421, 243.4210526316);
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  padding: 1em;
}

.acc-head::before {
  content: "+";
  display: inline-block;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: rgb(77, 114, 130);
  color: #ffffff;
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
@media screen and (min-width: 60em) {
  .acc-head::before {
    margin-right: 2rem;
  }
}

.active.acc-head::before {
  background-color: rgb(210, 150, 67);
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  content: "-";
}

.acc-head .image_container, .acc-head img {
  width: 70px;
  float: right;
  padding: 0 1em;
  margin-right: 1em;
  border-right: 1px solid rgb(223, 228, 230);
}
@media screen and (min-width: 45em) {
  .acc-head .image_container, .acc-head img {
    width: 90px;
  }
}
@media screen and (min-width: 60em) {
  .acc-head .image_container, .acc-head img {
    width: 120px;
  }
}

/*

<div class="accordion">
	<div class="acc-head">Et quasi architecto</div>
	<div class="accordion-content">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</div>


	*/
/* --------------------------------------------
  #Posts (News, Events, etc) 
  -------------------------------------------- */
.item {
  border-bottom: 1px solid rgb(223, 228, 230);
  padding: 0em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  background: rgb(240.1789473684, 242.4947368421, 243.4210526316);
  border: 4px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(56, 81, 92, 0.26);
  margin-bottom: 10px;
  position: relative;
  /*&:before {
      content: "";
      position: absolute;
      z-index: -1;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      border: 5px solid $c-light;
  }*/
}
@media screen and (min-width: 45em) {
  .item {
    padding: 0em;
    border: 7px solid #ffffff;
    margin-bottom: 15px;
  }
}
@media screen and (min-width: 81.25em) {
  .item {
    padding: 0em;
  }
}
.item > h1,
.item > h2,
.item > h3 {
  margin-top: 0;
  margin-bottom: 0;
}

.item .ce_text {
  width: 100%;
  flex-grow: 1;
}
@media screen and (min-width: 45em) {
  .item .ce_text {
    margin-top: 1em;
    margin-bottom: 1em;
    width: 60%;
  }
}
@media screen and (min-width: 60em) {
  .item .ce_text {
    margin-top: 1em;
    margin-bottom: 1em;
    width: 70%;
  }
}
.item .image_container {
  overflow: hidden;
}
@media screen and (min-width: 60em) {
  .item .image_container {
    max-width: 25%;
    margin-right: 5%;
  }
}

.item.overview {
  padding: 0.5em;
}
@media screen and (min-width: 45em) {
  .item.overview {
    padding: 1em;
  }
}
@media screen and (min-width: 81.25em) {
  .item.overview {
    padding: 1.5em;
  }
}

.item.full {
  padding: 0.5em;
  justify-content: flex-start;
}
@media screen and (min-width: 45em) {
  .item.full {
    padding: 1.5em;
  }
}
@media screen and (min-width: 81.25em) {
  .item.full {
    padding: 2.5em;
  }
}
.item.full .ce_text {
  width: 100%;
  flex-grow: 1;
}
.item.full .image_container {
  overflow: hidden;
}
@media screen and (min-width: 60em) {
  .item.full .image_container {
    max-width: none;
  }
}

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  margin-top: 0.5em;
}
@media screen and (min-width: 81.25em) {
  .meta {
    flex-wrap: nowrap;
    margin-top: 1.5em;
  }
}

.logo-content {
  display: flex;
  margin-bottom: 30px;
  padding-bottom: 30px;
  align-items: center;
  border-bottom: 1px solid rgb(223, 228, 230);
}
.logo-content figure {
  width: 15%;
  margin-right: 10px;
}
@media screen and (min-width: 45em) {
  .logo-content figure {
    width: 8%;
    margin-right: 20px;
  }
}
@media screen and (min-width: 60em) {
  .logo-content figure {
    width: 10%;
    margin-right: 30px;
  }
}

.info {
  color: #ffffff;
  background: rgb(210, 150, 67);
  display: inline-block;
  padding: 0.2em 1em 0.2em 1em;
  font-weight: 300;
}

.news {
  background: #ffffff;
  padding: 0.5em;
}
@media screen and (min-width: 45em) {
  .news {
    padding: 0.6em;
  }
}
@media screen and (min-width: 81.25em) {
  .news {
    padding: 0.8em;
  }
}

.news .time, .news .info {
  background-color: rgb(223, 228, 230);
  color: rgb(77, 114, 130);
  border-radius: 0;
}

.news.full .time, .news.full .info {
  margin-right: 1em;
  margin-bottom: 2em;
}

.teaser {
  font-size: 0.9rem;
  line-height: 1.5rem;
  margin-bottom: 1em;
}

.flex-row .mod_newslist {
  width: 100%;
  /*@include breakpoint(medium up) {

      width:48%;
  }


  @include breakpoint(large up) {

      width:48%;
  }*/
}

.time, .info {
  display: inline;
  background: rgb(77, 114, 130);
  color: #ffffff;
  padding: 0.1em 0.6em;
  font-size: 0.8rem;
  font-weight: 600;
  border-bottom-left-radius: 10px;
  width: auto;
}

.mod_eventlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.home .mod_eventlist {
  display: block;
  width: 100% !important;
}

.event {
  display: flex;
}
.event .time, .event .info {
  margin-right: 3%;
  font-size: 0.94rem;
}
@media screen and (min-width: 60em) {
  .event .time, .event .info {
    width: 30%;
    margin-right: 3%;
  }
}
.event .location {
  font-size: 0.8rem;
}
.event .location:before {
  font-family: "icomoon";
  content: "\e085";
  margin-right: 10px;
}
.event h5 {
  width: 65%;
}
@media screen and (min-width: 45em) {
  .event .ce_text {
    height: 280px;
  }
}

.event-header {
  display: flex;
  align-items: center;
  width: 100%;
}
.event-header h3 {
  margin: 0;
}
@media screen and (min-width: 45em) {
  .event-header {
    height: 130px;
    border-bottom: 1px solid #fff;
  }
}

.event.overview {
  margin-bottom: 1em;
}
@media screen and (min-width: 45em) {
  .event.overview {
    width: 48%;
    margin-bottom: 2em;
  }
}
.event.overview .image_container {
  max-width: 50%;
  margin: 10px auto;
  height: 100%;
  width: auto;
  margin: 0 auto;
  border: 7px solid #ffffff;
  background: #ffffff;
  float: none;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}
@media screen and (min-width: 45em) {
  .event.overview .image_container {
    max-width: 70%;
  }
}

.event.full {
  background-color: transparent;
}
.event.full .ce_text {
  height: auto;
}
.event.full img {
  max-width: 100% !important;
}

.event.full .time, .event.full .info {
  margin-right: 1em;
}

.flex-row .mod_eventlist {
  width: 100%;
}
@media screen and (min-width: 45em) {
  .flex-row .mod_eventlist {
    width: 48%;
  }
}
@media screen and (min-width: 60em) {
  .flex-row .mod_eventlist {
    width: 48%;
  }
}

#topstage img, #topstage picture {
  height: auto;
  margin: 0 auto;
  width: 100%;
}

.hero-text {
  position: absolute;
  text-align: center;
  background: rgba(255, 255, 255, 0.96);
  border-top: 2px solid rgb(210, 150, 67);
  border-bottom-left-radius: 40px;
  padding: 1em;
  position: absolute;
  left: 50%;
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
@media screen and (min-width: 45em) {
  .hero-text {
    transform: translate(0, 0);
    right: 0;
    left: auto;
    bottom: 15%;
    text-align: left !important;
    width: 100%;
    max-width: 400px;
    padding: 1.4em;
  }
}
@media screen and (min-width: 60em) {
  .hero-text {
    font-size: 1.2rem;
    line-height: 1.5;
    max-width: 500px;
  }
}
@media screen and (min-width: 60em) {
  .hero-text h4 {
    font-size: 1.75rem;
    margin-bottom: 1rem !important;
  }
}
.hero-text h1, .hero-text h2, .hero-text h3, .hero-text h4 {
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 45em) {
  .hero-text h1, .hero-text h2, .hero-text h3, .hero-text h4 {
    text-align: left;
  }
}
.hero-text h4 {
  color: rgb(210, 150, 67);
}

@media screen and (min-width: 60em) {
  .half, .f50 {
    width: 48%;
  }
}

figure {
  margin: 0;
}

img, picture, video {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: none;
}

.gallery {
  margin: 0;
  padding: 0;
  margin-top: 1em;
}
@media screen and (min-width: 60em) {
  .gallery {
    margin-top: 3em;
  }
}
.gallery .image_container {
  width: 100%;
  max-width: none !important;
  height: auto;
}
.gallery li {
  margin: 0;
  margin-bottom: 1em;
}
.gallery li:before {
  display: none;
}
.gallery li {
  flex-basis: 48%;
}
@media screen and (min-width: 60em) {
  .gallery li {
    flex-basis: 33%;
  }
}
.gallery li img, .gallery li picture {
  width: 100%;
  height: auto;
}

.image_background_container {
  animation-delay: 0.2s;
  overflow: hidden;
  height: 100%;
  width: 100%;
  position: absolute;
  background-size: cover;
  background-position: center center;
}
.image_background_container img {
  opacity: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}
.image_background_container.right {
  right: 0;
}
.image_background_container.center {
  width: 100%;
  text-align: center;
}
.image_background_container.rellax {
  height: 120%;
}

.overlay {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(7.8064516129, 8.3387096774, 8.6935483871, 0.4);
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.overlay.off {
  opacity: 0;
  visibility: hidden;
}
.overlay.light {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(240.1789473684, 242.4947368421, 243.4210526316, 0.8);
}

blockquote {
  width: 90% !important;
}

/* --------------------------------------------
   #Forms 
   -------------------------------------------- */
form {
  position: relative;
}

label {
  font-size: 0.8rem;
  font-weight: normal;
  font-family: "Open Sans Condensed", sans-serif;
  color: rgb(77, 114, 130);
  clear: both;
}

label + select {
  display: block;
}

.error {
  color: red;
}

input.error {
  border-color: rgb(210, 150, 67);
}

fieldset {
  background-color: rgba(255, 255, 255, 0.7);
}

button, .button, input[type=submit], input[type=file] {
  width: auto;
  text-transform: none;
  font-weight: 300;
  padding: 6px 8px;
  background-image: none;
  border: 0;
  font-size: 0.9rem;
  color: #ffffff;
}

label {
  font-size: 0.8rem;
}
@media screen and (min-width: 45em) {
  label {
    font-size: 0.9rem;
  }
}
@media screen and (min-width: 60em) {
  label {
    font-size: 1rem;
  }
}
label.error {
  background-color: rgb(77, 114, 130);
  color: #ffffff !important;
  padding: 3px 5px;
  margin-top: -1px;
}

input {
  margin-bottom: 0.5em;
  width: 100%;
}
input:focus {
  border: 1px solid rgb(223, 228, 230);
  box-shadow: 0 0 15px rgba(56, 81, 92, 0.2);
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
input.error {
  border: 1px solid rgb(202, 52, 40);
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
input[type=text], input[type=email] {
  font-size: 0.8rem;
  border: 1px solid rgb(223, 228, 230);
  padding: 0.6em;
  border-radius: 2px;
}
@media screen and (min-width: 45em) {
  input[type=text], input[type=email] {
    font-size: 0.9rem;
  }
}
@media screen and (min-width: 60em) {
  input[type=text], input[type=email] {
    font-size: 1rem;
  }
}
input[type=text], input[type=email] {
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
input[type=checkbox], input input[type=radio] {
  padding: 0;
  width: auto;
}
input[type=file] {
  float: left;
  margin-bottom: 30px;
}
input[type=submit] {
  background-color: rgb(210, 150, 67);
}

textarea {
  font-size: 0.8rem;
  border: 1px solid rgb(223, 228, 230);
  padding: 0.6em;
  border-radius: 2px;
}
@media screen and (min-width: 45em) {
  textarea {
    font-size: 0.9rem;
  }
}
@media screen and (min-width: 60em) {
  textarea {
    font-size: 1rem;
  }
}
textarea {
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  font-size: 0.9rem;
  min-height: 200px;
  width: 100%;
}

.mitglieder {
  background: #ffffff;
  border-bottom: 1px solid rgb(223, 228, 230);
}
.mitglieder .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  height: 70px;
}
@media screen and (min-width: 45em) {
  .mitglieder .container {
    height: 85px;
  }
}
@media screen and (min-width: 60em) {
  .mitglieder .container {
    height: 100px;
  }
}
.mitglieder .container figure {
  overflow: hidden;
}
.mitglieder .container > div {
  width: 70px;
  padding: 0.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-delay: 0.4s;
}
@media screen and (min-width: 37.5em) {
  .mitglieder .container > div {
    width: 70px;
    padding: 1em;
  }
}
@media screen and (min-width: 60em) {
  .mitglieder .container > div {
    padding: 1em;
    width: 80px;
  }
}
@media screen and (min-width: 81.25em) {
  .mitglieder .container > div {
    width: 90px;
  }
}
@media screen and (min-width: 60em) {
  .mitglieder .container div.landscape {
    width: 110px;
  }
}
@media screen and (min-width: 81.25em) {
  .mitglieder .container div.landscape {
    width: 120px;
  }
}
@media screen and (min-width: 60em) {
  .mitglieder .container div.wider {
    width: 120px;
  }
}
@media screen and (min-width: 81.25em) {
  .mitglieder .container div.wider {
    width: 160px;
  }
}
.mitglieder .container div:hover {
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transform: scale(1.12, 1.12);
}

.mt-small {
  margin-top: 0px;
}
@media screen and (min-width: 45em) {
  .mt-small {
    margin-top: 10px;
  }
}
@media screen and (min-width: 60em) {
  .mt-small {
    margin-top: 25px;
  }
}

.mt-medium {
  margin-top: 10px;
}
@media screen and (min-width: 45em) {
  .mt-medium {
    margin-top: 25px;
  }
}
@media screen and (min-width: 60em) {
  .mt-medium {
    margin-top: 50px;
  }
}

.mt-large {
  margin-top: 25px;
}
@media screen and (min-width: 45em) {
  .mt-large {
    margin-top: 50px;
  }
}
@media screen and (min-width: 60em) {
  .mt-large {
    margin-top: 100px;
  }
}

.mt-xlarge {
  margin-top: 50px;
}
@media screen and (min-width: 45em) {
  .mt-xlarge {
    margin-top: 75px;
  }
}
@media screen and (min-width: 60em) {
  .mt-xlarge {
    margin-top: 175px !important;
  }
}

.mt-xxlarge {
  margin-top: 75px;
}
@media screen and (min-width: 45em) {
  .mt-xxlarge {
    margin-top: 100px;
  }
}
@media screen and (min-width: 60em) {
  .mt-xxlarge {
    margin-top: 225px !important;
  }
}

.mb-small {
  margin-bottom: 0px;
}
@media screen and (min-width: 45em) {
  .mb-small {
    margin-bottom: 10px;
  }
}
@media screen and (min-width: 60em) {
  .mb-small {
    margin-bottom: 25px;
  }
}

.mb-medium {
  margin-bottom: 10px;
}
@media screen and (min-width: 45em) {
  .mb-medium {
    margin-bottom: 25px;
  }
}
@media screen and (min-width: 60em) {
  .mb-medium {
    margin-bottom: 50px;
  }
}

.mb-large {
  margin-bottom: 10px;
}
@media screen and (min-width: 45em) {
  .mb-large {
    margin-bottom: 35px;
  }
}
@media screen and (min-width: 60em) {
  .mb-large {
    margin-bottom: 75px;
  }
}

.mb-xlarge {
  margin-bottom: 25px;
}
@media screen and (min-width: 45em) {
  .mb-xlarge {
    margin-bottom: 50px;
  }
}
@media screen and (min-width: 60em) {
  .mb-xlarge {
    margin-bottom: 100px;
  }
}

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.


/*Colorbox*/
#cboxOverlay {
  background: #000;
  opacity: 0.96;
}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  text-indent: 0;
  width: 20px;
  height: 20px;
  position: absolute;
  top: -30px;
  background: url(../images/controls.png) no-repeat 0 0;
}

#cboxPrevious:before {
  content: "\e908";
  font-family: "icomoon";
}

#cboxNext:before {
  content: "\e907";
  font-family: "icomoon";
}

#cboxClose:before {
  font-family: "icomoon";
  content: "\e117";
}

#cboxPrevious, #cboxNext, #cboxClose {
  color: transparent;
}

#cboxPrevious:before, #cboxNext:before, #cboxClose:before {
  color: #ffffff;
}

#cboxTitle {
  display: none !important;
}

.sl-overlay {
  opacity: 0.9;
}

@-webkit-keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@-ms-keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes loadingbar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@-moz-keyframes loadingbar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@-ms-keyframes loadingbar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@-o-keyframes loadingbar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes loadingbar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-ms-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*
@include keyframes(pulse) {
  0% { transform: scale(1); }
  30% { transform: scale(1); }
  40% { transform: scale(1.18); }
  50% { transform: scale(1.08); }
  60% { transform: scale(1); }
  70% { transform: scale(1.12); }
  80% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

*/
/*animations*/
.pulsing {
  -webkit-animation: pulse 1s ease-in infinite;
  -moz-animation: pulse 1s ease-in infinite;
  -ms-animation: pulse 1s ease-in infinite;
  -o-animation: pulse 1s ease-in infinite;
  animation: pulse 1s ease-in infinite;
}

.animated {
  animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 0.4s;
}

.slow {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.slower {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.slowest {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.bounceInRight,
.bounceInLeft,
.bounceInUp,
.bounceInDown {
  opacity: 0;
  -webkit-transform: translateX(400px);
  transform: translateX(400px);
}

.fadeInRight,
.fadeInLeft,
.fadeInUp,
.fadeInDown {
  opacity: 0;
  -webkit-transform: translateX(400px);
  transform: translateX(400px);
}

.flipInX,
.flipInY,
.rotateIn,
.rotateInUpLeft,
.rotateInUpRight,
.rotateInDownLeft,
.rotateDownUpRight,
.rollIn {
  opacity: 0;
}

.lightSpeedInRight,
.lightSpeedInLeft {
  opacity: 0;
  -webkit-transform: translateX(400px);
  transform: translateX(400px);
}

/**********
* Fade In *
**********/
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    display: block;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    display: block;
  }
}
.fadeIn {
  opacity: 0;
}

.fadeIn.go {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

/*************
* FadeInLeft *
*************/
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeInLeft {
  opacity: 0;
  -webkit-transform: translateX(-400px);
  transform: translateX(-400px);
}

.fadeInLeft.go {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

/*************
* FadeInRight *
*************/
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeInRight {
  opacity: 0;
  -webkit-transform: translateX(400px);
  transform: translateX(400px);
}

.fadeInRight.go {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

/*************
* FadeInUp *
*************/
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -moz-transform: translateY(400px);
    -o-transform: translateY(400px);
    -ms-transform: translateY(400px);
    -webkit-transform: translateY(400px);
    transform: translateY(400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@-moz-keyframes fadeInUp {
  0% {
    opacity: 0;
    -moz-transform: translateY(400px);
    -o-transform: translateY(400px);
    -ms-transform: translateY(400px);
    -webkit-transform: translateY(400px);
    transform: translateY(400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@-ms-keyframes fadeInUp {
  0% {
    opacity: 0;
    -moz-transform: translateY(400px);
    -o-transform: translateY(400px);
    -ms-transform: translateY(400px);
    -webkit-transform: translateY(400px);
    transform: translateY(400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@-o-keyframes fadeInUp {
  0% {
    opacity: 0;
    -moz-transform: translateY(400px);
    -o-transform: translateY(400px);
    -ms-transform: translateY(400px);
    -webkit-transform: translateY(400px);
    transform: translateY(400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -moz-transform: translateY(400px);
    -o-transform: translateY(400px);
    -ms-transform: translateY(400px);
    -webkit-transform: translateY(400px);
    transform: translateY(400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
.fadeInUp {
  opacity: 0;
  -webkit-transform: translateY(400px);
  transform: translateY(400px);
}

.fadeInUp.go {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

/*************
* FadeInDown *
*************/
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-400px);
    -o-transform: translateY(-400px);
    -ms-transform: translateY(-400px);
    -webkit-transform: translateY(-400px);
    transform: translateY(-400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-moz-keyframes fadeInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-400px);
    -o-transform: translateY(-400px);
    -ms-transform: translateY(-400px);
    -webkit-transform: translateY(-400px);
    transform: translateY(-400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-ms-keyframes fadeInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-400px);
    -o-transform: translateY(-400px);
    -ms-transform: translateY(-400px);
    -webkit-transform: translateY(-400px);
    transform: translateY(-400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-o-keyframes fadeInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-400px);
    -o-transform: translateY(-400px);
    -ms-transform: translateY(-400px);
    -webkit-transform: translateY(-400px);
    transform: translateY(-400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-400px);
    -o-transform: translateY(-400px);
    -ms-transform: translateY(-400px);
    -webkit-transform: translateY(-400px);
    transform: translateY(-400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.fadeInDown {
  opacity: 0;
  -webkit-transform: translateY(-400px);
  transform: translateY(-400px);
}

.fadeInDown.go {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

/*****************
* Out animations *
*****************/
/************
* fadeOut *
*************/
/*

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.fadeOut.go {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}


*/
/************
* fadeOutUp *
*************/
/*

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
    }
}

@keyframes fadeOutUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-2000px);
    }
}

.fadeOutUp.go {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}

*/
/************
* fadeOutDown *
*************/
/*

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(2000px);
    }
}

.fadeOutDown.go {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}


/************
* fadeOutLeft *
*************/
/*
@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
    }
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-2000px);
    }
}

.fadeOutLeft.go {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}


/************
* fadeOutRight *
*************/
/*

@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(2000px);
    }
}

.fadeOutRight.go {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
}


/*****************
* Short Animations
*******************/
/*********************
* fadeInUpShort
*********************/
@-webkit-keyframes fadeInUpShort {
  0% {
    opacity: 0;
    -moz-transform: translateY(20px);
    -o-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-moz-keyframes fadeInUpShort {
  0% {
    opacity: 0;
    -moz-transform: translateY(20px);
    -o-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-ms-keyframes fadeInUpShort {
  0% {
    opacity: 0;
    -moz-transform: translateY(20px);
    -o-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-o-keyframes fadeInUpShort {
  0% {
    opacity: 0;
    -moz-transform: translateY(20px);
    -o-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInUpShort {
  0% {
    opacity: 0;
    -moz-transform: translateY(20px);
    -o-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.fadeInUpShort {
  opacity: 0;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
}

.fadeInUpShort.go {
  -webkit-animation-name: fadeInUpShort;
  -moz-animation-name: fadeInUpShort;
  animation-name: fadeInUpShort;
}

/*********************
* fadeInDownShort
*********************/
@-webkit-keyframes fadeInDownShort {
  0% {
    opacity: 0;
    -moz-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-moz-keyframes fadeInDownShort {
  0% {
    opacity: 0;
    -moz-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-ms-keyframes fadeInDownShort {
  0% {
    opacity: 0;
    -moz-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-o-keyframes fadeInDownShort {
  0% {
    opacity: 0;
    -moz-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInDownShort {
  0% {
    opacity: 0;
    -moz-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.fadeInDownShort {
  opacity: 0;
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px);
}

.fadeInDownShort.go {
  -webkit-animation-name: fadeInDownShort;
  animation-name: fadeInDownShort;
  -moz-animation-name: fadeInDownShort;
}

/*********************
* fadeInRightShort 
*********************/
@-webkit-keyframes fadeInRightShort {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@keyframes fadeInRightShort {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeInRightShort {
  opacity: 0;
  -webkit-transform: translateX(20px);
  transform: translateX(20px);
}

.fadeInRightShort.go {
  -webkit-animation-name: fadeInRightShort;
  animation-name: fadeInRightShort;
}

/*********************
* fadeInLeftShort 
*********************/
@-webkit-keyframes fadeInLeftShort {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@keyframes fadeInLeftShort {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeInLeftShort {
  opacity: 0;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
}

.fadeInLeftShort.go {
  -webkit-animation-name: fadeInLeftShort;
  animation-name: fadeInLeftShort;
}