@charset "utf-8";
/* CSS Document */

body {background-color: #81d742;}

		#contenedor {border: 6px solid #A42527;
					overflow: hidden;
					width: 99.2%;
					max-width:1400px; 
					float:left;
					height:100%;}
		
		h1 {color:#ff0000; text-shadow:2px 4px 2px #fff; word-spacing:0.3em; letter-spacing:0.15em;}
		@font-face {font-family:mifuente; src:url(FetteMikado.ttf);}
		#div3 {font-family:mifuente;margin:-9% 0% 0% 12%; font-size:1.2em;}
		h2 {background-size:40em; font-size: 1.5em;}
		h3 {background-size: 60em; font-size: 1.17em;}
		h4 {font-size: 1.0em;}
			
		/* 	TITULO */
		
		.group { margin:1% 0% 0% 5%; width: 90%;min-width: 300px;float: left;position: relative;}
		.logo { width:100%; float: left; position: relative;}
		.divfecha {margin-left: 80%;}
	
		/* 	el link no queda subrayado 		*/
		a {text-decoration: none; font-size: 1.0em;}
		p a {text-decoration: none; font-size: 1.0em;}
		h2 a {text-decoration: none;font-size: 1.0em;}
		h3 a { text-decoration: none;font-size: 1.0em;}

		/* 	Color del link, sin haberlo visitado 		*/
		a:link {color:#EF1E93;} 
	 	/* 	Color del link después de visitarlo		*/
	 	a:visited {color:#f00000;}
	 	/* 	Al poner el puntero sobre el link, aparece el subrayado 		*/
	 	a:hover {text-decoration: underline; color: red;}
		
		/* Menu  Animado	 */	
		/* start el nav		 */

.divnav {width:53%; top:0px; left: 3%; display:inline-block ;position: relative; }
		
				
		/*	Barra del Menu    */
#menu {
	width: 100%;
	margin-top: 1%;
	padding: 12px 0 0 0;
	list-style: none;
	background: #ccddee;
	background: -webkit-gradient(linear,left bottom, left top, color-stop(0,#ccddee), color-stop(1,#2e2e7e));
	background: -webkit-linear-gradient(#2e2e7e, #ccddee);
	background: -moz-linear-gradient(#2e2e7e, #ccddee);
	background: -o-linear-gradient(#2e2e7e, #ccddee);
	background: -ms-linear-gradient(#2e2e7e, #ccddee);
	background: linear-gradient(#2e2e7e, #ccddee);
	-moz-border-radius: 40px;
	border-radius: 50px;
	-moz-box-shadow: 3px 5px 0px #9c9c9c;
	-webkit-box-shadow: 3px 5px 0px #9c9c9c;
	box-shadow: 3px 5px 0px #9c9c9c;}

#menu li {float:left; 
			padding:0 0 5px 0; 
			position:relative;}

#menu a {float:left; 
			height:30px; 
			padding:0 25px; 
			color:#fff000; 
			text-transform:uppercase; 
			font:bold 13px/25px Arial, Helvetica; 
			text-decoration:none; 
			text-shadow:0 2px 0 #000; }

#menu li:hover> a {color:#fafafa;}

html #menu li a:hover {/*IE6 */ color:#fafafa;}


#menu li:hover> ul {display: block;}

/*	submenu: */

#menu ul {list-style:none; 
			margin:0; 
			padding:0; 
			display:none; 
			position:absolute; 
			top:35px; left:0px;
			z-index:99999;
			
			background:#2e2e7e;  
			background:-webkit-gradient(linear, left bottom, left top, color-stop(0,#2e2e00), color-stop(1, #2e2e7e)); 
			background:-moz-linear-gradient(#2e2e7e, #2e2e00); 
			background:-webkit-linear-gradient(#2e2e7e, #2e2e00); 
			background:-o-linear-gradient(#2e2e7e, #2e2e00); 
			background:-ms-linear-gradient(#2e2e7e, #2e2e00); 
			background:linear-gradient(#2e2e7e, #2e2e00); 
			
			-moz-border-radius:10px; 
			border-radius:10px;}
			
#menu ul li {float:none; 
				margin:0px; 
				padding:0px; 
				display:block; 
				-moz-box-shadow:0 1px 0 #111111, 0 2px 0 #777777;
				-webkit-box-shadow:0 1px 0 #111111, 0 2px 0 #777777;
				box-shadow:0 1px 0 #111111, 0 2px #777777;}
			
#menu ul li:last-child {-moz-box-shadow:none; 
				-webkit-box-shadow:none; 
				box-shadow:none;}

#menu ul a {padding:10px; 
				height:auto; 
				line-height:1; 
				display:block; 
				white-space:nowrap; 
				float:none; 
				text-transform:none;}

html #menu ul a {/*IE6 */ height:10px; width:150px;}

*:first-child+html #menu ul a { /*IE7 */ height:10px; width:150px;}

#menu ul a:hover { background: #0186ba;
					background:-moz-linear-gradient(#04acec, #0186ba);
					background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
					
					background:-webkit-linear-gradient(#04acec, #0186ba);
					background:-o-linear-gradient(#04acec, #0186ba);
					background:-ms-linear-gradient(#04acec, #0186ba);
					background:linear-gradient(#04acec, #0186ba);}

#menu ul li:first-child a {
					-moz-border-radius:10px 10px 0 0; 
					-webkit-border-radius:10px 10px 0 0; 
					border-radius:10px 10px 0 0;}

#menu ul li:first-child a: after {
					content:""; position:absolute; left:30px; top:-8px; width:0; height:0; 
					border-left:5px solid transparent; border-right:5px solid transparent; 
					border-bottom:8px solid #2e2e7e;}

#menu ul li:first-child a:hover :after {border-bottom-color:#04acec;}

#menu ul li:last-child a {
					-moz-border-radius:0 0 10px 10px;
					-webkit-border-radius:0 0 10px 10px;
					border-radius:0 0 10px 10px;}
					
#menu:after {visibility:hidden; display:block; font-size:0; content:""; clear:both; height:0;}

html #menu {zoom:1; } /*IE6 */
*:first-child+html #menu {zoom: 1;} /* IE7 */


		/*	logo animado 	*/
		#div4 {
			width: 120px;
			height: 120px;
			padding: 10px;
			position: relative;
			animation-name: teanimo;
			animation-duration: 20s;
			animation-timing-function: linear;
			animation-delay: 2s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
			animation-play-state: running;
		/*	Firefox	*/
			-moz-animation-name: teanimo;
			-moz-animation-duration: 20s;
			-moz-animation-timing-function: linear;
			-moz-animation-delay: 2s;
			-moz-animation-iteration-count: infinite;
			-moz-animation-direction: alternate;
			-moz-animation-play-state: running;
		/*	Chrome	*/
			-webkit-animation-name: teanimo;
			-webkit-animation-duration: 20s;
			-webkit-animation-timing-function: linear;
			-webkit-animation-delay: 2s;
			-webkit-animation-iteration-count: infinite;
			-webkit-animation-direction: alternate;
			-webkit-animation-play-state: running;
		/*	Opera	*/
			-o-animation-name: teanimo;
			-o-animation-duration: 20s;
			-o-animation-timing-function: linear;
			-o-animation-delay: 2s;
			-o-animation-iteration-count: infinite;
			-o-animation-direction: alternate;
			-o-animation-play-state: running;}
	 	
		@keyframes teanimo {
			0% {background:red; left:8%; top:0%;}
			25% { background:green; left:35%; top:0%;}
			50% {background:blue; left:70%; top: 0%;}
			75% {background:yellow; left:35%; top: 0%;}
			100% {background:red; left:8%; top:0%;}	}
	
		@-moz-keyframes teanimo /*	firefox 	*/ {
			0% {background:red; left:8%; top:0%;}
			25% { background:green; left:35%; top:0%;}
			50% {background:blue; left:70%; top: 0%;}
			75% {background:yellow; left:35%; top: 0%;}
			100% {background:red; left:8%; top:0%;} }
	
		@-webkit-keyframes teanimo /*	Chrome */	{
			0% {background:red; left:8%; top:0%;}
			25% { background:green; left:35%; top:0%;}
			50% {background:blue; left:70%; top: 0%;}
			75% {background:yellow; left:35%; top: 0%;}
			100% {background:red; left:8%; top:0%;} }
	 	 
		@-o-keyframes teanimo /*	Opera */	{
			0% {background:red; left:8%; top:0%;}
			25% { background:green; left:35%; top:0%;}
			50% {background:blue; left:70%; top: 0%;}
			75% {background:yellow; left:35%; top: 0%;}
			100% {background:red; left:8%; top:0%;}	}
	
	
		/*	Tarjeta de visita	*/
		.div1 {
			border: 3px solid red;
			background-color:#C6F0F0; 
			background-image: url("../img/200424-11a web72ppp 400x555.jpg");
			background-size: 7.0em 9.0em;
			background-position: 96% 11%;
			background-repeat: no-repeat;
			padding-top: 20px;
			padding-bottom: 0px;
			padding-right: 0px;
			width: 37%;
			min-width: 450px;
			float: right;
			margin-right:1%;
			word-wrap: break-word; 
			margin-top:-22.0%;}
			
			@media only screen and (max-width:481px) {.div1{width:100%;max-width:100%;}}
			/*	la media se ha hecho para que el 481px se vea en tablet como mínimo	*/
			
		#div2 {background-origin: border-box;
			text-indent: 1.0em;}

		.tarjelogo {margin-top: -0.4em;}
		.tarjetitulo1 {margin:-7% 0% 10% 0%;}
		.tarjetitulo {margin:-11% 0% 0% 19%; line-height: 0em;}
		.tarjelogo, .tarjetitulo { float:left; position:relative;}
				
		.div0 {word-spacing: 9.4em;}
		.div00 {word-spacing: 8.6em;}
		.div {word-spacing:0.1em; margin-left: 12.8em;}
		.divweb {}
		.divweb, .div {float:left; position: relative;}
		

		/*	FIN - Tarjeta de visita	*/
		
		
		/**************************************************************************************
		**************************************************************************************/
		
			
			  
			/***************************************	
			SECTION: (Principal, Holder) y ASIDE. 
		 	****************************************/
		 		 
			section#section {margin:0.1em auto;
				padding: 0px 2px 0px 10px;}
				
			section#principal, aside { 
				border-radius:0.5em; 
				display:inline-block; 
				margin:0.2em auto; 
				min-height: 130px;
				padding:0.4em; 
				vertical-align:top; 
				width: 75%;
				min-width:350px;}
				
			section#principal {margin-top:3px; background-color: #d2d666; padding-top:15px;}
			
			/********************************	
				SLIDES del INDEX y PROYECTO
		 	*********************************/
			
			.rslides { 
			  position: relative;
			  list-style: none;
			  overflow: hidden;
			  width: 100%;
			  padding: 0;
			  margin: auto;
			  margin:100; }

			.rslides li {
			  -webkit-backface-visibility: hidden;
			  position: absolute;
			  display: none;
			  width: 99%;
			  left: 0;
			  top: 0; }

			.rslides li:first-child {
			  position: relative;
			  display: block;
			  float: left; }

			.rslides img {
			  display: block;
			  height: auto;
			  float: left;
			  width: 100%;
			  border: 3px solid blue; }
			  			
			/******************************* 	
			PRINCIPAL: Descripción Slides
		 	*******************************/
			.div0000 { font-size:1.5em;}
			.div41 {
				border: 2px solid #ff0000;
				background-color: #dfdfdf;
				border-radius: 0.5em;
				width: 70%; 
				margin-top:25px;
				margin-left: 14%;
				text-align: left;
				padding-top: 10px;
				padding-right: 10px;
				padding-left: 10px;
				padding-bottom: 10px;}
			

			/********************************************	
			HOLDER. estas condiciones son para los vídeos de 
					"Empresa" y "Videos". En el caso de cambiar 
					en la "Empresa" las características del video, 
					he de cambiar el número del grupo aquí y 
					en el codigo fuente.
		 	********************************************/
			
			.holder_content {
				position: relative;
				float: left;
				width: 100%; text-align:center;
				margin-top:-15px;
				margin-bottom:16px;
				margin-left:-0px; background-image: url(../img/articles/bg1.png);
				background-position: center bottom;
				background-repeat:no-repeat;}
	
			.holder_content_separator{margin-bottom:19px;}
			
			a.photo_hover3{
				position:relative;
				float: left;
				margin:5px 13px 8px 0;
				padding: 8px;
				-moz-border-radius: 5px;
				border-radius: 5px;
				moz-box-shadow: 2px 2px #D7D7D7;
				webkit-box-shadow: 2px 2px #D7D7D7;}
	
			a.photo_hover3{background:#E9EAEB; border: 1px solid #E1E1E1;}
	
			a.photo_hover3:hover {
				border: 1px solid #E1E1E1;
				background-color:white;
				opacity:0.5;}
				
			.group1 {
				float: left;
				width: 200px;
				position: relative;
				background:transparent;
				padding:15px;
				margin-bottom:10px;	}
				
			.group2 {
				float: left;
				width: 200px;
				position: relative;
				background:transparent;
				padding:15px;
				margin-bottom:10px;}
	
			.group3 {
				float: left;
				width: 200px;
				position: relative;
				background:transparent;
				padding:15px;
				margin-bottom:10px;}

			.group4 {
				float: left;
				width: 200px;
				position: relative;
				background:transparent;
				padding:15px;
				margin-bottom:10px;}

			.button {
				width: 90px;
				height:20px;
				position:relative;
				margin-top:12px;
				padding:9px; left: 50px;
				background:#E9EAEB;
				display: inline-block;
				color:#FF9966;
				font-weight:bold;
				cursor: pointer;
				text-align: center;
   				font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
				float:left;
				text-decoration:none;
				moz-box-shadow: 2px 2px #D7D7D7;
				webkit-box-shadow: 2px 2px #D7D7D7;}
	
			.button:hover {text-decoration:underline;}
			
			/***************	
			FIN  --  Holder 
		 	****************/	
			/***************	
			INFLUENCIA 
		 	****************/		
		
			.holder_content2 {
				position: relative;
				float: left;
				width: 100%;
				margin-top:-42px;
				margin-bottom:20px;
				background-image: url(../img/articles/bg1.png);
				background-position: center bottom ;
				background-repeat:no-repeat;}
		 
		 	.group5 {
				float: left;
				width: 96%;
				position: relative;
				padding:15px;
				background:transparent;
				margin-top:16px;}
		 
		 	/***********************	
				FIN  --  INFLUENCIA 
		 	************************/
		
		/**************************************************************************************
		**************************************************************************************/
		
		 
			/***********	
				ASIDE 
		 	************/
			
			aside {width:22%; min-width:250px; background-color: #ffddff;}
			.clasificacion {margin-left: 0.1%;padding-left: 0%;}
		
			/******************	
				FIN  --  ASIDE 
		 	*******************/
		
			/******************	
				FOOTER 
		 	*******************/
			
		footer {background: #dedede;
			border-radius: 0.5em;
			max-width: 980px;
			min-height: 80px;
			margin-top: 0px;
			margin-right: 5%;
			margin-left: 10%;
			margin-bottom: 0px;
			padding: 1px 0px 1px 0px;
			line-height:6px;
			background-image: url(../img/logofooter%2050x50%2072ppp.png); 
			background-repeat: no-repeat; background-position: 5% 15px;}
		
			.cyc {margin:2% 50% 0% 0%;}
			.autor {margin:-4.5% 27% 0% 0%;}
			.cyc, .autor { float:right; position:relative; min-width:40px;}
						
		/*********************	
			Fin  --  Footer	
		**********************/
	
		/**************************************************************************************
		**************************************************************************************/
	
	
		/*******************************	
			FORMULARIO PARA EL CONTACTO 
		********************************/
		 
		 /*************	Texto ***************/
		 
		 .div12 { border: 2px solid #f0f; background-color:#dfdfdf; border-radius:0.5em; width:60%; 
		 margin-left:20%;}
		 
		 /*************	fin Texto ***************/
		 
		 /*************	propio formulario ***************/
		 
		#div11 				{line-height: 1;}
		ol, ul 					{list-style: none;}
		blockquote 				{quotes: none;}
		blockquote:before, blockquote:after {content: '';content: none;}
		del 					{text-decoration: line-through;}
	
		/* tables still need 'cellspacing="0"' in the markup */
		
		table 					{border-collapse: collapse;	border-spacing: 0;}
		a img 					{border: none;}
		img.tutImg				{border: 2px solid #D8D8D8;}
		#div11					{padding:30px 0px 60px 30px;font-family:Arial, Helvetica, sans-serif;}
		#div11                  {border:5px solid #e1f;background:#6e6e6e; margin:-70px 100px 50px 10%;}
		
		@media only screen and (max-width:481px) {#div11{width:100%;max-width:100%;}}
			/*	la media se ha hecho para que el 481px se vea en tablet como mínimo	*/
		
		.css3Form,.css3Form input, .css3Form textarea {font-family:Georgia, "Times New Roman", Times, serif;
								font-style:italic;}
		.css3Form h1 {font-size:32px;
						color:#2b2b2b;
						text-shadow: 1px 1px 0 #9d9d9d;	}
		.css3Form ul {overflow:hidden;}
		.css3Form ul li{margin:10px 0;
						-moz-box-shadow: 1px 1px 0 0 #949494;
						-webkit-box-shadow: 1px 1px 0 0 #949494;
						box-shadow: 1px 1px 0 0 #949494;
						-moz-border-radius: 18px 18px;
						-webkit-border-radius: 18px 18px;	
						border-radius: 18px 18px;
						float:left;
						clear:both; text-align:left}
		.css3Form input, .css3Form textarea {margin:0;
						width:300px;
						padding: 8px 10px;
						font-size:16px;
						color:#b3b3b3;
						border:solid 1px #585858;
						text-shadow: 1px 1px 0 #4b4b4b;	
						-moz-border-radius: 18px 18px;
						-webkit-border-radius: 18px 18px;
						border-radius: 18px 18px;		
						-moz-box-shadow: inset 1px 1px 3px 0 #000;
						-webkit-box-shadow: inset 1px 1px 3px 0 #000;
						box-shadow: inset 1px 1px 3px 0 #000;
						background:-moz-linear-gradient(0% 100% 90deg,#7e7e7e, #5e5e5e);
						background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#5e5e5e), to(#7e7e7e));}
		.css3Form .button {	width:150px;
						border:solid 1px #ff0000;
						color:#363636;
						font-weight:bold;
						font-size:20px;
						padding-bottom:30px;
						margin-left:-40px;
						border-bottom-color:#363636;
						background:-moz-linear-gradient(0% 100% 90deg,#5f5f5f, #9e9e9e);
						background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#9e9e9e), to(#5f5f5f));	
						-moz-box-shadow: none;
						-webkit-box-shadow: none;
						box-shadow: none;
						text-shadow: 1px 1px 0 #9d9d9d;	}
	
			/****************************************	
				fin del FORMULARIO para el CONTACTO 
			*****************************************/
	
		/**************************************************************************************
		**************************************************************************************/
	
	
		/************************************************	
			VIDEOS ----   dentro EXPERIENCIA (vídeos) 
		*************************************************/
			
		/*********************************************************************************************	
			TEXTO CRONOLOGÍA de los vídeos. Y el div22 para una parte del texto de Mercado y proyecto
		**********************************************************************************************/
		
		.div21 { border: 2px solid #ff0000; background-color:#dfdfdf; border-radius:0.5em; width:90%; margin-left:4%; }
		.div22 {color:#0000ff;}
		
		 /*****************************************************************	
			VIDEOS -----  Las características son 
			del holder_content, el photo_hover3 y el button del interfaz original,
			para todos los vídeos.
		 ******************************************************************/
				
			.group1, .group2, .group3, .group4, .group5a, .group6, .group7, .group8, .group9, 
			.group10, .group11, .group12, .group13, .group14, .group15, .group16
			 { 
				float: left;
				width: 200px;
				position: relative;
				background:transparent;
				padding:15px;
				margin-bottom:10px;	}
		
		
		 /************************************************************************
		 			VIDEOS 5-8. Recordar que pongo el clear en el grupo5a
					para que salga a la izda. en pantalla. 	 
		 *************************************************************************/
		 		
			.group5a {clear:left;}

		 /************************************************************************ 	 
		 		FIN  VIDEOS 5-8
		 *************************************************************************/
		/************************************************************************
		 			VIDEOS 9-12 	Recordar que pongo el clear en el grupo9
					para que salga a la izda. en pantalla.   
		 *************************************************************************/
		 	.group9 {clear:left;}
				
		/*************************** 	 
		 		FIN  VIDEOS 9-12
		 ***************************/
		/*************************************************************************
					VIDEOS 13-16 	Recordar que pongo el clear en el grupo13
					para que salga a la izda. en pantalla.  
					Al group14,15 y 16 le faltan el código fuente en el video.
	    *************************************************************************/
			.group13 {clear: left}

		/***************************
				FIN VIDEOS 13-16
		 ***************************/

		/******************************************************	
			fin de VIDEOS ----   dentro EXPERIENCIA (vídeos) 
		*******************************************************/	
		
		/**************************************************************************************
		**************************************************************************************/
		
		/**************************************************	
			MERCADO, ESTUDIO y EMPRESA. Van dos columnas: 
		 **************************************************/
		 
		.holder_content3 {
				text-align:center;
				background-image: url(../img/articles/bg1.png);
				background-position: bottom;
				background-repeat:no-repeat;}
		
		#Cizq {	width: 88%;
				margin: 3% auto;
				background-color: #d2d666;
				overflow: auto;}
		
		#Cder {	width: 50%;
				float: right;
				background-color: #d2d666;
				border-left: solid 2% #d2d544;}
		
		.div31 {position: relative; margin-left:-100%;}
		
		.div32, .div31 {border: 2px solid #ff0000; background-color: #DFDFdf; border-radius: 0.5em;	
						width: 90%;	min-width: 110px; float:left; position: relative; padding-top: 1%; padding-right: 3%;	
						padding-left: 3%; padding-bottom: 0%; text-align: left;}

		.div33 {color: #991111;}

		/***************************************	
			FIN de MERCADO, ESTUDIO y EMPRESA. 
		 ***************************************/
		 
		/**************************************************************************************
		**************************************************************************************/
		
		/******************************************************************************	
			ELEMENTOS de ILUMINARIAS e INSTALACIÓN. Tomo el holder-content3 y el div41 
		 ******************************************************************************/

		.group41  {
				display: inline-block; 
				width: 400px;
				position: relative;
				background:transparent; margin-left:-0%;
				padding:15px;}

		.button41 {
				width: 90px;
				height: 20px;
				position: relative;
				margin-top: 15px;
				left: 150px;
				padding: 9px;
				background: #E9EAEB;
				display: inline-block;
				color: #FF9966;
				font-weight: bold;
				cursor: pointer;
				text-align: center;
				font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
				float: left;
				text-decoration: none;
				moz-box-shadow: 2px 2px #D7D7D7;
				webkit-box-shadow: 2px 2px #D7D7D7;}
	
			.button41:hover {text-decoration:underline;}
			
		/*********************************************************	
			FIN de ELEMENTOS de ILUMINARIAS E INSTALACION. 
		 *********************************************************/

		/**************************************************************************************
		**************************************************************************************/
		
		/**************************************	
			Texto de los SLIDES del PROYECTO 
		 **************************************/

		.div51 { border: 2px solid #ff0000; background-color:#dfdfdf; border-radius:0.5em; width:70%; 
		margin-left:12.5%; min-width:200px ;text-align: left; padding: 10px 10px 10px 10px;}

		/******************************************	
			FIN Texto de los SLIDES del PROYECTO 
		 ******************************************/
		
		
		/**************************************************************************************
		**************************************************************************************/
		
		/**********************************************************	
			En Aspecto Legal y Localización: 
			Utilizo el div22 y el holder-content3. 
		 **********************************************************/
		
		/**************************************************************************************
		**************************************************************************************/
		
		/**************************************************************************************
		**************************************************************************************/