/*region iPhone 4 and iPhone 5 styles */
@media only screen and (min-device-width : 320px) {

    /*region Index banner styles */
    .index-banner {
        padding: 72px 0 15px;
        background: -webkit-linear-gradient(-90deg, #0b101a 0%, #272946 100%);
        background: -moz-linear-gradient(-90deg, #0b101a 0%, #272946 100%);
        background: -o-linear-gradient(-90deg, #0b101a 0%, #272946 100%);
        background: -ms-linear-gradient(-90deg, #0b101a 0%, #272946 100%);
        background: linear-gradient(180deg, #0b101a 0%, #272946 100%);
        overflow: hidden;
    }

    .index-banner .icon {
        display: block;
        width: 96px;
        height: auto;
        margin: 0 auto;
    }

    .index-banner .title {
        padding: 10px 0 5px;
        color: #fff;
        font-size: 2.438em;
        font-weight: 400;
    }

    .index-banner .description {
        padding: 0 30px 20px;
        color: #fff;
        font-size: 1.25em;
        font-weight: 300;
    }

    .index-banner .btn {
        width: 180px;
        height: 54px;
        padding: 0;
        font-size: 1.375em;
        font-weight: 400;
        line-height: 54px;
    }

    .index-banner .device {
        display: block;
        width: 548px;
        height: auto;
        margin: 20px 0 0 20px;
    }
    /*endregion*/

    /*region Index iOS banner styles */
    .index-ios-banner {
        padding: 72px 0 15px;
        background: -webkit-linear-gradient(-90deg, #0b101a 0%, #272946 100%);
        background: -moz-linear-gradient(-90deg, #0b101a 0%, #272946 100%);
        background: -o-linear-gradient(-90deg, #0b101a 0%, #272946 100%);
        background: -ms-linear-gradient(-90deg, #0b101a 0%, #272946 100%);
        background: linear-gradient(180deg, #0b101a 0%, #272946 100%);
        overflow: hidden;
    }

    .index-ios-banner .icon {
        display: block;
        width: 96px;
        height: auto;
        margin: 0 auto;
    }

    .index-ios-banner .title {
        padding: 10px 0 5px;
        color: #fff;
        font-size: 2.438em;
        font-weight: 400;
    }

    .index-ios-banner .description {
        padding: 0 30px 20px;
        color: #fff;
        font-size: 1.25em;
        font-weight: 300;
    }

    .index-ios-banner .btn {
        width: 180px;
        height: 54px;
        padding: 0;
        font-size: 1.375em;
        font-weight: 400;
        line-height: 54px;
    }

    .index-ios-banner .device {
        display: block;
        width: 548px;
        height: auto;
        margin: 20px 0 0 20px;
    }

    .index-ios-banner .watch_video {
        display: inline-block;
        height: 36px;
        margin: 20px 0 0 20px;
        padding: 0 0 0 45px;
        color: #3ba6ff;
        font-size: 1.375em;
        font-weight: 400;
        background: url("/img/theme.20170130/index/playbtn01.svg") no-repeat 0 0;
        background-size: 36px 36px;
    }
    /*endregion*/

    /*region Index content styles */
    .index-content {
        padding: 30px 15px;
        overflow: hidden;
    }

    .index-content .title {
        padding: 0 0 20px;
        color: #17212f;
        font-size: 1.75em;
        font-weight: 300;
    }

    .index-content .text {
        color: #4d545f;
        font-size: 0.875em;
        font-weight: 400;
    }

    .index-content .screen {
        display: block;
        width: 290px;
        height: auto;
        margin: 30px auto;
        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
    }

    .index-content .separator {
        border: none;
        height: 1px;
        margin: 30px auto 20px;
        color: #a2a7ae;
        background-color: #a2a7ae;
    }

    .index-content .list {
        margin: 20px 0 20px 30px;
        color: #00a6fb;
        font-size: 1em;
        font-weight: 300;
        line-height: 1.5;
    }

    .index-content .list li span {
        color: #15212e;
        font-weight: 400;
    }

    .feature-block {
        padding: 20px 0;
    }

    .feature-block .icon {
        display: block;
        width: 95px;
        height: auto;
    }

    .feature-block .title {
        padding: 20px 0 15px;
        color: #17212f;
        font-size: 1.625em;
        font-weight: 300;
    }

    .quote {
        width: 280px;
        margin: 0 auto;
        padding: 0;
    }

    .quote .quote-text {
        padding: 5px 0 15px 25px;
        color: #4d545f;
        font-size: 1.063em;
        font-weight: 300;
        line-height: 1.5;
        background: url("/img/mobile/common/quote.svg") no-repeat 0 0;
        background-size: 17px 14px;
    }

    .quote .quote-author {
        color: #666c75;
        font-size: 0.875em;
        font-weight: 400;
        line-height: 1.5;
        text-align: right;
    }

    .rating-download {
        padding: 20px 0 0;
    }

    .rating-download .rating {
        display: block;
        width: 101px;
        height: auto;
        margin: 0 auto 20px;
    }

    .rating-download .btn {
        width: 156px;
        height: 47px;
        padding: 0;
        color: #fff;
        font-size: 1.25em;
        font-weight: 400;
        line-height: 47px;
        border-radius: 6px;
    }
    /*endregion*/

    /*region Index page styles */
    .index-reading-experience .screen {
        width: 486px;
        box-shadow: none;
    }

    .index-edit-pdfs .screen {
        width: 290px;
        height: 176px;
        margin: 30px auto 0;
    }

    .index-fill-forms .screen {
        width: 290px;
        height: 176px;
        margin: 30px auto 0;
    }

    .index-share-collaborate .screen {
        width: 320px;
        margin: 30px 0 0 -15px;
        box-shadow: none;
    }

    .index-works-across .btn.trans-blue {
        width: 140px;
        height: 34px;
        margin: 30px 0 0;
        padding: 0;
        font-size: 0.813em;
        line-height: 34px;
    }

    .index-works-across .screen {
        width: 516px;
        margin: 30px 0 0 -240px;
        box-shadow: none;
    }

    .index-beautiful-design .screen {
        width: 290px;
        margin: 30px auto 0;
    }

    .powerful-features {
        padding: 0 0 20px;
    }

    .powerful-features .feature {
        display: inline-block;
        width: 33%;
        padding: 0 0 20px;
        text-align: center;
    }

    .powerful-features .feature .icon {
        display: block;
        width: 64px;
        height: auto;
        margin: 0 auto 10px;
    }
    /*endregion*/

    /*region Index iOS page styles */
    .index-ios-reading-experience .screen {
        box-shadow: none;
    }

    .index-ios-reading-experience .screen.screen-1 {
        width: 274px;
        height: auto;
        margin: 10px auto 30px;
    }

    .index-ios-reading-experience .screen.screen-2 {
        width: 290px;
        height: auto;
        margin: 30px auto 0;
    }

    .index-ios-edit-pdfs .screen {
        width: 278px;
        height: auto;
        box-shadow: none;
    }

    .index-ios-edit-pdfs .icon {
        margin: 0 auto;
    }

    .index-ios-fill-forms .screen {
        width: 420px;
        height: auto;
        margin: 30px 0 0 0;
        box-shadow: none;
    }

    .index-ios-file-manager .screen {
        width: 298px;
        height: auto;
        margin: 30px 0 0 -4px;
        box-shadow: none;
    }

    .index-ios-share-collaborate .screen {
        width: 320px;
        height: auto;
        margin: 30px 0 0 -15px;
        box-shadow: none;
    }

    .index-ios-for-mac .btn {
        width: 140px;
        height: 34px;
        margin: 30px 0 0;
        padding: 0;
        font-size: 0.813em;
        line-height: 34px;
    }

    .index-ios-for-mac .screen {
        width: 320px;
        height: auto;
        margin: 30px 0 0 -15px;
        box-shadow: none;
    }

    .index-ios-edit-transfer .screen {
        width: 290px;
        height: auto;
        margin: 30px auto 0;
    }
    /*endregion*/

}
/*endregion*/


/*region iPhone 6/7 styles */
@media only screen and (min-device-width : 375px) {

    /*region Index content styles */
    .index-content {
        padding: 30px 25px;
    }

    .index-content .screen {
        width: 320px;
    }

    .quote {
        width: 315px;
    }
    /*endregion*/

    /*region Index page styles */
    .index-reading-experience .screen {
        width: 486px;
        height: auto;
    }

    .index-edit-pdfs .screen {
        width: 320px;
        height: 194px;
        margin: 30px auto 0;
    }

    .index-fill-forms .screen {
        width: 320px;
        height: 194px;
        margin: 30px auto 0;
    }

    .index-share-collaborate .screen {
        width: 374px;
        height: auto;
        margin: 30px 0 0 -24px;
    }

    .index-works-across .screen {
        width: 516px;
        height: auto;
        margin: 30px 0 0 -180px;
        box-shadow: none;
    }

    .index-beautiful-design .screen {
        width: 352px;
        height: auto;
        margin: 30px 0 0 -14px;
    }

    /*endregion*/

    /*region Index iOS page styles */
    .index-ios-reading-experience .screen.screen-1 {
        width: 274px;
        height: auto;
        margin: 10px auto 30px;
    }

    .index-ios-reading-experience .screen.screen-2 {
        width: 324px;
        height: auto;
        margin: 30px auto 0;
    }

    .index-ios-edit-pdfs .screen {
        width: 278px;
        height: auto;
    }

    .index-ios-fill-forms .screen {
        width: 420px;
        height: auto;
        margin: 30px 0 0 0;
    }

    .index-ios-file-manager .screen {
        width: 298px;
        height: auto;
        margin: 30px auto 0;
    }

    .index-ios-share-collaborate .screen {
        width: 352px;
        height: auto;
        margin: 30px 0 0 -13px;
    }

    .index-ios-for-mac .screen {
        width: 352px;
        height: auto;
        margin: 30px 0 0 -13px;
    }

    .index-ios-edit-transfer .screen {
        width: 352px;
        height: auto;
        margin: 30px 0 0 -13px;
    }
    /*endregion*/

}
/*endregion*/


/*region iPhone 6 Plus styles */
@media only screen and (min-device-width : 414px) {

    /*region Index banner styles */
    .index-banner .icon {
        content: url("/img/mobile/common/PDFExpert_big_3x.png");
    }

    .index-banner .device {
        content: url("/img/mobile/index/alldevices_home_3x.png");
    }
    /*endregion*/

    /*region Index iOS banner styles */
    .index-ios-banner .icon {
        content: url("/img/mobile/common/pdf_expert_ios_3x.png");
    }

    .index-ios-banner .device {
        content: url("/img/mobile/index.ios/alldevices_home_3x.png");
    }
    /*endregion*/

    /*region Index content styles */
    .index-content {
        padding: 30px;
    }

    .index-content .screen {
        width: 354px;
        height: 214px;
    }

    .quote {
        width: 315px;
    }
    /*endregion*/

    /*region Index page styles */
    .index-reading-experience .screen {
        content: url("/img/mobile/index/mac_read_3x.png");
        width: 486px;
        height: auto;
    }

    .index-edit-pdfs .screen {
        width: 320px;
        height: 194px;
        margin: 30px auto 0;
    }

    .index-fill-forms .screen {
        width: 320px;
        height: 194px;
        margin: 30px auto 0;
    }

    .index-share-collaborate .screen {
        content: url("/img/mobile/index/mac_share_3x.png");
        width: 374px;
        height: auto;
        margin: 30px 0 0 -10px;
    }

    .index-works-across .screen {
        content: url("/img/mobile/index/alldevices_work_3x.png");
        width: 516px;
        height: auto;
        margin: 30px 0 0 -160px;
        box-shadow: none;
    }

    .index-beautiful-design .screen {
        content: url("/img/mobile/index/transfer_video_3x.png");
        width: 352px;
        height: auto;
        margin: 30px auto 0;
    }
    /*endregion*/

    /*region Index iOS page styles */
    .index-ios-reading-experience .screen.screen-1 {
        content: url("/img/mobile/index.ios/ipad_pencil_pdf_3x.png");
        width: 274px;
        height: auto;
        margin: 10px auto 30px;
    }

    .index-ios-reading-experience .screen.screen-2 {
        content: url("/img/mobile/index.ios/ipad_pencil_anotane_3x.png");
        width: 324px;
        height: auto;
        margin: 30px auto 0;
    }

    .index-ios-edit-pdfs .screen {
        content: url("/img/mobile/index.ios/iphone_edit_3x.png");
        width: 278px;
        height: auto;
    }

    .index-ios-fill-forms .screen {
        content: url("/img/mobile/index.ios/iphone_ipad_sign_3x.png");
        width: 420px;
        height: auto;
        margin: 30px 0 0 0;
    }

    .index-ios-file-manager .screen {
        content: url("/img/mobile/index.ios/files_3x.png");
        width: 298px;
        height: auto;
        margin: 30px auto 0;
    }

    .index-ios-share-collaborate .screen {
        content: url("/img/mobile/index.ios/iphone_share_3x.png");
        width: 352px;
        height: auto;
        margin: 30px auto 0;
    }

    .index-ios-for-mac .screen {
        content: url("/img/mobile/index.ios/macbook_more_3x.png");
        width: 352px;
        height: auto;
        margin: 30px auto 0;
    }

    .index-ios-edit-transfer .screen {
        content: url("/img/mobile/index.ios/transfer_video_3x.png");
        width: 352px;
        height: auto;
        margin: 30px auto 0;
    }
    /*endregion*/

}
/*endregion*/


/*region Landscape styles */
@media only screen and (min-device-width : 415px) {

    /*region Index banner styles */
    .index-banner .device {
        margin-left: auto;
        margin-right: auto;
    }
    /*endregion*/

    /*region Index iOS banner styles */
    .index-ios-banner .device {
        margin-left: auto;
        margin-right: auto;
    }
    /*endregion*/

    /*region Index content styles */
    .feature-block {
        text-align: center;
    }

    .feature-block .icon {
        margin: 0 auto;
    }
    /*endregion*/

    /*region Index page styles */
    .index-reading-experience .screen {
        margin-left: auto;
        margin-right: auto;
    }

    .index-share-collaborate .screen {
        margin-left: auto;
        margin-right: auto;
    }

    .index-works-across .screen {
        margin-left: auto;
        margin-right: auto;
    }
    /*endregion*/

    /*region Index iOS page styles */
    .index-ios-fill-forms .screen {
        margin: 30px auto 0;
    }
    /*endregion*/

}
/*endregion*/