/*GRID SYSTEM*/

/* rows */
.row {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  z-index:999;
  padding:0 30px;
}

section .row {
  padding:30px;
}

.row {
  max-width: 1020px;
}

.row-extra-small {
  max-width: 550px;
}

.row-small {
  max-width: 680px;
}

.row-large {
  max-width: 1220px;
}

.row-xlarge {
  max-width: 1400px;
}

.row-centered {
  justify-content: space-around;
}

@media screen and (max-width: 1439px) {
  .row-large {
    max-width: 1120px;
  }
  .row-xlarge {
    max-width: 1300px;
  }
}

.row-small .row-large {}

/* nested rows have now outer padding */

.row .row {
  padding: 0px;
}

/* cols */

.col {
  flex: 1;
  margin-right: 75px;
}
.row-small-gutter .col {
  margin-right: 35px;
}



.row-wide-gutter > .col {
  margin-right:150px;
}

.col:last-child {
  margin-right: 0px;
}

.col-half {
  flex: 0.5;
}

.col-quarter {
  flex: 0.25;
}

.col-double {
  flex: 2;
}

.col-centered {
  text-align: center;
}

.col-pushed-down {
  margin-top:150px;
}

@media screen and (max-width: 768px) {
  .col {
margin-bottom:40px;
  }
}

@media screen and (max-width: 768px) {
  .col {
    flex-basis: 100%;
  }
}

.row.vertical-center .col {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.grid-row {
  display:grid;
}


@media screen and (max-width: 768px) {
  .row-wide-gutter .col {
    margin-right: 20px;
  }

  .col-pushed-down {
    margin-top: 0px;
  }
}


@media screen and (max-width: 768px) {
	.row .col {
    margin-right:0px;
  }
}