/*------------------------------------*\
   GRIGLIA v .1.1.1 
\*------------------------------------*/

/* .blocco = grid container (racchiude gli elementi che compongono la griglia) */
.blocco {}
.blocco--rev .col {float: right;}
.blocco > .blocco {margin-left: 0;}
.col { float: left; position: relative; }

/*------------------------------------*\
  LARGHEZZE
\*------------------------------------*/
.def-1, .def-1-1 { width: 100%;}
.def-1-2, .def-2-4, .def-3-6, .def-4-8, .def-5-10, .def-6-12 { width: 50%;}
.def-1-3, .def-2-6, .def-4-12 { width: 33.333%;}
.def-2-3, .def-4-6, .def-8-12 { width: 66.666%;}
.def-1-4, .def-2-8, .def-3-12 { width: 25%;}
.def-3-4, .def-6-8, .def-9-12 { width: 75%;}
.def-1-5, .def-2-10 { width: 20%;}
.def-2-5, .def-4-10 { width: 40%;}
.def-3-5, .def-6-10 { width: 60%;}
.def-4-5, .def-8-10 { width: 80%;}
.def-1-6, .def-2-12 { width: 16.666%;}
.def-5-6, .def-10-12 { width: 83.333%;}
.def-1-8 { width: 12.5%;}
.def-3-8 { width: 37.5%;}
.def-5-8 { width: 62.5%;}
.def-7-8 { width: 87.5%;}
.def-1-10 { width: 10%;}
.def-3-10 { width: 30%;}
.def-7-10 { width: 70%;}
.def-9-10 { width: 90%;}
.def-1-12 { width: 8.333%;}
.def-5-12 { width: 41.666%;}
.def-7-12 { width: 58.333%;}
.def-11-12 { width: 91.666%;}
.def-1-20 { width: 5%;}
/*------------------------------------*\
  BREAKPOINT E MEDIA QUERY
\*------------------------------------*/

@media only screen and (min-width: 100px) and (max-width: 599px) {
.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%;}
.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%;}
.mobile-2-10 { width: 5%;}
}

@media only screen and (min-width: 600px) 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%;}
.tablet-2-10 { width: 5%;}
}

@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%;}
.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%;}
.desktop-2-10 { width: 5%;}
}

/*------------------------------------*\
    $PUSH
\*------------------------------------*/
.push, .push--1-2, .push--2-4, .push--3-6, .push--4-8, .push--6-12, .push--1-3, .push--2-6, .push--4-12, .push--2-3, .push--4-6, .push--8-12, .push--1-4, .push--2-8, .push--3-12, .push--3-4, .push--6-8, .push--9-12, .push--1-5, .push--2-10, .push--2-5, .push--4-10, .push--3-5, .push--6-10, .push--4-5, .push--8-10, .push--1-6, .push--2-12, .push--5-6, .push--10-12, .push--1-8, .push--3-8, .push--5-8, .push--7-8, .push--1-10, .push--3-10, .push--5-10, .push--7-10, .push--9-10, .push--1-12, .push--5-12, .push--7-12, .push--11-12 {position: relative; }
.push--1-2, .push--2-4, .push--3-6, .push--4-8, .push--6-12 {  left: 50%; }
.push--1-3, .push--2-6, .push--4-12 {  left: 33.333%; }
.push--2-3, .push--4-6, .push--8-12 {  left: 66.666%; }
.push--1-4, .push--2-8, .push--3-12 {  left: 25%; }
.push--3-4, .push--6-8, .push--9-12 {  left: 75%; }
.push--1-4, .push--2-10 {  left: 20%; }
.push--2-5, .push--4-10 {  left: 40%; }
.push--3-5, .push--6-10 {  left: 60%; }
.push--4-5, .push--8-10 {  left: 80%; }
.push--1-6, .push--2-12 {  left: 16.666%; }
.push--5-6, .push--10-12 {  left: 83.333%; }
.push--1-8 {  left: 12.5%; }
.push--3-8 {  left: 37.5%; }
.push--5-8 {  left: 62.5%; }
.push--7-8 {  left: 87.5%; }
.push--1-10 {  left: 10%; }
.push--3-10 {  left: 30%; }
.push--5-10 {  left: 50%; }
.push--7-10 {  left: 70%; }
.push--9-10 {  left: 90%; }
.push--1-12 {  left: 8.333%; }
.push--5-12 {  left: 41.666%; }
.push--7-12 {  left: 58.333%; }
.push--11-12 {  left: 91.666%; }

/*------------------------------------*\
    $PULL
\*------------------------------------*/

.pull, .pull--1-2, .pull--2-4, .pull--3-6, .pull--4-8, .pull--6-12, .pull--1-3, .pull--2-6, .pull--4-12, .pull--2-3, .pull--4-6, .pull--8-12, .pull--1-4, .pull--2-8, .pull--3-12, .pull--3-4, .pull--6-8, .pull--9-12, .pull--1-4, .pull--2-10, .pull--2-5, .pull--4-10, .pull--3-5, .pull--6-10, .pull--4-5, .pull--8-10, .pull--1-6, .pull--2-12, .pull--5-6, .pull--10-12, .pull--1-8, .pull--3-8, .pull--5-8, .pull--7-8, .pull--1-10, .pull--3-10, .pull--5-10, .pull--7-10, .pull--9-10, .pull--1-12, .pull--5-12, .pull--7-12, .pull--11-12 {position: relative;}
.pull--1-2, .pull--2-4, .pull--3-6, .pull--4-8, .pull--6-12 {  right: 50%; }
.pull--1-3, .pull--2-6, .pull--4-12 {  right: 33.333%; }
.pull--2-3, .pull--4-6, .pull--8-12 {  right: 66.666%; }
.pull--1-4, .pull--2-8, .pull--3-12 {  right: 25%; }
.pull--3-4, .pull--6-8, .pull--9-12 {  right: 75%; }
.pull--1-5, .pull--2-10 {  right: 20%; }
.pull--2-5, .pull--4-10 {  right: 40%; }
.pull--3-5, .pull--6-10 {  right: 60%; }
.pull--4-5, .pull--8-10 {  right: 80%; }
.pull--1-6, .pull--2-12 {  right: 16.666%; }
.pull--5-6, .pull--10-12 {  right: 83.333%; }
.pull--1-8 {  right: 12.5%; }
.pull--3-8 {  right: 37.5%; }
.pull--5-8 {  right: 62.5%; }
.pull--7-8 {  right: 87.5%; }
.pull--1-10 {  right: 10%; }
.pull--3-10 {  right: 30%; }
.pull--5-10 {  right: 50%; }
.pull--7-10 {  right: 70%; }
.pull--9-10 {  right: 90%; }
.pull--1-12 {  right: 8.333%; }
.pull--5-12 {  right: 41.666%; }
.pull--7-12 {  right: 58.333%; }
.pull--11-12 {  right: 91.666%; }

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