@charset "UTF-8";

/*** keyframes ***/
@keyframes pulse-whatsapp {
    from { box-shadow: 0 0 0 0px rgba(40,135,106,1); }
    to { box-shadow: 0 0 0 12px rgba(40,135,106,0); }
}

@-webkit-keyframes pulse-whatsapp {
    from { box-shadow: 0 0 0 0px rgba(40,135,106,1); }
    to { box-shadow: 0 0 0 12px rgba(40,135,106,0); }
}
@keyframes pulse-telefone {
    from { box-shadow: 0 0 0 0px rgba(255,0,0,1); }
    to { box-shadow: 0 0 0 12px rgba(40,135,106,0); }
}

@-webkit-keyframes pulse-telefone {
    from { box-shadow: 0 0 0 0px rgba(255,0,0,1); }
    to { box-shadow: 0 0 0 12px rgba(40,135,106,0); }
}
/*** keyframes ***/

/* Reset */
* { margin: 0; padding: 0; font-family: Arial; }

/* Animações */
* { transition: color .5s, opacity .5s, background .5s, border .5s, top .5s, left .5s, right .5s, width .5s, height .5s, margin .5s, transform .9s; }

/*** Basico ***/
body { margin: 0; padding: 0; }

.basic-container { width: 100%; margin: 0 auto; display: inline-table; }

left  { width: 48%; padding: 1%; float: left; display: inline-table; }
right { width: 48%; padding: 1%; float: right; display: inline-table; }

a       { text-decoration: none; color: #F07F1B; }
a:hover { text-decoration: none; color: #50AE32; }

p { font-size: 20px; margin: 10px 0px; }

list { font-size: 16px; text-align: left; display: table; }
list ul { display: block; margin: 5px 30px; }
list ul li { list-style: url(../_img/list.png); padding: 2.5px 0; }

h1 { font-size: 35px; margin: 15px 0px; font-weight: 600; }
h2 { font-size: 30px; margin: 15px 0px; font-weight: 600; }
h3 { font-size: 25px; margin: 15px 0px; font-weight: 600; }
h4 { font-size: 20px; margin: 15px 0px; font-weight: 600; }

.primary    { color: #F07F1B; }
.secondary  { color: #FFFFFF; }
.tx_black   { color: #222B2F; }
.tx_white   { color: #FFFFFF; }

.bg_primary { background: #F07F1B; }
.bg_secundary { background: #50AE32; }
.bg_black   { background: #222B2F; }

.justify    { text-align: justify; }
.left       { text-align: left; }
.center     { text-align: center; }
.right      { text-align: right; }

.radius { border-radius: 100%; }
.radius_30 { border-radius: 30px; }

.shadow { box-shadow: #333333 3px 3px 3px; }

.img_left { width: 25%; height: auto; padding: 1%; margin: 0px 10px 5px 0; float: left; }
.img_80 { width: 80%; margin: 0 10%; }
.img_50 { width: 50%; margin: 0 25%; }
.img_30 { width: 30%; margin: 0 35%; }
.img_20 { width: 20%; margin: 0 40%; }
.img_full { width: 100%; border-radius: 15px; }

.base { width: 100%; margin: 0px auto; display: table; }
section { width: 90%; padding: 50px 5%; display: table; }

.cont_2 { width: 45%; margin: .5% 2.5%; float: left; }
.cont_3 { width: 32%; margin: .5%; float: left; }
.cont_3_2 { width: 64%; margin: 1%; float: left; }
.cont_4 { width: 23%; margin: 1%; float: left; }
/*** basico ***/

/* Whatsapp */
.whatsapp { position: fixed; width: 50px; height: 50px; right: 15px; bottom: 15px; border-radius: 100px; background: #33CC33; animation: pulse-whatsapp 1.5s; animation-iteration-count: infinite; z-index: 300; }
.whatsapp img { width: 50%; height: 50%; margin: 25%; }
.whatsapp:hover { background: #5AFF5A; }

.bt_whatsapp { display: inline-block; font-size: 32px; margin: 25px; padding: 10px 25px; border-radius: 30px; background: #33CC33; color: #FFFFFF; font-weight: 600; }
.bt_whatsapp:hover { z-index: 300; background: #5AFF5A; color: #FFFFFF; }
.bt_whatsapp img { width: 25px; margin: 0 5px; }
/* Whatsapp */

/* Telefone */
.telefone { position: fixed; width: 50px; height: 50px; left: 15px; bottom: 15px; border-radius: 100px; background: #ff0000; animation: pulse-telefone 1.5s; animation-iteration-count: infinite; z-index: 300; }
.telefone img { width: 50%; height: 50%; margin: 25%; }
.telefone:hover { background: #ff7474; }

.bt_telefone { display: inline-block; font-size: 32px; margin: 25px; padding: 10px 25px; border-radius: 30px; background: #ff0000; color: #FFFFFF; font-weight: 600; }
.bt_telefone:hover { z-index: 300; background: #ff7474; color: #FFFFFF; }
.bt_telefone img { width: 25px; margin: 0 5px; }
/* Telefone */

/*** Header ***/
header { position: relative; width: 100%; height: 100vh; display: table; z-index: 100; }

.slider-conversao { background: url(../_img/_sliders/slide-conversao-e-desconversao.jpg) center no-repeat; background-size: auto 150%; }
.slider-desconversao { background: url(../_img/_sliders/slide-conversao-e-desconversao.jpg) center no-repeat; background-size: auto 150%; }
.slider-tubulacao { background: url(../_img/_sliders/slide-tubulacao-de-gas.jpg) center no-repeat; background-size: auto 150%; }

header .top_info { position: relative; width: 100%; background: #50AE32; display: inline-block; }
header .top_info p { text-align: center; font-size: 18px; margin: 0; padding: 0; }
header .top_info p a { color: #FFFFFF; padding: 0 10px; display: inline-block; }
header .top_info p a img { width: 25px; padding: 5px 5px; display: inline-block; float: left; }
header .top_info p a b { padding: 8.5px 5px; display: inline-block; float: right; }

header .header { width: 90%; padding: 0 5%; }

header .header .logo { width: 25%; float: left; display: inline-block; }
header .header .logo img { width: 100%; margin: 20px 0; }

header .header .menu { width: 75%; float: right; margin: 45px auto; display: inline-block; } 
header .header .menu #menu { z-index: 9000; }
header .header .menu #menu ul { width: auto; margin: 0px; float: right; list-style: none; display: table; }
header .header .menu #menu ul li { position: relative; float: left; display: table; }
header .header .menu #menu ul li a { 
    font-size: 16px; font-weight: bolder; margin: 6px 2.5px; padding: 10px 10px; border-radius: 12px; display: block; 
    background: none; color:#50AE32;
} 
header .header .menu #menu ul li:hover a { background: #50AE32; color: #FFFFFF; }
header .header .menu #menu ul li .ativo { background: #50AE32; color:#fff; }

header .header .menu #menu ul li ul { position: absolute; width: auto; display: none; background: rgba(0,0,0,.6); border-radius: 12px; z-index: 5000; }
header .header .menu #menu ul li ul li { float: none; display: table; }
header .header .menu #menu ul li ul li a { font-size: 12px; font-weight: 100; width: 220px; margin: 1px 2px; padding: 10px 10px; display: block; }
header .header .menu #menu ul li:hover ul li:hover a { background: #50AE32; color: #FFFFFF; }
header .header .menu #menu ul li:hover ul li a { background: none; }
header .header .menu #menu ul li:hover ul { display: table; animation: drop .5s; }

header .header .menu-mobile { display: none; margin: 0px 60px; float: right; }

header .slider { width: 90%; margin: 50px 5%; text-align: center; display: inline-block; }
header .slider h1 { font-size: 38px; color: #F07F1B; }
header .slider p { font-size: 25px; color: #F07F1B; } 
/*** Header ***/

/*** Center ***/
center { color: #3A3A3A; }

center .bg-conversao { background: url(../_img/bg-conversao-de-fogoes.jpg) center fixed; background-size: auto 125%; }
center .bg-desconversao { background: url(../_img/bg-desconversao-de-fogoes.jpg) center fixed; background-size: auto 125%; }
center .bg-tubulacao { background: url(../_img/bg-tubulacao-de-gas.jpg) center fixed; background-size: auto 125%; }

center .footer_info a { font-size: 18px; color: #3A3A3A; padding: 0 10px; display: inline-block; float: none; }
center .footer_info a img { width: 25px; padding: 5px 5px; display: inline-block; float: left; }
center .footer_info a b { padding: 8.5px 5px; display: inline-block; float: right; }
/*** Center ***/

/* footer */
footer { width: 100%; background: #222B2F; color: #FFFFFF; display: inline-block; }
footer .copy { text-align: center; margin: 25px auto; }
/* footer */

/*** Responsive ***/
@media only screen and (max-width: 1000px){
    left { width: 100%; }
    right { width: 100%; }
    
    h1 { font-size: 25px; margin: 15px 0px; font-weight: 600; }
    h2 { font-size: 20px; margin: 15px 0px; font-weight: 600; }
    h3 { font-size: 15px; margin: 15px 0px; font-weight: 600; }
    h4 { font-size: 18px; margin: 15px 0px; font-weight: 600; }
    
    p { font-size: 20px; margin: 10px 0px; }
    
    /* containers */
    .cont_4, .cont_3, .cont_3_2, .cont_2 { width: 98%; float: none; }

    .img_left { width: 45%; margin: 50px 12.5%; }
    
    .img_80 { width: 45%; margin: 50px 12.5%; }
    .img_30 { width: 45%; margin: 50px 12.5%; }
    .img_20 { width: 45%; margin: 50px 12.5%; }
    
    .bg-cinza { background-size: 500%; }
    
    list { font-size: 32px; text-align: left; display: table; }
    list ul { display: block; margin: 5px 30px; }
    list ul li { list-style: url(../_img/list.png); padding: 2.5px 0; }
    
    /*** header ***/
    header { background-size: auto 150%; }

    header .header .logo { width: 100%; }
    header .header .logo img { width: 100%; margin: 20px 0; }

    header .header .menu { width: 100%; } 
    header .header .menu #menu { display: none; }

    header .header .menu #menu { margin: 0px auto; }
    header .header .menu #menu { position: fixed; width: 30%; height: 100%; padding: 0 10%; top: 0; left: 0; background: rgba(0,0,0,.7); display: none; }
    header .header .menu #menu ul { width: auto; float: left; margin: 0px auto; }
    header .header .menu #menu ul li { float: none; }
    header .header .menu #menu ul li a { padding: 30px; margin: 0px; display: block; color: #FFFFFF; }
    header .header .menu #menu ul li a:hover { background: #F07F1B; color: #FFFFFF; }
    header .header .menu #menu ul li:hover ul { animation: none; }

    header .header .menu .menu-mobile { display: block; }
    /*** header ***/
    
    /*** banner ***/
    
    /*** banner ***/
    
    /*** center ***/
    
    /*** center ***/
    
    /*** footer***/
    footer .container .column { width: 100%; }
    /*** footer***/
}