/*
Theme Name: Ryans
Author: Codepilots ApS
*/

*, *::after, *::before { box-sizing: border-box; outline:none; }
::-webkit-scrollbar { width: 6px; }

html, body { padding:0; margin:0; height:100%; background-color: #0f381c; }
body { background:radial-gradient(circle at top center, #10612c 0%, #0f381c 100%); height:100%; color:#ffffff; }
body::-webkit-scrollbar-thumb { background-color: #10612c; }
body::-webkit-scrollbar-track { background-color: #0f381c; }

.main { min-height:100%; }
.pagewidth { width:100%; max-width: 1280px; }
.center { margin:0 auto; }
.clear { clear:both; }
.nomargin { margin:0; line-height: 1em; }
.fadeInQueue, .fadeInUpQueue, .fadeInDownQueue { opacity: 0; } 
.text.center { text-align: center; }

/* Top */
.top { z-index:100; position:absolute; top:0; left:0; width:100%; background: linear-gradient(to bottom, #000000aa 0%, #00000000 100%); padding:20px 0; }
.page-template-page-forside .top { background: linear-gradient(to bottom, #000000cc 0%, #00000000 100%); padding:20px 0; }

.top.scrolled, .page-template-page-forside .top.scrolled { position:fixed; top: 0; left: 0; z-index: 101; animation: fadeInDown .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); background: linear-gradient(to bottom, #061a0cdd 0%, #061a0ccc 100%); padding: 0; }
.top.scrolled .logo { height:86px; }
.top.scrolled .nav { padding-top:24px; }

.top .mobilemenu { position: absolute; top:0; left:0; padding: 36px 20px; z-index:10; font-size:24px; }
.top .pagewidth { display:grid; grid-template-columns: 1fr auto 1fr; margin:0 auto; }
.top .logo { width: 320px; height: 119px; background-repeat: no-repeat; background-position: center center; background-size:contain; margin:0 auto; cursor:pointer; }
.top .nav { padding-top:32px; opacity:0; animation: fadeIn .3s forwards; animation-delay:1000ms; }
.top .nav ul.sf-menu { display:inline-block; }
.top .nav ul.sf-menu>li { position: relative ;}
.top .nav ul.sf-menu>li.active:after {
    content:'';
    position: absolute;
    top:100%;
    left:0;
    height:2px;
    width:100%;
    background:#bd8a27;
}
.top .nav ul.sf-menu>li>a:not(.sf-with-ul):before { content:'\f111'; font-family: 'FontAwesome'; font-size:6px; position: absolute; top:45%; right:-3px; color:#bd8a27; opacity: 0; animation: fadeIn 2s ease-in; animation-delay: 1.5s; animation-fill-mode: forwards; }
.top .nav ul.sf-menu>li:last-child>a:before { content:''; }

.sf-arrows .sf-with-ul:after { right:15px !important; color:#bd8a27 !important; opacity: 0; animation: fadeIn 2s ease-in; animation-delay: 1.5s; animation-fill-mode: forwards;  }

.top .nav ul.sf-menu a { user-select: none; color:#f5f5f5; font-size:16px; text-transform:none; transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1);}
.top .nav ul.sf-menu a:hover { color: #fff !important; }
.top .nav.left { padding-left:16px; }
.top .nav.left ul.sf-menu { float:left; }
.top .nav.right { padding-right:16px; }
.top .nav.right ul.sf-menu { float:right; }

/* Cookies */
.cookies_tekst {
    position: fixed;
    z-index: 100;
    bottom: -240px;
    background: #073517dd;
    width: 100%;
    display:table;
    padding: 24px 16px;
    box-sizing: border-box;
  }
  .cookies_content, .cookies_content p, .cookies_tekst, .cookies_tekst p { color: #fff !important; }
  .cookies_tekst.inview {
      transition: transform 1s ease 1s 1s;
      transform: translate3d(0, -240px, 0);
  }
  
  .cookies_table { width:auto; max-width:1280px; margin:0 auto; }
  
  .cookies_icon {
      font-size:64px;
      margin-right:24px;
  }
  
  .cookies_close {
      display:block;
  }
  
  .cookies_close button {
    background: transparent;
    border:2px solid #fff;
    border-radius: 5px;
    color:#fff;
    padding:10px;
    margin-top: 10px;
    box-shadow: none !important;
    cursor: pointer;
    font-weight: 700;
  }

  .cookies_close button:nth-child(2) { background:#fff; color:#000; }
  

/* Bottom */
.bottom { padding:32px; color:#fff; }

/* Frontpage */
.main { width:100%; display:grid; grid-template-rows: minmax(70vh, 1fr) auto; }
.main.frontpage { width:100%; height: 100%; display:grid; grid-template-rows: minmax(640px, 1fr) 1fr auto; }
.main:not(.frontpage) .pagecontent { padding-top:200px;}

.hero { width:100%; position: relative; overflow:hidden; min-height:50%; }
.hero .slick_wrapper:before {
    content:'';
    position: absolute;
    bottom:0;
    left:0;
    width:20%;
    height:50%;    
    background: url('/wp-content/themes/ryans/_img/clover_bottomleft.png') no-repeat bottom left;
    background-size: contain;
    z-index: 2;
    opacity: 0;
    animation: fadeInLeft 1s forwards;
    animation-delay: 2s;
}
.hero .slick_wrapper:after {
    content:'';
    position: absolute;
    top:0;
    right:0;
    width:20%;
    height:50%;    
    background: url('/wp-content/themes/ryans/_img/clover_topright.png') no-repeat top right;
    background-size: contain;
    z-index: 2;
    opacity: 0;
    animation: fadeInRight 1s forwards;
    animation-delay: 2s;
}

.hero .eventcard { 
    width:30%;  
    min-width: 300px;   
    position: absolute; 
    bottom:-30px; 
    right:5%;
    background:#ddcfc3 url('/wp-content/themes/ryans/_img/paper.jpg') no-repeat center center;
    background-size: cover;
    padding:24px;
    transform: rotate(3deg);
    border-radius: 3px;
    overflow:hidden;   
    animation: fadeInUp3 .5s cubic-bezier(0.215, 0.61, 0.355, 1);  animation-fill-mode: both; 
    box-shadow: 0 0 50px 0 #00000033;
    transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1);
    z-index: 100;
    
}
.hero .eventcard .grid { display:grid; grid-template-columns: 33% 1fr; }
.hero .eventcard .grid .background { transform:rotate(-10deg); background-size:contain; background-position:center center; background-repeat: no-repeat; }
.hero .eventcard .grid .content { padding-left:20px; }
.hero .eventcard a.button { color:#1b0f05; border-color:#1b0f057e; }

.hero .eventcard:not(.behind):hover { bottom:-20px; }
.hero .eventcard.behind {
    right:calc(5% - 12px);
    bottom:-50px;
    filter:brightness(.7);
    transform: rotate(5deg);
    animation: fadeInUp5 .5s cubic-bezier(0.215, 0.61, 0.355, 1);  animation-fill-mode: both;animation-delay: .3s;
}

.hero:after {
    content:'';
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    height:100%;    
    box-shadow: inset 0 -40px 30px -20px #00000055;    
}

.hero .eventcard h2, .hero .eventcard h2.Underoverskrift { font-size:36px; }
.hero .eventcard .content { color:#3b3024; }

/* Slick */
.slick_wrapper { width:100%; height:100%; }
.slick { width: 100%; height:100%;}
.slick .slide { width:100%; height:100%; position: relative; overflow:hidden; }
.slick .slide .bg { width:100%; height:100%; background-size: cover; background-position: center center; filter:blur(3px); transform:scale(1.1); }
.slick .slide .video { position: absolute; top:0; left:0; width:100%; height:100%; z-index: 2; }
.slick .slide .video video {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    overflow: hidden;
}
.slick .slide .overlay { position:absolute; z-index: 5; top:0; left:0; width:100%; height:100%; background:#00000055; padding: 0 32px; }
.slick .slide .box_wrapper {
    position: relative;
    width:100%;
    height:100%;
    margin:0 auto;    
}
.slick .slide .box { 
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);    
    border: 3px solid #bd8a27;
    padding: 64px;
    height: 60%; 
    max-height: calc(100% - 200px);
    display:flex;
    width:100%;    
}
.slick .slide .text { color: #fff; align-self: flex-end; opacity: 0; animation: fadeInUp 2s ease-in-out; animation-delay: .5s; animation-fill-mode: forwards; }

.mobilemenu { display:none; }
.sidr { background:radial-gradient(circle at top center, #05200f 0%, #092411 100%) !important; position: relative; }
.sidr .logo { display: block; width: 100%; height:80px; margin-top:18px; text-align: center; font-size:12px; background-image:url('/wp-content/themes/ryans/_img/logo.png'); background-size:contain; background-repeat: no-repeat; background-position: top center; }

/* Links */
a, .clickable { transition: opacity .3s ease-in-out; color:inherit; cursor:pointer; }
a.clickable:hover, .clickable:hover, .top a:hover { opacity: .8; }
a.button { text-decoration: none; display: inline-block; font-size:13px; font-weight: 600; color:#fff; padding:12px 16px; position: relative; background-color:#00000000; transition: background-color .3s cubic-bezier(0.215, 0.61, 0.355, 1); }
a.button i { float:right; margin:0 0 0 10px; line-height: 20px; }
a.button:after {
    content:'\f054';
    font-family: 'FontAwesome';
    display:inline-block;
    position: relative;
    margin-left:10px;
    color:#bd8a27;
    transition: color .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

a.button:hover { background-color:#bd8a27; }
a.button:hover:after { color:#fff; }
.content a:not(.button) { color:#bd8a27; text-decoration: underline; }

/* Content */
.radial { background:radial-gradient(circle at top center, #10612c 0%, #0f381c 100%); position: relative; }
.darkradial { background:radial-gradient(circle at top center, #073517 0%, #092411 100%); position: relative; }
.radial.pattern:before {
    content:'';
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url('/wp-content/themes/ryans/_img/pattern_dark2.png?ts=4') repeat top center;
}
.radial.pattern:after {
    content:'';
    position: absolute;
    top:-32px;
    left:0;
    width:100%;
    height:32px;
    background: linear-gradient(to top, #00000033 0%, #00000000 100%);
    z-index: 3;
}

.pagecontent { max-width:1280px; min-height: 320px; margin:0 auto; padding:32px; }
.pagecontent p { line-height: 1.6em; }
.pagecontent .flex { display: flex; }
.pagecontent .left { flex: 1; }

/* Paragraphs */
.paragraphs { position: relative; }
.paragraph:not(.bg):nth-child(even) {  position: relative;}
.paragraph:not(.bg):nth-child(odd) { position: relative;}
.paragraph:not(.bg):first-child:before { display:none; }

.paragraph.separator { padding:16px 0; text-align:center; color:#fff; font-size:10px; }
.paragraph.separator .krumme:first-child { height:24px; margin-right: 10px; vertical-align: middle; }
.paragraph.separator .krumme:last-child { height:24px; margin-left: 10px; vertical-align: middle; transform: scaleX(-1);}

.paragraph.left33 .paragraphwrap, 
.paragraph.right33 .paragraphwrap, 
.paragraph.left .paragraphwrap, 
.paragraph.right .paragraphwrap, 
.paragraph.nopic .paragraphwrap { width:100%; max-width: 1280px; margin:0 auto; padding:32px 0; }

.paragraph.nopic .paragraphwrap .img { display:none; }

.paragraph.fullwidthimg { position: relative; overflow:hidden; }
.paragraph.fullwidthimg img { width:100%; height:auto; vertical-align: bottom; }

.paragraph.doubleimg { height: 50vw; max-height: 640px; }
.paragraph.doubleimg .paragraphwrap { position: relative; overflow:hidden; display:grid; grid-template-columns: 50% 50%; height:100%; }
.paragraph.doubleimg .paragraphwrap .img{ background-repeat: no-repeat; background-size:cover; background-position: center center; }

.paragraph.bg { position: relative; overflow:hidden; }
.paragraph.bg:before {
    content: '';
    padding-top: 50%;
    float: left;
}
.paragraph.bg .paragraphwrap { position: absolute; display: inline-block; text-align: center; top:50%; left:50%; transform: translate(-50%, -50%); color:#fff; z-index:2; }
.paragraph.bg .img {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  background-color:#000;
  background-size: cover;
  height:160%;
  margin-top:-20%;
  margin-left:-25%;
  z-index: 0;
}
.paragraph.bg .img:after { content:''; position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,.25); z-index:1; box-shadow: inset 0 -32px 32px -32px rgb(0 0 0 / 50%), inset 0 32px 32px -32px rgb(0 0 0 / 50%); }
.paragraph .paragraphwrap .text>ul { padding-left:16px; list-style: square; }

.paragraph.left .paragraphwrap { display:grid; grid-template-columns: minmax(200px, 50%) 1fr; align-items: center; }
.paragraph.left .paragraphwrap .text { order:2; }
.paragraph.left .paragraphwrap .img { order:1; position: relative; z-index: 1; }
.paragraph.left .paragraphwrap .img:before { content: ''; position: absolute; top:-12px; left:-8px; width:calc(100% - 3rem); height:100%; border:3px solid #bd8a27; z-index:2; }
.paragraph.left .paragraphwrap img:not([decoding]) { width:100%; height:auto; padding: 0 3rem 0 0; z-index: 1; position: relative;}

.paragraph.right .paragraphwrap { display:grid; grid-template-columns: 1fr minmax(200px, 50%); align-items: center; }
.paragraph.right .paragraphwrap .text { order:1; }
.paragraph.right .paragraphwrap .img { order:2; position: relative; z-index: 1; }
.paragraph.right .paragraphwrap .img:before { content: ''; position: absolute; top:8px; left:calc(3rem - 8px); width:calc(100% - 3rem); height:100%; border:3px solid #bd8a27; z-index:2; }
.paragraph.right .paragraphwrap img:not([decoding]) { width:100%; height:auto; padding: 0 0 0 3rem; }

.paragraph.left33 .paragraphwrap { display:grid; grid-template-columns: minmax(200px, 33%) 1fr; align-items: center; }
.paragraph.left33 .paragraphwrap .text { order:2; }
.paragraph.left33 .paragraphwrap .img { order:1; position: relative; z-index: 1; }
.paragraph.left33 .paragraphwrap img:not([decoding]) { width:100%; height:auto; padding: 0 3rem 0 0; }

.paragraph.right33 .paragraphwrap { display:grid; grid-template-columns: 1fr minmax(200px, 33%); align-items: center; }
.paragraph.right33 .paragraphwrap .text { order:1; }
.paragraph.right33 .paragraphwrap .img { order:2; }
.paragraph.right33 .paragraphwrap img:not([decoding]) { width:100%; height:auto; padding: 0 0 0 3rem; }

.paragraph.left25 .paragraphwrap { display:grid; grid-template-columns: minmax(200px, 25%) 1fr; align-items: center; }
.paragraph.left25 .paragraphwrap .text { order:2; }
.paragraph.left25 .paragraphwrap .img { order:1; }
.paragraph.left25 .paragraphwrap img:not([decoding]) { width:100%; height:auto; padding: 0 3rem 0 0; }

.paragraph.right25 .paragraphwrap { display:grid; grid-template-columns: 1fr minmax(200px, 25%); align-items: center; }
.paragraph.right25 .paragraphwrap .text { order:1; }
.paragraph.right25 .paragraphwrap .img { order:2; }
.paragraph.right25 .paragraphwrap img:not([decoding]) { width:100%; height:auto; padding: 0 0 0 3rem; }

.paragraph.sportsoftheweek .paragraphwrap { display:grid; grid-template-columns: minmax(200px, 50%) 1fr; align-items: center; }
.paragraph.sportsoftheweek .paragraphwrap .text { order:2; }
.paragraph.sportsoftheweek .paragraphwrap .img { order:1; position: relative; z-index: 1; }
.paragraph.sportsoftheweek .paragraphwrap .img:before { content: ''; position: absolute; top:-12px; left:-8px; width:calc(100% - 3rem); height:100%; border:3px solid #bd8a27; z-index:2; }
.paragraph.sportsoftheweek .paragraphwrap img:not([decoding]) { width:100%; height:auto; padding: 0 3rem 0 0; z-index: 1; position: relative;}

.paragraph.vidleft .paragraphwrap { display:grid; grid-template-columns: 1fr 1fr; align-items: center; }
.paragraph.vidleft .paragraphwrap .text { order:2; padding:3rem; }
.paragraph.vidleft .paragraphwrap .video { order:1; overflow:hidden; position: relative; width:100%; height:100%; }
.paragraph.vidleft .paragraphwrap .video video, 

.paragraph.vidright .paragraphwrap { display:grid; grid-template-columns: 1fr 1fr; align-items: center; }
.paragraph.vidright .paragraphwrap .text { order:1; padding:3rem; }
.paragraph.vidright .paragraphwrap .video { order:2; overflow:hidden; position: relative; width:100%; height:100%; }
.paragraph.vidright .paragraphwrap .video video { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); min-width: calc(100% + 2px); min-height: 100%; width: auto; height: auto; max-width: 100%; z-index: 0; overflow: hidden; }

.paragraph.gallery { max-width: 1280px; margin: 0 auto; padding: 2em 0; }
.paragraph.gallery .images { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 1.5em; margin:2em 0;  }
.paragraph.gallery .image { position: relative;  }
.paragraph.gallery .image a { border:none !important; z-index: 1; } 
.paragraph.gallery .image img { width: 100%; height: 100%; object-fit: cover; position: relative; }
.paragraph.gallery .image:before { content: ''; position: absolute; top:-12px; left:-8px; width:100%; height:100%; border:3px solid #bd8a27; z-index:2; pointer-events: none; }
.paragraph.gallery .image:after { display:none; }

.paragraph.faq { max-width: var(--max-width); margin: 0 auto; padding: 2em 0; }
.paragraph.faq .question h3 { cursor:pointer; user-select: none; margin-bottom:0; }
.paragraph.faq .question h3.shown { color: var(--font-color); }
.paragraph.faq .question h3:before { display: inline-block; width:24px; content:'+'; }
.paragraph.faq .question h3.shown:before { content:'-'; }
.paragraph.faq .question div { max-height:0; overflow:hidden; transition: max-height .3s ease; }
.paragraph.faq .question h3.shown + div { max-height: 1000px; }

/* Footer */
.bottom { box-shadow: inset 0 32px 32px -32px rgb(0 0 0 / 50%); }
.footerwrap .logo { width:100%; max-width:160px; display:block; }
.footerwrap .separator { padding:16px 0; text-align:center; color:#fff; font-size:10px; }
.footerwrap .footercolumns { display:grid; grid-template-columns: 2fr 3fr 2fr; grid-gap:20px; margin-bottom:20px; }

/* Custom animations */
@keyframes fadeInUp3 {
    from { opacity: 0; transform: translateY(50px) rotate(3deg); }
    to { opacity: 1; transform: rotate(3deg); }
}
@keyframes fadeInUp5 {
    from { opacity: 0; transform: translateY(50px) rotate(5deg); }
    to { opacity: 1; transform: rotate(5deg); }
}



@media only screen and (max-width: 1280px) {
    .hero .eventcard h2, .hero .eventcard h2.Underoverskrift { font-size:32px; }
}

@media only screen and (max-width: 1024px) { 
    .top .pagewidth { grid-template-columns: 1fr; }
    .top .nav { display:none; }
    .top .mobilemenu { display:block; padding: 48px 32px; }    
    
    .main:not(.frontpage) .pagecontent { padding-top:120px;}
    
    .footerwrap .footercolumns { grid-template-columns: 1fr 1fr; }
    .footerwrap .footercolumns>div { grid-column: span 1; }
    .footerwrap .footercolumns>div:last-child { grid-column: span 2; }

    h1, h1.Overskrift { font-size:32px; margin:0 0 32px 0; }
    h2, h2.Underoverskrift { font-size:32px; }
    h3, h3.Lilleoverskrift { font-size:16px; }
    h1:after, h1.Overskrift:after {
        content:'';
        width:42px;
        height:4px;
        position: absolute;
        bottom:-16px;
        left:0;
    }
}

@media only screen and (max-width: 768px) {    

    .paragraph.left .paragraphwrap,
    .paragraph.right .paragraphwrap,
    .paragraph.left25 .paragraphwrap,
    .paragraph.right25 .paragraphwrap,
    .paragraph.left33 .paragraphwrap,
    .paragraph.right33 .paragraphwrap,
    .paragraph.left50 .paragraphwrap,
    .paragraph.right50 .paragraphwrap,
    .paragraph.nopic .paragraphwrap { display: grid; grid-template-columns: 100%;  }

    .paragraph.left .paragraphwrap .img img,
    .paragraph.left25 .paragraphwrap .img img,
    .paragraph.left33 .paragraphwrap .img img,
    .paragraph.left50 .paragraphwrap .img img { padding:0 0 2rem 0; }

    .paragraph.left .paragraphwrap .img:before { width: 100%; height: calc(100% - 2rem); }
    .paragraph.right .paragraphwrap .img:before { width: 100%; height: calc(100% - 2rem); top: 22px; left: 8px; }

    .paragraph.right .paragraphwrap .img img,
    .paragraph.right25 .paragraphwrap .img img,
    .paragraph.right33 .paragraphwrap .img img,
    .paragraph.right50 .paragraphwrap .img img { padding:2rem 0 0 0; width:auto; max-width: 100%; }
}

@media only screen and (max-width: 640px) { 
    /* .pagecontent { padding:16px; } */
    .top .logo { height:60px; pointer-events: none; }
    .top .mobilemenu { display:block; padding: 36px 20px; }

    .main.frontpage { grid-template-rows: minmax(400px, 1fr) 1fr auto; }
    .main:not(.frontpage) .pagecontent { padding-top:64px; }

    .pagecontent { padding:20px; }

    .hero { min-height:30%; }
    .hero .eventcard { font-size:10px; min-width:240px; padding:16px; bottom:-15px; }
    .hero .eventcard.behind { bottom:-25px; }
    .hero .eventcard:not(.behind):hover { bottom:-10px; }
    .hero .eventcard h2, .hero .eventcard h2.Underoverskrift { font-size:20px; }
    .hero .eventcard .grid { grid-template-columns: 24% 1fr; }
    .hero .slick_wrapper:before { width:33%; }
    .hero .slick_wrapper:after { width:33%; }

    .slick .slide .box { height:70%; max-height: calc(100% - 160px); padding: 24px 24px 32px; }

    .footerwrap .footercolumns { grid-template-columns: 1fr; }
    .footerwrap .footercolumns>div { grid-column: span 1 !important; }

}