/*
* 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.
*
* Detailed information about this CSS: h5bp.com/css
*
* ==|== normalize ==========================================================
*/
/* =============================================================================
HTML5 display definitions
========================================================================== */
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; }
/* =============================================================================
Base
========================================================================== */
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/
/*MICRO RESET*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent; }
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 { font-size: 1em; }
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
*/
::-moz-selection { background: #000; color: #fff; text-shadow: none; }
::selection { background: #000; color: #fff; text-shadow: none; }
/* =============================================================================
Links
========================================================================== */
a { color: #00e; text-decoration:none;}
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
Typography
========================================================================== */
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; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
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%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
Lists
========================================================================== */
/* 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; }
li { list-style:none;}
/* =============================================================================
Embedded content
========================================================================== */
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
*/
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
/*
* Correct overflow not hidden in IE9
*/
svg:not(:root) { overflow: hidden; }
/* =============================================================================
Figures
========================================================================== */
figure { margin: 0; }
/* =============================================================================
Forms
========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; float:left; clear:both; text-transform:uppercase; margin: 10px 0}
/*
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
*/
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
/*
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
*/
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
/*
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
*/
button, input { line-height: normal;}
/*
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
* 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
*/
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; float:left; clear:both; }
/*1
* Re-set default cursor for disabled elements
*/
button[disabled], input[disabled] { cursor: default; }
/*
* Consistent box sizing and appearance
*/
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; }
/*
* Remove inner padding and border in FF3/4: h5bp.com/l
*/
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
/*
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
*/
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid { float:left; clear:both }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
Tables
========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* =============================================================================
Chrome Frame Prompt
========================================================================== */
.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
/* ==|== primary styles =====================================================
Author: Majito
========================================================================== */
body { font-family:Arial, sans-serif }
#wrap { width:100%; margin: 0; }
#content { min-width: 859px; position:absolute; top: 30px; /*left: 30px; width:1200px;*/ left: 2.5%; width: 95%; float:left}
#nav { float: left; width: 100%; }
#logo { float:left; background: url(../images/thgw.png); width: 172px; height: 46px; }
.ml-5 { float:left; margin-left: 5px; }
/* ==|== botonera*/
#botonera { margin:28px 0 0 0; float:left; font-size:12px; text-transform:uppercase;}
#botonera ul { height:20px; list-style:none; margin:0; padding:0;}
#botonera li { float:left; margin: 0 0 0 30px; padding:0px; background:#000002; width: 172px;}
#botonera li.social { float:left; margin: 0 0 0 30px; padding:0px; background:none; width: 20px!important;}
#botonera li.social a { text-indent: 100%; white-space: nowrap; overflow: hidden; padding:0!important}
#botonera li.social a:hover { opacity:0.5;}
.bfacebook a, .bfacebook a:hover { background: url("../images/b-social.png") 0 0 no-repeat !important }
.btwitter a, .btwitter a:hover { background: url("../images/b-social.png")0 -20px no-repeat !important }
#botonera li a{
background: url(../images/bot-li.jpg) top left no-repeat;
color:#fff;
display:block;
font-weight:bold;
line-height:20px;
margin:0px;
padding:0px 25px;
text-decoration:none;}
#botonera li a:hover, #botonera ul li:hover a{
background: #000 url('../images/hover.jpg') bottom left no-repeat;
color:#FFFFFF;
text-decoration:none;}
#botonera li ul{
background:#000002;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:172px;
z-index:200;}
#botonera li:hover ul{display:block;}
#botonera li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:172px;
border-top: 1px solid #393c43;
font-size:11px;}
#botonera li:hover li a { background:none; }
#botonera li ul a { display:block; height:20px; font-style:normal; margin:0px; padding:0px 10px 0px 5px; text-align:left;}
#botonera li ul a:hover,
#botonera li ul li:hover a { background:#111; border:0px; color:#FCBA30; text-decoration:none;}
.ulprojects li { font-size:10px !important;}
/* ==|== fullimage*/
.tf_bg { width:100%; height:100%; position:fixed; top:0px; left:0px; z-index:-10;}
.tf_bg img{
position:absolute;
top:0px; /*-482px; -(imgh/2 - wh/2) */
left:0px; /* calculate a negative value to center horizontally */
width:100%; /* windowwidth plus negative value of left */
/*height:1650px; /* windowheight plus negative value of top */
z-index: 1;
display:none;}
.tf_loading { position:fixed; top:50%; left:50%; margin:-30px 0px 0px -30px; width:60px; height:60px; background:#fff url(../images/loader.gif) no-repeat center center; z-index:999; opacity:0.7;}
.tf_next, .tf_prev { float:left; width:200px; height:500px; position:fixed; /position:absolute /*ie hack*/; top:50%; cursor:pointer; opacity:0.5; margin: -250px 0 0 0; }
.tf_next { background:url(../images/forward.png) no-repeat 120px center; right:0;}
.tf_prev { background:url(../images/back.png) no-repeat 40px center; left:0;}
.tf_next:hover, .tf_prev:hover { opacity:0.2; }
/* ==|== txt*/
.txt { position:relative; float:left; background: #000; font-size:11px; color:#FFF; padding:30px 20px; top: 100px; }
.cerrar { font-family:Arial; text-align:center; float: right; position:relative; top:-20px; right:-10px;}
/* ==|== quienes*/
.quienes { width: 334px; margin: 0 0 0 202px; text-align:justify}
/* ==|== prensa/ novedad */
.prensa { width: 334px; margin: 0 0 0 202px; color:#858585;}
.prensascroll { max-height: 400px; overflow: auto;}
.prensascroll .jspDrag { background: #444;}
.prensa h3 { font-size: 12px; margin: 0 0 15px; color:#FFF }
.prensa-art { margin: 0 0 25px;}
.prensa-art h1 { text-transform:uppercase; font-size: 12px; margin: 0 0 20px}
.prensa-art h2 { font-size: 12px; font-weight:bold; margin: 0 0 5px}
.prensain { display:none; position:absolute; left: 377px; top: 0; width: 336px; text-align:justify;}
.prensain .jspDrag { background: #444;}
.prensain h1 { text-transform:uppercase; font-size: 12px; margin: 0 0 20px}
.prensain h2 { font-size: 12px; font-weight:bold; margin: 0 0 10px}
.prensain .texto { max-height: 500px; overflow: auto; }
.prensain img { margin: 0 0 10px; }
.linkin { margin: 5px 0 10px; }
.linkin a { color: #B61F38 }
.linkin a:hover { color: #999 }
.copete { }
.vermas { color: #B61F38; display:inline; margin: 0 0 0 5px; }
.in { width: 380px; margin: 0 0 0 3px;}
/* ==|== formulario*/
.formulario { width: 334px; margin: 0 0 0 202px; color: #858585}
.formulario h1 { color: #B61F38; font-size:14px }
.formulario p { margin: 10px 0; }
.formulario a { color: #FCBA30 }
.formulario input { border:none; background: #1A1A1A; color: #FFF; height: 20px; width: 100%}
.formulario input[type="submit"] { margin: 10px 0; color: #B61F38; background:none; text-transform:uppercase; font-size: 12px; text-align: right; }
.formulario textarea { width: 100%; background: #1A1A1A; border:none; color: #FFF}
ul.error_list { float: left; margin-left: 10px; margin-top: 10px; }
ul.error_list li { color: #b61f38; }
/* ==|== proyectos*/
#projects { float: left; margin: 90px 0 0 0; color: #404040; }
.thumbail { float:left; width:172px; height:132px; margin: 0 30px 30px 0;}
.thumbail a { color: #FFF }
.thumbail a:hover img { opacity: 0.8 }
.thumbail .img { width:172px; height: 132px; overflow:hidden; text-align:center; }
.img img { width:auto; }
.thumbail .titulo { background: #000; font-size: 10px; padding: 2px 0 2px 4px; text-transform: uppercase}
/* ==|== proyecto interior*/
#project { float: left; margin: 50px 0 0 0; color: #404040; width: 100%; min-width: 913px; }
.info { float: left; width:160px; margin: 0 41px 0 0; font-size:12px; line-height:14px }
.info a { color: #000 }
.info a:hover { text-decoration: underline; }
.info .titulo { font-size:14px; margin: 0 0 20px; font-weight:bold; color:#000; text-transform: uppercase}
.plogo { margin: 0 0 40px}
.plogo img { height: auto; }
.info h1 { font-weight:bold; text-transform: uppercase; margin: 10px 0 0 0}
.det { margin: 0 0 5px}
#accordion { margin: 25px 0 0 0}
.more-less { float: left; margin: 0 0 5px; clear:both; }
.more-less h3, .more-less h3 a { font-size: 14px; color: #0f0f0f; width:172px;}
.more-less h3 a:hover { color: #666; text-decoration:none;}
.more-block { font-size:0.9em; margin: 10px 0; text-align:justify; line-height:14px; display:none; width: 162px; height: 200px; overflow: auto;}
.more-block p { width: 148px;}
.servicios { text-transform: uppercase; text-align: left }
/*filtros*/
ul#filter { float: left; font-size: 12px; margin: 0 0 30px; }
ul#filter li { float: left; margin: 0 50px 0 0; font-weight:bold}
ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
ul#filter a { color: #999; text-decoration: none; }
ul#filter li.current a, ul#filter a:hover {color: #333;}
ul#filter li.current a { color: #333; font-weight: bold; }
ul#portfolio { float: left; clear:both; width:100%}
ul#portfolio li { float: left; margin: 0 50px 50px 0; width: 175px; height:135px; }
ul#portfolio li span { width: 175px; height:135px; overflow:hidden; float:left; position:relative; z-index:50}
ul#portfolio img { display: block; margin: 0 auto; width: auto;}
ul#portfolio img a:hover { opacity: 0.8;}
#project-img { float: left; width: 75%; min-width: 667px; min-height:600px}
.share-social { box-shadow: 4px 4px 8px 0 #444444; width: 175px; height: 150px; padding: 10px; position: relative; top: -7px; left: -10px; font-size:11px; }
.socialin { float: left; margin: 5px 0 0 0; position:relative; z-index:60; display: none}
.socialin div { float:left; }
.socialin div a {
background: url("../images/social.png") no-repeat;
display: block;
height: 16px !important;
text-indent: -9999px;
overflow: hidden;
width: 16px !important;
margin: 0 5px 0 0 !important;}
.facebook a { background-position: 0 -16px !important }
.twitter a { background-position: 0 -80px !important }
.pinterest a { background: url("../images/social.png") no-repeat 0 -48px !important }
.email a { background-position: 0 0 !important; }
.addthis_32x32_style .at15t_print { background-position: 0 -64px !important; }
.addthis_32x32_style .at15t_more { background-position: 0 -32px !important; }
/* ==|== modal*/
.backdrop { position:fixed; top:0; left:0px; width:100%; height:100%; background:#fff; display:none; z-index:50; }
.box { position:absolute; width:992px; height:608px; top:125px; left:200px; background:#000; z-index:51; -moz-box-shadow:0px 0px 5px #444444; -webkit-box-shadow:0px 0px 5px #444444; display:none; box-shadow: 4px 4px 8px 0 #444444; z-index:80; }
.close, .fullscreen { float:right; clear:both; position: relative; width: 16px; height:16px; cursor:pointer; z-index: 80; text-indent: -9999px; top:10px; right:10px; margin: 0 0 10px }
.close { background: url("../images/close.png");}
.fullscreen { background: url("../images/fullscreen.png");}
.carousel { position:relative; height:100%; }
.carousel ul { position:absolute; overflow:hidden; margin:0; padding:0; list-style:none; position: relative; width:100%; height:100%; left:58px; }
.no-js .carousel ul { position:static;}
.carousel .mask { position:relative; overflow:hidden; height:100%; }
.carousel ul li { float:left; width: 876px; height:100%; /*height:608px;*/ color:#fff; text-align:center; opacity:0.3; position:relative; overflow:hidden; }
.carousel ul li.current { opacity:1; background:black }
.carousel ul li img { height:100%; /*height:608px;*/ }
.carousel .prev, .carousel .next { width:58px; height:132px; position: relative; top: -60%; }
.carousel .prev { background: url("../images/back2.png") no-repeat center; float: left; }
.carousel .next { background: url("../images/forward2.png") no-repeat center; left: 0; float: right; }
a:hover img { opacity: 0.8; }
a.next:hover, a.prev:hover, .close a:hover, .fullscreen a:hover { opacity: 0.6; }
.carousel .disabled { opacity: 0.1; cursor:default; }d
/** my carousel 2 **/
#carrusel .mask { width:992px; /*height:608px !important */}
/*fullscreen box*/
.fullbox { box-shadow: none; left:0; top: 0 !important; width:100%; height:100%; position: fixed;}
.fullbox .carousel ul { min-width: 100%; }
/* ==|== CHROME HACK ====================================================== */
/*@media screen and (-webkit-min-device-pixel-ratio:0) {
.acavaelhack { }
}*/
/* ==|== media queries ======================================================
EXAMPLE Media Query for Responsive Design.
This example overrides the primary ('mobile first') styles
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
/* ==|== non-semantic helper classes ========================================
Please define your styles before this section.
========================================================================== */
/* For image replacement */
.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; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@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; }
}