html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

/*RESET*/
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }

h1, h2, h3, h4, h5, h6 {margin: 0; font-weight: normal;}

a {text-decoration: none;}
b, strong {font-weight: 500;}

.btn {padding: 7px 14px; border-radius: 7px; font-size: 14px; font-weight: 400; cursor: pointer; letter-spacing: 0.3px;}
.btn-white {background: #fff; color: #333;}
.btn-white:hover {opacity: 0.9;}

.btn-dark {background: #444; color: #fff; padding: 12px 42px;}
.btn-dark:hover {opacity: 0.9}

fieldset {margin: 0; padding: 0; border: none;}

/*MAIN*/
body {font-family: 'Roboto', sans-serif; letter-spacing: 0.3px}
.wrapper {width: 100%;}

header, main, footer {width: 100%}
.content {max-width: 1000px; margin: 0 auto;}

/*HEADER*/
header {padding: 26px 0;}
header .content {display: flex; justify-content: space-between; padding: 10px 20px;}
header .content .logo {max-width: 170px;}
header .content .logo img {width: 100%;}

/* ======================================== 
SLIDER
=========================================*/
.carousel-wrapper{
  height:400px;
  position:relative;
  width:100%;
  margin:0 auto;
}

body.pag-inicial .carousel-wrapper {
  /*QUICK FIX BG for animation*/
  background:url('../img/advocacia-escritorio.jpg') no-repeat;
  background-size: 100%;
  background-attachment:fixed;
}

.carousel-item{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  padding:25px 50px;
  /*opacity:0;
  /*transition: all 0.5s ease-in-out;*/
  text-align: center;
  color: #fff;
}

.carousel-content {
  position: relative; top: 50%;
  transform: translateY(-50%);
}

.carousel-content h1, 
.carousel-content h2 {margin-bottom: 75px; font-weight: 400; font-size: 28px; line-height: 1.5; text-transform: uppercase;}
.carousel-content h1 span,
.carousel-content h2 span {font-weight: 100; text-transform: lowercase;}

.arrow{
  position:absolute;
  top:0;
  display:block;
  width:50px;
  height:100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  background: url("../img/carousel-arrow-light.png") 50% 50% / 20px no-repeat;
  opacity: 0.25;
}
.arrow:hover {opacity: 0.75}

.arrow-prev{left:0;}
 
.arrow-next{
    right:0;
    -webkit-transform: rotate(180deg);
     transform: rotate(180deg);
  }

.light{color:white;}

@media (max-width: 480px) {
  .arrow, .light .arrow {
    background-size: 10px;
    background-position: 10px 50%;
  }
}

/*Select every element*/
[id^="item"] {display: none;}

/*.carousel-wrapper .item-1 {z-index: 2; opacity: 1;}*/

body.pag-inicial .carousel-wrapper .item-1,
body.pag-inicial .carousel-wrapper .item-2,
body.pag-inicial .carousel-wrapper .item-3{ 
  background:url('../img/advocacia-escritorio.jpg');
  background-size: 100%;
  background-attachment:fixed;
  background-repeat: no-repeat;
  }

/*
*:target ~ .item-1 {opacity: 0;}
#item-1:target ~ .item-1 {opacity: 1;}
#item-2:target ~ .item-2, 
#item-3:target ~ .item-3 {z-index: 3; opacity: 1;}
*/

/*
.item-1, .item-2, .item-3 {opacity: 0; z-index: 0}
.item-1.active, .item-2.active, .item-3.active {opacity: 1; z-index: 2}
*/

.frase-1, 
.frase-2, 
.frase-3 {position:absolute; left: 0; right: 0;} 

.frase-1 {opacity:1; animation: fadeinphoto1 10s infinite;}
.frase-2 {opacity:1; animation: fadeinphoto2 10s infinite;}
.frase-3 {opacity:1; animation: fadeinphoto3 10s infinite;}

/* Animation Keyframes 01 */
@keyframes fadeinphoto1 {
  0% {opacity: 0;}
    2% {opacity: 1;}
    3% {opacity: 1;}
  10% {opacity: 1;}
  20% {opacity: 1;}
  30% {opacity: 1;}
    35% {opacity: 0;}
  40% {opacity: 0;}
  50% {opacity: 0;}
  60% {opacity: 0;}
  70% {opacity: 0;}
  80% {opacity: 0;}
  100% {opacity: 0;}
}

@keyframes fadeinphoto2 {
  0% {opacity: 0;}
  10% {opacity: 0;}
  20% {opacity: 0;}
  30% {opacity: 0;}
  40% {opacity: 1;}
  50% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 1;}
  72% {opacity: 0;}
  80% {opacity: 0;}
  100% {opacity: 0;}
}

@keyframes fadeinphoto3 {
  0% {opacity: 0;}
  10% {opacity: 0;}
  20% {opacity: 0;}
  30% {opacity: 0;}
  40% {opacity: 0;}
  60% {opacity: 0;}
  70% {opacity: 0;}
    75% {opacity: 1;}
  80% {opacity: 1;}
  90% {opacity: 1;}
    98% {opacity: 1;}
  100% {opacity: 0;}
}


/* ======================================== 
SLIDER - Páginas Internas
=========================================*/
body.pag-interna .carousel-wrapper {height: 280px;}
body.pag-interna .carousel-item {text-align: left;}
body.pag-interna .carousel-content {top: 67%; width: 90%; max-width: 800px; margin: 0 auto; position: relative;}
body.pag-interna .carousel-content span {font-weight: 100;}

body.pag-interna .carousel-wrapper .item-1 {
  background: url(../img/sobre-strozzi-advogados-background.jpg) center center no-repeat;
  background-size: cover;
}
body.pag-direito-civil .carousel-wrapper .item-1 {
  background: url(../img/direito-civil-strozzi-advogados_bg.jpg) center center no-repeat;
  background-size: cover;
}
body.pag-direito-das-familias .carousel-wrapper .item-1 {
  background: url(../img/direito-das-familias-strozzi-advogados_bg.jpg) center center no-repeat;
  background-size: cover;
}
body.pag-direito-previdenciario .carousel-wrapper .item-1 {
  background: url(../img/direito-previdenciario-strozzi-advogados_bg.jpg) center center no-repeat;
  background-size: cover;
}
body.pag-direito-lgbt .carousel-wrapper .item-1 {
  background: url(../img/direito-lgbt-strozzi-advogados_bg.jpg) center center no-repeat;
  background-size: cover;
}
body.pag-direito-societario .carousel-wrapper .item-1 {
  background: url(../img/direito-societario-strozzi-advogados_bg.jpg) center center no-repeat;
  background-size: cover;
} 

/* ======================================== 
INTRO
=========================================*/
.intro {padding: 70px 0; z-index: 2; position: relative}

.intro .content {position: relative; display: flex; justify-content: space-between; width: 90%; max-width: 800px;}
.intro .intro-divider {position: relative; width: 1px; height: auto; background: #ccc;}

.intro .intro-l {width: 30%; max-width: 286px;}
.intro .intro-r {width: 50%; max-width: 426px;}
.intro .intro-c {width: 100%; text-align: center;}
.intro .intro-c h2 {font-size: 32px}
.intro .intro-r a {color: #333; font-weight: 500; font-size: 14px}
.intro .intro-r a:hover {color: #999;} 
 
.intro h2{font-size: 26px; line-height: 1.3}
.intro p{font-size: 16px; font-weight: 300; line-height: 1.6; margin: 0 0 14px}

.intro p.destaque {text-align: center; width: 100%; font-size: 24px; font-weight: 300;margin-bottom: 70px}

/*DARK*/
.intro-dark {background: #454545; color: #fff; padding-bottom: 0}
.intro-dark h2 {font-weight: 300;}
.intro-dark p {font-weight: 100;}

/*GRAY*/
.intro-gray {background: #f2f2f2; color: #454545; padding-top: 148px; z-index: 0;}
.intro-gray h2 {font-weight: 300;}
.intro-gray h3 {margin-bottom: 7px}

/* ======================================== 
SIDEBAR
=========================================*/
.sidebar {
  position: absolute;
  left: 0;
  transform: translateY(-55%); 
  width: 45%;
  height: 100%;
  z-index: 1;
  background: #f4f4f4;
  text-align: right;
  padding: 50px 0;
}

.sidebar .content { 
  position: absolute;
  right: 0;
  width: 90%;
  max-width: 260px;
  margin-right: 80px;
  margin-left: 50px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.sidebar .content h3 {color: #454545; font-weight: 500; font-size: 17px}
.sidebar .content ul {list-style: none; padding-left: 0;}
.sidebar .content li:before {content: "-"; margin-right: 7px; line-height: 2}
.sidebar .content li:hover {color: #000}
.sidebar .content a {color: #777;}
.sidebar .content a:hover {color: #000}
 
/* ======================================== 
TEAM
=========================================*/
.team {width: 90%; max-width: 600px; display: flex; justify-content: center; margin: 50px auto 0}
.team .lawyer {width: 50%}
.team .lawyer .thumb {width: 100%; margin-bottom: -4px}
.team .lawyer .thumb img {width: 100%;}
.team .lawyer .name {background: #fff; text-align: center; padding: 14px 0; margin-bottom: -78px; box-shadow: 0px 7px 14px rgba(0,0,0,0.07);}
.team .lawyer .name h3 {font-size: 16px; color: #666; font-weight: 100;}
.team .lawyer .name a {font-size: 20px; color: #333; font-weight: 400; margin: 0; line-height: 1.6}

/* ======================================== 
LAWYER PAGE
=========================================*/
.intro-lawyer {padding-bottom: 150px}
.intro-lawyer .sidebar {padding-top: 150px; transform: translateY(-31.5%);}
.intro-lawyer .intro-l {position: relative; z-index: 3;}
.intro-lawyer .team {width: 100%; margin: 0}
.intro-lawyer .team .lawyer {width: 100%}

/* ======================================== 
SERVICE-CARDS
=========================================*/
.service-cards {display: flex; justify-content: space-between; width: 100%;}

.card {width: 100%; height: 275px; padding: 15px; color: #fff; text-shadow: 0px 3px 7px rgb(0,0,0,0.75); font-size: 18px; line-height: 1.3;}
.card > div {width: 100%; height: 100%; border: 1px solid rgba(255,255,255,0.25); text-align: center;}
.card > div > span {position: relative; top: 50%; transform: translateY(-50%);}

.card.direito-civil {background: url(../img/direito-civil_bg-box.jpg) center center; background-size: cover;}
.card.direito-das-familias {background: url(../img/direito-das-familias_bg-box.jpg) center center; background-size: cover;}
.card.direito-previdenciario {background: url(../img/direito-previdenciario_bg-box.jpg) center center; background-size: cover;}
.card.direito-lgbt {background: url(../img/direito-lgbt_bg-box.jpg) center center; background-size: cover;}
.card.direito-societario {background: url(../img//direito-societario_bg-box.jpg) center center; background-size: cover;}

/* ======================================== 
CONTATO
=========================================*/
.contato {padding: 100px 0; text-align: center; background: #fff; position: relative; z-index: 2;}
.contato h2 {font-size: 28px; color: #555; font-weight: 300}
.contato p {font-size: 16px; color: #666; font-weight: 300}

form {width: 100%; margin-top: 30px}
.form-group {width: 500px; margin: 0 auto}
.form-control {margin-bottom: 14px; width: 100%; border: none; background: #f7f7f7;; border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 300;}

/* ======================================== 
FOOTER
=========================================*/

footer {background:url(../img/footer-bg.jpg) center center #555; background-size: cover; padding: 50px 0 0; color: #f1f1f1; position: relative; z-index: 2}
footer .content, footer .content small {display: flex; justify-content: space-between;}
footer .content .col{width: 90%; margin: 0 3%}
footer .content .col:first-child {margin-left: 0}
footer .content .col:last-child {margin-right: 0}

footer h3 {font-size: 20px; font-weight: 300;}
footer p {font-size: 15px; font-weight: 100; line-height: 1.6}
footer a {color: #fff; font-weight: 400;}

footer .telefone {font-weight: 300; font-size: 17px; line-height: 2.5}
footer .email {font-weight: 300; font-size: 16px; line-height: 1.6;}
footer .ver-mapa {font-size: 13px;}
footer .agende {padding: 15px ; width: 70%; text-align: center; margin: 20px 0; font-size: 16px; color: #555;}

footer .col nav {display: flex; flex-direction: column; padding: 7px 0}
footer .col nav > a:before {content: "- "}
footer .col nav > a {font-size: 16px; margin: 10px 0; font-weight: 300;}

footer .col.endereco {display: flex; flex-direction: column;}

footer small {padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.15); width: 100%; font-size: 13px; font-weight: 100;}
footer small nav {display: inline-flex; max-width: 80%;}
footer small nav a {margin-right: 21px; font-weight: 100;}

/* ======================================== 
Redes Sociais
=========================================*/
.redes-sociais {margin: 28px 0; display: flex; width: 50%;}
.redes-sociais a {margin: 0 11px; vertical-align: middle; text-align: center;}
.redes-sociais a:hover {opacity: 0.8}
.redes-sociais a img {height: 20px}

/* ======================================== 
Página de Contato
=========================================*/
body.pag-contato .intro-dark {background: #f7f7f7; color: #666;}

.content-contact {max-width: 1000px; margin: 0 auto; display: flex; justify-content: space-between;}

.content-contact .contato {max-width: 70%}
.content-contact .contato h2 {display: none;}
.content-contact .contato p {display: none;}
.content-contact .contato form {margin-top: 0;} 

.content-contact .sidebar-contact {position: relative; max-width: 40%; padding: 100px 0; display: flex; flex-direction: column;}
.content-contact .sidebar-contact h3 {font-size: 20px; font-weight: 400; color: #444; margin-bottom: 7px}
.content-contact .sidebar-contact a {color: #777; margin: 7px 0; font-size: 18px} 
.content-contact .sidebar-contact span {color: #777; font-weight: 300; font-style: normal; line-height: 1.4}
.content-contact .sidebar-contact .link-map {font-size: 12px; color: #444; font-weight: 400;}
.content-contact .sidebar-contact .link-map:hover {text-decoration: underline;}

.content-contact .redes-sociais {max-width: 80px; justify-content: space-between}

/* ======================================== 
RESPONSIVO
=========================================*/
label {
  cursor: pointer;
}
#menu-toggle {
  display: none; /* hide the checkbox */
}
#menu {
  display: none;
}
#menu-toggle:checked + #menu {
  display: block;
}

/* ======================================== 
MENU
=========================================*/
header .header-menu {display: flex; justify-content: space-between;}

header nav {padding: 20px 0}
header nav a {color: #555; font-size: 17px; font-weight: 300; padding: 0 6px 8px; margin: 0 12px}
header nav a:hover {color: #000; background: #f1f1f1}
header nav a.active {border-bottom: 1px solid #999;}
header nav > li:last-child a {font-weight: 500; margin-right: 0; border: none;}

header nav {padding: 0}
header nav ul {margin: 0;}


ol, ul {list-style: none; padding: 0;}
nav ul ul {display: none}
nav ul ul li {float: none}

nav {width: 100%;}
nav li {float: left}

nav li a {
  text-decoration: none;
  display: inline-block;
  margin: 10px 20px 5px 0;
  padding: 8px 14px;
  border-radius: 10px;
}



nav li:hover ul {
  display: inline-block;
  position: absolute;
  z-index: 3;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 10px 10px rgba(0,0,0,0.2);
}

input.toggle,
label.toggle {display: none}

label.toggle {
  font-weight: 900;
  font-size: 1.2em;
  padding: 10px 0 10px 20px;
  text-align: right;
}

@media (max-width: 960px) {
  /*MOBILE*/
  header .header-menu {display: flex; flex-direction: column; width: 100%}
  header .header-menu {padding: 0}
  
  input.toggle, .toggle span {display: none}
  input[type=checkbox]:checked ~ nav, label.toggle {display: block;cursor: pointer;}
  
  header nav {
    display: none; padding: 0px;
    position: absolute;
    z-index: 5;
    width: 100%;
    margin: auto;
    left: 0;
    right: 0;
    top: 70px;
    padding-bottom: 10px;
    background: #fafafa;
    overflow-x: hidden;
    }
  header nav ul {padding-top: 0px}
/*  header nav > ul {transform: translateX(-20%);}*/
  
  header nav  li {float: none; text-align: center; max-width: 90%; margin: auto}
  header nav li ul {width: 100%; margin: 0}
  header nav li li {width: 100%; margin: 0 auto;}
  
  header nav li .hasChildren {display: none;}
  header nav li.has_children ul {padding-top: 0!important;}
  
  header nav li:hover ul {display: block;position: relative;}
  header  nav li ul {display: block;}
  /*header nav li ul li {margin-left: 20px;}*/
  header nav li a {display: block; margin-left: 10px; margin-right: 10px;}
  header nav li .telefone {display: none;}
  
  nav li a:link,
  nav li a:visited {color: #646565; background: #f1f1f1}

  nav li a:link:hover,
  nav li a:visited:hover {color: black}
}

/* ======================================== 
RESPONSIVO
=========================================*/
@media (max-width: 960px) {
  header {padding: 5px 0}
  /* Slides */
  body.pag-inicial .carousel-wrapper .item-1,
  body.pag-inicial .carousel-wrapper .item-2, 
  body.pag-inicial .carousel-wrapper .item-3 {
    background: url(../img/advocacia-escritorio.jpg);
    background-size: cover;
    background-attachment:scroll;
    background-repeat: no-repeat;
    overflow: hidden;
  }
  body.pag-interna .carousel-content, 
  .carousel-content {transform: none; top: 0; bottom: 0; margin: auto; position: absolute; width: 100%; height: 50%}
  
  body.pag-interna .carousel-content {height: 20%}
  
  .carousel-item {padding: 0 10px; overflow: hidden!important;}
  .carousel-content h1 span, .carousel-content h2 span {font-size: 20px;}
  
  /*Intro*/
  .intro {padding: 35px 0;}
  .intro .content {flex-direction: column; padding: 0 10px;}
  .intro .content .intro-l{width: 100%; margin-bottom: 40px}
  .intro .content .intro-divider {display: none;}
  .intro .content .intro-r{width: 100%}
  
  /*Service-Cards*/
  .service-cards {flex-direction: column}
  
  /*Equipe*/
  .intro.intro-dark {padding: 60px 0 11px}
  .intro .intro-c h2 {font-size: 26px;}
  .team .lawyer .name h3 {font-size: 13px}
  .team .lawyer .name a {font-size: 16px}
  
  /*Equipe*/
  .intro.intro-gray {padding: 100px 0 35px}
  
  /*Contato*/
  .contato {padding: 55px 30px}
  .contato .form-group {width: 100%}
  .contato p {font-size: 15px}
  
  /*Footer*/
  footer {padding: 35px 30px}
  footer .content {flex-direction: column;}
  footer .content .col {margin-bottom: 30px}
  footer .content .col:nth-child(2) {display: none;}
  footer .agende {width: 90%;}
  footer .content small {display: none;}
  
  /*Sidebar*/
  .pag-interna .intro .content {flex-direction: column;}
  .pag-interna .intro .sidebar {position: static; left: inherit; transform: none; width: 100%; height: 320px; padding: 25px 20px; margin: 20px 0 -35px}
  .pag-interna .intro .sidebar .content {margin: 0}
  .pag-interna .intro .sidebar .content a {line-height: 2.4}
  .pag-interna .intro .sidebar-equipe {height: 170px;}
  
  /*Intro-Lawyer*/
  .pag-interna .intro.intro-lawyer .team .lawyer .name {margin-bottom: 0;}
  
  /*Páginas-Internas*/
  .pag-interna .intro p.destaque {font-size: 20px}
  
  .pag-interna .carousel-content h1, .carousel-content h2 {font-size: 24px}
  body.pag-direito-civil .carousel-wrapper .item-1 {
    background: url(../img/direito-civil-strozzi-advogados_bg.jpg) 20% center no-repeat;
    background-size: cover
  }
  
  body.pag-direito-previdenciario .carousel-wrapper .item-1 {
    background: url(../img/direito-previdenciario-strozzi-advogados_bg.jpg) 30% center no-repeat;
    background-size: cover;
  }
  body.pag-direito-lgbt .carousel-wrapper .item-1 {
    background: url(../img/direito-lgbt-strozzi-advogados_bg.jpg) 40% center no-repeat;
    background-size: cover;
  }
  
}


/* ======================================== 
QUICK FIX
=========================================*/
.wrapper {display: block!important;}
.h-40 {width: 100%; height: 40px}
.hidden {display: none;}
/*TEMP*/
.arrow {display: none;}
/* ### Good Bye ### */