.colorAreaBlack {position: absolute; top: 0; left: 0; width: 100%; height: 1750vh; background-color: #000; }

#frame1 {height: 185vh; position: relative;}
#frame2 { opacity: 0;}
#frame2inner {height: 100vh; display: flex; flex-direction: row; align-items: center; }
#frame3 { opacity: 0;}
.frame6ScaledUp {transform: scale(10);}
#frame8 {background-color: #F8F8F8; display: flex; align-items: center; top: 100vh;}
#frame12 {background-color: #F8F8F8; }

.globalContext {height: 70vh; position: relative; margin-bottom: 60px;}
.globalContextWrapper {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(1000px,calc(100% - 40px)); font-size: 24px; color: #ADADAD; text-align: center;}
.atomIcon {height: 72px; width: auto; margin: 20px;}


#spacer1 {height: 1550vh;}


.dynamicOptions {display: inline-block; position: relative; min-width: 220px;}
.dynamicOption {display: inline-block; position: absolute; top: 0; left: 0; }
#tech2,#tech3,#tech4 {opacity: 0;}
.textGroup01 {margin-top: 10vh; margin-left: 6vw; width: min(530px,calc(100% - 40px)); color: #FFF;}
.label01-1 {font-family: NHaasMED; font-size: 30px; }

#sunAreaWrapper { position: relative; height: 170vh; }

.textGroup02 {display: inline-block; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: 'NHaasBd', NHaasMED, sans-serif; font-size: min(380px,28vw); color: #232326; line-height: 0.9em; }
/* Wortmarke: linksbuendig zum Helium-Titel, nah darunter; schiebt beim Scrollen nach
   oben (js/sh-sections.js) und kommt beim Hochscrollen zurueck (Marcel 2026-07-02). */
.textGroup02 .heroWordmark {display: block; height: clamp(20px, 2.6vw, 36px); margin: 0.09em 0 0 0.015em; opacity: 0.92; transition: none; will-change: transform, opacity;}
.textGroup02.start {top: 100%; transform: translate(-50%,0) scale(0.5);}

#sun {position: absolute; top: 45vh; left: 50%; transform: translateX(-50%); width: calc(100vw - 40px); height: calc(100vw + 10vh); background-size: 112%; background-repeat: no-repeat; background-position: center center; background-image: url(../images/helium/sun_alpha.png); z-index: 3;} 


.textGroup03 {display: inline-block; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); min-width: min(80vh,calc(67vw - 26px)); z-index: 2; opacity: 0;}
.label03-1 {font-family: NHaasMED; font-size: min(60px,4.44vw); color: #FFF; margin-bottom: 30px;}
.label03-2 {font-family: NHaasMED; font-size: 26px; color: #8f8f93;}


.f2Container {display: table; width: 100%;}
.f2Left {display: table-cell; width: 41%; vertical-align: top; padding-right: 3%; }
.textGroup04 {font-family: NHaasMED; font-size: 50px; color: #FFF; margin-bottom: 50px;}
/*

*/


.f2Right {display: table-cell; width: 59%;}
.textGroup05 {font-family: NHaasMED; font-size: 30px; color: #ADADAD; margin-bottom: 25px; }
/*#labelWrapperB1 {z-index: 20;}*/

.button01 {display: inline-block; padding: 5px; background-color: #171717; border-radius: 40px; }
.button01label {display: inline-block; font-family: NHaasMED; font-size: 20px; color: #FFF; vertical-align: middle; margin: 0 15px;}
.button01icon {display: inline-block; width: 52px; vertical-align: middle;}

.button02 {display: inline-block; margin: 70px 50px;}
.button02label {font-family: NHaasMED; font-size: 16px; color: #FFF; position: relative;}
.button02icon {position: absolute; top: 60%; left: 50%; transform: translate(-50%,-50%); width: 21px; height: 72px;}

.buttonSet {text-align: right; margin-top: 25px;}
.button03 {display: inline-block; padding: 14px 25px; font-family: NHaasMED; font-size: 20px; color: #FFF; background: rgba(32, 32, 32, 0.2); backdrop-filter: blur(5px); border-radius: 30px; margin-left: 15px; margin-bottom: 15px;}



.appGrid {display: grid; grid-template-columns: repeat(6, 1fr); justify-items: center; width: 112%; position: relative; left: -6%; top: 50%; transform:translateY(-50%); }
.gridCell {width: 100%; height: 18.45vw; }
.gridCell.double {grid-column: 4 / 6; }
.gridCard {position: relative; left: 3%; top: 3%; width: 94%; height: 94%; border-radius: 30px; background-size: cover; background-repeat: no-repeat; background-position: center; opacity: 0; } /* transform 0.3s, opacity 0.3s*/
.cardCopy {width: 88%; height: 88%; padding: 6%; border-radius: 30px; font-family: NHaasMED; font-size: min(22px,1.8vw); color: #C2C2C2; opacity: 0;}
.cardCopy:hover {background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); opacity: 1;}
.appTextGroup {position: relative; left: 3%; top: 50%; transform: translateY(-50%); font-family: NHaasMED; font-size: min(60px,5vw); color: #FFF; opacity: 0; }

.c1_1 {transform: translate(-500%,-100%) scale(5); background-image: url(../images/helium/appCards/ra-dragon.jpg);}
.c1_2 {transform: translate(-300%,-200%) scale(5); background-image: url(../images/helium/appCards/aerospace.png);}
.c1_3 {transform: translate(-100%,-300%) scale(5); background-image: url(../images/helium/appCards/airships.png);}
.c1_4 {transform: translate(100%,-300%) scale(5); background-image: url(../images/helium/appCards/diving.png);}
.c1_5 {transform: translate(300%,-200%) scale(5); background-image: url(../images/helium/appCards/driving_safety.png);}
.c1_6 {transform: translate(500%,-100%) scale(5); background-image: url(../images/helium/appCards/maximalfocus.jpg);}
.c2_1 {transform: translateX(-600%) scale(5); background-image: url(../images/helium/appCards/florian-olivo.jpg);}
.c2_2 {transform: translateX(-400%) scale(5); background-image: url(../images/helium/appCards/leak_detection.png);}
.c2_3 {transform: translateX(-200%) scale(5); background-image: url(../images/helium/appCards/medical.png);}
.c2_6 {transform: translateX(600%) scale(5); background-image: url(../images/helium/appCards/purge_pressure.png);}
.c3_1 {transform: translate(-500%,100%) scale(5); background-image: url(../images/helium/appCards/brian-kostiuk.jpg);}
.c3_2 {transform: translate(-300%,200%) scale(5); background-image: url(../images/helium/appCards/quantum_computing.png);}
.c3_3 {transform: translate(-100%,300%) scale(5); background-image: url(../images/helium/appCards/scientific_research.png);}
.c3_4 {transform: translate(100%,300%) scale(5); background-image: url(../images/helium/appCards/welding.jpg);}
.c3_5 {transform: translate(300%,200%) scale(5); background-image: url(../images/helium/appCards/joshua-sortino.jpg);}
.c3_6 {transform: translate(500%,100%) scale(5); background-image: url(../images/helium/appCards/optical_fiber.png);}











.f4Table {display: table; table-layout: fixed; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.f4Left {display: table-cell; width: 50%; vertical-align: top; position: relative;}
.f4Img {width: 100%; position: relative; left: 15%; top: 100vh; z-index: 1; }
.f4Right {display: table-cell; width: 50%; vertical-align: top;}
.textGroup06 {position: relative; left: -15%; z-index: 2; }
.label06-1 {display: inline-block; font-family: NHaasMED; font-size: 60px; margin-bottom: 25px; background: radial-gradient(65.83% 65.83% at 57.75% 60%, #FFFFFF 24.66%, #575757 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent;}
.label06-2 {font-family: NHaasMED; font-size: 24px; color: #FFF; max-width: 40vw;}


.f5Table {display: table; table-layout: fixed; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.f5Left {display: table-cell; width: 50%; vertical-align: bottom; }
.textGroup07 {position: relative; left: 25%; z-index: 2;}
.label07-1 {display: inline-block; font-family: NHaasMED; font-size: 60px; margin-bottom: 25px; background: radial-gradient(66.24% 66.24% at 56.19% 33.76%, #FFFFFF 6.25%, #FFC49A 60.42%, rgba(255, 253, 204, 0.865625) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent;}
.label07-2 {font-family: NHaasMED; font-size: 24px; color: #DEDDB4; max-width: 35vw;}
.f5Right {display: table-cell; width: 50%; vertical-align: top; position: relative;}
.f5Img {width: 100%; position: relative; left: -25%; top: 100vh; z-index: 1; }



.layer61 {width: 100%; height: 100%; position: absolute; top: 100vh; left: 0; background-image: url(../images/helium/launch.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; }
.textGroup08 {position: absolute; left: 6vw; top: 50%; transform: translateY(-50%); z-index: 3;}
.label08-1 {display: inline-block; font-family: NHaasMED; font-size: 60px; margin-bottom: 25px; background: linear-gradient(180deg, rgba(0, 90, 173, 0.46) -9.58%, rgba(69, 166, 255, 0.60625) 16.6%, #FFFFFF 110.42%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent;}
.label08-2 {font-family: NHaasMED; font-size: 24px; color: #D7D7D7; max-width: 40vw;}

#frame7 {z-index: 2; background-color: #000;}
.f7Table {display: table; table-layout: fixed; width: 100%; height: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.f7Left {display: table-cell; width: 50%; vertical-align: middle; position: relative;}
.f7Video {width: 150%; position: relative; left: 0; top: 0; z-index: 1;}
#helium_video {width: 100%;}
.f7Card {position: absolute; top: 50%; right: 30px; transform: translateY(60%); z-index: 2; background: rgba(68, 68, 68, 0.2); backdrop-filter: blur(25px); padding: 26px; border-radius: 30px; display: flex; flex-direction: row; width: 340px; opacity: 0;}
.f7CardLeft {margin-right: 20px; position: relative;}
.f7CardImg {width: 89px;}
.f7CardSeparator {position: absolute; right: -20px; top: 10%; height: 80%; border-left: 2px solid #A9CBFF;}
.f7CardRight {font-family: NHaasMED; font-size: 23px; margin-left: 20px; color: #A9CBFF;}
.f7Right {display: table-cell; width: 50%; vertical-align: middle;}
.textGroup09 {position: relative; left: 0; top: 0; z-index: 2;}
.label09-1 {display: inline-block; font-family: NHaasMED; font-size: 60px; margin-bottom: 25px; color: #A9CBFF;}
.label09-2 {font-family: NHaasMED; font-size: 24px; color: #FFF; max-width: 40vw;}




.f8Area {width: 100%; }
.f8Caption {font-family: NHaasMED; font-size: 50px; color: #000; margin-bottom: 25px;}
.f8SubCaption {position: absolute; top: 90px; left: 50%; width: 100%; transform: translateX(-50%); text-align: center; font-family: NHaasMED; font-size: 30px; color: #ADADAD;} 
.f8Table {display: table; width: calc(100% - 6vw); margin: 0 auto;  }
.f8Left {display: table-cell; width: calc(35% - 30px); padding-right: 30px; vertical-align: top; }
.f8Img {position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); } 
.f8ImgFloat {position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); background-color: #F5F5F5; opacity: 0;}
.f8Right {display: table-cell; width: 65%; vertical-align: middle; position: relative;}
.textGroup10 {}
.label10-1 {font-family: NHaasMED; font-size: 22px; margin-bottom: 15px; }
.label10-2 {font-family: NHaasMED; font-size: 22px; margin-bottom: 15px;}
.label10-3 {font-family: NHaasMED; font-size: 22px; }




.earthContainer {position: absolute; left: 50%; top: 50%; width: 40vmin; height: 40vmin; transform: translate(-50%,-50%); background-image: url(../images/helium/earth.png); background-size: cover; background-repeat: no-repeat; background-position: top right;}
.earthBW {position: absolute; right: 0; top: 0; width: 0%; height: 100%;  background-image: url(../images/helium/earth_bw.png); background-size: cover; background-repeat: no-repeat; background-position: top right; }
.textGroup11 {position: absolute; left: calc(50% + 20vmin + 40px); top: 50%; max-width: 400px; margin-right: 20px;}
.label11-1 {font-family: NHaasMED; font-size: 50px; color: #000; margin-bottom: 15px; }
.label11-2 {font-family: NHaasMED; font-size: 100px; color: #000; margin-bottom: 15px;}
.shareCell {display: inline-block; width: 168px; text-align: right; margin-right: 10px;}
.label11-3 {font-family: NHaasMED; font-size: 22px; color: #676767; }



.atomContainer {position: absolute; left: 50%; top: 50%; width: 40vmin; height: 40vmin; transform: translate(-50%,-50%); }
.atom {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url(../images/helium/atom.png); background-size: cover; background-repeat: no-repeat; background-position: center; transform: scale(0); }
.atomScaledUp {transform: scale(1); }
.textGroup12 {position: absolute; right: calc(50% + 100px); top: 50%; max-width: 510px; margin-right: 20px;}
.label12-1 {font-family: NHaasMED; font-size: 50px; color: #000; margin-bottom: 15px; }
.label12-3 {font-family: NHaasMED; font-size: 22px; color: #676767; }
.textGroup13 {position: absolute; left: calc(50% - min(365px,calc(50% - 20px))); top: 43%; transform: translateY(50%); width: min(730px,calc(100% - 40px)); }
.label13-1 {font-family: NHaasMED; font-size: 50px; color: #000; margin-bottom: 15px; }
.label13-2 {font-family: NHaasMED; font-size: 30px; color: #676767;}



#layer111 {background-image: url(../images/helium/mountain.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; }
.textGroup14 {position: absolute; left: 6vw; top: 4vw; max-width: 710px; }
.label14-1 {font-family: NHaasMED; font-size: 70px; color: #000; }

.textGroup15 {position: absolute; right: 6vw; top: 4vw; text-align: right;}
.label15-1 {font-family: NHaasMED; font-size: 35px; color: #000; }



.layer12-1 {position: absolute; top: -85%; left: -5%; height: 200%; width: 200%; }
/* layout 1-3 are used for calibration. comment out for production 
/*.layout1 {position: absolute; bottom: 0; left: 0; width: 50%; height: 50%; background-color: rgba(255,0,0,0.1);}*/
/*.layout2 {position: absolute; top: 0; left: 0; width: 50%; height: 50%; background-color: rgba(0,255,0,0.1);}*/
/*.layout3 {position: absolute; bottom: 0; right: 0; width: 50%; height: 50%; background-color: rgba(0,0,255,0.1);}*/


.shortage {position: absolute; top: 50%; left: 50%; width: min(1100px,calc(100% - 40px)); transform: translate(-50%,-50%);}
.shortageOption {display: table; margin: 15px 0;}
.shortageLeft {display: table-cell; vertical-align: middle; position: relative; width: 150px;}
.shortageLine {position: absolute; top: 50%; width: 100%; border-bottom: 1px solid #000;}
.shortagePeriod {display: inline-block; padding-right: 10px; background-color: #F8F8F8; position: relative; z-index: 2;}
.shortageRight {display: table-cell; vertical-align: middle; padding-left: 10px;}


.textGroup80 {display: flex; align-items: center; justify-content: center; margin-bottom: 50px;}
.label80-1 {font-family: NHaasMED; font-size: min(70px,3.89vw); margin-bottom: 0.6vw; position: relative; }
.label80-1 span {position: relative; z-index: 2;}
#img80-1 {position: absolute; top: -1.9vw; right: min(320px,17.78vw); width: min(150px,8.33vw); z-index: 1;}
.label80-2 {font-family: NHaasMED; font-size: min(26px,1.4vw); color: #676767; position: relative; z-index: 2;}

.card100 {height: 490px; background-color: #FFF; display: flex; flex-direction: row; align-items: center; justify-content: center; border-radius: 30px; margin-bottom: 30px; position: relative;}
.card100Left {height: 490px; background-color: #FFF; display: flex; border-radius: 30px; margin-bottom: 30px; position: relative;}
.cardNoMargin {margin-bottom: 0;}
.cards50 {width: 100%; margin-bottom: 30px; display: flex; align-items: center; justify-content: space-between;}
.card50 {width: calc(50% - 15px); height: 700px; background-color: #FFF; border-radius: 30px; position: relative;}
.cardDark {background-color: #1E1E1E;}
.textGroup91 {position: absolute; top: 20%; left: 0; width: 100%; text-align: center; font-family: NHaasMED; font-size: 50px; color: #FFF;}
.textGroup92 {position: absolute; bottom: 20%; left: 0; width: 100%; text-align: center; font-family: NHaasMED; font-size: 50px; color: #FFF;}
.textGroup93 {position: absolute; top: 20%; left: 0; width: 100%; text-align: center; font-family: NHaasMED; font-size: 50px; color: #000;}
.textGroup94 {position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; text-align: center; font-family: NHaasMED; font-size: 180px; }
.textGroup95 {margin-left: 5vw; margin-top: 4vw;}
.textGroup100 {width: 50%;}
.card1 {display: flex; flex-direction: column; align-items: center; justify-content: center;}
.label90-1 {font-family: NHaasMED; font-size: 60px; text-align: center;}
.label95-1 {font-family: NHaasMED; font-size: 60px; }

#el15-2,#frame6mob,#shareMob,#priceMob,#price_yearMob,#frame12mob {display: none;}





/* NEW 2025 FRAMES */

#frame101 {color: white; height: 100vh; background-color: #000;}
.textGroup101 {margin-top: 80px; text-align: center; margin-bottom: 60px;}
.label101-1 {font-size: 22px; color: #888; margin-bottom: 20px;}
.label101-2 {font-size: 50px; font-family: NHaasMED; color: #FFF; margin-bottom: 20px;}
.label101-3 {font-size: 26px; color: #FFF;}
.heliumChart {display: block; margin: 0 auto; height: calc(100vh - 400px);}


#frame102 {margin-bottom: 30px;}
.textGroup102 {margin-top: 120px; text-align: center; margin-bottom: 60px;}
.label102-1 {font-size: 30px; font-family: NHaasMED; color: #555; margin-bottom: 15px;}
.label102-2 {font-size: 50px; font-family: NHaasMED;  color: #555; }

#frame103 {margin-bottom: 30px;}
.textGroup103 {padding-top: 35px; text-align: center; }
.label103-1 {font-size: 22px; font-family: NHaasMED; color: #555; margin-bottom: 15px;}
.label103-2 {font-size: 32px; font-family: NHaasMED;  color: #000; padding: 0 20px;}
.card103 {background-image: url(../images/helium/gas_production.svg); background-position: center 70%; background-size: 100%; background-repeat: no-repeat; }

.shareBlock {position: absolute; left: 30px; bottom: 45px; max-width: 70%; }
.shareCaption {font-size: 22px; font-family: NHaasSTD;  color: #555; border-width: 0 0 1px 0; border-color: #808080; border-style: solid; padding-bottom: 15px; margin-bottom: 25px;}
.shareTableOuter {display: flex; flex-direction: row;}
.shareTableOuterLeft {min-width: 320px;}
.shareLegendItem {margin: 6px 0;}
.shareLegendMarker {display: inline-block; width: 18px; height: 18px; border-radius: 9px; margin-right: 10px; vertical-align: middle;}
.shareLegendMarker.marker1 { background-color: #547678; }
.shareLegendMarker.marker2 { background-color: #A8CCA3; }
.shareLegendMarker.marker3 { background-color: #E0E06F; }
.shareLegendLabel {display: inline; font-size: 14px; font-family: NHaasSTD;  color: #777;  vertical-align: middle;}

.shareTableOuterRight {}
.shareTableInner {}


#frame104 {margin-bottom: 30px;}
.textGroup104 {}
.label104-1 {font-size: 22px; font-family: NHaasMED; color: rgba(0,0,0,0.7); margin-bottom: 25px;}
.label104-2 {font-size: 24px; font-family: NHaasMED; color: #000;}

.textGroup104-2 {text-align: center; margin-bottom: 100px;}
.label104-2-1 {font-size: 170px; font-family: NHaasMED; color: #000;}
.label104-2-2 {font-size: 30px; font-family: NHaasMED; color: #000;}
.tilda104 {font-size: 100px;}

.textGroup104-3 {}
.label104-3-1 {font-size: 22px; font-family: NHaasMED; color: rgba(0,0,0,0.7); margin-bottom: 25px;}
.label104-3-2 {font-size: 30px; font-family: NHaasMED; color: #000;}
.card104Image {position: absolute; left: 0; bottom: 0; width: 100%; height: 40%; background-image: url(../images/helium/gasTanks.jpg); background-position: center; background-size: cover; border-radius: 0 0 30px 30px;}
.isoContainer {position: absolute; left: 30px; top: 50%; width: calc(100% - 60px); transform: translateY(-50%); font-size: 24px; font-family: NHaasMED; color: rgba(0,0,0,0.5); display: flex; flex-direction: row; justify-content: space-between; padding-top: 5px; border-width: 1px 0 0 0; border-color: rgba(0,0,0,0.5); border-style: solid;}


#frame105 {margin-bottom: 30px;}
.textGroup105 {}
.label105-1 {font-size: 22px; font-family: NHaasMED; color: rgba(0,0,0,0.7); margin-bottom: 25px;}
.label105-2 {font-size: 24px; font-family: NHaasMED; color: #000;}

.securing {display: flex; flex-direction: row; justify-content: space-between; padding-bottom: 50px;}
.securingLeft {text-align: center;}
.securingImg {width: 174px; height: 174px;}
.securingText {font-size: 24px; font-family: NHaasMED; color: #000;}
.securingCenter {text-align: center; border-width: 0 0 0 1px; border-style: solid; border-color: rgba(0,0,0,0.5); margin: 0 30px 0;}
.securingSeparator {}
.securingRight {text-align: center;}

.label105-2-1 {font-size: 22px; font-family: NHaasMED; color: rgba(0,0,0,0.7); margin-bottom: 25px;}
.label105-2-2 {font-size: 38px; font-family: NHaasMED; color: #000;}
.label105-3-1 {font-size: 22px; font-family: NHaasMED; color: rgba(0,0,0,0.7); margin-bottom: 25px;}
.label105-3-2 {font-size: 50px; font-family: NHaasMED; color: #000;}


#frame106 {margin-bottom: 30px;}
.card106 {display: flex; flex-direction: row;}

.fddLeft {width: 500px; padding: 30px 0 0 30px;}
.textGroup106 {}
.label106-1 {font-size: 22px; font-family: NHaasMED; color: rgba(0,0,0,0.5); margin-bottom: 20px;}
.label106-2 {font-size: 50px; font-family: NHaasMED; color: #000; margin-bottom: 20px;}
.label106-3 {font-size: 30px; font-family: NHaasMED; color: #000; margin-bottom: 20px;}
.label106-4 {font-size: 24px; font-family: NHaasMED; color: #555; margin-bottom: 20px;}
.label106-5 {font-size: 24px; font-family: NHaasMED; color: #888;}
.fddRight {width: calc(100% - 530px); background-image: url(../images/helium/helium_atom.png); background-position: center; background-size: contain; background-repeat: no-repeat;}



#frame107 {margin-top: 120px; margin-bottom: 60px; padding: 0 20px;}
.scarcity {display: flex; flex-direction: row;}
.scarcityLeft {width: 500px; }
.scarcityImgMob {display: none;}
.scarcityRight {width: calc(100% - 500px); background-image: url(../images/helium/world_map.svg); background-position: center; background-size: contain; background-repeat: no-repeat;}
.textGroup107 {}
.label107-1 {font-size: 45px; font-family: NHaasMED; color: #000; margin-bottom: 30px;}
.label107-2 {font-size: 22px; font-family: NHaasMED; color: #000; }




#frame108 {margin-top: 0; margin-bottom: 120px; height: 740px; }
.earth108Img {width: 460px; position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%);}
.textGroup108 {position: absolute; top: calc(45% - 50px); left: 70%;  width: 225px;}
.label108-1 {font-size: 22px; font-family: NHaasMED; color: #000; margin-bottom: 20px;}
.label108-2 {font-size: 100px; font-family: NHaasMED; color: #000; margin-bottom: 20px; padding: 0 20px;}
.label108-3 {font-size: 22px; font-family: NHaasMED; color: #000; }
.textGroup108-2 {font-size: 26px; font-family: NHaasMED; color: #000; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: min(calc(100% - 40px),900px); text-align: center; }



#frame109 {height: 100vh; background-image: url(../images/helium/mountains.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; }
.textGroup109 {font-size: 80px; font-family: NHaasMED; color: #000; padding: 80px 0 0;}
.textGroup109-2 {position: absolute; top: 98px; right: 0; font-size: 40px; font-family: NHaasMED; color: #000; padding: 0 20px;}
.us109Img {margin-right: 15px; position: relative; top: 1px;}



#frame110 {margin: 150px 0 50px;}
.textGroup110 {text-align: center;}
.label110-1 {font-size: 30px; font-family: NHaasMED; color: #555; margin-bottom: 10px;}
.label110-2 {font-size: 50px; font-family: NHaasMED; color: #555; }



#frame111 {margin-bottom: 30px;}
.textGroup111 {}
.label111-1 {font-size: 22px; font-family: NHaasMED; color: rgba(0,0,0,0.7); margin-bottom: 40px;}
.label111-2 {font-size: 30px; font-family: NHaasMED; color: #000; margin-bottom: 50px;}
.label111-3 {font-size: 34px; font-family: NHaasMED; color: #000; }

.textGroup111-2 {margin-bottom: 30px;}
.label111-2-1 {font-size: 22px; font-family: NHaasMED; color: rgba(0,0,0,0.7); margin-bottom: 40px;}
.label111-2-2 {font-size: 26px; font-family: NHaasMED; color: #000; }

.plants {display: flex; flex-direction: row; margin: 20px 0;}
.plantsLeft {font-size: 140px; font-family: NHaasMED; color: #000; padding-left: 20px; width: 140px;}
.plantsRight {font-size: 30px; font-family: NHaasMED; color: #000; padding: 30px 0 0 0; width: calc(100% - 140px);}
.plantSeparator {border-width: 0 0 1px 0; border-style: solid; border-color: rgba(0,0,0,0.5);}




#frame112 {margin-bottom: 30px;}
.demand {display: flex; flex-direction: row; height: 100%;}
.demandLeft {width: 30%; min-width: 330px; height: 100%; position: relative;}
.demandRight {width: 70%; height: 100%; position: relative;}
.textGroup112 {max-width: 330px;}
.label112-1 {font-size: 22px; font-family: NHaasMED; color: #555; margin-bottom: 40px;}
.label112-2 {font-size: 24px; font-family: NHaasMED; color: #000; }
.demandLegend {position: absolute; bottom: 60px; left: 0;}
.demandLegendMob {display: none;}
.demandImg {position: absolute; bottom: 60px; right: 0; width: calc(100% - 50px);}





#frame113 {margin-bottom: 30px;}
.textGroup113-1 {}
.label113-1-1 {font-size: 22px; font-family: NHaasMED; color: rgba(0,0,0,0.7); margin-bottom: 30px;}
.label113-1-2 {font-size: 28px; font-family: NHaasMED; color: #000; }

.textGroup113-2 {width: 315px;}
.label113-2-1 {font-size: 22px; font-family: NHaasMED; color: rgba(0,0,0,0.7); margin-bottom: 30px;}
.label113-2-2 {font-size: 24px; font-family: NHaasMED; color: #000; }

.textGroup113-3 {}
.label113-3-1 {font-size: 22px; font-family: NHaasMED; color: rgba(0,0,0,0.7); margin-bottom: 30px;}
.label113-3-2 {font-size: 28px; font-family: NHaasMED; color: #000; }

.supply {display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 70px 0;}
.supplyRiskImg {position: absolute; top: 50%; right: calc(50% - 235px); transform: translateY(-50%); width: 153px; height: 153px;}




#frame114 {margin-bottom: 30px;}
.textGroup114 {}
.label114-1 {font-size: 22px; font-family: NHaasMED; color: rgba(0,0,0,0.7); margin-bottom: 30px;}
.label114-2 {font-size: 26px; font-family: NHaasMED; color: #000; margin-bottom: 80px;}
.label114-3 {font-size: 160px; font-family: NHaasMED; color: #000; text-align: center; margin-bottom: 20px;}
.label114-4 {font-size: 40px; font-family: NHaasMED; color: #000;  text-align: center;}

.label114-2-1 {font-size: 22px; font-family: NHaasMED; color: rgba(0,0,0,0.7); margin-bottom: 30px;}
.label114-2-2 {font-size: 30px; font-family: NHaasMED; color: #000; margin-bottom: 30px;}
.label114-2-3 {font-size: 24px; font-family: NHaasMED; color: rgba(0,0,0,0.5);}

.heliumMapImg {position: absolute; bottom: 50px; left: 30px; width: min(649px,calc(100% - 56px));}






#frame115 {margin-bottom: 30px;}
.label115-1 {font-size: 22px; font-family: NHaasMED; color: rgba(0,0,0,0.7); margin-bottom: 30px;}
.label115-2 {font-size: 24px; font-family: NHaasMED; color: #000; margin-bottom: 40px;}
.label115-3 {font-size: 170px; font-family: NHaasMED; color: #000; text-align: center; margin-bottom: 20px;}
.label115-4 {font-size: 40px; font-family: NHaasMED; color: #000;  text-align: center; margin-bottom: 50px;}
.label115-5 {font-size: 30px; font-family: NHaasMED; color: #000;  border-width: 1px 0 0 0; border-style: solid; border-color: rgba(0,0,0,0.5); padding-top: 20px;}

.label115-2-1 {font-size: 22px; font-family: NHaasMED; color: rgba(0,0,0,0.7); margin-bottom: 30px; }
.label115-2-2 {font-size: 54px; font-family: NHaasMED; color: rgba(0,0,0,0.5); margin-bottom: 40px; max-width: 515px;}
.label115-2-3 {font-size: 54px; font-family: NHaasMED; color: #000;}






#frame116 {margin-bottom: 30px;}
.textGroup116 {max-width: 480px;}
.label116-1 {font-size: 22px; font-family: NHaasMED; color: rgba(0,0,0,0.7); margin-bottom: 30px;}
.label116-2 {font-size: 30px; font-family: NHaasMED; color: #000;}
.libertyImg {position: absolute; top: 0; right: 0; height: 100%;}



#frame117 {height: 100vh; background-image: url(../images/helium/red_rocks.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; }
.textGroup117 {position: absolute; bottom: 170px; left: 120px; max-width: 625px;}
.label117-1 {font-size: 50px; font-family: NHaasMED; color: #FFF; margin-bottom: 30px;}
.label117-2 {font-size: 80px; font-family: NHaasMED; color: #FFF; margin-bottom: 30px;}
.label117-3 {font-size: 26px; font-family: NHaasMED; color: #FFF;}


.container118 {overflow-x: clip;}


#frame118 {height: 100vh;}
.textGroup118 {position: absolute; top: 50%; left: 50%; max-width: 625px;}
.label118-1 {font-size: 60px; font-family: NHaasMED; margin-bottom: 10px; background: linear-gradient(150deg, #FFF 0%, rgba(255,255,255,0) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent;}
.label118-2 {font-size: 30px; font-family: NHaasMED; color: #9C9C9C;  max-width: 430px;}
.substance {width: 56%; height: 100%; background-image: url(../images/helium/helium_substance.png); background-position: center; background-size: 80% auto; background-repeat: no-repeat;}



#frame119 {height: 100vh; }
.textGroup119 {position: absolute; top: 50%; right: 55%; transform: translateY(-50%); max-width: 420px;}
.label119-1 {font-size: 30px; font-family: NHaasMED; color: #BDBDBD; margin-bottom: 10px; }
.label119-2 {font-size: 60px; font-family: NHaasMED; margin-bottom: 10px; background: linear-gradient(204deg, #34EDC5 0%, #6CECF8 14%, #98E0FF 46%, #BDBDBD 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent;}
.label119-3 {font-size: 30px; font-family: NHaasMED; color: #9C9C9C; }
.substance2 {position: absolute; top: 0; right: 0; width: 56%; height: 100%; background-image: url(../images/helium/helium_substance2.png); background-position: center; background-size: 80% auto; background-repeat: no-repeat;}


#frame120 {height: 100vh;}
.textGroup120 {position: absolute; top: 50%; left: 50%; transform: translateY(-50%); max-width: 625px;}
.label120-1 {font-size: 60px; font-family: NHaasMED; margin-bottom: 10px; background: linear-gradient(150deg, #FFF 0%, rgba(255,255,255,0) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent;}
.label120-2 {font-size: 30px; font-family: NHaasMED; color: #9C9C9C;  max-width: 430px;}
.substance3 {position: absolute; top: 0; right: 50%; width: 50%; height: 100%; background-image: url(../images/helium/helium_substance3.png); background-position: center; background-size: 80% auto; background-repeat: no-repeat;}



#frame121 {height: 100vh;}
.textGroup121 {position: absolute; top: 50%; right: 40%; transform: translateY(-50%); max-width: 500px;}
.label121-1 {font-size: 60px; font-family: NHaasMED; color: #9C9C9C; margin-bottom: 10px;}
.label121-2 {font-size: 30px; font-family: NHaasMED; color: #9C9C9C; max-width: 340px;}
.substance4 {position: absolute; bottom: 20%; left: 50%; width: 300px; height: 300px; background-image: url(../images/helium/helium_substance4.png); background-position: center; background-size: 100%; background-repeat: no-repeat;}



#frame122 {}
.textGroup122 {text-align: center; padding-bottom: 50px; max-width: 600px; margin: 0 auto;}
.label122-1 {font-size: 30px; font-family: NHaasMED; color: rgba(255,255,255,0.7); margin-bottom: 10px;}
.label122-2 {font-size: 100px; font-family: NHaasMED; background: linear-gradient(106deg, #8692FD 0%, #CDDBFF 59%, #6CECF8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent;}
.label122-3 {font-size: 50px; font-family: NHaasMED; background: linear-gradient(106deg, #8692FD 0%, #CDDBFF 59%, #6CECF8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent;}


#frame123 {}
.plantImg {width: 100%; height: auto; display: block;}



#frame124 {margin-top: 200px; margin-bottom: 120px;}
.textGroup124 {margin: 0 auto; display: inline-block; padding: 0 20px;}
.label124-1 {font-size: 26px; font-family: NHaasMED; color: #676767; margin-bottom: 10px;}
.label124-2 {font-size: 70px; font-family: NHaasMED; color: #000; position: relative;}
.img124 {position: absolute; top: 50%; right: 100px; transform: translateY(-50%); z-index: 1;}
.text124 {position: relative; z-index: 1;}



#frame125 {margin-top: 200px; margin-bottom: 30px;}
.textGroup125 {text-align: center; margin:30px 0 30px;}
.label125-1 { margin-bottom: 25px;}
.label125-2 {font-size: 50px; font-family: NHaasMED; color: #000; margin-bottom: 30px;}
.label125-3 {font-size: 32px; font-family: NHaasMED; color: #000; margin-bottom: 50px;}
.img125 {}



#frame126 {margin-bottom: 30px;}
.textGroup126 {font-size: 40px; font-family: NHaasMED; color: #FFF; width: calc(100% - 140px); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.textGroup126-2 {font-size: 40px; font-family: NHaasMED; color: #000; position: absolute; left: 30px; bottom: 30px; max-width: 415px;}
.textGroup126-2-2 {font-size: 40px; font-family: NHaasMED; color: #000; position: absolute; left: 30px; bottom: 30px; max-width: 360px;}
.img126 {position: absolute; top: 30px; right: 30px;}



#frame127 {margin-bottom: 30px;}
.textGroup127 {font-size: 60px; font-family: NHaasMED; color: #000; padding: 30px 30px 0; margin-bottom: 60px;}
.textGroup127-2 {font-size: 40px; font-family: NHaasMED; color: #FFF; position: absolute; left: 30px; bottom: 30px; max-width: 415px;}
.textGroup127-2-2 {font-size: 40px; font-family: NHaasMED; color: #FFF; position: absolute; left: 30px; bottom: 30px; max-width: 360px;}
.img127 {display: block; width: 240px; margin: 0 auto;}
.img127-2 {position: absolute; top: 30px; right: 30px;}



#frame128 {}
.riskContainer {display: flex; flex-direction: row; justify-content: space-between;}
.textGroup128 {font-size: 50px; font-family: NHaasMED; color: #000; padding: 30px 30px 0; max-width: calc(50% - 60px);}
.riskList { margin: 45px 60px 30px 0;}
.riskItem {font-size: 18px; font-family: NHaasMED; color: rgba(0,0,0,0.5); border-width: 1px 0 0 0; border-style: solid; border-color: rgba(0,0,0,0.5); padding: 10px 200px 0 0; margin-bottom: 9px;}
.riskBullet {display: inline-block; width: 22px; height: 22px; border-radius: 11px; background-color: #808080; margin-right: 10px; vertical-align: middle; position: relative; top: -2px;}



#frame129 {margin-top: 180px; margin-bottom: 180px;}
.img129 {display: block; margin: 0 auto 20px;}
.textGroup129 {font-size: 24px; font-family: NHaasMED; color: #ADADAD; text-align: center; padding: 0 20px;}





.learnMoreLinkBlack {color: #000; text-decoration: none; }
.learnMoreLinkBlack div {display: inline-block; font-family: NHaasMED; font-size: 18px; padding: 10px 20px; background: rgba(0, 0, 0, 0.1); border-radius: 100px; position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);}

.learnMoreLinkLight {color: #FFF; text-decoration: none; }
.learnMoreLinkLight div {display: inline-block; font-family: NHaasMED; font-size: 18px; padding: 10px 20px; background: rgba(255, 255, 255, 0.1); border-radius: 100px; position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);}

.learnMoreLinkBlackLeft {color: #000; text-decoration: none; }
.learnMoreLinkBlackLeft div {display: inline-block; font-family: NHaasMED; font-size: 18px; padding: 10px 20px; background: rgba(0, 0, 0, 0.1); border-radius: 100px; position: absolute; bottom: 50px; left: 60px;}

.learnMoreLinkBlackFloat {color: #000; text-decoration: none; }
.learnMoreLinkBlackFloat div {display: inline-block; font-family: NHaasMED; font-size: 18px; padding: 10px 20px; background: rgba(0, 0, 0, 0.1); border-radius: 100px; }


.megaCard {position: relative; width: min(calc(100% - 40px),1200px); height: 720px; margin: 0 auto;}
.megaCard680 {height: 680px;}
.megaCardLeft {position: absolute; top: 0; left: 0; height: 100%; background-color: #FFF; border-radius: 30px;}
.megaCardRight {position: absolute; top: 0; right: 0; height: 100%; background-color: #FFF;  border-radius: 30px; }
.megaCardRight1 {position: absolute; top: 0; right: 0; height: 100%; background: linear-gradient(0deg, #D5ECFF 0%, #FFF 100%);  border-radius: 30px; }
.megaCardLeft2 {position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(210deg, #DAF6FF 0%, #CFE8FF 25%, #93CEFF 100%);  border-radius: 30px; }
.megaCardRight2 {position: absolute; top: 0; right: 0; height: 100%; background-color: #FFF; border-radius: 30px;}
.megaCardLeft3 {position: absolute; top: 0; left: 0; height: 100%; background-color: #FFF; border-radius: 30px; }
.megaCardLeft4 {position: absolute; top: 0; left: 0; height: 100%; background-color: #1E1E1E; border-radius: 30px; }
.megaCardRight3Top {position: absolute; top: 0; right: 0; height: calc(55% - 15px); background-color: #FFF; border-radius: 30px;}
.megaCardRight3Bottom {position: absolute; bottom: 0; right: 0; height: calc(45% - 15px); background-color: #C0E2FF; border-radius: 30px;}
.megaCardLeft4Top {position: absolute; top: 0; left: 0; height: calc(55% - 15px); background-color: #FFF; border-radius: 30px;}
.megaCardLeft4Bottom {position: absolute; bottom: 0; left: 0; height: calc(45% - 15px); background-color: #FFF; border-radius: 30px;}
.megaCardLeft5 {position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(210deg, #E7F9FF 0%, #E5F3FF 25%, #D3EBFF 100%); border-radius: 30px;}
.megaCardRight4Top {position: absolute; top: 0; right: 0; height: calc(50% - 15px); background-color: #FFF; border-radius: 30px;}
.megaCardRight4Bottom {position: absolute; bottom: 0; right: 0; height: calc(50% - 15px); background-color: #FFF; border-radius: 30px;}
.megaCardRight5Top {position: absolute; top: 0; right: 0; height: calc(50% - 15px); background-color: #1E1E1E; border-radius: 30px;}
.megaCardRight5Bottom {position: absolute; bottom: 0; right: 0; height: calc(50% - 15px); background-color: #1E1E1E; border-radius: 30px;}




.megaCardSingle {position: relative; width: min(calc(100% - 40px),1200px); height: 740px; margin: 0 auto; background-color: #FFF; border-radius: 30px;}
.megaCardSingle2 {position: relative; width: min(calc(100% - 40px),1200px); height: 710px; margin: 0 auto; background-color: #FFF; border-radius: 30px;}
.megaCardSingle2-2 {position: relative; width: min(calc(100% - 40px),1200px); height: 710px; margin: 0 auto; background-color: #FFF; border-radius: 30px;}
.megaCardSingle3 {position: relative; width: min(calc(100% - 40px),1200px); height: 700px; margin: 0 auto; background-color: #FFF; border-radius: 30px;}
.megaCardSingle4 {position: relative; width: min(calc(100% - 40px),1200px); height: auto; margin: 0 auto; background-color: #FFF; border-radius: 30px;}

.mega111 {background-image: url(../images/helium/us_flag_corner.png); background-position: right bottom; background-size: 85%; background-repeat: no-repeat;}
.mega111Right {background: linear-gradient(210deg, #DAF6FF 0%, #CFE8FF 25%, #93CEFF 100%);}
.mega115Right {background-color: #C0E2FF;}

.megaCard36 {width: calc(36% - 15px);}
.megaCard40 {width: calc(40% - 15px);}
.megaCard50 {width: calc(50% - 15px);}
.megaCard60 {width: calc(60% - 15px);}
.megaCard64 {width: calc(64% - 15px);}
.megaCard100 {width: 100%;}

.megaWrapper {padding: 30px; position: relative; height: calc(100% - 60px);} /*display: flex; flex-direction: column; height: calc(100% - 60px); */
.megaWrapperH0 {display: flex; flex-direction: column; height: calc(100% - 60px);}
.megaWrapperH1 {display: flex; flex-direction: column; height: calc(100% - 120px); justify-content: space-between;}
.megaWrapperH2 {display: flex; flex-direction: column; height: calc(100% - 140px); justify-content: space-between;}



.megaTextGroup { width: 100%;}
.megaNarrow {width: 45%;}
.megaNarrow2 {width: 55%;}
.megaLabel-1 {font-family: NHaasMED; font-size: 22px; color: #555; margin-bottom: 25px;}
.megaLabel-2 {font-family: NHaasMED; font-size: 26px; color: #000; margin-bottom: 20px;}
.megaLabel-3 {font-family: NHaasMED; font-size: 200px; color: #000; text-align: center; margin-bottom: 20px;}
.megaLabel-4 {font-family: NHaasMED; font-size: 30px; color: #000;}
.megaLabelNarrow {width: 70%;}
.megaLabelLight {color: #8B8B8B;}
.megaLabelFooter {position: absolute; left: 30px; bottom: 30px; font-family: NHaasMED; font-size: 14px; color: #777;}

.bcf {display: flex; flex-direction: row; justify-content: space-between; height: calc(100% - 276px);}
.bcfLeft {width: calc(50% - 30px); height: calc(100% - 120px); position: relative;}
.bcfCenter {height: calc(100% - 120px); position: relative; width: 36px; }
.bcfRight {width: calc(50% - 30px); height: calc(100% - 120px); position: relative;}
.bcfScale { width: 100%; height: 107%; position: relative; top: -7%;}
.bcfScaleItem {border-width: 1px 0 0 0; border-color: #CBCBCB; border-style: solid; height: calc(14.28% - 1px); position: relative;}
.bcfScaleLabel {font-family: NHaasSTD; font-size: 14px; color: #CBCBCB; background-color: #FFF; padding: 0 5px; position: absolute; top: -2px; left: 50%; transform: translate(-50%,-50%);}
.bcfCaption1 {font-family: NHaasMED; font-size: 18px; color: #AAA; text-align: center;}
.bcfCaption2 {font-family: NHaasMED; font-size: 28px; color: #555; text-align: center; margin-bottom: 20px;}
.bcfCaption3 {font-family: NHaasMED; font-size: 22px; color: #555; text-align: center;}
.bcfChartWrapper {width: 100%; height: 100%; position: relative; margin-bottom: 15px; }
.bcfChart {position: absolute; left: 0; bottom: 0; width: 100%; border-radius: 10px; }
.bcfChartLeft {background-color: #A9CDA4; height: 100%;}
.bcfChartRight {background-color: rgba(87, 121, 123, 0.5); height: 98.5%; }
.bcfChartInner { position: absolute; left: 0; bottom: 0; width: 100%; height: 93.75%; background-color: #57797B; border-radius: 10px;}



/* TRANSITION */
#frame6 { transition: transform ease 0.8s;}
.textGroup02 {transition: top 1s,transform 1s;}
.textGroup03 {}
#labelWrapper04,#labelWrapper05 {}
.cardCopy {transition: background 0.6s, opacity 0.6s;}
.atom { transition: transform 0.3s;}
.atomScaledUp {transition: transform 1s;}

#f4Img {transition: top 0.2s;}
#labelWrapper06 {transition: top 0.2s;}
#f5Img {transition: top 0.2s;}
#labelWrapper07 {transition: top 0.2s;}

#f8map1 {transition: opacity 0.3s;}
#f8map2 {transition: opacity 0.3s;}
#f8map3 {transition: opacity 0.3s;}
#earthBW {transition: width 0.15s;}
.secondaryMenu {transition: opacity 1s;}












/* RESPONSIVENESS */

@media (max-width: 1700px) {
  .f8Caption {font-size: 45px; }
}

@media (max-width: 1500px) {
  .textGroup02 {font-size: 24vw;};
  .label06-1 {font-size: 50px;}
  .label06-2 {font-size: 22px;}
  .label07-1 {font-size: 50px;}
  .label07-2 {font-size: 22px;}
  .label08-2 {max-width: 50vw;}
  .f8Left {width: 40%;} 
  .f8Right {width: 60%;}
  .f8Caption {font-size: 36px; width: 120%; position: relative; z-index: 10;}
  .textGroup10 {width: 120%; position: relative; z-index: 10;} 
  .label10-1,.label10-2,.label10-3 {font-size: 20px;} 
  .heliumChart {width: 100%; height: auto;}
  #frame101 {height: auto; padding-bottom: 80px;}         
}

@media (max-width: 1300px) {
  .label06-1 {font-size: 45px;}
  .label06-2 {font-size: 20px;}
  .label07-1 {font-size: 45px;}
  .label07-2 {font-size: 20px;}
  .f8Caption {font-size: 36px;} 
  .label10-1,.label10-2,.label10-3 {font-size: 18px;}
  .earthContainer {left: 30%;} 
  .textGroup11 { left: calc(30% + 20vmin + 40px); max-width: 600px;}
  .atomContainer {right: 60px; left: auto; transform: translateY(-50%);} 
  .textGroup12 { right: calc(40vmin + 80px); max-width: calc(100vw - 40vmin - 100px); margin-right: 0; margin-left: 20px;}
  .label122-2 {font-size: 50px;} 
  .shareBlock { max-width: calc(100% - 60px); }  
  .textGroup109 {padding: 80px 20px 0;}  
  .textGroup116 {max-width: calc(50% - 50px);}
  .megaCardSingle3 {height: 600px;}            
}

@media (max-width: 1200px) {
  .secondaryMenu {right: 6vh;}
  .label08-2 {max-width: 60vw;}
  .label09-1 {font-size: 50px;}
  .label09-2 {font-size: 22px;}      
  .f7CardRight {font-size: 22px;}
  .f8Caption {font-size: 32px;}
  .textGroup14 {left: 3vw; top: 5vw;}
  .label14-1 {font-size: 60px;}
  .textGroup15 {right: 3vw; top: 5vw;} 
  .megaLabel-2 {font-size: 24px;} 
  .label103-2 {font-size: 26px; }
  .label105-2-2 {font-size: 30px;} 
  .label105-3-2 {font-size: 40px;} 
  .label113-1-2 {font-size: 24px;} 
  .label113-3-2 {font-size: 24px;}
  .textGroup113-2 {width: 70%;}
  .supplyRiskImg {width: 30%; right: 20px;}
  .label113-2-2 {font-size: 20px;}            
}

@media (max-width: 1100px) {
  .textGroup04 {font-size: 40px;} 
  .textGroup05 {font-size: 24px;}
  .label06-1 {font-size: 42px;}
  .label06-2 {font-size: 18px; max-width: 50vw;}
  .textGroup07 {left:15%;}  
  .label07-1 {font-size: 42px;}
  .label07-2 {font-size: 18px;}
  .f8Caption {font-size: 28px;}
  .label14-1 {font-size: 50px;}
  .label122-2 {font-size: 40px;} 
  .megaLabel-2 {font-size: 22px;}
  .megaLabel-3 {font-size: 170px;}
  .megaLabel-4 {font-size: 26px;} 
  .card103 {background-position: center 50%;}
  .shareBlock {bottom: 80px;}
  .securingText {font-size: 20px;}
  .securingImg {width: 100%;} 
  .textGroup109 {font-size: 60px;}
  .plantsLeft {padding-left: 0; font-size: 110px; width: 110px;}   
  .plantsRight {font-size: 22px; width: calc(100% - 110px);} 
  .supplyRiskImg {width: 25%;} 
  .supply {display: inline-block; margin: 0; text-align: center;} 
  .supplyImg {margin: 15px;} 
  .megaCardSingle2-2 {height: auto;}
  .demand {flex-direction: column;}
  .demandLeft {width: 100%; min-width: unset;}
  .demandRight {width: 100%; height: auto;}
  .demandImg {position: static; bottom: unset; right: unset; width: 100%; margin: 50px 0;}
  .textGroup112 {max-width: calc(100% - 60px);}
  .demandLegend {display: none;}
  .demandLegendMob {display: block; max-width: 400px; margin-bottom: 60px;} 
  .label113-3-2 {font-size: 22px; margin-bottom: 30px;}
  .label115-2-2 {font-size: 30px;}
  .label115-2-3 {font-size: 30px;}
  .megaCardSingle3 {height: 550px;}
  .label116-2 {font-size: 24px;} 
  .textGroup119 {right: unset; left: 20px;} 
  .textGroup121 {right: unset; left: 20px;} 
  .label124-2 {font-size: 60px;}
  .textGroup126,.textGroup126-2,.textGroup126-2-2 {font-size: 30px;}
  .textGroup127 {font-size: 45px;}
  .textGroup127-2,.textGroup127-2-2 {font-size: 36px;} 
  .riskItem {padding-right: 50px;}                   
}

@media (max-width: 1000px) {
  .secondaryMenu {right: 3vh;}
  .textGroup06 {left: -8%;}
  .textGroup07 {left: 8%;}
  .label08-2 {max-width: 80vw;}
  .label09-1 {font-size: 45px;}
  .label09-2 {font-size: 20px;}
  .f7CardRight {font-size: 20px;}
  .textGroup11 { transform: translateY(-30%);}  
  .textGroup12 { transform: translateY(-30%);}
  .textGroup14 {left: 2vw; top: 6vw;}
  .textGroup15 {right: 2vw; top: 6vw;} 
  .el122Top {font-size: 26px;}
  .label122-2 {font-size: 36px;} 
  .textGroup94 {font-size: 150px;}   
  .megaLabel-2 {font-size: 20px;}
  .shareTableOuterLeft {min-width: 240px;}
  .shareTableOuterRight {width: calc(100% - 60px);}
  .countrySharesImg {width: 100%;}
  .label104-2-1 {font-size: 140px;}
  .label104-3-2 {font-size: 26px;}
  .securingText {font-size: 18px;}
  .fddLeft {width: calc(60% - 30px);}
  .fddRight {width: calc(40%);}
  .scarcityLeft {width: 50%;}
  .scarcityRight {width: 50%;} 
  .earth108Img {left: 60px; transform: translate(0,-50%);}
  .label111-2-2 {font-size: 22px;}
  .label114-3 {font-size: 120px;}
  .heliumMapImg {bottom: 100px;}
  .label115-2 {font-size: 20px; margin-bottom: 20px;}
  .label115-3 {font-size: 120px; margin-bottom: 0;} 
  .label115-5 {font-size: 20px;}
  .megaCardSingle3 {height: 500px;} 
  .label116-2 {font-size: 22px;}
  .label124-2 {font-size: 55px;}
  .label125-3 {font-size: 28px;}
  .textGroup127-2,.textGroup127-2-2 {font-size: 32px;}
  .textGroup128 {font-size: 40px;}                                    
}

@media (max-width: 900px) {
  .textGroup04 {font-size: 35px;} 
  .textGroup05 {font-size: 20px;} 
  .label06-1 {font-size: 36px;}
  .label06-2 {font-size: 16px;}
  .label07-1 {font-size: 36px;}
  .label07-2 {font-size: 16px;}
  .label08-1 {font-size: 50px;}
  .label08-2 {font-size: 22px; max-width: 85vw;} 
  .f7Card {width: 300px;} 
  .priceCell {text-align: left;}
  #el15-2 {display: inline;}
  .el122Top {font-size: 22px;}
  .textGroup14 {top: 7vw;}
  .textGroup15 {top: 7vw;}
  .megaLabel-2 {font-size: 18px;}
  .label104-2-1 {font-size: 120px;}
  .label105-2 {font-size: 20px;} 
  .label105-2-2 {font-size: 20px;}   
  .label105-3-2 {font-size: 30px;} 
  .label106-2 {font-size: 40px;}   
  .label106-4 {font-size: 22px;} 
  .textGroup108 {left: 60%; top: calc(50% - 100px);} 
  .earth108Img {left: 20px; width: 50%;} 
  .textGroup109-2 {top: 270px;} 
  .label113-1-2 {font-size: 22px;} 
  .label113-3-2 {font-size: 20px;}
  .label114-3 {font-size: 100px;}
  .megaCardSingle3 {height: 450px;}
  .plantsRight {font-size: 18px;}      
  .label116-2 {font-size: 18px;}
  .textGroup116 { max-width: calc(45% - 50px); } 
  .label124-2 {font-size: 45px;}
  .label125-2 {font-size: 36px;}  
  .label125-3 {font-size: 24px;}
  .textGroup126,.textGroup126-2,.textGroup126-2-2 {font-size: 26px;}
  .textGroup127 {font-size: 36px;} 
  .textGroup127-2,.textGroup127-2-2 {font-size: 28px;}
  .riskItem {padding-right: 0;}                 
}

@media (max-width: 800px) {
  .textGroup04 {font-size: 30px;} 
  .textGroup05 {font-size: 18px;}
  .label06-1 {font-size: 32px;}
  .label07-1 {font-size: 32px;}
  .label08-1 {font-size: 45px;}
  .label08-2 {font-size: 20px;}
  .label09-1 {font-size: 36px;}
  .label09-2 {font-size: 18px;}
  .f7Card {width: 250px;}   
  .f7CardRight {font-size: 16px;}
  .label13-1 {font-size: 40px;} 
  .label13-2 {font-size: 24px;}
  .label14-1 {font-size: 36px;}
  .el122Cell {padding: 0 10px;}
  .textGroup94 {font-size: 130px;}
  .textGroup14 {top: 8vw;}
  .textGroup15 {top: 8vw;}
  .megaLabel-3 {font-size: 130px;}
  .megaLabel-4 {font-size: 22px;}   
  .label104-2-1 {font-size: 100px;}
  .label104-2 {font-size: 22px;}
  .label104-3-2 {font-size: 22px;}
  .label106-3 {font-size: 26px;}
  .label107-1 {font-size: 36px;}
  .label113-2-2 {font-size: 18px;}
  .supplyImg {margin: 5px; max-width: 50%;}
  .textGroup116 { max-width: calc(40% - 50px); }  
  .label116-2 {font-size: 16px;}
  .textGroup117 {left: 20px; bottom: 250px; max-width: calc(100% - 40px);}
  .label124-2 {font-size: 40px;} 
  .label125-3 {font-size: 22px;} 
  .textGroup127 {font-size: 24px;}
  .textGroup127-2,.textGroup127-2-2 {font-size: 24px;}
  .textGroup128 {font-size: 32px;}                                          
}


@media (max-width: 700px) {
  #frame12,#share,#price,#price_year,.secondaryLink,#frame6,.colorAreaBlack {display: none;}
  
  .secondaryMenu {top: 68px;}
  .colorAreaBlackMob {background-color: black; padding-bottom: 60px;}  
  
  #frame1 {height: auto; margin-bottom: 100px; padding-top: 20px;}
  #sunAreaWrapper {height: 100vh;}
  #sun {top: auto; bottom: -28vw; transform: translate(-50%,0);}
  .textGroup02 {position: absolute; top: 11vh; transform: translate(-50%,0);}
  /* Mobil: Topbar-Logo ist direkt darueber sichtbar -> Hero-Wortmarke ausblenden (Dopplung) */
  .textGroup02 .heroWordmark {display: none;}
  .label01-1 {font-size: 20px;} 
  #textGroup03 {position: relative; left: 0; bottom: 0; opacity: 1; transform: scale(1); margin-top: 30px;} 
  
  #frame2 {position: static; opacity: 1; height: auto; margin-bottom: 120px; padding-top: 96px;}
  /* Tabellen-Layout stapeln: Headline ueber Fliesstext statt zwei gequetschter Spalten */
  .f2Container {display: block;}
  .f2Left, .f2Right {display: block; width: 100%; padding: 0 0 22px;}  
  #frame2inner {height: auto;}
  #textGroup04 {font-size: 24px;} 
  #textGroup05 {font-size: 16px;} 
  .button01 {position: absolute; top: 20px; left: -50%; min-width: 270px;}
  .button01label {font-size: 16px; }
  .button02 {position: absolute; top: 70px; left: -30%; }
  
  #spacer1 {display: none;}
  
  #frame3 {position: static; opacity: 1; height: auto; margin-bottom: 100px; overflow-x: hidden;}
  .appGrid {position: static; transform: translateX(-6%); }
  .gridCard {opacity: 1; transform: translate(0);}
  .appTextGroup {opacity: 1;}
  
  #frame4 {position: static; top: 0; left: 0; opacity: 1; height: auto; margin-bottom: 100px;}
  .f4Table {display: block; position: static; transform: none;}
  .f4Left {display: block; width: 100%; text-align: center;}
  .f4Img {position: static; }  
  .f4Right {display: block; padding: 30px 20px 0; width: calc(100% - 40px);}    
  .textGroup06 {position: static;}
  #labelWrapper06 {opacity: 1;}   
  .label06-2 {max-width: 100%;}
  
  #frame5 {position: static; top: 0; left: 0; opacity: 1; height: auto; margin-bottom: 100px;}
  .f5Table {display: block; position: static; transform: none;}
  .f5Right {display: block; width: 100%; text-align: center;}
  .f5Img {position: static; }  
  .f5Left {display: block; padding: 0 20px 30px; width: calc(100% - 40px);}    
  .textGroup07 {position: static;}
  .labelWrapper150 {top: 0;}  
  #labelWrapper07 {opacity: 1;}   
  .label07-2 {max-width: 100%;}    
  
  #frame6mob {display: block; position: relative; top: 0; left: 0; opacity: 1; height: auto; margin-bottom: 100px;}
  #layer61mob {top: 0;}  
  .textGroup08 {position: relative; top: 0; left: 0; transform: none; padding: 0 20px; width: calc(100% - 40px);}
  .label08-1 {font-size: 32px;}
  
  .textGroup101 {margin-top: 0;}
  
  .megaCard {width: 100%; height: auto; min-height: 720px;}
  .megaCard60 {width: 100%; min-height: 720px;}
  .megaCard50 {width: 100%; min-height: 720px;}  
  .megaCard40 {width: 100%; min-height: 720px;}
  .megaCardLeft {position: relative; margin-bottom: 30px;}
  .megaCardRight {position: static;}  
  .megaCardRight1 {position: static;}
  .megaCardLeft2 {position: relative; margin-bottom: 30px;} 
  .megaCardRight2 {position: static;}
  .megaCardLeft3 {position: relative; margin-bottom: 30px;}   
  .megaWrapperH0 {height:720px;}
  .megaCardSingle {width: 100%;}
  .megaCardSingle2 {width: 100%;}
  .megaCardSingle2-2 {width: 100%;}
  .megaCardSingle3 {width: 100%; height: auto;}  
  .megaCardSingle4 {width: 100%; height: auto;}
  .megaCardRight3Top {position: relative; min-height: 330px; margin-bottom: 30px;}
  .megaCardRight3Bottom {position: static; min-height: 330px;}
  .megaCardRight4Top {position: relative; margin-bottom: 30px; min-height: 300px;}
  .megaCardRight4Bottom {position: relative;  min-height: 300px;}
  .megaCardLeft4 {position: relative; margin-bottom: 30px; min-height: 400px;}
  .megaCardLeft4Top {position: relative; margin-bottom: 30px; min-height: 400px;}
  .megaCardLeft4Bottom {position: relative; margin-bottom: 30px; min-height: 300px;} 
  .megaCardLeft5 {position: relative; min-height: 470px; margin-bottom: 30px;}
  .megaCardRight5Top {position: relative; margin-bottom: 30px; min-height: 400px;}
  .megaCardRight5Bottom {position: relative; min-height: 400px;}  
  .mega115Right {min-height: 500px;} 
  .shareTableOuter {flex-direction: column;}
  .shareTableOuterRight {width: 100%; margin-top: 30px;}
  .card104Image {width: 100%; height: 200px;}
  .isoContainer {position: static; transform: unset; margin-top: 50px; width: 100%;}
  .card106 {flex-direction: column;}
  .fddLeft {padding: 30px 20px; width: calc(100% - 40px);}
  .label106-2 {font-size: 32px;}
  .fddRight {display: none;}
  #frame107 {margin-top: 60px;}
  .scarcityLeft {width: 100%;}
  .scarcityRight {display: none;}
  .scarcityImgMob {display: block; width: 100%; margin: 30px 0;}
  #frame108 {height: auto; margin-bottom: 60px;}
  .earth108Img {position: static; transform: unset; width: 100%; margin-bottom: 30px;}
  .textGroup108 {position: static; width: 100%; margin-bottom: 30px;}
  .textGroup108-2 {position: static; transform: unset; text-align: left; width: 100%; font-size: 22px;}
  .label108-2 {padding: 0;}
  .textGroup109 {font-size: 36px; margin-bottom: 60px;}
  .textGroup109-2 {position: static; font-size: 36px;}
  #frame110 {margin-top: 60px;}
  .label111-2 {font-size: 22px;}
  .label111-3 {font-size: 22px;}
  .mega111 {min-height: 640px; background-position: right 85%;}
  .textGroup112 {width: 100%; max-width: unset;} 
  .label112-2 {font-size: 22px;}
  .label114-2 {margin-bottom: 20px;}
  .heliumMapImg {position: static; width: 100%;}
  .textGroup114-2 {margin-bottom: 90px;} 
  .label114-2-2 {font-size: 22px;}
  .label114-2-3 {font-size: 20px;}
  .libertyImg {position: static; width: 100%;}
  .textGroup116 {max-width: 100%; margin-bottom: 30px;}
  .textGroup117 {left: 20px; bottom: 50%; transform: translateY(50%);}
  .label117-2 {font-size: 22px;}
  .textGroup118 {top: 20%;}
  #frame118 {height: 500px;}
  .label118-1 {font-size: 30px;}
  .label118-2 {font-size: 22px;}
  #frame119 {height: 300px;}
  .label119-2 {font-size: 30px;}
  .label119-3 {font-size: 22px;}
  #frame120 {height: 400px;}
  .textGroup120 {}
  .label120-1 {font-size: 30px;}
  .label120-2 {font-size: 22px;}
  #frame121 {height: 350px;}   
  .textGroup121 {height: 350px;}
  .label121-1 {font-size: 30px;}
  .label121-2 {font-size: 22px;} 
  .label122-1 {font-size: 24px;}   
  .label122-2 {font-size: 28px;}   
  .label122-3 {font-size: 36px;}
  .label124-1 {margin-bottom: 50px;}
  #frame124 { margin-top: 80px; margin-bottom: 0;} 
  #frame125 {margin-top: 120px;} 
  .textGroup126 {position: static; transform: unset; width: 100%;} 
  .textGroup126-2 {position: static; margin-top: 140px; transform: unset; width: 100%;}  
  .textGroup126-2-2 {position: static; margin-top: 140px; transform: unset; width: 100%;}
  .img127 {margin-bottom: 100px;}
  .card127 {min-height: 500px;}
  .textGroup127-2 {position: static; transform: unset; width: 100%; margin-top: 140px;}
  .textGroup127-2-2 {position: static; transform: unset; width: 100%; margin-top: 140px;}
  .riskContainer {flex-direction: column; }
  .textGroup128 {max-width: 100%; padding: 0;} 
  .riskList {margin-right: 0; margin-bottom: 100px;}
  .learnMoreLinkBlackLeft div { left: 50%; transform: translateX(-50%);}  
  #frame129 { margin-top: 60px; margin-bottom: 60px;}
  .largeLinkLine2 {font-size: 26px;}
  .contentWrapper4 {padding-top: 50px; padding-left: 20px; width: calc(100% - 40px);}  
  
  
  
  
  
  
  
  
  
  
            

  .card100 {height: 270px;}
  .card100Left {height: 270px;}  
  .card50 {height: 400px;} 
  .card50,.card50Wrapper {width: calc(50% - 10px);}  
  
     
  .label80-1 {font-size: 6vw;}
  .label80-2 {font-size: 3vw;}
  #img80-1 {top: -2.8vw; right: 28vw; width: 12vw; } 
  .label90-1 {font-size: 45px;}
  .textGroup91 {font-size: 24px;}          
  .textGroup92 {font-size: 24px; bottom: 30%;}
  .textGroup93 {font-size: 24px;}  
  .textGroup94 {font-size: 60px;}
  .label95-1 {font-size: 45px;}                      
}




/* HEIGHT */
@media (max-height: 700px) {
 .f7CardRight {font-size: 18px;}
 .label13-2 {font-size: 24px;}
 .shortageOption {font-size: 14px;}
}

@media (max-height: 600px) {

}

@media (max-height: 500px) {
 .textGroup05 {font-size: 18px;}
 .textGroup11 {top: 30%;}
 .textGroup12 {transform: translateY(-50%);}
 .textGroup122 {transform: translateY(-10%);}
 .textGroup124 {transform: translateY(-10%);}  
 .f7Card {transform: translateY(30%); }
 .label13-2 {font-size: 18px;}
 .shortageOption {font-size: 12px;}              
}