/* 

* Модальные окна

* на чистом CSS, без javascript

* и дополнительных изображений

*

* Копирайт (c) 2014 shurawi http://www.dbmast.ru

*/



/*** Стили относящиеся к модальному окну и содержанию ***/

.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;

}

/* Базовые стили слоя затемнения и модального окна  */

.overlay {

top: 0;

right: 0;

bottom: 0;

left: 0;

z-index: 9;

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: auto;

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 {

top: 0;

right: 0;

left: 0;

font-size: 14px;

z-index: 10;

display: block;

visibility: hidden;

margin: 0 auto;

width: 90%;

    min-width: 290px;
    max-width: 380px;

/* фиксированное позиционирование, окно стабильно при прокрутке */

position: fixed;

padding: 15px;

border: 1px solid #383838;
    box-sizing: border-box;
/* скругление углов */

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

-ms-border-radius: 4px;

border-radius: 4px;

background-color: #FFFFFF;

/* внешняя тень */

-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);

-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);

-ms-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);

-o-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);

box-shadow: 0px 0px 6px 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: 17%;

visibility: visible;

opacity: 1;

}

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

.close {

position: absolute;

top: -10px;

right: -10px;padding: 0;

width: 20px;

height: 20px;

border: 2px solid #ccc;

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

-ms-border-radius: 15px;

-o-border-radius: 15px;

border-radius: 15px;

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;

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: 12px;

}

.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;

}