body { padding-top: 56px; 
        font-family: 'Times New Roman', Times, serif;}
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #57392C !important; }
.bg-hero { background-color: #f5cb5c; }

/* CALLOUT */
.header {
    width: 100vw;
}
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }
.col-3{
    width: 33.33%;
}
.hexagon {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    margin: 75px, 75px,75px, 75px;
}

table, th, td {
    border: 2px solid black;
    border-collapse: collapse;
    margin: 5px, 5px, 5px, 5px;
    text-align: center;
}

a {
    text-decoration: none;
    color:inherit;
}

.tool {
    cursor: help;
    position: relative;
  }
  
  
  /*== common styles for both parts of tool tip ==*/
  .tool::before,
  .tool::after {
    left: 50%;
    opacity: 0;
    position: absolute;
    z-index: -100;
  }
  
  .tool:hover::before,
  .tool:focus::before,
  .tool:hover::after,
  .tool:focus::after {
    opacity: 1;
    transform: scale(1) translateY(0);
    z-index: 100;
  }
  
  
  /*== pointer tip ==*/
  .tool::before {
    border-style: solid;
    border-width: 1em 0.75em 0 0.75em;
    border-color: #57392C transparent transparent transparent;
    bottom: 100%;
    content: "";
    margin-left: -0.5em;
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26), opacity .65s .5s;
    transform:  scale(.6) translateY(-90%);
  }
  
  .tool:hover::before,
  .tool:focus::before {
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
  }
  
  
  /*== speech bubble ==*/
  .tool::after {
    background: #57392C;
    border-radius: .25em;
    bottom: 180%;
    color: #EDEFF0;
    content: attr(data-tip);
    margin-left: -8.75em;
    padding: 1em;
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
    transform:  scale(.6) translateY(50%);
    width: 17.5em;
  }
  
  .tool:hover::after,
  .tool:focus::after  {
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26);
  }
  .collapsible {
    background-color: rgba(18,130,162,0.25);
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
  }
  .active, .collapsible:hover {
    background-color: rgba(3,64,120,0.25);
  }
  .content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
  }

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }