/* 

Css para img: object-fit: cover;

bordas: box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 


*/
.hm-section-center-page{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/************************/
/* BANNERS DO SITE */
.hm-section-banners{
    width: 100%;
    max-width: 1920px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* DESKTOP */
.hm-banner-display-desktop{
    width: 100%;
    display: flex !important;
}
.hm-banner-image-desktop{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit: contain;
}

/* MOBILE */
.hm-banner-display-mobile{
    display: none;
    width: 100%;
}
.hm-banner-image-mobile{
    width: 100%;
    object-fit: contain;
}

/***********************/
/* CONTAINER ICONES DAS MARCAS */
.hm-display-brands{
    z-index: 1;
    width: 80%;
    margin: 25px 0;
    margin-top: -27px;
    display: flex;
    justify-content: space-between;
    background: var(--bg-secundary);
    border-radius: 2px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
}
.hm-container-brands a{
    margin: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/***********************/
/* DISPLAY PAGE */
.hm-section-display-page{
    width: 80%; 
    display: flex;
    flex-direction: column;
    align-items: center;
}





/***********************/
/* SOBRE NOS */
.hm-section-main-sobrenos{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.hm-section-title-sobre-nos{
    width: 100%;
    margin: 26px 0;
    display: flex;
    justify-content: center;
}
.hm-section-title-sobre-nos span{
    font-size: 1.2rem;
    color: var(--color-one);
}





.hm-container-sobrenos-info{
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: var(--bg-secundary);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.hm-container-compac-sobrenos{
    margin: 26px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
}
.hm-container-image-sobrenos{
    width: 70%;
}
.hm-display-banner-sobrenos{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}




.hm-img-sobrenos-desktop{
    width: 100%;
}
.hm-img-sobrenos-mobile{
    display: none;
    width: 100%;
}





.hm-container-null-sobrenos{
    width: 30%;
    display: flex;
    align-items: center;
}
.hm-container-sobrenos-display{
    margin: 50px;
    margin-right: -60px;
    text-align: right;
}
.hm-container-sobrenos-name{
    padding: 16px;
    display: flex;
    flex-direction: column;
    background: var(--bg-secundary);
}
.hm-sobrenos-title-desc{
    text-decoration: none;
    display: flex;
    flex-direction: column;
}
.hm-sobrenos-title-desc span:nth-child(1){
    font-size: 1rem;
    margin-bottom: 5%;
    color: var(--color-one);
}
.hm-sobrenos-title-desc span:nth-child(2){
    font-size: 0.8rem;
    color: var(--color-one);
}





/*****************************/
/*****************************/
/*****************************/
/* MARCAS DISPLAY */
.hm-section-brand-display{
    width: 100%;
}

/* SEPARATOR */
.separator-page-brands{
    width: 100%;
    margin: 36px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.separator-page-brands span{
    font-size: 0.9rem;
    margin: 0 16px;
    white-space: nowrap;
    color: var(--color-one);
}
.separator{
    width: 100%;
    height: 1px;
    background-color: var(--color-one);
}

/**********************************/
/**********************************/
/* SECTION BRAND DISPLAY */

.hm-container-brand-info{
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: var(--bg-secundary);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.hm-container-compac-brand{
    margin: 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hm-container-image-brand{
    width: 70%;
}
.hm-display-banner{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hm-image-brand-desktop{
    width: 100%;
}
.hm-image-brand-mobile{
    display: none;
    width: 100%;
}


.hm-container-null-brand{
    width: 30%;
    display: flex;
    align-items: center;
}
.hm-container-name-display{
    margin: 50px;
    margin-left: -60px;
}
.hm-container-brand-name{
    padding: 16px;
    display: flex;
    flex-direction: column;
    background: var(--bg-secundary);
}
.hm-container-brand-name a{
    text-decoration: none;
    display: flex;
    flex-direction: column;
}
.hm-container-brand-name a span:nth-child(1){
    font-size: 1rem;
    margin-bottom: 5%;
    color: var(--color-one);
}
.hm-container-brand-name a span:nth-child(2){
    font-size: 0.8rem;
    color: var(--color-one);
}

/**********************************/
/**********************************/
/* SECTION LIST ICONS BRANDS */
.hm-section-list-brands-icons{
    width: 100%;
    margin: 72px 0;
    display: flex;
    justify-content: space-around;
    
}
.hm-container-brand-icon{
    width: 180px;
    background: var(--bg-secundary);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.hm-icon-link-brand{
    text-decoration: none;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hm-icon-banner-brand{
    width: 100%;
}
.hm-icon-banner-brand img{
    width: 100%;
}
.hm-container-title-brand{
    width: 100%;
    display: flex;
    justify-content: center;
}
.hm-container-title-brand img{
    width: 50%;
    padding: 3px;
    margin-top: -17px;
    background: var(--bg-secundary);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.hm-container-title-text-icon{
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 7px;
}
.hm-container-title-text-icon span{
    font-size: 0.75rem;
    color: var(--color-one);
}

/**********************************/
/**********************************/
/* SECTION BRAND DISPLAY INVERT */

.hm-container-brand-info-invert{
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: var(--bg-secundary);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.hm-container-compac-brand-invert{
    margin: 26px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
}
.hm-container-image-brand-invert{
    width: 70%;
}
.hm-display-banner-desktop{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hm-image-brand-desktop-invert{
    width: 100%;
}
.hm-image-brand-mobile-invert{
    display: none;
    width: 100%;
}


.hm-container-null-brand-invert{
    width: 30%;
    display: flex;
    align-items: center;
}
.hm-container-name-display-invert{
    margin: 50px;
    margin-right: -60px;
}
.hm-container-brand-name-invert{
    padding: 16px;
    display: flex;
    flex-direction: column;
    text-align: right;
    background: var(--bg-secundary);
}
.hm-container-brand-name-invert a{
    text-decoration: none;
    display: flex;
    flex-direction: column;
}
.hm-container-brand-name-invert a span:nth-child(1){
    font-size: 1rem;
    margin-bottom: 5%;
    color: var(--color-one);
}
.hm-container-brand-name-invert a span:nth-child(2){
    font-size: 0.8rem;
    color: var(--color-one);
}

/**********************************/
/**********************************/
/* SECTION BANNER PAGE HOME */

/*
.hm-display-banner-body{
    width: 100%;
    margin: 47px 0;
}
.hm-section-banner-body-desktop{
    width: 100%;
    display: flex;
    justify-content: center;
}
.hm-section-banner-body-desktop img{
    width: 100%;
}

.hm-section-banner-body-mobile{
    width: 100%;
    display: none;
    justify-content: center;
}
.hm-section-banner-body-mobile img{
    width: 100%;
}*/


/**********************************/
/**********************************/
/* SECTION NEWSLETTERs */
.section-hm-section-newsletter{
    width: 100%;
    display: flex;
    justify-content: center;
    background: var(--bg-color);
}
.hm-container-newsletter-comp{
    width: 80%;
    padding: 23px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.hm-newsletter-icon i{
    font-size: 42px;
    color: var(--color-two);
}
.hm-newsletter-formulario{
    width: 60%;
}

/* FORMULARIO */
.hm-formulario-newsletter{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.hm-new-row{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.hm-new-row label{
    font-size: 0.7rem;
    color: var(--color-two);
}
.hm-new-row input[type=email]{
    border: 0;
    border-bottom: 1px solid var(--color-two);
    padding: 2px 8px;
    margin-top: 8px;
    outline: 0;
    background: transparent;
    width: 70%;
    color: var(--color-two);
}
.hm-new-command button{
    border: 1px solid var(--color-two);
    font-size: 0.8rem;
    outline: 0;
    border-radius: 3px;
    cursor: pointer;
    color: var(--color-two);
    padding: 5px 9px;
    background: transparent;
    transition: 0.5s;
}
.hm-new-command button:hover{
    transition: 0.5s;
    border: 1px solid var(--color-three);
    color: var(--color-three);
}


/************************/
/************************/
/* newsletter successful */
#newsletter-section-display-successful{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(192, 192, 192, 0.281);
}

.newsletter-successful-tela{
    background: var(--bg-secundary);
    border-radius: 4px;
}

.newsletter-successful-main-display{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    
}
.newsletter-successful-main-display img{
    width: 45%;
    margin-top: 28px;
}
.newsletter-successful-text-msg{
    width: 95%;
    height: 95%;
    display: flex;
    flex-direction: column;
    
}
.newsletter-successful-text-msg span{
    font-size: 0.8rem;
    color: var(--color-one);
    text-align: center;
}


/**************************/
/**************************/
/* RESPONSIVE */
@media only screen and (max-width: 1200px) {
    .hm-container-brand-icon:nth-last-child(1){
        display: none;
    }
}
@media only screen and (max-width: 900px) {
    .hm-container-brand-icon:nth-last-child(2){
        display: none;
    }
}
@media only screen and (max-width: 800px) {
    .hm-container-brand-icon:nth-last-child(3){
        display: none;
    }
    .hm-section-display-page{
        width: 95%; 
    }
    .hm-container-brand-icon{
        width: 140px;
    }

    /*******************************/
    /*******************************/
    /* BANNER SOBRE NOS */
    .hm-container-image-sobrenos{
        width: 100%;
    }
    .hm-img-sobrenos-desktop{
        display: none;
    }
    .hm-img-sobrenos-mobile{
        display: flex !important;
    }
    .hm-container-compac-sobrenos{
        flex-direction: column;
    }

    .hm-container-null-sobrenos{
        width: 95%;
        display: flex;
    }

    .hm-container-sobrenos-name{
        padding: 16px;
    }

    .hm-container-sobrenos-display{
        margin: 0;
        margin-top: -60px;
        margin-right: 0;
        text-align: left;
    }

    /* DESKTOP */
    .hm-banner-display-desktop{
        display: none !important;
    }

    /* MOBILE */
    .hm-banner-display-mobile{
        display: flex;
        width: 100%;
    }
    

    /*******************************/
    /*******************************/
    /* SECTION DA MARCA */
    .hm-container-compac-brand{
        margin: 16px;
        flex-direction: column;
        align-items: center;
    }
    .hm-image-brand-desktop{
        display: none;
    }
    .hm-image-brand-mobile{
        display: block;
    }
    .hm-container-image-brand{
        width: 100%;
    }
    .hm-container-null-brand{
        width: 95%;
        display: flex;
        justify-content: center !important;
        align-items: flex-end;
    }
    .hm-container-name-display{
        margin: 16px;
        margin: 0;
        margin-top: -50px;
    }
    .hm-container-brand-name a span:nth-child(1){
        font-size: 0.9rem;
    }
    .hm-container-brand-name a span:nth-child(2){
        font-size: 0.7rem;
    }

    /*******************************/
    /*******************************/
    /* SECTION DA MARCA INVERTIDA */
    .hm-container-compac-brand-invert{
        margin: 16px;
        flex-direction: column;
        align-items: center;
    }
    .hm-image-brand-desktop-invert{
        display: none;
    }
    .hm-image-brand-mobile-invert{
        display: block;
    }
    .hm-container-image-brand-invert{
        width: 100%;
    }
    .hm-container-null-brand-invert{
        width: 95%;
        display: flex;
        justify-content: center !important;
        align-items: flex-end;
    }
    .hm-container-name-display-invert{
        margin: 16px;
        margin: 0;
        margin-top: -50px;
    }
    .hm-container-brand-name-invert{
        text-align: left;
    }
    .hm-container-brand-name-invert a span:nth-child(1){
        font-size: 0.9rem;
    }
    .hm-container-brand-name-invert a span:nth-child(2){
        font-size: 0.7rem;
    }

    /*******************************/
    /*******************************/
    /* BANNER QUE VAI NA PAGINA */
    .hm-section-banner-body-desktop{
        display: none;
    }
    .hm-section-banner-body-mobile{
        display: block;
    }


    /*******************************/
    /*******************************/
    /* FORMULARIO NEWSLETTER */
    .hm-formulario-newsletter{
        flex-direction: column;
        align-items: center;
    }
    .hm-new-row{
        width: 100%;
        display: flex;
        align-items: center;
    }
    .hm-new-row input[type=email]{
        margin-top: 10px;
        text-align: center;
        width: 100%;
    }
    .hm-new-command{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .hm-new-command{
        margin-top: 26px;
    }
    .hm-newsletter-icon i{
        font-size: 72px;
        color: var(--color-two);
    }






}
@media only screen and (max-width: 500px) {
    .hm-container-newsletter-comp{
        display: flex;
        flex-direction: column;
    }
    .hm-newsletter-icon{
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 26px;
    }
    .hm-newsletter-icon i{
        font-size: 52px;
        color: var(--color-two);
    }
    .hm-newsletter-formulario{
        width: 100%;
    }

}