/* -------------------------------- 

Primary style

-------------------------------- */
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 100%;
  font-family: 'flamabook', sans-serif;
  color: #4d4d4f;
  background-color: white;
  overflow: hidden;
}

body, html {
  height: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

@font-face {
    font-family: 'flamabook';
    src: url('../fonts/flama-book-webfont.eot');
    src: url('../fonts/flama-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/flama-book-webfont.woff') format('woff'),
         url('../fonts/flama-book-webfont.ttf') format('truetype'),
         url('../fonts/flama-book-webfont.svg#flamabook') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'flamamedium';
    src: url('../fonts/flama-medium-webfont.eot');
    src: url('../fonts/flama-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/flama-medium-webfont.woff') format('woff'),
         url('../fonts/flama-medium-webfont.ttf') format('truetype'),
         url('../fonts/flama-medium-webfont.svg#flamamedium') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */
.cd-img-replace {
  /* replace text with a background-image */
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

/* -------------------------------- 

Main components 

-------------------------------- */

#loading-overlay {
    position: fixed;
    z-index: 1000;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    /*background-color: #fff;*/
    background: #fff url("../img/loading.gif") no-repeat center center;
    color: black;
    text-align: center;
}

/* Barra Estadao */
#bar {
  position:fixed;
  background: #4d4d4f;
  min-width:100%;
  height:36px;
  left: 0px;
  top:0;
  z-index:100;
  text-align:center;
}
#siteBar {
  background: #4d4d4f;
  width:100%;
  height:31px;
  left: 0px;
  position:absolute;
  top:0;
  z-index:101;
  text-align:center;
  min-width:970px;
}
#greenbar{
  background: #008f70;
  width:100%;
  min-width:970px;
  height:5px;
  left: 0px;
  position:absolute;
  top:31px;
  z-index:102;
  text-align:center;
}

@media (max-width: 970px) { /* se tela for menor que 970 de largura */
  /* DESCOMENTAR para bar responsiva */
  #siteBar {
      display: none;
  }

  #siteBarMobible a {
    position:absolute;
    background: url(https://www.estadao.com.br/estadao/img/logos/logo-barra.png) 0 0 no-repeat;
    display: block;
    width: 95px;
    height: 30px;
    left:50%;
    margin-left:-45px;
    text-indent: -999px;
    overflow: hidden;
    vertical-align: middle;
  }
}

.wrapper, #header {
  position:relative;
  bottom:0;
  height:100%;
  width: 100%;
  margin-top: 36px;
  min-width: 970px;
  padding:10px 2.2em;
  left: 50%;
    -webkit-transition: all 1s;
  transition:width all 1s;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}



/* Redes sociais */
#shareBar{
  margin-top: 10px;
  width: 120px; height: 40px;
  position: absolute; 
  top: 0px; 
  right: 2.2em !important;
  z-index: 103;
}
#header #shareBar{
  right:0;
}
#shareBar a{
  display:block; float:left;
  text-decoration: none;
  width: 30px; height: 30px;
  margin-left: 10px;
  background: transparent url('https://infograficos.estadao.com.br/geral/img/social-icons-round.png') no-repeat center top;
}
#shareBar a span{
  display: block;
  text-decoration: none;
  text-align: center;
  color: #999;
  font-size: 11px;
  font-weight: bold;
  margin-top: 32px;
}
#shareBar a#btFbShare{ background-position: -40px 0; margin-left: 0; }
#shareBar a#btFbShare:hover{ background-position: -40px -40px; }
#shareBar a#btGPlusShare{ background-position: -80px 0; }
#shareBar a#btGPlusShare:hover{ background-position: -80px -40px; }
#shareBar a#btTwitterShare{ background-position: 0 0; }
#shareBar a#btTwitterShare:hover{ background-position: 0 -40px; }

video {
  opacity: 0;
  position: fixed;
  max-width: 1280px; max-height: 720px; z-index: -100;
  width: 100%; height: 100%;
  background: #fff;
  background-size: cover;
  display: block;
  padding-top:75px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
@media only screen and (min-width: 1280px) { /* se tela maior que 1280 de largura */
  video {
    left: 50%;
    margin-left:-640px;
  }
}
section {
  height: 100%;
  z-index:4;
}

#header {
  width:100%;
  min-width: 900px;
  margin-top: 1.2em;
  text-align: left !important;
  padding-bottom: 3em;
}
#header.mini {
  width:100%;
  min-width: 900px;
  margin-top: 1.2em;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  -webkit-transition: all 1s;
  -moz-transition : all 1s; 
  -o-transition : all 1s;
  transition:width all 1s;
  /*margin-left: -2.2em;*/
  /*margin-right: -2.2em;*/
  /*border-bottom:2px solid rgba(0,0,0,0.1);*/
}

#header.mini #logo-palmeiras {
  margin-right: 20px;
  margin-left: 0;
  width: 40px;
  height: 40px;
  background: url("../img/palmeiras.png") no-repeat top;
  background-size:40px;
  float:left;
}

#header.mini p.pretitulo, #header.mini h1 {
  display:none;
}

#header.mini p.pretitulo.mini {
  display:block;
}

#header.mini p:not(.mini) {
  display:none;
}

.col .top {
  /*margin-top: 2.2em;*/
}
.col .bottom {
  margin-bottom: 2.2em;
}
.col {
  position: relative;
  height: 100%;
  width: 50%;
  float:left;
}

.bottom {
  float:left;
  position:absolute;
  bottom:0px;
  width:100%;
}
.right {
  text-align: right;
}
.cd-section {
  min-height: 100%;
  position: relative;
  padding: 1em 0;
}

#estadio {
  position: fixed;
  width: 720px;
  top: 29%;
  left: 50%;
  -webkit-transform: translateY(-25%);
  -ms-transform: translateY(-25%);
  transform: translateY(-25%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  opacity: 0;
}
#estadio > div {
  position:absolute;
  width: 720px;
  height:auto;
}
#terreo img {
  position:absolute;
  width: 100%;
}
#arquibancada > img {
  position:absolute;
  width: 100%;
}
#terreo-setores, #arquibancada-setores {
  position: absolute;
  width: 818px;
  left: -55px;
  top: -59px;
  overflow: visible;
}
#terreo-setores svg {
    margin-top: 59px;
    margin-left: 55px;
    position: absolute;
}
#cobertura-setores {
  position: absolute;
  width: 868px;
  left: -48px;
  top: -90px;
}

#creditos {
  position:fixed;
  font-size:9px;
  color:#333;
  bottom:0;
  right:0;
  margin: 10px 2.2em;
  z-index:10;
}

#terreo-setores img, #arquibancada-setores img, #cobertura-setores img {
  position: absolute;
  width: auto;
}
#cobertura img {
  position:absolute;
  width: 100%;
}

h1 {
  color: #4d4d4f;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 30px;
  /*font-size: 1.25rem;*/
}

h2 {
  font-family: 'flamamedium';
  font-size:20px;
}

h3 {
  font-family: 'flamamedium';
  font-size:18px;
}

.menu-lateral {
  margin-top:50px;
  padding-top:0;
  /*border-top:2px solid rgba(0,0,0,0.1);*/
  width:auto;
}

ul.mais-lista {
  display:none;
  clear:both;

  display: table;
}
ul.mais-lista li  {
  font-family: 'flamamedium';
  font-size:15px;
  line-height:30px;
  margin-bottom:5px;
  display: table;
  z-index: 100 !important;
  -webkit-transition: all 1s;
  -moz-transition : all 1s; 
  -o-transition : all 1s;
  transition:width all 1s;

}

ul.mais-lista li:hover {
  color: #008f70;
  cursor: pointer;
}

ul.mais-lista p.accordionContent {
  position:relative;
  margin-left: 50px;
  margin-bottom:50px;
  width: 240px;
}

a.mais {
  color: #008f70;
  display:inline-block;
  width: 24px;
  height: 24px;
  font-family: 'flamamedium';
  font-size:20px;
  top: -20px;
  line-height: 18px;
  font-weight: bold;
  margin-right: 15px;
  text-align:center;
  vertical-align:middle;
  background-color: transparent;
  -webkit-border-radius: 12px; 
  -moz-border-radius: 12px; 
  border-radius: 12px;
  border: 2px solid  rgba(0,143,112,0.8);
}

a.mais:hover, ul.mais-lista li:hover a, a.mais.aberto {
  color: #fff;
  cursor: pointer;
  border-color: rgba(0,143,112,1);
  background-color: rgba(0,143,112,0.8);
}

ul.capacidade li {
  font-family: 'flamamedium';
  font-size:18px;
  line-height:1.1;
  margin-bottom:10px;
  margin-left:-5px;
  min-height:100%;
}

ul.capacidade li div {
  width: 240px;
  margin-bottom:30px;
  margin-left:55px;
  min-height:100%;
  display:block;
}

ul.capacidade div {
    margin-left:0px !important;
}

a.cap {
  background-color:#008f70;
  color: #fff;
  display:inline-block;
  width: 30px;
  height: 30px;
  font-family: 'flamamedium';
  font-size:30px;
  top: -28px;
  line-height: 30px;
  font-weight: bold;
  margin-right: 10px;
  margin-bottom: 100px;
  text-align:center;
  vertical-align:middle;
  -webkit-border-radius: 25px; 
  -moz-border-radius: 25px; 
  border-radius: 25px;
  float:left;
}
/*
header > div {
  height:80px;
  width: 100%;
  vertical-align: middle;
}*/

.pretitulo {
  text-transform: uppercase;
  padding-top:15px;
}
.subtitulo {
  margin-top:20px;
  width: 290px !important;
  line-height: 1.2;
  width:75%;
  text-shadow: 0px 0px 5px #fff;
}

#logo-palmeiras {
  position: relative;
  margin-right: 20px;
  width: 80px;
  height: 200px;
  background: url("../img/palmeiras.png") no-repeat top;
  float:left;
}

a.link-reportagem {
    color:#008f70;
}

a.link-reportagem:hover {
    text-decoration: underline;
}

a.link-reportagem img {
  display:inline-block; 
  width:20px; 
  height:auto; 
  vertical-align: bottom;
  margin-right: 8px;
}

ul.legenda {
  position:absolute;
  width: auto;
  height: 100%;
  display:block;
  right: 0;
}

ul.legenda li {
  font-family: 'flamamedium';
  font-size:15px;
  line-height: 22px;
  margin-bottom:10px;
  display: table;
}

ul.legenda li i {
  display:block;
  width: 25px;
  height: 25px;
  line-height: 30px;
  margin-right: 20px;
  vertical-align:middle;
  background-color: transparent;
  float:left;
}

ul.legenda li span {
  font-size: 12px;
  display:block;
  color:rgba(0,0,0,0.5);
  line-height: 30px;
  margin-top:-12px;
  margin-left: 45px;

}

ul.legenda li.titulo {
  font-family: 'flamamedium';
  font-size:18px;
  line-height:40px;
  margin-bottom:10px;
  display: table;
}

ul.legenda li#torres i {
  background: url('../img/icones-02.png') no-repeat center;
  background-size: 25px;
}
ul.legenda li#escadas i {
  background: url('../img/icones-01.png') no-repeat center;
  background-size: 25px;
}
ul.legenda li#banheiros i{
  background: url('../img/icones-04.png') no-repeat center;
  background-size: 25px;
}
ul.legenda li#lanchonetes i {
  background: url('../img/icones-03.png') no-repeat center;
  background-size: 25px;
}

div.popup {
  position:absolute;
  top: 50%;
  display: none;
  width:100%;
  z-index:20 !important;
}

div.popup img {
  position:absolute;
  height: auto;
  /*width:0%;*/
  margin: 0 auto;
  left: 50%;
  right: auto;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.cd-section p {
  font-size:16px;
  line-height: 1.2;
}

#nav-bottom {
  position: fixed;
  bottom: 0px;
  left: 2.2em;
  right: 0;
  height: 0;
  text-align: left;
  z-index: 10;
}

#nav-bottom > div {
  /* make the block inline */
  display: inline-block;
  /* reset container's center alignment */
  text-align: left;
}
.navbtn {
  font-family: 'flamamedium';
  background-color:rgba(255,255,255,0.8);
  border:2px solid rgba(0,0,0,0.3);
  display:inline-block;
  cursor:pointer;
  color: rgba(0,0,0,0.3);
  font-size:13px;
  padding:6px 12px;
  text-decoration:none;
  text-transform: uppercase;
  transition : all 200ms linear; 
  -webkit-transition : all 200ms linear; 
  -moz-transition : all 200ms linear; 
  -o-transition : all 200ms linear;
  margin:0 1px;
}
.navbtn:hover, .navbtn.active  {
  border:2px solid rgba(0,143,112,1);
  background-color: rgba(0,143,112,0.8);
  color: #fff;
}

#legenda li {
  font-size:16px;
  margin:20px 0 ;
}

#bottom-inicio {
  position: fixed !important;
  left: 47%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 1.1em;
  width: 30px;
  height: 30px;
  z-index: 5;
  /*background: url("../img/arrow-bottom.svg") no-repeat center;*/
  background-size: 30px;
  opacity: 0.8;
  transition : all 200ms ease-in-out; 
  -webkit-transition : all 200ms ease-in-out; 
  -moz-transition : all 200ms ease-in-out; 
  -o-transition : all 200ms ease-in-out;
}
.instrucao {
  position: fixed !important;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 1.4em;
  width: 30px;
  height: 30px;
  z-index: 5;
  /*background: url("../img/arrow-bottom.svg") no-repeat center;*/
  background-size: 30px;
  opacity: 0.8;
  transition : all 200ms ease-in-out; 
  -webkit-transition : all 200ms ease-in-out; 
  -moz-transition : all 200ms ease-in-out; 
  -o-transition : all 200ms ease-in-out;
}
.cd-scroll-down{
  position: fixed !important;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 0;
  width: 30px;
  height: 30px;
  z-index: 5;
  /*background: url("../img/arrow-bottom.svg") no-repeat center;*/
  background-size: 30px;
  opacity: 0.8;
  transition : all 200ms ease-in-out; 
  -webkit-transition : all 200ms ease-in-out; 
  -moz-transition : all 200ms ease-in-out; 
  -o-transition : all 200ms ease-in-out;
}
.cd-scroll-down:hover {
  bottom:0.2em;
  opacity: 1;
  transition : all 200ms ease-in-out; 
  -webkit-transition : all 200ms ease-in-out; 
  -moz-transition : all 200ms ease-in-out; 
  -o-transition : all 200ms ease-in-out;
}

.only {
  display: none;
}
/* No Touch devices */
.cd-nav-trigger {
  display: none;
}

.no-touch #cd-vertical-nav {
  position: fixed;
  right: 1.1em;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 11;
}
.no-touch #cd-vertical-nav li {
  text-align: right;
}
.no-touch #cd-vertical-nav a {
  display: inline-block;
  /* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.no-touch #cd-vertical-nav a:after {
  content: "";
  display: table;
  clear: both;
}
.no-touch #cd-vertical-nav a span {
  float: right;
  display: inline-block;
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  -ms-transform: scale(0.6);
  -o-transform: scale(0.6);
  transform: scale(0.6);
}
.no-touch #cd-vertical-nav a:hover span {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.no-touch #cd-vertical-nav a:hover .cd-label {
  opacity: 1;
}
.no-touch #cd-vertical-nav a.is-selected .cd-dot {
  background-color: #008f70;
}
.no-touch #cd-vertical-nav .cd-dot {
  position: relative;
  /* we set a top value in order to align the dot with the label. If you change label's font, you may need to change this top value*/
  top: 8px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background-color: #ccc;
  -webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
  -moz-transition: -moz-transform 0.2s, background-color 0.5s;
  transition: transform 0.2s, background-color 0.5s;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.no-touch #cd-vertical-nav .cd-label {
  position: relative;
  margin-right: 10px;
  padding: .4em .5em;
  color: #4d4d4f;
  font-size: 14px;
  font-size: 1.1rem;
  -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
  -moz-transition: -moz-transform 0.2s, opacity 0.2s;
  transition: transform 0.2s, opacity 0.2s;
  opacity: 0.8;
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

/* Touch devices */
.touch .cd-nav-trigger {
  display: block;
  z-index: 2;
  position: fixed;
  bottom: 30px;
  right: 5%;
  height: 44px;
  width: 44px;
  border-radius: 0.25em;
  background: rgba(255, 255, 255, 0.9);
}
.touch .cd-nav-trigger span {
  position: absolute;
  height: 4px;
  width: 4px;
  background-color: #4d4d4f;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.touch .cd-nav-trigger span::before, .touch .cd-nav-trigger span::after {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  background-color: inherit;
  border-radius: inherit;
}
.touch .cd-nav-trigger span::before {
  top: -9px;
}
.touch .cd-nav-trigger span::after {
  bottom: -9px;
}

.touch #cd-vertical-nav {
  position: fixed;
  z-index: 1;
  right: 5%;
  bottom: 30px;
  width: 90%;
  max-width: 400px;
  max-height: 90%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  -o-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
  border-radius: 0.25em;
  background-color: rgba(255, 255, 255, 0.9);
}
.touch #cd-vertical-nav a {
  display: block;
  padding: 1em;
  border-bottom: 1px solid rgba(62, 57, 71, 0.1);
}
.touch #cd-vertical-nav a span:first-child {
  display: none;
}
.touch #cd-vertical-nav a.is-selected span:last-child {
  color: #d88683;
}
.touch #cd-vertical-nav.open {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.touch #cd-vertical-nav.open + .cd-nav-trigger {
  background-color: transparent;
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span {
  background-color: rgba(62, 57, 71, 0);
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span::before, .touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
  background-color: #3e3947;
  height: 3px;
  width: 20px;
  border-radius: 0;
  left: -8px;
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 1px;
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  bottom: 0;
}
.touch #cd-vertical-nav li:last-child a {
  border-bottom: none;
}

a.lbox {
  opacity:1;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
a.lbox:hover {
  opacity:0.8;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

::selection {
  background: #008f70;
  color: #fff;
}
::-moz-selection {
  background: #008f70;
    color: #fff;
}

.esmaecido {
  opacity:0.1 !important;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

@media only screen and (min-width: 768px) {
  .touch .cd-nav-trigger, .touch #cd-vertical-nav {
    bottom: 40px;
  }
}