/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

body { margin: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

.dekstop-popup{ display: block; }
.mobile-popup{ display: none; }

#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8; z-index: 100; display: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.overlay-wrapper{
margin: 0px auto;
background: #ffff;
position: fixed;
z-index: 103;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
padding: 0;
}
.popup{ display: none; }

.close{ position: relative;
    padding: 0;
    display: block;
    top: 0px;
    right: 0;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
    /*transform: translateY(-50%);*/}
  .popup img.img-popup {width: 550px; height: 550px; }


@media screen and (min-height: 768px)  {
  .popup img.img-popup {width: 550px; height: 550px; }
}

@media screen and (max-width: 812px)  {
  .dekstop-popup{ width: 100%;  }
  .popup img.img-popup {width: 100%; height: 100%; }
}

@media screen and (max-width: 565px)  {
  .dekstop-popup{ display: none; width: 100%;  }
  .mobile-popup{ display: block; width: 100%; }
  .overlay-wrapper{ min-width:320px; padding: 0; }
  .close{ position: relative; padding:20px 0; display: block; top: 0px!important; transform: none!important; right: 0; cursor: pointer; }
}

@media screen and (max-width: 320px)  {
  .overlay-wrapper{ min-width:300px; }
}