/**************************\
  Basic Modal Styles
\**************************/

.modal__overlay {position: fixed;top: 0; left: 0; right: 0; bottom: 0;display: flex; justify-content: center; z-index: 999; background: rgba(0,0,0,0.6);}
.modal__container {padding: 24px 20px; width:100%;max-width: 96%; max-height: 100vh; border-radius: 4px; overflow-y: auto; box-sizing: border-box;color: #1c1c1e;background-color: #F8F5EE; }
.modal__header {display: flex; justify-content: space-between; align-items: center;}
.modal__close {background: transparent;  border: 0;position: absolute; top: 8px; right: 8px;width: 30px; height: 30px; background: transparent; border: none; cursor: pointer; z-index: 10;}
.modal__close::before,
.modal__close::after {content: ''; position: absolute; top: 50%;left: 50%; width: 23px; height: 3px; background-color: #BD7735; transform-origin: center;border-radius: 3px;}
.modal__close::before {transform: translate(-50%, -50%) rotate(45deg);}
.modal__close::after {transform: translate(-50%, -50%) rotate(-45deg);}
.modal__close:hover::before,
.modal__close:hover::after {background-color: #1C1C1E;}
.modal__title {margin-bottom: 0; text-transform: uppercase;font-size: 24px;}
.modal__content {padding-top:24px;}
.modal__images {display: flex; gap:10px;flex-wrap:wrap;margin-top:24px}
.modal__images > * {width:100%}
@media (min-width: 476px) {  
  .modal__title {font-size:28px}
  .modal__images {gap:10px;}
  .modal__images > * {width:calc(50% - 5px)}
}
@media (min-width: 576px) {
  .modal__close {top:12px;right: 12px;}
  .modal__container {max-width: 540px;font-size: 18px;padding: 32px;}
}
@media (min-width:768px) {
  .modal__container {max-width: 720px;padding: 40px;}
  .modal__content {font-size: 24px;}
  .modal__title {font-size:32px}
}
@media (min-width:992px) {
  .modal__container {max-width: 960px;padding: 40px;}
  .modal__close {width: 40px;height: 40px;top:16px;right:16px;}
  .modal__close::after, .modal__close::before {width: 30px;}
  .modal__title {font-size:44px}
  .modal__images {gap:20px;margin-top:40px}
  .modal__images > * {width:calc(33.333333% - 14px)}  
}
@media (min-width:1200px) {
  .modal__container {max-width: 1160px;}  
  .modal__close {width: 44px;height: 44px;top:20px;right:20px;}
  .modal__close::after, .modal__close::before {width:38px;height: 4px;}
  .modal__title {font-size:56px}
}
@media (min-width:1320px) {
  .modal__container {max-width: 1282px;padding: 60px;}
  .modal__content {font-size: 32px;}
  .modal__title {font-size:60px}
  
}


/**************************\
  Demo Animation Style
\**************************/
@keyframes mmfadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@keyframes mmfadeOut {
    from { opacity: 1; }
      to { opacity: 0; }
}

@keyframes mmslideIn {
  from { transform: translateY(15%); }
    to { transform: translateY(0); }
}

@keyframes mmslideOut {
    from { transform: translateY(0); }
    to { transform: translateY(-10%); }
}

.micromodal-slide {display: none;}
.micromodal-slide.is-open {display: block;}
.micromodal-slide[aria-hidden="false"] .modal__overlay {animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);}
.micromodal-slide[aria-hidden="false"] .modal__container {animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);}
.micromodal-slide[aria-hidden="true"] .modal__overlay {animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);}
.micromodal-slide[aria-hidden="true"] .modal__container {animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);}
.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {will-change: transform;}