* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

html {
    scroll-behavior: smooth;
}


/* Cores */

:root {
    --blue: #017BFB;
    --cinza: #777;
    --preto: #000;
    --branco: #fff;
    --cinza-2: #faf8f8;
}

/* Scroll */

::-webkit-scrollbar-thumb {
    background: var(--blue);
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar {
    width: .7em;
    height: 2em;
}


/* ------------------------------- */

body {
    overflow: hidden;
    background: linear-gradient(to right, var(--preto), var(--blue)) !important;
}

.nuvio {
    position: absolute;
    top: 4em;
    right: 5em;
    width: 350px;
}

/* Imagem Principal */

.nuvem {
    position: absolute;
    top: 9em;
    left: 32em;
    filter: drop-shadow(20px 5px 0 var(--blue));
    animation: nuvem 5s ease-in-out infinite;
    z-index: 3;
}

@keyframes nuvem {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}

.sinal {
    width: 1em;
    height: 1em;
    background: var(--blue);
    border-radius: 5px;
    position: absolute;
    top: 18em;
    left: 38.9em;
    z-index: 2;
}

.sinal-1 {
    animation: sinal-1 5s linear infinite;
}

@keyframes sinal-1 {
    0% {
        top: 18em;
    }
    50% {
        top: 29em;
    }
}

.sinal-2 {
    top: 29em;
    left: 40.2em;
    animation: sinal-2 5s linear infinite;
}

@keyframes sinal-2 {
    0% {
        top: 29em;
    }
    50% {
        top: 16em;
    }
}

.sinal-3 {
    top: 18em;
    left: 41.6em;
    animation: sinal-3 5s .5s linear infinite;
}

@keyframes sinal-3 {
    0% {
        top: 18em;
    }
    50% {
        top: 30em;
    }
}

.imagem {
    z-index: 1;
    width: 990px;
    position: absolute;
    top: 5em;
    left: -4em;
}




/* Main */

#Main {
    background: var(--branco) !important;
}

.mainCircle {
    width: 75em;
    height: 75em;
    clip-path: circle(50%);
    z-index: -1;
    background: rgba(255, 255, 255, .7);
    position: fixed;
}

.circulo {
    top: -10em;
    right: 0em;
}

.circulo-2 {
    background: var(--branco);
    top: 0;
    right: -5em;
}

.circulo-3 {
    background: var(--branco);
    top: -20em;
    right: -35em;
    height: 120em;
    clip-path: circle(75% at left);
}

.circulo-4 {
    bottom: -20em;
    right: 0;
}

.circulo-5 {
    bottom: -9em;
    right: 2em;
}


.titulo {
    position: absolute;
    top: 6.8em;
    right: 1em;
    font-size: 3em;
    font-family: 'Montserrat', sans-serif;
    color: var(--preto);
    font-weight: bold;
    font-size: 3.5em;
    width: 16em;
}

.titulo p span.texts {
    font-weight: normal;
    color: var(--blue);
    font-size: 1.5em;
}

.titulo p span.cursor {
    display: inline-block;
    background: var(--cinza);
    margin-left: 0.1rem;
    width: 3px;
    animation: blink 1s infinite;
}

.titulo p span.cursor.typing {
    animation: none;
}

@keyframes blink {
    0% { background: var(--cinza); }
    49% { background: var(--cinza); }
    50% { background: transparent; }
    99% { background: transparent; }
    100% { background: var(--cinza);}
}

/* Contato */

.square {
    position: absolute;
    top: 33em;
    right: 9em;
    background: var(--blue);
    width: 30em;
    font-size: 1.29em;
    font-family: 'Open Sans', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 1em;
    border-radius: 14px;
    transition: .5s;
}

.square:hover {
    box-shadow: 2px 3px 7px var(--preto);
}

.tel, .email, .local {
    color: var(--branco);
    margin-bottom: .5em;
    display: flex;
    align-items: center;
}

.square ion-icon {
    margin-right: .5em;
    font-size: 1.5em;
}

.local {
    width: 23em;
    display: flex;
}

.square .local ion-icon {
    font-size: 2.7em;
}



/* Footer */

.footer {
    position: relative;
    top: 60em;
    left: 33em;
    font-family: 'Open Sans', sans-serif;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
}




/* Media Queries */

@media screen and (min-width: 280px) and (max-width: 360px) {
    body {
        background: #fff !important;
        overflow: auto;
    }

    .nuvio {
        width: 180px;
        right: 5em;
        top: 2em;
    }

    .nuvem {
        top: 14em;
        left: 14em;
        width: 100px;
    }

    .sinal {
        width: .5em;
        height: .7em;
        left: 17.2em;
        top: 17em;
    }

    @keyframes sinal-1 {
        0% {
            top: 17em;
        }
        50% {
            top: 20.5em;
        }
    }

    .sinal-2 {
        left: 17.7em;
        top: 20.5em;
    }

    @keyframes sinal-2 {
        0% {
            top: 20.5em;
        }
        50% {
            top: 17em;
        }
    }

    .sinal-3 {
        top: 17em;
        left: 18.3em;
        animation: sinal-3 5s .5s linear infinite;
    }
    
    @keyframes sinal-3 {
        0% {
            top: 17em;
        }
        50% {
            top: 21.5em;
        }
    }

    .imagem {
        width: 400px;
        left: -.1em;
        top: 11em;
    }

    .mainCircle, .circulo, .circulo-2, .circulo-3,
    .circulo-4, .circulo-5 {
        display: none;
    }

    .titulo {
        top: 25em;
        right: -0.5em;
        font-size: 1.4em;
    }

    .square {
        width: 23em;
        right: 0em;
        top: 43em;
        font-size: 1em;
    }

    .footer {
        left: 0;
        top: 54em;
        margin-bottom: 5em;
    }
}

@media screen and (min-width: 361px) and (max-width: 375px) {
    body {
        background: #fff !important;
        overflow: auto;
    }

    .nuvio {
        width: 180px;
        right: 6em;
        top: 2em;
    }

    .nuvem {
        top: 14em;
        left: 14em;
        width: 100px;
    }

    .sinal {
        width: .5em;
        height: .7em;
        left: 17.2em;
        top: 17em;
    }

    @keyframes sinal-1 {
        0% {
            top: 17em;
        }
        50% {
            top: 20.5em;
        }
    }

    .sinal-2 {
        left: 17.7em;
        top: 20.5em;
    }

    @keyframes sinal-2 {
        0% {
            top: 20.5em;
        }
        50% {
            top: 17em;
        }
    }

    .sinal-3 {
        top: 17em;
        left: 18.3em;
        animation: sinal-3 5s .5s linear infinite;
    }
    
    @keyframes sinal-3 {
        0% {
            top: 17em;
        }
        50% {
            top: 21.5em;
        }
    }

    .imagem {
        width: 400px;
        left: -.1em;
        top: 11em;
    }

    .mainCircle, .circulo, .circulo-2, .circulo-3,
    .circulo-4, .circulo-5 {
        display: none;
    }

    .titulo {
        top: 25em;
        right: -.5em;
        font-size: 1.4em;
    }

    .square {
        width: 25em;
        right: -1em;
        top: 43em;
        font-size: 1em;
    }

    .footer {
        left: 0;
        top: 54em;
        margin-bottom: 2em;
    }
}

@media screen and (min-width: 376px) and (max-width: 395px) {
    body {
        background: #fff !important;
        overflow: auto;
    }

    .nuvio {
        width: 180px;
        right: 6em;
        top: 2em;
    }

    .nuvem {
        top: 14em;
        left: 14em;
        width: 100px;
    }

    .sinal {
        width: .5em;
        height: .7em;
        left: 17.2em;
        top: 17em;
    }

    @keyframes sinal-1 {
        0% {
            top: 17em;
        }
        50% {
            top: 20.5em;
        }
    }

    .sinal-2 {
        left: 17.7em;
        top: 20.5em;
    }

    @keyframes sinal-2 {
        0% {
            top: 20.5em;
        }
        50% {
            top: 17em;
        }
    }

    .sinal-3 {
        top: 17em;
        left: 18.3em;
        animation: sinal-3 5s .5s linear infinite;
    }
    
    @keyframes sinal-3 {
        0% {
            top: 17em;
        }
        50% {
            top: 21.5em;
        }
    }

    .imagem {
        width: 400px;
        left: -.1em;
        top: 11em;
    }

    .mainCircle, .circulo, .circulo-2, .circulo-3,
    .circulo-4, .circulo-5 {
        display: none;
    }

    .titulo {
        top: 25em;
        right: -.5em;
        font-size: 1.4em;
    }

    .square {
        width: 25em;
        right: -0.25em;
        top: 43em;
        font-size: 1em;
    }

    .footer {
        left: 0;
        top: 54em;
        margin-bottom: 2em;
    }
}

@media screen and (min-width: 400px) and (max-width: 500px) {
    body {
        background: #fff !important;
        overflow: auto;
    }

    .nuvio {
        width: 180px;
        right: 7em;
        top: 2em;
    }

    .nuvem {
        top: 14em;
        left: 14em;
        width: 100px;
    }

    .sinal {
        width: .5em;
        height: .7em;
        left: 17.2em;
        top: 17em;
    }

    @keyframes sinal-1 {
        0% {
            top: 17em;
        }
        50% {
            top: 20.5em;
        }
    }

    .sinal-2 {
        left: 17.7em;
        top: 20.5em;
    }

    @keyframes sinal-2 {
        0% {
            top: 20.5em;
        }
        50% {
            top: 17em;
        }
    }

    .sinal-3 {
        top: 17em;
        left: 18.3em;
        animation: sinal-3 5s .5s linear infinite;
    }
    
    @keyframes sinal-3 {
        0% {
            top: 17em;
        }
        50% {
            top: 21.5em;
        }
    }

    .imagem {
        width: 400px;
        left: -.1em;
        top: 11em;
    }

    .mainCircle, .circulo, .circulo-2, .circulo-3,
    .circulo-4, .circulo-5 {
        display: none;
    }

    .titulo {
        top: 23em;
        right: 0;
        font-size: 1.5em;
    }

    .square {
        width: 25em;
        right: .5em;
        top: 43em;
        font-size: 1em;
    }

    .footer {
        left: 0;
        top: 54em;
        margin-bottom: 2em;
    }
}

@media screen and (min-width: 500px) and (max-width: 600px) {
    body {
        background: #fff !important;
        overflow: auto;
    }

    .nuvio {
        width: 180px;
        right: 12em;
        top: 2em;
    }

    .nuvem {
        top: 14em;
        left: 18.5em;
        width: 100px;
    }

    .sinal {
        width: .5em;
        height: .7em;
        left: 21.8em;
        top: 17em;
    }

    @keyframes sinal-1 {
        0% {
            top: 17em;
        }
        50% {
            top: 20.5em;
        }
    }

    .sinal-2 {
        left: 22.35em;
        top: 20.5em;
    }

    @keyframes sinal-2 {
        0% {
            top: 20.5em;
        }
        50% {
            top: 17em;
        }
    }

    .sinal-3 {
        top: 17em;
        left: 22.85em;
        animation: sinal-3 5s .5s linear infinite;
    }
    
    @keyframes sinal-3 {
        0% {
            top: 17em;
        }
        50% {
            top: 21.5em;
        }
    }

    .imagem {
        width: 400px;
        left: 4.5em;
        top: 11em;
    }

    .mainCircle, .circulo, .circulo-2, .circulo-3,
    .circulo-4, .circulo-5 {
        display: none;
    }

    .titulo {
        top: 20em;
        right: 3em;
        font-size: 1.7em;
    }

    .square {
        width: 25em;
        right: 5em;
        top: 43em;
        font-size: 1em;
    }

    .footer {
        left: 0;
        top: 54em;
        margin-bottom: 2em;
    }
}

@media screen and (min-width: 600px) and (max-width: 750px) {
    body {
        background: #fff !important;
        overflow: auto;
    }

    .nuvio {
        width: 180px;
        right: 14em;
        top: 2em;
    }

    .nuvem {
        top: 14em;
        left: 22em;
        width: 100px;
    }

    .sinal {
        width: .5em;
        height: .7em;
        left: 25.3em;
        top: 17em;
    }

    @keyframes sinal-1 {
        0% {
            top: 17em;
        }
        50% {
            top: 20.5em;
        }
    }

    .sinal-2 {
        left: 25.85em;
        top: 20.5em;
    }

    @keyframes sinal-2 {
        0% {
            top: 20.5em;
        }
        50% {
            top: 17em;
        }
    }

    .sinal-3 {
        top: 17em;
        left: 26.35em;
        animation: sinal-3 5s .5s linear infinite;
    }
    
    @keyframes sinal-3 {
        0% {
            top: 17em;
        }
        50% {
            top: 21.5em;
        }
    }

    .imagem {
        width: 400px;
        left: 8em;
        top: 11em;
    }

    .mainCircle, .circulo, .circulo-2, .circulo-3,
    .circulo-4, .circulo-5 {
        display: none;
    }

    .titulo {
        top: 20em;
        right: 3em;
        font-size: 1.7em;
    }

    .square {
        width: 25em;
        right: 8em;
        top: 43em;
        font-size: 1em;
    }

    .footer {
        left: 0;
        top: 54em;
        margin-bottom: 2em;
    }
}

@media screen and (min-width: 750px) and (max-width: 850px) {
    body {
        background: #fff !important;
        overflow: auto;
    }

    .nuvio {
        width: 180px;
        right: 7em;
        top: 2em;
    }

    .nuvem {
        top: 14em;
        left: 14em;
        width: 100px;
    }

    .sinal {
        width: .5em;
        height: .7em;
        left: 17.2em;
        top: 17em;
    }

    @keyframes sinal-1 {
        0% {
            top: 17em;
        }
        50% {
            top: 20.5em;
        }
    }

    .sinal-2 {
        left: 17.7em;
        top: 20.5em;
    }

    @keyframes sinal-2 {
        0% {
            top: 20.5em;
        }
        50% {
            top: 17em;
        }
    }

    .sinal-3 {
        top: 17em;
        left: 18.3em;
        animation: sinal-3 5s .5s linear infinite;
    }
    
    @keyframes sinal-3 {
        0% {
            top: 17em;
        }
        50% {
            top: 21.5em;
        }
    }

    .imagem {
        width: 400px;
        left: -.1em;
        top: 11em;
    }

    .mainCircle, .circulo, .circulo-2, .circulo-3,
    .circulo-4, .circulo-5 {
        display: none;
    }

    .titulo {
        top: 15em;
        right: 0;
        font-size: 1.5em;
    }

    .square {
        width: 25em;
        right: 9em;
        top: 40em;
        font-size: 1em;
    }

    .footer {
        left: 0;
        top: 54em;
        margin-bottom: 2em;
    }
}

@media screen and (min-width: 850px) and (max-width: 950px) {
    body {
        background: #fff !important;
        overflow: auto;
    }

    .nuvio {
        width: 180px;
        right: 7em;
        top: 2em;
    }

    .nuvem {
        top: 14em;
        left: 17em;
        width: 150px;
    }

    .sinal {
        width: .5em;
        height: .7em;
        left: 21.55em;
        top: 19em;
    }

    @keyframes sinal-1 {
        0% {
            top: 19em;
        }
        50% {
            top: 23em;
        }
    }

    .sinal-2 {
        left: 22.25em;
        top: 23em;
    }

    @keyframes sinal-2 {
        0% {
            top: 23em;
        }
        50% {
            top: 18em;
        }
    }

    .sinal-3 {
        top: 19em;
        left: 22.9em;
        animation: sinal-3 5s .5s linear infinite;
    }
    
    @keyframes sinal-3 {
        0% {
            top: 19em;
        }
        50% {
            top: 23.5em;
        }
    }

    .imagem {
        width: 500px;
        left: -.1em;
        top: 11em;
    }

    .mainCircle, .circulo, .circulo-2, .circulo-3,
    .circulo-4, .circulo-5 {
        display: none;
    }

    .titulo {
        top: 15em;
        right: 0;
        font-size: 1.5em;
    }

    .square {
        width: 25em;
        right: 1em;
        top: 40em;
        font-size: 1em;
    }

    .footer {
        left: 0;
        top: 54em;
        margin-bottom: 2em;
    }
}

@media screen and (min-width: 950px) and (max-width: 1170px) {
    body {
        overflow: auto;
    }
    .nuvio {
        width: 180px;
        right: 7em;
        top: 2em;
    }

    .nuvem {
        top: 14em;
        left: 17em;
        width: 150px;
        position: fixed;
    }

    .sinal {
        width: .5em;
        height: .7em;
        left: 21.55em;
        top: 19em;
        position: fixed;
    }

    @keyframes sinal-1 {
        0% {
            top: 19em;
        }
        50% {
            top: 23em;
        }
    }

    .sinal-2 {
        left: 22.25em;
        top: 23em;
    }

    @keyframes sinal-2 {
        0% {
            top: 23em;
        }
        50% {
            top: 18em;
        }
    }

    .sinal-3 {
        top: 19em;
        left: 22.9em;
        animation: sinal-3 5s .5s linear infinite;
    }
    
    @keyframes sinal-3 {
        0% {
            top: 19em;
        }
        50% {
            top: 23.5em;
        }
    }

    .imagem {
        width: 500px;
        left: -.1em;
        top: 11em;
        position: fixed;
    }


    .titulo {
        top: 9em;
        right: 0;
        font-size: 2em;
    }

    .square {
        width: 27em;
        right: 1em;
        top: 24.5em;
        font-size: 1.2em;
    }

    .footer {
        left: 0;
        top: 42.5em;
        margin-bottom: 2em;
    }
}

@media screen and (min-width: 1170px) and (max-width: 1350px) {
    body {
        overflow: hidden;
    }

    .nuvio {
        width: 250px;
        right: 7em;
        top: 2em;
        position: fixed;
    }

    .nuvem {
        top: 10em;
        left: 25em;
        width: 180px;
    }

    .sinal {
        width: .8em;
        height: .8em;
        left: 30.2em;
        top: 15em;
    }

    @keyframes sinal-1 {
        0% {
            top: 15em;
        }
        50% {
            top: 22em;
        }
    }

    .sinal-2 {
        left: 31.15em;
        top: 22em;
    }

    @keyframes sinal-2 {
        0% {
            top: 22em;
        }
        50% {
            top: 14.5em;
        }
    }

    .sinal-3 {
        top: 15em;
        left: 32em;
        animation: sinal-3 5s .5s linear infinite;
    }
    
    @keyframes sinal-3 {
        0% {
            top: 15em;
        }
        50% {
            top: 23em;
        }
    }

    .imagem {
        width: 700px;
        left: -.1em;
        top: 5em;
    }


    .titulo {
        top: 7em;
        right: 0;
        font-size: 2.5em;
    }

    .square {
        width: 29em;
        right: 1em;
        top: 26em;
        font-size: 1.2em;
    }

    .footer {
        left: 0;
        top: 44em;
        margin-bottom: 2em;
    }
}

@media screen and (min-width: 1350px) and (max-width: 1450px) {
    body {
        overflow: auto;
    }
    .nuvio {
        width: 180px;
        right: 7em;
        top: 2em;
    }

    .nuvem {
        top: 6em;
        left: 29em;
        width: 200px;
        position: fixed;
    }

    .sinal {
        width: .9em;
        height: .9em;
        left: 34.5em;
        top: 12em;
        position: fixed;
    }

    @keyframes sinal-1 {
        0% {
            top: 12em;
        }
        50% {
            top: 21em;
        }
    }

    .sinal-2 {
        left: 35.6em;
        top: 21em;
    }

    @keyframes sinal-2 {
        0% {
            top: 21em;
        }
        50% {
            top: 11em;
        }
    }

    .sinal-3 {
        top: 12em;
        left: 36.6em;
        animation: sinal-3 5s .5s linear infinite;
    }
    
    @keyframes sinal-3 {
        0% {
            top: 12em;
        }
        50% {
            top: 21.5em;
        }
    }

    .imagem {
        width: 800px;
        left: -.1em;
        top: 1em;
        position: fixed;
    }


    .titulo {
        top: 7em;
        right: 2em;
        font-size: 2.2em;
    }

    .square {
        width: 29em;
        right: 4em;
        top: 24em;
        font-size: 1.2em;
    }

    .footer {
        left: 0em;
        top: 45em;
        margin-bottom: 2em;
    }
}

@media screen and (min-width: 1450px) and (max-width: 1750px) {
    body {
        overflow: auto;
    }
    .nuvio {
        width: 180px;
        right: 7em;
        top: 2em;
    }

    .nuvem {
        top: 6em;
        left: 29em;
        width: 200px;
        position: fixed;
    }

    .sinal {
        width: .9em;
        height: .9em;
        left: 34.5em;
        top: 11em;
        position: fixed;
    }

    @keyframes sinal-1 {
        0% {
            top: 11em;
        }
        50% {
            top: 21em;
        }
    }

    .sinal-2 {
        left: 35.6em;
        top: 21em;
    }

    @keyframes sinal-2 {
        0% {
            top: 21em;
        }
        50% {
            top: 11em;
        }
    }

    .sinal-3 {
        top: 11em;
        left: 36.6em;
        animation: sinal-3 5s .5s linear infinite;
    }
    
    @keyframes sinal-3 {
        0% {
            top: 11em;
        }
        50% {
            top: 21.5em;
        }
    }

    .imagem {
        width: 800px;
        left: -.1em;
        top: 1em;
        position: fixed;
    }


    .titulo {
        top: 7em;
        right: 5em;
        font-size: 2.2em;
    }

    .square {
        width: 29em;
        right: 4em;
        top: 24em;
        font-size: 1.2em;
    }

    .footer {
        left: 0;
        top: 42em;
        margin-bottom: 2em;
    }
}

@media screen and (min-width: 2560px) {
    body {
        overflow: auto;
    }
    .nuvio {
        width: 375px;
        right: 7em;
        top: 2em;
    }

    .nuvem {
        top: 6em;
        left: 38em;
        width: 300px;
        position: fixed;
    }

    .sinal {
        width: 1em;
        height: 1.2em;
        left: 46.1em;
        top: 15em;
        position: fixed;
    }

    @keyframes sinal-1 {
        0% {
            top: 15em;
        }
        50% {
            top: 26em;
        }
    }

    .sinal-2 {
        left: 47.5em;
        top: 26em;
    }

    @keyframes sinal-2 {
        0% {
            top: 26em;
        }
        50% {
            top: 14.5em;
        }
    }

    .sinal-3 {
        top: 15em;
        left: 48.8em;
        animation: sinal-3 5s .5s linear infinite;
    }
    
    @keyframes sinal-3 {
        0% {
            top: 15em;
        }
        50% {
            top: 27em;
        }
    }

    .imagem {
        width: 950px;
        left: 5em;
        top: 3em;
        position: fixed;
    }


    .titulo {
        top: 7em;
        right: 5em;
        font-size: 2.7em;
    }

    .square {
        width: 29em;
        right: 10em;
        top: 24em;
        font-size: 1.5em;
    }

    .footer {
        left: 0;
        top: 57em;
        margin-bottom: 2em;
        color: #fff;
    }
}