/*grid overrides:*/

.grid-container.grid-container--unfloat .grid-row [class*='col-'],
.grid-container .grid-row [class*='col-'].column--unfloat,
.grid-container .grid-row.column--unfloat * {
  float: none;
}

.grid-container {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  margin-right: auto;
  margin-left: auto;
}

.grid-container .grid-row {
  width: 100%;
}
.grid-container .grid-row [class*="col-"] {
  padding-left: 0.75%;
  padding-right: 0.75%;
  float: left;
  position: relative;
}
/*GRID CSS - Contains the grid - different widths for different breakpoints.\
	This is ideally the top-most container that most/all of the grid will be in. there is a full-width modifier class below if necessary.*/

[class*="breakpoint-"] .grid-container.grid-container--condensed {
	max-width: 72rem;
}
/*(max-width: 599px)*/
.breakpoint-mobile-only .grid-container,
.breakpoint-phablet .grid-container {
  width: 90%;
}
/*(min-width: 600px) and (max-width: 1170px)*/
.breakpoint-tablet-landscape .grid-container, 
.breakpoint-tablet-portrait .grid-container {
  width: 85%;
}

/*(min-width: 900px)*/
.breakpoint-desktop .grid-container, 
.breakpoint-widescreen .grid-container {
  width: 74%;
  max-width: 1170px;
}

/*Added div selector to increase specificity just enough to override breakpoint class selector for nested grid items.*/
div.grid-container.grid-container--fw {
  width: 100%;
}


/*style to center grid*/
.grid-container--center {
  margin-left: auto;
  margin-right: auto;

}

.grid-container {
    width: 74%;
    max-width: 1170px;
}

/*grid-row elements*/
.grid-row {
  padding-bottom: 1rem;
  position: relative;
  width: 100%;
}
  .grid-row.grid-row--extra-top-padding {
    margin-top: 1rem;
    margin-bottom: unset;
  }
  .grid-row.grid-row--extra-padding {
    margin-top: 1rem;
    margin-bottom: 5rem;
  }
.grid-row.grid-row--no-padding {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.col-no-left-padding {
  padding-left: 0;
}

.grid-container .grid-row .grid-row--small-left-padding {
  padding-left: 0.5%;
}

.grid-row.grid-row--equal-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

.breakpoint-mobile-only .grid-row.grid-row--equal-height:not(.timeline-row.grid-row--equal-height),
.breakpoint-tablet-portrait .grid-row.grid-row--equal-height:not(.timeline-row.grid-row--equal-height) {
  display: block;
}

.grid-row:not(.clearless):before, 
.grid-row:not(.clearless):after,
[class*='col-']:not(.clearless):before,
[class*='col-']:not(.clearless):after {
  content: "";
  display: table;
  clear: both;
}

/*[class*='section'] [class*='col-']{
  min-height: var(--tile-standard);
}*/

/*create block elements for top level anchors.*/
a.[class*='col-'] {
  display: block;
}

.grid-row [class*='col-']:last-of-type {
  margin-right: 0;
}
.grid-row [class*='col-']:only-child {
  margin-right: 0;
}

.breakpoint-mobile-only .grid-row [class*='col-']:not([class*='collapsible']),
.breakpoint-tablet-portrait .grid-row [class*='col-']:not([class*='collapsible']) {
  margin-bottom: 1%;

}


.breakpoint-desktop .col-l-1,
.breakpoint-widescreen .col-l-1,
.col-m-1,
.breakpoint-mobile-only .col-s-1,
.breakpoint-retina.breakpoint-mobile-only .col-s-1  {
  width: 8.3%;
}
.breakpoint-desktop .col-l-2,
.breakpoint-widescreen .col-l-2,
.col-m-2,
.breakpoint-mobile-only .col-s-2,
.breakpoint-widescreen .col-l-1,
.breakpoint-retina.breakpoint-mobile-only .col-s-2  {
  width: 16.6%;
}
.breakpoint-desktop .col-l-3,
.breakpoint-widescreen .col-l-3,
.col-m-3,
.breakpoint-mobile-only .col-s-3,
.breakpoint-retina.breakpoint-mobile-only .col-s-3 {
  width: 25%;
}
.breakpoint-desktop .col-l-4,
.breakpoint-widescreen .col-l-4,
.col-m-4,
.breakpoint-mobile-only .col-s-4,
.breakpoint-retina.breakpoint-mobile-only .col-s-4 {
  width: 33.3%;
}
.breakpoint-desktop .col-l-5,
.breakpoint-widescreen .col-l-5,
.col-m-5,
.breakpoint-mobile-only .col-s-5,
.breakpoint-retina.breakpoint-mobile-only .col-s-5 {
  width: 41.6%;
}
.breakpoint-widescreen .col-l-6,
.breakpoint-desktop .col-l-6,
.col-m-6 {
  width: 50%;
}
.breakpoint-mobile-only .col-s-6,
.breakpoint-widescreen .col-l-7,
.breakpoint-retina.breakpoint-mobile-only .col-s-6,
.breakpoint-tablet-portrait .col-s-6,
.col-m-6 {
  width: 49.5%;
}
.breakpoint-desktop .col-l-7,
.breakpoint-widescreen .col-l-8,
.col-m-7,
.breakpoint-mobile-only .col-s-7,
.breakpoint-retina.breakpoint-mobile-only .col-s-7 {
  width: 58.3%;
}
.breakpoint-widescreen .col-l-8,
.breakpoint-desktop .col-l-8,
.col-m-8,
.breakpoint-mobile-only .col-s-8,
.breakpoint-retina.breakpoint-mobile-only .col-s-8 {
  width: 66.6%;
}
.breakpoint-widescreen .col-l-9,
.breakpoint-desktop .col-l-9,
.col-m-9,
.breakpoint-mobile-only .col-s-9,
.breakpoint-retina.breakpoint-mobile-only .col-s-9 {
  width: 75%;
}
.breakpoint-widescreen .col-l-10,
.breakpoint-desktop .col-l-10,
.col-m-10,
.breakpoint-mobile-only .col-s-10,
.breakpoint-retina.breakpoint-mobile-only .col-s-10 {
  width: 83.3%;
}
.breakpoint-widescreen .col-l-11,
.breakpoint-desktop .col-l-11,
.col-m-11,
.breakpoint-mobile-only .col-s-11,
.breakpoint-retina.breakpoint-mobile-only .col-s-11 {
  width: 91.6%;
}
.breakpoint-widescreen .col-l-12,
.breakpoint-desktop .col-l-12,
.breakpoint-tablet-landscape .col-m-12,
.breakpoint-mobile-only [class*="col-m-"],
/*.breakpoint-tablet-portrait [class*="col-m-"],
*/.breakpoint-mobile-only .col-s-12,
.breakpoint-tablet-portrait .col-s-12,
.breakpoint-retina.breakpoint-mobile-only .col-s-12 {
  width: 100%;
}



/*'Push' styles -- pushes the div left by X amount of columns without adding in another div*/
.breakpoint-mobile-only [class*="col-push-"],
.breakpoint-tablet-portrait [class*="col-push-"] {
  left: auto;
  margin-left: 0;
}
.grid-row [class*="col-push-"] {
    position: relative;
    margin-left: 2%; /*to account for padding lost*/
}
.col-push-1 {
  left: 6.5%;
}
.col-push-2 {
  left: 15%;
}
.col-push-3 {
  left: 22.75%;
}
.col-push-4 {
  left: 32%;
}
.col-push-5 {
  left: 40.5%;
}
.col-push-6 {
  left: 50%;
}
.col-push-7 {
  left: 57.5%;
}
.col-push-8 {
  left: 66%;
}
.col-push-9 {
  left: 74.5%;
}
.col-push-10 {
  left: 81%;
}
.col-push-11 {
  left: 91.5%;
}
.col-push-12 {
  left: 100%;
}