@charset "UTF-8";

/**
 *
 * @authors Ted Shiu (tedshd@gmail.com)
 * @date    2015-07-23 17:26:13
 */


html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.pop_up {
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .8);
  -ms-transform: scale(1) rotate(0) translate(0, 0) skew(0, 0);
  transform: scale(1) rotate(0) translate(0, 0) skew(0, 0);
  transition-property: transform, opacity;
  transition-duration: .3s;
  color:#fff;
  text-align:center;
  z-index:2;
}

.popup_hide {
  opacity: 0;
  -ms-transform: scale(0.5) rotate(0) translate(0, -200%) skew(0, 0);
  transform: scale(0.5) rotate(0) translate(0, -200%) skew(0, 0);/*if you want to change popup view init show way*/
}

.pop_up_close {
    position: fixed;
    top: 0;
    right: 0;
    margin: 20px 20px 0 0;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.pop_up_close:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: #fff;
  -ms-transform: rotate(45deg) translate(10px, 10px);
  transform: rotate(45deg) translate(10px, 10px);
}

.pop_up_close:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: #fff;
  -ms-transform: rotate(-45deg) translate(-10px, 10px);
  transform: rotate(-45deg) translate(-10px, 10px);
}