/*--------------------------------------------------------------
		dynamics-Grid
--------------------------------------------------------------*/

.dynamic-grid::before, .dynamic-grid::after {
    content: '';
    display: table;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}
.dynamic-grid { 
	position: relative;
	display: block;
	width: 90%;
	max-width: 90%;
	padding: 0; 
	margin: 0 auto; 
	white-space: normal;
	padding-bottom: 1rem;
}
.dynamic-grid .item { 
	position: relative;
	display: -webkit-box;
  	display: -webkit-flex;
  	display: -ms-flexbox;
  	display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
	width: 100%;
	padding: 0; 
	margin: 0 auto;	
}
.dynamic-grid .item.center {
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 100%;
    padding: 0; 
    margin: 0;
}
.dynamic-grid .item [class^='o-'] { 
	-webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;  
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}
.o-x {
	margin-right: 0;
	margin-bottom: 5vw;
}
.o-z {
	margin-right: 0;
	margin-bottom: 5vw;
}
.o-z:last-child {
	margin-right: 0 !important;
	margin-bottom: 0 !important;
}

@media only screen and (min-width: 19.938em) { /* 319px */
	.dynamic-grid { 
		padding: 1rem 0 1rem 0;
	}
	.o-x  {
		-webkit-flex: 0 1 100%;
   		-ms-flex: 0 1 100%;
		flex: 0 1 100%;
		width: 100%;
	}
	.o-z  {
		-webkit-flex: 1 1 100%;
   		-ms-flex: 1 1 100%;
		flex: 1 1 100%;
	}
}
@media only screen and (min-width: 25.813em) { /* 413px */
}
@media only screen and (min-width: 33.438em) { /* 535px */
	.o-x  {
		-webkit-flex: 0 1 47.25%;
   		-ms-flex: 0 1 47.25%;
		flex: 0 1 47.25%;
		width: 47.25%;
	}
}
@media only screen and (min-width: 41.62em) { /* 666px */
	.dynamic-grid { 
		padding: 2rem 0 2rem 0;
	}
	.dynamic-grid .item.center {
    	-webkit-flex-direction: row;
    	-ms-flex-direction: row;
    	flex-direction: row;
    }
	.o-x  {
		-webkit-flex: 0 1 47.25%;
   		-ms-flex: 0 1 47.25%;
		flex: 0 1 47.25%;
		width: 47.25%;
	}
	.o-z  {
		-webkit-flex: 1 1 47.25%;
   		-ms-flex: 1 1 47.25%;
		flex: 1 1 47.25%;
		width: 47.25%;
		margin-right: 5%;
		margin-bottom: 0;
	}
	.o-x {
		margin-right: 5%;
	}
	.o-x:nth-child(2),
	.o-x:nth-child(4),
	.o-x:nth-child(6),
	.o-x:nth-child(8),
	.o-x:nth-child(10),
	.o-x:nth-child(12) {
		margin-right: 0 ;
	}
}
@media only screen and (min-width: 61.250em) { /* 980px */
	.o-x  {
		-webkit-flex: 0 1 29.65%;
   		-ms-flex: 0 1 29.65%;
		flex: 0 1 29.65%;
		width: 29.65%;
	}
	.o-x,
	.o-x:nth-child(2),
	.o-x:nth-child(4),
	.o-x:nth-child(6),
	.o-x:nth-child(8),
	.o-x:nth-child(10),
	.o-x:nth-child(12) {
		margin-right: 5%;
	}
	.o-x:nth-child(3),
	.o-x:nth-child(6),
	.o-x:nth-child(9),
	.o-x:nth-child(12),
	.o-x:nth-child(15),
	.o-x:nth-child(15) {
		margin-right: 0;
	}
}
@media only screen and (min-width: 80.000em) { /* 1280px */
	.dynamic-grid { 
		width: 85%;
		max-width: 85%;
	}
}
@media only screen and (min-width: 87.500em) { 
	.dynamic-grid  { 
		width: 80%;
		max-width: 80%;
	}
}

