.overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
visibility: hidden;
/* фон затемнения */
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
position: fixed; /* фиксированное поцизионирование */
cursor: default; /* тип курсара */
}
.overlay:target {
visibility: visible;
opacity: 1;
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
-ms-transition: all 0.6s;
-o-transition: all 0.6s;
transition: all 0.6s;
}

/* стили модального окна */
.pic-centr{
    height: 100%;
    display: contents;
}
.popup {
/*display: grid;    */
display: block;
top: 0;
right: 0;
left: 32%;
font-size: 14px;
font-family: 'Tahoma', Arial, sans-serif;
z-index: 10000;
margin: 0 auto;
height: 80%;
min-width: 320px;
width: 90%;
/* фиксированное позиционирование, окно стабильно при прокрутке */
position: fixed;
padding: 15px;
border: 1px solid #383838;
/* скругление углов */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 20px 0 20px 0;
background-color: #FFFFFF;
/* внешняя тень */
/*
-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);
-o-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-transform: translate(-50%, -150%);
-ms-transform: translate(-50%, -150%);
-o-transform: translate(-50%, -150%);
transform: translate(-50%, -150%);
*/
}

/* активируем мод. окно */
.overlay:target+.popup {
top: 30%;
margin: 0;
-webkit-transform: translate(-30%,-30%);
-ms-transform: translate(-30%, -30%);
-o-transform: translate(-30%, -30%);
transform: translate(-30%, -30%);
/* анимируем трансформацию */
-webkit-transition: transform 0.6s ease-out;
-moz-transition: transform 0.6s ease-out;
-ms-transition: transform 0.6s ease-out;
-o-transition: transform 0.6s ease-out;
transition: transform 0.6s ease-out;
}
/* формируем кнопку закрытия */
.close {
position: absolute;
padding: 0;
top: -13px;
right: -13px;
width: 22px;
height: 22px;
border: 2px solid #ccc;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
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: 9px;
-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: '\2715';
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
font-size: 16px;
}
.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 input, .popup textarea{
  border-radius: 3px;
}

#callme_button, #login_button{
  position: relative;
  margin: 0 auto;
  padding: 10px 20px;
  font-size: 1.5em;
  cursor: pointer;
  display: block;
}
.inner_popup{
    /*
  background-image: linear-gradient(to top, rgba(249, 249, 249, 0.93), rgb(251, 245, 245), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.69), rgb(187, 187, 187), rgba(232, 230, 230, 0.84), rgba(255, 255, 255, 0.88),rgb(255, 255, 255));
    */
  height: 100%;
  border-radius: 20px 0 20px 0;
}
.popup p {
margin: 0;
padding: 10px;
text-align: justify;
font-size: 1.2em;
padding-left: 0px;
overflow-x: hidden;
}
.pic-centr > img{
width: auto !important;
height: auto !important;
margin: auto;   
}
/* планшет */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.popup {
		width: 95%;
	}
}
/* смарт */
@media only screen and (min-width: 320px) and (max-width: 767px) {
	.popup {
		width:85%;
	}
}
/* изображения внутри окна */
.popup img {
display: block;
border: none;
width: 100%;
height: auto;
max-width: 100%;
max-height: 100%;
}
/* миниатюры слева/справа */
.pic-left, 
.pic-right {
    width: 25%;
    height: auto;
}
.pic-left {
    float: left;
    margin: 5px 15px 5px 0;
}
.pic-right {
    float: right;
    margin: 5px 0 5px 15px;
}
/* встроенные элементы м-медиа, фреймы */
/* адаптивный блок видео */
.video { 
position: relative; 
padding-bottom: 56.25%; 
height: 0; 
overflow:hidden; 
} 
.video iframe, 
.video object, 
.video embed {
position: absolute; 
top: 0; 
left: 0; 
width: 100%;
height: 100%; 
}
div.popup[name="callme"]{
  height: auto; 
  width: auto;
}
div.popup[name="callme"] > .inner_popup{
  padding-bottom: 40px;
}

div.popup[name="pass_change"]{
  height: auto;  
}
div.popup[name="review"] {
  height: auto; 
  width: auto;
}
div.popup[name="pass_change"] .inner_popup{
  background: #76c9e6;
  padding: 10px 50px;
}
#pass_change_button{
   padding: 10px;
   margin: 15px 0 30px 0;
   min-width: 300px;
}
.popup[name="pass_change"] h2{
   margin: 10px 0 15px 0;  
}

div.popup[name="login"]{
 height: auto;
 min-width: 350px;
 max-width: 700px;
 width: 30%;   
}
div.popup[name="login"] h2{
  text-indent: 20px;  
}
div.popup[name="login"] > .inner_popup{
 background: #f2e5e3; /* Старые браузеры */
 background: radial-gradient(at 50% 0%, #dfdfdf, #f2e5e3);
 padding-bottom: 40px;
}

div.popup[name="basket"] .left-side{
position: static;
bottom: 10px;
left: 30px;
color: red;
font-size: 1.2em;
cursor: pointer;   
}

div.popup[name="basket"] .left-side a, div.popup[name="basket"] .left-side input{
    display: none;
}

div.popup[name="basket"] .left-side a,div.popup[name="basket"] .left-side label{
    cursor: pointer;
}
div.popup s.right_side{
   color: red;
   font-size: 1.5em;
   position: relative;
   right: 30px;
    float: inline-end;
    bottom: 20px;
}
div.popup[name="basket"] a.close{
    display: none;
}

div.star{
    margin: 20px 0 50px 0;
}
img.star_item{
    width: 50%;
    margin: 0 auto;
}
div.star_item{
    cursor:pointer;
}

/******************************************************************************/
@media (min-width: 1020px) {

 .popup {
    left: 50%;
    /* трансформация */
    -webkit-transform: translate(-50%, -150%);
    -ms-transform: translate(-50%, -150%);
    -o-transform: translate(-50%, -150%);
    transform: translate(-50%, -150%);
}
.overlay:target+.popup {
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}    
}
/******************************************************************************/