@import url('https://fonts.googleapis.com/css?family=Nunito:200,200i,400,400i,700,700i,900,900i');

@font-face {
	font-family: 'icons';
	src: url('../fonts/icons.eot');
	src: url('../fonts/icons.eot?#iefix') format('embedded-opentype'),
	url('../fonts/icons.woff') format('woff'),
	url('../fonts/icons.ttf') format('truetype'),
	url('../fonts/icons.svg#pt_sans_narrowregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

html, body{
	margin: 0;
	padding: 0 !important;
	max-width: 100%;
	height: auto;
	overflow-x: hidden;
	background-color: #000;
	z-index: -2;

	font-family: 'Nunito', sans-serif;
	color: #333;
	font-size: 62.5%;
}

main{
	display: block;
}

pre{
	font-size: 12px;
}

.logo{
	background-image: url("../images/logo.svg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.wrap{
	width: 90%;
	max-width: 1280px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0 auto;
}

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

.vert-center{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.vert-center-mob{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.vert-center-desk{
	position: relative;
	transform: none;
}

#middle{
	background: #efefef;
	box-sizing: border-box;
	font-size: 1.2rem;
	min-height: 200px;
}

/*#middle,*/
#container,
article{
	box-sizing: border-box;
	padding-top: 4rem;
    padding-bottom: 3rem;
}


::-webkit-scrollbar { width: 10px; padding: 5px }
::-webkit-scrollbar-track { background: #f1f1f1; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: #999; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--main-color); -webkit-box-shadow: 0 0 6px rgba(0,0,0,.3);}

/*					*/
/*					*/
/*		TEXT		*/
/*					*/
/*					*/

#css-test{
	margin-left: 0;
	background-color: #eee;
}

pre{
	font-size: 13px;
	color: #aaa;
}

h1, h2, h3, h4, h5, h6{
	font-weight: 700;
	letter-spacing: .05rem;
	text-transform: uppercase;
	margin: .5rem 0;
}

h1{
	font-size: 2.4rem;
	font-weight: 900;
	letter-spacing: .1rem;
	line-height: 2.4rem;
	margin: 0 0;
}

h2{	font-size: 2.4rem; }
h3{ font-size:	2rem; color: #666;}
h4{ font-size: 1.4rem; }
h5{ font-size: 1rem; font-weight: 900}
h6{ font-size: 1.2rem; }

p{
	font-weight: normal;
	font-size: 2rem;
	line-height: 3rem;
	margin-top: 0;
	margin-bottom: 1.5rem;
}

h3 a:hover{ color: #999;}

h4 + p{
	font-size: 1.6rem;
	line-height: 2.4rem;
}

h5 + p{
	font-size: 1.4rem;
	line-height: 2.2rem;

}

h6 + p{
	font-size: 1.2rem;
	line-height: 2rem;	
}

blockquote{
	margin: 10px 20px 10px 40px;
}

blockquote, blockquote p{
	font-size: 1.4rem;
	line-height: 1.8rem;
}

ul, ol{
	padding-left: 10px;
	margin-bottom: 20px;
}

ul li, ol li, li{
	list-style-position: inside;
	font-size: 1.4rem;
	line-height: 2.2rem;
}

a{
	text-decoration: none;
	text-decoration-color: unset;
	color: #666;
}

.bold{
	font-weight: 900;
}

img{
	vertical-align: middle;
}

/*							*/
/*							*/
/*		TABLE ELEMENTS		*/
/*							*/
/*							*/

table{
	font-size: 1.4rem;
	line-height: 2.2rem;
	border-spacing: 5px;
}

tr{
	border-bottom: 20px solid transparent;
}

th, td{
	border-right: 20px solid transparent;
	vertical-align: top;
	text-align: left;
}

caption{
	vertical-align: top;
	text-align: left;
	font-weight: 900;
}

/*					*/
/*					*/
/*	IMG ELEMENTS	*/
/*					*/
/*					*/

img{
	width: 100%;
}

figure{
	box-sizing: border-box;
	width: 100%;	
	padding: 1rem;
	/* background: rgba(0,0,0,.5); */
	margin: 4rem 0;
}

figcaption{
	font-size: 1.2rem;
	line-height: 2rem;
	margin-top: 10px;
	color: white;
}


.mob-show-only{ display: block; }
.desktop-show-only{ display: none; }

nav{
	position: fixed;
	width: 100%;
	height: 40px;
	background-color: var(--main-color);
	font-size: 18px;

	z-index: 999;
}

nav a{
	color: white;
}

nav .logo{
	position: absolute;
	top: 5px;
	left: 7.5px;
	width: 75px;
	height: 75px;
	background-size: contain;
	background-color: var(--main-color);
	border-radius: 50%;

	-webkit-transition:	all .5s ease-in-out;
	-moz-transition:	all .5s ease-in-out;
	-ms-transition:		all .5s ease-in-out;
	-o-transition:		all .5s ease-in-out;
	transition:			all .5s ease-in-out;

	z-index: 99;
}

nav.scrolled .logo{
	width: 75px;
	height: 75px;
	top: 5px;
}

nav .wrap{ 
	height: 100%;
}

nav .nav-flex{
    display: flex;
	flex-direction: row;
	justify-content: flex-end;
    align-items: center;
    height: 100%;
}

nav .nav-search{
	position: relative;
	min-width: 450px;
	height: 30px;
	padding: 0 45px 0 5px;
	border-right: 2px solid rgba(255,255,255,.3);
	margin: 0 5px;
}

nav form{
	float: right;
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: 30px;
	height: 30px;
	border: none;
	border-radius: 25px;
	outline: none;
	padding: 5px 0px;
	background-color: black;
	color: white;

	display: inline-flex;
	flex-direction: row;
	justify-content: stretch;
	align-items: center;

	-webkit-transition:	max-width .3s ease-in-out;
	-moz-transition:	max-width .3s ease-in-out;
	-ms-transition:		max-width .3s ease-in-out;
	-o-transition:		max-width .3s ease-in-out;
	transition:			max-width .3s ease-in-out;
}

nav form > *{
	pointer-events: none;
	opacity: 0;

	-webkit-transition:	opacity .1s ease-in-out .2s;
	-moz-transition:	opacity .1s ease-in-out .2s;
	-ms-transition:		opacity .1s ease-in-out .2s;
	-o-transition:		opacity .1s ease-in-out .2s;
	transition:			opacity .1s ease-in-out .2s;
}
nav form > *.icon{
	pointer-events: all;
	opacity: 1;
	cursor: pointer;
}

nav form.is-focus{
	max-width: 450px;
	overflow: unset;
}
nav form.is-focus > *{
	pointer-events: all;
	opacity: 1;
}

nav form select {
	/* flex-grow: 1; */
	/* max-width: 0; */
	flex-shrink: 0;
	-webkit-user-select: none;
	-moz-user-select: -moz-none;
	-ms-user-select: none;
	user-select: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-indent: 1px;
	text-overflow: '';
	box-sizing: border-box;
	padding: 0 10px;
	border: none;
	outline: none;
	background-color: transparent !important;
	background-image: url("../images/down-arrow.svg");
	background-position: 95% center;
	background-size: 10% 50%;
	background-repeat: no-repeat;
	color: white;
	font-size: 1.5rem;
	font-family: 'Nunito', sans-serif;
}

form select{
	z-index: 10;
}

/* nav form.is-focus select {
	max-width: 200px;
	padding: 0 10px;
} */

nav form select option{
	background-color: black;
}

nav form .form-separator{
	box-sizing: border-box;
	display: block;
	width: 1px;
	height: 75%;
	flex-shrink: 0;
	margin: 0 5px;
	border-left: 1px solid #666;
}

nav form .autocomplete-wrapper{float: right; width: 100%; }

nav input[type=search]{
	box-sizing: border-box;
	float: right;
	/* width: 0; */
	width: 100%;
	height: 30px;
	padding: 0 20px 0 10px;
	border: none;
	border-radius: 25px;
	outline: none;
	/* background-color: rgba(0,0,0,1); */
	background-color: transparent;
	color: white;
	font-family: 'Nunito', sans-serif;
	font-size: 1.5rem;
	-moz-appearance:textfield;
	-webkit-appearance: textfield;
	z-index: 5;

	-webkit-transition:	all .3s ease-in-out;
	-moz-transition:	all .3s ease-in-out;
	-ms-transition:		all .3s ease-in-out;
	-o-transition:		all .3s ease-in-out;
	transition:			all .3s ease-in-out;
}

/* clears the 'X' from Internet Explorer */
input[type=search]::-ms-clear {  display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal {  display: none; width : 0; height: 0; }

/* clears the 'X' from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

/* nav input[type=search]:focus, */
nav .is-focus input[type=search] {
	width: 100%;
	cursor: pointer;
}

nav span.icon{
	position: absolute;
	/* top: -1px; */
	right: 0;
	height: 30px;
	width: 30px;
	border-radius: 50%;
	/* background: transparent; */
	background: black;
	color: white;
	font-size: 1rem;
	/* pointer-events: none; */
	z-index: 11;
}

nav span.icon:after{
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	top: -1px;
	right: 0;
	font-family: 'icons';
	font-size: 1.8rem;
	line-height: 3rem;
	font-weight: lighter;
	content: '\E811';
}

a.btn-logout{
	display: inline-block;
	text-transform: uppercase;
	font-size: 1rem;
	line-height: 1rem;
	background: #fff;
	opacity: .9;
	padding: 4px 6px 3px 6px;
	margin-left: 8px;

	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
a.btn-logout:hover{
	opacity: 1;
}

.autocomplete-wrapper{
	z-index: 5;
}

.autocomplete-result{
	box-sizing: border-box;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
	z-index: -1 !important;
}

.autocomplete-result .list-result-item:first-child{
	overflow: visible !important;
}

.autocomplete-result .list-result-item:first-child:before,
.autocomplete-result .list-result-item:first-child:after{
	content: '';
	display: block;
	position: absolute;
	bottom: 100%;
	width: 15px;
	height: 16px;
	background-color: black;
	z-index: -1;
}

.autocomplete-result .list-result-item:first-child:before{ left: 0; }
.autocomplete-result .list-result-item:first-child:after{ right: 0; }

.autocomplete-result .list-result-item:last-child{
	overflow: hidden;
	border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

.autocomplete-result {	top: 30px; }
.nav-drop .autocomplete-result { top: 40px; }
.halftone-container .autocomplete-result {	top: 50px; }

.autocomplete-result .list-result-item, .halftone-container .autocomplete-result{
	display: flex;
	flex-wrap: nowrap;
	box-sizing: border-box;
	width: 100%;
	padding: 6px 10px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	font-size: 13px;
	white-space: nowrap;
}

.halftone-container .autocomplete-result{
	padding: 0;
	border-bottom: none;
}

.autocomplete-result .search-selected, .autocomplete-result .list-result-item:hover{
	background-color: rgba(255, 255, 255, .15);
}

.autocomplete-result .string{
	display: inline-block;
	flex-basis: 80%;
	flex-grow: 1;
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;
}
.autocomplete-result .string .content_total{
	display: inline-block;
	vertical-align: top;
	text-align: center;
	min-width: 10px;
	margin-bottom: 2px;
	color: #fff;
	background-color: #333;
	font-weight: bold;
	font-size: 9px;
	margin-left: 8px;
    padding: 2px 4px 1px 4px;
	border-radius: 50px;
}

.autocomplete-result .content_type, .autocomplete-group .autocomplete-result .content_type{
	position: static;
	align-self: flex-end;
	flex-grow: 1;
	padding-left: 5px;
	text-align: right;
	text-transform: uppercase;
	font-size: 10px;
}

.autocomplete-result .list-result-item:last-child{
	border-bottom: none;
}

nav .wrap .adv-search-toggle{
	position: absolute;
	right: 10px;
	top: 0;
	width: 26px;
	height: 26px;
	padding: 0;
	border-radius: 50%;
	border: white 2px solid !important;
	margin: 0 0 0 10px;
	text-align: center;
	cursor: pointer;
}

nav .adv-search-toggle:after{
	font-family: 'icons';
	content: '\E854';
	font-size: 2.6rem;
	line-height: 2.6rem;
	font-weight: lighter;
	color: white;
}

nav .adv-search-toggle.expanded:after{
	content: '\E841';
	font-size: 2rem;
	line-height: 2.75rem;
}

nav .nav-user{
	height: 30px;
	line-height: 30px;
	padding: 0 15px 0 5px;
	border-right: 2px solid rgba(255,255,255,.3);
	margin: 0 5px;
	font-size: 1.6rem;
}

.hamburger {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 2px;
	margin-left: 5px;
	outline: 0;
	z-index: 9999;
}

.hamburger-box {
	width: 26px;
height: 20px;
}

.hamburger-text{
	left: 0;
	font-size: 1.6rem;
	color: white;
}

.hamburger-box:last-child{
	margin-left: 10px;
}

.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before{
	width: 25px;
	height: 3px;
	border-radius: 3px;
	background-color: white;
}

.hamburger-inner:before{
	top: -7px;
}

.hamburger-inner:after{
	bottom: -7px;
}

.nav-drop{
	box-sizing: border-box;
	display: flex;
	align-self: flex-start;
	justify-content: flex-start;
	flex-direction: column;
	flex-wrap: nowrap;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	/* height: 100vh; */
	height: calc(100vh - 43px);
	padding: 100px 20px 20px 20px;
	margin: 0;
	overflow: auto;
	text-transform: lowercase;
	background-color: var(--main-color);
	transform: translateY(-100%);

	-webkit-transition:	transform .3s ease-in-out;
	-moz-transition:	transform .3s ease-in-out;
	-ms-transition:		transform .3s ease-in-out;
	-o-transition:		transform .3s ease-in-out;
	transition:			transform .3s ease-in-out;

	z-index: -1;
}

.nav-drop.expanded{
	transform: translateY(0);
}

nav .nav-drop form{
	min-width: unset;
	max-width: unset;
	width: 100%;
	height: unset;
	padding-left: 10px;
}

nav .nav-drop form > *{
	opacity: 1;
	pointer-events: all;
}

nav .nav-drop form .form-separator{ height: 25px; }

nav .nav-drop form .autocomplete-wrapper{ width: 100%; }

nav .nav-drop form input{
	width: 100%;
	height: 40px;
}

nav .nav-drop form span.icon{
	width: 40px;
	height: 40px;
}

nav .nav-drop form span.icon:after{
	line-height: 4rem;
}

.nav-drop ul{
	padding: 0;
}

.nav-drop ul li{
	display: inline-block;
	width: 100%;
	height: 30px;
	line-height: 30px;
	margin: 10px 0 10px 0;
	margin: 5px 0;
	padding: 0;
}

.nav-drop ul li:nth-child(3){
	padding-bottom: 10px;
	border-bottom: 2px solid rgba(255, 255, 255, .7);
	margin-bottom: 10px;
}

.nav-drop ul a{
	font-size: 25px;
}

.switch-lang-ext{
	flex-grow: 1;
}

.log-in-out{
	font-size: 25px;
	margin-bottom: 20px;
}

.log-in-out a:first-child{
	display: block;
}

.log-in-out a.btn-logout{
	box-sizing: border-box;
	font-size: 18px;
	margin-left: 0;
	margin-top: 10px;
	line-height: unset;
}

.switch-lang{
	font-size: 25px;
	color: white;
	padding-bottom: 20px;
}

.switch-lang a:first-child{
	margin-right: 2px;
}

/*					*/
/*					*/
/*	HOME HALFTONE	*/
/*					*/
/*					*/


.halftone-container {
	position: relative;
	width: 100%;
	height: 100px;
	-webkit-transition:	all .25s ease-in-out;
	-moz-transition:	all .25s ease-in-out;
	-ms-transition:		all .25s ease-in-out;
	-o-transition:		all .25s ease-in-out;
	transition:			all .25s ease-in-out;

}

.home.halftone-container{
	height: 90%;
	min-height: 55vh; 
	z-index: 99;
}

.color-bg{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--main-color);
	animation: .5s animation-color-bg cubic-bezier(0.25, 0, 0.4, 1);
}

.halftone {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	mix-blend-mode: multiply;
	background: white;
	overflow: hidden;
}

.home .halftone{
	filter: grayscale(1) contrast(1200%);
}

.halftone .img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	background-image: var(--main-img);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.home .halftone .img{
	top: -5%;
    left: -5%;
    right: -5%;
    bottom: -5%;
}

.home .halftone > * {
	filter: grayscale(1) brightness(0.5) blur(4px);
	animation: 2s animation-filter ease;
}

.home .halftone::after {
	content: '';
	position: absolute;
	top: -200%;
	left: -50%;
	right: -50%;
	bottom: -200%;
	background-blend-mode: multiply;
	background: radial-gradient(9px 9px, black, white);
	background-size: 8px 8px;
	background-position: 0 -3px;
	mix-blend-mode: screen;
	pointer-events: none;
	transform: rotate(30deg);

	-webkit-transition:	transform 1s ease-in-out;
	-moz-transition: transform 1s ease-in-out;
	-ms-transition: transform 1s ease-in-out;
	-o-transition: transform 1s ease-in-out;
	transition: transform 1s ease-in-out;

	z-index: 1;
}

@keyframes animation-filter {
	0% {
		filter: brightness(0) blur(15px);
	}

	100% {
		filter: brightness(0.5) blur(4px);
	}
}

@keyframes animation-color-bg {
	0% {
		background-color: black;
	}

	100% {
		background-color: var(--main-color);
	}
}

.halftone-container .logo{
	border-radius: 50%;
	background-color:var(--main-color);
	background-image: url("../images/logo.svg");
	position: absolute;
	top: 10px;
	left: 10px;
	width: 20vmin;
	height: 0;
	padding-bottom: 20vmin;

	-webkit-transition:	all .5s ease-in-out;
	-moz-transition:	all .5s ease-in-out;
	-ms-transition:		all .5s ease-in-out;
	-o-transition:		all .5s ease-in-out;
	transition:			all .5s ease-in-out;

	z-index: 9999;
}

.halftone-container .home-search {
	box-sizing: border-box;
	display: inline-block;
	position: absolute;
	bottom: 10%;
	left: 0;
	right: 0;
	width: 95%;
	margin: 0 auto;
}

.halftone-container form {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	margin-bottom: 10px;
	border: none;
	border-radius: 25px;
	outline: none;
	padding: 5px 20px;
	background-color: black;
	color: white;
	font-family: inherit;
	font-size: 2rem;

	display: flex;
	flex-direction: row;
	justify-content: stretch;
	align-items: center;
}

.halftone-container .autocomplete-result .list-result-item:first-child:before,
.halftone-container .autocomplete-result .list-result-item:first-child:after{
	width: 23px;
	height: 23px;
}

.halftone-container form div.row .autocomplete-wrapper{
	width: 100%;
	/* padding-left: 10px; */
}

.halftone-container form .autocomplete-wrapper{
	flex-grow: 1;
	flex-shrink: 0;
}

.halftone-container form input[type=search] {
	-moz-appearance:textfield;
	-webkit-appearance: textfield;
	width: 100%;
	border: none;
	outline: none;
	padding: 5px;
	background-color: black;
	color: white;
	font-family: inherit;
	font-size: 1.5rem;
}

.halftone-container input[type=search]::-webkit-search-cancel-button{
	display: none;	
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: white;
	opacity: .5; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: white;
	opacity: .5;
}

::-ms-input-placeholder { /* Microsoft Edge */
	color: white;
	opacity: .5;
}

.halftone-container form select {
	/* flex-grow: 1; */
	flex-shrink: 0;
	-webkit-user-select: none;
	-moz-user-select: -moz-none;
	-ms-user-select: none;
	user-select: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-indent: 1px;
	text-overflow: '';
	padding-right: 20px;
	border: none;
	outline: none;
	background-color: transparent !important;
	/* background-color: var(--main-color); */
	background-image: url("../images/down-arrow.svg");
	background-position: 95% center;
	background-size: 10% 50%;
	background-repeat: no-repeat;
	color: white;
	font-size: 1.5rem;
	font-family: 'Nunito', sans-serif;
}

.halftone-container select::-ms-expand{
	display: none;
}

.halftone-container form select option{
	background-color: black;
}

.halftone-container .form-separator{
	box-sizing: border-box;
	display: block;
	width: 1px;
	height: 50%;
	flex-shrink: 0;
	margin: 0 5px;
	border-left: 1px solid #666;
}

.halftone-container .adv-search-toggle{
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	border: none;
	border-radius: 25px;
	padding: 5px 20px 5px 20px;
	background-color: var(--main-color);
	color: white;
	font-size: 1.5rem;
	line-height: 4rem;
	font-family: 'Nunito', sans-serif;
	cursor: pointer;
}
.halftone-container .adv-search-toggle:before{
	content: '+';
	margin-right: 1rem;
	color: white;
	font-size: 1.5rem;
	line-height: 4rem;
}

.halftone-container .adv-search-toggle.expanded:before{
	content: '-';
}

/*  ------  ADVANCED SEARCH  ------  */

	.adv-search-close{
		position: fixed;
		top: 0;
		right: 0;
		margin: .5em .75em;
		outline: 0;
		border: 0;
		background: transparent;
		font-size: 4.5em;
		color: #ffffff;
		cursor: pointer;
	}

			.adv-search{
				position: fixed;
				inset: 0 0 0 0;
				z-index: 9999;
				transition: all .4s ease-in-out;
				background-color: rgba(0,0,0,.95);
				overflow-y: auto;
				justify-content: center;
				
				display: none;
			}
			
			body.advSearch .adv-search{
				display: flex;
			}

			.adv-search ::placeholder { color: var(--main-color); }
			.adv-search :-ms-input-placeholder { color: var(--main-color); }
			.adv-search ::-ms-input-placeholder { color: var(--main-color); }
			.adv-search form select { color: var(--main-color); }
			
			.adv-search-wrap{
				width: 90%;
				max-width: 600px;
				padding: 10vh 0;
			}

			.adv-search h5{
				font-size: 3.5em;
				color: var(--main-color);
				text-align: center;
				margin-bottom: 2em;
			}

			.adv-search-field{
				position: relative;
			}

			.adv-search-field{
				box-sizing: border-box;
				width: 100%;
				height: 5em;
				margin: .75em 0;
				border-radius: 25px;
				border: 1px solid rgba(255,255,255,.25);
				outline: none;
				padding: 0 20px;
				background-color: black;
				color: white;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;
			}
			.adv-search-label{
				flex-shrink: 0;
				padding-right: 1rem;
				font-size: 1.1rem;	
				text-transform: uppercase;
				font-weight: bold;
			}
			.adv-search form input[type='search']{
				flex-grow: 1;
				min-width: 0;
				border: none;
				outline: none;
				-moz-appearance:textfield;
				-webkit-appearance: textfield;
				background-color: transparent;
				color: white;
				font-family: 'Nunito', sans-serif;
				font-size: 1.5rem;
			}
			a.adv-search-field-clear{
				display: inline-block;
				padding-left: 10px;
				background-color: transparent;
				color: #fff;
				vertical-align: middle;
				text-align: center;
				font-size: 21px;
				line-height: 36px;
				opacity: .5;
			}

						.adv-search-check{
							display: none;
						}

						.adv-search-check + label::before{
							display: inline-block;
							content: " ";
							box-sizing: border-box;
							width: 3em;
							height: 3em;
							margin: 10px 10px 10px 0;
							border: 1px solid rgba(255,255,255,.25);
							border-radius: 25px;
							background-color: black;
							vertical-align: middle;
							cursor: pointer;
						}

						.adv-search-check:checked + label::before{
							background-image: url('../images/search-close.svg');
							background-size: contain;
							background-position: center;
							background-repeat: no-repeat;
						}
						.adv-search-check + label span{
							color: #fff;
							font-weight: normal;
							font-size: 1.1em;
							vertical-align: middle;
						}


			a.adv-search-field-clear:hover{
				opacity: 1;
			}

			.adv-search ::placeholder { color: var(--main-color); opacity: 1; }
			.adv-search :-ms-input-placeholder { color: var(--main-color); }
			.adv-search ::-ms-input-placeholder { color: var(--main-color); }

			.adv-search form select {
				-webkit-user-select: none;
				-moz-user-select: -moz-none;
				-ms-user-select: none;
				user-select: none;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				text-indent: 1px;
				text-overflow: '';
				width: 100%;
				height: 40px;
				border: none;
				border-radius: 25px;
				padding: 5px 20px 5px 20px;
				margin: 10px 0;
				outline: none;
				background-color: black;
				background-image: url("../images/down-arrow.svg");
				background-position: 95% center;
				background-size: 10% 50%;
				background-repeat: no-repeat;
				color: var(--main-color);
				font-size: 1.5rem;
			}

			.adv-search-submit {
				box-sizing: border-box;
				height: 40px;
				border: 2px solid var(--main-color);
				color: var(--main-color);
				border-radius: 25px;
				padding: 0.5em 4em;
				max-width: 100%;
				margin: 10px 0;
				text-align: center;
				text-transform: uppercase;
				letter-spacing: 2px;
				outline: none;
				cursor: pointer;
				background-color: transparent;
				font-size: 1.5rem;
				font-weight: bold;
				transition: all .3s ease;
				margin-top: 2em;
				margin-bottom: 5em;
			}

			.adv-search-submit:hover {
				color: #000;
				background-color:  var(--main-color);
			}

			.adv-search .search-mode{
				list-style-type: none;
				display: flex;
				justify-content: center;
			}

			.adv-search .search-mode li button{
				background: transparent;
				border: 1px solid var(--main-color);
				color: var(--main-color);
				text-transform: uppercase;
				padding: .5em 2.5em;
				font-weight: bold;
				font-family: inherit;
				margin: 0 .75em;
				border-radius: 2em;
				cursor: pointer;
				transition: all .3s ease;
			}

			.adv-search .search-mode li button:hover,
			.adv-search .search-mode li button.active{
				background: var(--main-color);
				color: #000;
			}

			.align-center{
				display: flex;
				justify-content: center;
				width: 100%;
			}

/*	----------------	*/

.download-modal {
	display: flex;
    position: fixed;
    inset: 0 0 0 0;
    z-index: 9999;
    transition: all .4s ease-in-out;
    background-color: rgba(0, 0, 0, .95);
    overflow-y: auto;
    justify-content: center;
    display: none;
}

.download-modal-open .download-modal {
	display: flex;
}

		.download-modal-wrap {
			width: 90%;
			max-width: 600px;
			padding: 10vh 0;
			text-align: center;
		}

		.download-modal h5 {
			font-size: 3.5em;
			color: var(--main-color);
			text-align: center;
			margin-bottom: 2em;
		}

		.download-modal-close{
			position: fixed;
			top: 0;
			right: 0;
			margin: .5em .75em;
			outline: 0;
			border: 0;
			background: transparent;
			font-size: 4.5em;
			color: #ffffff;
			cursor: pointer;
		}

		.download-modal-submit {
			box-sizing: border-box;
			height: 40px;
			border: 2px solid var(--main-color);
			color: var(--main-color);
			border-radius: 25px;
			padding: 0.5em 2em;
			max-width: 100%;
			margin: 10px 0;
			text-align: center;
			text-transform: uppercase;
			letter-spacing: 2px;
			outline: none;
			cursor: pointer;
			background-color: transparent;
			font-size: 1.5rem;
			font-weight: bold;
			transition: all .3s ease;
			margin-top: 2em;
			margin-bottom: 5em;
		}

		.download-modal-submit:hover {
			color: #000;
			background-color:  var(--main-color);
		}

/*						*/
/*						*/
/*		HOME CARDS		*/
/*						*/
/*						*/

.navigation.nav-prev a:before,
.navigation.nav-next a:before{
	font-family: 'icons';
}

.navigation.nav-prev{ left: -1.5em; }
.navigation.nav-prev a:before{
	content: '\E856'
}
.navigation.nav-next{ right: -1.5em; }
.navigation.nav-next a:before{
	content: '\E855'
}

.home .row > h1{
	margin-top: 30px;
	font-size: 2rem;
	font-weight: 500;
	letter-spacing: -.2px;
}
.home .row > h1 a{
	font-weight: 500;
	color: #555;
}
#explore h1{
	z-index: 10;
	color: #666;
}

.home + main.wrap .siema{
	/*width: 100vw;*/
}

.home main.wrap .row > div{
	margin-top: 10px;
}

.button{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 100%;
	border: none;
	outline: none;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	font-family: "icons";
	font-size: 3rem;
	color: white;
	text-align: center;
}

.prev:after{
	content: '\E856';

}

.next:after{
	content: '\E855';
}

.article-card{
	box-sizing: border-box;
	width: 100%;
	padding-right: 20px;
	color: white;
	font-size: 1.3rem;
	line-height: 0;
	transition: all .2s ease-in-out;

	-webkit-transition:	all .2s ease-in-out;
	-moz-transition:	all .2s ease-in-out;
	-ms-transition:		all .2s ease-in-out;
	-o-transition:		all .2s ease-in-out;
	transition:			all .2s ease-in-out;

}

.article-card-img{
	position: relative;
	box-sizing: border-box;
	display: inline-block;
	width: 100%;
	height: 0;
	padding-bottom: 65%;
}

.article-card-img img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.article-card-bg{
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 0;
	padding-bottom: 60%;
	background-color: #222;
}

.article-card-txt{
	position: absolute;
	box-sizing: border-box;
	bottom: 0;
	left: 0;
	width: 100%;
	min-height: 100%;
	height: auto;
	max-height: 100%;
	padding: 5% 10% 6% 7.5%;
	line-height: 1rem;
	background-color: #222;

	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;

	transition: max-height .5s ease-in-out;
}

.flex-grow-spacer{
	flex-grow: 1;
}

.article-card:hover .article-card-txt{
	max-height: 200%;
}

@media all and (max-width: 899px){
	.article-card-txt{
		max-height: 200%;
	}
}

.article-card-txt a{
	display: inline-flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
}

.article-card-txt time{
	padding-top: 3px;
}

.article-card-txt h2{
	font-size: 1.6rem;
	line-height: 2rem;
	letter-spacing: .15rem;
	max-height: 65%;
	margin: 0;
	margin-top: .5rem;
	overflow-y: hidden;
	color: white;
	font-family: "Nunito", sans-serif;
	text-transform: none;
}

.article-card-bg h3{
	display: inline-block;
	width: 100%;
	max-height: 15%;
	padding-top: 14px;
	margin: 10px 0 0 0;
	border-top: 1px solid white;
	font-size: 1.3rem;
	font-weight: 500;
	font-style: italic;
	text-transform: none;
	color: var(--main-color);
}

.view-cards .article-card{
	padding-right: 0;
	margin: 10px 0;
}

.view-cards .article-card-bg{
	padding-bottom: 55%;
}

.colecoes-card-bg{
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	background-color: transparent;
}

.colecoes-card-bg-1{
	position: absolute;
	top: 0;
	left: 0;
	width: 95%;
	height: 95%;
	background-color: #555;

	-webkit-transition:	all .25s ease-in-out;
	-moz-transition:	all .25s ease-in-out;
	-ms-transition:		all .25s ease-in-out;
	-o-transition:		all .25s ease-in-out;
	transition:			all .25s ease-in-out;
}

.colecoes-card-bg-2{
	position: absolute;
	top: 2.5%;
	left: 2.5%;
	width: 95%;
	height: 95%;
	background-color: #888;
}

.colecoes-card-bg-3{
	position: absolute;
	right: 0%;
	bottom: 0%;
	width: 95%;
	height: 95%;
	background-color: #ddd;
	overflow: hidden;

	-webkit-transition:	all .25s ease-in-out;
	-moz-transition:	all .25s ease-in-out;
	-ms-transition:		all .25s ease-in-out;
	-o-transition:		all .25s ease-in-out;
	transition:			all .25s ease-in-out;
}

.colecoes-card-bg-c{
	position: absolute;
	right: 2.5%;
	bottom: 2.5%;
	width: 90%;
	height: 90%;
	border-radius: 50%;
	background-color: rgba(255,255,255,.3);
	font-size: 1.5rem;
	line-height: 1.75rem;

	-webkit-transition:	all .25s ease-in-out;	
	-moz-transition:	all .25s ease-in-out;	
	-ms-transition:		all .25s ease-in-out;	
	-o-transition:		all .25s ease-in-out;	
	transition:			all .25s ease-in-out;	
}

.colecoes-card-bg-info-title{
	position: relative;
	display: block;
	width: 100%;
	height: 50%;
	text-align: center;
	overflow: hidden;
}

.colecoes-card-title{
	display: inline-block;
	position: absolute;
	bottom: 0; 
    width: 85%;
	padding-bottom: 5px;
	transform: translateX(-50%);
	text-align: center;
	font-weight: 700;
	color: #555;
}

.colecoes-card-bg-info-author{
	position: relative;
	display: block;
	width: 100%;
	height: 50%;
	text-align: center;
}

.colecoes-card-author{
	display: inline-block;
	position: absolute;
	width: 70%;
	padding-top: 5px;
	transform: translateX(-50%);
	border-top: 1px solid #555;
	font-size: 1.4rem;
	font-weight: 500;
	font-style: italic;
	text-align: center;
	text-transform: none;
	color: #555;
}
.mobile .colecoes-card-author .count{
	display: none;
}

.colecoes-card-bg .author{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 50%;
	margin: 0;
	padding-top: 10px;
	border-top: 1px solid white;
}

.destaque .colecoes-card-bg-3:after{
	font-family: 'icons';
	content: "\E804";
	display: block;
	position: absolute;
	top: 5px;
	right: 5px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	font-size: 2rem;
	line-height: 2.5rem;
	text-align: center;
}


/*				*/
/*				*/
/*	HOME GRAPH	*/
/*				*/
/*				*/

#explore{
	margin-bottom: 20px;
}

.cb-container {
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cb-title{
	color: white;
	padding-left: 35px;
	font-size: 2rem;
}

/* Hide the browser's default checkbox */
.cb-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.cb-container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.cb-container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.cb-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.cb-container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

#d3container{
	position: relative;
	width: 100%;
	min-height: 550px;
	height: 75vh;
	z-index: 0;
	overflow: hidden;
}


#d3container .controls{
	position: absolute;
	top: 20px; right: 20px;
	display: inline-flex;
	z-index: 10;
}
#d3container .controls button{
	font-size: 18px;
	border: none;
	outline: none;
	background: transparent;
	color: black;
	user-select: none;
	cursor: pointer;
	box-sizing: border-box;
}
#d3container .controls > *:nth-child(n+2){
	margin-left: 10px;
}
#d3container .controls > *{
	padding: 15px 20px;
	opacity: .5;
}
#d3container .controls > *:hover{
	opacity: 1;
	background-color: rgba(255, 255, 255, .2);
}
#d3container .controls > *:before{
	font-family: 'icons';
	font-size: 30px;
	color: white;
}
#zoom_in:before{
	content: '+';
}
#zoom_out:before{
	content: '–';
}

#d3container svg{
	position: relative;
	box-sizing: border-box;
	padding: 10px;
	left: 0;
	right: 0;
	overflow: unset;
}

.color-person{fill: #ee1c25;}
.color-genre{fill: #96c11f;}

.color-person, .color-genre{
	fill: gray;
}
.color-genre{fill: black;}

.opaque{opacity: 1; transition: opacity .5s ease-in-out;}
.less.opaque{opacity: .2;}
.not.opaque{opacity: 0;}

line{
	stroke: #999;
	transition: stroke .5s ease-in-out;
}
line.hidden{opacity: 0 !important;}
line.opaque{opacity: 1; stroke: #999;}
line.less.opaque{opacity: 1; stroke: #222}

#d3container svg foreignObject{
	position: relative;
}
#d3container svg foreignObject div{
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	
	font-family: inherit;
	/*font-family: 'Montserrat', sans-serif;*/
	letter-spacing: .8px;
	text-shadow: 0px 0px 3px rgba(0,0,0,.5), 0px 0px 3px rgba(0,0,0,.5);
	text-transform: uppercase;
	user-select: none;
}

#explore select {
	-webkit-user-select: none;
	-moz-user-select: -moz-none;
	-ms-user-select: none;
	user-select: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-indent: 1px;
	text-overflow: '';
	width: 100%;
	height: 30px;
	margin: 10px 0;
	border: none;
	border-radius: 25px;
	padding: 5px 20px 5px 20px;
	outline: none;
	background-color: var(--main-color);
	background-image: url("../images/down-arrow.svg");
	background-position: 95% center;
	background-size: 10% 50%;
	background-repeat: no-repeat;
	color: white;
	font-size: 1.5rem;
	font-family: inherit;
	/*font-family: 'Nunito', sans-serif;*/
}

#explore select::-ms-expand{
	display: none;
}

/*					*/
/*					*/
/*		SEARCH		*/
/*					*/
/*					*/

.search-item{
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	margin: 10px 0;
	background-color: #ddd;
	overflow: hidden;
}

.search-item.artist{
	border-radius: 50%;
}

.search-item-wrap{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.search-item img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;

	-webkit-transition:	all .25s ease-in-out;
	-moz-transition:	all .25s ease-in-out;
	-ms-transition:		all .25s ease-in-out;
	-o-transition:		all .25s ease-in-out;
	transition:			all .25s ease-in-out;

	opacity: 0;
	z-index: 10;
}

.search-item-value, .search-item-propriety{
	position: relative;
	display: block;
	width: 100%;
	height: 50%;
	text-align: center;
}

.search-item-value div{
	display: inline-block;
	position: absolute;
	bottom: 0;
	width: 80%;
	padding-bottom: 5px;
	transform: translateX(-50%);
	text-align: center;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--main-color);
}

.search-item-propriety div{
	display: inline-block;
	position: absolute;
	width: 80%;
	padding-top: 10px;
	transform: translateX(-50%);
	text-align: center;
	border-top: 1px solid white;
	font-size: 1.4rem;
	font-weight: 500;
	font-style: italic;
	color: #555;
}

/*							*/
/*							*/
/*		SEARCH RESULT		*/
/*							*/
/*							*/

div.shiro-content-items{
    font-size: 1.4rem;
}

div.shiro-content-filter{
	position: relative;
	color: white;
	font-size: 1.5rem;
	line-height: 2.1rem;
	background-color: #333;
	padding: .5em 0;
}

.numbered-pagination{
	font-size: 1.6rem;
	text-align: center;
	margin-bottom: 20px;
}

.pagination-item-current{
	display: inline-block;
	position: relative;
	padding: 2px 5px;
	margin: 0 5px;
	font-weight: bold;
	color: white;
	z-index: 2;
}
.pagination-item-current:before{
	content: '';
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-54%);
	width: 105%;
	height: 0;
	padding-bottom: 105%;
	border-radius: 50%;
	background-color: var(--main-color);
	z-index: -1;
}
.pagination-item, .pagination-separator{ margin: 0 5px;}

/*						*/
/*						*/
/*		ALBUM ITEM		*/
/*						*/
/*						*/

aside .siema{
	position: relative;
	display: inline-block;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
}

aside .album-img-wrap{
	position: relative;
	display: inline-block;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
}

aside .album-img-wrap img{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

aside .vinyl{
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	margin: 0;
}

aside .siema button{
	width: 20px;
	height:20px;
	background-color: transparent;
	border: 1px solid #ccc;
	color: transparent;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
	font-size: 1rem;
	margin-right: 5px;
	transition: background-color .2s ease;
}

aside .siema button.selected{
	background-color: #ccc;
}

.dots {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

.dots__item {
	width: 15px;
	height: 15px;
	margin: 0 .5rem;
	border-radius: 50%;
	border: 1px solid #ccc;
	background-color: transparent;
	outline: 0;
	cursor: pointer;
}

.dots__item--active {
	background-color: #ccc;
}

header .property-label{
	margin: 5px 0;
	font-size: 1.25rem;
	color: #888;
}

header .property-value,
header .property-value a{
	margin: 5px 0;
	font-size: 1.25rem;
	color: #fff;
}

header .property-value a:hover{
	color: #ccc;
}

.tag-name{
	box-sizing: border-box;
	display: inline-block;
	width: auto;
	padding: 2px 10px;
	margin: 0 5px 5px 0;
	font-size: 1.2rem;
	border-radius: 10px;
	color: white;
	background-color: var(--main-color);
}

.tags{
	margin-top: 10px;
}

header .about-name{
	box-sizing: border-box;
	display: inline-block;
	padding: 2px 10px;
	margin: 0 5px 5px 0;
	font-size: 1.2rem;
	background-color: #000;
	border-radius: 10px;
	border: 1px solid var(--main-color);
	color: var(--main-color);
}

#middle .about-name{
	box-sizing: border-box;
	display: inline-block;
	padding: 1px 8px;
	margin: 0 5px 5px 0;
	font-size: 1.2rem;
	border: 1px solid var(--main-color2);
	border-radius: 10px;
	color: var(--main-color2);
	text-transform: lowercase;
	font-weight: bold;
}

#middle .about-name:hover{
	box-sizing: border-box;
	display: inline-block;
	width: auto;
	padding: 1px 8px;
	margin: 0 5px 5px 0;
	font-size: 1.2rem;
	background-color: var(--main-color);
	border: 1px solid var(--main-color);
	border-radius: 10px;
	color: #fff;
	text-transform: lowercase;
}

.side-label{
	width: 100%;
	margin: 10px 0;
	background-color: transparent;
}

.side-label img{
	display: block;
	margin: 0 auto;
}

.tracklist-label .side-letter{
	padding-left: 0;
}



/*						*/
/*						*/
/*	 ALBUM LIST CARD	*/
/*						*/
/*						*/

.album-card{
	
	box-sizing: border-box;
	width: 100%;
	padding-right: 10px;
	margin: 10px 0;
	color: white;
	font-size: 1.3rem;
	line-height: 0;
	transition: all .2s ease-in-out;
}

.album-card-wrap{
	display: grid;
	grid-template-columns: 150px 1fr;
	/* grid-template-rows: 150px 150px; */
}


.album-card-img{
	position: relative;
	box-sizing: border-box;
	display: inline-block;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	background-color: #222;
}

.album-card-img img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-size: 80%;
}

.album-card-bg{
	box-sizing: border-box;
	width: 100%;
	background-color: #222;
}

.album-card-txt{
	box-sizing: border-box;
	width: 100%;
	padding: 1em 2em;
	line-height: 1.1em;
}

.album-card-txt h2{
	font-size: 1.2em;
	line-height: 1.4rem;
	letter-spacing: .15rem;
	max-height: 2rem;
	color: white;
	text-transform: none;
	word-break: break-word;
	margin: .5rem 0 1.2rem 0;

	border-bottom: 1px solid rgb(51, 51, 51);
	padding-bottom: 10px;
}

.album-card-txt h2 span{
	display: inline-block;
	margin: 0;
	font-size: 1.4rem;
	font-weight: 500;
	font-style: italic;
	text-transform: none;
	color: var(--main-color);
	margin-left: 0.25em;
}

.album-card-txt .tracks{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.album-card-txt .tracks li{
	line-height: 1em !important;
	margin-bottom: .5em;
}

.album-card-txt .tracks span{
	color: var(--main-color);
	font-weight: 900;
	margin-right: .5em;
}



/*						*/
/*						*/
/*		CONTENT LIST	*/
/*						*/
/*						*/

header aside .header-image-wrap{
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
}

header aside img{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

header p{
	font-size: 1.4rem;
	line-height: 2rem;
	margin-top: 1rem;
	color: white;
}

header + form{
	position: relative;
	width: 100%;
	background-color: #ccc;
	color: #555;
}

header + form a{
	display: inline-block;
	color: #999;
	cursor: pointer;
}

header + form a.author-btn.active:after{
	content: " ";
	display: block;
	width: 0; 
	height: 0; 
	border-left: 1.2em solid transparent;
	border-right: 1.2em solid transparent;
	border-bottom: 1.2em solid #efefef;

	position: absolute;
    bottom: -.2em;
    left: 45%;
}

header + form .property-label.author:before, 
header + form .property-label.creator:before{
	font-family: 'icons';
	display: inline-block;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	border: 1.5px solid #999;

	text-align: center;
	font-size: 1.5rem;
	line-height: 2.5rem;
	font-weight: lighter;
	font-style: normal;
	margin-right: 7.5px;
}

header + form a.active,
header + form a:hover{
	color: #444;
}

header + form a.active .property-label.author:before, 
header + form a:hover .property-label.author:before, 
header + form a.active .property-label.creator:before,
header + form a:hover .property-label.creator:before{
	border-color: #444;
}

.selected .property-label.author:before, .selected .property-label.creator:before{
	color: var(--main-color);
	border-color: var(--main-color);
}

form .property-label.author:before{ content: '\E859'; }
form .property-label.creator:before{ content: '\E858'; }

header + form .property-label, 
header + form .property-value{
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 3rem;
	font-style: italic; 
}

.author-btn{
	position: relative;
	padding: 1rem 0;
}

/*					*/
/*		ARTICLE		*/
/*					*/
/*					*/

header{
	background-color: black;
	position: relative;
	width: 100%;
	padding: 18px 0;
}

header h1{
	text-transform: uppercase;
	margin-top: 1rem;
	margin-bottom: .5rem;
}

header h1 .rel_content span{
	font-size: 14px;
	font-style: italic;
	font-weight: lighter;
}

header h2{
	text-transform: none;
	font-style: italic;
	font-size: 1.8rem;
	font-weight: 400;
	color: white;
	margin: 0 0;
}

header h3{
	font-size: 1.4rem;
}

#header-search-wrap{
	display: flex;
	position: relative;
	width: 100%;
	margin-top: .5rem;

}

#section-search{
	flex-grow: 1;
	position: relative;
}

.subject-search,
.header-search{
	box-sizing: border-box;
	width: 100%;
	height: 30px;
	padding: 0px 25px 0 10px;
	border-radius: 50px;
	border: 2px solid #666;
	outline: none;
	
	background-color: black;
	color: #666;

	transition: all .25s ease-in-out;
}

.subject-search:focus,
.header-search:focus{
	border: 2px solid white;
	color: white;
}
.header-search-icon{
	position: absolute;
	top: 0;
	right: 3px;
	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	outline: none;
	margin: 0;
	background-color: transparent;
	color: #666;
	transition: all .25s ease-in-out;
}
.header-search-icon:after{
	position: absolute;
	width: 30px;
	height: 30px;
	text-align: center;
	top: 0;
	right: 0;
	font-family: 'icons';
	font-size: 1.5rem;
	line-height: 26px;
	font-weight: lighter;
	content: '\E811';
}

.reset-search-icon{
	display: none;
	position: absolute;
	top: 0;
	right: 3px;
	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	outline: none;
	margin: 0;
	background-color: transparent;
	color: #666;
	transition: all .25s ease-in-out;
}

.reset-search-icon:hover{
	color: #fff;
	cursor: pointer;
}

.header-adv-toggle{
	flex-shrink: 0;
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	border-radius: 50px;
	border: 2px solid #666;
	margin-left: 5px;
	background-color: black;
	color: #666;
	text-align: center;
	cursor: pointer;
	transition: all .25s ease-in-out;
}
.header-adv-toggle:hover{
	border: 2px solid white;
}
.header-adv-icon:after{
	font-family: 'icons';
	content: '\E854';
	font-size: 22px;
	line-height: 27px;
	font-weight: 900;
	transition: all .25s ease-in-out;
}
.expanded .header-adv-icon:after{
	content: '\E841';
	font-size: 17px;
	font-weight: 400;
}
.header-adv-toggle:hover .header-adv-icon:after{
	color: white;
}
.header-search:focus + .header-search-icon{
	color: white;
}

article aside img{
	/* float: left; */
	width: 100%;
	height: auto;
	/* border-radius: 50%; */
	/* border: 5px solid var(--main-color); */
	border: none !important;
	margin-bottom: 20px;
}

article aside .article-author-img{
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	position: relative;
}

article aside .article-author-img img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

article aside p{
	font-size: 1.6rem;
	line-height: 2.2rem;


	width: 65%;
	max-width: 400px;
	margin-left: 35%;
}

article .siema{
	cursor: default !important;
}

.article-txt{
	padding-top: 3rem;
	padding-bottom: 2rem;
}
.article-txt p{
	font-size: 1.8rem;
}
.article-txt p.image{
	text-align: center;
	padding: 2.5em 0 2em 0;
}
.article-txt figure{
	text-align: center;
}
.article-txt figure img,
.article-txt p.image img{
    max-width: 80%;
    max-height: 60vh;
    width: auto;
}
.article-txt p.image + p.ql-align-center{
	text-align: center;
}
.article-txt p.image + p.ql-align-center i{
	transform: translateY(-2.5em);
	font-size: .75em;
	display: block;
	line-height: 1.4;
	padding: 0 10%;
}

.article-txt .embed-caption{
		font-size: 1.1em;
		line-height: 4.5;
		text-align: center;
}

.article-txt p.ql-align-center i {
    font-size: .8em;
    line-height: 1.2;
    text-align: center;
    display: block;
    transform: translateY(-2em);
    max-width: 70%;
    margin: 0 auto;
}

.article-txt iframe{
    margin-top: 3em;
}

.article-track-wrap{
	padding: 10px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.article-track-wrap .track-name{
	margin-left: 10px;
}

.top-pad{
	padding-top: 50px;
}

/*						*/
/*						*/
/*	PLAYLIST SHORTCUT	*/
/*						*/
/*						*/


.playlist-shortcut{
	order: -1;
}

.play-bttn-bg {
	box-sizing: border-box;
	display: inline-block;
	margin: 1.5rem 0;
	padding: 5px; 
	background-color: #fefefe;
	cursor: pointer;
	height: 50px;
	border-radius: 30px;
	white-space: nowrap;
}

.play-bttn-bg .play-bttn{
	float: right;
	width: 40px;
	height: 40px;
	margin-left: 10px;
}

.play-bttn-bg span{
	font-size: 1.15rem; 
	font-style: italic;
	font-weight: 700;
    line-height: 4rem;
	margin-left: 10px;
	white-space: nowrap;
}

/*					*/
/*					*/
/*		TRACK		*/
/*					*/
/*					*/

.track{
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	padding: 15px 0 15px 0;
}

.play-bttn-wrap{
	display: inline-block;
	position: absolute;
	left: 10px;
	top: 15px;
	z-index: 10;
}

.play-bttn{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--main-color);
	text-align: center;
	vertical-align: middle;
	line-height: 40px;
	cursor: pointer;
}
.play-bttn.disabled{
	cursor: default;
	background-color: #ddd;
}
.play-bttn span{
	display: none;
}

.play-bttn:after{
	text-align: center;
	font-family: 'icons';
	font-size: 2.1rem;
	line-height: 4rem;
	vertical-align: middle;
	padding-left: 2px;
	content: "\E858";
	color: #fff;
}

.trackLoading .play-bttn:before, .play-bttn.trackLoading:before {
	position: absolute;
	content: " ";
	left: 12px;
	top: 5px;
    display: block;
    width: 12px;
    height: 12px;
    margin-top: 8px;
    border-radius: 50%;
    border: 2px solid #fff;
    border-color: #FFF transparent #FFF transparent;
    animation: autocomplete-load 1.2s linear infinite;
}
.trackLoading .play-bttn, .play-bttn.trackLoading {
	opacity: .8;
}

.trackLoading .play-bttn:before {
	top:24px;
	left: auto;
	right: 27px;
}

.play-bttn.disabled:after{
	color: #efefef;
}

.play-bttn-bg .play-bttn:after{
	font-size: 2.5rem;
	line-height: 1em;
	padding-left: 3px;
}

.play-bttn.play:after{
	padding-left: 0;
	margin-left: -1px;
	font-size: 2rem;
	content: "\F00E";
}

.trackLoading .play-bttn:after, .play-bttn.trackLoading:after {
	content: " ";
}

.play-bttn-bg .play-bttn.play:after{
	padding-left: 1px;
	font-size: 2.3rem;
}

.track .row-wrap{
	position: relative;
	box-sizing: border-box;
	padding: 0 70px 0 60px;
	width: 100%;
}

.track .row-wrap > .row{
	box-sizing: border-box;
	width: 100%;
	display: inline-block;
	margin-left: 0;
}

.track .row > div{
	position: relative;
}

.track-author a, .track-performer a, .track-accompaniment a{
	color: initial;
	font-weight: 500;
}

.track-name{
	text-transform: uppercase;
	font-size: 1.5rem;
	letter-spacing: .5px;
	color: var(--main-color);
}

.track-author{
	font-size: 1.2rem;
	padding-right: 20px;
}

.track-performer{
	font-size: 1.5rem;
}

.track-accompaniment{
	font-size: 1.5rem;
}

.track-year{
	font-size: 1.5rem;
}

.track-cover{
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	background-color: grey;
}

.track-public-domain{
	display: inline-flex;
	align-items: stretch;
	border-radius: 12px;
	font-size: .75em;
	border: 1px solid var(--main-color);
	overflow: hidden;
	position: relative;
	transition: all .3s ease;
}

.track-public-domain .download{
	background-color: var(--main-color);
	color: #fff;
    padding: 0 .25em;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .3s ease;
}

.track-public-domain .download::before{
    width: 1em;
    height: 1em;
    content: ' ';
    background-position: center;
    background-repeat: no-repeat;
    display: block;
	transition: all .3s ease;
    background-image: url(../images/download2.svg);
}

.track-public-domain .dp{
	font-weight: 900;
	padding: 0 .2em 0 .4em;
	color: var(--main-color);
	background-color: #fff;
	transition: all .3s ease;
}

.track-public-domain .year{
	font-weight: 600;
	padding: 0 .2em;
	color: var(--main-color);
	background-color: #fff;
	transition: all .3s ease;
}

.track-public-domain > :last-child{
	padding-right: .4em;
}

.track-public-domain.unavailable{
	border: 1px solid #999;
}

.track-public-domain.unavailable .dp{
	padding-left: .4em;
	color: #999;
}
.track-public-domain.unavailable .year{
	color: #999;
}

a.track-public-domain:hover{
	border-color: #000;
}

a.track-public-domain:hover .dp,
a.track-public-domain:hover .year{
	color: #000;
}
a.track-public-domain:hover .download{
	background-color: #000;
}


.property-value a.track-public-domain:hover{
	border-color: #fff;
}

.property-value a.track-public-domain:hover .dp,
.property-value a.track-public-domain:hover .year{
	color: #000;
}
.property-value a.track-public-domain:hover .download{
	background-color: #fff;
}
.property-value a.track-public-domain:hover .download::before {
	filter: brightness(0%);
}





.plus-bttn{
	float: left;
	display: inline-block;
	width: 50%;
	cursor: pointer;
	text-align: left;
}

.plus-bttn span{
	display: none;
}
.plus-bttn:after{
	content: "\E854";
	font-family: 'icons';
	font-size: 2.5rem;
	line-height: 2rem;
	color: #bbb;
}

.collection-icon{
	text-align: right;	
}
.collection-icon:before{
	font-family: 'icons';
	content: "\F097";
	display: inline-block;
	width: 20px;
	height: 30px;
	font-size: 2rem;
	text-align: center;
	cursor: pointer;
	color: var(--main-color);
}

.collection-icon:hover:before{
	content: "\E857";
}

.collection-icon:hover .content-collection-box:before{
	content: " ";
	position: absolute;
	top: 10px;
	right: -10px;
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	
	border-left: 10px solid black;
}
	
.mobile .content-collection-box.expand, .collection-icon:hover .content-collection-box{
	display: block;
}

.content-collection-box{
	font-size: 14px;
	display: block;
	min-width: 150px;
	padding: 8px 12px;
	position: absolute;
	background: #000;
	top: -10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; /* future proofing */
	-khtml-border-radius: 5px; /* for old Konqueror browsers */	
	z-index: 999;
}


.content-collection-box ul{
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.content-collection-box a{
	color: white;
	font-weight: 500;
}

.options{
	position: absolute;
	right: 10px;
	top: 15px;
	display: inline-block;
	width: 50px;
	height: 40px;
	font-size: 1.25rem;
	line-height: 2.25rem;
	text-align: right;
}

.options .item-relation-selection{
	position: unset;
	float: right;
	width: 50%;
}

a.content-collection-remove, a.content-selection-toggle, a.content-collection-toggle, .item-relation-selection > a{
	width: 100%;
	padding: 0;
	font-size: 1.6rem;
	line-height: 2rem;
}

.collection-icon,
a.content-collection-toggle:before{
	font-family: 'icons';
	content: "\E857";
	color: #ccc;
}

a.content-collection-toggle:hover:before{
	font-family: 'icons';
	content: "\E857";
	color: var(--main-color);
}


.options-icon{
	float: right;
	display: inline-block;
	width: 50%;
}

.options-icon:before{
	font-family: 'icons';
	font-weight: 100;
	content: '\E85C';
	display: inline-block;
	transform: rotate(90deg);
	color: #555;
	line-height: 2rem;
}

.options-icon span{
	display: none;
}

.options-box{
	display: none;
	position: absolute;
	top: -5px;
	right: 30px;
	padding: 5px 15px 5px 10px;
	background-color: #444;
	border-radius: 5px 3px 5px 5px;
}

.options-icon:hover + .options-box, .options-box:hover{
	display: block;
}

.options-box:after{
	position: absolute;
	top: 5px;
	left: 100%;
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 10px;
	border-color: transparent transparent transparent #444;
}

.options-box a{
	white-space: nowrap;
	color: white;
}

.track .track-info{
	min-height: 0;
	height: auto;
	max-height: 0;
	overflow: hidden;

	-webkit-transition:	all .5s cubic-bezier(0, 1, 0, 1);
	-moz-transition:	all .5s cubic-bezier(0, 1, 0, 1);
	-ms-transition:		all .5s cubic-bezier(0, 1, 0, 1);
	-o-transition:		all .5s cubic-bezier(0, 1, 0, 1);
	transition:			all .5s cubic-bezier(0, 1, 0, 1);

	font-size: 1.5rem;
}

.track.expand .track-info{
	max-height: 750px;
	transition-timing-function: cubic-bezier(0.5, 0, 1, 0); 
	transition-delay: 0s;
}

.track-info .row > div{
	min-height: 30px;
}

.property-wrap{
	display: block;
	margin-bottom: 5px; 
}

.property-label{
	display: inline-block;
	font-size: 1.25rem;
}

.property-value{
	display: inline-block;
	font-size: 1.5rem;
}

.track-info	.property-label{
	width: 100%;
	margin-right: 10px;
}

.track-info	.property-value{
	font-weight: 700;
}

/*					*/
/*					*/
/*	ARTICLE TRACK	*/
/*					*/
/*					*/

.article-track{
	margin: 10px 0;
}


/*				*/
/*				*/
/*	TRACKLIST	*/
/*				*/
/*				*/

.tracklist-label{
	border-bottom: 2px solid #555;
}

.tracklist-label.row{
	position: relative;
	box-sizing: border-box;
	margin-left: 0;
	padding: 0 0px 0 60px;
	width: 100%;
}
.tracklist-label.row.with-icons{
	padding: 0 70px 0 60px;
}

.tracklist{
	width: 100%;
	margin-bottom: 4rem;
}

.tracklist .track, .tracklist .composition{
	border-bottom: 1px dotted #555;
}

/*					*/
/*					*/
/*	 COMPOSITION	*/
/*					*/
/*					*/

.composition{
	position: relative;
	display: block;
	min-height: 40px; 
	height: auto;
	padding: 10px 0 10px 60px;
}

.composition .row{
	margin-left: 0;
}

.composition .row > div{
	position: relative;
}

.track-label-wrap{
	position: absolute;
	left: 10px;
	top: 5px;
}

.track-label{
	display: inline-block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	text-align: center;

	background-color: #ccc;
	opacity: .75;
}

.track-label:after{
	content: '\E859';
	font-family: 'icons';
	display: inline-block;
	margin-right: 2px;

	font-size: 2rem;
	line-height: 4rem;
	font-weight: normal;
	font-style: normal;

	color: #fefefe;
	background-color: transparent !important;
}
.track-label.recordlabel:after{
	content: '\E850';
	font-family: 'icons';
    font-size: 2.4rem;
    margin-left: 3px;
}

.composition .track-label{
	margin-top: 5px;
}
.composition .track-author{
	color: #555;
}

@media (max-width: 540px){
	.composition .about{
		order: 1;
		margin-top: 10px;
	}
	.composition .about{
		margin-right: 5px;
	}
}
	

/*					*/
/*					*/
/*	ARTIST CARD	*/
/*					*/
/*					*/

.author-label{
	display: inline-block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	text-align: center;

	background-color: #ccc;
	opacity: .75;
}

.author-label:after{
	content: '\E867';
	font-family: 'icons';
	display: inline-block;
	margin-right: 1px;

	font-size: 2rem;
	line-height: 4rem;
	font-weight: normal;
	font-style: normal;

	color: #fefefe;
	background-color: transparent !important;
}

/*					*/
/*					*/
/*	RELATION LIST	*/
/*					*/
/*					*/

.relation-list{
	margin-bottom: 20px;
}

.relation-label{
	border-bottom: 2px solid #555;
	margin-bottom: 10px;
}

.related-label{
	font-size: 1.25rem;
	font-style: italic;
	font-weight: initial;
	color: #555;
}

.relation-list .relation-item{
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	margin: 10px 0;
	background-color: #ccc;
	overflow: hidden;
}

.relation-list .relation-item.artist{
	border-radius: 50%;
}

.relation-list .relation-item img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	-moz-background-clip: padding; 
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	-webkit-transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-ms-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
}

.relation-item-wrap{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.relation-item-value, .relation-item-propriety{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
}

.relation-item-value div{
	box-sizing: border-box;
	display: inline-block;
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 5px 20% 15px 20%;
	transform: translateX(-50%);
	text-align: center;
	font-size: 1.8rem;
	font-weight: 700;
	background-color: #eee;
}


/*					*/
/*					*/
/*		FOOTER		*/
/*					*/
/*					*/

footer {
	width: 100%;
	height: auto;
	padding: 50px 0 0 0;
	margin: 0 0 0 0;
	background-color: var(--main-color);
	-webkit-transition:	all .15s ease-in-out;
	-moz-transition:	all .15s ease-in-out;
	-ms-transition:		all .15s ease-in-out;
	-o-transition:		all .15s ease-in-out;
	transition:			all .15s ease-in-out;
	color: black;
}

body.play footer{
	margin-bottom: 100px;
}

footer .logo{
	display: block;
	width: 75px;
	height: 75px;
	margin-bottom: 20px;
}

.footer-menu{
	margin-bottom: 50px;
}

footer ul{
	display: inline-block;
	list-style-type: none;
	text-align: left;
	margin: 0;
	padding-left: 0;
	column-count: 3;
	  -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
	  -moz-column-gap: 20px; /* Firefox */
	  column-gap: 20px;
}

footer li{
	line-height: 1em;
}

footer p,
footer li a{
	white-space: nowrap;
	font-size: 1.2rem;
	line-height: 1.6rem;
	color: #000;
	margin: 0;
	padding: 0;
}

footer li a{
	line-height: 3.2rem;
	font-weight: bold;
}

footer .ims{
	width: 100%;
	min-height: 10px;
	height: 100%;
}

footer .logo-ims{
	display: block;
	width: auto;
	height: 75px;
	margin-bottom: 20px;
	background-image: url("../images/logo-ims.svg");
	background-repeat: no-repeat;
	background-position: center left;
	background-size: auto 80%;
}

footer .footer-ecad{
	order: 1;
}

footer .logo-ecad{
	display: block;
	width: auto;
	height: 75px;
	margin-bottom: 20px;
	background-image: url("../images/logo-Ecad-PB.svg");
	background-repeat: no-repeat;
	background-position: center left;
	background-size: auto 80%;
}

footer .ecad-blank-space{
	display: none;
	width: 200px;
	height: 20px;
}

footer .ecad-text p{
	font-weight: 600;
}

footer .creditos{
	display: inline-block;
	font-size: 1.2rem;
}

footer .creditos span{
	white-space: nowrap;
}

footer .creditos a{
	font-weight: 700;
	color: #000;
}

footer .creditos a:hover{
	opacity: .75;
}

footer.play{
	margin-bottom: 125px;
}

@media (min-width: 900px) {

	.logo{
		border-radius: 50%;
		background-color:var(--main-color);
		background-image: url("../images/logo.svg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}

	.vert-center-mob{
		position: relative;
		transform: none;
		top: unset;
	}

	.vert-center-desk{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	/*					*/
	/*					*/
	/*		NAV			*/
	/*					*/
	/*					*/

	.mob-show-only{ display: none; }
	.desktop-show-only{ display: inline-block; }

	nav .logo{
		top: 10px;
		left: 30px;
		width: 115px;
		height: 115px;
	}

	nav.scrolled .logo{
		top: 10px;
		left: 30px;
		width: 75px;
		height: 75px;
	}

	nav .nav-drop{
		width: 30%;
		height: auto;
		padding: 10px 20px 30px 20px;
		margin-top: 40px;
		
		transform: translateY(-125%);
	}
	
	nav .nav-drop.expanded{ transform: translateY(0); }
	
	nav .nav-drop ul{ padding: 0; margin: 0; }
	
	.nav-drop ul a{
		font-size: 18px;
		height: unset;
		line-height: unset;
		margin: 5px 25px 5px 5px;
	}

	.switch-lang-ext{
		display: none;
	}

	.switch-lang{
    height: 30px;
    line-height: 30px;
    padding: 10px 5px 0px 5px;
    border-top: 2px solid rgba(255, 255, 255, .7);
    margin: 10px 0px 0px 0px;
    font-size: 18px;
	}

	/*					*/
	/*					*/
	/*	HOME HALFTONE	*/
	/*					*/
	/*					*/

	.halftone-container .logo{
		top: 5%;
		left: 5%;
	}

	.home .halftone::after {
		content: '';
		position: absolute;
		top: -250%;
		left: -100%;
		right: -100%;
		bottom: -250%;
		background-blend-mode: multiply;
		background: radial-gradient(16px 16px, black, white);
		background-size: 12px 12px;
		background-position: 0 -3px;
		mix-blend-mode: screen;
		pointer-events: none;
		transform: rotate(30deg);

		-webkit-transition:	transform 1s ease-in-out;
		-moz-transition:	transform 1s ease-in-out;
		-ms-transition:		transform 1s ease-in-out;
		-o-transition:		transform 1s ease-in-out;
		transition:			transform 1s ease-in-out;
		
		z-index: 1;
	}

	.halftone-container .home-search {
		max-width: 600px;
		display: flex;
	}

	.halftone-container .home-search form{
		flex-basis: 70%;
		width: 70%;
	}
	
	.halftone-container .home-search .adv-search-toggle{
		flex-basis: 30%;
		width: 30%;
	}

	.halftone-container select {
		background-position: 90% center;
		background-size: 10% auto;
	}


	/*						*/
	/*						*/
	/*		HOME CARDS		*/
	/*						*/
	/*						*/

	button.prev, button.next{
		width: 100%;
		height: 100%;
	}

	.colecoes-card{
		box-sizing: border-box;
		text-align: center;
		width: 100%;
		height: 100%;
		padding: 0 15px 0 5px;
		color: white;
		margin: 10px 0;
	}

	.colecoes-card-bg-1{
		-webkit-transition:	all .25s ease-in-out;
		-moz-transition:	all .25s ease-in-out;
		-ms-transition:		all .25s ease-in-out;
		-o-transition:		all .25s ease-in-out;
		transition:			all .25s ease-in-out;
	}

	.colecoes-card-bg-2{
		-webkit-transition:	all .25s ease-in-out;
		-moz-transition:	all .25s ease-in-out;
		-ms-transition:		all .25s ease-in-out;
		-o-transition:		all .25s ease-in-out;
		transition:			all .25s ease-in-out;
	}

	.colecoes-card-bg-3{
		-webkit-transition:	all .25s ease-in-out;
		-moz-transition:	all .25s ease-in-out;
		-ms-transition:		all .25s ease-in-out;
		-o-transition:		all .25s ease-in-out;
		transition:			all .25s ease-in-out;
	}

	.colecoes-card-bg-c{
		-webkit-transition:	all .25s ease-in-out;
		-moz-transition:	all .25s ease-in-out;
		-ms-transition:		all .25s ease-in-out;
		-o-transition:		all .25s ease-in-out;
		transition:			all .25s ease-in-out;
	}

	.colecoes-card-bg:hover .colecoes-card-bg-2{
		top: 3.5%;
		left: 3.5%;
	}

	.colecoes-card-bg:hover .colecoes-card-bg-3{
		right: -2.5%;
		bottom: -2.5%;
	}

	.colecoes-card-bg:hover .colecoes-card-bg-c{
		right: .5%;
		bottom: .5%;
	}

	/*					*/
	/*					*/
	/*		SEARCH		*/
	/*					*/
	/*					*/

	.search-item:hover img{
		opacity: 1;
	}

	.search-item-value div{
		width: 70%;
		padding-bottom: 15px;
	}

	.search-item-propriety div{
		width: 70%;
		padding-top: 20px;
	}

	/*					*/
	/*					*/
	/*		ARTICLE		*/
	/*					*/
	/*					*/

	article aside img{
		float: none;
		box-sizing: border-box;
		/* width: 75%; */
	}

	article aside p{
		font-size: 1.6rem;
		line-height: 2.2rem;
		width: 100%;
		max-width: none;
		margin-left: 0;
	}

	.playlist-shortcut{
		order: 0;
	}

	/*					*/
	/*					*/
	/*		TRACK		*/
	/*					*/
	/*					*/

	.track{
		min-height: 50px;
		padding: 15px 0 5px 0;
	}

	.track-info .row{
		margin-left: 0;
	}

	.star-bttn{
		fill: transparent;
		stroke: var(--main-color);
		stroke-width: 10px;
	}

	.star-bttn:hover{
		fill: var(--main-color);
	}

	.track-info	.property-label{
		width: unset;
	}

	/*				*/
	/*				*/
	/*	TRACKLIST	*/
	/*				*/
	/*				*/

	.side-label{
		width: 100%;
		height: 0;
		padding-bottom: 100%;
		margin: 5px 0 20px 0; 
		background-color: transparent !important;
	}

	.side-label img{
		display: block;
		width: 120px;
		margin: 10px auto;
		border-radius: 50%;
	}

	.side-letter{
		font-size: 1.8rem;
		text-transform: uppercase;
		font-weight: 900;
	}


	/*					*/
	/*					*/
	/*		FOOTER		*/
	/*					*/
	/*					*/

	footer ul{
		text-align: left;
	}

	footer li a{
		line-height: 1.6rem;
	}

	footer.play{
		margin-bottom: 150px;
	}

	footer .footer-ecad{
		order: 0;
	}

	footer .logo-ecad{
		background-position: center right;
	}

}

/* !!!!!! Microsoft Edge !!!!!! */
@supports (-ms-ime-align:auto){

	.color-bg{
		animation: none;
	}
	
	.halftone{
		background-color: transparent;
		filter: unset;
	}

	.halftone .img{
		background-image: url(../images/home_joao_da_baiana_transp.png);
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
		height: auto;
		animation: none;
		filter: unset;
	}

	.halftone::after {
		content: none;
	}

}

/* !!!!!! IE 10 and 11 !!!!!! */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

	main.wrap{
		max-width: 1100px;
		width: auto !important;
	}

	.logo{
		background-image: url("../images/logo.svg");
	}

	.colecoes-card-title, .colecoes-card-author, .search-item-value div, .search-item-propriety div{
		transform: none;
		right: 15%;
	}

	.color-bg{
		animation: none;
	}
	
	.halftone{
		background-color: transparent;
		filter: unset;
	}

	.halftone .img{
		background-image: url(../images/home_joao_da_baiana_transp.png) !important;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
		height: auto;
		animation: none;
		filter: unset;
	}

	.halftone::after {
		content: none;
	}

	.track.row svg{
		max-height: 50px;
	}

}


	/* ------  .shiro-btn-form-toggle  ------- */

	.active.asc::after,
	.active.desc::after {
		border-bottom: 0;
		display: inline-block;
		content: '';
		width: 0;
		height: 0;
		margin-left: 3px;
		margin-bottom: .15em;
	}

	.active.desc::after {
		border-top: 5px solid black;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
	}
	.active.asc::after {
		border-bottom: 5px solid black;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
	}

	select.shiro-list-filter option, select.shiro-relation-filter option{
		color: black;
	}

	.shiro-list-filter{
	color: white;
	padding: 4px;
	border: none;
	outline: none;
	background-color: transparent;
		-moz-appearance: window;
		-webkit-appearance: none;
		appearance: none;
		-webkit-user-select: none;
		-moz-user-select: -moz-none;
		-ms-user-select: none;
		user-select: none;
		text-align: right;
	box-sizing: border-box;
	cursor: pointer;
	}
	.shiro-list-filter option{
		text-align: right;
	}

/*  ----- LOADING ------  */
/* https://loading.io/css */

.loading {
	background: rgba(0,0,0,.75);
	display: block;
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 99999;
}
.loading:after {
	position: absolute;
	left: 50%;
	top: 50%;
	content: " ";
	display: block;
	width: 46px;
	height: 46px;
	margin: 1px;
	border-radius: 50%;
	border: 5px solid #fff;
	border-color: #fff transparent #fff transparent;
	animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.loadingBox {
	width: 100%;
	min-height: 100px;
	background: rgba(85,85,85,.05);
	position: relative;
}

.loadingBox:after {
	position: absolute;
	left: 50%;
	top: 40%;
	content: " ";
	display: block;
	width: 30px;
	height: 30px;
	margin: 1px;
	border-radius: 50%;
	border: 4px solid #000;
	border-color: #555 transparent #555 transparent;
	animation: lds-dual-ring 1.2s linear infinite;
	z-index: 9;
}

#artigos .loadingBox {
	background: rgba(0,0,0,.75);
	position: absolute;
	inset: 0 0 0 0;
}
#artigos .loadingBox:after {
	background: rgba(0,0,0,.75);
}

.autocomplete-load {
 /* display: inline-block;
  width: 20px;
  height: 20px;*/
  right: 20px;
	position: absolute;
	display: block;
	bottom: 0;
}

.autocomplete-load.autocomplete-loading:after { /**/
  content: " ";
  display: block;
  width: 12px;
  height: 12px;
  margin-top: 8px;
  border-radius: 50%;
  border: 2px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: autocomplete-load 1.2s linear infinite;
}
@keyframes autocomplete-load {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.lg-load .autocomplete-load{
	right: 0;
}
.lg-load .autocomplete-load:after{
  width: 20px;
  height: 20px;
  margin-top: 12px;
  border: 3px solid #fff;
  border-color: #fff transparent #fff transparent;
}


/* ****************************** */

	.no-result{
		font-size: 30px;
		font-weight: 700;
		color: #bbb;
		margin: 100px 0;
	}

	.share {
		margin-top: 1rem;
	}
	.share a {
		font-family: 'icons';
		font-size: 20px;
		display: inline-block; 
		text-decoration: none;
		width: 35px; 
		height: 35px; 
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		background-color: transparent;
		margin: 0 3px;
		color: #666;
		overflow: hidden;
		text-align: center;
		-webkit-transition: background .2s ease;
		-moz-transition: background .2s ease;
		-o-transition: background .2s ease;
		transition: background .2s ease;  
	}

	.share a:hover {
		color: #000;
	}

	.share a span{
		display: inline-block;
		line-height: 1.8;
	}

	.share a.facebook span:before{ content: "\E815"; }	
	.share a.twitter span:before{ content: "\f099"; }
	.share a.whatsapp span:before{ content: "\f232"; }
	.share a.pinterest span:before{ content: "\f231"; }


	.tag-genre, .tags{
		margin-top: 1rem;
	}

	.image-header{

	}

	.home #colecoes,
	.home #artigos{
		margin: 3em 0 2em 0;
	}

	.comp-icon, .rec-icon{
		display: block;
		text-align: center;
		color: #999;
	}
	.comp-icon:after{
		font-family: 'icons';
		content: '\E859';
	}
	.rec-icon:after{
		font-family: 'icons';
		content: '\E865';
	}
	.comp-label	{
		display: none;
	}
	.rec-label	{
		display: none;
	}

	@media (min-width: 900px) {
	
		.comp-icon	{ display: none; }
		.rec-icon	{ display: none; }
		.comp-label	{display: block; }
		.rec-label	{display: block; }
	}

	.collection-box-btn{
		padding-top: 5px;
		text-align: center;
	}
	.collection-box-btn a{
		text-transform: uppercase;
		letter-spacing: .5px;
		font-size: 12px;
		margin-top: 5px;
		padding: 4px 10px;
		border-radius: 4px;
	}

	/*-------------------------------------------------*/


.login-form > div{
	/* text-align: center; */
	margin: 0 auto;
	
}
#login_box{
	width: 50%;
	min-width: 400px;
}
#login_box. .mensagem.ok{
	font-weight: bold;
}

#login_box. .mensagem.ok{
	color: #099900;
}

#login_box fieldset{
	padding: 2rem 20px;
	background-color: #fff;
	border: 0;
	margin-top: 3rem;
	margin-bottom: 5rem;

	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;

	-webkit-box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.16);
	-moz-box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.16);
	box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.16);
}

.login-form label{
	display: block;
	font-size: 1.5rem;
	margin-bottom: .3rem;
}
.login-form span.error{
		display: block;
		color: #900;
}

.login-form .form-item,
.login-form .form_input{
	margin-bottom: 1rem
}

.login-form button,
.login-form input[type=submit]{
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	cursor: pointer;

	border: 0;
	padding: 4px 25px;

	font-family: inherit;
	font-size: 1.4rem;
	color: #eee;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;

	margin: 1rem;
}

.login-form button:hover,
.login-form input[type=submit]:hover{
	color: #fff;
}

.login-form input[type=text],
.login-form input[type=email],
.login-form textarea,
.login-form input[type=password]{
	padding: 5px 12px;
	background: #fff;
	font-family: inherit;
	font-size: 1.5rem;
	font-weight: bold;
	border: 1px solid #999;
	width: 400px;
	max-width: 50%;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.login-form .tools p{
	margin: .75rem 0;
}
.login-form .tools{
	font-size: 1.5rem;
}
.login-form .tools a:hover{
	color: #000;
}

.contact-msg{
	display: block;
	text-align: left;
	font-size: 2em;
	color: var(--main-color);
	margin-bottom: 1em !important;
}

.contact-msg.error{
	display: block;
	color: #900;
}

	/*-------------------------------------------------*/

	.audio-container {
		font-size: 1.4rem;
		margin:2rem 0;
	}


	.btn-user{
		position: absolute;
		font-size: 1.4rem;
		font-weight: bold;
		padding: 5px 20px;
		bottom: 0;
		right: 0;
		background: #fff;
		-webkit-border-radius: 25px;
		-moz-border-radius: 25px;
		border-radius: 25px;
	}


.collection-tools{
	margin-top: .5rem;
	color: #999;
}
.collection-tools a{
	font-weight: bold;
	display: inline-block;
	margin: 0 5px;
}
.collection-tools a:hover{
	color: #444;
}

blockquote, blockquote p {

	line-height: 3rem;

}


.color1 {color: var(--main-color); }
.color2 {color: var(--main-color2); }
.color3 {color: var(--main-color3); }

.bg-color1 {background-color: var(--main-color); }
.bg-color2 {background-color: var(--main-color2); }
.bg-color3 {background-color: var(--main-color3); }

.color-white {color: #ccc; }
.color-white:hover {color: #fff; }

.hover-color-white:hover {color: #fff; }
.hover-color1:hover {color: var(--main-color); }
.hover-color2:hover {color: var(--main-color2); }
.hover-color3:hover {color: var(--main-color3); }

.hover-bg-color1:hover {background-color: var(--main-color); }
.hover-bg-color2:hover {background-color: var(--main-color2); }
.hover-bg-color3:hover {background-color: var(--main-color3); }

nav{
	background-color: var(--main-color);
}

nav .logo{
	background-color: var(--main-color);
}

nav .wrap{
	background-color: var(--main-color);
}

.side-menu, nav ul.nav{
	background-color: var(--main-color);
}

.color-bg{
	background-color: var(--main-color);
}

@keyframes animation-color-bg {
    0% {
        background-color: black;
    }
    100% {
        background-color: var(--main-color);
    }
}

.halftone-container .logo{
	background-color: var(--main-color);
}

.halftone-container form input, .halftone-container .adv-search-toggle {
	background-color: var(--main-color);
}

.article-card-txt h3{
	color: var(--main-color);
}

.color-person{ fill: var(--main-color); }
.color-genre{ stroke: var(--main-color); }

#explore select {
	background-color: var(--main-color);
}

.search-item-value div{
	color: var(--main-color);
}

header .tag-name{
	background-color: var(--main-color);
}

.selected .property-label.author:after, .selected .property-label.interpreter:after{
	color: var(--main-color);
	border-color: var(--main-color);
}

article aside img{
	border: 5px solid var(--main-color);
}

.play-bttn{
	background-color: var(--main-color);
}

.play-bttn circle{
	fill: var(--main-color);
}

.track-name{
	color: var(--main-color);
}

.plus-bttn:hover:after{
	color: var(--main-color);
}

.star-bttn{
	stroke: var(--main-color);
}

.collection-icon:before{
	color: var(--main-color);
}

.track-label:after{
	background-color: var(--main-color);
	border-color: var(--main-color);
}

#label #inside{
	fill: var(--main-color);
}


footer{
	background-color: var(--main-color);
}


@media (min-width: 900px) {

	.logo{
		background-color: var(--main-color);
	}

	nav{
		background-color: var(--main-color);
	}

	.side-menu{
		background-color: var(--main-color);
	}

	.colecoes-card-bg:hover .colecoes-card-bg-1{
		background-color: var(--main-color3);
	}

	.colecoes-card-bg:hover .colecoes-card-bg-2{
		background-color: var(--main-color2) ;
	}

	.colecoes-card-bg:hover .colecoes-card-bg-3{
		background-color: var(--main-color);
	}
	
	.star-bttn{
		stroke: var(--main-color);
	}

	.star-bttn:hover{
		fill: var(--main-color);
	}

	#label #inside{
		fill: var(--main-color);
	}

}

/*-------------------------------------------------*/

#shiro_ajax_stage{
	margin-top: 43px;
}

.taxonomy{
	margin-bottom: 50px;
}

.taxonomy ul{
    margin: 0 0 15px 0;
    padding: 0 0 0 2em;
}

.taxonomy .expand-branch ul{
    display: none;
}
.taxonomy .expand-branch.open > ul{
    display: block;
}

.taxonomy .expand-tab{
    width: 1.6em;
    height: 1.6em;
    display: inline-block;
    vertical-align: middle;
    border: 0;
    margin-right: 5px;
}

.taxonomy .expand{ 
    background-color: transparent;
    background-image: url('../images/taxonomyShow.png');
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.taxonomy .expand-branch.open > .expand{ 
    background-image: url('../images/taxonomyHide.png');
}

.taxonomy ul li{
    list-style: none;
    margin: 0;
    padding: 0;
}
.taxonomy .taxonomyItem{
    color: #fff;
    padding: 2px 12px;
    border-radius: 20px;
    display: inline-block;
    font-weight: bold;
    margin-bottom: 2px;
    border: 1px var(--main-color) solid;
}
.taxonomy .taxonomyItem span.total{
    margin-left: 12px;
    font-weight: normal;
    color: var(--main-color);
}

.taxonomy .taxonomyItem.selected{
	background: var(--main-color);
	color: #000;
}
.taxonomy .taxonomyItem.selected span.total{
    color: #000;
}

/* -------------------------- */

#login-box-content{
	font-family: 'Nunito', sans-serif;
}

#login-box-content input[type=text], input[type=email], input[type=password]{
	width: 80%;
    padding: 0.25em 0.5em;
}

#login-box-content label{
	display: block;
    font-size: initial;
	font-weight: bold;
}
#login-box-content label span{
	font-weight: normal;
	font-size: .8em;
	color: #999
}

#login-box-content .form-fields{ margin-bottom: 8em; }
#login-box-content .complete .form-fields{ display: none; }

#login-box-content .form-fields div{ margin: 1em 0; }

#login-box-content .btn-submit{
	font-family: 'Nunito', sans-serif;
	font-size: 1.25rem;
	font-weight: bold;
    background: var(--main-color);
    color: #fff;
    border: 0;
    outline: 0;
    border-radius: 1em;
    padding: 0.35em 1.5em;
    margin-top: 0.5em;
    text-transform: uppercase;
	cursor: pointer;
	letter-spacing: 1px;
}

#login-box-content .btn-function a{
    display: inline-block;
    font-family: 'Nunito', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    border: 1px solid #666;
    border-radius: 1em;
    padding: 0.35em 1.5em;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: 1px;
    margin-top: 0.75em;
	transition: all .3s ease;
}

#login-box-content .btn-function a:hover{
	background: #444;
	color: #fff;
    border: 1px solid #444;
}

#login-box{
	width: 90%;
	max-width: 450px;
	padding: 35px 45px;
}
#login-box-content h1 {
    margin-bottom: 0.5em;
	text-transform: initial;
}

#login-box-content .form-message {
    font-size: 2rem;
    line-height: 1.25em;

	color: var(--main-color);
}

.fancybox-bg {
    background: rgb(0, 0, 0);
}

.fancybox-is-open .fancybox-bg {
    opacity: .9;
}

/* -------------------------- */

.swiper{
	width: 90%;
	height: 90%;
}

header aside .swiper-slide img {
	border-radius: 0;
	display: block;
	max-width:100%;
	max-height:100%;
	width: auto;
	height: auto;
}

.swiper-pagination {
	position: initial !important;
	padding: 5px 0;
}

.swiper-pagination-bullet {	
	border: 2px #fff solid;
}

.swiper-pagination-bullet-active {
	background: #fff !important;
}

/* ----------   SUBJECT TAXONOMY    -------------- */ 

#subject-box{
	background: #fff;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 99;
	overflow-y: auto;
	max-height: 300px;
	width: 40vw;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 10px 30px;
	box-sizing: border-box;
	-webkit-box-shadow: 0px 3px 20px 0px rgba(0,0,0,0.6); 
	box-shadow: 0px 3px 20px 0px rgba(0,0,0,0.6);
}

#subject-title{
	color: var(--main-color);
	font-size: 1.5em;
	margin-bottom: 1.5em;
	font-weight: 900;
}

#subject-title span{
	color: #888;
	font-size: .75em;
	margin-left: 10px;
	font-weight: normal;
}

#popup-close{
	position: absolute;
	top: 0;
	right: 0;
}

#popup-close::before{
	font-size: 1.5em;
	content: "\2716";
	margin: 10px 15px;
	cursor: pointer;
	display: block;
}

#popup-close span{
	display: none;
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;1,400&display=swap');

.footer-legal {
	margin: 0;
	padding: 0;
	background: #fff;
	font-family: Open Sans,Helvetica Neue,sans-serif;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	background: #dedede;
	padding: 20px 0 40px;
}

#nav-footer--legal {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: .5em 3em;
	flex-direction: column;
}

@media print,screen and (min-width: 64.0625em) {
	#nav-footer--legal {
		flex-direction:row
	}
}

#nav-footer--legal>li>a {
	font-size: 14px;
	color: #0a0a0a;
	text-transform: uppercase;
	transition: all .2s ease-in-out;
	font-weight: 400;
	color: #0a0a0a;
	letter-spacing: 0em;
	line-height: 1.5;
}
.developer-tag {
	font-size: 9px;
	color: #7a7a7a;
	font-family: monospace;
	font-weight: 700;
	white-space: nowrap;
}

#nav-footer--legal>li>a:hover {
	color: #0a0a0a;
}
.wrap.footer{
	display: flex;
	gap: 3em 0;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
}

#cookie-consent {
	background: #000000f1 !important;
	border: none !important;
	box-shadow: none !important;
}

#cookie-consent ul.cookie-buttons button {
	color: #000 !important;
	background: var(--main-color ) !important;
	border: none !important;
}