@font-face {
	font-family: Montserrat;
	src: local("Montserrat-Regular"),
	local("Montserrat-Regular"),
	url(./font/Montserrat-Regular.ttf); 
}
body{ 
	margin: 0;
	overflow: hidden; 
	-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;
}
b,strong{
	color: #8ad3f7;
} 
.leaflet-control-container .leaflet-left{
    left: 10px;    
	margin-bottom: 141px;
}
.leaflet-control-zoom{
	display: flex;
}
.leaflet-control-zoom-in{
	background: black !important;
	border-top: 1px solid rgba(255, 255, 255, 0.438) !important;
	border-left: 1px solid rgba(255, 255, 255, 0.438) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.438) !important; 
	color: white !important;
	width: 31px !important;
	height: 31px !important;
}
.leaflet-control-zoom-out{
	background: black !important;
	border-top: 1px solid rgba(255, 255, 255, 0.438) !important;
	border-left: 2px solid rgba(255, 255, 255, 0.438) !important;
	border-right: 1px solid rgba(255, 255, 255, 0.438) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.438) !important;  
	color: white !important;
	width: 31px !important;
	height: 31px !important;
} 
.list-margin{
	margin-bottom: 10px;
}
.leaflet-control-container .leaflet-disabled{
	color: rgb(82, 82, 82) !important;
}
.leaflet-container a{
	color: #f57b0f;
}
.sabiduria{
	color: #4edeff;
}
.carisma{
	color: #f9ff4e;
}
.amabilidad{
	color: #e41392;
}
.valentia{
	color: #ff5f4e;
}

a{
	color: #f57b0f;
}    
.leaflet-disabled{
	color: #bbb !important;
}
#mapid { 
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9;   
    outline: none; 
	background: #202427;
	
} 
#container-map{
	pointer-events: auto;  
}
.div-iconos{
	vertical-align: top;
    display: inline-block;  
}
.div-iconos img{ 
	width: 20px;  
}
.islaimg{
	border-radius: 50%;
	border: 3px solid #fffefc;
}
.islapvpimg{
	border-radius: 50%;
	border: 3px solid #df2b25;
}
.mokokos{    
	border: 3px solid transparent !important; 
}
.background-moko{
	background:#d0650060!important; 
    border-radius: 50%;
	width: 100%;   
}
.div-iconos span{
	white-space: nowrap; 
}
.div-iconos .ciudades{
	margin-bottom: -5px; 
	width: 55px;    
} 
.iconos-barco, .iconos-barcomercante{
	cursor: default;
} 
.div-iconos .texto-ciudades{
	color: #f57b0f;
	font-weight: bold; 
	white-space: nowrap;
	text-shadow: 1px 0 0 black, -1px 0 0 black, 0 1px 0 black, 0 -1px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
} 
.patato{
	min-width: 55px;
	text-align: center;
}
.iconos-ciudad{
	text-align: center;
	margin-left: 0; 
	max-width: 0;
}
.ciudades{ 
	transition: 0.2s;
    width: 15px !important;
	height: 29px !important;
}  
.ciudades:hover{
	box-shadow: -5px 0 25px rgb(255, 255, 255) !important; 
} 
.elgacia:hover{
	box-shadow: none !important;  
}   
#elgacia:hover{  
	content: url(./imagenes/ciudades/elgaciahover.png);
}  
#elgacia{ 
	display: inline;
	margin: 0 auto;
	margin-left: -16px;
	margin-top: -16px;
	height: 135px;
	width: 135px;
}
.iconos-islapvp span{
	text-shadow: 0px 0 0 red, 0px 0 0 red, 0 0px 0 red, 0 0px 0 red, 1px 1px red, 0px -1px 0 red, 1px -1px 0 red, 0px 0px 0 red;
}
.iconos-isla span{
	text-shadow: 1px 0 0 black, -1px 0 0 black, 0 1px 0 black, 0 -1px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
}
.elgaciacity{
	margin: 0;
display: block;
}
.div-iconos span{ 
	min-width: 200px; 
	color: white; 
} 
.div-iconos img{ 
	margin-bottom: -5px;
}
.leaflet-marker-icon {
	background: none;
	border: none;
	box-shadow: none; 
}
.leaflet-interactive{
	cursor:pointer !important;
}
.guia{
	padding: 10px;
	text-decoration: none;
	background: rgb(44 45 46 / 40%);
	border: 1px solid rgba(136,136,136,.2);
	transition: 0.5s;
	color:white ; 
}
.guia:hover{ 
	background: #f57b0f1c; 
}
.guiadiv{
	text-align: center;
	padding-top:10px;
	padding-bottom: 10px;
}
.guiaquest{
	padding: 10px 10px 10px 20px;
	text-decoration: none;
	background: rgb(44 45 46 / 40%);
	border: 1px solid rgba(136,136,136,.2);
	transition: 0.5s;
	color:white !important; 
}
.guiaquest:hover{ 
	background: #f57b0f1c; 
} 
.grid{
	display: inline-grid;
}
.tabla-recetas{
	width: 100%;
	margin-top: 15px;
	border-collapse: collapse;
	margin-bottom: 15px;
	border:1px solid;
}
.tabla-recetas tr:nth-child(even){
	background-color: #3f3f3f;
}
.tabla-recetas tr{ 
	transition: 0.5s;
} 
.tabla-recetas th { 
	background-color: #d68f32ab;
	color: white;
}

.tabla-recetas td, .tabla-recetas th {
	border: 1px solid #ddd;
	padding: 8px;
  }
.leaflet-popup-content-wrapper {
	background: rgb(32, 32, 32); 
	box-shadow: 0px 0px 2px white !important; 
	color: white; 
	box-shadow: none;   
	position: absolute;   
	bottom: 0px;
} 
.leaflet-popup-tip{  
	background:#202020; 
	box-shadow: 0px 0px 2px white !important;  
} 
.leaflet-popup-content p{
	margin: 15px 0;
} 
.imgsecreto{
	width: 180px;
    border-radius: 50%;
    margin-top: 10px;
    border: 2px solid #ffcd1d;
}
.nowrap{
	white-space: nowrap;
}
.cancion{
	color: #8a92f7;
}
#marcador-portal{
	display: none;
}
.left{
	margin-right: 15px;
}
.right{
	margin-left: 15px;
}
.claserel .leaflet-popup-content-wrapper{
	position: relative !important;
	margin-top: 0px !important;   
	min-width: 300px;
}  
.imgitem {
	width: 25px !important;
    margin-top: -9px !important;
    margin-bottom: -8px !important;
    height: auto !important;
    margin-left: 3px !important;
    margin-right: 5px !important;
}
.quest, .leaflet-interactive.questmorada{
	margin-left: -5px !important;
}
.imgquest {
    width: 17px;
    vertical-align: sub;
}
.imgquestab{
	width:24px; 
	vertical-align:bottom; 
	position: absolute;
    margin-left: -1px;
    margin-top: 6px;
	pointer-events: none;
}
.leaflet-popup-content { 
	margin: 0px 10px 0px 10px; 
	width: auto !important;
	min-width: 200px;
	font-size: 14px;
	font-family: 'Montserrat';
}  
.grayscale{ 
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}
.leaflet-image-layer{
	height: auto !important;
}
.leaflet-tooltip{
	background: transparent;
	border: none;
	color: white;
	box-shadow: none; 
	font-size: 16px;
	font-weight: 600;
	text-shadow: -1px 1px 2px black;  
}
.portal{
	opacity: 0;
}
.leaflet-tooltip::before{
	display: none;
}
.historiaocultatit{
	color:#54cc11;  
	font-size: 12px;
	margin-left: 0px;
} 
.class-historiaoculta{
	margin-top: 0 !important;
}
.class-vista{
    margin-top: -1px;
}
.historiaadicionaltit{
	color:#eb36a6;  
	font-size: 13px;
	margin-left: 0px;
} 
.mazmorra{
	transition: 0.2s;
}
.vistas{
	color:#54e0ec !important;
	font-size: 13px;
	margin-left: 9px !important;
}
.ingrediente{
	color: #d5b57d !important;
	font-size: 13px; 
}
.class-ingrediente span{
	margin-left: 8px;
}
.class-monstruo span{
	margin-left: 10px;
} 
.class-ingrediente{
	margin-top: 0px;
}
.class-comerciante{
	margin-left: -2px;
}
.vista{
	margin-top: -15px !important;
}
.aventurero{
	color: #df8c25;
    text-align: center;
}
.descripcioneslabel{
	margin-left: 15px;
}
.destacado{
	margin-bottom: 5px;
	padding: 10px;
	background:rgb(22, 22, 22);
	border-radius: 10px;
}
.monstruos-img{
	max-width: 200px;
}
.text-shadow{text-shadow: 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;}
.comerciante{
	color: white;
	font-size: 13px;
}
.class-corazondegigante{
	font-size: 13px;
}
.jefesdezona{
	color:red !important;
	vertical-align: top; 
}
.monstruos{
	color: #fc9f3b !important;
	font-size: 13px;
}
.leaflet-popup{
	margin-bottom: 32px;
	margin-left: 5px;
}
.historiaoculta{
	z-index: 9999 !important;
	margin-left: -4px !important;
} 
.historiaadicional{
	z-index: 9999 !important;
	margin-left: -4px !important;
} 
.afinidad{
	color:#ff6ce1 !important;
}
.leaflet-popup-close-button{
	display: none;
}

.leaflet-interactive{ 
	cursor: zoom-in;
}
.container-botones{
    max-width: 300px;
    margin: 100px 0 0 50px;
}
.leaflet-control-attribution a:not(#test){ 
	display: none;
}
.leaflet-control-attribution{
	display: none;
}
.normal{
	background: linear-gradient(45deg, #656365, #2c2c2c);
}
.comun{
	background: linear-gradient(45deg, #588423, #132602);
}
.raro{
	background: linear-gradient(45deg, #104365, #102f48);
}
.epico{ 
	background: linear-gradient(45deg, #54106d, #30143e);
}
.legendario{ 
	background: linear-gradient(45deg, #ad6908, #573306);
}
.unico{ 
	background: linear-gradient(45deg, #ad460c, #49250b);
}
.pad5{
	padding: 5px;
}
.obra-texto{color:#c0924e;}
.habilidad-texto{color:#aa82ff;}
.dorado-texto{color:#e8cc5e;}
.critico-texto{color:#fa6565}
.especializacion-texto{color:#65faef}
.dominacion-texto{color:#facb65}
.rapidez-texto{color:#faf865}
.resistencia-texto{color:#d165fa}
.dominio-texto{color:#6575fa}
.valentia{color: #ff5f4e;}
.sabiduria{color:#4edeff;}
.carisma{color:#f9ff4e}
.amabilidad{color:#e41392}
.gesto-texto{color:#5497ac;}
.isla-texto{color: #7ceed9}
.tomo-texto{color: #ddbc93}
.eventocoop-texto{color:#59ec59}
.amarillo-texto{color:#f8f751}
.verde-texto{color:#40f810}
.positivo-texto{color:#8af7a0}
.g-1{color: #8df901}
.g-2{color: #00b0fa}
.g-3{color: #ba00f9}
.gvg-texto{color:#56a5b8}
.guildquest-texto{color:#a5b4ef}
.rojo-texto{color: #ff4a4a}
.normal-texto{color: #d3d0d0}
.blanco-texto{color: white}
.comun-texto{color: #8df901}
.raro-texto{color: #00b0fa}
.epico-texto{color: #ba00f9}
.legendario-texto{color: #f99200}
.unico-texto{color: #fa5d00}
.boton-cluster { 
    position: relative;
    z-index: 999;
    padding: 10px 20px;
    border-radius: 5px;
    max-width: 300px; 
    color: white;
	margin-bottom: 10px;
	font-family:Poppins;
		text-decoration: none;
	display: inline-block;
	padding: 1em 2em;
	text-align: center;
	background: #1a1919;
	background: linear-gradient(to top, #0e0e0e 10%, #222 80%) bottom;
			background-size: auto;
	margin-right: 10px;
	border-radius: 7px;
	border: none;
	padding: 15px 32px;
	font-size: 16px;
	text-transform: uppercase;
	font-weight: bold;
	box-shadow: 2px -2px #000 inset;
	transition: 0.5s ease-out;
	background-size: 200%;
	text-shadow: 1px 1px 1px black;
	width: 100%;
display: inline-block;
} 
.boton-cluster:hover{
    background: linear-gradient(to top, #f57b0f 10%, #222 10%) bottom;
}
.container-botones:last-child{
    margin-bottom: 0px;
}

#tituloh2{
	margin-top: 0;
	color: #df8c25;
	font-size: 1.3em !important; 
}
#tituloh4{ 
	font-size: 0.9em !important; 
	color: #dfc7a9;
	position: relative;
	font-family: 'Montserrat';
	margin-bottom: 10px;
	display: none;
}
#tituloh3{ 
	font-size: 0.9em !important; 
	color: #dfc7a9;
	position: relative;
	font-family: 'Montserrat';
	margin-bottom: 10px;
	display: none;
}
/*MARCADORES*/
.sidebarMarcadores{ 
	max-height: 744px;
	width: 250px; 
	position: absolute;
	z-index: 1;
	top: 0;
	right: 22px; 
	background: rgba(0, 0, 0, 1);
	overflow-x: hidden;
	transition: 0.5s; 
	z-index: 9999;
	text-align: center;
	opacity: 0;
	margin-top: 79px;  
	padding: 15px;
	pointer-events: none; 
	border-left: 1px solid rgba(255, 255, 255, 0.438);
	border-right: 1px solid rgba(255, 255, 255, 0.438);
	border-bottom: 1px solid rgba(255, 255, 255, 0.438);
}
.sidebarMarcadores::before{
	content : "";
	position: absolute;
	top: 0px;
	left: 0px;
	width: 218px;  /* or 100px */
	border-top: 1px solid rgba(255, 255, 255, 0.438);
}
.sidebarMarcadores a { 
	color: #dfc7a9 !important;
	text-decoration: none; 
	color: #ffffff;
	display: block;
	transition: 0.3s;
	width: 200px;
	margin: 0 auto;
	padding: 10px;
    background: rgba(32,35,38,.4);
    border: 1px solid rgba(136,136,136,.2); 
}
.sidebarMarcadores a:hover { 
	background: #f57b0f1c;   
}
.sidebarMarcadores a:hover span{ 
	display: none !important;
}
.sidebarMarcadores a:hover:before {
	content: "Ver el Tomo del Aventurero";
	white-space: nowrap;
}
ul{
	margin: 0;
    padding: 10px; 
    list-style: none;
	text-align: left;
}  
.sidebarMarcadores .closebtn {
	position: absolute;
	top: 0;
	font-size: 36px;
	left: 0;
	margin-left: 15px;
}
   
#main {
	transition: .5s;
	padding: 16px; 
	z-index: 999;
	left: 0;
	position: absolute;
	margin-left: 25px;
}
#mainMarcadores {
	transition: .5s;
	padding: 16px; 
	z-index: 999;
	right: 0;
	position: absolute;
    margin-right: 80px;
} 

.mostrar{ 
	opacity: 1;
}
.mostrar-buscador{
	margin-left: 25px;    
} 
.mostrar-side{
	margin-right: 0px;
	opacity: 1;
	pointer-events: auto;
} 

.mostrar-side-buscador{  
	opacity: 1 !important; 
	pointer-events: auto !important;
}
.verde{
	color:#8df901;
}
.confianza, .azul{
	color: #00b0fa;
}
.morado{
	color: #ba00f9;
}
#titulo-zona{
    z-index: 99999;
    position: absolute;
    top: 0;
    color: white;
    width: 100%;
    text-align: center;
}
.cluster-marcadores{
    background: rgba(32,35,38,.4);
    border: 1px solid rgba(136,136,136,.2);
    color: #fff;
    height: 44px;
    margin: 0 6px 10px 6px;
    position: relative;
    width: 100%;
	transition: 0.3s ease-in-out;
	cursor: pointer;
}
.cluster-marcadores:hover{
	background: #f57b0f1c;
}
.cluster-marcadores img{
    margin: 5px 10px !important;
    pointer-events: none !important;
    position: absolute !important;
	max-width:32px !important;
	left: 0; 
}

.cluster-marcadores span {
    display: block;
    line-height: 32px;
    overflow: hidden;
    padding: 5px 10px 5px 5px;
    position: relative;
    text-decoration: none !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    z-index: 1;
    color: white;
}
.sugerencias{
	font-family: 'Montserrat';
}
.cluster-marcadores button {
    display: block;
    line-height: 34px;
    text-align: left;
	font-family: 'Montserrat'; 
    overflow: hidden;
    padding: 5px 0px 5px 55px;
    position: relative;
    text-decoration: none !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    z-index: 1;
    color: white;
	background: transparent;
	border: none;
	cursor: pointer;
}

.toggle-marcador{
	opacity: 0.4;
}
.hidden{
	display: none;
}
.visibility{ 
	visibility: hidden !important;
	transition: 0s !important;
}
.visible{
	visibility: visible;
	display: block; 
} 
.sidebar { 
	width: 250px;
	position: absolute;
	z-index: 1; 
	top: 0;
	left: 22px; 
	overflow-x: hidden;
	transition: 0.5s; 
	z-index: 9999;
	text-align: center;
	margin-top: 79px; 
	opacity: 0;  
	padding: 15px;
	pointer-events: none;
	background: rgba(0, 0, 0, 1); 
	border-left: 1px solid rgba(255, 255, 255, 0.438);
	border-right: 1px solid rgba(255, 255, 255, 0.438);
	border-bottom: 1px solid rgba(255, 255, 255, 0.438);
  }
.sidebar::before{
	content : "";
	position: absolute;
	top: 0px;
	right: 0px;
	width: 218px;  /* or 100px */
	border-top: 1px solid rgba(255, 255, 255, 0.438);
}
.sidebar a { 
	text-decoration: none; 
	color: #ffffff;
	display: block;
	transition: 0.3s;
} 
.sidebar .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
} 
#myDropdown input[type=text] {
	padding: 10px;
	font-size: 17px;  
	width: 86%; 
	border-style:solid;
	border:none; 
	border-width:1px;
	border:1px solid #cccccc;
	background: #f1f1f100;
	color: white;
	margin-left: 7px; 
}
#myDropdown input[type=text]:focus {
	outline: none;  
}
#myDropdown button{
	display: none;
}
#myDropdown button{
    background: rgba(32,35,38,.4);
    border: 1px solid rgba(136,136,136,.2);
    color: #fff;
    height: 44px;
    margin: 10px 6px 0px 6px;
    position: relative;
    width: 95%;
	transition: 0.3s ease-in-out;
	cursor: pointer;
}  
#myDropdown button:hover{
	background: #f57b0f1c;
}
 

#myDropdown::after {
	content: "";
	clear: both;
	display: table;
}

#titulo-div{
	text-align: center;
    width: 100%;
    position: absolute;
    z-index: 999;
	pointer-events: none; 
}
#titulo-mapa{
	margin: 0 auto;
    font-size: 100px; 
    white-space: nowrap;
	transition: 0.4s;  
    color: #ffffff14;
}  
.class-ciudad{
    margin-top: -13px;
    left: -23px;
	position: absolute;
	transition: 0.4s;
    max-width: 2px;
}
.label-ciudad{ 
	color: #f57b0f;
	font-weight: bold; 
	font-size: 12px;  
	transition: 0.4s;
	white-space: nowrap;
	font-family: 'Montserrat';
	text-shadow: 1px 0 0 black, -1px 0 0 black, 0 1px 0 black, 0 -1px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
}
.fix-label{
	position: absolute;
    top: 19px;
    margin-left: -1px;
}
.label-ciudad{
	position: absolute;
    top: 46px;
    margin-left: 5px;
} 
.islas, .islaspvp, .islasaventura, .islaspvpaventura{
	transition: 0.2s;
    z-index: 999999999 !important;
}
.class-isla, .class-islapvp, .class-islaaventura, .class-islapvpaventura{    
	margin-left: 1px; 
	font-size: 12px;
	color: rgba(255, 255, 255, 0.63);
	transition: 0.4s;
	white-space: nowrap; 
	font-family: 'Montserrat';
	text-shadow: 1px 0 0 black, -1px 0 0 black, 0 1px 0 black, 0 -1px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
}
.class-barcofantasma{
	margin-left: 1px; 
	font-size: 10px;
	color: rgba(255, 255, 255, 0.63);
	transition: 0.4s;
	white-space: nowrap; 
	font-family: 'Montserrat';
	text-shadow: 1px 0 0 black, -1px 0 0 black, 0 1px 0 black, 0 -1px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
} 
.class-navegacioncooperativa{
	margin-left: 1px; 
	font-size: 10px;
	color: rgba(255, 255, 255, 0.63);
	transition: 0.4s;
	white-space: nowrap; 
	font-family: 'Montserrat';
	text-shadow: 1px 0 0 black, -1px 0 0 black, 0 1px 0 black, 0 -1px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
}
.class-portales{
	margin-left: 1px; 
	font-size: 10px;
	color: rgba(255, 255, 255, 0.63);
	transition: 0.4s;
	white-space: nowrap; 
	font-family: 'Montserrat';
	text-shadow: 1px 0 0 black, -1px 0 0 black, 0 1px 0 black, 0 -1px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
}
.class-isla:hover, .class-navegacioncooperativa:hover{
	color: white;
}
.class-islapvp:hover{
	color: rgb(240, 143, 143); 
}
.class-barcofantasma:hover{
	color: rgb(199 154 231);
}
.class-portales:hover{
	color: rgb(140 243 240);
}
.class-corazondegigante{
	margin-left: 12px;
	white-space: nowrap;
	text-shadow: 1px 0 0 black, -1px 0 0 black, 0 1px 0 black, 0 -1px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
}
.class-obramaestra{
	color: #c0924e;
	margin-left: 19px;
	white-space: nowrap;
	text-shadow: 1px 0 0 black, -1px 0 0 black, 0 1px 0 black, 0 -1px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
}
.class-pasoprevio{
	color: white;
	margin-left: 10px;
	white-space: nowrap;
    margin-top: -2px;
	text-shadow: 1px 0 0 black, -1px 0 0 black, 0 1px 0 black, 0 -1px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
}
.obramaestra{
	color: #c0924e;
}
h2{
	font-size: 1.4em !important;
	font-family: 'Montserrat'; 
	margin-bottom: 10px; 
}
h3{ 
	font-family: 'Montserrat';
}
#buscarmapa, #marcadores, #ayuda, #discord, #mundo, #anterior, #thelordoftheguides, #uncafe{
	position: absolute;
	z-index: 99999999999;
	border-top: 1px solid rgba(255, 255, 255, 0.438);
	border-left: 1px solid rgba(255, 255, 255, 0.438);
	border-right: 1px solid rgba(255, 255, 255, 0.438);
	border-bottom: 1px solid rgba(255, 255, 255, 0.438); 
}
.bottombox{  
	border-bottom: 1px solid rgba(255, 255, 255, 0) !important; 
}
.bottombox:hover{  
	background: black !important; 
	transform: scale(1) !important; 
}
#buscarmapa{
	left: 22px;
	top: 15px;
    font-size: 22px;
	vertical-align: middle;
}
#marcadores{
	right: 22px;
	top: 15px;
    font-size: 22px;
	vertical-align: middle;
}
#ayuda{
	bottom: 15px;
	right: 22px; 
    font-size: 22px;
	vertical-align: middle; 
}
#mundo{
	bottom: 15px;
	right: 161px; 
    font-size: 28px;
	vertical-align: middle; 
}
#copyright{
	position: absolute;
	bottom: 0;
	z-index: 9999;
	display: flex;
	text-align: center;
	width: 100%; 
    justify-content: center;
	
}
#copyright a{
	color: white;
	font-size: 10px;
	font-family: 'Montserrat';
	text-shadow: 0 0 2px black;
}
.grayscale{
	filter: grayscale(100%);
}
#anterior{
	bottom: 15px;
	right: 160px; 
    font-size: 35px;
	vertical-align: middle; 
	display: flex;
}
#buscarmapa span{
	position: absolute; 
}
#marcadores span{
	position: absolute; 
}
#ayuda span{
	position: absolute; 
}
#anterior span{
	position: absolute; 
}
.fortaleza{
	color: #ff0060;
}
.questamarilla, .questnormal{
	color: #fce949;
}
.questmorada{
	color: rgb(188 98 239);
}
#mundo span{
	position: absolute;
	top: 12px;
    left: 12px;
}
#discord{
	bottom: 15px;
	right: 90px; 
	height: 62px;
}
#discord img{  
    width: 30px;
}  
#thelordoftheguides{
	bottom: 15px;
	left: 22px; 
    font-size: 22px;
	vertical-align: middle; 
}
#thelordoftheguides img{ 
    width: 42px;
} 
#uncafe{
	bottom: 84px;
	left: 22px; 
    font-size: 22px;
	vertical-align: middle; 
}
#uncafe img{ 
    width: 42px;
}
#marcadores img{  
    width: 30px;
}
.fichadeisla{
	border: 1px solid;
	animation-name: backgroundColorPalette;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  border-radius: 50%;
}
.rainbow{
    color:white;
	animation: rainbow_animation 2.5s linear;
	animation-iteration-count: infinite;
}
@keyframes backgroundColorPalette {
  0% {
    border-color: #ee6055;
	box-shadow: 0 0 10px #ee6055;
  }
  25% {
    border-color: #60d394;
	box-shadow: 0 0 10px #60d394;
  }
  50% {
    border-color: #aaf683;
	box-shadow: 0 0 10px #aaf683;
  }
  75% {
    border-color: #ffd97d;
	box-shadow: 0 0 10px #ffd97d;
  }
  100% {
    border-color: #ff9b85;
	box-shadow: 0 0 10px #ff9b85;
  }
}
@keyframes rainbow_animation {
	0% {
		color: #ff9b85; 
	  }
	  25% {
		color: #60d394; 
	  }
	  50% {
		color: #aaf683; 
	  }
	  75% {
		color: #ffd97d; 
	  }
	  100% {
		color: #ff9b85; 
	  }
}
.botonsitos{ 
	width: 64px;
	height: 64px;
	border:1px transparent;
	border:none;
	background: rgba(0, 0, 0, 1);
	color: white;
	cursor: pointer;
	transition: 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.botonsitos span, .botonsitos img{
	transition: 0.2s;
}
.botonsitos:hover > span{   
	transform: scale(1.1);
}
.botonsitos:hover > img{   
	transform: scale(1.1);
}
#panelayuda{
	position: absolute;
	width: 100%;
	z-index: 10; 
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center; 
	pointer-events: auto;
	font-family: 'Montserrat';
}
#panelayuda li{ 
	margin-bottom: 5px;
}
#panelayuda .videohelp{
	padding: 20px 30px; 
	background: rgba(0, 0, 0, 0.89);
	text-align: center;
	width: 50%;
	color: white;
	margin: 0 auto; 
	position: relative;
	margin-top: 50px;
}
.mostrar-ayuda{ 
    display: flex !important;
	pointer-events: auto !important;
} 


div::-webkit-scrollbar {
    width: 5px;  
}
div::-webkit-scrollbar-track {
    background-color: rgb(29, 29, 29);
}

div::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgb(231, 158, 21);
}
@media only screen and (max-width: 1200px) {
	#titulo-mapa {
	  font-size: 60px;
	}
	#panelayuda .videohelp{
		padding: 20px 30px;  
		max-height: 450px;
		overflow: scroll;
	}
}
@media only screen and (max-height: 700px) {
	#titulo-mapa {
	  font-size: 60px;
	} 
	.sidebar::before{
		width: 231px;
	}
	.sidebar{ 
		max-height: 400px;
		margin-top: 78px;
		overflow-y: auto;
	}
	.sidebarMarcadores::before{
		width: 232px;
	}
	.sidebarMarcadores{
		max-height: 400px;
		margin-top: 78px;
		overflow-y: auto;
	}
	.cluster-marcadores{
		height: 32px;
	}
	.cluster-marcadores img{
		margin: 2px 10px !important;
		max-width: 25px !important;
		height: 25px !important;
	}
	.cluster-marcadores button{
		padding: 0px 0px 0px 55px
	}
}

@media only screen and (max-height: 550px) {

	.sidebarMarcadores{ 
		max-height: 312px;
	}
}

@media only screen and (max-width: 1000px) {
	#titulo-mapa {
	  font-size: 50px;
	} 
	.videohelp{ 
		max-height: 450px;
		width: 500px;
		overflow: scroll;
	}
	#panelayuda .videohelp{
		padding: 10px 15px;  
	}
  }

@media only screen and (max-width: 500px) {
	#titulo-mapa {
	  font-size: 50px;
	}
	#anterior{
		display: flex; 
	} 
	#panelayuda .videohelp{
		margin-top: 100px;
		width: 300px;
		padding: 10px 10px;  
	}
	.sidebarMarcadores{
		max-height: 400px;
		overflow:scroll
	}
  }
.image-cropper {
	width: 100px !important;
	max-width: 500px;
	height: 100px; 
	position: relative; 
	border-radius: 50%; 
    border: 3px solid;
    animation-name: backgroundColorPalette;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;  
}  
@keyframes rotateBorder {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(360deg);
	}
  }

#twitch-embed{
  position: fixed;
  bottom: 10px; 
  left: 100px;
  z-index: 9999999; 
}  
#twitch-embed iframe{
	width: 300px;
	height: 172px;
}
@media only screen and (max-width: 1000px){
	#twitch-embed{
		display: none;
	} 
}