@import url("https://api.fonts.coollabs.io/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap");
@import url("https://api.fonts.coollabs.io/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap");
html,
body {
  background-color: #f6f6f8;
  margin: 0; }

a {
  text-decoration: none;
  color: #000;
  cursor: pointer; }

.container {
  display: flex;
  align-items: center;
  justify-content: center; }

h2.motto {
  height: 49px;
  top: 0px;
  overflow: visible;
  padding-bottom: 0px;
  font-family: "Poppins";
  font-size: 18px;
  font-weight: 300;
  color: #b0ae99;
  text-align: center;
  letter-spacing: 4px;
  word-spacing: 7px;
  line-height: 1.4;
  padding-left: 20px;
  padding-right: 20px; }
  @media screen and (max-width: 767px) {
    h2.motto {
      visibility: hidden; } }

@keyframes blink {
  0% {
    background: #000; }
  47% {
    background: #000; }
  50% {
    background: transparent; }
  97% {
    background: transparent; }
  100% {
    background: #000; } }

.frame {
  margin: 30px 20px 20px 20px;
  padding: 20px 20px 50px 20px;
  outline: 1px solid #b0ae99;
  display: grid;
  grid-template-columns: 20vw auto 20vw;
  grid-template-rows: auto;
  grid-template-areas: "tag logolist social";
  /* Smartphones (portrait and landscape) ---------- */
  /* Smartphones (portrait) ---------- */
  /* Smartphones (landscape) ---------- */
  /* Tablets, iPads (portrait and landscape) ---------- */
  /* Tablets, iPads (portrait) ---------- */
  /* Tablets, iPads (landscape) ---------- */
  /* Desktops and laptops ---------- */
  /* Large screens ---------- */ }
  @media screen and (max-width: 767px) {
    .frame {
      grid-template-columns: 25vw auto 25px !important;
      margin: 0;
      padding: 20px 10px 30px 10px;
      outline: 0; }
      .frame .logo-container {
        margin-top: 5px !important; } }
  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .frame {
      /* styles */ } }
  @media screen and (min-width: 768px) {
    .frame {
      /* styles */ } }
  @media screen and (min-width: 1224px) {
    .frame {
      /* styles */ } }
  @media screen and (min-width: 1824px) {
    .frame {
      /* styles */ } }
  .frame .tag-bar {
    grid-area: tag; }
    .frame .tag-bar ul.type-menu {
      padding: 0;
      margin: 0 0 20px 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start; }
      .frame .tag-bar ul.type-menu li {
        list-style-type: none;
        position: relative;
        display: inline;
        font-size: calc(15pt + 1vw);
        font-family: "Raleway";
        font-weight: bold;
        background-color: #f6f6f8; }
        .frame .tag-bar ul.type-menu li a {
          color: #f6f6f8;
          mix-blend-mode: difference; }
        .frame .tag-bar ul.type-menu li::before {
          position: absolute;
          width: 0%;
          height: 1em;
          background-color: #000;
          content: '';
          left: -5px;
          bottom: 0em;
          transition: all .5s; }
        .frame .tag-bar ul.type-menu li::after {
          position: absolute;
          width: 0%;
          height: .35em;
          background-color: #f6f6f8;
          content: '';
          left: -5px;
          top: 0;
          transition: all .5s; }
        .frame .tag-bar ul.type-menu li:hover::before {
          width: calc(100% + 10px); }
        .frame .tag-bar ul.type-menu li:hover::after {
          width: calc(100% + 10px); }
    .frame .tag-bar ul.tag-menu {
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start; }
      .frame .tag-bar ul.tag-menu li {
        list-style-type: none;
        font-size: 10pt;
        font-family: "Raleway";
        font-weight: bold; }
        .frame .tag-bar ul.tag-menu li a {
          color: #b0ae99; }
          .frame .tag-bar ul.tag-menu li a .tag-seasteading {
            outline: blue 2px dashed;
            background-color: rgba(0, 0, 255, 0.5);
            color: white;
            text-transform: uppercase; }
          .frame .tag-bar ul.tag-menu li a .tag-free_ross {
            outline: red 2px dashed;
            background-color: rgba(255, 0, 0, 0.5);
            color: white;
            text-transform: uppercase; }
          .frame .tag-bar ul.tag-menu li a .tag-bogart {
            outline: orange 2px dashed;
            background-color: rgba(255, 127, 0, 0.5);
            color: white;
            text-transform: uppercase; }
          .frame .tag-bar ul.tag-menu li a:hover {
            text-decoration: underline; }
            .frame .tag-bar ul.tag-menu li a:hover .badge {
              text-decoration: none; }
          .frame .tag-bar ul.tag-menu li a .badge {
            opacity: .5; }
  .frame .social-bar {
    grid-area: social; }
    .frame .social-bar ul {
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-end; }
      .frame .social-bar ul li {
        list-style-type: none;
        font-size: 16pt;
        font-family: "Raleway";
        font-weight: bold;
        height: 1.5em; }
        .frame .social-bar ul li.hidden {
          display: none; }
        .frame .social-bar ul li a {
          display: flex;
          flex-direction: row-reverse;
          align-items: center; }
          @media screen and (max-width: 767px) {
            .frame .social-bar ul li a span {
              display: none; } }
          .frame .social-bar ul li a:hover {
            text-decoration: underline; }
        .frame .social-bar ul li img {
          height: 1.5em; }
  .frame .logolist-container {
    grid-area: logolist; }
  .frame .logo-container {
    margin-top: 20vh;
    transition: .5s all;
    transition-delay: .3s; }
    .frame .logo-container .logo {
      width: 40vw;
      transition: .5s all;
      transition-delay: .3s; }
  .frame.focused .logo-container {
    margin-top: 0;
    margin-bottom: 40px; }
    .frame.focused .logo-container .logo {
      width: 25vw; }

.search {
  position: relative;
  margin: 30px 0;
  display: grid;
  grid-template-columns: auto 76px; }
  @media screen and (max-width: 767px) {
    .search {
      position: fixed;
      z-index: 100;
      top: 0;
      left: 0;
      right: 0;
      background: #f6f6f8;
      padding-bottom: 10px;
      margin: 0; } }
  @media screen and (max-width: 1023px) {
    .search {
      grid-template-columns: auto; } }
  .search .cursor {
    position: absolute;
    top: 0;
    z-index: 2;
    width: 3px;
    height: 100%;
    animation: blink 2s linear 0s infinite; }
  .search .counter-container {
    display: flex;
    align-items: center;
    justify-content: flex-end; }
    @media screen and (max-width: 1023px) {
      .search .counter-container {
        display: none; } }
    .search .counter-container .counter {
      font-family: "Raleway";
      font-size: 55px;
      font-weight: 700;
      color: #000;
      user-select: none; }
  .search .search-control {
    white-space: nowrap;
    display: flex;
    align-items: center;
    overflow: hidden; }

.search input, .search .search-div {
  border: 0;
  padding: 10px 10px;
  font-size: calc(20pt + 2vw);
  font-family: "Raleway";
  font-weight: 200;
  background-color: transparent;
  display: inline-block;
  user-select: none; }
  .search input::placeholder, .search .search-div::placeholder {
    color: #000; }
  .search input + .border, .search .search-div + .border {
    height: 3px;
    width: 0;
    background: #000;
    position: absolute;
    bottom: 0;
    transition: all .2s ease; }
  .search input:focus, .search .search-div:focus {
    box-shadow: none;
    outline: none; }
  .search input:focus + .border, .search .search-div:focus + .border {
    width: 100%; }
  .search input:focus + .border + .cursor, .search .search-div:focus + .border + .cursor {
    display: none; }

.search-div {
  position: relative; }
  .search-div:empty {
    width: 100%; }
    .search-div:empty + .border + .cursor + .clear-search {
      display: none; }
  .search-div:empty::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 10px;
    font-size: calc(30pt + 1vw);
    font-family: "Raleway";
    font-weight: 200;
    background-color: transparent;
    width: 100%;
    content: 'find your style';
    display: block;
    text-overflow: ellipsis;
    overflow: hidden; }
  .search-div:focus::after {
    display: none; }

.clear-search {
  background: url("https://openmoji.org/data/black/svg/274C.svg") transparent no-repeat;
  border: 0;
  padding: 0;
  margin-top: 10px;
  height: 55px;
  width: 55px;
  user-select: none;
  z-index: 10;
  cursor: pointer; }
  .clear-search:hover {
    background-color: #eee;
    border-radius: 50%; }
  .clear-search:active, .clear-search:active, .clear-search:focus {
    outline: none;
    box-shadow: none; }

.list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center; }
  .list .items {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    width: 100%; }
    .list .items > li {
      list-style-type: none;
      width: 70%;
      margin: 5% 15%;
      /* Smartphones (portrait and landscape) ---------- */
      /* Smartphones (portrait) ---------- */
      /* Smartphones (landscape) ---------- */
      /* Tablets, iPads (portrait and landscape) ---------- */
      /* Tablets, iPads (portrait) ---------- */
      /* Tablets, iPads (landscape) ---------- */
      /* Desktops and laptops ---------- */
      /* Large screens ---------- */ }
      @media screen and (min-width: 320px) and (max-width: 480px) {
        .list .items > li {
          width: 70%;
          margin: 5% 15%;
          margin-bottom: 6vh; } }
      @media screen and (max-width: 320px) {
        .list .items > li {
          /* styles */ } }
      @media screen and (min-width: 321px) {
        .list .items > li {
          /* styles */ } }
      @media screen and (min-width: 768px) and (max-width: 1024px) {
        .list .items > li {
          /* styles */ } }
      @media screen and (min-width: 768px) {
        .list .items > li {
          width: 40%;
          margin: 5% 5%; } }
      @media screen and (min-width: 1024px) {
        .list .items > li {
          width: 27.33%;
          margin: 5% 3%; } }
      @media screen and (min-width: 1224px) {
        .list .items > li {
          width: 20%;
          margin: 5% 2.5%; } }
      @media screen and (min-width: 1824px) {
        .list .items > li {
          /* styles */ } }
      .list .items > li a {
        display: block;
        position: relative; }
        .list .items > li a h1 {
          color: #000;
          font-family: "Raleway";
          font-size: 10pt;
          font-weight: bold;
          text-align: right;
          position: absolute;
          width: 70%;
          left: 15%;
          bottom: 97%; }
        .list .items > li a:hover img {
          transition: .3s all;
          filter: grayscale(1); }
        .list .items > li a:hover .img-frame {
          transition: width .3s, left .3s, box-shadow .3s;
          z-index: 2;
          left: 5%;
          width: 90%;
          outline: 3px solid #000; }
      .list .items > li .img-container {
        position: relative; }
      .list .items > li .img-frame {
        z-index: 2;
        transition: width .3s, left .3s, box-shadow .3s;
        position: absolute;
        top: 15%;
        left: 15%;
        width: 70%;
        height: 70%;
        outline: 1px solid #000; }
      .list .items > li img {
        transition: .5s all;
        width: 100%; }
      .list .items > li .tags {
        padding: 0;
        margin: 0 15%; }
        .list .items > li .tags > li {
          list-style-type: none;
          font-family: "Raleway";
          font-size: 8pt;
          font-weight: bold;
          color: #000;
          text-transform: lowercase; }
  .list .empty {
    color: #b0ae99;
    font-family: "Poppins"; }
    .list .empty a:hover {
      text-decoration: underline; }