/*------------------------------------*\
  $GRIGLIA 
\*------------------------------------*/

/* .gc = grid container (racchiude gli elementi che compongono la griglia) */
.gc {
	height: auto;
}

.gc--rev .grid {float: right;}

.gc > .gc {margin-left: 0;}

.grid {
	float: left;
	position: relative;
	background-color: #FFFFFF;
}

/*------------------------------------*\
  $LARGHEZZE
\*------------------------------------*/
.span-1 {
	width: 100%;
	line-height: normal;
}

.span-1-2, .span-2-4, .span-3-6, .span-4-8, .span-5-10, .span-6-12 {
 width: 50%;}

.span-1-3, .span-2-6, .span-4-12 {
 width: 33.333%;}

.span-2-3, .span-4-6, .span-8-12 {
 width: 66.666%;}

.span-1-4, .span-2-8, .span-3-12 {
 width: 25%;}

.span-3-4, .span-6-8, .span-9-12 {
 width: 75%;}

.span-1-5, .span-2-10 {
 width: 20%;}

.span-2-5, .span-4-10 {
 width: 40%;}

.span-3-5, .span-6-10 {
 width: 60%;}

.span-4-5, .span-8-10 {
 width: 80%;}

.span-1-6, .span-2-12 {
 width: 16.666%;}

.span-5-6, .span-10-12 {
 width: 83.333%;}

.span-1-8 {
 width: 12.5%;}

.span-3-8 {
 width: 37.5%;}

.span-5-8 {
 width: 62.5%;}

.span-7-8 {
 width: 87.5%;}

.span-1-10 {
 width: 10%;}

.span-3-10 {
 width: 30%;}

.span-7-10 {
 width: 70%;}

.span-9-10 {
 width: 90%;}

.span-1-12 {
 width: 8.333%;}

.span-5-12 {
 width: 41.666%;}

.span-7-12 {
 width: 58.333%;}

.span-11-12 {
 width: 91.666%;}

/*------------------------------------*\
  $BREAKPOINT E MEDIA QUERY
\*------------------------------------*/
@media only screen and (min-width: 320px) and (max-width: 480px) {
.mobile-1 {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.mobile-1-2, .mobile-2-4, .mobile-3-6, .mobile-4-8, .mobile-5-10, .mobile-6-12 {
 width: 50%;}

.mobile-1-3, .mobile-2-6, .mobile-4-12 {
 width: 33.333%;}

.mobile-2-3, .mobile-4-6, .mobile-8-12 {
 width: 66.666%;}

.mobile-1-4, .mobile-2-8, .mobile-3-12 {
 width: 25%;}

.mobile-3-4, .mobile-6-8, .mobile-9-12 {
 width: 75%;}

.mobile-1-5, .mobile-2-12 {
 width: 20%;}

.mobile-2-5, .mobile-4-10 {
 width: 40%;}

.mobile-3-5, .mobile-6-10 {
 width: 60%;}

.mobile-4-5, .mobile-8-10 {
 width: 80%;}

.mobile-1-6, .mobile-2-12 {
 width: 16.666%;}

.mobile-5-6, .mobile-10-12 {
 width: 83.333%;}

.mobile-1-8 {
 width: 12.5%;}

.mobile-3-8 {
 width: 37.5%;}

.mobile-5-8 {
 width: 62.5%;}

.mobile-7-8 {
 width: 87.5%;}

.mobile-1-10 {
 width: 10%;}

.mobile-3-10 {
 width: 30%;}

.mobile-7-10 {
 width: 70%;}

.mobile-9-10 {
 width: 90%;}

.mobile-1-12 {
 width: 8.333%;}

.mobile-5-12 {
 width: 41.666%;}

.mobile-7-12 {
 width: 58.333%;}

.mobile-11-12 {
 width: 91.666%;}
}


@media only screen and (min-width: 480px) and (max-width: 600px) {
.mobile-1 {
 width: 100%;}

.mobile-1-2, .mobile-2-4, .mobile-3-6, .mobile-4-8, .mobile-5-10, .mobile-6-12 {
 width: 50%;}

.mobile-1-3, .mobile-2-6, .mobile-4-12 {
 width: 33.333%;}

.mobile-2-3, .mobile-4-6, .mobile-8-12 {
 width: 66.666%;}

.mobile-1-4, .mobile-2-8, .mobile-3-12 {
 width: 25%;}

.mobile-3-4, .mobile-6-8, .mobile-9-12 {
	width: 75%;
	margin-left: auto;
	margin-right: auto;
}

.mobile-1-5, .mobile-2-12 {
 width: 20%;}

.mobile-2-5, .mobile-4-10 {
 width: 40%;}

.mobile-3-5, .mobile-6-10 {
 width: 60%;}

.mobile-4-5, .mobile-8-10 {
 width: 80%;}

.mobile-1-6, .mobile-2-12 {
 width: 16.666%;}

.mobile-5-6, .mobile-10-12 {
 width: 83.333%;}

.mobile-1-8 {
 width: 12.5%;}

.mobile-3-8 {
 width: 37.5%;}

.mobile-5-8 {
 width: 62.5%;}

.mobile-7-8 {
 width: 87.5%;}

.mobile-1-10 {
 width: 10%;}

.mobile-3-10 {
 width: 30%;}

.mobile-7-10 {
 width: 70%;}

.mobile-9-10 {
 width: 90%;}

.mobile-1-12 {
 width: 8.333%;}

.mobile-5-12 {
 width: 41.666%;}

.mobile-7-12 {
 width: 58.333%;}

.mobile-11-12 {
 width: 91.666%;}
}

@media only screen and (min-width: 601px) and (max-width: 1023px) {
.tablet-1 {
 width: 100%;}

.tablet-1-2, .tablet-2-4, .tablet-3-6, .tablet-4-8, .tablet-5-10, .tablet-6-12 {
 width: 50%;}

.tablet-1-3, .tablet-2-6, .tablet-4-12 {
 width: 33.333%;}

.tablet-2-3, .tablet-4-6, .tablet-8-12 {
 width: 66.666%;}

.tablet-1-4, .tablet-2-8, .tablet-3-12 {
 width: 25%;}

.tablet-3-4, .tablet-6-8, .tablet-9-12 {
 width: 75%;}

.tablet-1-5, .tablet-2-12 {
 width: 20%;}

.tablet-2-5, .tablet-4-10 {
 width: 40%;}

.tablet-3-5, .tablet-6-10 {
 width: 60%;}

.tablet-4-5, .tablet-8-10 {
 width: 80%;}

.tablet-1-6, .tablet-2-12 {
 width: 16.666%;}

.tablet-5-6, .tablet-10-12 {
 width: 83.333%;}

.tablet-1-8 {
 width: 12.5%;}

.tablet-3-8 {
 width: 37.5%;}

.tablet-5-8 {
 width: 62.5%;}

.tablet-7-8 {
 width: 87.5%;}

.tablet-1-10 {
 width: 10%;}

.tablet-3-10 {
 width: 30%;}

.tablet-7-10 {
 width: 70%;}

.tablet-9-10 {
 width: 90%;}

.tablet-1-12 {
 width: 8.333%;}

.tablet-5-12 {
 width: 41.666%;}

.tablet-7-12 {
 width: 58.333%;}

.tablet-11-12 {
 width: 91.666%;}
}

@media only screen and (min-width: 1024px) {
.desktop-1 {
 width: 100%;}

.desktop-1-2, .desktop-2-4, .desktop-3-6, .desktop-4-8, .desktop-5-10, .desktop-6-12 {
 width: 50%;}

.desktop-1-3, .desktop-2-6, .desktop-4-12 {
 width: 33.333%;}

.desktop-2-3, .desktop-4-6, .desktop-8-12 {
 width: 66.666%;}

.desktop-1-4, .desktop-2-8, .desktop-3-12 {
 width: 25%;}

.desktop-3-4, .desktop-6-8, .desktop-9-12 {
 width: 75%;}

.desktop-1-5, .desktop-2-12 {
 width: 20%;}

.desktop-2-5, .desktop-4-10 {
 width: 40%;}

.desktop-3-5, .desktop-6-10 {
 width: 60%;}

.desktop-4-5, .desktop-8-10 {
	width: 80%;
	font-size: medium;
}

.desktop-1-6, .desktop-2-12 {
 width: 16.666%;}

.desktop-5-6, .desktop-10-12 {
 width: 83.333%;}

.desktop-1-8 {
 width: 12.5%;}

.desktop-3-8 {
 width: 37.5%;}

.desktop-5-8 {
 width: 62.5%;}

.desktop-7-8 {
 width: 87.5%;}

.desktop-1-10 {
 width: 10%;}

.desktop-3-10 {
 width: 30%;}

.desktop-7-10 {
 width: 70%;}

.desktop-9-10 {
 width: 90%;}

.desktop-1-12 {
 width: 8.333%;}

.desktop-5-12 {
 width: 41.666%;}

.desktop-7-12 {
 width: 58.333%;}

.desktop-11-12 {
 width: 91.666%;}
}

/*------------------------------------*\
  $CLEARFIX
\*------------------------------------*/
.cf, .gc, .nav, .media {
	zoom: 1;
	margin-bottom: 0px;
}
.cf:before, .gc:before, .nav:before, .media:before, 
.cf:after, .gc:after, .nav:after, .media:after {
 content: " ";
 display: table; 
}
.cf:after, .gc:after, .nav:after, .media:after {clear: both;}