@font-face { 
  font-family:'Main';
  font-weight:400;
  src:url('./fonts/Lat.woff2') format('woff2');
  font-display:swap;
} 
@font-face { 
  font-family:'Main';
  font-weight:600;
  src:url('./fonts/LatB.woff2') format('woff2');
  font-display:swap;
} 
  body {  
    line-height:1.15;
  }  
@media screen and (min-width: 768px){     
  body {  
    line-height:1.15;
  }  
}  
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    outline: none; 
    max-width: 100%;
} 

@media screen and (min-width: 768px){ 
  html { 
    line-height: 1.15; 
    -webkit-text-size-adjust: 100%; 
    scroll-behavior: smooth!important;
  } 
}     

html { 
    line-height: 1.15;
} 

@media screen and (min-width: 768px){ 
  body { 
    font-family: main,Arial,sans-serif; 
    font-weight: 400; 
    font-size: 20px; 
    color: #175e92; 
    text-align: center; 
    counter-reset: steps offers; 
    line-height: 1.4; 
    letter-spacing: .2px;
  } 

  body { 
    display: grid; 
    grid-template-columns: 1fr repeat(6,minmax(100px,200px)) 1fr; 
    min-height: 100vh;
  } 
}     

body { 
    font-family: 'Main',Arial,sans-serif; 
    font-weight: 400; 
    font-size: 18px; 
    color: #085288; 
    text-align: center; 
    line-height: 1.4; 
    letter-spacing: .2px;
} 

@media (min-width: 769px){ 
  body { 
    display: grid; 
    grid-template-columns: 1fr repeat(6,minmax(100px,200px)) 1fr; 
    min-height: 100vh;
  } 
}     

@media screen and (min-width: 768px){ 
  body:before,#rewards:before { 
    content: ""; 
    position: absolute; 
    z-index: -1; 
    top: 83px; 
    right: 0; 
    width: 35vh; 
    opacity: .03; 
    height: 55vh; 
    background: url(./images/favicon.svg) no-repeat 0 0; 
    background-size: cover;
  } 

  header { 
    width: 100%; 
    position: relative;
  } 

  header { 
    background: #17629b; 
    z-index: 100; 
    background: linear-gradient(295deg,#1d83c0,#005eb8); 
    overflow: hidden;
  } 

  header { 
    grid-column: 1/9;
  } 

  header { 
    z-index: 9999; 
    box-shadow: 0 5px 20px #00000040; 
    grid-row: 1;
  } 
}     

header { 
    background: #17629B; 
    background: linear-gradient(295deg,#1d83c0,#005eb8); 
    width: 100%; 
    overflow: hidden;
} 

@media (min-width: 769px){ 
  header { 
    grid-row: 1; 
    position: fixed; 
    grid-column: 1/9;
  } 
}     

@media screen and (min-width: 768px){ 
  section { 
    width: 100%; 
    position: relative;
  } 

  section { 
    padding: 40px 0;
  } 

  section { 
    grid-column: 1/9;
  } 
}     

@media (min-width: 769px){ 
  section { 
    grid-column: 1/9;
  } 
}     

@media screen and (min-width: 768px){ 
  #top { 
    overflow: hidden; 
    font-family: Arial,sans-serif; 
    padding: 0;
  } 
}     

#top { 
    padding: 0; 
    overflow: hidden;
} 

@media (min-width: 769px){ 
  #top { 
    grid-column: 2/8; 
    grid-row: 2; 
    margin-top: 70px;
  } 
}     

@media screen and (min-width: 768px){ 
  #top  { 
    grid-column: 2/8; 
    margin-top: 70px;
  } 

  #intro { 
    padding: 0;
  } 

  #intro { 
    padding-top: 0;
  } 
}     

#intro { 
    padding: 0; 
    overflow: hidden;
} 

@media (min-width: 769px){ 
  #intro { 
    grid-column: 2/8; 
    grid-row: 3; 
    padding: 0 calc(50% - 400px) 20px;
  } 
}     

@media screen and (min-width: 768px){ 
  #intro  { 
    grid-column: 2/8; 
    grid-row: 3; 
    padding: 0 calc(50% - 400px) 70px;
  } 

  #hero { 
    width: 100%; 
    padding: 0; 
    background-repeat: no-repeat; 
    background-position: 50% 50%; 
    background-size: contain; 
    height: 100vw; 
    max-width: 500px; 
    margin: 0 auto; 
    max-height: 500px;
  } 
}     

@media (min-width: 769px){ 
  #hero { 
    background: url('./images/desktop.svg') no-repeat 50% 50%; 
    background-size: contain; 
    grid-column: 2/6; 
    grid-row: 4/6; 
    margin: 0; 
    margin-right: -40px; 
    height: 660px; 
    opacity: .7; 
    max-width: none; 
    max-height: none;
  } 
}     

@media screen and (min-width: 768px){ 
  #hero  { 
    grid-column: 2/6; 
    grid-row: 4/6; 
    margin: 0; 
    margin-right: -40px; 
    height: 660px; 
    opacity: .7; 
    max-width: none; 
    max-height: none;
  } 

  #signup { 
    padding: 0; 
    margin: 30px 0 40px;
  } 

  #signup { 
    grid-column: 5/8; 
    grid-row: 4; 
    padding: 0; 
    overflow: visible; 
    margin: 0;
  } 
}     

@media (min-width: 769px){ 
  #signup { 
    grid-column: 5/8; 
    grid-row: 4; 
    padding: 0; 
    margin: 0;
  } 
}     

@media screen and (min-width: 768px){ 
  #benefits { 
    padding: 0;
  } 

  #benefits { 
    grid-column: 6/8; 
    grid-row: 5; 
    padding: 0;
  } 

  #submit, #faqs > ul > li::after, #steps ol li::after,.more:after,.client .button,#benefits:after, #users h3::after { 
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHN0eWxlPSdmaWxsOiNlNmY0ZmZhMycgd2lkdGg9JzQ0NC44JyBoZWlnaHQ9JzQ0NC44Jz48cGF0aCBkPSdNMzUyIDE5Ni43bC0xODYtMTg2QTM0IDM0IDAgMCAwIDE0MC4yIDBhMzQgMzQgMCAwIDAtMjUuNyAxMC44TDkyLjggMzIuM0EzNSAzNSAwIDAgMCA4Mi4yIDU4YzAgMTAgMy41IDE4LjYgMTAuNiAyNmwxMzguOCAxMzguNUw5Mi44IDM2MS4yYTM1IDM1IDAgMCAwLTEwLjYgMjUuN2MwIDEwIDMuNSAxOC42IDEwLjYgMjZsMjEuNyAyMS40YTM1IDM1IDAgMCAwIDI1LjcgMTAuNiAzNSAzNSAwIDAgMCAyNS43LTEwLjZsMTg2LTE4NmM3LTcuNCAxMC42LTE2IDEwLjYtMjZhMzUgMzUgMCAwIDAtMTAuNi0yNS43eicvPjwvc3ZnPg==); 
    background-repeat: no-repeat;
    cursor: pointer;
  } 

  #benefits:after { 
    display: none;
  } 

  #rewards { 
    background: #196aa4; 
    position: relative; 
    margin-top: 80px; 
    background: linear-gradient(145deg,#1c85c2,#005eb8); 
    padding: 60px 0 90px;
  } 

  #rewards { 
    grid-column: 1/9; 
    grid-row: 6; 
    margin-top: 60px; 
    padding: 160px 0 140px;
  } 

  #rewards:before { 
    height: 500px; 
    width: 300px;
  } 

  #steps { 
    padding: 40px 15px 0; 
    background: #ddeffd; 
    grid-row: 8;
  } 

  #steps { 
    padding: 80px 0 120px; 
    margin-bottom: 60px; 
    grid-row: 7;
  } 

  #faqs { 
    background: #ddeffd; 
    padding-top: 0;
  } 

  #faqs { 
    grid-column: 2/6; 
    grid-row: 9; 
    padding: 100px 30px; 
    background: 0 0;
  } 

  #faqs:after { 
    position: absolute; 
    bottom: -6vw; 
    left: -2%; 
    width: 102%; 
    z-index: 1;
  } 

  #users { 
    padding-top: 80px;
  } 

  #users { 
    grid-column: 1/9; 
    grid-row: 10; 
    grid-template-columns: 1fr minmax(200px,700px) minmax(400px,500px) 1fr; 
    display: grid; 
    align-items: start; 
    background: #f9f9f9; 
    padding: 130px 0; 
    margin: 0 0 90px;
  } 

  #secure { 
    background: #fff7e6; 
    color: #7d7d7d;
  } 

  #secure { 
    grid-column: 6/8; 
    grid-row: 9; 
    border-radius: 20px; 
    background: 0 0; 
    margin-top: 35px;
  } 

  #us { 
    padding: 50px 20px; 
    text-align: left;
  } 

  #us { 
    grid-column: 2/6; 
    grid-row: 11;
  } 

  #charity { 
    padding: 50px 20px;
  } 

  #charity { 
    grid-column: 6/8; 
    grid-row: 11; 
    border-radius: 50px;
  } 

  #end { 
    padding: 0;
  } 

  #end { 
    grid-row: 12;
  } 

  footer { 
    width: 100%; 
    position: relative;
  } 

  footer { 
    padding: 20px 15px 50px; 
    background: rgb(24 98 155); 
    width: 100%; 
    color: #ffffffa3;
  } 

  footer { 
    grid-column: 1/9;
  } 

  footer { 
    padding: 30px calc(50% - 495px) 50px; 
    margin-top: 100px; 
    grid-row: 100;
  } 
}     

@media (min-width: 769px){ 
  footer { 
    grid-column: 1/9;
  } 
}     

@media screen and (min-width: 768px){ 
  a { 
    text-decoration: none; 
    background-color: transparent; 
    cursor: pointer;
  } 

  .logo { 
    height: 40px; 
    position: relative;
  } 

  .logo { 
    float: left; 
    margin: 10px;
  } 
}     

.logo { 
    height: 40px; 
    float: left; 
    margin: 10px;
} 

@media screen and (min-width: 768px){ 
  header .logo  { 
    left: 0; 
    z-index: -1; 
    padding-left: calc(50% - 640px);
  } 

  .hamburger { 
    font-family: Arial,sans-serif; 
    color: #ffffffbf; 
    font-size: 50px; 
    line-height: 30px; 
    margin: 7px; 
    padding: 8px; 
    background: rgb(255 255 255/17%); 
    position: absolute; 
    height: 45px; 
    right: 0; 
    z-index: 5;
  } 
}     

.hamburger { 
    font-family: Arial,sans-serif; 
    color: #ffffffbf; 
    line-height: 30px; 
    margin: 7px; 
    padding: 8px; 
    background: #ffffff2b; 
    position: absolute; 
    height: 45px; 
    right: 0; 
    z-index: 5;
} 

@media screen and (min-width: 768px){ 
  body:not(.legal) .hamburger  { 
    display: none;
  } 

  #top-menu { 
    position: fixed; 
    background: #18629beb; 
    background: linear-gradient(158deg,#206bc0,#6ca7df); 
    right: 0; 
    top: 0; 
    z-index: 1000; 
    padding: 55px 0 20px 20px; 
    height: 100vh; 
    box-shadow: -5px 0 15px #00000061; 
    display: block!important; 
    margin-right: -100vw; 
    transition: margin .5s cubic-bezier(.22,.61,.36,1); 
    will-change: transform;
  } 

  #top-menu { 
    position: initial; 
    height: auto; 
    box-shadow: none; 
    background: 0 0; 
    padding: 5px 30px; 
    float: right; 
    overflow: hidden; 
    margin-right: 0;
  } 
}     

#top-menu { 
    display: none;
} 

#top .rating  { 
    float: left; 
    padding: 15px; 
    max-width: 40%; 
    line-height: 0.6;
} 

#top p  { 
    background: url('./images/ES.png') no-repeat 100% 50%; 
    background-size: 32px; 
    padding: 20px; 
    font-size: .6rem; 
    text-transform: uppercase; 
    float: right; 
    margin-right: 20px; 
    padding-right: 40px; 
    max-width: 50%; 
    letter-spacing: 1.3px; 
    text-align: right; 
    line-height: 1.1;
} 

@media screen and (min-width: 768px){ 
  h1 { 
    font-weight: 600;
  } 

  h1 { 
    text-align: left; 
    font-size: 2.4rem; 
    line-height: 1.15; 
    padding: 20px 30px 30px; 
    letter-spacing: -.04rem; 
    color: #1f609c; 
    background: linear-gradient(115deg,#2793e6,#0065a0); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
  } 
}     

h1 { 
    text-align: left; 
    font-size: 2.4rem; 
    line-height: 1.1; 
    padding: 15px 30px 25px; 
    letter-spacing: -.04rem; 
    color: #1f8bda;
} 

@media screen and (min-width: 768px){ 
  h1  { 
    text-align: center; 
    font-size: 3.4rem;
  } 
}     

#intro p  { 
    text-align: left; 
    font-size: 90%; 
    color: #135990; 
    padding: 0 30px; 
    margin-bottom: 20px;
} 

@media screen and (min-width: 768px){ 
  #intro p  { 
    text-align: center; 
    font-size: 1rem; 
    margin: 20px 0 30px;
  } 

  #signup #fog  { 
    background: #4f5461f5; 
    opacity: 0; 
    will-change: opacity; 
    transition: opacity .3s;
  } 

  #form { 
    border-radius: 10px; 
    z-index: 102; 
    width: 94%; 
    margin-left: 3%; 
    color: #ffffffad; 
    background: #177fc1; 
    background: linear-gradient(359deg,#18629b,#1e88c5); 
    padding: 20px 0; 
    box-shadow: 0 -2px 12px 0 #002b4899; 
    will-change: transform; 
    transform: translateZ(0);
  } 

  #form { 
    position: relative; 
    animation: none; 
    transition: transform .5s ease-in-out; 
    border-radius: 10px; 
    border-top: none; 
    background: #1b71ac; 
    margin: 0; 
    padding: 20px; 
    max-width: 450px; 
    float: right; 
    background: linear-gradient(308deg,#18629b,#1e88c5);
  } 

  ul { 
    text-align: left;
  } 

  ul { 
    list-style-type: none;
  } 

  #benefits ul  { 
    margin: 50px 25px;
  } 

  #benefits ul  { 
    margin: 30px 0 0 10px;
  } 

  #r { 
    position: absolute; 
    top: 0;
  } 

  .wave { 
    position: absolute; 
    left: 0; 
    width: 100%; 
    top: -10px; 
    height: 30px; 
    fill: #fff;
  } 

  .wave { 
    height: 60px; 
    width: 100%;
  } 

  h2 { 
    font-weight: 600;
  } 

  h2 { 
    padding: 30px 20px; 
    font-size: 2.2rem; 
    line-height: 1.2; 
    text-align: center;
  } 

  h2 { 
    font-size: 2.3rem; 
    padding: 30px 15px; 
    display: table; 
    margin: 30px auto; 
    z-index: 1; 
    position: relative;
  } 

  #rewards h2  { 
    color: #fffdf4; 
    margin: 0 auto;
  } 

  #rewards h2  { 
    margin: 20px auto 40px;
  } 

  h2 > svg ,h2:before { 
    float: left;
  } 

  #rewards ul  { 
    padding: 0 25px; 
    margin-top: -10px;
  } 

  #rewards ul  { 
    display: grid; 
    grid-template-columns: 1fr repeat(6,minmax(50px,200px)) 1fr; 
    padding: 0;
  } 

  .wave:last-child { 
    transform: rotate(180deg); 
    top: auto; 
    bottom: -10px; 
    fill: #ddeffd;
  } 

  #h { 
    position: absolute; 
    top: 0;
  } 

  #steps h2  { 
    margin-bottom: 50px; 
    margin-top: 10px; 
    text-shadow: 0 0 10px #ddeffd;
  } 

  #benefits ul li::before,#terms_box.checked:before, #secure ul li::before, #steps h2::before, #offers .client ul li::before,.checkmark { 
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzOTEgMzkxJz48Y2lyY2xlIGN4PScxOTUnIGN5PScxOTUnIHI9JzE5NScgc3R5bGU9J2ZpbGw6IzRmYTMwNScvPjxwYXRoIGQ9J00zMjguOSwxNDcuMWMtMi44LTEuNi01MS44LTU1LjMtNTQuOS01MS4yLTguMi0yLjEtOTkuNCw5OC45LTEwNS40LDEwMS42LTcuOC0zLjQtMzYuOS00OC42LTQ5LjctMzdzLTYyLjMsNDkuMS00OC42LDYxLjNjNi4yLDUuNiw5MC4xLDk2LjcsOTguMyw5NC43LDguMywyLDE1NC4yLTE1My45LDE2MC4zLTE1Ni43QTksOSwwLDAsMCwzMjguOSwxNDcuMVonIHN0eWxlPSdmaWxsOiNmZmYnLz48L3N2Zz4=);
  } 

  ol { 
    text-align: left;
  } 

  #steps ol  { 
    list-style-type: none; 
    position: relative; 
    padding-left: 4px; 
    max-width: 400px; 
    margin: 0 auto;
  } 

  #steps ol  { 
    border-left: none; 
    border-top: dotted 5px #97c1e2; 
    padding-top: 30px; 
    width: 100%; 
    max-width: 1300px; 
    margin: 0 auto; 
    display: grid; 
    grid-auto-flow: column; 
    align-items: stretch;
  } 

  small { 
    font-size: 80%;
  } 

  #steps > small  { 
    display: block; 
    padding: 20px; 
    font-size: .9rem;
  } 

  #steps .wave:last-child  { 
    fill: #ddeffd; 
    transform: none; 
    bottom: -30px;
  } 

  #faqs h2  { 
    margin: 0; 
    text-align: left;
  } 

  #faqs h2::before { 
    content: "?"; 
    font-size: 60px; 
    font-weight: 600; 
    border-radius: 50%; 
    background: #195e92; 
    display: block; 
    width: 82px; 
    height: 82px; 
    background: linear-gradient(137deg,#1e84c1,#008fff); 
    color: #fff; 
    margin: 20px auto; 
    line-height: 1.35; 
    text-align: center;
  } 

  #faqs h2::before { 
    margin-top: -10px; 
    margin-right: 20px;
  } 

  #faqs ul  { 
    padding: 0 3%; 
    position: relative;
  } 

  #faqs ul::after { 
    content: ""; 
    width: 100%; 
    height: 120px; 
    position: absolute; 
    background: #daecf8; 
    bottom: -30px; 
    left: 0; 
    z-index: 2; 
    background: linear-gradient(to bottom,#fff0 0%,#daecf8 60%,#daecf8 100%);
  } 

  #faqs > ul::after { 
    background: linear-gradient(to bottom,#fff0 0%,#fff 60%,#fff 100%);
  } 

  .more { 
    background: rgb(255 255 255); 
    margin: 15px 0; 
    padding: 18px 15px; 
    display: table; 
    position: relative; 
    border-radius: 5px; 
    text-align: left; 
    box-shadow: 0 10px 20px 0 rgb(17 94 197/17%); 
    border-left: solid 5px #1378bf; 
    will-change: transform;
  } 

  .more { 
    font-weight: 600; 
    padding: 15px; 
    padding-right: 40px; 
    text-align: center; 
    position: relative; 
    background: #195e92; 
    color: #ffffffeb; 
    letter-spacing: 1px; 
    max-width: 300px; 
    display: block; 
    margin: 40px auto 10px; 
    border: none;
  } 

  .more { 
    cursor: pointer; 
    max-width: 400px;
  } 

  #show-faqs { 
    margin-left: 3%;
  } 

  #submit, #faqs > ul > li::after, #steps ol li::after, .more::after, .client .button, #benefits::after, #users h3::after { 
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHN0eWxlPSdmaWxsOiNlNmY0ZmZhMycgd2lkdGg9JzQ0NC44JyBoZWlnaHQ9JzQ0NC44Jz48cGF0aCBkPSdNMzUyIDE5Ni43bC0xODYtMTg2QTM0IDM0IDAgMCAwIDE0MC4yIDBhMzQgMzQgMCAwIDAtMjUuNyAxMC44TDkyLjggMzIuM0EzNSAzNSAwIDAgMCA4Mi4yIDU4YzAgMTAgMy41IDE4LjYgMTAuNiAyNmwxMzguOCAxMzguNUw5Mi44IDM2MS4yYTM1IDM1IDAgMCAwLTEwLjYgMjUuN2MwIDEwIDMuNSAxOC42IDEwLjYgMjZsMjEuNyAyMS40YTM1IDM1IDAgMCAwIDI1LjcgMTAuNiAzNSAzNSAwIDAgMCAyNS43LTEwLjZsMTg2LTE4NmM3LTcuNCAxMC42LTE2IDEwLjYtMjZhMzUgMzUgMCAwIDAtMTAuNi0yNS43eicvPjwvc3ZnPg==); 
    background-repeat: no-repeat;
  } 

  .more:after { 
    content: ""; 
    position: absolute; 
    display: block; 
    width: 25px; 
    height: 25px; 
    background-size: 25px; 
    background-position: 50% 50%; 
    z-index: 2; 
    right: 15px; 
    top: calc(50% - 11px); 
    transform: rotate(90deg); 
    opacity: .3;
  } 

  #users .wave  { 
    fill: #dceefd;
  } 

  #users .wave  { 
    fill: #fff;
  } 

  #users h2  { 
    float: left; 
    font-size: 2rem; 
    line-height: 1.2; 
    grid-column: 2/4; 
    grid-row: 1;
  } 

  #users #mapimg  { 
    position: relative; 
    min-height: 550px; 
    display: flex; 
    justify-content: center; 
    align-items: center;
  } 

  #users #mapimg  { 
    grid-column: 2; 
    grid-row: 2; 
    align-self: center; 
    margin-top: 0; 
    position: relative;
  } 

  h3 { 
    font-weight: 600;
  } 

  #users h3  { 
    margin: 50px 0 -20px; 
    opacity: 1; 
    color: #dae4eb;
  } 

  #users h3  { 
    grid-column: 3; 
    grid-row: 2; 
    margin-top: -10px;
  } 

  #users h3::after { 
    content: ""; 
    width: 30px; 
    height: 30px; 
    background-size: 30px; 
    display: inline-block; 
    top: 8px; 
    margin-left: 10px; 
    position: relative;
  } 

  #users h3::after { 
    display: none;
  } 

  #users ul  { 
    width: 100%; 
    white-space: nowrap; 
    overflow-x: scroll; 
    padding: 20px;
  } 

  #users ul  { 
    grid-column: 3; 
    grid-row: 2; 
    padding-left: 2%; 
    white-space: normal; 
    overflow: hidden;
  } 

  #secure h2  { 
    margin-bottom: 0;
  } 

  #secure svg  { 
    margin: 30px auto; 
    max-width: 200px; 
    display: block;
  } 

  #secure svg  { 
    height: 200px; 
    display: block; 
    margin: -10px auto 0;
  } 

  #secure ul  { 
    padding: 40px 30px; 
    list-style-type: none;
  } 

  img { 
    border-style: none; 
    display: block;
  } 

  #us .logo  { 
    opacity: .1; 
    margin: 10px auto; 
    padding: 0; 
    max-width: 88%; 
    height: 100px; 
    display: block; 
    float: none; 
    filter: invert(70%) hue-rotate(312deg);
  } 

  #us p  { 
    padding: 5px 10px;
  } 

  #charity svg  { 
    opacity: .7; 
    height: 150px; 
    margin-top: -15px;
  } 

  #charity h2  { 
    color: #be8986; 
    margin-top: 0;
  } 

  #charity p  { 
    padding: 40px; 
    color: #7d716b; 
    background: #facdb41a; 
    border-radius: 20px; 
    font-size: 1rem; 
    line-height: 1.6;
  } 

  #end a  { 
    width: auto; 
    display: block; 
    text-align: center; 
    margin: 0 auto; 
    padding: 20px 30px; 
    background: #b1d3ee; 
    font-weight: 600; 
    color: #005fa7; 
    position: relative; 
    text-decoration: underline;
  } 

  #end a  { 
    position: absolute; 
    right: 0; 
    border-radius: 25px 0 0 25px; 
    z-index: 1; 
    top: 0;
  } 

  footer .logo  { 
    width: 220px; 
    height: 50px;
  } 

  #to-top { 
    float: right; 
    padding: 7px; 
    opacity: .3; 
    border-radius: 50%; 
    background: #fff; 
    margin: 10px;
  } 

  footer ul  { 
    width: 100%; 
    padding: 10px 10px 20px; 
    overflow: hidden; 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    text-decoration: u;
  } 

  footer ul  { 
    float: right; 
    width: auto;
  } 

  footer .copyright  { 
    display: inline-block; 
    clear: both; 
    float: left; 
    margin: 0 20px;
  } 

  footer small  { 
    display: block; 
    margin-top: 10px;
  } 

  footer small  { 
    float: left; 
    margin-top: 3px; 
    margin-left: 20px;
  } 

  .logo img  { 
    height: 40px; 
    position: relative;
  } 

  #top-menu > *  { 
    margin: 10px 0; 
    padding: 15px 30px; 
    display: block; 
    text-align: right; 
    background: #5a98d7; 
    color: #ffffffeb; 
    border-radius: 25px 0 0 25px;
  } 

  #top-menu #close-menu  { 
    font-family: Arial,sans-serif; 
    font-size: 50px; 
    line-height: 28px; 
    padding: 10px; 
    width: 50px; 
    height: 48px; 
    display: block; 
    position: absolute; 
    top: 0; 
    right: 0; 
    border-radius: 2px; 
    margin-right: 8px; 
    text-align: center;
  } 

  #top-menu #close-menu  { 
    display: none;
  } 

  .join { 
    cursor: pointer;
  } 

  #top-menu .join  { 
    background: #4fa322;
  } 

  #top-menu .join  { 
    display: inline-flex; 
    padding: 5px 10px; 
    border-radius: 5px; 
    font-size: 90%; 
    cursor: pointer; 
    transition: background .2s; 
    align-items: center;
  } 

  #top-menu a  { 
    display: inline-flex; 
    padding: 5px 10px; 
    border-radius: 5px; 
    font-size: 90%; 
    cursor: pointer; 
    transition: background .2s; 
    align-items: center;
  } 

  #top-menu a  { 
    background: 0 0;
  } 

  #top-menu a:hover { 
    background: #ffffff38;
  } 

  #top-menu .smaller  { 
    font-size: 70%;
  } 

  #top .rating div  { 
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA5MDAgNjUxLjcnPjxwYXRoIGQ9J002NzcuMyAyNDcuN2MtMTMuNC00MS45LTIwMi0zMi4xLTIyNy44LTQyLjdDNDMwLjggMTgzLjkgMzgyLjggMS4xIDMzOC40IDFzLTkzIDE4Mi43LTExMS4xIDIwNGMtMjg2LjggMTYuNC0yOTEuMSAyOS4yLTY4LjUgMjExLjZDODYuMiA2OTMuOSA5NS41IDcwNCAzMzguNCA1NDcuNGMyNy41IDYuMSAxNzMuNCAxMjUuNSAyMDkuNCA5OS42UzUxNS45IDQ0NC41IDUxOCA0MTYuNmMxNC40LTI0LjMgMTcyLjgtMTI2LjcgMTU5LjMtMTY4Ljl6JyBmaWxsPScjZmZjMTA3Jy8+PC9zdmc+); 
    height: 15px; 
    width: 95px; 
    margin-bottom: 5px;
  } 
}     

#top .rating div  { 
    height: 15px; 
    margin-bottom: 7px;
} 

#top .rating div  { 
    height: 15px;
} 

@media screen and (min-width: 768px){ 
  #top .rating span  { 
    font-size: .6rem;
  } 
}     

#top .rating span  { 
    font-size: .6rem;
} 

@media screen and (min-width: 768px){ 
  b { 
    font-weight: 600;
  } 
}     

#intro p b  { 
    text-transform: uppercase; 
    display: inline-block; 
    padding: 3px 8px; 
    background: #e0f1f7; 
    border-radius: 10px; 
    font-weight: 600; 
    color: #5195da; 
    font-size: 1.1rem; 
    margin-top: 10px;
} 

@media screen and (min-width: 768px){ 
  #intro p b  { 
    font-size: 1.2rem;
  } 

  #form h2  { 
    color: #fff; 
    display: block; 
    border-radius: 50px; 
    width: 90%; 
    margin: 0 5% 20px; 
    font-size: 1.3rem; 
    padding: 5px 10px;
  } 

  #signup h2  { 
    animation: none; 
    background: 0 0; 
    font-weight: 600; 
    font-size: 1.7rem; 
    padding: 20px 20px 0; 
    margin: 0 0 30px; 
    border: none; 
    width: 100%; 
    border-radius: 10px 10px 0 0; 
    color: #fff; 
    text-shadow: 0 1px 10px #00000082; 
    cursor: default;
  } 

  #signup #form #fold  { 
    max-height: 400px; 
    padding-bottom: 0;
  } 

  #benefits ul li  { 
    margin: 18px 0; 
    position: relative; 
    padding-left: 30px;
  } 

  #benefits ul li::before, #secure ul li::before { 
    content: ""; 
    width: 22px; 
    height: 22px; 
    position: absolute; 
    left: 0;
  } 

  #benefits ul li::before, #terms_box.checked::before, #secure ul li::before, #steps h2::before, #offers .client ul li::before, .checkmark { 
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzOTEgMzkxJz48Y2lyY2xlIGN4PScxOTUnIGN5PScxOTUnIHI9JzE5NScgc3R5bGU9J2ZpbGw6IzRmYTMwNScvPjxwYXRoIGQ9J00zMjguOSwxNDcuMWMtMi44LTEuNi01MS44LTU1LjMtNTQuOS01MS4yLTguMi0yLjEtOTkuNCw5OC45LTEwNS40LDEwMS42LTcuOC0zLjQtMzYuOS00OC42LTQ5LjctMzdzLTYyLjMsNDkuMS00OC42LDYxLjNjNi4yLDUuNiw5MC4xLDk2LjcsOTguMyw5NC43LDguMywyLDE1NC4yLTE1My45LDE2MC4zLTE1Ni43QTksOSwwLDAsMCwzMjguOSwxNDcuMVonIHN0eWxlPSdmaWxsOiNmZmYnLz48L3N2Zz4=);
  } 

  h2 > svg  { 
    float: left;
  } 

  #rewards h2 svg  { 
    fill: #ffffff45; 
    width: 180px; 
    height: 180px; 
    display: block; 
    margin: -20px auto 30px;
  } 

  #rewards h2 svg  { 
    margin: -50px 20px 0 0; 
    transition: fill 1s;
  } 

  h2 small  { 
    display: table; 
    font-weight: 300; 
    font-size: .6em; 
    letter-spacing: .03rem; 
    line-height: 1.3; 
    padding: 10px 0; 
    border-top: solid 1px #ffffff38; 
    opacity: .7; 
    margin: 20px auto;
  } 

  #rewards h2 small  { 
    font-size: 1rem;
  } 

  #rewards ul li  { 
    font-size: .9em; 
    border-bottom: solid 1px #ffffff17; 
    padding: 25px 10px 30px; 
    min-height: 100px;
  } 

  #rewards ul li  { 
    text-align: center; 
    border: none;
  } 

  #rewards ul li:first-child  { 
    grid-column: 2/3;
  } 

  #rewards ul li:last-child  { 
    border: none;
  } 

  #steps ol li  { 
    position: relative; 
    margin-bottom: 16px; 
    padding: 30px; 
    border-radius: 15px; 
    text-align: left; 
    box-shadow: 0 10px 35px rgb(170 190 209/45%); 
    background: #fff; 
    font-size: 1.15rem; 
    min-height: 160px;
  } 

  #steps ol li  { 
    text-align: center; 
    transition: box-shadow .5s ease-in-out; 
    font-size: 85%;
  } 

  #steps ol li::before { 
    counter-increment: steps; 
    content: counter(steps); 
    color: #fff; 
    border-radius: 50%; 
    background: #4fa322; 
    line-height: 2.8rem; 
    font-size: 1.8rem; 
    width: 2.8rem; 
    height: 2.8rem; 
    text-align: center; 
    margin-right: 12px; 
    display: block; 
    position: absolute; 
    top: -6px; 
    left: -9px; 
    font-weight: 600;
  } 

  #steps ol li::before { 
    left: 40%; 
    top: -55px;
  } 

  #steps ol li::after { 
    content: " "; 
    position: absolute; 
    display: block; 
    height: 80px; 
    width: 80px; 
    clear: both; 
    background-size: contain; 
    bottom: -50px; 
    left: 40%; 
    transform: rotate(90deg); 
    z-index: 1;
  } 

  #steps ol li::after { 
    transform: none; 
    display: block; 
    font-weight: 600; 
    position: absolute; 
    top: 65px; 
    left: auto; 
    right: -2px;
  } 

  #steps ol li:hover { 
    box-shadow: 0 0 30px 5px #a7cde8;
  } 

  #steps ol li:not(:first-child)  { 
    margin-left: 15px;
  } 

  #steps ol li:last-child::after { 
    display: none;
  } 

  #faqs > ul > li  { 
    background: rgb(255 255 255); 
    margin: 15px 0; 
    padding: 18px 15px; 
    display: table; 
    position: relative; 
    border-radius: 5px; 
    text-align: left; 
    box-shadow: 0 10px 20px 0 rgb(17 94 197/17%); 
    border-left: solid 5px #1378bf; 
    will-change: transform;
  } 

  #faqs > ul > li  { 
    border-left: solid 5px #1378bf; 
    border-radius: 5px; 
    transition: all .5s;
  } 

  #faqs > ul > li::after { 
    content: ""; 
    background-size: 20px; 
    background-position: 50% 50%; 
    position: absolute; 
    right: 10px; 
    top: calc(50% - 10px); 
    width: 20px; 
    height: 20px;
  } 

  #faqs > ul > li:not(.visible):hover { 
    box-shadow: 0 10px 20px 0 #115ec557; 
    cursor: pointer;
  } 
}     

#faqs > ul > li:nth-of-type(n + 8)  { 
    display: none;
} 

@media screen and (min-width: 768px){ 
  #user-count { 
    display: block; 
    margin: 10px auto; 
    font-size: 2.4rem; 
    letter-spacing: 3px; 
    font-weight: 400;
  } 

  #user-count { 
    display: inline-block;
  } 

  #users #mapimg img  { 
    width: 96%; 
    max-height: 500px; 
    margin: 40px auto 0; 
    display: table; 
    opacity: .5;
  } 

  #users #mapimg img  { 
    max-height: 550px;
  } 

  #users #u1  { 
    top: 0; 
    left: calc(20% - 85px); 
    height: 171px; 
    width: 160px;
  } 

  #users #mapimg svg  { 
    position: absolute; 
    z-index: 1;
  } 

  #users #u2  { 
    bottom: 25%; 
    left: 4%; 
    width: 85px; 
    height: 100px;
  } 

  #users #u3  { 
    top: 62px; 
    right: 5%; 
    width: 120px; 
    height: 120px;
  } 

  #users #u4  { 
    bottom: 10px; 
    right: 10px; 
    width: 140px; 
    height: 130px;
  } 

  #users ul li  { 
    position: relative; 
    display: block; 
    margin: 20px 5px; 
    padding: 30px; 
    padding-top: 50px; 
    border-radius: 20px; 
    background: #fff; 
    font-size: .9rem; 
    box-shadow: 0 0 25px #003e6824; 
    border-bottom: solid 4px #dce7eb; 
    white-space: normal; 
    width: 80%; 
    display: inline-block; 
    vertical-align: top;
  } 

  #users ul li  { 
    margin: 10px 30px; 
    width: 93%;
  } 

  #top .rating div , #welcome .client small::before, #users ul li::before { 
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA5MDAgNjUxLjcnPjxwYXRoIGQ9J002NzcuMyAyNDcuN2MtMTMuNC00MS45LTIwMi0zMi4xLTIyNy44LTQyLjdDNDMwLjggMTgzLjkgMzgyLjggMS4xIDMzOC40IDFzLTkzIDE4Mi43LTExMS4xIDIwNGMtMjg2LjggMTYuNC0yOTEuMSAyOS4yLTY4LjUgMjExLjZDODYuMiA2OTMuOSA5NS41IDcwNCAzMzguNCA1NDcuNGMyNy41IDYuMSAxNzMuNCAxMjUuNSAyMDkuNCA5OS42UzUxNS45IDQ0NC41IDUxOCA0MTYuNmMxNC40LTI0LjMgMTcyLjgtMTI2LjcgMTU5LjMtMTY4Ljl6JyBmaWxsPScjZmZjMTA3Jy8+PC9zdmc+); 
    height: 15px; 
    width: 95px; 
    margin-bottom: 5px;
  } 

  #users ul li::before { 
    position: absolute; 
    content: "\1F464"; 
    text-indent: -25px; 
    opacity: .4; 
    top: 20px; 
    left: 40px; 
    width: 100px;
  } 

  #users ul li::after { 
    content: ""; 
    position: absolute; 
    left: -28px; 
    top: 30px; 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 30px 0 20px 30px; 
    border-color: #fff transparent transparent transparent;
  } 

  #top .rating div, #welcome .client small::before, #users ul li::before { 
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA5MDAgNjUxLjcnPjxwYXRoIGQ9J002NzcuMyAyNDcuN2MtMTMuNC00MS45LTIwMi0zMi4xLTIyNy44LTQyLjdDNDMwLjggMTgzLjkgMzgyLjggMS4xIDMzOC40IDFzLTkzIDE4Mi43LTExMS4xIDIwNGMtMjg2LjggMTYuNC0yOTEuMSAyOS4yLTY4LjUgMjExLjZDODYuMiA2OTMuOSA5NS41IDcwNCAzMzguNCA1NDcuNGMyNy41IDYuMSAxNzMuNCAxMjUuNSAyMDkuNCA5OS42UzUxNS45IDQ0NC41IDUxOCA0MTYuNmMxNC40LTI0LjMgMTcyLjgtMTI2LjcgMTU5LjMtMTY4Ljl6JyBmaWxsPScjZmZjMTA3Jy8+PC9zdmc+); 
    height: 15px; 
    width: 95px; 
    margin-bottom: 5px;
  } 

  #users ul li:last-child::before { 
    width: 92px;
  } 

  #secure ul li  { 
    padding-bottom: 20px; 
    padding-left: 30px; 
    position: relative;
  } 

  #us br  { 
    content: ""; 
    display: block; 
    margin-top: 15px;
  } 

  #charity br  { 
    content: ""; 
    display: block; 
    margin-top: 15px;
  } 

  #to-top svg  { 
    width: 40px; 
    height: 40px; 
    fill: #18629b; 
    display: block;
  } 

  footer ul li  { 
    margin: 15px 0; 
    color: #fff; 
    float: left; 
    margin-left: 20px; 
    width: calc(50% - 20px);
  } 

  footer ul li  { 
    display: inline-block; 
    margin: 15px; 
    width: auto; 
    cursor: pointer; 
    margin-top: 10px;
  } 

  footer ul li.join  { 
    background: #3fb500ba; 
    padding: 2px 10px; 
    border-radius: 5px; 
    margin-top: 13px; 
    line-height: 1.6;
  } 

  .nospam { 
    display: none;
  } 

  button { 
    font-size: 100%; 
    line-height: 1;
  } 

  #top .rating b  { 
    font-size: 1.5em; 
    font-family: main,Arial,sans-serif;
  } 

  input { 
    font-size: 100%; 
    line-height: 1;
  } 

  form input  { 
    font-family: main,Arial,sans-serif; 
    padding: 12px 20px; 
    width: 90%; 
    border-radius: 25px; 
    text-align: center; 
    outline: none; 
    border: none; 
    font-weight: 600; 
    cursor: text;
  } 

  #terms_box { 
    padding: 15px 5px; 
    display: inline-block; 
    color: #ffffff9e; 
    text-align: left; 
    font-family: Arial,sans-serif; 
    font-size: 80%; 
    z-index: 1; 
    position: relative;
  } 

  #terms_box:before { 
    content: " "; 
    height: 25px; 
    width: 25px; 
    background: #fff; 
    display: inline-block; 
    border-radius: 3px; 
    border: 2px solid #000; 
    font-size: 140%; 
    cursor: pointer; 
    margin-bottom: -8px; 
    margin-right: 5px;
  } 

  form input[type="submit"]  { 
    cursor: pointer;
  } 

  #submit { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    padding: 18px 30px 16px; 
    display: block; 
    background: #4fa322; 
    width: 90%; 
    border-radius: 50px; 
    color: #fff; 
    font-weight: 600; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    box-shadow: 0 0 15px 1px #00000029; 
    border-bottom: 2px solid #0000001c; 
    background-size: 25px; 
    background-position: 95% 55%; 
    margin: 10px auto;
  } 

  #rewards ul li svg  { 
    fill: #ffffff99; 
    float: left; 
    width: 80px; 
    height: 80px; 
    margin-top: -5px; 
    margin-right: 20px; 
    margin-bottom: 30px;
  } 

  #rewards ul li svg  { 
    float: none; 
    max-width: 100px; 
    height: 120px; 
    margin: 0; 
    width: 100%; 
    transition: fill .5s ease-in-out;
  } 

  #rewards ul li h3  { 
    font-size: 1.4rem; 
    margin: 5px 0; 
    color: #fffdf4; 
    letter-spacing: -.01em; 
    line-height: 1; 
    padding-bottom: 5px;
  } 

  #rewards ul li p  { 
    font-family: Arial,sans-serif; 
    font-weight: 400; 
    color: #ffffffa6; 
    line-height: 1.1; 
    letter-spacing: .6px;
  } 

  #steps li svg  { 
    float: right; 
    fill: #1e84c170; 
    height: 90px; 
    width: 90px; 
    margin-left: 10px; 
    margin-right: -10px; 
    position: relative; 
    margin-bottom: 5px;
  } 

  #steps ol li svg  { 
    float: none; 
    width: 100%; 
    margin: 20px 0;
  } 

  #steps ol li h3  { 
    margin-bottom: 15px; 
    line-height: 1.2; 
    margin-left: 3px; 
    font-size: 1.5rem; 
    background: linear-gradient(137deg,#1e84c1,#004c88); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
  } 

  #steps ol li h3  { 
    text-align: center;
  } 

  #faqs h3  { 
    cursor: pointer; 
    line-height: 1.2; 
    padding-left: 10px; 
    color: #125283; 
    z-index: 1; 
    position: relative; 
    padding-right: 30px; 
    font-size: 1.3rem; 
    -webkit-tap-highlight-color: transparent;
  } 

  #faqs h3  { 
    font-size: 1.2rem;
  } 

  #faqs h3::before { 
    content: "?"; 
    position: absolute; 
    left: -8px; 
    top: -1.5rem; 
    opacity: .03; 
    font-size: 3.5rem;
  } 

  #faqs > ul > li > div  { 
    padding: 15px; 
    display: none;
  } 

  #faqs > ul > li > div  { 
    font-size: 1.1rem; 
    line-height: 1.5;
  } 
}     

#faqs > ul > li > div  { 
    display: none;
} 

@media screen and (min-width: 768px){ 
  #user-count span  { 
    width: 2.3rem; 
    display: inline-block; 
    text-align: center; 
    line-height: 140%; 
    border-radius: .6rem; 
    margin-right: .2rem; 
    color: #fff; 
    background: #18629b; 
    background: linear-gradient(to bottom,#35aeff 0%,#3073a5 49%,#123d5f 50%,#1a639c 100%); 
    padding-left: .15rem;
  } 

  #users ul li em  { 
    font-weight: 600;
  } 

  footer ul li > *  { 
    border-top: solid 1px #ffffff14; 
    padding-top: 10px; 
    display: block; 
    line-height: 1.1;
  } 

  form svg  { 
    width: 15px; 
    height: 15px; 
    fill: #ffdc23ab; 
    vertical-align: sub; 
    stroke: #002643; 
    stroke-width: 3px; 
    margin-right: 5px;
  } 
}     

form svg  { 
    width: 15px; 
    height: 15px;
} 

@media screen and (min-width: 768px){ 
  #faqs ol  { 
    margin: 10px 0 10px 20px;
  } 

  #faqs > ul > li > div br  { 
    content: ""; 
    padding-top: 10px; 
    display: block;
  } 

  #faqs ol li  { 
    margin-bottom: 10px; 
    line-height: 1.3;
  } 
}     



@media screen and (max-width: 1237px){ 
  /* #top-menu .smaller,#top-menu .hd{
    display: none;
  } */
}     



@media (max-width: 1270px)  and (min-width: 768px ){

   header .logo {
      margin-bottom:0;
      width:20vw;
      position: absolute;
  }
   header .logo img{
    width: 100%;
  }
  
   #top-menu a:nth-last-child(-n+3) {
      display:none;
  }    
}


@media (max-width: 768px) {
  #hero {
      background: url(./images/mobile.svg) no-repeat 50% 50%;
      background-size: contain;
      width: 100%;
      padding: 0;
      height: 100vw;
      max-width: 500px;
      margin: 0 auto;
      max-height: 500px;
  }
}
@media (min-width: 768px) {
  #faqs>ul>li.visible>div {
    display: block;
}
  #signup.open form {
    position: fixed;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    transition: none;
}
section#faqs.open>ul>li {
  display: table;
}
section#faqs.open >ul:after {
  background: none;
}
}

  a {
      color: inherit;
  }


#signup.open form.fixed {
  animation:none;
  border-color:#18629b;
  background:linear-gradient(359deg,#18629b,#1e88c5)
}
#signup.open #form.fixed h2 {
  background:0 0;
  padding-top:8px;
  border-top:none;
  border-bottom:solid 1px #ffffff1c;
  font-weight:600;
  animation:none
}
#signup #fog,
#welcome #fog {
  background:#4f5461f5;
  opacity:0;
  will-change:opacity;
  transition:opacity .3s
}
#signup.open #fog,
#welcome #fog {
  position:fixed;
  width:100%;
  height:100%;
  opacity:1;
  top:0;
  left:0;
  z-index:101
}

#signup.open #fold {
  max-height:300px;
  padding-bottom:20px
}