/*--------------------------------------------------------------
## FONT
--------------------------------------------------------------*/

@font-face {
  font-family: UniversLTStd;
  src: url('https://www.festivalcumplicidades.pt/wp-content/themes/cumplicidades/font/UniversLTStd-Bold.eot');
  src: url('https://www.festivalcumplicidades.pt/wp-content/themes/cumplicidades/font/UniversLTStd-Bold.eot?#iefix') format('embedded-opentype');
  src: url('https://www.festivalcumplicidades.pt/wp-content/themes/cumplicidades/font/UniversLTStd.woff') format('woff');
  src: url('https://www.festivalcumplicidades.pt/wp-content/themes/cumplicidades/font/UniversLTStd.ttf') format('truetype');
  font-weight: normal; 
  font-style: normal;
}
@font-face {
  font-family: UniversLTStd-Bold;
  src: url('https://www.festivalcumplicidades.pt/wp-content/themes/cumplicidades/font/UniversLTStd-Bold.eot');
  src: url('https://www.festivalcumplicidades.pt/wp-content/themes/cumplicidades/font/UniversLTStd-Bold.eot?#iefix') format('embedded-opentype');
  src: url('https://www.festivalcumplicidades.pt/wp-content/themes/cumplicidades/font/UniversLTStd-Bold.woff') format('woff');
  src: url('https://www.festivalcumplicidades.pt/wp-content/themes/cumplicidades/font/UniversLTStd-Bold.ttf') format('truetype');
  font-weight: normal; 
  font-style: normal;
}

/*--------------------------------------------------------------
## CUSTOM STYLING
--------------------------------------------------------------*/

:root {
  --orange: #f36e34;
  --blue: #2e3092;
  --white: #fff;
  --lightgrey: #c0c0c0;
  /* TEXT SIZES */
  --verysmall: 0.624rem;
  --smaller: 0.702rem;
  --small: 0.79rem;
	--normal: 19px;
	--big: 1.125rem;
	--bigger: 1.266rem;
	--verybig: 1.602rem;
  /* WIDTHS */
  --main--width: 80vw;
  --section-narrow-width: 65vw;
  --thumbnail-width: 25vw;
  --programa-item-img-width: calc(80vw * 0.65);
  /* MAIN MARGIN */
  --menu-padding: 10vw;
  --main-margin: 10vw;
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*:focus {
	outline:0;
}
html,
body{
	font-family: "UniversLTStd", sans-serif !important;
	font-size: var(--normal);
	font-weight: 100;
	line-height: 1.5;
  letter-spacing: 0.01em;
	color: var(--blue);
	scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
body::-webkit-scrollbar { 
  width: 0;
  height: 0;
}
a:link,
a:visited,
a:hover,
a:active{
	color: inherit;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
  cursor: pointer;
}
a:hover{
	color: var(--orange);
}
a.alt:link,
a.alt:visited,
a.alt:hover,
a.alt:active{
	border-bottom: 2px solid var(--orange)!important;
}
a.alt:hover{
	color: inherit!important;
	border-bottom: 2px solid transparent!important;
}
p{
	margin: 1em 0;
}
b{
	font-weight: 700;
}
h1, h2, h3{
	margin: 1.7em auto 1em auto;
	font-weight: 100;
  color: var(--orange);
}
h1{
	font-size: var(--verybig);
}
h1:first-child{
	margin-top: 0;
}
h2{
	font-size: var(--bigger);
}
h3{
	font-size: var(--smaller);
}
.centered{
	text-align: center;
}
.capital{
	text-transform: uppercase;
}
.big-p{
	font-size: var(--big);
	line-height: 1.3;
}
.smaller-p{
	font-size: var(--smaller)
}
.border-blue{
	border-bottom: 1px solid var(--blue);
}
.smaller-margin{
	margin: .45rem 0 .3rem 0;
}
.last-slash:last-child{
	display: none;
}

/* --------------------------------------------------- *
 *||||||||||||||||||||||||||||||||||||||||||| SITE NAV *
 * --------------------------------------------------- */

#navigation{
  width: 100vw;
  height: auto;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 90
}
#top-bar-container,
#menu-container{
	padding: 0 var(--menu-padding);
	width: 100%;
	position: relative;
	top: 0;
  right: 0;
	left: 0;
  z-index: 99
}
#top-bar-container{
	padding-top: 10px;
	height: 30px;
	font-size: var(--verysmall);
	color: var(--white);
	background-color: var(--blue);
}	
#menu-container{
	padding-top: 35px;
  height: 90px;
  text-transform: lowercase;
  background-color: transparent;
	border-bottom: 2px solid transparent;
  transition: all 0.3s ease-in-out;
}
#top-bar-container ul,
#menu-container ul,
#menu-burger,
#close-burger{
  position: relative;
	float: right;
}
#top-bar-container ul li,
#menu-container ul li{
	padding-left: 10px;
  display: inline-block;
}
/* HOME LINK */
#home-link{
  position: relative;
	float: left;
  opacity: 0;
  visibility: hidden;
	transform-origin: bottom left;
  transition: all 0.3s ease-in-out;
}
#home-link:hover{
	transform: skew(-3deg, -10deg) translateY(13px);
}
/* MENU SCROLLED */
.menu-scrolled{
  padding-top: 23px!important;
  height: 65px!important;
  background-color: var(--white)!important;
	border-color: var(--blue)!important;
}
.home-link-scrolled{
  opacity: 1!important;
  visibility: visible!important;
}
/* TOOLTIP * COMING SOON */
.tooltip-link{
  position: relative;
}
.tooltip-link:hover:after{
	padding: 5px 10px 3px 10px;
  margin: 15px auto 0;
  width: auto;
  position: absolute;
  top: 15px;
  left: 20px;
  font-size: var(--small);
  text-align: center;
  color: var(--orange);
  background: #fff;
  border: 2px solid var(--orange);
  content: 'brevemente/soon';
}
/* MENU MOBILE */
#menu-burger,
#close-burger{
  height: 20px;
	display: none;
}
#menu-mobile{
  padding: 90px 30px;
  width: 250px;
  height: 100vh;
  position: fixed;
  top: 30px;
  right: 0;
  transform: translateX(100%);
  background-color: var(--white);
  border-left: 2px solid var(--orange);
  transition: all 0.5s ease-in-out;
}
#menu-mobile ul{
	list-style: none;
}
/* MENU MOBILE CLICKED */
.menu-mobile-clicked{
  transform: translateX(0)!important;
}
.menu-burger-clicked{
	display: block!important;
}
@media only screen and (min-width: 900px) {
	.menu-burger-clicked{
		display: none!important;
	}
}

/* --------------------------------------------------- *
 *|||||||||||||||||||||||||||||||||| GENERIC CONTAINER *
 * --------------------------------------------------- */

.container{
	margin: 9rem 0 5rem 0;
  width: 100vw;
  height: auto;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

/* --------------------------------------------------- *
 *|||||||||||||||||||||||||||||||||||||||||||||| START *
 * --------------------------------------------------- */

#start{
	width: 100vw;
	height: 100vh;
	position: relative;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
	align-content: flex-start;
	z-index: 0;
}
#start > div {
  perspective: 25px;
}
#start > div > div {
  width: 20em;
  height: 18em;
  transition: transform 0.3s ease-in-out;
  -webkit-transition: transform 0.3s ease-in-out;
  -moz-transition: transform 0.3s ease-in-out;
  -o-transition: transform 0.3s ease-in-out;
}
#start #outer #inner img{
  position: absolute;
  width: 100vw; /* 100vw */
  height: 56.25vw; /* 16:9 – 9/16*100 = 56.25 */
  min-height: 100vh; /* 100vh */
  min-width: 177.77vh; /* 16:9 – 16/9*100 = 177.77 */
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#start-elements{
  padding: 120px var(--main-margin);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#start-elements > div{
  width: 100%!important;
  height: 100%!important;
  position: relative;
}
#tagline,
#data{
	width: 200px;
	position: absolute;
}
#tagline{
	top: 0;
	left: 0;
}
#data{
	right: 0;
	bottom: 0;
}
#cumplicidades{
	width: 70%;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* --------------------------------------------------- *
 *||||||||||||||||||||||||||||||||||||||||||||||| TABS *
 * --------------------------------------------------- */

#tabs {
	margin-bottom: 3rem;
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-start;
	align-content: flex-start;
}
#tabs li { 
  padding: 0 1.5rem 0.5rem 0;
  display: inline-block;
  list-style: none;
}
#tabs li a {
  border-bottom: 2px solid var(--orange)!important;
}
#tabs li a.inactive{
  border-color: transparent!important;
}
#tabs li a.inactive:hover{
  border-color: var(--orange)!important;
}

/* --------------------------------------------------- *
 *||||||||||||||||||||||||||||||||||||| SECTION NARROW *
 * --------------------------------------------------- */

.narrow{
	margin: 0 auto;
  width: var(--section-narrow-width);
  max-width: 1050px;
  position: relative;
}
.full-narrow-img{
	margin: 2rem 0 3rem 0;
	width: 100%;
	height: calc(var(--section-narrow-width)/2);
	position: relative;
	overflow: hidden;
	background-color: var(--blue);
}
.full-narrow-img:last-child{
	margin-bottom: 1rem;
}
.full-narrow-img > img{
	width: 105%;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.full-narrow-img > img.blue{
  filter: saturate(0);
  mix-blend-mode: screen;
}
/* CRÉDITOS FOTO */
.creditos-foto{
	position: relative;
	top: -30px;
	font-size: var(--smaller);
}
/* ORGANIZAÇÃO LOGO */
.org{
	width: 100%;
}
.org img{
	margin: 1.5rem 0 2rem 0;
  height: 7rem;
}
/* FLEX */
.flex{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	align-content: flex-start;
}
/* CELL - EIXOS */
.flex-cell-eixos{
	flex-basis: 27%;
}
/* CELL - EQUIPA */
.flex-cell-equipa{
	margin-right: 2rem;
  width: 45%;
}
.flex-cell-eixos p,
.flex-cell-equipa p{
	margin: 0.6rem 0!important;
}
/* CELL - APOIOS */
.flex > .flex{
	width: 100%;
}
.flex-cell-apoios img{
	margin: 0 2rem 1rem 0;
	height: 3.5rem;
}

/* --------------------------------------------------- *
 *||||||||||||||||||||||||||||||||||| TUMBNAIL GENERIC *
 * --------------------------------------------------- */

.thumbnail-container{
	margin: 0 auto;
	width: var(--main--width)
}
.thumbnail-container > div{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	align-content: flex-start;
}
.thumbnail-box{
	margin: 10px 0;
	align-self: flex-start;
  flex-basis: var(--thumbnail-width);
}
.thumbnail-box a{
	border: none;
}
.thumbnail-box a p{
	margin: 10px 0 0 0;
}
.thumbnail{
	position: relative;
  width: 100%;
  height: calc(var(--thumbnail-width)/2);
  overflow: hidden;
  background-color: var(--blue);
}
.thumbnail.orange{
  background-color: var(--orange);
}
.thumbnail img{
	width: 105%;
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-in-out;
}
.thumbnail img.under{
  mix-blend-mode: screen;
  filter: saturate(0);
}
.thumbnail img.over{
  opacity: 0;
}
.thumbnail-box:hover img.over{
  opacity: 1!important;
}
.thumbnail-box:hover .category{
  color: var(--blue);
}
.thumbnail-box a:hover{
  color: inherit;
}
.post-categories li{
	list-style: none!important;
}

.thumbnail{
	position: relative;
  width: 100%;
  height: calc(var(--thumbnail-width)/2);
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--blue);
}
.thumbnail.orange{
  background-color: var(--orange);
}
.thumbnail-box:hover .category{
  color: var(--blue);
}
.thumbnail-box a:hover{
  color: inherit;
}
.category{
	margin: 5px 0;
}

/*+++++++++++++++++++++++++++++*
 * SPECIAL PROGRAMA THUMBNAIL **
 *+++++++++++++++++++++++++++++*/

.thumb-info-programa{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: space-between;
	align-content: flex-start;
}
.thumb-info-programa p{	
	margin: 0.3rem 0 0 0!important;
}
.thumb-info-programa p.smaller-p{
	margin: 0.3rem 0 0.1rem 0!important;
}

/*+++++++++++++++++++++++++++++*
 * DATE FILTERS ****************
 *+++++++++++++++++++++++++++++*/

#filters,
#cats{
	margin: 0 0 20px 0;
  padding-bottom: 5px;
  justify-content: flex-start;
  border-bottom: 1px solid var(--blue);
}
#filters{
	margin: 0 0 3px 0;
}
#filters button,
#cats button{
  margin: 10px 30px 0 0;
  padding: 3px 0;
  font-family: "UniversLTStd", sans-serif !important;
  font-size: var(--small);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--blue);
  background-color: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.3s ease-in-out;
}
#cats button{
  text-transform: capitalize;
}
#filters button:hover,
#cats button:hover{
  color: var(--orange);
}
#filters button:first-child:hover,
#cats button:first-child:hover{
  color: var(--blue);
}

/* --------------------------------------------------- *
 *|||||||||||||||||||||||||||||||||||||| PROGRAMA ITEM *
 * --------------------------------------------------- */
.programa-item-container{
	margin: 0 auto;
	width: var(--main--width);
}
.programa-item{
	margin: 1.5rem 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
.programa-item-img{
	margin: 1.5rem 0 2rem 0;
	width: var(--programa-item-img-width);
	height: calc(var(--programa-item-img-width) / 1.7);
	position: relative;
	overflow: hidden;
	background-color: var(--blue);
}
.programa-item-img > img{
	width: 105%;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.item-left{
	flex-basis: 65%;
}
.item-left .full-narrow-img {
  margin: 1rem 0 3rem 0;
}
.item-left h1{
	color: var(--blue)!important;
}
.item-right{
	flex-basis: 30%;
	height: auto;
}
.item-right > div h3{
	margin: .5rem 0 .3rem 0;
	color: var(--blue)!important;
}
.item-right > div:last-child{
	margin-top: 2.5rem;
}
.item-right > div:last-child img{
	margin-right: 1.5rem;
	height: 4rem;
}

/*+++++++++++++++++++++++++++++*
 * POST NAVIGATION HACK ********
 *+++++++++++++++++++++++++++++*/

.screen-reader-text {
	display: none;
}
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	float: left;
	width: 50%;
}
.posts-navigation .nav-next,
.post-navigation .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}
.posts-navigation,
.post-navigation{
	margin-top: 2em;
}

/* --------------------------------------------------- *
 *|||||||||||||||||||||||||||||||||||||||||||||||| MAP *
 * --------------------------------------------------- */

.acf-map {
	margin: 0 auto;
  width: 100%;
  height: 500px;
  border: none;
}
.gm-style-iw {
	margin: 0;
	padding: 0;
  width: auto;
  height: 50px;
  border-radius: 0!important;
  border: 1px solid var(--orange)!important;
  padding: 9px 10px 10px 10px!important;
  box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0.1)!important;
}
.gm-style .gm-style-iw-t::after{
	display: none;
}
.gm-style-iw > button {
  display: none !important;
}
.info{
	margin: 0;
	padding: 0 5px 0 20px;
	min-width: 100px;
	font-family: "UniversLTStd", sans-serif !important;
	line-height: 0;
	text-align: center!important;
}


.grid{
	padding-top: 30px;
}
.grid-sizer,
.freguesias{
	padding: 20px 0;
  width: calc(33.33% - 20px);
  float: left;
}
.freguesias h2{
  margin-top: 0!important;
}
.nome-local{
	margin: 30px 0 0 0;
}
.unselected-dance,
.unselected-block,
.unselected-freguesia{
	display: none;
}



.tooltip {
  position: relative;
  cursor: default;
}
.tooltip .tooltiptext {visibility: hidden;
  visibility: hidden;
  min-width: 70px;
  max-width: 390px;
  background-color: var(--white);
  color: var(--orange);
  padding: 8px 10px;
  position: absolute;
  top: 35px;
  left: 5px;
  z-index: 1;
  border: 2px solid var(--orange);
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* --------------------------------------------------- *
 *|||||||||||||||||||||||||||||||||||||||||| CONTAINER *
 * --------------------------------------------------- */

.bloco-container{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	align-content: flex-start;
}
.bloco-container > div{
	flex-basis: 47%;
}

/* --------------------------------------------------- *
 *||||||||||||||||||||||||||||||||||||||||||||| FOOTER *
 * --------------------------------------------------- */

#site-footer{
	margin: 0 auto;
  width: var(--main--width);
}
#site-footer > div{
	padding: 1rem 0 3rem 0;
  width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	align-content: flex-start;
	border-top: 1px solid var(--blue);
}
.footer-cell{
	align-self: flex-start;
	flex-basis: var(--thumbnail-width);
}

/*+++++++++++++++++++++++++++++*
 * FOOTER - NEWSLETTER *********
 *+++++++++++++++++++++++++++++*/

#mce-email{
	padding: 0.5rem;
	width: 100%;
	max-width: var(--thumbnail-width);
  font-size: var(--smaller);
  color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 0;
}
#mce-email::placeholder{
  color: var(--lightgrey);
}
#mc-embedded-subscribe{
  margin: 0.7rem 0;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--blue);
  background-color: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.3s ease-in-out;
}
#mc-embedded-subscribe:hover{
  color: var(--orange)
}

/*+++++++++++++++++++++++++++++*
 * FOOTER - CONTACT & PARTNERS *
 *+++++++++++++++++++++++++++++*/

#contact,
#partners{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	align-content: flex-start;
}
#contact > div,
#partners > div{
	align-self: flex-start;
}
#partners img{
	height: 2rem;
}

/* --------------------------------------------------- *
 *|||||||||||||||||||||||||||||||||||||| MEDIA QUERIES *
 * --------------------------------------------------- */

@media only screen and (max-height: 700px) {
	#cumplicidades{
		width: 60%;
	}
}
@media only screen and (max-width: 1300px) {
  :root{
  	/* TEXT SIZES */
		--normal: 18px;
  }
}
@media only screen and (max-width: 1200px) {
  :root{
  	/* TEXT SIZES */
		--normal: 17px;
	  /* WIDTHS */
	  --section-narrow-width: 75vw;
  }
  #contact > div,
	#partners > div{
		flex-basis: 100%;
	}
}
@media only screen and (max-width: 1000px) {
  :root{
	  /* WIDTHS */
	  --section-narrow-width: 80vw;
  }
}
@media only screen and (max-width: 900px) {
	:root{
	  /* WIDTHS */
  	--thumbnail-width: 37.5vw;
  	--programa-item-img-width: 80vw;
  }
  #tabs li { 
	  width: 100%;
	}
  #start #outer #inner img{
    min-height: 100vh;
    width: auto!important;
  }
  .flex-cell-eixos,
  .footer-cell {
    flex-basis: 100%;
	}
	.item-left,
	.item-right{
		flex-basis: 100%;
	}
	.programa-item-img {
    margin: 1rem 0 2rem 0;
  }
	#contact > div,
	#partners > div{
		flex-basis: 100%;
	}
	#partners > div{
		justify-content: flex-start;
	}
	#menu-container ul{
		display: none;
	}
	.menu-scrolled{
		padding-top: 15px!important;
		height: 50px!important;
	}
	#menu-burger,
	#close-burger{
		margin-top: -1px;
	}
	.shapes{
		display: none;
	}
	.tooltip-link:after{
	  padding: 2px 7px 0 7px;
    margin: 15px auto 0;
    width: auto;
    position: absolute;
    bottom: 0;
    left: 40px;
    font-size: var(--small);
    text-align: center;
    color: var(--orange);
    background: #fff;
    border: 1px solid var(--orange);
    content: 'brevemente';
	}
}
@media only screen and (max-width: 700px) {
	:root{
  	/* TEXT SIZES */
		--normal: 15px;
	  /* WIDTHS */
  	--thumbnail-width: 80vw;
  }
  .container{
  	margin-top: 7rem;
  }
	#menu-container{
		padding-top: 15px;
		height: 50px;
	}
	#cumplicidades{
		width: 90%;
	}
	#tagline,
	#data {
    width: 150px!important;
	}
	#filters {
    margin: 0 0 7px 0;
  }
	#filters button,
	#cats button {
    margin: 0 15px 0 0;
	}
	.bloco-container > div{
		flex-basis: 100%;
	}
	.grid-sizer,
	.freguesias{
		padding: 20px 0;
	  width: calc(50% - 15px);
	  float: left;
	}
}
@media only screen and (max-width: 450px) {
	#top-bar-container ul li,
	#menu-container ul li {
    padding-left: 5px;
	}
	#start-elements {
    padding: 70px var(--main-margin);
  }
	#cumplicidades{
		width: 100%;
	}
	.grid-sizer,
	.freguesias{
		padding: 20px 0;
	  width: 100%;
	  float: left;
	}
}