/*! Reflex v1.5.0 - https://github.com/leejordan/reflex */ /* * * Reflex is a flexbox grid which provides a way to take advantage of emerging * flexbox support while providing a fall back to inline-block on older browsers * * To disable legacy support and build a flexbox only grid, set the variable legacy-support to false * * Built by Lee Jordan G.C.S.E. * email: ldjordan@gmail.com * github: https://github.com/leejordan * * Structure and calculations are inspired by twitter bootstrap * */ .grid { display: inline-block; display: -ms-flexbox; display: -webkit-flex; display: flex; *display: inline; zoom: 1; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 0; margin: 0; position: relative; width: 100%; max-width: 100%; letter-spacing: -0.31em !important; *letter-spacing: normal !important; word-spacing: -0.43em !important; list-style-type: none; } .grid:before, .grid:after { letter-spacing: normal; word-spacing: normal; white-space: normal; max-width: 100%; } .grid *:before, .grid *:after { letter-spacing: normal; word-spacing: normal; white-space: normal; } .grid .grid { -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; } .grid * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .grid *:before, .grid *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } [class*="grid__col-"] { display: inline-block; display: -ms-flexbox; display: -webkit-flex; display: flex; *display: inline; zoom: 1; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; letter-spacing: normal; word-spacing: normal; white-space: normal; position: relative; width: 100%; vertical-align: top; padding: 1em 1em; } .grid__cell { position: relative; display: block; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; } :-ms-fullscreen .grid__cell, :root .grid__cell { width: 100%; } .grid__col-12 { width: 100%; *width: 99.9%; } .grid__col-11 { width: 91.66666667%; *width: 91.56666667%; } .grid__col-10 { width: 83.33333333%; *width: 83.23333333%; } .grid__col-9 { width: 75%; *width: 74.9%; } .grid__col-8 { width: 66.66666667%; *width: 66.56666667%; } .grid__col-7 { width: 58.33333333%; *width: 58.23333333%; } .grid__col-6 { width: 50%; *width: 49.9%; } .grid__col-5 { width: 41.66666667%; *width: 41.56666667%; } .grid__col-4 { width: 33.33333333%; *width: 33.23333333%; } .grid__col-3 { width: 25%; *width: 24.9%; } .grid__col-2 { width: 16.66666667%; *width: 16.56666667%; } .grid__col-1 { width: 8.33333333%; *width: 8.23333333%; } @media (min-width: 480px) { .grid__col-xs-12 { width: 100%; *width: 99.9%; } .grid__col-xs-11 { width: 91.66666667%; *width: 91.56666667%; } .grid__col-xs-10 { width: 83.33333333%; *width: 83.23333333%; } .grid__col-xs-9 { width: 75%; *width: 74.9%; } .grid__col-xs-8 { width: 66.66666667%; *width: 66.56666667%; } .grid__col-xs-7 { width: 58.33333333%; *width: 58.23333333%; } .grid__col-xs-6 { width: 50%; *width: 49.9%; } .grid__col-xs-5 { width: 41.66666667%; *width: 41.56666667%; } .grid__col-xs-4 { width: 33.33333333%; *width: 33.23333333%; } .grid__col-xs-3 { width: 25%; *width: 24.9%; } .grid__col-xs-2 { width: 16.66666667%; *width: 16.56666667%; } .grid__col-xs-1 { width: 8.33333333%; *width: 8.23333333%; } } @media (min-width: 768px) { .grid__col-sm-12 { width: 100%; *width: 99.9%; } .grid__col-sm-11 { width: 91.66666667%; *width: 91.56666667%; } .grid__col-sm-10 { width: 83.33333333%; *width: 83.23333333%; } .grid__col-sm-9 { width: 75%; *width: 74.9%; } .grid__col-sm-8 { width: 66.66666667%; *width: 66.56666667%; } .grid__col-sm-7 { width: 58.33333333%; *width: 58.23333333%; } .grid__col-sm-6 { width: 50%; *width: 49.9%; } .grid__col-sm-5 { width: 41.66666667%; *width: 41.56666667%; } .grid__col-sm-4 { width: 33.33333333%; *width: 33.23333333%; } .grid__col-sm-3 { width: 25%; *width: 24.9%; } .grid__col-sm-2 { width: 16.66666667%; *width: 16.56666667%; } .grid__col-sm-1 { width: 8.33333333%; *width: 8.23333333%; } } @media (min-width: 992px) { .grid__col-md-12 { width: 100%; *width: 99.9%; } .grid__col-md-11 { width: 91.66666667%; *width: 91.56666667%; } .grid__col-md-10 { width: 83.33333333%; *width: 83.23333333%; } .grid__col-md-9 { width: 75%; *width: 74.9%; } .grid__col-md-8 { width: 66.66666667%; *width: 66.56666667%; } .grid__col-md-7 { width: 58.33333333%; *width: 58.23333333%; } .grid__col-md-6 { width: 50%; *width: 49.9%; } .grid__col-md-5 { width: 41.66666667%; *width: 41.56666667%; } .grid__col-md-4 { width: 33.33333333%; *width: 33.23333333%; } .grid__col-md-3 { width: 25%; *width: 24.9%; } .grid__col-md-2 { width: 16.66666667%; *width: 16.56666667%; } .grid__col-md-1 { width: 8.33333333%; *width: 8.23333333%; } } @media (min-width: 1200px) { .grid__col-lg-12 { width: 100%; *width: 99.9%; } .grid__col-lg-11 { width: 91.66666667%; *width: 91.56666667%; } .grid__col-lg-10 { width: 83.33333333%; *width: 83.23333333%; } .grid__col-lg-9 { width: 75%; *width: 74.9%; } .grid__col-lg-8 { width: 66.66666667%; *width: 66.56666667%; } .grid__col-lg-7 { width: 58.33333333%; *width: 58.23333333%; } .grid__col-lg-6 { width: 50%; *width: 49.9%; } .grid__col-lg-5 { width: 41.66666667%; *width: 41.56666667%; } .grid__col-lg-4 { width: 33.33333333%; *width: 33.23333333%; } .grid__col-lg-3 { width: 25%; *width: 24.9%; } .grid__col-lg-2 { width: 16.66666667%; *width: 16.56666667%; } .grid__col-lg-1 { width: 8.33333333%; *width: 8.23333333%; } } @media (min-width: 1600px) { .grid__col-xlg-12 { width: 100%; *width: 99.9%; } .grid__col-xlg-11 { width: 91.66666667%; *width: 91.56666667%; } .grid__col-xlg-10 { width: 83.33333333%; *width: 83.23333333%; } .grid__col-xlg-9 { width: 75%; *width: 74.9%; } .grid__col-xlg-8 { width: 66.66666667%; *width: 66.56666667%; } .grid__col-xlg-7 { width: 58.33333333%; *width: 58.23333333%; } .grid__col-xlg-6 { width: 50%; *width: 49.9%; } .grid__col-xlg-5 { width: 41.66666667%; *width: 41.56666667%; } .grid__col-xlg-4 { width: 33.33333333%; *width: 33.23333333%; } .grid__col-xlg-3 { width: 25%; *width: 24.9%; } .grid__col-xlg-2 { width: 16.66666667%; *width: 16.56666667%; } .grid__col-xlg-1 { width: 8.33333333%; *width: 8.23333333%; } } .grid__col-auto { -ms-flex: 1 0 auto; -webkit-flex: 1 0 0px; flex: 1 0 0px; width: auto !important; max-width: 100%; } @media (min-width: 480px) { .grid__col-xs-auto { -ms-flex: 1 0 auto; -webkit-flex: 1 0 0px; flex: 1 0 0px; width: auto !important; max-width: 100%; } } @media (min-width: 768px) { .grid__col-sm-auto { -ms-flex: 1 0 auto; -webkit-flex: 1 0 0px; flex: 1 0 0px; width: auto !important; max-width: 100%; } } @media (min-width: 992px) { .grid__col-md-auto { -ms-flex: 1 0 auto; -webkit-flex: 1 0 0px; flex: 1 0 0px; width: auto !important; max-width: 100%; } } @media (min-width: 1200px) { .grid__col-lg-auto { -ms-flex: 1 0 auto; -webkit-flex: 1 0 0px; flex: 1 0 0px; width: auto !important; max-width: 100%; } } @media (min-width: 1600px) { .grid__col-xlg-auto { -ms-flex: 1 0 auto; -webkit-flex: 1 0 0px; flex: 1 0 0px; width: auto !important; max-width: 100%; } } .grid--order-12 { -ms-flex-order: 12; -webkit-order: 12; order: 12; } .grid--order-11 { -ms-flex-order: 11; -webkit-order: 11; order: 11; } .grid--order-10 { -ms-flex-order: 10; -webkit-order: 10; order: 10; } .grid--order-9 { -ms-flex-order: 9; -webkit-order: 9; order: 9; } .grid--order-8 { -ms-flex-order: 8; -webkit-order: 8; order: 8; } .grid--order-7 { -ms-flex-order: 7; -webkit-order: 7; order: 7; } .grid--order-6 { -ms-flex-order: 6; -webkit-order: 6; order: 6; } .grid--order-5 { -ms-flex-order: 5; -webkit-order: 5; order: 5; } .grid--order-4 { -ms-flex-order: 4; -webkit-order: 4; order: 4; } .grid--order-3 { -ms-flex-order: 3; -webkit-order: 3; order: 3; } .grid--order-2 { -ms-flex-order: 2; -webkit-order: 2; order: 2; } .grid--order-1 { -ms-flex-order: 1; -webkit-order: 1; order: 1; } .grid--order-0 { -ms-flex-order: 0; -webkit-order: 0; order: 0; } @media only screen and (min-width: 480px) { .grid--order-12-xs { -ms-flex-order: 12; -webkit-order: 12; order: 12; } .grid--order-11-xs { -ms-flex-order: 11; -webkit-order: 11; order: 11; } .grid--order-10-xs { -ms-flex-order: 10; -webkit-order: 10; order: 10; } .grid--order-9-xs { -ms-flex-order: 9; -webkit-order: 9; order: 9; } .grid--order-8-xs { -ms-flex-order: 8; -webkit-order: 8; order: 8; } .grid--order-7-xs { -ms-flex-order: 7; -webkit-order: 7; order: 7; } .grid--order-6-xs { -ms-flex-order: 6; -webkit-order: 6; order: 6; } .grid--order-5-xs { -ms-flex-order: 5; -webkit-order: 5; order: 5; } .grid--order-4-xs { -ms-flex-order: 4; -webkit-order: 4; order: 4; } .grid--order-3-xs { -ms-flex-order: 3; -webkit-order: 3; order: 3; } .grid--order-2-xs { -ms-flex-order: 2; -webkit-order: 2; order: 2; } .grid--order-1-xs { -ms-flex-order: 1; -webkit-order: 1; order: 1; } .grid--order-0-xs { -ms-flex-order: 0; -webkit-order: 0; order: 0; } } @media only screen and (min-width: 768px) { .grid--order-12-sm { -ms-flex-order: 12; -webkit-order: 12; order: 12; } .grid--order-11-sm { -ms-flex-order: 11; -webkit-order: 11; order: 11; } .grid--order-10-sm { -ms-flex-order: 10; -webkit-order: 10; order: 10; } .grid--order-9-sm { -ms-flex-order: 9; -webkit-order: 9; order: 9; } .grid--order-8-sm { -ms-flex-order: 8; -webkit-order: 8; order: 8; } .grid--order-7-sm { -ms-flex-order: 7; -webkit-order: 7; order: 7; } .grid--order-6-sm { -ms-flex-order: 6; -webkit-order: 6; order: 6; } .grid--order-5-sm { -ms-flex-order: 5; -webkit-order: 5; order: 5; } .grid--order-4-sm { -ms-flex-order: 4; -webkit-order: 4; order: 4; } .grid--order-3-sm { -ms-flex-order: 3; -webkit-order: 3; order: 3; } .grid--order-2-sm { -ms-flex-order: 2; -webkit-order: 2; order: 2; } .grid--order-1-sm { -ms-flex-order: 1; -webkit-order: 1; order: 1; } .grid--order-0-sm { -ms-flex-order: 0; -webkit-order: 0; order: 0; } } @media only screen and (min-width: 992px) { .grid--order-12-md { -ms-flex-order: 12; -webkit-order: 12; order: 12; } .grid--order-11-md { -ms-flex-order: 11; -webkit-order: 11; order: 11; } .grid--order-10-md { -ms-flex-order: 10; -webkit-order: 10; order: 10; } .grid--order-9-md { -ms-flex-order: 9; -webkit-order: 9; order: 9; } .grid--order-8-md { -ms-flex-order: 8; -webkit-order: 8; order: 8; } .grid--order-7-md { -ms-flex-order: 7; -webkit-order: 7; order: 7; } .grid--order-6-md { -ms-flex-order: 6; -webkit-order: 6; order: 6; } .grid--order-5-md { -ms-flex-order: 5; -webkit-order: 5; order: 5; } .grid--order-4-md { -ms-flex-order: 4; -webkit-order: 4; order: 4; } .grid--order-3-md { -ms-flex-order: 3; -webkit-order: 3; order: 3; } .grid--order-2-md { -ms-flex-order: 2; -webkit-order: 2; order: 2; } .grid--order-1-md { -ms-flex-order: 1; -webkit-order: 1; order: 1; } .grid--order-0-md { -ms-flex-order: 0; -webkit-order: 0; order: 0; } } @media only screen and (min-width: 1200px) { .grid--order-12-lg { -ms-flex-order: 12; -webkit-order: 12; order: 12; } .grid--order-11-lg { -ms-flex-order: 11; -webkit-order: 11; order: 11; } .grid--order-10-lg { -ms-flex-order: 10; -webkit-order: 10; order: 10; } .grid--order-9-lg { -ms-flex-order: 9; -webkit-order: 9; order: 9; } .grid--order-8-lg { -ms-flex-order: 8; -webkit-order: 8; order: 8; } .grid--order-7-lg { -ms-flex-order: 7; -webkit-order: 7; order: 7; } .grid--order-6-lg { -ms-flex-order: 6; -webkit-order: 6; order: 6; } .grid--order-5-lg { -ms-flex-order: 5; -webkit-order: 5; order: 5; } .grid--order-4-lg { -ms-flex-order: 4; -webkit-order: 4; order: 4; } .grid--order-3-lg { -ms-flex-order: 3; -webkit-order: 3; order: 3; } .grid--order-2-lg { -ms-flex-order: 2; -webkit-order: 2; order: 2; } .grid--order-1-lg { -ms-flex-order: 1; -webkit-order: 1; order: 1; } .grid--order-0-lg { -ms-flex-order: 0; -webkit-order: 0; order: 0; } } @media only screen and (min-width: 1600px) { .grid--order-12-xlg { -ms-flex-order: 12; -webkit-order: 12; order: 12; } .grid--order-11-xlg { -ms-flex-order: 11; -webkit-order: 11; order: 11; } .grid--order-10-xlg { -ms-flex-order: 10; -webkit-order: 10; order: 10; } .grid--order-9-xlg { -ms-flex-order: 9; -webkit-order: 9; order: 9; } .grid--order-8-xlg { -ms-flex-order: 8; -webkit-order: 8; order: 8; } .grid--order-7-xlg { -ms-flex-order: 7; -webkit-order: 7; order: 7; } .grid--order-6-xlg { -ms-flex-order: 6; -webkit-order: 6; order: 6; } .grid--order-5-xlg { -ms-flex-order: 5; -webkit-order: 5; order: 5; } .grid--order-4-xlg { -ms-flex-order: 4; -webkit-order: 4; order: 4; } .grid--order-3-xlg { -ms-flex-order: 3; -webkit-order: 3; order: 3; } .grid--order-2-xlg { -ms-flex-order: 2; -webkit-order: 2; order: 2; } .grid--order-1-xlg { -ms-flex-order: 1; -webkit-order: 1; order: 1; } .grid--order-0-xlg { -ms-flex-order: 0; -webkit-order: 0; order: 0; } } .grid--bleed [class*="grid__col-"] { padding: 0; } .grid--wrap { -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .grid--no-wrap { -ms-flex-wrap: nowrap; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } .grid--wrap-reverse { -ms-flex-wrap: wrap-reverse; -webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } .grid--direction-row { -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; } .grid--direction-row-reverse { -ms-flex-direction: row-reverse; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } .grid--direction-column { -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .grid--direction-column-reverse { -ms-flex-direction: column-reverse; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; } .grid--align-start { -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .grid--align-end { -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .grid--align-end [class*="grid__col-"] { vertical-align: bottom; } .grid--align-center { -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .grid--align-center [class*="grid__col-"] { vertical-align: middle; } .grid--align-baseline { -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; } .grid--align-baseline [class*="grid__col-"] { vertical-align: baseline; } .grid--align-content-start { -ms-flex-line-pack: start; -webkit-align-content: flex-start; align-content: flex-start; } .grid--align-content-end { -ms-flex-line-pack: end; -webkit-align-content: flex-end; align-content: flex-end; } .grid--align-content-end [class*="grid__col-"] { vertical-align: bottom; } .grid--align-content-center { -ms-flex-line-pack: center; -webkit-align-content: center; align-content: center; } .grid--align-content-space-between { -ms-flex-line-pack: space-between; -webkit-align-content: space-between; align-content: space-between; } .grid--align-content-space-around { -ms-flex-line-pack: space-around; -webkit-align-content: space-around; align-content: space-around; } .grid--align-self-stretch { -ms-flex-item-align: stretch; -webkit-align-self: stretch; align-self: stretch; } .grid--align-self-start { -ms-flex-item-align: start; -webkit-align-self: flex-start; align-self: flex-start; } .grid--align-self-end { -ms-flex-item-align: end; -webkit-align-self: flex-end; align-self: flex-end; vertical-align: bottom; } .grid--align-self-center { -ms-flex-item-align: center; -webkit-align-self: center; align-self: center; vertical-align: middle; } .grid--align-self-baseline { -ms-flex-item-align: baseline; -webkit-align-self: baseline; align-self: baseline; vertical-align: baseline; } .grid--justify-start { text-align: left; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } .grid--justify-end { text-align: right; -moz-text-align-last: right; text-align-last: right; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .grid--justify-end .grid__cell, .grid--justify-end [class*="grid__col-"] { text-align: left; text-align: start; text-align: initial; -moz-text-align-last: left; -moz-text-align-last: start; -moz-text-align-last: initial; text-align-last: left; text-align-last: start; text-align-last: initial; } .grid--justify-center { text-align: center; -moz-text-align-last: center; text-align-last: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .grid--justify-center .grid__cell, .grid--justify-center [class*="grid__col-"] { text-align: left; text-align: start; text-align: initial; -moz-text-align-last: left; -moz-text-align-last: start; -moz-text-align-last: initial; text-align-last: left; text-align-last: start; text-align-last: initial; } .grid--justify-space-between { text-align: justify; -moz-text-align-last: justify; text-align-last: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .grid--justify-space-between .grid__cell, .grid--justify-space-between [class*="grid__col-"] { text-align: left; text-align: start; text-align: initial; -moz-text-align-last: left; -moz-text-align-last: start; -moz-text-align-last: initial; text-align-last: left; text-align-last: start; text-align-last: initial; } .grid--justify-space-around { text-align: justify; -moz-text-align-last: justify; text-align-last: justify; -ms-flex-pack: justify; -webkit-justify-content: space-around; justify-content: space-around; } .grid--justify-space-around .grid__cell, .grid--justify-space-around [class*="grid__col-"] { text-align: left; text-align: start; text-align: initial; -moz-text-align-last: left; -moz-text-align-last: start; -moz-text-align-last: initial; text-align-last: left; text-align-last: start; text-align-last: initial; } .grid__col--bleed { padding: 0; } .grid__col--bleed-x { padding: 1em 0; } .grid__col--bleed-y { padding: 0 1em; } .grid__col--bg { background-repeat: no-repeat; background-position: center center; background-size: cover; padding-bottom: 50%; } .grid__cell--padding-sm { padding: 0.5em; } .grid__cell--padding-md { padding: 1em; } .grid__cell--padding-lg { padding: 2em; } .grid__cell-img { display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; margin-left: 0; margin-right: 0; max-width: 100%; width: 100%; height: auto; } .grid__cell-footer { display: inline-block; display: -ms-flexbox; display: -webkit-flex; display: flex; *display: inline; zoom: 1; width: 100%; margin-top: auto; } @media (max-width: 479px) { .hidden-xxs { display: none !important; } } @media (min-width: 480px) and (max-width: 767px) { .hidden-xs { display: none !important; } } @media (min-width: 768px) and (max-width: 991px) { .hidden-sm { display: none !important; } } @media (min-width: 992px) and (max-width: 1199px) { .hidden-md { display: none !important; } } @media (min-width: 1200px) { .hidden-lg { display: none !important; } }