@font-face {
    font-family: 'Californian FB';
    src: url('californian-fb.woff2') format('woff2'),
        url('californian-fb.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body {
    margin: 0;
    overflow: hidden;
}

.hide {
    display: none !important;
}

.clearboth {
    clear:both
}

#stage {
    position: relative;
    width: 800px;
    height: 600px;
    /* margin: 0 auto; */
    display: none;
    z-index: 101;
}
#stage > .stack {
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#stage > .stack > div:not(.theme-block), #stage > .stack > div.theme-block > div {
    display: none;
}

#stack-ground {
    z-index: 10;
}
#stack-text {
    z-index: 20;
}
#stack-cloud-1 {
    z-index: 30;
}
#stack-cloud-2 {
    z-index: 40;
}
#stack-sky {
    z-index: 50;
}
#stack-panel {
    z-index: 60;
}

#div2
{
  height:1px;
  position:absolute;
  background:#fff;
  width:100%;
  top:255px;
}

#div1
{
  padding:5px;
  width:300px;
  position:absolute;
  margin:200px 100px;
  background:green;
  border-radius:5px;
  border:solid 1px #fff;
}
.background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
#gray-background {
    background: linear-gradient(0deg, rgba(226,226,226,1) 0%, rgba(152,152,154,1) 100%);
    z-index: 100;
    text-align: center;
    font-size: 40px;
    line-height: 400px;
}
#background {
    background: linear-gradient(0deg, rgba(90,170,255,1) 0%, rgba(51,102,255,1) 100%);
}

#library, #library svg {
    display: none;
}

#sound-button, #sound-button-on {
    position: absolute;
    cursor: pointer;
    z-index: 120;
}
#sound-button-on {
    left: 11px;
}

.left-string, .right-string {
    position: absolute;
    width: 5px;
    height: 1396px;
}
#say1 {
    position: absolute;
    left: 172px;
    top: -427px;
}
#say1 #when-text {
    position: absolute;
    width: 215px;
    height: 64px;
    left: -106px;
    top: 566px;
}
#say1 .left-string, #say1 .right-string {
    width: 5px;
    top: -819px;
}
#say1 .left-string {
    left: -101px;
}
#say1 .right-string {
    right: -104px;
}

#say2 {
    position: absolute;
    left: 294px;
    top: 110px;
}
#say2 #yes-text {
    position: absolute;
    width: 219px;
    height: 123px;
    left: -3px;
    top: -13px;
}
#say2 .left-string {
    top: -1383px;
    left: 105px;
}

#say3 {
    position: absolute;
    left: 581px;
    top: -427px;
}
#say3 #to-life-text {
    position: absolute;
    width: 127px;
    height: 64px;
    left: -61px;
    top: 566px;
}
#say3 .left-string, #say3 .right-string {
    top: -819px;
}
#say3 .left-string {
    left: -56px;
}
#say3 .right-string {
    right: -61px;
}

.shadow1 {
    filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.3));
}
.shadow2 {
    filter: drop-shadow(5px 5px 6px rgba(0, 0, 0, 0.42));
}
.shadow3 {
    filter: drop-shadow(10px 10px 8px rgba(0, 0, 0, 0.38));
}
.shadow4 {
    filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.5));
}
.box-shadow1 {
    box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.25);
}
.box-shadow2 {
    box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.38);
}
.box-shadow3 {
    box-shadow: 10px 10px 8px rgba(0, 0, 0, 0.35);
}
.box-shadow4 {
    box-shadow: 6px 6px 3px rgba(0, 0, 0, 0.4);
}

#line2 .left-string, #line2 .right-string, #line3 .left-string, #line3 .right-string, #line4 .left-string, #line4 .right-string {
    position: absolute;
    top: -386px;
}
#line2 .left-string, #line3 .left-string, #line4 .left-string {
    left: 5px;
}
#line2 .right-string, #line3 .right-string, #line4 .right-string {
    right: 5px;
}
#line2, #line3, #line4 {
    position: absolute;
}
.line-box {
    position: absolute;
    top:1000px;
    width: 100%;
    height: 64px;
    background-color: #ffffff;
    border: 1px solid black;
}
#line2 {
    top: -759px;/*241*/
    left: 94px;
    width: 333px;
}
#line3 {
    top: -674px;/*326*/
    left: 124px;
    width: 506px;
}
#line4 {
    top: -589px;/*411*/
    left: 176px;
    width: 471px;
}
.line-text {
    font-family: Helvetica, Arial, san-serif;
    font-size: 37px;
    /* font-size:2.3em; */
    /* -webkit-text-size-adjust: none; */
    font-weight: bold;
    position: absolute;
    white-space: nowrap;
    /* YES-13 */
    /* top: 1011px;
    left: 9px; */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.large-line .line-text {
    font-size:36px;
}

#sky1 {
    position: absolute;
    top: 40px;
    left: -8px;
}
#sky1, #sky1-item {
    width: 225px;
    height: 75px;
}
#sky1 .left-string, #sky1 .right-string {
    position: absolute;
    top: -1369px;
}
#sky1 .left-string {
    left: 28px;
}
#sky1 .right-string {
    left: 173px;
}
#sky2 {
    position: absolute;
    top: 10px;
    left: 160px;
}
#sky2, #sky2-item {
    width: 217px;
    height: 72px;
}
#sky2 .left-string, #sky2 .right-string {
    position: absolute;
    top: -1369px;
}
#sky2 .left-string {
    left: 22px;
}
#sky2 .right-string {
    left: 186px;
}
#sky3 {
    position: absolute;
    top: -128px;
    right: -115px;
}
#sky3, #sky3-item {
    width: 267px;
    height: 267px;
}
#sky3 .left-string, #sky3 .right-string {
    position: absolute;
    top: -1290px;
}
#sky3 .left-string {
    left: 55px;
}
#sky3 .right-string {
    left: 207px;
}

#end-thing-hills {
    position: absolute;
    top: -128px;
    right: -145px;
}
#sky3, #sky3-item {
    width: 267px;
    height: 267px;
}
#sky3 .left-string, #sky3 .right-string {
    position: absolute;
    top: -1290px;
}
#sky3 .left-string {
    left: 55px;
}
#sky3 .right-string {
    left: 207px;
}

.theme-island {
    display: none;
}

#end-thing div {
    position: absolute;
}
#end-thing-item-hills {
    width: 75px;
    height: 39px;
}
/* #end-thing .theme-hills {
    top: 48px;
    left: 440px;
} */
#end-thing .theme-hills .left-string, #end-thing .theme-hills .right-string {
    position: absolute;
    top: -1388px;
}
#end-thing .theme-hills .left-string {
    left: 8px;
}
#end-thing .theme-hills .right-string {
    right: 8px;
}
.end-thing-item-island {
    width: 89px;
    position: absolute;
}
#end-thing .theme-island .left-string, #end-thing .theme-island .right-string {
    position: absolute;
}
#end-thing-item-island-1 {
    height: 92px;
}
.end-thing-island-left-string-1 {
    top: -1390px;
    left: 26px;
    z-index: -1;
}
.end-thing-island-right-string-1 {
    top: -1308px;
    left: 72px;
    z-index: -1;
}
#end-thing-item-island-2 {
    height: 67px;
    top: 3px;
    display: none;
}
.end-thing-island-left-string-2 {
    top: -1387px;
    left: 26px;
    z-index: -1;
}
.end-thing-island-right-string-2 {
    top: -1327px;
    left: 72px;
    z-index: -1;
}
#end-thing-item-island-3 {
    height: 43px;
    top: 8px;
    display: none;
}
.end-thing-island-left-string-3 {
    top: -1382px;
    left: 33px;
    z-index: -1;
}
.end-thing-island-right-string-3 {
    top: -1347px;
    left: 72px;
    z-index: -1;
}
#end-thing-item-island-4 {
    height: 25px;
    top: 15px;
    display: none;
}
.end-thing-island-left-string-4 {
    top: -1367px;
    left: 33px;
}
.end-thing-island-right-string-4 {
    top: -1367px;
    left: 72px;
    z-index: -1;
}
#end-thing-item-island-5 {
    height: 36px;
    top: 8px;
    display: none;
}
.end-thing-island-left-string-5 {
    top: -1355px;
    left: 23px;
}
.end-thing-island-right-string-5 {
    top: -1381px;
    left: 56px;
}
#end-thing-item-island-6 {
    height: 71px;
    top: -13px;
    display: none;
}
#end-thing .theme-island {
    top: 26px;
    left: 480px;
}
.end-thing-island-left-string-6 {
    top: -1350px;
    left: 18px;
}
.end-thing-island-right-string-6 {
    top: -1393px;
    left: 62px;
}

#ground1 div, #ground2 div {
    position: absolute;
}
#ground1 .theme-hills {
    top: 517px;
    left: -379px;
}
#ground2 .theme-hills {
    top: 480px;
    left: 7px
}
#ground1 .theme-island {
    top: 530px;
    left: -781px;
}
#ground2 .theme-island {
    top: 180px;
    left: 260px
}

#last-thing div {
    position: absolute;
}
#last-thing .theme-hills {
    top: 480px;
    left: 690px;
}
#last-thing .theme-island {
    top: 480px;
    left: 592px;
}

#panel-container {
    position: absolute;
    top: -300%;
    height: 400%;
    width: 800px;
    z-index: 150;
    display: none;
}

#panel {
    position: absolute;
    left: 50%;
    bottom: 12%;
    transform: translate(-50%, 50%);
}

#panel #panel-item {
    width: 701px;
}
#panel .left-string, #panel .right-string {
    position: absolute;
    top: -1387px;
}
#panel .left-string {
    left: 5px;
}
#panel .right-string {
    right: 4px;
}


#panel.enter #panel-item {
    width: 413;
}

#panel-website-main {
    position: absolute;
    left: 72px;
    top: 117px;
    display: none;
}
#panel-website-main .panel-centered {
    margin-left: 10px;
}
.panel-text {
    font-family: serif;
    transform: scale(1, 1.2);
    -webkit-transform: scale(1, 1.2); /* Safari and Chrome */
    -moz-transform: scale(1, 1.2); /* Firefox */
    -ms-transform: scale(1, 1.2); /* IE 9+ */
    -o-transform: scale(1, 1.2); /* Opera */
    font-style: italic;
    color: #2C383F;
    text-align: center;
}
#panel-website-main .panel-text {
    font-size: 26px;
    margin-top: 12px;
}
.panel-buttons img {
    cursor: pointer;
    margin-right: 10px;
    margin-bottom: 9px;
}
.panel-buttons img:hover {
    filter: invert(0%) sepia(80%) saturate(0%) hue-rotate(203deg) brightness(41%) contrast(108%);
}
.panel-buttons img:active {
    filter: invert(97%) sepia(65%) saturate(5586%) hue-rotate(162deg) brightness(102%) contrast(85%);
}
#panel-website-main .panel-buttons {
    margin-top: 33px;
    margin-left: 3px;
}

#panel-app-main {
    position: absolute;
    left: 59px;
    top: 103px;
}
#panel-app-main .panel-centered {
    margin-left: 0px;
}
#panel-app-main .panel-buttons {
    margin-top: 23px;
    margin-left: 8px;
}
#panel-app-main .panel-previous-message-button {
    margin-left: 32px;
}
#panel-app-main .panel-buttons img {
    margin-bottom: 19px;
}


#panel-tap-enter {
    position: absolute;
    left: 63px;
    right: 62px;
    top: 100px;
    display: none;
}
#panel-tap-enter .panel-tap-enter-button {
    width: 345px;
    height: 110px;
    margin: 0 auto;
    margin-top:30px;
    display: block;
    cursor: pointer;
}

#panel-author {
    position: absolute;
    left: 72px;
    top: 121px;
    display: none;
}
#panel-author .panel-centered {
    margin-left: 44px;
}
#panel-author .panel-text, #panel-author .panel-text-width {
    width: 525px;
    font-size: 20px;
    margin-top: 12px;
    margin-left: 51px;
}
#panel-author .panel-text-width {
    visibility:hidden;
    position: absolute;
    width:fit-content;
    white-space: nowrap;
}
#panel-author .panel-buttons {
    margin-top: 28px;
    margin-left: 177px;
}
#panel-author .panel-artwork {
    position: absolute;
    left: 0px;
    top: 10px;
}

#panel-videos {
    position: absolute;
    left: 90px;
    top: 121px;
    width: 520px;
    display: none;
}
#panel-videos .panel-buttons img {
    margin: 0;
}
#panel-videos .panel-video-testimonial {
    /* float:left; */
    margin: 0 auto !important; 
    display: block;
}
#panel-videos .panel-video-interview {
    float:right;
}
#panel-videos .panel-buttons img.panel-btn-about-the-author {
    display:block;
    margin: 0 auto;
    margin-top: 20px;
}

#panel-share {
    position: absolute;
    left: 59px;
    top: 91px;
    display: none;
}
#panel-share .panel-centered {
    margin-left: 0px;
}
#panel-share .panel-buttons {
    margin-top: 9px;
    margin-left: 26px;
}
#panel-share #email-button {
    padding-left: 154px;
}

#ground1 > *, #ground2 > *, #last-thing > *, #end-thing > *, #panel-container,
#line4, #line3, #line2, #say1, #say2, #say3, #sky3, #sky1, #sky2 {
    will-change: transform;
}

.panel-hidden {
    transform: translate(-500%, 0px) !important;
}

#video-player {
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 130;
    display: none;
    background-color:#00000088;
}
#video-player video {
    object-fit: contain;
    object-position: center;
    position: relative;
    width: 96%;
    height: 96%;
    margin-left: 2%;
    margin-top: 1%;
}
#video-player .video-close {
    position: absolute;
    right: 2%;
    height: 1.5em;
    z-index: 5;
}
#video-player .video-close img {
    height: 100%;
    cursor:pointer;
    float:right;
}