.ViewItem {
    position: absolute;
    z-index: 9;
    cursor: default;
}
.ViewItemStory {
    position: absolute;
    z-index: 9;
    cursor: pointer;
}
.ViewItemBoard {
    position: absolute;
    z-index: 9;
    cursor: url("https://www.dreamtracker.me/images/storyicon36.png"), auto;
}
/* Zoom */
.Preview1 {
    -webkit-transform: scale(1); transform: scale(1);
    -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;
}
.Preview1:hover, .Preview1:focus, .Preview1:active {
    -webkit-transform: scale(1.3); transform: scale(1.3);
    -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;
}
/* Shake */
.Preview2 {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.Preview2:hover, .Preview2:focus, .Preview2:active {
  -webkit-animation-name: preview-shake; animation-name: preview-shake;
  -webkit-animation-duration: 0.2s; animation-duration: 0.2s;
  -webkit-animation-timing-function: linear; animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;
}
@-webkit-keyframes preview-shake {
  50%  {-webkit-transform: translateX(3px) rotate(3deg);transform: translateX(3px) rotate(3deg);}
  100% {-webkit-transform: translateX(-3px) rotate(-3deg);transform: translateX(-3px) rotate(-3deg);}
}
@keyframes preview-shake {
  50%  {-webkit-transform: translateX(3px) rotate(3deg);transform: translateX(3px) rotate(3deg);}
  100% {-webkit-transform: translateX(-3px) rotate(-3deg);transform: translateX(-3px) rotate(-3deg);}
}
/* Pulse */
.Preview3 {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.Preview3:hover, .Preview3:focus, .Preview3:active {
  -webkit-animation-name: preview-pulse; animation-name: preview-pulse;
  -webkit-animation-duration: 1s; animation-duration: 1s;
  -webkit-animation-timing-function: linear; animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;
}
@-webkit-keyframes preview-pulse {
  25% {-webkit-transform: scale(1.1); transform: scale(1.1); }
  75% {-webkit-transform: scale(0.9); transform: scale(0.9); }
}
@keyframes preview-pulse {
  25% {-webkit-transform: scale(1.1); transform: scale(1.1); }
  75% {-webkit-transform: scale(0.9); transform: scale(0.9); }
}
/* Wobble */
.Preview4 {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.Preview4:hover, .Preview4:focus, .Preview4:active {
  -webkit-animation-name: preview-wobble; animation-name: preview-wobble;
  -webkit-animation-duration: 1s; animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;
}
@-webkit-keyframes preview-wobble {
    16.65% {-webkit-transform: translateY(8px);transform: translateY(8px);}
    33.3% {-webkit-transform: translateY(-6px);transform: translateY(-6px);}
    49.95% {-webkit-transform: translateY(4px);transform: translateY(4px);}
    66.6% {-webkit-transform: translateY(-2px);transform: translateY(-2px);}
    83.25% {-webkit-transform: translateY(1px);transform: translateY(1px);}
    100% {-webkit-transform: translateY(0);transform: translateY(0);}
}
@keyframes preview-wobble {
    16.65% {-webkit-transform: translateY(8px);transform: translateY(8px);}
    33.3% {-webkit-transform: translateY(-6px);transform: translateY(-6px);}
    49.95% {-webkit-transform: translateY(4px);transform: translateY(4px);}
    66.6% {-webkit-transform: translateY(-2px);transform: translateY(-2px);}
    83.25% {-webkit-transform: translateY(1px);transform: translateY(1px);}
    100% {-webkit-transform: translateY(0);transform: translateY(0);}
}
/* Glow Border */
.Preview5 {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
  -webkit-transition-duration: 0.3s; transition-duration: 0.3s;
  -webkit-transition-property: box-shadow; transition-property: box-shadow;
}
.Preview5:hover, .Preview5:focus, .Preview5:active {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}
/* Spin */
.Preview6 {
  border-radius: 50%;
  -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out;
}
.Preview6:hover, .Preview6:focus, .Preview6:active {
  -webkit-transform: rotate(360deg); transform: rotate(360deg);
}
/* Fade */
.Preview7 {
opacity:1;
transition:opacity 1s;
}
.Preview7:hover, .Preview7:focus, .Preview7:active {
  -webkit-animation-name: preview-fade; animation-name: preview-fade;
  -webkit-animation-duration: 2s; animation-duration: 2s;
  -webkit-animation-timing-function: linear; animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;
}
/* Flash */
.Preview8 {
opacity:1;
transition:opacity 1s;
}
.Preview8:hover, .Preview8:focus, .Preview8:active {
  -webkit-animation-name: preview-fade; animation-name: preview-fade;
  -webkit-animation-duration: .5s; animation-duration: .5s;
  -webkit-animation-timing-function: linear; animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;
}
@-webkit-keyframes preview-fade {
  50%  { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes preview-fade {
  50%  { opacity: 0; }
  100% { opacity: 1; }
}
/* Fade Out */
.Preview9 {
  opacity:1;
  -webkit-transition:opacity 1s ease-in-out; transition:opacity 1s ease-in-out;
}
.Preview9:hover, .Preview9:focus, .Preview9:active {
  opacity:0;
  -webkit-transition:opacity 1s ease-in-out; transition:opacity 1s ease-in-out;
}

.DragItem {
    position: absolute;
    z-index: 9;
    cursor: move;
}
.DragItem:hover {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
    box-shadow: inset 0 0 0 1px #0000ff, 0 0 1px rgba(0, 0, 0, 0);
}
.DragImg {
}

.DragImg:hover {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
    box-shadow: inset 0 0 0 1px #00ff00, 0 0 1px rgba(0, 0, 0, 0);
}
.PreviewIcon {
    position: absolute;
    z-index: 9998;
    cursor: pointer;
    top: 3px;
    left: 3px;
}
.VideoPlayIcon {
    position: absolute;
    z-index: 9998;
    cursor: pointer;
    top: 50px;
    left: 3px;
}
.VideoStopIcon {
    position: absolute;
    z-index: 9998;
    cursor: pointer;
    top: 70px;
    left: 3px;
    display:none;
}
.Sticky{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.popupShare {
    font-family: 'Open Sans', sans-serif;
    border: 1px solid #360597;
    border-radius: 10px;
    z-index:10000;
    position:absolute;
    position:fixed;
    top:200px;
    left:200px;
    margin: 0px auto;
    opacity:1.00;
    padding:5px;
    background-color:#fff;
    background-position:center top;
    display:none;
    -webkit-box-shadow: 0px 0px 26px -6px rgba(0,0,0,0.43);
    -moz-box-shadow: 0px 0px 26px -6px rgba(0,0,0,0.43);
    box-shadow: 0px 0px 26px -6px rgba(0,0,0,0.43);
}

.popupLanguage {
    font-family: 'Open Sans', sans-serif;
    border: 1px solid #360597;
    border-radius: 10px;
    z-index:9998;
    position:absolute;
//    position:fixed;
//    top:0px;
    left:50px;
    margin: 0px auto;
    opacity:1.00;
    padding:5px;
    background-color:#fff;
    background-position:center top;
    display:none;
    -webkit-box-shadow: 0px 0px 26px -6px rgba(0,0,0,0.43);
    -moz-box-shadow: 0px 0px 26px -6px rgba(0,0,0,0.43);
    box-shadow: 0px 0px 26px -6px rgba(0,0,0,0.43);
}

.popupheading{
    font-family: 'Open Sans', sans-serif;
    font-size:1.8em;
    font-weight: 300;
    text-align: left;
    color:#522e90;
}
.popupbody{
    font-family: 'Open Sans', sans-serif;
    font-size:1.4em;
    font-weight: 300;
    text-align: left;
    color:#522e90;
    padding:10px;
}
.popupscroller{
    float:left;
    overflow:auto;
    max-height:calc(100% - 55px);
    width:100%;
}
.popupvideo {
    z-index:20;
    position:fixed;
    margin: 0px 0px 0px 0px;
    opacity:1.00;
    display:none;
}
.popup {
    font-family: 'Open Sans', sans-serif;
    border: 1px solid #360597;
    border-radius: 10px;
    z-index:9999;
    position:fixed;
    top:10%;
    left:10%;
    width: 80%;
    height: 80%;
    margin: 0px auto;
    text-align:right;
    opacity:1.00;
    padding:5px;
    padding-bottom:25px;
    background-color:#fff;
    background-position:center top;
    display:none;
    -webkit-box-shadow: 0px 0px 26px -6px rgba(0,0,0,0.43);
    -moz-box-shadow: 0px 0px 26px -6px rgba(0,0,0,0.43);
    box-shadow: 0px 0px 26px -6px rgba(0,0,0,0.43);
}
.popupshort {
    font-family: 'Open Sans', sans-serif;
    border: 1px solid #360597;
    border-radius: 10px;
    z-index:20;
    position:fixed;
    top:20%;
    left:20%;
    width: 600px;
    height: 150px;
    margin: 0px auto;
    text-align:right;
    opacity:1.00;
    padding:5px;
    background-color:#fff;
    background-position:center top;
    display:none;
    -webkit-box-shadow: 0px 0px 26px -6px rgba(0,0,0,0.43);
    -moz-box-shadow: 0px 0px 26px -6px rgba(0,0,0,0.43);
    box-shadow: 0px 0px 26px -6px rgba(0,0,0,0.43);
}
.popupabout {
    font-family: 'Open Sans', sans-serif;
    border: 1px solid #360597;
    border-radius: 10px;
    z-index:20;
    position:fixed;
    top:15%;
    left:30%;
    width: 40%;
    height: 70%;
    margin: 0px auto;
    text-align:center;
    opacity:1.00;
    padding:5px;
    background-color:#fff;
    background-position:center top;
    display:none;
    -webkit-box-shadow: 0px 0px 26px -6px rgba(0,0,0,0.43);
    -moz-box-shadow: 0px 0px 26px -6px rgba(0,0,0,0.43);
    box-shadow: 0px 0px 26px -6px rgba(0,0,0,0.43);
}
.popupsize {
    display:block;
}

@media only screen and (max-width:600px) {
    .popup {
        top:0vh;
        left:0vw;
        width: 100vw;
        height: 100vh;
    }
    .popupshort {
        top:0vh;
        left:0vw;
        width: 100vw;
        height: 100vh;
    }
    .popupabout {
        top:0vh;
        left:0vw;
        width: 100vw;
        height: 100vh;
    }
    .popupsize {
        display:none;
    }
}

.popupclose {
    font-size: 30px;
    font-weight: bold;
    line-height: 18px;
    color: #000000;
    text-shadow: 0 1px 0 #ffffff;
    opacity: 0.2;
    filter: alpha(opacity=20);
    text-decoration: none;
}
.popupclose:hover {
    color: #000000;
    text-decoration: none;
    opacity: 0.4;
    filter: alpha(opacity=40);
    cursor: pointer;
}
.popupspeaker {
    opacity: 0.4;
    filter: alpha(opacity=40);
    text-decoration: none;
}
.popupspeaker:hover {
    text-decoration: none;
    opacity: 1;
    filter: alpha(opacity=100);
    cursor: pointer;
}
a.popupbutton {
    padding: 4px 10px;
    margin-bottom: 0px;
    font-family:'Open Sans', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -moz-user-select: none;
    color: #FFF;
    background-color: #2199e8;
    border: 1px solid transparent;
    border-radius: 4px;
}
a.popupbutton:hover {
    color: #FFF;
    background-color: #1583cc;
    border-color: #1292e7;
}
.seq {
    font-family:'Open Sans', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    color: #000000;
}
.ClearDiv {
    clear:both;
}
.Voice {
    font-family: 'Open Sans', sans-serif;
    border: 1px solid #360597;
    border-radius: 10px;
    z-index:21;
    position:fixed;
    top:20%;
    left:20%;
    width: 400px;
//    height: 300px;
    margin: 0px auto;
    text-align:right;
    opacity:1.00;
    padding:5px;
    background-color:#fff;
    background-position:center top;
    display:none;
    -webkit-box-shadow: 0px 0px 26px -6px rgba(0,0,0,0.43);
    -moz-box-shadow: 0px 0px 26px -6px rgba(0,0,0,0.43);
    box-shadow: 0px 0px 26px -6px rgba(0,0,0,0.43);
}

.playTitle{
    z-index:10001;
    padding: 4px 10px;
    margin-bottom: 0px;
    font-family:'Open Sans', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    color: #FFF;
    background-color: #555;
    border: 1px solid transparent;
    position:fixed;
    top:0;
    left:0;
    width: 100%;
    opacity:1.00;
    display:none;
}
.playStory {
    display:none;
}
.DisplayNotice{
    z-index:10001;
    font-family:'Open Sans', Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    text-decoration: none;
    line-height: 1.5;
    padding:5px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    color: red;
    background-color: #fff;
    border: 2px solid red;
    position:fixed;
    top:0;
    left:200px;
    display:none;
}
.DisplayWidth{
    z-index:0;
    background-color: red;
    position:fixed;
    top:0;
    left:400px;
    width:2px;
    height:100%;
    display:none;
}