/*
Theme Name: Sombrilla Music
Theme URI: https://hvsombrilla.com
Author: HV Sombrilla
Author URI: https://hvsombrilla.com
Description: WordPress theme for Sombrilla Music
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sombrilla-music
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

a:hover {
    text-decoration: none;
}

h2 {
    margin: 20px 0;
}
:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #ff3850;
    --red: #e62e2d;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #014177;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
}

/* ESTILOS GENERALES DEL SISTEMA */
*{
	font-family: 'poppins','sans-serif', 'arial';
	box-sizing: border-box;
	position: relative;
	font-size: 12.5px;
}

/* MANEJO DE IMAGENES SEGUN CARGA */

img[data-original] { opacity: 0; }
img{opacity: 1; transition: opacity 0.3s; } 


/* SCROLL BAR ESTILOS*/

::-webkit-scrollbar {
	 background-color: #fff;
      width: 8px !important;
}

::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      color:#e62e2d;
} 

/* ELEMENTOS GENERALES Y ESTILOS DE FABRICA */

body, html, form{
	font-size: 12px !important;
	margin: 0;
	padding:0;
}

h1, h2, h3, h4{
	margin: 0;
}

a{
	text-decoration: none;
	font-size: inherit;
	cursor: pointer;
}

span.a{
	cursor: pointer;
}

span.a:hover{
	border-bottom: solid 1.8px currentColor;
}


p{
	padding: 0;
	margin: 0;
}

i{
	font-size: inherit !important;
}

.underline{
	text-decoration: underline;
}

.no-margin{
	margin: 0;
}

ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

table{
	border-collapse: collapse;
}

.main{
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
}

.main-90{
	width: calc(100% - 40px);
	margin: 0 auto;
}

.main-auto{
	margin: 0 auto;
}

/* FLEXBOX SITIO WEB RESPONSIVE */

.flex{
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}

.flex > div{
	flex: 1;
}


.grid{
	--minimumColumnWidth: 140px;
	grid-gap: 20px; 
	display: grid; 
	grid-template-columns: repeat(auto-fill,minmax(var(--minimumColumnWidth),1fr)); 
}

.aling-top{
	align-items: flex-start;
}

.aling-bottom{
	align-items: flex-end;
}

.flex-column{
	display: flex;
	flex-flow: column nowrap !important;
	justify-content: space-between;
}

.flex-column > div{
	flex: 1;
}

.initial{
	flex: initial !important;
}

.block{
	display: block !important;
}

.display-none{
	display: none;
}

.hidden{
	overflow: hidden;
}

.scroll-y{
	overflow-y: auto;
}

.scroll-x{
	overflow-x: auto;
}

.sticky{
	position: sticky !important;
}

.shadow{
	box-shadow: 0 3px 3px 0 rgba(21,27,38,.15);
}


input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  /*border: 1px solid green;*/
  /*-webkit-text-fill-color: green;*/
  /*-webkit-box-shadow: 0 0 0px 1000px #000 inset;*/
  transition: background-color 5000s ease-in-out 0s;
}

/*VENTANA MODAL*/

#modal{
	display: none;
	opacity: 0;
	justify-content: center;
	align-items: center;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
	background-color: rgba(0,0,0,.7);
	/*background-color: rgba(39,50,64,.6);*/

}

#modal > .caja{
	display: flex;
	max-width: 90%;
	height: auto;
	max-height: 95vh;
	border-radius: 3px;
	position: relative;
	/*box-shadow: 0 2px 3px rgba(0,0,0,.1);*/
}

#conexion{
	display: none;
	width: 100%;
	height: 100%;
	z-index: 5;
	background-color: rgba(39,50,64,.6);
	position: fixed;
	left: 0;
	top: 0;
}

#conexion .bloque2{
	background-color: #fff;
	padding: 10px;
}

/*FUENTES DE TEXTOS*/

.bold{
	font-weight: bold;
}

.light{
	font-weight: lighter;
}

.bold-400{
	font-weight: 500;
}

.lt-text{
	font-size: 11px;
}

.uppercase{
	text-transform: uppercase;
}

.capitalize{
	text-transform: capitalize;
}

.relative{
	position: relative;
}

.center{
	text-align: center;
}

.right{
	text-align: right;
}

.left{
	text-align: left;
}

.centro{
	display: flex;
	justify-content: center;
	align-items: center;
}

.lh14{
	line-height: 14px;
}

.minleng{
	color: #8694a3;
}

.text-primary{
	color: var(--primary);
}

.text-red{
	color: var(--red);
}

.text-success{
	color: var(--success);
}

.text-warning{
	color: var(--orange);
}

.text-white{
	color: #fff;
}

/*MARGENES Y ESPACIOS*/
.padding-l{ padding: 10px; }
.padding-m{ padding: 20px; }
.padding-b{ padding: 40px; }
.padding-v{ padding: 20px 0; }
.padding-v-m{ padding: 10px 0; }
.padding-v-b{ padding: 60px 0; }
.padding-h{ padding: 0 20px; }
.padding-h-m{ padding: 0 20px; }

.margin-top{margin-top: 20px;}
.margin-top-l{margin-top: 10px;}
.margin-bottom{margin-bottom: 20px;}
.margin-bottom-l{margin-bottom: 10px;}

.margin-left{ margin-left: 20px; }
.margin-right{ margin-right: 10px; }
.margin-v{ margin: 20px 0; }


/* BOTONES */

.btn{
	border: 0px solid transparent;
	outline: 0 !important;
	white-space: nowrap;
	vertical-align: middle;
	padding: 8px 35px;
	font-size: 12px;
	text-align: center;
	display: inline-block;
	border-radius: 2px;
	cursor: pointer;
	font-weight: 500;
	transition: all ease .3s;
}

.btn-radio{
	border-radius: 25px;
}


.btn-primary{
	background-color: rgb(33, 132, 190)  !important;
	border-color: #007bff;
	color: #fff;
}

.btn-red{
	background-color: var(--red)  !important;
	border-color: #007bff;
	color: #fff;
}

.btn-primary-flat{
	background-color: transparent !important;
	border:solid 1px var(--primary);
	color: var(--primary);
}

.btn-primary-flat:hover{
	background-color: var(--primary) !important;
	color: #fff;
}


.btn-white-flat{
	background-color: rgba(250,250,250,.2) !important;
	border:solid 2px #fff;
	color: #fff;
}

/*LOADING FOR WEB*/
#loadingweb{
	display: none;
	position: fixed;
	left: 0;
	top:0;
	width: 100%;
	height: 100%;
	background-color: rgba(250,250,250,.4);
	z-index: 20;
	justify-content: center;
	align-items: center;
}


#loading{
 	padding: 10px;
 	background-color: transparent;
 	width: 30px;
 	height: 30px;
 	display: inline-block;
 	vertical-align: middle;
 	border: solid #e6e6e6 4px;
 	border-top: 4px solid #0176fe;
 	border-radius: 100%;
 	animation-name: rotate;
 	animation-duration: 1s;
 	animation-iteration-count: infinite;
 	animation-timing-function: linear;
 	animation-fill-mode: forwards;
 }


 #loading2{
 	background-color: transparent;
 	width: 20px;
 	height: 20px;
 	display: inline-block;
 	opacity: 1;
 	vertical-align: middle;
 	border: solid #e6e6e6 2px;
 	border-top: 2px solid #0176fe;
 	border-radius: 100%;
 	animation-name: rotate;
 	animation-duration: 1s;
 	animation-iteration-count: infinite;
 	animation-timing-function: linear;
 	animation-fill-mode: forwards;
 }

 @keyframes rotate{
 	0%{
 		transform: rotate(0deg);
 	}

 	100%{
 		transform: rotate(360deg);
 	}
 }

 
/*ELEMENTOS DIRECTOS*/
body{
	    background-color: #eee;

	min-height: 100vh;
	user-select: none; 
}


nav{

	z-index: 1000;
	color: #fff;
	padding: 0;
}


.menu > li {
	display: inline-block;
}

.menu > li a{
	display: inline-block;
	padding: 10px 10px;
	cursor: pointer;
	font-weight: 600;
	font-weight: 12px;
}

.menu > li a > i{
	margin-right: 5px;
}


.menu > li a.active{
	color: var(--primary);
}

h2{
	font-size: 23px;
	font-weight: bold;
}

.elipsis{
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.btn-descargar{
	background-color: var(--primary);
	color: #fff;
	font-weight: bold;
	padding: 13px 15px;
	border-radius: 25px;
	/*border: solid 10px #131313;*/
}

#menu{
	width: 250px;
	height: 100vh;
	background-color: #000;
	color: #fff;
}


#menu li a{
	display: inline-block;
	padding: 10px;
	font-size: 14px;
	font-weight: 500 !important;
	width: 100%;
	border-radius: 5px;
	color: rgba(250, 250, 250, .9);
	/*transition: all ease .2s;*/
}


#menu li a:hover{
	/*background-color: rgba(250, 250, 250, .1);*/
	background-color: var(--primary);
	color: #fff !important;
}

#menu li a.active{
	background-color: var(--primary);
	color: #fff !important;
}

#menu li a:hover i{
	color: #fff;
}

#menu li a i{
	font-size: 18px !important;
	margin: 0 15px 0 7px;
	color: rgba(250, 250, 250, .9);
}

#cuerpo{
	/*height: 100vh;
	overflow-y: auto;*/
	color: #2a2a2a;
}

#cuerpo2{
	min-height: 70vh;
	overflow-y: auto;
	color: #fff;
}

i{
	font-size: inherit;
}

#buscador {
    float: right;
    max-width: 300px;
    background-color: #e6e6e6;
    border-radius: 2px;
    margin: 5px;
    height: 100%;
    padding: 4px;
}

#buscador input{
	background-color: transparent;
	border: 0;
	outline: 0;
	padding: 7px 15px;
	width: 100%;
}

.shadow{
	box-shadow: 0 8px 24px rgb(0 0 0 / 50%);
}

 .articulo{
 	width: 100%;
 	max-width: 400px;
 }

 .articulo .coverflex{
 	padding-top: 60%;
 }

 .articulo .detalles{
 	position: absolute;
 	left: 0;
 	bottom: 0;
 	width: 100%;
 	padding: 10px;
 	background-image: linear-gradient(transparent 0%,rgba(0,0,0,.9) 95%);;
 	height: 50%;
 }

 .articulo .detalles .titulo{
 	font-size: 20px;
 	font-weight: 600;
 	position: absolute;
 	bottom: 10px;
 }


 .mp3{
    padding: 0;
    width: 100%;
    max-width: 200px;
    /*background-color: rgba(250,250,250,.04);*/
    /*margin-bottom: 20px;*/
    color: #2a2a2a;
    border-radius: 6px;
    transition: all ease .3s;
 }


 .mp3 .titulo{
 	font-size: 12px;
 	font-weight: 500;
 	text-transform:capitalize;
 }


 .mp3:hover{
     /*background-color: rgba(250,250,250,.09);*/
 }

 .mp3:hover .cover > span{
    opacity: 1;
    /*bottom: 10px;*/
 }

 .mp3 .cover{
 		display: flex;
    width: 100%;
    padding-bottom: 100%;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
        box-shadow: 0 5px 6px rgb(0 0 0 / 50%);
 }


 .mp3 .cover > img{
    position: absolute;
    left: 0;
    top: 0;
    width: inherit;
    height: inherit;
    object-fit: cover;
 }


.nowrap{
	flex-flow: row nowrap;
}

 .mp3 .cover > span{
    width: 100%;
    height: 100%;
    background: linear-gradient(153deg, transparent 0%, var(--primary) 100%);
    color: #fff;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    /*border-radius: 100%;*/
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all ease .3s;
 }

 .mp3 .cover > span i{
 	font-size: 25px !important;
 	color: rgba(250, 250, 250, .9);
 }

 #articulo{
 	width: 100%;
 	max-width: 400px;
 	padding: 20px;
 }

.title{
	font-size: 3.4em;
	font-weight: 600;
	color: #fff;
}

.coverflex{
	width: 100%;
	/*max-width: 200px;*/
	padding-top: 100%;
	overflow: hidden;
	border-radius: 4px;
	background-color: #ddd;
}


.coverflex > img{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	min-width: 100%;
	object-fit: cover;
}


.coverflex .controles{
	position: absolute;
	right: 10px;
	top: 20px;
	transition: all ease .3s;
	opacity: 0;
}

.coverflex:hover .controles{
	top: 10px;
	opacity: 1;
}

.btn-lite {
    color: #fff;
    font-weight: bold;
    width: 35px;
    height: 35px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #131313;
    border-radius: 8px;
    cursor: pointer;
}


.bloque{
	background-color: #fff;
	padding: 25px 35px;
	border-radius:5px;
	/*border: 1px solid #dfe4ed;*/
	margin-bottom: 20px;
}

/*MENU DESPLEGABLE DEL NAV*/

.search{
	background-color: #fff;
	padding: 5px 12px;
	border-radius: 25px;
	display: inline-block;
}

.search i{
	color: #e96729;
	font-size: 16px !important;
}

.search input{
	width: 200px;
	border: 0;
	outline: 0;
	padding: 5px 15px;
	transition: all ease .3s;
	background-color: transparent;
	color: #292929;
}

.search input::placeholder{
	color: #bbb;
	font-weight:initial;
}

.search input:focus{
	width: 450px;
}

.buscadorflat{
	padding: 15px 0;
}

.buscadorflat .icono{
	font-size: 16px !important;
	margin-right: 10px;
	color: #fff;
}

.buscadorflat input{
	border: 0;
	background-color: transparent;
	padding: 10px;
	width: 200px;
	outline: none;
	font-size: 14px;
}

.buscadorflat input::placeholder{
	font-size: 18px;
	color: #ddd;
}

.desplegable{
	cursor: pointer;
}

.desplegable .menu-2{
	display: none;
	position: absolute;
	right: 0;
	top: 28px;
	background-color: #fff;
	border-radius: 5px;
	z-index: 1;
	min-width: 180px;
	box-shadow: 0 0 6px rgba(0,0,0,.05);
}

.desplegable .menu-2 > ul{
	width: 100%;
	list-style: none;
}

.desplegable .menu-2 > ul li{
	width: 100%;
}

.desplegable .menu-2 li > a{
	display: inline-block;
	width: 100%;
	padding: 10px 15px;
	font-size: 12px;
}

.desplegable .menu-2 li > a:hover{
	color: var(--primary);
}
.desplegable .menu-2 li{
	border-bottom: solid 1px #f5f5f5;
}
.desplegable .menu-2 li:last-child{
	border-bottom: 0;
}

.desplegable .menu-2 li > a > i{
	color: var(--primary);
	margin-right: 10px;
}

.account{
	display: inline-block;
	padding: 5px 7px;
	/*border: solid 1px #efefef;*/
	cursor: pointer;
	border-radius: 4px;
}

.account .cover{
	width: 35px;
	height: 35px;
	border-radius: 100%;
	background:  transparent url('../img/vectores/user.svg') no-repeat center center;
	background-size: cover;
}

.account .info{
	border-bottom: solid 1px #eee;
	padding: 10px 20px;
	background-color: #fff;
	z-index: 1;
}

.account ul{
	padding: 10px;
}


.account .menu{
	display: none;
	position: absolute;
	right: 0;
	top: 65px;
	background-color: #fff;
	z-index: 3;
	min-width: 250px;
	border-radius:3px;
	transition: all ease .4s;
	border: solid 1px #e6eaf2;
	box-shadow: 0 0px 5px rgba(0,0,0,.02);
	color: #8694a3;
	font-weight: 400;
}

.account .menu:after{
	content: '';
	display: block;
	border: 8px solid;
	border-color: #fff;
	position: absolute;
	right: 30px;
	top: -8px;
	transform: rotate(45deg);
	box-shadow: 0 -0 2px rgba(0,0,0,.2);
}

.account .menu a{
	padding: 7px ;
	display: inline-block;
	transition: all ease .2s;
}

.account .menu a:hover{
	color: deepskyblue;
}

.account .menu a > i{
	margin-right: 10px;
}


.show .menu{
	display: block;
}

/* BOTONES Y ELEMENTOS */

.btn-crear{
	padding: 8px 15px;
	height: 100%;
	border-radius: 3px;
	background: rgb(7,210,139);
	background: linear-gradient(153deg, rgba(7,210,139,1) 0%, rgba(7,210,47,1) 100%);
	border: solid 1px #07d28b;
	font-weight: 600;
	cursor: pointer;
	outline: 0;
	color: #fff !important;
}


.btn-pink{
	padding: 8px 15px;
	/*height: 100%;*/
	border-radius: 3px;
	background: rgb(255,56,80);
	background: linear-gradient(153deg, rgba(255,56,80,1) 0%, rgba(255,56,144,1) 100%);
	font-weight: 600;
	cursor: pointer;
	outline: 0;
	color: #fff !important;
}

.btn-white-flat{
	padding: 8px 35px;
	height: 100%;
	border-radius: 3px;
	background-color:transparent;
	border: 1px solid #e6eaf2;
	font-weight: 600;
	color: #3e4357;
	cursor: pointer;
	outline: 0;
}

.fondo {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    border: 1px solid #ccc;
    overflow: hidden;
    box-shadow: 0px 0px 4px 4px #0000002e;
}

.btn-white-flat:hover{
	background-color: #efefef !important;
}

/* ESTILOS DE ARTICULOS DE MUSICA */

.radio{
	background:  transparent url('../img/vectores/user.svg') no-repeat center center;
	background-size: cover;
}

.artista{
	background-color: rgba(0, 0, 0, .7);
	padding: 7px;
	display: inline-flex;
	min-width: 120px;
	border-radius: 25px;
	font-weight: bold;
	align-items: center;
}

.coverfoto{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	background:transparent url('../img/vectores/user.svg') no-repeat center center;
	background-size: cover;
	overflow: hidden;
	border-radius: 100px;
}

.coverfoto > img{
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
}

.cover{
	flex: initial !important;
	width: 50px;
	height: 50px;
	overflow: hidden;
	border-radius: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	/*background-color: #ededed;*/
}

.cover > img{
	width: 100%;
	min-height: 100%;
	object-fit: cover;
}


.coverupload{
	width: 182px;
	height: 182px;
	margin-right: 35px;
}

.coverupload input{
	display: none;
}

.coverupload label{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 10px 10px;
	text-align: center;
	background-color: rgba(0,0,0,.85);
	z-index: 1;
	color: #fff;
	cursor: pointer;
}

.coverupload2 > img[src=''] + label{
	/*opacity: 0;*/
}

.coverupload2 label{
	display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color: #fff;
    font-size: 25px;
    cursor: pointer;
    background-color: rgba(122,210,242,.5);
}

.badget{
	background-color: var(--primary);
	padding: 3px 6px;
	border-radius: 3px;
	color: #fff;
	font-weight: 500;
	font-size: 10px;
}

.coverupload2:hover label{
    transition: background-color .2s,opacity .2s,box-shadow .2s;
    background-color: rgba(0, 170, 231,.8);
    opacity: 1;
 }

.coverupload2 label input{
	display: none;
}

/* ARTICULOS REGITRADOS DE ENALCES*/

.article-h{
	width: 100%;
	background-color: #292929 !important;
	padding: 10px;
	display: block;
	border-radius: 2px;
	margin-bottom: 2px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
}

.article-h:hover .infoview{
	opacity: 0;
}

.article-h:hover .controles{
	right: 0;
}

.article-h .cover{
	border-radius: 3px;
	width: 60px;
	height: 60px;
	margin-right: 15px;
}

.article-h .info > div:nth-child(1){
	margin-bottom: 5px;
}
.article-h .infoview {
	color: #ddd;
	text-align: right;
}
.article-h .infoview > i{
	font-size: 24px !important;
	margin-left: 14px;
	color: #ddd;
}

.article-h .controles{
	position: absolute;
	right: -250px;
	top: 50%;
	transform: translateY(-50%);
	width:max-content;
	color: #00adff;
	transition: all ease .3s;
}

.article-h .controles li > a i{
	padding: 10px;
	border: solid 1px rgba(65, 71, 84, 0.1);
	font-size: 16px !important;
	border-radius: 6px;
	background-color: #fff;
}

.article-h .controles li > a i:hover{
	background-color: #f7f7f8;
}



.context-menu{
	background-color: #fff;
	padding: 5px;
	border-radius: 4px;
	position: absolute;
	z-index: 3;
	display: none;
	width: 200px;
	border: 1px solid rgba(0,0,0,.15);
	box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
}


.context-menu li ul{
	display: none;
}

.context-menu li i{
	font-size: 13px !important;
}

.context-menu li:hover ul{
	display: block;
	background-color: #fff;
	padding: 5px;
	border-radius: 4px;
	position: absolute;
	right: -100%;
	top: 0;
	z-index: 1;
	width: 200px;
	box-shadow: 0 0 8px rgba(0,0,0,.3);
}

.context-menu li > a{
	padding: 8px 15px;
	display: inline-block;
	font-weight: 500;
	width: 100%;
}


.context-menu li > a:hover{
	background-color: rgba(0,0,0,.05);
}


.article-g{
	width: 100%;
	background-color: #fff;
	padding: 20px;
	border-radius: 6px;
	position: relative !important;
	border: solid 1px #f1f1f1;
	/*box-shadow: 0 0 3px rgba(0,0,0,.15);*/
}


.article-g:hover .flotantes{
	opacity: 1;
	bottom: 10px;
}

.article-g .flotantes{
	position: absolute;
	right: 10px;
	bottom: 2px;
	opacity: 0;
	transition: all ease .3s;
}


.article-g .bold-400{
	font-size: 14px;
	font-weight: bold;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
}


.article-g .flotantes > a{
	background-color: var(--pink);
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	border-radius: 100%;
	font-weight: 600;
	font-size: 12px;
}

.article-g .cover{
	width: 100%;
	padding-bottom: 100%;
	background: transparent url(../img/vectores/imagennone.svg) no-repeat center center;
	background-size: 100px;
	/*background-color: var(--indigo);*/
	border-radius: 2px;
	box-shadow: 0 0px 8px rgb(0 0 0 / 30%);
}

.article-g .cover > img{
	position: absolute;
	left: 0;
	top: 0;
}

.cardbox{
	display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: flex-start;
}


.indicador{
	padding: 10px;
	border-radius: 8px;
	min-width: 80px;
	transition: all ease .1s;
	box-shadow: 0 1px 5px transparent;
	flex-flow: row nowrap;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	background-color: transparent;
	z-index: 1;
	cursor: pointer;
	color: #ffff;
}

.indicador > .estado{
	opacity: 0;
	transition: all ease .1s;
	white-space: nowrap;
}

.indicador:hover{
	background-color: #131313;
	box-shadow: 0 1px 5px rgba(0,0,0,.15);
}

.indicador:hover > .estado{
	opacity: 1;
	font-weight: 600;
	color: #fff;
}

.circle-estado{
	width: 12px;
	height: 12px;
	border-radius: 100%;
	display: inline-block;
	margin-right: 5px;
}


.icono-cover{
	position: absolute;
	right: -1px;
	bottom: 1px;
	margin: 0;
	border: solid 1px #fff;
}

[data-color=red] {background-color:red !important}
[data-color=blue] {background-color:var(--primary) !important}
[data-color=green] {background-color:#57d11f !important}
[data-color=orange] {background-color:var(--orange) !important}
[data-color=black] {background-color: #292929 !important}


i[data-copy]{
	font-weight: 500;
	margin-left: 5px;
	cursor: pointer;
}


i[data-copy]:hover{
	color: var(--primary);
}

/*Elemento fecha mas fecha 
ificacion*/
.tooltext{
	cursor: pointer;
}

.tooltext:hover .detalle{
	display: block;
}

.tooltext > .detalle{
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	background-color: #1e2b3b;
	padding: 10px;
	border-radius: 3px;
	width: max-content;
	max-width: 180px;
	text-align: left;
	font-size: 11px;
	color: #fff;
	line-height: 16px;
	display: none;
	transform: translateX(-50%) translateY(-0%) translateZ(0);
	z-index: 3;
}

.tooltext > .detalle:after{
	position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-0%) translateZ(0);
    width: 0;
    content: "";
    font-size: 0;
    line-height: 0;
    bottom: -10px;
    border: 5px solid transparent;
    border-top-color: #1e2b3b;
}

/* ENLACES HEAD */

.head{
	margin-bottom: 20px;
	color: #8694a3;
}

.head .title{
	font-size: 20px;
	font-weight: 600;
	color: #8694a3;
}

/* TARJETAS DE DESING */

.cardbox{
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	flex-flow: wrap;
	justify-content: space-between;
}

.card1{
	padding: 20px 40px;
	border:solid 2px transparent;
	cursor: pointer;
	border-radius: 3px;
	text-align: center;
	color: #3e4357;
}


.card1:hover{
	box-shadow: 0 0px 10px rgba(0,0,0,.07);
}

.card1 img{
	width: 45px;
}


input:checked + .card1{
	border:solid 2px #00aae7;
	color: #00aae7;
}


.radioselect > input{
	display: none;
}


h1{
	font-size: 35px;
	font-weight: 500;
	/*color: #3e4357;*/
}

.title-h1{
	font-size: 25px;
	font-weight: normal;
	color: #3e4357;
	font-weight: 500;
}

	.p{
	line-height: 1.8rem;
	font-size: 1.1rem;
}

/* FORMULARIOS INPUTS BUTONS SUBMIT */

.label-input{
	flex: initial !important;
	padding: 5px 0;
	min-width: 120px;
}

.campo2{
  /*border: 1px solid #e6eaf2;*/
	border-radius: 25px;
	display: inline-flex;
	justify-content: flex-start;
	align-items: center;
	flex: 1;
	cursor: text;
	min-height: 45px;
	overflow: hidden;
	width: 100%;
	background-color: #f9f9f9;
}

.campo2 > .icono{
	margin-left: 15px;
	margin-right: 2px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 17px;
	color: #c6d2de;
}

.campo2 input , .campo2 select{
	width: 100%;
	min-height: 38px;
	border:0;
	outline: 0;
	background-color: transparent;
	color: #3e4357;
	padding:0 10px;
}


.btn-red-radio{
	border-radius: 25px;
	background:#e62e2d;
	color: #fff;
	font-weight: bold;
	padding: 12px 60px;
}

.text-red{
	color:#e62e2d !important;
}

/*DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD*/

.campo{
  /*border: 1px solid #e6eaf2;*/
	border-radius: .3rem;
	display: inline-flex;
	justify-content: flex-start;
	align-items: center;
	flex: 1;
	cursor: text;
	min-height: 38px;
	overflow: hidden;
	width: 100%;
	background-color: #292929;
}

.campo > .icono{
	margin-left: 13px;
	margin-right: 2px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 17px;
	color: #c6d2de;
}

.campo input , .campo select{
	width: 100%;
	min-height: 38px;
	border:0;
	outline: 0;
	background-color: transparent;
	color: rgba(250, 250, 250, .9);
	padding:0 10px;
}

.campo input::placeholder, .campo textarea::placeholder{
	color: #c6d2de;
}

.campo input:read-only{
	cursor: no-drop;
}

.campo textarea{
	background-color: transparent;
	width: 100%;
	border: 0;
	outline: 0;
	padding: 10px;
	resize: none;
}

.readonly{
	
	cursor: pointer !important;
}

.readonly:after{
	font-family: 'icomoon';
	content:"\eb65";
	position: absolute;
	right: 10px;
	color: rgba(250, 250, 250, .8);
}

.switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 24px;
  overflow: hidden;
}
 
.switch input {
  display:none;
}
 
.slider {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background-color: rgb(172, 181, 191);
  -webkit-transition: .2s;
  transition: .2s;
  /*box-shadow: inset 0 2px 2px rgba(0,0,0,.05);*/
}
 
.slider:before {
  position: absolute;
  content: "";
  height: 21px;
  width: 21px;
  left: 1.6px;
  bottom: 1.6px;
  background-color: white;
  -webkit-transition: .2s;
  transition: .2s;
  /*box-shadow: 2px 2px 2px rgba(0,0,0,.2);*/
}
 
input:checked + .slider {
  background-color: rgb(57, 224, 155);
}
 
input:checked + .slider:before {
  -webkit-transform: translateX(14px);
  -ms-transform: translateX(14px);
  transform: translateX(14px);
}
.slider.round {
  border-radius: 34px;
}
 
.slider.round:before {
  border-radius: 100%;
}

.btn-back-flotante{
	position: absolute;
	left: 20px;
	top: 20px;
	display: none;
	cursor: pointer;
	color: #8694a3;
	font-weight: 500;
	padding: 10px;
	border-radius: 4px;
}

.btn-back-flotante:hover{
	background-color: #eee;
}

.btn-cerrar-flotante{
	position: absolute;
	right: 20px;
	top: 20px;
	cursor: pointer;
	color: #8694a3;
	font-weight: 500;
	padding: 10px;
	border-radius: 4px;
}

.btn-cerrar-flotante:hover{
	background-color: #eee;
}


.getlink{
	padding: 10px;
	border-radius: 5px;
	background-color: #1aa7e0;
	color: #fff;
	margin-right: 2px;
	font-weight: bold;
	transition: all ease .2s;
}

.getlink:hover{
	background-color: #4CBFEE;
}

.getlink > i {
	font-size: 16px;
	margin-right: 5px;
	font-weight: bold;
}


/* ESTILOS QUE TIENEN QUE VER CON EDICION DEL ARTICULO*/

.headlink{
	background-color: #FFF;
	padding: 20px;
	margin-bottom: 20px;
	border-radius: 6px;
	/*border:1px solid #dfe4ed;*/
}

.headlink .cover{
	width: 50px;
	height: 50px;
	margin-right: 15px;
}

.menu-v{
	margin-bottom: 15px;
}

.menu-v .name{
	font-size: 13px !important;
	font-weight:450;
	cursor: pointer;
	color: #666b7d;
}

.menu-v:hover i{
	color: #666b7d;
}

.menu-v i{
	color: #d0d1d4;
	margin-right: 10px;
	font-size: 16px !important;
}

.menu-v .cuerpo{
	margin-top: 10px;
	display: none;
	padding-left: 5px;
}

.menu-v.show .cuerpo{
	display: block;
}

.menu-v.show .name, 
.menu-v.show i{
	color: var(--primary);
}

.menu-v .cuerpo > ul li a{
	padding: 0 10px 10px 20px;
	color: #666b7d;
	display: inline-block;
	border-left: solid 1px #d0d1d4;
}

.menu-v .cuerpo > ul li a.active{
	border-color: var(--primary);
}


.menu-v .cuerpo > ul li a:hover{
	color: var(--primary);
	border-color: var(--primary);
}

.tag{
	background-color: #36b4e6;
	padding: 3px 10px;
	border-radius: 3px;
	display: inline-block;
	font-size: 13px;
	margin: 5px 0;
}


.servicios{
	padding: 10px 0;
	margin-bottom: 5px;
	background: #fff;
}


.progress {
	overflow: hidden;
	width: 100%;
	min-width: 200px;
	background-color: #eee;
	height: 13px;
	border-radius: 25px;
	box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}

.progress .bar{
	border-radius: 25px;
	background-color: var(--primary);
	height: inherit;
	transition: all ease 1.2s;
	width: 0;
}


.progress .bar-crt{
	border-radius: 25px;
	position: absolute;
	left: 0;
	top: 0;
	background-color: transparent!important;
}


.progress .bar-crt:after{
	content:"";
	position: absolute;
	right: -12px;
	top: 1.2px;
	padding: 5px;
	border-radius: 100%;
	background:#fff;
	box-shadow: 0 1px 2px rgba(0,0,0,.3);
	box-shadow: 0 0 2px rgba(0,0,0,.3);
}

.lista > div{
	border-bottom: solid 1px #eee;
	padding: 10px 0;
}


.lista > div:last-child{
	border-bottom: 0;
}

/*LOGIN DE INICIO DE SESION Y REGISTRO*/

#login{
	height: 100vh;
	background-color: #fff;
}

#login > div{
	height: inherit;
}


#login .desing{
	background: no-repeat url('../../public/img/entorno/bglogin.jpg');
	background-size: cover;
}


#login .desing > .sombra{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(20,24,31,.97);
}


#login .desing > .logo{
	position: absolute;
	right: 40px;
	bottom: 30px;
	font-size: 2.2em;
	color: #fff;
	font-weight: 500;
}


/*WIDGETS Y SHAREDS*/

.facebook{
	background: #fff;
	border:solid 1px #ddd;
	border-radius: 10px;
	overflow: hidden;
}

.facebook .cover{
	border-radius: 0;
	width: 150px;
	height: 150px;
}


.headtitle{
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	border-bottom: solid 1px #f6f6f6;
	padding-bottom: 20px;
	margin-bottom: 15px;
}


/* NOTIFICACIONES DEL SISTEMA */


.alert{
	padding: 20px;
	border-radius: 8px;
	font-size: 13px;
	border: solid 1px transparent;
}

.alert-info{
		background-color: #d9edf7;
    border-color: #bcdff1;
    color: #31708f;
}

.alert-error{
		background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.alert-success{
		background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}


.suscripcion{
	background-color: #fff;
	border:solid 1px #eee;
	border-radius: 10px 40px;
	overflow: hidden;
	width: 320px;
	box-shadow: 0 0 6px rgba(0,0,0,.08);
}


.suscripcion > .heads{
	color: #fff;
	padding: 10px;
}

.suscripcion > .heads .price{
	font-size: 48px;
	font-weight: bold;
}

.suscripcion > .body{
	padding: 20px 10px;
}

.suscripcion .btn{
	width: 100%;
	padding: 10px;
	border:solid 1px #dddd;
	border-radius: 4px;
	font-weight: bold;
}

.suscripcion ul li {
	color: gray;
	margin-bottom: 5px;
	text-align: center;
}

/* OBTENER ENLACE */

.copyoption{
	background: #f8f8f8;
	border-radius: 6px;
	width: 100%;
	padding: 15px;
	/*border: solid 1px rgba(65, 71, 84, 0.1);*/
	cursor: pointer;
	/*color: gray;*/

	transition: all ease .1s;
}


.copyoption:hover{
	box-shadow: 0 0 4px var(--primary);
	background-color: #fff;
	color: #292929;
}

.copyoption:hover:after{
	font-family: 'icomoon';
	content: '\ea34';
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--primary);
	font-size: 16px;
	font-weight: bold;
}

.copyoption img{
	width: 35px;
	height: 35px;
	display: inline-block;
	margin-right: 10px;
}

.copyoption > .icono{
	margin-right: 10px;
}

.inputcopy{
	border: solid 1px rgba(65, 71, 84, 0.1);
	margin-right: 10px;
	padding: 5px;
	border-radius: 6px;
}

.inputcopy input[type='text']{
	width: 100%;
	outline: 0;
	border:0;
	padding: 10px;
	font-weight: 600;
}

.getlink2{
	border: solid 1px rgba(65, 71, 84, 0.1);
	padding: 14px;
	border-radius: 6px;
	font-weight: 600;
	outline:0;
	width: 42px;
	overflow: hidden;
	display: block;
	white-space: nowrap;
	transition: all ease .3s;
	color: var(--primary);
}

.getlink2 > i{
	margin-right: 10px;
	font-size: 14px;
	font-weight: bold;
	color: var(--primary);
}

.getlink2:hover{
	width:180px;
	background-color: rgb(0 170 231 / 10%);
	border: solid 1px var(--primary);
}


#cajaiframe{
	cursor: pointer;
	position: relative;
	overflow: initial;
	background-color: #fff !important;
}




.biolink{
	border: solid 1px rgba(250,250,250,.1);
	border-radius: 4px;
	flex-flow: nowrap;
	overflow: hidden;
}

.biolink > div:nth-child(1){
	background-color: rgba(250,250,250,.1);
	font-weight: 600;
	color: #fff;
}

.biolink > div{
	padding: 7.5px;
}


.biolink a{
	width: 130px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
}

.biolink i{
	font-size: 16px !important;
	font-weight: bold;
	color: var(--primary);
	cursor: pointer;
}

.biolink i:hover{
	transform: scale(1.1);
}


.btnlite{
	height: 35px;
	width: 35px;
	color: #fff;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 6px;
	background-color: rgba(250,250,250,.1);
	transition: all ease .3s;
}

.btnlite:hover{
	color: var(--primary);
}



*[data-title]{
	position: relative;
}

*[data-title]:hover:after{
	content: attr(data-title);
	padding: 10px;
	border:solid #ddd 1px;
	background-color: #fff;
	position: absolute;
	right: 50%;
	transform: translateX(50%);
	top: -50px;
	z-index: 7;
	color: #292929;
	border-radius: 3px;
}

*[data-title]:hover:before{
	content: '';
	border:solid 5px #fff;
	position: absolute;
	top: -18px;
	z-index: 10;
	transform: rotate(45deg);
}
/**/

.tooltext2{
	position: relative;
}

.tooltext2:hover:after{
	content: attr(data-text);
	padding: 10px;
	border:solid #ddd 1px;
	background-color: #fff;
	position: absolute;
	right: 50%;
	transform: translateX(50%);
	top: -50px;
	z-index: 7;
	color: #292929;
	border-radius: 3px;
}

.tooltext2:hover:before{
	content: '';
	border:solid 5px #fff;
	position: absolute;
	top: -18px;
	z-index: 10;
	transform: rotate(45deg);
}

/*TABLES ESTILOS*/

.table{
	border-radius: 6px;
	background-color: #fff;
	width: 100%;
	max-width: calc(100% / 3 - 20px);
	box-shadow: 0 2px 8px rgba(0,0,0,.05);
	margin-right:20px;
	margin-bottom: 20px;
}

.table .btn-add{
	width: 40px;
	height: 40px;
	background-color: var(--primary);
	border-radius: 100%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	position: absolute;
	right: 15px;
	bottom: 15px;
	transition: all ease .3s;
}

.table .btn-add:hover{
	transform: scale(1.1);
}

.titlesection{
	font-weight: 500;
	margin-bottom: 15px;
}

.titlesection .texto{
	font-size: 17px;
	font-weight: 500;
	color: #0a0b0d;
}

.titlesection .icono{
	padding: 3px;
	border:solid 2px var(--pink);
	color: var(--pink);
	border-radius: 8px;
	margin-right: 10px;
	font-size: 14px !important;
	background-color: #fff;
}

.label{
	margin-bottom: 5px;
	font-size: 11px;
	color:#686d73;
	font-weight: 500;
}

/*BOTONES MOVIBLES*/

.orden{
	padding-bottom: 15px;
}

.boton{
	width: 100%;
	background-color: #fff;
	position: relative;
    border-radius: 4px;
    background-color: white;
    box-shadow: rgb(215 220 225) 0px 2px 0px 0px;
    color: rgb(61, 68, 75);
    width: 100%;
    /*margin-bottom: 15px;*/
}

.boton .icon{
	padding: 0 5px;
	height: 100%;
	cursor: move;
	transform: rotate(90deg);
	font-size: 20px;
}

.boton .data{
	padding: 15px 15px;
	border-left:solid 1px #eee;
}


.boton .icon-bin{
	font-size: 16px !important;
	color: gray;
	cursor: pointer;
}


.boton .btn-gray{
	width: 100%;
	font-size: 14px;
	color: #000;
	padding: 10px;
	font-weight: 500;
	border-radius: 12px;
	background-color: rgb(235, 238, 241);;
}

.boton .btn-black{
	width: 100%;
	font-size: 14px;
	color: rgb(235, 238, 241);
	padding: 10px;
	font-weight: 500;
	border-radius: 12px;
	background-color: #000;
}

.boton .popupdelete{
	display: none;
}


.textinput input{
	border: 0;
	outline: 0;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	border: 0;
	padding: 0;
	margin: 0;
	display: none;
	height: 24px;
}


.textinput .editar{
	cursor: pointer;
	position: absolute;
	left: 0;
	top: 0;
	height: 24px;
}

.textinput i{
	color: #ddd;
}

.textinput button{
	border: 0;
	padding: 0;
	margin: 0;
	background-color: transparent;
	width: fit-content;
	max-width: 300px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin-right: 5px;
	cursor: pointer;
}


.placeholder{
	border-radius: 6px;
	display: block;
	background-color: rgba(0,0,0,.05);
	height:79.6px;
	margin-bottom: 10px;
}


[data-pro]:after{
	content: 'Premium';
	background-color: #131313;
	color: #fff;
	border-radius: 4px;
	padding: 5px 7px;
	position: absolute;
	right: 5px;
	top: 5px;
	font-weight: bold;
	font-size: 12px !important;
	cursor: pointer;
}

[data-pro]:before{
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.05);
	z-index: 1;
	cursor: pointer;
}

.btn-menu{
	padding: 5px;
	/*color: rgba(250, 250, 250, .9);*/
	color: var(--primary);
	font-size: 40px !important;
}

#nav-movil-caja{
	display: none;
}

#nav-movil{
	display: none;
}

@media only screen and (max-width: 600px) {
	#menu{
		display: none;
	}

	.cuerpo2{
		padding: 0 !important;
	}

	#cuerpo{
		padding: 10px !important;
	}

	.grid{
		 grid-gap: 15px;
	}

	.flex-none-m{
		display: block !important;
	}

	#relacionados{
		width: 100%;
		margin: 0 !important;
	}

	.title{
		width: 100%;
		font-size: 35px !important;
		line-height: 40px;
		margin: 10px 0 !important;	}

	.cover-movil{
		max-width: 170px !important;
		margin:  0 auto !important;
		margin-bottom: 10px !important;
	}

	.center-m{
		text-align: center;
	}

	#sombrabox{
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .2);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 3;
		display: none;
	}

	#nav-movil{
		display: flex;
		position: sticky;
		left: 0;
		top: 0;
		width: 100%;
		background-color: var(--primary);;
		z-index: 3;
		padding: 5px 10px;
	}

	#nav-movil-caja{
		display: block;
		height: 100vh;
		width: 250px;
		background-color: #000;
		color: #fff;
		position: fixed;
		right:-100%;
		top: 0;
		z-index: 100;
		transition: all ease .3s;
	}

	.#nav-movil-caja .active{
		right: 0 !important;
	}

	#nav-movil-caja li a{
		display: inline-block;
		padding: 12px 20px;
		margin-bottom: 5px;
		width: 100%;
	}

	#nav-movil-caja li a > i {
		margin-right: 15px;
	}

	#nav-movil-caja li a.active{
		background-color: var(--primary);
	}

	#nav-movil-caja li a:hover{
		background-color: var(--primary);
	}

	.padding-m-m{
		padding: 10px !important; 
	}

	.m-none{
		display: none !important;
	}
}

.reproductor{width:100%;height:auto;border-radius:3px;position:relative}.reproductor:before{content:'';position:absolute;right:-10px;height:100%}.reproductor .cover{width:60px;height:60px;overflow:hidden;border-radius:3px;display:flex;justify-content:center;align-items:center}.reproductor .cover>img{width:inherit}.playaudio,.playaudio2{font-size:14px;width:60px;height:60px;display:flex;border-radius:100%;justify-content:center;align-items:center;background-color:var(--primary);transform:scale(1.1);border:solid 10px #292929;color:#fff;cursor:pointer;transition:all ease .3s;margin-right:10px}.playaudio:hover,.playaudio2:hover{transform:scale(1.2)}.reproductor progress{width:100%}.playactive{background-color:red}progress{width:100%;height:3px;overflow:hidden;margin:5px 0;cursor:pointer;background-color:#292929;transition:all ease .3s;border-radius:4px}progress:hover{height:6px}progress[value]::-webkit-progress-bar{background-color:transparent}progress[value]::-webkit-progress-value{background-color:#017d94;border-radius:2px;background-size:35px 20px,100% 100%,100% 100%;-webkit-animation:animate-stripes 5s linear infinite;animation:animate-stripes 5s linear infinite}


/**
 * Comments Wrapper
 */
.comments-area > * {
	margin-top: var(--global--spacing-vertical);
	margin-bottom: var(--global--spacing-vertical);
}

.comments-area > *:first-child {
	margin-top: 0;
}

.comments-area > *:last-child {
	margin-bottom: 0;
}

.comments-area.show-avatars .avatar {
	border-radius: 50%;
	position: absolute;
	top: 10px;
}

.comments-area.show-avatars .fn {
	display: inline-block;
	padding-left: 85px;
}

.comments-area.show-avatars .comment-metadata {
	padding: 8px 0 9px 85px;
}

/**
 * Comment Title
 */
.comments-title,
.comment-reply-title {
	font-size: var(--heading--font-size-h2);
	letter-spacing: var(--heading--letter-spacing-h2);
}

.comment-reply-title {
	display: flex;
	justify-content: space-between;
}

.comment-reply-title small a {
	font-family: var(--global--font-secondary);
	font-size: var(--global--font-size-xs);
	font-style: normal;
	font-weight: normal;
	letter-spacing: normal;
}

/* Nested comment reply title*/
.comment .comment-respond .comment-reply-title {
	font-size: var(--global--font-size-lg);
}

/**
 * Comment Lists
 */
.comment-list {
	padding-left: 0;
	list-style: none;
}

.comment-list > li {
	margin-top: var(--global--spacing-vertical);
	margin-bottom: var(--global--spacing-vertical);
}

.comment-list .children {
	list-style: none;
	padding-left: 0;
}

.comment-list .children > li {
	margin-top: var(--global--spacing-vertical);
	margin-bottom: var(--global--spacing-vertical);
}

@media only screen and (min-width: 482px) {

	.comment-list .depth-2,
	.comment-list .depth-3 {
		padding-left: calc(4 * var(--global--spacing-horizontal));
	}
}

/**
 * Comment Meta
 */
.comment-meta .comment-author {
	line-height: var(--global--line-height-heading);
	margin-bottom: calc(0.25 * var(--global--spacing-unit));
}
@media only screen and (min-width: 482px) {

	.comment-meta .comment-author {
		margin-bottom: 0;
		padding-right: 0;
	}
}

.comment-meta .comment-author .fn {
	font-family: var(--global--font-secondary);
	font-weight: normal;
	font-size: var(--global--font-size-lg);
	hyphens: auto;
	word-wrap: break-word;
	word-break: break-word;
}

.comment-meta .comment-metadata {
	color: var(--global--color-primary);
	font-size: var(--global--font-size-xs);
	padding: 8px 0 9px 0;
}

.comment-meta .comment-metadata .edit-link {
	margin-left: var(--global--spacing-horizontal);
}
@media only screen and (min-width: 482px) {

	.comment-meta {
		margin-right: inherit;
	}

	.comment-meta .comment-author {
		max-width: inherit;
	}
}

.reply {
	font-size: var(--global--font-size-sm);
	line-height: var(--global--line-height-heading);
}

.bypostauthor {
	display: block;
}

.says {
	display: none;
}

.pingback .url,
.trackback .url {
	font-family: var(--global--font-primary);
}

.comment-body {
	position: relative;
	margin-bottom: calc(1.7 * var(--global--spacing-vertical));
}

.comment-body > * {
	margin-top: var(--global--spacing-vertical);
	margin-bottom: var(--global--spacing-vertical);
}

.comment-body .reply {
	margin: 0;
}

.comment-content {
	word-wrap: break-word;
}

.pingback .comment-body,
.trackback .comment-body {
	margin-top: var(--global--spacing-vertical);
	margin-bottom: var(--global--spacing-vertical);
}

.comment-respond {
	margin-top: var(--global--spacing-vertical);
}

.comment-respond > * {
	margin-top: var(--global--spacing-unit);
	margin-bottom: var(--global--spacing-unit);
}

.comment-respond > *:first-child {
	margin-top: 0;
}

.comment-respond > *:last-child {
	margin-bottom: 0;
}

.comment-respond > *:last-child.comment-form {
	margin-bottom: var(--global--spacing-vertical);
}

.comment-author {
	padding-top: 3px;
}

.comment-author .url {
	color: currentColor;
}

.comment-form {
	display: flex;
	flex-wrap: wrap;
}

.comment-form > * {
	flex-basis: 100%;
}

.comment-form .comment-notes {
	font-size: var(--global--font-size-sm);
}

.comment-form .comment-form-url,
.comment-form .comment-form-comment {
	width: 100%;
}

.comment-form .comment-form-author,
.comment-form .comment-form-email {
	flex-basis: 0;
	flex-grow: 1;
}
@media only screen and (max-width: 481px) {

	.comment-form .comment-form-author,
	.comment-form .comment-form-email {
		flex-basis: 100%;
	}
}

.comment-form .comment-form-cookies-consent > label,
.comment-form .comment-notes {
	font-size: var(--global--font-size-xs);
	font-weight: normal;
}

.comment-form > p {
	margin-bottom: var(--global--spacing-unit);
}

.comment-form > p:first-of-type {
	margin-top: 0;
}

.comment-form > p:last-of-type {
	margin-bottom: 0;
}

.comment-form > p label,
.comment-form > p input[type=email],
.comment-form > p input[type=text],
.comment-form > p input[type=url],
.comment-form > p textarea {
	display: block;
	font-size: var(--global--font-size-sm);
	margin-bottom: calc(.5 * var(--global--spacing-unit));
	width: 100%;
	font-weight: var(--form--label-weight);
}

.comment-form > p.comment-form-cookies-consent {
	display: flex;
}
@media only screen and (min-width: 482px) {

	.comment-form > p.comment-form-author {
		margin-right: calc(1.5 * var(--global--spacing-horizontal));
	}

	.comment-form > p.comment-notes,
	.comment-form > p.logged-in-as {
		display: block;
	}
}
.btn-primary {
    background-color: rgb(255 0 0) !important;
    border-color: #d00202;
    color: #fff;
}


.main.text-dark {
    color: black;
}

.pagination a, .pagination span {
    display: inline-block;
    background: #004d8d;
    color: white;
    font-size: 19px;
    padding: 6px 14px;
    border-radius: 4px;
}

.pagination {
    text-align: center;
}

.pagination span {
    background: #c6c6c6;
    color: black;
}

.container {
    max-width: 1000px;
}

.main-nav{
	position: relative;
    background: #fff;
    box-shadow: 0 0 20px rgb(0 0 0 / 30%);
    margin: 10px 0 20px;
    overflow: hidden;
}

.mh-main-nav li a {
    padding: 0 11px;
    display: table-cell;
    vertical-align: middle;
    height: 40px;
    font-size: 14px;
    color: #444;
}

.mh-main-nav li {
    list-style: none;
    float: left;
    position: relative;
    padding: 5px;
    border-right: 1px solid #e4e4e4;
}

.mh-main-nav li a:hover {
    background: #0f63df;
    color: #fff;
}

footer {
    padding: 10px;
    margin-top: 20px;
    background: black;
    color: white;
}

ul.tracklist li {
    font-size: 16px;
    padding: 5px;
    border-bottom: 1px solid #e2e2e2;
    background: white;
}

ul.tracklist li a:before {
    content: "\f001";
    font-family: 'Font Awesome 5 Free';
    font-size: 25px;
    vertical-align: middle;
    font-weight: 700;
}

ul.tracklist li a {
    font-size: 17px;
    color: black;
}

ul.tracklist {
    border-radius: 8px;
    overflow: auto;
    box-shadow: 0px 0px 6px 1px #00000030;
}

ul.tracklist li.type-album a:before {
    content: "\f51f";
}

.pagination > * {
    margin-left: 5px;
    margin-right: 5px;
}

ul#menu-menu li a i {
    font-size: 21px !important;
    vertical-align: inherit;
}

img.custom-logo {
    max-width: 80%;
}

.main-nav {
    padding: 0;
}
button.navbar-toggler {
    margin-left: 10px;
    margin-top: 8px;
}

body .artista {
    background: #ffffff38;
    padding: 3px 5px;
}