/* Theme Name: FissionVector Theme URI: https://fissionvector.com Author: FissionVector Author URI: Description: This theme is specially created for client and created in Twitter Bootstrap 5. Thank you. Version: 1.0.0 Tags: responsive-layout, featured-images, flexible-header, theme-options, sticky-post License: GNU General Public License version 3 License URI: http://www.opensource.org/licenses/gpl-license.php GPL v3.0 (or later) */ /********************************************************************************************************************/ /******************************************** MAIN HTML STYLES ******************************************************/ /********************************************************************************************************************/ @import url('https://fonts.googleapis.com/css?family=Lato:400,700,900'); @import url('css/fonts.css'); @import url(css/bootstrap.min.css); @import url(css/font-awesome.min.css); :root { --blue: #005CEC; --navy: #072D77; --navyfaded: #2C4471; } body { font-family: 'Lato',Helvetica,Arial,sans-serif; margin: 0; padding: 0; font-weight: 400; font-size: 18px; color: #787D86; font-variant-ligatures: common-ligatures; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a, a:hover, a:focus, a:active, .btn, .btn:hover { -webkit-transition: all 500ms; -moz-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; } a { color: var(--blue); text-decoration: underline; } .breathe { padding-top: 5em; padding-bottom: 5em; } .low-breathe { padding-top: 2.5em; padding-bottom: 2.5em; } .clearfix { clear: both; } .btn { border-radius: 50px; border: 0px; padding: 8px 20px; } .btn.btn-primary { background-color: var(--blue); color: #FFF; } .btn.btn-primary:hover { background-color: var(--navy); } .btn.btn-success { background-color: var(--navy); color: #FFF; } .btn.btn-success:hover { background-color: var(--blue); } .btn.btn-linear { border: 1px solid #FFF; font-size: 18px!important; padding: 8px 25px; color: #FFF; } .btn.btn-linear:hover { background-color: #FFF; color: var(--navy); } h2 { color: #333; font-weight: 600; margin-bottom: 25px; } h2.lg { font-size: 42px; } .offcan { position: fixed; left: auto; width: 100vw; top: 0; right: -2200px; bottom: 0; background-color: #FFF; z-index: 90; overflow: hidden; height: 100%; box-sizing: border-box; } .offcan .body { padding: 40px; height: 100vh; display: flex; justify-content: flex-start; align-items: center; } .offcan .side-menu { background-color: var(--navy); } .offcan .close-offcan { position: absolute; top: 40px; right: 40px; z-index: 91; color: #FFF; display: inline-block; filter: brightness(0) invert(1); } .offcan .close-offcan img { width: 25px; } .side-menu-links { list-style: none; margin: 0; padding: 0; } .offcan .side-menu a { color: #FFF; font-size: 28px; text-decoration: none; font-weight: 400; } .offcan .side-menu a.strong { font-weight: 600; color: #2790DA; } .offcan .side-menu ul.social a { color: #2790DA; } .offcan .side-menu ul.social a:hover, .offcan .side-menu a.strong:hover { color: #FFF; } .offcan .side-menu ul.side-menu-links a:hover { padding-left: 10px; color: #2790DA; } .offcan .logo { margin-bottom: 25px; } .offcan.show { display: block; } .spacer { height: 4em; clear: both; } .navbar { position: relative; z-index: 1; padding-top: 1.6rem; padding-bottom: 1rem; } .navbar .navbar-brand img { filter: brightness(0) invert(1); } .navbar .navbar-nav .nav-link { color: #FFF; padding: 0px 20px; } .navbar .navbar-nav a.phone { font-weight: 600; } .menu-bar { position: fixed; background-color: var(--navy); color: #FFF; top: -66px; left: 0px; width: 100%; text-align: right; height: 65px; -webkit-transition: all 500ms; -moz-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; z-index: 999; } .menu-bar .logo { float: left; height: 65px; display: flex; justify-content: center; align-items: center; padding: 0px 15px;} .menu-bar .logo img { filter: brightness(0) invert(1); } .menu-bar .menu-buttons { } .menu-bar .menu-btn { display: inline-flex; height: 65px; width: 65px; justify-content: center; align-items: center; } .menu-bar .menu-btn.call { background-size: 25px 25px; background-repeat: no-repeat; background-position: center; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUVGM0FCMkEwMDU1MTFFODk0RkNDOUU4ODcwMjI0MzIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUVGM0FCMjkwMDU1MTFFODk0RkNDOUU4ODcwMjI0MzIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFQ0E0MDM1MjhEMEMxMUU3OTdFRkRFMUYxOTQxNkQ5RCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFQ0E0MDM1MzhEMEMxMUU3OTdFRkRFMUYxOTQxNkQ5RCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrTBuRcAAARSSURBVHjaxJl3SFVhGMaPZdGyTZIZQrRs/VFEgxZtG0qDCoIMQwOzTCttU9GgKRTSokXDjNQcbf+QBu2EMk0iCsWyCTZvZdbz4nPhcrnnes/wnBd+3HO533d5zne+713Hr2f2QcWD9QbRYDzoDCpBDtgDKhQTrSQ8RtP4Bm7f/cEacBfEg1DQEHQFiaAA9FNsNFfB7UEu2AxagLNcYRE7hmLlOhME2yXYn5/NKFCEvQJLQJ7LuDfgPsgCY8FxMAU47FrhRIp9Aca5iXXaNzAPvOTYbXZtiVYgDvwFMRSkZm9BJPgJloLpdggeBAL5yAt8mHObB1Oh1+hgteA+vL6lYd4+kA9CQJLVgtvy+p2GedUgGfwGC6z0GiL4F6+baJz7mG6wNZhkpeByXnfVMf88P4dbKbiQ18NAI43znR4l0ErBxeAZV3ioxvnd+PnBSsF/XB7tPA1zm9MXi122OtKdZpidDbr4OHc9GMhEKdNqwRKS07lqCT7M68/V/QpiwQ87srVddHHiV3vVMU9y5cYgxeXQWi64CBwFTcFGHw9bvp35sMIM7COYASbWETTElnv4D0sFSxDZCvzATu5ptVyiDIRzK9kmWGw/eMSkaKXKvHKXNDOBK22bYAdFVDMTG6IyV1LRKFADdmj04aYKFrtJDyCeQMrqlirjznJ1ZQsdBhF2CVboKR6CvhSvZinc93JzaSDMLsHf6ZOr+OgXexkrFcheusR01nyWCxZ7wnrPWQ55y3vjuX0CQEYdblG3+al0ftxtC1hNHx3GraK2AAcYCR18Qmc8jJNIupBNmSrmI/kl4TEPzRIsh+okmMu+hYgu9TI2hSvuDC67eR3Ankcyr91NIudeCM81Kljh/syg2BJuj9dexq/iYRQ7wtAf7ZKnZINz9EBSsUwA7fjbJbAWwguNCBZrAy6AEeApuz9lXsZHMiq6rmYp22Gn5IuzGRiacyiI4+Vwd+SW2iQRF2Oq9QpW2IeQ1RnMQxlRx0oPAIvYsLnOPf3F+aN79xLCpQJfx6aOmHRNozHuvV7BClcgk6KLmSw91/NHau1WCJ/OpxPEVCEcY9/ozbSkZTWNzRfZk1e8hHBF543IgoxmZihPKQ030cxIaljJ7XCJHSCp62aZLLqUGWERz02s0Vz2M7fDMe7RdB4UfxNFVzB4SZI134zk28HQLeH5Hw9MjoZi1he7w/oxxMxqQXzuVLo58dU3uPpmmOTm8lag3Ozy5iIYxc9O7HekKrWvI4zYWqX2XUtmfdRjr7jSK1mFx9Kb6FpteIZl9Ejy2iK1vgpI2cvbmWZKYtODq53HJ+Cr2CjWlvJ/cTiAb/2V+jXp1o/kKZeEZzK5Ck6Aa+CTB6Ht2ahxdvpXQGyWkUinx0KYJ0QxJ1Eo9h6j5E9WLcG8ySC6siSI3W0klzBq8mZ1DpjJ3pyfl6ezAWLzjWRrZppsx+4ULTchvem/LBIkd3gAsTXuk/4LMAChbxhO2JVvDwAAAABJRU5ErkJggg==); } .menu-bar .menu-btn.menu { background-size: 25px 25px; background-repeat: no-repeat; background-position: center; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgd2lkdGg9IjQwMHB4IiBoZWlnaHQ9IjQwMHB4IiB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDAwIDQwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTE3LjE0Myw4OC41NzFoMzY1LjcxNGM5LjQyOSwwLDE3LjE0My03LjcxNCwxNy4xNDMtMTcuMTQzcy03LjcxNC0xNy4xNDMtMTcuMTQzLTE3LjE0M0gxNy4xNDMKCQkJQzcuNzE0LDU0LjI4NSwwLDYyLDAsNzEuNDI4UzcuNzE0LDg4LjU3MSwxNy4xNDMsODguNTcxeiIvPgoJCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNy4xNDMsMjE3LjE0M2gzNjUuNzE0YzkuNDI5LDAsMTcuMTQzLTcuNzE1LDE3LjE0My0xNy4xNDNjMC05LjQyOS03LjcxNC0xNy4xNDMtMTcuMTQzLTE3LjE0M0gxNy4xNDMKCQkJQzcuNzE0LDE4Mi44NTYsMCwxOTAuNTcxLDAsMjAwQzAsMjA5LjQyOCw3LjcxNCwyMTcuMTQzLDE3LjE0MywyMTcuMTQzeiIvPgoJCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNy4xNDMsMzQ1LjcxNGgzNjUuNzE0YzkuNDI5LDAsMTcuMTQzLTcuNzE0LDE3LjE0My0xNy4xNDRjMC05LjQyOC03LjcxNC0xNy4xNDMtMTcuMTQzLTE3LjE0M0gxNy4xNDMKCQkJQzcuNzE0LDMxMS40MjgsMCwzMTkuMTQzLDAsMzI4LjU3QzAsMzM4LDcuNzE0LDM0NS43MTQsMTcuMTQzLDM0NS43MTR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+Cg=='); } .navbar.scrolled .menu-bar { top: 0px; } .hero { min-height: 100vh; background-size: cover; position: relative; background-position: center; background-repeat: no-repeat; background-blend-mode: multiply; background-color: rgb(168,172,191); } .hero .hero-caption { height: 100vh; text-align: center; position: relative; display: flex; justify-content: center; align-items: center; color: #FFF; } .home-service { display: flex; justify-content: center; align-items: center; min-height: 250px; background-color: #F7F7F7; margin-bottom: 25px; padding: 15px; } .home-service.lg { min-height: 400px; } img.reverse { filter: brightness(1) invert(1); } .row-flex { display: flex; flex-wrap: wrap; } .home-brands { width: 100%; } .home-service { overflow: hidden; display: block; background-color: var(--navyfaded); color: #FFF; position: relative; } .home-service h2 { margin-bottom: 0px; color: #FFF; } .home-service.lite { background-color: #FFF; color: #666; } .home-service.lite h2, .home-service.grayed h2 { color: #333; } .home-service h5 { color: #A1ABBD; font-size: 17px; margin-top: 5px; } .home-service.grayed { background-color: #F7F7F7 } .home-service .pic-holder { position: absolute; top: 0; left: 0; width: 100%; max-height: 70%; overflow: hidden; -webkit-transition: all 500ms; -moz-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; } .home-service .pic-holder:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background-image: linear-gradient(to top, var(--navyfaded), transparent); } .home-service.grayed .pic-holder:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background-image: linear-gradient(to top, #F7F7F7, transparent); } .home-service img { width: 100%; } .home-service .content { position: absolute; width: 100%; bottom: 0px; padding: 20px; } .home-service:hover .pic-holder { transform: scale(1.1); } .client-logos { list-style: none; margin: 0; padding: 0; } .client-logos li { display: inline; } .centerred { display: flex; justify-content: flex-start; align-items: center; } .portfolio { } .tech { display: inline-block; height: 100px; display: flex; justify-content: center; align-items: center; } #queryForm .form-group { margin-bottom: 15px; } #queryForm .form-control { border: 1px solid #666; height: 44px; border-radius: 50px; } ul.chips { list-style: none; margin: 0; padding: 0; } ul.chips li { display: inline-block; } ul.chips li a { display: inline-block; padding: 6px 20px; font-size: 15px; text-decoration: none; background-color: #FFF; color: #666; border-radius: 50px; border: 1px solid #666; } ul.chips li.active a { background-color: var(--navy); color: #FFF; border-color: var(--navy); } footer { font-size: 16px; padding-bottom: 20px; } footer .spacer { height: 3em; } footer .cta { background-color: var(--blue); border-radius: 10px; display: flex; justify-content: center; align-items: center; color: #FFF; min-height: 200px; } footer .cta a { color: #FFF; font-size: 26px; } footer .cta a:hover { color: #FFF; letter-spacing: 0.05em; } footer h4 { font-weight: 600; font-size: 18px; color: var(--navy); text-transform: uppercase; } footer ul.footer-nav { list-style: none; margin: 0; padding: 0; margin-bottom: 25px; } footer a { text-decoration: none; color: inherit; } footer a:hover { color: var(--blue); } ul.social { list-style: none; margin: 0; padding: 0; margin-bottom: 20px; } ul.social li { display: inline; } ul.social li a { display: inline-block; font-size: 20px; color: #333; padding: 5px 15px 5px 0px; } ul.social li a:hover { color: var(--blue); } .two-cols { margin-bottom: 35px; } .portfolio p { margin: 0px; } .portfolio p.rite { text-align: right; } .flat-btn { display: inline-block; background-color: var(--blue); color: #FFF; padding: 15px 55px 15px 25px; text-decoration: none; font-size: 15px; position: relative; } .flat-btn:before { content: ""; position: absolute; bottom: 0; top: 0; margin: auto 0; right: 10px; width: 40px; height: 20px; filter: brightness(1) invert(1); background-image: url(./img/right-arrow.svg); background-size: contain; background-position: center; background-repeat: no-repeat; -webkit-transition: all 250ms; -moz-transition: all 250ms; -o-transition: all 250ms; transition: all 250ms; } .flat-btn:hover { background-color: var(--navy); color: #FFF; } .flat-btn:hover:before { right: 8px; } .work-box { display: block; min-height: 500px; position: relative; overflow: hidden; color: #FFF; } .work-box.sm { min-height: 440px; } .work-box .pic { position: absolute; top: 0px; right: 0px; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; background-color: rgba(63,81,181,0.7); background-blend-mode: multiply; -webkit-transition: all 500ms; -moz-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; } .work-box .info { position: absolute; top: 20px; left: 20px; z-index: 1; padding: 20px; } .work-box:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .work-box:after { content: ""; position: absolute; bottom: 20px; right: 30px; width: 60px; height: 40px; filter: brightness(1) invert(1); background-image: url(./img/right-arrow.svg); background-size: contain; background-position: center; background-repeat: no-repeat; -webkit-transition: all 500ms; -moz-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; } .work-box:hover { color: #FFF; } .work-box .info h3 { font-weight: 600; } .work-box .info h5 { font-size: 16px; } .work-box:hover:after { right: 10px; } .work-box:hover .pic { transform: scale(1.1); background-color: rgba(63,81,181,0.25); } @media (max-width: 768px) { body { padding-top: 49px; } .menu-bar { top: 0px; } .hero-caption { padding: 30px; } .hero h2 { color: #FFF; font-weight: 900; font-size: 2.5em; } .hero h5 { font-size: 20px; } .two-cols .col-sm-6:last-child { border-bottom: 1px solid #E1E1E1; } .two-cols .col-sm-6:first-child { border-top: 1px solid #E1E1E1; border-bottom: 1px solid #E1E1E1; } .tech img { max-height: 75px; max-width: 130px; width: auto; height: auto; } .home-brands, .home-testis { padding: 35px; min-height: 50vh; } .home-brands .client-logos { list-style: none; margin: 0; padding: 0; width: 100%; } .home-brands .client-logos li { height: 100px; width: 50%; float: left; text-align: center; display: flex; justify-content: center; align-items: center; } .home-brands .client-logos li img { max-width: 130px; max-height: 60px; opacity: 0.5; } footer { text-align: center; font-size: 15px; } footer .company-info { position: relative; text-align: center; } footer .company-info img { position: relative; margin: 0 auto; margin-bottom: 20px; } } @media (min-width: 769px) { .goup { margin-top: -85px; } .hero h2 { color: #FFF; font-weight: 900; font-size: 3em; } .hero h5 { font-size: 20px; } .portfolio { background-color: var(--navyfaded); position: relative; } .portfolio:before { content: ""; position: absolute; top: 0; left: 0; height: 200px; background-color: #FFF; width: 100%; } .offcan .announcements { justify-content: center; } .offcan .content { width: 60%; margin: 0 auto; } .two-cols .col-sm-6 { border-top: 1px solid #E1E1E1; border-bottom: 1px solid #E1E1E1; } .two-cols .col-sm-6:first-child { border-right: 1px solid #E1E1E1; } .tech img { max-height: 75px; max-width: 200px; width: auto; height: auto; } .home-brands, .home-testis { padding: 50px; min-height: 50vh; } .home-brands .client-logos { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; justify-content: space-evenly; align-items: center; flex-direction: row; } .home-brands .client-logos li { width: 100%; text-align: center; } .home-brands .client-logos li img { max-width: 150px; max-height: 60px; opacity: 0.5; } footer .company-info { position: relative; padding-left: 100px; } footer .company-info img { position: absolute; top: 0px; left: 0px; max-width: 60px; } }