@import url('simple-grid.css');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Lato:wght@400;700;900&display=swap');
/*
font-family: 'DM Sans', sans-serif;
font-family: 'Lato', sans-serif;
*/

html {scroll-behavior: smooth;}
* {margin: 0px; padding: 0px;}
body {
  background: #f1f2f2;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  width: 100vw;
  overflow-x: hidden;
}
p {margin-bottom: 1em;}
a {text-decoration: none;}
img {max-width: 100%;}

h1 {font-family: 'Lato', sans-serif; font-weight: 900;}
h2 {font-family: 'Lato', sans-serif; font-weight: 900;}
h4 {font-family: 'Lato', sans-serif; font-weight: 400;}
h5 {font-weight: 700; font-size: 1.1em;}

a.button {background: #013c5a; color: #FFF; display: inline-block; padding: 10px 0; border-radius: 10px;}
a.full-width {width: 100%; text-align: center;}
.text-uppercase {text-transform: uppercase;}
.tt-none {text-transform: initial !important;}
.fontweight-mediumbold {font-weight: 600 !important;}
span.highlight {color: #013c5a;}

.show_mobile {display: none;}
.show_desktop {display: block;}

.d-flex {display: flex;}
.ai-center {align-items: center;}

.pt-1em {padding-top: 1em;}
.pb-1em {padding-bottom: 1em;}
.mt-2em {margin-top: 2em;}
.pt-2em {padding-top: 2em;}
.pb-2em {padding-bottom: 2em;}
.pb-5em {padding-bottom: 5em;}
.text-center {text-align: center;}
.text-right {text-align: right;}
.align-items-center {align-items: center;}
.d-flex {display: flex;}
.d-block {display: block;}
.h-100vh {height: 100vh;}
.spacer-45 {height: 45px;}
.visibility-none {visibility: hidden;}
.seprator_full {
  background: #013c5a;
  height: 3px;
  margin: 1em 0;
}
.small-seprator {position: relative;}
.small-seprator::after {
  content: "";
  position: absolute;
  background: #013c5a;
  width: 100px;
  height: 3px;
}
.small-seprator.color-blue::after {background: #039cd4;}
.small-seprator.left-none::after {left: 0;}
.small-seprator.right-none::after {right: 0;}
.linkto_nextsec {
  position: absolute;
  z-index: 999;
  left: 50%;
  bottom: 10%;
  min-width: 200px;
  text-align: center;
  padding: 10px 25px;
  border-radius: 10px;
  transform: translateX(-50%);
  background: #013c5a;
  color: #FFF;
  font-weight: 700;
  text-transform: uppercase;
}
.linkto_nextsec::after {
  content: "";
  position: absolute;
  width: 38px;
  height: 38px;
  background: url("../images/home-hero-down-arrow.png");
  left: calc(50% - 19px);
  top: 2.5em;
}
.linkto_top {text-align: center; padding: 10% 0 10%;}
.linkto_top a {
  position: relative;
  display: inline-block;
  min-width: 200px;
  text-align: center;
  padding: 10px 25px;
  border-radius: 10px;
  background: #013c5a;
  color: #FFF;
  font-weight: 700;
  text-transform: uppercase;
}
.linkto_top a::before {
  content: "";
  position: absolute;
  width: 38px;
  height: 38px;
  background: url("../images/home-hero-up-arrow.png");
  left: calc(50% - 19px);
  top: -2.3em;
}

#page_container {position: relative;}
.section_navigation {
  position: absolute;
  z-index: 999;
  width: calc(20% - 4%);
  height: 90vh;
  padding: 2%;
}
.section_navigation .toogleNav {display: none;}
.section_navigation ul {list-style: none; margin-top: 2em;}
.section_navigation ul li {padding: 0.5em 0;}
.section_navigation ul li a {color: #FFF; position: relative;}
.section_navigation ul li a.active::after {
  content: "";
  position: absolute;
  background: #013c5a;
  width: 25px;
  height: 3px;
  left: 0px;
  bottom: -5px;
}
.section_navigation .app_download {
  position: absolute;
  z-index: 999;
  bottom: 0;
}
.section_navigation .app_download h3 {
  font-size: 0.8em;
  font-weight: 400;
  color: #FFF;
  margin-bottom: 0.5em;
}

.section_tophero {
  position: relative;
  background: url("../images/home-hero-bg.jpg") no-repeat center center;
  background-size: cover;
  color: #FFF;
  padding: 0 20%;
}
.btn_lets-start {
  position: absolute;
  background: #ff0000;
  border: 2px solid #FFF;
  color: #FFF;
  right: 40px;
  bottom: 40px;
  width: 78px;
  height: 50px;
  padding-top: 28px;
  border-radius: 100px;
  text-align: center;
  text-decoration: underline;
  font-size: 16px;
  letter-spacing: 1px;
}
#page_portals .btn_lets-start {height: 60px; padding-top: 18px;}
.btn_lets-start:hover {text-decoration: none;}
#details-top.section_tophero {padding-left: 27%;}

.section_tophero .app_download h3 {font-size: 0.8em; font-weight: 400; margin-bottom: 0.5em;}
.section_tophero .tophero_container {display: flex; height: 100vh; align-items: center;}
.section_tophero .tophero_container .text_content,
.section_tophero .tophero_container .image_content {position: relative; width: 50%;}
.section_tophero .tophero_container .image_content img {max-height: 75vh;}
.section_tophero .tophero_container .image_content::after {
  content: "";
  position: absolute;
  background: url("../images/home-hero-phone-shadow.png") no-repeat center center;
  background-size: contain;
  width: 100%;
  height: 6em;
  left: 0;
  bottom: -5em;
}
.section_tophero .tophero_container .text_content h4 {
  text-transform: uppercase;
  color: #013c5a;
  font-size: 1.1em;
  line-height: 1;
}
.section_tophero .tophero_container .text_content h1 {
  font-size: 4em;
  line-height: 1;
}
.section_tophero .tophero_container .text_content h1 span {
  font-size: 0.68em;
}

.page_bottom {
  padding: 0 20%;
  min-height: 100vh;
  position: relative;
}
.page_bottom h2 {
  font-size: 2.66em;
  line-height: 1;
}
.page_bottom h5 {margin-bottom: 0.3em;}
.page_bottom p {font-weight: 400;}
.page_bottom ul {margin-left: 1.5em; margin-bottom: 1.5em;}
.page_bottom ul li {font-size: 0.9em; font-weight: 400; margin-top: 0.5em;}
.link_buttons a {
  display: block;
  background: #013c5a;
  font-size: 0.8em;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 20px;
  margin-bottom: 5px;
  border-radius: 10px;
  cursor: default;
}
.link_buttons a span {
  display: block;
  font-size: 0.7em;
  color: #039cd5;
  text-transform: capitalize;
}

#welcome-bottom.page_bottom {padding: 0 5%;}
#welcome-bottom.page_bottom .container {max-width: 1320px;}
#welcome-bottom h3 {font-size: 32px; letter-spacing: 1px;}
#welcome-bottom h5 {text-transform: uppercase; font-size: 24px; letter-spacing: 1px;}
#welcome-bottom p {font-size: 16px;}

#catalog-intentions-bottom.page_bottom {padding: 0 5%;}
#catalog-intentions-bottom.page_bottom .container {max-width: 1152px;}
#page_catalog-intentions .section_tophero {
  background: url("../images/COI-hero-bg.jpg") no-repeat center center;
  background-size: cover;
}
#page_catalog-intentions .section_tophero .tophero_container .text_content h1 {margin-bottom: 0.2em;}
#page_catalog-intentions .section_tophero .tophero_container .text_content p {margin-bottom: 0.7em;}
#page_catalog-intentions .section_tophero .tophero_container .text_content a {color: #013c5a;}
#page_catalog-intentions .section_tophero .tophero_container .text_content a:hover {text-decoration: underline;}
#page_catalog-intentions .page_bottom {background: #d1d3d4;}
#page_catalog-intentions .how-boxes {margin-bottom: 2em;}
#page_catalog-intentions .how-boxes h4 {text-align: center; font-size: 1.1em; margin-bottom: 1em; min-height: 3.5em;}

#trending-bottom.page_bottom {padding: 0 5%;}
#trending-bottom.page_bottom .container {max-width: 1152px;}
#page_trending .section_tophero {
  background: url("../images/trending-hero-bg.jpg") no-repeat center center;
  background-size: cover;
}
#page_trending .section_tophero .tophero_container {height: initial;}
#page_trending .section_tophero .tophero_container .image_content img {max-height: 85vh;}
#page_trending .section_tophero .tophero_container .image_content::after {
  content: "";
  position: absolute;
  background: url("../images/trending-hero-img-overlay.png") no-repeat center center;
  background-size: contain;
  width: 199px;
  height: 199px;
  left: 0;
  bottom: 2em;
}
#page_trending .section_tophero p span {font-size: 2.7em; font-weight: 700; color: #013c5a;}
#page_trending .page_bottom {
  background: url("../images/trending-bottom-img.png") no-repeat right center;
  background-size: 50% auto;
}
#page_trending .page_bottom .row a {min-width: 330px; text-align: center;}

#alignments-bottom.page_bottom {padding: 0 5%;}
#alignments-bottom.page_bottom .container {max-width: 1152px;}
#page_alignments .section_tophero {
  background: url("../images/alignments-hero-bg.jpg") no-repeat center center;
  background-size: cover;
}
#page_alignments .section_tophero .tophero_container {height: initial; padding: 20% 0;}
#page_alignments .section_tophero .tophero_container .text_content h4 {font-size: 1.6em; margin: 0.7em 0;}
#page_alignments .section_tophero .tophero_container .text_content {width: 45%;}
#page_alignments .page_bottom {
  background: url("../images/alignments-bottom-img-2.png") no-repeat left bottom;
  background-size: 56% auto;
  margin-bottom: 2em;
}

#intentionize-bottom.page_bottom {padding: 0 5%;}
#intentionize-bottom .linkto_top {padding: 8% 0 5%;}
#intentionize-bottom.page_bottom .container {max-width: 1152px;}
#page_intentionize .section_tophero {
  background: url("../images/intentionize-hero-bg.jpg") no-repeat center center;
  background-size: cover;
}
#page_intentionize .section_tophero .tophero_container {height: initial; padding: 20% 0;}
#page_intentionize .section_tophero .tophero_container .text_content h1 {margin-bottom: 0.2em;}
#page_intentionize .page_bottom h2 {margin-bottom: 0.5em;}
#page_intentionize .page_bottom {
  background: url("../images/intentionize-bottom-bg.png") no-repeat left bottom;
  background-size: 80% auto;
  margin-bottom: 0px;
  padding-bottom: 5em;
}

#details-bottom.page_bottom {padding: 0 5%;}
#details-bottom.page_bottom .container {max-width: 1152px;}
#page_details .section_tophero {
  background: #21667d url("../images/details-hero-bg-2.jpg") no-repeat center center;
  background-size: contain;
}
#page_details .section_tophero .tophero_container {height: initial; padding: 20% 0;}
#page_details .section_tophero .tophero_container .text_content h1 {margin-bottom: 0.2em;}
#page_details .section_tophero h3.blue-background {
  display: inline-block;
  padding: 5px 15px;
  font-size: 1.5em;
  background: #30b4e5;
  color: #FFF;
}
#page_details #details-top.section_tophero h3.blue-background {font-size: 1.2em;}
#page_details .page_bottom {
  background: #d1d3d4;
  padding-bottom: 2em;
}
#page_details .page_bottom h2 {margin-bottom: 0.5em;}
#page_details .page_bottom h4 {font-family: 'DM Sans', sans-serif; font-size: 1.5em; font-weight: 500; margin: 0.3em 0 0.2em;}
#page_details .page_bottom p {margin-top: 1em; max-width: 425px;}
#page_details .page_bottom .text-center p {margin: 1em auto 0;}
#page_details .page_bottom .small-seprator.color-blue::after {width: 85px;}
#page_details .page_bottom .text-center .small-seprator.color-blue::after {width: 160px; left: 50%; transform: translateX(-50%);}

#portals-bottom.page_bottom {padding: 0 5%;}
#portals-bottom.page_bottom .container {max-width: 1152px;}
#page_portals .section_tophero {
  background: url("../images/portal-hero-bg.jpg") no-repeat center center;
  background-size: cover;
}
#page_portals .section_tophero .tophero_container {height: initial; padding: 15% 0;}
#page_portals .section_tophero h4 {margin: 1em 0;}
#page_portals .page_bottom {
  padding-bottom: 2em;
  background: url("../images/portals-bottom-img.png") no-repeat right center;
  background-size: 40% auto;
}
#page_portals .page_bottom h4 {font-family: 'DM Sans', sans-serif; font-size: 2em; font-weight: 500;}
#page_portals .page_bottom p {margin-top: 1em;}

.page_next_back {position: absolute; right: 10%; top: 50%; transform: translateY(-50%);}
.page_next_back a {display: block; width: 176px; height: 49px; text-indent: -9999px; margin: 15px 0;}
.page_next_back a.goto-next {background: url("../images/slide-next.png") no-repeat center center;}
.page_next_back a.goto-back {background: url("../images/slide-back.png") no-repeat center center;}

.page_slide {left: 100%; opacity: 0; position: absolute; width: 0px; height: 0px; overflow: hidden;}
.page_slide.active {left: 0%; opacity: 1; width: 100%; height: auto; transition: left 0.4s, opacity 0.2s;}

.intentionize_content {padding-bottom: 51%;}

@media (max-width: 1550px) {
  .page_next_back{right: 5%;}
  #page_catalog-intentions .section_tophero .tophero_container .text_content {width: 64%;}
}

@media (max-width: 1536px) {
  .intentionize_content {padding-bottom: 50%;}
  .intentionize_content .sec_header {margin-bottom: 5em;}
  .intentionize_content .row .col-5 .spacer-45 {display: none;}
}

@media (max-width: 1440px) {
  .page_next_back{right: 2%;}
  .page_next_back a {width: 144px; height: 40px; background-size: contain !important;}
  .section_tophero {padding: 0 10% 0 22% !important;}
  #page_trending .section_tophero .tophero_container .image_content::after {width: 100px; height: 100px; left: 2em;}
  #page_portals .section_tophero .tophero_container {padding: 10% 0;}

  .section_tophero .tophero_container .text_content h1 {font-size: 3em;}
}

@media (max-width: 1366px) {
  .intentionize_content .sec_header {margin-bottom: 3em;}
}

@media (max-width: 1024px) {
  .intentionize_content {padding-bottom: 35%;}
  .intentionize_content .sec_header {margin-bottom: 1em;}
}

@media (max-width: 800px) {
  #page_intentionize .page_bottom {background-size: 90% auto; min-height: initial;}
  .intentionize_content {padding-bottom: 85%;}
  .intentionize_content .row .col-7 {display: none;}
  .intentionize_content .row .col-5 {width: 100%;}
}

@media (max-width: 640px) {
  .show_mobile {display: block;}
  .show_desktop {display: none;}

  #welcome-bottom.page_bottom .container {padding: 10% 5%; width: 90%;}
  #page_catalog-intentions .section_tophero .tophero_container .text_content {width: 100%;}
  #catalog-intentions-bottom.page_bottom {padding: 10% 5%;}
  #alignments-bottom.page_bottom {padding: 10% 5%;}
  #intentionize-bottom.page_bottom {padding: 10% 5%;}
  #details-bottom.page_bottom {padding: 10% 5%;}
  #portals-bottom.page_bottom {padding: 10% 5%;}
  .intentionize_content .small-seprator::after {left: 50%; margin-left: -50px;}
  .intentionize_content .row .col-7, .intentionize_content .row .col-5 .spacer-45 {display: none;}
  .intentionize_content .sec_header {margin-bottom: 0em;}

  body {font-size: 18px;}
  .spacer-45 {height: 25px;}
  .h-100vh {height: auto;}
  .linkto_nextsec {display: none;}
  .linkto_top {display: none;}
  .page_next_back {display: none;}
  .section_navigation {position: absolute; width: calc(100% - 50px); height: auto; padding: 25px;}
  .section_navigation img {display: block;}
  .section_navigation ul {display: none;}
  .section_navigation .app_download {display: none;}
  .section_navigation .app_download img {display: inline-block;}
  .section_navigation .toogleNav {display: block; position: absolute; top: 30px; right: 15px; color: #FFF;}
  .section_navigation.active {height: calc(100vh - 50px); background: rgba(0,0,0,0.9);}
  .section_navigation.active ul {display: block;}
  .section_navigation.active ul li {padding: 0.7em 0;}
  .section_navigation.active .app_download {display: block; bottom: 1em;}
  .section_navigation.active .toogleNav {width: 30px; height: 30px; border-radius: 30px; text-align: center; font-size: 26px; line-height: 26px; background: #FFF; color: #000; top: 25px; right: 25px;}
  .section_tophero {padding: 100px 25px 25px 25px !important;}
  .section_tophero .tophero_container {display: inherit; height: auto;}
  .section_tophero .tophero_container .text_content, .section_tophero .tophero_container .image_content {position: inherit; width: 100%;}
  .section_tophero .tophero_container .image_content {text-align: center; padding: 1.5em 0 5em 0;}
  .section_tophero .tophero_container .image_content img {max-width: 70%;}
  .section_tophero .tophero_container .image_content::after {bottom: 0em; height: 10em;}
  .section_tophero .tophero_container .text_content h1 {font-size: 2.5em;}
  .section_tophero .tophero_container .text_content h4 {font-size: 1em;}
  .page_bottom {padding: 45px 30px;}
  .page_bottom h2 {font-size: 2em;}
  .page_bottom h4 {font-size: 1.5em;}
  .page_bottom .row [class^="col"] {margin-bottom: 1em;}

  #page_catalog-intentions .section_tophero {min-height: calc(100vh - 125px)}
  #page_catalog-intentions .page_bottom {padding-bottom: 0;}
  #page_catalog-intentions .page_bottom .container .row:last-child [class^="col"] {margin-bottom: 0;}

  #page_trending .section_tophero .tophero_container .image_content {padding: 1.5em 0 2em 0;}
  #page_trending .section_tophero .tophero_container .image_content::after {width: 100px; height: 100px; left: 1.5em; bottom: 5em;}
  #page_trending .page_bottom {background: inherit; min-height: auto;}
  #page_trending .page_bottom::after {
    content: ""; display: block; height: 325px; width: 100vw; margin-left: 0px;
    background: url("../images/trending-bottom-img.png") no-repeat center center;
    background-size: contain;
  }

  #page_alignments .section_tophero .tophero_container .text_content {width: 100%;}
  #page_alignments .section_tophero {background-position: right center;}
  #page_alignments .section_tophero .tophero_container .text_content h4 {background: #FFF; padding: 5px;}
  #page_alignments .page_bottom .container .row.mt-2em.d-flex.align-items-center {display: inherit;}
  #page_alignments .page_bottom .container .row.mt-2em.d-flex.align-items-center [class^="col"] {width: 100%;}
  #page_alignments .page_bottom .container .row.mt-2em.d-flex.align-items-center .col-6:first-child {display: none;}
  #page_alignments .page_bottom {min-height: auto; margin-bottom: 0; background: none;}
  #page_alignments .page_bottom::after {
    content: ""; display: block; height: 300px; width: 100%;
    background: url("../images/alignments-bottom-img-2.png") no-repeat center center;
    background-size: contain;
  }

  #page_intentionize .page_bottom {min-height: auto; background-size: 100% auto; margin-bottom: 0px; padding-top: 15%; padding-bottom: 20em;}

  #page_details .page_bottom img {max-width: 80px;}
  #page_details .page_bottom .row.pb-2em {padding-bottom: 0;}
  #page_details .page_bottom .row.pb-2em [class^="col"] {text-align: center;}
  #page_details .page_bottom .row.pb-2em .col-3 {display: none;}
  #page_details .page_bottom .small-seprator.color-blue::after {left: 50%; transform: translateX(-50%);}
  #page_details .page_bottom .text-center .small-seprator.color-blue::after {width: 85px;}

  #page_portals .section_tophero .tophero_container .image_content {padding: 1.5em 0 2em 0;}
  #page_portals .page_bottom {background: none;}
  #page_portals .page_bottom h4 {font-size: 1.5em;}
  #page_portals .page_bottom .text-right {text-align: left;}
  #page_portals .page_bottom .text-right .small-seprator.right-none::after {left: 0;}
  #page_portals .page_bottom .pt-2em {padding-top: 0;}
  #page_portals .page_bottom .pb-2em {padding-bottom: 1em;}
  #page_portals .page_bottom .pb-5em {padding-bottom: 1em;}
  #page_portals .page_bottom .container .row:last-child .col-2 {display: none;}
  #page_portals .spacer-45.seprator_full {height: 3px;}

  .intentionize_content {padding-bottom: 10%;}
}
@media (max-width: 540px) {
  #page_intentionize .page_bottom {padding-bottom: 25em;}
}
@media (max-width: 414px) {
  #page_intentionize .page_bottom {padding-bottom: 20em;}
}
@media (max-width: 300px) {
  #page_intentionize .page_bottom {padding-bottom: 14em;}
}