.popup {
  background-color: rgba(0, 0, 0, .54);
  -webkit-transition: opacity .4s cubic-bezier(.23, 1, .32, 1) 0s;
  transition: opacity .4s cubic-bezier(.23, 1, .32, 1) 0s;
  -o-transition: opacity .4s cubic-bezier(.23, 1, .32, 1) 0s;
  -moz-transition: opacity .4s cubic-bezier(.23, 1, .32, 1) 0s;
  will-change: opacity, transform
}

.popup__container {
  width: 55%;
  text-align: left;
  font-size: 12px;
  background-color: #fff;
  padding: 35px;
  margin: 30px auto;
  box-shadow: rgba(0, 0, 0, .25) 0 14px 45px, rgba(0, 0, 0, .22) 0 10px 18px;
  -webkit-box-shadow: rgba(0, 0, 0, .25) 0 14px 45px, rgba(0, 0, 0, .22) 0 10px 18px;
  -moz-box-shadow: rgba(0, 0, 0, .25) 0 14px 45px, rgba(0, 0, 0, .22) 0 10px 18px;
  border-radius: 3px;
  transition: opacity .2s ease, visibility 0s .1s, transform 450ms cubic-bezier(.23, 1, .32, 1) 0s, -webkit-transform 450ms cubic-bezier(.23, 1, .32, 1) 0s;
  -webkit-transform: scale(.8);
  -moz-transform: scale(.8);
  transform: scale(.8);
  -webkit-transition: opacity .2s ease, visibility 0s .1s, -webkit-transform 450ms cubic-bezier(.23, 1, .32, 1) 0s;
  transition: opacity .2s ease, visibility 0s .1s, -webkit-transform 450ms cubic-bezier(.23, 1, .32, 1) 0s;
  transition: opacity .2s ease, visibility 0s .1s, transform 450ms cubic-bezier(.23, 1, .32, 1) 0s;
  will-change: transform, opacity
}

.popup__close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  padding-top: 8px
}

.popup__close span {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #2f2c2c
}

.popup__close span:first-of-type {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg)
}

.popup__close span:last-of-type {
  -webkit-transform: rotate(-45deg) translateY(-1px);
  -moz-transform: rotate(-45deg) translateY(-1px);
  -ms-transform: rotate(-45deg) translateY(-1px);
  -o-transform: rotate(-45deg) translateY(-1px);
  transform: rotate(-45deg) translateY(-1px)
}

@media screen and (max-width: 991px) {
  .popup__container {
  	width: 70%;
  }
}

@media screen and (max-width:767px) {
  .popup__container {
    width: 80%;
    margin: 10px auto;
    padding: 20px 18px
  }

  .popup__close {
    top: 10px;
    right: 10px
  }
}

.popup.opened .popup__container {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1)
}