@font-face {
  font-family: NHaasSTD;
  src: url("fonts/NHaasGroteskTXStd-55Rg.otf") format("opentype")
}

@font-face {
  font-family: NHaasLIGHT;
  src: url("fonts/NHaasGroteskDSStd-35XLt.otf") format("opentype")
}

@font-face {
  font-family: NHaasTHIN;
  src: url("fonts/NHaasGroteskDSStd-15UltTh.otf") format("opentype")
}

@font-face {
  font-family: NHaasMED;
  src: url("fonts/NHaasGroteskTXStd-65Md.otf") format("opentype")
}

@font-face {
  font-family: NHaasBOLD;
  src: url("fonts/NHaasGroteskTXStd-75Bd.otf") format("opentype")
}

@font-face {
  font-family: NHaasIT;
  src: url("fonts/NHaasGroteskTXStd-56It.otf") format("opentype")
}

@font-face {
  font-family: Slogan-Mark;
  src: url("fonts/Slogan-Mark.otf") format("opentype")
}

@font-face {
  font-family: Youth-Action;
  src: url("fonts/Youth-Action.ttf") format("truetype")
}

@font-face {
  font-family: Nunito-Black;
  src: url("fonts/Nunito-Black.ttf") format("truetype")
}




body {margin: 0; font-family: NHaasSTD; font-size: 16px; background-color: #FFF;}

.debug {position: fixed; left: 10px; bottom: 10px; padding: 10px; width: 160px; color: red; z-index: 200;}

sub {font-size: 0.65em;}

.wmax0 {max-width: 1440px;}
.wmax1 {max-width: 1440px; padding: 0 20px;}
.wmax2 {width: 100%;}
.wmax3 {max-width: 1100px; padding: 0 20px;}
.wmax4 {max-width: 1040px; padding: 0 20px;}
.wmax5 {max-width: 1230px; padding: 0 20px;}
.wmax6 {max-width: 1200px;}

.container {margin: 0px auto; position: relative; }
.container2 {margin: 80px auto; position: relative;}
.container3 {margin: 0 auto; padding-top: 80px; padding-bottom: 80px; position: relative;}
.container4 {margin: 0px auto 30px; position: relative; }
.container5 {margin: 0 auto; padding-top: 80px; padding-bottom: 30px; position: relative;}

.frame {position: fixed; left: 0; top: 0; width: 100%; height: 100vh; }
.next_frame {position: fixed; left: 0; top: 100vh; width: 100%; height: 100vh; }
.layer {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.labelWrapper {position: relative; top: 50px; left: 0; opacity: 0; } 
.labelWrapper100 {position: relative; top: 100px; left: 0; opacity: 0;}
.labelWrapper150 {position: relative; top: 150px; left: 0; opacity: 0;}
.labelWrapper50vh {position: relative; top: 50vh; left: 0; opacity: 0;}
.labelWrapper100vh {position: relative; top: 100vh; left: 0;}



/* COMMON PROPERTIES */
.relative {position: relative;}
.opacity0 {opacity: 0;}
.align-left {text-align: left;}
/*
.smoothed-top-0-6 {transition: top 0.6s cubic-bezier(0, 0.55, 0.45, 1);}
.smoothed-top-1 {transition: top 1s cubic-bezier(0, 0.55, 0.45, 1);}
.smoothed-top-1-2 {transition: top 1.2s cubic-bezier(0, 0.55, 0.45, 1);}
.smoothed-top-2 {transition: top 2s cubic-bezier(0, 0.55, 0.45, 1);}
.smoothed-top-0-6 {transition: top 0.3s;}
.smoothed-top-1 {transition: top 0.3s;}
.smoothed-top-1-2 {transition: top 0.3s;}
.smoothed-top-2 {transition: top 0.3s;}
*/



/* BG COLORS */
.bg_black {background-color: #000;}
.bg_dark {background-color: #555;}
.bg_grey {background-color: #C4C4C4;}
.bg_medium {background-color: #E5E5E5;}
.bg_medium_plus {background-color: #EAEAEA;}
.bg_medtolight {background-color: #F2F2F2;}
.bg_light {background-color: #F8F8F8;}
.bg_white {background-color: #FFF;}
.bg_cream {background-color: #FFFAE1;}
.bg_gradient1 {background: linear-gradient(0deg, #2D2D2D 0%, #000 100%);}



/* OVERLAYS */
.totalOverlay {position: fixed; z-index: 45; top: 0px; left: 0px; width: 100vw; height: 100vh; background-color: black;}
.overlay1 {position: absolute; top: 0px; left: 0px; width: 100%; height: 270px; background: linear-gradient(180deg, rgba(0,0,0,0.8) 40%, rgba(0,0,0,0) 100%);}
.overlay2 {position: fixed; z-index: 10; top: 0px; left: 0px; width: 100vw; height: 100vh; background-color: rgba(255,255,255,0.8); display: none;}
.overlay3 {position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); }
.overlay4 {position: absolute; top: 0px; left: 0px; width: 100vw; height: 100vh; background-color: black;}
.overlay5 {position: absolute; top: 0px; left: 0px; width: 100%; height: 40%; background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.92) 25%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0) 100%);}
.overlay6 {position: absolute; bottom: 0px; left: 0px; width: 100%; height: 40%; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.92) 25%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0) 100%);}
.overlay7 {position: absolute; top: 0; left: 0; width: 100%; height: 6vh; background: linear-gradient(0deg, rgba(248,248,248,0) 0%, rgba(248,248,248,1) 100%);}
.overlay8 {position: absolute; top: 0; left: 0; width: 100%; height: 39%; background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 25%, rgba(0,0,0,0.95) 50%, rgba(0,0,0,1) 100%);}
.overlay9 {position: absolute; bottom: 0; left: 0; width: 100%; height: 10%; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);}



/* BUTTONS */





/* BG IMAGES */
.bgImage {background-size: contain; background-repeat: no-repeat; background-position: bottom center;}
.bgImageCover {background-size: cover; background-repeat: no-repeat; background-position: bottom center;}
.bgImageContain {background-size: contain; background-repeat: no-repeat; background-position: center center;}
.bgImageTop {background-size: cover; background-repeat: no-repeat; background-position: top center;}
.bgImageBottom {background-size: contain; background-repeat: no-repeat; background-position: bottom center;}
.bgImageCenter {background-size: cover; background-repeat: no-repeat; background-position: center center;}
.bgImageLeft {background-size: cover; background-repeat: no-repeat; background-position: left center;}
.bgImageRight {background-size: auto 85%; background-repeat: no-repeat; background-position: 80% bottom;}

.bgImage1 {background-image: url(../images/home/thumbnail_quantum.jpg); }
.bgImage2 {background-image: url(../images/home/thumbnail_helium.jpg); }
.bgImage3 {background-image: url(../images/home/thumbnail_copper.jpg); }
.bgImage4 {background-image: url(../images/home/thumbnail_longevity.jpg); }
.bgImage5 {background-image: url(../images/home/baloon-rise.png); }
.bgImage6 {background-image: url(../images/home/intelligence_unit.jpg); }
.bgImage7 {background-image: url(../images/home/biorefinery.jpg); }
.bgImage8 {background-image: url(../images/home/nextGen.jpg); }
.bgImage9 {background-image: url(../images/home/baloons.jpg); }
.bgImage10 {background-image: url(../images/people/people.jpg); }
.bgImage11 {background-image: url(../images/home/news.png); }
.bgImage12 {background-image: url(../images/home/kabena.jpg); }
.bgImage13 {background-image: url(../images/home/figures.png); }




/* STANDARD SIZED COMPONENTS */
.w100pc {width: 100%;}

.h300 {height: 300px;}
.h700 {height: 700px;}
.h755 {height: 755px;}
.h790 {height: 790px;}
.h50vh {height: 50vh;}
.h60vh {height: 60vh;}
.h75vh {height: 75vh;}
.h80vh {height: 80vh;}
.h100vh {height: 100vh;}

.mtb80 {margin-top: 80px; margin-bottom: 80px;}
.mb0 {margin-bottom: 0;}
.mb50 {margin-bottom: 50px;}

.pt30 {padding-top: 30px;}
.pb30 {padding-bottom: 30px;}
.pb50 {padding-bottom: 50px;}
.pb80 {padding-bottom: 80px;}
.pb400 {padding-bottom: 400px;}





.display-block {display: block;}
.display-table-1 {display: table; table-layout: fixed; width: 100%; }
.display-table-cell-1 {display: table-cell; padding: 30px 0px; width: 100%;  }
.display-table-cell-1-left {display: table-cell; padding: 30px 15px 30px 0px; width: 50%;  }
.display-table-cell-1-right{display: table-cell; padding: 30px 0px 30px 15px; width: 50%;  }
.display-table-cell-1-pt0 {padding-top: 0;}
.display-table-cell-1 a,.display-table-cell-1-left a,.display-table-cell-1-right a {color: #000; text-decoration: none;}



.mainSectionImage {width: 100%; display: block;}
.mainSectionImage2 {width: 100%; display: block; position: relative; z-index: 10;}


.contentWrapper {position: absolute; top: 0px; left: 0px; width: 100%; padding-top: 40px;}
.contentWrapper2 {position: absolute; top: 0px; left: 0px; width: calc(100% - 130px); padding: 100px 0px 0px 96px;}
.contentWrapper3 {position: absolute; top: 0px; left: 0px; z-index: 10; width: calc(100% - 130px); padding: 70px 0px 0px 96px;}
.contentWrapper4 {position: absolute; top: 0px; left: 0px; width: calc(100% - 120px); padding-left: 120px; padding-top: 120px;}
.contentWrapper5 {position: absolute; top: 0px; left: 0px; width: 100%; padding-top: 70px;}
.contentWrapper6 {position: absolute; top: 17%; right: calc(25% - 150px); max-width: 300px; text-align: center;}

.largeLinkWrapper a {color: #000; text-decoration: none;}
.largeLink {height: 625px; padding: 40px 50px; position: relative; z-index:2;}
.largeLink750 {height: 750px;}
.largeLinkLine1 {font-family: NHaasMED; font-size: 20px; margin-bottom: 10px;  color: #000; text-align: center;}
.largeLinkLine2 {font-family: NHaasMED; font-size: 50px; margin-bottom: 15px;  color: #000; text-align: center;}
.largeLinkLine3 {font-size: 24px; color: #000; text-align: center;}
.largeLinkLineLeft {text-align: left;}

.extraLargeLinkLine0 {font-family: NHaasMED; font-size: 20px; margin-bottom: 10px;  color: #000; text-align: center;}
.extraLargeLinkLine1 {font-family: NHaasMED; font-size: 60px; margin: 30px 0px 10px; text-align: center;}
.extraLargeLinkLine2 {font-size: 28px; margin-bottom: 15px; text-align: center;}
.extraLargeLinkWhite {color: #FFF;}

.containerImg {padding: 0px; position: relative;}
.containerImg2 {padding: 50px 0px; position: relative; }
.containerImg3 {width: 324px; height: 324px; margin: 18px auto;}
.containerImg3 img {display: block;}


.pageCaption {display: inline-block; position: relative; top: 2px;}



.captionIcon {display: inline-block; margin-right: 10px; height: 56px; width: auto; position: relative; top: 4px;}
.captionIcon2 {display: inline-block; margin-right: 15px; height: 56px; width: auto;}
.captionIcon3 {display: inline-block; margin-right: 10px; height: 70px; width: auto; vertical-align: middle;}
.captionIcon4 {display: inline-block; height: 20px; vertical-align: middle; position: relative; top: -2px;}
.captionIcon5 {display: inline-block; margin-right: 3px; height: 32px; vertical-align: middle; position: relative; top: -2px;}
.captionIcon6 {display: inline-block; margin-right: 10px; height: 35px; vertical-align: middle; }
.captionIcon6-2 {display: inline-block; margin-right: 10px; height: 42px; vertical-align: middle; position: relative; top: -2px;}
.captionIcon7 {display: inline-block; margin-right: 10px; height: 20px; position: relative; top: 1px; border-radius: 5px;}
.captionIcon8 {display: inline-block; margin-right: 6px; height: 10px; position: relative; top: 1px; }
.captionIcon9 {display: inline-block; margin-right: 10px; height: 24px; position: relative; top: -2px; vertical-align: middle;}
.captionIcon10 {display: inline-block; margin-right: 10px; width: 33px; height: 37px; position: relative; top: -1px; vertical-align: middle;}
.captionIcon11 {display: inline-block; margin-right: 15px; height: 28px; position: relative; top: -4px; vertical-align: middle;}
.captionIcon12 {display: inline-block; margin-right: 15px; height: 28px; position: relative; top: -8px; vertical-align: middle;}
.captionIcon13 {display: inline-block; margin-right: 15px; height: 58px; position: relative; top: -4px; vertical-align: middle;}
.captionIcon14 {display: inline-block; margin-right: 10px; height: 27px; position: relative; top: -4px; vertical-align: middle;}
.captionIcon15 {display: inline-block; margin-right: 10px; height: 19px; position: relative; top: -4px; vertical-align: middle;}
.captionIcon16 {display: inline-block; margin-right: 15px; height: 55px; position: relative; top: -4px; vertical-align: middle;}



/* LOGO & NAVIGATION BAR */
.logo {width: 33px; height: 28px; filter: invert(1);}
.navigation {height: 45px; width: 100%; background-color:rgba(0,0,0,0.8); backdrop-filter: blur(5px); position: fixed; top: 0px; left: 0px; z-index: 150; text-align: center; transition: top 0.4s;}
/*
.navigationLight {background-color:rgba(255,255,255,0.07);}
.navigationStart {background-color:rgba(255,255,255,0.15); backdrop-filter: blur(5px);}
.navigationStartBlack {background-color:rgba(0,0,0,0.2); backdrop-filter: blur(5px);}
*/
.nav_hidden {top: -45px; }
.navigation table {width: 100%; height: 100%; border-collapse: collapse;}
.navigation img {display: inline; vertical-align: middle;}
.naviTableLeft {text-align: left; width: 50px; padding-left: 8px;}
.naviTableRight {text-align: right; width: 50px; padding-right: 20px;}
.naviItem {display: inline-block; width: 70px; text-align: center; position: relative; top: -2px; color: #FFF; font-family: NHaasSTD; font-size: 14px; cursor: default;}
.languageSelector {display: none;}



/* NAVIGATION DROP-DOWN */
.naviDD {position: absolute; top: 40px; left: -90px; z-index: 50; width: 230px; background-color: rgba(100,100,100,1); backdrop-filter: blur(5px); border-radius: 20px; padding: 0px 10px; display: none;}
.naviDD a {text-decoration: none; color: #FFF;}
.naviOption {display: table; width: 100%; margin: 15px 0px 40px; transition: color 0.3s;}
.naviOption.lastNavi {margin-bottom: 25px;}
.naviOption.singleNavi {margin-bottom: 20px;}
.naviOption:hover .naviOptionLeft:not(.noHover) {color: #0CF; transition: color 0.3s; }
.naviOptionLeft {display: table-cell; text-align: left; vertical-align: middle; padding-left: 10px;}
.navOptionCaption {font-family: NHaasMED; font-size: 18px; margin-bottom: 5px;}
.navOptionCopy {font-family: NHaasMED; font-size: 12px; }
.naviOptionRight {display: table-cell; width: 55px; min-height: 45px; padding-right: 10px; position: relative;}
.naviIcon {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: auto;}

.naviOptionMult {text-align: left; padding-left: 10px; padding-bottom: 15px;}
.naviSeparator {width: 50%; height: 15px; margin-left: 10px; border-top: 1px solid rgba(255,255,255,0.8); }
.naviMultCaption {font-size: 11px;}
.naviMultLink {font-family: NHaasMED; font-size: 12px; padding: 8px 0px;}
.naviMultLink a { color: #FFF; }
.naviMultLink a:hover { color: #0CF; transition: color 0.3s; }
.naviMultIcon {width: 10px; margin-right: 8px;}
.naviMultLinkSec {color: rgba(255,255,255,0.7);}

.contactLink {display: block; margin: 10px 0;}
.contactLink:hover {color: #0CF; transition: color 0.3s;}



/* LANGUAGE DROP-DOWN */
.langDD {position: absolute; top: 53px; right: 20px; z-index: 150; background-color: #EAEAEA; border: 1px solid #AAA; border-radius: 20px; padding: 5px 15px; display: none;}
.langOption {display: table; width: 100%; margin: 8px 0; background-color: #F8F8F8; border-radius: 10px; transition: color 0.3s; cursor: pointer; user-select: none;}
.langOption:hover .langOptionRight {opacity: 0.8; transition: all 0.3s; }
.langOptionLeft {display: table-cell; vertical-align: middle; width: 45px; padding: 8px;}
.langOptionRight {display: table-cell; vertical-align: middle; padding-right: 10px; font-family: NHaasMED; font-size: 18px; text-align: left;}



/* SECONDARY BAR */
.secondaryCaption {position: absolute; bottom: 0; left: 6vw; width: min(530px,calc(100% - 40px)); color: #FFF;}
.secondaryCaptionLabel {font-family: NHaasMED; font-size: 22px; height: 40px;}
.secondaryBar {position: fixed; top: 0; left: 0; width: 100%; height: calc(45px + 12vh); z-index: 50; transition: height 0.4s, background-color 0.5s;}
.secondaryBarCompact {height: 45px; background-color: rgba(0,0,0,0.2); backdrop-filter: blur(5px);}
.secondaryBarMidi {height: 90px; background-color: rgba(0,0,0,0.2); backdrop-filter: blur(5px); }
.secondaryBarLight {background-color: rgba(255,255,255,0.2);}
.secondaryMenu {position: absolute; bottom: 7px; right: 6vw; z-index: 100;}
.secondaryLink {color: #C4C4C4; text-decoration: none; margin-right: 8px; vertical-align: middle;}
.secondaryLink div {display: inline-block; font-family: NHaasMED; font-size: 14px; padding: 6px 18px; background: rgba(232, 232, 232, 0.2); border-radius: 20px;}
.arrowUp {display: inline-block; position: relative; width: 30px; height: 30px; vertical-align: middle; border-radius: 30px; cursor: pointer; background: rgba(232, 232, 232, 0.2);}
.arrowUpIcon {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 18px;}
.detectionArea {position: fixed; left: 0; top: 0; width: 100%; height: 45px; z-index: 50;}


/* KEYPOINT BUTTONS */
.keyPointBtn {position: fixed; right: 20px; width: 50px; height: 50px; border-radius: 50px; cursor: pointer; background: rgba(232, 232, 232, 0.8); z-index: 100; -webkit-tap-highlight-color: transparent;}
.prevPoint {top: calc(50vh - 70px);} 
.nextPoint {top: calc(50vh + 20px);} 
.keyPointIcon {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 18px; opacity: 1;}
.keyPointIconActive {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 18px; opacity: 0; transition: opacity 0.3s;}
.nextPoint .keyPointIcon, .nextPoint .keyPointIconActive {transform: translate(-50%,-50%) rotate(180deg); }

@media (hover: hover) { /* only for desktop */
  .keyPointBtn:hover .keyPointIcon {opacity: 0;}
  .keyPointBtn:hover .keyPointIconActive {opacity: 1;}
}

.keyPointActive .keyPointIcon {opacity: 0;}
.keyPointActive .keyPointIconActive {opacity: 1;}

.keyPointSpinner {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 50px; height: 50px; opacity: 0; transition: opacity 0.5s;}
.keyPointActive .keyPointSpinner {opacity: 1;}





/* BOTTOM SLOGAN */
.aboutSlogan {padding: 90px 0; font-family: NHaasMED; font-size: 50px; color: #888; }





/* BOTTOM LATEST */
.bottomLatest {border-top: 1px solid #AAA; padding-top: 20px;}
.bottomSectionHeader {font-family: NHaasMED; font-size: 30px; color: #888; margin-bottom: 30px;}
.latestColumns {display: table; margin-bottom: 100px;}
.latestColumn {display: table-cell; vertical-align: top; padding-right: 75px;}

.latestCaption {font-family: NHaasMED; font-size: 14px; color: rgba(69,69,69,0.7); margin-bottom: 18px; position: relative; padding-left: 20px;}
.latestIcon {position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.latestHeader {font-family: NHaasMED; font-size: 18px; color: rgba(69,69,69,1); margin-bottom: 20px;}
.latestLink {display: block; font-family: NHaasMED; font-size: 12px; color: rgba(69,69,69,1); text-decoration: none; margin: 15px 0;}
.latestLink:hover {text-decoration: underline;}







/* BOTTOM CONTACTS */
.bottomContacts {border-top: 1px solid #AAA; padding-top: 20px;}
.contactColumns {display: table; width: 100%; margin-bottom: 100px;}
.contactColumn {display: table-cell; vertical-align: top;}
.cc1 {text-align: left;}
.cc2 {text-align: center;}
.cc3 {text-align: right;}
.contactColumnContainer {display: inline-block; text-align: left;}
.contactLogo {display: inline-block; vertical-align: top; margin-right: 15px;}
.contactLogo img {width: 56px;}
.contactText {display: inline-block; vertical-align: top;}
.contactCity {font-family: NHaasSTD; font-size: 18px; color: #424242;}
.contactCity span {font-family: NHaasLIGHT;}
.contactCountry {font-family: NHaasMED; font-size: 28px; color: #424242; margin-bottom: 25px;}
.contactData {font-family: NHaasSTD; font-size: 14px; color: #424242; line-height: 1.8em;}
.contactSeparator {display: table-cell;}
.contactSeparator div {width: 1px; height: 100px; background-color: #B8B8B8;}









/* BOTTOM MENU */
.bottomMenu {border-top: 1px solid #AAA; margin-bottom: 67px;}
.pathLine {position: absolute; top: -50px; left: 0; font-family: NHaasMED; font-size: 14px; color: #424242; width: 70vw;}
.pathArrow {margin: 0px 8px;}
.menuColumns {display: table; table-layout: fixed; width: 100%; margin-top: 80px;}
.menuColumn {display: table-cell; vertical-align: top; width: 20%; position: relative;}
.mc1 {text-align: left;}
.mc2 {text-align: center;}
.mc3 {text-align: center;}
.mc4 {text-align: center;}
.mc5 {text-align: right;}
.menuColumnZero {text-align: left;}
.menuColumnContainer {display: inline-block; text-align: left; position: relative; left: 0; transition: left 0.5s;}
.bmHeader {font-family: NHaasMED; font-size: 14px; color: #424242; margin-bottom: 13px;}
.bmItem { margin-bottom: 13px;}
.bmLink {font-size: 14px; color: #646464; text-decoration: none;}
.bmLink:hover {text-decoration: underline;}




/* FOOTER */
.footer {display: table; width: 100%; border-top: 1px solid #828282; color: #828282; font-size: 14px;}
.footerLeft {display: table-cell; text-align: left; vertical-align: middle; padding: 20px 0px;}
.footerRight {display: table-cell; text-align: right; vertical-align: middle; font-family: NHaasMED;}
.footerRight img {vertical-align: middle; margin-left: 10px;}





/* COMMON */
.freeze {overflow-y: hidden; margin-right: 17px;}
.test {color: red; border: 2px solid red; background-color: red;}
.hidden {display: none;}



/* FONT FEATURES */
.fontColorGreen {color:#81FFB3;}
.fontColorGreenLight {color:#61D239;}
.fontColorGreenDark {color:#23DD4C;}
.fontColorBlue {color: #7BD0FF;}
.fontColorBlue2 {color: #76BDFF;}
.fontColorBlue3 {color: #2B98FF;}
.fontColorYellow {color:#FFCB7D;}
.fontColorDarkYellow {color:#F6FF3E;}
.fontColorRed {color:#FD6173;}
.fontColorSalad {color: #CAFF81;}
.fontColorGreenDark {color:#23DD4C;}
.fontColorWhite {color:#FFF;}
.fontColorLightGrey {color:#ADADAD;}
.fontColorGrey0 {color:#777;}
.fontColorGrey {color:#888;}
.fontColorGrey2 {color:#999;}
.fontColorGrey3 {color: rgba(255,255,255,0.5);}
.fontColorGrey4 {color: rgba(0,0,0,0.5);}
.fontColorCyan {color:#BFC7DF;}
.fontColorLightBlue {color: #80FFE0;}
.fontColorBlack {color:#000;}
.fontColorMidGrey {color:#676767;}
.fontColorOrange {color: #EC954F;}
.fontColorOrangeLight {color: #FBC151;}
.fontColorPeach {color: #FFA257;}
.fontColorPeachPale {color: #FFD8B8;}
.fontColorBlue3 {}
.fontColor50 {color: rgba(255,255,255,0.5);}


.fontTypeThin {font-family: NHaasTHIN;}
.fontTypeLight {font-family: NHaasLIGHT;}

.fontSize05em {font-size: 0.5em;}
.fontSize075em {font-size: 0.75em;}
.fontSize08em {font-size: 0.8em;}
.fontSize15 {font-size: 15px;}
.subfont {font-size: 0.5em;}
sup {font-size: 0.7em;}




/* MOBILE ASSETS HIDDEN FOR DESKTOP */
#mobileMenuImg {width: 32px; height: 16px; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -o-user-select: none; display: none;}
.mobileMenu { position: relative; z-index: 100; height: 100vh; text-align: left; background-color: #EAEAEA; padding: 0 25px; display: none;}
.mobileMenu a {color: #000; text-decoration: none;}
.mmSeparator {height: 12px; border-width: 0 0 1px; border-color: #AAA; border-style: solid; margin-bottom: 20px;}
.mmSeparatorLabel {font-size: 12px; color: #AAA; padding: 0 12px 0 0; background-color: #EAEAEA;}
.mmMainItem {font-size: 15px; margin: 12px 0;}
.mmSubItem {font-size: 13px; color: #454545; margin: 13px 0;}
.footerSeparator {height: 0; border-width: 0 0 1px; border-color: #AAA; border-style: solid; margin: 20px 0; display: none;}
.mobileOnlyInline,.mobileOnlyBlock {display: none;}



/* ANIMATION HELPERS */
.hidden-1 {opacity:0; transform: translateY(30px);}
.hidden-2 {opacity:0; }
.hidden-3 {opacity:0; transform: translateY(30vh);}
.tr-to-1 {transition: transform 0.5s cubic-bezier(0, 0, 0.5, 1), opacity 0.5s cubic-bezier(0, 0, 0.5, 1);}
.transition-2 {transition: opacity 0.5s;}
.transition-3 {transition: transform 0.3s cubic-bezier(0, 0, 0.5, 1), opacity 0.3s;}


.hidden_on_start {opacity: 0 !important;}



/* RESPONSIVENESS */

@media (max-width: 1200px) {
 .contentWrapper2 {width: calc(100% - 8vw); padding: 8vw 0px 0px 8vw;}
 .contentWrapper3 {width: calc(100% - 8vw); padding: 6vw 0px 0px 8vw;} 
 .contentWrapper4 {width: calc(100% - 10vw); padding-left: 10vw; padding-top: 10vw;}
 .extraLargeLinkLine1 {font-size: 50px; }
 .extraLargeLinkLine2 {font-size: 24px;}  
}

@media (max-width: 1100px) {
 .bmLink {font-size: 13px;}
 .largeLink {padding: 15px;}
}

@media (max-width: 1050px) {
  .latestColumns {display: block; }
  .latestColumn {display: inline-block; margin-right: 20px; margin-bottom: 20px;}
}

@media (max-width: 1000px) {
  .largeLinkLine2 {font-size: 40px;}
  .largeLinkLine3 {font-size: 20px;}
  .extraLargeLinkLine1 {font-size: 42px; }
  .extraLargeLinkLine2 {font-size: 22px;}   
  .aboutSlogan {font-size: 36px; }  
}

@media (max-width: 900px) {
  .menuColumns {table-layout: auto;}
  .menuColumn {width: auto;}
  .aboutSlogan {font-size: 32px; }
  
  .contactColumns {display: block; margin-bottom: 30px;}
  .contactColumn {display: inline-block; }
  .contactColumn:not(:last-child) {margin-right: 30px; margin-bottom: 50px;}
  .contactSeparator {display: none;}
  .contactCountry {margin-bottom: 0;}      
}

@media (max-width: 800px) {
  .contentWrapper3 {width: calc(100% - 4vw); padding: 4vw 0px 0px 4vw;} 
  .aboutSlogan {font-size: 28px; }  
}

@media (max-width: 750px) {
 .bmLink {font-size: 12px;}
}

@media (max-width: 700px) {

  .secondaryBar {position: absolute; height: 120px;}
  .secondaryMenu {display: none;}
  .secondaryCaptionLabel {font-size: 20px;}   

  .wmax0 {max-width: 100%;}
  .wmax1 {max-width: calc(100% - 40px); padding-left: 0; padding-right: 0;}
  .wmax3 {max-width: calc(100% - 40px); padding: 0 20px;}  
  .wmax4 {max-width: calc(100% - 40px); padding: 0 20px;}
  .wmax5 {max-width: calc(100% - 40px); padding: 0 20px;}  
  .wmaxMobile {width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; margin: 0;}
  
  .labelWrapper,.labelWrapper100,.labelWrapper150,.labelWrapper50vh,.labelWrapper100vh { top: 0; opacity: 1;}  

  .h75vh {height: auto;}  
  .h100vh {height: auto;}  
  
  .largeLink {height: calc(100vh - 75px);} 
  .largeLinkLine3white {background-color: rgba(255,255,255,0.5);} 
  .largeLinkLine3black {background-color: rgba(0,0,0,0.5);}     
  .naviItem {display: none;}
  #mobileMenuImg {display: inline;}
  .menuColumn {display: block;}
  .footerSeparator {display: block;}
  .mobileOnlyInline {display: inline;}
  .mobileOnlyBlock {display: block;}
  .desktopOnly {display: none;}  
  .newsContainer2 {text-align: center;}
  .newsContainer2Header {font-size: 30px; margin: 0 0 5px;}
  .newsItem2 {margin: 15px 5px;}  
  .aboutSlogan {padding: 70px 0; font-size: 18px; }
  
  .display-table-1 {display: block;}
  .display-table-cell-1 {display: block;  padding: 30px 0; }
  .display-table-cell-1-left {display: block;  padding: 30px 0 0; width: 100%;  }
  .display-table-cell-1-right {display: block;  padding: 30px 0; width: 100%;  }
  .display-table-cell-1 a,.display-table-cell-1-left a,.display-table-cell-1-right a {color: #000; text-decoration: none;}
  
  .pathLine {width: 90vw;}
}


@media (max-width: 420px) {
  .footer {font-size: 11px;}
}