/*Spinner*/
.spinner, .spinner:after {
    width: 3.5em;
    height: 3.5em;
    /*position: absolute;*/
    top: 350px;
    left: 48.5%;
    border-radius: 50%;
    display: block;
    z-index: 9;
}

.spinner {
    background-color: transparent;
    border-top: 5px solid #3c7ebf;
    border-right: 5px solid #3c7ebf;
    border-bottom: 5px solid #3c7ebf;
    border-left: 5px solid #0d5b97;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-duration: .8s;
    animation-name: spinner-loading;
}

@keyframes spinner-loading {
    0% {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(1turn);
    }
}


/*Block UI*/

.blockUI-style {
    position: fixed;
    visibility: block;
    display: flex;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    z-index: 4;
    background-color: rgba(131,138,142,0.4);
}

.blockUI-style div {
    margin: auto;
    z-index: 5;
     /*-webkit-animation: fadeIn 1.5s ease 0s 1 forwards;
    -moz-animation: fadeIn 1.5s ease 0s 1 forwards;
    -o-animation: fadeIn 1.5s ease 0s 1 forwards;
    -ms-animation: fadeIn 1.5s ease 0s 1 forwards;
    animation: fadeIn 1.5s ease 0s 1 forwards;*/
}

.blockUI-style div img {
    vertical-align: middle;
    z-index: 6;
}

.blockUI-style div span {
    vertical-align: middle;
    text-align: center;
    /*font-family: 'Indie Flower', cursive;*/
    font-weight: bold;
    padding-left: 10px;
    color: #fff;
    z-index: 7;
    font-size: 18pt;
    text-shadow: 1px 1px 2px #000;
}

.spinWheel {
    /*-webkit-animation: spinWheel 1.2s ease 0s infinite forwards;
    -moz-animation: spinWheel 1.2s ease 0s infinite forwards;
    -o-animation: spinWheel 1.2s ease 0s infinite forwards;
    -ms-animation: spinWheel 1.2s ease 0s infinite forwards;
    animation: spinWheel 1.2s ease 0s infinite forwards;*/
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
}

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

    100% {
        transform: rotate(360deg);
    }
}

/*******************
Preloader
********************/
.preloader {
    width: 100%;
    height: 100%;
    top: 0px;
    position: fixed;
    z-index: 99999;
    background: #fff;
    opacity: 1;
}
/*.lds-ripple {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
    position: absolute;
    top: calc(50% - 3.5px);
    left: calc(50% - 3.5px);
}*/

/*.lds-ripple .lds-pos {
    position: absolute;
    border: 2px solid #008000; /*#2962FF; se modificó el color azul por el verde institucional */ 
    /*opacity: 1;
    border-radius: 50%;
    -webkit-animation: lds-ripple 1s cubic-bezier(0, 0.1, 0.5, 1) infinite;
    animation: lds-ripple 1s cubic-bezier(0, 0.1, 0.5, 1) infinite;
}*/

/*.lds-ripple .lds-pos:nth-child(2) {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

@-webkit-keyframes lds-ripple {
    0% {
        top: 28px;
        left: 28px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 28px;
        left: 28px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: -1px;
        left: -1px;
        width: 58px;
        height: 58px;
        opacity: 0;
    }
}

@keyframes lds-ripple {
    0% {
        top: 28px;
        left: 28px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 28px;
        left: 28px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: -1px;
        left: -1px;
        width: 58px;
        height: 58px;
        opacity: 0;
    }
}*/







/*******************
 Estilo inspirados en Linkedin

********************/

/*   

$width: 100px;
$height: 100px;*/

/*body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #f5f5f5;
}*/

.containerL {
    /*background: #eaeaea;*/
    width: 200px;
    height: 200px;
    background-size: cover;
    vertical-align: middle;
    margin: 20% auto;
}

.logo-empresa {
    display: block;
    font-size: 2em;
    text-align: center;
    color: #008000;
}

.line {
    height: 3px;
    width: 100%;
    background: #e8e8e8;
    margin-top: 30%;
}

.inner{
width: 100%;
height: inherit;
background: #008000; /* Se cambió a color Verde #0077b5;*/ 
animation: slide 2s ease-in-out infinite;
}

@keyframes slide {
    0% {
        transform-origin: left;
        transform: scale(0.3);
    }

    12.5% {
        transform-origin: left;
        transform: scale(0.2);        
    }

    25% {
        transform-origin: left;
        transform: scale(1);
    }

    26% {
        transform-origin: right;
        transform: scale(1);
    }

    50% {
        transform-origin: right;
        transform: scale(0.3);
    }

    62.5% {
        transform-origin: right;
        transform: scale(0.2);        
    }

    75% {
        transform-origin: right;
        transform: scale(1);
    }

    76% {
        transform-origin: left;
        transform: scale(1);
    }

    100% {
        transform-origin: left;
        transform: scale(0.3);
    }
}