/*
 * Obfuscated filename: tg-5433142191.css
 */

@charset "utf-8";

/* Declaring needed fonts */
	/* Font used in body. */
    @font-face {
      font-family: 'Open sans';
      font-style: normal;
      font-weight: 300;
      src: local('Open sans'), url('/typo3conf/ext/dstemplate/Resources/Public/Fonts/mem5YaGs126MiZpBA-UN_r8OUuhpKKSTjw.woff2') format('woff');
    }
    @font-face {
      font-family: 'Open sans';
      font-style: normal;
      font-weight: 400;
      src: local('Open sans'), url('/typo3conf/ext/dstemplate/Resources/Public/Fonts/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2') format('woff');
    }
    @font-face {
      font-family: 'Open sans';
      font-style: normal;
      font-weight: 700;
      src: local('Open sans'), url('/typo3conf/ext/dstemplate/Resources/Public/Fonts/mem5YaGs126MiZpBA-UN7rgOUuhpKKSTjw.woff2') format('woff');
    }

  /* Font used for form fields, triton-lab headers and in aquaria-list (original https://fonts.gstatic.com/s/notosans/v9/o-0IIpQlx3QUlC5A4PNr5TRASf6M7Q.woff2) */
    @font-face {	/* latin */
      font-family: 'Noto Sans';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: local('Noto Sans'), local('NotoSans'), url('/typo3conf/ext/dstemplate/Resources/Public/Fonts/o-0IIpQlx3QUlC5A4PNr5TRASf6M7Q.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

/* Reset */
  html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,main{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/* General */
  * {
    outline: 0;
    box-sizing: border-box
  }
  html,
  body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px
  }
  b,
  strong {
    font-weight: 700
  }
  button {
    cursor: pointer
  }
  a {
    text-decoration: none
  }
  label {
    display: block;
    line-height: 24px;
    font-size: 14px;
    color: #777;
    -webkit-text-fill-color: #777
  }
  .noscroll {
    overflow-y: hidden!important
  }

  @keyframes fadeout {
    0% { opacity: 1 }
    50% { opacity: 1 }
    100% { opacity: 0 }
  }

  .hidden {
    opacity: 0 !important;
    display: none !important
  }

  .hidden-soft {
    opacity: 0 !important
  }

  .text-center {
    text-align: center
  }

  .zero-height {
    height: 0px !important;
    width: 0px !important;
    right: -100px !important
  }

  .text-center {
    text-align: center;
  }

  /* Ajax loader animation */
    .loader{color:#fff;position:fixed;box-sizing:border-box;left:-9999px;top:-9999px;width:0;height:0;overflow:hidden;z-index:999999}.loader:after,.loader:before{box-sizing:border-box;display:none}.loader.is-active{background-color:rgba(0,0,0,.85);width:100%;height:100%;left:0;top:0}.loader.is-active:after,.loader.is-active:before{display:block}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes blink{0%{opacity:.5}to{opacity:1}}.loader[data-text]:before{position:fixed;left:0;top:50%;color:currentColor;font-family:Helvetica,Arial,sans-serif;text-align:center;width:100%;font-size:14px}.loader[data-text=""]:before{content:"Loading"}.loader[data-text]:not([data-text=""]):before{content:attr(data-text)}.loader[data-text][data-blink]:before{animation:blink 1s linear infinite alternate}.loader-default[data-text]:before{top:calc(50% - 63px)}.loader-default:after{content:"";position:fixed;width:68px;height:68px;border:1px solid #fff;border-left-color:transparent;border-radius:50%;top:calc(50% - 33px);left:calc(50% - 33px);animation:rotation 1s linear infinite}.loader-default[data-half]:after{border-right-color:transparent}.loader-default[data-inverse]:after{animation-direction:reverse}.loader-double:after,.loader-double:before{content:"";position:fixed;border-radius:50%;border:8px solid;animation:rotation 1s linear infinite}.loader-double:after{width:48px;height:48px;border-color:#fff;border-left-color:transparent;top:calc(50% - 24px);left:calc(50% - 24px)}.loader-double:before{width:64px;height:64px;border-color:#eb974e;border-right-color:transparent;animation-duration:2s;top:calc(50% - 32px);left:calc(50% - 32px)}.loader-bar[data-text]:before{top:calc(50% - 40px);color:#fff}.loader-bar:after{content:"";position:fixed;top:50%;left:50%;width:200px;height:20px;transform:translate(-50%,-50%);background:linear-gradient(-45deg,#4183d7 25%,#52b3d9 0,#52b3d9 50%,#4183d7 0,#4183d7 75%,#52b3d9 0,#52b3d9);background-size:20px 20px;box-shadow:inset 0 10px 0 hsla(0,0%,100%,.2),0 0 0 5px rgba(0,0,0,.2);animation:moveBar 1.5s linear infinite reverse}.loader-bar[data-rounded]:after{border-radius:15px}.loader-bar[data-inverse]:after{animation-direction:normal}@keyframes moveBar{0%{background-position:0 0}to{background-position:20px 20px}}.loader-bar-ping-pong:before{width:200px;background-color:#000}.loader-bar-ping-pong:after,.loader-bar-ping-pong:before{content:"";height:20px;position:absolute;top:calc(50% - 10px);left:calc(50% - 100px)}.loader-bar-ping-pong:after{width:50px;background-color:#f19;animation:moveBarPingPong .5s linear infinite alternate}.loader-bar-ping-pong[data-rounded]:before{border-radius:10px}.loader-bar-ping-pong[data-rounded]:after{border-radius:50%;width:20px;animation-name:moveBarPingPongRounded}@keyframes moveBarPingPong{0%{left:calc(50% - 100px)}to{left:calc(50% - -50px)}}@keyframes moveBarPingPongRounded{0%{left:calc(50% - 100px)}to{left:calc(50% - -80px)}}@keyframes corners{6%{width:60px;height:15px}25%{width:15px;height:15px;left:calc(100% - 15px);top:0}31%{height:60px}50%{height:15px;top:calc(100% - 15px);left:calc(100% - 15px)}56%{width:60px}75%{width:15px;left:0;top:calc(100% - 15px)}81%{height:60px}}.loader-border[data-text]:before{color:#fff}.loader-border:after{content:"";position:absolute;top:0;left:0;width:15px;height:15px;background-color:#ff0;animation:corners 3s ease both infinite}.loader-ball:before{content:"";position:absolute;width:50px;height:50px;top:50%;left:50%;margin:-25px 0 0 -25px;background-color:#fff;border-radius:50%;z-index:1;animation:kickBall 1s infinite alternate ease-in both}.loader-ball[data-shadow]:before{box-shadow:inset -5px -5px 10px 0 rgba(0,0,0,.5)}.loader-ball:after{content:"";position:absolute;background-color:rgba(0,0,0,.3);border-radius:50%;width:45px;height:20px;top:calc(50% + 10px);left:50%;margin:0 0 0 -22.5px;z-index:0;animation:shadow 1s infinite alternate ease-out both}@keyframes shadow{0%{background-color:transparent;transform:scale(0)}40%{background-color:transparent;transform:scale(0)}95%{background-color:rgba(0,0,0,.75);transform:scale(1)}to{background-color:rgba(0,0,0,.75);transform:scale(1)}}@keyframes kickBall{0%{transform:translateY(-80px) scaleX(.95)}90%{border-radius:50%}to{transform:translateY(0) scaleX(1);border-radius:50% 50% 20% 20%}}.loader-smartphone:after{content:"";color:#fff;font-size:12px;font-family:Helvetica,Arial,sans-serif;text-align:center;line-height:120px;position:fixed;left:50%;top:50%;width:70px;height:130px;margin:-65px 0 0 -35px;border:5px solid #fd0;border-radius:10px;box-shadow:inset 0 5px 0 0 #fd0;background:radial-gradient(circle at 50% 90%,rgba(0,0,0,.5) 6px,transparent 0),linear-gradient(0deg,#fd0 22px,transparent 0),linear-gradient(0deg,rgba(0,0,0,.5) 22px,rgba(0,0,0,.5));animation:shake 2s cubic-bezier(.36,.07,.19,.97) both infinite}.loader-smartphone[data-screen=""]:after{content:"Loading"}.loader-smartphone:not([data-screen=""]):after{content:attr(data-screen)}@keyframes shake{5%{transform:translate3d(-1px,0,0)}10%{transform:translate3d(1px,0,0)}15%{transform:translate3d(-1px,0,0)}20%{transform:translate3d(1px,0,0)}25%{transform:translate3d(-1px,0,0)}30%{transform:translate3d(1px,0,0)}35%{transform:translate3d(-1px,0,0)}40%{transform:translate3d(1px,0,0)}45%{transform:translate3d(-1px,0,0)}50%{transform:translate3d(1px,0,0)}55%{transform:translate3d(-1px,0,0)}}.loader-clock:before{width:120px;height:120px;border-radius:50%;margin:-60px 0 0 -60px;background:linear-gradient(180deg,transparent 50%,#f5f5f5 0),linear-gradient(90deg,transparent 55px,#2ecc71 0,#2ecc71 65px,transparent 0),linear-gradient(180deg,#f5f5f5 50%,#f5f5f5 0);box-shadow:inset 0 0 0 10px #f5f5f5,0 0 0 5px #555,0 0 0 10px #7b7b7b;animation:rotation infinite 2s linear}.loader-clock:after,.loader-clock:before{content:"";position:fixed;left:50%;top:50%;overflow:hidden}.loader-clock:after{width:60px;height:40px;margin:-20px 0 0 -15px;border-radius:20px 0 0 20px;background:radial-gradient(circle at 14px 20px,#25a25a 10px,transparent 0),radial-gradient(circle at 14px 20px,#1b7943 14px,transparent 0),linear-gradient(180deg,transparent 15px,#2ecc71 0,#2ecc71 25px,transparent 0);animation:rotation infinite 24s linear;transform-origin:15px center}.loader-curtain:after,.loader-curtain:before{position:fixed;width:100%;top:50%;margin-top:-35px;font-size:70px;text-align:center;font-family:Helvetica,Arial,sans-serif;overflow:hidden;line-height:1.2;content:"Loading"}.loader-curtain:before{color:#666}.loader-curtain:after{color:#fff;height:0;animation:curtain 1s linear infinite alternate both}.loader-curtain[data-curtain-text]:not([data-curtain-text=""]):after,.loader-curtain[data-curtain-text]:not([data-curtain-text=""]):before{content:attr(data-curtain-text)}.loader-curtain[data-brazilian]:before{color:#f1c40f}.loader-curtain[data-brazilian]:after{color:#2ecc71}.loader-curtain[data-colorful]:before{animation:maskColorful 2s linear infinite alternate both}.loader-curtain[data-colorful]:after{animation:curtain 1s linear infinite alternate both,maskColorful-front 2s 1s linear infinite alternate both;color:#000}@keyframes maskColorful{0%{color:#3498db}49.5%{color:#3498db}50.5%{color:#e74c3c}to{color:#e74c3c}}@keyframes maskColorful-front{0%{color:#2ecc71}49.5%{color:#2ecc71}50.5%{color:#f1c40f}to{color:#f1c40f}}@keyframes curtain{0%{height:0}to{height:84px}}.loader-music:after,.loader-music:before{content:"";position:fixed;width:240px;height:240px;top:50%;left:50%;margin:-120px 0 0 -120px;border-radius:50%;text-align:center;line-height:240px;color:#fff;font-size:40px;font-family:Helvetica,Arial,sans-serif;text-shadow:1px 1px 0 rgba(0,0,0,.5);letter-spacing:-1px}.loader-music:after{backface-visibility:hidden}.loader-music[data-hey-oh]:after,.loader-music[data-hey-oh]:before{box-shadow:0 0 0 10px}.loader-music[data-hey-oh]:before{background-color:#fff;color:#000;animation:coinBack 2.5s linear infinite,oh 5s 1.25s linear infinite both}.loader-music[data-hey-oh]:after{background-color:#000;animation:coin 2.5s linear infinite,hey 5s linear infinite both}.loader-music[data-no-cry]:after,.loader-music[data-no-cry]:before{background:linear-gradient(45deg,#009b3a 50%,#fed100 51%);box-shadow:0 0 0 10px #000}.loader-music[data-no-cry]:before{animation:coinBack 2.5s linear infinite,cry 5s 1.25s linear infinite both}.loader-music[data-no-cry]:after{animation:coin 2.5s linear infinite,no 5s linear infinite both}.loader-music[data-we-are]:before{animation:coinBack 2.5s linear infinite,theWorld 5s 1.25s linear infinite both;background:radial-gradient(ellipse at center,#4ecdc4 0,#556270)}.loader-music[data-we-are]:after{animation:coin 2.5s linear infinite,weAre 5s linear infinite both;background:radial-gradient(ellipse at center,#26d0ce 0,#1a2980)}.loader-music[data-rock-you]:before{animation:coinBack 2.5s linear infinite,rockYou 5s 1.25s linear infinite both;background:#444}.loader-music[data-rock-you]:after{animation:coin 2.5s linear infinite,weWill 5s linear infinite both;background:#96281b}@keyframes coin{to{transform:rotateY(359deg)}}@keyframes coinBack{0%{transform:rotateY(180deg)}50%{transform:rotateY(1turn)}to{transform:rotateY(180deg)}}@keyframes hey{0%{content:"Hey!"}50%{content:"Let's!"}to{content:"Hey!"}}@keyframes oh{0%{content:"Oh!"}50%{content:"Go!"}to{content:"Oh!"}}@keyframes no{0%{content:"No..."}50%{content:"no"}to{content:"No..."}}@keyframes cry{0%{content:"woman"}50%{content:"cry!"}to{content:"woman"}}@keyframes weAre{0%{content:"We are"}50%{content:"we are"}to{content:"We are"}}@keyframes theWorld{0%{content:"the world,"}50%{content:"the children!"}to{content:"the world,"}}@keyframes weWill{0%{content:"We will,"}50%{content:"rock you!"}to{content:"We will,"}}@keyframes rockYou{0%{content:"we will"}50%{content:"\1F918"}to{content:"we will"}}.loader-pokeball:before{content:"";position:absolute;width:100px;height:100px;top:50%;left:50%;margin:-50px 0 0 -50px;background:linear-gradient(180deg,red 42%,#000 0,#000 58%,#fff 0);background-repeat:no-repeat;background-color:#fff;border-radius:50%;z-index:1;animation:movePokeball 1s linear infinite both}.loader-pokeball:after{content:"";position:absolute;width:24px;height:24px;top:50%;left:50%;margin:-12px 0 0 -12px;background-color:#fff;border-radius:50%;z-index:2;animation:movePokeball 1s linear infinite both,flashPokeball .5s infinite alternate;border:2px solid #000;box-shadow:0 0 0 5px #fff,0 0 0 10px #000}@keyframes movePokeball{0%{transform:translateX(0) rotate(0)}15%{transform:translatex(-10px) rotate(-5deg)}30%{transform:translateX(10px) rotate(5deg)}45%{transform:translatex(0) rotate(0)}}@keyframes flashPokeball{0%{background-color:#fff}to{background-color:#fd0}}.loader-bouncing:after,.loader-bouncing:before{content:"";width:20px;height:20px;position:absolute;top:calc(50% - 10px);left:calc(50% - 10px);border-radius:50%;background-color:#fff;animation:kick .6s infinite alternate}.loader-bouncing:after{margin-left:-30px;animation:kick .6s infinite alternate}.loader-bouncing:before{animation-delay:.2s}@keyframes kick{0%{opacity:1;transform:translateY(0)}to{opacity:.3;transform:translateY(-1rem)}}
    .loader-logo {
      background-image: url(/typo3conf/ext/dstemplate/Resources/Public/Images/triton-logo-sprite-2x.png);
      background-size: 250px 50px;
      display: block;
      height: 50px;
      width: 50px;
      position: absolute;
      top: calc(50% - 24px);
      left: calc(50% - 24px)
    }
    .loader-logo-triton {
      background-position: 1px 0
    }
    .loader-logo-triton-lab {
      background-position: -50px 0
    }
    .loader-logo-triton-reagents {
      background-position: -100px 0
    }
    .loader-logo-triton-learn {
      background-position: -200px 0
    }
    .loader-logo-triton-pro {
      background-position: -400px 0
    }
    @keyframes loaderLogoAnimation {
      0% {
        opacity: 1
      }
      50% {
        opacity: 0
      }
      100% {
        opacity: 1
      }
    }
    @-o-keyframes loaderLogoAnimation {
      0% {
        opacity: 1
      }
      50% {
        opacity: 0
      }
      100% {
        opacity: 1
      }
    }
    @-moz-keyframes loaderLogoAnimation {
      0% {
        opacity: 1
      }
      50% {
        opacity: 0
      }
      100% {
        opacity: 1
      }
    }
    @-webkit-keyframes loaderLogoAnimation {
      0% {
        opacity: 1
      }
      50% {
        opacity: 0
      }
      100% {
        opacity: 1
      }
    }
    .animate-loader-logo {
      -webkit-animation: loaderLogoAnimation 1s infinite;
      -moz-animation: loaderLogoAnimation 1s infinite;
      -o-animation: loaderLogoAnimation 1s infinite;
      animation: loaderLogoAnimation 1s infinite
    }

  /* settings-icon */
    #settings-icons {
      position: fixed;
      bottom: 65px;
      right: 20px;
      z-index: 9
    }

    .settings-icon {
      position: absolute;
      right: 0px;
      font-size: 22px;
      height: 50px;
      bottom: -49px;
      width: 50px;
      text-align: center;
      border-radius: 25px;
      cursor: pointer;
      background: #b1b0b0;
      color: #fff;
      -webkit-text-fill-color: #fff;
      transition: height 0.4s ease-out;
      opacity: 0.3
    }

    .settings-icon:hover, .settings-icon-main-clicked {
      background: #e07950;
      background: var(--lower-right-icons-bg-color);
      opacity: 1
    }

    #settings-icon-main .fa-user-cog {
      position: absolute;
      top: 12px;
      left: 13px
    }

    /* settings-subicon */
      #settings-subicons {
        transition: all 0.2s ease-out
      }
      
      #settings-icon-subicon-fingerprint {
        border-radius: 0px;
        bottom: 25px;
        font-size: 27px
      }

      #settings-icon-subicon-sliders {
        border-radius: 0px;
        bottom: 93px;
        font-size: 27px
      }

    /* Hexagon subitems */
      .hexagon-icon {
        width: 50px;
        height: calc(57.735px / 2);
        background: #b1b0b0
      }
      .hexagon-icon:hover {
        background: #e07950;
        background: var(--lower-right-icons-bg-color)
      }
      .hexagon-icon::before {
        content: "";
        position: absolute;
        top: calc(-28.8675px / 2);
        left: 0;
        width: 0;
        height: 0;
        border-left: calc(50px / 2) solid transparent;
        border-right: calc(50px / 2) solid transparent;
        border-bottom: calc(28.8675px / 2) solid #b1b0b0
      }
      .hexagon-icon:hover::before {
        border-bottom: calc(28.8675px / 2) solid var(--lower-right-icons-bg-color)
      }
      .hexagon-icon::after {
        content: "";
        position: absolute;
        bottom: calc(-28.8675px / 2);
        left: 0;
        width: 0;
        height: 0;
        border-left: calc(50px / 2) solid transparent;
        border-right: calc(50px / 2) solid transparent;
        border-top: calc(28.8675px / 2) solid #b1b0b0
      }
      .hexagon-icon:hover::after {
        border-top: calc(28.8675px / 2) solid var(--lower-right-icons-bg-color);
      }
      @media screen and (max-width: 766px){
        .hexagon-icon::before {
          border-bottom: calc(29.8675px / 2) solid grey
        }
        .hexagon-icon::after {
          bottom: calc(-26.8675px / 2)
        }
      }

  /* back-to-top button*/
    .back-to-top {
      background: grey;
      background: var(--lower-right-icons-bg-color);
      position: fixed;
      bottom: 70px;
      right: 27px;
      z-index: 9;
      font-size: 40px;
      height: 36px;
      width: 36px;
      text-align: center;
      color: #fff;
      -webkit-text-fill-color: #fff;
      opacity: 0.3
    }
    .back-to-top:hover {
      opacity: 1
    }

  /* For error page 404 */
    #page-error-content {
      margin-top: 40px
    }
    #page-error-content #tarb_url_last_visit {
      font-style: italic
    }
    #page-error-content #tarb_url_last_visit.page-error-content-tritonlab {
      color: #ce5827;
      -webkit-text-fill-color: #ce5827
    }

  /* Content management */
    .row {
        margin: 0 -1px
    }
    .row:before,
    .row:after {
      clear: both;
      display: table;
      content: ''
    }
    .c50 {
      float: left;
      width: 50%;
      padding: 0 1px
    }
    .c25 {
      float: left;
      width: 25%;
      padding: 0 1px
    }
    .float-l {
      float: left
    }
    .float-r {
      float: right
    }
    .wrap,
    .content-element.big-wrap {
      max-width: 1090px;
      margin-left: auto;
      margin-right: auto
    }
    .button {
      cursor: pointer;
      text-align: center;
      text-transform: uppercase;
      font-size: 12px;
      line-height: 30px;
      padding: 0 15px;
      border-radius: 3px;
      height: 30px;
      border: 1px solid;
      display: inline-block;
      transition: all .2s;
      transition-property: background, color;
      text-decoration: none;
      box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.2)
    }
    .button:hover,
    .button:focus {
      text-decoration: none;
      box-shadow: none
    }
    .button.buttonwhite {
      background: #fff;
      border-color: #fff;
      color: #222;
      -webkit-text-fill-color: #222
    }
    .button.buttonwhite:hover,
    .button.buttonwhite:focus {
      background: transparent;
      color: #fff;
      -webkit-text-fill-color: #fff
    }
    .button.buttonblack {
      background: #222;
      border-color: #222;
      color: #fff;
      -webkit-text-fill-color: #fff
    }
    .button.buttonblack:hover,
    .button.buttonblack:focus {
      background: transparent;
      color: #222;
      -webkit-text-fill-color: #222
    }
    .button[type="submit"] {
      margin-top: 15px
    }
    #usage-menu .button {
      background: transparent;
      color: #e07950;
      -webkit-text-fill-color: #e07950
    }
    #usage-menu .button:hover {
      background: #e07950;
      border-color: #e07950;
      color: #fff;
      -webkit-text-fill-color: #fff
    }
    @media screen and (min-width: 1051px) {
      #usage-menu .button {
        vertical-align: middle;
        background: #fff;
        border-color: #fff;
        color: #222;
        -webkit-text-fill-color: #222
      }
      #usage-menu .button:hover,
      #usage-menu .button:focus {
        background: transparent;
        color: #fff;
        -webkit-text-fill-color: #fff
      }
    }

  /* Form fields */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    textarea,
    select{
      max-width: 280px;
      width: 100%;
      margin-top: 15px;
      padding: 15px;
      font-size: 16px;
      font-family: "Noto Sans", sans-serif;
      border-radius: 5px;
      border: 1px solid grey;
      color: #676666;
      -webkit-text-fill-color: #676666;
      box-shadow: none;
      outline: 0
    }
    input::placeholder,
    textarea::placeholder{
      color: #9E9E9E;
      -webkit-text-fill-color: #9E9E9E
    }

/* Header */
  #triton-projects {
    float: left
  }
  #triton-projects li {
    float: left;
    display: block
  }
  #triton-projects li a {
    display: block;
    line-height: 60px;
    height: 60px;
    color: #fff;
    -webkit-text-fill-color: #fff;
    padding: 0 15px;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
    transition-property: color, background-color;
    position: relative
  }
  #triton-projects li a i {
    display: none
  }
  #triton-projects li a:hover,
  #triton-projects li a:focus,
  #triton-projects li#current-project a {
    color: #111;
    -webkit-text-fill-color: #111;
    background: #fff
  }
  #triton-projects li#current-project a {
    padding: 0 15px 0 55px
  }
  #triton-projects li#current-project a:before {
    content: '';
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    left: 5px;
    top: 5px;
    background: url(../Images/triton-logo-sprite.png) no-repeat 0 0
  }
  #triton-projects li.triton-lab#current-project a:before {
    background-position: -50px 0
  }
  #triton-projects li.triton-reagents#current-project a:before {
    background-position: -100px 0
  }
  #triton-projects li.triton-pro#current-project a:before {
    background-position: -150px 0
  }
  #triton-projects li.triton-learn#current-project a:before {
    background-position: -200px 0
  }
  #usage-menu {
    float: right
  }
  #usage-menu>li {
    display: inline-block;
    margin-right: 2px;
    line-height: 60px;
    height: 60px
  }
  #usage-menu>li ul {
    display: none
  }
  #usage-menu a,
  #usage-menu button {
    padding: 0 15px 0 35px;
    position: relative
  }
  #usage-menu a i,
  #usage-menu button i {
    position: absolute;
    top: 5px;
    left: 8px;
    font-size: 18px
  }
  #usage-menu a:hover,
  #usage-menu button:hover,
  .button:hover,
  #usage-menu a:focus,
  #usage-menu button:focus,
  .button:focus {
    box-shadow: none
  }
  #usage-menu-login-button {
    background: #607d8b !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-color: #fff;
    font-weight: 600
  }
  #usage-menu-login-button:hover {
    background: #fff !important;
    color: #607d8b !important;
    -webkit-text-fill-color: #607d8b !important
  }
  #toggle-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background: transparent;
    border: 0
  }
  #toggle-menu>span {
    height: 50px;
    width: 50px;
    display: block;
    position: absolute;
    left: 0;
    top: 0
  }
  #toggle-menu>span>span {
    width: 22px;
    height: 3px;
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -11px;
    transition: all .2s ease;
    transition-property: transform, top, opacity
  }
  #toggle-menu>span>span:nth-child(1) {
    top: 16px
  }
  #toggle-menu>span>span:nth-child(2) {
    top: 24px
  }
  #toggle-menu>span>span:nth-child(3) {
    top: 32px
  }
  #header.open #toggle-menu>span>span:nth-child(1) {
    top: 24px;
    transform: rotate(-45deg)
  }
  #header.open #toggle-menu>span>span:nth-child(2) {
    opacity: 0
  }
  #header.open #toggle-menu>span>span:nth-child(3) {
    top: 24px;
    transform: rotate(45deg)
  }

/*@media screen and (min-width: 1051px) {
  #triton-projects li#current-project a:before{background-image:url(../Images/triton-logo-sprite-current.png)}
}*/
@media screen and (-webkit-min-device-pixel-ratio: 2),screen and (min-resolution: 192dpi),screen and (min-resolution: 2dppx){
    #triton-projects li#current-project a:before{background-image:url(../Images/triton-logo-sprite-2x.png);background-size:250px 50px}
}
/*@media screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1051px),screen and (min-resolution: 192dpi) and (min-width: 1051px),screen and (min-resolution: 2dppx) and (min-width: 1051px){
  #triton-projects li#current-project a:before{background-image:url(../Images/triton-logo-sprite-current-2x.png)}
}*/

/* mask: Banner */
.mask-banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center
}

.mask-banner > div {
  position: relative;
  width: 100%;
  height: 415px; /* Adjust the height as needed */
  background-size: cover;
  background-position: center;
  color: #fff; /* Text color for the banner */
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px
}

/* Add an overlay with transparency to darken the background */
.mask-banner > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 52 86 / 70%) /* Adjust the transparency (0.5) for the desired darkness */
}

.mask-banner > div > span.text {
  z-index: 1;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  text-transform: uppercase
}

.mask-banner > div > span.text > .button {
  text-shadow: none;
  border: none
}

/* Fade-in animation */
@keyframes fade-in {
  to {
    transform: translateX(-50%) translateY(0); /* Final position onscreen */
    opacity: 1;
  }
}

/* Detect when text is in viewport */
.text.in-viewport {
  animation: none;
  transform: translateX(-50%) translateY(0); /* Ensure onscreen when in viewport */
  opacity: 1;
}

/* mask: Teaser */
  .teaser {
    float: left;
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 100px 50px 120px calc(50% + 20px);
    max-height: 450px
  }
  #content>.teaser {
    float: none
  }
  .teaser-rte {
    padding: 100px 50px 120px 20px;
    max-height: none
  }
  .teaser img {
    display: block;
    right: calc(50% + 10px);
    max-height: 450px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    position: absolute
  }
  .teaser h2,
  .mask-banner h2 {
    font-size: 40px;
    margin-bottom: 10px;
    line-height: normal;
    font-weight: 300
  }
  .teaser h3,
  .mask-banner h3 {
    font-size: 26px;
    margin-bottom: 15px;
    line-height: normal;
    font-weight: 300
  }
  .teaser p,
  .mask-banner p {
    margin-bottom: 25px;
    line-height: normal;
    font-weight: 300;
    max-width: 600px
  }
  .teaser .button,
  .mask-banner .button {
    min-width: 120px;
    margin-bottom: 35px;
    height: auto;
    display: inline-block;
    text-align: center
  }
  .teaser-embed-container {
    position: relative;
    padding-bottom: calc(58% * 0.5625);
    height: 0;
    overflow: hidden;
    max-width: 58%;
    margin: 0 auto
  }
  .teaser-embed-container iframe,
  .teaser-embed-container object,
  .teaser-embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
  }
  .teaser-text-block {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto
  }
  .teaser-text-block-rte {
    max-width: 1055px
  }
  .teaser-text-block-rte>p {
    max-width: none
  }
  .teaser-text-block-rte>ol {
    list-style-type: decimal;
    list-style-position: inside;
    margin-bottom: 25px
  }
  .teaser-text-block-rte>ul {
    list-style-type: disc;
    list-style-position: inside;
    margin-bottom: 25px
  }

  /*.teaser-link-list{display: block;margin: auto;width: 100%;}*/

  .teaser-link-list li {
    display: inline-block;
    vertical-align: middle
  }
  .c50 .teaser,
  .c25 .teaser {
    max-height: none;
    padding: 50px;
    text-align: center
  }
  .c50 .teaser img,
  .c25 .teaser img {
    display: block;
    max-width: 100%;
    height: auto;
    position: relative;
    right: inherit;
    margin-left: auto;
    margin-right: auto;
    transform: none;
    top: inherit
  }
  .c50 .teaser h2,
  .c25 .teaser h2 {
    font-size: 40px;
  }
  .c50 .teaser p,
  .c25 .teaser p {
    margin-left: auto;
    margin-right: auto
  }
  .c50 .teaser-user-counter {
    display: table;
  }
  .teaser-text-block-user-counter {
    display: table-cell;
    vertical-align: middle;
  }
  #usercounter-number {
    font-weight: 700;
    font-size: 60px;
  }
  .teaser.teaser-no-image {
    padding: 50px;
    text-align: center
  }
  .teaser.teaser-no-image h2 {
    font-size: 40px
  }
  .teaser.teaser-no-image p {
    margin-left: auto;
    margin-right: auto
  }
  .teaser-orange-white {
    background: #efb243;
    background: -moz-linear-gradient(top, #efb243 0%, #fff 100%);
    background: -webkit-linear-gradient(top, #efb243 0%, #fff 100%);
    background: linear-gradient(to bottom, #efb243 0%, #fff 100%)
  }
  .teaser-orange-radiant {
    background: #ede0c9;
    background: -moz-radial-gradient(center, ellipse cover, #ede0c9 0%, #efb243 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #ede0c9 0%, #efb243 100%);
    background: radial-gradient(ellipse at center, #ede0c9 0%, #efb243 100%)
  }
  .teaser-purple-radiant {
    background: #e7d2f1;
    background: -moz-radial-gradient(center, ellipse cover, #e7d2f1 0%, #9352a2 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #e7d2f1 0%, #9352a2 100%);
    background: radial-gradient(ellipse at center, #e7d2f1 0%, #9352a2 100%)
  }
  .teaser-grey {
    background: #eee
  }
  .teaser-blue {
    background: #8ed0ef
  }
  .teaser-orange {
    background: #eaac93
  }
  .teaser-cyan {
    background: #80cac0
  }
  .teaser-gold {
    background: #dabc7c
  }
  .teaser-anthrazit {
    background: #293133
  }
  .teaser-textcolor-white,
  .teaser-textcolor-white label {
    color: white;
    -webkit-text-fill-color: white
  }
  .teaser-textcolor-black,
  .teaser-textcolor-black label {
    color: black;
    -webkit-text-fill-color: black
  }
  .teaser-textcolor-grey,
  .teaser-textcolor-grey label {
    color: #eee;
    -webkit-text-fill-color: #eee
  }
  .teaser-textcolor-blue,
  .teaser-textcolor-blue label {
    color: #8ed0ef;
    -webkit-text-fill-color: #8ed0ef
  }
  .teaser-textcolor-orange,
  .teaser-textcolor-orange label {
    color: #eaac93;
    -webkit-text-fill-color: #eaac93
  }
  .teaser-textcolor-cyan,
  .teaser-textcolor-cyan label {
    color: #80cac0;
    -webkit-text-fill-color: #80cac0
  }
  .teaser-textcolor-gold,
  .teaser-textcolor-gold label {
    color: #dabc7c;
    -webkit-text-fill-color: #dabc7c
  }
  .teaser-textcolor-anthrazit,
  .teaser-textcolor-anthrazit label {
    color: #293133;
    -webkit-text-fill-color: #293133
  }
  .teaser-textalign-left {
    text-align: left
  }
  .teaser-textalign-right {
    text-align: right
  }
  .teaser-textalign-center {
    text-align: center
  }
  .button.teaser-textcolor-black {
    background: black;
    border-color: black;
    color: #fff;
    -webkit-text-fill-color: #fff
  }
  .button.teaser-textcolor-black:hover,
  .button.teaser-textcolor-gold:focus {
    background: transparent;
    color: black
  }
  .button.teaser-textcolor-grey {
    background: #eee;
    border-color: #eee;
    color: #fff;
    -webkit-text-fill-color: #fff
  }
  .button.teaser-textcolor-grey:hover,
  .button.teaser-textcolor-gold:focus {
    background: transparent;
    color: #eee;
    -webkit-text-fill-color: #eee
  }
  .button.teaser-textcolor-blue {
    background: #8ed0ef;
    border-color: #8ed0ef;
    color: #fff;
    -webkit-text-fill-color: #fff
  }
  .button.teaser-textcolor-blue:hover,
  .button.teaser-textcolor-gold:focus {
    background: transparent;
    color: #8ed0ef;
    -webkit-text-fill-color: #8ed0ef
  }
  .button.teaser-textcolor-orange {
    background: #eaac93;
    border-color: #eaac93;
    color: #fff;
    -webkit-text-fill-color: #fff
  }
  .button.teaser-textcolor-orange:hover,
  .button.teaser-textcolor-gold:focus {
    background: transparent;
    color: #eaac93;
    -webkit-text-fill-color: #eaac93
  }
  .button.teaser-textcolor-cyan {
    background: #80cac0;
    border-color: #80cac0;
    color: #fff;
    -webkit-text-fill-color: #fff
  }
  .button.teaser-textcolor-cyan:hover,
  .button.teaser-textcolor-gold:focus {
    background: transparent;
    color: #80cac0;
    -webkit-text-fill-color: #80cac0
  }
  .button.teaser-textcolor-gold {
    background: #dabc7c;
    border-color: #dabc7c;
    color: #fff;
    -webkit-text-fill-color: #fff
  }
  .button.teaser-textcolor-gold:hover,
  .button.teaser-textcolor-gold:focus {
    background: transparent;
    color: #dabc7c;
    -webkit-text-fill-color: #dabc7c
  }
  .button.teaser-textcolor-anthrazit {
    background: #293133;
    border-color: #293133;
    color: #fff;
    -webkit-text-fill-color: #fff
  }
  .button.teaser-textcolor-anthrazit:hover,
  .button.teaser-textcolor-gold:focus {
    background: transparent;
    color: #293133;
    -webkit-text-fill-color: #293133
  }
  .teaser-new:after {
    content: '';
    display: block;
    position: absolute;
    left: -16px;
    top: -66px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 100px 100px 100px 0;
    border-color: transparent #b0cc53 transparent transparent;
    transform: rotate(45deg);
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3)
  }
  .teaser-new:before {
    position: absolute;
    left: 10px;
    top: 38px;
    transform: rotate(-45deg);
    z-index: 2;
    font-size: 30px;
    text-transform: uppercase;
    color: #fff;
    -webkit-text-fill-color: #fff
  }
  .teaser.teaser-responsive-images {
    max-height: none;
    padding: 0;
    text-align: center
  }
  .teaser.teaser-responsive-images img {
    display: inline-block;
    right: inherit;
    max-height: none;
    max-width: 1090px;
    top: inherit;
    transform: none;
    position: relative;
    height: auto
  }

/* Video */
  .row.video-wrap {
    margin: 60px auto;
    max-width: 1300px
  }
  .video-element {
    width: 25%;
    float: left;
    padding: 0px 10px 20px 0px;
    margin-bottom: 100px
  }
  @media screen and (max-width:1050px) {
    .video-element {
      padding: 0px 0px 70px 0px /* Must be overwritten that way with the above padding. */
    }
  }
  .video-element .video-element-actions {
    margin: 7px 0px 0px 10px
  }
  .video-element .video-element-action-item {
    
    font-weight: 700;
    color: #8c8c8c; /* #7d643 OR #44361b OR #777; */
    -webkit-text-fill-color: #8c8c8c;
    cursor: pointer
  }
  .video-element .video-element-action-item:hover {
    text-decoration: underline;
    color: #7d6435;
    -webkit-text-fill-color: #7d6435
  }
  .video-element .video-element-actions > li,
  .video-element .video-element-actions > li > ul,
  .video-element .video-element-action-item-icon,
  .video-element .video-element-action-item-desc {
    display: inline
  }
  .video-element .video-element-actions > li {
    margin-right: 10px;
    font-size: 14px
  }
  .video-article {
    border: 1px solid #ddd;
    box-shadow: 0 0 4px 0 #ddd;
    cursor: pointer;
    border-radius: 3px;
    position: relative;
    transition: all .2s ease;
    transition-property: box-shadow;
    border-radius: 10px;
    text-align: left;
    color: rgb(55, 55, 55);
    -webkit-text-fill-color: rgb(55, 55, 55)
  }
  .video-article:hover {
    box-shadow: none
  }
  .video-article img {
    display: block;
    width: 100%;
    height: auto;
    height: 175px;
    object-fit: cover;
    border-radius: 10px 10px 0px 0px
  }
  .video-article figure {
    /*position: relative*/
  }
  .video-article:hover figure:before {
    content: '\f144';
    font-family: 'Font Awesome 5 Pro';
    color: rgba(255, 255, 255, 0.9);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.9);
    z-index: 3;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px
  }
  .video-article:hover figure:after {
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
    position: absolute;
    border-radius: 10px
  }
  .video-article h2 {
    font-weight: 700;
    font-size: 25px;
    height: 135px;
    padding: 0px 10px 10px 10px;
    line-height: 26px
  }
  @media screen and (max-width:670px) {
    .video-article h2 {
      height: auto; /* Get rid of the fixed height in mobile. */
      padding: 0px 10px 30px 10px
    }
  }
  .video-article h3 {
    padding-top: 36px;
    padding-left: 9px;
    font-size: 14px;
    font-weight: 600;
    color: #b37f0e;
    -webkit-text-fill-color: #b37f0e
  }
  .video-article p {
    font-size: 14px;
    line-height: 20px;
    height: 165px;
    color: #777;
    -webkit-text-fill-color: #777;
    padding: 0 10px 40px;
    word-break: break-word
  }
  @media screen and (max-width:670px) {
    .video-article p {
      height: auto /* Get rid of the fixed height in mobile. */
    }
  }
  .video-article .category {
    position: absolute;
    top: 15px;
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-size: 10px;
    line-height: normal;
    display: block;
    padding: 2px 5px;
    text-align: center;
    z-index: 3
  }
  .video-article .stats {
    display: block;
    background-color: #c5a050;
    border-radius: 0px 0px 10px 10px;
    border-top: 1px solid #a47614
  }
  .video-article .stats .stats-detail {
    display: inline-block;
    padding: 25px 0px;
    width: 33.33%;
    text-align: center
  }
  .video-article .stats .stats-detail .stats-detail-num, .video-article .stats .stats-detail .stats-detail-desc {
    display: block;
    color: #44361b;
    -webkit-text-fill-color: #44361b
  }
  .video-article .stats .stats-detail .stats-detail-num {
    /* font-weight: 700; */
    font-size: 21px
  }
  .video-article .stats .stats-detail .stats-detail-desc {
    font-size: 11px;
    margin-top: -5px;
    text-transform: uppercase
  }
  span.stats-detail:nth-child(1) {
    border-right: 1px solid #a47614;
  }
  span.stats-detail:nth-child(2) {
    border-right: 1px solid #a47614;
  }
  .video-article .category.category-1 {
    background: #948164
  }
  .video-article .category.category-2 {
    background: #b4babd
  }
  .video-article .category.category-3 {
    background: #e2b007
  }
  .video-article .watched {
    position: absolute;
    bottom: 10px;
    right: 0;
    background: #888;
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-size: 10px;
    line-height: normal;
    padding: 2px 5px;
    display: none
  }
  .video-article.watched .watched {
    display: block
  }
  @media screen and (max-width: 1320px) {
    .row.video-wrap {
      max-width: 976px
    }
    .video-element {
      width: 33.33333%
    }
  }
  @media screen and (max-width: 996px) {
    .row.video-wrap {
      max-width: 650px
    }
    .video-element {
      width: 50%
    }
  }
  @media screen and (max-width: 670px) {
    .row.video-wrap {
      max-width: 305px
    }
    .video-element {
      width: 100%;
      max-width: 305px;
      margin: 0 auto
      }
  }

/* Video Frame */
  #video-frame {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(28, 28, 28, 0.9);
    z-index: 9;
    display: none
  }
  #video-frame.open {
    display: block
  }
  #video-frame-box {
    background: #333;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1500px;
    max-width: 94%;
    min-height: 200px;
    box-shadow: 0 0 40px 0 #c5a050;
    border-radius: 3px
  }
  #video-frame-box h2 {
    font-size: 20px;
    line-height: 24px;
    padding: 7px 50px 7px 10px;
    color: #fff;
    -webkit-text-fill-color: #fff;
    height: 36px
  }
  #video-frame-closer {
    background: transparent;
    border: 0;
    position: absolute;
    top: 5px;
    right: 5px
  }
  #video-frame-closer:before {
    content: '\f00d';
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-family: 'Font Awesome 5 Pro';
    font-size: 24px;
    font-weight: bold
  }
  #video-embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%
  }
  #video-embed-container>iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
  }
  #video-sharelink {
    display: none
  }
  #video-sharelink a {
    position: relative;
    float: left;
    margin: 10px;
    background: #ccc;
    border-radius: 5px;
    line-height: 24px;
    height: 26px;
    color: #000;
    -webkit-text-fill-color: #000;
    font-size: 10px;
    padding: 0 10px;
    display: none;
    display: inline-block;
    width: 160px;
    text-align: center;
    cursor: pointer;
    text-decoration: none
  }
  #video-sharelink a:hover,
  #video-sharelink a:focus {
    background: #ddd
  }
  #video-sharelink a:active {
    background: #bbb
  }
  #video-sharelink a:before {
    opacity: 0;
    position: absolute;
    z-index: 2;
    background: #0b0;
    color: #fff;
    -webkit-text-fill-color: #fff;
    content: '\f00c';
    font-family: 'Font Awesome 5 Pro';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 5px;
    font-weight: 700
  }
  #video-sharelink.clicked a:before {
    -webkit-animation: fadeout 1s;
    -moz-animation: fadeout 1s;
    animation: fadeout 1s
  }
  #video-sharelink span {
    float: left;
    display: block;
    background: #fff;
    color: #777;
    -webkit-text-fill-color: #777;
    margin: 10px 0;
    padding: 6px;
    font-size: 12px;
    line-height: 14px;
    position: relative;
    width: calc(100% - 190px)
  }

/* Video Search */
  .yt-video-search label {
    display: none
  }
  .yt-video-search input {
    font-size: 16px;
    line-height: 24px;
    height: 24px;
    padding: 15px 5px;
    display: block;
    border: 1px solid #ccc;
    border-radius: 3px 0 0 3px;
    width: calc(100% - 120px);
    color: #000;
    -webkit-text-fill-color: #000;
    float: left
  }
  .yt-video-search button {
    height: 32px;
    display: block;
    font-size: 13px;
    background: #ccc;
    color: #666;
    -webkit-text-fill-color: #666;
    border-radius: 0 5px 5px 0;
    width: 120px;
    border: 0
  }
  .yt-video-search button:hover,
  .yt-video-search button:focus {
    background: #bbb;
    color: #555;
    -webkit-text-fill-color: #555
  }

/* Content */
  #content{
    min-height:calc(100vh - 300px);
    overflow:hidden;
  }
  /*.content-element{margin:50px auto 70px;max-width:660px}*/

  .content-element h1 {
    font-size: 50px;
    line-height: 60px;
    font-weight: 300;
    margin-bottom: 10px
  }
  .content-element h2 {
    /* border-radius: 5px; */
    font-size: 30px;
    line-height: 40px;
    font-weight: 300;
    margin-bottom: 10px
  }
  .content-element img {
    display: block;
    height: auto;
    max-width: 100%
  }
  .content-element .align-center {
    text-align: center
  }

/* Content Fullwidth */
  .content-element.ce-fullsize {
    max-width: none
  }
  .content-element.ce-fullsize img {
    width: 100%
  }

/* Distributor Map */
  .distributor:before,
  .distributor:after {
    content: '';
    clear: both;
    display: table
  }
  .distributor {
    border: 1px solid #ddd;
    padding: 20px 30px;
    margin-bottom: 30px;
    position: relative;
    word-break: break-word
  }
  .distributor figure {
    float: right;
    margin: 0 20px;
    display: block;
  }
  .distributor img {
    max-width: 300px!important;
    width: 100%!important;
    height: auto!important;
  }
  .distributor h2 {
    margin-top: 0
  }
  .distributor .contact-general {
    margin: 8px 0px
  }
  .distributor.contact-general td:nth-child(1) {
    width: 115px
  }
  .distributor h2,
  .distributor table,
  .distributor address {
    float: left;
    width: calc(100% - 360px);
    margin-bottom: 2px
  }
  .distributor-filter-box {
    cursor: pointer;
    padding: 10px;
    border-radius: 3px;
    border: 3px solid #999;
    background: #fff;
    color: #999;
    font-weight: bold;
    font-size: 14px;
    width: 160px;
    line-height: 20px;
    display: inline-block;
    margin: 5px;
  }
  .distributor-filter-box:hover,
  .distributor-filter-box:active,
  .distributor-filter-box:focus {
    text-decoration: none;
    color: #fff;
    background: #999;
  }
  #distributormap {
    height: 450px;
  }
  @media (max-width: 799px) {
    .distributor figure,
    .distributor h2,
    .distributor p,
    .distributor address {
      float: none;
      width: auto
    }
  }
  @media (min-width: 701px) and (max-width: 1120px) {
    .distributor {
      margin-left: 20px;
      margin-right: 20px
    }
  }

/* Login | Form | Button */
  /* Used in calculators/rtnx-stnx/ */
    #calc input[type="text"] {
      height: 38px;
      line-height: 38px;
      padding: 6px 8px;
      font-family: 'Open Sans';
      font-size: 18px;
      border-radius: 3px;
      outline: 0;
      width: calc(100% - 18px);
      max-width: 400px;
      box-shadow: none;
      border: 1px solid #ccc;
      color: #333;
      -webkit-text-fill-color: #333
    }
    
  #mc_embed_signup_scroll textarea{
    height:auto;
    min-height:38px;
    display:block
  }

  .tx-felogin-pi1>h3,
  .tx-felogin-pi1>div {
    margin: 15px 0px
  }
  .tx-felogin-pi1>form>fieldset>legend {
    display: none
  }
  .tx-felogin-pi1>form>fieldset>div {
    margin-bottom: 10px
  }
  .content-element form p {
    margin-bottom: 10px
  }
  #forgot-username-link {
    margin-top: -30px
  }

/* Login | Login-form & register-box */
  /* Login headline H1 */
    #c95 h1, #c113 h1{ /* Including c113 h1 from register page. */
      margin-top: 25px;
      margin-bottom: -17px !important;
      font-size: 16px !important;
      text-transform: uppercase;
      text-align: center;
      font-family: "Noto Sans", "Open Sans", sans-serif
    }
  /* All elements in login page */
    #c1004,
    #c1402,
    #c105{
      text-align: center
    }
  /* Login box on login page */
    /* checkbox: "stay logged in" */
      .permalogin{
        display: inline-block
      }
      #permalogin{
        vertical-align: middle
      }
  /* Register box on login page */
    #c105{
      display: block;
      margin: 0 auto;
      position: relative;
      background-color: #cf5828;
      padding: 64px 0px;
      max-width: 280px;
      margin-bottom: 50px
    }
    #c105 p:nth-of-type(1){
      margin-bottom: 15px
    } 
    #register-elem-cutout{
      content: ' ';
      background-image: url(../Images/chem_pixel_cutout_white.png);
      background-size: 100%;
      background-repeat: no-repeat;
      display: block;
      width: 70px;
      height: 84px;
      position: absolute;
      right: -2px;
      bottom: -2px;
    }
    #c105 > p{
      color: #fff;
      -webkit-text-fill-color: #fff;
    }
    #c105 .button{
      border: 1px solid #fff;
      max-width: 225px;
      height: auto;
      line-height: 25px;
      color: #fff;
      -webkit-text-fill-color: #fff
    }
    #c105 .button:hover{
      border: 1px solid #cf5828;
      color: #cf5828;
      -webkit-text-fill-color: #cf5828;
      background-color: #fff;
    }

  @media screen and (max-width: 766px){
    h1{
      text-align: center
    }
    .c50{
      margin: 0 auto;
      width: 100%
    }
    .row > .c50:nth-child(2) {  /* Register box on login page */
      margin-top: -13px
    }
    #forgot-username-link {
      margin-top: -15px
    }
  }

/* News */
  .news .header {
    margin-bottom: 20px
  }
  .news .header h1,
  .news .header h2 {
    margin-bottom: 0
  }
  .news .header time {
    color: #777;
    -webkit-text-fill-color: #777;
    font-size: 12px
  }
  .news-list-view>.article {
    margin-bottom: 50px
  }
  .news-list-view>.article:last-child {
    margin-bottom: 0
  }
  
/* Urgent note on connection page at triton-lab */
  .register-urgent-note {
    color: #d9534f;
    font-weight: bold;
    border: 1px solid #d9534f;
    padding: 5px 20px 0 50px;
    border-left: 10px solid;
    margin: 20px 0
  }
  .register-urgent-note-bold {
    text-decoration: underline;
    color: #777
  }

/* Footer */
  #footer {
    background: #e3e3e3;
    font-size: 12px;
    line-height: 20px
  }
  #footer-bar {
    background: #2d2d2d;
    color: #fff;
    -webkit-text-fill-color: #fff;
    text-transform: uppercase;
    text-align: center
  }
  #footer-bar a {
    color: #fff;
    -webkit-text-fill-color: #fff;
    display: inline-block;
    vertical-align: top
  }
  #services {
    float: left
  }
  #follow {
    display: inline-block
  }
  #services li,
  #follow>span,
  #follow li {
    display: inline-block;
    line-height: 60px;
    height: 60px;
    position: relative;
    padding-left: 30px
  }
  #follow ul {
    display: inline-block
  }
  #services li {
    margin-right: 15px
  }
  #services li i:before {
    position: absolute;
    top: 21px;
    left: 8px;
    font-size: 16px
  }
  #follow li {
    margin-left: 15px
  }
  #follow li i {
    position: absolute;
    top: 15px;
    left: -3px;
    font-size: 16px;
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 15px
  }
  #follow li:first-child i {
    background: #3f5893
  }
  #follow li:nth-child(2) i{
    background:#ca2c8c
  }
  #follow li:last-child i {
    background: #aa2117
  }
  #footer-nav {
    padding: 45px 0 25px
  }
  #footer-nav>div>ul>li {
    float: left;
    width: 20%
  }
  #footer-nav>div>ul>li:nth-child(5n+1) {
    clear: left
  }
  #footer-nav a {
    color: #000;
    -webkit-text-fill-color: #000
  }
  #footer-nav>div>ul>li>a {
    font-weight: 700
  }
  #footer-nav>div>ul>li {
    margin-bottom: 25px;
    padding-right: 40px
  }
  #footer-nav {
    text-align: center;
    padding: 50px 0
  }
  #footer-nav ul li {
    display: inline-block
  }
  #footer-nav ul li:after {
    content: '-';
    display: inline-block;
    margin: 0 5px 0 10px
  }
  #footer-nav ul li:last-child:after {
    content: none;
    display: none
  }

/* Cookie banner */
  #cookieinformation {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    font-size: 14px;
    line-height: normal
  }
  #cookieinformation.show {
    display: block
  }
  #cookieinformation-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 90%;
    max-width: 680px;
    box-shadow: 10px 10px 14px 0 rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    max-height: 100%;
    overflow: auto
  }
  #cookieinformation-content{
    max-height: 75vh;
    overflow: auto;
    padding: 25px 25px 0px 25px
  }
  #cookieinformation-decision-buttons{
    padding: 25px
  }
  #cookieinformation h3 {
    font-weight: 500;
    margin-bottom: 20px;
    font-size: 37px;
    color: #4a4a4a;
    -webkit-text-fill-color: #4a4a4a
  }
  #cookieinformation h3 .fa-cookie-bite {
    color: #805444;
    -webkit-text-fill-color: #805444;
    font-size: 30px;
  }
  #cookieinformation > #cookieinformation-wrap > p {
    margin-bottom: 20px
  }
  #cookieinformation .button {
    height: 45px;
    font-weight: 700;
    box-shadow: none;
    width: auto
    /* min-width: 45% */
  }
  #cb-lang-switch {
    padding-bottom: 20px;
    display: block
  }
  #cb-lang-switch li {
    display: inline-block;
    margin: 0px 5px
  }
  #cb-lang-switch li a img {
    height: 14px;
    width: auto;
    border-radius: 7px
  }
  #cb-links {
    display: block;
    font-size: 12px;
    margin: 12px 0px
  }
  #cb-links .fal {
    color: var(--lower-right-icons-bg-color);
    -webkit-text-fill-color: var(--lower-right-icons-bg-color)
  }
  #cb-links .cb-link .cb-link-href {
    margin-right: 8px
  }
  #cookieinformation-decision-buttons {
    display: block;
    text-align: center
  }
  #cookieinformation-decision-buttons button.button.cb-deny {
    background: #f5f5f5;
    border: 1px solid #f5f5f5;
    color: #7f7f7f;
    -webkit-text-fill-color: #7f7f7f
  }
  #cookieinformation-decision-buttons button.button.cb-allow {
    background: var(--lower-right-icons-bg-color);
    border-color: var(--lower-right-icons-bg-color);
    color: #fff;
    -webkit-text-fill-color: #fff
  }
  #cookieinformation-decision-buttons button.button.cb-allow:hover {
    background: var(--lower-right-icons-bg-color);
    color: rgb(255, 255, 255);
    -webkit-text-fill-color: #fff
  }
  #cookie-detail-area {
      padding: 20px 17px
  }
  #cookie-detail-list li {
    display: inline-block;
    width: 49%;
    text-align: center;
    color: var(--lower-right-icons-bg-color);
    font-weight: 600;
    min-height: 28px;
    cursor: pointer
  }
  #cookie-detail-list li.active {
    border-bottom: 2px solid var(--lower-right-icons-bg-color);
  }
  .cookie-content-subgroup {
    border-radius: 7px;
    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.3);
    margin: 15px 0px
  }
  .cookie-content-subgroup, .cookie-content-subgroup-item {
    display: grid;
    grid-template-columns: 85% auto;
    align-items: center;
    padding: 10px
  }
  .cookie-content-subgroup span {
  }
  .cookie-content-subgroup span:first-child {
  }
  .cookie-content-subgroup span:nth-child(2) {
    text-align: right
  }
  .cookie-content-subgroup span h4{
    margin: 5px 0px;
    color: #4e4e4e;
    -webkit-text-fill-color: #4e4e4e;
    font-weight: 700;
    display: inline-block
  }
  .cookie-content-subgroup span a{
    margin-left: 5px
  }
  /* Button on/off */
    .cookie-content-subgroup span button {
      font-size: 26px;
      max-height: 26px;
      background: none;
      border: none;
      padding: 0px;
      overflow: hidden;
      max-width: max-content
    }
    .bump-button {
      -webkit-animation: bump-animation 0.2s;
      -moz-animation: bump-animation 0.2s;
      animation: bump-animation 0.2s
    }
    @keyframes bump-animation {
      0% { font-size: 27px }
      50% { font-size: calc(27px - 5px) }
      100% { font-size: 27px }
    }
    .cookie-content-subgroup span button i.fa-toggle-off,
    .cookie-content-subgroup span button i.fa-toggle-on {
      padding: 1px
    }
    .cookie-content-subgroup span button i.fa-toggle-off {
      color: #4a4a4a;
      -webkit-text-fill-color: #a2a2a2
    }
    .cookie-content-subgroup span button i.fa-toggle-on {
      color: var(--lower-right-icons-bg-color);
      -webkit-text-fill-color: var(--lower-right-icons-bg-color)
    }

    .cookie-content-subgroup span button i.disabled {
      cursor: default;
      opacity: 0.4
    }
  /* Button "eye" to watch items of group */
    .cookie-content-subgroup span button:nth-child(2) {
      padding: 0px 0px 0px 6px;
    }
    .cookie-content-subgroup span button:nth-child(2) i {
      font-size: 16px;
      padding-bottom: 1px;
      display: table;
      opacity: 0.2;
      cursor: default
    }
  /* Define subgroup items */
    .cookie-content-subgroup ul {
      margin-top: 10px
    }
    .cookie-content-subgroup-item {
      border-left: 1px solid #a2a2a2;
      padding: 15px 0px 0px 12px
    }
    .cookie-content-subgroup-item h4,
    .cookie-content-subgroup span a,
    .cookie-content-subgroup-item p span {
      font-size: 12px
    }
  @media screen and (max-width: 766px){
    #cookieinformation-wrap {
      padding: 0px 0px !important
    }
    #cookieinformation p {
      text-align: justify
    }
    #cb-links .fal {
      display: none
    }
    #cookieinformation .button {
      margin: 4px 0px
    }
    #cookieinformation-content{
      max-height: 45vh
    }
    #cookie-detail-area {
      padding: 20px 0px
    }
    .cookie-content-subgroup, .cookie-content-subgroup-item {
      display: block
    }
    .cookie-content-subgroup span button {
      overflow: unset
    }
  }

/* Tablet & Mobile */
  @media screen and (max-width: 1300px) {
    .c25 {
      width: 50%
    }
  }
  @media screen and (max-width: 1150px) {
    .wrap {
      padding-left: 15px;
      padding-right: 15px
    }
    #footer-nav>div>ul>li {
      width: 33.33333%;
      padding: 0 20px
    }
    #footer-nav>div>ul>li:nth-child(5n+1) {
      clear: none
    }
    #footer-nav>div>ul>li:nth-child(3n+1) {
      clear: left
    }
    .teaser {
      max-height: none;
      width: 100%;
      padding: 50px;
      max-width: none
    }
    .teaser p,
    .teaser h2,
    .teaser h3 {
      max-width: 600px;
      margin: 12px auto;
      text-align: center
    }
    .teaser .button, .hrzs-item .button {
      margin: 6px auto;
      text-align: center;
      min-width: 260px;
      min-height: 45px;
      line-height: 43px
    }
    .teaser img {
      position: relative;
      right: inherit;
      max-height: none;
      max-width: 300px;
      height: auto;
      transform: none;
      top: inherit;
      width: 100%;
      margin: 0 auto
    }
    .teaser-textalign-left {
      all: unset
    }
    .teaser-textalign-right {
      all: unset
    }
    .teaser-textalign-center {
      all: unset
    }
    .teaser-textcolor-white {
      color: white;
      -webkit-text-fill-color: white
    }
    .teaser-textcolor-black {
      color: black;
      -webkit-text-fill-color: black
    }
    .teaser-textcolor-grey {
      color: #eee;
      -webkit-text-fill-color: #eee
    }
    .teaser-textcolor-blue {
      color: #8ed0ef;
      -webkit-text-fill-color: #8ed0ef
    }
    .teaser-textcolor-orange {
      color: #eaac93;
      -webkit-text-fill-color: #eaac93
    }
    .teaser-textcolor-cyan {
      color: #80cac0;
      -webkit-text-fill-color: #80cac0
    }
    .teaser-textcolor-gold {
      color: #dabc7c;
      -webkit-text-fill-color: #dabc7c
    }
    .teaser-textcolor-anthrazit {
      color: #293133;
      -webkit-text-fill-color: #293133
    }
    .content-element {
      overflow-y: hidden;
      padding-left: 15px;
      padding-right: 15px;
      margin: 10px auto 20px
    }
    .teaser-link-list li {
      display: block;
      min-width: 120px;
      text-align: center
    }
    .teaser-text-block-rte p {
      text-align: justify
    }
  }
  @media screen and (max-width:1050px) {
    body {
      padding-top: 50px
    }
    html.menu-open,
    body.menu-open {
      overflow: hidden
    }
    #triton-projects li,
    #usage-menu,
    #nav {
      height: 0;
      overflow: hidden
    }
    #toggle-menu {
      display: block
    }
    #current-project {
      position: fixed;
      left: 0;
      top: 0;
      overflow: visible!important;
      height: auto!important
    }
    #nav-top {
      background: transparent!important
    }
    #header {
      height: 50px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: #fff;
      z-index: 9
    }
    #header:after {
      content: '';
      height: 2px;
      position: absolute;
      left: 0;
      right: 0;
      bottom: -2px;
      background: #009b9d
    }
    #complete-nav {
      background: #fff;
      position: absolute;
      top: 50px;
      left: 0;
      right: 0
    }
    #triton-projects,
    #triton-projects li,
    #usage-menu {
      float: none
    }
    #triton-projects {
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0
    }
    #header.open #triton-projects li,
    #header.open #usage-menu,
    #header.open #nav {
      height: auto;
      overflow: visible
    }
    /* #header.open #nav {
      max-height: 224px;
      overflow-y: scroll
    } */
    #header.open #complete-nav {
      padding-bottom: 160px
    }
    #header.open #triton-projects li:not(#current-project) a {
      padding-left: 40px
    }
    #header.open #triton-projects li:not(#current-project) a:before {
      content: '';
      width: 40px;
      height: 40px;
      display: inline-block;
      background-image: url(../Images/triton-logo-sprite.png);
      background-size: auto 40px;
      position: absolute;
      left: 0;
      top: 0
    }
    #header.open #triton-projects li:not(#current-project).triton-lab a:before {
      background-position: -40px 0
    }
    #header.open #triton-projects li:not(#current-project).triton-reagents a:before {
      background-position: -80px 0
    }
    #header.open #triton-projects li:not(#current-project).triton-pro a:before {
      background-position: -120px 0
    }
    #header.open #triton-projects li:not(#current-project).triton-learn a:before {
      background-position: -160px 0
    }
    #header:before {
      content: ''
    }
    #header.open:before {
      position: fixed;
      top: 50px;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
      background: rgba(98, 98, 98, .8);
      /* backdrop-filter: blur(3px) */
    }
    #usage-menu {
      text-align: right
    }
    #triton-projects li a {
      color: #222;
      -webkit-text-fill-color: #222
    }
    #usage-menu>li {
      height: 40px;
      line-height: 40px;
      margin-right: 6px
    }
    #usage-menu-login-button {
      background: #607d8b !important;
      color: #fff !important;
      -webkit-text-fill-color: #fff !important;
      border-color: #607d8b;
      font-weight: 600
    }
    #nav {
      border: 0;
      background: #ececec
    }
    #nav .wrap,
    #nav-top .wrap {
      padding-left: 0;
      padding-right: 0
    }
    #nav li {
      display: block
    }
    #triton-projects li#current-project a {
      background: transparent;
      line-height: 50px;
      height: 50px;
      font-size: 14px
    }
    #triton-projects li#current-project a:before {
      top: 0
    }
    #nav a:hover,
    #nav a:focus,
    #nav li.active a {
      box-shadow: none;
      color: #fff;
      -webkit-text-fill-color: #fff
    }
    #triton-projects li a {
      height: 40px;
      line-height: 40px;
      font-size: 12px
    }
    #triton-projects li a i {
      display: inline-block;
      margin-right: 5px;
      color: #ddd;
      -webkit-text-fill-color: #ddd
    }
    .ce-right .ce-gallery {
      float: none
    }
    .ce-intext.ce-right .ce-gallery {
      margin-left: 0
    }
    .ce-intext.ce-left .ce-gallery {
      margin-right: 0
    }
    .teaser-link-list li {
      display: block;
      min-width: 120px;
      text-align: center
    }
  }
  @media screen and (max-width: 930px) {
    .distributor .contact-general {
      margin: 8px auto;
      display: block;
      width: 100%
    }
    .distributor .contact-general td:nth-child(1) {
      width: 115px
    }
    .distributor h2,
    .distributor table,
    .distributor address {
      clear: both
    }
    .distributor h2 {
      font-size: 30px;
      text-align: left
    }
    .distributor img {
      position: absolute;
      bottom: 5px;
      right: 5px;
      max-width: 191px!important;
      opacity: 0.5;
      z-index: -1
    }
  }
  @media screen and (max-width: 810px) {
    #services,
    #follow {
      float: none;
      text-align: center;
      width: 100%
    }
    #cookie-informations p {
      font-size: 12px;
      line-height: 20px
    }
    .teaser-link-list li {
      display: block;
      min-width: 120px;
      text-align: center
    }
    .register-urgent-note {
      padding: 5px 10px 0 10px;
      text-align: center;
    }
  }
  @media screen and (max-width: 766px) {
    .c50,
    .c25 {
      width: 100%;
      float: none
    }
    #footer-nav {
      padding: 25px 0 0
    }
    #footer-nav>ul>li {
      width: 50%;
      padding: 0 10px
    }
    #footer-nav>ul>li:nth-child(3n+1) {
      clear: none
    }
    #footer-nav>ul>li:nth-child(2n+1) {
      clear: left
    }
    #footer-nav>ul>li:after {
      content: none;
      display: none
    }
    #footer-nav a {
      display: block;
      padding: 6px 0
    }
    .teaser-new:after {
      border-width: 80px 80px 80px 0
    }
    .teaser-new:before {
      font-size: 24px;
      left: 4px;
      top: 24px
    }
    #video-sharelink a,
    #video-sharelink span {
      float: none;
      margin: 10px;
      width: calc(100% - 20px)
    }
    #video-sharelink a {
      margin-top: 20px
    }
    .yt-video-search form {
      padding: 20px 0
    }
    .teaser-link-list li {
      display: block;
      min-width: 120px;
      text-align: center
    }
    .register-urgent-note {
      padding: 5px 10px 0 10px;
      text-align: center;
    }
  }
  @media screen and (max-width: 700px) {
    .content-element.ce-fullsize {
      padding-left: 0;
      padding-right: 0
    }
    .content-element h1 {
      font-size: 36px;
      line-height: 44px
    }
    .content-element h2 {
      font-size: 26px;
      line-height: 36px
    }
    .register-urgent-note {
      padding: 5px 10px 0 10px;
      text-align: center;
    }
    .distributor td {
      display: inherit
    }
    .address-hr {
      width: 100% !important
    }
    .distributor img {
      position: absolute;
      bottom: 5px;
      right: 5px;
      max-width: 92px!important;
      opacity: 0.5;
      z-index: -1
    }
  }
  @media screen and (max-width: 600px) {
    .teaser {
      padding: 25px;
      text-align: center
    }
    .teaser h2 {
      font-size: 40px
    }
    .teaser h3 {
      font-size: 22px
    }
  }
  @media screen and (max-width: 510px) {
    #services li,
    #follow>span,
    #follow li {
      display: block;
      text-align: left;
      line-height: 50px;
      height: 50px
    }
    #services li i:before {
      top: 16px;
      left: 5px
    }
    #follow li {
      margin: 0
    }
    #follow>span {
      display: none
    }
    #follow li i {
      top: 9px
    }
    .register-urgent-note {
      padding: 5px 10px 0 10px;
      text-align: center;
    }
  }
  @media screen and (max-width: 480px) {
    #footer-nav>div>ul>li {
      width: 100%;
      padding: 0 10px;
      float: none
    }
    #footer-nav>div>ul>li:nth-child(2n+1) {
      clear: none
    }
    .register-urgent-note {
      padding: 5px 10px 0 10px;
      text-align: center;
    }
  }