UNPKG

frow

Version:

Flexbox Toolkit & Grid

2,684 lines (2,526 loc) 58.9 kB
/*! Frow CSS | MIT License | frowcss.com */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ html { line-height: 1.15; -webkit-text-size-adjust: 100%; } body { margin: 0; } main { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; } abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } b { font-weight: bolder; } strong { font-weight: bolder; } code { font-family: monospace, monospace; font-size: 1em; } kbd { font-family: monospace, monospace; font-size: 1em; } samp { font-family: monospace, monospace; font-size: 1em; } small { font-size: 80%; } sub { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; bottom: -0.25em; } sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; top: -0.5em; } img { border-style: none; } button { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; overflow: visible; text-transform: none; -webkit-appearance: button; } button::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring { outline: 1px dotted ButtonText; } input { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; overflow: visible; } optgroup { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } select { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; text-transform: none; } textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; overflow: auto; } [type=button] { -webkit-appearance: button; } [type=button]::-moz-focus-inner { border-style: none; padding: 0; } [type=button]:-moz-focusring { outline: 1px dotted ButtonText; } [type=reset] { -webkit-appearance: button; } [type=reset]::-moz-focus-inner { border-style: none; padding: 0; } [type=reset]:-moz-focusring { outline: 1px dotted ButtonText; } [type=submit] { -webkit-appearance: button; } [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { vertical-align: baseline; } [type=checkbox] { box-sizing: border-box; padding: 0; } [type=radio] { box-sizing: border-box; padding: 0; } [type=number]::-webkit-inner-spin-button { height: auto; } [type=number]::-webkit-outer-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } [type=search]::-webkit-search-decoration { -webkit-appearance: none; } [type=search]::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } *, :after, :before { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } [hidden] { display: none !important; } body { color: #333; } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } a { cursor: pointer; color: #333; text-decoration: none; } a:hover, a:focus, a:active { color: #0d0d0d; text-decoration: underline; } p a { text-decoration: underline; display: inline; } pre { margin: 0; } canvas:focus { outline: none; } button, [type=button], [type=reset], [type=submit] { -webkit-appearance: none; -moz-appearance: none; background: none; background-color: #4F4F51; border: 2px solid #4F4F51; border-radius: 3px; color: #FFF; cursor: pointer; display: block; font-size: 16px; line-height: 100%; text-align: center; outline: none; padding: 7px; transition: transform 0.1s, background 0.4s, border-color 0.4s, color 0.4s, box-shadow 0.4s; } button:hover, button:focus, button:active, [type=button]:hover, [type=button]:focus, [type=button]:active, [type=reset]:hover, [type=reset]:focus, [type=reset]:active, [type=submit]:hover, [type=submit]:focus, [type=submit]:active { background-color: #29292a; border-color: #29292a; outline: none; color: #FFF; text-decoration: none; } button:active, [type=button]:active, [type=reset]:active, [type=submit]:active { transform: scale(0.96); } button:disabled, [type=button]:disabled, [type=reset]:disabled, [type=submit]:disabled { cursor: default !important; border: 2px solid #EAEAEA; background: repeating-linear-gradient(45deg, #dddddd, #dddddd 3px, #FFF 3px, #FFF 6px); background-color: #c4c4c4; color: #888888; transform: scale(1); } button:disabled:hover, button:disabled:focus, button:disabled:active, [type=button]:disabled:hover, [type=button]:disabled:focus, [type=button]:disabled:active, [type=reset]:disabled:hover, [type=reset]:disabled:focus, [type=reset]:disabled:active, [type=submit]:disabled:hover, [type=submit]:disabled:focus, [type=submit]:disabled:active { cursor: default !important; border: 2px solid #EAEAEA; background: repeating-linear-gradient(45deg, #dddddd, #dddddd 3px, #FFF 3px, #FFF 6px); background-color: #c4c4c4; color: #888888; transform: scale(1); } button.button-link, button.button-link:disabled, [type=button].button-link, [type=button].button-link:disabled, [type=reset].button-link, [type=reset].button-link:disabled, [type=submit].button-link, [type=submit].button-link:disabled { cursor: pointer; color: #333; text-decoration: none; border: none; outline: none; padding: 0; background: none; color: inherit; font-weight: inherit; font-size: inherit; text-transform: none; } button.button-link:hover, button.button-link:focus, button.button-link:active, button.button-link:disabled:hover, button.button-link:disabled:focus, button.button-link:disabled:active, [type=button].button-link:hover, [type=button].button-link:focus, [type=button].button-link:active, [type=button].button-link:disabled:hover, [type=button].button-link:disabled:focus, [type=button].button-link:disabled:active, [type=reset].button-link:hover, [type=reset].button-link:focus, [type=reset].button-link:active, [type=reset].button-link:disabled:hover, [type=reset].button-link:disabled:focus, [type=reset].button-link:disabled:active, [type=submit].button-link:hover, [type=submit].button-link:focus, [type=submit].button-link:active, [type=submit].button-link:disabled:hover, [type=submit].button-link:disabled:focus, [type=submit].button-link:disabled:active { color: #0d0d0d; text-decoration: underline; } p button.button-link, p button.button-link:disabled, p [type=button].button-link, p [type=button].button-link:disabled, p [type=reset].button-link, p [type=reset].button-link:disabled, p [type=submit].button-link, p [type=submit].button-link:disabled { text-decoration: underline; display: inline; } button.button-link:disabled, button.button-link:disabled:hover, button.button-link:disabled:focus, button.button-link:disabled:active, [type=button].button-link:disabled, [type=button].button-link:disabled:hover, [type=button].button-link:disabled:focus, [type=button].button-link:disabled:active, [type=reset].button-link:disabled, [type=reset].button-link:disabled:hover, [type=reset].button-link:disabled:focus, [type=reset].button-link:disabled:active, [type=submit].button-link:disabled, [type=submit].button-link:disabled:hover, [type=submit].button-link:disabled:focus, [type=submit].button-link:disabled:active { color: #999999; text-decoration: none; } button.button-none, button.button-none:focus, button.button-none:active, button.button-none:hover, button.button-none:disabled, button.button-none:disabled:hover, [type=button].button-none, [type=button].button-none:focus, [type=button].button-none:active, [type=button].button-none:hover, [type=button].button-none:disabled, [type=button].button-none:disabled:hover, [type=reset].button-none, [type=reset].button-none:focus, [type=reset].button-none:active, [type=reset].button-none:hover, [type=reset].button-none:disabled, [type=reset].button-none:disabled:hover, [type=submit].button-none, [type=submit].button-none:focus, [type=submit].button-none:active, [type=submit].button-none:hover, [type=submit].button-none:disabled, [type=submit].button-none:disabled:hover { border: none; outline: none; margin: 0; padding: 0; background: none; color: inherit; font-weight: inherit; font-size: inherit; text-transform: none; } fieldset { border: none; margin: 0; padding: 0; } legend { color: #9E9E9E; font-size: 14px; margin: 0; padding: 0; margin-bottom: 10px; display: block; } label, .label { color: #9E9E9E; font-size: 14px; margin-bottom: 20px; width: 100%; } label { cursor: pointer; display: flex; flex-direction: column; } label.centered { justify-content: center; align-items: center; align-content: center; height: 100%; } label.centered-column { justify-content: center; align-items: center; align-content: center; flex-direction: column; height: 100%; } label.row-start { flex-direction: row; align-items: center; justify-content: flex-start; } label.row-center { flex-direction: row; align-items: center; justify-content: center; } label.row-end { flex-direction: row; align-items: center; justify-content: flex-end; } label.row-between { flex-direction: row; align-items: center; justify-content: space-between; } label.row-around { flex-direction: row; align-items: center; justify-content: space-around; } label.row-evenly { flex-direction: row; align-items: center; justify-content: space-evenly; } label.column-start { flex-direction: column; align-items: flex-start; align-content: flex-start; justify-content: flex-start; } label.column-center { flex-direction: column; align-items: center; align-content: center; justify-content: flex-start; } label.column-end { flex-direction: column; align-items: flex-end; align-content: flex-end; justify-content: flex-start; } label.inline { display: inline-flex; } label.wrap { flex-wrap: wrap; } label.wrap-reverse { flex-wrap: wrap-reverse; } label.nowrap { flex-wrap: nowrap; } label.direction-row { flex-direction: row; } label.direction-reverse { flex-direction: row-reverse; } label.direction-column { flex-direction: column; } label.direction-column-reverse { flex-direction: column-reverse; } label.justify-start { justify-content: flex-start; } label.justify-end { justify-content: flex-end; } label.justify-center { justify-content: center; } label.justify-between { justify-content: space-between; } label.justify-around { justify-content: space-around; } label.justify-evenly { justify-content: space-evenly; } label.items-start { align-items: flex-start; } label.items-end { align-items: flex-end; } label.items-center { align-items: center; } label.items-stretch { align-items: stretch; } label.items-baseline { align-items: baseline; } label.content-start { align-content: flex-start; } label.content-end { align-content: flex-end; } label.content-center { align-content: center; } label.content-between { align-content: space-between; } label.content-around { align-content: space-around; } label.content-evenly { align-content: space-evenly; } input { background: transparent; border: none; border-radius: 0; border-bottom: 2px solid #9E9E9E; padding: 8px 5px 4px; color: #333; display: block; font-size: 15px; width: 100%; transition: border-color 0.4s, color 0.4s; } input::-moz-placeholder { opacity: 1; color: #9E9E9E; } input:-ms-input-placeholder { opacity: 1; color: #9E9E9E; } input::placeholder { opacity: 1; color: #9E9E9E; } input:-moz-placeholder-shown { color: #9E9E9E; } input:-ms-input-placeholder { color: #9E9E9E; } input:placeholder-shown { color: #9E9E9E; } input::-webkit-input-placeholder { color: #9E9E9E; } input::-moz-placeholder { opacity: 1; color: #9E9E9E; } input:-ms-input-placeholder { color: #9E9E9E; } input:hover, input:focus { border-color: #4F4F51; outline: none; } input:disabled { border-bottom: 1px dotted #9E9E9E; color: #9E9E9E; cursor: default !important; margin-bottom: 1px; } input[type=number] { -moz-appearance: textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=color] { height: 31px; cursor: pointer; } input[type=color]::-webkit-color-swatch-wrapper { padding: 0; } input[type=color]::-webkit-color-swatch { border-color: #9E9E9E; border-radius: 3px; } input[type=checkbox] { border-radius: 2px; -webkit-appearance: none; -moz-appearance: none; appearance: none; flex-shrink: 0; width: 20px; height: 20px; margin: 0 5px 0 0; cursor: pointer; border: 2px solid #4F4F51; transition: transform 0.4s, background 0.4s, border-color 0.4s, box-shadow 0.4s; } input[type=checkbox]:hover, input[type=checkbox]:focus { transform: scale(1.15); } input[type=checkbox]:disabled { cursor: default !important; box-shadow: none; border-color: #EAEAEA; } input[type=checkbox]:checked { background-color: #4F4F51; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='8 8 36 36' version='1.1' xml:space='preserve'><path d='M14.1 27.2l7.1 7.2 16.7-16.8' fill='none' stroke='rgba(255,255,255,1)' stroke-width='5'/></svg>"); } input[type=checkbox]:checked:disabled { border-color: #EAEAEA; background-color: #c4c4c4; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='8 8 36 36' version='1.1' xml:space='preserve'><path d='M14.1 27.2l7.1 7.2 16.7-16.8' fill='none' stroke='rgba(79,79,81,1)' stroke-width='5'/></svg>"), repeating-linear-gradient(45deg, #dddddd, #dddddd 3px, #FFF 3px, #FFF 6px); } input[type=radio] { border-radius: 50%; -webkit-appearance: none; -moz-appearance: none; appearance: none; flex-shrink: 0; width: 20px; height: 20px; margin: 0 5px 0 0; cursor: pointer; border: 2px solid #4F4F51; transition: transform 0.4s, background 0.4s, border-color 0.4s, box-shadow 0.4s; } input[type=radio]:hover, input[type=radio]:focus { transform: scale(1.15); } input[type=radio]:disabled { cursor: default !important; box-shadow: none; border-color: #EAEAEA; } input[type=radio]:checked { background-color: #4F4F51; box-shadow: inset 0 0 0 2px #FFF; } input[type=radio]:checked:disabled { box-shadow: inset 0 0 0 2px #FFF; border-color: #EAEAEA; background-color: #EAEAEA; } input[type=range] { border: none; padding: 13px 0; -webkit-appearance: none; width: 100%; cursor: pointer; } input[type=range]:disabled { margin-bottom: 0; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; } input[type=range]::-ms-track { width: 100%; cursor: pointer; background: transparent; border-color: transparent; color: transparent; } input[type=range]::-moz-focus-outer { border: 0; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; margin-top: -8px; cursor: pointer; background: #4F4F51; height: 18px; width: 18px; border-radius: 50%; border: 0; -webkit-transition: transform 0.4s; transition: transform 0.4s; } input[type=range]::-moz-range-thumb { cursor: pointer; background: #4F4F51; height: 18px; width: 18px; border-radius: 50%; border: 0; -moz-transition: transform 0.4s; transition: transform 0.4s; } input[type=range]::-ms-thumb { cursor: pointer; background: #4F4F51; height: 18px; width: 18px; border-radius: 50%; border: 0; -ms-transition: transform 0.4s; transition: transform 0.4s; margin-top: -1px; } input[type=range]:active::-webkit-slider-thumb, input[type=range]:hover::-webkit-slider-thumb, input[type=range]:focus::-webkit-slider-thumb { outline: none; transform: scale(1.15); } input[type=range]:active::-moz-range-thumb, input[type=range]:hover::-moz-range-thumb, input[type=range]:focus::-moz-range-thumb { outline: none; transform: scale(1.15); } input[type=range]:active::-ms-thumb, input[type=range]:hover::-ms-thumb, input[type=range]:focus::-ms-thumb { outline: none; transform: scale(1.15); } input[type=range]:disabled::-webkit-slider-thumb { cursor: default !important; background: repeating-linear-gradient(45deg, #dddddd, #dddddd 2px, #FFF 2px, #FFF 4px); } input[type=range]:disabled::-moz-range-thumb { cursor: default !important; background: repeating-linear-gradient(45deg, #dddddd, #dddddd 2px, #FFF 2px, #FFF 4px); } input[type=range]:disabled::-ms-thumb { cursor: default !important; background: repeating-linear-gradient(45deg, #dddddd, #dddddd 2px, #FFF 2px, #FFF 4px); } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 3px; cursor: pointer; border-radius: 2px; background: #9E9E9E; } input[type=range]:active::-webkit-slider-runnable-track { background: #9E9E9E; -webkit-transition: background 0.4s; transition: background 0.4s; } input[type=range]:disabled::-webkit-slider-runnable-track { cursor: default !important; } input[type=range]::-moz-range-track { width: 100%; height: 3px; cursor: pointer; border-radius: 2px; background: #9E9E9E; } input[type=range]:active::-moz-range-track { background: #9E9E9E; -moz-transition: background 0.4s; transition: background 0.4s; } input[type=range]:disabled::-moz-range-track { cursor: default !important; } input[type=range]::-ms-track { width: 100%; height: 3px; cursor: pointer; border-radius: 2px; background: transparent; border-color: transparent; border-width: 16px 0; color: transparent; } input[type=range]:disabled::-ms-track { cursor: default !important; } input[type=range]::-ms-fill-lower { background: #9E9E9E; border-radius: 2px; } input[type=range]:active::-ms-fill-lower { background: #9E9E9E; } input[type=range]::-ms-fill-upper { border-radius: 2px; background: #9E9E9E; } input[type=range]:active::-ms-fill-upper { background: #9E9E9E; -ms-transition: background 0.4s; transition: background 0.4s; } input::-webkit-file-upload-button { -webkit-appearance: none; -moz-appearance: none; background: none; background-color: #4F4F51; border: 2px solid #4F4F51; border-radius: 3px; color: #FFF; cursor: pointer; display: block; font-size: 16px; line-height: 100%; text-align: center; outline: none; padding: 7px; -webkit-transition: transform 0.1s, background 0.4s, border-color 0.4s, color 0.4s, box-shadow 0.4s; transition: transform 0.1s, background 0.4s, border-color 0.4s, color 0.4s, box-shadow 0.4s; } input::-webkit-file-upload-button:hover, input::-webkit-file-upload-button:focus, input::-webkit-file-upload-button:active { background-color: #29292a; border-color: #29292a; outline: none; color: #FFF; text-decoration: none; } input::-webkit-file-upload-button:active { transform: scale(0.96); } input::-webkit-file-upload-button:disabled { cursor: default !important; border: 2px solid #EAEAEA; background: repeating-linear-gradient(45deg, #dddddd, #dddddd 3px, #FFF 3px, #FFF 6px); background-color: #c4c4c4; color: #888888; transform: scale(1); } input::-webkit-file-upload-button:disabled:hover, input::-webkit-file-upload-button:disabled:focus, input::-webkit-file-upload-button:disabled:active { cursor: default !important; border: 2px solid #EAEAEA; background: repeating-linear-gradient(45deg, #dddddd, #dddddd 3px, #FFF 3px, #FFF 6px); background-color: #c4c4c4; color: #888888; transform: scale(1); } input:disabled::-webkit-file-upload-button { cursor: default !important; border: 2px solid #EAEAEA; background: repeating-linear-gradient(45deg, #dddddd, #dddddd 3px, #FFF 3px, #FFF 6px); background-color: #c4c4c4; color: #888888; transform: scale(1); } input::-ms-browse { -webkit-appearance: none; -moz-appearance: none; background: none; background-color: #4F4F51; border: 2px solid #4F4F51; border-radius: 3px; color: #FFF; cursor: pointer; display: block; font-size: 16px; line-height: 100%; text-align: center; outline: none; padding: 7px; -ms-transition: transform 0.1s, background 0.4s, border-color 0.4s, color 0.4s, box-shadow 0.4s; transition: transform 0.1s, background 0.4s, border-color 0.4s, color 0.4s, box-shadow 0.4s; } input::-ms-browse:hover, input::-ms-browse:focus, input::-ms-browse:active { background-color: #29292a; border-color: #29292a; outline: none; color: #FFF; text-decoration: none; } input::-ms-browse:active { transform: scale(0.96); } input::-ms-browse:disabled { cursor: default !important; border: 2px solid #EAEAEA; background: repeating-linear-gradient(45deg, #dddddd, #dddddd 3px, #FFF 3px, #FFF 6px); background-color: #c4c4c4; color: #888888; transform: scale(1); } input::-ms-browse:disabled:hover, input::-ms-browse:disabled:focus, input::-ms-browse:disabled:active { cursor: default !important; border: 2px solid #EAEAEA; background: repeating-linear-gradient(45deg, #dddddd, #dddddd 3px, #FFF 3px, #FFF 6px); background-color: #c4c4c4; color: #888888; transform: scale(1); } input:disabled::-ms-browse { cursor: default !important; border: 2px solid #EAEAEA; background: repeating-linear-gradient(45deg, #dddddd, #dddddd 3px, #FFF 3px, #FFF 6px); background-color: #c4c4c4; color: #888888; transform: scale(1); } select { -webkit-appearance: none; -moz-appearance: none; background: transparent; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' version='1.1' xml:space='preserve' stroke-linejoin='round'><g transform='matrix(-0.613836,-7.51732e-17,7.51732e-17,-0.613836,19.9111,16.8669)'><path d='M12.9 2.9L22.7 12.9 3.1 12.9 12.9 2.9Z' fill='rgba(158,158,158,1)'/></g></svg>"); background-position: right center; background-repeat: no-repeat; display: block; border: none; border-bottom: 2px solid #9E9E9E; border-radius: 0; color: #333; font-size: 15px; height: 27px; margin-top: 4px; padding: 3px 24px 3px 5px; width: 100%; cursor: pointer; transition: border-color 0.4s, color 0.4s, background 0.4s; } select:hover, select:focus { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' version='1.1' xml:space='preserve' stroke-linejoin='round'><g transform='matrix(-0.613836,-7.51732e-17,7.51732e-17,-0.613836,19.9111,16.8669)'><path d='M12.9 2.9L22.7 12.9 3.1 12.9 12.9 2.9Z' fill='rgba(79,79,81,1)'/></g></svg>"); outline: none; border-color: #4F4F51; } select:disabled { padding-bottom: 4px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' version='1.1' xml:space='preserve' stroke-linejoin='round'><g transform='matrix(-0.613836,-7.51732e-17,7.51732e-17,-0.613836,19.9111,16.8669)'><path d='M12.9 2.9L22.7 12.9 3.1 12.9 12.9 2.9Z' fill='rgba(158,158,158,1)'/></g></svg>"); border-bottom: 1px dotted #9E9E9E; cursor: default !important; color: #9E9E9E; } textarea { background: transparent; border: none; border-radius: 0; border-bottom: 2px solid #9E9E9E; padding: 8px 5px 4px; color: #333; display: block; font-size: 15px; width: 100%; transition: border-color 0.4s, color 0.4s; min-height: 50px; resize: vertical; } textarea::-moz-placeholder { opacity: 1; color: #9E9E9E; } textarea:-ms-input-placeholder { opacity: 1; color: #9E9E9E; } textarea::placeholder { opacity: 1; color: #9E9E9E; } textarea:-moz-placeholder-shown { color: #9E9E9E; } textarea:-ms-input-placeholder { color: #9E9E9E; } textarea:placeholder-shown { color: #9E9E9E; } textarea::-webkit-input-placeholder { color: #9E9E9E; } textarea::-moz-placeholder { opacity: 1; color: #9E9E9E; } textarea:-ms-input-placeholder { color: #9E9E9E; } textarea:hover, textarea:focus { border-color: #4F4F51; outline: none; } textarea:disabled { border-bottom: 1px dotted #9E9E9E; color: #9E9E9E; cursor: default !important; margin-bottom: 1px; } .frow { display: flex; flex-wrap: wrap; justify-content: center; } .frow > * { max-width: 100%; } .frow.centered { justify-content: center; align-items: center; align-content: center; height: 100%; } .frow.centered-column { justify-content: center; align-items: center; align-content: center; flex-direction: column; height: 100%; } .frow.row-start { flex-direction: row; align-items: center; justify-content: flex-start; } .frow.row-center { flex-direction: row; align-items: center; justify-content: center; } .frow.row-end { flex-direction: row; align-items: center; justify-content: flex-end; } .frow.row-between { flex-direction: row; align-items: center; justify-content: space-between; } .frow.row-around { flex-direction: row; align-items: center; justify-content: space-around; } .frow.row-evenly { flex-direction: row; align-items: center; justify-content: space-evenly; } .frow.column-start { flex-direction: column; align-items: flex-start; align-content: flex-start; justify-content: flex-start; } .frow.column-center { flex-direction: column; align-items: center; align-content: center; justify-content: flex-start; } .frow.column-end { flex-direction: column; align-items: flex-end; align-content: flex-end; justify-content: flex-start; } .frow.inline { display: inline-flex; } .frow.wrap { flex-wrap: wrap; } .frow.wrap-reverse { flex-wrap: wrap-reverse; } .frow.nowrap { flex-wrap: nowrap; } .frow.direction-row { flex-direction: row; } .frow.direction-reverse { flex-direction: row-reverse; } .frow.direction-column { flex-direction: column; } .frow.direction-column-reverse { flex-direction: column-reverse; } .frow.justify-start { justify-content: flex-start; } .frow.justify-end { justify-content: flex-end; } .frow.justify-center { justify-content: center; } .frow.justify-between { justify-content: space-between; } .frow.justify-around { justify-content: space-around; } .frow.justify-evenly { justify-content: space-evenly; } .frow.items-start { align-items: flex-start; } .frow.items-end { align-items: flex-end; } .frow.items-center { align-items: center; } .frow.items-stretch { align-items: stretch; } .frow.items-baseline { align-items: baseline; } .frow.content-start { align-content: flex-start; } .frow.content-end { align-content: flex-end; } .frow.content-center { align-content: center; } .frow.content-between { align-content: space-between; } .frow.content-around { align-content: space-around; } .frow.content-evenly { align-content: space-evenly; } .frow.gutters { margin-left: -15px; margin-right: -15px; } .frow.gutters > [class*=col-xs], .frow.gutters > [class*=col-sm], .frow.gutters > [class*=col-md], .frow.gutters > [class*=col-lg] { padding-left: 15px; padding-right: 15px; } .frow [class*=col-xs], .frow [class*=col-sm], .frow [class*=col-md], .frow [class*=col-lg] { width: 100%; } @media (min-width: 0px) { .frow .col-xs-1-1 { width: 100%; } .frow .col-xs-1-2 { width: 50%; } .frow .col-xs-2-2 { width: 100%; } .frow .col-xs-1-3 { width: 33.3333333333%; } .frow .col-xs-2-3 { width: 66.6666666667%; } .frow .col-xs-3-3 { width: 100%; } .frow .col-xs-1-4 { width: 25%; } .frow .col-xs-2-4 { width: 50%; } .frow .col-xs-3-4 { width: 75%; } .frow .col-xs-4-4 { width: 100%; } .frow .col-xs-1-5 { width: 20%; } .frow .col-xs-2-5 { width: 40%; } .frow .col-xs-3-5 { width: 60%; } .frow .col-xs-4-5 { width: 80%; } .frow .col-xs-5-5 { width: 100%; } .frow .col-xs-1-6 { width: 16.6666666667%; } .frow .col-xs-2-6 { width: 33.3333333333%; } .frow .col-xs-3-6 { width: 50%; } .frow .col-xs-4-6 { width: 66.6666666667%; } .frow .col-xs-5-6 { width: 83.3333333333%; } .frow .col-xs-6-6 { width: 100%; } .frow .col-xs-1-7 { width: 14.2857142857%; } .frow .col-xs-2-7 { width: 28.5714285714%; } .frow .col-xs-3-7 { width: 42.8571428571%; } .frow .col-xs-4-7 { width: 57.1428571429%; } .frow .col-xs-5-7 { width: 71.4285714286%; } .frow .col-xs-6-7 { width: 85.7142857143%; } .frow .col-xs-7-7 { width: 100%; } .frow .col-xs-1-8 { width: 12.5%; } .frow .col-xs-2-8 { width: 25%; } .frow .col-xs-3-8 { width: 37.5%; } .frow .col-xs-4-8 { width: 50%; } .frow .col-xs-5-8 { width: 62.5%; } .frow .col-xs-6-8 { width: 75%; } .frow .col-xs-7-8 { width: 87.5%; } .frow .col-xs-8-8 { width: 100%; } .frow .col-xs-1-9 { width: 11.1111111111%; } .frow .col-xs-2-9 { width: 22.2222222222%; } .frow .col-xs-3-9 { width: 33.3333333333%; } .frow .col-xs-4-9 { width: 44.4444444444%; } .frow .col-xs-5-9 { width: 55.5555555556%; } .frow .col-xs-6-9 { width: 66.6666666667%; } .frow .col-xs-7-9 { width: 77.7777777778%; } .frow .col-xs-8-9 { width: 88.8888888889%; } .frow .col-xs-9-9 { width: 100%; } .frow .col-xs-1-10 { width: 10%; } .frow .col-xs-2-10 { width: 20%; } .frow .col-xs-3-10 { width: 30%; } .frow .col-xs-4-10 { width: 40%; } .frow .col-xs-5-10 { width: 50%; } .frow .col-xs-6-10 { width: 60%; } .frow .col-xs-7-10 { width: 70%; } .frow .col-xs-8-10 { width: 80%; } .frow .col-xs-9-10 { width: 90%; } .frow .col-xs-10-10 { width: 100%; } .frow .col-xs-1-11 { width: 9.0909090909%; } .frow .col-xs-2-11 { width: 18.1818181818%; } .frow .col-xs-3-11 { width: 27.2727272727%; } .frow .col-xs-4-11 { width: 36.3636363636%; } .frow .col-xs-5-11 { width: 45.4545454545%; } .frow .col-xs-6-11 { width: 54.5454545455%; } .frow .col-xs-7-11 { width: 63.6363636364%; } .frow .col-xs-8-11 { width: 72.7272727273%; } .frow .col-xs-9-11 { width: 81.8181818182%; } .frow .col-xs-10-11 { width: 90.9090909091%; } .frow .col-xs-11-11 { width: 100%; } .frow .col-xs-1-12 { width: 8.3333333333%; } .frow .col-xs-2-12 { width: 16.6666666667%; } .frow .col-xs-3-12 { width: 25%; } .frow .col-xs-4-12 { width: 33.3333333333%; } .frow .col-xs-5-12 { width: 41.6666666667%; } .frow .col-xs-6-12 { width: 50%; } .frow .col-xs-7-12 { width: 58.3333333333%; } .frow .col-xs-8-12 { width: 66.6666666667%; } .frow .col-xs-9-12 { width: 75%; } .frow .col-xs-10-12 { width: 83.3333333333%; } .frow .col-xs-11-12 { width: 91.6666666667%; } .frow .col-xs-12-12 { width: 100%; } } @media (min-width: 768px) { .frow .col-sm-1-1 { width: 100%; } .frow .col-sm-1-2 { width: 50%; } .frow .col-sm-2-2 { width: 100%; } .frow .col-sm-1-3 { width: 33.3333333333%; } .frow .col-sm-2-3 { width: 66.6666666667%; } .frow .col-sm-3-3 { width: 100%; } .frow .col-sm-1-4 { width: 25%; } .frow .col-sm-2-4 { width: 50%; } .frow .col-sm-3-4 { width: 75%; } .frow .col-sm-4-4 { width: 100%; } .frow .col-sm-1-5 { width: 20%; } .frow .col-sm-2-5 { width: 40%; } .frow .col-sm-3-5 { width: 60%; } .frow .col-sm-4-5 { width: 80%; } .frow .col-sm-5-5 { width: 100%; } .frow .col-sm-1-6 { width: 16.6666666667%; } .frow .col-sm-2-6 { width: 33.3333333333%; } .frow .col-sm-3-6 { width: 50%; } .frow .col-sm-4-6 { width: 66.6666666667%; } .frow .col-sm-5-6 { width: 83.3333333333%; } .frow .col-sm-6-6 { width: 100%; } .frow .col-sm-1-7 { width: 14.2857142857%; } .frow .col-sm-2-7 { width: 28.5714285714%; } .frow .col-sm-3-7 { width: 42.8571428571%; } .frow .col-sm-4-7 { width: 57.1428571429%; } .frow .col-sm-5-7 { width: 71.4285714286%; } .frow .col-sm-6-7 { width: 85.7142857143%; } .frow .col-sm-7-7 { width: 100%; } .frow .col-sm-1-8 { width: 12.5%; } .frow .col-sm-2-8 { width: 25%; } .frow .col-sm-3-8 { width: 37.5%; } .frow .col-sm-4-8 { width: 50%; } .frow .col-sm-5-8 { width: 62.5%; } .frow .col-sm-6-8 { width: 75%; } .frow .col-sm-7-8 { width: 87.5%; } .frow .col-sm-8-8 { width: 100%; } .frow .col-sm-1-9 { width: 11.1111111111%; } .frow .col-sm-2-9 { width: 22.2222222222%; } .frow .col-sm-3-9 { width: 33.3333333333%; } .frow .col-sm-4-9 { width: 44.4444444444%; } .frow .col-sm-5-9 { width: 55.5555555556%; } .frow .col-sm-6-9 { width: 66.6666666667%; } .frow .col-sm-7-9 { width: 77.7777777778%; } .frow .col-sm-8-9 { width: 88.8888888889%; } .frow .col-sm-9-9 { width: 100%; } .frow .col-sm-1-10 { width: 10%; } .frow .col-sm-2-10 { width: 20%; } .frow .col-sm-3-10 { width: 30%; } .frow .col-sm-4-10 { width: 40%; } .frow .col-sm-5-10 { width: 50%; } .frow .col-sm-6-10 { width: 60%; } .frow .col-sm-7-10 { width: 70%; } .frow .col-sm-8-10 { width: 80%; } .frow .col-sm-9-10 { width: 90%; } .frow .col-sm-10-10 { width: 100%; } .frow .col-sm-1-11 { width: 9.0909090909%; } .frow .col-sm-2-11 { width: 18.1818181818%; } .frow .col-sm-3-11 { width: 27.2727272727%; } .frow .col-sm-4-11 { width: 36.3636363636%; } .frow .col-sm-5-11 { width: 45.4545454545%; } .frow .col-sm-6-11 { width: 54.5454545455%; } .frow .col-sm-7-11 { width: 63.6363636364%; } .frow .col-sm-8-11 { width: 72.7272727273%; } .frow .col-sm-9-11 { width: 81.8181818182%; } .frow .col-sm-10-11 { width: 90.9090909091%; } .frow .col-sm-11-11 { width: 100%; } .frow .col-sm-1-12 { width: 8.3333333333%; } .frow .col-sm-2-12 { width: 16.6666666667%; } .frow .col-sm-3-12 { width: 25%; } .frow .col-sm-4-12 { width: 33.3333333333%; } .frow .col-sm-5-12 { width: 41.6666666667%; } .frow .col-sm-6-12 { width: 50%; } .frow .col-sm-7-12 { width: 58.3333333333%; } .frow .col-sm-8-12 { width: 66.6666666667%; } .frow .col-sm-9-12 { width: 75%; } .frow .col-sm-10-12 { width: 83.3333333333%; } .frow .col-sm-11-12 { width: 91.6666666667%; } .frow .col-sm-12-12 { width: 100%; } } @media (min-width: 992px) { .frow .col-md-1-1 { width: 100%; } .frow .col-md-1-2 { width: 50%; } .frow .col-md-2-2 { width: 100%; } .frow .col-md-1-3 { width: 33.3333333333%; } .frow .col-md-2-3 { width: 66.6666666667%; } .frow .col-md-3-3 { width: 100%; } .frow .col-md-1-4 { width: 25%; } .frow .col-md-2-4 { width: 50%; } .frow .col-md-3-4 { width: 75%; } .frow .col-md-4-4 { width: 100%; } .frow .col-md-1-5 { width: 20%; } .frow .col-md-2-5 { width: 40%; } .frow .col-md-3-5 { width: 60%; } .frow .col-md-4-5 { width: 80%; } .frow .col-md-5-5 { width: 100%; } .frow .col-md-1-6 { width: 16.6666666667%; } .frow .col-md-2-6 { width: 33.3333333333%; } .frow .col-md-3-6 { width: 50%; } .frow .col-md-4-6 { width: 66.6666666667%; } .frow .col-md-5-6 { width: 83.3333333333%; } .frow .col-md-6-6 { width: 100%; } .frow .col-md-1-7 { width: 14.2857142857%; } .frow .col-md-2-7 { width: 28.5714285714%; } .frow .col-md-3-7 { width: 42.8571428571%; } .frow .col-md-4-7 { width: 57.1428571429%; } .frow .col-md-5-7 { width: 71.4285714286%; } .frow .col-md-6-7 { width: 85.7142857143%; } .frow .col-md-7-7 { width: 100%; } .frow .col-md-1-8 { width: 12.5%; } .frow .col-md-2-8 { width: 25%; } .frow .col-md-3-8 { width: 37.5%; } .frow .col-md-4-8 { width: 50%; } .frow .col-md-5-8 { width: 62.5%; } .frow .col-md-6-8 { width: 75%; } .frow .col-md-7-8 { width: 87.5%; } .frow .col-md-8-8 { width: 100%; } .frow .col-md-1-9 { width: 11.1111111111%; } .frow .col-md-2-9 { width: 22.2222222222%; } .frow .col-md-3-9 { width: 33.3333333333%; } .frow .col-md-4-9 { width: 44.4444444444%; } .frow .col-md-5-9 { width: 55.5555555556%; } .frow .col-md-6-9 { width: 66.6666666667%; } .frow .col-md-7-9 { width: 77.7777777778%; } .frow .col-md-8-9 { width: 88.8888888889%; } .frow .col-md-9-9 { width: 100%; } .frow .col-md-1-10 { width: 10%; } .frow .col-md-2-10 { width: 20%; } .frow .col-md-3-10 { width: 30%; } .frow .col-md-4-10 { width: 40%; } .frow .col-md-5-10 { width: 50%; } .frow .col-md-6-10 { width: 60%; } .frow .col-md-7-10 { width: 70%; } .frow .col-md-8-10 { width: 80%; } .frow .col-md-9-10 { width: 90%; } .frow .col-md-10-10 { width: 100%; } .frow .col-md-1-11 { width: 9.0909090909%; } .frow .col-md-2-11 { width: 18.1818181818%; } .frow .col-md-3-11 { width: 27.2727272727%; } .frow .col-md-4-11 { width: 36.3636363636%; } .frow .col-md-5-11 { width: 45.4545454545%; } .frow .col-md-6-11 { width: 54.5454545455%; } .frow .col-md-7-11 { width: 63.6363636364%; } .frow .col-md-8-11 { width: 72.7272727273%; } .frow .col-md-9-11 { width: 81.8181818182%; } .frow .col-md-10-11 { width: 90.9090909091%; } .frow .col-md-11-11 { width: 100%; } .frow .col-md-1-12 { width: 8.3333333333%; } .frow .col-md-2-12 { width: 16.6666666667%; } .frow .col-md-3-12 { width: 25%; } .frow .col-md-4-12 { width: 33.3333333333%; } .frow .col-md-5-12 { width: 41.6666666667%; } .frow .col-md-6-12 { width: 50%; } .frow .col-md-7-12 { width: 58.3333333333%; } .frow .col-md-8-12 { width: 66.6666666667%; } .frow .col-md-9-12 { width: 75%; } .frow .col-md-10-12 { width: 83.3333333333%; } .frow .col-md-11-12 { width: 91.6666666667%; } .frow .col-md-12-12 { width: 100%; } } @media (min-width: 1200px) { .frow .col-lg-1-1 { width: 100%; } .frow .col-lg-1-2 { width: 50%; } .frow .col-lg-2-2 { width: 100%; } .frow .col-lg-1-3 { width: 33.3333333333%; } .frow .col-lg-2-3 { width: 66.6666666667%; } .frow .col-lg-3-3 { width: 100%; } .frow .col-lg-1-4 { width: 25%; } .frow .col-lg-2-4 { width: 50%; } .frow .col-lg-3-4 { width: 75%; } .frow .col-lg-4-4 { width: 100%; } .frow .col-lg-1-5 { width: 20%; } .frow .col-lg-2-5 { width: 40%; } .frow .col-lg-3-5 { width: 60%; } .frow .col-lg-4-5 { width: 80%; } .frow .col-lg-5-5 { width: 100%; } .frow .col-lg-1-6 { width: 16.6666666667%; } .frow .col-lg-2-6 { width: 33.3333333333%; } .frow .col-lg-3-6 { width: 50%; } .frow .col-lg-4-6 { width: 66.6666666667%; } .frow .col-lg-5-6 { width: 83.3333333333%; } .frow .col-lg-6-6 { width: 100%; } .frow .col-lg-1-7 { width: 14.2857142857%; } .frow .col-lg-2-7 { width: 28.5714285714%; } .frow .col-lg-3-7 { width: 42.8571428571%; } .frow .col-lg-4-7 { width: 57.1428571429%; } .frow .col-lg-5-7 { width: 71.4285714286%; } .frow .col-lg-6-7 { width: 85.7142857143%; } .frow .col-lg-7-7 { width: 100%; } .frow .col-lg-1-8 { width: 12.5%; } .frow .col-lg-2-8 { width: 25%; } .frow .col-lg-3-8 { width: 37.5%; } .frow .col-lg-4-8 { width: 50%; } .frow .col-lg-5-8 { width: 62.5%; } .frow .col-lg-6-8 { width: 75%; } .frow .col-lg-7-8 { width: 87.5%; } .frow .col-lg-8-8 { width: 100%; } .frow .col-lg-1-9 { width: 11.1111111111%; } .frow .col-lg-2-9 { width: 22.2222222222%; } .frow .col-lg-3-9 { width: 33.3333333333%; } .frow .col-lg-4-9 { width: 44.4444444444%; } .frow .col-lg-5-9 { width: 55.5555555556%; } .frow .col-lg-6-9 { width: 66.6666666667%; } .frow .col-lg-7-9 { width: 77.7777777778%; } .frow .col-lg-8-9 { width: 88.8888888889%; } .frow .col-lg-9-9 { width: 100%; } .frow .col-lg-1-10 { width: 10%; } .frow .col-lg-2-10 { width: 20%; } .frow .col-lg-3-10 { width: 30%; } .frow .col-lg-4-10 { width: 40%; } .frow .col-lg-5-10 { width: 50%; } .frow .col-lg-6-10 { width: 60%; } .frow .col-lg-7-10 { width: 70%; } .frow .col-lg-8-10 { width: 80%; } .frow .col-lg-9-10 { width: 90%; } .frow .col-lg-10-10 { width: 100%; } .frow .col-lg-1-11 { width: 9.0909090909%; } .frow .col-lg-2-11 { width: 18.1818181818%; } .frow .col-lg-3-11 { width: 27.2727272727%; } .frow .col-lg-4-11 { width: 36.3636363636%; } .frow .col-lg-5-11 { width: 45.4545454545%; } .frow .col-lg-6-11 { width: 54.5454545455%; } .frow .col-lg-7-11 { width: 63.6363636364%; } .frow .col-lg-8-11 { width: 72.7272727273%; } .frow .col-lg-9-11 { width: 81.8181818182%; } .frow .col-lg-10-11 { width: 90.9090909091%; } .frow .col-lg-11-11 { width: 100%; } .frow .col-lg-1-12 { width: 8.3333333333%; } .frow .col-lg-2-12 { width: 16.6666666667%; } .frow .col-lg-3-12 { width: 25%; } .frow .col-lg-4-12 { width: 33.3333333333%; } .frow .col-lg-5-12 { width: 41.6666666667%; } .frow .col-lg-6-12 { width: 50%; } .frow .col-lg-7-12 { width: 58.3333333333%; } .frow .col-lg-8-12 { width: 66.6666666667%; } .frow .col-lg-9-12 { width: 75%; } .frow .col-lg-10-12 { width: 83.3333333333%; } .frow .col-lg-11-12 { width: 91.6666666667%; } .frow .col-lg-12-12 { width: 100%; } } .frow-container { width: 100%; margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } @media (min-width: 768px) { .frow-container { max-width: 750px; } } @media (min-width: 992px) { .frow-container { max-width: 970px; } } @media (min-width: 1200px) { .frow-container { max-width: 1170px; } } .visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; } .hidden-xs, .hidden-sm, .hidden-md, .hidden-lg { display: block !important; } .frow.hidden-xs, .frow.hidden-sm, .frow.hidden-md, .frow.hidden-lg { display: flex !important; } @media (max-width: 767px) { .visible-xs { display: block !important; } .frow.visible-xs { display: flex !important; } .hidden-xs, .frow.hidden-xs { display: none !important; } } @media (min-width: 768px) and (max-width: 991px) { .visible-sm { display: block !important; } .frow.visible-sm { display: flex !important; } .hidden-sm, .frow.hidden-sm { display: none !important; } } @media (min-width: 992px) and (max-width: 1199px) { .visible-md { display: block !important; } .frow.visible-md { display: flex !important; } .hidden-md, .frow.hidden-md { display: none !important; } } @media (min-width: 1200px) { .visible-lg { display: block !important; } .frow.visible-lg { display: flex !important; } .hidden-lg, .frow.hidden-lg { display: none !important; } } @media (max-width: 767px) { .frow.direction-row-xs { flex-direction: row; } .frow.direction-reverse-xs { flex-direction: row-reverse; } .frow.direction-column-xs { flex-direction: column; } .frow.direction-column-reverse-xs { flex-direction: column-reverse; } } @media (min-width: 768px) and (max-width: 991px) { .frow.direction-row-sm { flex-direction: row; } .frow.direction-reverse-sm { flex-direction: row-reverse; } .frow.direction-column-sm { flex-direction: column; } .frow.direction-column-reverse-sm { flex-direction: column-reverse; } } @media (min-width: 992px) and (max-width: 1199px) { .frow.direction-row-md { flex-direction: row; } .frow.direction-reverse-md { flex-direction: row-reverse; } .frow.direction-column-md { flex-direction: column; } .frow.direction-column-reverse-md { flex-direction: column-reverse; } } @media (min-width: 1200px) { .frow.direction-row-lg { flex-direction: row; } .frow.direction-reverse-lg { flex-direction: row-reverse; } .frow.direction-column-lg { flex-direction: column; } .frow.direction-column-reverse-lg { flex-direction: column-reverse; } } .m-0 { margin: 0px !important; } .m-5 { margin: 5px !important; } .m-10 { margin: 10px !important; } .m-15 { margin: 15px !important; } .m-20 { margin: 20px !important; } .m-25 { margin: 25px !important; } .m-30 { margin: 30px !important; } .m-40 { margin: 40px !important; } .m-50 { margin: 50px !important; } .m-60 { margin: 60px !important; } .m-70 { margin: 70px !important; } .m-80 { margin: 80px !important; } .m-90 { margin: 90px !important; } .m-100 { margin: 100px !important; } .m-auto { margin: auto !important; } .mx-0 { margin-right: 0px !important; margin-left: 0px !important; } .mx-5 { margin-right: 5px !important; margin-left: 5px !important; } .mx-10 { margin-right: 10px !important; margin-left: 10px !important; } .mx-15 { margin-right: 15px !important; margin-left: 15px !important; } .mx-20 { margin-right: 20px !important; margin-left: 20px !important; } .mx-25 { margin-right: 25px !important; margin-left: 25px !important; } .mx-30 { margin-right: 30px !important; margin-left: 30px !important; } .mx-40 { margin-right: 40px !important; margin-left: 40px !important; } .mx-50 { margin-right: 50px !important; margin-left: 50px !important; } .mx-60 { margin-right: 60px !important; margin-left: 60px !important; } .mx-70 { margin-right: 70px !important; margin-left: 70px !important; } .mx-80 { margin-right: 80px !important; margin-left: 80px !important; } .mx-90 { margin-right: 90px !important; margin-left: 90px !important; } .mx-100 { margin-right: 100px !important; margin-left: 100px !important; } .mx-auto { margin-right: auto !important; margin-left: auto !important; } .my-0 { margin-top: 0px !important; margin-bottom: 0px !important; } .my-5 { margin-top: 5px !important; margin-bottom: 5px !important; } .my-10 { margin-top: 10px !important; margin-bottom: 10px !important; } .my-15 { margin-top: 15px !important; margin-bottom: 15px !important; } .my-20 { margin-top: 20px !important; margin-bottom: 20px !important; } .my-25 { margin-top: 25px !important; margin-bottom: 25px !important; } .my-30 { margin-top: 30px !important; margin-bottom: 30px !important; } .my-40 { margin-top: 40px !important; margin-bottom: 40px !important; } .my-50 { margin-top: 50px !important; margin-bottom: 50px !important; } .my-60 { margin-top: 60px !important; margin-bottom: 60px !important; } .my-70 { margin-top: 70px !important; margin-bottom: 70px !important; } .my-80 { margin-top: 80px !important; margin-bottom: 80px !important; } .my-90 { margin-top: 90px !important; margin-bottom: 90px !important; } .my-100 { margin-top: 100px !important; margin-bottom: 100px !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-0 { margin-top: 0px !important; } .mt-5 { margin-top: 5px !important; } .mt-10 { margin-top: 10px !important; } .mt-15 { margin-top: 15px !important; } .mt-20 { margin-top: 20px !important; } .mt-25 { margin-top: 25px !important; } .mt-30 { margin-top: 30px !important; } .mt-40 { margin-top: 40px !important; } .mt-50 { margin-top: 50px !important; } .mt-60 { margin-top: 60px !important; } .mt-70 { margin-top: 70px !important; } .mt-80 { margin-top: 80px !important; } .mt-90 { margin-top: 90px !important; } .mt-100 { margin-top: 100px !important; } .mt-auto { margin-top: auto !important; } .mr-0 { margin-right: 0px !important; } .mr-5 { margin-right: 5px !important; } .mr-10 { margin-right: 10px !important; } .mr-15 { margin-right: 15px !important; } .mr-20 { margin-right: 20px !important; } .mr-25 { margin-right: 25px !important; } .mr-30 { margin-right: 30px !important; } .mr-40 { margin-right: 40px !important; } .mr-50 { margin-right: 50px !important; } .mr-60 { margin-right: 60px !important; } .mr-70 { margin-right: 70px !important; } .mr-80 { margin-right: 80px !important; } .mr-90 { margin-right: 90px !important; } .mr-100 { margin-right: 100px !important; } .mr-auto { margin-right: auto !important; } .mb-0 { margin-bottom: 0px !important; } .mb-5 { margin-bottom: 5px !important; } .mb-10 { margin-bottom: 10px !important; } .mb-15 { margin-bottom: 15px !important; } .mb-20 { margin-bottom: 20px !important; } .mb-25 { margin-bottom: 25px