/*-------------------------------------------------------------------------
 * 
 * SelfModal
 * 
 * Style default 
 * for edit content in self-content, create and add other style for this.
 *
 * link href=pathtofile/selfPopUp.css
 * link href=pathtofile/anotherfilepersonal.css
 ------------------------------------------------------------------------*/
.selfModal {
  position: fixed;

  width: 95%;
  height: 130px;
  z-index: 15;
background:#000;
  overflow: hidden;

  top: 50%;
  left: 50%;

  -webkit-transform: translateY(-50%) translateX(-45%);
     -moz-transform: translateY(-50%) translateX(-45%);
      -ms-transform: translateY(-50%) translateX(-45%);
       -o-transform: translateY(-50%) translateX(-45%);
          transform: translateY(-50%) translateX(-45%);

  -webkit-transition: all .3s ease;
     -moz-transition: all .3s ease;
      -ms-transition: all .3s ease;
       -o-transition: all .3s ease;
          transition: all .3s ease;

  opacity: 0;
  visibility: hidden;
}

.selfOverlay {
  background: rgba(0,0,0,.4);
  position: fixed;
  display: block;
  height: 100%;
  width: 100%;
  z-index: 9;
  left: 0;
  top: 0;

  opacity: 0;
  visibility: hidden; 
}

.selfModal.show {
  opacity: 1;
  visibility: visible;
  z-index: 15;

  -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%);
}

.selfModal.toClose {

  opacity: .05;
  visibility: visible;

  -webkit-transform: translateX(-55%) translateY(-50%);
     -moz-transform: translateX(-55%) translateY(-50%);
      -ms-transform: translateX(-55%) translateY(-50%);
       -o-transform: translateX(-55%) translateY(-50%);
          transform: translateX(-55%) translateY(-50%);

}

.selfModal.show ~ .selfOverlay {
  opacity: 1;
  visibility: visible;
  
}

.selfClose {
  color:#FFF;
  font-family:Arial, Helvetica, sans-serif;
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: 5px;
  font-size:25px;
  
}

.selfContent {
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;

  border-bottom: 6px solid transparent;
  background: #f9f9f9;
  width:100%;
  height:100%
}

.selftitle {
  font-family:Arial, Helvetica, sans-serif;
  font-size:15px;
  text-transform: uppercase;
  padding: 10px 10px;
  color: #fff;

  -webkit-border-radius: 2px 2px 0 0;
     -moz-border-radius: 2px 2px 0 0;
          border-radius: 2px 2px 0 0;
		  margin-bottom:20px;
		  text-align:left
}