:root {
    --c-yellow: #ffc800;
    --c-red: #ff0041;
    --c-blue: #4646ff;
    --c-green: #46ff50;
    --c-pink: #f58cff;
    --c-orange: #ff6432;
}


/* 
LOADING
*/
body[data-load="false"] #loading,
body[data-load="false"] #loading-block {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
}
body[data-load="false"] #loading-block {z-index: 120;}

body[data-load="true"] #loading,
body[data-load="true"] #loading-block {display: none;}


/* 
COLOUR
*/
body[data-theme="yellow"] .c-bg {background: var(--c-yellow) !important;}
body[data-theme="red"] .c-bg {background: var(--c-red) !important;}
body[data-theme="blue"] .c-bg {background: var(--c-blue) !important;}
body[data-theme="green"] .c-bg {background: var(--c-green) !important;}
body[data-theme="pink"] .c-bg {background: var(--c-pink) !important;}
body[data-theme="orange"] .c-bg {background: var(--c-orange) !important;}
.bg-black {background: black;}

body[data-theme="yellow"] .c-text {color: var(--c-yellow) !important; transition: color 1s ease;}
body[data-theme="red"] .c-text {color: var(--c-red) !important; transition: color 1s ease;}
body[data-theme="blue"] .c-text {color: var(--c-blue) !important; transition: color 1s ease;}
body[data-theme="green"] .c-text {color: var(--c-green) !important; transition: color 1s ease;}
body[data-theme="pink"] .c-text {color: var(--c-pink) !important; transition: color 1s ease;}
body[data-theme="orange"] .c-text {color: var(--c-orange) !important; transition: color 1s ease;}
body[data-template="contact"][data-load="true"] .c-text {color: black !important; transition: color 1s ease;}
.c-text--black {color: black !important;}

body[data-theme="yellow"] .c-vector {fill: var(--c-yellow); transition: fill 1s ease;}
body[data-theme="red"] .c-vector {fill: var(--c-red); transition: fill 1s ease;}
body[data-theme="blue"] .c-vector {fill: var(--c-blue); transition: fill 1s ease;}
body[data-theme="green"] .c-vector {fill: var(--c-green); transition: fill 1s ease;}
body[data-theme="pink"] .c-vector {fill: var(--c-pink); transition: fill 1s ease;}
body[data-theme="orange"] .c-vector {fill: var(--c-orange); transition: fill 1s ease;}
body[data-template="contact"][data-load="true"] .c-vector {fill: black;}
.c-vector--black {fill: black;}

body[data-theme="yellow"] .c-border--top {border-top: 2px solid var(--c-yellow);}
body[data-theme="red"] .c-border--top {border-top: 2px solid var(--c-red);}
body[data-theme="blue"] .c-border--top {border-top: 2px solid var(--c-blue);}
body[data-theme="green"] .c-border--top {border-top: 2px solid var(--c-green);}
body[data-theme="pink"] .c-border--top {border-top: 2px solid var(--c-pink);}
body[data-theme="orange"] .c-border--top {border-top: 2px solid var(--c-orange);}
body[data-template="contact"] .c-border--top {border-top: 2px solid black;}
body[data-theme="yellow"] .c-border--bottom {border-bottom: 2px solid var(--c-yellow);}
body[data-theme="red"] .c-border--bottom {border-bottom: 2px solid var(--c-red);}
body[data-theme="blue"] .c-border--bottom {border-bottom: 2px solid var(--c-blue);}
body[data-theme="green"] .c-border--bottom {border-bottom: 2px solid var(--c-green);}
body[data-theme="pink"] .c-border--bottom {border-bottom: 2px solid var(--c-pink);}
body[data-theme="orange"] .c-border--bottom {border-bottom: 2px solid var(--c-orange);}
body[data-template="contact"] .c-border--bottom {border-bottom: 2px solid black;}


/* 
DISPLAY
*/
.flex {display: flex !important;}
.f-column {flex-direction: column;}
.f-wrap {flex-wrap: wrap;}
.f-just--center {justify-content: center;}
.f-just--between {justify-content: space-between;}
.f-just--evenly {justify-content: space-evenly;}
.f-align--start {align-items: start;}
.f-align--center {align-items: center;}


/* 
MEASURMENTS
*/
.padding {padding: .5rem;}
.padding-v {padding: .5rem 0;}
.padding-v--xl {padding: 1rem 0;}
.padding-h--xl {padding: 0 1rem;}
.padding-t--xl {padding-top: 1rem;}

.margin-t--xs {margin-top: .25rem;}
.margin-t {margin-top: .5rem;}
.margin-t--l {margin-top: 1rem;}
.margin-t--xl {margin-top: 2rem;}
.margin-t--3xl {margin-top: 4rem;}
.margin-b--l {margin-bottom: 1rem;}

/* 
POSITION
*/
.p-relative {position: relative;}
.p-absolute {position: absolute;}

/* 
STATUS
*/
.hide {display: none;}
.hide-scrollbar::-webkit-scrollbar {display: none;}
.hide-scrollbar {-ms-overflow-style: none;scrollbar-width: none;}
.stop {overflow: hidden;}

.hide-m {display: none !important;}
.hide-m_t {display: none !important;}
.hide-m_d {display: none !important;}
@media only screen and (min-width: 768px) {
    .hide-t {display: none !important;}
    .hide-t_d {display: none !important;}
    .hide-m {display: unset !important;}
    .hide-m_d {display: unset !important;}
}
@media only screen and (min-width: 1024px) {
    .hide-d {display: none !important;}
    .hide-m_d {display: none !important;}
    .hide-m_t {display: unset !important;}
    .hide-t {display: inherit !important;}
}


@media only screen and (min-width: 768px) {}
@media only screen and (min-width: 1024px) {}
@media only screen and (min-width: 1920px) {}
@media (hover: hover) {}