.header {
    height: 883px;
}

.header .bg {
    width: 100%;
    height: 883px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: 50%;
    background-position: 50% bottom;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1000ms ease-in-out;
    -moz-transition: opacity 1000ms ease-in-out;
    -webkit-transition: opacity 1000ms ease-in-out;
}

.app {
    margin-top: 89px;
    text-align: center;
    position: relative;
}

.app .link-app-store {
    background: url(../images/drh-app-store-link-top.png) no-repeat 0 0;
    margin-top: 140px;
    width: 153px;
    height: 54px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

    .app .link-app-store:hover {
        -moz-box-shadow: 0 0 24px rgba(104,199,255, 0.7);
        -webkit-box-shadow: 0 0 24px rgba(104,199,255, 0.7);
        box-shadow: 0 0 24px rgba(104,199,255, 0.7);
    }

    .app .link-app-store,
    .app .link-app-store:hover {
        transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
    }

.app .center {
    background: url(../images/dr-app.png) center 0 no-repeat;
    height: 748px;
}

.section-0 {
}

    .section-0 .center {
        height: 666px;
        position: relative;
    }

    .section-0 .pic {
        background: url(../images/dr-feature-0.jpg) center bottom no-repeat;
        position: absolute;
        top: 60px;
        right: -195px;
        width: 717px;
        height: 606px;
    }

    .section-0 .intro {
        padding: 110px 0 0 100px;
        width: 541px;
        position: relative;
    }

    .section-0 .title {
        font-size: 36px;
        margin-bottom: 10px;
    }

    .section-0 .desc {
        margin-bottom: 20px; 
        font-size: 16px;
    }

.section-1 {
    background: url(../images/drh-section-0-bg.jpg) 0 0 repeat-x;
}

    .section-1 .center {
        height: 700px;
        position: relative;
    }

    .section-1 .pic {
        position: absolute;
        bottom: 0;
        left: 0px;
        background: url(../images/dr-feature-1.jpg) 0 0 no-repeat;
        width: 430px;
        height: 552px;
    }

    .section-1 .intro {
        text-align: center;
        padding: 160px 0 0 470px;
        width: 496px;
        font-size: 16px;
        position: relative;
    }

    .section-1 .title {
        font-size: 32px;
        margin-bottom: 15px
    }

    .section-1 .desc {
        margin-bottom: 22px;
    }

    .section-1 blockquote {
        margin-bottom: 8px;
        color: #fff;
    }

    .section-1 .from {
        font-size: 14px;
    }

    .section-1 .from span {
        color: #777;
    }

.section-2 {
}

    .section-2 .center {
        height: 598px;
        position: relative;
    }

    .section-2 .pic {
        position: absolute;
        top: 80px;
        right: -75px;
        background: url(../images/dr-feature-2.jpg) 0 0 no-repeat;
        width: 623px;
        height: 518px;
    }

    .section-2 .intro {
        padding: 300px 0 0 40px;
        width: 470px;
        font-size: 16px;
        position: relative;
    }

    .section-2 .title {
        font-size: 36px;
    }

.section-3 {
}

    .section-3 .center {
        height: 653px;
        position: relative;
    }

    .section-3 .pic {
        position: absolute;
        top: 120px;
        left: 45px;
        background: url(../images/dr-feature-3.jpg) 0 0 no-repeat;
        width: 531px;
        height: 533px;
    }

    .section-3 .intro {
        padding: 250px 0 0 540px;
        width: 422px;
        font-size: 16px;
        position: relative;
    }

    .section-3 .title {
        font-size: 36px;
    }

.section-4 {
}

    .section-4 .center {
        height: 539px;
        position: relative;
    }

    .section-4 .pic {
        position: absolute;
        top: 60px;
        right: -117px;
        width: 813px;
        height: 479px;
        background: url(../images/dr-feature-4.jpg) 0 0 no-repeat;
    }

    .section-4 .intro {
        padding: 185px 0 0 40px;
        width: 400px;
        font-size: 16px;
        position: relative;
    }

    .section-4 .title {
        font-size: 36px;
    }

.section-5 {
    margin-top: 70px;
    background-color: #222;
}

    .section-5 .center {
        height: 370px;
        position: relative;
    }

    .section-5 .pic {
        position: absolute;
        bottom: 0;
        left: 30px;
        width: 524px;
        height: 428px;
        background: url(../images/dr-feature-5.jpg) 0 0 no-repeat;
    }

    .section-5 .intro {
        position: relative;
        padding: 105px 0 0 510px;
        width: 452px;
        font-size: 16px;
    }

    .section-5 .title {
        font-size: 36px;
    }

.section-6 {
}

    .section-6 .intro {
        width: 695px;
        position: relative;
        padding: 80px 0 80px 100px;
        font-size: 16px;
        line-height: 2;
    }

    .section-6 .title {
        font-size: 36px;
    }


.section-7 {
    text-align: center;
    background: url(../images/dr-feature-7.jpg) 0 0 repeat-x;
}

    .section-7 .center {
        height: 410px;
        position: relative;
    }

    .section-7 .title {
        font-size: 36px;
        line-height: 120px;
    }

    .section-7 .videos {
    }

    .section-7 .video {
        float: left;
        margin: 0 10px;
    }

    .section-7 .video-wrap {
        width: 300px;
        height: 170px;
        position: relative;
    }

    .section-7 .video-mask {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
        cursor: pointer;
    }

    .section-7 .videos iframe {
        width: 100%;
        height: 100%;
        /*
        width: 720px;
        height: 406px; */
    }

    .section-7 .video-wrap:hover {
        transform: scale(1.01);
        -ms-transform: scale(1.01);
        -webkit-transform: scale(1.01);
        -o-transform: scale(1.01);
        -moz-transform: scale(1.01);
    }

    .section-7 .video-wrap,
    .section-7 .video-wrap:hover {
        transition: all 200ms ease-in-out;
        -moz-transition: all 200ms ease-in-out;
        -webkit-transition: all 200ms ease-in-out;
    }

    .section-7 .desc {
        padding: 5px 0 0 0;
        font-size: 16px;
    }

.section-8 {
}

    .section-8 .center {
        height: 599px;
        position: relative;
    }

    .section-8 .pic {
        position: absolute;
        top: 80px;
        left: 30px;
        width: 910px;
        height: 419px;
        background: url(../images/dr-feature-8.jpg) 0 0 no-repeat;
    }

    .section-8 .link-app-store {
        position: absolute;
        top: 294px;
        right: 40px;
        background: url(../images/dr-app-store-link-bottom.png) no-repeat 0 0;
        width: 220px;
        height: 77px;
    }

    .section-8 .link-app-store:hover {
        background-position: -220px 0;
    }

.play-wrap {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    cursor: pointer;
}

.play-wrap .modal {
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: 0.4;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 250ms ease-in-out;
    -moz-transition: opacity 250ms ease-in-out;
    -webkit-transition: opacity 250ms ease-in-out;
}


.play-wrap.loading .modal {
    opacity: 0;
}

#play-elem {
    position: absolute;
    cursor: pointer;
    transition: width 250ms, height 250ms, top 250ms, left 250ms;
    -moz-transition: width 250ms, height 250ms, top 250ms, left 250ms;
    -webkit-transition: width 250ms, height 250ms, top 250ms, left 250ms;
}

#play-elem iframe {
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    padding: 2px;
    box-shadow: 0 0 30px rgba(255,255,255,0.33);
    -webkit-box-shadow: 0 0 30px rgba(255,255,255,0.33);
    -moz-box-shadow: 0 0 30px rgba(255,255,255,0.33);
}

#play-elem .btn-close{
    position: absolute;
    top: -12px;
    right: -12px;
    display: none;
}

.play-wrap.loading .btn-close {
    display: none;
}

#play-elem:hover .btn-close {
    display: block;
}