/* DEVELOPMENT */
header, main, footer { max-width: 600px }


/* TYPOGRAPHY */

  /* BASE */

    /* ROOT ELEMENTS */
    html, body { font-family: azo-sans-web, sans-serif; font-size: 18px; line-height: 28px }

    /* PARAGRAPHS */
    p { font-size: 18px; line-height: 28px; font-weight: normal; text-align: left; padding: 10px 25px }

    /* HEADING 1 */
    h1 { font-size: 22px; line-height: 24px; font-weight: bold; text-transform: uppercase; letter-spacing: 3px; padding: 30px 25px 15px 25px }

    /* HEADING 2 */
    h2 { font-size: 22px; line-height: 24px; font-weight: bold; text-transform: uppercase; padding: 30px 25px 12px 25px }

    /* HEADING 3 */
    h3 { font-size: 18px; line-height: 22px; font-weight: bold; text-align: left; padding: 20px 25px 10px 25px }

    /* HEADING 4 */
    h4 { font-size: 18px; line-height: 22px; font-weight: bold; text-align: left; text-transform: lowercase; padding: 12px 15px 14px; margin: 10px 25px 15px; border: 1px solid #CCCCCC }

    h4.long { text-transform: none; font-weight: normal; padding: 25px }

  /* CONDITIONAL */
  
    /* POST H1 */
    h1 + h2 { padding: 0 25px 12px }
    h1 + h3 { padding: 5px 25px 10px }
    h1 + p  { padding: 0 25px 10px }
    
    /* POST H2 */
    h2 + h3 { padding: 5px 25px 10px }
    h2 + p { padding: 0 25px 10px }
    h2 + img { padding: 15px 25px 10px }

    /* POST H3 */
    h3 + p { padding: 0 25px 10px }
    h3 + img { padding: 15px 25px 10px }

    /* POST H4 */
    h4 + p, h4 + ul, h4 + ol { font-size: 16px; line-height: 26px; margin: 0 15px }
    h4 + ul  { margin: 15px }
    h4 + img { padding: 15px 25px 10px }
    p + h4, ul + h4 { margin-top: 30px }
    h4 + .e-split { padding: 10px }

    h4 > img { margin-bottom: 25px }


/* COLOR THEME - FROM DARKEST TO LIGHTEST

  COLOR 1:    #101820
  COLOR 2:    #161E26
  COLOR 3:    #323D4A

  INDEX.PHP: PARENT ELEMENTS */
  html { background-color: #101820 }
  main { background-color: #FFFFFF }
  header { background-color: #FFFFFF }

  /* MENU TOGGLER */
  #menuToggler { background-color: #FFFFFF }

  /* NAVIGATION BAR (MENU) */
  #enbar { color: #FFFFFF }
  #enbar::before { background-color: #101820 }
  #enbar::after { color: #000000; background-color: #FFFFFF }
  #enbar > li, #enbar > li:nth-of-type(even) { background-color: #161E26 }
  #enbar > li:last-child > a { color: #323D4A }
  #enbar li svg { color: #323D4A }
  #enbar li ul li a { color: #FFFFFF }
  
  /* FONTS */ 
  p, h1, h2, h3, h4 { color: #000000 }

  /* FORMS */

    /* INPUT */
    input { color: #000000; border: 1px solid #BEBEBE; border-radius: 0; background-color: #FFFFFF }
    input::placeholder { color: #555555 }

    /* TEXTAREA */
    textarea { color: #000000; border: 1px solid #BEBEBE; background-color: #FFFFFF }

    /* BUTTONS */
    button { color: #FFFFFF }

  /* SOCIAL */
  header > div { background-color: #FFFFFF }


/* DISPLAY: INLINE OR BLOCK */

  /* INLINE */ 
  span, a { display: inline }

  /* BLOCK */
  div, p, h1, h2, h3, h4, img, ol, ul, ul li, form, input, textarea { display: block }


/* POSITION: RELATIVE | BOX-SIZING: BORDER-BOX */
div, span, a, img, ol, ul, li, form, fieldset, input, button, textarea { position: relative; box-sizing: border-box }


/* BORDERS & MARGINS */

  /* ZERO BORDERS */
  body, header, main, footer, div, span, a, img, ol, ul, li, form, fieldset, button { border: 0 }

  /* ZERO MARGINS */
  div, span, p, h1, h2, h3, a, img, ol, ul, input, fieldset, form, input, textarea, button { margin: 0 }

  /* ZERO AUTO */
  body, header, main, footer, form { margin: 0 auto }


/* LINKS */
a { cursor: pointer; text-decoration: none }


/* IMAGES */
  
  /* BASE */
  img { width: 100%; height: auto }

  /* CONDITIONAL */
  img + h4 { margin-top: 30px }

  img + img { padding: 15px 25px 25px }
  

/* LISTS */

  /* BASE */

    /* ORDERED */
    ol { list-style-position: inside; padding: 0 }
    ol li { padding: 8px 25px }
    ol li::marker { font-size: 110%; font-weight: bold }
    li ol li { list-style-type: lower-roman; font-size: 90%; padding: 6px 25px }
    li li ol li { list-style-type: lower-latin; font-size: 95%; padding: 3px 25px }
    ol li p, ol li h1, ol li h2, ol li h3, ol li h4 { display: inline }

    /* UNORDERED */
    ul { list-style: none; padding: 0 }
    ul li { padding: 4px 25px }
    li ul li { font-size: 13px; padding: 0 0 0 10px }
    li ul > li:last-child { padding-bottom: 10px }
    li ul li li { font-size: 100%; padding: 0 0 8px 10px }
    ul li > p, ul li > h2, ul li > h3, ul li > h4 { display: inline-block }

    /* BOTH */
    li > ul, li > ol { padding-top: 10px }
    ul li p, ul li h1, ul li h2, ul li h3, ol li h4 { padding: 0; margin: 0 }
    
  /* CONDITIONAL */

      /* POST PARENT ELEMENT */
      ol + h2, ul + h2 { padding-top: 40px }
      ol + p, ol + h3, ol + a, ul + p, ul + h3, ul + a { padding-top: 30px }

      ul + h3 { padding-top: 60px }

      ul + .dark, ol + .dark { margin-top: 30px }

      /* POST CHILD ELEMENT */
      li + img { padding: 15px 25px 25px }


/* FORMS */

  /* FIELDSETS */
  fieldset { display: flex; flex-direction: column; padding: 10px 25px 5px }

  /* INPUT */
  input { height: 55px; font-size: 14px; letter-spacing: 2px; padding: 0 15px }
  input::placeholder { text-transform: uppercase }

  /* TEXTAREA */
  textarea { width: 100%; font-size: 14px; line-height: 22px; font-weight: normal; text-align: left; padding: 10px 25px }

  /* BUTTONS */

    /* BASE */
    button { display: inline-flex; flex-flow: row nowrap; height: 55px; align-items: center; font-size: 12px; font-weight: 500; line-height: 0; text-transform: uppercase; letter-spacing: 0.5px; padding: 0 30px 2px; cursor: pointer }
    button span { flex: 0 0 auto }

    /* CONDITIONAL */
    button + p { margin-top: 40px }


/* TRANSITIONS */
      
  /* EASE */
  #enbar { transition: -webkit-transformf .5s ease; transition: transform .5s ease; transition: transform .5s ease, -webkit-transform .5s ease; z-index: 1 }

  /* EASE-IN-OUT */
  a, .btn { transition: all 0.4s ease-in-out 0s }


/* ANIMATIONS */

  /* SLIDES 100% TO LEFT */
  #enbar.shift { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); overflow-x: visible }


/* SHADOWS */
      
  /* BOTTOM */
  #enbar { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23) }
  
  /* TOP */
  header > div { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23) }


/* PARENT ELEMENTS */

  /* BODY */
  body { max-width: 100%; cursor: default; padding-bottom: 60px }
  
/* LOGO & TAGLINE */
.logo {	display: block; padding: 30px 0 15px }
.logo svg { display: block; position: relative; box-sizing: border-box; width: auto; height: 125px; margin: 0 auto }
#brand { display: block; text-align: center; margin: 0 }
#who { font-weight: bold; text-transform: uppercase; letter-spacing: 1px; padding-bottom: 10px  }


/* MENU */

  /* TOGGLER */
  #menuToggler { display: flex; position: fixed; top: 20px; left: 20px; width: 40px; height: 40px; flex-flow: row wrap; justify-content: center; align-content: center; font-size: 20px; padding: 0 0 4px 0; border-radius: 90px; cursor: pointer; z-index: 2 }

  /* UL.ENBAR */
  #enbar { display: flex; position: fixed; top: 0; right: -100%; left: inherit; width: 100%; height: 100%; flex-flow: row wrap; align-content: flex-start; text-transform: uppercase; padding: 70px 15px 20px; z-index: 1 }

  /* HEADING */
  #enbar::before { display: block; position: absolute; box-sizing: border-box; top: 0; left: 0; width: 100%; height: 100%; font-size: 120%; padding: 25px 20px 20px 80px; margin: 0; opacity: 0.95; z-index: 1 }

  /* ITEMS */
  #enbar li { flex: 1 1 auto; font-size: 16px; padding: 12px 25px; margin: 5px; cursor: pointer; z-index: 2 }
  #enbar li svg { float: right; padding-top: 5px; padding-left: 20px }
  #enbar li span { flex: 1 1 100%; padding-bottom: 2px }

  /* SUBITEMS */
  #enbar ul { display: none; padding-top: 15px; padding-bottom: 10px }
  #enbar ul li:first-child { padding: 0 0 6px; margin: 0 }
  #enbar ul li:first-child a { font-size: 20px; line-height: 20px; text-transform: uppercase }
  #enbar ul li { padding: 4px 0 0; margin: 0;  }
  #enbar ul li a { font-size: 14px; line-height: 14px; text-transform: none }


/* SOCIAL */
header > div { position: fixed; top: inherit; right: inherit; bottom: 60px; left: 0; width: 100%; display: flex; flex-flow: row wrap; height: 60px; z-index: 2 }

header > div a { display: flex; flex-flow: row wrap; flex: 1 1 auto; align-items: center; justify-content: center; margin: 0; overflow: hidden }


/* DARK THEME */

  /* COLORS */
  .dark { color: #FFFFFF; background-color: #252F3A }
  .dark > ul > li:nth-of-type(even), .dark > ol > li:nth-of-type(even) { background-color: #1E2731 }
  .dark h2, .dark h3 { color: #000000; background-color: #FFFFFF }
  .dark h4 { color: #FFFFFF; background-color: #101820 }
  .dark p { color: #FFFFFF }
  .dark a:hover { color: #FFFFFF }
  .dark li { color: #FFFFFF }
  
  /* H4 */
  .dark h4 { font-weight: normal; padding: 30px 25px; border: 0; margin: 0 }

  /* SPACING*/

    /* BASE */
    .dark h2 { padding: 30px 25px 35px }
    .dark h3 { padding: 20px 25px 22px }
    .dark p:last-child { padding-bottom: 50px }
    .dark li { padding: 30px 25px }
    .dark li li { padding: 12px 0 8px 10px }
    .dark li li li { padding: 5px 0 10px 10px }
    .dark li li li li { padding: 5px 0 5px 15px }
    .dark ol img { padding: 25px }
  

    /* CONDITIONAL */

      /* POST DARK DIV */
      .dark + h3 { padding-top: 40px }
      .dark + h4 { margin-top: 40px }
      .dark + p { padding-top: 40px }

      /* POST H2 */
      .dark h2 + p { padding-top: 30px }
      .dark h2 + img { padding: 0 }
      .dark h2 + h3 { padding-top: 0; padding-bottom: 30px; margin-top: -20px }
      
      /* POST H3 */
      .dark h3 + p { padding-top: 35px }
      .dark h3 + img { padding: 0 }

      /* POST P */
      .dark p + h4 { margin-top: 20px }
      p + ul.dark { margin-top: 30px }

      /* POST H4 */
      h4.dark + p.e-tiny, .dark h4 + p.e-tiny { padding-top: 20px }
      h4.dark + p, .dark h4 +p, h4.dark + ul, .dark h4 + ul, h4.dark + ol, .dark h4 + ol { margin: 0 }
      h4.dark + img, .dark h4 + img { padding-top: 25px }
      .dark h4 + p { padding-top: 20px; padding-bottom: 30px; background-color: #1b2530 }

      /* POST IMG */
      .dark img + p { padding-top: 30px }
      .dark ol img + li:nth-of-type(odd) { padding-top: 0 }
  
      /* POST UL & OL */
      .dark ul + img { padding-top: 0 }