UNPKG

devframeui

Version:
2,578 lines (2,384 loc) 46 kB
@charset "UTF-8"; /** REBOOT **/ /** Html varsayılan stillerini sıfırlamak içindir ellemeyiniz! **/ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"); *, *::after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, select, textarea, button, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1.5; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } a { text-decoration: none; } img { border: 0; } :focus { outline: 0; } .clear { clear: both; } /** VARIABLES **/ /* Fonts */ /* COLORS */ /* TRANSITIONS */ /** TYPOGRAPHY **/ /** FONTS **/ a { color: #474747; } a:hover { color: #F6B81C; } body { font-family: "Poppins", sans-serif; } h1 { font-size: 2.5rem; } h2 { font-size: 2.25rem; } h3 { font-size: 2rem; } h4 { font-size: 1.75rem; } h5 { font-size: 1.5rem; } h6 { font-size: 1.25rem; } .text--center { text-align: center; } .text--right { text-align: right; } .text--left { text-align: left; } .text--dark, .bg--light { color: #474747; } .text--primary { color: #F6B81C; } .text--light, .bg--dark { color: #fefefe; } .text--medium { font-weight: 600; } .text--bold { font-weight: bold; } .text--italic { font-style: italic; } .text--normal { font-weight: normal; } /** THEME **/ body { background-color: #fefefe; } .bg--light { background: #fefefe; } .bg--light a { color: #474747; } .bg--light a:hover { color: #F6B81C; } .bg--dark { background: #474747; } .bg--dark a { color: #fefefe; } .bg--dark a:hover { color: #F6B81C; } .border { border: 1px solid #e6e6e6; } .border--top { border-top: 1px solid #e6e6e6; } .border--right { border-right: 1px solid #e6e6e6; } .border--bottom { border-bottom: 1px solid #e6e6e6; } .border--left { border-left: 1px solid #e6e6e6; } /** MIXINS **/ .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media only screen and (min-width: 576px) { .container { max-width: 576px; } } @media only screen and (min-width: 768px) { .container { max-width: 768px; } } @media only screen and (min-width: 992px) { .container { max-width: 992px; } } @media only screen and (min-width: 1200px) { .container { max-width: 1200px; } } .container--fluid { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .col--1 { -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; max-width: 8.33333%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--2 { -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; max-width: 16.66667%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--4 { -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--5 { -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; max-width: 41.66667%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--7 { -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; max-width: 58.33333%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--8 { -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; max-width: 66.66667%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--10 { -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; max-width: 83.33333%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--11 { -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; max-width: 91.66667%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } @media screen and (min-width: 576px) { .col--sm--1 { -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; max-width: 8.33333%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--sm--2 { -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; max-width: 16.66667%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--sm--3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--sm--4 { -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--sm--5 { -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; max-width: 41.66667%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--sm--6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--sm--7 { -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; max-width: 58.33333%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--sm--8 { -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; max-width: 66.66667%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--sm--9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--sm--10 { -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; max-width: 83.33333%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--sm--11 { -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; max-width: 91.66667%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--sm--12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } } @media screen and (min-width: 768px) { .col--md--1 { -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; max-width: 8.33333%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--md--2 { -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; max-width: 16.66667%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--md--3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--md--4 { -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--md--5 { -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; max-width: 41.66667%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--md--6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--md--7 { -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; max-width: 58.33333%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--md--8 { -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; max-width: 66.66667%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--md--9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--md--10 { -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; max-width: 83.33333%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--md--11 { -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; max-width: 91.66667%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--md--12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } } @media screen and (min-width: 992px) { .col--lg--1 { -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; max-width: 8.33333%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--lg--2 { -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; max-width: 16.66667%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--lg--3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--lg--4 { -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--lg--5 { -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; max-width: 41.66667%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--lg--6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--lg--7 { -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; max-width: 58.33333%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--lg--8 { -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; max-width: 66.66667%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--lg--9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--lg--10 { -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; max-width: 83.33333%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--lg--11 { -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; max-width: 91.66667%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--lg--12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } } @media screen and (min-width: 1200px) { .col--xl--1 { -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; max-width: 8.33333%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--xl--2 { -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; max-width: 16.66667%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--xl--3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--xl--4 { -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--xl--5 { -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; max-width: 41.66667%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--xl--6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--xl--7 { -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; max-width: 58.33333%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--xl--8 { -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; max-width: 66.66667%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--xl--9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--xl--10 { -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; max-width: 83.33333%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--xl--11 { -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; max-width: 91.66667%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col--xl--12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } } .align--items--center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .w--25 { width: 25%; } .w--50 { width: 50%; } .w--75 { width: 75%; } .w--100 { width: 100%; } .img--fluid img { max-width: 100%; height: auto; } .mx--1 { margin-left: 0.5rem; margin-right: 0.5rem; } .my--1 { margin-top: 0.5rem; margin-bottom: 0.5rem; } .mt--1 { margin-top: 0.5rem; } .mb--1 { margin-bottom: 0.5rem; } .ml--1 { margin-left: 0.5rem; } .mr--1 { margin-right: 0.5rem; } .py--1 { padding-top: 0.5rem 0; padding-bottom: 0.5rem 0; } .px--1 { padding-left: 0.5rem 0; padding-right: 0.5rem 0; } .pt--1 { padding-top: 0.5rem; } .pb--1 { padding-bottom: 0.5rem; } .pl--1 { padding-left: 0.5rem; } .pr--1 { padding-right: 0.5rem; } .mx--2 { margin-left: 1rem; margin-right: 1rem; } .my--2 { margin-top: 1rem; margin-bottom: 1rem; } .mt--2 { margin-top: 1rem; } .mb--2 { margin-bottom: 1rem; } .ml--2 { margin-left: 1rem; } .mr--2 { margin-right: 1rem; } .py--2 { padding-top: 1rem 0; padding-bottom: 1rem 0; } .px--2 { padding-left: 1rem 0; padding-right: 1rem 0; } .pt--2 { padding-top: 1rem; } .pb--2 { padding-bottom: 1rem; } .pl--2 { padding-left: 1rem; } .pr--2 { padding-right: 1rem; } .mx--3 { margin-left: 1.5rem; margin-right: 1.5rem; } .my--3 { margin-top: 1.5rem; margin-bottom: 1.5rem; } .mt--3 { margin-top: 1.5rem; } .mb--3 { margin-bottom: 1.5rem; } .ml--3 { margin-left: 1.5rem; } .mr--3 { margin-right: 1.5rem; } .py--3 { padding-top: 1.5rem 0; padding-bottom: 1.5rem 0; } .px--3 { padding-left: 1.5rem 0; padding-right: 1.5rem 0; } .pt--3 { padding-top: 1.5rem; } .pb--3 { padding-bottom: 1.5rem; } .pl--3 { padding-left: 1.5rem; } .pr--3 { padding-right: 1.5rem; } .mx--4 { margin-left: 2rem; margin-right: 2rem; } .my--4 { margin-top: 2rem; margin-bottom: 2rem; } .mt--4 { margin-top: 2rem; } .mb--4 { margin-bottom: 2rem; } .ml--4 { margin-left: 2rem; } .mr--4 { margin-right: 2rem; } .py--4 { padding-top: 2rem 0; padding-bottom: 2rem 0; } .px--4 { padding-left: 2rem 0; padding-right: 2rem 0; } .pt--4 { padding-top: 2rem; } .pb--4 { padding-bottom: 2rem; } .pl--4 { padding-left: 2rem; } .pr--4 { padding-right: 2rem; } .mx--5 { margin-left: 2.5rem; margin-right: 2.5rem; } .my--5 { margin-top: 2.5rem; margin-bottom: 2.5rem; } .mt--5 { margin-top: 2.5rem; } .mb--5 { margin-bottom: 2.5rem; } .ml--5 { margin-left: 2.5rem; } .mr--5 { margin-right: 2.5rem; } .py--5 { padding-top: 2.5rem 0; padding-bottom: 2.5rem 0; } .px--5 { padding-left: 2.5rem 0; padding-right: 2.5rem 0; } .pt--5 { padding-top: 2.5rem; } .pb--5 { padding-bottom: 2.5rem; } .pl--5 { padding-left: 2.5rem; } .pr--5 { padding-right: 2.5rem; } .mx--6 { margin-left: 3rem; margin-right: 3rem; } .my--6 { margin-top: 3rem; margin-bottom: 3rem; } .mt--6 { margin-top: 3rem; } .mb--6 { margin-bottom: 3rem; } .ml--6 { margin-left: 3rem; } .mr--6 { margin-right: 3rem; } .py--6 { padding-top: 3rem 0; padding-bottom: 3rem 0; } .px--6 { padding-left: 3rem 0; padding-right: 3rem 0; } .pt--6 { padding-top: 3rem; } .pb--6 { padding-bottom: 3rem; } .pl--6 { padding-left: 3rem; } .pr--6 { padding-right: 3rem; } .d--none { display: none !important; } .d--block { display: block !important; } .d--inline-block { display: inline-block !important; } .d--flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .justify--content--center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .justify--content--flex-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .justify--content--flex-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .justify--content--space-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .justify--content--space-around { -ms-flex-pack: distribute; justify-content: space-around; } @media screen and (min-width: 576px) { .mx--sm--1 { margin-left: 0.5rem; margin-right: 0.5rem; } .my--sm--1 { margin-top: 0.5rem; margin-bottom: 0.5rem; } .mt--sm--1 { margin-top: 0.5rem; } .mb--sm--1 { margin-bottom: 0.5rem; } .ml--sm--1 { margin-left: 0.5rem; } .mr--sm--1 { margin-right: 0.5rem; } .py--sm--1 { padding-top: 0.5rem 0; padding-bottom: 0.5rem 0; } .px--sm--1 { padding-left: 0.5rem 0; padding-right: 0.5rem 0; } .pt--sm--1 { padding-top: 0.5rem; } .pb--sm--1 { padding-bottom: 0.5rem; } .pl--sm--1 { padding-left: 0.5rem; } .pr--sm--1 { padding-right: 0.5rem; } .mx--sm--2 { margin-left: 1rem; margin-right: 1rem; } .my--sm--2 { margin-top: 1rem; margin-bottom: 1rem; } .mt--sm--2 { margin-top: 1rem; } .mb--sm--2 { margin-bottom: 1rem; } .ml--sm--2 { margin-left: 1rem; } .mr--sm--2 { margin-right: 1rem; } .py--sm--2 { padding-top: 1rem 0; padding-bottom: 1rem 0; } .px--sm--2 { padding-left: 1rem 0; padding-right: 1rem 0; } .pt--sm--2 { padding-top: 1rem; } .pb--sm--2 { padding-bottom: 1rem; } .pl--sm--2 { padding-left: 1rem; } .pr--sm--2 { padding-right: 1rem; } .mx--sm--3 { margin-left: 1.5rem; margin-right: 1.5rem; } .my--sm--3 { margin-top: 1.5rem; margin-bottom: 1.5rem; } .mt--sm--3 { margin-top: 1.5rem; } .mb--sm--3 { margin-bottom: 1.5rem; } .ml--sm--3 { margin-left: 1.5rem; } .mr--sm--3 { margin-right: 1.5rem; } .py--sm--3 { padding-top: 1.5rem 0; padding-bottom: 1.5rem 0; } .px--sm--3 { padding-left: 1.5rem 0; padding-right: 1.5rem 0; } .pt--sm--3 { padding-top: 1.5rem; } .pb--sm--3 { padding-bottom: 1.5rem; } .pl--sm--3 { padding-left: 1.5rem; } .pr--sm--3 { padding-right: 1.5rem; } .mx--sm--4 { margin-left: 2rem; margin-right: 2rem; } .my--sm--4 { margin-top: 2rem; margin-bottom: 2rem; } .mt--sm--4 { margin-top: 2rem; } .mb--sm--4 { margin-bottom: 2rem; } .ml--sm--4 { margin-left: 2rem; } .mr--sm--4 { margin-right: 2rem; } .py--sm--4 { padding-top: 2rem 0; padding-bottom: 2rem 0; } .px--sm--4 { padding-left: 2rem 0; padding-right: 2rem 0; } .pt--sm--4 { padding-top: 2rem; } .pb--sm--4 { padding-bottom: 2rem; } .pl--sm--4 { padding-left: 2rem; } .pr--sm--4 { padding-right: 2rem; } .mx--sm--5 { margin-left: 2.5rem; margin-right: 2.5rem; } .my--sm--5 { margin-top: 2.5rem; margin-bottom: 2.5rem; } .mt--sm--5 { margin-top: 2.5rem; } .mb--sm--5 { margin-bottom: 2.5rem; } .ml--sm--5 { margin-left: 2.5rem; } .mr--sm--5 { margin-right: 2.5rem; } .py--sm--5 { padding-top: 2.5rem 0; padding-bottom: 2.5rem 0; } .px--sm--5 { padding-left: 2.5rem 0; padding-right: 2.5rem 0; } .pt--sm--5 { padding-top: 2.5rem; } .pb--sm--5 { padding-bottom: 2.5rem; } .pl--sm--5 { padding-left: 2.5rem; } .pr--sm--5 { padding-right: 2.5rem; } .mx--sm--6 { margin-left: 3rem; margin-right: 3rem; } .my--sm--6 { margin-top: 3rem; margin-bottom: 3rem; } .mt--sm--6 { margin-top: 3rem; } .mb--sm--6 { margin-bottom: 3rem; } .ml--sm--6 { margin-left: 3rem; } .mr--sm--6 { margin-right: 3rem; } .py--sm--6 { padding-top: 3rem 0; padding-bottom: 3rem 0; } .px--sm--6 { padding-left: 3rem 0; padding-right: 3rem 0; } .pt--sm--6 { padding-top: 3rem; } .pb--sm--6 { padding-bottom: 3rem; } .pl--sm--6 { padding-left: 3rem; } .pr--sm--6 { padding-right: 3rem; } .d--sm--none { display: none !important; } .d--sm--block { display: block !important; } .d--sm--inline-block { display: inline-block !important; } .d--sm--flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .justify--content--sm--center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .justify--content--sm--flex-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .justify--content--sm--flex-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .justify--content--sm--space-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .justify--content--sm--space-around { -ms-flex-pack: distribute; justify-content: space-around; } } @media screen and (min-width: 768px) { .mx--md--1 { margin-left: 0.5rem; margin-right: 0.5rem; } .my--md--1 { margin-top: 0.5rem; margin-bottom: 0.5rem; } .mt--md--1 { margin-top: 0.5rem; } .mb--md--1 { margin-bottom: 0.5rem; } .ml--md--1 { margin-left: 0.5rem; } .mr--md--1 { margin-right: 0.5rem; } .py--md--1 { padding-top: 0.5rem 0; padding-bottom: 0.5rem 0; } .px--md--1 { padding-left: 0.5rem 0; padding-right: 0.5rem 0; } .pt--md--1 { padding-top: 0.5rem; } .pb--md--1 { padding-bottom: 0.5rem; } .pl--md--1 { padding-left: 0.5rem; } .pr--md--1 { padding-right: 0.5rem; } .mx--md--2 { margin-left: 1rem; margin-right: 1rem; } .my--md--2 { margin-top: 1rem; margin-bottom: 1rem; } .mt--md--2 { margin-top: 1rem; } .mb--md--2 { margin-bottom: 1rem; } .ml--md--2 { margin-left: 1rem; } .mr--md--2 { margin-right: 1rem; } .py--md--2 { padding-top: 1rem 0; padding-bottom: 1rem 0; } .px--md--2 { padding-left: 1rem 0; padding-right: 1rem 0; } .pt--md--2 { padding-top: 1rem; } .pb--md--2 { padding-bottom: 1rem; } .pl--md--2 { padding-left: 1rem; } .pr--md--2 { padding-right: 1rem; } .mx--md--3 { margin-left: 1.5rem; margin-right: 1.5rem; } .my--md--3 { margin-top: 1.5rem; margin-bottom: 1.5rem; } .mt--md--3 { margin-top: 1.5rem; } .mb--md--3 { margin-bottom: 1.5rem; } .ml--md--3 { margin-left: 1.5rem; } .mr--md--3 { margin-right: 1.5rem; } .py--md--3 { padding-top: 1.5rem 0; padding-bottom: 1.5rem 0; } .px--md--3 { padding-left: 1.5rem 0; padding-right: 1.5rem 0; } .pt--md--3 { padding-top: 1.5rem; } .pb--md--3 { padding-bottom: 1.5rem; } .pl--md--3 { padding-left: 1.5rem; } .pr--md--3 { padding-right: 1.5rem; } .mx--md--4 { margin-left: 2rem; margin-right: 2rem; } .my--md--4 { margin-top: 2rem; margin-bottom: 2rem; } .mt--md--4 { margin-top: 2rem; } .mb--md--4 { margin-bottom: 2rem; } .ml--md--4 { margin-left: 2rem; } .mr--md--4 { margin-right: 2rem; } .py--md--4 { padding-top: 2rem 0; padding-bottom: 2rem 0; } .px--md--4 { padding-left: 2rem 0; padding-right: 2rem 0; } .pt--md--4 { padding-top: 2rem; } .pb--md--4 { padding-bottom: 2rem; } .pl--md--4 { padding-left: 2rem; } .pr--md--4 { padding-right: 2rem; } .mx--md--5 { margin-left: 2.5rem; margin-right: 2.5rem; } .my--md--5 { margin-top: 2.5rem; margin-bottom: 2.5rem; } .mt--md--5 { margin-top: 2.5rem; } .mb--md--5 { margin-bottom: 2.5rem; } .ml--md--5 { margin-left: 2.5rem; } .mr--md--5 { margin-right: 2.5rem; } .py--md--5 { padding-top: 2.5rem 0; padding-bottom: 2.5rem 0; } .px--md--5 { padding-left: 2.5rem 0; padding-right: 2.5rem 0; } .pt--md--5 { padding-top: 2.5rem; } .pb--md--5 { padding-bottom: 2.5rem; } .pl--md--5 { padding-left: 2.5rem; } .pr--md--5 { padding-right: 2.5rem; } .mx--md--6 { margin-left: 3rem; margin-right: 3rem; } .my--md--6 { margin-top: 3rem; margin-bottom: 3rem; } .mt--md--6 { margin-top: 3rem; } .mb--md--6 { margin-bottom: 3rem; } .ml--md--6 { margin-left: 3rem; } .mr--md--6 { margin-right: 3rem; } .py--md--6 { padding-top: 3rem 0; padding-bottom: 3rem 0; } .px--md--6 { padding-left: 3rem 0; padding-right: 3rem 0; } .pt--md--6 { padding-top: 3rem; } .pb--md--6 { padding-bottom: 3rem; } .pl--md--6 { padding-left: 3rem; } .pr--md--6 { padding-right: 3rem; } .d--md--none { display: none !important; } .d--md--block { display: block !important; } .d--md--inline-block { display: inline-block !important; } .d--md--flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .justify--content--md--center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .justify--content--md--flex-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .justify--content--md--flex-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .justify--content--md--space-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .justify--content--md--space-around { -ms-flex-pack: distribute; justify-content: space-around; } } @media screen and (min-width: 992px) { .mx--lg--1 { margin-left: 0.5rem; margin-right: 0.5rem; } .my--lg--1 { margin-top: 0.5rem; margin-bottom: 0.5rem; } .mt--lg--1 { margin-top: 0.5rem; } .mb--lg--1 { margin-bottom: 0.5rem; } .ml--lg--1 { margin-left: 0.5rem; } .mr--lg--1 { margin-right: 0.5rem; } .py--lg--1 { padding-top: 0.5rem 0; padding-bottom: 0.5rem 0; } .px--lg--1 { padding-left: 0.5rem 0; padding-right: 0.5rem 0; } .pt--lg--1 { padding-top: 0.5rem; } .pb--lg--1 { padding-bottom: 0.5rem; } .pl--lg--1 { padding-left: 0.5rem; } .pr--lg--1 { padding-right: 0.5rem; } .mx--lg--2 { margin-left: 1rem; margin-right: 1rem; } .my--lg--2 { margin-top: 1rem; margin-bottom: 1rem; } .mt--lg--2 { margin-top: 1rem; } .mb--lg--2 { margin-bottom: 1rem; } .ml--lg--2 { margin-left: 1rem; } .mr--lg--2 { margin-right: 1rem; } .py--lg--2 { padding-top: 1rem 0; padding-bottom: 1rem 0; } .px--lg--2 { padding-left: 1rem 0; padding-right: 1rem 0; } .pt--lg--2 { padding-top: 1rem; } .pb--lg--2 { padding-bottom: 1rem; } .pl--lg--2 { padding-left: 1rem; } .pr--lg--2 { padding-right: 1rem; } .mx--lg--3 { margin-left: 1.5rem; margin-right: 1.5rem; } .my--lg--3 { margin-top: 1.5rem; margin-bottom: 1.5rem; } .mt--lg--3 { margin-top: 1.5rem; } .mb--lg--3 { margin-bottom: 1.5rem; } .ml--lg--3 { margin-left: 1.5rem; } .mr--lg--3 { margin-right: 1.5rem; } .py--lg--3 { padding-top: 1.5rem 0; padding-bottom: 1.5rem 0; } .px--lg--3 { padding-left: 1.5rem 0; padding-right: 1.5rem 0; } .pt--lg--3 { padding-top: 1.5rem; } .pb--lg--3 { padding-bottom: 1.5rem; } .pl--lg--3 { padding-left: 1.5rem; } .pr--lg--3 { padding-right: 1.5rem; } .mx--lg--4 { margin-left: 2rem; margin-right: 2rem; } .my--lg--4 { margin-top: 2rem; margin-bottom: 2rem; } .mt--lg--4 { margin-top: 2rem; } .mb--lg--4 { margin-bottom: 2rem; } .ml--lg--4 { margin-left: 2rem; } .mr--lg--4 { margin-right: 2rem; } .py--lg--4 { padding-top: 2rem 0; padding-bottom: 2rem 0; } .px--lg--4 { padding-left: 2rem 0; padding-right: 2rem 0; } .pt--lg--4 { padding-top: 2rem; } .pb--lg--4 { padding-bottom: 2rem; } .pl--lg--4 { padding-left: 2rem; } .pr--lg--4 { padding-right: 2rem; } .mx--lg--5 { margin-left: 2.5rem; margin-right: 2.5rem; } .my--lg--5 { margin-top: 2.5rem; margin-bottom: 2.5rem; } .mt--lg--5 { margin-top: 2.5rem; } .mb--lg--5 { margin-bottom: 2.5rem; } .ml--lg--5 { margin-left: 2.5rem; } .mr--lg--5 { margin-right: 2.5rem; } .py--lg--5 { padding-top: 2.5rem 0; padding-bottom: 2.5rem 0; } .px--lg--5 { padding-left: 2.5rem 0; padding-right: 2.5rem 0; } .pt--lg--5 { padding-top: 2.5rem; } .pb--lg--5 { padding-bottom: 2.5rem; } .pl--lg--5 { padding-left: 2.5rem; } .pr--lg--5 { padding-right: 2.5rem; } .mx--lg--6 { margin-left: 3rem; margin-right: 3rem; } .my--lg--6 { margin-top: 3rem; margin-bottom: 3rem; } .mt--lg--6 { margin-top: 3rem; } .mb--lg--6 { margin-bottom: 3rem; } .ml--lg--6 { margin-left: 3rem; } .mr--lg--6 { margin-right: 3rem; } .py--lg--6 { padding-top: 3rem 0; padding-bottom: 3rem 0; } .px--lg--6 { padding-left: 3rem 0; padding-right: 3rem 0; } .pt--lg--6 { padding-top: 3rem; } .pb--lg--6 { padding-bottom: 3rem; } .pl--lg--6 { padding-left: 3rem; } .pr--lg--6 { padding-right: 3rem; } .d--lg--none { display: none !important; } .d--lg--block { display: block !important; } .d--lg--inline-block { display: inline-block !important; } .d--lg--flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .justify--content--lg--center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .justify--content--lg--flex-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .justify--content--lg--flex-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .justify--content--lg--space-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .justify--content--lg--space-around { -ms-flex-pack: distribute; justify-content: space-around; } } @media screen and (min-width: 1200px) { .mx--xl--1 { margin-left: 0.5rem; margin-right: 0.5rem; } .my--xl--1 { margin-top: 0.5rem; margin-bottom: 0.5rem; } .mt--xl--1 { margin-top: 0.5rem; } .mb--xl--1 { margin-bottom: 0.5rem; } .ml--xl--1 { margin-left: 0.5rem; } .mr--xl--1 { margin-right: 0.5rem; } .py--xl--1 { padding-top: 0.5rem 0; padding-bottom: 0.5rem 0; } .px--xl--1 { padding-left: 0.5rem 0; padding-right: 0.5rem 0; } .pt--xl--1 { padding-top: 0.5rem; } .pb--xl--1 { padding-bottom: 0.5rem; } .pl--xl--1 { padding-left: 0.5rem; } .pr--xl--1 { padding-right: 0.5rem; } .mx--xl--2 { margin-left: 1rem; margin-right: 1rem; } .my--xl--2 { margin-top: 1rem; margin-bottom: 1rem; } .mt--xl--2 { margin-top: 1rem; } .mb--xl--2 { margin-bottom: 1rem; } .ml--xl--2 { margin-left: 1rem; } .mr--xl--2 { margin-right: 1rem; } .py--xl--2 { padding-top: 1rem 0; padding-bottom: 1rem 0; } .px--xl--2 { padding-left: 1rem 0; padding-right: 1rem 0; } .pt--xl--2 { padding-top: 1rem; } .pb--xl--2 { padding-bottom: 1rem; } .pl--xl--2 { padding-left: 1rem; } .pr--xl--2 { padding-right: 1rem; } .mx--xl--3 { margin-left: 1.5rem; margin-right: 1.5rem; } .my--xl--3 { margin-top: 1.5rem; margin-bottom: 1.5rem; } .mt--xl--3 { margin-top: 1.5rem; } .mb--xl--3 { margin-bottom: 1.5rem; } .ml--xl--3 { margin-left: 1.5rem; } .mr--xl--3 { margin-right: 1.5rem; } .py--xl--3 { padding-top: 1.5rem 0; padding-bottom: 1.5rem 0; } .px--xl--3 { padding-left: 1.5rem 0; padding-right: 1.5rem 0; } .pt--xl--3 { padding-top: 1.5rem; } .pb--xl--3 { padding-bottom: 1.5rem; } .pl--xl--3 { padding-left: 1.5rem; } .pr--xl--3 { padding-right: 1.5rem; } .mx--xl--4 { margin-left: 2rem; margin-right: 2rem; } .my--xl--4 { margin-top: 2rem; margin-bottom: 2rem; } .mt--xl--4 { margin-top: 2rem; } .mb--xl--4 { margin-bottom: 2rem; } .ml--xl--4 { margin-left: 2rem; } .mr--xl--4 { margin-right: 2rem; } .py--xl--4 { padding-top: 2rem 0; padding-bottom: 2rem 0; } .px--xl--4 { padding-left: 2rem 0; padding-right: 2rem 0; } .pt--xl--4 { padding-top: 2rem; } .pb--xl--4 { padding-bottom: 2rem; } .pl--xl--4 { padding-left: 2rem; } .pr--xl--4 { padding-right: 2rem; } .mx--xl--5 { margin-left: 2.5rem; margin-right: 2.5rem; } .my--xl--5 { margin-top: 2.5rem; margin-bottom: 2.5rem; } .mt--xl--5 { margin-top: 2.5rem; } .mb--xl--5 { margin-bottom: 2.5rem; } .ml--xl--5 { margin-left: 2.5rem; } .mr--xl--5 { margin-right: 2.5rem; } .py--xl--5 { padding-top: 2.5rem 0; padding-bottom: 2.5rem 0; } .px--xl--5 { padding-left: 2.5rem 0; padding-right: 2.5rem 0; } .pt--xl--5 { padding-top: 2.5rem; } .pb--xl--5 { padding-bottom: 2.5rem; } .pl--xl--5 { padding-left: 2.5rem; } .pr--xl--5 { padding-right: 2.5rem; } .mx--xl--6 { margin-left: 3rem; margin-right: 3rem; } .my--xl--6 { margin-top: 3rem; margin-bottom: 3rem; } .mt--xl--6 { margin-top: 3rem; } .mb--xl--6 { margin-bottom: 3rem; } .ml--xl--6 { margin-left: 3rem; } .mr--xl--6 { margin-right: 3rem; } .py--xl--6 { padding-top: 3rem 0; padding-bottom: 3rem 0; } .px--xl--6 { padding-left: 3rem 0; padding-right: 3rem 0; } .pt--xl--6 { padding-top: 3rem; } .pb--xl--6 { padding-bottom: 3rem; } .pl--xl--6 { padding-left: 3rem; } .pr--xl--6 { padding-right: 3rem; } .d--xl--none { display: none !important; } .d--xl--block { display: block !important; } .d--xl--inline-block { display: inline-block !important; } .d--xl--flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .justify--content--xl--center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .justify--content--xl--flex-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .justify--content--xl--flex-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .justify--content--xl--space-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .justify--content--xl--space-around { -ms-flex-pack: distribute; justify-content: space-around; } } .btn { display: inline-block; padding: .50rem .80rem; -webkit-transition: all 0.4s; transition: all 0.4s; cursor: pointer; } .btn--primary { color: #fefefe; fill: #fefefe; background-color: #F6B81C; border: 2px solid #F6B81C; } .btn--primary:hover { background-color: #e0a309; border: 2px solid #e0a309; } .btn--secondary { color: #fefefe; fill: #fefefe; background-color: #474747; border: 2px solid #474747; } .btn--secondary:hover { background-color: #333333; border: 2px solid #333333; } .btn--success { color: #fefefe; fill: #fefefe; background-color: #00923F; border: 2px solid #00923F; } .btn--success:hover { background-color: #00692d; border: 2px solid #00692d; } .btn--primary--outline { border: 2px solid #F6B81C; color: #F6B81C; fill: #F6B81C; background: transparent; } .btn--primary--outline:hover { background-color: #F6B81C; color: #fff; } .btn--secondary--outline { border: 2px solid #474747; color: #474747; fill: #474747; background: transparent; } .btn--secondary--outline:hover { background-color: #474747; color: #fff; } .btn--success--outline { border: 2px solid #00923F; color: #00923F; fill: #00923F; background: transparent; } .btn--success--outline:hover { background-color: #00923F; color: #fff; } .btn--modal--close { background: transparent; font-size: 2.3rem; font-weight: 200; } /** MODALS **/ .modal { width: 100%; height: 100%; overflow: hidden; -webkit-transition: all 0.4s; transition: all 0.4s; opacity: 0; visibility: hidden; } .modal .modal__box { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; background-color: #fff; padding: 1rem; max-width: 40%; width: 100%; } @media only screen and (min-width: 768px) { .modal .modal__box { max-width: 75%; } } .modal .modal__box__head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-bottom: 0.8px solid #dfdfdf; } .modal .modal__box__content { padding: 1rem 0; max-height: 500px; height: 100%; overflow-y: auto; } .modal .modal__box__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .modal::after { content: ""; position: absolute; width: 100%; height: 100%; background-color: #474747; opacity: .5; top: 0; left: 0; } .modal.closed { opacity: 0; visibility: hidden; } .modal.active { opacity: 1; visibility: visible; } /** TABLES **/ @media (max-width: 996px) { .table--responsive { overflow-x: auto; } } .table { width: 100%; color: #474747; } .table td, .table th { padding: .70rem 1.5rem; } .table thead { font-weight: bold; text-align: left; background-color: #ededed; } .table tbody { background-color: #fff; } .table--bordered td, .table--bordered th { border: 2px solid #eaeaea; } .table--striped thead { background-color: #fff; } .table--striped tr:nth-child(even) { background-color: #ededed; } /**NAVS**/ /** FORM **/ .form_element[type=text], .form_element[type=password], .form_element[type=number], .form_element[type=time], .form_element[type=date] { border: 2px solid #474747; padding: .30rem .50rem; -webkit-transition: all 0.4s; transition: all 0.4s; display: block; width: 100%; } .form_element[type=text]:focus, .form_element[type=password]:focus, .form_element[type=number]:focus, .form_element[type=time]:focus, .form_element[type=date]:focus { border: 2px solid #F6B81C; } select.form_element { border: 2px solid #474747; padding: .30rem .50rem; -webkit-transition: all 0.4s; transition: all 0.4s; display: block; margin-bottom: 1rem; width: 100%; } select.form_element :nth-last-child(1) { margin-bottom: 0rem; } select.form_element:focus { border: 2px solid #F6B81C; } .card { border: 1px solid #e6e6e6; padding: 1rem; } /** MIXINS **/ /** GENERAL SETTINGS **/ /*# sourceMappingURL=lbb-framework.css.map */