/* ==========================================================================
   Flexbox Grid System
   ========================================================================== */
.rows { 
    padding: 0; 
    margin: 0 -10px 10px -10px; 
    list-style: none;  
    display: flex; 
    flex-wrap: wrap; 
    align-content: space-between;  
}
.rows > * {  
    flex-grow: 1; 
    flex: 1; 
    flex-basis: auto;  
    margin: 10px; 
    box-sizing: border-box; 
    overflow: hidden;  
}
.rows:last-child { 
    margin-bottom: 0; 
}

.rows.auto { 
    flex-wrap: nowrap; 
}
.rows.auto > * { 
    flex-grow: 1; 
    flex: 1;  
}

.flex-auto > * { 
    flex-basis: auto; 
}

.flex-center { 
    justify-content: center; 
    align-items: center; 
}

.full { 
    flex-basis: 100%; 
    box-sizing: border-box; 
}

/* Specific Widths */
@media all and (min-width: 800px) {
	.flex_77 { flex-basis: calc(77% - 20px) !important; }
}
@media all and (min-width: 600px) {
	.flex_77 { flex-basis: calc(50% - 20px) !important; }
}

/* Responsive Grid Behavior */
@media all and (max-width: 800px) {
  .rows.auto { flex-wrap: wrap; } 	
  .rows.auto > * { 
      flex-grow: 1; 
      flex: 1; 
      flex-basis: calc(50% - 20px);  
  }	
}

@media all and (max-width: 600px) {
 .rows > * { flex-basis: calc(50% - 20px); }	
 .flextext > * {  flex-basis: calc(100% - 20px); } 
}

@media all and (max-width: 500px) {
	.rows { margin: 0 -5px 5px -5px; }
	.rows > * {  margin: 5px; flex-basis: 100%; }
	.rows.auto > * { flex-basis: 100%; }
}