* { border-collapse: collapse; }
* { -moz-box-sizing: border-box; }
* { box-sizing: border-box; }

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    vertical-align: middle;
    min-height: 100%;
}

.table { display: table; }
.td { display: table-cell; }
.middle { vertical-align: middle; }
.center { text-align: center; }

/* + расположение картинки по центру экрана и авторесайз в размер */
#touchsurface { width: 100%; height: 100%; margin: 0; padding: 0; position: fixed; top: 0; left: 0;  display: none; }
/* #touchsurface  { border: 3px solid red; } */
#touchsurface { min-height: 100%; max-height: 100%; }
#touchsurface { min-width: 100%; max-width: 100%; }
#touchsurface { text-align:center; vertical-align: middle; white-space: nowrap; }
#touchsurface { font-size: 1px; }
#touchsurface * { font-size: 1em; }

/*
#touchsurface:before {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    content: \"\";
}
*/

#zoomedimages { background-size: cover; }
#zoomedimages { background-repeat: no-repeat; display: inline-block; text-align: center; white-space: nowrap; }
#zoomedimages img { max-height: 100%; max-width: 100%; margin: 0; padding: 0; }
#zoomedimages img { max-height: 100vh; max-width: 100vw; margin: 0; padding: 0; }

#zoomedimages { display: inline-block; vertical-align: middle; }

* html #touchsurface { height: 100%; }
/* - расположение картинки по центру экрана и авторесайз в размер */

/* украшательство */
#zoomedimages { border: 1px solid black; }
#zoomedimages { box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.5) ; }
#touchsurface:hover { cursor: pointer; }

/* место для сообщения и названия увеличенного фото */
#touchmessage { position: fixed; width: 100%; text-align: center; bottom: 4px; text-shadow: black 2px 2px 20px; color: white; background: rgba(0,0,3,0.2); font-size: 18px; }

/* показывалка стрелок и крестиков для курсорного управления в обычном браусере */
#mousecontrol { position: fixed; height: 96px; width: 96px; text-align: center; top: 48%; left: 46%; font-size: 72px; text-shadow: black 0px 0px 20px; opacity: 1; }

/* браусеронезависимый css2/css3 крестик */
.krestik { position: absolute; right: 22px; top: 14px; width: 56px; height: 56px; }
.krestik:before, .krestik:after { position: absolute; left: 27px; content: ' '; height: 57px; width: 6px; background-color: white; }
.krestik:before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }
.krestik:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); }

@media screen and (max-width: 999px) {
img { max-width: 100%; }
#gallery { max-width: 100%; }
}

@media screen and (max-width: 700px) {
.img_thumb { margin: 0; padding: 0 0 5px 0; max-width: 100%; height: auto; }
}