﻿@charset "UTF-8";
/*CSS Reset*/
body {
  margin: 0; }
  body a {
    display: block;
    text-decoration: none; }
  body h1, body p {
    margin: 0;
    font-weight: normal; }
  body img {
    display: block;
    max-width: 100%; }
  body ul {
    margin: 0;
    padding: 0; }
  body li {
    list-style: none; }

@font-face {
  font-family: "Segoe UI";
  src: url("fonts/segoeui.ttf"); }

@font-face {
  font-family: "Segoe UI Light";
  src: url("fonts/segoeuil.ttf"); }

@font-face {
  font-family: "Segoe UI Semibold";
  src: url("fonts/seguisb.ttf"); }

/*Início do CSS*/
body {
  font-family: 'Segoe UI';
  background-color: #1E1E1E;
  /*Imagens Principais das Seções*/
  /*Estilos Gerais*/ }
  body .historia {
    background: no-repeat center/cover url("../img/historia.jpg");
    float: right; }
  body .casosfamosos {
    background: no-repeat center/cover url("../img/casos-famosos.jpg"); }
  body .visao {
    background: no-repeat center/cover url("../img/visao.jpg");
    float: right; }
  body .valores {
    background: no-repeat center/cover url("../img/valores.jpg"); }
  body .advogados {
    background: no-repeat center/cover url("../img/capa.jpg"); }
  body .administrativo {
    background: no-repeat center/cover url("../img/istockphoto-1059661834-2048x2048.jpg"); }
  body .trabalhista {
    background: no-repeat center/cover url("../img/trabalhista.jpg");
    float: right; }
  body .familiaesucessoes {
    background: no-repeat center/cover url("../img/familiaesucessoes.jpg"); }
  body .tributario {
    background: no-repeat center/cover url("../img/tributario.jpg");
    float: right; }
  body .aduaneiro {
    background: no-repeat center/cover url("../img/aduaneiro.jpg");
    float: right; }
  body .previdenciario {
    background: no-repeat center/cover url("../img/previdenciario.jpg"); }
  body .consumidor {
    background: no-repeat center/cover url("../img/consumidor.jpg"); }
  body .civil {
    background: no-repeat center/cover url("../img/civil.jpg");
    float: right; }
  body header {
    width: 100%;
    box-shadow: 0px 5px 15px 0px rgba(44, 44, 44, 0.15);
    background-color: #fff; }
    body header > nav {
      width: 100%;
      height: 80px;
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center; }
      @media (max-width: 1200px) {
        body header > nav {
          width: 100%;
          justify-content: space-between;
          flex-direction: row-reverse; } }
      @media (max-width: 767px) {
        body header > nav > a {
          display: flex;
          justify-content: center;
          align-items: center; } }
      body header > nav > a img {
        width: 70%;
        padding: 5px 0; }
      body header > nav > ul.menu {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center; }
        @media (max-width: 1200px) {
          body header > nav > ul.menu {
            display: none; }
            body header > nav > ul.menu.ativo {
              display: block;
              top: 64px;
              width: 100%;
              position: absolute;
              background-color: #fff;
              padding: 30px 0;
              height: auto;
              overflow: hidden;
              z-index: 999;
              animation: showmenu .5s forwards; }
          @keyframes showmenu {
            from {
              height: 0px;
              opacity: 0; }
            to {
              height: 400px;
              opacity: 1; } }
              body header > nav > ul.menu.ativo > li {
                height: 40px;
                width: 100%; }
                body header > nav > ul.menu.ativo > li + li {
                  margin-left: 0;
                  margin-top: 30px; } }
        body header > nav > ul.menu > li {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100%; }
          @media (max-width: 1200px) {
            body header > nav > ul.menu > li {
              display: block;
              text-align: center; } }
          body header > nav > ul.menu > li + li {
            margin-left: 30px; }
          body header > nav > ul.menu > li > a {
            color: #707070;
            text-transform: uppercase;
            font-size: 1.125rem;
            padding: 8px; }
          body header > nav > ul.menu > li > .submenu {
            position: absolute;
            top: 80px;
            min-width: 162px;
            display: none;
            z-index: 1; }
            @media (max-width: 1200px) {
              body header > nav > ul.menu > li > .submenu {
                width: 100%;
                position: static; } }
            body header > nav > ul.menu > li > .submenu > li > a {
              color: #000;
              background-color: #E5E5E5;
              text-transform: uppercase;
              font-size: 0.875rem;
              padding: 14px;
              transition: .2s ease-in-out;
              text-align: center;
              font-family: 'Segoe UI Light', sans-serif; }
              body header > nav > ul.menu > li > .submenu > li > a:hover {
                color: #fff;
                background-color: #707070; }
        @media (max-width: 1200px) {
          body header > nav > ul.menu > li.ativo {
            height: auto; } }
        body header > nav > ul.menu > li.ativo > .submenu {
          display: block;
          animation: show .4s ease-in-out; }

@keyframes show {
  from {
    transform: translate3d(-30px, 0, 0);
    opacity: 0; }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1; } }
      body header > nav > .menu-button {
        display: none !important;
        width: 50px;
        height: 60%;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start; }
        @media (max-width: 1200px) {
          body header > nav > .menu-button {
            display: flex !important;
            margin-left: 20px; } }
        body header > nav > .menu-button > div {
          width: 60%;
          height: 4px;
          background: #e72913;
          border-radius: 50px; }
          body header > nav > .menu-button > div + div {
            margin-top: 5px; }
          body header > nav > .menu-button > div:nth-child(2) {
            background: #000;
            width: 45%; }
  body > section {
    width: 100%;
    min-height: 80vh;
    background: no-repeat center/cover url("../img/capa.jpg");
    display: flex;
    justify-content: center;
    align-items: center; }
    @media (max-width: 767px) {
      body > section {
        padding: 40px 0; } }
    body > section .container-button {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 50px;
      justify-content: space-between; }
      @media (max-width: 767px) {
        body > section .container-button {
          gap: 30px; } }
      body > section .container-button > a {
        color: #000; }
        body > section .container-button > a .button {
          width: 100%;
          min-height: 150px;
          background-color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          margin: 30px 0;
          position: relative; }
          @media (max-width: 767px) {
            body > section .container-button > a .button {
              margin: 0; } }
          body > section .container-button > a .button > p {
            text-align: center;
            text-transform: uppercase;
            font-size: 2rem;
            font-family: 'Segoe UI Light', sans-serif; }
          body > section .container-button > a .button:after {
            content: '';
            background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url("../img/capa-2.jpg");
            background-position: center;
            background-size: cover;
            width: 100%;
            min-height: 0px;
            position: absolute; }
          body > section .container-button > a .button:hover > p {
            position: absolute;
            z-index: 9999;
            color: #fff; }
          body > section .container-button > a .button:hover:after {
            min-height: 150px;
            transition: min-height .3s ease-in-out; }
        body > section .container-button > a:nth-child(1) .button:after {
          background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url("../img/trabalhista.jpg"); }
        body > section .container-button > a:nth-child(2) .button:after {
          background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url("../img/familiaesucessoes.jpg"); }
        body > section .container-button > a:nth-child(3) .button:after {
          background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url("../img/previdenciario.jpg"); }
    body > section .areas-de-atuacao {
      width: 100%; }
      body > section .areas-de-atuacao a {
        color: #000; }
      body > section .areas-de-atuacao h1 {
        font-size: 1.125rem;
        color: #fff;
        text-transform: uppercase;
        text-align: center; }
        @media (max-width: 767px) {
          body > section .areas-de-atuacao h1 {
            margin: 20px 0; } }
  body > section:nth-child(n+3) {
    min-height: 50vh;
    /* background: no-repeat center/cover url("../img/capa-2.jpg");*/
    background: #1E1E1E;
    width: 100%; }
  body > .blog {
    display: flex;
    justify-content: center;
    min-height: 80vh;
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: -130px;
    bottom: -50px; }
    @media (max-width: 767px) {
      body > .blog {
        position: unset;
        margin-top: unset; } }
    body > .blog > div {
      width: 60%;
      max-width: 1200px;
      height: 100%;
      min-height: 80vh;
      background-color: #fff; }
      @media (max-width: 767px) {
        body > .blog > div {
          width: 100%; } }
      body > .blog > div > p {
        text-align: center;
        width: 90%;
        margin: 0 auto;
        margin-top: 50px;
        line-height: 25px; }
      body > .blog > div > h1 {
        width: 100%;
        text-transform: uppercase;
        font-family: "Segoe UI Light";
        text-align: center;
        margin: 30px auto;
        position: relative; }
        body > .blog > div > h1:before, body > .blog > div > h1:after {
          content: '';
          height: 1px;
          background: #000;
          width: 30%;
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto; }
          @media (max-width: 767px) {
            body > .blog > div > h1:before, body > .blog > div > h1:after {
              width: 20%; } }
        body > .blog > div > h1:before {
          left: 5%; }
        body > .blog > div > h1:after {
          right: 5%; }
    body > .blog iframe {
      width: 100%;
      margin-top: -100px;
      margin-right: -6%;
      overflow: hidden;
      min-height: 80vh; }
      body > .blog iframe > body {
        background-color: #fff; }
  body > form {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
    padding: 30px 0;
    text-align: center; }
    body > form > h1 {
      font-size: 2rem;
      margin: 30px 0; }
    body > form > p {
      width: 60%; }
      @media (max-width: 767px) {
        body > form > p {
          width: 100%;
          text-align: start; } }
      body > form > p > label {
        width: 100%;
        font-family: 'Segoe UI Semibold', sans-serif;
        display: flex;
        flex-direction: column;
        text-align: start; }
        body > form > p > label > input,
        body > form > p > label textarea {
          width: 100%;
          margin: 5px 0;
          min-height: 35px;
          background-color: #E5E5E5;
          resize: none;
          outline: none;
          border: none; }
          @media (max-width: 767px) {
            body > form > p > label > input,
            body > form > p > label textarea {
              min-height: 55px;
              font-size: 1.2rem;
              margin: 10px 0; } }
    body > form input[type=submit] {
      margin: 20px 0;
      min-width: 100px;
      min-height: 40px;
      color: #fff;
      background: transparent;
      border: 2px solid #fff;
      border-radius: 30px;
      cursor: pointer; }
      @media (max-width: 767px) {
        body > form input[type=submit] {
          min-width: 200px;
          min-height: 50px;
          font-size: 1.2rem; } }
      body > form input[type=submit]:hover {
        transform: scale(1.1);
        transition: .3s ease-in-out; }
        @media (max-width: 767px) {
          body > form input[type=submit]:hover {
            transform: unset; } }
  body > footer {
    min-height: 100px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; }
    body > footer > .voltar {
      color: #fff;
      text-decoration: none;
      font-size: 1.3rem;
      width: fit-content;
      margin: 5px;
      position: absolute;
      top: -50px;
      left: 10px; }
    body > footer > div {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center; }
      @media (max-width: 767px) {
        body > footer > div {
          padding: 30px;
          display: block;
          text-align: center; } }
      body > footer > div > a {
        color: #000; }
        body > footer > div > a + a {
          margin-left: 30px; }
          @media (max-width: 767px) {
            body > footer > div > a + a {
              margin-left: 0px;
              margin-top: 30px; } }
      body > footer > div > p {
        flex-basis: 100%;
        text-align: center; }
        @media (max-width: 767px) {
          body > footer > div > p {
            flex-basis: unset;
            margin-top: 30px; } }


      /* Style the Image Used to Trigger the Modal */
      #myImg {
         border-radius: 5px;
         cursor: pointer;
         transition: 0.3s;
      }

      #myImg:hover {
         opacity: 0.7;
      }

      /* The Modal (background) */
      .modal {
         display: none;
         /* Hidden by default */
         position: fixed;
         /* Stay in place */
         z-index: 1;
         /* Sit on top */
         padding-top: 100px;
         /* Location of the box */
         left: 0;
         top: 0;
         width: 100%;
         /* Full width */
         height: 100%;
         /* Full height */
         overflow: auto;
         /* Enable scroll if needed */
         background-color: rgb(0, 0, 0);
         /* Fallback color */
         background-color: rgba(0, 0, 0, 0.9);
         /* Black w/ opacity */
      }

      /* Modal Content (Image) */
      .modal-content {
         margin: auto;
         display: block;
         width: 80%;
         max-width: 700px;
      }

      /* Caption of Modal Image (Image Text) - Same Width as the Image */
      #caption {
         margin: auto;
         display: block;
         width: 80%;
         max-width: 700px;
         text-align: center;
         color: #ccc;
         padding: 10px 0;
         height: 150px;
      }

      /* Add Animation - Zoom in the Modal */
      .modal-content,
      #caption {
         animation-name: zoom;
         animation-duration: 0.6s;
      }

      @keyframes zoom {
         from {
            transform: scale(0)
         }

         to {
            transform: scale(1)
         }
      }

      /* The Close Button */
      .close {
         position: absolute;
         top: 15px;
         right: 35px;
         color: #f1f1f1;
         font-size: 40px;
         font-weight: bold;
         transition: 0.3s;
      }

      .close:hover,
      .close:focus {
         color: #bbb;
         text-decoration: none;
         cursor: pointer;
      }

      /* 100% Image Width on Smaller Screens */
      @media only screen and (max-width: 700px) {
         .modal-content {
            width: 100%;
         }
      }
