/* RESET */
* {margin: 0; padding: 0; font-size: 100%; border: none; outline: none; box-sizing: border-box; font-weight: 300; font-family: "Montserrat", sans-serif; color: #666;}
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
html {scroll-behavior: smooth;}
body {background-color: #fff;}
a {text-decoration: none;}
ul {list-style: none;}
img {max-width: 100%;}
.margem {position: relative; float: left; width: 95%; margin-left: 2.5%;}
.negrito {font-weight: 700;}
.branco {color: #F0F0F0;}
.botao-fora-a-fora {position: relative; float: left; width: 100%;}

/*========== OVER ==========*/
.over {position: fixed; width: 100%; height: 100%; background-color: rgba(20,20,20,0.95); z-index: 99999;}
.over-conteudo {position: relative; float: left; width: 360px; left: 50%; margin-left: -180px; padding: 120px 20px; text-align: center; color: #fff;}
.titulo-over {position: relative; float: left; width: 100%; margin-bottom: 10px; text-align: center; font-size: 30px; font-weight: 800; color: #F0F0F0; text-shadow: 1px 1px 1px rgba(0,0,0,.5);}
.subtitulo-over {position: relative; float: left; width: 100%; margin-bottom: 30px; text-align: center; font-size: 20px; font-weight: 700; color: #F0F0F0; text-shadow: 1px 1px 1px rgba(0,0,0,.5);}
.btn-close {position: absolute; top: 70px; right: 15px; width: 45px; height: 45px; font-size: 25px; text-align: center; color: #4b4750; border-radius: 56px; cursor: pointer; transition: 0.1s ease-out;}

/* TOPO */
.topo {position: fixed; float: left; width: 100%; height: 100px; box-shadow: 0 4px 10px -10px rgb(0 0 0 / 60%); background-color: rgba(10,10,10,0.9); z-index: 9999; transition: 0.3s ease-out;}
.logo {position: relative; float: left; width: 210px; height: 35px; margin-top: 32px; cursor: pointer; transition: 0.3s ease-out;}
.botao-entre-em-contato {position: relative; float: right; width: 130px; height: 45px; padding-top: 13px; margin-top: 27px; border-radius: 3px; font-weight: 700; font-size: 11px; text-align: center; text-transform: uppercase; line-height: 17px; color: #000; background-color: #2FA03E; cursor: pointer; transition: 0.3s ease-out;}
.botao-entre-em-contato:hover {color: #000; background-color: #25d366;}

/* CONTEUDO */
.banner {position: relative; float: left; width: 100%; padding: 200px 0 50px 0; text-align: center; background-image: url("../img/bg1.jpg"); background-size: cover; background-position: center;}
.banner-margem {position: relative; float: left; width: 100%;}
.frases-banner {position: relative; float: left; width: 95%; margin-left: 2.5%;}
.imagem-banner {position: relative; float: left; width: 360px; height: 240px; left: 50%; margin-left: -180px; margin-top: 50px; border-radius: 15px; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); background-image: url("../img/imagem-banner.jpg"); background-size: cover; background-position: center;}
.banner h1 {margin-bottom: 20px; font-weight: 700; font-size: 28px; line-height: 1.3em; color: #F0F0F0;}
.banner h2 {font-weight: 400; font-size: 20px; line-height: 1.3em; color: #F0F0F0;}
.botao {position: relative; float: left; width: 240px; height: 50px; animation: pulse 0.7s infinite; animation-direction: alternate; -webkit-animation-name: pulse; animation-name: pulse; left: 50%; margin-left: -120px; padding-top: 16px; margin-top: 27px; font-weight: 700; font-size: 13px; text-align: center; text-transform: uppercase; line-height: 17px; color: #000; border-radius: 3px; background-color: #2FA03E; cursor: pointer; transition: 0.3s ease-out;}
.botao:hover {color: #000; background-color: #25d366;}

@-webkit-keyframes pulse {0% {-webkit-transform: scale(1);} 100% {-webkit-transform: scale(1.04);}}
@keyframes pulse {0% {transform: scale(1);} 100% {transform: scale(1.04);}}

.segunda-parte {position: relative; float: left; width: 100%; padding: 100px 0; text-align: center; background: #181818;}
.blocos {position: relative; float: left; width: 100%; margin-top: 20px;}
.bloco, .bloco-unico {position: relative; float: left; width: 100%; margin: 10px 0; padding: 50px 20px; border-radius: 15px; font-size: 16px; line-height: 24px; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); background: linear-gradient(180deg, #000000 0%, #121212 100%); transition: 0.3s ease-out;}
.frases-bloco-unico {position: relative; float: left; width: 100%;}
.imagem-bloco-unico {position: relative; float: left; width: 300px; height: 400px; left: 50%; margin-left: -150px; margin-top: 50px; border-radius: 15px; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); background-image: url("../img/advogadas.jpg"); background-size: cover; background-position: center;}
.bloco-linha {position: relative; float: left; width: 100%;}
.img-bloco {position: relative; float: left; width: 100%; margin-bottom: 12px;}
.img-bloco img {position: relative; float: left; width: 60px; height: 60px; left: 50%; margin-left: -30px;}
.titulo-bloco {position: relative; float: left; width: 100%; margin-bottom: 20px; line-height: 1.3em; font-weight: 700; text-transform: uppercase; font-size: 28px; color: #F0F0F0;}
.descricao-bloco {position: relative; float: left; width: 100%; font-weight: 400; font-size: 16px; color: #F0F0F0;}
.botao2 {position: relative; float: left; width: 280px; height: 50px; left: 50%; margin-left: -140px; padding-top: 16px; margin-top: 27px; font-weight: 700; font-size: 13px; text-align: center; text-transform: uppercase; line-height: 17px; color: #000; border-radius: 3px; background-color: #2FA03E; cursor: pointer; transition: 0.3s ease-out;}
.botao2:hover {color: #000; background-color: #25d366;}
.botao-bloco, .botao-bloco-unico {position: relative; float: left; width: 100%; padding: 16px; margin-top: 27px; font-weight: 700; font-size: 13px; text-align: center; text-transform: uppercase; line-height: 17px; color: #000; border-radius: 3px; background-color: #2FA03E; cursor: pointer; transition: 0.3s ease-out;}
.botao-bloco:hover, .botao-bloco-unico:hover {color: #000; background-color: #25d366;}

/* CARROSSEL */
.carrossel-animado {position: relative; float: left; width: 100%; display: flex; background: linear-gradient(to left, #a67f2a, #f2e187); overflow: hidden;}
.texto {white-space: nowrap; display: inline-block; color: #000; margin: 30px 0px; font-size: 1.5em; animation: carrossel 12s linear infinite; clear: both; line-height: 1.4;}
@keyframes carrossel {0% {transform: translate(0)} 100% {transform: translate(-100%)}}

.terceira-parte {position: relative; float: left; width: 100%; padding: 100px 0; text-align: center; background: #181818;}
.terceira-parte h1 {margin-bottom: 20px; color: #F0F0F0; font-weight: 800; font-size: 28px;}

.quarta-parte {position: relative; float: left; width: 100%; padding: 100px 0; text-align: center; background: #121212;}
.machado-e-tenorio {position: relative; float: left; width: 100%;}
.machado-e-tenorio-imagem {position: relative; float: left; width: 100%; margin-bottom: 30px;}
.machado-e-tenorio-imagem img {border-radius: 15px;}
.machado-e-tenorio-descricao {position: relative; float: left; width: 100%; font-weight: 400; font-size: 16px; color: #F0F0F0;}
.machado-e-tenorio-descricao h1 {color: #F0F0F0; font-weight: 800; font-size: 28px;}
.machado-e-tenorio-descricao h2 {color: #dfd07b; font-weight: 800; font-size: 20px;}

.quinta-parte {position: relative; float: left; width: 100%; padding: 100px 0; text-align: center; background: #181818;}
.quinta-parte h1 {color: #F0F0F0; font-weight: 800; font-size: 28px; margin-bottom: 20px;}
.socias-fundadoras {position: relative; float: left; width: 100%;}
.tenorio {position: relative; float: left; width: 100%;}
.img-tenorio, .img-machado {position: relative; float: left; width: 80%; margin-left: 10%;}
.img-tenorio img, .img-machado img {border-radius: 15px;}
.descricao-tenorio, .descricao-machado {position: relative; float: left; width: 100%; margin-top: 20px; font-weight: 400; font-size: 16px; color: #F0F0F0;}
.machado {position: relative; float: left; width: 100%; margin-top: 20px;}
.tenorio h1, .machado h1 {color: #F0F0F0; font-weight: 800; font-size: 24px;}
.tenorio h2, .machado h2 {color: #dfd07b; font-weight: 800; font-size: 20px;}

/* DEPOIMENTOS */
.sexta-parte {position: relative; float: left; width: 100%; padding: 100px 0 0 0; text-align: center; background: #121212;}
.sexta-parte h1 {color: #F0F0F0; font-weight: 800; font-size: 24px;}
.sexta-parte h2 {color: #dfd07b; font-weight: 800; font-size: 20px;}
.depoimentos {position: relative; float: left; width: 100%; display: flex; align-items: center; padding: 10px 35px 0 35px;}
.wrapper {position: relative; float: left; width: 340px; left: 50%; margin-left: -170px;}
.wrapper i {top: 35%; height: 46px; width: 46px; cursor: pointer; position: absolute; font-size: 1.2rem; text-align: center; line-height: 46px; background: #353535; color: #dfd07b; border-radius: 50%; transform: translateY(-50%);}
.wrapper i:first-child {left: -23px; display: none;}
.wrapper i:last-child {right: -23px;}
.wrapper .carousel {font-size: 0px; cursor: pointer; overflow: hidden; white-space: nowrap; scroll-behavior: smooth;}
.carousel.dragging {cursor: grab; scroll-behavior: auto;}
.carousel.dragging img {pointer-events: none;}
.carousel.dragging .depoimento {pointer-events: none;}
.carousel img {height: 641px; object-fit: cover; margin-left: 14px; width: 100%;}
.carousel img:first-child{margin-left: 0px;}

/* POLÍTICA DE PRIVACIDADE */
.politica-de-privacidade {position: relative; float: left; width: 100%; padding: 180px 0 60px 0; background: #121212;}
.politica-de-privacidade .margem {color: #F0F0F0; font-weight: 400; font-size: 16px;}
.politica-de-privacidade h2 {color: #F0F0F0; font-weight: 800; font-size: 20px;}

/* RODAPE */
footer {position: relative; float: left; width: 100%; padding: 70px 30px; text-align: center; font-size: 16px; line-height: 24px; background: #222;}
footer .margem {color: #F0F0F0;}
.link-rodape {color: #F0F0F0;}
.link-rodape:hover {text-decoration: underline;}


/*========== MOBILE FIRST ===========*/
/* SMALL DEVICES - SMARTPHONES */
@media screen and (min-width: 480px) {
.margem {width: 400px; left: 50%; margin-left: -200px;}
.logo {width: 220px; height: 64px; margin-top: 30px;}
.botao-entre-em-contato {width: 140px; height: 45px; padding-top: 13px; margin-top: 27px; font-size: 11px;}
.banner .margem {font-size: 32px;}
}

/* SMALL DEVICES - TABLETS */
@media screen and (min-width: 768px) {
.over-conteudo, .banner-margem {width: 700px; left: 50%; margin-left: -350px;}
.titulo-over {font-size: 42px;}
.subtitulo-over {font-size: 24px;}
.topo {height: 120px;}
.margem {width: 700px; margin-left: -350px;}
.logo {width: 370px; height: 90px;}
.imagem-banner {width: 540px; height: 360px; margin-left: -270px;}
.banner h1 {font-size: 39px;}
.botao-entre-em-contato {width: 250px; height: 60px; padding-top: 20px; margin-top: 30px; font-size: 15px;}
.botao {width: 300px; height: 60px; margin-left: -150px; padding-top: 20px; margin-top: 27px; font-weight: 700; font-size: 15px;}
.segunda-parte h1 {font-size: 34px;}
.bloco {width: 213px; margin: 10px;}
.descricao-bloco {padding: 0 10px;}
.botao-bloco-unico {width: 340px; left: 50%; margin-left: -170px;}
.botao2 {width: 300px; height: 60px; margin-left: -150px; padding-top: 20px; margin-top: 27px; font-weight: 700; font-size: 15px;}

.terceira-parte h1, .quarta-parte h1, .sexta-parte h1 {font-size: 34px;}

.machado-e-tenorio-imagem {width: 50%; margin-left: 25%;}

.quinta-parte h1 {font-size: 34px;}
.tenorio {width: 49%;}
.machado {width: 49%; margin-left: 2%; margin-top: 0;}
.img-tenorio, .img-machado {width: 100%; margin-left: 0;}

.wrapper {width: 700px; margin-left: -350px;}
.carousel img {width: calc(100%/2.05);}
}

/* MEDIUM DEVICES - TABLETS & DESKTOPS */
@media screen and (min-width: 960px) {
.over-conteudo, .banner-margem {width: 900px; margin-left: -450px;}
.titulo-over {margin-bottom: 30px; font-size: 44px; line-height: 58px;}
.subtitulo-over {margin-bottom: 50px;}
.logo {width: 429px; height: 90px; margin-top: 25px;}
.banner {padding: 200px 0 170px 0;}
.frases-banner {width: 420px; margin-left: 0;}
.banner h1 {font-size: 28px; text-align: left;}
.banner h2 {font-size: 17px; text-align: left;}
.imagem-banner {width: 450px; height: 300px; left: 0; margin-left: 0; margin-top: 100px; float: right;}

.margem {width: 900px; margin-left: -450px;}
.bloco {width: 280px;}
.frases-bloco-unico {width: 540px; float: right;}
.imagem-bloco-unico {width: 280px; height: 373px; left: 0; margin-left: 0; margin-top: 24px;}

.img-advogado {width: 450px;}
.txt-advogado {width: 400px; margin-left: 50px; margin-top: 80px;}

.machado-e-tenorio-imagem {width: 45%; margin-left: 0;}
.machado-e-tenorio-descricao {width: 52%; margin-left: 3%; text-align: left;}

.politica-de-privacidade .margem {font-size: 17px;}
.politica-de-privacidade h2 {font-size: 24px;}
}

/* LARGE DEVICES - WIDE SCREENS */
@media screen and (min-width: 1280px) {
.margem, .banner-margem {width: 1100px; margin-left: -550px;}
.banner .margem {font-size: 48px;}
.bloco {width: 346px;}
.frases-bloco-unico {width: 680px; margin-top: 46px;}
.imagem-bloco-unico {width: 340px; height: 453px; left: 0; margin-left: 0; margin-top: 0;}

.frases-banner {width: 540px; margin-left: 0;}
.banner h1 {font-size: 34px;}
.banner h2 {font-size: 19px;}
.imagem-banner {width: 540px; height: 360px; margin-top: 64px;}

.advogados {width: 900px; margin-left: 100px;}

.machado-e-tenorio-imagem {width: 44%;}
.machado-e-tenorio-descricao {width: 54%; margin-left: 2%; font-size: 17px;}

.wrapper {width: 1100px; margin-left: -550px;}
.carousel img {width: calc(100%/3.08);}
}