/* Página: Servicios -> Gabinete de protocolo */


    /* Calidad y satisfacción */

        main, .subbody{
            margin:0;
        }

        .area0bg{
            background:url('../../../../../resources/images/static/gabinete.jpg') no-repeat top right;
            background-size:cover;
            background-color:#FCFCFC;
            height:400px;
            color:#222;
        }

        .area0{
            padding:20px;
            width:100%;
            overflow:hidden;
            margin-bottom:0;
            margin-top:0;

        }

        .area0 h2{
            text-align:left;
            font-size: 2em;
            padding-bottom:0;
            color:#222;
        }

        .area0 p{
            text-align:left;
            font-size: 1.2em;
            padding-top:20px;
        }

        .area0 .text{
            display:inline-block;
            vertical-align:top;
            width:50%;
        }

        .area0 .image{
            display:inline-block;

        }

        .area0 .image img{

        }

    /* Gabinete de Protocolo */

        .area1bg{
            margin-top:0;
            display:table;
            width:100%;
            background:url('../../../../../resources/images/static/gabinete_de_protocolo.jpg') no-repeat center center;
            height:500px;
        }

        .area1bg .area1{
            padding:15px;
            display:table-cell;
            vertical-align:middle;
            background-color:rgba(0,0,0,0.6);
            padding:50px 50px;
            height:500px;
        }

        .area1bg .area1 h2{
            text-align:center;
            font-size: 2em;
            color:#fff;
        }

        .area1bg .area1 p{
            text-align:center;
            font-size:1.5em;
            color:#fff;
        }

        .area1bg .area1 hr{
            border: 0;
            border-top: 1px solid #fff;
            border-bottom: 1px solid #fff;
            margin:0 auto;
            width:80%;
        }

/* Frames */

    .area3{
        overflow:hidden;
        margin:0 auto;
        text-align:center;
        background:#f1f1f1;
        padding-top:30px;
    }

    .area3 .frame{
        box-sizing:content-box;
        border:1px solid #eee;
        display:inline-block;
        vertical-align:top;
        width:288px;
        margin:30px;
        background:#222;
        text-align:center;
        margin-bottom:50px;
    }

    .area3 .frame .image{
        padding-bottom:15px;
    }

    .area3 .frame .text{
        padding:20px;
        padding-top:0;
    }

    .area3 .frame .text h3{
        font-size:1.5em;
        color:#fff;
        padding-bottom:10px;
        font-weight:bold;
    }

    .area3 .frame .text p{
        line-height:1.5em;
        font-size:1em;
        text-align:left;
        color:#ddd;
        padding:0;
        margin:0;
    }


/* Ademas... */

    .area4bg{
        width:100%;
        background:url('../../../../../resources/images/static/ademas.jpg') no-repeat center center fixed;
        background-size:cover;
    }

    .area4{
        background-color:rgba(0,0,0,0.7);
        padding:50px 0px;
    }

    .area4 h2{
        text-align:center;
        font-size: 2.5em;
        color:#fff;
    }

    .area4 p{
        text-align:center;
        font-size:1.3em;
        color:#ccc;
        margin-bottom:80px;
    }

    .area4 .icons{
        width:100%;
        text-align:center;
    }

    .area4 .icons .section{
        display:inline-block;
        vertical-align:top;
        width:29%;
        text-align:center;
        margin-right:7px;
        margin-bottom:50px;
    }

    .area4 .icons .section .image{
        font-size:5em;
        color:#fff;
    }

    .area4 .icons .section .title{
        font-size:1.3em;
        color:#fff;
        padding:5px;
    }

    .area4 .icons .section .text{
        padding:5px;
        line-height:1.5em;
        font-size:1em;
        color:#ddd;
    }



@media all and (max-width :1200px) {

    /* Frames */
        .area3{width:965px;}
        .area3 .frame{margin:15px;}

}

@media all and (max-width :990px) {

    /* Calidad y Satisfacción */
    .area0 .text{ width:65%; }
    .area0 .image img{
        width:350px;
        height:auto;
    }

        /* Frames */
        .area3{width:100%;}
        .area3 .frame{margin:25px;}

}

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

    .area0bg{
        height:auto;
    }

    /* Calidad y satisfacción. */
        .area0 .image{
            width:100%;
            text-align:center;
        }

        .area0 .image img{
            width:auto;
        }

        .area0 .text{
            width:100%;
        }

    /* Frames */
        .area3 .frame{margin:15px;}


    /* Además... */
    .area4 .icons .section{
        width:39%;
    }

}

@media all and (max-width :700px) {

    /* Frames */
        .area3 .frame{margin:10px;}

}

@media all and (max-width :660px) {

    /* Frames */
        .area3 .frame{margin:5px;}

}

@media all and (max-width :640px) {

    /* Frames */
        .area3 .frame{
            width:220px;
            margin:15px;
        }

        .area3 .frame .image img{
            width:220px;
            height:auto;
        }

}

@media all and (max-width :550px) {

    /* Frames */
        .area3 .frame{
            width:200px;
        }

        .area3 .frame .image img{
            width:200px;
        }

}


@media all and (max-width :500px) {

    /* Calidad y satisfacción. */
        .area0 .image img{
            width:100%;
        }

    /* Frames */
        .area3 .frame{
            margin:5px;
        }

}

@media all and (max-width :480px) {

    main{margin:0 !important;}

    /* Calidad y satisfacción. */
        .area0{padding:15px;}
        .area0 h2{font-size: 1.8em;}


    /* Gabinete de Protocolo. */
        .area1{padding:15px;}
        .area1bg .area1 h2{font-size: 1.8em;}
        .area1bg .area1 p{
            font-size:1.1em;
            margin-bottom:60px;
        }

    /* Frames */
        .area3 .frame{
            max-width:288px;
            width:100%;
            height:auto;
            margin:0;
            margin-bottom:40px;
        }

        .area3 .frame .image img{
            max-width:288px;
            width:100%;
            height:auto;
        }

    /* Ademas */

    .area4 h2{
        font-size: 2em;
    }

    .area4 p{
        font-size:1.1em;
        margin-bottom:60px;
    }

    .area4 .icons .section .image{font-size:3em;}

    .area4 .icons .section .title{
        font-size:1em;
        padding:2px;
    }

    .area4 .icons .section .text{
        padding:2px;
        line-height:1.3em;
        font-size:0.9em;
    }

}