#overlay {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    z-index: 999;
    -webkit-animation: fade .6s;
    -moz-animation: fade .6s;
    animation: fade .6s;
    overflow: auto;
  }
  .popup {
    top: 25%;
    left: 0;
    right: 0;       
    font-size: 14px;
    margin: auto;
    width: 85%;
    min-width: 320px;
    max-width: 600px;
    position: absolute;
    padding: 15px 20px;
    border: 1px solid #000000;
    background: #fefefe;
    z-index: 1000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    font: 14px/18px 'Tahoma', Arial, sans-serif;
    -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -webkit-animation: fade .6s;
    -moz-animation: fade .6s;
    animation: fade .6s;
  }.close {  
    top: 10px;
      right: 10px;
      width: 32px;
      height: 32px;
      position: absolute;
      border: none;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;
      border-radius: 50%;
      background-color: rgba(0, 183, 255, 0.9);
      -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.836);
      -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.555), 0 2px 10px 0 rgba(0, 0, 0, 0.514);
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
      cursor: pointer;
      outline: none;
   
  }
  .close:before {
      color: rgba(252, 173, 3, 0.9);
      content: "X";
      font-family:  Arial, Helvetica, sans-serif;
      font-size: 15pt;
      font-weight: normal;
      text-decoration: none;
      text-shadow: 0 -1px rgb(0, 0, 0);
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      transition: all 0.5s;
  }
  /* кнопка закрытия при наведении */
  .close:hover {
      background-color: rgb(252, 0, 0);
  }
  .figcaption {
    max-width: 500px; /* максимальная ширина */ 
    margin: 0 auto;
    border-style: solid; 
    border-color: rgb(88,125,164);
    background: #fff;
  }
  .figcaption {
    padding: 1%;
    cursor: default;
  }
  .figcaption {
    position: relative;
    border-width: 0 4px 0 4px;
    font-size: 150%;
    text-transform: uppercase;
    color: rgb(100,100,100);
  }
  .figcaption { /* стиль восклицательного знака, не поддерживается Google Chrome. Его можно заменить на что-то более приемлемое */ 
    content: "\26a0 \20 \20";
    color: red;
    font-size: 150%;
    vertical-align: middle;
  }