/* -------------------------------------------------- */

html { scroll-behavior: smooth; }

html, body, body * { box-sizing: border-box; margin:0; padding:0; }

body { line-height: 1.425; background-color: #222222; /* 222233 */ font-size: 1em; font-family: "Geist Sans", "Source Sans 3", sans-serif;
min-width: 360px; animation:opax 0.5s} @keyframes opax{from{opacity:0} to{opacity:1}}

@media (min-width: 1439px ) {

    body { font-size: calc(0.5em + 0.5vw); }
    body #footerbottom { font-size: 0.8em; }
    body #footerbottom small { font-size: 1em; }
}

@media (min-width: 1599px ) {

    body { font-size: calc(0.375em + 0.625vw); }
}

@media (min-width: 2250px ) {

    body { font-size: calc(0.175em + 0.825vw); }
}

@media (min-width: 3000px ) {

    body { font-size: calc(0.1em + 0.9vw); }
}

iframe * { font-family: "Geist Sans" !important; }

/* -------------------------------------------------- */

h1, h2, h3, h4, h5 { clear:both;  padding: 0  0 0 0; font-family: "Geist Sans", "Source Sans 3", sans-serif; line-height: 1.425; word-spacing: -1pt; }


h1 { margin-bottom: 0.6em; font-weight: 700; line-height: 1.275; }
#wordmark h1, #header h1 { margin-top: -0.1em; line-height: 1.2; font-weight: 500; }

h1:has(+ h2) { margin-bottom:0.333em }

h2 { margin-bottom: 0.33em; font-weight: 400; }
h3 { margin-bottom: 0.33em; font-weight: 400; }

#all-not-side h1 { font-size: 2em; opacity: 0.5; margin-top: 0.05em; }
#all-not-side h2 { font-size: 1.5em; opacity: 0.8; }

h1 + p { margin-top: 1em; /* Paragraphs immediately following an h1 will have a larger top margin */ }


p { clear: both; padding-bottom: 1em; font-weight: 200; }
ol { margin-bottom: 1em; font-weight: 200; }
ul { margin-bottom: 1em; font-weight: 200; }
blockquote { margin-bottom: 1em; font-weight: 400; }
cite { font-weight: 300; }

    #all-not-side a, #all-not-side a:hover, #all-not-side a:visited { color: #333 ; }

cite  { margin: 0em 0 1em 0.5em; font-size: 0.8em; font-style: normal; display: block; float:right; text-align: right;}
  cite:before { content: " - "; }
  cite:after { }
blockquote { /*text-align: justify; */   word-spacing: clamp( 1px, 0.1vw + 0.1rem, 10px ); position: relative; width: 100%; font-size: 0.93em; display: inline; font-style: italic; opacity: 0.8; float:left; padding-left: 1em; padding-right: 2em; margin: 0.667em 0 0;}


blockquote:before {

    font-family: serif;

    display: block; float:left;
    content: "\201C";
    font-size: 3.75em;
    position: absolute;
    margin-top: -0.375em; margin-left: -0.6em;
    opacity: 0.275;
}

blockquote:after {
    font-family: serif;
    content: "\201D";    /* The Unicode for the right double quote */
    display: block;
    float: right;
    font-size: 3.75em;
    position: absolute;
    bottom: 0.11em;      /* Pulls it down slightly below the text line */
    right: -0.11em;        /* Adjusts horizontal alignment */
    line-height: 0;      /* Prevents the quote from adding extra height to the box */
    opacity: 0.25;
}


  blockquote p { margin-bottom:0.5em; }
    blockquote p br { margin-bottom:0.25em; }

#testimonials blockquote { padding:0 0 0 2em; background-color: transparent; }
#testimonials blockquote p:before { opacity: 0.5; }
#testimonials blockquote p:after { opacity: 0.5; }

#testimonials cite { margin-left: 2.75em; }

a#form-button { float:left; display:block; padding: 1em; background-color: #222; border-radius: 0.2em; color:white !important; text-decoration:none; margin: 0.333em 0 1.5em; }

/* -------------------------------------------------- */

    #wordmark { width:100%; text-align: right; padding-right:4vw; font-size: calc(1.375vw); }
        #wordmark h1 { margin-bottom: 0.2em; }
        #wordmark h2 { font-size: 0.8em; }
        #wordmark a { outline:none; text-decoration: none; color: #fff; }

    #header { display:none; min-width: 50%; float:left; background-color: rgba(0,0,0,0.8); padding-right: 1em; }
        #header h1 { color: #fff; padding:0; margin:0.225em 0 0 1.5em; line-height: 1.225; }
        #header h2 { color: #fff; font-size: 1em; padding-bottom:0.5em; }
        #header a { width: 100%; text-align: center; color: #fff; text-decoration: none; }

/* ------------------------- */

    #hamburger { display: none; position:absolute; z-index: 99999; background-color: transparent; color: #fff;
    outline-color:transparent; outline: none; border: none; font-size:1.4em;
    height: 2em; width: 2em; top: calc(5% - 0.75em); left: calc(5% - 0.5em); }

    #side { display:block; height: 100%; padding-top: calc(2.5vmax + 2.5vmin); width:30%; float:left; background-color: transparent; font-family: "Geist Sans", "Source Sans 3", sans-serif;  }

    #menu { display: table; width: 100%; height: 100%; font-size: 1.475vmax; }
        #menu ul { display: table-cell; height: 56vh; text-align: right; padding-right: 4vw; padding-top: calc(2vw + 2vh); vertical-align: middle;
      line-height: 1.667; list-style-type: none; }
        #menu ul a { outline:none; text-decoration: none; color: #fff; opacity: 0.8; border-bottom: 1px solid #222222; transition: border-color 1s; }
        #menu ul a:hover { border-bottom: 1px solid white; transition: border-color 1s; }

    .assessment-and-configuration,
    .reporting-and-data-analysis,
    .system-setup-and-optimization,
    .support-and-troubleshooting { font-size:0.95em; line-height: 1.5; opacity: 0.95; padding-right: 0.5em; border-right: 3pt solid white; }


    .assessment-and-configuration { padding-top: 0; } /* this the the two below help this group stand out more in the navigation */
    .pointclickcare-consulting { margin-bottom: 0.25em; }
    .recent-projects { margin-top: 0.25em; }

    #homepage .homepage a,
    #pointclickcare-consulting .pointclickcare-consulting a,

    #reporting-and-data-analysis .reporting-and-data-analysis a,
    #system-setup-and-optimization .system-setup-and-optimization a,
    #assessment-and-configuration .assessment-and-configuration a,
    #support-and-troubleshooting .support-and-troubleshooting a,

    #faq .faq a,
    #testimonials .testimonials a,
    #recent-projects .recent-projects a,
    #about-me .about-me a,
    #contact .contact a { text-decoration: none; font-weight: 400; word-spacing: -1.5pt; opacity: 1; border-bottom: 3px solid #222222 !important; transition: border-color 1s; }

/* ------------------------- */

    #all-not-side { background-color: #fff; position: relative; width: 70%; float: right;
  height: 100%; min-height: 45vmax; }

  #two-cols {  width: 100%; float: left; padding: calc(2.5vmax + 2.5vmin) 5% 0% 5%; }

    #main-content { width: 50%; float: left; padding: calc(2.5vmax + 2.5vmin) 2.5% 5% 5%; }
    #testimonials #main-content { padding-top: 0; }

/*
    #recent-projects #main-content  { width: 100%; padding-right: 10%; }
    #recent-projects #main-content p:first-of-type { width: 67%; }
*/


    /* #main-content { width: 100%; padding-right: 10%; } */

        #main-content ul { list-style-type: square; margin-bottom: 1em; }
        #main-content ul li { list-style-position: outside; margin-left: 1em; }
        #main-content ul li ul { list-style-type: disc; margin-top: 0.333em; font-size: 0.9em; }

    #aside-content { width: 50%; float: right; padding: 5% 5% 5% 2.5%; }
    #testimonials #aside-content { padding-top: 0; }
        #aside-content h2 { font-size: 1.5em; opacity: 0.8; }
        #aside-content img { float:left; display:block; width:100%; height:auto; margin-bottom: 1em; }
        #aside-content iframe { margin-top: 1em; image-rendering: crisp-edges; margin-bottom: 1em; }
        #aside-content ul { list-style-type: square; margin-bottom: 1em; }
        #aside-content ul li { list-style-position: outside; margin-left: 1em; }

/* ------------------------- */

    #footer { position:absolute; bottom:0; background-color: rgba(0,0,0,0.9); color: #fff; opacity: 0.9; height:auto; width: 100%; float: left; }
    #footer p { margin:1.25%; padding: 1.25%; height: auto; }

    #footerbottom { margin: -1vh 0; float: left; width: 100%; clear: both; background-color: #eee; color: #000;
  font-size: small; opacity: 0.99 /* a fix */; z-index: 999999; }
    #footerbottom div { float:left; width: 100%; width: 100%; }
    #footerbottom p { float:right; padding: 2.5% 5%; opacity: 0.75; }
    #footerbottom a, #footerbottom p { color: #000; }
    #footerbottom small { float:left; padding: 2.5% 5%; opacity: 0.5; font-size: 1em; }
    #footerbottom small a { text-decoration: none; }

/* -------------------------------------------------- */

/* ------------------------- */
@media (max-width: 1024px ) {
    #menu { font-size: 1.75vmax; }

    #footerbottom p { float: left; padding: 2.5% 5% 0 5%; opacity: 0.75; line-height: 1.4; }
    #footerbottom a, #footerbottom p { color: #000; }
    #footerbottom small { float:left; clear:both;  padding: 0 5% 2.5% 5%; opacity: 0.5; font-size: 0.8em; line-height: 1.4; }

    body { line-height: 1.375; font-size: 1em; }
    h1, h2, h3, h4, h5 { margin-bottom: 0.333em; line-height: 1.375 }
    p { margin-bottom: 0.75em; }
}

/* ------------------------- */
@media (max-width: 800px ) {

    body { line-height: 1.333; font-size: 0.9em;  }
    h1, h2, h3, h4, h5 { margin-bottom: 0.3em; line-height: 1.333 }
    p { margin-bottom: 0.667em; }

/*
     #recent-projects #main-content p:first-of-type { width: 100%; }
*/

    #wordmark { visibility: hidden; }
    #header { display: block; position: relative !important; height: auto; float: left; }

        #header { min-width: 100%; padding-right: 0; }
    #header h1 { margin-left:0; }

    #menu { font-size: 3.75vmax !important; animation:opacii 0.4s} @keyframes opacii{from{opacity:0} to{opacity:1}}
        #menu ul { height: 56vh; text-align: right; padding-top: 0; padding-left: calc(5vw + 5vh); padding-right: calc(5vw + 5vh); vertical-align: middle;
      line-height: 1.667;  }

    #hamburger { display: block; animation:opac 1s} @keyframes opac{from{opacity:0} to{opacity:1}}

    #side { display:none; width:0; }
    #all-not-side { display: block; width:100%; }

    #main-content { width:100%; float:left; clear: left; }
    #aside-content { width: 100%; float:right; padding: 0 5% 5% 5%  ; margin-top: 0; }

    .desktop-only { display: none; }
}

/* ------------------------- */
@media (max-width: 640px ) {

    body { line-height: 1.3; font-size: 0.9em;  }
    h1, h2, h3, h4, h5 { margin-bottom: 0.275em; line-height: 1.3 }
    p { margin-bottom: 0.6em; }

    #header { min-width: 100%; padding-right: 0; }
    #header h1 { margin-left:0; }
}





/* - WEBFONTS  --------------------------------------------- */


@font-face {
    font-family: 'Geist Sans';
    src: url('../webfonts/Geist-VariableFont_wght.ttf') format('truetype-variations');
    /* This range covers Thin (100) to Black (900) */
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('../webfonts/SourceSans3-VariableFont_wght.ttf') format('truetype-variations');
    /* This range covers Thin (100) to Black (900) */
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Source Sans 3 - Italic */
@font-face {
    font-family: 'Source Sans 3';
    src: url('../webfonts/SourceSans3-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}


/* WEBFONTS ends */