/* Basic stuff */

html {
  font-family: "avenir", "helvetica neue", arial, sans-serif;
  margin: 0px;
  padding: 0px;
  background-color: #FCFAF3;
  }

body {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  overflow-x: hidden;
}

div.frame {
  width: 73%;
  padding: 0;
  margin: auto auto auto auto;
}

div#content {
  width: 550px;
  position: relative;
}

h1 {
  font-size: 70px;
  color: black;
  line-height: 103%;
  font-family: 'Abril Fatface', cursive;
  font-weight: 500;
  padding: 0px 0px 0px 0px;
  margin: 140px 0px 24px 0px;
  opacity: 0.75;
}

p {
  font-family: 'Activ Grotesk', sans-serif;
  color: b lack;
  font-size: 18px;
  font-weight: 300;
  line-height: 145%;
  width: 480px;
  margin: 10px 0px 14px 0px;
  padding: 0px 0px 0px 0px;
  opacity: 0.6;
}

em {
  font-style: normal;
  font-weight: 500;
}

form {position: relative; left: -5px;}

input {
  font-size: 16px;
  background-color: white;
  font-family: 'Activ Grotesk', sans-serif;
  font-weight: 100;
  margin-top: 10px;
  padding: 10px 10px 10px 15px;
  border: 1px solid #DEDCD5;
  border-radius: 50px;
}

input#submit {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 16px;
  background-color: #BAED66;
  border: 1px solid #BAED66;
  color: #6B8D32;
  padding: 10px 15px 10px 15px;
  margin: 0px 0px 0px 10px;

}

#spinner-1 {
  position: absolute;
  top: 0px;
  left: 600px;
  width: 200px;
}

#spinner-2 {
  position: absolute;
  top: 240px;
  left: 550px;
  width: 360px;
  opacity: 0.6;
  filter: blur(4px);
}

#spinner-3 {
  position: absolute;
  top: 490px;
  left: 340px;
  width: 180px;
}

#spinner-4 {
  position: absolute;
  top: 550px;
  left: 100px;
  width: 130px;
  opacity: 0.5;
  filter: blur(2px);
}

#spinner-5 {
  position: absolute;
  top: -70px;
  left: 500px;
  width: 100px;
  opacity: 0.3;
  filter: blur(2px);
}

/* Animation stuff */

.spinner {
		-webkit-animation: rotation 20s infinite linear;
}

.spinner-reverse {
		-webkit-animation: rotation 30s infinite linear reverse;

}


@-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
		}
}

@-webkit-keyframes reverse {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(-359deg);
		}
}

/* Media size stuff */

@media (max-width: 580px) {

  div.frame {
    width: 79%;
    }

  div#content {
    width: 100%;
  }

  h1 {
    font-size: 42px;
    margin: 60px 0px 16px 0px;
  }


  p {
    font-size: 14px;
    width: auto;
  }

  input {
    font-size: 14px;
    font-family: 'Activ Grotesk', sans-serif;
    font-weight: 100;
    padding: 10px 10px 10px 15px;
    border: 1px solid #DEDCD5;
    border-radius: 50px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  input#submit {
    font-size: 14px;
    padding: 10px 15px 10px 15px;

  }

  #spinner-1 {display: none;}
  #spinner-2 {display: none;}
  #spinner-3 {display: none;}
  #spinner-4 {display: none;}
  #spinner-5 {display: none;}
}