.box1 {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.slider {
    height: 100%;
    width: 100%;
    position: relative;
}

.mySlides {
    width: 100%;
    height: 100%;
}

.slidesImg {
    height: 100%;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
    justify-content: center;
}



.controls {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 50;
}

.arrow {
    height: 30px;
    width: 2rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: all 0.8s ease;
}

.arrow:hover {
    color: red;
    background: rgb(255, 255, 255);
    transition: all 0.8s ease;
}

.indicators {
    width: 40%;
    height: 2rem;
    position: absolute;
    bottom: 3rem;
    right: 50%;
    transform: translateX(50%);
    display: flex;
    justify-content: center;
    align-items: center;
}


.uiImg1, .uiImg2, .uiImg3, .motImg1, .motImg2, .motImg3, .motImg4,
.retImg1, .retImg2, .retImg3, .retImg4, .priImg1, .priImg2, .priImg3, .priImg4,
.illiImg1, .illiImg2, .illiImg3, .illiImg4 {
    border-radius: 10px;
}



.uiImg1 {
    background-image: url(../assets/cover/ui_frika.png);
}
.uiImg2 {
    background-image: url(../assets/cover/ui_kraut.png);
}
.uiImg3 {
    background-image: url(../assets/cover/ui_porti.png);
}



.uiLeft {
    left: 0;
    border-radius: 0 4px 4px 0;
}

.uiRight {
    right: 0;
    border-radius: 4px 0 0 4px;
}

.dotsUi {
    width: 8px;
    height: 8px;
    margin-left: 8px;
    margin-right: 8px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}




.motImg1 {
    background-image: url(../assets/cover/mot_travel.png);
}
.motImg2 {
    background-image: url(../assets/cover/mot_summer.png);
}
.motImg3 {
    background-image: url(../assets/cover/mot_nature.png);
}
.motImg4 {
    background-image: url(../assets/cover/mot_logo.png);
}


.slidesImg4 {
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    justify-content: center;
}

.dotsMot {
    width: 8px;
    height: 8px;
    margin-left: 8px;
    margin-right: 8px;
    border: 2px solid rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.692);
    border-radius: 50%;
}




.retImg1 {
    background-image: url(../assets/cover/ret_girl.png);
}
.retImg2 {
    background-image: url(../assets/cover/ret_vodka.png);
}
.retImg3 {
    background-image: url(../assets/cover/ret_neko.png);
}
.retImg4 {
    background-image: url(../assets/cover/ret_father.png);
}


.dotsRet {
    width: 8px;
    height: 8px;
    margin-left: 8px;
    margin-right: 8px;
    border: 2px solid rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.692);
    border-radius: 50%;
}






.priImg1 {
    background-image: url(../assets/cover/print_mueller.png);
}
.priImg2 {
    background-image: url(../assets/cover/print_die.png);
}
.priImg3 {
    background-image: url(../assets/cover/print_bus.png);
}
.priImg4 {
    background-image: url(../assets/cover/print_sloggy.png);
}


.dotsPri {
    width: 8px;
    height: 8px;
    margin-left: 8px;
    margin-right: 8px;
    border: 2px solid rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.692);
    border-radius: 50%;
}





.illiImg1 {
    background-image: url(../assets/cover/illi_me.png);
}
.illiImg2 {
    background-image: url(../assets/cover/illi_squirrel.png);
}
.illiImg3 {
    background-image: url(../assets/cover/illi_girl.png);
}
.illiImg4 {
    background-image: url(../assets/cover/illi_cherry.png);
}



.dotsIlli {
    width: 8px;
    height: 8px;
    margin-left: 8px;
    margin-right: 8px;
    border: 2px solid rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.692);
    border-radius: 50%;
}



.selected {
    width: 10px;
    height: 10px;
    border: 2px solid rgb(255, 255, 255);
    background: #d41414;
    border-radius: 50%;
}