/* -------------------------------------------!!! GLOBAL RULES !!!---------------------------------------------- */


    :root {
      --bg:#000;
      --accent:#ff8800;--accent-sub:#662200;--select:#ffff00;--text:#c2c2c2;--link:#fff;--scroll:#222;
      --border:#333;--border-container:3px double var(--border);--border-container-active:3px double var(--accent);
      --smoothEase:cubic-bezier(.3, .01, .1, 1);
      
      --fontTitles:'P22LateNovember','Times New Roman',serif;
      --fontMainText:'P22LateNovember',Georgia,serif;
      --fontDescriptions:'Mondwest',Garamond,serif;
      --fontSansSerif:'Druk',Tahoma,sans-serif;
    }
    * {scrollbar-color:var(--accent) var(--scroll) !important;scrollbar-width:thin !important}
    ::-webkit-scrollbar{height:auto;background:var(--scroll)} ::-webkit-scrollbar-thumb{height:auto;background-color:var(--accent)}
    :after,:before {box-sizing:border-box;-webkit-tap-highlight-color:transparent}
    
    html{max-width:100vw}
    html:lang(en) :lang(es), html:lang(es) :lang(en) {display:none}
    ::-webkit-scrollbar-button,details summary::-webkit-details-marker,
    .br-about,.sp-mobile
        {display:none}
    html:lang(en) .eng, html:lang(es) .esp{border:1px solid var(--select)}


    body {
      color:var(--text);font-family:var(--fontMainText);font-size:1.05em;word-wrap:break-word;text-rendering:optimizeLegibility;
      animation:fade-in 3.5s var(--smoothEase)
    }
    #Page { 
      display:block;position:relative;
      margin:0;padding:0;overflow-x:hidden;overflow-y:auto;
      
      background: var(--bg) url("/img/ros33flip.webp") no-repeat fixed;background-size:40%;background-position: 103% 100%;background-blend-mode:luminosity;
      animation:fade-in 3.5s var(--smoothEase)
    }
    
    @media screen and (max-width:900px) {
        #Page{align-items:center;background:var(--bg)}
        .sp-mobile{display:block}
    }


/* ------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------!!! TEXT RULES !!!------------------------------------------------ */


    img {max-width:100%}
    p, h1, h2, h3, img, button,
    [class$='-content'], #Page, .song {margin:0}
    h2{font:200 2.8vw/1 var(--fontMainText);font-style:normal }
        @media screen and (max-width:900px) {h2{font:200 3.6vw/1 var(--fontMainText)} a:hover,a:active,button:hover,button:active{letter-spacing:0} .lang-menu-pc,.lang-menu-pc button{display:none}}
    
    a:hover,button:hover,summary:hover,details[open] > summary,
    .folio-content a,.bio-content a,.berklee-content a{color:var(--accent);text-shadow:0 0 1px var(--accent)}


    /* ! Links + Button */
    a,button{color:var(--link);text-shadow:0 0 1px var(--link);text-decoration:none;transition:.3s}
    a:hover,button:hover{letter-spacing:.1em}
    @media screen and (max-width:900px){a:hover{letter-spacing:0}}
    button{
      padding:.3%;overflow:hidden;min-width:4em;
      background: #111;border:1px solid var(--border);border-radius: 3px;
      font-family:inherit;font-weight:200;font-size: 90%
    }
    button:hover,button:active{
      cursor:pointer;letter-spacing:0;
      background-color:#442200;border:1px solid var(--accent);box-shadow:0 0 3px var(--accent)
    }
    .lang-menu-pc{
      display:flex;position:absolute;
      top:.15em;right:1.3em;
      text-align:center;
    } .lang-menu-pc button{font-size:70%}


    /* ! Horizontal Line */
    hr{
      overflow:visible;width:80%;height:1px;
      background-image:linear-gradient(to right, rgba(194, 194, 194, 0), rgba(194, 194, 194, 0.75), rgba(194, 194, 194, 0));border:0;box-sizing:content-box
    }
    .hr-right{width:100%;background-image:linear-gradient(to right, rgba(194, 194, 194, 0.75), rgba(194, 194, 194, 0.1), rgba(194, 194, 194, 0))}

    /* ! Select Text */
    ::selection,::-moz-selection {color:var(--select);text-shadow:0 0 1px var(--select);background-color:transparent}

    /* ! Image Scaling */
    .Image>img,.Image>picture,.Scaled,.Scaled>img,.Source{position:absolute;width:100%;height:100%;top:0;left:0}
    .Scaled{transform: scale3d(1.1,1.1,1.1)}
    .Scaled>img{height:auto}
    .Source{background-size:cover;background-position:50%}


    /* ! Styled Text */
    .Lined{ 
      padding-top:.15em;padding-bottom:.15em;
      border-top:1px solid var(--text);border-bottom:1px solid var(--text);text-decoration:none
    }
    .Stroke{color:var(--accent);-webkit-text-fill-color:var(--bg);-webkit-text-stroke-width:1px;-webkit-text-stroke-color:var(--accent)}
    a:hover .Lined{border-top:1px solid var(--accent);border-bottom:1px solid var(--accent)}


/* ------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------!!! HEADER RULES !!!---------------------------------------------- */


    #Header{display:flex;flex-direction:row;text-align:center;clip:rect(auto auto auto auto);transition:clip 1s var(--smoothEase)}
    .main-title{display:flex;flex-direction:column;transition:none}
    .head-img{opacity:.5;padding:0 1% 0 1%}

    #home-title{
      font:400 10vw/.8 var(--fontMainText);letter-spacing:.5vw;
      color:var(--accent);-webkit-text-stroke:1px #000
    }
    #pg-subtitle{
      height:1em;
      visibility:hidden;
      padding-top:.3em;padding-bottom:.3em;z-index:50
    }
    #home:target #pg-subtitle{visibility:hidden}
    #home-title,#home-subtitle,#pg-subtitle{text-shadow:-1px 1px 3px #000}
    #home-subtitle .Stroke,#pg-subtitle .Stroke{font:400 3vw/1 var(--fontMainText)}


    #home:target .main-title{
      visibility:visible;position:relative;left:18.5%;
      animation:title-slide-up 1.5s var(--smoothEase)
    }
    #home:not(:target) .main-title{
      visibility:hidden;position:absolute;left:68.5%;
      animation:title-slide-down 1.5s var(--smoothEase)
    }


    #disco:target #sub-disco,#folio:target #sub-folio,
    #bio:target #sub-bio,#berklee:target #sub-berklee,#about:target #sub-about
                                  {visibility:visible;position:relative;animation:reveal 1.5s var(--smoothEase)}
    [id]:not(:target) [id^="sub-"]{visibility:hidden;position:absolute;animation:conceal 1.5s var(--smoothEase)}


    @media screen and (max-width:900px){
        #home:target .main-title{left:1.8% }
        #home:not(:target) .main-title{left:51.8% }
        .main-title{flex-direction:column-reverse}
        
        #home-title{font-size: 15vw;letter-spacing: -0.4vw;-webkit-text-stroke:1px var(--accent);text-shadow:-1px 1px 2px #000}
        #home-subtitle .Stroke, #pg-subtitle{color:var(--link);-webkit-text-fill-color:var(--link);-webkit-text-stroke-width:0;-webkit-text-stroke-color:transparent}
        #home-subtitle .Stroke{font:200 4.5vw/1 var(--fontMainText)}
        #pg-subtitle{font:200 6vw/1 var(--fontMainText)}
        .head-img{display:none}
    }


/* ------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------!!! FOOTER RULES !!!---------------------------------------------- */


    #Footer{
      padding:3em 0 1em;overflow:hidden;
      font-size:.8vw;line-height:1.5em
    }
    .footer-img{height:5vw;transition:.3s} .footer-img:hover{transform:scaleX(1.08) scaleY(1)}
    #Footer a{letter-spacing:.1em} #Footer a:hover{letter-spacing:.15em} #Footer .Lined:hover {border-top:1px solid var(--accent);border-bottom:1px solid var(--accent)}
    
    @media screen and (max-width:900px){#Footer{padding:1rem 0 1rem;font-size:3.2vw} .footer-img{height:20vw} #Footer a:hover{letter-spacing:.1em}}


/* ------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------!!! NAVIGATION MENU !!!---------------------------------------------- */


    #Nav {transform:translate(0px);overflow:hidden}
    .nav-links {
      margin:auto;padding:.5%;
      font: 400 1.15vw var(--fontMainText);text-decoration:none
    }
    .nav-img {
      margin:.5%;position:fixed;
      width:8vw;height:auto
    }
    @media screen and (max-width:900px) {
        #Nav{letter-spacing:0}
        .nav-links{margin:3% 0 3% 0;font-size:4vw; padding:1.8%} .nav-img,.light{display:none} .light{animation-play-state:paused}
    }


    /* ! CANDLES */
    .Candles{visibility:visible}
    #about:target .Candles, #about:target .light {visibility:hidden}
    #about:target .light {animation:light-down 1.5s var(--smoothEase)}
    #about:target #candle-L > img {animation:candle-down-L .8s var(--smoothEase)} #about:not(target) #candle-L > img {animation:candle-up-L 1.5s var(--smoothEase)}
    #about:target #candle-R > img {animation:candle-down-R .8s var(--smoothEase)} #about:not(target) #candle-R > img {animation:candle-up-R 1.5s var(--smoothEase)}
    .light {
      width:25vw;height:25vw;bottom:-15%;
      text-align:center;background:radial-gradient(ellipse at center, rgba(200, 140, 100, 0.60) 0%, rgba(225, 200, 140, 0) 40%, rgba(255, 220, 180, 0) 90%);
      animation:light-up 1.5s var(--smoothEase),flicker 8s infinite ease-in-out;transition:.8s
    }

    /* ! ANGELS */
    #about:target .Angels{visibility:visible;opacity:1} #about:not(target) .Angels{visibility:hidden;opacity:0;animation-play-state:paused}

    #about:target #angel-L{animation:angel-leftIn 1.5s var(--smoothEase)} #about:not(target) #angel-L{animation:angel-leftOut .8s var(--smoothEase)}
    #about:target #angel-R{animation:angel-rightIn 1.5s var(--smoothEase)}  #about:not(target) #angel-R{animation:angel-rightOut .8s var(--smoothEase)}


/* ------------------------------------------------------------------------------------------------------------- */
/* -----------------------------------------!!! PAGE CONTAINER !!!---------------------------------------------- */


    #wrapper{width:75%}

    #box, #box-inner {
      position:relative;overflow:hidden;
      border:2px solid var(--accent);
      z-index:50
    }
    #box {
      margin:auto;padding:.3em;
      box-shadow:0 0 30px 1px var(--accent-sub);
      line-height:1.5em
    }
    #box-inner {padding:3%;background:var(--bg) url("/img/noise.webp") 100% repeat fixed}
    #box::before, #box::after,
    #box-inner::before, #box-inner::after {
      content:"•";
      position:absolute;
      width:1em;height:1em;
      box-sizing:border-box;border:2px solid var(--accent);
      
      color: var(--accent);text-align:center;font-size:1em;line-height:1em;
      z-index:99
    }
    #box::before{left:5px;top:5px} #box::after{right:5px;top:5px} #box-inner::before{left:-2px;bottom:-2px} #box-inner::after{right:-2px;bottom:-2px}

    #home:not(:target) #box{animation:box-up .3s var(--smoothEase) .301s forwards, box-fade 1.3s var(--smoothEase) forwards}
    #home:target #box{animation:box-down .3s var(--smoothEase) .301s forwards, box-fade 1.3s var(--smoothEase) forwards}


    @media screen and (max-width:900px) {
        #wrapper{width:100%} #box,#box-inner{border-left:transparent;border-right:transparent} #box{margin:0;padding-left:0;padding-right:0}
      
        #box::before,#box::after,#box-inner::before,#box-inner::after{display:none}
        #home:target .home-content,#disco:target .disco-content,#folio:target .folio-content,
        #bio:target .bio-content,#berklee:target .berklee-content,#about:target .about-content {animation:content-fade-in 1.3s var(--smoothEase) forwards}
    }


    .index {display:block}
    #home:target #box,#disco:target #box,#folio:target #box,
    #bio:target #box,#berklee:target #box,#about:target #box
      {display:block}
    #box,
    #home:target .index,#disco:target .index,#folio:target .index,
    #bio:target .index,#berklee:target .index,#about:target .index
      {display:none}

    #home:target .home-content,#disco:target .disco-content,#folio:target .folio-content,
    #bio:target .bio-content,#berklee:target .berklee-content,#about:target .about-content
      {visibility:visible;opacity:1;position:relative;animation:slide-up 1.5s var(--smoothEase), content-fade-in 1.3s var(--smoothEase) forwards}

    [id]:not(:target) [class$="-content"]
      {visibility:hidden;opacity:0;position:absolute;animation:content-fade-out 1.3s var(--smoothEase) forwards}


/* ------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------!!! HOME PAGE !!!------------------------------------------------ */


    .home-grid{
      display:grid;width:100%;gap:.5em;
      grid-template-rows:100%;grid-template-columns:70% 1fr;
      grid-auto-flow:column;grid-template-areas: "central updates"
    }

    .central{
      grid-area:central;
      padding:7px;overflow:hidden;width:100%;
      background:#000;border:2px solid var(--accent);border-radius: 0 0 0 25px;box-sizing:border-box;
      order:2;z-index:2
    }
    #central-img{
      mask-image:linear-gradient(to right, rgba(0, 0, 0, 1) 30%, transparent 100%);
      transition:.5s;animation:fade-in 3s ease
    }
    #central-title{
      bottom:8%;left:3%;z-index:80;
      font-size: 8vw;font-style:italic;letter-spacing:.15em;text-decoration:none;
      transition:.5s ease
    } #central-title:hover {letter-spacing:.2em;-webkit-text-fill-color:var(--accent);-webkit-text-stroke-width:1;-webkit-text-stroke-color:var(--link)} #central-title:hover + #central-img {opacity:.5}
    
    .central #central-announce{overflow:visible}
    #central-announce,
    #central-title {
      position:absolute;
      color: var(--accent);font-family:Druk;
    }
    #central-announce {
      grid-area:central;
      top:2%;right:30%;
      font-size:3.6vw;
      transform:rotate(10deg);animation:announcement .5s ease-in-out infinite;z-index:100
    }

    .updates{
      grid-area:updates;
      display:flex;flex-direction:column;
      position:relative;overflow:hidden;width:100%;
      background:#000;border:2px solid var(--accent);box-sizing:border-box;
      order:3
    }
    .news-title{
      padding:.25em;overflow-y:hidden;
      font:200 2.8vw/1 var(--fontMainText);font-style:normal;
      background:#111;border-bottom:1px solid var(--accent)
    }
    .news-container{overflow-y:auto;overflow-x:hidden;max-height:30vw;}
    .update{
      margin:.5em;padding:.5em;
      background-color:#111;border:var(--border-container);
      font-family:var(--fontDescriptions);font-size:90%
    } .update span::before{content:"▸ "}

    @media screen and (max-width:900px) {
      .home-grid{display:flex;flex-direction:column}
      .central{display:block;margin-top:0;border-radius:0}
      #central-img{position:relative;top:auto;mask-image:none}
      #central-announce {right:.5%;top:1%;font-size:9vw}
      #central-title{bottom:4%;font-size:15vw}
      .news-container{max-height:100vw}
      .news-title{font-size:4vw;letter-spacing:.5em}
    }


/* ------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------!!! DISCOGRAPHY PAGE !!!--------------------------------------------- */


    .disco-grid{
      display:grid;margin:auto;
      height:auto;width:100%;gap:1rem;
      grid-template:auto / 33.3% 1fr 1fr;
      grid-template-areas: "t6 t5 t4" "t3 t2 t1";
    }
    #t1{grid-area:t1} #t2{grid-area:t2} #t3{grid-area:t3}
    #t4{grid-area:t4} #t5{grid-area:t5} #t6{grid-area:t6}


  /* Discog cells */
    .cell{
      display:flex;position:relative;
      width: 80%;height:19vw;
      margin:auto;overflow:hidden;
      background:#000;border:var(--border-container);border-radius: 0 0 25px 25px;
      
      z-index:3;transition:.5s
    } .cell:hover{border:var(--border-container-active);box-shadow:0 0 25px 1px var(--accent-sub);z-index:5}

    .cell-img{
      grid-area:track;
      object-fit:fill;opacity:1;
      display:flex;flex-direction:column;
      position: absolute;left:50%;top:50%;
      -webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);
      
      z-index:0;transition:.5s
    }

    .cell-grid{
      display:grid;
      grid-template-rows:1fr 1.5em;grid-template-columns:100%;
      grid-auto-flow: column;grid-template-areas:"track""desc"
    }


    .desc, a .desc{
      grid-area:desc;
      display:flex;flex-direction:column;padding:.1em;position:relative;
      height:100%;width:100%;bottom:0;
      
      color: #777;text-align:center;font-family:var(--fontDescriptions);font-size: 1vw;font-weight:bold;text-shadow:none;
      background:#000;border-top:var(--border-container);
      z-index:10;transition:.3s
    } a .desc {top:50%}
    .desc:hover,a:hover .desc{ letter-spacing:.05em }
    .cell:hover .song{opacity:1} .cell:hover .cell-img{opacity:0.25} .cell:hover .desc{border-top:var(--border-container-active)}

    .song{
      grid-area:track;
      display:flex;flex-direction:column;
      position:absolute;padding:0;opacity:0;
      width:100%;height:auto;bottom: 2em;
      transform:translate(0,35px);
      
      z-index:1;transition:.5s
    } .song, .song:focus,.song:target{border:0;border-radius:0;box-shadow:none} .song:focus,.song:target{opacity:1}


    @media screen and (max-width:900px) {
        .disco-grid{
          width:98%;gap:2em;
          grid-template-columns:100%;grid-template-areas:"t5""t4""t3""t2""t1"
        }
      
        .cell-grid{ grid-template-rows:65% 1fr 2.4rem;grid-template-columns:100%;grid-template-areas:"image""track""desc"}
        .cell{max-width:100%;height: 17em;border-radius:0} .cell-img{grid-area:image}
        .song{opacity:1} .desc{font-size:.7em;letter-spacing:.2em} a:hover .desc{letter-spacing:0}
        .about-columns{display:block;width:100%;text-align:left}
    }


/* ------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------- !!! BERKLEE PORTFOLIO !!! ------------------------------------------- */


    .berklee-projects {
      padding:1.5em;
      overflow:hidden;
      border:var(--border-container);border-radius:0 0 2em 2em;
      font-size:90%;
      
      background:var(--scroll) url("/img/tubefloor.webp") 25% repeat fixed;background-blend-mode:overlay;
    }

    .berklee-title {
      margin:0;
      text-align:left;
      font-family: var(--fontMainText);font-size:1.15em;
      letter-spacing: .1rem
    }


    .berklee-img {
      padding:0;
      overflow:visible;
      justify-content:space-between;
      background:#000
    }
    .berklee-img img {
      object-fit:cover;
      border:var(--border-container);
      
      transition: .5s
    }
    .berklee-img img:hover {
      border:var(--border-container-active);box-shadow:0 0 30px 1px var(--accent-sub);
      cursor:pointer
    }
    .berklee-img a {
      display:inline-block;
      width:23%
    }
    
    audio, video {
      width:100%;height:100%;
      border:2px solid var(--border);box-shadow:none;
      border-radius:.5em;
      overflow:hidden;transition:.3s
    }
    
    audio::-webkit-media-controls-enclosure {
    width:100%;
    background-color:transparent;
    -moz-border-radius:0 !important;
    -webkit-border-radius:0 !important;
    border-radius:0 !important;
    overflow:hidden;
    }
    audio::-webkit-media-controls-panel {
        background-color:#c2c2c2;
        height:auto !important;
    }
    
    audio:focus, video:focus {border:2px solid var(--accent);box-shadow:0 0 20px 1px var(--accent-sub)}


/* ------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------- !!! ABOUT PAGE RULES !!! ------------------------------------------- */


    .about-columns, .about-columns p {
      display:inline-block;
      text-align:center;
      vertical-align:top;
      margin:2%;
      width:28%;
      padding:auto
    }
    .about-content a{text-decoration:underline}


    @media screen and (max-width:900px) {
      .about-columns{display:block;width:100%;text-align:left}
      .br-about{display:block}
    }


/* ------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------- !!! ABOUT SUMMARY & DETAILS !!! --------------------------------------- */


    details{display:block;transition:.8s}
    details[open] > summary{text-decoration:underline} details[open] summary ~ *{animation:slide-down .5s var(--smoothEase),fade-in 1s ease-out;animation-fill-mode:forwards}

    summary {
      display:list-item;margin:auto;width:60vw;
      text-align:center;font-size:1.25em;
      cursor:pointer;user-select:none;transition:.3s
    }

    details > div {
      display:flex;flex-wrap:wrap;
      overflow: auto;
      user-select: none;
      padding: 0 20px;
      height: 100%
    } details > div > p{flex:1}

    details > div > img {
      align-self:flex-start;
      margin-top:20px;
      max-width:100%
    }


/* ------------------------------------------------------------------------------------------------------------- */
/* -----------------------------------------!!! ABOUT BANDS GRID !!!-------------------------------------------- */


    .bands-grid {
      margin-top:1em;
      text-align:center;text-decoration:none;justify-content:center
    }

    .bands {
      display:inline-block;overflow:hidden;
      margin:.5em .25rem .5em .25rem;
      width:5.5rem;height:5.5rem;
      
      background:#000;border:var(--border-container);text-align:center;
      transition:.3s;animation:fade-in .3s ease
    } .bands:hover{border:var(--border-container-active)}
    .bands-cover{object-fit:cover} .bands-fill{object-fit:fill} .bands-long {width: 12.5rem}


    @media screen and (max-width: 900px) {
        .bands{margin:.4rem;width:5rem;height:5rem}
        .bands-long{width: 11.2rem}
    }


/* ------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------!!! TOOLTIPS !!!--------------------------------------------------- */


    [data-tooltip]{position:relative}
    [data-tooltip]::before,[data-tooltip]::after{
      display:none;position:absolute;opacity:0;
      text-transform:none;font-size:.8em;line-height:1;letter-spacing:1px;
      background:#000;border:1px solid var(--accent)
    }

    [data-tooltip]::after{
      content:attr(data-tooltip);
      padding:6px 8px;width:18em;
      border-radius:3px;
      color:var(--link);text-align:center;white-space:normal;
      z-index:100
    }

    [data-tooltip]:hover::before,[data-tooltip]:hover::after{display:block}
    [data-tooltip='']::before,[data-tooltip='']::after{display:none !important}


  /* Positioning */
    [data-tooltip]:not([data-flow])::before,
    [data-tooltip][data-flow^="top"]::before {
      bottom:100%;
      border-bottom-width:0;border-top-color:var(--accent)
    }

    [data-tooltip]:not([data-flow])::after,[data-tooltip][data-flow^="top"]::after{bottom:calc(100% + 5px)}
    [data-tooltip][data-flow^="bottom"]::after {top:calc(100% + 5px)}

    [data-tooltip]:not([data-flow])::before,[data-tooltip]:not([data-flow])::after,
    [data-tooltip][data-flow^="top"]::before,[data-tooltip][data-flow^="top"]::after{left:50%;transform:translate(-50%, -0.4em)}
    [data-tooltip][data-flow^="bottom"]::before,[data-tooltip][data-flow^="bottom"]::after{left:50%;transform:translate(-50%, 0.4em)}

  /* Animation */
    @keyframes tooltip-vert{to {opacity:1;transform:translate(-50%, 0)}}
    [data-tooltip]:not([data-flow]):hover::before,[data-tooltip]:not([data-flow]):hover::after,
    [data-tooltip][data-flow^="top"]:hover::before,[data-tooltip][data-flow^="top"]:hover::after,
    [data-tooltip][data-flow^="bottom"]:hover::before,[data-tooltip][data-flow^="bottom"]:hover::after{animation:tooltip-vert .5s ease-out forwards}
    
    @media screen and (max-width:900px){@keyframes tooltip-vert{to {opacity:0}}}


/* ------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------!!! ANIMATIONS !!!----------------------------------------------- */


    @keyframes fade-in{0% {opacity:0} 100% {opacity:1}}
    @keyframes fade-out{0% {opacity:1} 100% {opacity:0}}

    @keyframes content-fade-in{
      0% {opacity:0;max-height:0;visibility:hidden;position:absolute;display:none}
      25% { visibility:visible; position:absolute }
      26% { max-height:100%; opacity:0; position:relative; display:block }
      100% {opacity:1}
    }
    @keyframes content-fade-out{
      0% {opacity:1;max-height:inherit;visibility:visible;position:relative;display:block}
      25% { opacity:0; max-height:inherit; position:relative }
      26% { max-height:0; visibility:hidden; position:absolute; display:none }
    }
    
    @keyframes box-fade{0%{opacity:0} 30%{opacity:0} 100%{opacity:1}}
    @keyframes box-up{0% {margin-top:6vw} 100% {margin-top:0}}
    @keyframes box-down{0% {margin-top:-6vw} 100% {margin-top:0}}
      
    @media screen and (max-width:900px) {
        @keyframes box-up{0% {margin-top:0} 100% {margin-top:0}}
        @keyframes box-down{0% {margin-top:0} 100% {margin-top:0}}
    }


    @keyframes slide-up{0% {transform:translateY(15em)} 100% {transform:translateY(0)}}
    @keyframes slide-down{0% {transform:translateY(-1em)} 100% {transform:translateY(0)}}

    @keyframes title-slide-up {
      0% { transform:translate(0, 80%); opacity:0; visibility:hidden; position:absolute }
      20% { visibility:hidden; position:absolute }
      21% { transform:translate(0, 80%); opacity:0; visibility:visible; position:relative }
      100% { transform:translate(0, 0); opacity:1; visibility:visible; position:relative }
    }
    @keyframes title-slide-down {
      0% { transform:translate(-50%, 0); opacity:1; visibility:visible; position: relative }
      20% { transform:translate(-50%, 80%); opacity:0; visibility:visible; position: relative }
      21% { visibility:hidden; position: absolute }
    }


    @keyframes reveal {
      0% {clip-path:polygon(0% 50%,0% 50%,100% 50%,100% 50%);visibility:hidden;position:absolute}
      20% {visibility:hidden;position:absolute}
      21% {visibility:visible;position:relative}
      30% {clip-path:polygon(0% 50%,0% 50%,100% 50%,100% 50%);visibility:visible;position:relative}
      100% {clip-path:polygon(0% 0%,0% 100%,100% 100%,100% 0%);visibility:visible;position:relative}
    }
    @keyframes conceal {
      0% {clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);visibility:visible;position:relative}
      20% {clip-path: polygon(50% -10%,50% -10%,50% 100%,50% 100%);visibility:visible;position:relative}
      21% {visibility:hidden;position:absolute}
    }


    @keyframes candle-down-L{0% {transform:translateY(0);visibility:visible} 100% {transform:translateY(100%);visibility:hidden}}
    @keyframes candle-down-R{0% {transform:translateY(0) scaleX(-1);visibility:visible} 100% {transform:translateY(100%) scaleX(-1);visibility:hidden}}
    @keyframes candle-up-L{0% {transform:translateY(100%);visibility:hidden} 30% {transform:translateY(100%);visibility:visible} 100% {transform:translateY(0);visibility:visible}}
    @keyframes candle-up-R{0% {transform:translateY(100%) scaleX(-1);visibility:hidden} 30% {transform:translateY(100%) scaleX(-1);visibility:visible} 100% {transform:translateY(0) scaleX(-1);visibility:visible}}

    @keyframes angel-leftIn{0% {transform:translateX(-100%);opacity:0;visibility:hidden;display:none} 30% {transform:translateX(-100%);opacity:0;visibility:visible;display:block} 100% {transform:translateX(0);opacity:1;visibility:visible;display:block}}
    @keyframes angel-rightIn{0% {transform:translateX(100%) scaleX(-1);opacity:0;visibility:hidden;display:none} 30% {transform:translateX(100%) scaleX(-1);opacity:0;visibility:visible;display:block} 100% {transform:translateX(0) scaleX(-1);opacity:1;visibility:visible;display:block}}
    @keyframes angel-leftOut{0% {transform:translateX(0);opacity:1;visibility:visible;display:block} 100% {transform:translateX(-100%);opacity:0;visibility:hidden;display:none}}
    @keyframes angel-rightOut{0% {transform:translateX(0) scaleX(-1);opacity:1;visibility:visible;display:block} 100% {transform:translateX(100%) scaleX(-1);opacity:0;visibility:hidden;display:none}}

    @keyframes flicker{from {opacity:.7} 4% {opacity:.9} 8% {opacity:.65} 12% {opacity:.85} 16% {opacity:.6} 20% {opacity:.7} 24% {opacity:.8} 28% {opacity:.55} 32% {opacity:.6} 36% {opacity:.75} 40% {opacity:.6} 44% {opacity:.8} 48% {opacity:.65} 52% {opacity:.5} 56% {opacity:.90} 60% {opacity:.7} 64% {opacity:.85} 68% {opacity:.65} 72% {opacity:.7} 76% {opacity:.6} 80% {opacity:.85} 84% {opacity:.6} 88% {opacity:.55} 92% {opacity:.8} 96% {opacity:.6} to {opacity:.7}}
    @keyframes light-up{from {opacity:.7;transform:translateY(100%);visibility:hidden} 32% {transform:translateY(100%);visibility:visible} to {transform:translateY(0);visibility:visible}}
    @keyframes light-down{from {opacity:.7;transform:translateY(0);visibility:visible} to {transform:translateY(100%);visibility:hidden}}
    
    @keyframes announcement {
      from { transform: scale(1) rotate(10deg) }
      50% { transform: scale(1.05) rotate(10deg) }
      to { transform: scale(1) rotate(10deg) }
    }


/* ------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------!!! FONT SELECTION !!!--------------------------------------------- */


    @font-face {
      font-family:'Atacama';
      src: url(/fonts/Atacama/Light-Cond/AtacamaTrial-Light-Cond.woff2) format('woff2'),url(/fonts/Atacama/Light-Cond/AtacamaTrial-Light-Cond.woff) format('woff'),url(/fonts/Atacama/Light-Cond/AtacamaTrial-Light-Cond.otf) format('opentype');
      font-style: normal; font-weight: 400
    }
    @font-face {
      font-family:'Druk';
      src: url(/fonts/Druk/Druk-Bold-Regular.woff2) format('woff2'),url(/fonts/Druk/Druk-Bold-Regular.woff) format('woff'),url(/fonts/Druk/Druk-Bold-Regular.otf) format('opentype');
      font-style: normal; font-weight: 400
    }
    @font-face {
      font-family:'Mondwest';
      src: url(/fonts/Mondwest/PPMondwest-Regular.woff2) format('woff2'),url(/fonts/Mondwest/PPMondwest-Regular.woff) format('woff'),url(/fonts/Mondwest/PPMondwest-Regular.otf) format('opentype');
      font-style: normal; font-weight: 400
    }
    @font-face {
      font-family:'P22LateNovember';
      src: url(/fonts/P22LN/P22LN.woff2) format('woff2'),url(/fonts/P22LN/P22LN.woff) format('woff'),url(/fonts/P22LN/P22LateNovember.otf) format('opentype');
      font-style: normal; font-weight: 400
    }