/* Indicadores */
.carousel .carousel-indicators li {
  background-color: #aaaaaa;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}

/* Imágenes del carousel */
.carousel-item img {
  width: 700px;
  height: 234px;
  background-color: transparent !important;
  object-fit: cover;
}

/* Área activa */
.carousel-inner {
  width: 700px;
  height: 234px;
  background-color: transparent !important;
}

/* Flechas de navegación */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 60px;
  height: 60px;
  filter: invert(100%);
  background-size: 60% 60%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
}

/* Colocar las flechas encima del contenido */
.carousel-control-prev,
.carousel-control-next {
  z-index: 10;
}

/* Contenedor general */
#carouselExampleIndicators {
  max-width: 100%;
  margin: 0 auto;
}

.media_icon {
    font-size: 30px;
    color: green;
    margin-right:5px
  }
 
 .media_icon2 {
    font-size: 30px;
    color: rgb(255, 255, 255);
    margin-right:8px
  }
 


.titulo_formulario{
margin-left:110px;
}

.zoom {
    transition: transform .2s;
    margin: 0 auto;
    
  }
  
 .zoom:hover {
    -ms-transform: scale(1.1); /* IE 9 */
    -webkit-transform: scale(1.1); /* Safari 3-8 */
    transform: scale(1.1); 
 }


.program-box{

    width:90%;
    height:90%;
    border-radius: 25px;
}

.program-box-pweb{

    width:90%;
    height:90%;

}


.audio-sonando{
    
    background-color:rgb(204,204,204)
}

.text-sonando{
    
    color:rgb(60,60,60) !important;
}

.my-fixed-item {
    position: fixed;
    z-index:1;
    text-align: center;
    bottom: 0px;top:auto;
    background-size: 100% 100%;
    background-image: url("../img/1.png");
    width: 100%;
    
}

.a2:link, a2:visited,  a2:active
{
    color: #000000 !important;
    text-decoration: none;
}


.a2:hover
{
    color: #77a85a  !important;
    text-decoration: none;
}

a:link, a:visited,  a:active
{
    color: #ffffff;
    text-decoration: none;
}

a:hover
{
    color: #000000;
    text-decoration: none;
}


body {
    font-family: 'Open Sans', sans-serif;
    text-align: left;
    color: #3A3A3A;
    background-color: #EAEAEA;
}

header {
    font-family: 'Open Sans', sans-serif;
    color: #3A3A3A;
}

p {
    font-size: 20px;
    font-weight: 400;
    text-align: left;
}

h1 {
    font-size: 42px;
    font-weight: 700;
}

h2 {
    font-size: 38px;
    font-weight: 600;
}

h3 {
    font-size: 36px;
    font-weight: 400;
}

h4 {
    font-size: 32px;
    font-weight: 400;
    font-style: italic;
}

h5 {
    font-size: 24px;
    font-weight: 400;
}

footer {
    background-color: #323995;
    color: #ffffff;
    height: 320px;
}




.banner-principal {
    height: autopx;
    width: 1500px;
    border-radius: 40px;
    box-shadow: 12px 12px 40px 1px;
    display: block;
    margin: 0px auto;
    margin-top: 80px;
    margin-bottom: 80px;
    /* De todos modos la idea es que la sombra sea más transparente y pequeña */
}

.imagen-programa {
    /* Estas son las imágenes que aparecen en la pantalla principal, están a una relación de 16:9, si hay que ajustar tamaño, hay que hacerlo, pero manteniendo el ratio
    aquí también la sombra debe ser más transparente y pequeña*/
    height: 270px;
    width: 480px;
    border-radius: 25px;
    box-shadow: 3px 3px 10px 3px;
}

.section-programacion-landing {
    /* Esta es la barra que dice "Escucha nuestra programación, aunque se ve bien con una imagen de fondo mezclado con el color, como está en el sitio de wordpress, 
    me indican de que tamaño se las envío"*/
    background-color: #323995;
    color: #ffffff;
    height: 180px;
    text-align: center;
    padding: 20px;
}

.section-ofrenda-landing {
    /* Esta es la barra que dice "Mi ofrenda" y lo mismo de la textura de la sección anterior*/
    background-color: #F49338;
    color: #ffffff;
    height: 180px;
    text-align: center;
    padding: 20px;
}


.iconos-media-superior {

    font-size: 30px;
    color:green;

}