@import url('https://fonts.googleapis.com/css2?family=Chilanka&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Grandstander');
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(https://shrimpshore.neocities.org/js/GLightbox/glightbox.css);

@font-face { font-family: 'Grandstander'; src: url("https://fonts.googleapis.com/css2?family=Grandstander") format("truetype"); }

::-moz-selection { 
    color: #254799;
    background: #7ebdff; } 

::selection {
    color: #254799;
    background: #7ebdff;
}
@media (max-width: 768px) {
  .algaeleft, .algaeright {
    display: none;
  }
}
*::-webkit-scrollbar {
    width: 10px;
}
*::-webkit-scrollbar-thumb {
    border: 1px solid #31426b;
    background: #8492ec;
    border-radius: 0px;
}
*::-webkit-scrollbar-track {
    background: #383854;
    border: 1px solid #392d45;
}

body {
    background-image: url("https://file.garden/aZymIxSvfEnxBYI_/Website%20pages/BG.png"); /*https://recolor.me/images/site/header_underwater.jpg*/
    background-repeat: no-repeat;
    background-size: auto;
    background-color: #002a77; /*#0198dd*/
    font-family: 'Chilanka', monospace;
    color: #151583;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}



h1 {
    text-shadow: 2px 2px yellow;
    font-family: Chilanka; /* Question */
    font-family: 'Grandstander';
}
h3 {
    text-shadow: 1px 1px yellow;
    font-family: Chilanka; /* Question */
}

.coolbutton {
    margin-top: 10px;
    background: linear-gradient(0deg, #1771b5, #00ffda);
    padding: 10px;
    border: 3px solid white;
    border-radius: 20px;
    font-family: 'Grandstander';
    text-shadow: 1px 1px darkblue;
    text-align: center;
    text-wrap-mode: nowrap;
    }


a         { color: white; cursor: pointer; text-decoration: none; transition: 0.2s; }
a:visited { color: yellow; }
a:hover   { color: orange; }

ul.navigationnnnn {
    background: none; /* Background da navigation bar */
    display: flex;
    align-content: center;
    justify-content: space-around;
    flex-direction: row;
    margin: 0;
    align-items: center;
}

.navigationnnnn li::marker { content: none; } 

.navigationnnnn a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-family: 'Grandstander';
    font-size: 23px;
    text-shadow: 1px 1px #015b85, -1px 1px #015b85, -1px -1px #015b85, 1px 1px #015b85, 2px 2px #1c59b3ad ;
}

.navigationnnnn span {
    background: #271e704a;
    padding: 6px 10px;
    border-radius: 20px;
        backdrop-filter: blur(5px);
    position: absolute;
    top: 67px;
}

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

@media only screen and (max-width: 700px) {  
  
  ul.navigationnnnn { flex-direction: column; }
  
  }
  
  /* BODY */
  

.layout {
  display: grid;
  grid-template-columns: 225px 1fr 225px; /* left | center | right */
  gap: 20px; /* space between columns */
  padding: 0 150px;
}

.left {
  background: #10CEEB;
  padding: 20px;
}

.content {
  background: #ffffff;
  padding: 20px;
}

.right {
  background: #10CEEB;
  padding: 20px;
  position: sticky
}

.left, .content, .right {
  background: rgba(255, 255, 255, 0.2); /* color */
  backdrop-filter: blur(10px); /* glass effect */
  border: 2px dashed rgba(255, 255, 255, 0.5);
  border-radius: 30px;
      display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
  
.content-inner {
      display: flex;
      align-items: center;   /* vertically align */
      gap: 20px;             /* space between text and image */
}

.content-inner img {
    width: 300px;          /* control image size */
    height: auto;
    border-radius: 10px;
    max-width: 100%;
    background-color: white;
    box-shadow: #FFEB3B 0px 0px 4px;
    transform: rotate(-2deg);
    padding: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: #0081ff;
    border-image: initial;
    transition: transform 0.2s ease-in-out;
    
}

.content-inner img:hover {
  
  transform: rotate(0deg);
  }

.float-img {
    float: right;
        width: 100%;
    border-radius: 8px;
}

.profileimage {    margin: 0 0 10px 10px;  }
  
.layoutcomic {
    gap: 20px; /* space between columns */
    padding: 0 150px;
    } 
        
  @media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .left, .right {
    order: -1; /* optional: move sidebars above content */
  }
}

/* --- Bubbles --- */

.bubbles {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none; /* So it doesn't block clicks */
}

.bubbles span {
  position: absolute;
  bottom: -50px;

  width: 30px;    /* SIZE */
  height: 30px;   /* SIZE */
  
  /*background: rgba(255, 255, 255, 0.2);*/
  /*border-radius: 50%;*/

  animation: rise 10s linear infinite;
}

@keyframes rise {
  0% {
    transform: translateY(0) translateX(0);
  }
  100% {
    transform: translateY(-110vh) translateX(50px);
  }
}

.bubbles span:nth-child(1) {
  left: 3%;
  width: 15px;
  height: 15px;
  animation-duration: 8s;
}

.bubbles span:nth-child(2) {
  left: 5%;
  width: 25px;
  height: 25px;
  animation-duration: 12s;
}

.bubbles span:nth-child(3) {
  left: 93%;
  animation-duration: 10s;
}

.bubbles span:nth-child(4) {
  left: 95%;
  width: 18px;
  height: 18px;
  animation-duration: 9s;
}

.bubbles span {
  background-image: url("https://file.garden/aZymIxSvfEnxBYI_/bobble.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /*background: radial-gradient(circle at 30% 30%, #ffffffaa, #ffffff22);
  box-shadow: inset 0 0 10px rgba(255,255,255,0.5);*/
}

/* End of Bubbles */

/* --- Start of Fish --- */

.fish {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none; /* Doesn't block clicks */
}

.fish span {
  position: absolute;
  left: -50px;
  animation: moveHorizontal 10s linear infinite;
}


.seashellheader { width: 100%; max-width: 198px; image-rendering: pixelated; content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c96008de-510c-4309-afd6-594e4d8f9008/d9y7g8x-d1e449fc-eb32-48cf-b957-f2570d07bde5.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiIvZi9jOTYwMDhkZS01MTBjLTQzMDktYWZkNi01OTRlNGQ4ZjkwMDgvZDl5N2c4eC1kMWU0NDlmYy1lYjMyLTQ4Y2YtYjk1Ny1mMjU3MGQwN2JkZTUuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.Oo-parj6tqn5p2Q_PNcSsLHAcmUKSA7dLQ1Gp79C7Dw); }


@keyframes moveHorizontal {
  from {
    transform: translateX(-100px);
  }
  to {
    transform: translateX(110vw);
  }
}

.fish span:nth-child(1) {
  top: 20%;
  width: 50px;
  height: 50px;
  animation-duration: 8s;
}

.fish span:nth-child(2) {
  top: 40%;
  width: 25px;
  height: 25px;
  animation-duration: 12s;
}

.fish span:nth-child(3) {
  top: 60%;
  width: 50px;
  height: 50px;
  animation-duration: 10s;
}

.fish span:nth-child(4) {
  top: 80%;
  width: 25px;
  height: 25px;
  animation-duration: 9s;
}

.fish span {
  background-image: url("https://blob.gifcities.org/gifcities/EFKD6LJAHXDCOJIEBQXDSV4ED3MTSUYO.gif");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /*background: radial-gradient(circle at 30% 30%, #ffffffaa, #ffffff22);*/
}

/* End of fish */

    .fixedbutton {
    /* Future Go up button fixed to the bottom right corner */
    }
    
    /* FOOTER */
    
.footer {
  position: relative;
  margin-top: 30px;
  padding: 25px 0;
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #ccc;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
}

.algaeleft {
  position: absolute;
  top: -590px; /* pushes it ABOVE the footer */
  left: 5%;
  transform: translateX(-50%);
  width: 150px;
  pointer-events: none;
  z-index: -1;
}

.algaeright {
  position: absolute;
  top: -590px; /* pushes it ABOVE the footer */
  left: 95%;
  transform: translateX(-50%);
  width: 150px;
  pointer-events: none;
  z-index: -1;
}
    
.CharacterHighlight img {
      width: 100%;
      margin: auto;
          border-radius: 20px 20px 0 0; 
}
    
.CharacterHighlight p {
    background: #436ae663;
    margin: 0;
    text-align: center;
    padding: 7px;
    border-radius: 0px 0px 20px 20px;
}

.CharacterHighlight a {
    font-family: 'Chilanka';
    font-size: 20px;
    text-shadow: 1px 2px 1px #4e00d9;
    display: flex;
    flex-direction: column;
}
    
    /* Character profiles */
    
.container {
      display: flex;
      gap: 16px;           /* space between columns */
      align-items: flex-start;
      flex-wrap: wrap;     /* allows wrap on narrow screens */
}
.col {
      flex: 1 1 30%;       /* grow, shrink, base width ~30% */
      min-width: 200px;    /* prevents columns becoming too small */
      padding: 12px;
      box-sizing: border-box;
      border: 1px solid #ddd;
}

.profile {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
  background: rgba(255,255,255,0.05);
  border-radius: 15px;
}

.top-section {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
}
.image img {
  width: 100%;
  border-radius: 10px;
}

.info {
  background: rgba(255,255,255,0.02);
  padding: 15px;
  border-radius: 10px;
  
}

.infoleft {
  background: rgba(255,255,255,0.02);
  padding: 15px;
  float: left;
}
.inforight {
  background: rgba(255,255,255,0.02);
  padding: 15px;
  float: right;
}

.info p {
  margin: 8px 0;
}

.bio {
  margin-top: 20px;
  padding: 20px;
  border-radius: 10px;

  background: rgba(255,255,255,0.05);
}
.name {
  text-align: center;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .top-section {
    grid-template-columns: 1fr;
  }
}

.bar {
  background: #333;
  height: 8px;
  border-radius: 5px;
}

.fill {
  background: #4caf50;
  height: 100%;
  border-radius: 5px;
}


/* ==== CHARACTER PROFILES */

.CharacterProfile h3 {
    text-shadow: none;
}

.CharacterProfile a {
    color: #ffffa2;   
}
.CharacterProfile a:hover {
    color: #e99f5e;
}

.CharacterProfile {
    width: 60%;
    /*max-width: 1200px;*/
    margin: auto;
    margin-top: 10px;
}
  
.CharacterQuote {
    background: orange;
    text-align: center;
    padding: 25px 15px;
    font-size: 25px;
    font-family: 'Grandstander';
}
  
  .CharacterQuote p {
    margin: 0;
    padding: 0;
    font-family: 'Grandstander';
    }
    
.CharacterMain h1 {
    display: flex;
    background: #35508F;
    margin: 0;
    padding: 10px 0px;
    justify-content: center;
}
  
.CharacterInfobox { display: flex; justify-content: space-evenly; align-items: center; }
    
.CharacterImage {    
    background: blue;
    width: 100%;
    max-width: 350px;
    display: flex;
    justify-content: center;
    }
    
.CharacterTraits {     width: 100%;
    display: flex;
    gap: 10px; justify-content: space-between; }
    
    .CharacterTraits span {
    text-align: right;
}
  
  .CharacterTraits h3 { margin: 0; }
  
  .CharacterTraits section {
    background: #35508F;
        display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
    padding: 15px !important;
    border-bottom: 1px solid white;
  }  
  
  .CharacterTraits > div { width: 100%; }
  .CharacterTraits > div > section:last-child { border: none; }
  
  .CharacterImage img { width: 100%; object-fit: cover; }

  .CharacterBlocks { display: flex; justify-content: space-around; align-items: stretch; gap: 5px; }

  .CharacterTastes { display: flex; justify-content: space-evenly; gap: 5px; }
  .CharacterTastes > div { width: 100%; }

  .CharacterAppearances { width: 100%; max-width: 420px; }

  .CharacterFacts { width: 100%; }
  
  .CharacterFacts li::marker { content: ""; /* a bolinha antes do coiso */ }

  .CharacterBlocks ul { margin: 0; }
  
  .CharacterBlocks li { background: none; font-size: 20px; font-family: 'Chilanka'; margin: 0; padding: 15px; border-bottom: 1px solid white;     display: block; }
  .CharacterBlocks li:last-child { border-bottom: none; }
 
.CharacterTraits section, .CharacterBlocks ul {
    background: #97ffff45;
    padding-left: 0;
    backdrop-filter: blur(15px);
    
}



  .CharacterBlocks h3 {     text-align: center;
    font-size: 24px;
    margin: 0;
    padding: 16px 0 10px 0; background: darkred; }


  

  .CharacterTrivia { /*background: orange;*/ }
  
  .CharacterStory {
    color: white;
    padding: 0 15px;
    margin: 0;
    font-family: 'Chilanka';
    height: 370px;
    overflow: auto;
    background: #35508F;
}

.CharacterRelation {
    display: flex;
    gap: 15px;
    padding: 10px;
    background: #53ad75;
    text-shadow: none;
    color: white;
}

.RelationIcon img {
    border-radius: 50%;
        border-radius: 50%;
    max-width: 150px;
}

.CharacterRelation h3 {
    margin: 0;
    border-bottom: 1px solid blue;
    padding: 10px 0;
}

.RelationDescription {
    height: 150px;
    overflow: auto;
}

.CharacterRelationships {
    columns: 2;
    gap: 0;
}
  
  .CharacterMain h1, .CharacterBlocks h3 {
    background: #191f6c5c;
    color: white;
    text-shadow: 1px 1px darkblue;
}


.CharacterStory, .CharacterRelation, .glbox-container {
    background: #35508F;
}


/* ==== OC HUB ==== */

 .OCHub { max-width: 1000px; margin: auto; }
 .OCHub h1 { margin: 0; }
 .OCHub h2 { font-size: 25px; text-shadow: 2px 0px cyan; margin: 10px 0; }
 
 .OCHub_Group { display: flex; justify-content: space-evenly; width: 100%; flex-wrap: wrap; gap: 20px; align-items: center; background: #1b125f2e; padding: 15px; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; }
 
 .OCHub_OC { border: dashed 1px #01283bbd; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; box-shadow: 5px 5px 0px #01283b50; background: #01283bbd; width: 150px; height: 100%; transition: 0.3s; }
 .OCHub_OC:hover { transform: translatey(-10px); background: #1bad93; }
 .OCHub_OC a { display: flex; flex-direction: column; width: 100%; align-items: center; gap: 5px; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; }

 .OCHub_Icon { border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; height: 150px; transition: 0.5s; width: 140px; margin-top: 5px; object-fit: cover; }

 .OCHub_Name { font-family: 'Grandstander'; color: white; font-size: 20px; padding: 0 10px 5px; text-align: center; text-shadow: 1px 1px #151583; letter-spacing: 1px; margin: 0; }    
    
 .OCHub_Desc { width: 100%; max-width: 700px; text-align: center; letter-spacing: 0.5px; }
 .OCHub_Desc p { color: white; font-size: 19px; line-height: 22px; margin: 5px 0; }




/** === UGHHHGHH ===*/
/* ==== GLightbox ==== */
.glbox-container li { padding: inherit; }
.glbox-container ul, .glbox-container li::marker { content: ''; }


.glbox-container {
    display: flex;
    margin: 0;
    padding: 0;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}


.glbox { opacity: 0; -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); -webkit-transition: opacity 0.2s, -webkit-transform 0.35s; transition: opacity 0.2s, -webkit-transform 0.35s; -o-transition: opacity 0.2s, transform 0.35s; transition: opacity 0.2s, transform 0.35s; transition: opacity 0.2s, transform 0.35s, -webkit-transform 0.35s; }
.glbox.show { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: opacity 0.4s, -webkit-transform 0.35s; transition: opacity 0.4s, -webkit-transform 0.35s; -o-transition: opacity 0.4s, transform 0.35s; transition: opacity 0.4s, transform 0.35s; transition: opacity 0.4s, transform 0.35s, -webkit-transform 0.35s; }
.glbox .inner { padding: 5px; }
.glbox img { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, 3px, 0); transform: translate3d(0, 3px, 0); -webkit-box-shadow: var(--text-effect); box-shadow: var(--text-effect); background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, var(--text-color)), to(var(--link-color))); background: -o-linear-gradient(top, var(--text-color) 40%, var(--link-color)); background: linear-gradient(180deg, var(--text-color) 40%, var(--link-color)); border-radius: 5px; height: 150px; padding: 5px; max-width: 370px; -o-object-fit: cover; object-fit: cover; }
.glbox a::before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: var(--innerbox-color2); z-index: 99; opacity: 0; -webkit-transition: opacity 0.4s; -o-transition: opacity 0.4s; transition: opacity 0.4s; }

.glightbox-container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999 !important;
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  outline: none; }

.glightbox-container.inactive { display: none; }
.glightbox-container .gcontainer { position: relative; width: 100%; height: 100%; z-index: 9999; overflow: hidden; }
.glightbox-container .gslider {
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  -o-transition: transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.glightbox-container .gslide {
  width: 100%;
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  opacity: 0; }

.glightbox-container .gslide.current { opacity: 1; z-index: 99999; position: relative; }
.glightbox-container .gslide.prev { opacity: 1; z-index: 9999; }
.glightbox-container .gslide-inner-content { width: 100%; }

.glightbox-container .ginner-container {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 100%;
  margin: auto;
  height: 100vh; }

.glightbox-container .ginner-container.gvideo-container { width: 100%; }
.glightbox-container .ginner-container.desc-bottom, .glightbox-container .ginner-container.desc-top { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.glightbox-container .ginner-container.desc-left, .glightbox-container .ginner-container.desc-right { max-width: 100% !important; }
.gslide iframe, .gslide video { outline: none !important; border: none; min-height: 165px; -webkit-overflow-scrolling: touch; -ms-touch-action: auto; touch-action: auto; }
.gslide:not(.current) { pointer-events: none; }
.gslide-image { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.gslide-image img {
  max-height: 100vh;
  display: block;
  padding: 0;
  float: none;
  outline: none;
  border: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  max-width: 100vw;
  width: auto;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  -ms-touch-action: none;
  touch-action: none;
  margin: auto;
  min-width: 200px; }

.desc-top .gslide-image img, .desc-bottom .gslide-image img { width: auto; }
.desc-left .gslide-image img, .desc-right .gslide-image img { width: auto; max-width: 100%; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.gslide-image img.zoomable { position: relative; }
.gslide-image img.dragging { cursor:var(--cursor-move) !important; -webkit-transition: none; -o-transition: none; transition: none; }
.gslide-video { position: relative; max-width: 100vh; width: 100% !important; }
.gslide-video .plyr__poster-enabled.plyr--loading .plyr__poster { display: none; }
.gslide-video .gvideo-wrapper { width: 100%; margin: auto; }
.gslide-video::before { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(255, 0, 0, 0.34); display: none; }
.gslide-video.playing::before { display: none; }
.gslide-video.fullscreen { max-width: 100% !important; min-width: 100%; height: 75vh; }
.gslide-video.fullscreen video { max-width: 100% !important; width: 100% !important; }
.gslide-inline { background: #fff; text-align: left; max-height: calc(100vh - 40px); overflow: auto; max-width: 100%; margin: auto; }
.gslide-inline .ginlined-content { padding: 20px; width: 100%; }
.gslide-inline .dragging { cursor:var(--cursor-move) !important; -webkit-transition: none; -o-transition: none; transition: none; }
.ginlined-content { overflow: auto; display: block !important; opacity: 1; }
.gslide-external { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; min-width: 100%; background: #fff; padding: 0; overflow: auto; max-height: 75vh; height: 100%; }
.gslide-media { display: -webkit-box; display: -ms-flexbox; display: flex; width: auto; }
.zoomed .gslide-media { -webkit-box-shadow: none !important; box-shadow: none !important; }
.desc-top .gslide-media, .desc-bottom .gslide-media { margin: 0 auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.gslide-description { position: relative; -webkit-box-flex: 1; -ms-flex: 1 0 100%; flex: 1 0 100%; }
.gslide-description.description-left, .gslide-description.description-right { max-width: 100%; }
.gslide-description.description-bottom, .gslide-description.description-top { margin: 0 auto; width: 100%; }
.gslide-description p { margin-bottom: 12px; }
.gslide-description p:last-child { margin-bottom: 0; }
.zoomed .gslide-description { display: none; }
.glightbox-button-hidden { display: none; }
.glightbox-mobile .glightbox-container .gslide-description {
  height: auto !important;
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 19px 11px;
  max-width: 100vw !important;
  -webkit-box-ordinal-group: 3 !important;
  -ms-flex-order: 2 !important;
  order: 2 !important;
  max-height: 78vh;
  overflow: auto !important;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.75)));
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
  -webkit-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
  padding-bottom: 50px;
  min-height: auto; }

.glightbox-mobile .glightbox-container .gslide-title { color: #fff; font-size: 1em; }
.glightbox-mobile .glightbox-container .gslide-desc { color: #a1a1a1; }
.glightbox-mobile .glightbox-container .gslide-desc a { color: #fff; font-weight: bold; }
.glightbox-mobile .glightbox-container .gslide-desc * { color: inherit; }
.glightbox-mobile .glightbox-container .gslide-desc .desc-more { color: #fff; opacity: 0.4; }

.gdesc-open .gslide-media { -webkit-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; transition: opacity 0.5s ease; opacity: 0.4; }
.gdesc-open .gdesc-inner { padding-bottom: 30px; }
.gdesc-closed .gslide-media { -webkit-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; transition: opacity 0.5s ease; opacity: 1; }
.greset { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.gabsolute { position: absolute; }
.grelative { position: relative; }

.glightbox-desc { display: none !important; }
.glightbox-open { overflow: hidden; }

.gloader {
  height: 25px;
  width: 25px;
  -webkit-animation: lightboxLoader 0.8s infinite linear;
  animation: lightboxLoader 0.8s infinite linear;
  border: 2px solid #fff;
  border-right-color: transparent;
  border-radius: 50%;
  position: absolute;
  display: block;
  z-index: 9999;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 47%; }

.goverlay { width: 100%; height: calc(100vh + 1px); position: fixed; top: -1px; left: 0; background: #000; will-change: opacity; }
.glightbox-mobile .goverlay { background: #000; }

.gprev, .gnext, .gclose {
  z-index: 99999;
  cursor: var(--cursor-pointer);
  width: 26px;
  height: 44px;
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column; }

.gprev.disabled, .gnext.disabled, .gclose.disabled { opacity: 0.1; }
.gbtn.focused { outline: 2px solid #0f3d81; }
iframe.wait-autoplay { opacity: 0; }
.glightbox-closing .gnext, .glightbox-closing .gprev, .glightbox-closing .gclose { opacity: 0 !important; }
.glightbox-clean .gslide-description { background: #fff; border-radius: 0 25px 25px 0; }
.glightbox-clean .gdesc-inner { padding: 22px 20px; }
.glightbox-clean .gslide-title { font-size: 22px; letter-spacing: 0.5px; font-family: var(--secondary-font); margin-bottom: 0; }
.glightbox-clean .gslide-desc { font-size: 0.86em; margin-bottom: 0; line-height: 1.4em; }
.glightbox-clean .gprev, .glightbox-clean .gnext, .glightbox-clean .gclose { -webkit-box-shadow: inherit; box-shadow: inherit; -ms-interpolation-mode: nearest-neighbor; image-rendering: -webkit-optimize-contrast; image-rendering: -moz-crisp-edges; image-rendering: -o-pixelated; image-rendering: pixelated; -webkit-filter: drop-shadow(0px 0px 5px var(--title-color)); filter: drop-shadow(0px 0px 5px var(--title-color)); background-repeat: no-repeat !important; background-size: cover !important; -webkit-transition: 0.1s; -o-transition: 0.1s; transition: 0.1s; }
.glightbox-clean .gprev { position: absolute; top: -100%; left: 30px; width: 50px; height: 50px; background: url(https://i.imgur.com/GehVTOu.gif); }
.glightbox-clean .gnext { position: absolute; top: -100%; right: 30px; width: 50px; height: 50px; background: url(https://i.imgur.com/2B0qQq9.gif); }
.glightbox-clean .gclose { position: absolute; top: 15px; width: 35px; height: 35px;  right: 10px;  background: url(https://ne0nbandit.github.io/assets/img/misc/close.png); }

/*CSS Animations*/
.gfadeIn  { -webkit-animation: gfadeIn 0.5s ease; animation: gfadeIn 0.5s ease; }
.gfadeOut { -webkit-animation: gfadeOut 0.5s ease; animation: gfadeOut 0.5s ease; }
.gzoomIn  { -webkit-animation: gzoomIn 0.5s ease; animation: gzoomIn 0.5s ease; }
.gzoomOut { -webkit-animation: gzoomOut 0.5s ease; animation: gzoomOut 0.5s ease; }

.gslideOutLeft  { -webkit-animation: gslideOutLeft 0.3s ease; animation: gslideOutLeft 0.3s ease; }
.gslideInLeft   { -webkit-animation: gslideInLeft 0.3s ease; animation: gslideInLeft 0.3s ease; }
.gslideOutRight { -webkit-animation: gslideOutRight 0.3s ease; animation: gslideOutRight 0.3s ease; }
.gslideInRight  { -webkit-animation: gslideInRight 0.3s ease; animation: gslideInRight 0.3s ease; }

@-webkit-keyframes lightboxLoader { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes lightboxLoader { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg);} }
@-webkit-keyframes gfadeIn { from { opacity: 0; } to { opacity: 1; } } 
@keyframes gfadeIn { from { opacity: 0; } to { opacity: 1; } }
@-webkit-keyframes gfadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes gfadeOut { from { opacity: 1; } to { opacity: 0; } }
@-webkit-keyframes gslideInLeft { from { opacity: 0; -webkit-transform: translate3d(-60%, 0, 0); transform: translate3d(-60%, 0, 0); } to { visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;} }
@keyframes gslideInLeft { from { opacity: 0; -webkit-transform: translate3d(-60%, 0, 0); transform: translate3d(-60%, 0, 0); } to { visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;} }
@-webkit-keyframes gslideOutLeft { from { opacity: 1; visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(-60%, 0, 0); transform: translate3d(-60%, 0, 0); opacity: 0; visibility: hidden;} }
@keyframes gslideOutLeft { from { opacity: 1; visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(-60%, 0, 0); transform: translate3d(-60%, 0, 0); opacity: 0; visibility: hidden;} }
@-webkit-keyframes gslideInRight { from { opacity: 0; visibility: visible; -webkit-transform: translate3d(60%, 0, 0); transform: translate3d(60%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;} }
@keyframes gslideInRight { from { opacity: 0; visibility: visible; -webkit-transform: translate3d(60%, 0, 0); transform: translate3d(60%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;} }
@-webkit-keyframes gslideOutRight { from { opacity: 1; visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(60%, 0, 0); transform: translate3d(60%, 0, 0); opacity: 0;} }
@keyframes gslideOutRight { from { opacity: 1; visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(60%, 0, 0); transform: translate3d(60%, 0, 0); opacity: 0;} }
@-webkit-keyframes gzoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 1;} }
@keyframes gzoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 1;} }
@-webkit-keyframes gzoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0;} }
@keyframes gzoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } }

@media (min-width: 769px) {
  .glightbox-container .ginner-container { width: auto; height: auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
  .glightbox-container .ginner-container.desc-top .gslide-description { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
  .glightbox-container .ginner-container.desc-top .gslide-image,
  .glightbox-container .ginner-container.desc-top .gslide-image img { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
  .glightbox-container .ginner-container.desc-left .gslide-description { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
  .glightbox-container .ginner-container.desc-left .gslide-image { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
  .gslide-image img { max-height: 97vh; max-width: 100%; }
  .gslide-image img.zoomable { cursor: var(--cursor-zoom); }
  .zoomed .gslide-image img.zoomable { cursor:var(--cursor-move); }
  .gslide-inline { max-height: 95vh; }
  .gslide-external { max-height: 100vh; }
  .gslide-description.description-left, .gslide-description.description-right { max-width: 275px; }
  .glightbox-open { height: auto; }
  .goverlay { background: rgba(0, 0, 0, 0.92); }
  .glightbox-clean .gslide-media { -webkit-box-shadow: 1px 2px 9px 0px rgba(0, 0, 0, 0.65); box-shadow: 1px 2px 9px 0px rgba(0, 0, 0, 0.65); }
  .glightbox-clean .description-left .gdesc-inner, .glightbox-clean .description-right .gdesc-inner { position: absolute; height: 100%; overflow-y: auto; }
  .glightbox-clean .gprev:hover { scale: 1.15; }
  .glightbox-clean .gnext:hover { scale: 1.15; }
  .glightbox-clean .gclose:hover { scale: 0.85; }
  .glightbox-clean .gprev { top: 45%; }
  .glightbox-clean .gnext { top: 45%; }
}

@media (min-width: 992px) { .glightbox-clean .gclose { opacity: 0.9; right: 20px; } }
.glightbox-clean .gclose:hover { opacity: 1; }