* { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
img, fieldset { border: 0; }
img { max-width: 100%; vertical-align: middle; }
button { cursor: pointer; }

html { height: 100%; }

body {
  height: 100%;
  background-image: url(images/background.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
}

.logotype {
  display: block;
  margin: 0 auto;
}

.form-box {
  background-color: rgba(83, 71, 65, 0.6);
  width: 50%;
  margin: 0 auto;
  /* position: absolute; */
  /* bottom: 0; */
  /* left: 50%; */ 
  /* transform: translateX(-50%); */

  -moz-box-shadow: 0px 0px 50px rgba(0,0,0,0.6);
  -webkit-box-shadow: 0px 0px 50px rgba(0,0,0,0.6);
  box-shadow: 0px 0px 50px rgba(0,0,0,0.6);
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color:    #FFFFFF;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color:    #FFFFFF;
  opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color:    #FFFFFF;
  opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color:    #FFFFFF;
}
::-ms-input-placeholder { /* Microsoft Edge */
  color:    #FFFFFF;
}

.elements {
  display: block;
  margin: 2em auto 1em;
  width: 90%;
}

h1 {
  font-size: 3em;
  margin: .3em 0 .3em;
  text-align: center;
  font-weight: bold;
  font-style: italic;

  color: black;
  text-shadow:
  -1px -1px 0 #a1a1a1,
  1px -1px 0 #a1a1a1,
  -1px 1px 0 #a1a1a1,
  1px 1px 0 #a1a1a1;
}

.applications, .icons {
  list-style: none;
  width: 90%;
  margin: 0 auto;
  text-align: center;
}

.applications li {
  display: inline-block;
  font-size: 1.5em;
  margin: 0 1em;

  color: black;
  text-shadow:
  -1px -1px 0 #a1a1a1,
  1px -1px 0 #a1a1a1,
  -1px 1px 0 #a1a1a1,
  1px 1px 0 #a1a1a1;
}

.icons li {
  display: inline-block;
  margin-right: 6em;
}
.icons li:last-child {
  margin-right: 0em;
}

.applications li:first-child {
  margin-left: 0;
}

p.sign-up {
  color: white;
  font-size: 1.3em;
  text-align: center;
  margin-top: 1.2em;
  margin-bottom: 1em;
}

#signup-form {
  margin: 1em auto;
}

#signup-form fieldset {
  width: 80%;
  margin: auto;
  text-align: center;
  display: block;
  border: 0;
}

#signup-form #email #mce-EMAIL {
  background-color: black;
  color: white;
  font-size: 1.2em;
  padding: .5em;
  border: 0;
  width: 50%;
  margin: 0 0 0 2em;
  display: block;
  float: left;
}

#mc_embed_signup {
  text-align: center;
}

#mce-EMAIL {
  width: 280px;
  background-color: black;
  color: white;
  font-size: 1.2em;
  padding: .5em;
  border: 0;
  margin: 0;
  display: inline-block;
}

#mc-embedded-subscribe {
  width: 100px;
  color: white;
  background-color: #707070;
  border: 0;
  font-size: 1em;
  padding: .75em;
  font-weight: bold;
  font-style: italic;
  margin: 0;
  display: inline-block;
  text-align: center;
}

#signup-form #submit {
  border: 0;
  font-size: 1em;
  padding: .8em;
  font-weight: bold;
  font-style: italic;
  background-color: #9e0b0f;
  color: white;
  margin: 0;
  display: block;
}

#signup-form #submit:hover {
  background-color: black;
  cursor: pointer;
}

.slideways {
  display: block;
  margin: 1em auto 0;
}



@media (max-width: 38em) {
  body {
  }

  .form-box {
    width: 100%;
    position: absolute;
    bottom: 0;
  }

  h1 {
    font-size: 2em;
  }

  .applications li {
    font-size: 1.2em;
    margin: 0 .2em;
  }

  #signup-form fieldset {
    width: 100%;
  }

  #signup-form #email {
    width: 50%;
  }

  p.sign-up {
    margin: 1.2em 1em 1em;
  }

  #mce-EMAIL {
    width: 200px;
  }

  .icons {
    width: 70%;
  }
  .icons li {
    margin-right: 2em;
  }
}