$carousel-width: 680px;
$carousel-height: 300px;

body {
    background: #333;
    color: #fff;
    font-size: 22pt;
    text-align: center;
    font-family: 'Teko';
    letter-spacing: 0.15em;
}

body * {
    -webkit-user-select: none
}

.wrap {
    position: relative;
    width: $carousel-width;
    height: 300px;
    margin: 0 auto;
}

.window {
    overflow: hidden;
    position: relative;
    //background: #222;
}

#carousel, #carousel2 {
    width: 10000px;
    position: relative;
    top: 0;
    //left: -450px;
}

.slide, .slide2 {
    height: 300px;
    width: 370px;
    cursor: pointer;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 10px;
}


/*.slide#b1, .slide#c1 {
    background: #556270
}

.slide#b2, .slide#c2 {
    background: #4ECDC4
}

.slide#b3, .slide#c3 {
    background: #9CE462
}

.slide#b4, .slide#c4 {
    background: #FF6B6B
}

.slide#b5, .slide#c5 {
    background: #C44D33
}*/

#prev, #prev2, #next, #next2 {
    cursor: pointer;
    position: absolute;
    top: 120px;
    /* bottom: -40px; */
    color: #6f99a7;
    font-size: 20pt;
}

#prev, #prev2 {
    left: 371px;
}

#next, #next2 {
    right: 370px;
}

#mobile-prev, #mobile-prev2, #mobile-next, #mobile-next2 {
    cursor: pointer;
    position: absolute;
    top: 120px;
    /* bottom: -40px; */
    color: #mobile-6f99a7;
    font-size: 20pt;
}

#mobile-prev, #mobile-prev2 {
    left: 0px;
}

#mobile-next, #mobile-next2 {
    right: 0px;
}

.transition {
    transition: .7s;
}