/* General styles */

html {
    font-family:Helvetica, Arial, SansSerif;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #333;
    color: #fff;
    text-shadow: 0px 0px 5px black;
}
 h3 {color:#e7b828;clear:left;}
a {color:#e7b828;font-weight:bold;text-decoration:none;}


video {
    box-shadow: 0px 0px 12px orange;
    border-radius: 6px;
}

audio {width:100%;text-shadow:none;}

/*
audio::-webkit-media-controls-panel {
    background-color: #9b6c23;
}
audio::-webkit-media-controls-play-button {
    background-color: #e7b828;
    border-radius:100%;
    margin-right:6px;
}
audio::-webkit-media-controls-mute-button {
    background-color: #e7b828;
    border-radius:100%;
}
audio::-webkit-media-controls-volume-slider {

}

audio::-webkit-media-controls-current-time-display {
    color:white;
    text-shadow:none;
}
audio::-webkit-media-controls-time-remaining-display {
    color:white;
    text-shadow:none;
}
audio::-webkit-media-controls-timeline {
    background-color: #e7b828;
    padding:2px;
    border-radius: 25px;
    margin-left: 10px;
    margin-right: 10px;
}
*/

/* Pagination stuff */
.paginationjs {
    float:left;
}

/* PAGINATION STYLING */
.paginationjs {
    float:left;
}



#aboutIVD a {color:burlywood;transition:color .5s;}
#aboutIVD a:hover {color:orange;}

/* TABLE STYLES */
table {width:100%;}
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
    overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
    font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-ly6r{border-color:#efefef;text-align:left;vertical-align:top}
.tg .tg-3dbi{background-color:#9b6c23;border-color:#efefef;color:#ffffff;font-weight:bold;text-align:left;vertical-align:top}
.tg .tg-wp8o{border-color:transparent;color:#e7b828;text-align:center;vertical-align:top;border-bottom:1px solid #efefef;}

li.borderRight {
    border-right:2px solid #f1b430;
    color:#f1b430;
    font-weight:bold;
}

#qrCodeContainer {
    height:110px;
    float:left;
    margin:8px 0px 0px 9px;
    text-align:right;
}

#shareShade {
    position:absolute;
    left:284px;
    top:0px;
    background:#202020;
    opacity:.91;
    width:100%;
    height:100%;
    z-index:3;
    display:none;
}

#shareBox {
    width:469px;
    height:235px;
    border-radius:8px;
    border:1px solid #f1b430;
    background:#000;
    box-shadow: 0px 1px 4px black;
    padding:10px;
    position:fixed;
    top: 254px;
    left: 295px;
    line-height:0px;
    z-index:4;
}
.shareboxTitle {
    text-align:center;
}
#shareBoxClose {
    color:#fff;
    border:1px solid #f1b430;
    background:#9b6c23;
    border-top-left-radius:6px;
    border-bottom-right-radius:6px;
    cursor:pointer;
    width:30px;
    height:30px;
    line-height:30px;
    text-align:center;
    position:absolute;
    left:-1px;
    top:-1px;
    transition:background .5s ease-out;
}
#shareBoxClose:hover {
    background:#f1b430;
}

#shareUrl {
    width: 327px;
    padding: 10px;
    margin-right: 10px;
    font-size: 14px;
    float:left;
    height:14px;
    transition:background .5s ease-out;
}
#shareUrl.copied {
    background:#f6c967;
}
.shareImage {
    background:url(img/shareImg.png);
    width:350px;
    height:97px;
    background-size:350px 97px;
    float:left;
    margin-top:16px;
}

#copyButton {
    vertical-align: top;
    width: 110px;
    padding: 17px;
    font-size: 18px;
    cursor: pointer;
    line-height: 0px;
    float: left;
    height: 14px;
    text-align: center;
    background: #333333 url(img/clipboard.svg) no-repeat 6px;
    border: 1px solid white;
    margin-top: 0px;
    background-size: 20px 20px;
    transition:background .5s ease-out;
}
#copyButton:hover {
    background: #555555 url(img/clipboard.svg) no-repeat 6px;
    background-size: 20px 20px;
}



.container {
    display: flex;
    height:100vh;
}

.searchIcon {
    background:url(img/search.svg) no-repeat;
    width:24px;
    height:24px;
    display:inline-block;
    margin:0px 0px -6px 5px;
}

.issueSource {
    position:relative;
    margin:-18px -18px 0px 0px;
    border-top-right-radius:6px;
    border-bottom-left-radius:6px;
    float:right;
    padding:0px 8px;
    box-shadow:0px 0px 4px white;
}

.topbar {
    display:none;
    z-index: 2;
    width: 100%;
    background-color: #444;
    height:68px;
    position:absolute;
    padding:14px; /* Adding left padding */
    background: rgb(62, 60, 60);
    background: linear-gradient(98deg, rgba(62, 60, 60, 1) 14%, rgba(64, 62, 62, 1) 95%);
    box-shadow: 0px 1px 4px black;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
.sidebar {
    z-index: 1;
    width: 262px;
    background-color: #444;
    border-right: 1px solid #555;
    height:100%;
    padding-left: 20px; /* Adding left padding */
    background: rgb(62, 60, 60);
    background: linear-gradient(98deg, rgba(62, 60, 60, 1) 14%, rgba(64, 62, 62, 1) 95%);
    box-shadow: 0px 1px 4px black;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    transition:all .5s ease-out;
    position:fixed;
}


.articlePic {
    width:50%;
    float:left;
    margin:20px;
    border-radius:8px;
}
.articlePic60 {
    width:60%;
    float:left;
    margin:20px;
    border-radius:8px;
}
.qrCode {
    width:85px;
    height:85px;
    float:right;
    margin-bottom:20px;
    border:1px solid #f1b430;
    clear:right;
}

#sidebarFooter {
    cursor:pointer;
    position:fixed;
    left:0px;
    bottom:0px;
    background:#1e1e1e url('img/logo.svg') center no-repeat;
    background-size:100px 20px;
    width:282px;
    height:44px;
    text-align:center;
    margin:0px auto;
    box-shadow: -2px -1px 4px gray;
    cursor:pointer;
    z-index:2;
}

.languages {
    width: 281px;
    height: 36px;
    position: fixed;
    bottom: 44px;
    left: 1px;
    transition: right .5s;
    z-index: 3;
    background: #303030;
    border-top:1px solid gray;
}

#en {
    background:url(img/en.svg);
    width:30px;
    height:23px;
    float:left;
    border-radius:2px;
    border:1px solid #111;
    transition:all .5s;
    cursor:pointer;
    margin:6px 0px 0px 102px;
}
#ja {
    background:url(img/jp.svg);
    width:30px;
    height:23px;
    margin-left:8px;
    float:left;
    border-radius:2px;
    border:1px solid #111;
    transition:all .5s;
    cursor:pointer;
    margin:6px 0px 0px 13px;
}
#en:hover, #ja:hover {
    border:1px solid darkorange;
    box-shadow:0px 0px 4px orange;
}

/* IVD SEARCH */
/*********************/

.search-input-container {
    display: flex;
    align-items: center;
    position: relative;
    text-shadow:none;
}

/* Style for the input field */
#searchInput {
    flex-grow: 1;
    padding-right: 30px; /* Space for the clear button */
}

/* Style for the clear button */
.clear-input-button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
    font-size: 20px;
    display: none; /* Initially hidden */
}

/* Show the clear button on hover */
.clear-input-button:hover {
    color: #000;
}

.btn.glyphicons i:before {color:#fff;margin-top:-8px;}

.search-container {
    margin:20px auto;
}

input[type="text"] {
    padding: 10px;
    width:70%;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

button {
    padding: 10px 20px;
    background-color: #9b6c23;
    border: none;
    color: #fff;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    transition: all .5s;
    margin: 10px auto 0px auto;
}

button:hover {
    background-color: #ac7920;
}

.result {
    border: 1px solid orange;
    border-radius: 5px;
    margin-bottom: 20px;
    padding: 10px 0px;
}


.result h2 {
    font-size: 20px;
    margin: 0;
}

.result p {
    margin: 10px 0;
}

.result a {
    text-decoration: none;
    background: #9b6c23;
    color: white;
    font-weight: bold;
    padding: 5px 8px;
    border-radius: 6px;
}

.result a:hover {
    background:#9b6c23;
}

.resultTitle {
    background: #9b6c23;
    padding: 8px 8px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin: -10px 0px 0px 0px;
}

input:focus {outline-color:#9b6c23;}

#nextButton, #backButton {
    width:50px;
    height:50px;
    border-radius:50px;
    text-align:center;
    float:left;
    font-weight:bold;
    padding: 0px 0px 3px 0px;
    font-size:32px;
}
.highlight {
    display:inline;
    background-color:#e7b828;
    border-radius:4px;
    padding:0px 2px;
}

.resultContent {
    padding:10px;
}
#resultCount {margin-top:20px;}

#noResultsMessage {margin:0px 0px 0px 20px;}

img.searchImage {border-radius:8px;}

.issueBookmark {
    /*position: -webkit-sticky;*/
    position: sticky;
    top:0px;
    float:right;
    z-index:1;
    width:110px;
    background: linear-gradient(to bottom, #212121 0, #212121 154px, transparent 80px, transparent 100%);
    margin-top:40px;
    margin-right:calc(-10px + -1%);
    text-align:center;
    padding:10px 0px 0px 0px;
    border-top-left-radius:8px;
    border-left:1px solid gray;
    border-top:1px solid gray;
    transition:all 1s ease-out;
    border-bottom-left-radius:8px;
}
.issueBookmark.hide {display:none;}

.issueBookmark.top {
    border-top-left-radius:0px;
    border-bottom-left-radius:0px;
    border-left:1px solid #e7b828;
    border-top:none;
}
.issueBookmark.top.hide {display:none;}

.issueBookmark.hide {display:none;}

.bookmarkBtm {
    width: 0px;
    height: 0px;
    border-top: 0px solid #555;
    border-right: 55px solid #555;
    border-bottom: 0px solid transparent;
    border-left: 55px solid #555;
    transition:all 1s ease-out;
}
.bookmarkBtm.top {
    border-top: 3px solid #555;
    border-bottom: 15px solid transparent;
    border-top: 3px solid #9b6c23;
    border-right: 55px solid #9b6c23;
    border-left: 55px solid #9b6c23;
}

.issueBookmark img {
    transition:all 1s;
    filter: grayscale(100%);
}
.issueBookmark.top img {
    filter:none;
}
.closeBookmarks {
    background:#555;
    color:gray;
    width:100%;
    padding-top:2px;
    cursor:pointer;
    border-bottom-left-radius:8px;
}
.closeBookmarks.top {background:#9b6c23;color:#e7b828;border-bottom-left-radius:0px;}
.closeBookmarks:hover {text-shadow:0px 0px 2px white;color:white;}

.pdf-menu {
    list-style:none;
    padding:8px 0px 36px 8px;
    list-style:none;
    position:absolute;
    left:20px;
    top:329px;
    display:block;
    z-index:2;
    width:254px;
    height:calc(100% - 444px);
    overflow-y:scroll;
    border-top-left-radius:20px;
    box-shadow:inset 2px 1px 2px #232323;
    background:url(img/menuFade.png) right 0px no-repeat;
}

#langClose {display:none;}
.sidebar-staticItems {
    margin:8px 0px 28px 0px;
}
.pdf-menu li {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    list-style-type:none;
    background: url(img/bookIcon.svg) 10px no-repeat;
    background-size: 26px 26px;
    padding: 10px 20px 10px 44px;
    cursor: pointer;
    transition: background-color 0.4s ease; /* Smooth hover transition */
}

.pdf-menu li:hover {
    background-color: #555;
}

.imageSubText {
    width: 50%;
    float: left;
    margin: 0px 20px 20px 20px;
}


.sidebarButton {
    margin-bottom:20px;
    padding: 6px 20px 6px 42px;
    cursor: pointer;
    border-bottom: 1px solid #555;
    transition: background-color 0.3s ease; /* Smooth hover transition */
    display: block;
    border-top-left-radius:20px;
    border-bottom-left-radius:20px;
    cursor:pointer;
    background:url('img/off.png') 10px no-repeat;
    background-size:20px 20px;
    box-shadow:inset 0px 0px 1px #232323;
    line-height:19px;
}

#aboutIvdgn.on, #subscribe.on, #spotlight.on, #search.on {
    background:url('img/on.png') 10px no-repeat;
    background-size:20px 20px;
}
.sidebarButton:hover {
    transition: background-color 0.4s ease;
    background-color: #555;

}

.pdf-menu summary {
    margin-bottom:10px;
    padding: 10px 20px;
    cursor: pointer;
    border-bottom: 1px solid #555;
    transition: background-color 0.3s ease; /* Smooth hover transition */
    display: block;
    border-bottom-left-radius: 8px;
    padding-left:38px;
    background: url(img/folder.svg) 10px no-repeat;
    background-size: 25px 25px;
}
.pdf-menu summary.folderOpen {
    background: url(img/folder-open.svg) 10px no-repeat;
    background-size: 25px 25px;
}

.pdf-menu details {
    margin-bottom: 10px; /* Add some space between details */
}

.content {
    flex: 1;
    background-color: #222;
    padding:0px 10px;
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Arrange items vertically */
    align-items: center; /* Center items horizontally */
    background:url('img/seemless.jpg') repeat;
    overflow-y:scroll;
    min-height:950px;
    margin-left:282px;
}

.pdf-display {
    width: 100%; /* Use full width */
    text-align: center; /* Center content */
    padding-bottom:60px;
}

.pdf-details {
    font-size: 16px;
    line-height: 1.6;
    margin:56px 0px 14px 0px;
    width: 100%; /* Take full width */
}

.pdf-images {
    width: 98%; /* Use full width */
    justify-content: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin:48px auto 0px auto; /* Add margin to separate from the description */
}
#pdf-content {margin-left:1%;}

.pdf-images img {
    width:50%;
    height: auto;
    display: block;
    margin-bottom: 20px;
    border-radius:6px;
}
#shareOpen {
    width: 70px;
    height: 39px;
    line-height: 39px;
    padding: 4px 8px;
    display: block;
    transition: all 0.5s ease-out;
    background: url(img/share.svg) no-repeat right 14px;
    background-size: 20px 20px;
    cursor: pointer;
    float: left;
    margin: -22px 0px 0px 140px;
}
#shareOpen:hover {
    background: url(img/share.svg) no-repeat right 11px;
    background-size: 24px 24px;
    text-shadow:0px 0px 8px orange;
}

.shareWedge {
    background: url(img/shareWedge.png);
    height:46px;
    width:25px;
    background-size:25px 46px;
    margin:-42px 0px 0px 90px;
}

.pdf-linkClass, .mobileLangDisp, .mobileShareDisp {
    width:60px;
    height: 30px;
    padding: 4px;
    border-bottom: 1px solid lightgray;
    border-left: 1px solid lightgray;
    border-right: 1px solid lightgray;
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
    position: fixed;
    top: 0px;
    right:15px;
    display: block;
    transition: all 0.5s ease-out; /* Smooth hover transition */
    background:darkred url('img/dl.svg') no-repeat center;
    background-size:30px 30px;
    z-index:2;
}
.mobileLangDisp {
    display:none;
    background:darkblue url('img/globe.svg') no-repeat center;
}
.mobileShareDisp {
    display:none;
    background:darkgreen url('img/share.svg') no-repeat center;
}

.pdf-linkClass:hover {background-color:#C90808;}
.mobileLangDisp:hover {background-color:blue;}
.mobileShareDisp:hover {background-color:green;}


a.sidebar-head {
    background:url('img/ivdgn-logo.png') no-repeat center;
    width:243px;
    height:58px;
    background-size:243px 58px;
    padding-top:30px;
    cursor:pointer;
    display:block;
}

.topLogo {
    background:url('img/ivdgn-logo.png') no-repeat center;
    width:180px;
    height:43px;
    background-size:180px 43px;
    z-index:1;
    position:absolute;
}
.pdf-menu summary span:first-child {
    margin-right: 5px; /* Adjust margin as needed */
    cursor: pointer; /* Show pointer on hover to indicate clickability */
}
.dlText {
    background:url('img/dl.svg') no-repeat;
    background-size:20px;
    width:20px;
    height:20px;
}

#spotlightContent {
    width:98%;
    transition:all .5s ease-out;
    padding-bottom:80px;
}
#spotlightContent.blur {
    filter: blur(6px);
}
.readMore {
    background: url(img/arrow.svg) right no-repeat;
    height: 32px;
    display: inline-block;
    color: #e7b828;
    width:164px;
    text-align:left;
}
.alignRight {
    width:100%;
    text-align:right;
    float: left;
}
.spotlightBox {
    margin-top:30px;
    border-radius: 8px;
    box-shadow: 0px 0px 12px orange;
    border: 1px solid #e7b828;
    padding: 18px;
    font-size: 18px;
    line-height: 30px;
    text-align:center;
    background:url(img/cornerFade.png) right 0px no-repeat;
    float:left;
}
.spotlightBox.capToday {
    box-shadow: 0px 0px 12px lightblue;
    border: 1px solid lightblue;
}
.spotlightBox.capToday h3 {color:#90a8e3;}

.spotlightBox img {border-radius:6px;}
.spotlightAuthImage {
    width:120px;
    height:auto;
    border-radius:6px;
    margin:0px auto 4px auto;
    border:1px solid #e7b828;
}

.slImageTextCont {
    float:left;
    width:140px;
    font-size:10px;
    line-height:14px;
}

.slImageTextContainer {
    float:left;
    width:50%;
    margin:20px;
}


.slTextBox {background:#313131;border: 1px solid #e7b828;border-radius: 8px;padding:8px;font-size:.8em;float:left;margin-bottom:30px;}
.slTextBoxSmall {border-radius:8px;padding:0px 8px;font-size:.8em;float:left;margin-bottom:30px;width:100%;}
.capTodayAuthor {padding:0px 8px;border-radius:4px;width:98%;background:#9b6c23;font-size:1em;float:left;margin: 10px 0px 30px 0px;}
a.capIssue {
    position: relative;
    margin: -18px 0px 0px -18px;
    border-top-left-radius: 8px;
    border-bottom-right-radius: 6px;
    float: left;
    background:url(img/capToday.jpg);
    background-size:153px 45px;
    width:153px;
    height:45px;
}

#spotlightContent img {
    border-radius:8px;
    border:1px solid #e7b828;
    margin-top:20px;
}
.slTtitle {
    display:block;
    font-size:1.4em;
    font-weight:bold;
    color:#e7b828;
    margin-top:64px;
}
.slTtitle.capToday {
    color:#fff;
}

.slText {
    text-align:left;
}

#aboutIVD {
    display:none;
    width:98%;
    transition:all .5s ease-out;
}
.aboutIvdText {
    margin-top:30px;
    border-radius: 8px;
    box-shadow: 0px 0px 12px orange;
    border: 1px solid #e7b828;
    padding: 18px;
    font-size: 18px;
    line-height: 30px;
}

#subscribeForm {
    display:none;
    width:100%;
    transition:all .5s ease-out;
    margin-top:10px;
    padding:0px;
}
#searchContent {
    display:none;
    width:100%;
    transition:all .5s ease-out;
    padding:0px 0px 20px 0px;
}




iframe {
    border-radius: 8px;
}

#mobileMenu {display:none;}
#topTitle {
    display:none;
    opacity:.9;
}

.issueSpotTitle {
    font-size:1.3em;
    border-bottom:1px solid white;
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
}

.spotlightHeadImage {
    background:url(img/spotlightHeader.jpg);
    width:320px;
    height:320px;
    background-size:320px 320px;
    margin:2% auto 2% auto;
}

.spotlightHeadText {
    font-size:1.3em;
    color:#e6e6e6;
    margin:2%;
    line-height:32px;
}


.fa {
    display:inline-block;
    width:30px;
    height:auto;
    padding:8px;
}
.jssocials-share-link {
    border-radius:4px;
    width:110px;
}

.fa.fa-facebook.jssocials-share-logo {
    background:url(img/facebook.svg) no-repeat;
}
.fa.fa-twitter.jssocials-share-logo {
    background:url(img/x.svg) no-repeat;
}
.fa.fa-linkedin.jssocials-share-logo {
    background:url(img/linkedin.svg) no-repeat;
}
.fa.fa-at.jssocials-share-logo {
    background:url(img/mail.svg) no-repeat;
}

#copyRSS {
    position:absolute;
    width:30px;
    height:30px;
    top:-1px;
    right:-1px;
    border:1px solid #f1b430;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 6px;
    background:url(img/rss.png);
    background-size:30px 30px;
}



/*********************/
/* MEDIA SIZE 1024 */
/*********************/




@media screen and (max-width: 1024px), (max-height:599px) {
    #loadMoreButton {
        margin-bottom:320px;
    }
    .issueBookmark {display:none;}

    #shareUrl {
        width:349px;
    }
    #shareBox {
        position:relative;
        margin:80px auto 0px auto;
        top:inherit;
        left:inherit;
        width: 491px;
        height: 259px;
    }
    #shareShade {left:0px;}
    #shareOpen {display:none;}
    .issueBookmark {top:42px;}
    .articlePic {float:none;margin:0px auto;width:100%;}
    .articlePic60 {float:none;margin:8px auto;width:100%;}

    .spotlightHeadImage {
        margin:2% auto 30px auto;
        float:none;
        background-size: 98% auto;
        background-repeat: no-repeat;
        background-position: center top;
        width:68vw;
        height:68vw;
    }
    .spotlightHeadText {
        margin:0% 2% 0% 2%;
    }

    .pdf-linkClass, .mobileLangDisp, .mobileShareDisp {
        display:block;
        position:absolute;
        width:54px;
        height:54px;
        border-radius:8px;
        top:7px;
        right:7px;
        left:unset;
        border:1px solid lightgray;
        background-size:48px 48px;
    }
    .mobileShareDisp {
        right:69px;
    }
    .mobileLangDisp.pdfOn {
        right:69px;
    }
    .mobileShareDisp.pdfOn {
        right:131px;
    }


    #searchContent {padding:10% 0px 130px 0px;}
    .pdf-display {
        padding:10% 0px 130px 0px;
    }


    .container {
        position:fixed;
        width:100%;
    }

    #aboutIVD {
        padding:10% 0px 130px 0px;
    }

    .pdf-menu {
        height:calc(100% - 260px);
        width:100%;
        position:relative;
        top:0px;
        left:0px;
        margin-top:20px;
        box-shadow:none;
        border-bottom: 1px solid #555;
        border-bottom-left-radius: 6px;
    }

    /*.mobilePdf-menu {display:block;}*/
    #topTitle {
        display:block;
        margin:2px 0px 0px 0px;
        padding-right: 12%;
        width:100%;
        z-index:1;
        box-shadow:0px 2px 4px orange;
        border-bottom:1px solid #e7b828;
        padding: 8px 4px 4px 4px;
        text-align: center;
        position: absolute;
        width: 100%;
        top: 66px;
        font-size:16px;
        background:#565656;
    }

    #spotlightContent {
        padding:12% 0px 130px 0px;
    }
    .pdf-images {
        width:100%;
        max-width:100%;
    }
    .pdf-images {
        width: 100%;
        flex-direction:row;
    }
    .pdf-images img {
        width:50%;
    }

    .sidebar {
        border-right:none;
        position:absolute;
        bottom:-100%;
        width:100%;
        padding-bottom:130px;
        z-index:2;
    }
    .sidebar.open {
        bottom:-68px;
    }

    a.sidebar-head {display:none;}
    #sidebarFooter {display:none;}
    .topbar {display:block;width:100%;top:0px;left:0px;}
    .content {margin-top:26px;padding-bottom:16px;margin-left:0px;}

    .languages {
        position:absolute;
        top:0px;
        right:100%;
        width:100%;
        height:68px;
        bottom: unset;
        border-top: none;
        left: unset;
        background:url(img/seemless.jpg) repeat;
    }
    .languages.on {
        right:0;
    }

    #langClose {
        display:block;
        width:54px;
        height:41px;
        line-height:38px;
        position:absolute;
        right:16px;
        top:13px;
        border:2px solid #e7b828;
        border-radius:8px;
        text-align:center;
        color:#e7b828;
    }
    #langClose:active {
        background:orange;
    }

    #en {
        width:54px;
        height:41px;
        border-radius:6px;
        position:absolute;
        right:156px;
        top:13px;
        margin-top:0px;
    }
    #ja {
        width:54px;
        height:41px;
        border-radius:6px;
        margin:0px;
        position:absolute;
        right:86px;
        top:13px;
    }

    #mobileMenu {
        opacity:.84;
        width: 140px;
        height: 140px;
        border: 1px solid orange;
        position: fixed;
        bottom: -70px;
        right: -70px;
        display: block;
        z-index: 9;
        border-radius: 140px;
        transition: all 1s;
        background: #9b6c23 url(img/mobileMenu.png) 22px 22px;
        background-size: 40px 40px;
        background-repeat: no-repeat;
        transition: all .5s ease-out;
    }
    #mobileMenu.on {
        box-shadow: 0px 0px 20px yellow;
    }



    h2 {
        vertical-align: center;
        text-align: center;
    }

    html, body {
        margin: 0;
        height: 100%;
    }

    * {
        font-family:Arial;
        box-sizing: border-box;
    }

    .top-nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background-color: #00BAF0;
        background: linear-gradient(to left, #f46b45, #eea849);
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        color: #FFF;
        height: 50px;
        padding: 1em;
    }

    .menu {
        display: flex;
        flex-direction: row;
        list-style-type: none;
        margin: 0;
        padding: 0;
        transition:margin-top 1s ease-out;
        margin-top:-122px;
    }

    .menu.open {
        margin-top:68px;
    }

    .menu > li {
        margin: 0 1rem;
        overflow: hidden;
    }


    .menu {
        position: absolute;
        top: 0;
        left: 0;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    #menu-toggle ~ .menu li {
        height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    #menu-toggle:checked ~ .menu li {
        border: 1px solid #333;
        height: 2.5em;
        padding: 0.5em;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    .menu > li {
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10 and IE 11 */
        user-select: none; /* Standard syntax */
        cursor:pointer;
        font-family:Arial, "Helvetica Neue";
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 0.5em 0;
        width: 100%;
        color: white;
        border-bottom-left-radius:0px;
        border-bottom: 1px solid #9b6c23;
        border-radius:0px;
        background:#222 url('img/off.png') 10px no-repeat;
        background-size:20px 20px;
        position:relative;
        z-index:1;
    }
    .menu > li:not(:last-child) {}
    .menu > li.selected {
        background:#222 url('img/on.png') 10px no-repeat;
        background-size:20px 20px;
    }
    #subscribeForm {padding:10% 0px 20% 0px;}


    /*********************/
    /* MEDIA SIZE 480 */
    /*********************/



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

        iframe {max-width:100%;}
        .topbar {
            background:#333;
        }
        .topLogo {
            width:160px;
            height:38px;
            background-size:160px 38px;
        }


        .imageSubText {width:100%;float:left;margin:0px 0px 10px 0px;}
        .articlePic {float:none;margin:0px auto;width:100%;}
        .articlePic60 {float:none;margin:8px auto;width:100%;}
        .spotlightHeadImage {margin:8% auto 30px auto;}
        .pdf-images {flex-direction:column;}
        .pdf-images img {width:100%;}
        .content {padding:8px 10px;}
        .pdf-details {margin:18px 0px 14px 0px;}
        #searchContent {padding:16% 0px 138px 0px;}
        #spotlightContent {padding:16% 0px;}
        #subscribeForm {padding:20% 0px 60% 0px;}
        #aboutIVD {padding:16% 0px;}
        .pdf-display {padding:18% 0px 100% 0px;}

        #shareBox {
            width:364px;
            margin:10px auto 0px auto;
            height:260px;
        }
        .jssocials-share {
            width:auto;
        }
        #qrCodeContainer {
            height: 110px;
            float: left;
            margin: -217px 0px 0px 240px;
            text-align: right;
            position: relative;
        }
        #shareUrl {width:230px;height:34px;}
        .shareImage {width: 256px;
            height: 97px;
            background-size: 350px 97px;
            float:none;
            margin-top: 53px;
            margin: 14px auto 0px auto;
        }
        #copyButton {
            width:102px;
            padding:16px 17px;
            font-size: 14px;
        }

        #copyRSS {
            top:229px;
            right:-1px;
            border-top-right-radius:0px;
            border-bottom-left-radius:0px;
            border-top-left-radius:6px;
            border-bottom-right-radius:6px;
        }

    }

}