body{
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #7d7c80;
}
.custom-font{
    font-family: 'Montserrat', sans-serif;
}
b{
    color: #24395b;
}

.text-az{
    color: #111a29;
}

.h100vh{
    height: 100vh;
}

.mt-30vh{
    margin-top: 30vh;
}

.subtitulo{
    font-weight: 100;
  }

#Soluciones{
    background-image: url(https://gmpsistemas.com/Datos_Fiscales/img/Fondo-aplicativo.jpg);
    background-size: cover;
    background-position: 0px;
    background-repeat: no-repeat;
}

.portada{
    /* background-image: linear-gradient(to left, #00000062, #00000063), url(../img/portada.jpg); */
    background-image: linear-gradient(to left, #00000062, #000000a2), url(../img/portada.jpg);
    height: 100vh;
    background-size: cover;
    background-position: center;
}

#hero {
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(to top, #03030363, #000000de), url("../img/portada.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  

.hombres{
    color: #428bca;
}

.mujeres{
    color: #ff0066;
}


.cursor{
    cursor: pointer;
}

.t-p{
    font-size: 16px;
}

.mt-capitalhumano{
    margin-top: 18vh;
}

.secion-texto{
    background-image: linear-gradient(#ffffff00, #ffffffc5 ,#ffffff), url(https://gmpsistemas.com/People_Analytics/img/capital_humano1.jpg);
    background-size: cover;
    height: 100vh;
}
/* .salud{
    background-image: linear-gradient(#ffffff00, #ffffffc5 ,#ffffff), url(https://gmpsistemas.com/People_Analytics/img/capital_humano1.jpg);
}
.nominafodo{
    background-image: linear-gradient(#ffffff00, #ffffffc5 ,#ffffff), url(https://gmpsistemas.com/People_Analytics/img/nomina_2.jpg);
}
.norma35fondo{
    background-image: linear-gradient(#ffffff00, #ffffffc5 ,#ffffff), url(https://gmpsistemas.com/People_Analytics/img/nom035_2.jpg);
}
.contratosfondo{
    background-image: linear-gradient(#ffffff00, #ffffffc5 ,#ffffff), url(https://gmpsistemas.com/People_Analytics/img/c);
} */

.custom-font-d{
    font-family: 'Dosis', sans-serif ;
    font-size: 22px;
}

.custom-font-q{
    font-family: 'Quicksand', sans-serif;
}

.custom-font-bold{
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
}

.bg-humanet{
    background: linear-gradient( #2d6fb0, #23588c );
    color: white;
}


.bg-principal{
    background-image: linear-gradient(to right,#000000b4 , #00000075), url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/fondo-portada.jpg);
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

.bg-planeacion{
  clip-path: polygon(0 0, 100% 0, 63% 100%, 0% 100%);
  background-color: #f8f7f7fd;
  height: 85vh;
}

.bg-planeacion-3{
    clip-path: polygon(0 0, 100% 0, 63% 100%, 0% 100%);
    background-color: #f8f7f7fd;
    height: 85vh;
  }

.bg-planeacion-inv{
    clip-path: polygon(0 0, 63% 0, 100% 100%, 0% 100%);
    background-color: #f8f7f7fd;
    height: 85vh;
  }

.bg-planeacion-4{
    clip-path: polygon(0 0, 63% 0, 100% 100%, 0% 100%);
    background-color: #f8f7f7fd;
    height: 85vh;
  }

  .bg-planeacion-5{
    clip-path: polygon(0 0, 100% 0, 63% 100%, 0% 100%);
    background-color: #f8f7f7fd;
    height: 85vh;
  }





.bg-eje1{
    background-image: linear-gradient(to left,#000000a1 , #000000e3), url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/fondo-eje-1.jpg);
    background-size: cover;
    background-position: 80px 0px;
    background-repeat: no-repeat;
    -webkit-box-shadow: 9px 10px 29px -12px rgba(107,105,107,1);
    -moz-box-shadow: 9px 10px 29px -12px rgba(107,105,107,1);
    box-shadow: 9px 10px 29px -12px rgba(107,105,107,1);
}


.bg-eje2{
    background-image: linear-gradient(to left,#000000a1 , #000000e3), url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/fondo-eje-2.jpg);
    background-size: cover;
    background-position: 80px 0px;
    background-repeat: no-repeat;
    -webkit-box-shadow: 9px 10px 29px -12px rgba(107,105,107,1);
    -moz-box-shadow: 9px 10px 29px -12px rgba(107,105,107,1);
    box-shadow: 9px 10px 29px -12px rgba(107,105,107,1);
    z-index: 1;
}

.bg-eje3{
    background-image: linear-gradient(to left,#000000a1 , #000000e3), url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/fondo-eje-3.jpg);
    background-size: cover;
    background-position: 80px 0px;
    background-repeat: no-repeat;
    -webkit-box-shadow: 9px 10px 29px -12px rgba(107,105,107,1);
    -moz-box-shadow: 9px 10px 29px -12px rgba(107,105,107,1);
    box-shadow: 9px 10px 29px -12px rgba(107,105,107,1);
    z-index: 1;
}

.bg-eje4{
    background-image: linear-gradient(to left,#000000a1 , #000000e3), url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/fondo-eje-4.jpg);
    background-size: cover;
    background-position: 80px 0px;
    background-repeat: no-repeat;
    -webkit-box-shadow: 9px 10px 29px -12px rgba(107,105,107,1);
    -moz-box-shadow: 9px 10px 29px -12px rgba(107,105,107,1);
    box-shadow: 9px 10px 29px -12px rgba(107,105,107,1);
    z-index: 1;
} 

.bg-eje5{
    background-image: linear-gradient(to left,#000000a1 , #000000e3), url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/fondo-eje-5.jpg);
    background-size: cover;
    background-position: 80px 0px;
    background-repeat: no-repeat;
    -webkit-box-shadow: 9px 10px 29px -12px rgba(107,105,107,1);
    -moz-box-shadow: 9px 10px 29px -12px rgba(107,105,107,1);
    box-shadow: 9px 10px 29px -12px rgba(107,105,107,1);
    z-index: 1;
}

.m-subl{
    position: absolute;
    bottom: 10px;
    left: 10px;
}




.bg-actualizacion-datos{
    background-image: linear-gradient(to left,#00000096 , #0f0e0e00), url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/fondo-actualizacion-datos.jpg);
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;   
}

.bg-timepos-covid{
    background-image: url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/Tiempos-de-Covid-2.jpg) !important;
    background-position: 60%;
    background-repeat: no-repeat;
    background-size: cover;
    border-left: 10px solid #8f959b;
}


.bg-encuestas{
    background-image: url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/fondo-cuestionario2.jpg) !important;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    border-left: 10px solid #b9bec4;
}
.bg-comunicacion-interna{
    background-image: url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/fondo-comunic-inter.jpg) !important;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    border-left: 10px solid #b9bec4;
    background-position: bottom;
}

.bg-contacto{
    height: 100vh;
    background-image: url(https://gmpsistemas.com/Datos_Fiscales/img/fondo-contacto.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.text-hum{
    color: #2d6fb0;
}

.text-hum-2{
    color: #23588c;
}

p{
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    color: #ffffff;
}

.titulo-aplicativo{
    font-family: 'Quicksand', sans-serif;
    color: #ffffff;
}


#aplicativo-estandar{
    /* background-image: linear-gradient(to bottom, #ffffffd0, #ffffff46), url(../img/fondo_com.jpg);
    background-position: center;
    background-size: cover;
    height: 100vh; */
    padding: 40px 0px 80px 0px;
    background-color: #15539b;
  }

  #aplicativo-servicio{
    /* background-image: linear-gradient(to bottom, #ffffffd0, #ffffff46), url(../img/fondo_com.jpg);
    background-position: center;
    background-size: cover;
    height: 100vh; */
    padding: 40px 0px 80px 0px;
    background-color: #1f4e88;
  }


.btn-play{
    font-size: 15px;
    color: #948484;
    width: 150px;
}

.btn-play:hover{
    color: #706767;
    box-shadow: 0px 8px 5px -2px rgb(245, 242, 242);
}

.btn-play:active{
    border: white solid;
}

.fa-play-circle-o{
    color: #948484;
    font-size: 40px;
    font-weight: 100;
}

ion-icon {
    font-size: 40px;
  }

.bg-left{
    background-color: #f2e6cf;
}

.h-100{
    height: 100vh !important;
}



.top-200{
    top: 300px;
}


.play-video{
    position: absolute;
    top: 45vh;
    left: -45px;
    background-color: white;
    font-size: 70px;
    border-radius: 50%;
}

.letras-flotantes{
    /* color: #dfdfdf; */
    /* color: #e6e6e6; */
    color: rgb(92, 87, 87);
    position: absolute;
    right: 0;
    top: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    z-index: 1;
    font-size: 25px;
}

.bg-op-white{
    background-color: rgba(231, 237, 248, 0.877);
    color: rgb(75, 68, 68);
}

.img-float{
    position: absolute;
    right: 35%;
    top: 25%;
    z-index: 1;
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
}

.btn-conoce{
    background-color: #5f93ac;
    color: white;
    border-radius: 0px;
    font-family: 'Quicksand', sans-serif;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 3px 3px 5px 0px rgba(173, 161, 161, 0.75);
    width: 150px;
}

.btn-cerramodal{
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1;
    background-color: red;
    color: white;
    padding: 0px;
    margin: 5px;
    border-radius: 50%;
    height: 50px;
    width: 50px;
}

.btn-cerramodal:hover{
    color: #e4e1e1;
    background-color: #ee4949;
}


.btn-cerramodal > span {
    font-size: 30px;
}


.btn-contacto{
    position: absolute;
    top: 20px; 
    left: 31%;
    font-family: 'Quicksand', sans-serif;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 3px 3px 5px 0px rgba(173, 161, 161, 0.75);
    width: 150px;
    border-radius: 50px;
    position: absolute;
}

#my-video{
    width: 100%;
    height: 100%;
}

.sombra{
    -webkit-box-shadow: 0px 4px 15px 0px rgba(209,201,209,1);
    -moz-box-shadow: 0px 4px 15px 0px rgba(209,201,209,1);
    box-shadow: 0px 4px 15px 0px rgba(209,201,209,1);
}


.bg-gr-negro{
    background-image: linear-gradient(to right, #000000ce, #00000025, #00000000);
    color: white;
}

.listado-dolor{
    list-style: none;
    color: white;
    padding: 0;
    margin: 0;
}

.listado-dolor > li{
    display: flex;
    margin-top: 20px;
}

.listado-dolor > li > .icono-d > ion-icon{
    font-size: 25px;
}

.texto-det-mod{
    color: #3f4449;
    height: 260px;
}


.btn-conoce:hover{
    background-color: #789aac;
    color: white;
    border-radius: 0px;
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
}

.btn-cotizar{
    background-color: #76be7d;
    color: white;
    font-family: 'Quicksand', sans-serif;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 3px 3px 5px 0px rgba(173, 161, 161, 0.75);
    width: 150px;
    border-radius: 50px;
    position: absolute;
    top: 20px;
    left: 45%;
}

.btn-cotizar:active, .btn-cotizar:hover {
    background-color: #64ad6b;
    color: white;
    border-radius: 0px;
    font-family: 'Quicksand', sans-serif;
    font-weight: 500;
    box-shadow: 3px 3px 5px 0px rgba(173, 161, 161, 0.75);
    width: 150px;
    border-radius: 50px;
}
.vermodulos{
    cursor: pointer;
    background-color: #f5f5f5;
    height: 10vh;
    padding-top: 30px;
}

.btn-secondary{
    font-size: 12px;
    height: 25px;
    padding: 3px 8px;
}

.navegacion{
    position: absolute;
    left: 0;
    top: 0;
}

.encabezado-nav{
    width: 50%;
    display: flex;
    position: absolute;
    padding-left: 3rem;
    top: 10px;
}

.posic{
    z-index: -1;
}


.navbar-toggler {
    border: 1px solid white;
}

.w-40{
    width: 40%;
}


#menu{
    height: 100vh;
    z-index: 1;
    position: absolute;
}

.w-30{
    width: 30%;
    text-align: right;
}

.ocultar{
    display: none;
}

.mostrar{
    display: block;
}

.fa-facebook-square{
    color: #3b5998;
}
.fa-twitter-square{
    color: #00acee;
}

.fa-linkedin-square{
    color:  #2867B2;
}

.card-soluc{
    height: 200px;
    transition: height 1s;
}

.card-soluc:hover{
    height: 230px;
    display: block;
    transition: height 1s;
}
.emp-mex{
    bottom: 0; 
    position: absolute;
    left: 0;
    background-image: linear-gradient(to left,#536294da , #3e384e);
    padding: 10px 5px;
    margin: 0px;
    font-style: italic;
}

.btn-default{
    color: #ffffff;
    background-color: #92ac68;
}

.btn-default:hover{
    color: #ffffff;
    background-color: #7c9457;
}

.label-nuevo{
    background-color: #4dbd56;
    color: white;
    border-radius: 4px;
    font-size: 10px;
    padding: 1px 5px;
    position: absolute;
    left: 30%;
    top: 15px;
}

.label-nuevo-act{
    background-color: #4dbd56;
    color: white;
    border-radius: 4px;
    font-size: 10px;
    padding: 1px 5px;
    position: absolute;
    left: 13%;
    top: 15px;
}




.text-informativo{
    font-size: 17px;
}
.h-10{
    height: 12vh;
}
.h-20{
    height: 20vh;
}
.h-30{
    height: 30vh;
}
.h-40{
    height: 40vh;
}
.h-50{
    height: 50vh;
}
.h-60{
    height: 60vh;
}
.h-70{
    height: 68vh;
}
.h-80{
    height: 80vh;
}
.h-90{
    height: 90vh;
}

.bold{
    font-weight: 600;
}

.mt-6{
    margin-top: 70px;
}
.mt-7{
    margin-top: 8rem;
}
.mt-8{
    margin-top: 10rem;
}
.mt-9{
    margin-top: 12rem;   
}
.mt-10{
    margin-top: 14rem;
}
.mb-6{
    margin-bottom: 6rem;
}
.mb-7{
    margin-bottom: 8rem;
}
.mb-8{
    margin-bottom: 10rem;
}
.mb-9{
    margin-bottom: 12rem;   
}
.mb-10{
    margin-bottom: 12rem;
}
.pt-6{
    padding-top: 6rem;
}
.pt-7{
    padding-top: 8rem;
}
.pt-8{
    padding-top: 10rem;
}
.pt-9{
    padding-top: 12rem;   
}
.pt-10{
    padding-top: 14rem;
}
.pb-6{
    padding-bottom: 6rem;
}
.pb-7{
    padding-bottom: 8rem;
}
.pb-8{
    padding-bottom: 10rem;
}
.pb-9{
    padding-bottom: 12rem;   
}
.pb-10{
    padding-bottom: 14rem;
}

.cerrar{
    height: 35px;
    width: 35px;
    background-color: #ff2d2d;
    position: absolute;
    top: 5px;
    left: 10px;
    font-size: 22px;
    color: white;
    border-radius: 50%;
    cursor: pointer;
}

.btn-ver-mas{
    background-color: #dddddd;
    color: #4b565c;
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 1px 10px;
    font-size: 12px;
}

.actdat-1 > .row{
    height: 170px;
}
.actdat-2 > .row{
    height: 170px;
}
.actdat-3 > .row{
    height: 170px;
}
.actdat-4 > .row{
    height: 170px;
}




.regresar{
    cursor: pointer;
}



.play-video{
    cursor: pointer;
}

.boton-play{
    cursor: pointer;
    color: white;
    font-size: 100px;
    margin-top: 70%;
    font-weight: 100;
}

.text-mod{
    font-size: 14px;
}

.cont-input{
    border: none;
    border-bottom: solid 1px #afacac;
    border-radius: 0px;
}

.cont-input:active{
    border: none !important;
}

.cont-input:focus{
    border: none !important;
}

.cont-input::selection{
    border: none !important;
}

.form-control:focus{
    border-color: #d4caca;
    border-bottom: solid 1px #cdcfa9 !important;
    background-color: #ffffff;
    outline: 0;
    box-shadow: none;
}

.form-control::placeholder{
    color: #bebaba;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
}

.btn-enviar{
    border-radius: 25px;
    background-color: rgb(139, 139, 168);
    color: white;
    width: 150px;
}

.border-left-sec{
    border-left: solid 7px #0266ff;
}

.border-left-sec2{
    border-left: solid 7px #30d2d6;
}

.logo-esr{
    position: absolute;
    bottom: 10px;
    left: 30px;
}

.logo-open{
    position: absolute;
    top: 13px;
    left: 10%;
}

.logo-entorno{
    position: absolute;
    top: 10px;
}

.logo-humanet{
    position: absolute;
    top: 12px;
    right: 8%;
}

.linea1{
    position: absolute;
    left: 0%;
    top: 60px;
    height: 2px;
    width: 15%;
    background-color: rgb(247, 245, 238);
}

.linea2{
    position: absolute;
    left: 0%;
    top: 80px;
    height: 2px;
    width: 20%;
    background-color: rgb(247, 245, 238);
}

.linea3{
    position: absolute;
    right: 0%;
    top: 20px;
    height: 4px;
    width: 60%;
    background-color: rgb(247, 245, 238);
}

.linea4{
    position: absolute;
    right: 0%;
    top: 40px;
    height: 4px;
    width: 40%;
    background-color: rgb(247, 245, 238);
}

.linea5{
    position: absolute;
    right: 0%;
    top: 60px;
    height: 4px;
    width: 20%;
    background-color: rgb(247, 245, 238);
}
.linea6{
    position: absolute;
    right: 0%;
    bottom: 60px;
    height: 4px;
    width: 20%;
    background-color: rgb(247, 245, 238);
}

.linea7{
    position: absolute;
    right: 0%;
    bottom: 40px;
    height: 4px;
    width: 30%;
    background-color: rgb(247, 245, 238);
}

.linea8{
    position: absolute;
    right: 0%;
    bottom: 20px;
    height: 4px;
    width: 40%;
    background-color: #f7f5ee;
}

.gmp-teapoya{
    position: absolute;
    right: 18%;
    bottom: 35px;
    color: #bdb9b2;
    font-size: 22px;
}

.hastag{
    font-size: 22px;
    position: absolute;
}

.hastag-l-t{
    top: 10px;
    left: 10px;
    font-size: 22px;
    position: absolute;
}

.hastag-r-t{
    top: 10px;
    right: 10px;
    font-size: 22px;
    position: absolute;
}

.hastag-l-b{
    left: 10px;
    bottom: 10px;
    font-size: 22px;
    position: absolute;
}

.logo-esr{
    position: absolute;
    bottom: 3%;
    left: 10%;
}

.hastag-r-b{
    right: 10px;
    bottom: 10px;
    font-size: 22px;
    position: absolute;
}

.bg-am{
    background-color: #feba32;
    border-radius: 6px;
}

.icono-c{
    background-color: #feba32;
    width: 60px;
    height: 60px;
    text-align: center;
    border-radius: 5px;
    padding: 9px 0px 0px 0px;
}


.icono-d{
    background-color: #feba32;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 5px;
    padding: 7px 0px 0px 0px;
}

.icono-necesitas{
    background-color: #feba32;
    width: 35px;
    height: 35px;
    text-align: center;
    border-radius: 5px;
    padding: 5px 0px 0px 0px;
}

#planeacioneject{
    height: 100vh;
}


#controlhomeoff{
    height: 100vh;
}


#digitalizacion{
    height: 100vh;
}


#nom035{
    height: 100vh;
}

#costonomina{
    height: 100vh;
}

#infografia{
    height: 100vh;
    /* background-color: #e9e9e9; */
}

.text-ama{
    color: #feba32;
}


.bg-amarillo{
    background-color: #feba32;
    color: #ffffff;
}

.border-left-am{
    border-left: solid 3px #feba32;
}

.border-right-am{
    border-right: solid 3px #feba32;
}

.bg-sec-ejes{
    background-image: url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/Tiempos-de-Covid.jpg);
    height: 300px;
    background-position: 0px -80px;
    background-size: cover;
    background-repeat: no-repeat;
}

.circulo{
    height: 200px;
    width: 200px;
    border-radius: 50%;
    border: 1px solid #dddbda;
    background-color: white;
    text-align: center;
    -webkit-box-shadow: 3px 3px 21px 0px rgba(199,199,199,1);
    -moz-box-shadow: 3px 3px 21px 0px rgba(199,199,199,1);
    box-shadow: 3px 3px 21px 0px rgba(199,199,199,1);
}

.c-icono{
    background-color: #feba32;
    width: 60px;
    justify-content: center;
    text-align: center;
    height: 70px;
    margin: 0 auto;
    border-radius: 0px 0px 20px 20px;
    margin-top: 5px;
    z-index: 2;
    padding: 8px 0px 0px 0px;
}

.sectop{
    background-color: #feba32;
    width: 60px;
    margin-top: -13px;
    height: 10px;
    border-radius: 50%;
    z-index: 0;
}

.cir-1{
    margin-top: 15%;
}

.cir-2{
    margin-top: 15%;
}

.cir-3{
    margin-top: 18%;
}

.cir-4{
    margin-top: 15%;
}

.cir-5{
    margin-top: 15%;
}

.comentario-b{
    position:absolute;                  
    bottom:0;                          
    left:0;
    margin-bottom: 0px;
    padding: 15px;
    -webkit-box-shadow: 14px 5px 30px -2px rgba(201,201,201,1);
-moz-box-shadow: 14px 5px 30px -2px rgba(201,201,201,1);
box-shadow: 14px 5px 30px -2px rgba(201,201,201,1);
}

.label-saber{
    background-color: #181818;
    color: #eeeeee;
    border-radius: 4px;
    padding: 0px 10px;
    font-size: 12px;
    cursor: pointer;
}

.figura-geo-4{
    position: absolute;
    right: 10%;
    top: 50%;
    -webkit-animation-name: figura-4;  /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 3s;  /* Safari 4.0 - 8.0 */  
    -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
    -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
    animation-name: figura-4;
    animation-duration: 6s;  
    animation-delay: 3s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}

@keyframes figura-4 {
    0%   {top:0px; top:0px; opacity: 0; opacity: 0;}
    50%  {top:160px; top:160px; opacity: 1; opacity: 1;}
    100%  {top:320px; top:320px; opacity: 0; opacity: 0;}
}

@keyframes circ-flo {
    0%   {top:0px; top:0px; }
    50%  {top:160px; top:160px; opacity: 1; opacity: 1;}
    100%  {top:320px; top:320px; }
}


.bg-black{
    background-color: #343a40!important;
    /* clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%, 0 100%, 0% 25%); */
}

.bg-estres{
    background-image: url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/estres.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0px -220px;
}


.bg-dg-black{
    background-image: linear-gradient(to top, #111111e7, #020202ea);
}

.bg-estresa-lab{
    background-image: linear-gradient(to top, #3a3a3a13, #2b2b2b4f), url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/fondo-estres.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}


.seccion-scroll{
    height: 100vh;
    overflow: scroll;
}

.bg-trapecio{
    background-image: linear-gradient(to top, #3a3a3a13, #2b2b2b4f), url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/estres.jpg);
    clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-estresa-nom{
    background-image: linear-gradient(to top, #3a3a3a13, #2b2b2b4f), url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/estres.jpg);
    background-repeat: no-repeat;
    height: 400px;
}


.bg-circulo{
    clip-path: circle(46.2% at 50% 50%);
    background-color: #000000;
    color: white;
}

.bg-geometric{
    background-image:  url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/fondo-geome.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

#listado-secciones{
    list-style: none;
    margin-top: 40vh;
}

#listado-secciones > li{
    margin: 10px 0px;
}

#listado-secciones > li .row{
    /* background-color: #3d4655; */
    background-image: linear-gradient(to top, #00a5db, #1a4480);
    color: #ffffff;
    border-radius: 50px 0px 0px 50px;
    padding: 5px 0px;
    cursor: pointer;
    border: solid 1px #e7e7e7;
}

#listado-secciones > li:hover .row{
    background-color: #415069;
    color: #ffffff;
    border: solid 1px #ecebeb;
}

#listado-secciones > li.active .row{
    background-color: #1b2b44;
    color: white;
    border-radius: 50px 0px 0px 50px;
    animation: mymove 2s;
}

@keyframes mymove {
    from {background-color: #f1f1f1;}
    to {background-color: #24395b;}
}

.solución1{
    cursor: pointer;
}

/* Esta es la flecha decreciente
lleva estos estilos */
    .container-flecha-h {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 50px;
    }
      .chevron-h {
        position: absolute;
        width: 2.1rem;
        height: 0.48rem;
        opacity: 0;
        transform: scale(0.3);
        animation: move-chevron-h 3s ease-out infinite;
      }
      .chevron-h:first-child {
        animation: move-chevron-h 3s ease-out 1s infinite;
      }
      .chevron-h:nth-child(2) {
        animation: move-chevron-h 3s ease-out 2s infinite;
      }
      .chevron-h:before, .chevron-h:after {
        content: "";
        position: absolute;
        top: 0;
        height: 100%;
        width: 50%;
        background: #ffffff;
      }
      .chevron-h:before {
        left: 0;
        transform: skewy(30deg);
      }
      .chevron-h:after {
        right: 0;
        width: 50%;
        transform: skewY(-30deg);
      }
      @keyframes move-chevron-h {
        25% {
          opacity: 1;
        }
        33.3% {
          opacity: 1;
          transform: translateY(2.28rem);
        }
        66.6% {
          opacity: 1;
          transform: translateY(3.12rem);
        }
        100% {
          opacity: 0;
          transform: translateY(4.8rem) scale(0.5);
        }
      }
/* Flecha Creciente */
.container-flecha-m {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .chevron-m {
        position: absolute;
        width: 2.1rem;
        height: 0.48rem;
        opacity: 0;
        transform: scale(0.3);
        animation: move-chevron 3s ease-out infinite;
      }
      .chevron-m:first-child {
        animation: move-chevron 3s ease-out 1s infinite;
      }
      .chevron-m:nth-child(2) {
        animation: move-chevron 3s ease-out 2s infinite;
      }
      .chevron-m:before, .chevron-m:after {
        content: "";
        position: absolute;
        top: 0;
        height: 100%;
        width: 50%;
        background: #ffac8e;
      }
      .chevron-m:before {
        left: 0;
        transform: skewy(150deg);
      }
      .chevron-m:after {
        right: 0;
        width: 50%;
        transform: skewY(-150deg);
      }
      @keyframes move-chevron {
        25% {
          opacity: 1;
        }
        33.3% {
          opacity: 1;
          transform: translateY(-2.28rem);
        }
        66.6% {
          opacity: 1;
          transform: translateY(-3.12rem);
        }
        100% {
          opacity: 0;
          transform: translateY(-4.8rem) scale(0.5);
        }
      }

    #seccion2{
        height: 100vh;
    }


    .uno{
        --animate-duration: 0.7s;
    }
    .dos{
        --animate-duration: 1s;
    }
    .tres{
        --animate-duration: 1.4s;
    }
    .cuatro{
        --animate-duration: 1.8s;
    }
    .cinco{
        --animate-duration: 2.2s;
    }
    .seis{
        --animate-duration: 2.4s;
    }
    .flecha-subir{
        position: fixed; 
        left: 15px; 
        top: 90%;
        cursor: pointer;
        z-index:10;
    }
    .bg-act{
        background-image: url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/fondo-sistema.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        height: 100vh;
    }

    .bg-act-2{
        background-image: url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/fondo-sistema.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        height: 50vh;
    }


  








































.curva{
    width: 100px;
    position: absolute;
    right: 0;
    top: 50%;
    background-image: url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/lineas-am2.png);
    -moz-background-size: 100% 100%; /*Firefox 3.6*/
    -o-background-size: 100% 100%; /*opera*/
    -webkit-background-size: 100% 100%; /*Safari*/
    background-size: 100% 100%; /*estandar css3*/
}
.iniciar-curva{
    width: 120%;
    transition: width 1.5s;
    height: 50px;
    z-index: 0  ;
}

.regreso{
    width: 10%;
    transition: width 1.5s;
    height: 50px;
    justify-content: left;
    text-align: left;
    left: -20%;
}

  .salida{
    animation-name: example;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    position: absolute;
  }
  @keyframes example {
    0%   {left: 0px; opacity: 1;}
    100% {left: -120%; display: none;}
  }

.curv-p{
    position: relative;
    top: -50vh;
}
.contenido-derecha{
    position: fixed;
    right: -210vh;
    top: 0;
    height: 100vh;
}
.anima-izquie-der{
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}
@keyframes animacion-r {
    0%   {right: -210vh;}
    100% {right:  0vh;}
}


@keyframes animacion-d {
    0%   {right: 0vh;}
    100% {right: -210vh;}
}


.nav-pills .nav-link {
    border-radius: .25rem;
    border-bottom: solid 1px rgba(194, 189, 189, 0.8);
}



.lista-soluc{
    list-style: none;
    padding: 0;
}

.lista-soluc > li{
    padding: 5px 10px;
    border-bottom: solid 1px #e2e2e2;
    height: 55px;
    margin: 5px 0px;
    cursor: pointer;
}


.lista-soluc > li.active{
    background-color: #dfdfdf;
    border-radius: 10px;
}

.dolor-detalle{
    height: 100vh;
}

.solucion-gmp{
    cursor: pointer;
    /* position: absolute;
    bottom: 10px;
    right: 10px; */
}

.mt-solucion-salud{
    margin-top: 43vh;
}

.icon-regresar{
    cursor: pointer;
}

.icon-regresar-2{
    cursor: pointer;
}

.icon-regresar-3{
    cursor: pointer;
}

.icono-dentro-sec{
    background-color: #feba32;
    width: 60px;
    height: 60px;
    text-align: center;
    border-radius: 5px;
    padding: 7px 0px 0px 0px;
}

.h-100{
    height: 100vh;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #424242;
    background-color: #dad8d8;
    font-weight: bold;
}


.nav-pills .nav-link {
    border-radius: 50px;
    border: solid 1px #e6e3e3cc;
    margin: 10px 0px;
}

.nav-pills > a{
    color: #6d6969;
}

.btn-sol{
    cursor: pointer;
}

.mt-imgnom{
    margin-top: 20vh;
}







@media only screen and (max-width: 767px) {

    .col-md-6 > .img-logo-gmp{
        text-align: center;
        margin-top: 30px;
    }

    .sec-iniciap{
        text-align: center;
    }

    .img-logo-opb{
        height: 40px;
        margin-top: 0 !important;
    }

    .img-esr-log{
        position: relative !important;
        height: 60px !important;
        bottom: 0px !important;
    }

    .sec-secund{
        text-align: center !important;
        margin-top: 30px;
    }

    .col-md-3.text-right{
        text-align: center !important;
    }

    #contratos, #norma35, #indicadores, #salud{
        padding: 30px;
    }

    .bg-principal{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }

    .mt-imgnom{
        margin-top: 10vh;
    }

    .secion-texto{
        height: auto;
    }

    .mt-solucion-salud{
        margin-top: 10vh;
    }

    .fondocapital{
        height: auto;
    }

    .bg-contacto{
        display: none;
    }


    .mt-capitalhumano{
        margin-top: 10vh;
    }

    .logo-open{
        width: 85px;
    }
    
    .logo-esr{
        height: 25px;
    }

    .mt-8{
        margin-top: 20%;
    }

    #contacto{
        padding-bottom: 50px;
    }

    .h100vh{
        height: auto;
        padding-bottom: 50px;
    }
    .logo-esr{
        bottom: 50px;
        left: 30px;
    }    
    /* .logo-open{
        bottom: 50px;
        left: 30%;
    } */
    /* .logo-humanet{
        bottom: 52px;
        left: 65%;
    } */
    .gmp-teapoya {
        bottom: 0px;
    }
    .bg-planeacion{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        height: 45vh;
    }
    .bg-eje1{
        background-position: 0px 0px;
    }
    .mt-icon{
        margin-top: 15px;
    }
    .info-necesidad{
        height: 55vh;
    }
    .listado-dolor > .mt-6{
        margin-top: 0px;
    }
    .nav-pills .nav-link {
        margin: 6px 0px;
    }
    .regresar-movil{
        position: absolute;
        left: 30px;
        top: 10px;
    }

    #infografia{
        height: auto;
    }

    .justify-content-end{
        -ms-flex-pack: center!important;
        justify-content: center!important;
    }
    .justify-center{
        -ms-flex-pack: center!important;
        justify-content: center!important;   
        margin-bottom: 50px;
    }

    #sec-nuevanorma{
        height: auto;
    }

    #sec-homeoffice{
        height: auto;
    }

    #sec-gestionrrhh{
        height: auto;
    }

   
    

    .h-100{
        height: auto;
    }
    
    .banner{
        display: none;
    }

    .btn-enviar{
        margin-bottom: 30px;
    }

  }


  @media only screen and (max-width: 500px) {
    .icono-necesitas{
        display: none;
    }
    .listado-dolor > .mt-6{
        margin-top: 0px;
    }
  }


  
.font-sm{
    font-size: 12px;
    list-style: circle;
    padding: 0px;
    margin: 0px;
}

.bg-icono-solucion{
    background-color: #feba32;
    border-radius: 0px 0px 30px 30px;
    padding: 15px 0px;
}

.bg-trapecio-a{
    background-color: #feba32;
    clip-path: polygon(65% 0, 100% 0, 69% 99%, 30% 100%);
}

.bg-solucion{
    background-image: url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/fondo-solucion.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.nom-modulo{
    /* text-decoration-color: #feba32; */
    text-decoration-line: underline ;
}




























































  #sec-nuevanorma{
    height: 100vh;
  }

  #sec-homeoffice{
    height: 100vh;
  }


  #sec-gestionrrhh{
      height: 100vh;
  }


  #sec-035{
      height: 100vh;
  }



  .bg-light{
    background-color: #f8f7f7fd;
   }

   .bg-banner-01{
       background-image: url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/banner-01.jpg);
       background-repeat: no-repeat;
       background-size: cover;
   }

   .bg-banner-1{
       background-image:linear-gradient(to top,#00000063 , #00000070), url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/banner-01.jpg);
       background-size: cover;
       height: 100vh;
       background-repeat: no-repeat;
   }

   .bg-banner-2{
        background-image:linear-gradient(to top,#00000063 , #00000070), url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/banner-02.jpg);
        background-size: cover;
        height: 100vh;
        background-repeat: no-repeat;
        background-position-x: center;
   }

   .bg-banner-3{
        background-image:linear-gradient(to top,#00000063 , #00000070), url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/banner-03.jpg);
        background-size: cover;
        height: 100vh;
        background-repeat: no-repeat;
        background-position-x: right;
    }

    .bg-banner-4{
        background-image:linear-gradient(to top,#00000063 , #00000070), url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/banner-04.jpg);
        background-size: cover;
        height: 100vh;
        background-repeat: no-repeat;
        background-position-x: center;
    }

    .bg-banner-5{
        background-image:linear-gradient(to top,#00000063 , #00000070), url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/banner-05.jpg);
        background-size: cover;
        height: 100vh;
        background-repeat: no-repeat;
        background-position-x: center;
    }

    .bg-banner-6{
        background-image:linear-gradient(to top,#00000063 , #00000070), url(https://gmpsistemas.com/gmpteayuda/suitecovid/img/banner-06.jpg);
        background-size: cover;
        height: 100vh;
        background-repeat: no-repeat;
        background-position-x: center;
    }


    .icono-sc{
        color: #e6e2df;
    }


   .solucion-gmp1{
       cursor: pointer;
   }

   .sec-border{
       border: solid 3px #feba32;
       width: 500px;
       height: 260px;
       position: absolute;
       left: 30px;
       top: 10px;
       z-index: -1;
   }

   .about{
       color: #aaa4a4;
   }

   .border-amar{
    border-right: solid 3px #feba32;
   }

   .popup{
       cursor: pointer;
   }

   .modal-lg{
    width: 95% !important;
}

   @media (min-width: 992px){
    .modal-lg {
        max-width: 1600px;
    }
 

}



.modal-content {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0px;
}

.btn-descebo{
    border: solid 1px #ffffff;
    border-radius: 5px;
    width: 220px;
    padding: 3px;
    color: rgb(238, 238, 238);
    background-color: #4c62c2b9;
    height: 45px;
    opacity: .95;
}

.btn-descebo:hover{
    background-color: #4c62c2;
    color: whitesmoke;
    opacity: 1;
}


.btn-present{
    border: solid 1px #ffffff;
    border-radius: 5px;
    width: 220px;
    padding: 3px;
    color: rgb(238, 238, 238);
    background-color: #788141d2;
    height: 45px;
    opacity: .95;
}

.btn-present:hover{
    background-color: #788141;
    color: whitesmoke;
    opacity: 1;
}



[data-tooltip],
.tooltip {
  position: relative;
  cursor: pointer;
}

/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
  position: absolute;
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: 
      opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -moz-transition:    
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    transition:         
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform:    translate3d(0, 0, 0);
  transform:         translate3d(0, 0, 0);
  pointer-events: none;
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
  z-index: 1001;
  border: 6px solid transparent;
  background: transparent;
  content: "";
}

/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
  z-index: 1000;
  padding: 15px;
  width: 220px;
  background-color: #000;
  background-color: hsl(0, 0%, 98%);
  color: rgb(17, 17, 17);
  border: solid 3px #2469c2;
  content: attr(data-tooltip);
  font-size: 15px;
  text-align: center;
  line-height: 1.2;
  border-radius: 5px;
}

/* Directions */

/* Top (default) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after {
  bottom: 100%;
  left: 20%;
}

[data-tooltip]:before,
.tooltip:before,
.tooltip-top:before {
  margin-left: 25px;
  margin-bottom: -12px;
  border-top-color: #000;
  border-top-color: hsla(0, 0%, 20%, 0.9);
}

/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
  margin-left: -20px;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after {
  -webkit-transform: translateY(-12px);
  -moz-transform:    translateY(-12px);
  transform:         translateY(-12px); 
}

/* Left */
.tooltip-left:before,
.tooltip-left:after {
  right: 100%;
  bottom: 50%;
  left: auto;
}

.tooltip-left:before {
  margin-left: 0;
  margin-right: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-left-color: #000;
  border-left-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after {
  -webkit-transform: translateX(-12px);
  -moz-transform:    translateX(-12px);
  transform:         translateX(-12px); 
}

/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
  top: 100%;
  bottom: auto;
  left: 50%;
}

.tooltip-bottom:before {
  margin-top: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-bottom-color: #000;
  border-bottom-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
  -webkit-transform: translateY(12px);
  -moz-transform:    translateY(12px);
  transform:         translateY(12px); 
}

/* Right */
.tooltip-right:before,
.tooltip-right:after {
  bottom: 50%;
  left: 100%;
}

.tooltip-right:before {
  margin-bottom: 0;
  margin-left: -12px;
  border-top-color: transparent;
  border-right-color: #000;
  border-right-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after {
  -webkit-transform: translateX(12px);
  -moz-transform:    translateX(12px);
  transform:         translateX(12px); 
}

/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,
.tooltip-right:before {
  top: 3px;
}

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after {
  margin-left: 0;
  margin-bottom: -16px;
}

.pleft[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
  margin-left: -170px !important;
}

.tooltip:after,
[data-tooltip]:after {
z-index: 1000;
padding: 15px;
width: 220px;
background-color: #000;
background-color: hsl(0, 0%, 98%);
color: rgb(17, 17, 17);
border: solid 2px #2469c2;
content: attr(data-tooltip);
font-size: 15px;
text-align: center;
line-height: 1.2;
border-radius: 5px;
}