html,body{padding:0;margin:0;min-height:100%;}
#slider {
    width: 100%;
	height:100%;
	left:0;
	top:0;
	position: absolute;
    overflow: hidden;
    margin: 0 auto;
	-webkit-transform: translateZ(0); /* Optional: When heavy at iOS6+ */
	z-index: 6999;
	background: #eeefeb no-repeat 50%;
	background-size: cover;
	opacity:0;
}

#slider .blurred { background-size: cover; position: absolute; width: 100%; height: 100%; left:0;top:0; background: #fff; transform: scale(1.5); }

#slider .controller { position: absolute; width: 100%; height: 100%; left: 0; top:0; pointer-events: none; z-index: 5000; }
#slider .controller .control { 
	position: absolute; top: 50%; margin-top: -50px; width: 66px; height: 100px; background: no-repeat 50%; pointer-events: auto; cursor: pointer; opacity: 0.8; 
	
	transition: all 0.2s ease;
}
#slider .controller .prev { left: 10px; background:url(./img/arrow_left.png);}
#slider .controller .next { right: 10px; background:url(./img/arrow_right.png);}
#slider .controller .close { 
	width: 100px;
	height: 100px;
	position: absolute; left: 50%; top: 10px; margin-left: -50px; background: url(./img/close.png) no-repeat 50%; pointer-events: auto; cursor: pointer;
	transform: scale(0.9);
	opacity: 0.8;
	transition: all 0.2s ease;
 }

 #slider .controller .control:hover,
 #slider .controller .close:hover{ opacity: 1;}
#slider .controller .prev:active { left: 5px; opacity: 1;}
#slider .controller .next:active { right: 5px; opacity: 1;}
#slider .controller .close:active { transform: scale(1); }

#slider .caption { 
	position: absolute; right: 10px; bottom: 10px; z-index: 7100; color: #ca2327; font-size: 12px; font-weight: bold; letter-spacing: -1px; pointer-events: none;
	
}

.flipsnap {
	width: 100%; /* 320px(item width) * 3(item count) */
	height: 100%;
	font-size:0;
	white-space: nowrap;
	position: relative;
	z-index: 500;/*
	cursor: ew-resize;*/
}

.flipsnap:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
}

.item {
	display: inline-block;
	width: 100%;
	height: 100%;
	position: relative;
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
}
.item .text { 
	color: #fff;
	font-size: 32px; position: absolute; width: 100%; text-align: center;
	padding: 20px 0;
	transition: all 0.8s ease;
	bottom: 0;
	opacity: 0;
	
	white-space: normal;
}
.item.current .text { bottom: 50px; opacity: 1; }
.item .text span { display: inline-block; background: #76b0c6; padding: 5px 15px; }
.item br { display: none;}

@media (max-width: 560px)
{
	#slider .controller .control { 
		transform:scale(0.8);
	}
	#slider .controller .close { 
		transform:scale(0.6);
	 }
	
	#slider .controller .prev:active { left: 5px; opacity: 1;}
	#slider .controller .next:active { right: 5px; opacity: 1;}
	#slider .controller .close:active { transform: scale(0.8); }
	.item { background-size:contain; }
	.item .text { 
		font-size: 20px; 
	}
	.item br { display: block;}
}