body{
  margin-left: 0px;
  margin-top: 0px;  
}

.wrapper {
		  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff7b0d+3,ffa84c+57,ffa84c+57 */
		  background-image: url("bg11.jpg");
		  /* Old browsers */
		  background-image: url("bg11.jpg");
		  /* FF3.6-15 */
		  background-image: url("bg11.jpg");
		  /* Chrome10-25,Safari5.1-6 */
		  background-image: url("bg11.jpg");
		  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#d72f95', endColorstr='#E76AB5', GradientType=0);
		  /* IE6-9 */
		  position: absolute;
		  width: 100%;
		  height: 100%;
		  overflow: hidden;
		}
		
		.bg-bubbles {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  z-index: 1;
		}
		
		.bg-bubbles li {
		  position: absolute;
		  list-style: none;
		  display: block;
		  width: 40px;
		  height: 40px;
		  background-color: rgba(255, 255, 255, 0.15);
		  bottom: -160px;
		  -webkit-animation: square 25s infinite;
		  animation: square 25s infinite;
		  -webkit-transition-timing-function: linear;
		  transition-timing-function: linear;
		}
		
		.bg-bubbles li:nth-child(1) {
		  left: 10%;
		}
		
		.bg-bubbles li:nth-child(2) {
		  left: 20%;
		  width: 80px;
		  height: 80px;
		  -webkit-animation-delay: 2s;
		  animation-delay: 2s;
		  -webkit-animation-duration: 17s;
		  animation-duration: 17s;
		}
		
		.bg-bubbles li:nth-child(3) {
		  left: 25%;
		  -webkit-animation-delay: 4s;
		  animation-delay: 4s;
		}
		
		.bg-bubbles li:nth-child(4) {
		  left: 40%;
		  width: 60px;
		  height: 60px;
		  -webkit-animation-duration: 22s;
		  animation-duration: 22s;
		  background-color: rgba(255, 255, 255, 0.25);
		}
		
		.bg-bubbles li:nth-child(5) {
		  left: 70%;
		}
		
		.bg-bubbles li:nth-child(6) {
		  left: 80%;
		  width: 120px;
		  height: 120px;
		  -webkit-animation-delay: 3s;
		  animation-delay: 3s;
		  background-color: rgba(255, 255, 255, 0.2);
		}
		
		.bg-bubbles li:nth-child(7) {
		  left: 32%;
		  width: 160px;
		  height: 160px;
		  -webkit-animation-delay: 7s;
		  animation-delay: 7s;
		}
		
		.bg-bubbles li:nth-child(8) {
		  left: 55%;
		  width: 20px;
		  height: 20px;
		  -webkit-animation-delay: 15s;
		  animation-delay: 15s;
		  -webkit-animation-duration: 40s;
		  animation-duration: 40s;
		}
		
		.bg-bubbles li:nth-child(9) {
		  left: 25%;
		  width: 10px;
		  height: 10px;
		  -webkit-animation-delay: 2s;
		  animation-delay: 2s;
		  -webkit-animation-duration: 40s;
		  animation-duration: 40s;
		  background-color: rgba(255, 255, 255, 0.3);
		}
		
		.bg-bubbles li:nth-child(10) {
		  left: 90%;
		  width: 160px;
		  height: 160px;
		  -webkit-animation-delay: 11s;
		  animation-delay: 11s;
		}
		
		@-webkit-keyframes square {
		  0% {
		    -webkit-transform: translateY(0);
		    transform: translateY(0);
		  }
		  100% {
		    -webkit-transform: translateY(-700px) rotate(600deg);
		    transform: translateY(-700px) rotate(600deg);
		  }
		}
		
		@keyframes square {
		  0% {
		    -webkit-transform: translateY(0);
		    transform: translateY(0);
		  }
		  100% {
		    -webkit-transform: translateY(-700px) rotate(600deg);
		    transform: translateY(-700px) rotate(600deg);
		  }
		}
		
		.form {
      overflow: hidden;
		  position: absolute;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  margin: auto;
		  height: 400px;
		  width: 340px;
		  padding: 10px;
		  background-color: rgba(255, 159, 64, 0);
		  border-radius: 20px;
		  box-shadow: 1px 1px 30px #f5f0f0;
		  z-index: 2;
		  text-align: center;
		}
		
		.form span {
		  font-family: 'Exo', sans-serif;
		  font-size: 35px;
		  font-weight: 200;
		}
		
		.form input[type=text] {
		  width: 300px;
		  height: 30px;
		  background: transparent;
		  border: 1px solid rgba(255, 255, 255, 0.6);
		  border-radius: 2px;
		  color: #fff;
		  font-family: 'Exo', sans-serif;
		  font-size: 16px;
		  font-weight: 400;
		  padding: 4px;
		  margin-bottom: 25px;
		  border-radius: 5px;
		}
		
		.form input[type=password] {
		  width: 300px;
		  height: 30px;
		  background: transparent;
		  border: 1px solid rgba(255, 255, 255, 0.6);
		  border-radius: 2px;
		  color: #fff;
		  font-family: 'Exo', sans-serif;
		  font-size: 16px;
		  font-weight: 400;
		  padding: 4px;
		  border-radius: 5px;
		  margin-bottom: 25px;
		}
		
		.form input[type=submit] {
		  width: 310px;
		  height: 35px;
		  background: #fff;
		  border: 1px solid #fff;
		  cursor: pointer;
		  border-radius: 2px;
		  color: #a18d6c;
		  font-family: 'Exo', sans-serif;
		  font-size: 16px;
		  font-weight: 400;
		  padding: 6px;
		  margin-top: 10px;
		  border-radius: 5px;
		}
		
		.form input[type=text]:focus {
		  outline: none;
		  border: 1px solid rgba(255, 255, 255, 0.9);
		}
		
		.form input[type=password]:focus {
		  outline: none;
		  border: 1px solid rgba(255, 255, 255, 0.9);
		}
		
		.form input[type=button]:focus {
		  outline: none;
		}
		
		#remember {
		  position: absolute;
		  font-size: 13px;
		  font-family: 'Hind', sans-serif;
		  color: white;
		  margin-top: 0.5%;
		}
		
		#forgotten {
		  position: absolute;
		  font-size: 12px;
		  font-family: 'Hind', sans-serif;
		  color: white;
		  cursor: pointer;
		  -webkit-transition: all 2s ease-in-out;
		  -moz-transition: all 2s ease-in-out;
		  -o-transition: all 2s ease-in-out;
		  transition: all 0.2s ease-in-out;
		  margin-left: 180px;
		  margin-top: 0.5%;
		}
		
		.squaredThree {
		  position: relative;
		  margin: 20px auto;
		  text-align: start;
		  margin-left: 5%;
		}
		
		.squaredThree label {
		  margin-left: -20px;
		  width: 15px;
		  height: 15px;
		  cursor: pointer;
		  position: absolute;
		  background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
		  background: linear-gradient(to bottom, #c2b698 0%, #ffffff 100%);
		  border-radius: 4px;
		  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
		}
		
		.squaredThree label:after {
		  content: '';
		  width: 5px;
		  height: 2px;
		  position: absolute;
		  top: 4px;
		  left: 4px;
		  border: 3px solid #6c6c63;
		  border-top: none;
		  border-right: none;
		  background: transparent;
		  opacity: 0;
		  -webkit-transform: rotate(-45deg);
		  transform: rotate(-45deg);
		}
		
		.squaredThree label:hover::after {
		  opacity: 0.3;
		}
		
		.squaredThree input[type=checkbox] {
		  visibility: hidden;
		}
		
		.squaredThree input[type=checkbox]:checked + label:after {
		  opacity: 1;
		}
		
		::-webkit-input-placeholder {
		  color: rgba(255, 255, 255, 0.6);
		}
		
		::-moz-input-placeholder {
		  color: rgba(255, 255, 255, 0.6);
		}
		
		#remember {
		  position: absolute;
		  font-size: 13px;
		  font-family: 'Hind', sans-serif;
		  color: white;
		}
		
		#forgotten {
		  position: absolute;
		  font-size: 12px;
		  font-family: 'Hind', sans-serif;
		  color: white;
		  cursor: pointer;
		  -webkit-transition: all 2s ease-in-out;
		  -moz-transition: all 2s ease-in-out;
		  -o-transition: all 2s ease-in-out;
		  transition: all 0.2s ease-in-out;
		  margin-left: 180px;
		}
		
		.squaredThree {
		  position: relative;
		  margin: 20px auto;
		}
		
		.squaredThree label {
		  margin-left: -20px;
		  width: 15px;
		  height: 15px;
		  cursor: pointer;
		  position: absolute;
		  background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
		  background: linear-gradient(to bottom, #ff7b0d 0%, #ffa84c 100%);
		  border-radius: 4px;
		  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
		}
		
		.squaredThree label:after {
		  content: '';
		  width: 5px;
		  height: 2px;
		  position: absolute;
		  top: 4px;
		  left: 4px;
		  border: 3px solid #fcfff4;
		  border-top: none;
		  border-right: none;
		  background: transparent;
		  opacity: 0;
		  -webkit-transform: rotate(-45deg);
		  transform: rotate(-45deg);
		}
		
		.squaredThree label:hover::after {
		  opacity: 0.3;
		}
		
		.squaredThree input[type=checkbox] {
		  visibility: hidden;
		}
		
		.squaredThree input[type=checkbox]:checked + label:after {
		  opacity: 1;
		}