/* Eighty Options theme styles.
Ported from the original Drupal theme's compiled SCSS, now paired with
Bootstrap 5.3.8. Drupal-only selectors were renamed to semantic classes;
asset paths point at this site's own /fonts and /images.
Bootstrap 4 utility classes that the theme relied on (.justify-content-between,
.d-flex, .navbar-*) are unchanged in Bootstrap 5, so those rules are untouched. */
@font-face{font-family:TitiBold;src:url(../fonts/titillium-semibold.woff2) format("woff2"),url(../fonts/titillium-semibold.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:TitiThin;src:url(../fonts/titillium-thin.woff2) format("woff2"),url(../fonts/titillium-thin.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:MerriReg;src:url(../fonts/merriweather-regular.woff2) format("woff2"),url(../fonts/merriweather-regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:MerriLight;src:url(../fonts/merriweather-light.woff2) format("woff2"),url(../fonts/merriweather-light.woff) format("woff");font-weight:400;font-style:normal}.page__header{margin-bottom:0!important}.site-branding .navbar-brand img{width:100%;max-width:200px}.navbar-toggler{border:none;font-size:14px;font-family:TitiBold,Helvetica,Arial,sans-serif;font-weight:500;border-radius:inherit;display:inline-block;padding:8px 1em;outline:none!important;color:#000!important}.navbar-toggler:after{content:"MENU";font-size:16px}.navbar-toggler .navbar-toggler-icon{margin-bottom:4px;background-image:url(../images/hamburger-icon.svg);-webkit-filter:brightness(.1);filter:brightness(.1);font-weight:700;transform:rotate(90deg)}.navbar-toggler[aria-expanded=true]:after{color:#fff}.navbar-toggler[aria-expanded=true] .navbar-toggler-icon{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}@media (max-width:992px){.navbar-toggler{margin-right:1rem}}.justify-content-between{position:fixed;width:100%;background:#fff;top:unset}.justify-content-between .navbar-toggler[aria-expanded=true]{background:#252525}.justify-content-between .navbar-collapse{justify-content:flex-end;margin-top:-1.1em}.main-navigation .navbar-nav{font-family:TitiBold,Helvetica,Arial,sans-serif}.main-navigation .navbar-nav li a.nav-link{text-transform:uppercase;color:#707685;padding-left:0;padding-bottom:0;margin:.5em 1em 0 0}.main-navigation .navbar-nav li a.nav-link:hover{color:rgba(0,0,0,.9)}.main-navigation .navbar-nav li:nth-last-child(-n+2) a{margin-right:0}.main-navigation .navbar-nav li:nth-last-child(-n+2) a svg{-webkit-filter:invert(.4) sepia(0) saturate(20) hue-rotate(1turn) brightness(.5);filter:invert(.4) sepia(0) saturate(20) hue-rotate(1turn) brightness(.5);font-size:14px;text-align:center;border:2px solid #4b526d;border-radius:50%;padding:5px;width:27px;height:27px}.main-navigation .navbar-nav li:nth-last-child(-n+2) a svg.fa-phone{transform:rotate(90deg)}@media (max-width:992px){.main-navigation .navbar-nav{background:#333}.main-navigation .navbar-nav li.active a.nav-link{color:#d0d0d0}.main-navigation .navbar-nav li a.nav-link{color:#fff;border-bottom:.3px solid;padding:1em;margin:0}.main-navigation .navbar-nav li a.nav-link:hover{color:#fff}.main-navigation .navbar-nav li:nth-last-child(-n+2){display:none}.main-navigation .navbar-nav li:nth-last-child(-n+2) a svg{-webkit-filter:none;filter:none}}.justify-content-between{padding:0}.justify-content-between .site-branding{padding:.5em 0 0 1em}@media (min-width:992px){.justify-content-between{padding:2em 0}}body{font:100%/1.5 MerriLight,Georgia,serif;color:#707685}h1,h2{font-family:TitiThin,Helvetica,Arial,sans-serif;font-weight:400}.page:not(.landing-page) main{padding-top:8.5em!important}.page main{padding-bottom:0!important}h3,h4,h5,h6{font-family:TitiBold,Helvetica,Arial,sans-serif;font-weight:400}.about__body{font-family:MerriLight,Georgia,serif;line-height:1.8}.landing-page h2{font-size:1.875em;line-height:1.2;margin-top:0}@media (min-width:768px){.landing-page h2{font-size:3em}}.carousel-control-next-icon,.carousel-control-prev-icon{display:none}.carousel-control-next,.carousel-control-prev{width:40px;height:100px;top:12rem}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-in{opacity:0;-webkit-animation:fadeIn ease-in 1;animation:fadeIn ease-in 1;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:.5s;animation-duration:.5s}.fade-in.one{-webkit-animation-delay:0s;animation-delay:0s}.fade-in.two{-webkit-animation-delay:.2s;animation-delay:.2s}.fade-in.three{-webkit-animation-delay:.4s;animation-delay:.4s}.page__footer{background:url(../images/background.jpg) no-repeat;background-size:cover;font-family:TitiThin,Helvetica,Arial,sans-serif;color:#fff;position:relative;text-align:left}.page__footer .d-flex{display:block!important}.page__footer #contact-eighty-options h2{line-height:1.2}.page__footer #contact-eighty-options .vcard{padding:1em 0 3em;max-width:85%;font-family:MerriLight,Georgia,serif}.page__footer #contact-eighty-options .vcard svg.fa-map-marker-alt{float:left;font-size:1.75em;margin-top:.25em;margin-left:.25em}.page__footer #contact-eighty-options .vcard .address{float:left;padding-left:1em;padding-bottom:1em;font-size:.875em}.page__footer #contact-eighty-options .vcard .rounded-block{max-width:350px;clear:both;background:#fff;padding:1em;line-height:1;color:#41475e;border-radius:20px;font-size:.875em}.page__footer #contact-eighty-options .vcard .rounded-block svg{margin-right:.75em;font-size:1em}.page__footer #contact-eighty-options .vcard p{margin-top:0}.page__footer #contact-eighty-options .static-map{padding-bottom:2em;overflow:auto}@media (min-width:768px){.page__footer #contact-eighty-options h2{font-size:3em}.page__footer #contact-eighty-options .vcard{padding-right:5%;padding-left:5%}.page__footer #contact-eighty-options .vcard .address{font-size:1em}.page__footer #contact-eighty-options .vcard svg.fa-map-marker-alt{font-size:2.5em;margin-left:.5em}.page__footer #contact-eighty-options .vcard .rounded-block{padding-left:2em;padding-right:2em}}@media (min-width:1024px){.page__footer #contact-eighty-options h2{margin:0}.page__footer #contact-eighty-options .vcard{width:50%;padding:3em 0 5em}.page__footer #contact-eighty-options .static-map{position:absolute;width:40%;height:70%;right:5em;top:5em;overflow:hidden;text-align:right}}.portfolio-item__body,.portfolio-item__image{width:100%}.portfolio-item__image img{box-shadow:-1em 1em 2em rgba(0,0,0,.2);border:1px solid #ddd}@media (min-width:768px){.portfolio-item__image{float:right;width:40%}.portfolio-item__body{width:60%;padding-right:3em}}.fa-lightbulb{color:#41caac}.fa-comments{color:#b889e2}.fa-code{color:#f1852c}html{scroll-padding-top:210px!important}html{scroll-behavior:smooth}@media screen and (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}#intro{background:url(../images/background.jpg) no-repeat;background-size:cover;text-align:center;padding:0 5%;font-family:TitiThin,Helvetica,Arial,sans-serif;color:#fff;position:relative}#intro h2{padding:3em 0 1em;margin:0}#intro .item ul{list-style:none;padding:0;margin:0}#intro .item ul li{display:inline-block;vertical-align:middle;font-size:1.5em;padding:0 2%}#intro .item ul li div{color:#fff}#intro .item ul li div svg{display:block;font-size:2em;margin:auto}@media (min-width:768px){#intro .item ul li{font-size:2.75em;padding:0 4%}#intro .item ul li div svg{margin-bottom:.5em}}.carousel:hover .carousel-control-prev{left:10px}.carousel:hover .carousel-control-next{right:10px}.carousel:hover .carousel-control-next svg,.carousel:hover .carousel-control-prev svg{font-size:60px;color:#000}.carousel .carousel-indicators{bottom:-3em}.carousel .carousel-indicators button{display:inline-block;width:15px;height:15px;margin:1px;text-indent:-999px;border:1px solid #fff;border-radius:10px;cursor:pointer;background-color:#000;background-color:transparent;background:#d8d8d8}.carousel .carousel-indicators button.active{background:#9b9b9b}.carousel .carousel-inner .carousel-item{transform:unset;background:#fff}.carousel .carousel-inner .service-wrapper{width:90%;max-width:900px;margin:0 auto;padding:2em 0;text-align:center;min-height:500px}.carousel .carousel-inner .service-wrapper .service-icon{width:100%;text-align:center;margin-right:.5em;float:left}.carousel .carousel-inner .service-wrapper .service-icon svg{font-size:5em}.carousel .carousel-inner .service-wrapper .service-info{width:100%}.carousel .carousel-inner .service-wrapper .service-info h2{margin-bottom:3rem}.carousel .carousel-inner .service-wrapper .service-info .body{line-height:1.8}@media (min-width:768px){.carousel .carousel-inner .service-wrapper{padding:0;text-align:left;min-height:600px}.carousel .carousel-inner .service-wrapper .service-icon{width:40%}.carousel .carousel-inner .service-wrapper .service-icon svg{font-size:18em}.carousel .carousel-inner .service-wrapper .service-info{width:54%;float:right}}#about-eighty-options{background:url(../images/background.jpg) no-repeat;background-size:cover;text-align:center;padding:0 5%;font-family:TitiThin,Helvetica,Arial,sans-serif;color:#fff;position:relative}#about-eighty-options h2{font-size:3em;line-height:1.2;margin-top:0}#about-eighty-options .about__body,#about-eighty-options h2{display:inline-block;vertical-align:top}@media (min-width:768px){#about-eighty-options h2{width:40%;max-width:360px;margin-right:3%}#about-eighty-options .about__body{width:54%;text-align:left;max-width:490px}}.portfolio-grid h2{vertical-align:top;line-height:1.2;margin-top:0;text-align:center}.portfolio-grid .project-list ul{vertical-align:top;padding:0;font-size:0;text-align:center;margin:0 5%}.portfolio-grid .project-list ul li{display:inline-block;width:50%;padding:1rem;position:static;overflow:visible;margin:0;vertical-align:top}.portfolio-grid .project-list ul li div{position:static}.portfolio-grid .project-list ul li div a{display:block;text-decoration:none}.portfolio-grid .project-list ul li div .portfolio-item{position:relative;text-align:center;padding:0;font-size:1rem;color:#333;overflow:hidden;background:#fff;border:1px solid #ccc;border-radius:.5em .5em 1.5em 1.5em}.portfolio-grid .project-list ul li div .portfolio-item:hover{color:#fff}.portfolio-grid .project-list ul li div .portfolio-item:hover img{transform:scale(1.04)}.portfolio-grid .project-list ul li div .portfolio-item:hover .block-content{background:#333;transform:scale(1.04)}.portfolio-grid .project-list ul li div .portfolio-item img{display:block;width:100%;height:auto;aspect-ratio:220/181;object-fit:contain;margin:0;border:0;border-radius:0;transition:all .1s ease-in-out;transform-origin:50% 100%}.portfolio-grid .project-list ul li div .portfolio-item h3{font-size:.9rem}.portfolio-grid .project-list ul li div .portfolio-item p{margin-top:0;margin-bottom:0;font-size:.5rem}.portfolio-grid .project-list ul li div .block-content{background:#f9f9f8;padding:.75em 1em;width:auto;min-height:4.66em;margin:0;border:0;border-radius:0;transition:all .1s ease-in-out}@media screen and (min-width:480px){.portfolio-grid .project-list ul li{width:33.333%}.portfolio-grid .project-list ul li div .portfolio-item h3{font-size:.7rem;margin-bottom:0;margin-top:0}.portfolio-grid .project-list ul li div .portfolio-item p{font-size:.7rem}}@media screen and (min-width:768px){.portfolio-grid .project-list ul li{width:25%}.portfolio-grid .project-list ul li div .portfolio-item h3{font-size:1rem!important;position:relative!important;width:auto!important;height:auto!important;overflow:visible!important;clip:unset!important}}@media screen and (min-width:1200px){.portfolio-grid .project-list ul li{width:16.666%}.portfolio-grid .project-list ul li div .portfolio-item h3{font-size:1.2rem}}.card-nav-next{margin-top:5%}.card-nav-next a{background-image:url(../images/next-card.png)}.card-nav-prev{margin-bottom:5%}.card-nav-prev a{background-image:url(../images/prev-card.png)}.card-nav a{margin:0 auto;display:block;width:100px;height:50px;background-size:cover}
/* --- Bootstrap 4 -> 5 compatibility ------------------------------------------
The original site ran Bootstrap 4 as compiled with this theme's SCSS variables,
so some Bootstrap 4 defaults were in force. Vanilla Bootstrap 5 changes exactly
these things visibly on this site; they are restored below. Each rule is
independent - delete one to adopt the Bootstrap 5 default instead.
a BS5 links are blue and underlined; BS4 (with this theme's
$link-color) was #d83d32 and not underlined.
.page-title BS5 shrinks h1 below 1200px via calc(1.375rem + 1.5vw); BS4 was
a flat 2.5rem.
.breadcrumb BS5 dropped BS4's padding and grey background.
.carousel BS5 adds margin-bottom:1rem to the indicators, which lifts the
dots off the bottom:-3em the theme positions them at.
.container Two grid changes. BS4 hard-coded 15px container padding where BS5
computes calc(--bs-gutter-x * .5) = 12px, and BS4 stopped at a
1140px cap where BS5 adds a 1400px breakpoint capping at 1320px.
On a 1920px screen that second one is 180px of extra bleed.
navbar BS4 carried one rule per breakpoint on .navbar-expand-lg>.container,
and they are easy to conflate because the selector is byte-identical:
@media (max-width:991.98px) padding-right:0;padding-left:0 (collapsed)
@media (min-width:992px) flex-wrap:nowrap (expanded)
BS5 has neither. On the desktop side the flex-wrap result still
arrives, by a different route: .navbar>.container{flex-wrap:inherit}
inherits nowrap from .navbar-expand-lg{flex-wrap:nowrap}, so that rule
is a no-op kept only for parity. The collapsed-side padding rule is a
real gap. Note the expanded container deliberately KEEPS the normal
container padding (15px, from the .container rule above) - that is
what the original did. Reading those two rules as one is an easy way
to get this backwards. */
a{color:#d83d32;text-decoration:none}
a:hover{color:#9f271e;text-decoration:underline}
.page-title{font-size:2.5rem}
.breadcrumb{padding:.75rem 1rem;margin-bottom:1rem;background-color:#e9ecef;border-radius:.25rem}
.carousel .carousel-indicators{margin-bottom:0}
.container{padding-right:15px;padding-left:15px}
@media (min-width:1400px){.container{max-width:1140px}}
@media (min-width:992px){.navbar-expand-lg>.container,.navbar-expand-lg>.container-fluid{flex-wrap:nowrap}}
@media (max-width:991.98px){.navbar-expand-lg>.container,.navbar-expand-lg>.container-fluid{padding-right:0;padding-left:0}}
/* --- Leaflet footer map -------------------------------------------------------
Sized to match the map it replaces. The original Google image was 640x420 (the
static-map API caps width at 640 on the standard plan), so the interactive map is
pinned to that same box instead of stretching to the width of the theme's
.static-map panel. Leaflet also needs a definite height, which this gives it at
every breakpoint.
display:inline-block reproduces how the original ![]()
behaved as an inline,
replaced element: the theme sets text-align:right on .static-map at 1024px and up,
which right-aligns an inline-level child - so on panels wider than 640px the map
sits at the right edge, as it did before. A block-level box would ignore
text-align and sit at the left. Baseline alignment matches an ![]()
as well, since
Leaflet's panes are absolutely positioned and leave no in-flow line box. */
.static-map .leaflet-map{display:inline-block;width:640px;height:420px;background:#e9ecef}