.eventList {
    max-width: 1000px;
    margin: 0px auto 50px  auto;
    display: flex;
    flex-flow: row wrap;
    gap: 50px;
}


.listOfPlaces.extendEveentListOfPlaces > div {
    margin-bottom: 50px;
}

.listOfPlaces div .-img {
    max-width: 200px !important;
}

.listOfPlaces div .-date {
    font-size: 1rem !important;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 10px;
}


.event {
    width: 300px;
    height: 400px;
    overflow: hidden;
    position: relative;
}

.-degrade {
    position: absolute;
    width: 100%;
    min-height: 100px;
    padding: 10px;
    z-index: 1;
    overflow: hidden;
    left: 0px;
    bottom: 0px;
}

.-orange {
    background: rgb(247,150,34);
    background: -moz-linear-gradient(90deg, rgba(247,150,34,1) 0%, rgba(247,184,109,1) 50%, rgba(160,131,39,0) 100%);
    background: -webkit-linear-gradient(90deg, rgba(247,150,34,1) 0%, rgba(247,184,109,1) 50%, rgba(160,131,39,0) 100%);
    background: linear-gradient(90deg, rgba(247,150,34,1) 0%, rgba(247,184,109,1) 50%, rgba(160,131,39,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f79622",endColorstr="#a08327",GradientType=1);
}

.-degrade h1 {
    font-size: 30px;
    color: white;
}

.-degrade h1:hover {
    background-color: white;
    color: black;
}

.-degrade .-date   {
    font-size: 14px;
    display: flex;
    flex-flow: row nowrap;
    color: white;
    gap: 5px;
    align-items: center;
    justify-content: flex-start;
}

.-degrade .-business p {
    color: white;
    font: 14px;
    margin-top: 5px;
}

.-degrade .-business p a {
    color: white;
    text-decoration: none;
}

.-degrade .-business p a:hover {
    background-color: white;
    color: black;
}

.-imagen a img:hover  {
    opacity: 1;
	-webkit-animation: flash 1.5s;
	animation: flash 1.5s;
}

.-imagen img {
    width: auto;
    height: 400px;
    object-fit: cover;
}


@-webkit-keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}


/* For Mobile Portrait View */
@media screen and (max-device-width: 480px) and (orientation: portrait) {    
    .eventList {
        width:max-content;
        margin: 0px auto 50px auto;
        flex-direction: column;
    }
    
    .event {
        width: 350px !important;
        overflow: hidden;
        position: relative; 
    }


    .listOfPlaces div .-date {
        text-align: center;
        margin-bottom: 20px;
    }

    .listOfPlaces div .-date i {
        width: 20px;
    }

    .listOfPlaces div .-img {
        max-width: 350px !important;
        max-height: 1080px !important;
        margin: auto;
    }    
}

/* For Tablets Portrait View */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .eventList {
        max-width: 100%;
        margin: 0px auto 50px auto;
        display: flex;
        flex-flow: row wrap;
        gap: 50px;
        justify-content: center;
    }

    .listOfPlaces div .-img {
        max-width: 100% !important;
        max-height: 1080px !important;
    }
}