/*****************************  Slider  ************************/

.horizontal-list {
  display: flex;
  list-style: none; /* removes the bullet points from the list */
    padding:0; margin:0;
}

.horizontal-list li {
  margin-right: 0.6vw; /* adds spacing between each list item */
}

.ind_album img { width: 9vw; height:13vh }
.HoldAlbum
{
    max-width: 38vw; 
}

.HoldSlider
{
    clear: both;
    width:70%;
    margin-left:2%;
    margin-bottom:1vh ! important;
    max-height:63.7vh ! important;
}
.OrSlider img, .album img {
	width: 38vw;
	height: 50vh;
}

.SliderInfo
{
    padding:1%;
    margin-left:1% ! important;
    font-size:1.1em ! important
}

/***************************** Slider ************************/
/* Light Carousel v1.0.0 | (c) 2015 Taisuke J | This project is released under the MIT license. */

/*-------------------------------------------------------------------------------------------*/
/* Settings (tweek it for your use) */
/*-------------------------------------------------------------------------------------------*/

.ind_album .selected div:before {
        border-bottom: 1px solid red;
}

/*-------------------------------------------------------------------------------------------*/
/* Core CSS */
/*-------------------------------------------------------------------------------------------*/
@font-face {
	font-family: 'Font Awesome';
	src: url('fonts/fontawesome/fontawesome-webfont.eot');
	src: url('fonts/fontawesome/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
		url('fonts/fontawesome/fontawesome-webfont.woff') format('woff'),
		url('fonts/fontawesome/fontawesome-webfont.ttf') format('truetype'),
		url('fonts/fontawesome/fontawesome-webfont.svg#svgFontName') format('svg');
}

.album {
	position: relative;
	overflow: hidden;
	-webkit-transition: 0.3s;
	transition: 0.3s;
}
.album ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.album li {
	opacity: 0;
	filter: alpha(opacity=0);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	-webkit-transition: 0.4s linear;
	transition: 0.4s linear;
}
.album li:first-child {
	opacity: 1;
	filter: alpha(opacity=100);
}
.album li.current {
	opacity: 1;
	filter: alpha(opacity=100);
}
.album img {
	display: block;
	border: none;
	vertical-align: bottom;
}
/*
.album img {
	display: block;
	width: 50vw;
	height: 55vh;
	border: none;
	vertical-align: bottom;
}
*/

.caption {
	background: rgba(0, 0, 0, 0.6);
        color:white;
	opacity: 0;
	-webkit-transform: translate3d(30px, 0, 0);
	transform: translate3d(30px, 0, 0);
	position: absolute;
	right: 0;
	bottom: 10px;
	width: 100%;
	padding: 20px 30px;
	font-size: 30px;
	-webkit-transition: 0.6s 0.8s;
	transition: 0.6s 0.8s;
        margin-left:-80vw ! important;
}

@media screen and (max-width: 767px) {
	.caption {
		bottom: 0;
		width: 100%;
		padding: 15px 15px;
		font-size: 20px;
	}
}
@media screen and (max-width: 400px) {
	.caption {
		padding: 10px 15px;
		font-size: 16px;
	}
}
.caption span {
	display: block;
	opacity: 0;
	-webkit-transform: translate3d(0, -5px, 0);
	transform: translate3d(0, -5px, 0);
	-webkit-transition: 0.6s 1.2s;
	transition: 0.6s 1.2s;
}
.current .caption,
.current .caption span {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.mobile .controls {
	display: none;
}
.album:hover .prev,
.album:hover .next {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.album:hover .prev:hover,
.album:hover .next:hover {
	opacity: 0.5;
	filter: alpha(opacity=50);
}
.prev {
	opacity: 0;
	filter: alpha(opacity=0);
	position: absolute;
	left: 10px;
	top: 50%;
	line-height: 1;
	margin-top: -35px;
	font-size: 70px;
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	-webkit-transform: translate3d(-10px, 0, 0);
	transform: translate3d(-10px, 0, 0);
	-webkit-transition: 0.3s;
	transition: 0.3s;
}
.prev:before {
	display: block;
	color: #fff;
	font-family: Font Awesome, sans-serif;
	content: "\f104";
}
.next {
	opacity: 0;
	filter: alpha(opacity=0);
	position: absolute;
	right: 10px;
	top: 50%;
	line-height: 1;
	margin-top: -35px;
	font-size: 70px;
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	-webkit-transform: translate3d(10px, 0, 0);
	transform: translate3d(10px, 0, 0);
	-webkit-transition: 0.3s;
	transition: 0.3s;
}
.next:before {
	display: block;
	color: #fff;
	font-family: Font Awesome, sans-serif;
	content: "\f105";
}

.ind_album {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-right:1px;
}
.ind_album ul {
	overflow: hidden;
	list-style: none;
	margin: 0;
	padding: 3px;
}
.ind_album li {
	float: left;
}
.ind_album div {
	position: relative;
	background: #fff;
}
.ind_album .selected div:before {
	display: block;
	position: absolute;
	left: -6px;
	top: -6px;
	width: 100%;
	height: 100%;
	border-width: 6px;
	content: "";
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
.ind_album img {
	display: block;
	position: relative;
	border: none;
	vertical-align: bottom;
	cursor: pointer;
	-webkit-transform: translateZ(0); /* bug fix for chrome */
	-webkit-transition: 0.4s;
	transition: 0.4s;
}
.ind_album img:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
}
.ind_album .selected img {
	cursor: default;
}
.ind_album .selected img:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}
.container {
  max-width: 500px;
  margin: 0 auto;
}
h1 { margin:150px auto 30px auto; text-align:center}
.FlexDiv
{
    display: flex;
    padding: 0;
}
.FlexDiv > div { flex: 1; /*grow*/ }

.Bj { background-color:#8FD0EC}
.By { background-color:yellow}
.Br { background-color:red}
.Bb{ background-color:#57C5D8;}
.Bv{ background-color:#17C1AF;}
.Bg{ background-color:grey;}
.Bw{ background-color:black;}

.Frame
{
    width: 58vw ! important;
}