/*----SLIDER---*/
.slider{
	width: 100%;
    height: calc(100vh - 76px);
	position: relative;
	overflow: hidden;
	background: #fff;
}
.yelp a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
}

.slide{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
    padding: 0px !important;
	display: flex;
	justify-content: center;
	transition: opacity 0.6s ease-in-out;

}
.slider .slide img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.current{
	opacity: 1;
}
.current .titleS{
	bottom:40%;
	opacity: 1;
}
.titleS{
	opacity: 0;
	bottom:-10px;
	width: 80%;
	max-width: 600px;
	text-align: center;
	position: absolute;
	font-size: 33px;
	transition:  0.6s;
	/* estilo */
	color: var(--oscuro);
	padding: 0.3em 1em;
    border-radius: 10px;
	background: rgba(255, 255, 255, 0.74);
	font-weight: bold;
}

.titleport {
	position: absolute;
	z-index: 30;
	width: 100%;
	bottom: 0px;
	text-align: center;
	padding: 15px;
	font-size: 2.5em;
	background: var(--colorPrimario);
	font-weight: 400;
	color: #fff;
}


.arrow {
	z-index: 25;
	position: absolute;
	top: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	line-height: 60px;
	transform: translateY(-50%);
	font-size: 27px;
	text-align: center;
	cursor: pointer;
	color: #000;
	background: rgba(255,255,255, 0.7);
	border-radius: 50%;
	opacity: 0.4;
	transition: all 0.3s;
}
.aleft, .aright{
	width: 15px;
	height: auto;
	margin: auto;
}
.arrow:hover{
	opacity: 1;
	transition: all 0.3s;
}
.a-left{
	left: 20px;
}
.a-right{
	right: 20px;
}

@media (max-width: 960px){
    .arrow{
        display: none;
    }
}