/*************************************
 * styling generico elementi als
 ************************************/
.als-container {
	position: relative;
	width: 100%;
	margin: 0px auto;
	z-index: 0;
	overflow:hidden;
}

.als-viewport {
	position: relative;
	overflow: hidden;
	margin: 0px auto;
}

.als-wrapper {
	position: relative;
	list-style: none;
}
ul.als-wrapper{ padding:0; margin:0;}

.als-item {
	position: relative;
	display: block;
	text-align: center;
	cursor: pointer;
	float: left;
}

.als-prev, .als-next {
	position: absolute;
	cursor: pointer;
	clear: both;
}

/***************************************
 * styling specifico per elementi als
 * di header
 ***************************************/

#als-header {
	margin: 50px auto 30px auto;
}

#als-header .als-prev, #als-header .als-next {
	top: 3px;
}

#als-header .als-prev {
	left: -20px;
}

#als-header .als-next {
	right: -20px;
}

#als-header .als-item {
	margin: 0px 20px;
	padding: 5px 0px;
	text-align: center;
	min-height: 138px;
	min-width: 180px;
}

#als-header .als-item a {
	display: block;
	border: 3px dashed transparent;
	border-radius: 10px;
}

#als-header .als-item a:hover {
	border: 3px dashed #000;
}

#als-header .als-item img {
	vertical-align: middle;
	display: block;
	margin: 0 auto;
	
}

/******************************
 * styling content e sections
 ******************************/

/***********************************
 * styling specifico elementi als
 * di content e delle demo
 **********************************/

#demo1, #demo2, #demo3, #demo4 {margin:0px auto; margin-top:80px;}

#demo1 .als-item, #demo2 .als-item,
#demo3 .als-item, #demo4 .als-item, 
#demo5 .als-item {
	margin: 0px 5px;
	padding: 4px 0px;
	min-height:70px;
	min-width: 120px;
	text-align: center;
}

#demo1 .als-item img, #demo2 .als-item img,
#demo3 .als-item img, #demo4 .als-item img,
#demo5 .als-item img {
	display: block;
	margin: 0 auto;
	vertical-align: middle;
}

#demo1 .als-prev, #demo1 .als-next,
#demo2 .als-prev, #demo2 .als-next,
#demo3 .als-prev, #demo3 .als-next,
#demo4 .als-prev, #demo4 .als-next {
	top:25px;
}

#demo1 .als-prev, #demo2 .als-prev, #demo3 .als-prev,
#demo4 .als-prev {
	left:170px;
}

#demo1 .als-next,#demo2 .als-next, #demo3 .als-next,
#demo4 .als-next {
	right:170px;
}




.als-item img {
	
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
transition:  all .2s ease-in;
-webkit-backface-visibility: hidden;
}
.als-item img:hover
{
transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0);
filter: grayscale(0);
}