/*@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Playfair+Display);*/

/*reset*/
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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form,label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; text-decoration: none; font-weight: normal; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;  color:rgb(51, 51, 51); font-family: 'Open Sans', sans-serif;}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
::-moz-selection { background: #b3001a;color: #fff; text-shadow: none; }
::selection { background: #b3001a;color: #fff; text-shadow: none; }
::-webkit-input-placeholder {color:    #fff;}
:-moz-placeholder {  color:    #fff;}
::-moz-placeholder{color:    #fff;}
:-ms-input-placeholder { color:    #fff;}

/*config*/
h1,h2,h3,h4,h5,h6 {line-height: 1.6em}
h1 {font-size: 23px; }
h2 {font-size: 17px; }
h3 {font-size: 15px; }
h4 {font-size: 12px; }
h5 {font-size: 11px; }
h6 {font-size: 10px; }

p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset,figure { margin-bottom: 20px;}
p {font-family: inherit;font-weight: normal;font-size: 12px;line-height: 2em;margin-bottom: 20px;}
li{list-style: none; }
li,a {font-size:12px; line-height: 1.8em;}
.both:after { content: ""; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.colorine {color:inherit;}
.both { zoom: 1; }
.left { float: left; }
.right { float: right; }
.indent { text-indent: -99999px; display: block; }
.none {display: none;}
.block {display: block;}
.inline {display:inline;}
.inline-block {display:inline-block;}
.relative {position: relative;}
.fixed {position: fixed;}
.absolute {position: absolute;}
.static {position: static;}
.ease {-moz-transition: all .5s linear; -webkit-transition: all .3s ease; -o-transition: all .3s linear; -ms-transition: all .3s linear; transition: all 0.3s ease; }
.strong, strong {font-weight: 700;}
.overflow {overflow: hidden;}
.overflow-x{overflow-x:hidden}
.italic {font-style: italic;}
.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}
.text-justify {text-align: justify;}
.uppercase {text-transform: uppercase;}
.grayscale {filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */filter: gray; /* IE6-9 */-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}
.lh0{line-height: 0;}
.lh12{line-height: 1.2em;}
.lh16{line-height: 1.6em;}
.lh100{line-height: 100%;}
.top-left-zero {top: 0px; left: 0px;}
.top-right-zero {top: 0px; right: 0px;}
.zindex {z-index: 1;}
.zindex2 {z-index: 2;}
.zindex3 {z-index: 3;}
.inline-block {display: inline-block;}
.cover {-moz-background-size: cover;-webkit-background-size: cover;-o-background-size: cover;background-size: cover; background-position: center center }
.no-repeat {background-repeat: no-repeat}
.cposition{background-position:center;}
.bposition{background-position:bottom;}
.lposition{background-position:left;}
.rposition{background-position:right;}
.tposition{background-position:top;}
.attach-fix {background-attachment:fixed;}
.opacity0 {opacity: 0;}
.opacity05 {opacity: 0.5;}

.ellipsis {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.pointer {cursor:pointer}
.spacing {letter-spacing:4px;}
.spacing2 {letter-spacing:2px;}
.spacing1 {letter-spacing:1px;}

.mc {margin: 0px auto; margin-top: 0; margin-bottom: 0;}
.mb0 {margin-bottom:0;}
.mb5 {margin-bottom:5px;}
.mb10 {margin-bottom:10px;}
.mt5 {margin-top:5px;}
.mr10 {margin-right:10px;}
.mr60 {margin-right:60px;}
.mb10 {margin-bottom:10px;}
.mb20 {margin-bottom:20px;}
.pt10 {padding-top:10px;}
.pt80 {padding-top:80px;}
.pt50 {padding-top:50px;}
.pt100 {padding-top:100px;}
.pb100 {padding-bottom:100px;}
.pt120 {padding-top:120px;}
.pt240 {padding-top:240px;}

.l0 {left:0px}
.t25 {top:25px}
.r25 {right:25px}
.b25 {bottom:25px}
.l25 {left:25px}
.l60 {left:60px}
.t100 {top:100px}

.width {width: 1200px;}
.width2 {width:800px}
.width3 {width:360px}
.width100 {width: 100%;}
.width60 {width:60px;}
.height100 {height:100%;}
.height560 {height:560px;}
.height60 {height:60px;}

.btop {border-top:1px solid; border-color:rgb(208, 208, 208);}
.bfull {border:4px solid; border-color:rgb(74, 74, 74); padding: 15px 0;}

/*colores*/
.gray {color:rgb(51, 51, 51);}
.bg-gray {background-color:#81d9cf;}
.white {color:rgb(255, 255, 255);}
.bg-white {background-color:rgb(255, 255, 255);}
.border-white {color:rgb(255, 255, 255);}

/*fonts*/
.ft {font-family: 'futuraextendedregular'; }
.pf {font-family: 'Playfair Display', serif;}
.os {font-family: 'Open Sans', sans-serif;}

/*css*/
#main {min-width:380px;}
#border {z-index:999999999; position:relative}
#border div { position: fixed; background: #81d9cf; z-index: 10; }
#border div.b-bottom { bottom: 0; height: 13px; width: 100%; }
#border div.b-top { top: 0; height: 13px; width: 100%; }
#border div.b-right { right: 0; width: 13px; height: 100%; }
#border div.b-left { left: 0; width: 13px; height: 100%; }
.preload {opacity:0;}
.h-preload {position: fixed; top: 50%; margin-top: -120px;  }
.fondo-g {background:#111; z-index: 9;}
.sideRight {left:260px;}
#header {z-index:999}
html.ff2 #header {transition: all .3s linear;}
#sidebar {width:260px}
#menu .white.ease.opacity05 { display: block;}
#menu a:hover {opacity:1}
#logo div .linea {content:'';margin-right: 10px; width:0%; display: block;height: 1px;background-color: #b5b5b5;position: relative;top: 10px;}
#logo .palabra { background: white; position: relative; margin: 0 7px; padding: 0 5px; }
#logo-content {z-index:9999; text-align:center; padding-top:100px}
.proyecto {width:400px;}
.proyecto ul li a { font: inherit; color: inherit; }
.pf.lh12.colorine {  margin-bottom: 15px; }
.proyecto .pro:hover {}
.proyecto .fondo { opacity:0;}
.proyecto .pro .desc {top:-125px; opacity:0;}
.proyecto .pro .ver {bottom:-125px; opacity:0;}
.proyecto .pro:hover .fondo {opacity:1;}
.proyecto .pro:hover .desc {top:25px;opacity:1;}
.proyecto .pro:hover .ver {bottom:25px; opacity:1;}
.ver .ft { font-size: 9px;}
#single ul li.mt5 h6 a{font-size:10px}
#single li.btop {padding:6px 0}
.navi a {font-size:10px}

.p1{color: #999;font-size: 16px;margin-bottom: 0px}
.h1{font-size: 16px;color: #333;margin-bottom: 10px;font-weight: bold;}
.h1 p{font-size: 12px}
.about_left i{display: inline-block;position: absolute;margin-top: 20px;}
html.iphone video, html.ipad video{ display:none;}
                   
@media screen and (max-width: 1280px){
body {min-width: 1150px;}                    
.width {width: 1050px;}
.width2 {width: 645px;}
.proyecto {width: 350px;}
#page .width3 {width:300px;}
#page .mr60 {margin-right:75px}                    
}

@media screen and (max-width: 1140px){
body {min-width: 950px;}
.width {width: 900px;}
.width2 {width: 500px;}
.proyecto  {width: 450px;}

#page .width3 {width:260px;}
#page .mr60 {margin-right:60px}                                     
}

@media screen and (max-width: 1000px){
body {min-width: 800px;}
h1 {width: 380px; margin: 0 auto;}
.proyecto  {width: 350px;}
.width  {width: 700px;} 
.width2, .width3 {width: 100%;} 
 #page .width3 {width:100%;}                                                   
.width3 {margin-top:40px}
.width3 .absolute {position:static}
.pt50 { padding-top: 0px; }                                                                                                     
}

@media screen and (max-width: 800px){
body {min-width: 700px;}
.proyecto  {width: 300px;}
.width  {width: 600px;}                                                                       
}
                                                         
@media screen and (max-width: 700px){
body {min-width: 600px;}
.proyecto  {width: 100%;}
.width  {width: 500px;}                                                                                  
}

@media screen and (max-width: 600px){
body {min-width: 500px;}
h1{width: 212px; margin: 0 auto;} 
.width  {width: 400px;}                                                                                                  
}                                                                                                                                           
                                                                                                
@media screen and (max-width: 500px){
body {min-width: 320px;}
.width  {width: 310px;}                  
}