/***************************/
 /* Colors */
 /***************************/
 

:root {
  --dark-blue: #3b445a;
  --dark-blue-hover: #2b3344;
  
  --blue-dark: #0a539b;
  --espark-blue-hover: #0a539b;
  --blue-base: #0d68c2;
  --espark-blue: #0d68c2; 
  --blue-medium: #4790d7;
  --blue-light: #91bce7; 
  --espark-light-blue: #e0f0ff;
  --blue-lightest: #e0f0ff;
  
  --yellow-dark: #c18f08;
  --yellow-base: #f2b30b;
  --espark-yellow: #F2B30B;
  --yellow-medium: #ffd054;
  --yellow-light: #ffe398; 
  --yellow-lightest: #fff1cd;
  
  --orange-dark: #c25200;
  --orange-base: #f36700;
  --orange-medium: #ff8f3c;
  --orange-light: #ffbc8a; 
  --orange-lightest: #ffe8d6;
  
  --red-dark: #b43838;
  --red-base: #e14747;
  --red: #e14747;
  --red-medium: #ff6868;
  --red-light: #ffa4a4; 
  --red-lightest: #ffd7d7;
  
  --green-dark: #538b00;
  --green-base: #68ae00;
  --green-medium: #93d531;
  --green-light: #bee683; 
  --green-lightest: #ddf0c1;
  
  --very-light-grey: #e5e5e5;
  --light-grey: #cccccc;
  --light-medium-grey: #b3b3b3;
  --medium-grey: #999999;
  --dark-medium-grey: #808080;
  --light-dark-grey: #666666;
  --dark-grey: #4d4d4d;
    
  --espark-light-grey: #eef0f1;
  --copy-color: #333333;
  --body-copy: #333333;
  
  --purple-dark: #743e93;
  --purple-base: #914eb8;
  --purple-medium: #cc7eee;
  --purple-light: #e0b2f5; 
  --purple-lightest: #f8edff;
  
  --frontier-teal: #14a1ae;
  --frontier-teal-hover: #10808b;
  --teal-dark: #10808b;
  --teal-base: #14a1ae;
  --teal-medium: #00c3c9;
  --teal-light: #66dbdf; 
  --teal-lightest: #daf5f7;
  
}

.light-grey{color: var(--espark-light-grey);}
.purple{color: var(--purple-base);}
.blue{color: var(--espark-blue);}
.gold{color: var(--yellow-base);}
.white{color: #fff}
.teal-lightest-bg, .light-teal-bg{background-color: var(--teal-lightest);}
.espark-blue-bg, .blue-bg{background-color: var(--espark-blue);}
.light-grey-bg{background-color: var(--espark-light-grey);}
.light-blue-bg{background-color: var(--espark-light-blue);}
.purple-bg{background-color: var(--purple-base);}
.lightest-purple-bg{background-color: var(--purple-lightest);}
.teal-bg{background-color: var(--teal-base);}
.blue-light-bg{background-color: var(--blue-light);}

/* ==========================================================================
   Variables                                               
   ========================================================================== */
/**
 * Find the most consistently used font styles, colors, and container widths 
 * for your site and assign them to the jinja variables below for easy use 
 * and reference. 
 *
 * Apply the variable as shown below.  Ignore the jingja comment tags.
 *
 * 
 */

/* Colors */
    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    /*  */

/* Typography */
            /*  */
                         /*  */
                          /*  */
 /*  */

/* Containers */
 /* Used on '.page-center' in 'Base' and in the 'Portrait tablet to landscape and desktop' media query */




/* ==========================================================================
   Macros                                                  
   ========================================================================== */


/** 
  * Create jinja macros for CSS3 properties that need browser prefixes.
  *
  * Apply the style as shown below on it's own CSS property line.  
  * Ignore the jinja comment tags. 
  *
  * 
  */

 

/** 
  * Example of how to apply the above macro (ignore the jinja comment tags):
  *
  * a {
  *   color: red;
  *   font-size: 12px;
  *    
  * }
  */


 /***************************/
 /* Style Declarations */
 /***************************/


/* Apply a natural box layout model to all elements so that width and padding are combined */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

/* ------ Custom fonts (http://www.google.com/fonts) ------ */
/* @import url(#); */

html{
  background-color: var(--body-copy);
}

body {
    background: #fff;
    margin: 0 auto !important;
    /*
    max-width: 1500px;
    float: none !important;
    */
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: var(--body-copy);
    font-family: proxima-nova, "Helvetica", "Arial", sans-serif;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
}

.container-fluid .row-fluid .page-center {
  float: none;
  max-width: 1080px;
  margin: 0 auto;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    border: 0;
    -ms-interpolation-mode: bicubic;
    vertical-align: bottom; /* Suppress the space beneath the baseline */
}

img.alignRight{
    margin: 0 0 5px 15px;
}

img.alignLeft{
    margin: 0 15px 5px 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */


/* Basic text */
p { margin: 10px auto;} 
.small, .smaller {font-size: 0.85em;}
.larger {font-size: 1.1em; line-height: 1.35em;}
.strong {font-weight: 700;}
em {}
cite {}
code {}
pre {}

sup, sub {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* Headings */
h1, h2, h3, h4, h5, h6 {}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {}

h1 {
  font-size: 3.00em;
    font-weight: 700;
    line-height: 1.15em;
}

h2 {
    font-size: 2.0em;
    line-height: 1.25em;
    font-weight:700;
}

h3 {
    font-size:1.0em;
    font-weight:700;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.4em;
}


h4{
    font-size: 1.35em;
    line-height: 1.3em;
    font-weight: 500;
    margin: 0 auto 10px;
}
h5 {}
h6 {}

/* Lists */
ul, ol {}
ul ul, ul ol, ol ol, ol ul {}
li {}

ul.unstyled, ol.unstyled {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.centered{
    list-style-position: inside;
}

a {text-decoration: none; color: var(--espark-blue); font-weight: 700;}
a.underline, span.underline{text-decoration: underline;}
a.no-underline:hover{text-decoration: none;}
a:hover, a.underline:hover{text-decoration: underline;}

a.arrow-link{
  text-decoration: none;
}

a.arrow-link span:after{
  content: '→';
  padding-left: 4px;
  transition: 0.25s;
}

a.arrow-link:hover span:after{
  padding-left: 12px;
}

/* Quotes */
blockquote {}
blockquote p {}
blockquote small {}
blockquote small:before {}

q:before, q:after, blockquote:before, blockquote:after {}


.text-left{
    text-align: left;
}

.text-right{
    text-align: right;
}

.text-center{
    text-align: center;
}

.nobr	{white-space:nowrap; }
.normal{font-weight: 500;}

.dropshadow, .drop-shadow{
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

.float-left{
  float: left;
}

.float-right{
  float: right;
}
 /***************************/
 /* Transitions */
 /***************************/

.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

/* ------ Structure ------ */
/* 
 The outer wrappers of your website, if you wanted to set your website width
 to a fixed size you could set a width or max-width of 960px for example. 
*/
.header-container-wrapper, .body-container-wrapper, .footer-container-wrapper {
    margin-right: auto;
    margin-left: auto;
}

.header-container-wrapper {
    background: #FFFFFF;
    padding-bottom: 0px;
    padding-left: 0px;
}

.body-container-max-tall {
    padding: 120px 5%;
    max-width: 100%;
}

.body-container-max {
    padding: 80px 5%;
    max-width: 100%;
}

.body-container-max-shorter {
    padding: 60px 5%;
    max-width: 100%;
}

.body-container-max-shortest {
    padding: 20px 5%;
    max-width: 100%;
}

.body-container-second-tall {
    padding: 120px 11%;
    max-width: 100%;
}

.body-container-second {
    padding: 80px 11%;
    max-width: 100%;
}

.body-container-second-short {
    padding: 50px 11%;
    max-width: 100%;
}

.body-container-second-shorter {
    padding: 60px 11%;
    max-width: 100%;
}

.body-container-second-shortest {
    padding: 20px 11%;
    max-width: 100%;
}

.body-container-third {
    padding: 80px 20%;
    max-width: 100%;
}

.body-container-third-shorter {
    padding: 60px 20%;
    max-width: 100%;
}

.body-container-third-shortest {
    padding: 20px 20%;
    max-width: 100%;
}

.full-width .body-container-wrapper {
    max-width: 100%;
}

.full-width .body-container {
    max-width: 100%;
    position: relative;
    z-index: 0;
}

.max-container{
    max-width: 1400px;
    margin: 0 auto !important;
    float: none !important;
}


.border-bottom{
    border-bottom: 1px solid var(--very-light-grey)
}

.container-border-bottom{
    padding-bottom: 20px;
    border-bottom: 1px solid var(--very-light-grey);
    margin-bottom: 40px;
}

/* The inner wrappers of your website */
.header-container, .body-container, .footer-container {
}

.header-container, .body-container, .footer-container h5{
        font-family: proxima-nova, "Helvetica", "Arial", sans-serif !important;
}

.header-container {
    max-width: 100%;
}
.body-container {}


.bottom-20{
  margin-bottom: 20px;
}

.bottom-40{
  margin-bottom: 40px;
}

/* ------ Header ------ */
.header-container-wrapper {}
.header-container {}

/* Logo styling */
.header-container .hs_cos_wrapper_type_logo {
    padding: 0px 5px 15px;
}
.header-container .hs_cos_wrapper_type_logo a {}
.header-container .hs_cos_wrapper_type_logo a img {
    max-width: 100px;
}


/* ------ Menu ------ */
/* 
 Change the alignment of your menu easily by using the text-align or float CSS properties. 
 For a full width centered menu, you could simply add text-align:center; below.
 */
.header-container .hs-menu-wrapper.hs-menu-flow-horizontal {}
 
.hs-menu-wrapper {}

/* Primary menu link text color */
.hs-menu-wrapper a {}
.hs-menu-wrapper a:hover {}

/* Drop down background color */
.hs-menu-wrapper.hs-menu-flow-horizontal ul {}

/* Menu link font family and basic padding including drop down links */
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li a {}

/*---------------------Common Menu Style-------------*/
.hs-menu-wrapper {}

.hs-menu-wrapper > ul {
    display:block !important;
  padding:0px !important;
}

.hs-menu-wrapper > ul > li {}

.hs-menu-wrapper > ul > li > a{}

.hs-menu-wrapper  ul  li  a {
}

.hs-menu-wrapper  ul  li  a:hover {
    display:block !important;
    line-height: 20px;
    color: var(--espark-blue) !important;
    max-width:100% !important;
}

.hs-menu-wrapper > ul > li > a:hover {
}

.hs-menu-wrapper  ul li.hs-item-has-children {}

.hs-menu-wrapper ul ul {}

.hs-menu-wrapper ul ul li{}

.hs-menu-wrapper ul ul li a{}

.hs-menu-wrapper ul ul li a:hover{}

/*---------------------- Custom Navigation -----------------*/


/* New styles */

body {
  padding-top: 0;
}

/* Local Reset */

.nav{
  box-sizing: border-box;
  font-family: inherit;
  margin: 0;
  padding: 0;
  z-index: 1000;
}

.nav ul {
  list-style-type: none;
}

/* Nav Styles */

.nav {
  background-color: #fff;
  box-sizing: border-box;
  font-family: proxima-nova, "Helvetica", "Arial", sans-serif;
  height: 60px;
  left: 0;
  padding: 0 20px;
 /* position: fixed; */
  top: 0;
  width: 100%;
  font-weight: 400;
  border-bottom: 1px solid var(--espark-light-grey);
}

.nav.simple{
  background-color: var(--teal-lightest);
      border-bottom: 0;
}

.nav__sizer {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 auto;
  max-width: 1500px;
}

.nav__home {
  height: 45px;
}

.nav__home img {
  height: 100%;
}

.nav__items-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}

.nav__item {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: default;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 600;
  height: 100%;
  padding: 0px 1.25rem;
}

li.nav__item.nav__item--cta.cta--color-override a{
    color: var(--body-copy);
    font-weight: 600;
}

li.nav__item.nav__item--cta.cta--color-override a:hover{
  color: var(--espark-blue);
}


.nav__item:last-child {
  padding-right: 0;
}

/* Dropdowns */

.nav-dropdown {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  position: relative;
}

.nav-dropdown__label {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  position: relative;
}


.nav-dropdown__label a{
    font-weight: 600; 
    color: var(--body-copy);
}

.nav-dropdown__items-wrapper {
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
    transform: translateY(-1em);
    position: absolute;
    left: 2px;
    margin-top: 0.5em;
    border-radius: 5px;
    margin: 0;
    text-align: left;
    background: #fff;
    top: 66px;
    padding: 0.5em 0 0.5em;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
    min-width: 240px;
    border: 1px solid var(--very-light-grey);
}

.nav-dropdown__items-wrapper ul{
    padding: 0;
}

.nav-dropdown__items-wrapper ul{
    padding: 0;
}


.nav-dropdown-item {
  font-weight: 600;
  color: var(--body-copy);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  line-height: normal;
  text-align: left;
  opacity: 1;
  padding: 0.5rem 1.0rem 0.5rem;
  -webkit-transition: opacity 0.25s;
  transition: opacity 0.25s;
}


span.nav-dropdown-item__faux-button {
  padding-bottom: 0.75em;
  padding-top: 0.75em;
}

/* Dropdown Interactions */

.nav-dropdown:focus {
  outline: 0;
}

.nav-dropdown:hover .nav-dropdown__label,
.nav-dropdown:focus .nav-dropdown__label,
.nav-dropdown--focused .nav-dropdown__label {
}

/* This is the big dropdown wrapper */

.nav-dropdown:hover .nav-dropdown__items-wrapper,
.nav-dropdown:focus .nav-dropdown__items-wrapper,
.nav-dropdown--focused .nav-dropdown__items-wrapper {
  opacity: 1;
  pointer-events: auto;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  visibility: visible;
  z-index: 100000;
}

.nav-dropdown-item:hover,
.nav-dropdown-item:focus {
  outline: 0;
  color: var(--espark-blue);
  background: var(--very-light-grey);
  text-decoration: none;
}

.nav-dropdown-item:hover .nav-dropdown-item__faux-button,
.nav-dropdown-item:focus .nav-dropdown-item__faux-button {
  background-color: var(--dark-blue);
  color: #fff;
}

/* Dashboard Login Button */

.nav-dash-login {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: transparent;
  border: 0;
  color: var(--body-copy);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 0;
  -webkit-transition: color 0.25s;
  transition: color 0.25s;
  font-weight: 600;
  font-family: proxima-nova, "Helvetica", "Arial", sans-serif;
}

.nav-dash-login:hover,
.nav-dash-login:focus {
  outline: none;
  cursor: pointer;
  text-decoration: underline;
  color: var(--espark-blue);
}

/* Shared Buttons */
.nav-button {
  background-color: var(--espark-blue);
  border-radius: 30px;
  border: 0;
  color: #fff;
  display: inline-block;
  font-weight: 700;
  font-size: inherit;
  padding: 0.5em 2.0em;
  border: none;
}

.nav-button:hover,
.nav-button:focus {
  background-color: var(--espark-blue-hover);
  color: #fff;
  text-decoration: none;
}


.nav-button--inverse {
  background-color: #fff;
  border: 1px solid var(--espark-blue);
  color: var(--espark-blue);
}

.nav-button--inverse:hover,
.nav-button--inverse:focus {
  background-color: var(--espark-blue-hover);
  color: #fff;
}

/* Mobile Nav */
.mobile-nav {
  opacity: 0;
  -webkit-transition: opacity 0.25s, visibility 0.25s;
  transition: opacity 0.25s, visibility 0.25s;
  visibility: hidden;
}

.mobile-nav-toggle {
  display: none;
}

/* Using 980px because it prevents the nav items from breakingto the next line */
@media screen and (max-width: 768px) {
  .nav__items-wrapper {
    display: none;
  }

  /* Hambuger Menu 🍔 */
  .mobile-nav-toggle {
    background-color: transparent;
    border: 0;
    display: block;
    height: 40px;
    position: relative;
    width: 40px;
  }

  .mobile-nav-toggle:active {
    outline: 0;
  }

  .mobile-nav-toggle__line {
    background-color: var(--dark-blue);
    height: 3px;
    left: 0;
    opacity: 1;
    position: absolute;
    -webkit-transition: opacity 0.25s, -webkit-transform 0.25s;
    transition: opacity 0.25s, -webkit-transform 0.25s;
    transition: opacity 0.25s, transform 0.25s;
    transition: opacity 0.25s, transform 0.25s, -webkit-transform 0.25s;
    width: 100%;
  }

  .mobile-nav-toggle__line:first-child {
    top: 8px;
  }

  .mobile-nav-toggle__line:nth-child(2),
  .mobile-nav-toggle__line:nth-child(3) {
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }

  .mobile-nav-toggle__line:last-child {
    bottom: 8px;
  }

  .mobile-nav-toggle--open .mobile-nav-toggle__line:first-child,
  .mobile-nav-toggle--open .mobile-nav-toggle__line:last-child {
    opacity: 0;
  }

  .mobile-nav-toggle--open .mobile-nav-toggle__line:nth-child(2) {
    -webkit-transform: translateY(-50%) rotate(-45deg);
            transform: translateY(-50%) rotate(-45deg);
  }

  .mobile-nav-toggle--open .mobile-nav-toggle__line:nth-child(3) {
    -webkit-transform: translateY(-50%) rotate(45deg);
            transform: translateY(-50%) rotate(45deg);
  }

  /* The actual mobile nav */
  .mobile-nav--open {
    opacity: 1;
    visibility: visible;
  }
  
  ul.mobile-nav, ul.mobile-nav.mobile-nav--open{
      margin-top: 0px;
  }

  .mobile-nav {
    background-color: #fff;
    border-top: 2px solid var(--espark-light-grey);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    left: 0;
    padding: 2.5rem 4rem;
    position: absolute;
     /*top: 8.5%;*/
    width: 100%;
    z-index: 1;
  }

  .mobile-nav__item {
    margin-bottom: 1rem;
    width: 50%;
  }

  .mobile-nav__item a {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: var(--body-copy);
    font-weight: 600;
  }

  .mobile-nav__heading {
    line-height: 1.2;
  }

  .mobile-nav__item--cta {
    border-top: 1px solid var(--espark-light-grey);
    margin: 1em 0 0;
    padding: 2em 0 0;
    width: 100%;
  }

  .mobile-nav__item--cta a {
    display: block;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
    max-width: 600px;
    color: #fff;
  }

  .mobile-nav-dash-login {
    background-color: transparent;
    border: 0;
    color: var(--body-copy);
    font-size: inherit;
    text-decoration: none;
    font-family: proxima-nova, "Helvetica", "Arial", sans-serif;
    font-weight: 600;
    padding: 0;
  }
}

@media screen and (max-width: 620px) {
  .mobile-nav {
    padding: 2rem 1rem;
  }
}

@media screen and (max-width: 500px) {
  .mobile-nav {
    max-height: calc(100vh - 72px);
    overflow: auto;
  }

  .mobile-nav__item {
    margin-bottom: 0.5rem;
    width: 100%;
  }
}

 /***************************/
 /* Sign up And Login Modals */
 /***************************/


a.open-popup-link:hover{
  text-decoration: none;
}

.solid-button:focus, .solid-button-yellow:focus, .line-button-color:focus, .line-button-white:focus{ 
  outline: none !Important;
}

.solid-button:hover, .solid-button-yellow:hover{
  cursor: pointer;
}

.solid-button a, .solid-button-yellow a{
  color: white;
  text-decoration: none;
}

.white-popup {
  position: relative;
    background: #FFF;
    padding: 20px 30px;
    width: auto;
    max-width: 700px;
    height: auto;
    margin: 0 auto;
    border-radius: 4px;
}

  .modal-content {
    margin: auto;
  }

  .login-title {
  text-align: center;
    margin-bottom: 18px;
    padding: 30px 0 0 0;
  }

.login-cards{
  margin: auto;
  text-align: center;
}
  
.login-card {
    padding: 5%;
  width: 180px;
    height: 175px;
    border-radius: 6px;
    border: 2px var(--espark-light-grey) solid;
    text-align: center;
    display: inline-block;
  }

  
  .login-card:hover {
    border: 2px var(--blue-base) solid;
    background-color: var(--blue-lightest);
  }
  

.login-image {
    max-width: 90px;
  }
  

.login-card p{
  color: var(--body-copy);
  margin-top: 0px;
}

  .frontier-login {
    text-align: center;
    padding: 24px 0 18px 0;
  }
  
  @media screen and (max-width: 780px) {
    
.login-title {
  font-size: 20px; 
  margin-bottom: 10px;
  padding: 24px 0 0 20px;
}
    
.login-title h4 {
    font-size: 18px;
  }
    
.login-cards{
  margin-top: 20px;
    }
 
   
.login-card {
    padding: 4% 5% 3% 5%;
    width: auto;
    height: auto;
  }
    
.login-image {
    max-width: 60px;
}
    
    .frontier-login{
      font-size: 14px;
    }
 
}

/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
  filter: alpha(opacity=80); }

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; }

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.mfp-align-top .mfp-container:before {
  display: none; }

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045; }

.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto; }

.mfp-ajax-cur {
  cursor: progress; }

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
  cursor: auto; }

.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.mfp-loading.mfp-figure {
  display: none; }

.mfp-hide {
  display: none !important; }

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044; }
  .mfp-preloader a {
    color: #CCC; }
    .mfp-preloader a:hover {
      color: #FFF; }

.mfp-s-ready .mfp-preloader {
  display: none; }

.mfp-s-error .mfp-content {
  display: none; }

button.mfp-close, button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  -webkit-box-shadow: none;
  box-shadow: none; }
button::-moz-focus-inner {
  padding: 0;
  border: 0; }

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  filter: alpha(opacity=65);
  padding: 0 0 18px 10px;
  color: #333;
  font-style: normal;
  font-size: 28px;}

  .mfp-close:hover, .mfp-close:focus {
    opacity: 1;
    filter: alpha(opacity=100); }
  .mfp-close:active {
    top: 1px; }

.mfp-close-btn-in .mfp-close {
  color: #333; }

.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%; }

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap; }


@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75); }

  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0; }

  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%; }

  .mfp-container {
    padding-left: 6px;
    padding-right: 6px; }
 }

.mfp-ie7 .mfp-img {
  padding: 0; }
.mfp-ie7 .mfp-bottom-bar {
  width: 600px;
  left: 50%;
  margin-left: -300px;
  margin-top: 5px;
  padding-bottom: 5px; }
.mfp-ie7 .mfp-container {
  padding: 0; }
.mfp-ie7 .mfp-content {
  padding-top: 44px; }
.mfp-ie7 .mfp-close {
  top: 0;
  right: 0;
  padding-top: 0; }



/* ------ Content ------ */

.body-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* ------ Buttons ------ */

.hs-button, .cta-button, .line-button-color, .action-button, .line-button-white, .solid-button, .solid-button-yellow, div.full-width-cta, button.full-width-cta {
     font-size: 1.15em;
    font-weight: 700;
    text-align: center;
    border-radius: 30px;
  -webkit-border-radius: 30px;
  font-family: proxima-nova, "Helvetica", "Arial", sans-serif;
   cursor: pointer;
}

.hs-button, .cta-button {
    background-color: var(--espark-blue);
    padding: 0.55em 1.5em;
    display: block;
}

.line-button-color, .line-button-white{
  background-color: transparent;
}

.line-button-color {
    border: 2px solid var(--espark-blue);
    color: var(--espark-blue);
    padding: 0.45em 1.0em;
}

.line-button-color:hover {
    cursor: pointer;
    background-color: var(--espark-blue);
    color: #fff;
    border-color: var(--espark-blue);
    text-decoration: none;
}

.line-button-color i{
  vertical-align: middle;
  font-size: 0.85em;
}

.action-button{
  padding: 0.35em 1.0em;
  background-color: var(--light-grey);
  color: var(--dark-grey);
  border: none;
  font-size: 1.0em;
}

.action-button:hover, .action-button:focus{
  background-color: var(--light-medium-grey);
  outline: none;
}


.line-button-white{
    border: 2px solid #fff;
    color: #fff;
    padding: 0.45em 1.5em;
}

.line-button-white:hover{
    background-color: #fff;
    color: var(--espark-blue);
  cursor: pointer;
    text-decoration: none;
}

.solid-button{
    border: 0px;
    background-color: var(--espark-blue);
    color: #fff;
    padding: 0.55em 1.0em;
    border-radius: 30px;
}

.solid-button-yellow{
    border: 0px;
    background-color: var(--yellow-base);
    color: #fff;
    padding: 0.55em 1.0em;
    border-radius: 30px;
}

div.full-width-cta, button.full-width-cta{
    border: 0;
    max-width: 100%;
    background-color: var(--espark-blue);
    color: #fff;
    padding: 0.55em 1.0em;
    width: 100%;
}

div.full-width-cta a, button.full-width-cta a{
    color: #fff;
}

div.full-width-cta a:hover, button.full-width-cta a:hover{
    text-decoration: none;
}

.hs-button:hover, .hs-button:focus, .cta-button:hover, .cta-button:focus, .solid-button:hover, .solid-button:focus, div.full-width-cta:hover, button.full-width-cta:hover {
    background-color: var(--espark-blue-hover);
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
}

.solid-button-yellow:hover, .solid-button-yellow:focus {
    background-color: var(--orange-medium);
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
}

.wider-button{
  padding: 12px 3.0em !Important;
  font-size: 1.15em !important;
}

.line-button-color.wider-button{
  padding: 10px 3.0em;
}



/* ------ Forms ------ */

/***************************/
 /* Form Box */
 /***************************/
 
 .form-box{
    background: #fff;
    padding: 3%;
    border: 1px solid var(--espark-light-grey);
    line-height: 1.6em;
    z-index: 900;
 }
 
.form-box .hs-form fieldset {
    max-width: 1000px;
}

.form-box .hs-form fieldset.form-columns-1 .hs-input{
    width: 100%;
}


.form-box h3.form-title, .form-left h3.form-title{
    text-transform: none;
    letter-spacing: 0;
    text-align: center;
    line-height: 1.6em;
    margin-bottom: 24px;
 }

.form-box .hs-dependent-field{
  margin-top: 20px;
}
 
 .form-box label,  .form-left label{
     font-weight: 600;
 }
 
 .form-box input, .form-box textarea, .form-box select{
     background: var(--espark-light-grey);
 }
 
.form-left input, .form-left textarea, .form-left select{
     background: #fff;
    width: 100%;
 }
 

textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], select{
    padding: 10px !important;
}
 
  .form-box input, .form-box textarea, .form-box select,  .form-left input, .form-left textarea, .form-left select{
     border: 1px solid #e2e2e2;
     border-radius: 4px;
     font-size: 1.0em;
     margin: 2px auto 12px;
    font-family: proxima-nova, "Helvetica", "Arial", sans-serif;
 }

.form-box input, .form-box textarea, .form-box select, .form-left textarea, .form-left select{
    width: 100%;
 }

.form-box li.hs-form-radio label.hs-form-radio-display input{
  width: auto !important;
}

 .form-box select, .form-left select{
     height: 40px;
 }
 
 input[type="file" i] {
    width: 100%;
   padding: 10px 0 10px 8px;
   color: #000;
}

.form-box label.hs-form-radio-display span{
  padding-left: 10px;
}

 
 .form-box .hs-button.primary.large,  .form-left .hs-button.primary.large{
   border-radius: 4px;
    -webkit-border-radius: 4px;
    font-family: proxima-nova, "Helvetica", "Arial", sans-serif;
    font-size: 16px;
    font-weight: 700;
    background-color: var(--espark-blue);
    color: #fff;
    padding: 0.75em 1.25em;
    border: 0;
     width: auto;
 }

.form-left .hs_submit.hs-submit{
  float: left;
}
  
 
   .form-box .hs-button.primary.large:hover, .form-left .hs-button.primary.large:hover{
    background-color: var(--espark-blue-hover);
    color: #fff;
 }
 
.form-box.small-button .hs-button.primary.large{
  width: initial;
  padding: 0.75em 4.0em;
}
 
  .form-box .hs-button.primary.large:focus, .form-left .hs-button.primary.large:focus {outline:0;}  
  
   .form-box ul.hs-error-msgs.inputs-list, .form-left ul.hs-error-msgs.inputs-list{
    list-style: none;
    margin-top: 0px;
    color: var(--red);
    font-weight: 700;
    padding-left: 0px;
    font-size: smaller;
    margin-top: -10px;
 }

span.hs-form-required{
  margin-left: 0px !important;
}
 
.form-box div.hs-richtext h4{
    font-weight: 700;
    margin-bottom: 10px;
  margin-top: 20px;
}

.form-box div.hs-richtext h4.first{
margin-top: 0px;
}

ul.inputs-list.multi-container, ul.inputs-list{
  list-style: none;
  padding-left: 0px;
}

li.hs-form-checkbox{
  display: inline-block;
  padding-right: 5%;
}

li.hs-form-checkbox label span{
  margin-left: 8px;
  font-weight: 400;
}

.submitted-message{
  font-family: proxima-nova, "Helvetica", "Arial", sans-serif;
  color: var(--body-copy);
}

  
 /***************************/
 /* Form No Box */
 /***************************/
 
 .form-left{
    line-height: 1.6em;
    z-index: 900;
 }

.no-border{
    border: 0px;
 }
 
 
 .form-left .hs-button.primary.large{
 }

 /***************************/
 /* Cookies */
 /***************************/

div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner{
    max-width: 1200px !important;
    padding: 10px !important;
}
  
 
/*********************/
 /* PAGE FOOTER */
/*********************/


.footer-container-wrapper {
    background: var(--body-copy);
}

.footer-container-wrapper ~ .hbspt-form{
    display: none;
}

  .custom-footer-block{
        font-family: proxima-nova, "Helvetica", "Arial", sans-serif;
        max-width: 100%;
    }
    
    .custom-footer-nav a, .custom-footer-copyright a{
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.85em;
    }
    
    .custom-footer-nav a{
        display:block;
      opacity: 0.5;
    }
    
    .custom-footer-nav a:hover, .custom-footer-copyright a:hover, .custom-footer-nav a>span:hover{
        color: #fff;
            opacity: 1;
    }
    
    .custom-footer-block-links{
        border-bottom: 1px solid var(--espark-light-grey) ;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    
    .custom-footer-social{
        margin-top: 20px;
    }
    
    .custom-footer-social img{
        max-width: 40px;
        height: auto;
      opacity: 0.5;
    }

    .custom-footer-social img:hover{
      opacity: 1;
    }
    
    .custom-footer-copyright p{
        font-size: 0.85em;
        color: #fff;
        text-align: left;
    }
    
    .custom-footer-nav h5{
        color: var(--espark-light-grey) !important;
        font-weight: 700;
       font-size:1.0em;
        margin-bottom: 10px;
        margin-top: 0px;
    }

.desktop-hide{
  display: none !important;
}
    

/* ------ Mobile ------- */
/* Large desktop */
@media (min-width: 1200px) {}
     
/* Portrait tablet to landscape and desktop */

@media (min-width: 768px) and (max-width: 1000px) {
    .hs-menu-wrapper > ul > li > a {
        padding: 9px 0 9px 18px !important;
        font-size:11px;
    }
    

    .body-container-second, .body-container-max, .body-container-third, .body-container-max-tall, .body-container-second-tall {
        padding: 60px 5%;
        max-width: 100%;
    }
    
    .body-container-second-shorter, .body-container-second-short, .body-container-max-shorter, .body-container-third-shorter{
        padding: 40px 5%;
        max-width: 100%;
    }
    
    
    .long-testimonial-facts img{
    max-width: 180px !Important;
    height: auto;
    }
    
    .bottom-single-cta{
        padding: 60px 5%;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .header-container .page-center{
        padding: 0;
    }
    .custom_header_menu {
        margin: 0 !important;
    }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    body {
        padding-left: 0px;
        padding-right: 0px;
    }
    .header-container .hs-menu-flow-horizontal > ul > li,
    .body-container .hs-menu-flow-horizontal > ul > li{
         width:100%;
      text-align:center;
    }
  .header-container .hs-menu-flow-horizontal > ul > li a,
  .body-container .hs-menu-flow-horizontal > ul > li a{
      max-width:none !important;
    }

    .header-container .hs_cos_wrapper_type_logo {
    text-align:center;
    }
    
    .fixed-nav-bar {
      position: initial;
      top: initial;
      left: initial;
      border-top: none;
    }
        
    h1 {font-size: 2.1em;}
    
    h2 {font-size: 1.85em;}
  h4{font-size: 1.25em;}
    

    .body-container-max, .body-container-second, .body-container-third, .body-container-max-tall, .body-container-second-tall {
        padding: 60px 5%;
        max-width: 100%;
    }
    
        .body-container-second-shorter, .body-container-max-shorter, .body-container-third-shorter {
        padding: 40px 5%;
        max-width: 100%;
    }
    
        .body-container-second-shortest, .body-container-max-shortest, .body-container-third-shortest {
        padding: 10px 5%;
        max-width: 100%;
    }
    
    .custom_logo{
        text-align: center;
    }
    .hs-menu-wrapper > ul > li > a{
        padding: 9px 0 9px 10px;
    }
    
    .text-left, .text-right {
        text-align: center;
    }
    
    .bottom-single-cta, .bottom-dual-cta {
        padding: 60px 5%;
    }


    .grey-divider, .display-none{
        display: none !important;
    }
    
    
    .custom-footer-social{
       float: left !Important;
    }
    
    .mobile-hide{
        display: none !important;
    }
  
  .desktop-hide{
    display: initial !important;
  }
    
  .form-left .hs_submit.hs-submit{
  float: none;
}
  
  .bottom-20-mobile{
    margin-bottom: 20px;
  }
  
  .bottom-40-mobile{
    margin-bottom: 40px;
  }
    
}
#send-email[disabled]{
  background: #ccc;
  border-color: #ccc;
}
.a11y{
	position: absolute;
	z-index: -9999;
	width:1px;
	height: 1px;
	font-size: 0;
	border: 0;
	padding: 0;
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	clip: rect(0,0,0,0);
}

/* Button loader */
button.loading::after {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
  font-family: "Font Awesome 5 Pro";
  content: "\f1ce";
  margin-left: 5px;
  display: inline-block;
}

/* Page loader */
.es-loader .spinner {
  width: 70px;
  text-align: center;
}
@media(max-width:768px){
  .es-loader .spinner {
    margin: 15px auto 0 auto;
  }
}

.es-loader .spinner > div {
  width: 18px;
  height: 18px;
  background-color: #2862e5;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.es-loader .spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.es-loader .spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}


     
/* Landscape phones and down */
@media (max-width: 480px) {}

/* Iphone */
@media (max-width: 320px) {}