:root {

  --clr-primary-900: #f6f7f8;
  --clr-secondary-100: hsla(229,42%,46%);
  --clr-tertiary-400: hsla(0, 0, 0%, 1);


  --ff-primary: 'futura-pt', sans-serif;
  --ff-secondary: '';
 


  --ff-body: var(--ff-primary);
  --ff-heading: var(--ff-primary);
  --ff-para: var(--ff-manofa);

  --fw-regular: 300;
  --fw-semi-bold: 400;
  --fw-bold: 700;
  --fw-heavy: 700;

  --fs-100: 2rem;
  --fs-200: .75rem;
  --fs-300: 1rem;
  --fs-400: 1.75rem;
  --fs-500: 1.875rem;
  --fs-600: 2rem;
  --fs-700: 4.375rem;
  --fs-750: 4.687rem;
  --fs-800: 7.375rem;
  --fs-900: 11.687rem;


  --fs-body: var(--fs-400);
  --fs-nav: var(--fs-200);
  --fs-primary-heading: var(--fs-800);
  --fs-secondary-heading: var(--fs-600);

  --ls-400: 2px;
  --lh-para: 25px;
  --lh-list: 20px;
  
  --size-100: 1.5rem;
  --size-200: 1rem;
  --size-300: 0.75rem;
  --size-400: 1.5rem;
  --size-500: 1.5rem;
  --size-600: 2rem;
  --size-700: 2.1rem;
  --size-800: 4rem;
  --size-900: 5rem;
  --size-1000: 8rem;

  --space-200: 2rem;
  --space-400: 4rem;
  --space-600: 6rem;
}

@media (min-width: 576px){
  :root {
  --fs-100: 4vw;
  --fs-200: .75rem;
  --fs-300: 1.375rem;
  --fs-400: 1.25rem;
  --fs-500: 1.875rem;
  --fs-600: 3rem;
  --fs-650: 4.1rem;
  --fs-700: 4.375rem;
  --fs-750: 4.687rem;
  --fs-800: 7.375rem;
  --fs-900: 11.687rem;

  --fs-body: var(--fs-400);
  --fs-nav: var(--fs-200);

  --lh-para: 30px;
  --lh-list: 25px;
  }

}

/* https://piccalil.li/blog/a-modern-css-reset */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
*{
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
  
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
html, body{
  background: var(--clr-primary-900);
  width:100%;
  overflow-x: hidden;
  font-family: var(--ff-primary);
  font-weight:var(--fw-semi-bold);
  padding:0;
  margin:0;
}


/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}
a{
  text-decoration: none;
  color:var(--clr-primary-900);
}
/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  display: block;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Utility Classes */
hr {
  border: 0;
  margin:-1px 0;
}
h1{
  font-size:var(--clr-tertiary-400);
}
h2{
  font-weight:400;
}


.ls-400{
    letter-spacing: var(--ls-400);
}
.lh-para{
  line-height: var(--lh-para);
}
.lh-list{
  line-height: var(--lh-list);
}

.ff-primary{
  font-family: var(--ff-primary);
}
.ff-secondary{
  font-family: "futura-pt", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.text-ff-para{
  font-family: var(--ff-para);
}
.text-ff-para-sm{
  font-family: var(--ff-para);
  line-height:1.25;
}
.text-primary-900{
  color: var(--clr-primary-900);
}
.text-secondary-100{
  color: var(--clr-secondary-100);
}
.text-terciary-400{
  color: var(--clr-tertiary-400);
}
.background-primary-900{
  background-color: var(--clr-primary-900);
}
.background-secondary-100{
  background-color: var(--clr-secondary-100);
}
.fw-heavy {font-weight: var(--fw-heavy);}
.fw-bold {font-weight: var(--fw-bold);}
.fw-semi-bold {font-weight: var(--fw-semi-bold);}
.fw-regular {font-weight: var(--fw-regular);}

.no-wrap{
  white-space: nowrap;
}


.fs-primary-heading { 
  font-size: var(--fs-700);
  white-space: nowrap;
}
.fs-secondary-heading { 
  font-size: var(--fs-650);
}
.fs-200 {font-size:var(--fs-200) }
.fs-300 {font-size:var(--fs-300) }
.fs-400 {font-size:var(--fs-400) }
.fs-500 {font-size:var(--fs-500) }
.fs-600 {font-size:var(--fs-600) }
.fs-650 {font-size:var(--fs-650) }
.fs-700 {font-size:var(--fs-700) }
.fs-750 {font-size:var(--fs-750) }
.fs-800 {font-size:var(--fs-800) }

.fullpage{
  position:relative;
  height:100%;
}
.fullpage svg {
  width: 100%;
}
.fullpage .link1{
  position:absolute;
  height:4%;
  width: 22%;
  bottom: 4%;
  left: 30%;
}
.fullpage .link2{
  position:absolute;
  height:4%;
  width: 22%;
  bottom: 4%;
  left: 55%;
}
.hidden-sm{
  display:none;
}
.hidden-md{  
}
.container{ 
}
.landing-sm{
  margin:2rem 15px;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 2rem;
}
.logo img{
  width:90vw;
}
.landing-sm .col-2 h2:nth-child(2){
  padding:1rem 0 0 0;
}
.blue-line{
  height:25px;
  background-color: var(--clr-secondary-100);
  z-index:2;
}

ul img{display: inline-block;
  height: .75rem;
  padding-right: 4px;
}

/* X-Small devices (portrait phones, less than 576px)*/

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 
  .landing-sm{
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 1rem;
  }
  .landing-sm .col-1{
    grid-column: span 3;
  }
  .logo img{
    width:33vw;
    margin-right:auto;
  }
  .landing-sm .col-2{
    white-space: nowrap;
    grid-column: 1 / span 2;
  }
 
  .landing-sm .col-3{
    margin-top:auto;
    grid-column: 3 span 1;
    z-index:0;
  }
  .landing-sm .col-3 img{
    scale: 1.5;
  }

 }

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
  .hidden-sm{
    display:block;
  }
  .hidden-md{
    display:none;
  }

 }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {  }
.fullpage .link2{
  display:none;
}
/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {  }

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {  }

/*FEATURES SECTION */





.features-sm{
  background-color: #53c8eb;
  display: grid;
  grid-template-columns: 1fr;
}
.features-sm .col-1{
  position:relative;
  padding:4rem;
}
.features-sm .col-3{
  background-color:#f3775d;
  position:relative;
  padding:4rem;
}
.features-sm .col-1 h1{
  margin-left: auto;
  text-align: right;
}
.features-sm .col-3 h1{
  margin-right:auto;
  text-align: right;
}

.features-sm .col-1 img{
  position: absolute;
  left: -150px;
  top: 100px;
  z-index: 0;
  transform: translate3d(0, 0, -200px);
}
.features-sm .col-3 img{
  position: absolute;
  padding-top:3rem;
  left: -150px;
  top: 100px;
  z-index: 0;
  transform: translate3d(0, 0, -200px);
}
.features-sm .col-2{
  font-size: var(--fs-100);
  background-color: var(--clr-primary-900);
  color:var(--clr-tertiary-400);
  padding:2rem;
  z-index: 2;
}
/* Hide DS PILL on small
.features-sm .col-2 ul img{
  display:none;
}
*/
.features-sm .col-2 ul li{
  padding-top:5px;
}

.features-sm .col-2 > ul{
  list-style-type:square;
  margin-left:5px;
}

.features-sm .col-2 ul ul{
  list-style-image: url('images/check.svg')
}


.features-sm .col-2 ul ul li:before {
  content: "\00a0";
}


.features-sm .col-4{
  background-color: var(--clr-primary-900);
  color:var(--clr-tertiary-400);
  padding:2rem;
  margin-top:-2px;
  z-index: 2;
}
.features-sm .col-4 img{
 max-width:90vw;
 max-height:90vh;
 margin:0 auto;
}
.footer {
  padding: 2rem;
  text-align: center;
}

/* X-Small devices (portrait phones, less than 576px)*/

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 
  .features-sm{
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 0rem;
  }
  .features-sm .col-1{
    grid-column: span 3;
  }
  .features-sm .col-1 img{
    position: absolute;
    left: -250px;
    top: 100px;
    z-index: 1;
  }
  .features-sm .col-3 img{
    padding-top:2rem;
    position: absolute;
    left: -250px;
    top: 100px;
    z-index: 1;
  }
  .features-sm .col-2{
    grid-column: 1 / span 3;
  }
  .features-sm .col-2 ul ul li img{
    display: inline-block;
  }
  .features-sm .col-2 ul ul{
    padding-top: 1rem;
  }
  ul ul li{
    padding-left: 2rem;
  }
  .features-sm .col-3{
    margin-top:auto;
    grid-column: 3 span 1;
    z-index:0;
  }
  .features-sm .col-3 img{
  }
  .features-sm .col-3{
    grid-column: 1/ span 3;
   }
  .features-sm .col-4{
    grid-column: 1/ span 3;
 }
 .footer {
  grid-column: 1 / span 3;
 }
 .footer span {
  
 }
 .footer a:nth-child(2):before{
  content: '|';
  padding: 0 1rem;
}
 }

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
  .hidden-sm{
    display:block;
  }
  .hidden-md,
  .visually-hidden {
  position: absolute;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

 }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {  }

/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {  }

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {  }