/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #000;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #0e9de5;
    color: #fff;
    text-shadow: none;
}

::selection {
    background: #0e9de5;
    color: #fff;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

* {
  box-sizing: border-box!important;
}
body {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background: #fff;
  color: #000;
  min-height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: normal;
  font-size: 20px;
  text-align: center;
}
#page-wrap{
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 0 20px;
}
#main-logo {
  height: 80px;
  margin-bottom: 30px;
  margin-top: 20px;
}
.title {
  font-size: 30px;
  margin-top: 0;
  margin-bottom: 20px;
  font-family: 'Poppins', sans-serif;
  color: #000;
}
.subtitle {
  font-size: 22px;
  margin-top: 0;
  margin-bottom: 0;
}
#mce-EMAIL {
  font-size: 22px;
  border-radius: 0!important;
  padding: 14px 18px;
  -webkit-appearance: none!important;
  border: none!important;
  display: flex;
  flex: 0.7;
}
#mc-embedded-subscribe {
  background-color: #e85255!important;
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex: 0.3;
  margin: 0!important;
  border-radius: 0!important;
  -webkit-appearance: none;
  border: none!important;
  font-size: 18px;
  color: #fff;
  padding: 0 18px;
}
#mc_embed_signup_scroll {
  text-align: center;
}
#mc-embedded-subscribe:hover {
  background-color: #cb781e!important;
  cursor: pointer;
}
#mc_embed_signup #mce-success-response {
  color: #fff;
}
#mc_embed_signup form{
  padding: 0!important;
}
.field-group{
  display: flex;
  flex: 1;
  flex-direction: row;
}
footer{
  padding-bottom: 20px;
  font-size: 16px;
}
footer a, footer a:hover, footer a:visited{
  color: #0e9de5;
  text-decoration: none;
}
footer .sub{
  margin-top: 14px;
  font-size: 14px;
}
.social-button{
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background-color: #0e9de5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  margin: 0 4px;
  font-size: 24px;
}
.social-button:hover{
  background-color: #005fa0;
  color: #fff;
  text-decoration: none;
}
.social-wrap{
  display: flex;
  flex-direction: row;
}
#download-links-wrapper{
  padding: 0!important;
}
#download-links-wrapper li{
  display: inline-block;
  margin: 10px;
}
.download-link img{
  height: 70px
}

@media only screen and (min-width : 320px) and (max-width : 480px), only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  body{
    padding: 20px;
    font-size: 18px;
    height: auto;
  }
  #main-logo{
    height: 50px
  }
  .title{
    font-size: 30px;
    line-height: 42px;
  }
  .subtitle {
    font-size: 20px;
    line-height: 30px;
  }
  .field-group{
    flex-direction: column;
  }
  .bound-button{
    display: block!important;
    height: 50px!important;
    padding: 14px 18px!important;
  }
  #download-links-wrapper li{
    display: inline-block;
    margin: 10px;
  }
  #download-links-wrapper li a img{
    width: 70%;
    height: auto;
  }
}