:root {
    --c-blue: #466aa6;
    --margin_t-mobile: 4.5rem;
    --margin_t-desktop: 7rem;
}


/* 
ELEMENTS
*/
body {background-color: white;}
body[data-template='home'] {background-color: var(--c-blue);}

main.page {
    margin: var(--margin_t-mobile) 0 2rem;
}
@media only screen and (min-width: 768px) {
    main.page {margin: var(--margin_t-desktop) 0 6rem;}
}


/*
PADDING AND MARGIN
*/
.padding {padding: .75rem;}
.padding-h {padding: 0 .75rem;}
.padding-v {padding: .75rem 0;}
@media only screen and (min-width: 1024px) {
    .padding {padding: 1.1rem;}
    .padding-h {padding: 0 1.1rem;}
    .padding-v {padding: 1.1rem 0;}
}

/* 
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;}
}
.stop {overflow: hidden;}


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