body {
  font-family: 'Open Sans', sans-serif;
}

ul {
  margin-left: 20px;
}

/* Example wrapper */
.wrap {
	/*position: relative;
	margin: 3em 0;*/
  width: 100vw;
  height: 100vh;
}

/* Frame */
.frame {
	height: 90vh;
	overflow: hidden;
}
.frame > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
}
.frame > ul > li {
	float: left;
	width: 100vw;
	height: 100%;
	margin: 0 1px 0 0;
	padding: 10px 20px;
}

/*.frame ul li.active .card {
  border: 1px solid red;
}*/

.card {
  height: 100%;
  /*border: 2px solid white;*/
  border-radius: 10px;
  padding: 10px;
  box-shadow: 1px 1px 5px #555;
}

.bg-carbon-fiber {
  background-image: url(../images/carbon-fiber-texture.jpg);
  background-size: 80%;
}

.bg-wood {
  background-image: url(../images/wood-texture.jpg);
  /*background-size: 80%;*/
}

.bg-steel {
  background-image: url(../images/brushed-steel-texture.jpg);
  /*background-size: 80%;*/
}

.card-frame {
  background: rgb(250, 248, 242);
  padding: 10px;
  border: 2px solid black;
  height: 100%;

  display: flex;
  flex-flow: column;
}

.card-title {
  border: 2px solid rgba(0, 0, 0, 0.75);
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  padding: 10px;
  font-size: 1.3em;
  margin-bottom: 10px;
  /*flex: 0 1 auto;*/
}

.card-content {
  /*flex: 1 1 auto;*/
  overflow-y: scroll;
}

.card-picture {
  border: 2px solid black;
  max-width: 100%;
  max-height: 100%;
}

/* Scrollbar */
.scrollbar {
	/*margin: 10px 0 10px 0;*/
	height: 4px;
	background: #ccc;
}
.scrollbar .handle {
	width: 100px;
	height: 100%;
	background: #292a33;
	cursor: pointer;
}
.scrollbar .handle .mousearea {
	position: absolute;
	width: 100%;
	height: 20px;
}

/* Controls */
.controls {
  margin-top: 10px;
  text-align: center;
}

.prev, .next {
  padding: 10px;
  font-weight: bold;
  font-size: 1em;
}