#active-page-a, #active-page-b {
    position: absolute;
    z-index: 20;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 75vh;
    height: 100%;
}
#loading-progress-modal {
  display: none;
  margin:0px;
  height:100%;
    width:100%;
    position: fixed;
  z-index: 5;  
}

#active-page-b {
  display: none;
}

body{
  background-color:rgba(0, 0, 0, 1.00);
  overflow: hidden;
}

.landing{
  position: absolute;
  margin:auto;
  left:0;right:0;
  top:0;bottom:0;
  width:768px;
  height:1024px;
  background-color: grey;
  color: white;
  
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.landing h1, .landing h2{
  font-family: sans-serif
}

.landing h1{
  font-size: 4rem;
}

.landing h2{
  font-size: 2rem;
}

.loading-img-cont{
  text-align: center;
}

.modalBrowser {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 300px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 1.4s;
    animation-name: fadeIn;
    animation-duration: 1.4s
}

.modal-contentBrowser {
    background-color: #ffffff;
    position: relative;
    text-align: center;
    margin: auto;
    border: 1px solid #bdbe9e;
    width: 850px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: slideAnim;
    -webkit-animation-duration: 1s;
    animation-name: slideAnim;
    animation-duration: 1s
}

.modal-bodyBrowser {
    color: #5e4515;
    font-size: 34px;
    display: block;
    padding: 25px 25px;
}

.closeBrowser {
    color: #5e4515;
    float: right;
    font-size: 34px;
    font-weight: bold;
    z-index: 2;
}

.closeBrowser:hover,
.closeBrowser:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.videoContainer {
    display: none;
    position: absolute;
    z-index: 60;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 75.1vh;
    height: 50%;
}

.videoWrap {
    position: absolute;
    width: 100%;
    height: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
}

.videoWrap iframe, .videoWrap object, .videoWrap embed {
    top: 0;
    left: 0;
    width: 100%;
}

.hovermenu {
    z-index: 119;
    position: absolute;
    background-color: rgba(0,0,0,0);
    top: 0;
    height: calc(var(--vh, 1vh) * 8);
    width: 200vw;
    left: -100%;
}

.menuModals {
    display: none;
    position: absolute;
    z-index: 120;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    animation-duration: .5s;
}

.mobilelanwarning {
    z-index: 999;
    position: absolute;
    display: none;
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    animation-duration: .5s;
}

.mobilelanwarningbox {
    font-family: 'Myriad Pro';
    font-size: max(1vw,calc(var(--vh, 1vh) * 2));
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vw;
    max-width: calc(var(--vh, 1vh) * 30);
    height: 30vw;
    max-height: calc(var(--vh, 1vh) * 15);
    background-color: #383737;
    display: inline-block;
    text-align: center;
    border-radius: 20px 20px 20px 20px;
    color: #d1d3d4;
}

.mobilelanwarningboxtext > button {
    background-color: rgba(0,0,0,0);
    border: .2vw;
    border-style: solid;
    -webkit-transition: background-color .4s;
    -webkit-transition: color .4s;
    transition: background-color .4s;
    transition: color .4s;
}

.mobilelanwarningboxtext > button:focus {
    outline: none;
}

.mobilelanwarningboxtext > button:hover {
    background-color: #8d8e8f;
    color: #333333;
}

.mobilelanwarningboxtext {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position:absolute;
    width:100%;
}

.upperMenuOverlay {
    position: absolute;
    top: -1px;
    height: calc(var(--vh, 1vh) * 7);
    width: 100%;
    background-color: #161515;
    -webkit-animation-name: topslideAnim;
    animation-name: topslideAnim;
    animation-duration: .5s;
    display: flex;
    align-items: center;
}

.lowerMenuOverlay {
    position: absolute;
    bottom: 0;
    height: 9vh;
    width: 100%;
    background-color: #161515;
    -webkit-animation-name: bottomslideAnim;
    animation-name: bottomslideAnim;
    animation-duration: .5s;
}

.upperMenuText {
    font-family: 'Myriad Pro';
    font-size: calc(var(--vh, 1vh) * 2.2);
    color: #D1D3D4;
    display: flex;
    align-items: center;
    margin: auto;
    white-space: nowrap;
}

.chapterimg {
    height: calc(var(--vh, 1vh) * 2.5);
    margin-left: calc(var(--vh, 1vh) * 6.4);
    display: inline-block;
}

.chapterimgdesktop {
    height: calc(var(--vh, 1vh) * 2.5);
    margin-left: calc(var(--vh, 1vh) * 6.4);
    display: block;
    position: absolute;
    margin-top: calc(var(--vh, 1vh) * 2);
}

.chapterbtn {
    position: absolute;
    background-color: rgba(0,0,0,0);
    border: none;
    display: flex;
    align-items: center;
    padding: 0;
}

.chapterbtn:focus {
    outline: none;
}

.chapterProgressBG {
    position: absolute;
    width: 100%;
    background-color: #414042;
    bottom: -.5vh;
    height: .5vh;
}

.chapterProgress {
    height: 100%;
    width: 40%;
    background-color: #D1D3D4;
}

.whoswho {
    height: 90%;
    background-color: rgba(0,0,0,0);
    border: none;
    left: 0;
    margin-top: .5vh;
}

.whoswho2 {
    font-family: 'Myriad Pro';
    font-size: calc(var(--vh, 1vh) * 1.8);
    color: #D1D3D4;
    margin-right: calc(var(--vh, 1vh) * 4.6);
    top: 0;
    left: 0;
    transform: none;
    float: none;
    position: relative;
    margin-top: 0;
    display: inline-block;
    background-color: rgba(0,0,0,0);
    border: none;
    align-items: center;
    white-space: nowrap;
}

.whoswho:focus {
    outline: none;
}

.whoswho2:focus {
    outline: none;
}

.whoswhoimg {
    height: 100%;
}

.pages {
    position: absolute;
    height: 90%;
    background-color: rgba(0,0,0,0);
    border: none;
    float: left;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pages2 {
    font-family: 'Myriad Pro';
    font-size: calc(var(--vh, 1vh) * 1.8);
    color: #D1D3D4;
    margin-right: calc(var(--vh, 1vh) * 4.7);
    top: 0;
    left: 0;
    transform: none;
    float: none;
    position: relative;
    margin-top: 0;
    display: inline-block;
    background-color: rgba(0,0,0,0);
    border: none;
    align-items: center;
}

.pages:focus {
    outline: none;
}

.pages2:focus {
    outline: none;
}

.pagesimg {
    height: 100%;
}

.help {
    height: 90%;
    background-color: rgba(0,0,0,0);
    border: none;
    margin-top: .5vh;
}

.help2 {
    font-family: 'Myriad Pro';
    font-size: calc(var(--vh, 1vh) * 1.8);
    color: #D1D3D4;
    margin-right: calc(var(--vh, 1vh) * 5.2);
    top: 0;
    left: 0;
    transform: none;
    float: none;
    position: relative;
    margin-top: 0;
    display: inline-block;
    background-color: rgba(0,0,0,0);
    border: none;
    align-items: center;
}

.help:focus {
    outline: none;
}

.help2:focus {
    outline: none;
}

.helpimg {
    height: 100%;
}

.expandbutton {
    display: inline-block;
    background-color: rgba(0,0,0,0);
    border: none;
    margin-right: calc(var(--vh, 1vh) * 4.8);
    padding: 0;
}

.expandbuttonfloatpar
{
    height: calc(var(--vh, 1vh) * 7);
    right: 0;
    top: 0;
    float: right;
    display: flex;
    margin-right: calc(var(--vh, 1vh) * 4.8);
    align-items: center;
    opacity: 50%;
}

.expandbutton:focus {
    outline: none;
}

.expandbuttonimg {
    content: url("../images/menuoverlay/expand.png");
}

.expandbuttonimg2 {
    dispaly: block;
}

:fullscreen .expandbuttonimg {
    content: url("../images/menuoverlay/minimize.png");
}

:-webkit-full-screen .expandbuttonimg {
    content: url("../images/menuoverlay/minimize.png");
}

:-moz-full-screen .expandbuttonimg {
    content: url("../images/menuoverlay/minimize.png");
}

:-ms-fullscreen .expandbuttonimg {
    content: url("../images/menuoverlay/minimize.png");
}

:fullscreen .expandbuttonimg2 {
    display: none;
}

:-webkit-full-screen .expandbuttonimg2 {
    display: none;
}

:-moz-full-screen .expandbuttonimg2 {
    display: none;
}

:-ms-fullscreen .expandbuttonimg2 {
    display:none;
}

.chapterselectionpar {
    display: none;
    position: absolute;
    z-index: 150;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0,0,0,0);
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.chapterselection {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #292828;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    animation-duration: .5s;
}

.chapterselectionhead {
    position: absolute;
    top: 0;
    height: calc(var(--vh, 1vh) * 7);
    width: 100%;
    background-color: #161515;
}

.chapterselheadtext {
    position: absolute;
    font-family: 'Myriad Pro';
    color: #D1D3D4;
    font-size: calc(var(--vh, 1vh) * 2.2);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    text-align: center;
    vertical-align: middle;
}

.chapterbtnlist {
    height: calc(var(--vh, 1vh) * 93);
    overflow: auto;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: move;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.chapterbtnlist::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.chapterbtnlist:active {
    cursor: move;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.chapterbtns, .chapterbtnsdes, .chapterbtnsmob {
    width: 100%;
    background-color: rgba(0,0,0,1);
    border: none;
    margin-top: .5vh;
    margin-bottom: .5vh;
    padding: 0;
    position: relative;
    vertical-align: top;
}

.chapterbtns, .chapterbtnsdes, .chapterbtnsmob:focus {
    outline: none;
}

.chapterbtnsdes {
    background-color: #383737;
    padding-top: 10.2%;
}

.chapterbtnfeedtext {
    font-family: 'Myriad Pro';
    font-size: .9vw;
    color: #d1d3d4;
    text-align: center;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    width: 100%;
}

.chapterbtnfeedtext > button {
    background-color: rgba(0,0,0,0);
    border: .2vw;
    border-style: solid;
    width: 11.8vw;
    height: 2.8vw;
    font-size: 1.4vw;
    -webkit-transition: background-color .4s;
    -webkit-transition: color .4s;
    transition: background-color .4s;
    transition: color .4s;
}

.chapterbtnfeedtext, button:focus {
    outline: none;
}

.chapterbtnfeedtext > button:hover {
    background-color: #8d8e8f;
    color: #333333;
}

.chapterbtnimg {
    width: 100%;
}

.chpbtntext {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-family: 'Myriad Pro';
    color: #CCCCCC;
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

.chpshad {
    position: absolute;
    opacity: 0;
    box-shadow: 0px 0px 0px 0px white inset;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-transition: opacity .4s;
    transition: opacity .4s;
}

.chpshad:hover {
    box-shadow: 0px 0px 0px 5px white inset;
    opacity: 1;
}

.chclosepar {
    display: flex;
    height: 100%;
    text-align: right;
    align-items: center;
    float: right;
}

.closebutton {
    height: calc(var(--vh, 1vh) * 5);
    width: calc(var(--vh, 1vh) * 5);
    background-color: rgba(0,0,0,0);
    right: 0;
    border: none;
    padding: 0;
    margin-right: calc(var(--vh, 1vh) * 1.4);
}

.closechaplan {
    height: calc(var(--vh, 1vh) * 5.8);
    width: calc(var(--vh, 1vh) * 5.8);
    background-color: rgba(0,0,0,0);
    right: 0;
    border: none;
    padding: 0;
    margin-left: calc(var(--vh, 1vh) * 5.5);
}

.closechaplan:focus {
    outline: none;
}

.pageback, .whoswhoback {
    height: 100%;
    background-color: rgba(0,0,0,0);
    font-family: 'Myriad Pro';
    font-size: calc(var(--vh, 1vh) * 2.2);
    color: #D1D3D4;
    right: 0;
    border: none;
    padding: 0;
    margin-left: calc(var(--vh, 1vh) * 7);
    width: calc(var(--vh, 1vh) * 10);
    align-items: center;
}

.pageback:focus, .whoswhoback:focus {
    outline: none;
}

.closebutton:focus {
    outline: none;
}

.closebtnimg {
    width: 100%;
    height: 100%;
}

.pageselectionpar {
    display: none;
    position: absolute;
    z-index: 150;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0,0,0,0);
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.pageselectionhead, .whoswhoheader {
    position: absolute;
    top: 0;
    height: calc(var(--vh, 1vh) * 7);
    width: 100%;
    background-color: #161515;
}

.pageselheadtext, .whoswhoheadtext {
    position: absolute;
    font-family: 'Myriad Pro';
    color: #D1D3D4;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    text-align: center;
    vertical-align: middle;
    font-size: calc(var(--vh, 1vh) * 2.2);
}

.pageselection {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #292828;
}

.pagebtnlist {
    height: calc(var(--vh, 1vh) * 93);
    overflow: auto;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: move;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pagebtnlist::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.pagebtnlist:active {
    cursor: move;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.pagebtn {
    width: 29%;
    margin-top: 2vh;
    margin-left: 1vh;
    margin-right: 1vh;
    padding: 0;
    border: none;
    background-color: rgba(0,0,0,0);
    position: relative;
}

.pagebtn:focus {
    outline: none;
}

.pagebtn:hover .pagebtntext {
    color: #161515;
}

.pagebtn:hover .pagebtndiv {
    background-color: #D4D6D7;
}

.pagecur:hover {
    opacity: 1;
}

.pagebtnimg{
    height: 100%;
    width: 100%;
}

.pagebtndiv {
    width: 27%;
    height: 0;
    padding-bottom: 27%;
    display: inline-block;
    background-color: #161515;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transition: background-color .4s;
    transition: background-color .4s;
}

.pageplaybtndiv {
    width: 27%;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pagebtntext {
    position: absolute;
    font-family: 'Myriad Pro';
    color: #D4D6D7;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    vertical-align: middle;
    width: 30%;
    display: inline-block;
    -webkit-transition: color .4s;
    transition: color .4s;
}

.pagecur {
    position: absolute;
    box-shadow: 0px 0px 0px .5vh #D4D6D7 inset;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-transition: opacity .4s;
    transition: opacity .4s;
    opacity: 0;
}

.welcomeback, .whoswhopage {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    align-items: center;
    justify-content: center;
    background-image: url("../images/WelcomeBack/bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 50;
}

.whoswhopage {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    animation-duration: .5s;
}

.welcomebackconlan{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    width:100%;
}

.welcomebackconpor {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height:100%;
    text-align: center;
}

.welcomebackleft {
    width: 50%;
}

.welcomebackright{
    width: 50%;
    padding-left: 6.8vw;
}

.pagepre {
    height: 67vh;
    float: right;
    margin-right: 5%;
}

.mobilepagepre {
    height: calc(var(--vh, 1vh) * 47);
    display: block;
    margin: auto;
}

.leftnav {
    display: none;
    position: absolute;
    height: 100%;
    width: 50%;
    align-items: center;
    background-color: black;
    cursor: pointer;
}

.leftnavbox {
    position: absolute;
    height: 80%;
    width: 50%;
    border-style: dashed;
    border-color: #707070;
    display: none;
    align-items: center;
    background-color: rgba(0,0,0,0);
}

.leftnavbox:focus {
    outline: none;
}

.leftnavarrow {
    opacity: 0;
    position: absolute;
    margin-left: 30px;
    -webkit-transition: opacity .4s;
    transition: opacity .4s;
}

.leftnav:hover .leftnavarrow {
    opacity: 1;
}

.rightnav {
    display: none;
    position: absolute;
    height: 100%;
    width: 50%;
    transform: translate(100%, 0%);
    align-items: center;
    background-color: black;
    cursor: pointer;
}

.rightnavbox {
    position: absolute;
    height: 80%;
    width: 50%;
    right: 0;
    border-style: dashed;
    border-color: #707070;
    display: none;
    align-items: center;
    background-color: rgba(0,0,0,0);
}

.rightnavbox:focus {
    outline: none;
}

.rightnavarrow {
    opacity: 0;
    position: absolute;
    right: 0;
    margin-right: 30px;
    transform: scaleX(-1);
    -webkit-transition: opacity .4s;
    transition: opacity .4s;
}

.rightnav:hover .rightnavarrow {
    opacity: 1;
}

.midnav {
    display: none;
    position: absolute;
    z-index: 101;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 75.1vh;
    height: 100%;
}

.midnavbox {
    width: 100%;
    height: 100%;
    border: none;
    background-color: rgba(0,0,0,0);
}

.midnavbox:focus{
    outline: none;
}

.tutorialback {
    top: 0;
    left: 0;
    margin-left: 40px;
    margin-top: 10px;
    font-family: 'Myriad Pro';
    z-index: 100;
    color: #D4D6D7;
    border: none;
    background-color: rgba(0,0,0,0);
    display: none;
    align-items: center;
    font-size: calc(var(--vh, 1vh) * 2);
    position: relative;
}

.tutorialback:focus {
    outline: none;
}

.menupartition {
    margin-right: calc(var(--vh, 1vh) * 4.8);
    background-color: #353434;
    height: 90%;
    width: 1px;
    display: inline-block;
}

.whoswhobody {
    bottom: 0;
    height: calc(var(--vh, 1vh) * 91);
    width: 100%;
    position: absolute;
    text-align: center;
}

.whoswhofol {
    width: 100%;
    display: inline;
}

.whoswhotext1 {
    font-family: 'Myriad Pro';
    font-size: calc(var(--vh, 1vh) * 4.7);
    color: #D4D6D7;
    margin-top: calc(var(--vh, 1vh) * 6);
    margin-bottom: calc(var(--vh, 1vh) * 5);
    margin-left: 20vw;
    margin-right: 20vw;
}

.whoswhotext2, .whoswhotext3 {
    font-family: 'Myriad Pro';
    font-size: calc(var(--vh, 1vh) * 2.2);
    color: #D4D6D7;
    margin-top: calc(var(--vh, 1vh) * 3);
    margin-bottom: calc(var(--vh, 1vh) * 2);
    margin-left: 15vw;
    margin-right: 15vw;
}

.mutebtn {
    background-color: rgba(0,0,0,0);
    height: calc(var(--vh, 1vh) * 2.5);
    border: none;
    bottom: 0;
    right: 0;
    transform: none;
    float: none;
    position: absolute;
    margin-bottom: calc(var(--vh, 1vh) * 3);
    margin-right: calc(var(--vh, 1vh) * 5);
    display: inline-block;
    align-items: center;
}

.mutebtn:focus {
    outline: none;
}

.topbtnimg {
    position: relative;
    -webkit-transition: opacity .4s;
    transition: opacity .4s;
    width: 200px;
    opacity: 0;
}

.botbtnimg {
    position: absolute;
    -webkit-transition: opacity .4s;
    transition: opacity .4s;
    width: 200px;
}

.topbtnimg:hover{
    opacity: 1;
}

.tutorialhelploading {
    height: calc(var(--vh, 1vh) * 30);
    top: 0;
    left: 0;
    transform: translate(50vw, calc(var(--vh, 1vh) * 50));
    max-width: 60vw;
    z-index: 500;
    position: absolute;
    display: none;
}

.tutorialhelploading > img {
    transform: translate(-50%,-50%);
    position: absolute;
    display: block;
    height: 50%;
}

@media screen and (orientation:portrait) {
        .upperMenuOverlay {
        height: calc(var(--vh, 1vh) * 8.5);
    }

    .expandbuttonfloatpar{
        display: none;
    }

    .chapterbtnfeedtext {
        font-family: 'Myriad Pro';
        font-size: 3.7vw;
        color: #d1d3d4;
        text-align: center;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        position: absolute;
        width: 100%;
    }

    .chapterbtnfeedtext > button {
        background-color: rgba(0,0,0,0);
        border: .4vw;
        border-style: solid;
        width: 46vw;
        height: 13vw;
        font-size: 5vw;
    }

    .chapterimgdesktop {
        display: none;
    }

    .chapterimg {
        margin-left: calc(var(--vh, 1vh) * 3);
    }

    .chapterselection {
        -webkit-animation-name: leftslideAnim;
        animation-name: leftslideAnim;
    }

    .welcomebackconlan {
        display: none;
    }

    .welcomebackconpor {
        display: block;
    }

    .pageback {
        display: none;
    }

    .closebutton {
        display: flex;
    }

    .pageselection {
        -webkit-animation-name: pageSlideAnim;
        animation-name: pageSlideAnim;
        animation-duration: .5s;
    }

    .pagebtn {
        width: 29%
    }

    .pagebtnlist {
        padding-left: 0;
        padding-right: 0;
    }

    .chapterbtns, .chapterbtnsmob {
        width: 100%;
        margin: 0;
    }

    .chapterbtnsdes {
        display: none;
    }

    .chclosepar {
        float: right;
    }

    .closechaplan {
        display: none;
    }

    .lowerMenuOverlay {
        display: block;
    }

    .whoswho2 {
        display: none;
    }

    .pages2 {
        display: none;
    }

    .help2 {
        display: none;
    }

    .menupartition {
        display: none;
    }

    .expandbutton {
        display: none;
    }

    .whoswhoback {
        display: none;
    }

    .whoswhotext2 {
        display: none;
    }

    .whoswhotext3 {
        display: block;
    }

    .whoswhotext3 {
        font-size: calc(var(--vh, 1vh) * 3);
    }

    .mutebtn{
        display: none;
    }

    .midnav{
        display: none;
    }

    .tutorialback {
        margin-left: 20px;
        z-index: 101;
    }
}

@media screen and (orientation:landscape) {
    .chapterimg {
        margin-left: calc(var(--vh, 1vh) * 6.4);
    }

    .chapterselection {
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
    }

    .pageselection {
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
        animation-duration: .5s;
    }

    .welcomebackconlan {
        display: flex;
    }

    .welcomebackconpor {
        display: none;
    }

    .pageback {
        display: flex;
    }

    .closebutton {
        display: none;
    }

    .pagebtn {
        width: 15.8%;
        margin-left: calc(var(--vh, 1vh) * 2);
        margin-right: calc(var(--vh, 1vh) * 2);
    }

    .pagebtnlist {
        padding-left: 10%;
        padding-right: 10%;
    }

    .chapterbtns, .chapterbtnsdes {
        width: 25%;
        margin-left: calc(var(--vh, 1vh) * .7);
        margin-right: calc(var(--vh, 1vh) * .7);
        margin-top: calc(var(--vh, 1vh) * 1.5);
        margin-bottom: calc(var(--vh, 1vh) * 1.5);
        display:inline-block;
    }

    .chapterbtnsmob{
        display: none;
    }

    .chclosepar {
        float: left;
    }

    .closechaplan {
        display: block;
    }

    .lowerMenuOverlay {
        display: none;
    }

    .whoswho2 {
        display: flex;
    }

    .pages2 {
        display: flex;
    }

    .help2 {
        display: flex;
    }

    .menupartition {
        display: flex;
    }

    .expandbutton {
        display: flex;
    }

    .whoswhoback {
        display: flex;
    }

    .whoswhotext2 {
        display: block;
    }

    .whoswhotext3 {
        display: none;
    }

    .mutebtn {
        display: inline-block;
    }
}

.weltoptext {
    font-size: calc(var(--vh, 1vh) * 4.8);
    font-family: 'Myriad Pro Bold';
    color: #D4D6D7;
    padding-bottom: calc(var(--vh, 1vh) * 3);
    padding-top: calc(var(--vh, 1vh) * 8.5);
}

.welmidtext {
    font-size: calc(var(--vh, 1vh) * 2.8);
    font-family: 'Myriad Pro';
    color: #D4D6D7;
    padding-bottom: calc(var(--vh, 1vh) * .5);
}

.welbottext {
    font-size: calc(var(--vh, 1vh) * 2.8);
    font-family: 'Myriad Pro';
    color: #D4D6D7;
    padding-bottom: calc(var(--vh, 1vh) * 4);
}

.weltoptextpor {
    font-size: calc(var(--vh, 1vh) * 4.5);
    font-family: 'Myriad Pro Bold';
    color: #D4D6D7;
    padding-bottom: calc(var(--vh, 1vh) * 3);
    padding-top: calc(var(--vh, 1vh) * 4);
}

.welmidtextpor {
    font-size: calc(var(--vh, 1vh) * 2.5);
    font-family: 'Myriad Pro';
    color: #D4D6D7;
    padding-bottom: calc(var(--vh, 1vh) * 2);
    padding-top: calc(var(--vh, 1vh) * 2);
}

.welbottextpor {
    font-size: calc(var(--vh, 1vh) * 2.5);
    font-family: 'Myriad Pro';
    color: #D4D6D7;
    padding-bottom: calc(var(--vh, 1vh) * 5);
}

.welcontbtn {
    background-color: rgba(0,0,0,0);
    border: none;
    padding-bottom: calc(var(--vh, 1vh) * 2);
    padding-top: calc(var(--vh, 1vh) * 2);
}

.welcontbtn:focus {
    outline: none;
}

.welrestartbtn {
    background-color: rgba(0,0,0,0);
    border: none;
}

.welrestartbtn:focus {
    outline: none;
}

/* temporary */
#dom_overlay_containerBookTrailer > div {
    top: 20% !important;
    width: 100% !important;
}

#dom_overlay_containerBookTrailer .video-book-trailer {
    width: 100% !important;
    height: auto !important;
    min-height: 300px;
}

@-webkit-keyframes leftslideoutAnim {
    from {
        left: 0;
    }

    to {
        left: -2500px;
    }
}

@keyframes leftslideoutAnim {
    from {
        left: 0;
    }

    to {
        left: -2500px;
    }
}

@-webkit-keyframes leftslideAnim {
    from {
        left: -2500px;
    }

    to {
        left: 0;
    }
}

@keyframes leftslideAnim {
    from {
        left: -2500px;
    }

    to {
        left: 0;
    }
}

@-webkit-keyframes bottomslideAnim {
    from {
        bottom: -300px;
    }

    to {
        bottom: 0;
    }
}

@keyframes bottomslideAnim {
    from {
        bottom: -300px;
    }

    to {
        bottom: 0;
    }
}

@-webkit-keyframes bottomslideoutAnim {
    from {
        bottom: 0;
    }

    to {
        bottom: -300px;
    }
}

@keyframes bottomslideoutAnim {
    from {
        bottom: 0;
    }

    to {
        bottom: -300px;
    }
}

@-webkit-keyframes pageSlideAnim {
    from {
        top: 3000px;
    }

    to {
        top: 0;
    }
}

@keyframes pageSlideAnim {
    from {
        top: 3000px;
    }

    to {
        top: 0;
    }
}

@-webkit-keyframes pageSlideOutAnim {
    from {
        top: 0;
    }

    to {
        top: 3000px;
    }
}

@keyframes pageSlideOutAnim {
    from {
        top: 0;
    }

    to {
        top: 3000px;
    }
}

@-webkit-keyframes topslideAnim {
    from {
        top: -300px;
    }

    to {
        bottom: 0;
    }
}

@keyframes topslideAnim {
    from {
        top: -300px;
    }

    to {
        bottom: 0;
    }
}

@-webkit-keyframes topslideoutAnim {
    from {
        top: 0;
    }

    to {
        top: -300px;
    }
}

@keyframes topslideoutAnim {
    from {
        top: 0;
    }

    to {
        top: -300px;
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes fadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@font-face {
    font-family: 'Myriad Pro';
    src: url("font/myriadproregular.ttf");
}

@font-face {
    font-family: 'Myriad Pro Bold';
    src: url("font/myriadprobold.ttf");
}