* {
  box-sizing: border-box;
  }

  /* Всплывающее окно 
  * при загрузке сайта            
  */
  /* базовый контейнер, фон затемнения*/
  #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 #383838;
      background: #fefefe;
      z-index: 1000;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      -ms-border-radius: 4px;
      border-radius: 4px;
      font: 18px/22px 'Manrope', 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;
  }
  /* заголовки в модальном блоке */
  .popup h2, .popup h3 {
      margin: 0 0 1rem 0;
      font-weight: 300;
      line-height: 1.3;
      color: #696ce5;
      text-shadow: 1px 2px 4px #ddd;
  }
  /* кнопка закрытия */
  .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(105, 108, 229, 0.9);
      -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
      -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
      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(255, 255, 255, 0.9);
      content: "X";
      font-family:  Arial, Helvetica, sans-serif;
      font-size: 14px;
      font-weight: normal;
      text-decoration: none;
      text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      transition: all 0.5s;
  }
  /* кнопка закрытия при наведении */
  .close:hover {
      background-color: rgba(128, 128, 128, 0.8);
  }
  /* изображения в модальном окне */
  .popup img {
      width: 100%;
      height: auto;
      
  }


  
  /* миниатюры изображений */
  .pl-left {
      width: 50%;
      width: 100px;
      height: 89px;
  }
  /* миниатюры слева */
  .pl-left {
      float: center;
      
      margin: 5px 18px 5px 0;
  }
  /* анимация при появлении блоков с содержанием */
  @-moz-keyframes fade {
      from { opacity: 0; }
      to { opacity: 1 }
  }
  @-webkit-keyframes fade {
      from { opacity: 0; }
      to { opacity: 1 } 
  }
  @keyframes fade {
      from { opacity: 0; }
      to { opacity: 1 }
  }