h1 {
  font-family: "Averta", Arial, sans-serif;
  color: #fff;
  font-weight: lighter;
  font-size: 2.5rem;
}
.bg-image {
  width: 100%;
  height: 100%;
  background-image: url(../images/bg_image_01.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top left;
  display: block;
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  opacity: 1;
  transition: opacity 0.2s, left 0.2s;
  z-index: 10;
}

.bg-wave {
  display: block;
  opacity: 0.25;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 40;
  overflow: hidden;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  transition: opacity 0.2s;
  z-index: 30;
}

.bg-wave > svg {
  height: 200vh;
  width: 200vw;
  position: relative;
  transform: rotate(90deg);
  left: -92%;
}

.butterfly {
  display: block;
  height: 50%;
  width: 50%;
  left: 25%;
  position: relative;
  top: 2rem;
}

.swoop-gold {
  width: 100%;
  height: 85%;
  background-image: url(../images/swoop-gold.png);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: contain;
  position: fixed;
  bottom: -12rem;
  left: -5rem;
  z-index: 20;
  transform: rotate(-10deg);
}

.swoop-green {
  width: 75%;
  height: 65%;
  background-image: url(../images/swoop-green.png);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: cover;
  position: fixed;
  bottom: -15rem;
  right: -2.5rem;
  z-index: 40;
  transform: rotate(-5deg);
  transition: bottom 0.2s, width 0.2s, right 0.2s;
}

.login-box {
  position: fixed;
  top: 50px;
  right: 175px;
  width: 350px;
  height: auto;
  z-index: 50;
}

.login-form {
	display: block;
	position: relative;
	width: 350px;
	height: 320px;
}
.login-form .input {
	margin-bottom: 2rem;
	width: 335px;
}
.login-form .login-label {
	color: white;
	font-size: medium;
	font-weight: bold;
}
.login-form .signin-button {
	width: 140px;
	color: #10069d;
	font-size: 14px;
	background-color: #ffffff;
	border: 1px solid #10069f;
	margin: 0 0 5rem 6.4rem;
}

.login-form .error-alert {
	border: none;
	font-size: 0.9rem;
	background-color: #f2dede;
	margin: 0 25px 20px 25px;
	padding: 8px 35px 8px 14px;
}

.login-form .error-msg-label {
	color: #a94442;
}

/* MOBILE STYLING */
/* page decorations - non-standard breakpoints */
@media only screen and (max-width: 1285px) {
  .bg-image {
    left: -12rem;
  }
  .bg-wave > svg {
    left: -95%;
  }
}
@media only screen and (max-width: 1028px) {
  .bg-image {
    left: -25rem;
  }
  .bg-wave > svg {
    left: -92%;
  }
}
@media only screen and (max-width: 1000px) {
  .bg-image {
    opacity: 0;
  }
}
@media only screen and (max-width: 868px) {
  .bg-wave {
    opacity: 0;
  }
  .bg-wave > svg {
    left: -90%;
  }
  .login-box {
    right: 0;
    width: 100%;
  }
  .login-box--inner-wrap {
    margin: 0 auto;
    width: 350px;
  }
  .swoop-gold {
    bottom: -7rem;
    left: -5rem;
  }
  .swoop-green {
    bottom: -17rem;
    right: -18rem;
    width: 100%;
    transform: rotate(-10deg);
  }
}
@media(max-width: 428px) {
    .swoop-gold {
        opacity:0
    }

	.swoop-green {
        opacity:0
    }
}