body {	margin: 0px;
				padding: 0px;
				overflow: hidden;
				background: black;
				font-family: 'Open Sans', sans-serif;
	}
		
	#menuBar {	position:absolute; 
				left: 0px; 
				top: 0px; 
				width:100%; 
				height:30px; 
				display:block; 
				z-index: 500;
	}
	
	#menuViewCardboardIconPC {	width:60px; 
					height:60px; 
					float:left;			
	}
	
	#menuView360IconPC {	width:60px; 
					height:60px; 
					float:left;			
	}
	
	#menuViewCardboardIconMobile {	width:30px; 
					height:30px; 
					float:left;			
	}
	
	#menuView360IconMobile {	width:30px; 
					height:30px; 
					float:left;			
	}
	
	#menuSetupPC {	width:60px; 
					height:60px; 
					float:right;			
	}
	
	#menuSetupMobile {	width:30px; 
					height:30px; 
					float:right;			
	}
	
	#dianaL	{	width: 8px; 
				height: 8px; 
				left: 25%; 
				top: 50%; 
				position: fixed; 
				margin-left:-4px; 
				margin-top:-4px; 
				z-index:2147483647; 
				display:none;
	}

	#dianaR {	width: 8px; 
				height: 8px; 
				left: 75%; 
				top: 50%; 
				position: fixed; 
				margin-left:-4px; 
				margin-top:-4px; 
				z-index:1001; 
				display:none;		
	}
	
	#dianaC {	width: 8px; 
				height: 8px; 
				left: 50%; 
				top: 50%; 
				position: fixed; 
				margin-left:-4px; 
				margin-top:-4px; 
				z-index:2147483647; 
				display:none;		
	}
	
	#debugPanel {	background-color: black; 
					color: white; 
					position: absolute; 
					top: 50px; 
					left:0px; 
					width: 200px; 
					height: 50px; 
					z-index:1000; 
					display:none;					
	}
	
	#fondo { 	width: 100%; 
				height: 100%; 
				position: fixed; 
				top: 0px; 
				left: 0px; 
				z-index: 990;
				opacity: 0.8;
				background:#000;	   
	}
	
	#frmSetupFlotante {	z-index: 999; 
				border: 1px solid #1A2C5E; 
				margin-top: -756px; 
				margin-left: -256px; 
				top: 50%; 
				left: 50%; 
				padding: 12px; 
				position: fixed; 
				width: 512px; 
				height: 256px;
				background-color: #fff; 
				color: #000;
				border-radius: 4px;
				text-decoration: none;						
	}
	
	/* HORIENTACIÓN VERTICAL */
	@media all and (orientation:portrait) {
		/* pantalla de selección de idiomas */
		#frmStartFlotante {	z-index: 1100; 
				border: 1px solid #1A2C5E; 
				margin-top: -756px; 
				margin-left: -128px; 
				top: 50%; 
				left: 50%; 
				padding: 2px;
				position: fixed; 
				width:  256px; 		/* ancho de la ventana flotante */
				height: 350px;		/* alto de la ventana flotante  */
				background-color: #fff; 
				color: #000;
				border-radius: 4px;
				text-decoration: none;					
		}
		/* pantalla de menú de selección de secciones */
		#frmIndexMenuFlotante {	z-index: 1050; 
				border: 1px solid #1A2C5E; 
				margin-top: -756px; 
				margin-left: -128px; 
				top: 50%; 
				left: 50%; 
				padding: 2px;
				position: fixed; 
				width:  256px; 		/* ancho de la ventana flotante */
				height: 350px;		/* alto de la ventana flotante  */
				background-color: #fff; 
				color: #006;
				border-radius: 4px;
				text-decoration: none;						
		}

        #setupSelection {
                height: 120px; 
                width: 100%; 
                position: relative; 
                top: -208px;                                                /* -208 para 1 o 2 botones, -308 para 3 o 4 botones   */
                text-align: center;
        }


        #windowClose{
                height: 120px; 
                width: 100%; 
                position: relative; 
                top: -350px; 
                text-align: right;"
        }


		/* pantalla de selección de formato de visualización */
		#frmViewFormatFlotante {	z-index: 999; 
				border: 1px solid #1A2C5E; 
				margin-top: -756px; 
				margin-left: -128px; 
				top: 50%; 
				left: 50%; 
				padding: 2px;
				position: fixed; 
				width:  256px; 		/* ancho de la ventana flotante */ 
				height: 350px;		/* alto de la ventana flotante  */
				background-color: #fff; 
				color: #000;
				border-radius: 4px;
				text-decoration: none;	
	
		}
		
        /* pantalla de selección de formato de visualización */
		#frmSetupFlotante {	z-index: 999; 
				border: 1px solid #1A2C5E; 
				margin-top: -756px; 
				margin-left: -128px; 
				top: 50%; 
				left: 50%; 
				padding: 2px;
				position: fixed; 
				width:  256px; 		/* ancho de la ventana flotante */ 
				height: 350px;		/* alto de la ventana flotante  */
				background-color: #fff; 
				color: #000;
				border-radius: 4px;
				text-decoration: none;	
	
		}

		#frmStartBackgroundImage{
			margin-top:  2px;
			margin-left: 2px;
			width: 		 252px; 				/* porción de la imagen que se ve */
			height: 	 346px; 				
			background:  url("..//pictures/frmStartBackgroundPortrait.jpg");  				/* -100px, 0px;     estas coordenadas son para recortar un trozo de la foto */
		}
		
		#frmIndexMenuBackgroundImage{
			margin-top:  2px;
			margin-left: 2px;
			width: 		 252px; 				/* porción de la imagen que se ve */
			height: 	 346px; 				
			background:  url("..//pictures/frmIndexMenuBackgroundPortrait.jpg"); 				/* -125px, 0px;     */
		}
		
		#indexMenuSeparator02{
			width: 0px;
			
		}
		

        #frmViewFormatBackgroundImage{
			margin-top:  2px;
			margin-left: 2px;
			width: 		 252px; 				/* porción de la imagen que se ve */
			height: 	 346px; 
			background: url("..//pictures/frmViewFormatBackgroundPortrait.jpg");					/* -125px, 0px;     */
		}

        #frmSetupBackgroundImage{
			margin-top:  2px;
			margin-left: 2px;
			width: 		 252px; 				/* porción de la imagen que se ve */
			height: 	 346px; 
			background: url("..//pictures/frmSetupBackgroundPortrait.jpg");					/* -125px, 0px;     */
		}


		#viewFormatVRImage{
			margin-left=80px;
		}
		
		#formatSelection{
			/* margin-top:	50px;	*/
			height: 	32px; 
			width: 		100%; 
			text-align: center;
			position: 	relative;  
			top: -190px; 
		}
		
		#languageSelection3{
			width: 	265px;
		}
		
		
		#viewFormatSeparator01{
			width: 1px;
		}
		
		#vrExperienceTitle{
			height: 	45px; 
			width: 		100%; 
			position: 	relative;  
			top: 		-310px; 
			text-align: center;
		}
		
		
		
		#projectTitlePicture{				/* JPG con el título  del proyecto */
			width:	232px;			//ancho del título
			height:	37.963636363636px;			//alto del título
		}
		
	}

	/* HORIENTACIÓN HORIZONTAL */
	@media all and (orientation:landscape) {
		/* pantalla de selección de idiomas */
		#frmStartFlotante {	z-index: 1100; 
				border: 1px solid #1A2C5E; 
				margin-top: -756px; 
				margin-left: -256px; 
				top: 50%; 
				left: 50%; 
				padding: 2px;
				position: fixed; 
				width:  512px;			/* ancho de la ventana flotante */
				height: 256px;			/* alto  de la ventana flotante */
				background-color: #fff; 
				color: #000;
				border-radius: 4px;
				text-decoration: none;					
		}
		/* pantalla de menú de selección de secciones */
		#frmIndexMenuFlotante {	z-index: 1050; 
				border: 1px solid #1A2C5E; 
				margin-top: -756px; 
				margin-left: -256px; 
				top: 50%; 
				left: 50%; 
				padding: 2px;
				position: fixed; 
				width:  512px;			/* ancho de la ventana flotante */ 
				height: 256px;			/* alto  de la ventana flotante */
				background-color: #fff; 
				color: #000;
				border-radius: 4px;
				text-decoration: none;						
		}

        #setupSelection {
                height: 120px; 
                width: 100%; 
                position: relative; 
                top: -208px;                                                /* -208 para 1 o 2 3 o 4 botones   */
                text-align: center;
        }

         #windowClose{
                height: 120px; 
                width: 100%; 
                position: relative; 
                top: -256px; 
                text-align: right;"
        }


		/* pantalla de selección de formato de visualización */
		#frmViewFormatFlotante {	z-index: 999; 
				border: 1px solid #1A2C5E; 
				margin-top: -756px; 
				margin-left: -256px; 
				top: 50%; 
				left: 50%; 
				padding: 2px;
				position: fixed; 
				width:  512px;			/* ancho de la ventana flotante */  
				height: 256px;			/* alto  de la ventana flotante */
				background-color: #fff; 
				color: #000;
				border-radius: 4px;
				text-decoration: none;	
		}
		
        /* pantalla de selección de Setup */
		#frmSetupFlotante {	z-index: 999; 
				border: 1px solid #1A2C5E; 
				margin-top: -756px; 
				margin-left: -256px; 
				top: 50%; 
				left: 50%; 
				padding: 2px;
				position: fixed; 
				width:  512px;			/* ancho de la ventana flotante */  
				height: 256px;			/* alto  de la ventana flotante */
				background-color: #fff; 
				color: #000;
				border-radius: 4px;
				text-decoration: none;	
		}

		#frmStartBackgroundImage{
			margin-top:  2px;
			margin-left: 2px;
			width: 		 508px; 				/* porción de la imagen que se ve */
			height: 	 252px; 	
			background:  url("..//pictures/frmStartBackgroundLandscape.jpg");    			/* 0px, 0px;     */
		}
		
		#frmIndexMenuBackgroundImage{
			margin-top:  2px;
			margin-left: 2px;
			width: 		 508px; 				/* porción de la imagen que se ve */
			height: 	 252px; 
			background: url("..//pictures/frmIndexMenuBackgroundLandscape.jpg");  				/* 0px, 0px;      */
		}
		
		#frmViewFormatBackgroundImage{
			margin-top:  2px;
			margin-left: 2px;
			width: 		 508px; 				/* porción de la imagen que se ve */
			height: 	 252px; 
			background: url("..//pictures/frmViewFormatBackgroundLandscape.jpg");					/* 0px, 0px;     */
		}
		
		#frmSetupBackgroundImage{
			margin-top:  2px;
			margin-left: 2px;
			width: 		 508px; 				/* porción de la imagen que se ve */
			height: 	 252px; 
			background: url("..//pictures/frmSetupBackgroundLandscape.jpg");					/* 0px, 0px;     */
		}


        #viewFormatSeparator01{
			width: 30px;
		}
		
		#vrExperienceTitle{
			height: 	45px; 
			width: 		100%; 
			position: 	relative;  
			top: 		-240px; 
			text-align: center;
		}
		
		#projectTitlePicture{						/* JPG con el título  del proyecto */
			width:	 px;
			height:	px;
		}
		
		#formatSelection{
			/* margin-top:	50px;	*/
			height: 	32px; 
			width: 		100%; 
			text-align: center;
			position: 	relative;  
			top: -90px; 
			 
		}
		
		#languageSelection3{
			margin: 0 auto;
		}
		
		#languageSelection4{
			margin: 0 auto;				/* tiene que tener un ancho en px para poder centrar un div (languageSelection4) en otro (languageSelection3)  */
			width: 370px;
			
		}
		#languageSelection31{
			float: left; 
			
		}
		
		#languageSelection32{
			float: left; 
			
		}
		
		#languageSelection33{
			float: left; 
			
		}
		
		
		
	}
	
	
	
	#frmOrientationFlotante {	z-index: 995; 
				border: 1px solid #1A2C5E; 
				margin-top: -756px; 
				margin-left: -153px; 
				top: 50%; 
				left: 50%; 
				padding: 12px; 
				position: fixed; 
				width: 265px; 
				background-color: #fff; 
				color: #000;
				border-radius: 3px;
				text-decoration: none;					
	}
	
	
	
	
	.btn {border-radius: 5px;
		  padding: 5px -5px 5px 5px;
		  
		  margin-bottom: 2px;
		  height: 40px;
		  width: 100%;
		  float: left;
		  
		  color: #ffffff;
		  font-size: 15px;
		  text-decoration: none;
		  
		  background: #3498db;
		  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
		  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
		  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
		  background-image: -o-linear-gradient(top, #3498db, #2980b9);
		  background-image: linear-gradient(to bottom, #3498db, #2980b9);
		  -webkit-border-radius: 5;
		  -moz-border-radius: 5;
		}

	.btn:hover {
		  background: #3cb0fd;
		  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
		  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
		  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
		  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
		  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
		  text-decoration: none;
		}
	
	.btnCuadrado {border-radius: 5px;
		  padding: 5px -5px 5px 5px;
		  
		  margin-bottom: 2px;
		  margin-right: 5px;
		  height: 100px;
		  width: 100px;
		  float: left;
		  
		  color: #ffffff;
		  font-size: 15px;
		  text-decoration: none;
		  
		  background: #3498db;
		  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
		  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
		  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
		  background-image: -o-linear-gradient(top, #3498db, #2980b9);
		  background-image: linear-gradient(to bottom, #3498db, #2980b9);
		  -webkit-border-radius: 5;
		  -moz-border-radius: 5;
		}

	.btnCuadrado:hover {
		  background: #3cb0fd;
		  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
		  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
		  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
		  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
		  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
		  text-decoration: none;
		}
			
	a { 	text-decoration: none;
			
			font-size: 15px;
	} 
	
	#imgLanguages{
		margin: 0 auto;
		width: 386px;
	}
	
	#imgLang{
		float: left;
		padding-left: 15px;
		padding-right: 15px;
	}
	
	#imagenBoton {
		float: left;
		margin-top: 3px;
		margin-left: 3px;
		
	}
	
	#imagenFormat{
		background-color: red;
	}
	
	
	#textoBoton {
		float: left;
		padding-left: 15px;
		padding-top: 10px;
		color: #ffffff;
	}
	
	#tituloVentana {height: 30px; 
					
					font-size: 18px; 
					color: #000000; 
					text-align:left;
	}
	
	#webGLDiv {	position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index:10;
	}
	
	footer
	{
		width: 100%;
		bottom: 0;
		position:fixed;
		height: 50px;
		color: #ffffff;
		text-align: center;
		font-size: 18px;
	}
	
	
	.cssload-load {
		position:absolute;
		left:calc(50% - 29px);
		width:68px;
		height:68px;
}


	.cssload-block {
		position:relative;
		height:19px;
		width:19px;
		display:inline-block;
		background:rgb(255,215,0);
		transition:all 0.92s;
		-o-transition:all 0.92s;
		-ms-transition:all 0.92s;
		-webkit-transition:all 0.92s;
		-moz-transition:all 0.92s;
		animation: cssload-rot 5.75s linear infinite;
		-o-animation: cssload-rot 5.75s linear infinite;
		-ms-animation: cssload-rot 5.75s linear infinite;
		-webkit-animation: cssload-rot 5.75s linear infinite;
		-moz-animation: cssload-rot 5.75s linear infinite;
	}
	.cssload-block:nth-child(1) {
		animation-delay:3.45s;
		-o-animation-delay:3.45s;
		-ms-animation-delay:3.45s;
		-webkit-animation-delay:3.45s;
		-moz-animation-delay:3.45s;
	}
	.cssload-block:nth-child(2) {
		animation-delay:1.73s;
		-o-animation-delay:1.73s;
		-ms-animation-delay:1.73s;
		-webkit-animation-delay:1.73s;
		-moz-animation-delay:1.73s;
		animation: cssload-rot 13.8s linear infinite;
		-o-animation: cssload-rot 13.8s linear infinite;
		-ms-animation: cssload-rot 13.8s linear infinite;
		-webkit-animation: cssload-rot 13.8s linear infinite;
		-moz-animation: cssload-rot 13.8s linear infinite;
	}
	.cssload-block:nth-child(3) {
		animation-delay:2.3s;
		-o-animation-delay:2.3s;
		-ms-animation-delay:2.3s;
		-webkit-animation-delay:2.3s;
		-moz-animation-delay:2.3s;
	}
	.cssload-block:nth-child(4) {
		animation-delay:0.23s;
		-o-animation-delay:0.23s;
		-ms-animation-delay:0.23s;
		-webkit-animation-delay:0.23s;
		-moz-animation-delay:0.23s;
	}
	.cssload-block:nth-child(5) {
		animation-delay:4.6s;
		-o-animation-delay:4.6s;
		-ms-animation-delay:4.6s;
		-webkit-animation-delay:4.6s;
		-moz-animation-delay:4.6s;
	}
	.cssload-block:nth-child(6) {
		animation-delay:2.3s;
		-o-animation-delay:2.3s;
		-ms-animation-delay:2.3s;
		-webkit-animation-delay:2.3s;
		-moz-animation-delay:2.3s;
		animation: cssload-rot 8.05s linear infinite;
		-o-animation: cssload-rot 8.05s linear infinite;
		-ms-animation: cssload-rot 8.05s linear infinite;
		-webkit-animation: cssload-rot 8.05s linear infinite;
		-moz-animation: cssload-rot 8.05s linear infinite;
	}
	.cssload-block:nth-child(7) {
		animation-delay:0.46s;
		-o-animation-delay:0.46s;
		-ms-animation-delay:0.46s;
		-webkit-animation-delay:0.46s;
		-moz-animation-delay:0.46s;
	}
	.cssload-block:nth-child(8) {
		animation-delay:1.73s;
		-o-animation-delay:1.73s;
		-ms-animation-delay:1.73s;
		-webkit-animation-delay:1.73s;
		-moz-animation-delay:1.73s;
		animation: cssload-rot 6.9s linear infinite;
		-o-animation: cssload-rot 6.9s linear infinite;
		-ms-animation: cssload-rot 6.9s linear infinite;
		-webkit-animation: cssload-rot 6.9s linear infinite;
		-moz-animation: cssload-rot 6.9s linear infinite;
	}
	.cssload-block:nth-child(9) {
		animation-delay:28.75s;
		-o-animation-delay:28.75s;
		-ms-animation-delay:28.75s;
		-webkit-animation-delay:28.75s;
		-moz-animation-delay:28.75s;
		animation: cssload-rot 9.2s linear infinite;
		-o-animation: cssload-rot 9.2s linear infinite;
		-ms-animation: cssload-rot 9.2s linear infinite;
		-webkit-animation: cssload-rot 9.2s linear infinite;
		-moz-animation: cssload-rot 9.2s linear infinite;
	}


	@keyframes cssload-rot {
		0% 	{ transform:none;}
		20% { transform:rotateZ(-90deg) rotateY(180deg); }
		40% { background:rgb(210,105,30);
			  transform:none; }
		60% { background:rgb(255,255,255);	}
		80% { background:rgb(100,149,237);  }
		90% { transform:none;
			  background:rgb(34,34,34);		}
	}

	@-o-keyframes cssload-rot {
		0%  { -o-transform:none; 	}
		20% { -o-transform:rotateZ(-90deg) rotateY(180deg);  }
		40% { background:rgb(210,105,30);
			  -o-transform:none;  }
		60% { background:rgb(255,255,255);	}
		80% { background:rgb(100,149,237);	}
		90% { -o-transform:none;
			  background:rgb(34,34,34);		}
	}

	@-ms-keyframes cssload-rot {
		0%  { -ms-transform:none; 	}
		20% { -ms-transform:rotateZ(-90deg) rotateY(180deg); 	}
		40% { background:rgb(210,105,30);
			  -ms-transform:none;	}
		60% { background:rgb(255,255,255); 	}
		80% { background:rgb(100,149,237);  }
		90% { -ms-transform:none;
			  background:rgb(34,34,34); 	}
	}

	@-webkit-keyframes cssload-rot {
		0%  {	-webkit-transform:none;  }
		20% {	-webkit-transform:rotateZ(-90deg) rotateY(180deg);  }
		40% {	background:rgb(210,105,30);
				-webkit-transform:none;  }
		60% {	background:rgb(255,255,255);  }
		80% {	background:rgb(100,149,237);  }
		90% {	-webkit-transform:none;
				background:rgb(34,34,34);     }
	}

	@-moz-keyframes cssload-rot {
		0%  {	-moz-transform:none; }
		20% {	-moz-transform:rotateZ(-90deg) rotateY(180deg); 	}
		40% {	background:rgb(210,105,30);
				-moz-transform:none;	}
		60% {	background:rgb(255,255,255); }
		80% {	background:rgb(100,149,237); }
		90% {	-moz-transform:none;
				background:rgb(34,34,34);  }
    }
	
	

/* */
.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2000;
  margin: -75px 0 0 -75px;
  
  width: 150px;
  height: 150px;
  line-height: 150px;
  /*margin: 100px auto;*/

  box-sizing: border-box;
  text-align: center;
  z-index: 0;
  text-transform: uppercase;
  
  color: #ccc;
  font-family: sans-serif;
  font-size: 14px;
}






.loader:before,
.loader:after {
  opacity: 0;
  box-sizing: border-box;
  content: "\0020";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  border: 4px solid #fff;
  box-shadow: 0 0 50px #fff, inset 0 0 50px #fff;
  
  
}

.loader:after {
  z-index: 1;
  -webkit-animation: gogoloader 2s infinite 1s;
}

.loader:before {
  z-index: 2;
  -webkit-animation: gogoloader 2s infinite;
}

@-webkit-keyframes gogoloader {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 0;
  }
}