// custom colors:
// grays:
@black: #000;
@grayDarker: #222;
@grayDark: #333;
@gray: #555;
@grayLight: #999;
@grayLighter: #ddd;
@grayFading: #eeeeee;
@grayDead: #f9f9f9;
@white: #fff;
// typos:
@font-face {
  font-family: 'TexGyreheroRegular';
  src: url('../fonts/texgyreheros-regular-webfont.eot');
  src: url('../fonts/texgyreheros-regular-webfont.eot?#iefix') format('embedded-opentype'),
  url('../fonts/texgyreheros-regular-webfont.woff') format('woff'),
  url('../fonts/texgyreheros-regular-webfont.ttf') format('truetype'),
  url('../fonts/texgyreheros-regular-webfont.svg#texgyreheros-regular-webfont') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'TexGyreheroBold';
  src: url('../fonts/texgyreheros-bold-webfont.eot');
  src: url('../fonts/texgyreheros-bold-webfont.eot?#iefix') format('embedded-opentype'),
  url('../fonts/texgyreheros-bold-webfont.woff') format('woff'),
  url('../fonts/texgyreheros-bold-webfont.ttf') format('truetype'),
  url('../fonts/texgyreheros-bold-webfont.svg#texgyreheros-bold-webfont') format('svg');
  font-weight: normal;
  font-style: normal;
}
// resets:
html {
  width: 100%;
  height: 100%;
  position: relative;
}
html, body, li, ul, p { 
  margin: 0; 
  padding: 0; 
}
img { 
  border: 0;
  display: block; 
}
a { text-decoration: none !important; .transition(.25s); }
a:hover { color: @black; }
ul { list-style: none; }
// css:
body, p, li, a { 
  font-family: 'TexGyreheroRegular', sans-serif; 
  font-size: 14px; 
  letter-spacing: 0; 
  color: @white; 
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'TexGyreheroBold', sans-serif; 
  font-weight: normal;
  text-rendering: optimizeLegibility;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, .15);
  margin: 0; 
  padding: 0; 
}
input:focus, textarea:focus, select:focus {
  -webkit-box-shadow: 0 0 6px #ED1C24;
  -moz-box-shadow: 0 0 5px #ED1C24;
  box-shadow: 0 0 5px #ED1C24;
  outline: none;
  }
body { 
  width: 100%; 
  height: 100%;
  margin: 0; 
}
body { 
  background-color: @black; 
}
#loading {
  background: url('../img/loading.gif') no-repeat top center;
  position: absolute;
  margin: 50% auto;
}
.clearfix { clear: both; }
#contacto-back { display: none; }
#contentinside {
  margin: 0px;
}
.modal {
  position: fixed;
  z-index: 999999;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.75);
  top: 0;
  left: 0;
  .modal-content {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 508px;
    height: 508px;
    margin-top: -254px;
    margin-left: -254px;
    .box-shadow(0 1px 10px rgba(0,0,0,.85));
  }
}
#header {
  width: 100%;
  position: fixed;
  z-index: 999;
  background-color: @black;
  #logo, #menu-main { float: left; }
  #search, #lang { float: right; }
  #logo {
    display: block;
    width: 88px;
    height: 34px;
    margin: 0 5px;
  }
  #menu-main {
    ul {
      li {
        display: inline-block;
        a {
          width: 80px;
          padding: 10px 0;
          display: block;
          font: 13px/1em 'TexGyreheroBold';
          text-transform: uppercase;
          vertical-align: middle;
          text-align: center;
        }
        a:hover, .current { color: #ED1C24; }
      }
    }
  } /* #menu-main, #lang */
  #menu-main {
    margin-left: 130px;
  }
  #lang {
    margin-right: 10px;
    span {
      display: inline-block;
      a {
        width: 30px;
        padding: 10px 0;
        display: block;
        font: 13px/1em 'TexGyreheroBold';
        text-transform: uppercase;
        vertical-align: middle;
        text-align: center;
      }
      a:hover, .current { color: #ED1C24; }
    }
  }
  #search {
    background-color: @white;
    margin: 4px 0;
    margin-right: 5px;
    padding: 3px;
    .icon {
      display: block;
      float: right;
      width: 20px;
      height: 20px;
      background: url('../img/icon_lupe.png') center center no-repeat;
    }
    .search-value {
      width: 124px;
      font: 12px/1em 'TexGyreheroBold';
      float: left;
      background-color: transparent;
      border: 0;
    }
  }
}
#wrapper {
  width: 100%;
  height: 100%;
  .container {
    position: relative;
    padding: 30px 0;
    width: 100%;
  } /* /.container */
  /* sections */
  #home {
    width: 100%;
    float: left;
    .item {
      position: relative;
      float: left;
      margin: 5px;
      .overlay {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 5;
        opacity: 0;
        .transition(.25s);
        .label {
          position: absolute;
          display: inline-block;
          font: 18px/1.25em 'TexGyreheroBold';
          text-align: left;
          color: @white;
          z-index: 10;
          margin: 10px;
          text-shadow: 0px 1px 2px rgba(0,0,0,.25);
        }
        .bg {
          position: absolute;
          display: block;
          width: 100%;
          height: 100%;
          background-color: @black;
          opacity: .6;
        }
      }
      .overlay-visible {
        opacity: 1;
      }
    } /* /.item */
    .item a:hover .overlay {
      opacity: 1;
    }
    .item-white {
      .overlay {
        .label { color: @black; }
        .bg { background-color: @white; }
      }
    }
    .item-red {
      .overlay {
        background-color: #ED1C24;
        .label { 
          color: @white; 
          font: 21px/1.25em 'TexGyreheroBold';
        }
        .bg { background-color: #ED1C24; }
      }
    }
    .item-gray {
      .overlay {
        .label { 
          color: @white; 
          font: 13px/1.25em 'TexGyreheroBold';
        }
        .bg { background-color: #3B3B3B; }
      }
    }
  } /* /#home */
  #empresa {
    width: 945px;
    height: 463px;
    .cols {
      display: block;
      width: 462px;
      height: 463px;
      float: left;
    }
    #col1 {
      margin-left: 5px;
      .bx-pager { display: none; }
      .bx-controls-direction a { top: 95%;}
      .bxslider {
        display: block;
        width: 462px;
        height: 463px;
        .slide {
          display: block;
          width: 462px;
          height: 463px;
        }
      }
    }
    #col2 {
      position: relative;
      background-color: #ED1C24;
      margin-left: 10px;
      .desc {
        padding: 20px;
        font: 35px/1.25em 'TexGyreheroBold';
        color: @white;
      }
      .leyenda {
        font: 13px/1em 'TexGyreheroRegular';
        color: @white;
        display: block;
        position: absolute;
        bottom: 20px;
        left: 20px;
      }
    }
  } /* /#empresa */
  #servicios {
    width: 955px;
    height: 463px;
    .cols {
      display: block;
      float: left;
      height: 463px;
    }
    #col1 {
      width: 462px;
      margin-left: 5px;
      .bx-pager { display: none; }
      .bx-controls-direction a { top: 95%;}
      .bxslider {
        display: block;
        width: 462px;
        height: 463px;
        .slide {
          display: block;
          width: 462px;
          height: 463px;
          background-size: cover;
        }
      }
    }
    #col2 {
      width: 310px;
      position: relative;
      background-color: #ED1C24;
      margin-left: 10px;
      .desc {
        padding: 20px;
        font: 14px/1.25em 'TexGyreheroBold';
        color: @white;
      }
      .download-pdf {
        font: 13px/1em 'TexGyreheroRegular';
        color: @white;
        display: block;
        position: absolute;
        bottom: 20px;
        left: 20px;
      }
      .download-pdf:hover { color: @black; }
    }
    #col3 {
      width: 160px;
      .menu-sub-servicios {
        padding: 10px 0 0 20px;
        li {
          margin-bottom: 3px;
          a {
            font: 14px/1.1em 'TexGyreheroBold';
          }
          a:hover, .current { color: #ED1C24; }
        }
      }
    }
  } /* /#servicios */
  #contacto {
    width: 995px;
    height: 470px;
    #contacto-back {
      padding: 20px;
    }
    .cols {
      display: block;
      float: left;
      height: 463px;
    }
    #col1 {
      width: 470px;
      margin-left: 5px;
      .bx-pager { display: none; }
      .bx-controls-direction a { top: 95%;}
      .bxslider {
        display: block;
        width: 470px;
        height: 463px;
        .slide {
          display: block;
          width: 470px;
          height: 463px;
          background-size: cover;
        }
      }
    }
    #col2 {
      width: 310px;
      position: relative;
      background-color: #ED1C24;
      margin-left: 10px;
      form {
        padding: 20px;
        input, textarea {
          width: 260px;
          padding: 5px;
          margin-bottom: 10px;
          background-color: #ED1C24;
          border: 1px solid @white;
          font: 13px/1.25em 'TexGyreheroBold';
          color: @white;
          .placeholder(@white);
          .transition(.25s);
        }
        textarea {
          height: 160px;
        }
        input:focus, textarea:focus {
          background-color: @black;
        }
        label {
          font: 13px/1.25em 'TexGyreheroBold';
          color: @white; 
        }
        .submit, .file {
          font: 12px/1.25em 'TexGyreheroBold';
          display: block;
          width: 120px;
          color: @white;
          border: 0;
          text-align: left;
        }
        .submit { 
          display: block;
          padding: 5px 0;
          padding-left: 10px;
          float: left; 
          background-color: @black;
        }
        .file { width: 255px; }
      }
    }
    #col3 {
      width: 200px;
      p {
        font: 12px/1.25em 'TexGyreheroBold';
        text-transform: uppercase;
        margin-left: 20px;
        margin-top: 20px;
        a { font: 12px/1.25em 'TexGyreheroBold'; }
        a:hover { color: #ED1C24; }
      }
    }
  } /* /#contacto */
  #internacional {
    width: 945px;
    height: 463px;
    .cols {
      display: block;
      width: 463px;
      height: 463px;
      float: left;
    }
    #col1 {
      margin-left: 5px;
      .bx-pager { display: none; }
      .bx-controls-direction a { top: 95%;}
      .bxslider {
        display: block;
        width: 470px;
        height: 463px;
        .slide {
          display: block;
          width: 470px;
          height: 463px;
        }
      }
    }
    #col2 {
      position: relative;
      background-color: #ED1C24;
      margin-left: 10px;
      .desc {
        padding: 20px;
        font: 23px/1.25em 'TexGyreheroBold';
        color: @white;
      }
      .leyenda {
        font: 13px/1em 'TexGyreheroRegular';
        color: @white;
        display: block;
        position: absolute;
        bottom: 20px;
        left: 20px;
      }
      .iram-img {
        position: absolute;
        left: 20px;
        bottom: 60px;
      }
    }
  } /* /#internacional */
} /* /#wrapper */
#footer {
  display: block;
  background-color: @black;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 999;
  padding: 5px 0;
  #col1 {
    float: left;
    margin-left: 12px;
    p {
      float: left;
      font: 13px/1em 'TexGyreheroBold';
      text-transform: uppercase;
      margin-top: 7px;
      margin-right: 70px;
    }
    .logo-studio {
      float: left;
      margin-top: 9px;
      font: 11px/1em 'TexGyreheroBold';
    }
    .logo-studio:hover {
      color: @grayLight
    }
  }
  #col2 {
    float: right;
    margin-right: 12px;
    .copy, .social { float: left; }
    .social {
      margin-left: 15px;
      ul {
        width: 85px;
        li {
          display: inline-block;
          a {
            display: block;
            i.fa {
              display: table-cell;
              width: 23px;
              height: 23px;
              font-size: 23px;
              color: @white;
              .transition(.25s);
            }
            &:hover i.fa { color: #ED1C24; }
          }
        }
      }
    }
    .copy {
      font-size: 13px;
      padding: 5px 0; 
    }
  }
}
/*
------------------------------------------------------------------------------------
*/
// Placeholder text
.placeholder(@color: @input-color-placeholder) {
  // Firefox
  &::-moz-placeholder {
    color: @color;
    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
  }
  &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}
// drop shadows:
.box-shadow(@shadow: 0 2px 6px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow;
  -moz-box-shadow: @shadow;
  box-shadow: @shadow;
}
// transforms:
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
// transitions
.transition(@transition) {
  -webkit-transition: @transition;
  -moz-transition: @transition;
  -ms-transition: @transition;
  -o-transition: @transition;
  transition: @transition;
}
// gradients
#gradient {
  .horizontal(@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(left, @startColor, @endColor); // Le standard
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
  }
  .vertical(@startColor: #555, @endColor: #333) {
    background-color: mix(@startColor, @endColor, 60%);
    background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(top, @startColor, @endColor); // The standard
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
  }
  .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
    background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
  }
  .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
    background-color: mix(@midColor, @endColor, 80%);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
    background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
    background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-repeat: no-repeat;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
  }
  .radial(@innerColor: #555, @outerColor: #333)  {
    background-color: @outerColor;
    background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
    background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
    background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
    background-image: -ms-radial-gradient(circle, @innerColor, @outerColor);
    background-repeat: no-repeat;
    // Opera cannot do radial gradients yet
  }
  .striped(@color, @angle: -45deg) {
    background-color: @color;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: -ms-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  }
}