/*  
Client: DESARROLLOS INTEGRALES OPERATIVOS Y DE SERVICIOS
Client URL: http://desarrollosintegrales.com.mx
Description: Somos un staff de profesionales que cuentan con más de 30 años de experiencia en Recursos Humanos, basados en sus  valores, ofrecen al mercado sus servicios que coadyuvan a una administración eficaz del talento humano.
Version: 2.0
Autor: deparojo
Autor URL: http://deparojo.com
*/


@media only screen and (max-width: 960px) {
    header section,
    .alianzas div,
    footer section {
        width: 100%;
    }
    
    hr,
    .inicio p {
        width: 90%;
    }
    
    header section {
        padding-right: 20px;
        padding-left: 20px;
    }
    
    .principios p,
    .principios .tabbody div,
    .alianzas div {
        width: 95%;
    }
    
    .alianzas div {
        width: 600px;
    }
    
    .alianzas .alianza6 {
        margin: -105px 0 0 165px;
    }
    
    .alianzas .alianza7,
    .alianzas .alianza8 {
        margin: -105px 0 0 -15px;
    }
    
    .alianzas .alianza8 {
        margin-left: 110px;
    }
}


@media only screen and (max-width: 880px) {
    header nav li {
        width: 110px;
        font-size: .9em;
    }
    
    header nav a.doslineas {
        padding-top: 8px;
    }
}


@media only screen and (max-width: 810px) {
    .principios .tabbody div {
        height: auto;
        padding-bottom: 40px;
    }
}


@media only screen and (max-width: 768px) {
    .diagnosticos,
    .modelos,
    .estudios,
    .gestion {
        width: 100%;
        height: auto;
    }
    
    .modelos section,
    .gestion section {
        width: 100%;
        margin: 25px 0;
    }
}


@media only screen and (max-width: 767px) {
    header nav {
        display: none;
    }
    
    header nav.movil {
        display: block;
        font-size: 1.15em;
    }
    
    header nav.movil a,
    header nav.movil a.doslineas {
        padding: 15px 0 13px 0;
        border-bottom: 0;
    }
    
    header nav.movil a#movil {
        font-style: normal;
        background: none;
    }
    
    header nav.movil a#movil:hover {
        color: #f9a61a;
    }
    
    header nav.movil ul,
    header nav.movil li {
        width: 100%;
    }
    
    header nav.movil ul {
        position: absolute;
        left: 0;
        margin-top: 47px;
        background: #f7f7f7;
    }
    
    header nav.movil li {
        float: none;
    }
    
    .modelos section,
    .gestion section {
        padding-left: 16%;
    }
}


@media only screen and (max-width: 720px) {
    .diagnosticos section {
        width: 450px;
        margin: 30px auto;
    }
    
    .diagnosticos .diagnostico3 {
        margin-left: -50px;
    }
    
    .diagnosticos .diagnostico4,
    .diagnosticos .diagnostico5 {
        margin: -60px 0 0 133px;
    }
    
    .diagnosticos .diagnostico5 {
        margin-left: 12px;
    }
    
    .diagnosticos .diagnostico6 {
        margin: -60px 0 0 133px;
    }

    .diagnosticos .diagnostico7 {
        margin: -227px 0 0 257px;
    }
    
    .estudios div {
        width: 230px;
        float: none;
        margin: 20px auto;
    }
}


@media only screen and (max-width: 660px) {
    h1 {
        font-size: 2em;
    }
    
    .principios ul li {
        margin-right: 25px;
        margin-left: 25px;
        font-size: 1.5em;
    }
    
    .contacto .info {
        width: 90%;
    }
    
    .contacto form {
        width: 40%;
    }
}


@media only screen and (max-width: 599px) {
    .diagnosticos h1,
    .modelos h1,
    .estudios h1,
    .gestion h1 {
        font-size: 1.5em;
    }
    
    .alianzas h2 {
        width: 180px;
        height: 140px;
        padding: 0 40px;
        font-size: .875em;
    }
    
    .alianzas div {
        width: 287px;
        font-size: .875em;
    }
    
    .alianzas .alianza2,
    .alianzas .alianza3,
    .alianzas .alianza4,
    .alianzas .alianza5,
    .alianzas .alianza6,
    .alianzas .alianza7,
    .alianzas .alianza8 {
        margin: -70px 0 0 115px;
    }
    
    .alianzas .alianza3,
    .alianzas .alianza5,
    .alianzas .alianza7 {
        margin-left: -15px;
    }
}


@media only screen and (max-width: 560px) {
    .inicio img {
        width: 80%;
    }
    
    .principios h3 {
        width: 140px;
        height: 35px;
        margin: 0 0 10px 0;
        padding-top: 12px;
        font-size: .75em;
    }

    .principios h3.doslineas {
        padding-top: 6px;
    }
    
    .alianzas,
    .servicios,
    .contacto {
        height: auto;
        padding-top: 180px;
        padding-bottom: 20px;
    }
    
    .contacto form,
    .contacto .info div {
        width: 100%;
        float: none;
    }
}


@media only screen and (max-width: 480px) {
    h1 {
        font-size: 1.3em;
    }
    
    hr,
    .inicio p,
    .principios p,
    .principios .tabbody div,
    footer section {
        font-size: .875em;
    }
    
    article,
    footer section {
        border-bottom: 10px solid #f9a61a;
    }
    
    header section {
        border-top: 10px solid #f9a61a;
    }
    
    .inicio img {
        margin-top: 75px;
    }
    
    .inicio h2 {
        font-size: 1.65em;
    }
    
    .principios ul li {
        margin-right: 10px;
        margin-left: 10px;
        font-size: 1em;
    }
    
    .principios .tabbody div {
        padding: 25px 0 15px 0;
    }
    
    .diagnosticos h1,
    .modelos h1,
    .estudios h1,
    .gestion h1 {
        font-size: 1.25em;
    }
    
    .diagnosticos h2 {
        width: 175px;
        height: 135px;
        padding: 0 30px;
    }
    
    .diagnosticos section {
        width: 287px;
    }
    
    .diagnosticos .diagnostico1,
    .diagnosticos .diagnostico4,
    .diagnosticos .diagnostico6 {
        margin: 85px 0 0 -5px;
    }
    
    .diagnosticos .diagnostico2,
    .diagnosticos .diagnostico3,
    .diagnosticos .diagnostico5,
    .diagnosticos .diagnostico7 {
        margin: -220px 0 0 110px;
    }
    
    .diagnosticos .diagnostico3,
    .diagnosticos .diagnostico4,
    .diagnosticos .diagnostico5,
    .diagnosticos .diagnostico6,
    .diagnosticos .diagnostico7 {
        margin-top: -50px;
    }
    
    .modelos section,
    .gestion section {
        padding-left: 15%;
    }
}


@media only screen and (max-width: 320px) {
    .modelos section,
    .gestion section {
        padding-left: 9%;
    }
}