/* ========== MEDIA QUERIES ========== */

@media only screen and (max-width: 1380px) { /* Small desktop screen */

    .medium-card{
        width: 30.66666666666667%;
    }

    .medium-card.card-4{
        margin-left: 0;
    }

    /* User Pane */
    .user-pane-expanded #page-container{
        padding-right: 0 !important;
    }

    #waharaka-himi-photos-title{
        margin-top: 259px;
    }
}

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

    .medium-card{
        width: 48%;
        margin-bottom: 32px;
    }

    .medium-card.card-3{
        margin-left: 0;

    }
    .medium-card.card-4{
        margin-left: 4%;
    }

    #cards-box{
        margin: 32px 0 0 0;
    }
}

@media only screen and (max-width: 830px) { /* Tablet */

    #header-profile-box span{
        display: none;
    }

    .optional-label {
        display: none !important;
    }

    #home-page-pattern{
        top: -273px;
    }

    #search-box{
        width: 94%;
    }

    #search-page > p.description{
        margin-bottom: 50px;
    }

    .search-box-container{
        margin: 18px 0 14px 0;
    }

    #cant-read-box{
        display: none;
    }

    #copyright{
        text-align: right;
        margin: 0 12px 0 132px;
    }

    .page-toolbar{
        margin-top: 8px;
    }

    .page.container{
        margin-bottom: 20px;
    }

    #waharaka-himi-photos-title{
        margin-top: 228px;
    }

    .tags-breadcrumb{
        margin: 24px 0 12px 0;
    }

    #cd-nwss-box .cd-thumb-large{
        margin: 0;
		width: auto;
    }

    #cd-nwss-box .cd-thumb-large > .cd-name{
        margin: 8px 0 0 0;
    }

    #cd-nwss-box .cd-thumb-large > span{
        width: 84px;
        height: 84px;
        background-size: 84px 84px;
    }

    #cd-nwss-box .cd-thumb-large > .cd-no{
        top: 47px;
        font-size: 20px;
    }

    #listen-page > .pill-bar{
        margin-top: 15px;
    }

    #listen-page > .pill-bar{
        margin-bottom: 25px;
    }

    body.menu-showing{
        overflow: hidden;
    }

    #waharaka-himi-bio-page #waharaka-himi-footer{
        margin-top: 46px;
    }

    #waharaka-himi-photos-lotus{
        margin: 46px 0 0 0;
    }

    #waharaka-himi-large > img {
        width: 148%;
        margin-left: -15%;
    }

    #home-waharaka-himi-portal{
        margin-bottom: 40px;
    }

    .page-tab-bar.secondary-tabs{
        margin-top: 27px;
    }

    .page h1{
        font-size: 19px;
        margin-top: 34px;
    }
}

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

    #header-title-box > .waharaka-logo{
        display: none;
    }

    #header-title-box{
        width: 56px;
    }

    #home-tags-breaker-narrow{
        display: block;
    }

    #home-tags-breaker-wide{
        display: none;
    }

    .home-cards-box{
        width: 100%;
    }

    .home-card-container,
    .home-card-container.wide{
        width: 100%;
        margin-bottom: 0;
    }

    #home-tabs-box{
        margin-top: 2px;
    }

    #home-tabs-body{
        margin-top: 3px;
    }

    .home-tab-footer{
        padding: 0 20px;
    }

    .home-card-container > .home-card{
        border-radius: 0;
        border-bottom: 2px solid #fff;
    }

    .home-card-container:first-child > .home-card{
        border-radius: 18px 18px 0 0;
    }

    .home-card-container:last-child > .home-card{
        border-radius: 0 0 18px 18px;
        border-bottom: none;
    }

    .home-card-container.narrow i{
        display: none;
    }

    .home-card-container.narrow p{
        margin: 8px 0;
    }

    .home-card-container.narrow > .home-card{
        min-height: 92px;
    }

    .home-card-container.wide > .home-card{
        min-height: 120px;
    }

    .home-card i{
        margin-top: 9px;
    }

    .home-card p{
        margin-top: 10px;
    }

    .links-list > a{
        display: block !important;
    }

    .links-list > span{
        display: none;
    }

    #home-magazine-ui .card-pill{
        display: block;
    }

    #listen-page-player-box > .pill-bar{
        margin-top: 10px;
    }

    #home-footer-box .lotus-box{
        margin: 62px 0 45px 0;
    }

    #footer-logo{
        background-image: url(../img/waharaka-logo-912x448.png);
        left: 4px;
    }

    #home-waharaka-himi-portal{
        width: 100%;
    }

    #home-waharaka-himi-portal-inner{
        width: 78%;
    }

    #home-waharaka-himi-portal-inner .links-list > a{
        display: inline-block !important;
    }

    #home-other-websites .links-list{
        width: 100%;
    }

    .publication-slide > a{
        margin: 6px 4px;
    }

    #listen-page .pill.cd > a {
        max-width: 112px;
    }
}

@media only screen and (max-height: 830px) and (orientation: landscape) { /* Smaller than a tablet and on landscape orientation */

    .photo-viewer-box{
        background-position: center right;
        background-position-x: right;
        background-position-y: center;
    }

    .photo-viewer-viewport{
        left: 8px;
        top: 8px;
        right: 64px;
        bottom: 8px;
    }

    .photo-viewer-close-btn{
        top: 8px !important;
        right: 8px;
    }

    .photo-viewer-nav-box{
        top: 0;
        left: auto;
        right: 0;
        height: 140px;
        width: 64px;
        margin: auto 0;
    }

    .photo-viewer-box a{
        top: auto;
        right: 8px;
        left: auto;
    }

    .photo-viewer-nav-btn.next{
        right: 8px;
        top: 0;
    }

    .photo-viewer-nav-btn.prev{
        left: auto;
        bottom: 0;
    }

    a.photo-viewer-description-btn{
        left: 8px;
        right: auto;
        top: auto;
        bottom: 8px;
    }

    .photo-description-box{
        left: 8px;
        bottom: 8px;
    }

    .photo-viewer-zoom-box{
        bottom: 20px;
        right: 76px;
    }
}

@media only screen and (max-width: 540px) { /* Large phone */

    h1{
        font-size: 22px;
    }

    .page > p.description{
        margin-top: 5px;
    }

    .skbd-panel.drop-down {
        margin: 0;
    }

    #home-page > .container{
        width: 100%;
    }

    #tag-box-viewport{
        width:auto;
    }

    #tag-box > #all-tags-btn{
        right: 108px;
    }

    #home-page .lotus-box{
        margin: 63px 0 5px 0;
    }

    #cd-page .pill.time {
        background-image: none;
        padding-left: 4px;
    }

    #listen-page .all-items-btn > span {
        display: none;
    }

    #listen-page .all-items-btn > i {
        margin: 9px 1px 0 0;
    }

    #book-page > .pill-bar > br.br-off,
    #magazine-page > .pill-bar > br.br-off{
        display: inherit;
    }

    .load-more-items-btn {
        width: 100%;
    }

    .sermon-item > .title{
        display: block;
        float: none;
        width: 100%;
    }

    .sermon-item .time{
        background-image: none;
    }

    #waharaka-himi-page h1 {
        margin: 18px 0 20px 0;
        font-size: 18px;
    }

    #home-waharaka-himi-portal{
        margin: 8px 0 24px 0;
    }

    #waharaka-himi-large > img {
        width: 200%;
        margin-left: -51%;
    }

    #home-waharaka-himi-portal.showing-contents #home-waharaka-himi-portal-inner{
        height: 212px;
    }

    #home-waharaka-himi-portal.showing-contents .links-list > a,
    #home-waharaka-himi-portal.showing-contents .links-list > a:first-child{
        margin-left: 8px;
        margin-right: 8px;
    }

    #home-waharaka-himi-portal-inner .links-list > a{
        display: block !important;
    }

    #home-waharaka-himi-portal a > span:first-child{
        display: block;
    }

    #home-waharaka-himi-portal a > span:first-child::after{
        content: "";
    }

    #home-page .lotus-box > img{
        width: 64px;
        height: 64px;
    }

    #suchiya-alphabet-box{
        margin-top: 0;
    }

    #suchiya-alphabet-container > #suchiya-alphabet-box{
        margin: 7px 4% 0 4%;
    }

    #suchiya-page > .page-tab-bar{
        margin-top: 19px;
    }

    #tags-page.showing-surmons .child-tags-box{
        height: 72px;
    }

    #tags-page.showing-surmons #child-tags-box-footer::before{
        display: none;
    }

    body.user-logged-in.search-history-visible{
        overflow: hidden;
    }

    body.user-logged-in.search-history-visible .search-mobile-header{
        display: block;
    }

    body.user-logged-in.search-history-visible .search-box-container{
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        background-color: #fff;
        padding: 83px 0 28px 0;
        z-index: 1000;
    }

    body.user-logged-in.search-history-visible #search-page .search-box-container{
        padding-top: 70px;
    }

    body.user-logged-in.search-history-visible #search-page .description{
        display: none;
    }

    body.user-logged-in.search-history-visible .search-history-box{
        top: 2px;
        border: none;
        box-shadow: none;
        height: 100%;
    }

    .search-box{
        height: 100%;
        margin: 0 12px;
    }

    form.search-form{
        height: 100%;
        margin: 0;
    }

    body.non-touch-device .search-history-list > a > i.delete{
        display: block;
    }

    .page h1{
        font-size: 17px;
        margin: 15px 0 0 0;
    }

    .page-tab-bar{
        margin-top: 14px;
    }

    #tags-page .description{
        margin-bottom: 15px;
    }

    .tags-breadcrumb{
        margin-top: 10px;
    }
}

@media only screen and (max-width: 540px) ,
    only screen and (max-height: 540px) { /* Large phone - both orientations */

    .page.container{
        width: 100%;
    }

    #main-menu{
        margin: 0;
        width: auto;
        height: 100%;
        bottom: auto;
        border-radius: 0;
    }

    .main-menu-close{
        left: 10px;
        top: 10px;
    }

    /* User Pane */
    #user-pane,
    .user-pane-expanded #user-pane {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    #user-pane{
        opacity: 0;

        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease-out;
        -webkit-transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease-out;
        -moz-transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease-out;
        -ms-transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease-out;
        -o-transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease-out;

        transform: translateX(0) translateY(100px) translateZ(0) !important;
        -moz-transform: translateX(0) translateY(100px) translateZ(0) !important;
        -o-transform: translateX(0) translateY(100px) translateZ(0) !important;
        -ms-transform: translateX(0) translateY(100px) translateZ(0) !important;
        -webkit-transform: translateX(0) translateY(100px) translateZ(0) !important;
        pointer-events: none;
    }

    .user-pane-expanded #user-pane {
        transform: translateY(0) !important;
        -moz-transform: translateY(0) !important;
        -o-transform: translateY(0) !important;
        -ms-transform: translateY(0) !important;
        -webkit-transform: translateY(0) !important;

        opacity: 1;
        pointer-events: all;
        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1);
        -webkit-transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1);
        -moz-transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1);
        -ms-transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1);
        -o-transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1);
    }

    #user-pane-content-box{
        opacity: 0;
        transition: transform 1.2s cubic-bezier(0.64, 0, 0.78, 0), opacity 0.05s ease-out;
        -webkit-transition: transform 1.2s cubic-bezier(0.64, 0, 0.78, 0), opacity 0.05s ease-out;
        -moz-transition: transform 1.2s cubic-bezier(0.64, 0, 0.78, 0), opacity 0.05s ease-out;
        -ms-transition: transform 1.2s cubic-bezier(0.64, 0, 0.78, 0), opacity 0.05s ease-out;
        -o-transition: transform 1.2s cubic-bezier(0.64, 0, 0.78, 0), opacity 0.05s ease-out;

        transform: translateX(0) translateY(12px) translateZ(0);
        -moz-transform: translateX(0) translateY(12px) translateZ(0);
        -o-transform: translateX(0) translateY(12px) translateZ(0);
        -ms-transform: translateX(0) translateY(12px) translateZ(0);
        -webkit-transform: translateX(0) translateY(12px) translateZ(0);
    }

    .user-pane-expanded #user-pane-content-box{
        opacity: 1;

        transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);

        transition: transform 1.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease-out;
        -webkit-transition: transform 1.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease-out;
        -moz-transition: transform 1.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease-out;
        -ms-transition: transform 1.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease-out;
        -o-transition: transform 1.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease-out;
    }

.playlist-item-contents,
.playlist-entry,
.history-item{

    transition: transform 0s, opacity 0.5s ease-out;
    -webkit-transition: transform 0s, opacity 0.5s ease-out;
    -moz-transition: transform 0s, opacity 0.5s ease-out;
    -ms-transition: transform 0s, opacity 0.5s ease-out;
    -o-transition: transform 0s, opacity 0.5s ease-out;

    transform: translateX(0) translateY(0) translateZ(0);
    -moz-transform: translateX(0) translateY(0) translateZ(0);
    -o-transform: translateX(0) translateY(0) translateZ(0);
    -ms-transform: translateX(0) translateY(0) translateZ(0);
    -webkit-transform: translateX(0) translateY(0) translateZ(0);
}

.user-pane-expanded .playlist-item-contents,
.user-pane-expanded .playlist-entry,
.user-pane-expanded .history-item
{
    transition: 0s, opacity 0.4s ease-out;
    -webkit-transition: 0s, opacity 0.4s ease-out;
    -moz-transition: 0s, opacity 0.4s ease-out;
    -ms-transition: 0s, opacity 0.4s ease-out;
    -o-transition: 0s, opacity 0.4s ease-out;
}

    .user-pane-expanded #header-box {
         display: none;
    }

    .user-pane-tab-box {
        left: 0;
        right: 0;
        width: 100%;
    }

    .user-pane-inner-box.upper{ /* current playlist box */
        height: 100%;
        min-height: 100%;
        max-height: 100%;
    }

    .user-pane-inner-box.lower{ /* hide playlists box */
        position: absolute;
        top: 1%;
        bottom: 1%;
        left: 2%;
        right: 2%;
        width: 96%;
        height: 98%;
        min-height: 96%;
        max-height: 98%;
        display: block;
        background-color: #888;
        border-radius: 8px;
        overflow-x: hidden;
        overflow-y: hidden;
        overflow: hidden;
        -webkit-box-shadow: -1px 1px 36px -1px rgba(0,0,0,0.38);
        -moz-box-shadow: -1px 1px 36px -1px rgba(0,0,0,0.38);
        box-shadow: -1px 1px 36px -1px rgba(0,0,0,0.38);

        opacity: 0;

        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease-out;
        transform: translateX(0) translateY(60px) translateZ(0);
        pointer-events: none;
    }

    .show-playlists-when-mobile .user-pane-inner-box.lower{ /* all playlists box */
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;

        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1);
    }

    #user-playlists-current-playlist-title,
    #user-pane-all-playlists-header > h4 {
        margin-left: 36px;
    }

    .user-pane-list-box-header.upper::after{ /* current playlist header */
        content: "\E5D2";
        position: absolute;
        top: 0;
        left: 8px;
        /*color: #4285f4;*/
        color: #777;
        width: 36px;
        height: 36px;
        display: block;
        font-family: 'Material Icons';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        font-feature-settings: "liga";
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
    }

    .editing .user-pane-list-box-header.upper::after {
            display: none;
        }

    .show-playlists-when-mobile #user-playlists-playlists-create-btn{
        float: right;
        margin-right: 4px;
    }

    .top-bar-btn{
        width: 42px;
        height: 42px;
    }

    .show-playlists-when-mobile #user-pane-all-playlists-header::before{ /* all playlists header */
        content: "\E5CD";
        position: absolute;
        top: 0;
        left: 8px;
        color: #555;
        width: 20px;
        height: 20px;
        display: block;
        font-family: 'Material Icons';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        font-feature-settings: "liga";
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
    }

    #listen-page h1{
        top: 16px;
        font-size: 18px;
        background-size: 28px;
        background-position: 0 0;
        background-position-y: 0;
    }

    #listen-page h2{
        font-size: 13px;
    }

    #listen-page-player{
        margin-top: 14px;
    }

    #home-waharaka-himi-portal{
        height: 64px;
    }

    #home-other-websites{
        height: 44px;
    }

    #home-other-websites-break{
        display: inline-block;
    }

    .photo-viewer-zoom-box{
        width: 90px;
        height: 90px;
        border-radius: 32px;
    }

    .photo-viewer-box .photo-viewer-zoom-box > a{
        border-radius: 18px;
        width: 40px;
        height: 40px;
    }

    /*
    #cds-page-tab-bar,
    #page-suchiya-tab-bar{
        margin-top: 28px;
    }*/
}

@media only screen and (max-width: 428px) { /* Phone */

    .optional-short-label {
        display: none !important;
    }

    .user-pane .pill-bar{
        margin-bottom: 0;
    }

    #home-page .home-tab-footer a.card-pill{
        width: 200px;
    }

    #home-page .home-tab-footer a.card-pill:last-child{
        margin: 8px 0 0 0;
    }

    #listen-page .add-to-playlist-btn{
        width: 40px;
    }

    #home-magazine-ui > .shortcuts{
        bottom: 82px;
    }

    #listen-page .pill.cd > a {
        width: 44px;
    }

    #share-box > p{
        margin-left: 11px;
        margin-right: 11px;
    }

    .share-targets-box{
        margin-bottom: 30px;
    }

    #suchiya-dropdown-panel{
        width: 288px;
        height: 400px;
        background-color: #fff;
        border-radius: 12px;
        padding: 8px 16px;
        box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 25%);
        text-align: left;
    }

    #connect-to-other-device-box{
        min-height: 558px;
    }

    #login-dialog .login-connect-device-box > p{
        max-width: 280px;
    }

    #login-dialog .login-connect-device-box > a{
        top: 9px;
    }

    .pill-bar.glued > .pill{
        padding: 0 8px 0 6px;
    }
}

@media only screen and (max-width: 428px), only screen and (max-height: 428px) { /* Phone - both orientations. */
    .main-menu-pill{
        width: 64px;
    }

    #dialog-box {
        width: 100%;
        min-height: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    #dialog-close-btn > i{
        font-size: 28px;
    }

    #suchiya-selector{
        left: 10px;
        top: 38px;
    }

    #waharaka-himi-page-nav > a {
        font-size: 8px;
    }

    #help-content{
        padding: 4px 8px 13px 8px;
    }

    #profile-pane-logout-box{
        padding-right: 0;
        margin-top: 38px;
        height: 128px;
    }

    #profile-pane-logout-box > p{
        text-align: center;
    }

    #logout-btn{
        position: relative;
        display: inline-block;
        margin-top: 5px;
    }
}

/* High-DPI ("Retina") displays */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) {

    .cd-thumb-nwss{
        background-image: url('../img/cd-thumb-nwss@2x.jpg');
    }

    .skbd-panel .mk span,
    .skbd-panel .pk span {
        background-image: url('../img/keys@2x.png') !important;
        background-size: 360px 252px;
    }

    .skbd-panel .mk.selected span,
    .skbd-panel .pk span{
        background-image: url("../img/keys_selected@2x.png") !important;
    }

    body.non-touch-device .skbd-panel .mk:hover > span,
    .skbd-panel .mk.pressed > span,
    body.non-touch-device .skbd-panel .pk:hover span,
    .skbd-panel .pk.pressed span
    {
        background-image: url('../img/keys-hover@2x.png');
        background-size: 360px 252px;
    }
    .main-menu-inline-icon > i{
        background-image: url(../img/menu-icon@2x.png?v=1.02);
        background-size: 20px 12px;
    }

    #header-menu-btn{
        background: url('../img/menu-icon@2x.png?v=1.02') no-repeat center center;
        background-size: 26px 16px;
    }
}