body {
  /* Location of the image */
  background:#000 url('https://canalcadiz.es/luna-video/images/fondo-dos.webp') no-repeat fixed center; /* Image is centered vertically and horizontally at all times */
  /* Image doesn't repeat */
  /* Makes the image fixed in the viewport so that it doesn't move when 
     the content height is greater than the image height */
  /* This is what makes the background image rescale based on its container's size */
  background-size: cover;
  
  /* Pick a solid background color that will be displayed while the background image is loading */
  
}

/* For mobile devices */
@media only screen and (max-width: 767px) {
  body {
    /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
    background-image: url(https://canalcadiz.es/luna-video/images/fondo-dos-mobile.webp);
  }
	}

* {
	padding:0;
	margin:0;
}

html, body {
	height:100%;
	font-family: 'Roboto', Arial, sans-serif;
	-ms-touch-action: none;
}


body {word-wrap:break-word; background-color:#000;}

#fb {
  height: 500px; /* CAMBIADO: Altura reducida */
  position: fixed;
  top: 14%;
  width: 335px; /* CAMBIADO: 300px del panel + 35px del botón */
  z-index: 1003;
  right: -300px; /* CAMBIADO: Coincide con el nuevo ancho */
  transition: right 0.5s ease-in-out; 
}

#fb .button {
  background: url("../imagenes/facebook.png") no-repeat scroll 0 0 transparent;
  float: left;
  height: 85px;
  position: relative;
  top: -3px;
  width: 35px;
}

#fb .body {
  background-color: #395994;
  float: right;
  height: 500px; /* CAMBIADO: Coincide con la nueva altura de #fb */
  width: 300px; /* CAMBIADO: Nuevo ancho del panel */
}
#fb .fbs {
  background-color: #fff;
  height: 510px;
  left: 25px;
  position: relative;
  top: 18px;
  width: 300px;
  overflow: hidden; /* <-- AÑADE ESTA LÍNEA */
}

/* AÑADE ESTA NUEVA REGLA */
#fb.is-open {
  right: 0; /* Muestra el panel al colocarlo en la posición 0 */
}

a {border:none;}
img {border:none;}
#logo {display:block;}

button, input, select, textarea {font-family: 'Roboto', Arial, sans-serif;}

.header {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:80px; /* Podrías necesitar ajustar la altura del header si el menú hamburguesa lo requiere en móviles */


	background: -moz-linear-gradient(top, rgba(14,14,14,1) 0%, rgba(14,14,14,0.65) 67%, rgba(0,0,0,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(14,14,14,1)), color-stop(67%,rgba(14,14,14,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(14,14,14,1) 0%,rgba(14,14,14,0.65) 67%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(14,14,14,1) 0%,rgba(14,14,14,0.65) 67%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(14,14,14,1) 0%,rgba(14,14,14,0.65) 67%,rgba(0,0,0,0) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(14,14,14,1) 0%,rgba(14,14,14,0.65) 67%,rgba(0,0,0,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */

	z-index:999;

}

	.player {
	

		color: rgba(0, 0, 0, 0);
		height:0px;
		width:100%;


	}


.skrollr-desktop body {
	height:100% !important;
}

p {
	margin:1em 0;
}

.parallax-image-wrapper {
	position:fixed;
	left:0;
	width:100%;
	overflow:hidden;
}

.parallax-image-wrapper-50 {
	height:100%;
	top:-100%;
	overflow:hidden;
}

.parallax-image-wrapper-100 {
	height:100%;
	top:-100%;
	overflow:hidden;
}

.parallax-image {
	display:none;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}

.parallax-image-50 {
	height:100%;
	top:0;
}

.parallax-image-100 {
	height:100%;
	top:0;
}

.parallax-image.skrollable-between {
	display:block;
}

.no-skrollr .parallax-image-wrapper {
	display:none !important;
}

#skrollr-body {
	height:100%;
	overflow:visible;
	position:relative;
}

.gap {
	background:transparent center no-repeat;
	background-size:cover;
	position:relative;
}

.next {min-height:900px;}

.skrollr .gap {
	background:transparent !important;
}

.gap-50 {
	height:50%;
}

.gap-100 {
	height:100%;
}

.content {
	padding:10px;
	font-size:18px;
	color:#fff;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	z-index:800;
	position:relative;
}

.content-full {
	min-height:80%;
}

#kittens {background:#ccc; color:#000;}

#bacons {background:transparent; color:#fff;}

#done {

	background:#000;
	color:#fff;
	min-height:120px;
}

.slope-container{
	display: block;
	width: 100%;
	overflow: hidden;
	height:120px;
	position:relative;
	z-index:100;
}

.slope {
	position:relative;
	z-index:99;
	height:120px;
}

.red-slope {}

.red-slope .slope{

	transform-origin: left center;
	-ms-transform-origin: 0% 50%;
	background: #ed1c24;
	transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	height:120px;
	margin-left:-10px;
}

.grey-slope {padding-top: 100px;}

.grey-slope .slope{

	transform-origin: left center;
	-ms-transform-origin: 0% 50%;
	background: #ccc;
	transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	height:120px;
	margin-right:-10px;
}

.grey-slope {
	position:absolute;
	bottom:-100px;
	left:0;
}
.black-slope {padding-top: 100px;}

.black-slope .slope{
	margin-right:-10px;
	transform-origin: left center;
	-ms-transform-origin: 0% 50%;
	background: #000;
	transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	height:120px;
}

.black-slope {
	position:absolute;
	bottom:-100px;
	left:0;
}

.red-slope {
	position:absolute;
	top:0;
	left:0;
}

/* --- ESTILOS PARA #menu (Escritorio Y RESPONSIVE) --- */
#menu {
    position: absolute;
    right: 10px;
    top: 5px;
    z-index: 1000; /* Asegurar que esté por encima de otros elementos del header si es necesario */
}

#menu ul {
    margin: 0;
    padding: 0;
    position: relative;
}

#menu ul li {
    float: left;
    list-style: outside none none;
}

#menu a {
    color: #fff;
    display: block;
    line-height: 32px;
    margin-right: 5px;
    min-width: 60px;
    overflow: hidden;
    padding: 0 10px 10px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: auto;
}

#menu a:hover {
    color: #fff !important;
}

#menu a span.hover {
    height: 35px;
    left: 0;
    position: absolute;
    top: -42px;
    transition: all 0.5s ease 0s;
    width: 100%;
}

#menu a span.arr {
    display: none;
}

#menu a span.menu_name {
    position: relative;
    z-index: 1000;
}

#menu li.current a span.hover,
#menu li:hover a span.hover {
    top: 0 !important;
    transition: all 0.5s ease 0s;
}

/* Colores de borde y hover de fondo - Mantenidos para escritorio */
#menu a.menu_1 { border-top: 2px solid #000; }
#menu a.menu_1 span.hover { background: none repeat scroll 0 0 #000; }
#menu a.menu_1 .arr { border-color: #000000 transparent transparent; }

#menu a.menu_2 { border-top: 2px solid #d44032; }
#menu a.menu_2 span.hover { background: none repeat scroll 0 0 #d44032; }
#menu a.menu_2 .arr { border-color: #d44032 transparent transparent; }

#menu a.menu_3 { border-top: 2px solid #44a5ac; }
#menu a.menu_3 span.hover { background: none repeat scroll 0 0 #44a5ac; }
#menu a.menu_3 .arr { border-color: #44a5ac transparent transparent; }

#menu a.menu_4 { border-top: 2px solid #324c68; }
#menu a.menu_4 span.hover { background: none repeat scroll 0 0 #324c68; }
#menu a.menu_4 .arr { border-color: #324c68 transparent transparent; }

#menu a.menu_5 { border-top: 2px solid #ff9900; }
#menu a.menu_5 span.hover { background: none repeat scroll 0 0 #ff9900; }
#menu a.menu_5 .arr { border-color: #ff9900 transparent transparent; }

#menu a.menu_6 { border-top: 2px solid #56a228; }
#menu a.menu_6 span.hover { background: none repeat scroll 0 0 #56a228; }
#menu a.menu_6 .arr { border-color: #56a228 transparent transparent; }

#menu a.menu_7 { border-top: 2px solid #4c4c4c; }
#menu a.menu_7 span.hover { background: none repeat scroll 0 0 #4c4c4c; }
#menu a.menu_7 .arr { border-color: #4c4c4c transparent transparent; }

#menu a.menu_8 { border-top: 2px solid #ffffff; }
#menu a.menu_8 span.hover { background: none repeat scroll 0 0 #ffffff; }
#menu a.menu_8 .arr { border-color: #ffffff transparent transparent; }

/* Regla original para .mob_#menu comentada, ya que la nueva implementación es más general */
/*
.mob_#menu ul li a.menu_1 {
	background: none repeat scroll 0 0 #000;
}
*/

/* --- ESTILOS PARA EL BOTÓN HAMBURGUESA Y MENÚ RESPONSIVE --- */

/* Ocultar el botón hamburguesa en pantallas grandes */
.menu-toggle {
    display: none;
}

/* Ajusta el max-width según tus necesidades (768px es un punto común para tablets) */
@media (max-width: 768px) {
    .header {
        /* La altura del .header (80px) podría necesitar ser consistente para el posicionamiento del menú */
    }

    .menu-toggle {
        display: block; /* Mostrar el botón en móviles */
        position: absolute; /* O fixed, si el header es fixed y quieres que el botón también lo sea */
        right: 15px;
        top: 15px; /* Ajustar para alinear con el header (considerar padding/altura del header) */
        z-index: 1002;
        background: #0058b2;
        color: #ccc;
        padding: 8px 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 20px;
        cursor: pointer;
    }

    #menu {
        /* En móvil, #menu puede no necesitar posicionamiento absoluto si .menu-toggle está fuera de él
           y el ul se posiciona independientemente. */
        position: static; /* O ajusta. Si .menu-toggle está dentro de #menu, #menu mantiene su position:absolute */
                           /* Si el botón está fuera, y solo el UL se mueve, esto está bien */
    }

    #menu ul {
        display: none; /* Oculto por defecto en móviles, se muestra con JS */
        position: absolute; /* Posicionamiento para el menú desplegable */
        top: 60px; /* Ajustar para que aparezca debajo del header o botón. Si header es 80px, quizá top: 80px? */
        left: 0;
        right: 0; /* Equivalente a width: 100% si left y right son 0 */
        /* width: 100%; */ /* Alternativa a left:0; right:0; */
        background-color: #222; /* Fondo oscuro para el menú desplegable */
        z-index: 1001;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        padding-top: 10px;
        padding-bottom: 10px;
        margin: 0; /* Resetear margen por si acaso */
    }

    /* Clase que se añadirá con JavaScript al #menu ul o a un contenedor padre */
    #menu ul.menu-open,
    body.mobile-menu-active #menu ul { /* Si prefieres añadir clase al body */
        display: block;
    }

    #menu ul li {
        float: none;
        display: block;
        width: 100%;
        text-align: left;
    }

    #menu ul li a {
        display: block;
        padding: 12px 20px;
        margin-right: 0;
        border-top: none !important; /* Quitar los bordes superiores de colores */
        border-bottom: 1px solid #444; /* Separador entre ítems */
        line-height: normal;
        min-width: unset;
        color: #f0f0f0; /* Texto claro para fondo oscuro */
        text-transform: none; /* Opcional: quitar text-transform si se ve mejor */
    }

    #menu ul li:last-child a {
        border-bottom: none;
    }

    #menu a span.hover,
    #menu a span.arr {
        display: none !important; /* Ocultar efectos de hover y flechas en móviles */
    }
}
/* --- FIN DE ESTILOS PARA MENÚ RESPONSIVE --- */


.center-me {position:relative; margin:auto; max-width:1220px; height:100%; z-index:1000; overflow:hidden;}

.lines {
	background: url("../imagenes/whiteline.png") repeat-x scroll center center rgba(0, 0, 0, 0);
	text-transform: uppercase;
	text-align:center;
	color: #fff;
	font-size: 19px;
	font-weight: 300;
	line-height: 19px;
	margin-bottom: 50px;
	margin-top: -20px;
}

#bacons .lines .z-text {background-color:#ed1c24; padding:0 10px;}
#kittens .lines .z-text {background-color:#ccc; color:#000; padding:0 10px;}
#done .lines .z-text {background-color:#000; padding:0 10px;}

#bacons h3 {text-align:center; margin:10px; font-size:48px; font-weight:700;}
#kittens h3 {text-align:center; margin:10px; font-size:48px; font-weight:700;}
#done h3 {text-align:center; margin:10px; font-size:48px; font-weight:700;}
.gap h3 {text-align:center; margin-bottom:10px; padding-top:50px; font-size:48px; font-weight:700; color:#fff;}

#cm-broadcast h3 {padding-top:130px;}

.navi {background:url("../imagenes/navi.png") no-repeat; margin:auto; width:89px; height:89px; position:absolute; z-index:96; left:50%; top:10px; transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%);}
.red-slope .navi {top:31px;}
.navi a {display:block; width:100%; height:100%;}
.noslope {margin-top:-48px;}

.ajaxnews {margin-right:45px; text-align:justify; min-height:335px;}
.ajaxnews img {margin:0 20px 20px 0; float:left; max-width: 100%; height: auto; width: auto;}
.video-left {margin:0 20px 20px 0; float:left; height: 250px; width: 444px;}
.video-right {margin-left: 20px; margin-bottom: 20px; float:right; height: 250px; width: 444px;}
.ajaxnews h2 {}
.ajaxnews a {color:#fff;}

.navigation {width:22px; height:100%; position:absolute; right:0; top:100px;}
.navigation .dot {background:url("../imagenes/dot.png") no-repeat; width:18px; height:18px; margin:3px;}
.navigation .arrow {}
.navigation .up {background:url("../imagenes/up.png") no-repeat; width:22px; height:18px; margin:2px 0;}
.navigation .down {background:url("../imagenes/down.png") no-repeat; width:22px; height:18px; margin:2px 0;}
.navigation .current {background:url("../imagenes/current.png") no-repeat !important;}
.navigation a {display:block; width:100%; height:100%; cursor:pointer;}

.gap .center-me {color:#fff; position:relative; z-index:95;}

#cm-broadcast, #cm-contact {min-height:800px;}

.broadcast #now {width:255px; text-align:justify; float:left;}
.broadcast #now .now {margin-bottom:15px; text-align:center; font-weight:700; font-size:24px;}
.broadcast #now .now img {margin:0 5px;}
.broadcast #now .journalist {}

.broadcast #now .journalist .employee {margin:5px 5px 0 5px; float:left; text-align:center;}
.broadcast #now .journalist .employee:first-child {margin:5px 0 0 0;}
.broadcast #now .journalist .employee:last-child {margin:5px 0 0 0;}
.broadcast #now .journalist .employee .image {text-align:center; margin:auto;}
.broadcast #now .journalist .employee .image img {margin:auto;}

.broadcast #now .journalist .name {font-size:12px; margin-bottom:15px;}
.broadcast #now .journalist .whois {font-size:12px;}
.broadcast #now .journalist img {margin:0 10px 10px 0;}
.broadcast #now .title {font-size:18px; font-weight:700; clear:both; margin-top:20px;}
.broadcast .index {border-left:solid 1px #999; width:900px; float:right; padding-left:20px; position:relative;}
.broadcast .index .days {margin-bottom:15px;}
.broadcast .index .days a {text-decoration:none; background-color:#ed1c24; padding:5px 10px; margin:0 2px; color:#fff; cursor:pointer;}
.broadcast .index .days a:hover {text-decoration:none; background-color:#ccc; padding:5px 10px; margin:0 2px; color:#fff;}
.broadcast .index .days a.current {text-decoration:none; background-color:#666; padding:5px 10px; margin:0 2px; color:#fff;}
.broadcast .index .days a.current:hover {text-decoration:none; background-color:#ccc; padding:5px 10px; margin:0 2px; color:#fff;}
.broadcast .index .info {padding-right:10px;}
.broadcast .index .info .block {margin:15px 0; background-color:#666;}
.broadcast .index .info .block .time {float:left; width:110px; padding:15px 20px; font-size:18px;}
.broadcast .index .info .block .info {text-align:justify; float:left;}
.broadcast .index .info .block  p {padding:0 10px 10px 0; font-size:14px;}
.broadcast .index .info .block  img {margin:0 5px 0 0; float:left; height:60px;}
.broadcast .index .info .block  .title {font-weight:700; padding-top:5px;}
.broadcast .index .info .block .title_block {float:right; width:560px;}
.broadcast .index .info .block .title_block p {margin:3px 0;}
.broadcast .index .info .block  .title .author {font-weight:normal;}

.address p {font-size:22px; margin:2px 0;}
.address a {text-decoration:none; color:#fff;}
.address a:hover {text-decoration:none; color:#ed1c24;}

input[type="text"], input[type="email"], textarea {
	background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 10px;
	box-sizing: border-box;
	color: #fff;
	display: inline-block;
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 10px;
	padding: 5px;
	width: 99%;
}

input[type="submit"] {
  background: none repeat scroll 0 0 #ffffff;
  border: medium none;
  border-radius: 10px;
  color: #000;
  font-size: 18px;
  margin: 0 1% 1% 0;
  padding: 15px 20px;
  text-transform: uppercase;
  cursor:pointer;
}

input[type="submit"]:hover {
  background: none repeat scroll 0 0 #000;
  border: medium none;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  margin: 0 1% 1% 0;
  padding: 15px 20px;
  text-transform: uppercase;
  cursor:pointer;
}

.form form span.required {color:red;}
.form p {margin:5px 0;}

.filler {

position:relative;
z-index:90;
background-color: rgba(0, 0, 0, 0.4);
background: rgba(0, 0, 0, 0.4);
color: rgba(0, 0, 0, 0.4);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=40);
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

}

#bacons .ajaxnews {display:none;}
#bacons .current {display:block;}

form label.error {color:#ed1c24;}
form input.error {border:solid 1px #ed1c24;}
form textarea.error {border:solid 1px #ed1c24;}

#cm-contact #message_info {font-size:16px; font-weight:700;}
#cm-contact #message_info .error {color:#ed1c24;}

.loader {text-align:center;}
.loader img {margin:auto; margin-top:30px;}

.nextw {}

.broadcast .index .info-layer {color:#fff; padding:20px; cursor:pointer; width:861px; height:550px; background-color: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=80); position:absolute; top:-10px; left:19px;}

#broadcast_cont .info .block .photo a {cursor:pointer;}
#broadcast_cont .info .block {cursor:pointer;}

#info-layer .employee .image {float:left; margin:0 10px 10px 0;}
#info-layer h3 {padding:10px 0; font-size:26px; text-align:left;}
#info-layer p {color:#fff;}

#info-layer .broadcast_details {color:#fff;}
#info-layer .broadcast_details .employee {margin:5px 5px 0 5px; float:left; text-align:center;}
#info-layer .broadcast_details .employee:first-child {margin:5px 0 0 0;}
#info-layer .broadcast_details .employee:last-child {margin:5px 0 0 0;}
#info-layer .broadcast_details .employee .image {text-align:center; margin:auto;}
#info-layer .broadcast_details .employee .image img {margin:auto;}

#info-layer .broadcast_details .day {font-size:18px; color:#ed1c24;}
#info-layer .broadcast_details .time {font-size:18px;}

#info-layer .broadcast_details .title {font-size:18px; color:#ed1c24; font-weight:700; margin-top:15px;}
#info-layer .broadcast_details .desc {font-size:14px; margin-bottom:15px; margin-top:15px; text-align:justify;}
#info-layer .broadcast_details .si {font-size:12px; color:#ccc;}

#jwplayer {position:relative; color:#fff;}
#cm-home-text {text-align:center;}
#jwplayer a {color:#fff; text-decoration:none;}

.metadatos {
    display: flex;
     width: 100%;
    align-items: center;
    justify-content: center;
    position: relative;
      left: 0px;
      top: 220px;

}

.center {
  text-align: center;
}