@import url("https://fonts.googleapis.com/css2?family=Filson+Pro:wght@425&display=swap");
.barra-login-container {
background-color: #000000 !important;
}
.barra-login-mobile-fixed {
width: 72%;
height: 50% !important;
background: #94CF78;
display: flex;
align-items: left;
justify-content: center;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
margin-left: 0;
position: relative;
border-radius: 0px 0px 32px 0px; } .symhub-link-mobile {
padding-top: 1vh;
padding-bottom: 1vh;
padding-left: 4vw;
padding-right: 3vw;
font-family: "Filson Pro", sans-serif;
font-weight: 600 !important;
font-size: 12px;
text-align: left;
text-decoration: none;
color: #000000;
text-transform: none;
line-height: 1.3;
} .symhub-link-mobile .underline {
text-decoration: underline;
}*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: "Work Sans", sans-serif;
font-weight: 400; margin: 0;
display: flex;
justify-content: center !important;
align-items: center !important; }
.wrapper {
overflow: hidden;
position: relative;
margin: 0 auto;
}
.carousel {
display: flex;
flex-direction: column;
align-items: center;
transition: transform 0.5s ease;
margin: 0 auto;
padding-left: 2vw;
padding-right: 2vw;
}
.carousel__item {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 200px;
margin: -30px 0; opacity: 0.3;
transform: scale(0.8);
transition: transform 0.3s ease, opacity 0.3s ease;
}
.carousel__item img {
max-height: 100%;
max-width: 100%;
object-fit: cover;
}
.carousel__item.highlight {
height: 100px; opacity: 1;
transform: scale(1);
}
.controls {
position: absolute;
width: 100%;
top: 50%;
display: flex;
justify-content: space-between;
transform: translateY(-80%);
}
.controls button {
background: transparent;
border: none;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
position:absolute;
}
.controls button:focus {
outline: none; background: transparent; }
.arrow {
width: 20px;
height: 20px;
display: flex;
position: relative;
}
.arrow.up::before,
.arrow.up::after,
.arrow.down::before,
.arrow.down::after {
content: '';
position: absolute;
width: 15px;
height: 3px;
background: #B4B5B6;
}
.arrow.up::before {
transform: rotate(-45deg);
bottom: 48vh;
left: 0vw;
transform-origin: left center;
}
.arrow.up::after {
transform: rotate(45deg);
bottom: 49.5vh;
left: 2.5vw;
transform-origin: left center;
}
.arrow.down::before {
transform: rotate(45deg);
top:48vh;
left: 19vw;
transform-origin: left center;
}
.arrow.down::after {
transform: rotate(-45deg);
top:49.5vh;
left: 21.5vw;
transform-origin: left center;
} #prev {
top: -210px; left: 30%;
transform: translateX(-50%);
} #next {
bottom: -210px; left: 50%;
transform: translateX(-50%);
}