/*index*/
body {

    font-family: Nunito, sans-serif;
    overflow-x: hidden;
    /* Hide horizontal scrollbar */
    margin: 0 auto;
    padding: 0 auto;
}


h1,
h2,
h3 {

    font-family: Asap, sans-serif;


}


nav img {


    border-radius: 300px;

}


header {

    display: flex;
    flex-direction: column;
    align-items: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    padding: 20px;


}


#topo {

    background-image: url("../img/fundo.png");

}

#topo h1 {

    align-self: flex-start;
    font-family: Asap, sans-serif;
    color: #FFFFFF;


}



#sobre {

    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 10px 20px 20px;
    background-color: #ffc107;

}




#sobre p {

    margin-bottom: .4em;

}




#comp {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    padding: 175px;

}


/*contato*/
#contato {
    background-color: #FFFFFF;
    color: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;


}

#cont {

    text-align: center;
    text-decoration: none;
    background-color: #ffc107;
    /* background-color: #007bff;*/
    /* color: #FFFFFF;   */
    color: #000000;
    padding: 0px;

}


#contato p {

    font-family: Asap, sans-serif;
    color: #000000;
}



/*rodape para index + fotos + produtos*/
footer {

    text-align: center;
    padding: 20px;
    background-color: #ffc107;
    /*background-color: #007bff;*/
    color: #000000;

}

footer a {

    text-decoration: none;
    color: #FFFFFF;
}








@media screen and (min-width: 150px) {

    nav img {
        padding: 5px;
        height: 150px;
        border-radius: 300px;
    }


    #cx h2 {
        font-size: 15px;
    }

    #navbarNavAltMarkup h2 {
        font-size: 15px;
    }
    

    header {

        height: 600px;
        height: 60vh;
        justify-content: center;


    }


    #topo {
        background-image: url("../img/fundo.png");
        padding: 150px;
        height: 150px;
    }


    #topo h1 {
         font-size: 25px;
    }

    #comp {
        background-image: url("../img/compromisso.png");
        padding: 100px;
        height: 100px;
    }




   


    /*contato*/
    #contato {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        max-width: 500px;
        margin: 0 auto;
    }


    #contato h2,
    #contato p {
          width: 100%;
    }

    
    #cont h2 {
        font-size: 25px;
    }


    #contato p {
        font-size: 10px;
    }


    footer p {
        font-size: 8px;
    }
}



@media screen and (min-width: 1020px) {
    
    nav img {
        padding: 10px;
        height: 300px;
        border-radius: 300px;
    }


    #cx h2 {
        font-size: 40px;
    }


    #navbarNavAltMarkup h2 {
        font-size: 40px;

    }


    #topo {
        background-image: url("../img/fundo.png");
        padding: 300px;
        height: 300px;
    }


    #topo h1 {
        font-size: 50px;
    }


    #comp {
        background-image: url("../img/compromisso.png");
        padding: 300px;
        height: 300px;
    }


    #cont h2 {

        font-size: 50px;

    }

    #contato p {
        font-size: 20px;

    }

    footer p {
        font-size: 15px;

    }
}