@charset "UTF-8";
/*css Document*/
                        
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {        
        font-family: 'open sans';
}

.contenedor {
padding: 60px 0;
width: 90%;
max-width: 1000px;
margin: auto;
overflow: hidden;
}
                    
.titulo {
color: #642a73;
font-size: 30px;
text-align: center;
margin-bottom: 60px;
}
/*Header*/

header {
width: 100%;
height: 550px;
background: #659999;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, hsla(25, 100%, 50%, 0.664), hsla(180, 20%, 50%, 0.637)), url(../img/portada-micro-podcast.png);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, hsla(25, 100%, 50%, 0.664), hsla(180, 20%, 50%, 0.637)), url(../img/portada-micro-podcast.png);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background-size: cover;
background-attachment: fixed;
position: relative;
}
                    
nav {
text-align: right;
padding: 30px 50px 0 0;
}
                    
nav>a {
color: #fff;
font-weight: 300;
text-decoration: none;
margin-right: 10px;
}
                    
nav>a:hover {
text-decoration: underline;
}
                    
header .textos-header {
display: flex;
height: 430px;
width: 100%;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
                    
.textos-header h1 {
font-size: 50px;
color: #fff;
}

.textos-header h2 {
font-size: 30px;
font-weight: 300;
color: #fff;
}

.wave {
position: absolute;
bottom: 0%;
width: 100%;
}
/* About us */

main 



/*7 temas para conversar*/

.audioplayer {
    padding: 30px;
}

td {
    padding: 20px;
    text-align: justify;
    vertical-align: auto;
    width: 45%;

    td.first {
        border-right: 5px solid #f5c7f2;
    }
}



/*Galeria*/

.portafolio {
background: #f2f2f2;
}

.galeria-port {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}

.imagen-port {
width: 24%;
margin-bottom: 10px;
overflow: hidden;
position: relative;
cursor: pointer;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
}

.imagen-port>img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.hover-galeria {
position: absolute;
width: 100%;
height: 100%;
top: 0;
transform: scale(0);
background: hsla(273, 91%, 27%, 0.7);
transition: transform .5s;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.hover-galeria img {
width: 50px;
}

.hover-galeria p {
color: #fff;
}

.imagen-port:hover .hover-galeria {
transform: scale(1);
}
/*Clients*/

.cards {
display: flex;
justify-content: space-evenly;
}

.cards .card {
background: #4d0686;
display: flex;
width: 46%;
height: 200px;
align-items: center;
justify-content: space-evenly;
border-radius: 5px;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.6);
}

.cards .card img {
width: 100px;
height: 100px;
object-fit: cover;
border: 3px solid #fff;
border-radius: 50%;
display: block;
}

.cards .card>.contenido-texto-card {
width: 60%;
color: #fff;
}

.cards .card>.contenido-texto-card p {
font-weight : 300;
padding-top: 5px;
}
/*Our team*/

.about-services {
background: #f2f2f2;
padding-bottom: 30px;
}

.servicio-cont {
display: flex;
justify-content: space-between;
align-items: center;

}

.serviio-ind {
width: 28%;
text-align: center;

}

.servicio-ind img {
width: 90%;
}

.servicio-ind h3 {
margin: 10px 0;
}

.servicio-ind p {
font-weight: 300;
text-align: justify;
margin-right: 28px;

}
/*footer*/	
footer{

background: #414141;
padding: 60px 0 30px 0;

margin: auto;

overflow: hidden;

}



.contenedor-footer{

    display: flex;

    width: 90%;

    justify-content: space-evenly;

    margin: auto;

    padding-bottom: 50px;

    border-bottom: 1px solid #ccc;

}



.content-foo{

    text-align: center;

}



.content-foo h4{

    color: #fff;

    border-bottom: 3px solid #af20d3;

    padding-bottom: 5px;

    margin-bottom: 10px;

}



.content-foo p{

    color: #ccc;

}



.titulo-final{

    text-align: center;

    font-size: 24px;

    margin: 20px 0 0 0;

    color: #9e9797;

}



@media screen and (max-width:900px){

    header{

        background-position: center;

    }



    .contenedor-sobre-nosotros{

        flex-direction: column;

        justify-content: center;

        align-items: center;

    }



    .sobre-nosotros .contenido-textos{

        width: 90%;

    }



    .imagen-about-us{

        width: 90%;

    }



    /* Galeria */



    .imagen-port{

        width: 44%;

    }



    /* Clientes */



    .cards{

        flex-direction: column;

        justify-content: center;

        align-items: center;

    }



    .cards .card{

        width: 90%;

    }



    .cards .card:first-child{

        margin-bottom: 30px;

    }



    /* servicios */



    .servicio-cont{

        justify-content: center;

        flex-direction: column;

    }



    .servicio-ind{

        width: 100%;

        text-align: center;

    }



    .servicio-ind:nth-child(1), .servicio-ind:nth-child(2){

        margin-bottom: 60px;

    }



    .servicio-ind img{

        width: 90%;

    }

}



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

    nav{

        text-align: center;

        padding: 30px 0 0 0;

    }



    nav > a{

        margin-right: 5px;

    }



    .textos-header h1{

        font-size: 35px;

    }



    .textos-header h2{

        font-size: 20px;

    }



    /* ABOUT US */



    .imagen-about-us{

        margin-bottom: 60px;

        width: 99%;

    }



    .sobre-nosotros .contenido-textos{

        width: 95%;

    }



    /* Galeria */



    .imagen-port{

        width: 95%;

    }



    /* Clients */



    .cards .card{

        height: 450px;

        display: flex;

        flex-direction: column;

        align-items: center;

    }



    .cards .card img{

        width: 90px;

        height: 90px;

    }



    /* Footer */



    .contenedor-footer{

        flex-direction: column;

        border: none;

    }



    .content-foo{

        margin-bottom: 20px;

        text-align: center;

    }



    .content-foo h4{

        border: none;

    }



    .content-foo p{

        color: #ccc;

        border-bottom: 1px solid #f2f2f2;

        padding-bottom: 20px;

    }



    .titulo-final{

        font-size: 20px;

    }

}