/* 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(/u/plantillas/imgs/ico-gral/arrow-left.svg);}
.ico-fle-right{background-image: url(/u/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}



/* =================================
      LIVE BLOG
================================== */


.liveblog-main {
  border       : solid 1px #e9e9e9;
  border-radius: 4px;
  padding      : 1.5rem;
  margin-bottom: 2rem;
  padding-top  : 0;
  box-shadow   : 0 2px 4px #0000000a;
  margin-top   : 20px;
}
 
 /* cabecera ====================== */
 
 .alert.liveblog { margin-bottom: 2rem; line-height : 1em; font-size : .7em; display : flex; align-items : center; margin-left: -1.5rem; margin-right: -1.5rem; border-top: solid 2px #f40000; padding-top : 1rem; padding-left : 1.5rem; padding-right : 1.5rem; padding-bottom: 1rem; border-bottom: solid 1px #dbdbdb; box-shadow : inset 0 -1px 0 #ffffffa3; background : #f7f7f7; background : linear-gradient(0deg, rgba(237, 237, 237, 1) 0%, rgba(252, 252, 252, 1) 100%); position : sticky; top: 28px; z-index: 2; } 

 .alert.liveblog small { font-weight: 400; font-size : 1em; } 
 .alert.liveblog strong { background-color: red; color : #fff; padding : 5px 8px; border-radius : 3px; margin-right : 10px; } 
 .alert.liveblog strong { display : flex; align-items: center; } 
 
  
 /* LOS ITEMS ==================== */

 .liveblog-item { border-bottom : solid 1px #e9e9e9; padding-bottom: 2rem; margin-bottom : 2rem; display : flex; } 
 .liveblog-item:last-child { border-bottom: none; padding-bottom: 0; } 
 
 /* orden del item */
 .lb-item_order { display : flex; flex-direction: column; position : relative; min-width : max-content; margin-right : 2.5rem; border-right : solid 1px #e9e9e9; text-align : right; }
 .lb-item_hora { font-weight: 600; font-size : .9em; line-height: 1em; color : #041835;}
 .lb-item_hora::after { content : ""; display : block; width : 5px; height : 5px; background-color: #e9e9e9; border-radius : 50%; position : absolute; right : -3px; top : 8px; } 
 .lb-item_dia { font-size : 0.6em; text-transform: uppercase; font-weight : 700; } 
 
 
 
 /* controlar el sticky */
 .lb-item_hora,
 .lb-item_dia { padding-right: 2.5rem; position: sticky; background-color: #fff; }  
 .lb-item_hora { top: 95px; z-index: 1; } 
 .lb-item_dia { top: 115px; } 
 
  
 /* Cuerpo del item */
 .liveblog-main p.lb-autor_nombre { font-size: .65em; line-height: 1em; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Arial, sans-serif; } 
 .lb-autor_nombre { margin-bottom: 1em; } 
 .lb-article_body p { font-size : .95em; margin-bottom: .5em; } 
 .lb-article_body p:last-child { margin-bottom: 0; } 
 .lb-article_body .widget[class^="widget"] { max-width: 100%; } 
 .lb-article_body .widget[class^="widget"]::after { display: none; } 
 
 
 
 /* CONTROL MOBILE */
 
 @media screen and (max-width:768px) { 
 .alert.liveblog { width : 100vw; margin-left: calc(-2rem - 7px); top : 50px; padding-left: 1rem; } 
 .liveblog-main { padding : 0; padding-left : 23px; border-radius: 0; border : none; display: flex; flex-direction: column; } 
 .liveblog-item { flex-direction: column; position : relative; } 
 .liveblog-item::before { content : ""; width : 1px; height : calc(100% - 2rem); background-color: #ccc; left : .5rem; left : -1.5rem; position : absolute; } 
 .lb-item_order { text-align : left; border-right : none; line-height : 1; margin-bottom : .3em; background-color: #fff; width : 100%; /* border : solid 1px red; */
 position : sticky; top : 121px; box-shadow : 0 -14px 0 0 #ffffff, 0 10px 0px 0px #fff; z-index : 1; }  
 .lb-item_hora { margin-bottom: 5px; margin-top : -4px; }  
 .lb-item_hora::after { content : ""; display : block; width : 7px; height : 7px; background-color: #e9e9e9; border-radius : 50%; position : absolute; right : auto; top : 0; left : -1.7rem; }  
  h2.lb-titulo { line-height: 1.2em; } 
 }
 
 
 
 /* OBJETOS ESPECIALES */
 /* titling */
 .titling { height : 8px; width : 8px; border-radius : 50%; background-color: transparent; position : relative; margin-right : 5px; /*position : fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); */ } 
 .titling:before,
 .titling:after { content : ''; display : block; position : absolute; top : 0; right : 0; bottom : 0; left : 0; border : 1px solid #fff; border-radius: 50%; } 
 .titling:before { animation: ripple 2s linear infinite; } 
 .titling:after { animation: ripple 2s linear 1s infinite; } 
 @keyframes ripple { 
 0% { transform: scale(1); } 
 50% { transform: scale(1.5); opacity : 0.7; } 
 100% { transform: scale(3); opacity : 0; } 
 }