@import url('https://fonts.googleapis.com/css2?family=Fasthand&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
:root {
  /******** font variable *************/
 --font-montserrat_sans: "Montserrat", sans-serif;
 --font-montserrat-pro_sans: "Source Sans 3", sans-serif;
 --font-fasthand: "Fasthand", sans-serif;
 
  /******** color variable *************/
 --white-color: #fff;
 --black-color:#000080;
 --medium-black-color: #00000033;
 --second-nav-color : #f5f5f5;
 --primary-font-color: #54565a;
 --secondary-font-color: #00758d;
 --primary-background-color: #10758c;
 --secondary-background-color: #f5a800;
 --cta-border-color: #00bbb4;
 --color-teal-accent: #00b4ac;
 --color-teal: rgb(0, 117, 141);
 --color-teal-light: rgb(0, 187, 180);
 --color-orange: rgb(245, 168, 0);
 --color-gray-text: #54565a;
 --color-gray-light: rgb(249, 249, 249);
 --color-gray-transparent: rgba(234, 234, 235, 0);
 --shadow-default: rgba(0, 0, 0, 0.3);
 --color-light-grey-background: #d4d4d5;
 --linear-gradient-color: linear-gradient(90deg, #f5f5f5 28.7%, hsla(0, 0%, 96%, 0) 91.95%);
 --color-gray-light: #f9f9f9;
 --color-gray-transparent: #ececf000;
 --shadow-color: #55575a40;
 --shadow-default: #0000004d;
 --shadow-light: #00000030;
 --color-teal-lightest: #e6f1f4;
 --modal-overlay-color: #5F616180;
 --dark-gray: #333;
 --color-dark-cyan: #005f73;
 --color-light-gray-blue: #eaeaeb;
 --dialog-background: #5F616580;
 --radial-gradient-color: radial-gradient(222.94% 222.94% at 48.44% 0, #00758d 0, #00758d 39.42%, #f5a800 80%); 
 --scrollbar-color: #22232380;
 /* footer */
 --color-light-grayish-silver: #bbbbbd;
 --color-dim-gray: #696b6e;
 --max-width: 1136px;
}

html {
 font-family: var(--font-montserrat_sans);
 font-weight: 400;
 font-size: 16px;
 line-height: 20px;
 letter-spacing: normal;
 font-style: normal;
 color: var(--primary-font-color);
 scroll-behavior: smooth;
 -webkit-text-size-adjust: 100%;
}

html.no_scroll {
  overflow: hidden;
}

body, p {
 margin: 0;
}

.link, a {
 display: inline-block;
}

.heading_h1, .heading_h3, .heading_h4, h1, h2, h3, h4, h5, h6 {
 font-family: var(--font-montserrat_sans);
 margin: 0;
}

.heading_h1 {
  font-size: 32px;
  line-height: 38.4px;
  font-weight: 600;
}

.heading_h2 {
  font-size: 28px;
  line-height: 33.6px;
  font-weight: 500;
}

.heading_h3 {
 font-size: 20px;
 line-height: 120%;
}

.heading_h1.med, .heading_h3.med, .heading_h4.med, h1.med, h2.med, h3.med, h4.med, h5.med, h6.med {
 font-weight: 500;
}

sup {
 line-height: 0;
 position: relative;
 top: -.5em;
 vertical-align: baseline;
 font-size: 65%;
}

.large {
 font-weight: 900;
}

.semi {
 font-weight: 600;
}

.lagoon {
 color: var(--secondary-font-color);
}

div.footnote_block {
 margin-top: 8px;
}

audio, canvas, img, svg, video {
 vertical-align: middle;
}

.mobile_break {
 display: block;
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
 display: block;
}

img {
 border: 0;
 vertical-align: middle;
}

*,
::after,
::before {
 box-sizing: border-box;
 -webkit-font-smoothing: antialiased;
}

a {
 background: transparent;
 text-decoration: none;
 display: inline-block;
 color: inherit;
}

a:active,
a:hover {
 outline: 0;
}

.heading_h1, .heading_h3, .heading_h4, h1, h2, h3, h4, h5, h6 {
 font-family: var(--font-montserrat_sans);
 margin: 0;
 letter-spacing: 0;
}

h1 {
 font-size: 36px;
 font-weight: 500;
 line-height: 120%;
}

.page-headline {
 font-size: 32px;
 line-height: 120%;
 font-weight: 400;
 color: var(--secondary-font-color);
}

.heading_h3, span.h3 {
 font-weight: 700;
 font-size: 20px;
 line-height: 120%;
}

h1 + h4,
h1 + p {
 margin-top: 16px;
}

h2 + h4,
h2 + p {
 margin-top: 16px;
}

p + p {
 margin-top: 16px;
}

p + .heading_h3,
p + h2 {
 margin-top: 40px;
}

.reg {
 font-weight: 400;
}

body .isi > .container,
body .isi_permanent > .container,
body .isi_tray > .container,
body .navigation_container > .container,
body footer > .container,
body header > .container,
body main > .container,
body section > .container {
 width: 100%;
}

body .isi > .container > .wrapper,
body .isi_permanent > .container > .wrapper,
body .isi_tray > .container > .wrapper,
body .navigation_container > .container > .wrapper,
body footer > .container > .wrapper,
body header .container > .wrapper,
body main > .container > .wrapper,
body section > .container > .wrapper {
 position: relative;
 margin: 0 16px;
 max-width: 514px;
}

section .container .wrapper {
 padding-top: 48px;
}

section + section .container .wrapper {
 padding-top: 40px;
}

.left_bar {
 position: relative;
 padding-left: 20px;
 margin-bottom: 1.5rem;
}

.left_bar:before {
  transform: skew(-16deg);
  position: absolute;
  top: 0;
  left: 4px;
  width: 5px;
  height: 30px;
  content: "";
  background-color: var(--color-orange);
}

.link_inline {
 color: var(--secondary-font-color);
 font-weight: 700;
 text-decoration: underline;
}

.button {
 padding: 17px 16px;
 color: var(--secondary-font-color);
 font-family: var(--font-montserrat_sans);
 font-weight: 600;
 font-size: 16px;
 line-height: 20px;
 border-radius: 5px;
 border: 0;
 cursor: pointer;
}

.button.secondary {
 padding: 0 60px 0 0;
 font-size: 16px;
 line-height: 20px;
 background-color: var(--white-color);
 overflow: hidden;
 box-shadow: var(--shadow-default) 2px 4px 6px 0;
}

button.button.continue:hover {
  background-color: var(--white-color);
  color: var(--secondary-font-color);
}

button.button.cancel:hover {
  color: var(--white-color);
  background-color: var(--secondary-font-color);
}

.button.secondary span.link-text {
 display: block;
 padding: 17px 40px;
 color: var(--secondary-font-color);
 font-weight: 500;
 border-top-left-radius: 5px;
 border-bottom-left-radius: 5px;
 position: relative;
}

.button.secondary span.link-text::after,
.button.secondary span.link-text::before {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 right: -62px;
 width: 60px;
 height: 100%
}

.button.secondary span.link-text::before {
 background-color: var(--secondary-background-color);
 border-left: 2px solid var(--white-color);
 border-top-right-radius: 5px;
 border-bottom-right-radius: 5px;
 transition: all .25s linear 0s
}

.button.secondary span.link-text::after {
 background-image: url(/images/Icons/button-arrow-right-secondary-2x.png);
 background-size: 28px;
 background-position: 50% 50%;
 background-repeat: no-repeat
}

.button.secondary:not(.inactive):hover span.link-text::before {
 right: -120px
}

.button.secondary:not(.inactive):active {
 box-shadow: none;
 border: 1px solid var(--secondary-background-color);
}

.arrow_link {
 font-family: var(--font-montserrat_sans);
 font-weight: 600;
 font-size: 16px;
 line-height: 19px;
 letter-spacing: -.32px;
 color: var(--secondary-font-color);
 padding-right: 16px;
 display: inline-block;
 position: relative
}

.arrow_link::after {
 display: block;
 content: url(/images/Icons/chevron.svg);
 width: 10px;
 height: 16px;
 position: absolute;
 top: 50%;
 right: 0;
 transform: translateY(-50%)
}

ul {
 margin: 0;
 padding: 0;
 list-style: none;
 display: block;
 list-style-type: none;
}

ul li {
 display: block;
}

section.has-top-border {
 border-top: 2px solid var(--secondary-background-color);
}

section.has-eyebrow .container:first-of-type .wrapper {
 padding-top: 90px;
}

.section_eyebrow {
 position: absolute;
 top: 0;
 left: 0;
 background-color: var(--white-color);
}

.section_eyebrow p {
 font-family: var(--font-montserrat-pro_sans);
 font-size: 20px;
 line-height: 50px;
 text-transform: uppercase;
 font-weight: 600;
 color: var(--secondary-font-color);
 padding: 0 1.5rem;
 border: 2px solid var(--secondary-background-color);
 border-top: 0;
 height: 50px;
 margin: 0;
}

.footnote {
 font-family: var(--font-montserrat-pro_sans);
 font-size: 14px;
 line-height: 17px;
}

div.footnote_block {
 margin-top: 8px;
}

div.footnote_block p.footnote {
 position: relative;
 margin-left: 4px;
}

div.footnote_block p.footnote span.symbol {
 position: absolute;
 top: 0;
 left: -1.1rem;
 display: inline-block;
 width: 1.1rem;
 text-align: right;
}

.tout_container {
 display: flex;
 flex-direction: column;
 gap: 16px;
 margin-top: 50px;
}

.tout_container .tout {
 position: relative;
 display: flex;
 flex-direction: column;
 border-top: 4px solid var(--secondary-background-color);
 box-shadow: var(--shadow-default) 0 4px 20px 0;
}

.tout_container .tout .subhead {
 font-family: var(--font-montserrat_sans);
 font-size: 18px;
 line-height: normal;
 font-weight: 400;
 text-align: center;
 color: var(--white-color);
 padding: 16px 24px;
 background-color: var(--secondary-font-color);
}

.tout_container .tout .subhead span.large {
 font-size: 24px;
 line-height: normal;
 display: block;
}

.tout_container .tout .subhead span.normal {
 font-weight: 400;
}

.tout_container .tout .tout-img {
 width: 100%;
}

.tout_container .tout .button-container {
 position: absolute;
 bottom: 24px;
 left: 0;
 text-align: center;
 width: 100%;
}

.tout_container .tout .button {
 margin-left: auto;
 margin-right: auto;
 border: 1px solid var(--secondary-background-color);
}

.tout_container .tout .button span.link-text {
 padding: 10px 24px;
 border-right: 0;
 font-weight: 600;
}

@media only screen and (min-width: 981px) {
 .content-with-left-angular-bar {
   background: linear-gradient(
     90deg,
     var(--color-gray-light) -3.87%,
     var(--color-gray-transparent) 21.51%
   );
   transform: skewX(-15deg);
   border-left: 10px solid var(--secondary-background-color);
   height: 268px;
   margin-left: 36px;
   padding-left: 4rem;
   padding-right: 4rem;
 }

 .content-with-left-angular-bar .copy_block_inner {
   transform: skewX(15deg);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   height: 100%;
 }
}

@media screen and (min-width: 546px) {
 body .isi > .container > .wrapper,
 body .isi_permanent > .container > .wrapper,
 body .isi_tray > .container > .wrapper,
 body .navigation_container > .container > .wrapper,
 body footer > .container > .wrapper,
 body header .container > .wrapper,
 body main > .container > .wrapper,
 body section > .container > .wrapper {
   margin: 0 auto;
   width: calc(100% - 32px);
 }
}

@media screen and (min-width: 981px) {
 body .isi > .container > .wrapper,
 body .isi_permanent > .container > .wrapper,
 body .isi_tray > .container > .wrapper,
 body .navigation_container > .container > .wrapper,
 body footer > .container > .wrapper,
 body header > .container > .wrapper,
 body main > .container > .wrapper,
 body section > .container > .wrapper {
   max-width: var(--max-width);
 }

 .desktop_break {
   display: block;
 }

 .arrow_link {
   display: inline-block;
 }

 .tout_container {
   flex-direction: row;
   gap: 2.5rem;
 }

 .tout_container .tout {
   width: 33%;
 }

 .tout_container .tout .subhead {
   display: flex;
   padding: 0;
   height: 84px;
   align-items: center;
   justify-content: center;
   flex-direction: column;
 }
}

/* common button css */

.button.primary span.link-text:after {
  background-image: url('/images/pages/home/button-arrow-right.svg');
  background-size: 28px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.button.primary span.link-text:after,
.button.primary span.link-text:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: -62px;
  width: 60px;
  height: 100%;
}
.button.primary span.link-text:before {
  background-color: var(--secondary-background-color);
  border-left: 2px solid var(--white-color);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  transition: all .25s linear 0s;
}

em, i {
  font-style: italic;
}
.button.primary:not(.inactive):active span.link-text:before,
.button.primary:not(.inactive):hover span.link-text:before {
  right: -120px;
}
html {
  scrollbar-width: none;
}

.link_download {
  font-family: var(--font-montserrat_sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--secondary-font-color);
}

.link_download span.text {
  position: relative;
  margin-right: 24px
}

.link_download span.text:after {
  display: block;
  content: "";
  width: 18px;
  height: 18px;
  position: absolute;
  top: 50%;
  right: -24px;
  transform: translateY(-50%);
  background-image: url(../images/Icons/download_orange.svg);
  background-size: 18px;
  background-position: 0 0;
  background-repeat: no-repeat
}

ul.bulleted li + li {
  margin-top: 8px;
}

.gradient-bg {
  background: var(--radial-gradient-color);
}

.no-scroll {
  overflow: hidden;
}