﻿﻿.loading-container {
    visibility: hidden;
}

.loading-container.show {
    visibility: visible;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9999999;
    background-color: #00000035;
}

.loading-texto {
    position: fixed;
    /*width: 500px;*/
    /*height: 200px;*/
    margin: 85px auto;
    /*margin: 5% auto;*/
    left: 0;
    right: 0;
    text-align: center;
    color: #000000b5;
    font-size: 1.3em;
    font-family: "Maven Pro", Helvetica, Arial, sans-serif;
    font-weight: 800;
}

.neonText {
    /* color: #fff; */
    text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff;
    /* 0 0 42px #009bdb,
      0 0 82px #009bdb,
      0 0 92px #009bdb,
      0 0 102px #009bdb,
      0 0 151px #009bdb; */
}

.loading-logo {
    background-image: url(../images/loading-logo-1.png);
    background-size: contain;
    height: 100%;
}

.loading {
    padding: 2em;
    width: 17em;
    height: 17em;
    position: fixed;
    /*position: absolute;*/
    left: 45%;
    top: 40%;
    /*margin: -60px 0 0 -29px;*/
    margin: -60px 0 0 -60px;
    /* background: #fff; */
    background: #cedfe8;
    /* width: 100px; */
    /* height: 100px; */
    border-radius: 100%;
    /* border: 1.2em solid #0071af; */
    border: 1.2em solid #3e3d3d; /*#009bdb;*/
    -webkit-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 47%), inset 0px 0px 32px -9px rgb(0 0 0 / 47%);
    -moz-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 47%), inset 0px 0px 32px -9px rgb(0 0 0 / 47%);
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 47%), inset 0px 0px 32px -9px rgb(0 0 0 / 47%);
}

    .loading:after {
        content: '';
        background: trasparent;
        width: 140%;
        height: 140%;
        position: absolute;
        border-radius: 100%;
        top: -20%;
        left: -20%;
        opacity: 0.7;
        /* box-shadow: rgba(255, 255, 255, 0.6) -4px -5px 3px -3px; */
        box-shadow: rgb(0 113 175 / 52%) -4px -5px 3px -3px;
        animation: rotate 2s infinite linear;
    }

@keyframes rotate {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

/* Normal */
@media screen and (min-width: 601px) {
}

/* Mobile */
@media screen and (max-width: 600px) {

    .loading {
        left: 30%;
    }
}
