/** DEFAULT STYLING **/
html * { padding: 0; margin: 0;}
body { background-color: #f2f2f2; font-family: 'Inter', sans-serif; animation: showNotification 500ms ease-in-out forwards; overflow:hidden;}
html, body { touch-action: none;}
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: #818788 #B8B8B8;}
/* Chrome, Edge and Safari */
*::-webkit-scrollbar { height: 8px; width: 8px;}
*::-webkit-scrollbar-track { border-radius: 5px; background-color: #B8B8B8;}
*::-webkit-scrollbar-track:hover { background-color: #EBF6F8;}
*::-webkit-scrollbar-track:active { background-color: #DDE7E9;}
*::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #818788;}
*::-webkit-scrollbar-thumb:hover { background-color: #F0F0F0;}
*::-webkit-scrollbar-thumb:active { background-color: #FFFFFF;}
.overlay, .overlayPreview { background-color: rgba(0,0,0,0.8); top: 0; left: 0; bottom: 0; right: 40px; position: absolute; transition: background-color 400ms linear, visibility 0s, opacity 0s; visibility: visible; z-index:99;}
.overlay.hidden { background-color: rgba(0,0,0,0); visibility: hidden;}
.portraitoriention { display: block;}
.landscapeoriention { display: none;}
.pdfViewer{-webkit-filter: blur(0px); }
/** SPRITES **/
.footnavleft, .footnavright, .fas:before, #facebook-share:before, #twitter-share:before, #link-share:before, .savedBookmark:before, .addBookmark:before, .removeBookmark:before,
.dr .w500, .dr .w400, .dr .w300, .dr .w200, #menuContent li:before, #zoomMenu li:before, .close:before, .desktop_hlp:before, .closeButton:before, .article_bookmark:before,
.readaloud, .fa-share-alt, .firstArticleico, #audioPanel li:before, #audioPanel li.play:before, #audioPanel li.stop:before, #audioPanel li.paused:before, .libraryHeader:after,
span.remove-issue:before, .speechbtn.fal:before, .fa-stackoverride
{ background-image: url(https://mcgraphics.blob.core.windows.net/pmimages/reader/sprite.png);}
/** MAIN STYLING **/
.spinner { width: 48px; height: 48px; border: 5px dotted #FFF; border-radius: 50%; display: inline-block; position: relative; box-sizing: border-box; animation: loading_rotation 2s linear infinite;}
.loading-logo { background: url('//mcgeneral.blob.core.windows.net:443/html5reader/content/pocketmags-reader.png') no-repeat; background-position: center 42%,center center; position: fixed; top: 48%; left: 50%; padding-bottom: 20px; transform: translate(-50%, -50%);}
.loading-logo:before {content:""; display: block; border: 8px solid #f3f3f3; border-top: 8px solid #cdcdcd; border-radius: 50%; width: 40px; height: 40px; animation: spin 2s linear infinite; margin-left:calc(50% - 20px); top:50%; right: calc(50% - 22px); opacity: 1; position:absolute;}
.loading { background: url('//mcgeneral.azureedge.net/html5reader/v3.0/content/pageLoading.gif') no-repeat center; background-position: center; background-size: auto auto;}
.loader { border: 8px solid #f3f3f3; border-top: 8px solid #079F9F; border-radius: 50%; width: 40px; height: 40px; animation: spin 2s linear infinite; margin-left:calc(50% - 20px)}
/** MENU & NAVIGATION STYLING **/
#foot_navigation { display: none; height: 35px; line-height:20px; position: absolute; font-size:13px; left: calc(50% - 125px); right: 0; bottom: 0; text-align: center; background-color: white; border-radius: 10px 10px 0px 0px; -moz-border-radius: 10px 10px 0px 0px; -webkit-border-radius: 10px 10px 0px 0px; border: 0px solid #000000; width: 240px; color: #333; font-family: 'Inter'; padding: 7px; box-sizing: border-box; cursor: pointer; z-index: 9999999; box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.3);}
#menu[style*="display: block"] ~ #foot_navigation, #menu[style*="display: block"] ~ #right_navigation, #menu[style*="display: block"] ~ #left_navigation { display: block;}
#menu { background-color: white; color: #333; z-index: 999999; box-shadow: -3px 0px 5px rgba(0, 0, 0, 0.2); color: #333; position: fixed; top: 0; bottom: 0px; width: 200px; right: -160px; -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; height: auto; left: auto;}
.menuItem:hover { :not(.selected) background-color: #888888; color: #ffffff;}
.menuItem { transition: background-color 2000ms cubic-bezier(0.22, 0.61, 0.36, 1), color 2000ms cubic-bezier(0.22, 0.61, 0.36, 1); cursor: pointer;}
#menuContent li, #zoomMenu li { list-style: none; white-space: nowrap; cursor: pointer; height: 40px; color: #333; font-family: 'Inter'; font-weight: 300; margin-bottom: 10px;}
#menuContent li:before, #zoomMenu li:before { color: white; font-size: 20px; line-height: 20px; position: absolute; padding: 10px 9px 10px 9px; height: 20px; text-align: center; width: 22px; background-size: 400%; background-color: #202d3c;}
.menufonts { }
#menu.open { right: 0px;}
.f14 { width: 150px; font-size: 13px; font-weight: 600; margin-top: 10px; right: 0px; position: absolute;}
.f24 { width: 150px; font-size: 20px; font-weight: 700; margin-top: 8px; right: 0px; position: absolute;}
.footnavleft { float: left; margin-left: 0px; padding-top: 3px; background-position: 355px -24px; background-size: 312%; width: 30px; height: 20px; filter: invert(1);}
.footnavright { float: right; margin-right: 7px; padding-top: 3px; background-position: 355px -328px; background-size: 312%; width: 30px; height: 20px; filter: invert(1);}
.currentpageholder { border-radius: 10px; -webkit-border-radius: 10px; text-align: center; background: none; width: 45px; height: 25px; color: rgba(255, 255, 255, 0.7); border: 2px gray solid; position: absolute; top: 5px;}
.totalpageholder {}
.currentPage { transition: width 200ms ease 0s; border: medium none; background-color: transparent; text-align: center; color: #333;}
.left { left: -10px;}
.right { right: 30px;}
.page_navigation { position: absolute; top: 0; bottom: 0; overflow: hidden; height: 100px; width: 60px; margin: auto; background-color: rgba(255, 255, 255, 0.5); border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border: 0px solid #000000; z-index: 99;}
.navigationArrowleft { width: 50px; margin-left: 10px; display: inline-block;}
.navigationArrowright { width: 50px; margin-right: 10px; display: inline-block;}
.arrowIcon:hover { transform: scale(1.2); -webkit-transform: scale(1.2); -webkit-transition: -webkit-transform 200ms; transition: transform 200ms;}
#btnFirstPage { top: calc(50% - 15px); height: 20px;}
#btnPreviousPage { top: calc(50% - 10px); height: 30px;}
#btnNextPage { top: calc(50% - 10px); height: 30px;}
#btnLastPage { top: calc(50% - 15px); height: 20px;}
.arrowIcon { position: relative; text-align: center; color: white; cursor: pointer;}
#menu:disabled .zoomItem { display: none}
.zoomnav { display: none}
.zoomnavholder { position: absolute; z-index: 999999; opacity: 1; bottom: 40px; width: 100%}
/** THUMBNAILS & COVERS **/
.issueThumbs .group { display: inline-block; margin: 5px 15px; margin: 5px 0px 45px 5px; width: 250px; text-align: end; min-height: 170px;}
.issueThumbs .group .thumb::after { content: "" attr(pageNum); bottom: -28px; color: #fff; background: none; position: absolute; width: 100%; right: 0px; text-align:center;}
#mainOverview > .thumbnailContainer > .scrollPanel > .issueThumbs .group:hover { box-sizing: border-box; outline: 4px solid #FF580A; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; z-index: 2; }
.issueThumbs.formatCustom .thumb { display: block;}
.formatCustom .group { vertical-align: top;}
.issueThumbs.formatCustom .group .thumb:after { content: none; display: none;}
.issueThumbs { overflow-y: auto; overflow-x: hidden; max-height: calc(100vh - 150px); display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; padding: 20px 20px 0px 5px; -webkit-mask-image: linear-gradient(to bottom, black 97%, transparent 100%); mask-image: linear-gradient(to bottom, black 97%, transparent 100%); }
.issueThumbs .thumb { display: inline-block; cursor: pointer; position: relative; width:50%;}
.issueThumbs img.selected { outline: 2px solid white;}
.issueThumbs img { height: auto; min-height: 143px; width: 100%; transition: transform 100ms linear, outline 2000ms; -webkit-transition: -webkit-transform 100ms linear, outline 200ms; -webkit-backface-visibility: hidden; backface-visibility: hidden; cursor: pointer; -ms-interpolation-mode: bicubic; margin-top: 0px; -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.17); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.17); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.17);}
.issueThumbs .group:last-child { text-align: left; padding-bottom:20px;}
.selected { box-sizing: border-box; outline: 4px solid #FF580A; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; z-index: 2; }
.selected:before { color: #111; background-color: #fff; font-weight: bold;}
#printOverview .thumb:hover { box-sizing: border-box; outline: 4px solid #FF580A; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index:2;}
#overviewPanel .group:hover { }
.group > .thumb:nth-child(odd) > img { border-radius: 8px 0px 0px 8px;}
.group > .thumb:nth-child(even) > img { border-radius: 0px 8px 8px 0px;}
.group:first-child > .thumb > img, .group:last-child > .thumb > img { border-radius: 8px;}
/** MENU ICONS & OTHER **/
.fas:before { content: ''; background-size: 400%; height: 21px; width: 42px; display: inline-block}
#header_menu:before { content: ''; background-position: 280px 0px;}
#overview_menu:before { content: ''; background-position: 280px -40px;}
#print_menu:before { content: ''; background-position: 280px -80px; z-index: 0;}
#bookmark_menu:before { content: ''; background-position: 280px -120px; font-weight: 400 !important}
#article_menu:before { content: ''; background-position: 280px -880px;}
#search_menu:before { content: ''; background-position: 280px -1000px;}
#content_menu:before { content: ''; background-position: 280px -1040px;}
#upsell_menu:before { content: ''; background-position: 280px -920px;}
#audio_menu:before { content: ''; background-position: 280px -960px;}
#share_menu:before { content: ''; background-position: 279px -160px;}
#help_menu:before { content: ''; background-position: 280px -200px; font-weight: 400 !important}
#downloadIssue:before { content: ''; background-position: 280px -440px;}
#fullscreen:before { content: ''; background-position: 280px -240px;}
#fullscreen_menu:before { content: ''; background-position: 280px -240px;}
#settings_menu:before { content: ''; background-position: 280px -280px;}
#offline_menu:before { content: ''; background-position: 280px -240px;}
#library:before { content: ''; background-position: 280px -320px;}
#offlineLibrary:before { content: ''; background-position: 280px -840px;}
#addToLibrary:before { content: ''; background-position: 280px -800px;}
#mobscrolupbtn:before { content: ''; background-position: 280px -480px; transform: rotate(270deg);}
#mobscroldownbtn:before { content: ''; background-position: 280px -480px; transform: rotate(180deg);}
#zoomResetButton:before { content: ''; background-position: 280px -760px;}
#zoomInButton:before { content: ''; background-position: 280px -360px;}
#zoomOutButton:before { content: ''; background-position: 280px -400px;}
#zoomNextPage:before { content: ''; background-position: 280px -480px; transform: rotate(90deg);}
#zoomPrevPage:before { content: ''; background-position: 280px -480px; transform: rotate(270deg);}
.fa-chevron-left:before { background-position: 160px -1200px; width: 40px; height: 40px; filter: invert(.6);}
.fa-chevron-right:before { background-position: 120px -1200px; width: 40px; height: 40px; filter: invert(.6);}
.fa-angle-double-right:before { background-position: -75px -1625px; width: 25px; height: 25px; background-size: 400%; filter: invert(.6);}
.fa-angle-double-left:before { background-position: -50px -1625px; width: 25px; height: 25px; background-size: 400%; filter: invert(.6);}
.dt_article_btn_left { position: absolute; width: auto; padding: 15px; top: 50%; margin-top: -22px; background-color: rgba(0, 0, 0, 0.5); border-radius: 0 10px 10px 0; -moz-border-radius: 0 10px 10px 0; -webkit-border-radius: 0 10px 10px 0; border: 0px solid #000000; color: white; font-weight: bold; height: 18px; z-index: 1011;}
.dt_article_btn_right { position: absolute; width: auto; padding: 15px; top: 50%; margin-top: -22px; background-color: rgba(0, 0, 0, 0.5); border-radius: 10px 0 0 10px; -moz-border-radius: 10px 0 0 10px; -webkit-border-radius: 10px 0 0 10px; border: 0px solid #000000; color: white; font-weight: bold; height: 18px; z-index: 1011;}
.dt_article_btn_left .fa-chevron-left:before { width: 18px; background-position: 0px -538px; height: 23px; filter: invert(0);}
.dt_article_btn_right .fa-chevron-right:before { width: 18px; background-position: -15px -538px; height: 23px; filter: invert(0);}
.dr .w500 { content: ''; background-size: 500%;}
.dr .w400 { content: ''; background-size: 400%;}
.dr .w300 { content: ''; background-size: 300%;}
.dr .w200 { content: ''; background-size: 200%;}
#facebook-share:before, #twitter-share:before, #link-share:before{ text-rendering: auto; line-height: 1; display: inline-block; content: ''; height: 50px; width: 48px; background-size: 400%; filter:invert(3)}
#facebook-share:before { background-position: -48px -718px;}
#twitter-share:before { background-position: -48px -766px;}
#link-share:before { background-position: -48px -814px;}
.fa-share-alt { background-position: -50px -175px; background-size: 400%; height: 33px; width: 42px; position: absolute; top:4px;}
.savedBookmark:before, .addBookmark:before, .removeBookmark:before { width: 23px; background-size: 500%; content: ''; height: 30px; float: right; }
.savedBookmark:before { background-position: -60px -828px;}
.addBookmark::before { width: 30px; background-position: -117px -1280px;}
.desktop_hlp:before { content: ''; background-position: -86px -576px; width: 66px; font-size: 35px; display: inline-block; height: 51px; filter:invert(3); }
.close:before { margin-right: 0px; content: ''; position: absolute; right: 0px; cursor: pointer; margin-top: 0px; background-position: -70px -1190px; background-size: 400%; width: 35px; height: 35px; filter: invert(10) brightness(10);}
.removeBookmark { color: red; position: absolute; bottom: 2px; z-index: 1; right: -10px; cursor: pointer;}
.addBookmark { font-family: Font Awesome 5 Pro; color: #35ba0c; position: absolute; bottom: 3px; z-index: 1; right: 3px; cursor: pointer; font-weight: 400;}
.savedBookmark { color: darkorange; position: absolute; bottom: 2px; z-index: 1; right: -10px; cursor: pointer;}
.shareicon { color: #ffffff; cursor: pointer; font-size: 40px; margin-left: 0px; margin-right: 10px;}
/** PANELS **/
.panel, .nonClick_panel { position: fixed; top: 30px; bottom: 50px; right: 100px; background-color: transparent; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; overflow: hidden;}
.paneloffline { background-color: rgba(0, 0, 0, 0.9); border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border: 0px solid #000000; overflow: hidden; width: 90%; height: 90vh;}
.panel.hidden { transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); right: -40px;}
.panel.open { transition: 0.5s linear;}
.scrollPanel { position: relative; overflow: hidden; top: 0; bottom: 0; left: 0; right: 0; scrollbar-color: #8f8f8f #515151; width: 99%;}
.panelHeader { font-weight: 600; color: white; font-size: 24px; width: calc(100% - 40px); box-sizing: border-box; line-height: 35px;}
.panelblock, #articleWrapper, .articleContainer { background-color: #FFF; padding: 15px; margin-top: 10px; box-sizing: border-box; border-radius: 5px;}
.panelblockheader{font-size:18px; font-weight:600; color: #636363; margin-bottom:5px;}
.panelblocksubtext{font-size:14px; font-weight:500; color: #636363;}
.container { display: block; position: relative; height: auto; padding-left: 0px 7px; box-sizing: border-box;}
.container ul { list-style: none; margin: 0; padding: 0;}
.container ul li { color: #333; display: block; position: relative; float: left; width: 100%; margin-bottom:15px; }
.container ul li input[type=radio] { position: absolute; visibility: hidden;}
.container ul li label { display: block; position: relative; font-weight: 600; font-size: 18px; padding: 0px 0px 0px 40px; margin: 10px auto; z-index: 9; cursor: pointer; -webkit-transition: all 0.25s linear;}
.container ul li:hover label { color: #333;}
.container ul li .check { display: block; position: absolute; border: 2px solid #333; border-radius: 100%; height: 16px; width: 16px; top: 10px; left: 0px; z-index: 5; transition: border .25s linear; -webkit-transition: border .25s linear;}
.container ul li:hover .check { border: 2px solid #333;}
.container ul li .check::before { display: block; position: absolute; content: ''; border-radius: 100%; height: 10px; width: 10px; top: 3px; left: 3px; margin: auto; transition: background 0.25s linear; -webkit-transition: background 0.25s linear;}
.container input[type=radio]:checked ~ .check { border: 2px solid #079F9F;}
.container input[type=radio]:checked ~ .check::before { background: #079F9F;}
.container input[type=radio]:checked ~ label { color: #333;}
.settingsdesc{font-size:13px; display:block; margin-top:5px; font-weight:400;}
.lastRead_container, .help_container { position: absolute; width: 600px; z-index: 100; left: calc(50% - 300px); top: 30%; padding:15px; box-sizing:border-box;}
.helpblock{background-color:white; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-top:10px;}
.helptxtcontainer { color: #333; width: calc(100% - 20px); margin-left: 10px; padding-bottom: 30px;}
.helpicons{filter:invert(3);}
.desktop_hlp { text-align: center;}
#menuContent li::before, #zoomMenu li::before {background-color: transparent; filter: invert(1);}
#menuContent li { color: #333; font-family: 'Inter', sans-serif; font-weight: 400;}
.menuItem:hover { background-color: #ededed; }
#overviewPanel .group:hover { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; transform: none; -webkit-transform: none; transition: none; -webkit-transition: none;}
.closetxt{color:white; font-size:16px; font-weight:400; float:right;}
.panelsubheader{color:white; font-size:14px; font-weight:400; margin-bottom:20px;}
.savedBookmark, .removeBookmark { bottom: -25px; right: -4px;}
.scrollPanelBookmarks{margin-top:10px;}
.removeBookmark::before { background-position: -120px -828px;}
#articlePanel { width: 600px}
#overviewPanel { left: 60px;}
#audioPanel { width: 400px;}
#bookmarksPanel { width: 400px;}
#contentPanel { width: 400px;}
#printPanel { left: 60px;}
#notesPanel { width: 300px;}
#bookmarkPanel { width: 450px;}
#offlinePanel { position: relative; left: 50%; top: 50%; transform: translate(-50%,-50%);}
#shareContainer { width: 300px;}
#helpPanel { width: 400px;}
#searchPanel { width: 400px; bottom: 50px;}
#settingsPanel { width: 400px; color:#333;}
#audio1 { position: fixed; z-index: 9999; color: #646464}
#print1 { position: fixed; z-index: 9999; color: #646464}
#settings1 { position: fixed; z-index: 9999; color: #646464}
#content1 { position: fixed; z-index: 9999; color: #646464; }
#overview1 { position: fixed; z-index: 9999; color: #646464;}
#bookmarks1 { position: fixed; z-index: 9999; color: #646464;}
#article1 { position: fixed; z-index: 9999; color: #646464; cursor: pointer;}
#offline1 { position: fixed; z-index: 9999; color: #646464;}
#search1 { position: fixed; z-index: 9999; color: #646464; }
#share1 { position: fixed; z-index: 9999; color: #646464; }
#mobscrolupbtn:before { content: ''; background-position: 280px -480px; transform: rotate(270deg);}
#mobscroldownbtn:before { content: ''; background-position: 280px -480px; transform: rotate(180deg);}
#zoomResetButton:before { content: ''; background-position: 280px -760px;}
#zoomInButton:before { content: ''; background-position: 280px -360px;}/* 276px -361px*/
#zoomOutButton:before { content: ''; background-position: 280px -400px;}
#zoomNextPage:before { content: ''; background-position: 280px -480px; transform: rotate(90deg);}
#zoomPrevPage:before { content: ''; background-position: 280px -480px; transform: rotate(270deg);}
.arrowIcon { position: relative; text-align: center; color: white; cursor: pointer;}
/** ARTICLES **/
#articlePanel.open { width: 90%; -webkit-transition-duration: width 0.3s linear; -moz-transition-duration: width 0.3s linear; -o-transition-duration: width 0.3s linear; transition-duration: width 0.3s linear; transition: width 0.3s linear; max-width: calc(997px + 400px); margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; left: 0;}
#articlePanel:not(.open) > #articleWrapper { width: 600px;}
#articlePanel.hidden #cons { transition: none;}
#articles { height: calc(100vh - 150px); overflow: auto; -webkit-overflow-scrolling: touch; overflow: auto; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) scale(1) translateZ(0px); -webkit-transition-duration: width 0.3s ease-in-out; -moz-transition-duration: width 0.3s ease-in-out; -o-transition-duration: width 0.3s ease-in-out; transition-duration: width 0.3s ease-in-out; transition: width 0.3s ease-in-out; -webkit-mask-image: linear-gradient(to bottom, black 97%, transparent 100%); mask-image: linear-gradient(to bottom, black 97%, transparent 100%); float: left; width: 570px;}
#articles li:last-child {margin-bottom:20px;}
#articles.li img { height: 5vw; width: 5vw; float: left; margin-left: 10px;}
.article_content_image { height: 5vw; width: 5vw; float: left; padding-right: 25px; margin-left: 10px; right: 50px}
.artile_content_info { position: relative; left: 0; right: 0; width: calc(100% - 115px); margin-left: 125px;}
.artile_content_info.offline { width: auto; margin-left: 0px;}
.article_content > img { padding: 10px;}
.article_header { padding: 10px; background-color: black !important; color: white;}
#articles li { border-bottom: 1px solid #ededed; padding: 10px; font-size: 13px; min-height: 100px; width:calc(100% - 40px)}
#articles li:hover { background-color: rgba(255, 255, 255, 0.20);}
.articlesection { font-weight: 500; font-size: 12px; text-transform: uppercase; margin-bottom: 4px; display: inline-block; height: 13px; line-height: 13px; color: #646464; overflow:hidden;}
.articleh1 { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 4px; display: inline-block; width: 90%; text-transform:uppercase;}
.articlelisttxt { font-size: 14px; font-weight: 400; color: #646464; display: inline-block; width: 90%;}
.articleimgholder { float: left; margin-right: 15px; height: 100px; width: 100px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; overflow: hidden; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); }
.articleimage { object-fit: cover; width: 100px; height: 100px; float: left; margin-right: 15px;}
.articleContainer { width: calc(100% - 600px); height: calc(100vh - 140px); float: right; z-index: 9999; padding:0px;}
.article_selected { background-color: rgba(255, 255, 255, 0.20); transition: background-color 664ms linear;}
#article_view { width: 100%; height: 100%; background-color: white; overflow: hidden; display: flex; margin-top:5px;}
.article-full-body { font-size: 10px;}
.article_content .pageNumber { float: right; color: #333;}
.article_content .section { padding: 5px; border-radius: 2px 2px 0px 0px; margin-bottom: 10px; color: #333; font-size: 12px; font-weight: bolder; }
.article_content .snippet { color: #dedede}
.article_view_page { position: static; display: inline-block; /*display: block;*/ width: 100%; flex-shrink: 0; position: relative; height: 100%; border: 0px; -webkit-overflow-scrolling: touch; overflow: scroll; top: 0; left: 0;}
#btnCloseArticle { display: none;}
.dt_article_btn { position: absolute; width: auto; padding: 16px; top: 50%; margin-top: -22px; color: #eee; font-weight: bold; font-size: 18px; transition: background-color 0.6s ease; border-radius: 0 3px 3px 0; z-index: 1011;}
#btnCloseArticle { display: none;}
.articlecontrols { display: none;}
.pageNumber { font-size: 18px; font-weight:600;}
.sbtnContainer { position: absolute; top: -2px; right: 88px; display: none}
.articleContainer.loading:before { left: 70%;}
.article_item { list-style: none; min-height: 100px; padding: 10px; padding-top: 15px; padding-bottom: 15px; border-bottom: 1px solid #c0c0c0; cursor: pointer;}
/** BOOKMARKS **/
#bookmarkContainer .thumbnailContainer .bookmarkThumbnail:after, #myBookmarkContainer .thumbnailContainer .bookmarkThumbnail:after { content: "" attr(pageNum); position: absolute; bottom: -28px; left: 0; right: 0px; display: inline-block; color: #636363; text-transform: uppercase; font-size: 12px; text-align: center; padding: 5px; font-weight: 400;}
#bookmarkContainer .thumbnailContainer .bookmarkThumbnail, #myBookmarkContainer .thumbnailContainer .bookmarkThumbnail { display: inline-block; margin: 0px 15px 45px 0px; position: relative; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#bmContainer { height: calc(100vh - 465px); overflow-y: auto; width: 99%;}
#bookmarkContainer{margin-top:20px;}
.add_articleBookmark { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-weight: 400; margin-right: 14px; opacity: .7;}
.remove_articleBookmark { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-weight: 900; margin-right: 14px;}
.article_bookmark { color: white; float: right; z-index: 99999;}
.article_bookmark:before { content: ''; width: 25px; background-size: 500%; position: absolute; height: 25px;}
.add_articleBookmark:before { background-position: 90px -100px;}
.remove_articleBookmark:before { background-position: 90px -880px;}
.noBookmarkssaved { color: white; font-size: 14px; padding: 0px 20px; line-height: 1.2;}
.bookmarkThumbnail { width: 120px; height: 157px;}
.bookmarkscroller { height: calc(100vh - 240px);}
/** SEARCH **/
#searchResults, #tsResults { -webkit-mask-image: linear-gradient(to bottom, black 97%, transparent 100%); mask-image: linear-gradient(to bottom, black 97%, transparent 100%); overflow: auto;height: calc(100vh - 320px); margin-top:10px; padding-bottom: 20px;}
#searchResults ul, #tsResults ul { overflow: auto; height: calc(100vh - 150px); scrollbar-color: #8f8f8f #515151;}
#searchResults li > p { padding: 10px; width: calc(100% - 9vw); position: absolute; right: 0px; font-size: 10pt;}
#searchResults li:after { margin-top: 15px; content: attr(pagenumber); right: 6px; bottom: 6px; position: absolute; z-index: -1; font-size: 22px; font-family: 'Inter'; color: #333; opacity: 0.3; font-weight: 700;}
#searchResults li { display: block; font-size: 11px; position: relative; border-bottom: 1px solid #afafaf; margin: 5px; cursor: pointer; -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; font-weight: 300; overflow: hidden;}
#searchResults li > div { display: inline-block; padding: 10px;}
#searchResults li > div > div { display: inline-block; position: absolute; margin: 0px 20px 0px 20px;}
#searchResults img, #tsResults img {border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; height: 117px; -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.17); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.17); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.17);}
#tsResults img {height: auto; width:110px;}
#searchResults::-webkit-scrollbar-track-piece { background-color: #C2D2E4;}
#searchResults::-webkit-scrollbar-thumb:vertical { background-color: #0A4C95;}
.searchItem { margin-bottom: 30px; display: block; padding: 10px 10px 15px 15px; font-size: small; color: #545454;}
.searchContainer { top: 10%; position: absolute; width: 85%; right: 8%; margin: auto auto; z-index: 100; height: 80vh;}
.searchImage { width: 120px; float: left; margin-right: 12px;}
.searchText { width: calc(100% - 140px); float: right; height: 157px; overflow: hidden; position: relative;}
.searchtxt:after { content: ""; position: absolute; z-index: 1; bottom: 0; left: 0; pointer-events: none; background-image: linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,1) 100%); width: 100%; height: 50px;}
.searchbtn { margin: 5px; width: 125px;}
.contentstxt { text-align: left; font-family: 'Inter'; font-weight: 400; font-size: 13px; color: #333; height: 91px; overflow: hidden; -webkit-line-clamp: 6; line-height: 18px;}
.searchpanelblock{ background-color: #FFF; padding: 15px; margin-top: 10px; box-sizing: border-box; border-radius: 5px; height:80vh;}
/** AUDIO **/
#audioPanel li:before { content: ""; float:left; z-index: -1; height: 35px; color: white; display: inline-block; background-position: -61px -1427px; width: 35px; background-size: 600%; filter:invert(3);}
#audioPanel li.play:before { content: "";}
#audioPanel li.stop:before { content: "";}
#audioPanel li.paused:before { content: ""; background-position: -114px -1742px;}
#audioPanel li:hover { background-color: rgba(255, 255, 255, 0.20);}
#audioPanel li { display: block; min-height: 35px; position: relative; border-bottom: 1px solid #afafaf; padding: 10px 0px; cursor: pointer; -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s;}
#audioPanel li:after { content: attr(pagenumber); font-size: 22px; font-family: 'Inter'; position: absolute; right: 10px; top: 10px; color:#333;}
#audioPanel li:hover:after { color: red;}
#audioPanel ul { overflow: auto; height: 90%;}
.contentheaderaudio { text-align: left; font-family: 'Inter', sans-serif; font-size: 15px; color: #333; font-weight: 400; width: 260px; padding-left: 40px; margin-top: 7px;}
.audio_standard {}
/** BUTTONS **/
.rprimarybutton, .rgraybutton, .optionbutton { text-transform: uppercase; -webkit-appearance: none; border: none; text-indent: 0; display: inline-block; color: #ffffff; font-family: 'Inter'; font-size: 13px; font-weight: 600; height: 40px; line-height: 40px; width: 100%; text-decoration: none; text-align: center; cursor: pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.rprimarybutton{background-color: #079F9F;}
.rprimarybutton:link { color: white;}
.rprimarybutton:active { color: white;}
.rprimarybutton:hover { color: white; background-color: #008D8D;}
.rgraybutton { background-color: #9d9a9a;}
.rgraybutton { color: white;}
.rgraybutton:active { color: white; }
.rgraybutton:hover { color: white; background-color: #656565; }
.optionbutton { color: white; background: #9d9a9a; width: 175px; height: 35px; line-height: 35px; text-transform: uppercase;}
.optionbutton:hover:enabled { background: #FF580A; text-decoration: none; color: white;}
.optionbutton:disabled { cursor: default; opacity: 0.5;}
.pdfbtn { float: right; margin-right: 50px; margin-top: 2px;}
/** MESSAGES **/
.mobileInfo { background-color: transparent; text-align: center; padding: 10px; display: none;}
/** ANIMATIONS **/
@-webkit-keyframes fadeInFromNone {
0% { display: none; opacity: 0; right: 0px; }
5% { display: block; opacity: 1; right: 0px; }
75% { display: block; opacity: 1; right: 0px; }
100% { display: block; opacity: 0; left: 80%; }
}
@keyframes showNotification {
to { opacity: 1; left: 0px; }
}
@keyframes loading_rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.fade_out { -webkit-animation: fadeInFromNone 5s ease-out;}
/** OVERRIDES & DEFAUTS **/
.rdmt10 { margin-top: 10px;}
.rdmt15 { margin-top: 15px;}
.rdmt20 { margin-top: 20px;}
.cb { clear: both;}
.fl{float:left;}
.fr{float:right;}
.quota-estimate { background-color: #757575; height: 12px; position: absolute; line-height: inherit; border-radius: 14px !important;}
.quota-progress-container { width: 400px; height: 12px; position: relative; background-color: #f1f1f1; border-radius: 14px !important; padding: 2px;}
.quota { text-transform: none;}
.offlinelibrarypad { padding: 0px 20px 20px 20px;}
.offlinestoragetxt1 { width: 250px; color: #d6d6d6; text-align: left; font-size: 16px;}
.offlinestoragetxt2 { width: 50px; color: white; text-align: right; font-size: 16px;}
.offlinesizing { margin-top: 20px; height: calc(100vh - 330px); position: relative;}
/******************************** STYLING FOR OFFLINE READING *****************************************/
.mt20 { margin-top: 20px;}
.libraryquota { float: left; padding: 20px;}
.libraryHeader { font-weight: 400; text-transform: uppercase; color: white; font-size: 28px; padding: 10px 10px 10px 0px; float: left; width: 500px; border-bottom: 0px solid #c0c0c0; box-sizing: border-box;}
.libraryHeader:after { content: ""; color: white; height: 20px; margin: 10px; background-position: -40px -810px; background-size: 410%; width: 39px; display: inline-flex;}
.ppcproductholder { width: 230px; margin-right: 20px; float: left; margin-bottom: 15px; box-sizing: border-box; cursor: pointer; margin-top: 3px; position: relative; cursor: default;}
.ppcproductoverflow { width: 100%; padding-bottom: 135%; margin-bottom: 5px; position: relative;}
.resppccoversize { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%;}
.mtitleholder { width: calc(100% - 25px); float: left;}
.ppctitlefadebox { position: relative; margin-top: 5px; margin-bottom: 5px; text-align: left; width: 100%; white-space: nowrap; overflow: hidden; display: block;}
.lowerproductdescription { display: block; font-size: 14px; height: 29px; overflow: hidden;}
.covertitlelink { font-size: 14px; font-weight: 600; color: white; width: calc(100% - 30px); display: inline-block; overflow: hidden;}
.covertitlelink::after { background-image: -webkit-linear-gradient(right,rgba(0,0,0,1),rgba(0,0,0,0)); background-image: -moz-linear-gradient(right,rgba(0,0,0,1),rgba(0,0,0,0)); background-image: -ms-linear-gradient(right,rgba(0,0,0,1),rgba(0,0,0,0)); background-image: -o-linear-gradient(right,rgba(0,0,0,1),rgba(0,0,0,0)); background-image: linear-gradient(to left,rgba(0,0,0,1),rgba(0,0,0,0));}
span.remove-issue:before { content: ''; height: 12px; position: absolute; z-index: 9; bottom: 0px; color: red; right: 3px; cursor: pointer; display: inline-block; background-position: 30px 235px; width: 26px; height: 100px; background-size: 400%;}
.plusfilters { width: 100%; float: right; position: absolute;}
.dropbtn3 { width: 120px; text-align: right;}
.dpd16 { font-size: 14px; font-weight: 600; line-height: 32px;}
.dropdown { position: relative; display: inline-block; font-size: 12px; }
.mob, .sb-hide { display: none;}
.dropbtn { color: #fff; font-size: 12px; border: none; background-color: transparent; cursor: pointer; font-family: 'Open Sans',sans-serif; font-weight: 400; padding: 0;}
.mtitleholder { width: 100%; float: left;}
.mtitlesdd { right: 0px; z-index: 999;}
.mddlink { line-height: 25px; display: block !important; width: 110px;}
.maddoptions { width: 130px; text-align: left;}
.mattopimg { z-index: 3; position: absolute; border: 1px #484848 solid; cursor: pointer;}
matbottomimg1 { z-index: 2; top: -8px; position: absolute; width: 92%; margin-left: 4%; border: 1px #cdcdcd solid; background-color: white;}
.matbottomimg2 { z-index: 1; top: -16px; position: absolute; width: 84%; margin-left: 8%; border: 1px #cdcdcd solid; background-color: white;}
.view { overflow: visible;}
#offlinepanel .panelHeader::before { content: '';}
#offline_library { position: fixed; z-index: 9999; color: #646464;}
.offline_issueThumbs { overflow-y: scroll; overflow-x: hidden; height: 100%; white-space: nowrap;}
#notification-area { position: fixed; top: 0px; right: 10px; width: 250px; height: 100vh; display: flex; flex-direction: column; justify-content: flex-top; z-index: 9999999;}
.notification { position: absolute; padding: 15px 10px; background: #111; color: #f5f5f5; font-family: "Raleway"; font-size: 14px; font-weight: 600; border-radius: 5px; margin: 5px 0px; opacity: 0; right: 50px;}
.notification.success2 { background: #389838;}
.notification.error { background: orangered;}
.notification.info { background: #00acee;}
.innerShadow, .outterShadow { position: absolute}
.flipPage { background-image: url(//mcgeneral.blob.core.windows.net/html5reader/v3.0/content/pageLoading.gif); background-size: auto; background-position: center; background-color: white; width: 100%; height: 100%; top: 0; left: 0; position: absolute; background-repeat: no-repeat;}
.closeButton { left: 0px; top: 0px; position: absolute; width: 81px; height: 32px; z-index: 99999; background: black; border-radius: 15px; padding: 5px;}
.closeButton:after { content: 'Close'; font-size: 16px; right: 0px; position: absolute; color: white; font-weight: bold; top: 10px;}
.closeButton:before { content: ''; position: absolute; cursor: pointer; background-repeat: no-repeat; background-position: -40px -762px; background-size: 400%; width: 42px; height: 42px;}
.closeButton > .label { position: absolute; color: white; font-weight: bold; right: 12px; top: 10px;}
#context-menu { position: fixed; z-index: 10000; width: 200px; background: white; border-radius: 5px; transform: scale(0); transform-origin: top left; color: white}
#context-menu.visible { transform: scale(1); transition: transform 200ms ease-in-out;}
.overlay2 { background-color: rgba(255,255,255,0.8); top: 0; left: 0; bottom: 0; right: 0px; position: absolute; transition: background-color 400ms linear, visibility 0s, opacity 0s; visibility: visible}
#cons { position: relative; height: 100%; display: flex; box-sizing: content-box; transition: 0s linear; transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out;}
.disabled { color: black; cursor: default;}
/** READER **/
#mask { position: fixed; overflow: hidden; top: 0; z-index: 300;}
.flippingPage, #flippingPage { background-color: #f8f8f8;}
#mask .replicate { background-repeat: no-repeat; position: absolute; background-position: 0px 0px;}
#mask * { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); }
.replicate > .shadow { position: absolute; overflow: hidden; z-index: 1; background-image: -webkit-gradient(linear, 0% 100%, 72.2581% 99.986%, color-stop(0.553571, rgba(0, 0, 0, 0)), color-stop(0.910714, rgba(0, 0, 0, 0.11)), to(rgba(255, 255, 255, 0.11))); top: 0px; z-index: 1; width: 50px; height: 662px; right: -13px;}
#lpage { width: 10px}
.titleResults { display: block; overflow: auto; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px gray dotted;}
.test:before { content: ""; background: transparent; width: 100%; height: 100%; min-height: 1px; position: absolute; top: 0;}
.tslink { font-size: 16px; margin-bottom: 8px; display: block; color: #216a92; text-decoration: none; width: 100%;}
#tsResults { overflow: auto; height: calc(100% - 60px);}
#link-share:hover .tooltip:before { visibility: visible; content: "Copy to clipboard"; position: absolute; left: 10px; width: 70px; background-color: black; color: #fff; border-radius: 6px; padding: 4px 6px; bottom: 52px; font-size: 13px; font-style:normal;}
/*#link-share:hover .tooltipddshare:before { visibility: visible; content: "Copy to clipboard"; width: 170px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 0px; position: absolute; z-index: 1; bottom: -1px; left: -100px; margin-left: -86px; transition: opacity 0.3s; white-space: nowrap; font-size: 14px;}*/
/*.tooltipddshare { visibility: visible; width: 170px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 0px; position: absolute; z-index: 1; bottom: -1px; left: 86px; margin-left: -86px; opacity: 1; transition: opacity 0.3s; white-space: nowrap; font-size: 14px; font-family: 'Inter';}*/
#link-share:hover .copied:before { content: 'Copied to clipboard'; color: #FF580A; }
.tooltiphover:hover .tooltipddshare { visibility: visible; opacity: 1;}
.tooltip:after { /*content: "Copy to clipboard"; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent;*/}
.readaloudholder { float: right; width: 190px; z-index: 10; position: relative;}
.readaloud { height: 40px; width: 40px; float: right; display: inline-block; position: relative; cursor: pointer; white-space: nowrap; user-select: none; background-position: -57px -1560px; background-size: 500%;}
.readaloud:hover { background-position: -107px -1560px;}
/** SOCIAL NETWORK **/
#lastReadContainer { position: absolute; width: 300px; margin-right: calc(50% - 250px); top: 30%; background-color: rgba(0, 0, 0, 0.8); z-index: 100; -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.85); box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; max-height: 250px; height: 190px;}
#center_lastRead { text-align: center; padding: 10px; box-sizing: border-box;}
#center_lastRead > p { color: white;}
.lastreadhead { color: white; font-size: 28px;}
.lrLink { color: white; text-decoration: none;}
.lrLinkhl { color: white; font-weight: bold; text-decoration: none;}
#last_read_text { font-weight: 400; line-height: 28px;}
.lastreadtxt1 { font-size: 18px; line-height: 28px; font-weight: 400;}
.lastreadtxt2 { font-size: 14px; line-height: 28px;}
.share-button-text { display: block; font-weight: bold; font-size: 90%; text-align: center; text-transform: uppercase; transition: all 0.25s; background: transparent;}
.share-button-text:hover { color: #ff5709;}
.share-button { margin: auto; position: relative; line-height: 1.6em; font-size: 28px; color: white; float: right; line-height: 28px; padding-top: 8px; margin-left: 10px;}
.social-networks .socialshareicon { color: white; margin: 5px; font-size: 38px;}
.no-js .social-toggle, .no-js .social-toggle:hover { cursor: default; border: none; background: transparent; color: rgb(200,200,200); pointer-events: none;}
.social-networks { opacity: 0; margin-left: -45%; -webkit-backface-visibility: hidden; position: absolute; top: 50px; right: -18px;}
.social-networks.open-menu, .no-js .social-networks { -webkit-transform: scale(1) translateY(-90px); transform: scale(1) translateY(90px); opacity: 1; z-index: 7; padding: 5px; border-radius: 10px; background-color: rgba(0, 0, 0, 0.9); color: white; right: -20px; top: -34px; height: 51px;}
.social-networks ul { position: relative; top: 0; left: 0; width: 180px; height: 40px; color: #fff; background: #3b5998; margin: auto; padding: 0; list-style: none;}
.social-networks ul:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; right: 0; border-left: 12px solid transparent; border-right: 12px solid transparent;}
.social-networks.open-menu ul:after, .no-js .social-networks ul:after { margin: 35px auto; border-top: 12px solid #3b5998;}
.social-networks li { font-size: 90%; width: 60px; margin: 0; text-align: center; float: left; display: block; height: 40px; line-height: 40px; position: relative; z-index: 2; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; transition: all .3s ease;}
.share-button a { text-decoration: none;}
.social-networks a { display: block; color: white;}
.social-networks a:hover { color: #222;}
/***************************************************************************************************/
#mnuOptions { display: block; float: right; display: inline-block; opacity: 0; transition: opacity 0.4s ease 0s,width 0.4s linear 0s; padding-right: 0px; width: 0px; z-index: 9; position: absolute; overflow: hidden; white-space: nowrap; margin-top: 0px;}
.iframeoverride { border: none; -webkit-overflow-scrolling: touch !important; position: static; display: inline-block;}
.portraitoriention { display: block;}
.landscapeoriention { display: none;}
.twitter { overflow: auto}
#nonBrowser { display: none; padding: 40px; margin: auto auto; height: 360px; border-radius: 5px; width: 600px}
.browser { float: left; width: 33%; height: 70px; margin-bottom: 20px; padding: 10px; box-sizing: border-box; text-align: left;}
.browser:hover { background-color: #efefef; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;}
.browserimg { float: left; width: 50px; margin-right: 10px;}
.browser-title { color: rgba(0,0,0,0.45); font-size: 14px; line-height: 17px; padding-left: 6px; display: table-cell; vertical-align: middle; height: 52px; text-align: left; text-decoration: underline}
.alert-box { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; /*top: 70px;*/ text-align: center; width: 100%; position: absolute; margin-left: -30px;}
.success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; display: none;}
.failure { color: #a94442; background-color: #f2dede; border-color: #ebccd1; display: none;}
.warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; display: none;}
.fadeIn { -moz-transition: opacity 2s; /* Firefox 4 */ -webkit-transition: opacity 2s; /* Safari and Chrome */ -o-transition: opacity 2s; transition: opacity 2s;}
.page_navigation, .singleScroller { display: none}
.iconcirccolor { color: #31af91;}
.iconbtncur { cursor: pointer;}
.video { cursor: pointer;}
.video[poster] { }
.video_standard {}
.pagePickerContainer { font-size: 12pt; overflow: auto; margin: 0 auto 0 auto; bottom: 45px; position: fixed; left: 0; right: 0;}
/**************** CUSTOM LAYOUT ********************/
.image { transform-origin: 0 0;}
.pickerElements { position: absolute; /*-webkit-transform: translate3d(0, 0, 0);*/}
.pickerElements:hover { cursor: pointer; }
.epub { position: absolute; -webkit-transform: translate3d(0, 0, 0); -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; background: transparent;}
.epub:hover { opacity: 0.34; cursor: pointer; border: 2px solid rgba(58, 137, 203,1);}
.page { overflow: hidden; float: left;}
.slider { overflow: hidden; position: absolute;}
.header { max-height: 0; overflow-y: hidden; -webkit-transition: max-height 0.6s ease-in-out; -moz-transition: max-height 0.6s ease-in-out; -o-transition: max-height 0.6s ease-in-out; transition: max-height 0.6s ease-in-out; top: 0; left: 0; right: 0;}
#header ul { position: absolute; right: 20px; height: 100px}
#header li { color: white; display: inline-block; padding: 10px 5px 5px 10px; cursor: pointer;}
.headerdown { max-height: 150px;}
.slideup, .slidedown { max-height: 0; overflow-y: hidden; -webkit-transition: max-height 0.6s ease-in-out; -moz-transition: max-height 0.6s ease-in-out; -o-transition: max-height 0.6s ease-in-out; transition: max-height 0.6s ease-in-out;}
.slidedown { max-height: 400px;}
.scroller { background-color: #f2f2f2; overflow: hidden; position: absolute;}
.right_pageLoading:after, .left_pageLoading:before, .loading:before, .single_pageLoading:before, .double_pageLoading:before, .left_pageLoading:before {
z-index: 99999; left: 25%;}
.right_pageLoading:after { z-index: 99999; right: 25%;}
.single_pageLoading:before { opacity: 1; right: 44%; z-index: 99999; transform: translate(-50%, -50%); top: 43%;}
@keyframes animate {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
.single_pageLoading:before { left: calc(50% - 42px); z-index: 999999}
.double_pageLoading:before { left: calc(25% - 42px);}
.double_pageLoading:after { content: "\f110"; font-family: 'Font Awesome 5 Pro'; left: calc(75% - 42px); position: absolute; top: 46%; font-size: 85px; -webkit-animation: fa-spin 2s infinite linear; color: #d3d3d3; z-index: -1;}
#thumbnailContainer { display: none; position: relative; z-index: 5000; margin: 150px auto 0px auto; width: 500px; height: 300px;}
.arrow { position: relative; margin-left: auto; margin-right: auto;}
.slideIn { transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease;}
/* <<< CHECK IF REQUIRED *********FLIP GALLERY *****************************************/
.flipper { -webkit-transition: -webkit-transform 0.7s linear; -webkit-transform-style: preserve-3d;}
.face { position: absolute;}
.flipper .front { -webkit-transform: translateZ(1px); transform: translateZ(1px); -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */ backface-visibility: hidden;}
.flipper .back { -webkit-transform: rotateY(180deg) translateZ(1px); transform: rotateY(180deg) translateZ(1px); -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */ backface-visibility: hidden;}
.notransition { -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; -ms-transition: none !important; transition: none !important; animation-duration: none !important; transition: none !important; -webkit-transition: none !important;}
.transition { transition: all 10 ms ease; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: 0s linear; transition: all 0.5s ease-out;}
.addButton:before { content: "\f055"; background-color: #202d3c;}
.removeButton:before { content: "\f057"; background-color: #202d3c;}
.bookmark_item:after { content: "\f057"; background-color: #202d3c;}
.bookmark_item { color: white; padding: 2px 5px}
#scrollView.rotate:before { transform: rotate(90deg);}
#pageTurner.rotate:before { content: "\f016"; background-color: #202d3c;}
.highlightPickerElement { -webkit-animation: pulse 1s ease-in-out; background: #d6d6d6; -webkit-animation-iteration-count: 2;}
.highlightPickerElement:before { content: ''; position: absolute; width: 100%; height: 100%;}
.loadingScreen { position: fixed; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 100000; text-align: center; cursor: wait; display: flex; justify-content: center; align-items: flex-start; padding-top: 100px;}
.loadingScreen span.small { font-size: 20px; display: block; margin-top: 20px;}
.loadingScreen span { color: #fff; font-size: 30px; -webkit-animation: myfirst 1s infinite alternate; margin-top: 10px; line-height: 1em; display: block;}
.small { font-size: 0.8em;}
#scroll_pageUp:before { content: ''; background-position: 281px -480px; width: 11% !important; background-size: 400%; background-color: #202d3c;}
#scroll_pageDown:before { content: ''; background-position: 281px -520px; width: 11% !important; background-size: 400%; background-color: #202d3c;}
#zoomContainer1 { position: absolute; z-index: 9999; right: 30px; bottom: 20px; padding: 5px; opacity: 1; height: 150px; width: 10px;}
#reviewContainer, #surveyContainer { position: absolute; width: 450px; display: none; top: calc(50% - 300px); background: white; overflow: hidden; border: 1px solid #ddd; border-radius: 5px; left: calc(25% - 225px); -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);}
.container_header { background-color: white; padding: 20px 20px 0px 20px; margin-bottom: 20px;}
.reviewimg { width: 200px; margin-left: calc(50% - 100px); text-align: center}
.reviewtxt { padding: 20px; text-align: center;}
.thankstxt { padding: 20px; font-size: 14px; text-align: center;}
.containerbodytxt { background-color: #f7f7f7; padding: 0px 20px 40px 20px; text-align: center; font-size: 14px; font-weight: bold}
.ratingbtn { display: inline; text-align: center; white-space: nowrap; touch-action: manipulation; padding: 5px 9px; box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); background-color: white; transition: all 0.3s ease 0s; border: 0px solid #ddd; margin-right: 5px; border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; font-weight: 700; font-size: 15px; color: #919191; font-family: 'Inter'; cursor: pointer; overflow: hidden;}
.commentstxt { width: 100%; margin-top: 0px; margin-bottom: 15px; height: 90px; font-family: 'Inter'; padding: 10px; box-sizing: border-box;}
.reviewcancelbtn { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-family: 'Inter'; font-weight: 700; color: #333; font-size: 14px; background: #d5d5d5; width: 100px; height: 30px; line-height: 30px; border: none; text-decoration: none; cursor: pointer; margin-left: 10px; margin-right: 10px;}
.reviewsendbtn { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-family: 'Inter'; font-weight: 700; color: white; font-size: 14px; background: #fb580b; width: 100px; height: 30px; line-height: 30px; border: none; text-decoration: none; cursor: pointer; margin-left: 10px; margin-right: 10px;}
.ratingbtnlowertxtholder { width: 250px; margin-top: 8px; margin-left: calc(50% - 125px); font-size: 12px; font-weight: 400; color: #919191;}
.surveyratingbtnlowertxtholder { width: 100%; margin-top: 8px; font-size: 12px; font-weight: 400; color: #919191;}
.ratingbtnlowertxt1 { float: left;}
.ratingbtnlowertxt2 { float: right;}
.surveylogo { width: 250px; margin-bottom: 10px;}
.menu_header:after { background-color: #1c1c1c;}
.icon, .icon:after, .icon:before { position: absolute; width: 25px; height: 3px; background: white; border-radius: 20px;}
.icon { display: block; text-indent: -999em; left: 0px; top: 25px;}
.icon:after, .icon:before { content: "\f0c9"; left: 0;}
.icon:before { top: -10px;}
.icon:after { top: 10px;}
#menuHeader:after,#menuHeader:before { position: absolute; width: 30px; height: 3px; background: white; border-radius: 30px; cursor: pointer;}
#menuHeader { display: block; text-indent: -999em; right: 15px; top: 25px; position: absolute; width: 30px; height: 3px; background: white; border-radius: 30px; cursor: pointer; border: 1px solid white;}
#menuHeader:after, #menuHeader:before { content: "\00a0"; left: 0px;}
#menuHeader:before { top: -7px;}
#menuHeader:after { top: 7px;}
.overview_gallery li { display: inline-block; list-style-type: none; border: 1px solid white}
.overview_gallery div:after { clear: both;}
.overview_gallery img { height: 120px;}
.overview_gallery li:after { clear: both;}
.highlighted { background-color: #ffd797; color: #444; border-color: rgba(0,0,0,.08);}
#appDownload1, #lastPageRead,#help1 { position: fixed; z-index: 9999; color: #646464; font-family: 'Inter'; font-size: 14px}
#helpPanel { position: absolute; max-width: 600px; font-family: 'Inter'; width: 40%; right: 30%; top: 16%; bottom: 16%; background-color: rgba(0, 0, 0, 0.8); margin: auto auto; z-index: 100; -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.85); box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; max-height: 600px;}
#appDownloadPanel { position: absolute; max-width: 620px; font-family: 'Inter'; width: 40%; right: 30%; top: 16%; bottom: 16%; background-color: rgba(0, 0, 0, 0.8); margin: auto auto; z-index: 100; -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.85); box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; max-height: 260px;}
.appdownloadcontainer > p { color: white; margin-left; font-family: 'Inter'; font-size: 15px; display: none;}
.zoomnav { display: none}
.overlay h2.header { font-family: Oswald; font-size: 22px; font-weight: 700; text-align: left; color: white;}
#help1.overlay { background-color: rgba(255,255,255,0.0);}
.ip5hide { display: inline-block;}
/************************************* SLIDE-OUT CONTAINER ***************************/
#overview_menu_container { right: -1000px;}
#content_menu_container { background: #fff; margin: 0px; font-family: Inter; font-size: 14px;}
#overview_menu_container { background: #fff; margin: 0px; width: 900px;}
.navigation.on { right: 60px;}
.navigation { background-color: rgba(255,255,255,0.98); box-shadow: 0 0 5px rgba(0,0,0,.3); color: #333; position: fixed; top: 0; bottom: 0; right: -520px; width: 400px; -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s;}
.navigation ul { left: 0; right: 0; height: 90%; overflow: auto; font-family: Inter; font-weight: 400; font-size: 12px; overflow: hidden; overflow: auto; }
#bookmark_menu_container li:after { margin-top: 10px; content: attr(pagenumber); right: 20px; bottom: 0; position: absolute; z-index: -1; font-size: 45px; font-family: Oswald, Serif; color: #ccc; opacity: 0.8;}
#content_menu_container li { display: block; font-size: 13px; position: relative; border-bottom: 1px solid #afafaf; padding: 15px 15px 0px 20px; margin: 5px; font-family: Inter;}
#content_menu_container h2 { text-align: left; font-family: oswald; font-weight: 700; font-size: 16px;}
#content_menu_container h1 { padding: 5px;}
#content_menu_container h1:before { margin: 5px; content: 'X'; right: 20px; top: 0; position: absolute; z-index: 6; color: #a21212; font-family: oswald;}
#content_menu_container h1:hover { cursor: pointer;}
.contentheader { text-align: left; font-family: 'Inter', sans-serif; font-size: 22px; color: white; font-weight: 400;}
#bookmark_menu_container li { display: block; font-size: 12px; position: relative; padding: 15px 15px 10px 20px; border-bottom: 1px solid #e5e5e5;}
#bookmark_menu_container h1 { padding: 5px;}
#bookmark_menu_container h1:before { margin: 5px; content: 'X'; right: 20px; top: 0; position: absolute; z-index: 6; color: #a21212; font-family: oswald; }
#bookmark_menu_container h2 { text-align: center;}
#bookmark_menu_container { font-family: Arial; font-size: 11px;}
bookmark_menu_container h1:hover { cursor: pointer}
.offlinePanelHeader, .subpanelHeader { font-family: 'Inter', sans-serif; font-weight: 300; color: #646464; font-size: 26px; padding: 10px; width: calc(100% - 30px); height: 35px; border-bottom: 1px solid #c0c0c0;}
.chevron { position: relative; cursor: pointer; text-align: center; width: 20px; border: 1px solid yellow; height: 60px;}
.chevron:before { position: absolute; content: ''; background-color: #6e6e6e; transform: skew(0deg,140deg); top: 15px; left: 10px; width: 30px; height: 4px;}
.chevron:after { position: absolute; content: ''; background-color: #6e6e6e; top: 40px; left: 10px; width: 30px; height: 4px; transform: skew(0deg,-140deg);}
.galleryiconleft { position: absolute; pointer-events: none; margin-left: -17px; transform: translate(0,-50%); top: 50%;}
.galleryiconright { position: absolute; pointer-events: none; transform: translate(0,-50%); top: 50%; margin-left: -17px;}
.panel { border-left: 0px solid #a5a5a5;}
#btnFirstPage { top: calc(50% - 15px); height: 20px;}
#btnPreviousPage { top: calc(50% - 10px); height: 30px;}
#btnNextPage { top: calc(50% - 10px); height: 30px;}
#btnLastPage { top: calc(50% - 15px); height: 20px;}
.selected:before { color: #111; background-color: #fff; font-weight: bold;}
#navigationControl { position: absolute; text-align: center; z-index: 10; height: 20px; bottom: 0px; left: 0px; right: 0px; list-style-type: disc; z-index: 1010;}
li.speechbtn { display: inline-block;}
.speechbtn.fal:before { background-size: 500%; width: 40px; height: 40px; display: inline-block; content: ''; cursor: pointer;}
.fa-play-circle:before { background-position: -55px -1355px;}
.fa-play-circle:hover::before { background-position: -105px -1355px;}
.fa-stop-circle:before { background-position: -55px -1605px;}
.fa-pause-circle:before { background-position: -105px -1655px;}
.speechspeed:before { background-position: -42px -2334px;}
.speechspeed { font-size: 16px; font-family: 'Inter'; color: white; border-radius: 10px; border: 2px solid white; padding: 0px 7px; height: 24px; line-height: 22px; margin-top: 0px; box-sizing: content-box; position: absolute; top: 5px; margin-left: 7px;}
.speechspeed:hover { border: 2px solid #ff5709; }
a.gallery_button_left { position: absolute; width: auto; padding: 16px; top: 50%; margin-top: -22px; color: #eee; font-weight: bold; font-size: 18px; transition: background-color 0.6s ease; border-radius: 0 3px 3px 0; z-index: 1011; left: 0; height: 20px;}
a.gallery_button_right { position: absolute; width: auto; padding: 16px; top: 50%; margin-top: -22px; color: #eee; font-weight: bold; font-size: 18px; transition: background-color 0.6s ease; border-radius: 0 3px 3px 0; z-index: 1011; right: 0; height: 20px;}
a.gallery_button_right:hover, a.gallery_button_left:hover { background-color: rgba(0,0,0,0.8); }
.dot { top: 0px; width: 9px; height: 9px; margin: 0 10px; position: relative; border-radius: 100%; display: inline-block; background-color: rgba(168, 168, 168, 0.6); border: 2px solid black;}
.dot:hover { cursor: pointer; background-color: rgba(58, 137, 203, 0.8); /*a8a8a8*/}
.dot-selected { cursor: pointer; background-color: white; /* fed829*/}
.saveissuecontainer { padding: 20px; color: white; font-weight: 300; font-size: 15px;}
.saveissuecontainer a:link { text-decoration: none; color: #fb580b; font-weight: 400;}
.saveissuecontainer a:visited { text-decoration: none; color: #fb580b; font-weight: 400;}
.saveissuecontainer a:hover { text-decoration: none; color: #fea378; font-weight: 400;}
#contentPanel ul { overflow: auto; height: calc(100vh - 150px); scrollbar-color: #8f8f8f #515151;}
#contentPanel::-webkit-scrollbar-track-piece { background-color: #C2D2E4;}
#contentPanel::-webkit-scrollbar-thumb:vertical { background-color: #0A4C95;}
#contentPanel img { height: 117px;}
#content li > p { padding: 10px; width: calc(100% - 9vw); position: absolute; right: 0px; font-size: 10pt}
#content li:after { margin-top: 0px; content: attr(pagenumber); right: 15px; bottom: 0; position: absolute; z-index: -1; font-size: 22px; top: 10px; font-family: 'Bebas Neue', sans-serif; color: white; opacity: 0.8; font-weight: 400;}
#content li { display: block; font-size: 11px; position: relative; border-bottom: 1px solid #afafaf; /*padding: 15px 15px 20px 15px;*/ margin: 5px; /* padding-left: 50px;*/ cursor: pointer; -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; font-weight: 300; overflow: hidden;}
#bookmark_list ul { overflow: auto; height: calc(100vh - 150px); scrollbar-color: #8f8f8f #515151;}
#bookmark_list::-webkit-scrollbar-track-piece { background-color: #C2D2E4;}
#bookmark_list::-webkit-scrollbar-thumb:vertical { background-color: #0A4C95;}
#bookmark_list img { height: 117px;}
#bookmark_list li > p { padding: 10px; width: calc(100% - 9vw); position: absolute; right: 0px; font-size: 10pt;}
#bookmark_list li:after { margin-top: 15px; content: attr(pagenumber); right: 15px; bottom: 0; position: absolute; z-index: -1; font-size: 35px; font-family: 'Inter'; color: white; opacity: 0.8; font-weight: 700;}
#bookmark_list li { display: block; font-size: 14px; position: relative; border-bottom: 1px solid #afafaf; /*padding: 15px 15px 20px 15px;*/ margin: 5px; /* padding-left: 50px;*/ cursor: pointer; -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; font-weight: 300; overflow: hidden;}
#bookmark_list li > div { display: inline-block; padding: 10px; }
#bookmark_list li > div > div { display: inline-block; position: absolute; margin: 0px 45px 0px 20px; }
.bookmakNotes_image_container { width: 100%; display: block; height: 170px;}
.bookmarkimg { background-repeat: no-repeat; float: left; width: 120px; height: 160px; background-size: cover;}
.zoomButton { width: 40px; height: 40px; border-radius: 5px; border: 0px; background-color: rgba(0,0,0,0.8); float: left;}
.zoomButton:hover { background-color: rgba(0,0,0,1);}
.zoomButton span { width: 70%; height: 70%; color: white;}
.zoomButton span:before { margin: 0; padding: 0; outline: 0; box-sizing: border-box !important}
.zoomButton span:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 2px; height: 2px; border-width: 0;}
#zoomInButton span:before { height: 100%; color: white;}
#menu[style*="display: none"] + #zoomContainer .zoomItem { }
.menu_open { right: 0px;}
#menu_button { position: fixed; border-bottom: 1px solid #515151; cursor: pointer; height: 40px; font-family: 'Inter'; color: #CDCDCD; font-weight: 300; top: 0; right: 0; width: 60px; height: 60px; background-color: #202d3c; box-shadow: -2px 0px 5px rgba(0,0,0,0.5); color: #333; -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s;}
#menu_button:before { content: "\f394"; background-color: #252525;}
#content li > div { display: inline-block; padding: 10px;}
#content li > div > div { display: inline-block; position: absolute; margin: 0px 45px 0px 20px;}
.pulse { -webkit-animation: pulse 1s ease-out; -webkit-animation-iteration-count: 3;}
@-webkit-keyframes pulse {
0% { opacity: 0; }
50% { opacity: .5; }
100% { opacity: 0; }
}
.error { color: red; margin-bottom: 15px; padding-left: 20px; display: block; font-weight: 300; font-size: 15px;}
.registration_container { position: absolute; font-family: 'Inter'; width: 40%; right: 30%; top: 35%; background-color: rgba(0, 0, 0, 0.8); margin: auto auto; z-index: 100; -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.share_container { position: absolute; font-family: 'Inter'; width: 40%; right: 30%; top: 35%; background-color: rgba(0, 0, 0, 0.8); margin: auto auto; z-index: 100; -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.appdownloadcontainer { width: calc(100% - 50px); margin-left: 25px; margin-top: 20px; text-align: center;}
.rtextboxlarge { font-family: 'Inter'; border-color: rgb(204, 204, 204); border-style: solid; padding: 4px; font-size: 14px; border-width: 1px; border-radius: 3px; height: 35px; width: 250px; margin-bottom: 10px;}
.videoButton { background: transparent url(//mcgeneral.azureedge.net/html5reader/v3.0/content/video.png) no-repeat center center; /*z-index:5*/}
.firstpageleftmenu { width: 30%; left: 10%; height: 500px; top: 50%; margin-top: -250px; position: absolute;}
.lastpagerightmenu { width: 30%; right: 10%; height: 500px; top: 50%; margin-top: -250px; position: absolute;}
.stmenucontainer { border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border: 1px solid #a1a1a1; background-color: white; padding: 10px; font-family: 'Inter';}
.desktop_controls { background: #f0f0f0; color: #fff; padding: 5px; position: fixed; left: 0; right: 0; bottom: 0;}
.pagePickerContainer { bottom: 45px}
.productholder { margin-right: 1.25%; background-color: #f7f7f7; float: left; margin-bottom: 15px; box-sizing: border-box; cursor: pointer; margin-top: 3px; padding: 10px; position: relative; cursor: default;}
.ribbon-wrapper-lightblue { width: 100px; height: 103px; overflow: hidden; position: absolute; top: -5px; right: -3px; z-index: 1; pointer-events: none;}
.ribbon-lightblue { font-size: 12px; font-weight: 700; color: white; text-align: center; text-shadow: rgba(0,0,0,1) 0px 1px 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); display: block; -o-transform: rotate(45deg); position: relative; padding: 5px 0; left: -8px; top: 22px; width: 140px; background-color: #41aed6; background: -moz-linear-gradient(bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.35) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to top, rgba(0,0,0,0.35) 0%,rgba(0,0,0,0) 100%); color: white; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px rgba(0,0,0,0.3); line-height: 12px;}
.ribbon-lightblue:before { left: 0; }
.ribbon-lightblue:before, .ribbon-lightblue:after { content: ""; border-top: 3px solid #6e8900; border-left: 3px solid transparent; border-right: 3px solid transparent; position: absolute; bottom: -3px; }
.ppcproductoverflow { width: 100%; padding-bottom: 130%; margin-bottom: 5px; position: relative;}
.view { overflow: hidden; /*position: absolute;*/ text-align: center; -webkit-box-shadow: 1px 1px 2px #e6e6e6; -moz-box-shadow: 1px 1px 2px #e6e6e6; box-shadow: 1px 1px 2px #e6e6e6; top: 0; bottom: 0; left: 0; right: 0;}
.productholder a { text-decoration: none; color: #4b4b4b;}
.view img { /*display: block; position: relative;*/}
.upsell_container p { padding: 0px 0px 20px; font-size: 18px;}
.upsell_container { position: absolute; top: calc(50% - 300px); margin-left: calc(75% - 250px); border: 1px solid #202d3c; padding: 20px; border-radius: 20px; width: 500px; background: white;}
.upsell_container.front { /*margin-left: calc(100% - 85%); 25% - 300px);*/ margin-left: calc(30% - 300px); }
.upsellbuttons { vertical-align: top; width: 200px;}
.buttonheader { font-weight: 700; margin-bottom: 10px; text-align: center}
.upsellitemtxt { margin-top: 10px; font-size: 12px; text-align: center}
.upsellbutton { background-color: #fd510f; -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0; border-top-left-radius: 0; -webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0; border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0; -webkit-appearance: none; border: none; text-indent: 0; display: inline-block; color: #fff; font-family: 'Inter',sans-serif; font-size: 14px; font-weight: 700; height: 40px; line-height: 38px; width: 100%; text-decoration: none; text-align: center; cursor: pointer; border-radius: 6px}
#sample { border: 1px solid #202d3c; padding: 20px; border-radius: 20px; width: 500px; background: white;}
.sample_container { position: absolute; font-family: 'Inter'; top: 25%; width: 300px; margin-left: calc(50% - 150px); z-index: 100; }
.freeissuebtnholder { width: 150px;}
#page_footer { display: none;}
#upsellcontainer { padding-left: 20px; padding-right: 20px;}
.usFrontPage { margin-left: 0px}
.spacer { height: 8px;}
.fa-stackoverride { position: absolute; height: unset; width: 52px; margin: -1px 10px; cursor: pointer; background-position: -50px -810px; background-size: 453%; height: 44px; width: 42px;}
.fa-link::before { margin-left: 0px;}
.sharebtnholder { width: 95%; margin-top: 10px; margin-bottom: 20px; text-align: center;}
.social-override { width: 62px; padding-top: 14px !important;}
.offinescrollpanel { position: absolute;}
.upsellcoverholder{width:100px; float:left;}
.upselltxtholder{width:calc(100% - 115px); float:right;}
@media screen and (max-width:850px) {
#articleWrapper, .articleContainer { margin-top: 0px; box-sizing: border-box; -webkit-border-radius: 10px 10px 0px 0px; -moz-border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px; border-color:#606062;}
.panelblock { margin-top: 0px; box-sizing: border-box; border-color:#606062;}
.articleContainer { width: 100%; height: calc(100% - 60px); z-index: 9999; }
.articlelisttxt { font-size: 12px; }
#article_view{border-radius:5px;}
.page_navigation { z-index: 99999; display: none !important; position: absolute; top: 0; bottom: 0; overflow: hidden; height: 100px; width: 60px; margin: auto; background-color: rgba(0, 0, 0, 0.8); border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border: 0px solid #000000;}
.registration_container { position: absolute; width: 80%; right: 5%; top: 25%; background-color: rgba(0, 0, 0, 0.8); margin: auto auto; z-index: 100; padding: 1%; -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.help_container { position: absolute; font-family: 'Inter'; width: 90%; left: 5%; top: calc(50% - 155px); z-index: 100; padding: 0%; -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.helptxtcontainer { color: #333; width: calc(100% - 20px); margin: 0px; padding: 20px; font-size: 13px;}
.share_container { position: absolute; font-family: 'Inter'; width: 90%; right: 5%; top: 25%; margin: auto auto; z-index: 100; padding: 1%; -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.freeissuebtnholder { width: 130px;}
#foot_navigation, #right_navigation, #left_navigation { display: none;}
.social-networks.open-menu, .no-js .social-networks { right: -8px; top: -42px; height: 50px;}
.overlay, .overlayPreview { right: 0px;}
#foot_navigation, #right_navigation, #left_navigation { display: none !important;}
.sample_container { right: 5%; top: 15%; width: 90%;}
#sample { width: 100%;}
#upsellcontainer { padding-left: 0px; padding-right: 0px}
#fullscreen { display: none !important;}
#reviewContainer, #surveyContainer { height: 97%; position: initial; width: 96%; margin-left: 2%; margin-top: 10px; display: none; top: calc(50% - 300px); background: white; overflow: hidden; border: 1px solid #ddd; border-radius: 5px; left: calc(25% - 225px); -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);}
.reviewheader { background-color: white; padding: 20px 20px 0px 20px;}
.reviewimg { width: 150px; margin-left: calc(50% - 75px); text-align: center}
.reviewtxt { padding: 15px; font-size: 12px; text-align: center;}
.thankstxt { padding: 15px; font-size: 12px; text-align: center;}
.reviewbodytxt { background-color: #f7f7f7; padding: 0px 20px 20px 20px; text-align: center; font-size: 14px; font-weight: bold;}
.ratingbtn { display: inline; text-align: center; white-space: nowrap; touch-action: manipulation; padding: 8px 15px; margin-bottom: 10px; box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); background-color: white; transition: all 0.3s ease 0s; border: 0px solid #ddd; margin-right: 5px; border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; font-weight: 700; font-size: 16px; color: #919191; font-family: 'Inter'; cursor: pointer; overflow: hidden;}
.ratingbtn:disabled:hover:not(.ratingSeleted) { background-color: white; color: #919191; border: 0px solid #ddd; box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);}
.commentstxt { width: 100%; margin-top: 0px; margin-bottom: 15px; height: 90px; font-family: 'Inter'; padding: 10px; box-sizing: border-box; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: none;}
.reviewcancelbtn { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-family: 'Inter'; font-weight: 700; color: #333; font-size: 14px; background: #f7f7f7; border: 1px solid #b6b6b6; width: 100px; height: 30px; line-height: 30px; text-decoration: none; cursor: pointer; margin-left: 10px; margin-right: 10px; float: right;}
.reviewsendbtn { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-family: 'Inter'; font-weight: 700; color: white; font-size: 14px; background: #e10f0c; border: 1px solid #e10f0c; width: 100px; height: 30px; line-height: 30px; text-decoration: none; cursor: pointer; margin-left: 10px; float: right;}
.ratingbtnlowertxtholder { width: 250px; margin-top: 8px; margin-left: calc(50% - 125px); font-size: 12px; font-weight: 400; color: #919191;}
.ratingbtnlowertxt1 { float: left;}
.ratingbtnlowertxt2 { float: right;}
#articlePanel, #articles, #content { right: 0; left: 0}
#lastReadContainer { width: 90%; right: 5%; max-height: 230px; margin-right: unset;}
#appDownloadPanel { width: 90%; right: 5%; max-height: 260px;}
#articlePanel:not(.open) > #articleWrapper { width: 100%;}
#overviewPanel, #audioPanel, #printPanel, #contentPanel, #bookmarkPanel, #notesPanel, #searchPanel, #sharePanel, #helpPanel, #articlePanel {
left: 20px; right: 20px; width: calc(100% - 40px);}
#articlePanel { background-color:#606062; right: 0px; left:0px; width:100%; top:0px; bottom: 30px; width: auto; border-radius: 0px;}
#articlePanel.open { width: 100%;}
#articleWrapper { width: 98%;}
#articles { width: 100%; height: calc(100% - 50px); transition: top 0.8s ease-in-out; background-color: white; z-index: 3; padding: 0px 10px 50px 10px; box-sizing: border-box; }
#bookmarkPanel { width: 300px;}
.issueThumbs { grid-template-columns: repeat(auto-fill, minmax(20%, 1fr)); gap: 20px; padding: 0px 20px 0px 5px; max-height: calc(100vh - 185px);}
.issueThumbs .group { width: 100%;}
.issueThumbs .thumb { width: 100%;}
.group > .thumb:nth-child(2n+1) > img { border-radius: 8px;}
#helpPanel { max-height: 400px;}
#searchQuery { font-size: 17px;}
.zoomnav { display: block}
#offlinePanel { position: relative; width: calc(100% - 40px); margin-left: 20px; margin-right: 20px;}
.libraryquota { float: left; padding: 0px;}
.loadingScreen {}
.loadingScreen span.small { font-size: 15px;}
.loadingScreen span { font-size: 18px;}
.zoomnavholder { position: fixed; z-index: 999999; right: calc(50% - 137px); padding: 0px; opacity: 1; bottom: 0px; width: 275px; background-color: white; border-radius: 10px 10px 0px 0px; -moz-border-radius: 10px 10px 0px 0px; -webkit-border-radius: 10px 10px 0px 0px; box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.3);}
.zoomnavholder .mobileInfo { display: block}
#zoomMenu { display: flex; margin-left: auto; margin-right: auto;}
ul#zoomMenu > li > span.menufonts { display: none;}
#zoomMenu li { margin-bottom: 0px;}
.zoomItem { width: 60px;}
.mobpagetxtbtn { width: calc(100% - 310px); text-align: center;}
.currentPage { width: 75px; display: inline-block; white-space: initial;}
.mobpagetxtbtn { width: 75px;}
#page_footer { display: block; line-height: 40px; margin-left: 0px; margin-right: 0px;}
.epub:hover { background-color: rgba(58, 137, 203, 0.8); opacity: 0.34; cursor: pointer; border: 1px solid rgba(58, 137, 203,1);}
.page_navigation { display: none; position: absolute; top: auto; bottom: 0; overflow: hidden; height: 60px; margin: auto; z-index: 10;}
#contentPanel img { height: 87px;}
#menu.open { width: 200px; left: 0px; right: 0px;}
.f14, .f24 { left: 40px; margin-top: 0;}
#menuContent li { border-bottom: 0px; background-color:white; padding: 0px; margin: 0px; }
/*#menuContent { height: 40px;} */
#menu { bottom: auto; background-color: transparent; z-index: 999; box-shadow: 0px 0px 0px transparent;}
.menufonts { height: 40px; width: 100%; background-color: white; text-indent: 15px; line-height: 40px; }
#menuContent li:not(:nth-child(1))::before { content: ''; background-color: transparent; background-image: none;}
.menuItem:hover { background-color: transparent; color: transparent;}
.upsell_container p { padding: 0px 0px 15px; font-size: 14px;}
.upsell_container { position: absolute; top: 0px; margin-left: 0px; border: 1px solid black; /*none;*/ padding: 15px; border-radius: 20px; width: 100%; background: white; bottom: 0px; height: 100%; margin-left: 0px !important}
.upsellimageholder { width: 170px; padding-right: 10px;}
.upsellimage { width: 100%;}
.upsellbuttons { vertical-align: top; width: 200px;}
.buttonheader { font-weight: 700; margin-bottom: 10px; text-align: center;}
.upsellitemtxt { margin-top: 10px; font-size: 12px; text-align: center;}
.upsellbutton { background-color: #fd510f; -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0; border-top-left-radius: 0; -webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0; border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0; -webkit-appearance: none; border: none; text-indent: 0; display: inline-block; color: #fff; font-family: 'Inter',sans-serif; font-size: 14px; font-weight: 700; height: 40px; line-height: 38px; width: 100%; text-decoration: none; text-align: center; cursor: pointer; border-radius: 6px}
.productholder { margin-right: 1.25%; background-color: #f7f7f7; float: left; margin-bottom: 15px; box-sizing: border-box; cursor: pointer; margin-top: 3px; padding: 10px; position: relative; cursor: default;}
.sbtnContainer { position: absolute; top: 8px; right: 35px; display: none;}
/* OFFSET NAVIGATION */
#menu:not(.open) > #menuContent > li:not(:first-child) { position: relative; border: 1px solid black; right: -300px;}
#scrollView { display: none;}
.dt_article_btn_left, .dt_article_btn_right { display: none;}
.articlecontrols { width: 100%; background-color: white; position: absolute; bottom: 0; height: 45px; font-size: 12px; font-weight: 600; display: block; -webkit-box-shadow: 2px -2px 5px 0px rgba(0,0,0,0.17); -moz-box-shadow: 2px -2px 5px 0px rgba(0,0,0,0.17); box-shadow: 2px -2px 5px 0px rgba(0,0,0,0.17);}
ul.dropdown { position: absolute; width: 100%; height: 100%; top: 0; overflow: hidden; transition: all 1s; margin-top: 0px; min-width: 12em; padding: 0; border-radius: 0 0 .2em .2em;}
ul.dropdown li { list-style-type: none;}
ul.dropdown a { text-decoration: none; padding: .5em 1em; display: block;}
ul.dropdown.close { top: 100%; height: 0;}
ul.dropdown.close { top: 100%; height: 0;}
ul.dropdown { position: absolute; width: 100%; height: 100%; top: 80px; overflow: hidden; transition: all 1s; margin-top: 0px; min-width: 12em; padding: 0; border-radius: 0 0 .2em .2em;}
ul.dropdown li { list-style-type: none;}
ul.dropdown a { text-decoration: none; padding: .5em 1em; display: block;}
.web{display:none;}
#articleTopHeader { padding: 10px; height: 40px; background-color: #606062;}
.articlelist { color: #333; float:left; text-decoration: none; display: inline-block; font-family: 'Inter'; margin-left: 20px; margin-top: 9px; font-weight: 400; width:calc(50% - 65px)}
#btnCloseArticle { text-decoration: none; margin-right:20px; float: right; display: block; font-size: 12px; color: #333; font-weight: 400; margin-top:15px; width:calc(50% - 65px)}
.articleprev, .articlenext { color: white; text-decoration: none; display: inline-block; margin-top: 8px; width:45px; text-align:center; float:left;}
.articlelistlabel{margin-top:6px;}
#articleTopHeader > .panelHeader { }
#articleTopHeader > .close::before {left: 10px; right:unset;}
.overlay { right: 0px;}
#nonBrowser { display: none; padding: 40px; margin: auto auto; height: auto; border-radius: 0px; width: 100%; box-sizing: border-box;}
.browser { float: left; width: 100%; height: 70px; margin-bottom: 20px; padding: 10px; box-sizing: border-box; text-align: left;}
.browser:hover { background-color: #efefef; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;}
.browserimg { float: left; width: 50px; margin-right: 10px;}
.browser-title { color: rgba(0,0,0,0.45); font-size: 14px; line-height: 17px; padding-left: 6px; display: table-cell; vertical-align: middle; height: 52px; text-align: left; text-decoration: none}
.articlecontrols .fas.fa-chevron-right:before{ height: 30px; background-position: 0px -530px; width: 40px; background-size: 400%; transform: rotate(270deg); filter:invert(0)}
.articlecontrols .fas.fa-chevron-left:before { height: 30px; background-position: 0px -530px; width: 40px; background-size: 400%; transform: rotate(90deg); filter:invert(0)}
.articlecontrols .fas.fa-bars:before { height: 30px; width: 30px; background-position: 0px 267px;}
.articlecontrols .fas.fa-page:before { height: 30px; width: 30px; background-position: -90px 171px;}
.mobresetbtn { position: absolute; left: 5px; }
.spacer { height: auto;}
.offlinestoragetxt1 { width: 100px; color: #d6d6d6; text-align: left; font-size: 14px;}
.offlinestoragetxt2 { width: 30px; color: #d6d6d6; text-align: right; font-size: 14px;}
.offlinesizing { margin-top: 20px; height: calc(100vh - 400px); position: relative;}
.quota-progress-container { width: 150px;}
.ppcproductholder { width: 45%; margin-right: 4%; float: left; margin-bottom: 15px; box-sizing: border-box; cursor: pointer; margin-top: 3px; position: relative; cursor: default;}
#cons { -webkit-overflow-scrolling: touch !important;}
#articlePanel:not(.open) > #articleWrapper { width: 100%;}
#articlePanel.open { width: 100%;}
#articleWrapper { width: 98%;}
.epub:hover { background-color: rgba(58, 137, 203, 0.8); opacity: 0.34; cursor: pointer; border: 1px solid rgba(58, 137, 203,1);}
.page_navigation { display: none; position: absolute; top: auto; bottom: 0; overflow: hidden; height: 60px; margin: auto; z-index: 10;}
#article_view { width: 100%; overflow-y: hidden;}
#foot_navigation, #left_navigation, #right_navigation { display: none; height: 0; overflow: visible}
#contentPanel img { height: 27vw; float: left;}
#content li > div > div { margin: 0px 45px 10px 70px; display: block; position: static}
.f14, .f24 { left: 40px; margin-top: 0;}
#menu { bottom: auto; background-color: transparent; box-shadow: 0px 0px 0px transparent}
#menuContent li { padding: 0px; margin: 0px;}
.menufonts { height: 40px; width: 100%;}
.menuItem:hover { background-color: transparent; color: transparent;}
}
@media screen and (min-width:550px) and (max-width:850px) {
.issueThumbs { grid-template-columns: repeat(auto-fill, minmax(20%, 1fr)); gap: 20px; padding: 0px 20px 0px 5px; height: calc(100vh - 185px); }
.issueThumbs .group { width: 100%;}
.issueThumbs .thumb { width: 100%;}
.group > .thumb:nth-child(2n+1) > img { border-radius: 8px;}
#article1{background-color:white;}
.web{display:none;}
.sbtnContainer { left: 10px}
.registration_container { position: absolute; width: 90%; right: 5%; top: 17%; background-color: rgba(0, 0, 0, 0.8); margin: 5%; z-index: 100; padding: 1%; -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.help_container { position: absolute; width: 500px; margin-left:calc(50% - 250px); left:0px; margin-right:auto; top: 25%; z-index: 100; }
.share_container { position: absolute; font-family: 'Inter'; width: 90%; right: 5%; top: 25%; background-color: rgba(0, 0, 0, 0.8); margin: auto auto; z-index: 100; padding: 1%; -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.freeissuebtnholder { width: 130px;}
.helptxtcontainer { font-size: 13px;}
#lastReadContainer,#appDownloadPanel { width: 70%; right: 15%; max-height: 210px;}
#foot_navigation, #right_navigation, #left_navigation { display: none !important;}
#articlePanel, #articles, #content { right: 0px; left: 0px }
#articlePanel:not(.open) > #articleWrapper { width: 100%;}
#articlePanel { left: 0px; right: 0px; top: 0; bottom: 45px; width: auto; border-radius: 0px;}
.zoomnav { display: block}
#articlePanel.open { width: 100%;}
#articleWrapper { width: 98%;}
.epub:hover { background-color: rgba(58, 137, 203, 0.8); opacity: 0.34; cursor: pointer; border: 1px solid rgba(58, 137, 203,1);}
.page_navigation { display: none; position: absolute; top: auto; bottom: 0; overflow: hidden; height: 60px; margin: auto; z-index: 10;}
#article_view { overflow-y: hidden}
#contentPanel img { height: 87px;}
.f14, .f24 { left: 40px; margin-top: 0;}
#menuContent li { border-bottom: 0px;}
#menu { bottom: auto; background-color: transparent; box-shadow: 0px 0px 0px transparent;}
#menuContent li { padding: 0px; margin: 0px;}
.menufonts { height: 40px; width: 100%; background-color: white; text-indent: 15px; line-height: 40px; }
#menuContent li:not(:nth-child(1))::before { content: ''; background-color: transparent; background-image: none;}
.menuItem:hover { background-color: transparent; color: transparent;}
#upsell p { padding: 0px 0px 20px; font-size: 14px;}
#upsell { position: absolute; top: 0px; margin-left: 0px; border: 1px solid #202d3c; padding: 20px; border-radius: 20px; width: 100%; background: white; bottom: 0px; height: 100%;}
#upsell.sample { margin-left: 0px;}
.upsellimageholder { width: 170px; padding-right: 10px;}
.upsellimage { width: 100%;}
.upsellbuttons { vertical-align: top; width: 200px;}
.buttonheader { font-weight: 700; margin-bottom: 10px; text-align: center; font-size: 12px;}
.upsellitemtxt { margin-top: 10px;}
.upsellbutton { background-color: #fd510f; -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0; border-top-left-radius: 0; -webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0; border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0; -webkit-appearance: none; border: none; text-indent: 0; display: inline-block; color: #fff; font-family: 'Inter',sans-serif; font-size: 14px; font-weight: 700; height: 40px; line-height: 38px; width: 100%; text-decoration: none; text-align: center; cursor: pointer; border-radius: 6px;}
.productholder { margin-right: 1.25%; background-color: #f7f7f7; float: left; margin-bottom: 15px; box-sizing: border-box; cursor: pointer; margin-top: 3px; padding: 10px; position: relative; cursor: default;}
/* OFFSET NAVIGATION */
#menu:not(.open) > #menuContent > li:not(:first-child) { position: relative; border: 0px solid black; right: -300px;}
#articleTopHeader > .panelHeader { }
#articleTopHeader > .close::before {left: 10px; right:unset;}
.overlay { right: 0px;}
#nonBrowser { display: none; padding: 40px; margin: auto auto; height: auto; border-radius: 0px; width: 100%; box-sizing: border-box;}
#RestrictedAccess { display: none; padding: 40px; margin: auto auto; height: auto; border-radius: 0px; width: 100%; box-sizing: border-box;}
.browser { float: left; width: 100%; height: 70px; margin-bottom: 20px; padding: 10px; box-sizing: border-box; text-align: left;}
.browser:hover { background-color: #efefef; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;}
.browserimg { float: left; width: 50px; margin-right: 10px;}
.browser-title { color: rgba(0,0,0,0.45); font-size: 14px; line-height: 17px; padding-left: 6px; display: table-cell; vertical-align: middle; height: 52px; text-align: left; text-decoration: none}
}
/************************************************************************************************************************/
/* ADDING DEFAULT PICKER ELEMENT CLASSES */
/************************************************************************************************************************/
.flipGallery { position: absolute; z-index: 4; transform-style: preserve-3d; transition: all 0.7s linear}
/************************************************************************************************************************/
.recommendationOptions { display: inline-block}
.searchWords { position: absolute; background-color: orange; opacity: 0.3; border-radius: 5px; margin-left: -2px; margin-right: 2px; padding-left: 4px;}
@media screen and (max-width:549px) {
.issueThumbs { grid-template-columns: repeat(auto-fill, minmax(45%, 1fr)); gap: 20px; padding: 0px 20px 0px 5px; height: calc(100vh - 155px); }
.issueThumbs .group { width: 100%;}
.issueThumbs .thumb { width: 100%;}
.group > .thumb:nth-child(2n+1) > img { border-radius: 8px;}
#zoomMenu { display: flex; width: 100%;}
#zoomMenu li { margin-bottom:0px;}
.zoomItem { width: 40px;}
.mobpagetxtbtn{width:calc(100% - 200px); text-align:center;}
.ip5hide { display: none;}
#bookmarkPanel { width: 310px;}
#shareContainer { margin-left: 20px; right: calc(50% - 150px); top: calc(50% - 115px);}
#articlePanel.open { top: 0; }
}
.firstArticle { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px; width: 220px; padding: 40px; box-sizing: border-box; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 2px solid rgba(0, 0, 0, 0.9); background-color: rgba(0, 0, 0, 0.9); color: white; text-align: center; font-family: 'Inter';opacity: 0; z-index: 9999}
.firstArticle.animate_pulse { opacity: 0.34; cursor: pointer; border: 2px solid rgba(0, 0, 0, 0.9); animation-iteration-count: 2; -webkit-animation-iteration-count: 2; animation-name: animate_pulse; -webkit-animation-name: animate_pulse; animation-duration: 5s; background-color: rgba(0, 0, 0, 0.8);}
.firstArticleico { width: 60px; height: 60px; overflow: hidden; background-position: 355px -1695px; background-size: 200px; margin-left: calc(50% - 30px); margin-bottom: 10px;}
@keyframes animate_pulse {
0% { opacity: 0 }
15% { opacity: 1 }
85% { opacity: 1 }
100% { opacity: 0 }
}
.slidecontainer { width: 100%; /* Width of the outside container */}
/* The slider itself */
.speedSlider { -webkit-appearance: none; /* Override default CSS styles */ appearance: none; width: 100%; /* Full-width */ height: 25px; /* Specified height */ background: #d3d3d3; /* Grey background */ outline: none; /* Remove outline */ opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */ -webkit-transition: .2s; /* 0.2 seconds transition on hover */ transition: opacity .2s;}
/* Mouse-over effects */
.speedSlider:hover { opacity: 1; /* Fully shown on mouse-over */}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.speedSlider::-webkit-slider-thumb { -webkit-appearance: none; /* Override default look */ appearance: none; width: 25px; /* Set a specific slider handle width */ height: 25px; /* Slider handle height */ background: #4CAF50; /* Green background */ cursor: pointer; /* Cursor on hover */}
.speedSlider::-moz-range-thumb { width: 25px; /* Set a specific slider handle width */ height: 25px; /* Slider handle height */ background: #4CAF50; /* Green background */ cursor: pointer; /* Cursor on hover */}
.fa-2x { font-size: 1em;}
.zoomnavholder > .menufonts { display: block}
.interstitialWrapper { transition: all .5s ease-in-out; bottom: 0; height: 0;}
/*@media screen and (max-width:1050px) and (orientation: landscape) {
.portraitoriention, #menu, .page_navigation, #foot_navigation, .readpopup {display:none !important;}
.rotateimage { margin-top: calc(50vh - 100px) !important; }
}
*/
@media (-webkit-device-pixel-ratio: 1) {
.screenOnePP { image-rendering: pixelated; }
}
@media (-webkit-min-device-pixel-ratio: 1.1) {
.screenOnePP { image-rendering: -webkit-optimize-contrast; }
}
@media (prefers-color-scheme: dark) {
body{background-color: black;}
#menu { background-color: #333; }
#menuContent li {border-bottom: none; margin-bottom: 10px;}
#menuContent li::before, #zoomMenu li::before {background-color: #333; filter: invert(0);}
#menuContent li { color: white; font-family: 'Inter', sans-serif; font-weight: 400;}
#zoomMenu li { border-bottom: none; color: white; font-family: 'Inter', sans-serif;}
.menufonts { font-family: 'Inter', sans-serif; text-transform: none;}
.f14 { font-size: 13px; font-weight: 600;}
#foot_navigation {background-color: #333; color: white; font-family: 'Inter', sans-serif; box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.3); }
.footnavleft, .footnavright { filter: invert(0);}
.currentPage { color: white;}
.page_navigation {background-color: rgba(255, 255, 255, 0.5);}
.fa-chevron-right::before, .fa-angle-double-right::before, .fa-chevron-left::before, .fa-angle-double-left::before { filter: invert(.6);}
.overlay { background-color: rgba(0,0,0,0.8);}
.panel, .nonClick_panel { background-color: transparent;}
.issueThumbs .group { margin: 0px 25px 45px 5px; border-radius: 5px; overflow: hidden; width: 250px;}
.selected { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; transform: none; -webkit-transform: none; transition: none; -webkit-transition: none;}
.menuItem:hover { background-color: black; }
#overviewPanel .group:hover { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; transform: none; -webkit-transform: none; transition: none; -webkit-transition: none;}
.scroller{background-color: black;}
.zoomnavholder, .menufonts{background-color:#333;}
#menuContent li { background-color: #333; }
#menu.open { background-color: #333; }
}
@media screen and (max-width:850px) and (prefers-color-scheme: dark) {
#menu { background-color: transparent; }
#menu.open { background-color: #333; }
}