body{ background-color: #F9F8F6; text-align: center;}

h1, h2 { font-weight: 400; }

h1 b, h2 b { font-weight: 800; }

h1 span.highlight { padding: 0 14px 0 14px; background-color: #D8FB50; }

.hero{ height: 100vh; max-height: 850px;}

.nav {
  width: 100%;
  padding: 40px 0;
}

.gray {
  padding: 80px 0;
  background-color: #EEE; 
}

.list {  padding: 80px 0;}
.list .row{ margin-bottom: 40px; }
.list .row h4{ font-weight: 300; padding-top: 10px;}

.logo{ float: center;}
.login{ display: none;}

.logo img {max-width: 150px;}

.hero_img {text-align: center;}
.hero_img img{ max-width: 80%;}

.one-half.column { width: 100%;}
.four.columns { width: 100%;}
.circle {
        border-radius: 50%;
        width: 38px;
        height: 38px;
        padding: 10px;
        border: 3px solid #000;
        color: #000;
        text-align: center;
        font: 32px Inter, sans-serif;
        float: left;
        margin-right: 20px;
      }
.number{ width: 100%; }
.steps{ width: 100%;}
.steps h2{ padding-top: 8px;}
/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {
  #background {
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100vh;
    max-height: 850px;
    background-color: #131313; 
    }
  .logo{ float: left; }
  .login{ display: none; float: right; margin-top: 0;}
  .one-half.column { width: 48%;}
  .four.columns { width: 30.6666666667%; }
  body{ text-align: left;}
}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

button a, button a:visited {
    color: #D8FB50 !important;
    text-decoration: none;
}