/*=================================*/
/* Arreglos moyua
/*=================================*/

/* Reset Styles
/*---------------------------------------------*/
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

table {
	border-collapse: collapse;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
	display: block;
}

/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button {
	cursor: pointer;
}

/* make buttons play nice in IE:	 
		www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {
	width: auto;
	overflow: visible;
}

/* Sharper Thumbnails */
img {
	-ms-interpolation-mode: bicubic;
}


/* Main Styles
/*---------------------------------------------*/
body {
	font: 1em/1 'Karla', Helvetica, Arial, Helvetica, sans-serif;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}
#home {
	color: #fff;
	background: #1E2222;
}

.btn { text-align: center;}
	.btn a, input.btn, .btn span { display: inline-block; padding:0 50px; color: #fff; text-decoration: none !important; text-transform: uppercase; letter-spacing: 2px; border: 0; font-family: 'Karla'; font-weight: 700; border: 0; border-radius: 0; -webkit-border-radius:0;}
	.btn.fondo a { padding-top: 18px;}
	.btn.fondo a, input.btn.fondo { height: 50px; background: #CCA066 url(../../content/img/hr.png) no-repeat -1000px; margin: 0 0 60px 0; font-size: 0.875em;}
	.btn.border a, input.btn.border, .btn.border span { padding: 22px 10%; margin: 0 0 40px 0; border: 4px solid #CCA066; color: #CCA066; font-size: 1.4em;}
	#home .btn.border.white span { display: inline-block; height: 50px; font-size: .9em;}
	#arreglos .btn.border.white { text-align: left;}
		.btn.border.white span { padding-top:12px; padding-bottom: 12px; border:4px solid #fff; color: #fff; }

	.btn.border a:hover { color: #fff; background: #CCA066;}

.send { width: 350px; margin:0 auto; font-family: 'Karla'; font-weight: 400;}
	.send label { display: block; margin: 0 0 10px 0; font-size: .875em;}
	.send input[type=text], .send textarea { padding: 0 0 0 10px; margin: 0 0 28px 0; height: 50px; width: 100%; background: #3a3d3d url(../../content/img/hr.png) no-repeat -1000px; border: 0; border-radius: 0; -webkit-border-radius:0; font:1em 'Karla'; color: #fff;}
	.send textarea { height: 150px; padding: 10px; margin: 0 0 50px 0;}
	.send .error { display: block; margin: -10px 0 50px 0; color: #CCA066;}

#result { clear: both; text-align: center;}
#arreglos #result { text-align: left;}

#wrapper { position: relative; max-width: 160em; /*max-width: 63.750em;*/ margin: 0 auto;}

#footer { padding:50px 0 45px 0; text-align: center; color:#434646; font-size: 0.750em;}
	.copy { color: #fff; margin-bottom: 0; font-size: 1.16em;}
	#footer p { margin-bottom: 12px;}
	#footer img { margin:0 0 30px 0;}
	#footer a[rel=index] { display: inline-block; background: url(../../content/img/logo-moyua02-hover.png) no-repeat 0 0; transition:.2s all;}
	#footer a[rel=index] img { opacity: 1; transition:.2s all;}
	#footer a[rel=index]:hover img { opacity:0;}

.sel { color: #CCA066 !important; }

/**** ARREGLOS ***/

	#arreglos #header { height: 37.500em; padding: 50px 0 0 0; background: url(../../content/img/bg-header01.jpg) no-repeat center 0; background-size: cover; text-align:center;}

	#arreglos .navBar { background: #f1f1f1; color: #1E2222; text-align: center;}
		#arreglos .navBar a { display: inline-block; padding: 0 4%; color: #1E2222; text-decoration: none;; text-transform: uppercase; line-height: 50px; letter-spacing: 2px; font-size: .75em; font-weight: 700;}
		#arreglos .navBar a[rel=index] { display: none;}
		#arreglos .navBar[rel=fixed] a[rel=index] { display: inline-block; vertical-align: middle;}
			#arreglos .navBar[rel=fixed] a[rel=index] img { vertical-align: middle;}

	#arreglos h2 { padding: 60px 10%; font:2em/1.2 'Playfair Display'; font-weight: 400; font-style: italic; text-align: center;}
	#arreglos .content { padding: 0 0 85px 0;}
		#arreglos .content img, #arreglos .content .map { margin-bottom: 35px;}
		#arreglos .content img { max-width: 100%; width: 100%;}
		#arreglos .content .map { display: block; min-height: 40em; background: url(../../content/img/mapa_arreglos.png) no-repeat center center;}
		#arreglos .content h3 { display: inline-block; width: 30%; margin-right: 30px; font-weight: 700; font-size: 1.25em; vertical-align: top; text-align: right;}
		#arreglos .content ul { list-style: none; display: inline-block; width: 64%; vertical-align: top;}
			#arreglos .content li { display: inline-block; width: 45%; padding: 0 10px 0 0; margin-right: 40px; margin-bottom: 40px; vertical-align: top;}
			#arreglos .content li:nth-child(2n+1) { margin-right: 0;}
				#arreglos .content ul h4 { margin-bottom: 5px; font-weight: 700; font-size: .815em; }
				#arreglos .content ul p { font-size: .9em; line-height: 1.4;}
				#arreglos .content a { text-decoration: underline; color: #000;}
				#arreglos .content a:hover { text-decoration: none;}

		#arreglos .contact { padding: 30px 0; color: #fff; background: #1E2222;}
		#arreglos .contact:after { content: "" ; display: block; clear: both; height: 0; visibility: hidden;}
			#arreglos .contact h3 { float: left; width: 30%; margin: 0 30px 0 0; font-size: 1.3em; text-align: right;}
			#arreglos .contact .send { float: left;}
			#arreglos .contact .send:after { content: "" ; display: block; clear: both; height: 0; visibility: hidden;}
			#arreglos .contact p { font-size: .875em; line-height: 1.4;}
			#arreglos .contact strong { font-weight: 700;}
			#arreglos .contact a { color: #fff; text-decoration: underline;}
			#arreglos .contact a:hover { text-decoration: none;}

	#arreglos #footer { color: #c8c9c9;}
	#arreglos .copy { color:#000;}

/**** animations ****/

.animated {
  -webkit-animation-duration: .2s;
  animation-duration: .2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    position: fixed;
    width: 100%;
    left: 0; 
    top: 0;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    position: fixed;
    width: 100%;
    left: 0; 
    top: 0;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}