/********* ALL CLASS NAMES PRECEDED WITH "e-" FOR ESENTIALIST - EG "e-break, e-tiny, e-btn, etc."

  CSS CLASS GLOSSARY - NOTE: CLASSES IN UPPERCASE FOR CLARITY PURPOSES
  
    ESENTIALS

      - E-BTN: buttons
      - E-HR: hr line
      - P.CAPTIONS: photo descriptions with label nested under span

    UTILITY

      - E-NEST: 25px x-pad
      - E-BREAK: 30px bot-pad
      - E-SPLIT: 2 column lists
      - E-TEXTBOX: Bordered textbox with flex properties

    TYPOGRAPHY

      - E-TINY: 14px fonts
      - E-QUOTES: stylized font for quotes

    JAVASCRIPT

      - ACCORDEONS
        - E-TOGGLE: click on element to display next element hidden by default

*/


/* ESENTIALS *********/

  /* E-BTN: BUTTONS */
  .e-btn { display: inline-flex; box-sizing: border-box; min-height: calc(15px + 4vh); justify-content: center; align-items: center; font-size: calc(7px + 0.6vh); line-height: calc(12px + 0.6vh); font-weight: bold; text-transform: uppercase; letter-spacing: 1px; color: #FFFFFF; padding: 0 20px; margin: 40px 25px 50px; background: #101820; cursor: pointer }

    @media (min-width:1560px) { .e-btn { padding: 0 30px; margin: 50px 0 75px }}

  ul + .e-btn { display: flex; justify-content: flex-start; min-height: 80px; font-size: 16px; text-align: left; padding-left: 25px; margin: 0 }

    /* CONDITIONAL */
    a.e-btn + p { margin-top: 40px }
    a.ebtn + h2, a.ebtn + h2, a.ebtn + h3, a.ebtn + h3, a.ebtn + .dark, a.ebtn + img { margin-top: 50px}


  /* E-BREATHE: TOP MARGIN */
  .e-breathe { margin-top: 30px !important }

  /* E-BREAK: BOTTOM-PADDING */
  .e-break { padding-bottom: 40px !important }

  /* E-HR: BREAK-LINES */

    /* BASE */
    .e-hr { padding: 0; margin-right: 25px; margin-left: 25px; border-bottom: 1px solid #CCCCCC !important }
    
    /* CONDITIONAL */
    li + .e-hr { margin-bottom: 25px }
    li li + .e-hr { margin-top: 10px; margin-bottom: 15px }
    h4 + ol .e-hr, h4 + ul .e-hr { margin-right: 25px; margin-left: 25px }
    h4 + ol li li .e-hr, h4 + ul li li .e-hr { margin-right: 10px; margin-left: 10px } 

  /* E-TINY: 14PX FONTS */
  .e-tiny, .e-tiny p { font-size: 14px; line-height: 22px }

      /* STRUCTURAL PADDING */
      ol.e-tiny li { padding: 6px 25px }
      ul.e-tiny li { padding: 4px 25px }

      /* CONDITIONAL PADDING */
      h4 + p.e-tiny { padding-top: 0 }
      p + ul.e-tiny { padding-top: 15px }
      .com-content-article__body p.e-tiny + img { margin-top: 10px }

  /* QUOTES */
  .e-quote {}

  /* PHOTO CAPTIONS */

    /* BASE */
    p.caption { display: block; font-size: 14px !important; line-height: 22px !important }
    p.caption span { float: right; font-size: 12px; text-transform: lowercase; letter-spacing: 2px; padding: 8px 25px 12px; margin: 0 0 10px 15px; color: #FFFFFF; background-color: #1da0f9 }

    /* CONDITIONAL */
    p.caption + h3 { margin-top: 0 }
    .dark p.caption + p { padding-top: 30px }
    
    /* DARK */
    .dark p.caption { padding: 20px 25px 50px }
    .dark p.caption span { color: #000000; background-color: #FFFFFF }


/* UTILITY *********/

  /* E-NEST: HORIZONTAL PADDING */
  .e-nest { padding-right: 25px; padding-left: 25px }

  /* E-TEXTBOX: TEXTBOXES WITH FLEX PROPERTIES */

    /* BASE */
    div.e-textbox { display: flex; flex-flow: row wrap; align-items: center; padding-bottom: 10px; margin: 0 25px; border: 1px solid #CCCCCC }
    div.e-textbox > p, div.e-textbox > a, div.e-textbox > span { flex: 0 0 auto; text-align: center; padding: 4px 25px 6px; margin-top: 10px; border-right: 1px solid #CCCCCC }
    .e-textbox .e-toggle { border: 0 !important; border-right: 1px solid #CCCCCC !important }
    .e-textbox p { font-size: 14px; line-height: 22px }

    /* CONDITIONAL */
    h3 + div.e-textbox { margin-top: 10px }
    div.e-textbox + img { padding: 25px 25px 10px }
    img + div.e-textbox { margin-top: 20px }
    div.e-textbox + p { margin-top: 30px }
    div.e-textbox + h4 { margin-top: 50px }
    div.e-textbox + .dark { margin-top: 30px }
    .e-textbox .e-toggle + div, .e-textbox .e-toggle + p, .e-textbox .e-toggle + a, .e-textbox .estoggle + span, .e-textbox .etoggle + ul, .e-textbox .etoggle + ol, .e-textbox .etoggle + .e-btn { flex: 1 1 100%; margin-top: 10px }
    
    /* DARK */
    .e-textbox.dark, .dark .e-textbox { border: 1px solid #1da0f9 }
    div.e-textbox.dark > p, .dark div.e-textbox > p, div.e-textbox.dark > a, .dark div.e-textbox > a, div.e-textbox.dark > span, .dark div.e-textbox > span { flex: 0 0 auto; text-align: center; padding: 4px 25px 6px; margin-top: 10px; border-right: 1px solid #1da0f9 }
    .e-textbox.dark .e-toggle, .dark .e-textbox .e-toggle { border-right: 1px solid #1da0f9 !important }
    .dark .e-textbox p:last-child { padding-bottom: 0 }

  /* E-SPLIT: UL/OL 2-COLUMN LAYOUT */

    /* BASE */
    .e-split { display: flex; flex-flow: row wrap }
    .e-split li { flex: 1 1 50%; border-top: 1px solid #CCCCCC }
    ol.e-split li, ul.e-split li { padding: 25px }
    .e-split li:nth-child(odd) { border-right: 1px solid #CCCCCC }

    /* DARK */
    .dark .e-split li, .dark.e-split li { border: 0 }
    .dark > ul.e-split > li:nth-of-type(even), .dark > ol.e-split > li:nth-of-type(even) { background-color: inherit }
    .dark .e-split li:nth-of-type(1), .dark .e-split li:nth-of-type(4), .dark .e-split li:nth-of-type(5), .dark .e-split li:nth-of-type(8), .dark .e-split li:nth-of-type(9), .dark .e-split li:nth-of-type(12), .dark .e-split li:nth-of-type(13), .dark .e-split li:nth-of-type(16), .dark .e-split li:nth-of-type(17), .dark .e-split li:nth-of-type(20), .dark .e-split li:nth-of-type(21), .dark .e-split li:nth-of-type(24), .dark .e-split li:nth-of-type(25), .dark .e-split li:nth-of-type(28), .dark .e-split li:nth-of-type(29), .dark .e-split li:nth-of-type(32), .dark .e-split li:nth-of-type(33), .dark .e-split li:nth-of-type(36), .dark .e-split li:nth-of-type(37), .dark .e-split li:nth-of-type(40), .dark .e-split li:nth-of-type(41), .dark .e-split li:nth-of-type(44), .dark .e-split li:nth-of-type(45), .dark .e-split li:nth-of-type(48), .dark .e-split li:nth-of-type(49), .dark .e-split li:nth-of-type(52), .dark .e-split li:nth-of-type(53), .dark .e-split li:nth-of-type(56), .dark .e-split li:nth-of-type(57), .dark .e-split li:nth-of-type(60), .dark .e-split li:nth-of-type(61), .dark .e-split li:nth-of-type(64), .dark .e-split li:nth-of-type(65), .dark .e-split li:nth-of-type(68), .dark .e-split li:nth-of-type(69), .dark .e-split li:nth-of-type(72), .dark .e-split li:nth-of-type(73), .dark .e-split li:nth-of-type(76), .dark .e-split li:nth-of-type(77), .dark .e-split li:nth-of-type(80), .dark .e-split li:nth-of-type(81), .dark .e-split li:nth-of-type(84), .dark .e-split li:nth-of-type(85), .dark .e-split li:nth-of-type(88), .dark .e-split li:nth-of-type(89), .dark .e-split li:nth-of-type(92), .dark .e-split li:nth-of-type(93), .dark .e-split li:nth-of-type(96), .dark .e-split li:nth-of-type(97), .dark .e-split li:nth-of-type(100) { background-color: #1e2731 !important }


/* JAVASCRIPT *********/

  /* E-TOGGLE */

    /* BASE */
    .e-toggle { border-top: 1px solid #CCCCCC; cursor: pointer }
    h2.e-toggle { padding-bottom: 30px }
    h3.e-toggle { padding-bottom: 25px }
    p.e-toggle { padding-top: 20px; padding-bottom: 22px }
    .e-toggle + div, .e-toggle + p, .e-toggle + a, .e-toggle + span, .e-toggle + ul, .e-toggle + ol, .e-toggle + .e-btn { display: none }

    /* CONDITIONAL */
    p + .e-toggle, p + h2.e-toggle, p + h3.e-toggle { margin-top: 30px }
    p.e-toggle + div { margin-top: 0 }
    p.e-toggle + ol.e-tiny { margin-top: 0 }
    .dark + h2.e-toggle { padding-top: 30px }
    .dark + h3.e-toggle { padding-top: 20px }