/*--- FUENTES ---*/
@font-face {
    font-family: Roboto-condensed-regular;
    src: url("fonts/ROBOTOCONDENSED-REGULAR.TTF");
}
@font-face {
    font-family: Roboto-condensed-light;
    src: url("fonts/ROBOTOCONDENSED-LIGHT.TTF");
}
@font-face {
    font-family: Roboto-condensed-bold;
    src: url("fonts/ROBOTOCONDENSED-BOLD.TTF");
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

/*------CABECERA------*/
header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 300;
    height: 70px;
}

@media screen and (max-width: 2000px) {
    #fondoMenu {
        float: right;
        height: 100%;
    }
    /*logo menu*/
    #logoPeque {
        height: 70%;
        margin-left: 1%;
        position: relative;
        top: 14px;
        float: left;
    }
    /*menu*/
    #menu {
        float: right;
        height: 100%;
        width: 100%;
        z-index: 400;
        position: absolute;
    }
    #menuNormal{
        height: 100%;
        float: right;
        text-align: right;
        background-color: #000000;
        margin: 0;
    }

    #menu li {
        width: 25%;
        display: inline;
        font-family: Roboto-condensed-regular;
        cursor: pointer;
        color: #ffffff;
        padding: 0px 20px;
        position: relative;
        top: 33%;
    }
    #menu li:hover {
        font-family: Roboto-condensed-regular;
        text-decoration: underline;
    }

    /*menu de botón*/
    #menuMovil img {
        height: 100%;
    }
    #menuMovil {
        display: none;
        height: 100%;
        text-align: right;
    }
    #desplegableMenu {
        display: none;
        background-color: #000000;
        color: white;
        font-family: Roboto-condensed-regular;
        width: 100%;
    }
    #desplegableMenu ul {
        margin: 0;
        overflow: hidden;
        padding: 0;
        text-align: right;
    }
    #desplegableMenu li{
        width: 100%;
        float: left;
        background-color: #000000;
        padding: 0;
        margin-left: -10px;
    }
}
@media screen and (max-width: 1100px) {
    #fondoMenu {
        height: 70%;
    }
    #menu {
        height: 70%;
    }
}
@media screen and (max-width: 700px) {
    #fondoMenu {
        display: none;
    }
    #logoPeque {
        display: block;
    }
    #menu {
        background-color: #000000;
    }
    #menuNormal {
        display: none;
    }
    #menuMovil {
        display: block;
    }
}

@media screen and (max-width: 2000px) {
    /*logo*/
    #divTop {
        width: 100%;
        float: left;
        position: relative;
        z-index: 100;
    }

    #divTop img {
        width: 100%;
    }
}

/*fondo*/
#fondo {
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
}
#triangulo {
    width: 0;
    height: 0;
}

/*--- PÁGINA 1 ---*/
#pag1 {
    width: 100%;
    position: relative;
    overflow: hidden;
}

@media screen and (max-width: 2000px) {
    #contenidoPag1 {
        margin-top: 5%;
        margin-bottom: 18%;
        position: relative;
        overflow: hidden;

    }

    /*imagen*/
    #imgPag1 {
        width: 50%;
        float: left;
        text-align: center;
    }

    #imgPag1 img {
        width: 450px;
    }

    /*texto*/
    #textoPag1 {
        width: 50%;
        float: left;
    }

    #textoPag1 ul {
        width: 90%;
    }

    #textoPag1 li {
        font-family: Roboto-condensed-light;
        font-size: 20pt;
        margin-top: 5%;
    }
    #textoPag1 li p {
        font-family: Roboto-condensed-bold;
        display: inline;
    }
}
@media screen and (max-width: 1700px) {
    #contenidoPag1 {
        margin-top: 7%;
    }
}
@media screen and (max-width: 1500px) {
    #contenidoPag1 {
        margin-bottom: 22%;
    }
    #imgPag1 img {
        width: 400px;
    }
    #textoPag1 ul {
        width: 70%;
    }
}
@media screen and (max-width: 1200px) {
    #contenidoPag1 {
        margin-top: 10%;
        margin-bottom: 24%;
    }
    #imgPag1 img {
        width: 350px;
    }
}
@media screen and (max-width: 800px) {
    #textoPag1 ul {
        width: 85%;
    }
}
@media screen and (max-width: 700px) {
    #imgPag1 {
        display: none;
    }
    #textoPag1 {
        width: 100%;
        margin-left: 10%;
    }
}
@media screen and (max-width: 600px) {
    #textoPag1 li {
        font-size: 16pt;
    }
}
@media screen and (max-width: 500px) {
    #textoPag1 li {
        font-size: 14pt;
    }
}

/*--- PÁGINA 2 ---*/
#pag2 {
    width: 100%;
    background-color: #85acb4;
    position: relative;
}
@media screen and (max-width: 2000px) {
    /*imagen de los iconos*/
    #pag2 img {
        width: 100%;
        position: relative;
        top: -244.2px;
    }

    /*textos*/
    #textosPag2 {
        width: 80%;
        overflow: hidden;
        margin: auto;
        position: relative;
        top: -244.2px;
    }
    .textoPag2 {
        width: 23%;
        float: left;
        margin-left: 8%;
        margin-right: 2%;
    }
    .textoPag2 h1 {
        text-align: center;
        font-family: Roboto-condensed-regular;
        color: #33515e;
        font-size: 35pt;
    }
    .textoPag2 p {
        font-family: Roboto-condensed-regular;
        font-size: 20pt;
        color: white;
        width: 80%;
        margin: auto;
        text-align: justify;
    }
}
@media screen and (max-width: 1754px) {
    #pag2 img {
        top: -207px;
    }
    #textosPag2 {
        top: -207px;
    }
}
@media screen and (max-width: 1500px) {
    #pag2 img {
        top: -175px;
    }
    #textosPag2 {
        top: -175px;
    }
}
@media screen and (max-width: 1270px) {
    #pag2 img {
        top: -151px;
    }
    #textosPag2 {
        top: -151px;
    }
}
@media screen and (max-width: 1094px) {
    #pag2 img {
        top: -128px;
    }
    #textosPag2 {
        top: -128px;
    }
}
@media screen and (max-width: 930px) {
    #pag2 img {
        top: -110px;
    }
    #textosPag2 {
        top: -110px;
    }
}
@media screen and (max-width: 800px) {
    #pag2 img {
        top: -93px;
    }
    #textosPag2 {
        top: -93px;
    }
}
@media screen and (max-width: 680px) {
    #pag2 img {
        top: -79px;
    }
    #textosPag2 {
        top: -79px;
    }
}
@media screen and (max-width: 580px) {
    #pag2 img {
        top: -67px;
    }
    #textosPag2 {
        top: -67px;
    }
}


@media screen and (max-width: 1100px) {
    .textoPag2 {
        width: 27%;
        margin-left: 4%;
    }
}
@media screen and (max-width: 950px) {
    .textoPag2 h1 {
        font-size: 30pt;
    }
    .textoPag2 p {
         font-size: 17pt;
     }
}
@media screen and (max-width: 820px) {
    #textosPag2 {
        width: 90%;
    }
    .textoPag2 h1 {
        font-size: 25pt;
    }
}
@media screen and (max-width: 620px) {
    #textosPag2 {
        width: 95%;
    }
    .textoPag2 h1 {
        font-size: 20pt;
    }
    .textoPag2 p {
        font-size: 14pt;
    }
}


/*--- PÁGINA 3 ---*/
#pag3 {
    width: 100%;

}
@media screen and (max-width: 2000px) {
    /*imagen*/
    #pag3 img {
        width: 100%;
        position: relative;
        top: -42.4px;
    }
}
@media screen and (max-width: 1200px) {
    #pag3 img {
        top: -17px;
    }
}
/*rectangulos*/
#rectangulos {
    width: 100%;
}
.rectangulo {
    width: 70%;
    margin: auto;
    padding-top: 2%;
}

/*--- PIE ---*/
#pie {
    width: 100%;
}
#pie img {
    width: 100%;
}