/* ==========================================================================
   ROOFTOP HOME - Bloque rooftop de la home
   ==========================================================================
   Modulo del bloque rooftop (coctelera/azotea) que se muestra en la portada.
   Se carga condicionalmente desde
   xsl/themes/default/_common/rooftop/rooftop.xsl dentro del <xsl:if>
   que comprueba si el bloque "custom-rooftop" existe en el CMS, asi que si
   el editor no crea esa seccion, este CSS no se descarga. NO se registra en
   etc/theme-config.php (carga deliberada desde la propia plantilla XSL).

   Reglas base trasladadas literalmente desde fenix-sevilla-hotel.css
   (lineas 1132-1195) y los overrides responsive desde skeleton.css
   (lineas 114-120, 220-226, 335-342). Movimiento 1:1, sin cambiar valores
   ni orden. Este bloque solo tiene TRES breakpoints responsive (a
   diferencia de roomsSec, que tenia cinco).
   ========================================================================== */

#rooftopSec {
	padding-top: 5rem;
	padding-bottom: 5rem;
	background-color: #F4C670;
	overflow: hidden;
}
#rooftopSec .titleBox {
	max-width: 45.9375rem;
	margin: 0 auto;
	margin-bottom: 4rem;
}
#rooftopSec .titleBox .subtitle {
	display: block;
	margin: 0 0 2rem 0;
	font-size: 1.125rem;
	color: #800033;
	font-weight: 600;
	line-height: 1.4375rem;
	letter-spacing: 0.09375rem;
	text-transform: uppercase;
	text-align:center;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}
#rooftopSec .titleBox .title {
	display: block;
	margin: 0;
	font-size: 2.8125rem;
	color: #1A1A1A;
	font-weight: 400;
	line-height: 3.25rem;
	letter-spacing: -0.09375rem;
	text-align:center;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}
#rooftopSec .titleBox .title br {
	display: block;
}
#rooftopSec .image {
	margin-bottom: 4rem;
}
#rooftopSec .content {
	max-width: 53.9375rem;
	margin: 0 auto;
}
#rooftopSec .content p {
	margin: 0 0 2.1875rem 0;
	font-size: 1.125rem;
	color: #1A1A1A;
	font-weight: 400;
	line-height: 1.5rem;
	text-align:center;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}
#rooftopSec .content p:last-child {
	margin-bottom: 0;
}
#rooftopSec .content .button {
	margin: 0 auto;
	margin-top: 2.5rem;
}

@media only screen and (min-width: 961px) and (max-width: 1365px) {

#rooftopSec 										{ padding-top: 4.375rem; padding-bottom: 4.375rem; }
#rooftopSec .titleBox 								{ margin-bottom: 3.125rem; }
#rooftopSec .titleBox .subtitle 					{ margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#rooftopSec .titleBox .title 						{ font-size: 2.5rem; line-height: 2.8125rem; }
#rooftopSec .content p 								{ margin-bottom: 1.875rem; font-size: 1.125rem; line-height: 1.5rem; }
#rooftopSec .image 									{ margin-bottom: 3.125rem; }
#rooftopSec .content .button 						{ margin-top: 3.125rem; }

}

@media only screen and (min-width: 768px) and (max-width: 960px) {

#rooftopSec 										{ padding-top: 4.375rem; padding-bottom: 4.375rem; }
#rooftopSec .titleBox 								{ margin-bottom: 1.875rem; }
#rooftopSec .titleBox .subtitle 					{ margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#rooftopSec .titleBox .title 						{ font-size: 2rem; line-height: 2.3125rem; }
#rooftopSec .content p 								{ margin-bottom: 1.5625rem; font-size: 1rem; line-height: 1.375rem; }
#rooftopSec .image 									{ margin-bottom: 1.875rem; }
#rooftopSec .content .button 						{ margin-top: 1.875rem; }

}

@media only screen and (max-width: 767px) {

#rooftopSec											{ padding-top: 3.125rem; padding-bottom: 3.125rem; }
#rooftopSec .titleBox 								{ margin-bottom: 1.875rem; }
#rooftopSec .titleBox .subtitle 					{ margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#rooftopSec .titleBox .title 						{ font-size: 2rem; line-height: 2.3125rem; }
#rooftopSec .titleBox .title br 					{ display: none; }
#rooftopSec .content p 								{ margin-bottom: 1.5625rem; font-size: 1rem; line-height: 1.375rem; }
#rooftopSec .image 									{ margin-bottom: 1.875rem; }
#rooftopSec .content .button 						{ margin-top: 1.875rem; }

}