.contacto span, .contacto h3@charset "UTF-8";
/* =============================================================================
   HTML5 Boilerplate CSS: h5bp.com/css
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em;}

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

a { color: #fff; }
a:visited { color: #fff; }
a:hover { color: #fff; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

svg:not(:root) { overflow: hidden; }

figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }



/* ===== Primary Styles ========================================================
   Author: Mario Muñoz DesignPlus.co
   ========================================================================== */

/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------
:: Shared Styles
:: index
:: que hacemos
:: proyectos
:: contacto
:: Reveal Modals-foundation
*/


/* -----------------------------------------
   Shared Styles
----------------------------------------- */

body{
		background-color:#e7e7e7;
	}
ul, ol {
        margin: 1em 0;
        padding: 0 0 0 0px;
    }
	
header, footer {
		height:110px;
		background-image:url(../img/layout/background.jpg);
		margin-bottom:10px;
	}
header h1{
	height:0px;
	text-indent:-9999px;
	text-height:0px;
	margin:0px;	
}
header .logo{
	margin-top:14px;
	height:76px;
	width:220px;
}
header .slogan{
	margin-top:14px;
	float:right;
}	
footer{
	height:100px;
	display:none;
	margin-top:20px;
}
footer nav{
	letter-spacing:-0.01em;
}
footer nav a{
	font-size:11px;
}

footer nav li{
	margin-top:0px;
	margin-bottom:0px;
	line-height:100%;
}

footer nav ul{
	margin-top:20px;
}

h6{
	color:#FFF;
	font-weight:normal;
	text-align:right;
	font-size:10px;
}
h6 a{
	color:#FFF;
	font-size:13px;
	margin-top:5px;
	display:block;
}
h6 a:hover{
	color:#FFF
}
h6 img{
	margin-top:-7px;
}
	
	
h2, #contacto-titulo{
		font-family: 'Century Gothic' ,'Lato', 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, 'Lucida Grande', sans-serif;
		font-size:20px;
		color:#444;
		margin-top:8px;
}	
a{text-decoration:none; border:0px; color:#444;}
h1 a, h2 a{ color:#444 !important;}
p, .contacto span{
		font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif;
		font-weight:200;
		font-size:15px;
		color:#444;
	}
.contenedor-header{
		height:100%;
		display: table;
    	position: relative;
	}
.contenedor-foooter{
		display: table;
    	position: relative;
		margin-bottom:-10px;
	}
.contenido{
		display: table-cell;
    	vertical-align: middle;
    	/*position:absolute;
    	top: 50%;*/
	}
.interior{
		#position:relative;
    	#top:-50%;
		width:960px;
	}
.menu{
		float:right;
		margin: 12px 70px 0px 0px;
		border-left: 2px solid #ffcd3d;
		padding: 0 0 0 40px;
		list-style:none;
	}	

	
		/* efecto del menu cambio color header */	
.menu li a{		
		font-family: 'Century Gothic' ,'Lato', 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, 'Lucida Grande', sans-serif;
		font-size:14px;
		color:#fff;
		font-weight:400;
		text-decoration:none;
	}	


.menu li{margin: 8px 0px 8px 0px;}		

a span.two{
		color:#ffbc3d;
		//cursor:pointer;
	}
	
	/* efecto del menu cambio color footer */	
.menu-footer li a, h6, h6 a{		
		font-family: 'Century Gothic' ,'Lato', 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, 'Lucida Grande', sans-serif;
		font-size:11px;
		color:#fff;
		font-weight:400;
		text-decoration:none;
	}
	
.menu-footer ul{ padding: 0px; margin:0px;}			
.menu-footer{ width:123px; list-style:none;}
a span.two{
		color:#ffbc3d;
		//cursor:pointer;
	}	
	
/*creditos designplus*/

h6{
		float:right;
		margin: 30px 0px 0px 0px;
		text-align:right;
		font-size:10px;
	}
h6 img{ margin-top:-5px;}	
.interior div{
		float:left;
		position:relative;
		margin-top:10px;
	}
	
.content_container{
	display: inline;
	float:left;
}
.content_container{
	width:720px;
}
	
/*seccion de contacto*/
.contenido_contacto{
		float:right;
		margin-bottom:20px;
	}
.contacto{
		width:222px;
		height:auto;
		background-color:#fff;
		border:1px solid #abadaf;
		border-radius:4px;
		margin-top:10px;
		alignment-adjust:middle;
	}
.contenido_contacto h2{
		font-size:18px;
		margin-top:6px !important;
	}

form, .mail_redessociales{
		font-family:'Helvetica Neue', HelveticaNeue, Helvetica, Arial, 'Lucida Grande', sans-serif;
		font-size:15px;
		width:186px;
		display:block;
		margin:10px auto;
	}
.mail_redessociales img{margin-top:10px;}	
form input, form textarea{ margin: 3px 0px 10px 0px;}	
form label{
		margin:15px 0px 5px 20px;
		color:#777;
		text-align:left;
		font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif;
		font-weight:200;
	}
.contacto span, .contacto h3 {
		color:#777;
		margin-left:15px;
		font-family:'Century Gothic', Lato, 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, 'Lucida Grande', sans-serif;
		font-size:16px;
	}
.contacto h3{
		width:190px;
		font-size:23px;
	}
			
.mail_redessociales{
		text-align:center;
	}			
			/* foundation button */
				/* modificado colores Kport */
			.white.button:hover, .white.button:focus {
						background-color: #f9c655;
					}
			.button:hover, .button:focus {
						background-color: #0192DD;
						color: white;
					}
			.white.button {
						background-color: #ffb83d;
						color: #333;
					}
			.small.button {
						font-size: 11px;
						padding: 5px 20px 8px;
						width: 85px;
						height:29px;
					}
					
			.medium.button {
						color:#FFF;
						font-size: 11px;
						padding: 7px 15px 7px;
						width: 140px;
						height:12px;
						text-align:center;
					}		
			.button.radius {
						-moz-border-radius: 3px;
						-webkit-border-radius: 3px;
						border-radius: 3px;
						
						behavior:url(_assets/css/PIE-1/PIE.htc);
					}
			.button {
						background: #00A6FC;
						display: inline-block;
						text-align: center;
						text-decoration: none;
						font-weight: bold;
						line-height: 1;
						font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif;
						position: relative;
						cursor: pointer;
						border: none;
						outline: none;
						margin: 0;
					}

				
	/*final de foundation*/
	
input, textarea{width:180px;}	
textarea{ 
		height:150px;
		margin-bottom:18px;
	}
.button-separation{ margin:0px 2px}

.contacto p a, .area-contacto p a{
		color:#3f98e4;
		font-size:14px;
	}	

.clearBoth { clear:both; }

	
.box_rgba {
  background-color: transparent;
  background-color: rgba(255, 255, 255, 0.8);  
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF); 
  zoom: 1;
}	

div.alert-box.alert {
	background-color: #c60f13;
	color: #fff;
	text-shadow: 0 -1px 
	rgba(0, 0, 0, 0.3);
}

div.alert-box {
	display: block;
	padding: 6px 7px 7px;
	font-size: 12px;
	color: white;
	background-color: #2ba6cb;
	border: 1px solid 
	rgba(0, 0, 0, 0.1);
	margin-bottom: 12px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	text-shadow: 0 -1px 
	rgba(0, 0, 0, 0.3);
	position: relative;
}
div.alert-box p{
        font-size: 12px;
	color:white;
	margin-top:0;
	margin-bottom:0;
}
.alert-hr{
	border:none;
}

/* -----------------------------------------
   index
----------------------------------------- */
.bg-lines, .divider{ 
			background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAN0lEQVQImXXJMQ4AEBAAwXWdiP8/QsTjRJRUxHGmHZdyGRhi8MgvautvrgB0nqHyjp1WAMgvACaBcRU1JsHUVAAAAABJRU5ErkJggg==);
			width:100%;
			margin-bottom:10px;
	}
#slide-show{
		height:450px;
		background-color:#fff;
	}
.divider{
		height:10px;
		margin:0px 0px 10px 0px;
	}
		

.container_24 h2 { margin:0px; padding:0px} 

.area-contacto, .polaroid{
		width:222px;
		height:145px;
		background-color:#fff;
		border:1px solid #abadaf;
		margin-top:10px;
		
		border-radius:4px;
	}
	
.img-polaroid {
		width:200px;
		margin:10px 10px 0px 10px;
	}
	
.description{
		display:none;
		height:70px;
		width:193px;
		padding: 40px 0px 0px 7px;
		margin:-110px 10px 0px 10px; 
		color:#777;
		font-family:'Helvetica Neue', HelveticaNeue, Helvetica, Arial, 'Lucida Grande', sans-serif;
		font-size:14px;
		position:absolute;
		z-index:1;
	}
.description h3, .description h4{ font-size:14px; color:#777;}	
.description h3{
	margin-top:0px;
}
.description h4{
	margin-bottom:0px;
	font-weight:normal;
}	
.divider-projects {
		float:left;
		width:530px;
		height:5px;
		margin-top:22px;
		margin-bottom:25px;
		background-image:url(../img/layout/background-divider-projects.png);
		background-position:0px 7px;
	}	
.divider-selector a{
		float:left;
		font-family:'Helvetica Neue', HelveticaNeue, Helvetica, Arial, 'Lucida Grande', sans-serif;
		font-size:14px;
		color:#abadaf;
		margin-left:5px;
		margin-top:20px;
	}

#separador{ height:100px;}			
	
div.divider-selector:hover .divider-projects{background-position:0px 0px;}	

	/*slide show	*/	
			
			/* HEADER */ 
			.headerimg {
					background-repeat: no-repeat;
					width:960px; 
					height:450px; 
					position:absolute;
				}
                                

			/* HEADER TEXT */
			#headertxt { 
					width:500px; 
					/*margin:0 auto;*/ 
					/*clear:both; */
					position:relative;
					/*top:260px;*/
					float:left;
					margin:250px 0px 0px 0px;
					display:block;
				}
                                
                                #linkimg1, #linkimg2 {
                                        width:100%;
                                        height:100%;
                                        display:block;
                                        text-indent:-9999px;
                                }  
                                  
			#firstline, .pictured{
					background-color:#DC1C24;
					color:#fff; 
					font-size:30px; 
					padding:10px 15px; 
					float:left; 
					display:block;
					margin:20px 0px 0px 20px;
					font-weight:200;
					font-family:'Helvetica Neue', HelveticaNeue, Helvetica, Arial, 'Lucida Grande', sans-serif; 
				}
			#secondline, .pictured, .pictured a {  
					color:#777; 
					text-decoration:none; 
					font-size:20px; 
					float:left; 
					display:block; 
					clear:both;
					background-color:#fff;
				}
			
			.pictured {  
					font-size:12px; 
					text-transform:uppercase; 
					float:left; 
					display:block; 
					clear:both; 
					margin-top:0px;
				}
				
			.pictured a { 
					font-size:13px;  
					letter-spacing:0; 
					text-transform:none; 
					text-decoration:none;
				}
			
			/* CONTROLS */
			.btn { 
					height:27px; 
					width:17px; 
					float:left;
					cursor:pointer;
					margin-right:8px;
				}
			#back { 
					background-image:url(../img/layout/controlers.png);
					background-position:0px 0px; 
				}
			#next, .marker { 
					background-image:url(../img/layout/controlers.png);
					background-position:-26px 0px;
				}
			.marker{cursor:default; !important;}	
			.marker{ margin-top:20px;}	
			#back:hover{ background-position:0px -30px;}
			#next:hover{ background-position:-26px -30px;}	
			
			/* HEADER HAVIGATION */
			#headernav-outer { position:relative; top:400px; margin:0 auto; width:960px; }
			#headernav { padding-left:864px; }
			
						
				
/* -----------------------------------------
		   que_hacemos
----------------------------------------- */
		
h1, h2, h3, h4, h5{
		font-family: 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, 'Lucida Grande', sans-serif;
		font-size:25px;
		color:#444;
		margin-top:0px;
	}		
		
/* -----------------------------------------
		   proyectos
----------------------------------------- */		
		
		
.titulo_proyectos, .descripcion_proyecto{
		font-family: HelveticaNeue, Helvetica, Arial, 'Lucida Grande', sans-serif;
		font-size:20px;
		color:#444;
		margin-top:13px;
		font-weight:200;
	}
.descripcion_proyecto{
		font-size:15px;
	}
.seleccion{
		width:20px;
		height:20px;
		border-radius:2px;
		background-image:url(../img/layout/background-selector.png);
		background-position:0px 20px;
	}
.seleccion_container{
		margin: -50px auto 30px;
		display:table;
		position:relative;
		z-index:10;	
	}
		/*slide show proyecctos*/	
		#bigPic{ 
				width:675px;
				height:350px;
				padding:1px; 
				margin-bottom:10px;
			} 
		#bigPic img{ 
				position:absolute; 
				display:none;
			}
		ul#thumbs li.active .seleccion, .seleccion:hover{
				background-position:0px 0px;
			}
		ul#thumbs, ul#thumbs li{
				margin:0 auto;
				padding:0;
				list-style:none;
			}
		ul#thumbs li{ 
				float:left; 
				margin-right:4px;
				margin-left: 4px; 
				margin-bottom:5px; 	 
				padding:3px; 
				cursor:pointer; 
			}
		
#myModal h1{
		margin-top:0px;
	}
h2 span{
		font-size:15px;
		font-weight:normal;
	}
h2 span:hover{
		color:#fab948;
	}
.title_cat{
		display:inline;
		float:left;
	}						

		/*estilos carrousel*/

			#wrapper{
					width:100%;
					background-color:#aaacae;
					margin-top:40px;
					margin-bottom:40px;
					height: 200px;
					position:absolute;
					left: 0;
				}
	
			.caroufredsel_wrapper {
				margin-top: -20px !important;
				padding-top: 0px !important;
				padding-bottom: 0px !important;
			}
			#carousel div {
				float: left;
				width: 290px;
				height: 150px;
			}
			#carousel img {
				border: none;
				position: relative;
				/*box-shadow: 0 0 10px #000;*/
			}
			#navigation_carrousel {
				width: 300px;
				margin-left: -202px;
				position: absolute;
				bottom: 10px;
				left: 50%;
			}
			#navigation_carrousel #next {
				float: right;
			}
			#navigation_carrousel #back, #navigation_carrousel #next {
				text-decoration: none;
				color: #b98;
			}
			#wrapper img-polaroid{ margin:0px;}			


/*	--------------------------------------------------
	contacto
	-------------------------------------------------- */

.area-contacto { 
			height:auto;
			padding-top:20px;
			padding-bottom:30px;
		}

.area-contacto input{ 
			display:inline-block; 
			float:right;
		}

.area-contacto textarea{ 
			height:90px;
			width:265px;
		}
		
.grid_7 #buttonForModal{
			margin-right:0px; 
			margin-left:10px;
		}				
		
.area-contacto p{ color:#777}

.area-contacto a p{color:#3f98e4;}

.area-contacto form{margin:10px 0px; display:inline;}

.area-contacto h3{margin-top:20px;}

/*	--------------------------------------------------
	Reveal Modals-foundation
	-------------------------------------------------- */
	.reveal-modal-bg { 
		position: fixed; 
		height: 1000%;
		width: 100%;
		background-color: transparent;
  		background-color: rgba(0,0,0,0.8);  
       	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000); 
        zoom: 1;
		z-index: 100;
		display: none;
		top: 0;
		left: 0; 
		}
		
	
	
	
	.reveal-modal {
		visibility: hidden;
		top: 100px; 
		left: 50%;
		margin-left: -300px;
		width: 400px;
		position: absolute;
		z-index: 101;
		padding: 30px 40px 34px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 4px;
		border:1px solid #abadaf;
		-moz-box-shadow: 0 0 10px rgba(0,0,0,0.4);
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
		-box-shadow: 0 0 10px rgba(0,0,0,0.4);
		background-color:#fff;
		
		behavior:url(_assets/css/PIE-1/PIE.htc);
		}
		
	.reveal-modal.small 		{ width: 200px; margin-left: -140px;}
	.reveal-modal.medium 		{ width: 400px; margin-left: -240px;}
	.reveal-modal.large 		{ width: 600px; margin-left: -340px;}
	.reveal-modal.xlarge 		{ width: 800px; margin-left: -440px;}
	
	.reveal-modal .close-reveal-modal {
		font-size: 22px;
		line-height: .5;
		position: absolute;
		top: 8px;
		right: 11px;
		color: #aaa;
		text-shadow: 0 -1px 1px rbga(0,0,0,.6);
		font-weight: bold;
		cursor: pointer;
		} 
	/*
		
	NOTES
	
	Close button entity is ×
	
	Example markup
	
	<div id="myModal" class="reveal-modal">
		<h2>Awesome. I have it.</h2>
		<p class="lead">Your couch.  I it's mine.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam. </p>
		<a class="close-reveal-modal">&#215;</a>
	</div>
	
	*/



		
		/* =============================================================================
		   Media Queries
		   ========================================================================== */
		
		@media only screen and (min-width: 35em) {
			/* Style adjustments for viewports that meet the condition */
		}
		@media (max-device-width: 1024px) and (orientation: landscape) {
			 .phone { color:#0F0;}
		}
		@media (max-device-width: 768px) and (orientation: portrait) {
			
			 .phone { color: #F00;}
		}
		/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.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: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* =============================================================================
   Print Styles
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  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: ""; }  /* Don't show links for images, or javascript/internal links */
  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; }
}