@import url('nav.css?v=5');
@import url('index.css?v=5');

/*Wrapper Sizes*/

body{
	background-color: #efefef;
	margin: 0;
	
}

.wrapper{
	width: 100%;
	/*margin-left: -25px;*/
	background-color: #efefef;

}

.wrapper .child-element{
	position:relative;
	-webkit-transform: translate3d(0,0,0);
}

.wrapper .content{
	width: 1024px;
	margin:0 auto;
	max-width: 100%;
}

.wrapper .content .header{
	width: 100%;
	margin:0 auto;
}

.wrapper .content .page{
	background-color: #ffffff;
	width: 100%;
	height: 768px;
	position: relative;
	margin-bottom: 15px;
	-webkit-box-shadow:  2px 2px 5px 0px #707070;
    -moz-box-shadow: 2px 2px 5px 0px #707070;
    box-shadow:  2px 2px 5px 0px #707070;
}


/*links position*/

#link1{position:absolute;margin:610px 0px 0px 538px;}
#link2{position:absolute;margin:635px 0px 0px 538px;}
#link3{position:absolute;margin:620px 0px 0px 129px;}
#link4{position:absolute;margin:610px 0px 0px 557px;}
#link4 a{color:#616161!important;}
#link5{position:absolute;margin:650px 0px 0px 129px;}
#link6{position:absolute;margin:630px 0px 0px 557px;}
#link7{position:absolute;margin:595px 0px 0px 129px;}
#link8{position:absolute;margin:620px 0px 0px 129px;}
#link9{position:absolute;margin:657px 0px 0px 557px;}
#link10{position:absolute;margin:650px 0px 0px 126px;}
#link11{position:absolute;margin:650px 0px 0px 562px;}
#link12{position:absolute;margin:670px 0px 0px 130px;}
#link13{position:absolute;margin:692px 0px 0px 560px;}
#link14{position:absolute;margin:495px 0px 0px 130px;}
#link15{position:absolute;margin:515px 0px 0px 560px;}
#link16{position:absolute;margin:370px 0px 0px 320px;}
#link16 a{color:#e35a26!important;}
#link17{position:absolute;margin:470px 0px 0px 320px;}
#link17 a{color:#3f4d67!important;}
#link18{position:absolute;margin:241px 0px 0px 155px;}
#link18 p{font-size: 17px;font-weight: bold;}
#link19{position:absolute;margin:673px 0px 0px 568px;}
#link19 a{font-size: 17px;}


.wrapper .content .page .readmore_horizontal{
	background-image: url("../images/page/readmore_horizontal.png");
	background-repeat: no-repeat;
	position:absolute;
	top: 700px;
	left: 860px;
	width: 128px;
	height: 25px;
}

/*Interactions*/
.wrapper .content .page .interaction_portada{
	padding: 399px 0px 79px;
}


.wrapper .content .page .interaction{
	padding: 158px 92px;
}


.wrapper .content .page .interaction_small{
	padding: 125px 253px;
}


.wrapper .content .page .interaction_big{
	padding: 117px 86px;
}

.wrapper .content .page .interaction_cad{
	padding: 173px 107px;
}

/*video*/

.wrapper .content .video{
			padding: 193px 192px 209px 192px;
		}
		
.wrapper .content .video_text_1l{
			padding: 209px 192px 193px 192px;
		}

.wrapper .content .video_text_2l{
			padding: 225px 215px 177px 160px;
		}
		
.wrapper .content .video_text_3l{
			padding: 225px 183px 177px 192px;
		}
		
.wrapper .content .video_text_4l{
			padding: 246px 183px 156px 192px;
		}

.border_red{
			border-top:6px solid #cb3f26;
			width: 640px;
			height: 360px;
			background-color: #000;
			
		}
		
.border_green{
			border-top:6px solid #90a73f;
			width: 640px;
			height: 360px;
			background-color: #000;
		}
		
.border_purple{
			border-top:6px solid #6a639a;
			width: 640px;
			height: 360px;
			background-color: #000;
		}
		
.border_blue{
			border-top:6px solid #2192c8;
			width: 640px;
			height: 360px;
			background-color: #000;
		}

.border_yellow{
			border-top:6px solid #ecb000;
			width: 640px;
			height: 360px;
			background-color: #000;
		}
		
.border_cyan{
			border-top:6px solid #3ab1a1;
			width: 640px;
			height: 360px;
			background-color: #000;
		}
/*video control*/

button.play-pause{
	background-image: url(../images/slider/play.png); 
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 23px;           /* make this the size of your image */
    width: 22px;
	margin:10px 10px 10px 20px;
   /* padding-left: 16px;*/     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
}

input[type="range"] {
    -webkit-appearance: none;
    background-color: #f3f7f8;
    height: 5px;
    width:520px;
}


/*Sliders*/

.border_green_bottom{
			border-bottom:6px solid #90a73f;
}

.border_purple_bottom{
			border-bottom:6px solid #6a639a;
}

/*Index Video*/

.left{float:left; margin-right: 40px;}
.right{float: left;}
.bottom-margin{margin-bottom: 30px;}
.triangle{
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 12px 0 0 12px;
	float:left;
	margin-top:-4px;
	
}

.red{border-color: transparent transparent transparent #cb3f26;}
.green{border-color: transparent transparent transparent #90a73f;}
.purple{border-color: transparent transparent transparent #6a639a;}
.blue{border-color: transparent transparent transparent #2192c8;}
.yellow{border-color: transparent transparent transparent #ecb000;}
.cyan{border-color: transparent transparent transparent #3ab1a1;}

.info{
	
	margin-left: 18px;
}
.dotted-line{border-bottom: 2px dotted #6a639a;position:absolute;width: 100%;height: 100%;}

.content-link-inline{
	overflow: hidden;
	float: left;
}

.chapter-line{border-bottom: 2px dotted #a3499b; margin-bottom: 20px; display: block; float: left; padding-bottom: 20px; width: 680px;}

/*styles for retina devices*/
		
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
		   
		  			
			button.play-pause{
				background-image: url(../images/slider/play@2x.png); 
    			background-color: transparent; /* make the button transparent */
    			background-repeat: no-repeat;  /* make the background image appear only once */
    			background-size:23px 22px;
   			}



}

/* ===================================================================
   RESPONSIVE DESIGN - MULTIPLATFORM SUPPORT
   =================================================================== */

/* Base responsive adjustments */
* {
	box-sizing: border-box;
}

/* Container responsiveness */
@media only screen and (max-width: 1200px) {
	.wrapper .content {
		width: 100%;
		max-width: 100%;
		padding: 0 15px;
	}
}

/* Tablet Landscape (1024px and below) */
@media only screen and (max-width: 1024px) {
	.wrapper .content {
		width: 100%;
		padding: 0 20px;
	}

	.wrapper .content .page {
		width: 100%;
		height: auto;
		min-height: 600px;
		padding-bottom: 20px;
	}

	/* Maintain aspect ratio for interactions */
	.wrapper .content .page .interaction_portada {
		padding: 30% 0 10%;
	}

	.wrapper .content .page .interaction {
		padding: 15% 9%;
	}

	.wrapper .content .page .interaction_small {
		padding: 12% 20%;
	}

	.wrapper .content .page .interaction_big {
		padding: 11% 8%;
	}

	/* Responsive video containers */
	.wrapper .content .video,
	.wrapper .content .video_text_1l,
	.wrapper .content .video_text_2l,
	.wrapper .content .video_text_3l,
	.wrapper .content .video_text_4l {
		padding: 15% 10%;
	}

	.border_red, .border_green, .border_purple,
	.border_blue, .border_yellow, .border_cyan {
		width: 100%;
		max-width: 640px;
		height: auto;
		aspect-ratio: 16 / 9;
	}

	/* Make video iframes responsive */
	iframe {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

/* Tablet Portrait (768px to 1023px) */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.wrapper .content {
		width: 100%;
		padding: 0 15px;
	}

	.wrapper .content .page {
		width: 100%;
		height: auto;
		min-height: 500px;
	}

	/* Adjust navigation for tablets */
	.nav-bar-container {
		width: 100%;
		padding: 0 15px;
	}

	/* Scale canvas and images proportionally */
	canvas {
		max-width: 100%;
		height: auto !important;
	}
}

/* ===================================================================
   MOBILE LANDSCAPE ORIENTATION (RECOMMENDED)
   Best viewing experience for the book on mobile devices
   Pages are scaled down to fit viewport while maintaining aspect ratio
   =================================================================== */
@media only screen and (max-width: 926px) and (orientation: landscape) {
	body {
		padding: 0;
		margin: 0;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.wrapper {
		width: 100%;
		overflow-x: hidden;
		display: flex;
		justify-content: center;
		padding-top: 40px; /* Account for fixed navigation */
	}

	.wrapper .content {
		width: 1024px; /* Keep original width */
		padding: 0;
		margin: 0 auto;
		transform-origin: top center;
		/* Scale based on viewport - will be adjusted by JavaScript */
	}

	/* Scale the entire page to fit viewport height */
	.wrapper .content .page {
		width: 1024px;
		height: 768px;
		margin-bottom: 20px;
		transform-origin: top center;
		/* Maintain original dimensions, scaling is handled on container */
	}

	/* Keep interactions at original sizing */
	.wrapper .content .page .interaction_portada,
	.wrapper .content .page .interaction,
	.wrapper .content .page .interaction_small,
	.wrapper .content .page .interaction_big,
	.wrapper .content .page .interaction_cad {
		/* Original padding preserved */
	}

	/* Video containers maintain original layout */
	.wrapper .content .video,
	.wrapper .content .video_text_1l,
	.wrapper .content .video_text_2l,
	.wrapper .content .video_text_3l,
	.wrapper .content .video_text_4l {
		/* Original padding preserved */
	}

	.border_red, .border_green, .border_purple,
	.border_blue, .border_yellow, .border_cyan {
		width: 640px;
		height: 360px;
	}

	/* Keep original text sizes - scaling handles readability */
	/* All fonts maintain original size for proper scaling */

	/* Images and canvas keep original dimensions */
	img {
		max-width: 100%;
		height: auto;
	}

	canvas {
		/* Original sizing preserved */
	}

	/* Links maintain original positioning */
	#link1, #link2, #link3, #link4, #link5, #link6,
	#link7, #link8, #link9, #link10, #link11, #link12,
	#link13, #link14, #link15, #link16, #link17, #link18, #link19 {
		/* Original positions preserved */
	}

	/* Video controls */
	input[type="range"] {
		width: 520px;
	}

	/* Original layout preserved */
	.left, .right {
		float: left;
		margin-right: 40px;
	}

	/* Chapter line */
	.chapter-line {
		width: 680px;
	}
}

/* ===================================================================
   MOBILE PORTRAIT ORIENTATION
   Simplified view - encourages rotation to landscape
   =================================================================== */
@media only screen and (max-width: 767px) and (orientation: portrait) {
	body {
		padding: 0;
		margin: 0;
		overflow-x: hidden;
		background-color: #2a2a2a;
	}

	.wrapper {
		width: 100%;
		overflow-x: hidden;
	}

	.wrapper .content {
		width: 100%;
		padding: 0;
		margin: 0;
	}

	.wrapper .content .page {
		width: 100%;
		height: auto;
		margin-bottom: 10px;
		background-size: contain !important;
		background-position: top center !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Allow horizontal scrolling to see full page */
	.wrapper .content .page .interaction_portada,
	.wrapper .content .page .interaction,
	.wrapper .content .page .interaction_small,
	.wrapper .content .page .interaction_big,
	.wrapper .content .page .interaction_cad {
		min-width: 100%;
		padding: 0;
	}

	/* Scale down but maintain proportions */
	.border_red, .border_green, .border_purple,
	.border_blue, .border_yellow, .border_cyan {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}

	/* Readable text in portrait */
	p, div, span {
		font-size: 13px !important;
		line-height: 1.5 !important;
	}

	h1 {
		font-size: 22px !important;
	}

	h2 {
		font-size: 18px !important;
	}

	h3 {
		font-size: 16px !important;
	}

	img {
		max-width: 100% !important;
		height: auto !important;
	}

	canvas {
		max-width: 100% !important;
		height: auto !important;
	}

	/* Stack links vertically in portrait */
	#link1, #link2, #link3, #link4, #link5, #link6,
	#link7, #link8, #link9, #link10, #link11, #link12,
	#link13, #link14, #link15, #link16, #link17, #link18, #link19 {
		position: static !important;
		margin: 8px auto !important;
		display: block;
		text-align: center;
		font-size: 12px !important;
	}

	.left, .right {
		float: none;
		margin: 0 0 15px 0;
		width: 100%;
	}

	.chapter-line {
		width: 100%;
	}
}

/* High DPI / Retina displays - maintain across all sizes */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	/* Retina-specific adjustments handled in individual pages */
}