body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    /* background-image: url(../2019/images19/2019agost_fondo.jpg); */
    /* background-image: url(https://cdn.pixabay.com/photo/2016/10/21/08/18/the-rosary-1757427_960_720.jpg); */
    background-image: url(https://images.pexels.com/photos/256962/pexels-photo-256962.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #464646;

}
.grid_port{
    padding-top: 10px;
    display: grid;
    /* cada auto una columna */
    grid-template-columns: repeat(auto-fit, minmax(400px,1fr));
    /* grid-template-columns: 1fr 1fr; */
    grid-column: auto;
    grid-gap: 10px;
    grid-column: span 2;
    grid-column: 2/2;
  }
  .grid_port img{
      width:100%;
      margin: auto;
      border: 3px solid white;
      transition: all 0.5s ease;
  }
  .grid_port img:hover{
      transform: scale(1.01);    
      /* transform: scale(0.9);     */
  } 
.box {

        /* width: 65%; */
        padding-top: 5px;
        display: grid;
        /* cada auto una columna */
        /* grid-template-columns: repeat(auto-fit, minmax(400px,1fr));; */
        opacity:0.8;
        max-width: 90%;
        margin-top: 20px;
         margin-left: auto; 
        margin-right: auto; 
        border-radius: 30px;
        justify-content: center;
        /* align-items: center; */
        position: relative;
        

        /* max-width: 60%; */
}

#solo {
    position: absolute;
    opacity:0.3;
    top: 90%;
    left: 50%; 
    transform: translate(-50%,-50%);
    width: 150px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
    background: linear-gradient(60deg, #03a9f4,#f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 15px;
    z-index: 1;
}
a:hover {
    animation: animate 8s linear infinite;
}
@keyframes animate
{
    0%
    {
        background-position: 0%;
    }
    100%
    {
        background-position: 400%;
    }
}


a:before
{
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5%;
    bottom: -5px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4,#f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
    opacity: 0;
    transition: 0.5s;
}
a:hover:before
{
    filter: blur(20px);
    opacity: 1;
    animation: animate 8s linear infinite;
}


img {
	border-radius: 15px;