/****** FONT INTER *****/

/* inter-200 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  src: url('fonts/Inter/inter-v20-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-300 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/Inter/inter-v20-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-regular - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/Inter/inter-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/Inter/inter-v20-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/Inter/inter-v20-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/Inter/inter-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-800 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/Inter/inter-v20-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/****** DASHBOARD AND OTHER *********************/

* {
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box; }

html, body {			width: 100%; height: 100%; min-width: 320px; 
                        background-color: #777;
                        color :#1d1f21;
                        font-family: 'Inter', sans-serif;
                        font-size: 1.00em;
                        line-height: 1.40em; 
                        font-weight: 300; }

a, 
a:focus, 
a:active {			    text-decoration: none; color: #197dc8; font-weight: 500; }
a:hover {           	color: #ed4a5b; }

a.yellow, 
a.yellow:focus, 
a.yellow:active {       text-decoration: none; color: #f8e582; font-weight: 500; }
a.yellow:hover {       	color: #ed4a5b; }

h1 {                    font-size: 1.80em; font-weight: 800; }
h2 {                    font-size: 1.40em; font-weight: 800; }

.txtFlip1 {             display: inline-block; }
.txtFlip2 {             display: none; }

.mobCenter {            text-align: left; border: 2px solid #ccc; border-radius: 15px; padding: 20px 30px; 
                        background-color: #bcbcbc;}

.flexSpace {            width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; }


.pHeaderBox {           display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; 
                        width: 100%; max-width: 1600px; min-height: 80px; padding: 30px 50px; margin: 0 auto; background-color: #fff; 
                        border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }

.pHeaderBox .logo {     width: 400px; }
.pHeaderBox .logout {   position: absolute; width: 36px; right: 0; top: 22px; opacity: 0.60; }
.pHeaderBox .logout:hover { cursor: pointer; transform:scale(95%); }
.pHeaderBox .hdCnt1 {   width: calc(100% - 80px); }
.pHeaderBox .hdCnt2 {   width: 80px; position: relative; }

.pContentBox {          display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; position: relative; 
                        width: 100%; max-width: 1450px; padding: 20px 50px; margin: 20px auto; }
.pContentBox .pCnt1 {   width: calc(100% - 350px); }
.pContentBox .pCnt2 {   width: 300px; margin-top: 0px; }
.pCnt2 .cnt2Box {       background-color: #fff; border: 2px solid #ccc; border-radius: 15px; padding: 30px 40px; 
                        font-size: 0.85em; font-weight: 400; line-height: 2.00em; margin-bottom: 20px; }

.pEbookCntBox {         width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; 
                        position: relative; background-color: #fff; border-radius: 15px; padding: 30px 30px; margin-top: 30px; }

.pEbookCntBox .lights { position: absolute; width: 25px; left: -45px; top: 0px; }
.pEbookCntBox .ebCnt  { width: 30%; position: relative; min-height: 238px; }
.pEbookCntBox .ebCntW { width: 65%; position: relative; min-height: 238px; }
.ebCntDateText {        font-size: 0.80em; line-height: 1.20em; font-weight: 400; text-align: left; }
.ebCntEbTitle {         font-size: 1.40em; font-weight: 700; }
.ebCntBtnBox {          width: 100%; position: absolute; bottom: 0; }

a.ebookBtn, 
a.ebookBtn:focus, 
a.ebookBtn:active {	    width: 100%; max-width: 500px; padding: 12px 10px; 
                        text-align: center; text-decoration: none; color: #fff; font-size: 0.90em; line-height: 1.20em; font-weight: 500; display: block; margin-top: 3px; }
a.ebookBtn:hover {      color: #1d1f21; }

.ebookNoBtn {           width: 100%; max-width: 500px; padding: 12px 10px; 
                        text-align: center; text-decoration: none; color: #fff; font-size: 0.90em; line-height: 1.20em; font-weight: 500; display: block; margin-top: 3px; background-color: #777; opacity: 0.3; }




/****** EBOOK 2.0 *******************************/

.progress {             height: 10px; width: 200px; background: linear-gradient(#a88fbf 0 0), linear-gradient(#a88fbf 0 0), #1d1f21;
                        background-size: 60% 100%; background-repeat: no-repeat; animation: progress-7x9cg2 3s infinite; }

.svgContent {           display: none; width: 100%; max-width: 850px; margin: 0 auto; background-color: #777; 
                        padding-bottom: 48px; user-select: none; }

@keyframes progress-7x9cg2 {
                        0% { background-position: -150% 0,-150% 0; }
                        66% { background-position: 250% 0,-150% 0; }
                        100% { background-position: 250% 0, 250% 0; } }


.pNavBtnN,
.pNavBtnB {             position: fixed;  
                        width: 80px; height: 80px; line-height: 76px; font-size: 2.00em;
                        background-color: #1d1f21; color: #efefef;
                        user-select: none; }


.pNavBtnN {             right: 0; top: calc(50vh - 90px); }
.pNavBtnB {             left: 0; top: calc(50vh - 90px); }
                        /* pNavBtn::hover s.u. */

.iconMobDiv,
.iconMobDivDemo {       display: none; background-color: #777; position: fixed; width: 185px; height: 47px; 
                        right: 0; border-bottom-left-radius: 10px; }
.iconMobDivDemo {       width: 150px; }

.mobDivLogo {           display: none; position: fixed; left: 0; z-index: 100000; width: 70px; margin: 11px 0 0 10px; }

.hhIcon {               position: fixed; left: 0; width: 42px; height: 42px; margin: 15px; user-select: none; }
.hhIcon:hover,
.hhIconDemo {           position: fixed; left: 0; width: 42px; height: 42px; margin: 15px; user-select: none; }
.hhIconDemo:hover {     cursor: pointer; width: 40px; height: 40px; margin: 16px; }

.hhIconX {              float: right; width: 36px; height: 36px; margin: 0px; }
.hhIconX:hover {        cursor: pointer; width: 34px; height: 34px; margin: 1px; }

.homeIcon {             position: fixed; right: 6px; width: 42px; height: 42px; margin: 15px; user-select: none; }
.homeIcon:hover,
.homeIconDemo {         position: fixed; right: 6px; width: 42px; height: 42px; margin: 15px; user-select: none; }
.homeIconDemo:hover {   cursor: pointer; width: 40px; height: 40px; margin: 16px; }

.zoomIcon {             position: fixed; left: -3px; top: 55px; width: 46px; height: 46px; margin: 15px; user-select: none; }
.zoomIcon:hover,
.zoomIconDemo {         position: fixed; left: -3px; top: 55px; width: 46px; height: 46px; margin: 15px; user-select: none; }
.zoomIconDemo:hover {   cursor: pointer; width: 44px; height: 44px; margin: 16px; }

.logoutIcon {           position: fixed; right: 3px; top: 55px; width: 46px; height: 46px; margin: 15px; user-select: none; }
.logoutIcon:hover,
.logoutIconDemo {       position: fixed; right: 3px; top: 55px; width: 46px; height: 46px; margin: 15px; user-select: none; }
.logoutIconDemo:hover { cursor: pointer; width: 44px; height: 44px; margin: 16px; }

.homeIconDemo {         display: none; }
.logoutIconDemo {       top: 0; }

.menuBox {              display: none; position: fixed; z-Index: 200000; width: 100%; height: 100vh; 
                        background-color: rgba(0,0,0,0.80); }
.menuBoxGoodbye {       display: none; position: fixed; z-Index: 200000; width: 100%; height: 100%; 
                        background-color: rgba(0,0,0,0.90); }

.menuBoxCnt {           width: 100%; max-width: 450px; height: 100vh; padding: 30px 25px; 
                        font-size: 15px; line-height: 21px; text-align: left; color: #1d1f21; 
                        background-color: #efefef; 
                        box-shadow: 10px 0px 5px 0px rgba(0,0,0,0.29);
                        -webkit-box-shadow: 10px 0px 5px 0px rgba(0,0,0,0.29);
                        -moz-box-shadow: 10px 0px 5px 0px rgba(0,0,0,0.29); 
                        user-select: none; }

.menuBoxCntList {       height: calc(100vh - 200px); position: relative; overflow-y: auto; border-top: 1px solid #efefef; }
.menuBoxCntList::-webkit-scrollbar { width: 5px;  /* Remove scrollbar space */ }
.menuBoxCntList::-webkit-scrollbar-thumb { background: #ddd; }


.menuBtnSection,
.menuBtnSectionA {      width: calc(100% - 10px); padding: 6px 10px 5px 10px; border-bottom: 1px solid #c3c3c3; 
                        display: flex; flex-wrap: wrap; justify-content: space-between;
                        font-size: 14px; font-weight: 600; }
.menuBtnTopic,
.menuBtnTopicA {        width: calc(100% - 10px); padding: 5px 10px 4px 18px; border-bottom: 1px solid #c3c3c3; 
                        display: flex; flex-wrap: wrap; justify-content: space-between;
                        font-size: 13px; font-weight: 400; }

.menuBtnSectionA,
.menuBtnTopicA {        background-color: #a78fc3; }

.menuBtnSection:hover,
.menuBtnTopic:hover,
.menuBtnSectionA:hover,
.menuBtnTopicA:hover {  cursor: pointer; background-color: #181818; color: #fff; }


.btmPageDisplay,
.btmPageDisplayDemo {   width: 70px; height: 35px; line-height: 54px; background-color: #000; border-radius: 5px; 
                        padding: 0; display: inline-block; border: none; outline: none;
                        color: #777; text-align: center; font-size: 1.20em; font-weight: bold;  }
.btmPageDisplay:hover { cursor: ns-resize; background-color: #a78fc4; color: #fff; }

.btmPageDisplayDemo:hover { cursor: default; }

input[type='number'] {  -moz-appearance:textfield; }                /* Removes spinner from input type number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; }

.btmFooter,
.btmFooterDB {          position: fixed; height: 55px; bottom: 0; 
                        display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; 
                        background-color: #1d1f21; font-size: 12px; color: #efefef; padding: 10px 20px 8px 20px; }

.btmDivL {              width: 20%; text-align: left; position: relative; user-select: none; }
.btmDivC {              width: 60%; text-align: center; }
.btmDivR {              width: 20%; text-align: right; padding: 10px 0 0 0; position: relative; user-select: none; }

.btmSub1,
.btmSub2,
.btmSub3 {              display: inline-block; }
.btmSubM {              display: none; }

.btmBtn,
.btmBtnM,
.btmBtnS,
.btmBtnPB {             width: 36px; height: 35px; line-height: 32px; background-color: #000; border-radius: 5px; 
                        color: #777; text-align: center; font-size: 1.40em; font-weight: 600; 
                        margin: 0px 2px; display: inline-block; }
                        /* btmBtn:hover s.u. */

.btmBtnM {              background-image: url('../i/nav-icon-hh-777.svg'); background-repeat: no-repeat; background-size: 40%; 
                        background-position: center center; }
.btmBtnM:hover {        background-image: url('../i/nav-icon-hh-white.svg'); }

.btmBtnS {              background-image: url('../i/nav-icon-zoom-777.svg'); background-repeat: no-repeat; background-size: 55%; 
                        background-position: center center; }
.btmBtnS:hover {        background-image: url('../i/nav-icon-zoom-white.svg'); }

.btmBtnPB {             background-image: url('../i/nav-icon-pBack-777.svg'); background-repeat: no-repeat; background-size: 55%; 
                        background-position: center center; }
                        /* btmBtnPB:hover s.u. */

.btmLogo {              position: absolute; max-width: 120px; top: -34px; border-radius: 5px; user-select: none; }
.btmCopyright {         position: absolute; font-size: 0.88em; top: 10px; left: 0px; color: #777; }

.btmZoomLevel {         position: absolute; right: 150px; top: 3px; width: 50px; text-align: center; color: #777; }
.btmZoomRange {         position: absolute; right: 0; width: 150px; }

.sInput {               width: 100%; height: 36px; border: 1px solid #e4e4e4; outline: none; background-color: #fff; border-radius: 5px; 
                        padding: 0 10px; background-image: url('../i/nav-icon-zoom-white.svg'); background-repeat: no-repeat; 
                        background-position: calc(100% - 5px) center; }

.sResultCntBox {       height: calc(100vh - 250px); overflow-y: auto; margin-top: -10px; }
.sResultCntBox::-webkit-scrollbar { width: 5px;  /* Remove scrollbar space */ }
.sResultCntBox::-webkit-scrollbar-thumb { background: #ddd; }

.sListBtn {             font-size: 1.00em; line-height: 1.10em; padding: 10px 15px 10px 12px; border-bottom: 1px solid #c3c3c3; }
.sListBtn:hover {       cursor: pointer; background-color: #a78fc4; color: #fff; }

.roundBtnBlue,
.roundBtnRed {          width: 100%; max-width: 240px; height: 50px; line-height: 50px;
                        background-color: #53b7e8; border-radius: 10px; margin: 0 auto;
                        text-align: center; font-size: 0.70em; font-weight: 500; }
.roundBtnRed {          background-color: #f15b66; }
                        /* roundBtns:hover s. u. */


/****** LANDING AND LOGIN *******************************/


.video-container {      position: relative; width: 100%; height: 100vh; overflow: hidden; background-color: #000; }

.bg-video {             position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
                        opacity: 0.20; }

.fg-content {           position: relative; z-index: 2; height: 100%; width: 100%; padding: 30px; 
                        display: flex; justify-content: center; align-items: center; color: #efefef; text-align: center; }

.landingFooter {        padding-bottom: 18px; font-size: 0.80em; font-weight: 300; line-height: 1.60em; color: #c3c3c3;                                 position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); text-align: center; }

/***** @FORM AND FIELDS **********************************/

.inputTextMW,
.inputTextareaMW {                  width: 100%; height: 50px; line-height: 50px; outline: none;
                                    background-color: #ffffff; border: 2px solid #e8e8e8; border-radius: 8px; 
                                    font-size: 1.00em; font-weight: 500; color: #000000; text-indent: 10px; 
                                    margin-bottom: 10px; }
.inputTextareaMW {                  line-height: 1.25em; text-indent: 0; padding: 10px; font-weight: 500; }

.inputTextMW::placeholder,
.inputTextareaMW::placeholder {     font-weight: 300; color: #999; font-size: 0.80em; }


/************************************************************************************************/
/***** @MEDIA QUERY *****************************************************************************/
/************************************************************************************************/


@media screen and (max-width: 1481px) {
    
    .pEbookCntBox .lights { left: -38px; }
}

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

    .btmLogo {          border: 1px solid rgba(29, 31, 33, 0.3); }
    #btmRights {        display: none; }
    
    .pContentBox .pCnt1 { width: calc(100% - 325px); }
}

@media screen and (max-width: 1005px) {
    
    .homeIcon {         transform: scale(62%); top: -14px; right: 37px; }
    .logoutIcon,
    .logoutIconDemo {   transform: scale(62%); top: -16px; right: -7px; }
    
    .hhIcon {           transform: scale(58%); top: -14px; left: calc(100% - 190px); }
    .hhIconDemo {       transform: scale(58%); top: -14px; left: calc(100% - 154px); }
    .zoomIcon {         transform: scale(62%); top: -16px; left: calc(100% - 152px); }
    .zoomIconDemo {     transform: scale(62%); top: -16px; left: calc(100% - 112px); }
    
    .iconMobDiv,
    .iconMobDivDemo {   display: block; }
    
    .pNavBtnN,
    .pNavBtnB {         width: 50px; height: 60px; line-height: 56px; font-size: 2.00em;
                        background-color: rgba(29, 31, 33, 0.05); color: #1d1f21; 
                        top: calc(50vh - 120px); }
                        /* pNavBtnN:hover s.u. */
    
    .btmCopyright {     display: none; }
    .btmLogo {          position: absolute; max-width: 80px; top: 3px; border-radius: 3px; }
    
    .pContentBox .pCnt1 { width: 100%; }
    .pContentBox .pCnt2 { width: 100%; margin-top: 20px; }
    
    .txtFlip1 {         display: none; }
    .txtFlip2 {         display: inline-block; }
    
}

@media screen and (max-width: 851px) {
    
    .btmZoomLevel,
    .btmZoomRange {     display: none; }
    
}

@media screen and (max-width: 851px) {
    
    .btmDivL,
    .btmDivR {          display: none; }
    .btmDivC {          width: 100%; }
}

@media screen and (max-width: 601px) {
    .pNavBtnN,
    .pNavBtnB {         display: none; }
}

@media screen and (max-width: 601px) {
 
    .pHeaderBox .logo {     width: 300px; }
    .pHeaderBox .logout {   top: 12px; }
    .mobCenter {            text-align: center; }
    .pEbookCntBox .ebCnt  { width: 100%; min-height: auto; }
    .pEbookCntBox .ebCntW { width: 100%; min-height: auto; }
    .ebCntDateText {        font-size: 0.90em; line-height: 1.40em; font-weight: 400; text-align: center; padding: 15px 0 10px 0; }
    .ebCntEbTitle {         font-size: 1.40em; font-weight: 700; }
    .ebCntBtnBox {          width: 100%; position: relative; }
    
    
}


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

    .btmFooter {        height: 120px;  }
    .btmDivC {          display: flex; flex-direction: row; justify-content: center; }
    
    .btmPageDisplay {   height: 44px; font-size: 1.40em; }
    
    .btmBtn,
    .btmBtnM,
    .btmBtnS,
    .btmBtnPB {         width: 48px; height: 40px; line-height: 36px; font-size: 1.80em; margin: 0; }
    
    .btmSub1 {          display: none; }
    .btmSub2 {          margin-top: 5px; }
    .btmSub3 {          display: none; }
    .btmSubM {          display: flex; justify-content: center; width: 100%; margin-top: 8px; }
    
    
    .pEbookCntBox .lights { display: none; }
    .pHeaderBox {       padding: 25px 30px 20px 30px; border-radius: 0px; }
    .pContentBox {      padding: 20px 20px; }

}

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

    .iconMobDiv {       width: 100%; border-radius: 0; }
    .mobDivLogo {       display: block; }
    .svgContent {       margin: 0 auto 0 auto; padding-top: 48px; padding-bottom: 0; }
    
    .pHeaderBox .logo { width: 300px; }
    .pHeaderBox {       padding: 25px 20px 15px 20px; }
    .pContentBox {      padding: 20px 10px; }

}

@media screen and (max-width: 401px) {
 
    .pHeaderBox .logo { width: 225px; }
    .pHeaderBox .logout { top: 6px; width: 31px; }
    .btmFooterDB { height: 65px; }
    
    .landingFooter {    display: none; }  
}

@media screen and (max-height: 701px) {
    
    .landingFooter {    display: none; }   
}


/************************************************************************************************/
/***** @MEDIA QUERY TOUCH DEVICES ***************************************************************/
/************************************************************************************************/

@media (hover: hover) {
    
    .pNavBtnN:hover,
    .pNavBtnB:hover {       cursor: pointer; background-color: #000; }
    
    .btmBtn:hover,
    .btmBtnM:hover, 
    .btmBtnS:hover,
    .btmBtnPB:hover {       cursor: pointer; background-color: #a78fc4; color: #fff; }
    .btmBtnPB:hover {       background-image: url('../i/nav-icon-pBack-white.svg'); }
    
    .roundBtnBlue:hover,
    .roundBtnRed:hover {    cursor: pointer; transform:scale(98%); }
    
    @media screen and (max-width: 1005px) {
        
    .pNavBtnN:hover,
    .pNavBtnB:hover {   background-color: rgba(29, 31, 33, 0.30); }
    
    }
    
}