/* HOME HEADER */

body .topnav{
  box-shadow: none;
  animation-name: none !important;
  .toplogolink{
    --logo-link-height: clamp(70px, 9vw, 140px);
  }
}

body header.masked{
  --home-header-height: 57vw;
  background-color: rgb(var(--color1));
  height: var(--home-header-height);
  .bannerwrapper{
    mask-position: right;
    height: var(--home-header-height);
    .bannerinner{
      margin-left: 24%;
      width: 76%;
    }
  }
}

@media screen and (max-width: 900px){
  body header.masked{
    --home-header-height: 100vh;
    height: 100vh !important;
    .bannerwrapper {
      width: 100vw;
      left: 0px;
      mask-size: auto 100%;
      mask-repeat: no-repeat;
      mask-position: 0 0;
      transform: none;
      .bannerinner {
        margin-left: 20%;
        width: 80%;
      }
    }
  }
}

body header .bannerwrapper .bannerinner .Slideshow::after{
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0));
}

/* REMOVE INNER PAGE WATERMARK CURVE ON HOMEPAGE */

body .mainwrapper::before{
  display: none;
}

/* TAGLINES */

body .taglineoverlay{
  bottom: 50%;
  transform: translateY(50%);
  .taglines .tagline .taglineinner{
    .title{
      font-size: max(6.6vw, 44px);
      font-family: var(--font-cursive);
      text-shadow: 5px 5px 15px rgba(var(--grey2),0.8);
    }
    .subtitle{
      font-size:  max(4.5vw, 30px);
      line-height: 0.7em;
      text-transform: uppercase;
      font-weight: 100;
      font-family: var(--font-normal);
      background-color: rgb(var(--color2));
      width: fit-content;
      padding: 0.3em 15px 0.25em;
    }
  }
}

/* HOME BLOQ TITLES */

body.homePageStyle .bloqTitle span{
  line-height: 0.7em;
  background-color: rgb(var(--color2));
  padding: 0.1em 15px 0.05em;
}

/* PATHWAYS */

body.homePageStyle section.LinksBloq.mod_none{
  padding-bottom: 200px !important;
  .bloqTitle{
    font-size: var(--fs0);
    text-align: center;
    padding-bottom: 20px;
    span{
      font-size: var(--fs0);
    }
  }
  .Card{
    max-width: 900px;
    margin: 0 auto;
    .Item{
      .ItemBefore::after{
        transition: 0.4s;
        content: '';
        position: absolute;
        opacity: 0;
        width: 100%;
        bottom: 0;
        left: 0;
        height: 40px;
        mask-image: var(--pathways-mask);
        mask-size: 100% auto;
        mask-repeat: no-repeat;
        mask-position: 0 0;
        background-color: rgba(var(--color1),0.9);
      }
      .ItemInner{
        height: 120px;
        mask-image: var(--pathways-mask);
        mask-size: 100% auto;
        mask-repeat: no-repeat;
        mask-position: 0 0;
        background-color: rgba(var(--color2),0.9);
        flex-wrap: nowrap;
        .Title{
          margin-bottom: 0;
          font-size: var(--fs4);
          font-weight: 900;
          color: white;
          text-transform: uppercase;
          padding-top: 50px;
          transition: 0.2s;
          margin-top: 0;
        }
        .ItemContent{
          width: fit-content;
          line-height: 35px;
          height: 35px;
          border: 1px solid rgb(var(--color3));
          border-radius: 17px;
          padding: 0 25px;
          color: white;
          &::before{
            content: 'VIEW POST';
          }
          &:hover{
            background-color: rgb(var(--color3));
          }
        }
      }
      &:hover{
        .ItemBefore::after{
          height: 60px;
          opacity: 1;
          width: calc(100% - 20px);
          left: 10px;
        }
        .ItemInner{
          height: 185px;
          background-color: rgba(var(--color2),1);
          .Title{
            padding-top: 0;
          }
        }
      }
    }
  }
}

/* FACEBOOK */

body section.DataBloq.mod_wall_grid{
  .bloqTitle{
    padding-bottom: 30px;
    max-width: calc(var(--grid-gap) + var(--grid-gap) + var(--grid-gap) + 1160px);
    span{
      background-color: rgb(var(--color3));
    }
  }
  &::before, &::after{
    height: 850px;
    width: 255px;
    content: '';
    visibility: visible;
    position: absolute;
    top: 20px;
    left: 0;
    background-position: 0 0;
    background-size: contain;
    background-image: var(--blue-curve);
    background-repeat: no-repeat;
    z-index: -1;
  }
  &::after{
    left: auto;
    right: 0;
    background-position: 100% 0;
    background-image: var(--cyan-curve);
    top: -400px;
  }
  div.Grid{
    max-width: calc(var(--grid-gap) + var(--grid-gap) + var(--grid-gap) + 1160px);
    >ul{
      grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
      >li{
        &:nth-child(6n + 3), &:nth-child(6n + 4){
          grid-column: span 1;
        }
        &:nth-child(6n + 1), &:nth-child(6n + 6){
          grid-column: span 2;
        }
        .Item{
          height: 290px;
          box-shadow: 0px 0px 10px 0px rgba(var(--grey3),0.8);
        }
      }
    }
  }
  @media screen and (max-width: 1247px){
    div.Grid, .bloqTitle{
      max-width: calc(var(--grid-gap) + var(--grid-gap) + var(--grid-gap) + 850px);
    }
  }
  @media screen and (max-width: 635px){
    div.Grid>ul>li{
      grid-column: span 1 !important;
    }
    &::before, &::after{
      opacity: 0.3;
    }
  }
  div.Grid .Item{
    .ItemInner{
      justify-content: flex-start;
      .ItemIcon{
        order: -2;
        margin-bottom: 5px;
        &::before{
          content: '\f09a';
          font-size: 25px;
        }
      }
      .Title{
        font-size: 0px;
        order: -1;
        margin-bottom: 5px;
        &::before{
          content: '@cleaswell';
          font-size: var(--fs5);
          line-height: 1.5em;
          display: block;
        }
      }
      .ItemDate{
        margin-bottom: 5px;
        font-weight: 600;
        text-transform: uppercase; 
        letter-spacing: 0.1em;
      }
      .ItemContent{
        display: block;
        padding-top: 20px;
      }
      .popbutton{
        &::before{
          content: 'VIEW POST';
        }
        display: none;
        margin-top: 20px;
        width: fit-content;
        line-height: 35px;
        height: 35px;
        border: 1px solid rgb(var(--color4));
        border-radius: 17px;
        padding: 0 25px;
        color: white;
        &:hover{
          background-color: rgb(var(--color4));
        }
      }
    }
    &:hover{
      .ItemInner{
        justify-content: center;
        .ItemContent{
          display: none;
        }
        .popbutton{
          display: block;
        }
      }
    }
  }
  div.Grid li .Item{
    .ItemBefore::after{
      background: linear-gradient(0deg,rgba(var(--color4), 0.9), rgba(var(--color1), 0.95));
    }
    &:hover{
      .ItemBefore::after{
        background: linear-gradient(0deg,rgba(var(--color4), 1), rgba(var(--color1), 1));
      }
    }
  }
  @media screen and (max-width: 499px){
    div.Grid li:nth-child(1) .Item, div.Grid li:nth-child(3) .Item, div.Grid li:nth-child(5) .Item{
      .ItemBefore::after{
        background: linear-gradient(0deg,rgba(var(--color1), 0.9), rgba(var(--grey10), 0.95));
      }
      &:hover{
        .ItemBefore::after{
          background: linear-gradient(0deg,rgba(var(--color1), 1), rgba(var(--grey10), 1));
        }
      }
    }
  }

  @media screen and (min-width: 500px){
    div.Grid li:nth-child(3) .Item, div.Grid li:nth-child(5) .Item{
      .ItemBefore::after{
        background: linear-gradient(0deg,rgba(var(--color1), 0.9), rgba(var(--grey10), 0.95));
      }
      &:hover{
        .ItemBefore::after{
          background: linear-gradient(0deg,rgba(var(--color1), 1), rgba(var(--grey10), 1));
        }
      }
    }
    div.Grid li:nth-child(1) .Item, div.Grid li:nth-child(6) .Item{
      background-color: white;
      .ItemBefore{
        width: 35%;
        left: auto;
        mask-image: var(--facebook-mask);
        mask-size: auto 100%;
        mask-repeat: no-repeat;
        mask-position: 0 0;
        background-color: rgb(var(--color3));
        &::after{
          background: linear-gradient(0deg,rgba(var(--color3), 0), rgba(var(--color3), 0));
        }
        .ItemImage{
          width: calc(100% - 20px);
          position: absolute;
          height: 100%;
          top: 0;
          right: 0;
          mask-image: var(--facebook-mask);
          mask-size: auto 100%;
          mask-repeat: no-repeat;
          mask-position: 0 0;
        }
      }
      .ItemInner{
        color: rgb(var(--color4));
        text-align: left;
        align-items: flex-start;
        width: 60%;
        .Title, .ItemDate{
          color: rgb(var(--color1));
        }
        .ItemIcon{
          color: rgb(var(--color2));
        }
        .popbutton{
          display: block;
          opacity: 0;
          color: rgb(var(--color1));
        }
      }
      &:hover{
        .ItemBefore{
          &::after{
            background: linear-gradient(0deg,rgba(var(--color3), 0.7), rgba(var(--color3), 0.7));
          }
        }
        .ItemInner{
          justify-content: flex-start;
          .ItemContent{
            display: block;
          }
          .popbutton{
            opacity: 1;
          }
        }
      }
    }
  }
}

/* VALUES */

body section.mod_widecircles_slider{
  padding-top: 80px !important;
  padding-bottom: 140px !important;
  div.Slider{
    

  }
}