@import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400,500,600&display=swap');

/* Common */
:root{
	--n2-black: #1c1c1c;
	--n2-yellow: #eecd00;
	--n2-yellow-dim: rgba(238, 205, 0, 0.5);
	--n2-yellow-dim2: rgba(238, 205, 0, 0.2);
	--n2-salmon: #e44c65;
	--n2-white-secondary: #eee;

	--n2-success: #28a745;
	--n2-danger: #dc3545;

	--n2-input-border-radius: 4px;
	--n2-input-border-radius: 0px;

	--fa: 'Font Awesome 5 Free';
	--fa-brands: 'Font Awesome 5 Brands';

	--n2-logo-filter:
		drop-shadow(1px 1px 0 var(--n2-yellow))
		drop-shadow(1px -1px 0 var(--n2-yellow))
		drop-shadow(-1px 1px 0 var(--n2-yellow))
		drop-shadow(-1px -1px 0 var(--n2-yellow));
}

/* Dark Theme */
:root.theme_dark{
	--n2-background: var(--n2-black);
	--n2-background-secondary: #272727;
	--n2-background-tertiary: #2d2d2d;
	--n2-text-color: white;
	--n2-dark-yellow-border: 2px solid var(--n2-yellow);

	--n2-header-background: none;

	--n2-section-border: var(--n2-yellow);
	--n2-spotlight-background: rgba(23, 23, 23, 0.95);
	--n2-spotlight-before: -webkit-linear-gradient(top, rgba(28,28,28,0.4), rgba(28,28,28,0.4));

	--n2-text-dim: rgba(255, 255, 255, 0.5);

	--n2-input-background: #222;
	--n2-input-border: 1px solid rgba(255, 255, 255, 0.3);
	--n2-light-border: 1px solid rgba(255, 255, 255, 0.1);

	--n2-select-badge-background: white;
	--n2-select-badge-color: var(--n2-black);
	--n2-select-badge-border: white;
	--n2-select-hover-background: white;

	--n2-check-background: white;
}

/* Light Theme */
:root{
	--n2-background: #fff;
	--n2-background-secondary: #eee;
	--n2-background-tertiary: #f4f4f4;
	--n2-text-color: var(--n2-black);
	--n2-dark-yellow-border: none;

	--n2-section-border: transparent;
	--n2-header-background: white;
	--n2-spotlight-background: white;
	--n2-spotlight-before: -webkit-linear-gradient(top, rgba(255,255,0,0.1), rgba(255,255,0,0.1));

	--n2-text-dim: rgba(0, 0, 0, 0.7);

	--n2-input-background: #f6f6f6;
	--n2-input-border: 1px solid rgba(0, 0, 0, 0.3);
	--n2-light-border: 1px solid rgba(0, 0, 0, 0.1);

	--n2-select-badge-background: #eee;
	--n2-select-badge-color: var(--n2-black);
	--n2-select-badge-border: var(--n2-black);
	--n2-select-hover-background: var(--n2-yellow-dim);

	--n2-check-background: var(--n2-yellow);
}

html body #banner{
	background: transparent !important;
}

body.no-transition *,
body.no-transition *:not(#theme-button)::before,
body.no-transition *::after{
	transition: none !important;
}
.font-roboto{
	font-family: 'Roboto';
}
.form-inline{
	display: inline;
	margin:0;
}
/* Base */
input[type="file"]{
	color: var(--n2-text-color);
}
a{
	text-decoration: none !important;
}
small{
	font-size: 0.8em;
}
input{
	font-weight: 500;
}
img{
	max-width: 100%;
	max-height: 100%;
}
body hr{
	border-bottom: var(--n2-light-border);
}

iframe[src*="youtube"]{
	max-width: 100%;
}
body{
	color: var(--n2-text-color);
}
table .badge-light,
.badge-yellow{
	color: var(--n2-black);
	background: var(--n2-yellow);
}
.table-badges{
	vertical-align: middle;
	line-height: 1em;
}
.table-badges .badge{
	margin-right: 3px;
	margin-top: 1.5px;
	margin-bottom: 1.5px;
}
.valign{
	vertical-align: middle;
}
.under{
	text-decoration: underline !important;
}

.n2-hide{
  opacity: 0;
  pointer-events: none;
}
.n2-show{
	transition: opacity 250ms ease-in-out;
}

body input[type="text"]::placeholder,
body input[type="password"]::placeholder,
body input[type="email"]::placeholder,
body select::placeholder,
body textarea::placeholder,
body ::-webkit-input-placeholder{
	color: var(--n2-text-color) !important;
	opacity: 0.5;
}

/* Helpers */
[empty]:empty::before{
	content:attr(empty);
  display: block;
	width: 100%;
	text-align: center;
	font-style: italic;
}
br[index]{
	display: none;
}
hr[smol]{
	margin: 20px 0px;
}
.text-no-break{
	white-space: nowrap;
}
.text-vertical,
td.text-no-break{
	vertical-align: middle;
}
.td-no-width{
	width: 1%;
	white-space: nowrap;
}
.lh-1-3{
	line-height: 1.3em;
}
.text-underline{
	text-decoration: underline !important;
}

.max-width{
	width: 100%;
	max-width: 1000px;
	margin: 0px auto;
	padding-right: 20px;
	padding-left: 20px;
}
.max-width.max-width-800{
	max-width: 800px;
}
.max-width.max-width-1500{
	max-width: 1500px;
}
.wrapper.max-width{
	padding-top: 20px;
}

@media (min-width: 737px){
	.wrapper.max-width{
		padding-top: 20px;
	}
}

.flex-vcenter{
	display: flex;
	align-items: center;
}
.has-scroll{
	overflow: auto;
}
.input-hidden{
	border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}
.table-image,
.table-video{
	display: block;
	width: 100px;
	height: 100px;
	border: 1px solid var(--n2-yellow);
	background: var(--n2-black);
}
.table-image{
	background-size: cover;
	background-position: center;
}
.table-video video{
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.page-title{
	margin: 0;
  margin-bottom: 10px;
  padding-top: 20px;
	font-size: 35px;
}

:root:not(.theme_dark) [theme="dark"]{
	display: none;
}
:root.theme_dark [theme="light"]{
	display: none;
}

/* Horizontal Scroll */
@media (max-width: 736px){
	.horizontal-scroll{
		display: flex;
		/*white-space: nowrap;*/
		overflow-x: auto;
	}
	.horizontal-scroll > *{
		flex-shrink: 0;
		/*
		white-space: normal;
		display: inline;
		*/
	}
}


/* Elements */
html body #header{
	position: fixed !important;
	height: 60px;
  align-items: center;
	background: var(--n2-yellow) !important;
	box-shadow: 0px 10px 5px rgba(0,0,0,0.1) !important
}
html body #header::before {
  content: "";
  display: block;
  position: absolute;
  top: 100%; left:0;
  width: 100%;
  height: 10px;
  background: var(--n2-background);
  z-index: 1;
}
html body #header nav{
	margin-left: auto;
	margin-right: 1em;
	position: relative;
	right: 0;
}
body #header > #header-inner{
	position: relative;
	max-width: 1920px;
	width: 100%;
	height: 100%;
	display: flex;
	margin: auto;
	z-index: 2;
}
body #banner .content .image{
	height: 15em;
	margin-left: 0;
}
body #titleBar{
	background: var(--n2-background);
}
body #titleBar .title a{
	color: var(--n2-text-color) !important;
}
#titleBar img{
	display: none;
}
#titleBar .title{
	display: flex;
	align-items: center;
	justify-content: center;
}
#titleBar .title-name{
	font-size: 20px;
}
#logo .title-name{
	display: none;
}
#logo{
	padding:5px;
}
#logo a{
	display: block;
	height: 65px;
	transition: height 200ms ease-in-out;
}
body.scroll #logo a,
body.small-logo #logo a{
	height: 100%;
}
#logo img{
	display: block;
	height: 100%;
	/* filter: var(--n2-logo-filter); */
}
#form-delete{
	margin: 0;
}
#page-wrapper{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#simple-container{
	padding-top: 20px;
	padding-bottom: 40px;
}

body #footer{
	padding: 0;
	margin-top: auto;
}
body #footer #footer-inner{
	padding: 4em;
}
#footer .copyright{
	color: var(--n2-text-color);
}

@media (min-width:737px){
	body #footer #footer-inner{
		padding: 6em;
	}
}

#advanced-search{
	text-align: center;
	cursor: pointer;
}
#advanced-search::after {
  content: "\f0dd";
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
	display: inline-block;
	transform: translateY(0px);
}
#advanced-search[aria-expanded="true"]::after {
  content: "\f0de";
	transform: translateY(4px);
}
body #banner{
	background-position: 50% 50%;
	background-image: url("../../images/foto/foto01.jpg");
  background-repeat: no-repeat;
}
body #banner::after{
	background-image: none;
}
body #banner #banner-background{
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
}
body #banner #banner-background .slick-slide{
	background-position: center center;
	background-size: cover;
}

.banner-background-video{
	height: 100%;
}
body #banner #banner-background .banner-background-video video{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

#index-popup{
	position: absolute;
	width: 100%;
	height: 1px;
  min-height: calc(100vh - 44px);
  z-index: 99;
}
#index-popup-inner{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
#index-popup .slick-slide{
	background-position: center center;
	background-size: cover;
}

#index-popup .index-popup-img{
	position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#index-popup .index-popup-img img{
  max-width: 100%;
  max-height: 100%;
	max-height: calc(100vh - 70px);
}
#index-popup .index-popup-video{
	position: relative;
	display: flex;
	padding: 20px;
	max-height: 100%;
}
#index-popup .index-popup-video video{
	display: block;
  max-width: 100%;
  max-height: 100%;
}
#index-popup .index-popup-video .unmute{
	position: absolute;
	top:0; left: 0;
	width: 100%; height: 100%;
	padding: 20px;
}
#index-popup .index-popup-video .unmute::before{
	content: attr(text);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%; height: 100%;
	color: white;
	background: rgba(0,0,0,0.5);
}

#index-popup-close{
	position: absolute;
	top: 20px; right: 20px;
	width: 40px; height: 40px;
  background: white;
  border: 5px solid white;
	cursor: pointer;
}

@media (min-width: 737px){
	#index-popup{
  	min-height: 100vh;
	  padding-top: 70px;
	}
}

body .spotlight::before{
	background-image: none;
}
body .spotlight.style1 .content,
body .spotlight.style2 .content{
	border-color: transparent;
	color: var(--n2-text-color);
}
body .wrapper.style2{
	background-color: var(--n2-yellow);
}
body .spotlight .content h2 {
  color: var(--n2-yellow);
	font-weight: 600;
	line-height: 1.2em;
}
body .spotlight .content,
body .spotlight .content h2 + p{
	color: var(--n2-text-color);
}
body .spotlight .content h2 + p{
	font-weight: bold;
}
body #banner .content h2{
	color: var(--n2-yellow);
	font-weight: 600;
}
body #banner .content .image{
	text-align: center;
	border-radius: 0;
}
body #banner .content .image img{
	position: relative;
	z-index: 1;
	display: inline-block;
	width: auto;
	max-width: 100%;
	max-height: 100%;
	border-radius: 0;
}
body #banner .content {
  width: 100%;
  max-width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  display: flex;
	flex-direction: column;
  justify-content: center;
	align-items: center;
	text-align: center;
}
body #banner .content::after {
  content: "";
  display: none;
  position: absolute;
  bottom: 0; left:0;
  height: 100px;
  width: 100%;
  background: var(--n2-yellow);
}

table.simple thead{
	font-weight: bold;
}
table.simple td{
	padding: 5px;
	padding-left: 10px;
}
table.simple tr{
	background: none !important;
	border-bottom: var(--n2-light-border);
}
table.simple thead tr{
border-bottom: var(--n2-input-border);
}
table.simple tbody tr:hover{
	background: rgba(255,255,255,0.05) !important;
}
.list-option{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 100%;

	color: var(--n2-text-color);
	transition: none;
}
.list-option:hover{
	background: var(--n2-check-background);
	color: var(--n2-black) !important;
}
.list-option > i{
	pointer-events: none;
}

/* Override */
a.n2-override{
	color: var(--n2-text-color);
	text-decoration: none;
}
a.n2-override:hover{
	color: var(--n2-text-color) !important;
	text-decoration: underline !important;
}
.badge{
	font-weight: 600;
	border-radius: var(--n2-input-border-radius);
}
.modal .select2-dropdown{
	margin-top: -2px;
	margin-left: -1px;
}
.custom-file-label{
	border-radius: var(--n2-input-border-radius) !important;
}
.ui-sortable-handle{
	cursor: grab;
}
td.ui-sortable-handle{
	display: table-cell;
}

.slick-list,
.slick-track{
	height: 100%;
}

body .modal{
	z-index: 10003;
}

/* Override Elements */
body label{
	color: var(--n2-text-color);
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6{
	color: var(--n2-text-color);
}
html body,
body, input, select, textarea{
	font-size: 16px;
}
html, body{
	background: var(--n2-background) !important;
}
body.landing::before{
  font-family: var(--fa);
  font-weight: 600;
  color: var(--n2-yellow);
}

body,
html body.landing::after{
	background: var(--n2-background) !important;
}
body .image::before{
	content: none;
}
.icon.major,
#footer{
	background: var(--n2-background-secondary) !important
}
.spotlight .content{
	background: var(--n2-background) !important;

}
#footer .icons .icon.alt::before,
.icon.major.alt::before{
	color: var(--n2-background-secondary) !important;
	text-shadow:
		1px 0 0 var(--n2-text-color),
		-1px 0 0 var(--n2-text-color),
		0 1px 0 var(--n2-text-color),
		0 -1px 0 var(--n2-text-color) !important;
}

body .breadcrumb-item.active{
	color: var(--n2-text-dim);
}

body input[type="submit"]:hover,
body input[type="submit"]:active,
body input[type="reset"]:hover,
body input[type="reset"]:active,
body input[type="button"]:hover,
body input[type="button"]:active,
body .button:hover,
body .button:active{
	box-shadow: inset 0 0 0 1px var(--n2-yellow);
	color: var(--n2-yellow) !important;
}

body #header nav{
	display: flex;
	height: 100%;
}
body #header nav ul{
	display: inline-flex;
	align-items: center;
	height: 100%;
}
body #header nav ul li{
	display: inline-flex;
	align-items: center;
	padding: 0;
	height: 60px;
}
body #header nav ul li.small-li{
	margin-left: 10px;
}
body #header nav ul li a{
	font-weight: 500 !important;
}
body #header nav ul li a:not(#menu-login-button):hover,
body #header nav ul li span:not(#menu-login-button):hover {
  border-bottom: 4px solid var(--n2-background);
	transition: none;
}
body #header nav ul li a,
body #header nav ul li span{
	line-height: 72px;
	padding: 0;
	font-weight: 500;
}
body #header nav ul li.active > a,
body #header nav ul li.active > span{
	color: var(--n2-black) !important;
}
.dropotron > li:not(:first-child){
	border-top: var(--n2-light-border);
}
.dropotron > li a,
.dropotron > li span{
	color: var(--n2-text-color);
	transition: none !important;
}
.dropotron > li.active > a,
.dropotron > li.active > span,
.dropotron a:hover{
	color: var(--n2-yellow) !important;
}
body .dropotron.level-0:before{
	display: none;
}

html body.landing::after{
	-moz-animation: overlay-hide .25s ease-in forwards !important;
	-webkit-animation: overlay-hide .25s ease-in forwards !important;
	-ms-animation: overlay-hide .25s ease-in forwards !important;
	animation: overlay-hide .25s ease-in forwards !important;
}
body.normal-font{
	font-family: "Montserrat", Roboto;
	font-weight: 400;
}
section.header-spacing{
	padding-top: 20px;
}
section.section-middle{

}
section.section-middle .section-inner{
	max-width: 1000px;
	margin: auto;
}
body .dropotron{
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.125);
	background: var(--n2-background);
}
body .dropotron.level-0{
	margin-top: 0;
}

html body .wrapper.style2 input[type="submit"].primary{
	color: white !important;
	border: 1px solid var(--n2-background) !important;
	background-color: #1c1d26 !important;
}
html body .wrapper.style2 input[type="submit"].primary:hover{
	color: var(--n2-background) !important;
	border: 1px solid var(--n2-background) !important;
	background-color: var(--n2-background) !important;
	box-shadow: none !important;
	background: none !important;
}

html body #banner .content .image{
	width: auto;
}
body.landing #banner .content header{
	width: 100%;
  text-shadow: 2px 2px 2px var(--n2-black);
  /*filter: drop-shadow(0px 0px 20px var(--n2-black));*/
}
body.landing #banner .content header h2{
	color: white;
}
body.landing #banner header p{
	color: white;
	line-height: 1.2em;
	margin-top: 0px;
}
body header p br{
	display: inline;
}


@media (min-width: 737px){
	body.landing #banner header p{
		font-size: 1.8em;
	}
}

@media (min-width: 980px){
	body.landing #banner .content header{
		width: auto;
	  padding: 5px 15px;
	}
}

.custom-file-label{
	background: none;
	color: var(--n2-text-color);
}
.custom-file-label::after{
	background: white;
	color: var(--n2-black);
	border-radius: 0;
}
.box .icon::before{
	font-family: 'Font Awesome 5 Free' !important;
	font-weight: 600 !important;
}

.tooltip[x-placement^="top"] .arrow::before{
	border-top-color: white !important;
}
.tooltip[x-placement^="bottom"] .arrow::before{
	border-bottom-color: white !important;
}
.tooltip .tooltip-inner{
	background: white !important;
	color: var(--n2-black) !important;
}



/* Header Mobile */
#navPanel{
	display: none !important;
	background: var(--n2-yellow) !important;
}

#header.n2-header-mobile{
	position: fixed;
	top:0; left:0;
  display: block;
	width: 275px;
	height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateX(-275px);
	transform: translateX(-275px);
	transition: transform 0.5s ease;
	box-shadow: none !important;
  z-index: 100000;
}
body.navPanel-visible #header.n2-header-mobile{
  -webkit-transform: translateX(0px);
	transform: translateX(0px);
}
body.scroll #header.n2-header-mobile #logo a,
body.small-logo #header.n2-header-mobile #logo a{
	height: 65px;
}

body #header.n2-header-mobile > #header-inner{
	flex-direction: column;
  padding: 10px 20px;
}
#header.n2-header-mobile h1{
	position: relative;
	height: 65px;
	padding: 0;
	left: 0;
  margin-bottom: 10px;
}
html body #header.n2-header-mobile nav{
	margin: 0;
}
body #header.n2-header-mobile nav ul{
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	padding: 0;
}
body #header.n2-header-mobile nav ul li{
	width: 100%;
	flex-direction: column;
  align-items: flex-start;
	margin-left: 0;
  height: 40px;
}
body #header.n2-header-mobile nav ul li a,
body #header.n2-header-mobile nav ul li span{
	line-height: 40px;
}

body #header.n2-header-mobile nav ul li.opener.open{
	height: auto;
}
body #header.n2-header-mobile nav ul li.opener.open ul{
  display: inline-flex !important;
  position: relative !important;
	padding-left: 15px;
}

body #header.n2-header-mobile nav ul li.last-li{
	margin-top: 20px;
}
body #header.n2-header-mobile .menu-ball:not(#theme-button):not(#menu-user-face){
	width: 30px;
}
body #header.n2-header-mobile .menu-ball{
	height: 30px;
	flex-shrink: 0;
	border: 2px solid var(--n2-black) !important;
}
body #header.n2-header-mobile .menu-lang-item{
	padding: 0 !important;
}

body #footer .copyright li{
	margin-top: 1.5em;
	padding: 0;
}

@media (min-width: 737px){
	#header.n2-header-mobile{
		display: none;
	}
}

@media (min-width: 737px) and (max-width: 829px){
	.no-menu-short{
		display: none !important;
	}
}
@media (max-width: 736px), (min-width: 830px){
	.menu-short{
		display: none !important;
	}
}

/* Animations */
.anim-spin{
	animation: spin 750ms steps(8, end) infinite;
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

@media (max-width: 980px){
	body #banner .content::after {
	  content: none;
	}
	body #banner .content{
		flex-direction: column;
    align-items: center;
	}

	.spotlight::before{
		content: none;
	}
	#one.spotlight .content .row{
		display: flex;
		flex-direction: column;
	}
	#one.spotlight .content .row > *{
		width: 100%;
		max-width: none;
	}
}

@media (max-width: 575px){
	.breadcrumb-item{
		width: 100%;
		padding-left: 0px !important;
	}
	.breadcrumb-item::before{
		display: none !important;
	}
}

@media (min-width: 737px){
	html body #header{
		display: flex;
	}
}

@media (max-width: 737px){
	body #banner .content .image{
		height: 12em;
	}
}

@media (max-width: 480px){
	.row.gtr-uniform > *{
		font-size: 14px;
	}
}

@media (min-width: 981px){
	br[index]{
		display: inline;
	}
	body .spotlight{
		display: flex;
		align-items: stretch;
		min-height: 100vh;
		height: auto;
	}
	body .spotlight.left{
		flex-direction: row-reverse;
	}
	body .spotlight .content{
		position: relative !important;
		height: auto !important;
		width: 35em !important;
	}
}


/* Fix for IOS */
body.is-touch .spotlight {
  background-attachment: scroll !important;
  height: auto !important;
	background: none !important;
}
body.is-touch .spotlight .image.main {
  display: block !important;
  margin: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}
body.is-touch .spotlight {
  display: block !important;
  min-height: auto !important;
  height: auto !important;
}
body.is-touch .spotlight .content{
	width: 100% !important;
	text-align: center !important;
}
body.is-touch .spotlight .content > * {
  max-width: 1000px;
  margin: auto;
}