*{
font-family: 'Exo', sans-serif;
}
html, body{
overflow-x: hidden !important;
}
.final{
clear: both;
}
/* Topo */
#topo{
background-color: #fff;
text-align: right;
width: 100%;
height: 50px;
}
#topo img{
width: 30px;
float: right;
margin: 2px;
}
#fone{
float: right;
margin-right: 10px;
}
#fone h4{
font-size: 18px;
color: #262525;
}
#fone img{
width: 20px;
margin-right: 164px;
margin-top: -30px;
}
.alinhar-fone h4{
margin-right: 13px;
}
/*BreadCrumb */
.breadcrumb{
background-color: #fff;
}
.breadcrumb a{
color: #343434;
font-size: 14px;
font-weight: 500;
}
.breadcrumb-item + .breadcrumb-item::before {
color: #343434;
content: " >> ";
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: 400;
}
.breadcrumb-item + .active{
color: #e5aa0e;
font-size: 14px;
font-weight: 800;
}
/* Menu */
.menu{
text-align: center;
margin-left: 20px;
}
.menu-resp{
display: none;
}
.menu img{
width: 200px;
margin-top: -20px;
}
.menu-normal{
margin-top: 40px;
margin-left: 20px;
}
.menu-normal img{
width: 20px;
text-align: center;
}
.menu a{
color: #262525;
text-align: center;
}
.menu a:hover{
color: #e5aa0e;
}
/* Banner */
#banner{
margin-top: 20px;
margin-bottom: 20px;
}
#banner h3{
color: #fff;
margin-top: -230px;
margin-left: 30px;
font-weight: 800;
}
#banner span{
color: #e5aa0e;
}
/* Destaque */
#destaque{
margin-top: 20px;
margin-bottom: 20px;
margin-left: 25px;
}
.dest{
border-style: dotted;
height: 330px;
width: 330px;
border-color: #5b5656;
}
.esquerda img{
margin-top: 5px;
}
.esquerda h5{
color: #fff;
font-size: 16px;
font-weight: 800;
}
.esquerda p{
color: #fff;
}
.centro{
margin-left: 500px;
margin-top: -330px;
}
.centro img{
margin-top: -310px;
}
.centro h5{
color: #fff;
font-size: 16px;
font-weight: 800;
margin-top: -110px;
}
.centro p{
color: #fff;
}
.direita{
margin-left: 1000px;
margin-top: -330px;
}
.direita img{
margin-top: -360px;
}
.direita h5{
color: #fff;
font-size: 16px;
font-weight: 800;
margin-top: -130px;
}
.direita p{
color: #fff;
}
.cor1{
background-color: #e29b01;
width: 300px;
height: 100px;
margin-top: 10px;
margin-left: 12px;
text-align: center;
}
.cor1 img{
width: 80px;
}
.cor2{
background-color: #e2b02d;
width: 300px;
height: 100px;
margin-top: 0;
margin-left: 12px;
text-align: center;
}
.cor3{
background-color: #e7b94a;
width: 300px;
height: 100px;
margin-top: 0;
margin-left: 12px;
text-align: center;
}
.botao-esquerda{
background-color: #fff;
width: 120px;
height: 30px;
border-radius: 5px;
margin-left: 90px;
margin-top: 40px;
padding-top: 8px;
}
.botao-centro{
background-color: #fff;
width: 120px;
height: 30px;
border-radius: 5px;
margin-top: 20px;
margin-left: 90px;
padding-top: 8px;
}
.botao-direita{
background-color: #fff;
width: 120px;
height: 30px;
border-radius: 5px;
margin-left: 90px;
padding-top: 8px;
}
.botao-direita a{
color: #e29b01;
font-weight: 700;
margin-left: -20px;
}
.botao-esquerda a{
color: #e29b01;
font-weight: 700;
margin-left: -20px;
}
.botao-centro a{
color: #e29b01;
font-weight: 700;
margin-left: -20px;
}
.botao-centro img{
margin-top: -10px;
margin-right: -30px;
width: 25px;
}
.botao-esquerda img{
margin-top: -10px;
margin-right: -30px;
width: 25px;
}
.botao-direita img{
margin-top: -10px;
margin-right: -30px;
width: 25px;
}
/* Anuncio */
#anuncio{
margin-bottom: 10px;
}
.mcmv img{
width: 229px !important;
margin-top: -300px;
margin-left: 90px;
}
.mcmv h3{
margin-top: -180px;
margin-left: 50px;
color: #fff;
font-size: 30px;
font-weight: 800;
}
.botao-mcmv {
background-color: #e39c00;
width: 110px;
height: 30px;
border-radius: 5px;
padding: 5px;
margin-left: 270px;
margin-top: 5px;
}
.botao-mcmv a{
color: #fff;
font-weight: 700;
}
.botao-mcmv img{
width: 20px !important;
margin-top: -40px;
margin-left: 80px;
}
/* Ligthbox */
h3{
color: #e29b01;
font-weight: 700;
font-size: 18px;
margin-left: 10px;
}
.lbox{
visibility: hidden;
opacity: 0;
}
.min{
width: 280px;
height: 210px;
padding: 10px;
}
.lbox:target{
opacity: 1;
visibility: visible;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(10,10,10,.9);
position: fixed;
}
.box-img{
width: 800px;
margin: 20px auto;
}
.bot{
color: #fff;
text-decoration: none;
position: absolute;
width: 50px;
height: 50px;
font-size: 40px;
text-align: center;
}
#prev{
left: 5%;
top: 45%;
}
#next{
right: 5%;
top: 45%;
}
#close{
top:0;
right: 5%;
}
.box-img img{
opacity: 0;
}
.lbox:target .box-img img{
opacity: 1;
transition: opacity .4s linear;
}
/* Empresa */
#empresa{
width: 96%;
margin-left: 20px;
margin-bottom: 10px;
}
#empresa img{
width: 60px;
}
#empresa h4{
color: #e29b01;
font-weight: 700;
font-size: 16px;
margin-top: 10px;
}
#empresa p{
font-size: 14px;
color: #353434;
}
#empresa h5{
color: #e29b01;
font-weight: 700;
font-size: 14px;
}
#empresa a{
color: #e29b01;
font-weight: 700;
font-size: 14px;
}
#empresa span{
color: #353434;
font-size: 14px;
}
/* Contato */
#contato{
margin-left: 20px;
width: 98%;
padding-bottom: 10px;
}
#contato img{
width: 60px;
margin-bottom: 10px;
}
#contato h3{
color: #e39c00;
margin-top: 5px;
font-size: 16px;
font-weight: 700;
margin-left: 0px;
}
#contato h4{
color: #353434;
font-size: 16px;
}
#contato span{
color: #e39c00;
font-size: 16px;
font-weight: 400;
}
#contato input{
margin-top: 10px;
border: 1px solid #e39c00;
color: #353434;
}
#contato select{
margin-top: 10px;
border: 1px solid #e39c00;
color: #353434;
}
#contato input::placeholder{
color: #353434;
}
#contato textarea{
margin-top: 10px;
border: 1px solid #e39c00;
color: #353434;
}
#contato textarea::placeholder{
color: #353434;
}
#contato .btn{
width: 100px !important;
height: 30px;
font-size: 12px;
}
#contato .btn-primary{
background-color: #e39c00;
border-color: #e7b94a;
}
#contato .btn-primary:hover{
background-color: #a47715;
border-color: #e39c00;
}
#contato .btn-danger{
background-color: #353434;
border-color: #353434;
}
#contato .btn-danger:hover{
background-color: #000;
}
/* Rodapé */
#rodape{
background-color: #353434;
width: 100%;
height: 270px;
position: relative;
bottom: 0;
}
.linha-rodape{
background-color: #e5aa0e;
width: 100%;
height: 2px;
}
.logo img{
width: 200px;
margin-left: 30px;
margin-top: 80px;
}
.info{
margin-top: 40px;
margin-left: 70px;
}
.info p{
color: #fff;
}
.info h4{
color: #fff;
margin-bottom: 10px;
margin-top: 3px;
}
.redes-rodape{
margin-left: 1000px;
margin-top: -140px;
}
.redes-rodape h4{
color: #fff;
margin-top: 2px;
margin-left: -10px;
}
.espacar-footer{
margin-top: 10px;
}
@media screen and (max-width: 1024px) {
.menu-normal{
margin-left: 60px;
}
.centro{
margin-left: 340px;
}
.direita{
margin-left: 680px;
}
.info{
margin-left: 60px;
}
.info p{
margin-left: 40px !important;
margin-top: -22px;
}
.info h4{
margin-left: 40px;
margin-top: -22px;
}
.espacar h3{
margin-left: -20px !important;
}
.mcmv img{
width: 190px !important;
margin-top: -300px;
margin-left: 70px;
}
.mcmv h3{
font-size: 30px;
margin-left: 80px;
}
.botao-mcmv {
margin-left: 195px;
}
.botao-mcmv img{
width: 20px !important;
margin-top: -40px;
margin-left: 80px;
}
#contato{
width: 96%;
}
.redes-rodape{
margin-left: 800px;
margin-top: -160px;
}
.redes-rodape h4{
margin-top: -20px;
margin-left: 30px;
}
}
@media screen and (max-width: 800px) {
#fone h4{
margin-right: -120px;
margin-top: 50px;
}
#fone img{
margin-right: 50px;
}
.alinhar-fone img{
margin-right: 34px !important;
}
.whats{
margin-top: -30px;
}
.whats img{
margin-right: 44px !important;
}
.menu{
text-align: left;
}
.menu-normal{
margin-top: -40px;
margin-left: 250px;
float: left;
}
.inicio{
margin-left: -400px;
text-align: center;
}
.empresa{
margin-left: -170px;
margin-top: -40px;
text-align: center;
}
.trabalho{
margin-left: 30px;
margin-top: -40px;
text-align: center;
}
.projetos{
margin-left: 220px;
margin-top: -40px;
text-align: center;
}
.contato{
margin-left: 400px;
margin-top: -40px;
text-align: center;
}
#banner img{
width: 800px;
}
#banner h3{
margin-top: -120px;
}
.info{
margin-left: 280px;
margin-top: -140px;
}
.dest{
width: 260px;
}
.esquerda{
margin-left: -5px;
}
.centro{
margin-left: 262px;
}
.direita{
margin-left: 528px;
}
.cor1{
width: 230px;
}
.cor2{
width: 230px;
}
.cor3{
width: 230px;
}
.centro img{
margin-top: 10px;
}
.centro h5{
margin-top: 10px;
}
.direita img{
margin-top: 10px;
}
.direita h5{
margin-top: 10px;
}
.botao-esquerda{
margin-left: 55px;
}
.botao-centro{
margin-left: 55px;
margin-top: 40px;
padding-top: 2px;
}
.botao-direita{
margin-left: 55px;
margin-top: 40px;
padding-top: 2px;
}
.botao-centro img{
margin-top: 0px;
}
.botao-direita img{
margin-top: 0px;
}
.mcmv img{
width: 180px !important;
margin-top: -110px;
margin-left: 280px;
}
.mcmv h3{
margin-left: 20px;
font-size: 28px;
}
.espacar h3{
margin-left: 500px !important;
margin-top: -110px;
font-size: 28px;
}
.botao-mcmv {
margin-left: 698px;
}
.botao-mcmv img{
width: 20px !important;
margin-top: -40px;
margin-left: 80px;
}
.redes-rodape{
margin-left: 600px;
margin-top: -150px;
}
}
@media screen and (max-width: 768px) {
.esquerda{
margin-left: -18px;
}
.centro{
margin-left: 246px;
}
.direita{
margin-left: 510px;
}
.mcmv h3{
font-size: 26px;
}
.espacar h3{
margin-left: 490px !important;
margin-top: -110px;
font-size: 26px;
}
#empresa img{
width: 50px;
}
.botao-mcmv {
margin-left: 662px;
}
.botao-mcmv img{
width: 20px !important;
margin-top: -40px;
margin-left: 80px;
}
}
@media screen and (max-width: 600px){
.menu img{
margin-top: -60px;
margin-left: -10px;
width: 230px;
}
.menu-normal{
display: none;
}
.menu-resp{
display: block;
}
.navbar {
background-color: #fff;
border-color: #fff;
margin-top: -40px;
margin-left: 265px;
width: 300px;
}
.navbar-nav{
text-align: center;
}
.navbar-header{
border-color: #fff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form{
border-color: #e5aa0e;
}
.navbar-default
.navbar-toggle{
border-color: #e5aa0e;
background-color: #fff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus{
background-color:#353434;
}
.navbar-default .navbar-toggle .icon-bar{
background-color: #e5aa0e;
}
.navbar-default .navbar-nav > li > a{
color: #e5aa0e;
background-color: #353434;
}
.navbar-default .navbar-nav > li > a:hover{
color: #e5aa0e !important;
}
.info{
margin-left: 300px;
margin-top: -140px;
}
.dest{
width: 593px;
height: 126px;
}
.esquerda{
margin-left: -5px;
}
.centro{
margin-left: -5px;
margin-top: 10px;
}
.direita{
margin-left: -5px;
margin-top: 10px;
}
.cor1{
width: 188px;
}
.cor2{
width: 188px;
margin-left: 199px;
margin-top: -100px;
}
.cor3{
width: 187px;
margin-left: 386px;
margin-top: -100px;
}
.centro h5{
margin-top: 35px;
}
.direita img{
margin-top: 10px;
}
.esquerda h5{
margin-top: 35px;
}
.direita h5{
margin-top: 35px;
}
.direita p{
display: none;
}
.esquerda p{
display: none;
}
.centro p{
display: none;
}
.botao-esquerda{
margin-left: 33px;
}
.botao-centro{
margin-left: 33px;
}
.botao-direita{
margin-left: 33px;
}
.botao-centro img{
margin-top: 0px;
}
.botao-direita img{
margin-top: 0px;
}
#empresa{
width: 94%;
}
.mcmv img{
width: 200px !important;
margin-top: -100px;
margin-left: 320px;
}
.mcmv h3{
font-size: 26px;
margin-top: -210px;
}
.espacar h3{
margin-left: 20px !important;
margin-top: -80px;
font-size: 26px;
}
.botao-mcmv {
margin-left: 36px;
}
.botao-mcmv img{
width: 20px !important;
margin-top: -40px;
margin-left: 80px;
}
.redes-rodape{
margin-left: 600px;
margin-top: -150px;
}
.redes-rodape{
display: none;
}
#contato{
width: 94%;
}
}
@media screen and (max-width: 480px) {
.menu img{
margin-top: -100px;
width: 210px;
}
.navbar {
margin-top: -10px;
margin-left: 200px;
width: 250px;
}
.logo img{
width: 180px;
margin-left: 20px;
margin-top: 50px;
}
.info{
margin-left: 220px;
margin-top: -70px;
}
.esconder-info{
display: none;
}
.dest{
width: 474px;
}
.centro{
margin-left: -5px;
margin-top: 10px;
}
.direita{
margin-left: -5px;
margin-top: 10px;
}
.cor1{
width: 150px;
}
.cor2{
width: 150px;
margin-left: 160px;
margin-top: -100px;
}
.cor3{
width: 150px;
margin-left: 309px;
margin-top: -100px;
}
.botao-esquerda{
margin-left: 16px;
}
.botao-centro{
margin-left: 16px;
}
.botao-direita{
margin-left: 16px;
}
.botao-centro img{
margin-top: 0px;
}
.botao-direita img{
margin-top: 0px;
}
.espacar h3{
margin-left: 20px !important;
margin-top: -70px;
font-size: 26px;
}
.mcmv img{
width: 150px !important;
margin-top: -70px;
margin-left: 320px;
}
.botao-mcmv img{
width: 20px !important;
margin-top: -40px;
margin-left: 80px;
}
}
@media screen and (max-width: 414px) {
#fone {
margin-top: 30px !important;
}
#fone img{
width: 15px;
margin-right: 17px !important;
margin-top: -29px !important;
}
#fone h4{
font-size: 16px;
}
.menu img{
margin-top: -70px;
width: 200px;
margin-left: -20px;
z-index: 1000;
}
.navbar {
margin-top: -20px;
margin-left: 210px;
width: 150px;
}
#banner h3{
margin-left: 20px;
font-size: 20px;
}
.dest{
width: 405px;
}
.centro{
margin-left: -5px;
margin-top: 10px;
}
.direita{
margin-left: -5px;
margin-top: 10px;
}
.cor1{
width: 125px;
}
.cor2{
width: 125px;
margin-left: 136px;
}
.cor3{
width: 125px;
margin-left: 260px;
margin-top: -100px;
}
.botao-esquerda{
margin-left: 2px;
}
.botao-centro{
margin-left: 2px;
}
.botao-direita{
margin-left: 2px;
}
.botao-centro img{
margin-top: 0px;
}
.botao-direita img{
margin-top: 0px;
}
.mcmv img{
width: 120px !important;
margin-top: -60px;
margin-left: 270px;
}
.mcmv h3{
font-size: 22px;
}
.espacar h3{
margin-left: 20px !important;
margin-top: -60px;
font-size: 22px;
}
.botao-mcmv img{
width: 20px !important;
margin-top: -40px;
margin-left: 80px;
}
#rodape{
height: 300px;
}
.logo img{
margin-left: 20px;
margin-top: 30px;
}
.info{
margin-left: 20px;
margin-top: 20px;
}
#contato{
width: 90%;
}
}
@media screen and (max-width: 384px){
.menu img{
margin-top: 20px;
width: 260px;
margin-left: 26px;
}
.navbar {
margin-top: 10px;
width: 150px;
margin-right: 100px;
}
.navbar-toggle{
margin-right: 187px;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form{
width: 250px;
margin-left: -180px;
}
.logo img{
margin-left: 105px;
}
.info{
margin-left: 70px;
}
#banner h3{
text-align: center;
margin-left: 0px;
}
.dest{
width: 378px;
height: 330px;
margin-left: -9px;
}
.centro{
margin-top: 5px;
}
.direita{
margin-top: 5px;
}
.cor1{
width: 350px;
}
.cor2{
width: 350px;
margin-top: 0px;
margin-left: 12px;
}
.cor3{
width: 350px;
margin-left: 12px;
margin-top: 0px;
}
.esquerda h5{
font-size: 22px;
margin-top: 40px;
}
.centro h5{
font-size: 22px;
margin-top: 40px;
}
.direita h5{
font-size: 22px;
margin-top: 40px;
}
.botao-esquerda{
margin-left: 110px;
}
.botao-centro{
margin-left: 110px;
}
.botao-direita{
margin-left: 110px;
}
.botao-centro img{
margin-top: 0px;
}
.botao-direita img{
margin-top: 0px;
}
#empresa{
width: 92%;
margin-left: 15px;
}
.mcmv img{
width: 110px !important;
margin-top: -50px;
margin-left: 260px;
}
.mcmv h3{
font-size: 20px;
}
.espacar h3{
margin-left: 20px !important;
margin-top: -60px;
font-size: 20px;
}
.botao-mcmv img{
width: 20px !important;
margin-top: -40px;
margin-left: 80px;
}
}
@media screen and (max-width: 375px){
.info{
margin-left: 60px;
}
.dest{
width: 368px;
}
.cor1{
width: 339px;
}
.cor2{
width: 339px;
}
.cor3{
width: 339px;
}
.mcmv img{
margin-left: 250px;
}
.botao-mcmv img{
width: 20px !important;
margin-top: -40px;
margin-left: 80px;
}
#contato{
margin-left: 15px;
}
}
@media screen and (max-width: 360px){
.menu img{
margin-left: 10px;
}
.navbar{
margin-left: 195px;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form{
margin-left: -180px;
}
.logo img{
margin-left: 90px;
}
.info{
margin-left: 50px;
}
.dest{
width: 354px;
margin-left: -8px;
}
.cor1{
width: 326px;
}
.cor2{
width: 326px;
}
.cor3{
width: 326px;
}
.mcmv h3{
margin-left: 10px;
}
.espacar h3{
margin-left: 10px !important;
margin-top: -60px;
}
.botao-mcmv {
margin-left: 24px;
}
#contato{
margin-left: 10px;
width: 93%;
}
}
@media screen and (max-width: 320px) {
.menu{
height: 300px;
}
.menu img{
margin-left: -10px;
}
.navbar{
margin-left: 180px;
margin-top: 20px;
}
.logo img{
margin-left: 70px;
}
.info{
margin-left: 30px;
}
#banner h3{
font-size: 18px;
}
.dest{
width: 313px;
}
.cor1{
width: 284px;
}
.cor2{
width: 284px;
}
.cor3{
width: 284px;
}
.botao-esquerda{
margin-left: 80px;
}
.botao-centro{
margin-left: 80px;
}
.botao-direita{
margin-left: 80px;
}
.mcmv img{
width: 90px !important;
margin-left: 225px;
}
.espacar h3{
margin-left: 10px !important;
margin-top: -40px;
}
.botao-mcmv img{
width: 20px !important;
margin-top: -40px;
margin-left: 80px;
}
}
/*
Created on : 24/02/2019, 13:27:07
Author : ebrahimpleite
*/
.wc_whatsapp_app {
position: fixed;
bottom: 30px;
z-index: 9999999999; /*Força o widget ficar acima de qualquer elemento*/
display: flex;
align-items: center;
}
.wc_whatsapp_app.left {
left: 15px;
}
.wc_whatsapp_app.right {
right: 15px;
}
.wc_whatsapp {
width: 50px;
height: 50px;
display: block;
border-radius: 50%;
background: #e0ac37;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
}
.wc_whatsapp:hover,
.wc_whatsapp:focus {
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}
.wc_whatsapp::before {
content: "";
display: block;
background: url("data:image/svg+xml;charset=UTF-8,%3csvg aria-hidden='true' focusable='false' data-prefix='icon' data-icon='whatsapp' class='svg-inline' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3cpath fill='%23fff' d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'%3e%3c/path%3e%3c/svg%3e") top center no-repeat;
height: 35px;
margin-top: 6px;
}
.wc_whatsapp p {
font-family: 'Arial', sans-serif;
}
.wc_whatsapp_secondary,
.wc_whatsapp_primary {
display: none;
}
.wc_whatsapp_secondary {
max-width: 300px;
}
.wc_whatsapp_secondary p {
margin-left: 15px;
border: 1px solid #e2e2e2;
padding: 5px 10px;
border-radius: 5px;
position: relative;
color: #000;
font-size: 14px;
background: #fff;
}
.wc_whatsapp_secondary p::before {
top: 20px;
left: -9px;
content: '';
position: absolute;
background: white;
border-bottom: 1px solid #e2e2e2;
border-right: 1px solid #e2e2e2;
left: -5px;
top: 50%;
margin-top: -4px;
width: 8px;
height: 8px;
z-index: 1;
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.wc_whatsapp_primary {
border-radius: 5px;
border: 1px solid #eaeaea;
background: #fff;
padding: 10px;
bottom: 70px;
align-items: center;
max-width: 350px;
box-shadow: 7px 7px 15px 8px rgba(0, 0, 0, 0.17);
position: absolute;
width: 350px;
}
.wc_whatsapp_primary img {
width: 50px;
border-radius: 5px;
margin-left: 200px;
}
.wc_whatsapp_primary p {
margin: 20px;
border: 1px solid #e2e2e2;
padding: 10px;
border-radius: 5px;
position: relative;
color: #000;
font-size: 14px;
}
.wc_whatsapp_primary p::before {
top: 20px;
left: -9px;
content: '';
position: absolute;
background: white;
border-bottom: 1px solid #e2e2e2;
border-right: 1px solid #e2e2e2;
left: -5px;
top: 50%;
margin-top: -4px;
width: 8px;
height: 8px;
z-index: 1;
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.wc_whatsapp_primary .close {
position: absolute;
right: 10px;
top: 10px;
font-size: 14px;
color: #000;
opacity: .5;
}
.wc_whatsapp_primary .close:hover,
.wc_whatsapp_primary .close:focus {
color: #f00;
opacity: 1;
}