/* Página: Servicios -> Azafatas de congresos */


    /* Pioneros en el servicio */

        main, .subbody{
            margin:0;
        }

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

        .area0{
            padding:20px;
            width:100%;
            overflow:hidden;
            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%;
        }

    /* Servicio de Azafatas de Congresos */

        .area1{
            padding:15px;
            background:#eee;
            border-bottom: 2px solid #ddd;
        }

        .area1 h2{
            text-align:left;
            font-size: 2.1em;
            padding-bottom:0;
        }

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

        .area1 .image{
            display:inline-block;
            float:right;
            margin-bottom:30px;
            margin-top:10px;
        }

        .area1 .image img{
            border:2px solid #ddd;
        }

/* Un equipo cualificado */

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

    .area2bg .area2{
        display:table-cell;
        vertical-align:middle;
        background-color:rgba(0,0,0,0.4);
        padding:50px 100px;
        height:500px;
    }

    .area2bg .area2 h2{
        text-align:center;
        font-size: 2.2em;
        color:#fff;
    }

    .area2bg .area2 p{
        text-align:center;
        font-size:1.5em;
        color:#fff;

    }

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

/* Frames */

    .area3{
        overflow:hidden;
        margin:30px auto;
        text-align:center;
    }

    .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) {

    /* Pioneros en servicio */
        .area0 .text{ width:55%; }

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

}

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


    .area0bg{
        height:350px;
    }

    /* Pioneros en el servicio */
        .area0 .text{ width:85%; }

        .area0 .image img{
            width:350px;
            height:auto;
        }


    /* Servicio de Azafatas de Congresos */
        .area1 .image{
            margin-bottom:0px;
        }


    /* Un equipo cualificado */
        .area2bg .area2 p{
            font-size:1.4em;
        }

        .area2bg .area2{
            padding:25px 50px;
        }

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

}

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

    /* Pioneros en el servicio */
        .area0bg{
            background-size:cover;
            background-position:left;
            height:auto;
        }

        .area0{
            background-color:rgba(255,255,255,0.3);
        }

        .area0 .image{
            width:100%;
            text-align:center;
        }

        .area0 .image img{
            width:auto;
        }

        .area0 .text{
            width:100%;
        }


    /* Un equipo cualificado */
        .area2bg .area2 p{
            font-size:1.3em;
        }

        .area2bg .area2{
            padding:25px 50px;
        }

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


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

}

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

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

}

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

    /* Servicio de Azafatas de Congresos */
        .area1 .image{
            float:none;
            text-align:center;
            width:100%;
        }

        .area1 .image img{
            width:80%;
            height:auto;
        }


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

}

@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) {

    /* Servicio de Azafatas de Congresos */
        .area1 .image img{
            width:90%;
        }

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

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


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

    /* Pioneros en el servicio */
        .area0 .image img{
            width:100%;
        }

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

}

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

    /* Servicio de Azafatas de Congresos */
        .area1 .image img{
            width:100%;
        }

    main{margin:0 !important;}

    /* Pioneros en servicio */
        .area0{padding:15px;}
        .area0 h2{font-size: 1.8em;}

    /* Servicio de Azafatas de Congresos */
    .area1{padding:15px;}
        .area1 h2{font-size: 1.5em;}
        .area1 p{
            font-size:1.1em;
            margin-bottom:60px;
        }

    /* Un equipo cualificado */
        .area2bg .area2 h2{font-size:1.8em;}
        .area2bg .area2 p{font-size:1.3em;}
        .area2bg .area2{padding:25px 50px;}

    /* 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;
    }

}