/***********************************************************************************/
/**                         Animation                                             **/
/***********************************************************************************/
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {left:0px; top:-250px;}
    25%  {left:0px; top:0px;}
}



/*********************************************************************************/

@font-face {
  font-family: 'fontello';
  src: url('fontello.eot');
  src: url('fontello.eot') format('embedded-opentype'),
       url('fontello.woff') format('woff'),
       url('fontello.ttf') format('truetype'),
       url('fontello.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

.title{
    background-color: darkorange;
    height: 50px;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 10px;
    border-color: @app-color;
}

@font-face {
  font-family: 'fontello';
  src: url('fontello.eot');
  src: url('fontello.eot') format('embedded-opentype'),
       url('fontello.woff') format('woff'),
       url('fontello.ttf') format('truetype'),
       url('fontello.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}


div.login{
    border-radius: 25px;
    border: 2px solid darkorange;
    padding: 20px; 
    width: 220px;
    height: 255px; 
    margin-left: auto;
    margin-right: auto;
    display: block; 
    background-color: white; 
    z-index:1002; 
    position: relative;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 4s;
}

div.register{
    border-radius: 25px;
    border: 2px solid darkorange;
    padding: 20px; 
    width: 220px;
    height: 270px; 
    margin-left: auto;
    margin-right: auto;
    display: block; 
    background-color: white; 
    z-index:1002; 
    position: relative;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 4s;
}

.black_overlay{ 
    display: block; 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 100%; 
    background-color: black; 
    z-index:1001; 
    -moz-opacity: 0.8; 
    opacity:.70; 
    filter: alpha(opacity=80); 
} 
