* {
  margin: 0;
  padding: 0;
  border: 0;
  text-decoration: none;
  outline: none;
}
body,
a {
	height: 100%; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  font-family: calibri;
  font-size: 14px;
  font-weight: normal;
  color: #3B424D;
}

.logindiv {
background: white none repeat scroll 0 0;
    border-radius: 10px;
    bottom: 0;
    height: 100px;
    left: 65%;
    margin: auto;
    padding: 20px;
    position: absolute;
    right: 0;
    top: -57%;
    width: 320px;
}
.logindiv p {
  text-indent: 10px;
}
.box1 {
  background: lavender;
  height: 40px;
  text-indent: 10px;
  width: 90%;
  margin-bottom: 2px;
  color: #3B424D;
  font-size: 15px;
  font-weight: 400;
}
.border1 {
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -ms-border-radius: 5px 5px 0 0;
  -o-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
}
.border2 {
  -webkit-border-radius: 0px 0 5px 5px;
  -moz-border-radius: 0px 0 5px 5px;
  -ms-border-radius: 0px 0 5px 5px;
  -o-border-radius: 0px 0 5px 5px;
  border-radius: 0px 0 5px 5px;
}
.loginbtn {
background: green none repeat scroll 0 0;
    border-radius: 50%;
    box-sizing: border-box;
    color: #fff;
    font-size: 13px;
    font-weight: normal;
    height: 43px;
    position: absolute;
    right: 2px;
    text-shadow: 1px 1px 2px #000;
    top: 40px;
    width: 46px;
}

.loginbtn:hover {
/*  animation: animationFrames 0.3s ease-in-out;
  -webkit-animation: animationFrames 0.3s ease-in-out;
  -moz-animation: animationFrames 0.3s ease-in-out;
  -ms-animation: animationFrames 0.3s ease-in-out;
  -o-animation: animationFrames 0.3s ease-in-out;*/
  cursor: pointer;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@-o-keyframes spin {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(360deg);
  }
}

.container {
    margin: 0;
}

.air-box, .air-box2{
    max-width: 340px;
    position: relative;
    text-align: center;
    top: 0px;
}

 .air-box img{
    background-color: rgba(225,225,225,0.4);
    width: 200px;
    padding: 13px;
    border-radius: 31px;
}

 .air-box2 img{
    width: 200px;
    border-radius: 31px;
}

div.animate-circle {
    width: 100px;
    height: 100px;
    background: lemonchiffon;
    position: relative;
    -webkit-animation: mymovecircle 5s infinite; /* Chrome, Safari, Opera */ 
    animation: mymovecircle 5s infinite;
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymovecircle {
    0%   {top: 0px; left: 0px; background: voilet;}
    25%  {top: 0px; left: 100px; background: skyblue;}
    50%  {top: 100px; left: 100px; background: yellow;}
    75%  {top: 100px; left: 0px; background: green;}
    100% {top: 0px; left: 0px; background: voilet;}
}

/* Standard syntax */
@keyframes mymovecircle {
    0%   {top: 0px; left: 0px; background: voilet;}
    25%  {top: 0px; left: 300px; background: skyblue;}
    50%  {top: 300px; left: 300px; background: yellow;}
    75%  {top: 300px; left: 0px; background: green;}
    100% {top: 0px; left: 0px; background: voilet;}
}

div.animate-diagonal {
    width: 100px;
    height: 100px;
    background: lemonchiffon;
    position: relative;
    -webkit-animation: mymovediagonal 5s infinite; /* Chrome, Safari, Opera */ 
    animation: mymovediagonal 5s infinite;
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymovediagonal {
    0%   {top: 0px; background: lemonchiffon; width: 100px;}
    100% {top: 200px; background: gold; width: 300px;}
}

/* Standard syntax */
@keyframes mymovediagonal {
    0%   {top: 0px; background: lemonchiffon; width: 100px;}
    100% {top: 200px; background: gold; width: 300px;}
}

div.fly-animation{
    width: 100px;
    height: 100px;
    background: goldenrod;
    position: relative;
  animation: fly linear 10s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: fly linear 30s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: fly linear 30s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: fly linear 30s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: fly linear 30s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes fly{
  0% {
    transform:  translate(51px,102px)  rotate(0deg) ;
  }
  100% {
    transform:  translate(1000px,-500px)  rotate(180deg) ;
  }
}

@-moz-keyframes fly{
  0% {
    -moz-transform:  translate(51px,102px)  rotate(0deg) ;
  }
  100% {
    -moz-transform:  translate(1000px,-500px)  rotate(180deg) ;
  }
}

@-webkit-keyframes fly {
  0% {
    -webkit-transform:  translate(51px,102px)  rotate(0deg) ;
  }
  100% {
    -webkit-transform:  translate(1000px,-500px)  rotate(180deg) ;
  }
}

@-o-keyframes fly {
  0% {
    -o-transform:  translate(51px,102px)  rotate(0deg) ;
  }
  100% {
    -o-transform:  translate(1000px,-500px)  rotate(180deg) ;
  }
}

@-ms-keyframes fly {
  0% {
    -ms-transform:  translate(51px,102px)  rotate(0deg) ;
  }
  100% {
    -ms-transform:  translate(200px,-500px)  rotate(180deg) ;
  }
}

div.hinge-animation{
  animation: hinge ease 1s;
  animation-iteration-count: 1;
  transform-origin: 0% 0%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: hinge ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 0% 0%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: hinge ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 0% 0%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: hinge ease 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 0% 0%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: hinge ease 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 0% 0%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes hinge{
  0% {
    transform:  rotate(0deg) ;
  }
  20% {
    transform:  rotate(60deg) ;
  }
  40% {
    transform:  rotate(40deg) ;
  }
  60% {
    transform:  rotate(54deg) ;
  }
  80% {
    transform:  rotate(42deg) ;
  }
  90% {
    transform:  rotate(46deg) ;
  }
  100% {
    transform:  rotate(0deg) ;
  }
}

@-moz-keyframes hinge{
  0% {
    -moz-transform:  rotate(0deg) ;
  }
  20% {
    -moz-transform:  rotate(60deg) ;
  }
  40% {
    -moz-transform:  rotate(40deg) ;
  }
  60% {
    -moz-transform:  rotate(54deg) ;
  }
  80% {
    -moz-transform:  rotate(42deg) ;
  }
  90% {
    -moz-transform:  rotate(46deg) ;
  }
  100% {
    -moz-transform:  rotate(0deg) ;
  }
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform:  rotate(0deg) ;
  }
  20% {
    -webkit-transform:  rotate(60deg) ;
  }
  40% {
    -webkit-transform:  rotate(40deg) ;
  }
  60% {
    -webkit-transform:  rotate(54deg) ;
  }
  80% {
    -webkit-transform:  rotate(42deg) ;
  }
  90% {
    -webkit-transform:  rotate(46deg) ;
  }
  100% {
    -webkit-transform:  rotate(0deg) ;
  }
}

@-o-keyframes hinge {
  0% {
    -o-transform:  rotate(0deg) ;
  }
  20% {
    -o-transform:  rotate(60deg) ;
  }
  40% {
    -o-transform:  rotate(40deg) ;
  }
  60% {
    -o-transform:  rotate(54deg) ;
  }
  80% {
    -o-transform:  rotate(42deg) ;
  }
  90% {
    -o-transform:  rotate(46deg) ;
  }
  100% {
    -o-transform:  rotate(0deg) ;
  }
}

@-ms-keyframes hinge {
  0% {
    -ms-transform:  rotate(0deg) ;
  }
  20% {
    -ms-transform:  rotate(60deg) ;
  }
  40% {
    -ms-transform:  rotate(40deg) ;
  }
  60% {
    -ms-transform:  rotate(54deg) ;
  }
  80% {
    -ms-transform:  rotate(42deg) ;
  }
  90% {
    -ms-transform:  rotate(46deg) ;
  }
  100% {
    -ms-transform:  rotate(0deg) ;
  }
}


div.element-animation{
  animation: animationFrames ease 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: animationFrames ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: animationFrames ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: animationFrames ease 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: animationFrames ease 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes animationFrames{
  0% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
  20% {
    opacity:1;
    transform:  translate(20px,0px)  ;
  }
  90% {
    opacity:0;
    transform:  translate(-1000px,0px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  ;
  }
  20% {
    opacity:1;
    -moz-transform:  translate(20px,0px)  ;
  }
  90% {
    opacity:0;
    -moz-transform:  translate(-1000px,0px)  ;
  }
  100% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }
  20% {
    opacity:1;
    -webkit-transform:  translate(20px,0px)  ;
  }
  90% {
    opacity:0;
    -webkit-transform:  translate(-1000px,0px)  ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes animationFrames {
  0% {
    opacity:1;
    -o-transform:  translate(0px,0px)  ;
  }
  20% {
    opacity:1;
    -o-transform:  translate(20px,0px)  ;
  }
  90% {
    opacity:0;
    -o-transform:  translate(-1000px,0px)  ;
  }
  100% {
    opacity:1;
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  ;
  }
  20% {
    opacity:1;
    -ms-transform:  translate(20px,0px)  ;
  }
  90% {
    opacity:0;
    -ms-transform:  translate(-1000px,0px)  ;
  }
  100% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  ;
  }
}
.container1 {
    position: relative;
    text-align: center;
    color: white;
}

/* Bottom left text */
.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
}

/* Top left text */
.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
}

/* Top right text */
.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
}

/* Bottom right text */
.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

/* Centered text */
.centered {
    position: absolute;
    top: 8%;
    left: 44%;
    font-size: 39px;
    transform: translate(-50%, -50%);
    color: antiquewhite;
}