/* reset */
.wrap {margin: 0 auto; padding: 40px 15px 0; }
[data-hidden = true] { display: none; }
[data-hidden = false] { display: block; }

/* transition */
.nav-ctrl span, .dots-ctrl li {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

/*** CONTENT ***/
.gallery {
    width: 100%; visibility: hidden; margin: 0 auto 30px;
}
.slider {
    height:250px;  width: auto; position: relative; overflow: hidden; margin: 0 auto;
}
.stage {
    overflow: hidden;
}
	.stage > div {
	    float: left; position: relative; }
		.stage > div img {
		    width: auto;
		    max-width: 800px;
		    height: 250px;
}

.control {
    width: 100%; position: relative;
}
.nav-ctrl {
    text-align: center;
    margin-top: 15px;
}
	.nav-ctrl span {
	       width: 100px;
	       height: 30px;
	       display: inline-block;
	       font-weight: 500; font-size: 12px;
	       line-height: 30px;
	       color: white;
	       sans-serif;
	       text-transform: uppercase;
	       text-align: center;
	       margin: 0 5px;
	       border-radius: 3px;
	       outline: none;
	       -webkit-user-select: none;
	       user-select: none;
	       background-color: #cecece70;
	       cursor: pointer;
	       -webkit-transition: all 0.3s;
	       transition: all 0.3s; }
	.nav-ctrl span:hover {
	    border-color: #cecece;
	    background-color: #cecece70; }
	.nav-ctrl .disable, .nav-ctrl .disable:hover {
	    border: solid 1px #cecece;
	    background-color: #cecece70;
	    cursor: default; }
.dots-ctrl {
    text-align: center; margin-top: 15px;
}
	.dots-ctrl li {
	    width: 10px;
	    height: 10px;
	    display: inline-block;
	    border-radius: 50%;
	    background-color: darkgray;
	    opacity: 0.4;
	    cursor: pointer;
    }
	.dots-ctrl li + li {
	    margin-left: 10px;
    }
	.dots-ctrl .active, .dots-ctrl li:hover {
	    opacity: 1;
    }