/* CAROUSEL FADE
=========================================================*/


/* Carousel Fading slide */
.carousel-fade .carousel-inner { background: #000; }
.carousel-fade .carousel-control { z-index: 2; }  
.carousel-fade .item {
  opacity: 0;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
  }

  .carousel-fade .next.left,
  .carousel-fade .prev.right,
  .carousel-fade .item.active { opacity: 1; }

  .carousel-fade .active.left,
  .carousel-fade .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
    }



/* Safari Fix */
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}


/* Removing BS background */
.carousel .control-box { opacity: 0; background-repeat: no-repeat;  }
a.carousel-control.left  { left: 0;  border: 0;background-repeat: no-repeat;background-color: transparent;}
a.carousel-control.right { right: 0; border: 0;background-repeat: no-repeat;background-color: transparent;}



/* Animation */
.control-box, a.carousel-control, .carousel-indicators li {
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  -ms-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  transition: all 250ms ease;   
  /* hardware acceleration causes Bootstrap carousel controlbox margin error in webkit */
  /* Assigning animation to indicator li will make slides flicker */
  } 


/* Hover animation */
.carousel:hover .control-box { opacity: 1; }
 


/* Carouse Indicator */
.carousel-indicators li.active,
.carousel-indicators li { border: 0; }

.carousel-indicators li {
  background: #666;
  margin: 0 3px;
  width: 12px;
  height: 12px;
  }

.carousel-indicators li.active {
  background: #fff;
  margin: 0 3px;
  }


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

.carousel-interna {margin-bottom: 20px}
.carousel-interna figure{margin-bottom: 0}

.carousel-control span {
    width: 40px; height: 40px;
    background-repeat: no-repeat;
    background-position: center; 
    background-size: 23px;
    margin-top: -20px;
    top: 50%;
    display: inline-block;
    position: absolute;
}

/*.ico-fle-left{background-image: url(/a/plantillas/imgs/ico-gral/arrow-left.svg);}
.ico-fle-right{background-image: url(/a/plantillas/imgs/ico-gral/arrow-right.svg);}*/

.left.carousel-control span{left: 20px}
.right.carousel-control span{right: 20px}



/* noticias relacionadas*/

.noticias-relacionadas{margin-top: 20px}
.noticias-relacionadas .col-sm-6:last-child .caja{border: 0; margin: 0;}

article.relacionada h5{margin: 0; font-weight: 700}
article.relacionada a{color: inherit; }


/* NO FOTO */
.div-nofoto {position: relative;}
.div-nofoto:before {display: block;content: ""; width: 100%; padding-top: 56.25%;}
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;}


/*Audio relacionado */
.relacionadas audio{ width: 100%; }
.bajada-audio{font-size: 0.7em}


.f{display: flex;}

/* VALORAR */
.valorar-noticia {margin-bottom: 15px}
.row-valorar {flex-direction: column; width: 100%}
.row-valorar  .calif {flex-direction: row; justify-content: flex-start; flex-wrap: initial; height: 30px; margin-bottom: 10px; cursor: pointer; cursor: hand; background-color: #FAFAFA; width: 100%;}
.item-porcentaje{background-color:  #ececec; order: 2;flex: 0 1 auto; display: flex; align-items: center; height: 100%; padding-left: 10px; padding-right: 10px; border-radius: 0 3px 3px 0}
.item-txt{order: 1;width: 100px; padding: 5px; flex: 0 0 auto; text-align: center; color: #fff; border-radius: 3px 0 0 3px; font-weight: 700 }
.item-txt{border-right: solid 1px rgba(0,0,0,0.2)}

/*colores */
.calif:hover                    {background-color: #F5F5F5}
.calif:hover   .item-porcentaje, .calif.select   .item-porcentaje  {color: #fff; box-shadow: inset 0px -2px 2px -1px rgba(0,0,0,0.3);}
.select.valor-1 .item-porcentaje, .valor-1:hover .item-porcentaje,  .valor-1 .item-txt{background-color:#0277BD}
.select.valor-2 .item-porcentaje, .valor-2:hover .item-porcentaje,  .valor-2 .item-txt{background-color:#2E7D32}
.select.valor-3 .item-porcentaje, .valor-3:hover .item-porcentaje,  .valor-3 .item-txt{background-color:#BF360C}
.select.valor-4 .item-porcentaje, .valor-4:hover .item-porcentaje,  .valor-4 .item-txt{background-color:#4B5A60}
.select.valor-5 .item-porcentaje, .valor-5:hover .item-porcentaje,  .valor-5 .item-txt{background-color:#714882}
.select.valor-6 .item-porcentaje, .valor-6:hover .item-porcentaje,  .valor-6 .item-txt{background-color:#0097A7}


/* Valorar (pulgares) */
.likear-noticia{ margin-bottom: 30px; margin-top: 30px }
.likear-noticia h4{margin-left: auto; margin-right: auto; font-size: 1.1em;font-weight: 800}
.row-pulgares {flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; height: 30px }
.row-pulgares .item{height: 100%}
.row-pulgares .item img{width: 16px; position: relative; top: -3px}
.row-pulgares a{cursor: pointer;cursor: hand}
.row-pulgares .pulgararriba{flex: 1 1 1%; background-color: #2E7D32; padding: 10px; border-radius: 3px 0 0 3px; border-right: solid 1px rgba(0,0,0,0.1)}
.row-pulgares .barraresultados{flex: 1 1 60%; background-color: #ececec}
.row-pulgares .pulgarabajo{flex: 1 1 1%; background-color: #BF360C;padding: 10px; border-radius: 0 3px 3px 0; border-left: solid 1px rgba(0,0,0,0.1); margin-left: -1px}
.barraresultados{ align-items: center;}
.barraresultados .resultado{padding-left: 10px; padding-right: 10px;  height: 100%;display: flex;align-items: center; justify-content: center; font-weight: 700; font-size: 1.5em; color: #fff; box-shadow: inset 0px 0px 6px 0px rgba(0,0,0,0.24);}
.barraresultados .arriba{background-color: #3d9c42;}
.barraresultados .abajo{background-color: #dc4d21}
.row-pulgares img{cursor: pointer; cursor: hand; margin-left: auto; margin-right: auto; display: block;}

/* alert-warning */
.alert-warning{color: #BF360C; border-color: #ccc; background-color: #FAFAFA; font-weight: 700 }

 /* Small Devices, Tablets */
  @media only screen and (min-width : 768px) {
  .row-valorar {flex-direction: row; align-items: flex-end; justify-content: space-between;}
  .row-valorar  .calif{flex-direction: column; justify-content: flex-end; height: 100px; width: 15%; flex-wrap: initial; }
  .item-porcentaje{ order: 1; justify-content: center; align-items: center; width: 100%; font-size: 12px; line-height: 12px; font-weight: 700; min-height: 20%; border-radius: 3px 3px 0 0}
  .item-txt{border-radius: 0 0 3px 3px; order: 2; width: 100% }
  .row-valorar.vengodelajax{width: 100%}
  .row-pulgares .barraresultados {flex: 1 1 80%;}
  .item-txt{border-right: 0}
 }



/* =================================
      COMENTARIOS
================================== */

/* titulo modulo */
.main-comentarios .titulo-modulo{border-bottom: none; padding-left: 0 }
.comments-small{color: rgba(0,0,0,0.74); margin-bottom: 2rem; display: block}

/* form comentarios */

.body-formulariocomentarios{height: 100%; display: flex; flex-direction: column; justify-content: flex-start; }
.body-formulariocomentarios .base{height: 100%; display: flex}
.body-formulariocomentarios .mensajes{height: 100%; width: 100%;  display: flex; flex-direction: column; flex-wrap: wrap}
.body-formulariocomentarios .comments-form-base{height: 100%; width: 100%;  display: flex; flex-direction: column; justify-content: space-between}

.comments-form-base .row-1{ flex: 0 0 auto; padding-bottom: 15px}
.comments-form-base .row-2{ flex: 1 1 100%; padding-bottom: 15px}
.comments-form-base .row-3{ flex: 0 0 auto;}

.comments-textarea{height:100% !important}

.row-flex{display: flex; justify-content: flex-start}
.row-flex .col-6{flex: 0 0  50%}

.mb-1{margin-bottom: 1rem}
.mb-2{margin-bottom: 2rem}
.mt-auto{margin-top: auto}
.h-100{height: 100%;}
.container-fluid{width: 100%}
/* lista comentarios */

.header-user{display: flex; align-items: center; font-size: 0.8em; }

.comment-numero{ margin-left: 5px; font-weight: 700}
.comment-fecha{color: #9e9e9e}
.comment-avatar {margin-right: auto}
.comment-avatar img{width: 16px; margin-right: 5px }

.comentario {border-left: 5px solid #ececec; padding-left: 15px; margin-bottom: 2rem; }
.comentario blockquote{border-left: 0;padding:0; font-size:1em }


.footer-user{display: flex; justify-content: flex-start; font-size: 0.8em}
.footer-user .btn{display: flex; align-items: center; background-color: transparent; line-height: 1em}
.footer-user .btn img{margin-right: 3px;}
.footer-user .btn:hover{background-color:#ececec }

.votar-comment {display: flex}

.btn-reportar{margin-left: auto; opacity: 0.8;  }
.footer-user .btn-reportar:hover{opacity: 1; background-color:#e57373; color: #fff }

.lista-comentarios{margin-top: 15px}

/* respuesta a comentario */

.body-trans{background-color: transparent}
.yavoto{color: #f44336; display: flex; align-items: center}
.respuestadelcomentario{padding-top: 1rem; background-color: #f5f5e1; padding: 15px; margin-top: 15px;  
  box-shadow: 0px 3px 3px -2px rgba(0,0,0,0.4); margin-bottom: 15px;}
.titulo-responder{font-weight: 600;  display: block; margin-bottom: 10px}
.comments-form-respuesta{width: 100%; }
.comments-form-respuesta .form-control{padding: 5px; height: auto; margin-bottom: 15px; font-size: 0.9em}

.comentarios_de_comentarios blockquote{font-size: 0.9em}
.comentarios_de_comentarios .comentario{border-left-width: 2px}