@charset "UTF-8";
/*------------------------------------*    $Sizes
\*------------------------------------*/
/*------------------------------------*    $breakpoints
\*------------------------------------*/
/* mobil */
/* mobil-small */
/* tablets */
/* desktop Monitore */
/* desktop Monitore */
/* large desktop Monitore */
/* HD desktop Monitore */
/* HD desktop Monitore max */
/*------------------------------------*    $colors
\*------------------------------------*/
/**/
/*------------------------------------*    z-index : from lowest to highest
\*------------------------------------*/
/*only on Content.html level*/
/*only on Content.html level*/
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-transform: translate3d(0, -50px, 0);
  transform: translate3d(0, -50px, 0);
  -webkit-transition: -webkit-transform .5s ease-out;
  transition: -webkit-transform .5s ease-out;
  transition: transform .5s ease-out;
  transition: transform .5s ease-out, -webkit-transform .5s ease-out; }

.pace-inactive {
  display: none;
  height: 0; }

.pace-running > *:not(.pace) {
  opacity: 0; }

.pace-done {
  opacity: 1; }

.pace.pace-active {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.pace .pace-progress {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 1px;
  background: #333;
  pointer-events: none; }

body, .header, .footer {
  max-width: 1920px !important; }

/*color*/
/*------------------------------------*/
body {
  background-color: #F9F7F2; }

.hideDuringLoading {
  visibility: hidden;
  opacity: 0; }

.inverted- {
  background-color: #333; }

.noOpacity {
  opacity: 0; }

.one_highlight_color-background {
  background-color: #F5DEDD !important; }

.two_highlight_color-background {
  background-color: #D8E333 !important; }

.three_highlight_color-background {
  background-color: #A8F1E1 !important; }

.one_highlight_color_transparent-background {
  background-color: rgba(245, 222, 221, 0.7); }

.two_highlight_color_transparent-background {
  background-color: rgba(216, 227, 51, 0.7); }

.three_highlight_color_transparent-background {
  background-color: rgba(168, 241, 225, 0.7); }

.xingw10-bg {
  background-color: #E9EDB0; }

.asphalt-bg {
  background-color: #AFE2D5; }

.jb-bg {
  background-color: #F9DFDA; }

.golf-bg {
  background-color: #DBCCB0; }

.cabrio-bg {
  background-color: #D3C600; }

.axe-bg {
  background-color: #B189BC; }

/*---------------------*/
.vertical-center-headline {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-top: -12px; }

/* tablet */
/* desktop */
@media only screen and (min-width: 1024px) {
  .vertical-center-headline {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start; } }

/*------------------*/
.top-line::before {
  content: '';
  display: block;
  height: 1px;
  margin: 0;
  width: 100%;
  background-color: rgba(51, 51, 51, 0.1); }

.bottom-line::after {
  content: '';
  display: block;
  height: 1px;
  margin: 0;
  width: 100%;
  background-color: rgba(51, 51, 51, 0.1); }

.naviline::before {
  content: '';
  display: block;
  height: 1px;
  margin: 0;
  width: 100%;
  background-color: rgba(51, 51, 51, 0.1); }

.underlined::after {
  content: '';
  display: block;
  height: 2px;
  margin: 0;
  width: 0;
  background-color: #333; }

.-thumb-underlined::after {
  background-color: #F9F7F2; }

.small-underlined::after {
  content: '';
  display: block;
  height: 1px;
  margin: 0;
  width: 0;
  background-color: #333; }

.inverted- .underlined::after, .inverted- .small-underlined::after {
  background-color: #F9F7F2; }

.big-underlined::after {
  content: '';
  display: block;
  height: 8px;
  width: 26px;
  margin-top: 8px;
  background-color: #333; }

.thumb-.big-underlined::after {
  content: '';
  display: block;
  height: 3px;
  width: 26px;
  margin-top: 6px;
  background-color: #F9F7F2; }

.underlined, .big-underlined, .small-underlined {
  width: 100%; }

.underlined, .big-underlined, .small-underlined {
  display: inline-block;
  width: inherit; }

.noMobileUnderlined::after {
  width: 0 !important; }

@media only screen and (min-width: 768px) {
  .noMobileUnderlined::after {
    width: inherit !important; } }

.thumb-.big-underlined {
  width: 100%; }

.round {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  width: 15px;
  height: 15px;
  background: #333;
  margin: 0 0 4px 0;
  border-radius: 50%; }

.round svg {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: 4px;
  left: 0; }

.round svg path {
  stroke: #F9F7F2;
  fill: none;
  stroke-width: 8; }

a .socialIcons {
  padding: 13px; }

.socialIcons svg {
  padding: 12px;
  border-radius: 100%;
  width: 24px;
  height: 24px;
  fill: #F9F7F2;
  color: #333;
  background-color: #333; }

.socialIcons.xing svg {
  width: 19px;
  height: 19px;
  padding: 14px; }

.socialconsWrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 104px; }

.no-touch a.thumb-hover-effect:hover .underlined::after, .no-touch a.thumb-hover-effect:hover .big-underlined::after, .no-touch a.thumb-hover-effect:hover .small-underlined::after {
  width: 100%; }

.no-touch a .small-underlined::after {
  visibility: visible; }

a .small-underlined::after {
  visibility: hidden; }

.first-background {
  background-color: #F9F7F2 !important; }

.menu-background-color {
  background-color: #F5DEDD; }

.second-background {
  background-color: #333 !important; }

.third-background {
  background-color: #181818 !important; }

.transparent-second-background {
  background-color: rgba(26, 25, 25, 0.7) !important; }

.lab-bg {
  background-color: #A8F1E1 !important; }

.darker-bg {
  background-color: #F0EDE4 !important; }

.circle, .dark-circle {
  border-radius: 50%;
  width: 65px;
  height: 65px;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.05); }

.dark-circle {
  border-radius: 50%;
  width: 65px;
  height: 65px; }

.transparent-dark-circle {
  border-radius: 50%;
  width: 65px;
  height: 65px; }

/* desktop Monitore */
@media only screen and (min-width: 1024px) {
  .circle, .dark-circle {
    border-radius: 50%;
    width: 65px;
    height: 65px;
    border: none;
    box-shadow: none; } }

/*display handlers*/
/*------------------------------------*/
/* mobil */
.only-mobil, .no-desktop, no-large-desktop, .no-tablet {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  visibility: visible; }

.only-desktop, .only-large-desktop, .no-mobil, .no-mobil-and-tablet, only-mobil-and-tablet {
  display: none !important;
  visibility: hidden; }

/* tablet */
@media only screen and (min-width: 769px) {
  .only-mobil, .no-tablet {
    display: none !important;
    visibility: hidden; }
  .no-mobil, .only-mobil-and-tablet {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    visibility: visible; } }

/* desktop Monitore */
@media only screen and (min-width: 1024px) {
  .only-mobil-and-tablet, .no-desktop {
    display: none !important;
    visibility: hidden; }
  .no-mobil-and-tablet {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    visibility: visible; }
  .only-desktop {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    visibility: visible; } }

@media only screen and (min-width: 1248px) {
  .no-large-desktop {
    display: none !important;
    visibility: hidden; }
  .only-large-desktop {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    visibility: visible; } }

.pattern {
  position: absolute;
  overflow: hidden;
  height: inherit;
  width: 100%;
  margin: 0 auto;
  z-index: auto; }

.pattern-horizontal {
  position: relative;
  height: 100%;
  background-color: rgba(212, 153, 162, 0.05);
  background-size: 25%;
  background-image: -webkit-linear-gradient(0, transparent 50%, rgba(255, 0, 171, 0.05) 50%);
  z-index: auto;
  pointer-events: none;
  max-width: 1440px;
  margin: 0 auto; }

.pattern-vertical {
  position: fixed;
  top: 0;
  height: 2880px;
  width: 2880px;
  max-height: 2880px;
  max-width: 2880px;
  background-color: rgba(212, 153, 162, 0.05);
  background-size: 13px;
  background-image: -webkit-linear-gradient(90deg, transparent 1px, rgba(255, 0, 171, 0.05) 1px);
  z-index: auto;
  pointer-events: none; }

.pattern svg {
  pointer-events: none; }

.pattern-horizontal, .pattern-vertical {
  display: none; }

.pattern svg {
  z-index: auto; }

.pattern {
  display: none; }

@font-face {
  font-family: 'Merriweather-Regular';
  font-style: normal;
  font-weight: 400;
  src: local("Merriweather Regular"), url(../fonts/Merriweather-Regular.ttf) format("ttf"); }

@font-face {
  font-family: 'Merriweather-Black.ttf';
  font-style: normal;
  font-weight: 900;
  src: local("Merriweather Black"), url(../fonts/Merriweather-Black.ttf) format("ttf"); }

@font-face {
  font-family: 'Merriweather-Bold.ttf';
  font-style: normal;
  font-weight: 700;
  src: local("Merriweather Bold"), url(../fonts/Merriweather-Bold.ttf) format("ttf"); }

@font-face {
  font-family: 'Bebas Neue Bold';
  font-style: normal;
  font-weight: 400;
  src: local("Bebas Neue Bold"), url("../fonts/BEBASNEUE BOLD.woff") format("woff"); }

/* Generated by Glyphter (http://www.glyphter.com) on  Fri Feb 12 2016*/
@font-face {
  font-family: 'twotosymbols';
  src: url("../fonts/twotosymbols.eot");
  src: url("../fonts/twotosymbols.eot?#iefix") format("embedded-opentype"), url(../fonts/twotosymbols.woff) format("woff"), url(../fonts/twotosymbols.ttf) format("truetype"), url(../fonts/twotosymbols.svg#twotosymbols) format("svg");
  font-weight: 400;
  font-style: normal; }

[class*='icon-']:before {
  display: inline-block;
  font-family: 'twotosymbols';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-header-logo:before {
  content: '\0041'; }

.icon-close:before {
  content: '\0042'; }

/*------------------------------------*/
/* Typography */
/*------------------------------------*/
body,
p {
  font-family: 'Fira Sans',sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 26px;
  color: #333;
  text-transform: none;
  letter-spacing: 0; }

h1 {
  font-family: 'Merriweather-Bold','Fira Sans',Georgia,serif;
  font-size: 48px;
  font-weight: 700;
  font-style: normal;
  color: #333;
  line-height: 56px;
  letter-spacing: 0; }

h2 {
  font-family: 'Merriweather-Black','Fira Sans',Georgia,serif;
  font-weight: 900;
  font-size: 36px;
  font-style: normal;
  color: #333;
  line-height: 52px; }

h3 {
  font-family: 'Fira Sans',sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: #333;
  line-height: 26px;
  font-style: normal; }

h4 {
  font-family: 'Merriweather-Bold','Fira Sans',Georgia,serif;
  font-weight: 700;
  font-size: 24px;
  font-style: normal;
  color: #333;
  line-height: 39px; }

h5 {
  font-family: 'Fira Sans',sans-serif;
  font-weight: 300;
  font-size: 24px;
  color: #333;
  line-height: 39px; }

h6 {
  font-family: 'Bebas Neue Bold',sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #333;
  line-height: 14px;
  letter-spacing: 1px;
  text-transform: uppercase; }

a {
  font-family: 'Fira Sans',sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #333;
  line-height: 26px;
  text-decoration: none; }

blockquote,
q {
  font-family: 'Fira Sans',sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #333;
  line-height: 26px;
  font-style: italic;
  quotes: "“" "”" "‘" "’"; }

sup {
  font-family: 'Fira Sans',sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 0;
  color: #F9F7F2; }

.inverted- a,
.inverted- blockquote,
.inverted- h1,
.inverted- h2,
.inverted- h3,
.inverted- h4,
.inverted- h5,
.inverted- h6,
.inverted- p,
.inverted- q {
  color: #F9F7F2; }

.responsive-span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.responsive-span span {
  line-height: 13px; }

/*------------secondary Texts------------------*/
.info {
  font-family: 'Fira Sans',sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #333;
  line-height: 14px;
  letter-spacing: 1px;
  font-style: normal; }

b,
p.bold,
strong {
  font-weight: 400; }

.icons-font {
  font-family: twotosymbols !important;
  font-size: 34px;
  color: #333; }

.Site-highlight-wrapper a,
.about-content a,
.content-main a,
.footer a,
.footer p,
.header p,
.nav-hightlight p,
.project-main a {
  letter-spacing: 1px;
  font-style: normal;
  text-transform: uppercase;
  font-size: 10px;
  line-height: 12px;
  font-weight: 400; }

.contact-content a,
.grid-thumb-txt a,
.grid-thumb-txt p {
  text-transform: none !important;
  font-size: 13px;
  line-height: 26px;
  font-weight: 400; }

.grid-thumb-txt a,
.grid-thumb-txt p {
  letter-spacing: 1px; }

.grid-thumb-txt p.bold {
  letter-spacing: 0; }

.contact-content .info {
  font-size: 13px; }

.contact-content a,
.contact-content p {
  font-size: 15px;
  line-height: 26px; }

.footer sup {
  color: #333; }

.highlight-desktop-image-txt h2 {
  font-style: italic;
  line-height: 38px; }

/* desktop Monitore */
/*
@media only screen and (min-width: $media_HD_desktop_width) {
	.header p,.footer p,.footer a{
		font-size:12px;
		line-height:14px;
	}
}
*/
/******************************************/
/* dynamic headline*/
/******************************************/
h1.-dynamic {
  font-size: 8vw;
  line-height: 11vw; }

/* mobil and Tablets only*/
@media only screen and (min-width: 768px) {
  h1.-dynamic {
    font-size: 48px;
    line-height: 58px; } }

@media only screen and (min-width: 375px) and (max-height: 375px) {
  h1.-dynamic {
    font-size: 5vw;
    line-height: 6vw; } }

@media only screen and (min-width: 600px) and (max-height: 414px) {
  h1.-dynamic {
    font-size: 5vw;
    line-height: 6vw; } }

.header {
  position: absolute;
  width: inherit;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  z-index: 3000;
  padding: 13px;
  box-sizing: border-box; }

.fix-top-header .header {
  -webkit-transition: color 0.3s ease-out;
  transition: color 0.3s ease-out;
  background-color: #F9F7F2;
  border-bottom: 1px solid rgba(51, 51, 51, 0.1); }

.header {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row; }

.header-left, .header-middle, .header-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 100%; }

.header-right {
  display: none;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 7px; }

.header-middle {
  display: none;
  /* none Visible mobil*/
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.header-left .header-info {
  margin-left: 13px; }

.header-bg {
  position: fixed;
  top: 0;
  width: 100%;
  background: #facfb1;
  z-index: -1000;
  height: 26px;
  overflow: hidden;
  opacity: 0;
  max-width: 1920px !important; }

.image-bg, .image-test-bg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center; }

.image-test-bg {
  background-image: url(https://source.unsplash.com/featured/?sky); }

.header-zoom-default {
  -webkit-transition: all 1s ease-out;
  transition: all 1s ease-out;
  -webkit-transform: scale3d(0.8, 0.8, 1);
          transform: scale3d(0.8, 0.8, 1); }

.header-zoom-up {
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1); }

/* tablet */
@media only screen and (min-width: 768px) {
  .header {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row; } }

/* desktop Monitore */
@media only screen and (min-width: 1024px) {
  .header {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1; }
  .header-left, .header-right, .header-middle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1; }
  .header-right-left, .header-right-right {
    display: block;
    width: inherit; } }

.footer {
  position: absolute;
  width: inherit;
  padding: 13px;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  bottom: 0;
  top: auto;
  z-index: 4000; }

.footer.-content {
  position: relative; }

.footer.-fixed {
  position: fixed;
  z-index: 4000; }

.footer-left, .footer-right, .footer-middle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.footer-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end; }

/* default - mobile */
.footer-right-left {
  display: none;
  width: 100%; }

.footer sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: 7px; }

.footer-left, .footer-middle {
  display: none; }

/* tablet */
/* desktop Monitore */
@media only screen and (min-width: 1024px) {
  .no-touch .footer-left, .no-touch .footer-right, .no-touch .footer-middle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1; }
  .no-touch .footer-middle {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
  .no-touch .footer-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .no-touch .footer-right-left, .no-touch .footer-right-right {
    display: block;
    width: inherit; } }

/* HD desktop Monitore */
@media only screen and (min-width: 1440px) {
  .footer {
    padding: 26px; } }

.thumb-image-Text {
  overflow: hidden; }

.thumb-image-Text .thumb-center-elt {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-pack: distribute;
      justify-content: space-around; }

.thumb-center-elt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 13px; }

.second-color-txt h4 {
  line-height: 26px; }

.thumb-center-elt .second-color-txt h3, .thumb-center-elt .second-color-txt .info, .second-color-txt h4 {
  color: #F9F7F2 !important; }

.thumb-center-elt .first-color-txt h3, .thumb-center-elt .first-color-txt .info, .first-color-txt h4 {
  color: #333 !important; }

a .thumb-image-Text {
  position: relative; }

.thumb-image-Text {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #F9F7F2; }

.thumb-image-Text img {
  width: 100%;
  height: auto; }

.thumb-center-elt {
  padding-bottom: 23px; }

.thumb-center-elt .second-color-txt, .thumb-center-elt .first-color-txt {
  padding-bottom: 8px; }

@media only screen and (min-width: 1024px) {
  .thumb-center-elt {
    padding-left: 26px; } }

/*------------------------------------*/
/* menu Navigation */
/*------------------------------------*/
body {
  position: relative;
  overflow: visible; }

body.nav-is-visible {
  position: fixed; }

@media only screen and (min-width: 1024px) {
  html.nav-is-visible {
    overflow-x: hidden;
    overflow-y: hidden; } }

header {
  /*
	position:absolute;
	display:flex;
	align-items:center;
	*/ }

.logo {
  /*Set font family style as sample*/
  font-family: twotosymbols !important;
  font-size: 34px; }

.header-left .info, .logo {
  color: #333; }

.nav-is-visible .header-left .info, .nav-is-visible .logo {
  color: #F9F7F2; }

.nav-is-visible .second-menu-wrapper {
  visibility: hidden; }

.icon-close-inverted {
  /*Set font family style as sample*/
  font-family: twotosymbols !important;
  color: #F9F7F2;
  font-size: 100%;
  padding-top: 19px;
  padding-left: 1px;
  font-style: normal;
  text-align: center; }

.menu-wrapper {
  position: fixed;
  right: 26px;
  bottom: 26px;
  width: 65px;
  height: 65px; }

.nav-main {
  /* by default it's hidden - on top of the viewport */
  position: fixed;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background: #F0EDE4;
  overflow: auto;
  text-align: center;
  /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
  overflow-y: scroll;
  /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch; }

.nav span {
  background-color: transparent;
  font-size: 12px; }

.nav-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.nav-main li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.nav-main li.nav-placeholder {
  height: 56px; }

.nav-main li.info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.nav-main li.info p {
  color: #807f7f;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-item-align: center;
      align-self: center;
  text-transform: uppercase; }

.nav-main li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.nav-elt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.nav-main .header-left {
  position: fixed;
  top: 0; }

.nav-main li, .nav-main li h4 {
  color: #333; }

.nav-main li a h4 {
  padding-top: 0px;
  padding-bottom: 0px;
  position: relative;
  height: inherit; }

.navi-selected a h4 {
  color: #807f7f; }

.navi-selected a:hover h4 {
  background-color: #333 !important; }

.menu-wrapper {
  z-index: 50000; }

.menu-open, .menu-close {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer; }

.menu-background-color {
  background-color: rgba(249, 247, 242, 0.8); }

.menu-center {
  position: relative;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  cursor: pointer; }

.menuBgEffect {
  z-index: -10;
  position: absolute;
  left: 50%; }
  .menuBgEffect .menuBgText {
    position: absolute;
    box-sizing: content-box;
    overflow: hidden; }
    .menuBgEffect .menuBgText p {
      font-family: 'Fira Sans',sans-serif;
      font-weight: 800;
      font-size: 90px;
      line-height: 65px;
      color: rgba(51, 51, 51, 0.05);
      text-transform: uppercase; }
  .menuBgEffect .topEffect {
    -webkit-transform: translate(-50%, 50%);
            transform: translate(-50%, 50%); }
    .menuBgEffect .topEffect p {
      -webkit-transform: translateY(-100%);
              transform: translateY(-100%);
      opacity: 1; }
  .menuBgEffect .bottomEffect {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
    .menuBgEffect .bottomEffect p {
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
      opacity: 0; }

.fix-top-menu .menuBgEffect {
  display: none; }

.menu-close {
  display: none; }

.nav-is-visible .menu-close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.nav-is-visible .menu-open {
  display: none; }

.menu-open a {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center; }

.menu-open h6 {
  color: #333;
  padding-top: 2px; }

.navigation-elts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 25%;
          flex: 1 25%;
  height: inherit; }

.navigation-elts .nav-placeholder {
  -webkit-box-flex: 2;
      -ms-flex: 2 50%;
          flex: 2 50%;
  height: inherit; }

.navigation-right {
  display: none;
  z-index: 50; }

.nav-main li a:hover h3 {
  background-color: transparent; }

.nav-quote-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  line-height: 20vw;
  text-align: center;
  background: none; }

.nav-quote-bg h2 {
  font-family: 'Fira Sans',sans-serif;
  font-weight: 800;
  font-size: 70px;
  font-size: 15vw;
  margin: 0;
  box-sizing: border-box;
  padding-top: 104px;
  padding-top: 17vw;
  color: rgba(51, 51, 51, 0.05);
  text-transform: uppercase; }

.nav-quote-bg {
  width: 100%;
  height: 100%;
  visibility: hidden; }

.nav-is-visible .nav-quote-bg {
  visibility: visible; }

.nav-main .underlined::after, .menu-wrapper .small-underlined::after {
  visibility: hidden; }

/*effects - without animations*/
/*------------------------------------*/
/*
.nav-hover-bg-effect {
	width:0;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background-color:transparentize($first_color,0.98);
}

.nav-elt:hover .nav-hover-bg-effect {
	width: 100%;
}*/
a.hover-effect .underlined::after, .hover-effect .underlined::after, a.hover-effect .small-underlined::after, .hover-effect .small-underlined::after {
  width: 100%; }

a.hover-effect:hover .underlined::after, .hover-effect:hover .underlined::after, a.hover-effect:hover .small-underlined::after, .hover-effect:hover .small-underlined::after {
  max-width: 100%; }

/* Tabletts */
@media only screen and (min-width: 760px) {
  .nav-quote-bg h2 {
    font-size: 120px;
    font-size: 15vw; } }

/* mobil and Tablets only*/
@media only screen and (min-width: 1024px) {
  .nav-quote-bg h2 {
    color: rgba(51, 51, 51, 0.02); } }

/* desktop Monitore */
@media only screen and (min-width: 1025px) {
  .header {
    position: fixed; }
  .nav-main .underlined::after, .menu-wrapper .small-underlined::after {
    visibility: visible; }
  body.nav-is-visible {
    position: relative; }
  .nav-quote-bg h2 {
    font-size: 170px;
    font-size: 15vw;
    padding-top: 13vw; }
  .nav-intro {
    visibility: hidden; }
  .menu-wrapper {
    margin: auto;
    right: 0;
    left: 0;
    bottom: auto;
    top: 52px; }
  .fix-top-menu .menu-wrapper {
    top: -5px; }
    .fix-top-menu .menu-wrapper .menu-open {
      -webkit-transition: all 0.3s ease-out 0.3s;
      transition: all 0.3s ease-out 0.3s;
      background: none !important; }
  .menu-main-wrapper {
    top: 71px !important; }
  .menu-background-color {
    background-color: rgba(249, 247, 242, 0.2); } }

@media only screen and (max-height: 701px) and (min-width: 1024px) {
  /*	
	.menu-out {
		left:auto;
		top:auto;
		right:26px;
		bottom:26px;
	}
	
	.nav-intro {
		visibility:visible;
	}
	*/ }

/*------------------------------------*    $MAIN
\*------------------------------------*/
html {
  height: 100%; }

*, *:before, *:after {
  box-sizing: border-box; }

body {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 100%; }

.header, .footer {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none; }

.site {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%; }

.main-content {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute; }

.vertical-centered-content {
  margin: 0;
  height: 100%;
  background-color: blue; }

.Site-highlight-wrapper.grid-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  max-width: 100% !important;
  mix-blend-mode: multiply; }

.Site-highlight-left {
  height: 100%;
  width: 50%;
  -ms-flex-item-align: center;
      align-self: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  Justify-content: center; }

.Site-highlight-left img {
  left: 100%;
  right: auto;
  bottom: auto;
  top: auto;
  position: relative;
  width: auto;
  height: 100%; }

.Site-highlight-right {
  height: 100px;
  width: 50%;
  -ms-flex-item-align: center;
      align-self: center;
  top: 0;
  height: auto;
  padding-left: 0;
  -ms-flex-line-pack: end;
      align-content: flex-end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row; }

.Site-highlight-right .headline {
  padding: 13px;
  box-sizing: border-box;
  width: 312px;
  -ms-flex-item-align: end;
      align-self: flex-end; }

.Site-highlight-right .headline.-bg {
  padding: 26px; }

.Site-highlight-one, .Site-highlight-two, .Site-highlight-three {
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; }

.Site-highlight-one, .Site-highlight-two, .Site-highlight-three {
  -webkit-transition-duration: 1000ms;
          transition-duration: 1000ms;
  -webkit-transition-timing-function: cubic-bezier(0, 0.55, 0.49, 0.99);
          transition-timing-function: cubic-bezier(0, 0.55, 0.49, 0.99); }

.Site-highlight-one {
  z-index: auto;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transform: translate(0%, 0%) rotate(0deg);
          transform: translate(0%, 0%) rotate(0deg); }

.Site-highlight-two {
  z-index: auto; }

.Site-highlight-three {
  z-index: auto; }

.Site-highlight-one.loading {
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transition-duration: 5000ms;
          transition-duration: 5000ms;
  -webkit-transform: translate(-150%, -250%) rotate(45deg);
          transform: translate(-150%, -250%) rotate(45deg);
  z-index: auto; }

.Site-highlight-two.loading {
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transition-duration: 5000ms;
          transition-duration: 5000ms;
  -webkit-transform: translate(150%, -250%) rotate(-45deg);
          transform: translate(150%, -250%) rotate(-45deg);
  z-index: auto; }

.Site-highlight-three.loading {
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transition-duration: 5000ms;
          transition-duration: 5000ms;
  -webkit-transform: translate(-150%, 250%) rotate(45deg);
          transform: translate(-150%, 250%) rotate(45deg);
  z-index: auto; }

.nav-hightlight {
  position: absolute;
  top: 0;
  left: 0; }

.nav-hightlight-effect-info {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out; }

.nav-hightlight-effect-first {
  -webkit-transition: all 0.3s ease-out 0.2s;
  transition: all 0.3s ease-out 0.2s; }

.nav-hightlight-effect-second {
  -webkit-transition: all 0.3s ease-out 0.4s;
  transition: all 0.3s ease-out 0.4s; }

.nav-hightlight-effect-third {
  -webkit-transition: all 0.3s ease-out 0.6s;
  transition: all 0.3s ease-out 0.6s; }

.nav-hightlight-effect-info, .nav-hightlight-effect-first, .nav-hightlight-effect-second, .nav-hightlight-effect-third {
  -webkit-transform: translate3d(13px, 0, 0);
          transform: translate3d(13px, 0, 0);
  opacity: 0; }

.nav-hightlight-effect-start {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  opacity: 1; }

.nav-hightlight.grid-content {
  width: auto; }

.nav-hightlight.grid-content.-bg {
  width: 100%; }

.second-menu-wrapper.is-invisible, .nav-hightlight.is-invisible {
  display: none; }

.nav-hightlight-main {
  position: relative;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  padding-left: 13px;
  pointer-events: none;
  z-index: auto; }

.nav-hightlight-element h4, .nav-hightlight-element h5, .nav-hightlight-element .content {
  float: left;
  line-height: 26px; }

.nav-hightlight-element .animatedBG {
  position: absolute;
  padding: 8px 0px 4px 0px;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: -11;
  background-color: rgba(51, 51, 51, 0.1); }

.nav-hightlight-element h4 {
  position: relative;
  padding: 12px 10px 6px 10px;
  top: -12px;
  left: -10px;
  z-index: 100; }

.nav-hightlight-element h4.underlined::after {
  margin-top: 6px; }

.Site-highlight-one .round svg path {
  stroke: #F5DEDD; }

.Site-highlight-two .round svg path {
  stroke: #D8E333; }

.Site-highlight-three .round svg path {
  stroke: #A8F1E1; }

.nav-hightlight-element h5 {
  font-weight: 200;
  letter-spacing: 1px;
  font-style: normal;
  padding-right: 13px; }

.nav-hightlight-info {
  margin-left: 0; }

.nav-hightlight a, .nav-hightlight p {
  float: left;
  pointer-events: auto; }

.nav-hightlight-info {
  padding-bottom: 26px; }

.nav-hightlight-element a {
  padding-bottom: 13px; }

.Site-highlight-wrapper p {
  padding-bottom: 26px; }

.Site-highlight-wrapper h1 {
  padding-bottom: 26px; }

.grid-description a {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.grid-description {
  box-sizing: border-box;
  padding-left: 13px;
  padding-right: 13px;
  padding-top: 3px;
  padding-bottom: 17px; }

.grid-description-top p {
  margin-bottom: 13px; }

.highlight-desktop-image-txt {
  box-sizing: border-box;
  padding-left: 13px;
  padding-right: 13px;
  padding-top: 28px;
  padding-bottom: 18px; }

.highlight-desktop-image-txt p {
  padding-top: 0; }

.grid-description-top {
  height: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; }

.highlight-desktop-image-txt .info {
  margin-bottom: 8px; }

/* tablet */
@media only screen and (min-width: 768px) {
  .nav-hightlight.grid-content.-bg {
    width: auto; }
  .Site-highlight-left {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
  .Site-highlight-left img {
    bottom: auto;
    top: auto;
    /*
		width: 900px;
		height: 680px;
		*/
    max-height: 1024px;
    max-width: 1640px; }
  .nav-hightlight-info {
    margin-left: 39px; }
  .nav-hightlight-element a {
    padding-bottom: 13px; }
  .grid-highlight-left {
    height: 416px !important; }
  .main-content {
    padding-top: 52px; }
  .vertical-centered-content {
    margin: 0  auto; }
  .grid-description {
    padding-top: 22px; } }

@media only screen and (min-width: 1024px) {
  .nav-hightlight-main {
    padding-left: 26px; }
  .Site-highlight-left img {
    left: 50%; }
  .grid-highlight-left h2 {
    height: 100%;
    font-size: 48px;
    line-height: 52px; }
  .vertical-centered-content {
    margin-top: 52px; }
  .grid-highlight-left {
    height: 520px !important; }
  .grid-description, .highlight-desktop-image-txt {
    padding-left: 26px;
    padding-right: 26px; }
  .highlight-desktop-image-txt {
    padding-top: 84px; }
  .grid-description {
    padding-top: 47px; } }

@media only screen and (min-width: 1440px) {
  .grid-highlight-left {
    height: 624px !important; }
  .nav-hightlight-main {
    padding-left: 104px; }
  .Site-highlight-right {
    padding-left: 338px; }
    .Site-highlight-right .headline {
      -ms-flex-item-align: start;
          align-self: flex-start; } }

/*------------------------------------*/
/* Grid Layout */
/*------------------------------------*/
/*units*/
/*------------------------------------*/
.grid-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  height: 100%;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  margin: 0  auto; }

.grid-elt {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.grid-elt-wrapper, .grid-elt {
  box-sizing: border-box; }

.grid-elt-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 100%;
          flex: 1 100%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

.grid-half-height {
  height: 130px; }

.grid-one-height {
  height: 260px; }

.grid-one-width, .grid-two-width, .grid-three-width, .grid-four-width {
  -webkit-box-flex: 1;
      -ms-flex: 1 100%;
          flex: 1 100%; }

/* tablet */
@media only screen and (min-width: 768px) {
  /*
	.grid-content {
		height: 650px;
	}
	*/
  .grid-two-width {
    -webkit-box-flex: 1;
        -ms-flex: 1 50%;
            flex: 1 50%; }
  .grid-elt-wrapper {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap; }
  .grid-half-height {
    height: 104px; }
  .grid-one-height {
    height: 208px; } }

@media only screen and (min-width: 1024px) {
  .grid-one-width {
    -webkit-box-flex: 1;
        -ms-flex: 1 25%;
            flex: 1 25%; }
  .grid-two-width {
    -webkit-box-flex: 1;
        -ms-flex: 1 50%;
            flex: 1 50%; }
  .grid-three-width {
    -webkit-box-flex: 1;
        -ms-flex: 1 75%;
            flex: 1 75%; }
  .grid-four-width {
    -webkit-box-flex: 1;
        -ms-flex: 1 100%;
            flex: 1 100%; }
  .grid-half-height {
    height: 130px; }
  .grid-one-height {
    height: 260px; } }

@media only screen and (min-width: 1440px) {
  .vertical-centered-content {
    margin-top: 208px; }
  .grid-half-height {
    height: 156px; }
  .grid-one-height {
    height: 312px; } }

.nav-is-visible .nav-main {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition-timing-function: cubic-bezier(0.55, 0.54, 0.19, 1);
          transition-timing-function: cubic-bezier(0.55, 0.54, 0.19, 1); }

.nav-main {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition-duration: .6s;
          transition-duration: .6s;
  -webkit-transition-timing-function: cubic-bezier(0.81, 0, 0.5, 0.5);
          transition-timing-function: cubic-bezier(0.81, 0, 0.5, 0.5); }

.touch .nav-is-visible .nav-quote-bg, .no-touch .nav-is-visible .nav-quote-bg {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition-duration: 1.2s;
          transition-duration: 1.2s;
  -webkit-transition-timing-function: cubic-bezier(0, 0.55, 0.49, 0.99);
          transition-timing-function: cubic-bezier(0, 0.55, 0.49, 0.99); }

.touch .header-left .info, .touch .logo, .no-touch .header-left .info, .no-touch .logo {
  -webkit-transition-delay: .6s;
          transition-delay: .6s; }

.touch .nav-is-visible .header-left .info, .touch .nav-is-visible .logo, .no-touch .nav-is-visible .header-left .info, .no-touch .nav-is-visible .logo {
  color: #F9F7F2;
  -webkit-transition-delay: 0s;
          transition-delay: 0s; }

.touch .nav-is-visible .second-menu-wrapper, .no-touch .nav-is-visible .second-menu-wrapper {
  opacity: 0; }

.touch .second-menu-wrapper, .no-touch .second-menu-wrapper {
  opacity: 1;
  -webkit-transition: all .6s ease;
  transition: all .6s ease; }

.touch .right-navi-is-open .content-main, .touch .right-navi-is-open .project-main, .touch .right-navi-is-open .header-bg, .no-touch .right-navi-is-open .content-main, .no-touch .right-navi-is-open .project-main, .no-touch .right-navi-is-open .header-bg {
  opacity: .1;
  -webkit-transition: all .5s ease;
  transition: all .5s ease; }

.touch .main-content, .no-touch .main-content {
  opacity: 1;
  -webkit-transition: all .5s ease;
  transition: all .5s ease; }

.touch .menu-wrapper, .no-touch .menu-wrapper {
  -webkit-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out; }

.touch .right-navi-is-open .menu-wrapper, .no-touch .right-navi-is-open .menu-wrapper {
  -webkit-transition: none;
  transition: none; }

.one_highlight_color-background, .two_highlight_color-background, .three_highlight_color-background {
  -webkit-transition: background-color 1000ms linear;
  transition: background-color 1000ms linear; }

@media only screen and (min-width: 768px) {
  .no-touch .underlined:after, .no-touch .underlined:after, .no-touch .big-underlined:after, .no-touch .small-underlined:after {
    -webkit-transition: width .5s;
    transition: width .5s;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transition: -webkit-transform .4s;
    transition: -webkit-transform .4s;
    transition: transform .4s;
    transition: transform .4s, -webkit-transform .4s; }
  .no-touch .big-underlined:after {
    min-width: 104px;
    -webkit-transform: scaleX(0.5);
            transform: scaleX(0.5); }
  .no-touch .thumb-.big-underlined:after {
    min-width: 52px;
    -webkit-transform: scaleX(0.5);
            transform: scaleX(0.5); }
  .no-touch .menu-button .underlined:after, .no-touch .menu-button .big-underlined:after, .no-touch .menu-button .small-underlined:after, .no-touch a.nav-link .underlined::after {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: scaleX(0);
            transform: scaleX(0); }
  .no-touch a.thumb-hover-effect:hover .underlined::after, .no-touch .thumb-hover-effect:hover .big-underlined::after, .no-touch .thumb-hover-effect:hover .small-underlined:after, .no-touch a.nav-link:hover .underlined::after {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transition: -webkit-transform .4s;
    transition: -webkit-transform .4s;
    transition: transform .4s;
    transition: transform .4s, -webkit-transform .4s; }
  .no-touch .thumb-hover-preview-effect:hover .thumb-center-elt.with-image {
    box-shadow: inset 0 0 0 200px rgba(24, 24, 24, 0.5);
    -webkit-transition: box-shadow .4s;
    transition: box-shadow .4s; }
  .no-touch .thumb-hover-preview-effect .thumb-center-elt.with-image {
    box-shadow: inset 0 0 0 0 black;
    -webkit-transition: box-shadow .4s;
    transition: box-shadow .4s; }
  .no-touch .thumb-hover-preview-effect:hover .thumb-center-elt {
    box-shadow: inset 0 0 0 200px black;
    -webkit-transition: box-shadow .4s;
    transition: box-shadow .4s; }
  .no-touch .thumb-hover-preview-effect:hover .first-color-txt h3, .no-touch .thumb-hover-preview-effect:hover .first-color-txt p {
    color: #F9F7F2; }
  .no-touch .thumb-hover-preview-effect .thumb-image-Text {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transition: -webkit-transform .4s;
    transition: -webkit-transform .4s;
    transition: transform .4s;
    transition: transform .4s, -webkit-transform .4s; }
  .no-touch .thumb-hover-preview-effect:hover .thumb-image-Text {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    -webkit-transition: -webkit-transform .4s;
    transition: -webkit-transform .4s;
    transition: transform .4s;
    transition: transform .4s, -webkit-transform .4s; }
  .no-touch .thumb-hover-preview-effect .first-color-txt, .no-touch .thumb-hover-preview-effect .second-color-txt {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s; }
  .no-touch .thumb-hover-preview-effect:hover .first-color-txt, .no-touch .thumb-hover-preview-effect:hover .second-color-txt {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    -webkit-transition: -webkit-transform .8s;
    transition: -webkit-transform .8s;
    transition: transform .8s;
    transition: transform .8s, -webkit-transform .8s; }
  .no-touch .zoom-button-wrapper {
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out; }
  .no-touch .hover-zoomUp-effect .target-effect {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s; }
  .no-touch .hover-zoomUp-effect:hover .target-effect {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s; }
  .no-touch a.hover-effect:hover .underlined::after, .no-touch .hover-effect:hover .underlined::after, .no-touch a.hover-effect:hover .small-underlined::after, .no-touch .hover-effect:hover .small-underlined::after {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transition: -webkit-transform .4s;
    transition: -webkit-transform .4s;
    transition: transform .4s;
    transition: transform .4s, -webkit-transform .4s; }
  .no-touch .nav-hover-bg-effect {
    width: 100%;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transition: -webkit-transform .1s;
    transition: -webkit-transform .1s;
    transition: transform .1s;
    transition: transform .1s, -webkit-transform .1s;
    -webkit-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out; }
  .no-touch .nav-elt:hover .nav-hover-bg-effect {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    -webkit-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out; }
  .no-touch .nav-elt:hover h3 {
    -webkit-transition: color 0.5s ease;
    transition: color 0.5s ease;
    color: #333; }
  .no-touch .nav-elt h3 {
    -webkit-transition: color 0.5s ease;
    transition: color 0.5s ease; } }

@media only screen and (min-width: 1024px) {
  .no-touch .menu-button:hover .menuBgEffect p {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity .4s ease-out, -webkit-transform 0.6s;
    transition: opacity .4s ease-out, -webkit-transform 0.6s;
    transition: opacity .4s ease-out, transform 0.6s;
    transition: opacity .4s ease-out, transform 0.6s, -webkit-transform 0.6s;
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  .no-touch .menu-button:hover .menuBgEffect .topEffect, .no-touch .menu-button:hover .menuBgEffect .bottomEffect {
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0); } }

/*
	/* Keyword values
mix-blend-mode: normal;
mix-blend-mode: multiply; !!
mix-blend-mode: screen;
mix-blend-mode: overlay; !!
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light; !!
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity; !!
*/
.no-touch .thumb-hover-effect:hover .big-underlined::after {
  background-color: black !important;
  color: black !important; }

.no-touch .thumb-hover-effect:hover .second-color-txt h3 {
  color: black !important; }

.no-touch .thumb-hover-effect:hover .second-color-txt {
  mix-blend-mode: overlay; }

.no-touch .thumb-hover-preview-effect:hover .thumb-center-elt.with-image {
  box-shadow: inset 0 0 0 200px rgba(24, 24, 24, 0.5); }