* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust:none;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) rgba(0,0,0,0);
  outline:none;
  box-sizing: border-box;
  font-family: 'varela_roundregular', tahoma, helvetica;
}
:root {
  --max-width: 1000px;
  --bg-color: #76000e;
  --font-color: #fff;
}

html { height:100%; background-color: #000; }
body { height:100%; padding:0; margin:0; font-size: 14px; }
main { min-height:100%; display: grid; grid-template-rows: 1fr auto; background: #000 url('_img/bg.jpg') no-repeat top center; background-size: cover; }
h1, h1.overskrift { text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black; }
a { color: var(--font-color); text-decoration: underline; transition: color .3s ease; }
ul { padding-left: 1.5em; }
ul li { padding: 1em 0; }


.logo { position: absolute; top:2em; left:0; width: 100%; height:20vh; background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 10; }
.logo:hover { opacity: .8; cursor: pointer;}
.logo:active { opacity: .5; }
.floater { position: fixed; font-size:1.3em; z-index: 100; right:0; top:25%; border:2px solid #000; border-bottom: 0; padding:1em; border-radius: 1em 1em 0 0; transform:rotate(-90deg); transform-origin: bottom right; background:var(--font-color); cursor:pointer; animation: fadeInRotatedFromRight 1s ease; }
.floater:active { opacity: .5; }

::-webkit-input-placeholder { color:rgba(255,255,255,.2); font-weight: 600; font-size:.8em; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,.15); }

.ui-datepicker { background: var(--bg-color) !important; }

/* Cookies */
.cookies_tekst { position: fixed; z-index: 100; bottom: -240px; background: #000a; width: 100%; display:table; padding: 1em; box-sizing: border-box; }
.cookies_content, .cookies_content p, .cookies_tekst, .cookies_tekst p { color: var(--font-color) !important; }
.cookies_tekst.inview { transition: transform 1s ease; transform: translate3d(0, -240px, 0); }
.cookies_table { width:auto; max-width:1280px; margin:0 auto; }
.cookies_icon { font-size:64px !important; margin-right:12px; } 
.cookies_close { display:block; }
.cookies_close button { background: transparent; border:2px solid var(--font-color); border-radius: 5px; color:var(--font-color); padding:10px; margin-top: 10px; box-shadow: none !important; cursor: pointer; font-weight: 700; }
.cookies_close button:nth-child(2) { background:#fff; color:#000; }
  
/* Paragraphs */
.paragraphs { display: inline-block;}
.paragraphs .paragraph:first-child:not(.video) { margin-top:calc(20vh + 2em); }
.paragraph { position: relative; color:var(--font-color); }

.paragraph.content { max-width: var(--max-width); margin: 0 auto; padding: 2em; display: grid; grid-template-columns: 1fr auto; grid-gap: 3em; align-items: center; }
.paragraph.content ~ .paragraph.content .content { order:2; }
.paragraph.content img { order:1; width:25vw; max-width: 320px; border-radius: 2em; transform: rotate(5deg); border:3px solid var(--bg-color); box-shadow: 0 0 0 3px var(--font-color); }

.paragraph.buttons { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(33%, 1fr)); grid-gap: 0; padding: 2em 0; text-align: center; }
.paragraph.buttons .button { margin: 0 auto; transition: transform .3s ease; cursor:pointer; }
.paragraph.buttons .button ~ .button, .paragraph.buttons .button:has( ~ .button) { max-width: 30vw; }
.paragraph.buttons .button:hover { transform:scale(1.05); }
.paragraph.buttons .button:active { opacity: .5; }
.paragraph.buttons .button img { width: 100%; max-width: 200px; }
.paragraph.buttons .button h3 { cursor:pointer; background: none; transform:rotate(-5deg); border:3px solid var(--font-color); font-size: 1em; word-wrap: break-word; text-transform: uppercase; border-radius: .5em; padding:1em .5em; color:var(--font-color); }

.paragraph.events { max-width: var(--max-width); margin: 0 auto; padding: 0 2em; }
.paragraph.events .event { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; margin:0 0 4em; grid-gap:3em; user-select: none; cursor:pointer; padding:1em 0; }
.paragraph.events .event:hover img, .paragraph.events .event:hover h2, .paragraph.events .event:hover p, .paragraph.events .event:hover button { opacity: .75; transition: all .3s ease; }
.paragraph.events .event:active img, .paragraph.events .event:active h2, .paragraph.events .event:active p, .paragraph.events .event:active button { opacity: .5; }
.paragraph.events .event h2 {  font-size: 1.5em; font-weight: 400; margin:0 0 .5em 0; text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black; }
.paragraph.events .event p {  font-size: 1.2em; font-weight: 400; margin:.25em 0 0 0; }
.paragraph.events .event img { position: relative; z-index: 1; transform:rotate(-5deg); width: 20vw; max-width: 240px; overflow:hidden; border-radius:1em; border:3px solid var(--bg-color); box-shadow: 0 0 0 3px var(--font-color); transition: transform .3s ease; }
.paragraph.events .event button { cursor:pointer; background: none; transform:rotate(-5deg); border:3px solid var(--font-color); font-size: 1.2em; text-transform: uppercase; border-radius: .5em; padding:1em 1.5em; color:var(--font-color); }

.paragraph.events .event:hover img { transform:rotate(-5deg) scale(1.05); }
.paragraph.events .event:after { content:''; position: absolute; bottom:-2em; right:0; width: calc(100%); border-bottom:3px dashed var(--font-color); z-index: 0; opacity: .25; }
.paragraph.events .event:last-child:after { display:none; }

.paragraph.video { max-width: var(--max-width); margin: 0 auto; padding: 2em; align-items: center; }
.paragraph.video video { width: 100%; height: 100%; border-radius: 2em; border:3px solid var(--bg-color); box-shadow: 0 0 0 3px var(--font-color); object-fit: cover; }
.paragraph.video:first-child { width: 100%; max-width:100%; height: 60vh; min-height:0px; max-height: 1000px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%); }
.paragraph.video:first-child video { border:0; border-radius: 0; box-shadow: none; position: absolute; top: 50%; left: 50%; transform: translate(-51%, -51%); min-width: 102%; min-height: 102%; object-fit: cover; }
.paragraph.video:first-child ~ .paragraph.buttons { position: relative; z-index: 1; top:-20vh; margin-bottom:-20vh; } 

.paragraph.booking { max-width: var(--max-width); margin: 0 auto; padding: 0 2em; }
.paragraph.booking h2 {  font-size: 1.5em; font-weight: 400; margin:0 0 .5em 0; text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black; }
.paragraph.booking button { cursor:pointer; background: none; transform:rotate(-5deg); border:3px solid var(--font-color); font-size: 1.2em; text-transform: uppercase; border-radius: .5em; padding:1em 1.5em; color:var(--font-color); }
.paragraph.booking button:hover:not(:disabled) { box-shadow: 0 0 0 5px rgba(255,255,255,.15); }
.paragraph.booking button:disabled { background:rgba(255,255,255,.1); color:rgba(255,255,255,.1); }
.paragraph.booking button:active, .paragraph.booking button:hover:active { box-shadow: 0 0 0 5px rgba(255,255,255,.15), inset 0 0 0 100px rgba(0,0,0,.15); }


.paragraph.separator { max-width: var(--max-width); margin: 0 auto; padding: 2em 0; text-align: center; }
.paragraph.separator:after { width: calc(50%); content: ''; display: block; height: 3px; border-radius: 2px; background: var(--font-color); margin: 0 auto; box-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black; }

/* Footer */
footer { color:var(--font-color); text-transform: uppercase; overflow: hidden; text-align: center; padding: 2em; }
footer p { margin:0;}
footer a { margin:0 1em;}
footer a i { font-size: 2em !important; color:var(--font-color); }

/* Responsive */
@media (max-width: 768px) {
  
  .floater {  font-size:1em; }
  /* .logo { top:1em; max-height:180px; } */

  .paragraphs .paragraph:first-child:not(.video) { margin-top:calc(20vh + 1em); }

  .paragraph.booking { padding:0 1em; }

  .paragraph.content { grid-template-columns: 1fr; grid-gap:2em; }
  .paragraph.content img { width: 100%; max-width: 100%; }
  .paragraph.content ~ .paragraph.content .content { order:1; }

  .paragraph.buttons .button h3 { font-size: .8em; }

  .paragraph.events .event { margin: 0 0 2em; grid-gap:1.5em; }    
  .paragraph.events .event:after { bottom:-1em; }    
  .paragraph.events .event>div:last-child { display:none; }
  .paragraph.events .event img { width: 100%; max-width: 25vw; }
  .paragraph.events .event h2 { font-size: 1.2em; }
  .paragraph.events .event p { font-size: 1em; }
}

/* Animations */
@keyframes fadeInRotatedFromRight {
  from { opacity: 0; transform: rotate(-90deg) translateY(100%); }
  to { opacity: 1; transform: rotate(-90deg) translateY(0); }
}