/* Isometric 1 */
html {
    /* default values */
  
    /* Clip-Path */
    --clippath: polygon(
      0% 20px,
      20px 0%,
      100% 0%,
      100% calc(100% - 20px),
      calc(100% - 20px) 100%,
      0% 100%
    );
    --clippath10: polygon(
      0% 10px,
      10px 0%,
      100% 0%,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      0% 100%
    );
    --ss-clippath10: polygon(
      0% 0%,
      100% 0%,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      0% 100%
    );
    --ss-clippath1: polygon(
      0% 0%,
      100% 0%,
      100% calc(100% - 20px),
      calc(100% - 20px) 100%,
      0% 100%
    );
    --ss-clippath2: polygon(
      0% 0%,
      100% 0%,
      100% calc(100% - 40px),
      calc(100% - 40px) 100%,
      0% 100%
    );
  }
  
  body {
    --isom1-shadow: #132b10;
    --isom1-bg: var(--ssc-main-bg);
  
    --isom2-shadow: #000000;
    --isom2-bg: #edfff6;
  }
  .dark body { 
  
    --isom2-bg: #272a28;
  }
  
  .isom {
  }
  .isom1 {
    
  }
  
  
  .isom .home-top {
    clip-path: var(--ss-clippath2);
  }
  .isom1 .home-top {
    background: var(--isom1-bg);
  }
  .isom2 .home-top {
    background: var(--isom2-bg);
  }
  
  .isom1 .hero-post .short-post a {
    --c: var(--isom1-shadow);
  }
  .isom2 .hero-post .short-post a {
    --c: var(--isom2-shadow);
  }
  
  .isom .hero-post .short-post a {
    --d: 20px;
    max-width: 1028px;
    margin-right: 20px;
    border-width: 0px 0px var(--d) var(--d);
    border-style: solid;
    border-color: rgba(255, 103, 92, 0);
    background: conic-gradient(
          at left var(--d) bottom var(--d),
          #0000 90deg,
          rgb(255 255 255 / 0.15) 0 225deg,
          rgb(255 255 255 / 0.4) 0
        )
        border-box,
      conic-gradient(at left var(--d) bottom var(--d), #0000 90deg, var(--c) 0) 0
        100% border-box;
    clip-path: var(--clippath);
    
  }
  
  .isom .cat-span {
    color: white;
  }
  .isom .hero-post .cat-span {
    font-size: 10px;
    letter-spacing: 0.3em;
    text-wrap: nowrap;
    line-height: 20px;
    height: 18px;
    width: 90px;
    right: 50px;
    bottom: 0;
    transform: skewX(-35deg);
    background: transparent;
  }
  
  @media (min-width: 992px) {
    .isom1 .main-featured .social-side.social .box-posts {
      --c: var(--isom1-shadow);
    }
    .isom2 .main-featured .social-side.social .box-posts {
      --c: var(--isom2-shadow);
    }
    .isom .main-featured .social-side.social .box-posts {
      --d: 20px;
      border-width: 0px 0px var(--d) var(--d);
      border-style: solid;
      border-color: #ff675c00;
      background-color: var(--ss-c1);
      background: conic-gradient(
            at left var(--d) bottom var(--d),
            #0000 90deg,
            rgb(255 255 255 / 0.15) 0 225deg,
            rgb(255 255 255 / 0.4) 0
          )
          border-box,
        conic-gradient(at left var(--d) bottom var(--d), #0000 90deg, var(--c) 0)
          0 100% border-box;
    }
    .isom .main-featured .social-side.social .social-box-title {
      bottom: 2px;
      transform: translate(-50%, -21px) skewX(-35deg);
      font-size: 10px !important;
      letter-spacing: 0.25em !important;
      color: white;
      background: transparent;
    }
    .isom .main-featured .social .swiper-button-prev,
    .isom .main-featured .social .swiper-button-next {
      bottom: 2px;
      transform: translate(0, -21px) skewX(-35deg);
      color: white;
      font-size: 15px;
    }
  }