﻿.apresentacao-index {
    width: 100vw;
    height: 400px;
    overflow: hidden;
    position: relative;
    z-index: 9;
}
.contato-index {
    background-color:#ffffff;
}
.conexao-contato-rodape {
    background-color: #ffffff;
    margin-top: 100px;
}
/* Para telas iguais ou maiores que 1200px */
@media screen and (min-width: 1200px) {
    .titulo-h2 h2{
        color:#2e8ccb;
        font-size: 4em;
        margin-block-start: 0em;
        margin-block-end: 0.2em;
    }
    .titulo-h2 h1{
        color:#2e8ccb;
        font-size: 1.17em;
    }
    .titulo-h2 p{
        width: 60%;
        height: auto;
        margin: 0px auto;
        color: #808080;
    }
}

/* Entre 1000px e 1199px de tela (200px a menos) */
@media screen and (min-width: 1000px) and (max-width: 1199px){
    .titulo-h2 h2{
        color:#2e8ccb;
        font-size: 4em;
        margin-block-start: 0em;
        margin-block-end: 0.2em;
    }
    .titulo-h2 h1{
        color:#2e8ccb;
        font-size: 1.17em;
    }
    .titulo-h2 p{
        width: 60%;
        height: auto;
        margin: 0px auto;
        color: #808080;
    }
}

/* Entre 800px e 999px de tela (200px a menos) */
@media screen and (min-width: 800px) and (max-width: 999px){
    .titulo-h2 h2{
        color:#2e8ccb;
        font-size: 3em;
        margin-block-start: 0em;
        margin-block-end: 0.2em;
    }
    .titulo-h2 h1{
        color:#2e8ccb;
        font-size: 1.17em;
    }
    .titulo-h2 p{
        width: 60%;
        height: auto;
        margin: 0px auto;
        color: #808080;
    }
}

/* Entre 600px e 799px de tela (200px a menos) */
@media screen and (min-width: 600px) and (max-width: 799px){
    .titulo-h2 h2{
        color:#2e8ccb;
        font-size: 2em;
        margin-block-start: 0em;
        margin-block-end: 0.2em;
    }
    .titulo-h2 h1{
        color:#2e8ccb;
        font-size: 1.17em;
    }
    .titulo-h2 p{
        width: 60%;
        height: auto;
        margin: 0px auto;
        color: #808080;
    }
}

/* A baixo de 600px - Versão para celular */
@media screen and (max-width: 599px){
    .titulo-h2 h2{
        color:#2e8ccb;
        font-size: 2em;
        margin-block-start: 0em;
        margin-block-end: 0.2em;
    }
    .titulo-h2 h1{
        color:#2e8ccb;
        font-size: 1.17em;
    }
    .titulo-h2 p{
        width: 100%;
        height: auto;
        margin: 0px auto;
        color: #808080;
    }
    .apresentacao-index {
        width: 100vw;
        height: 315px;
        overflow: hidden;
        position: relative;
        z-index: 9;
    }
}

@media screen and (min-width: 800px) and (max-width: 999px) {
    .rodape .coluna_a_rodape {
        width: 48%;
        height: auto;
        margin-left: 1%;
        margin-right: 1%;
        float: left;
        text-align: left;
        margin-top: 50px;
        margin-bottom: 50px;
    }
}

@media screen and (min-width: 800px) and (max-width: 999px) {
    .quadrado-5 {
        border-radius: 5px;
        transform: rotate(45deg);
        position: absolute;
        margin-left: 90%;
        margin-top: 31%;
        animation: subidaDescida 8s ease infinite alternate;
    }
}

@media screen and (min-width: 600px) and (max-width: 799px) {
    .quadrado-1 {
        border-radius: 5px;
        transform: rotate(45deg);
        position: absolute;
        margin-left: 10%;
        margin-top: 25%;
        animation: subidaDescida 5s ease infinite alternate;
    }
    .quadrado-4 {
        border-radius: 5px;
        transform: rotate(45deg);
        position: absolute;
        margin-left: 80%;
        margin-top: 30%;
        animation: subidaDescida 12s ease infinite alternate;
    }
    .quadrado-5 {
        border-radius: 5px;
        transform: rotate(45deg);
        position: absolute;
        margin-left: 87%;
        margin-top: 63%;
        animation: subidaDescida 8s ease infinite alternate;
    }
}

.coluna-contato p {
    color: #808080;
}