/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {    
    color: #5a5a5a;
    overflow-x: hidden;
    padding: 0;
}

::selection {
    background: #ffff99;
    color: #000000;
    text-shadow: none;
}

.content {
    /*background: #ffffff url(../img/waves.png) repeat-x;*/
    border-bottom: 1px solid #d9d9d9;
    padding: 1.5em 0;
}

/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
    padding-right: 0;
    padding-left: 0;
}
.navbar-wrapper .navbar {
    padding-right: 15px;
    padding-left: 15px;
}
.navbar-wrapper .navbar .container {
    width: auto;
}

/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
    margin-bottom: 20px;
    text-align: center;
}
.marketing h2 {
    font-weight: normal;
}
.marketing .col-lg-4 p {
    margin-right: 10px;
    margin-left: 10px;
}


/* Featurettes
------------------------- */

.featurette-divider {
    margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
    font-weight: 300;
    line-height: 1;
    letter-spacing: -1px;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {
    /* Navbar positioning foo */
    .navbar-wrapper {
        margin-top: 0px;
    }
    .navbar-wrapper .container {
        padding-right: 15px;
        padding-left: 15px;
    }
    .navbar-wrapper .navbar {
        padding-right: 0;
        padding-left: 0;
    }

    /* The navbar becomes detached from the top, so we round the corners */
    .navbar-wrapper .navbar {
        border-radius: 4px;
    }

    .featurette-heading {
        font-size: 50px;
    }
}

@media (min-width: 992px) {
    .featurette-heading {
        margin-top: 120px;
    }
}

/* NEW --------------- */

a, span, input, button {transition: all 0.2s ease-in-out;}

.navbar-inverse {
    background-color: #fff;
    border-bottom: 1px solid #222222 !important;
}

.navbar-wrapper {position: relative;}

.navbar-wrapper .navbar {
    border-radius: 0;
    margin-bottom: 0;
}

.navbar-wrapper .container {
    width: 100%;
    padding: 0;
}

.navbar-nav {
    float: none;
    width: 100%;
    text-align: center;
}

.navbar-nav>li {
    float: none;
    display: inline-block;
}

.navbar-nav li a {
    color: #222222 !important;
    font-weight: 600;
    font-size: 1.2em;
    border: 0;
    padding-top: 18px;
    height: auto;
    cursor: pointer;
}

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
    background: #fff;
    color: #E41A25 !important;
    box-shadow: 0 3px 0 #222222;    
}

.navbar-nav li a:hover {
    background: #fff;
    color: #E41A25 !important;
    box-shadow: 0 3px 0 #222222;    
}

.language {
    background: #55000d;
    height: 35px;
    min-height: 35px;
    overflow: hidden;
}

.language ul {
    max-width: 1170px;
    width: 95%;
    margin: 0 auto;
    padding: 0;
}

.language ul li {
    display: inline-block;
    background: none;
    border-bottom: 0;
    padding: 0;
    margin: 8px 10px 0 0;
}

.language ul li:first-child {
    border-right: 1px solid #fff;
    padding-right: 12px;
}

.language ul li a {
    color: #fff;
    line-height: 1em;
    letter-spacing: 1px;
    font-weight: 400;
    text-decoration: none;
    font-size: 12px;
    cursor: pointer;
}

.language ul li a:hover, .language ul li a.active-lang {color: #D01733 !important;}
.brand { background: #880015; padding: 20px 0; overflow: hidden; }
.brand div { max-width: 1170px; margin: 0 auto; width: 95%; }
.brand img { margin: 8px 0; }

.brand h1 {
    float: right;
    margin: 15px 0;
    font-size: 325%;
    color: #fff;
    font-family: "Roboto","Helvetica Neue",Helvetica,sans-serif;
    font-style: normal;
    font-weight: 100;
    letter-spacing: -1px;
    text-transform: uppercase;
    text-rendering: optimizelegibility;
    cursor: pointer;
}

/* Footer */
footer { padding-top: 50px; margin-top: 50px; border-top: 5px solid #55000D; }

/* RESPONSIVE */
@media (max-width: 767px) {
    .brand img {margin: 2px 0;}
    .brand h1 {font-size: 250%;}
    .navbar-wrapper .navbar {position: absolute; top: 0; right: 0; background-color: transparent; border-bottom: 0 !important; width: 100%;}
    .navbar-toggle {border: 0; background-color: #880015; padding: 5px 9px; margin-top: 5px; margin-right: 5px; margin-bottom: 5px;}
    .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {background: #55000d;}
    .navbar-inverse .navbar-toggle {border: 0; }
    .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {border: 0 !important; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.5) !important;}
    .navbar-nav {margin: 3px 0;}
    .navbar-nav>li {display: block;}
    .navbar-toggle .icon-bar {height: 3px; width: 15px;}
    .navbar-toggle .icon-bar+.icon-bar {margin-top: 3px;}
}

@media (max-width: 500px) {
    .brand img {width: 155px; margin: 0px 0;}
    .brand h1 {font-size: 150%; letter-spacing: 0px;}
}

@media (max-width: 500px) {
    .brand img {width: 145px;}
    .brand h1 {font-size: 125%;}
}

/* ======================
   GOVERNALIA - IDI Eikon
   ====================== */

/* --------------
   BLACK: #231f20
   BLUE:  #005486
   -------------- */

/* ----------------------
   MAIN
   ---------------------- */

body {background: #222125 url(../img/bg.png) center top; background-attachment: fixed; font-family: 'Roboto', sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family: 'Questrial', sans-serif;}
ul, ol {margin-bottom: 0;}
a {transition: all 0.2s ease-in-out;}
::selection {background: #43B23C; color: #fff; text-shadow: none;} ::-moz-selection {background: #43B23C; color: #fff; text-shadow: none;} ::-webkit-selection {background: #43B23C; color: #fff; text-shadow: none;}
.navbar-wrapper .container {max-width: 1170px; width: 95%;}
.navbar, .navbar-form { display: none; }      

/* ----------------------
   LANGUAGE
   ---------------------- */

.language {display:none; width: 100%; position: fixed; left: 0; right: 0; top: 0; background: #37363A; z-index: 1;}
.language ul li a:hover, .language ul li a.active-lang { color: #EFEC62 !important; }

/* ----------------------
   HEADER
   ---------------------- */

.brand {position: relative; height: auto; width: 100%; border-radius: 20px; padding: 25px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.35); border-bottom: 5px solid #e4dff9; text-align: center; background: #fff; margin: 65px 0 0 0;}
.brand h1 {display: none;}

/* ----------------------
   CONTENT
   ---------------------- */

#rnd-expense-example .intro-text {font-style: normal;}
#rnd-expense-example .intro h1, h1 {text-transform: uppercase; color: #fff; text-shadow: 0 0 20px #000; text-align: center; margin: 50px 0; font-size: 2.5em; text-align: left;}
h1 .high {background: #43B23C;}
h1.ejemplos {margin: 50px 0;}
h1.heart {text-align: center;}
.callout-blue h1 {margin: 15px 0; text-align: center;}
#rnd-expense-example .intro-text {padding: 20px; background: rgb(255, 255, 255); border-radius: 10px; box-shadow: 0 0 20px #000;}
.callout {border: 0; border-radius: 20px; box-shadow: 0 0 70px #000;}
.callout-video {text-align: center;}
.callout-video .row {display: flex; justify-content: center;}
.callout-video p {color: #fff; font-size: 1.3em; margin: 30px; text-transform: uppercase; letter-spacing: 1px; font-weight: 300; transition: all 0.2s ease-in-out;}
.callout-video a:hover p {color: #9077dc;}
.video-peq {font-size: 0.8em; color: #848484;}
.video-peq a {color: #fff;}
.callout-white {border-bottom: 5px solid #9e9e9e;}
.callout-yellow {background: #f6f7aa !important; border-bottom: 5px solid #aeaf6e;}
.callout-blue {background: #0a5587 !important; border-bottom: 5px solid #063452; font-weight: 300; color: #fff; margin: 25px 0;}
.callout-transparent {background: transparent; color: #fff; box-shadow: none; margin-top: 100px;}

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

.row-footer, .row-heart {text-align: center;}
.ic-ayuntamiento-footer {margin-bottom: -150px; max-width: 512px; width: 90%;}
footer {text-align: center; background: url(../img/wave.png) repeat-x center top; padding: 50px 0 50px 0; position: relative; margin-top: 0; border-top: 0px solid #55000D;}
.contacto {margin-bottom: 25px; color: #0a0a0a; font-size: 3em;}
.copy {font-size: 1.5em; font-weight: 300; color: #9c9ea0; margin-top: 25px;}
.copy img {vertical-align: bottom; width: 155px;}
.ic-contact {position: absolute; right: 0; bottom: 0;}
.row-txt-first {margin-top: 25px;}

/* ======================
   RESPONSIVE
   ====================== */

@media all and (max-width: 1199px) {
    .ic-contact {display: none;}
    .callout-video .row {display: block;}
    }
    
@media all and (max-width: 639px) {
    .callout-video {margin-top: 85px;}
    .ic-ayuntamiento-footer {max-width: 325px; margin-bottom: -100px;}
    .row-txt {width: 100%;}
    .icn-float-left {float: none; margin: 0 0px 15px 0; display: block;}
    .icn-float-right {float: none; margin: 0 0px 15px 0; display: block;}
    ic-contact {display: none;}
    }

/* ======================
   HOVER ANIMATIONS
   ====================== */

/* Buzz Out */
@-webkit-keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
@keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
.hvr-buzz-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active {
  -webkit-animation-name: hvr-buzz-out;
  animation-name: hvr-buzz-out;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Wobble Vertical */
@-webkit-keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.hvr-wobble-vertical {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active {
  -webkit-animation-name: hvr-wobble-vertical;
  animation-name: hvr-wobble-vertical;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* ======================
   GOOGLE FONTS
   ====================== */

@font-face {
  font-family: 'Roboto';
  font-weight: 300;
  font-style: normal;
  src: url('/assets/fonts/Roboto-300/Roboto-300.eot');
  src: url('/assets/fonts/Roboto-300/Roboto-300.eot?#iefix') format('embedded-opentype'),
       local('Roboto Light'),
       local('Roboto-300'),
       url('/assets/fonts/Roboto-300/Roboto-300.woff2') format('woff2'),
       url('/assets/fonts/Roboto-300/Roboto-300.woff') format('woff'),
       url('/assets/fonts/Roboto-300/Roboto-300.ttf') format('truetype'),
       url('/assets/fonts/Roboto-300/Roboto-300.svg#Roboto') format('svg');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: normal;
  src: url('/assets/fonts/Roboto-regular/Roboto-regular.eot');
  src: url('/assets/fonts/Roboto-regular/Roboto-regular.eot?#iefix') format('embedded-opentype'),
       local('Roboto'),
       local('Roboto-regular'),
       url('/assets/fonts/Roboto-regular/Roboto-regular.woff2') format('woff2'),
       url('/assets/fonts/Roboto-regular/Roboto-regular.woff') format('woff'),
       url('/assets/fonts/Roboto-regular/Roboto-regular.ttf') format('truetype'),
       url('/assets/fonts/Roboto-regular/Roboto-regular.svg#Roboto') format('svg');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 900;
  font-style: normal;
  src: url('/assets/fonts/Roboto-900/Roboto-900.eot');
  src: url('/assets/fonts/Roboto-900/Roboto-900.eot?#iefix') format('embedded-opentype'),
       local('Roboto Black'),
       local('Roboto-900'),
       url('/assets/fonts/Roboto-900/Roboto-900.woff2') format('woff2'),
       url('/assets/fonts/Roboto-900/Roboto-900.woff') format('woff'),
       url('/assetsfonts/Roboto-900/Roboto-900.ttf') format('truetype'),
       url('/assets/fonts/Roboto-900/Roboto-900.svg#Roboto') format('svg');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: italic;
  src: url('/assets/fonts/Roboto-italic/Roboto-italic.eot');
  src: url('/assets/fonts/Roboto-italic/Roboto-italic.eot?#iefix') format('embedded-opentype'),
       local('Roboto Italic'),
       local('Roboto-italic'),
       url('/assets/fonts/Roboto-italic/Roboto-italic.woff2') format('woff2'),
       url('/assets/fonts/Roboto-italic/Roboto-italic.woff') format('woff'),
       url('/assets/fonts/Roboto-italic/Roboto-italic.ttf') format('truetype'),
       url('/assets/fonts/Roboto-italic/Roboto-italic.svg#Roboto') format('svg');
}

@font-face {
  font-family: 'Questrial';
  font-weight: 400;
  font-style: normal;
  src: url('/assets/fonts/Questrial-regular/Questrial-regular.eot');
  src: url('/assets/fonts/Questrial-regular/Questrial-regular.eot?#iefix') format('embedded-opentype'),
       local('Questrial'),
       local('Questrial-regular'),
       url('/assets/fonts/Questrial-regular/Questrial-regular.woff2') format('woff2'),
       url('/assets/fonts/Questrial-regular/Questrial-regular.woff') format('woff'),
       url('/assets/fonts/Questrial-regular/Questrial-regular.ttf') format('truetype'),
       url('/assets/fonts/Questrial-regular/Questrial-regular.svg#Questrial') format('svg');
}