@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

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

/*
    reset bootstrap
 */
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  overflow: hidden;
}

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
}

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
  /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the nextContentSlide rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
  /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */
template {
  display: none;
}

/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none;
}

/**
* Convert font-size from px to rem with px fallback
*
* @param $size - the value in pixel you want to convert
*
* e.g. p {@include fontSize(12px);}
*
*/
/* Function for converting a px based font-size to rem. */
/* rotate */
/* rounded */
/* clearfix */
/* Maintain Aspect Ratio Mixin */
/* center vertically and/or horizontally an absolute positioned element */
/* antialiasing mode font rendering */
/* grayscale */
/* rem px */
/* Rotation */
/* Size */
@font-face {}
@font-face {
  font-family: "HelveticaNeueLTStd-Blk";
  src: url(../fonts/2B6D49_0_0.eot);
  src: url(../fonts/2B6D49_0_0.eot?#iefix) format("embedded-opentype"), url(../fonts/2B6D49_0_0.woff) format("woff"), url(../fonts/2B6D49_0_0.ttf) format("truetype");
}
@font-face {
  font-family: "icomoon";
  src: url(../fonts/icomoon.eot?2qcd1t);
  src: url(../fonts/icomoon.eot?2qcd1t#iefix) format("embedded-opentype"), url(../fonts/icomoon.ttf?2qcd1t) format("truetype"), url(../fonts/icomoon.woff?2qcd1t) format("woff"), url(../fonts/icomoon.svg?2qcd1t#MBA-Styleguide) format("svg");
  font-weight: 400;
  font-style: normal;
}
[class*=" icon-"], [class^=icon-] {
  font-family: icomoon !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

.icon-bzu:before {
  content: "\e902";
}

.icon-calendar:before {
  content: "\e903";
}

.icon-chat:before {
  content: "\e904";
}

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

.icon-check2:before {
  content: "\e906";
}

.icon-close:before {
  content: "\e907";
}

.icon-close2:before {
  content: "\e908";
}

.icon-document:before {
  content: "\e909";
}

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

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

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

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

.icon-folder:before {
  content: "\e90e";
}

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

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

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

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

.icon-information:before {
  content: "\e913";
}

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

.icon-link:before {
  content: "\e915";
}

.icon-location:before {
  content: "\e916";
}

.icon-lock:before {
  content: "\e917";
}

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

.icon-mailRead:before {
  content: "\e919";
}

.icon-map:before {
  content: "\e91a";
}

.icon-media:before {
  content: "\e91b";
}

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

.icon-minus2:before {
  content: "\e91d";
}

.icon-mute:before {
  content: "\e91e";
}

.icon-phone:before {
  content: "\e91f";
}

.icon-photo:before {
  content: "\e920";
}

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

.icon-plus2:before {
  content: "\e922";
}

.icon-print:before {
  content: "\e923";
}

.icon-question:before {
  content: "\e924";
}

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

.icon-rss:before {
  content: "\e926";
}

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

.icon-settings:before {
  content: "\e928";
}

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

.icon-transfer:before {
  content: "\e92a";
}

.icon-trash:before {
  content: "\e92b";
}

.icon-unlocked:before {
  content: "\e92c";
}

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

.icon-user:before {
  content: "\e92e";
}

.icon-video:before {
  content: "\e92f";
}

.icon-volumeDown:before {
  content: "\e930";
}

.icon-volumeUp:before {
  content: "\e931";
}

.icon-wifi:before {
  content: "\e932";
}

.icon-clock:before {
  content: "\e933";
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;
}
body.search-bg {
  background-color: #FFFFFF !important;
  overflow: hidden;
}

.home-title {
  font-size: 3.75rem;
  line-height: 0.9em;
  font-family: "HelveticaNeueLTStd-Blk", Helvetica Neue, Arial, sans-serif;
}

.text-xl, header h1, h1 {
  font-size: 3rem;
  line-height: 0.9em;
  font-family: "HelveticaNeueLTStd-Blk", Helvetica Neue, Arial, sans-serif;
}

.text-l, h2 {
  font-size: 1.75rem;
  line-height: 0.9em;
  font-family: "Helvetica Neue", Helvetica Neue, Helvetica, Arial, sans-serif;
}

.text-m, h3, .sidebar h2 {
  font-size: 1.375rem;
  line-height: 0.9em;
  font-family: "Helvetica Neue", Helvetica Neue, Helvetica, Arial, sans-serif;
}

.text-s, body, p, .content p, li, .content li, a.mail {
  font-size: 1rem;
  line-height: 1.3em;
  font-family: "Helvetica Neue", Helvetica Neue, Helvetica, Arial, sans-serif, Arial, sans-serif;
  font-weight: 400;
}

h4 {
  font-size: 1rem;
  line-height: 0.9em;
}

.menu .main-nav {
  margin: 2px 0 0 0;
}
.menu .main-nav li {
  font-size: 1.75rem;
}

.menu .sub-nav {
  margin: 2px 0 0 0;
}
.menu .sub-nav li {
  font-size: 1.375rem;
}

/*
  fonts
 */
h1, h2, h3, h4, b, strong, .menu li, .menu li a, .mobile--navigation--main-menu a {
  font-family: "HelveticaNeueLTStd-Blk", Helvetica Neue, Arial, sans-serif !important;
  font-weight: normal !important;
}

/*
  basics
 */
p {
  margin: 5px 0 15px 0;
}

h2 {
  margin: 50px 0 0 0;
}

/*
  lists
 */
a, p a:link, a:link, a:visited {
  color: #3ea743;
  text-decoration: none;
}
a .logo-text, a .logo-text--small, p a:link .logo-text, p a:link .logo-text--small, a:link .logo-text, a:link .logo-text--small, a:visited .logo-text, a:visited .logo-text--small {
  color: #000000;
}

a.mail {
  margin: 0 0 0 -3px;
}

#nav-meta a, #nav-meta p a:link, #nav-meta a:link, #nav-meta a:visited, .content .footer-menu a {
  color: #000000;
}
#nav-meta a:hover, #nav-meta p a:link:hover, #nav-meta a:link:hover, #nav-meta a:visited:hover, .content .footer-menu a:hover {
  color: #3ea743;
}

.content .footer-menu p a:hover {
  text-decoration: underline;
}

.homepage-schooltype h3 a {
  color: #000000;
}
.homepage-schooltype h3 a:hover {
  color: #3ea743;
  text-decoration: none;
}

.homepage-schooltype p a:link:hover {
  color: #3ea743;
  text-decoration: underline;
}

#nav-meta {
  margin: 0 0 7px 0;
}
#nav-meta a {
  margin: 0 5px 0 0;
  padding: 0;
  float: left;
  font-family: "HelveticaNeueLTStd-Blk", Helvetica Neue, Arial, sans-serif !important;
  font-weight: normal !important;
  font-size: 16px;
}

a:hover, p a:hover {
  color: inherit;
  text-decoration: underline;
}

.header-text a:hover {
  text-decoration: none;
}

.menu a, .mobile--navigation--main-menu a, #orange .menu a, #blue .menu a, #violet .menu a, #pink .menu a, #orange .content .footer-menu a, #blue .content .footer-menu a, #violet .content .footer-menu a, #pink .content .footer-menu a {
  color: #000000;
}
.menu a.orange:hover, .menu a.orange.preview, .mobile--navigation--main-menu a.orange:hover, .mobile--navigation--main-menu a.orange.preview, #orange .menu a.orange:hover, #orange .menu a.orange.preview, #blue .menu a.orange:hover, #blue .menu a.orange.preview, #violet .menu a.orange:hover, #violet .menu a.orange.preview, #pink .menu a.orange:hover, #pink .menu a.orange.preview, #orange .content .footer-menu a.orange:hover, #orange .content .footer-menu a.orange.preview, #blue .content .footer-menu a.orange:hover, #blue .content .footer-menu a.orange.preview, #violet .content .footer-menu a.orange:hover, #violet .content .footer-menu a.orange.preview, #pink .content .footer-menu a.orange:hover, #pink .content .footer-menu a.orange.preview {
  color: #eb690b;
}
.menu a.orange.active, .mobile--navigation--main-menu a.orange.active, #orange .menu a.orange.active, #blue .menu a.orange.active, #violet .menu a.orange.active, #pink .menu a.orange.active, #orange .content .footer-menu a.orange.active, #blue .content .footer-menu a.orange.active, #violet .content .footer-menu a.orange.active, #pink .content .footer-menu a.orange.active {
  color: #eb690b;
}
.menu a.orange.active:hover, .mobile--navigation--main-menu a.orange.active:hover, #orange .menu a.orange.active:hover, #blue .menu a.orange.active:hover, #violet .menu a.orange.active:hover, #pink .menu a.orange.active:hover, #orange .content .footer-menu a.orange.active:hover, #blue .content .footer-menu a.orange.active:hover, #violet .content .footer-menu a.orange.active:hover, #pink .content .footer-menu a.orange.active:hover {
  color: #000000;
}
.menu a.violet:hover, .menu a.violet.preview, .mobile--navigation--main-menu a.violet:hover, .mobile--navigation--main-menu a.violet.preview, #orange .menu a.violet:hover, #orange .menu a.violet.preview, #blue .menu a.violet:hover, #blue .menu a.violet.preview, #violet .menu a.violet:hover, #violet .menu a.violet.preview, #pink .menu a.violet:hover, #pink .menu a.violet.preview, #orange .content .footer-menu a.violet:hover, #orange .content .footer-menu a.violet.preview, #blue .content .footer-menu a.violet:hover, #blue .content .footer-menu a.violet.preview, #violet .content .footer-menu a.violet:hover, #violet .content .footer-menu a.violet.preview, #pink .content .footer-menu a.violet:hover, #pink .content .footer-menu a.violet.preview {
  color: #885ea0;
}
.menu a.violet.active, .mobile--navigation--main-menu a.violet.active, #orange .menu a.violet.active, #blue .menu a.violet.active, #violet .menu a.violet.active, #pink .menu a.violet.active, #orange .content .footer-menu a.violet.active, #blue .content .footer-menu a.violet.active, #violet .content .footer-menu a.violet.active, #pink .content .footer-menu a.violet.active {
  color: #885ea0;
}
.menu a.violet.active:hover, .mobile--navigation--main-menu a.violet.active:hover, #orange .menu a.violet.active:hover, #blue .menu a.violet.active:hover, #violet .menu a.violet.active:hover, #pink .menu a.violet.active:hover, #orange .content .footer-menu a.violet.active:hover, #blue .content .footer-menu a.violet.active:hover, #violet .content .footer-menu a.violet.active:hover, #pink .content .footer-menu a.violet.active:hover {
  color: #000000;
}
.menu a.blue:hover, .menu a.blue.preview, .mobile--navigation--main-menu a.blue:hover, .mobile--navigation--main-menu a.blue.preview, #orange .menu a.blue:hover, #orange .menu a.blue.preview, #blue .menu a.blue:hover, #blue .menu a.blue.preview, #violet .menu a.blue:hover, #violet .menu a.blue.preview, #pink .menu a.blue:hover, #pink .menu a.blue.preview, #orange .content .footer-menu a.blue:hover, #orange .content .footer-menu a.blue.preview, #blue .content .footer-menu a.blue:hover, #blue .content .footer-menu a.blue.preview, #violet .content .footer-menu a.blue:hover, #violet .content .footer-menu a.blue.preview, #pink .content .footer-menu a.blue:hover, #pink .content .footer-menu a.blue.preview {
  color: #009ee0;
}
.menu a.blue.active, .mobile--navigation--main-menu a.blue.active, #orange .menu a.blue.active, #blue .menu a.blue.active, #violet .menu a.blue.active, #pink .menu a.blue.active, #orange .content .footer-menu a.blue.active, #blue .content .footer-menu a.blue.active, #violet .content .footer-menu a.blue.active, #pink .content .footer-menu a.blue.active {
  color: #009ee0;
}
.menu a.blue.active:hover, .mobile--navigation--main-menu a.blue.active:hover, #orange .menu a.blue.active:hover, #blue .menu a.blue.active:hover, #violet .menu a.blue.active:hover, #pink .menu a.blue.active:hover, #orange .content .footer-menu a.blue.active:hover, #blue .content .footer-menu a.blue.active:hover, #violet .content .footer-menu a.blue.active:hover, #pink .content .footer-menu a.blue.active:hover {
  color: #000000;
}
.menu a.green:hover, .menu a.green.preview, .mobile--navigation--main-menu a.green:hover, .mobile--navigation--main-menu a.green.preview, #orange .menu a.green:hover, #orange .menu a.green.preview, #blue .menu a.green:hover, #blue .menu a.green.preview, #violet .menu a.green:hover, #violet .menu a.green.preview, #pink .menu a.green:hover, #pink .menu a.green.preview, #orange .content .footer-menu a.green:hover, #orange .content .footer-menu a.green.preview, #blue .content .footer-menu a.green:hover, #blue .content .footer-menu a.green.preview, #violet .content .footer-menu a.green:hover, #violet .content .footer-menu a.green.preview, #pink .content .footer-menu a.green:hover, #pink .content .footer-menu a.green.preview {
  color: #3ea743;
}
.menu a.green.active, .mobile--navigation--main-menu a.green.active, #orange .menu a.green.active, #blue .menu a.green.active, #violet .menu a.green.active, #pink .menu a.green.active, #orange .content .footer-menu a.green.active, #blue .content .footer-menu a.green.active, #violet .content .footer-menu a.green.active, #pink .content .footer-menu a.green.active {
  color: #3ea743;
}
.menu a.green.active:hover, .mobile--navigation--main-menu a.green.active:hover, #orange .menu a.green.active:hover, #blue .menu a.green.active:hover, #violet .menu a.green.active:hover, #pink .menu a.green.active:hover, #orange .content .footer-menu a.green.active:hover, #blue .content .footer-menu a.green.active:hover, #violet .content .footer-menu a.green.active:hover, #pink .content .footer-menu a.green.active:hover {
  color: #000000;
}
.menu a.pink:hover, .menu a.pink.preview, .mobile--navigation--main-menu a.pink:hover, .mobile--navigation--main-menu a.pink.preview, #orange .menu a.pink:hover, #orange .menu a.pink.preview, #blue .menu a.pink:hover, #blue .menu a.pink.preview, #violet .menu a.pink:hover, #violet .menu a.pink.preview, #pink .menu a.pink:hover, #pink .menu a.pink.preview, #orange .content .footer-menu a.pink:hover, #orange .content .footer-menu a.pink.preview, #blue .content .footer-menu a.pink:hover, #blue .content .footer-menu a.pink.preview, #violet .content .footer-menu a.pink:hover, #violet .content .footer-menu a.pink.preview, #pink .content .footer-menu a.pink:hover, #pink .content .footer-menu a.pink.preview {
  color: #e30059;
}
.menu a.pink.active, .mobile--navigation--main-menu a.pink.active, #orange .menu a.pink.active, #blue .menu a.pink.active, #violet .menu a.pink.active, #pink .menu a.pink.active, #orange .content .footer-menu a.pink.active, #blue .content .footer-menu a.pink.active, #violet .content .footer-menu a.pink.active, #pink .content .footer-menu a.pink.active {
  color: #e30059;
}
.menu a.pink.active:hover, .mobile--navigation--main-menu a.pink.active:hover, #orange .menu a.pink.active:hover, #blue .menu a.pink.active:hover, #violet .menu a.pink.active:hover, #pink .menu a.pink.active:hover, #orange .content .footer-menu a.pink.active:hover, #blue .content .footer-menu a.pink.active:hover, #violet .content .footer-menu a.pink.active:hover, #pink .content .footer-menu a.pink.active:hover {
  color: #000000;
}

#result a:hover {
  color: #3ea743 !important;
}

/**
  colors
    orange
    violet
    blue
    green
 */
.white {
  color: #FFFFFF;
}

.black {
  color: #000000;
}

.main-color {
  background-color: rgba(62, 167, 67, 0.1);
}

.orange {
  color: #eb690b;
}

.bg-orange {
  background-color: #eb690b;
  color: #FFFFFF;
}

.violet {
  color: #885ea0;
}

.bg-violet {
  background-color: #885ea0;
  color: #FFFFFF;
}

.blue {
  color: #009ee0;
}

.bg-blue {
  background-color: #009ee0;
  color: #FFFFFF;
}

.green {
  color: #3ea743;
}

.bg-green {
  background-color: #3ea743;
  color: #FFFFFF;
}

.button, button, html [type=button] {
  font-size: 1rem;
  font-family: "HelveticaNeueLTStd-Blk", Helvetica Neue, Arial, sans-serif;
  color: white !important;
  width: auto;
  padding: 10px 50px 10px 10px;
  background-image: url(../img/icons/icon_link_arrow_white.svg);
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.button[target=_blank], button[target=_blank], html [type=button][target=_blank] {
  background-image: url(../img/icons/icon_link_extern_white.svg) !important;
}

.button, select, button, html [type=button], [type=reset], [type=submit] {
  background-color: #3ea743;
  border-radius: 0 !important;
  background-size: 18px;
}

select, [type=reset], [type=submit] {
  padding: 0 0 0 10px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url(../img/icons/icon_arrow_dropdown.svg) !important;
  background-size: inherit;
  background-repeat: no-repeat;
  background-position: right 10px center;
}
select::-ms-expand, [type=reset]::-ms-expand, [type=submit]::-ms-expand {
  display: none;
}

#searchButton, #mformsubmit, select, [type=reset], [type=submit] {
  background-image: url(../img/icons/icon_link_arrow_white.svg) !important;
  background-size: 16px;
  margin: 10px 0;
}

#orange.main-color {
  background-color: #FEF2D0;
}
#orange header .header-content {
  background-image: url(../img/ueber_uns.png);
}
#orange .content a, #orange .content-title a, #orange .sidebar .frame-ruler-before a, #orange .sidebar p a,
#orange .content a:hover, #orange .content-title a:hover, #orange .sidebar .frame-ruler-before a:hover, #orange .sidebar p a:hover, #orange .accordion-item-title h2:hover, #orange .accordion-item-title h3:hover {
  color: #eb690b;
}
#orange .sub-nav a, #orange .sub-nav--mobile a {
  color: #000000;
}
#orange .sub-nav a:hover, #orange .sub-nav a.active, #orange .sub-nav--mobile a:hover, #orange .sub-nav--mobile a.active {
  color: #eb690b;
}
#orange .icons-wrap a:hover svg path {
  fill: #eb690b;
}
#orange .header-icon-link:before, #orange [class^=icon-]:before, #orange [class*=" icon-"]:before {
  color: #000000;
}
#orange .header-icon-link:hover:before, #orange [class^=icon-]:hover:before, #orange [class*=" icon-"]:hover:before {
  color: #eb690b;
}
#orange #nav-meta a:hover {
  color: #eb690b;
}
#orange .button, #orange select, #orange button, #orange html [type=button], #orange [type=reset], #orange [type=submit] {
  background-color: #eb690b;
  background-size: 18px;
}

#blue.main-color {
  background-color: #ccecfa;
}
#blue header .header-content {
  background-image: url(../img/agenda.png);
}
#blue .content a, #blue .content-title a, #blue .sidebar .frame-ruler-before a, #blue .sidebar p a,
#blue .content a:hover, #blue .content-title a:hover, #blue .sidebar .frame-ruler-before a:hover, #blue .sidebar p a:hover, #blue .accordion-item-title h2:hover, #blue .accordion-item-title h3:hover {
  color: #009ee0;
}
#blue .sub-nav a, #blue .sub-nav--mobile a {
  color: #000000;
}
#blue .sub-nav a:hover, #blue .sub-nav a.active, #blue .sub-nav--mobile a:hover, #blue .sub-nav--mobile a.active {
  color: #009ee0;
}
#blue .icons-wrap a:hover svg path {
  fill: #009ee0;
}
#blue .header-icon-link:before, #blue [class^=icon-]:before, #blue [class*=" icon-"]:before {
  color: #000000;
}
#blue .header-icon-link:hover:before, #blue [class^=icon-]:hover:before, #blue [class*=" icon-"]:hover:before {
  color: #009ee0;
}
#blue #nav-meta a:hover {
  color: #009ee0;
}
#blue .button, #blue select, #blue button, #blue html [type=button], #blue [type=reset], #blue [type=submit] {
  background-color: #009ee0;
  background-size: 18px;
}

#violet.main-color {
  background-color: rgba(136, 94, 160, 0.15);
}
#violet.img-wirtschaftsgymnasium header .header-content {
  background-image: url(../img/wirtschaftsgymnasium.png);
}
#violet.img-gymnasium header .header-content {
  background-image: url(../img/gymnasium.png);
}
#violet.img-ppp header .header-content {
  background-image: url(../img/ppp.png);
}
#violet.img-handelsmittelschule header .header-content {
  background-image: url(../img/handelsmittelschule.png);
}
#violet.img-informatik header .header-content {
  background-image: url(../img/informatikmittelschule.png);
}
#violet .content a, #violet .content-title a, #violet .sidebar .frame-ruler-before a, #violet .sidebar p a,
#violet .content a:hover, #violet .content-title a:hover, #violet .sidebar .frame-ruler-before a:hover, #violet .sidebar p a:hover, #violet .accordion-item-title h2:hover, #violet .accordion-item-title h3:hover {
  color: #885ea0;
}
#violet .sub-nav a, #violet .sub-nav--mobile a {
  color: #000000;
}
#violet .sub-nav a:hover, #violet .sub-nav a.active, #violet .sub-nav--mobile a:hover, #violet .sub-nav--mobile a.active {
  color: #885ea0;
}
#violet .icons-wrap a:hover svg path {
  fill: #885ea0;
}
#violet .header-icon-link:before, #violet [class^=icon-]:before, #violet [class*=" icon-"]:before {
  color: #000000;
}
#violet .header-icon-link:hover:before, #violet [class^=icon-]:hover:before, #violet [class*=" icon-"]:hover:before {
  color: #885ea0;
}
#violet #nav-meta a:hover {
  color: #885ea0;
}
#violet .button, #violet select, #violet button, #violet html [type=button] {
  background-color: #885ea0;
}
#violet .button [type=reset], #violet .button [type=submit], #violet select [type=reset], #violet select [type=submit], #violet button [type=reset], #violet button [type=submit], #violet html [type=button] [type=reset], #violet html [type=button] [type=submit] {
  background-image: none;
  background-size: 18px;
}
#violet .pie_description .quadrat {
  background-color: #885ea0;
  margin: 0 10px 0 0;
}
#violet .cls-1 {
  fill: #ffff;
}
#violet .cls-2, #violet .cls-3, #violet .cls-4, #violet .cls-5, #violet .cls-6, #violet .cls-7, #violet .cls-8, #violet .cls-9, #violet .cls-10 {
  fill: #885ea0 !important;
}
#violet .cls-2, #violet .pie_description:nth-of-type(2) li:nth-child(3) .quadrat {
  opacity: 0.2 !important;
}
#violet .cls-3, #violet .pie_description:nth-of-type(2) li:nth-child(2) .quadrat {
  opacity: 0.35 !important;
}
#violet .cls-4, #violet .pie_description:nth-of-type(2) li:nth-child(1) .quadrat {
  opacity: 0.5 !important;
}
#violet .cls-5, #violet .pie_description:nth-of-type(1) li:nth-child(3) .quadrat {
  opacity: 0.65 !important;
}
#violet .cls-6, #violet .pie_description:nth-of-type(1) li:nth-child(2) .quadrat {
  opacity: 0.8 !important;
}
#violet .cls-7, #violet .pie_description:nth-of-type(1) li:nth-child(1) .quadrat {
  opacity: 1 !important;
}

#green.main-color {
  background-color: rgba(62, 167, 67, 0.1);
}
#green header .header-content {
  background-image: url(../img/ueber_uns.png);
}
#green .content a, #green .content-title a, #green .sidebar .frame-ruler-before a, #green .sidebar p a,
#green .content a:hover, #green .content-title a:hover, #green .sidebar .frame-ruler-before a:hover, #green .sidebar p a:hover, #green .accordion-item-title h2:hover, #green .accordion-item-title h3:hover {
  color: #3ea743;
}
#green .sub-nav a, #green .sub-nav--mobile a {
  color: #000000;
}
#green .sub-nav a:hover, #green .sub-nav a.active, #green .sub-nav--mobile a:hover, #green .sub-nav--mobile a.active {
  color: #3ea743;
}
#green .icons-wrap a:hover svg path {
  fill: #3ea743;
}
#green .header-icon-link:before, #green [class^=icon-]:before, #green [class*=" icon-"]:before {
  color: #000000;
}
#green .header-icon-link:hover:before, #green [class^=icon-]:hover:before, #green [class*=" icon-"]:hover:before {
  color: #3ea743;
}
#green #nav-meta a:hover {
  color: #3ea743;
}
#green .button, #green select, #green button, #green html [type=button], #green [type=reset], #green [type=submit] {
  background-color: #3ea743;
  background-size: 18px;
}

#pink.main-color {
  background-color: rgba(227, 0, 89, 0.1);
}
#pink header .header-content {
  background-image: url(../img/menschen.png);
}
#pink .content a, #pink .content-title a, #pink .sidebar .frame-ruler-before a, #pink .sidebar p a,
#pink .content a:hover, #pink .content-title a:hover, #pink .sidebar .frame-ruler-before a:hover, #pink .sidebar p a:hover, #pink .accordion-item-title h2:hover, #pink .accordion-item-title h3:hover {
  color: #e30059;
}
#pink .sub-nav a, #pink .sub-nav--mobile a {
  color: #000000;
}
#pink .sub-nav a:hover, #pink .sub-nav a.active, #pink .sub-nav--mobile a:hover, #pink .sub-nav--mobile a.active {
  color: #e30059;
}
#pink .icons-wrap a:hover svg path {
  fill: #e30059;
}
#pink .header-icon-link:before, #pink [class^=icon-]:before, #pink [class*=" icon-"]:before {
  color: #000000;
}
#pink .header-icon-link:hover:before, #pink [class^=icon-]:hover:before, #pink [class*=" icon-"]:hover:before {
  color: #e30059;
}
#pink #nav-meta a:hover {
  color: #e30059;
}
#pink .button, #pink select, #pink button, #pink html [type=button], #pink [type=reset], #pink [type=submit] {
  background-color: #e30059;
  background-size: 18px;
}

.colored {
  background-color: transparent;
}
.colored.default {
  background-color: rgba(62, 167, 67, 0.1);
}

.white-bg {
  background-color: #FFFFFF;
}

.logo-text {
  font-size: 3.625rem;
  line-height: calc(0.9em - 5px);
  font-family: "Helvetica Neue", Helvetica Neue, Helvetica, Arial, sans-serif;
}

nav.schools li {
  margin-bottom: 0.875rem;
}

.button {
  display: inline-block;
  padding: 10px 35px 10px 10px;
  border: none;
  cursor: pointer;
  width: calc(100% - 35px);
  margin: 0 0 10px 0;
}
.button:hover {
  background-color: #000000 !important;
}

.sidebar ul a {
  padding-right: 30px;
  height: auto;
  display: block;
  background-repeat: no-repeat;
  background-position: right 0 top 12px;
}
.sidebar ul a.button {
  background-image: url(../img/icons/icon_link_download_white.svg);
  color: #FFFFFF;
}
.sidebar ul a.button:hover {
  text-decoration: none;
}
.sidebar ul a:hover {
  text-decoration: none;
}

.sidebar ul li.download {
  background-image: url(../img/icons/icon_link_download.svg) !important;
}

.sidebar ul .internal-link, .sidebar ul a[href*="ksh.ch"], .sidebar ul a:not([href^=http]) {
  width: inherit;
  height: auto;
  display: block;
  background-repeat: no-repeat;
  background-position: right 10px top 12px;
}
.sidebar ul .internal-link.button, .sidebar ul a[href*="ksh.ch"].button, .sidebar ul a:not([href^=http]).button {
  background-image: url(../img/icons/icon_link_arrow_white.svg);
  color: #FFFFFF;
}
.sidebar ul .internal-link.button:hover, .sidebar ul a[href*="ksh.ch"].button:hover, .sidebar ul a:not([href^=http]).button:hover {
  text-decoration: none;
}
.sidebar ul .internal-link:hover, .sidebar ul a[href*="ksh.ch"]:hover, .sidebar ul a:not([href^=http]):hover {
  text-decoration: none;
}

.sidebar ul .external-link, .sidebar ul .external-link-new-window, .sidebar ul a[href^=http], .sidebar ul a[target=_blank] {
  width: calc(100% - 30px);
  height: auto;
  display: block;
  background-repeat: no-repeat;
  background-position: right 10px top 12px;
}
.sidebar ul .external-link.button, .sidebar ul .external-link-new-window.button, .sidebar ul a[href^=http].button, .sidebar ul a[target=_blank].button {
  background-image: url(../img/icons/icon_link_extern_white.svg);
  color: #FFFFFF;
}
.sidebar ul .external-link.button:hover, .sidebar ul .external-link-new-window.button:hover, .sidebar ul a[href^=http].button:hover, .sidebar ul a[target=_blank].button:hover {
  text-decoration: none;
}
.sidebar ul .external-link:hover, .sidebar ul .external-link-new-window:hover, .sidebar ul a[href^=http]:hover, .sidebar ul a[target=_blank]:hover {
  text-decoration: none;
  color: #000000 !important;
}

img {
  width: 100%;
  height: auto;
}

.icon-location::before {
  content: "\e916";
}

.icon-user::before {
  content: "\e92e";
}

.icon-clock::before {
  content: "\e933";
}

.icon-close::before {
  content: "\e908";
}

.icon-calendar::before {
  content: "\e903";
}

.icon-chat::before {
  content: "\e904";
}

.icon-lock::before {
  content: "\e917";
}

.icon-media::before {
  content: "\e91b";
}

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

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

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

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

[class^=icon-], [class*=" icon-"] {
  font-family: "icomoon" !important;
  font-size: 25px;
  line-height: 25px;
}

.icons-wrap li a.header-icon-link {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
}
.icons-wrap li a.header-icon-link path {
  fill: #000000;
}

.none, .hidden, .is-hidden {
  display: none !important;
  visibility: hidden;
}

.invisible {
  visibility: hidden;
}

.fixed {
  position: fixed;
}

.content-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22em;
  height: 22em;
}

.two-third {
  width: 66%;
}

#spacer {
  display: none;
}

.video-embed-item {
  width: 100%;
}

/* animate.css */
/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Daniel Eden
 */
.animated {
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
}

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  from {
    -webkit-transform: none;
    transform: none;
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes wobble {
  from {
    -webkit-transform: none;
    transform: none;
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
    transform: none;
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
@keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
    transform: none;
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
.flipOutY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }
  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }
  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
@keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}
.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}
.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

.gridGroup {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 200px;
  padding: 0;
}

.gridGroup:first-of-type {
  margin-top: 0;
}

.gridElWrap {
  padding: 0;
  width: 45%;
}

.gridElWrap.odd {
  align-self: flex-start;
}
.gridElWrap.even {
  align-self: flex-end;
}

.gridElWrap.odd .gridEl .gridElDate {
  text-align: left;
}

.gridElWrap.odd .gridElPin {
  right: 15px;
}

.gridEl {
  padding: 0;
  margin-top: 48px;
  padding: 0;
  margin-top: 48px;
  display: grid;
  display: -ms-grid;
  grid-template-columns: 1fr;
  -ms-grid-columns: 1fr;
  grid-column-gap: 0;
  grid-row-gap: 10px;
}

.gridElImage {
  border-radius: 50%;
  width: 100%;
  grid-row: 1;
  -ms-grid-row: 1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.gridElDate {
  margin: 10px 0;
  text-align: right;
  grid-row: 2;
  -ms-grid-row: 2;
}

.gridElYear {
  position: absolute;
  text-align: center;
  padding: 5px;
  margin: 0 0 0 46%;
  background: #FFFFFF;
  z-index: 1;
}

.gridElTitle {
  grid-row: 3;
  -ms-grid-row: 3;
}

.gridElDescription {
  grid-row: 4;
  -ms-grid-row: 4;
}

.gridElPin {
  display: block;
  opacity: 1;
  height: 1px;
  width: calc(50% + 2px);
  background-color: #000000;
}

.bar {
  height: 100%;
  width: 2px;
  border-right: 1px solid #000000;
  position: absolute;
  left: 50%;
  top: 40px;
}

.gridElDate, .gridElYear {
  text-align: left;
}

.revealOnScroll {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}

.links dl {
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.links dt, .links dd {
  min-height: 50px;
  border-bottom: 2px solid #EBEBEB;
  padding: 10px 0;
}

#main-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 0.3fr 1920px 0.7fr;
  grid-template-columns: 0.3fr 1920px 0.7fr;
  grid-template-areas: "spacer-left main-site spacer-right";
  overflow: hidden;
}

#left-spacer {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: spacer-left;
}

#right-spacer {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: spacer-right;
}

#site-wrapper {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: main-site;
  max-width: 1920px;
}

/**
  menu
 */
.menu ul li, .footer-menu ul li {
  display: inline-block;
}
.menu a:hover, .footer-menu a:hover {
  text-decoration: none;
}

.footer-menu ul li {
  margin: 0 0 0 20px;
}

.menu {
  font-family: "HelveticaNeueLTStd-Blk", Helvetica Neue, Arial, sans-serif;
}
.menu li {
  margin: 0 15px 0 0;
}
.menu .main-nav.text-l {
  font-size: 28px;
}
.menu .main-nav li {
  line-height: 0.9em;
}
.menu .main-nav li ul ul {
  display: none !important;
}
.menu .sub-nav {
  max-width: 735px;
  visibility: visible;
}
.menu .sub-nav li {
  font-size: 20px;
  line-height: 14px;
}
.menu .sub-nav--mobile {
  display: none;
}
.menu .sub-nav.text-m {
  font-size: 20px;
  line-height: 19px;
}
.menu.text-l {
  margin: 0;
}
.menu--mobile-visible {
  position: fixed;
  z-index: 3;
}
.menu--mobile-visible ul li {
  display: block;
}

.footer-menu li {
  margin: 0 20px 0 0;
}
.footer-menu li a {
  font-family: "HelveticaNeueLTStd-Blk", Helvetica Neue, Arial, sans-serif;
}

.icon-set li {
  display: inline-block;
}
.icon-set li a.header-icon-link {
  display: inline-block;
  width: 25px;
  height: 25px;
  background-size: contain;
}

.mobile-icons {
  display: none;
}

.mobile--navigation {
  width: 100vw;
  z-index: 10;
  -webkit-transition: margin 0.7s ease-out;
  -moz-transition: margin 0.7s ease-out;
  -o-transition: margin 0.7s ease-out;
  transition: margin 0.7s ease-out;
}
.mobile--navigation.scrolled {
  margin-top: -100px;
}
.mobile--navigation.scrollback {
  position: fixed;
  margin-top: 0;
  height: 65px;
  background-color: #ffffff;
}
.mobile--navigation.open {
  margin-top: 0;
  height: 100vh;
  background-color: #FFFFFF;
  position: fixed;
}
.mobile--navigation--scroll-wrapper {
  height: auto;
}
.mobile--navigation--grid {
  display: none;
  height: 100vh;
  width: 100vw;
  grid-template-columns: 12.5vw auto 10.8333333333vw;
  grid-template-rows: auto 100px;
  -ms-grid-rows: 92vh 100px;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-items: stretch;
  align-items: stretch;
  grid-template-areas: ". mobile-menu ." ". mobile-meta-nav .";
}
.mobile--navigation--grid.is-ie11, .mobile--navigation--grid.is-edge {
  padding: 0 0 0 45px;
}
.mobile--navigation--grid.open {
  display: grid;
  display: -ms-grid;
  overflow: scroll;
}
.mobile--navigation--main-menu {
  grid-area: mobile-menu;
  font-family: "HelveticaNeueLTStd-Blk", Helvetica Neue, Arial, sans-serif;
  padding: 45px 0 50px 0;
  opacity: 0;
  -webkit-transition: opacity 2s linear 0.2s, padding 0.7s ease-out 0.5s;
  -moz-transition: opacity 2s linear 0.2s, padding 0.7s ease-out 0.5s;
  -o-transition: opacity 2s linear 0.2s, padding 0.7s ease-out 0.5s;
  transition: opacity 2s linear 0.2s, padding 0.7s ease-out 0.5s;
}
.mobile--navigation--main-menu.visible {
  opacity: 1;
  padding: 65px 0 50px 0;
}
.mobile--navigation--main-menu .main-nav.text-l li {
  font-size: 28px;
}
.mobile--navigation--main-menu .sub-nav--mobile {
  display: none;
}
.mobile--navigation--sub-menu {
  margin: 4px 0 10px 0;
}
.mobile--navigation.open {
  display: block;
}

.main-nav.text-l li .mobile--navigation--sub-menu li,
.mobile--navigation--main-menu .main-nav > li > a.active ~ ul li,
.mobile--navigation--main-menu .main-nav > li > a.preview ~ ul li {
  font-size: 18px;
  line-height: 30px;
  margin: 0 0 0 12px;
}

.spacer {
  grid-area: spacer;
  min-height: 50px;
}

.mobile--logo-image {
  cursor: pointer;
  z-index: 9;
}

#mobile--nav-meta {
  grid-area: mobile-meta-nav;
  -ms-grid-row: 2;
}
#mobile--nav-meta li {
  display: inline-block;
}

.mobilenav-header {
  display: none;
}

.mobilenav-header.open {
  height: 100vh;
  width: 100vw;
  background: white;
  position: fixed;
  z-index: 1;
}

.mobilenav-header.scrollback {
  display: block;
  background: #ffffff;
  position: fixed;
  top: 0;
  width: 100vw;
  min-height: 70px;
  z-index: 2;
}

#mobile-menu {
  display: none;
  position: absolute;
  z-index: 9;
}
#mobile-menu.inactive {
  pointer-events: none;
}
#mobile-menu.inactive #mobile-menu-icon {
  pointer-events: all;
}
#mobile-menu .mobile--logo-image-small {
  cursor: pointer;
  z-index: 9;
}
#mobile-menu .logo-text--small {
  font-size: 19px;
  line-height: 0.9;
}

.mobile--logo-image-small, .mobile--logo-name {
  display: none;
}

#mobile-menu-icon {
  width: 32px;
  height: 20px;
  position: absolute;
  right: 20px;
  margin: 17px 0 0 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}

#mobile-menu #mobile-menu-icon span {
  display: block;
  position: absolute;
  height: 4px;
  width: 32px;
  border: none;
  background-color: #000000;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

#mobile-menu #mobile-menu-icon span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#mobile-menu #mobile-menu-icon span:nth-child(2) {
  top: 11px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#mobile-menu #mobile-menu-icon span:nth-child(3) {
  top: 22px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#mobile-menu #mobile-menu-icon.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -8px;
  left: 5px;
}

#mobile-menu #mobile-menu-icon.open span:nth-child(2) {
  opacity: 0;
}

#mobile-menu #mobile-menu-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 15px;
  left: 5px;
}

/**
  header
 */
.logo-image {
  width: 140px;
  padding: 0 0 0 30px;
  position: fixed;
  cursor: pointer;
  z-index: 9;
}

#header-grid {
  height: 100%;
  max-width: 960px;
  margin-left: 180px;
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  -ms-grid-columns: 9fr 4fr;
  -ms-grid-column-span: 9;
  -ms-grid-rows: 390px 60px;
  grid-template-rows: auto 60px;
  grid-gap: 10px;
}
#header-grid.homepage {
  height: 100vh;
  -ms-grid-rows: 1fr 10px 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 10px;
}
#header-grid.homepage .header-text--title {
  text-indent: 16%;
  padding-left: 0;
}
#header-grid.homepage .header-text li {
  font-size: 1.375rem;
  font-family: "HelveticaNeueLTStd-Blk", Helvetica Neue, Arial, sans-serif;
  line-height: calc(2em - 4px);
}
#header-grid.homepage .header-text li a {
  background: url(../img/icons/icon_arrow_big.svg) no-repeat right 5px;
  padding: 0 40px 0 0;
}

.navigation-area {
  -ms-grid-column: 1;
  -ms-grid-column-span: 12;
  -ms-grid-row: 1;
  grid-column: 1/13;
  grid-row: 1;
}
.navigation-area a:hover {
  text-decoration: none;
}

.header--lower-white {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-row: 2;
  grid-column: 1/10;
  margin-left: -180px;
  background-color: #FFFFFF;
}

.header-text {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 4;
  grid-column: 1/4;
  grid-row: 2;
  width: 960px;
}
.header-text--title {
  text-indent: -158.3333333333px;
  padding-left: 158.3333333333px;
  margin: 0 0 2.1rem 0;
}
.header-text--teaser {
  text-align: center;
  position: absolute;
  left: calc(50vw - 12.5em);
  bottom: -75px;
}

/**
  homepage
 */
.content--school-grid {
  display: flex;
  flex-wrap: wrap;
}

.content--school-grid--headline {
  margin: 50px 0 70px 0;
}

.dce.homepage-schooltype {
  width: calc(33% - 20px);
  padding: 0 10px;
}
.dce.homepage-schooltype:first-child {
  padding-left: 0;
}
.dce.homepage-schooltype:last-child {
  padding-right: 0;
}
.dce.homepage-schooltype h3 {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
}

/*.dce.wirtschaftsgymnasium {
  width: 33%;
  padding: 0 10px;
  h3 {
    hyphens: auto;
    -ms-hyphens: auto
  }
}

.dce.informatikmittelschule {
  width: 33%;
  padding: 0 10px;
  h3 {
    hyphens: auto;
    -ms-hyphens: auto
  }
}

.dce.handelsmittelschule {
  width: 33%;
  padding: 0 10px;
  h3 {
    hyphens: auto;
    -ms-hyphens: auto
  }
}*/
/**
  content
 */
.content-wrapper {
  padding: 0 0 0 180px;
}

.content-title {
  -ms-grid-column: 1;
  -ms-grid-column-span: 12;
  -ms-grid-row: 1;
  grid-column: 1/13;
  padding: 45px 0 40px 0;
  margin: 0;
}
.content-title h1 {
  text-indent: 0;
  margin: 0;
}
.content-title h1.multiple-lines {
  text-indent: -16.6666666667%;
  margin: 0 0 0 calc(16.6666666667% - 20px);
}
.content-title h1.is-ie11 {
  text-indent: -140px;
  margin: 0 0 0 140px;
}
.content-title ul {
  margin: 20px 0 0 0;
}
.content-title .frame-layout-3 {
  display: inline-block;
}
.content-title.is-ie11 .table-dates dl dd, .content-title.is-ie11 .table-dates tr dd, .content-title.is-edge .table-dates dl dd, .content-title.is-edge .table-dates tr dd {
  -ms-grid-column: 2;
}

.content-grid {
  max-width: 960px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 9fr 3fr;
  -ms-grid-rows: auto 60px;
  grid-template-columns: 9fr 3fr;
  grid-template-rows: auto 60px;
  grid-gap: 10px;
  padding: 100px 10px 100px 0;
}
.content-grid.homepage {
  -ms-grid-columns: inherit;
  -ms-grid-rows: inherit;
  grid-template-rows: inherit;
  padding: 10px;
}
.content-grid.homepage #slider {
  height: auto !important;
}
.content-grid.homepage #slider .lslide {
  height: auto;
}
.content-grid.homepage #slider .lslide a:hover, .content-grid.homepage #slider .lslide p a:hover {
  text-decoration: underline;
  color: #3ea743;
}
.content-grid.homepage #slider h3 {
  margin-top: 0.1em;
}
.content-grid.homepage .lSAction {
  margin: 20px 0 0 0;
}

.content-grid--sidebar {
  max-width: 960px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 9fr 3fr;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
  padding: 0 10px 0 0;
}

.content {
  grid-column: 1/9;
  grid-row: 2;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 10;
}
.content.is-ie11, .content.is-edge {
  padding: 0 20px 0 0;
}
.content.is-ie11 .content--school-grid, .content.is-edge .content--school-grid {
  display: block;
}
.content.is-ie11 .dce.homepage-schooltype, .content.is-edge .dce.homepage-schooltype {
  display: inline-block;
  width: calc(33% - 20px);
  padding: 0 10px;
}
.content.is-ie11 .frame-layout-3 .ce-gallery .ce-row .ce-column, .content.is-edge .frame-layout-3 .ce-gallery .ce-row .ce-column {
  width: 48%;
}
.content.is-ie11 .frame-layout-3 .ce-gallery .ce-row .ce-column figure, .content.is-edge .frame-layout-3 .ce-gallery .ce-row .ce-column figure {
  width: 98%;
}
.content.is-ie11 .impressum .teacher-table dl dd, .content.is-edge .impressum .teacher-table dl dd {
  -ms-grid-column: 2 !important;
}
.content .button {
  max-width: 350px;
  width: fit-content;
  padding-right: 60px;
}
.content .button:hover {
  text-decoration: none;
}

.content-grid--sidebar > .content {
  -ms-grid-column: 1;
  -ms-grid-row: 2;
  -ms-grid-column-span: 1;
}

.sidebar {
  grid-column: 10/13;
  -ms-grid-column: 2;
  -ms-grid-row: 2;
}
.sidebar h2 {
  margin: 0 0 20px 0;
}
.sidebar li {
  width: calc(100% - 20px);
}
.sidebar .button {
  margin: 0 -10px 10px -10px;
}
.sidebar .frame-ruler-before {
  border-left: 1px solid;
  margin: 50px 0 0 -10px;
  padding: 0 10px;
}
.sidebar .frame-ruler-before:first-child {
  margin: 0 0 0 -10px;
}
.sidebar .frame-ruler-before h2 {
  margin: 0;
}
.sidebar .frame-ruler-before li {
  margin: 0 0 0px -10px;
  padding: 0 0 28px 10px;
  border: none;
  cursor: pointer;
  width: 100%;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: right top;
}
.sidebar .frame-ruler-before li.download, .sidebar .frame-ruler-before li .sidebar h2:contains("Dokumente") a {
  background-image: url(../img/icons/icon_link_download.svg);
}
.sidebar .frame-ruler-before li.external {
  background-image: url(../img/icons/icon_link_extern.svg);
}
.sidebar .frame-ruler-before li.external-important {
  background-image: url(../img/icons/icon_link_extern.svg) !important;
}
.sidebar .frame-ruler-before li.internal {
  background-image: url(../img/icons/icon_link_arrow.svg);
}
.sidebar .frame-ruler-before li:first-child {
  margin: 10px 0 0 -10px;
}
.sidebar .frame-ruler-before li:last-child {
  padding: 0 0 0 10px;
}
.sidebar .frame-default {
  margin: 50px 0 0 0;
}
.sidebar .frame-default:first-child {
  margin: 0;
}
.sidebar .ce-uploads li a:hover {
  text-decoration: none;
  color: #000000 !important;
}

.content .ce-bodytext ul {
  list-style-type: none;
}
.content .ce-bodytext ul li {
  margin: 0 0 15px 20px;
}
.content .ce-bodytext ul li:before {
  content: "—";
  position: absolute;
  margin-left: -20px;
}
.content .ce-bodytext ul li.internal:before {
  content: "";
}

.content .ce-bodytext ol {
  list-style: decimal;
  padding-left: 2em;
}

.news--teaser-circle {
  height: 22em;
  width: 22em;
  border-radius: 50%;
  background-color: #3EA743;
  z-index: 9;
  display: none;
}
.news--teaser-circle.active {
  display: inline-block;
}
.news--teaser-circle .content-centered div {
  padding: 0 50px;
}
.news--teaser-circle p {
  font-size: 1rem;
}
.news--teaser-circle p strong {
  font-size: 1.375rem;
}

.row.people .person {
  width: 49%;
  display: inline-block;
  vertical-align: top;
}
.row.people .person .person-image-wrapper {
  border-radius: 50%;
  width: 250px;
  height: 250px;
  overflow: hidden;
}
.row.people .person .person-image-wrapper img {
  margin: -30px 0 0 0;
}
.row.people .person .description {
  margin: 20px 30px;
}
.row.people .person .description p {
  margin: 0;
}
.row.people .person .description a.mail::before {
  content: "\e918";
}
.row.people .person .description a.mail {
  font-size: 30px;
}
.row.people .person .description a.mail:hover {
  text-decoration: none;
}
.row.people .person .name {
  font-family: "HelveticaNeueLTStd-Blk", Helvetica Neue, Arial, sans-serif;
}

.close-search-wrap {
  font-size: 1.75rem;
  width: 45px;
  height: 45px;
  position: fixed;
  cursor: pointer;
  z-index: 11;
  display: none;
}
.close-search-wrap::before {
  content: "\e908";
}
.close-search-wrap.visible {
  display: block;
}

.search-wrap {
  position: fixed;
  top: 0;
  /* left: 0; */
  width: 100%;
  height: 100%;
  padding: 180px 0;
  background-color: #fff;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
}
.search-wrap.visible {
  pointer-events: all;
  opacity: 1;
}
.search-wrap form {
  width: 70vw;
}
.search-wrap .search-content label {
  display: none;
}
.search-wrap .search-content input {
  font-family: "Helvetica Neue", Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1rem;
}
.search-wrap .search-content button {
  background-image: url(../img/icons/icon_link_arrow_white.svg) !important;
}

#searchBox {
  border: none;
  border-bottom: 1px solid;
  width: 100%;
  margin: 50px 0 10px;
  font-size: 1rem;
}

a[href*="sitesearch360.com"] img {
  width: 1px;
}

#ss360-layer {
  padding: 0 !important;
}

.ss360-layer,
a.ss360-layer__heading-anchor {
  color: #000000 !important;
}

#ss360-layer .ss360-ac-c, #ss360-layer .ss360-ac-c--hover:hover, #ss360-layer .ss360-ac-c--hover:focus {
  text-decoration: none;
  color: #3ea743 !important;
}

#ss360-layer .ss360-ac-c:hover, #ss360-layer .ss360-ac-c:focus {
  text-decoration: underline;
  color: #3ea743 !important;
}

.ss360-layer__heading {
  font-size: 1.5em !important;
}

.ss360-suggests {
  box-shadow: none !important;
}

.ss360-suggests__header {
  margin: 0 !important;
  padding: 0 !important;
}

.ss360-suggests__content {
  margin: 0 !important;
  padding: 0 !important;
}

.ss360-suggests__snippet {
  margin: 5px 0 15px 0 !important;
  font-size: 100% !important;
}

form input, form textarea {
  border: none;
  border-bottom: 1px solid;
  width: 100%;
}
form .email-field {
  display: none;
}
form label {
  display: block;
  margin: 20px 0 0 0;
}

.content table, .content .contenttable, .content-title table, .content-title .contenttable, .teacher-table, .table-dates {
  width: 100%;
  margin: 20px 0 10px 0;
}
.content table dl, .content .contenttable dl, .content-title table dl, .content-title .contenttable dl, .teacher-table dl, .table-dates dl {
  display: grid;
  display: -ms-grid;
  grid-template-columns: 1fr 1.2fr 50px;
  -ms-grid-columns: 1fr 1.2fr 50px;
}
.content table tr, .content table dl, .content .contenttable tr, .content .contenttable dl, .content-title table tr, .content-title table dl, .content-title .contenttable tr, .content-title .contenttable dl, .teacher-table tr, .teacher-table dl, .table-dates tr, .table-dates dl {
  min-height: 40px;
  border-top: 1px solid;
}
.content table tr:last-of-type, .content table dl:last-of-type, .content .contenttable tr:last-of-type, .content .contenttable dl:last-of-type, .content-title table tr:last-of-type, .content-title table dl:last-of-type, .content-title .contenttable tr:last-of-type, .content-title .contenttable dl:last-of-type, .teacher-table tr:last-of-type, .teacher-table dl:last-of-type, .table-dates tr:last-of-type, .table-dates dl:last-of-type {
  border-bottom: 1px solid;
}
.content table tr td, .content table tr dt, .content table tr dd, .content table dl td, .content table dl dt, .content table dl dd, .content .contenttable tr td, .content .contenttable tr dt, .content .contenttable tr dd, .content .contenttable dl td, .content .contenttable dl dt, .content .contenttable dl dd, .content-title table tr td, .content-title table tr dt, .content-title table tr dd, .content-title table dl td, .content-title table dl dt, .content-title table dl dd, .content-title .contenttable tr td, .content-title .contenttable tr dt, .content-title .contenttable tr dd, .content-title .contenttable dl td, .content-title .contenttable dl dt, .content-title .contenttable dl dd, .teacher-table tr td, .teacher-table tr dt, .teacher-table tr dd, .teacher-table dl td, .teacher-table dl dt, .teacher-table dl dd, .table-dates tr td, .table-dates tr dt, .table-dates tr dd, .table-dates dl td, .table-dates dl dt, .table-dates dl dd {
  padding: 10px 0;
}
.content table tr dt, .content table dl dt, .content .contenttable tr dt, .content .contenttable dl dt, .content-title table tr dt, .content-title table dl dt, .content-title .contenttable tr dt, .content-title .contenttable dl dt, .teacher-table tr dt, .teacher-table dl dt, .table-dates tr dt, .table-dates dl dt {
  display: inline-block;
  margin: 0 50px 0 0;
}
.content table tr dt:nth-child(1), .content table dl dt:nth-child(1), .content .contenttable tr dt:nth-child(1), .content .contenttable dl dt:nth-child(1), .content-title table tr dt:nth-child(1), .content-title table dl dt:nth-child(1), .content-title .contenttable tr dt:nth-child(1), .content-title .contenttable dl dt:nth-child(1), .teacher-table tr dt:nth-child(1), .teacher-table dl dt:nth-child(1), .table-dates tr dt:nth-child(1), .table-dates dl dt:nth-child(1) {
  -ms-grid-column: 1;
}
.content table tr dt:nth-child(2), .content table dl dt:nth-child(2), .content .contenttable tr dt:nth-child(2), .content .contenttable dl dt:nth-child(2), .content-title table tr dt:nth-child(2), .content-title table dl dt:nth-child(2), .content-title .contenttable tr dt:nth-child(2), .content-title .contenttable dl dt:nth-child(2), .teacher-table tr dt:nth-child(2), .teacher-table dl dt:nth-child(2), .table-dates tr dt:nth-child(2), .table-dates dl dt:nth-child(2) {
  -ms-grid-column: 2;
}
.content table tr dd, .content table dl dd, .content .contenttable tr dd, .content .contenttable dl dd, .content-title table tr dd, .content-title table dl dd, .content-title .contenttable tr dd, .content-title .contenttable dl dd, .teacher-table tr dd, .teacher-table dl dd, .table-dates tr dd, .table-dates dl dd {
  font-family: "HelveticaNeueLTStd-Blk", Helvetica Neue, Arial, sans-serif;
  float: right;
  margin: 0;
  -ms-grid-column: 3;
}
.content table tr dd .time, .content table dl dd .time, .content .contenttable tr dd .time, .content .contenttable dl dd .time, .content-title table tr dd .time, .content-title table dl dd .time, .content-title .contenttable tr dd .time, .content-title .contenttable dl dd .time, .teacher-table tr dd .time, .teacher-table dl dd .time, .table-dates tr dd .time, .table-dates dl dd .time {
  font-family: "Helvetica Neue", Helvetica Neue, Helvetica, Arial, sans-serif;
}
.content table tr dd a.mail.icon-large:before, .content table dl dd a.mail.icon-large:before, .content .contenttable tr dd a.mail.icon-large:before, .content .contenttable dl dd a.mail.icon-large:before, .content-title table tr dd a.mail.icon-large:before, .content-title table dl dd a.mail.icon-large:before, .content-title .contenttable tr dd a.mail.icon-large:before, .content-title .contenttable dl dd a.mail.icon-large:before, .teacher-table tr dd a.mail.icon-large:before, .teacher-table dl dd a.mail.icon-large:before, .table-dates tr dd a.mail.icon-large:before, .table-dates dl dd a.mail.icon-large:before {
  visibility: visible;
  font-family: "icomoon";
  font-size: 30px;
  display: inline-block;
  content: "\e918";
}
.teacher-table {
  overflow: hidden;
}
.teacher-table dl dt:first-child {
  font-family: "HelveticaNeueLTStd-Blk", Helvetica Neue, Arial, sans-serif;
}

.table-dates dl {
  height: inherit;
}

.content .frame-layout-2 ul.ce-uploads li, .content-title .frame-layout-2 ul.ce-uploads li {
  border-top: 1px solid;
  padding: 10px 0;
}
.content .frame-layout-2 ul.ce-uploads li:last-of-type, .content-title .frame-layout-2 ul.ce-uploads li:last-of-type {
  border-bottom: 1px solid;
}
.content .frame-layout-2 ul.ce-uploads li div, .content-title .frame-layout-2 ul.ce-uploads li div {
  display: grid;
  display: -ms-grid;
  grid-template-columns: 1fr 80px 50px;
  background-image: url(../img/icons/icon_link_download.svg);
  background-repeat: no-repeat;
  background-position: right 6px top;
}

/**
  content grids
 */
#content--image-gallery div {
  display: inline-block;
  width: 48%;
}
#content--image-gallery div.fullwidth {
  width: 100%;
}

#content--footer-grid, .grid--four-col {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr;
  grid-template-columns: repeat(4, 1fr);
  -ms-grid-rows: 1fr;
  grid-template-rows: 1fr;
  grid-gap: 10px;
}
#content--footer-grid lSSlideWrappera:hover, .grid--four-col lSSlideWrappera:hover {
  text-decoration: none;
  color: #000000;
}
#content--footer-grid p a:hover, .grid--four-col p a:hover {
  color: #3ea743;
  text-decoration: underline;
}

#content--footer-grid > *:nth-child(1), .grid--four-col > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
#content--footer-grid > *:nth-child(1) p:first-line, .grid--four-col > *:nth-child(1) p:first-line {
  font-family: "HelveticaNeueLTStd-Blk", Helvetica Neue, Arial, sans-serif;
}

#content--footer-grid > *:nth-child(2), .grid--four-col > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

#content--footer-grid > *:nth-child(3), .grid--four-col > *:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 6;
  -ms-grid-column-span: 2;
  grid-column: 4;
  grid-column-end: 6;
}

#content--footer-grid > *:nth-child(4), .grid--four-col > *:nth-child(4) {
  -ms-grid-row: 1;
  -ms-grid-column: 7;
}

/**
  elements
 */
section {
  padding: 0 0 100px 0;
}

.button {
  text-align: left;
}
button, html [type=button], [type=reset], [type=submit] {
  -webkit-appearance: button;
  display: block;
  color: #ffffff;
  height: 40px;
  width: 240px;
  text-align: left;
  font-family: "HelveticaNeueLTStd-Blk", Helvetica Neue, Arial, sans-serif;
  cursor: pointer;
  border: none;
  background-image: url(../img/icons/icon_link_arrow_white.svg);
  background-repeat: no-repeat;
  background-position: right 10px top 12px;
}

.teacher-filter [value^=Suchen] {
  display: none;
}
.teacher-filter option {
  background-color: #e30059 !important;
  color: #FFFFFF;
}

button, select {
  text-transform: none;
  display: block;
  color: #ffffff;
  height: 40px;
  width: 240px;
  text-align: left;
  font-family: "HelveticaNeueLTStd-Blk", Helvetica Neue, Arial, sans-serif;
  cursor: pointer;
  border: none;
}
button:hover, select:hover {
  background-color: #000000 !important;
  color: #FFFFFF;
}

select {
  margin: 50px 0;
}

iframe {
  margin: 50px 0;
}

.powermail_fieldset, #mform {
  padding: 0;
}
.powermail_fieldset label, #mform label {
  display: none;
}
.powermail_fieldset input, .powermail_fieldset textarea, #mform input, #mform textarea {
  font-family: "Helvetica Neue", Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  margin: 10px 0;
}
.powermail_fieldset .powermail_submit, #mform .powermail_submit {
  background-image: url(../img/icons/icon_link_arrow_white.svg) !important;
  font-family: "HelveticaNeueLTStd-Blk", Helvetica Neue, Arial, sans-serif;
}
.powermail_fieldset .powermail_submit:hover, #mform .powermail_submit:hover {
  background-color: #000000 !important;
}

.content-title .frame-layout-3 .ce-uploads {
  display: flex;
  flex-wrap: wrap;
}
.content-title .frame-layout-3 .ce-uploads li {
  display: inline-block;
  float: left;
  width: 260px;
  height: auto;
  margin: 0 50px 50px 0;
}
.content-title .frame-layout-3 .ce-uploads li img {
  box-shadow: 3px 3px 10px #c4c4c4;
}
.content-title .frame-layout-3 .ce-uploads li .ce-uploads-fileName {
  display: block;
}
.content-title .frame-layout-3 .ce-uploads li .ce-uploads-description {
  display: block;
  height: 50px !important;
  overflow: visible;
}
.content-title .frame-layout-3 .ce-uploads li a {
  font-family: "HelveticaNeueLTStd-Blk", Helvetica Neue, Arial, sans-serif;
  color: black !important;
}
.content-title .frame-layout-3 .ce-uploads li a:hover {
  text-decoration: none;
}
.content-title .frame-layout-3 .ce-uploads li a span.ce-uploads-fileName {
  margin: 20px 0 0 0;
}

.ce-gallery .ce-row .ce-column {
  width: auto;
}
.ce-gallery .ce-row .ce-column figure {
  margin: 0;
}

.frame-layout-1 .ce-gallery .ce-row .ce-column figure {
  margin: 0 0 10px 0;
}

.frame-layout-2 .ce-gallery .ce-row .ce-column figure {
  margin: 0 10px 10px 0;
}

.frame-layout-3 .ce-gallery .ce-row .ce-column {
  display: inline-block;
}
.frame-layout-3 .ce-gallery .ce-row .ce-column figure {
  margin: 0 6px 6px 0;
}

.accordion {
  margin: 50px 0;
}

.accordion-item-title {
  background-image: url(../img/icons/icon_plus.svg);
  background-size: 15px;
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.accordion-item-title.open {
  background-image: url(../img/icons/icon_minus.svg);
}

.accordion-item-text ol {
  list-style: decimal;
  padding-left: 2em;
}
.accordion-item-text .pie_description {
  display: inline-block;
  float: inherit;
  width: 49%;
}
.accordion-item-text .pie_description li {
  display: inline-block;
  float: left;
  margin: 0 0 20px 0;
}
.accordion-item-text .pie_text {
  font-family: "HelveticaNeueLTStd-Blk", Helvetica Neue, Arial, sans-serif;
  text-align: left;
}
.accordion-item-text .pie_description .pie_data {
  width: calc(100% - 40px);
  float: right;
  line-height: 23px;
}
.accordion-item-text .pie_description:first-of-type li:first-of-type .quadrat {
  opacity: 1;
}
.accordion-item-text .pie_description .quadrat {
  width: 30px;
  height: 20px;
  float: left;
}
.accordion-item-text .pie_description:nth-child(3) {
  grid-column: 2;
  -ms-grid-column: 2;
}

.kuchen_wrapper {
  text-align: center;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 1;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  padding: 25px 0 50px 0;
}

.accordion-item {
  margin: 0 0 10px 0;
}
.accordion-item:last-child {
  border-bottom: 1px solid;
  padding: 0 0 10px 0;
}

.accordion-item-title {
  cursor: pointer;
  padding: 12px 0 3px;
  border-top: 1px solid;
}
.accordion-item-title h2, .accordion-item-title h3 {
  font-size: 1rem;
  margin: 0;
}

.frame-layout-1 .ce-bodytext {
  width: 67%;
}

.ksh-event-plugin form input {
  width: auto;
}
.ksh-event-plugin form label {
  display: inline;
}
.ksh-event-plugin form .ksh-event-form-element label {
  display: none;
}
.ksh-event-plugin form .ksh-event-form-element input {
  width: 240px;
}
.ksh-event-plugin .error {
  border-left: 2px solid #009ee0;
  padding-left: 10px !important;
}

.ksh-event-meta-date {
  display: block;
  margin: 20px 0 10px 0;
}

.ksh-event-meta-time {
  margin: 0 0 10px 0;
}

.ksh-event-ticket-wrapper {
  margin: 30px 0 30px 0;
}

.ksh-event-ticket-radio {
  margin: 0 0 0 10px;
}

.ksh-event-form-element {
  margin-bottom: 30px;
}

header .header-content {
  display: block;
  height: 450px;
  background-image: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;
  padding: 65px 0 0;
}
header .header-content.homepage {
  height: 100vh;
  background-image: url("../img/startseite.png");
}

footer {
  border-top: 1px solid black;
  padding: 6px 0 0 0;
}

@supports (perspective: 1px) and (not (-webkit-overflow-scrolling: touch)) {
  /* ... parallax styles ... */
}
@media only screen and (max-width: 1920px) {
  #main-wrapper {
    -ms-grid-columns: auto;
    grid-template-columns: auto;
    grid-template-areas: "main-site";
  }

  #left-spacer, #right-spacer {
    display: none;
  }

  #site-wrapper {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
}
@media screen and (min-width: 1100px) and (max-width: 1350px) {
  .news--teaser-circle.header-text--teaser.active {
    left: calc(81vw - 12.5em);
  }
}
@media screen and (max-width: 1100px) {
  .content-title .frame-layout-3 .ce-uploads li {
    width: 40%;
    max-width: 260px;
    margin: 0 10% 10% 0;
  }

  .content.is-ie11 {
    padding: 0 100px 0 0;
  }
}
@media screen and (min-width: 740px) and (max-width: 1100px) {
  #header-grid.homepage {
    -ms-grid-rows: 250px 10px 1fr;
    grid-template-rows: 250px 1fr;
  }

  header .header-content {
    background-size: 530px;
  }
  header .header-content.informatik {
    background-size: 300px !important;
  }
}
@media screen and (max-width: 940px) {
  .row.people .person .person-image-wrapper {
    width: 180px;
    height: 180px;
  }

  .content-title .is-ie11.multiple-lines {
    margin: 0 0 0 140px;
  }

  .sidebar {
    grid-column: 9/13;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
  }
  .sidebar .frame-default:first-child {
    margin: 0 0 0 10px;
  }
  .sidebar .frame-ruler-before {
    margin: 50px 0 0 0;
    width: calc(100% - 40px);
  }
  .sidebar .frame-ruler-before:first-child {
    margin: 0;
  }
}
@media screen and (max-width: 888px) {
  .gridElDate, .gridElYear {
    text-align: left !important;
  }

  .gridElWrap {
    margin-top: 0 !important;
  }

  .gridElWrap:nth-of-type(2n+1) .gridEl {
    margin-top: 20px !important;
  }

  .lslide h3.text-m {
    hyphens: auto;
  }

  #content--footer-grid, .grid--four-col {
    grid-template-columns: 1fr;
  }

  .footer-menu ul li {
    margin: 0 20px 0 0;
  }
}
@media screen and (min-width: 740px) and (max-width: 768px) {
  .sliderWrap {
    width: 100% !important;
  }
}
@media screen and (max-width: 740px) {
  a:hover, p a:hover {
    text-decoration: none !important;
  }

  a.header-icon-link,
a.header-icon-mail {
    font-family: "HelveticaNeueLTStd-Blk", Helvetica Neue, Arial, sans-serif !important;
    font-weight: normal !important;
    font-size: 16px;
    margin-right: 5px;
  }

  a.header-icon-link, a.header-icon-mail, a[class*=" icon-"]:hover, a[class^=icon-]:hover,
#orange .header-icon-link:hover:before, #orange [class^=icon-]:hover:before, #orange [class*=" icon-"]:hover:before,
#blue .header-icon-link:hover:before, #blue [class^=icon-]:hover:before, #blue [class*=" icon-"]:hover:before,
#violet .header-icon-link:hover:before, #violet [class^=icon-]:hover:before, #violet [class*=" icon-"]:hover:before,
#magenta .header-icon-link:hover:before, #magenta [class^=icon-]:hover:before, #magenta [class*=" icon-"]:hover:before,
#green .header-icon-link:hover:before, #green [class^=icon-]:hover:before, #green [class*=" icon-"]:hover:before {
    color: #000000 !important;
  }

  header .header-content, header .header-content.homepage {
    background-image: url("../img/startseite_mobile.png");
    height: 155px;
  }
  header .header-content.homepage, header .header-content.homepage.homepage {
    height: inherit;
  }

  #blue header .header-content {
    background-image: url(../img/agenda_mobile.png);
  }

  #violet header .header-content {
    background-image: url(../img/menschen_mobile.png);
  }
  #violet.img-gymnasium header .header-content {
    background-image: url(../img/gymnasium_mobile.png);
  }
  #violet.img-ppp header .header-content {
    background-image: url(../img/ppp_mobile.png);
  }
  #violet.img-wirtschaftsgymnasium header .header-content {
    background-image: url(../img/wirtschaftsgymnasium_mobile.png);
  }
  #violet.img-handelsmittelschule header .header-content {
    background-image: url(../img/handelsmittelschule_mobile.png);
  }
  #violet.img-informatik header .header-content {
    background-image: url(../img/informatikmittelschule_mobile.png);
  }

  #green header .header-content {
    background-image: url(../img/ueber_uns_mobile.png);
  }

  #orange header .header-content {
    background-image: url(../img/ueber_uns_mobile.png);
  }

  #pink header .header-content {
    background-image: url(../img/menschen_mobile.png);
  }

  .content h1, .content-title h1, .content-title h1.multiple-lines {
    font-size: 28px !important;
  }

  .content-title h1.multiple-lines.is-ie11 {
    margin: 0 0 0 70px;
    text-indent: -70px;
  }

  .home-title, header h1 {
    font-size: 40px !important;
  }

  .text-xl, h1 {
    font-size: 28px !important;
  }

  .text-l, h2 {
    font-size: 24px !important;
  }

  .text-m, h3 {
    font-size: 20px;
    line-height: 0.9em;
    font-family: "Helvetica Neue", Helvetica Neue, Helvetica, Arial, sans-serif;
  }

  .text-s, h4 body {
    font-size: 1rem;
    line-height: 0.9em;
    font-family: "Helvetica Neue", Helvetica Neue, Helvetica, Arial, sans-serif, Arial, sans-serif;
    font-weight: 400;
  }

  .logo-image {
    display: none;
  }

  .logo-text--small {
    grid-area: logo-text;
    font-size: 19px !important;
  }

  .logo-text {
    display: none;
  }

  .mobile--logo-image-small, .mobile--logo-name {
    display: inline-block;
    list-style-type: none;
  }

  .mobile--logo-name {
    -ms-grid-column: 2;
    padding: 7px 0;
  }
  .mobile--logo-name a:hover {
    text-decoration: none;
  }

  .mobile--logo-image-small img {
    height: 45px;
    width: auto;
  }

  #mobile-menu-icon {
    -ms-grid-column: 3;
  }

  .mobile--navigation--grid {
    grid-template-rows: auto 110px;
  }

  .mobile--navigation--scroll-wrapper {
    grid-column: 2;
    -ms-grid-column: 1;
  }

  .mobile--navigation--sub-menu li {
    line-height: 0.9em !important;
    margin: 0 0 20px 12px !important;
  }

  .mobile--navigation.scrolled {
    margin-top: inherit !important;
  }

  #mobile-menu {
    width: calc(100vw - 20px);
    padding: 10px;
    left: 0;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 45px 1fr 60px;
    grid-template-columns: 45px 1fr 60px;
    grid-template-rows: 45px;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    justify-items: stretch;
    align-items: stretch;
  }

  .navigation-area {
    display: none;
  }

  .navigation-area--grid {
    display: none;
  }

  .menu {
    opacity: 0;
    grid-area: menu;
  }
  .menu--mobile-visible {
    opacity: 1;
  }
  .menu .sub-nav {
    display: none;
  }
  .menu .sub-nav--mobile {
    display: block;
    margin: 0 0 10px 10px;
  }

  .mobile-icons {
    padding: 50px 0;
  }

  .icon-set {
    z-index: 2;
    margin: 50px 0;
    opacity: 0;
    grid-area: icons;
  }
  .icon-set--mobile-visible {
    opacity: 1;
    z-index: 3;
    margin: 0;
  }

  .spacer {
    grid-area: spacer;
    min-height: 50px;
    display: block;
  }

  #header-grid {
    margin-left: 0;
    height: calc(100% - 10px);
    max-width: 100vw;
    grid-template-rows: calc(100% - 30px) 30px;
  }
  #header-grid.homepage {
    -ms-grid-columns: 16.6666666667% auto 16.6666666667%;
    grid-template-columns: 16.6666666667% auto 16.6666666667%;
    grid-template-rows: 50px 1fr;
  }
  #header-grid.homepage--mobile-visible {
    grid-template-columns: 16.6666666667% auto;
    grid-template-areas: "logo-image logo-text" "logo-image ." "logo-image .";
    height: 100vh;
  }

  #header-grid.header-grid--mobile-visible {
    height: 100vh;
    grid-template-columns: 16.6666666667% 1fr;
  }

  #header-grid.homepage .header-text .header-text--title {
    text-indent: 16.6666666667vw;
    padding: 0 10px;
    margin: 0 0 25px 0;
  }
  #header-grid.homepage .header-text ul {
    margin: 0 0 0 30px;
  }
  #header-grid.homepage .header-text ul li {
    font-size: 18px;
  }
  #header-grid.homepage .header-text ul li a {
    background: url(../img/icons/icon_arrow_big.svg) no-repeat top right 5px;
  }

  .schools {
    margin: 0 0 0 8.3333333333vw;
  }

  .content-wrapper {
    padding: 0;
  }

  .content-title {
    -ms-grid-column: 1;
    -ms-grid-column-span: 9;
    -ms-grid-row: 1;
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    max-width: calc(100vw - 20px);
    padding: 20px 0 50px;
  }
  .content-title h1 {
    margin: 0;
  }
  .content-title h1.multiple-lines {
    margin: 0 10px 0 calc(20% - 10px);
  }

  .content-grid--sidebar, .content-grid {
    width: 100vw;
    padding: 0 10px;
    display: block;
  }

  .content-grid--sidebar > .content {
    -ms-grid-column: 1;
    -ms-grid-row: 2;
  }

  .content-grid.homepage {
    width: calc(100vw - 20px);
  }
  .content-grid.homepage .content {
    width: calc(100vw - 20px);
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    /* Horizontal scrollen und Snap Points streng einhalten */
  }
  .content-grid.homepage .content section {
    padding: 0 0 50px 0;
  }
  .content-grid.homepage .content section .sliderWrap {
    width: 100% !important;
  }

  #content--footer-grid, .grid--four-col {
    display: block;
    padding: 0 0 20px 0;
  }

  .content {
    grid-row: 2;
    grid-column: 1;
    width: calc(100vw - 20px);
  }

  .accordion {
    width: calc(100vw - 20px);
  }

  .accordion-item-content {
    padding: 0;
  }

  .accordion-item-text .pie_description {
    width: 100%;
  }
  .accordion-item-text .pie_description li {
    display: flex;
    padding: 0;
  }

  #content--news-grid, #content--image-gallery {
    width: calc(100vw - 20px);
  }

  .sidebar {
    grid-row: 3;
    grid-column: 1;
    margin: 50px 0 0 0;
    padding: 0 0 50px 0;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
  }
  .sidebar h2 {
    font-size: 16px;
  }
  .sidebar li {
    width: calc(100% - 50px);
  }

  section {
    padding: 0 30px 50px 0;
  }

  .two-third {
    width: 66vw;
  }

  .button {
    display: inline-block;
    padding: 10px 0 10px 10px;
    border: none;
    cursor: pointer;
    width: calc(100% - 35px);
    margin: 0 0 10px 0;
  }

  #orange .button, #orange select, #orange button, #orange html [type=button], #orange [type=reset], #orange [type=submit] {
    width: 100% !important;
  }

  .sidebar--link-section {
    border-left: 2px solid;
    margin: 50px 0 0 0;
    padding: 0 10px;
    width: calc(100% - 40px);
  }
  .sidebar--link-section li {
    margin: 0;
    padding: 10px 0 10px 0;
  }

  .footer-menu ul li {
    margin: 0 20px 0 0;
  }

  .sidebar ul .internal-link, .sidebar ul a[href*="ksh.ch"], .sidebar ul a:not([href^=http]) {
    background-position: right 10px top 12px;
  }

  .sidebar ul .external-link, .sidebar ul .external-link-new-window, .sidebar ul a[href^=http], .sidebar ul a[target=_blank] {
    background-position: right 20px top 10px;
  }

  .sidebar ul a[href*=".pdf"], .sidebar ul a[href*=".doc"], .sidebar ul a[href*=".docx"], .sidebar ul a[href*=".xls"], .sidebar ul a[href*=".xlsx"], .sidebar ul a[href*=".ppt"], .sidebar ul a[href*=".pptx"], .sidebar ul a[href*=".gif"], .sidebar ul a[href*=".png"], .sidebar ul a[href*=".jpg"], .sidebar ul a[href*=".jpeg"], .sidebar ul a[href*=".zip"] {
    background-position: right 20px top 10px;
  }
  .sidebar ul a[href*=".pdf"]:hover, .sidebar ul a[href*=".doc"]:hover, .sidebar ul a[href*=".docx"]:hover, .sidebar ul a[href*=".xls"]:hover, .sidebar ul a[href*=".xlsx"]:hover, .sidebar ul a[href*=".ppt"]:hover, .sidebar ul a[href*=".pptx"]:hover, .sidebar ul a[href*=".gif"]:hover, .sidebar ul a[href*=".png"]:hover, .sidebar ul a[href*=".jpg"]:hover, .sidebar ul a[href*=".jpeg"]:hover, .sidebar ul a[href*=".zip"]:hover {
    background-position: right 20px top 14px;
  }

  .sidebar ul .internal-link.button, .sidebar ul a[href*="ksh.ch"].button, .sidebar ul a:not([href^=http]).button {
    width: calc(100vw - 60px);
  }

  .menu a.orange:hover, .mobile--navigation--main-menu a.orange:hover, #orange .menu a.orange:hover, #blue .menu a.orange:hover, #violet .menu a.orange:hover, #green .menu a.orange:hover, #orange .content .footer-menu a.orange:hover, #orange .content .footer-menu a.orange.preview, #blue .content .footer-menu a.orange:hover, #blue .content .footer-menu a.orange.preview, #violet .content .footer-menu a.orange:hover, #green .content .footer-menu a.orange:hover {
    text-decoration: none !important;
  }

  [class^=icon-], [class*=" icon-"] {
    font-family: "icomoon" !important;
    font-size: 35px;
    line-height: inherit;
    margin: 0 15px 0 0;
  }

  .search-wrap {
    padding: 50px 0;
    left: 0;
    z-index: 0;
  }

  .search-wrap form {
    width: auto;
    padding: 0 50px 0 12.5vw;
  }

  .close-search-wrap {
    display: none !important;
  }

  .dce.homepage-schooltype {
    padding: 0;
    width: 100%;
  }
  .dce.homepage-schooltype img {
    max-width: 400px;
    transform: translateX(10vw);
    margin: 50px 0 0 0;
  }

  /*

  .dce.wirtschaftsgymnasium {
    margin: 0 0 50px 0;
    padding: 0 30px;
    width: 100%;
  }

  .dce.informatikmittelschule {
    margin: 0 0 50px 0;
    padding: 0 30px;
    width: 100%;
  }

  .dce.handelsmittelschule {
    padding: 0 30px;
    width: 100%;
  }*/
  .is-ie11 {
    -ms-grid-column: 1;
    -ms-grid-row: 2;
    /*.dce.wirtschaftsgymnasium {
      margin: 0 0 50px 0;
      padding: 0 30px;
      width: 100%;
    }

    .dce.informatikmittelschule {
      margin: 0 0 50px 0;
      padding: 0 30px;
      width: 100%;
    }

    .dce.handelsmittelschule {
      padding: 0 30px;
      width: 100%;
    }*/
  }
  .is-ie11 .dce.homepage-schooltype {
    margin: 0 0 50px 0;
    padding: 0 30px;
    width: 100%;
  }
  .is-ie11 .dce.homepage-schooltype img {
    max-width: 400px;
    transform: translateX(10vw);
    margin: 50px 0 0 0;
  }

  .gridElImage {
    width: 70%;
  }

  .gridElWrap {
    width: 100%;
  }

  .gridElDate {
    margin: 10px 0 20px 0;
  }

  .gridElDate, .gridElDescription, .gridElTitle {
    padding: 0 50px 0 10%;
  }

  .gridElYear {
    text-align: right !important;
    display: block;
    position: relative;
    width: auto;
    padding: 0;
    margin: 100px 5% 50px 0;
  }

  .gridGroup {
    position: relative;
    display: block;
  }

  .gridElPin {
    width: calc(80% + 2px);
    position: absolute;
    right: calc(10% - 2px);
  }

  .bar {
    left: 90%;
  }

  .revealOnScroll {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }

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

  .frame-layout-1 .ce-bodytext {
    width: 100%;
  }
}
@media screen and (max-width: 480px) {
  .row.people .person .person-image-wrapper {
    width: 150px;
    height: 150px;
  }

  .content table dl, .content .contenttable dl, .content-title table dl, .content-title .contenttable dl, .teacher-table dl, .table-dates dl {
    display: inline-block;
    grid-template-columns: none;
  }
  .content table tr, .content table dl, .content .contenttable tr, .content .contenttable dl, .content-title table tr, .content-title table dl, .content-title .contenttable tr, .content-title .contenttable dl, .teacher-table tr, .teacher-table dl, .table-dates tr, .table-dates dl {
    height: auto;
  }
  .content table tr dt, .content table dl dt, .content .contenttable tr dt, .content .contenttable dl dt, .content-title table tr dt, .content-title table dl dt, .content-title .contenttable tr dt, .content-title .contenttable dl dt, .teacher-table tr dt, .teacher-table dl dt, .table-dates tr dt, .table-dates dl dt {
    display: inline-block;
    width: 100vw;
    padding: 5px 0 5px 0;
  }
  .content table tr dd, .content table dl dd, .content .contenttable tr dd, .content .contenttable dl dd, .content-title table tr dd, .content-title table dl dd, .content-title .contenttable tr dd, .content-title .contenttable dl dd, .teacher-table tr dd, .teacher-table dl dd, .table-dates tr dd, .table-dates dl dd {
    padding: 0;
  }

  .content table tr dd, .content table dl dd, .content .contenttable tr dd, .content .contenttable dl dd, .content-title table tr dd, .content-title table dl dd, .content-title .contenttable tr dd, .content-title .contenttable dl dd, .teacher-table tr dd, .teacher-table dl dd, .table-dates tr dd, .table-dates dl dd {
    float: left;
  }

  .teacher-table dl dt:first-child {
    font-family: "HelveticaNeueLTStd-Blk", Helvetica Neue, Arial, sans-serif;
  }

  svg#kuchen_kreis {
    width: 90vw;
  }

  .news--teaser-circle.active {
    display: inline-block;
  }

  .news--teaser-circle {
    height: 270px;
    width: 270px;
  }

  .header-text--teaser {
    position: absolute;
    left: 40px;
    bottom: -210px;
    text-align: center;
  }

  .content-centered {
    padding: 30px 0;
    margin: 0 0 0 -20px;
    display: inline-block;
    width: 270px;
    height: auto;
  }

  .news--teaser-circle p strong {
    font-size: 1rem;
  }

  .wirtschaftsgymnasium, .informatikmittelschule, .handelsmittelschule {
    width: 90vw;
  }

  .dce.homepage-schooltype img {
    max-width: 300px;
    transform: translateX(3vw);
  }
}
@media screen and (max-width: 320px) {
  .row.people .person .person-image-wrapper {
    width: 120px;
    height: 120px;
  }
}
@media screen and (max-width: 480px) {
  .content-grid.homepage.active-news-teaser {
    padding: 40px 10px 0 10px;
  }
}

/*# sourceMappingURL=style.css.map */