/* slider */

#sliderContainer,
#soloSliderContainer,
#productionSliderContainer {
    padding: 1em 3em;
    display: flex;
    border-radius: 1em;
    align-items: center;
    justify-content: center;
    border: 0px solid red;
    background-color: hsla(0, 0%, 0%, 0.2);
    box-shadow: inset 0 0 2em rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.233);
    border-right: 1px solid rgba(255, 255, 255, 0.233);
}

.slider {
  width: 80%;
  aspect-ratio: 16/9;
  border: 0px solid rgba(255, 255, 255, 0.233);
}

.wrapper {
    z-index: 1;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: #222;
    border-radius: 0.6em;
    border: 0px solid green;
    border-top: 1px solid rgba(255, 255, 255, 0.233);
    border-left: 1px solid rgba(255, 255, 255, 0.233);
}

#items {
    top: 0;
    left: -100%;
    height: 100%;
    width: calc(100% * 25);
    position: relative;
    transform-origin: -100% 0;
}

#soloItems {
    top: 0;
    left: -100%;
    height: 100%;
    width: calc(100% * 8);
    position: relative;
    transform-origin: -100% 0;
}

#productionItems {
    top: 0;
    left: -100%;
    height: 100%;
    width: calc(100% * 37);
    position: relative;
    transform-origin: -100% 0;
}

#items.shifting,
#soloItems.shifting,
#productionItems.shifting {
  transition: left .2s ease-out;
}

.slide {
    height: 100%;
    aspect-ratio: 16/9;
    cursor: pointer;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 1s;
    position: relative;
    background: #FFCF47;
    background-size: cover;
    background-position: center;
}

.controls {
    top: 40%;
    width: 90%;
    height: 10vh;
    display: flex;
    color: black;
    position: absolute;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}



.control {
    width: 5vw;
    z-index: 2;
    display: flex;
    font-size: 2em;
    position: absolute;
    aspect-ratio: 1/1;
    align-items: center;
    border-radius: 2000px;
    background-color: #0000004d;
    justify-content: center;
    transition: all 0.1s ease-in-out;
    box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.8);
    border-top: 1px solid grey;
    background-image: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.164),
        rgba(0, 0, 0, 0.205)
    );
    transition: all 0.2s ease-in-out;
}

.control:hover {
    background-color: #6969694d;
    transition: all 0.2s ease-in-out;
}


.controls a, .controls a:visited {
    color: white;
}

.prev,
.next {
    cursor: pointer;
}
.prev {
    left: 0;
}
.next {
   right: 0;
}
.prev:active,
.next:active {
    transform: scale(0.9);
    transition: all 0.1s ease-in-out;
}

/* slider end */

.img01 {background-image: url("/_ASSETS/img/in-the-wild/spacex.png");}
.img02 {background-image: url("/_ASSETS/img/in-the-wild/generic-channel-identity-example.png");}
.img03 {background-image: url("/_ASSETS/img/in-the-wild/hero.png");}
.img04 {background-image: url("/_ASSETS/img/in-the-wild/HKO-graphics.png");}
.img05 {background-image: url("/_ASSETS/img/in-the-wild/OH-space.png");}
.img06 {background-image: url("/_ASSETS/img/in-the-wild/radio_x3m.png");}
.img07 {background-image: url("/_ASSETS/img/in-the-wild/RadioYleX3M.png");}
.img08 {background-image: url("/_ASSETS/img/in-the-wild/SMEC_superMoto_graphics_with_SPX.png");}
.img09 {background-image: url("/_ASSETS/img/in-the-wild/SMEC_superMoto_graphics_with_SPX2.png");}
.img10 {background-image: url("/_ASSETS/img/in-the-wild/social_hifk.png");}
.img11 {background-image: url("/_ASSETS/img/in-the-wild/basketball.png"); }
.img12 {background-image: url("/_ASSETS/img/in-the-wild/spoerg.png");}
.img13 {background-image: url("/_ASSETS/img/in-the-wild/spx_ui-renderer.png");}
.img14 {background-image: url("/_ASSETS/img/in-the-wild/superjahti.png");}
.img15 {background-image: url("/_ASSETS/img/in-the-wild/synttarit.png");}
.img16 {background-image: url("/_ASSETS/img/in-the-wild/telive2.png");}
.img17 {background-image: url("/_ASSETS/img/in-the-wild/ylex.png");}
.img18 {background-image: url("/_ASSETS/img/in-the-wild/20200813_165443.jpg");}
.img19 {background-image: url("/_ASSETS/img/in-the-wild/20201205_171725.jpg");}
.img20 {background-image: url("/_ASSETS/img/in-the-wild/20210608_190054.jpg");}
.img21 {background-image: url("/_ASSETS/img/in-the-wild/20231124_025520.jpg");}
.img22 {background-image: url("/_ASSETS/img/in-the-wild/basketball.png");}
.img23 {background-image: url("/_ASSETS/img/in-the-wild/calgary-stairclimb24-social-2.png");}
.img24 {background-image: url("/_ASSETS/img/in-the-wild/ejp_jokeri.png");}

#testimonialSlider{
    display: flex;
    justify-content: center;
}

.testimonial-card {
    width: 85%;
    display: flex;
    color: black;
    padding: 2em 3em;
    border-radius: 0.8em;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.233);
    border-right: 1px solid rgba(255, 255, 255, 0.233);
    box-shadow: inset 0 0 2em rgba(0, 0, 0, 0.5);
    background-image: linear-gradient(
        150deg,
        transparent 20%,
        rgba(0, 0, 0, 0.582) 80%
    );
}

.testimonial-body {
    gap: 2em;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    border: 0px solid rgba(255, 255, 255, 0.233);
    margin-bottom: 1em;
}

.testimonial-avatar {
    width: 8vw;
    aspect-ratio: 1/1;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    /* box-shadow:
        0 0 0 2px #888888,
        0 0 0 7px #ccc; */
}

.body-right {
    flex: 1;
    display: flex;
    min-height: 14vh;
    align-items: flex-start;
    border: 0px solid rgba(255, 255, 255, 0.233);
}

.testimonial-quote {
    line-height: 1.6;
    color: #aaa;
    /* overflow: hidden; */
    text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.8);
    padding-left: 3em;
}

.testimonial-quote::before {
    font-family: sans-serif;
    position: absolute;
    content: "”";
    font-size: 6em;
    line-height: 0.5;
    color: var(--color-primary);
    vertical-align: top;
    margin-right: 0.1em;
    transform: translateX(-0.7ch) translateY(0.2em);
}

.testimonial-footer {
    color: #949494;      
    display: flex;
    justify-content: flex-end;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.9em;
}

.testimonial-name {
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.testimonial-company,
.testimonial-role {
    color: #949494;      
    margin-top: 0.2em;  
}