html, body{
    background: linear-gradient(#ffffff, #a8a8a8);
    width: 100vw;
    height: 110vh;
    overflow: hidden;
    left: 0px;
    top: 0px;
    position: unset;
}

:root {
    --sda-marge: 100px;
  }

@font-face {
    font-family: Albert;
    src: url(../font/Albert-Beta-26-Book.woff), url(../font/Albert-Beta-26-Book.woff2);
  }

p {
    font-size: 18pt;
    font-family: Albert, Verdana, Geneva, Tahoma, sans-serif;
    /* --albert-beta-18-medium-ss01: "ss01" on; */
    font-feature-settings: "ss01" on;

    line-height: 20pt;
    white-space: pre-wrap;
}

img {
    opacity: 1 !important;
}

video {
    width: 780px;
    transform: scale(1.01, 1.02);
}


/* span {
    text-transform: uppercase;
} */

 .ex-item {
     display: none;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     box-shadow: 0px 0px 20px rgb(194, 194, 194);
     overflow: hidden;
     -webkit-box-reflect: below 20px -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), color-stop(0.8, transparent), to(rgba(0, 0, 0, 0.7))) !important;
}


.iconInfo, .backArrow, .mouseArrow {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    cursor: pointer;
    z-index: 10;
}

.iconInfo {
    width: 100px;
    height: 100px;
    transition: opacity 0.5s ease-in-out;
}

.iconInfo img, .backArrow img, .mouseArrow img {
    /* margin: 30px; */
    position: relative;
    width: 70px;
    left: 45%;
    top: 55%;
    transform: translate(-50%, -50%) !important;
    /* width: 100%;
    height: 100%; */
    box-sizing: border-box;
}

.backArrow img, .mouseArrow img {
    transform: translate(-22%, -78%);
}

#iFrame {
    position: fixed;
    top: 54%;
    left: 53%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0);
    width: 40%;
    height: 25vw;
    z-index: 21;
    /* pointer-events: none; */
    cursor: pointer;
    overflow: hidden;
    transition: all .2s ease-in-out;
    /* clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); */
    /* clip-path: polygon(100% 0, 100% -100%, -100% 100%, 0 100%, 0 0); */
    -webkit-box-shadow: 0px 0px 30px 10px rgba(0,0,0,0); 
    box-shadow: 0px 0px 30px 10px rgba(0,0,0,0);

}

#iFrame.open {
    width: calc(100% - calc(var(--sda-marge) * 2)) !important;
    height: calc(100% - calc(var(--sda-marge) * 2)) !important;
    top: 50% !important;
    left: 50% !important;
    background-color: rgb(255, 255, 255);
    -webkit-box-shadow: 0px 0px 30px 10px rgba(0,0,0,0.2); 
    box-shadow: 0px 0px 30px 10px rgba(0,0,0,0.2);
}

/* #iFrame.clipped { */
    /* clip-path: polygon(100% 0, 100% calc(100% - 100px), calc(100% - 100px) 100%, 0 100%, 0 0); */
    /* width: calc(100% - 70px) !important;
    height: calc(100% - 70px) !important; */

    /* left: calc(50% - 20px) !important; */

/* } */

#iFrame.vanish {
    /* clip-path: polygon(0% 0, 0% 100%, 0% 100%, 0 100%, 0 0); */
    width: 0%;
    height: 0%;
}



#inlineFrame {
    position: absolute;
    /* width: 100%;
    height: 100%; */
    top: 50%;
    left: 50%;
    border: 0px;
    transform: translate(-50%, -50%);
}

#container{
    top: 50%;
    bottom: 0px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    overflow: visible !important;
}

.hotCorner {
    background-color: transparent;
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    z-index: 30;
    pointer-events: all;
    /* cursor: none; */
    clip-path: polygon(0% 0%, 0% 100%, var(--sda-marge) 100%, var(--sda-marge) var(--sda-marge), calc(100% - var(--sda-marge)) var(--sda-marge), calc(100% - var(--sda-marge)) calc(100% - var(--sda-marge)), var(--sda-marge) calc(100% - var(--sda-marge)), var(--sda-marge) 100%, 100% 100%, 100% 0%);

}

.theta-carousel-inner-container {
    width: 100% !important;
    height: 100% !important;
    top: -8vh !important;
    left: 0px !important;
    overflow: visible !important;
    /* opacity: .7; */
    position: static;
}

.textInfo {
    position: fixed;
    background: linear-gradient(#ffffff, #a8a8a8);
    bottom: 0px;
    display: flex;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 50;
    opacity: 0;
    overflow: hidden;
    transition: opacity .4s ease-in-out;
}

.scroll {
    overflow: scroll;
}

.textInfo > p {
    /* max-width: 1180px; */
    width: 50%;
}

.textInfo.show {
    opacity: 1;
}

.textInfo p {
    /* margin: var(--sda-marge); */
    margin: 100px;
    margin-bottom: 15px;
    /* color: white; */
}

.textInfo p.scroll {
    margin: 0px;
    margin-right: -10px;
    /* color: white; */
}

.textInfo p.scroll span {
    margin: 30px;
    margin-right: -10px;

    display: block;
    margin-top: 72px;
    /* color: white; */
}

.textInfo .fixed {
    position: fixed;
    bottom: 20px;
    left: 0px;
    height: 108px;
    width: auto;
}

.siteTitle {
    position: fixed;
    bottom: 0px;
    left: 50%;
    z-index: 20;
    transform: translate(-50%, 0);
    /* text-align: center; */
    margin-left: var(--sda-marge);
    width: 100%;
    height: var(--sda-marge);
    opacity: 0;
    transition: opacity 4s;
    
}

.siteTitle p {
    margin: 0;
    transform: translate(0px, -50%);
    position: relative;
    top: 50%;
}

.siteTitle.show {
    opacity: 1;
}

.mouseArrow {
    position: fixed;
    /* transform: translate(-50%,-50%); */
    /* width: 50px;
    height: 50px;
    top: 0px;
    right: 0px; */
    /* pointer-events: none; */
    cursor: pointer;
    opacity: 0;
    transition: opacity .5s;
}

.mouseArrow.show {
    opacity: 1;
    z-index: 29;
}

/* .mouseArrow img { */
    /* opacity: 1;
    position: absolute;
    width: 40%;
    height: 40%;
    top: 53%;
    right: 53%;
    transform: translate(50%, -50%); */
/* } */

.hidden {
    display: none;
}

.hiddenOpacity {
    opacity: 0;
}