/* ==========================================================================
	Index
========================================================================== */
/* ==========================================================================
	Variables
========================================================================== */
/* Sizes
========================================================================== */
/* ==========================================================================
	Base
========================================================================== */
body,
html {
  height: 100%;
  background: #f6faff; }

/* App
========================================================================== */
.app-wrapper {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0; }

.app {
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 100%; }

.app-top {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 2; }
  .app-top .top-bar {
    display: flex; }
  .app-top .top-frames {
    display: flex;
    justify-content: center;
    width: 100%; }

.app-content {
  display: flex;
  position: relative;
  height: 100%;
  margin-bottom: 80px;
  overflow: hidden;
  background-color: #f0f4fa;
  background-size: cover !important;
  /* is this necessary */ }
  .app-content form {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; }
  .app-content.hidden {
    background-image: none !important;
    background-color: #f0f4fa !important; }

.app-bottom {
  padding: 15px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  z-index: 1;
  min-height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; }
  .app-bottom .btn {
    align-self: center; }

/* Titles
========================================================================== */
.btn-back,
.titles,
.btn-faq {
  flex: 1;
  display: flex;
  align-self: center; }

.btn-back {
  justify-content: flex-start; }

.titles {
  flex-grow: 6;
  justify-content: center; }

.btn-faq {
  justify-content: flex-end; }

.titles .title.hidden {
  display: none; }

.titles .title {
  text-align: center;
  font-weight: bold; }

/* Filter
========================================================================== */
.filter-slider {
  display: flex;
  overflow-y: auto;
  height: 90px; }

.filter {
  width: 80px;
  flex: none;
  flex-direction: column;
  cursor: pointer; }

.filter.selected {
  background-image: linear-gradient(0deg, #03e0bd, rgba(3, 224, 189, 0));
  color: #03e0bd; }

/* Media Queries
========================================================================== */
@media (min-width: 1064px) {
  .app {
    position: relative;
    width: 1024px;
    height: calc(100vh - 40px);
    top: 20px;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 1px 1px 0 rgba(0, 1, 2, 0.1), 0 2px 5px 0 rgba(0, 1, 2, 0.2);
    overflow: hidden; }
  .app-content {
    overflow-y: auto; }
  .app-bottom {
    position: absolute; } }

@media (min-width: 1440px) {
  .app {
    position: relative;
    width: 1400px;
    height: calc(100vh - 40px);
    top: 20px;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 1px 1px 0 rgba(0, 1, 2, 0.1), 0 2px 5px 0 rgba(0, 1, 2, 0.2);
    overflow: hidden; }
  .app-bottom {
    position: absolute; } }

/* ==========================================================================
	Buttons
========================================================================== */
.btn {
  display: inline-block;
  color: white;
  text-transform: uppercase;
  border-radius: 0;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.8em;
  -webkit-font-smoothing: unset;
  transition: 0.3s all ease;
  text-decoration: none;
  background: #03e0bd;
  border: 3px solid #03e0bd;
  border-radius: 3px;
  cursor: pointer; }
  .btn:hover {
    color: #03e0bd;
    background: transparent;
    background: 0 0;
    border: 3px solid #03e0bd; }
  .btn.disabled, .btn:disabled[disabled] {
    color: white;
    cursor: not-allowed;
    opacity: 0.5 !important;
    padding: 0.618em 1em;
    border: 3px solid #03e0bd !important; }
    .btn.disabled:hover, .btn:disabled[disabled]:hover {
      color: white;
      background: #03e0bd !important;
      cursor: not-allowed; }
  .btn.btn-warning {
    background: red;
    border: 3px solid red; }
  .btn.btn-warning:hover {
    color: red;
    background: transparent;
    background: 0 0;
    border: 3px solid red; }

/* Links
========================================================================== */
.app-top a {
  color: #03e0bd;
  font-weight: bold;
  padding: 10px;
  text-transform: uppercase; }

/* Upload
========================================================================== */
.upload-button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border: 4px dashed #03e0bd;
  width: calc(256px - 18px);
  height: calc(256px - 18px);
  margin: 0 10px;
  border-radius: 14px;
  background-color: rgba(253, 254, 255, 0.7);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  cursor: pointer; }
  .upload-button.animate {
    animation: shrink-grow 2s ease-out infinite; }
  .upload-button.hidden {
    display: none; }
  .upload-button .plus-icon {
    width: 40px;
    height: 40px;
    fill: #03e0bd;
    transition: opacity 0.2s; }
  .upload-button #file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.00001;
    cursor: pointer; }

/* Media Queries
========================================================================== */
@media (min-width: 1064px) {
  .upload-button.insert-after {
    display: none; }
  .upload-button.hidden {
    display: inline-flex !important; } }

/* Trash
========================================================================== */
.trash {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: auto;
  z-index: 9999; }
  .trash path {
    fill: #03e0bd; }

/* Animation
========================================================================== */
@keyframes shrink-grow {
  0% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95); }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95); } }

/* ==========================================================================
	Cart
========================================================================== */
.woocommerce img.cart-preview,
.woocommerce-page img.cart-preview {
  width: 120px;
  height: auto; }

.woocommerce img.checkout-preview,
.woocommerce-page img.checkout-preview {
  width: 80px;
  height: auto; }

/* ==========================================================================
	Modal
========================================================================== */
#modal-faq,
#modal-cart,
#modal-edit,
#modal-loading {
  position: absolute;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  overflow: auto; }
  #modal-faq.hidden,
  #modal-cart.hidden,
  #modal-edit.hidden,
  #modal-loading.hidden {
    left: -100vw; }
  #modal-faq.modal,
  #modal-cart.modal,
  #modal-edit.modal,
  #modal-loading.modal {
    display: block !important; }
  #modal-faq .modal-content,
  #modal-cart .modal-content,
  #modal-edit .modal-content,
  #modal-loading .modal-content {
    position: relative;
    width: 100%;
    height: 500px;
    max-width: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background-color: #f0f4fa;
    box-shadow: 0px 11px 15px -7px rgba(0, 1, 2, 0.2), 0px 24px 38px 3px rgba(0, 1, 2, 0.14), 0px 9px 46px 8px rgba(0, 1, 2, 0.12);
    overflow: hidden; }
    #modal-faq .modal-content .modal-main,
    #modal-cart .modal-content .modal-main,
    #modal-edit .modal-content .modal-main,
    #modal-loading .modal-content .modal-main {
      height: 100%;
      padding: 15px;
      display: flex;
      align-items: center;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      align-self: center; }
  #modal-faq .modal-header,
  #modal-faq .modal-footer,
  #modal-cart .modal-header,
  #modal-cart .modal-footer,
  #modal-edit .modal-header,
  #modal-edit .modal-footer,
  #modal-loading .modal-header,
  #modal-loading .modal-footer {
    position: absolute;
    top: 0;
    width: 100%;
    height: 50px;
    display: flex;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 2; }
  #modal-faq .modal-footer,
  #modal-cart .modal-footer,
  #modal-edit .modal-footer,
  #modal-loading .modal-footer {
    top: auto;
    bottom: 0; }
  #modal-faq .modal-left,
  #modal-faq .modal-center,
  #modal-faq .modal-right,
  #modal-cart .modal-left,
  #modal-cart .modal-center,
  #modal-cart .modal-right,
  #modal-edit .modal-left,
  #modal-edit .modal-center,
  #modal-edit .modal-right,
  #modal-loading .modal-left,
  #modal-loading .modal-center,
  #modal-loading .modal-right {
    flex: 1;
    /* shorthand for: flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
    display: flex;
    align-items: center;
    padding: 10px; }
  #modal-faq .modal-left,
  #modal-cart .modal-left,
  #modal-edit .modal-left,
  #modal-loading .modal-left {
    justify-content: flex-start; }
  #modal-faq .modal-center,
  #modal-cart .modal-center,
  #modal-edit .modal-center,
  #modal-loading .modal-center {
    justify-content: center;
    text-align: center;
    font-weight: bold;
    font-size: 1.5rem; }
  #modal-faq .modal-right,
  #modal-cart .modal-right,
  #modal-edit .modal-right,
  #modal-loading .modal-right {
    justify-content: flex-end; }
    #modal-faq .modal-right .btn,
    #modal-cart .modal-right .btn,
    #modal-edit .modal-right .btn,
    #modal-loading .modal-right .btn {
      margin-right: 10px; }
  #modal-faq span.close,
  #modal-cart span.close,
  #modal-edit span.close,
  #modal-loading span.close {
    margin-left: 10px;
    cursor: pointer; }

#modal-faq .modal-main {
  align-items: start !important; }

#modal-faq .modal-content {
  width: 97%;
  padding: 3px;
  padding-top: 55px; }
  #modal-faq .modal-content .modal-main {
    padding: 10px;
    padding-right: 13px; }

#modal-cart .modal-content {
  position: absolute;
  left: 50%;
  bottom: 1.5%;
  transform: translateX(-50%);
  width: 97%;
  height: 250px;
  margin-bottom: 0; }

#modal-loading {
  background-color: rgba(255, 255, 255, 0.75); }
  #modal-loading .spinner {
    top: 50%;
    position: absolute;
    left: 50%;
    margin-left: -16px;
    margin-top: -16px; }

/* Media Queries
========================================================================== */
@media (min-width: 1064px) {
  #modal-faq .modal-content,
  #modal-cart .modal-content,
  #modal-edit .modal-content {
    max-width: 1024px;
    margin-bottom: 20px; } }

@media (min-width: 1440px) {
  #modal-faq .modal-content,
  #modal-cart .modal-content,
  #modal-edit .modal-content {
    max-width: 1400px; } }

/* ==========================================================================
	Tiles
========================================================================== */
.tiles-slider {
  display: flex;
  height: 100%;
  align-items: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  align-self: center;
  padding: 25px; }

/* Media Queries
========================================================================== */
@media (min-width: 1064px) {
  .tiles-slider {
    flex-wrap: wrap;
    align-content: flex-start;
    overflow: hidden;
    width: 85%;
    height: unset;
    margin: auto; } }

@media (min-width: 1440px) {
  .tiles-slider {
    flex-wrap: wrap;
    align-content: flex-start;
    overflow: hidden;
    width: 81%;
    height: unset;
    margin: auto; } }

/* Tiles
========================================================================== */
.tile,
.tile-hidden {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 256px;
  height: 256px;
  flex-shrink: 0;
  margin: 5px;
  cursor: pointer; }
  .tile .tile-background,
  .tile-hidden .tile-background {
    position: absolute;
    width: calc(256px - 27px);
    height: calc(256px - 27px);
    box-shadow: 4px 18px 15px 0 rgba(0, 0, 0, 0.3), 1px 15px 20px 2px rgba(0, 0, 0, 0.3);
    background-color: white;
    z-index: 1; }
  .tile .tile-preview,
  .tile-hidden .tile-preview {
    width: calc(256px - 27px);
    height: calc(256px - 27px);
    z-index: 2; }
    .tile .tile-preview img,
    .tile-hidden .tile-preview img {
      text-indent: -9999px;
      z-index: 1;
      opacity: 0;
      transition: opacity 1s ease-out; }
      .tile .tile-preview img.show,
      .tile-hidden .tile-preview img.show {
        opacity: 1; }
    .tile .tile-preview.border,
    .tile-hidden .tile-preview.border {
      width: calc(calc(256px - 27px) - 40px);
      height: calc(calc(256px - 27px) - 40px); }
  .tile .tile-frame,
  .tile .tile-frame .frame,
  .tile-hidden .tile-frame,
  .tile-hidden .tile-frame .frame {
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%; }
  .tile .frame,
  .tile-hidden .frame {
    z-index: 2; }
  .tile .frame.hidden,
  .tile-hidden .frame.hidden {
    visibility: hidden; }

.tile {
  opacity: 0;
  transform: scale(0.33);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out; }
  .tile.show {
    opacity: 1;
    transform: scale(1); }

.tile-hidden {
  width: 280px;
  height: 280px; }
  .tile-hidden .tile-background,
  .tile-hidden .tile-preview {
    width: 280px;
    height: 280px; }
  .tile-hidden .tile-preview.border {
    width: 280px !important;
    height: 280px !important;
    padding: 0 !important; }