/* form styling */
header.multistepform-imgbg {
    background: url("../img/roofing1.jpg") no-repeat center center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    position:relative; 
    min-height:100%; 
}

#form-container { 
    background:rgb(247, 247, 247); 
    opacity: 0.95;
    margin-bottom:20px;
    border-radius:20px; 
}

#form-container .page-header { 
    background:rgb(247, 247, 247); 
    margin:0; 
    padding:30px; 
    border-top-left-radius:20px; 
    border-top-right-radius:20px; 
}

/* numbered buttons */
#status-buttons {  
    font-size:20px bold;
}

#status-buttons a  { 
    color:#FFFFFF; 
    display:inline-block; 
    font-size:20px bold; 
    margin-right:10px; 
    text-align:center; 
    text-transform:uppercase; 
}

#status-buttons a:hover { 
    text-decoration:none; 
}

/* we will style the span as the circled number */
#status-buttons span { 
    background:#1e2db4; 
    display:block; 
    height:14px; 
    margin:0 auto 4px; 
    padding-top:2px; 
    width:14px; 
    border-radius:50%; 
}

/* active buttons turn light green-blue*/
#status-buttons a.active span   { background:rgb(238, 125, 50); }
#status-buttons a.done span   { background:rgb(50, 238, 91); }

#status-tabs span{
    display: block;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    color: #1e2db4;
    font-weight: bolder;
}

#status-tabs a.active span { 
    background-color: rgb(248, 247, 247);
    color: #09189e;
}


/* style.css */
/* ANIMATION STYLINGS
============================================================================= */
#signup-form { position:relative; min-height:300px; overflow:hidden; padding:30px; }
#multiForm { position:relative; min-height:300px; overflow:hidden; padding:30px; }
#form-views             { width:auto; }

/* basic styling for entering and leaving */
/* left and right added to ensure full width */
#form-views.ng-enter,
#form-views.ng-leave      { position:absolute; left:30px; right:30px;
    transition:0.5s all ease; -moz-transition:0.5s all ease; -webkit-transition:0.5s all ease; 
}

/* enter animation */
#form-views.ng-enter            { 
    -webkit-animation:slideInRight 0.5s both ease;
    -moz-animation:slideInRight 0.5s both ease;
    animation:slideInRight 0.5s both ease; 
}

/* leave animation */
#form-views.ng-leave            { 
    -webkit-animation:slideOutLeft 0.5s both ease;
    -moz-animation:slideOutLeft 0.5s both ease;
    animation:slideOutLeft 0.5s both ease;   
}

/* ANIMATIONS
============================================================================= */
/* slide out to the left */
@keyframes slideOutLeft {
    to      { transform: translateX(-200%); }
}
@-moz-keyframes slideOutLeft {  
    to      { -moz-transform: translateX(-200%); }
}
@-webkit-keyframes slideOutLeft {
    to      { -webkit-transform: translateX(-200%); }
}

/* slide in from the right */
@keyframes slideInRight {
    from    { transform:translateX(200%); }
    to      { transform: translateX(0); }
}
@-moz-keyframes slideInRight {
    from    { -moz-transform:translateX(200%); }
    to      { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
    from    { -webkit-transform:translateX(200%); }
    to      { -webkit-transform: translateX(0); }
}