.body {font-family: 'Rubik', sans-serif;background:#f8f8f8;padding:0px;max-width:100%;margin:0 0 0 0;color:black;height:100vh;} h2 {font-weight:600;text-align:center;} .container {max-width:85vw;margin:auto;min-height: 600px;} .logo {max-width: 85px;} .mainHeader {text-align: center;font-size:1.5em;color:white;font-family: 'Rubik', sans-serif;width:100vw;height:90px;background: #89c174;margin: 0px;padding-top:5px;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11);} .adminHeader {text-align: center;font-size:1.5em;color:white;font-family: 'Rubik', sans-serif;width:100vw;height:90px;background:darkgray;margin: 0px;padding-top:5px;} .gridButton { width:30px; display: inline-block; margin-top:25px; position: absolute; top:7px; right:165px; border:0px; } .loginButton { width:80px; height:10px; box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); color:black; font-weight:300; background-color:white; font-size:.6em; text-align: center; text-decoration: none; border-radius:3px; padding:8px 12px 14px 12px; display: inline-block; margin-top:25px; position: absolute; top:5px; right:45px; } .loginButton:hover { background:#e6e6e6; } .standardButton { width:auto; height:10px; box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); color:black; font-weight:300; background-color:white; font-size:.9em; text-align: center; text-decoration: none; border-radius:3px; padding:8px 15px 14px 15px; display: inline-block; margin: auto; margin-top:25px; } .mobileNavButton { display: none; } .icon { color:white; } /* Style the navigation menu */ .mainNav { overflow: hidden; background-color: #222; position: relative; border-radius: 0px 0px 10px 10px; } /* Hide the links inside the navigation menu (except for logo/home) */ .mainNav #myLinks { display: none; } /* Style navigation menu links */ .mainNav a { color: white; padding: 18px 16px; text-decoration: none; text-align: center; font-size: 17px; display: block; } /* Add a grey background color on mouse-over */ .mainNav a:hover { background-color: #ddd; color: black; } /* Style the active link (or home/logo) */ .active { background-color: #04AA6D; color: white; } .standardButton:hover {background:#e6e6e6;} .contentBody {height:auto;display:block;} .closeButton {float:right;margin-right:0px;margin-top:0px !important;font-weight: 600;font-size:1em;color: #454545;padding:2px 5px 2px 5px;border:1px solid #454545; border-radius: 3px;text-decoration: none;position: relative;} .closeButton:hover {background:#454545;color:white;} .row {display:block;margin-bottom:25px;clear:right;position:relative;} .loginHero {max-width:100%;margin:auto;border-radius:5px;background: #131313;background-image:url('/assets/images/loginHero.jpg');background-size: cover;background-position: center;height:auto;display: block;margin-bottom:25px;color:white;padding:25px;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11);} .mainHero {max-width:100%;margin:auto;border-radius:5px;background: #1391b9;background-image:url('/assets/images/caffiend.jpg');background-size: cover;background-position: center;height:325px;display: block;margin-bottom:25px;color:white;padding:25px;padding-top:75px;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11);} .secondHero {max-width:46%;width:45%;margin:auto;border-radius:5px;background:#e28c2b;background-image:url('/assets/images/numbernow.jpg');background-size: cover;background-position: right;height:250px;display: inline-block;margin-bottom:25px;padding:2%;color:white;float:left;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11);} .thirdHero {max-width:46%;width:45%;margin:auto;border-radius:5px;background:#e54242;background-image:url('/assets/images/redescape.jpg');background-size: cover;background-position: right;height:250px;display: inline-block;margin-bottom:25px;color:white;padding:2%;float:right;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11);} .bottomHero {clear:left;max-width:100%;margin:auto;border-radius:5px;background: #89c174;height:200px;display: block;margin-bottom:25px;color:white;margin-top:25px;padding:25px;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11);} .topHero {clear:left;max-width:100%;margin:auto;border-radius:5px;background: #50bbee;height:55px;display: block;margin-bottom:25px;color:white;margin-top:25px;padding:25px;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11);} .loginModal {width:40vw;color:white;height:250px;display: none;border:1px solid #1f1f1f; border-radius: 5px;background: #151515;position: absolute;top:50px;padding:25px;left:28vw;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11);z-index: 999; } .loginButtonSmall { width:100px; height:35px; box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); border:0px; color:#ccc; font-weight:300; background-color:#353535; font-size:.9em; text-align: center; text-decoration: none; border-radius:3px; padding:8px 15px 14px 15px; display: inline-block; position: absolute; bottom:25px; right:25px; } .loginButtonSmall:hover {background: #7e7e7e;} .loginModal a {color:#4b4b4b;font-size: .9em;display:block;margin-top:25px;} .loginInput {width:100%;padding:10px;font-size:.9em;border-radius: 3px;border:0px;margin-top:5px;background: #464646;} .footer {max-width:100vw;height:50px;background: color(srgb 0 0 0 / 0.9);color:white;text-align: center;padding:3px;margin:0 0 0 0;clear:left;display:block;position:relative;bottom:0;} .footer p {font-size:.9em;} .mainHeroHead {font-size: 2em;font-weight: 600;} .mainHeroSubhead {line-height:1.25em;font-size: 1.25em;} .searchResult {clear:left;max-width:100%;margin:auto;min-height:80px;display: block;margin-bottom:10px;color:white;margin-top:10px;padding:15px;} .searchResult:hover {background: #efefef;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11);border-radius:5px;} .searchResultTitle {color:#89c174;text-decoration: underline;font-size: 1.25em;} .searchResultDesc {color: #454545;line-height: 2.25em; } .searchResultData { color:#ccc;text-decoration: underline; } .searchBar {display:block;position: absolute;top:30px;left:45px;} .searchField {padding:8px 10px 8px 10px;font-size:.6em;height:30px;border: 0px;border-radius: 3px;width:150px;} .searchButton { width:50px; height:30px; box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); color:black; font-weight:300; background-color:white; font-size:.6em; text-align: center; text-decoration: none; border-radius:3px; padding:7px 10px 15px 10px; display: inline-block; margin-left:10px; border:0px; } .searchButton:hover { background:#e6e6e6; } /* APP PAGE */ .appPageIcon {border-radius: 5px;max-width:75px;margin-top:25px;text-align: center;} .appPageTitle {font-size:2.5em;margin-top:15px;font-weight: 600;display:block;position: relative;vertical-align: middle;} .appPageSubhead {font-style: italic;font-size:1.25em;} .screensViewer {height:125px;background:gray;border-radius: 5px;padding:15px;margin-bottom:25px; display: grid; grid-gap: 16px; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); grid-auto-flow: row; grid-auto-columns: minmax(200px,1fr); overflow-x: scroll; overflow-y:hidden; margin-right:0px; overflow-wrap: break-word; } .screenShotSmall {width:200px !important;height:auto;margin-right:15px;display:grid;border-radius: 5px;} .callToAction {background:black;color:white;width:auto;height:125px;display: block;border-radius: 5px;margin-top:25px;margin-bottom:25px;padding:20px;} .pageTitleContainer {width:100%;text-align: center;} .marketingContainer { display: block; } .pageMainBody { padding-top:0px; } .pageSideBar { margin-top:40px; margin-bottom:35px; border-radius:5px;padding:25px;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); display: grid; grid-template-columns:1fr 1fr 1fr 1fr; grid-gap: 10px; text-align: center; } .sidebarBox {display:inline-block;width:;padding:auto;} .portfolioBoxContainer { padding:25px 0px 75px 0px; display: grid; grid-gap: 35px 35px; grid-template-columns: 1fr 1fr 1fr; } .portfolioBox {border-radius: 5px;padding:20px;text-align: center;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11);} .portfolioBox .portfolioHeader {background:#95bf7c;color:white;padding:10px;text-align: center;display:block;margin-left:-20px;margin-right:-20px;} .portfolioBox .portfolioSubHead {background: #e2e2e2;color:color(srgb 0.398 0.398 0.398);font-size:.8em;padding:10px;text-align: center;display:block;margin-left:-20px;margin-right:-20px;margin-bottom:-20px;border-radius: 0px 0px 5px 5px;} .portfolioBox .portfolioImage {width: calc(100% + 40px); margin-left: calc(-20px); margin-right: calc(-20px); margin-top: -20px; border-radius: 5px 5px 0px 0px;position: relative;} .portfolioBox .portfolioImage:hover {opacity: 0.9;} .moreInfo {margin-left:25px;margin-top:10px;font-size:.9em;margin-bottom:8px;} /******************************************************************************* MOBILE STYLES ********************************************************************************/ @media only screen and (max-width: 991px) { .portfolioBoxContainer { grid-gap: 25px 25px; grid-template-columns: 1fr 1fr; } .mobileNavButton { position: absolute; left:35px; top:35px; display: block; } } @media only screen and (max-width: 600px) { .portfolioBoxContainer { padding:25px 0px 75px 0px; display: grid; grid-gap: 35px 35px; grid-template-columns: 1fr; } .moreInfo {margin-left:0px;margin-top:10px;font-size:.9em;margin-bottom:8px;} .container {max-width:90vw;margin:auto;min-height: 600px;} .standardButton { width:90%; } .loginButton { width:80px; height:10px; top:5px; right:25px; } .loginModal {width:78vw;color:white;height:250px;display: none;border:1px solid #1f1f1f; border-radius: 5px;background: #151515;position: absolute;top:70px;padding:25px;left:5vw;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); } .gridButton {position: absolute;left:30px;top:10px;} .searchBar {display:none;position: absolute;top:30px;left:45px;} .mainHeader {text-align: center;font-size:1.5em;color:white;font-family: 'Rubik', sans-serif;width:100vw;height:90px;background: #89c174;margin: 0px;padding-top:5px;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11);} .mainHero {max-width:98%;margin:auto;border-radius:5px;background: #1391b9;background-image:url('/assets/images/caffiend.jpg');background-size: cover;background-position: center;height:auto;display: block;margin-bottom:25px;color:white;padding:25px;padding-top:45px;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11);} .secondHero {max-width:98%;width:98%;margin:auto;border-radius:5px;background:#e28c2b;background-image:url('/assets/images/numbernow.jpg');background-size: cover;background-position: right;height:auto;display:block;margin-bottom:25px;padding:25px;color:white;float:none;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11);} .thirdHero {max-width:98%;width:98%;margin:auto;border-radius:5px;background:#e54242;background-image:url('/assets/images/redescape.jpg');background-size: cover;background-position: right;height:auto;display: block;margin-bottom:25px;color:white;padding:25px;float:none;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11);} .bottomHero {max-width:98%;margin:auto;border-radius:5px;background: #89c174;height:auto;display: block;margin-bottom:25px;color:white;margin-top:25px;padding:25px;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11);} .row {display:block;margin-bottom:25px;clear:none;position: inherit;width:90%;} } @media (prefers-color-scheme: dark) { body a {color: #a5a5a5;text-decoration: underline;} .body {background: color(srgb 0.213 0.213 0.213);color: color(srgb 0.782 0.782 0.782);} .portfolioBox .portfolioSubHead {background: #4f4f4f;color:darkgray;} } }