:root {
  --text: #333333;
  --white: #ffffff;
  --button: #b3b3b3;
  --button-color: #0a0a0a;
  --shadow: #000;
  --bg: #737373;
  --header: #7a7a7a;
  --color: #fafafa;
  --lit-header: #e6e6e6;
  --speed: 2s;
}
/*
* {
  box-sizing: border-box;
  transform-style: preserve-3d;
}
*/
html {
background-color:#ccc;
}
body {
/*background-color:#ccc;*/
text-align:center;
color:var(--text);
}
#wrap {
padding-bottom:30px;
}
a {
text-decoration:none;
color:var(--text);
}
ul {
 margin:0;
 padding: 0;
}
 ul li {
  display:inline-block;
  list-style: none;
  padding: 0;
  margin: 25px auto;
  width:auto;
  text-align:center;
 }
a.button, .nav a, .back a, .slider a, .imodal a {
  text-transform: uppercase;
  text-decoration: none;
  background: var(--button);
  color: var(--button-color);
  padding: 1rem 1rem;
  /*border-radius: 1rem;*/
  font-size: 0.875rem;
  letter-spacing: 0.05rem;
}

.show_images {
width:346px;
height:346px;
max-width:96%;
 object-fit: cover;
 object-position: top;
 /*object-fit: cover;*/
}
.show_dirc {
max-width:96%;
 object-fit: contain;
}
.slider {
margin:20px 0;
position:fixed;
top:0;
right:5px;
float:right;
}
.imodal {
margin:20px 0;
position:fixed;
top:0;
left:5px;
float:left;
}
.back {
margin:20px 0;
position:fixed;
bottom:0;
right:5px;
float:right;
}
.back a, .slider a, .nav a, .imodal a, .button a {
padding:8px;
color:#666;
border:1px solid #999;
text-transform: uppercase;
text-decoration: none;
max-height:80px;
}
img {
 width:360px;
}
li a.dir, li.dir a {
 display:block;
 background:url('folder.png') 50% 0 no-repeat;
 background-size:90%;
 width:360px;
 height:270px;
 padding:10px 0 0;
 text-align:left;
 text-indent:30px;
 text-transform: uppercase;
 color:#999;
}

.embed-video {
 width:320px;
 height:240px;
 margin:0 5px;
}