@charset "UTF-8";
/* CSS Document */
html {height: 100%;overflow-x:hidden}
body {min-height: 100%; background-color:#9c27b0; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out;}
body.general {animation-name: bg-general; animation-duration: 60s;} body.error {animation-name: bg-error; animation-duration: 5s;}
@keyframes bg-general {0% {background-color:#f44336;} 5% {background-color: #e91e63;} 10% {background-color: #9c27b0;} 15% {background-color: #673ab7;} 20% {background-color: #3f51b5;} 25% {background-color: #2196f3;} 30% {background-color: #03a9f4;} 35% {background-color: #00bcd4;} 40% {background-color: #009688;} 45% {background-color: #4caf50;} 50% {background-color: #8bc34a;} 55% {background-color: #cddc39;} 60% {background-color: #ffeb3b;} 65% {background-color: #ffc107;} 70% {background-color: #ff9800;} 75% {background-color: #ff5722;} 80% {background-color: #795548;} 85% {background-color: #9e9e9e;} 90% {background-color: #607d8b;} 95% {background-color: #000000;} 100% {background-color: #ffffff; }
}
@keyframes bg-error {from {background-color:#ffcdd2;} to {background-color:#ffd180;}  }
.height-50 {height:50%;} .height-100 {height:100%;}
.width-50 {width:50%;} .width-100 {width:100%;margin:0 !important;}
.no-margin{margin:0px;} .no-padding {padding:0px;}
.uppercase {text-transform:uppercase;} .lowercase {text-transform:lowercase;}
.rotate-45 {-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);}

.circle {border-radius: 50%;width: 150px;height: 150px;}

.biggify {transition: all .20s ease-in-out;} .biggify:hover {transform: scale(1.1); }

#search {height:auto;}
#logo {background-image:url(../images/logo@2x.png); background-size:contain; background-repeat:no-repeat; background-position:7px /**/; padding-left:80px;}
#logo .pub-title {font-size:1.2rem;}
#login-animated-bg {position:absolute; width:100%; height:100%; z-index:0;}
#loginbg img{}
img.main-logo {width:72px; height:72px;}
#logincontainer {}
.white-grey-dots {background-color:#fff;}
#logincard .card-image img {}
#logincard #notificationbar {padding:1rem;}
#logincard .card-content {}
#logincard h3 {font-weight:100; padding-bottom:0px; margin-bottom:0px;}
p, label {font-weight:300!important;}

.pub-card .card-action {padding:0; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-color:#9c27b0;}
.pub-card .card-action .btn-flat {color:#fff!important;}

#hud {background-color:#803789;}
@keyframes notifications {0% {transform: scale(1); background-image:url(../images/red-circle.png);} 25% {transform:scale(1.5) rotate(25deg);} 75% {transform: scale(1.5) rotate(-25deg); background-image:url(../images/red-circle.png);} 100% {transform: scale(1) rotate(0deg); background-image:url(../images/red-circle.png);}}
.notifications-active {background-size:45%; background-position:center; background-repeat:no-repeat; animation: notifications 1s ease-in-out 1 alternate;}

@media screen and (max-width: 480px) {#logo { padding: 0 2rem; background-position:center;}}
@media only screen and (max-width : 992px) {}
@media only screen and (max-width : 600px) {}
@media only screen and (min-width : 601px) {}
@media only screen and (min-width: 600px) and (max-width: 992px) {}
@media only screen and (min-width : 993px) {}