/************************************************\
» Theme using Spectre
» https://picturepan2.github.io/spectre/
--------------------------------------------------
» Notes:
»»» ...
--------------------------------------------------
           By Epoch Online 2018
\************************************************/

/* Global ***************************************/
h1, h2, h3, h4, h5, h6,
body { font-family: 'Tauri', sans-serif; }

/************************************************\
» TYPE
\************************************************/

/* Shared ****************************************/


/* Colors ****************************************/
#header,
#header a,
#header.scrolled,
#header.scrolled a,
.temp-page,
.temp-page h1,
.temp-page h2,
.temp-page h3,
.temp-page h4,
.temp-page h5,
#footer,
#footer a {color: #808080 !important }
h1, h2, h3, h4, h5,
#header a.active,
#header .dropmenu ul li a.active,
#header.scrolled a.active,
#header.scrolled .dropmenu ul li a.active {color: #B30005 !important }
.temp-page a { color: #888 !important }
.btn,
.treemenu li a,
.treemenu li a:hover,
.treemenu li a:focus,
.treemenu li a.active,
#footer.bg-black,
#footer.bg-black h1,
#footer.bg-black h2,
#footer.bg-black h3,
#footer.bg-black h4,
#footer.bg-black a,
.temp-page .form-checkbox {color: #FFF !important }

/* Size ******************************************/
#header { font-size: .8rem }
#footer .column:last-child p { font-size: .6rem }

/* Misc ******************************************/
#header {  font-weight: normal; }
#header,
#footer .column:last-child,
.temp-page {  text-transform: uppercase; }

/************************************************\
» GRAPHIC LAYOUT
\************************************************/

/* Global ***************************************/
.column { padding-right: 1.5rem;  padding-left: 1.5rem }
/* mobile */
.mobile-menu .button_container span,
.overlay.open { background:  #B30005 }

/* Objects **************************************/
a { opacity: .7 }
a.active,
a:hover { opacity: 1 }
.eo-google-map,
#modular-google-maps { position: relative; padding-bottom: 30%; height: 0; overflow: hidden; }
.eo-google-map iframe,
#modular-google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
h1, h2, h3, h4, h5, h6 { margin-top: 0 }
hr { border: none; border-top: solid 1px #CCC; margin: 2rem 0 }
.btn,
.btn:hover { background: #B30005; border: none; }
#to-start.pulse.fa-angle-down { text-shadow: 0px 0px 5px #000 }
/* cookies */
.cc-link { display: none }

/* Logotipo */
#header { height: 5rem; padding: .5rem 0;}
#header.section .logo svg { width: 180px}
#header.section .logo a,
#footer.section .column:first-child a { opacity: 1 }

/* Header ***************************************/
#header.section { background: #FFF; }
#header.section.scrolled { background: white; }
body.header-fixed.header-animated #header.scrolled { height: 3.3rem; padding: .6rem; }

/* Main Menu */

/* Sticky nav */

/* Bandeiras */

/* Content *************************************/

/* Pages */
.inicio.header-fixed .hero { background-position: 0 }

/* Página Temporária */
.temp-page #header .logo svg { width: 200px;   }
.temp-page { background-size:  cover; background-position: top center; background-attachment: fixed; }
.temp-page #header { border: none; margin: 5% auto 0 auto; position: relative; text-align: center;}
.temp-page #body-wrapper { padding-top: 0 }
.temp-page #start,
.temp-page #body-wrapper .container { padding: 0 }
.temp-page .column { text-align: center; }
.temp-page .one-line { white-space: nowrap; display: inline-block; }
.temp-page .form-label { display: none; }
.temp-page .form-checkbox,
.temp-page .column h5 { text-shadow: 2px 2px 5px #000; }
.temp-page form { padding-top: 1.5rem }
.temp-page-ty { background-color: #FFF }
.temp-page h5 { line-height: 1.5em}

/* Footer ***************************************/
#footer {padding: 2rem 0; text-align: center; border-top: solid 1px #EDEDED}
#footer ul { display: block; }
#footer a.logo-footer { max-width: 160px; display: block; margin: auto; }
#footer svg { padding-left: 10px }
#footer.bg-black { background-color: #000 }
#footer .column:last-child ul li { display: inline; margin: 0 .3rem}

/* Templates ***********************************/
/* Serviços */
#modular-destaque-servicos,
#modular-servicos { padding: 3rem 1rem; text-align: center; }
#modular-destaque-servicos img,
#modular-servicos img { margin-bottom: .5rem }

/* Layout Areas ********************************/

/* Hero Image + text */
.hero { padding: 0; padding-bottom: 30%; margin-top: 5rem }
.hero-image { background-size: cover; background-attachment: fixed; height: 70vh; margin: 0 auto; overflow-x: hidden; position: relative; width: 100%; z-index: 1;  }
.hero-text { left: 50%; position: absolute; text-align: center; top: 50%; transform: translate(-50%,-50%); }
#modular-hero #to-start { bottom: 1.5rem }

.hero-headline.one,
.hero-headline.two,
.hero-headline.three {
	position: absolute;
  display: block;
	top: 50%;
  margin-top: -1rem;
  text-shadow: 0px 0px 10px #000000;
  width: 50%;
  text-align: center;
  font-size: 2rem;
	animation-duration: 20s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
}
.hero-headline.one { animation-name: anim-1; }
.hero-headline.two { animation-name: anim-2; }
.hero-headline.three { animation-name: anim-3; }

@keyframes anim-1 {
	0%, 8.3% { left: -100%; opacity: 0; }
  8.3%,28% { left: 18%; opacity: 1; }
  28%,33.33% { left: 25%; opacity: 1; }
  33.33%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-2 {
	0%, 33.33% { left: -100%; opacity: 0; }
  41.63%, 61% { left: 18%; opacity: 1; }
	61%, 66.66% { left: 25%; opacity: 1; }
  66.66%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-3 {
	0%, 66.66% { left: -100%; opacity: 0; }
	74.96%, 88% { left: 18%; opacity: 1; }
  88%, 91.62% { left: 25%; opacity: 1; }
  91.62%,100% { left: 110%; opacity: 0; }
}

/* Modular Text */
#modular-text { padding-top: 3rem; padding-bottom: 3rem; }

/* Specific CMS Blocks  ************************/

/* Specific Pages ******************************/

/************************************************\
» GRAPHIC LAYOUT - RESPONSIVE
\************************************************/

@media (max-width: 960px) {
  .hero-headline.one,
  .hero-headline.two,
  .hero-headline.three { font-size: 1.5rem }
}

@media (max-width: 840px) {
  .hero-headline.one,
  .hero-headline.two,
  .hero-headline.three {display: none }
}


/************************************************\
» NOTIFICATIONS
\************************************************/

/************************************************\
» VARIATIONS
\************************************************/

/************************************************\
» API's CSS
\************************************************/