#contexpo {padding-top: 6%;}

/*imagenes*/
#expoportada,
#impoportada,
#aseportada,
#capportada{
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: hidden;
}
#expoportada{background-image: url(../img/servicios/expoportada.jpg);}
#impoportada{background-image: url(../img/servicios/impoportada.jpg);}
#aseportada{background-image: url(../img/servicios/aseportada.jpg);}
#capportada{background-image: url(../img/servicios/capportada.jpg);}
    #expoportada article,
    #impoportada article,
    #aseportada article,
    #capportada article{
        display: grid;
        align-items: center;
        justify-items: center;
        text-align: center;
        height: 300px;
        background: rgba(0,0,0,.5);
        padding: 0;
    }
        #contcap{
            border-bottom: 1px solid var(--color-principal);
        }

/*textos*/
#contexpo h1,
#contimpo h1,
#contase h1,
#contcap h1{
    text-align: center;
    text-shadow: 2px 3px 4px rgba(0,0,0,0.6);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 3em;
}
    @media screen and (max-width:560px) {
        #expoportada article,
        #impoportada article,
        #aseportada article,
        #capportada article{
            height: 100%;
        }
        #contexpo h1,
        #contimpo h1,
        #contase h1,
        #contcap h1{
            font-size: 2em;
        }
    }

#contexpo > article,
#contimpo > article,
#contase > article,
#contcap > article {
    padding:3% 5% 5% 5%;
}

#contexpo ul li, #contimpo ul li, #contase ul li, #contcap ul li {margin: 5px 0; padding: 5px; border: solid 1px #ddd; background: #fefefe; font-size: .9em;} 

#contexpo ul li span, #contimpo ul li span, #contase ul li span, #contcap ul li span {font-size: .7em; color:#f79b1e; margin-right: 7px;}

/*fotos capacitación*/
h6.titfoto{
    margin: 40px 0 20px 0;
    }
    div.fotos{
        width: 100%;
        display: grid;
        grid-gap: 20px;
        grid-template-columns: repeat(3,1fr);
        }
     .fotos img{
            max-width: 98%;
        }   
        @media screen and (max-width: 960px){
            div.fotos{
                grid-template-columns: repeat(2,1fr);
            }
        }
        @media screen and (max-width: 560px){
            div.fotos{
                grid-template-columns: 1fr;
            }
        }