.container {
  margin: 0 auto;
  max-width: 1230px;
  padding-left: 30px;
  padding-right: 30px;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 1000px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 700px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: -30px 0 0 -30px;
  box-sizing: border-box;
}

@media (max-width: 1000px) {
  .grid {
    margin: -20px 0 0 -20px;
  }
}

@media (max-width: 700px) {
  .grid {
    margin: -15px 0 0 -15px;
  }
}

.grid .span1,
.grid .span2,
.grid .span3,
.grid .span4,
.grid .span5,
.grid .span6,
.grid .span7,
.grid .span8,
.grid .span9,
.grid .span10,
.grid .span11,
.grid .span12,
.grid .span1of5 {
  padding: 30px 0 0 30px;
  box-sizing: border-box;
}

@media (max-width: 1000px) {
	.grid .span1,
	.grid .span2,
	.grid .span3,
	.grid .span4,
	.grid .span5,
	.grid .span6,
	.grid .span7,
	.grid .span8,
	.grid .span9,
	.grid .span10,
	.grid .span11,
	.grid .span12,
	.grid .span1of5 {
		padding: 20px 0 0 20px;
	}
}

@media (max-width: 700px) {
	.grid .span1,
	.grid .span2,
	.grid .span3,
	.grid .span4,
	.grid .span5,
	.grid .span6,
	.grid .span7,
	.grid .span8,
	.grid .span9,
	.grid .span10,
	.grid .span11,
	.grid .span12,
	.grid .span1of5 {
		padding: 15px 0 0 15px;
	}
}

.grid .span1 {
  flex: 0 0 8.3333333333%;
}
.grid .span2 {
  flex: 0 0 16.6666666667%;
}
.grid .span3 {
  flex: 0 0 25%;
}
.grid .span4 {
  flex: 0 0 33.3333333333%;
}
.grid .span5 {
  flex: 0 0 41.6666666667%;
}
.grid .span6 {
  flex: 0 0 50%;
}
.grid .span7 {
  flex: 0 0 58.3333333333%;
}
.grid .span8 {
  flex: 0 0 66.6666666667%;
}
.grid .span9 {
  flex: 0 0 75%;
}
.grid .span10 {
  flex: 0 0 83.3333333333%;
}
.grid .span11 {
  flex: 0 0 91.6666666667%;
}
.grid .span12 {
  flex: 0 0 100%;
}
.grid .span1of5 {
  flex: 0 0 20%;
}

@media (max-width: 1230px) {
  .grid .md\:span1 {
    flex: 0 0 8.3333333333%;
  }
  .grid .md\:span2 {
    flex: 0 0 16.6666666667%;
  }
  .grid .md\:span3 {
    flex: 0 0 25%;
  }
  .grid .md\:span4 {
    flex: 0 0 33.3333333333%;
  }
  .grid .md\:span5 {
    flex: 0 0 41.6666666667%;
  }
  .grid .md\:span6 {
    flex: 0 0 50%;
  }
  .grid .md\:span7 {
    flex: 0 0 58.3333333333%;
  }
  .grid .md\:span8 {
    flex: 0 0 66.6666666667%;
  }
  .grid .md\:span9 {
    flex: 0 0 75%;
  }
  .grid .md\:span10 {
    flex: 0 0 83.3333333333%;
  }
  .grid .md\:span11 {
    flex: 0 0 91.6666666667%;
  }
  .grid .md\:span12 {
    flex: 0 0 100%;
  }
}
@media (max-width: 1000px) {
  .grid .sm\:span1 {
    flex: 0 0 8.3333333333%;
  }
  .grid .sm\:span2 {
    flex: 0 0 16.6666666667%;
  }
  .grid .sm\:span3 {
    flex: 0 0 25%;
  }
  .grid .sm\:span4 {
    flex: 0 0 33.3333333333%;
  }
  .grid .sm\:span5 {
    flex: 0 0 41.6666666667%;
  }
  .grid .sm\:span6 {
    flex: 0 0 50%;
  }
  .grid .sm\:span7 {
    flex: 0 0 58.3333333333%;
  }
  .grid .sm\:span8 {
    flex: 0 0 66.6666666667%;
  }
  .grid .sm\:span9 {
    flex: 0 0 75%;
  }
  .grid .sm\:span10 {
    flex: 0 0 83.3333333333%;
  }
  .grid .sm\:span11 {
    flex: 0 0 91.6666666667%;
  }
  .grid .sm\:span12 {
    flex: 0 0 100%;
  }
}
@media (max-width: 700px) {
  .grid .xs\:span1 {
    flex: 0 0 8.3333333333%;
  }
  .grid .xs\:span2 {
    flex: 0 0 16.6666666667%;
  }
  .grid .xs\:span3 {
    flex: 0 0 25%;
  }
  .grid .xs\:span4 {
    flex: 0 0 33.3333333333%;
  }
  .grid .xs\:span5 {
    flex: 0 0 41.6666666667%;
  }
  .grid .xs\:span6 {
    flex: 0 0 50%;
  }
  .grid .xs\:span7 {
    flex: 0 0 58.3333333333%;
  }
  .grid .xs\:span8 {
    flex: 0 0 66.6666666667%;
  }
  .grid .xs\:span9 {
    flex: 0 0 75%;
  }
  .grid .xs\:span10 {
    flex: 0 0 83.3333333333%;
  }
  .grid .xs\:span11 {
    flex: 0 0 91.6666666667%;
  }
  .grid .xs\:span12 {
    flex: 0 0 100%;
  }
}