@font-face {
  font-family: 'Roboto-Thin'; font-style: normal; font-weight: 100;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(/css/KFOkCnqEu92Fr1MmgVxIIzI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.container {
  max-width: 960px;
}

/* ***************************************************************************
 * Custom translucent site header
 ****************************************************************************/ 

 #menu-responsive { 
   -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); 
   position: absolute; top: 0; left: 0; right: 0; bottom: 0;
   padding: 70px 10px 0 10px;
   background-color: rgba(20, 20, 30, .8); 
   z-index: 900; 
   text-align: right;  }

#menu-responsive a {  color: #fff; margin: 5px; background: rgba(255, 255, 255, .3); }

.site-header { -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); transition: background-color 1s; z-index: 999; }
.site-header a { color: #fff; transition: ease-in-out border .15s; border-bottom: 2px solid transparent; }
.site-header a:hover { border-bottom: 2px solid #fff; text-decoration: none; }

.bgtransparent { background-color: rgba(20, 20, 30, 0); }
.bgsolid { background-color: rgba(20, 20, 30, .8); }

/* Layout */
.first { margin-top: -75px; }
.hero { height: 480px; padding-top: 240px; }
.overflow-hidden { overflow: hidden; }
.bg-fixed {background-attachment: fixed; }
.bg-lightgrey { background-color: lightgrey;}
.bg-cover { background-repeat: no-repeat; background-size: cover; background-position: center center; }

#nav-toggle { cursor: pointer; opacity: .7; }
#nav-toggle:hover {opacity: 1; }

footer {font-size: .6em;}
footer a { color: #555; }
footer a:hover { color: #333;  }

/* Estilos en modo móvil */
@media (max-width: 768px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .flex-md-equal > * { -ms-flex: 1; flex: 1; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  .hero { height: 600px; padding-top: 240px;}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
  .hero { height: 720px; padding-top: 300px; }
}

/* Decorations */

h1, h2, h3 { font-family: "Roboto-Thin" }

.title1-light { font-family: "Roboto-Thin"; color: #fff; text-shadow: 0 0 3px #000; }
.title2-light { font-weight: normal; color: #fff; text-shadow: 0 0 3px #000; }
.shadow1 { box-shadow: inset 0px 80px 150px 0px #000 }
.cliente { padding-top: 260px; background-position: center center; background-repeat: no-repeat; }

/* Misc */
.flex-equal > * { -ms-flex: 1; flex: 1;}

p { font-size: 14px; line-height: 26px;}
.text-sm { font-size: .8em; line-height: 1.2em; }


.spinner {
  display: inline-block;
  opacity: 0;
  max-width: 0;
  -webkit-transition: opacity 0.25s, max-width 0.45s;
  -moz-transition: opacity 0.25s, max-width 0.45s;
  -o-transition: opacity 0.25s, max-width 0.45s;
  transition: opacity 0.25s, max-width 0.45s;
  /* Duration fixed since we animate additional hidden width */
}

.has-spinner.active {
  cursor: progress;
}

.has-spinner.active .spinner {
  opacity: 1;
  max-width: 50px;
  /* More than it will ever come, notice that this affects on animation duration */
}

.resalta {
    color: red;
}