@import url("../webfonts/aaargh_normal_macroman/stylesheet.css");
body {
  /*font-family: 'aaarghnormal';*/
  font-family: tahoma;
  font-size: 12px;
  background: #dddcdc  ;

}

body.portada{

  background: #58504d url(../images/bck.jpg) no-repeat center center  ;
}
 
.container {
   
   /* background-color: #ebebeb;*/
  }


a , header , .header , .container , .menu , .fono, .social, a.tip, .toolip {
  text-decoration: none;
  line-height: inherit;
  transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  -webkit-transition: all 0.4s ease-in-out 0s;
}
a:focus {
  outline: none;
}
header{

  width: 100%;
  z-index: 100;
  position: fixed;
}

.pt{
  padding-top: 15px;
}
.pl{
  padding-left: 15px;
}
.pr{
  padding-right: 15px;
}
.pb{
 padding-bottom : 15px;
}
.pt-portada{
  padding-top: 105px;
}
h1.portada{
  font-size: 55px;
  color: #F9F9F9 ;
}


.header {
  position: relative;
  background-color: white;
  height: 148px;
}
.header .logo,
.header .logo:visited {
  text-indent: -999em;
  cursor: pointer;
  background: url(../images/logo.png) no-repeat;
  display: block;
  height: 148px;
  width: 134px;
  position: absolute;
  top: 10px;
  left: 25px;
}
/*-----------header fixed -------*/
.fixed-header {
  
  height: 90px;
}
.fixed-header > a.logo {
  background-position: -160px -45px;
  height: 80px;
  width: 80px;
}

.fixed-header > .menu {
  top: 25px;
}
.fixed-header > .social {
  top: 2px;
}
.fixed-header > .fono {
  top: 40px;
}
.franja {
  background-color: black;
  height: 14px;
  max-width: 1096px;
}
.espaciador-height {

 /* height: 250px;*/
}
/* Bloque Contenedor de interior*/
.blok-container{

  background: #FFF;
  margin-top: 100px;
  margin-bottom: 20px;
  padding-left: 38px;
  padding-right: 38px;

}
/*-----------MENU--------------*/
.menu {
  width: 600px;
  top: 88px;
  left: 220px;
  position: absolute;
}
.nav > li > a {
  font-size: 18px;
}

/*--------SOCIAL -BUTTONS ---*/
.social {
  width: 180px;
  position: absolute;
  right: 10px;
  top:10px;
}
ul.social {
  padding: 0;
  display: block;
}
ul.social li {
  display: inline-block;
  list-style-type: none;
}
ul.social li. {
  display: inline-block;
  list-style-type: none;
}
ul.social li a {
  width: 34px;
  height: 34px;
  display: block;
  background: #000000;
  border-radius: 50%;
  -webkit-border-radius: 50%;
}
ul.social li a:hover {
  width: 34px;
  height: 34px;
  display: block;
  background: #CECFC7; 
}
i.fb{
  display: inline-block;
  width: 32px;
  height: 32px;
  text-align: center;
  background: url(../images/social.png) no-repeat;

}
i.tw{
  display: inline-block;
  width: 32px;
  height: 32px;
  text-align: center;
  background: url(../images/social.png) no-repeat;
  background-position: -70px 0;
}

i.go{
  display: inline-block;
  width: 32px;
  height: 32px;
  text-align: center;
  background: url(../images/social.png) no-repeat;
  background-position: -34px 0;
}

i.yo{
  display: inline-block;
  width: 32px;
  height: 32px;
  text-align: center;
  background: url(../images/social.png) no-repeat;
  background-position: -107px 0;
}
/*------------FONO ----------*/
.fono{

 width: 230px;
position: absolute;
right: 40px;
top: 80px;
font-size: 30px;
background: url(../images/fono.png) no-repeat;
padding-left: 44px;
}

img.img-centra{

  margin: auto;
}

/* -------------------------FOOTER-----------------------*/

.footer{
  background: #000;
  color: #FFF;
  padding: 20px;
  font-size: 13px;
}
.footer-seccion{

  width: 250px;
  float: left;
  padding: 0 10px 10px 0;
  margin-top:10px;
}
.separador {
   border-right: 1px solid #82866F;
  margin-right: 15px;
}
/*
------------------------------------------------------------
    Address
------------------------------------------------------------
*/
address {
  border-bottom:1px #e7e7e7 solid;
  padding-bottom:18px;
  margin:20px 0;
}
address:first-child {
  border-bottom:1px #e7e7e7 solid;
}
address:last-child {
  border-bottom:none;
}
ul.listcontact {
  margin-left: 10px;
  list-style: none;
}
ul.listcontact li {
  padding-top: 8px;
  padding-left: 40px;
  margin-bottom: 8px;
}
ul li.cont-phone {
  background:url(../images/ico-phono.png) no-repeat 0 5px
}
ul li.cont-email {
  background:url(../images/ico-mail.png) no-repeat 0 4px
}
ul li.cont-adress {
  background:url(../images/ico-home.png) no-repeat 0 5px
}

ul li.cont-web {
  background:url(../images/ico-web.png) no-repeat 0 5px
}
/*
/*------------------CONROLES FORM ------------------------------*/
select, textarea , input[type="text"], 
input[type="password"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="date"], input[type="month"], 
input[type="time"], input[type="week"], 
input[type="number"], input[type="email"], 
input[type="url"], input[type="search"], 
input[type="tel"], input[type="color"], 
.uneditable-input {
    display: inline-block;
    height: 30px;
    padding: 4px 6px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 20px;
    color: #555;
    vertical-align: middle;
    /* border-radius: 4px; */
    background-color: #F3F2F2;
}

textarea.form-control{

   background-color: #F3F2F2;
}

.form-horizontal  input[type="text"] ,.form-horizontal textarea {

  width: 200px;

}
.form-horizontal .control-group {
 margin-bottom: 18px; 
padding-bottom: 15px;
/*border-bottom: 1px #EEE solid;*/
}

.form-horizontal .control-label {
float: left;
width: 80px;
padding-top: 20px;
text-align: left;
color: #404040;
font-size: 11px;
/*font-weight: bold;*/
margin-left: 20px;
/*text-transform: uppercase;*/
}

.form-horizontal .controls {
color: #404040;
font-size: 11px;
/*margin-left: 10%;*/
position: relative;
padding: 13px 0 10px 0;
}

.form-horizontal .controls-button {
color: #404040;
font-size: 10px;
margin-left: 35%;
position: relative;
padding: 13px 0 10px 0;
}


/* -----------Select Nav-----------*/
.selectnav { display: none; }


.js #nav { display: none; }
/*.js .selectnav { display: block; width: 440px; border:1px #DDD solid; }
.js #navigation { display: none; } */

/*
------------------------------------------------------------
      Project Feed PARA LAS FOTOS
------------------------------------------------------------
*/

/*------------SOMBRA DEBAJO DE LA FOTO */
.ri-shadow:after,
.ri-shadow:before{
  content: "";
  position: absolute;
  z-index: -2;
  bottom: 15px;
  left: 10px;
  width: 50%;
  height: 20%;
  max-width: 300px;
  max-height: 100px;
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.ri-shadow:after{
  right: 10px;
  left: auto;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  transform: rotate(3deg);
}




.project-feed > div {
  margin-bottom:20px;
  position: relative;
}
 .project-feed div a {
  display:block;
  text-align:center;
}
.project-feed div.box {
  background-color:#FFF;
  position:relative;
}



.project-feed div.mask {
  position:absolute;
  background:#313131;
  background:rgba(93, 89, 89, 0.8);
  display:inline-block;
  text-align:center;
  width:100%;
  height:100%;
  top:0;
  left:0;
  opacity: 0;
  filter: alpha(opacity=0);
  z-index:2;
   -webkit-transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   -ms-transition: all .2s ease-in-out;
   -o-transition: all .2s ease-in-out;
   transition: all .2s ease-in-out;
}
.project-feed div.mask a {
  position:relative;
  padding-top:25px;
  top:50%;
  margin-top:-50px;
  display:inline;
  /*margin:5px;*/
}
/*.project-feed div.mask span {
  position: absolute;
  padding:5px 10px;
  margin:5px;
  text-align:right;
  font-family:Arial, Helvetica, sans-serif;
  top:0px;
  color:#FFF;
  font-size:11px;
  width:auto;
  right:0;
}*/

.project-feed .box:hover div.mask {
  filter: alpha(opacity=100);
  opacity: 1;
}
 .project-feed div.mask a [class^="icon-"]:before, .project-feed div.mask a [class*=" icon-"]:before {
  /* font-size:17px;*/
   color: rgba(0, 0, 0, 0.9);
  /* text-shadow:0px 1px 0px rgba(255, 255, 255, 0.3);*/
}
.project-feed div.mask i.icon-picture{
    background: url(../images/lupita.png);
    width: 40px;
    height: 40px;
    z-index: 20;
    display: inline-block;
    margin-top: -20px;
}
/*
------------------------------------------------------------
    Isotope filtering 
------------------------------------------------------------
*/
.isotope-item {
  z-index: 2;
}
.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
.isotope, .isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
}
.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;
}
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property:    -moz-transform, opacity;
  -ms-transition-property:     -ms-transform, opacity;
  -o-transition-property:         top, left, opacity;
  transition-property:         transform, opacity;
}
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}







/****  Options ****/

.isotopeFilters form {
    float: left;
  margin-top: 10px;
}

.isotopeFilters form select{
   padding: 5px;
}

.isotopeFilters ul {
  padding-left: 0;
  margin: 0;
  list-style: none;
  position: relative;
  float: left;
  margin-right: 0;
  margin-bottom: 15px;
  margin-top: 6px;

}

.isotopeFilters li {
  float: left;
  padding-bottom: 6px;
  cursor: pointer;
  background: url('../images/arrowDown.png') no-repeat center 22px;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;

}





.isotopeFilters li a {
  display: block;
padding: 11px 18px;
background-color: #AAA;
color: #FFF;
margin-left: 4px;
text-decoration: none;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}


.isotopeFilters ul > li:hover > a, .isotopeFilters ul > li.selected > a {
    background-color: #000000;
}
.isotopeFilters li a:active, .isotopeFilters li a.selected {
    background-color: #000000;
}

.isotopeFilters li:hover, .isotopeFilters li.selected {
  background-position: center 38px;
}


/* -----------MEDIA QUERY --------------------*/
/*@media (min-width: 1200px) { 
  .container {
    width: 1158px;
    background-color: #ebebeb;
  }
 } */

/* @media  (min-width: 1450px) {
    body {
      background: #58504d  ;
    }
  }*/

/*
  loading layout
*/
#overlay {
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  background-color:#111;
  z-index:1000;
  display: none;
}
#preloader {
  background: #000000 url(../images/preloader.gif) no-repeat 12px 10px;
  font-size: 11px;
  height: 20px;
  left: 50%;
  line-height: 20px;
  margin: -20px 0 0 -45px;
  padding: 10px;
  position: fixed;
  text-align: left;
  text-indent: 36px;
  top: 50%;
  width: 90px;
  z-index: 1209;
  opacity:0.8;
  filter:alpha(opacity=80);
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  color: #FFF;
  text-shadow:none;
  display: none;

}


@media (max-width: 1199px) {

  header{

  width: 100%;
  z-index: 100;
  position: static; ;
}
  .header {
  
  height: 248px;
  }

  .menu {
    width: auto;
    position: static;
    margin: auto;
    padding: 150px 100px;
  }

.blok-container{
  margin-top: 30px;
}

}
@media  (max-width: 979px) {
 
  .footer-seccion {
    width: 100%;
    text-align: center;
  }
  .separador {
   border-right:  none;
  margin-right: none;
  }
  .footer-text1{
    text-align: center;
  }
  .form-horizontal  input[type="text"] ,.form-horizontal textarea {

  width: 220px;

}

}
@media (max-width: 767px) {

  h1.portada{
    font-size: 35px;
    color: #F9F9F9 ;
    text-align:  center;
  }
  
  .js #nav {
    display: none;
  }
  .js .selectnav {
    display: block;
   /* width: 380px;*/
    width: 100%;
    border: 1px #dddddd solid;
  }
  .js #navigation {
    display: none;
  }
  .js #navigation-footer {
    display: none;
  }
  /* .js .selectnav { display: block; position:relative; padding:5px; margin-top:10px; }*/



  
  
}
@media (max-width: 479px) {
  .header {
    height: 340px;
  }

.header .logo, .header .logo:visited {
    
    position: static;
    /* top: 10px; */
    margin: auto;
    /* left: 25px; */
  }
  .social {
     width: 160px;
    position: static;
    /* right: 10px; */
    /* top: 10px; */
    margin: auto;
    padding: 15px 0;
  }
  
  .js .selectnav {
    display: block;
   /* width: 240px;*/
   width: 100%;
    border: 1px #dddddd solid;
  }
  
  .fono {
    width: 250px;
    position: static;

    margin: auto;
}

  .menu {
    width: auto;
    position: static;
    margin: auto;
    padding: 10px 60px 0 60px;
  }
  .form-horizontal .control-label {
    
    width: 100%;
     text-align: center;
    /*text-transform: uppercase;*/
  }

  .form-horizontal .controls {
    width: 100%;
    margin: 0 10px;
  }
  .form-horizontal input[type="text"], .form-horizontal textarea {
  width: 100%;
  }
 
}

/*----------------------ANIMACIONES TRANCICIONES-----------------------*/
.trancicion-animada-efecto {
    -webkit-transition-property: -webkit-transform;
  -moz-transition-property: transform;
  -ms-transition-property: transform ;
  -o-transition-property: transform ;
  transition-property: transform ;
  transition-duration: 1s;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
}
.trancicion-animada-efecto:hover {
  transform: translateY(-15px);
  -webkit-transform: translateY(-15px);
  -moz-transform: translateY(-15px);
  -o-transform: translateY(-15px) ;



}

/*
------------------------------------------------------------
    Map canvas
------------------------------------------------------------
*/

#map_canvas {
  /*background-color:#e5e3df;*/
  /*border: 1px solid #CCC;
  border-bottom: 2px #ff5e3c solid;*/
   padding: 4px;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  height:400px;
  position: relative;
  max-width: 100%;
  margin:10px auto;
}
#map_canvas:before,
#map_canvas:after {
  background: none;
  text-align: center;
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  width: 100%;
  z-index: 2;
  -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
}
#map_canvas:after {
  bottom: 0;
  top: auto;
}
#map_canvas .captionMap {
  background: #050505;
  background: rgba(41, 40, 46, 0.8);
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), #111110);
   background: -moz-linear-gradient(rgba(0, 0, 0, 0.6), #111110);
  border-radius: 4px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.6) 0px 7px 20px, rgba(255, 255, 255, 0.6) 0px 1px 0px inset;
  -moz-box-shadow: rgba(0, 0, 0, 0.6) 0px 7px 20px, rgba(255, 255, 255, 0.6) 0px 1px 0px inset;
  box-shadow: rgba(0, 0, 0, 0.6) 0px 7px 20px, rgba(255, 255, 255, 0.6) 0px 1px 0px inset; 
  z-index: 1;
  top: 5px;
  color: #FFFFFF;
  padding: 12px;
  font: 11px tahoma, HelveticaNeue, Helvetica, Arial;
  display: inline-block;
  position: absolute;
  text-shadow: black 0px 1px 1px;
  border: 1px solid black; 
  width: 280px;
  z-index: -1;
}
#map_canvas .captionMap span {
  font-weight: bold;
  display: block;
  padding-top: 5px;
}
#map_canvas .captionMap:after {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  margin-left: -7px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #000000;
  width: 0px;
  height: 0px;
}
#map_canvas .captionMap img {
  width: 60px;
  margin-bottom: 5px;
  margin-right: 13px;
  border: 1px #3c3c3c solid;
  float: left;
}
.mapPerloading {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -15px;
  margin-left: -25px;
}
.mapPerloading span {
  display: block;
  margin: 0 auto;
}
.mapPerloading span[class*="l-"] {
  display: inline-block;
  background: black;
  width: 4px;
  height: 4px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  margin: 12px 2px;
  position: relative;
  -webkit-animation: loader 4s infinite;
  -webkit-animation-timing-function: cubic-bezier(0.03, 0.615, 0.995, 0.415);
  -webkit-animation-fill-mode: both;
  -moz-animation: loader 4s infinite;
  -moz-animation-timing-function: cubic-bezier(0.03, 0.615, 0.995, 0.415);
  -moz-animation-fill-mode: both;
  -ms-animation: loader 4s infinite;
  -ms-animation-timing-function: cubic-bezier(0.03, 0.615, 0.995, 0.415);
  -ms-animation-fill-mode: both;
  animation: loader 4s infinite;
  animation-timing-function: cubic-bezier(0.03, 0.615, 0.995, 0.415);
  animation-fill-mode: both;
}
.mapPerloading span.l-1 {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -ms-animation-delay: 1s;
  animation-delay: 1s;
}
.mapPerloading span.l-2 {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  -ms-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
.mapPerloading span.l-3 {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  -ms-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.mapPerloading span.l-4 {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  -ms-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.mapPerloading span.l-5 {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -ms-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.mapPerloading span.l-6 {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -ms-animation-delay: 0s;
  animation-delay: 0s;
}
img.close {

  margin: 12px 8px 0 0;
}