body{
    background: #ffff;
    overflow-x: hidden;/* Eliminamos errores de float*/
    font-family: 'Montserrat', sans-serif;
}
/*------------------------------------*/
/*Estilos de secciones de header      */
/*------------------------------------*/
.banner{
    margin-top: 90px; 
    position: relative;
    width: 100%;
    height: 80vh;
    background-size: cover; /*para que se comporte como una portada*/
    background-position: center;
    transition: all .1s ease-in-out;
    animation: banner 10s infinite linear;
}

.banner-content1{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    color: #ffff;
    background-color: rgba(0, 22, 40, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.banner-content1 h1{
    padding-bottom: 30px;
    font-size: 35px;
    text-align: center;
}

.banner-content1 h2{
    margin: 0;
    padding: 0;
    padding-bottom: 10px;
    font-size: 25px;
    color: #f2af0e;
    text-align: center;
}

/*animación*/
@keyframes banner{
    0% {
        background-image: url(../img/espe-sd3.jpg);
        
    }
    100% {
        background-image: url(../img/espe-sd3.jpg);
    }
}

/* ESTO ES LO DEL WAVE*/
.banner svg{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
}




/*------------------------------------*/
/*Estilos del calendario              */
/*------------------------------------*/

.calendar {
    background: #ccc;
    width: 100%;
    max-width: 900px;
    margin: 1em auto;
    padding: 3.8em 0; 
}
    
.calendar__info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 3em;
    font-size: 1.2em;
    text-transform: uppercase; 
}

.calendar__prev, .calendar__next {
    color: #00713d;
    cursor: pointer;
    font-size: 1.3em; 
}

.calendar__prev {
    margin-right: auto; 
}

.calendar__next {
    margin-left: auto; 
}

.calendar__week, .calendar__dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 10px; 
}

.calendar__month, .calendar__year {
    padding: .5em 1em; 
}

.calendar__item {
    text-align: center;
    line-height: 2;
}

.calendar__today {
    background: lightcoral;
    color: white;
    width: 50%;
    border-radius: 50%;
    margin: auto; 
}

.calendar__last-days {
    opacity: .3; 
}


/*------------------------------------*/
/*Estilos del calendario              */
/*------------------------------------*/

 /* Ponencia*/
.boxes1 {
    margin-top: 50px;
    margin: 50px;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));

  }
  
  .ponenc {
    background: white;
    text-align: center;
    padding: 1.5rem 2rem;
    box-shadow: black;
    line-height: 30px ;
    transition-duration: 1s;
  }
  
  .ponenc:hover{
    background-color: hsla(209, 86%, 53%, 0.164);
  }

/* Poster*/
  .boxes2 {
    margin-top: 50px;
    margin: 50px;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  }
  
  .poster {
    background: white;
    text-align: center;
    padding: 1.5rem 2rem;
    box-shadow: black;
    border: 4px solid #d4b503;
    border-radius: 25px;
    line-height: 30px ;
  }

  .poster:hover{
    background-color: hsla(54, 74%, 79%, 0.164);
  }

/* Charla*/
.boxes3 {
    margin-top: 50px;
    margin: 50px;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  }
  
  .charla {
    background: white;
    text-align: center;
    padding: 1.5rem 2rem;
    box-shadow: black;
    border: 4px solid #eb3333;
    border-radius: 25px;
    line-height: 30px ;
  }
  
  .charla:hover{
    background-color: hsla(19, 70%, 72%, 0.164);
  }
  
/*------------------------------------*/
/*Estilos de los botones            */
/*------------------------------------*/
.boton2{
    width: 100%;
    display: flex;
    justify-content: center;
}
.boton2 button{
    margin-top: 40px;
    width: 200px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 15px;
    background: #00713d;
    border: none;
    outline: none;
    border-radius: 20px;
    color: #fff;
    cursor: pointer;
    transition: 0.5s;
}
.boton2 button:hover{
    background: #f2af0e;
}