/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

html,
button,
input,
select,
textarea {
	color: #222;
}

body {
	font-size: 1em;
	line-height: 1.4;
}

::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}

::selection {
	background: #b3d4fc;
	text-shadow: none;
}


hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}

img {
	vertical-align: middle;
}

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

textarea {
	resize: vertical;
}

.ir {
	background-color: transparent;
	border: 0;
	overflow: hidden;
	/* IE 6/7 fallback */
	*text-indent: -9999px;
}

.ir:before {
	content: "";
	display: block;
	width: 0;
	height: 100%;
}

.hidden {
	display: none !important;
	visibility: hidden;
}

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

.invisible {
	visibility: hidden;
}

.clearfix:before,
.clearfix:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}

.clearfix:after {
	clear: both;
}

.clearfix {
	*zoom: 1;
}

@media print {
	* {
		background: transparent !important;
		color: #000 !important; /* Black prints faster: h5bp.com/s */
		box-shadow: none !important;
		text-shadow: none !important;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content: "";
	}

	pre,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	thead {
		display: table-header-group; /* h5bp.com/t */
	}

	tr,
	img {
		page-break-inside: avoid;
	}

	img {
		max-width: 100% !important;
	}

	@page {
		margin: 0.5cm;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	h2,
	h3 {
		page-break-after: avoid;
	}
}

/*

	INDEX (Moblie First)
	$1  GENERAL
	
	$2 LAYOUT
	$2.1 Header
	$2.2 Menu
	$2.3 Footer

	$3 SECTIONS
	$3.1 Home
	$3.2 alerts
	$3.3 Testimonials
	$3.4 Contact

	$N  TEST


			

			
*/

/*	$1 GENERAL */
	body.en #header .lang.en,
	body.es #header .lang.es{display:none;}
		
/*	$2 LAYOUT */
/*	$2.1 Header */
		#header{
			background:url(layout/bg-header.gif) center -14px;
			position:relative;
			}
		.backgroundsize #header{
			background:url(layout/bg-header-2x.gif) center -14px;
			background-size:52px 30px;
		}
		#header .wrapper{background:url(layout/bg-hex.png) right top no-repeat;}
		.backgroundsize #header .wrapper{
			background-image:url(layout/bg-hex-2x.png);
			background-size:52px 145px;
		}
		#header .translator .logo{
			display:block;
			margin:0;
			padding:20px 0 20px 20px;
			}
		#header .translator .job_title{
			color:#f63f39;
			font:.8em 'adelle', serif;
			left: 120px;
			position: absolute;
			top: 77px;
			}
		#header .translator .job_title .langs{
			display:block;
			font-style:italic;
			font-weight:100;
			}
			
		#header abbr {border: none;}

/*	$2.2 Menu */
		#menu{
			background: #003f72; 
			background: -moz-linear-gradient(top, #427196 0%, #003f72 100%);
			background: -webkit-linear-gradient(top, #427196 0%,#003f72 100%);
			background: -o-linear-gradient(top, #427196 0%,#003f72 100%);
			background: -ms-linear-gradient(top, #427196 0%,#003f72 100%);
			background: linear-gradient(to bottom, #427196 0%,#003f72 100%);
			font:.9em 'adelle', serif;
			line-height:135%;
			padding:10px 0;
			-webkit-transition: .5s all ease;
			-moz-transition: .5s all ease;
			-ms-transition: .5s all ease;
			-o-transition: .5s all ease;
			transition: .5s all ease;
			}
		#menu .nav{
			color:#fff;
			float:left;
			margin-left:20px;
			position:relative;
			width:60px;
			}
		#menu .nav .ico{
			background:url(layout/ico-menu.png) left top no-repeat;
			height:8px;
			margin-top:-4px;
			position:absolute;
			right:6px;
			top:50%;
			width:8px;
			}
		#menu.open .nav .ico{background-position:0px -8px;}

		.backgroundsize #menu .nav .ico{
			background-image:url(layout/ico-menu-2x.png);
			background-size:8px 16px;
			}
		.backgroundsize #menu.open .nav .ico{background-position:0px -8px;}
		#menu ul{
			color:#84cdda;
			float:left;
			font-weight:400;
			list-style:none;
			margin:0;
			padding:0;
			width:210px;
			}
		#menu li{display:none;}
		#menu.open li{margin-bottom:5px;}
		#menu li.sel{
			display:block;
			font-weight:700;
			}
		#menu li .ext{
			background:url(layout/ico-ext-m.png) right center no-repeat;
			padding-right:18px;
			}
		.backgroundsize #menu li .ext{
			background-image:url(layout/ico-ext-m-2x.png);
			background-size:10px 10px;
			}
		#menu li a{
			color:#fff;
			display:inline-block;
			text-decoration:none;
			}
		#menu.open{/*height:215px;*/ height:191px;}
		#menu.open li{display:block;}

		#menu .ext,
		#menu .lang a{font-weight:300;}

		#menu .lang{margin-top:.8em;}
		#menu .lang .ico{
			background:url(layout/ico-banderas.png) left top no-repeat;
			display:inline-block;
			height:11px;
			margin-left:5px;
			width:16px;
			}
		#menu .lang.es .ico{}
		#menu .lang.en .ico{background-position:0px -11px;}

/*	$2.3 Footer */
		#footer{
			color:#5f5f5e;
			font:italic 0.793em 'adelle', serif;
			padding:30px 0;
			text-align:center;
			}
		#footer .copy .mini{
			display:block;
			margin:0 auto 25px;
		}
		#footer .design{
			line-height:25px;
			}
		#footer .design .ad,
		#footer .design .ad img{border:none;}


/*	$3 SECTIONS */
	#main{
		font:0.92em 'adelle', serif;
		position:relative;
		}
	#main a{
		color:#f63f39;
		text-decoration:underline;
		}
	#main a:hover{color:#ffa000;}
	#main a:visited{color:#2b3a59;}

	#main .title{
		border-bottom:1px dashed #cbe7e5;
		color:#84cdda;
		display:none;
		font:700 1.1em 'dienstag', sans-serif;
		margin:0px;
		padding:15px 20px 10px;
		text-transform:uppercase;
		}
	#main .title.mobile{display:block;}
	#main .title span{
		display:block;
		font-weight:400;
		}

	#main h4{
		color:#2b3a59;
		font-style:italic;
		font-weight:700;
		margin:0;
		padding:0.83em 0;
		}
	#main p{
		color:#2b3a59;
		margin:0 0 1em;
		}
	#main ul{
		color:#6899b5;
		list-style-image: url(layout/bullet-hex.png);
		padding-left:20px;
		}
	#main p,
	#main ul, 
	#main h4{
		margin-left:20px;
		margin-right:20px;
		}
	#main p,
	#main ul{font-size:1em;} /* tamaño del texsto corrido */

/*	$3.1 images */
		#main .photo{display:none;}
		#main.image .photo{
			display:block;
			position:absolute;
			right:10px;
			top:-10px;
			}
		#main.image .title{padding-right:110px;}
		#main.image h4:before,
		#main.image p.float:before{
			content:'';
			display:block;
			float:right;
			height:30px;
			margin-right:10px;
			width:100px;
			}
		.interpreting #main.image p.float:before,
		.contact #main.image p.float:before{margin-bottom:20px;}

		#main .imgs.icos a{margin-right:20px;display: inline-block;}

/*	$3.2 alerts */
		#main .alert{display:none;}
		.mobile_alert{
			background:#f63f39;
			color:#fff;
			font:.8em 'adelle', serif;
			padding:5px;
			text-align:center;
		}

/*	$3.3 Testimonials */
		#main.testimonials .quote{margin-bottom:10px;}
		#main.testimonials .quote p{
			background:#f9fafa;
			color:#003e71;
			margin:0 0 10px;
			padding:10px 20px;
			}
		#main.testimonials .quote .client{
			color:#f63f39;
			margin-left:20px;
			margin-right:20px;
			}
		#main.testimonials .quote .logo{
			margin:10px 20px;
			}

/* $3.4 Contact */
		#main.contact .title{margin-bottom:10px;}
		#main.contact ul{margin-top:0;}
		.note{
			color:#f63f39;
			font-weight:700;
			}

/*	$N TEST */		
	



/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 765px) {
	.wrapper{
		margin:0 auto;
		max-width:1000px;
		}
	#header{
		height:250px;
		}
	#header .wrapper,
	.backgroundsize #header .wrapper{
		background:none;
		height:250px;
		position:relative;
		}
	#header .translator .logo{padding:34px 0 34px 9.6%;}
	#header .translator .logo, #header .translator .logo a{
		height:173px;
		width:388px;
		}
	#header .translator .logo a{
		background:url(layout/logo-desktop.png);
		display:block;
		}
	.backgroundsize #header .translator .logo a{
		background-image:url(layout/logo-desktop-2x.png);
		background-size:388px 173px;
		}
	#header .translator .logo img{display:none;}
	#header .translator .job_title{
		font-size:0.938em;
		line-height:115%;
		margin:0;
		top:56px;
		}
	#menu{
		background:none;
		-webkit-transition: none;
		-moz-transition: none;
		-ms-transition: none;
		-o-transition: none;
		transition: none;
		font-size:0.938em;
		height:175px;
		line-height:120%;
		padding:0;
		position:absolute;
		top:112px;
		width:auto;
		z-index:10;
		}
	#header .translator .job_title,
	#menu{left:65.5%;}
	#menu ul{width:auto;}
	#menu .nav{display:none;}
	#menu li{
		color:#12406f;
		display:block;
		position:relative;
		}
	#menu.open li{margin-bottom:0;}
	#menu li a{color:#12406f;}
	#menu li a:hover{color:#f63f39;}
	#menu li .ext{background-image:url(layout/ico-ext.png);}
	.backgroundsize #menu li .ext{background-image:url(layout/ico-ext-2x.png);}
	#menu .lang{margin-top:1em;}
	#menu .lang a{
		background:#fff;
		left:-10px;
		padding:0 10px;
		position:relative;
		}
	#header .line{
		border-bottom: 1px dashed #CBE7E5;
		height:12px;
		}
	#main .wrapper,
	#footer .wrapper{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;  
		padding:0 75px 0 236px;
		position:relative;
		}
	#main .title{
		border:none;
		display:block;
		font-size:1.250em;
		margin-top:15px;
		padding:30px 0 15px 0;
		position:relative;
		z-index:2;
		}
	#main .title.mobile{display:none;}
	#main h4,
	#main p,
	#main ul{
		margin-left:0;
		position:relative;
		z-index:2;
		}
	#main p,
	#main ul{
		font-size:0.938em
	}
	#main.image .photo{
		float:right;
		height:232px;
		margin:0 0 20px 20px;
		position:static;
		width:200px;
		}
	#main h4{padding-top:0;}
	#main .section h4{padding-top:1em;}
	#main.image h4:before,
	#main.image p.float:before{display:none;}
	#main .alert{
		display:block;
		left:-15px;
		position:absolute;
		top:65px;
		z-index:1;
		}
	#main.testimonials .quote{
		background:#f9fafa;
		border:1px dashed #cbe7e5;
		margin:1em 0 1em;
		padding:10px;
		position:relative;
		z-index:2;
		}
	#main.testimonials .quote p{padding:0;}
	#main.testimonials .quote .client{margin:0;}
	#main.testimonials .quote .logo{margin:10px 0;}
}

@media only screen and (min-width: 1023px) {
	body{background:url(layout/bg-main-xl.gif) center 400px no-repeat;}
	#menu .sel:before{
		background:url(layout/ico-menu-sel.png) left top no-repeat;
		content:'';
		height:14px;
		left:-45px;
		position:absolute;
		top:3px;
		width:40px;
	}
	.backgroundsize #menu .sel:before{
		background-image:url(layout/ico-menu-sel-2x.png);
		background-size:40px 14px;
	}
	#main .wrapper,
	#footer .wrapper{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;  
		padding:0 75px 0 260px;
		}
	#header .translator .job_title,
	#menu{left:71.7%;}
	#main .alert{left:0px;}
}