/* 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; } }