html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Boston, sans-serif;
}

@font-face {
  font-family: Boston;
  src: url(/fonts/Boston-Regular.ttf);
}

@font-face {
  font-family: Boston;
  src: url(/fonts/Boston-Bold.ttf);
  font-weight: bold;
}

a span, button span {
  position: relative;
  top: -8px;
}

.feature h2, .feature-bottom h2 { font-size: 30px; }
.feature-bottom h2 { margin-top: 30px; font-size: 30px; }
.section h2 { font-size: 25px; }
.section p, .feature-bottom p { font-size: 18px; }
.feature { text-align: center; }
.feature-bottom a { font-size: 17px; }

@media (min-width: 576px) {
  .feature h2, .feature-bottom h2 { margin-top: 0px; font-size: 32px; }
  .section h2 { font-size: 27px; }
  .section p, .feature-bottom p { font-size: 20px; }
}

@media (min-width: 768px) {
  .feature { text-align: left; } 
  .feature h2, .feature-bottom h2 { font-size: 35px; }
}

@media (min-width: 992px) { 
  .feature h2, .feature-bottom h2 { font-size: 40px; }
}

@media (min-width: 1200px) { 
  .feature h2, .feature-bottom h2 { font-size: 45px; }
}

@media (min-width: 1700px) { 
  .feature h2, .feature-bottom h2 { font-size: 50px; }
  .section h2 { font-size: 35px; }
  .section p, .feature-bottom p { font-size: 25px; }
}

nav.navbar {
  opacity: 0;
  position: fixed;
  z-index: 1000;
  background-color: #fff;
  width: 100%;
  border-radius: 0;
  box-shadow: 0 4px 4px #02234C15;
}

/* opacity: 0,
      left: '8px',
      position: 'fixed',
      zIndex: 1000,
      backgroundColor: '#fff',
      height: 50,
      width: '100%',
      padding: '10px 30px',
      boxShadow: '0 4px 4px ' + Styles.colors.black + '15'
} */

img.feature-iphone {
    margin-top: 50px;
    max-height: 100%;
    max-width: 100%;
}

div.feature {
  position: relative;
  background:
   linear-gradient(225deg, transparent 30%, #F7F7FA 30%),
   url("../images/pilot-dashboard-bcg.jpg") center/cover;
}

div.store-downloads img {
  height: 50px;
}

div.section {
  position: relative;
  z-index: 1;
}

div.feature-bottom {
  position: relative;
  z-index: 0;
  margin-top: -250px;
  padding-top: 300px;
  background: linear-gradient(177deg, #ffffff 40%, #0652FA 40%);
}

.puddle {
  /* content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1; */
  background-image: url("../images/puddle.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}