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

html { scroll-behavior: smooth; }

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

body { line-height: 1.45; background-color: #B3BECB; font-size: 1em; font-family: "Quicksand", sans-serif;
min-width: 360px; animation:opax 0.5s} @keyframes opax{from{opacity:0} to{opacity:1}}

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

h1, h2, h3, h4, h5 { padding: 0  0 0 0; margin-bottom: 0.5em; margin-top:0; font-family: "Oswald", sans-serif; font-weight: normal; line-height: 1 }
h1 { margin-top: -0.1em; }
p { margin-bottom: 1em; }

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

cite  { margin: 0.25em 0 1em 0.5em; font-size: 0.75em; font-style: normal; display: block; }
  cite:before { content: " - "; }
  cite:after { }
blockquote { width: 100%; display: inline; font-style: italic; opacity: 0.75; background-color: #eeeeee; float:left; padding: 1em; margin: 0.25em 0;}
  blockquote p:before { content: open-quote; }
  blockquote p:after { content: close-quote; }
  blockquote p { margin-bottom:0.5em; }
    blockquote p br { margin-bottom:0.25em; }

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

    #wordmark { color: #000; width:100%; text-align: right; padding-right:4vw; font-size: calc( 0.75em + 0.33vw + 0.25vmax ); }
        #wordmark h1 { margin-bottom: 0em; }
        #wordmark h2 { font-size: 0.98em; }
        #wordmark a { outline:none; text-decoration: none; color: #000; }

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



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

    #menu { display: table; width: 100%; height: 100%; font-size: calc( 0.333vmax + 0.5vw + 0.666em); }
        #menu ul { display: table-cell; height: 56vh; text-align: right; padding-right: 4vw; padding-top: calc(2vw + 2vh); vertical-align: middle;
      line-height: 1.45; list-style-type: none; }
        #menu ul a { outline:none; text-decoration: none; color: #000; opacity: 0.8; border-bottom: 3px solid #DCEEAA; transition: border-color 1s; }
        #menu ul a:hover { border-bottom: 3px solid black; transition: border-color 1s; }

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

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

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

    #select-projects #main-content,
    #faq #main-content { width: 100%; padding-right: 10%; }

        #main-content h1 { font-size: 2em; opacity: 0.5; }
        #main-content h2 { font-size: 1.55em; opacity: 0.8; }

        #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%; }
        #aside-content h2 { font-size: 1.55em; 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 ) {


    #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; }


    #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 ) {



    #side { width: 100%; font-size:  200%; }

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

    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; }
}