/********
	RESPONSIVE FLEX SYSTEM
********/

.flex {display:flex; flex-wrap:wrap;}
.flex-justify-space-between {justify-content:space-between;}
.flex-justify-end {justify-content:flex-end;}
.flex-align-start {align-items:flex-start;}
.flex-align-end {align-items:flex-end;}
.flex-nowrap {flex-wrap:nowrap;}

.flex5 { width: 5%;}
.flex10 { width: 10%;}
.flex15 { width: 15%;}
.flex20 { width: 20%;}
.flex33 { width: 33.33332%;}
.flex25 { width: 25%;}
.flex30 { width: 30%;}
.flex35 { width: 35%;}
.flex40 { width: 40%;}
.flex45 { width: 45%;}
.flex47 { width: 47.5%;}
.flex50 { width: 50%;}
.flex55 { width: 55%;}
.flex60 { width: 60%;}
.flex65 { width: 65%;}
.flex70 { width: 70%;}
.flex75 { width: 75%;}
.flex80 { width: 80%;}
.flex85 { width: 85%;}
.flex90 { width: 90%;}
.flex95 { width: 95%;}
.flex100 { width: 100%;}


@media screen and (max-width: 768px) {

  .flex5 { width: 100%;}
  .flex10 { width: 100%;}
  .flex15 { width: 100%;}
  .flex20 { width: 100%;}
  .flex33 { width: 100%;}
  .flex25 { width: 100%;}
  .flex30 { width: 100%;}
  .flex35 { width: 100%;}
  .flex40 { width: 100%;}
  .flex45 { width: 100%;}
  .flex47 { width: 100%;}
  .flex50 { width: 100%;}
  .flex55 { width: 100%;}
  .flex60 { width: 100%;}
  .flex65 { width: 100%;}
  .flex70 { width: 100%;}
  .flex75 { width: 100%;}
  .flex80 { width: 100%;}
  .flex85 { width: 100%;}
  .flex90 { width: 100%;}
  .flex95 { width: 100%;}
  .flex100 { width: 100%;}

}