#comentarios{

	width:96%;

	height:auto;

	float:left;

	margin:25px 0 0 2%;

	padding:0;

	color:#000000;

}

/************ LISTADO ************/

	#comentarios ul.listado_comentarios{

		float:left;

		position:relative;

		height:auto;

		list-style:none;

		width:100%;

		margin:0;

		padding:0;

	}

#comentarios ul li.comentario_ficha {

	float: left;

	width: 96%;

margin: 5px 0 0;

    padding: 5px 2% 15px;

	border-bottom: 1px solid #121820;

}

			#comentarios ul li.comentario_ficha:nth-of-type(2n){/*background:#e0e0e0;*/}

#comentarios ul li div.datos_persona {

	float: left;

	width: 98%;

	position: relative;

	padding: 6px 2% 0 0;

	margin: 0 0 0 0;

	font-size: 0.9em;

	color: #333333;

}

			

#comentarios .datos_persona::before {

	content: "\f007";

	position: absolute;

	top: 8px;

	left: 0px;

	font-family: "Font Awesome 5 Free";

}			

#comentarios div.datos_persona div.nombre {

	float: left;

	position: relative;

	width: auto;

	padding: 3px 20px 3px 4px;

	font-weight: bold;

	margin-left: 15px;

	color:#666;

}

				#comentarios div.datos_persona div.nombre span:first-child{font-size:0.8em;font-weight:normal;}

#comentarios div.datos_persona div.fecha, #comentarios div div.fecha {

	float: right;

	position: relative;

	width: auto;

	padding: 1px 20px 3px 14px;

	text-align: left;

	font-size: 0.8em;

	margin: 4px 0 0 0;

}

#comentarios .fecha::before {

	content: "\f073";

	font-family: "Font Awesome 5 Free";

	left: -6px;

	position: absolute;

	top: 2px;

	font-size: 1.1em;

}

			#comentarios ul li div.datos_genericos{

				float:right;

				width:auto;

				position:relative;

				display:inline-block;

			}

				#comentarios div.datos_genericos div[class^="votos_"]{

					width:auto;

					height:auto;

					text-align:right;

					margin:3px 20px 3px 0;

					display:inline-block;

					padding:0 0 0 30px;

					display:none;

				}

					#comentarios div.datos_genericos div.votos_positivos{

						background:url(../img/voto_positivo.png) no-repeat left center;

					}

					#comentarios div.datos_genericos div.votos_negativos{

						background:url(../img/voto_negativo.png) no-repeat left center;

					}

				#comentarios div.datos_genericos div.valoracion{

					float: right;

					background: url(../img/estrellas.png) no-repeat center center;

					width: 110px;

					font-size: 0;

					height: 25px;

				}

					#comentarios div.datos_genericos div.valoracion_1{background-image: url(../img/puntos_uno.png);}

					#comentarios div.datos_genericos div.valoracion_2{background-image: url(../img/puntos_dos.png);}

					#comentarios div.datos_genericos div.valoracion_3{background-image: url(../img/puntos_tres.png);}

					#comentarios div.datos_genericos div.valoracion_4{background-image: url(../img/puntos_cuatro.png);}

					#comentarios div.datos_genericos div.valoracion_5{background-image: url(../img/puntos_cinco.png);}

			

			#comentarios ul li div.datos_comentario{

				float:left;

				width:100%;

				position:relative;

				display:inline-block;

				margin: 5px 0 0;

			}

#comentarios div.datos_comentario div.titulo {

	float: left;

	position: relative;

	text-transform: uppercase;

	width: 97%;

	padding: 4px 1% 7px 2%;

	color: #252f38;

	font-size: 0.85em;

	text-align: left;

}

				

#comentarios div.datos_comentario div.titulo::before {

	content: "\f4ad";

	font-family: "Font Awesome 5 Free";

	position: absolute;

	left: -4px;

	font-size: 1.1em;

	top: 6px;

}	

#comentarios div.datos_comentario div.comentario {

	float: left;

	position: relative;

	width: 96%;

	padding: 0px 2% 0 2%;

	text-align: left;

	font-size: 0.8em;

	color: #333333;

}

#comentarios div.respuesta {

	float: left;

	position: relative;

	width: 96%;

	padding: 5px 1% 0 0%;

	margin: 10px 0 0 5px;

}

#comentarios div.respuesta>span {

    float: left;

    width: 100%;

    text-align: center;



}

#comentarios div.respuesta>span::before {

	content: "\f0ab";

	font-family: "Font Awesome 5 Free";

	font-weight: bold;

	font-size: 1.3em;

	margin: 0 3px;

}

#comentarios div.respuesta>span::after {

	content: "\f0ab ";

	font-family: "Font Awesome 5 Free";

	font-weight: bold;

	font-size: 1.3em;

	margin: 0 3px;

}

#comentarios div.respuesta div.titulo {

	width: 99%;

	padding-left: 1%;

	color: #666;

	text-transform: none;

	font-weight: bold;

}

#comentarios div.respuesta div.titulo::before {

	left: -6px !important;

	content: "\f590";

	font-weight: bold;

	font-size: 0.9em;

}

					#comentarios div.respuesta div.fecha{

font-size:0.7em;		

margin: -23px 93px 0 0;

					}

#comentarios div.respuesta div.comentario p {

 color:#4a4a4a;	

}



/************ NUEVO ************/

#nuevo_comentario div.nuevo_comentario {

	float: none;

	width: auto;

	display: inline-block;

	position: relative;

	background: #ffdf0f;

	padding: 5px 15px;

	color: #000000;

	margin: 5px 10px 5px 0;

	border-radius: 3px;

	box-shadow: 0 0 6px #ffdf0f;

	cursor:pointer;

	border: 2px transparent outset;

}

		#nuevo_comentario div.nuevo_comentario:hover{

			border: 2px #252f38 outset;

			cursor:pointer;

		}

	form#comentario_nuevo{

		background: rgba(0, 0, 0, 0.85) none repeat scroll 0 0;

		top: 200px;

		box-shadow: 0 0 4px;

		height: auto;

		left: 10%;

		position: fixed;

		width: 80%;

		z-index: 1500;

		display: none;

		margin:0;

		padding:0 0 25px 0;

	}

		form#comentario_nuevo div.cerrar{float: right;position: relative;height: 50px;width: 50px;background: url(../img/ico_cerrar.png) no-repeat center center;transition:0.3s ease 0s;}

		form#comentario_nuevo div.cerrar:hover{transform:scale(0.99);cursor:pointer;}

form#comentario_nuevo p.registro {

	float: left;

	position: relative;

	width: 80%;

	margin: 10px 10% 30px 10%;

	text-align: center;

	color: #e6e4cf;

	font-size: 0.8em;

}

			form#comentario_nuevo div.izquierda{

				float:left;

				position:relative;

				display:inline-block;

				width:30%;

				margin:20px 5% 20px 5%;

				text-align: center;

			}

				form#comentario_nuevo div.izquierda img{float:none;max-width:100%;max-height:100%;}

				form#comentario_nuevo div.izquierda div.nombre{font-family: 'Fjalla One', sans-serif;color: #ffdf0f;margin: 15px;}

			form#comentario_nuevo div.derecha{

				float:right;

				position:relative;

				display:inline-block;

				width:45%;

				margin:20px 5% 20px 5%;

				text-align: center;

			}

form#comentario_nuevo div.derecha label {

	width: 100%;

	font-size: 0.8em;

	color: #ffdf0f;

	margin: 10px 0;

	float: left;

	text-transform: uppercase;

}

form#comentario_nuevo div.derecha input {

	font-size: 0.9em;

	padding: 10px 1%;

	width: 98%;

	float: left;

	position: relative;

	font-family: 'Muli',sans-serif;

	text-align: center;

	color: #333333;

}

form#comentario_nuevo div.derecha input.enviar {

	font-size: 0.9em;

	margin: 15px 0% 0 25%;

	width: 50%;

	float: left;

	position: relative;

	height: 40px !important;

	padding: 5px 2% !important;

	text-transform: uppercase;

	cursor:pointer;

}

form#comentario_nuevo div.derecha input.enviar:hover{cursor:pointer;}

form#comentario_nuevo div.derecha textarea {

	font-size: 0.8em;

	padding: 5px 1%;

	width: 98%;

	float: left;

	position: relative;

	height: 100px;

	font-family: 'Muli',sans-serif;

	color: #333333;

}			

				

				

				/*estrellas*/

form#comentario_nuevo div.derecha p { text-align: center;}



form#comentario_nuevo div.derecha label[for^="radio"] {  font-size: 1.8em;  float:none;}



form#comentario_nuevo input[type="radio"] {  display: none;}



form#comentario_nuevo div.derecha label[for^="radio"] {  color: grey;}

form#comentario_nuevo div.derecha span.valoracion {

	float: left;

	position: relative;

	height: 48px;

	font-family: 'Fjalla One', sans-serif;

	color: #e6e4cf;

	display: flex;

	align-items: center;

	justify-content: center;

	margin: 8px 10px 0 2%;

	font-size: 0.8em;

	text-transform: uppercase;

}

.clasificacion {direction: rtl;unicode-bidi: bidi-override;width: auto;float: left;display: inline-block;margin: 0;}



form#comentario_nuevo div.derecha .clasificacion label:hover,

form#comentario_nuevo div.derecha .clasificacion label:hover ~ label {  color: orange;}



form#comentario_nuevo div.derecha .clasificacion input[type="radio"]:checked ~ label {  color: orange;}

		

		

@media (max-width:500px){

	form#comentario_nuevo{top:0;z-index: 10;position:relative;top:0;left:0;width:100%;}

	form#comentario_nuevo a[target="_blank"]{color:#ffdf0f;}

	form#comentario_nuevo div.izquierda{width:90%;margin:0 5%;}

	form#comentario_nuevo div.izquierda div.imagen{float: left;width: 100%;}

	form#comentario_nuevo div.izquierda div.nombre {

		font-size: 0.8em;

		margin: 20px 0 5px;

		width: 100%;

		float: left;

		text-transform: uppercase;

		color: #ffdf0f;

	}

	form#comentario_nuevo div.izquierda img{max-height:75px;}

	form#comentario_nuevo div.derecha{width:90%;margin:0 5%;}

form#comentario_nuevo div.derecha p {

	margin-left: 3%;

}

}

#movil #comentarios {

	width: 96%;

	height: auto;

	float: left;

	padding: 3% 2%;

	background: #eeeeee;

	text-align: center;

	position: relative;

	margin: 10px 0 0 0;

	font-size: 0.8em;

}

#movil #comentarios::before {

	content: "\f086";

	font-family: "Font Awesome 5 Free";

	top: 13px;

	left: 10px;

	position: absolute;

	font-size: 1.5em;

	color: #9a977d;

}

#movil #comentarios::after {

	content: "\f086";

	font-family: "Font Awesome 5 Free";

	top: 13px;

	right: 10px;

	position: absolute;

	font-size: 1.5em;

	color: #9a977d;

}

#movil #nuevo_comentario div.nuevo_comentario {

	font-size: 0.8em;

	min-width: 53%;

	margin: 0px;

	text-transform: uppercase;

}



#movil #nuevo_comentario div.nuevo_comentario::before {

	content: "\f4ad";

	font-family: "Font Awesome 5 Free";

	font-weight: bold;

	font-size: 1.3em;

	margin-right: 5px;

}



#movil #comentarios ul li div.datos_persona .nombre span:first-child {

	font-size: 0;

}

#movil #comentarios div.datos_comentario div.titulo {

    width: calc(98% - 20px);

    padding: 4px 1% 7px 20px;

    margin: 0 0 0 1%;

}

#movil #comentarios div.respuesta div.titulo {width: calc(100% - 17px);padding-left: 17px;}

#movil #comentarios div.respuesta div.fecha{margin: -25px 0 0 0;}

#movil #comentarios div.datos_persona div.fecha{float:left;margin:4px 0 0 7px;}

#movil #comentarios div.datos_comentario div.comentario {width: calc(98% - 25px);padding: 0px 2% 0 25px;}

#movil #comentarios div.respuesta>span::before ,#movil #comentarios div.respuesta>span::after{font-size: 0.9em;padding:0 3px;}