@media only screen and (min-width: 375px) {
    /* div.issuesWrapperNoscroll app-issue-card, */
    div.issuesWrapperNoscroll ul.issues li
    {
        width: 48.5%;
        margin-right: 3%;
    }

    /* div.issuesWrapperNoscroll app-issue-card:nth-child(2n), */
    div.issuesWrapperNoscroll ul.issues li:nth-child(2n) {
        margin-right: 0;
    }

    div.articleFulltextBuyButton {
        max-width: 288px;
    }

    div.articleFulltextlikeButton {
        max-width: 288px;
    }

    label.purchaseCreditBon {
        font-size: 34px;
        line-height: 130px;
    }

    th.purchaseHistoryTablePublication div,
    td.purchaseHistoryTablePublication div {
        width: 140px;
    }
}

@media only screen and (min-width: 400px) {
    div.interest {
        float: left;
        width: 49.0%;
        margin-right: 2%;
    }

    div.interest:nth-child(2n) {
        margin-right: 0;
    }

    button.saveInterestsButton {
        width: 49.0%;
    }

    div.inputWrapperAboInput {
        width: 90%;
    }

    div.purchaseCreditBons {
        width: 80%;
    }
}

@media only screen and (min-width: 420px) {
	div.headerMenuItem a { font-size: 15px; }
    th.purchaseHistoryTableBoughtDate,
    td.purchaseHistoryTableBoughtDate {
        display: table-cell;
        padding-left: 5px;
    }
}

@media only screen and (min-width: 480px) {

    span.ctaSlideTextContainer { display: block; }

    div.ctaSwiperSlide { max-height: 280px; }


    div.issuesWrapperNoscroll app-article-card.articleLikeIssue {
        width: 48.5%;
        margin-right: 3%;
    }

    div.issuesWrapperNoscroll app-article-card.articleLikeIssue:nth-child(2n) {
        margin-right: 0;
    }

    div.voucherInputWrapper {
        width: 90%;
    }

    div.purchaseCreditBons {
        width: 70%;
    }
}

@media only screen and (min-width: 540px) {
    div.purchaseCreditBons {
        width: 60%;
    }

    th.purchaseHistoryTablePublication div,
    td.purchaseHistoryTablePublication div {
        width: 160px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

@media only screen and (min-width: 600px) {

    /* div.issuesWrapperNoscroll app-issue-card, */
    div.issuesWrapperNoscroll ul.issues li {
        width: 31.33%;
    }

    /* div.issuesWrapperNoscroll app-issue-card:nth-child(2n), */
    div.issuesWrapperNoscroll ul.issues li:nth-child(2n) {
        margin-right: 3%;
    }

    /* div.issuesWrapperNoscroll app-issue-card:nth-child(3n), */
    div.issuesWrapperNoscroll ul.issues li:nth-child(3n) {
        margin-right: 0;
    }

    div.breadCrumb {
        float: left;
    }

    div.articleFulltextCol1 div.breadCrumb {
        float: none;
    }

    div.issuesHeaderRight {
        clear: none;
        float: right;
        padding-top: 0px;
    }

    select.issuesHeaderSortTypes {
        float: right;
        margin-top: 0px;
    }

    div.inputWrapperIssuesHeaderSortType {
        display: inline-block;
        margin-top: 0px;
    }

    div.inputWrapperIssuesHeaderFilter {
        display: inline-block;
        margin-top: 0px;
        margin-left: 10px;
        max-width: 250px;
    }

    div.interest {
        width: 32.0%;
        margin-right: 2%;
    }

    div.interest:nth-child(2n) {
        margin-right: 2%;
    }

    div.interest:nth-child(3n) {
        margin-right: 0;
    }

    button.saveInterestsButton {
        width: 32.0%;
    }

    div.inputWrapperAboSelect {
        float: left;
        width: 44%;
        margin-right: 30px;
        margin-bottom: 0px;
    }

    div.inputWrapperAboInput {
        width: 33.85%;
        margin-right: 10px;
    }

    div.aboSelect button {
        float: left;
    }

    div.inputField textarea {
        height: 198px
    }

    div.inputWrapperContact div.inputField {
        float: left;
        width: 30%;
    }

    div.inputWrapperContact label.mobile {
        display: none;
    }

    div.inputWrapperContact label.desktop {
        display: block;
        float: left;
        width: 20%;
        padding: 5px 0px 0px 10px;
    }

    div.inputWrapperContact span.formError {
        width: 30%;
    }

    div.inputGroupSingle div.inputField {
        float: none;
        width: 100%;
    }

    div.inputGroupDouble div.inputWrapperContact {
        float: left;
        width: 50%;
    }

    div.inputGroupDouble div.inputWrapperContact div.inputField {
        width: 60%
    }

    div.inputGroupDouble div.inputWrapperContact label.desktop {
        width: 40%;
    }

    div.inputGroupDouble div.inputWrapperContact span.formError {
        width: 60%;
    }

    div.creditCol1 {
        float: left;
        width: 50%;
    }

    div.creditCol2 {
        float: left;
        width: 50%;
        text-align: right;
    }

    div.voucherInputWrapper {
        width: 80%;
    }

    button.creditVoucherButton {
        width: 16%;
    }

    section.feedbackFooterText {
        padding: 19px 122px 19px 44px;
    }

    button.feedbackFooterButton {
        position: absolute;
        bottom: 17px;
        right: 0px;
        margin: 0px;
    }

    div.inputWrapperpurchaseHistoryType {
        width: 30%;
        float: left;
    }

    div.inputWrapperpurchaseHistoryTime {
        width: 50%;
        float: left;
        margin-left: 5px;
    }

    div.overlay-page h2 { padding-bottom: 22px; font-size: 34px; line-height: 40px; }
    div.overlay-page p { padding-top: 22px; }


}

@media only screen and (min-width: 620px) {
    table.purchaseHistoryTable th,
    table.purchaseHistoryTable td {
        font-size: 14px;
        line-height: 22px;
    }

    th.purchaseHistoryTableType,
    td.purchaseHistoryTableType {
        display: table-cell;
        padding-left: 5px;
    }
}

@media only screen and (min-width: 700px) {
    div.inputOK {
        display: block;
    }

    div.purchaseCreditBons {
        width: 100%;
    }

    label.purchaseCreditBon {
        margin-left: 4%;
        width: 22%;
        height: 150px;
        float: left;
        font-size: 34px;
        line-height: 130px;
    }

    label.purchaseCreditBon:nth-child(even) {
        float: left;
    }

    label.purchaseCreditBon:first-child {
        margin-left: 0;
    }

}

@media only screen and (min-width: 769px) {

    .mobile {
        display: none;
    }

    .desktop {
        display: block;
    }

    header {
        position: fixed;
        height: 100px;
        z-index: 10;
    }

    div.headerInner,
    div.footerInner,
    section,
    article,
    div.toTopButtonInnerWrapper {
        width: 90%;
        max-width: 1140px;
        margin: 0px auto;
    }

    section,
    article {
        padding: 30px 0px 0px 0px;
    }

    div.headerInner {
        height: 100%;
    }

    div.headerBurger {
        display: none;
    }

    div.headerBurgerDrei {
        display: none;
    }

    div.burgerMenuOFF div.headerLogo,
    div.burgerMenuOFF div.headerMenu,
    div.burgerMenuOFF div.headerUser,
    div.burgerMenuOFF div.headerSearch,
    div.burgerMenuON div.headerLogo,
    div.burgerMenuON div.headerMenu,
    div.burgerMenuON div.headerUser,
    div.burgerMenuON div.headerSearch {
        display: block;
    }

    div.burgerMenuOFF div.headerLangswitchMobile,
    div.burgerMenuON div.headerLangswitchMobile,
    div.burgerMenuOFF div.headerUserMobile,
    div.burgerMenuON div.headerUserMobile {
        display: none;
    }

    div.headerItem {
        float: left;
        width: 6%;
    }

    div.headerUser,
    div.headerSearch,
    div.headerLangswitch {
        padding-top: 35px;
        float: right;
    }

    div.headerLogo {
        width: 25%;
        height: 100%;
    }

    div.headerLogo a {
        width: 100%;
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
    }

    div.headerLogo img {
        max-height: 70%;
        margin-left: -15px;
    }

    div.headerMenu {
        width: 55%;
        padding-top: 38px;
    }

    div.headerMenuItem {
        text-align: left;
    }

    button.buttonUserLogin:hover,
    button.buttonUserLogin:focus {
        color: #222222;
    }

    .iconEmptyInverse {
        color: #222222;
    }

    div.headerSearch {
        position: relative;
        top: 0px;
    }

    input.searchBox {
        font-size: 15px;
        background-color: #222222;
    }

    input.searchBox::-webkit-input-placeholder {
        color: #999999;
    }

    input.searchBox::-moz-placeholder {
        color: #999999;
    }

    input.searchBox::-ms-input-placeholder {
        color: #999999;
    }

    input.searchBox::-moz-placeholder {
        color: #999999;
    }

    input.searchBox:placeholder {
        color: #999999;
    }

    div.searchResultList {
        max-height: calc(100vh - 136px);
        max-height: -webkit-calc(100vh - 136px);
    }

    div.searchResultList::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    div.searchResultList::-webkit-scrollbar-button:start:decrement {
        display: none;
    }

    div.searchResultList::-webkit-scrollbar-button:end:increment {
        display: none;
    }

    div.searchResultList::-webkit-scrollbar-track-piece {
        background-color: #222222;
    }

    div.searchResultList::-webkit-scrollbar-thumb:vertical {
        background-color: #999999;
        -webkit-border-radius: 4px;
    }

    div.searchResultList::-webkit-scrollbar-thumb:horizontal {
        background-color: #999999;
        -webkit-border-radius: 4px;
    }

    div.headerSearch ul.popupList {
        width: 245px;
    }

    div.popup {
        position: absolute;
        left: -30px;
        top: -25px;
        width: auto;
        min-width: 300px;
        padding: 25px 30px;
        background-color: #222222;
    }

    div.breadCrumb div.popup { top: -26px; }

    div.popupRight {
        left: auto;
        right: -15px;
        top: 20px;
        padding: 15px 15px;
    }

    ul.popupList li a,
    ul.popupList li span,
    ul.popupList li button {
        color: #999999;
    }

    div.breadCrumb button.breadCrumbPopupClose { font-size: 15px; line-height: 18px; }

    ul.popupList li.popupListDelimiter hr {
        background-color: #999999;
    }

    main {
        padding: 110px 0px 200px 0px;
    }

    h1 {
        font-size: 30px;
        line-height: 36px;
    }

    h2 {
        font-size: 26px;
        line-height: 33px;
    }

    select.issuesHeaderSortTypes {
        height: 36px;
        font-size: 15px;
    }

    select.issuesHeaderSortTypes option {
        font-size: 15px;
    }

    div.issuesWrapper {
        margin-bottom: 0px;
        overflow: visible;
    }

    div.issues,
    ul.issues {
        width: 100%;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    div.issues:after,
    ul.issues:after {
        clear: both;
        content: " ";
        display: block;
        height: 0;
        overflow: hidden;
        visibility: hidden;
    }

    /* app-issue-card, */
    ul.issues li {
        display: block;
        margin: 0 3% 30px 0;
        -webkit-flex-basis: 22.73%;
        -ms-flex: 0 0 22.73%;
        flex-basis: 22.73%;
    }

    /* div.issuesWrapperNoscroll app-issue-card:nth-child(3n), */
    div.issuesWrapperNoscroll ul.issues li:nth-child(3n) {
        margin-right: 3%;
    }

    /* div.issuesWrapperNoscroll app-issue-card:nth-child(4n), */
    div.issuesWrapperNoscroll ul.issues li:nth-child(4n) {
        margin-right: 0;
    }

    /* app-issue-card:nth-child(4n), */
    ul.issues li:nth-child(4n) {
        margin-right: 0;
    }

    app-article-card.articleSwiperSlide {
        width: 31.25%;
        margin-right: 3%;
    }

    app-article-card.articleLikeIssue:nth-child(3n) {
        margin-right: 0;
    }

    div.issuesWrapperNoscroll app-article-card.articleLikeIssue {
        width: 31.33%;
    }

    div.issuesWrapperNoscroll app-article-card.articleLikeIssue:nth-child(2n) {
        margin-right: 3%;
    }

    div.issuesWrapperNoscroll app-article-card.articleLikeIssue:nth-child(3n) {
        margin-right: 0;
    }

    a.issueLink img {
        min-height: 190px;
    }

    div.issueDate {
        padding-top: 10px;
    }

    div.issueDownloadsLeft {
        padding-top: 10px;
    }

    div.issueDetailContainer {
        float: left;
        width: 31.58%;
        max-width: 360px;
    }

    div.issueDetailSwiperNext {
    }

    div.issueDetailSwiperPrev {
    }

    div.issueDetailTextContainer {
        float: right;
        padding-top: 0px;
        width: 57.46%;
        max-width: 655px;
    }

    div.issueDetailTextContainer h1 {
        font-size: 45px;
        line-height: 45px;
    }

    select.issueDetailSelectRegion {
        width: 260px;
        font-size: 15px;
    }

    select.issueDetailSelectRegion option {
        width: 260px;
        padding: 9px 15px;
        font-size: 15px;
    }

    button.issueDetailBuyButton, button.buySubscriptionButton {
        width: 260px;
    }

    div.breadCrumb,
    div.breadCrumb button {
        font-size: 30px;
        line-height: 30px;
    }

    div.breadCrumbPopup {
        display: table;
    }

    div.breadCrumbPopup ul.popupList li {
        font-size: 15px;
        line-height: 18px;
    }

    div.breadCrumbPopup div.breadCrumbFirst {
        display: table-cell;
        float: none;
    }

    div.breadCrumbPopup div.breadCrumbSecond {
        display: table-cell;
        float: none;
    }

    div.breadCrumbFirst {
        padding-right: 7px;
        font-weight: 300;
    }

    div.breadCrumbPopup div.breadCrumbSecond span.breadCrumbTitle {
        color: #999999;
    }

    div.breadCrumbPopup span.breadCrumbArrow {
        color: #999999;
    }

    a.issuesHeaderShowAll {
        font-size: 15px;
    }

    div.breadCrumbPopup div.breadCrumbSecond ul.popupList li {
        white-space: nowrap;
    }

    div.searchHeader {
        font-size: 30px;
        line-height: 30px;
    }

    div.articleFulltextCol1 {
        width: 66%;
        float: left;
    }

    div.articleFulltextarticleFulltextContent {
        padding-top: 44px;
    }

    div.articleFulltextTheme {
        padding-bottom: 5px;
        font-size: 18px;
        line-height: 24px;
    }

    div.articleFulltextTitle {
        padding-bottom: 22px;
        font-size: 48px;
        line-height: 60px;
    }

    div.articleFulltextSubheadline {
        padding-bottom: 22px;
        font-size: 28px;
        line-height: 40px;
    }

    div.articleFulltextAuthorDate {
        padding-bottom: 22px;
    }

    div.articleFulltextImg {
        padding-bottom: 22px;
    }

    div.articleFulltextImg img {
        max-height: 600px;
    }

    div.articleFulltextText {
        font-size: 18px;
        line-height: 30px;
    }

    div.articleFulltextTextPreview {
        max-height: 180px;
    }

    div.articleFulltextBuyButton {
        margin: 44px auto 0px auto;
    }

    div.articleFulltextCol2 {
        width: 28%;
        float: right;
        padding: 0px;
    }

    div.articleFulltextSocialMedia {
        height: 66px;
    }

    div.articleFulltextRecommendation { /* margin-top: 50px; */
    }

    div.articleFulltextBuyIssue {
        width: 100%;
    }

    div.ctaSwiperSlide {
        max-height: 480px;
    }

    div.footerInner:after {
        content: " ";
        clear: both;
        display: block;
        visibility: hidden;
        height: 0px;
        overflow: hidden;
    }

    div#menuCloser {
        background-color: transparent;
    }

    button.toTopButton {
        right: 0;
    }

    div.modalClose {
        height: 52px;
    }

    div.modalCloseButton {
        right: 30px;
    }

    button.registerSubmit {
        max-width: 260px;
    }

    button.buySubmit {
        max-width: 260px;
    }

    label.purchaseInfoCheckmark {
        width: 44px;
        height: 44px;
        left: -60px;
    }

    section.purchaseInfo div.userInfoContent {
        padding-left: 0px;
    }

    label.purchaseCreditBon {
        font-size: 38px;
        line-height: 150px;
    }

    div.privacy-table table th,
    div.privacy-table table td {
        width: 33.3%;
    }

    div.privacy-table table th:nth-child(3),
    div.privacy-table table td:nth-child(3) {
        width: 33.3%;
    }

	div.kioskSwiperNext {
	    display: block;
		right: -30px;
	}
	div.kioskSwiperPrev {
	    display: block;
		left: -30px;
	}
	div.ctaSlideHTML {
		max-height: 480px;
	}
	span.ctaSlideTextContainer {
		padding: 25px 30px;
	}
	span.ctaSlideButton {
		padding: 0px 80px;
	}
	div.kioskSwiperPagination {
		padding-top: 21px;
	}

}

@media only screen and (min-width: 880px) {
    label.purchaseInfoCheckmark {
        width: 67px;
        height: 67px;
        left: -97px;
    }

    app-issue-card.purchaseIssue {
        position: absolute;
        left: -100px;
        top: 0px;
    }

    app-subscription-card.purchaseSubscription {
        position: absolute;
        left: -130px;
        top: 0px;
    }
}

@media only screen and (min-width: 980px) {
    div.headerUser,
    div.headerSearch,
    div.headerLangswitch {
        padding-top: 30px;
    }

    div.popupRight {
        top: 15px;
    }

    .icon {
        width: 40px;
        height: 40px;
        line-height: 40px;
    }

    div.searchResultList {
        max-height: calc(100vh - 126px);
        max-height: -webkit-calc(100vh - 126px);
    }

    input.searchBox,
    a.searchBoxSubmit {
        line-height: 40px;
        height: 40px;
    }

    div.articleFulltextCol2 {
        width: 263px;
    }

    app-article-card.purchaseArticle {
        position: absolute;
        left: -150px;
        top: 0px;
    }
}

@media only screen and (min-width: 1024px) {
    div.interest {
        width: 23%;
        margin-right: 2.60%;
    }

    div.interest:nth-child(2n) {
        margin-right: 2.60%;
    }

    div.interest:nth-child(3n) {
        margin-right: 2.60%;
    }

    div.interest:nth-child(4n) {
        margin-right: 0;
    }

    button.saveInterestsButton {
        width: 23.0%;
    }

    app-article-card.purchaseArticle {
        left: -170px;
    }
}

@media only screen and (min-width: 1025px) {
    div.headerMenu {
        width: 45%;
    }
}

@media only screen and (min-width: 1045px) {
    a.issueLink img {
        min-height: 250px;
    }
}

@media only screen and (min-width: 1140px) {
    div.headerMenu {
        width: 40%;
    }

    app-article-card.articleSwiperSlide {
        width: 22.73%;
    }

    app-article-card.articleLikeIssue:nth-child(3n) {
        margin-right: 3%;
    }

    app-article-card.articleLikeIssue:nth-child(4n) {
        margin-right: 0;
    }

    div.issuesWrapperNoscroll app-article-card.articleLikeIssue {
        width: 22.73%;
    }

    div.issuesWrapperNoscroll app-article-card.articleLikeIssue:nth-child(3n) {
        margin-right: 3%;
    }

    div.issuesWrapperNoscroll app-article-card.articleLikeIssue:nth-child(4n) {
        margin-right: 0;
    }

    a.issueLink img {
        min-height: 280px;
    }
}

@media only screen and (min-width: 1280px) {
    div.ctaSwiperNext {
        right: -48px;
    }

    div.ctaSwiperPrev {
        left: -48px;
    }

    div.articleSwiperNext {
        right: -47px;
    }

    div.articleSwiperPrev {
        left: -47px;
    }

    a.issueLink img {
        min-height: 320px;
    }

    button.toTopButton {
        right: auto;
        left: 1155px;
    }
}

@media only screen and (min-width: 1380px) {
    button.toTopButton {
        left: 1190px;
        width: 60px;
        height: 60px;
        background-size: 60px;
        -webkit-background-size: 60px;
    }
}



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

    div.onboardingContent { width: 100%; height: 100vh; max-height: none; }

    div.overlay-pageable-content { padding: 0px 5%; }

    div.onboarding-bottom-bar { padding-top: 12px; padding-bottom: 44px; }
    div.onboarding-close-button-container button { width: 140px; }

    .onboarding-navigation { top: auto; bottom: 16px; }

    .onboarding-selected-dot { border: 1px solid rgb(107, 107, 107); }

    .onboarding-navigation-left { left: 3%; top: auto; bottom: 42px; }
    .onboarding-navigation-right { right: 3%; top: auto; bottom: 42px; }
}

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

        div.onboardingContent { justify-content: center; }
        div.overlay-pageable-content { height: 55%; }
        div.overlay-page-img { max-height: 280px; }
        div.overlay-page_01 div.overlay-page-img { max-height: 200px; }

        .onboarding-navigation { bottom: 12%; }
        .onboarding-navigation-left { bottom: 14%; }
        .onboarding-navigation-right { bottom: 14%; }

}



@media only screen and (max-height: 760px) {
	main.reader-hint-page { padding: 100px 0px 100px 0px; }
}

@media only screen and (max-height: 650px) {
	main.reader-hint-page { padding: 90px 0px 50px 0px; }
}

@media only screen and (max-height: 600px) {
    ul.popupList {
        max-height: 370px;
        overflow-x: hidden;
        overflow-y: auto;
        overflow-scrolling: touch;
        -webkit-overflow-scrolling: touch;
    }

    div.headerSearch ul.popupList {
        max-height: initial;
        overflow: auto;
    }

    main.reader-hint-page { padding: 90px 0px 10px 0px; }
}

@media only screen and (max-height: 500px) {
    ul.popupList {
        max-height: 270px;
        overflow: hidden;
        overflow-y: auto;
        overflow-scrolling: touch;
        -webkit-overflow-scrolling: touch;
    }

    div.headerSearch ul.popupList {
        max-height: initial;
        overflow: auto;
    }
}

@media only screen and (max-height: 400px) {
    ul.popupList {
        max-height: 210px;
        overflow: hidden;
        overflow-y: auto;
        overflow-scrolling: touch;
        -webkit-overflow-scrolling: touch;
    }

    div.headerSearch ul.popupList {
        max-height: initial;
        overflow: auto;
    }
}

/* modal pages */


/* Campaign Dialog (Subset of modal pages) */
@media only screen and (max-width: 768px) {
    .campaignAdDialog form .button.registerSubmit { width: 40%; }
}

@media only screen and (max-width: 580px) {
    .campaignAdContent h2 { font-size: 38px; line-height: 44px; }
    .campaignAdDialog form { flex-direction: column; }
    .campaignAdDialog form .inputWrapper { width: 80%; max-width: none; margin-bottom: 16px; }
    .campaignAdDialog form .button.registerSubmit { width: 80%; margin: 0px; }
}

@media only screen and (max-width: 480px) {
    .campaignAdContent h2 { font-size: 30px; line-height: 38px; }
}

/* /modal pages */