/* ========================================

Reference

======================================== */
/* 



100% NOT PLAUSIBLE DON'TS
	- !important
	- inline styles in HTML




HOW TO ARRANGE PROPERTIES IN SELECTORS

.selector {
	@includes

	basic arrangment(position/size)

	advanced arrangment(padding/margin)

	basic manipulation (background/color)

	text manipulation (font-size, font-weight)

	advanced manipulation(transforms/transtions/box-shadow)
}



*/
/* ========================================

Imports

======================================== */
/* ========================================

All the variables needed for the project

======================================== */
@font-face {
  font-family: 'clear_sansbold';
  src: url(../fonts/clearsans_bold/clearsans-bold-webfont.woff2) format("woff2"), url(../fonts/clearsans_bold/clearsans-bold-webfont.woff2) format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'clear_sansregular';
  src: url(../fonts/clearsans_regular/clearsans-regular-webfont.woff2) format("woff2"), url(../fonts/clearsans_regular/clearsans-regular-webfont.woff2) format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'jockey_oneregular';
  src: url(../fonts/jockey_regular/jockeyone-regular-webfont.woff2) format("woff2"), url(../fonts/jockey_regular/jockeyone-regular-webfont.woff) format("woff");
  font-weight: normal;
  font-style: normal; }
h1, h2, h4 {
  font-family: 'jockey_oneregular', sans-serif;
  font-weight: normal;
  margin: 0;
  padding: 0; }

p, label, h3 {
  font-family: 'clear_sansregular', sans-serif; }

p, label, .box li {
  font-family: 'clear_sansregular', sans-serif;
  font-size: .8em; }

strong {
  font-family: 'clear_sansbold', sans-serif; }

h4 {
  text-transform: uppercase;
  font-size: 1.3em; }

h3 {
  font-size: 1.4em; }

h2 {
  font-size: 2.2em; }
  h2:nth-of-type(n+2) {
    padding-top: 40px; }

h1 {
  color: white;
  margin: 125px 0 150px 0;
  font-size: 3em;
  animation-name: dropHeader;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-duration: 0.3s; }
  @media only screen and (max-width: 1280px) {
    h1 {
      margin-left: calc(40px/2); } }
  h1 span {
    color: white;
    font-size: 2em;
    line-height: 1; }
@keyframes dropHeader {
  0% {
    transform: translateY(-100%);
    opacity: 0; }
  100% {
    transform: translateY(0);
    opacity: 1; } }
p a {
  display: inline-block;
  color: #4F4F4F;
  text-decoration: none;
  position: relative;
  margin-left: 5px;
  font-weight: bold;
  transition: all 0.15s ease; }
  p a:after {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: -5%;
    width: 110%;
    height: 13px;
    background: #bfbfbf;
    content: '';
    opacity: 1;
    transform: translateY(0);
    transition: all 0.15s ease; }
  p a:hover {
    color: #FFFFFF;
    transition: all 0.15s ease; }
    p a:hover:after {
      background: #df0000 none repeat scroll 0 0;
      height: 26px;
      transform: translateY(-13px);
      transition: all 0.15s ease; }

@media screen and (max-width: 768px) {
  h1 {
    margin-left: calc(40px/2);
    margin-top: 25px;
    margin-bottom: 75px;
    font-size: 40px;
    max-width: 100%; } }
/* ========================================

Resets

======================================== */
ul {
  padding: 0;
  margin: 0;
  list-style: none; }

a {
  text-decoration: none; }

.button {
  padding: 20px 40px !important;
  transition: all 0.2s ease;
  display: inline-block;
  font-family: 'clear_sansbold', sans-serif;
  font-size: 0.8em;
  text-transform: uppercase;
  margin: 20px 0;
  box-shadow: inset 0 0 0 2px #999;
  transition: all 0.2s ease;
  color: #999; }
  .button:hover {
    background: #4F4F4F;
    box-shadow: none;
    color: white; }
  .button--important {
    background: #FF0000; }
    .button--important:hover {
      box-shadow: inset 0 0 0 2px #FF0000;
      color: #FF0000; }
  .button--white {
    box-shadow: inset 0 0 0 2px #FFFFFF;
    color: #FFFFFF; }
    .button--white:hover {
      background: #FFFFFF;
      color: #4F4F4F; }

body {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  background: #4F4F4F;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  min-height: 100vh;
  flex-direction: column; }
  body.opened {
    height: 100%;
    overflow: hidden !important;
    width: 100%;
    position: fixed; }

.overlay {
  position: absolute;
  visibility: hidden;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
  z-index: 50; }
  .overlay.opened {
    visibility: visible;
    cursor: pointer; }

main {
  transition: transform .5s;
  /* ========================================
  
  Backgrounds
  
  ======================================== */
  /* ========================================
  
  General styling
  
  ======================================== */
  background-position: top center;
  background-size: contain;
  flex: 1 1 auto; }
  main.bg--8 {
    background: #000000 url(../img/bg/8.jpg) no-repeat; }
    @media only screen and (max-width: 600px) {
      main.bg--8 {
        background: #000000 url(../img/8-sm.jpg) no-repeat; } }
  main.bg--7 {
    background: #000000 url(../img/bg/7.jpg) no-repeat; }
    @media only screen and (max-width: 600px) {
      main.bg--7 {
        background: #000000 url(../img/7-sm.jpg) no-repeat; } }
  main.bg--6, main.bg--5 {
    background: #000000 url(../img/bg/5-6.jpg) no-repeat; }
    @media only screen and (max-width: 600px) {
      main.bg--6, main.bg--5 {
        background: #000000 url(../img/5-6-sm.jpg) no-repeat; } }
  main.bg--4 {
    background: #000000 url(../img/bg/4.jpg) no-repeat; }
    @media only screen and (max-width: 600px) {
      main.bg--4 {
        background: #000000 url(../img/4-sm.jpg) no-repeat; } }
  main.bg--3 {
    background: #000000 url(../img/bg/3.jpg) no-repeat; }
    @media only screen and (max-width: 600px) {
      main.bg--3 {
        background: #000000 url(../img/3-sm.jpg) no-repeat; } }
  main.bg--2 {
    background: #000000 url(../img/bg/2.jpg) no-repeat; }
    @media only screen and (max-width: 600px) {
      main.bg--2 {
        background: #000000 url(../img/2-sm.jpg) no-repeat; } }
  main.bg--1 {
    background: #000000 url(../img/bg/1.jpg) no-repeat; }
    @media only screen and (max-width: 600px) {
      main.bg--1 {
        background: #000000 url(../img/1-sm.jpg) no-repeat; } }
  main.slideDown {
    transform: translateY(125px) scale(0.95, 0.95); }
  main.slideRight {
    transform: translateX(80%); }

@media screen and (max-width: 768px) {
  main.slideDown {
    transform: translateY(125px); } }
.grid {
  width: 100%;
  margin: 0 auto; }
  .grid--n {
    max-width: 1280px; }
  .grid--sm {
    max-width: calc(1280px - 40px * 2); }

.header {
  font-family: 'clear_sansregular', sans-serif;
  color: #FFFFFF;
  position: relative; }
  .header section {
    padding: 40px 0; }
  .header nav {
    max-width: 960px; }
  .header__languages {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    float: left;
    margin-top: 20px; }
    .header__languages li a {
      color: #FFFFFF; }
      .header__languages li a:before {
        content: '';
        display: block;
        float: left;
        margin: 3px 5px 0 25px;
        width: 25px;
        height: 16px;
        opacity: 0.5; }
    .header__languages li:nth-of-type(1) a:before {
      margin-left: 0;
      background-image: url(../img/languages/cs_outline.svg); }
    .header__languages li:nth-of-type(2) a:before {
      background-image: url(../img/languages/en-outline.svg); }
    .header__languages li:nth-of-type(3) a:before {
      background-image: url(../img/languages/de_outline.svg); }
    .header__languages li.active a:before {
      opacity: 1; }
    .header__languages li.active:nth-of-type(1) a:before {
      margin-left: 0;
      background-image: url(../img/languages/cs.svg); }
    .header__languages li.active:nth-of-type(2) a:before {
      background-image: url(../img/languages/en.svg); }
    .header__languages li.active:nth-of-type(3) a:before {
      background-image: url(../img/languages/de.svg); }
  .header__logo {
    position: absolute;
    left: calc(50% - 90px); }
    .header__logo svg path {
      transition: fill .5s ease; }
    .header__logo:hover svg path:nth-of-type(2) {
      fill: #FF0000;
      transition: fill .5s ease; }
  .header__search {
    float: right;
    background: url(../img/icons/Group4.svg) no-repeat; }
  .header__hamburger {
    display: none;
    float: left;
    background: url(../img/icons/hamburger.svg) no-repeat; }
    .header__hamburger.active {
      background: url(../img/icons/close.svg) no-repeat; }
  .header__search, .header__hamburger {
    width: 25px;
    height: 24px;
    margin-top: 20px;
    transition: all 0.5s ease;
    cursor: pointer; }
  .header nav {
    font-size: 0.95em;
    font-family: 'clear_sansbold', sans-serif; }
    .header nav a {
      display: block; }
    .header nav ul {
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -moz-box-pack: justify;
      box-pack: justify;
      -webkit-justify-content: space-between;
      -moz-justify-content: space-between;
      -ms-justify-content: space-between;
      -o-justify-content: space-between;
      justify-content: space-between;
      -ms-flex-pack: justify;
      text-transform: uppercase; }
      .header nav ul li a {
        color: #FFFFFF;
        text-decoration: none; }

@media screen and (min-width: 1280px) {
  nav {
    margin: 80px auto 100px auto; } }
@media screen and (max-width: 1280px) {
  .header section {
    padding: 40px; }

  nav {
    padding: 0 40px 40px 40px;
    margin: 80px auto 40px auto; } }
@media screen and (min-width: 768px) {
  /* ========================================
  
  Search Bar
  
  ======================================== */
  .search__bar {
    visibility: hidden;
    transform: translateY(-300px);
    transition: all .5s ease;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 100vh;
    background: #4F4F4F; }
    .search__bar input {
      padding-left: 30px;
      margin: 0;
      margin-top: 100px;
      margin-left: calc((100% - 500px) / 2);
      background: none;
      color: rgba(255, 255, 255, 0.75);
      font-size: 24px;
      border: 2px solid rgba(255, 255, 255, 0.25);
      border-radius: 5px;
      width: 500px;
      height: 50px;
      transform: translateY(-50%);
      transition: all .85s ease; }
      .search__bar input:focus {
        outline: none;
        border: 2px solid rgba(255, 255, 255, 0.75); }
    .search__bar button {
      cursor: pointer;
      width: 80px;
      height: 80px;
      border: 0;
      right: calc(50% - 80px - 250px - 50px);
      top: 58px;
      background: url(../img/icons/Group4.svg) no-repeat;
      background-position: center center;
      position: absolute;
      transition: all 0.5s ease; }
      .search__bar button:focus, .search__bar button:active {
        border: 0;
        outline: none; } }
  @media screen and (min-width: 768px) and (min-width: 960px) {
    .search__bar span {
      position: absolute;
      width: 25px;
      height: 25px;
      top: 87px;
      right: 50px;
      background: url(../img/icons/close.svg) no-repeat;
      cursor: pointer; } }

@media screen and (min-width: 768px) {
  .active {
    visibility: visible;
    transform: translateY(0);
    transition: all .5s ease; } }
@media screen and (max-width: 768px) {
  .header {
    height: 100px; }
    .header__languages {
      display: none; }
    .header__hamburger {
      display: block; }
    .header__logo svg {
      transform: scale(0.8, 0.8); }
    .header nav {
      display: none; }
    .header section {
      padding: calc(40px/2) !important; }

  /* ========================================
  	
  	Search Bar (old)
  	
  	======================================== */
  .search__bar {
    visibility: hidden;
    transform: translateY(-125px);
    transition: all .5s ease;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 125px;
    background: #4F4F4F; }
    .search__bar input {
      padding-left: 20px;
      margin: 0;
      background: none;
      color: #FFFFFF;
      font-size: 1em;
      border: 2px solid rgba(255, 255, 255, 0.25);
      border-radius: 5px;
      width: calc(100% - 40px - 70px);
      height: 50px;
      top: 38px;
      left: calc(40px / 2);
      position: absolute;
      transform: translateY(-50%);
      transition: all .85s ease; }
      .search__bar input:focus {
        outline: none;
        border: 2px solid rgba(255, 255, 255, 0.75); }
    .search__bar button {
      position: absolute;
      z-index: 50;
      width: 75px;
      height: 50px;
      border: 0;
      top: 44px;
      right: calc(40px / 2);
      background: url(../img/icons/Group4.svg) no-repeat;
      background-position: right 13px;
      transform: translateY(-150%);
      transition: all 1s ease; }
      .search__bar button:focus, .search__bar button:active {
        border: 0;
        outline: none; }

  .active {
    visibility: visible;
    transform: translateY(0);
    transition: all .5s ease; }
    .active input {
      transform: translateY(0);
      transition: all .65s ease; }
    .active button {
      transform: translateY(0%);
      transition: all .85s ease-out; } }
.footer {
  width: 100%;
  background: #E9E9E9;
  color: #C9C9C9; }
  .footer__inner {
    display: flex;
    flex-wrap: wrap; }
    .footer__inner > * {
      flex-basis: 100%; }
  .footer__nav {
    padding: 40px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-family: 'clear_sansregular', sans-serif; }
    .footer__nav li {
      display: inline;
      margin: 10px 20px; }
      .footer__nav li a {
        color: #999; }
        .footer__nav li a:not(.link--active):hover {
          color: #FFFFFF; }
        .footer__nav li a:not(.link--active)::after {
          background: #4F4F4F; }
  




  .footer__split {
    display: flex; }
    .footer__split--1 {
      flex-basis: 50%;
    }

    @media screen and (max-width: 960px) {
      .footer__split {
        flex-wrap: wrap; }
        .footer__split--1 {
          flex-basis: 100%;
        }
    }



    .footer__logo {
    display: block;
    margin: 40px 0;}
    .footer__logo svg {
      display: block;
      margin: 0 auto;
      opacity: .75;
      transform: scale(1.5, 1.5); }
      .footer__logo svg path {
        fill: black; }
      .footer__logo svg path:nth-of-type(2) {
        fill: red; }

  
  .footer__eu {
    max-width: 300px;
    display: block;
    margin: 27.5px auto;
  }


  .footer__text {
    display: flex;
    justify-content: center;
    margin-bottom: 40px; }
    .footer__text p {
      max-width: 550px;
      margin: 0 20px;
      color: #999;
      font-size: 14px;
      text-align: center; }
      






.nav__hover a {
  position: relative;
  display: inline-block;
  z-index: 1; }
  .nav__hover a.link--active {
    color: #FFFFFF; }
    .nav__hover a.link--active::after {
      position: absolute;
      z-index: -5;
      top: 50%;
      left: -15%;
      width: 130%;
      background: #DF0000;
      content: '';
      opacity: 1; }

@media screen and (max-width: 769px) {
  .nav__hover .link--active::after {
    height: 20px; } }
@media screen and (min-width: 769px) {
  .nav__hover a:not(.link--active)::after {
    position: absolute;
    z-index: -5;
    top: -40%;
    left: -25%;
    width: 150%;
    height: 40px;
    background: #DF0000;
    content: '';
    opacity: 0;
    transition: opacity 0.35s, transform 0.35s;
    transform: translateY(30px); }
  .nav__hover a:hover:not(.link--active)::after,
  .nav__hover a:focus:not(.link--active)::after {
    opacity: 1;
    transform: translateY(0px); }
  .nav__hover .link--active::after {
    height: 13px; } }
@media screen and (max-width: 768px) {
  /* ========================================
  
  Menu
  
  ======================================== */
  .menu {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    position: fixed;
    overflow-y: scroll;
    width: 80%;
    height: 100%;
    top: 0;
    z-index: 100;
    background: #2f2f2f;
    transition: transform 0.35s ease; }
    .menu .header__languages, .menu nav {
      display: block;
      flex-basis: 100%; }
    .menu nav {
      padding: 0 !important;
      text-align: center;
      height: 80vh;
      margin: 0;
      margin-top: 50px;
      transform: translateX(-50%); }
      .menu nav a {
        text-transform: uppercase;
        text-decoration: none;
        font-size: 24px;
        line-height: 2.5;
        font-family: 'clear_sansbold', sans-serif;
        color: #888;
        transition: all 0.2s ease; }
        .menu nav a:focus {
          color: white;
          transition: all 0.2s ease; }
    .menu .header__languages {
      background: black;
      height: 100px;
      margin-top: 0 !important;
      display: flex;
      justify-content: center; }
      .menu .header__languages li {
        margin-top: 38px;
        font-family: 'clear_sansbold', sans-serif;
        color: #FFFFFF; }
        .menu .header__languages li:nth-of-type(1) a:before {
          margin-left: 10px; }
        .menu .header__languages li a:before {
          content: '';
          display: block;
          float: left;
          margin: 2px 10px 0 25px;
          width: 37px;
          height: 24px;
          opacity: 0.5;
          background-size: 37px 24px; }
        .menu .header__languages li.active a:before {
          opacity: 1; }
        .menu .header__languages li.active:nth-of-type(1):before {
          margin-left: 10px; } }
.menu {
  display: none;
  visibility: hidden;
  transform: translateX(-100%);
  transition: transform 0.5s, visibility 0s 0.5s; }
  .menu.active {
    display: block;
    visibility: visible;
    transform: translateY(0%);
    transition: transform 0.5s; }
    .menu.active nav {
      transform: translateY(0%);
      transition: transform 1s; }

@media screen and (max-width: 480px) {
  .menu .header__languages li {
    color: black; } }
.bar {
  display: flex;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  margin-bottom: 20px; }
  .bar .bar__section {
    display: flex; }
    .bar .bar__section--last {
      order: 10; }
  .bar a:not(.bar__active) {
    transition: transform 0.2s;
    background: #DF0000;
    color: white; }
  .bar:not(.bar__info) .bar__section {
    flex: 1 1 25%;
    justify-content: center; }
  .bar:not(.bar__featured):not(.bar__select) .bar__section {
    align-items: center; }
  .bar__featured .bar__section, .bar__select .bar__section {
    flex-wrap: wrap; }
    .bar__featured .bar__section > *, .bar__select .bar__section > * {
      flex-basis: 100%;
      text-align: center; }
  .bar__tabs .bar__section.bar--active {
    box-shadow: none;
    background-size: contain; }
    .bar__tabs .bar__section.bar--active:nth-of-type(1) {
      background: url(../img/vyroba/odlitky.png);
      background-position: 50% 50%; }
    .bar__tabs .bar__section.bar--active:nth-of-type(2) {
      background: #FF0000 url(../img/vyroba/obrabeni.png) no-repeat;
      background-position: 50% 50%; }
    .bar__tabs .bar__section.bar--active:nth-of-type(3) {
      background: #FF0000 url(../img/vyroba/modely.png) no-repeat;
      background-position: 50% 50%; }
    .bar__tabs .bar__section.bar--active:nth-of-type(4) {
      background: #FF0000 url(../img/vyroba/kvalita.png) no-repeat;
      background-position: 50% 50%; }
  .bar__select .bar__section {
    background: #DF0000;
    color: white; }
    .bar__select .bar__section form {
      display: flex;
      justify-content: space-around;
      margin: 0 20px;
      /* the basic, unchecked style */
      /* the checked style using the :checked pseudo class */ }
      .bar__select .bar__section form input[type=checkbox] {
        display: block; }
      .bar__select .bar__section form label {
        display: inline-block;
        cursor: pointer; }
      .bar__select .bar__section form span {
        display: block;
        margin-top: 10px; }
      .bar__select .bar__section form div {
        display: inline-block; }
      .bar__select .bar__section form [type="checkbox"] {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        display: block; }
      .bar__select .bar__section form [type="checkbox"] + div:before {
        content: '';
        display: block;
        width: 1em;
        height: 1em;
        vertical-align: -0.25em;
        background: #990000;
        transition: 0.5s ease all;
        margin: 0 auto; }
      .bar__select .bar__section form [type="checkbox"]:checked + div:before {
        box-shadow: inset 0 0 0 0.25em #ac0000;
        background: white; }
  .bar__info .bar__section:nth-child(-n+2) {
    flex-grow: 0;
    flex-shrink: 0; }
  .bar__info .bar__section:last-child {
    background: white;
    flex-grow: 1; }
  .bar__info .bar__section.bar--inactive {
    background: #999;
    border: 0;
    color: white; }

@media screen and (min-width: 769px) {
  .bar--sm {
    min-height: 90px; }
  .bar--n {
    height: 130px; }
  .bar a:not(:last-of-type), .bar__select .bar__section:not(:last-of-type) {
    box-shadow: inset -2px 0 0 0 #ac0000; }
  .bar a:not(.bar--active):hover {
    transform: scale(1.1, 1.1);
    transition: transform 0.2s;
    box-shadow: none;
    background: red;
    z-index: 50; }
  .bar__info .bar__section {
    padding: 0 40px; }
  .bar__featured .bar__section {
    padding: 0 20px; }
  .bar__featured h4, .bar__select h4 {
    margin-top: 20px; }
  .bar__featured p, .bar__select p {
    min-height: 50px; } }
@media screen and (max-width: 768px) {
  .bar {
    flex-wrap: wrap; }
    .bar:not(.bar__info) .bar__section {
      flex-basis: 50%;
      padding: 30px 0; }
      .bar:not(.bar__info) .bar__section p {
        display: none; }
    .bar__featured .bar__section:first-child, .bar__select .bar__section:first-child {
      box-shadow: inset -2px 0 0 0 #ac0000; }
    .bar__featured .bar__section:last-child, .bar__select .bar__section:last-child {
      box-shadow: inset 0 2px 0 0 #ac0000; }
    .bar__select {
      min-height: 280px; }
      .bar__select .bar__section {
        padding: 30px 0 20px 0 !important; }
        .bar__select .bar__section h4 {
          margin-bottom: 20px; }
    .bar__tabs .bar__section:nth-child(odd) {
      box-shadow: inset -2px 0 0 0 #ac0000; }
    .bar__tabs .bar__section:nth-child(3) {
      box-shadow: inset -2px 0 0 0 #ac0000, inset 0 2px 0 0 #ac0000; }
    .bar__tabs .bar__section:last-child {
      box-shadow: inset 0 2px 0 0 #ac0000; }
    .bar a:hover, .bar a:active {
      background: #ac0000; }
    .bar__info .bar__section:first-child {
      box-shadow: inset -2px 0 0 0 #ac0000; }
    .bar__info .bar__section:nth-child(-n+2) {
      flex: 1 1 20%;
      padding: 20px 0;
      justify-content: center; }
    .bar__info .bar__section:nth-last-child(2) {
      margin-right: 40%; }
    .bar__info .bar__section:last-child {
      padding: 26.66667px 26.66667px;
      flex-basis: 100%; } }
@media screen and (max-width: 480px) {
  .bar:not(.bar__info) .bar__section {
    flex-basis: 100%; }
  .bar__featured .bar__section, .bar__select .bar__section, .bar__tabs .bar__section {
    box-shadow: inset 0 -2px 0 0 #ac0000 !important; }
  .bar__info .bar__section:nth-last-child(2) {
    margin-right: 0px; } }
.box, .bar {
  animation-name: dropHeader;
  animation-iteration-count: 1;
  animation-timing-function: ease-out; }

.box {
  animation-duration: 0.6s; }

.bar {
  animation-duration: 0.5s; }

@keyframes dropHeader {
  0% {
    transform: translateY(10%);
    opacity: 0; }
  100% {
    transform: translateY(0);
    opacity: 1; } }
.box {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  box-align: stretch;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  -ms-align-items: stretch;
  -o-align-items: stretch;
  align-items: stretch;
  -ms-flex-align: stretch;
  min-height: 400px;
  margin-top: 20px;
  /* ========================================
    
  Custom components
    
  ======================================== */ }
  .box:last-of-type {
    margin-bottom: 100px; }
  .box .grid--1--pad, .box .grid--2--pad, .box .grid__elem--below {
    position: relative;
    z-index: 1; }
  .box > div:nth-of-type(odd), .box:not(.box__cards):not(.box__news) > a:not(.button):nth-of-type(odd) {
    background: #FFFFFF; }
  .box > div:nth-of-type(even), .box:not(.box__cards):not(.box__news) > a:not(.button):nth-of-type(even) {
    background: #f3f3f3; }
  .box > div, .box > a, .box .extra-strip {
    box-shadow: inset 0 0 0 1px #ddd; }
  .box .box__img img, .box .figure--img img {
    position: absolute;
    top: 0;
    bottom: 0;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    margin: auto;
    filter: none;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); }
  .box .box__img__right img {
    position: absolute;
    top: 0;
    bottom: 0;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    margin: auto;
    filter: none;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); }    
  .box p, .box li, .box h3 {
    color: #4F4F4F; }
  .box h2 {
    padding-bottom: 20px; }
  .box ul {
    list-style: circle outside none;
    margin-left: 0;
    padding-left: 1em; }
    .box ul li {
      margin-top: 0.5em;
      padding-left: 1em; }
  .box h3 {
    margin-bottom: 0; }
  .box .grid--1 {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 33.33333%;
    -moz-flex: 1 1 33.33333%;
    -ms-flex: 1 1 33.33333%;
    flex: 1 1 33.33333%; }
    .box .grid--1--pad {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1 1 calc(33.3333% - 40px * 2);
      -moz-flex: 1 1 calc(33.3333% - 40px * 2);
      -ms-flex: 1 1 calc(33.3333% - 40px * 2);
      flex: 1 1 calc(33.3333% - 40px * 2);
      width: calc(33.3333% - 40px * 2); }
  .box .grid--2 {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 66.66667%;
    -moz-flex: 1 1 66.66667%;
    -ms-flex: 1 1 66.66667%;
    flex: 1 1 66.66667%; }
    .box .grid--2--pad {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1 1 calc(66.6666% - 40px * 2);
      -moz-flex: 1 1 calc(66.6666% - 40px * 2);
      -ms-flex: 1 1 calc(66.6666% - 40px * 2);
      flex: 1 1 calc(66.6666% - 40px * 2);
      width: calc(66.6666% - 40px * 2); }
  .box .pad {
    padding: 40px; }
  .box .no--pad {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .box .no--pad > div {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1 1 50%;
      -moz-flex: 1 1 50%;
      -ms-flex: 1 1 50%;
      flex: 1 1 50%;
      position: relative;
      overflow: hidden; }
  .box > a:not(.button), .box > div > a:not(.button), .box #dynamic {
    display: block;
    transition: color .25s ease, background 0.5s ease, transform .5s ease; }
    .box > a:not(.button):hover, .box > a:not(.button):focus, .box > div > a:not(.button):hover, .box > div > a:not(.button):focus, .box #dynamic:hover, .box #dynamic:focus {
      background: #4F4F4F;
      transform: scale(1.025, 1.025);
      box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.25);
      transition: color .25s ease, background 0.5s ease, transform .5s ease;
      z-index: 10; }
    .box > a:not(.button) figure, .box > div > a:not(.button) figure, .box #dynamic figure {
      padding: 0;
      margin: 0; }
      .box > a:not(.button) figure .figure--img, .box > a:not(.button) figure .figure--placeholder, .box > div > a:not(.button) figure .figure--img, .box > div > a:not(.button) figure .figure--placeholder, .box #dynamic figure .figure--img, .box #dynamic figure .figure--placeholder {
        height: 200px;
        position: relative;
        overflow: hidden; }
      .box > a:not(.button) figure .figure--placeholder, .box > div > a:not(.button) figure .figure--placeholder, .box #dynamic figure .figure--placeholder {
        background: #999; }
        .box > a:not(.button) figure .figure--placeholder svg, .box > div > a:not(.button) figure .figure--placeholder svg, .box #dynamic figure .figure--placeholder svg {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          opacity: .5; }
  .box__split h3, .box__split p, .box__cards h3, .box__cards p, .box__news h3, .box__news p {
    margin: 0; }
  .box__split p, .box__cards p, .box__news p {
    padding-top: 20px; }
  .box__split a:hover p, .box__split a:hover h3, .box__split a:focus p, .box__split a:focus h3, .box__cards a:hover p, .box__cards a:hover h3, .box__cards a:focus p, .box__cards a:focus h3, .box__news a:hover p, .box__news a:hover h3, .box__news a:focus p, .box__news a:focus h3 {
    color: white; }
  .box__split h2, .box__cards h2 {
    padding: 40px 40px 20px 40px; }
  .box__split h3, .box__cards h3 {
    padding: 20px 0 0 0; }
  .box__split p, .box__cards p {
    padding: 10px 0 20px 0; }
  .box__split a, .box__cards a {
    padding: 0 40px; }
  .box__split .grid--1 {
    padding-bottom: 40px;
    position: relative; }
    .box__split .grid--1 a:nth-last-child(2) {
      margin-bottom: 90px; }
    .box__split .grid--1 a.button {
      position: absolute;
      bottom: 20px; }
  .box__split .button {
    margin-left: 40px; }
  .box__table {
    overflow: scroll; }
  .box__news > a {
    flex-grow: 0 !important; }
  .box__careers h3 {
    margin: 0;
    margin-bottom: 40px; }
  .box__text--placeholder {
    position: relative; }
    @media screen and (max-width: 960px) {
      .box__text--placeholder {
        display: none !important; } }
    .box__text--placeholder svg {
      position: absolute;
      transform: scale(1.5, 1.5);
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto; }
      .box__text--placeholder svg path {
        fill: #999; }

.error {
  text-align: center;
  overflow: hidden; }
  .error h3 {
    margin-bottom: 50px; }

.svg-icon {
  position: relative;
  min-height: 300px;
  background: #f3f3f3; }
  .svg-icon:hover {
    background: #4F4F4F !important; }
    .svg-icon:hover svg path {
      fill: #FFFFFF; }
    .svg-icon:hover span {
      color: white !important; }
  .svg-icon svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); }
    .svg-icon svg path {
      fill: #999; }
  .svg-icon span {
    color: #999;
    font-family: 'clear_sansbold', sans-serif;
    position: absolute;
    left: 50%;
    top: calc(50% + 65px);
    transform: translate(-50%, 0);
    font-size: 1.5em; }
    @media screen and (max-width: 960px) {
      .svg-icon span {
        font-size: 1em; } }

.grid__elem--below {
  width: 100%; }
  .grid__elem--below > h2 {
    padding: 40px 40px 0 40px; }
  .grid__elem--below > p {
    padding: 0 40px; }
  .grid__elem--below p:last-child {
    padding-bottom: 40px; }

/* ==========================================

Man Tabs

========================================== */
.manTab {
  display: none; }
  .manTab.manTab--active {
    display: block; }

/* ==========================================

Media queries

========================================== */
@media screen and (min-width: 960px) {
  .below {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
    -ms-flex-direction: column; }

  .box__cards a:nth-of-type(odd), .box__news a:nth-of-type(odd) {
    background: #FFFFFF; }
  .box__cards a:nth-of-type(even), .box__news a:nth-of-type(even) {
    background: #f3f3f3; }

  .grid--below {
    flex-direction: column; } }
@media screen and (max-width: 960px) {
  .box__text .grid--1--pad, .box__text .grid--2--pad, .box__text .grid--below {
    -webkit-flex-basis: 100%;
    -moz-flex-basis: 100%;
    flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    -webkit-box-ordinal-group: -5;
    -moz-box-ordinal-group: -5;
    box-ordinal-group: -5;
    -webkit-order: -5;
    -moz-order: -5;
    order: -5;
    -ms-flex-order: -5; }

  .grid--below .grid__elem--below, .grid--below .box__img {
    -webkit-flex-basis: 50%;
    -moz-flex-basis: 50%;
    flex-basis: 50%;
    -ms-flex-preferred-size: 50%; }

  .box__cards .grid--1--pad, .box__news .grid--1--pad {
    -webkit-flex-basis: calc(50% - 40px * 2);
    -moz-flex-basis: calc(50% - 40px * 2);
    flex-basis: calc(50% - 40px * 2);
    -ms-flex-preferred-size: calc(50% - 40px * 2);
    width: calc(50% - 40px * 2);
    background: #FFFFFF; }
  .box__cards .grid--1, .box__news .grid--1 {
    -webkit-flex-basis: 50%;
    -moz-flex-basis: 50%;
    flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    width: 50%;
    background: #FFFFFF; }

  .box__img {
    min-height: 40vh; } }
@media screen and (max-width: 960px) and (min-width: 481px) {
  .box__cards .grid--1--pad:nth-of-type(4n-1), .box__cards .grid--1--pad:nth-of-type(4n-2), .box__cards .grid--1:nth-of-type(4n-1), .box__cards .grid--1:nth-of-type(4n-2), .box__news .grid--1--pad:nth-of-type(4n-1), .box__news .grid--1--pad:nth-of-type(4n-2), .box__news .grid--1:nth-of-type(4n-1), .box__news .grid--1:nth-of-type(4n-2) {
    background: #f3f3f3; } }
@media screen and (max-width: 769px) {
  .box__split .grid--1 {
    -webkit-flex-basis: 100%;
    -moz-flex-basis: 100%;
    flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    width: 100%; }

  .grid__elem--below {
    flex-basis: 100% !important; }

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

  .no--pad .error svg {
    transform: scale(0.8, 0.8); } }
@media screen and (max-width: 769px) and (max-width: 480px) {
  .box > div, .box > a {
    flex-basis: 100% !important; } }
@media screen and (max-width: 769px) {
  .box__cards a:nth-of-type(odd), .box__news a:nth-of-type(odd) {
    background: #FFFFFF; }
  .box__cards a:nth-of-type(even), .box__news a:nth-of-type(even) {
    background: #f3f3f3; } }
.cat {
  margin-top: 20px;
  background: #4F4F4F;
  color: #FFFFFF;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center; }
  .cat h4 {
    margin-top: 20px;
    text-align: center;
    -webkit-flex-basis: 100%;
    -moz-flex-basis: 100%;
    flex-basis: 100%;
    -ms-flex-preferred-size: 100%; }
  .cat .button {
    margin-bottom: 20px; }

.cat {
  margin-top: 20px;
  background: #4F4F4F;
  color: #FFFFFF;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center; }
  .cat h4 {
    margin-top: 20px;
    text-align: center;
    -webkit-flex-basis: 100%;
    -moz-flex-basis: 100%;
    flex-basis: 100%;
    -ms-flex-preferred-size: 100%; }
  .cat .button {
    margin-bottom: 20px; }

.kotel {
  position: relative; }
  .kotel svg g:hover path {
    fill: red !important; }
  .kotel svg rect {
    pointer-events: all; }
  .kotel__box {
    top: 197px;
    right: 20px;
    position: absolute;
    background: #4F4F4F;
    padding: 0 20px;
    width: 40%;
    transition: all .5s ease;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5); }
    .kotel__box p {
      color: white; }
    .kotel__box:before {
      content: "\A";
      border-style: solid;
      border-width: 15px 15px 15px 0;
      border-color: transparent #4F4F4F transparent transparent;
      position: absolute;
      left: -15px;
      top: calc(50% - 15px); }

@media screen and (min-width: 560px) and (max-width: 960px) {
  .kotel__box {
    right: 15%; }

  .kotel svg {
    margin-left: 15%; } }
#map {
  min-height: 600px;
  height: 60vh;
  background: #bbd8fc; }

#mapOpen {
  display: none; }

#customerLogo {
  width: 200px;
  height: 100px;
  display: block; }

.cd {
  background: url(../img/partners_big.jpg); }
  .cd--0 {
    background-position: 0px 0px; }
  .cd--1 {
    background-position: -200px 0px; }
  .cd--2 {
    background-position: -400px 0px; }
  .cd--3 {
    background-position: -600px 0px; }
  .cd--4 {
    background-position: -800px 0px; }
  .cd--5 {
    background-position: -1000px 0px; }
  .cd--6 {
    background-position: -1200px 0px; }
  .cd--7 {
    background-position: 0 -100px; }
  .cd--8 {
    background-position: -200px -100px; }
  .cd--9 {
    background-position: -400px -100px; }
  .cd--10 {
    background-position: -600px -100px; }
  .cd--11 {
    background-position: -800px -100px; }
  .cd--12 {
    background-position: -1000px -100px; }
  .cd--13 {
    background-position: -1200px -100px; }
  .cd--14 {
    background-position: 0 -200px; }
  .cd--15 {
    background-position: -200px -200px; }
  .cd--16 {
    background-position: -400px -200px; }
  .cd--17 {
    background-position: -600px -200px; }

table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #bbb;
  width: 100%;
  font-size: 0.9em; }

td, th {
  border-top: 1px solid #ddd;
  padding: 4px 8px; }

th {
  font-family: 'clear_sansbold', sans-serif;
  padding: 10px; }

td {
  font-family: 'clear_sansregular', sans-serif;
  text-align: center; }

tbody tr:nth-child(even) td {
  background-color: #eee; }

thead {
  background: grey;
  color: white; }

.slider__wrapper {
  display: flex;
  position: relative; }
  .slider__wrapper .slider {
    cursor: pointer;
    position: absolute;
    width: 25%;
    height: 100%;
    transition: all 0.5s ease-out;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translate3d(0, 0, 0);
    z-index: 20; }
    .slider__wrapper .slider:nth-of-type(1) {
      background: url(../img/slider/0.jpg) no-repeat;
      background-size: cover; }
    .slider__wrapper .slider:nth-of-type(2) {
      background: url(../img/slider/1.jpg) no-repeat;
      left: 25%;
      background-position: 25% 0;
      background-size: cover; }
    .slider__wrapper .slider:nth-of-type(3) {
      background: url(../img/slider/2.jpg) no-repeat;
      left: 50%;
      background-position: 50% 0;
      background-size: cover; }
    .slider__wrapper .slider:nth-of-type(4) {
      background: url(../img/slider/3.jpg) no-repeat;
      background-position: top right;
      left: 75%;
      background-size: cover; }
    .slider__wrapper .slider.active {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 50;
      transition: all 0.5s ease-out; }
  .slider__wrapper .slider__close {
    position: absolute;
    color: black;
    right: 40px;
    top: 30px;
    font-size: 50px;
    z-index: 51;
    font-family: sans-serif;
    opacity: 0;
    transform: scale(0.5, 0.5);
    transition: all 0.5s; }
    .slider__wrapper .slider__close.active {
      opacity: 1;
      transform: scale(1, 1);
      transition: all 0.5s; }

@media screen and (max-width: 960px) {
  .slider__wrapper {
    height: 500px; } }


.eu-cookies {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    color: #FFF;
    background-color: #000;
    z-index: 1000;
    padding: 10px;
    padding-bottom: 4px;
    font-size: 11px;
    text-align: center;
}

.eu-cookies p {
    display: inline-block;
}

.eu-cookies a {
    color: #808080;
}

.eu-cookies a {
    padding: 2px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 10px;
    border: 1px #df0000 solid;
    background-color: #000;
    color: #FFF;
    border-radius: 2px; 
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px;
    cursor: pointer;     
}

.eu-cookies a:hover {
    color: #fff;
    border: 1px #C5C5C5 solid;
    background-color: #000;
}


.eu-cookies #butteucookies {
    border: 1px #df0000 solid;
    background-color: #df0000;
    color: #FFF;    
}

.eu-cookies #butteucookies:hover {
    color: #FFF;
    border: 1px #df0000 solid;
    background-color: #000;
}



.gallery__open {
  display: inline!important;
}    
  .gallery__open:hover {
    background: transparent!important;
  }

.yt {
  width: 100%;
  height: 350px;
}

.yt2 {
  width: 100%;
  height: 650px;
}

.cat__split {
  display: flex;
}

  .cat__split .grid--1 {
    flex-basis: 50%;
  }

    .cat__split .grid--1:nth-of-type(1) {
        margin-bottom: -6px;
    }

    .cat__split .grid--1:nth-of-type(2) {
        display: flex;
        align-items: center;
        justify-content: center;
    }

  .cat__split__text {
    flex-basis: 50%;
  }

    .cat__split__text A  {
      margin-left: 50%;
      transform: translateX(-50%);
      width: 100px;
    }

@media screen and (max-width: 960px) {
  .cta__split {
      flex-wrap: wrap;
  }

  .cat__split .grid--1 {
      flex-basis: 100%;
  }
}