body{
    font-family: sans-serif;
    color: #555;
    background-color: #eee;
    line-height : 1.5em;
}

header, footer {
    line-height: 2;
	text-align: center;
	color: #555;
	background-color: #333;
	border: 1px solid rgba(225,0,0,0.7);
}
h1 {
    font-size: 2.5em;
    color: #DD5735;
}
.parent {
    border: 2px dashed rgba(225,0,0,0.5);
}
a{
    text-decoration : none;
    color : rgba(225,0,0,0.7) ;
}
h2{
    
    font-size: 2em;
    color: #333;
}
h3 {
    font-size: 1.5em;
}
ul[class*="test"] {
    padding: 0;
    list-style: none;
}
.test-default{   
    display: flex;
}
.test-direction-row-reverse {
    display: flex;
    flex-direction: row-reverse;
}    
.test-direction-column{
    display: flex;
    flex-direction: column;
}
.test-direction-column-reverse{
    display: flex;
    flex-direction: column-reverse;
}
.test-nowrap{
    display: flex;
    flex-wrap: nowrap;
    width: 300px;
}
.test-wrap{
    display: flex;
    flex-wrap:wrap;
    width: 300px;
}
.test-align-items-center{
    display :flex;
    align-items : center;
}
[class*="test-align-items"] li:nth-child(odd) {
    line-height: 4em;
}
.test-align-items-flex-start{
    display :flex;
    align-items : flex-start;
}
.test-align-items-flex-end{
    display :flex;
    align-items : flex-end;
}
.test-justify-content-center{
    display : flex;
    justify-content : center;
}
.test-justify-content-flex-start{
    display : flex;
    justify-content : flex-start;
}
.test-justify-content-flex-end{
    display : flex;
    justify-content : flex-end;
}
.test-justify-content-space-between{
    display : flex;
    justify-content : space-between;
}
.test-justify-content-space-around{
    display : flex;
    justify-content : space-around;
}
.test-justify-content-space-evenly{
    display : flex;
    justify-content : space-evenly;
}
.test-order{
    display:flex;
}
.test-grow{
    display : flex;
}
.item {
  flex-grow: 10;
}
.test-shrink{
    display : flex;
}
.test-grow{
    display :flex;
}
.test-grow > * {
	flex-grow: 1;
	flex-basis: 1em;
}
.grow2{
    flex-grow: 2;
}
.test-grow .x2 {
	flex-grow: 2;
}
.test-grow li:nth-child(3) {
	flex-grow: 2;
}



.gutter{
    margin :1em;
}
    

*{
    box-sizing : border-box;
}
.container {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}
.parent {
    border: 1px dashed #DD5735;
}
ul{
    margin: 1em 1em 0px 0px;
    padding: 40px;
}

.card,
.cards > * {
	padding: 2em;
	background-color: #fff;
	border: 1px solid rgba(0,0,0,0.2);
}