* {
  margin: 0 0;
  padding: 0;
}

body {
	color: #333;
	-webkit-font-smoothing: antialiased;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	margin: 0 auto;
	max-width: 960px;
	_width: 960px;
}

.nofondo {
	background-image: none;
}

form p {
	line-height: 300%;
}
form label {
	display: inline-block;
	width: 20%;
	text-align: right;
}
form input, form textarea {
	width: 75%;
}
form input:focus , form textarea:focus {
	background-color: #eee;
}
form .botonesformulario input {
	width: 10em;
/*	display: inline-block;*/
	float: right;
}

h1, h2, h3 {
	margin-top: 1em;
	margin-bottom: 0.4em;
}

h1 {
    text-align: center;
	font-size: 280%;
	text-shadow: 3px 3px 5px #CCC;
}

h1 + p, h1 + p + p {
	text-align: center;
	font-size: 220%;
	color: #00b2c0;
	text-shadow: 1px 1px 2px #CCC;
	margin-bottom: 0.4em;
}


h2 {
	text-shadow: 1px 1px 3px white;
}

.explicacion h3 {
	clear: left;
}

img {
	border: none;
}

.max100 {
	width: 100%;
	height: auto;
}
.maximo100 {
	max-width: 100%;
	height: auto;
}

a {
	color: #666;
/*	text-decoration: none;*/
}
a:hover {
	color: black;
	background-color: #00b2c0;
	transition: background-color 0.8s; /*PROBLEMA: color de fondo en imágenes enlazadas*/
	-moz-transition: background-color 0.8s ease-out;
	-o-transition: background-color 0.8s ease-out;
	-webkit-transition: background-color 0.8s ease-out;
	-ms-transition: background-color 0.8s ease-out;
	border-radius: 5px;
}
.quitafloat {
	clear: both;
}
#cabecera {
	position: relative;
}
#cabecera #logo {
	border-style: none;
	margin-top: 10px;
	margin-left: 5px;
	margin-right: 0.3em;
	float: left;
}
#cabecera a:hover {   /*sólo funciona aplicando al a, no al img*/
	background-color: transparent;
}
#cabecera #dwg {
/*	position: relative;
	top: -75px;*/
}

#cabecera #menusecundario {
/*	position: relative;
	top: -75px;
	left: 115px;*/
	/*max-width: 350px;*/
	margin-top: 1.2em;
}

#cabecera #menusecundario a {
	text-decoration: none;
	background-repeat: no-repeat;
	display: inline-block;
	padding: 0 3px 0 28px;
	height: 23px;
}

#cabecera #menusecundario a:hover {
	color: black;
	background-color: #00b2c0;
	border-radius: 5px;
}

#cabecera h2 {
	font-weight: bold;
	font-variant: small-caps;
	font-size: 1.6em;
	text-shadow: 1px 1px 1px #ccc;
/*	position: relative;
	left: 115px;
	top: -97px;*/
/*	max-width: 400px;*/ /*para que no cause scroll horiz*/
	margin-top: 0.2em;
}

.modulo {
	width: 30%;
	min-height: 355px;
	padding: 0.5%;
	margin-right: 2%;
	margin-bottom: 15px;
	border: solid #ccc;
	border-radius: 12px;
	box-shadow: 5px 5px 5px #CCC;
	float: left;
	text-align: center;
	/*outline: solid #00F thin*/;  /*DEBUG*/
	transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-webkit-transition: all 1s ease;
	-ms-transition: all 1s ease;
}

.modulo:nth-of-type(3n+1), .modulo:last-child {
	/*background-color: red;*/ /*DEBUG*/
	margin-right: 0%;
}

.modulo:hover {
	background-color: #eee;
	border-color: #aaa;
	box-shadow: 5px 5px 8px #00b2c0;
	z-index: 100;
	transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-ms-transform: scale(1.2);
}

.modulo:hover h2{
	background-color: #00b2c0;
	border-radius: 10px;
}

.modulo h2 a {
	text-decoration: none;
	color: #333;
}

.modulo a:hover {
	background-color: transparent; /*quitar color de fondo en hover de imágenes enlazadas*/
}

.modulo p a:hover {
	background-color: #00b2c0;
}

.modulo img {
	width: 80%;
	height: auto;
	margin-top: 0.7em;
	margin-bottom: 0.7em;
}

.explicacion {
	float: left;
	padding: 1%;
	width: 25%;
}

.explicacion p {
	text-indent: 1em;
	margin-top: 0.7em;
	line-height: 160%;
}

.ejemplos > p {
	text-indent: 1em;
	margin-top: 0.7em;
	margin-bottom: 0.7em;
}
.ofertasportada {
	text-align: center;
}
.ofertasportada li {
	list-style-image: url(../imagenes/logo-bola.png);
	list-style-position: inside;
	line-height: 45px;
}
/*.ofertasportada li a {
	padding-bottom: 10px;
}*/
.explicacion, .ejemplos {
	text-align: left;
}

.explicacion h2, .ejemplos h2, .ofertasportada h2 {
	background-color: #00b2c0;
	border-radius: 10px;
	padding: 5px 10px;
}

.explicacion ul {
	padding-left: 2em;
}

.ejemplos {
	float: right;
	padding: 1%;
	width: 70%;
/*	background-position: bottom right;
	background-repeat: no-repeat;*/
	/*background-color: #CC6;*/ /*BORRAR*/
}


.ejemploindividual {
	width: 44%;
	float: left;
	padding: 10px;
	margin-left: 0.5%;
	margin-right: 1.5%;
	min-height: 260px;
	margin-bottom: 10px;
	border: solid 1px #ccc;
	border-radius: 10px;
	box-shadow: 5px 5px 5px #CCC;
	/*background-color: #6FF;*/ /*BORRAR*/
	transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-webkit-transition: all 1s ease;
	-ms-transition: all 1s ease;
}

.ejemploindividual:nth-of-type(2n) {
	margin-right: 0; /*quitar margen a los de la derecha*/
}

.ejemploindividual:hover {
	background-color: #eee;
	border-color: #aaa;
	box-shadow: 5px 5px 8px #00b2c0;
	transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-ms-transform: scale(1.2);
	z-index: 100;
}


.ejemploindividual p+p a {
background-image: url(../imagenes/iconos/icono-ventana-nueva.png);
background-repeat: no-repeat;
background-position: bottom left;
padding-left: 22px;
}

.ejemploindividual p+p a[href$='.jpg'],
.ejemploindividual p+p a[href$='.png'],
.ejemploindividual p+p a[href$='.gif'] {
background-image: url(../imagenes/iconos/icono-camara-fotos.png);
padding-left: 25px;
}

.ejemplos img {
/*	clear: both;*/
	float: left;
	margin-right: 1em;
	border: none;
}

.ejemplos ol {
	margin-left: 2em;
}
.ejemplos ol li {
	list-style: disc;
}
#contenido .descripcion {
	text-align: justify;
}

.ejemplos .ejemploindividual h2 {
	margin-bottom: 0.4em;
	margin-top: 0.2em;
}

.ejemploindividual:hover h2{
	background-color: #00b2c0;
	border-radius: 10px;
	padding-left: 10px;
}

/*.ejemplos .ejemploindividual p {
	margin-right: 1em;
}*/

.menuseccion {
	font-size: 140%;
	list-style-type: none;
	padding: 0px;
	margin: 0 0 0 30px;
	background-position: bottom right;
	background-repeat: no-repeat;
}
.menuseccion li {
	background-image: url(../imagenes/logo-bola.png);
	background-repeat: no-repeat;
	padding-left: 15px;
	margin-bottom: 0.7em;
}

.menuseccion a {
	color: black;
	text-decoration: none;
	padding: 4px 10px 4px 13px;
}

.menuseccion a:hover {
	background-color: #00b2c0;
	border-radius: 10px;
}

#contenido h1 {
	margin-top: 22px;
}


#pie {
	width: 98%;
	margin-top: 15px;
	margin-left: 1%;
	border-top: dotted 1px #fff;
	min-height: 285px;
	border-radius: 20px 20px 0 0;
/*	box-shadow: 0px -5px 5px #00b2c0;*/
	background-image: url(../imagenes/fondos/fondo-pie-960b.jpg);
	background-repeat: no-repeat;
}

.columnapie {
	width: 24%;
	float: left;
	padding: 10px;
	margin-right: 0.5%;
	text-align: left;
	font-size: 80%;
/*	border-right: dotted 1px #fff;*/
}

.columnapieultima {
	border-right: none;
	margin-right: 0;
	text-align: right;
	width: 15%;
}

.columnapieultima a:hover {
	background-color: transparent;
}

.columnapie li {
	margin-left: 1em;
	list-style: square;
	padding: 1px 0px;
}

.columnapie li a {
	text-decoration: none;
}

.letragrande {
	font-size: 300%;
}
.letramedia {
	font-size: 200%;
}
.letramini {
	font-size: 70%;
}
.letrablanca, .colorblanco {
	color: white;
}


#fija-arriba-derecha a {
	color: #333;
	text-decoration: none;
	padding: 0 3px 0 34px;
	background-repeat: no-repeat;
	display: inline-block;
	height: 29px;
}

#fadcontacto2 {
	padding-left: 34px;
	background-repeat: no-repeat;
	background-image: url(../imagenes/iconos/icono-contacto.gif);
}

#fija-arriba-derecha #fadcontacto, #menusecundario #mscontacto {
	background-image: url(../imagenes/iconos/icono-contacto.gif);
}
#fija-arriba-derecha #fadquienessomos, #menusecundario #msquienessomos {
	background-image: url(../imagenes/iconos/icono-quienessomos.gif);
}
#fija-arriba-derecha #fadportfolio, #menusecundario #msportfolio {
	background-image: url(../imagenes/iconos/icono-portfolio.gif);
}
#fija-arriba-derecha #fadblog, #menusecundario #msblog {
	background-image: url(../imagenes/iconos/icono-blog.gif);
}
#fija-arriba-derecha #fadfacebook, #menusecundario #msfacebook {
	background-image: url(../imagenes/iconos/icono-facebook.gif);
}
#fija-arriba-derecha #faddescargas {
	background-image: url(../imagenes/iconos/icono-descargas.gif);
}
#fija-arriba-derecha #fadofertas {
	background-image: url(../imagenes/iconos/icono-ofertas.gif);
}
#menusecundario #msfacebook, #menusecundario #mstamanofuentemas, #menusecundario #mstamanofuentemenos {
	padding-left: 15px;
}
#menusecundario #mstamanofuentemas {
	background-image: url(../imagenes/iconos/icono-tamanofuente-mas.gif)
}
#menusecundario #mstamanofuentemenos {
	background-image: url(../imagenes/iconos/icono-tamanofuente-menos.gif)
}


#fija-arriba-derecha {
	position: fixed;
	top: -208px;
	right: 0px;
	/*width: 100px;*/
	height: 225px;
	padding: 4px 7px;
	background-color: rgba(192,192,192,0.85);
	border: solid gray thin;
	border-radius: 0px 0px 20px 20px;
	box-shadow: 0px 0px 5px #00b2c0;
	font-size: 80%;
	-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	-ms-transition: all 0.4s ease;
	z-index: 150;
}

#fija-arriba-derecha #solapa {
	text-align: center;
	padding-top: 2px;
	border-top: thin dotted gray;
}

#fija-arriba-derecha:hover /*#deslizable*/ {
	top: 0px;
	transition: all 0.9s ease;
	-moz-transition: all 0.9s ease;
	-webkit-transition: all 0.9s ease;
	-o-transition: all 0.9s ease;
	-ms-transition: all 0.9s ease;
}


#salva-fija-abajo {
	height: 30px;
	width: 80%;
}
	
#fija-abajo {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	position: fixed;
	bottom: 0px;
	padding: 0 1em;
	min-height: 25px;
	width: 96%;
	max-width: 937px;
	border-radius: 10px 10px 0 0;
	box-shadow: 0px 0px 5px black;
	background-color: #00b2c0;
	text-align: center;
	z-index: 120;
	color: white;
}

#fija-abajo form input {
	width: 6em;
}

#fija-abajo form .botonesformulario {
	font-weight: bold;
	text-shadow: 1px 1px 0px white;
}

#fija-abajo form .botonesformulario:hover {
	text-shadow: 1px 1px 0px black;
	color: #00b2c0;
	/*background-color: #00b2c0;*/
}

#fija-abajo form label {
	width: auto;
}

#fija-abajo a {
	color: #9FF;
}

#contenido .servicios-index {
	background-image: url(../imagenes/cliente-satisfecho.jpg);
	background-repeat: no-repeat;
	background-position: top right;
	padding-right: 300px; /*para la foto*/
	padding-bottom: 1em;
}


.servicios-index h2 {
	margin-top: 1.5em;
	margin-bottom: 1em;
	font-size: 220%;
}

#contenido .parrafos-index {
	padding-left: 60px; /*para los iconos*/
	background-image: url(../imagenes/iconos/iconos-inicio.jpg);
	background-repeat: no-repeat;
	background-position: top left;
}

#contenido .parrafos-index p {
	margin-bottom: 1em;
	text-indent: 1.6em;
}


.ejemplos ul {
	margin-left: 50px;
	margin-top: 18px;
	list-style-type: none;
}

.ejemplos ul li {
	padding-left: 30px;
	background-image: url(../imagenes/logo-bola.png);
	background-repeat: no-repeat;
	min-height: 35px;
}


.listanormal ul {
	margin-left: 1.5em;
}

.listanormal h3 {
	margin-top: 2em;
}


#carousel {
	margin-left: auto;
	margin-top:	auto;
/*	list-style-type: none;*/
}

#carousel li {
	padding-left: inherit;
	background-image: none;
/*	background-repeat: no-repeat;*/
	min-height:	inherit;
}

dt {
	color: #00b2c0;
	font-style: italic;
	font-weight: bold;
	margin-top: 9px;
	margin-bottom: 3px;
}

dd {
	margin-left: 2em;
}

.banner-aleatorio {
	width: 100%;
	height: auto;
	margin-top: 7px;
}




/*ESTILOS DEL MENÚ DESPLEGABLE*/

#menubarra {
	position: relative;
	margin-top: 1em;
	margin-left: 0.5%;
	margin-right: 0.5%;
}

#menu {
	padding: 0;
	font-weight: bold;
}

#menu li {
text-align: center;
list-style: none;
height: 28px;
min-width: 140px;/*(homogeneizar tamaños)*/
margin-bottom: 3px;
border-radius: 10px;
}

#menu > li {
position: relative; /*el submenú deslizará debajo del menú principal*/
float: left;
margin-right: 7px;
text-shadow: 1px 1px 1px black;
}
#menu > li:last-child {
margin-right: 0; /*el último no tiene margen derecho*/
}

#menu ul {
position: absolute;
margin: 0px;
padding: 0px;
font-size: 80%;
border: solid #666 thin; /*antes dashed*/
box-shadow: 5px 5px 3px #CCC;
}

#menu ul li a:hover {
text-shadow: none;
}

#menu a:hover {
	transition: none;
	-moz-transition: none;
	-o-transition: none;
	-webkit-transition: none;
	-ms-transition: none;
}

#menu li a {
text-decoration: none;
display: block;
padding: 3px 5px;
color: #333;
}

#menu > li > a {
padding-top: 4px;
color: white;  /*ççç*/
}

#menu li a:hover {
color: #fff;
background-color: #00b2c0;
border-radius: 10px;
}

#menu > li > a:hover {
/*background-color: transparent;*/  /*quitar fondo rollover a menús principales*/
text-shadow: 1px 1px 1px black;
}

#menu li:hover > ul {
display: block;
overflow: hidden;
background-color: #ccc;
border-radius: 10px;
}

#menu li > ul {
display: none;
z-index: 30;
padding-top: 3px;
padding-bottom: 3px;
}


/*ANIMACIÓN MENÚ*/

#menu > li {
	transform-origin: center top;
	-moz-transform-origin: center top;
	-webkit-transform-origin: center top;
	-o-transform-origin: center top;
	-ms-transform-origin: center top;
}

#menu > li:first-child:hover { /*para que se vea completo al ampliar la escala*/
	transform-origin: left top;
	-moz-transform-origin: left top;
	-webkit-transform-origin: left top;
	-o-transform-origin: left top;
	-ms-transform-origin: left top;
}

#menu > li:hover {
	text-shadow: 1px 1px 1px #fff;
	background-color: #00b2c0;
	border-radius: 20px;
	z-index: 1000;
}

#menu > li:hover li {
	position: relative;
	animation: deslizar 0.8s ease 0s 1 alternate both;
	-moz-animation: deslizar  0.8s ease 0s 1 alternate both;
	-webkit-animation: deslizar 0.8s ease 0s 1 alternate both;
	-o-animation: deslizar 0.8s ease 0s 1 alternate both;
	-ms-animation: deslizar 0.8s ease 0s 1 alternate both;
}

@keyframes deslizar {
	0% { left: 100%; }
	50% { left: -10%; }
	100% { left: 0%; }
}

@-moz-keyframes deslizar {
	0% { left: 100%; }
	50% { left: -10%; }
	100% { left: 0%; }
}

@-webkit-keyframes deslizar {
	0% { left: 100%; }
	50% { left: -10%; }
	100% { left: 0%; }
}

@-o-keyframes deslizar{
	0% { left: 100%; }
	50% { left: -10%; }
	100% { left: 0%; }
}

@-ms-keyframes deslizar{
	0% { left: 100%; }
	50% { left: -10%; }
	100% { left: 0%; }
}


#menu > li { /*degradado botones*/
background: #888; /* Old browsers */
background: -moz-linear-gradient(top,  #d8e0de 0%, #aebfbc 22%, #99afab 33%, #8ea6a2 50%, #829d98 67%, #4e5c5a 82%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d8e0de), color-stop(22%,#aebfbc), color-stop(33%,#99afab), color-stop(50%,#8ea6a2), color-stop(67%,#829d98), color-stop(82%,#4e5c5a), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #d8e0de 0%,#aebfbc 22%,#99afab 33%,#8ea6a2 50%,#829d98 67%,#4e5c5a 82%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #d8e0de 0%,#aebfbc 22%,#99afab 33%,#8ea6a2 50%,#829d98 67%,#4e5c5a 82%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #d8e0de 0%,#aebfbc 22%,#99afab 33%,#8ea6a2 50%,#829d98 67%,#4e5c5a 82%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #d8e0de 0%,#aebfbc 22%,#99afab 33%,#8ea6a2 50%,#829d98 67%,#4e5c5a 82%,#0e0e0e 100%); /* W3C */

}

.tutorialcorreo img {
	float: none;
	margin-top: 0.8em;
	margin-bottom: 1em;
}

#rssfacebook {
	font-face: 80%;
	line-height: 200%;
}