@font-face {
    font-family: "Avenir";
    src: url("../fonts/AvenirLTStd-Light.otf");
}

@font-face {
    font-family: "Avenirb";
    src: url("../fonts/AvenirLTStd-Black.otf");
}

.estudiante img {
    display: none;
}

.empresa img {
    display: none;
}

h1,
h2,
h3 {
    font-family: "Avenirb";
}

html {
    font-family: "Avenir";
}

body {
    overflow-x: hidden;
    margin: 0;
}

span {
    font-family: "Avenirb";
}

.topheader {
    background-image: url("../images/fondonav.png");
    background-size: 100%;
    height: 12.4vw;
}

.logoheader {
    width: 35%;
    height: 12.4vw;
    float: left;
}

.logoheader img {
    width: 75%;
    margin-left: 17%;
    margin-top: 3vw;
}

.nav {
    width: 63%;
    margin-left: 35%;
}

.nav ul {
    list-style: none;
    text-align: right;
}

.nav ul li {
    display: inline-flex;
    width: 23%;
    margin-top: 3vw;
}

.nav ul li:hover {
    cursor: pointer;
}

.nav ul li:hover>h5 {
    color: #fff;
}

.margen {
    border-right: solid 3px #FCB809;
    height: 5.5vw;
}

.nav ul li h5 {
    color: #3B444A;
    padding-left: 3vw;
    font-size: 1.5vw;
}

.nav ul li img {
    width: 3vw;
    height: 3vw;
    margin-top: 1vw;
    margin-right: -2vw;
    position: relative;
    top: 1vw;
}

.liimg {
    margin-top: 2.6vw;
}

.header {
    background-image: url("../images/fondoheader.png");
    background-size: 100%;
    margin-top: -4.5vw;
}

.doscol {
    margin-top: 0vw;
    position: relative;
    top: 10vw;
    width: 100%;
    height: 51.8vw;
}

.coldos1 {
    width: 60%;
    float: left;
    margin-left: -30%;
    text-align: center;
}

.coldos1 h3 {
    color: #FCB809;
    font-size: 4vw;
}

.coldos1 h3 span {
    color: #8C9092;
    font-weight: 900;
}

.coldos1 p {
    color: #FCB809;
    font-weight: 900;
    font-size: 2vw;
    width: 80%;
    margin-left: 10%;
}

.coldos1 p span {
    font-weight: 900;
}

.coldos2 {
    width: 30%;
    float: left;
}

.coldos2 img {
    margin-top: 10vw;
    width: 17vw;
    ;
}

.empresas {
    background-image: url("../images/fondocomputadora.png");
    background-size: 100%;
    margin-top: -8vw;
    height: 35.6vw;
}

#laptop {
    margin-top: -14vw;
    margin-left: 9vw;
    width: 43.9vw;
}

#textoempresas {
    margin-left: 57vw;
    margin-top: 2vw;
    width: 65%;
    color: #8C9092;
}

.funciona {
    background-image: url("../images/fondofunciona.png");
    background-size: 100%;
    margin-top: -6vw;
    height: 51.7vw;
}

.funciona h1 {
    margin-top: 1vw;
    position: relative;
    top: 9vw;
    text-align: center;
    font-size: 5vw;
    color: #3A4349;
}

.cuatrocol {
    margin-top: 15vw;
    padding: 0 14vw;
}

.colcuatro {
    width: 24%;
    float: left;
    text-align: center;
}

.colcuatro p {
    font-size: 1.5vw;
}

.cotizador {
    background-image: url("../images/fondocotizador.png");
    background-size: 100%;
    margin-top: -8vw;
    height: 58vw;
    text-align: center;
}

.contenedorcotizador h2 {
    position: relative;
    top: 12vw;
    width: 80%;
    margin-left: 10%;
    font-size: 4vw;
    color: #FCB809;
}

.contenedorcotizador h4 {
    margin-top: 15vw;
    font-size: 3vw;
    color: #FCB809;
}

.formularipcp input {
    width: 40vw;
    height: 4vw;
    font-size: 2vw;
    background-color: #FCB809;
}

#botonbusca {
    width: 4vw;
    margin-left: 2vw;
    background-image: url("../images/iconos/iconobusca.png");
    background-size: cover;
}

.descarga {
    background-color: #919496;
    height: 18vw;
}

.doscol2 {
    width: 100%;
    float: left;
}

.coldos3 {
    text-align: center;
    width: 50%;
    float: left;
}

.coldos3 h3 {
    color: #3B444A;
    font-size: 2.5vw;
}

.doscol22 {
    width: 70%;
    float: left;
    margin-left: 15%;
}

.coldos3 img {
    width: 100%;
}

.coldos32 {
    width: 50%;
    float: left;
}

.trescol {
    width: 60%;
    margin-left: 20%;
}

.trescol3 {
    width: 30%;
    float: left;
}

.trescol3 img {
    width: 60%;
    margin-left: 30%;
}

.video {
    width: 100%;
}

.video iframe {
    width: 100%;
    height: 45vw;
}

.video img {
    position: relative;
    top: -42vw;
    width: 20vw;
    left: 76vw;
}

.estudiante {
    background-image: url("../images/fondoestudiante.png");
    background-size: 100%;
    margin-top: -6vw;
    height: 56.4vw;
}

.estudiante h3 {
    position: relative;
    left: 59%;
    width: 35%;
    top: 10vw;
    font-size: 3vw;
    margin: 0;
    color: #FCB809;
}

.estudiante h4 {
    position: relative;
    left: 66%;
    width: 30%;
    top: 11vw;
    font-size: 2.5vw;
    margin: 0;
    color: #FCB809;
}

.estudiante ul {
    list-style: none;
    position: relative;
    left: 54%;
    width: 35%;
    top: 14vw;
    font-size: 2vw;
    margin: 0;
    color: #ffffff;
    text-align: center;
}

.empresa {
    background-image: url("../images/fondonecesitas.png");
    background-size: 100%;
    margin-top: -15vw;
    height: 56.4vw;
}

.containerempresa {
    width: 50%;
    margin-left: 10%;
    position: relative;
    top: 20vw;
    text-align: center;
}

.containerempresa h3 {
    font-size: 3vw;
    margin: 0;
    color: #FCB809;
    margin-top: 3vw;
}

.containerempresa h4 {
    font-size: 2.5vw;
    margin: 0;
    color: #FCB809;
    margin-top: 3vw;
}

.containerempresa ul {
    font-size: 2vw;
    margin: 0;
    color: #ffffff;
    text-align: center;
    margin-top: 2vw;
    list-style: none;
}

.testimonio {
    width: 100%;
    height: 43vw;
}

.doscol3 {
    width: 100%;
}

.coldos4 {
    width: 65%;
    float: left;
}

.coldos4 img {
    width: 100%;
}

.coldos5 {
    width: 35%;
    float: left;
    background-color: #FCB809;
    height: 43vw;
    text-align: center;
    color: #3B444A;
}

.coldos5 h3 {
    margin-top: 5vw;
    font-size: 3vw;
    width: 90%;
    margin-left: 5%;
}

.coldos5 p {
    margin-top: 3vw;
    font-size: 1.8vw;
    width: 90%;
    margin-left: 5%;
}

.iniciosesion {
    background-image: url("../images/fondosesion.png");
    background-size: 100%;
    margin-top: -5vw;
    height: 55vw;
}

.containersesion {
    width: 70%;
    position: relative;
    top: 3vw;
    margin-left: 15%;
    text-align: center;
    color: #394248;
}

.containersesion h2 {
    position: relative;
    left: -31vw;
    font-size: 3.5vw;
    margin-top: 0;
    width: 125%;
}

.formulariosesion {
    text-align: left;
    width: 80%;
    margin-left: 10%;
    font-size: 2vw;
}

.formulariosesion label {
    margin-right: 2vw;
}

.formulariosesion [type="radio"] {
    width: 2vw;
    height: 2vw;
    background-color: #FCB809;
    margin-right: 5vw;
}

.formulariosesion input {
    width: 100%;
    height: 2vw;
    font-size: 1.5vw;
    background-color: #FCB809;
    color: #fff;
    padding-left: 1vw;
}

.formulariosesion [type="submit"] {
    width: 30%;
    margin-left: 35%;
    color: #FCB809;
    background-color: #394248;
}

.formulariosesion [type="submit"]:hover {
    background-color: #FCB809;
    color: #394248;
    cursor: pointer;
}

.containersesion h3 {
    font-family: "Avenir";
    font-size: 2vw;
}

.containersesion a {
    font-family: "Avenirb";
}

.registrate {
    background-image: url("../images/fondoregistrate.png");
    background-size: 100%;
    margin-top: -2vw;
    height: 82.8vw;
}

.containerregistro {
    width: 80%;
    margin-left: 10%;
    position: relative;
    top: 6vw;
    text-align: center;
    font-size: 3vw;
    color: #8B8F91;
}

.containerregistro h2 {
    margin-top: 0;
    font-size: 3.5vw;
}

.formularioregistro {
    text-align: left;
    width: 80%;
    margin-left: 10%;
    font-size: 2vw;
}

.formularioregistro label {
    margin-right: 2vw;
}

#labelconfirma {
    margin-left: 9.5vw;
}

.formularioregistro [type="radio"] {
    width: 2vw;
    height: 2vw;
    background-color: #FCB809;
    margin-right: 5vw;
}

.formularioregistro [type="submit"]:hover {
    color: #8B8F91;
    background-color: #FCB809;
    cursor: pointer;
}

.formularioregistro input {
    width: 90%;
    height: 2vw;
    font-size: 1.5vw;
    background-color: #FCB809;
    color: #fff;
    padding-left: 1vw;
    margin-bottom: 1vw;
    margin-top: 1vw;
}

#confirmacontraseña {
    width: 40%;
    margin-left: 3vw;
}

#contraseña {
    width: 40%;
}

#labelnombre {
    margin-right: 22vw;
}

#nombre {
    width: 40%;
}

#apellidos {
    width: 40%;
    margin-left: 2.5vw;
}

.formularioregistro p {
    width: 80%;
    margin-left: 10%;
    font-size: 2.5vw;
    text-align: center;
}

.formularioregistro [type="submit"] {
    width: 30%;
    margin-left: 35%;
    color: #FCB809;
    background-color: #8B8F91;
}

footer {
    background-color: #FCB809;
    color: #3B444A;
    height: 7vw;
}

footer .doscol2 .coldos3 h4 {
    margin-top: 3vw;
    font-size: 1.5vw;
}

.popuplogin {
    display: none;
    width: 80%;
    margin-left: 10%;
    position: fixed;
    top: 5vw;
    left: 0;
    transition: 1s;
}

.popuplogin .iniciosesion {
    height: 50vw;
    margin-top: -8vw;
}

.popuplogin .containersesion {
    width: 90%;
    margin-left: 10%;
}

.popuplogin .containersesion h2 {
    font-size: 4vw;
    margin-bottom: 1vw;
}

.popuplogin .formulariosesion {
    font-size: 2vw;
}

.botoncerrar {
    position: fixed;
    top: 5vw;
    left: 77vw;
    color: #fff;
    font-size: 2vw;
    font-weight: bold;
    z-index: 999999999;
}

.botoncerrar:hover {
    color: #ff0000;
    cursor: pointer;
}

.imgperfil {
    border-radius: 100%;
}

.iniciasesionheader {
    color: #fff !important;
}

.iniciasesionheader:hover {
    color: #3B444A !important;
}

.registrateheader {
    color: #fff !important;
}

.registrateheader:hover {
    color: #3B444A !important;
}


/*     COMIENZA RESPONSIVO CELULAR     */

@media (max-width: 600px) {
    .topheader {
        background-image: none;
        background-color: #909496;
        padding-top: 1vw;
        padding-bottom: 1vw;
    }
    .header {
        margin-top: 0;
        background-color: #3B4349;
        background-image: none;
        height: 102vw;
        margin-top: 27vw;
    }
    .empresas {
        margin-top: 0;
        background-image: none;
        background-color: #FCBA09;
        padding-top: 6vw;
        height: 65vw;
    }
    #empresaheader,
    #estudianteheader {
        color: #fff !important;
    }
    .funciona {
        margin-top: -1vw;
        background-image: none;
        background-color: #999999;
        height: 235vw;
    }
    .descarga {
        margin-top: -2vw;
        height: 110vw;
    }
    .estudiante {
        margin-top: -7vw;
        background-image: none;
        background-color: #3B4349;
        height: 140vw;
    }
    .estudiante img {
        width: 70%;
        margin-top: 21vw;
        margin-left: 15%;
    }
    .empresa {
        background-image: none;
        background-color: #2E3338;
        height: 140vw;
    }
    .empresa img {
        width: 70%;
        margin-left: 15%;
        margin-top: 27vw;
    }
    .testimonio {
        background-color: #FCB809;
    }
    .coldos4 {
        position: relative;
        top: 100vw;
    }
    .nav {
        display: block;
        width: 100%;
        margin-left: 0;
        background-image: url(../images/fondoheaderm.png);
        background-size: 100%;
        height: 35vw;
        margin-top: 15vw;
    }
    .topheader {
        /*background-image: url(../images/fondonavm.png);*/
        background-size: 100%;
    }
    .nav ul {
        padding: 0;
    }
    .nav ul li {
        width: 45%;
        margin-top: 3vw;
    }
    .nav ul li img {
        width: 7vw;
        height: 7vw;
    }
    .nav ul li h5 {
        font-size: 5vw;
        margin: 4vw 0 0 2vw;
        color: #FCB809 !important;
    }
    .registrateheader {
        color: #FCB809;
    }
    .iniciasesionheader {
        color: #FCB809;
    }
    .logoheader {
        width: 100%;
        height: 17.5;
        float: none;
        margin-left: 0%;
    }
    .logoheader img {
        margin-left: 12.5%;
        margin-top: 8vw;
    }
    .topheader {
        height: 30vw;
    }
    .coldos1 {
        width: 100%;
        float: none;
        margin-left: 0;
    }
    .coldos1 h3 {
        font-size: 9vw;
    }
    .coldos1 p {
        font-size: 4.5vw;
        width: 90%;
        margin-left: 5%;
    }
    .coldos2 {
        width: 100%;
        float: none;
        text-align: center;
    }
    .coldos2 img {
        margin-top: -4vw;
        width: 25vw;
    }
    #textoempresas {
        margin-left: 0;
        margin-top: 2vw;
        width: 100%;
    }
    .colcuatro {
        width: 80%;
        margin-left: 10%;
        float: none;
        margin-bottom: 5vw;
    }
    .colcuatro p {
        font-size: 4vw;
    }
    .colcuatro img {
        width: 45%;
        margin-left: 15%;
    }
    .contenedorcotizador h2 {
        font-size: 10vw;
        margin: 0;
        width: 90%;
        margin-left: 5%;
    }
    .contenedorcotizador h4 {
        font-size: 7vw;
    }
    .formularipcp input {
        width: 60vw;
        height: 6vw;
        font-size: 4vw;
    }
    #botonbusca {
        width: 8vw;
        height: 8vw;
        background-size: 100%;
        position: relative;
        top: 2vw;
    }
    .coldos3 {
        width: 100%;
    }
    .coldos3 h3 {
        font-size: 5vw;
    }
    .estudiante h3 {
        left: 5%;
        width: 95%;
        font-size: 8vw;
    }
    .estudiante h4 {
        left: 15%;
        width: 85%;
        font-size: 7vw;
    }
    .estudiante ul {
        left: 10%;
        width: 75%;
        font-size: 4.7vw;
    }
    .empresa h3 {
        left: 5%;
        width: 95%;
        font-size: 8vw;
    }
    .empresa h4 {
        left: 15%;
        width: 85%;
        font-size: 7vw;
    }
    .containerempresa ul {
        left: 10%;
        width: 75%;
        font-size: 5vw;
    }
    .containerempresa {
        width: 100%;
        margin-left: 0;
    }
    .testimonio {
        height: 167vw;
    }
    .coldos4 {
        width: 100%;
        float: none;
    }
    .coldos5 {
        width: 100%;
        float: none;
        height: 65vw;
        margin-top: -66vw;
        padding-top: 6vw;
    }
    .coldos5 h3 {
        font-size: 8vw;
    }
    .coldos5 p {
        font-size: 5.3vw;
    }
    .iniciosesion {
        height: 130vw;
        padding-top: 5vw;
        background-image: none;
        background-color: #919496;
    }
    #botonsubmit {
        height: 8vw;
    }
    .containersesion {
        width: 90%;
        margin-left: 5%;
    }
    .containersesion h2 {
        top: 3vw;
        font-size: 8vw;
        left: -23vw;
    }
    .cotizador {
        background-image: url(../images/fondocotizadorm.png);
        height: 150vw;
    }
    .contenedorcotizador {
        padding-top: 37vw;
    }
    .formulariosesion {
        width: 100%;
        margin-left: 0;
        font-size: 5.5vw;
    }
    .formulariosesion input {
        height: 4vw;
        font-size: 3.5vw;
    }
    .formulariosesion input {
        height: 6vw;
        font-size: 5.5vw;
    }
    .formulariosesion [type="radio"] {
        width: 4vw;
        height: 4vw;
    }
    .containersesion h3 {
        font-size: 5vw;
    }
    .containerregistro h2 {
        font-size: 8vw;
    }
    .containerregistro {
        width: 100%;
        margin-left: 0%;
    }
    .formularioregistro {
        font-size: 5.5vw;
    }
    #labelnombre {
        margin-right: 17vw;
    }
    .formularioregistro br {
        display: none;
    }
    .formularioregistro [type="radio"] {
        width: 4vw;
        height: 4vw;
    }
    .contraseñasmobile {
        height: 37vw;
    }
    .formularioregistro input {
        height: 6vw;
        font-size: 5.5vw;
    }
    .formularioregistro {
        width: 95%;
        margin-left: 5%;
    }
    .formularioregistro p {
        font-size: 3.5vw;
    }
    .formularioregistro input[type="submit"] {
        height: 5vw;
    }
    .registrate {
        height: 215vw;
    }
    .formularioregistro p {
        font-size: 6vw;
        width: 100%;
        margin-left: -3%;
    }
    footer {
        height: 21vw;
    }
    footer .doscol2 .coldos3 h4 {
        font-size: 5vw;
    }
    #laptop {
        position: relative;
        top: 35vw;
        width: 50vw;
    }
    #textoempresas {
        position: relative;
        top: -27vw;
    }
    #labelconfirma {
        position: absolute;
        left: 16vw;
        top: 96vw;
    }
    #confirmacontraseña {
        position: absolute;
        top: 103vw;
        left: 4vw;
    }
    .coldos32 {
        width: 100%;
    }
    .funciona h1 {
        font-size: 9vw;
    }
    .coldos3 h4 {
        margin-top: 3vw;
        margin-bottom: 0;
    }
    .registrate {
        background-image: none;
        background-color: #2E3338;
    }
    .estudiante img {
        display: block;
    }
    .empresa img {
        display: block;
    }
    #contraseña {
        width: 90%;
    }
    #labelconfirma {
        margin-left: -11.5vw;
    }
    #confirmacontraseña {
        left: 2vw;
        width: 86%;
        margin-left: 3vw;
    }
}


/*     TERMINA RESPONSIVO CELULAR      */


/*     INICIA RESPONSIVO TABLET     */

@media (min-width:601px) and (max-width: 1050px) {
    .colcuatro img {
        width: 70%;
    }
    .colcuatro br {
        display: none;
    }
}


/*     TERMINA RESPONSIVO TABLET     */