/*modal////////*/
.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 1001;

  backdrop-filter:blur(2px);

  background: rgb(0,0,0);
background: -moz-linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5038747921043417) 47%, rgba(0,0,0,0.5458915988270308) 100%);
background: -webkit-linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5038747921043417) 47%, rgba(0,0,0,0.5458915988270308) 100%);
background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5038747921043417) 47%, rgba(0,0,0,0.5458915988270308) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);

}

.modal__container, .modal__header, .modal__footer {
  max-width: 1300px;
  width:96%;
}

/*HEADER*/
.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.modal__title-container{
  /*border: 1px #bbb195 solid;*/
  width:66%;
  padding:1vw 3vw 0 3vw;
  margin-left:1.5vw;
  /*background: #bbb195;*/
  border-top:2px solid #fff;
  border-left:2px solid #fff;
}
.modal__title-container h2{
  color:#fff;
  padding: 0;
  /*display: inline-block;
  margin:0.5vw 1vw 0.5vw 0;
  background: #fff;
  padding:0.3vw 0.5vw;*/
}
.modal__close{
  /*position:fixed;
  right:50%;
  top: 105px;*/
  background:#bbb195;
  height:2.1vw;
  width:2vw;
  z-index:1003;
  cursor: pointer;
  /*-webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  border:1px solid #333333;
  transform: translateX(480px);*/
  /*order:2;*/
  position: relative;
}

.modal__close .modal__close-cross1{
  position:absolute;
  top:1vw;
  width:2vw;
  height:0.2vw;
  background:#333333;
  transform: rotate(45deg);
}
.modal__close .modal__close-cross2{
  position:absolute;
  top:1vw;
  width:2vw;
  height:0.2vw;
  background:#333333;
  transform: rotate(-45deg);
}
@media (max-width:991px) {
  .modal__close{
    height:2.1em;
    width:2em;
  }
  .modal__close .modal__close-cross1,.modal__close .modal__close-cross2{
    top:1em;
    width:2em;
    height:0.2em;
  }
}
/*.modal__close .modal__close-cross1{
  position:absolute;
  width:16px;
  height:2px;
  top:33px;
  right:26px;
  background:#333333;
  transform: rotate(45deg);
}
.modal__close .modal__close-cross2{
  position:absolute;
  width:2px;
  height:16px;
  top:26px;
  right:33px;
  background:#333333;
  transform: rotate(45deg);
}*/

/*CONTENT*/
.modal__container-bg{
  background:#fff url('../img/noise.jpg');
  padding: 2vw;
  margin:1vw 3vw; /*1vw gap 3vw=gap+close*/
  border:0.3vw solid #bbb195;
  border-left:0;
  border-right:0;
  max-height: 70vh;
  overflow-y: auto;
  box-sizing: border-box;
}
@media (max-width:991px) {
  .modal__container-bg{
    padding:1em;
    margin:1em 2em;
  }
}

/*FOOTER*/
.modal__footer-container{position:relative;}
.modal__footer-container:after{
  content:"";
  position:absolute;
  bottom:1vw;
  right:1vw;
  width:3vw;
  height:3vw;
  border:2px solid #fff;
  border-top:0;
  border-left:0;
}
@media (max-width:991px) {
  .modal__footer-container:after{
    bottom:2em;
    right:1em;
    width:3em;
    height:2em;
  }
}

.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

.modal__btn {
  position: relative;
  display: inline-block;
}
.modal__btn:hover,
.modal__btn:active {
  outline: 0;
}
.modal__btn:hover {
  background-color: transparent;
  cursor: pointer;
}
.modal__btn .modal__btn-bg {
  background-color: #BBB195;
  display: inline-block;
  height: calc(100% + 3px);
  position: absolute;
  right: -0.3em;
  top: -0.4em;
  transition: background-color 300ms ease-in;
  width: 100%;
  z-index: 1;
}
.modal__btn:hover .modal__btn-bg {
  background-color: #FBB13C;
}
.modal__btn .modal__btn-txt {
  display: block;
  z-index:2;
  background-color: transparent;
  border: 1px solid #FFFFFF;
  box-sizing: border-box;
  color: #00132C;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.4em;
  padding: 0.7em 1.4em;
  position: relative;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  /*margin-top:0.4em;*/
  display: inline-block;
}
/*@media (min-width: 768px) {
  .modal__btn {
    padding: 16px 32px;
  }
}*/

/***********ANIMATION*****/
/*poloska 0.5s*/
.micromodal-slide[aria-hidden="false"] .modal__container{
  animation: mmani_width96 1.2s cubic-bezier(0.0, 0.0, 0.2, 1) 0s 1 both;
}
/*title & corner 1.7s */
.micromodal-slide[aria-hidden="false"] .modal__title-container{
  animation: mmani_showTitle 0.5s linear 0.2s 1 both;
}
.micromodal-slide[aria-hidden="false"] .modal__title{
  animation: mmani_fadeIn_h2 0.5s ease-out 0.8s 1 both;
}
.micromodal-slide[aria-hidden="false"] .modal__footer-container:after{
  animation: mmani_growCorner 0.4s ease-out 0.6s 1 both;
}
/*close btn 2.5s**/
.micromodal-slide[aria-hidden="false"] .modal__btn-txt{
  animation: mmani_showBtn 0.3s linear 1.7s 1 both;
}
.micromodal-slide[aria-hidden="false"] .modal__btn-bg{
  animation: mmani_showBtnBg 0.5s linear 2s 1 both;
}
.micromodal-slide[aria-hidden="false"] .modal__close{
  animation: mmani_fadeIn 0.3s linear 1.4s 1 both;
}

.micromodal-slide[aria-hidden="false"] .modal__container-bg{
  animation: mmani_height 1s ease-in-out 1.5s 1 both;
}
.micromodal-slide[aria-hidden="false"] .modal__content-wrap{
  animation: mmani_fadeIn 0.5s ease-in-out 1.8s 1 both;
}

@keyframes mmani_height{
  0% {max-height:0;padding:0;}
  100% {max-height:70vh;padding:2vw;}
}
@keyframes mmani_width96{
  0% {width:0;}
  100% {width:96%;}
}
@keyframes mmani_showTitle{
  0% {width:1px; height:1px;padding-left:0;padding-right:0;}
  20% {width:1px; height:100%;padding-left:0;padding-right:0;}
  100% {width:66%;padding-left:interhit;padding-right:interhit;}
}
@keyframes mmani_fadeIn_h2{
  0%{ opacity: 0; font-size:0;}
  50%{ opacity: 0; font-size: interhit;}
  100%{ opacity: 1;}
}
@keyframes mmani_fadeIn{
  0%{ opacity: 0;}
  100%{ opacity: 1;}
}
@keyframes mmani_growCorner{
  0% {width:0;height:0;opacity:0;}
  1% {width:0;height:0;opacity:1;}
  50% {width:interhit;height:0;}
  100% {width:interhit;height:interhit;}
}
@keyframes mmani_showBtn{
  0% {border-width:0;opacity:0;}
  1% {border-left-width:1px;}

  20% {border-top-width:0px;}
  21% {border-top-width:1px;}

  40% {border-right-width:0px;opacity:1;}
  41% {border-right-width:1px;}

  60% {border-bottom-width:0px;}
  61% {border-bottom-width:1px;}

}
@keyframes mmani_showBtnBg{
  0%{opacity:0;top:0;right:0;}
  100%{opacity:1;top:interhit;right:interhit;}
}

/**************************\
  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[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;
}