/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}

html {
	background-color: rgb(245,248,255);
	background-color: rgb(213,216,223);
	}

body {
	position: relative;
	font: 200 1em "Helvetica Neue", Arial, Helvetica, sans-serif;
	text-shadow: 0 1px 0 rgba(255,255,255,0.8);
	color: #333;
	}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
	}

article {
	position: relative;
	width: 90%;
	max-width: 600px;
	margin: 0 auto;
	padding: .5em 2.5%;
	background-color: rgb(245,248,255);	
	}

section {
	width: 90%;
	max-width: 600px;
	height: 5em;
	margin: 0 auto;
	padding: 0 2.5%;
	
	text-align: center;
	
	background-color: rgb(245,248,255); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(245,248,255,1) 00%, rgba(213,216,223,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,248,255,1)), color-stop(100%,rgba(213,216,223,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(245,248,255,1) 0%,rgba(213,216,223,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(245,248,255,1) 0%,rgba(213,216,223,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(245,248,255,1) 0%,rgba(213,216,223,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(245,248,255,1) 0%,rgba(213,216,223,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f8ff', endColorstr='#d5d8df',GradientType=0 ); /* IE6-9 */
	}

header {
	width: 100%;
	margin: 0;
	background: #000000 center top no-repeat url('bg-ui-header.png');
	text-align: left;
	vertical-align: middle;
	overflow: hidden;
	}

.logo {
	width: 90%;
	max-width: 600px;
	margin: 0 auto;
	padding: 0 2.5%;
	}
	
header img {
	margin: .4em 0;
	width: 40%;
	max-width: 349px;
	}

footer {
	margin-top: 2em;
	margin-bottom: 2em;
	text-align: center;
	color: #405060;
	font-size: .7em;
	}

h1 {
	font: 900 1.2em "Helvetica Neue", Arial, Helvetica, sans-serif;
	color: #333; 
	text-align: left;
	}

h2, h3 {
	font: 200 1em "Helvetica Neue", Arial, Helvetica, sans-serif;
	color: #246; 
	}

p {
	margin-bottom: .5em;
	}

sup {
	vertical-align: super;
	font-size: 50%;
	}

p > small { font-size: .85em; }

a {
	color: #006491;
	font-weight: bold;
	text-decoration: none;
	}

.moviles {
	position: absolute;
	bottom: 0;
	right: -0.3em;
	height: 160%; 
	z-index: 9; 
	}

.movilhead {
	width: 100%;
	height: 3.5em;
	position: relative;
	text-align: left;
	display: inline-block;
	vertical-align: bottom;
	}

.movilhead h1 {
	position: absolute;
	bottom: .25em;
	left: 0;
	color: #246;
	}


/* ------------------------------- Buttons ------------------------------- */

.button-blue, .button-gray, .button-ofertas {
	display: block;
	clear: both;
	margin: 1.5em auto;
	width: 80%;
	max-width: 15em;
	text-align: center;
	padding: .5em 1em;
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	
	font-weight: 600;
	font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
	text-decoration: none;
	vertical-align: middle;
	}

.button-blue { 
	background: rgb(21,134,209); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(21,134,209,1) 0%, rgba(10,62,97,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(21,134,209,1)), color-stop(100%,rgba(10,62,97,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(21,134,209,1) 0%,rgba(10,62,97,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(21,134,209,1) 0%,rgba(10,62,97,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(21,134,209,1) 0%,rgba(10,62,97,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(21,134,209,1) 0%,rgba(10,62,97,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1586d1', endColorstr='#0a3e61',GradientType=0 ); /* IE6-9 */

	border: 1px solid rgb(40,100,120);

	-moz-box-shadow:inset 0px 1px 0px 0px #aaccff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #aaccff;
	box-shadow:inset 0px 1px 0px 0px #aaccff;

	text-shadow: rgba(0,20,40,.7) 0 -1px 0px;
	color: white;
	}

.button-blue:hover {
	background: #0088b9;
   }
   
.button-blue:active {
	background: #0075a9;
   }

.button-blue:after {
	content: " ";
	margin: 0 0 0 .5em;
	padding: 0;
	display: inline-block;
	width: .875em;
	height: .875em;
	background-color: transparent;
	background-image: url('chevron.png');
	background-size: .875em 1.75em;
	background-position: 0 bottom;
	background-repeat: no-repeat;
   }

.button-gray {
	background: rgb(203,212,216); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(203,212,216,1) 0%, rgba(171,175,178,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(203,212,216,1)), color-stop(100%,rgba(171,175,178,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(203,212,216,1) 0%,rgba(171,175,178,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(203,212,216,1) 0%,rgba(171,175,178,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(203,212,216,1) 0%,rgba(171,175,178,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(203,212,216,1) 0%,rgba(171,175,178,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbd4d8', endColorstr='#abafb2',GradientType=0 ); /* IE6-9 */

	border: 1px solid rgb(140,145,150);
	
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;

	text-shadow: rgba(255,255,255,.8) 0 1px 0;
	color: #333;
	}

.button-gray:hover {
	background: #cbd4d8;
	}	

.button-gray:active {
	background: #bbc4c8;
	}

.button-gray:after {
	content: " ";
	margin: 0 0 0 .5em;
	padding: 0;
	display: inline-block;
	width: .875em;
	height: .875em;
	background-color: transparent;
	background-image: url('chevron.png');
	background-size: .875em 1.75em;
	background-position: 0 top;
	background-repeat: no-repeat;
   }


.button-ofertas {
   border-top: 1px solid #ffee66;
   background: #fc6f32;
   background: -webkit-gradient(linear, left top, left bottom, from(#fee94c), to(#fc6f32));
   background: -webkit-linear-gradient(top, #fee94c, #fc6f32);
   background: -moz-linear-gradient(top, #fee94c, #fc6f32);
   background: -ms-linear-gradient(top, #fee94c, #fc6f32);
   background: -o-linear-gradient(top, #fee94c, #fc6f32);

	border: 1px solid #fdaf38;

	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
   
   text-shadow: rgba(255,255,255,.9) 0 1px 1px;
   color: #000000;
   text-decoration: none;
   }
.button-ofertas:hover {
   background: #fed347;
   color: #000000;
   }
.button-ofertas:active {
   background: #eec337;
   }



/* -------------------------- MEDIA QUERIES --------------------------------------- */
	

@media all and (max-width: 15em) {
	
	.moviles { display: none; }
	
	.button-gray:after, .button-blue:after { 
		display: none;
	} 
	
}


@media all and (min-width: 15em) and (max-width: 20em) {
	
	article {
		width: 90%;
	}

	.moviles { right: -0.3em; }

}

@media all and (min-width: 20em) and (max-width: 24em) {
	body {
		font-size: 120%;
	}
	
	.moviles { right: 0; }
}

@media all and (min-width: 24em) and (max-width: 30em) {
	body {
		font-size: 130%;
	}
	
	.moviles { right: 5%; }
}




@media all and (min-width: 30em) and (max-width: 40em) { 
	body {
		font-size: 140%;
	}

	article {
		width: 80%;
		padding: 1em 5%;	
	}

	section, .logo {
		width: 80%;
		padding: 0 5%;	
	}

	.moviles { right: 10%; }

}


@media all and (min-width: 40em) and (max-width: 50em) { 
	body { font-size: 160%; } 
	
	article {
		width: 80%;
		padding: 1em 5%;	
	}

	section, .logo {
		width: 80%;
		padding: 0 5%;	
	}
	
	.moviles { 
		right: 15%;
		height: 170%
	}

}

@media all and (min-width: 50em) { 
	body { font-size: 160%; } 
	
	article {
		width: 80%;
		padding: 1em 5%;	
	}

	section, .logo {
		width: 80%;
		padding: 0 5%;	
	}
	
	.moviles { 
		right: 20%;
		height: 200%
	}

}