@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');

@font-face {
  font-family: 'DIN Pro';
  src: local('DIN Pro Medium'), local('DIN-Pro-Medium'),
      url('DINPro-Medium.woff2') format('woff2'),
      url('DINPro-Medium.woff') format('woff'),
      url('DINPro-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

*{
  padding: 0%;
  margin: 0%;  
}

.body,body{
  overflow-x: hidden;
}

.margenblog{
  margin-top: 14vh !important;
}

.texto-staticob {
    font-family: 'Oswald', sans-serif;
    font-size: 100px;
    font-weight: 700;
    text-align: left;
    color: #000;
    text-transform: uppercase;
}

.textobanner {
    font-family: 'Oswald', sans-serif;
    font-size: 28px;
    font-weight: 400;
    text-align: left;
    color: #000;
}

.textoblack {
    font-family: 'Oswald', sans-serif;
    font-size: 28px;
    font-weight: 300;
    text-align: left;
    color: #fff;
}


.seccionb{
  width: 100%;
  height: 100vh;
  padding-top: 13%;
}

.seccionc{
  width: 100%;
  padding-top: 15%;
  padding-bottom: 5%;
}

.seccions {
    width: 100%;    
    padding-top: 13%;
    padding-bottom: 5%;
}

.cuadrocard{
  width: 100%;
  height: 600px;
  overflow: hidden;
  border-radius: 36px;
  box-shadow: 20px 20px 25px rgba(222, 64, 0, 0.4);
  background-color: #fff;
  color: #fa6019;
}

.cuadrocard:hover{
  background-color: #fa6019;
  color:#fff;
}

.areaimagen{
  width: 100%;
  height: 350px;  
  position: relative;
  overflow: hidden;
}

.ingser{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.coverturaimg{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0.6);
}

.categoria{
  position: absolute;
  top: 30px;
  left: 30px;
  background-color: #fa6019;
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  font-weight: 400;
  text-align: left;
  padding: 5px 20px;
  text-transform: uppercase;
  border-radius: 50px;
}

.artitle{
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  padding: 30px 40px;
}

.imgico{
  width: 50px;
}

.tituloico{
  font-family: 'Oswald', sans-serif;
  font-size: 35px;
  font-weight: 600;
  text-align: left;
  color: #fff;  
}

.textoico{
  font-family: 'Oswald', sans-serif;
  font-size: 25px;
  font-weight: 500;
  text-align: left;
  color: #fff;
  margin: 0px !important;
  line-height: 30px;
}

.areatextoservis{
  width: 100%;
  height: 250px; 
  display: flex;
  justify-content: center;
  align-items: center;
}

.hijoservis{
  width: 80%;
}

.textoservis{  
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  font-weight: 400;
  text-align: left;
}

.fondoservis{
  background-color: #fa4f00;
  padding-top: 7%;
  padding-bottom: 7%;
}

.vw{
  display: block;
}

.campostx{
  background-color: transparent !important;
  color: #fff !important;
  border: solid 1px #fff !important;
  padding: 0.5rem 1rem !important;
  font-size: 1.2em !important;
  font-family: 'Oswald', sans-serif !important;
  border-radius: 10px !important;
  width: 100% !important;
}

.campostx::placeholder{
  color: #fff !important;
  font-size: 1.2em !important;
  font-family: 'Oswald', sans-serif !important;
}

.btn-white {
    padding-left: 3em !important;
    padding-right: 3em !important;
    padding-top: 0.1em !important;
    padding-bottom: 0.2em !important;
    background-color: rgba(255, 255,255, 1) !important;
    font-family: 'Oswald', sans-serif !important;
    font-size: 30px !important;
    font-weight: 400 !important;
    text-align: center !important;
    color: #fa4f00 !important;
    border-radius: 50px !important;
    cursor: url(../img/manos.png), pointer !important;
}

.seccionp{
  width: 100%;
  padding-top: 10%;
  padding-bottom: 5%;
}

.areao{
  background-color: #fa4f00;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  padding-left: 3em !important;
  padding-top: 4em !important;
  padding-bottom: 3em !important;
  padding-right: 2em !important;
}

.areay{
  background-color: #f7fa19;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  padding-left: 2em !important;
  padding-top: 4em !important;
  padding-bottom: 3em !important;
  padding-right: 3em !important;
  position: relative;
}

.tituloorang {
    font-family: 'Oswald', sans-serif;
    font-size: 120px;
    font-weight: 900;
    text-align: left;
    color: #fff;
}

.titulonaranjas {
    font-family: 'Oswald', sans-serif;
    font-size: 143px;
    font-weight: 900;
    text-align: center;
    color: #fa4f00;
}

.textonaranja {
    font-family: 'Oswald', sans-serif;
    font-size: 28px;
    font-weight: 400;
    text-align: left;
    color: #fff;
}

.linkorangeb{
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  color: #000;
  padding-left: 5px;
  padding-right: 5px;
}

.linkorangeb:hover{
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #fa4f00;
  padding-left: 5px;
  padding-right: 5px;
}

.linkorangebact{
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #fa4f00;
  padding-left: 5px;
  padding-right: 5px;
}

.recuadro{
  width: 100%;
  height: 550px;
  border-radius: 30px;
  background-color: transparent;
  position: relative;
  overflow: hidden;
}

.botonportada{
  width: 100%;
  height: 550px;
  border-radius: 30px;
  background-color: transparent;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  font-family: 'Oswald', sans-serif;
  font-size: 30px;
  font-weight: 700;
  text-align: center; 
  display: flex;
  justify-content: center;
  align-items: end; 
  padding-bottom: 15%;
  cursor: url(../img/manos.png), pointer;
}

.botonportada:hover{
  width: 100%;
  height: 550px;
  border-radius: 30px;
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(250,79,0,1) 100%);
  position: absolute;
  top: 0px;
  left: 0px;
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  cursor: url(../img/manos.png), pointer;
}

.portadaimg{
  object-fit: cover;
  width: 100%;
}

.textonaranja {
    font-family: 'Oswald', sans-serif;
    font-size: 28px;
    font-weight: 400;
    text-align: left;
    color: #fff;
}

.areaimg{
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.imgmano{
  width: 50%;
}

.btn-orange{
  padding-left:3em !important;
  padding-right: 3em !important;
  padding-top: 0.1em !important;
  padding-bottom: 0.2em !important;
  background-color: rgba(250,79,0,1) !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  text-align: center !important;
  color: #fff !important;
  border-radius: 50px !important;
  cursor: url(../img/manos.png), pointer !important;
}

.btn-orange:hover{
  padding-left:3em !important;
  padding-right: 3em !important;
  padding-top: 0.1em !important;
  padding-bottom: 0.2em !important;
  background-color: rgba(250,79,0,0.5) !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  text-align: center !important;
  color: #fff !important;
  border-radius: 50px !important;
  cursor: url(../img/manos.png), pointer !important;
}

.textblackc {
    font-family: 'Oswald', sans-serif;
    font-size: 35px;
    font-weight: 600;
    text-align: left;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    cursor: url(../img/manos.png), pointer !important;
}

.areablack{
  background-color: #000;
  width: 100%;
  padding-top: 3em;
  padding-bottom: 2em;
  padding-left: 4em;
  padding-right: 4em;
  border-radius: 40px;
}

.imagequipo{
  width: 100%;
  border-radius: 10%;
}

.marcocuadro{
  position: absolute;
  top: 11px;
  left: 11px;
  bottom: 11px;
  right: 11px;
  background-color: transparent;
  z-index: 20;
  border-radius: 10%;  
  mix-blend-mode: normal;
  display: flex;
  align-items: end;
  justify-content: center;  
}

.marcocuadro:hover{
  position: absolute;
  top: 11px;
  left: 11px;
  bottom: 11px;
  right: 11px;
  background-color: rgba(250,79,0,1);
  z-index: 20;
  border-radius: 10%;  
  mix-blend-mode: soft-light;
}

.cuadrotexto{
  position: absolute;
  left: 10%;
  bottom: 20px;
  width: 80%;
  display: none;
  mix-blend-mode: normal !important;
}

.textname{
  font-family: 'Oswald', sans-serif;
  font-size: 25px;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
}

.txtf{
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
}

.pd{
  padding-top: .7rem !important;
  padding-bottom: .7rem !important;
}

.tituloblog{
  width: 100%;
  font-family: 'Oswald', sans-serif;
  font-size: 120px;
  font-weight: 900;
  color: #fa4f00;
  text-align: center;
}

.botonesblog{
  width: 100px;
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 10px;
  padding-right: 10px;
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: #000;
  text-align: center;
  background-color: transparent;
  border:none;
  text-decoration: none;
}

.botonesblog:hover{
  width: 100px;
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 10px;
  padding-right: 10px;
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: #fa4f00;
  text-align: center;
  background-color: transparent;
  border:none;
  text-decoration: none;
}

.botonesblogactive{
  width: 100px;
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 10px;
  padding-right: 10px;
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: #fa4f00;
  text-align: center;
  background-color: transparent;
  border:none;
  text-decoration: none;
}

.imgblog{
  width: 100%;
  border-radius: 30px;
}

.letraspb{
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #000;
  text-align: left;
}

.tituloblogult{
  font-family: 'Oswald', sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: #fa4f00;
  text-align: left;
  text-decoration: none !important;
  line-height: 55px;

}

.titulosearch{
  font-family: 'Oswald', sans-serif;
  font-size: 60px;
  font-weight: 700;
  color: #fa4f00;
  text-align: center;
  margin-top: 30px;
}

.textosearch{
  font-family: 'Oswald', sans-serif;
  font-size: 40px;
  font-weight: 400;
  color: #000;
  text-align: center;
}

.tituloblogult:hover{
  font-family: 'Oswald', sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: #000;
  text-align: left;
  line-height: 55px;
  text-decoration: none !important;
}

.titulobloart{
  font-family: 'Oswald', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #000 !important;
  text-align: left;
  text-decoration: none;
}

.titulobloart:hover{
  font-family: 'Oswald', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #fa4f00 !important;
  text-align: left;
  text-decoration: none;
}

.card-textblog{
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: #000 !important;
  text-align: left;
}

.textoblogult{
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: #000;
  text-align: left;
}

.textobutomblog{
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #fa4f00 !important;
  text-align: left;
  margin-top: 8px;
}

.contenedorart{
  background-color: #fa4f00;
  border-radius: 40px;
  padding:15px 30px !important;
}

.contbody{
  padding: 20px 50px !important;
}

.padre{
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.imgas{
  width: 20px !important;
  margin-left: 10px;
  margin-right: 10px;
}

.sombras{
  border-radius:30px !important;
  box-shadow: -18px 18px 15px rgba(226, 37, 0, .8); 
}

.sombrasb{
  width: 100%;
  border-radius:30px !important;
  box-shadow: -2px 2px 10px rgba(226, 37, 0, .5); 
}

.inputpage{
  width: 80px;
  border: solid 3px #fa4f00 !important;
  background: transparent;
  text-align: center;
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #fa4f00 !important;
  border-radius: 7px;
  margin-right: 10px;
  margin-top: 6px;
}

.inputpage:focus{
  outline:none !important;
  outline-width: 0 !important;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}

.frase{
  font-family: 'Oswald', sans-serif;
  font-size: 30px;
  font-weight: 500;
  color: #000 !important;
  padding-top: 7%;
  padding-bottom: 7%;
  text-align: center;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 1rem !important;
    font-size: 1.2em !important;
    font-family: 'Oswald', sans-serif !important;
    font-weight: 400;
    line-height: 1.5;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;    
    border-radius: 0px !important;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-control-lg {
    display: block;
    width: 100%;
    padding: 0.375rem 1rem !important;
    font-size: 1.2em !important;
    font-family: 'Oswald', sans-serif !important;
    font-weight: 400;
    line-height: 1.5;
    color: #fa4f00 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: solid 2px #fa4f00 !important;
    border-radius: 10px !important;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-control-lg::placeholder{
  font-family: 'Oswald', sans-serif !important;
  color: #fa4f00 !important;
}

.celulares {
  width: 50%;
}

.banner-app {
    position: relative;
    width: 100%;
    padding-bottom: 460px;
}

.texto-jobgy {
    font-size: 25px;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    text-align: center;
    padding-top: 70px;
    padding-bottom: 100px;
}

.divgy {
    width: 100%;
    height: 800px;
    position: relative;
    background-image: url(../../trabajos/assets/img/recursos-guardiaya/Banner-logo.jpg);
    background-size: cover;
    background-position: center center;
}

.divfourgy {
    width: 100%;
    padding-bottom: 0px;
    position: relative;
}

.pcdesk{
  width: 700px;
  height: 563.52px;
  position: relative;
}

.pantalla {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 684px;
    height: 386px;
    background-color: #333333;
    overflow: hidden;
}

.captures{
    width: 684px;
    height: 386px;
    background-color: #333333;
    overflow: hidden;
    position: relative;
}

.capturest{
    width: 684px;
    height: 386px;
    background-color: #333333;
    overflow: hidden;
    position: relative;
}

.capturesc{
    width: 195px;
    height: 460px;
    background-color: #333333;
    overflow: hidden;
    position: relative;
}

.celular{
  width: 526px;
  height: 595.11px;
  position: relative;
}

.pantallacel {
    position: absolute;
    left: 218px;
    top: 36px;
    width: 229px;
    height: 508px;
    background-color: #333333;
    overflow: hidden;
    border-radius: 19px;
}

.celulars{
  width: 360px;
  height: 480.11px;
  position: relative;
}

.pantallacels {
    position: absolute;
    left: 76px;
    top: 33px;
    width: 194px;
    height: 438px;
    background-color: #333333;
    overflow: hidden;
    border-radius: 14px;
}

.capturest{
    width: 229px;
    height: 508px;
    background-color: #333333;
    overflow: hidden;
    position: relative;
}

.areapcdesck{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.areacelular{
  position: relative;
  display: none;
  justify-content: center;
  align-items: center;
}

.container-fluid {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: 0px !important;
  padding-left: 0px !important;
  margin-right: auto;
  margin-left: auto;
}

body,a{
  cursor: url(../img/arrow.png), pointer;  
  text-decoration: none !important;
}



.animacion{
  animation: moverdiv  2s;
}

@keyframes moverdiv{
  0% { transform: translate(-100%);}
  100%{ transform: translate(0%);  }
}



#seccion1{
  display: block;
  transition: .5s ease all;
  width: 100%;
}

#seccion2{
  display: none;
  transition: .5s ease all; 
  width: 100%;
  overflow-x: hidden;
}

#seccion3{
  display: none;
  transition: .5s ease all;
  width: 100%;
  height: 100vh;
  background-color: rgb(0, 34, 255);
}

#seccion4{
  display: none;
  transition: .5s ease all; 
  width: 100%;
  height: 100vh;
  background-color: rgb(255, 204, 0);
}

#seccion5{
  display: none;
  transition: .5s ease all; 
  width: 100%;
  height: 100vh;
  background-color: rgb(7, 123, 3);
}

/*area header*/
#header{
  position: fixed;
  top:30px;
  left: 30%;
  width: 40%;
  height: 60px;
  border-radius: 30px;  
  z-index: 20000;
  overflow: hidden;  
}

.headerint{
  width: 100%;
  height: 60px;  
  position: relative;
}

.headerburd{
  width: 100%;
  height: 60px;
  position: absolute;  
  top: 0px;
  left: 0px;
  /* From https://css.glass */
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

#headerwhite{
  width: 100%;
  height: 60px;
  position: absolute;
  background-color: rgba(230, 230, 230, 0.8);
}


#logon{
   margin-top: 5px;
   width: 50px;
   cursor: url(../img/manos.png), pointer;  
   display: block; 
}

#logow{
  margin-top: 5px;
  width: 50px;
  cursor: url(../img/manos.png), pointer;   
  display: none;
}

.areamenus{
  margin-top: 5px;
  width: 110px;
  height: 30px;
  display: flex;
  align-content: center;
  justify-content: center;
  cursor: url(../img/manos.png), pointer;
}

.areabuscar{
  margin-top: 5px;
  width: 110px;
  height: 30px;
  display: flex;
  align-content: center;
  justify-content: center;
  cursor: url(../img/manos.png), pointer;
}

#abrir{
  font-family: 'DIN Pro';
  font-weight: 500;
  font-size: 20px;
  width: 100%;
  display: block;
}

#cerrar{
  font-family: 'DIN Pro';
  font-weight: 500;
  font-size: 20px;
  width: 100%;
  display: none;
}

#lineaizq{
  border-left: solid 1px #fa4f00;
}

#lineader{
  border-right: solid 1px #fa4f00;
}

#buscar{
  font-family: 'DIN Pro';
  font-weight: 500;
  font-size: 20px;
  width: 100%;
  display: block;
}

/*Area mensu*/
#menu{
  position: fixed;
  top:60px;
  left: 30%;
  width: 40%;
  height: 400px;
  border-top-left-radius: 0px; 
  border-top-right-radius: 0px; 
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  z-index: 2000;
  overflow: hidden;  
  background-color: #fa4f00;
  padding-top: 70px;
  display: none;
  align-content: center;
  justify-content: center;
  animation: abrirmenu  2s;
}

@keyframes abrirmenu{
  0% { height: 0px; padding-top: 0px; }
  50% { height: 420px; padding-top: 70px; }
  100%{ height: 400px; padding-top: 70px; }
}

.menuinter{
  width: 60%;
}

.btnlink{
  width: 100%;
  height: 60px;
  background-color: transparent;
  border: none;
  position: relative;
	display: inline-flex;
  text-transform: uppercase;
  transition: .5s ease all;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

.btnlink span {
  width: 100%;
  height: 60px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 60px;
  color: #fff;
  cursor: url(../img/manos.png), pointer;
}

.btnlink.efecto::after {
	content: "";
	width: 100%;
	height: 60px;
  background-color: transparent;
  border-bottom: solid 2px #fff;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: -110%;
	transition: .5s ease-in-out all;
  cursor: url(../img/manos.png), pointer;
}
.btnlink.efecto:hover::after {
	left: 0%;
}

/*Style de buscador*/
#serch{
  position: fixed;
  top:3%;
  left: 30%;
  width: 40%;
  height: 80px;
  border-radius: 15px;  
  z-index: 200000;
  background-color: rgba(0, 0, 0, 0.8);
  overflow: hidden;  
  /* From https://css.glass */
  border-radius: 50px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: none;  
  cursor: url(../img/manos.png), pointer;
  animation: abrirserch  2s;
}

@keyframes abrirserch{
  0% { opacity: 0; }
  100%{ opacity: 1;}
}

.form-controlserch {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 2.76rem !important;
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent !important;
  background-clip: padding-box;
  border: none !important;
  border-radius: 15px;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  font-family: 'Oswald', sans-serif !important;
  cursor: url(../img/manos.png), pointer;
}

.form-controlserch::placeholder{
  color:rgba(255, 255, 255, 0.5) !important;
}

#btnserch {
    height: 80px;
    width: 80px;
    padding-right: 15px;
    border: none;
    background-color: transparent;
    cursor: url(../img/manos.png), pointer;
}

.iconserchwhite{
  width: 40%;
  opacity: .5;
}

/*Area del slider*/

.banner{
  width: 100%;
  height: 100vh;
  background-color: #f2f2f2;
  background-size: 100%;
  background-position: center center;
  position: relative;
}

/*Area del trabajos*/
.banner-marlon{
 position: relative;
 width: 100%;
 padding-bottom: 217px;
}

.seccion-texto{
  width: 100%;
}

.divimg{
  width: 100%;
  position: absolute;
  left: 0px;
  bottom: 0px;
}

.computer{
  width: 60%;
}

.texto-job{
  font-size: 25px;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  text-align: justify;
  padding-top: 70px;
  padding-bottom: 100px;
}

.texto-job2{
  font-size: 25px;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  text-align: center;
  padding-top: 70px;
  padding-bottom: 50px;
  color: #fff;
}


.texto-job-n{
  font-size: 25px;
  font-family: 'Oswald', sans-serif;
  font-weight: 900;
}

.texto-job3{
  font-size: 25px;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  text-align: center;
  padding-top: 70px;
  padding-bottom: 50px;
  color: #000;
}


.texto-job-n2{
  font-size: 25px;
  font-family: 'Oswald', sans-serif;
  font-weight: 900;
}

.linea{
  width: 2px;
  height: 220px;
  background-color: #000;
  margin-top: 60px;
  margin-bottom: 60px;
}

.divtwo{
  width: 100%;
  height: 800px;
  position: relative;
  background-image: url(../../trabajos/assets/img/recursos-marlon/Corporeo-logo.png);
  background-size: cover;
  background-position: center center;
}

.divtwos{
  width: 100%;
  height: 800px;
  position: relative;
  background-image: url(../../trabajos/assets/img/recursos-marlon/Corporeo-logo.png);
  background-size: cover;
  background-position: center center;
}

.divtwofreezing {
    width: 100%;
    height:1200px;
    position: relative;
    background-image: url(../../trabajos/assets/img/Recursos-freezing/Pantallas.jpg);
    background-size: cover;
    background-position: center center;
}

.divparrafo{
  width: 100%;
  position: absolute;
  left: 0px;
  bottom: 40px;
}

.divthree{
  width: 90%;
  margin-left: 5%;
  padding-top: 70px;
  padding-bottom: 70px;
}

.divfour{
  width: 100%;
  padding-bottom: 400px;
  position: relative;
}

.divfive{
  width: 100%;
  position: relative;
}

.imgredes{
  width: 100%;
  position: absolute;
  left: 0px;
  bottom: 0px;
}

.pc{
  width: 1000px;
  height: 550px;
  border: solid 5px #000;
  border-radius: 5px;
  margin-top: 40px;
  position: relative;
  overflow: hidden;
  display: block;
}

.areacam{
  width: 25%;
  height: 15px;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #000;
  position: relative;
}

.lineacam{
  width: 100%;
  height: 6px;
  margin-top: 2px;
  border-radius: 20px;
  background-color: #008cff;
}

.circle{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #008cff;
  margin-top: 1px;
}

.areapc{
  width: 100%;
  position: absolute;
  top:0px;
  left: 0px;
}




.capa{
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color:transparent;
  z-index: 2000;
}



.areaimag{
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-content: center;
  justify-content: center;
}

.areaparrafo{
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.areapalabra{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
  overflow: hidden;
  animation: textoa  .5s;
}

@keyframes textoa{
  0% { width: 0%; height: 0vh; top:50%;left:50%}
  100%{ width: 100%; height: 100vh; top:0%; left: 0%;}
}
/*Texto statico 1*/
.texto-statico{
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  font-weight: 700;
  text-align: center;
  color: #000;
  text-transform: uppercase;
  animation: textost  .5s;
}

@keyframes textost{
  0% { font-size: 0px;}
  100%{ font-size: 100px;}
}

/*Palabra movil 1*/

.areatexto{
  width: 420px;
  height: 105px;
  position: relative;
  padding-left: 10px;
  padding-top: 10px;
  overflow: hidden;
}

.texto-movil{
  position: absolute;
  top: 120px;
  left: 0px;
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  font-weight: 600;
  text-align: center;
  color: #fa4f00;
  text-transform: uppercase;
  line-height: 100px;
  animation: textomov ease-in-out  2s;
}

@keyframes textomov{
  0% { top: 120px;}
  50% { top: 0px;}
  80%{ top: 0px;}
  100%{ top: 120px;}
}

.lineamovil{
  width: 420px;
  height: 4px;
  background-color: #fa4f00;
  position: absolute;
  left: -425px;
  bottom: 0px;
  animation: linemov 1.5s ease-in-out;
}

@keyframes linemov{
  0% { left: -425px;}
  50% { left: -425px;}
  100%{ left: 0px;}
  
}

/*Palabra movil 2*/

.areatexto2 {
  width: 570px;
  height: 105px;
  position: relative;
  padding-left: 10px;
  padding-top: 10px;
  overflow-y: hidden;
}

.lineamovil2{
  width: 570px;
  height: 4px;
  background-color: #fa4f00;
  position: absolute;
  left: -570px;
  bottom: 0%;
  animation: linemov2 1.5s ease-in-out;
}

@keyframes linemov2{
  0% { left: -570px;}
  50% { left: -570px;}
  100% { left: 0px;}
}

/*Palabra movil 3*/

.areatexto3 {
  width: 540px;
  height: 105px;
  position: relative;
  padding-left: 10px;
  padding-top: 10px;
  overflow-y: hidden;
}

.lineamovil3{
  width: 540px;
  height: 4px;
  background-color: #fa4f00;
  position: absolute;
  left: -540px;
  bottom: 0%;
  animation: linemov3  1.5s ease-in-out;
}

@keyframes linemov3{
  0% { left: -540px;}
  50% { left: -540px;}
  100% { left: 0px;}
}

/*Palabra movil 4*/

.areatexto4 {
  width: 415px;
  height: 105px;
  position: relative;
  padding-left: 10px;
  padding-top: 10px;
  overflow-y: hidden;
}

.lineamovil4{
  width: 415px;
  height: 4px;
  background-color: #fa4f00;
  position: absolute;
  left: -415px;
  bottom: 0%;
  animation: linemov4 1.5s ease-in-out;
}

@keyframes linemov4{
  0% { left: -415px;}
  50% { left: -415px;}
  100% { left: 0px;}
}


/*Palabra estaticas 2*/

.areapalabra2{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
  overflow: hidden;
}


.texto-statico2{
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  font-weight: 700;
  text-align: center;
  color: #000;
  text-transform: uppercase;
}



.img100{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100vh;
  animation: transicionimg ease-in  .5s;
  object-fit: cover;
}

@keyframes transicionimg{
  0% { width: 0%; height: 0vh; top:50%;left:50%}
  100%{ width: 100%; height: 100vh; top:0%; left: 0%;}
}

.reel{
  width: 100%;
  background-color: #fff;
  display: flex;
  align-content: center;
  justify-content: center;
}

.areavideo{
  position: relative;
  width: 1536px; 
  height: 864px; 
  margin-top: 100px; 
}

.video{
  width: 1536px; 
  height: 864px; 
}

#play{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1536px; 
  height: 864px; 
  border:none;
  background-color: transparent;
  cursor: url('../img/play.png'), pointer;
  display: block;
}

#pausa{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1536px; 
  height: 864px; 
  border:none;
  background-color: transparent;
  cursor: url('../img/pausa.png'), pointer;
  display: none;
}

#seccionjob{
  width: 100%;
  height: 375px;
  margin-bottom: 100px;
  margin-top: 70px;
  overflow-x: hidden;
}

#seccionreel{
  width: 100%;
  height: 100px;
  margin-top: 20px;
  margin-bottom: 50px;
}

#job{
  width: 100%;
  display: flex;
  flex-direction: column;
  /*justify-content: flex-start;*/
  align-items: center;
  position: relative;
  transition: .2s ease-in-out all;
}

#margen,#margen1,#margen2,#margen3,#margen4,#margen5,#margen6,#margen7,#margen8,#margen9{
  width: 100%;
  height: 20px;
}


/*Opcion Produccion*/

#btnjob{
  width: 80%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 80px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob:hover{
  width: 80%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 80px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob:focus{
  width: 100%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 0px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
  animation: btnprod  ease .4s;
}

@keyframes btnprod{
  0% { width: 80%; border-radius: 80px;}
  100% { width: 100%;  border-radius: 0px;}
}

#btnjob.efect::after {
	content: "";
	width: 0%;
	height: 140px;
  background-color: #fa4f00;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 50%;
	transition: .4s ease-in-out all;
  cursor: url(../img/manos.png), pointer;
}
#btnjob.efect:hover::after {
	width: 100%;
  height: 140px;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#btnjob.efect:focus::after {
	width: 100%;
  height: 140px;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer; 
}

#txtspan {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 140px;
  z-index: 2;
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  font-weight: 600;
  line-height: 140px;
  color: #f76200;
  cursor: url(../img/manos.png), pointer;
  transition: .6s ease all;
  display: block;
  text-transform: uppercase;
}

#txtspan:hover {
  color:#fff;
  transition: .6s ease all;
}

#txtspanx {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 140px;
  z-index: 2;
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  font-weight: 600;
  line-height: 140px;
  color: #fff;
  cursor: url(../img/manos.png), pointer;
  transition: .6s ease all;
  display: none;
  text-transform: uppercase;
}


#produccion{ 
  width: 100%;
  height: 0px;
  background-color: #fa4f00;
  z-index: 2010;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center; 
  margin-top: 0px;
  position: relative;
  animation: product .5s ease-in-out;
  overflow: visible;
}

@keyframes product{
  0% { height: 0px; overflow: hidden;}
  20% { height: 0px; overflow: hidden;}
  99% { height: 750px; overflow: hidden;}
  100% { height: 750px; overflow: visible;}
}

#regresar{
  font-size: 150px;
  line-height: 150px;
  color: #fff;
  position: absolute;
  top:-160px;
  left: 56px;
  z-index: 2000;
  cursor: url(../img/manos.png), pointer;
  display: none;
}


/*Area Retail*/
#btnjob1{
  width: 80%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 80px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob1:hover{
  width: 80%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 80px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob1:focus{
  width: 100%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 0px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
  animation: btnprod1  ease-in-out .4s;
}

@keyframes btnprod1{
  0% { width: 80%; border-radius: 80px;}
  100% { width: 100%;  border-radius: 0px;}
}

#btnjob1.efect1::after {
	content: "";
	width: 0%;
	height: 140px;
  background-color: #fa4f00;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 50%;
	transition: .5s ease-in-out all;
  cursor: url(../img/manos.png), pointer;
}
#btnjob1.efect1:hover::after {
	width: 100%;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#btnjob1.efect1:focus::after {
	width: 100%;
  height: 140px;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#txtspan1 {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 140px;
  z-index: 2;
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  font-weight: 600;
  line-height: 140px;
  color: #fa4f00;
  cursor: url(../img/manos.png), pointer;
  transition: .6s ease all;
  display: block;
  text-transform: uppercase;
}

#txtspan1:hover {
  color:#fff;
  transition: .6s ease all;
}

#txtspan1x {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 140px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size:100px;
  font-weight: 600;
  line-height: 140px;
  color: #fff;
  cursor: url(../img/manos.png), pointer;
  transition: .6s ease all;
  display: none;
  text-transform: uppercase;
}

#retail{
  width: 100%;
  height: 0px;
  background-color: #fa4f00;
  z-index: 2009;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;  
  animation: retails  ease-in-out .5s;
  overflow: visible;
  position: relative;
}

@keyframes retails{
  0% { height: 0px; overflow: hidden;}
  20% { height: 0px; overflow: hidden;}
  99% { height: 900px; overflow: hidden;}
  100% { height: 900px; overflow: visible;}
}


#regresar1{
  font-size: 150px;
  line-height: 150px;
  color: #fff;
  position: absolute;
  top:-160px;
  left: 56px;
  z-index: 2000;
  cursor: url(../img/manos.png), pointer;
  display: none;
}



/*Consumo Masivo*/
#btnjob2{
  width: 80%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 80px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob2:hover{
  width: 80%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 80px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob2:focus{
  width: 100%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 0px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
  animation: btnprod2  ease-in-out .4s;
}

@keyframes btnprod2{
  0% { width: 80%; border-radius: 80px;}
  100% { width: 100%;  border-radius: 0px;}
}

#btnjob2.efect2::after {
	content: "";
	width: 0%;
	height: 140px;
  background-color: #fa4f00;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 50%;
	transition: .5s ease-in-out all;
  cursor: url(../img/manos.png), pointer;
}
#btnjob2.efect2:hover::after {
	width: 100%;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#btnjob2.efect2:focus::after {
	width: 100%;
  height: 140px;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#txtspan2 {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 140px;
  z-index: 2;
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  font-weight: 600;
  line-height: 140px;
  color: #fa4f00;
  cursor: url(../img/manos.png), pointer;
  transition: .6s ease all;
  display: block;
  text-transform: uppercase;
}

#txtspan2:hover {
  color:#fff;
  transition: .6s ease all;
}

#txtspan2x {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 140px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  font-weight: 600;
  line-height: 140px;
  color: #fff;
  cursor: url(../img/manos.png), pointer;
  transition: .6s ease all;
  display: none;
  text-transform: uppercase;
}

#consumo-masivo{
  width: 100%;
  height: 0px;
  background-color: #fa4f00;
  z-index: 2009;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;  
  animation: consumom  ease-in-out .8s;
  overflow: visible;
  position: relative;
}

@keyframes consumom{
  0% { height: 0px; overflow: hidden;}
  20% { height: 0px; overflow: hidden;}
  99% { height: 550px; overflow: hidden;}
  100% { height: 550px; overflow: visible;}
}

#regresar2{
  font-size: 150px;
  line-height: 150px;
  color: #fff;
  position: absolute;
  top:-160px;
  left: 57px;
  z-index: 2000;
  cursor: url(../img/manos.png), pointer;
}


/*Cultura y educacion*/
#btnjob3{
  width: 80%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 80px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob3:hover{
  width: 80%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 80px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob3:focus{
  width: 100%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 0px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
  animation: btnprod3  ease-in-out .4s;
}

@keyframes btnprod3{
  0% { width: 60%; border-radius: 80px;}
  100% { width: 100%;  border-radius: 0px;}
}

#btnjob3.efect3::after {
	content: "";
	width: 0%;
	height: 140px;
  background-color: #fa4f00;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 50%;
	transition: .5s ease-in-out all;
  cursor: url(../img/manos.png), pointer;
}
#btnjob3.efect3:hover::after {
	width: 100%;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#btnjob3.efect3:focus::after {
	width: 100%;
  height: 140px;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#txtspan3 {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 140px;
  z-index: 2;
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  font-weight: 600;
  line-height: 140px;
  color: #fa4f00;
  cursor: url(../img/manos.png), pointer;
  transition: .6s ease all;
  display: block;
  text-transform: uppercase;
}

#txtspan3:hover {
  color:#fff;
  transition: .6s ease all;
}

#txtspan3x {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 140px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  font-weight: 600;
  line-height: 140px;
  color: #fff;
  cursor: url(../img/manos.png), pointer;
  transition: .6s ease all;
  display: none;
  text-transform: uppercase;
}

#cultura-y-educacion{
  width: 100%;
  height: 0px;
  background-color: #fa4f00;
  z-index: 2009;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;  
  animation: cultura  ease-in-out .8s;
  overflow: visible;
  position: relative;
}

@keyframes cultura{
  0% { height: 0px; overflow: hidden;}
  20% { height: 0px; overflow: hidden;}
  99% { height: 450px; overflow: hidden;}
  100% { height: 450px; overflow: visible;}
}

#regresar3{
  font-size: 150px;
  line-height: 150px;
  color: #fff;
  position: absolute;
  top:-160px;
  left: 56px;
  z-index: 2000;
  cursor: url(../img/manos.png), pointer;
}


/*Comida y Bebida*/

#btnjob4{
  width: 80%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 80px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob4:hover{
  width: 80%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 80px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob4:focus{
  width: 100%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 0px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
  animation: btnprod4  ease-in-out .4s;
}

@keyframes btnprod4{
  0% { width: 80%; border-radius: 80px;}
  100% { width: 100%;  border-radius: 0px;}
}

#btnjob4.efect4::after {
	content: "";
	width: 0%;
	height: 140px;
  background-color: #fa4f00;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 50%;
	transition: .5s ease-in-out all;
  cursor: url(../img/manos.png), pointer;
}
#btnjob4.efect4:hover::after {
	width: 100%;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#btnjob4.efect4:focus::after {
	width: 100%;
  height: 140px;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#txtspan4 {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 140px;
  z-index: 2;
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  font-weight: 600;
  line-height: 140px;
  color: #fa4f00;
  cursor: url(../img/manos.png), pointer;
  transition: .6s ease all;
  display: block;
  text-transform: uppercase;
}

#txtspan4:hover { 
  color: #fff;
  transition: .6s ease all;
}

#txtspan4x {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 140px;
  z-index: 2;
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  font-weight: 600;
  line-height: 140px;
  color: #fff;
  cursor: url(../img/manos.png), pointer;
  transition: .6s ease all;
  display: none;
  text-transform: uppercase;
}

#comida-y-bebida{
  width: 100%;
  height: 0px;
  background-color: #fa4f00;
  z-index: 2000;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  animation: comida  ease-in-out .8s;
  overflow: visible;
  position: relative;
}

@keyframes comida{
  0% { height: 0px; overflow: hidden;}
  20% { height: 0px; overflow: hidden;}
  99% { height: 600px; overflow: hidden;}
  100% { height: 600px; overflow: visible;}
}

#regresar4{
  font-size: 150px;
  line-height: 150px;
  color: #fff;
  position: absolute;
  top:-160px;
  left: 56px;
  z-index: 2000;
  cursor: url(../img/manos.png), pointer;
}

/*Salud*/

#btnjob5{
  width: 80%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 80px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob5:hover{
  width: 80%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 80px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob5:focus{
  width: 100%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 0px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
  animation: btnprod5  ease-in-out .4s;
}

@keyframes btnprod{
  0% { width: 80%; border-radius: 80px;}
  100% { width: 100%;  border-radius: 0px;}
}

#btnjob5.efect5::after {
	content: "";
	width: 0%;
	height: 140px;
  background-color: #fa4f00;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 50%;
	transition: .5s ease-in-out all;
  cursor: url(../img/manos.png), pointer;
}
#btnjob5.efect5:hover::after {
	width: 100%;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#btnjob5.efect5:focus::after {
	width: 100%;
  height: 140px;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#txtspan5 {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 140px;
  z-index: 2;
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  font-weight: 600;
  line-height: 140px;
  color: #fa4f00;
  cursor: url(../img/manos.png), pointer;
  transition: .6s ease all;
  display: block;
  text-transform: uppercase;
}

#txtspan5:hover {  
  color: #fff;  
  transition: .6s ease all;
}

#txtspan5x {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 140px;
  z-index: 2;
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  font-weight: 600;
  line-height: 140px;
  color: #fff;
  cursor: url(../img/manos.png), pointer;
  transition: .6s ease all;
  display: none;
  text-transform: uppercase;
}

#salud{  
  width: 100%;
  height: 0px;
  background-color: #fa4f00;
  z-index: 2000;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  animation: saluds  ease-in-out .8s;
  overflow: visible;
  position: relative;
}

@keyframes saluds{
  0% { height: 0px; overflow: hidden;}
  20% { height: 0px; overflow: hidden;}
  99% { height: 600px; overflow: hidden;}
  100% { height: 600px; overflow: visible;}
}



#regresar5{
  font-size: 150px;
  line-height: 150px;
  color: #fff;
  position: absolute;
  top:-160px;
  left: 56px;
  z-index: 2000;
  cursor: url(../img/manos.png), pointer;
}

/*Entretenimiento*/

#btnjob6{
  width: 80%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 80px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob6:hover{
  width: 80%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 80px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob6:focus{
  width: 100%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 0px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
  animation: btnprod6  ease-in-out .4s;
}

@keyframes btnprod6{
  0% { width: 80%; border-radius: 80px;}
  100% { width: 100%;  border-radius: 0px;}
}

#btnjob6.efect6::after {
	content: "";
	width: 0%;
	height: 140px;
  background-color: #fa4f00;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 50%;
	transition: .5s ease-in-out all;
  cursor: url(../img/manos.png), pointer;
}
#btnjob6.efect6:hover::after {
	width: 100%;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#btnjob6.efect6:focus::after {
	width: 100%;
  height: 140px;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#txtspan6 {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 140px;
  z-index: 2;
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  font-weight: 600;
  line-height: 140px;
  color: #fa4f00;
  cursor: url(../img/manos.png), pointer;
  transition: .6s ease all;
  display: block;
  text-transform: uppercase;
}

#txtspan6:hover { 
  color: #fff;
  transition: .6s ease all;
}

#txtspan6x {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 140px;
  z-index: 2;
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  font-weight: 600;
  line-height: 140px;
  color: #fff;
  cursor: url(../img/manos.png), pointer;
  transition: .6s ease all;
  display: none;
  text-transform: uppercase;
}

#entretenimiento{
  width: 100%;
  height: 0px;
  background-color: #fa4f00;
  z-index: 2000;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  animation: entretenimientos  ease-in-out .8s;
  overflow: visible;
  position: relative;
}

@keyframes entretenimientos{
  0% { height: 0px; overflow: hidden;}
  20% { height: 0px; overflow: hidden;}
  99% { height: 350px; overflow: hidden;}
  100% { height: 350px; overflow: visible;}
}

#regresar6{
  font-size: 150px;
  line-height: 150px;
  color: #fff;
  position: absolute;
  top:-160px;
  left: 56px;
  z-index: 2000;
  cursor: url(../img/manos.png), pointer;
}

/*Sin fines de lucho*/

#btnjob7{
  width: 80%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 80px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob7:hover{
  width: 80%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 80px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob7:focus{
  width: 100%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 0px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
  animation: btnprod7  ease-in-out .4s;
}

@keyframes btnprod7{
  0% { width: 80%; border-radius: 80px;}
  100% { width: 100%;  border-radius: 0px;}
}

#btnjob7.efect7::after {
	content: "";
	width: 0%;
	height: 140px;
  background-color: #fa4f00;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 50%;
	transition: .5s ease-in-out all;
  cursor: url(../img/manos.png), pointer;
}
#btnjob7.efect7:hover::after {
	width: 100%;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#btnjob7.efect7:focus::after {
	width: 100%;
  height: 140px;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#txtspan7 {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 140px;
  z-index: 2;
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  font-weight: 600;
  line-height: 140px;
  color: #fa4f00;
  cursor: url(../img/manos.png), pointer;
  transition: .6s ease all;
  display: block;
  text-transform: uppercase;
}

#txtspan7:hover {
  color: #fff;
  transition: .6s ease all;
}

#txtspan7x {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 140px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  font-weight: 600;
  line-height: 140px;
  color: #fff;
  cursor: url(../img/manos.png), pointer;
  transition: .6s ease all;
  display: none;
  text-transform: uppercase;
}

#sin-fines-de-lucro{
  width: 100%;
  height: 0px;
  background-color: #fa4f00;
  z-index: 2000;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  animation: fines  ease-in-out .8s;
  overflow: visible;
  position: relative;
}

@keyframes fines{
  0% { height: 0px; overflow: hidden;}
  20% { height: 0px; overflow: hidden;}
  99% { height: 350px; overflow: hidden;}
  100% { height: 350px; overflow: visible;}
}

#regresar7{
  font-size: 150px;
  line-height: 150px;
  color: #fff;
  position: absolute;
  top:-160px;
  left: 56px;
  z-index: 2000;
  cursor: url(../img/manos.png), pointer;
}

/*tecnologia*/

#btnjob8{
  width: 80%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 80px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob8:hover{
  width: 80%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 80px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob8:focus{
  width: 100%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 0px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
  animation: btnprod8  ease-in-out .4s;
}

@keyframes btnprod8{
  0% { width: 80%; border-radius: 80px;}
  100% { width: 100%;  border-radius: 0px;}
}

#btnjob8.efect8::after {
	content: "";
	width: 0%;
	height: 140px;
  background-color: #fa4f00;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 50%;
	transition: .5s ease-in-out all;
  cursor: url(../img/manos.png), pointer;
}
#btnjob8.efect8:hover::after {
	width: 100%;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#btnjob8.efect8:focus::after {
	width: 100%;
  height: 140px;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#txtspan8 {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 140px;
  z-index: 2;
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  font-weight: 600;
  line-height: 140px;
  color: #fa4f00;
  cursor: url(../img/manos.png), pointer;
  transition: .6s ease all;
  display: block;
  text-transform: uppercase;
}

#txtspan8:hover {
  color: #fff;
  transition: .6s ease all;
}

#txtspan8x {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 140px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  font-weight: 600;
  line-height: 140px;
  color: #fff;
  cursor: url(../img/manos.png), pointer;
  transition: .6s ease all;
  display: none;
  text-transform: uppercase;
}

#tecnologia{
  width: 100%;
  height: 0px;
  background-color: #fa4f00;
  z-index: 2000;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  animation: tecno  ease-in-out .8s;
  overflow: visible;
  position: relative;
}

@keyframes tecno{
  0% { height: 0px; overflow: hidden;}
  20% { height: 0px; overflow: hidden;}
  99% { height: 550px; overflow: hidden;}
  100% { height: 550px; overflow: visible;}
}

#regresar8{
  font-size: 150px;
  line-height: 150px;
  color: #fff;
  position: absolute;
  top:-160px;
  left: 57px;
  z-index: 2000;
  cursor: url(../img/manos.png), pointer;
}

/*Viajes*/

#btnjob9{
  width: 80%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 80px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob9:hover{
  width: 80%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 80px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer; 
}

#btnjob9:focus{
  width: 100%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 80px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
  animation: btnprod9  ease-in-out .4s;
}

@keyframes btnprod9{
  0% { width: 80%; border-radius: 80px;}
  100% { width: 100%;  border-radius: 0px;}
}

#btnjob9.efect9::after {
	content: "";
	width: 0%;
	height: 140px;
  background-color: #fa4f00;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 50%;
	transition: .5s ease-in-out all;
  cursor: url(../img/manos.png), pointer;
}
#btnjob9.efect9:hover::after {
	width: 100%;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#btnjob9.efect9:focus::after {
	width: 100%;
  height: 140px;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#txtspan9 {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 140px;
  z-index: 2;
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  font-weight: 600;
  line-height: 140px;
  color: #fa4f00;
  cursor: url(../img/manos.png), pointer;
  transition: .6s ease all;
  display: block;
  text-transform: uppercase;
}

#txtspan9:hover {
  color: #fff;
  transition: .6s ease all;
}

#txtspan9x {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 140px;
  z-index: 2;
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  font-weight: 600;
  line-height: 140px;
  color: #fff;
  cursor: url(../img/manos.png), pointer;
  transition: .6s ease all;
  display: none;
  text-transform: uppercase;
}

#viajes{
  width: 100%;
  height: 0px;
  background-color: #fa4f00;
  z-index: 2000;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  animation: travel  ease-in-out .8s;
  overflow: visible;
  position: relative;
}

@keyframes travel{
  0% { height: 0px; overflow: hidden;}
  20% { height: 0px; overflow: hidden;}
  99% { height: 450px; overflow: hidden;}
  100% { height: 450px; overflow: visible;}
}

#regresar9{
  font-size: 150px;
  line-height: 150px;
  color: #fff;
  position: absolute;
  top:-160px;
  left: 56px;
  z-index: 2000;
  cursor: url(../img/manos.png), pointer;
}

/*Servicios*/

#btnjob10{
  width: 80%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 80px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob10:hover{
  width: 80%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 80px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer; 
}

#btnjob10:focus{
  width: 100%;
  height: 140px;
  background-color: transparent;
  border: none;
  border-radius: 0px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
  animation: btnprod10  ease-in-out .4s;
}

@keyframes btnprod10{
  0% { width: 80%; border-radius: 80px;}
  100% { width: 100%;  border-radius: 0px;}
}

#btnjob10.efect10::after {
	content: "";
	width: 0%;
	height: 140px;
  background-color: #fa4f00;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 50%;
	transition: .5s ease-in-out all;
  cursor: url(../img/manos.png), pointer;
}
#btnjob10.efect10:hover::after {
	width: 100%;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#btnjob10.efect10:focus::after {
	width: 100%;
  height: 140px;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#txtspan10 {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 140px;
  z-index: 2;
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  font-weight: 600;
  line-height: 140px;
  color: #fa4f00;
  cursor: url(../img/manos.png), pointer;
  transition: .6s ease all;
  display: block;
  text-transform: uppercase;
}

#txtspan10:hover {
  color: #fff;
  transition: .6s ease all;
}

#txtspan10x {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 140px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  font-weight: 600;
  line-height: 140px;
  color: #fff;
  cursor: url(../img/manos.png), pointer;
  transition: .6s ease all;
  display: none;
  text-transform: uppercase;
}

#servicios{
  width: 100%;
  height: 0px;
  background-color: #fa4f00;
  z-index: 2000;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  animation: services  ease-in-out .8s;
  overflow: visible;
  position: relative;
}

@keyframes services{
  0% { height: 0px; overflow: hidden;}
  20% { height: 0px; overflow: hidden;}
  99% { height: 950px; overflow: hidden;}
  100% { height: 950px; overflow: visible;}
}

#regresar10{
  font-size: 150px;
  line-height: 150px;
  color: #fff;
  position: absolute;
  top:-160px;
  left: 56px;
  z-index: 2000;
  cursor: url(../img/manos.png), pointer;
}

#spacio{
  height: 91px;
  width: 100%;
  display: block;
}

#footer{
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 40px;
  padding-bottom: 20px;
  background-color: rgba(0, 0, 0, 1);
}

#icono,#icono1,#icono2{
  width: 70%;
  display: block;
}

#iconoa,#iconoa1,#iconoa2{
  width: 70%;
  display: none;
}

#titulofooter{
  font-family: 'Oswald', sans-serif;
  font-size: 25px;
  font-weight: 600;
  color: #fff;
}

#textofooter{
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: #fff;
}

#linkfooter{
  font-family: 'Oswald', sans-serif;
  font-size: 19px;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
}

#linkf{
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  text-decoration: none;
}

.titulojob{
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 60px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  width: 100%;
  height: 90px;
  line-height: 86px;
  margin-bottom: 70px;
}

.seccionsub{
  width: 87%;
  padding-top: 80px;
}

.btnsub{
  width: 95%;
  height: 100px;
  border: none;
  border-top: solid 2px #fff;
  position: relative;
  margin-right: 5%;
  background-color: transparent;
  cursor: url(../img/manos.png), pointer;
}

.btnsub1{
  width: 95%;
  height: 100px;
  border: none;
  border-top: solid 2px #fff;
  position: relative;
  margin-left: 5%;
  background-color: transparent;
  cursor: url(../img/manos.png), pointer;
}

.textobynsub{
  position: absolute;
  top: 5px;
  left: 5px;
  font-family: 'Oswald', sans-serif;
  font-size: 30px;
  font-weight: 300;
  color: #fff;
  cursor: url(../img/manos.png), pointer;
}

.v{
  display: block;
}

#copyraight{
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  text-align: center;
}

.titulosh2{
  width: 100%;
  font-family: 'Oswald', sans-serif;
  font-size: 150px;
  font-weight: 900;
  color: #000;
  text-align: center;
}

.titulosh2bord{
  font-family: 'Oswald', sans-serif;
  font-size: 150px;
  font-weight: 900;
  text-align: center;
  color: transparent;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: black;
}

.marquee {
  height: 150px;
  display: flex;
  white-space: nowrap;
  color: #DDD;
  justify-content: flex-end;
  
  &[data-reversed="true"] {
    justify-content: flex-start;
  }
  
  span {
    display: block;
    padding: 0 1ch;
  }
}

.verpc{
  display: block;
}

.vercel{
  display: none;
}

.titulosh3{
  width: 100%;
  font-family: 'Oswald', sans-serif;
  font-size: 150px;
  font-weight: 900;
  color: #fff;
  text-align: center;
  margin-left: 40px;
  margin-right: 40px;
}

.titulosh3:hover{
  font-family: 'Oswald', sans-serif;
  font-size: 150px;
  font-weight: 900;
  text-align: center;
  color: transparent;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: white;
}

.areafooters{
  height: 200px !important;
  overflow: hidden;
}



/*Pantalla de 1440px*/
@media (max-width: 1440px) { 
  .banner{
    width: 100%;
    height: 810px;
    background-color: #f2f2f2;
    position: relative;
  }

  .capa{
    width: 100%;
    height: 810px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color:transparent;
    z-index: 2000;
  }

  .img100{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 810px;
    animation: transicionimg ease-in  .5s;
    object-fit: cover;
  }

  @keyframes transicionimg{
    0% { width: 0%; height: 0px; top:50%;left:50%}
    100%{ width: 100%; height: 810px; top:0%; left: 0%;}
  }

  .areaimag {
    position: relative;
    width: 100%;
    height: 810px;
    display: flex;
    align-content: center;
    justify-content: center;
  }

  .areapalabra{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 810px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    overflow: hidden;
    animation: textoa  .5s;
  }

  @keyframes textoa{
    0% { width: 0%; height: 0px; top:50%;left:50%}
    100%{ width: 100%; height: 810px; top:0%; left: 0%;}
  }
  
  .areapalabra2{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 810px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    overflow: hidden;
  }

 

  .areavideo{
    position: relative;
    width: 1152px; 
    height: 648px; 
    margin-top: 81px;
    margin-bottom: 81px;  
  }
  
  .video{
    width: 1152px; 
    height: 648px;  
  }
  
  #play{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1152px; 
    height: 648px;  
    border:none;
    background-color: transparent;
    cursor: url('../img/play.png'), pointer;
    display: block;
  }
  
  #pausa{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1152px; 
    height: 648px;  
    border:none;
    background-color: transparent;
    cursor: url('../img/pausa.png'), pointer;
    display: none;
  }

  #linkfooter {
    font-family: 'Oswald', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #fff;
    text-decoration: none;
  }

  .btnsub {
    width: 100%;
    height: 100px;
    border: none;
    border-top: solid 2px #fff;
    position: relative;
    margin-right: 0%;
    background-color: transparent;
    cursor: url(../img/manos.png), pointer;
  }
  .btnsub1 {
    width: 100%;
    height: 100px;
    border: none;
    border-top: solid 2px #fff;
    position: relative;
    margin-left: 0%;
    background-color: transparent;
    cursor: url(../img/manos.png), pointer;
  } 

  /*Texto statico 1*/
.texto-statico{
  font-family: 'Oswald', sans-serif;
  font-size: 90px;
  font-weight: 700;
  text-align: center;
  color: #000;
  text-transform: uppercase;
  animation: textost  .5s;
}

@keyframes textost{
  0% { font-size: 0px;}
  100%{ font-size: 90px;}
}

.texto-statico2{
  font-family: 'Oswald', sans-serif;
  font-size: 90px;
  font-weight: 700;
  text-align: center;
  color: #000;
  text-transform: uppercase;
}

#regresar,#regresar1,#regresar2,#regresar3,#regresar4,#regresar5,#regresar6,#regresar7,#regresar8,#regresar9,#regresar10 {
  font-size: 80px;
  line-height: 150px;
  color: #fff;
  position: absolute;
  top: -147px;
  left: 56px;
  z-index: 2000;
  cursor: url(../img/manos.png), pointer;
}

/*Area del trabajos*/
.banner-marlon{
 position: relative;
 width: 100%;
 padding-bottom: 140px;
}

.divtwofreezing {
    width: 100%;
    height: 970px;
    position: relative;
    background-image: url(../../trabajos/assets/img/Recursos-freezing/Pantallas.jpg);
    background-size: cover;
    background-position: center center;
}
}






/*Pantalla de 1024px*/
@media (max-width: 1024px) { 
  #header {
    position: fixed;
    top: 16px;
    left: 5%;
    width: 45%;
    height: 60px;
    border-radius: 30px;
    z-index: 20000;
    overflow: hidden;
  }

  .areavideo {
    position: relative;
    width: 1000px;
    height: 600px;
    margin-top: 81px;
    margin-bottom: 81px;
  }

  .video {
    width: 1000px;
    height: 600px;
  }  

}







/*Pantalla de 600px*/
@media (max-width: 600px) { 

.vw{
  display: none;
}

  .seccions {
      width: 100%;
      padding-top: 30%;
      padding-bottom: 5%;
  }

  .categoria {
    position: absolute;
    top: 30px;
    left: 20px;
    background-color: #fa6019;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    padding: 5px 20px;
    text-transform: uppercase;
    border-radius: 50px;
}

.artitle {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    padding: 30px 30px;
}

.imgico {
    width: 40px;
}

.tituloico {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 600;
    text-align: left;
    color: #fff;
}

.textoico {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    color: #fff;
    margin: 0px !important;
    line-height: 20px;
}

.textoservis {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
}

.espaciots{
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.areaimagen {
    width: 100%;
    height: 230px;
    position: relative;
    overflow: hidden;
}

.cuadrocard {
    width: 100%;
    height: 465px;
    overflow: hidden;
    border-radius: 36px;
    box-shadow: 2px 2px 15px rgba(222, 64, 0, 0.4);
    background-color: #fff;
    color: #fa6019;
}

.areatextoservis {
    width: 100%;
    height: 230px;
    display: flex;
    justify-content: center;
    align-items: center;
}

  .titulonaranjas {
      font-family: 'Oswald', sans-serif;
      font-size: 51px;
      font-weight: 900;
      text-align: center;
      color: #fa4f00;
  }

  .seccionp {
      width: 100%;
      padding-top: 25%;
      padding-bottom: 5%;
  }

  .areapcdesck{
    position: relative;
    display: none;
    justify-content: center;
    align-items: center;
  }

  

 .areacelular{
    width: 360px !important;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .divtwofreezing {
    width: 100%;
    height: 480px;
    position: relative;
    background-image: url(../../trabajos/assets/img/Recursos-freezing/Pantallas-movil.jpg);
    background-size: cover;
    background-position: center center;
  }

  #header {
    position: fixed;
    top: 16px;
    left: 5%;
    width: 90%;
    height: 50px;
    border-radius: 30px;
    z-index: 20000;
    overflow: hidden;
  }

  .headerint {
    width: 100%;
    height: 50px;
    position: relative;
  }

  #headerwhite {
    width: 100%;
    height: 50px;
    position: absolute;
    background-color: rgba(230, 230, 230, 0.8);
  }

  #logon {
    margin-top: 5px;
    width: 40px;
    cursor: url(../img/manos.png), pointer;
    display: block;
  }

  #logow {
    margin-top: 5px;
    width: 40px;
    cursor: url(../img/manos.png), pointer;
    display: none;
  }

  .celulares {
    width: 85%;
  }

  .banner-app {
    position: relative;
    width: 100%;
    padding-bottom: 290px;
  }

  .texto-jobgy {
    font-size: 16px;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    text-align: center;
    padding-top: 70px;
    padding-bottom: 100px;
  }

  .divgy {
    width: 100%;
    height: 345px;
    position: relative;
    background-image: url(../../trabajos/assets/img/recursos-guardiaya/Banner-logo-Telefono.jpg);
    background-size: cover;
    background-position: center center;
}

  .areabuscar {
    margin-top: 5px;
    width: 100px;
    height: 32px;
    display: flex;
    align-content: center;
    justify-content: center;
    cursor: url(../img/manos.png), pointer;
  }

  .areamenus {
    margin-top: 5px;
    width: 100px;
    height: 32px;
    display: flex;
    align-content: center;
    justify-content: center;
    cursor: url(../img/manos.png), pointer;
  }

  .banner{
    width: 100%;
    height: 100vh;
    background-color: #f2f2f2;
    position: relative;
  }

  .capa {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: transparent;
    z-index: 2000;
}

  .img100{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100vh;
    animation: transicionimg ease-in  .5s;
    object-fit: cover;
  }

  @keyframes transicionimg{
    0% { width: 0%; height: 0vh; top:50%;left:50%}
    100%{ width: 100%; height: 100vh; top:0%; left: 0%;}
  }

  .areaimag {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-content: center;
    justify-content: center;
  }

  .areapalabra{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    overflow: hidden;
    animation: textoa  .5s;
  }

  @keyframes textoa{
    0% { width: 0%; height: 0vh; top:50%;left:50%}
    100%{ width: 100%; height: 100vh; top:0%; left: 0%;}
  }


 
  .areapalabra2{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    overflow: hidden;
  }

  
  .areavideo{
    position: relative;
    width: 350px; 
    height: 197px;  
    margin-top: 40px;
    margin-bottom: 40px;  
  }
  
  .video{
    width: 350px; 
    height: 197px;   
  }
  
  #play{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 350px; 
    height: 197px;   
    border:none;
    background-color: transparent;
    cursor: url('../img/play.png'), pointer;
    display: block;
  }
  
  #pausa{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 350px; 
    height: 197px;  
    border:none;
    background-color: transparent;
    cursor: url('../img/pausa.png'), pointer;
    display: none;
  }

  #seccionjob {
    width: 100%;
    height: 150px;
    margin-bottom: 40px;
    margin-top: 10px;
    overflow-x: hidden;
  }

  .titulosh2 {
    font-family: 'Oswald', sans-serif;
    font-size: 50px;
    font-weight: 900;
    color: #000;
    text-align: center;
  }

  .titulosh2bord{
    font-family: 'Oswald', sans-serif;
    font-size: 50px;
    font-weight: 900;
    text-align: center;
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
  }

  .marquee {
    height: 70px;
    display: flex;
    white-space: nowrap;
    color: #DDD;
    justify-content: flex-end;
    
    &[data-reversed="true"] {
      justify-content: flex-start;
    }
    
    span {
      display: block;
      padding: 0 1ch;
    }
  }



  .titulosh3 {
    font-family: 'Oswald', sans-serif;
    font-size: 50px;
    font-weight: 900;
    color: #fff;
    text-align: center;
    margin-left: 20px;
    margin-right: 20px;
  }

  .titulosh3:hover{
    font-family: 'Oswald', sans-serif;
    font-size: 50px;
    font-weight: 900;
    text-align: center;
    color: transparent;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: white;
  }

  .areafooters{
  height: 72px !important;
  overflow: hidden;
}


  /*Opcion Produccion*/

#btnjob{
  width: 90%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 15px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob:hover{
  width: 90%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 15px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob:focus{
  width: 100%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 0px;
  position: relative;
	display: inline-flex;
  overflow: visible;
  cursor: url(../img/manos.png), pointer;
  animation: btnprod  ease .4s;
}

@keyframes btnprod{
  0% { width: 90%; border-radius: 15px;}
  100% { width: 100%;  border-radius: 0px;}
}

#btnjob.efect::after {
	content: "";
	width: 0%;
	height: 70px;
  background-color: #fa4f00;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 50%;
	transition: .5s ease-in-out all;
  cursor: url(../img/manos.png), pointer;
}
#btnjob.efect:hover::after {
	width: 100%;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#btnjob.efect:focus::after {
	width: 100%;
  height: 70px;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer; 
}

#txtspan {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 70px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 35px;
  font-weight: 600;
  line-height: 60px;
  color: #fa4f00;
  cursor: url(../img/manos.png), pointer;
  transition: .5s ease-in all;
  display: block;
  background-color:#fff;
}

#txtspan:hover {
  color:#fff;
  transition: .5s ease-in all;
}

#txtspanx {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 70px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 35px;
  font-weight: 600;
  line-height: 60px;
  color: #fff;
  cursor: url(../img/manos.png), pointer;
  transition: .5s ease-in all;
  display: none;
}


#produccion{ 
  width: 100%;
  height: 0px;
  background-color: #fa4f00;
  z-index: 2010;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center; 
  margin-top: 0px;
  position: relative;
  animation: product  ease-in-out .5s;
  overflow: visible;
}

@keyframes product{
  0% { height: 0px; overflow: hidden;}
  20% { height: 0px; overflow: hidden;}
  99% { height: 800px; overflow: hidden;}
  100% { height: 800px; overflow: visible;}
}

#regresar {
  width: 80px;
  height: 40px;
  font-size: 30px;
  line-height: 60px;
  color: #fff;
  position: absolute;
  top: -66px;
  left: 10px;
  z-index: 2000;
  cursor: url(../img/manos.png), pointer;
  display: none;
}


/*Area Retail*/
#btnjob1{
  width: 90%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 15px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob1:hover{
  width: 90%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 15px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob1:focus{
  width: 100%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 0px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
  animation: btnprod1  ease-in-out .4s;
}

@keyframes btnprod1{
  0% { width: 90%; border-radius: 15px;}
  100% { width: 100%;  border-radius: 0px;}
}

#btnjob1.efect1::after {
	content: "";
	width: 0%;
	height: 70px;
  background-color: #fa4f00;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 50%;
	transition: .5s ease-in-out all;
  cursor: url(../img/manos.png), pointer;
}
#btnjob1.efect1:hover::after {
	width: 100%;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#btnjob1.efect1:focus::after {
	width: 100%;
  height: 70px;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#txtspan1 {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 70px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 35px;
  font-weight: 600;
  line-height: 60px;
  color: #fa4f00;
  cursor: url(../img/manos.png), pointer;
  transition: .5s ease-in all;
  background-color:#fff;
}

#txtspan1:hover {
  color:#fff;
  transition: .5s ease-in all;
}

#txtspan1x {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 70px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 35px;
  font-weight: 600;
  line-height: 60px;
  color: #fff;
  cursor: url(../img/manos.png), pointer;
  transition: .5s ease-in all;
  display: none;
}

#retail{
  width: 100%;
  height: 0px;
  background-color: #fa4f00;
  z-index: 2009;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;  
  animation: retails  ease-in-out .5s;
  overflow: visible;
  position: relative;
}

@keyframes retails{
  0% { height: 0px; overflow: hidden;}
  20% { height: 0px; overflow: hidden;}
  99% { height: 1030px; overflow: hidden;}
  100% { height: 1030px; overflow: visible;}
}


#regresar1{
  width: 80px;
  height: 40px;
  font-size: 30px;
  line-height: 60px;
  color: #fff;
  position: absolute;
  top:-66px;
  left: 10px;
  z-index: 2000;
  cursor: url(../img/manos.png), pointer;
  display: none;
}



/*Consumo Masivo*/
#btnjob2{
  width: 90%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 15px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob2:hover{
  width: 90%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 15px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob2:focus{
  width: 100%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 0px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
  animation: btnprod2  ease-in-out .4s;
}

@keyframes btnprod2{
  0% { width: 90%; border-radius: 15px;}
  100% { width: 100%;  border-radius: 0px;}
}

#btnjob2.efect2::after {
	content: "";
	width: 0%;
	height: 70px;
  background-color: #fa4f00;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 50%;
	transition: .5s ease-in-out all;
  cursor: url(../img/manos.png), pointer;
}
#btnjob2.efect2:hover::after {
	width: 100%;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#btnjob2.efect2:focus::after {
	width: 100%;
  height: 70px;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#txtspan2 {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 70px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 35px;
  font-weight: 600;
  line-height: 60px;
  color: #fa4f00;
  cursor: url(../img/manos.png), pointer;
  transition: .5s ease-in all;
  display: block;
  background-color:#fff;
}

#txtspan2:hover {
  color:#fff;
  transition: .5s ease-in all;
}

#txtspan2x {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 70px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 35px;
  font-weight: 600;
  line-height: 60px;
  color: #fff;
  cursor: url(../img/manos.png), pointer;
  transition: .5s ease-in all;
  display: none;
}

#consumo-masivo{
  width: 100%;
  height: 0px;
  background-color: #fa4f00;
  z-index: 2009;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;  
  animation: consumom  ease-in-out .8s;
  overflow: visible;
  position: relative;
}

@keyframes consumom{
  0% { height: 0px; overflow: hidden;}
  20% { height: 0px; overflow: hidden;}
  99% { height: 580px; overflow: hidden;}
  100% { height: 580px; overflow: visible;}
}

#regresar2{
  width: 80px;
  height: 40px;
  font-size: 30px;
  line-height: 60px;
  color: #fff;
  position: absolute;
  top:-66px;
  left: 10px;
  z-index: 2000;
  cursor: url(../img/manos.png), pointer;
}


/*Cultura y educacion*/
#btnjob3{
  width: 90%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 15px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob3:hover{
  width: 90%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 15px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob3:focus{
  width: 100%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 0px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
  animation: btnprod3  ease-in-out .4s;
}

@keyframes btnprod3{
  0% { width: 60%; border-radius: 15px;}
  100% { width: 100%;  border-radius: 0px;}
}

#btnjob3.efect3::after {
	content: "";
	width: 0%;
	height:70px;
  background-color: #fa4f00;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 50%;
	transition: .5s ease-in-out all;
  cursor: url(../img/manos.png), pointer;
}
#btnjob3.efect3:hover::after {
	width: 100%;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#btnjob3.efect3:focus::after {
	width: 100%;
  height: 70px;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#txtspan3 {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 70px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 35px;
  font-weight: 600;
  line-height: 60px;
  color: #fa4f00;
  cursor: url(../img/manos.png), pointer;
  transition: .5s ease-in all;
  display: block;
  background-color:#fff;
}

#txtspan3:hover {
  color:#fff;
  transition: .5s ease-in all;
}

#txtspan3x {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 70px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 35px;
  font-weight: 600;
  line-height: 60px;
  color: #fff;
  cursor: url(../img/manos.png), pointer;
  transition: .5s ease-in all;
  display: none;
}

#cultura-y-educacion{
  width: 100%;
  height: 0px;
  background-color: #fa4f00;
  z-index: 2009;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;  
  animation: cultura  ease-in-out .8s;
  overflow: visible;
  position: relative;
}

@keyframes cultura{
  0% { height: 0px; overflow: hidden;}
  20% { height: 0px; overflow: hidden;}
  99% { height: 580px; overflow: hidden;}
  100% { height: 580px; overflow: visible;}
}

#regresar3{
  width: 80px;
  height: 40px;
  font-size:30px;
  line-height: 60px;
  color: #fff;
  position: absolute;
  top:-66px;
  left: 10px;
  z-index: 2000;
  cursor: url(../img/manos.png), pointer;
}


/*Comida y Bebida*/

#btnjob4{
  width: 90%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 15px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob4:hover{
  width: 90%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 15px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob4:focus{
  width: 100%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 0px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
  animation: btnprod4  ease-in-out .4s;
}

@keyframes btnprod4{
  0% { width: 60%; border-radius: 15px;}
  100% { width: 100%;  border-radius: 0px;}
}

#btnjob4.efect4::after {
	content: "";
	width: 0%;
	height: 70px;
  background-color: #fa4f00;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 50%;
	transition: .5s ease-in-out all;
  cursor: url(../img/manos.png), pointer;
}
#btnjob4.efect4:hover::after {
	width: 100%;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#btnjob4.efect4:focus::after {
	width: 100%;
  height: 70px;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#txtspan4 {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 70px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 35px;
  font-weight: 600;
  line-height: 60px;
  color: #fa4f00;
  cursor: url(../img/manos.png), pointer;
  transition: .5s ease-in all;
  display: block;
  background-color:#fff;
}

#txtspan4:hover { 
  color: #fff;
  transition: .5s ease-in all;
}

#txtspan4x {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 70px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 35px;
  font-weight: 600;
  line-height: 60px;
  color: #fff;
  cursor: url(../img/manos.png), pointer;
  transition: .5s ease-in all;
  display: none;
}

#comida-y-bebida{
  width: 100%;
  height: 0px;
  background-color: #fa4f00;
  z-index: 2000;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  animation: comida  ease-in-out .8s;
  overflow: visible;
  position: relative;
}

@keyframes comida{
  0% { height: 0px; overflow: hidden;}
  20% { height: 0px; overflow: hidden;}
  99% { height: 700px; overflow: hidden;}
  100% { height: 700px; overflow: visible;}
}

#regresar4{
  width: 80px;
  height: 40px;
  font-size: 30px;
  line-height: 60px;
  color: #fff;
  position: absolute;
  top:-66px;
  left: 10px;
  z-index: 2000;
  cursor: url(../img/manos.png), pointer;
}

/*Salud*/

#btnjob5{
  width: 90%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 15px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob5:hover{
  width: 90%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 15px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob5:focus{
  width: 100%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 0px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
  animation: btnprod5  ease-in-out .4s;
}

@keyframes btnprod{
  0% { width: 90%; border-radius: 15px;}
  100% { width: 100%;  border-radius: 0px;}
}

#btnjob5.efect5::after {
	content: "";
	width: 0%;
	height: 90px;
  background-color: #fa4f00;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 50%;
	transition: .5s ease-in-out all;
  cursor: url(../img/manos.png), pointer;
}
#btnjob5.efect5:hover::after {
	width: 100%;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#btnjob5.efect5:focus::after {
	width: 100%;
  height: 90px;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#txtspan5 {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 70px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 35px;
  font-weight: 600;
  line-height: 60px;
  color: #fa4f00;
  cursor: url(../img/manos.png), pointer;
  transition: .5s ease-in all;
  display: block;
  background-color:#fff;
}

#txtspan5:hover {  
  color: #fff;  
  transition: .5s ease-in all;
}

#txtspan5x {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 70px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 35px;
  font-weight: 600;
  line-height: 60px;
  color: #fff;
  cursor: url(../img/manos.png), pointer;
  transition: .5s ease-in all;
  display: none;
}

#salud{  
  width: 100%;
  height: 0px;
  background-color: #fa4f00;
  z-index: 2000;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  animation: saluds  ease-in-out .8s;
  overflow: visible;
  position: relative;
}

@keyframes saluds{
  0% { height: 0px; overflow: hidden;}
  20% { height: 0px; overflow: hidden;}
  99% { height: 700px; overflow: hidden;}
  100% { height: 700px; overflow: visible;}
}



#regresar5{
  width: 80px;
  height: 40px;
  font-size: 30px;
  line-height: 60px;
  color: #fff;
  position: absolute;
  top:-66px;
  left: 10px;
  z-index: 2000;
  cursor: url(../img/manos.png), pointer;
}

/*Entretenimiento*/

#btnjob6{
  width: 90%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 15px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob6:hover{
  width: 90%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 15px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob6:focus{
  width: 100%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 0px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
  animation: btnprod6  ease-in-out .4s;
}

@keyframes btnprod6{
  0% { width: 90%; border-radius: 15px;}
  100% { width: 100%;  border-radius: 0px;}
}

#btnjob6.efect6::after {
	content: "";
	width: 0%;
	height: 70px;
  background-color: #fa4f00;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 50%;
	transition: .5s ease-in-out all;
  cursor: url(../img/manos.png), pointer;
}
#btnjob6.efect6:hover::after {
	width: 100%;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#btnjob6.efect6:focus::after {
	width: 100%;
  height: 70px;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#txtspan6 {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 70px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 35px;
  font-weight: 600;
  line-height: 60px;
  color: #fa4f00;
  cursor: url(../img/manos.png), pointer;
  transition: .5s ease-in all;
  display: block;
  background-color:#fff;
}

#txtspan6:hover { 
  color: #fff;
  transition: .5s ease-in all;
}

#txtspan6x {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 70px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 35px;
  font-weight: 600;
  line-height: 60px;
  color: #fff;
  cursor: url(../img/manos.png), pointer;
  transition: .5s ease-in all;
  display: none;
}

#entretenimiento{
  width: 100%;
  height: 0px;
  background-color: #fa4f00;
  z-index: 2000;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  animation: entretenimientos  ease-in-out .8s;
  overflow: visible;
  position: relative;
}

@keyframes entretenimientos{
  0% { height: 0px; overflow: hidden;}
  20% { height: 0px; overflow: hidden;}
  99% { height: 350px; overflow: hidden;}
  100% { height: 350px; overflow: visible;}
}

#regresar6{
  width: 80px;
  height: 40px;
  font-size: 30px;
  line-height: 60px;
  color: #fff;
  position: absolute;
  top:-66px;
  left: 10px;
  z-index: 2000;
  cursor: url(../img/manos.png), pointer;
}

/*Sin fines de lucho*/

#btnjob7{
  width: 90%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 15px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob7:hover{
  width: 90%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 15px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob7:focus{
  width: 100%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 0px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
  animation: btnprod7  ease-in-out .4s;
}

@keyframes btnprod7{
  0% { width: 90%; border-radius: 15px;}
  100% { width: 100%;  border-radius: 0px;}
}

#btnjob7.efect7::after {
	content: "";
	width: 0%;
	height: 70px;
  background-color: #fa4f00;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 50%;
	transition: .5s ease-in-out all;
  cursor: url(../img/manos.png), pointer;
}
#btnjob7.efect7:hover::after {
	width: 100%;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#btnjob7.efect7:focus::after {
	width: 100%;
  height: 70px;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#txtspan7 {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 70px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 35px;
  font-weight: 600;
  line-height: 60px;
  color: #fa4f00;
  cursor: url(../img/manos.png), pointer;
  transition: .5s ease-in all;
  display: block;
  background-color:#fff;
}

#txtspan7:hover {
  color: #fff;
  transition: .5s ease-in all;
}

#txtspan7x {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 70px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 35px;
  font-weight: 600;
  line-height: 60px;
  color: #fff;
  cursor: url(../img/manos.png), pointer;
  transition: .5s ease-in all;
  display: none;
}

#sin-fines-de-lucro{
  width: 100%;
  height: 0px;
  background-color: #fa4f00;
  z-index: 2000;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  animation: fines  ease-in-out .8s;
  overflow: visible;
  position: relative;
}

@keyframes fines{
  0% { height: 0px; overflow: hidden;}
  20% { height: 0px; overflow: hidden;}
  99% { height: 350px; overflow: hidden;}
  100% { height: 350px; overflow: visible;}
}

#regresar7{
  width: 80px;
  height: 40px;
  font-size: 30px;
  line-height: 60px;
  color: #fff;
  position: absolute;
  top:-66px;
  left: 10px;
  z-index: 2000;
  cursor: url(../img/manos.png), pointer;
}

/*tecnologia*/

#btnjob8{
  width: 90%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 15px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob8:hover{
  width: 90%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 15px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob8:focus{
  width: 100%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 0px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
  animation: btnprod8  ease-in-out .4s;
}

@keyframes btnprod8{
  0% { width: 60%; border-radius: 15px;}
  100% { width: 100%;  border-radius: 0px;}
}

#btnjob8.efect8::after {
	content: "";
	width: 0%;
	height: 70px;
  background-color: #fa4f00;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 50%;
	transition: .5s ease-in-out all;
  cursor: url(../img/manos.png), pointer;
}
#btnjob8.efect8:hover::after {
	width: 100%;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#btnjob8.efect8:focus::after {
	width: 100%;
  height: 70px;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#txtspan8 {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 70px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 35px;
  font-weight: 600;
  line-height: 60px;
  color: #fa4f00;
  cursor: url(../img/manos.png), pointer;
  transition: .5s ease-in all;
  display: block;
  background-color:#fff;
}

#txtspan8:hover {
  color: #fff;
  transition: .5s ease-in all;
}

#txtspan8x {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 70px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 35px;
  font-weight: 600;
  line-height: 60px;
  color: #fff;
  cursor: url(../img/manos.png), pointer;
  transition: .5s ease-in all;
  display: none;
}

#tecnologia{
  width: 100%;
  height: 0px;
  background-color: #fa4f00;
  z-index: 2000;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  animation: tecno  ease-in-out .8s;
  overflow: visible;
  position: relative;
}

@keyframes tecno{
  0% { height: 0px; overflow: hidden;}
  20% { height: 0px; overflow: hidden;}
  99% { height: 700px; overflow: hidden;}
  100% { height: 700px; overflow: visible;}
}

#regresar8{
  width: 80px;
  height: 40px;
  font-size: 30px;
  line-height: 60px;
  color: #fff;
  position: absolute;
  top:-66px;
  left: 10px;
  z-index: 2000;
  cursor: url(../img/manos.png), pointer;
}

/*Viajes*/

#btnjob9{
  width: 90%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 15px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob9:hover{
  width: 90%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 15px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer; 
}

#btnjob9:focus{
  width: 100%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 0px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
  animation: btnprod9  ease-in-out .4s;
}

@keyframes btnprod9{
  0% { width: 90%; border-radius: 15px;}
  100% { width: 100%;  border-radius: 0px;}
}

#btnjob9.efect9::after {
	content: "";
	width: 0%;
	height: 70px;
  background-color: #fa4f00;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 50%;
	transition: .5s ease-in-out all;
  cursor: url(../img/manos.png), pointer;
}
#btnjob9.efect9:hover::after {
	width: 100%;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#btnjob9.efect9:focus::after {
	width: 100%;
  height: 70px;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#txtspan9 {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 70px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 35px;
  font-weight: 600;
  line-height: 60px;
  color: #fa4f00;
  cursor: url(../img/manos.png), pointer;
  transition: .5s ease-in all;
  display: block;
  background-color:#fff;
}

#txtspan9:hover {
  color: #fff;
  transition: .5s ease-in all;
}

#txtspan9x {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 70px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 35px;
  font-weight: 600;
  line-height: 60px;
  color: #fff;
  cursor: url(../img/manos.png), pointer;
  transition: .5s ease-in all;
  display: none;
}

#viajes{
  width: 100%;
  height: 0px;
  background-color: #fa4f00;
  z-index: 2000;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  animation: travel  ease-in-out .8s;
  overflow: visible;
  position: relative;
}

@keyframes travel{
  0% { height: 0px; overflow: hidden;}
  20% { height: 0px; overflow: hidden;}
  99% { height: 900px; overflow: hidden;}
  100% { height: 900px; overflow: visible;}
}

#regresar9{
  width: 80px;
  height: 40px;
  font-size: 30px;
  line-height: 60px;
  color: #fff;
  position: absolute;
  top:-66px;
  left: 10px;
  z-index: 2000;
  cursor: url(../img/manos.png), pointer;
}

/*Servicios*/

#btnjob10{
  width: 90%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 15px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
}

#btnjob10:hover{
  width: 90%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 15px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer; 
}

#btnjob10:focus{
  width: 100%;
  height: 70px;
  background-color: transparent;
  border: none;
  border-radius: 0px;
  position: relative;
	display: inline-flex;
  overflow: hidden;
  cursor: url(../img/manos.png), pointer;
  animation: btnprod10  ease-in-out .4s;
}

@keyframes btnprod10{
  0% { width: 90%; border-radius: 15px;}
  100% { width: 100%;  border-radius: 0px;}
}

#btnjob10.efect10::after {
	content: "";
	width: 0%;
	height:70px;
  background-color: #fa4f00;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 50%;
	transition: .5s ease-in-out all;
  cursor: url(../img/manos.png), pointer;
}
#btnjob10.efect10:hover::after {
	width: 100%;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#btnjob10.efect10:focus::after {
	width: 100%;
  height: 70px;
  top: 0px;
	left: 0%;
  cursor: url(../img/manos.png), pointer;
}

#txtspan10 {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 70px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 35px;
  font-weight: 600;
  line-height: 60px;
  color: #fa4f00;
  cursor: url(../img/manos.png), pointer;
  transition: .5s ease-in all;
  display: block;
  background-color:#fff;
}

#txtspan10:hover {
  color: #fff;
  transition: .5s ease-in all;
}

#txtspan10x {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 70px;
  z-index: 2;
  transition: .3s ease all;
  font-family: 'Oswald', sans-serif;
  font-size: 35px;
  font-weight: 600;
  line-height: 60px;
  color: #fff;
  cursor: url(../img/manos.png), pointer;
  transition: .5s ease-in all;
  display: none;
}

#servicios{
  width: 100%;
  height: 0px;
  background-color: #fa4f00;
  z-index: 2000;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  animation: services  ease-in-out .8s;
  overflow: visible;
  position: relative;
}

@keyframes services{
  0% { height: 0px; overflow: hidden;}
  20% { height: 0px; overflow: hidden;}
  99% { height: 900px; overflow: hidden;}
  100% { height: 900px; overflow: visible;}
}

#regresar10{
  width: 80px;
  height: 40px;
  font-size: 30px;
  line-height: 60px;
  color: #fff;
  position: absolute;
  top:-66px;
  left: 10px;
  z-index: 2000;
  cursor: url(../img/manos.png), pointer;
}

  #icono,#icono1,#icono2{
    width: 20%;
    display: block;
  }
  
  #iconoa,#iconoa1,#iconoa2{
    width: 20%;
    display: none;
  }

  .seccionsub {
    width: 87%;
    padding-top: 50px;
  }

  .v{
    display: none;
  }

  @keyframes product{
    0% { height: 0px; overflow: hidden;}
    20% { height: 0px; overflow: hidden;}
    99% { height: 1300px; overflow: hidden;}
    100% { height: 1300px; overflow: visible;}
  }

  @keyframes retails{
    0% { height: 0px; overflow: hidden;}
    20% { height: 0px; overflow: hidden;}
    99% { height: 1780px; overflow: hidden;}
    100% { height: 1780px; overflow: visible;}
  }

  @keyframes consumom{
    0% { height: 0px; overflow: hidden;}
    20% { height: 0px; overflow: hidden;}
    99% { height: 580px; overflow: hidden;}
    100% { height: 580px; overflow: visible;}
  }

  @keyframes cultura{
    0% { height: 0px; overflow: hidden;}
    20% { height: 0px; overflow: hidden;}
    99% { height: 580px; overflow: hidden;}
    100% { height: 580px; overflow: visible;}
  }

  @keyframes comida{
    0% { height: 0px; overflow: hidden;}
    20% { height: 0px; overflow: hidden;}
    99% { height: 980px; overflow: hidden;}
    100% { height: 980px; overflow: visible;}
  }

  @keyframes saluds{
    0% { height: 0px; overflow: hidden;}
    20% { height: 0px; overflow: hidden;}
    99% { height: 770px; overflow: hidden;}
    100% { height: 770px; overflow: visible;}
  }

  @keyframes entretenimientos{
    0% { height: 0px; overflow: hidden;}
    20% { height: 0px; overflow: hidden;}
    99% { height: 380px; overflow: hidden;}
    100% { height: 380px; overflow: visible;}
  }

  @keyframes fines{
    0% { height: 0px; overflow: hidden;}
    20% { height: 0px; overflow: hidden;}
    99% { height: 410px; overflow: hidden;}
    100% { height: 410px; overflow: visible;}
  }

  @keyframes tecno{
    0% { height: 0px; overflow: hidden;}
    20% { height: 0px; overflow: hidden;}
    99% { height: 765px; overflow: hidden;}
    100% { height: 765px; overflow: visible;}
  }

  @keyframes travel{
    0% { height: 0px; overflow: hidden;}
    20% { height: 0px; overflow: hidden;}
    99% { height: 580px; overflow: hidden;}
    100% { height: 580px; overflow: visible;}
  }

  @keyframes services{
    0% { height: 0px; overflow: hidden;}
    20% { height: 0px; overflow: hidden;}
    99% { height: 1670px; overflow: hidden;}
    100% { height: 1670px; overflow: visible;}
  }

  .areaparrafo {
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .texto-statico {
    font-family: 'Oswald', sans-serif;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    color: #000;
    text-transform: uppercase;
    animation: textost .5s;
  }

  @keyframes textost{
    0% { font-size: 0px;}
    100%{ font-size: 36px;}
  }

  .texto-statico2 {
    font-family: 'Oswald', sans-serif;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    color: #000;
    text-transform: uppercase;
  }

  
  .texto-movil {
    position: absolute;
    top: 70px;
    left: 0px;
    font-family: 'Oswald', sans-serif;
    font-size: 36px;
    font-weight: 600;
    text-align: center;
    color: #fa4f00;
    text-transform: uppercase;
    line-height: 36px;
    transition-delay: 2s;
    animation: textomov ease-in-out 2s;
  }

  .areatexto {
    width: 155px;
    height: 40px;
    position: relative;
    padding-left: 10px;
    padding-top: 10px;
    overflow: hidden;
}

  .areatexto2 {
    width: 210px;
    height: 40px;
    position: relative;
    padding-left: 10px;
    padding-top: 10px;
    overflow: hidden;
  }

  .areatexto3 {
    width: 200px;
    height: 40px;
    position: relative;
    padding-left: 10px;
    padding-top: 10px;
    overflow: hidden;
  }

  .areatexto4 {
    width: 155px;
    height: 40px;
    position: relative;
    padding-left: 10px;
    padding-top: 10px;
    overflow: hidden;
  }

  .lineamovil,.lineamovil2,.lineamovil3,.lineamovil4 {
    width: 100%;
    height: 4px;
    background-color: #fa4f00;
    position: absolute;
    left: -100%;
    bottom: 0%;
    animation: linemov2 1.5s ease-in-out;
  }

  #menu {
    position: fixed;
    top: 44px;
    left: 5%;
    width: 90%;
    height: 400px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    z-index: 2000;
    overflow: hidden;
    background-color: #fa4f00;
    padding-top: 70px;
    display: none;
    align-content: center;
    justify-content: center;
    animation: abrirmenu 2s;
  }

  #serch {
    position: fixed;
    top: 3%;
    left: 5%;
    width: 90%;
    height: 80px;
    border-radius: 15px;
    z-index: 200000;
    background-color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    border-radius: 40px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: none;
    cursor: url(../img/manos.png), pointer;
    animation: abrirserch 2s;
}

.pc{
  display: no;
}

.texto-job {
  font-size: 16px;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  text-align: justify;
  padding-top: 20px;
  padding-bottom: 20px;
}

.texto-job-n {
  font-size: 16px;
  font-family: 'Oswald', sans-serif;
  font-weight: 900;
}

.divtwo {
  width: 100%;
  height: 440px;
  position: relative;
  background-image: url(../../trabajos/assets/img/recursos-marlon/Corporeo-logo-vertical.png);
  background-size: cover;
  background-position: center center;
}

.divtwos {
    width: 100%;
    height: 400px;
    position: relative;
    background-image: url(../../trabajos/assets/img/recursos-marlon/Corporeo-logo-vertical.png);
    background-size: cover;
    background-position: center center;
}

.divparrafo {
  width: 100%;
  position: absolute;
  left: 0px;
  bottom: 10px;
}

.texto-job2 {
  font-size: 16px;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  text-align: left;
  padding-top: 70px;
  padding-bottom: 20px;
  color: #fff;
}

.texto-job3 {
  font-size: 16px;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  text-align: left;
  padding-top: 30px;
  padding-bottom: 40px;
  color: #000;
}

.texto-job-n2 {
  font-size: 16px;
  font-family: 'Oswald', sans-serif;
  font-weight: 900;
}

.divfour {
  width: 100%;
  padding-bottom: 145px;
  position: relative;
}

.verpc{
  display: none;
}

.vercel{
  display: block;
}

.banner-marlon{
  position: relative;
  width: 100%;
  padding-bottom: 80px;
 }

.computer {
  width: 90%;
}



.divthree {
  width: 90%;
  margin-left: 5%;
  padding-top: 30px;
  padding-bottom: 0px;
}

.divfourgy {
    width: 100%;
    height: 86vh;
    padding-bottom: 0px;
    position: relative;
}

.texto-staticob {
    font-family: 'Oswald', sans-serif;
    font-size: 50px;
    font-weight: 700;
    text-align: center;
    color: #000;
    text-transform: uppercase;
}

.seccionb {
    width: 100%;
    height: auto;
    padding-top: 26%;
    padding-bottom: 10%;
}

.textobanner {
    font-family: 'Oswald', sans-serif;
    font-size: 25px;
    font-weight: 400;
    text-align: left;
    color: #000;
}

.areablack {
    background-color: #000;
    width: 100%;
    padding-top: 2em;
    padding-bottom: 2em;
    padding-left: 2em;
    padding-right: 2em;
    border-radius: 40px;
}

.textoblack {
    font-family: 'Oswald', sans-serif;
    font-size: 25px;
    font-weight: 300;
    text-align: left;
    color: #fff;
}

.tituloorang {
    font-family: 'Oswald', sans-serif;
    font-size: 70px;
    font-weight: 900;
    text-align: left;
    color: #fff;
}

.textonaranja {
    font-family: 'Oswald', sans-serif;
    font-size: 25px;
    font-weight: 400;
    text-align: left;
    color: #fff;
}

.areao {
    background-color: #fa4f00;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 0px;
    padding-left: 3em !important;
    padding-top: 4em !important;
    padding-bottom: 3em !important;
    padding-right: 2em !important;
}

.areay {
    background-color: #f7fa19;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 30px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 30px;
    padding-left: 2em !important;
    padding-top: 4em !important;
    padding-bottom: 11em !important;
    padding-right: 3em !important;
    position: relative;
}

.areaimg {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    padding-top: 120px;
    padding-bottom: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.textblackc {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 600;
    text-align: left;
    color: #000;
    text-decoration: none !important;
    text-transform: uppercase;
    cursor: url(../img/manos.png), pointer !important;
}

.seccionc {
    width: 100%;
    padding-top: 30%;
    padding-bottom: 5%;
}

.recuadro {
    width: 100%;
    height: 435px;
    border-radius: 30px;
    background-color: transparent;
    position: relative;
    overflow: hidden;
}

  .botonportada{
    width: 100%;
    height: 435px;
    border-radius: 30px;
    background-color: transparent;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    font-weight: 700;
    text-align: center; 
    display: flex;
    justify-content: center;
    align-items: end; 
    padding-bottom: 15%;
    cursor: url(../img/manos.png), pointer;
  }

  .botonportada:hover{
    width: 100%;
     height: 435px;
    border-radius: 30px;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(250,79,0,1) 100%);
    position: absolute;
    top: 0px;
    left: 0px;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    cursor: url(../img/manos.png), pointer;
  }


}


/*Pantalla de 430px*/
@media (max-width: 430px) { 
  .recuadro {
    width: 100%;
    height: 500px;
    border-radius: 30px;
    background-color: transparent;
    position: relative;
    overflow: hidden;
  }

  .botonportada{
    width: 100%;
    height: 500px;
    border-radius: 30px;
    background-color: transparent;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    font-weight: 700;
    text-align: center; 
    display: flex;
    justify-content: center;
    align-items: end; 
    padding-bottom: 15%;
    cursor: url(../img/manos.png), pointer;
  }

  .botonportada:hover{
    width: 100%;
    height: 500px;
    border-radius: 30px;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(250,79,0,1) 100%);
    position: absolute;
    top: 0px;
    left: 0px;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    cursor: url(../img/manos.png), pointer;
  }
}


/*Pantalla de 360px*/
@media (max-width: 360px) { 
  .recuadro {
    width: 100%;
    height: 418px;
    border-radius: 30px;
    background-color: transparent;
    position: relative;
    overflow: hidden;
  }

  .botonportada{
    width: 100%;
    height: 418px;
    border-radius: 30px;
    background-color: transparent;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    font-weight: 700;
    text-align: center; 
    display: flex;
    justify-content: center;
    align-items: end; 
    padding-bottom: 15%;
    cursor: url(../img/manos.png), pointer;
  }

  .botonportada:hover{
    width: 100%;
    height: 418px;
    border-radius: 30px;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(250,79,0,1) 100%);
    position: absolute;
    top: 0px;
    left: 0px;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    cursor: url(../img/manos.png), pointer;
  }
}