.slider {
    position: relative;
    height: 440px;
    width: 100%;
    border-radius: 3px;
    overflow: hidden;
    margin: 0 auto;
}

    .slider.fullscreen {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

        .slider.fullscreen ul.slides {
            height: 100%;
        }

        .slider.fullscreen ul.indicators {
            z-index: 2;
            bottom: 30px;
        }

    .slider .slides {
        background-color: #9e9e9e;
        margin: 0;
        height: 400px;
    }

        .slider .slides li {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            height: inherit;
            overflow: hidden;
        }

            .slider .slides li img {
                height: 100%;
                width: 100%;
                background-size: cover;
                background-position: center;
            }

            .slider .slides li .caption {
                color: #fff;
                position: absolute;
                top: 15%;
                left: 15%;
                width: 70%;
                opacity: 0;
            }

                .slider .slides li .caption p {
                    color: #e0e0e0;
                }

            .slider .slides li.active {
                z-index: 2;
            }

    .slider .indicators {
        position: absolute;
        text-align: center;
        left: 0;
        right: 0;
        margin: 0;
        bottom: 30px;
        z-index: 100;
    }

    .slider .indicators {
    }



        .slider .indicators .indicator-item {
            display: inline-block;
            position: relative;
            cursor: pointer;
            height: 16px;
            width: 16px;
            margin: 0 12px;
            background-color: #666666;
            -webkit-transition: background-color .3s;
            -moz-transition: background-color .3s;
            -o-transition: background-color .3s;
            -ms-transition: background-color .3s;
            transition: background-color .3s;
            border-radius: 50%;
            border: 3px solid #ffffff;
            -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
            -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        }


            .slider .indicators .indicator-item.active {
                background-color: #ffffff;
            }


@media(max-width:768px) {
    .slider {
        width: 480px;
        height: 260px;
    }

        .slider .slides {
            height: 260px;
        }
}

@media(min-width:768px) {
    .slider {
        width: 720px;
        height: 300px;
    }

        .slider .slides {
            height: 300px;
        }
}

@media(min-width:1025px) {
    .slider {
        width: 940px;
        height: 400px;
    }

        .slider .slides {
            height: 400px;
        }
}

@media(max-width:480px) {
    .slider {
        width: 320px;
        height: 190px;
    }

        .slider .slides {
            height: 190px;
        }

        .slider .indicators .indicator-item {
            height: 8px;
            width: 8px;
            margin: 0 6px;
            border: 1px solid #ffffff;
        }

        .slider .indicators {
            bottom: 20px;
        }
}