@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');

body {
    font-family: 'Roboto', sans-serif;
}

.navbar-default {
    background:#fff;
    border:0;
    border-radius:0;
    border-bottom: 1px solid #eee;
}

.navbar-brand>img {
    display: block;
    width: 87px;
}

.navbar-default .navbar-nav>li>a {
    background: #3985e4;
    color: #fff;
    border-radius: 40px;
    padding: 10px 36px;
    margin:20px;
}


.page        {
    bottom:0;
    position:absolute;
    top:0;
    width:100%;
}

section {

}

section h1 {
    font-weight:900;
}

section h2 {
    color:#3985e4;
    font-weight: 900;
    font-size: 40px;
    margin-bottom: 30px;
}

section h3 {
    color:#3985e4;
}

section p.intro {
    font-size:18px;
    line-height:28px;
    color:rgba(44, 44, 44, 0.53);
    font-weight:100;
    margin-bottom:30px;
}

section#start .moreInfo {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #3985e4;
    display: block;
    padding: 10px;
    animation: pulse 1.5s infinite;
}

section#start .moreInfo .material-icons {
    font-size:12px;
}

section#third img {
    margin:0 auto;
}

section#third h4 {
    font-weight:900;
    color:#3985e4;
}

@keyframes pulse {
    0%, 100% {
        transform:translateY(-10px);
    }
    50% {
        transform:translateY(0px);
    }
}

section#start {

}

section#start .input-group .form-control{
    border-radius: 40px;
    padding: 25px;
    z-index:1;
}

section#start .input-group .btn-success{
    margin-left: -80px;
    border-radius: 40px;
    padding: 15px 30px;
}

section#start img {
    max-height:50vh;
}

section#second img {
    width: 200px;
    height: 225px;
    margin: 0 auto;
}

section#third {
    background:#e8f4fc;
}

.ng-pageslide {
    background: #454545;
    color:#fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.34);
}

#pdf-canvas {
    display: block;
    margin: 0 auto;
    box-shadow:0px 0px 10px #aaa;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

#canvas {
    background:#fff;
}

.page-contract {
    background: rgba(238, 238, 238, 0.3);
    height: 100%;
    padding: 0;
    padding-top:100px;
}

.progress {

    border: 10px solid #ccc;
    border-radius: 50%;
    border-top: 10px solid #2e6da4;
    width: 50px;
    height: 50px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    margin:0 auto;
    margin-top:20%;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.pdf-controls {
    width: 100%;
    display: block;
    border-top: 1px solid rgba(186, 186, 186, 0.25);
    background: #ffffff;
    position: fixed;
    height: 55px;
    bottom:0;
    -webkit-transition: all ease-in-out 0.5s;
    -moz-transition: all ease-in-out 0.5s;
    -ms-transition: all ease-in-out 0.5s;
    -o-transition: all ease-in-out 0.5s;
    transition: all ease-in-out 0.5s;
}

.pdf-controls.ng-hide-remove.ng-hide-remove-active {
    bottom:0;
}

.pdf-controls.ng-hide-add.ng-hide-add-active {
    bottom:-55px;
}

.pdf-controls.ng-hide {
    bottom:-55px;
    display:block !important;
}

#pdf-canvas.ng-hide {
    opacity:0;
    display:block !important;
}

.finish-contract.ng-hide {
    opacity:0;
}


.pdf-controls button {
    background: #eaeaea;
    border:0;
    height: 55px;
    padding: 0px 27px;
    margin: 0;
    color: rgba(154, 154, 154, 0.59);
    line-height: 71px;
}

.pdf-controls button.sign-button {
    background: #51c668;
    color: #fff;
    border:0;
    height: 55px;
    padding: 0px 27px;
    margin: 0;
    line-height: 61px;
    font-size: 19px;
    font-weight: 700;
    float:right;
}

.pdf-controls button.sign-button .material-icons {
    position:relative;
    top:5px;
}

.tab-heading {
    padding:10px;
    border-bottom:1px solid #aaa;
    text-align:center;
    background: #f2f2f2;
    font-weight: 600;
    color: #828282;
}

.tab-heading {}

.tab-heading p {
    margin:0;
}

.finish-contract {
    background:rgba(0, 0, 0, 0.64);
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    bottom:0;
}

.finish-options {
    margin-top: 333px;
}

.finish-options button {
    background:transparent;
    color:#fff;
    border: 2px solid #fff;
    padding: 11px;
    margin: 15px;
    font-size: 19px;
}

.finish-options button.success {
    background: #4CAF50;
    border-color: #4caf50;
}

#fp-nav ul li a span, .fp-slidesNav ul li a span {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    height: 4px;
    width: 4px;
    border: 0;
    background: #3985e4;
    left: 50%;
    top: 50%;
    margin: -2px 0 0 -2px;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}


.page-contract.ng-enter {
    animation: fadeIn 0.5s both ease-in; z-index: -1;
}

.page-finished {
    padding-top:200px;
}


.ng-enter           { animation: scaleUp 0.5s both ease-in; z-index: 8888; }
.ng-leave           { animation: slideOutLeft 0.5s both ease-in; z-index: 9999; }



/* ANIMATIONS
============================================================================= */

/* leaving animations ----------------------------------------- */
/* rotate and fall */
@keyframes rotateFall {
    0%      { transform: rotateZ(0deg); }
    20%     { transform: rotateZ(10deg); animation-timing-function: ease-out; }
    40%     { transform: rotateZ(17deg); }
    60%     { transform: rotateZ(16deg); }
    100%    { transform: translateY(100%) rotateZ(17deg); }
}

/* slide in from the bottom */
@keyframes slideOutLeft {
    to      { transform: translateX(-100%); }
}

/* rotate out newspaper */
@keyframes rotateOutNewspaper {
    to      { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}

/* entering animations --------------------------------------- */
/* scale up */
@keyframes scaleUp {
    from    { opacity: 0.3; -webkit-transform: scale(0.8); }
}

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

/* slide in from the bottom */
@keyframes slideInUp {
    from    { transform:translateY(100%); }
    to      { transform: translateY(0); }
}

@keyframes fadeIn {
    from    { opacity:0; }
    to      { opacity:1; }
}