html {
    color: #eff3f4;
    background-color: #202729;
    font-size: 1em;
    line-height: 1.8;
    height: 100%;
}

::-moz-selection {
    background: #202729;
    text-shadow: none;
}

::selection {
    background: #111516;
    text-shadow: none;
}

body {
  padding-bottom: 10%;
}

body > .container {
  color: #eff3f4;
  width: 90%;
  margin: auto;
  font-family: 'Open Sans', sans-serif;
}

.header .logo {
  max-width: 180px;
}
.header .title {
  display: none;
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lead {
  /*font-size:1.6em;*/
}
.section .title {
  font-weight: 200;
  font-size: 2.4em;
  margin-bottom: 0;
}

.section .title sup {
  font-size: 0.45em;
}
.section-beta {
  width: 50%;
  max-width: 640px;
  flex: 1;
}

.section,
.footer {
  text-align: center;
}

.footer {
  color: #b4bfbb;
  background: #111516;
  position: fixed;
  bottom: 0;
  left:0;
  width:94%;
  padding: 3%;
}

.footer .wrapper {
  position: relative;
}

.footer p {
  opacity: 0.5;
  margin:0;
  font-size: 0.8em;
  line-height: 1.2em;
  font-style: italic;
  width: 99.9%;
}


/* Input */
/* form starting stylings ------------------------------- */
.group 			  {
  position:relative;
  width: 68%;
  margin: 70px auto;
}
input {
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  background: transparent;
  width: 100%;
}
input:focus { outline:none; }

.subscribe {
  background-image:url('../img/arrow-right.svg');
  background-size: contain;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 5px;
  top: 10px;
}

#mc_embed_signup label {
  font-weight: 300;
  line-height: 1em;
  font-size: 0.8em;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:13px;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
}

#mc_embed_signup input:focus ~ label,
#mc_embed_signup input:valid ~ label 		{
  top:-20px;
  font-size:14px;
  color:#6fd09a;
}

.bar 	{
  position:relative;
  display:block;
}
.bar:before,
.bar:after 	{
  content:'';
  height:2px;
  width:50%;
  bottom:1px;
  position:absolute;
  background:#6fd09a;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%;
}

@media (max-width: 1040px) {
  .group {
    width: 100%;
  }
  .section-beta .lead br {
    display: none;
  }
}

@media (max-width: 960px) {
  .section-beta {
    max-width: 70%;
  }
}

@media (max-width: 720px) {
  .header h1 {
    text-align: center;
  }
  .section-beta {
    max-width: 80%;
  }
}