/* Extrinsic styles
////////////////////////// */

.grid {
    overflow: auto; /* does not collapse float contents */
}
.grid:after,
.clear-float {
    content: "";
    display: table;
    clear: both;
}

.grid [class*='span-'],
.grid .span-full,
.grid .span-1-1,
.grid .span {
    width:100%;
    float: left;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0.4rem;
}

/* Gutters */
.grid.no-gutters > [class*='span-'] { padding: 0; }
.grid.small-gutters > [class*='span-'] { padding: 0.5rem; }
.grid.medium-gutters > [class*='span-'] { padding: 1.4rem; }
.grid.large-gutters > [class*='span-'] { padding: 2rem; }

/* Clear column to the left */
.grid [class*='span-'].reset { clear: left; }


/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
 .grid.reset-mobile [class*='span-'] { clear: left;width:100%; }
 .grid [class*='span-'].reset-mobile { clear: left;width:100%; }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {  }

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {  }



/* Tenths */
.grid .span-1-10  { width: 10%; }
.grid .span-2-10  { width: 20%; }
.grid .span-3-10 { width: 30%; }
.grid .span-4-10 { width: 40%; }
.grid .span-6-10 { width: 60%; }
.grid .span-7-10 { width: 70%; }
.grid .span-8-10 { width: 80%; }
.grid .span-9-10 { width: 90%; }

/* Fifths */
.grid .span-1-5 { width: 20%; }
.grid .span-2-5 { width: 40%; }
.grid .span-3-5 { width: 60%; }
.grid .span-4-5 { width: 80%; }

/* Fourths */
.grid .span-1-4 { width: 25%; }
.grid .span-3-4 { width: 75%; }

/* Thirds */
.grid .span-1-3 { width: 33.33333%; }
.grid .span-2-3 { width: 66.66666%; }

/* Half */
.grid .span-half,
.grid .span-1-2,
.grid .span-2-4,
.grid .span-5-10 { width: 50%; }