@font-face { font-family: 'Museo'; font-style: normal; font-weight: 700; src: url('../fonts/museo/ex-museo-700.ttf') format('truetype'), url('../fonts/museo/ex-museo-700.woff') format('woff'), url('../fonts/museo/ex-museo-700.woff2') format('woff2'); font-display: swap; } @charset "UTF-8"; :root { --font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --body-font-family: "Roboto", serif; --body-font-size: 1.0rem; --body-font-color: #000000; --body-light-weight: 300; --body-regular-weight: 400; --body-medium-weight: 500; --body-strong-weight: 600; --body-stronger-weight: 700; --body-line-height: 1.35; --link-color: #7F2F99; --link-hover-color: #A04FBC; /* TITLES */ /* Unused */ --headings-font-family: 'Museo', serif; --headings-font-weight: 700; --headings-font-style: normal; --headings-margin-bottom: 1.25rem; --h1-font-size: 40px; --h1-line-height: 1.2; --h2-font-size: 32px; --h2-line-height: 1.2; --h3-font-size: 28px; --h3-line-height: 1.2; --h4-font-size: 24px; --h4-line-height: 1.2; --h5-font-size: 20px; --h5-line-height: 1.2; --h6-font-size: 18px; --h6-line-height: 1.2; --alert-success-background: #88FFD1; --alert-success-color: var(--body-font-color); --alert-info-background: #eceff9; --alert-info-color: var(--body-font-color); --alert-warning-background: #fef3d3; --alert-warning-color: var(--body-font-color); --alert-danger-background: #ffabb0; --alert-danger-color: var(--body-font-color); /* BUTTONS */ --button-height: 42px; --button-height-sm: calc(var(--button-height) * 0.8); --button-height-md: calc(var(--button-height) * 1.2); --button-height-lg: calc(var(--button-height) * 1.6); --button-radius: 3px; /* *0 OR / 2 */ --button-font-weight: var(--body-regular-weight); --button-font-size: 0.94rem; --button-line-height: 1.25; --button-padding: 0px 20px; --button-gap: 0 8px; --button-border-width: 2px; --button-shadow: 0px 11px 25px rgba(0, 0, 0, 0.15), 0px 37px 35px rgba(0, 0, 0, 0.15); --button-transition: ease-in-out 0.2s; /* FORMS */ --form-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); --form-border-width: 1px; --form-border-color: #1f272b; --form-outline-width: 2px; --form-outline-color: #ece6e3; --form-border-radius: .175rem; } #debugger { display: inline-block; position: fixed; bottom: 30px; left: 0; z-index: 999; } #debugger summary { list-style: none; } #debugger summary::marker, #debugger summary::-webkit-details-marker { display:none; } #debugger summary::before { display: inline-block; background-color: #fff; color: #840372; font-size: 11px; font-weight: 600; padding: 2px 2px; line-height: 1; content: '∞'; box-shadow: 0 1px 1px rgba(0,0,0,0.35); } :root { color-scheme: light; supported-color-schemes: light; } @media (prefers-color-scheme: dark) { /* target devices or user preferences that have a dark color scheme set. */ :root { color-scheme: light; } /* sets the color-scheme property of the HTML document, usually the tag to light. */ } * { min-height: 0; min-width: 0; } *, *::before, *::after { box-sizing: border-box; } @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } } @media (prefers-reduced-motion: reduce) { .form-control { transition: none; } .form-select { transition: none; } } html { scroll-behavior: smooth; } body { font-weight: var(--body-light-weight); font-family: var(--body-font-family); font-size: var(--body-font-size); line-height: var(--body-line-height); color: var(--body-font-color); font-optical-sizing: auto; margin: 0; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* overflow-x: hidden; - DO NOT USE HERE, OTHERWISE POSITION SITCKY DOESN'T WORK! */ } main a, main button, main input, main select, main textarea, main h2, main h3, main h4, main [tabindex="0"] { scroll-margin-top: 80px; scroll-margin-bottom: 100px; } hr { margin: 1.5rem 0; color: inherit; border: 0; border-top: 1px solid transparent; opacity: 1; border-color: rgba(0, 0, 0, 0.1); border-color: #BEBED3; } h6, h5, h4, h3, h2, h1 { font-family: var(--headings-font-family); margin-bottom: var(--headings-margin-bottom); font-weight: var(--headings-font-weight); font-style: var(--headings-font-style); margin-top: 0; } h1, .h1 { font-size: var(--h1-font-size); line-height: var(--h1-line-height); } h2, .h2 { font-size:var(--h2-font-size); line-height: var(--h2-line-height); } h3, .h3 { font-size:var(--h3-font-size); line-height: var(--h3-line-height); } h4, .h4 { font-size:var(--h4-font-size); line-height: var(--h4-line-height); } h5, .h5 { font-size:var(--h5-font-size); line-height: var(--h5-line-height); } h6, .h6 { font-size:var(--h6-font-size); line-height: var(--h6-line-height); } .h7 { font-size:var(--h7-font-size); line-height: var(--h7-line-height); } p { margin-top: 0; margin-bottom: 1rem; } abbr[title] { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; } address { margin-bottom: 0; font-style: normal; line-height: inherit; } dl { margin-top: 0; margin-bottom: 1rem; } dt { font-weight: inherit; } dd { margin-bottom: 0; margin-left: 0; } small, .small { font-size: 80%; } mark, .mark { background-color: transparent; /* padding: 0.1875em; */ } sub, sup { position: relative; font-size: 80%; line-height: 0; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img,svg {vertical-align: middle;} img {max-width: 100%; height: auto; } table { caption-side: bottom; border-collapse: collapse; } th { text-align: inherit; text-align: -webkit-match-parent; } thead, tbody, tfoot, tr, td, th { border-color: inherit; border-style: solid; border-width: 0; } label { display: inline-block; } button{border-radius:0} button:focus:not(:focus-visible){outline:0} input,button,select,optgroup,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit; outline: none; } button,select{text-transform:none} [role=button]{cursor:pointer} select{word-wrap:normal} select:disabled{opacity:1} [list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important} button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button} button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer} ::placeholder{opacity:0.4;color:inherit;} ::-moz-placeholder{opacity:0.4;color:inherit;} ::-webkit-input-placeholder{opacity:0.4;color:inherit;} ::-moz-focus-inner{padding:0;border-style:none} textarea{resize:vertical} figure { margin: 0; margin-bottom: 1.0rem; } figure figcaption { /* padding-top: 8px; font-size: 88%; opacity:0.5; font-style: italic; */ } fieldset{min-width:0;padding:0;margin:0;border:0} legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + 0.3vw);line-height:inherit} legend + * { clear: left; } ::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-text,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding:0} ::-webkit-inner-spin-button{height:auto} [type=search]{outline-offset:-2px;-webkit-appearance:textfield} ::-webkit-search-decoration{-webkit-appearance:none} ::-webkit-color-swatch-wrapper{padding:0} ::-webkit-file-upload-button{font:inherit;-webkit-appearance:button} ::file-selector-button{font:inherit;-webkit-appearance:button} /* input:-internal-autofill-selected being overridden on Chrome (via webkit) */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:active, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus, select:-webkit-autofill:active { -webkit-text-fill-color: inherit; /* text color */ -webkit-box-shadow: 0 0 0px 1000px transparent inset; /* background color */ transition: background-color 5000s ease-in-out 0s; } input[type=number]{ -moz-appearance: textfield; appearance: textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; opacity: 1; } output{display:inline-block} iframe{border:0} blockquote { margin: 0 0 1rem 0; } summary{display:list-item;cursor:pointer} progress{vertical-align:baseline} [hidden]{display:none!important} pre, code, kbd, samp { font-family: var(--font-monospace); font-size: 1em; } b, strong { font-weight: var(--body-regular-weight); } .strong { font-weight: var(--body-strong-weight); } .stronger { font-weight: var(--body-stronger-weight); } a { color: var(--link-color); text-decoration: underline; } a:hover { color: var(--link-hover-color); text-decoration: none; } a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; } /* COMPONENTS */ .text-start{text-align:left} .text-end{text-align:right} .text-center{text-align:center}.text-break { word-wrap: break-word; word-break: break-word; } .text-uppercase { text-transform: uppercase; } .ratio { display: block; position:relative; width:100%; } .ratio::before{display:block;padding-top:var(--aspect-ratio);content:""} .ratio > *{ display: block; position:absolute;top:0;left:0;width:100%;height:100%} .ratio-1x1{--aspect-ratio:100%} .ratio-4x3{--aspect-ratio:calc(3 / 4 * 100%)} .ratio-16x9{--aspect-ratio:calc(9 / 16 * 100%)} .ratio-21x9{--aspect-ratio:calc(9 / 21 * 100%)} .ratio-3x4{--aspect-ratio:calc(4 / 3 * 100%)} .ratio-9x16{--aspect-ratio:calc(16 / 9 * 100%)} .ratio-9x21{--aspect-ratio:calc(21 / 9 * 100%)} .ratio-rounded { border-radius: var(--button-radius); overflow: hidden; } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } .clearfix, .clear { visibility:hidden; display:block; font-size:0; content:''; clear:both; height:0; } .clearfix::after{display:block;clear:both;content:""} .trans { --webkit-transition:all 0.2s; --moz-transition:all 0.2s; transition:all 0.2s; } .img-cover { width: 100%; height: 100%; object-fit: cover; } .img-contain { width: 100%; height: 100%; object-fit: contain; } .img-contain.left { object-position: left; } .img-contain.right { object-position: right; } .img-contain.top { object-position: top; } .img-contain.bottom { object-position: bottom; } .cover { background-size: cover; background-position: center center; background-repeat: no-repeat; } .alert { padding: 20px; border-radius: 4px; margin-bottom: 20px; color: var(--alert-success-color); } .alert-success { background-color: var(--alert-success-background); } .alert-info { background-color: var(--alert-info-background); } .alert-warning { background-color: var( --alert-warning-background); } .alert-danger { background-color: var(--alert-danger-background); } /* GRID SYSTEM - https://www.mozilla.org/en-GB/firefox/119.0/whatsnew/ */ .container, .container-fluid { --container-gutter: 20px; /* zoom: 1; -> WARNING: This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”. */ margin: 0 auto; width: 100%; padding-right: var(--container-gutter); padding-left: var(--container-gutter); } .container-fluid { max-width: 100%; } .container.container-narrow { max-width: 92%; } .container.container-narrower { max-width: 82%; } .vertically-centered { display: flex; flex-direction: column; flex: 1; justify-content: center; } /* -------------------------------> BUTTONS <------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; height: var(--button-height); padding: var(--button-padding); font-size: var(--button-font-size); line-height: var(--button-line-height); gap: var(--button-gap); border-radius: var(--button-radius); font-weight: var(--button-font-weight); border: var(--button-border-width) solid transparent; white-space: nowrap; vertical-align: middle; text-decoration: none; background-color: transparent; -webkit-transition:var(--button-transition); -moz-transition:var(--button-transition); transition:var(--button-transition); min-width: 120px; } .btn:hover { text-decoration: none; } .btn-solid strong, .btn-outline strong { font-weight: 600; } .btn-block { display: flex; } .btn.has_shadow { box-shadow: var(--button-shadow); } .btn .icon { line-height: 1; font-size: 100%; } /* .btn Sizes */ .btn-sm { font-size: 13px; padding-left: 10px; padding-right: 10px; height: var(--button-height-sm); } .btn-sm.btn-solid, .btn-sm.btn-outline { } /* .btn */ .btn-md.btn-solid, .btn-md.btn-outline { font-size: 16px; height: var(--button-height-md); } .btn-lg.btn-solid, .btn-lg.btn-outline { font-size: 18px; height: var(--button-height-lg); padding-left: 30px; padding-right: 30px; } /* Link */ .btn-link[data-theme="white"] { color: var(--color-white); } .btn-link:hover .label { text-decoration: underline; } /* Solid */ .btn-solid { } .btn-solid[data-theme="white"], .btn-solid[data-theme="white"]:hover { border-color: var(--color-white); background-color: var(--color-white); color: var(--body-font-color); } .btn-solid[data-theme="orange"] { border-color: var(--color-orange); background-color: var(--color-orange); color: var(--color-white); } .btn-solid[data-theme="orange"]:hover { border-color: var(--color-orange); background-color: var(--color-orange); color: var(--color-white); } .btn-solid[data-theme="blue"] { border-color: var(--color-blue); background-color: var(--color-blue); color: var(--color-white); } .btn-solid[data-theme="blue"]:hover { border-color: var(--color-blue); background-color: var(--color-blue); color: var(--color-white); } /* Outlined */ .btn-outline { background-color: transparent; } .btn-outline[data-theme="white"] { border-color: var(--color-white); color: var(--color-white); } .btn-outline[data-theme="white"]:hover { border-color: var(--color-white); background-color: var(--color-white); color: var(--body-font-color); } .btn-outline[data-theme="blue"] { border-color: var(--color-blue); color: var(--color-blue); } .btn-outline[data-theme="blue"]:hover { border-color: var(--color-blue); color: var(--color-white); background-color: var(--color-blue); } /* GRID SYSTEM */ .grid { --row-gap-v: 30px; --row-gap-h: var(--row-gap-v); --column-gap: var(--row-gap-h); display: grid; gap: var(--row-gap-v) var(--row-gap-h); column-gap: var(--column-gap); /* place-items: center; */ grid-template-rows: auto; /* max-content 1fr; */ grid-template-columns: repeat(12, 1fr); } .grid-reverse { } /* not possible */ .grid[data-columns="12"] { grid-template-columns: repeat(12, 1fr); } .grid[data-columns="16"] { grid-template-columns: repeat(16, 1fr); } .grid > .cell-1{grid-column:span 1} .grid > .cell-2{grid-column:span 2} .grid > .cell-3{grid-column:span 3} .grid > .cell-4{grid-column:span 4} .grid > .cell-5{grid-column:span 5} .grid > .cell-6{grid-column:span 6} .grid > .cell-7{grid-column:span 7} .grid > .cell-8{grid-column:span 8} .grid > .cell-9{grid-column:span 9} .grid > .cell-10{grid-column:span 10} .grid > .cell-11{grid-column:span 11} .grid > .cell-12{grid-column:span 12} .grid > .cell-13{grid-column:span 13} .grid > .cell-14{grid-column:span 14} .grid > .cell-15{grid-column:span 15} .grid > .cell-16{grid-column:span 16} .grid > [class*="cell-"] > .cell-inner { display: flex; flex-direction: column; height: 100%; } .grid.gap-0 { gap: 0 0; column-gap: 0; } .grid.gap-sm { gap: calc(var(--row-gap-v) * 0.5) calc(var(--row-gap-h)* 0.5); column-gap: calc(var(--column-gap) * 0.5); } .grid.gap-md { gap: calc(var(--row-gap-v) * 1.5) calc(var(--row-gap-h)* 1.5); column-gap: calc(var(--column-gap) * 1.5); } .grid.gap-lg { gap: calc(var(--row-gap-v) * 2.0) calc(var(--row-gap-h)* 2.0); column-gap: calc(var(--column-gap) * 2.0); } .grid.gap-xl { gap: calc(var(--row-gap-v) * 3.0) calc(var(--row-gap-h)* 3.0); column-gap: calc(var(--column-gap) * 3.0); } /* FLEX SYSTEM */ ul.row, ol.row { margin: 0; padding: 0; list-style: none none; list-style-position: inside; } .row { --column-gutter-default: 30px; --column-gutter: var(--column-gutter-default); --row-gutter: var(--column-gutter); display: flex; flex-wrap: wrap; flex-direction: row; /* = flex-flow: row wrap; */ margin-left: calc(var(--column-gutter) / 2 * -1); margin-right: calc(var(--column-gutter) / 2 * -1); column-gap: 0; row-gap: 0; /* = gap: var(--column-gutter) 0; */ } .row-reverse { flex-direction: row-reverse; } .row-center { justify-content: center; } .row-middle { align-items: center; } .row-end { align-items: flex-end; } .row > [class*="col-"] { flex: 0 0 auto; flex-shrink: 0; width: 100%; max-width: 100%; padding-left: calc(var(--column-gutter) / 2); padding-right: calc(var(--column-gutter) / 2); } .row > [class*="col-"] > .col-inner { display: flex; flex-direction: column; height: 100%; position: relative; z-index: 1; } .row > .col-1 { width: 8.33333333%; } .row > .col-2 { width: 16.66666667%; } .row > .col-20 { width: 20%; } .row > .col-3 { width: 25%; } .row > .col-4 { width: 33.33333333%; } .row > .col-5 { width: 41.66666667%; } .row > .col-6 { width: 50%; } .row > .col-7 { width: 58.33333333%; } .row > .col-8 { width: 66.66666667%; } .row > .col-9 { width: 75%; } .row > .col-10 { width: 83.33333333%; } .row > .col-11 { width: 91.66666667%; } .row > .col-12 { width: 100%; } .row.gutter-0 { --column-gutter: 0; } .row.gutter-sm { --column-gutter: 15px; } .row.gutter-md { --column-gutter: 45px; } .row.gutter-lg { --column-gutter: 65px; } .row.gutter-xl { --column-gutter: 90px; } .row.gutter-xxl { --column-gutter: 120px; } /* SPACING */ .mb-5 { margin-bottom: 2.8rem; } .mb-4 { margin-bottom: 2.1rem; } .mb-3 { margin-bottom: 1.4rem; } .mb-2 { margin-bottom: 0.7rem; } .mb-1 { margin-bottom: 0.2rem; } .mb-0 { margin-bottom: 0; } .form-label { display: inline-block; margin-bottom: .25rem; color: var(--form-border-color); } .form-control, .form-select { display: block; width: 100%; padding: .575rem .75rem; font-size: var(--body-font-size); font-weight: var(--body-regular-weight); line-height: 1.5; color: var(--body-font-color); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--color-white); background-clip: padding-box; border: var(--form-border-width) solid var(--form-border-color); border-radius: var(--form-border-radius); outline: var(--form-outline-width) solid var(--form-outline-color); transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; } .form-select { padding-right: .385rem; background-image: var(--form-select-chevron); background-repeat: no-repeat; background-position: right .45rem center; background-size: 24px 18px; } /* CHECKBOXES */ .form-check { display: block; min-height: 1.5rem; padding-left: 1.9em; margin-bottom: .125rem; } .form-check .form-check-input { float: left; margin-left: -1.9em; } .form-check .form-check-label { user-select: none; cursor: pointer; } .form-check-input { flex-shrink: 0; width: 1.35em; height: 1.35em; margin-top: .035em; vertical-align: top; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #ffffff; background-image: var(--form-check-image); background-repeat: no-repeat; background-position: center; background-size: contain; border: var(--form-border-width) solid var(--form-border-color); outline: var(--form-outline-width) solid var(--form-outline-color); -webkit-print-color-adjust: exact; color-adjust: exact; print-color-adjust: exact; } .form-check-input { border-radius: .15em; } .form-check-input:checked[type="checkbox"] { background-color: var(--color-green); border-color: var(--color-green); --form-check-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } /* FORM GROUP */ .input-group { position: relative; display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; } .input-group-text { display: flex; align-items: center; padding: .575rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--body-font-color); text-align: center; white-space: nowrap; background-color: var(--color-grey-light); border: var(--form-border-width) solid var(--bs-border-color); border-radius: var(--form-border-radius); } .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control, .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select, .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > .form-control, .input-group > .input-text, .input-group > .form-floating, .input-group > .form-select { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; } .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { margin-left: calc(var(--bs-border-width) * -1); border-top-left-radius: 0; border-bottom-left-radius: 0; } .nowrap { white-space: nowrap; } .nowrap.long { white-space: pre-line; word-wrap: break-word; word-break: break-all; overflow-wrap: break-word; /* hyphens: auto; */} .form-actions { display: flex; align-items: center; justify-content: space-between; gap: 0 20px; } .form-actions .primary {} .form-actions .secondary {} .form-actions .btn .bi-send-fill { display: inline-block; transform: rotate(0); transition: transform 0.3s ease-in-out; } .form-actions .btn:hover .bi-send-fill { transform: rotate(45deg) translateX(-5px) translateY(5px) scale(1.2); } /* ╔═══════════════════════════════════════════════════════════════════════════════════════════════╗ */ /* ║ ANIMATIONS ║ */ /* ╚═══════════════════════════════════════════════════════════════════════════════════════════════╝ */ .animated { opacity: 0; } /* ╔═══════════════════════════════════════════════════════════════════════════════════════════════╗ */ /* ║ BREAKPOINTS ║ */ /* ╚═══════════════════════════════════════════════════════════════════════════════════════════════╝ */ @media (min-width: 576px) { .container { max-width: 540px; max-width: 100%; } .hidden-sm-up { display: none !important; } } @media (min-width: 768px) { .container { max-width: 720px; max-width: 100%; } .hidden-md-up { display: none !important; } } @media (min-width: 992px) { .container { max-width: 960px; max-width: 100%; } .hidden-lg-up { display: none !important; } } /* @media ---| >= 992px |--- */ @media (min-width: 1280px) { .container { max-width: 1170px; max-width: 100%; } .hidden-xl-up { display: none !important; } } @media (min-width: 1366px) { .container { max-width: 1190px; } /* was 1170px ; 1190px; 1278px; 1320px */ .hidden-xxl-up { display: none !important; } } @media (min-width: 1440px) { .container { /* max-width: 1352px; */ } .hidden-3xl-up { display: none !important; } } @media (min-width: 1600px) { .container { /* max-width: 1512px; */ } .hidden-4xl-up { display: none !important; } } @media (min-width: 1920px) { .container { /* max-width: 90%; */ } } /* 1920px & Up */ /* ╔══════════════════════════════════════════════════════════════════════════════════════════════════════╗ */ /* ║ #################################### DEVELOPMENT BREAKPOINTS ################################## ║ */ /* ╚══════════════════════════════════════════════════════════════════════════════════════════════════════╝ */ /* 4XL */ @media (max-width: 1919.98px) { #debugger summary::before { content:'4XL'; } .row[data-collapse="4xl"] > [class*="col-"] { width: 100%; } } /* @media ---| width < 1920px |--- */ /* 3XL */ @media (max-width: 1599.98px) { #debugger summary::before { content:'3XL'; } .row[data-collapse="3xl"] > [class*="col-"] { width: 100%; } .container.container-narrow, .container.container-narrower { max-width: 94%; } } /* @media ---| width < 1600px |--- */ /* 2XL */ @media (max-width: 1439.98px) { #debugger summary::before { content:'XXL'; } .hidden-xxl-down { display: none !important; } .row[data-collapse="2xl"] > [class*="col-"] { width: 100%; } } /* @media ---| width < 1440px |--- */ /* XL */ @media (max-width: 1365.98px) { :root { } #debugger summary::before { content:'XL'; } .hidden-xl-down { display: none !important; } .row[data-collapse="xl"] > [class*="col-"] { width: 100%; } .row.gutter-0, .row.gutter-sm, .row.gutter-md, .row.gutter-lg, .row.gutter-xl, .row.gutter-xxl { --column-gutter: 30px; } } /* @media ---| width < 1366px |--- */ /* LG */ @media (max-width: 1279.98px) { :root { } #debugger summary::before { content:'LG'; } .hidden-lg-down { display: none !important; } .row[data-collapse="lg"] > [class*="col-"] { width: 100%; } .container.container-narrow, .container.container-narrower { max-width: 98%; } } /* @media ---| width < 1200px |--- */ /* MD */ @media (max-width: 991.98px) { #debugger summary::before { content:'MD'; } :root { --button-padding: 0 20px; --h1-font-size: 30px; --h2-font-size: 26px; --h3-font-size: 22px; --h4-font-size: 20px; } .hidden-md-down { display: none !important; } .row[data-collapse="md"] > [class*="col-"] { width: 100%; } .form-actions { display: block; } .form-actions .primary { margin-bottom: 20px; } .form-actions .secondary {} .row-services > [class*="col-"] { width: 50%; } } /* @media ---| width < 992px |--- */ /* SM */ @media (max-width: 767.98px) { #debugger summary::before { content:'SM'; } :root { --body-font-size: 0.96rem; --h1-font-size: 26px; --h2-font-size: 22px; --h3-font-size: 20px; --h4-font-size: 18px; } .hidden-sm-down { display: none !important; } .alert { padding: 15px; } .row > [class*="col-"], .row[data-collapse="sm"] > [class*="col-"] { width: 100%; } hr { margin: 1.0rem 0; } .container.container-narrow, .container.container-narrower { max-width: 100%; padding-left: 0; padding-right: 0; } } /* @media ---| width < 768px |--- */ /* XS */ @media (max-width: 575.98px) and (orientation:landscape) {} @media (max-width: 575.98px) { #debugger summary::before { content:'XS'; } :root { --body-font-size: 0.94rem; --h1-font-size: 24px; --h2-font-size: 20px; --h3-font-size: 18px; --h4-font-size: 17px; } .hidden-xs-down { display: none !important; } .row[data-collapse="xs"] > [class*="col-"] { width: 100%; } } /* @media ---| width < 576px |--- */ @media screen and (min-width: 320px) and (max-width: 767.98px) and (orientation: landscape) { } /* XXS */ @media (max-width: 319.98px) and (orientation:landscape) {} @media (max-width: 319.98px) { :root { --body-font-size: 0.92rem; --h1-font-size: 20px; --h2-font-size: 18px; --h3-font-size: 17px; --h4-font-size: 16px; } #debugger summary::before { content:'XXS'; } .hidden-xxs-down { display: none !important; } .row[data-collapse="xxs"] > [class*="col-"] { width: 100%; } } /* @media ---| width < 320px |--- */ /* ---| END |--- */ /* ¡ NO STYLES BELOW THIS LINE PLEASE ! */