:root {
    --red: #FF4136;
    --orange: #FF851B;
    --yellow: #FFDC00;
    --green: #2ECC40;
    --blue: #0074D9;
    --navy: #001F3F;
    --aqua: #7FDBFF;
    --teal: #39CCCC;
    --olive: #3D9970;
    --lime: #01FF70;
    --fuchsia: #F012BE;
    --maroon: #85144B;
    --purple: #B10DC9;
    --silver: #DDDDDD;
    --gray: #AAAAAA;
    --white: #FFFFFF;
    --black: #111111;
    --bsblue: #1C548A;
    --bsblue-02: #16436E;
    --bsgray: #6D6E71;
    --blackpearl: #1E262A;
    --blackpearl-03: #13181B;
    --wildsand: #E9E6E0;
    --font-family: 'Lato', sans-serif;
    --font-family-header: 'Montserrat', sans-serif;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-bold: 700;
    --font-weight-black: 900;
}





/*------------------------------------*\
  # - Background Colors
\*------------------------------------*/

           .bg-navy { background-color: #001F3F; }
           .bg-blue { background-color: #0074D9; }
           .bg-aqua { background-color: #7FDBFF; }
           .bg-teal { background-color: #39CCCC; }
          .bg-olive { background-color: #3D9970; }
          .bg-green { background-color: #2ECC40; }
           .bg-lime { background-color: #01FF70; }
         .bg-yellow { background-color: #FFDC00; }
         .bg-orange { background-color: #FF851B; }
            .bg-red { background-color: #FF4136; }
        .bg-fuchsia { background-color: #F012BE; }
         .bg-purple { background-color: #B10DC9; }
         .bg-maroon { background-color: #85144B; }
          .bg-white { background-color: #FFFFFF; }
           .bg-gray { background-color: #AAAAAA; }
         .bg-silver { background-color: #DDDDDD; }
          .bg-black { background-color: #111111; }
         .bg-bsblue { background-color: #1C548A; }
         .bg-bsgray { background-color: #6D6E71; }
     .bg-blackpearl { background-color: #1E262A; }
       .bg-wildsand { background-color: #E9E6E0; }
  .bg-blackpearl-03 { background-color: #13181B; }





/*------------------------------------*\
  # - Text Colors
\*------------------------------------*/

         .navy { color: #001F3F; }
         .blue { color: #0074D9; }
         .aqua { color: #7FDBFF; }
         .teal { color: #39CCCC; }
        .olive { color: #3D9970; }
        .green { color: #2ECC40; }
         .lime { color: #01FF70; }
       .yellow { color: #FFDC00; }
       .orange { color: #FF851B; }
          .red { color: #FF4136; }
      .fuchsia { color: #F012BE; }
       .purple { color: #B10DC9; }
       .maroon { color: #85144B; }
        .white { color: #FFFFFF; }
       .silver { color: #DDDDDD; }
         .gray { color: #AAAAAA; }
        .black { color: #111111; }
       .bsblue { color: #1C548A; }
       .bsgray { color: #6D6E71; }
   .blackpearl { color: #1E262A; }
.blackpearl-03 { color: #13181B; }
     .wildsand { color: #E9E6E0; }




::selection {
    background-color: rgba(28,84,138,.4);
}


html {
    scroll-behavior: smooth;
}

.bg-transparent {
    background-color: rgba(0,0,0,0);
}
.bg-black-transparent-3 {
    background-color: rgba(0,0,0,.3);
}

.bg-black-transparent-5 {
    background-color: rgba(0,0,0,.5);
}

.bg-black-transparent-6 {
    background-color: rgba(0,0,0,.6);
}

.bg-white-transparent-8 {
    background-color: rgba(255,255,255,.3);
}

.clip {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute
}


/*------------------------------------*\
  # - Typography
\*------------------------------------*/

body {
    font-family: var(--font-family);
    background-color: var(--wildsand);
    font-weight: var(--font-weight-regular);
    color: var(--black-pearl);
    position: relative;
}

    .font-weight-light  { font-weight: var(--font-weight-light); }
  .font-weight-regular  { font-weight: var(--font-weight-regular); }
     .font-weight-bold  { font-weight: var(--font-weight-bold); }
    .font-weight-black  { font-weight: var(--font-weight-black); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-family-header);
    text-transform: uppercase;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4   { font-weight: var(--font-weight-black); }
                  h5, h6, .h5, .h6   { font-weight: var(--font-weight-bold); }

#footer p {
    font-size: 1rem;
}

p, address, ul li {
    font-size: 1.2rem;
    line-height: 1.6rem;
}





/*------------------------------------*\
  # - Buttons and Links
\*------------------------------------*/

#back-to-top {
    display: inline-block;
    background-color: #007bff;
    color: var(--white);
    width: 3.5rem;
    height: 3.5rem;
    text-align: center;
    border-radius: 1rem;
    position: fixed;
    bottom: 1.875rem;
    left: 1.58rem;
    padding-top: .85rem;
    transition: background-color .3s, opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1022;
}

#back-to-top:hover {
    cursor: pointer;
    background-color: #0069d9;
}

#back-to-top.show {
    opacity: 1;
    visibility: visible;
}

#content a:hover {
    color: var(--white);
    text-decoration: none;
}





/*------------------------------------*\
  # - Content
\*------------------------------------*/

#content {
    background-image: url(../img/bg-01.jpeg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}





/*------------------------------------*\
  # - Footer
\*------------------------------------*/

#footer {
    background-color: var(--blackpearl);
    color: var(--white);
    padding-top: 3rem;
    padding-bottom: 1.5rem;
}

#footer a {
    color: var(--gray);
    font-size: .9rem;
}

#footer a:hover {
    color: var(--bsgray);
    text-decoration: none;
}

#footer ul {
    color: var(--gray);
    text-transform: uppercase;
}

#footer ul li {
    margin-bottom: .5rem;
}

#footer .social a {
    background-color: rgba(69,78,85,.4);
    color: var(--white);
    padding: .75rem 1rem;
}

#footer .social a:hover {
    background-color: rgba(69,78,85,.8);
    color: var(--white);
}

#footer p a {
    color: var(--bsblue);
    font-weight: var(--font-weight-black);
}

#footer p a:hover {
    color: var(--blue);
}