.breadcrumbs-menu {
  display: none;
}

h2 {
  font-size: 1.5rem;
}

a {
  text-decoration: none;
}

.more-articles-container {
  display: flex;
  justify-content: flex-end;
  font-size: 14px;
}

.more-articles-container a {
  color: #333;
  display: flex;
  align-items: center;
}

.more-articles-container i {
  margin-top: 4px;
  margin-left: 5px;
  color: var(--third-color);
}

.article-container a {
  display: block;
  height: 100%;
}

.article-title h3 {
  margin-bottom: 10px;
}

.article-excerpt p {
  font-size: 14px;
  line-height: 1.5;
  color: #808080;
  font-weight: 300;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid #efeded;
}

.article-container > div,
.guide-large,
.guide-small {
  -webkit-box-shadow: 0px 0px 3px 3px rgb(0 0 0 / 4%);
  box-shadow: 0px 0px 3px 3px rgb(0 0 0 / 4%);
  background-color: white;
  border: 1px solid #d6d6d6;
  transition: 0.2s;
}

.article-container > div:hover,
.guide-large:hover,
.guide-small:hover {
  -webkit-box-shadow: 0px 0px 7px 7px rgb(0 0 0 / 5%);
  box-shadow: 0px 0px 7px 7px rgb(0 0 0 / 5%);
}

section.top-articles,
section.recent-security-articles,
section.vpn {
  background-color: #f9f9f9;
  overflow: hidden;
}

section {
  padding: 1rem 1rem;
}

/* remake */
.flex {
  display: flex;
}

.w-7\/12 {
  width: calc(7 * (100% / 12));
}

.w-5\/12 {
  width: calc(5 * (100% / 12));
}

.w-full {
  width: 100%;
}

.space-between {
  justify-content: space-between;
}
.max-w-\[350px\] {
  max-width: 350px;
}

.pl-3 {
  padding-left: 1.2rem;
}

.max-w-prose {
  max-width: 60ch;
}

.mb-4 {
  margin-bottom: 2rem;
}

.mt-4 {
  margin-top: 2rem;
}
section .mt-4 {
  margin-top: 2rem;
}

.mt-2 {
  margin-top: 1rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.btn {
  color: #ffffff !important;
  background: #4a93ff;
  padding: 10px 20px;
  border-radius: 5px;
}

.bg-gray-100 {
  background-color: #f9f9f9;
}

.bg-white {
  background-color: white;
}

.p-4 {
  padding: 1.2rem;
}

.grid {
  display: grid;
}

.gap-4 {
  grid-gap: 1rem;
}

.grid-flow-col {
  grid-auto-flow: column;
}
.grid-flow-row {
  grid-auto-flow: row;
}

.cards img {
  width: 100%;
  object-fit: contain;
  height: auto;
}

.w-1\/3 {
  width: calc(1 * (100% / 3));
}

.reverse-column {
  flex-direction: column-reverse;
}

.flex-col {
  flex-direction: column;
}

.justify-between {
  justify-content: space-between;
}

.h-inherit {
  height: inherit;
}

.h-full {
  height: 100%;
}

.h-auto {
    height: auto;
}

.justify-end {
  justify-content: flex-end;
}

.more-articles-container {
  padding: 10px;
  background: rgb(252, 252, 252);
  border: 1px solid #e1e1e1;
  margin-top: 10px;
  border-radius: 0 50px 50px 0;
}

.more-articles-container a:hover {
  text-decoration: underline;
  color: #4a93ff;
}

.cards .card:hover {
  box-shadow: 0px 0px 3px 2px rgba(107, 156, 255, 0.1);
}

.flex-5 {
  display: flex;
}

.flex-5 .left {
  width: calc(7 * (100% / 12));
  margin-right: 1rem;
}

.flex-5 .right {
  width: calc(5 * (100% / 12));
  margin-left: 1rem;
}

.flex-5 .card {
  background: white;
  border: 1px solid #e5e5e5;
  padding: 5px;
  margin-bottom: 20px;
  border-radius: 7px;
}

.flex-5 .category {
  margin: 10px 20px 0;
}

.flex-5 .category a {
  color: #8f8f8f;
}

.flex-5 .title {
  margin: 10px 20px 0;
}

.flex-5 .title a {
  color: #30343f;
  font-weight: bold;
  font-size: 20px;
}
.flex-5 .title a:hover {
  color: #4a93ff;
}

.flex-5 hr {
  border: none;
  border-top: 1px solid #e5e5e5;
  margin: 2px 20px;
}

.flex-5 .excerpt {
  font-style: italic;
  margin: 0 20px;
}

.flex-5 .excerpt p {
  color: #8f8f8f;
}

.flex-5 .card img {
  width: 100%;
  border-radius: 7px;
}

.flex-5 .right .card {
  display: flex;
}

.grid-container {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
}

.grid-item {
  grid-row: span 3;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  box-sizing: border-box;
}

.custom {
  grid-row: span 2;
}

.md\:grid-col-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media only screen and (max-width: 768px) {
  .grid-col-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

@media only screen and (min-width: 1100px) {
  .xl\:grid-col-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 1300px) {
  section {
    padding: 1rem 2rem;
  }
}

.article-container.top {
  display: flex;
  justify-content: space-between;
}

.top-article img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.top-article .article-title h3 {
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.top-article .category-container {
  margin: 0.5rem 1rem -15px 1rem;
}

.top-article .article-title {
  margin: 0 1rem;
}

.top-article .article-excerpt {
  margin: 0 1rem 1rem 1rem;
}

.top-article .article-excerpt p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.top-article-lower {
  display: flex;
  flex-direction: column-reverse;
}

@media only screen and (max-width: 760px) {
  .sm\:pl-0 {
    padding-left: 0;
  }
  .sm\:flex-col {
    flex-direction: column;
  }

  .sm\:w-full {
    width: 100%;
  }

  .sm\:text-center {
    text-align: center;
  }

  .sm\:w-60 {
    width: 60%;
  }

  .sm\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
}

@media only screen and (max-width: 550px) {
  .article-container.top {
    display: block;
  }

  .top-article {
    max-width: none;
  }

  .top-article:nth-of-type(1) {
    margin-bottom: 2rem;
  }
}

/* Recent security articles */

.article-container.security {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.internet-security {
  max-width: 48.5%;
  padding: 1rem;
  margin-bottom: 2rem;
}

.internet-security-upper {
  display: flex;
  justify-content: space-between;
  padding-bottom: 5px;
}

.internet-security-upper-text {
  margin-right: 1rem;
  min-height: 87px;
}

.internet-security-upper img {
  width: auto;
  max-height: 90px;
  max-width: 210px;
  object-fit: cover;
}

.internet-security-lower {
  display: flex;
  flex-direction: column-reverse;
}

@media only screen and (max-width: 1200px) {
  .recent-security-articles {
    padding-top: 0;
  }

  .internet-security-upper img {
    max-height: 120px;
    margin-bottom: 0.7rem;
    max-width: none;
  }

  .internet-security {
    width: 48.5%;
  }

  .internet-security-upper {
    flex-direction: column-reverse;
  }

  .internet-security-upper-text {
    min-height: unset;
  }
}

@media only screen and (max-width: 650px) {
  .article-container.security {
    display: block;
  }

  .internet-security {
    max-width: none;
    width: 100%;
  }

  .internet-security-upper {
    flex-direction: unset;
  }

  .internet-security-upper img {
    max-height: 80px;
  }

  .internet-security .article-excerpt {
    display: block;
  }
}

@media only screen and (max-width: 550px) {
  .internet-security img {
    display: none;
  }
}

/* Guides */

.article-container.guides {
  display: grid;
  grid-template-columns: 60% 37%;
  grid-gap: 3%;
}

.article-container.guides > div {
  box-shadow: unset;
  -webkit-box-shadow: unset;
  border: unset;
}

.guide-large {
  margin-bottom: 2rem;
}

.guide-large a {
  display: flex;
}

.guide-large img {
  max-width: 50%;
  height: auto;
  object-fit: cover;
}

.guide-large-right {
  padding: 1.5rem;
}

.guide-large h3 {
  margin-bottom: 0;
  padding-bottom: 0.5rem;
}

.guide-large .article-excerpt p {
  margin: 0;
}

.guide-large-lower {
  display: flex;
  flex-direction: column-reverse;
}

.recent-guides {
  height: 84%;
}

.guide-small {
  margin-bottom: 2rem;
  height: 29.1%;
}

.guide-small a {
  display: flex;
  flex-direction: row;
}

.guide-small img {
  max-width: 40%;
  height: auto;
  object-fit: cover;
}

.guide-small-right {
  padding: 1.22rem;
}

.guide-small h3 {
  margin-bottom: 0;
}

@media only screen and (max-width: 1200px) {
  .article-container.guides {
    display: block;
  }

  .top-guides,
  .recent-guides {
    display: flex;
    justify-content: space-between;
  }

  .guide-large {
    max-width: 48.5%;
  }

  .guide-small {
    max-width: 31.5%;
    height: auto;
  }
}

@media only screen and (max-width: 980px) {
  .top-guides {
    display: block;
  }

  .guide-large {
    max-width: unset;
  }

  .guide-small {
    max-width: 48.5%;
  }
}

@media only screen and (max-width: 700px) {
  .recent-guides {
    display: block;
  }

  .guide-small {
    max-width: unset;
  }
}

@media only screen and (max-width: 550px) {
  .guide-large a {
    flex-direction: column;
  }

  .guide-large img {
    max-width: 100%;
  }
}

/* VPN SECTION */

.article-container.vpn {
  grid-template-columns: 23% 23% 23% 23%;
  display: grid;
  grid-gap: 2rem;
  margin-bottom: 2rem;
}

.article-container.vpn.reviews .vpn-article img {
  display: flex;
  margin: auto;

  object-fit: contain;
}

.article-container.vpn.reviews .vpn-article-text {
  margin: 0rem 1rem 1rem 1rem;
  padding: 0;
  padding-top: 0.5rem;
}

.vpn-article img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.vpn-article-text {
  padding: 0.5rem 1rem 1rem 1rem;
}

.vpn-article h3 {
  margin-bottom: 0;
}

.score-container p {
  margin-bottom: 0;
  margin-top: 5px;
  font-size: 14px;
}

@media only screen and (max-width: 1000px) {
  .article-container.vpn {
    grid-template-columns: 31.5% 31.5% 31.5%;
    grid-gap: 1.5rem;
  }

  .vpn-article:last-child {
    display: none;
  }
}

@media only screen and (max-width: 700px) {
  .article-container.vpn {
    grid-template-columns: 48.5% 48.5%;
  }

  .vpn-article:last-child {
    display: block;
  }
}

@media only screen and (max-width: 480px) {
  .article-container.vpn {
    grid-gap: 1rem;
  }

  .vpn-article h3 {
    font-size: 1rem;
  }
}

@media only screen and (max-width: 369px) {
  .article-container.vpn {
    display: block;
  }

  .vpn-article h3 {
    font-size: 1.25rem;
  }

  .vpn-article {
    margin-bottom: 2rem;
  }

  .article-container.vpn.reviews .vpn-article img {
    width: 70%;
  }
}

/* Author Container */

.post-author {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -1.5rem;
}

.guide-large .post-author {
  margin-top: -1rem;
}

.post-author * {
  font-size: 14px;
  line-height: 1.5;
  color: #808080;
  font-weight: 300;
}

.top-article .post-author img,
.guide-large .post-author img {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.top-article .post-author div {
  display: flex;
  align-items: center;
  margin: 12px 1rem 0 1rem;
}

.guide-large .post-author div {
  display: flex;
  align-items: center;
}

.top-article .last-modified,
.guide-large .last-modified {
  display: none;
}

.internet-security .post-author img {
  display: none;
}

@media screen and (max-width: 550px) {
  .internet-security .post-author {
    display: block;
  }

  .internet-security .post-author .last-modified {
    margin-top: -0.8rem;
  }
}

.underline {
  text-decoration: underline;
}

.container-large a {
  color: #2f71d3;
}

.container-large a:hover {
  color: #424242;
}

/* new */
.flex-5 .card {
  margin-bottom: 2rem;
  border-radius: 0.5rem;
  box-shadow: 1px 1px 5px 0px rgb(242 242 242);
  transition: all 0.3s;
  border: 1px solid #ededed;
  width: 23%;
}

.flex-5 .card img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.flex-5 {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2%;
}

.flex-5 a {
  text-decoration: none;
  color: rgb(66, 66, 66);
}

.flex-5 a:hover {
  text-decoration: none;
  color: #2f71d3;
}

.flex-5 .big {
  /* width: 49%; */
}
.flex-5 .w-2\/3 {
  width: 60%;
}

.flex-5 .full {
  width: 100%;
}

.column {
  flex-direction: column;
  width: 60%;
}

.p-4 {
  padding: 1rem;
}

.experimental {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.flex-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.w-2\/3 {
  width: 66%;
}

.w-1\/3 {
  width: 34%;
}

.ml-3 {
  margin-left: 3%;
}

.card {
  flex-shrink: 0;
  flex-grow: 1;
}

.w-55 {
  width: 55%;
}
.w-45 {
  width: 45%;
}

.flex-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 37.5%;
}

.flex-left .card,
.flex-right .card {
  display: flex;
  flex-direction: row;
  align-items: stretch;

  margin-bottom: 2rem;
  border-radius: 0.5rem;
  box-shadow: 1px 1px 5px 0px rgb(242 242 242);
  transition: all 0.3s;
  border: 1px solid #ededed;

  padding: 5px;
  background: white;
}

.flex-left .card a,
.flex-right .card a {
  text-decoration: none;
  color: rgb(66, 66, 66);
}

.flex-left .card a:hover,
.flex-right .card a:hover {
  text-decoration: none;
  color: #2f71d3;
}

.flex-left .card img,
.flex-right .card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0.5rem;
}

.flex-right h3 {
  font-size: 1rem;
}

@media only screen and (max-width: 1000px) {
  .flex-right h3 {
    font-size: 1.3rem;
  }

  .md\:w-50 {
    width: 50%;
  }

  .flex-5 .card {
    width: 49%;
  }

  .flex-left .card,
  .flex-right .card {
    flex-direction: column;
  }

  .md\:w-full {
    width: 100%;
  }
}

@media screen and (max-width: 550px) {
  .sm\:ml-0 {
    margin-left: 0;
  }

  .flex-left .card,
  .flex-right .card {
    flex-direction: column;
  }

  .sm\:w-full {
    width: 100%;
  }

  .sm\:text-center {
    text-align: center;
  }

  .experimental {
    flex-wrap: wrap;
  }

  .flex-5 .big {
    width: 100%;
  }
  .flex-5 .card {
    width: 100%;
  }
}

.category-container a {
  font-size: 14px;
  color: #b5b5b5;
  margin-bottom: -15px;
  font-weight: 300;
}

/* .cover {
  object-fit: cover !important;
} */