*
{
    box-sizing: border-box;
}

body
{
    background-color: #fff;
    min-height: 100%;
}

.slidercontainer
{
    /*background-color: #232529;*/
    position: relative;
    margin: auto;
    min-height: 218px;
    max-width: 100%;
}
#carousel
{
    width: 100%;
}
.smallcarousel
{
    display: none;
    text-align: center;
    margin: auto;
    overflow: hidden;
}
.smallcarousel img
{
    position: absolute;
    left: 0;
    top: 0;
}
.smallcarousel, #progressbar1
{
    display: none;
}

.slide
{
    position: absolute;
    overflow: hidden;
    text-align: center;
    width: 265px;
    height: 98px;
    top: 60px;
    bottom: 60px;
    box-shadow: -7px 7px 20px;
}

.slide img
{
    min-width: 100%;
    min-height: 100%;
}

.active
{
    left: 88px;
    right: 88px;
    top: 33px;
    bottom: 33px;
    width: 413px;
    height: 152px;
    z-index: 10;
}

.left
{
    left: 44px;
    z-index: 3;
}
.right
{
    left: 281px;
    z-index: 4;
}
.mostleft
{
    left: 22px;
    z-index: 1;
    width: 177px;
    height: 65px;
    top: 76px;
}
.mostright
{
    left: 385px;
    z-index: 2;
    width: 177px;
    height: 65px;
    top: 76px;
}
.shadow
{
    box-shadow: 1px 1px 2px;
}

@media all and (max-width: 870px) and (min-width: 601px)
{
    .smallcarousel, #progressbar1
    {
        display: none;
    }
    .widecarousel
    {
        display: block;
    }
    .slidercontainer
    {
        background-color: #232529;
        width: 590px;
        position: relative;
        margin: auto;
        min-height: 218px;
    }
    #carousel
    {
        width: 100%;
    }


    .slide
    {
        position: absolute;
        overflow: hidden;
        text-align: center;
        width: 265px;
        height: 98px;
        top: 60px;
        bottom: 60px;
        box-shadow: -7px 7px 20px;
    }

    .slide img
    {
        /*  max-width: 100%;*/
    }

    .active
    {
        left: 88px;
        right: 88px;
        top: 33px;
        bottom: 33px;
        width: 413px;
        height: 152px;
        z-index: 10;
    }

    .left
    {
        left: 44px;
        z-index: 3;
    }
    .right
    {
        left: 281px;
        z-index: 4;
    }
    .mostleft
    {
        left: 22px;
        z-index: 1;
        width: 177px;
        height: 65px;
        top: 76px;
    }
    .mostright
    {
        left: 385px;
        z-index: 2;
        width: 177px;
        height: 65px;
        top: 76px;
    }


}

@media all and (max-width: 599px) and (min-width: 451px)
{
    .smallcarousel
    {
        display: block;
        width: 440px;
    }
    .widecarousel
    {
        display: none;
    }
    .slidercontainer
    {
        width: 440px;
        position: relative;
        margin: auto;
        min-height: 218px;
        overflow: hidden;
    }
}
@media all and (max-width: 450px)
{
    .smallcarousel
    {
        display: block;
        width: 290px;
    }
    .widecarousel
    {
        display: none;
    }
    .slidercontainer
    {
        width: 290px;
        position: relative;
        margin: auto;
        min-height: 218px;
        overflow: hidden;
    }
}


@media only screen and (min-device-width : 768px) and (orientation : landscape)
{
    .smallcarousel1
    {
        display: block !important;
        width: 290px !important;
    }
    .widecarousel1
    {
        display: none !important;
    }
    .slidercontainer1
    {
        width: 290px !important;
        position: relative !important;
        margin: auto !important;
        min-height: 218px !important;
        overflow: hidden !important;
    }
}