html {
  background-image: url(../images/back.jpg);
  background-size: cover;
  background-repeat: repeat-y;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

body {
  position: relative;
  background-color: inherit;
  max-width: 800px;
  margin: auto;
  height: 100%;
  padding: 0 20px;
  /* overflow-x: hidden; */
}

a {
  color: #777;
  text-decoration: underline;
}

a:hover {
  color: #222
}
h2 {
  margin: 0 0 30px 0;
  font-family: 'Montez', cursive;
  font-size: 50px;
}

header {
  position: relative;
  margin-left: -15px;
  width: 100%;
}
.main-content {
  display: none;
  position: relative;
  margin: 90px 0 0 0;
  background-color: #E8DCC9;
  overflow: hidden;
  padding: 60px;
}

.main-content section {
  display: none;
  position: relative;
  max-width: 800px;
  text-align: center;
}

ul {
  text-align: left;
}

ul li {
  margin-bottom: 10px;
}

section.connect a {
  /* margin: 5px; */
}

section.about p {
  text-align: left;
}

.banner {
  display: block;
  width: 60%;
  max-width: 600px;
  margin: 0 auto;
  -webkit-transition: width 1s;
  transition: width 1s;
}

.banner.small {
  width: 35%;
}

.stuff {
  display: none;
  width: 1200px;
  height: 718px;
  margin: 40px 0 0 -220px;
  -webkit-transition: margin 1s, opacity 1s;
  transition: margin 1s, opacity 1s;
  padding-top: 40px;
  background: url('../images/stuff.png') no-repeat;
}

#flower1 {
  top: -15px;
  left: 615px;
  width: 220px;
  z-index: 1;
  transition-delay: 0.1s;
}
#flower2 {
  top: 0px;
  left: 553px;
  transition-delay: 0.1s;
}
#flower2.come-closer {
  left: 520px;
}
#flower3 {
  top: -18px;
  left: 85px;
  width: 150px;
  transition-delay: 0.2s;
}
#flower3.come-closer {
  left: 120px;
}

#flower4 {
  top: 84px;
  left: 803px;
  transition-delay: 0.2s;
}
#flower5 {
  top: -16px;
  left: -95px;
  width: 250px;
  transition-delay: 0.2s;
}

.flower {
  position: absolute;
  -webkit-transition: top 0.8s;
  transition: top 0.8s;
}
#flower3, #flower2 {
  -webkit-transition: left 0.8s;
  transition: left 0.8s;
}
.flower.flyaway {
  top: -500px !important;
}

@-webkit-keyframes wholespin {
  0%  { -webkit-transform: rotate(0deg); }
  25%  { -webkit-transform: rotate(90deg); }
  50%  { -webkit-transform: rotate(180deg); }
  75%  { -webkit-transform: rotate(270deg); }
  100%  { -webkit-transform: rotate(360deg); }
}
@keyframes wholespin {
  0%  { -webkit-transform: rotate(0deg); }
  25%  { -webkit-transform: rotate(90deg); }
  50%  { -webkit-transform: rotate(180deg); }
  75%  { -webkit-transform: rotate(270deg); }
  100%  { -webkit-transform: rotate(360deg); }
}

.flower:hover {
  -webkit-animation: wholespin 1s linear infinite;
  animation: wholespin 1s linear infinite;
}

.front {
  z-index: 1;
}

.fronter {
  z-index: 2;
}

.frontest {
  z-index: 3;
}

.screenreader {
  position: absolute;
  top: -99999px;
}
.margin-20 {
  margin-bottom: 20px;
}
.margin-20-20 {
  margin: 20px 0;
}
.margin-40 {
  margin-bottom: 40px;
}
.absolute {
  position: absolute;
}
.clearfix:after {
  content: "";
  clear: both;
}
.block {
  display: block;
}

iframe {
  margin-bottom: 15px;
  width: 100% !important;
}

.tagline {
  display: none;
  font-size: 0.8em;
  color: #000;
  margin: 20px 0 100px 0;
  text-align: center;
  padding: 3px;
  /* width: initial; */
}

.tagline span {
  background: rgba(232, 220, 201, 0.7);
  padding: 4px;
}

a.social{
  float: left;
  background-image: url(../images/social.jpg);
  width: 120px;
  height: 120px;
  margin: 0 4px 4px 0;
  transition: margin 0.2s;
}
a.social:hover {
  margin: -5px 4px 0 0;
}
.social:nth-of-type(2){
  background-position: 0 0;
}
.social:nth-of-type(4){
  background-position: -133px 0;
}
.social:nth-of-type(3){
  background-position: -266px 0;
}
.social:nth-of-type(5){
  background-position: -399px 0;
}
.social:nth-of-type(1){
  background-position: -537px 0;
  width: 118px;
}

.full-photo {
  width: 100%;
  margin-top: 20px;
}