/*NEW STYLES*/
.top_bar {
	width:100%;
	height:45px;
	background:#000;
	position:absolute;
	top:0;
	left:0;
	text-align:left;
	padding:10px 15px 0 15px;
	border-top:1px solid #333;
}

.top_bar_inner_right, .top_bar_inner_right2 {
	position:relative;
	float:right;
	margin:5px 5px 0 0;
	padding-right:20px;
	font-family:'Outfit',sans-serif;
	font-weight: 300;
}

.top_bar_inner_right2 {
	margin:0 0 0 0;
	padding-right:10px;
}

.ref {
	color:#fff;
}

.device_img{display:none}
.device_img img{width:100%}

.back_to_letters img{margin:5px 0 0 10px;}
.back_to_letters2{margin-right:0}




.bb-bookblock {
	width:960px;
	height:700px;
	margin:80px auto 0;
	position:relative;
	z-index:100;
	-webkit-perspective:1300px;
	perspective:1300px;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}

.bb-page {
	position:absolute;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-webkit-transition-property:-webkit-transform;
	transition-property:transform;
}

.bb-vertical .bb-page {
	width:50%;
	height:100%;
	left:50%;
	-webkit-transform-origin:left center;
	transform-origin:left center;
}

.bb-page > div,.bb-outer,.bb-content,.bb-inner {
	position:absolute;
	height:100%;
	width:100%;
	top:0;
	left:0;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}

.bb-vertical .bb-content {
	width:200%;
}

.bb-page > div {
	width:100%;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
}

.bb-vertical .bb-back {
	-webkit-transform:rotateY(-180deg);
	transform:rotateY(-180deg);
}

.bb-outer {
	width:100%;
	overflow:hidden;
	z-index:999;
}

.bb-overlay,.bb-flipoverlay {
	background-color:transparent;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:0;
}

.bb-flipoverlay {
	background-color:transparent;
}

.bb-bookblock.bb-vertical > div.bb-page:first-child,.bb-bookblock.bb-vertical > div.bb-page:first-child .bb-back {
	-webkit-transform:rotateY(180deg);
	transform:rotateY(180deg);
}

/* Content display */
.bb-content {
	background:transparent;
}

.bb-vertical .bb-front .bb-content {
	left:-100%;
}

/* Flipping classes */
.bb-vertical .bb-flip-next,.bb-vertical .bb-flip-initial {
	-webkit-transform:rotateY(-180deg);
	transform:rotateY(-180deg);
}

.bb-vertical .bb-flip-prev {
	-webkit-transform:rotateY(0deg);
	transform:rotateY(0deg);
}

.bb-vertical .bb-flip-next-end {
	-webkit-transform:rotateY(-15deg);
	transform:rotateY(-15deg);
}

.bb-vertical .bb-flip-prev-end {
	-webkit-transform:rotateY(-165deg);
	transform:rotateY(-165deg);
}

.bb-item {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	display:none;
	background:#fff;
}

/* No JS */
.no-js .bb-bookblock,.no-js ul.bb-custom-grid li {
	width:auto;
	height:auto;
}

.no-js .bb-item {
	display:block;
	position:relative;
}

.bb-custom-wrapper {
	width:960px;
	position:relative;
	margin:0 auto;
	text-align:center;
}



@media (max-width: 1023px) {
	.bb-bookblock,.after-bookblock, #bb-nav-prev, #bb-nav-next, .back_to_letters {
		display:none;
	}
	
	.device_img{display:block;margin-bottom:20px}
	
	.bb-custom-wrapper {
		width:90%;
		margin:0 auto;
		padding:0 20px;
	}
}


/* AÑADIMOS REGLA PARA CENTRAR IMAGENES EN NAV */
.bb-custom-wrapper nav a img {
    vertical-align: middle; /* Mantener */
    display: block; /* Asegurar que la imagen se comporte como un bloque */
    height: 20px; /* Mantener la altura de la imagen */
}

/* Modificamos la barra de navegación para usar Flexbox */
.bb-custom-wrapper nav {
	width:100%;
	/* height:20px; -- Aumentar ligeramente la altura para dar más espacio */
    height: 0; /* Ejemplo: Aumentar a 30px */
	/* margin:5px auto 0; -- Ajustar el margen superior si aumentas la altura total que ocupa el nav */
    margin: 0 auto; /* Ejemplo: Aumentar el margen superior a 10px */
	position:relative;
	z-index:0;
	/* text-align:center; -- text-align no afecta a los elementos flex */

    /* Propiedades Flexbox para centrar */
    display: flex; /* Activar Flexbox */
    align-items: center; /* Centra verticalmente los elementos hijos (los enlaces <a>) */
    justify-content: center; /* Centra horizontalmente los elementos hijos (los enlaces <a>) */
}

/* Modificamos los enlaces de navegación (los items flex) */
.bb-custom-wrapper nav a {
	/* display:inline-block; -- No necesario con flexbox */
	width:20px; /* Ancho del enlace */
	height:30px; /* Altura del enlace */
	/* text-align:center; -- Probablemente no necesario */
	background:transparent;
	/* margin:0 40px 0 0; -- Ajustar márgenes para el espaciado entre items flex */
    margin: 0 10px; /* Ejemplo: 10px de margen a izquierda y derecha de cada enlace */
    /* vertical-align: middle; -- No necesario en el item flex para centrado vertical con align-items: center */
}




.bb-custom-icon-arrow-left:before,.bb-custom-icon-first:before {
	-webkit-transform:rotate(180deg);
	transform:rotate(180deg);
}

/* No JS */
.no-js .bb-custom-wrapper {
	height:auto;
}

.no-js .bb-custom-content {
	height:700px;
}



.transcript, .transcript2 {
	color:#000;
	font-size:1.4rem;
	text-align:left;
	line-height:1.3;
	font-family:'Cormorant Garamond',serif;
	
	font-weight: 300;
	margin:0 auto;
	margin-top:50px;
	width:60%
}

.transcript2 {
	font-size:1.05rem;
	line-height:1.4;
	font-family:'Outfit',sans-serif;
	color:#333;
	font-weight: 300;
	margin-top:0;
}

.transcript p, .transcript2 p {
	margin-bottom:15px;
}

.transcript p strong, .transcript2 p strong {
	font-weight:600;
	color:#000;
}

.transcript p a, .transcript p a strong, .transcript2 p a, .transcript2 p a strong {
	color:#900;
}

.transcript p em, .transcript2 p em {
	font-style: italic;
	color:#000
}

.transcript2 img, .transcript img {
	width:100%;
	margin-top:10px;
}

.date-letter{font-family:'Outfit',sans-serif;text-align:center;font-size: 1rem;background-color: #000;color:#fff
}

@media (max-width: 440px) {
	
	.transcript, .transcript2 {
	width:100%}	

	
	.top_bar {
		padding:5px 0 0 15px;
	}
}

hr {
	border:0;
	height:0;
	border-top:1px solid rgba(0,0,0,0.1);
	border-bottom:1px solid rgba(255,255,255,0.3);
	margin:20px 0;
}