/* ==========================================================================
   Custom litebox styles - demo purposes only.
   ========================================================================== */

body { background-color: #ccc; }

.wrapper {
  margin: 0 auto;
  max-width: 900px;
  background-color: white;
  padding: 5%;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 0 5px #ccc;
  -moz-box-shadow: 0 0 5px #ccc;
  -webkit-box-shadow: 0 0 5px #ccc;
  border: 1px solid #ccc;
}

.litebox {
  list-style: none;
  background-color: #ccc;
  padding: 2%;
  border-radius: 5px;
}

.litebox li { border-top: 1px solid #fff; }

.litebox li:first-child { border-top: none; }

.litebox li a {
  transition: all 0.5s ease;
  padding: 10px;
  text-decoration: none;
  color: #333;
  display: block;
}

.litebox li:hover a {
  padding-left: 20px;
  background-color: white;
}
 [data-content="litebox"] {
 margin: 5% auto;
 padding:10px;
 max-width: 900px;
 background-color: white;
 box-shadow: 0 0 25px #333;
 -webkit-box-shadow: 0 0 25px #333;
 -moz-box-shadow: 0 0 25px #333;
 border-radius: 10px;
}

[data-overlay="litebox"] img { width: 100%; }

/* ==========================================================================
   ***REQUIRED*** litebox styles.
   ========================================================================== */

[data-overlay="litebox"] {
 position: fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background-color:#000;
 background-color: rgba(0,0,0, 0.8);
 text-align: center;
}