* { box-sizing: border-box; } body { font-family: 'Klavika', sans-serif; color: #fff; font-size: 14px; line-height: 20px; background-color:#000000; } /*MODULE CODE*/ .Module-Heading { font-family: "Klavika-Condensed-Bold", sans-serif; font-style: normal; color: #fff; font-size: clamp(5rem, 7vw, 7rem); line-height: 5.5rem; text-transform: uppercase; margin-bottom: 20px; max-width:820px; } .Module-Heading span { background: linear-gradient(to right, rgb(246, 111, 25) , rgb(242, 20, 33)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding-right: 24px; font-family: "Klavika-Condensed-Bold-Italic", sans-serif; } .Module-Subhead { font-family: "Klavika-Condensed-Regular", sans-serif; font-style: normal; font-size: 30px; line-height: 33px; color: #fff; margin-top: 0px; max-width:350px; } .Module-Body { font-family: "Klavika-Regular", sans-serif; color: #fff; font-size: 14px; line-height: 20px; } .Module-Disclaimer { font-family: "Klavika-Regular", sans-serif; font-size: 10px; line-height: 12px; } .ModuleHero .section-wrapper .content-box { max-width: 650px; padding: 50px 50px 50px 100px; } .section-wrapper { margin-left: auto; margin-right: auto; } img { max-width: 100%; vertical-align: middle; } sup { font-size: 60%; } .body { background-color: #000000; font-family: "Klavika-Regular", sans-serif; color: #fff; font-size: 19.5px; line-height:1; } .section-wrapper { display: flex; width: 100%; flex-direction: column; justify-content: center; align-items: flex-start; } .section-wrapper.align-right { align-items: flex-end; } /*MODULE HERO*/ .ModuleHero .section-wrapper { max-width: 1400px; } .section-content.ModuleHero { background-image: url('../images/MHW_Hero.jpg'); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #000; } .ModuleHero-mobile-img { display: none; } a.button { padding: 3px 30px 3px 30px; background-color: #fff; color: #000; font-weight: 700; font-family: 'Noto Sans', sans-serif; text-decoration: none; border: 2px solid #fff; text-transform: uppercase; font-size: 16px; text-align: center; } a.button:hover { background-color: transparent; color: #fff; } .ModuleLogo{margin-top: 40px; margin-bottom: 40px; } /*Module Chart*/ .ModuleChart{width:100%; background-color: #181818; margin-bottom: 40px; text-align: center;} .ModuleChart td{border-right:3px black solid;} .ModuleChart .chart-header{font-family: "Klavika-Condensed-Medium", sans-serif; font-size: 26px !important;line-height: 30px;padding:40px;} .ModuleChart .chart-body{font-family: 'Noto Sans', sans-serif;padding:30px;} .ModuleChart tr:first-child{background: linear-gradient(to right, rgb(246, 111, 25) , rgb(242, 20, 33));} .ModuleChart .chart-body{font-size: 18px !important; line-height: 30px; padding: 20px;} .ModuleChart .chart-header{font-size: 24px; line-height: 26px; padding: 20px;} /*MODULE FOOTER*/ .ModuleFooter .section-wrapper { max-width: 1200px; } .ModuleFooter { padding-top: 30px; padding-left: 100px; padding-right: 100px; padding-bottom:40px; } .ModuleFooter .section-wrapper .content-box { max-width: 1200px; display: flex; flex-direction: column; } .ModuleFooter-logos { margin-bottom: 50px; margin-top: 50px; max-width: 424px; height: auto; align-self: center; } .ModuleFooter .content-box { margin-left: auto; width: 100%; margin-right: auto; } a { color: #fff; text-decoration: none; } a:hover { text-decoration: underline; } .footnotes { color: #fff; font-size: 12px; line-height: 15px; font-family: "Klavika-Regular", sans-serif; margin-bottom: 4px; margin-top: 4px; } .footnotes a { color: #fff; text-decoration: none; } .footnotes a:hover { text-decoration: underline; } ol { padding-inline-start: 10px; } .footnotes li { list-style-position: outside; margin-bottom: 10px; } @media (max-width: 2020px) { .section-content.ModuleHero { background-position: 50% 50%; } } @media (max-width: 1920px) { .section-content.ModuleHero { background-position: 60% 50%; } } @media (max-width: 1500px) { .section-content.ModuleHero { background-position: 50% 50%; } } @media (max-width: 1100px) { .section-content.ModuleHero { background-position: 50% 50%; } .ModuleHero .section-wrapper .content-box { max-width: 600px; } } @media (max-width: 900px) { .section-content.ModuleHero { background-position: 50% 50%; background-size: cover; } .ModuleHero .section-wrapper .content-box { max-width: 550px; padding: 5%; } .ModuleFooter { padding-left: 0px; padding-right: 0px; } } @media (max-width: 767px) { .ModuleHero-mobile-img { margin: 0 auto; display: block; } .section-content.ModuleHero { background: #000; padding-top: 0px; width: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; } .section-content.ModuleHero .content-box { width: 100%; padding: 0px; margin: 0px; } .section-wrapper .content-box { width: 100%; } .ModuleLogo{margin-top:10px; margin-bottom: 1px;} .Module-Heading{margin-top:0px;} .Module-Subhead{margin-bottom:0px;} .ModuleFooter{padding-left: 0px;padding-right: 0px;} .section-wrapper{padding-left:30px; padding-right: 30px;} .ModuleChart .chart-header{font-size: 22px !important;line-height: 22px;padding:20px;} .ModuleChart .chart-body{font-family: 'Noto Sans', sans-serif;padding:20px;font-size: 16px !important;} .ModuleChart tr:first-child{background: linear-gradient(to right, rgb(246, 111, 25) , rgb(242, 20, 33));} .ModuleChart .chart-body{font-size: 16px; line-height: 26px; padding: 5px;} .ModuleChart .chart-header{font-size: 24px; line-height: 26px; padding: 20px;} } @media (max-width: 600px) { .section-content.ModuleHero .content-box { } .Module-Heading{font-size: 15vw; line-height: 12vw;} } @media (max-width: 480px) { .section-content.ModuleHero .content-box { } }