#screenshots {
  padding: 80px 0 120px 0; }
  #screenshots .container {
    border-radius: 20px;
    padding: 86px 0 64px 0;
    background: #fff8ff;
    transition: background-color 600ms linear; }
  #screenshots h3 {
    max-width: 640px;
    padding: 0 40px;
    margin-bottom: 60px; }
  #screenshots .module {
    display: flex; }
  #screenshots .module-text {
    width: 50%;
    padding: 0 40px; }
  #screenshots .module-img {
    width: 50%;
    flex: 1; }
    #screenshots .module-img img {
      display: block;
      margin: 0 auto; }
    #screenshots .module-img .screenshot-container {
      position: relative;
      width: 100%;
      height: 534px;
      z-index: 1; }
    #screenshots .module-img .screenshot {
      background-color: #fff;
      background-repeat: no-repeat;
      background-size: cover;
      box-shadow: 0px 66px 120px rgba(255, 227, 251, 0.5);
      border-radius: 10px;
      border: 7px solid #ffffff;
      border-right: none;
      width: auto;
      height: 534px;
      z-index: 1;
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
      clip-path: inset(-100px 0px -200px -100px); }
    #screenshots .module-img .top-accent {
      background-size: contain;
      background-repeat: no-repeat;
      width: 100%;
      max-width: 294px;
      height: 252px;
      position: absolute;
      top: -130px;
      left: 90px;
      z-index: 4; }
    #screenshots .module-img .bottom-accent {
      background-size: contain;
      background-repeat: no-repeat;
      width: 100%;
      max-width: 124px;
      height: 124px;
      position: absolute;
      bottom: -100px;
      left: 400px;
      z-index: 4; }
  #screenshots .feature-row {
    padding: 40px 29px;
    transition: background-color 600ms linear; }
    #screenshots .feature-row:first-of-type {
      /*margin-top: 60px;*/ }
    #screenshots .feature-row:not(:first-of-type) {
      border-top: 1px solid rgba(33, 46, 68, 0.1); }
    #screenshots .feature-row button {
      background: transparent;
      width: 100%;
      outline: none;
      border: none;
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: space-between; }
      #screenshots .feature-row button h4 {
        flex: 1;
        margin-bottom: 0;
        word-break: break-word; }
      #screenshots .feature-row button .feature-icon {
        background: #fff;
        color: #fb89c0;
        width: 35px;
        height: 35px;
        border: none;
        border-radius: 35px;
        display: flex;
        align-items: center;
        justify-content: center; }
        #screenshots .feature-row button .feature-icon i.chevron-up {
          width: 14px;
          height: 9px;
          background-image: url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.0332 7L7.0332 2L12.0332 7' stroke='%23FB89C0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); }
        #screenshots .feature-row button .feature-icon i.chevron-down {
          width: 14px;
          height: 9px;
          background-image: url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.4541 2L7.4541 7L2.4541 2' stroke='%23FB89C0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
      #screenshots .feature-row button:hover .feature-icon {
        color: #fb89c0; }
    #screenshots .feature-row .feature-text {
      margin-top: 16px;
      padding-right: 80px; }
      #screenshots .feature-row .feature-text p {
        max-width: 361px; }
    #screenshots .feature-row .feature-text,
    #screenshots .feature-row .feature-icon .chevron-up {
      display: none; }
    #screenshots .feature-row.no-border {
      border: none; }
    #screenshots .feature-row.open-feature {
      border-radius: 5px;
      background: #ffe4fb;
      border-top: none; }
      #screenshots .feature-row.open-feature .feature-text,
      #screenshots .feature-row.open-feature .feature-icon .chevron-up {
        display: block; }
      #screenshots .feature-row.open-feature .feature-icon .chevron-down {
        display: none; }
      #screenshots .feature-row.open-feature button {
        cursor: default; }
      #screenshots .feature-row.open-feature + .feature-row {
        border-top: none; }
  @media (min-width: 1400px) {
    #screenshots .container {
      max-width: 1321px;
      padding-bottom: 150px; } }
  @media (min-width: 1200px) {
    #screenshots .container {
      padding-bottom: 150px; }
    #screenshots h3 {
      padding: 0 40px 0 150px; }
    #screenshots .module-text {
      padding: 0 40px 0 110px; } }
  @media (max-width: 768px) {
    #screenshots .container {
      width: auto;
      margin: 0 10px;
      padding: 36px 0; }
    #screenshots h3.black-section-title {
      padding: 0 27px;
      max-width: none; }
    #screenshots .module {
      flex-direction: column;
      flex-flow: column-reverse; }
      #screenshots .module .module-text {
        padding: 0;
        width: 100%; }
        #screenshots .module .module-text p {
          font-size: 16px;
          line-height: 23px;
          padding-right: 40px; }
        #screenshots .module .module-text .feature-row {
          padding: 20px;
          margin-top: 0px; }
          #screenshots .module .module-text .feature-row .feature-text {
            padding-right: 0; }
        #screenshots .module .module-text .feature-row.open-feature {
          border-radius: 0; }
        #screenshots .module .module-text .feature-row button h4 {
          margin-right: 0;
          font-size: 20px;
          line-height: 23px;
          margin-bottom: 0px;
          padding-right: 40px; }
      #screenshots .module .module-img {
        width: auto;
        padding-left: 27px;
        margin-top: 32px; }
        #screenshots .module .module-img .top-accent,
        #screenshots .module .module-img .bottom-accent {
          display: none; }
        #screenshots .module .module-img .screenshot-container,
        #screenshots .module .module-img .screenshot {
          width: auto;
          height: 400px; } }
  @media (max-width: 768px) {
    #screenshots {
      padding: 40px 0; }
      #screenshots .container {
        padding-bottom: 0;
        border-bottom-left-radius: 10px !important;
        border-bottom-right-radius: 10px !important; }
      #screenshots .module-img {
        display: none; }
      #screenshots .screenshot-container,
      #screenshots .screenshot {
        width: auto;
        height: 250px;
        background-size: cover;
        background-repeat: no-repeat;
        margin-bottom: 40px;
        border-radius: 10px;
        margin-right: -40px; }
      #screenshots .screenshot.mobile-screenshot {
        margin-right: -20px;
        border-radius: 10px 0 0 10px; } }
  #screenshots .feature-row:first-of-type {
    margin-top: 60px; }
  #screenshots .module-img .screenshot-container {
    margin-top: -40px; }
  #screenshots .container {
    padding-top: 150px; }
  #screenshots h3 {
    margin-bottom: 0; }
  @media (min-width: 1200px) {
    #screenshots h3 {
      padding-right: 80px; } }
  @media (min-width: 769px) and (max-width: 1199px) {
    #screenshots h3 {
      padding-right: 150px; } }
  @media (max-width: 768px) {
    #screenshots .container {
      padding-top: 36px; }
    #screenshots h3 {
      margin-bottom: 60px; } }
  @media (min-width: 769px) {
    #screenshots.sticky .module-img .screenshot-container {
      position: sticky;
      top: 215px; }
      #screenshots.sticky .module-img .screenshot-container > div {
        overflow: hidden; }
      #screenshots.sticky .module-img .screenshot-container.no-accent {
        top: 130px; } }


/*# sourceMappingURL=modules_screenshots.css.map*/