/* Modal base styles */
.modal-is-active {
  overflow: hidden;
}
.modal {
  visibility: hidden;
}
.modal--active {
  visibility: visible;
}
.modal__window {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  background: #fff;
  height: auto;
  left: 50%;
  max-height: 100%;
  max-width:1130px;
  min-height: 300px;
  opacity: 0;
  overflow-y: auto;
  position: fixed;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  width: 90%;
  z-index: 1001;
}
.modal--active .modal__window {
  opacity: 1;
}
.modal__header {
  background: #000;
  color: #fff;
  padding: 2rem;
}
.modal__title {
  font-size: 2rem;
}
.modal__close-btn {
  background: transparent;
  cursor: pointer;
  height: 50px;
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  border:none;
  z-index:9999;
}
.modal__close-icon {
  fill: #fff;
  height: 20px;
  width: 20px;
}

.modal__content {
  padding: 2rem;
}
.modal__overlay {
  background: #000;
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  width: 100%;
  visibility: hidden;
  z-index: 1000;
}
.modal--active .modal__overlay {
  opacity: .75;
  visibility: visible;
}

/* Modal transitions */
.modal--scale-up .modal__window {
  -webkit-transform: translateX(-50%) translateY(-50%) scale(.75);
  -moz-transform: translateX(-50%) translateY(-50%) scale(.75);
  -ms-transform: translateX(-50%) translateY(-50%) scale(.75);
  -o-transform: translateX(-50%) translateY(-50%) scale(.75);
  transform: translateX(-50%) translateY(-50%) scale(.75);
}
.modal--scale-up.modal--active .modal__window {
  -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
  -moz-transform: translateX(-50%) translateY(-50%) scale(1);
  -ms-transform: translateX(-50%) translateY(-50%) scale(1);
  -o-transform: translateX(-50%) translateY(-50%) scale(1);
  transform: translateX(-50%) translateY(-50%) scale(1);
}

.modal--scale-up.sticky .modal__window {
  -webkit-transform: translateX(-50%) translateY(-0%) scale(.75);
  -moz-transform: translateX(-50%) translateY(-0%) scale(.75);
  -ms-transform: translateX(-50%) translateY(-0%) scale(.75);
  -o-transform: translateX(-50%) translateY(-0%) scale(.75);
  transform: translateX(-50%) translateY(-0%) scale(.75);
  top:10%;
  max-width:500px !important;  min-height:170px !important
}


.modal--scale-up.sticky.modal--active .modal__window {
  -webkit-transform: translateX(-50%) translateY(-0%) scale(1);
  -moz-transform: translateX(-50%) translateY(-0%) scale(1);
  -ms-transform: translateX(-50%) translateY(-0%) scale(1);
  -o-transform: translateX(-50%) translateY(-0%) scale(1);
  transform: translateX(-50%) translateY(-0%) scale(1);
  max-width:500px !important; min-height:170px !important;
}
.modal__window .img-block{ float:left; width:20%; padding:0; margin:0; border:1px solid #dddddd; text-align:center;}
.modal__window .img-block img{ max-width:100%; height:auto;}
.modal__window .text-block{ padding:0; margin:0;}
.modal__window .text-block .button-block{ padding:0; margin-top:20px;}
.modal__window .text-block p{ font-size:20px; line-height:32px; padding:0 0 0 30px;}
.modal__window .text-block a{  padding:10px; font-size:16px; line-height:18px; display:inline-block; float:left; margin-right:15px; border-radius:2px; text-transform:uppercase;}
.modal__window .text-block a.continue{}


.modal--scale-up.shiping .modal__window {
  -webkit-transform: translateX(-50%) translateY(-0%) scale(.75);
  -moz-transform: translateX(-50%) translateY(-0%) scale(.75);
  -ms-transform: translateX(-50%) translateY(-0%) scale(.75);
  -o-transform: translateX(-50%) translateY(-0%) scale(.75);
  transform: translateX(-50%) translateY(-0%) scale(.75);
  max-width:500px !important; top:10%;
}


.modal--scale-up.shiping.modal--active .modal__window {
  -webkit-transform: translateX(-50%) translateY(-0%) scale(1);
  -moz-transform: translateX(-50%) translateY(-0%) scale(1);
  -ms-transform: translateX(-50%) translateY(-0%) scale(1);
  -o-transform: translateX(-50%) translateY(-0%) scale(1);
  transform: translateX(-50%) translateY(-0%) scale(1);
  max-width:500px !important; top:10%;
}