/*
------------------------------------------------------------------------------------
COM.EZZATO.DEV
By : Andre Lorenzoni at andre@ezzato.com
------------------------------------------------------------------------------------
*/	

.carousel {
	position:relative;
	width:inherit;
	height: inherit;
}

.carousel .slider {
	position:relative;
	width:100%;
	height: inherit;
	overflow:hidden;
	cursor: grab;
	cursor: -webkit-grab;
	cursor: -moz-grab;
	background-color: #000000;
}

.carousel .slider ul{
	position:relative;
	display:table;
	width:100%;
	height: inherit;
}

.carousel .slider ul li {
	position:relative;
	width:0px;
	height: inherit;
	filter: alpha(opacity=0); 	
	-khtml-opacity: 0;      	
	-moz-opacity: 0;       		
	opacity: 0;  
	text-align:center;
	background-color:#000000;
	vertical-align:middle;
	overflow:hidden;
	display: table-cell;
	-o-transition:.7s;
	-ms-transition:.7s;
	-moz-transition:.7s;
	-webkit-transition:.7s;
	transition:.7s;
	background-size:auto;
	/*background-size:cover;*/
	background-repeat:no-repeat;
	background-position:center center;
}

.carousel .slider ul li > a {
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:1;
}

.carousel .carousel-spacer {
	position:relative;
	display:table;
	width:100%;
	height:10px;
}

.carousel .slider .carousel-active {
	width:100vw;
	filter: alpha(opacity=100); 
	-khtml-opacity: 1;      	
	-moz-opacity: 1;       		
	opacity:1;  
}

.carousel .slider ul li .image {
	position:relative;
	display:table-cell;
	width:100%;
	height:100%;
}

.carousel .slider ul li .image img {
	width:100%;
	height:1px;
	vertical-align:middle;
}

.carousel .slider ul li .image-mobile {
	position:relative;
	display:none;
	width:100%;
	height:100%;
}

.carousel .slider ul li .image-mobile img {
	width:100%;
	height:1px;
	vertical-align:middle;
}

.carousel .slider .carousel-mobile-image {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
}

.carousel .slider ul li .text-hidden {
	display:none;
}

.carousel  .dot-navigator {
   position: absolute;
	display: block;
	margin: 0 auto;
	bottom: 0px;
	z-index: 2;
	text-align: center;
	height:auto;
	width:100%;
	padding: 0px 0px 50px;
}

.carousel  .dot-navigator .dot-navigator-container {
	position:relative;
	display:table;
	height:100%;
	margin: 0 auto;
}

.carousel  .dot-navigator ul {
    position:relative;
    display:table-cell;
    width:auto!important;
	margin: 0 auto;
	vertical-align:middle;
}

.carousel  .dot-navigator ul li {
	position:relative;
	display: table-cell;
	display: inline-table;
	width:18px;
	height:18px;
	-moz-border-radius:16px;
	-webkit-border-radius:16px;
	border-radius:16px;
	border:solid 3px transparent;
	cursor:pointer;
	list-style:none;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;
}

.carousel  .dot-navigator ul li .dot {
	position:relative;
	width:6px;
    height:6px;
	-moz-border-radius:16px;
	-webkit-border-radius:16px;
	border-radius:16px;
	margin:4px;
	background-color:#b8b8b8;
}
.carousel  .dot-navigator ul li.active .dot:after {
	position:absolute;
	top:-7px;
	left:-7px;
	width:14px;
	height:14px;
	-moz-border-radius:16px;
	-webkit-border-radius:16px;
	border-radius:16px;
	border:solid 3px;
	border-style:solid;
	border-width:3px;
	border-color: transparent;
	content:'';
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	transition:.5s;
}

.carousel  .dot-navigator ul li.active.percent-1 .dot:after {
	border-color: #000000 transparent transparent transparent;
}

.carousel  .dot-navigator ul li.active.percent-2 .dot:after {
	border-color: #000000 #000000 transparent transparent;
}

.carousel  .dot-navigator ul li.active.percent-3 .dot:after {
	border-color: #000000 #000000 #000000 transparent;
}

.carousel  .dot-navigator ul li.active.percent-4 .dot:after {
	border-color: #000000 #000000 #000000 #000000;
}

.carousel  .dot-navigator ul li:last-child {
    margin-right:0px;
}

.carousel .dot-navigator ul li .dot:hover {
    background-color:#ffffff;
}

.carousel .dot-navigator .active .dot {
    background-color:#ffffff;
}

.carousel .dot-navigator li.active {
	border:solid 3px  #b8b8b8;
}

.carousel .dot-navigator-vertical ul li {
	display:table;
	margin-right:0px;
	margin-bottom:12px;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;
}

.carousel .dot-navigator-site {
    position:fixed;
    top:40%;
    right:20px;
    z-index:4;
}

.carousel .arrow {
	position:absolute;
	top:50%;
	background-position:center center;
	background-repeat:no-repeat;
	z-index: 1;

	
	top: -moz-calc(50% - 45px);
    top: -webkit-calc(50% - 45px);
    top: calc(50% - 45px);
}

.carousel .arrow.left {
	left:20px;
}

.carousel .arrow.right {
	right:20px;
}

.carousel .arrow.left a {
	position:relative;
	display: table;
	top:-50%;
	width:24px;
	height:54px;
	cursor: pointer;
}

.carousel .arrow.left a:after {
	font-family: "Material Icons";
	content:'';
	font-size: 50px;
	font-weight: 100;
}

.carousel .arrow.right a {
	position:relative;
	display: table;
	top:-50%;
	width:24px;
	height:54px;
	cursor: pointer;


}

.carousel .arrow.right a:after {
	font-family: "Material Icons";
	content:'';
	font-size: 50px;
	font-weight: 100;
}

/*
--------------------------------------------------------------------------------------
DESKTOP ONLY
--------------------------------------------------------------------------------------
*/

@media only screen and (min-width: 760px) and (max-width: 10000px) { 

	
}

/*
--------------------------------------------------------------------------------------
TABLET SMALL SCREEN
--------------------------------------------------------------------------------------
*/

@media only screen and (min-width: 760px) and (max-width: 1460px) { 

	.carousel .slider ul li {
		background-size:  cover;
	}
}

/*
--------------------------------------------------------------------------------------
SMARTPHONE
--------------------------------------------------------------------------------------
*/

@media only screen and (min-width: 200px) and (max-width: 760px) { 

	.carousel {
		display:table;
	}

	.carousel .slider .carousel-active  .carousel-mobile-image {
		display:table!important;
		background-color: rgba(0,0,0,.3);
		vertical-align:top;
		top:0px;
		height: inherit;
	}
	
	.carousel .slider {
		display:table-row;
	}

	.carousel .slider  .content {
		opacity:0;
	}

	.carousel .slider ul li {
		background-size:cover;
	}

	.carousel .slider .carousel-active .content {
		/*display: table;*/
		opacity:1;
	}
	
	.carousel .dot-navigator {
		right: auto;
		width: 100%;
		padding: 10px;
	}
	
	.carousel .dot-navigator ul {
		position:relative;
		display:table;
		padding:10px 0px;
	}
	
	.carousel .dot-navigator ul li {
		position:relative;
		display:inline-table;
		border: solid 2px #666666;
		margin:0px 1px;
	}
	
	.carousel .dot-navigator .dot-navigator-container {
		margin: 0 auto;
	}
	
	.carousel .dot-navigator  .active .dot {
		background-color:#666666;
	}

	.carousel .arrow {
		top:auto;
		bottom:10px;
		z-index: 2;
	}

}