.flex-box { display: flex; align-items: normal; justify-content: space-around; flex-wrap: wrap; }
.flex-child { box-sizing: border-box; margin: 0.5%; }
.flex-1 .flex-child { width: 99%;}
.flex-2 .flex-child { width: 49%;}
.flex-3 .flex-child { width: 32.33%;}
.flex-4 .flex-child { width: 24%;}
.flex-5 .flex-child { width: 19%;}

.clear-float { clear: both; }
.float-break { display: none; width: 1px; height: 1px;/* float: left; */ }
.template-content-wrapper { display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; }
.ele-template { text-align: left; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
.class-one { width: 99%; padding: 2%; margin: 0 1%; min-height: 10px; }
.class-one.no-margin { width: 100%; margin: 0; }
.class-two { width: 49%;/* float: left; */ margin: 0 0.5%; padding: 2%; min-height: 10px; }
.class-two.no-margin { width: 50%; margin: 0; }
.class-three { width: 32.33%;/* float: left; */ margin: 0 0.5%; padding: 2%; min-height: 10px; }
.class-three.no-margin { width: 33.33%; margin: 0; }
.class-four { width: 24%;/* float: left; */ margin: 0 0.5%; padding: 2%; min-height: 10px; }
.class-four.no-margin { width: 25%; margin: 0; }
.class-five { width: 19%;/* float: left; */ margin: 0 0.5%; padding: 2%; min-height: 10px; }
.class-five.no-margin { width: 20%; margin: 0; }
.styled-table .ele-template { padding-bottom: 10px; }
.reverse { flex-flow: row-reverse; }
.reset-height { align-items: normal; }
.flex-content-top, .flex-content-top .flex-box { align-items: normal; }

 @media screen and (max-width:960px) {
.class-two { float: none; width: 100% !important; margin: 1% 0; padding: 2%; }
.class-three { float: none; width: 100% !important; margin: 1% 0; padding: 2%; }
.float-break { display: block; clear: both; width: 100%; }
.class-four { width: 49% !important;/* float: left; */ margin: 1% 0.5%; padding: 2%; min-height: 10px; }
.class-five { float: none; width: 100% !important; margin: 1% 0; padding: 2%; }
.reverse .class-two, .reverse .class-three, .reverse .class-four, .reverse .class-two { float:none;}
.template-content-wrapper { display: block;}
	 

.flex-4 .flex-child, .flex-2 .flex-child { width: 49%;}
.flex-5 .flex-child, .flex-3 .flex-child, .flex-1 .flex-child { width: 100%;}
	 .flex-child { margin: 20px auto; }
}

 @media screen and (max-width:760px) {
.class-four { float: none; width: 100% !important; margin: 1% 0; padding: 2%; }
.flex-box { display: block;}
.flex-4 .flex-child, .flex-2 .flex-child { width: 100%;}
}