@charset 'utf-8';

#carousel-loaded { display:none!important; }
#carousel-loaded:before { content:'carousel loaded'; }

.carousel, .carousel-contents, .carousel-content, .carousel-container {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
}

.carousel {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: auto;
}

.carousel > input[name^=carousel-] {
	position: absolute;
	top: 50%;
	left: 50%;
	-moz-opacity: 0;
	opacity: 0;
	width: 0;
	height: 0;
	visibility: hidden;
	z-index: -1;
}

.carousel .carousel-contents {
	position: relative;
	height: -webkit-calc(100% - 20px);
	height: calc(100% - 20px);
	overflow:visible;
}

.carousel .carousel-contents:after {
	clear: both;
	content: "";
	display: block;
	position: relative;
	width: 100%;
	height: 0;
	visibility: hidden;
	overflow: hidden;
}

.carousel .carousel-content {
	word-spacing: normal;
	float: left;
	position: relative;
	display: inline-block;
	position: relative;
	overflow:hidden;
	margin:0!important;
}

.carousel .carousel-nav {
	text-align: center;
	cursor:default;
	font-size:75%;
}

.carousel label {
	cursor: pointer;
}

.carousel .carousel-nav > label {
	display: inline-block;
	position: relative;
	
	-moz-opacity: 0.5;
	opacity: 0.5;
}

.carousel .carousel-nav > label:before {
	font-family:'FontAwesome';
	content: "\f111"; /* fa-circle */
	display:inline-block;
	vertical-align:middle;
	margin:5px;
}

.carousel .carousel-next,
.carousel .carousel-prev {
	position: absolute;
	top: 0;
	bottom: 0;
	
	width: 25%;
	opacity: 0.25;
	color: white;
	text-shadow: 0 0 3px rgba(0, 0, 0, .8);
	cursor: pointer;
}

.carousel .carousel-prev {
	left: 0;
}

.carousel .carousel-next {
	right: 0;
}

.carousel .carousel-prev:before,
.carousel .carousel-next:before {
	display: block;
	position: absolute;
	top: 50%;
	line-height: 1;
	margin-top: -0.5em;
	margin-left: 15px;
	margin-right: 15px;
	left: 0;
	right: 0;
	text-align: center;
	font-family: FontAwesome;
	font-size: 45px;
	-moz-opacity:0.98;
	opacity:0.98;
}

@media (max-width:767px) {
	.carousel .carousel-prev:before,
	.carousel .carousel-next:before {
		font-size:35px;
	}
}

.carousel .carousel-prev:before {
	/* content: '\f053'; /* chevron-left */
	content:'\f104'; /* angle-left */
	text-align: left;
}

.carousel .carousel-next:before {
	/* content: '\f054'; /* chevron-right */
	content:'\f105'; /* angle-right */
	text-align: right;
}

.carousel .carousel-more:before {
	/* content: '\f054'; /* chevron-right */
	content:'\f105'; /* angle-right */
	text-align: right;
}
.carousel .carousel-more > a[href] {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
}
.carousel .carousel-more:before {
	content:'\f101'; /* angle double right */
}


.carousel .carousel-next:hover,
.carousel .carousel-prev:hover {
	opacity: 1;
}

.carousel .carousel-contents {
	-webkit-transform: translate3d(0,0,0);
	transform: translateX(0);
	/*
	-webkit-transition: all .5s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition: all .5s cubic-bezier(0.22, 0.61, 0.36, 1);
	*/
	-webkit-transition:
		transform 1.2s ease-out,
		margin 1.2s ease-out;
	transition:
		transform 1.2s ease-out,
		margin 1.2s ease-out;
}

.carousel .carousel-contents.touching {
	-webkit-transition: none;
	transition: none;
}

.carousel .carousel-contents.touchend {
	/*
	-webkit-transition: all .5s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition: all .5s cubic-bezier(0.22, 0.61, 0.36, 1);
	*/
	-webkit-transition: all 1.2s ease-out;
	transition: all 1.2s ease-out;
}

.carousel .carousel-contents.prevent-animation,
.carousel[data-carousel="destroyed"] .carouse-contents {
	-webkit-transition: none;
	transition: none;
}

.carousel .carousel-container > img:only-child,
.carousel .carousel-container > a:only-child,
.carousel .carousel-container > a:only-child > img:only-child,
.carousel .carousel-container > a.linkblock {
	max-width: 100%;
	width: 100%;
	display:block;
}

/**************************************/
/* dynamic styles for 3 contents (overwrite with js) */

.carousel .carousel-contents {
	width:300%;
}

.carousel .carousel-content {
	width: 33.3333%;
	width: -webkit-calc(100%/ 3);
	width: calc(100%/ 3);
}

/* pointnav */
.carousel > input[name^=carousel-]:nth-of-type(1):checked ~ .carousel-nav > label:nth-of-type(1):before,
.carousel > input[name^=carousel-]:nth-of-type(2):checked ~ .carousel-nav > label:nth-of-type(2):before,
.carousel > input[name^=carousel-]:nth-of-type(3):checked ~ .carousel-nav > label:nth-of-type(3):before {
	-moz-opacity: 1;
	opacity: 1;
}

/* scroll-x */

.carousel {
	/* magic for iOS */
	-webkit-transform: translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
}
.carousel .carousel-contents {
	/* magic for iOS */
	-webkit-backface-visibility: hidden;
}

.carousel > input[name^=carousel-]:nth-of-type(1):checked ~ .carousel-contents {
	-webkit-transform: translate3d(0,0,0);
	transform: translateX(0);
}

.carousel > input[name^=carousel-]:nth-of-type(2):checked ~ .carousel-contents {
	-webkit-transform: translate3d(-33.33333%,0,0);
	transform: translateX(-33.33333%);
}

.carousel > input[name^=carousel-]:nth-of-type(3):checked ~ .carousel-contents {
	-webkit-transform: translate3d(-66.66666%,0,0);
	transform: translateX(-66.66666%);
}

/* loop forward */
.carousel > input[name^=carousel-]:first-of-type:checked ~ .carousel-contents.loop-forward > .carousel-content:first-child {
	-webkit-transform: translate3d(300%,0,0);
	transform: translateX(300%);
}
.carousel > input[name^=carousel-]:first-of-type:checked ~ .carousel-contents.loop-forward {
	-webkit-transform: translate3d(-100%,0,0);
	transform: translateX(-100%);
}

/* loop-backward */
.carousel > input[name^=carousel-]:last-of-type:checked ~ .carousel-contents.loop-backward > .carousel-content:last-child {
	-webkit-transform: translate3d(-300%,0,0);
	transform: translateX(-300%);
}
.carousel > input[name^=carousel-]:last-of-type:checked ~ .carousel-contents.loop-backward {
	-webkit-transform: translate3d(33.33333%,0,0);
	transform: translateX(33.33333%);
}


/******* for customize with top class *******/

.carousel.carousel-arrownav-none .carousel-prev,
.carousel.carousel-arrownav-none .carousel-next {
	display:none!important;
}

.carousel.carousel-pointnav-none .carousel-nav {
	display:none!important;
}

.carousel.carousel-pointnav-over .carousel-nav {
	position:absolute;
	top:auto;
	bottom:0;
	left:0;
	right:0;
	
	-moz-opacity:0.75;
	opacity:0.75;
}
.carousel.carousel-pointnav-over .carousel-nav:hover {
	-moz-opacity:0.98;
	opacity:0.98;
}

.carousel.carousel-pointnav-over .carousel-nav > label:before {
	color:white;
	text-shadow:
		0 0 2px black,
		0 0 5px rgba(0,0,0,.5);
}

/***** example of customize by css ***********/

/* animation *
.carousel-contents {
	-webkit-transition-duration: .5s;
	-webkit-transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-duration: .5s;
	transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
*/

/********* for debug **************
.carousel > input[name^=carousel-] { position:static; opacity:1; visibility:visible; width:auto; height:auto; }
.carousel-container {opacity:0.5;}
.carousel-content:nth-child(4n+1){background:red;}
.carousel-content:nth-child(4n+2){background:green;}
.carousel-content:nth-child(4n+3){background:blue;}
.carousel-content:nth-child(4n)  {background:yellow;}
/**/