.loginpanel{
    width: 500px;
	margin: 0 auto;
    max-width: 90%;
    background-repeat:no-repeat;
    background-position: top center;
    background-size: cover;
    margin:5% auto 0px;
    padding: 70px;
}

.loginpanel .animate1, .loginpanel .animate2, .loginpanel .animate3, .loginpanel .animate4 {
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
}

.loginpanel .animate1
{
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
}

.loginpanel .animate2
{
    -webkit-animation-delay: 0.7s;
    -moz-animation-delay: 0.7s;
}

.loginpanel .animate3
{
    -webkit-animation-delay: 1.1s;
    -moz-animation-delay: 1.1s;
}

.loginpanel .animate4
{
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}

.loginpanel .animate5
{
    -webkit-animation-delay: 2.2s;
    -moz-animation-delay: 2.2s;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/*MEDIA QUERIES     */

@media (max-height:800px) {
  .loginpanel{
        width: 450px;
        max-width: 90%;
        background-size: cover;
        margin: 1% auto;
    }   
}

@media (max-width:500px) {
    .loginpanel{
        background: none;
        box-shadow: none;
		    padding: 40px;
    }
    
}