:root{
    --big-font:2rem;
  overflow-x: hidden;

}

*{
    padding: 0;
    margin: 0;
    font-family: "Roboto", sans-serif;

}

.header{
    width: 100%;
    height: 800px;
    background-color: white;
    background-image: url("../images/audio-min.jpg");    
    background-size: cover;    
}
.header:before{
    content: "";
    width: 100%;
    height: 800px;
    position: absolute;
    background: black;
    opacity: .5;
    z-index: 5;
}

.header_nav{
    width: 100%;
    height: 4.5rem; 
    z-index: 20;
    position: fixed;
    display: grid;
     grid-template-columns: 50% 50%;
     grid-template-rows:  auto;
     background-color: white;
} 


.content_logo{
    display: flex;
    justify-content: flex-start;
    align-items: center;


}

.content_logo  img{
    position: relative;
    width:140px;
    height: 70px;
    border-radius: 10px;
    object-fit: fill;
    margin-left:10px;

}

.header_ul{
    display: flex;
    position: relative ;
    width: 100%;
    justify-content: center;
    align-items: flex-end;
    transition: left 1s;
    height: 3rem;
    top: 0;
    z-index: 10;
}

.header_li{
    list-style: none;
    padding: 10px;
    color: white;
}

.header h1{
    margin: auto;
    font-size: var(--big-font);

}

.header_li a{
    text-decoration: none;
    color: black;
    
    z-index: 10;
}

.content_title{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;   
    height: 800px;
}
.content_title h1{
    position: absolute;
    color: white;
    z-index: 10;
    text-align:center;
    padding:10px;
    box-sizing:border-box;
    max-width:600px;
}


.section{
    width: 100%;
    height: 700px;
    max-width: 1200px;
    margin: auto;
    margin-bottom: 100px;
    margin-top: 100px;

}




.footer{
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background:black;
    color: white;

}


.content_information{
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3 , 1fr);
    grid-template-rows: 100%;
    align-items:center;
    border-radius: 5px;
    gap: 10px;
    margin: auto;
}


.content_information_2{

  
        position: relative;
    width: 80%;
    margin: auto;
    height: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
    height: 600px;

}

.destacado{
    font-weight: bold;
}


.imagen_referencia  img{
    position: relative;
    width:100%;
    height: 500px;
    border-radius: 20px;
    object-fit: cover;
}


.information_2{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    padding: 20px;

}


.information_2 .titulo_seccion_inicial{
    margin-bottom: 20px;
    padding: 5px;
    text-align: center;

}

.information_2 .parrafo_inicial{
    text-align: center;


}


.information_2 .titulo_locutor{
    width: 80%;
    font-size: 1.5rem;
    text-align: center;
    padding: 5px;
    font-weight: bold;

}

.information_2 p{

    position: relative;
    width: 80%;
    max-width: 350px;
    padding:2px;

}

.information{
    width: 100%;
    max-width: 300px;
    height: 290px;
    border: black 10px;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 60% 40%;
    box-shadow: 0px 0px 2px 0px;
}

.image_information img{
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: fill;  
}


.content_message{
    display: flex;
    justify-content: center;
    align-items: center ;
}

.button_open{
    display: none;


}

.button_closed{
    padding: 15px;
    color: white;
    background: black;
    border-radius: 50%;
    position: relative;
    top: -23%;
    left:20%;
    display: none;



}

.imagen_referencia img.imagen_oli{

    object-fit: cover;

}

.content_radio_1{

    width: 100%;
    height: 500px;
    margin:auto;
    display: grid;
    grid-template-columns: 50% 50%;

}


.content_radio_1 img{

    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 10px;

}

.content_radio{

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}

.content_radio h2{

    margin-bottom: 30px;
}

.content_radio audio{
    position: relative;
    width: 80%;
    max-width: 350px;


}



.content_button_desarrollador{
    display: flex;
    justify-content: center;
    align-items: center;
}
.content_button_desarrollador a{
    width: 80%;
height: 80px;
margin-top: 30px;
cursor: pointer;
max-width: 250px;
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
color: white;
text-decoration: none;
border-radius: 10px;
text-align: center;
}


.content_title_compartir{
    text-align: center;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content_buttons_compartir{
    position: relative;
    max-width: 600px;
    margin: auto;
    height: 100%;
    width: 60%;
    display: flex;
    justify-content:space-between;
    align-items: center;
    margin-bottom: 120px;
}




.content_buttons_compartir a img{
    width: 140px;
    height: 60%;
    position: relative;
    


}

.section_botones_compartir{

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.content_blog article{

    width: 100%;
    max-width: 700px;
    height: 250px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
    margin: auto;
}

.content_blog article .content_information_article{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}

.content_blog article .content_information_article{
    box-sizing: border-box;
    padding: 20px;


}

.content_blog article .content_information_article p{

    text-align: center;
    font-weight: bold;

}



.content_blog article .content_information_article a{

    margin-top:10px;
    background-color: green;
    padding: 10px;
    border-radius: 5px;
    color: black;
    text-decoration: none;
    border:5px ;
    transition: background-color 1s;
    color: white;
    
}

.content_blog article img{
    position: relative;
    width: 100%;
    height: 250px;
    border-radius: 10px ;
}

.content_blog article .content_information_article a:hover{
    color: white;
    background-color: blue;


}

.seccion_articulos{
    height: auto;
    width: 100%;


}

.content_information_blog_article{
    box-sizing:border-box;
    padding:15px;
    
}

.content_information_blog_article h2{
    margin-bottom:20px;
        
    
}

.content_information_blog_article p{
        text-align:justify;

    margin-bottom:20px;
    
}


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

    .content_blog article{
        width: 80%;
        grid-template-columns: 100%;
        grid-template-rows: auto;
        height: 500px;

    }

    .content_buttons_compartir{
        flex-direction: column;
        

    }

    .content_buttons_compartir a{
        margin-top: 20px;

    }
    .button_closed{
        display: block;
    }

    .header{
        background-position: center;
    }





    .button_open{
    display: flex;
    justify-content: center;
    align-items: center;


    }

    .button_open img{
        position: relative;
        width: 30px;
        height: 40px;

    }


    .header_ul{
        position: fixed;
        width: 100%;
        height:100%;
        left: 100%;
        background: white;
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;


    }

    .header_li{
        display: flex;
        justify-content: center;
        align-items: center;


    }

    .content_title{
        text-align: center;
    }
    .section{
        height: auto;
       
        box-sizing: border-box;
    }

    .content_information{
        grid-template-columns: 100%;
        grid-template-rows: repeat( 3, 1fr);
        height: auto;
        
    }

    .information{
        margin: auto;
    }



    .imagen_referencia img{
        height: 300px;
    }

    .content_information_2{
        grid-template-columns: 100%;
        grid-template-rows: auto;
    }


    .content_radio_1{
        width: 80%;
        grid-template-columns: 100%;
        grid-template-rows: auto;

    }




}