.tile-outer-wrapper {
  width: var(--tile-width);
  max-width: var(--tile-max-width);
  margin-right: var(--tile-margin-right);
  margin-top: var(--tile-margin-top);
  width: 100%;
  max-width: none; }
  .tile-outer-wrapper .tile-inner-wrapper {
    height: 100%; }
  .tile-outer-wrapper:not(:last-of-type) .tile-inner-wrapper {
    margin-bottom: 0 !important; }

.tile-container {
  width: 100%;
  max-width: none;
  margin: 0 auto; }
  .tile-container, .tile-container:hover, .tile-container *, .tile-container *:hover {
    text-decoration: none; }
  .tile-container .tile-image {
    align-self: center; }
  .tile-container[type="1"] {
    display: block;
    background-color: var(--tile-v1-background-color, var(--tile-background-color));
    padding: var(--tile-v1-padding, var(--tile-padding, var(--global-padding)));
    height: 100%; }
    .tile-container[type="1"] .tile-image {
      width: var(--tile-v1-image-width, var(--tile-image-width, auto));
      max-width: 100%;
      height: var(--tile-v1-image-height, var(--tile-image-height, auto));
      margin-top: var(--tile-v1-image-margin-top, var(--global-padding, 0));
      margin-right: var(--tile-v1-image-margin-right, auto);
      margin-bottom: var(--tile-v1-image-margin-bottom, var(--global-padding, 0));
      margin-left: var(--tile-v1-image-margin-left, auto);
      display: block; }
    .tile-container[type="1"] .tile-title,
    .tile-container[type="1"] .tile-content {
      display: block;
      text-align: center; }
    .tile-container[type="1"] .tile-title {
      width: 100%;
      display: block;
      font-size: var(--tile-v1-title-font-size, var(--tile-title-font-size, 18px));
      font-weight: var(--tile-v1-title-font-weight, var(--tile-title-font-weight, 700));
      font-family: var(--tile-v1-title-title-font-family, var(--tile-title-font-family, var(--secondary-font)));
      line-height: var(--tile-v1-title-line-height, var(--tile-title-line-height, 1.2));
      color: var(--tile-v1-title-color, var(--tile-title-color, var(--primary-color)));
      padding: var(--tile-v1-title-padding, var(--tile-title-padding, 0));
      text-transform: var(--tile-v1-title-text-transform, var(--tile-title-text-transform, none)); }
    .tile-container[type="1"] .tile-content {
      width: 100%;
      display: block;
      font-size: var(--tile-v1-description-font-size, var(--tile-description-font-size, var(--p-font-size)));
      font-weight: var(--tile-v1-description-font-weight, var(--tile-description-font-weight, var(--p-font-weight)));
      font-family: var(--tile-v1-description-title-font-family, var(--tile-description-font-family, var(--p-font-family)));
      line-height: var(--tile-v1-description-line-height, var(--tile-description-line-height, var(--p-line-height)));
      color: var(--tile-v1-description-color, var(--tile-description-color, var(--text-color)));
      padding: var(--tile-v1-description-padding, var(--tile-description-padding, 0));
      text-transform: var(--tile-v1-description-text-transform, var(--tile-description-text-transform, none)); }
  .tile-container[type="2"] {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: var(--tile-type-2-height, var(--tile-height, 250px)); }
    .tile-container[type="2"].flip .tile-title {
      -webkit-animation: flip-title .3s linear;
              animation: flip-title .3s linear;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards; }
    .tile-container[type="2"].flip .tile-content {
      -webkit-animation: flip-content .3s linear;
              animation: flip-content .3s linear;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards; }
    .tile-container[type="2"] .tile-image {
      z-index: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      padding: 0;
      margin: 0;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      transform: translate(-50%, -50%); }
    .tile-container[type="2"] .tile-title {
      -webkit-animation: unflip-title .3s linear;
              animation: unflip-title .3s linear;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards;
      width: var(--tile-v2-title-width, var(--tile-title-width, auto));
      font-size: var(--tile-v2-title-font-size, var(--tile-title-font-size, 18px));
      font-weight: var(--tile-v2-title-font-weight, var(--tile-title-font-weight, 700));
      font-family: var(--tile-v2-title-title-font-family, var(--tile-title-font-family, var(--secondary-font)));
      line-height: var(--tile-v2-title-line-height, var(--tile-title-line-height, 1.2));
      color: var(--tile-v2-title-color, var(--tile-title-color, #fff));
      padding: var(--tile-v2-title-padding, var(--tile-title-padding, 25px 20px 25px 20px));
      text-transform: var(--tile-v2-title-text-transform, var(--tile-title-text-transform, none));
      z-index: 100; }
      .tile-container[type="2"] .tile-title:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--tile-v2-title-background-color, var(--tile-title-background-color, var(--primary-color)));
        opacity: var(--tile-v2-title-background-opacity, var(--tile-title-background-opacity, 0.75));
        z-index: -1; }
    .tile-container[type="2"] .tile-content {
      width: var(--tile-v2-expanded-width, 100%);
      font-size: var(--tile-v2-description-font-size, var(--tile-description-font-size, var(--p-font-size)));
      font-weight: var(--tile-v2-description-font-weight, var(--tile-description-font-weight, var(--p-font-weight)));
      font-family: var(--tile-v2-description-title-font-family, var(--tile-description-font-family, var(--p-font-family)));
      line-height: var(--tile-v2-description-line-height, var(--tile-description-line-height, var(--p-line-height)));
      color: var(--tile-v2-description-color, var(--tile-description-color, #fff));
      padding: var(--tile-v2-description-padding, var(--tile-description-padding, 0 20px 25px 20px));
      text-transform: var(--tile-v2-description-text-transform, var(--tile-description-text-transform, none));
      transform: rotateY(90deg);
      max-height: 0%;
      overflow: hidden;
      -webkit-animation: unflip-content .3s linear;
              animation: unflip-content .3s linear;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards; }
      .tile-container[type="2"] .tile-content:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: red;
        background-color: var(--tile-v2-description-background-color, var(--tile-description-background-color, var(--primary-color)));
        opacity: var(--tile-v2-description-background-opacity, var(--tile-description-background-opacity, 0.75));
        z-index: -1; }

@-webkit-keyframes flip-title {
  0% {
    transform: rotateY(0);
    width: auto;
    min-width: 0%; }
  50% {
    transform: rotateY(90deg);
    width: auto;
    min-width: 0%; }
  51% {
    transform: rotateY(90deg);
    width: 100%;
    min-width: 0%; }
  100% {
    transform: rotateY(0);
    width: 100%;
    min-width: var(--tile-v2-expanded-width, 100%); } }

@-webkit-keyframes unflip-title {
  0% {
    transform: rotateY(0);
    min-width: var(--tile-v2-expanded-width, 100%); }
  50% {
    transform: rotateY(90deg);
    min-width: var(--tile-v2-expanded-width, 100%); }
  51% {
    transform: rotateY(90deg);
    min-width: 0%; }
  100% {
    transform: rotateY(0);
    min-width: 0%; } }

@-webkit-keyframes flip-content {
  0% {
    transform: rotateY(90deg);
    max-height: 0%;
    padding-bottom: 0;
    min-width: 0%; }
  50% {
    transform: rotateY(90deg);
    max-height: 0%;
    padding-bottom: 0;
    min-width: 0%; }
  51% {
    transform: rotateY(90deg);
    max-height: 100%;
    padding-bottom: 25px;
    min-width: 0%; }
  100% {
    transform: rotateY(0);
    max-height: 100%;
    padding-bottom: 25px;
    min-width: var(--tile-v2-expanded-width, 100%); } }

@-webkit-keyframes unflip-content {
  0% {
    transform: rotateY(0);
    max-height: 100%;
    padding-bottom: 25px;
    max-width: var(--tile-v2-expanded-width, 100%);
    min-width: var(--tile-v2-expanded-width, 100%); }
  50% {
    transform: rotateY(90deg);
    max-height: 100%;
    padding-bottom: 25px;
    max-width: var(--tile-v2-expanded-width, 100%);
    min-width: 0%; }
  51% {
    transform: rotateY(90deg);
    max-height: 0%;
    padding-bottom: 0;
    max-width: var(--tile-v2-expanded-width, 100%);
    min-width: 0%; }
  100% {
    transform: rotateY(90deg);
    max-height: 0%;
    padding-bottom: 0;
    max-width: var(--tile-v2-expanded-width, 100%);
    min-width: 0%; } }
  .tile-container[type="3"] {
    display: var(--tile-v3-container-display, flex);
    flex-direction: var(--tile-v3-container-flex-direction, column);
    padding: var(--tile-v3-container-padding, 0);
    background-color: var(--tile-v3-container-background-color, inherit);
    height: var(--tile-v3-container-height, 100%); }
    .tile-container[type="3"] .tile-image {
      display: block;
      width: var(--tile-v3-image-width, auto);
      max-width: var(--tile-v3-image-max-width, 100%);
      height: var(--tile-v3-image-height, var(--tile-image-height, auto));
      margin-top: var(--tile-v3-image-margin-top, 0);
      margin-right: var(--tile-v3-image-margin-right, 0);
      margin-bottom: var(--tile-v3-image-margin-bottom, 0);
      margin-left: var(--tile-v3-image-margin-left, 0);
      order: -1; }
    .tile-container[type="3"] .tile-title {
      width: 100%;
      font-size: var(--tile-v3-title-font-size, var(--tile-title-font-size, 18px));
      letter-spacing: var(--tile-v3-title-letter-spacing, var(--tile-title-letter-spacing, 0));
      font-weight: var(--tile-v3-title-font-weight, var(--tile-title-font-weight, 700));
      font-family: var(--tile-v3-title-title-font-family, var(--tile-title-font-family, var(--secondary-font)));
      line-height: var(--tile-v3-title-line-height, var(--tile-title-line-height, 1.2));
      text-align: var(--tile-v3-title-text-align, var(--tile-title-text-align, center));
      color: var(--tile-v3-title-color, var(--tile-title-color, #fff));
      margin: var(--tile-v3-title-margin, var(--tile-title-margin, 0));
      padding: var(--tile-v3-title-padding, var(--tile-title-padding, 15px 20px 15px 20px));
      text-transform: var(--tile-v3-title-text-transform, var(--tile-title-text-transform, uppercase));
      background-color: var(--tile-v3-title-background-color, var(--tile-title-background-color, var(--primary-color)));
      display: var(--tile-v3-title-display, var(--tile-title-display, block)); }
    .tile-container[type="3"] .tile-content {
      width: 100%;
      height: 100%;
      font-size: var(--tile-v3-description-font-size, var(--tile-description-font-size, var(--p-font-size)));
      letter-spacing: var(--tile-v3-description-letter-spacing, var(--tile-description-letter-spacing, 0));
      font-weight: var(--tile-v3-description-font-weight, var(--tile-description-font-weight, var(--p-font-weight)));
      font-family: var(--tile-v3-description-title-font-family, var(--tile-description-font-family, var(--p-font-family)));
      text-align: var(--tile-v3-description-text-align, var(--tile-description-text-align, center));
      line-height: var(--tile-v3-description-line-height, var(--tile-description-line-height, var(--p-line-height)));
      color: var(--tile-v3-description-color, var(--tile-description-color, #fff));
      padding: var(--tile-v3-description-padding, var(--tile-description-padding, 0 20px 15px 20px));
      margin: var(--tile-v3-description-margin, var(--tile-description-margin, 0));
      text-transform: var(--tile-v3-description-text-transform, var(--tile-description-text-transform, none));
      background-color: var(--tile-v3-description-background-color, var(--tile-description-background-color, var(--primary-color)));
      display: var(--tile-v3-description-display, var(--tile-description-display, block)); }
  .tile-container[type="4"] {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding: var(--tile-type-4-padding, 30px);
    z-index: 100;
    min-height: var(--tile-type-2-height, var(--tile-height, 250px)); }
    .tile-container[type="4"] .tile-image {
      display: none;
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      transform: var(--tile-type-4-image-transform, translate(-50%, -50%));
      z-index: -1; }
    .tile-container[type="4"] .tile-content {
      background-color: rgba(255, 255, 255, 0);
      order: 2;
      font-size: var(--tile-type-4-content-font-size, 24px);
      line-height: var(--tile-type-4-content-line-height, 1.4);
      font-weight: 700;
      color: #fff; }
    .tile-container[type="4"] .tile-title,
    .tile-container[type="4"] .tile-title:focus {
      order: 3;
      display: inline-block;
      width: auto;
      margin: var(--tile-type-4-button-margin, 20px 0 0);
      border-radius: var(--button-border-radius, var(--border-radius, 0));
      border: var(--button-border-width, 0) solid var(--button-border-color, var(--primary-color));
      color: var(--button-color, #fff);
      background-color: var(--button-background-color, var(--primary-color));
      font-family: var(--button-font-family, var(--secondary-font, var(--primary-font)));
      font-size: var(--button-font-size, var(--p-font-size));
      line-height: var(--button-line-height, var(--p-line-height));
      font-weight: var(--button-font-weight, var(--p-font-weight));
      padding: var(--button-padding-top, var(--button-padding, 10px)) var(--button-padding-right, var(--button-padding, 30px)) var(--button-padding-bottom, var(--button-padding, 10px)) var(--button-padding-left, var(--button-padding, 30px));
      -webkit-text-decoration: var(--button-text-decoration, none);
      text-decoration: var(--button-text-decoration, none);
      text-transform: var(--button-text-transform, none);
      transition-duration: var(--button-transition-duration, background-color);
      transition-duration: var(--button-transition-duration, var(--transition-duration)); }
      .tile-container[type="4"] .tile-title:hover,
      .tile-container[type="4"] .tile-title:focus:hover {
        background-color: var(--tile-type-4-button-hover-background-color, var(--secondary-color)); }
    .tile-container[type="4"]:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--primary-color);
      z-index: -1;
      opacity: .75; }
    .tile-container[type="4"] * {
      color: #fff; }
  .tile-container[type="5"] {
    display: grid;
    grid-template-columns: var(--tile-type-5-image-width, 150px) auto;
    grid-template-rows: auto auto;
    gap: var(--tile-type-5-horizontal-gap, var(--tile-type-5-gap, 0)) var(--tile-type-5-vertical-gap, var(--tile-type-5-gap, 0));
    grid-template-areas: "tile-image tile-title" "tile-image tile-content"; }
    .tile-container[type="5"] .tile-image {
      width: 100%;
      grid-area: tile-image;
      align-self: var(--tile-v5-title-image-align-self, flex-start); }
    .tile-container[type="5"] .tile-title {
      grid-area: tile-title;
      display: block;
      font-size: var(--tile-v5-title-font-size, var(--tile-title-font-size, var(--p-font-size)));
      font-weight: var(--tile-v5-title-font-weight, var(--tile-title-font-weight, 700));
      font-family: var(--tile-v5-title-title-font-family, var(--tile-title-font-family, var(--primary-font)));
      line-height: var(--tile-v5-title-line-height, var(--tile-title-line-height, 1));
      color: var(--tile-v5-title-color, var(--tile-title-color, var(--text-color)));
      padding: var(--tile-v5-title-padding, var(--tile-title-padding, 0));
      text-transform: var(--tile-v5-title-text-transform, var(--tile-title-text-transform, none)); }
    .tile-container[type="5"] .tile-content {
      grid-area: tile-content;
      display: block;
      font-size: var(--tile-v5-description-font-size, var(--tile-description-font-size, var(--p-font-size)));
      font-weight: var(--tile-v5-description-font-weight, var(--tile-description-font-weight, var(--p-font-weight)));
      font-family: var(--tile-v5-description-title-font-family, var(--tile-description-font-family, var(--p-font-family)));
      line-height: var(--tile-v5-description-line-height, var(--tile-description-line-height, var(--p-line-height)));
      color: var(--tile-v5-description-color, var(--tile-description-color, var(--text-color)));
      padding: var(--tile-v5-description-padding, var(--tile-description-padding, 0));
      text-transform: var(--tile-v5-description-text-transform, var(--tile-description-text-transform, none)); }

#editor .tile-container .tile-image {
  padding-top: 33%;
  width: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat; }

#editor .tile-container input,
#editor .tile-container textarea {
  border-radius: 0;
  border-width: 0; }

#editor .tile-container[type="2"] .tile-title,
#editor .tile-container[type="2"] .tile-content {
  margin-top: 5px;
  margin-bottom: 5px;
  color: var(--tile-v2-title-color, var(--tile-title-color, #fff));
  background-color: var(--tile-v2-title-background-color, var(--tile-title-background-color, var(--primary-color))); }