html, body{height: 100%;}



body {padding: 0; margin: 0; overflow: hidden; font-family: 'Lato', sans-serif;}
a{color: #000; outline: none; -webkit-transform: translateZ(0); transition: 0.4s ease;}
a:hover{color: #df1f36;}

/* area invertida para fazer scroll horizontal ------------------------------ */

#area-scroll-y-gal {overflow-y: scroll; overflow-x: hidden; transform: rotate(270deg) translateX(-100%); transform-origin: top left; position: absolute; width: calc(100vh + 20px); height: 100vw; }
#area-scroll-y-gal #container-scroll {width: 100vw; transform: rotate(90deg) translateY(-100vh); transform-origin: top left; white-space: nowrap; font-size: 0;}
#area-scroll-y-gal .box-gallery{height: 100vh; display: inline-block; position: relative; vertical-align: top;} 

#area-scroll-y {width: calc(100vh + 20px); height: 100vw; overflow-y: scroll; overflow-x: hidden; transform: rotate(270deg) translateX(-100%); transform-origin: top left; position: absolute; box-sizing: border-box; }
#area-scroll-y #container-scroll {width: 100vw; transform: rotate(90deg) translateY(-100vh); transform-origin: top left; white-space: nowrap; font-size: 0;}

#area-scroll-y .box{height: 100vh; display: inline-block; position: relative; vertical-align: top;} 
#area-scroll-y .box-grupo{height: 100vh; display: inline-block; position: relative; vertical-align: top;}
#area-scroll-y .box-sessao{height: 100vh; display: inline-block; position: relative; vertical-align: top;}



/* boxes -------------------------------------------------------------------- */

.box-grupo{}

.box .item-img{font-size: 13px;}
.box .item-txt{font-size: 16px; margin: 0 220px 0 220px; padding: 50px 0; width: 600px; white-space: normal!important; box-sizing: border-box;}
.box .item-txt .title{}    

.box .capa{}

.box .apresentacao{}
.box .apresentacao .top-naveg .lang{position: absolute; top: 0; right: 0px; padding: 15px 0;}
.box .apresentacao .top-naveg .lang a{text-decoration: none; }


.box .apresentacao .logo-ico{width: 100px; margin: 8px 15px 0 15px;}
.box .apresentacao .logo-ico.logo-ico-0{margin: 10% 15px 0 15px;}



.box .apresentacao .logo-ico img{width: 100%;}

.box .apresentacao .edicao{position: absolute;  right: 0; top: 0; transform: rotate(-90deg) translate(-100%, 250px);}



.area-tip-alt-resp{position: relative; display: none;}
.area-tip-alt-resp .tip-alt-resp{padding: 5px 0 5px 40px; font-size: 12px; display: none;}
.area-tip-alt-resp .ico-click{margin-bottom: 10px; padding: 2px 0 2px 40px; font-weight: 400; cursor: pointer;}
.area-tip-alt-resp .ico-click i{position: absolute; top: 0; left: 80%; width: 30px; height: 30px; text-align: center; line-height: 30px; font-size: 14px; color: #fff; background-color: #000; border-radius: 50%; }

.tip-alt{position: absolute; background-color: #f9f9f9; padding: 15px; z-index: 1; font-size: 13px; left: 30px; top: 60px; white-space: normal; display: none;}
.img-big .tip-alt{width: 300px;  }
.img-thumb-1 .tip-alt{width: 200px;}
.img-thumb-2 .tip-alt{width: 200px;}



.ico-mouse{position: absolute; width: 60px; height: 60px; top: 50%; margin: -30px 0 0 0;  z-index: 9; background-color: #ececea; border-radius: 50%; text-align: center; display: flex; align-items: center; justify-content: center; }
.ico-mouse img{max-width: 45%; display: inline-block;}    

/* modelos de exibição de imagens ------------------------------------------- */


.md-img-1 .img-thumb-1{position: absolute; z-index: 4; width: auto; height: 48%; bottom: 0; left: -20%;}
.md-img-1 .img-big{}
.md-img-1 .img-thumb-2{position: absolute; z-index: 4; width: auto; height: 30%; bottom: 30%; right: -17%;}

.md-img-2 .img-thumb-1{position: absolute; z-index: 4; width: auto; height: 30%; bottom: 30%; left: -17%;}
.md-img-2 .img-big{}
.md-img-2 .img-thumb-2{position: absolute; z-index: 4; width: auto; height: 48%; bottom: 0%; right: -20%;}

.md-img-3 .img-thumb-1{position: absolute; z-index: 4; width: auto; height: 48%; bottom: 0; right: -22%;}
.md-img-3 .img-big{}
.md-img-3 .img-thumb-2{position: absolute; z-index: 4; width: auto; height: 30%; bottom: 0; right: -38%;}

.md-img-4 .img-thumb-1{position: absolute; z-index: 4; width: auto; height: 30%; top: 20%; left: -17%;}
.md-img-4 .img-big{}
.md-img-4 .img-thumb-2{position: absolute; z-index: 4; width: auto; height: 48%; bottom: 0%; right: -23%;}

.md-img-5 .img-thumb-1{position: absolute; z-index: 4; width: auto; height: 48%; bottom: 0; left: -20%;}
.md-img-5 .img-big{}
.md-img-5 .img-thumb-2{position: absolute; z-index: 4; width: auto; height: 30%; bottom: 30%; right: -17%;}

.md-img-6 .img-thumb-1{position: absolute; z-index: 4; width: auto; height: 48%; top: 26%; left: -20%;}
.md-img-6 .img-big{}
.md-img-6 .img-thumb-2{position: absolute; z-index: 4; width: auto; height: 30%; top: 10%; right: -17%;}


.md-img img{ transition: 0.9s ease; background-color: #f4f4f4; -webkit-filter: none; filter: none;}
.md-img:hover .img-hover{-webkit-filter: grayscale(100%); filter: grayscale(100%); filter: gray;}




.img-big img{transition: all 0.390s ease-in-out;}
.img-big img.atvL{transform: translate(-30px, 0);}
.img-big img.atvR{transform: translate(30px, 0);}
.img-thumb-1 img, .img-thumb-2 img{transition: all 0.190s ease-in-out;}
.img-thumb-1 img.atvL-TB, .img-thumb-2 img.atvL-TB{transform: translate(10px, 0);}
.img-thumb-1 img.atvR-TB, .img-thumb-2 img.atvR-TB{transform: translate(-10px, 0);}



/* cursor*/
.cursor{margin: 18px 0 0px 15px; position: absolute; z-index: 99;}
.cursor .area{background: #000; border-radius: 50%; text-align: center; width: 0px; height: 0px; line-height: 0px; -webkit-transform: translateZ(0); transition: 0.4s ease;}
.cursor .area i{color: #000; font-size: 0px; -webkit-transform: translateZ(0); transition: 0.4s ease; }
.cursor-active .area{width: 40px; height: 40px; line-height: 40px; box-sizing: border-box;}
.cursor-active .area i{color: #fff; font-size: 16px; transform: rotate(180deg);}



/* fontes --------------------------------------------------------------------- */

.lato-light{font-family: 'Lato', sans-serif; font-weight: 300;}
.lato-regular{font-family: 'Lato', sans-serif; font-weight: 400;}
.lato-bold{font-family: 'Lato', sans-serif; font-weight: 700;}


.texto-1{font-family: 'Lato', sans-serif; font-weight: 300; line-height: 25px;}


.geral-title{margin: 0 15px; z-index: 9; position: absolute; top: 50px; left: 50px; display: none;}
.geral-title ul, .top-naveg ul{padding: 0; margin: 0; list-style: none;}
.geral-title ul li a, .top-naveg ul li a{color: #000; font-size: 22px; font-weight: 300; text-decoration: none; -webkit-transform: translateZ(0); transition: 0.4s ease;}
.geral-title ul li a:hover, .top-naveg ul li a:hover{color: #df1f36; font-weight: 700;}
.geral-title ul li a.atv, .top-naveg ul li a.atv{font-size: 44px; font-weight: 700;}        

.top-naveg{margin: 0 15px; z-index: 1; position: relative;}


/* modal --------------------------------------------------------------------- */

.modal-title{margin: 0 15px; position: absolute; top: 50px; left: 55px; z-index: 9}
.modal-title .titulo{font-size: 50px; font-weight: 700;}
.modal-title .subtitulo{font-size: 50px; font-weight: 300;}


.modal-gallery{position: fixed; width: 100%; height: 100%; background: rgba(255,255,255, 0.98); z-index: 99; display: none;}

.modal-gallery .modal-area{height: 100%;}
.modal-gallery .modal-area .modal-close{margin: 0 15px; position: absolute; top: 60px; right: 55px; z-index: 99; width: 40px; height: 40px; line-height: 40px; box-sizing: border-box; background: #000; text-align: center; cursor: pointer; -webkit-transform: translateZ(0); transition: 0.4s ease;}
.modal-gallery .modal-area .modal-close:hover{width: 50px; height: 50px; line-height: 50px; top: 55px; right: 50px; -webkit-transform: translateZ(0); transition: 0.4s ease;}
.modal-gallery .modal-area .modal-close i{color: #fff; font-size: 16px; transform: rotate(-45deg); -webkit-transform: translateZ(0); transition: 0.4s ease;}
.modal-gallery .modal-area .modal-close:hover i{transform: rotate(180deg); }

.modal-gallery .modal-area .modal-content{height: 100%; box-sizing: border-box;}
.modal-gallery .modal-area .modal-content .box-gallery{margin: 0 8%}


.modal-gallery .modal-area .modal-content .paginacao{position: absolute; bottom: 60px; left: 75px; z-index: 99; font-size: 20px;}


/*
.lista-imagem{height: 100%; border: 2px solid #000;}
.lista-imagem .imagem{height: 100%; display: inline-block;}
.lista-imagem .imagem img{height: 100%; }
*/

.box-gallery{opacity: 0.5; -webkit-transform: translateZ(0); transition: 0.4s ease; }
.box-gallery div{position: relative; display: flex; align-items: center;}
.box-gallery img{height: 80%!important; -webkit-transform: translateZ(0);  transition: 0.4s ease; align-items: center;}

.is-active-box-gallery{opacity: 1;}
.is-active-box-gallery img{height: 100%!important;}


/* flex --------------------------------------------------------------------- */

.flex-item-1 {flex: 1;}

.flex-container{display: flex;}

.flex-direction-r{flex-direction: row;}
.flex-direction-rr{flex-direction: row-reverse;}
.flex-direction-c{flex-direction: column;}
.flex-direction-cr{flex-direction: column-reverse;}

.align-items-stretch{align-items: stretch;}
.align-items-start{align-items: flex-start;}
.align-items-end{align-items: flex-end;}
.align-items-center{align-items: center;}
.align-items-base{align-items: baseline;}

.flex-nowrap{flex-wrap: nowrap;}
.flex-wrap{flex-wrap: wrap;}
.flex-wrap-reverse {flex-wrap: wrap-reverse;}

.flex-justify-between{justify-content: space-between;}
.flex-start-start{justify-content: flex-start;}


/* uteis -------------------------------------------------------------------- */

.mg-0{margin: 0;}
.mg-neg-20{margin-top: -20px;}

.pd-15{padding: 15px;}


.overflow{overflow: hidden;}
.relarive{position: relative;}
.h-100{height: 100%;}

/* Outros ------------------------------------------------------------------- */

.x-move{position: absolute;}



.overlay{position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(255,255,255, 1); z-index: 99998; } /*display: none;*/
.overlay .load{position: absolute; top: 50%; left: 50%; width: 100px; height: 15px; margin: -7px 0 0 -50px; background: #fff url(../img/overlay-load.gif) center center no-repeat; background-size: 100%; border-radius: 5px; opacity: 0.8; border: 3px solid #fff; /*display: none;*/}
.overlay .logo{position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; background: #fff url(../img/ico-santista.png) center center no-repeat; background-size: 100%; border-radius: 5px; opacity: 0.8;  /*display: none;*/}



.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #df1f36;
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}