.app__aceso{
	z-index: -1000;
	position: absolute;
	bottom: 15%;
	left: 15px;
	height: 10vh;
	width: 30vw;
  	border-radius: 12px;
  	padding: 10px;
  	background: rgba(120, 120, 120, 0.4);
  	backdrop-filter: blur(12px);
    border: 1px solid rgba(200, 200, 200, 0.2);
    box-shadow: 0 0 15px rgba(150,150,150,0.3);
	overflow: hidden;
	transition: 1s linear;
}
.app__aceso--mostrar{
	z-index: 2000;
}
.cont{
	padding: 5px 5px;
	display: inline-block;
	max-width: 100%;
	height: 105%;
	white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
	scroll-behavior: smooth;
	transition: .5s linear;
}
.app__aceso__img{
	display: inline-block;
	transition: transform .5s;
	position: relative;
	cursor: pointer;
	margin-left:5px;
}
.app__aceso__img img{
 	height: 9vh;
	background: white;
	padding: 1px;
	border-radius: 10px;
  	font-size: 14px;
  	color: #444;
  	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  	transition: transform 0.2s;
}
.app__aceso__img:hover {
	transform: translateY(-3px);
}
.app__aceso__img .text{
	position: absolute;
	z-index: 1600;
	bottom: 5px;
	left: 25%;
	color: white;
	padding: 3px;
	border-radius: 9px;
	background: rgba(0, 0, 0, .3);
	cursor: pointer;
}
.app__aceso__img .text:hover{
	cursor: pointer;
}


/* --- scrollbar bonito --- */
.cont::-webkit-scrollbar {
  height: 8px;
}

.cont::-webkit-scrollbar-track {
  background: rgba(200, 200, 200, 0.2);
  border-radius: 10px;
}

.cont::-webkit-scrollbar-thumb {
  background: rgba(230, 230, 230, .9);;
  border-radius: 10px;
}

.cont::-webkit-scrollbar-thumb:hover {
  background: #4f81c7;
}

.app__aceso__button{
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	color: white;
	transition: 3s linear;
	background: rgba(0, 0, 0, .2);
	transition: 0s linear;
}
.app__aceso--default .app__aceso__button{
	position: relative;
	max-height: auto;
	background: transparent;
}
.app__aceso__button i{
	transform: rotate(180deg);
}
 .app__aceso--default .app__aceso__button i{
	transform: rotate(0deg)
}
.app__aceso--default{
	width: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
    overflow-x: hidden;
    overflow-y: hidden;
    transition: 0s linear;
}
.app__aceso--default .cont{
	transition: 0s linear;
	padding: 0px;
}
.app__aceso--default:hover{
	cursor: pointer;
}
.app__aceso--default .app__aceso__img{
	display: none;
}

.app__aceso--default .app__aceso__button:hover{
	transform: scale(1.2);
}