/*
 Theme Name:   C54 TW Child
 Theme URI:    https://cloud54.eu
 Description:  Nifty child theme
 Author:       Cloud54
 Author URI:   http://cloud54.eu
 Template:     c54-tw
 Version:      1.0.4
 Tags:         one-column, right-sidebar, custom-menu, featured-images, sticky-post, theme-options, threaded-comments, translation-ready
 Text Domain:  c54-tw-child
*/

/* Theme customization starts here
-------------------------------------------------------------- */

:root {
  --theme-highlight-color: #d1a83d; /* #d8930b;*/
  --theme-light-font-weight: 400;
  --theme-extra-bold-font-weight: 600;
  --theme-bold-font-weight: 500;
  --theme-font-weight: 400;
  --theme-font-weight-bolder: 400;
  --theme-white: #ffffff;
  --theme-black: #000;
  --theme-menu-mobile-bg: #ffffff;
  --theme-menu-mobile-color: rgb(24, 24, 24);
  --theme-primary-font-color: rgb(55, 55, 55);
  --theme-font-color-light-gray: rgb(130, 130, 130);
  --theme-primary-background-color: #ffffff;
  --theme-second-background-color: #f7f7f5;
  --theme-color-light-gray: #e2e2e2;
  --theme-color-social-link: rgb(17, 24, 39);
  --theme-main-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  /*--theme-menu-font: 'Alexandria, Arial, Helvetica, sans-serif';*/
  --theme-font-family-sans-serif: 'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  --theme-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  /*,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"';*/
  --c54-shape-color: #d1a83d; /* #d8930b; */
  --theme-menu-font: Alexandria, Arial, Helvetica, sans-serif;
  --theme-alternative-heading-font: Alexandria, Arial, Helvetica, sans-serif;
  --theme-headline-font: 'Neuropa2', Alexandria, Arial, Helvetica, sans-serif;
  --c54-shape-color: #d1a83d; /*#d8930b;*/
  --c54-mask-top-color: #fff;
  --c54-mask-bottom-color: #fff;
  --theme-hero-background-position: -30vh;
  --c54-float-start-color: #e0512c;
  --c54-float-stop-color: #fff;
  --c54-float-stroke-color: #fff;
  --c54-color-regentx-green: #72c257; /* #88c477;*/
  --c54-color-regentx-blue: #003268; /* #548a9d */
  --c54-color-regentx-blue-2: #003268; /* #14A7FF */
  --c54-color-biocare: rgb(115, 194, 87);
  --c54-color-biocare-second: #e0512c;
  --c54-color-tiger: #d1a83d;
  --c54-color-extremity: #c45194;
  --c54-color-extremity-second: #3c7188;
  --c54-color-lizard: #f59c05;
  --c54-color-lizard-second: #f59c05;
  --c54-color-biocreations: #4ba6d5;
  --c54-color-biocreations-second: #4ba6d5;
  --c54-color-tiger-aesthetics: #d1a83d;
  --c54-color-tiger-aesthetics-second: #d1a83d;
  --c54-color-sientra: #d1a83d;
  --c54-color-sientra-second: #d1a83d;
  --c54-color-suneva: #115599;
  --c54-color-suneva-second: #115599;
  --c54-color-biostar: #00aeef;
  --c54-color-biostar-second: #8cc63f;
  --c54-tiger-red: #ae0911;
  --c54-color-airway: #002e3e;
  --c54-color-airway-second: #33ace3;
  --c54-color-revelle: #c99700;
  --c54-color-revelle-second: #6c3a5c;
  --c54-color-encore: #00aae9;
  --c54-color-encore-second: #1f2957;
  --tw-ring-color: #d1a83d;
  --theme-desktop-content-width: 79vw;
  --theme-desktop-space-left: calc(100vw / 12);
  --theme-desktop-space-right: calc(100vw / 12);
  --theme-desktop-negative-space-left: calc(100vw / -12);
  --theme-desktop-negative-space-right: calc(100vw / -12);
  --theme-col-width: calc(100vw / 12);
  --theme-container-padding-left: 1rem;
  --theme-container-padding-right: 1rem;
  --theme-border-color: #707070;
  --theme-content-color: #707070;
}

*,
::before,
::after {
  --tw-ring-color: #d1a83d;
}

:focus {
  outline: solid 1px #d1a83d;
}

@font-face {
  font-family: 'Quote';
  src: url(fonts/Quote.woff) format('woff'), url(fonts/Quote.ttf) format('truetype');
}

@font-face {
  font-family: 'Neuropa2';
  src: url('fonts/Neuropa_Extra_Light.otf') format('opentype');
  font-weight: 200; /* Extra Light */
  font-style: normal;
}

@font-face {
  font-family: 'Neuropa2';
  src: url('fonts/Neuropa_Light.otf') format('opentype');
  font-weight: 300; /* Light */
  font-style: normal;
}

@font-face {
  font-family: 'Neuropa2';
  src: url('fonts/Neuropa_Medium.otf') format('opentype');
  font-weight: 500; /* Medium */
  font-style: normal;
}

@font-face {
  font-family: 'Neuropa2';
  src: url('fonts/Neuropa_Bold.otf') format('opentype');
  font-weight: 700; /* Bold */
  font-style: normal;
}

@font-face {
  font-family: 'Neuropa2';
  src: url('fonts/Neuropa_Heavy.otf') format('opentype');
  font-weight: 900; /* Heavy */
  font-style: normal;
}


.roboto-thin {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: 'Roboto', sans-serif;
  font-weight: var(--theme-light-font-weight);
  font-style: normal;
}

.roboto-regular {
  font-family: 'Roboto', sans-serif;
  font-weight: var(--theme-font-weight);
  font-style: normal;
}

.roboto-medium {
  font-family: 'Roboto', sans-serif;
  font-weight: var(--theme-bold-font-weight);
  font-style: normal;
}

.roboto-bold {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: 'Roboto', sans-serif;
  font-weight: var(--theme-light-font-weight);
  font-style: italic;
}

.roboto-regular-italic {
  font-family: 'Roboto', sans-serif;
  font-weight: var(--theme-font-weight);
  font-style: italic;
}

.roboto-medium-italic {
  font-family: 'Roboto', sans-serif;
  font-weight: var(--theme-bold-font-weight);
  font-style: italic;
}

.roboto-bold-italic {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-style: italic;
}

* {
  margin: 0;
  padding: 0;
}
html,
body {
  font-family: var(--theme-main-font);
  color: var(--theme-primary-font-color);
  font-size: var(--theme-base-font-size);
  list-style: var(--theme-base-line-height);
  background-color: var(--theme-primary-background-color);
  width: 100vw;
  max-width: 100vw;
  min-width: 100vw;
  min-height: 100vh;
  overflow: hidden scroll;
}

h1 {
  font-size: min(3.5rem, 15vw);
  font-weight: var(--theme-extra-bold-font-weight);
  line-height: 1.3;
  letter-spacing: -1px;
  font-family: var(--theme-headline-font);
  color: var(--theme-primary-font-color);
}

h2 {
  font-size: min(3rem, 10vw);
  font-weight: var(--theme-bold-font-weight);
  line-height: 1.2;
  letter-spacing: -1px;
  font-family: var(--theme-headline-font);
  color: var(--theme-primary-font-color);
}

h3 {
  font-size: min(2.75rem, 8vw);
  font-weight: var(--theme-bold-font-weight);
  line-height: 1.2;
  letter-spacing: -1px;
  font-family: var(--theme-headline-font);
  /*color: var(--theme-primary-font-color);*/
  color: var(--c54-tiger-red);
  padding-bottom: min(2rem, 8vw);
}

h4 {
  font-size: min(1.4375rem, 5vw);
  /*font-weight: var(--theme-font-weight);*/
  font-weight: var(--theme-font-weight-bolder);
  line-height: 1.1;
  letter-spacing: 0;
  font-family: var(--theme-main-font);
  color: var(--theme-primary-font-color);
  margin-bottom: 0.5rem;
}

h5 {
  font-size: 1.4375rem;
  font-weight: var(--theme-font-weight);
  line-height: 1.2;
  letter-spacing: 0;
  font-family: var(--theme-main-font);
  color: var(--theme-primary-font-color);
}

h6 {
  font-size: 1.4375rem;
  font-weight: var(--theme-font-weight);
  line-height: 1;
  letter-spacing: -1px;
  font-family: var(--theme-main-font);
  color: var(--theme-primary-font-color);
}

p,
div,
span {
  font-size: min(1.2rem, 4vw);
  font-weight: var(--theme-light-font-weight);
  line-height: 1.6;
  letter-spacing: 0;
  font-family: var(--theme-main-font);
  /*color: var(--theme-primary-font-color);*/
  color: var(--theme-content-color);
}

p {
  margin-bottom: 1rem;
}

strong,
b {
  font-size: 1.5rem;
  font-weight: var(--theme-bold-font-weight);
}

section {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  /* overflow: hidden; */
}

section:not(.c54-company-hero) {
  div.container {
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-right: 1rem;
    padding-left: 1rem;
    max-width: 100vw;
  }
}

ul {
  list-style: inside disc;
  list-style-position: outside;
  padding-left: 1.3rem;
}

.static-logo {
  display: none;
}

.top-wave-9 {
  padding-bottom: 3rem;
}

@media (min-width: 1024px) {
  h1 {
    line-height: 1.5;
  }
  h2 {
    line-height: 1.4;
  }
  section:not(.c54-company-hero) {
    div.container {
      padding-left: 2rem;
      padding-right: 2rem;
      max-width: 90vw;
    }
  }
  .top-wave-9 {
    padding-bottom: unset;
  }

  .static-logo {
    position: absolute;
    top: 8rem;
    left: 4rem;
    display: block;
    width: 150px;
    position: relative;
    z-index: 12;
  }
  section:not(.c54-company-hero) {
    div.container {
      padding-left: 4rem;
      padding-right: 4rem;
      max-width: 80vw;
    }
  }
}

@media (min-width: 1280px) {
  .static-logo {
    top: 8rem;
    left: 8rem;
  }

  section:not(.c54-company-hero) {
    div.container {
      max-width: 70vw;
    }
  }
}


.osm-company-logo.encore {
  max-width: 60%;
}

.osm-company-logo.healpack {
  max-width: 60%;
}

@media (max-width: 639px) {
  .osm-company-logo.encore {
    max-width: 80%;
    min-width: 80%;
    margin-left: auto;
  }

  .osm-company-logo.healpack {
    max-width: 100%;
    min-width: 100%;
    margin-left: auto;
  }
}

.svg-wrapper {
  max-width: 120px;
  max-height: 80px;
  svg {
    fill: var(--c54-color-tiger);
    max-height: 80px;   

  }
}


.portrait-shape {
  -moz-mask-size: 100% 70% !important;
  -ms-mask-size: 100% 70% !important;
  -o-mask-size: 100% 70% !important;
  -webkit-mask-size: 100% 70% !important;
  mask-size: 100% 70% !important;
}


.max-w-60vw {
 max-width: 60vw !important;
 width: 100% !important;
}

.max-w-70vw {
 max-width: 70vw !important;
 width: 100% !important;
}

.small-icon {
  img {
    max-width: min(200px, 50%);
  }
}

.small-logo {
    max-width: 65%;
}

.top-border {
  border-top: 2px solid var(--theme-border-color);
}

.bottom-border {
  border-bottom: 2px solid var(--theme-border-color);
}

p.dark {
  color: var(--theme-primary-font-color);
}

.font-sm {
  font-size: 1rem;
}

.round-logo-box {
  background-color: #f7f7f5;
  border-radius: 5rem;
  padding: 2rem;
  .div.c54-sub-grid.cols-2 {
    column-gap: 5rem;
    padding-right: 5rem;
  }
}

img.overview-logo-v2 {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

img.overview-logo {
  /*
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  */
    margin-left: 0;
    margin-right: auto;
    height: 50px;
    width: auto;
}

h3.smaller-headline {
  font-size: min(1.75rem, 4.5vw);
}

.background-alt {
  background-color: #f7f7f5;
}

div.c54-image-block-text-content-v2 {
  div.block-headline-smaller {
    h3.c54-text-block-title  {
      font-size: min(1.75rem, 4.5vw) !important;
    }
  }
}

.mt--2 {
  margin-top: -2rem;
  overflow: visible;
  z-index: 3;
}

.mt--3 {
  margin-top: -3rem;
  overflow: visible;
  z-index: 3;
}

.mt--4 {
  margin-top: -4.75rem;
  overflow: visible;
  z-index: 3;
}

.top--2 {
  top: -2px !important;
}

.c54-float-image-block-top-left-new {
  position: absolute;
  z-index: 4;
  left: 72vw;
  height: calc(65vw * 0.911); 
  top: max(2vh, 2vw);
  img {
    animation: float-top-down-extra-short 8s ease-in-out;
    animation-delay: 200ms;
    animation-iteration-count: infinite;
    /* max-height: 25vw; */
    width: 100%;
    max-width: 55vw;
    max-height: 45vh;
  }

}

.headline-wrapper {
  .headline.uppercase.white {
    h1 {
      color: white;
    }
  }
  .headline.uppercase.right {
    left: unset;
    margin-right: var(--theme-col-width);
    h1 {
      margin-left: auto;
      width: fit-content;
    }
  }
  .pre-headline.right {
    left: unset;
    margin-right: var(--theme-col-width);
    h4 {
      margin-left: auto;
      width: fit-content;
    }
  }
}

.font-color-2 {
  color: #e1912d;
  h4 {
    color: #e1912d;
  }
}

.c54-float-hero-bottom-right-img-new {
  position: absolute;
  z-index: 4;
  right: 2vw;
  width: 40vw;
  bottom: -4vh;
  img {
    animation: float-top-down-short 10s ease-in-out;
    animation-delay: 600ms;
    animation-iteration-count: infinite;
    max-height: 30vh;
  }
}

.c54-float-hero-bottom-right-img-new-2 {
  position: absolute;
  z-index: 4;
  right: 2vw;
  width: 40vw;
  bottom: 16vh;
  img {
    animation: float-top-down-short 10s ease-in-out;
    animation-delay: 600ms;
    animation-iteration-count: infinite;
    max-height: 30vh;
  }
}

.c54-float-hero-bottom-left-img-new {
  position: absolute;
  z-index: 10;
  left: 10vw;
  width: 20vw;
  bottom: 5vh;
  
  img {
    animation: float-top-down-short 10s ease-in-out;
    animation-delay: 600ms;
    animation-iteration-count: infinite;
    max-height: 50vh;
    transform: rotate(120deg) !important;
  }
}

.c54-float-hero-bottom-left-img-new-2 {
  position: absolute;
  z-index: 10;
  left: 10vw;
  width: 20vw;
  bottom: 15vh;
  
  img {
    animation: float-top-down-short 10s ease-in-out;
    animation-delay: 600ms;
    animation-iteration-count: infinite;
    max-height: 50vh;
    transform: rotate(120deg) !important;
  }
}

.videoheader.mobile-height {
  height: 90vh;
}
.video-background {
  img.mobile-height {
    height: 90vh;
  }
}

ul#main-nav-list {
  svg {
    display: none !important;
  }
}

.grid-logo {
  max-width: 80vw;
  margin-left: auto;
  margin-right: auto;
}

.hero-overlay {
  position: absolute; 
  object-position: 0%;
}

.h90 {
 height: 90vh !important;
}

@media (max-width: 767px) {

  .mt--8 {
    margin-top: -8rem;
  }
  body > #myHeader.header-sticky {
    margin-top: 0px;
    margin-left: calc(100vw / 6);
    margin-right: 0;
  }
  #myHeader.header1 {
    background: transparent;
    box-shadow: unset;
    margin-top: 0px;
    margin-left: calc(100vw / 6);
    margin-right: 0;
    nav {
      div {
        .toggle-btn {
          background-color: transparent;
          color: white;
          svg {
            color: white;
            fill: white;
          }
        }
      }
    }
  }

  #myHeader {
    nav {
      div {    
        a {
          display: none;
        }
      }
    }
  }
}
@media (min-width: 768px) {

  .md\:mt--4 {
    margin-top: -4.75rem;
    overflow: visible;
    z-index: 3;
  }

  .grid-logo {
    max-width: 258px;
    margin-left: auto;
    margin-right: auto;
  }

  ul#main-nav-list {
    svg {
      display: inline;
    }
  }

  .videoheader.mobile-height {
    height: unset;
  }

  .video-background {
    img.mobile-height {
      height: unset;
    }
  }

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

  img.overview-logo {
    margin-left: 25%;
    margin-right: auto;
    /* max-width: min(50%, 431px); */
    width: auto;
    max-height: 80px;
  }

  img.overview-logo-v2 {
    max-width: 50%;
    width: auto;
    max-height: 80px;
    margin-right: auto;
    margin-left: auto;
  }

  img.overview-logo.big {
    /*max-width: min(50%, calc(431px * 1.38));*/
    width: auto;
    max-height: 80px;
  }

  img.overview-logo.medium {
    /*max-width: min(50%, calc(431px * 1.09));*/
    width: auto;
    max-height: 80px;
  }

  .round-logo-box {
    padding: 3rem;
  }
  .c54-float-hero-bottom-right-img-new {
      bottom: 4vh;
      right: -4vw;
  }
  .c54-float-hero-bottom-right-img-new-2 {
    bottom: 4vh;
    right: -4vw;
}
  .c54-float-hero-bottom-left-img-new {
    bottom: 5vh;
    width: 200px;
    top: unset;
  }

  .c54-float-hero-bottom-left-img-new-2 {
    bottom: 5vh;
    width: 200px;
    top: unset;
  }

  #myHeader.menu-small {
    max-width: 50vw !important;
    left: unset;
    right: var(--theme-desktop-space-right);
    nav {
      div {
        
        a {
          display: none;
        }
        #main-nav {
          padding-left: 0 !important;
        }
        li.li-depth-1 {
          a.block {
            display: block;
          }
        }
      }
    }
  }
}

.obj-00 {
  object-position: 0% 0%;
}