*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
@media (min-width: 1025px) {
.slider{
    width:100%;
    height: 650px;
    position:relative;
    overflow:hidden;
}

.slides
{
    display: flex;
    transition:transform 0.8s ease-in-out;
}

.slide
{
    min-width: 100%;
}

.slide img{
    width:100%;
    height: 650px;
    object-fit: cover;
}

/* Fade Effect */

.slide{
    animation:fade 1s;
}

@keyframes fade {
    from{opacity:0.4;}
    to{opacity:1;}
}

/* Previous */

.prev,
.next{

    position:absolute;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;

    padding:12px;

    color:#fff;
    font-size:30px;
    font-weight:bold;

    background:rgba(0,0,0,.4);

    user-select:none;
}

.prev{
    left:10px;
}

.next{
    right:10px;
}

.prev:hover,
.next:hover{
    background:rgba(0,0,0,.8);
}


/* Dots */

.dots{

    text-align:center;
    margin-top: 10px;
}

.dot{

    width:14px;
    height:14px;

    display:inline-block;

    border-radius:50%;

    background:#bbb;

    margin:5px;

    cursor:pointer;

}

.dot.active{

    background:#1565c0;

}
}

@media (min-width: 768px) and (max-width: 1024px)
{
.slider{
    width:100%;
    height: 450px;
    position:relative;
    overflow:hidden;
}

.slides
{
    display: flex;
    transition:transform 0.8s ease-in-out;
}

.slide
{
    min-width: 100%;
}

.slide img{
    width:100%;
    height: 450px;
    object-fit: fill;
}

/* Fade Effect */

.slide{
    animation:fade 1s;
}

@keyframes fade{
    from{opacity:0.4;}
    to{opacity:1;}
}

/* Previous */

.prev,
.next{

    position:absolute;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;

    padding:12px;

    color:#fff;
    font-size:30px;
    font-weight:bold;

    background:rgba(0,0,0,.4);

    user-select:none;
}

.prev{
    left:10px;
}

.next{
    right:10px;
}

.prev:hover,
.next:hover{
    background:rgba(0,0,0,.8);
}


/* Dots */

.dots{

    text-align:center;
    margin-top:10px;
}

.dot{

    width:14px;
    height:14px;

    display:inline-block;

    border-radius:50%;

    background:#bbb;

    margin:5px;

    cursor:pointer;
}

.dot.active{

    background:#1565c0;
}
}
/* Mobile */

@media(max-width:767px)
{
.slider{
    width:100%;
    height: 250px;
    position:relative;
    overflow:hidden;
}

.slides
{
    display: flex;
    transition:transform 0.8s ease-in-out;
}

.slide
{
    min-width: 100%;
}

.slide img{
    width:100%;
    height: 250px;
    object-fit: fill;
}

/* Fade Effect */

.slide{
    animation:fade 1s;
}

@keyframes fade{
    from{opacity:0.4;}
    to{opacity:1;}
}

/* Previous */

.prev,
.next{

    position:absolute;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;

    padding:12px;

    color:#fff;
    font-size:30px;
    font-weight:bold;

    background:rgba(0,0,0,.4);

    user-select:none;
}

.prev{
    left:10px;
}

.next{
    right:10px;
}

.prev:hover,
.next:hover{
    background:rgba(0,0,0,.8);
}


/* Dots */

.dots{

    text-align:center;
    margin-top:10px;
}

.dot{

    width:14px;
    height:14px;

    display:inline-block;

    border-radius:50%;

    background:#bbb;

    margin:5px;

    cursor:pointer;
}

.dot.active{

    background:#1565c0;
}
}