/* HEADER */
header { position: relative; top: 0; left: 0; width: 100%; background-color: black; z-index: 999; }
header .wrapper { display: flex; align-items: center; justify-content: space-between; }
header .header__logo img { display: block; margin: 12px 0; width:120px; height:auto; }
.mpi-rules header { position: static; background-color: black; }

/* TOPOFIXO */
header.topofixo { background-color: black; }
header .topo{
    background-color:var(--primary-color);
    padding:5px 0;
}
header .topo span,header .topo a{
    color:white;
}

header.topofixo .header__logo img { width:120px; height:auto; }
div header:not(#topo-sobreposto){
    position: absolute;
    background-color: transparent;

}

/* MENU */
header #menu li { padding: 25px 0; }
header #menu > ul > li.dropdown:after { content: '\f078'; font-family: 'FontAwesome'; font-size: 8px; position: absolute; top: 50%; transform: translateY(-50%); right: 0; color: #fff; transition: .3s; }
header #menu > ul > li.dropdown:hover:after { color: var(--primary-color); }
header #menu a { font: 15px var(--primary-font); color: white; padding: 0 12px; text-transform: uppercase; transition: .3s; }
header #menu li:hover a { color: lightgray; }
header #menu :is(.sub-menu, .sub-menu-info) { background-color: var(--dark); }

/*LARGE DEVICE*/
@media only screen and (max-width:992px) {
    header { position: static; }
    header .wrapper { justify-content: center; }
    header .topo { display: none; }
}
/* FOOTER */
footer { background-color: black; }
footer .footer__contact :is(a, span) { color: #fff; font: normal 14px/22px var(--primary-font); display: block; transition: .3s; }
footer .footer__contact a:hover { color: var(--primary-color); }

footer .footer__menu nav ul { display: flex; align-items: flex-start; justify-content: flex-end; }
footer .footer__menu nav li { display: inline; padding-left: 10px; }
footer .footer__menu nav li a { color: #fff; font-size: 14px; transition: .3s; }
footer .footer__menu nav li a:hover { color: var(--primary-color); }

footer .social { margin-top: 15px; display: flex; align-items: center; justify-content: flex-end; }
footer .social .social__icons { display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 5px; font-size: 18px; background-color: var(--primary-color); color: #fff; text-align: center; transition: .3s; }
footer .social .social__icons:hover { background: #fff; color: var(--primary-color); }

/* LARGE DEVICE */
@media only screen and (max-width:992px) {
    footer .footer__contact * { text-align: center; }
    footer .footer__menu nav ul { align-items: center; justify-content: center; }
    footer .social { justify-content: center; margin-top: 35px; }
}

/* MEDIUM DEVICE */
@media only screen and (max-width:768px) {
    footer * { text-align: center; }
    footer .footer__menu nav ul { display: block; width: 65%; margin: 0 auto; }
    footer .footer__menu nav li { display: block; }
    footer .footer__menu nav li a { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px 50px; display: block; width: max-content; margin: 0 auto; }
    footer .footer__menu nav li:not(:last-child) a { border-bottom: 1px solid rgba(255, 255, 255, 5%); }
    footer .social { justify-content: center; }
}

/*missão - visão - valores*/
.container--mvv {
    max-width: 1920px;
    width: 100%;
    height: 20vh;
    margin: 0 auto;
    position: relative;
}
.mvv__item {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    padding: 100px 50px;
}
.pelicula{
    position: absolute;
    z-index: 1;
    width:100%;
    height:400px;
    padding:20px;
    text-align: center;
}
.pelicula--branca{
    background-color:rgba(255,255,255,0.5);
}
.pelicula--preta{
    background-color:rgba(0,0,0,0.5);
}
.mvv__position-absolute{
    position: absolute;
    bottom: -100px;
    grid-gap:0;
}
.mvv__item--grey {
    background-image: url("<?=$url?>imagens/informacoes/agencia-degustadoras-01.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    z-index: 0;
    padding:0;
    height:350px;
}
.mvv__item--grey:hover .pelicula--branca{
    background-color:white;
}
.mvv__item--dark:hover .pelicula--preta{
    background-color:black;
}
.mvv__item--blue:hover .pelicula--branca{
    background-color:white;
}
.pelicula--branca h2, .pelicula--branca p, .pelicula--branca li{
    color:black;
}
.mvv__textos li{
    font-size:17px;
    /*line-height: 30px;*/
}

.mvv__item--dark {
    background-image: url("<?=$url?>imagens/informacoes/agencia-empregos-temporarios-01.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding:0;
    height:350px;
}
.mvv__item--blue {
     background-image: url("<?=$url?>imagens/informacoes/agencia-promotora-demonstradora-01.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 0;
    height:350px;
}
.mvv__title {
    font-size: 28px;
    margin: 0;
    text-transform: uppercase;
    color: #fff;
}
.mvv__text {
    color: #fff;
    text-align: left;
}
.mvv__list {
    list-style: disc;
    margin: 10px 10px 10px 15px;
    color: #fff;
    font-size: 14px;
}
.mvv__icon {
    position: absolute;
    right: -41px;
    bottom: -14px;
    font-size: 180px;
    color: rgba(0,0,0,0.1);
    background-color: #f47b3900;
}
@media only screen and (max-width: 767px) {
    .container--mvv {
        display: block;
    }
    .mvv__position-absolute{
    position: static;
    
}
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .mvv__item {
        padding: 25px;
    }
}
/*end missão - visão - valores*/

/*breadcrumb*/
.container--breadcrumb .breadcrumb__row h1 {
color: #000000;
font-size: 2rem;
margin-bottom: 0;
}
.container--breadcrumb .breadcrumb__row #breadcrumb {
background-color: var(--primary-color);
border-radius: 3px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: flex-start;
}
.container--breadcrumb #breadcrumb a,
.container--breadcrumb #breadcrumb span {
color: #fff;
font-size: 14px;
transition: .3s;
}
.container--breadcrumb #breadcrumb span {
box-sizing: border-box;
padding: 20px 40px;
display: block;
z-index: 1;
position: relative;
}
.container--breadcrumb span::before,
.container--breadcrumb span::after {
content: '';
display: block;
position: absolute;
right: 0;
width: 2px;
height: 50%;
background-color: rgba(255, 255, 255, 10%);
transition: .3s;
z-index: -1;
}
.container--breadcrumb span::before {
top: 0;
transform: skewX(30deg);
transform-origin: 100% 100%;
}
.container--breadcrumb span::after {
bottom: 0;
transform: skewX(-30deg);
transform-origin: 100% 0;
}
.container--breadcrumb span:hover::before,
.container--breadcrumb span:hover::after {
width: 100%;
}
/*mobile breadcrumb*/
@media only screen and (max-width: 767px) {
.container--breadcrumb #breadcrumb div {
position: relative;
}
.container--breadcrumb #breadcrumb span {
display: block;
max-width: 82px;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: auto;
padding: 10px 15px;
}
}
/* PÁGINA DE CONTATO */
.contact-bg h1{
    color:black ;
}
.contact-info{
    max-width: 100%;
    display: grid;
    grid-template-columns: 50px 1fr;
    grid-gap: 20px;
}
.contact-info h2{
    font-size: 22px;
    margin: 2px 0;
    color:black;
}
.contact-info strong{
    font-weight: normal;
    color:var(--primary-color);
}
.contact-info .icon{
    width: 60px;
    height: 60px;
    background: black;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 22px;
    transition: all 0.4s ease;
}
.contact-info:hover .icon{
    background: var(--primary-color);
    color: black;
}
iframe.mapa-contato{
    width: 100% !important;
    height: 350px;
    margin: 20px 0;
}
.form-grid input, .form-grid textarea{
    width: 100%;
}
.form-grid [class*='col-']{
    padding: 5px;
}
.primary-light{
    color: white;
}
.contact-bg{
    background-color:transparent;
}
/*FIM PÁGINA CONTATO */
/*end breadcrumb*/
/* ASIDE */
.aside .aside__btn, 
.aside .aside__menu h2,
.aside .aside__contato h2 { font-size: 14px; background-color: var(--primary-color); padding: 10px; display: block; transition: .3s; color: #fff; }
.aside .aside__btn { color: #fff; text-align: center; border-radius: 3px; }
.aside .aside__btn:hover { background-color: var(--primary-dark-color); }
.aside .aside__menu h2 a { color: #fff; }
.aside .aside__menu nav ul li { border-left: 2px solid var(--primary-color); margin: 10px 0; padding: 5px; transition: .2s; }
.aside .aside__menu nav ul li a { color: var(--primary-dark-color); font-size: 12px; border-left: 0; padding: 0; transition: .3s; }
.aside .aside__menu nav ul li:hover { border-left-color: var(--primary-dark-color); background-color: #f0f0f0; }
.aside .aside__menu nav ul li a.active-menu-aside { color: var(--primary-color); font-weight: bold; }
.aside .aside__contato h2 { text-align: center; }
.aside .aside__contato a { color: var(--primary-dark-color); text-align: center; display: block; margin: 10px; transition: all .2s ease; }
.aside .aside__contato a:hover { color: #5492c3; }

/*@CSS@*/
/*MODIFICAÇÕES E CRIAÇÕES FEITAS POR MIM*/
.slick-banner .slick-slide.slick-current.slick-active{
    height:1000px;
}
.slick-servicos .servico{
    height:350px;
}
.servicos .servico{
    height:200px;
}
.servicos .servico:hover{
    background-color: var(--primary-color);
    color:white;
}
.servicos .servico:hover h2{
    color:white;
}
.servicos-content{
    padding:60px 0;
}
.servico{
    box-shadow: rgba(99, 99, 99, 0.4) 0px 2px 8px 0px;
    border-radius: 10px;
    width:100%;
    padding:30px 30px;
    margin:0 10px;
    background-color:#f0f0f0;
    transition: 0.5s;
}
.servico:hover{
    box-shadow: rgba(99, 99, 99, 0.6) 0px 2px 8px 0px;
    transform: scale(1.02);
    transition: 0.5s;
}
.servico__icon{
    font-size:42px;
}
.servico h2{
    color:black;
    text-align: center;
}
.servico p{
    font-size:16px;
    line-height: 22px;
    
}
.titulo-servicos__h2{
    font-size:32px;
}
.solicite-orcamento{
    padding:100px 0;
    background-image:url("<?=$url?>imagens/fundo-solicite-orcamento/bg-solicite-orcamento.jpg");
    background-size: cover;
    background-attachment: fixed;
}
.solicite-orcamento h2{
    color:black;
    font-size:40px;
}
.slick-clientes{
    height:300px;
}
.slick-clientes img{
    width:unset;
    height:200px;
    object-fit: contain;
    padding:20px;
}
.clientes__h2{
    font-size:32px;
}

.thumbnails__card{
    box-shadow: rgba(99, 99, 99, 0.4) 0px 2px 8px 0px;
    transition:0.5s;
    border-radius: 20px 0 20px 0 ;
}
.thumbnails__card img{
    border-radius: 20px 0 0 0;
    aspect-ratio: 1.5/1;
    object-fit: cover;
}
.thumbnails__card h2{
    text-align: center;
    background-color:var(--primary-color);
    width:100%;
    height:130px;
    padding:20px 0;
    margin:0;
    border-radius: 0 0 20px 0;
}

.thumbnails__card:hover {
    box-shadow: rgba(99, 99, 99, 0.6) 0px 2px 8px 0px;
    transform: scale(1.02);
    transition: 0.5s;
}
.servico-destaque-01{
    background-image: url("<?=$url?>imagens/informacoes/empresas-promotor-merchandising-01.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height:400px;
    position:relative;
    padding:0;

}
.servico-destaque-02{
    background-image: url("<?=$url?>imagens/informacoes/degustadora-mercado-01.jpg");
    background-repeat: no-repeat;
    background-size:cover;
    height:400px;
    position:relative;
    padding:0;
}
.servico-destaque-03{
    background-image: url("<?=$url?>imagens/informacoes/empresa-promotor-vendas-02.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height:400px;
    position:relative;
    padding:0;
}
.servico-destaque-04{
    background-image: url("<?=$url?>imagens/informacoes/agencia-promocao-02.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height:400px;
    position:relative;
    padding:0;
}
.servicos-destaque__pelicula-preta{
    background-color:rgba(0,0,0,0.5);
    position: absolute;
    border-radius:10px;
    z-index: 9999;
    width:100%;
    height:400px;
    padding:20px;
    text-align: center;
}
.servicos-destaque__pelicula-preta h2{
    color:white;
}
.servicos-destaque__titulo{
    font-size:32px;
}
.historia-conceito picture legend{
    color:white;
    margin:20px 0;
    padding:20px;
    font-size:20px;
    background-color:var(--primary-color);
}
@media only screen and (max-width: 480px){
    div header:not(#topo-sobreposto){
    position: relative;

}
header .wrapper--bg-black { 
    background-color: black
}
} 
/*FIM DAS MODIFICAÇÕES*/
/* BREADCRUMB BASE */
.breadcrumb {
	display: inline-block;
	clear: both;
}

.breadcrumb :is([itemprop="title"], [itemprop="name"]) {
	font: 12px var(--primary-font);
	color: var(--grey);
}

.breadcrumb * {
	-webkit-transition: .3s;
	transition: .3s;
}

.breadcrumb :is(div, li) {
	display: inline;
}

.breadcrumb a:hover * {
	color: var(--primary-color);
}

.bread:is(.bread--default, .bread--mpi) .bread__column:not(:last-child)::after {
	content: "❱";
	margin-left: 2px;
	font-size: 12px;
}

.bread--flex {
  display: flex;
}

.bread--flex :is(span) {
  margin: 0 5px;
}

summary {
    cursor: pointer;
    font-weight: bold;
}
summary::before {
content: "+";
display: inline-block;
margin-right: 5px;
}
[open] summary::before {
content: "-";
}
details {
margin: 15px 0;
padding: 10px;
background: var(--primary-color);
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
color: white;
}
details p{
color: white;
}
.faq {
margin: 10px 0px;
font-size: 16px;
color: white;
}
details[open] {
margin-bottom: 20px;
}
[data-tab="guia-instalacao"] {
font-size: 24px;
font-weight: bold;
margin-bottom: 30px;
}



/* WHATSAPP BUTTON */
.whatsbutton-popup, .whatsbutton-container { z-index: 9999998; }
.whatsbutton-popup { display: none; justify-content: center; align-items: center; position: fixed; font-family: 'Arial', sans-serif; }
.whatsbutton-layer { width: 100%; height: 100%; position: absolute; background: rgba(0, 0, 0, 0.7); z-index: -1; }
.whatsbutton-popup, .whatsbutton-layer { top: 0; left: 0; width: 100%; height: 100%; }
.whatsbutton-form { display: block; min-width: 280px; max-width: 400px; width: 28%; -webkit-animation-name: WhatsFormShow; -webkit-animation-duration: 1s; animation-name: WhatsFormShow; animation-duration: 1s; }
.disabledbutton { user-select: none !important; }
.wb-head, .wb-body { width: 100%; }
.wb-head { height: 16%; min-height: 80px; padding: 1em; background: #009688; border-radius: 10px 10px 0 0; }
.wb-body { display: flex; height: auto; overflow-y: auto; flex-wrap: nowrap; flex-direction: column; background: #e9e9e9; border-radius: 0 0 10px 10px; padding: 1em; }

/* COMPONENTS WB */
.wb-icon { float: left; width: 45px; height: 45px; overflow: hidden; position: relative; line-height: normal; margin-left: .4em }
.wb-icon img { width: 100%; height: 100%; object-fit: cover; object-position: left; }
.wb-info { float: left; display: block; color: #eee; padding-left: .9em; }
.wb-title, .wb-text, .wb-statusOn { clear: both; display: block; }
.wb-title { font-size: .8em; font-weight: bold; }
.wb-text { font-size: .75em; font-weight: normal; margin: .25em 0; }
.wb-statusOn { font-size: .75em; }
.wb-statusOn::before { content: ' '; width: 5px; height: 5px; margin: 6px 3px 0 0; background: #4be726; float: left; border-radius: 50%; }
.wb-label { display: block; font-size: .9em; padding: 6px; border-radius: 4px; width: 100%; height: auto; text-align: center; color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; margin-bottom: .25em; }
.whatsbutton-form-input { margin: .5em 0; }
.box-input { position: relative; float: left; width: 100%; margin-bottom: .5em; }
.box-input .icon, .box-input .wb-input { padding: 0em 0em; height: 45px; }
.box-input .icon { float: left; width: 15%; border-radius: 25px 0 0 25px; background: #fff; display: flex; align-items: center; justify-content: center; }
.box-input .icon::after { color: #b96766; content: "!"; width: 18px; height: 18px; border-radius: 50%; background: #c80000; text-align: center; color: #fff; display: block; position: absolute; font-size: 12px; font-weight: 700; line-height: 18px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 13px; }
.box-input .icon svg { -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); }
.visibleError::after { opacity: 1 !important; }
.box-input .icon::after { opacity: 0; }
.box-input .wb-input { float: right; width: 85%; border: none; border-radius: 0 25px 25px 0; background: #fff; font-size: .8em }
.whatsbutton-popup .loader { display: none; margin: 1em auto; border: 3px solid #f8f8f8; border-top: 3px solid #009688; border-radius: 50%; width: 30px; height: 30px; animation: spin .5s linear infinite; }
.wb-sendMessage { background: #068377; color: #fff; font-weight: 500; font-size: 14px; line-height: 1.5; color: #fff; border-radius: 25px; background: #3dc15e; align-items: center; padding: 10px; border: none; -webkit-transition: all .4s; -o-transition: all .4s; -moz-transition: all .4s; transition: all .4s; margin: auto; float: none; outline: none; height: auto; display: flex; justify-content: center; align-items: center; margin-top: 1em; }
.wb-buttonClose { position: absolute; top: 2%; right: 1%; background: #009688; color: #fff; padding: 1em 1.35em; border-radius: 50%; cursor: pointer; transition: all .2s ease; }
.wb-buttonClose:hover { filter: brightness(90%); }
.wb-sendMessage:hover { background: #068377 !important; }
.wb-hidded { right: 0% !important; }
.messageAlert-success { display: none; }
.messageAlert-success p { text-align: center; margin: 1em 0; }
.whatsbutton-container { position: fixed; display: block; bottom: 25%; right: -90px; padding: 7px 25px 7px 8px; border-radius: 25px 0 0 25px; background-color: rgba(82.2, 208, 77.3, 0.91); transition: all .2s ease; cursor: pointer; -webkit-animation-name: WhatsButtonShow; -webkit-animation-duration: 1s; animation-name: WhatsButtonShow; animation-duration: 2s; }
.whatsbutton-icon { text-align: left; cursor: pointer; font: initial; box-sizing: border-box; vertical-align: initial; background-image: url(<?=$url?>imagens/icones/whatsapp-button.svg); background-size: 140px; background-repeat: no-repeat; background-position-y: center; width: 40px; height: 40px; display: inline-block; font-size: inherit; text-rendering: auto; margin-right: 0; color: #fff; float: left; }
.whatsbutton-text { float: left; display: flex; flex-direction: column; flex-wrap: wrap; padding-left: 1em; margin: .25em 0; }
.whatsbutton-text span { color: #fff !important; }
.wb-small, .wb-big { font-weight: 400; float: left; width: 100%; color: #fff; }
.wb-small { font-size: .75em; }
.wb-big { font-size: .85em; }
.whatsbutton-container:hover { right: 0; }
.whatsbutton-icon::before { content: '1'; width: 15px; height: 15px; border-radius: 50%; opacity: 0; background-color: red; line-height: 15px; position: absolute; font-size: .65em; font-weight: 700; font-family: Poppins, sans-serif; text-align: center; color: #fff; animation: WhatsButtonPulse .2s forwards; animation-delay: 15s; left: 8px; }
.whatsbutton-icon::after { content: ''; border-radius: 50%; background-color: #00e676; position: absolute; left: 10px; top: 9px; width: 36px; height: 36px; animation: WhatsButtonIcon 1.3s infinite; z-index: -1; }
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes WhatsButtonShow {
    0% { margin-right: 100px; opacity: 0 }
}
@keyframes WhatsFormShow {
    0% { margin-left: 20%; opacity: 0 }
}
@keyframes WhatsButtonPulse {
    0% { opacity: 0; transform: translateY(-10px) }
    100% { opacity: 1; transform: translateY(0px) }
}
@keyframes WhatsButtonIcon {
    0% { box-shadow: 0 0 0 0 rgba(0, 230, 118, .8) }
    100% { box-shadow: 0 0 0 25px transparent }
}
@media only screen and (max-width:767px) {
    .wb-buttonClose { display: none; }
}
/* END WHATSAPP BUTTON */




/* Instagram Button Styles */
.botao-instagram {
    position: fixed;
    display: block;
    bottom: 35%;
    right: -108px;
    padding: 7px 25px 7px 8px;
    border-radius: 25px 0 0 25px;
    background: #f70071;
    transition: all 0.2s ease;
    cursor: pointer;
    animation-duration: 2s;
    z-index: 99;
}

.botao-instagram img {
    animation: instaButtonImg 1.3s infinite;
    border-radius: 100%;
}

.botao-instagram:hover {
    right: 0;
}

.instagram-text {
    float: right;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0.5em 0 0 1em;
    margin: 0.25em 0;
}

.instagram-text span {
    color: #fff !important;
}

/* Facebook Button Styles */
.botao-facebook {
    position: fixed;
    display: block;
    bottom: 45%;
    right: -105px;
    padding: 7px 25px 7px 8px;
    border-radius: 25px 0 0 25px;
    background: #3b5998;
    transition: all 0.2s ease;
    cursor: pointer;
    animation-duration: 2s;
    z-index: 99;
}

.botao-facebook img {
    animation: faceButtonImg 1.3s infinite;
    border-radius: 100%;
}

.botao-facebook:hover {
    right: 0;
}

.facebook-text {
    float: right;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0.5em 0 0 1em;
    margin: 0.25em 0;
}

.facebook-text span {
    color: #fff !important;
}

/* YouTube Button Styles
.botao-youtube {
    position: fixed;
    display: block;
    bottom: 45%;
    right: -99px;
    padding: 7px 25px 7px 8px;
    border-radius: 25px 0 0 25px;
    background: #ff0000;
    transition: all 0.2s ease;
    cursor: pointer;
    animation-duration: 2s;
    z-index: 99;
}

.botao-youtube img {
    animation: youtubeButtonImg 1.3s infinite;
    border-radius: 100%;
}

.botao-youtube:hover {
    right: 0;
}

.youtube-text {
    float: right;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0.5em 0 0 1em;
    margin: 0.25em 0;
}

.youtube-text span {
    color: #fff !important;
}
*/

/* LinkedIn Button Styles */
.botao-linkedin {
    position: fixed;
    display: block;
    bottom: 55%;
    right: -99px;
    padding: 7px 25px 7px 8px;
    border-radius: 25px 0 0 25px;
    background: #007ab9;
    transition: all 0.2s ease;
    cursor: pointer;
    animation-duration: 2s;
    z-index: 99;
}

.botao-linkedin img {
    animation: linkedinButtonImg 1.3s infinite;
    border-radius: 100%;
}

.botao-linkedin:hover {
    right: 0;
}

.linkedin-text {
    float: right;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0.5em 0 0 1em;
    margin: 0.25em 0;
}

.linkedin-text span {
    color: #fff !important;
}

@media only screen and (max-width: 765px) {
    .botao-instagram, .botao-facebook, .botao-youtube, .botao-linkedin {
        display: inline-block;
        position: fixed;
        z-index: 2000;
        cursor: pointer;
        outline: none;
        margin-right: 2em;
    }
.botao-linkedin {
    right: -135px;
  }

  .botao-facebook {
    right: -145px;
  }

  .botao-instagram {
    right: -150px;
  }
}

@keyframes instaButtonImg {
    0% { box-shadow: 0 0 0 0 rgba(204, 18, 173, 0.8); }
    100% { box-shadow: 0 0 0 25px transparent; }
}

@keyframes faceButtonImg {
    0% { box-shadow: 0 0 0 0 rgba(64, 75, 177, 0.8); }
    100% { box-shadow: 0 0 0 25px transparent; }
}

@keyframes youtubeButtonImg {
    0% { box-shadow: 0 0 0 0 rgba(243, 25, 25, 0.8); }
    100% { box-shadow: 0 0 0 25px transparent; }
}

@keyframes linkedinButtonImg {
    0% { box-shadow: 0 0 0 0 rgba(54, 124, 204, 0.8); }
    100% { box-shadow: 0 0 0 25px transparent; }
}