/* * * Simple Flexbox Library Beta v1.0 * */ /* Global Styles - Start */ * { box-sizing: border-box; } html { margin: 0; padding: 0; } body { margin: 0; padding: 0; font-family: 'Arial', sans-serif; } .main-container { max-width: 100%; height: auto; display: block; margin: 0 auto; padding: 0; } input[type="button"], input[type="submit"] { -webkit-appearance: none; white-space: normal; } input[type="submit"]:hover { cursor: pointer; } /* Global Classes */ .display-none{ display: none; } .display-block{ display: block; } .display-inline{ display: inline; } /* Flex Container (Row) - Start */ .flex-row { width: 100%; letter-spacing: normal; display: flex; flex-direction: row; flex-wrap: wrap; } .flex-row-single { width: 100%; letter-spacing: normal; display: flex; flex-direction: row; flex-wrap: nowrap; } /* Flex Container (Row) - End */ /* Flex Child (Column/s) - Start */ .flex-col-10 { width: 10%; } .flex-col-15 { width: 15%; } .flex-col-20 { width: 20%; } .flex-col-25 { width: 25%; } .flex-col-30 { width: 30%; } .flex-col-33 { width: 33.3333333%; } .flex-col-40 { width: 40%; } .flex-col-50 { width: 50%; } .flex-col-60 { width: 60%; } .flex-col-66 { width: 66.66%; } .flex-col-70 { width: 70%; } .flex-col-75 { width: 75%; } .flex-col-80 { width: 80%; } .flex-col-100 { width: 100%; } /* Flex Child Column/s - End */ /* Horizontal and Vertical Alignment - Start */ .content-top-left { align-items: flex-start; justify-content: flex-start; } .content-top-center { align-items: flex-start; justify-content: center; } .content-top-right { align-items: flex-start; justify-content: flex-end; } .content-mid-left { align-items: center; justify-content: flex-start; } .content-mid-center { align-items: center; justify-content: center; } .content-mid-right { align-items: center; justify-content: flex-end; } .content-bottom-left { align-items: flex-end; justify-content: flex-start; } .content-bottom-center { align-items: flex-end; justify-content: center; } .content-bottom-right { align-items: flex-end; justify-content: flex-end; } .content-stretch-center { align-items: stretch; justify-content: center; } /* Horizontal and Vertical Alignment - End */ /* Horizontal Alignment Only - Start */ .content-left { justify-content: flex-start; } .content-center { justify-content: center; } .content-right { justify-content: flex-end; } /* Horizontal Alignment Only - End */ /* Vertical Alignment Only - Start */ .content-top { align-items: flex-start; } .content-middle { align-items: center; } .content-bottom { align-items: flex-end; } /* Vertical Alignment Only - End */ .img-resp { max-width: 100%; display: block; } .padding-15 { padding-left: 15px; padding-right: 15px; } .padding-30 { padding-left: 30px; padding-right: 30px; } .padding-60 { padding-left: 60px; padding-right: 60px; } .clear { clear: both; } .clear-left { clear: left; } .clear-right { clear: right; } /* Global Styles - End */ /* Media Queries */ @media only screen and (max-width : 1199px) { } @media only screen and (max-width : 991px) { .flex-col-25, .flex-col-75 { width: 50%; } } @media only screen and (max-width : 767px) { .flex-col-10, .flex-col-15, .flex-col-20, .flex-col-25, .flex-col-30, .flex-col-33, .flex-col-50, .flex-col-40, .flex-col-60, .flex-col-66, .flex-col-70, .flex-col-75, .flex-col-80 { width: 100%; } .flex-row-single { flex-direction: column; } } @media only screen and (max-width : 479px) { .padding-30, .padding-60 { padding-left: 15px; padding-right: 15px; } } @media only screen and (max-width : 319px) { }