@import url(https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;700&display=swap);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/*Font Family*/
/* Opciones($prop): color, background-color,opacity,..., all */
/*PlaceHolder*/
/*font-size: get-vw(30px);*/
/*padding-top:get-vw(50px);*/
/*@font-face {
    font-family: 'crossoverregular';
    src:    url("../../dist/font/crossover-webfont.woff") format("woff"), 
            url("../../dist/font/crossover-webfont.woff2") format("woff");
    font-weight: normal;
    font-style: normal; }

//   @font-face {
//     font-family: 'crossoverextralight';
//     src:    url("../../dist/font/crossover_extralight-webfont.woff") format("woff");
//     font-weight: normal;
//     font-style: normal; }

  @font-face {
    font-family: 'crossoverlight';
    src:    url("../../dist/font/crossover_light-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal; }
*/
.header {
  /* position: fixed; */
  /* margin: 0px auto; */
  width: 100%;
  height: 14vh;
  min-height: 180px;
  background-color: #fbf7ec;
  z-index: 1001;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center; }
  @media only screen and (max-width: 1250px) {
    .header {
      min-height: 160px; } }
  @media only screen and (max-width: 1024px) {
    .header {
      min-height: 140px; } }
  @media only screen and (max-width: 900px) {
    .header {
      min-height: 120px; } }
  @media only screen and (max-width: 768px) {
    .header {
      min-height: 100px; } }
  @media only screen and (max-width: 525px) {
    .header {
      min-height: 90px; } }

.logo {
  width: 20%;
  max-width: 271px;
  min-width: 195px;
  margin-left: 2%;
  margin-bottom: 70px; }
  @media only screen and (max-width: 1250px) {
    .logo {
      margin-bottom: 58px; } }
  @media only screen and (max-width: 1024px) {
    .logo {
      margin-bottom: 54px; } }
  @media only screen and (max-width: 900px) {
    .logo {
      margin-bottom: 52px; } }
  @media only screen and (max-width: 768px) {
    .logo {
      margin-bottom: 38px; } }
  @media only screen and (max-width: 525px) {
    .logo {
      margin-bottom: 33px; } }

.log img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0; }

.minimenu {
  display: block;
  width: 0%;
  min-width: 96px;
  font-family: ClashDisplay-Medium;
  font-size: calc(12px + .1vw);
  color: #272523;
  margin-left: 18%;
  padding-left: 12vw;
  margin-bottom: 52px;
  align-self: flex-end; }
  @media only screen and (max-width: 1250px) {
    .minimenu {
      margin-bottom: 44px; } }
  @media only screen and (max-width: 1024px) {
    .minimenu {
      margin-bottom: 35px;
      padding-left: 4vw; } }
  @media only screen and (max-width: 900px) {
    .minimenu {
      margin-bottom: 27px;
      padding-left: 0vw; } }
  @media only screen and (max-width: 768px) {
    .minimenu {
      margin-bottom: 16px;
      padding-left: 0vw; } }
  @media only screen and (max-width: 525px) {
    .minimenu {
      margin-bottom: 16px; } }

.minimenu {
  cursor: pointer; }

.minimenu ul {
  list-style-type: none;
  line-height: 24px; }

.minimenu li {
  width: 93%;
  background: linear-gradient(to right, #3cff00 50%, #fbf7ec 50%);
  background-size: 205% 100%;
  background-position: right bottom;
  margin-left: 5px;
  transition: all .5s ease; }

.pointercursor {
  cursor: pointer !important; }

.pointerdefault {
  cursor: default !important; }

/*.minimenu li:hover { background-position:left bottom; }*/
.overli {
  background-position: left bottom !important; }

.outli {
  background-position: right bottom; }

.minicontactos {
  width: 14%;
  min-width: 192px;
  margin-right: -20;
  font-family: ClashDisplay-Medium;
  font-size: calc(11px + .085vw);
  color: #272523;
  align-self: flex-end;
  margin-bottom: 86px; }
  @media only screen and (max-width: 1250px) {
    .minicontactos {
      margin-bottom: 78px; } }
  @media only screen and (max-width: 1024px) {
    .minicontactos {
      margin-bottom: 71px;
      padding-left: 4vw; } }
  @media only screen and (max-width: 900px) {
    .minicontactos {
      margin-bottom: 62px;
      padding-left: 0vw; } }
  @media only screen and (max-width: 768px) {
    .minicontactos {
      margin-bottom: 49px;
      padding-left: 0vw; } }
  @media only screen and (max-width: 525px) {
    .minicontactos {
      margin-bottom: 40px; } }

.minicontactos ul {
  list-style-type: none;
  line-height: 18px; }

.mailclick {
  cursor: pointer;
  color: #272523;
  text-decoration: none; }

.mailclick:hover {
  color: #3cff00; }

@media (max-width: 730px) {
  .minimenu {
    display: none; }
  .minicontactos {
    min-width: 156px; } }

* {
  margin: 0;
  padding: 0; }

body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  padding: 0;
  margin: 0;
  padding: 0; }

/*
  container
*/
#container {
  /*position: relative;*/
  width: 100%;
  /*max-width: 1600px;*/
  margin: 0 auto;
  top: 14vh;
  height: auto;
  text-align: center;
  overflow: hidden; }

.footer {
  position: relative;
  margin: 0px auto;
  width: 100%;
  height: 50px;
  background-color: #fbf7ec;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center; }

.fecha {
  /* width: 8%;
  min-width: 200px;*/
  font-family: ClashDisplay-Medium;
  font-size: calc(9px + .1vw);
  color: #272523;
  margin-left: 20px; }

/****************************

    HOME - homeDIV

****************************/
#homeDIV {
  position: relative;
  width: 100%;
  min-height: 75vh;
  height: auto;
  background-color: #fbf7ec;
  padding: 0;
  margin: 0; }
  @media only screen and (max-width: 1250px) {
    #homeDIV {
      min-height: 77vh; } }
  @media only screen and (max-width: 1024px) {
    #homeDIV {
      min-height: 79vh; } }
  @media only screen and (max-width: 900px) {
    #homeDIV {
      min-height: 81vh; } }
  @media only screen and (max-width: 768px) {
    #homeDIV {
      min-height: 82vh; } }
  @media only screen and (max-width: 525px) {
    #homeDIV {
      min-height: 84vh; } }

.heightSafari {
  min-height: 69vh !important; }

.heightEdge {
  min-height: 72vh !important; }

.heightOthers {
  min-height: 67vh !important; }

#menu {
  display: none;
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: -800px;
  width: 1600px;
  height: 270px; }

#introDIV {
  position: absolute;
  left: 2%;
  width: 96%;
  height: 100%;
  padding: 0;
  margin: 0;
  z-index: 1;
  overflow: hidden; }

#introLineas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 885px;
  /*min-height: 500px;
        min-width: 900px;*/
  overflow: hidden; }

.lininternas {
  white-space: nowrap;
  width: 100%;
  font-family: ClashDisplay-Medium;
  font-size: 17vh;
  color: #272523;
  overflow: hidden; }

#spnRefe {
  position: relative;
  display: inline-block;
  left: 0px;
  top: 0px;
  color: #fbf7ec; }

.llaves {
  display: inline-block;
  position: relative;
  margin-right: auto; }

.inlinClass {
  text-align: left;
  width: 100%;
  height: 100%;
  transform: translateY(-105%);
  display: flex;
  flex-direction: column;
  justify-content: center; }

#linea4 .clipwords {
  display: inline-block;
  position: relative;
  -webkit-clip-path: inset(0 44% 0 45%);
  clip-path: inset(0 44% 0 45%); }

#linea4 .asterisco:first-child {
  display: inline-block;
  position: relative;
  right: -50%;
  transform: translate(-100%);
  z-index: 10; }

#linea4 .asterisco:last-child {
  display: inline-block;
  position: relative;
  right: 50%;
  transform: translate(100%);
  z-index: 10; }

#boloncio {
  transform: scale(0.8);
  transform-origin: 404px 99px;
  width: 510px;
  height: 223px;
  position: absolute;
  left: 740px;
  top: 100px;
  clip-path: url(#svgPath); }

#boloncio svg {
  position: absolute;
  width: 510px;
  height: 223px; }

.circBolo {
  position: absolute;
  height: 223px;
  width: 223px;
  background-color: #3cff00;
  border-radius: 50%;
  left: 286px;
  top: 0px;
  transform: scale(0);
  cursor: pointer; }

.txtBolo {
  position: absolute;
  text-align: left;
  left: 588px;
  top: 66px;
  font-family: ClashDisplay-Medium;
  font-size: 18px;
  color: #272523;
  width: 400px;
  height: 91px;
  white-space: nowrap;
  line-height: 23px; }

#skipintro {
  cursor: pointer;
  position: absolute;
  width: 242px;
  height: 30px;
  color: black;
  left: -50%;
  top: 44%;
  margin-left: -122px;
  font-family: ClashDisplay-Medium;
  font-size: calc(20px + 1vw);
  opacity: 0; }

/****************************

    trabajos - trabajosDIV

****************************/
#trabajosDIV {
  position: absolute;
  left: 2%;
  width: 96%;
  height: 100%;
  /*background-color: blue;*/
  padding: 0;
  margin: 0;
  display: none;
  opacity: 0;
  z-index: 101; }

#trabajosDIV span {
  cursor: pointer;
  color: white; }

#titular_trabajos {
  position: absolute;
  left: 4%;
  top: 5vh;
  opacity: 0;
  text-align: left;
  font-family: ClashDisplay-Medium;
  font-size: calc(17px + 3vw);
  color: #3cff00;
  z-index: 10;
  margin-left: 15px; }
  @media only screen and (max-width: 1024px) {
    #titular_trabajos {
      font-size: calc(17px + 3vw); } }
  @media only screen and (max-width: 900px) {
    #titular_trabajos {
      font-size: calc(20px + 2.5vw); } }
  @media only screen and (max-width: 768px) {
    #titular_trabajos {
      font-size: calc(23px + 2vw); } }
  @media only screen and (max-width: 525px) {
    #titular_trabajos {
      font-size: calc(25px + 1.5vw); } }

#cartasCont {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 102; }

#mask_trabajos {
  /*display: none;*/
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px; }

#mask_trabajos img {
  width: 100%;
  height: 100%; }

#mask_trabajos canvas {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 10; }

#introCont {
  position: absolute;
  bottom: 6px;
  left: 30%;
  width: 40%;
  height: 25px;
  /* background-color: #d7bd1e; */
  overflow: hidden;
  z-index: 103;
  white-space: nowrap; }
  @media only screen and (max-width: 1024px) {
    #introCont {
      left: 28%;
      width: 42%;
      bottom: 3px; } }
  @media only screen and (max-width: 900px) {
    #introCont {
      left: 25%;
      width: 43%;
      bottom: 0px; } }
  @media only screen and (max-width: 768px) {
    #introCont {
      left: 21%;
      width: 54%;
      bottom: -1px; } }
  @media only screen and (max-width: 525px) {
    #introCont {
      left: 20%;
      width: 60%;
      bottom: -2px; } }

.txtcool {
  position: absolute;
  font-size: 30px;
  font-family: 'Oswald';
  width: 100%;
  top: 85px;
  text-align: center;
  cursor: pointer;
  font-family: ClashDisplay-Light;
  font-size: calc(10px + .8vw);
  background-color: #3cff00;
  color: black; }

#close_trabajos {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 120px;
  width: 120px;
  opacity: 0;
  z-index: 1001;
  transform-origin: right top;
  transform: scale(1); }
  @media only screen and (max-width: 1024px) {
    #close_trabajos {
      transform: scale(0.9); } }
  @media only screen and (max-width: 900px) {
    #close_trabajos {
      transform: scale(0.8); } }
  @media only screen and (max-width: 768px) {
    #close_trabajos {
      transform: scale(0.7); } }
  @media only screen and (max-width: 525px) {
    #close_trabajos {
      transform: scale(0.6); } }

#bot_close_trabajos {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer; }

#equis_trabajos {
  position: absolute;
  font-size: 25px;
  color: white;
  font-family: ClashDisplay-Light;
  font-size: calc(33px + .085vw); }

/****************************

    quienes somos - quienesDIV

****************************/
#quienesDIV {
  position: absolute;
  left: 2%;
  width: 96%;
  height: 100%;
  /*background-color: blue;*/
  padding: 0;
  margin: 0;
  display: none;
  opacity: 0;
  z-index: 101; }

#quienesDIV span {
  color: white; }

#mask_quienes {
  /*display: none;*/
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px; }

#mask_quienes img {
  width: 100%;
  height: 100%; }

#mask_quienes canvas {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 10; }

#quienes_contenido {
  display: flex;
  flex-direction: column;
  position: relative;
  left: 4%;
  top: 5vh;
  width: 91%;
  height: 90%;
  /*background-color: #d7bd1e;*/
  overflow: hidden;
  z-index: 103; }

#titular_quienes {
  position: relative;
  opacity: 0;
  text-align: left;
  font-family: ClashDisplay-Medium;
  font-size: calc(17px + 3vw);
  color: #3cff00;
  margin-left: 15px; }
  @media only screen and (max-width: 1024px) {
    #titular_quienes {
      font-size: calc(17px + 3vw); } }
  @media only screen and (max-width: 900px) {
    #titular_quienes {
      font-size: calc(20px + 2.5vw); } }
  @media only screen and (max-width: 768px) {
    #titular_quienes {
      font-size: calc(23px + 2vw); } }
  @media only screen and (max-width: 525px) {
    #titular_quienes {
      font-size: calc(25px + 1.5vw); } }

#scrolldescripcion {
  position: absolute;
  display: none;
  opacity: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10; }

#posscroll {
  display: none;
  flex-grow: 1;
  position: relative;
  width: 100%;
  height: 89%;
  margin-top: 15px;
  /*background-color: #ff4400;*/ }

#descripcion_quienes {
  text-align: left;
  font-family: ClashDisplay-Extralight;
  font-size: calc(14px + .5vw);
  line-height: 29px;
  color: #fbf7ed; }
  @media only screen and (max-width: 1024px) {
    #descripcion_quienes {
      font-size: calc(14px + .5vw);
      line-height: 28px; } }
  @media only screen and (max-width: 900px) {
    #descripcion_quienes {
      font-size: calc(15px + .4vw);
      line-height: 26px; } }
  @media only screen and (max-width: 768px) {
    #descripcion_quienes {
      font-size: calc(14px + .3vw);
      line-height: 23px; } }
  @media only screen and (max-width: 525px) {
    #descripcion_quienes {
      font-size: calc(14px + .3vw);
      line-height: 20px; } }

#descripcion_quienes li {
  list-style: inside; }

.asterisco {
  color: #3cff00 !important; }

.semitit {
  color: #fbf7ed !important; }

.resttxt {
  opacity: .7 !important; }

.clarito {
  opacity: 1 !important; }

#bgpilimili {
  mix-blend-mode: multiply;
  position: absolute;
  bottom: 3%;
  left: 4%;
  width: 23%;
  height: auto;
  opacity: 0;
  z-index: 11;
  min-width: 280px; }

#descripcion_quienes ul {
  line-height: 30px; }
  @media only screen and (max-width: 1024px) {
    #descripcion_quienes ul {
      line-height: 28px !important; } }
  @media only screen and (max-width: 900px) {
    #descripcion_quienes ul {
      line-height: 25px !important; } }
  @media only screen and (max-width: 768px) {
    #descripcion_quienes ul {
      line-height: 22px !important; } }
  @media only screen and (max-width: 525px) {
    #descripcion_quienes ul {
      line-height: 20px !important; } }

#close_quienes {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 120px;
  width: 120px;
  opacity: 0;
  z-index: 1001;
  transform-origin: right top;
  transform: scale(1); }
  @media only screen and (max-width: 1024px) {
    #close_quienes {
      transform: scale(0.9); } }
  @media only screen and (max-width: 900px) {
    #close_quienes {
      transform: scale(0.8); } }
  @media only screen and (max-width: 768px) {
    #close_quienes {
      transform: scale(0.7); } }
  @media only screen and (max-width: 525px) {
    #close_quienes {
      transform: scale(0.6); } }

#bot_close_quienes {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer; }

#equis_quienes {
  position: absolute;
  font-size: 25px;
  color: white;
  font-family: ClashDisplay-Light;
  font-size: calc(33px + .085vw); }

/****************************

    contacto somos - contactoDIV

****************************/
#contactoDIV {
  position: absolute;
  left: 2%;
  width: 96%;
  height: 100%;
  /*background-color: blue;*/
  padding: 0;
  margin: 0;
  display: none;
  opacity: 0;
  z-index: 101; }

#contactoDIV span {
  /*cursor: pointer; 
    color: white;*/ }

#mask_contacto {
  /*display: none;*/
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px; }

#mask_contacto img {
  width: 100%;
  height: 100%; }

#mask_contacto canvas {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 10; }

#contacto_contenido {
  display: none;
  position: absolute;
  left: 5%;
  top: 5vh;
  width: 50%;
  height: 85%;
  z-index: 103; }

#titular_contacto {
  opacity: 0;
  text-align: left;
  font-family: ClashDisplay-Medium;
  font-size: calc(17px + 3vw);
  color: #3cff00; }
  @media only screen and (max-width: 1024px) {
    #titular_contacto {
      font-size: calc(17px + 3vw); } }
  @media only screen and (max-width: 900px) {
    #titular_contacto {
      font-size: calc(20px + 2.5vw); } }
  @media only screen and (max-width: 768px) {
    #titular_contacto {
      font-size: calc(23px + 2vw); } }
  @media only screen and (max-width: 525px) {
    #titular_contacto {
      font-size: calc(25px + 1.5vw); } }

#mayorque {
  opacity: 0;
  color: #fbf7ec !important;
  position: absolute;
  margin-top: 3vh;
  left: 55%;
  top: 5vh;
  width: 40%;
  height: 85%;
  z-index: 103;
  text-align: left;
  align-items: center;
  font-family: ClashDisplay-Medium;
  font-size: 145vh;
  display: flex;
  flex-direction: row-reverse;
  vertical-align: center;
  align-items: center;
  justify-content: flex-end; }

.phonenumber {
  color: inherit !important;
  text-decoration: none !important; }

a[href^=tel] {
  color: inherit !important;
  text-decoration: none !important; }

#descripcion_contacto {
  opacity: 0;
  color: #fbf7ec;
  text-align: left;
  font-family: ClashDisplay-Extralight;
  font-size: calc(14px + .5vw);
  line-height: 29px;
  color: #fbf7ed; }
  @media only screen and (max-width: 1024px) {
    #descripcion_contacto {
      font-size: calc(14px + .5vw);
      line-height: 28px; } }
  @media only screen and (max-width: 900px) {
    #descripcion_contacto {
      font-size: calc(15px + .4vw);
      line-height: 26px; } }
  @media only screen and (max-width: 768px) {
    #descripcion_contacto {
      font-size: calc(14px + .3vw);
      line-height: 23px; } }
  @media only screen and (max-width: 525px) {
    #descripcion_contacto {
      font-size: calc(14px + .3vw);
      line-height: 20px; } }

.asterisco {
  color: #3cff00 !important; }

.semitit {
  color: #fbf7ed !important; }

.resttxt {
  opacity: .6 !important; }

#close_contacto {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 120px;
  width: 120px;
  opacity: 0;
  z-index: 1001;
  transform-origin: right top;
  transform: scale(1); }
  @media only screen and (max-width: 1024px) {
    #close_contacto {
      transform: scale(0.9); } }
  @media only screen and (max-width: 900px) {
    #close_contacto {
      transform: scale(0.8); } }
  @media only screen and (max-width: 768px) {
    #close_contacto {
      transform: scale(0.7); } }
  @media only screen and (max-width: 525px) {
    #close_contacto {
      transform: scale(0.6); } }

#bot_close_contacto {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer; }

#equis_contacto {
  position: absolute;
  font-size: 25px;
  color: white;
  font-family: ClashDisplay-Light;
  font-size: calc(33px + .085vw); }

/* iphone X */
/* iphone 8 */
/* iphone 8 plus */