@font-face {
     font-family: 'Roboto';
     font-style: italic;
     font-weight: 400;
     font-display: swap;
     src: url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu51xIIzc.ttf) format('truetype');
}
 @font-face {
     font-family: 'Roboto';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxP.ttf) format('truetype');
}
 @font-face {
     font-family: 'Roboto';
     font-style: normal;
     font-weight: 700;
     font-display: swap;
     src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc9.ttf) format('truetype');
}
 @font-face {
     font-family: 'Roboto';
     font-style: italic;
     font-weight: 900;
     font-display: swap;
     src: url(https://fonts.gstatic.com/l/font?kit=KFOjCnqEu92Fr1Mu51TLBBc9GMPB0Q&skey=b80be3241fe40325&v=v30) format('truetype');
}
 .no-touch .touch-only{
    display:none !important
}
.touch .desktop-only{
    display:none !important
}
html{
    height:100%;
    -webkit-text-size-adjust:100%
}
body{
    margin:0;
    background-color:#ffffff;
    color:#000;
    -webkit-font-smoothing:antialiased;
    font-family:'Roboto',Helvetica,Arial,sans-serif;
    overflow-x:hidden !important;
    width:100vw
}
.app{
    overflow-x:hidden;
    overflow-y:auto
}
body[virtualscroll]{
    overflow:hidden;
    position:fixed;
    width:100%;
    height:100%
}
body.fixed-scrollbar{
    overflow-y:scroll
}
body.dark{
    background-color:#000000
}
noscript span{
    display:block;
    margin:80px 20px 0 20px
}
noscript span a{
    display:block
}
*{
    box-sizing:border-box;
    outline:none;
    -webkit-tap-highlight-color:rgba(255,255,255,0);
    -webkit-tap-highlight-color:transparent;
    scrollbar-width:thin
}
*:not(input):not(textarea){
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none
}
.pre-render{
    display:none
}
input[type=text],input[type=password],textarea{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    -webkit-user-select:text;
    -ms-user-select:text;
    user-select:text
}
label{
    cursor:pointer
}
a{
    color:inherit
}
h1,h2,h3,h4,h5,h6{
    line-height:1;
    font-weight:normal;
    margin:0
}
ul{
    list-style-type:none;
    padding:0;
    margin:0
}
section{
    display:none;
    overflow-x:hidden
}
.tag,.mention,.link{
    color:#73b3cd;
    cursor:pointer
}
.tag:hover,.mention:hover,.link:hover{
    color:#acd2e1;
    text-decoration:underline
}
ul.md-list{
    padding:0 0 0 10px;
    margin:4px 0 4px 0;
    display:inline-block !important
}
ul.md-list li{
    position:relative;
    margin:0 0 2px 0 !important;
    padding:0 !important;
    display:block !important;
    float:none !important
}
ul.md-list li:before{
    position:absolute;
    content:"\2022";
    margin:0 0 0 -10px
}
hr{
    display:block !important;
    border-bottom:none;
    border-left:none;
    border-right:none;
    border-color:inherit !important;
    opacity:.4;
    height:0px
}
h1{
    font-weight:900;
    margin:14px 0 14px 0;
    font-size:18px
}
sup{
    font-size:.75em !important
}
input[type=text],input[type=password],textarea,select{
    width:100%;
    font-size:14px;
    padding:10px 12px;
    border:0;
    margin:5px 0 15px 0;
    background-color:#f8f8f8;
    border:1px solid #cfcfcf;
    border-bottom:1px solid #cfcfcf;
    border-radius:3px;
    box-sizing:border-box;
    font-family:'Roboto',Helvetica,Arial,sans-serif;
    resize:none;
    transition:border .2s ease
}
input[type=text]:focus,input[type=password]:focus,textarea:focus,select:focus{
    border:1px solid #4092b4
}
input[type=text]:disabled,input[type=password]:disabled,textarea:disabled,select:disabled{
    background-color:#eee;
    text-shadow:1px 1px 0 #fff;
    color:#aaa
}
input[type=text]:disabled:-ms-input-placeholder,input[type=password]:disabled:-ms-input-placeholder,textarea:disabled:-ms-input-placeholder,select:disabled:-ms-input-placeholder{
    color:#555
}
input[type=text]:disabled::placeholder,input[type=password]:disabled::placeholder,textarea:disabled::placeholder,select:disabled::placeholder{
    color:#555
}
input[type=text]:-ms-input-placeholder,input[type=password]:-ms-input-placeholder,textarea:-ms-input-placeholder,select:-ms-input-placeholder{
    letter-spacing:-0.05em;
    color:#888
}
input[type=text]::placeholder,input[type=password]::placeholder,textarea::placeholder,select::placeholder{
    letter-spacing:-0.05em;
    color:#888
}
input[type=text].valid,input[type=password].valid,textarea.valid,select.valid{
    background:#f8fff9;
    color:#00550f;
    border-color:#0b2
}
input[type=text].needs-update,input[type=password].needs-update,textarea.needs-update,select.needs-update{
    background:#fffaf5;
    color:#ff8a00;
    border-color:#ff8a00
}
input[type=text].error,input[type=password].error,textarea.error,select.error{
    background:#fbdfdf;
    color:#e84a4a;
    border-color:#e84a4a
}
input[type=text].error.error:-ms-input-placeholder,input[type=password].error.error:-ms-input-placeholder,textarea.error.error:-ms-input-placeholder,select.error.error:-ms-input-placeholder{
    color:#daa
}
input[type=text].error.error::placeholder,input[type=password].error.error::placeholder,textarea.error.error::placeholder,select.error.error::placeholder{
    color:#daa
}
input[type=file],input.autofill-workaround{
    display:none
}
button,a.button,.upload-file-button{
    position:relative;
    border:0px;
    border-radius:4px;
    background:#4092b4;
    color:#fff;
    font-family:'Roboto',Helvetica,Arial,sans-serif;
    font-weight:700;
    font-size:13px;
    letter-spacing:.06em;
    cursor:pointer;
    text-transform:uppercase;
    text-decoration:none;
    height:38px;
    margin-top:16px;
    overflow:hidden
}
button svg,a.button svg,.upload-file-button svg{
    display:none;
    margin:0;
    padding:0
}
.no-touch button:hover,.no-touch a.button:hover,.no-touch .upload-file-button:hover{
    background:#4092b4;
    color:#fff
}
.no-touch button:hover svg circle,.no-touch a.button:hover svg circle,.no-touch .upload-file-button:hover svg circle{
    stroke:#fff
}
button[disabled],a.button[disabled],.upload-file-button[disabled]{
    color:#fff;
    border-color:#bbb;
    background:#86bdd4;
    cursor:default !important
}
button.busy,a.button.busy,.upload-file-button.busy{
    background:#bbb;
    color:#aaa
}
button.busy span,a.button.busy span,.upload-file-button.busy span{
    display:none
}
button.busy svg,a.button.busy svg,.upload-file-button.busy svg{
    display:inline-block
}
.no-touch button:hover,.no-touch a.button:hover,.no-touch .upload-file-button:hover{
    background-color:#3983a1
}
button:active,a.button:active,.upload-file-button:active{
    transition:background-color 20ms ease,border 10ms ease;
    background-color:#60a9c7;
    color:#fff;
    box-shadow:none
}
.upload-file-button{
    padding:1em
}
.no-touch .upload-file-button:hover{
    background-color:#60a9c7
}
.upload-file-button.needs-update{
    background-color:#ff8a00
}
.pro,.new-feature,.updated{
    text-transform:uppercase;
    position:relative;
    color:white !important;
    font-size:.8em;
    padding:.03em .2em .03em .25em;
    top:-0.1em;
    font-weight:bold;
    border-radius:.2em
}
.pro{
    background-color:#0b2
}
.new-feature,.updated{
    display:inline-block;
    background-color:#ff8a00
}
a.pro{
    text-decoration:none !important;
    border-bottom:none
}
a.pro:hover,a:hover .pro{
    background-color:#00d427
}
.nobr{
    white-space:nowrap
}
.lowercase{
    text-transform:lowercase
}
@keyframes spin{
    from{
        transform:rotateZ(0deg)
    }
    to{
        transform:rotateZ(360deg)
    }
}
@keyframes fade-in{
    from{
        opacity:0
    }
    to{
        opacity:1
    }
}
.spin,.wait{
    animation:spin .9s linear infinite
}
.ghost{
    position:fixed;
    top:0;
    left:0;
    z-index:1000000;
    width:120px;
    height:120px;
    opacity:.5;
    pointer-events:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
    margin:-60px 0 0 -60px
}
.ghost *{
    max-width:120px;
    max-height:120px
}
.default-ghost{
    width:120px;
    height:120px;
    background-color:#aaa;
    color:#333;
    font-size:12px;
    text-align:center;
    padding-top:20px
}
.sphere .css-layer{
    position:absolute;
    top:0;
    left:0
}
.sphere .css-layer>div{
    position:absolute;
    top:0;
    left:0
}
.sphere .css-layer .click-area{
    background-color:transparent;
    cursor:pointer
}
.sphere .css-layer .rounded{
    border-radius:100%
}
.debug{
    position:absolute;
    top:0;
    left:0;
    z-index:10000000000
}
.debug .info{
    display:block;
    width:320px;
    padding:10px;
    background-color:#fff;
    color:#000
}
.debug canvas{
    display:block;
    padding:10px;
    background-color:#fff;
    z-index:10000000000;
    transform-origin:0% 0%;
    max-width:320px
}
@media (min-width:768px){
    ::-webkit-scrollbar{
        width:8px
    }
    ::-webkit-scrollbar-track{
        border-radius:0px;
        background:#eee
    }
    ::-webkit-scrollbar-thumb{
        border-radius:0px;
        background:#888
    }
    ::-webkit-scrollbar-thumb:window-inactive{
        background:#888
    }
    ::-webkit-scrollbar-thumb:hover{
        background:#aaa
    }
}
@media (orientation:landscape){
    html.ios.no-ipad body[virtualscroll]{
        position:static;
        height:100vh;
        overflow:auto
    }
    html.ios.no-ipad body[virtualscroll] .app,html.ios.no-ipad body[virtualscroll] .fs{
        height:100%
    }
    html.ios.no-ipad body[virtualscroll] .ios-fs-spacer{
        position:absolute;
        top:0;
        left:0;
        overflow:hidden;
        width:100%;
        height:calc(100% + 1px);
        pointer-events:none
    }
}
.spl{
    width:24px;
    height:24px;
    background-size:192px;
    background-image:url(/img/sprites-main.png)
}
.spl.heart-stroke-black{
    background-position:-24px 0
}
.spl.heart-fill-red{
    background-position:-48px 0
}
.spl.heart-stroke-white{
    background-position:-72px 0
}
.spl.eye-black{
    background-position:-96px 0
}
.spl.eye-white{
    background-position:-120px 0
}
.spl.close-white{
    background-position:-144px 0
}
.spl.close-black{
    background-position:-168px 0
}
.spl.home{
    background-position:0 -24px
}
.spl.notif{
    background-position:-24px -24px
}
.spl.profile{
    background-position:-48px -24px
}
.spl.add{
    background-position:-72px -24px
}
.spl.heart-stroke-red{
    background-position:-96px -24px
}
.spl.search-white{
    background-position:-120px -24px
}
.spl.search{
    background-position:-144px -24px
}
.spl.search-black{
    background-position:-168px -24px
}
.spl.pencil{
    background-position:0 -48px
}
.spl.follow-white{
    background-position:-24px -48px
}
.spl.follow-green{
    background-position:-48px -48px
}
.spl.following-white{
    background-position:-72px -48px
}
.spl.following-green{
    background-position:-96px -48px
}
.spl.share,.spl.stw{
    background-position:-120px -48px
}
.spl.vr{
    background-position:-144px -48px
}
.spl.fullscreen{
    background-position:-168px -48px
}
.spl.pencil-active{
    background-position:0 -72px
}
.spl.lock{
    background-position:-24px -72px
}
.spl.save{
    background-position:-48px -72px
}
.spl.flag{
    background-position:-72px -72px
}
.spl.bin{
    background-position:-96px -72px
}
.spl.comment{
    background-position:-120px -72px
}
.spl.comment-black{
    background-position:-144px -72px
}
.spl.star{
    background-position:-168px -72px
}
.spl.follow-black{
    background-position:0 -96px
}
.spl.info{
    background-position:-24px -96px
}
.spl.tinyp{
    background-position:-48px -96px
}
.spl.sphere{
    background-position:-72px -96px
}
.spl.facebook{
    background-position:-96px -96px
}
.spl.twitter{
    background-position:-120px -96px
}
.spl.gyro{
    background-position:-144px -96px
}
.spl.reddit{
    background-position:-168px -96px
}
.spl.embed{
    background-position:0 -120px
}
.spl.link{
    background-position:-24px -120px
}
.spl.comment-green{
    background-position:-48px -120px
}
.spl.heart-fill-white{
    background-position:-72px -120px
}
.spl.collection{
    background-position:-96px -120px
}
.spl.close-red{
    background-position:-120px -120px
}
.spl.check{
    background-position:-144px -120px
}
.spl.lock-white{
    background-position:-168px -120px
}
.spl.reorder{
    background-position:0 -144px
}
.spl.rename{
    background-position:-24px -144px
}
.spl.speaker-on{
    background-position:-48px -144px
}
.spl.cog{
    background-position:-72px -144px
}
.spl.globe{
    background-position:-96px -144px
}
.spl.exit{
    background-position:-120px -144px
}
.spl.back{
    background-position:-144px -144px
}
.spl.home-blue{
    background-position:-168px -144px
}
.spl.notif-blue{
    background-position:0 -168px
}
.spl.add-blue{
    background-position:-24px -168px
}
.spl.menu{
    background-position:-48px -168px
}
.spl.globe-blue{
    background-position:-72px -168px
}
.spl.collection-dark{
    background-position:-96px -168px
}
.spl.cog-blue{
    background-position:-120px -168px
}
.spl.triple-dot{
    background-position:-144px -168px
}
.spl.grid{
    background-position:-168px -168px
}
.sps{
    width:16px;
    height:16px;
    background-size:128px;
    background-image:url(/img/sprites-main-s.png)
}
.sps.heart-stroke-black{
    background-position:-16px 0
}
.sps.heart-fill-red{
    background-position:-32px 0
}
.sps.heart-stroke-white{
    background-position:-48px 0
}
.sps.eye-black{
    background-position:-64px 0
}
.sps.eye-white{
    background-position:-80px 0
}
.sps.close-white{
    background-position:-96px 0
}
.sps.close-black{
    background-position:-112px 0
}
.sps.home{
    background-position:0 -16px
}
.sps.notif{
    background-position:-16px -16px
}
.sps.profile{
    background-position:-32px -16px
}
.sps.add{
    background-position:-48px -16px
}
.sps.heart-stroke-red{
    background-position:-64px -16px
}
.sps.search-white{
    background-position:-80px -16px
}
.sps.search{
    background-position:-96px -16px
}
.sps.search-black{
    background-position:-112px -16px
}
.sps.pencil{
    background-position:0 -32px
}
.sps.follow-white{
    background-position:-16px -32px
}
.sps.follow-green{
    background-position:-32px -32px
}
.sps.following-white{
    background-position:-48px -32px
}
.sps.following-green{
    background-position:-64px -32px
}
.sps.share,.sps.stw{
    background-position:-80px -32px
}
.sps.vr{
    background-position:-96px -32px
}
.sps.fullscreen{
    background-position:-112px -32px
}
.sps.pencil-active{
    background-position:0 -48px
}
.sps.lock{
    background-position:-16px -48px
}
.sps.save{
    background-position:-32px -48px
}
.sps.flag{
    background-position:-48px -48px
}
.sps.bin{
    background-position:-64px -48px
}
.sps.comment{
    background-position:-80px -48px
}
.sps.comment-black{
    background-position:-96px -48px
}
.sps.star{
    background-position:-112px -48px
}
.sps.follow-black{
    background-position:0 -64px
}
.sps.info{
    background-position:-16px -64px
}
.sps.tinyp{
    background-position:-32px -64px
}
.sps.sphere{
    background-position:-48px -64px
}
.sps.facebook{
    background-position:-64px -64px
}
.sps.twitter{
    background-position:-80px -64px
}
.sps.gyro{
    background-position:-96px -64px
}
.sps.reddit{
    background-position:-112px -64px
}
.sps.embed{
    background-position:0 -80px
}
.sps.link{
    background-position:-16px -80px
}
.sps.comment-green{
    background-position:-32px -80px
}
.sps.heart-fill-white{
    background-position:-48px -80px
}
.sps.collection{
    background-position:-64px -80px
}
.sps.close-red{
    background-position:-80px -80px
}
.sps.check{
    background-position:-96px -80px
}
.sps.lock-white{
    background-position:-112px -80px
}
.sps.reorder{
    background-position:0 -96px
}
.sps.rename{
    background-position:-16px -96px
}
.sps.speaker-on{
    background-position:-32px -96px
}
.sps.cog{
    background-position:-48px -96px
}
.sps.globe{
    background-position:-64px -96px
}
.sps.exit{
    background-position:-80px -96px
}
.sps.back{
    background-position:-96px -96px
}
.sps.home-blue{
    background-position:-112px -96px
}
.sps.notif-blue{
    background-position:0 -112px
}
.sps.add-blue{
    background-position:-16px -112px
}
.sps.menu{
    background-position:-32px -112px
}
.sps.globe-blue{
    background-position:-48px -112px
}
.sps.collection-dark{
    background-position:-64px -112px
}
.sps.cog-blue{
    background-position:-80px -112px
}
.sps.triple-dot{
    background-position:-96px -112px
}
.sps.grid{
    background-position:-112px -112px
}
.spsx{
    width:16px;
    height:16px;
    display:inline-block;
    vertical-align:middle;
    position:relative;
    top:-2px;
    opacity:.75;
    margin-right:4px
}
.spsx.mpi{
    background-image:url(/img/map-icons.png);
    background-size:160px
}
.spsx.mpi.arrow{
    background-position:0 0
}
.spsx.mpi.pin{
    background-position:-16px 0
}
.spsx.mpi.location{
    background-position:-32px 0
}
.spsx.mpi.search{
    background-position:-48px 0
}
.spsx.mpi.foldmap{
    background-position:-64px 0
}
.spsx.mpi.help{
    background-position:-80px 0
}
.spsx.mpi.plan{
    background-position:-96px 0
}
.spsx.mpi.trimenu{
    background-position:-112px 0
}
.spsx.mpi.direction{
    background-position:-128px 0
}
.spsx.mpi.home{
    background-position:-144px 0
}
.spsx.mpi.jump{
    background-position:0 -16px
}
.splx{
    width:24px;
    height:24px;
    display:inline-block;
    vertical-align:middle;
    position:relative;
    top:-2px;
    opacity:.75;
    margin-right:4px
}
.splx.mpi{
    background-image:url(/img/map-icons.png);
    background-size:240px
}
.splx.mpi.arrow{
    background-position:0 0
}
.splx.mpi.pin{
    background-position:-24px 0
}
.splx.mpi.location{
    background-position:-48px 0
}
.splx.mpi.search{
    background-position:-72px 0
}
.splx.mpi.foldmap{
    background-position:-96px 0
}
.splx.mpi.help{
    background-position:-120px 0
}
.splx.mpi.plan{
    background-position:-144px 0
}
.splx.mpi.trimenu{
    background-position:-168px 0
}
.splx.mpi.direction{
    background-position:-192px 0
}
.splx.mpi.home{
    background-position:-216px 0
}
.splx.mpi.jump{
    background-position:0 -24px
}
#icard{
    position:absolute;
    top:0;
    left:0;
    z-index:1005;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.66);
    font-size:13px;
    line-height:1.66;
    perspective:1500px;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:center;
    justify-content:center;
    -ms-flex-align:center;
    align-items:center
}
#icard .close-btn{
    position:fixed;
    z-index:100000;
    top:0px;
    left:0px;
    cursor:pointer;
    display:block;
    background-color:#fff;
    border:4px solid #fff
}
@media (min-width:1000px){
    #icard .close-btn{
        border:none;
        padding:6px
    }
}
#icard .close-btn span{
    display:block;
    pointer-events:none;
    padding:0
}
.no-touch #icard .close-btn:hover,#icard .close-btn:focus{
    filter:invert(1)
}
#icard article{
    display:block;
    background-color:#fff;
    overflow:hidden;
    scrollbar-width:thin;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif
}
#icard article.with-overflow{
    overflow-y:auto
}
@media (min-width:540px){
    #icard article.column .media,#icard article.column .content{
        display:block;
        float:left;
        overflow:hidden
    }
    #icard article.column .content{
        overflow-y:auto
    }
}
#icard article .media{
    background-color:transparent
}
#icard article img{
    display:block
}
#icard article iframe{
    display:block
}
#icard article .content{
    display:none;
    font-size:16px;
    margin:0;
    padding:12px
}
#icard article .content p{
    margin:0;
    line-height:1.33
}
#icard article .content p:not(:last-child){
    margin:0 0 12px 0
}
#icard article .content h3,#icard article .content b{
    font-size:1em;
    font-weight:bold;
    display:inline
}
#icard article .content a.link{
    text-decoration:none;
    color:#4092b4
}
.no-touch #icard article .content a.link:hover{
    text-decoration:underline
}
#icard article .content a.card-link{
    display:block;
    color:#4092b4;
    text-transform:none;
    font-weight:400;
    letter-spacing:.02em;
    line-height:1;
    text-align:right;
    text-decoration:none;
    padding:4px 12px 0 0;
    margin:0;
    cursor:pointer
}
#icard article .content a.card-link:after{
    position:relative;
    top:-2px;
    display:inline-block;
    content:"\2192";
    margin:0 8px 0 8px;
    transition:transform .2s ease
}
.no-touch #icard article .content a.card-link:hover:after{
    transform:translateX(6px)
}
#icard article .content p+a.card-link{
    border-top:1px solid rgba(127,127,127,0.25);
    margin:16px 0 0 0;
    padding:11px 12px 0 0
}
#icard article.in-transition{
    pointer-events:none
}
#icard-editor{
    position:absolute;
    top:0;
    left:0;
    z-index:1005;
    width:100%;
    height:100%;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:center;
    justify-content:center;
    -ms-flex-align:start;
    align-items:flex-start;
    padding-top:60px;
    background-color:rgba(0,0,0,0.66);
    font-size:13px;
    line-height:1.66;
    perspective:1500px
}
@media (min-height:750px){
    #icard-editor{
        padding-top:0;
        -ms-flex-align:center;
        align-items:center
    }
}
#icard-editor article{
    position:relative;
    overflow:hidden;
    padding:0 0 0 0;
    background-color:#fff;
    height:auto;
    width:90%;
    max-width:800px;
    -webkit-user-select:auto;
    -ms-user-select:auto;
    user-select:auto
}
@media (min-width:900px){
    #icard-editor article{
        margin-left:-280px;
        width:70%
    }
}
@media (min-width:1200px){
    #icard-editor article{
        margin-left:-320px
    }
}
#icard-editor .tabs div,#icard-editor .btns div{
    float:left;
    cursor:pointer;
    font-size:13px
}
#icard-editor .tabs{
    position:relative;
    width:100%;
    display:block;
    overflow:hidden;
    background:#fff;
    background:#ddd;
    padding:0 0 0 8px
}
#icard-editor .tabs div{
    border-bottom:none;
    border-radius:8px 8px 0 0;
    margin:8px 6px 0 0;
    padding:4px 12px 2px 10px;
    color:#888;
    background-color:#eee
}
#icard-editor .tabs div.selected{
    background-color:#fff;
    color:#000
}
#icard-editor .btns{
    position:absolute;
    top:8px;
    right:8px
}
#icard-editor .btns div{
    padding:0 6px;
    text-transform:uppercase;
    font-weight:bold
}
#icard-editor .save-btn{
    color:#0b2
}
#icard-editor .cancel-btn{
    color:#4092b4
}
#icard-editor .content-panel .media-row{
    position:relative;
    display:block
}
#icard-editor .content-panel .media{
    display:none;
    background-color:#000
}
#icard-editor .content-panel .media iframe{
    width:100%;
    height:100%;
    border:none
}
#icard-editor .content-panel .media .media-still{
    height:100%;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center
}
#icard-editor .content-panel .image-btn{
    position:absolute;
    right:0;
    margin:7px;
    width:90px;
    height:24px;
    font-weight:700;
    font-size:12px
}
#icard-editor .content-panel .image-btn:hover{
    background-color:#60a9c7 !important
}
#icard-editor .content-panel label{
    width:15%;
    float:left;
    display:block;
    padding:12px 10px 10px 0px;
    margin:0;
    line-height:1;
    color:#aaa;
    text-align:right;
    clear:both
}
@media (min-width:768px){
    #icard-editor .content-panel label{
        width:10%
    }
}
#icard-editor .content-panel input,#icard-editor .content-panel textarea{
    display:block;
    padding:10px;
    font-size:14px;
    width:85%;
    float:left;
    margin:0;
    border:none;
    background-color:#fff;
    border-radius:0;
    border-left:1px solid #ddd
}
#icard-editor .content-panel input:focus,#icard-editor .content-panel textarea:focus{
    background-color:#ffe
}
#icard-editor .content-panel input:-ms-input-placeholder,#icard-editor .content-panel textarea:-ms-input-placeholder{
    color:#bbb
}
#icard-editor .content-panel input::placeholder,#icard-editor .content-panel textarea::placeholder{
    color:#bbb
}
@media (min-width:768px){
    #icard-editor .content-panel input,#icard-editor .content-panel textarea{
        width:90%
    }
}
#icard-editor .content-panel .link-url{
    border-top:1px solid #ddd
}
#icard-editor .content-panel .link-url:before{
    display:block;
    content:'Link URL'
}
#icard-editor .content-panel .link-label,#icard-editor .content-panel .link-url{
    color:#4092b4
}
#icard-editor .content-panel textarea{
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
    height:160px
}
#icard-editor .content-panel div.note{
    display:block;
    float:left;
    width:100%;
    color:#888;
    font-size:12px;
    text-align:left;
    height:auto;
    margin:0 !important;
    padding:8px;
    line-height:1;
    background-color:#ddd
}
#icard-editor .content-panel .supported-list{
    color:#33738e;
    margin:0 0 0 3px;
    padding:0
}
#icard-editor .content-panel .supported-list:hover{
    color:#fff
}
#icard-editor .design-panel{
    display:none;
    margin:16px 0;
    overflow:auto
}
#icard-editor .design-panel>li{
    width:100%;
    float:left;
    padding:16px 8px 8px 8px
}
@media (min-width:800px){
    #icard-editor .design-panel>li{
        width:50%;
        min-height:42px
    }
}
#icard-editor .design-panel select,#icard-editor .design-panel input{
    width:120px;
    padding:2px 6px 2px 2px;
    height:24px;
    margin:0;
    display:inline-block;
    vertical-align:middle;
    font-size:12px
}
#icard-editor .design-panel select:-ms-input-placeholder,#icard-editor .design-panel input:-ms-input-placeholder{
    color:#bbb
}
#icard-editor .design-panel select::placeholder,#icard-editor .design-panel input::placeholder{
    color:#bbb
}
#icard-editor .design-panel select:focus,#icard-editor .design-panel input:focus{
    background-color:#ffe
}
#icard-editor .design-panel label{
    display:inline-block;
    width:60px;
    line-height:1;
    color:#888;
    text-align:left;
    padding-right:8px;
    vertical-align:middle;
    font-size:11px
}
@media (min-width:600px){
    #icard-editor .design-panel label{
        width:110px;
        text-align:right;
        font-size:12px
    }
}
#icard-editor .design-panel .slider{
    position:relative;
    top:6px;
    display:inline-block;
    width:200px
}
#icard-editor .design-panel .slider .base{
    background-color:#eee;
    border-radius:2px
}
#icard-editor .design-panel .slider .handle{
    background-color:#444;
    box-shadow:none
}
#icard-editor .design-panel .nm{
    width:60px;
    text-align:right
}
#icard-editor .design-panel #cd-size-custom,#icard-editor .design-panel .cd-size-px,#icard-editor .design-panel #cd-height-custom,#icard-editor .design-panel .cd-height-px{
    display:none
}
#icard-editor .design-panel .color,#icard-editor .design-panel .cd-font{
    display:inline-block;
    vertical-align:middle;
    background-color:#eee;
    width:160px;
    height:22px;
    border-radius:4px;
    border:1px double #ddd;
    cursor:pointer
}
#icard-editor .design-panel .cd-font{
    background-color:#fff;
    text-align:center;
    line-height:2;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    padding:0 6px;
    font-size:11px
}
#icard-editor .design-panel .cd-font:hover{
    background-color:#4092b4;
    color:#fff
}
#icard-editor .design-panel .cd-layout{
    position:relative;
    top:2px;
    display:inline-block;
    color:#ddd;
    margin-right:8px;
    cursor:pointer
}
#icard-editor .design-panel .cd-layout:before{
    position:relative;
    top:-1px;
    content:"";
    display:inline-block;
    vertical-align:middle;
    width:21px;
    height:21px;
    border:1px solid #ddd;
    margin-right:6px
}
#icard-editor .design-panel .cd-layout.row:after{
    position:absolute;
    left:0;
    top:10px;
    content:"";
    display:inline-block;
    width:22px;
    height:1px;
    background-color:#ddd
}
#icard-editor .design-panel .cd-layout.column:after{
    position:absolute;
    left:11px;
    top:0px;
    content:"";
    display:inline-block;
    width:1px;
    height:22px;
    background-color:#ddd
}
#icard-editor .design-panel .cd-layout:hover,#icard-editor .design-panel .cd-layout.selected{
    color:#000
}
#icard-editor .design-panel .cd-layout:hover:before,#icard-editor .design-panel .cd-layout.selected:before{
    border-color:#000
}
#icard-editor .design-panel .cd-layout:hover:after,#icard-editor .design-panel .cd-layout.selected:after{
    background-color:#000
}
.player-menu{
    position:absolute;
    z-index:1002;
    bottom:48px;
    left:0px;
    padding:0;
    display:block;
    transition:transform .2s ease
}
.player-menu .menu-items{
    display:-ms-flexbox;
    display:flex
}
.player-menu.with-thumbs{
    transform:translateY(-52px)
}
@media (min-width:768px){
    .player-menu{
        bottom:0px
    }
    .player-menu.with-thumbs{
        transform:translateY(-103px)
    }
}
.player-menu button{
    background-color:rgba(0,0,0,0.9);
    border-radius:50%;
    width:44px;
    height:44px;
    display:none;
    margin-right:6px;
    padding:10px;
    box-shadow:0 0 5px rgba(255,255,255,0.33)
}
.player-menu .splx{
    top:0px;
    display:block;
    margin:0;
    padding:0;
    opacity:1;
    pointer-events:none
}
.player-menu label{
    position:absolute;
    font-size:13px;
    display:none;
    color:#fff;
    background-color:rgba(0,0,0,0.9);
    padding:4px 4px;
    min-width:46px;
    white-space:nowrap;
    text-align:center;
    top:-12px;
    left:0;
    bottom:auto
}
.player-menu button:hover{
    background-color:#fff;
    box-shadow:none
}
.player-menu button:hover .splx{
    filter:invert(1)
}
.theme-white .player-menu button{
    background-color:#fff;
    box-shadow:0 0 5px rgba(0,0,0,0.25)
}
.theme-white .player-menu .splx{
    filter:invert(1)
}
.theme-white .player-menu label{
    color:rgba(0,0,0,0.9);
    background-color:#fff
}
.player-menu .expand-list ul{
    position:absolute;
    bottom:54px;
    left:6px;
    width:160px;
    color:#fff;
    font-size:13px;
    font-weight:400;
    display:none;
    padding:8px;
    margin:0;
    background-color:rgba(0,0,0,0.9);
    max-height:75vh;
    overflow:auto
}
.player-menu .expand-list ul.deep{
    border-left:1px solid rgba(255,255,255,0.25)
}
.theme-white .player-menu .expand-list ul{
    background-color:#fff;
    color:#000
}
.player-menu .expand-list ul li{
    padding:14px 16px;
    cursor:pointer
}
.player-menu .expand-list ul li.only-label{
    pointer-events:none;
    opacity:.5
}
.player-menu .expand-list ul li.sub:after{
    display:block;
    float:right;
    content:'';
    width:0;
    height:0;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-left:7px solid #fff;
    margin-top:3px
}
.no-touch .player-menu .expand-list ul li:hover{
    background-color:#222
}
.theme-white .player-menu .expand-list ul li:hover{
    background-color:#eee
}
@media (min-width:768px){
    .player-menu .expand-list ul{
        margin-left:0;
        width:160px;
        padding:0;
        max-height:400px
    }
    .player-menu .expand-list ul li{
        padding:12px 10px
    }
}
@media (min-height:450px){
    .player-menu .expand-list ul{
        max-height:340px
    }
}
.map-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1003;
    padding:0;
    display:none;
    background-color:rgba(0,0,0,0.8);
    pointer-events:all !important
}
.map-overlay .close{
    position:absolute;
    z-index:2;
    top:6px;
    right:6px;
    margin:0;
    background-color:#000;
    box-shadow:rgba(0,0,0,0.3) 0 1px 4px -1px;
    border-radius:2px;
    width:32px;
    height:32px;
    cursor:pointer
}
.map-overlay .close span{
    position:absolute;
    top:7px;
    left:7px;
    display:block;
    width:16px;
    height:16px;
    margin:0;
    padding:0;
    text-indent:0;
    filter:invert(1)
}
.no-touch .map-overlay .close:hover{
    background-color:#ddd
}
.map-overlay .map-box{
    position:absolute;
    z-index:1;
    width:100%;
    height:100%
}
.map-overlay .map-wrapper{
    position:relative;
    width:100%;
    height:100%;
    pointer-events:all !important
}
.theme-white .map-overlay{
    background-color:rgba(255,255,255,0.95)
}
@media (min-width:768px){
    .map-overlay{
        -ms-flex-pack:center;
        justify-content:center;
        -ms-flex-align:center;
        align-items:center
    }
    .map-overlay .map-box{
        width:75%;
        height:75%;
        padding-right:280px
    }
    .map-overlay .close{
        margin-right:280px
    }
    .theme-white .map-overlay .map-box{
        border:1px solid #bbb;
        box-shadow:0 0 20px rgba(0,0,0,0.25)
    }
}
@media (min-width:1200px){
    .map-overlay .map-box{
        padding-right:320px
    }
    .map-overlay .close{
        margin-right:320px
    }
}
.embed .map-overlay .map-box{
    padding-right:0px !important
}
.embed .map-overlay .close{
    margin-right:0px !important
}
#accesibility{
    position:absolute;
    bottom:0;
    left:0;
    width:100%
}
#accesibility p,#accesibility a,#accesibility span{
    position:absolute;
    display:block;
    z-index:10000;
    bottom:-100px;
    left:10000px;
    width:100%;
    font-size:13px;
    padding:12px;
    text-align:center;
    margin:0;
    background-color:#222
}
#accesibility p{
    color:#fff
}
#accesibility a{
    color:#4092b4
}
#accesibility p:focus,#accesibility a:focus,#accesibility span:focus{
    bottom:0px;
    left:0px
}
#accesibility p:focus,#accesibility span:focus{
    opacity:0
}
html{
    overflow:hidden;
    width:100%;
    height:100%;
    background-color:#000
}
body{
    position:absolute;
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    overflow:hidden;
    background-color:#000
}
body.theme-white{
    background-color:#fff
}
.dev:before{
    position:fixed;
    top:0;
    left:50%;
    z-index:1000;
    width:100px;
    margin-left:-50px;
    padding:2px 0;
    content:"BETA";
    background-color:#b20;
    color:#fff;
    text-align:center;
    font-size:12px;
    font-weight:bold
}
.templates{
    display:none
}
.sphere{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:0;
    display:none
}
.sphere canvas{
    cursor:grab;
    transform-origin:0 0;
    max-width:100%;
    max-height:100%;
    background-color:#000
}
.sphere .grab{
    cursor:grab
}
.sphere .grabbing{
    cursor:grabbing
}
.sphere .pointer{
    cursor:pointer !important
}
.contact-card{
    position:absolute;
    top:0;
    left:0;
    z-index:1000;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:start;
    align-items:flex-start;
    max-height:100%;
    padding-top:0px
}
.contact-card.lowered{
    padding-top:34px
}
@media (min-width:420px){
    .contact-card{
        transition:background-color 200ms ease
    }
}
.contact-card .card-hide{
    position:absolute;
    right:0;
    bottom:0;
    display:block;
    width:24px;
    height:24px;
    margin:4px 0px 0px 12px;
    transform:rotate(90deg);
    cursor:pointer
}
@media (min-width:420px){
    .contact-card .card-hide{
        transform:none;
        bottom:auto
    }
}
.contact-card .card-hide svg{
    position:relative;
    top:2px;
    left:2px
}
.contact-card .card-hide:hover{
    opacity:1
}
.contact-card .address-block{
    color:#ffffff;
    display:none;
    float:left;
    margin:0 28px 0px 6px
}
@media (min-width:420px){
    .contact-card .address-block{
        transition:transform 200ms ease
    }
}
.contact-card address{
    display:block;
    float:left;
    font-style:normal;
    font-size:13px;
    line-height:1.4;
    padding:6px 0;
    max-width:140px;
    max-height:200px;
    overflow:auto
}
.contact-card address a,.contact-card address .link{
    color:#4092b4;
    text-decoration:none
}
.contact-card address a:hover{
    text-decoration:underline
}
@media (min-width:300px){
    .contact-card address{
        max-width:180px
    }
}
@media (min-width:420px){
    .contact-card address{
        transition:opacity 190ms ease-out 100ms
    }
}
@media (min-width:560px){
    .contact-card address{
        max-width:240px
    }
}
.contact-card button.leadcap{
    background-color:#0b2;
    padding:4px 12px 3px 12px;
    margin:4px 0 4px 0;
    height:auto;
    font-size:12px
}
.contact-card button.leadcap:hover{
    background-color:#00a21d
}
.contact-card.with-address{
    background-color:rgba(0,0,0,0.9)
}
.contact-card.with-address .address-block{
    display:block
}
.contact-card.hidden-address{
    background-color:transparent
}
.contact-card.hidden-address .address-block{
    transform:translateX(-100%)
}
.contact-card.hidden-address .address-block address{
    opacity:0
}
@media (min-width:420px){
    .contact-card.hidden-address .address-block address{
        transition:opacity 20ms ease-in
    }
}
.contact-card.hidden-address.lowered .link-back{
    margin-top:-34px
}
.contact-card.hidden-address.lowered .card-hide{
    margin-top:-30px
}
.contact-card.hidden-address .card-hide{
    transform:scaleX(-1) translateX(-30px) rotate(-90deg);
    margin-top:4px;
    background-color:rgba(0,0,0,0.9);
    border-radius:50%;
    bottom:auto
}
@media (min-width:420px){
    .contact-card.hidden-address .card-hide{
        margin-top:4px;
        transform:scaleX(-1) translateX(-19px)
    }
}
.contact-card.hidden-full{
    background-color:transparent
}
.contact-card.hidden-full .address-block{
    visibility:hidden
}
.theme-white .contact-card.with-address{
    background-color:#fff
}
.theme-white .contact-card.hidden-address,.theme-white .contact-card.hidden-full{
    background-color:transparent
}
.theme-white .contact-card.hidden-address .card-hide,.theme-white .contact-card.hidden-full .card-hide{
    background-color:#fff
}
.theme-white .contact-card .address-block{
    color:#000000
}
.theme-white .contact-card a,.theme-white .contact-card .link{
    color:#33738e
}
.link-back{
    display:none;
    width:70px;
    float:left;
    margin:0;
    -ms-flex-item-align:start;
    align-self:flex-start;
    max-width:80px;
    min-width:60px
}
.link-back img{
    width:100%;
    height:auto;
    display:block;
    margin:4px 0 0 4px
}
.link-back.kuula-logo{
    margin:0px 4px 0px 0px
}
.link-back:hover{
    opacity:1 !important
}
.link-back:focus{
    outline:1px dashed #000
}
.link-back:not([href]){
    cursor:default
}
@media (min-width:560px){
    .link-back{
        max-width:none
    }
}
.image{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    pointer-events:none;
    opacity:.25 !important
}
@media (min-width:640px){
    .image{
        opacity:.35 !important
    }
}
@media (min-width:961px){
    .image{
        filter:blur(8px);
        width:105%;
        height:105%;
        top:-2.5%;
        left:-2.5%;
        opacity:.66 !important
    }
}
.poster{
    cursor:pointer
}
.title-screen{
    position:absolute;
    width:100%;
    height:100%;
    display:none;
    -ms-flex-direction:column;
    flex-direction:column;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-pack:center;
    justify-content:center
}
.title-screen .desc-container{
    max-height:20vh;
    max-height:200px;
    max-width:80%;
    left:10%;
    overflow:auto
}
.title-screen h1,.title-screen h2,.title-screen h3,.title-screen h4{
    color:#fff;
    line-height:1.33;
    margin:12px;
    -ms-flex-positive:0;
    flex-grow:0
}
.theme-white .title-screen h1,.theme-white .title-screen h2,.theme-white .title-screen h3,.theme-white .title-screen h4{
    color:#000
}
.title-screen h1,.title-screen h3,.title-screen h4{
    text-align:center;
    text-shadow:1px 1px 0 rgba(0,0,0,0.2)
}
.theme-white .title-screen h1,.theme-white .title-screen h3,.theme-white .title-screen h4{
    text-shadow:1px 1px 0 rgba(255,255,255,0.2)
}
.title-screen a{
    color:#60a9c7
}
.theme-white .title-screen a{
    color:#1f4656
}
@media (min-width:620px){
    .title-screen .desc-container{
        left:auto;
        max-width:600px
    }
}
.title-screen h1{
    font-size:14px;
    font-weight:400
}
.title-screen.col h1{
    font-size:17px;
    font-weight:700
}
.title-screen h2,.title-screen h3{
    font-size:13px
}
.title-screen h3{
    margin-top:8px
}
.title-screen h4{
    font-size:13px;
    color:#fff;
    display:none;
    margin-top:0px
}
.title-screen h4 a{
    color:inherit;
    text-decoration:none;
    opacity:.5
}
.title-screen h4 img{
    height:20px;
    display:inline-block;
    vertical-align:middle;
    margin-left:2px;
    position:relative;
    top:-2px
}
.title-screen h4 a:hover{
    opacity:1
}
.title-screen a{
    text-decoration:none
}
@media (min-width:640px){
    .title-screen h1{
        font-size:18px
    }
    .title-screen.col h1{
        font-size:22px
    }
    .title-screen h2,.title-screen h3{
        font-size:15px
    }
}
.play-button{
    position:relative;
    width:60px;
    height:60px;
    margin:12px 0 12px 0;
    border-radius:50%;
    cursor:pointer;
    transition:transform .2s ease;
    -ms-flex-negative:0;
    flex-shrink:0;
    border:3px solid rgba(255,255,255,0.4);
    background-color:rgba(0,0,0,0.6);
    color:#fff;
    display:block
}
@media (min-width:640px){
    .play-button{
        width:80px;
        height:80px;
        margin:16px 0 16px 0
    }
}
.play-button span{
    position:relative;
    top:50%;
    left:50%;
    margin:-15px 0 0 -8px;
    display:block;
    width:0;
    height:0;
    border-top:15px solid transparent;
    border-bottom:15px solid transparent;
    border-left:20px solid #fff
}
@media (min-width:640px){
    .play-button span{
        margin:-20px 0 0 -12px;
        border-top:20px solid transparent;
        border-bottom:20px solid transparent;
        border-left:30px solid #fff
    }
}
.over-embed .play-button{
    background-color:#fff;
    color:#000;
    border:3px solid rgba(255,255,255,0);
    transform:scaleX(1.1) scaleY(1.1)
}
.over-embed .play-button span{
    border-left-color:#000
}
.info{
    position:absolute;
    z-index:1003;
    left:0;
    top:0;
    width:100%;
    height:100%;
    padding:20px 20px;
    pointer-events:all;
    cursor:default;
    -webkit-font-smoothing:subpixel-antialiased;
    overflow-y:auto;
    display:none;
    background-color:rgba(0,0,0,0.98)
}
.info .close{
    position:absolute;
    top:8px;
    right:8px;
    display:block;
    cursor:pointer
}
.info .close:hover{
    opacity:.5
}
.info .user,.info .desc{
    font-family:'Roboto',Helvetica,Arial,sans-serif;
    display:inline-block;
    text-decoration:none;
    font-size:14px
}
.info .user{
    position:relative;
    display:inline-block;
    margin:10px 0 12px 0;
    color:#888
}
.info .user .icon{
    width:24px;
    height:24px;
    border-radius:12px;
    margin:0 8px 0 4px;
    display:inline-block;
    vertical-align:middle;
    background-size:cover;
    text-align:center;
    line-height:24px;
    font-size:12px
}
.info .user .name{
    display:inline-block;
    vertical-align:middle;
    font-weight:400;
    margin:0
}
.info .user[href] .name{
    color:#4092b4
}
.info .user[href]:hover .name{
    color:#86bdd4
}
.info .desc{
    font-weight:400;
    width:auto;
    max-width:640px;
    display:block;
    margin:2px 0 0 4px;
    color:#ddd
}
.info .desc h2,.info .desc p{
    font-size:inherit;
    line-height:1.5
}
.info .desc h3{
    font-weight:bold;
    color:#aaa;
    display:inline
}
.info .desc p{
    margin:0
}
.info .desc p,.info .desc h4{
    white-space:pre-wrap
}
.info .desc p.postdesc{
    border-bottom:1px dashed rgba(255,255,255,0.2);
    padding-bottom:16px;
    margin-bottom:16px
}
.theme-white .info .desc p.postdesc{
    border-bottom:1px dashed rgba(0,0,0,0.2)
}
.info .desc a{
    text-decoration:none;
    color:#4092b4
}
.no-touch .info .desc a:hover{
    text-decoration:underline
}
.info .desc .locbtn{
    margin:4px 0 12px -8px;
    display:inline-block;
    white-space:normal;
    cursor:pointer;
    padding:4px 8px 4px 6px;
    border-radius:4px
}
.info .desc .locbtn:hover{
    background-color:#4092b4;
    color:#fff
}
.info .desc .locbtn:hover span{
    opacity:1
}
.info .desc .model{
    margin-top:8px;
    display:block;
    font-style:italic;
    opacity:.66
}
.theme-white .info{
    background-color:rgba(255,255,255,0.98)
}
.theme-white .info .close{
    filter:invert(1)
}
.theme-white .info .desc,.theme-white .info .user{
    color:#222
}
@media (min-width:400px){
    .info .desc,.info .user{
        font-size:15px
    }
}
.buttons{
    position:absolute;
    top:0px;
    right:0px;
    margin:0px;
    padding:0px;
    z-index:1001;
    cursor:pointer;
    opacity:1;
    background-color:rgba(0,0,0,0.9)
}
.buttons.with-card{
    border-left:1px solid rgba(255,255,255,0.5);
    border-bottom:1px solid rgba(255,255,255,0.5)
}
@media (min-width:420px){
    .buttons{
        border:none !important
    }
}
.buttons div{
    float:left;
    display:none;
    margin:7px
}
.no-touch .buttons div{
    margin:4px
}
.buttons .info-btn{
    color:#fff;
    height:24px;
    line-height:24px;
    font-weight:700;
    font-size:13px;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
    display:none
}
.no-touch .buttons div:hover,.buttons div:focus{
    opacity:.75
}
.buttons .apl-progress{
    display:block;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    margin:0 !important;
    height:3px;
    background-color:#fff;
    transform-origin:0 0;
    transform:scaleX(0) translateZ(0)
}
.buttons .apl{
    display:none;
    width:20px;
    height:24px
}
.buttons .apl .play{
    position:relative;
    top:4px;
    left:4px;
    display:none;
    width:0;
    height:0;
    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
    border-left:12px solid #fff
}
.buttons .apl .pause{
    position:relative;
    display:block;
    background-color:transparent;
    width:24px;
    height:24px
}
.buttons .apl .pause:after,.buttons .apl .pause:before{
    content:"";
    position:absolute;
    top:4px;
    display:block;
    width:4px;
    height:16px;
    background-color:#fff
}
.buttons .apl .pause:after{
    left:4px
}
.buttons .apl .pause:before{
    left:11px
}
.theme-white .buttons{
    background-color:#fff
}
.theme-white .buttons .info-btn{
    text-shadow:none;
    color:#000
}
.theme-white .buttons div:not(.info-btn){
    filter:invert(1)
}
.no-touch .theme-white .buttons div:hover{
    opacity:.5
}
.theme-white .buttons .apl-progress{
    background-color:#fff;
    border-bottom:1px solid #fff
}
.dots{
    position:absolute;
    z-index:1000;
    overflow:auto;
    bottom:0;
    left:0;
    width:100%;
    text-align:center;
    display:none;
    background:rgba(0,0,0,0.4);
    background:linear-gradient(to bottom, rgba(0,0,0,0) 5%, rgba(0,0,0,0.4) 95%)
}
.dots li{
    position:relative;
    margin:0 0px 3px 0px;
    width:26px;
    height:40px;
    cursor:pointer;
    display:none
}
.dots li:after{
    position:absolute;
    top:26px;
    left:6px;
    display:block;
    content:'';
    width:10px;
    height:10px;
    border-radius:10px;
    background-color:rgba(255,255,255,0.5)
}
.dots li.selected:after,.dots li:hover:after{
    background-color:#fff
}
@media (min-width:320px){
    .dots li{
        display:inline-block
    }
}
@media (min-width:768px){
    .dots li{
        margin:0 0px 12px 0px
    }
}
.thumbs{
    position:absolute;
    z-index:1000;
    bottom:0;
    left:0;
    padding:0 0 0 0;
    width:100%;
    height:103px;
    overflow:visible;
    background-color:rgba(0,0,0,0.9);
    display:none
}
.thumbs:before,.thumbs:after{
    position:absolute;
    z-index:10;
    top:0;
    content:'';
    height:100%;
    width:80px;
    pointer-events:none
}
.thumbs .next-thumb svg{
    transform:rotate(0deg) translateY(-8px)
}
.thumbs .prev-thumb{
    right:0
}
.thumbs .prev-thumb svg{
    transform:rotate(180deg) translateY(8px)
}
.thumbs .next-thumb,.thumbs .prev-thumb{
    position:absolute;
    display:block;
    z-index:1000;
    background-color:rgba(0,0,0,0.8);
    width:20px;
    height:100%
}
.thumbs .next-thumb svg,.thumbs .prev-thumb svg{
    top:40%;
    left:0
}
.thumbs .thumb-list li{
    position:relative;
    float:left;
    margin:6px 2px 0px 4px;
    width:75px;
    height:75px;
    overflow:hidden;
    cursor:pointer;
    background-color:rgba(255,255,255,0.15)
}
.thumbs .thumb-list li:after{
    position:absolute;
    top:0;
    left:0;
    z-index:1000;
    content:"";
    display:none;
    width:69px;
    height:69px;
    border:3px solid #fff;
    pointer-events:none
}
.thumbs .thumb-list li.selected{
    cursor:default
}
.thumbs .thumb-list li.selected:after{
    display:block
}
.thumbs .thumb-list li:not(.selected):hover:after{
    display:block;
    width:73px;
    height:73px;
    border:1px solid #fff
}
.thumbs img{
    position:relative;
    width:100%;
    height:100%;
    display:block
}
.thumbs .thumbs-hide,.thumbs .thumbs-show,.thumbs .thumbs-move{
    position:absolute;
    left:50%;
    padding:0;
    cursor:pointer;
    opacity:.8
}
.thumbs .thumbs-hide:hover,.thumbs .thumbs-show:hover,.thumbs .thumbs-move:hover{
    opacity:1
}
.thumbs .thumbs-show{
    top:-20px;
    margin-left:-10px;
    transform:rotate(90deg)
}
.thumbs .thumbs-hide{
    bottom:2px;
    margin-left:-10px;
    transform:rotate(-90deg)
}
.thumbs .num{
    position:absolute;
    z-index:20;
    bottom:4px;
    left:6px;
    color:rgba(255,255,255,0.75);
    letter-spacing:.05em;
    font-size:12px;
    font-weight:700;
    display:inline-block
}
.thumbs .desc{
    position:absolute;
    z-index:1001;
    bottom:110px;
    left:0;
    color:rgba(255,255,255,0.75);
    letter-spacing:.05em;
    font-size:12px;
    font-weight:normal;
    display:inline-block;
    text-align:center;
    background-color:#111;
    padding:8px;
    border-radius:4px;
    box-shadow:0 0 4px rgba(0,0,0,0.3);
    opacity:0;
    transition:opacity .2s ease;
    max-width:160px;
    pointer-events:none
}
.thumbs .desc .desc-text{
    position:relative;
    line-height:1.2em
}
.thumbs .desc:before{
    content:'';
    position:absolute;
    background-color:#111;
    width:8px;
    height:8px;
    bottom:-4px;
    left:50%;
    margin-left:-4px;
    transform:rotate(45deg)
}
.theme-white .thumbs{
    background-color:#fff
}
.theme-white .thumbs .next-thumb,.theme-white .thumbs .prev-thumb{
    background-color:rgba(255,255,255,0.8)
}
.theme-white .thumbs .num{
    color:rgba(0,0,0,0.9)
}
.theme-white .thumbs .desc,.theme-white .thumbs .desc:before{
    background-color:#fff;
    color:rgba(0,0,0,0.9)
}
.theme-white .thumbs .thumb-list li{
    background-color:transparent;
    box-shadow:0 0 4px rgba(0,0,0,0.5)
}
.theme-white .thumbs .thumb-list li:after{
    width:67px;
    height:67px;
    border:4px solid rgba(0,0,0,0.9)
}
.theme-white .thumbs .thumb-list li:not(.selected):hover:after{
    width:69px;
    height:69px;
    border:3px solid rgba(0,0,0,0.9)
}
.next,.prev{
    position:absolute;
    z-index:1000;
    top:50%;
    width:40px;
    height:40px;
    margin:-20px 6px 0 6px;
    cursor:pointer;
    display:none;
    background-color:rgba(0,0,0,0.9);
    border-radius:40px
}
.next path,.prev path{
    fill:#fff
}
.next:hover,.prev:hover{
    background-color:#fff
}
.next:hover path,.prev:hover path{
    fill:rgba(0,0,0,0.9)
}
.prev{
    left:0
}
.next{
    right:0
}
@media (min-width:768px){
    .photo{
        background-size:cover
    }
}
.preloader{
    display:none;
    position:absolute;
    left:50%;
    top:50%;
    width:100%
}
.preloader .spin{
    position:absolute;
    z-index:10;
    width:40px;
    height:40px;
    border-radius:50%;
    margin:-20px 0 0 -20px;
    background-color:rgba(0,0,0,0.8)
}
.preloader .spin circle{
    stroke:#fff
}
.preloader .s2{
    display:none
}
.preloader.vr .s1{
    left:-25%
}
.preloader.vr .s2{
    display:block;
    left:25%
}
@media (orientation:portrait){
    .preloader.vr .s1,.preloader.vr .s2{
        display:none
    }
}
.curtain{
    position:absolute;
    z-index:10;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color:#000;
    opacity:0;
    pointer-events:none;
    transition:opacity .1s ease
}
.curtain.opaque{
    opacity:1;
    transition:opacity .4s ease
}
.inst{
    position:absolute;
    bottom:0px;
    left:0;
    width:100%;
    text-align:center;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
    cursor:default;
    display:none;
    pointer-events:none;
    margin:0;
    padding:0;
    opacity:0
}
.inst.col-thumbs{
    bottom:160px
}
.inst.col-no-thumbs{
    bottom:58px
}
.inst div{
    display:inline-block;
    font-size:12px;
    text-transform:uppercase;
    font-weight:900;
    color:#fff;
    background-color:rgba(0,0,0,0.5);
    padding:8px 12px;
    width:auto;
    text-align:center;
    margin:0
}
.theme-white .inst div{
    color:#000;
    background-color:rgba(255,255,255,0.8)
}
@media (min-width:512px){
    .inst.col-thumbs{
        bottom:110px
    }
    .inst.col-no-thumbs{
        bottom:20px
    }
}
.vr-rotate-info{
    position:absolute;
    top:0;
    left:0;
    background-color:#000;
    color:#999;
    font-size:14px;
    width:100%;
    height:100%;
    line-height:1.5;
    padding:0 32px;
    text-align:center;
    display:none
}
.vr-rotate-info p{
    display:-ms-flexbox;
    display:flex;
    -ms-flex-direction:column;
    flex-direction:column;
    width:100%;
    height:100%;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-pack:center;
    justify-content:center
}
.vr-rotate-info button{
    display:block;
    background-color:#222;
    padding:8px;
    height:auto
}
.vr-rotate-info .startvr{
    display:none
}
.vr-rotate-info.start{
    visibility:visible !important
}
.vr-rotate-info.start .generic{
    display:none
}
.vr-rotate-info.start .startvr{
    display:-ms-flexbox;
    display:flex
}
.notification{
    position:absolute;
    top:20px;
    left:50%;
    width:260px;
    margin-left:-130px;
    background-color:#0b2;
    color:#fff;
    text-align:center;
    font-size:13px;
    padding:6px;
    border-radius:6px;
    display:none;
    box-shadow:1px 1px 5px rgba(0,0,0,0.25)
}
.theme-white svg path#shape{
    fill:rgba(0,0,0,0.9)
}
.theme-white svg path#shadow{
    fill:#fff
}