/* FONTES*/

/* GlosaDisplay-Medium */
@font-face {
font-family: 'GlosaDisplay-Medium';
src: url('http://cdn.impresa.pt/711/355/12388107/Expresso_WebFonts/GlosaDisplay-Medium.eot');
src: url('http://cdn.impresa.pt/711/355/12388107/Expresso_WebFonts/GlosaDisplay-Medium.eot#iefix') format('embedded-opentype'),
     url('http://cdn.impresa.pt/711/355/12388107/Expresso_WebFonts/GlosaDisplay-Medium.svg') format('svg'),
     url('http://cdn.impresa.pt/711/355/12388107/Expresso_WebFonts/GlosaDisplay-Medium.ttf') format('truetype'),
     url('http://cdn.impresa.pt/711/355/12388107/Expresso_WebFonts/GlosaDisplay-Medium.woff#reader-font') format('woff');
font-weight: normal;
font-style: normal;
}

/* GlosaDisplay-Bold */
@font-face {
font-family: 'GlosaDisplay-Bold';

src: url('http://cdn.impresa.pt/711/355/12388107/Expresso_WebFonts/GlosaDisplay-Bold.eot');

src: url('http://cdn.impresa.pt/711/355/12388107/Expresso_WebFonts/GlosaDisplay-Bold.eot#iefix') format('embedded-opentype'),

     url('http://cdn.impresa.pt/711/355/12388107/Expresso_WebFonts/GlosaDisplay-Bold.svg') format('svg'),

     url('http://cdn.impresa.pt/711/355/12388107/Expresso_WebFonts/GlosaDisplay-Bold.ttf') format('truetype'),

     url('http://cdn.impresa.pt/711/355/12388107/Expresso_WebFonts/GlosaDisplay-Bold.woff#reader-font') format('woff');

font-weight: normal;
font-style: normal;
}

/* Georgia */
@font-face {
font-family: 'georgia';
src: url('http://cdn.impresa.pt/711/355/12388107/Expresso_WebFonts/georgia.ttf');
src: url('http://cdn.impresa.pt/711/355/12388107/Expresso_WebFonts/georgia.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

/* Russian Fonts - RF Rufo Bold */
@font-face {
font-family: 'RF Rufo Bold';

src: url('http://cdn.impresa.pt/711/355/12388107/Expresso_WebFonts/RF_Rufo_Bold.otf');

src: url('http://cdn.impresa.pt/711/355/12388107/Expresso_WebFonts/RF_Rufo_Bold.otf') format('OpenType Font');

src: url('http://cdn.impresa.pt/711/355/12388107/Expresso_WebFonts/RF_Rufo_Bold.eot');
        src: url('http://cdn.impresa.pt/711/355/12388107/Expresso_WebFonts/RF_Rufo_Bold.eot#iefix') format('embedded-opentype');


src: url('http://cdn.impresa.pt/711/355/12388107/Expresso_WebFonts/RF_Rufo_Bold.ttf') format('truetype');

font-weight: normal;
font-style: normal;
}






        

/*div{
border: 1px solid #000 !important;
box-sizing: border-box;
}*/

/* 00 BASE*/

.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}

.clearfix:after {
clear: both;
}


html {
/* 10 px equivale a 62.5% */
font-size: 10px; /* equivale a 1rem */
box-sizing: border-box;
}

body {
font-size: 1rem; /* equivale a 1em e a 10px */
font-family: Georgia,serif;
background-color: #ce3375;
}

body, html {
height: 100%; /*necessário para o paralax*/
}

a {
text-decoration: none;
background-color: transparent;
cursor: auto;
}

img {
max-width: 100%; /*evita que as imagens estiquem e fiquem pixilizadas*/
display: block;
}

figure {
margin: 0em 0em;
}

blockquote {
display: block;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0em;
-webkit-margin-end: 0em;
}

h2 {
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0em;
-webkit-margin-end: 0em;
}

/** 01 top é o pai da nav*/

div.top {
position: fixed;
top: 0;
width: 100%;
z-index: 4;
}

/** 02 nav*/

div.top nav.collapse-navbar {
position: relative;
width: inherit;
overflow: hidden;
padding: 0.85em 0em;
/*padding: 1.4em 0em;*/
/*background-color: #33414eab;*/
}

div.top nav.collapse-navbar div.menu-one, div.top nav.collapse-navbar div.menu-one div.share-social-media, div.top nav.collapse-navbar div.menu-two, div.top nav.collapse-navbar div.menu-two div.share-social-media {
    position: relative;
}

/*parte do título dos items só aparece no menu vertical, qdo surge o toggle*/
div.top nav.collapse-navbar div.menu-two a span.title-vertical_menu {
display: none;
}

/** 03 items dos dois menus: lettering*/

div.top nav.collapse-navbar div.menu-one a,
div.top nav.collapse-navbar div.menu-one div.share-social-media a,

div.top nav.collapse-navbar div.menu-two a,
div.top nav.collapse-navbar div.menu-two h2, 
div.top nav.collapse-navbar div.menu-two h3,
div.top nav.collapse-navbar div.menu-two button,
div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text button,
div.top nav.collapse-navbar div.menu-two div.share-social-media a { 
display: block;
vertical-align: middle;
text-align: center;

white-space: normal;
user-select: none;
cursor: pointer;
border: none;
outline: none;
text-decoration: none;


font-family: "Firme-Medium",sans-serif;
font-size: 1.3em;
line-height: 1.55em;
text-transform: uppercase;
font-style: normal;
color: #FFFFFF;
}


/** 04 logo */
div.top nav.collapse-navbar div.menu-one a.logo { 
width: 18px; 
}


div.top nav.collapse-navbar div.menu-one a.logo div.logo2{
background-image: url('../img/tribuna_branco_300.png');
}


/** 05 Excepções à estilização dos items*/

div.top nav.collapse-navbar div.menu-one a.logo.only-scrolled_menu {
opacity: 1;
}

div.top nav.collapse-navbar div.menu-two a.back-to-index,
div.top nav.collapse-navbar.scroll-effects div.menu-two a.back-to-index,
div.top nav.collapse-navbar div.menu-two h2,
div.top nav.collapse-navbar div.menu-two button, 
div.top nav.collapse-navbar div.menu-one a.icon {
/*font-style: italic;*/
font-family: 'Roboto Condensed', sans-serif;
}

/*botão dos "créditos" da modal box*/
div.top nav.collapse-navbar div.menu-two button {
background-color: transparent;
}


/** 06 floats*/

div.top nav.collapse-navbar div.menu-one a,
div.top nav.collapse-navbar div.menu-two a,
div.top nav.collapse-navbar div.menu-two h2, 
div.top nav.collapse-navbar div.menu-two h3
/*div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text button*/ { 
float: left;
}

div.top nav.collapse-navbar div.menu-one a.icon,
div.top nav.collapse-navbar div.menu-one div.share-social-media a,
div.top nav.collapse-navbar div.menu-two button,
div.top nav.collapse-navbar div.menu-two div.share-social-media a { 
float: right;
}

div.wrapper {
height: 700em;
}

/** 07 items dos dois menus: paddings e margins; */

/*** zona da esquerda do menu: logo... */

div.top nav.collapse-navbar div.menu-one a.only-scrolled_menu {
display: none;  
}

div.top nav.collapse-navbar div.menu-one a.logo,
div.top nav.collapse-navbar div.menu-two a.back-to-index,
div.top nav.collapse-navbar div.menu-two h2, 
div.top nav.collapse-navbar div.menu-two h3 { 
padding-right: 1.6em;
padding-top: 0.8em;
padding-bottom: 0.6em;
/*margin-left: 1.6rem;*/
margin-left: 2.4rem;
margin-top: 0em;
margin-bottom: 0em;
}


div.top nav.collapse-navbar div.menu-two a.back-to-index,
div.top nav.collapse-navbar div.menu-two button.no-vertical-border {
font-size: 1.34em;
}

div.top nav.collapse-navbar div.menu-two a.back-to-index { 
padding-right: 10em;
}

div.top nav.collapse-navbar div.menu-two h2, 
div.top nav.collapse-navbar div.menu-two h3 { 
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
}

/*Nota: quando tem sublinhado no hover os paddings esq e dta têm de ser zero, para o sublinhado ficar à largura da palavra*/

/*** partes do trabalho */
div.top nav.collapse-navbar div.menu-two a { 
padding-left: 0em;
padding-right: 0em;
padding-top: 0.8em;
padding-bottom: 0.2em;
margin-left: 0rem;
margin-right: 3.8rem;
}

/*** increase the clickable area of the first link because it is too narrow */

div.top nav.collapse-navbar div.menu-two a.increase-padding {
padding-left: 0.3em;
padding-right: 0.3em;
padding-top: 0.8em;
padding-bottom: 0.2em;
margin-left: 0rem;
margin-right: 2.8em;
}


/*** créditos e hamburguer button que é o icon */  
div.top nav.collapse-navbar div.menu-two button,
div.top nav.collapse-navbar div.menu-one a.icon { 
padding-left: 0em;
padding-right: 0em;
padding-top: 0.8em;
padding-bottom: 0.2em;
margin-left: 2.1em;
margin-right: 2.3em;
}

/*** facebook, twitter, google*/

i.fa-lg {
font-size: 1.46em;
}

div.top nav.collapse-navbar div.menu-one div.share-social-media a,
div.top nav.collapse-navbar div.menu-two div.share-social-media a { 
padding-left: 0rem;
padding-right: 0rem;
padding-top: 0.8em;
padding-bottom: 0.6em;
margin-left: 0rem;
margin-right: 2.02rem;
margin-top: 0em;
margin-bottom: 0em;
}

/**** excepção para o icon do facebook*/
div.top nav.collapse-navbar div.menu-one div.share-social-media a:nth-child(3),
div.top nav.collapse-navbar div.menu-two div.share-social-media a:nth-child(3),
div.top nav.collapse-navbar.scroll-effects div.menu-one div.share-social-media a:nth-child(3),
div.top nav.collapse-navbar.scroll-effects div.menu-two div.share-social-media a:nth-child(3)  {
padding-left: 0.3em;
padding-right: 0.1em;
}

/**** excepção para o icon da Google*/
div.top nav.collapse-navbar div.menu-one div.share-social-media a:nth-child(1),
div.top nav.collapse-navbar div.menu-two div.share-social-media a:nth-child(1) {
/*padding-right: 1.8em;*/
padding-right: 0em;
margin-right: 0em;
}

/** 08 current-item */  
div.top nav.collapse-navbar div.menu-two a.current-item {
pointer-events: none;
cursor: default;
border-bottom: 0.03em solid #FFF;
}

/** 09 hover dos items e do button créditos*/

/* :link | :visited | :hover | :active - selectors */



/*** mouse over link */
div.top nav.collapse-navbar div.menu-two a:hover,
div.top nav.collapse-navbar div.menu-two button:hover {
border-bottom: 0.03em solid #FFFFFF;
}

/*** active link - qdo clicamos */
div.top nav.collapse-navbar div.menu-two a:active,
div.top nav.collapse-navbar div.menu-two button:active {
}

/** 10 hover item back to index*/
div.top nav.collapse-navbar div.menu-two a.back-to-index:hover {
border-bottom: none;
}



/** 11 vertical-border*/

div.top nav.collapse-navbar div.menu-one a.vertical-border,
div.top nav.collapse-navbar div.menu-one div.share-social-media a.vertical-border,
div.top nav.collapse-navbar div.menu-two a.vertical-border,
div.top nav.collapse-navbar div.menu-two h2.vertical-border, 
div.top nav.collapse-navbar div.menu-two h3.vertical-border,
div.top nav.collapse-navbar div.menu-two button.vertical-border,
div.top nav.collapse-navbar div.menu-two div.share-social-media a.vertical-border {
border-right: 0.1em solid rgba(255, 255, 255, 0.65);
}

/** 12 no-vertical-border*/

div.top nav.collapse-navbar div.menu-one a.no-vertical-border,
div.top nav.collapse-navbar div.menu-one div.share-social-media a.no-vertical-border,
div.top nav.collapse-navbar div.menu-two a.no-vertical-border,
div.top nav.collapse-navbar div.menu-two h2.no-vertical-border, 
div.top nav.collapse-navbar div.menu-two h3.no-vertical-border,
div.top nav.collapse-navbar div.menu-two button.no-vertical-border,
div.top nav.collapse-navbar div.menu-two div.share-social-media a.no-vertical-border{
border-right: 0.1em solid rgba(255, 255, 255, 0);
}


/** 13 scroll: alterações na nav: cores e susbtituição do logo por outro*/


/*** quando fazemos scroll é plaicada à nav a classe scroll effects*/
div.top nav.collapse-navbar.scroll-effects {
background-color: #ce3375;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
position: relative;
animation: animatetop 0.4s;
}

/*** quando fizemos scroll este é o logo que aparece na nav: black*/
div.top nav.collapse-navbar.scroll-effects div.menu-one a.only-scrolled_menu {
display: block;  
}


/*** o logo que aparece quando não fazemos scroll, neste caso, desaparece*/
div.top nav.collapse-navbar.scroll-effects div.menu-one a.no-scrolled_menu {
display: none;  
}

/*** cor dos items*/
div.top nav.collapse-navbar.scroll-effects div.menu-one a,
div.top nav.collapse-navbar.scroll-effects div.menu-one div.share-social-media a,
div.top nav.collapse-navbar.scroll-effects div.menu-two a,
div.top nav.collapse-navbar.scroll-effects div.menu-two h2, 
div.top nav.collapse-navbar.scroll-effects div.menu-two h3,
div.top nav.collapse-navbar.scroll-effects div.menu-two button,
div.top nav.collapse-navbar.scroll-effects div.menu-two div.share-social-media a { 
color: #FFFFFF;
}

/*** cor do vertical-border dos items*/
div.top nav.collapse-navbar.scroll-effects div.menu-one a.vertical-border,
div.top nav.collapse-navbar.scroll-effects div.menu-one div.share-social-media a.vertical-border,
div.top nav.collapse-navbar.scroll-effects div.menu-two a.vertical-border,
div.top nav.collapse-navbar.scroll-effects div.menu-two h2.vertical-border, 
div.top nav.collapse-navbar.scroll-effects div.menu-two h3.vertical-border,
div.top nav.collapse-navbar.scroll-effects div.menu-two button.vertical-border,
div.top nav.collapse-navbar.scroll-effects div.menu-two div.share-social-media a.vertical-border {
border-right: 0.1em solid rgba(255, 255, 255, 0.65);
}

/*** cor do no-vertical-border dos items: transparente*/
div.top nav.collapse-navbar.scroll-effects div.menu-one a.no-vertical-border,
div.top nav.collapse-navbar.scroll-effects div.menu-one div.share-social-media a.no-vertical-border,
div.top nav.collapse-navbar.scroll-effects div.menu-two a.no-vertical-border,
div.top nav.collapse-navbar.scroll-effects div.menu-two h2.no-vertical-border, 
div.top nav.collapse-navbar.scroll-effects div.menu-two h3.no-vertical-border,
div.top nav.collapse-navbar.scroll-effects div.menu-two button.no-vertical-border,
div.top nav.collapse-navbar.scroll-effects div.menu-two div.share-social-media a.no-vertical-border{
border-right: 0.1em solid rgba(255, 255, 255, 0);
}

/*** cor do border-bottom do hover dos items*/
div.top nav.collapse-navbar.scroll-effects div.menu-two a:hover,
div.top nav.collapse-navbar.scroll-effects div.menu-two button:hover {
border-bottom: 0.03em solid #FFFFFF;
}

/*** tirar o border-bottom do hover destes dois items*/
div.top nav.collapse-navbar.scroll-effects div.menu-two a.back-to-index:hover,
div.top nav.collapse-navbar.scroll-effects div.menu-two div.share-social-media.only-large-devices a:hover {
border-bottom:none;
opacity: 0.5;
}

div.top nav.collapse-navbar div.menu-two a.back-to-index:hover,
div.top nav.collapse-navbar div.menu-two div.share-social-media.only-large-devices a:hover {
border-bottom:none;
opacity: 0.5;
}

/*** cor border-bottom do current-item*/  
div.top nav.collapse-navbar.scroll-effects div.menu-two a.current-item {
pointer-events: none;
cursor: default;
border-bottom: 0.03em solid #FFF;
}


/** 14 button créditos e modal box (cx pop up)*/

div.top nav.collapse-navbar div.menu-two div.modal-box-container {
z-index: 5;
position: fixed;
right: 0;
top: 0;
overflow: auto;
display: none;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content {
margin: auto;
background-color: #a5295e;
position: relative;
padding: 0;
outline: 0;
width: 317px;
box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19);
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text {
padding: 11.6em 1em 7em;
}

div.top nav.collapse-navbar div.menu-two button.no-vertical-border {
z-index: 6;
position: relative;
}


div.top nav.collapse-navbar div.menu-two div.share-social-media {
z-index: 6;
position: relative;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text button.close {
z-index: 6;
position: absolute;
right: 0;
top: 0;
color: #ffffff;
background-color: #d35251;
margin: 0em;
border-bottom: 0em;
padding: 0.8rem 1.6rem;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text button.close:hover {
color: #ffffff;
background-color: #006C78;
}

.topright {
position: absolute;
right: 0;
top: 0;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text cite {
font-family: "Glosa-Medium",serif;
font-size: 1.1em;
line-height: 1.4em;
text-transform: uppercase;
letter-spacing: 0.2em;
font-style: normal;
text-align: center;
display: block;
color: #FFF;
margin-bottom: 1.5em;
font-weight: 500;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text cite span.media-name {
text-transform: uppercase;
text-align: center;
display: block;
font-family: 'RF Rufo Bold', sans-serif;
color: #FFFFFF;
font-size: 1.2em;
letter-spacing: 0em;
padding-bottom: 0.13em;
}


div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text h6 {
font-size: 1.1em;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.1em;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
width: 55%;
line-height: 1.1em;
margin: 3em auto 0em auto;
color: #FFF;
font-family: 'RF Rufo Bold', sans-serif;
}


/** 15 only-large-devices está sempre em display block até as mediaqueries dizerem o contrário*/

.only-large-devices {
display: block;  
}

/** 16 only-small-devices está sempre em display none até as mediaqueries dizerem o contrário*/

.only-small-devices,
div.top nav.collapse-navbar a.icon.only-small-devices,
div.top nav.collapse-navbar div.only-small-devices,
div.fullwidth-cover.only-small-devices,
div.wrapper div.content-fullwidth div.box.only-small-devices,
div.wrapper div.content-larger div.box.only-small-devices {
display: none; 
}

/*NOTA: é com as classes .only-large-devices e .only-small-devices que conseguimos substituir elementos quando passamos dos large para os small devices. Nota que as definições do deste styles.css estão pensadas para o formato width=1366px, ou seja um large-device*/



/* C O N T A I N E R */


.container a header {
margin: 0em auto 6.8%;

white-space: normal;

user-select: none;

cursor: pointer;

position: relative;

width: 68em;

width: 36.5%;

height: 62em;
}

.container a header img {
position: absolute;
right: 0;
top: 0;
/*width: 51em;*/
width: 75%; 
}

.container a header div.header-title { 
position: absolute;
bottom: 0;
left: 0;
}

.container a header div.header-title h1 {
position: relative;

font-family: 'Roboto Condensed', sans-serif;

font-weight: 800;

font-size: 3.9em;

line-height: 1.1em;

letter-spacing: 0.01em;

text-transform: uppercase;

color: #000000;

-webkit-margin-before: 0em;

-webkit-margin-after: 0em;

margin-bottom: 0;
}

.container a header div.header-title h2 {
position: relative;
font-family: GlosaDisplay-Black, serif;
font-size: 1.2em;
letter-spacing: 0.5em;
text-transform: uppercase;
color: #000000;
margin-top: 1.6em;
line-height: 1.5em;
}

.container a header div.header-title p {
letter-spacing: 0;

-webkit-margin-before: 0.5em;

position: relative;

font-size: 2em;

text-transform: uppercase;

width: 56%;

-webkit-margin-after: 0em;

color: #000000;

font-family: 'Roboto Condensed', sans-serif;

text-align: left;

font-weight: 800;

line-height: 1.2em;
}


.container .items {
margin: 35px 0 0 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}

.container .items li {
position: relative;
float: left;
overflow: hidden;
border: 0.9px solid #128b9870;
box-sizing: border-box;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: none;
/*width: 16.6666667%; 
width: -webkit-calc(100% / 6);
width: calc(100% / 6);*/
}

.container .items li.white-hover {
border: 0.9px solid #FFFFFF;
}

.container .items li {
border: 0.9px solid #49B5C0;
}

.container .items li.rose-hover {
border: 0.9px solid #dd397e;
}

.container .items li a,
.container .items li a img {
display: block;
width: 100%;
cursor: pointer;
}

.container .items li a img {
max-width: 100%;
}

.container .items li a h6 {
color: #006C78;
display: block;
font-family: GlosaDisplay-Medium, serif;
font-size: 1.4em;
padding: 1em;
letter-spacing: 0.2em;
position: absolute;
top: 0em;
right: 0em;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
}

.container .items li.white-hover a h6 {
color: #000000;
padding: 1em;
background-color: #ffffffba;
}

.container .items li.rose-hover a h6 {
color: #F583B3;
}


/* Flexbox is used for centering the heading */
.container .items li a div {
position: absolute;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
left: 0em;
top: 0em;
right: 0em;
bottom: 0em;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
text-align: center;
background: rgba(88, 200, 212, 0.96);
opacity: 0;
}

.container .items li.white-hover a div {
background: rgba(255, 255, 255, 0.96);
}

.container .items li.rose-hover a div {
background: rgba(206, 51, 117, 0.96);
}

.container .items li a:hover div {
opacity: 1;
}

.container .items li a div h3 {
width: 100%;
color: #000000;
font-size: 3em;
letter-spacing: -0.01em;
/*padding: 10px 30px 10px 45px;*/
padding: 2em 0.8em 2em 1em;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
font-weight: 800;
line-height: 1.1em;
/* text-shadow: 1px 1px 1px #35828a; */
text-transform: uppercase;
}

.container .items li a div h3 span.title {
width: 100%;
color: #000000;
display: block;
font-family: Glosa Medium, serif;
font-size: 0.85em;
font-weight: 100;
text-align: left;
line-height: 1.3em;
margin-top: 1.2em;
text-shadow: 1px 1px 1px #35828a00;
text-transform: none;
}