@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

:root {
  --text-color-md-gray: #A7A4A5;
  --text-color-lt-gray: #efefef;
  --text-color-dk-gray: #555555;
  --text-color-md-lt-gray: #d7d7d7;
  --text-color-red:#F70701;
  --text-color-dk-red:#C40601;
  --text-color-orange:#E2850F;
  --text-link-color:#859AB1;
}

body {
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    /* font-weight: <weight>;
    font-style: normal;     */
}

a {
  text-decoration: none;
  color: #859AB1;
}

a:hover{
  color: #58687B;
}


nav a,
footer a {
    text-decoration: none;
    text-transform: uppercase;
}

.nav-non-active {
  opacity: 0.4;
}

.bgVideo {
    position: fixed;
    right: 0;
    bottom: 50px;
    min-width: 100%;
    min-height: 100%;
    min-height: calc(100vh - 50px);
    min-height: calc(100dvh - 50px);      
    z-index: -1;
  }  

  @media (max-aspect-ratio: 2) and (width > 767px) {
    .bgVideo {
        height: 100%;
        height: calc(100vh - 50px);
        height: calc(100dvh - 50px);       
    }
  }
  @media (min-aspect-ratio: 2) {
    .bgVideo {
        width: 100%;
    }
  }

  @media (width < 768px) {
    .bgVideo {
      width: 100%;
    }
  }  

  @media (max-width: 768px) {
    #bgVideoDesktop {
      display: none !important;
    }
    #bgVideoMobile {
      display: block !important;
    }
}

  @media (min-width: 768px) {
    #bgVideoDesktop {
      display: block !important;
    }
    #bgVideoMobile {
      display: none !important;
    }
  }



  .myImage {
    position: fixed;
    right: 0;
    bottom: 50px;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
  }    


.thought-bubble {
  position: absolute;
  right:330px;
  bottom:660px;
  max-width: 300px;
}

@media (max-width: 768px) {
  .thought-bubble {
    right: 25vw;
    bottom: 92vw;
    max-width: 35%;
  }
}

@media (max-width: 394px) {
  .thought-bubble {
    right: 90px;
    bottom: 420px;
    max-width: 150px;
  }
}

@media (min-aspect-ratio: 1.9) and (width > 1200px) {
  .thought-bubble {
    right: 20vw;
    bottom: 35vw;
    }
}


.thought-bubble img {
  width: 100%;
}

.bg-image,
.bg-image-overlay {
    /* background-image: url('/images/home_test_2_wide.png'); */
    width: 100%; 
    height: 100%;
    height: calc(100vh - 50px);
    height: calc(100dvh - 50px);

    background-repeat: no-repeat; 
    background-size: cover;
    background-position: right bottom;
  }



  .footer {
      width: 100%;
      height: 50px;
      line-height: 50px;
      color:white;
      background-color:black;
  }
  .footer ul {
    height: 50px;
  }
  .footer ul li {
    height: 50px;
  }

  .footer-links li {
    background-color:black;

  }
  .footer a {
    color:white;
  }

  .footer-search input {
    font-size: 0.8rem;
  }

  .search .pagination .page-item .page-link {
    font-size: 0.8rem;
    color: var(--text-color-md-gray)
  }
  .search .pagination .page-item.active .page-link {
    font-size: 0.8rem;
    background: var(--text-color-md-gray);
    color:white;
  }


  /* Work Page */

  .thumbnail-caption {
    text-transform: uppercase;
    color: var(--text-color-dk-gray);
    text-align: center;
  }


  /* callout cards */

  .card-header {
    color: white;
  }

  .callout {
    margin-right: 0rem!important;
    margin-left: 0rem!important;
  }
  @media (min-width: 992px) {
    .callout {
      margin-left: 1rem!important;
      margin-right: 3rem!important;
    }
  }
    
  @media (min-width: 1200px) {
    .callout {
      margin-left: 3rem!important;
      margin-right: 4rem!important;
    }
  }
  @media (min-width: 1400px) {
    .callout {
      margin-left: 3rem!important;
      margin-right: 6rem!important;
    }
  }

  .callout-thin {
    margin-right: 1rem!important;
    margin-left: 0rem!important;
  }
  @media (min-width: 992px) {
    .callout-thin {
      margin-left: 1rem!important;
      margin-right: 0rem!important;
    }
  }
    
  @media (min-width: 1200px) {
    .callout-thin {
      margin-left: 2rem!important;
      margin-right: 1rem!important;
    }
  }
  @media (min-width: 1400px) {
    .callout-thin {
      margin-left: 2rem!important;
      margin-right: 1rem!important;
    }
  }

  .callout-full-w {
    margin-right: 0rem!important;
    margin-left: 0rem!important;
    width: 100%;
  }
  

  /* writing style callout card */
.callout-block {
  max-width:20%;
  background-color: white;

}
@media (max-width: 991.98px) {
    .callout-block {
      max-width:100%;
      background-color: var(--text-color-lt-gray);
    }
  }  

  .callout-work {
    margin-right: 0rem!important;
    margin-left: 0rem!important;    
    font-size: 0.9rem;
  }
  @media (min-width: 992px) {
    .callout-work {
      margin-left: 1rem!important;
      margin-right: 1rem!important;
    }
  }
    
  @media (min-width: 1200px) {
    .callout-work {
      margin-left: 2rem!important;
      margin-right: 2rem!important;
    }
  }
  @media (min-width: 1400px) {
    .callout-work {
      margin-left: 3rem!important;
      margin-right: 3rem!important;
    }
  }

  /* Utility Classes */
.btn-todlippy {
  border-radius: 0;
  background-color: var(--text-color-red);
  color: white;
  padding: 0 6px 0 6px;
}
.btn-todlippy:hover {
  background-color: var(--text-color-dk-red);
  color: white;
}


  .bg-color-dk-gray {
    background-color: var(--text-color-dk-gray);
  }
  .bg-color-md-lt-gray {
    background-color: var(--text-color-md-lt-gray);
  }
  .bg-color-md-gray {
    background-color: var(--text-color-md-gray);
  }
  .bg-color-lt-gray {
    background-color: var(--text-color-lt-gray);
  }

  .color-dk-gray {
    color: var(--text-color-dk-gray);
  }
  .color-md-gray {
    color: var(--text-color-md-gray);
  }
  .color-lt-gray {
    color: var(--text-color-lt-gray);
  }
  .color-md-lt-gray {
    color: var(--text-color-md-lt-gray);
  }
  .color-black {
    color: #000000;
  }

  .color-black-hover:hover {
    color:var(--text-color-md-gray);
  }

  
  .color-orange {
    color: var(--text-color-orange);
  }
  .color-black {
    color: black;
  }

  .text-caption {
    color: var(--text-color-md-gray);
    font-size: 0.9rem;
  }
  
  .shadow {
    box-shadow:0 1rem 3rem rgba(0,0,0,.5) !important;
  }

  .fs-7 {
    font-size: 0.875rem;
  }

  .fs-8 {
    font-size: 0.75rem;
  }


  .fotorama__nav-wrap {
    margin-top:24px;
    margin-bottom:16px;
  }


  /* gallery styles */
.fotorama__caption__wrap {
  color: var(--text-color-md-gray);
  font-size: 0.85rem;
}
.fotorama__caption__wrap a {
  color: var(--text-link-color);
  text-decoration: none;
  border: 0;
}
.fotorama__caption__wrap a:hover {
  color: var(--text-color-dk-gray);
  text-decoration: none;
}

.fotorama_thumbs .fotorama__stage {
    margin-bottom: 60px;
    overflow: visible;
}
.fotorama_thumbs .fotorama__stage__frame {
    overflow: visible;
}   
.fotorama_thumbs .fotorama__caption {
    bottom: -40px;        
}

.mce-nbsp-wrap {
  letter-spacing: 3.5px;
}

.image-inline {
  display: inline-block;
  padding: 1rem;
}

.image-responsive {
  max-width: 100%;
  width: 100%;
  height: auto;
}

.lightbox-caption > em:first-child {
  font-style: normal;
}

.embed-container iframe {
  max-width: 100% !important;
}

.web-page-main-image {
  width: 100%;
}

@media (min-width: 768px) {
  .web-page-main-image {
    width: 25%;
  }
}

/* blog styles */
.blog-sidebard {
  background-color: white;
  max-width: 207px;
}

.blog-sideboard h2 {
  font-size: 1.875rem;
}

.sidebar-title-spacing {
  letter-spacing: 0.15rem;
}