/* Theme Name: LBM LiftOff Website: 2.0 Theme URI: https://lbmliftoff.com Author: Jenn Wood - Designer, Craig Parker (Pahkah if you're from Maine) - Coder Author URI: https://fossfolks.com Description: LBM LiftOff's new site theme (05-2024) Text Domain: bsimple Version: 1.0.0 License: GNU General Public License v2 or later */ /* Testing on my PC for mobile -- Chromium as narrow as it goes, and zoom to 125% */ /* 1. Use a more-intuitive box-sizing model.*/ *, *::before, *::after { box-sizing: border-box;} /* 2. Remove default margin*/ * { margin: 0;} /* Typographic tweaks! 3. Add accessible line-height 4. Improve text rendering */ body { line-height: 1; -webkit-font-smoothing: antialiased;} /* 5. Improve media defaults*/ img, picture, video, canvas, svg { display: block; max-width: 100%;} /* 6. Remove built-in form typography styles*/ input, button, textarea, select { font: inherit;} /* 7. Avoid text overflows*/ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word;} /* 8. Create a root stacking context*/ #root, #__next { isolation: isolate;} html {height:100%;font-size:16px;} @font-face {font-family: PlexSans;src: url(/fonts/IBMPlexSans-Regular.ttf);} @font-face {font-family: PlexSansBold;src: url(/fonts/IBMPlexSans-Bold.ttf);} @font-face {font-family: PlexSansEM;src: url(/fonts/IBMPlexSans-Italic.ttf);} @font-face {font-family: PlexSansEMBold; src: url(/fonts/IBMPlexMono-BoldItalic.ttf);} @font-face {font-family: PlexMono;src: url(/fonts/IBMPlexMono-Regular.ttf);} @font-face {font-family: PlexSansLight; src: url(/fonts/IBMPlexSans-ExtraLight.ttf);} body {font-family: "PlexSans"; color: #000; line-height:1.25em;padding:.25em;width:100%;} em {font-family: PlexSansEM;font-style:normal;} strong {font-family: PlexSansBold;font-style:normal;} strong em {font-family:PlexSansEMBold;font-style:normal;} p{margin:1.25em;} hr { position:relative; float:left; width:100%;margin-top:2em;border: 0; height: 1px; float:left;background-color: #999;} /*hr { position:relative; float:left; width:100%;margin-top:2em;border: 0; height: 1px; background: #fff; background-image: linear-gradient(to right, #fff, #777, #fff);}*/ /*hr { position:relative; float:left; width:100%;}*/ a,a:visited {text-decoration:none;color:#228A22;} h1 {font-size:2.5em;margin-left:.2em;margin-top:1em;line-height:1em;} h2 {margin-left:.5em;margin-top:1em;font-family: PlexSansBold;} h3 {margin-left:.75em;} h4 {margin-left:1em;} h5 {margin-left:1.35em;} h6 {margin-left:1.75em;} /*---------------------------------------- HEADER --------------------------------------*/ #header{position:relative;width:100%; float:left;} @media (max-width: 800px) { #header-left{width:100%;} #header-right{width:100%} } @media (min-width: 800px) { #header-left{width:30%;} #header-right{width:70%} } #header-left{position:relative;float:left;} #header-left a p {color:#3d414e; margin-top:-1em;} #header-left img {float:left;} #header-left ul {text-align:left;margin-top:1.5em;margin-left:-2em;} #header-right{position:relative; float:left;} #header img {width:90%; margin-top:.5em;margin-left:5%;} /*---------------------------------------- NAV -----------------------------------------*/ #contentsbox { position:relative; float:left; width:100%;margin-top:1.5em;margin-bottom:1.5em;background-color:#0000ff;height:auto;} #contentsbox p {font-weight:100;font-size:2.5em;} #contentsbox img {width:80%;} #nav { position:relative;height:auto;float:right;width:auto;margin-top:2em;font-size:1.25em;width:100%;font-weight:bolder;} #nav ul {position:relative;float:left;width:100%;margin-left:-2%;} #nav li { list-style: none; position:relative;float:left;} #nav li.current_page_item a{text-decoration:underline;text-decoration-thickness: 50%;text-underline-offset: .5em;color:#228A22;} #nav a { color:#555; } #nav a:hover { color:#bbb;} @media (max-width: 800px) {#nav li{width:20%;font-size:.75em;text-align:center;}} @media (min-width: 800px) {#nav li{width:18%;margin-left:2%;text-align:right;}} /*---------------------------------------- CONTENT -----------------------------------------*/ #pageContent {position:relative;width:100%; float:left;} #pageContent img{margin-left:.5em;margin-top:1.5em;} #pageContent h2{margin-left:.5em;} #homeSplash h1{margin-top:1em;color:#fff;text-shadow: 3px 3px 2px #000;font-family: PlexSansBold;} #homeSplash p {font-size:2em;width:50%;margin-left:25%;font-family: PlexSansBold;} /* Header sort of areas - she's got the page title on the right some times, and left others Have to call the actual images on the pages */ #splashLeft {position:relative;width:100%; float:left;margin-bottom:2em;margin-left:-.5%;} #splashLeft img{width:100%;z-index:-10;} #splashLeft h2 {position:absolute;right:15%; top:50%;z-index:10;font-family: PlexSansBold;color:#fff;font-size:2em;} #splashRight {position:relative;width:100%; float:left;margin-bottom:2em;margin-left:-.5%;} #splashRight img{width:100%;z-index:-10;} #splashRight h2 {position:absolute;left:15%; top:40%;z-index:10;font-family: PlexSansBold;color:#fff;font-size:2em;} #splashBlog {position:relative;width:100%; float:left;margin-bottom:2em;margin-left:-.5%;} #splashBlog img{width:100%;z-index:-10;} #splashBlog h2 {position:absolute;left:5%; top:40%;z-index:10;font-family: PlexSansBold;color:#fff;font-size:2em;line-height:1em;} #splashBlog ul {position:absolute;left:15%;top:20%;} #splashBlog li {list-style: none;} #splashBlog a{color:#fff;} .cont100 {width:90%; margin-left:5%; margin-right:5%;margin-bottom: 2em;margin-top:0em; display:block; position:relative; float:left; overflow:hidden;} .cont100 img{float:left;width:90%; padding-left:20%;} .cont50 {float:left; width:48%;margin-left:1%;} .cont50 p {width:100%;position:relative; float:left;text-align:center;color:#228A22;} .cont50 p.blog {text-align:left;color:#000;} /*.cont50 iframe{width:100%;}*/ .logo50 {float:left; width:48%;margin-left:1%;} .logo50 p {width:100%;position:relative; float:left;text-align:center;color:#228A22;} .logo50 img{padding-left:0;} .contact50 {float:left; width:48%;margin-left:1%;} .contact50 p {width:100%;position:relative; float:left;text-align:left;} .contact50 img{padding-left:0;} iframe {width: 100%;height: 100%;} /*---------------------------------- HOME PAGE SPECIFIC ------------------------------------*/ #homeCarousel{position:relative; width:100%; height:20em;margin-top:3em;} .carousel {position: relative;width:100%; /*height:20em;*/margin-top:4em;} @media (max-width: 800px) {.carousel{height:20em;}.carousel-item img {height:20em;object-fit: cover}} @media (min-width: 800px) {.carousel-item img {width:100%;margin-left:-2%;}} .carousel-inner {position: relative; width: 100%;} .carousel-open:checked + .carousel-item { position: static; opacity: 100;} .carousel-item { position: absolute; margin-left:-2%; opacity: 0;} .carousel-item img {position:relative;top:0;/*height:20em;*/} .carousel-control { background: rgba(0, 0, 0, 0.28); border-radius: 50%; color: #fff; cursor: pointer; display: none;font-size: 40px; height: 40px; line-height: 35px; position: absolute; top: 50%; -webkit-transform: translate(0, -50%); cursor: pointer; -ms-transform: translate(0, -50%); transform: translate(0, -50%); text-align: center; width: 40px; z-index: 10; } .carousel-control.prev { left: 2%;} .carousel-control.next { right: 2%;} .carousel-control:hover { background: rgba(0, 0, 0, 0.8); color: #aaaaaa; } #carousel-1:checked ~ .control-1, #carousel-2:checked ~ .control-2, #carousel-3:checked ~ .control-3, #carousel-4:checked ~ .control-4 { display: block; } .carousel-indicators { list-style: none; margin: 0; padding: 0; position: absolute; bottom: 2%; left: 0; right: 0; text-align: center; z-index: 10;} .carousel-indicators li { display: inline-block; margin: 0 5px; } .carousel-bullet { color: #fff; cursor: pointer; display: block; font-size: 35px;} .carousel-bullet:hover { color: #aaaaaa; } #carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet, #carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet, #carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet, #carousel-4:checked ~ .control-4 ~ .carousel-indicators li:nth-child(4) .carousel-bullet { color: #228A22;} #learnMoreBox{left:10%; top:0; position: absolute;} #learnMoreBox p {font-family: PlexSansBold;margin-left:0;} #learnMoreButton a, #learnMore a:visited { display:inline;border-radius: 10px; font-weight: bold; color: #fff; font-size: 1.5em; background: #228A22; padding-top:.25em; padding-bottom:.25em; padding-left:1em; padding-right: 1em; text-decoration: none; text-transform: uppercase; box-shadow: 10px 10px 8px -2px #333; text-shadow: 2px 3px 8px #555; white-space: nowrap; } #learnMoreButton a:hover{color:#fff;} #homeCarouselInner {position:relative; width:100%;height:20em;margin-top:-2em;} #homeCarousel p {position:absolute;z-index:10;font-family: PlexSansBold;} #homeCarousel img { position:absolute;top:0;height:100%;width:100%;z-index:-10;margin-left:0; } #learnMore {left:3em; position: absolute;z-index:10;} #learnMore a, #learnMore a:visited { display:inline;border-radius: 10px; font-weight: bold; color: #fff; font-size: 1.5em; background: #228A22; padding-top:.25em; padding-bottom:.25em; padding-left:1em; padding-right: 1em; text-decoration: none; text-transform: uppercase; box-shadow: 10px 10px 8px -2px #333; text-shadow: 2px 3px 8px #555; white-space: nowrap; } #learnMore a:hover{color:#fff;} #homeThirds{ position:relative; float:left;color:#fff;margin-top:4em;margin-bottom:2em;} #homeThirds h2{margin-bottom:5em;text-transform: uppercase;} #homeThirds p {position: relative; bottom: 0;width:80%; margin-left:10%;} #homeThird1{position:relative; box-sizing: border-box; text-align: center;background-repeat: no-repeat;background-size: cover; float:left; margin-left:0;background-image:url("/images/website/home/HomepageMiddle1alt.png");height:100%;} #homeThird2{position:relative; box-sizing: border-box; text-align: center;background-repeat: no-repeat;background-size: cover; float:left; margin-left:3.5%;background-image:url("/images/website/home/HomepageMiddle2alt.png");height:100%;} #homeThird3{position:relative; box-sizing: border-box; text-align: center;background-repeat: no-repeat;background-size: cover; float:right; margin-right:0;background-image:url("/images/website/home/HomepageMiddle3alt.png");height:100%;} @media (max-width: 800px) { #homeThirds{width:100;height:32em;} #homeThirds h2 {font-size: 1em;} #homeThird1{width:33%;} #homeThird2{width:33%;margin-left:.3%;} #homeThird3{width:33%;} } @media (min-width: 800px) { #homeThirds{width:90%;margin-left:5%;margin-right:5%;height:22em;} #homeThird1{width:31%;} #homeThird2{width:31%;margin-left:3.5%;} #homeThird3{width:31%;} } #homeUnderSplash{position:relative;width:100%; margin-top:2em;float:left;color:#fff;background-image: url("/images/website/home/HomepageBottomPic2.png");background-size: cover;} #homeUnderSplash h2{width:90%;margin-left:5%;} #homeUnderSplash p {width:90%;margin-left:5%;} #halfGrey{ position: relative; float:left; width:35%; margin-left:5%; height:90%; margin-top:5%;margin-bottom:5%;background-color: rgba(0, 0, 0, 0.5);} /*-----------------------------------------ABOUT----------------------------------------*/ /*#aboutLeft{width:200px;position:relative; float:left; margin:3em;background:#fff;height: 100%;}*/ #aboutLeft{width:200px;position: absolute; top: 0; bottom: 0;} #aboutLeft img {width:200px;position:relative; float:left;} #aboutRight{position: relative; float:left; margin-left:250px;} #headShots{width:80%; position:relative; float:left;margin-left:10%;background-image:url("/images/website/about/headShotBackgroundLighter.png");background-size:100%;} .hs100 {width:100%; margin-bottom: 2em;margin-top:2em; display:block; position:relative; float:left; overflow:hidden;background:#ddd;} .hs100 p {width:100%;position:relative; float:left;text-align:center;color:#228A22;} .hs50 {position:relative; width:50%;float:left;} .hs50 img{width: 50%;position:relative;float:left;left: 25%;} /*-----------------------------------------FEATURES----------------------------------------*/ #featureGrid{position:relative; float:left;width:90%;margin-left:5%; } #featureGrid h2{color:#228A22;} #featureCard{position:relative; float:left; margin-left:1%;border:1px solid #228A22; border-radius:10px;margin-top:2em;} #featureCardLeft{position:relative; float:left; width:30%;} #featureCardRight{position:relative; float:left;width:70%;} @media (max-width: 800px) {#featureCard {width:99%;height:auto;}} @media (min-width: 800px) {#featureCard {width:48%;height:16em;}} @media screen and (min-width: 540px) and (max-width: 780px) { .view { width: 600px; } } /*-----------------------------------------CUSTOMERS----------------------------------------*/ #logosDiv{ position: relative; float: left; width:80%; margin-left:10%;margin-right:10%; height:16em; overflow-y: scroll;} #logo_wrap {width:33%; margin-top: 1em; vertical-align: top; height:16em; vertical-align: top; position: relative; float: left;/*border:1px solid #ddd;*/} #logo_wrap p {position:absolute; bottom:2em;width:80%; left:10%;text-align:center;} #logo_wrap img {position:relative; float:left;width:80%;margin-left:10%;} #logo_wrap h2 {font-size:1.25em;font-weight:500;} #logo_wrap2 {width:25%; margin-top: 1em; min-height:12em; vertical-align: top; position: relative; float: left;} #logo_wrap2 p {font-size:.9em;position:relative; float:left;text-align:center;width:75%; margin-left:12.5%;margin-top:0em;} #logo_wrap2 img {position:relative; float:left;width:75%;} #logo_wrap2 h2 {font-size:1.25em;font-weight:500;} /* ------------------------- Customer Carousel -----------------------------------------*/ #customerCarousel{position:relative; float:left;width:80%; margin-left:10%;margin-right:9%;margin-top:1em;} .customerCarousel {position: relative;width:100%; height:20em;margin-top:4em;} .customerCarousel-inner {position: relative; width: 100%;} .customerCarousel-open:checked + .customerCarousel-item { position: static; opacity: 100;} .customerCarousel-item { position: absolute; margin-left:-2%; opacity: 0;} .customerCarousel-item img {position:relative;top:0;height:20em;width:100%;margin-left:-2%;} .customerCarousel-control { background: rgba(0, 0, 0, 0.28); border-radius: 50%; color: #fff; cursor: pointer; display: none;font-size: 40px; height: 40px; line-height: 35px; position: absolute; top: 3em; -webkit-transform: translate(0, -50%); cursor: pointer; -ms-transform: translate(0, -50%); transform: translate(0, -50%); text-align: center; width: 40px; z-index: 10; } .customerCarousel-control.prev { left: 2%;} .customerCarousel-control.next { right: 2%;} .customerCarousel-control:hover { background: rgba(0, 0, 0, 0.8); color: #aaaaaa; } #customerCarousel-1:checked ~ .customerCarouselControl-1, #customerCarousel-2:checked ~ .customerCarouselControl-2, #customerCarousel-3:checked ~ .customerCarouselControl-3, #customerCarousel-4:checked ~ .customerCarouselControl-4 { display: block; } .customerCarousel-indicators { list-style: none; margin: 0; padding: 0; position: absolute; top: 20em; left: 0; right: 0; text-align: center; z-index: 10;} .customerCarousel-indicators li { display: inline-block; margin: 0 5px; } .customerCarousel-bullet { color: #ddd; cursor: pointer; display: block; font-size: 35px;} .customerCarousel-bullet:hover { color: #aaaaaa; } #customerCarousel-1:checked ~ .customerCarouselControl-1 ~ .customerCarousel-indicators li:nth-child(1) .customerCarousel-bullet, #customerCarousel-2:checked ~ .customerCarouselControl-2 ~ .customerCarousel-indicators li:nth-child(2) .customerCarousel-bullet, #customerCarousel-3:checked ~ .customerCarouselControl-3 ~ .customerCarousel-indicators li:nth-child(3) .customerCarousel-bullet, #customerCarousel-4:checked ~ .customerCarouselControl-4 ~ .customerCarousel-indicators li:nth-child(4) .customerCarousel-bullet { color: #228A22;} #customerTestimonialContainer{width:70%; margin-left:15%; margin-right:15%;position:relative; float:left;} #customerTestimonialLeft {position:relative; float:left;width:40%; margin-left:5%;background-color:#228A22; color:#fff; margin-top: 0; } #customerTestimonialLeft p {width:80%; margin-left:10%;text-align:center;padding-top:3em;padding-bottom:3em;} #customerTestimonialRight {position: relative; float:left; width: 40%; margin-left:15%; margin-top:3em; text-align:center;color:#228A22; } .box { --b: 5px; /* thickness of the border */ --c: red; /* color of the border */ --w: 20px; /* width of border */ border: var(--b) solid #0000; /* space for the border */ --_g: #0000 90deg,var(--c) 0; --_p: var(--w) var(--w) border-box no-repeat; background: conic-gradient(from 90deg at top var(--b) left var(--b),var(--_g)) 0 0 / var(--_p), conic-gradient(from 180deg at top var(--b) right var(--b),var(--_g)) 100% 0 / var(--_p), conic-gradient(from 0deg at bottom var(--b) left var(--b),var(--_g)) 0 100% / var(--_p), conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--_g)) 100% 100% / var(--_p); } #thankYouSplash{width:100%;position:relative;float:left;margin-top:3em;margin-bottom:3em;} /*-----------------------------------------Blog----------------------------------------*/ #postExcerptsDiv{ position: relative; float: left; width:98%; margin-left:1%;margin-right:1%;/*border:1px solid #ff0000; /*height:16em; overflow-y: scroll;*/} #postExcerptsDiv a {color:#000;} #postExcerpts_wrap {width:30%; margin-top: 1em; margin-left:3%;vertical-align: top; height:20em; vertical-align: top; position: relative; float: left;/} #postExcerpts_wrap p {width:100%;margin-left:0%;text-align:left;font-family: PlexSansLight;} #postExcerpts_wrap img {position:relative; float:left;width:100%;margin-left:0;margin-bottom:1em;box-shadow: 5px 5px 10px 2px #555;} #postExcerpts_wrap h2 {font-size:1.25em;font-family:PlexSans;margin-left:0%;} h1.blogPostTitle {font-family: PlexSansBold;} #singlePostExcerpt {position: relative; float: left; width:98%; margin-left:1%;margin-right:1%;margin-bottom:2em; } #singlePostExcerpt p {width:60%;float:right;text-align:left;font-family: PlexSansLight; } #singlePostExcerpt img {position:relative; float:left;width:30%;margin-left:0;margin-bottom:1em;box-shadow: 5px 5px 10px 2px #555;} #getStarted {/*display: inline;*/ width:100%; margin-top: 1em; min-height:12em; vertical-align: top; position: relative; float: left; text-align:center; } #getStarted p {font-size:.9em;} #getStarted img {max-width:75%;} #getStarted h2 {font-size:1.25em;font-weight:500;margin-top:3em;margin-bottom:3em;} #getStarted h2 {text-align:center;} #getStarted a,a:visited { display:inline; border-radius: 10px; font-weight: bold; color: #000; font-size: 3em; background: #228A22; padding:.5em; text-decoration: none; text-transform: uppercase; line-height:1.5em; box-shadow: 10px 10px 8px -2px #333; text-shadow: 2px 3px 8px #555; white-space: nowrap; } #getStarted a:hover{color:#fff;} /*---------------------------------------- CALCULATORS -----------------------------------------*/ #calcLeft {position:relative; float:left; width:30%; margin-left:1%;margin-top:1em;height:30em; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;} /*---------------------------------------- FOOTER -----------------------------------------*/ #footer { position:relative;width:100%;float:left;margin-top:3em;background-color:#000;color:#fff;vertical-align:bottom; margin-bottom:3em;} @media (max-width: 800px) { #footer { height:30em; margin-bottom:3em;} #footer ul { position:relative; width:48%;margin-top:3em;} #footer li { position:relative; list-style: none; left:0; text-align:left;margin:0;width:100%;display: block} /*#footer li.contact { position:absolute; top:3em;right:1em;text-align:center;margin:0;width:100%;}*/ #footer li a {position:relative;color:#fff; margin:0;font-weight:bolder;} #footer li a:hover{color:#228A22;} #footer li img{width:100%;margin-top:-30%;padding:0;} #footer ul li p {text-align:left; margin-left:0;white-space: nowrap;} #social{position:absolute;width:48%;right:0;top:3em;float:right;} #social p {margin:0;text-align:center;} #social ul { position:relative; width:100%;margin-top:3em;} #social li { position:relative; list-style: none; float:left;text-align:center;margin:0;width:33%;} #social li img { position:relative; float:left; width:75%;margin-left:20%;} #footerLogo{float:right; width:50%;margin-right:0%;margin-top:1em;} } @media (min-width: 800px) { #footer { height:15em; margin-bottom:3em;} #footer ul { position:relative; width:80%;margin-top:3em;} #footer li { position:relative; list-style: none; float:left; text-align:center;margin:0;width:20%;} #footer li a {position:relative;float:left;color:#fff; margin:0;font-weight:bolder;} #footer li a:hover{color:#228A22;} #footer li img{width:100%;margin-top:-30%;padding:0;} #footer ul li p {text-align:left; margin-left:0;white-space: nowrap;} #social{position:relative;width:20%;float:right;} #social p {margin:0;text-align:center;} #social ul { position:relative; width:75%;margin-top:3em;margin-left:.5em;} #social li { position:relative; list-style: none; float:left; text-align:center;margin:0;width:33%;} #social li img { position:relative; float:left; width:75%;margin-left:20%;} /*#footerLogo{float:left; width:30%;margin-left:0%;margin-top:-6.5em;}*/ #footerLogo{position:absolute;left:0; width:30%;top:4em;} }