/* dpf-css rev 6 — Don't Panic Films site stylesheet: the ORIGINAL this.css (still live at
   dontpaniciceland.com/_css/this.css) ported faithfully. Adaptations, and only these:
   - url('../_images/…') → url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/…') — the importer replaces https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site with the network's
     published-media base (CDN in prod, /public locally) at save time.
   - #content.about (page class) → #content[data-page='about'] — the shell carries the page key as a
     data-page attribute that partial navigation keeps updated (data-slot-attr).
   - The landing (template-less root) rules move from the legacy index's inline style to classes
     (.landing/.landing-watch/.landing-enter), since sanitized page content cannot carry ids.
   - #nav.collapsed (mobile burger, legacy JS) → #nav.filter via the site runtime's data-list-filter toggle.
   - The legacy vo-modal skin is replaced by the site runtime's mn-modal (+ cart/notice/order variants).
   The 45s #background-2/#background-3 cross-fade is UNCHANGED pure CSS — the layers live in the shell, so
   partial navigation never restarts the cycle. */

html,body{margin:0;padding:0;height:100%;width:100%}
body{background-size:cover;background-repeat:no-repeat;background-position:center;background-attachment:fixed;display:table;color:#fff;font-size:13px;
font-family: 'Gotham A', 'Gotham B', Arial, Helvetica, sans-serif; font-weight: 300; font-style: normal;}
a{color:#fff}
a:hover{text-decoration:underline;color:#ddd}


.ib{display:inline-block}
.tac{text-align:center}

.b {font-weight:700}
.i{font-style:italic}
.f11 {font-size:11px}
.f16 {font-size:16px}
table td {padding:10px 0 0;vertical-align:top}
.pr {padding-right:75px}
.caps{text-transform:uppercase}

iframe{display:block;}
blockquote{margin:0 40px;font-style:italic}
h1{margin:8px 0 4px;padding:0}
h2{margin:4px 0;padding:0;font-weight:inherit}

a.feature{text-transform:uppercase;color:#6592a2;text-decoration:none;text-shadow:none;font-size:18px;padding:12px 26px;display:inline-block;background-color:rgba(0, 0, 0,.5);cursor:pointer}
a.feature:hover{text-decoration:underline;color:#6592a2}

#container{height:100%;width:100%}
#nav{display:flex;position:fixed;bottom:7%;right:0;z-index:97;min-width:70%;transform: rotate(-2deg);-webkit-transform:rotate(-2deg);-ms-transform:rotate(-2deg);width:calc(100% - 500px)}
#nav a{flex:1;width:14%;display:inline-block;text-align:center;color:#fff;font-size:18px;padding:5px 0;text-transform:uppercase;text-decoration:none}
#nav a:hover{text-decoration:underline}
#nav_border{position:fixed;bottom:calc(7% + 35px);right:0;z-index:97;background-color:rgba(255,255,255,.25);transform: rotate(-2deg);-webkit-transform:rotate(-2deg);-ms-transform:rotate(-2deg);width:calc(100% - 150px);min-width:85%;height:20px;max-height:6%}

#logo{position:fixed;bottom:0px;left:0px;z-index:98;width:543px;height:259px;max-width:30%;max-height:30%;background-size:100% auto;background-repeat:no-repeat;background-position:center;background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/dpf.png')}
#content{top:30px;z-index:99;position:fixed;right:0;width:900px;min-width:calc(52% + 55px);max-width:100%;height:calc(100% - 210px);text-shadow:0 0 20px #000;background-repeat:no-repeat}
#content[data-page='about']{background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/h-about.png')}
#content[data-page='contact']{background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/h-contact.png')}
#content[data-page='news']{background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/h-news.png')}
#content[data-page='store']{background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/h-store.png')}
#content[data-page='workshops']{background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/h-workshops.png')}
#content[data-page='tv']{background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/h-dptv.png')}
#content[data-page='video']{background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/h-film.png')}


#leftnav,#main{display:inline-block;vertical-align:top}
#leftnav{width:205px;z-index:99;}
#main{overflow:auto;width:calc(100% - 225px);height:100%;padding:0 10px;z-index:99;}
/* The empty interior home (the original .home rules): no leftnav — the screen is purely the shell. */
#content[data-page='home'] #leftnav{display:none}

#background-2,#background-3{background-size:cover;background-repeat:no-repeat;background-position:center;background-attachment:fixed;position:fixed;top:0;left:0;width:100%;height:100%}
#background-2{z-index:1;
   -moz-animation: background2-fade ease-in 45s infinite;
   -webkit-animation: background2-fade ease-in 45s infinite;
   animation: background2-fade ease-in 45s infinite;
}
#background-3{z-index:2;
   -moz-animation: background3-fade ease-in 45s infinite;
   -webkit-animation: background3-fade ease-in 45s infinite;
   animation: background3-fade ease-in 45s infinite;
}

@-webkit-keyframes background2-fade {
    0%{opacity:0}
    26.67%{opacity:0}
    33.33%{opacity:1}
    66.67%{opacity:1}
    73.33%{opacity:0}
    100%{opacity:0}
}
@keyframes background2-fade {
    0%{opacity:0}
    26.67%{opacity:0}
    33.33%{opacity:1}
    66.67%{opacity:1}
    73.33%{opacity:0}
    100%{opacity:0}
}
@-webkit-keyframes background3-fade {
    0%{opacity:0}
    60%{opacity:0}
    66.67%{opacity:1}
    93.33%{opacity:1}
    100%{opacity:0}
}
@keyframes background3-fade {
    0%{opacity:0}
    60%{opacity:0}
    66.67%{opacity:1}
    93.33%{opacity:1}
    100%{opacity:0}
}


.store-wheres{padding-left:190px;min-height:250px;background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/wheres-the-snow-small.jpg');background-repeat:no-repeat}
#contact-table {max-width:850px;display:table}
#contact-table .cell {display:table-cell}

.dptv-tile{padding-left:120px;background-repeat:no-repeat;margin-top:30px;min-height:75px}
.dptv-tile:hover{cursor:pointer;text-decoration:underline}
.dptv-tile.agent-fresco{background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/tv/DontPanicTV-AgentFresco.jpg')}
.dptv-tile.mammut{background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/tv/DontPanicTV-Mammut.jpg')}
.dptv-tile.dr-draw{background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/tv/DontPanicTV-DrDraw.jpg')}


.thumbnail{display:inline-block;width:207px;vertical-align:top;margin-bottom:15px;padding-right:15px}
.thumbnail:hover{cursor:pointer;text-decoration:underline;line-break:strict}

/* Video/TV tiles: tagline and director credit are OPTIONAL in the source data — an absent one is simply an
   empty element (no template conditionals on this platform), hidden here rather than left as a blank line. */
.tagline:empty{display:none}
.director:empty{display:none}
.director:empty + .director-break{display:none}
.thumbnail img{width:100%;display:block}

/* News: the share date renders as card chrome (the body carries no date text). */
.news-item{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.15);line-height:1.6}
.news-item time{display:block;color:#9d9c91;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}

/* ── The landing (template-less root page): the legacy index's inline styles, class-adapted. */
.landing{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0a0506;background-repeat:no-repeat;background-size:contain;background-position:center top;background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/blafjall/bg1922x1080.jpg')}
.landing-links{position:fixed;bottom:20vh;right:0;display:flex;flex-direction:column;align-items:flex-end}
.landing-watch{height:10vh;width:20vw;background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/blafjall/watch-it-now.png');background-position:60% center;background-size:contain;background-repeat:no-repeat;cursor:pointer}
.landing-watch:hover{background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/blafjall/watch-it-now-hover.png')}
.landing-enter{height:12vh;width:25vw;background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/blafjall/enter-website.png');background-position:60% center;background-size:contain;background-repeat:no-repeat;cursor:pointer}
.landing-enter:hover{background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/blafjall/enter-website-hover.png')}
@media (min-width: 2136px), (min-height:1200px) {
.landing{background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/blafjall/bg3026x1700.jpg')}
}
@media (min-width: 1922px), (min-height:1080px) {
.landing{background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/blafjall/bg2136x1200.jpg')}
}
@media (orientation : portrait) {
.landing{background-size:cover}
.landing-links{flex-direction:row;top:0;bottom:auto;right:auto;width:100vw;height:20vh}
.landing-watch,.landing-enter{height:100%;width:50vw;background-position:center center}
}

/* ── Modals (the site runtime's .mn-modal — replaces the legacy vo-modal skin). */
.mn-modal {
display:flex;
width:100vw;
height:100vh;
position:fixed;
top:0;left:0;
margin:0;padding:0;
z-index:100;
background-color:rgba(125,125,125,.2);
justify-content:center;
align-items:center;
}
.mn-modal-panel {
position:relative;
background-color:#0a0506;
color:#fff;
z-index:101;
overflow:auto;
width:1024px;
max-width:96vw;
max-height:96vh;
display:flex;
flex-direction:column;
}
.mn-modal-panel header {
background-color:rgba(0,0,0,.5);
padding:10px 44px 10px 12px;
}
.mn-video iframe {
width:100%;
aspect-ratio:16/9;
border:0;
display:block;
background-color:#000;
}
.mn-modal-close {
position:absolute;
top:0;right:0;
color:#fff;
padding:10px 12px;
cursor:pointer;
z-index:102;
}
.mn-modal-close:hover {background-color:rgba(0,0,0,.3)}
body.mn-modal-open {overflow:hidden}

.mn-cart .mn-modal-panel, .mn-notice .mn-modal-panel, .mn-order .mn-modal-panel, .mn-login .mn-modal-panel {width:420px;padding:0 0 20px}

/* The hosted platform login form (the .form fragment served by /api/forms/login). */
.mn-login .form {padding:18px 20px 0}
.mn-login .form .lead {font-size:16px;margin-bottom:14px}
.mn-login .form .description, .mn-login .form .label2, .mn-login .form .pw-name {margin:10px 0 4px;text-transform:uppercase;font-size:11px;letter-spacing:.1em;color:#9d9c91}
.mn-login .form input[type='text'], .mn-login .form input[type='password'] {display:block;width:100%;box-sizing:border-box;padding:8px 10px;background-color:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);color:#fff}
.mn-login .form .boxes {display:flex;gap:10px;margin:10px 0}
.mn-login .form .box {width:34px;height:34px;border:1px solid rgba(255,255,255,.35);background-color:rgba(255,255,255,.08);cursor:pointer}
.mn-login .form .box.selected {outline:2px solid #fff;outline-offset:2px}
.mn-login .form .form_buttons {margin-top:16px}
.mn-login .form input[type='submit'] {background-color:rgba(0,0,0,.5);border:1px solid #6592a2;color:#6592a2;text-transform:uppercase;letter-spacing:.1em;padding:10px 18px;cursor:pointer}
.mn-login .form input[type='submit']:hover {text-decoration:underline}
.mn-login .form .error {margin-top:10px;color:#c96a6a}
.mn-cart ul {list-style:none;margin:0;padding:8px 20px}
.mn-cart li {display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.15)}
.mn-cart-total {display:flex;justify-content:space-between;padding:14px 20px;font-size:15px}
.mn-cart .mn-checkout {margin:8px 20px 0;text-align:center}
.mn-notice p, .mn-order p {padding:18px 20px 0;margin:0;line-height:1.6}

/* Checkout flow (cart → details → payment → confirmation) — the step indicator + generic form-field chrome
   the runtime's renderDetailsStep/renderPaymentStep generate. Same visual language as .mn-login's form. */
.mn-checkout-steps {display:flex;list-style:none;margin:0;padding:14px 20px 0;gap:6px;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#7a7972}
.mn-checkout-steps li {flex:1;text-align:center;padding-bottom:8px;border-bottom:2px solid rgba(255,255,255,.15)}
.mn-checkout-steps li.active {color:#fff;border-bottom-color:#6592a2}
.mn-checkout-steps li.done {color:#9d9c91;border-bottom-color:#6592a2}
.mn-checkout-body {padding:14px 20px 0}
.mn-field {margin-bottom:12px}
.mn-field label {display:block;margin:0 0 4px;text-transform:uppercase;font-size:11px;letter-spacing:.1em;color:#9d9c91}
.mn-field input {display:block;width:100%;box-sizing:border-box;padding:8px 10px;background-color:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);color:#fff;font-family:inherit;font-size:13px}
.mn-field-row {display:flex;gap:10px}
.mn-field-row .mn-field {flex:1}
.mn-checkout-error {color:#c96a6a;min-height:1.4em;margin:4px 0 0}
.mn-checkout-hint {color:#7a7972;font-size:11px;margin:4px 0 0}

/*BACKGROUND IMAGE*/
@media (orientation : portrait) {
body{
background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/bg-portrait.jpg');
}
#background-2{
background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/bg2-portrait.jpg');
}
#background-3{
background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/bg5-portrait.jpg');
}
}
@media (min-width: 1920px), (min-height:1278px) {
body{
background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/bg-large.jpg');
}
#background-2{
background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/bg2-large.jpg');
}
#background-3{
background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/bg5-large.jpg');
}
}
@media (max-width: 1920px) and (max-height:1278px) {
body{
background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/bg.jpg');
}
#background-2{
background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/bg2.jpg');
}
#background-3{
background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/bg5.jpg');
}
}

/*FONT SIZE*/
@media (max-width: 1600px) {
#nav a{font-size:16px}
}
@media (max-width: 1400px) {
#nav a{font-size:15px}
}
@media (max-width: 1300px) {
#nav a{font-size:14px}
}
@media (max-width: 1200px) {
#nav a{font-size:13px}
}
@media (max-width: 1100px) {
#nav a{font-size:12px}
}
@media (max-width: 1000px) {
#nav a{font-size:11px}
}
@media (max-width: 900px) {
#nav a{font-size:10px}
}
@media (max-width: 800px) {
#nav a{font-size:9px}
}
@media (max-width: 700px) {
#nav a{font-size:8px}
}
@media (max-width: 600px) {
#nav a{font-size:7px}
}
@media (max-width: 520px) {
#nav a{font-size:6px}
}


/*mobile burger (legacy #nav.collapsed JS → the runtime's data-list-filter toggle: .filter = expanded)*/
a#nav-burger{display:none}

@media only screen and (max-device-width: 1024px) {
    iframe{display:block;max-width:100%;max-height:100%;}
    #content{z-index:98;width:calc(100% - 50px);min-width:initial;height:100%;max-width:initial;top:auto;overflow:auto;background:none !important}
    #leftnav{display:none}
    #logo{position:fixed;bottom:0;right:0;width:100%;min-width:initial;max-width:initial;height:100px;min-height:initial;max-height:20%;background-size:contain;background-repeat:no-repeat;background-position:center;background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/dpf.png');background-color:rgba(0,0,0,.8)}
    #main{height:auto;width:calc(100% - 20px);padding-top:150px;padding-bottom:110px;overflow:initial;background-position:center top;background-repeat:no-repeat}
    #content[data-page='about'] #main{background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/h-about.png')}
    #content[data-page='contact'] #main{background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/h-contact.png')}
    #content[data-page='news'] #main{background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/h-news.png')}
    #content[data-page='store'] #main{background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/h-store.png')}
    #content[data-page='workshops'] #main{background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/h-workshops.png')}
    #content[data-page='tv'] #main{background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/h-dptv.png')}
    #content[data-page='video'] #main{background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/h-film.png')}

    #nav {flex-direction:column;position:fixed;top:0;right:calc(100% - 45px);left:auto;bottom:auto;background-color:rgba(0,0,0,.8);transform:none;-webkit-transform:none;-ms-transform:none;z-index:99;min-width:initial;max-width:calc(100% - 50px);width:initial;min-height:initial;max-height:calc(100% - 70px);height:auto;display:inline-block;padding:35px 50px 35px 0;overflow:auto}
    #nav.filter{left:0;right:auto}
    #nav a {display:inline-block;padding:10px;text-align:left;font-size:16px;clear:both;width:auto}
    #nav_border{display:none}
    a#nav-burger{display:block;position:absolute;width:35px;height:35px;right:5px;top:5px;background-image:url('https://p-vo.net/01KWWYB1ER93BZ3B1JKA2EQVJF/site/icon-arrow.png');background-position:0 0;background-size:35px;padding:0;margin:0}
    #nav.filter a#nav-burger {background-position:0 -35px}


    .thumbnail{display:block;width:100%;text-align:center;padding:0}
    .store-wheres{padding-left:0px;padding-top:250px}
    #contact-table, #contact-table .cell {display:block}
    #contact-table .cell {margin-top:24px;text-align:center}
    #contact-table .cell.pr {padding:0}
}