/*------------------------------------*\   $GRIGLIA  \*------------------------------------*/  /* .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%;}  /*------------------------------------*\   $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%;} }  @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%;} }  @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%;} }  /*------------------------------------*\     $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;}