/*/---------------------------------------------------------------------------------/*/
/*/Style ---------------------------------------------------------------------------------/*/
/*/---------------------------------------------------------------------------------/*/

/*/---------/*/
/*/Text Color ---------/*/
/*/---------/*/

.col-wht, .col-wht-fmly * {color: white; }
.col-wht use, .col-wht-fmly use { fill: white !important; }

.col-blck, .col-blck-fmly * {color: black; }
.col-blck use, .col-blck-fmly use { fill: black !important; }

.col-pr, .col-pr-fmly *, * { color: var(--primary-color); }
use, .col-pr use, .col-pr-fmly use { fill: var(--primary-color); } 

.col-sec, .col-sec-fmly * { color: var(--secondary-color); }
.col-sec use, .col-sec-fmly use { fill: var(--secondary-color) !important; }

.col-ter, .col-ter-fmly * { color: var(--tertiary-color); }
.col-ter use, .col-ter-fmly use { fill: var(--tertiary-color) !important; }

.col-qtrnry, .col-qtrnry-fmly * { color: var(--quaternary-color); }
.col-qtrnry use, .col-qtrnry-fmly use { fill: var(--quaternary-color) !important; }

.col-acc, .col-acc-fmly * { color: var(--accent-color); }
.col-acc use, .col-acc-fmly use { fill: var(--accent-color) !important; }

/*/---------/*/
/*/Background ---------/*/
/*/---------/*/

.bkcol-wht, aside { background: white; }
.bkcol-blck { background: black; }

.bkcol-pr { background: var(--primary-color); }
.bkcol-sec { background: var(--secondary-color); }
.bkcol-ter { background: var(--tertiary-color); }
.bkcol-acc { background: var(--accent-color); }

.bk-img { background-size: cover; background-position: center; background-repeat: no-repeat; }

/*/---------/*/
/*/Border ---------/*/
/*/---------/*/

.brdr { border: var(--border-size) solid var(--border-color); }

.rnd { border-radius: 100%; }

.brdr-hr, aside { border-left: var(--border-size) solid var(--border-color); border-right: var(--border-size) solid var(--border-color); }
.brdr-vr { border-top: var(--border-size) solid var(--border-color); border-bottom: var(--border-size) solid var(--border-color); }

.brdr-tp { border-top: var(--border-size) solid var(--border-color); }
.brdr-btm { border-bottom: var(--border-size) solid var(--border-color); }
.brdr-lft { border-left: var(--border-size) solid var(--border-color); }
.brdr-rght { border-right: var(--border-size) solid var(--border-color); }

/*/---------/*/
/*/Font ---------/*/
/*/---------/*/

.fnt-pr, .p, * { font-size: var(--font-paragraph); font-family: Roboto, sans-serif; }
.fnt-hdng, h2 { font-size: var(--font-heading); }
.fnt-sbhdng, h3 { font-size: var(--font-sub-heading); }
.fnt-sbtl, h4 { font-size: var(--font-sub-title); }

.fnt-bld, h2, h4 { font-weight: 900; }
.fnt-nt-bld, h3 { font-weight: 100; }

/*/---------------------------------------------------------------------------------/*/
/*/General ---------------------------------------------------------------------------------/*/
/*/---------------------------------------------------------------------------------/*/

/*/---------/*/
/*Overview ---------*/
/*/---------/*/

* { margin: 0; box-sizing: border-box; }
html { height: 100%; }
body { display: flex; height: 100%; flex-direction: column; }
main { flex: 1; }
div { width: 100%; }
img { width: 100%; }
.hdn { display: none !important; }
.scrl-ndpndnt { position: fixed; top: 0; z-index: -1; left: 0; }
.pdng { padding: 15px; }
.pdng-n { padding: 0 25px !important; }
.fll { flex: 1; width: 100vw !important; }

.s-thrgh { opacity: 0.1; }
.wtrmrk { opacity: 0.5; }

.txt { display: inline; margin: 0; padding: 0; border: 0; }

input, input:focus { font-weight: 900; font-size: 20px; border-radius: 10px; padding: 1px 10px; width: 100%; }

svg { max-width: inherit; }

a { cursor: pointer; text-decoration: none; }
a:hover { text-decoration: underline; }

hr { width: 100%; }

.clctn { width: 100%; min-height: 250px; }
.clctn > * { max-width: 250px; }

/*/---------/*/
/*Tags ---------*/
/*/---------/*/

.p { width: inherit; border: none; padding: 0; font-weight: 100; }

/*/---------/*/
/*Position ---------*/
/*/---------/*/

.lft, p, .p, .vrtcl * { justify-content: flex-start !important; align-items: flex-start !important; text-align: left !important; }
.cntr { justify-content: center !important; align-items: center !important; text-align: center !important; }
.rght { justify-content: flex-end !important; align-items: flex-end !important; text-align: right !important; }

.sprd { justify-content: space-between !important; align-items: flex-start !important; }

/*/---------------------------------------------------------------------------------/*/
/*/Elements ---------------------------------------------------------------------------------/*/
/*/---------------------------------------------------------------------------------/*/

/*/---------/*/
/*All Layer ---------*/
/*/---------/*/


header, div, form, a, h2, h3, h4 { display: flex; align-items: center; gap: 25px; justify-content: center; }

.vrtcl { flex-direction: column; width: 100%; }

/*/---------/*/
/*Layouts and Section ---------*/
/*/---------/*/

header { height: 130px; z-index: 2; position: relative; justify-content: center; }
aside { flex-direction: column; display: flex; width: 100vw; max-width: 300px; height: 100vh; position: fixed; z-index: 1; ; top: 0; }

.lyt-cntnr { width: 100%; height: 100%; }
aside > .lyt-cntnr { align-items: unset; padding-top: 130px; }

.fxd-lyt { position: fixed; width: 100%; }
main.mmbrs-xclsv { margin-left: 45px; }
aside.mmbrs-xclsv > .lyt-cntnr{ padding-top: 0; gap: 0px; }
aside.mmbrs-xclsv { width: auto; z-index: 2; }
aside.mmbrs-xclsv section { width: auto; }
aside.mmbrs-xclsv .cntnr { padding: 10px; }

section { display: flex; width: 100%; justify-content: center; }

/*/---------/*/
/*Container and Blocks ---------*/
/*/---------/*/

.cntnr { max-width: 1400px; width: 100%; padding: 15px 25px 25px; z-index: 1; justify-content: space-between; }
.cntnr.prfctly-cntr { display: grid; grid-template-columns: 1fr auto 1fr; }

.cntnr.vrtcl { gap: 25px; display: flex; justify-content: center; }

.cntnr.pdng-dflt { padding: 50px 25px !important; }
.pdng-dflt:not(.cntnr) * { padding: 15px !important; }

.nvgtn, .blck:not(.cntnr) { height: 100%; }

.nvgtn { gap:  25px; }
.blck { gap:  50px; }
.sgmnt { width: auto; border-radius: 35px }

.blck.vrtcl, .nvgtn.vrtcl { gap: 10px; }
.blck.vrtcl > *, .nvgtn.vrtcl > * { width: 100%; }

.icn, .icn * { width: 25px; height: 25px; }
.cntct-nf { gap: 10px; }

.lg-lrg { max-width: 200px; height: 100px; align-items: center; gap: 0; }
.lg-sml { max-width: 25px; height: 25px; align-items: center; gap: 0; }

.lg-lrg:hover, .lg-sml:hover { text-decoration: none; }

.btn { border-radius: 50px; padding: 10px 15px; }
.btn:hover { text-decoration: none; background: var(--tertiary-color); }

/*/---------/*/
/*Media ---------*/
/*/---------/*/

.fl-scrn { width: 100%; height: 100vh; }

@media screen and (max-width: 460px) {
    aside { max-width: 460px; }
    .hdn-mbl { display: none; }
}            
@media screen and (max-width: 1024px) {
    .hdn-mbl-tblt { display: none; }
    .vrtcl-mbl-tblt { flex-direction: column; }
}
@media screen and (min-width: 1024px) {
    .hdn-dsktp-lptp { display: none; }
    .vrtcl-dsktp-lptp { flex-direction: column; }
}