/* contains all common styling */
:root {
    --base-RS-green: #73B656;
    --main-bg-color: #000000;
    --main-text-color: #cccccc;
    --main-alt-body-color: #161616;
    --font-global: RobotoFlex, Verdana, Arial, sans-serif;
    --main-green-col: var(--base-RS-green);
    min-height: 100vh;
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
    background-color: var(--main-bg-color);
    color: var(--main-text-color)
}

body {
    text-rendering: optimizeLegibility;
    font: 17px var(--font-global);
    min-height: calc(100vh - 250px);
    display: flex;
    flex-direction: column;
    background-color: inherit;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font: 17px var(--font-global);
    color: var(--main-text-color);
}

h1 {
    display: block;
    font-size: 2em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
    text-align: center;
}

h2 {
    display: block;
    font-size: 1.5em;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
    text-align: center;
}

h3 {
    display: block;
    font-size: 1.17em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
    text-align: center;
}

h4 {
    display: block;
    margin-top: 1.33em;
    margin-bottom: 1.33em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
    text-align: center;
}

p {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
}

a,
a:link,
a:visited,
a:hover,
a:active {
    color: var(--main-text-color);
    text-decoration: none;
    background-color: transparent
}
@font-face {
    font-family: 'RobotoSerif';
    src: url(/includes/WOFF/RobotoSerif.woff2) format('woff2');
}
@font-face {
    font-family: 'RobotoFlex';
    src: url(/includes/WOFF/RobotoFlex.woff2) format('woff2');
}
@font-face {
    font-family: 'Ultra-Regular';
    src: url(/includes/WOFF/Ultra-Regular.woff2) format('woff2');
  }
.hide {display:none};
main {
    all: inherit;
    width: 100%;
}

div.tnorth::before {
    content: url('/imgs/logo/icons8-north-direction-16.png');
}

#phone-link::before {
    /*
https://products.aspose.app/imaging/image-resize/svg
Resizing SVG
*/
    content: url('/imgs/icons/cell-phone-svgrepo-com.svg');
    padding-right: 5px;
}

/* https://www.youtube.com/watch?v=OjQP7rPwJyE&t=430s*/

#menu-std {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: transparent;
}

#menu-std * {
    background-color: inherit;
}

#menu-std a {
    padding: 5px 10px;
}

div#nav-all-hamburger div {
    background-color: transparent;
    display: none;
    flex-direction: column;
    justify-content: center;
    row-gap: 2px;
    align-items: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

div#nav-all-hamburger hr {
    width: 100%;
    flex: 1;
    color: var(--main-text-color);
    margin: 2px auto;
    border-top: 2px solid white;
    background-color: #97c184;
    opacity: .9;
    border-bottom: 2px solid #79a674;
    border-radius: 4px;
}
/* toggle display, class: 'open'*/
div#nav-all-menu.open {
    display: block;
}

div#nav-all-menu.open ul#menu-std {
    width: 110px;
    margin: auto;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

div#nav-all-menu.open li {
    flex: 1;
    /* margin:10px auto*/

}

.open #hm-line-1 {
    transform: translate(0, 11px) rotate(-45deg);
    transition: transform 500ms;
}

.open #hm-line-2 {
    opacity: 0;
}

.open #hm-line-3 {
    transform: translate(0, -11px) rotate(45deg);
    transition: transform 500ms;
}

li#nav-li-cu>a {
    background-color: rgb(133, 0, 0);
    border-radius: 5px;
}

header ul li:hover {
    background-color: transparent;
    transform: scale(1.1) !important;
    transition: transform 100ms !important;
}

main {
    min-height: calc(100vh - 240px);
}

footer {
    margin-top: auto;
    padding-bottom:10px;
    text-align: center;
    font-family: Verdana, Arial, "sans serif";
    font-size: 12px;
    color: dimgrey;
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
}

footer p {
    margin: 1px auto
}

footer *,
footer path {
    color: dimgrey;
}

#footer-soc-icons a {
    margin: auto 5px
}

.displNone {
    display: none
}

@media only screen and (max-width: 600px) {
    div#nav-all-menu {
        position: absolute;
        z-index: 1000;
        top: 120px;
        left: 0;
        height: 100%;
        width: 100%;
        padding-top: 25px;
        background-color: #111;
        display: none;
        /*flex-direction: column;
        align-items: center;
        justify-content: flex-start; */
    }

    div#nav-all-hamburger div {
        display: flex
    }

    main * {
        font-size:16px;
        font-size-adjust: 0.5;
    }
}