body{
    background: #0D302B;
}
.banner-guia{
    height: 500px;
    background-image: url(../Img/BiciXauxa-9-5.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(6,1fr)
}
.t-bguia{
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    text-align: center;
    grid-column:2/3;
    grid-row: 2/4;
}
.slogan-bguia{
    grid-column:1/4;
    grid-row: 5/6;
}
.slogan-bguia p{
    font-size: 1.5rem;
    text-align: center
}

#content-guias{
    background: #0D302B;
    width: 100%;
    margin: auto;    
    }
.detalle-guias{
    width: 95%;
    margin: auto;
    padding: 20px 0 20px 0;
    
}
.detalle-guias p{
    text-align: center;
}
.container-guias{
    width: 95%;
    margin: auto;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: repeat(6,1rf);
}

.andares{
    height: 300px;
    background-image: url(../Img/ANDARES_tunanmarca2.jpg);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    grid-column:1/13;
    grid-row: 1/2;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: repeat(6,1fr);
}
.xauxa-aventuras{
    height: 300px;
    background-image: url(../Img/xauxa_aventuras_shutuy.jpg);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    grid-column:1/13;
    grid-row: 2/3;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: repeat(6,1fr);
}
.prodes{
    height: 300px;
    background-image: url(../Img/prodes_sol.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    grid-column:1/13;
    grid-row: 3/4;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: repeat(6,1fr);
}
.casac{
    height: 300px;
    background-image: url(../Img/casacaminante.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    grid-column:1/13;
    grid-row: 4/5;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: repeat(6,1fr);
}
.guias-logo{    
    height: 100px;
    margin: auto;
    grid-column:1/13;
    grid-row: 1/3;
}
.guias-datos{
    background: rgba(161, 186, 0, .8);
    grid-column:1/13;
    grid-row: 5/7;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows: repeat(3,1fr);
}
.datos{
    display: flex;
    align-items: center;
}
.datos:nth-child(1) {
    grid-column:1/5;
    grid-row: 1/2;
}
.datos:nth-child(2) {
    grid-column:1/5;
    grid-row: 2/3;
}
.datos:nth-child(3) {
    grid-column:1/5;
    grid-row: 3/4;
}
.datos:nth-child(4) {
    margin: auto;
    grid-column:5/7;
    grid-row: 1/4;
}
.datos p,i,a{
    color: #fff;
    font-family: 'Roboto Slab', serif;
}
.face i{
    font-size: 2rem;
}
@media(min-width:600px){
    .andares{
        grid-column:1/7;
        grid-row: 1/2;
    }   
    .xauxa-aventuras{
        grid-column:7/13;
        grid-row: 1/2;
    }
    .prodes{
        grid-column:1/7;
        grid-row: 2/3;
    }
    .casac{
        grid-column:7/13;
        grid-row: 2/3;
    }
    .slogan-bguia{
        grid-column:2/3;
        grid-row: 5/6;
    }
    
}
@media(min-width:900px){
/*    .andares{
        grid-column:1/5;
        grid-row: 1/2;
    }   
    .xauxa-aventuras{
        grid-column:5/9;
        grid-row: 1/2;
    }
    .prodes{
        grid-column:9/13;
        grid-row: 1/2;
    }
    .casac{
        grid-column:5/9;
        grid-row: 2/3;
    }*/
    .detalle-guias{
        width: 95%;
        margin: auto;
        padding: 20px 0 20px 0;

    }
}
@media(min-width:1200px){
    #content-guias{
        max-width: 1200px;
        margin: auto;    
        }
    .andares{
        grid-column:1/5;
        grid-row: 1/2;
    }   
    .xauxa-aventuras{
        grid-column:5/9;
        grid-row: 1/2;
    }
    .casac{
        grid-column:9/13;
        grid-row: 1/2;
    }
    .detalle-guias{
        width: 600px;
        margin: auto;
        padding: 20px 0 20px 0;

    }
}