/* Generic Base CSS */


/* Initial settings */
button { all: unset; }

* {
    box-sizing: border-box;
    margin: 0;
    margin-block: 0;
    margin-inline: 0;
    border: none;
    padding: 0;
    color: inherit;
    font-family: inherit;
    text-decoration: inherit;
    font-weight: inherit;
    font-style: inherit;
    text-align: inherit;
}


/* Text decoration */
.underline { text-decoration: underline; }
.italic { font-style: italic; }

/* Text alignment */
.txLeft { text-align: left; }
.txCenter { text-align: center; }
.txRight { text-align: right; }
.txJustify { text-align: justify; }

/* Widths */
.maxWidth15 { max-width: 15rem; }
.maxWidth20 { max-width: 20rem; }
.maxWidth25 { max-width: 25rem; }
.maxWidth25 { max-width: 25rem; }

.width100pc { width: 100%;}

/* Heights */
.minHeight100vh { min-height: 100vh; }

/* Margins and padding */
.marg0-5 { margin: 0.5rem; }
.margT0-5 { margin-top: 0.5rem; }
.margR0-5 { margin-right: 0.5rem; }
.margB0-5 { margin-bottom: 0.5rem; }
.margL0-5 { margin-left: 0.5rem; }
.margTB0-5 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.margRL0-5 { margin-right: 0.5rem; margin-left: 0.5rem; }

.marg1 { margin: 1rem; }
.margT1 { margin-top: 1rem; }
.margR1 { margin-right: 1rem; }
.margB1 { margin-bottom: 1rem; }
.margL1 { margin-left: 1rem; }
.margTB1 { margin-top: 1rem; margin-bottom: 1rem; }
.margRL1 { margin-right: 1rem; margin-left: 1rem; }

.pad0-5 { padding: 0.5rem; }
.padT0-5 { padding-top: 0.5rem; }
.padR0-5 { padding-right: 0.5rem; }
.padB0-5 { padding-bottom: 0.5rem; }
.padL0-5 { padding-left: 0.5rem; }
.padTB0-5 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.padRL0-5 { padding-right: 0.5rem; padding-left: 0.5rem; }

.pad1 { padding: 1rem; }
.padT1 { padding-top: 1rem; }
.padR1 { padding-right: 1rem; }
.padB1 { padding-bottom: 1rem; }
.padL1 { padding-left: 1rem; }
.padTB1 { padding-top: 1rem; padding-bottom: 1rem; }
.padRL1 { padding-right: 1rem; padding-left: 1rem; }

.pad2 { padding: 2rem; }
.padT2 { padding-top: 2rem; }
.padR2 { padding-right: 2rem; }
.padB2 { padding-bottom: 2rem; }
.padL2 { padding-left: 2rem; }
.padTB2 { padding-top: 2rem; padding-bottom: 2rem; }
.padRL2 { padding-right: 2rem; padding-left: 2rem; }


/* ---- Flex Containers ---- */
.flexbox { display: flex; }

/* flex-direction: */
/*.flxRow { flex-direction: row; } /* default */
.flxCol { flex-direction: column; }
.flxRowReverse { flex-direction: row-reverse; }
.flxColReverse { flex-direction: column-reverse; }

/* flex-wrap: */
/*.flxNoWrap { flex-wrap: nowrap; } /* default */
.flxWrap { flex-wrap: wrap; }
.flxWrapReverse { flex-wrap: wrap-reverse; }

/* justify-content: */
/*.jcStart { justify-content: flex-start; } /* default */
.jcEnd { justify-content: flex-end; }
.jcCenter { justify-content: center; }
.jcSpaceEvenly { justify-content: space-evenly; }
.jcSpaceAround { justify-content: space-around; }
.jcSpaceBetween { justify-content: space-between; }

/* align-items: */
/*.aiStretch { align-items: stretch; } /* default */
.aiCenter { align-items: center; }
.aiStart { align-items: flex-start; }
.aiEnd { align-items: flex-end; }
.aiBaseline { align-items: baseline; }

/* flex-grow, flex-shrink, flex-basis */
.flxGrow { flex-grow: 1; }


/* ---- Grid ---- */
.grid2Cols { grid-column: span 2; }
.grid3Cols { grid-column: span 3; }
.grid4Cols { grid-column: span 4; }

/* For Dev */
.r { border: 1px solid #f00; }
.g { border: 1px solid #0f0; }
.b { border: 1px solid #00f; }
.y { border: 1px solid #ff0; }
.c { border: 1px solid #0ff; }
.m { border: 1px solid #f0f; }



/* CSS for DJG portfolio website */

:root {
    /* Colours */
    --bgOverlay: rgba( 0, 0, 0, 0.2 );
    --bgSolid: #181818; /* rgba( 24, 24, 24, 1 ) */
    --bgPrimary: #00502c; /* rgba( 0, 80, 44, 1 ) */
    --bgSecondary: rgba( 217, 203, 140, 0.4 );
    --bgSecondary0: rgba( 217, 203, 140, 0 );
    --frame: #d9cb8c; /* rgba( 217, 203, 140, 1 ) */
    --shadow: #000000;
    --shadowWithOpacity: rgba(0,0,0,0.5);

    --tx: #d8d8d8; /* rgba( 216, 216, 216, 1 ) */
    /*--tx0: rgba( 216, 216, 216, 0.1 );*/
    --txSubtle: #b8b8b8;
    --txLink: #ffe090; /* rgba( 255, 224, 144, 1 ) */

    --atBg: #f9f2d7; /* rgba( 249, 242, 215, 1 ) */
    --atMenuBg: #282828;
    /*--atFr0: #d6c99c; /* atFr0 rgba( 214, 201, 156, 1 ) */
    --atFr: #beb486; /* atFr1 rgba( 190, 180, 134, 1 ) */
    --atTx: #303030;
    --atLink: #008a4e;
    --atShow: #005028; /* rgb( 0, 80, 40 ); */
    --atStep: #004848; /* rgb( 0, 72, 72 ); */
    --atIndp: #000878; /* rgb( 0, 8, 120 ); */

    --eRayBg: #060d13;

    --plBtnLight: #484848;
    --plBtnDark: #202020;

    /* Minimum Header and Footer heights */
    --hHeight: 0rem;
    --fHeight: 8.25rem;
}
@media (width > 36rem) and (height <= 36rem) { /* Landscape mobile */
    :root {
        --hHeight: 0rem;
        --fHeight: 3.625rem;
    }
}
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    :root {
        --hHeight: 4.4375rem;
        --fHeight: 8.8125rem;
    }
}
:root { --hfHeight: calc(var(--hHeight) + var(--fHeight)); }

/* Site Fonts */
@font-face { /* open-sans-300 - latin */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/open-sans-v40-latin-300.woff2') format('woff2');
}
@font-face { /* open-sans-300italic - latin */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/open-sans-v40-latin-300italic.woff2') format('woff2');
}
@font-face { /* open-sans-regular - latin */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2');
}
@font-face { /* open-sans-italic - latin */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open-sans-v40-latin-italic.woff2') format('woff2');
}
@font-face { /* open-sans-700 - latin */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/open-sans-v40-latin-700.woff2') format('woff2');
}
@font-face { /* open-sans-700italic - latin */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/open-sans-v40-latin-700italic.woff2') format('woff2');
}
@font-face { /* roboto-mono-300 - latin */
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/roboto0-mono-v23-latin-300.woff2') format('woff2');
}
@font-face { /* roboto-mono-regular - latin */
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto0-mono-v23-latin-regular.woff2') format('woff2');
}


/* Background and text */
html {
    width: 100vw;
    height: 100vh;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--tx);
    font-family: 'Open Sans', sans-serif;
    text-decoration: none;
    font-weight: normal;
    font-style: normal;
    text-align: left;
}
body { display: block; }
.bg {
    width: 100vw;
    height: 100vh;
    background-color: var(--bgSolid);
    background-repeat: no-repeat;
    background-image:
        radial-gradient(circle at 40% 0%, var(--bgSecondary), 35%, var(--bgSecondary0)),
        linear-gradient(175deg, var(--bgSolid), var(--bgPrimary));
}
.bgSolid { background-color: var(--bgSolid); }

h1, h2, h3, h4, h5, h6 { font-weight: 300; }
h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }
p { font-size: 1rem; }
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.75rem; }
    h4 { font-size: 1.5rem; }
    h5 { font-size: 1.25rem; }
    h6 { font-size: 1rem; }
    p { font-size: 1.25rem; }
}

a:hover, a:active { color: var(--txLink); }
a:hover, a:active, button:hover, button:active { cursor: default; }
@media (hover: hover) {
    a:hover, button:hover { cursor: pointer; }
}


/* Site structure */
div#siteWrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
main {
    flex: 1 1 100%;
    width: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
}
section {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
    overflow-x: hidden;
    overflow-y: auto;
}


/* Main Menu */
button#openMenu {
    z-index: 15;
    position: fixed;
    top: 0;
    right: 0;
    width: 3.75rem;
    border-radius: 0 0 0 0.625rem;
    padding: 0.5rem 0;
    background-color: var(--bgOverlay);
    display: flex;
    flex-direction: column;
    align-items: center;
}
img.openMenu { width: 2.5rem; height: 1.75rem; }
nav#sideNav {
    z-index: 20;
    position: fixed;
    top: 0;
    width: 14rem;
    border-radius: 0 0 0 0.75rem;
    padding: 0.5rem;
    background-color: var(--bgSolid);
    box-shadow: var(--shadow) 0 0 0.5rem;
    display: flex;
    flex-direction: column;
}
nav.sideNavOff { right: -15rem; }
button#closeMenu {
    z-index: 25;
    align-self: flex-end;
    margin: 0 0 -0.75rem 0;
    padding: 0 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
img.closeMenu { width: 1.5rem; height: 1.5rem; }
nav#sideNav > a {
    padding: 0.5rem 1rem;
    font-weight: 300;
}
@media (width > 36rem) and (height <= 36rem) { /* Landscape mobile */
    nav#sideNav {
        width: 24rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    nav.sideNavOff { right: -25rem; }
    button#closeMenu, div.menuHeading { grid-column: span 2; }
    button#closeMenu {
        align-self: stretch;
        justify-self: end;
    }
    nav#sideNav > a {
        padding: 0.25rem 1rem;
        text-align: center;
    }
}
nav.sideNavOn { right: 0; }
div#topNavWrapper { display: none }
@media (width > 65rem) and (height > 36rem) { /* When wide enough for top menu with no text wrap */
    button#openMenu, nav#sideNav { display: none; }
    div#topNavWrapper {
        z-index: 10;
        padding: 0.5rem 0 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1.25;
    }
    nav#topNav {
        display: grid;
        align-items: center;
        grid-template-columns: repeat(2, 6rem) repeat(6, auto);
    }
    nav#topNav > a {
        padding: 0.5rem 0.75rem 1rem;
        font-size: 1.125rem;
        font-weight: 300;
        text-align: center;
    }
}
a.currentView { color: var(--txLink); }
div.menuHeading {
    min-width: 10rem;
    display: flex;
    align-items: center;
}
h6.menuHeading {
    padding: 0 0 0 0.125rem;
    color: var(--frame);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.125rem;
}
div.menuLineL, div.menuLineR {
    flex-grow: 1;
    height: 0.0625rem;
}
div.menuLineL {
    background-image: linear-gradient(270deg, var(--bgSecondary), var(--bgSecondary0) );
}
div.menuLineR {
    background-image: linear-gradient(90deg, var(--bgSecondary), var(--bgSecondary0) );
}


/* Separator Lines */
.separatorT, .separatorTB, .separatorB {
    border-image-source: linear-gradient( 90deg, var(--bgSecondary0), var(--bgSecondary), var(--bgSecondary0) );
}
.separatorT {
    border-top-width: 0.0625rem;
    border-top-style: solid;
    border-image-slice: 100 0 0 0;
}
.separatorTB {
    border-top-width: 0.0625rem;
    border-top-style: solid;
    border-bottom-width: 0.0625rem;
    border-bottom-style: solid;
    border-image-slice: 50 0 50 0;
}
.separatorB {
    border-bottom-width: 0.0625rem;
    border-bottom-style: solid;
    border-image-slice: 0 0 100 0;
}

/* Section Titles */
div.sectionTitle {
    padding: 2rem 1rem 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
img.sectionTitle {
    width: 4rem; height: 4rem;
    border-radius: 0.8rem;
    background-color: var(--frame);
    box-shadow: var(--frame) 0 0 0.5rem;
}
img.minorTitle { width: 3rem; height: 3rem; }
h1.sectionTitle, h2.sectionTitle {
    padding: 0.75rem 0 0 0;
    text-align: center;
}
div.longerTitle {
    padding: 1rem 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.25;
}
@media (width > 36rem) and (height <= 36rem) { /* Landscape mobile */
    div.sectionTitle {
        margin: 0 3rem;
        padding: 1.5rem 1rem;
        flex-direction: row;
    }
    h1.sectionTitle, h2.sectionTitle { padding: 0 0 0 1rem; }
    div.longerTitle { padding: 0 0 0 1rem; }
}
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    div.sectionTitle {
        margin: 0 4rem;
        padding: 1.5rem;
        flex-direction: row;
    }
    img.sectionTitle {
        width: 5rem; height: 5rem;
        border-radius: 1rem;
    }
    h1.sectionTitle, h2.sectionTitle {
        padding: 0 0 0 1.25rem;
        text-align: left;
    }
    div.longerTitle { padding: 0 0 0 1rem; }
}


/* App Store Badges */
div.appStoreWrapper {
    width: min(80%, 32rem);
    padding: 0.75rem 0;
    display: flex;
    justify-content: space-between;
}
a.appleBadge, a.googleBadge {
    margin: 0.75rem 0;
    width: 100%;
    display: flex;
}
img.appBadge { width: 100%; }
h6.appStoreLegal {
    width: 70%;
    padding: 0 0.75rem 1rem 0.75rem;
    text-align: center;
    text-wrap: balance; /* Experimental */
}
a.appleBadge { width: 42%; }
a.googleBadge { width: 47%; }
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    div.appStoreWrapper { width: min(80%, 36rem); }
    h6.appStoreLegal {
        width: min(70%, 48rem);
    }
}


/* Footer */
footer {
    z-index: 9;
    margin-top: auto;
    width: 100%;
    border-top-width: 0.0625rem;
    border-top-style: solid;
    border-image-slice: 100 0 0 0;
    border-image-source: linear-gradient( 90deg, var(--bgSecondary), var(--bgSecondary0) );
    padding: 0.5rem 0 1.5rem 0.5rem;
    color: var(--txSubtle); 
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
a.miniMenu {
    padding: 0.375rem 0.75rem;
    display: flex;
    align-items: center;
}
img.miniMenu {
    margin-right: 0.375rem;
    width: 1rem; height: 1rem;
    text-align: center;
}
@media (width > 36rem) and (height <= 36rem) { /* Landscape mobile */
    footer {
        padding: 0.5rem 0 1rem 0.5rem;
        flex-direction: row;
    }
}
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    footer { padding: 0.75rem 0 1.25rem 1rem; }
}

/* CSS specifically for the home page */

section#home {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

div.spacer { flex: 0.5 1 0; }

/* DJG Hero Mug and Sig */
div#djgHero {
    margin: 1rem 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
img#mug {
    width: min(90vw, 60vh, 7.5rem);
    height: min(90vw, 60vh, 7.5rem);
    border-radius: 50%;
}
img#sig {
    width: min(90vw, 200vh, 25rem);
    height: min(18vw, 40vh, 5rem);
}
h6.djgPortfolio {
    padding: 0 0 0.5rem 0;
    color: var(--frame);
    text-align: center;
}
span.djgPortfolio { letter-spacing: 0.75rem; }
@media (width > 36rem) and (height <= 36rem) { /* Landscape mobile */
    div#djgHero { flex-direction: row; }
    img#mug { width: min(25vw, 30vh, 6rem); height: min(25vw, 30vh, 6rem); }
    img#sig { width: min(75vw, 125vh, 25rem);  height: min(15vw, 25vh, 5rem); }
}
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    img#mug { width: 11.25rem; height: 11.25rem; }
    img#sig { width: 33.75rem; height: 6.75rem; }
}

/* Site menu */
div#homeNavWrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}
nav#homeNav {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

a.majorLink {
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media (width <= 32rem) {
    nav#homeNav { grid-template-columns: repeat(3, 1fr); }
    a.majorLink:last-child { grid-column-start: 2; }
}
img.majorLink {
    margin: 0.5rem;
    width: 3rem; height: 3rem;
    border-radius: 0.6rem;
    box-shadow: var(--shadowWithOpacity) 0 0 0.5rem;
}
a.majorLink:hover > img.majorLink, a.majorLink:active > img.majorLink {
    box-shadow: var(--txLink) 0 0 0.5rem;
}
h5.majorLink {
    padding: 0.25rem;
    text-align: center;
}
@media (width > 36rem) and (height <= 36rem) { /* Landscape mobile */
    a.majorLink { padding: 0.5rem 0 0; }
}
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    img.majorLink {
        width: 4rem; height: 4rem;
        border-radius: 0.8rem;
    }
}


/* CSS common to the main articles */


/* Hero elements */
div.hero {
    flex-shrink: 0;
    width: 100%;
    padding: 4rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
p.hero {
    max-width: min(40rem, 90%);
}
p.heroTx {
    font-size: 1.5rem;
    text-align: center;
    text-wrap: balance; /* Experimental */
}
img.hero {
    width: 100%;
    display: block;
}
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    div.hero { padding: 5rem 0; }
    p.heroTx { font-size: 1.75rem; }
}

/* Block paragraphs */
div.blockPara {
    flex-grow: 1;
    flex-shrink: 0;

    padding: 2rem 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
h3.blockPara, p.blockPara {
    max-width: min(85%, 25rem);
    padding: 0.5rem 0;
}
h3.blockPara {
    text-align: center;
}
p.blockPara {
    text-align: justify;
}
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    h3.blockPara, p.blockPara { max-width: min(85%, 30rem); }
}

/* Hero image banners */
div.heroImgs2 {
    flex-shrink: 0;
    width: 100%;

    display: flex;
    flex-direction: column;
}
@media (width > 48rem) { /* Too wide for single full width img */
    div.heroImgs2 { flex-direction: row; }
    div.heroImgs2 > img { width: 50%; }
}



/* CSS for animations */

/* Animation times need to match anims.js values. */
:root {
    --menuSlideTime: 0.5s;
    --fadeTime: 0.5s;
    --fadeSlowTime: 1s;
    --fadeSlowerTime: 1.5s;
    --prePopInDelay: 0.25s;
    --popInTime: 0.5s;
    --popOffsetTime: 0.08s;
}

/* Fade in or out for views */
.fadeIn { animation-name: animFadeIn; }
.fadeOut { animation-name: animFadeOut; }
.fadeIn, .fadeOut {
    animation-duration: var(--fadeTime);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes animFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes animFadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}


/* Mobile menu slide in and out anims */
nav.menuSlide {
    transition-property: right;
    transition-duration: var(--menuSlideTime);
    transition-timing-function: ease-in-out;
}


/* Extra landing animations, removed by removeInitialAnims() in anim.js. */
.popIn1, .popIn2, .popIn3, .popIn4, .popIn5, .popIn6, .popIn7 {
    transform: scale(0);
    animation-name: animPopIn;
    animation-duration: var(--popInTime);
    animation-timing-function: cubic-bezier(0.4, 1.6, 0.6, 1);
    animation-fill-mode: both;
}
.popIn1 {
    animation-delay: calc(var(--fadeSlowTime) + var(--prePopInDelay));
}
.popIn2 {
    animation-delay: calc(var(--fadeSlowTime) + var(--prePopInDelay) + var(--popOffsetTime));
}
.popIn3 {
    animation-delay: calc( var(--fadeSlowTime) + var(--prePopInDelay) + (2 * var(--popOffsetTime)));
}
.popIn4 {
    animation-delay: calc( var(--fadeSlowTime) + var(--prePopInDelay) + (3 * var(--popOffsetTime)));
}
.popIn5 {
    animation-delay: calc( var(--fadeSlowTime) + var(--prePopInDelay) + (4 * var(--popOffsetTime)));
}
.popIn6 {
    animation-delay: calc( var(--fadeSlowTime) + var(--prePopInDelay) + (5 * var(--popOffsetTime)));
}
.popIn7 {
    animation-delay: calc( var(--fadeSlowTime) + var(--prePopInDelay) + (6 * var(--popOffsetTime)));
}
@keyframes animPopIn {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}
.fadeInSlow, .fadeInLate {
    opacity: 0;
    animation-name: animFadeIn;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.fadeInSlow { animation-duration: var(--fadeSlowTime); }
.fadeInLate {
    animation-delay: calc(
        var(--fadeSlowTime) +
        var(--prePopInDelay) +
        var(--popInTime) +
        (6 * var(--popOffsetTime)));
    animation-duration: var(--fadeSlowerTime);
}



/* Important classes for hiding */
.hide { display: none !important; }
.invisible { opacity: 0 !important; }