/* 1 Общие стили */

#banner {
    max-width: 100%;
    background: #eee;
}

#banner .image-banner {
    height: 600px;
}

#banner .slide1 .image-banner {

}

#banner .slide2 .image-banner {
    background: url("../images/slide2.jpg") no-repeat center center;
}

#banner .slide3 .image-banner {
    background: url("../images/slide3.jpg") no-repeat center center;
}

#banner .slide4 .image-banner {
    background: url("../images/slide4.jpg") no-repeat center center;
}

#banner .slide5 .image-banner {
    background: url("../images/slide5.jpg") no-repeat center center;
}

.text-banner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    padding-top: 55px;
}

.text-banner .appointments,
.text-banner .heading,
.text-banner .description,
.text-banner .banner-link {
    max-width: 46%;
}

.text-banner .appointments {
    text-decoration: none;
    text-transform: uppercase;
    font-family: RobotoBold;
    font-size: 1.1em;
}

.text-banner .heading {
    margin: 15px 0 35px 0;
    font-weight: normal;
    font-size: 2.9em;
    max-width: 75%;
    color: #4d4d4d;
    line-height: 1.2em;
}

.text-banner .description {
    margin: 0 0 70px 0;
    font-size: 1.3em;
    line-height: 1.6em;
}

.text-banner banner-link {
    font-size: 1.1em;
}







/* 3 Для мобильных устройств */


@media screen and (max-width: 1100px) {
    #banner .item .image-banner {
        height: 550px;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;

    }

    .text-banner .description {
        margin: 0 0 50px 0;
    }
}

@media screen and (max-width: 1000px) {
    #banner .item .image-banner {
        height: 500px;
    }

    .text-banner {
        padding-top: 40px;
    }

    .text-banner .heading {
        margin: 5px 0 25px 0;
        font-size: 2.4em;
    }


    .text-banner .description {
        margin: 0 0 45px 0;
    }
}

@media screen and (max-width: 900px) {
    #banner .item .image-banner {
        height: 450px;
    }

    .text-banner {
        padding-top: 25px;
    }

    .text-banner .appointments {
        font-size: 1em;
    }

    .text-banner .heading {
        margin: 5px 0 20px 0;
        line-height: 1.1em;

    }

    .text-banner .description {
        margin: 0 0 45px 0;
        font-size: 1.2em;
        line-height: 1.5em;
    }

}

@media screen and (max-width: 810px) {
    #banner .item .image-banner {
        height: 400px;
    }

    .text-banner {
        padding-top: 20px;
    }

    .text-banner .heading {
        margin: 5 0 15px 0;
        font-size: 1.8em;
        font-family: RobotoRegular;
        color: #555;
    }

    .text-banner .description {
        margin: 0 0 35px 0;
    }
}

@media screen and (max-width: 768px) {
    #banner .item .image-banner {
        height: 380px;
    }

    .text-banner {
        padding-top: 15px;
    }

    .text-banner .description {
        font-size: 1.15em;
    }
}

@media screen and (max-width: 720px) {

    #banner .text-banner {
        position: static;

    }

    #banner .slide1 .image-banner {
        background: url("../images/slide1_m.jpg") no-repeat center center;
    }

    #banner .slide2 .image-banner {
        background: url("../images/slide2_m.jpg") no-repeat center center;
    }

    #banner .slide3 .image-banner {
        background: url("../images/slide3_m.jpg") no-repeat center center;
    }

    #banner .slide4 .image-banner {
        background: url("../images/slide4_m.jpg") no-repeat center center;
    }

    #banner .slide5 .image-banner {
        background: url("../images/slide5_m.jpg") no-repeat center center;
    }

    #banner .item .image-banner {
        height: 400px;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
    }

    .text-banner .appointments,
    .text-banner .heading,
    .text-banner .description,
    .text-banner .banner-link {
        max-width: 100%;

    }

    .text-banner .heading {
        max-width: 100%;
    }

    .text-banner .heading {
        margin: 15px 0 20px 0;
        font-size: 2.4em;
        font-family: RobotoLignt;
        color: #555;
        line-height: 1.2em;
    }

    .text-banner {
        padding-top: 25px;
        padding-bottom: 65px;
        text-align: center;
    }
}

@media screen and (max-width: 680px) {
    #banner .item .image-banner {
        height: 380px;
    }
}

@media screen and (max-width: 590px) {
    #banner .item .image-banner {
        height: 350px;
    }
}

@media screen and (max-width: 540px) {
    #banner .item .image-banner {
        height: 320px;
    }
}

@media screen and (max-width: 480px) {
    #banner .item .image-banner {
        height: 290px;
    }

    .text-banner .heading {
        font-size: 1.8em;
        font-family: RobotoRegular;
    }
}

@media screen and (max-width: 440px) {
    #banner .item .image-banner {
        height: 240px;
    }
}

@media screen and (max-width: 380px) {
    #banner .item .image-banner {
        height: 220px;
    }
}