:root {
    --banner-ht: 70vh;
    --hero-ht: 100vh;
    --link-hash-color: #4088ea;
}

html:not([lang="en"]) .en,
html:not([lang="ja"]) .ja {
    display: none !important;
}

.banner {
    display: flex;
    align-items: center;  /* top-to-bottom */
    justify-content: center; /* left-to-right */
}

.banner-image {
    width: 100vw;
    object-fit: cover;

    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    filter: brightness(0.8) saturate(1.75);
}

.banner-partial {
    height: var(--banner-ht);
}

.banner-full {
    height: var(--hero-ht);
}

[data-hero-bg="hero-crane"] {background-image: url('../img/heros/webp/bg-barge.webp');}
[data-hero-bg="hero-seattle"] {background-image: url('../img/heros/webp/bg-seattle.webp');}
[data-hero-bg="hero-tokyo"] {background-image: url('../img/heros/webp/bg-tokyo.webp');}


.parallax {
    height: 350px;
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -2;
}

.parallax-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.25;
    z-index: -1;
}

.parallax-text {
    width: 100%;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    color: white;
}


[data-parallax="yab-hero-1"] {background-image: url('../img/frame/yab_hero-1.jpeg');}
[data-parallax="yab-hero-2"] {background-image: url('../img/frame/yab_hero-2.jpeg');}
[data-parallax="yab-hero-3"] {background-image: url('../img/frame/yab_hero-3.jpeg');}
[data-parallax="kab-banner"] {background-image: url('../img/dso/kab_banner-render.jpg');}
[data-parallax="kab-banner"] {background-image: url('../img/dso/kab_banner-render.jpg');}
[data-parallax="sig-banner"] {background-image: url('../img/heros/jpg/bg-signal.jpg');}
[data-parallax="halo-banner"] {background-image: url('../img/heros/jpg/halo_midday-banner.jpg');}
[data-parallax="prairie-banner"] {
    background-image: url('../img/heros/jpg/mima_banner.jpg');
    filter: brightness(1.2);
}
[data-parallax="leud-banner"] {background-image: url('../img/heros/jpg/bg-leud.jpg')}
[data-parallax="cam-banner"] {background-image: url('../img/heros/jpg/bg-cam-2.jpg');}
[data-parallax="francis-banner"] {background-image: url('../img/heros/jpg/francis-banner.jpg');}
[data-parallax="dd-banner"] {background-image: url('../img/heros/jpg/bd-drydock.jpg');}
[data-parallax="indust-banner"] {background-image: url('../img/heros/jpg/bg-hangar-paint-front.jpg');}
[data-parallax="gs-stairs"] {background-image: url('../img/heros/jpg/bg-gs-stairs.jpg');}
[data-parallax="gs-dusk"] {background-image: url('../img/heros/jpg/bg-gs-dusk.jpg');}
[data-parallax="banner-pion"] {background-image: url('../img/heros/jpg/banner-pion.jpg');}

.video-wrapper{
    position: relative;
    padding-bottom: 56.25%;
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

section {
    margin-bottom: 48px !important;
}

.two-column {
    column-count: 2;
    column-gap: 3em;
}

.three-column {
    column-count: 3;
    column-gap: 3em;
}


.card-text {
    text-overflow: ellipsis;
}

.card-body {
    max-height: 300px;
    overflow-x: hidden;
}

.wi {font-size: 20px;}


[id^="section"] {
    scroll-margin-top: 72px;
}

.navbar {
    transition: background-color 500ms;
}

.navbar-brand img {
    width: 32px;
    height: 32px;
}

.pooh {display: none;}



/* Gallery 4 */
#bridge-banner {filter: brightness(0.65);}
/* End */




.prefectures path {
    fill: #ccc;
    stroke: white;
    stroke-width: 1px;
}

#tokyo,
#kanagawa,
#yamaguchi, 
#okinawa {
    fill: tomato;
}

.wa-map path {
    fill: #ccc;
    stroke: white;
    stroke-width: 2px;
}

#Thurston, 
#Mason path,
#Jefferson path,
#Clallam path,
#Kitsap path,
#Pierce path,
#King path,
#Lewis,
#Grays_Harbor path {
    fill: dodgerblue;
}

#calcpad {
    -webkit-user-select: none;
    user-select: none;
}

.badge {
    font-size: 12px !important;
}

.headshot {
    max-width: 200px;
}

[data-bs-theme="dark"] .dot {
    color: tomato;
}
[data-bs-theme="light"] .dot {
    color: dodgerblue;
}

footer p:not(:last-of-type) {
   margin-top: 48px;
   margin-bottom: 0;
}

.slide-hide {
    display: none !important;
}

/* Keyword List Style */
.keyword-container p {
    display: inline;
    padding-right: 0.625em;
}
.keyword-list { 
    display: inline;
    padding: 0;
}
.keyword-list li {
    display: inline;
    color: #4088ea;
    cursor: pointer;
    padding-right: 0.75em;
}
.keyword-list li:hover,
.keyword-list li:hover::before {
    color: tomato;
}
.keyword-list li::before {
    content: '#';
    font-weight: 300;
    padding-right: 0;
    margin-right: 0;
}
.keyword-list span {
    padding: 0;
    margin: 0;
}
.keyword-list a {
    color: #4088ea;
    text-decoration: none;
}
.keyword-list a:hover {
    color: tomato;
}
@media screen and (max-width: 700px) {
    /* .keyword-container p {
        display: block;
        margin-bottom: 0.375em;
    }
    .keyword-list, .keyword-list li { 
        display: inherit;
    }      */
}

/* END Keyword List Styles */

.cert-logo {height: 50px;}

.overflow-x-auto {overflow-x: auto;}

/* Fanned Page Images */
.fan {padding: 1em;}
.fan div:nth-of-type(1){transform: rotate(-12deg);}
.fan div:nth-of-type(2){transform: rotate(5deg);}
.fan div:nth-of-type(3){transform: rotate(-3deg);}
.fan div:nth-of-type(4){transform: rotate(10deg);}
.fan div:nth-of-type(5){transform: rotate(-4deg);}
.fan div:nth-of-type(6){transform: rotate(8deg);}
.fan div:nth-of-type(7){transform: rotate(-7deg);}
.fan div:nth-of-type(8){transform: rotate(13deg);}
.fan-border img {border:  1px solid #ccc;}
/* End Fanned Page Image */


/* Modal Window Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: none; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  }
  
.modal-content {
    margin: auto;
    display: block;
    
    max-width: 700px;
    max-height: 90%;
}
/* End Modal Window Styles */

/* Absolute Position Captions */
:root {--absolute-spacer: 1em;}
.capt-container {
    position: relative;
}
.capt-container img {
    object-fit: cover;
    width: 101%;
}
.capt {
    position: absolute;
    z-index: 10;

    line-height: 1;
    padding: 0.5em;
    background-color: rgba(0,0,0,0.7);
    color: #ddd;
    border-radius: 4px;
}
.capt * {margin: 0;}
.top-left {
    top: var(--absolute-spacer);
    left: calc(1.5*var(--absolute-spacer));
}
.top-right {
    top: var(--absolute-spacer);
    right: calc(1.5*var(--absolute-spacer));
}
.bottom-left {
    bottom: var(--absolute-spacer);
    left: calc(1.5*var(--absolute-spacer));
}
.bottom-right {
    bottom: var(--absolute-spacer);
    right: calc(1.5*var(--absolute-spacer));
}
/* End Absolute Posiition Captions */



/* ----- Modal Image Window ----- */

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100vh; /* Full height */
    overflow: hidden; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  }
  
  /* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    
    max-width: 600px;
    max-height: 90%;
}

  /* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 90%;
    text-align: center;
    color: #eee;
    padding: 10px 0;
}
  
  /* Add Animation - Zoom in the Modal */
.modal-content, #caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}
  
@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}
  
  /* The Close Button */
.close-btn {
    position: absolute;
    top: 100px;
    right: 72px;
    color: #eee;
    font-size: 24px;
    font-weight: bold;
    transition: 0.3s;
    /* padding: 0.5em;
    line-height: 1; */
}
  
.close-btn:hover,
.close-btn:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
  
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        top: 6em;
        width: 100%;
    }
    .close-btn {
        position: absolute;
        top: 5em;
        right: 1em;
        color: #eee;
        font-size: 18px;
    }
    .two-column, .three-column {
        column-count: 1;
    }

}

@media only screen and (min-width:700px){
    .spaced-li li:not(:last-of-type) {
        margin-bottom: 1em;
    }
}


@media only screen and (max-width: 900px){

    .three-column {
        column-count: 2;
    }

}

.flyer-img:hover {
    filter: brightness(0.5);
}



/* On this page navbar */

.on-this-page-nav p {
    margin-bottom: 0.25em;
    font-weight: bold;
}

/* End On this page navbar */
:root {
    --color-calc-bg:#f2f2f2;
    --color-calc-bg-yellow: rgb(255, 252, 230);
    --color-calc-grid: #aaa;
    --color-calc-grid-green: rgb(0, 150, 5);
    --color-calc-grid-green-tr: rgba(0,150,5,0.04);
}

.calculation-grid {
    background:
        linear-gradient(-90deg, rgba(0,0,0,.05) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), 
        linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
        linear-gradient(transparent 3px, var(--color-calc-bg) 3px,  var(--color-calc-bg) 78px, transparent 78px),
        linear-gradient(-90deg,  var( --color-calc-grid) 1px, transparent 1px),
        linear-gradient(-90deg, transparent 3px,  var(--color-calc-bg) 3px,  var(--color-calc-bg) 78px, transparent 78px),
        linear-gradient(var( --color-calc-grid) 1px, transparent 1px),
        var(--color-calc-bg);
    background-size:
        4px 4px,
        4px 4px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px;
}

.calculation-grid-green {
    background:
        linear-gradient(-90deg, rgba(0,0,0,.05) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), 
        linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
        linear-gradient(transparent 3px, var(--color-calc-bg-yellow) 3px,  var(--color-calc-bg-yellow) 78px, transparent 78px),
        linear-gradient(-90deg,  var( --color-calc-grid-green) 1px, transparent 1px),
        linear-gradient(-90deg, transparent 3px,  var(--color-calc-bg-yellow) 3px,  var(--color-calc-bg-yellow) 78px, transparent 78px),
        linear-gradient(var( --color-calc-grid-green) 1px, transparent 1px),
        var(--color-calc-bg-yellow);
    background-size:
        8px 8px,
        8px 8px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px;
}


/* Project Code Box */
.project-code {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    /* align-items: stretch; */
    /* width: 100%; */
    user-select: none;
}
.code {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    appearance: none;
    border-radius: var(--bs-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
.project-code > .code {
    position: relative;
    flex-basis: content;
    /* flex: 1 1 auto; */
    width: 1%;
    min-width: 0;

    margin-left: calc(var(--bs-border-width) * -1);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.project-code-text {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    text-align: center;
    white-space: nowrap;
    background-color: var(--bs-tertiary-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);

    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
/* End Project Code Box */