/*************************/
/*************************/
/*FONTS*/
/*************************/
/*************************/

@font-face {
	font-family: Eddy;
	src: 	url(../resources/fonts/Eddy-Normal.woff) format('woff'),
			url(../resources/fonts/Eddy-Normal.woff2) format('woff2');
}

@font-face {
	font-family: Tactic;
	src: url(../resources/fonts/Tactic-Regular.woff) format('woff'),
		 url(../resources/fonts/Tactic-Regular.eot) format('eot');
	font-weight: normal;
}

/*************************/
/*************************/
/*RESET*/
/*************************/
/*************************/

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: 0;
	text-decoration: none;
	font-weight: 100;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html, body {
	background: rgb(219, 210, 202);
	font-size: 16px;
}

body {
	min-height: 100%;
}

h1, h2, h3, h4, h5, h6, a, p, span {
	font-size: 1em;
	line-height: 1em;
}

/*************************/
/*************************/
/*GLOBAL*/
/*************************/
/*************************/

.page-not-found {
	font-family: Tactic;
}

.flex-container-row {
	display: flex;
	flex-flow: row;
	margin-left: -2px;
	width: calc(100% + 2px);
}

.column {
	flex: 1 1 auto;
	width: 50%;
	border-left: solid 2px black
}

.v-center {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
}

.h-center {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/*************************/
/*************************/
/*HOME MENU BAR*/
/*************************/
/*************************/

#home-menu {
	font-size: 3em;
	position: fixed;
	z-index: 10;
	width: 100%;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: space-around;
	padding: 20px;
}

#home-menu a{
	width: 10%;
	text-align: center;
	color: black;
}

/*************************/
/*************************/
/*MENU BAR*/
/*************************/
/*************************/

#menu {
	position: fixed;
	z-index: 90;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	padding: 3px;
	border-bottom: solid black 2px;
	background: white;
	transform: translate3d(0, 0%, 0);
	-o-transform: translate3d(0, 0%, 0);
	-moz-transform: translate3d(0, 0%, 0);
	-webkit-transform: translate3d(0, 0%, 0);
	transition: transform 0.3s ease-in-out;
	-o-transition: transform 0.3s ease-in-out;
	-moz-transition: transform 0.3s ease-in-out;
	-webkit-transition: transform 0.3s ease-in-out;
}

.hidden {
	transform: translate3d(0, -100%, 0) !important;
	-o-transform: translate3d(0, -100%, 0) !important;
	-moz-transform: translate3d(0, -100%, 0) !important;
	-webkit-transform: translate3d(0, -100%, 0) !important;
}

/*#menu .menu-icon {
	width: 50px;
	height: 100%;
	padding: 7px;
	display: none;
	flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

#menu .menu-icon .bar {
	width: 100%;
	height:2px;
	background: black;
}*/

#menu .title {
	display: inline-block;
	height: 100%;
	cursor: pointer;
}

#menu .title img{
	height: 100%;
}

#menu .cross {
	display: inline-block;
	position: relative;
}

#menu .close {
	display: none;
	cursor: pointer;
	float: right;
	width: calc(50px - 6px);
	height: calc(50px - 6px);
}

#menu.menu-active .close {
	display: initial;
}

#menu .cross::before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	content: '';
	width: 100%;
	border-bottom: solid 2px black;
}

#menu .cross::after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	content: '';
	width: 100%;
	border-bottom: solid 2px black;
}

/*************************/
/*************************/
/*SIDE MENU*/
/*************************/
/*************************/

#side-menu {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex-wrap: wrap;
	overflow: hidden;

	z-index: 100;
	position: fixed;
	top: 50px;
	left: -50%;
	width: 50%;
	height: calc(100vh - 50px);
	transform: translate3d(0%, 0, 0);
	-o-transform: translate3d(0%, 0, 0);
	-moz-transform: translate3d(0%, 0, 0);
	-webkit-transform: translate3d(0%, 0, 0);
	transition: transform 0.3s ease-in-out, top 0.3s ease-in-out, left 0.3s ease-in-out;
	-o-transition: transform 0.3s ease-in-out, top 0.3s ease-in-out, left 0.3s ease-in-out;
	-moz-transition: transform 0.3s ease-in-out, top 0.3s ease-in-out, left 0.3s ease-in-out;
	-webkit-transition: transform 0.3s ease-in-out, top 0.3s ease-in-out, left 0.3s ease-in-out;
	border-right: solid black 2px;
}

#side-menu .languages a {
	color: white;
}

#side-menu.full {
	top: 0 !important;
	height: 100vh !important;
}

.eddy {
	font-family: Eddy;
}

.tactic {
	font-family: Tactic;
}

.column-1 {
	columns: 1;
}

.column-2 {
	columns: 2;
}

.column-3 {
	columns: 3;
}

.default-mode {
	background: grey;
	color: grey;
}

.articles-mode {
	background: #ff5f3d;
	color: #ff5f3d;
}

.videos-mode {
	background: #0043FD;
	color: #0043FD;
}

.musics-mode {
	background: #8931F2;
	color: #8931F2;
}

.calendar-mode {
	background: #00bdb5;
	color: #00bdb5;
}

.e-shop-mode {
	background: #FB9B12;
	color: #FB9B12;
}

.about-mode {
	background: #ffd26b;
	color: #ffd26b;
}

.contact-mode {
	background: #FB9B12;
	color: #FB9B12;
}

.blue-color {
	color: #0043FD;
}

.blue-background {
	background: #0043FD;
}

.red-background {
	background: #ff5f3d;
}

.red-color {
	color: #ff5f3d;
}

.purple-background {
	background: #400426;
}

.purple-color {
	color: #400426;
}

.white-color {
	color: white;
}

.black-color {
	color: black;
}

.image{
	width: 100%;
	height: 100%;
	filter: grayscale(100%);
	mix-blend-mode: multiply;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.image:hover{
	filter: grayscale(0%);
	mix-blend-mode: normal;
}

/*************************/
/*************************/
/*SIDE MENU*/
/*************************/
/*************************/


#side-menu .languages {
	font-family: Tactic;
	position: relative;
	color: white;
	flex: 0.05 1 auto;
	width: 100%;
	text-align: center;
	padding: 10px;
}

#side-menu .languages .lang {
	display: inline-block;
}

#side-menu .languages .slash {
	display: inline-block;
}

#side-menu .sections{
	font-family: Eddy;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
	flex-wrap: wrap;
	padding-bottom: 20px;
}

#side-menu .sections .section{
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	color: black;
	font-size: 7vw;
}

.show-menu {
	transform: translate3d(100%, 0, 0) !important;
}

/*************************/
/*************************/
/*WRAPPER GLOBAL*/
/*************************/
/*************************/

#wrapper {
	width: 100%;
	height: 100%;
	padding: 50px 0 0 0;
	opacity: 1;
	transition: opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
	-webkit-transition: opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.hidden-wrapper {
	opacity: 0 !important;
}

#wrapper.full{
	padding: 0;
}

#wrapper #o-palma {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	fill: rgb(32, 2, 36);
}

/*************************/
/*************************/
/*LIST*/
/*************************/
/*************************/

.list .month{
	position: relative;
	padding: 8vw 0 8vw 0;
}

.list .month h1 {
	font-size: 15vw;
	color: white;
	margin: 0;
	text-align: center;
}

.list .list-item{
	position: relative;
	display: block;
	padding: 15vh 15vw 15vh 15vw;
	text-align: center;
}

.list .list-item .title{
	color: black;
	position: relative;
}

.list .list-item .title .banner-container {
	z-index: 10;
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 30vw;
	height: 30vw;
	overflow: hidden;
}

.list .list-item .title:hover .banner-container {
	opacity: 1;
}

.list .list-item .title .banner-container .image-banner {
	width: 100%;
	height: 100%;
	mix-blend-mode: multiply;
	filter: grayscale(100%);
	background-size: cover;
	background-position: 50% 50%;
}

/*************************/
/*************************/
/*CREDITS*/
/*************************/
/*************************/

.credits {
	font-family: Tactic;
	width: 100%;
	font-size: 1.3em;
	padding: 0.9em;
}

.credits .credit{
	display: inline-block;
	background: transparent;
}

.credits .credit:not(:last-child){
	margin-right: 0.4em;
}

.credits .autor{
	color: white;
}

/*************************/
/*************************/
/*SECTION*/
/*************************/
/*************************/

#sections-container {
	font-family: Eddy;
	display: flex;
	flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    height: calc(100vh - 50px);
    padding: 80px 0 80px 0;
}

#sections-container .section {
	position: relative;
	width: 100%;
	height: 10%;
	flex: 1 1 auto;
	color: black;
}

#sections-container .section:hover {
	text-decoration: underline;
	color: black !important;
}

@media (max-width: 1000px) {

	#side-menu {
		z-index: 100;
		position: fixed;
		top: 50px;
		left: -100vw;
		width: 100vw;
		height: calc(100vh - 50px);
		transform: translate3d(0%, 0, 0);
		transition: transform 0.3s ease-in-out, height 0.3s ease-in-out, top 0.3s ease-in-out;
		border-right: none;
	}

	#side-menu .sections{
		padding: 30px 0 60px 0;
	}

	#side-menu .sections .section{
		font-size: 11vw;
	}

	.list .month {
		padding: 10vw 0 10vw 0;
	}

	.list .list-item{
		padding: 10vh 5vw 10vh 5vw;
	}

	.list .list-item .title{
		font-size: 10vw !important;
	}

	.list .list-item .title .banner-container {
		width: 40vw;
		height: 40vw;
	}

	.credits {
		font-size: 1em;
	}

}