.slider-wrapper {
	position: relative;
	height: 100%;

	.slider {
		position: relative;
		height: 100%;

		.trigger {
			display: none;
		}
	
		.slide {
			width: 100%;
			overflow: hidden;
			position: absolute;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 5000;
			opacity: 0;
			transition: opacity .5s ease-in-out;

			margin: 0;

			.slide-item {
				width: 100%;
				max-width: 100%;
				height: 100%;
				/* margin: 0 auto; */
				vertical-align: middle;

				overflow: auto;
				display: flex;
				items-align: center;
				justify-content: center;

				border: solid 1px #ccc;
				>pre { 
					width: 100%;
					padding-left: 10px;
					overflow: auto;
					border: none;
					font-size: 1.4rem;
					line-height: 2.1rem;
				}
				.slide-caption {
					font-size: 1.6rem;
					padding: 0 1rem 0 1rem;
					position: absolute;
					top: -1rem;
					right: 2rem;
					//width: calc(80% - 1rem);
					color: #666;
					background-color: rgba(230,230,230,.5);
					text-align: center;
					a {
						color: blue;
					}
					a:hover {
						border-bottom: dotted 1px blue;
					}
				}
			}
		}
	}
	.slider .trigger:checked + .slide {
	  z-index: 6000;
	  opacity: 1;
	}

	.slider-nav {
		position: absolute; 
		bottom: 0.5em; 
		right: 0.5em;
		width: 100%;
		text-align: right;
		margin: 0;
		z-index: 6000;

		.slider-nav__item {
			display: inline-block;
		}
		.slider-nav__label {
			font-size: 1.3rem;
			background-color: #333;
			display: block;
			height: 2em;
			line-height: 2em;
			width: 2em;
			text-align: center;
			border-radius: 50%;
			color: white;
			cursor: pointer;
			transition: background-color .25s, color .25s ease-in-out;
		}

		.slider-nav__label:hover,
		.slider-nav__label:active,
		.slider-nav__label:focus {
			background-color: gray;
			color: black;
		}
		.slider-nav__label.slider-active {
			background-color: white;
			color: black;
			border: solid 1px #ccc;
		}
	}
}

/* responsive layout */
@media only screen and (min-width: 1024px) {
  .slide-caption {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {
  .slide-caption {
    font-size: 1.25rem;
  }  
}
@media only screen and (max-width: 768px) {
  .slide-item { width: 100%; height: auto; }
  .slider-wrapper .slider-nav { position: relative; display: block; }
}

#content.codeboard_demo {
	div.codeboard-player {
		height: 273px;
	}
}