.b1 {
  border: 1px solid red;
}

.b2 {
  border: 1px solid blue;
}

.b3 {
  border: 1px solid orange;
}

.b4 {
  border: 1px solid purple;
}

.b5 {
  border: 1px solid yellowgreen;
}

.b6 {
  border: 1px solid green;
}

* {
  font-family: 'Montserrat', sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  overflow-x: hidden;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

.fl {
  float: left;
}

.al {
  text-align: left;
}

.ac {
  text-align: center;
}

.ar {
  text-align: right;
}

.col-1 {
  width: 8.33333%;
}

.offset-1 {
  margin-left: 8.33333%;
}

.col-2 {
  width: 16.66667%;
}

.offset-2 {
  margin-left: 16.66667%;
}

.col-3 {
  width: 25%;
}

.offset-3 {
  margin-left: 25%;
}

.col-4 {
  width: 33.33333%;
}

.offset-4 {
  margin-left: 33.33333%;
}

.col-5 {
  width: 41.66667%;
}

.offset-5 {
  margin-left: 41.66667%;
}

.col-6 {
  width: 50%;
}

.offset-6 {
  margin-left: 50%;
}

.col-7 {
  width: 58.33333%;
}

.offset-7 {
  margin-left: 58.33333%;
}

.col-8 {
  width: 66.66667%;
}

.offset-8 {
  margin-left: 66.66667%;
}

.col-9 {
  width: 75%;
}

.offset-9 {
  margin-left: 75%;
}

.col-10 {
  width: 83.33333%;
}

.offset-10 {
  margin-left: 83.33333%;
}

.col-11 {
  width: 91.66667%;
}

.offset-11 {
  margin-left: 91.66667%;
}

.col-12 {
  width: 100%;
}

.offset-12 {
  margin-left: 100%;
}

.mt1 {
  margin-top: 10px !important;
}

.mb-1 {
  margin-top: -10px !important;
}

.mb1 {
  margin-bottom: 10px !important;
}

.ml1 {
  margin-left: 10px !important;
}

.mr1 {
  margin-right: 10px !important;
}

.mtb1 {
  margin: 10px 0 !important;
}

.mt2 {
  margin-top: 20px !important;
}

.mb-2 {
  margin-top: -20px !important;
}

.mb2 {
  margin-bottom: 20px !important;
}

.ml2 {
  margin-left: 20px !important;
}

.mr2 {
  margin-right: 20px !important;
}

.mtb2 {
  margin: 20px 0 !important;
}

.mt3 {
  margin-top: 30px !important;
}

.mb-3 {
  margin-top: -30px !important;
}

.mb3 {
  margin-bottom: 30px !important;
}

.ml3 {
  margin-left: 30px !important;
}

.mr3 {
  margin-right: 30px !important;
}

.mtb3 {
  margin: 30px 0 !important;
}

.mt4 {
  margin-top: 40px !important;
}

.mb-4 {
  margin-top: -40px !important;
}

.mb4 {
  margin-bottom: 40px !important;
}

.ml4 {
  margin-left: 40px !important;
}

.mr4 {
  margin-right: 40px !important;
}

.mtb4 {
  margin: 40px 0 !important;
}

.mt5 {
  margin-top: 50px !important;
}

.mb-5 {
  margin-top: -50px !important;
}

.mb5 {
  margin-bottom: 50px !important;
}

.ml5 {
  margin-left: 50px !important;
}

.mr5 {
  margin-right: 50px !important;
}

.mtb5 {
  margin: 50px 0 !important;
}

.mt6 {
  margin-top: 60px !important;
}

.mb-6 {
  margin-top: -60px !important;
}

.mb6 {
  margin-bottom: 60px !important;
}

.ml6 {
  margin-left: 60px !important;
}

.mr6 {
  margin-right: 60px !important;
}

.mtb6 {
  margin: 60px 0 !important;
}

.mt7 {
  margin-top: 70px !important;
}

.mb-7 {
  margin-top: -70px !important;
}

.mb7 {
  margin-bottom: 70px !important;
}

.ml7 {
  margin-left: 70px !important;
}

.mr7 {
  margin-right: 70px !important;
}

.mtb7 {
  margin: 70px 0 !important;
}

.mt8 {
  margin-top: 80px !important;
}

.mb-8 {
  margin-top: -80px !important;
}

.mb8 {
  margin-bottom: 80px !important;
}

.ml8 {
  margin-left: 80px !important;
}

.mr8 {
  margin-right: 80px !important;
}

.mtb8 {
  margin: 80px 0 !important;
}

.mt9 {
  margin-top: 90px !important;
}

.mb-9 {
  margin-top: -90px !important;
}

.mb9 {
  margin-bottom: 90px !important;
}

.ml9 {
  margin-left: 90px !important;
}

.mr9 {
  margin-right: 90px !important;
}

.mtb9 {
  margin: 90px 0 !important;
}

.mt10 {
  margin-top: 100px !important;
}

.mb-10 {
  margin-top: -100px !important;
}

.mb10 {
  margin-bottom: 100px !important;
}

.ml10 {
  margin-left: 100px !important;
}

.mr10 {
  margin-right: 100px !important;
}

.mtb10 {
  margin: 100px 0 !important;
}

.pt1 {
  padding-top: 10px !important;
}

.pb-1 {
  padding-top: -10px !important;
}

.pb1 {
  padding-bottom: 10px !important;
}

.pl1 {
  padding-left: 10px !important;
}

.pr1 {
  padding-right: 10px !important;
}

.pt2 {
  padding-top: 20px !important;
}

.pb-2 {
  padding-top: -20px !important;
}

.pb2 {
  padding-bottom: 20px !important;
}

.pl2 {
  padding-left: 20px !important;
}

.pr2 {
  padding-right: 20px !important;
}

.pt3 {
  padding-top: 30px !important;
}

.pb-3 {
  padding-top: -30px !important;
}

.pb3 {
  padding-bottom: 30px !important;
}

.pl3 {
  padding-left: 30px !important;
}

.pr3 {
  padding-right: 30px !important;
}

.pt4 {
  padding-top: 40px !important;
}

.pb-4 {
  padding-top: -40px !important;
}

.pb4 {
  padding-bottom: 40px !important;
}

.pl4 {
  padding-left: 40px !important;
}

.pr4 {
  padding-right: 40px !important;
}

.pt5 {
  padding-top: 50px !important;
}

.pb-5 {
  padding-top: -50px !important;
}

.pb5 {
  padding-bottom: 50px !important;
}

.pl5 {
  padding-left: 50px !important;
}

.pr5 {
  padding-right: 50px !important;
}

.pt6 {
  padding-top: 60px !important;
}

.pb-6 {
  padding-top: -60px !important;
}

.pb6 {
  padding-bottom: 60px !important;
}

.pl6 {
  padding-left: 60px !important;
}

.pr6 {
  padding-right: 60px !important;
}

.pt7 {
  padding-top: 70px !important;
}

.pb-7 {
  padding-top: -70px !important;
}

.pb7 {
  padding-bottom: 70px !important;
}

.pl7 {
  padding-left: 70px !important;
}

.pr7 {
  padding-right: 70px !important;
}

.pt8 {
  padding-top: 80px !important;
}

.pb-8 {
  padding-top: -80px !important;
}

.pb8 {
  padding-bottom: 80px !important;
}

.pl8 {
  padding-left: 80px !important;
}

.pr8 {
  padding-right: 80px !important;
}

.pt9 {
  padding-top: 90px !important;
}

.pb-9 {
  padding-top: -90px !important;
}

.pb9 {
  padding-bottom: 90px !important;
}

.pl9 {
  padding-left: 90px !important;
}

.pr9 {
  padding-right: 90px !important;
}

.pt10 {
  padding-top: 100px !important;
}

.pb-10 {
  padding-top: -100px !important;
}

.pb10 {
  padding-bottom: 100px !important;
}

.pl10 {
  padding-left: 100px !important;
}

.pr10 {
  padding-right: 100px !important;
}

.mauto {
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.pcent {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.fend {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.deg-azul {
  background: -webkit-linear-gradient(left, #28aae1 0%, #2d3091 100%);
  background: -webkit-gradient(linear, left top, right top, from(#28aae1), to(#2d3091));
  background: -o-linear-gradient(left, #28aae1 0%, #2d3091 100%);
  background: linear-gradient(to right, #28aae1 0%, #2d3091 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$azul-light, endColorstr=$azul-dark, GradientType=1);
}

.deg-verde {
  background: -webkit-linear-gradient(left, #006736 0%, #8bc53e 100%);
  background: -webkit-gradient(linear, left top, right top, from(#006736), to(#8bc53e));
  background: -o-linear-gradient(left, #006736 0%, #8bc53e 100%);
  background: linear-gradient(to right, #006736 0%, #8bc53e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$verde-dark, endColorstr=$verde-light, GradientType=1);
}

.deg-magenta {
  background: -webkit-linear-gradient(left, #9d005c 0%, #ed1e79 100%);
  background: -webkit-gradient(linear, left top, right top, from(#9d005c), to(#ed1e79));
  background: -o-linear-gradient(left, #9d005c 0%, #ed1e79 100%);
  background: linear-gradient(to right, #9d005c 0%, #ed1e79 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$magenta-dark, endColorstr=$magenta-light, GradientType=1);
}

.deg-cyan {
  background: -webkit-linear-gradient(left, #02b7ca 0%, #2fced4 100%);
  background: -webkit-gradient(linear, left top, right top, from(#02b7ca), to(#2fced4));
  background: -o-linear-gradient(left, #02b7ca 0%, #2fced4 100%);
  background: linear-gradient(to right, #02b7ca 0%, #2fced4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$cyan-dark, endColorstr=$cyan-light, GradientType=1);
}

.deg-naranja {
  background: -webkit-linear-gradient(left, #f05923 0%, #fbb03b 100%);
  background: -webkit-gradient(linear, left top, right top, from(#f05923), to(#fbb03b));
  background: -o-linear-gradient(left, #f05923 0%, #fbb03b 100%);
  background: linear-gradient(to right, #f05923 0%, #fbb03b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$naranja-dark, endColorstr=$naranja-light, GradientType=1);
}

.deg-morado {
  background: -webkit-linear-gradient(left, #662d91 0%, #b932d3 100%);
  background: -webkit-gradient(linear, left top, right top, from(#662d91), to(#b932d3));
  background: -o-linear-gradient(left, #662d91 0%, #b932d3 100%);
  background: linear-gradient(to right, #662d91 0%, #b932d3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$morado-dark, endColorstr=$morado-light, GradientType=1);
}

.azul-dark {
  color: #2d3091;
}

.azul {
  color: #29abe2;
}

.bk-azul {
  background: #29abe2;
}

.azul-light {
  color: #28aae1;
}

.verde-dark {
  color: #006736;
}

.verde {
  color: #39b54a;
}

.bk-verde {
  background: #39b54a;
}

.verde-light {
  color: #8bc53e;
}

.magenta-dark {
  color: #9d005c;
}

.magenta-light {
  color: #ed1e79;
}

.bk-magenta {
  background: #ed1e79;
}

.cyan-dark {
  color: #02b7ca;
}

.cyan {
  color: #00d0d7;
}

.bk-cyan {
  background: #00d0d7;
}

.cyan-light {
  color: #2fced4;
}

.naranja-dark {
  color: #f05923;
}

.naranja-light {
  color: #fbb03b;
}

.bk-naranja {
  background: #fbb03b;
}

.morado-dark {
  color: #662d91;
}

.morado {
  color: #85009e;
}

.bk-morado {
  background: #85009e;
}

.morado-light {
  color: #b932d3;
}

.no-shadow {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

.titular,
.contact-titular {
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
}

.titular h2,
.contact-titular h2 {
  color: #2d3091;
  font-size: 2em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.titular h3,
.contact-titular h3 {
  color: #28aae1;
  font-weight: 400;
  font-size: 1em;
}

.separador {
  width: 50px;
  height: 4px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.bajo-header {
  height: 100px;
}

header {
  position: fixed;
  width: 100%;
  z-index: 99;
  top: 0;
}

header nav {
  left: 0;
  right: 0;
  margin: 0 auto;
  position: relative;
  border: 1px solid transparent;
}

header .menu-intro,
header .menu-scroll {
  margin: 0;
  padding: 0;
}

.header-intro {
  background: transparent;
  height: auto;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.header-scroll {
  background: white;
  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
  height: 65px;
  -webkit-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}

.header-scroll .menu-intro,
.header-scroll .menu-scroll {
  top: 0.5em;
}

.header-scroll .menu-intro li,
.header-scroll .menu-scroll li {
  padding: 0.5em 0;
}

#logo {
  position: relative;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

#logo h1 {
  font-weight: 500;
  margin: 0;
  padding: 0;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  opacity: 0;
}

#logo h2 {
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  opacity: 0;
}

.logo-intro {
  display: table;
  position: absolute;
  margin-top: 16%;
}

.logo-intro h1 {
  font-size: 4vw;
}

.logo-intro h2 {
  font-size: 1.5vw;
  letter-spacing: 0.5vw;
}

.logo-scroll {
  margin-top: 0.5em !important;
}

.logo-scroll h1 {
  font-size: 1.8em;
}

.logo-scroll h2 {
  font-size: 0.6em;
  letter-spacing: 2pt;
}

#lspa,
#leng {
  position: absolute;
  right: 0;
  top: 12.5px;
  bottom: 0;
  font-size: 9pt;
  border: 1px solid #888888;
  color: #888888;
  width: 25px;
  height: 25px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 5px;
  font-weight: 500;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

#lspa:hover,
#leng:hover {
  border: 1px solid #4d4d4d;
  color: #4d4d4d;
}

#lspa {
  display: none;
}

#menu {
  list-style: none;
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: auto;
  right: 50px;
  top: 0;
}

#menu li {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 150px;
  text-transform: uppercase;
  padding: 1em 0;
  opacity: 0;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

#menu li a {
  text-decoration: none;
  font-size: 12pt;
  color: #888888;
  padding: 0.5em 2em;
  border-radius: 2em;
  text-align: center;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

#menu li a:hover {
  color: white;
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  background: #29abe2;
}

#menu li .activee {
  color: white;
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  background: #29abe2;
}

#menu li .active {
  color: white;
}

#menu li .destroy-active {
  color: #888888 !important;
  background: none !important;
}

@media (max-width: 1100px) {
  #menu {
    width: 100%;
  }
  .logo-scroll {
    text-align: center;
  }
  .logo-scroll h1 {
    font-size: 1.5em;
  }
  .header-scroll {
    height: 105px;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }
  header {
    width: 100%;
  }
  header .logo-intro {
    margin-left: 6%;
    margin-top: 5em;
    width: 80%;
  }
  header .logo-intro h1 {
    font-size: 3em;
  }
  header .logo-intro h2 {
    font-size: 1.5em;
  }
  header nav {
    width: 95% !important;
  }
  header .menu-intro {
    margin-top: 0.5em;
  }
  header .menu-scroll {
    margin-top: 2.8em;
  }
  header #menu {
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    right: 0;
  }
  header #menu li {
    min-width: auto;
  }
  header #menu li a {
    font-weight: 500;
  }
  .bajo-header {
    height: 7em;
  }
}

@media (max-width: 768px) {
  header .logo-intro {
    width: 100%;
    margin-top: 3em;
    margin-left: 0;
    text-align: center;
  }
  header .menu-intro {
    margin-top: 0;
  }
  header #menu li a {
    font-size: 12px;
  }
  header #leng, header #lspa {
    top: 60px;
    right: 0px;
    width: 25px;
    border: 1px solid #888888;
    font-weight: 500;
  }
}

@media (max-width: 500px) {
  .header-scroll {
    height: 100px;
  }
  header .logo-intro {
    width: 80%;
    margin-left: 5%;
    margin-top: 65px;
    text-align: left;
  }
  header .logo-intro h1 {
    font-size: 22pt;
  }
  header .logo-intro h2 {
    font-size: 11pt;
  }
  header .logo-scroll {
    width: 95%;
    margin: 0 auto;
    text-align: left;
    top: 5px;
  }
  header .logo-scroll h1 {
    font-size: 22px;
  }
  header .logo-scroll h2 {
    font-size: 12px;
  }
  header #menu li a {
    color: #4d4d4d;
    font-size: 10px;
    font-weight: 600;
    padding: 1em;
  }
  header #leng, header #lspa {
    top: 16px;
    right: 5px;
    width: 20px;
    height: 20px;
    border: 1px solid #888888;
    font-weight: 500;
    font-size: 9pt;
  }
}

.pos-left,
.pos-right {
  position: absolute;
  opacity: 0;
}

.pos-left {
  margin-left: -5%;
}

.pos-right {
  margin-left: 5%;
}

#des,
#ilust,
#web,
#video,
#bbaa,
#ux {
  -webkit-transition: margin 1s ease-out, -webkit-transform 0.5s ease-out;
  transition: margin 1s ease-out, -webkit-transform 0.5s ease-out;
  -o-transition: margin 1s ease-out, -o-transform 0.5s ease-out;
  transition: margin 1s ease-out, transform 0.5s ease-out;
  transition: margin 1s ease-out, transform 0.5s ease-out, -webkit-transform 0.5s ease-out, -o-transform 0.5s ease-out;
}

html,
body {
  height: 100%;
}

#portada {
  width: 100%;
  height: 100%;
}

#portada .slogan-box {
  margin-top: 30%;
  width: 450px;
}

#portada .slogan-box .slogan {
  font-weight: 400;
  letter-spacing: 1px;
  color: #4d4d4d;
  font-size: 13pt;
  line-height: 1.5em;
}

#portada .slogan-box button {
  padding: 1em 1.5em;
  margin-top: 1em;
  text-transform: uppercase;
  color: white;
  border: none;
  border-radius: 2em;
  font-size: 12pt;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  color: white;
  text-decoration: none;
}

#portada .slogan-box button:focus {
  outline-style: none;
}

#portada .section {
  position: absolute;
  z-index: -2;
  width: 100%;
  height: 100%;
}

#portada .section .fondo {
  width: 100%;
  height: 100%;
}

#portada .section .slogan-box {
  z-index: 2;
}

#portada .section .slogan-box button {
  color: white;
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

#portada #des .slogan-box button {
  background: #29abe2;
}

#portada #des .slogan-box button:hover {
  background: #2d3091;
}

#portada #des .little-explain {
  color: #2d3091;
}

#portada #des .barra-tiempo {
  background: -webkit-linear-gradient(left, #28aae1 0%, #2d3091 100%);
  background: -webkit-gradient(linear, left top, right top, from(#28aae1), to(#2d3091));
  background: -o-linear-gradient(left, #28aae1 0%, #2d3091 100%);
  background: linear-gradient(to right, #28aae1 0%, #2d3091 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$azul-light, endColorstr=$azul-dark, GradientType=1);
}

#portada #ilust .slogan-box button {
  background: #39b54a;
}

#portada #ilust .slogan-box button:hover {
  background: #006736;
}

#portada #ilust .little-explain {
  color: #006736;
}

#portada #ilust .barra-tiempo {
  background: -webkit-linear-gradient(left, #006736 0%, #8bc53e 100%);
  background: -webkit-gradient(linear, left top, right top, from(#006736), to(#8bc53e));
  background: -o-linear-gradient(left, #006736 0%, #8bc53e 100%);
  background: linear-gradient(to right, #006736 0%, #8bc53e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$verde-dark, endColorstr=$verde-light, GradientType=1);
}

#portada #web .slogan-box button {
  background: #ed1e79;
}

#portada #web .slogan-box button:hover {
  background: #9d005c;
}

#portada #web .little-explain {
  color: #9d005c;
}

#portada #web .barra-tiempo {
  background: -webkit-linear-gradient(left, #9d005c 0%, #ed1e79 100%);
  background: -webkit-gradient(linear, left top, right top, from(#9d005c), to(#ed1e79));
  background: -o-linear-gradient(left, #9d005c 0%, #ed1e79 100%);
  background: linear-gradient(to right, #9d005c 0%, #ed1e79 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$magenta-dark, endColorstr=$magenta-light, GradientType=1);
}

#portada #video .slogan-box button {
  background: #00d0d7;
}

#portada #video .slogan-box button:hover {
  background: #02b7ca;
}

#portada #video .little-explain {
  color: #02a8c9;
}

#portada #video .barra-tiempo {
  background: -webkit-linear-gradient(left, #02b7ca 0%, #2fced4 100%);
  background: -webkit-gradient(linear, left top, right top, from(#02b7ca), to(#2fced4));
  background: -o-linear-gradient(left, #02b7ca 0%, #2fced4 100%);
  background: linear-gradient(to right, #02b7ca 0%, #2fced4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$cyan-dark, endColorstr=$cyan-light, GradientType=1);
}

#portada #bbaa .slogan-box button {
  background: #fbb03b;
}

#portada #bbaa .slogan-box button:hover {
  background: #f05923;
}

#portada #bbaa .little-explain {
  color: #f05923;
}

#portada #bbaa .barra-tiempo {
  background: -webkit-linear-gradient(left, #f05923 0%, #fbb03b 100%);
  background: -webkit-gradient(linear, left top, right top, from(#f05923), to(#fbb03b));
  background: -o-linear-gradient(left, #f05923 0%, #fbb03b 100%);
  background: linear-gradient(to right, #f05923 0%, #fbb03b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$naranja-dark, endColorstr=$naranja-light, GradientType=1);
}

#portada #ux .slogan-box button {
  background: #85009e;
}

#portada #ux .slogan-box button:hover {
  background: #662d91;
}

#portada #ux .little-explain {
  color: white;
}

#portada #ux .barra-tiempo {
  background: -webkit-linear-gradient(left, #662d91 0%, #b932d3 100%);
  background: -webkit-gradient(linear, left top, right top, from(#662d91), to(#b932d3));
  background: -o-linear-gradient(left, #662d91 0%, #b932d3 100%);
  background: linear-gradient(to right, #662d91 0%, #b932d3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$morado-dark, endColorstr=$morado-light, GradientType=1);
}

#portada .on-top {
  z-index: 5 !important;
}

#portada .container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

#portada .container .first-ilustration {
  position: absolute;
  right: 5%;
  top: 30%;
}

#portada .little-explain {
  position: absolute;
  bottom: 3em;
  right: 3em;
  font-size: 11pt;
  font-weight: 600;
  letter-spacing: 0.25px;
}

#portada-points {
  position: absolute;
  height: 20px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  margin-bottom: 0;
  z-index: 6;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  bottom: 5em;
}

#portada-points li {
  cursor: pointer;
  list-style: none;
  background: white;
  border-radius: 50%;
  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  border: 5px solid white;
  width: 0px;
  height: 0px;
  margin: auto 8px;
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

#portada-points li:hover, #portada-points li.active {
  width: 10px;
  height: 10px;
  border: 3px solid white;
}

#portada-points li:nth-child(1) {
  background: #2d3091;
}

#portada-points li:nth-child(2) {
  background: #39b54a;
}

#portada-points li:nth-child(3) {
  background: #9d005c;
}

#portada-points li:nth-child(4) {
  background: #02b7ca;
}

#portada-points li:nth-child(5) {
  background: #f05923;
}

#portada-points li:nth-child(6) {
  background: #662d91;
}

.barra-tiempo {
  position: absolute;
  z-index: 4;
  bottom: 0px;
  width: 0%;
  height: 6px;
}

@media (max-width: 1100px) {
  #portada #portada-points li {
    margin: 15px;
    border: 10px solid white;
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  }
  #portada #portada-points li:hover {
    width: 15px;
    height: 15px;
    border: 5px solid white;
    margin-top: 12.5px;
  }
  #portada #portada-points .active {
    width: 15px;
    height: 15px;
    border: 5px solid white;
    margin-top: 12.5px;
  }
  #portada #ux .little-explain {
    color: #662d91;
  }
  #portada .section .fondo {
    width: 100%;
    height: 71%;
    bottom: 0px;
    position: absolute;
    z-index: -2;
  }
  #portada .section .little-explain {
    position: absolute;
    bottom: 2em;
    right: 0;
    left: 0;
    text-align: center;
    margin: auto;
    width: 90%;
    font-size: 11pt;
    font-weight: 700;
  }
  #portada .section .slogan-box {
    margin-top: 17em;
    max-width: 450px;
    width: 80%;
    font-size: 12pt;
  }
  #portada .section .first-ilustration {
    top: auto;
    bottom: 6em;
    width: 40%;
  }
}

@media (max-width: 900px) {
  #portada .section .first-ilustration {
    top: auto;
    bottom: 7em;
    width: 60%;
  }
}

@media (max-width: 768px) {
  #portada .section .slogan-box {
    margin-top: 180px;
    width: 100%;
    max-width: 100%;
  }
  #portada .section .slogan-box button {
    padding: 0.5em 1em;
    font-size: 0.9em;
    margin-top: 0em;
  }
  #portada .section .slogan-box .slogan {
    font-size: 1.2em;
  }
  #portada .section .first-ilustration {
    right: 0;
    left: 0;
    margin: auto;
    top: auto;
    bottom: 150px;
    width: 60%;
  }
  #portada .section .little-explain {
    bottom: 6em;
  }
  #portada .section #portada-points {
    padding: 0;
    bottom: 3em;
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
    width: 85%;
  }
  #portada .section #portada-points li {
    margin: auto;
    margin-top: 15px;
  }
}

@media (max-width: 500px) {
  #portada .section .slogan-box {
    margin-top: 140px;
  }
  #portada .section .slogan-box .slogan {
    font-size: 10pt;
  }
  #portada .section .first-ilustration {
    top: auto;
    bottom: 130px;
    width: 75%;
  }
  #portada .section .little-explain {
    font-size: 10pt;
    bottom: 65px;
    width: 80%;
  }
  #portada #web .first-ilustration,
  #portada #video .first-ilustration,
  #portada #bbaa .first-ilustration {
    bottom: 120px;
  }
  #portada #portada-points {
    bottom: 40px;
  }
  #portada #portada-points .point {
    border: 4px solid white;
  }
  #portada #portada-points .active {
    margin-top: 8px;
  }
}

#portfolio {
  position: relative;
  padding: 3em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
  margin-top: -9px;
}

#portfolio h2 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  color: #2d3091;
}

#portfolio .borde-izda,
#portfolio .borde-dcha {
  position: absolute;
  top: 0px;
  z-index: -4;
  width: auto;
  height: 200vh;
}

#portfolio .borde-izda {
  left: 0;
}

#portfolio .borde-dcha {
  right: 0%;
}

#portfolio #botones-box {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

#portfolio #botones-box div {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 5px;
}

#portfolio #botones-box button {
  border: none;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  height: 100px;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

#portfolio #botones-box button:hover {
  -webkit-box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.5);
          box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.5);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
}

#portfolio #botones-box button:focus {
  outline: none;
}

#portfolio #botones-box .b-todo {
  width: 100%;
  background: none;
  display: block;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

#portfolio #botones-box .b-todo:hover {
  -webkit-box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.5);
          box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.5);
  text-shadow: 0 0px 0px rgba(0, 0, 0, 0);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(36, 36, 36, 0) 86%, rgba(0, 0, 0, 0.1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(86%, rgba(36, 36, 36, 0)), to(rgba(0, 0, 0, 0.1)));
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(36, 36, 36, 0) 86%, rgba(0, 0, 0, 0.1) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(36, 36, 36, 0) 86%, rgba(0, 0, 0, 0.1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#1a000000', GradientType=0);
}

#portfolio #botones-box .b-todo span {
  color: #4d4d4d;
  font-weight: 500;
  font-size: 14pt;
}

#portfolio #botones-box .sp-todo {
  position: relative;
  border-bottom: 2px solid #888888;
}

#portfolio #botones-box .sp-todo:hover #sp-tab {
  height: 15px;
}

#portfolio #botones-box #sp-tab {
  -webkit-transition: all 1s cubic-bezier(0, 0.51, 0.34, 1.44);
  -o-transition: all 1s cubic-bezier(0, 0.51, 0.34, 1.44);
  transition: all 1s cubic-bezier(0, 0.51, 0.34, 1.44);
  position: absolute;
  width: 300px;
  height: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -2px;
}

#portfolio #botones-box .b-des {
  background: url(../../img/basic/otros/des-button.svg) no-repeat;
}

#portfolio #botones-box .b-ilust {
  background: url(../../img/basic/otros/ilust-button.svg) no-repeat;
}

#portfolio #botones-box .b-bbaa {
  background: url(../../img/basic/otros/bbaa-button.svg) no-repeat;
}

#portfolio #botones-box .b-video {
  background: url(../../img/basic/otros/video-button.svg) no-repeat;
}

#portfolio #botones-box .b-web {
  background: url(../../img/basic/otros/web-button.svg) no-repeat;
}

#portfolio #botones-box .b-ux {
  background: url(../../img/basic/otros/ux-button.svg) no-repeat;
}

#portfolio #botones-box .b-des,
#portfolio #botones-box .b-ilust,
#portfolio #botones-box .b-bbaa,
#portfolio #botones-box .b-video,
#portfolio #botones-box .b-web,
#portfolio #botones-box .b-ux {
  -webkit-flex-basis: 33%;
      -ms-flex-preferred-size: 33%;
          flex-basis: 33%;
  -webkit-background-size: cover;
          background-size: cover;
  color: white;
  font-weight: 700;
  font-size: 14pt;
  line-height: 1em;
  font-family: 'Montserrat', sans-serif;
}

.deg-todo {
  background: #ed1e79;
  background: -webkit-linear-gradient(left, #ed1e79 0%, #f7931e 20%, #39b54a 40%, #00c8c4 60%, #29abe2 80%, #662d91 100%);
  background: -webkit-gradient(linear, left top, right top, from(#ed1e79), color-stop(20%, #f7931e), color-stop(40%, #39b54a), color-stop(60%, #00c8c4), color-stop(80%, #29abe2), to(#662d91));
  background: -o-linear-gradient(left, #ed1e79 0%, #f7931e 20%, #39b54a 40%, #00c8c4 60%, #29abe2 80%, #662d91 100%);
  background: linear-gradient(to right, #ed1e79 0%, #f7931e 20%, #39b54a 40%, #00c8c4 60%, #29abe2 80%, #662d91 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1e79', endColorstr='#662d91', GradientType=1);
}

#galeria {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#galeria .width-cero {
  width: 0% !important;
  height: 0% !important;
  margin: 0px !important;
  padding: 0px !important;
  -webkit-box-flex: 0 !important;
  -webkit-flex: 0 0 0 !important;
      -ms-flex: 0 0 0px !important;
          flex: 0 0 0 !important;
  border: none !important;
  opacity: 0 !important;
  -webkit-transition: all 2s ease-in-out, opacity 0s ease-in-out !important;
  -o-transition: all 2s ease-in-out, opacity 0s ease-in-out !important;
  transition: all 2s ease-in-out, opacity 0s ease-in-out !important;
}

#galeria .figure {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 17%;
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  margin: 15px;
  padding: 0;
  cursor: pointer;
  opacity: 1;
  -webkit-transition: all 0s ease-in-out, opacity 2s ease-in-out;
  -o-transition: all 0s ease-in-out, opacity 2s ease-in-out;
  transition: all 0s ease-in-out, opacity 2s ease-in-out;
  border-radius: 5px;
  overflow: hidden;
}

#galeria .figure a {
  height: 100%;
}

#galeria .figure:hover .title-hover {
  width: 100%;
  height: 100%;
  opacity: 1;
}

#galeria .figure:hover .title-hover h3 {
  width: 95%;
  height: 95%;
}

#galeria .figure img {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease;
}

#galeria .figure img:hover {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
       -o-transform: scale(1.1);
          transform: scale(1.1);
}

#galeria .figure li {
  width: 100%;
}

#galeria .figure .title-hover {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px;
  padding: 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  opacity: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#galeria .figure .title-hover h3 {
  color: white;
  width: 100%;
  height: 100%;
  font-size: 12pt;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-transform: uppercase;
  border: 2px solid white;
  border-radius: 4px;
  -webkit-transition: all 0.75s ease-out;
  -o-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}

#galeria .false-figure {
  position: relative;
  cursor: default;
}

#galeria .false-figure img {
  opacity: 0.8;
  z-index: -1;
}

#galeria .false-figure:hover img {
  opacity: 0.2;
}

#galeria .false-figure:hover .false-h3 {
  opacity: 1;
}

#galeria .false-h3 {
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  position: absolute;
  margin-top: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 1em;
  text-align: center;
  font-size: 0.8em;
  font-weight: 500;
}

@media (max-width: 1100px) {
  #portfolio h2 {
    font-size: 3.5vw;
  }
  #portfolio .borde-izda,
  #portfolio .borde-dcha {
    height: 100%;
    width: 30%;
  }
  #portfolio #botones-box {
    width: 100%;
  }
  #portfolio #botones-box .b-des,
  #portfolio #botones-box .b-ilust,
  #portfolio #botones-box .b-bbaa,
  #portfolio #botones-box .b-video,
  #portfolio #botones-box .b-web,
  #portfolio #botones-box .b-ux {
    height: 80px;
    padding: 0.5em;
  }
  #galeria {
    width: 100%;
  }
  #galeria .figure {
    margin: 5px;
  }
  #galeria .figure .title-hover {
    padding: 5px 3px;
  }
  #galeria .figure .title-hover h3 {
    font-size: 0.5em;
  }
  #galeria .false-figure .false-h3 {
    font-size: 0.6em;
    padding: 0.5em;
  }
}

@media (max-width: 768px) {
  #portfolio {
    padding: 2em 1em;
  }
  #portfolio h2 {
    font-size: 5vw;
  }
  #portfolio #botones-box #sp-tab {
    width: 80%;
  }
  #portfolio #botones-box div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin: 0;
  }
  #portfolio #botones-box div .b-des,
  #portfolio #botones-box div .b-ilust,
  #portfolio #botones-box div .b-bbaa,
  #portfolio #botones-box div .b-video,
  #portfolio #botones-box div .b-web,
  #portfolio #botones-box div .b-ux {
    width: 33%;
    height: 60px;
    -webkit-box-flex: 0 0 0;
    -webkit-flex-grow: 0 0 0;
        -ms-flex-positive: 0 0 0;
            flex-grow: 0 0 0;
    margin: 2px;
    font-size: 10pt;
  }
  #galeria {
    margin-top: 20px !important;
  }
  #galeria .figure {
    width: 25%;
  }
  #galeria .figure .title-hover {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  #galeria .figure .title-hover h3 {
    font-size: 0.4em;
  }
  #galeria .false-figure .false-h3 {
    font-size: 0.5em;
    padding: 0.4em;
  }
}

#servicios-box {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#servicios-box .servicio {
  -webkit-flex-basis: 30%;
      -ms-flex-preferred-size: 30%;
          flex-basis: 30%;
  text-align: center;
}

#servicios-box .servicio img {
  max-height: 120px;
}

#servicios-box .servicio h4 {
  font-weight: 700;
  font-size: 1em;
}

#servicios-box .servicio h5 {
  font-weight: 400;
  font-size: 0.75em;
}

#servicios-box .servicio p {
  color: #888888;
  font-size: 0.8em;
  line-height: 1.5em;
}

#herramientas-section {
  background: url("../../img/basic/fondos/fondo-herramientas.svg") no-repeat;
  -webkit-background-size: 100% 100%;
          background-size: 100% 100%;
  padding: 7em 0;
}

#herramientas-box {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

#herramientas-box .herramientas {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  text-align: center;
}

#herramientas-box .herramientas h4 {
  display: block;
  width: 100%;
  color: #888888;
  font-size: 0.9em;
}

#herramientas-box .herramientas .herramienta {
  position: relative;
  -webkit-flex-basis: 18%;
      -ms-flex-preferred-size: 18%;
          flex-basis: 18%;
  cursor: default;
}

#herramientas-box .herramientas .herramienta img {
  -webkit-transition: all 1s cubic-bezier(0.18, 1.21, 0.76, 1.1);
  -o-transition: all 1s cubic-bezier(0.18, 1.21, 0.76, 1.1);
  transition: all 1s cubic-bezier(0.18, 1.21, 0.76, 1.1);
}

#herramientas-box .herramientas .herramienta .info-oculta {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  opacity: 0;
  font-size: 0.8em;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#herramientas-box .herramientas .herramienta .info-oculta p {
  color: #4d4d4d;
  font-weight: 700;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  margin-bottom: 0;
}

#herramientas-box .herramientas .herramienta .info-oculta p:last-child {
  color: #888888;
  font-weight: 400;
}

#herramientas-box .p-top {
  -webkit-transform: translateY(-2em);
      -ms-transform: translateY(-2em);
       -o-transform: translateY(-2em);
          transform: translateY(-2em);
}

#herramientas-box .p-bot {
  -webkit-transform: translateY(2em);
      -ms-transform: translateY(2em);
       -o-transform: translateY(2em);
          transform: translateY(2em);
}

#herramientas-box .img-min {
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
       -o-transform: scale(0);
          transform: scale(0);
  opacity: 0;
}

@media (max-width: 1100px) {
  .titular {
    width: 90%;
  }
  #servicios-box .servicio {
    -webkit-flex-basis: 48%;
        -ms-flex-preferred-size: 48%;
            flex-basis: 48%;
  }
  #herramientas-box {
    width: 90%;
  }
}

@media (max-width: 768px) {
  .titular {
    width: 90%;
  }
  .titular h2 {
    font-size: 14pt;
  }
  .titular h3 {
    font-size: 12pt;
  }
  #servicios-box .servicio {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
  }
  #herramientas-section {
    padding: 3em 1em;
  }
  #herramientas-box {
    width: 90%;
  }
  #herramientas-box .mt8 {
    margin-top: 40px !important;
  }
  #herramientas-box .herramientas {
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
  }
  #herramientas-box .herramientas .herramienta {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    margin-bottom: 2em;
  }
  #herramientas-box .herramientas .herramienta .info-oculta {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
  #herramientas-box .herramientas .herramienta .info-oculta p {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    margin: auto;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #herramientas-box .herramientas .herramienta .info-oculta p:first-child {
    margin-bottom: 0.25em;
  }
  #herramientas-box .herramientas .herramienta .info-oculta p:last-child {
    margin-top: 0.25em;
  }
}

#contacto {
  margin-top: 65px;
  padding: 6em 0;
  background: url("../../img/basic/fondos/fondo-contacto.svg") no-repeat;
  -webkit-background-size: 100% 100%;
          background-size: 100% 100%;
}

#contacto .contact-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  max-width: 1200px;
  width: 90%;
}

#contacto form {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  width: 60%;
}

#contacto form p {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  font-size: 12pt;
  color: #888888;
  margin: 0em 0 0.5em;
}

#contacto form input,
#contacto form textarea {
  border: none;
  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
  background: #f2f2f2;
  border-radius: 5px;
  padding: 1em;
  font-size: 10pt;
  color: black;
  margin-bottom: 1em;
}

#contacto form .sp-input label,
#contacto form .sp-textarea label {
  position: absolute;
  z-index: 2;
  font-size: 10pt;
  height: 10pt;
  margin-top: 20px;
  margin-left: 10pt;
  color: #757575;
  -webkit-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  pointer-events: none;
}

#contacto form .act-label {
  margin-top: 8pt !important;
  font-size: 8pt !important;
  height: 8pt !important;
}

#contacto form .act-input {
  padding: 1.5em 1em 0.5em;
  border: 2px solid #b9b9b9 !important;
}

#contacto form .box-input1 {
  -webkit-flex-basis: 49%;
      -ms-flex-preferred-size: 49%;
          flex-basis: 49%;
  margin-top: 2em;
}

#contacto form .box-input2 {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
}

#contacto form input {
  height: 40pt;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#contacto form input[type="tel"],
#contacto form textarea {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#contacto form input[type="submit"] {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  margin-top: 1em;
  border: none;
  padding: 1em 3em;
  border-radius: 2em;
  background: -webkit-linear-gradient(left, #f05923 0%, #fbb03b 100%);
  background: -webkit-gradient(linear, left top, right top, from(#f05923), to(#fbb03b));
  background: -o-linear-gradient(left, #f05923 0%, #fbb03b 100%);
  background: linear-gradient(to right, #f05923 0%, #fbb03b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$naranja-dark, endColorstr=$naranja-light, GradientType=1);
  text-transform: uppercase;
  color: white;
  font-size: 12pt;
  letter-spacing: 0.5px;
  font-weight: 500;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

#contacto form input[type="submit"]:focus {
  outline-style: none;
}

#contacto form input[type="submit"]:hover {
  background: -webkit-linear-gradient(left, #fbb03b 0%, #f05923 100%);
  background: -webkit-gradient(linear, left top, right top, from(#fbb03b), to(#f05923));
  background: -o-linear-gradient(left, #fbb03b 0%, #f05923 100%);
  background: linear-gradient(to right, #fbb03b 0%, #f05923 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$naranja, endColorstr=$naranja-dark, GradientType=1);
  font-weight: 700;
  -webkit-box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.5);
          box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.5);
}

#contacto .datos-contacto-box {
  position: relative;
  width: 40%;
}

#contacto .datos-contacto-box ul {
  padding-left: 3em;
}

#contacto .datos-contacto-box li {
  margin-bottom: 0.5em;
}

#contacto .datos-contacto-box li:hover {
  font-weight: 500;
}

#contacto .datos-contacto-box li:hover:nth-child(1) p {
  color: #29abe2;
}

#contacto .datos-contacto-box li:hover:nth-child(2) p {
  color: #39b54a;
}

#contacto .datos-contacto-box li:hover:nth-child(3) p {
  color: #ed1e79;
}

#contacto .datos-contacto-box li:hover:nth-child(4) p {
  color: #00d0d7;
}

#contacto .datos-contacto-box li:hover:nth-child(5) p {
  color: #fbb03b;
}

#contacto .datos-contacto-box li:hover:nth-child(6) p {
  color: #85009e;
}

#contacto .datos-contacto-box li:hover img {
  -webkit-transform: scale(0.9);
      -ms-transform: scale(0.9);
       -o-transform: scale(0.9);
          transform: scale(0.9);
}

#contacto .datos-contacto-box a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  color: #888888;
}

#contacto .datos-contacto-box a p {
  padding-left: 15px;
  width: 85%;
  font-size: 12pt;
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

#contacto .datos-contacto-box a img {
  width: 50px !important;
  -webkit-transition: all 0.4s cubic-bezier(0.35, 0.22, 0.32, 1.23);
  -o-transition: all 0.4s cubic-bezier(0.35, 0.22, 0.32, 1.23);
  transition: all 0.4s cubic-bezier(0.35, 0.22, 0.32, 1.23);
}

.cv-shadow {
  content: '';
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  display: none;
}

#cv-modal {
  display: none;
  position: fixed;
  z-index: 222;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 70%;
  max-width: 700px;
  height: 350px;
  background: white;
  border-radius: 10px;
  -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  #cv-modal {
    width: 90%;
  }
}

@media (max-width: 500px) {
  #cv-modal {
    height: 300px;
  }
}

#cv-modal .close {
  position: absolute;
  top: 1em;
  right: 1em;
  width: 25px;
  height: 25px;
  cursor: pointer;
  -webkit-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

#cv-modal .close:hover {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
       -o-transform: scale(1.1);
          transform: scale(1.1);
}

@media (max-width: 500px) {
  #cv-modal .close {
    width: 20px;
    height: 20px;
  }
}

#cv-modal h2 {
  margin: 2em auto;
  width: 80%;
  font-size: 14pt;
  font-weight: 500;
  color: #4d4d4d;
}

@media (max-width: 500px) {
  #cv-modal h2 {
    font-size: 10pt;
    width: 75%;
    -webkit-transform: translateX(-5%);
        -ms-transform: translateX(-5%);
         -o-transform: translateX(-5%);
            transform: translateX(-5%);
  }
}

#cv-modal .cv-table,
#cv-modal .cv-vert,
#cv-modal .cv-hor {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}

#cv-modal .cv-table {
  margin: 2em auto;
  width: 80%;
  height: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: strech;
  -webkit-align-items: strech;
      -ms-flex-align: strech;
          align-items: strech;
}

@media (max-width: 500px) {
  #cv-modal .cv-table {
    font-size: 9pt;
    width: 90%;
  }
}

#cv-modal .cv-table .cv-vert {
  width: 32%;
  height: 99%;
}

#cv-modal .cv-table .cv-hor {
  width: 100%;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

#cv-modal .cv-table .cv-hor:nth-child(1) {
  height: 40px;
}

#cv-modal .cv-table .cv-hor:nth-child(2) {
  height: 60px;
}

#cv-modal .cv-table .cv-hor:nth-child(3) {
  height: 60px;
}

#cv-modal .cv-table .cv-hor:nth-child(1), #cv-modal .cv-table .cv-hor:nth-child(2) {
  border-bottom: 0px solid transparent;
}

#cv-modal .cv-table .cv-hor .cv-button {
  width: 95%;
  padding: 10px 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 10px;
  color: white;
  font-weight: 600;
  text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  -webkit-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

#cv-modal .cv-table .cv-hor .cv-button:hover {
  -webkit-transform: scale(0.98);
      -ms-transform: scale(0.98);
       -o-transform: scale(0.98);
          transform: scale(0.98);
  -webkit-box-shadow: inset 4px 4px 4px rgba(0, 0, 0, 0.2);
          box-shadow: inset 4px 4px 4px rgba(0, 0, 0, 0.2);
}

#cv-modal .cv-table .empty {
  border: 1px solid transparent;
}

#cv-modal .cv-table .cv-tit-left {
  padding-right: 10px;
}

#cv-modal .cv-table .cv-vert:nth-child(2) .cv-hor:nth-child(2) .cv-button {
  background: #39b54a;
}

#cv-modal .cv-table .cv-vert:nth-child(2) .cv-hor:nth-child(3) .cv-button {
  background: #006736;
}

#cv-modal .cv-table .cv-vert:nth-child(3) .cv-hor:nth-child(2) .cv-button {
  background: #29abe2;
}

#cv-modal .cv-table .cv-vert:nth-child(3) .cv-hor:nth-child(3) .cv-button {
  background: #2d3091;
}

@media (max-width: 1200px) {
  #contacto form {
    width: 50%;
  }
  #contacto form p {
    font-size: 11pt;
  }
  #contacto form input[type="text"],
  #contacto form input[type="email"] {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
  }
  #contacto form input[type="email"] {
    margin-top: 0;
  }
  #contacto .datos-contacto-box {
    width: 50%;
  }
  #contacto .datos-contacto-box ul {
    padding-left: 0.5em;
  }
  #contacto .datos-contacto-box ul li a img {
    width: 50px;
  }
}

@media (max-width: 900px) {
  #contacto .contact-container {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
  #contacto .contact-container form {
    width: 100%;
  }
  #contacto .contact-container form p {
    font-size: 10pt;
  }
  #contacto .contact-container .datos-contacto-box {
    width: 100%;
    margin-top: 2em;
  }
}

@media (max-width: 768px) {
  #contacto .contact-container {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
  #contacto .contact-container form p:nth-child(2) {
    margin-bottom: 2em;
  }
  #contacto .contact-container form .box-input1 {
    margin-top: 0;
  }
  #contacto .contact-container form .box-input1,
  #contacto .contact-container form .box-input2 {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
  }
}

footer {
  background: -webkit-linear-gradient(45deg, rgba(3, 184, 203, 0.3) 0%, rgba(29, 186, 176, 0) 19%, rgba(113, 194, 89, 0) 81%, rgba(139, 197, 62, 0.3) 100%);
  background: -o-linear-gradient(45deg, rgba(3, 184, 203, 0.3) 0%, rgba(29, 186, 176, 0) 19%, rgba(113, 194, 89, 0) 81%, rgba(139, 197, 62, 0.3) 100%);
  background: linear-gradient(45deg, rgba(3, 184, 203, 0.3) 0%, rgba(29, 186, 176, 0) 19%, rgba(113, 194, 89, 0) 81%, rgba(139, 197, 62, 0.3) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d03b8cb', endColorstr='#4d8bc53e',GradientType=1 );
}

footer .row {
  text-align: center;
}

footer .first-row {
  padding-top: 3em;
}

footer .first-row a {
  margin: 0 0.6em;
}

footer .second-row p, footer .third-row p {
  font-size: 0.8em;
  color: #888888;
}

footer .second-row a, footer .third-row a {
  color: #2fced4;
  text-decoration: none;
}

footer .third-row p {
  margin-top: 0;
  padding-bottom: 3em;
}

@media (max-width: 1100px) {
  footer .second-row {
    padding: 0 1em;
  }
  footer .second-row p span {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
  }
  footer .second-row .barra-separadora {
    opacity: 0;
    height: 10px;
  }
}

@media (max-width: 1100px) {
  footer .first-row {
    padding: 1em;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
  }
  footer .first-row a {
    margin: 0px 0em;
  }
  footer .third-row {
    padding: 1em;
  }
  footer .third-row p {
    padding: 0;
  }
}

#error {
  margin: auto;
  width: 100%;
  max-width: 1400px;
  height: 100%;
  overflow: hidden;
}

#error .error-title {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 2em 3em;
}

#error .error-title h1 {
  font-size: 18pt;
  font-weight: 400;
  color: #9aa8b2;
}

#error .error-404 {
  width: 70%;
  height: 50vh;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#error .error-404 img {
  width: 100%;
  height: 100%;
  background: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#error .error-404 .back-error {
  z-index: 0;
}

#error .error-404 .cero {
  z-index: 2;
}

#error .error-404 .primer-cuatro {
  z-index: 1;
}

#error .error-404 .segundo-cuatro {
  z-index: 3;
}

#error .error-final {
  position: absolute;
  bottom: 3em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

#error .error-final h2 {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  font-size: 16pt;
  font-weight: 400;
  color: #666;
  text-align: center;
  margin-bottom: 2em;
}

#error .error-final a:nth-child(2) button {
  background: #29abe2;
}

#error .error-final a:nth-child(3) button {
  background: #39b54a;
}

#error .error-final a:nth-child(4) button {
  background: #ed1e79;
}

#error .error-final a:nth-child(5) button {
  background: #00d0d7;
}

#error .error-final a:nth-child(6) button {
  background: #fbb03b;
}

#error .error-final a:nth-child(7) button {
  background: #85009e;
}

#error .error-final button {
  border: none;
  color: white;
  font-size: 12pt;
  padding: 0.5em 2em;
  border-radius: 2em;
  font-weight: 700;
}

@media (max-width: 1024px) {
  #error .error-title {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
  #error .error-title h1 {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    padding: 0;
    margin: 0.25em;
  }
  #error .error-title h1:first-child {
    text-align: left;
  }
  #error .error-title h1:last-child {
    text-align: right;
  }
  #error .error-final {
    width: 90%;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  #error .error-final a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-basis: 30%;
        -ms-flex-preferred-size: 30%;
            flex-basis: 30%;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
    margin-bottom: 0.5em;
  }
}

@media (max-width: 768px) {
  #error .error-title {
    padding: 1em;
  }
  #error .error-title h1 {
    font-size: 12pt;
  }
  #error .error-404 {
    width: 80%;
    height: 30vh;
    position: relative;
  }
  #error .error-final {
    bottom: 0.5em;
  }
  #error .error-final h2 {
    font-size: 10pt;
  }
  #error .error-final a {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-flex-basis: 40%;
        -ms-flex-preferred-size: 40%;
            flex-basis: 40%;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #error .error-final a:nth-child(even) {
    margin-left: -5px;
  }
  #error .error-final a:nth-child(odd) {
    margin-right: -5px;
  }
  #error .error-final a button {
    width: 140px;
    font-size: 9pt;
  }
}

.re-apear,
.sp-apear,
.sp-retard,
.sp2,
.sp3,
.sp4,
.sp5,
.sp6,
.sp7,
.sp8,
.sp9,
.sp10 {
  -webkit-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.sp-apear-zoom,
.sp-apear-left,
.sp-apear-right,
.sp-apear-rotate {
  -webkit-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

.sp2 {
  -webkit-transition-delay: 0.2s !important;
       -o-transition-delay: 0.2s !important;
          transition-delay: 0.2s !important;
}

.sp3 {
  -webkit-transition-delay: 0.3s !important;
       -o-transition-delay: 0.3s !important;
          transition-delay: 0.3s !important;
}

.sp4 {
  -webkit-transition-delay: 0.4s !important;
       -o-transition-delay: 0.4s !important;
          transition-delay: 0.4s !important;
}

.sp5 {
  -webkit-transition-delay: 0.5s !important;
       -o-transition-delay: 0.5s !important;
          transition-delay: 0.5s !important;
}

.sp6 {
  -webkit-transition-delay: 0.6s !important;
       -o-transition-delay: 0.6s !important;
          transition-delay: 0.6s !important;
}

.sp7 {
  -webkit-transition-delay: 0.7s !important;
       -o-transition-delay: 0.7s !important;
          transition-delay: 0.7s !important;
}

.sp8 {
  -webkit-transition-delay: 0.8s !important;
       -o-transition-delay: 0.8s !important;
          transition-delay: 0.8s !important;
}

.sp9 {
  -webkit-transition-delay: 0.9s !important;
       -o-transition-delay: 0.9s !important;
          transition-delay: 0.9s !important;
}

.sp10 {
  -webkit-transition-delay: 1s !important;
       -o-transition-delay: 1s !important;
          transition-delay: 1s !important;
}

.sp11 {
  -webkit-transition-delay: 1.1s !important;
       -o-transition-delay: 1.1s !important;
          transition-delay: 1.1s !important;
}

.sp12 {
  -webkit-transition-delay: 1.2s !important;
       -o-transition-delay: 1.2s !important;
          transition-delay: 1.2s !important;
}

.sp13 {
  -webkit-transition-delay: 1.3s !important;
       -o-transition-delay: 1.3s !important;
          transition-delay: 1.3s !important;
}

.sp14 {
  -webkit-transition-delay: 1.4s !important;
       -o-transition-delay: 1.4s !important;
          transition-delay: 1.4s !important;
}

.sp15 {
  -webkit-transition-delay: 1.5s !important;
       -o-transition-delay: 1.5s !important;
          transition-delay: 1.5s !important;
}

.sp16 {
  -webkit-transition-delay: 1.6s !important;
       -o-transition-delay: 1.6s !important;
          transition-delay: 1.6s !important;
}

.sp17 {
  -webkit-transition-delay: 1.7s !important;
       -o-transition-delay: 1.7s !important;
          transition-delay: 1.7s !important;
}

.sp18 {
  -webkit-transition-delay: 1.8s !important;
       -o-transition-delay: 1.8s !important;
          transition-delay: 1.8s !important;
}

.sp19 {
  -webkit-transition-delay: 1.9s !important;
       -o-transition-delay: 1.9s !important;
          transition-delay: 1.9s !important;
}

.sp20 {
  -webkit-transition-delay: 2s !important;
       -o-transition-delay: 2s !important;
          transition-delay: 2s !important;
}

.sp21 {
  -webkit-transition-delay: 2.1s !important;
       -o-transition-delay: 2.1s !important;
          transition-delay: 2.1s !important;
}

.sp22 {
  -webkit-transition-delay: 2.2s !important;
       -o-transition-delay: 2.2s !important;
          transition-delay: 2.2s !important;
}

.sp23 {
  -webkit-transition-delay: 2.3s !important;
       -o-transition-delay: 2.3s !important;
          transition-delay: 2.3s !important;
}

.sp24 {
  -webkit-transition-delay: 2.4s !important;
       -o-transition-delay: 2.4s !important;
          transition-delay: 2.4s !important;
}

.sp25 {
  -webkit-transition-delay: 2.5s !important;
       -o-transition-delay: 2.5s !important;
          transition-delay: 2.5s !important;
}

.sp26 {
  -webkit-transition-delay: 2.6s !important;
       -o-transition-delay: 2.6s !important;
          transition-delay: 2.6s !important;
}

.sp27 {
  -webkit-transition-delay: 2.7s !important;
       -o-transition-delay: 2.7s !important;
          transition-delay: 2.7s !important;
}

.sp28 {
  -webkit-transition-delay: 2.8s !important;
       -o-transition-delay: 2.8s !important;
          transition-delay: 2.8s !important;
}

.sp29 {
  -webkit-transition-delay: 2.9s !important;
       -o-transition-delay: 2.9s !important;
          transition-delay: 2.9s !important;
}

.sp30 {
  -webkit-transition-delay: 3s !important;
       -o-transition-delay: 3s !important;
          transition-delay: 3s !important;
}

.sp-hide, .re-hide {
  -webkit-transform: translateY(5em);
      -ms-transform: translateY(5em);
       -o-transform: translateY(5em);
          transform: translateY(5em);
  opacity: 0;
}

.sp-hide2 {
  margin-top: 5em;
  opacity: 0;
}

.sp-hide-zoom {
  -webkit-transform: scale(2);
      -ms-transform: scale(2);
       -o-transform: scale(2);
          transform: scale(2);
  opacity: 0;
}

.sp-hide-left {
  -webkit-transform: translateX(-5em);
      -ms-transform: translateX(-5em);
       -o-transform: translateX(-5em);
          transform: translateX(-5em);
  opacity: 0;
}

.sp-hide-right {
  -webkit-transform: translateX(5em);
      -ms-transform: translateX(5em);
       -o-transform: translateX(5em);
          transform: translateX(5em);
  opacity: 0;
}

.sp-hide-rotate {
  -webkit-transform: rotate(45deg) !important;
      -ms-transform: rotate(45deg) !important;
       -o-transform: rotate(45deg) !important;
          transform: rotate(45deg) !important;
  opacity: 0;
}

.sp-retard .sp-hide {
  -webkit-transform: scale(2) translateY(-5em) !important;
      -ms-transform: scale(2) translateY(-5em) !important;
       -o-transform: scale(2) translateY(-5em) !important;
          transform: scale(2) translateY(-5em) !important;
}

.opa-1 {
  opacity: 1 !important;
  -webkit-transform: scale(1) translateX(0) translateY(0) !important;
      -ms-transform: scale(1) translateX(0) translateY(0) !important;
       -o-transform: scale(1) translateX(0) translateY(0) !important;
          transform: scale(1) translateX(0) translateY(0) !important;
}

#cargando {
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: #fff;
  -webkit-background-size: 100px 100px;
          background-size: 100px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.charge-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.charge-box h1,
.charge-box h2 {
  text-align: center;
  margin-top: -20%;
  font-size: 20pt;
  font-weight: 500;
  color: #2d3091;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.charge-box h2 {
  opacity: 0;
}

.lds-ripple {
  position: absolute;
  width: 64px;
  height: 64px;
  margin-top: 2em;
}

.lds-ripple div {
  position: absolute;
  border: 4px solid #29abe2;
  opacity: 1;
  border-radius: 50%;
  -webkit-animation: lds-ripple 10s cubic-bezier(0, 0.2, 0.8, 1) infinite;
       -o-animation: lds-ripple 10s cubic-bezier(0, 0.2, 0.8, 1) infinite;
          animation: lds-ripple 10s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
  -webkit-animation-delay: -0.5s;
       -o-animation-delay: -0.5s;
          animation-delay: -0.5s;
}

@-webkit-keyframes lds-ripple {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
    border: 4px solid #29abe2;
  }
  16% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
    border: 4px solid #39b54a;
  }
  16.01% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
    border: 4px solid #39b54a;
  }
  33% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
    border: 4px solid #ed1e79;
  }
  33.01% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
    border: 4px solid #ed1e79;
  }
  49% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
    border: 4px solid #fbb03b;
  }
  49.01% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
    border: 4px solid #fbb03b;
  }
  65% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
    border: 4px solid #00d0d7;
  }
  65.01% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
    border: 4px solid #00d0d7;
  }
  81% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
    border: 4px solid #85009e;
  }
  81.01% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
    border: 4px solid #85009e;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
    border: 4px solid #29abe2;
  }
}

@-o-keyframes lds-ripple {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
    border: 4px solid #29abe2;
  }
  16% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
    border: 4px solid #39b54a;
  }
  16.01% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
    border: 4px solid #39b54a;
  }
  33% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
    border: 4px solid #ed1e79;
  }
  33.01% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
    border: 4px solid #ed1e79;
  }
  49% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
    border: 4px solid #fbb03b;
  }
  49.01% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
    border: 4px solid #fbb03b;
  }
  65% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
    border: 4px solid #00d0d7;
  }
  65.01% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
    border: 4px solid #00d0d7;
  }
  81% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
    border: 4px solid #85009e;
  }
  81.01% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
    border: 4px solid #85009e;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
    border: 4px solid #29abe2;
  }
}

@keyframes lds-ripple {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
    border: 4px solid #29abe2;
  }
  16% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
    border: 4px solid #39b54a;
  }
  16.01% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
    border: 4px solid #39b54a;
  }
  33% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
    border: 4px solid #ed1e79;
  }
  33.01% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
    border: 4px solid #ed1e79;
  }
  49% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
    border: 4px solid #fbb03b;
  }
  49.01% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
    border: 4px solid #fbb03b;
  }
  65% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
    border: 4px solid #00d0d7;
  }
  65.01% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
    border: 4px solid #00d0d7;
  }
  81% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
    border: 4px solid #85009e;
  }
  81.01% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
    border: 4px solid #85009e;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
    border: 4px solid #29abe2;
  }
}

.mensaje {
  position: fixed;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 90%;
  max-width: 550px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  height: auto;
  display: table;
  background: white;
  border-radius: 5px;
  padding: 2em 3em;
  text-align: center;
  -webkit-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
          box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
  border: 2px solid #ccc;
}

.mensaje h3 {
  font-size: 14pt;
}

.mensaje h4 {
  font-size: 12pt;
  color: #4d4d4d;
  font-weight: 400;
}

.mensaje img {
  position: absolute;
  top: 1em;
  right: 1em;
  cursor: pointer;
}

.mensaje:after {
  background: rgba(255, 255, 255, 0.8);
  position: fixed;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.nad-title1 h1,
.nad-title2 h1,
.nad-title3 h1 {
  color: #1e3662;
  font-size: 30pt;
}

@media (max-width: 1024px) {
  .nad-title1 h1,
  .nad-title2 h1,
  .nad-title3 h1 {
    font-size: 20pt;
  }
}

@media (max-width: 768px) {
  .nad-title1 h1,
  .nad-title2 h1,
  .nad-title3 h1 {
    font-size: 18pt;
  }
}

.nad-title1 h1,
.nad-title3 h1 {
  text-align: left;
}

.nad-title1 img,
.nad-title3 img {
  width: 100px;
  display: block;
}

.nad-title2 h1 {
  text-align: center;
}

.nad-title2 img {
  width: 500px;
  display: block;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .nad-title2 img {
    width: 400px;
  }
}

@media (max-width: 768px) {
  .nad-title2 img {
    width: 250px;
  }
}

#nad-port {
  position: relative;
  background: url("../../img/basic/portfolio/06-ux/003-nadira/1.jpg") no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
  height: 100vh;
}

#nad-port .invite-scroll {
  z-index: 5;
}

@media (max-width: 1024px) {
  #nad-port {
    height: 70vh;
  }
  #nad-port .invite-scroll {
    bottom: 2vh;
  }
}

@media (max-width: 768px) {
  #nad-port {
    height: 50vh;
  }
  #nad-port .invite-scroll {
    bottom: 0%;
  }
}

#nad-port .nad-container {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 1200px;
  width: 90%;
  height: auto;
}

@media (max-width: 1024px) {
  #nad-port .nad-container {
    padding-top: 7.5vh;
  }
}

@media (max-width: 768px) {
  #nad-port .nad-container {
    padding-top: 2.5vh;
  }
}

#nad-port .nad-container img {
  position: absolute;
  width: 100%;
  -webkit-transition: 0.75s ease-out;
  -o-transition: 0.75s ease-out;
  transition: 0.75s ease-out;
  opacity: 0;
  -webkit-transform: scale(5);
      -ms-transform: scale(5);
       -o-transform: scale(5);
          transform: scale(5);
}

@media (max-width: 1024px) {
  #nad-port .nad-container img {
    width: 110%;
    left: -2.5%;
  }
}

#nad-intro {
  background: #f6f6f6;
  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
}

#nad-intro .nad-intro-container {
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

#nad-intro .nad-intro-container .col-6 {
  position: relative;
  -webkit-flex-basis: 40%;
      -ms-flex-preferred-size: 40%;
          flex-basis: 40%;
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
}

@media (max-width: 1024px) {
  #nad-intro .nad-intro-container .col-6 {
    -webkit-flex-basis: 48%;
        -ms-flex-preferred-size: 48%;
            flex-basis: 48%;
  }
}

@media (max-width: 768px) {
  #nad-intro .nad-intro-container .col-6 {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
  }
}

#nad-intro .nad-intro-container .col-6 p {
  font-size: 12pt;
}

#nad-intro .nad-intro-container .col-6 .intro-img {
  position: relative;
}

#nad-intro .nad-intro-container .col-6 .intro-img img {
  position: relative;
  width: 90%;
  z-index: 2;
}

#nad-intro .nad-intro-container .col-6 .intro-img .intro-img1 {
  margin-left: 10%;
}

#nad-intro .nad-intro-container .col-6 .intro-img span {
  position: absolute;
  content: ' ';
  z-index: 1;
  width: 88%;
  height: 95%;
  border: 5px solid #18559b;
}

#nad-intro .nad-intro-container .col-6 .intro-img .span1 {
  top: 8%;
  left: 4%;
}

#nad-intro .nad-intro-container .col-6 .intro-img .span2 {
  top: -8%;
  left: 5%;
}

#nad-intro .nad-intro-container .nad-intro-1 {
  margin-top: 5em;
}

@media (max-width: 1024px) {
  #nad-intro .nad-intro-container .nad-intro-1 {
    margin-top: 2.5em;
  }
}

#nad-intro .nad-intro-container .nad-intro-2 {
  margin-top: 5em;
}

@media (max-width: 1024px) {
  #nad-intro .nad-intro-container .nad-intro-2 {
    margin-top: 2em;
  }
}

#nad-intro .nad-intro-container .nad-intro-3 {
  margin-top: 5em;
  margin-bottom: 5em;
}

@media (max-width: 1024px) {
  #nad-intro .nad-intro-container .nad-intro-3 {
    margin-top: 4em;
  }
}

@media (max-width: 768px) {
  #nad-intro .nad-intro-container .nad-intro-3 {
    -webkit-box-ordinal-group: 5;
    -webkit-order: 4;
        -ms-flex-order: 4;
            order: 4;
    margin: 2em 0 4em;
  }
}

#nad-intro .nad-intro-container .nad-intro-4 {
  margin-top: 7.5em;
}

@media (max-width: 1024px) {
  #nad-intro .nad-intro-container .nad-intro-4 {
    margin-top: 2.5em;
  }
}

@media (max-width: 768px) {
  #nad-intro .nad-intro-container .nad-intro-4 {
    margin-top: 2.5em;
  }
}

#logotipo {
  background: white;
}

.nad-logo img {
  width: 50%;
}

@media (max-width: 1024px) {
  .nad-logo img {
    width: 80%;
  }
}

@media (max-width: 768px) {
  .nad-logo img {
    width: 90%;
  }
}

#tipografia {
  background: #f6f6f6;
  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
}

#tipografia .nad-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-top: 2em;
}

#tipografia .nad-tipo {
  color: #18559b;
}

#tipografia .nad-tipo h2 {
  font-size: 35pt;
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
}

#tipografia .nad-tipo h3 {
  font-size: 20pt;
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
}

#tipografia .nad-tipo h2,
#tipografia .nad-tipo h3,
#tipografia .nad-tipo .big-letter,
#tipografia .nad-tipo span {
  font-family: 'Titillium Web', sans-serif;
  font-weight: 700;
}

#tipografia .nad-tipo .big-letter {
  margin-right: 20px;
}

#tipografia .nad-tipo .box-letter {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
}

#tipografia .nad-tipo .box-letter .big-letter {
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

#tipografia .nad-tipo .box-letter span {
  font-size: 30pt;
  margin-left: 5pt;
}

#tipografia .nad-tipo2 {
  margin: 2em 0em 4em;
  color: black;
}

@media (max-width: 768px) {
  #tipografia .nad-tipo2 {
    margin: 1em 0em 2em;
  }
}

#tipografia .nad-tipo2 h2 {
  font-size: 25pt;
}

#tipografia .nad-tipo2 h3 {
  font-size: 15pt;
}

#tipografia .nad-tipo2 h2,
#tipografia .nad-tipo2 h3,
#tipografia .nad-tipo2 .big-letter,
#tipografia .nad-tipo2 .small-letter span {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}

#tipografia .nad-tipo2 .small-letter {
  padding-right: 20px;
}

#tipografia .nad-tipo h2,
#tipografia .nad-tipo2 h2 {
  margin: 0;
}

#tipografia .nad-tipo h3,
#tipografia .nad-tipo2 h3 {
  margin: 0.25em 0 0.5em;
}

#tipografia .nad-tipo .box-letter,
#tipografia .nad-tipo2 .box-letter {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}

#tipografia .nad-tipo .box-letter .big-letter,
#tipografia .nad-tipo .box-letter .small-letter,
#tipografia .nad-tipo2 .box-letter .big-letter,
#tipografia .nad-tipo2 .box-letter .small-letter {
  opacity: 0.2;
}

#tipografia .nad-tipo .box-letter .big-letter,
#tipografia .nad-tipo2 .box-letter .big-letter {
  font-size: 80pt;
}

@media (max-width: 1024px) {
  #tipografia .nad-tipo .box-letter .big-letter,
  #tipografia .nad-tipo2 .box-letter .big-letter {
    font-size: 50pt;
  }
}

@media (max-width: 768px) {
  #tipografia .nad-tipo .box-letter .big-letter,
  #tipografia .nad-tipo2 .box-letter .big-letter {
    font-size: 30pt;
  }
}

#tipografia .nad-tipo .box-letter .small-letter span,
#tipografia .nad-tipo2 .box-letter .small-letter span {
  font-size: 34pt;
}

@media (max-width: 1024px) {
  #tipografia .nad-tipo .box-letter .small-letter span,
  #tipografia .nad-tipo2 .box-letter .small-letter span {
    font-size: 24pt;
  }
}

@media (max-width: 768px) {
  #tipografia .nad-tipo .box-letter .small-letter span,
  #tipografia .nad-tipo2 .box-letter .small-letter span {
    font-size: 12pt;
  }
}

#colors {
  background: white;
}

#colors .nad-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  padding: 3em 0;
}

#colors .nad-container .nad-title1 {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
}

#colors .nad-container .fila-colors {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#colors .nad-container .fila-colors .box-color {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

#colors .nad-container .fila-colors .box-color div {
  width: 100px;
  border: 20px solid white;
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

#colors .nad-container .fila-colors .box-color div:before {
  content: "";
  display: block;
  padding-top: 100%;
}

@media (max-width: 1024px) {
  #colors .nad-container .fila-colors .box-color div {
    width: 80px;
    border: 2vw solid white;
  }
}

@media (max-width: 768px) {
  #colors .nad-container .fila-colors .box-color div {
    width: 50px;
  }
}

@media (max-width: 500px) {
  #colors .nad-container .fila-colors .box-color div {
    width: 40px;
  }
}

#colors .nad-container .fila-colors .box-color h4 {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  text-align: center;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 500;
  font-size: 18pt;
}

@media (max-width: 1024px) {
  #colors .nad-container .fila-colors .box-color h4 {
    font-size: 14pt;
    margin: 0.5em;
  }
}

@media (max-width: 1024px) {
  #colors .nad-container .fila-colors .box-color h4 {
    font-size: 12pt;
    margin: 0.5em 0;
  }
}

#colors .nad-container .fila1 {
  -webkit-flex-basis: 65%;
      -ms-flex-preferred-size: 65%;
          flex-basis: 65%;
  margin: 2em 0 1em;
}

@media (max-width: 768px) {
  #colors .nad-container .fila1 {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
  }
}

#colors .nad-container .fila2 {
  margin-left: 15%;
  -webkit-flex-basis: 85%;
      -ms-flex-preferred-size: 85%;
          flex-basis: 85%;
}

@media (max-width: 768px) {
  #colors .nad-container .fila2 {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    margin: 0;
  }
}

#colors .nad-container .fila2 div:last-child div {
  border: 20px solid #ededed;
}

@media (max-width: 1024px) {
  #colors .nad-container .fila2 div:last-child div {
    border: 2vw solid #ededed;
  }
}

#iconos {
  padding-top: 1em;
  background: url("../../img/basic/portfolio/06-ux/003-nadira/fondo-iconos.jpg") no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
}

#iconos #nad-servicios,
#iconos #nad-sectors,
#iconos #nad-contact {
  position: relative;
  max-width: 1200px;
  min-height: 100vh;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  #iconos #nad-servicios,
  #iconos #nad-sectors,
  #iconos #nad-contact {
    min-height: 120vh;
  }
}

@media (max-width: 768px) {
  #iconos #nad-servicios,
  #iconos #nad-sectors,
  #iconos #nad-contact {
    min-height: 150vh;
  }
}

@media (max-width: 500px) {
  #iconos #nad-servicios,
  #iconos #nad-sectors,
  #iconos #nad-contact {
    min-height: 200vh;
  }
}

#iconos #nad-servicios .icon-title,
#iconos #nad-sectors .icon-title,
#iconos #nad-contact .icon-title {
  position: absolute;
  z-index: 2;
  color: white;
  font-size: 40pt;
  display: table;
  opacity: 0.3;
  font-family: 'Titillium Web', sans-serif;
}

#iconos #nad-servicios .box-icon,
#iconos #nad-sectors .box-icon,
#iconos #nad-contact .box-icon {
  position: absolute;
  z-index: 2;
  background: white;
  width: 175px;
  height: 175px;
  border-radius: 0.25vw;
  -webkit-transition: all ease-in-out 1s;
  -o-transition: all ease-in-out 1s;
  transition: all ease-in-out 1s;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

#iconos #nad-servicios .box-icon img,
#iconos #nad-sectors .box-icon img,
#iconos #nad-contact .box-icon img {
  width: 55%;
  margin: 5%;
  margin-bottom: 0;
}

#iconos #nad-servicios .box-icon h3,
#iconos #nad-sectors .box-icon h3,
#iconos #nad-contact .box-icon h3 {
  font-size: 12pt;
  line-height: 12pt;
  padding: 0 10px;
  font-family: 'Titillium Web', sans-serif;
  -webkit-flex-basis: 90%;
      -ms-flex-preferred-size: 90%;
          flex-basis: 90%;
  text-align: center;
  color: #1e3662;
}

@media (max-width: 1024px) {
  #iconos #nad-servicios .box-icon,
  #iconos #nad-sectors .box-icon,
  #iconos #nad-contact .box-icon {
    width: 175px;
    height: 175px;
  }
  #iconos #nad-servicios .box-icon h3,
  #iconos #nad-sectors .box-icon h3,
  #iconos #nad-contact .box-icon h3 {
    font-size: 11pt;
    line-height: 11pt;
  }
  #iconos #nad-servicios .box-icon img,
  #iconos #nad-sectors .box-icon img,
  #iconos #nad-contact .box-icon img {
    width: 50%;
    margin: 20px 0 0;
  }
}

@media (max-width: 768px) {
  #iconos #nad-servicios .box-icon,
  #iconos #nad-sectors .box-icon,
  #iconos #nad-contact .box-icon {
    width: 150px;
    height: 150px;
  }
  #iconos #nad-servicios .box-icon h3,
  #iconos #nad-sectors .box-icon h3,
  #iconos #nad-contact .box-icon h3 {
    font-size: 10pt;
    line-height: 10pt;
    -webkit-flex-basis: 95%;
        -ms-flex-preferred-size: 95%;
            flex-basis: 95%;
  }
  #iconos #nad-servicios .box-icon img,
  #iconos #nad-sectors .box-icon img,
  #iconos #nad-contact .box-icon img {
    width: 50%;
    margin: 10px 0 0;
  }
}

#iconos #nad-servicios .icon-title,
#iconos #nad-servicios .cuadrados div,
#iconos #nad-sectors .icon-title,
#iconos #nad-sectors .cuadrados div,
#iconos #nad-contact .icon-title,
#iconos #nad-contact .cuadrados div {
  -webkit-transition: all ease-out 1s;
  -o-transition: all ease-out 1s;
  transition: all ease-out 1s;
}

#iconos #nad-servicios .icon-title {
  top: 5vh;
  left: 32%;
}

#iconos #nad-servicios #nad-icon-1 {
  top: -5vh;
  left: 25%;
}

#iconos #nad-servicios #nad-icon-2 {
  top: 40vh;
  left: 45%;
}

#iconos #nad-servicios #nad-icon-3 {
  top: 65vh;
  left: 30%;
}

#iconos #nad-servicios #nad-icon-4 {
  top: 22vh;
  left: 60%;
}

#iconos #nad-servicios #nad-icon-5 {
  top: 43vh;
  left: 22%;
}

#iconos #nad-servicios #nad-icon-6 {
  top: 100vh;
  left: 50%;
}

#iconos #nad-servicios .cuadrados div {
  position: absolute;
  z-index: 1;
}

#iconos #nad-servicios .cuadrados div:nth-child(1) {
  width: 120px;
  height: 120px;
  border: 6px solid #18559b;
  opacity: 0.6;
  top: -40vh;
  left: 20%;
}

#iconos #nad-servicios .cuadrados div:nth-child(2) {
  width: 34%;
  height: 25vh;
  border: 5px solid #2582c4;
  opacity: 1;
  top: 75vh;
  left: 33%;
}

#iconos #nad-servicios .cuadrados div:nth-child(3) {
  width: 125px;
  height: 125px;
  border: 6px solid #18559b;
  opacity: 1;
  top: -25vh;
  left: 62%;
}

#iconos #nad-servicios .cuadrados div:nth-child(4) {
  width: 30%;
  height: 25vh;
  border: 4px solid #18559b;
  opacity: 1;
  top: 20vh;
  left: 25%;
}

#iconos #nad-servicios .cuadrados div:nth-child(5) {
  width: 120px;
  height: 120px;
  border: 6px solid #18559b;
  opacity: 0.6;
  top: 106vh;
  left: 60%;
}

#iconos #nad-servicios .cuadrados div:nth-child(6) {
  width: 60px;
  height: 60px;
  border: 4px solid #2582c4;
  opacity: 0.4;
  top: 135vh;
  left: 75%;
}

@media (max-width: 1024px) {
  #iconos #nad-servicios .icon-title {
    top: -5vh;
    left: 38%;
  }
  #iconos #nad-servicios #nad-icon-1 {
    top: 10vh;
    left: 10%;
  }
  #iconos #nad-servicios #nad-icon-2 {
    top: 20vh;
    left: 45%;
  }
  #iconos #nad-servicios #nad-icon-3 {
    top: 65vh;
    left: 30%;
  }
  #iconos #nad-servicios #nad-icon-4 {
    top: 40vh;
    left: 70%;
  }
  #iconos #nad-servicios #nad-icon-5 {
    top: 70vh;
    left: 15%;
  }
  #iconos #nad-servicios #nad-icon-6 {
    top: 110vh;
    left: 60%;
  }
  #iconos #nad-servicios .cuadrados div {
    position: absolute;
    z-index: 1;
  }
  #iconos #nad-servicios .cuadrados div:nth-child(1) {
    width: 120px;
    height: 120px;
    top: -20vh;
    left: 5%;
  }
  #iconos #nad-servicios .cuadrados div:nth-child(2) {
    width: 34%;
    height: 35vh;
    top: 50vh;
    left: 20%;
  }
  #iconos #nad-servicios .cuadrados div:nth-child(3) {
    width: 125px;
    height: 125px;
    top: 60vh;
    left: 70%;
  }
  #iconos #nad-servicios .cuadrados div:nth-child(4) {
    width: 35%;
    height: 25vh;
    top: 40vh;
    left: 25%;
  }
  #iconos #nad-servicios .cuadrados div:nth-child(5) {
    width: 25%;
    height: 20vh;
    top: 75vh;
    left: 50%;
  }
  #iconos #nad-servicios .cuadrados div:nth-child(6) {
    width: 100px;
    height: 100px;
    top: 115vh;
    left: 30%;
  }
}

@media (max-width: 768px) {
  #iconos #nad-servicios .icon-title {
    top: -10vh;
    left: 0%;
    font-size: 30pt;
  }
  #iconos #nad-servicios #nad-icon-1 {
    top: -10vh;
    left: 5%;
  }
  #iconos #nad-servicios #nad-icon-2 {
    top: 63vh;
    left: 45%;
  }
  #iconos #nad-servicios #nad-icon-3 {
    top: 100vh;
    left: 20%;
  }
  #iconos #nad-servicios #nad-icon-4 {
    top: 75vh;
    left: 40%;
  }
  #iconos #nad-servicios #nad-icon-5 {
    top: 95vh;
    left: 10%;
  }
  #iconos #nad-servicios #nad-icon-6 {
    top: 215vh;
    left: 45%;
  }
  #iconos #nad-servicios .cuadrados div {
    position: absolute;
    z-index: 1;
  }
  #iconos #nad-servicios .cuadrados div:nth-child(1) {
    width: 120px;
    height: 120px;
    top: 10vh;
    left: 35%;
  }
  #iconos #nad-servicios .cuadrados div:nth-child(2) {
    width: 34%;
    height: 30vh;
    top: 75vh;
    left: 20%;
  }
  #iconos #nad-servicios .cuadrados div:nth-child(3) {
    width: 125px;
    height: 125px;
    top: 90vh;
    left: 40%;
  }
  #iconos #nad-servicios .cuadrados div:nth-child(4) {
    width: 45%;
    height: 40vh;
    top: 70vh;
    left: 10%;
  }
  #iconos #nad-servicios .cuadrados div:nth-child(5) {
    width: 25vh;
    height: 25vh;
    top: 110vh;
    left: 45%;
  }
  #iconos #nad-servicios .cuadrados div:nth-child(6) {
    width: 100px;
    height: 100px;
    top: 140vh;
    left: 30%;
  }
}

#iconos #nad-sectors .icon-title {
  top: -5vh;
  left: 25%;
}

#iconos #nad-sectors #nad-icon-7 {
  top: -8vh;
  left: 25%;
}

#iconos #nad-sectors #nad-icon-8 {
  top: -10vh;
  left: 55%;
}

#iconos #nad-sectors #nad-icon-9 {
  top: 62vh;
  left: 45%;
}

#iconos #nad-sectors #nad-icon-10 {
  top: 80vh;
  left: 20%;
}

#iconos #nad-sectors #nad-icon-11 {
  top: 35vh;
  left: 40%;
}

#iconos #nad-sectors #nad-icon-12 {
  top: 110vh;
  left: 60%;
}

#iconos #nad-sectors .cuadrados div {
  position: absolute;
  z-index: 1;
}

#iconos #nad-sectors .cuadrados div:nth-child(1) {
  width: 125px;
  height: 125px;
  border: 5px solid #2582c4;
  opacity: 0.3;
  top: -20vh;
  left: 20%;
}

#iconos #nad-sectors .cuadrados div:nth-child(2) {
  width: 34%;
  height: 30vh;
  border: 5px solid #2582c4;
  opacity: 1;
  top: 40vh;
  left: 33%;
}

#iconos #nad-sectors .cuadrados div:nth-child(3) {
  width: 20%;
  height: 35vh;
  border: 6px solid #18559b;
  opacity: 1;
  top: 80vh;
  left: 25%;
}

#iconos #nad-sectors .cuadrados div:nth-child(4) {
  width: 25%;
  height: 20vh;
  border: 6px solid #2582c4;
  opacity: 0.5;
  top: 45vh;
  left: 42%;
}

#iconos #nad-sectors .cuadrados div:nth-child(5) {
  width: 120px;
  height: 120px;
  border: 6px solid #18559b;
  opacity: 0.8;
  top: -13vh;
  left: 62%;
}

#iconos #nad-sectors .cuadrados div:nth-child(6) {
  width: 60px;
  height: 60px;
  border: 4px solid #18559b;
  opacity: 0.5;
  top: 115vh;
  left: 70%;
}

@media (max-width: 1024px) {
  #iconos #nad-sectors .icon-title {
    top: 0vh;
    left: 20%;
  }
  #iconos #nad-sectors #nad-icon-7 {
    top: -10vh;
    left: 15%;
  }
  #iconos #nad-sectors #nad-icon-8 {
    top: -5vh;
    left: 65%;
  }
  #iconos #nad-sectors #nad-icon-9 {
    top: 60vh;
    left: 50%;
  }
  #iconos #nad-sectors #nad-icon-10 {
    top: 90vh;
    left: 20%;
  }
  #iconos #nad-sectors #nad-icon-11 {
    top: 60vh;
    left: 45%;
  }
  #iconos #nad-sectors #nad-icon-12 {
    top: 95vh;
    left: 70%;
  }
  #iconos #nad-sectors .cuadrados div {
    position: absolute;
    z-index: 1;
  }
  #iconos #nad-sectors .cuadrados div:nth-child(1) {
    width: 150px;
    height: 150px;
    top: -10vh;
    left: 10%;
  }
  #iconos #nad-sectors .cuadrados div:nth-child(2) {
    width: 40%;
    height: 30vh;
    top: 35vh;
    left: 30%;
  }
  #iconos #nad-sectors .cuadrados div:nth-child(3) {
    width: 20%;
    height: 26vh;
    top: 68vh;
    left: 28%;
  }
  #iconos #nad-sectors .cuadrados div:nth-child(4) {
    width: 25%;
    height: 20vh;
    top: 45vh;
    left: 55%;
  }
  #iconos #nad-sectors .cuadrados div:nth-child(5) {
    width: 150px;
    height: 150px;
    top: 45vh;
    left: 35%;
  }
  #iconos #nad-sectors .cuadrados div:nth-child(6) {
    width: 100px;
    height: 100px;
    top: 100vh;
    left: 65%;
  }
}

@media (max-width: 768px) {
  #iconos #nad-sectors .icon-title {
    top: 0vh;
    left: -20%;
    font-size: 30pt;
  }
  #iconos #nad-sectors #nad-icon-7 {
    top: -10vh;
    left: 15%;
  }
  #iconos #nad-sectors #nad-icon-8 {
    top: 15vh;
    left: 40%;
  }
  #iconos #nad-sectors #nad-icon-9 {
    top: 115vh;
    left: 45%;
  }
  #iconos #nad-sectors #nad-icon-10 {
    top: 170vh;
    left: 20%;
  }
  #iconos #nad-sectors #nad-icon-11 {
    top: 100vh;
    left: 45%;
  }
  #iconos #nad-sectors #nad-icon-12 {
    top: 225vh;
    left: 10%;
  }
  #iconos #nad-sectors .cuadrados div {
    position: absolute;
    z-index: 1;
  }
  #iconos #nad-sectors .cuadrados div:nth-child(1) {
    width: 25vh;
    height: 25vh;
    top: 30vh;
    left: 25%;
  }
  #iconos #nad-sectors .cuadrados div:nth-child(2) {
    width: 40%;
    height: 30vh;
    top: 60vh;
    left: 30%;
  }
  #iconos #nad-sectors .cuadrados div:nth-child(3) {
    width: 35%;
    height: 30vh;
    top: 175vh;
    left: 15%;
  }
  #iconos #nad-sectors .cuadrados div:nth-child(4) {
    width: 25%;
    height: 20vh;
    top: 110vh;
    left: 55%;
  }
  #iconos #nad-sectors .cuadrados div:nth-child(5) {
    width: 150px;
    height: 150px;
    top: 45vh;
    left: 35%;
  }
  #iconos #nad-sectors .cuadrados div:nth-child(6) {
    width: 15vh;
    height: 15vh;
    top: 185vh;
    left: 45%;
  }
}

#iconos #nad-contact .icon-title {
  top: 11vh;
  left: 41%;
}

#iconos #nad-contact #nad-icon-13 {
  top: 60vh;
  left: 15%;
}

#iconos #nad-contact #nad-icon-14 {
  top: -10vh;
  left: 60%;
}

#iconos #nad-contact #nad-icon-15 {
  top: 90vh;
  left: 40%;
}

#iconos #nad-contact .cuadrados div {
  position: absolute;
  z-index: 1;
}

#iconos #nad-contact .cuadrados div:nth-child(1) {
  width: 90px;
  height: 90px;
  border: 5px solid #18559b;
  opacity: 0.7;
  top: -40vh;
  left: 32%;
}

#iconos #nad-contact .cuadrados div:nth-child(2) {
  width: 20%;
  height: 35vh;
  border: 5px solid #2582c4;
  opacity: 0.7;
  top: 45vh;
  left: 18%;
}

#iconos #nad-contact .cuadrados div:nth-child(3) {
  width: 40%;
  height: 35vh;
  border: 5px solid #18559b;
  opacity: 1;
  top: -5vh;
  left: 25%;
}

#iconos #nad-contact .cuadrados div:nth-child(4) {
  width: 20vh;
  height: 20vh;
  border: 7px solid #18559b;
  opacity: 0.5;
  top: 65vh;
  left: 15%;
}

#iconos #nad-contact .cuadrados div:nth-child(5) {
  width: 20%;
  height: 30vh;
  border: 5px solid #2582c4;
  opacity: 0.6;
  top: 23vh;
  left: 62%;
}

#iconos #nad-contact .cuadrados div:nth-child(6) {
  width: 15vh;
  height: 15vh;
  border: 6px solid #18559b;
  opacity: 0.8;
  top: 08vh;
  left: 52%;
}

#iconos #nad-contact .cuadrados div:nth-child(7) {
  width: 10vh;
  height: 10vh;
  border: 4px solid #2582c4;
  opacity: 0.7;
  top: 150vh;
  left: 25%;
}

@media (max-width: 1024px) {
  #iconos #nad-contact .icon-title {
    top: 5vh;
    left: -20%;
  }
  #iconos #nad-contact #nad-icon-13 {
    top: 60vh;
    left: 15%;
  }
  #iconos #nad-contact #nad-icon-14 {
    top: 10vh;
    left: 60%;
  }
  #iconos #nad-contact #nad-icon-15 {
    top: 120vh;
    left: 40%;
  }
  #iconos #nad-contact .cuadrados div {
    position: absolute;
    z-index: 1;
  }
  #iconos #nad-contact .cuadrados div:nth-child(1) {
    width: 10vh;
    height: 10vh;
    top: -15vh;
    left: 6%;
  }
  #iconos #nad-contact .cuadrados div:nth-child(2) {
    width: 25%;
    height: 30vh;
    top: 95vh;
    left: 20%;
  }
  #iconos #nad-contact .cuadrados div:nth-child(4) {
    top: 75vh;
    left: 15%;
  }
  #iconos #nad-contact .cuadrados div:nth-child(5) {
    width: 20%;
    height: 30vh;
    top: 50vh;
    left: 70%;
  }
  #iconos #nad-contact .cuadrados div:nth-child(5) {
    top: 45vh;
  }
  #iconos #nad-contact .cuadrados div:nth-child(6) {
    top: 0vh;
  }
  #iconos #nad-contact .cuadrados div:nth-child(7) {
    width: 15vh;
    height: 15vh;
    top: 95vh;
    left: 65%;
  }
}

@media (max-width: 768px) {
  #iconos #nad-contact .icon-title {
    top: 20vh;
    left: -50%;
    font-size: 30pt;
  }
  #iconos #nad-contact #nad-icon-13 {
    top: 100vh;
    left: 10%;
  }
  #iconos #nad-contact #nad-icon-14 {
    top: 30vh;
    left: 45%;
  }
  #iconos #nad-contact #nad-icon-15 {
    top: 200vh;
    left: 30%;
  }
  #iconos #nad-contact .cuadrados div:nth-child(1) {
    width: 20vh;
    height: 20vh;
    top: 65vh;
    left: 30%;
  }
  #iconos #nad-contact .cuadrados div:nth-child(2) {
    width: 40%;
    height: 50vh;
    top: 90vh;
    left: 20%;
  }
  #iconos #nad-contact .cuadrados div:nth-child(3) {
    width: 45%;
    height: 40vh;
    top: 50vh;
    left: 10%;
  }
  #iconos #nad-contact .cuadrados div:nth-child(4) {
    width: 30vh;
    height: 45vh;
    top: 100vh;
    left: 35%;
  }
  #iconos #nad-contact .cuadrados div:nth-child(5) {
    width: 30%;
    height: 20vh;
    top: 20vh;
    left: 40%;
  }
  #iconos #nad-contact .cuadrados div:nth-child(6) {
    top: 65vh;
    left: 15%;
  }
  #iconos #nad-contact .cuadrados div:nth-child(7) {
    width: 15vh;
    height: 15vh;
    top: 270vh;
    left: 65%;
  }
}

#pantallas {
  background: white;
}

#pantallas .nad-container {
  margin: 0 auto;
  width: 90%;
  max-width: 1200px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#pantallas .nad-container .nad-title1 {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
}

#pantallas .nad-container .col-6 {
  -webkit-flex-basis: 49%;
      -ms-flex-preferred-size: 49%;
          flex-basis: 49%;
  position: relative;
}

#pantallas .nad-container .col-6 img {
  width: 95%;
  border: 1px solid;
  position: relative;
  z-index: 2;
}

#pantallas .nad-container .col-6 h3 {
  font-size: 14pt;
  color: #9f9f9f;
  font-weight: 500;
  margin-bottom: 0.5em;
}

#pantallas .nad-container .col-6 .pant-img {
  position: relative;
  width: 100%;
  height: auto;
}

#pantallas .nad-container .col-6 .pant-img img {
  width: 100%;
}

#pantallas .nad-container .col-6 .pant-img:after {
  content: ' ';
  position: absolute;
  border: 5px solid #18559b;
  width: 99%;
  height: 100%;
  z-index: 0;
}

#pantallas .nad-container .col-6:nth-child(3) {
  margin-top: 20vh;
}

#pantallas .nad-container .col-6:nth-child(4) {
  margin-top: 20vh;
}

#pantallas .nad-container .col-6:nth-child(5) {
  margin-top: -10vh;
}

#pantallas .nad-container .col-6:nth-child(7) {
  margin-top: -15vh;
}

@media (max-width: 1024px) {
  #pantallas .nad-container .col-6 {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
  }
  #pantallas .nad-container .col-6:nth-child(3) {
    margin-top: 10vh;
  }
  #pantallas .nad-container .col-6:nth-child(4) {
    margin-top: 10vh;
  }
  #pantallas .nad-container .col-6:nth-child(5) {
    margin-top: 10vh;
  }
  #pantallas .nad-container .col-6:nth-child(7) {
    margin-top: 10vh;
  }
}

@media (max-width: 768px) {
  #pantallas .nad-container .col-6 h3 {
    font-size: 12pt;
  }
}

#pantallas .nad-container .pant-izda h3 {
  text-align: left;
  padding-left: 5px;
}

#pantallas .nad-container .pant-izda .pant-img:after {
  top: 30px;
  left: -5%;
}

#pantallas .nad-container .pant-dcha h3 {
  text-align: left;
  margin-right: 5%;
  padding-left: 5px;
}

#pantallas .nad-container .pant-dcha .pant-img:after {
  top: 30px;
  left: 5%;
}

#nad-footer {
  background: url("../../img/basic/portfolio/06-ux/003-nadira/fondo-iconos.jpg") no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
  -webkit-box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
          box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
  padding: 2em 0 4em;
}

#nad-footer .nad-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 200px;
}

#nad-footer .nad-container p,
#nad-footer .nad-container h3 {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  text-align: center;
  color: white;
  font-size: 12pt;
}

#nad-footer .nad-container h3 {
  font-size: 14pt;
}

#nad-footer .nad-container .figure a .figure-ux {
  width: 200px;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
       -o-transform: scale(1);
          transform: scale(1);
  -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  margin: 20px;
  -webkit-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

#nad-footer .nad-container .figure a .figure-ux:hover {
  -webkit-transform: scale(0.99);
      -ms-transform: scale(0.99);
       -o-transform: scale(0.99);
          transform: scale(0.99);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  margin: 25px 20px 15px 20px;
}

#far-port {
  position: relative;
  background: url("../../img/basic/portfolio/06-ux/002-farrutx/port-1.jpg") no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
  width: 100%;
  height: 97vh;
}

@media (max-width: 1024px) {
  #far-port {
    height: 80vh;
  }
}

@media (max-width: 768px) {
  #far-port {
    height: 50vh;
  }
}

@media (max-width: 400px) {
  #far-port {
    height: 40vh;
  }
}

#far-port .far-container {
  width: 100%;
}

#far-port .far-container h1 {
  margin-top: 5vh;
  text-align: center;
  color: #494949;
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 32pt;
  -webkit-transition: 0.75s ease-out;
  -o-transition: 0.75s ease-out;
  transition: 0.75s ease-out;
  opacity: 0;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
       -o-transform: scale(0);
          transform: scale(0);
}

@media (min-width: 1440px) {
  #far-port .far-container h1 {
    margin-top: 10vh;
  }
}

@media (max-width: 1024px) {
  #far-port .far-container h1 {
    margin-top: 4vh;
    font-size: 32pt;
  }
}

@media (max-width: 768px) {
  #far-port .far-container h1 {
    margin-top: 2vh;
    font-size: 24pt;
  }
}

@media (max-width: 400px) {
  #far-port .far-container h1 {
    font-size: 18pt;
  }
}

#far-port .far-container img {
  position: absolute;
  width: 100%;
  bottom: 0vh;
  left: 0;
  right: 0;
  -webkit-transition: 0.75s ease-out;
  -o-transition: 0.75s ease-out;
  transition: 0.75s ease-out;
  opacity: 0;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
       -o-transform: scale(0);
          transform: scale(0);
}

@media (max-width: 1024px) {
  #far-port .far-container img {
    width: 120%;
    margin-left: -10%;
    bottom: -2vh;
  }
}

@media (max-width: 768px) {
  #far-port .far-container img {
    width: 140%;
    margin-left: -20%;
  }
}

#far-intro {
  padding: 4em 0;
}

@media (max-width: 1024px) {
  #far-intro {
    padding: 3em 0;
  }
}

#far-intro .far-intro {
  margin: 0 auto;
  max-width: 1000px;
  width: 50%;
}

@media (max-width: 1024px) {
  #far-intro .far-intro {
    width: 60%;
  }
}

@media (max-width: 768px) {
  #far-intro .far-intro {
    width: 80%;
  }
}

#far-intro .far-intro p {
  text-align: center;
  color: #494949;
  line-height: 1.4em;
  font-size: 14pt;
}

@media (max-width: 1024px) {
  #far-intro .far-intro p {
    font-size: 12pt;
  }
}

@media (max-width: 768px) {
  #far-intro .far-intro p {
    font-size: 10pt;
    text-align: left;
  }
}

#persona {
  position: relative;
  background: url("../../img/basic/portfolio/06-ux/002-farrutx/patron-1.jpg") repeat;
  -webkit-background-size: 100px 100px;
          background-size: 100px;
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

#persona:after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.3);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#persona .far-person-container {
  position: relative;
  z-index: 3;
  max-width: 1200px;
  width: 80%;
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 3em 0;
}

#persona .far-person-container .far-person-text {
  width: 70%;
}

@media (max-width: 768px) {
  #persona .far-person-container .far-person-text {
    width: 100%;
  }
}

#persona .far-person-container .sp-person-text {
  position: relative;
  z-index: 3;
  background: rgba(235, 215, 192, 0.65);
  padding: 1em 2em;
  width: 70%;
  color: #341E13;
  font-weight: 600;
  font-size: 14pt;
  line-height: 1.4em;
  -webkit-box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.1);
          box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.1);
}

@media (max-width: 1024px) {
  #persona .far-person-container .sp-person-text {
    font-size: 12pt;
  }
}

@media (max-width: 768px) {
  #persona .far-person-container .sp-person-text {
    width: 80%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  #persona .far-person-container .sp-person-text {
    width: 90%;
    font-size: 10pt;
  }
}

@media (max-width: 768px) {
  #persona .far-person-container .person-list {
    width: 75%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 2em auto;
    padding: 0;
  }
}

@media (max-width: 768px) {
  #persona .far-person-container .person-list {
    width: 75%;
  }
}

#persona .far-person-container .person-list li {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

@media (max-width: 1024px) {
  #persona .far-person-container .person-list li {
    font-size: 12pt;
    margin-bottom: 1em;
  }
}

@media (max-width: 768px) {
  #persona .far-person-container .person-list li {
    width: 100%;
  }
}

@media (max-width: 400px) {
  #persona .far-person-container .person-list li strong {
    width: 100%;
    display: block;
  }
}

#persona .far-person-container .person-list li img {
  width: 40px;
  margin-right: 10px;
}

#persona .far-person-container .img-person {
  -webkit-flex-basis: 40%;
      -ms-flex-preferred-size: 40%;
          flex-basis: 40%;
  padding-bottom: 2em;
}

@media (max-width: 768px) {
  #persona .far-person-container .img-person {
    display: none;
  }
}

#persona .far-person-container .img-person img {
  width: 100%;
  margin: 0;
  margin-top: 0em;
  -webkit-box-shadow: -20px 20px 20px rgba(0, 0, 0, 0.2);
          box-shadow: -20px 20px 20px rgba(0, 0, 0, 0.2);
}

#first-mobile {
  position: relative;
  background: url("../../img/basic/portfolio/06-ux/002-farrutx/patron-3.jpg") repeat;
  -webkit-background-size: 125px 125px;
          background-size: 125px;
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  padding: 4em 0;
}

#first-mobile:after {
  background: white;
  background: -webkit-gradient(linear, left top, left bottom, from(white), to(rgba(255, 255, 255, 0)));
  background: -webkit-linear-gradient(top, white 0%, rgba(255, 255, 255, 0) 100%);
  background: -o-linear-gradient(top, white 0%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0) 100%);
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#first-mobile .far-container {
  position: relative;
  max-width: 1200px;
  width: 80%;
  margin: 0 auto;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#first-mobile .far-container .col-12 h2 {
  font-size: 14pt;
  font-weight: 500;
  color: #494949;
  margin-bottom: 6em;
}

@media (max-width: 400px) {
  #first-mobile .far-container .col-12 h2 {
    margin-bottom: 20vh;
    font-size: 12pt;
  }
}

#first-mobile .far-container .only-mobile {
  width: 34%;
  z-index: 5;
}

@media (max-width: 400px) {
  #first-mobile .far-container .only-mobile {
    width: 50%;
    margin: 0 auto;
  }
}

#first-mobile .far-container .only-mobile img {
  width: 100%;
  -webkit-box-shadow: 0 0 50px 30px white;
          box-shadow: 0 0 50px 30px white;
}

#first-mobile .far-container .rest-mobile {
  width: 64%;
  position: relative;
}

@media (max-width: 400px) {
  #first-mobile .far-container .rest-mobile {
    width: 100%;
    position: absolute;
    z-index: 0;
  }
}

#first-mobile .far-container .rest-mobile h3 {
  color: #494949;
  font-weight: 700;
  font-size: 16pt;
  text-align: right;
  margin-top: 2em;
}

@media (max-width: 400px) {
  #first-mobile .far-container .rest-mobile h3 {
    margin-top: 4em;
    text-align: center;
    font-size: 14pt;
  }
}

#first-mobile .far-container .rest-mobile img {
  position: absolute;
}

#first-mobile .far-container .rest-mobile .mac {
  top: 15%;
  right: 5%;
  width: 50%;
}

#first-mobile .far-container .rest-mobile .macbook {
  top: 35%;
  left: 20%;
  width: 50%;
}

#first-mobile .far-container .rest-mobile .ipad {
  top: 40%;
  left: 0%;
  width: 25%;
}

@media (max-width: 1024px) {
  #first-mobile .far-container .rest-mobile h3 {
    font-size: 14pt;
  }
  #first-mobile .far-container .rest-mobile .mac {
    top: 25%;
    right: 5%;
    width: 55%;
  }
  #first-mobile .far-container .rest-mobile .macbook {
    top: 45%;
    left: 15%;
    width: 55%;
  }
  #first-mobile .far-container .rest-mobile .ipad {
    top: 55%;
    left: 0%;
    width: 25%;
  }
}

@media (max-width: 400px) {
  #first-mobile .far-container .rest-mobile h3 {
    font-size: 12pt;
  }
  #first-mobile .far-container .rest-mobile .mac {
    top: 40vh;
    right: -5%;
    width: 55%;
    opacity: 0.6;
  }
  #first-mobile .far-container .rest-mobile .macbook {
    top: 30vh;
    left: -5%;
    width: 55%;
    opacity: 0.6;
  }
  #first-mobile .far-container .rest-mobile .ipad {
    top: 50vh;
    left: 5%;
    width: 25%;
    opacity: 0.6;
  }
}

#old-actions {
  position: relative;
  z-index: 4;
  padding: 4em;
}

@media (max-width: 1024px) {
  #old-actions {
    padding: 0em;
  }
}

@media (max-width: 400px) {
  #old-actions {
    padding-bottom: 420px;
  }
}

#old-actions .mano-movil {
  position: absolute;
  top: 40vh;
  right: 0;
  z-index: 6;
  width: 35%;
}

@media (max-width: 1024px) {
  #old-actions .mano-movil {
    top: 20vh;
  }
}

@media (max-width: 768px) {
  #old-actions .mano-movil {
    width: 45%;
    right: -5%;
    top: 20vh;
  }
}

@media (max-width: 400px) {
  #old-actions .mano-movil {
    width: auto;
    height: 450px;
    right: -15%;
    top: auto;
    bottom: 0;
  }
}

#old-actions .far-container {
  position: relative;
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
}

#old-actions .far-container .old-action-box {
  position: relative;
  width: 80%;
  margin-left: 10%;
  margin-top: 20vh;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 3em;
  border: 20px solid #B29673;
  background: url("../../img/basic/portfolio/06-ux/002-farrutx/patron-1.jpg") repeat;
  -webkit-background-size: 125px 125px;
          background-size: 125px;
}

@media (max-width: 1024px) {
  #old-actions .far-container .old-action-box {
    padding: 2em;
    margin-top: 10vh;
  }
}

@media (max-width: 768px) {
  #old-actions .far-container .old-action-box {
    padding: 1em;
    width: 90%;
    margin-left: 5%;
  }
}

@media (max-width: 400px) {
  #old-actions .far-container .old-action-box {
    border: 10px solid #B29673;
  }
}

#old-actions .far-container .old-action-box .text-old-actions {
  font-size: 14pt;
  line-height: 1.4em;
  width: 80%;
}

@media (max-width: 1024px) {
  #old-actions .far-container .old-action-box .text-old-actions {
    font-size: 12pt;
  }
}

@media (max-width: 768px) {
  #old-actions .far-container .old-action-box .text-old-actions {
    width: 70%;
  }
}

@media (max-width: 400px) {
  #old-actions .far-container .old-action-box .text-old-actions {
    width: 100%;
    font-size: 10pt;
  }
}

#old-actions .far-container .old-action-box .list-old-actions {
  width: 90%;
}

#old-actions .far-container .old-action-box .list-old-actions ul {
  padding-left: 7.5%;
}

@media (max-width: 400px) {
  #old-actions .far-container .old-action-box .list-old-actions ul {
    padding-left: 5%;
  }
}

#old-actions .far-container .old-action-box .list-old-actions ul li {
  margin-bottom: 2.5em;
  position: relative;
}

#old-actions .far-container .old-action-box .list-old-actions ul li:first-child {
  padding-right: 6em;
}

#old-actions .far-container .old-action-box .list-old-actions ul li img {
  position: absolute;
  width: 5em;
  right: 0;
  top: -1.5em;
}

@media (max-width: 400px) {
  #old-actions .far-container .old-action-box .list-old-actions {
    width: 100%;
  }
}

#old-actions .far-container .old-action-box .plant1,
#old-actions .far-container .old-action-box .plant2,
#old-actions .far-container .old-action-box .plant3,
#old-actions .far-container .old-action-box .plant4 {
  position: absolute;
  z-index: -1;
  width: 25vw;
}

@media (max-width: 1024px) {
  #old-actions .far-container .old-action-box .plant1,
  #old-actions .far-container .old-action-box .plant2,
  #old-actions .far-container .old-action-box .plant3,
  #old-actions .far-container .old-action-box .plant4 {
    width: 30vw;
  }
}

@media (max-width: 768px) {
  #old-actions .far-container .old-action-box .plant1,
  #old-actions .far-container .old-action-box .plant2,
  #old-actions .far-container .old-action-box .plant3,
  #old-actions .far-container .old-action-box .plant4 {
    width: 40vw;
  }
}

@media (max-width: 400px) {
  #old-actions .far-container .old-action-box .plant1,
  #old-actions .far-container .old-action-box .plant2,
  #old-actions .far-container .old-action-box .plant3,
  #old-actions .far-container .old-action-box .plant4 {
    width: 110vw;
  }
}

#old-actions .far-container .old-action-box .plant1 {
  -webkit-transform: rotate(-50deg);
      -ms-transform: rotate(-50deg);
       -o-transform: rotate(-50deg);
          transform: rotate(-50deg);
  top: -9vw;
  left: -9vw;
}

@media (max-width: 400px) {
  #old-actions .far-container .old-action-box .plant1 {
    top: -20vw;
    left: -10vw;
  }
}

#old-actions .far-container .old-action-box .plant2 {
  bottom: -8vw;
  left: -12vw;
  -webkit-transform: rotate(-120deg);
      -ms-transform: rotate(-120deg);
       -o-transform: rotate(-120deg);
          transform: rotate(-120deg);
}

@media (max-width: 400px) {
  #old-actions .far-container .old-action-box .plant2 {
    top: 40vw;
    left: -50vw;
    -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
         -o-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}

#old-actions .far-container .old-action-box .plant3 {
  bottom: 10vw;
  left: -12vw;
  -webkit-transform: rotate(-100deg);
      -ms-transform: rotate(-100deg);
       -o-transform: rotate(-100deg);
          transform: rotate(-100deg);
}

@media (max-width: 400px) {
  #old-actions .far-container .old-action-box .plant3 {
    top: 120vw;
    left: -30vw;
    -webkit-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
         -o-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}

#old-actions .far-container .old-action-box .plant4 {
  bottom: -6vw;
  left: 10vw;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
       -o-transform: rotate(0deg);
          transform: rotate(0deg);
}

@media (max-width: 400px) {
  #old-actions .far-container .old-action-box .plant4 {
    bottom: -20vw;
  }
}

#navegacion {
  position: relative;
  padding: 6em 0;
}

#navegacion:after, #navegacion:before {
  content: '';
  position: absolute;
  background: url("../../img/basic/portfolio/06-ux/002-farrutx/patron-2.jpg") repeat;
  -webkit-background-size: 125px 125px;
          background-size: 125px;
  width: 10%;
  height: 100%;
  top: 0;
  z-index: -1;
}

#navegacion:before {
  left: 0;
}

#navegacion:after {
  right: 0;
}

#navegacion .deg-top,
#navegacion .deg-bottom {
  position: absolute;
  content: '';
  left: 0;
  z-index: 3;
  width: 100%;
  height: 8em;
}

#navegacion .deg-top {
  top: 0;
  background: -webkit-linear-gradient(white 0%, rgba(255, 255, 255, 0) 100%);
  background: -o-linear-gradient(white 0%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(white), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(white 0%, rgba(255, 255, 255, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
}

#navegacion .deg-bottom {
  bottom: 0;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(white));
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
}

#navegacion .far-container {
  max-width: 1200px;
  width: 75%;
  margin: 0 auto;
}

#navegacion .far-container p {
  position: relative;
  z-index: 4;
  width: 75%;
  font-size: 12pt;
  line-height: 1.4em;
  color: #494949;
  margin: 0 auto;
}

@media (max-width: 768px) {
  #navegacion .far-container p {
    width: 75%;
    font-size: 10pt;
  }
}

@media (max-width: 400px) {
  #navegacion .far-container p {
    width: 90%;
  }
}

#navegacion .far-container .nave-box {
  margin: 6em auto 0em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

#navegacion .far-container .nave-box img {
  width: 90%;
  -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}

#navegacion .far-container .nave-box .nave-movil-view {
  -webkit-box-shadow: none;
          box-shadow: none;
  width: 55%;
  margin-top: 1em;
}

@media (max-width: 1024px) {
  #navegacion .far-container .nave-box .nave-movil-view {
    width: 75%;
  }
}

@media (max-width: 768px) {
  #navegacion .far-container .nave-box .nave-movil-view {
    width: 90%;
  }
}

#navegacion .far-container .nave-box .icon {
  margin: 0 auto;
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  height: 40px;
  position: relative;
}

#navegacion .far-container .nave-box .icon img {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  max-width: 40px;
  height: 40px;
  -webkit-box-shadow: none;
          box-shadow: none;
}

@media (max-width: 400px) {
  #navegacion .far-container .nave-box .icon img {
    width: 30px;
  }
}

#navegacion .far-container .nave-box p {
  -webkit-flex-basis: 80%;
      -ms-flex-preferred-size: 80%;
          flex-basis: 80%;
  max-width: 600px;
  text-align: center;
  margin: 2em auto;
}

#arq-inf .far-container {
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
}

#arq-inf .far-container .arq-inf-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

#arq-inf .far-container .arq-inf-box p {
  width: 70%;
  text-align: center;
  margin: 2em auto;
  color: #494949;
  font-size: 12pt;
}

@media (max-width: 400px) {
  #arq-inf .far-container .arq-inf-box p {
    width: 90%;
    font-size: 10pt;
  }
}

#arq-inf .far-container .arq-inf-box h2 {
  text-align: center;
  color: #494949;
  font-size: 18pt;
}

@media (max-width: 768px) {
  #arq-inf .far-container .arq-inf-box h2 {
    font-size: 16pt;
  }
}

@media (max-width: 400px) {
  #arq-inf .far-container .arq-inf-box h2 {
    font-size: 12pt;
  }
}

#arq-inf .far-container .arq-inf-box ol {
  width: 70%;
}

@media (max-width: 400px) {
  #arq-inf .far-container .arq-inf-box ol {
    width: 80%;
  }
}

#arq-inf .far-container .arq-inf-box ol li {
  color: #494949;
  list-style: decimal;
  font-size: 12pt;
  line-height: 1.4em;
  margin-bottom: 2em;
}

@media (max-width: 400px) {
  #arq-inf .far-container .arq-inf-box ol li {
    font-size: 10pt;
  }
}

#arq-inf .far-container .arq-inf-box .img-arq-inf-old {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
  -webkit-justify-content: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

#arq-inf .far-container .arq-inf-box .img-arq-inf-old img {
  width: 30%;
  margin-bottom: 2em;
}

@media (max-width: 768px) {
  #arq-inf .far-container .arq-inf-box .img-arq-inf-old img {
    width: 90%;
  }
}

#arq-inf .far-container .arq-inf-box .prop-arq-inf {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 2em 0;
}

#arq-inf .far-container .arq-inf-box .prop-arq-inf div {
  width: 49%;
}

@media (max-width: 768px) {
  #arq-inf .far-container .arq-inf-box .prop-arq-inf div {
    width: 100%;
    margin: 1em auto;
  }
}

#arq-inf .far-container .arq-inf-box .prop-arq-inf div img {
  width: 100%;
  margin: 0 auto;
  -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}

#arq-inf .far-container .arq-inf-movil {
  padding: 4em 0;
}

@media (max-width: 400px) {
  #arq-inf .far-container .arq-inf-movil {
    padding: 0;
  }
}

#arq-inf .far-container .arq-inf-movil p {
  width: 80%;
  max-width: 600px;
  text-align: center;
  margin: 2em auto;
  color: #494949;
  font-size: 12pt;
}

@media (max-width: 400px) {
  #arq-inf .far-container .arq-inf-movil p {
    font-size: 10pt;
    margin: 0em auto 4em;
  }
}

#arq-inf .far-container .arq-inf-movil .img-ai-movil {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: space-evenly;
  -webkit-justify-content: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  width: 80%;
  margin: 0 auto;
}

@media (max-width: 768px) {
  #arq-inf .far-container .arq-inf-movil .img-ai-movil {
    width: 100%;
  }
}

#arq-inf .far-container .arq-inf-movil .img-ai-movil:after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 200%;
  height: 20%;
  top: 37.5%;
  background: url("../../img/basic/portfolio/06-ux/002-farrutx/patron-2.jpg") repeat;
  -webkit-background-size: 100px 100px;
          background-size: 100px;
}

#arq-inf .far-container .arq-inf-movil .img-ai-movil img {
  width: 22%;
  margin-bottom: 2em;
}

@media (max-width: 400px) {
  #arq-inf .far-container .arq-inf-movil .img-ai-movil img {
    width: 40%;
  }
}

#far-footer {
  background: url("../../img/basic/portfolio/06-ux/002-farrutx/patron-2.jpg") repeat;
  -webkit-background-size: 100px 100px;
          background-size: 100px;
  -webkit-box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
          box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
  padding: 2em 0;
}

#far-footer .far-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 200px;
}

#far-footer .far-container p,
#far-footer .far-container h3 {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  text-align: center;
  color: #341E13;
  font-size: 12pt;
}

@media (max-width: 400px) {
  #far-footer .far-container p,
  #far-footer .far-container h3 {
    font-size: 10pt;
  }
}

#far-footer .far-container h3 {
  font-size: 14pt;
}

@media (max-width: 400px) {
  #far-footer .far-container h3 {
    font-size: 12pt;
  }
}

#far-footer .far-container .figure a .figure-ux {
  width: 200px;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
       -o-transform: scale(1);
          transform: scale(1);
  -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  margin: 20px;
  -webkit-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

#far-footer .far-container .figure a .figure-ux:hover {
  -webkit-transform: scale(0.99);
      -ms-transform: scale(0.99);
       -o-transform: scale(0.99);
          transform: scale(0.99);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  margin: 25px 20px 15px 20px;
}

.marcador {
  width: 100%;
  height: 3px;
  background: black;
  position: fixed;
  left: 0;
  z-index: 50;
}

.marcador2 {
  width: 100%;
  height: 3px;
  background: red;
  position: fixed;
  left: 0;
  z-index: 50;
}

@font-face {
  font-family: "Aller regular";
  src: local("Aller");
}

@font-face {
  font-family: "Aller display";
  src: local("Aller Bold");
}

.fut-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

h1.fut-title {
  width: 100%;
  text-align: center;
  color: #006199;
  font-family: "Aller Display";
  letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  h1.fut-title {
    font-size: 16pt;
  }
}

@media (max-width: 500px) {
  h1.fut-title {
    font-size: 14pt;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 2em;
  }
}

#fut-port {
  position: relative;
  background: url("../../img/basic/portfolio/06-ux/001-futuro/portada/port-0.jpg") no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  #fut-port {
    height: 60vh;
  }
}

#fut-port .invite-scroll {
  z-index: 12;
}

#fut-port .fut-container {
  height: 100%;
  position: relative;
}

#fut-port .fut-container img {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

#fut-port .fut-container img:nth-child(1) {
  -webkit-transform: translateX(10%);
      -ms-transform: translateX(10%);
       -o-transform: translateX(10%);
          transform: translateX(10%);
}

#fut-port .fut-container img:nth-child(2) {
  -webkit-transform: translateY(-20%);
      -ms-transform: translateY(-20%);
       -o-transform: translateY(-20%);
          transform: translateY(-20%);
}

#fut-port .fut-container img:nth-child(3) {
  -webkit-transform: translateY(-20%);
      -ms-transform: translateY(-20%);
       -o-transform: translateY(-20%);
          transform: translateY(-20%);
}

#fut-port .fut-container img:nth-child(4) {
  -webkit-transform: translateY(-20%);
      -ms-transform: translateY(-20%);
       -o-transform: translateY(-20%);
          transform: translateY(-20%);
}

#fut-port .fut-container img:nth-child(5) {
  -webkit-transform: translateY(-20%);
      -ms-transform: translateY(-20%);
       -o-transform: translateY(-20%);
          transform: translateY(-20%);
}

#fut-port .fut-container img:nth-child(6) {
  -webkit-transform: translateY(-20%);
      -ms-transform: translateY(-20%);
       -o-transform: translateY(-20%);
          transform: translateY(-20%);
}

#fut-port .fut-container img:nth-child(7) {
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
       -o-transform: scale(1.2);
          transform: scale(1.2);
}

#fut-intro {
  height: auto;
  padding: 4em 0;
}

@media (max-width: 500px) {
  #fut-intro {
    padding: 2em 0;
  }
}

#fut-intro .fut-container {
  width: 90%;
}

#fut-intro .fut-p-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

@media (max-width: 500px) {
  #fut-intro .fut-p-box {
    padding: 20px 10px;
  }
}

#fut-intro .fut-p-box p {
  font-size: 14pt;
  color: #565656;
  width: 30%;
}

@media (max-width: 1024px) {
  #fut-intro .fut-p-box p {
    width: 45%;
    margin: 40px 0;
  }
}

@media (max-width: 500px) {
  #fut-intro .fut-p-box p {
    width: 100%;
    font-size: 10pt;
    line-height: 1.4em;
    margin: 0;
    margin-bottom: 10px;
  }
}

#fut-intro .fut-intro-img {
  width: 100%;
  height: 200px;
  margin: 100px 0;
  position: relative;
  background: url("../../img/basic/portfolio/06-ux/001-futuro/portada/port-0.jpg") no-repeat;
  -webkit-background-size: 100% 100%;
          background-size: 100% 100%;
}

#fut-intro .fut-intro-img img {
  position: absolute;
  height: 500px;
  top: -150px;
  left: 0;
  right: 0;
  margin: auto;
}

@media (max-width: 1024px) {
  #fut-intro .fut-intro-img img {
    top: -100px;
    height: 400px;
  }
}

@media (max-width: 768px) {
  #fut-intro .fut-intro-img img {
    top: -100px;
    height: 400px;
  }
}

@media (max-width: 500px) {
  #fut-intro .fut-intro-img img {
    top: -50px;
    height: auto;
    width: 40%;
  }
}

#fut-intro .fut-intro-img .sp-mobile-apear {
  -webkit-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

#fut-intro .fut-intro-img .mob-rotate-1 {
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
       -o-transform: rotate(0deg);
          transform: rotate(0deg);
}

#fut-intro .fut-intro-img .mob-rotate-2 {
  -webkit-transform: rotate(-15deg);
      -ms-transform: rotate(-15deg);
       -o-transform: rotate(-15deg);
          transform: rotate(-15deg);
}

#fut-intro .fut-intro-img .mob-rotate-3 {
  -webkit-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
       -o-transform: rotate(-30deg);
          transform: rotate(-30deg);
}

#fut-intro .fut-intro-img .mob-rotate-4 {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

#fut-intro .fut-intro-img .mob-rotate-5 {
  -webkit-transform: rotate(-60deg);
      -ms-transform: rotate(-60deg);
       -o-transform: rotate(-60deg);
          transform: rotate(-60deg);
}

#fut-intro .fut-intro-img .mob-rotate-6 {
  -webkit-transform: rotate(-75deg);
      -ms-transform: rotate(-75deg);
       -o-transform: rotate(-75deg);
          transform: rotate(-75deg);
}

#fut-intro .fut-intro-img .mob-rotate-7 {
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
       -o-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

#app-start {
  background: url("../../img/basic/portfolio/06-ux/001-futuro/portada/port-0.jpg") no-repeat;
  -webkit-background-size: 100% 100%;
          background-size: 100% 100%;
  background-attachment: fixed;
  padding: 4em;
  overflow: hidden;
}

@media (max-width: 768px) {
  #app-start {
    padding: 4em 0;
  }
}

@media (max-width: 500px) {
  #app-start {
    padding: 2em 0;
  }
}

@media (max-width: 768px) {
  #app-start .fut-container {
    width: 95%;
  }
}

#app-start .fases-start {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#app-start .fases-start .sp-img {
  position: relative;
  width: 40%;
  height: 45vh;
}

@media (max-width: 768px) {
  #app-start .fases-start .sp-img {
    width: 48%;
  }
}

@media (max-width: 500px) {
  #app-start .fases-start .sp-img {
    width: 30%;
  }
}

#app-start .fases-start .sp-img img {
  position: fixed;
  height: 40vh;
  margin: auto;
  left: -25%;
  right: 0;
  -webkit-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  opacity: 0;
  -webkit-transform: translate(0px, 200px);
      -ms-transform: translate(0px, 200px);
       -o-transform: translate(0px, 200px);
          transform: translate(0px, 200px);
}

@media (max-width: 500px) {
  #app-start .fases-start .sp-img img {
    width: 25%;
    height: auto;
  }
}

#app-start .fases-start .sp-img .imgPos1,
#app-start .fases-start .sp-img .imgPos2,
#app-start .fases-start .sp-img .imgPos3 {
  opacity: 1;
  top: 5vh;
  left: -45%;
}

@media (max-width: 1024px) {
  #app-start .fases-start .sp-img .imgPos1,
  #app-start .fases-start .sp-img .imgPos2,
  #app-start .fases-start .sp-img .imgPos3 {
    left: -50%;
    top: 10vh;
  }
}

@media (max-width: 500px) {
  #app-start .fases-start .sp-img .imgPos1,
  #app-start .fases-start .sp-img .imgPos2,
  #app-start .fases-start .sp-img .imgPos3 {
    left: 10%;
    right: auto;
  }
}

#app-start .fases-start .sp-img .imgPos1 {
  -webkit-transform: translate(0px, 40px);
      -ms-transform: translate(0px, 40px);
       -o-transform: translate(0px, 40px);
          transform: translate(0px, 40px);
}

@media (max-width: 500px) {
  #app-start .fases-start .sp-img .imgPos1 {
    -webkit-transform: translate(0px, 10px);
        -ms-transform: translate(0px, 10px);
         -o-transform: translate(0px, 10px);
            transform: translate(0px, 10px);
  }
}

#app-start .fases-start .sp-img .imgPos2 {
  -webkit-transform: translate(-20px, 20px);
      -ms-transform: translate(-20px, 20px);
       -o-transform: translate(-20px, 20px);
          transform: translate(-20px, 20px);
}

@media (max-width: 500px) {
  #app-start .fases-start .sp-img .imgPos2 {
    -webkit-transform: translate(-10px, 0px);
        -ms-transform: translate(-10px, 0px);
         -o-transform: translate(-10px, 0px);
            transform: translate(-10px, 0px);
  }
}

#app-start .fases-start .sp-img .imgPos3 {
  -webkit-transform: translate(-40px, 0px);
      -ms-transform: translate(-40px, 0px);
       -o-transform: translate(-40px, 0px);
          transform: translate(-40px, 0px);
}

@media (max-width: 500px) {
  #app-start .fases-start .sp-img .imgPos3 {
    -webkit-transform: translate(-20px, -10px);
        -ms-transform: translate(-20px, -10px);
         -o-transform: translate(-20px, -10px);
            transform: translate(-20px, -10px);
  }
}

#app-start .fases-start .icon-text {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 60%;
  height: 60vh;
}

@media (max-width: 768px) {
  #app-start .fases-start .icon-text {
    width: 50%;
  }
}

@media (max-width: 500px) {
  #app-start .fases-start .icon-text {
    width: 60%;
    margin-left: 10%;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    height: auto;
  }
}

#app-start .fases-start .icon-text img {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 50px;
}

@media (max-width: 768px) {
  #app-start .fases-start .icon-text img {
    width: 35px;
    margin-top: 20px;
  }
}

@media (max-width: 500px) {
  #app-start .fases-start .icon-text img {
    margin: 0 auto;
    width: 30px;
  }
}

#app-start .fases-start .icon-text div {
  padding-left: 30px;
}

@media (max-width: 768px) {
  #app-start .fases-start .icon-text div {
    padding-left: 10px;
  }
}

#app-start .fases-start .icon-text div h2 {
  font-size: 15pt;
  color: #006199;
  font-weight: 800;
}

@media (max-width: 768px) {
  #app-start .fases-start .icon-text div h2 {
    font-size: 12pt;
  }
}

@media (max-width: 500px) {
  #app-start .fases-start .icon-text div h2 {
    font-size: 11pt;
  }
}

#app-start .fases-start .icon-text div p {
  font-size: 12pt;
  line-height: 16pt;
}

@media (max-width: 500px) {
  #app-start .fases-start .icon-text div p {
    font-size: 10pt;
    line-height: 14pt;
  }
}

#princ-pant {
  position: relative;
  background: white;
  padding: 4em 0;
}

@media (max-width: 768px) {
  #princ-pant {
    padding: 2em 0;
  }
}

#princ-pant h1 {
  margin-bottom: 2em;
}

#princ-pant .fut-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
  -webkit-justify-content: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  display: flex;
}

@media (max-width: 768px) {
  #princ-pant .fut-container {
    width: 85%;
  }
}

#princ-pant .big-mobile {
  position: relative;
  width: 40%;
  height: 75vh;
}

@media (max-width: 768px) {
  #princ-pant .big-mobile {
    display: none;
  }
}

#princ-pant .big-mobile .buttons-container {
  width: 330px;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

@media (max-width: 768px) {
  #princ-pant .big-mobile .buttons-container {
    width: 100%;
  }
}

#princ-pant .big-mobile .big-mobile-img {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 330px;
}

@media (max-width: 768px) {
  #princ-pant .big-mobile .big-mobile-img {
    width: 100%;
  }
}

#princ-pant .big-mobile .big-a {
  position: absolute;
  z-index: 2;
  width: 70px;
  height: 70px;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

#princ-pant .big-mobile .big-a:hover {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
       -o-transform: scale(1.1);
          transform: scale(1.1);
}

#princ-pant .big-mobile .big-a .big-button {
  width: 50px;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 25px;
}

#princ-pant .big-mobile .big-a span {
  position: absolute;
  bottom: 0;
  width: 100%;
  font-size: 12px;
  font-weight: 600;
  color: #006199;
  text-align: center;
}

#princ-pant .big-mobile #prest {
  top: 190px;
  left: 35px;
}

@media (max-width: 768px) {
  #princ-pant .big-mobile #prest {
    top: 24%;
    left: 10%;
    width: 22%;
  }
}

#princ-pant .big-mobile #cards {
  top: 220px;
  left: 130px;
}

@media (max-width: 768px) {
  #princ-pant .big-mobile #cards {
    top: 28%;
    left: 38%;
    width: 22%;
  }
}

#princ-pant .big-mobile #fondos {
  top: 190px;
  left: 225px;
}

@media (max-width: 768px) {
  #princ-pant .big-mobile #fondos {
    top: 24%;
    left: 65%;
    width: 22%;
  }
}

#princ-pant .big-mobile #seguros {
  top: 295px;
  left: 35px;
}

@media (max-width: 768px) {
  #princ-pant .big-mobile #seguros {
    top: 36%;
    left: 10%;
    width: 22%;
  }
}

#princ-pant .big-mobile #cuentas {
  top: 325px;
  left: 130px;
}

@media (max-width: 768px) {
  #princ-pant .big-mobile #cuentas {
    top: 41%;
    left: 38%;
    width: 22%;
  }
}

#princ-pant .big-mobile #hipotecas {
  top: 295px;
  left: 225px;
}

@media (max-width: 768px) {
  #princ-pant .big-mobile #hipotecas {
    top: 36%;
    left: 65%;
    width: 22%;
  }
}

#princ-pant .big-mobile #pensiones {
  top: 410px;
  left: 70px;
}

@media (max-width: 768px) {
  #princ-pant .big-mobile #pensiones {
    top: 48%;
    left: 10%;
    width: 22%;
  }
}

#princ-pant .big-mobile #bolsa {
  top: 410px;
  left: 185px;
}

@media (max-width: 768px) {
  #princ-pant .big-mobile #bolsa {
    top: 48%;
    left: 65%;
    width: 22%;
  }
}

#princ-pant .pant {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  width: 35%;
}

@media (max-width: 768px) {
  #princ-pant .pant {
    width: 50%;
  }
}

@media (max-width: 500px) {
  #princ-pant .pant {
    width: 100%;
  }
}

#princ-pant .pant .pant-text {
  height: auto;
  padding: 0;
  margin: 0;
}

#princ-pant .pant .pant-text p {
  font-size: 12pt;
  line-height: 1.1em;
}

@media (max-width: 768px) {
  #princ-pant .pant .pant-text p {
    font-size: 12pt;
    line-height: 1.4em;
  }
}

@media (max-width: 500px) {
  #princ-pant .pant .pant-text p {
    font-size: 10pt;
    text-align: center;
    padding-bottom: 1em;
  }
}

#princ-pant .pant .pant-text .pant-title {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

@media (max-width: 500px) {
  #princ-pant .pant .pant-text .pant-title {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

#princ-pant .pant .pant-text .pant-title img {
  width: 60px;
}

@media (max-width: 768px) {
  #princ-pant .pant .pant-text .pant-title img {
    width: 50px;
  }
}

@media (max-width: 500px) {
  #princ-pant .pant .pant-text .pant-title img {
    width: 35px;
  }
}

#princ-pant .pant .pant-text .pant-title h2 {
  margin-left: 15px;
  width: 75%;
  color: #006199;
}

@media (max-width: 768px) {
  #princ-pant .pant .pant-text .pant-title h2 {
    font-size: 14pt;
  }
}

@media (max-width: 500px) {
  #princ-pant .pant .pant-text .pant-title h2 {
    font-size: 12pt;
    width: auto;
  }
}

#princ-pant .pant .changing-img {
  margin: 0 auto;
  width: 300px;
  -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
          box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  #princ-pant .pant .changing-img {
    width: auto;
    height: 70vh;
  }
}

#princ-pant .pant .cont {
  position: relative;
  bottom: 0;
  width: 100%;
  text-align: center;
  height: 20px;
  color: #006199;
  font-weight: 600;
}

#princ-pant .pant .cont .cont-control {
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
       -o-transform: scale(1.1);
          transform: scale(1.1);
  padding: 0em 1em;
}

#fut-nav {
  background: url("../../img/basic/portfolio/06-ux/001-futuro/portada/port-0.jpg") no-repeat;
  -webkit-background-size: 100% 100%;
          background-size: 100% 100%;
  background-attachment: fixed;
  padding: 4em;
}

@media (max-width: 500px) {
  #fut-nav {
    padding: 2em 0em;
  }
}

#fut-nav .fut-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
  -webkit-justify-content: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  width: 90%;
  max-width: 1200px;
}

#fut-nav .mid-col {
  width: 40%;
}

@media (max-width: 768px) {
  #fut-nav .mid-col {
    width: 49%;
  }
}

@media (max-width: 500px) {
  #fut-nav .mid-col:nth-child(2) {
    width: 55%;
  }
  #fut-nav .mid-col:nth-child(3) {
    width: 43%;
  }
}

#fut-nav .mid-col .text-col {
  height: 60vh;
}

@media (max-width: 500px) {
  #fut-nav .mid-col .text-col {
    height: auto;
    padding-bottom: 30vh;
  }
}

#fut-nav .mid-col .text-col p {
  width: 80%;
  margin-top: 20px;
  margin-left: 10%;
}

@media (max-width: 768px) {
  #fut-nav .mid-col .text-col p {
    font-size: 12pt;
    line-height: 1.4em;
  }
}

@media (max-width: 500px) {
  #fut-nav .mid-col .text-col p {
    font-size: 10pt;
    margin-left: 0;
    width: 95%;
  }
}

#fut-nav .mid-col .text-col img {
  height: 45px;
  max-width: 150px;
}

@media (max-width: 500px) {
  #fut-nav .mid-col .text-col img {
    height: 30px;
    margin: 0 auto;
  }
}

#fut-nav .big-img-col {
  position: relative;
  height: 80vh;
}

#fut-nav .big-img-col img {
  position: absolute;
  right: 0;
  height: 100%;
  opacity: 0;
  -webkit-transform: translateX(50px);
      -ms-transform: translateX(50px);
       -o-transform: translateX(50px);
          transform: translateX(50px);
  -webkit-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

@media (max-width: 768px) {
  #fut-nav .big-img-col img {
    height: 500px;
  }
}

@media (max-width: 500px) {
  #fut-nav .big-img-col img {
    height: 220px;
  }
}

#fut-nav .big-img-col .fix-col {
  position: fixed;
  top: 10vh;
  left: 10%;
  right: 0;
  margin: 0 auto;
  width: 50%;
  height: 60vh;
}

@media (max-width: 768px) {
  #fut-nav .big-img-col .fix-col {
    left: auto;
    width: 40%;
    right: 10%;
  }
}

@media (max-width: 500px) {
  #fut-nav .big-img-col .fix-col {
    width: 30%;
    right: 5%;
    height: auto;
  }
}

#fut-nav .big-img-col .bigImgCol-fine {
  position: absolute;
  opacity: 1;
  -webkit-transform: translateX(0px);
      -ms-transform: translateX(0px);
       -o-transform: translateX(0px);
          transform: translateX(0px);
}

#fut-nav .big-img-col .img-shadow {
  -webkit-filter: brightness(0.4);
          filter: brightness(0.4);
}

#fut-forms {
  background: url("../../img/basic/portfolio/06-ux/001-futuro/portada/port-0.jpg") no-repeat;
  -webkit-background-size: 100% 100%;
          background-size: 100% 100%;
  background-attachment: fixed;
  padding: 4em;
}

@media (max-width: 500px) {
  #fut-forms {
    padding: 2em 0em;
  }
}

#fut-forms .fut-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 95%;
  max-width: 1200px;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

#fut-forms .fut-container .big-image img {
  width: 75%;
}

#fut-forms .fut-container .mid-col {
  display: inline;
  text-align: center;
}

#fut-forms .fut-container .mid-col:nth-child(2) {
  width: 49%;
}

#fut-forms .fut-container .mid-col:nth-child(3) {
  width: 49%;
}

@media (max-width: 768px) {
  #fut-forms .fut-container .mid-col:nth-child(2) {
    width: 40%;
  }
  #fut-forms .fut-container .mid-col:nth-child(3) {
    width: 59%;
  }
}

@media (max-width: 500px) {
  #fut-forms .fut-container .mid-col:nth-child(2) {
    width: 30%;
  }
  #fut-forms .fut-container .mid-col:nth-child(3) {
    width: 59%;
  }
}

#fut-forms .fut-container .mid-col img {
  width: 70%;
}

@media (max-width: 500px) {
  #fut-forms .fut-container .mid-col img {
    width: 90%;
  }
}

#fut-forms .fut-container .mid-col p {
  text-align: left;
}

@media (max-width: 500px) {
  #fut-forms .fut-container .mid-col p {
    font-size: 10pt;
  }
}

#fut-forms .fut-container .mid-col .form-text-1,
#fut-forms .fut-container .mid-col .form-text-2,
#fut-forms .fut-container .mid-col .form-text-3 {
  margin-top: 8em;
}

@media (max-width: 1024px) {
  #fut-forms .fut-container .mid-col .form-text-1,
  #fut-forms .fut-container .mid-col .form-text-2,
  #fut-forms .fut-container .mid-col .form-text-3 {
    margin-top: 5em;
  }
}

@media (max-width: 768px) {
  #fut-forms .fut-container .mid-col .form-text-1,
  #fut-forms .fut-container .mid-col .form-text-2,
  #fut-forms .fut-container .mid-col .form-text-3 {
    margin-top: 2em;
  }
}

#fut-responsive {
  padding: 4em 0;
}

#fut-responsive .fut-title {
  margin-bottom: 2em;
}

#fut-responsive .fut-container {
  position: relative;
  height: 180vh;
  width: 90%;
}

@media (max-width: 768px) {
  #fut-responsive .fut-container {
    height: 120vh;
  }
}

#fut-responsive .fut-container p {
  font-size: 16pt;
  font-weight: 600;
  line-height: 1.5em;
  width: 45%;
  color: #006199;
  position: absolute;
}

@media (max-width: 1024px) {
  #fut-responsive .fut-container p {
    width: 60%;
    font-size: 14pt;
  }
}

@media (max-width: 768px) {
  #fut-responsive .fut-container p {
    font-size: 12pt;
  }
}

@media (max-width: 500px) {
  #fut-responsive .fut-container p {
    font-size: 10pt;
    width: 80%;
  }
}

#fut-responsive .fut-container .res-img {
  position: absolute;
  -webkit-transition: all 2s ease-out;
  -o-transition: all 2s ease-out;
  transition: all 2s ease-out;
}

#fut-responsive .fut-container p:first-child {
  top: 0;
  left: 50%;
}

@media (max-width: 1024px) {
  #fut-responsive .fut-container p:first-child {
    left: 40%;
  }
}

@media (max-width: 500px) {
  #fut-responsive .fut-container p:first-child {
    left: 20%;
  }
}

#fut-responsive .fut-container .res-p {
  top: 50vh;
  left: 0%;
  z-index: 3;
}

@media (max-width: 1024px) {
  #fut-responsive .fut-container .res-p {
    top: 60vh;
  }
}

@media (max-width: 768px) {
  #fut-responsive .fut-container .res-p {
    top: 40vh;
  }
}

@media (max-width: 500px) {
  #fut-responsive .fut-container .res-p {
    top: 60vh;
  }
}

#fut-responsive .fut-container .res-img:nth-child(2) {
  width: 12.5%;
  top: -25vh;
  left: 30%;
}

@media (max-width: 1024px) {
  #fut-responsive .fut-container .res-img:nth-child(2) {
    left: 20%;
  }
}

@media (max-width: 768px) {
  #fut-responsive .fut-container .res-img:nth-child(2) {
    left: 10%;
    width: 14%;
  }
}

@media (max-width: 500px) {
  #fut-responsive .fut-container .res-img:nth-child(2) {
    left: 0%;
    width: 14%;
  }
}

#fut-responsive .fut-container .res-img:nth-child(3) {
  width: 18%;
  top: 55vh;
  left: 45%;
}

@media (max-width: 1024px) {
  #fut-responsive .fut-container .res-img:nth-child(3) {
    top: 70vh;
    left: 50%;
  }
}

@media (max-width: 768px) {
  #fut-responsive .fut-container .res-img:nth-child(3) {
    top: 50vh;
    left: 40%;
    width: 20%;
  }
}

@media (max-width: 500px) {
  #fut-responsive .fut-container .res-img:nth-child(3) {
    left: 35%;
    top: 60vh;
  }
}

#fut-responsive .fut-container .res-img:nth-child(4) {
  width: 30%;
  top: 75vh;
  left: 60%;
  z-index: 2;
}

@media (max-width: 1024px) {
  #fut-responsive .fut-container .res-img:nth-child(4) {
    left: 70%;
    top: 80vh;
  }
}

@media (max-width: 768px) {
  #fut-responsive .fut-container .res-img:nth-child(4) {
    top: 60vh;
    left: 70%;
    width: 35%;
  }
}

@media (max-width: 500px) {
  #fut-responsive .fut-container .res-img:nth-child(4) {
    top: 70vh;
    left: 75%;
  }
}

#fut-responsive .fut-container .res-img:nth-child(6) {
  width: 16%;
  top: 40vh;
  left: 50%;
  z-index: 1;
}

@media (max-width: 768px) {
  #fut-responsive .fut-container .res-img:nth-child(6) {
    top: 18vh;
    left: 55%;
    width: 20%;
  }
}

@media (max-width: 500px) {
  #fut-responsive .fut-container .res-img:nth-child(6) {
    top: 35vh;
    left: 70%;
    width: 20%;
  }
}

#fut-responsive .fut-container .res-img:nth-child(7) {
  width: 22%;
  top: 140vh;
  left: 30%;
  z-index: 1;
}

@media (max-width: 1024px) {
  #fut-responsive .fut-container .res-img:nth-child(7) {
    top: 155vh;
  }
}

@media (max-width: 768px) {
  #fut-responsive .fut-container .res-img:nth-child(7) {
    top: 120vh;
    left: 30%;
    width: 28%;
  }
}

@media (max-width: 500px) {
  #fut-responsive .fut-container .res-img:nth-child(7) {
    top: 140vh;
    left: 35%;
  }
}

#fut-responsive .fut-container .res-img:nth-child(8) {
  width: 40%;
  margin: 55vh 0% 0% 0%;
  z-index: 1;
}

@media (max-width: 768px) {
  #fut-responsive .fut-container .res-img:nth-child(8) {
    margin: 0;
    top: 30vh;
    left: 0%;
    width: 42%;
  }
}

@media (max-width: 500px) {
  #fut-responsive .fut-container .res-img:nth-child(8) {
    margin: 0;
    top: 50vh;
    left: 0%;
    width: 42%;
  }
}

#fut-footer {
  background: url("../../img/basic/portfolio/06-ux/001-futuro/portada/port-0.jpg") no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
  -webkit-box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
          box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
  padding: 2em 0 6em;
}

#fut-footer .fut-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 200px;
}

#fut-footer .fut-container p,
#fut-footer .fut-container h3 {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  text-align: center;
  color: #003858;
  font-size: 12pt;
}

#fut-footer .fut-container h3 {
  font-size: 14pt;
}

#fut-footer .fut-container .figure a .figure-ux {
  width: 200px;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
       -o-transform: scale(1);
          transform: scale(1);
  -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  margin: 20px;
  -webkit-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

#fut-footer .fut-container .figure a .figure-ux:hover {
  -webkit-transform: scale(0.99);
      -ms-transform: scale(0.99);
       -o-transform: scale(0.99);
          transform: scale(0.99);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  margin: 25px 20px 15px 20px;
}

.invite-scroll {
  color: white;
  text-shadow: 2px 0px 10px rgba(0, 0, 0, 0.25);
  text-align: center;
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
       -o-transform: rotate(90deg);
          transform: rotate(90deg);
  font-size: 80px;
  height: 60px;
  width: 60px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0;
  position: absolute;
  z-index: 99;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0.5em;
  cursor: pointer;
}

@media (max-width: 1200px) {
  .invite-scroll {
    bottom: 1em;
    text-shadow: 2px 0px 10px rgba(0, 0, 0, 0.5);
  }
}

#present {
  position: relative;
  display: block;
  height: 80vh;
}

#present .present-img {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  background: url("../../img/basic/otros/contact-me.jpg") no-repeat;
  -webkit-background-size: contain;
          background-size: contain;
}

#present .contact-titular {
  margin-top: 4em;
  text-align: left;
}

#present .contact-titular h2 {
  margin-bottom: 0em;
}

#present .contact-titular h3 {
  margin-top: 0.25em;
}

#present .contact-titular .text-present {
  margin-top: 2em;
}

#present .contact-titular p {
  color: #4d4d4d;
  font-size: 12pt;
  line-height: 1.4em;
}

#present .contact-titular p strong {
  color: #333;
  font-weight: 500;
}

#present .contact-titular .button-box {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 2em;
  height: auto;
}

#present .contact-titular .button-box button {
  position: relative;
  border: none;
  background: none;
  text-align: center;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

#present .contact-titular .button-box button a {
  display: block;
  text-decoration: none;
  font-size: 12pt;
  padding: 0.5em 2em;
  border-radius: 2em;
  cursor: pointer;
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

#present .contact-titular .button-box .primary-button {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
}

#present .contact-titular .button-box .primary-button a {
  border: 2px solid #29abe2;
  background: #29abe2;
  color: #fff;
}

#present .contact-titular .button-box .primary-button a:hover {
  color: #ffffff;
  background: #2d3091;
  border: 2px solid #2d3091;
  font-weight: bold;
  letter-spacing: 0.5px;
}

#present .contact-titular .button-box .secondary-button {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}

#present .contact-titular .button-box .secondary-button a {
  background: #fff;
  color: #29abe2;
  border: 2px solid #29abe2;
}

#present .contact-titular .button-box .secondary-button a:hover {
  color: #ffffff;
  background: #28aae1;
  border: 2px solid #28aae1;
  font-weight: bold;
  letter-spacing: 0.5px;
}

#present .menu-sobre {
  position: fixed;
  z-index: 5;
  height: 70%;
  right: 10%;
  top: 15%;
  bottom: 0;
  margin: auto;
  width: 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}

@media (max-width: 1100px) {
  #present .menu-sobre {
    display: none;
  }
}

#present .menu-sobre:after {
  content: '';
  position: absolute;
  width: 1px;
  height: 88%;
  background: #ccc;
  z-index: -1;
}

#present .menu-sobre li {
  width: 15px;
  height: 15px;
  border: 1.25px solid #29abe2;
  background: white;
  border-radius: 50%;
  cursor: pointer;
}

#present .menu-sobre li:hover span {
  right: 35px;
  opacity: 1;
}

#present .menu-sobre li span {
  -webkit-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  font-family: 'montserrat', sans-serif;
  position: absolute;
  z-index: -1;
  right: -12%;
  text-align: right;
  width: 180px;
  height: 12pt;
  opacity: 0;
  font-size: 500;
  font-size: 12pt;
  color: #4d4d4d;
  cursor: default;
}

#refer-box {
  position: relative;
}

#refer-box .refer {
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.text-box {
  position: relative;
  min-height: 250px;
}

.text-box .int {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  margin-top: 0;
  max-width: 500px;
  height: 250px;
  background: #f2f2f2;
  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
}

.text-box .int .up {
  position: absolute;
  top: 1em;
  left: 1em;
}

.text-box .int .down {
  position: absolute;
  bottom: 1em;
  right: 1em;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
       -o-transform: rotate(180deg);
          transform: rotate(180deg);
}

.text-box .int p {
  padding: 3em 5em;
  font-size: 12pt;
  color: #888888;
  line-height: 1.5em;
}

.text-box .int .ver-mas {
  position: absolute;
  bottom: 1em;
  left: 0;
  right: 0;
  margin: 0 auto;
  color: #888888;
  font-size: 0.75em;
  font-style: italic;
  text-align: center;
}

.text-box .int:after {
  position: absolute;
  content: '';
  width: 40px;
  height: 30px;
  background: url("../../img/basic/otros/fin-refer.svg") no-repeat;
  -webkit-background-size: contain;
          background-size: contain;
  bottom: -30px;
  left: 50px;
}

.text-box .int .hide {
  font-size: 0;
}

.text-box .int .close {
  display: none;
}

.refer-dcha,
.refer-dcha2,
.refer-izda,
.refer-izda2,
.refer-none {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 0;
}

.refer-dcha .person,
.refer-dcha2 .person,
.refer-izda .person,
.refer-izda2 .person,
.refer-none .person {
  display: none;
}

.refer-view {
  position: relative;
  z-index: 2;
  left: 0;
  right: 0;
  margin: auto;
}

.refer-dcha,
.refer-izda {
  z-index: 0;
}

.refer-dcha .int,
.refer-izda .int {
  height: 225px;
}

.refer-dcha2,
.refer-izda2 {
  z-index: -1;
}

.refer-dcha2 .int,
.refer-izda2 .int {
  height: 200px;
}

.refer-none {
  opacity: 0;
  z-index: -3;
}

.refer-none .int {
  height: 175px;
}

.refer-none {
  -webkit-transform: translateX(0px) translateY(0px);
      -ms-transform: translateX(0px) translateY(0px);
       -o-transform: translateX(0px) translateY(0px);
          transform: translateX(0px) translateY(0px);
}

.refer-view {
  -webkit-transform: translateX(0px) translateY(0px);
      -ms-transform: translateX(0px) translateY(0px);
       -o-transform: translateX(0px) translateY(0px);
          transform: translateX(0px) translateY(0px);
}

.refer-dcha {
  -webkit-transform: translateX(20px) translateY(10px);
      -ms-transform: translateX(20px) translateY(10px);
       -o-transform: translateX(20px) translateY(10px);
          transform: translateX(20px) translateY(10px);
}

.refer-dcha2 {
  -webkit-transform: translateX(35px) translateY(25px);
      -ms-transform: translateX(35px) translateY(25px);
       -o-transform: translateX(35px) translateY(25px);
          transform: translateX(35px) translateY(25px);
}

.refer-izda {
  -webkit-transform: translateX(-20px) translateY(10px);
      -ms-transform: translateX(-20px) translateY(10px);
       -o-transform: translateX(-20px) translateY(10px);
          transform: translateX(-20px) translateY(10px);
}

.refer-izda2 {
  -webkit-transform: translateX(-35px) translateY(25px);
      -ms-transform: translateX(-35px) translateY(25px);
       -o-transform: translateX(-35px) translateY(25px);
          transform: translateX(-35px) translateY(25px);
}

.refer-big {
  height: auto;
}

.refer-big .int {
  position: relative;
  max-width: 600px;
  min-height: 300px;
  height: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.refer-big .int p {
  padding: 3em 3em;
  position: relative;
  margin: auto;
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.refer-big .int .hide {
  font-size: 1em;
}

.refer-big .int .close {
  display: inline !important;
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  cursor: pointer;
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  width: 22.5px;
}

.refer-big .int .up,
.refer-big .int .down {
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  opacity: 0;
}

.refer-big .person {
  margin-top: 100px;
}

.person {
  margin-top: 2em;
}

.person h3 {
  font-size: 1.5em;
  color: #4d4d4d;
  font-weight: 700;
  margin: 0;
  text-align: center;
}

.person h4 {
  margin: 0.5em;
  color: #888888;
  text-align: center;
}

.cuadro-control {
  width: 240px;
  height: 100px;
  margin: 50px auto;
}

.cuadro-control .control-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}

.cuadro-control .control-box .izda-arrow,
.cuadro-control .control-box .dcha-arrow {
  font-size: 2em;
  -webkit-flex-basis: 10%;
      -ms-flex-preferred-size: 10%;
          flex-basis: 10%;
  color: #888888;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.cuadro-control .control-box .izda-arrow:hover,
.cuadro-control .control-box .dcha-arrow:hover {
  -webkit-transform: scale(1.15);
      -ms-transform: scale(1.15);
       -o-transform: scale(1.15);
          transform: scale(1.15);
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
       -o-transform-origin: center;
          transform-origin: center;
  color: #ccc;
}

.cuadro-control .control-box .dcha-arrow {
  float: right;
}

.cuadro-control .control-box .controls {
  width: 150px;
  margin-bottom: 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  padding-top: 10px;
}

.cuadro-control .control-box .controls .separador1,
.cuadro-control .control-box .controls .separador2 {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  height: 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}

.cuadro-control .control {
  width: 12.5px;
  height: 12.5px;
  background: #888888;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.cuadro-control .control:hover {
  background: #29abe2 !important;
  -webkit-transform: scale(1.15);
      -ms-transform: scale(1.15);
       -o-transform: scale(1.15);
          transform: scale(1.15);
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
       -o-transform-origin: center;
          transform-origin: center;
}

.cuadro-control .active {
  background: #29abe2 !important;
}

.cuadro-control .number-control {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  width: 100%;
  color: #4d4d4d;
  height: 20px;
  text-align: center;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}

.trayect-buttons-box,
.formacion-buttons-box,
.hide-trayect-buttons-box,
.hide-formacion-buttons-box,
.hide-idiomas-buttons-box {
  position: relative;
  width: 90%;
  max-width: 1000px;
  margin: 0 auto 50px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.trayect-buttons-box .trayect-buttons,
.trayect-buttons-box .formacion-buttons,
.trayect-buttons-box .hide-trayect-button,
.trayect-buttons-box .hide-formacion-button,
.trayect-buttons-box .hide-idiomas-buttons,
.formacion-buttons-box .trayect-buttons,
.formacion-buttons-box .formacion-buttons,
.formacion-buttons-box .hide-trayect-button,
.formacion-buttons-box .hide-formacion-button,
.formacion-buttons-box .hide-idiomas-buttons,
.hide-trayect-buttons-box .trayect-buttons,
.hide-trayect-buttons-box .formacion-buttons,
.hide-trayect-buttons-box .hide-trayect-button,
.hide-trayect-buttons-box .hide-formacion-button,
.hide-trayect-buttons-box .hide-idiomas-buttons,
.hide-formacion-buttons-box .trayect-buttons,
.hide-formacion-buttons-box .formacion-buttons,
.hide-formacion-buttons-box .hide-trayect-button,
.hide-formacion-buttons-box .hide-formacion-button,
.hide-formacion-buttons-box .hide-idiomas-buttons,
.hide-idiomas-buttons-box .trayect-buttons,
.hide-idiomas-buttons-box .formacion-buttons,
.hide-idiomas-buttons-box .hide-trayect-button,
.hide-idiomas-buttons-box .hide-formacion-button,
.hide-idiomas-buttons-box .hide-idiomas-buttons {
  margin: 10px;
  background: url("../../img/icons/works/fondo.svg") no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
  -webkit-flex-basis: 250px;
      -ms-flex-preferred-size: 250px;
          flex-basis: 250px;
  height: 250px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  cursor: pointer;
  border-radius: 5px;
  -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.trayect-buttons-box .trayect-buttons img,
.trayect-buttons-box .formacion-buttons img,
.trayect-buttons-box .hide-trayect-button img,
.trayect-buttons-box .hide-formacion-button img,
.trayect-buttons-box .hide-idiomas-buttons img,
.formacion-buttons-box .trayect-buttons img,
.formacion-buttons-box .formacion-buttons img,
.formacion-buttons-box .hide-trayect-button img,
.formacion-buttons-box .hide-formacion-button img,
.formacion-buttons-box .hide-idiomas-buttons img,
.hide-trayect-buttons-box .trayect-buttons img,
.hide-trayect-buttons-box .formacion-buttons img,
.hide-trayect-buttons-box .hide-trayect-button img,
.hide-trayect-buttons-box .hide-formacion-button img,
.hide-trayect-buttons-box .hide-idiomas-buttons img,
.hide-formacion-buttons-box .trayect-buttons img,
.hide-formacion-buttons-box .formacion-buttons img,
.hide-formacion-buttons-box .hide-trayect-button img,
.hide-formacion-buttons-box .hide-formacion-button img,
.hide-formacion-buttons-box .hide-idiomas-buttons img,
.hide-idiomas-buttons-box .trayect-buttons img,
.hide-idiomas-buttons-box .formacion-buttons img,
.hide-idiomas-buttons-box .hide-trayect-button img,
.hide-idiomas-buttons-box .hide-formacion-button img,
.hide-idiomas-buttons-box .hide-idiomas-buttons img {
  width: 100px;
}

.trayect-buttons-box .trayect-buttons .trayect-title,
.trayect-buttons-box .formacion-buttons .trayect-title,
.trayect-buttons-box .hide-trayect-button .trayect-title,
.trayect-buttons-box .hide-formacion-button .trayect-title,
.trayect-buttons-box .hide-idiomas-buttons .trayect-title,
.formacion-buttons-box .trayect-buttons .trayect-title,
.formacion-buttons-box .formacion-buttons .trayect-title,
.formacion-buttons-box .hide-trayect-button .trayect-title,
.formacion-buttons-box .hide-formacion-button .trayect-title,
.formacion-buttons-box .hide-idiomas-buttons .trayect-title,
.hide-trayect-buttons-box .trayect-buttons .trayect-title,
.hide-trayect-buttons-box .formacion-buttons .trayect-title,
.hide-trayect-buttons-box .hide-trayect-button .trayect-title,
.hide-trayect-buttons-box .hide-formacion-button .trayect-title,
.hide-trayect-buttons-box .hide-idiomas-buttons .trayect-title,
.hide-formacion-buttons-box .trayect-buttons .trayect-title,
.hide-formacion-buttons-box .formacion-buttons .trayect-title,
.hide-formacion-buttons-box .hide-trayect-button .trayect-title,
.hide-formacion-buttons-box .hide-formacion-button .trayect-title,
.hide-formacion-buttons-box .hide-idiomas-buttons .trayect-title,
.hide-idiomas-buttons-box .trayect-buttons .trayect-title,
.hide-idiomas-buttons-box .formacion-buttons .trayect-title,
.hide-idiomas-buttons-box .hide-trayect-button .trayect-title,
.hide-idiomas-buttons-box .hide-formacion-button .trayect-title,
.hide-idiomas-buttons-box .hide-idiomas-buttons .trayect-title {
  width: 80%;
  height: 1em;
}

.trayect-buttons-box .trayect-buttons .trayect-title h2,
.trayect-buttons-box .formacion-buttons .trayect-title h2,
.trayect-buttons-box .hide-trayect-button .trayect-title h2,
.trayect-buttons-box .hide-formacion-button .trayect-title h2,
.trayect-buttons-box .hide-idiomas-buttons .trayect-title h2,
.formacion-buttons-box .trayect-buttons .trayect-title h2,
.formacion-buttons-box .formacion-buttons .trayect-title h2,
.formacion-buttons-box .hide-trayect-button .trayect-title h2,
.formacion-buttons-box .hide-formacion-button .trayect-title h2,
.formacion-buttons-box .hide-idiomas-buttons .trayect-title h2,
.hide-trayect-buttons-box .trayect-buttons .trayect-title h2,
.hide-trayect-buttons-box .formacion-buttons .trayect-title h2,
.hide-trayect-buttons-box .hide-trayect-button .trayect-title h2,
.hide-trayect-buttons-box .hide-formacion-button .trayect-title h2,
.hide-trayect-buttons-box .hide-idiomas-buttons .trayect-title h2,
.hide-formacion-buttons-box .trayect-buttons .trayect-title h2,
.hide-formacion-buttons-box .formacion-buttons .trayect-title h2,
.hide-formacion-buttons-box .hide-trayect-button .trayect-title h2,
.hide-formacion-buttons-box .hide-formacion-button .trayect-title h2,
.hide-formacion-buttons-box .hide-idiomas-buttons .trayect-title h2,
.hide-idiomas-buttons-box .trayect-buttons .trayect-title h2,
.hide-idiomas-buttons-box .formacion-buttons .trayect-title h2,
.hide-idiomas-buttons-box .hide-trayect-button .trayect-title h2,
.hide-idiomas-buttons-box .hide-formacion-button .trayect-title h2,
.hide-idiomas-buttons-box .hide-idiomas-buttons .trayect-title h2 {
  margin: 0 auto;
}

.trayect-buttons-box .trayect-buttons .trayect-title h4,
.trayect-buttons-box .formacion-buttons .trayect-title h4,
.trayect-buttons-box .hide-trayect-button .trayect-title h4,
.trayect-buttons-box .hide-formacion-button .trayect-title h4,
.trayect-buttons-box .hide-idiomas-buttons .trayect-title h4,
.formacion-buttons-box .trayect-buttons .trayect-title h4,
.formacion-buttons-box .formacion-buttons .trayect-title h4,
.formacion-buttons-box .hide-trayect-button .trayect-title h4,
.formacion-buttons-box .hide-formacion-button .trayect-title h4,
.formacion-buttons-box .hide-idiomas-buttons .trayect-title h4,
.hide-trayect-buttons-box .trayect-buttons .trayect-title h4,
.hide-trayect-buttons-box .formacion-buttons .trayect-title h4,
.hide-trayect-buttons-box .hide-trayect-button .trayect-title h4,
.hide-trayect-buttons-box .hide-formacion-button .trayect-title h4,
.hide-trayect-buttons-box .hide-idiomas-buttons .trayect-title h4,
.hide-formacion-buttons-box .trayect-buttons .trayect-title h4,
.hide-formacion-buttons-box .formacion-buttons .trayect-title h4,
.hide-formacion-buttons-box .hide-trayect-button .trayect-title h4,
.hide-formacion-buttons-box .hide-formacion-button .trayect-title h4,
.hide-formacion-buttons-box .hide-idiomas-buttons .trayect-title h4,
.hide-idiomas-buttons-box .trayect-buttons .trayect-title h4,
.hide-idiomas-buttons-box .formacion-buttons .trayect-title h4,
.hide-idiomas-buttons-box .hide-trayect-button .trayect-title h4,
.hide-idiomas-buttons-box .hide-formacion-button .trayect-title h4,
.hide-idiomas-buttons-box .hide-idiomas-buttons .trayect-title h4 {
  display: none;
}

.trayect-buttons-box .trayect-buttons:hover,
.trayect-buttons-box .formacion-buttons:hover,
.trayect-buttons-box .hide-trayect-button:hover,
.trayect-buttons-box .hide-formacion-button:hover,
.trayect-buttons-box .hide-idiomas-buttons:hover,
.formacion-buttons-box .trayect-buttons:hover,
.formacion-buttons-box .formacion-buttons:hover,
.formacion-buttons-box .hide-trayect-button:hover,
.formacion-buttons-box .hide-formacion-button:hover,
.formacion-buttons-box .hide-idiomas-buttons:hover,
.hide-trayect-buttons-box .trayect-buttons:hover,
.hide-trayect-buttons-box .formacion-buttons:hover,
.hide-trayect-buttons-box .hide-trayect-button:hover,
.hide-trayect-buttons-box .hide-formacion-button:hover,
.hide-trayect-buttons-box .hide-idiomas-buttons:hover,
.hide-formacion-buttons-box .trayect-buttons:hover,
.hide-formacion-buttons-box .formacion-buttons:hover,
.hide-formacion-buttons-box .hide-trayect-button:hover,
.hide-formacion-buttons-box .hide-formacion-button:hover,
.hide-formacion-buttons-box .hide-idiomas-buttons:hover,
.hide-idiomas-buttons-box .trayect-buttons:hover,
.hide-idiomas-buttons-box .formacion-buttons:hover,
.hide-idiomas-buttons-box .hide-trayect-button:hover,
.hide-idiomas-buttons-box .hide-formacion-button:hover,
.hide-idiomas-buttons-box .hide-idiomas-buttons:hover {
  -webkit-box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.5);
          box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.5);
}

.trayect-buttons-box .trayect-buttons:hover img,
.trayect-buttons-box .formacion-buttons:hover img,
.trayect-buttons-box .hide-trayect-button:hover img,
.trayect-buttons-box .hide-formacion-button:hover img,
.trayect-buttons-box .hide-idiomas-buttons:hover img,
.formacion-buttons-box .trayect-buttons:hover img,
.formacion-buttons-box .formacion-buttons:hover img,
.formacion-buttons-box .hide-trayect-button:hover img,
.formacion-buttons-box .hide-formacion-button:hover img,
.formacion-buttons-box .hide-idiomas-buttons:hover img,
.hide-trayect-buttons-box .trayect-buttons:hover img,
.hide-trayect-buttons-box .formacion-buttons:hover img,
.hide-trayect-buttons-box .hide-trayect-button:hover img,
.hide-trayect-buttons-box .hide-formacion-button:hover img,
.hide-trayect-buttons-box .hide-idiomas-buttons:hover img,
.hide-formacion-buttons-box .trayect-buttons:hover img,
.hide-formacion-buttons-box .formacion-buttons:hover img,
.hide-formacion-buttons-box .hide-trayect-button:hover img,
.hide-formacion-buttons-box .hide-formacion-button:hover img,
.hide-formacion-buttons-box .hide-idiomas-buttons:hover img,
.hide-idiomas-buttons-box .trayect-buttons:hover img,
.hide-idiomas-buttons-box .formacion-buttons:hover img,
.hide-idiomas-buttons-box .hide-trayect-button:hover img,
.hide-idiomas-buttons-box .hide-formacion-button:hover img,
.hide-idiomas-buttons-box .hide-idiomas-buttons:hover img {
  -webkit-transform: translateY(4px);
      -ms-transform: translateY(4px);
       -o-transform: translateY(4px);
          transform: translateY(4px);
}

.trayect-buttons-box .trayect-buttons:hover h2,
.trayect-buttons-box .formacion-buttons:hover h2,
.trayect-buttons-box .hide-trayect-button:hover h2,
.trayect-buttons-box .hide-formacion-button:hover h2,
.trayect-buttons-box .hide-idiomas-buttons:hover h2,
.formacion-buttons-box .trayect-buttons:hover h2,
.formacion-buttons-box .formacion-buttons:hover h2,
.formacion-buttons-box .hide-trayect-button:hover h2,
.formacion-buttons-box .hide-formacion-button:hover h2,
.formacion-buttons-box .hide-idiomas-buttons:hover h2,
.hide-trayect-buttons-box .trayect-buttons:hover h2,
.hide-trayect-buttons-box .formacion-buttons:hover h2,
.hide-trayect-buttons-box .hide-trayect-button:hover h2,
.hide-trayect-buttons-box .hide-formacion-button:hover h2,
.hide-trayect-buttons-box .hide-idiomas-buttons:hover h2,
.hide-formacion-buttons-box .trayect-buttons:hover h2,
.hide-formacion-buttons-box .formacion-buttons:hover h2,
.hide-formacion-buttons-box .hide-trayect-button:hover h2,
.hide-formacion-buttons-box .hide-formacion-button:hover h2,
.hide-formacion-buttons-box .hide-idiomas-buttons:hover h2,
.hide-idiomas-buttons-box .trayect-buttons:hover h2,
.hide-idiomas-buttons-box .formacion-buttons:hover h2,
.hide-idiomas-buttons-box .hide-trayect-button:hover h2,
.hide-idiomas-buttons-box .hide-formacion-button:hover h2,
.hide-idiomas-buttons-box .hide-idiomas-buttons:hover h2 {
  -webkit-transform: translateY(4px);
      -ms-transform: translateY(4px);
       -o-transform: translateY(4px);
          transform: translateY(4px);
}

.trayect-buttons-box .trayect-buttons img,
.trayect-buttons-box .formacion-buttons img,
.trayect-buttons-box .hide-trayect-button img,
.trayect-buttons-box .hide-formacion-button img,
.trayect-buttons-box .hide-idiomas-buttons img,
.formacion-buttons-box .trayect-buttons img,
.formacion-buttons-box .formacion-buttons img,
.formacion-buttons-box .hide-trayect-button img,
.formacion-buttons-box .hide-formacion-button img,
.formacion-buttons-box .hide-idiomas-buttons img,
.hide-trayect-buttons-box .trayect-buttons img,
.hide-trayect-buttons-box .formacion-buttons img,
.hide-trayect-buttons-box .hide-trayect-button img,
.hide-trayect-buttons-box .hide-formacion-button img,
.hide-trayect-buttons-box .hide-idiomas-buttons img,
.hide-formacion-buttons-box .trayect-buttons img,
.hide-formacion-buttons-box .formacion-buttons img,
.hide-formacion-buttons-box .hide-trayect-button img,
.hide-formacion-buttons-box .hide-formacion-button img,
.hide-formacion-buttons-box .hide-idiomas-buttons img,
.hide-idiomas-buttons-box .trayect-buttons img,
.hide-idiomas-buttons-box .formacion-buttons img,
.hide-idiomas-buttons-box .hide-trayect-button img,
.hide-idiomas-buttons-box .hide-formacion-button img,
.hide-idiomas-buttons-box .hide-idiomas-buttons img {
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  margin-top: 20px;
}

.trayect-buttons-box .trayect-buttons h2,
.trayect-buttons-box .formacion-buttons h2,
.trayect-buttons-box .hide-trayect-button h2,
.trayect-buttons-box .hide-formacion-button h2,
.trayect-buttons-box .hide-idiomas-buttons h2,
.formacion-buttons-box .trayect-buttons h2,
.formacion-buttons-box .formacion-buttons h2,
.formacion-buttons-box .hide-trayect-button h2,
.formacion-buttons-box .hide-formacion-button h2,
.formacion-buttons-box .hide-idiomas-buttons h2,
.hide-trayect-buttons-box .trayect-buttons h2,
.hide-trayect-buttons-box .formacion-buttons h2,
.hide-trayect-buttons-box .hide-trayect-button h2,
.hide-trayect-buttons-box .hide-formacion-button h2,
.hide-trayect-buttons-box .hide-idiomas-buttons h2,
.hide-formacion-buttons-box .trayect-buttons h2,
.hide-formacion-buttons-box .formacion-buttons h2,
.hide-formacion-buttons-box .hide-trayect-button h2,
.hide-formacion-buttons-box .hide-formacion-button h2,
.hide-formacion-buttons-box .hide-idiomas-buttons h2,
.hide-idiomas-buttons-box .trayect-buttons h2,
.hide-idiomas-buttons-box .formacion-buttons h2,
.hide-idiomas-buttons-box .hide-trayect-button h2,
.hide-idiomas-buttons-box .hide-formacion-button h2,
.hide-idiomas-buttons-box .hide-idiomas-buttons h2 {
  text-align: center;
  font-size: 16pt;
  color: #888888;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  width: 80%;
}

.trayect-buttons-box .trayect-buttons h3,
.trayect-buttons-box .formacion-buttons h3,
.trayect-buttons-box .hide-trayect-button h3,
.trayect-buttons-box .hide-formacion-button h3,
.trayect-buttons-box .hide-idiomas-buttons h3,
.formacion-buttons-box .trayect-buttons h3,
.formacion-buttons-box .formacion-buttons h3,
.formacion-buttons-box .hide-trayect-button h3,
.formacion-buttons-box .hide-formacion-button h3,
.formacion-buttons-box .hide-idiomas-buttons h3,
.hide-trayect-buttons-box .trayect-buttons h3,
.hide-trayect-buttons-box .formacion-buttons h3,
.hide-trayect-buttons-box .hide-trayect-button h3,
.hide-trayect-buttons-box .hide-formacion-button h3,
.hide-trayect-buttons-box .hide-idiomas-buttons h3,
.hide-formacion-buttons-box .trayect-buttons h3,
.hide-formacion-buttons-box .formacion-buttons h3,
.hide-formacion-buttons-box .hide-trayect-button h3,
.hide-formacion-buttons-box .hide-formacion-button h3,
.hide-formacion-buttons-box .hide-idiomas-buttons h3,
.hide-idiomas-buttons-box .trayect-buttons h3,
.hide-idiomas-buttons-box .formacion-buttons h3,
.hide-idiomas-buttons-box .hide-trayect-button h3,
.hide-idiomas-buttons-box .hide-formacion-button h3,
.hide-idiomas-buttons-box .hide-idiomas-buttons h3 {
  text-align: center;
  font-size: 14pt;
  color: #888888;
  width: 80%;
}

.trayect-buttons-box .hide-trayect-button,
.trayect-buttons-box .hide-formacion-button,
.trayect-buttons-box .hide-idiomas-button,
.formacion-buttons-box .hide-trayect-button,
.formacion-buttons-box .hide-formacion-button,
.formacion-buttons-box .hide-idiomas-button,
.hide-trayect-buttons-box .hide-trayect-button,
.hide-trayect-buttons-box .hide-formacion-button,
.hide-trayect-buttons-box .hide-idiomas-button,
.hide-formacion-buttons-box .hide-trayect-button,
.hide-formacion-buttons-box .hide-formacion-button,
.hide-formacion-buttons-box .hide-idiomas-button,
.hide-idiomas-buttons-box .hide-trayect-button,
.hide-idiomas-buttons-box .hide-formacion-button,
.hide-idiomas-buttons-box .hide-idiomas-button {
  -webkit-flex-basis: 90%;
      -ms-flex-preferred-size: 90%;
          flex-basis: 90%;
  max-width: 1000px;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  height: auto;
  position: relative;
  -webkit-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  padding: 3em 3em;
  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

.trayect-buttons-box .hide-trayect-button:hover,
.trayect-buttons-box .hide-formacion-button:hover,
.trayect-buttons-box .hide-idiomas-button:hover,
.formacion-buttons-box .hide-trayect-button:hover,
.formacion-buttons-box .hide-formacion-button:hover,
.formacion-buttons-box .hide-idiomas-button:hover,
.hide-trayect-buttons-box .hide-trayect-button:hover,
.hide-trayect-buttons-box .hide-formacion-button:hover,
.hide-trayect-buttons-box .hide-idiomas-button:hover,
.hide-formacion-buttons-box .hide-trayect-button:hover,
.hide-formacion-buttons-box .hide-formacion-button:hover,
.hide-formacion-buttons-box .hide-idiomas-button:hover,
.hide-idiomas-buttons-box .hide-trayect-button:hover,
.hide-idiomas-buttons-box .hide-formacion-button:hover,
.hide-idiomas-buttons-box .hide-idiomas-button:hover {
  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3) !important;
          box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3) !important;
}

.trayect-buttons-box .hide-trayect-button:hover img,
.trayect-buttons-box .hide-formacion-button:hover img,
.trayect-buttons-box .hide-idiomas-button:hover img,
.formacion-buttons-box .hide-trayect-button:hover img,
.formacion-buttons-box .hide-formacion-button:hover img,
.formacion-buttons-box .hide-idiomas-button:hover img,
.hide-trayect-buttons-box .hide-trayect-button:hover img,
.hide-trayect-buttons-box .hide-formacion-button:hover img,
.hide-trayect-buttons-box .hide-idiomas-button:hover img,
.hide-formacion-buttons-box .hide-trayect-button:hover img,
.hide-formacion-buttons-box .hide-formacion-button:hover img,
.hide-formacion-buttons-box .hide-idiomas-button:hover img,
.hide-idiomas-buttons-box .hide-trayect-button:hover img,
.hide-idiomas-buttons-box .hide-formacion-button:hover img,
.hide-idiomas-buttons-box .hide-idiomas-button:hover img {
  -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

.trayect-buttons-box .hide-trayect-button:hover h2,
.trayect-buttons-box .hide-formacion-button:hover h2,
.trayect-buttons-box .hide-idiomas-button:hover h2,
.formacion-buttons-box .hide-trayect-button:hover h2,
.formacion-buttons-box .hide-formacion-button:hover h2,
.formacion-buttons-box .hide-idiomas-button:hover h2,
.hide-trayect-buttons-box .hide-trayect-button:hover h2,
.hide-trayect-buttons-box .hide-formacion-button:hover h2,
.hide-trayect-buttons-box .hide-idiomas-button:hover h2,
.hide-formacion-buttons-box .hide-trayect-button:hover h2,
.hide-formacion-buttons-box .hide-formacion-button:hover h2,
.hide-formacion-buttons-box .hide-idiomas-button:hover h2,
.hide-idiomas-buttons-box .hide-trayect-button:hover h2,
.hide-idiomas-buttons-box .hide-formacion-button:hover h2,
.hide-idiomas-buttons-box .hide-idiomas-button:hover h2 {
  -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

.trayect-buttons-box .hide-trayect-button img,
.trayect-buttons-box .hide-formacion-button img,
.trayect-buttons-box .hide-idiomas-button img,
.formacion-buttons-box .hide-trayect-button img,
.formacion-buttons-box .hide-formacion-button img,
.formacion-buttons-box .hide-idiomas-button img,
.hide-trayect-buttons-box .hide-trayect-button img,
.hide-trayect-buttons-box .hide-formacion-button img,
.hide-trayect-buttons-box .hide-idiomas-button img,
.hide-formacion-buttons-box .hide-trayect-button img,
.hide-formacion-buttons-box .hide-formacion-button img,
.hide-formacion-buttons-box .hide-idiomas-button img,
.hide-idiomas-buttons-box .hide-trayect-button img,
.hide-idiomas-buttons-box .hide-formacion-button img,
.hide-idiomas-buttons-box .hide-idiomas-button img {
  margin: 0;
}

.trayect-buttons-box .hide-trayect-button img,
.trayect-buttons-box .hide-trayect-button .trayect-title,
.trayect-buttons-box .hide-trayect-button .hide-info,
.trayect-buttons-box .hide-formacion-button img,
.trayect-buttons-box .hide-formacion-button .trayect-title,
.trayect-buttons-box .hide-formacion-button .hide-info,
.trayect-buttons-box .hide-idiomas-button img,
.trayect-buttons-box .hide-idiomas-button .trayect-title,
.trayect-buttons-box .hide-idiomas-button .hide-info,
.formacion-buttons-box .hide-trayect-button img,
.formacion-buttons-box .hide-trayect-button .trayect-title,
.formacion-buttons-box .hide-trayect-button .hide-info,
.formacion-buttons-box .hide-formacion-button img,
.formacion-buttons-box .hide-formacion-button .trayect-title,
.formacion-buttons-box .hide-formacion-button .hide-info,
.formacion-buttons-box .hide-idiomas-button img,
.formacion-buttons-box .hide-idiomas-button .trayect-title,
.formacion-buttons-box .hide-idiomas-button .hide-info,
.hide-trayect-buttons-box .hide-trayect-button img,
.hide-trayect-buttons-box .hide-trayect-button .trayect-title,
.hide-trayect-buttons-box .hide-trayect-button .hide-info,
.hide-trayect-buttons-box .hide-formacion-button img,
.hide-trayect-buttons-box .hide-formacion-button .trayect-title,
.hide-trayect-buttons-box .hide-formacion-button .hide-info,
.hide-trayect-buttons-box .hide-idiomas-button img,
.hide-trayect-buttons-box .hide-idiomas-button .trayect-title,
.hide-trayect-buttons-box .hide-idiomas-button .hide-info,
.hide-formacion-buttons-box .hide-trayect-button img,
.hide-formacion-buttons-box .hide-trayect-button .trayect-title,
.hide-formacion-buttons-box .hide-trayect-button .hide-info,
.hide-formacion-buttons-box .hide-formacion-button img,
.hide-formacion-buttons-box .hide-formacion-button .trayect-title,
.hide-formacion-buttons-box .hide-formacion-button .hide-info,
.hide-formacion-buttons-box .hide-idiomas-button img,
.hide-formacion-buttons-box .hide-idiomas-button .trayect-title,
.hide-formacion-buttons-box .hide-idiomas-button .hide-info,
.hide-idiomas-buttons-box .hide-trayect-button img,
.hide-idiomas-buttons-box .hide-trayect-button .trayect-title,
.hide-idiomas-buttons-box .hide-trayect-button .hide-info,
.hide-idiomas-buttons-box .hide-formacion-button img,
.hide-idiomas-buttons-box .hide-formacion-button .trayect-title,
.hide-idiomas-buttons-box .hide-formacion-button .hide-info,
.hide-idiomas-buttons-box .hide-idiomas-button img,
.hide-idiomas-buttons-box .hide-idiomas-button .trayect-title,
.hide-idiomas-buttons-box .hide-idiomas-button .hide-info {
  -webkit-transition: all 1s cubic-bezier(0.35, 0.22, 0.2, 1.58) !important;
  -o-transition: all 1s cubic-bezier(0.35, 0.22, 0.2, 1.58) !important;
  transition: all 1s cubic-bezier(0.35, 0.22, 0.2, 1.58) !important;
  float: left;
}

.trayect-buttons-box .hide-trayect-button .trayect-title,
.trayect-buttons-box .hide-formacion-button .trayect-title,
.trayect-buttons-box .hide-idiomas-button .trayect-title,
.formacion-buttons-box .hide-trayect-button .trayect-title,
.formacion-buttons-box .hide-formacion-button .trayect-title,
.formacion-buttons-box .hide-idiomas-button .trayect-title,
.hide-trayect-buttons-box .hide-trayect-button .trayect-title,
.hide-trayect-buttons-box .hide-formacion-button .trayect-title,
.hide-trayect-buttons-box .hide-idiomas-button .trayect-title,
.hide-formacion-buttons-box .hide-trayect-button .trayect-title,
.hide-formacion-buttons-box .hide-formacion-button .trayect-title,
.hide-formacion-buttons-box .hide-idiomas-button .trayect-title,
.hide-idiomas-buttons-box .hide-trayect-button .trayect-title,
.hide-idiomas-buttons-box .hide-formacion-button .trayect-title,
.hide-idiomas-buttons-box .hide-idiomas-button .trayect-title {
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  height: auto;
  text-align: left;
  margin-top: 0.5em;
  margin-left: 0.5em;
}

.trayect-buttons-box .hide-trayect-button .trayect-title h2,
.trayect-buttons-box .hide-trayect-button .trayect-title h4,
.trayect-buttons-box .hide-formacion-button .trayect-title h2,
.trayect-buttons-box .hide-formacion-button .trayect-title h4,
.trayect-buttons-box .hide-idiomas-button .trayect-title h2,
.trayect-buttons-box .hide-idiomas-button .trayect-title h4,
.formacion-buttons-box .hide-trayect-button .trayect-title h2,
.formacion-buttons-box .hide-trayect-button .trayect-title h4,
.formacion-buttons-box .hide-formacion-button .trayect-title h2,
.formacion-buttons-box .hide-formacion-button .trayect-title h4,
.formacion-buttons-box .hide-idiomas-button .trayect-title h2,
.formacion-buttons-box .hide-idiomas-button .trayect-title h4,
.hide-trayect-buttons-box .hide-trayect-button .trayect-title h2,
.hide-trayect-buttons-box .hide-trayect-button .trayect-title h4,
.hide-trayect-buttons-box .hide-formacion-button .trayect-title h2,
.hide-trayect-buttons-box .hide-formacion-button .trayect-title h4,
.hide-trayect-buttons-box .hide-idiomas-button .trayect-title h2,
.hide-trayect-buttons-box .hide-idiomas-button .trayect-title h4,
.hide-formacion-buttons-box .hide-trayect-button .trayect-title h2,
.hide-formacion-buttons-box .hide-trayect-button .trayect-title h4,
.hide-formacion-buttons-box .hide-formacion-button .trayect-title h2,
.hide-formacion-buttons-box .hide-formacion-button .trayect-title h4,
.hide-formacion-buttons-box .hide-idiomas-button .trayect-title h2,
.hide-formacion-buttons-box .hide-idiomas-button .trayect-title h4,
.hide-idiomas-buttons-box .hide-trayect-button .trayect-title h2,
.hide-idiomas-buttons-box .hide-trayect-button .trayect-title h4,
.hide-idiomas-buttons-box .hide-formacion-button .trayect-title h2,
.hide-idiomas-buttons-box .hide-formacion-button .trayect-title h4,
.hide-idiomas-buttons-box .hide-idiomas-button .trayect-title h2,
.hide-idiomas-buttons-box .hide-idiomas-button .trayect-title h4 {
  text-align: left;
  padding-left: 15px;
  display: block;
  width: 100%;
  margin: 0;
}

.trayect-buttons-box .hide-trayect-button .trayect-title h2,
.trayect-buttons-box .hide-formacion-button .trayect-title h2,
.trayect-buttons-box .hide-idiomas-button .trayect-title h2,
.formacion-buttons-box .hide-trayect-button .trayect-title h2,
.formacion-buttons-box .hide-formacion-button .trayect-title h2,
.formacion-buttons-box .hide-idiomas-button .trayect-title h2,
.hide-trayect-buttons-box .hide-trayect-button .trayect-title h2,
.hide-trayect-buttons-box .hide-formacion-button .trayect-title h2,
.hide-trayect-buttons-box .hide-idiomas-button .trayect-title h2,
.hide-formacion-buttons-box .hide-trayect-button .trayect-title h2,
.hide-formacion-buttons-box .hide-formacion-button .trayect-title h2,
.hide-formacion-buttons-box .hide-idiomas-button .trayect-title h2,
.hide-idiomas-buttons-box .hide-trayect-button .trayect-title h2,
.hide-idiomas-buttons-box .hide-formacion-button .trayect-title h2,
.hide-idiomas-buttons-box .hide-idiomas-button .trayect-title h2 {
  font-weight: 700;
  font-size: 24pt;
  color: black;
}

.trayect-buttons-box .hide-trayect-button .trayect-title h4,
.trayect-buttons-box .hide-formacion-button .trayect-title h4,
.trayect-buttons-box .hide-idiomas-button .trayect-title h4,
.formacion-buttons-box .hide-trayect-button .trayect-title h4,
.formacion-buttons-box .hide-formacion-button .trayect-title h4,
.formacion-buttons-box .hide-idiomas-button .trayect-title h4,
.hide-trayect-buttons-box .hide-trayect-button .trayect-title h4,
.hide-trayect-buttons-box .hide-formacion-button .trayect-title h4,
.hide-trayect-buttons-box .hide-idiomas-button .trayect-title h4,
.hide-formacion-buttons-box .hide-trayect-button .trayect-title h4,
.hide-formacion-buttons-box .hide-formacion-button .trayect-title h4,
.hide-formacion-buttons-box .hide-idiomas-button .trayect-title h4,
.hide-idiomas-buttons-box .hide-trayect-button .trayect-title h4,
.hide-idiomas-buttons-box .hide-formacion-button .trayect-title h4,
.hide-idiomas-buttons-box .hide-idiomas-button .trayect-title h4 {
  color: #888888;
  font-size: 12pt;
}

.trayect-buttons-box .hide-trayect-button img,
.trayect-buttons-box .hide-formacion-button img,
.trayect-buttons-box .hide-idiomas-button img,
.formacion-buttons-box .hide-trayect-button img,
.formacion-buttons-box .hide-formacion-button img,
.formacion-buttons-box .hide-idiomas-button img,
.hide-trayect-buttons-box .hide-trayect-button img,
.hide-trayect-buttons-box .hide-formacion-button img,
.hide-trayect-buttons-box .hide-idiomas-button img,
.hide-formacion-buttons-box .hide-trayect-button img,
.hide-formacion-buttons-box .hide-formacion-button img,
.hide-formacion-buttons-box .hide-idiomas-button img,
.hide-idiomas-buttons-box .hide-trayect-button img,
.hide-idiomas-buttons-box .hide-formacion-button img,
.hide-idiomas-buttons-box .hide-idiomas-button img {
  width: 60px;
  margin-left: 1em;
}

.trayect-buttons-box .hide-trayect-button .hide-info,
.trayect-buttons-box .hide-formacion-button .hide-info,
.trayect-buttons-box .hide-idiomas-button .hide-info,
.formacion-buttons-box .hide-trayect-button .hide-info,
.formacion-buttons-box .hide-formacion-button .hide-info,
.formacion-buttons-box .hide-idiomas-button .hide-info,
.hide-trayect-buttons-box .hide-trayect-button .hide-info,
.hide-trayect-buttons-box .hide-formacion-button .hide-info,
.hide-trayect-buttons-box .hide-idiomas-button .hide-info,
.hide-formacion-buttons-box .hide-trayect-button .hide-info,
.hide-formacion-buttons-box .hide-formacion-button .hide-info,
.hide-formacion-buttons-box .hide-idiomas-button .hide-info,
.hide-idiomas-buttons-box .hide-trayect-button .hide-info,
.hide-idiomas-buttons-box .hide-formacion-button .hide-info,
.hide-idiomas-buttons-box .hide-idiomas-button .hide-info {
  position: relative;
  padding-left: 15px;
  margin-left: 0;
  display: inline;
}

.trayect-buttons-box .hide-trayect-button .hide-info p,
.trayect-buttons-box .hide-formacion-button .hide-info p,
.trayect-buttons-box .hide-idiomas-button .hide-info p,
.formacion-buttons-box .hide-trayect-button .hide-info p,
.formacion-buttons-box .hide-formacion-button .hide-info p,
.formacion-buttons-box .hide-idiomas-button .hide-info p,
.hide-trayect-buttons-box .hide-trayect-button .hide-info p,
.hide-trayect-buttons-box .hide-formacion-button .hide-info p,
.hide-trayect-buttons-box .hide-idiomas-button .hide-info p,
.hide-formacion-buttons-box .hide-trayect-button .hide-info p,
.hide-formacion-buttons-box .hide-formacion-button .hide-info p,
.hide-formacion-buttons-box .hide-idiomas-button .hide-info p,
.hide-idiomas-buttons-box .hide-trayect-button .hide-info p,
.hide-idiomas-buttons-box .hide-formacion-button .hide-info p,
.hide-idiomas-buttons-box .hide-idiomas-button .hide-info p {
  font-size: 11pt;
  line-height: 14pt;
  color: #4d4d4d;
}

.trayect-buttons-box .hide-trayect-button .hide-info h3,
.trayect-buttons-box .hide-formacion-button .hide-info h3,
.trayect-buttons-box .hide-idiomas-button .hide-info h3,
.formacion-buttons-box .hide-trayect-button .hide-info h3,
.formacion-buttons-box .hide-formacion-button .hide-info h3,
.formacion-buttons-box .hide-idiomas-button .hide-info h3,
.hide-trayect-buttons-box .hide-trayect-button .hide-info h3,
.hide-trayect-buttons-box .hide-formacion-button .hide-info h3,
.hide-trayect-buttons-box .hide-idiomas-button .hide-info h3,
.hide-formacion-buttons-box .hide-trayect-button .hide-info h3,
.hide-formacion-buttons-box .hide-formacion-button .hide-info h3,
.hide-formacion-buttons-box .hide-idiomas-button .hide-info h3,
.hide-idiomas-buttons-box .hide-trayect-button .hide-info h3,
.hide-idiomas-buttons-box .hide-formacion-button .hide-info h3,
.hide-idiomas-buttons-box .hide-idiomas-button .hide-info h3 {
  font-size: 18pt;
  text-align: left;
}

.trayect-buttons-box .hide-trayect-button .hide-info h4,
.trayect-buttons-box .hide-formacion-button .hide-info h4,
.trayect-buttons-box .hide-idiomas-button .hide-info h4,
.formacion-buttons-box .hide-trayect-button .hide-info h4,
.formacion-buttons-box .hide-formacion-button .hide-info h4,
.formacion-buttons-box .hide-idiomas-button .hide-info h4,
.hide-trayect-buttons-box .hide-trayect-button .hide-info h4,
.hide-trayect-buttons-box .hide-formacion-button .hide-info h4,
.hide-trayect-buttons-box .hide-idiomas-button .hide-info h4,
.hide-formacion-buttons-box .hide-trayect-button .hide-info h4,
.hide-formacion-buttons-box .hide-formacion-button .hide-info h4,
.hide-formacion-buttons-box .hide-idiomas-button .hide-info h4,
.hide-idiomas-buttons-box .hide-trayect-button .hide-info h4,
.hide-idiomas-buttons-box .hide-formacion-button .hide-info h4,
.hide-idiomas-buttons-box .hide-idiomas-button .hide-info h4 {
  font-size: 12pt;
  margin-top: 1.5em;
  margin-bottom: -0.25em;
  padding: 5px 20px;
  color: black;
}

.trayect-buttons-box .hide-trayect-button .hide-info h4:before,
.trayect-buttons-box .hide-formacion-button .hide-info h4:before,
.trayect-buttons-box .hide-idiomas-button .hide-info h4:before,
.formacion-buttons-box .hide-trayect-button .hide-info h4:before,
.formacion-buttons-box .hide-formacion-button .hide-info h4:before,
.formacion-buttons-box .hide-idiomas-button .hide-info h4:before,
.hide-trayect-buttons-box .hide-trayect-button .hide-info h4:before,
.hide-trayect-buttons-box .hide-formacion-button .hide-info h4:before,
.hide-trayect-buttons-box .hide-idiomas-button .hide-info h4:before,
.hide-formacion-buttons-box .hide-trayect-button .hide-info h4:before,
.hide-formacion-buttons-box .hide-formacion-button .hide-info h4:before,
.hide-formacion-buttons-box .hide-idiomas-button .hide-info h4:before,
.hide-idiomas-buttons-box .hide-trayect-button .hide-info h4:before,
.hide-idiomas-buttons-box .hide-formacion-button .hide-info h4:before,
.hide-idiomas-buttons-box .hide-idiomas-button .hide-info h4:before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
  margin-top: 6px;
  margin-left: -15px;
  background: white;
  background: black;
}

.trayect-buttons-box .hide-trayect-button .hide-info h5,
.trayect-buttons-box .hide-formacion-button .hide-info h5,
.trayect-buttons-box .hide-idiomas-button .hide-info h5,
.formacion-buttons-box .hide-trayect-button .hide-info h5,
.formacion-buttons-box .hide-formacion-button .hide-info h5,
.formacion-buttons-box .hide-idiomas-button .hide-info h5,
.hide-trayect-buttons-box .hide-trayect-button .hide-info h5,
.hide-trayect-buttons-box .hide-formacion-button .hide-info h5,
.hide-trayect-buttons-box .hide-idiomas-button .hide-info h5,
.hide-formacion-buttons-box .hide-trayect-button .hide-info h5,
.hide-formacion-buttons-box .hide-formacion-button .hide-info h5,
.hide-formacion-buttons-box .hide-idiomas-button .hide-info h5,
.hide-idiomas-buttons-box .hide-trayect-button .hide-info h5,
.hide-idiomas-buttons-box .hide-formacion-button .hide-info h5,
.hide-idiomas-buttons-box .hide-idiomas-button .hide-info h5 {
  font-size: 16pt;
  margin: 0;
}

.trayect-buttons-box .hide-trayect-button .hide-info ul,
.trayect-buttons-box .hide-formacion-button .hide-info ul,
.trayect-buttons-box .hide-idiomas-button .hide-info ul,
.formacion-buttons-box .hide-trayect-button .hide-info ul,
.formacion-buttons-box .hide-formacion-button .hide-info ul,
.formacion-buttons-box .hide-idiomas-button .hide-info ul,
.hide-trayect-buttons-box .hide-trayect-button .hide-info ul,
.hide-trayect-buttons-box .hide-formacion-button .hide-info ul,
.hide-trayect-buttons-box .hide-idiomas-button .hide-info ul,
.hide-formacion-buttons-box .hide-trayect-button .hide-info ul,
.hide-formacion-buttons-box .hide-formacion-button .hide-info ul,
.hide-formacion-buttons-box .hide-idiomas-button .hide-info ul,
.hide-idiomas-buttons-box .hide-trayect-button .hide-info ul,
.hide-idiomas-buttons-box .hide-formacion-button .hide-info ul,
.hide-idiomas-buttons-box .hide-idiomas-button .hide-info ul {
  padding-left: 15px;
  border-bottom: 1px solid #ccc;
}

.trayect-buttons-box .hide-trayect-button .hide-info ul li,
.trayect-buttons-box .hide-formacion-button .hide-info ul li,
.trayect-buttons-box .hide-idiomas-button .hide-info ul li,
.formacion-buttons-box .hide-trayect-button .hide-info ul li,
.formacion-buttons-box .hide-formacion-button .hide-info ul li,
.formacion-buttons-box .hide-idiomas-button .hide-info ul li,
.hide-trayect-buttons-box .hide-trayect-button .hide-info ul li,
.hide-trayect-buttons-box .hide-formacion-button .hide-info ul li,
.hide-trayect-buttons-box .hide-idiomas-button .hide-info ul li,
.hide-formacion-buttons-box .hide-trayect-button .hide-info ul li,
.hide-formacion-buttons-box .hide-formacion-button .hide-info ul li,
.hide-formacion-buttons-box .hide-idiomas-button .hide-info ul li,
.hide-idiomas-buttons-box .hide-trayect-button .hide-info ul li,
.hide-idiomas-buttons-box .hide-formacion-button .hide-info ul li,
.hide-idiomas-buttons-box .hide-idiomas-button .hide-info ul li {
  font-size: 11pt;
  margin-bottom: 1em;
  font-weight: 500;
  color: #333;
}

.trayect-buttons-box .hide-trayect-button .hide-info ul li strong,
.trayect-buttons-box .hide-formacion-button .hide-info ul li strong,
.trayect-buttons-box .hide-idiomas-button .hide-info ul li strong,
.formacion-buttons-box .hide-trayect-button .hide-info ul li strong,
.formacion-buttons-box .hide-formacion-button .hide-info ul li strong,
.formacion-buttons-box .hide-idiomas-button .hide-info ul li strong,
.hide-trayect-buttons-box .hide-trayect-button .hide-info ul li strong,
.hide-trayect-buttons-box .hide-formacion-button .hide-info ul li strong,
.hide-trayect-buttons-box .hide-idiomas-button .hide-info ul li strong,
.hide-formacion-buttons-box .hide-trayect-button .hide-info ul li strong,
.hide-formacion-buttons-box .hide-formacion-button .hide-info ul li strong,
.hide-formacion-buttons-box .hide-idiomas-button .hide-info ul li strong,
.hide-idiomas-buttons-box .hide-trayect-button .hide-info ul li strong,
.hide-idiomas-buttons-box .hide-formacion-button .hide-info ul li strong,
.hide-idiomas-buttons-box .hide-idiomas-button .hide-info ul li strong {
  color: #333;
}

.trayect-buttons-box .hide-trayect-button .hide-info .ent-tec,
.trayect-buttons-box .hide-formacion-button .hide-info .ent-tec,
.trayect-buttons-box .hide-idiomas-button .hide-info .ent-tec,
.formacion-buttons-box .hide-trayect-button .hide-info .ent-tec,
.formacion-buttons-box .hide-formacion-button .hide-info .ent-tec,
.formacion-buttons-box .hide-idiomas-button .hide-info .ent-tec,
.hide-trayect-buttons-box .hide-trayect-button .hide-info .ent-tec,
.hide-trayect-buttons-box .hide-formacion-button .hide-info .ent-tec,
.hide-trayect-buttons-box .hide-idiomas-button .hide-info .ent-tec,
.hide-formacion-buttons-box .hide-trayect-button .hide-info .ent-tec,
.hide-formacion-buttons-box .hide-formacion-button .hide-info .ent-tec,
.hide-formacion-buttons-box .hide-idiomas-button .hide-info .ent-tec,
.hide-idiomas-buttons-box .hide-trayect-button .hide-info .ent-tec,
.hide-idiomas-buttons-box .hide-formacion-button .hide-info .ent-tec,
.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .ent-tec {
  padding-top: 0.5em;
}

.trayect-buttons-box .hide-trayect-button .hide-info .ent-tec span,
.trayect-buttons-box .hide-formacion-button .hide-info .ent-tec span,
.trayect-buttons-box .hide-idiomas-button .hide-info .ent-tec span,
.formacion-buttons-box .hide-trayect-button .hide-info .ent-tec span,
.formacion-buttons-box .hide-formacion-button .hide-info .ent-tec span,
.formacion-buttons-box .hide-idiomas-button .hide-info .ent-tec span,
.hide-trayect-buttons-box .hide-trayect-button .hide-info .ent-tec span,
.hide-trayect-buttons-box .hide-formacion-button .hide-info .ent-tec span,
.hide-trayect-buttons-box .hide-idiomas-button .hide-info .ent-tec span,
.hide-formacion-buttons-box .hide-trayect-button .hide-info .ent-tec span,
.hide-formacion-buttons-box .hide-formacion-button .hide-info .ent-tec span,
.hide-formacion-buttons-box .hide-idiomas-button .hide-info .ent-tec span,
.hide-idiomas-buttons-box .hide-trayect-button .hide-info .ent-tec span,
.hide-idiomas-buttons-box .hide-formacion-button .hide-info .ent-tec span,
.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .ent-tec span {
  background: #ccc;
  padding: 10px 20px;
  float: left;
  border-radius: 20px;
  margin: 2.5px 2.5px;
  font-weight: 600;
  font-size: 10pt;
  letter-spacing: 0.2px;
}

.trayect-buttons-box .hide-trayect-button .close,
.trayect-buttons-box .hide-formacion-button .close,
.trayect-buttons-box .hide-idiomas-button .close,
.formacion-buttons-box .hide-trayect-button .close,
.formacion-buttons-box .hide-formacion-button .close,
.formacion-buttons-box .hide-idiomas-button .close,
.hide-trayect-buttons-box .hide-trayect-button .close,
.hide-trayect-buttons-box .hide-formacion-button .close,
.hide-trayect-buttons-box .hide-idiomas-button .close,
.hide-formacion-buttons-box .hide-trayect-button .close,
.hide-formacion-buttons-box .hide-formacion-button .close,
.hide-formacion-buttons-box .hide-idiomas-button .close,
.hide-idiomas-buttons-box .hide-trayect-button .close,
.hide-idiomas-buttons-box .hide-formacion-button .close,
.hide-idiomas-buttons-box .hide-idiomas-button .close {
  width: 25px;
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  z-index: 2;
}

.trayect-buttons-box .hide-trayect-buttons-box,
.trayect-buttons-box .hide-formacion-buttons-box,
.trayect-buttons-box .hide-idiomas-buttons-box,
.formacion-buttons-box .hide-trayect-buttons-box,
.formacion-buttons-box .hide-formacion-buttons-box,
.formacion-buttons-box .hide-idiomas-buttons-box,
.hide-trayect-buttons-box .hide-trayect-buttons-box,
.hide-trayect-buttons-box .hide-formacion-buttons-box,
.hide-trayect-buttons-box .hide-idiomas-buttons-box,
.hide-formacion-buttons-box .hide-trayect-buttons-box,
.hide-formacion-buttons-box .hide-formacion-buttons-box,
.hide-formacion-buttons-box .hide-idiomas-buttons-box,
.hide-idiomas-buttons-box .hide-trayect-buttons-box,
.hide-idiomas-buttons-box .hide-formacion-buttons-box,
.hide-idiomas-buttons-box .hide-idiomas-buttons-box {
  position: relative;
  z-index: -2;
}

.trayect-buttons-box .before-hide,
.formacion-buttons-box .before-hide,
.hide-trayect-buttons-box .before-hide,
.hide-formacion-buttons-box .before-hide,
.hide-idiomas-buttons-box .before-hide {
  position: absolute;
  z-index: -3;
  height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
  border: 1px solid red;
  -webkit-transition: 0s ease;
  -o-transition: 0s ease;
  transition: 0s ease;
}

.trayect-buttons-box .before-hide p,
.trayect-buttons-box .before-hide h2,
.trayect-buttons-box .before-hide h3,
.trayect-buttons-box .before-hide h4,
.trayect-buttons-box .before-hide h5,
.trayect-buttons-box .before-hide ul li,
.formacion-buttons-box .before-hide p,
.formacion-buttons-box .before-hide h2,
.formacion-buttons-box .before-hide h3,
.formacion-buttons-box .before-hide h4,
.formacion-buttons-box .before-hide h5,
.formacion-buttons-box .before-hide ul li,
.hide-trayect-buttons-box .before-hide p,
.hide-trayect-buttons-box .before-hide h2,
.hide-trayect-buttons-box .before-hide h3,
.hide-trayect-buttons-box .before-hide h4,
.hide-trayect-buttons-box .before-hide h5,
.hide-trayect-buttons-box .before-hide ul li,
.hide-formacion-buttons-box .before-hide p,
.hide-formacion-buttons-box .before-hide h2,
.hide-formacion-buttons-box .before-hide h3,
.hide-formacion-buttons-box .before-hide h4,
.hide-formacion-buttons-box .before-hide h5,
.hide-formacion-buttons-box .before-hide ul li,
.hide-idiomas-buttons-box .before-hide p,
.hide-idiomas-buttons-box .before-hide h2,
.hide-idiomas-buttons-box .before-hide h3,
.hide-idiomas-buttons-box .before-hide h4,
.hide-idiomas-buttons-box .before-hide h5,
.hide-idiomas-buttons-box .before-hide ul li {
  font-size: 0px !important;
}

.trayect-buttons-box .trayect-buttons-small,
.trayect-buttons-box .formacion-buttons-small,
.formacion-buttons-box .trayect-buttons-small,
.formacion-buttons-box .formacion-buttons-small,
.hide-trayect-buttons-box .trayect-buttons-small,
.hide-trayect-buttons-box .formacion-buttons-small,
.hide-formacion-buttons-box .trayect-buttons-small,
.hide-formacion-buttons-box .formacion-buttons-small,
.hide-idiomas-buttons-box .trayect-buttons-small,
.hide-idiomas-buttons-box .formacion-buttons-small {
  position: relative;
  -webkit-flex-basis: 17%;
      -ms-flex-preferred-size: 17%;
          flex-basis: 17%;
  height: 50px;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-transition: all 0s linear !important;
  -o-transition: all 0s linear !important;
  transition: all 0s linear !important;
}

.trayect-buttons-box .trayect-buttons-small img,
.trayect-buttons-box .formacion-buttons-small img,
.formacion-buttons-box .trayect-buttons-small img,
.formacion-buttons-box .formacion-buttons-small img,
.hide-trayect-buttons-box .trayect-buttons-small img,
.hide-trayect-buttons-box .formacion-buttons-small img,
.hide-formacion-buttons-box .trayect-buttons-small img,
.hide-formacion-buttons-box .formacion-buttons-small img,
.hide-idiomas-buttons-box .trayect-buttons-small img,
.hide-idiomas-buttons-box .formacion-buttons-small img {
  margin: 0;
  width: 20% !important;
  height: 40px !important;
  margin: 5px 10px;
}

.trayect-buttons-box .trayect-buttons-small .trayect-title h2,
.trayect-buttons-box .formacion-buttons-small .trayect-title h2,
.formacion-buttons-box .trayect-buttons-small .trayect-title h2,
.formacion-buttons-box .formacion-buttons-small .trayect-title h2,
.hide-trayect-buttons-box .trayect-buttons-small .trayect-title h2,
.hide-trayect-buttons-box .formacion-buttons-small .trayect-title h2,
.hide-formacion-buttons-box .trayect-buttons-small .trayect-title h2,
.hide-formacion-buttons-box .formacion-buttons-small .trayect-title h2,
.hide-idiomas-buttons-box .trayect-buttons-small .trayect-title h2,
.hide-idiomas-buttons-box .formacion-buttons-small .trayect-title h2 {
  font-size: 12pt;
  height: 50px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-basis: 70%;
      -ms-flex-preferred-size: 70%;
          flex-basis: 70%;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.formacion-buttons-box .formacion-buttons {
  -webkit-flex-basis: 45%;
      -ms-flex-preferred-size: 45%;
          flex-basis: 45%;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.formacion-buttons-box .formacion-buttons img {
  -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
}

@media (max-width: 768px) {
  .formacion-buttons-box .formacion-buttons img {
    max-width: 140px;
  }
}

.formacion-buttons-box .formacion-buttons-small {
  -webkit-flex-basis: 30%;
      -ms-flex-preferred-size: 30%;
          flex-basis: 30%;
}

.formacion-buttons-box .formacion-buttons-small h2 {
  font-weight: 500;
  color: #4d4d4d;
  font-size: 10pt;
  height: 50px;
  padding: 0 0.5em;
  text-align: left;
}

.formacion-buttons-box .hide-formacion-button {
  height: auto;
  max-height: auto;
}

.formacion-buttons-box .hide-formacion-button .formacion-logo {
  -webkit-flex-basis: 30%;
      -ms-flex-preferred-size: 30%;
          flex-basis: 30%;
  margin: auto;
  left: 0;
  right: 0;
  margin-bottom: 1.5em;
}

.formacion-buttons-box .hide-formacion-button .hide-info p {
  padding-bottom: 1em;
}

.formacion-buttons-box .hide-formacion-button .trayect-title {
  width: 100%;
  padding: 0;
}

.formacion-buttons-box .hide-formacion-button .trayect-title h2,
.formacion-buttons-box .hide-formacion-button .trayect-title h4 {
  width: 100%;
  padding: 0;
  text-align: center;
}

.formacion-buttons-box .hide-formacion-button .trayect-title h4 {
  padding-top: 1em;
}

.formacion-buttons-box .hide-formacion-button .slider {
  margin: 20px 0;
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  height: 300px;
  position: relative;
  overflow: hidden;
  background: black;
}

.formacion-buttons-box .hide-formacion-button .slider img {
  position: absolute;
  width: 100%;
  height: auto;
  -webkit-transition: all 1.5s ease-in-out !important;
  -o-transition: all 1.5s ease-in-out !important;
  transition: all 1.5s ease-in-out !important;
}

.formacion-buttons-box .hide-formacion-button .slider .sliderImg1 {
  -webkit-animation: slider1 18s infinite linear;
       -o-animation: slider1 18s infinite linear;
          animation: slider1 18s infinite linear;
}

.formacion-buttons-box .hide-formacion-button .slider .sliderImg2 {
  -webkit-animation: slider2 18s infinite linear;
       -o-animation: slider2 18s infinite linear;
          animation: slider2 18s infinite linear;
}

.formacion-buttons-box .hide-formacion-button .slider .sliderImg3 {
  -webkit-animation: slider3 18s infinite linear;
       -o-animation: slider3 18s infinite linear;
          animation: slider3 18s infinite linear;
}

@-webkit-keyframes slider1 {
  0% {
    left: 0%;
  }
  29% {
    left: 0%;
  }
  35% {
    left: -100%;
  }
  62% {
    left: -100%;
  }
  68% {
    left: -200%;
  }
  96% {
    left: -200%;
  }
  100% {
    left: 0%;
  }
}

@-o-keyframes slider1 {
  0% {
    left: 0%;
  }
  29% {
    left: 0%;
  }
  35% {
    left: -100%;
  }
  62% {
    left: -100%;
  }
  68% {
    left: -200%;
  }
  96% {
    left: -200%;
  }
  100% {
    left: 0%;
  }
}

@keyframes slider1 {
  0% {
    left: 0%;
  }
  29% {
    left: 0%;
  }
  35% {
    left: -100%;
  }
  62% {
    left: -100%;
  }
  68% {
    left: -200%;
  }
  96% {
    left: -200%;
  }
  100% {
    left: 0%;
  }
}

@-webkit-keyframes slider2 {
  0% {
    left: 100%;
  }
  29% {
    left: 100%;
  }
  35% {
    left: 0%;
  }
  62% {
    left: 0%;
  }
  68% {
    left: -100%;
  }
  96% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@-o-keyframes slider2 {
  0% {
    left: 100%;
  }
  29% {
    left: 100%;
  }
  35% {
    left: 0%;
  }
  62% {
    left: 0%;
  }
  68% {
    left: -100%;
  }
  96% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes slider2 {
  0% {
    left: 100%;
  }
  29% {
    left: 100%;
  }
  35% {
    left: 0%;
  }
  62% {
    left: 0%;
  }
  68% {
    left: -100%;
  }
  96% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@-webkit-keyframes slider3 {
  0% {
    left: 200%;
  }
  29% {
    left: 200%;
  }
  35% {
    left: 100%;
  }
  62% {
    left: 100%;
  }
  68% {
    left: 0%;
  }
  96% {
    left: 0%;
  }
  100% {
    left: 200%;
  }
}

@-o-keyframes slider3 {
  0% {
    left: 200%;
  }
  29% {
    left: 200%;
  }
  35% {
    left: 100%;
  }
  62% {
    left: 100%;
  }
  68% {
    left: 0%;
  }
  96% {
    left: 0%;
  }
  100% {
    left: 200%;
  }
}

@keyframes slider3 {
  0% {
    left: 200%;
  }
  29% {
    left: 200%;
  }
  35% {
    left: 100%;
  }
  62% {
    left: 100%;
  }
  68% {
    left: 0%;
  }
  96% {
    left: 0%;
  }
  100% {
    left: 200%;
  }
}

.formacion-buttons-box .hide-formacion-button .marcadores {
  position: relative;
  width: 100px;
  margin: auto;
  height: 40px;
  margin-top: -60px;
  z-index: 28;
  -webkit-transition: all 0s linear;
  -o-transition: all 0s linear;
  transition: all 0s linear;
  text-align: center;
  margin-bottom: 3%;
}

.formacion-buttons-box .hide-formacion-button .marcadores div {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  font-size: 0px;
  margin: 5px;
  padding: 0;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 0 10px #000;
  border: 2px solid white;
  background: transparent;
  -webkit-box-shadow: 0 0 10px #000;
          box-shadow: 0 0 10px #000;
  cursor: pointer;
}

.formacion-buttons-box .hide-formacion-button .marcadores div:nth-child(1) {
  left: 0px;
  top: 0;
}

.formacion-buttons-box .hide-formacion-button .marcadores div:nth-child(2) {
  left: 35px;
  top: 0;
}

.formacion-buttons-box .hide-formacion-button .marcadores div:nth-child(3) {
  left: 70px;
  top: 0;
}

.formacion-buttons-box .hide-formacion-button .marcadores .full {
  background: white;
  border: 0px solid white;
  width: 14px;
  height: 14px;
  -webkit-box-shadow: none;
          box-shadow: none;
  position: absolute;
  left: 0.5px;
  top: 0.5px;
  -webkit-transition: all 0.65s cubic-bezier(0.25, 0.7, 0.35, 1);
  -o-transition: all 0.65s cubic-bezier(0.25, 0.7, 0.35, 1);
  transition: all 0.65s cubic-bezier(0.25, 0.7, 0.35, 1);
}

.idiomas-box {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 80%;
  max-width: 800px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.idiomas-box .idiomas-buttons {
  -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-transition: all 0.4s cubic-bezier(0.35, 0.22, 0.32, 1.23);
  -o-transition: all 0.4s cubic-bezier(0.35, 0.22, 0.32, 1.23);
  transition: all 0.4s cubic-bezier(0.35, 0.22, 0.32, 1.23);
}

.idiomas-box .idiomas-buttons:hover {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
       -o-transform: scale(1.1);
          transform: scale(1.1);
}

.idiomas-box .idiomas-buttons img,
.idiomas-box .idiomas-buttons h4 {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  cursor: pointer;
}

.idiomas-box .idiomas-buttons h4 {
  text-align: center;
}

.idiomas-box .idiomas-buttons-small {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 2em;
}

.idiomas-box .idiomas-buttons-small img {
  -webkit-flex-basis: 20%;
      -ms-flex-preferred-size: 20%;
          flex-basis: 20%;
  max-height: 60px;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.idiomas-box .idiomas-buttons-small h4 {
  -webkit-flex-basis: 75%;
      -ms-flex-preferred-size: 75%;
          flex-basis: 75%;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  text-align: left;
}

.hide-idiomas-buttons-box .hide-idiomas-button {
  background: url("../../img/icons/works/fondo.svg") no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
}

.hide-idiomas-buttons-box .hide-idiomas-button .trayect-title {
  border-bottom: 1px solid #888888;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  margin-bottom: 1em;
  padding-bottom: 0.5em;
}

.hide-idiomas-buttons-box .hide-idiomas-button .trayect-title img {
  margin-top: -20px;
}

.hide-idiomas-buttons-box .hide-idiomas-button .trayect-title h2 {
  font-weight: 400;
  color: #888888;
}

.hide-idiomas-buttons-box .hide-idiomas-button .hide-info {
  width: 100%;
  height: auto;
  padding: 0;
}

.hide-idiomas-buttons-box .hide-idiomas-button .hide-info p {
  border-bottom: 0px solid transparent;
}

.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .oral,
.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .escrito {
  float: left;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .oral .text-description,
.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .escrito .text-description {
  text-transform: uppercase;
  color: #888888;
  font-weight: 400;
  font-size: 20px;
  width: 70%;
  height: 20px;
}

.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .oral .text-donut,
.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .escrito .text-donut {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
}

.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .oral .text-donut h2,
.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .oral .text-donut h3,
.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .escrito .text-donut h2,
.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .escrito .text-donut h3 {
  position: absolute;
  font-weight: 400;
  color: #888888;
}

.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .oral .text-donut h2,
.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .escrito .text-donut h2 {
  margin-left: 25px;
  margin-top: 35px;
  font-size: 25px;
}

.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .oral .text-donut h3,
.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .escrito .text-donut h3 {
  margin-left: 58px;
  margin-top: 40px;
  font-size: 20px;
}

.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .oral .donut-segment,
.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .oral .donut-ring,
.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .escrito .donut-segment,
.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .escrito .donut-ring {
  -webkit-transition: all 1.5s cubic-bezier(0.35, 0.22, 0.32, 1.23);
  -o-transition: all 1.5s cubic-bezier(0.35, 0.22, 0.32, 1.23);
  transition: all 1.5s cubic-bezier(0.35, 0.22, 0.32, 1.23);
}

.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .oral .close,
.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .escrito .close {
  cursor: pointer;
}

.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .escrito {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .escrito .text-description {
  text-align: right;
}

.hide-idiomas-buttons-box .hide-idiomas-button .hide-info .escrito .text-donut {
  left: auto;
  top: auto;
  bottom: 0;
  right: 0;
}

.otros-estudios-box {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 80%;
  max-width: 800px;
}

.otros-estudios-box ul li {
  margin-bottom: 2em;
  line-height: 1.2em;
}

.otras-habilidades-box {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 80%;
  max-width: 1000px;
}

.otras-habilidades-box .otras-habilidades {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 3em;
}

.otras-habilidades-box .otras-habilidades img {
  width: 20%;
}

.otras-habilidades-box .otras-habilidades div {
  width: 70%;
  padding-left: 2em;
}

.otras-habilidades-box .otras-habilidades div p {
  font-style: italic;
  color: #888888;
  font-size: 12pt;
}

.otras-habilidades-box .otras-habilidades:nth-child(even) {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.otras-habilidades-box .otras-habilidades:nth-child(even) div {
  padding-right: 2em;
  text-align: right;
}

@media (max-width: 1100px) {
  #present {
    position: relative;
    height: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
  #present .present-img,
  #present .contact-titular {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
  }
  #present .present-img {
    position: relative;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
    top: -3em;
    height: 60vh;
    -webkit-background-size: cover;
            background-size: cover;
  }
  #present .contact-titular {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    width: 90%;
    -webkit-flex-basis: 90%;
        -ms-flex-preferred-size: 90%;
            flex-basis: 90%;
    margin-top: 0em;
  }
  #present .contact-titular h2,
  #present .contact-titular h3 {
    text-align: center;
  }
  #present .contact-titular h2,
  #present .contact-titular h3,
  #present .contact-titular .text-present {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
  }
  #present .contact-titular h2 {
    font-size: 24pt;
  }
  #present .contact-titular h3 {
    font-size: 16pt;
  }
  #present .contact-titular .text-present {
    margin-top: 0;
  }
  #present .contact-titular .text-present button {
    bottom: -1em;
  }
  .trayect-buttons-box .trayect-buttons-small {
    margin: 2px;
    -webkit-flex-basis: 18%;
        -ms-flex-preferred-size: 18%;
            flex-basis: 18%;
  }
  .trayect-buttons-box .trayect-buttons-small .trayect-title h2 {
    font-size: 11pt;
    color: #4d4d4d;
    font-weight: 500;
  }
  .formacion-buttons-box .formacion-buttons {
    height: 200px;
  }
  .formacion-buttons-box .formacion-buttons h2 {
    -webkit-flex-basis: 90%;
        -ms-flex-preferred-size: 90%;
            flex-basis: 90%;
  }
  .formacion-buttons-box .formacion-buttons-small {
    -webkit-flex-basis: 28%;
        -ms-flex-preferred-size: 28%;
            flex-basis: 28%;
    padding: 0 0.5em;
    margin: 5px;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    height: 60px;
  }
  .formacion-buttons-box .formacion-buttons-small h2 {
    display: none;
  }
  .formacion-buttons-box .hide-formacion-buttons-box {
    width: 100%;
  }
  .hide-trayect-buttons-box {
    width: 100%;
  }
  .idiomas-box .idiomas-buttons-small {
    margin-bottom: 0;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .idiomas-box .idiomas-buttons-small img {
    height: 50px;
  }
  .idiomas-box .idiomas-buttons-small h4 {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    text-align: center;
    margin-top: 0.5em;
    margin-bottom: 1em;
  }
  .otros-estudios-box ul {
    margin: 0;
    padding: 0;
  }
  .otras-habilidades-box .otras-habilidades {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .otras-habilidades-box .otras-habilidades img {
    width: 30%;
  }
  .otras-habilidades-box .otras-habilidades div,
  .otras-habilidades-box .otras-habilidades div:nth-child(even) {
    padding: 0;
    text-align: center;
    width: 90%;
  }
  .otras-habilidades-box .otras-habilidades div h3,
  .otras-habilidades-box .otras-habilidades div:nth-child(even) h3 {
    margin-bottom: 0.5em;
    font-size: 20pt;
  }
  .otras-habilidades-box .otras-habilidades div p,
  .otras-habilidades-box .otras-habilidades div:nth-child(even) p {
    font-size: 14pt;
  }
}

@media (max-width: 768px) {
  #present {
    position: relative;
    height: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
  #present .present-img,
  #present .contact-titular {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
  }
  #present .present-img {
    position: relative;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
    top: -3em;
  }
  #present .contact-titular {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    width: 90%;
    -webkit-flex-basis: 90%;
        -ms-flex-preferred-size: 90%;
            flex-basis: 90%;
    margin-top: 0em;
  }
  #present .contact-titular h2,
  #present .contact-titular h3 {
    text-align: center;
  }
  #present .contact-titular h2,
  #present .contact-titular h3,
  #present .contact-titular .text-present {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
  }
  #present .contact-titular h2 {
    font-size: 12pt;
  }
  #present .contact-titular h3 {
    font-size: 14pt;
  }
  #present .contact-titular .text-present {
    margin-top: 0;
  }
  #present .contact-titular .text-present button {
    bottom: -1.5em;
  }
  #refer-box {
    width: 90%;
    margin: 0 auto;
  }
  #refer-box .text-box .int {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    width: 85%;
  }
  #refer-box .text-box .int .up,
  #refer-box .text-box .int .down {
    width: 20px;
  }
  #refer-box .text-box .int p {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
    padding: 1em 2em;
    font-size: 9pt;
  }
  #refer-box .text-box .int p .puntos {
    opacity: 0;
  }
  #refer-box .person h3 {
    font-size: 14pt;
  }
  #refer-box .person h4 {
    font-size: 12pt;
  }
  #refer-box .refer-big .int {
    width: 90%;
    padding-top: 1em;
  }
  #refer-box .refer-big .int p {
    padding: 2em;
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    font-size: 10pt;
  }
  #refer-box .refer-izda,
  #refer-box .refer-dcha,
  #refer-box .refer-izda2,
  #refer-box .refer-dcha2,
  #refer-box .refer-big {
    width: 90%;
  }
  #refer-box .refer-izda .up,
  #refer-box .refer-izda .down,
  #refer-box .refer-dcha .up,
  #refer-box .refer-dcha .down,
  #refer-box .refer-izda2 .up,
  #refer-box .refer-izda2 .down,
  #refer-box .refer-dcha2 .up,
  #refer-box .refer-dcha2 .down,
  #refer-box .refer-big .up,
  #refer-box .refer-big .down {
    opacity: 0;
  }
  #refer-box .refer-izda .int:after,
  #refer-box .refer-dcha .int:after,
  #refer-box .refer-izda2 .int:after,
  #refer-box .refer-dcha2 .int:after,
  #refer-box .refer-big .int:after {
    opacity: 0;
  }
  #refer-box .refer-izda {
    -webkit-transform: translateX(-30px) translateY(15px);
        -ms-transform: translateX(-30px) translateY(15px);
         -o-transform: translateX(-30px) translateY(15px);
            transform: translateX(-30px) translateY(15px);
  }
  #refer-box .refer-dcha {
    -webkit-transform: translateX(30px) translateY(15px);
        -ms-transform: translateX(30px) translateY(15px);
         -o-transform: translateX(30px) translateY(15px);
            transform: translateX(30px) translateY(15px);
  }
  #refer-box .refer-izda2 {
    -webkit-transform: translateX(-40px) translateY(25px);
        -ms-transform: translateX(-40px) translateY(25px);
         -o-transform: translateX(-40px) translateY(25px);
            transform: translateX(-40px) translateY(25px);
  }
  #refer-box .refer-dcha2 {
    -webkit-transform: translateX(40px) translateY(25px);
        -ms-transform: translateX(40px) translateY(25px);
         -o-transform: translateX(40px) translateY(25px);
            transform: translateX(40px) translateY(25px);
  }
  .trayect-buttons-box .trayect-buttons {
    -webkit-flex-basis: 45%;
        -ms-flex-preferred-size: 45%;
            flex-basis: 45%;
    margin: 5px;
    height: 150px;
  }
  .trayect-buttons-box .trayect-buttons img {
    width: 70px;
    margin-top: 10px;
  }
  .trayect-buttons-box .trayect-buttons .trayect-title {
    height: auto;
  }
  .trayect-buttons-box .trayect-buttons h2 {
    font-size: 12pt;
  }
  .trayect-buttons-box .trayect-buttons-small {
    -webkit-flex-basis: 16%;
        -ms-flex-preferred-size: 16%;
            flex-basis: 16%;
    height: 50px;
    margin: 4px;
  }
  .trayect-buttons-box .trayect-buttons-small img {
    -webkit-flex-basis: 75%;
        -ms-flex-preferred-size: 75%;
            flex-basis: 75%;
    margin: 5px;
  }
  .trayect-buttons-box .trayect-buttons-small .trayect-title {
    display: none;
  }
  .hide-trayect-buttons-box,
  .hide-formacion-buttons-box {
    width: 95%;
    margin: 0;
    margin-top: 5px;
  }
  .hide-trayect-buttons-box .hide-trayect-button,
  .hide-trayect-buttons-box .hide-formacion-button,
  .hide-formacion-buttons-box .hide-trayect-button,
  .hide-formacion-buttons-box .hide-formacion-button {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    margin: 0;
    padding: 1em;
  }
  .hide-trayect-buttons-box .hide-trayect-button img,
  .hide-trayect-buttons-box .hide-formacion-button img,
  .hide-formacion-buttons-box .hide-trayect-button img,
  .hide-formacion-buttons-box .hide-formacion-button img {
    margin: 0 auto;
  }
  .hide-trayect-buttons-box .hide-trayect-button .trayect-title,
  .hide-trayect-buttons-box .hide-formacion-button .trayect-title,
  .hide-formacion-buttons-box .hide-trayect-button .trayect-title,
  .hide-formacion-buttons-box .hide-formacion-button .trayect-title {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    margin-top: 0.5em;
  }
  .hide-trayect-buttons-box .hide-trayect-button .trayect-title h2,
  .hide-trayect-buttons-box .hide-trayect-button .trayect-title h4,
  .hide-trayect-buttons-box .hide-formacion-button .trayect-title h2,
  .hide-trayect-buttons-box .hide-formacion-button .trayect-title h4,
  .hide-formacion-buttons-box .hide-trayect-button .trayect-title h2,
  .hide-formacion-buttons-box .hide-trayect-button .trayect-title h4,
  .hide-formacion-buttons-box .hide-formacion-button .trayect-title h2,
  .hide-formacion-buttons-box .hide-formacion-button .trayect-title h4 {
    text-align: center;
    padding: 0;
  }
  .hide-trayect-buttons-box .hide-trayect-button .trayect-title h2,
  .hide-trayect-buttons-box .hide-formacion-button .trayect-title h2,
  .hide-formacion-buttons-box .hide-trayect-button .trayect-title h2,
  .hide-formacion-buttons-box .hide-formacion-button .trayect-title h2 {
    font-size: 14pt;
    line-height: 16pt;
    margin-bottom: 0.5em;
  }
  .hide-trayect-buttons-box .hide-trayect-button .trayect-title h4,
  .hide-trayect-buttons-box .hide-formacion-button .trayect-title h4,
  .hide-formacion-buttons-box .hide-trayect-button .trayect-title h4,
  .hide-formacion-buttons-box .hide-formacion-button .trayect-title h4 {
    font-size: 12pt;
  }
  .hide-trayect-buttons-box .hide-trayect-button .hide-info,
  .hide-trayect-buttons-box .hide-formacion-button .hide-info,
  .hide-formacion-buttons-box .hide-trayect-button .hide-info,
  .hide-formacion-buttons-box .hide-formacion-button .hide-info {
    padding: 0;
  }
  .hide-trayect-buttons-box .hide-trayect-button .hide-info p,
  .hide-trayect-buttons-box .hide-trayect-button .hide-info ul li,
  .hide-trayect-buttons-box .hide-formacion-button .hide-info p,
  .hide-trayect-buttons-box .hide-formacion-button .hide-info ul li,
  .hide-formacion-buttons-box .hide-trayect-button .hide-info p,
  .hide-formacion-buttons-box .hide-trayect-button .hide-info ul li,
  .hide-formacion-buttons-box .hide-formacion-button .hide-info p,
  .hide-formacion-buttons-box .hide-formacion-button .hide-info ul li {
    font-size: 10pt;
  }
  .hide-trayect-buttons-box .hide-trayect-button .hide-info h3,
  .hide-trayect-buttons-box .hide-formacion-button .hide-info h3,
  .hide-formacion-buttons-box .hide-trayect-button .hide-info h3,
  .hide-formacion-buttons-box .hide-formacion-button .hide-info h3 {
    font-size: 16pt;
    text-align: left;
    line-height: 18pt;
  }
  .hide-trayect-buttons-box .hide-trayect-button .hide-info h4,
  .hide-trayect-buttons-box .hide-formacion-button .hide-info h4,
  .hide-formacion-buttons-box .hide-trayect-button .hide-info h4,
  .hide-formacion-buttons-box .hide-formacion-button .hide-info h4 {
    font-size: 12pt;
  }
  .formacion-buttons-box .formacion-buttons {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    height: 120px;
    padding: 0 1em;
    margin: 5px;
  }
  .formacion-buttons-box .formacion-buttons h2 {
    font-size: 11pt;
  }
  .formacion-buttons-box .formacion-buttons-small {
    padding: 0 0.5em;
    margin: 5px;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    height: 60px;
  }
  .formacion-buttons-box .formacion-buttons-small h2 {
    height: auto;
    font-size: 12px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .hide-formacion-buttons-box .hide-formacion-button .formacion-logo {
    -webkit-flex-basis: 65%;
        -ms-flex-preferred-size: 65%;
            flex-basis: 65%;
    margin: 0.5em auto;
  }
  .hide-formacion-buttons-box .hide-formacion-button .trayect-title h2 {
    font-size: 14pt;
    line-height: 16pt;
  }
  .hide-formacion-buttons-box .hide-formacion-button .slider {
    height: 25vh;
  }
  .hide-formacion-buttons-box .hide-formacion-button .slider img {
    min-height: 25vh;
    min-width: 100%;
  }
  .hide-formacion-buttons-box .hide-formacion-button .hide-info ul {
    padding: 0 !important;
  }
  .hide-formacion-buttons-box .hide-formacion-button .hide-info ul li, .hide-formacion-buttons-box .hide-formacion-button .hide-info ul p {
    font-size: 10pt;
  }
  .idiomas-box .idiomas-buttons-small {
    margin-bottom: 0;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .idiomas-box .idiomas-buttons-small h4 {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    text-align: center;
  }
  .idiomas-box .idiomas-buttons img {
    height: 45px;
  }
  .idiomas-box .idiomas-buttons h4 {
    margin-top: 0.5em;
  }
  .hide-idiomas-buttons-box .hide-idiomas-button {
    padding: 2em 1em;
  }
  .hide-idiomas-buttons-box .hide-idiomas-button .trayect-title {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
  .hide-idiomas-buttons-box .hide-idiomas-button .trayect-title h2 {
    font-size: 16pt;
    text-align: center;
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    padding: 0;
    margin-top: 0.5em;
  }
  .hide-idiomas-buttons-box .hide-idiomas-button .hide-info .oral,
  .hide-idiomas-buttons-box .hide-idiomas-button .hide-info .escrito {
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
  }
  .hide-idiomas-buttons-box .hide-idiomas-button .hide-info .oral .text-description,
  .hide-idiomas-buttons-box .hide-idiomas-button .hide-info .escrito .text-description {
    height: auto;
    font-size: 6vw;
    margin: 5px;
  }
  .hide-idiomas-buttons-box .hide-idiomas-button .hide-info .oral .text-donut {
    left: -6px;
  }
  .hide-idiomas-buttons-box .hide-idiomas-button .hide-info .escrito .text-donut {
    right: -6px;
  }
  .otros-estudios-box {
    width: 90%;
  }
  .otros-estudios-box ul {
    padding: 0;
    margin: 0;
  }
  .otros-estudios-box ul li {
    font-size: 4vw;
  }
  .otras-habilidades-box .otras-habilidades {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .otras-habilidades-box .otras-habilidades img {
    width: 50%;
  }
  .otras-habilidades-box .otras-habilidades div,
  .otras-habilidades-box .otras-habilidades div:nth-child(even) {
    padding: 0;
    text-align: center;
    width: 90%;
  }
  .otras-habilidades-box .otras-habilidades div h3,
  .otras-habilidades-box .otras-habilidades div:nth-child(even) h3 {
    margin-bottom: 0.5em;
  }
  .otras-habilidades-box .otras-habilidades div p,
  .otras-habilidades-box .otras-habilidades div:nth-child(even) p {
    font-size: 10pt;
  }
}
/*# sourceMappingURL=style.css.map */