/*-- ==================================-=================================== --*/
/*-- ==================================-=================================== --*/
/*-- ==================================-=================================== --*/
/*-- ==                G L O B A L   P A R A M E T E R S                 == --*/
/*-- ==================================-=================================== --*/
   :root {
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
                             --ex-width: 400px;
                            --ex-height: 640px;
                             --ex-depth: 64px;
/*-- ----------------------------------=----------------------------------- --*/
                             --in-width: 386px;
                            --in-height: 608px;
                             --in-depth: 62px;
/*-- ----------------------------------=----------------------------------- --*/
                              --mrg-top: 10px;
/*-- ----------------------------------=----------------------------------- --*/
//                              --x-fctor: 1.5;
/*-- ----------------------------------=----------------------------------- --*/
                           --book-xaxis: 0px;     // location default value
/*-- ----------------------------------=----------------------------------- --*/
   }
/*-- ==================================-=================================== --*/
/*-- ==================================-=================================== --*/
/*-- ==================================-=================================== --*/
/*-- ----------------------------------=----------------------------------- --*/
   p, p:before, p:after {
                                 margin: 0;
                                padding: 0;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- ==================================-=================================== --*/
/*-- ==                   M A I N   S T R U C T U R E                    == --*/
/*-- ==================================-=================================== --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  Main, Container - (immediate child) - Header                    -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .main, .container > header {
                                  color: #000000;
                                  width: 90%;
                              max-width: 1060px;
                                 margin: 0 auto;
                               position: relative;
                             background: #FFF;
                          border-radius: 10px;
                           padding-left: 50px;
                            padding-top: 70px;
                         padding-bottom: 55px;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  Main, Container - (immediate child) - Header                    -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .main {
                             background: url(../images/shelf.png)
                                         no-repeat
                                         center bottom,
                                         radial-gradient(orange 3%, white 65%)
                                         no-repeat
                                         center center;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  Container - (immediate child) - Header                          -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .container > header {
                                padding: 10px 20px 20px 20px;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  Container - (immediate child) - Header - H1                     -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .container > header h1 {
                                  width: 100%;
                              font-size: 34px;
                            line-height: 38px;
                                 margin: 0 auto;
                             text-align: center;
                            font-weight: 700;
                                  color: #333;
                                  float: left;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  Select all elements and style them in the same way              -- --*/
/*-- --         style elements (before) in the same way                  -- --*/
/*-- --         style elements (after ) in the same way                  -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   *, *:after, *:before {
                             box-sizing: border-box;
                                padding: 0;
                                 margin: 0;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  clearfix ( before ), clearfix (after)                           -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .clearfix:before, .clearfix:after {
                                content: " ";
                                display: table;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  clearfix (after)                                                -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .clearfix:after {
                                  clear: both;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  clearfix                                                        -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .clearfix {
                                  *zoom: 1;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/



/*-- ----------------------------------=----------------------------------- --*/
/*-- --  Shelf                                                           -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-shelf {
                             list-style: none;
                               position: relative;
                                  width: 317px;
                                 height: 430px;
                            padding-top: 7px;
                                 border: 10px solid brown;
   }
/*-- ==================================-=================================== --*/
/*-- ==================================-=================================== --*/
/*-- ==================================-=================================== --*/



/*-- ==================================-=================================== --*/
/*-- ==                        B O O K   L I S T                         == --*/
/*-- ==================================-=================================== --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List                                                            -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-list {
                             list-style: none;
                               position: relative;
                                    top: -30px;
                                   left: 5px;
                                  width: 533px;
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  width = (13 books * 40px) + (13 books * margin (1px)) 533       -- --*/
/*-- --  width = (11 books * 40px) + (11 books * margin (1px)) 451       -- --*/
/*-- --  width = ( 9 books * 40px) + ( 9 books * margin (1px)) 369       -- --*/
/*-- --  width = ( 7 books * 40px) + ( 7 books * margin (1px)) 287       -- --*/
/*-- ----------------------------------=----------------------------------- --*/
                                 margin: 0 auto;
                            perspective: 1800px;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List - Item                                                     -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-list li {
                               position: relative;
                                  width: 39px;
                                 height: 390px;
                                  float: left;
                           margin-right: 1px;
                                 border: 0px solid #FFFF00;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List - Item (last child)                                        -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   #lastBook {
                           margin-right: 4px;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  Book                                                            -- --*/
/*-- --  Function   : Constructed with Front facing user, then rotated   -- --*/
/*-- --             : to present the user with a view of the spine       -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-book {
                               position: absolute;
                                    top: 20px;
                                  width: 100%;
                                 height: var(--ex-height);
                        transform-style: preserve-3d;
                             transition: transform 1.0s;
                              transform: rotate3d(0,1,0,90deg);

                            perspective: null;

                         pointer-events: none;
                                z-index: 100;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/



/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List Item Book (hover)                                          -- --*/
/*-- --  Action    : Tilt book out of shelf                              -- --*/
/*-- --  RotateX   : Set to   0deg to eliminate any changes              -- --*/
/*-- --  RotateY   : Set to  90deg to hold book in current orientation   -- --*/
/*-- --  RotateZ   : Set to -15deg to tilt book forward from the top     -- --*/
/*-- --  Translate : slides the book out of the shelf                    -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-list li .bdmo:hover {
                              transform: rotateX(000deg)  
                                         rotateY(090deg)  
                                         rotateZ(-10deg)
                                         translate3d(0px,-120px,0px)
                                         scale3d(0.6, 0.6, 0.6);
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List Item Book Div, List Item Front (immediate child) Div       -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-book > div,
   .bk-front > div {
                                display: block;
                               position: absolute;
                         pointer-events: auto;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List Item Front                                                 -- --*/
/*-- --  Translate Front to required orientation                         -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-front {
                        transform-style: preserve-3d;
                       transform-origin: 0% 50%;
                             transition: transform 1.5s;
                              transform: translate3d(0,0,30px);
                         pointer-events: auto;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List Item Front (immediate child) Div                           -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-front > div {
                    backface-visibility: hidden;
                        transform-style: preserve-3d;
                         pointer-events: auto;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List Item Stack page                                            -- --*/
/*-- --  Translate Page to required orientation                          -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-stack {
                                display: none;

                                  width: var(--in-width);
                                 height: var(--in-height);

                                    top: 5px;

                                padding: 0px 20px 0px 25px;

                         pointer-events: none;
                                 cursor: none;
                                 border: 0.5px solid #B0B0B0;
                             background: #F0F0F0;

                              transform: translateX(    0px)
                                         translateY(   10px)
                                         translateZ(   29px);

                         pointer-events: auto;

//                    backface-visibility: hidden;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --   K E E P   P A G E             D E F I N I T I O N              -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-keep {
                               position: absolute;
                                    top: 9px;
                                   left: -360px;

                                  width: var(--in-width);
                                 height: var(--in-height);

                                padding: 0px 25px 0px 20px;

                                  color: #000000;

                                 cursor: pointer;
                                 border: 0.5px solid #B0B0B0;
                             background: #F0F0F0;

                              transform: translateX(  -26px)
                                         translateY(   5px)
                                         translateZ(  31px);

                             visibility: hidden;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- --   P A G E   M E C H A N I S M   C O N T A I N E R                -- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-page-mech {
                               position: relative;
                                    top: 10px;

                                  width: var(--in-width);
                                 height: var(--in-height);

                                 cursor: pointer;
                                 border: 0.5px solid #B0B0B0;

                        transform-style: preserve-3d;
                       transform-origin: 0% 0%;

                              transform: translateX(   1px)
                                         translateY(   5px)
                                         translateZ(  29px);

                         pointer-events: auto;

//                             visibility: hidden;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --   P A G E   M E C H A N I S M   P L A N E / F R A M E            -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-page-frme {
                               position: absolute;
                                  width: 100%;
                                 height: 100%;
                                padding: 10px;

                                 border: 0.5px solid #B0B0B0;

                    backface-visibility: hidden;
//                             visibility: hidden;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --   P A G E   P L A N E           F R O N T                        -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-page-frnt {
                                padding: 0px 19px 0px 24px;
                             background: #F0F0F0;
                                 cursor: pointer;
                                  color: black;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --   P A G E   P L A N E           B A C K                          -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-page-back {
                                padding: 0px 24px 0px 19px;
                             background: #F0F0F0;
                                 cursor: pointer;
                                  color: black;

                              transform: rotateY(180deg);

//                             visibility: hidden;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --      R I G H T   P A G E  -  P A G I N A T I O N   P A N E L     -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-frwd-page {
                               position: relative;
                                    top: 10px;

                                  width: var(--in-width);
                                 height: var(--in-height);

                                 cursor: pointer;
                                 border: 0px solid #F00;

                        transform-style: preserve-3d;

                              transform: translateX(   0px)
                                         translateY(   5px)
                                         translateZ(  30px);

                             visibility: hidden;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/



/*-- ----------------------------------=----------------------------------- --*/
/*-- --      L E F T   P A G E  -  P A G I N A T I O N   P A N E L       -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-bkwd-page {
                               position: relative;
                                    top: 10px;

                                   left: -360px;

                                  width: var(--in-width);
                                 height: var(--in-height);

                                 cursor: pointer;
                                 border: 0px solid #0F0;

                              transform: translateX(  -26px)
                                         translateY(   5px)
                                         translateZ(  32px);

                             visibility: hidden;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/



/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List Item Front,                                                -- --*/
/*-- --  List Item Front (immediate child) Div                           -- --*/
/*-- --  Define element dimensions                                       -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-front,
   .bk-front > div {
                                  width: var(--ex-width);
                                 height: var(--ex-height);
                                z-index: 1;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List Item Back,                                                 -- --*/
/*-- --  List Item Back-inside                                           -- --*/
/*-- --  Define element dimensions                                       -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-back,
   .bk-back-inside {
                                  width: var(--ex-width);
                                 height: var(--ex-height);
                                z-index: 1;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List Item Left                                                  -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-left {
                                 cursor: pointer;
                                  width: var(--ex-depth);
                                   left: -20px;
                                 border: 0.5px solid #000;
                         pointer-events: auto;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List Item Right                                                 -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-right {
                                 cursor: pointer;
                                  width: var(--in-depth);
                                   left: -20px;
                                 border: 0.5px solid #000;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List Item Top, List Item Bottom                                 -- --*/
/*-- --  Define element dimensions                                       -- --*/
/*-- --  Fill element with an image of the edge of pages                 -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-top,
   .bk-bottom {
                                  width: var(--in-width);
                                 height: var(--in-depth);
                                    top: -15px;
                             background: url(../images/BookEdgeH.png);
                        background-size: fill;
                      background-repeat: no-repeat;
//                    backface-visibility: hidden;
                                 border: 0.5px solid #000;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  Transform classes                                               -- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List Item Back                                                  -- --*/
/*-- --  Rotate and translate Back to required orientation               -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-back {
                              transform: rotate3d(0,1,0,-180deg)
                                         translate3d(0,0,30px);
                          border-radius: 3px 0 0 3px;
                                 border: 0.5px solid #000;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List Item Back-Inside                                           -- --*/
/*-- --  Rotate and translate Back Inside to required orientation        -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-back-inside {
                              transform: rotate3d(0,1,0, -180deg)
                                         translate3d(0,0,30px);
                          border-radius: 3px 0 0 3px;
                     backface-visibiliy: hidden;
                             background: #FFFFFF;
                                 border: 0.5px solid #000;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List Item Cover-Back                                            -- --*/
/*-- --  Rotate Cover-Back to required orientation                       -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-cover-back {
                                  color: #000000;
                              transform: rotate3d(0,1,0,-180deg);
                         pointer-events: auto;
                                 cursor: pointer;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List Item Right                                                 -- --*/
/*-- --  Fill element with an image of the edge of pages                 -- --*/
/*-- --  Rotate and translate Back to required orientation               -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-right {
                                 height: calc(var(--in-height) - 4);
                                    top: 5px;
                             background: url(../images/BookEdgeV.png);
                        background-size: fill;
                      background-repeat: no-repeat;
                                 border: 0.5px solid #000;

                              transform: rotate3d(0,1,0,90deg)
                                         translate3d(0,11px,375px);
//                    backface-visibility: hidden;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List Item Left                                                  -- --*/
/*-- --  Rotate Left to required orientation                             -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-left {
                                 height: var(--ex-height);
                              transform: rotate3d(0,1,0,-90deg)
                                         translate3d(0,0,12px);

//                    backface-visibility: hidden;

                             box-shadow: inset 4px 0 5px rgba(255,255,255,0.1),
                                         inset 5px 0 5px rgba(0,0,0,0.05),
                                         inset -5px 0 5px rgba(0,0,0,0.04);
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List Item Left-inside                                           -- --*/
/*-- --  Rotate Left to required orientation                             -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-left-inside {
                                  width: 60px;
                                 height: var(--ex-height);
                              transform: rotate3d(0,1,0,90deg)
                                         translate3d(0,0,-30px);
                             background: #E0E0E0;
                                 border: 0.5px solid #000;

                    backface-visibility: hidden;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List Item Top                                                   -- --*/
/*-- --  Rotate Top to required orientation                              -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-top {
                              transform: rotate3d(1,0,0,90deg)
                                         translate3d(0px, 0px,-1px);
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List Item Bottom                                                -- --*/
/*-- --  Rotate and translate Bottom to required orientation             -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-bottom {
                              transform: rotate3d(1,0,0,-90deg)
                                         translate3d(0,0,606px);
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- -- CONTENT PAGES CLASS DEFINITION                                   -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .ct {
                              font-face: "Times New Roman";
                             visibility: hidden;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/









/*-- ==================================-=================================== --*/
/*-- ==================================-=================================== --*/
/*-- ==================================-=================================== --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  Slide book into shelf                                           -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-book.bk-in {
                             transition: transform 1.0s ease-in-out;

                              transform: rotateX(000deg)
                                         rotateY(090deg)
                                         rotateZ(000deg)
                                         translate3D(0px,-130px,0px)
                                         scale3d(0.6, 0.6, 0.6);
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  Slide book out of shelf                                         -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-book.bk-out {
                             transition: transform 1.5s ease-in-out;

                              transform: rotateX(000deg)
                                         rotateY(090deg)
                                         rotateZ(000deg)
                                         translate3D(180px,-172px,0px);
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  Rotate book to show cover                                       -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-book.bk-turn {
                             transition: transform 1.0s ease-in-out;
                              transform: rotateX(  0deg)
                                         rotateY(  0deg)
                                         rotateZ(000deg)
                                         translate3D(var(--book-xaxis),-182px,0px);
//                                         translate3D(180px,-172px,0px);
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  Move book to ultimate destination                               -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-book.bk-move {
                             transition: transform 1.0s ease-in-out;
                              transform: rotate3d(0,0,0,90deg)
                                         translate3D(var(--book-xaxis),-182px,0px);
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  Open book cover                                                 -- --*/
/*-- ----------------------------------=----------------------------------- --*/
  .bk-open .bk-front {
                             transition: transform 1.5s;

                              transform: translate3d(0,0,20px)
                                         rotate3d(0,1,0,-180deg);
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/




/*-- ==================================-=================================== --*/
/*-- ==================================-=================================== --*/
/*-- ==================================-=================================== --*/




/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  Main colors                                                     -- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List Item Page, List Item Right,                                -- --*/
/*-- --  List Item Top, List Item Bottom                                 -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-page,
   .bk-right,
   .bk-top,
   .bk-bottom {
                       background-color: #fff;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List Item Front (immediate child) Div                           -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-front > div {
                          border-radius: 0 3px 3px 0;
                                 border: 0.5px solid #000;
                             box-shadow: inset 4px 0 10px rgba(0, 0, 0, 0.1);
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List Item Front (after)                                         -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-front:after {
                                content: '';
                               position: absolute;
                                    top: 1px;
                                 bottom: 1px;
                                   left: -1px;
                                  width: 1px;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List Item Cover (after), List Item Back (after)                 -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-cover:after,
   .bk-back:after {
                                content: '';
                               position: absolute;
                                    top: 0;
                                   left: 10px;
                                 bottom: 0;
                                  width: 3px;
                             background: rgba(0,0,0,0.06);
                             box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  List Item Back (after)                                          -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-back:after {
                                   left: auto;
                                  right: 10px;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/





/*-- ----------------------------------=----------------------------------- --*/
/*-- --  Fallbacks                                                       -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .no-csstransforms3d .bk-book > div,
   .no-csstransforms3d .bk-book .bk-cover-back {
                                display: none;
   }
/*-- ----------------------------------=----------------------------------- --*/
   .no-csstransforms3d .bk-book > div.bk-front {
                                display: block;
   }
/*-- ----------------------------------=----------------------------------- --*/
   .no-csstransforms3d .bk-list {
                                  width: auto;
   }
/*-- ----------------------------------=----------------------------------- --*/
   .no-csstransforms3d .bk-list li {
                               position: relative;
                                  width: 300px;
                                 margin: 10px;
                                  float: left;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .cleaner {
                                  clear: both;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/



/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .pageFwrd {
                    transition-duration: 2s;
                              transform: translateX(    2px)
                                         translateY(    8px)
                                         translateZ(   31px)
                                            rotateY(-180deg);
                       transition-delay: 0s;
   }
/*-- ----------------------------------=----------------------------------- --*/
   .jumpFwrd {
                              transform: translateX(    2px)
                                         translateY(    8px)
                                         translateZ(   31px)
                                            rotateY(-180deg);
   }
/*-- ----------------------------------=----------------------------------- --*/
   .pageBkwd {
                    transition-duration: 2s;
                              transform: translateX(    1px)
                                         translateY(    8px)
                                         translateZ(   31px)
                                            rotateY(   0deg);
                       transition-delay: 0s;
   }
/*-- ----------------------------------=----------------------------------- --*/
   .jumpBkwd {
                              transform: translateX(    1px)
                                         translateY(    8px)
                                         translateZ(   31px)
                                            rotateY(   0deg);
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- --   P A G E   M E C H A N I S M   T U R N                          -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bdpf_tfrwd {
                              animation: pagefrwd ease-in-out 1.5s;
              animation-iteration-count: 1;
                    animation-fill-mode: forwards;
   }
/*-- ----------------------------------=----------------------------------- --*/
   @keyframes pagefrwd {
      0% {
                              transform: translateX(  -0px)
                                         translateY(   4px)
                                         translateZ(  30px)
                                            rotateY(   0deg);
         }
    100% {
                              transform: translateX(   -0px)
                                         translateY(    4px)
                                         translateZ(   31px)
                                            rotateY(-180deg);
         }
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- --   P A G E                       M E C H A N I S M   F L I P      -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bdpf_ffrwd {
                              animation: pagefflip ease-in-out;
              animation-iteration-count: 1;
                    animation-fill-mode: forwards;
   }
/*-- ----------------------------------=----------------------------------- --*/
   @keyframes pagefflip {
      0% {
                              transform: translateX(  -0px)
                                         translateY(   4px)
                                         translateZ(  28px)
                                            rotateY(   0deg);
         }
    100% {
                              transform: translateX(   -0px)
                                         translateY(    4px)
                                         translateZ(   31px)
                                            rotateY(-180deg);
         }
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- --   P A G E   M E C H A N I S M   B A C K                          -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bdpf_tbkwd {
                              animation: pagebkwd ease-in-out 1.5s;
              animation-iteration-count: 1;
                    animation-fill-mode: forwards;
   }
/*-- ----------------------------------=----------------------------------- --*/
   @keyframes pagebkwd {
      0% {
                              transform: translateX(    2px)
                                         translateY(    4px)
                                         translateZ(   31px)
                                            rotateY(-180deg);
         }

    100% {
                              transform: translateX(   1px)
                                         translateY(   4px)
                                         translateZ(  28px)
                                            rotateY(   0deg);
         }
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- --   P A G E   M E C H A N I S M   B F L I P                        -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bdpf_fbkwd {
                              animation: bkwdflip ease-in-out;
              animation-iteration-count: 1;
                    animation-fill-mode: forwards;
   }
/*-- ----------------------------------=----------------------------------- --*/
   @keyframes bkwdFlip {
      0% {
                              transform: translateX(    2px)
                                         translateY(    4px)
                                         translateZ(   31px)
                                            rotateY(-180deg);
         }
    100% {
                              transform: translateX(   1px)
                                         translateY(   4px)
                                         translateZ(  28px)
                                            rotateY(   0deg);
         }
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/



/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- --              C O N T E N T   D E F I N I T I O N S               -- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- --                       T I T L E   P A G E                        -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .ttpg_ttle {
                               position: fixed;
                                    top: 60px;
                                  width: 90%;
                                 border: 0px solid red;
   }
/*-- ----------------------------------=----------------------------------- --*/
   .ttpg_sers {
                               position: fixed;
                                    top: 140px;
                                  width: 90%;
                                 border: 0px solid green;
   }
/*-- ----------------------------------=----------------------------------- --*/
   .ttpg_auth {
                               position: fixed;
                                 bottom: 280px;
                                  width: 90%;
                                 border: 0px solid yellow;
   }
/*-- ----------------------------------=----------------------------------- --*/
   .ttpg_dtls {
                               position: fixed;
                                 bottom: 50px;
                                  width: 90%;

                           padding-left: 12px;

                                 border: 0px solid blue;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/



/*-- ----------------------------------=----------------------------------- --*/
/*-- --               C O N T E N T   T I T L E   P A G E                -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .cttl_ttle {
                               position: fixed;
                                    top: 50px;
                             text-align: center;
                        text-decoration: underline;
                                  width: 90%;
                            font-family: 'Times New Roman';
                              font-size: 24px;
                                  color: #000080;
   }
/*-- ----------------------------------=----------------------------------- --*/
   .para_text {
                            font-family: 'Times New Roman';
                                  color: black;
                              font-size: 16px;
                             text-align: justify;
                            text-indent: 25px;
                          overflow-wrap: anywhere;
                            white-space: normal;
   }
/*-- ----------------------------------=----------------------------------- --*/
   .para_text2 {
                            font-family: 'Times New Roman';
                                  color: #000080;
                              font-size: 13px;
                            line-height: 14px;
                             text-align: justify;
                            text-indent: 25px;
                          overflow-wrap: anywhere;
                            white-space: normal;
   }
/*-- ----------------------------------=----------------------------------- --*/
   .page_ftr {
                            font-family: 'Times New Roman';
                                  color: #000080;
                               position: absolute;
                                 bottom: 20px;
                                  width: 90%;
                             text-align: center;
                              font-size: 11px;
   }
/*-- ----------------------------------=----------------------------------- --*/
   .page_hdr {
                            font-family: 'Times New Roman';
                                  color: #000080;
                             font-style: italic;
                               position: absolute;
                                    top: 10px;
                                  width: 90%;
                             text-align: center;
                              font-size: 11px;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/











   h1 {
                             text-align: center;
                                  color: #CE0620;
                            font-family: 'Times New Roman';
                              font-size: 18px;
                            font-weight: normal;
                             font-style: italic;
                        text-decoration: underline;
   }
/*-- ----------------------------------=----------------------------------- --*/
   h2 {
                             text-align: center;
                                  color: black;
                            font-family: 'Times New Roman';
                            font-weight: normal;
   }
/*-- ----------------------------------=----------------------------------- --*/
   h3 {
                             text-align: center;
                                  color: #CE0620;
                            font-family: 'Times New Roman';
                            font-weight: normal;
//                             font-style: italic;
                        text-decoration: underline;
   }
/*-- ----------------------------------=----------------------------------- --*/
   .lpara {
                                  width: 50%;
                                  float: left;
                           padding-left: 35px;
                            font-family: 'Times New Roman';
                                  color: black;
                              font-size: 14px;
                             text-align: justify;
                          overflow-wrap: anywhere;
                            white-space: normal;
   }
/*-- ----------------------------------=----------------------------------- --*/
   .rpara {
                                  width: 50%;
                                  float: right;
                            font-family: 'Times New Roman';
                                  color: black;
                              font-size: 14px;
                             text-align: justify;
                          overflow-wrap: anywhere;
                            white-space: normal;
   }
/*-- ----------------------------------=----------------------------------- --*/
   .btext {
                                  clear: both;
                            font-family: 'Times New Roman';
                                  color: black;
                              font-size: 16px;
                             text-align: justify;
                            text-indent: 15px;
                          overflow-wrap: anywhere;
                            white-space: normal;
   }
/*-- ----------------------------------=----------------------------------- --*/
   .ctext {
                                  clear: both;
                            font-family: 'Times New Roman';
                                  color: black;
                              font-size: 16px;
                             text-align: center;
                          overflow-wrap: anywhere;
                            white-space: normal;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  Text                                                            -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-words {
                            font-family: "Times New Roman";
                            line-height: 13px;
                            text-indent: 20px;
                          margin-bottom: -5px;
                                padding: 0;
                             text-align: justify;
   }
/*-- ==================================-=================================== --*/
   .bk-words2 {
                            font-family: "Times New Roman";
                            line-height: 13px;
                          margin-bottom: -5px;
                                padding: 0;
                             text-align: justify;
   }
/*-- ==================================-=================================== --*/
   .text_hdr {
                                  width: 100%;
                             text-align: center;
   }
/*-- ----------------------------------=----------------------------------- --*/
   .text_hld {
                                  width: 95%;
                              font-size: 12px;
                            line-height: 13px;
                            margin-left: 5px;
                           margin-right: 5px;
                             text-align: justify;
                            text-indent: 0;
                                 border: 0px solid green;
   }
/*-- ----------------------------------=----------------------------------- --*/
   .text_lft {
                                  width: 48%;
                                  float: left;
                              font-size: 12px;
                            line-height: 13px;
                             text-align: left;
                            margin-left: 0px;
                           margin-right: 1px;
                                 border: 0px solid red;
   }
/*-- ----------------------------------=----------------------------------- --*/
   .text_rgt {
                                  width: 48%;
                                  float: right;
                              font-size: 12px;
                            line-height: 13px;
                             text-align: left;
                            margin-left: 1px;
                           margin-right: 0px;
                                 border: 0px solid blue;
   }
/*-- ----------------------------------=----------------------------------- --*/
   .text_ftr {
                               position: absolute;
                                  width: 45%;
                            text-indent: 20px; 
                              font-size: 11px;
                            margin-left: 56px;
                                 bottom: 15px;
                                 border: 1px solid #000;
                          border-radius: 25px;
                             background: #CDF;
                         pointer-events: auto;
                                 cursor: pointer;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  FORMATTING                                                      -- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  Content                                                         -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-content {
                               position: absolute;
                                    top: 35px;
                                   left: 20px;
                                 bottom: 20px;
                                  right: 20px;
                                padding: 0px;
                               overflow: hidden;
                             background: #fff;
                                opacity: 0;
                         pointer-events: none;
                    backface-visibility: hidden;
                             transition: opacity 0.3s ease-in-out;
                                 cursor: default;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  Text                                                            -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-text {
                            font-family: "Times New Roman";
                             text-align: justify;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  Content-Current                                                 -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-content-current {
                                opacity: 1;
                         pointer-events: auto;
}
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  Content P (all descendents)                                     -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-content p {
                                padding: 0 0 10px;
                                  color: #000;
                              font-size: 12px;
                            line-height: 14px;
                            text-indent: 15px;
                             text-align: justify;
                            user-select: none;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- --  Content P (all descendents)                                     -- --*/
/*-- ----------------------------------=----------------------------------- --*/
   .bk-content p2 {
                                padding: 0 0 10px;
                                  color: #000;
                              font-size: 12px;
                            line-height: 14px;
                            text-indent: 0px;
                             text-align: justify;
                            user-select: none;
   }
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/
/*-- ----------------------------------=----------------------------------- --*/