/* Reset */
body,
div,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}
able {
  border-collapse: collapse;
  border-spacing: 0;
}
ieldset,
img {
  border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}

caption,
th {
  text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
  text-wrap: balance;
  color: #3f454a;
}
q:before,
q:after {
  content: "";
}
abbr,
acronym {
  border: 0;
}

@font-face {
  font-family: "Droid Sans";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/droidsans/v18/SlGVmQWMvZQIdix7AFxXkHNSbRYXags.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* main */
body {
  margin: 0;
  padding: 56px 0 100px 0;
  height: 100svh;
  height: 100svh;

  color: #3f454a;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 300;
  background-color: #2a3036;
}
/* 
#main-content {
    background-color: #efefef;
} */

img {
  max-width: 100%;
  width: auto;
  height: auto;
}
img:hover {
  border-bottom: none;
}
p {
  margin: 0 0 10px 0;
  font-size: 18px;
  line-height: 24px;
}
h1 {
  font-size: 48px;
  margin: 0 0 15px 0;
}
h2 {
  font-size: 32px;
  margin-bottom: 16px;
}
h3 {
  font-size: 24px;
  margin-bottom: 12px;
}
h4,
h5,
h6 {
  font-size: 18px;
  margin: 0 0 5px 0;
}

a {
  color: #3876e0;
  text-decoration: none;
}

a:visited {
  color: #3876e0;
  text-decoration: none;
}

a:hover {
  color: #3876e0;
  text-decoration: none;
  border-bottom: 1px solid #3876e0;
}

h2 a:hover,
p a:hover {
  color: #3f454a;
  border-bottom: 1px solid #3f454a;
}

.content-list h2 a,
.content-list p a,
.content-list h2 a:visited,
.content-list p a:visited {
  text-decoration: none;
  color: #3f454a;
}

.background-container {
  position: relative;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 48px;
  margin: 48px;
  border-radius: 24px;
}
.background-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.background-container h1,
.background-container h2,
.dark-hero-color h2,
.dark-hero-color h3 {
  z-index: 100;
  color: white;
}

.light-link,
.light-link:visited {
  color: #fff;
}
.light-link:hover {
  border-bottom: 1px solid #fff;
}
.hero-heading {
  max-width: 960px;
}

.feature-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px 48px;
  max-width: 960px;
  margin-bottom: 24px;
}

.feature-container div {
  background-color: white;
  border-radius: 24px;
  padding: 24px;
}

.feature-container div p {
  font-size: 18px;
  color: #236ab9;
}

.feature-image {
  border-radius: 24px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;

}

ul.feature-list {
  font-size: 1.2em;
  line-height: 1.5em;
}

.hero-color {
  background-color: #6d82ad !important;
}
.dark-hero-color {
  background-color: #4c5b79 !important;
}

.content {
  width: 960px;
  margin: 26px auto;
  clear: both;
  padding: 36px 24px;
  display: table;
  background-color: #eaeaeb;
  border-radius: 24px;
}
.meta-content {
  background-color: #3f454a;
  color: #eaeaeb;
}

h2:not(:first-of-type) {
  margin-top: 32px;
}

.content div:not(:first-of-type) {
  padding-bottom: 48px;
  padding-left: 16px;
}

.content-list {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 24px;
  padding: 24px 24px 72px 24px;
}

.content-list img {
  border-radius: 24px 24px 0 0;
  width: 100%;
}

.content .half-col img {
  /* max-width: 400px; */
  float: right;
}

.content-list .item {
  max-width: 280px;
  display: flex;
  flex-direction: column;
}
.content-list h2 {
  font-size: 24px;
  min-height: 90px;
}
.content-list p {
  font-size: 18px;
}
.content-list .item div {
  padding: 24px;
  border-radius: 0 0 24px 24px;
  background-color: white;
  margin-top: -5px;
}
.full-col {
  width: 100%;
  margin: 10px;
}
.half-col {
  float: left;
  width: 440px;
  margin: 10px;
}
.third-col {
  float: left;
  width: 300px;
  margin: 10px;
}

#header,
#footer {
  color: #999;
  padding: 12px 0;

  background-color: #2a3036;
  width: 100%;
  margin: 0;
}

#footer {
  display: flex;
  flex-direction: row;
  justify-content: end;
}
#header,
.footer-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 150;
}

a.logo {
  font-style: normal;
  font-size: 20px;
  color: #ccc;
  text-decoration: none;
  line-height: 1;
}

a.logo:hover {
  color: #fff;
  border-bottom: 1px solid #fff;
}

#related-posts {
  padding: 96px 0 180px 0;
}

.main-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 12px;
}

.main-nav ul {
  list-style: none;
}

.main-nav li {
  padding: 7px 10px;
  float: left;
}

.main-nav li a {
  text-decoration: none;
  color: #cacaca;
}
.main-nav li a:hover {
  color: #fff;
  border-bottom: 1px solid #fff;
}

@media screen and (min-width: 480px) and (max-width: 1000px) {
  .content {
    width: calc(80% - 24px);
  }
  .content h2 {
    margin-top: 32px;
  }
  .content div:not(:first-of-type) {
    padding: 0;
  }

  .half-col {
    margin: 0 auto;
    clear: both;
    float: none;
  }

  .content .half-col img {
    max-width: 400px;
    float: none;
  }

  h1 {
    font-size: 32px;
  }
}

@media screen and (min-width: 100px) and (max-width: 479px) {
  .content {
    width: calc(90% - 12px);
  }
  .content h2 {
    margin-top: 24px;
  }
  .content div:not(:first-of-type) {
    padding: 0;
  }

  .half-col {
    width: 100%;
    margin: 5px;
  }

  .content .half-col img {
    width: calc(100% - 12px);
    float: none;
  }

  header,
  #header,
  #footer {
    font-size: 14px;
    margin-bottom: 12px;
  }

  h1 {
    font-size: 36px;
  }
}

@media screen and (min-width: 100px) and (max-width: 650px) {
  .feature-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
}

@media screen and (min-width: 100px) and (max-width: 767px) {
  .background-container {
    margin: 0;
    border-radius: 0;
    padding: 120px 12px 36px 12px;
    min-height: auto;
  }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
  .background-container {
    margin: 0;
    border-radius: 0;
    padding: 90px 24px 36px 24px;
    min-height: auto;
  }
}

.bento-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  gap: 16px 16px;
  grid-template-areas:
    "top-left mid-top top-right top-right"
    "top-left mid-bottom top-right top-right"
    "bottom-left mid-bottom bottom-right bottom-right";
}

@media screen and (min-width: 100px) and (max-width: 479px) {
  .bento-container {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 16px 16px;
    grid-template-areas:
      "top-left mid-top"
      "top-left mid-bottom"
      "bottom-left mid-bottom"
      "top-right top-right"
      "top-right top-right"
      "bottom-right bottom-right";
  }
}

.bento-container-mirror {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  gap: 16px 16px;
  grid-template-areas:
    "top-right top-right  mid-top top-left"
    "top-right top-right  mid-bottom top-left "
    "bottom-right bottom-right mid-bottom bottom-left  ";
}

@media screen and (min-width: 100px) and (max-width: 479px) {
  .bento-container-mirror {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 16px 16px;
    grid-template-areas:
      "top-right top-right"
      "top-right top-right"
      "bottom-right bottom-right"
      "top-left mid-top"
      "top-left mid-bottom"
      "bottom-left mid-bottom";
  }
}

.bento-container-double-mirror {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  gap: 16px 16px;
  grid-template-areas:
    "bottom-right bottom-right   mid-bottom bottom-left"
    "top-right top-right  mid-bottom top-left "
    "top-right top-right mid-top top-left  ";
}

@media screen and (min-width: 100px) and (max-width: 479px) {
  .bento-container-double-mirror {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 16px 16px;
    grid-template-areas:
      "bottom-right bottom-right"
      "top-right top-right"
      "top-right top-right"
      " mid-top top-left"
      "mid-bottom top-left"
      " mid-bottom bottom-left";
  }
}

.bento-container div,
.bento-container-mirror div,
.bento-container-double-mirror div {
  border-radius: 24px;
  min-height: 200px;
  min-width: 200px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.top-left {
  grid-area: top-left;
  background-color: blue;
}

.bottom-left {
  grid-area: bottom-left;
  background-color: blue;
}

.top-mid {
  grid-area: mid-top;
  background-color: blue;
}

.bottom-mid {
  grid-area: mid-bottom;
  background-color: blue;
}

.top-right {
  grid-area: top-right;
  background-color: blue;
}

.bottom-right {
  grid-area: bottom-right;
  background-color: blue;
}

.color-change-tints {
  animation: color-change-tints linear infinite alternate both;
}

/* ----------------------------------------------
 * Generated by Animista on 2023-12-24 1:8:34
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation color-change-3x
 * ----------------------------------------

#6d82ad
#7b8eb5
#8a9bbd
#98a7c5
 */

@keyframes color-change-tints {
  0% {
    background: #ffffff;
  }
  30% {
    background: #7b8eb5;
  }
  50% {
    background: #8a9bbd;
  }
  70% {
    background: #98a7c5;
  }
  90% {
    background: #8a9bbd;
  }
  100% {
    background: #7b8eb5;
  }
}

@keyframes radial-color-tints {
  0% {
    background: rgb(87, 104, 138);
    background: radial-gradient(
      circle,
      rgba(87, 104, 138, 1) 0%,
      rgba(123, 142, 181, 1) 70%,
      rgba(138, 155, 189, 1) 100%
    );
  }
  20% {
    background: rgb(87, 104, 138);
    background: radial-gradient(
      circle,
      rgba(87, 104, 138, 1) 0%,
      rgba(138, 155, 189, 1) 70%,
      rgba(152, 167, 197, 1) 100%
    );
  }
  40% {
    background: rgb(87, 104, 138);
    background: radial-gradient(
      circle,
      rgba(87, 104, 138, 1) 0%,
      rgba(152, 167, 197, 1) 70%,
      rgba(152, 167, 197, 1) 100%
    );
  }
  60% {
    background: rgb(87, 104, 138);
    background: radial-gradient(
      circle,
      rgba(87, 104, 138, 1) 0%,
      rgba(152, 167, 197, 1) 70%,
      rgba(152, 167, 197, 1) 100%
    );
  }
  80% {
    background: rgb(87, 104, 138);
    background: radial-gradient(
      circle,
      rgba(87, 104, 138, 1) 0%,
      rgba(138, 155, 189, 1) 70%,
      rgba(152, 167, 197, 1) 100%
    );
  }
  100% {
    background: rgb(87, 104, 138);
    background: radial-gradient(
      circle,
      rgba(87, 104, 138, 1) 0%,
      rgba(123, 142, 181, 1) 70%,
      rgba(138, 155, 189, 1) 100%
    );
  }
}

.background-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  border-radius: 24px;
}

.moving-radial-gradient {
  animation: moving-radial 5s linear infinite alternate both;
}

@keyframes moving-radial {
  0% {
    background: rgb(87, 104, 138);
    background: radial-gradient(
      circle,
      rgba(87, 104, 138, 1) 0%,
      rgba(138, 155, 189, 1) 70%,
      rgba(152, 167, 197, 1) 100%
    );
  }
  25% {
    background: rgb(87, 104, 138);
    background: radial-gradient(
      circle,
      rgba(87, 104, 138, 1) 0%,
      rgba(138, 155, 189, 1) 50%,
      rgba(152, 167, 197, 1) 100%
    );
  }
  50% {
    background: rgb(87, 104, 138);
    background: radial-gradient(
      circle,
      rgba(87, 104, 138, 1) 0%,
      rgba(138, 155, 189, 1) 30%,
      rgba(152, 167, 197, 1) 100%
    );
  }
  75% {
    background: rgb(87, 104, 138);
    background: radial-gradient(
      circle,
      rgba(87, 104, 138, 1) 0%,
      rgba(138, 155, 189, 1) 50%,
      rgba(152, 167, 197, 1) 100%
    );
  }
  100% {
    background: rgb(87, 104, 138);
    background: radial-gradient(
      circle,
      rgba(87, 104, 138, 1) 0%,
      rgba(138, 155, 189, 1) 70%,
      rgba(152, 167, 197, 1) 100%
    );
  }
}