body {
	
	background-color: #f3f3f3;
	margin:0;
	padding: 0;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
}
.wrapper {
	text-align:center;
	align-content: flex-start;
	background-color: #f3f3f3;
	min-width: 320px;
	width: 90%;
	margin: 0 auto;
}
article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; }

/* Text */
h1, h2, h3, h4, h5 {
	font-family: 'Oswald', sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	text-align: center;
}
h1 {
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	font-size: 300%;
	line-height: 0.5;
}
h4 {
	font-family: 'Oswald', sans-serif;
	font-weight:500;
	color:#545454;
	font-size:90%;
	margin-top: .5em;
    margin-bottom: .5em;
}
h3 {
	font-family: 'Oswald', sans-serif;
	font-weight:500;
	color:#2D46FF;
	font-size:90%;
	margin-top: .5em;
    margin-bottom: .5em;
}
h5 {
	font-family: 'Oswald', sans-serif;
	color:#000000;
	font-weight:400;
	line-height: 0.1;
	font-size:120%;
	margin-top: .5em;
    margin-bottom: 1em;
	
	
}
a {
	color: #000000;
	text-decoration: none;
}
.link-bold {
	display:block;
	padding: 10px;
	border-radius: 7px;
	border: 1px solid white; /* IE fallback */
	border: 1px solid hsla(0,0%,100%,.7);
	background: white; /* IE fallback */
	background: hsla(0,0%,100%,.4);
	text-align:center;
	font-size: 125%;
	margin-top: 30px;
}
.intro {
	margin-bottom: 1em;
	margin-left: 1em;
	margin-right: 1em;
	font-size: 125%;
	line-height: 1.5;
	text-align: justify;
}

/* Header --------------------------------- */
.logo {
	margin-bottom: 1em;
	text-align: center;
}


.tagline {
	display: block;
	margin-top: -1em;
	color: #000000;
	font-family: 'Oswald', sans-serif;
}
.list-nav {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	
	background-color: #CCCCCC;
	margin: 0;
	padding: 0.5em;
	list-style: none;
	font-family: 'Oswald', sans-serif;
	font-weight: normal;
	text-transform: uppercase;
}
.list-nav li {
	/* since they don't have flex set, they just shrinkwrap to longest content */
	text-align: center;
}

/* Forms ------------------------------ */
button::-moz-focus-inner { border:0; }
button {
	background: #0E7EE2; /* IE fallback */
	border: 1px solid black;
	border-radius: 3px;
	-webkit-box-shadow: inset 0 0 1px 1px hsla(0,0%,100%,.5);
	box-shadow: inset 0 0 1px 1px hsla(0,0%,100%,.5);
	color: #fff;
	padding: 5px 5px 5px 5px;
	text-align:center;
	text-shadow: 0 1px 0 hsla(0,0%,0%,.5);
	font-family: 'Oswald', sans-serif;
	font-weight: normal;
	font-size: 80%;
	text-transform: uppercase;
}
button:hover {
    background: black;
    cursor: pointer;
}
button:active {
    background: hsla(327,90%,52%,1.0);
    color: #000;
}

input[type="text"] {
	padding: 2px 2px 4px 4px;
	border: 1px solid hsl(197, 0%, 0%);
	border-radius: 2px;
	box-shadow: inset 0 0 2px #fff;
	background: hsl(197, 0%, 63%);
	background: -webkit-linear-gradient(top, hsl(197, 0%, 89%), #fff);
	background: -moz-linear-gradient(top, hsl(197, 0%, 89%), #fff); /* ADD other versions */
    width: 300px;
	margin-bottom: 20px;
	font-size:12px;
	font-family: 'Oswald', sans-serif;
}
input[type="email"] {
	padding: 2px 2px 4px 4px;
	border: 1px solid hsl(35,28%,70%);
	border-radius: 2px;
	box-shadow: inset 0 0 2px #fff;
	background: hsl(35,28%,97%);
	background: -webkit-linear-gradient(top, hsl(35,28%,90%), #fff);
	background: -moz-linear-gradient(top, hsl(35,28%,90%), #fff); /* ADD other versions */
    width: 200px;
}
input[type="number"] {
	padding: 2px 2px 4px 4px;
	border: 1px solid hsl(35,28%,70%);
	border-radius: 2px;
	box-shadow: inset 0 0 2px #fff;
	background: hsl(35,28%,97%);
	background: -webkit-linear-gradient(top, hsl(35,28%,90%), #fff);
	background: -moz-linear-gradient(top, hsl(35,28%,90%), #fff); /* ADD other versions */
    width: 200px;
}

textarea{
	width: 290px; 
    height: 100px; 
    padding: 8px 0px 0px 10px;
    border-radius: 2px;
	box-shadow: inset 0 0 2px #fff;
	background: hsl(35,28%,97%);
	background: -webkit-linear-gradient(top, hsl(197, 0%, 89%), #fff);
	background: -moz-linear-gradient(top, hsl(197, 0%, 89%), #fff); /* ADD other versions */ 
    margin: 0 0 20px 0;
    font-size: 12px;
	font-family:'Oswald', sans-serif;
	max-width: 100%;
	max-height: 200px;
	min-height: 100px;
    
}

#botone{
	background: #00B0FF;
	color: #FFFFFF;
	padding: 5px;
	font-family: 'Oswald', sans-serif;
}
#botone:hover {
	cursor:pointer;
}
input[type="checkbox"], input[type="radio"] {
	margin:0 4px 0 0;
	padding:0;
	width:16px;
}
input[type="checkbox"] + label, input[type="radio"] + label {
	position: relative;
	padding-left: 4px;
}
input[type="checkbox"] + label::before, input[type="radio"] + label::before {
	position: absolute;
	left: -21px;
	top: 0;
	display: inline-block;
	width: 10px;
	height: 10px;
	padding: 2px 2px 4px 4px;
	background: #fff;
	background: -webkit-linear-gradient(top, hsl(35,28%,90%), #fff);
	background: -moz-linear-gradient(top, hsl(35,28%,90%), #fff); /* add other variations */
	content: " ";
	margin-top: 2px;
	cursor: pointer;
	border: 1px solid hsl(35, 28%, 70%);
	border-radius: 2px;
	text-align: center;
	line-height: 10px;
	vertical-align: top;
	box-shadow: inset 0 0 1px #fff;
	color: #F0470F;
}
input[type="radio"] + label::before {
	width: 9px;
	height: 9px;
	padding: 1px 3px 5px 3px;
	border-radius: 50%;
}
input[type="checkbox"] + label:hover::before, input[type="checkbox"]:focus + label::before {
	box-shadow: inset 0 0 2px 1px #fd2;
}
input[type="checkbox"]:checked + label:before {
	content: "\2713";
}
input[type="radio"]:checked + label:before {
	content: "\25CF";
}
input:disabled + label:before {
	border-color: #bbb;
	color: #bbb;
	text-shadow: 0 -1px #ccc, 0 1px #666;
	background: -moz-linear-gradient(top, #d5d5d5, #e5e5e5); /* add other variations */
}

/* Duster detailing Builder ---------------------------- */
.builder {
	
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-content: flex-start;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	
	
	-ms-flex-pack: center;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	
	
}
.builderxok {
	
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-content: flex-start;
	-ms-flex-wrap: nowrap;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	
	
	-ms-flex-pack: center;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	
	
}


.component div .builder img{
	padding-bottom: -200px;
	
}
.builder .component img{
	margin-left: -0.1em;
	

}

.component {
	
	-ms-flex: 1 1 200px;
	-webkit-flex: 1 1 200px;
	flex: 1 1 200px; /* can't use 1 as value, because that makes flex-basis 0, which means each is allowed to shrink to 0px, so .action will never have to wrap */

	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column; /* only has one flex item child, the ul, but we want it to stretch its height, so we set direction to column so that flex property affects height not width */
	
	align-content: flex-start;
	
	margin: 38px 5px -20px 0px;
	padding: 20px;
	border-radius: 7px;
	border: 1px solid white; /* IE fallback */
	border: 1px solid hsla(0,0%,100%,.7);
	background: white; /* IE fallback */
	background: hsla(0,0%,100%,.4);
}

.component h2 {
	
	background-image:
    linear-gradient(
      to right, 
      black, #0221ab);
	color: white;
	position: relative;
	margin: 0 0 .5em 0;
	padding: 10px 0 0 0;
}
.component h8 {
	
	background-image:
    linear-gradient(
      to right, 
      black, #ff2c73,black);
	color: white;
	position: relative;
	margin: 0 0 .5em 0;
	padding: 10px 0 0 0;
}
.component h2ok {
	font-family: 'Oswald', sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	text-align: center;
	background-image:
    linear-gradient(
      to right, 
      #2D46FF, #FF0064);
	font-size: 150%;
	color: white;
	position: relative;
	margin: 0 0 .5em 0;
	padding: 10px 0 0 0;
}

.component h2:before {
	content: '';
	display: block;
	position: absolute;
	top: -40px;
	left: 50%;
	width: 40px;
	height: 40px;
	margin-left: -20px;
	background-image: url(../images/icons.png);
}

.component ul {
	/*-ms-flex: 1; not feeding to IE 10 because it has bug that collapses .components when this flexes vertically */
	-webkit-flex: 1;
	flex: 1; /* force it to stretch to full height. height:100% won't work because parent doesn't have height declared */
	
	
	
	
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
	
	
	margin: 90;
	padding: 0;
	list-style: none;
}
.component li {
	margin-bottom: .5em;
}
.component li:last-child {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
		
	
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	
	margin-top: auto; /* set to whatever free space is left, effectively pushing item to bottom of container */
}
.component li:last-child label {
	margin-right: 4px;
}
.component .other-name {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	
	
	
	display: block; /* FALLBACK */
	-moz-box-sizing: border-box; /* FALLBACK */
	box-sizing: border-box; /* FALLBACK */
	width: 100%; /* FALLBACK */
	margin: 0;
}
.boton-mas {
	
	text-align: center;
	background-color: #19B5F9;
	border-radius: 4px; 
}
.boton-mas a{
	padding:0.2em 0.2em;
	display:block;
	color: white;
}
.boton-mas:hover {
	background: #000; /* fallback */
}
.boton-book {
	background-size: 3em 3em 3em 3em;
	text-align: center;
	
	border-radius: 4px; 
}
.boton-book a{
	padding:0.2em 0.2em;
	display:block;
	color: black;
}
.boton-book:hover {
	
}
.book a {
  display: inline-block;
  position: relative;
}

.book a span {
  position: absolute;
  top: 50%;
  left: 50%;
  color: white;
  display: none;
  transform: translate(-50%, -50%);
}


.boton-time {
	
	text-align: center;
	background-color: #084fff;
	border-radius: 3px; 
}
.boton-time a{
	margin-top: 0.5em;
	padding:0.2em 0.2em;
	display:block;
	color: white;

}
.boton-time-pro {
	
	text-align: center;
	background-color: black;
	border-radius: 3px; 
}
.boton-time-pro a{
	margin-top: 0.5em;
	padding:0.2em 0.2em;
	display:block;
	color: white;

}
.boton-time-inte {
	
	text-align: center;
	background-color: #ff0689;
	border-radius: 3px; 
}
.boton-time-inte a{
	margin-top: 0.5em;
	padding:0.2em 0.2em;
	display:block;
	color: black;

}
.imagencabeza{
	
	text-align: justify;
	display: flex;
	
}
.imagencabeza img{

    
	border: 1px solid #E9E2D8; /* IE fallback */
	border: 1px solid hsla(0,0%,100%,.3);
	background: #E1D8CA; /* IE fallback */
	background: hsla(0,0%,100%,.2);
}

.imagensede{
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	
	-ms-flex-pack: justify;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	
	
}
.imagensede img{

    
    
    margin: 0 0 10px -30px;
	border: 3px solid #E9E2D8; /* IE fallback */
	border: 3px solid hsla(0,0%,100%,.3);
	
}
.builder .procesos img {
	
    display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	
	-ms-flex-pack: space-around;
	-webkit-justify-content:space-around;
	justify-content: space-around;
	margin: 0% 0% 0% 0%;
	
}
.builder .imagencenter img{
	
	margin: 0 2em 0 25%;
}
.texto{
	
	text-align: justify;
}
.texto2{
	
	text-align: center;
}
.textotime{
	
	color: red;
	text-align: justify;
}
.action {
	-ms-flex: 1 1 100%;
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
	
	/* not feeding to Safari because it doesn't support wrapping (old box-lines property) */
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	
	margin: 0 0 0 20px;
	text-align: center; /* FALLBACK */
}
.flexbox .action label {
	margin-right: 10px; /* Hide from non-flexbox browsers because it screws up centered appearance of label text */
}
.action label {
	font-family: 'Hammersmith One', sans-serif;
	font-weight: normal;
	font-size: 112.5%;
	text-transform: uppercase;
}
.action input {
	-ms-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	
	display: block; /* FALLBACK */
	width: 100%; /* FALLBACK */
	-moz-box-sizing: border-box; /* FALLBACK */
	box-sizing: border-box; /* FALLBACK */
}
.action button {
	-ms-flex: 1 1 100%;
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
	
	margin-top: 10px;
}

/* S'mores Gallery --------------------------- */
.gallery {
	/* not feeding to Safari because it doesn't support wrapping (old box-lines property) */
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	
	margin-left: -20px;
	text-align: center; /* FALLBACK, test */
}

.gallery-item {
	-ms-flex: 1 0 200px;
	-webkit-flex: 1 0 200px;
	flex: 1 0 200px; /* wrapping won't happen with 1 as value because of flex-basis equal to 0 again. can use auto as flex-basis, but then each box is different width. using an absolute value acts as min-width but also ensures they start out same size so when flex gets added it gets added equally and each box on same line stays same width */
	
	margin: 0 0 20px 20px;
	padding: 20px;
	border-radius: 2px;
	border: 1px solid #413324; /* IE fallback */
	border: 1px solid hsl(30,28%,20%);
	background: #614C37; /* IE fallback */
	background: hsl(30,28%,30%);
	color: #E9E2D8; /* IE fallback */
	color: hsl(30,28%,90%);
	text-align: center;
}
.no-flexbox .gallery-item, .flexbox-legacy .gallery-item { /* FALLBACK, test */
	display: inline-block;
	width: 12em;
	height: 9em;
	vertical-align: top;
}
.gallery-item:hover {
	background: #413324; /* fallback */
	background: hsl(30,28%,20%);
	color: #fff;
}
.gallery-item h3 {
	margin: 0 0 .5em 0;
}
.gallery-item ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Pagination ------------------------------- */
.pagination {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	
	margin: 0 0 40px 0;
	padding: 0;
	list-style: none;
	text-align: center; /* FALLBACK */
}
.pagination li {
	-ms-flex-order: 2;
	-webkit-order: 2;
	order: 2;
	
	display: inline-block; /* FALLBACK */
}
.pagination li:first-child {
	-ms-flex-order: 0;
	-webkit-order: 0;
	order: 0;
	
	text-align: left;
}
.pagination li:last-child {
	-ms-flex-order: 1;
	-webkit-order: 1;
	order: 1;
	
	text-align: right;
}
.flexbox .pagination li:first-child, .flexbox .pagination li:last-child { /* Have to scope to only flexbox browsers, using Modernizr .flexbox class, because setting width to 50% only makes sense if order property is supported */
	width: 50%;
}
.pagination a {
	display: inline-block; /* just keeps padded boxes from overlapping each other vertically */
	margin: 0 0 10px 0;
	padding: 10px;
	border-radius: 2px;
	border: 1px solid #E9E2D8; /* IE fallback */
	border: 1px solid hsla(0,0%,100%,.3);
	background: #E1D8CA; /* IE fallback */
	background: hsla(0,0%,100%,.2);
}

@media screen and (min-width:600px) {
	/* Header ---------- */
	.list-nav {
		letter-spacing: 1px;
		text-align: center; /* FALLBACK */
	} 
	.list-nav li {
		display: inline-block; /* FALLBACK */
		padding: 0 .5em; /* FALLBACK */
	}
	.list-nav li:first-child {
		padding-left: 0;
	}
	.list-nav li:last-child {
		padding-right: 0;
	}
	
	/* S'mores Builder ---------- */
	.action {
		-ms-flex-align: stretch;
		-webkit-align-items: stretch;
		align-items: stretch;
		
		margin: 0 0 0 20px;
	}
	.action input {
		display: inline; /* FALLBACK */
		width: auto; /* FALLBACK */
		margin: 0 10px 0 0;
	}
	.action label {
		-ms-flex-item-align: center;
		-webkit-align-self: center;
		align-self: center;
	}
	.action button {
		-ms-flex: none;
		-webkit-flex: none;
		flex: none;
		
		margin: 0;
	}
	
	/* Pagination ---------- */
	.pagination li, .flexbox .pagination li:first-child, .flexbox .pagination li:last-child { /* Need .flexbox class just for specificity, to override earlier rule that set width to 50% */
		-ms-flex-order: 0;
		-webkit-order: 0;
		order: 0;
		
		width: auto;
		text-align: center;
	}
}

@media screen and (min-width:860px) {
	/* Header ---------- */
	.flexbox .list-nav {
		-ms-flex-pack: start;
		-webkit-justify-content: flex-start;
		justify-content: flex-start; /* back to the default */
		
		position: relative; /* you can use positioning with flexbox */
		top: -70px; /* This is the reason why we have to scope this rule to only apply in flexbox browsers. We don't want the jump up to happen unless flexbox is shoving the items to the edges. */
	}
	/*.list-nav li { NEEDED?
		text-align: left;
	}*/
	.flexbox #link-home { margin-right:15px; }
	.flexbox #link-tumblr { margin-left:15px; }
	.flexbox #link-party { /* make the break between left and right sides happen before this link */
		margin-left: auto;
	}
	
	/* Pagination ---------- */
	.pagination {
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
	}
	.pagination a {
		margin: 0 10px;
	}
}
@media screen and (min-width:1200px) {
	/* Header ---------- */
	.list-nav { letter-spacing: 2px; }
	.flexbox #link-home { margin-right:30px; }
	.flexbox #link-tumblr { margin-left:30px; }
	
	/* S'mores Builder ---------- */
	.flexbox .component { max-width: 14em; }
	
}.ul {
}