<STYLE>
            
/* Базовые стили слоя затемнения и модального окна  */
.overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
visibility: hidden;
/* фон затемнения */
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
position: fixed; /* фиксированное поцизионирование */
cursor: default; /* тип курсара */
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}

.overlay:target {
visibility: visible;
opacity: 1;
}

.is-image {
top: 0;
right: 0;
bottom: 0;
left: 0;
display:block;
margin: 10&;
width: 100%;
height: auto;
/* скругление углов встроенных картинок */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
}

/* встроенные элементы м-медиа, фреймы */
embed, iframe {
top: 0;
right: 0;
bottom: 0; 
left: 0; 
display:block;
margin: auto;
min-width: 320px;
max-width: 600px;
width: 100%;
}

.popup h1 { /* заголовок 1 */
color: #008000;
text-align: left;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
font:24px 'Trebuchet MS', Helvetica, sans-serif;
font-weight: bold;
}

.popup h2 { /* заголовок 2 */
color: #008000;
text-align: left;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
font:22px 'Trebuchet MS', Helvetica, sans-serif;
}

/*** Формируем стили модального окна ***/

.popup {

width: 70vw!important;
 height: auto; 
 max-height: 70vh!important;

overflow-y: auto;

top: 0;
right: 0;
left: 0;
font-size: 14px;
z-index: 10;
display: block;
visibility: hidden;
margin: 0 auto;

/*width: 90%;
min-width: 320px;
max-width: 600px;
max-height: 600px;*/

/* фиксированное позиционирование, окно стабильно при прокрутке */
position: fixed;
padding: 30px;
border: 1px solid #383838;
/* скругление углов */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
background-color: #FFFFFF;
/* внешняя тень блока */
-webkit-box-shadow: 0 0 22px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 22px rgba(0, 0, 0, 0.8);
-ms-box-shadow: 0 0 22px rgba(0, 0, 0, 0.8);
-o-box-shadow: 0 0 22px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 22px rgba(0, 0, 0, 0.8);
/* полная прозрачность окна, появление при клике */
opacity: 0;
/* эффект перехода (появление) */
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
}

/* активируем появление окна и затемнение фона */

.overlay:target+.popup {
top: 10%; /* положение окна от верха страницы при появлении */
visibility: visible;
opacity: 1; /* убираем прозрачность */
}

/* формируем кнопку закрытия */

.close {
position: absolute;
top: 5px;
right: 5px; padding-top: 8px;
width: 40px;
height: 40px;
border: 2px solid #ccc;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
background-color: rgba(61, 61, 61, 0.8);
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
text-align: center;
valign: middle;
text-decoration: none;
font-weight: bold;
line-height: 20px;
/* задаём значения и эффект перехода при наведении */
-webkit-transition: all ease .8s;
-moz-transition: all ease .8s;
-ms-transition: all ease .8s;
-o-transition: all ease .8s;
transition: all ease .8s;
}

.close:before {
color: rgba(255, 255, 255, 0.9);
content: "X";
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
font-size: 24px;
}

.close:hover {
background-color: rgba(252, 20, 0, 0.8);
/* крутим кнопку при наведении */
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);    
}

/* опционально при добавлении вложений */
.popup p, .popup div {
margin-bottom: 10px;
}


/* button */

.button {

  font-size: 20px;
  color: white;
  width: 270px;
  text-decoration: none;
  padding: 10px 5px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  font-family: Helvetica, Arial, sans-serif;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  cursor: pointer;

}
.111button-blue {
  background-color: #0600FF;
  }
.111button:hover {
  background-color: #5555ff;
  box-shadow:0 0 10px 10px #b7b7ff inset;
}
.111button:active {
    background-color: #0000ff;
    box-shadow:0 0 0 0 #ffffff; 
}
            
</STYLE>