@charset "UTF-8";

#nome_inteiro{display: none;}
#nome_reduzido {display: none;}
#nome_icon {display: block;}
.secPosHeader-principal {
    display: none;
}

@media screen and (min-width: 450px) {
    .item {
        width: 80vw;
    } nav {
        padding-right: 10px;
    } #colorButton {
        display: flex;
    }
} @media screen and (min-width: 550px) {
    #navTwo {display: block;}
    .item {
        min-width: 240px;
        width: 40vw;
    } .materia .item {
        min-width: 240px;
        width: 70vw;
        min-height: 400px;
    } .divPosHeader_phrase {
        border: 1px solid var(--gray);
        margin: 0px auto;
        width: 90vw;
        height: fit-content;
        padding: 20px 15px;
    } .divPosHeader_phrase p {
        font-size: 1.4em;
    } .divPosHeader_phrase p:first-child {
        margin-bottom: 20px;
    }
} @media screen and (min-width: 660px) {
    #nome_reduzido {display: block;}
    nav {
        gap: 10px;
    } nav a {
        padding: 0px 10px;
        font-size: 1.2em;
    } .item {
        min-width: 240px;
        width: 40vw;
    } .materia {
        gap: 30px 10px;
    } .materia .item {
        width: 40vw;
        min-height: 320px;
    } .divPosHeader_phrase {
        margin: 0px auto;
        width: 90vw;
        padding: 25px 20px;
    } .divPosHeader_phrase p {
        font-size: 1.5em;
    } .divPosHeader_phrase p:first-child {
        margin-bottom: 25px;
    }
} @media screen and (min-width: 770px) {
    #nome_reduzido {display: block;}
    .item {
        min-width: 240px;
        width: 40vw;
    } .divPosHeader_phrase {
        margin: 0px auto;
        width: 90vw;
        padding: 40px 20px;
    } .divPosHeader_phrase p {
        font-size: 1.7em;
    } .divPosHeader_phrase p:first-child {
        margin-bottom: 30px;
    } #email-container-break { 
        flex-direction: row;
    }
} @media screen and (min-width: 861px) {
    #nome_icon {display: none;}
    #nome_inteiro {display: block;}
    #nome_reduzido {display: none;}
    .item {
        min-width: 240px;
        width: 30vw;
    }
} @media screen and (min-width:900px) {
    #menu {
        display: none;
    } menu {
        display: none;
    } #navFive {display: block;}
    .item {
        min-width: 240px;
        width: 30vw;
    } .materia {
        gap: 30px 10px;
        max-width: 1300px;
    } .materia .item {
        width: 40vw;
        min-height: 320px;
    }
} @media screen and (min-width: 942px) {
    .item {
        min-width: 240px;
        width: 30vw;
        max-width: 370px;
    } .materia {
        gap: 30px 10px;
        max-width: fit-content;
    } .materia .item {
        width: 100%;
        min-height: 320px;
    }
} @media screen and (min-width: 1000px) {
    #nome_icon {display: block;}
    .secPosHeader {
        min-height: 450px;
        margin: auto auto 30px auto;
    } .secPosHeader_h1 {
        margin-top: 70px;
    } 
} @media screen and (min-width: 1450px) {
    .secPosHeader-principal {
        display: flex;
    }
}