/*
 Theme Name:     Metal Gruas
 Theme URI:      
 Description:    Metal Gruas
 Author:         Anderson Chagas
 Author URI:     https://www.eloquent.marketing
 Template:       Divi
 Version:        1.0.0
*/

*{
	word-wrap:  normal !important;
}
html {
	scroll-behavior: smooth;
}

body:not(.home) header#main-header{
    background-color: #0a005d;
}

.bt_sombra{
    box-shadow: 0 4px 2px 0 rgb(10 0 93 / 30%);
}

.text_laranja{
    color: #ffb501 !important;
}
.text_azul{
    color: #0a005d !important;
}

.bt_azul{
    background-color: #0539c4 !important;
    color: #fff !important
}

.bt_azul_escuro{
    background-color: #09165D !important;
    border-color: #09165D !important;
    color: #fff !important
}
.bt_azul_escuro:hover{
    background-color: #ffb501 !important;
    border-color: #09165D !important;
    color: #09165D !important
}








.logos_clientes .et_pb_image {
	max-width: 230px;
    min-width: 200px;
    margin: 0 auto !important;
    padding: 15px 20px;
}

.logos_clientes .et_pb_column {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}



/* Botões */
.et_pb_button_module_wrapper .et_pb_button, .et_pb_button_module_wrapper .et_pb_button:hover {
    padding: 1em 2.5em !important;
}



@media (min-width: 768px) {  

    #inscrevase{
        position: absolute;
        width: 100%;
        transform: translatey(-50%);
        z-index: 99;
    }

    #contato{
        padding-bottom: 220px;
    }
    #rodape{
        padding-top: 220px;
    }

    #top-menu-nav>ul>li>a:hover{
        opacity: 1 !important;
    }
    .menu-item:not(.icon-social):not(.bt_contato_menu) a:after{
        display: block;
        width: 0;
        height: 5px;
        background: #ffb501;
        position: relative !important;
        content: "" !important;
        margin: 0 auto;
        border-radius: 10px;
        top: 10px !important;
        transition: width 0.30s ease-out;
    }
    #top-menu .menu-item-has-children>a:first-child {
        padding-right: 0 !important;
    }

    .sub-menu a:after{
        display: none !important;
    }

    .menu-item:not(.icon-social):not(.bt_contato_menu):hover a:after,
    .current-menu-item:not(.icon-social):not(.bt_contato_menu) a:after {
        width: 40px;
    }




    #top-menu li.icon-social a{
        background: #fff;
        color: #0a005d !important;
        line-height: 1em;
        padding-bottom: 0 !important;
        padding: 7px !important;
        border-radius: 50%;
    }
    #top-menu li.icon-social {
        padding-right: 8px;
    }
    .et-fixed-header #top-menu .bt_contato_menu a,
    .et-fixed-header #top-menu li.icon-social a{
        color: #0a005d !important;
    }

}




#top-menu .bt_contato_menu a {
    color: #0a005d;
    background: #ffb501;
    border-radius: 100px;
    padding: 10px 25px !important;
    text-transform: uppercase;
    box-shadow: 0px 12px 18px -6px rgb(0 0 0 / 30%);
}





.bt_whatsapp {
    background: #25d466;
    padding: 10px 22px;
    border-radius: 100px;
    z-index: 9999;
    color: #fff;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.bt_whatsapp .flaticon-whatsapp {
    font-size: 1.6em;
    margin-right: 6px;
    margin-bottom: -6px;
    line-height: 2em;
}

.bt_whatsapp.fixo{
    position: fixed;
    bottom: 20px;
    right: 20px;
}
@media (max-width: 576px) {  
    .bt_whatsapp.fixo span{
        display: none;

    }
    .bt_whatsapp .flaticon-whatsapp{
        margin-right: 0;
    }
}





.et_pb_button_module_wrapper .et_pb_button.bt_sitemap_rodape, 
.et_pb_button_module_wrapper .et_pb_button.bt_sitemap_rodape:hover {
    padding: 0 !important;
    border: none;
    border-radius: 0;
    background: none;
    color: #fff;
    text-transform: none;
    font-weight: normal;
    text-decoration: underline;
    letter-spacing: unset !important;
    line-height: 1em !important;
}


/* Newsletter */
.form_newsletter {
	display: flex;
    flex-direction: row;
    max-width: 90%;
    margin: auto;
    margin-top: 25px;
}
.form_newsletter .form_newsletter_email {
    flex: 3;
    width: 100%;
}
.form_newsletter .form_newsletter_enviar {
    flex: 1;
    width: 100%;
}

.form_newsletter input {
    width: 100%;
    padding: 20px;
    border-radius: 30px;
    border: none;
}

.form_newsletter_email input {
   padding: 20px 30px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.form_newsletter_enviar input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    cursor: pointer;
    background: #ffb901;
    color: #323232;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    line-height:20px;

}



/* Form contato*/
.form_contato {
    max-width: 500px;
    margin: auto;
}
.form_contato *{
    transition: all 0.1s ease-in;
}
.form_contato input,
.form_contato textarea {
    width: 100%;
    display: block;
    padding: 14px 0;
    margin-bottom: 15px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #9aa7bf;
}
.contato_rodape .form_contato input,
.contato_rodape .form_contato textarea,
.contato_rodape .form_contato label,
.contato_rodape .form_contato input::placeholder,
.contato_rodape .form_contato textarea::placeholder{
    color: #ffffff;
    border-color: unset;
    opacity: 1;
}

input[type="text"]:focus, 
input[type="email"]:focus, 
select:focus, 
textarea:focus {
    background-color: #ffb901;
    color: #0a005d;
    border-radius: 10px;
    padding-left: 15px;
}

.form_contato textarea {
    max-height: 180px;
}
.form_contato label {
	margin-left: 0;
}
.form_contato .col {
    display: flex;   
}
.form_contato .col .wpcf7-form-control-wrap{
    margin-right: 20px;
}
.form_contato .col .wpcf7-form-control-wrap:last-child {
    margin-right: 0;
}


.fd_marrom .form_contato label{
    color: #9aa7bf;
}
.form_contato input[type=submit] {
    background: #ffb901;
    color: #323232;
    text-transform: uppercase;
    border: 1px solid #ffb901;
    border-radius: 100px;
    cursor: pointer;
}

.form_contato .wpcf7-not-valid-tip,
.form_contato .wpcf7-response-output {
    background: #fff;
    padding: 3px;
}


@media (max-width: 991px) { 
    #et_mobile_nav_menu .mobile_nav span.mobile_menu_bar_toggle::before {
        color: #fff !important;
    }
    span.mobile_menu_bar.mobile_menu_bar_toggle:before {
        color: red !important;
    }
    #main-header #mobile_menu {
        background: #09165D !important;
    }

    #mobile_menu li.icon-social {
        width: 40px;
        background: #ffb901;
        float: left;
        margin-right: 8px;
        padding: 0px 13px;
        border-radius: 6px;
        line-height: 1em;
    }
    #mobile_menu li.icon-social a {
        color: #0a005d;
    }
}


/* 
Extra small devices (portrait phones, less than 576px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/
 
 
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  
 
}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
 
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
 
}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
    
}