/*body { background: #e8e8e8; }
.container { margin: 0 auto; }
*/
/* Example wrapper */

#FooterCustomSLYSiteBar{
	background-color:#78909c;
}
#FooterCustomSLYSiteBox{
}

#FooterCustomSLYSiteBox > header {
	text-align: center;
	margin: 24px 0;
	color: #002C5B;
	color:#fff;
}

#FooterCustomSLYSiteBar img{
/*
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
*/  
}


#FooterCustomSLYSiteBar span.subheader h2{
	color:#fff;
	text-align:center;
}
#FooterCustomSLYSiteBar span.subheader h3{
	color:#fff;
	text-align:center;
}
#FooterCustomSLYSiteBar span.subheader p{
	color:#fff;
	text-align:center;
}

#FooterCustomSLYSiteBar span.h2 p{
	font-size: 20px;
	font-weight: 400;
	line-height: 22px;
	/* color: inherit; */
	letter-spacing: 0.05em;
/*	color: #002b4f;*/
	color:#fff;
	text-align:center;
}

#FooterCustomSLYSiteBar span.h3 p{
	font-size: 20px;
	font-weight: 500;
	line-height: 24px;
	color: inherit;
	margin: 0 0 10px 0;
	text-transform: none;
	letter-spacing: 0.05em;
/*	color: #002b4f;*/
	color:#fff;
	text-align:center;
}

.wrap {
	position: relative;
	margin: .5em 0;
	padding:0 20px;
	text-align:center;
}


/* Frame */
.frame {
	height: 180px;
	line-height: 160px;
	overflow: hidden;
}
.frame ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
/*	font-size: 50px;*/
}
.frame ul li {
	float: left;
	width: 321px;
	height: 100%;
	margin: 0 14px;
	padding: 10px 0;
/*	background: #333;*/
	color: #ddd;
	text-align: center;
	cursor: pointer;
}
/*
.frame ul li.active {
	color: #fff;
	background: #a03232;
}
*/



.frame ul li:before{display:none !important;content:'';}

.frame ul li span{
/*	line-height: normal;*/
/*	display: inline-block;*/
/*	display: flow-root list-item;*/
	height: auto;
/*	margin:0;
	padding:0;*/
	vertical-align:middle;
	display:inline-block;
}

.frame ul li a[href]{
	color:inherit !important;
}

.frame ul li h3{
	font-size: 15px;
	line-height: 20px;
	font-weight: 700;
	text-transform: uppercase;	
	color:#fff;
}
.frame ul li p{
	color:#eee;
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	margin: 0 0 15px 0;
}
.frame ul li img{
	max-height:200px;
	max-width:300px;
	display:block;
}



/* Scrollbar */
.scrollbar {
	margin: 0 0 1em 0;
	height: 2px;
	background: #ccc;
	line-height: 0;
}
.scrollbar .handle {
	width: 100px;
	height: 100%;
	background: #292a33;
	cursor: pointer;
}
.scrollbar .handle .mousearea {
	position: absolute;
	top: -9px;
	left: 0;
	width: 100%;
	height: 20px;
}

/* Pages */
.pages {
	list-style: none;
	margin: 20px 0;
	padding: 0;
	text-align: center;
}

.pages li {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0 4px;
	text-indent: -999px;
	border-radius: 10px;
	cursor: pointer;
	overflow: hidden;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
	list-style-type:none;
}
.pages li:hover {
	background: #aaa;
}
.pages li.active {
	background: #666;
}


/* Controls */
.controls { margin: 25px 0; text-align: center; }

.controls .btn{
	position:absolute;
	top:calc(50% - 17px);
	box-sizing: border-box;
	width: 35px;
	height: 35px;
	border: solid 1px #fff;
	background-color:rgba(255,255,255,0.15);
	border-radius: 8px;
	line-height: 35px;
	padding:0;
	font-size: 24px;
	color:	#fff;	
}

.controls .btn.prevPage,.controls .btn.prev {left:-18px;}
.controls .btn.nextPage,.controls .btn.next {right:-18px;}
.controls .btn:hover{
	background-color:rgba(0,0,0,0.15);
	cursor:pointer;
}


@media(max-width:1535px){
	.frame ul li {width: 345px;margin: 0 20px;}
}
@media(max-width:1279px){
	.frame ul li {width: 305px;margin: 0 5px;}
}
@media(max-width:1023px){
	.frame ul li {width: 320px;margin: 0 10px;}
}
@media(max-width:767px){
	.controls .btn.prevPage,.controls .btn.prev {left:0;}
	.controls .btn.nextPage,.controls .btn.next {right:0;}
	.frame ul li {width: 370px;margin: 0 20px;}
}

.wrap:not([cnt~="l2"]) .controls{display:none;}

@media(min-width:1536px){
.wrap:not([cnt~="l5"]) .controls{display:none;}
.wrap:not([cnt~="l4"]) .frame{display:inline-block;}
}
@media(min-width:1280px){
.wrap:not([cnt~="l4"]) .controls{display:none;}
.wrap:not([cnt~="l3"]) .frame{display:inline-block;}
}
@media(min-width:1024px){
.wrap:not([cnt~="l4"]) .controls{display:none;}
.wrap:not([cnt~="l3"]) .frame{display:inline-block;}
}
@media(min-width:768px){
.wrap:not([cnt~="l3"]) .controls{display:none;}
.wrap:not([cnt~="l2"]) .frame{display:inline-block;}
}