*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* container principal nosso header */
#main-header{
    padding: 0;
    margin: 0;
    position: relative;
    width: 100%;
    height: 100vh;
    z-index: 2;

    


    background-image: url('../src/artesajsbackground.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;


    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


#logo-main{
    
    
    
    margin: 0 auto;
    max-width: 85%;


    text-align: center;

}

#logo-main img{

    margin-top: 2em;
    width: 95%;
    height: auto;
}







/* essa div faz parte da media para dispositvos como desktop e tablets por isso oculta */
#menu-nav{
    display: none;
    
}

/* checkbox slide bar */
#inCheck{
    display: none;
}

#checkCall{
    display: none;
}


/*  */
/* elemento fixed call center whatsapp */
#painelContato{
    
    position: fixed;
    bottom: 2em;
    right: -100%;
    padding: 0.2em;
    width: 100%;
    height: 8em;

    z-index: 3;

    transition: right 1.5s .5s;
    
}

#painelCall{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(0, 0, 0, 0.6);

   

}

#painelCall label{
    position: absolute;
    top: 0.5em;
    right: 1em;
    cursor: pointer;


}


#painelCall label i{
    color: #FFFF00;
    font-size: 1.2em;
}   



#sub-painelCall{
    
    width: 70vw;
    padding: 0.5em;
    
   
    text-align: center;
   
    background-color: rgb(0, 0, 0, 0.7);

    padding: 0.6em;
    border-radius: 1em;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    transition: right 1.5s .5s;

}



#sub-painelCall p{
    
    z-index: 2;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFF00;
    
}

#sub-painelCall a{
    z-index: 2;
    padding: 0.3em;
    margin-top: 0.3em;
    background: #9acd32;
    border-radius: 0.5em;
    width: 50%;
    margin-left: 0.5em;
    font-size: 1.3em;
    text-align: center;
    
}

/* checagem do checkbox para painel call center */
#checkCall:checked ~ #painelContato{
    right: 0;
}

/* #checkCall:not(checked) ~ #painelContato{
    right: -100%;
} */

/*  */



/*  */
#navbar-header{
    position: fixed;
    top: 0;
    z-index: 3;
    width: 100%;
    padding: 0.2em;
    display: flex;
    align-items: center;
    justify-content: center;

    background-color: rgb(0, 0, 0);

    border-bottom: 0.2em solid #87CEFA;
}
/*  */




/*  */
/*  */
/*  ESTILIZAÇÃO DO MENU NAV INICIO */

.buttonCheckBar{
    display: block;
    margin: 0;
    padding: 0;
    margin-top: 0.2em;
    width: 2.5em;
    height: 2.5em;

    text-align: center;
}

.buttonCheckBar i{
    color:  #FFFF00;
    font-size: 2.1em;
    cursor: pointer;
}

#painel-menu{
    position: absolute;
    top: 3.2em;
    right: -100%;
    padding: 3.2em 0.5em;

    transition: right 1.3s .5s;

    height: 100vh;
    width: 100vw;
    background: rgb(0, 0, 0, 0.6);


}

#painel-menu ul {
    list-style-type: none;

    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    
}

#painel-menu ul li{
    padding: 0.6em;
    margin: 1.3em 0;
    background-color: rgb(0, 0, 0, 0.6);
    text-align: center;

}

#painel-menu ul li a{
    font-size: 1.5em;
    border-bottom: 0.12em solid #87CEFA;
    text-decoration: none;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    color: 	#FFFF00;
    cursor: pointer;

}

#painel-menu ul li button{
    border: none;
    font-size: 1.4em;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-transform: uppercase;
    background: #0000CD;
    color: #FFFF00;
    font-weight: bold;
    padding: 0.3em;
    border-radius: 0.5em;

    cursor: pointer;
} 


/* #inCheck:checked ~ #painel-menu{
    right: 0;

} */

/* FIM ESTILIZAÇÃO MENU NAV */
/*  */
/*  */