/* =========================================================
   HONDURAS — OFFICIAL RESOURCE ACTIONS
   ========================================================= */

#official-resources .hnd2-resource{
  cursor:pointer;
}


#official-resources .sl-resource-action{
  display:block;

  margin-top:auto;
  padding-top:22px;

  color:#138fbd;

  font-size:10px;
  font-weight:900;

  transition:
    transform .25s ease,
    color .25s ease;
}


#official-resources
.hnd2-resource:hover
.sl-resource-action{
  transform:
    translateX(4px);

  color:#076f99;
}



/* =========================================================
   CIRCULAR PANEL
   ========================================================= */

.sl-circular-panel{
  margin-top:18px;

  padding:28px;

  border:
    1px solid rgba(44,160,198,.28);

  border-radius:12px;

  background:
    radial-gradient(
      circle at 93% 0%,
      rgba(61,187,219,.12),
      transparent 33%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(27,139,179,.028) 0,
      rgba(27,139,179,.028) 1px,
      transparent 1px,
      transparent 50px
    ),
    linear-gradient(
      145deg,
      #f8fcfe,
      #eaf6fa
    );

  box-shadow:
    0 18px 38px
    rgba(5,69,96,.075);

  animation:
    slCircularOpen
    .34s
    cubic-bezier(.22,1,.36,1);
}


.sl-circular-panel[hidden]{
  display:none !important;
}


@keyframes slCircularOpen{

  from{
    opacity:0;
    transform:
      translateY(-9px);
  }

  to{
    opacity:1;
    transform:
      translateY(0);
  }

}



/* =========================================================
   HEADER
   ========================================================= */

.sl-circular-head{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap:34px;

  align-items:start;

  padding-bottom:20px;

  border-bottom:
    1px solid rgba(49,153,190,.20);
}


.sl-circular-kicker{
  display:block;

  margin-bottom:8px;

  color:#159bc9;

  font-size:8px;
  font-weight:900;

  letter-spacing:.14em;
}


.sl-circular-head h3{
  margin:0;

  color:#0a3045;

  font-size:24px;

  line-height:1.15;
}


.sl-circular-head p{
  max-width:700px;

  margin:
    9px 0 0;

  color:#58727f;

  font-size:11px;

  line-height:1.65;
}


.sl-circular-head-right{
  display:flex;

  align-items:center;

  gap:13px;
}


.sl-circular-updated{
  color:#687f8a;

  font-size:9px;

  white-space:nowrap;
}


.sl-circular-close{
  width:36px;
  height:36px;

  display:flex;

  align-items:center;
  justify-content:center;

  border:
    1px solid rgba(36,154,194,.28);

  border-radius:50%;

  color:#0c84af;

  background:
    rgba(255,255,255,.84);

  font-size:20px;

  cursor:pointer;

  transition:
    transform .26s ease,
    background .26s ease;
}


.sl-circular-close:hover{
  transform:
    rotate(90deg);

  background:#fff;
}



/* =========================================================
   CIRCULAR LIST
   ========================================================= */

.sl-circular-list{
  max-height:480px;

  overflow:auto;

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:11px;

  margin-top:20px;

  padding-right:4px;
}


.sl-circular-item{
  position:relative;

  min-height:112px;

  padding:
    18px 48px 17px 18px;

  display:flex;

  flex-direction:column;

  border:
    1px solid rgba(57,158,194,.22);

  border-radius:8px;

  color:inherit;

  background:
    rgba(255,255,255,.84);

  text-decoration:none;

  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}


.sl-circular-item::after{
  content:"↓";

  position:absolute;

  right:17px;
  top:50%;

  transform:
    translateY(-50%);

  width:27px;
  height:27px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  color:#0b8eb9;

  background:#e5f6fb;

  font-size:12px;
}


.sl-circular-item:hover{
  transform:
    translateY(-3px);

  border-color:
    rgba(27,151,198,.48);

  background:#fff;

  box-shadow:
    0 12px 25px
    rgba(4,75,103,.08);
}


.sl-circular-meta{
  margin-bottom:8px;

  color:#1597c5;

  font-size:8px;

  font-weight:900;

  letter-spacing:.08em;

  text-transform:uppercase;
}


.sl-circular-item strong{
  color:#0b3449;

  font-size:12px;

  line-height:1.4;
}


.sl-circular-download{
  margin-top:auto;

  padding-top:12px;

  color:#168eb9;

  font-size:9px;

  font-weight:850;
}


.sl-circular-loading,
.sl-circular-empty{
  grid-column:
    1 / -1;

  padding:25px;

  border:
    1px dashed rgba(64,156,189,.28);

  border-radius:8px;

  color:#607a87;

  background:
    rgba(255,255,255,.62);

  text-align:center;

  font-size:11px;
}



/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:800px){

  .sl-circular-head{
    grid-template-columns:1fr;

    gap:15px;
  }


  .sl-circular-head-right{
    justify-content:
      space-between;
  }


  .sl-circular-list{
    grid-template-columns:1fr;
  }

}