@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,700italic);

/*
	RESET + SETEO BÁSICO
*/

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
	display: block;
}

html, body,
h1, h2, h3, h4, h5, h6, p, a, span, small, time, abbr, acronym,
img, figure,
main, header, footer, div, ol, ul, li, dl, dt, dd,
form, fieldset, legend, label, input, select, option, textarea, button,
tr, th, td,
iframe {
	border: none;
	margin: 0;
	padding: 0;
	vertical-align: top;
}

p, a, span, small, time, abbr, acronym,
main, header, footer, div, ol, ul, li, dl, dd,
legend, label, input, select, option, textarea, button {
	color: #666666;
	font-family: Open Sans;
	font-size: 13px;
	line-height: 20px;
	white-space: normal;
}

a {
	text-decoration: none;
}

ol,
ul {
	list-style: none;
}

html,
body {
	height: 100%;
}

body {
	background: #f6f6f6;
	min-width: 280px;
}

	body main h1 {
		color: #004982;
		font: 300 42px/40px Open Sans;
	}

	body>main form {
		margin-top: 18px;
		overflow: hidden;
	}

	body>main form h3 {
		margin-top: 20px;
	}
	
	body form .campo,
	body form .boton {
		float: left;
		margin-top: 10px;
		position: relative;
		width: 100%;
	}

		::-webkit-input-placeholder {
			color: #888888;
		}
		:-moz-placeholder {
			color: #888888;
			opacity: 1;
		}
		::-moz-placeholder {
			color: #888888;
			opacity: 1;
		}
		:-ms-input-placeholder {
			color: #888888;
		}

			body>main form>div>div>span,
			main span[id*="RequiredField"]{
				color: #ff311c;
				position: absolute;
				right: 10px;
				bottom: 3px;
				z-index: 11;
			}

			body>main form>div>div>select+span {
				right: 25px;
			}
		
		body>main input,
		body>main select {
			background-color: #FFFFFF;
			background-image: url("../img/constante.png");
			background-repeat: no-repeat;
			border: 2px solid #DADADA;
			border-radius: 4px;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			color: #888888;
			height: 30px;
			padding-left: 25px; 
			width: 100%;
		}

		body>main .apellido,
		body>main .servicio,
		body>main .nombre {
			margin-top: 10px;
		}

		body>main .persona,
		body>main .caracteristica,
		body>main .telefono,
		body>main .tipo-tarjeta,
		body>main .numero-tarjeta {
			width: 49%;
		}

		body>main .nombre,
		body>main .num-doc,
		body>main .calle-num,
		body>main .calle-piso,
		body>main .calle-dpto,
		body>main .localidad,
		body>main .provincia,
		body>main .telefono,
		body>main .numero-tarjeta {
			margin-left: 2%;
		}

		body>main .ubicacion {
			display: inline-block;
		}

		body>main .calle {
			width: 36%;
		}

		body>main .calle-num {
			width: 22%;
		}

		body>main .calle-piso {
			width: 18%;
		}

		body>main .calle-dpto {
			width: 18%;
		}

		body>main .cp {
			width: 18%;
		}
		
		body>main .localidad,
		body>main .provincia {
			width: 39%;
		}

		body>main .persona input,
		body>main .descripcion input,
		body>main .persona select {
			background-position: 7px -281px;
		}

        body>main .precio {
			background-position: 7px -400px;
		}
		
		body>main .nacimiento input {
			background-position: 7px -320px;
		}

		body>main .email input {
			background-position: 7px -360px;
		}
		
		body>main .fecha input {
			background-position: 7px -320px;
		}
		
		body>main .codigo input {
			background-position: 7px -481px;
		}

		body>main .ubicacion input,
		body>main .ubicacion select {
			background-position: 7px -400px;
		}

		body>main .caracteristica input,
		body>main .telefono input {
			background-position: 8px -440px;
		}

		body>main .tipo-tarjeta select,
		body>main .numero-tarjeta input {
			background-position: 7px -480px;
		}

		body>main input[type="submit"] {
			background: #3b84bd;
			background: -ms-linear-gradient(45deg,  #1f68a1 45%,#3b84bd 45%); /* IE10+ */
			background: linear-gradient(45deg,  #1f68a1 45%,#3b84bd 45%);
			border: none;
			border-radius: 4px;
			color: #FFFFFF;
			cursor: pointer;
			font: italic 700 14px/20px Open Sans;
			height: 30px;
			text-transform: uppercase;
			width: 100%;
		}

		body>main input[type="submit"]:hover {
			animation: boton 0.7s;
		}

	body>footer {
		font-size: 11px;
	}

		body>footer ul.social li {
			display: inline-block;
			margin-left: 5px;
		}

			body>footer ul.social a {
				background-image: url("../img/constante.png");
				display: block;
				height: 20px;
				line-height: 60px;
				overflow: hidden;
				width: 20px;
			}

			body>footer ul.social a.ike {
				background-position: 0 -240px;
			}

			body>footer ul.social a.ike:hover {
				background-position: -60px -240px;
			}

			body>footer ul.social a.fb {
				background-position: -20px -240px;
			}

			body>footer ul.social a.fb:hover {
				background-position: -80px -240px;
			}

			body>footer ul.social a.tt {
				background-position: -40px -240px;
			}

			body>footer ul.social a.tt:hover {
				background-position: -100px -240px;
			}

		body>footer p {
			color: #888888;
			font-size: 12px;
			font-style: italic;
			margin-top: 5px;
		}

		body>footer small,
		body>footer ul.legales a {
			color: #888888;
			font-size: 11px;
		}

		body>footer small {
			border-top: 1px solid  #d6d6d6;
			display: block;
			margin-top: 14px;
			padding-top: 6px;
		}

		body>footer ul.legales a:hover {
			text-decoration: underline;
		}

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

	body>main .calle,
	body>main .calle-num,
	body>main .calle-piso,
	body>main .calle-dpto,
	body>main .cp,
	body>main .localidad {
		width: 49%;
	}

	body>main .provincia {
		width: 100%;
	}

	body>main .calle-piso,
	body>main .provincia {
		margin-left: 0;
	}

	body>main .calle-num,
	body>main .calle-dpto,
	body>main .localidad {
		margin-left: 2%;
	}
}

@media screen and (max-width: 739px) {
	body {
		padding-left: 20px;
		padding-right: 20px;
	}

		body>header {
			text-align: center;
		}

		body>header h1 {
			background: url("../img/constante.png") 9px -520px no-repeat;
			display: inline-block;
			height: 180px;
			font-size: 14px;
			margin-bottom: 24px;
			margin-top: 18px;
			letter-spacing: -2px;
			text-align: left;
			text-indent: -140px;
			overflow: hidden;
			width: 140px;
		}

		body>main h1 {
			text-align: center;
		}

		body>main input {
			padding-right: 25px;
		}

		body>footer {
			border-top: 1px solid  #d6d6d6;
			margin-top: 10px;
			padding-bottom: 3px;
			padding-top: 19px;
			text-align: center;
		}

			body>footer ul.legales li {
				display: inline-block;
			}

			body>footer ul.legales li:before {
				color: #888888;
				content: "|";
				font: 11px/20px Open Sans;
				padding: 0 5px;
				position: relative;
				top: -3px;
			}

			body>footer ul.legales li:first-child:before {
				content: none;
			}
}

@media screen and (min-width: 740px) {
	body {
		margin: 0 auto;
		position: relative;
		width: 740px;
	}

		body>header {
			display: inline-block;
			margin-right: 20px;
			text-align: right;
			width: 220px;
		}

			body>header h1 {
				background: url("../img/constante.png") 0 0 no-repeat;
				display: inline-block;
				height: 240px;
				font-size: 14px;
				margin-top: 17px;
				letter-spacing: -2px;
				text-align: left;
				text-indent: -140px;
				overflow: hidden;
				width: 176px;
			}

		body>main {
			background: url("../img/fondo.png") right top repeat-y;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			display: inline-block;
			min-height: 100%;
			padding: 0 20px 20px;
			width: 500px;
		}

			body>main h1 {
				padding-top: 82px;
			}

			body>main input {
				padding-right: 15px;
			}

		body>footer {
			left: 0;
			position: absolute;
			text-align: right;
			top: 300px;
			width: 220px;
		}

			body>footer small {
				border-bottom: 1px solid  #d6d6d6;
				margin-bottom: 6px;
				padding-bottom: 13px;
			}
}

/*
	ANIMACIONES
*/

@keyframes boton {
	0%   {opacity: 0.1;}
	100% {opacity: 1;}
}

@-webkit-keyframes boton {
	0%   {opacity: 0.1;}
	100% {opacity: 1;}
}

body>main div.servicio {
	width: 100%;
}
body>main input.servicio {
	background-position: 7px -480px;
}