/*
Theme Name: cidade-ativa
Author: Habemus
Description: Description
Version: 1.0.0
License URI: LICENSE
Text Domain: cidade-ativa
Tags:
*/

/* reset */

/**
 * http://meyerweb.com/eric/tools/css/reset/ 
 * v2.0 | 20110126
 * License: none (public domain)
 * 
 * Reset predefined browser styles to reduce browser inconsistencies
 * in things like default line heights,
 * margins and font sizes of headings, and so on.
 */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* import pages styles */

/**
 * Style definitions
 *
 * colors:
 * 
 * @orange: #FF5000;
 * @yellow: #FFDD00;
 * @green: #00C4B3;
 * @green-lemon: #C3D500;
 * @purple: #904799;
 * @dark-blue: #0065A0;
 * @light-blue: #0080BB;
 * @salmon: #FF5859;
 * 
 * Typography - Font sizes - Desktop
 * h1: 80px;
 * h2: 
 * h3:
 * h4: ;
 * h5: ;
 * h6: ;
 * p: 24px;
 *
 *
 *
 *
 * Tamanhos de fonte home:
 * h1: 80px;
 * p: 24px;
 *
 * Tamanhos de fonte da iniciativa:
 * h1: 60px, VTG
 * subtítulo: 24px; Mank Sans
 *
 * Texto: 18px;
 * conteúdos:
 *   h2, h3, h4, h5, h6: 24px color blue;
 *
 * Título de cada aplicação, notícias relacionadas: 18px ;
 *
 *
 * Blog: página de cada postagem
 * 
 * 24px título principal
 * 18px texto
 * 18px azul p/ títulos no meio da postagem;
 *
 * Padrão de cards e listagens: 24px (título) 18px (texto / subtitulo);
 */

.home-h1 {
  font-family: 'Vtg Stencil UK No 76', sans-serif;
  font-size: 60px;
  margin-bottom: 50px;
}

#cidade-ativa {
  height: 90vh;
  min-height: 600px;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  background-position: center center;
  background-blend-mode: screen;
  background-size: cover;
  background-repeat: no-repeat;
  /*background-image: url('adoquines-s.jpg');*/
  background-color: #0065a0;
  -webkit-transition: background-color ease 1s, background-image ease 1s;
  transition: background-color ease 1s, background-image ease 1s;
}

#cidade-ativa-slides {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

#cidade-ativa-slides > li {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: 100%;
  width: 100%;
  /*max-width: 1400px;*/
  -webkit-transition: opacity .4s ease;
  transition: opacity .4s ease;
  opacity: 0;
  background-position: center center;
  background-blend-mode: screen;
  background-size: cover;
  background-repeat: no-repeat;
}

#cidade-ativa-slides > li.active {
  opacity: 1;
}

@media (max-width: 600px) {

}

#cidade-ativa-animation-container {
  width: 300px;
  position: relative;
  z-index: 2;
  color: #FFDD00;
}

#cidade-ativa-animation-container .support-text {
  font-size: 45px;
  line-height: 90px;
  font-family: 'Vtg Stencil UK No 76';
  display: block;
}

#cidade-ativa-animation-container .text-slider {
  position: relative;
  height: 90px;
  overflow: hidden;
}

#cidade-ativa-animation-container .text-slide {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-family: 'Vtg Stencil UK No 76';
}

#cidade-ativa-animation-container .text-slide .panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#cidade-ativa-animation-container .text-slide .top,
#cidade-ativa-animation-container .text-slide .bottom {
  content: attr(data-back);
  position: absolute;
  font-size: 45px;
  height: 45px;
  width: 100vw;
  /* text-align: center; */
  z-index: 1;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: -webkit-transform 600ms cubic-bezier(1, 0.005, 0.57, 0.865);
  transition: -webkit-transform 600ms cubic-bezier(1, 0.005, 0.57, 0.865);
  transition: transform 600ms cubic-bezier(1, 0.005, 0.57, 0.865);
  transition: transform 600ms cubic-bezier(1, 0.005, 0.57, 0.865), -webkit-transform 600ms cubic-bezier(1, 0.005, 0.57, 0.865);
}

#cidade-ativa-animation-container .text-slide .top:after,
#cidade-ativa-animation-container .text-slide .bottom:after {
  position: relative;
  display: inline-block;
  -webkit-transition: -webkit-transform 600ms cubic-bezier(1, 0.005, 0.57, 0.865);
  transition: -webkit-transform 600ms cubic-bezier(1, 0.005, 0.57, 0.865);
  transition: transform 600ms cubic-bezier(1, 0.005, 0.57, 0.865);
  transition: transform 600ms cubic-bezier(1, 0.005, 0.57, 0.865), -webkit-transform 600ms cubic-bezier(1, 0.005, 0.57, 0.865);
  content: attr(data-back);
  /* font-family: "vtg_stencil_uk_no76regular", sans-serif; */
}

#cidade-ativa-animation-container .text-slide .top {
  line-height: 90px;
  -webkit-transform: translateY(-25px);
  transform: translateY(-25px);
}

#cidade-ativa-animation-container .text-slide .top:after {
  -webkit-transform: translateY(25px);
  transform: translateY(25px);
}

#cidade-ativa-animation-container .text-slide .bottom {
  bottom: 0;
  line-height: 0vh;
  -webkit-transform: translateY(25px);
  transform: translateY(25px);
}

#cidade-ativa-animation-container .text-slide .bottom:after {
  -webkit-transform: translateY(-25px);
  transform: translateY(-25px);
}

#cidade-ativa-animation-container .text-slide.active .top,
#cidade-ativa-animation-container .text-slide.active .bottom {
  -webkit-transition: none;
  transition: none;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  z-index: -1;
}

#cidade-ativa-animation-container .text-slide.active .top:after,
#cidade-ativa-animation-container .text-slide.active .bottom:after {
  -webkit-transition: -webkit-transform cubic-bezier(0.23, 1, 0.32, 1) 1200ms;
  transition: -webkit-transform cubic-bezier(0.23, 1, 0.32, 1) 1200ms;
  transition: transform cubic-bezier(0.23, 1, 0.32, 1) 1200ms;
  transition: transform cubic-bezier(0.23, 1, 0.32, 1) 1200ms, -webkit-transform cubic-bezier(0.23, 1, 0.32, 1) 1200ms;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

@media (max-width: 600px) {
  #cidade-ativa-animation-container {
    width: 200px;
  }

  #cidade-ativa-animation-container .support-text {
    font-size: 35px;
    line-height: 70px;
  }

  #cidade-ativa-animation-container .text-slider {
    height: 70px;
  }

  #cidade-ativa-animation-container .text-slide .top,
  #cidade-ativa-animation-container .text-slide .bottom {
    font-size: 35px;
    height: 35px;
  }

  #cidade-ativa-animation-container .text-slide .top {
    line-height: 70px;
  }
}

#cidade-ativa-animation-container .faixa {
  height: 40px;
  width: 200px;
  display: block;
  background-color: white;
  border-radius: 2px;
  -webkit-transform: translateX(0) translateY(-50%) scaleX(0.7) scaleY(0.2);
  transform: translateX(0) translateY(-50%) scaleX(0.7) scaleY(0.2);
  -webkit-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: opacity linear 0.1s, -webkit-transform linear 0.1s;
  transition: opacity linear 0.1s, -webkit-transform linear 0.1s;
  transition: transform linear 0.1s, opacity linear 0.1s;
  transition: transform linear 0.1s, opacity linear 0.1s, -webkit-transform linear 0.1s;
  position: absolute;
  left: -30px;
}

@media (max-width: 600px) {
  #cidade-ativa-animation-container .faixa {
    height: 25px;
  }
}

#cidade-ativa-animation-container .faixa.hidden {
  opacity: 0;
}

/* SECTION: o que fazemos */

#o-que-fazemos {
  /*background: linear-gradient( 180deg, #FF5000, #FFDD00 );*/
  background-color: #FF5000;
}

#o-que-fazemos-descricao {
  color: white;
  padding-bottom: 60px;
}

@media (max-width: 500px) {
  #o-que-fazemos-descricao {
    padding-bottom: 0;
  }
}

#o-que-fazemos-descricao h2.axis-title {
  font-family: 'Vtg Stencil UK No 76';
  font-size: 30px;
  margin-bottom: 10px;
  margin-top: 30px;
  line-height: 1;
}

#iniciativas-axis-selector {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-pack: start;
  -webkit-box-pack: start;
  justify-content: flex-start;
}

#iniciativas-axis-selector > li {
  position: relative;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  margin-right: 10px;
  /*height: 160px;*/
  /*width: 32%;*/
  -ms-flex-positive: 0;
  -webkit-box-flex: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  opacity: 0.6;
  cursor: pointer;
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  font-family: 'Vtg Stencil UK No 76';
  font-size: 24px;
  line-height: 1;
  margin-bottom: 10px;
  color: white;
  padding: 10px 40px 8px 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#iniciativas-axis-selector > li::before {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(0);
  transform: translateY(-50%) rotate(0);
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  height: 20px;
  width: 20px;
  background-image: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20enable-background%3D%22new%200%200%2020%2020%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23FFFFFF%22%20points%3D%2218%2C8.498%2011.502%2C8.498%2011.502%2C1.158%208.502%2C1.158%208.502%2C8.498%202%2C8.498%202%2C11.498%208.502%2C11.498%208.502%2C18.842%2011.502%2C18.842%2011.502%2C11.498%2018%2C11.498%20%22%2F%3E%3C%2Fsvg%3E');
  background-color: transparent;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#iniciativas-axis-selector > li:hover,
#iniciativas-axis-selector > li.axis-selected {
  opacity: 1;
}

#iniciativas-axis-selector > li.axis-selected::before {
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 500px) {
  #iniciativas-axis-selector {
    display: none;
  }
}

/**
 * Axis details dialog
 */

.axis-details-dialog > h2 {
  font-size: 30px;
  font-family: 'Vtg Stencil UK No 76';
  margin-bottom: 20px;
}

.axis-details-dialog > h3,
.axis-details-dialog span.separator {
  /*color: #0065A0;  @dark-blue */
}

.axis-details-dialog > .axis-details-contents {
  /*color: #0065A0;  @dark-blue */
  margin-bottom: 20px;
}

.axis-details-dialog > .axis-details-iniciativas,
.axis-details-dialog > .axis-details-iniciativas > a {
  font-size: 24px;
  font-family: 'Vtg Stencil UK No 76';
  color: inherit;
}

/**
 * Iniciativas list
 */

#iniciativas-list {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 30px;
  /*margin-bottom: 15px;*/
}

#iniciativas-list > li > a {
  display: block;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background-size: cover;
  height: 100%;
  width: 100%;
  /* filter: grayscale(); */
  text-decoration: none;
  color: white;
  /* opacity: 0.33; */
  position: relative;
  overflow: hidden;
  -webkit-filter: grayscale();
  filter: grayscale();
  opacity: 0.3;
}

#iniciativas-list > li > a.axis-selected {
  opacity: 1;
}

#iniciativas-list > li > a::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgb(79, 79, 79);
  opacity: 0.3;
}

#iniciativas-list > li > a > .iniciativa-title {
  position: absolute;
  z-index: 2;
  width: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-family: 'Vtg Stencil UK No 76';
  font-size: 36px;
  line-height: 1;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: top .3s ease, font-size .3s ease;
  transition: top .3s ease, font-size .3s ease;
}

#iniciativas-list > li > a > .iniciativa-description {
  position: absolute;
  z-index: 2;
  top: 40%;
  height: 70%;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  font-size: 1em;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
}

#iniciativas-list > li > a.highlighted {
  opacity: 1;
}

#iniciativas-list > li > a.axis-selected:hover {
  -webkit-filter: none;
  filter: none;
  opacity: 1;
  color: #FFDD00;
}

#iniciativas-list > li > a.axis-selected:hover::after {
  opacity: 0.5;
}

@media (min-width: 901px) {
  #iniciativas-list > li {
    height: 170px;
    width: calc(25% - 15px);
    -ms-flex-preferred-size: calc(25% - 15px);
    flex-basis: calc(25% - 15px);
    margin-right: 20px;
    margin-top: 20px;
  }

  #iniciativas-list > li:nth-child(4n + 4) {
    margin-right: 0;
  }
}

@media (min-width: 501px) and (max-width: 900px) {
  #iniciativas-list > li > a {
    display: block;
    height: 100%;
    width: 100%;
  }

  #iniciativas-list > li {
    height: 40vw;
    width: calc(50% - 15px);
    -ms-flex-preferred-size: calc(50% - 15px);
    flex-basis: calc(50% - 15px);
    margin-right: 30px;
    margin-top: 30px;
  }

  #iniciativas-list > li:nth-child(2n + 2) {
    margin-right: 0;
  }
}

@media (max-width: 500px) {
  #iniciativas-list > li {
    width: 100%;
    height: 170px;
  }

  #iniciativas-list > li + li {
    margin-top: 30px;
  }

  #iniciativas-list > li > a > .iniciativa-title {
    font-size: 30px;
  }
}

#o-que-fazemos-video {
  padding-top: 50px;
  color: white;
}

/* SECTION: Blog */

#blog {
  background-color: #00C4B3;
  /* green */
  color: white;
}

#blog-section-header {
  padding-bottom: 50px;
}

#blog-section-header a {
  color: #ffffff;
  -webkit-transition: ease color 0.3s;
  transition: ease color 0.3s;
}

#blog-section-header a:hover {
  color: #ffdd00;
}

#blog-section-header > h1 > a {
  text-decoration: none;
}

#blog-latest-posts-nav {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 20px;
}

#blog-latest-posts-nav > h3 {
  font-family: 'Vtg Stencil UK No 76';
  font-size: 30px;
}

#blog-latest-posts-nav > a {
  font-size: 18px;
  color: white;
  text-decoration: underline;
  -webkit-transition: color .3s ease;
  transition: color .3s ease;
}

@media (max-width: 500px) {
  #blog-latest-posts-nav > a {
    text-align: right;
    font-size: 16px;
  }
}

#blog-latest-posts-nav > a:hover {
  color: #FFDD00;
  /* yellow */
}

#blog-latest-posts {
  position: relative;
}

#blog-latest-posts > button.scroll-control {
  opacity: 0;
  background-color: transparent;
  border: none;
  -webkit-transition: opacity .5s ease;
  transition: opacity .5s ease;
  color: #FFDD00;
  font-size: 30px;
  outline: none;
  cursor: pointer;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="36px" height="36px" viewBox="0 0 36 36" enable-background="new 0 0 36 36" xml:space="preserve"><g id="conteudo"><g><g><path fill="#FFFFFF" d="M10.25,35.5c-0.512,0-1.023-0.195-1.414-0.586c-0.781-0.781-0.781-2.047,0-2.828L22.921,18L8.836,3.914c-0.781-0.781-0.781-2.047,0-2.828c0.78-0.781,2.047-0.781,2.828,0L28.579,18L11.664,34.914C11.274,35.305,10.762,35.5,10.25,35.5z"/></g></g></g></svg>');
  background-position: center;
  background-repeat: no-repeat;
  height: 50px;
  width: 36px;
}

@media (max-width: 500px) {
  #blog-latest-posts > button.scroll-control {
    display: none;
  }
}

#blog-latest-posts > button.scroll-control:hover {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="36px" height="36px" viewBox="0 0 36 36" enable-background="new 0 0 36 36" xml:space="preserve"><g id="conteudo"><g><g><path fill="#FFDD00" d="M10.25,35.5c-0.512,0-1.023-0.195-1.414-0.586c-0.781-0.781-0.781-2.047,0-2.828L22.921,18L8.836,3.914c-0.781-0.781-0.781-2.047,0-2.828c0.78-0.781,2.047-0.781,2.828,0L28.579,18L11.664,34.914C11.274,35.305,10.762,35.5,10.25,35.5z"/></g></g></g></svg>');
}

#blog-latest-posts > button.scroll-left {
  position: absolute;
  top: 50%;
  right: 100%;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

#blog-latest-posts > button.scroll-right {
  position: absolute;
  top: 50%;
  left: 100%;
}

#blog-latest-posts.has-scroll-left > button.scroll-left {
  opacity: 1;
}

#blog-latest-posts.has-scroll-right > button.scroll-right {
  opacity: 1;
}

#blog-latest-posts-container {
  position: relative;
  overflow: hidden;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-wrap: no-wrap;
  flex-wrap: no-wrap;
}

#blog-latest-posts-container > .card-list {
  width: 100%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-right: 5%;
}

@media (max-width: 500px) {
  #blog-latest-posts-container {
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    overflow: auto;
  }

  #blog-latest-posts-container > .card-list {
    display: none;
  }

  #blog-latest-posts-container > .card-list:first-child {
    display: block;
  }
}

/* SECTION: calendario */

#calendario {
  background-color: #904799;
  /* purple */
  color: white;
}

#calendario-section-header {
  padding-bottom: 50px;
}

#calendario-container {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
}

@media (min-width: 501px) {
  #calendario-container {
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -ms-flex-pack: justify;
    -webkit-box-pack: justify;
    justify-content: space-between;
  }

  #calendario-miniature {
    -ms-flex-positive: 0;
    -webkit-box-flex: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }

  #calendario-events,
  #calendario-highlights {
    -ms-flex-positive: 1;
    -webkit-box-flex: 1;
    flex-grow: 1;
    width: 1px;
    /* any value will do */
  }
}

@media (max-width: 500px) {
  #calendario-container {
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
  }
}

#calendario-miniature {
  /*width: 300px;*/
  font-family: 'Vtg Stencil UK No 76';
  font-size: 20px;
  margin-right: 20px;
}

@media (max-width: 500px) {
  #calendario-miniature {
    margin-right: 0px;
    margin-bottom: 20px;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
  }
}

#calendario-miniature .clndr-controls {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  justify-content: space-between;
  height: 28px;
}

#calendario-miniature .clndr-controls .inactive {
  opacity: 0.1;
}

#calendario-miniature .clndr-controls .month {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
}

#calendario-miniature .clndr-controls .clndr-previous-button,
#calendario-miniature .clndr-controls .clndr-next-button {
  display: block;
  width: 30px;
  height: 30px;
  position: relative;
}

#calendario-miniature .clndr-controls .clndr-previous-button:hover,
#calendario-miniature .clndr-controls .clndr-next-button:hover {
  cursor: pointer;
}

#calendario-miniature .clndr-controls .clndr-previous-button {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

#calendario-miniature .clndr-controls .clndr-previous-button::before,
#calendario-miniature .clndr-controls .clndr-next-button::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid white;
}

#calendario-miniature td {
  text-align: center;
  padding: 6px 8px;
  border: 2px solid #904799;
  /* purple */
}

#calendario-miniature td.header-day {
  background-color: white;
  color: #8B4A99;
}

#calendario-miniature td.day {
  background-color: white;
  color: white;
}

#calendario-miniature td.day.adjacent-month {
  opacity: 0.1;
}

#calendario-miniature td.day.event {
  background-color: #D5BADB;
  color: #8B4A99;
  cursor: pointer;
}

#calendario-miniature td.day.event:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

#calendario-miniature td.day.ca-selected {
  /**
   * Must be declared after `#calendario-miniature td.day.event`
   * for styles to apply
   */
  background-color: #8B4A99;
  color: white;
}

#calendario-miniature td.day.ca-selected:hover {
  background-color: #793684;
}

#calendario-miniature td.day.event.highlight {
  background-color: rgb(5, 196, 180);
  color: white;
}

#calendario-miniature td.day.event.highlight:hover {
  background-color: #04B29D;
}

#calendario-miniature .calendar-alert {
  font-family: 'Mank Sans', Sans-Serif;
  line-height: 1.2;
  font-size: 16px;
  margin-top: 10px;
  margin-left: 2px;
}

#calendario-events {
  margin-right: 20px;
}

@media (max-width: 500px) {
  #calendario-events {
    margin-right: 0px;
  }
}

#calendario-events > section.events-group {
  margin-bottom: 20px;
  display: none;
}

#calendario-events > section.events-group.active {
  margin-bottom: 20px;
  display: block;
}

#calendario-events > section.events-group > h2 {
  /*width: 300px;*/
  font-family: 'Vtg Stencil UK No 76';
  font-size: 20px;
  height: 30px;
}

#calendario-events > section.events-group article.event {
  background-color: rgba(255, 255, 255, 0.5);
  color: #904799;
  /* purple */
  padding: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: background-color .3s ease, color .3s ease;
  transition: background-color .3s ease, color .3s ease;
  margin-bottom: 20px;
}

/*#calendario-events > section.events-group:first-child article.event:first-child,*/

#calendario-events > section.events-group article.event:hover {
  background-color: rgba(255, 255, 255, 1);
}

#calendario-events > section.events-group article.event > h2 {
  font-family: 'Vtg Stencil UK No 76';
  font-size: 30px;
  margin-bottom: 30px;
}

@media (max-width: 500px) {
  #calendario-events > section.events-group article.event > h2 {
    font-family: 'Vtg Stencil UK No 76';
    font-size: 24px;
    margin-bottom: 24px;
  }
}

#calendario-events > section.events-group article.event > a {
  font-family: 'Vtg Stencil UK No 76';
  font-size: 20px;
  display: block;
  text-decoration: none;
  color: #904799;
  /* purple */
  margin-top: 30px;
  -webkit-transition: color .2s ease;
  transition: color .2s ease;
}

#calendario-events > section.events-group article.event > a:hover {
  color: #00C4B3;
  /* green */
}

/* highlights */

#calendario-highlights > article.event {
  margin-bottom: 20px;
}

#calendario-highlights > article.event > h2 {
  font-family: 'Vtg Stencil UK No 76';
  font-size: 20px;
  height: 30px;
}

#calendario-highlights > article.event > div.highlight-event-details {
  background-color: #00C4B3;
  /* green */
  color: white;
  padding: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: background-color .3s ease, color .3s ease;
  transition: background-color .3s ease, color .3s ease;
}

#calendario-highlights > article.event > div.highlight-event-details > h2 {
  font-family: 'Vtg Stencil UK No 76';
  font-size: 30px;
  margin-bottom: 30px;
}

@media (max-width: 500px) {
  #calendario-highlights > article.event > div.highlight-event-details > h2 {
    font-family: 'Vtg Stencil UK No 76';
    font-size: 24px;
    margin-bottom: 24px;
  }
}

#calendario-highlights > article.event > div.highlight-event-details > a {
  font-family: 'Vtg Stencil UK No 76';
  font-size: 20px;
  display: block;
  text-decoration: none;
  color: white;
  margin-top: 30px;
  -webkit-transition: color .2s ease;
  transition: color .2s ease;
}

#calendario-highlights > article.event > div.highlight-event-details > a:hover {
  color: #904799;
  /* purple */
}

/* SECTION: Quem somos */

#quem-somos {
  background-color: #FF5000;
  /* orange */
  color: white;
}

#quem-somos-section-header {
  margin-bottom: 50px;
}

#quem-somos-image {
  width: 100%;
}

/* SECTION: participe */

#participe {
  background-color: #0080BB;
  /* light-blue */
  color: white;
  padding-bottom: 0 !important;
}

#participe-section-contents {
  margin-top: 80px;
}

@media (min-width: 501px) {
  /* to counter side padding */

  #participe-section-contents {
    margin-left: -40px;
    margin-right: -40px;
  }
}

@media (max-width: 500px) {
  /* to counter side padding */

  #participe-section-contents {
    margin-left: -20px;
    margin-right: -20px;
  }
}

/* SECITON: Contact */

#contato {
  background-color: #FF5859;
  /* salmon */
  color: white;
}

#contato-section-contents {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

@media (max-width: 500px) {
  #contato-section-contents {
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
  }
}

/**
 * Form
 */

#contato-section-form-container {
  width: 55%;
}

@media (max-width: 500px) {
  #contato-section-form-container {
    width: 100%;
  }
}

#contato-section-form-container form {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -ms-flex-pack: start;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  -ms-flex-positive: 0;
  -webkit-box-flex: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

#contato-section-form-container form br {
  display: none;
}

#contato-section-form-container form input,
#contato-section-form-container form textarea {
  width: 100%;
  border: white 2px solid;
  background-color: transparent;
  color: white;
  font-size: 16px;
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 20px;
  padding: 10px 10px;
  font-family: 'Mank Sans', Sans-Serif;
}

#contato-section-form-container form textarea {
  resize: vertical;
}

#contato-section-form-container form input::-moz-placeholder,
#contato-section-form-container form textarea::-moz-placeholder {
  color: inherit;
}

#contato-section-form-container form input:-ms-input-placeholder,
#contato-section-form-container form textarea:-ms-input-placeholder {
  color: inherit;
}

#contato-section-form-container form input::-webkit-input-placeholder,
#contato-section-form-container form textarea::-webkit-input-placeholder {
  color: inherit;
}

#contato-section-form-container form input::-ms-input-placeholder,
#contato-section-form-container form textarea::-ms-input-placeholder {
  color: inherit;
}

#contato-section-form-container form input::placeholder,
#contato-section-form-container form textarea::placeholder {
  color: inherit;
}

#contato-section-form-container form input[type="submit"] {
  font-family: 'Vtg Stencil UK No 76';
  width: 100%;
  border: none;
  background-color: #0080BB;
  /* light-blue */
  color: white;
  font-size: 16px;
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px 10px;
  cursor: pointer;
  opacity: 0.9;
}

#contato-section-form-container form input[type="submit"]:hover {
  opacity: 1;
}

/**
 * Contact form 7
 */

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#contato-section-form-container form .ajax-loader {
  height: 30px;
  width: 30px;
  background-image: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2240px%22%20height%3D%2240px%22%20viewBox%3D%220%200%2040%2040%22%20enable-background%3D%22new%200%200%2040%2040%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%20id%3D%22modal1%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M35.885%2C16.138C34.13%2C8.941%2C27.712%2C3.833%2C20.177%2C3.833C11.254%2C3.833%2C3.995%2C11.086%2C3.995%2C20s7.259%2C16.167%2C16.182%2C16.167c2.361%2C0%2C4.638-0.497%2C6.77-1.479c0.901-0.415%2C1.295-1.481%2C0.881-2.383c-0.415-0.9-1.481-1.295-2.383-0.88c-1.656%2C0.762-3.429%2C1.148-5.267%2C1.148c-6.942%2C0-12.589-5.641-12.589-12.574S13.235%2C7.426%2C20.177%2C7.426c5.474%2C0%2C10.189%2C3.463%2C11.903%2C8.476l-3.32-0.206l4.787%2C9.623l5.941-8.957L35.885%2C16.138z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  background-position: center;
  background-size: contain;
  -webkit-animation: spin 1s infinite linear;
  animation: spin 1s infinite linear;
}

#contato-section-form-container form .wpcf7-mail-sent-ok {
  margin: 0;
  border: none;
}

#contato-section-form-container form .wpcf7-validation-errors,
#contato-section-form-container form .wpcf7-not-valid-tip {
  margin: 0;
  border: none;
  color: black;
  margin-bottom: 20px;
}

#contato-section-form-container form .wpcf7-not-valid-tip {
  margin-top: -10px;
}

/**
 * Info
 */

#contato-info {
  width: 40%;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -ms-flex-pack: start;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -ms-flex-align: start;
  -webkit-box-align: start;
  align-items: flex-start;
  -ms-flex-positive: 0;
  -webkit-box-flex: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

@media (max-width: 500px) {
  #contato-info {
    width: 100%;
  }
}

#contato-info a {
  color: white;
  text-decoration: none;
}

#contato-info .social-links {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-pack: start;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -ms-flex-align: start;
  -webkit-box-align: start;
  align-items: flex-start;
  margin-top: 10px;
  width: 60%;
  max-width: 300px;
}

#contato-info .social-links a {
  width: 40px;
  height: 40px;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  margin-right: 10px;
  background-color: transparent;
  -webkit-transition: background-color .3s ease;
  transition: background-color .3s ease;
}

#contato-info .social-links a:hover {
  background-color: #0065A0;
  /* @dark-blue */
}

#contato-info .social-links a img {
  /* a intenção é colocar o ícone como sendo branco e cheio */
  /*width: 50%;*/
  width: 100%;
}

.page-home-main {
  background-color: #FF5000;
}

#iniciativa-lead {
  height: 50vh;
  background-position: 50% 0;
  background-size: cover;
}

h1.iniciativa-title {
  font-family: 'Vtg Stencil UK No 76';
  font-size: 30px;
  color: #FF5000;
  /* orange */
}

h3.iniciativa-axis {
  font-size: 20px;
  color: #FF5000;
  /* orange */
}

#iniciativa-main-content {
  margin-top: 60px;
  padding-bottom: 40px;
}

/**
 * Section downloads
 */

#downloads {
  margin-bottom: 20px;
}

#downloads > h3 {
  font-weight: bold;
  font-size: 18px;
  color: #FF5000;
  /* @orange */
  padding-top: 20px;
  padding-bottom: 20px;
}

#downloads > .article-list > article.no-thumbnail {
  width: 100%;
}

/* SECTION: Edicoes */

#edicoes > h3 {
  font-weight: bold;
  font-size: 18px;
  color: #FF5000;
  /* @orange */
  padding-top: 20px;
  padding-bottom: 20px;
}

/* SECTION: Noticias relacionadas */

#noticias-relacionadas {
  margin-top: 30px;
  margin-bottom: 30px;
}

#noticias-relacionadas > header {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

#noticias-relacionadas > header > h3 {
  font-weight: bold;
  font-size: 18px;
  color: #FF5000;
  /* @orange */
}

#noticias-relacionadas > header > a {
  font-size: 14px;
  color: #FF5000;
  /* @orange */
  text-decoration: none;
}

#noticias-relacionadas > header > a:hover {
  text-decoration: underline;
}

/**
 * Blog sidebar
 */

@media (min-width: 401px) {
  #blog-sidebar {
    -ms-flex-positive: 1;
    -webkit-box-flex: 1;
    flex-grow: 1;
    margin-left: 50px;
    width: 1px;
    /* any non empty value will do */
  }
}

@media (max-width: 400px) {

}

#blog-sidebar > .side-content-section {
  margin-bottom: 30px;
}

#blog-sidebar > .side-content-section > header {
  margin-bottom: 20px;
}

#blog-sidebar > .side-content-section > header > h3 {
  color: #0065A0;
  /* dark-blue */
  font-size: 20px;
  font-weight: bold;
}

#blog-highlights a {
  text-decoration: none;
  color: black;
}

#blog-highlights a:hover {
  color: #0065A0;
  /* dark-blue */
}

#blog-highlights a img {
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  height: 200px;
}

#blog-highlights a h4 {
  margin-top: 4px;
  margin-bottom: 8px;
}

#blog-highlights .swiper-button-prev,
#blog-highlights .swiper-button-next {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="36px" height="36px" viewBox="0 0 36 36" enable-background="new 0 0 36 36" xml:space="preserve"><g id="conteudo"><g><g><path fill="#FFFFFF" d="M10.25,35.5c-0.512,0-1.023-0.195-1.414-0.586c-0.781-0.781-0.781-2.047,0-2.828L22.921,18L8.836,3.914c-0.781-0.781-0.781-2.047,0-2.828c0.78-0.781,2.047-0.781,2.828,0L28.579,18L11.664,34.914C11.274,35.305,10.762,35.5,10.25,35.5z"/></g></g></g></svg>');
  background-position: center;
  background-repeat: no-repeat;
  height: 50px;
  width: 36px;
}

#blog-highlights .swiper-button-prev {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

#blog-tag-cloud-container > a {
  font-size: 16px !important;
  /* important to override the inline styles */
  color: #cccccc;
  -webkit-transition: color .3s ease;
  transition: color .3s ease;
}

#blog-tag-cloud-container > a.active {
  color: #9F9F9F;
}

#blog-tag-cloud-container > a:hover {
  color: #999999;
}

#blog-post-external-links-container {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
}

#blog-post-external-links-container > a {
  font-family: 'Vtg Stencil UK No 76';
  font-size: 20px;
  text-transform: uppercase;
  padding: 10px 10px;
  margin-right: 5px;
  background-color: #0065A0;
  /* dark-blue */
  color: white;
  text-decoration: none;
  -webkit-transition: color .3s ease, background-color .3s ease;
  transition: color .3s ease, background-color .3s ease;
}

#blog-post-external-links-container > a:hover {
  background-color: #9F9F9F;
}

/**
 * Lead
 */

#blog-post-lead {
  height: 50vh;
  background-position: center;
  background-size: cover;
  margin-bottom: 50px;
}

/**
 * Post body and structure
 */

#blog-post-body-wrapper {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
}

@media (min-width: 401px) {
  #blog-post-body-wrapper {
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    width: 80vw;
    max-width: 900px;
    margin: auto;
  }

  #blog-post-main {
    -ms-flex-positive: 0;
    -webkit-box-flex: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 70%;
  }
}

@media (max-width: 400px) {
  #blog-post-body-wrapper {
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
  }
}

/**
 * Post Contents
 */

#blog-post-title {
  /*font-family: 'Vtg Stencil UK No 76';*/
  font-size: 24px;
  font-weight: bold;
  color: #0065A0;
  /* dark-blue */
  margin-bottom: 10px;
}

h3.iniciativa-axis {
  font-size: 20px;
  color: #FF5000;
  /* orange */
}

#blog-post-main-content {
  margin-top: 60px;
  padding-bottom: 40px;
}

/* SECTION: Edicoes */

#edicoes > h3 {
  font-size: 18px;
  color: #2567A0;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* SECTION: Noticias relacionadas */

#noticias-relacionadas > header {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
}

#noticias-relacionadas > header > h3 {
  font-size: 18px;
  color: #2567A0;
}

#blog-title {
  color: #0065A0;
  /* dark-blue */
}

#blog-description {
  color: #0065A0;
  /* dark-blue */
}

#blog-contents-wrapper {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
}

@media (min-width: 401px) {
  #blog-contents-wrapper {
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    width: 90vw;
    max-width: 1200px;
    margin: 100px auto 0 auto;
  }

  #blog-main {
    width: 65%;
    -ms-flex-positive: 0;
    -webkit-box-flex: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }

  #blog-main-posts {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  #blog-main-posts > a {
    width: 48%;
    margin-bottom: 20px;
  }
}

@media (max-width: 400px) {
  #blog-contents-wrapper {
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
  }
}

.posts-navigation {
  margin-top: 20px;
  margin-bottom: 40px;
}

.posts-navigation .nav-links {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row-reverse;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  flex-direction: row-reverse;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.posts-navigation .nav-links .nav-previous,
.posts-navigation .nav-links .nav-next {
  position: relative;
}

.posts-navigation .nav-links .nav-previous::before {
  content: '>';
  position: absolute;
  left: 102%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.posts-navigation .nav-links .nav-next::before {
  content: '<';
  position: absolute;
  right: 102%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.posts-navigation .nav-links a {
  text-decoration: none;
  color: black;
}

.posts-navigation .nav-links a:hover {
  text-decoration: underline;
}

#page-equipe > * {
  color: #FF5000;
  /* @orange */
}

#page-equipe > h2,
.colaboradores > h2 {
  font-size: 40px;
  font-family: 'Vtg Stencil UK No 76';
  margin-bottom: 20px;
  margin-top: 20px;
}

.colaboradores {
  padding-top: 80px;
}

.colaboradores-container {
  margin-top: 30px;
  margin-bottom: 30px;
  margin-left: 30px;
  margin-right: 30px;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

@media (max-width: 400px) {
  .colaboradores-container {
    margin-left: 0;
    margin-right: 0;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
  }
}

.colaboradores-container > article.colaborador {
  width: 23%;
  margin-bottom: 20px;
}

@media (max-width: 400px) {
  .colaboradores-container > article.colaborador {
    width: 100%;
  }
}

.colaboradores-container > article.colaborador > img {
  display: block;
  width: 100%;
  height: auto;
}

.colaboradores-container > article.colaborador h2 {
  color: #FF5000;
  /* @orange */
  font-size: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: bold;
}

.colaboradores-container > article.colaborador h3 {
  margin-bottom: 10px;
}

.colaboradores-container > article.colaborador .colaboracoes {
  margin-bottom: 15px;
}

.colaboradores-container > article.colaborador .colaboracoes a {
  text-decoration: none;
  color: black;
  cursor: pointer;
}

.colaboradores-container > article.colaborador .colaboracoes a:hover {
  text-decoration: underline;
  color: #FF5000;
}

.colaboradores-container > article.colaborador .social-links {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-pack: start;
  -webkit-box-pack: start;
  justify-content: flex-start;
}

.colaboradores-container > article.colaborador .social-links a {
  text-decoration: none;
  color: black;
  cursor: pointer;
  display: block;
  width: 32px;
  height: 32px;
  background-color: #A0A0A0;
  -webkit-transition: background-color .3s ease;
  transition: background-color .3s ease;
  margin-right: 16px;
}

.colaboradores-container > article.colaborador .social-links a > img {
  height: 100%;
}

.colaboradores-container > article.colaborador .social-links a:hover {
  background-color: #FF5000;
}

@media (min-width: 401px) {
  #special-page-container {
    padding-top: 120px;
  }
}

@media (max-width: 400px) {

}

#special-page-cta {
  display: block;
  font-family: 'Vtg Stencil UK No 76';
  font-size: 30px;
  color: white;
  text-decoration: none;
  padding: 18px 16px 14px 16px;
  float: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 50px;
}

#special-page-extra-links {
  margin-top: 30px;
}

@media (min-width: 401px) {
  /* to counter side padding */

  #special-page-extra-links {
    margin-left: -40px;
    margin-right: -40px;
  }
}

@media (max-width: 400px) {
  /* to counter side padding */

  #special-page-extra-links {
    margin-left: -20px;
    margin-right: -20px;
  }
}

#not-found-content-wrapper {
  min-height: 80vh;
  padding-top: 200px;
  padding-bottom: 200px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#not-found-title {
  margin-bottom: 40px;
}

/* import modules */

.ca-highlight-title {
  font-family: 'Vtg Stencil UK No 76';
  font-size: 60px;
  margin-bottom: 60px;
}

.breadcrumb {
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}

.breadcrumb-path {
  color: black;
  text-decoration: none;
}

a.breadcrumb-path:hover {
  text-decoration: underline;
}

/* COMPONENTS */

h1.center-content {
  font-size: 80px;
}

@media (max-width: 400px) {
  h1.center-content {
    font-size: 50px;
  }
}

div.center-content {
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 18px;
}

@media (max-width: 400px) {
  div.center-content {
    font-size: 16px;
    margin-bottom: 16px;
  }
}

.center-content > iframe {
  width: 100%;
}

.center-content.left-offset {
  position: relative;
}

@media (min-width: 800px) {
  .center-content.left-offset {
    left: -60px;
  }
}

@media (min-width: 401px) {
  .center-content {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 400px) {
  .center-content {
    margin: 0 auto;
  }
}

.swiper-container .swiper-slide img {
  max-width: 100%;
  height: auto;
}

/**
 * The main container
 */

.swiper-main-container {
  /*background-color: black;*/
}

.swiper-main-container .swiper-wrapper {
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
}

.swiper-main-container .swiper-wrapper .swiper-slide {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  position: relative;
}

.swiper-main-container .swiper-wrapper .swiper-slide .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background-color: white;
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
  font-style: italic;
  font-size: 14px;
}

/**
 * Thumbnails
 */

.swiper-thumbnail-container-wrapper {
  position: relative;
  /* required for controls */
}

.swiper-thumbnail-container-wrapper > .swiper-button-prev,
.swiper-thumbnail-container-wrapper > .swiper-button-next {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="36px" height="36px" viewBox="0 0 36 36" enable-background="new 0 0 36 36" xml:space="preserve"><g id="conteudo"><g><g><path fill="#0065A0" d="M10.25,35.5c-0.512,0-1.023-0.195-1.414-0.586c-0.781-0.781-0.781-2.047,0-2.828L22.921,18L8.836,3.914c-0.781-0.781-0.781-2.047,0-2.828c0.78-0.781,2.047-0.781,2.828,0L28.579,18L11.664,34.914C11.274,35.305,10.762,35.5,10.25,35.5z"/></g></g></g></svg>');
  background-position: center;
  background-repeat: no-repeat;
  height: 50px;
  width: 36px;
}

.swiper-thumbnail-container-wrapper > .swiper-button-prev {
  left: auto;
  right: 100%;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.swiper-thumbnail-container-wrapper > .swiper-button-next {
  left: 100%;
  right: auto;
  /*transform: rotate(0deg);*/
}

.swiper-thumbnail-container-wrapper > .swiper-button-prev.swiper-button-disabled,
.swiper-thumbnail-container-wrapper > .swiper-button-next.swiper-button-disabled {
  opacity: 0.2;
}

.swiper-thumbnail-container {
  padding-top: 10px;
  /*background-color: black;*/
}

.swiper-thumbnail-container .swiper-wrapper .swiper-slide {
  width: 20%;
}

.article-list {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.article-list > article {
  margin-bottom: 20px;
}

.article-list > article > a {
  display: block;
  text-decoration: none;
  -webkit-transition: color .2s ease, background-color .2s ease;
  transition: color .2s ease, background-color .2s ease;
  color: black;
  cursor: pointer;
}

.article-list > article > a:hover {
  color: #0065A0;
  /* @dark-blue */
}

.article-list > article > a > img {
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  height: 200px;
}

.article-list > article > a > img.no-crop {
  width: 100%;
  height: auto;
}

.article-list > article > a > h4 {
  margin-top: 5px;
}

.article-list > article.hover-background > a {
  color: #0065A0;
  /* @dark-blue */
}

.article-list > article.hover-background > a:hover {
  color: white;
  background-color: #0065A0;
  /* @dark-blue */
}

.article-list > article.hover-background > a > h4 {
  margin-top: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 0;
  -webkit-transition: padding-left .3s ease;
  transition: padding-left .3s ease;
}

.article-list > article.hover-background > a:hover > h4 {
  padding-left: 10px;
}

@media (min-width: 401px) {
  .article-list > article {
    width: 49%;
  }
}

@media (max-width: 400px) {
  .article-list > article {
    width: 100%;
  }
}

.card-list {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
}

.card-list > a {
  background-color: white;
  color: black;
  -webkit-transition: background-color ease 0.3s;
  transition: background-color ease 0.3s;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  justify-content: space-between;
  text-decoration: none;
}

.card-list > a:hover {
  background-color: #FFDD00;
  /* yellow */
}

.card-list > a.blue:hover {
  background-color: #0065A0;
  /* @dark-blue */
}

.card-list > a > .contents > img {
  display: block;
  max-width: 100%;
  height: auto;
}

.card-list > a > .contents > .text-contents {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px 20px;
}

.card-list > a > .contents > .text-contents > h1 {
  font-size: 20px;
  margin-bottom: 20px;
}

@media (max-width: 500px) {
  .card-list > a > .contents > .text-contents > h1 {
    font-size: 18px;
    margin-bottom: 18px;
  }
}

.card-list > a.blue > .contents > .text-contents > h1 {
  color: #0065A0;
  /* @dark-blue */
}

.card-list > a:hover.blue > .contents > .text-contents > h1 {
  color: #00C4B3;
  /* @green */
}

.card-list > a > .contents > .text-contents > h3 {
  font-size: 16px;
  margin-bottom: 16px;
}

.card-list > a.blue:hover > .contents > .text-contents > h3 {
  color: white;
}

.card-list > a > .contents > .text-contents > .text {
  font-size: 16px;
}

.card-list > a.blue:hover > .contents > .text-contents > .text {
  color: white;
}

.card-list > a > .call-to-action {
  font-family: 'Vtg Stencil UK No 76';
  font-size: 20px;
  margin: 10px 20px;
  display: block;
  text-decoration: none;
  -webkit-transition: color .3s ease;
  transition: color .3s ease;
  color: #00C4B3;
  /* green */
}

.card-list > a.blue > .call-to-action {
  color: #0065A0;
  /* @dark-blue */
}

.card-list > a:hover > .call-to-action {
  color: white;
}

.card-list > a:hover > .call-to-action:hover {
  color: #00C4B3;
  /* green */
}

@media (min-width: 501px) {
  .card-list {
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -ms-flex-pack: justify;
    -webkit-box-pack: justify;
    justify-content: space-between;
  }

  .card-list > a {
    width: 30%;
  }
}

@media (max-width: 500px) {
  .card-list {
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
  }

  .card-list > a {
    margin-bottom: 20px;
  }
}

/**
 * Main header styles.
 * Contains all styles for both the large and small versions of the header.
 */

/**
 * Styles shared by small and large
 */

#logo-anchor {
  position: relative;
}

#logo {
  display: block;
  position: absolute;
  top: -40px;
  left: 0;
  height: 150px;
}

@media (max-width: 400px) {
  #logo {
    height: 100px;
  }
}

#logo-solid-orange {
  display: none;
  height: 60px;
}

#logo-solid-blue {
  display: none;
  height: 60px;
}

#main-header {
  position: fixed;
  z-index: 999999999999999999999999999999999999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  padding-left: 40px;
  padding-right: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: transparent;
  -webkit-transition: background-color .8s ease, -webkit-box-shadow .3s ease;
  transition: background-color .8s ease, -webkit-box-shadow .3s ease;
  transition: background-color .8s ease, box-shadow .3s ease;
  transition: background-color .8s ease, box-shadow .3s ease, -webkit-box-shadow .3s ease;
}

#main-header > div.max-width-wrapper {
  width: 100%;
  height: 100%;
  max-width: 1400px;
  margin: auto;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#main-header.solid {
  background-color: white;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
  /* header's height should match main-content's padding-top */
  height: 80px;
}

#main-header.solid #logo {
  display: none;
}

#main-header.solid.orange #logo-solid-orange {
  display: block;
}

#main-header.solid.blue #logo-solid-blue {
  display: block;
}

#main-nav a {
  position: relative;
  /* used for the ::before */
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-pack: start;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  padding-left: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Vtg Stencil UK No 76', Sans-Serif;
  font-weight: normal;
  text-decoration: none;
  -webkit-transition: color ease 0.3s, background-colo ease 0.3s;
  transition: color ease 0.3s, background-colo ease 0.3s;
  /*transition: background-color ease 0.3s, color ease 0.3s;*/
  height: 30px;
}

#main-nav a:hover::before,
#main-nav a.active::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -4px;
  height: 3px;
}

/* color depends on header style */

#main-header #main-nav a {
  color: white;
}

#main-header #main-nav a::before {
  background-color: white;
}

/* color depends on header style */

#main-header.solid.orange #main-nav a {
  color: #FF5000;
  /* orange */
}

/* color depends on header style */

#main-header.solid.blue #main-nav a {
  color: #0065A0;
  /* @dark-blue */
}

#main-header.solid.orange #main-nav a::before {
  background-color: #FF5000;
  /* orange */
}

#main-header.solid.blue #main-nav a::before {
  background-color: #0065A0;
  /* @dark-blue */
}

/**
 * Language selector
 */

#main-header #main-language-selector {
  border: 1px solid white;
}

#main-header.solid.orange #main-language-selector {
  border: 1px solid #FF5000;
  /* orange */
}

#main-header.solid.blue #main-language-selector {
  border: 1px solid #0065A0;
  /* @dark-blue */
}

#main-header #main-language-selector > li {
  margin: 0;
}

#main-header #main-language-selector > li > a::before {
  display: none;
}

#main-header #main-language-selector > li > a:hover,
#main-header #main-language-selector > li.current-lang > a {
  background-color: white;
  color: #8D8D8D;
}

#main-header.solid.orange #main-language-selector > li > a:hover,
#main-header.solid.orange #main-language-selector > li.current-lang > a {
  background-color: #FF5000;
  /* orange */
  color: white;
}

#main-header.solid.blue #main-language-selector > li > a:hover,
#main-header.solid.blue #main-language-selector > li.current-lang > a {
  background-color: #0065A0;
  /* @dark-blue */
  color: white;
}

/**
 * Styles used only by large devices
 */

@media (min-width: 901px) {
  #main-nav ul {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -ms-flex-pack: justify;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center;
  }

  #main-nav ul li {
    margin-right: 20px;
  }

  #main-nav ul li:last-child {
    margin-right: 0;
  }

  #main-nav a {
    padding-left: 10px;
    padding-right: 10px;
  }

  /**
   * Hide small-device-only elements
   */

  #menu-trigger {
    display: none;
  }

  #menu-overlay {
    display: none;
  }
}

/**
 * Styles used only by small devices
 * 612px is an appropriate breakpoint for this project,
 * it may vary acording to interactions and usability
 */

@media (max-width: 900px) {
  #main-header {
    padding-left: 20px;
    padding-right: 20px;
  }

  /**
   * When in small device, the main-nav is positioned fixed -
   * always relative to the window - at left: 100vw (100% viewport width).
   * That means that the left edge of the main-nav box is aligned to
   * the right edge of the window.
   */

  #main-nav {
    background-color: white;
    height: 100vh;
    width: 60vw;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 100vw;
    padding-top: 30px;
    padding-left: 40px;
    padding-right: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease;
  }

  #main-nav a {
    margin-top: 12px;
    margin-bottom: 12px;
  }

  #main-header.orange #main-nav a {
    color: #FF5000;
    /* orange */
  }

  #main-header.blue #main-nav a {
    color: #0065A0;
    /* @dark-blue */
  }

  /**
   * The menu trigger is a button element
   * with a background-image that has 2 images:
   *  - the menu icon
   *  - the close icon
   *
   * In order to change the image, we use the background-position
   * property.
   * This is known as 'CSS sprites'.
   * Learn more at: https://css-tricks.com/css-sprites/
   */

  #menu-trigger {
    position: absolute;
    top: 40px;
    right: 100%;
    -webkit-transform: translate(-20px, -50%);
    transform: translate(-20px, -50%);
    border: none;
    height: 30px;
    width: 30px;
    background-position: 0 bottom;
    background-color: transparent;
  }

  #main-header.orange #menu-trigger {
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="60px" viewBox="0 0 30 60" enable-background="new 0 0 30 60" xml:space="preserve"><g><line fill="none" stroke="#FF5000" stroke-width="2" stroke-miterlimit="10" x1="5.001" y1="5" x2="24.999" y2="25"/><line fill="none" stroke="#FF5000" stroke-width="2" stroke-miterlimit="10" x1="5.001" y1="24.998" x2="24.999" y2="5"/></g><g><line fill="none" stroke="#FF5000" stroke-width="2" stroke-miterlimit="10" x1="4" y1="44.583" x2="26" y2="44.583"/><line fill="none" stroke="#FF5000" stroke-width="2" stroke-miterlimit="10" x1="4" y1="36.583" x2="26" y2="36.583"/><line fill="none" stroke="#FF5000" stroke-width="2" stroke-miterlimit="10" x1="4" y1="52.583" x2="26" y2="52.583"/></g></svg>');
  }

  #main-header.blue #menu-trigger {
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="60px" viewBox="0 0 30 60" enable-background="new 0 0 30 60" xml:space="preserve"><g><line fill="none" stroke="#0065A0" stroke-width="2" stroke-miterlimit="10" x1="5.001" y1="5" x2="24.999" y2="25"/><line fill="none" stroke="#0065A0" stroke-width="2" stroke-miterlimit="10" x1="5.001" y1="24.998" x2="24.999" y2="5"/></g><g><line fill="none" stroke="#0065A0" stroke-width="2" stroke-miterlimit="10" x1="4" y1="44.583" x2="26" y2="44.583"/><line fill="none" stroke="#0065A0" stroke-width="2" stroke-miterlimit="10" x1="4" y1="36.583" x2="26" y2="36.583"/><line fill="none" stroke="#0065A0" stroke-width="2" stroke-miterlimit="10" x1="4" y1="52.583" x2="26" y2="52.583"/></g></svg>');
  }

  #menu-overlay {
    display: none;
    position: fixed;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
  }

  /**
   * Modify the menu-trigger's background-position so that
   * the close icon is displayed instead of the menu icon.
   */

  body.menu-open #menu-trigger {
    background-position: 0 top;
  }

  /**
   * Translate the main-nav -100% in the x-axis, so that
   * the main-nav's box is moved towards left the same amount
   * as its full width.
   */

  body.menu-open #main-nav {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }

  /**
   * Make the menu-overlay visible.
   */

  body.menu-open #menu-overlay {
    display: block;
  }

  #main-nav a:hover::before,
  #main-nav a.active::before {
    display: none;
  }

  #main-nav a:hover,
  #main-nav a.active {
    text-decoration: underline;
  }

  #main-header #main-language-selector {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    float: left;
  }

  /**
   * Language selector always has color in mobile
   */

  #main-header.orange #main-language-selector {
    border: 1px solid #FF5000;
    /* orange */
  }

  #main-header.blue #main-language-selector {
    border: 1px solid #0065A0;
    /* @dark-blue */
  }

  #main-header.orange #main-language-selector > li > a:hover,
  #main-header.orange #main-language-selector > li.current-lang > a {
    background-color: #FF5000;
    /* orange */
    color: white;
  }

  #main-header.blue #main-language-selector > li > a:hover,
  #main-header.blue #main-language-selector > li.current-lang > a {
    background-color: #0065A0;
    /* @dark-blue */
    color: white;
  }

  #main-header #main-language-selector > li {
    margin: 0;
  }

  #main-header #main-language-selector > li > a {
    margin-top: 0;
    margin-bottom: 0;
    padding: 10px 10px;
  }
}

.wysiwyg-content {
  line-height: 1.5;
}

/* ALL CONTENTS */

.wysiwyg-content > h1,
.wysiwyg-content > h2,
.wysiwyg-content > h3,
.wysiwyg-content > h4,
.wysiwyg-content > h5,
.wysiwyg-content > h6,
.wysiwyg-content > p,
.wysiwyg-content > ol,
.wysiwyg-content > ul,
.wysiwyg-content > img,
.wysiwyg-content > figure,
.wysiwyg-content > .swiper-gallery {
  margin-bottom: 40px;
}

.wysiwyg-content > h1:last-child,
.wysiwyg-content > h2:last-child,
.wysiwyg-content > h3:last-child,
.wysiwyg-content > h4:last-child,
.wysiwyg-content > h5:last-child,
.wysiwyg-content > h6:last-child,
.wysiwyg-content > p:last-child,
.wysiwyg-content > ol:last-child,
.wysiwyg-content > ul:last-child,
.wysiwyg-content > img:last-child,
.wysiwyg-content > figure:last-child,
.wysiwyg-content > .swiper-gallery:last-child {
  margin-bottom: 0;
}

/* HEADINGS */

.wysiwyg-content h1,
.wysiwyg-content h2,
.wysiwyg-content h3,
.wysiwyg-content h4,
.wysiwyg-content h5,
.wysiwyg-content h6 {
  font-weight: bold;
  color: #0065A0;
  /* dark-blue */
}

.wysiwyg-content h1 {
  font-size: 40px;
}

.wysiwyg-content h2 {
  font-size: 34px;
}

.wysiwyg-content h3 {
  font-size: 28px;
}

.wysiwyg-content h4 {
  font-size: 24px;
}

.wysiwyg-content h5 {
  font-size: 20px;
}

.wysiwyg-content h6 {
  font-size: 18px;
}

.wysiwyg-content figure {
  max-width: 100%;
}

.wysiwyg-content figure > figcaption {
  font-size: 14px;
  font-style: italic;
}

.wysiwyg-content img {
  width: 100%;
  height: auto;
}

.wysiwyg-content > p,
.wysiwyg-content > ol,
.wysiwyg-content > ul {
  font-size: 16px;
}

.wysiwyg-content > ol {
  list-style: decimal;
  padding-left: 30px;
}

.wysiwyg-content > ul {
  list-style: initial;
  padding-left: 30px;
}

.wysiwyg-content strong,
.wysiwyg-content b {
  font-weight: bold;
}

.wysiwyg-content em,
.wysiwyg-content i {
  font-style: italic;
}

.wysiwyg-content a {
  color: #0080BB;
  /* light-blue */
}

.wysiwyg-content a:hover {
  opacity: 0.9;
}

.ca-single-page-title {
  margin-top: 200px;
  margin-bottom: 80px;
  font-family: 'Vtg Stencil UK No 76';
  /*font-size: 30px;*/
}

#main-footer {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  background-color: #FFDD00;
  /* yellow */
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 70px;
  padding-bottom: 70px;
  text-align: center;
}

#footer-copyright {
  margin-bottom: 4px;
}

#footer-licensing a {
  color: black;
}

#main-footer > .social-links {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  margin-top: 40px;
  width: 60%;
  max-width: 200px;
}

#main-footer > .social-links a {
  width: 32px;
  height: 32px;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  opacity: 0.4;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

#main-footer > .social-links a:hover {
  opacity: 1;
}

#main-footer > .social-links a img {
  /* a intenção é colocar o ícone como sendo branco e cheio */
  /*width: 50%;*/
  width: 100%;
}

.search-form > .search-wrap {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  border: 1px solid #0065A0;
  /* @dark-blue */
}

.search-form > .search-wrap > .search-input {
  width: 100%;
  font-size: 18px;
  color: #0065A0;
  /* @dark-blue */
  padding: 10px 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: none;
  font-family: 'Mank Sans', Sans-Serif;
  line-height: 1.2;
  -ms-flex-positive: 1;
  -webkit-box-flex: 1;
  flex-grow: 1;
  outline: none;
}

.search-form > .search-wrap > button[type="submit"] {
  border: none;
  padding: 0;
  margin: 0;
  background-color: transparent;
  width: 40px;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  -ms-flex-positive: 0;
  -webkit-box-flex: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  outline: none;
  cursor: pointer;
}

.search-form > .search-wrap > button[type="submit"] > img {
  width: 20px;
  display: block;
}

.ca-dialog {
  display: none;
  position: fixed;
  z-index: 999999999999999999999999999;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

body.dialog-active > .ca-dialog {
  display: block;
}

body.dialog-active {
  overflow: hidden;
}

.ca-dialog > .ca-dialog-backdrop {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: black;
  opacity: 0.3;
}

.ca-dialog > .ca-dialog-wrapper {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 80%;
  max-width: 700px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: white;
  padding: 50px 50px;
}

@media (max-width: 400px) {
  .ca-dialog > .ca-dialog-wrapper {
    padding: 40px 20px;
    width: 90%;
  }
}

.ca-dialog > .ca-dialog-wrapper > button.close {
  position: absolute;
  top: 20px;
  right: 20px;
  height: 24px;
  width: 24px;
  background-image: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2236px%22%20height%3D%2236px%22%20viewBox%3D%220%200%2036%2036%22%20enable-background%3D%22new%200%200%2036%2036%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%20id%3D%22modal1%22%3E%3Cg%3E%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FF5000%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2233.5%22%20y1%3D%222.5%22%20x2%3D%222.5%22%20y2%3D%2233.5%22%2F%3E%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FF5000%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%222.5%22%20y1%3D%222.5%22%20x2%3D%2233.5%22%20y2%3D%2233.5%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  background-color: transparent;
  background-size: contain;
  border: none;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.ca-dialog > .ca-dialog-wrapper > .ca-dialog-contents {
  min-height: 200px;
  min-width: 200px;
  max-height: 80vh;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: auto;
}

.ca-colorful-links {
  position: relative;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
}

.ca-colorful-links > a {
  position: relative;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  font-family: 'Vtg Stencil UK No 76';
  font-size: 36px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  color: white;
  padding: 40px 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  opacity: 0.9;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: opacity .3s ease, -webkit-transform .3s ease;
  transition: opacity .3s ease, -webkit-transform .3s ease;
  transition: opacity .3s ease, transform .3s ease;
  transition: opacity .3s ease, transform .3s ease, -webkit-transform .3s ease;
}

.ca-colorful-links > a:hover {
  z-index: 2;
  opacity: 1;
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

@media (min-width: 901px) {
  .ca-colorful-links > a {
    width: 50%;
    /* any fixed size will do, so that flex distributes space equally */
    height: 250px;
  }
}

@media (min-width: 401px) and (max-width: 900px) {
  .ca-colorful-links {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: start;
    -webkit-box-pack: start;
    justify-content: flex-start;
  }

  .ca-colorful-links > a {
    width: 50%;
    height: 150px;
    font-size: 24px;
  }
}

@media (max-width: 400px) {
  .ca-colorful-links {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: start;
    -webkit-box-pack: start;
    justify-content: flex-start;
  }

  .ca-colorful-links > a {
    width: 100%;
    height: 120px;
    font-size: 24px;
  }
}

#team-photo {
  position: relative;
}

#team-members > li {
  position: absolute;
  background-color: white;
  color: #FF5000;
  /* @orange */
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  padding: 4px 8px;
  -webkit-transition: color .4s ease, background-color .4s ease;
  transition: color .4s ease, background-color .4s ease;
  cursor: pointer;
}

@media (max-width: 500px) {
  #team-members > li {
    position: static;
  }
}

#team-members > li:hover {
  background-color: #FF5000;
  /* @orange */
  color: white;
}

#team-members > li > a {
  color: inherit;
  text-decoration: none;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
}

#team-members > li > a > button {
  border: none;
  background-color: transparent;
  outline: none;
  /* color: #FF5000; @orange */
  color: inherit;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  padding: 0;
  margin: 0 0 0 6px;
  font-size: 18px;
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

/**
 * Holds the dialogs' contents. Is never displayed by itself
 */

#team-members > li > .dialog-contents {
  display: none;
}

/**
 * Dialog styles
 */

.team-member-dialog {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-align: start;
  -webkit-box-align: start;
  align-items: flex-start;
  /*width: 60vw;*/
}

@media (max-width: 500px) {
  .team-member-dialog {
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
  }
}

.team-member-dialog > .team-member-photo {
  -ms-flex-positive: 0;
  -webkit-box-flex: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 250px;
  max-width: 100%;
}

.team-member-dialog > .team-member-photo > img {
  width: 100%;
  height: auto;
}

.team-member-dialog > .team-member-description {
  -ms-flex-positive: 1;
  -webkit-box-flex: 1;
  flex-grow: 1;
  margin-left: 20px;
}

.team-member-dialog > .team-member-description > * {
  color: #FF5000;
  /* @orange */
}

.team-member-dialog > .team-member-description > h2 {
  font-size: 20px;
  font-weight: bold;
}

.team-member-dialog > .team-member-description > h3 {
  font-size: 20px;
  margin-bottom: 20px;
}

.team-member-dialog > .team-member-description > .team-member-contents {
  font-size: 16px;
}

/* import accessibility styles */

/**
 * https://make.wordpress.org/accessibility/2015/02/09/hiding-text-for-screen-readers-with-wordpress-core/
 */

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px);
  clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px);
  position: absolute !important;
  white-space: nowrap;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.screen-reader-text:focus {
  clip: auto !important;
  display: block;
  height: auto;
  left: 5px;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}

/**
 * Fonts
 */

@font-face {
  font-family: 'Vtg Stencil UK No 76';
  src: url('resources/fonts/vtg-stencil-web/vtg_stencil_uk_no76-webfont.woff2') format('woff2'),
       url('resources/fonts/vtg-stencil-web/vtg_stencil_uk_no76-webfont.woff') format('woff'),
       url('resources/fonts/vtg-stencil-web/vtg_stencil_uk_no76-webfont.ttf') format('truetype'),
       url('resources/fonts/vtg-stencil-web/vtg_stencil_uk_no76-webfont.svg#vtg_stencil_uk_no76regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Mank Sans';
  src: url('resources/fonts/mank-sans/manksans-oblique-webfont.woff2') format('woff2'),
       url('resources/fonts/mank-sans/manksans-oblique-webfont.woff') format('woff'),
       url('resources/fonts/mank-sans/manksans-oblique-webfont.ttf') format('truetype'),
       url('resources/fonts/mank-sans/manksans-oblique-webfont.svg#manksansitalic') format('svg');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Mank Sans';
  src: url('resources/fonts/mank-sans/manksans-webfont.woff2') format('woff2'),
       url('resources/fonts/mank-sans/manksans-webfont.woff') format('woff'),
       url('resources/fonts/mank-sans/manksans-webfont.ttf') format('truetype'),
       url('resources/fonts/mank-sans/manksans-webfont.svg#manksansregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Mank Sans';
  src: url('resources/fonts/mank-sans/manksans-medium-webfont.woff2') format('woff2'),
       url('resources/fonts/mank-sans/manksans-medium-webfont.woff') format('woff'),
       url('resources/fonts/mank-sans/manksans-medium-webfont.ttf') format('truetype'),
       url('resources/fonts/mank-sans/manksans-medium-webfont.svg#manksans-mediumregular') format('svg');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Mank Sans';
  src: url('resources/fonts/mank-sans/manksans-mediumoblique-webfont.woff2') format('woff2'),
       url('resources/fonts/mank-sans/manksans-mediumoblique-webfont.woff') format('woff'),
       url('resources/fonts/mank-sans/manksans-mediumoblique-webfont.ttf') format('truetype'),
       url('resources/fonts/mank-sans/manksans-mediumoblique-webfont.svg#manksans-mediummedium_italic') format('svg');
  font-weight: bold;
  font-style: italic;
}

/**
 * Main stylesheet of the project.
 */

body {
  font-family: 'Mank Sans', Sans-Serif;
  line-height: 1.2;
}

/**
 * Styles used only by large devices
 */

@media (min-width: 613px) {
  /*TODO: go back to child selector
  
  #main-content > section
  */

  .padded-content {
    padding: 100px 40px;
  }

  .max-width-wrapper {
    max-width: 1400px;
    margin: auto;
  }

  .side-padded-content {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/**
 * Styles used only by small devices
 * 612px is an appropriate breakpoint for this project,
 * it may vary acording to interactions and usability
 */

@media (max-width: 612px) {
  /*TODO: go back to child selector
  
  #main-content > section
  */

  .padded-content {
    padding: 100px 20px;
  }

  .side-padded-content {
    padding-left: 20px;
    padding-right: 20px;
  }
}