FANCY SEARCH BAR (USED ON SOLSYS.CA IN 2023)

INSTALL THIS PLUGIN TO GET AJAX FORM RESULTS (meaning words autocomplete and results show up directly in area below form): SearchWP Live Ajax Search (this is optional, but recommended)

1. Use this html structure in the head:

<header class="header">
    <div class="displayFlex alignItemsCenter flexWrapWrap fixedWidth headerContentWrapper">
        <a class="flexItem logo" href="<?php echo home_url(); ?>">
            <img src="<?php echo get_site_url(); ?>/wp-content/uploads/logo.svg" alt="logo" width="233" height="54">
        </a>
        <nav class="flexItem nav">
            <?php html5blank_nav(); ?>
        </nav>
        <!---search html begins-->
        <div class="displayFlex alignItemsCenter searchWrapper">
            <span class="searchToggle"><a class="displayFlex alignItemsCenter justifyContentCenter" href="#"><svg fill="#000000" height="10px" width="10px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
                                                                                                                  viewBox="0 0 451 451" xml:space="preserve">
                <g>
                    <path d="M447.05,428l-109.6-109.6c29.4-33.8,47.2-77.9,47.2-126.1C384.65,86.2,298.35,0,192.35,0C86.25,0,0.05,86.3,0.05,192.3
                             s86.3,192.3,192.3,192.3c48.2,0,92.3-17.8,126.1-47.2L428.05,447c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4
                             C452.25,441.8,452.25,433.2,447.05,428z M26.95,192.3c0-91.2,74.2-165.3,165.3-165.3c91.2,0,165.3,74.2,165.3,165.3
                             s-74.1,165.4-165.3,165.4C101.15,357.7,26.95,283.5,26.95,192.3z"/>
                </g>
                </svg></a></span>
            <div id="search-bar"><?php get_search_form(); ?></div> 
        </div>
        <!---fancy search html ends-->

        <!-- MOBILE NAVIGATION BEGINS -->

        <div class="mobileNavOpenClose"><a href="#" class="mobileNavIcon"><span class="displayFlex alignItemsCenter justifyContentCenter createsHamburger"><span class="theWordMenu">Menu</span></span></a></div>
        <div class="mobileNavWrapper">
            <div class="mobileLogo">
                <a href="<?php echo home_url(); ?>">
                    <img src="<?php echo get_site_url(); ?>/wp-content/uploads/logo.svg" alt="Logo" class="logo-img" width="233" height="54">
                </a>
            </div>
            <div class="mobileNav">
                <?php html5blank_nav(); ?>
            </div>
        </div>
    </div>
</header>



2. include this js in your scripts file (without script tags and within a document ready block):
<script>
    //begin toggle search bar script
    jQuery(".searchToggle").click(function (e) {
        event.preventDefault();
        jQuery(".searchWrapper").toggleClass("open");
        jQuery('.flexItem.nav li').toggle("slow");
        jQuery(".search-input").toggleClass("open");
    });
    //end toggle search bar script

</script>

3. Include these styles in your css file:

<style>
    /*fancy search bar styles begin*/

    .searchWrapper{
        position: relative;
        width: 42px;
        transition: .4s right ease-in-out;
        right: 0px;
        margin-right: 20px;
    }
    .searchWrapper.open{
        right: 670px;
    }
    .searchToggle{
        position: relative;
        z-index: 999999;
    }
    .searchWrapper a{
        border: 1px solid #c9cccf;
        border-radius: 50%;
        padding: 15px;
        background: #f5f7f9;
    }
    .searchWrapper svg{
        fill: #878181;
    }
    #search-bar{
        flex: 1;
    }
    .searchWrapper .search-input{
        border-radius: 40px;
        border: none;
        background: #ededed;
        height: 47px;
        padding: 6px 14px;
        transition: .4s width ease-in-out, .4s visibility ease-in-out;
        width: 0px;
        visibility: hidden;
    }
    .searchWrapper .search-input.open{
        width: 100%;
        visibility: visible;
    }
    .searchWrapper .search-input.open:focus-visible{
        border: none;
        outline: none;
    }
    .searchWrapper .search-submit{
        display: none;
    }
    form.search{
        border: none;
        padding: 0px;
        background: none;
        margin-left: 10px;
        width: 620px;
    }

    @media(max-width: 1023px){
        .searchWrapper{
            top: 45px;
        }
        .searchWrapper.open{
            right: 73vw;
        }
        form.search{
            width: 62vw;
        }
    }
    /*fancy search bar styles end*/
</style>/*
Theme Name: Your Theme by Fusion Studios
Theme URI: http://html5blank.com
Description: Based on HTML5 Blank WordPress Theme by Todd Motto (@toddmotto)
Version: 1.4.3
Author: Kevin (kevin@fusionstudiosinc.com)
Author URI: http://fusionstudiosinc.com
Tags: Blank, HTML5, CSS3

License: MIT
License URI: http://opensource.org/licenses/mit-license.php
*/


/* IMPORT FONTS BEGINS*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

@font-face {
font-family: 'Magistral';
src: url('fonts/Magistral-Medium.woff2') format('woff2'),
url('fonts/Magistral-Medium.woff') format('woff'),
url('fonts/Magistral-Medium.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}

/* IMPORT FONTS ENDS*/


/*WORDPRESS CORE STYLES BEGIN*/

.alignnone {
margin: 0;
}
.aligncenter, div.aligncenter {
display:block;
margin: 5px auto 5px auto;
}
.alignright, .wp-block-image .alignright {
float:right;
margin: 17px 0 20px 20px;
}
.alignleft, .wp-block-image .alignleft {
float:left;
margin: 17px 20px 20px 0;
}

@media only screen and (max-width: 750px){
/*remove float and center all left and right aligned images at 750px for both classic and gutenberg editor.  Adjust as needed*/
.alignleft, .wp-block-image .alignleft, .alignright, .wp-block-image .alignright {
float:none;
display: block;
height: auto;
margin: 20px auto;
text-align: center;
}
}


a img.alignright {
float:right;
margin: 5px 0 20px 20px;
}
a img.alignnone {
margin: 0;
}
a img.alignleft {
float:left;
margin: 5px 20px 20px 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-block-image:after{
content:'';
clear: both;
}
@media (max-width: 767px){
.wp-block-image .alignleft{
float: none!important;
margin: auto;
}
}

.wp-caption {
max-width: 95%;
padding: 5px;
text-align: center;
}
.wp-block-image .aligncenter{
text-align: center;
}

@media screen and (max-width: 400px){
.wp-caption.aligncenter {
width: unset!important; /*this, coupled with positioning below, prevents wordpress from forcing a size on the caption and preventing a truly resposive AND centered image and caption*/
position: relative;
left: 50%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
}
}

.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
margin: 5px 0 20px 20px;
}
.wp-caption img {
border: 0 none;
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
.wp-caption .wp-caption-text, .gallery-caption {
font-size: 16px;
line-height: 17px;
margin: 0;
padding: 7px 0px 7px 0px;
color: white;
}
.wp-container-6{
gap: unset !important;
column-gap: 2em !important;
}
.wp-block-image {
margin: 0 0 -1em !important;
}
.wp-block-image figcaption{
font-size: 16px;
line-height: normal;
}
.alignfull {
padding: 50px 5%;
}
.alignwide {
/*for gutenberg "group" block set to "wide".  */
margin: auto;
max-width: 1200px;
}
/*WORDPRESS CORE STYLES END*/


/* FLEXBOX PARENT ELEMENT STYLES BEGIN */

.displayFlex {
display: flex;
}
.flexDirectionColumn {
flex-direction: column;
}
.justifyContentCenter{
justify-content: center;
}
.justifyContentSpaceBetween{
justify-content: space-between;
}
.justifyContentSpaceAround{
justify-content: space-around;
}
.justifyContentFlexEnd {
justify-content: flex-end;
}
.alignItemsCenter {
align-items: center;
}
.alignItemsFlexEnd{
align-items: flex-end;
}
.alignItemsStretch {
align-items: stretch;
}
.flexWrapWrap {
flex-wrap: wrap;
}

/* FLEXBOX PARENT ELEMENT STYLES END*/

/*GENERAL HTML STYLES BEGIN*/

html{
overflow-x: hidden;
}
body {
font-family: 'Open-Sans', sans-serif;
font-weight: 300;
font-size: 18px;
color: black;
line-height: 30px;
overflow-x: hidden;
position: relative; 
background: black;
margin: 0px;
}
a {
color: #3cb5ff;
text-decoration: none;
transition: color .4s;
}
a:hover {
color: #8f8b8b;
transition: color .4s;
}
a:focus {
outline: 0;
}
a:hover, a:active {
outline: 0;
}
.buttonWrapper a, .wp-element-button {
color: #4cb6f6;
background: #242424;
padding: 7px 20px 7px 20px;
border-radius: 5px;
margin-top: 10px;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgb(0 0 0 / 0%);
position: relative;
transition-property: color;
transition-duration: 0.5s;
cursor: pointer;
font-size: 18px;
letter-spacing: 1px;
text-transform: uppercase;
font-family: 'Magistral', sans-serif;
}
.buttonWrapper a:before, .wp-element-button:before{
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: whitesmoke;
transform: scaleX(0);
transform-origin: 0 50%;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.buttonWrapper a:hover, .wp-element-button:hover{
color: black;
transition: .5s color;;
}
.buttonWrapper a:hover:before, .buttonWrapper span:hover:before {
transform: scaleX(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
border-radius: 5px;
}
audio {
outline: 0;
}
h1, h2, h3, h4, h5, h6, p{
margin: 0px;
padding: 15px 0;
font-weight: 300;
}
h1, h2, h3, h4, h5, h6{
line-height: normal;
}
h1{
font-size: 40px;
}
h2{
font-size: 35px;
color: #0f7ec3;
padding-top: 60px;
}
.whiteHeading{
font-family: 'Magistral', sans-serif;
font-size: 47px;
color: white;
padding-top: 0px;
}

@media (max-width: 600px){
.whiteHeading{
font-size: 30px;
}
}

h3{
font-size: 28px;
color: white;
}
h4{
font-size: 18px;
font-weight: bold;
}
hr {
box-sizing: content-box; 
height: 0; 
overflow: visible;
}
iframe, object, embed {
max-width: 100%;
}
img{
max-width: 100%;
height: auto;
}
main{
color: whitesmoke;
display: block;
}
p:empty{
display: none;
}
table th, table td{
padding: 5px;
}
.fixedWidth {
max-width: 1200px;
margin: 0 auto;
}
h1.withPadding{
padding: 12px 30px 30px 30px;
}
.paddingSides{
padding-left: 5%; /*don't use short forms here*/
padding-right: 5%;
}
.paddingTop{
padding-top: 50px;
}
.paddingTopBottom{
padding-bottom: 50px;
}
.pageTitle{ 
display: none;
}
.textAlignCenter{
text-align: center;
}
.anchorOffset{
position: relative;
top: -140px;
}
.yellow{
color: #f8bf51;
}
.yellow.bold.larger{
font-weight: bold;
font-size: larger;
}
/*GENERAL > form styles begin*/

form{
max-width: 700px;
border: 1px #e4e2e2 solid;
padding: 10px;
background: #242424;
border-radius: 3px;
margin: 0 auto;
padding-bottom: 70px;
}

input[type="text"], input[type="email"], textarea{
width: 100%;
padding: 7px;
box-sizing: border-box;
}
input[type="text"], input[type="email"]{
padding: 10px 5px;
font-size: 17px;
border: 1px solid whitesmoke;
background: #dbd6d6;
}
input[type="file"]{
color: #757575;
padding: 10px 0 10px 0;
}
input[type="submit"]{
background: #cc2200;
padding: 14px 0 10px 0;
border: none;
color: white;
display: block;
font-size: 20px;
letter-spacing: 2px;
cursor: pointer;
transition: .4s background;
width: 100%;
margin: auto;
}

@media screen and (max-width: 380px){
input[type="submit"]{
width: 100%;
}
}

input[type="submit"]:hover{
background: grey;
transition: .4s background;
}
textarea{
padding: 10px 0 0 10px;
box-sizing: border-box;
width: 100%;
}
label {
color: #757575;
display: inline-block;
width: 100%;
text-transform: uppercase;
color: whitesmoke;
}
.wpcf7-form-control-wrap {
color: red;
font-size: 20px;
text-align: center;
padding: 20px 0;
}
input[type="file"] {
color: #757575;
padding: 10px 0 10px 0;
}

/*GENERAL > form styles end*/

/*GENERAL HTML STYLES END*/

/*HEADER STYLES BEGIN*/
.header{
background: #00000085;
position: fixed;
width: 100%;
top: 0px;
border-bottom: 2px solid #0f7dc2;
border-image: linear-gradient(52deg, rgb(8 8 8), rgb(15, 125, 194)) 1;
z-index: 9;
}

@media (max-width: 699px){
.header{
background: black;
}
}

/*HEADER SCROLLED STYLES BEGIN --class "scroll added by scripts.js in theme file*/
.header.scrolled{
position: fixed; 
width: 100%; 
box-sizing: border-box; 
z-index: 999999; /*ensure menu goes over everything*/
transform: translateY(70px);
top: -70px;
transition: transform 500ms ease;
border-bottom: 1px solid grey;
background: black;
}
.header.scrolled .displayFlex.headerContentWrapper a.logo.flexItem{
padding: 0 0 0 60px;
transition: margin .6s;
margin-top: -25px;
background: black;
max-height: 97px;
}
.header.scrolled .displayFlex.headerContentWrapper a.logo.flexItem img {
transform: scale(.6);
transition: all .5s;
padding-top: 10px;
padding-bottom: 5px;
}
.header.scrolled .mobileNavOpenClose{
top: 5px!important;
}

/*HEADER SCROLLED STYLES end --class "scroll added by scripts.js in theme file*/

.header .displayFlex.headerContentWrapper a.logo.flexItem {
position: relative;
transform: scale(1);
color: #211e1d;
transition: color .4s, padding .4s, transform .4s, margin .4s;
padding: 9px 0 0 20px;
flex: 1;
}
.header .displayFlex.headerContentWrapper a.logo.flexItem img{
max-width: 200px;
}

@media screen and (max-width: 1023px){
.header .displayFlex.headerContentWrapper a.logo.flexItem img{
max-width: 175px; /*adjust as necessary*/
}
.header.scrolled .displayFlex.headerContentWrapper a.logo.flexItem{
top: unset;
margin: 0px;
padding: 0;
left: 15px;
}
.header.scrolled .displayFlex.headerContentWrapper a.logo.flexItem img{
max-width: 150px;
padding: 0;
}
}

/*HEADER > NAV main menu item styles begin*/

.header .displayFlex.headerContentWrapper .flexItem.nav {
height: 54px; 
}
.header .displayFlex.headerContentWrapper .flexItem.nav > ul li a[aria-current]{
color: #328dcb !important;
font-weight: bold;
}
.header .displayFlex.headerContentWrapper .flexItem.nav > ul {
display: flex; 
right: 0px; 
}
.header .displayFlex.headerContentWrapper .flexItem.nav ul {
margin: 0px; 
padding: 0px; 
position: absolute;
z-index: 999;
list-style: none; 
}
.header .displayFlex.headerContentWrapper .flexItem.nav ul li a {
display: block;
background: transparent;
color: #e4e2e2;
transition: .4s color;
}
.header .displayFlex.headerContentWrapper .flexItem.nav ul li a:hover {
color: #0f7fc3;
transition: .4s color;
}
.header .displayFlex.headerContentWrapper .flexItem.nav > ul > li > a {
padding: 16px 1.5vw 16px 1.5vw; 
font-size: 18px;
}

@media screen and (max-width: 1475px){
.header .displayFlex.headerContentWrapper .flexItem.nav ul li a{
font-size: 16px;
}
.header .displayFlex.headerContentWrapper .flexItem.nav > ul > li > a{
padding: 16px 1.28vw 16px 1.28vw;
}
}

.searchWrapper{
position: relative;
top: -32px;
right: 40px;
}
.searchWrapperMobile{
position: relative;
top: 4px;
right: -11px;
}
.header.scrolled .searchWrapper {
display: none;
}
#search-bar, #search-bar-mobile{
/*dont' display actual search form until triggered by jQuery in .scipts.js*/
display: none;
}
form.search{
border: none;
padding: 0px;
background: none;
margin-left: 10px;
margin-bottom: 8px;
}

@media(max-width: 1023px){
.searchWrapper{
top: 20px;
left:21px;
}
}

/*HEADER > NAV main menu item styles END*/

/*HEADER > NAV > SUB-MENU Styles begin*/

.header .displayFlex.headerContentWrapper .flexItem.nav ul li.menu-item-has-children > a:after {
content: '+';
padding-left: 5px;
}
.header .displayFlex.headerContentWrapper .flexItem.nav ul li ul.sub-menu  {
display: none; /*set all subs not to display initially.  On hover function in js/scripts.js toggles display*/
background: black;
margin-left: 28px;
border-radius: 3px;
}
.header .displayFlex.headerContentWrapper .flexItem.nav > ul > li > ul.sub-menu > li > a {
margin-left: 10px;
font-size: 90%;
}
.header .displayFlex.headerContentWrapper .flexItem.nav > ul > li > ul.sub-menu li a {
padding: 5px 11px 5px 5px;
color: #a6a4a4;
}
.header .displayFlex.headerContentWrapper .flexItem.nav > ul > li > ul.sub-menu li a:hover {
color: #0099cc;
}
.header .displayFlex.headerContentWrapper .flexItem.nav ul li ul.sub-menu li{
position: relative;

}
.header .displayFlex.headerContentWrapper > .flexItem.nav > ul > li > ul.sub-menu > li > ul.sub-menu > li > a {
font-size: 90%;
}
.header .displayFlex.headerContentWrapper > .flexItem.nav > ul > li > ul.sub-menu > li > ul.sub-menu {
left: 100%; 
width: 100%;
top: 0px; 
}

/*HEADER > NAV > SUB-MENU Styles end*/

/* HEADER mobile navigation styles begin */

@media screen and (max-width: 1250px){
/*don't display the desktop nav at and below 1023px.  Adjust pixel value as desired.*/
.header .nav {
display: none;
}
}

@media screen and (min-width: 1249px) {
/*don't display mobile menu button or the mobile menu iteself at 1024px and above.  Adjust the pixel value as desired.*/
.header .mobileNavOpenClose, .header .mobileNavWrapper {
display: none; 
} 
}

/* HEADER mobile navigation styles > MOBILE NAV OPEN CLOSE ("hamburger") styles BEGIN */

.header .mobileNavOpenClose {
/*js/scripts.js toggles the width of this element between 100% (when mobile menu is showing, therby matching its width) and the unset value below (when mobile menu is not showing)*/
text-align: center; 
z-index: 9999999999;
line-height: 45px; 
background-color: black;
text-transform: uppercase;
padding-right: 10px;
padding-left: 10px;
margin-right: 27px;
border: 1px solid whitesmoke;
border-radius: 5px;
visibility: hidden;
}
.header .mobileNavOpenClose a.mobileNavIcon {
color: whitesmoke; 
}
.header .mobileNavOpenClose a.mobileNavIcon span.createsHamburger:before{
content:'\2630';
font-size: 29px;
position: relative;
top: 3px;
}
.header .mobileNavOpenClose a.mobileNavIcon.XoutOfMobileMenu span.createsHamburger:before {
/*class "XoutOfMobileMenu" toggled through js/scripts.js JQuery, puts mobile menu-close "x" in place of hamburger when mobile menu is open*/
content:'\00D7';/*creates the "x"*/
font-size: 40px;
position: relative;
top: 6px;
display: inline-block; 
transform: rotate(360deg);
transition: transform 1s ease-out;
animation: fadeinout 1s ease forwards;
opacity: 0;
}
.header .mobileNavOpenClose.moveToTopofWindow{
/* class moveToTopofWindow added by scripts.js, but we ensure with important override that its always top 0 right 0 left 0 with the folowing styles WHEN MBILE NAV IS OPENED */
top: 0px;
}

@keyframes fadeinout {
0% { opacity: 0; }
50% { opacity: .5; }
100% { opacity: 1; }
}

/* HEADER mobile navigation styles > MOBILE NAV OPEN CLOSE ("hanburger") styles END */

/* HEADER mobile navigation styles > MOBILE NAV WRAPPER (mobile menu) styles BEGIN */

.header .mobileNavWrapper{
position: fixed;
width: 100%;
height: 0%; 
right: 0px; 
overflow-y: scroll; 
top: 52px; 
background: black;
z-index: 999;
transition: top .4s;
}
.header .mobileNavWrapper .mobileLogo{
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
.header .mobileNavWrapper .mobileLogo img {
width: 200px;
}
.header .mobileNavWrapper .mobileNav ul {
margin: 0px; 
padding: 0px; 
list-style: none;
}
.header .mobileNavWrapper .mobileNav{
height: 200%; 
}
.header .mobileNavWrapper .mobileNav ul li a {
color: #e4e2e2;
display: block;
padding: 26px 20px; 
border-top: rgba(164, 156, 156, 0.4) 1px solid;
}
.header .mobileNavWrapper .mobileNav > ul > li:last-of-type a{
border-bottom: rgba(164, 156, 156, 0.4) 1px solid; 
}
.header .mobileNavWrapper .mobileNav ul li.menu-item-has-children{
position: relative;
}
.header .mobileNavWrapper .mobileNav ul li.menu-item-has-children{
position: relative;
margin-bottom: 1px;
/*above margin fixes apparent bug in actual mobile browsers only (not in emulators) regarding hanging border--don't remove*/
}
a.dropDownActivator{
position: absolute;
top: 0px;
right: 0px;
padding: 30px !important;
border-top: 1px solid grey;
border-left: 1px solid grey;
border-right: 1px solid grey;
}
a.dropDownActivator.OpenCloseToggle{
/*"OpenCloseTogle" class inserted by javascript in theme JS folder*/
border-bottom: 1px solid grey;
/*only add border bottom if sub is open to avoid border overlap bug in actual mobile browsers)*/
}
.header .mobileNavWrapper .mobileNav ul li.menu-item-has-children a.dropDownActivator:after{
content: "▼";
transform: rotate(0deg);
display: block;
transition: 500ms ease transform;
line-height: 115%;
}
.header .mobileNavWrapper .mobileNav ul li.menu-item-has-children > a.OpenCloseToggle:after{
/*"OpenCloseToggle class inserted by javascrip in theme JS folder*/
transform: rotate(180deg);
}
.header .mobileNavWrapper .mobileNav > ul > li > a {
transition: background 0.4s; 
}
.header .mobileNavWrapper .mobileNav > ul > li > a:hover {
background-color:rgba(0, 0, 0, 0.1); 
transition: background 0.4s; 
}
.header .mobileNavWrapper .mobileNav > ul > li.menu-item-has-children > ul.sub-menu > li > a {
padding-left: 45px;
background-color: #373839; 
}
.header .mobileNavWrapper .mobileNav > ul > li.menu-item-has-children > ul.sub-menu > li > a:hover {
transition: background 0.4s; 
}
.header .mobileNavWrapper .mobileNav > ul > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children> ul.sub-menu li > a {
padding-left: 40px;
background-color: yellow;
}
.header .mobileNavWrapper .mobileNav > ul > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children> ul.sub-menu li > a:hover {
background-color: blue;
transition: background 0.4s; 
}
.header .mobileNavWrapper .mobileNav ul li.menu-item-has-children ul.sub-menu {
/*don't display ANY subs until user clicks on them and js/script.js JQuery toggles their display*/
display: none;
flex-basis: 100%;
}

/* HEADER mobile navigation styles > MOBILE NAV WRAPPER (mobile menu) styles END */

/* HEADER mobile navigation styles END */

/*HEADER styles end*/

/*HOMEPAGE STYLES BEGIN*/

body.home img.hero{
width: 100%;
display: block;
}
.heroWrapper{
position: relative;
z-index: -1;
}
.heroWrapper .sflWordsWrapper{
position: absolute;
top: calc(78px + 4.5vw);
left: calc(-38px + 6.7vw);
font-size: 2.5vw;
color: white;
}

@media (max-width: 699px){
.heroWrapper{
margin-top: 106px;
}
.heroWrapper .sflWordsWrapper{
top: calc(-44px + 13.2vw);
position: absolute;
left: 20px;
font-size: 18px;
}
}

@media (max-width: 400px){
.heroWrapper .sflWordsWrapper{
background: #000000ab;
padding: 2%;
}
}

.heroWrapper .sflWordsWrapper span{
display: inline-block;
}
.heroWrapper .sflWordsWrapper .flight{
color: #b1b3b6;
}
.heroWrapper .sflWordsWrapper .laboratory{
color: #d92927;
}

/* animations for "Space Flight Laboratory" words begin*/

@keyframes fadeInLeft {
0% {
opacity:0;
transform:translate3d(-200px, 0, 0);
}
to {
opacity:1;
transform:none;
}
}

.fadeInLeft{
opacity: 0;
}
.fadeInLeft{
animation-name: fadeInLeft;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}

@keyframes fadeInUp {
0% {
opacity:0;
transform:translate3d(0, 200px, 0);
}
to {
opacity:1;
transform:none;
}
}

.fadeInUp{
opacity: 0;
}
.fadeInUp{
animation-name: fadeInUp;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
animation-delay: .5s;
}

@keyframes fadeInRight {
0% {
opacity:0;
transform:translate3d(200px, 0, 0);
}
to {
opacity:1;
transform:none;
}
}

.fadeInRight{
opacity: 0;
}
.fadeInRight{
animation-name: fadeInRight;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
animation-delay: 1s;
}

/* animations for "Space Flight Laboratory" words end*/

.faderWrapper{
position: absolute;
top: calc(78px + 9.4vw);
left: calc(-38px + 6.7vw);
font-family: 'Magistral', sans-serif;
}

@media (max-width: 699px){
.faderWrapper {
min-height: 105px;
display: flex;
justify-content: center;
}
}

.faderWrapper .faderElement{
display: none;
/*display controlled by javascript in scripts.js*/
}
.faderWrapper .faderElement .smallerSatellites{
font-size: 2vw;
background: #000000;
background: linear-gradient(to bottom, #575151 -11%, #FFFFFF 54%, #000000 125%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.faderWrapper .faderElement .biggerReturn{
font-size: 3vw;
line-height: normal;
background: #000000;
background: linear-gradient(to bottom, #000000 0%, #FFFFFF 50%, #000000 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.faderWrapper .faderElement .types{
font-family: 'Open-Sans', sans-serif;
font-size: 1.05vw;
}
.faderWrapper .faderElement.two{
font-size: 2vw;
line-height: normal;
font-family: 'Open-Sans', sans-serif;
}

@media (max-width: 1023px){
.faderWrapper{
top: calc(-17px + 38.6vw);
left: calc(-104px + 47vw);
}
.faderWrapper .faderElement .smallerSatellites{
font-size: calc(10px + 1.9vw);
}
.faderWrapper .faderElement .biggerReturn{
font-size: calc(20px + 2.1vw);
}
.faderWrapper .faderElement .types{
font-size: calc(10px + .75vw);
}
.faderWrapper .faderElement.two{
font-size: calc(10px + 1.9vw);
}
}

@media (max-width: 699px){
.faderWrapper{
top: unset;
left: unset;
position: relative;
padding-top: 15px;
padding-bottom: 10px;
}
}

.downArrow{
text-align: center;
margin-top: -54px;
background: transparent;
position: relative;
top: -10vh;
}
.downArrow svg{
fill: white; 
width: 32px; 
height: auto;
}

@media (max-width: 1024px){
.downArrow{
background: transparent;
margin-top: 18px;
top: -1vh;
}
}

@media (max-width: 700px){
.downArrow{
top: -3.5vh;
}
}

.whyChooseSFLhpWrapper.displayFlex{
position: relative;
}
.whyChooseSFLhpWrapper.displayFlex img{
display: block;
width: 100%;
height: auto;
}
.whyChooseSFLhpWrapper.displayFlex .blueBox{
position: absolute;
top:0px;
left: 0px;
background: #0d639cd4;
width: 50%;
height: 100%;
padding: 5%;
box-sizing: border-box;
}

@media (max-width: 767px){
.whyChooseSFLhpWrapper.displayFlex{
display: block;
}
.whyChooseSFLhpWrapper.displayFlex .blueBox{
position: relative;
width: 100%;
}
}

.whyChooseSFLhpWrapper.displayFlex .blueBox .whyChooseSflHeading{
font-family: 'Magistral', sans-serif;
font-size: calc( 10px + 2vw);
color: white;
padding-top: 0px;
}
.whyChooseSFLhpWrapper.displayFlex .blueBox .whyChooseSflList{
font-size: 25px;
line-height: 45px;
list-style-type: none;
padding-left: 0px;
}

@media (max-width: 1023px){
.whyChooseSFLhpWrapper.displayFlex .blueBox .whyChooseSflList{
font-size: 18px;
line-height: normal;
}
}

.whyChooseSFLhpWrapper.displayFlex .blueBox .whyChooseSflList li{
display: flex;
align-items: center;
color: white;
}
.whyChooseSFLhpWrapper.displayFlex .blueBox .whyChooseSflList li:before{
content: '';
border: 1px solid white;
display: inline-block;
border-radius: 50%;
width: 12px;
height: 12px;
margin-right: 34px;
}

@media (max-width: 767px){
.whyChooseSFLhpWrapper.displayFlex{
display: block;
}
.whyChooseSFLhpWrapper.displayFlex .blueBox{
position: relative;
width: 100%;
}
.whyChooseSFLhpWrapper.displayFlex .blueBox .whyChooseSflHeading{
font-size: 23px;
}
.whyChooseSFLhpWrapper.displayFlex .blueBox .whyChooseSflList{
line-height: 30px;
}
}

.starBackground{
background-image: url('http://thewebsitehere.com/wp-content/uploads/starBackgroundDoubleSize.webp');
background-size: cover;
background-attachment: fixed;
}
.displayFlex.sflPlatforms .flexItem{
padding: 5%;
flex-basis: 50%;
flex-direction: column;
align-items: flex-start;
}
.displayFlex.sflPlatforms .flexItem.text{
font-size: 33px;
line-height: normal;
flex: 1;
}
.displayFlex.sflPlatforms .flexItem.images{
padding-right: 0px;
}
.displayFlex.sflPlatforms .flexItem.text .whiteHeading{
font-family:'Magistral', sans-serif;
color: white;
font-size: 47px;
padding-top: 0px;
}
.displayFlex.sflPlatforms .flexItem.text span.blue{
color: #0f7dc2;
font-size: 37px;
font-weight: bold;
}
.displayFlex.sflPlatforms .flexItem.images .platformItemWrapper{
position: relative;
margin-top: 60px;
}
.displayFlex.sflPlatforms .flexItem.images .platformItemWrapper:first-of-type{
margin-top: 0px;
}
.displayFlex.sflPlatforms .flexItem .platformName{
position: absolute;
font-family:'Magistral', sans-serif;
color: #0f7dc2;
top: 41%;
font-size: 35px;
left: 30px;
}
.displayFlex.sflPlatforms .flexItem .small{
position: absolute;
top: -15px;
left: 34%;
}
.displayFlex.sflPlatforms .flexItem .micro{
position: absolute;
top: -25px;
left: 38%;
}
.displayFlex.sflPlatforms .flexItem .nano{
position: absolute;
top: -12px;
left: 38%;
}

@media (max-width: 1350px){
.displayFlex.sflPlatforms .flexItem .platformName{
font-size: 25px;
top: 39%;
}
}

@media (max-width: 1024px){
.displayFlex.sflPlatforms .flexItem.text .whiteHeading{
font-size: 37px;
}
.displayFlex.sflPlatforms .flexItem.text{
font-size: 23px;
}
.displayFlex.sflPlatforms .flexItem.text span.blue{
font-size: 25px;
}
.displayFlex.sflPlatforms .flexItem .platformName{
top: calc(-12px + 6.2vw);
left: 10px;
font-size: 21px;
}
}

@media (max-width: 767px){
.displayFlex.sflPlatforms{
flex-direction: column;
}
.displayFlex.sflPlatforms .flexItem .platformName{
top: calc(-13px + 11.9vw);
}
}

@media (max-width: 430px){
.displayFlex.sflPlatforms .flexItem .platformName{
font-size: 17px;
}
}

.applications.displayFlex{
background-image: url('http://thewebsitehere.com/wp-content/uploads/applicationsBlueBackground.webp');
background-size: cover;
background-attachment: fixed;
}
.applications.displayFlex .flexItem.image img{
display: block;
}
.applications.displayFlex .flexItem.text{
padding: 0 9%;
max-width: 833px;
}
.applications.displayFlex .flexItem.text h2.whiteHeading{
font-family:'Magistral', sans-serif;
color: white;
font-size: 47px;
padding: 0px;
}
.applications.displayFlex .flexItem.text h3{
padding: 0px;
}
.applications.displayFlex .flexItem.text .forHoverEffect{
position: relative;
}
.applications.displayFlex .flexItem.text .forHoverEffect .circle{
/*note hover effects for the "top" and "visibility" css attributes of this element are applied by javascript in scripts.js*/
position: absolute;
width: 20px;
height: 20px;
border: 1px solid #f8bf51;
border-radius: 50%;
left: -11px;
top: 9px;
visibility: hidden;
transition: .4s top ease-in-out, .2s visibility ease-in-out;
}
.applications.displayFlex .flexItem.text ul.applicationsList{
list-style-type: none;
line-height: 40px;
font-size: 25px;
border-left: 1px solid white;
border-image: linear-gradient(transparent, white, transparent) 11;
}
.applications.displayFlex .flexItem.text ul.applicationsList li a{
color: white;
transition: .4s color ease-in-out;
}
.applications.displayFlex .flexItem.text ul.applicationsList li a:hover{
color: #f8bf51;
transition: .4s color ease-in-out;
}

@media (max-width: 1023px){
.applications.displayFlex .flexItem.text h2.whiteHeading{
font-size: 35px;
}
.applications.displayFlex .flexItem.text h3{
font-size: 23px;
}
.applications.displayFlex .flexItem.text ul.applicationsList{
font-size: 20px;
line-height: normal;
}
.applications.displayFlex .flexItem.text .forHoverEffect .circle{
display: none;
}
.applications.displayFlex .flexItem.text ul.applicationsList{
border-left: unset;
border-image: none;
list-style-type: circle;
}
}

@media (max-width: 767px){
.applications.displayFlex .flexItem.text h2.whiteHeading{
font-size: 25px;
}
.applications.displayFlex .flexItem.text h3{
font-size: 18px;
}
.applicationsBackground.displayFlex .flexItem.text ul.applicationsList{
font-size: 16px;
line-height: normal;
}
}

@media (max-width: 620px){
.applications{
flex-direction: column;
align-items: unset;
}
.applications.displayFlex .flexItem.image img{
max-width: 200px;
}
.applications.displayFlex .flexItem.text{
padding: 15px;
}
}

.lowerStarBackground{
background-image: url('http://thewebsitehere.com/wp-content/uploads/lowerStarBackgroundDoubleSize.webp');
background-size: cover;
background-attachment: fixed;
}
.featuredMissionsByLine{
color: #097dc2;
text-align: right;
font-size: 30px;
padding-bottom: 40px;
}

@media (max-width: 1023px){
.featuredMissionsByLine{
font-size: calc(13px + 1.5vw);
}
}

.featuredMissionsByLine span{
color: white;
font-weight: bold;
font-size: larger;
}
.featuredSatelliteSliderWrapper{
border-top: 1px solid white;
border-bottom: 1px solid white;
border-image: linear-gradient(87deg, #0988d4, white, #0988d4) 1;
}
.hpBlogWrapper{
background-image: url('http://thewebsitehere.com/wp-content/uploads/lowerStarBackgroundDoubleSize.webp');
background-attachment: fixed;
background-size: cover;
}
.hpBlogWrapper .displayFlex.hpBlogs{
padding-top: 60px;
}
.hpBlogWrapper .displayFlex.hpBlogs .flexItem {
max-width: 300px;
margin-bottom: 50px;
position: relative;
padding: 0 20px;
}
.hpBlogWrapper .displayFlex.hpBlogs .flexItem .newsButtonWrapper{
text-align: center;
background: linear-gradient(67deg, #0f7dc2, #191d1d);
border: 1px solid #0f7dc2;
border-radius: 5px;
width: 80%;
margin: 0 auto;
padding: 10px 0;
font-size: 25px;
font-weight: bold;
margin-bottom: 40px;
position: relative;
z-index: 1;
}
.hpBlogWrapper .displayFlex.hpBlogs .flexItem .newsButtonRotatedSquare{
width: 20px;
height: 20px;
position: absolute;
transform: rotate(45deg);
background: #0f7dc2;
left: 46%;
top: 38px;
}
.hpBlogWrapper .displayFlex.hpBlogs .flexItem .wrapperForBorder{
background-image: url('http://thewebsitehere.com/wp-content/uploads/hpNewsBackground.png');
background-repeat: no-repeat;
padding: 3px;
background-size: contain; 
flex-grow: 1;
}
.hpBlogWrapper .displayFlex.hpBlogs .flexItem .wrapperForBorder h2{
font-size: 20px;
padding-top: 0px;
}

@media (max-width: 755px){
.hpBlogWrapper .displayFlex.hpBlogs .flexItem .wrapperForBorder h2{
min-height: unset;
}
}

.hpBlogWrapper .displayFlex.hpBlogs .flexItem .wrapperForBorder img{
width: 100%;
border-radius: 5px;
}
.hpBlogWrapper .displayFlex.hpBlogs .flexItem .wrapperForBorder .buttonWrapper a{
display: block;
text-align: center;
flex-grow: 1;
}
.hpBlogWrapper .displayFlex.hpBlogs .flexItem .wrapperForBorder .buttonWrapper{
flex-grow: 1;
}
/*HOMEPAGE > metaslider caption styles begin*/

.featuredSatelliteSliderWrapper .metaslider .caption-wrap{
height: 100%;
background: transparent;
opacity: 1;
}
.featuredSatelliteSliderWrapper .metaslider .caption{
position: absolute;
left: calc( -40px + 44vw);
top: 50%;
transform: translateY(-50%);
}
.featuredSatelliteSliderWrapper .metaslider .caption h2{
color: white;
font-weight: bold;
padding: 0px;
}
.featuredSatelliteSliderWrapper .metaslider .caption h3{
color: grey;
text-transform: uppercase;
font-size: 25px;
padding: 0px;
}
.featuredSatelliteSliderWrapper .metaslider .caption .extraText{
max-width: 480px;
}

@media (max-width: 1023px){
.featuredSatelliteSliderWrapper .metaslider .caption .extraText{
display: none;
}
}

@media (max-width: 650px){
.featuredSatelliteSliderWrapper .metaslider .caption h2{
font-size: 23px;
}
.featuredSatelliteSliderWrapper .metaslider .caption h3{
font-size: 18px;
}
.featuredSatelliteSliderWrapper .buttonWrapper a{
font-size: 16px;
padding: 7px 10px 4px 10px;
}
}

@media (max-width: 800px){
.featuredSatelliteSliderWrapper .metaslider .caption{
left: calc( 71px + 20vw);
}
.featuredSatelliteSliderWrapper .metaslider .caption h2{
font-size: 18px;
}
.featuredSatelliteSliderWrapper .metaslider .caption h3{
font-size: 16px;
}
}

@media (max-width: 470px){
.featuredSatelliteSliderWrapper .metaslider .caption h3{
display: none;
}
}

.featuredSatelliteSliderWrapper .metaslider .flexslider .flex-direction-nav li a{
background-image: url('http://thewebsitehere.com/wp-content/uploads/slideshowNavArrows.png');
height: 41px!important;
}
.featuredSatelliteSliderWrapper .flex-control-paging li a{
background: #0f7ec2;
}
.featuredSatelliteSliderWrapper .flex-control-paging li a.flex-active {
border: 1px solid #0f7ec2;
}

/*HOMEPAGE > metaslider caption styles end*/

/*HOMEPAGE STYLES END*/

/*INSIDE PAGE STYLES BEGIN*/

/*INSIDE PAGES > general styles begin*/

main.insidePage{
background: #0a0b0b;
background-image: url(http://thewebsitehere.com/wp-content/uploads/insideTopBackgroundDoubleSize.webp);
background-size: cover;
background-attachment: fixed;
margin-top: 118px;
}

@media (max-width: 1023px){
main.insidePage{
margin-top: 106px;
}
}

@media (max-width: 450px){
main.insidePage{
margin-top: 93px;
}
}

.insidePage h1{
color: #328dcb;
font-family: 'Magistral', sans-serif;
font-size: 40px;
}
.insidePage h1.noPaddingBottom{
padding-bottom: 0px;
}
.insidePage h1.white{
color: white;
}
.insidePage h2{
color: white;
font-family: 'Magistral', sans-serif;
font-size: 27px;
}
.insidePage h2.noPaddingTop{
padding-top: 0px;
line-height: 23px;
}
.insidePage h2.noPaddingBottom{
padding-bottom: 0px;
}
.insidePage h3.noPaddingTop{
padding-top: 0px;
}
.magistralFont{
font-family: 'Magistral', sans-serif;
}
.insidePage .displayFlex.specialHeadingWrapper h3, .insidePage .displayFlex.specialHeadingWrapper h2{
color: #328dcb;
text-transform: uppercase;
font-family: 'Magistral', sans-serif;
font-size: 22px;
border-top: 1px solid #0b6094;
border-right: 1px solid #0b6094;
border-top-right-radius: 10px;
display: inline-block;
padding-right: 20px;
flex-shrink: 0;
}
.insidePage .displayFlex.specialHeadingWrapper div{
border-bottom: 1px solid #0b6094;
width: 45%;
border-image: linear-gradient(45deg, #0b6094, transparent) 1;
}

@media (max-width: 767px){
.insidePage .displayFlex.specialHeadingWrapper h3{
flex-shrink: unset;
}
.insidePage .displayFlex.specialHeadingWrapper div{
display: none;
}
}

.byLineBorder{
border-top: 1px solid white;
border-image: linear-gradient(90deg, white, transparent)11;
}
.starBackground{
background-image: url('http://thewebsitehere.com/wp-content/uploads/insideTopBackgroundDoubleSize.webp');
background-size: cover;
background-attachment: fixed;
}

/*INSIDE PAGES > general styles end*/

/*INSIDE PAGES > What We Do > sectors served page styles begin*/

.displayFlex.sectorsMenu{
padding-top: 25px;
}
.displayFlex.sectorsMenu .flexItem{
flex: 1;
border: 1px solid #116ea9;
border-radius: 7px;
}
.displayFlex.sectorsMenu .buttonWrapper.flexItem a{
width: 100%;
box-sizing: border-box;
text-align: center;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
max-width: 400px;
margin-top: 0px;
}
.displayFlex.sectorsMenu .buttonWrapper a:hover:before{
border-top-left-radius: 7px;
border-top-right-radius: 7px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.displayFlex.sectorsMenu .buttonWrapper.flexItem img{
display:block;
min-height: 341px;
width: auto;
border-radius: 7px;
}

@media (max-width: 1135px){
.displayFlex.sectorsMenu .flexItem.buttonWrapper a{
font-size: 16px;
padding: 7px 18px 7px 18px;
}
}


@media (max-width: 1023px){
.displayFlex.sectorsMenu{
flex-direction: column;
text-align: center;
}
}

#commercial, #research, #government{
margin-top: -75px;
padding-top: 75px;
}
.displayFlex.selectMissions.sectors > .flexItem{
flex-basis: 360px;
}

.sectorDivider{
border-top: 2px solid white;
border-image: linear-gradient(90deg, transparent, white, transparent)11;
margin: 100px 0 50px 0;
}
.buttonWrapper.allMissions{
flex-basis: 100%;
text-align: center;
}

/*INSIDE PAGES > What We Do > sectors served page styles end*/

/*INSIDE PAGES > Satellite Platforms > Overview  page styles begin*/

@media (max-width: 1024px){
.wp-block-columns.breakpoint1024px{
flex-wrap: wrap !important;
}
.wp-block-columns.breakpoint1024px .is-layout-flow.wp-block-column{
flex-basis: unset!important
}
.wp-block-columns.breakpoint1024px .is-layout-flow.wp-block-column.centerImageAfterBreakpoint{
margin: 0 auto 30px auto;
}
}

@media (max-width: 939px){
table.satellitePlatforms{
display: none;
}
}

@media (max-width: 781px){
.buttonWrapper.forSatellitePlatforms{
text-align: center !important;
padding-top: 0px !important;
}
}

table.satellitePlatforms{
line-height: normal;
font-size: 16px;
border-collapse: collapse;
}
table.satellitePlatforms tr:nth-of-type(odd){
background: #191919;
}
table.satellitePlatforms tr.specialBackground{
background: linear-gradient(90deg, transparent -10%, gray 50%, transparent 121%);
background-repeat: no-repeat;
}
table.satellitePlatforms td, table.satellitePlatforms th{
text-align: center;
padding: 15px 10px;
border: 1px solid #413f3f;
}
table.satellitePlatforms th{
font-family: 'Magistral', sans-serif;
font-size: 18px;
}
table.satellitePlatforms th.special{
text-transform: uppercase;
font-size: smaller;
font-family: 'Open Sans', sans-serif;
}

@media (min-width: 940px){
.satellitePlatformsForMobile{
display: none;
}
}

.satellitePlatformsForMobile {
gap: 30px;
}
.satellitePlatformsForMobile > .flexItem{
flex-basis: 350px;
border: 1px solid #116fa9;
border-top: none;
border-radius: 5px;
}
.satellitePlatformsForMobile > .flexItem .platformName{
text-align: center;
background: linear-gradient(90deg, transparent -10%, gray 50%, transparent 121%);
font-family: 'Magistral', sans-serif;
padding: 10px 5px;
}
.satellitePlatformsForMobile > .flexItem .platformDescription .spaceType{
text-align: center;
padding: 5px;
}
.satellitePlatformsForMobile .flexItem .displayFlex.platformTextWrapper{
padding: 0 15px;
}
.satellitePlatformsForMobile .flexItem .displayFlex.platformTextWrapper .flexItem{
flex-basis: 50%;
font-size: 16px;
padding: 5px 0;
border-bottom: 1px solid #454444;
}

/*INSIDE PAGES > Satellite Platforms > Overview page styles end*/

/*INSIDE PAGES > Satellite Platforms >Nanosatellites, MicroSatellites and Small Satellites pages styles begin*/

.satellitePlatformsBackground{
background-image: url('http://thewebsitehere.com/wp-content/uploads/satellitePlatformsBackground.webp');
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
.satellitePlatformsBackground .fixedWidth{
max-width: 1240px;
}
.satellitePlatformsBackground h3{
font-size: 20px;
}
.displayFlex.upperDescription{
gap: 50px;
}
.displayFlex.upperDescription .flexItem.text{
flex: 1.6;
}
.displayFlex.upperDescription .flexItem.images{
flex: 1;
text-align: center;
}

@media (max-width: 769px){
.displayFlex.upperDescription{
flex-direction: column;
}
}

.displayFlex.selectMissions{
background: #191919;
border-radius: 7px;
gap: 30px;
padding: 30px;
box-shadow: 0px 0px 14px 3px #8cc9f1;
}

@media (max-width: 1376px){
.displayFlex.selectMissions{
justify-content: space-around;
}
}

.displayFlex.selectMissions > .flexItem{
flex-basis: 373px;
box-sizing: border-box;
box-shadow:  #116da6 0px 0px 7px 2px;
padding: 10px 15px 10px 15px;
}
.displayFlex.selectMissions > .flexItem h4{
flex-basis: 100%;
color: #116da6;
}
.displayFlex.selectMissions .flexItem.displayFlex .subFlexItem.image img{
max-width: 165px;
}

@media (max-width: 600px){
.displayFlex.selectMissions .flexItem.displayFlex .subFlexItem.image img{
max-width: 100px;
}
}

.displayFlex.selectMissions .flexItem.displayFlex .subFlexItem.text{
flex: 1;
padding-left: 15px;
box-sizing: border-box;
line-height: normal;
font-size: 16px;
}
.displayFlex.selectMissions .flexItem.displayFlex .subFlexItem.text .buttonWrapper a{
font-size: 16px;
padding: 7px 4px 7px 4px;
}

@media (max-width: 359px){
.displayFlex.selectMissions .flexItem.displayFlex .subFlexItem{
flex-basis: 100%;
}
.displayFlex.selectMissions .flexItem.displayFlex .subFlexItem.text{
padding-left: unset;
}
}

/*INSIDE PAGES > Satellite Platforms >Nanosatellites, MicroSatellites and Small Satellites pages styles end*/

/*INSIDE PAGES > Flex Production page styles begin*/

.earthWithGradientWrapper{
background-image: url('http://thewebsitehere.com/wp-content/uploads/earthWithGradient.webp');
background-position: center;
background-size: cover;
padding: 11.2% 0;
}
.earthWithGradientWrapper ul{
list-style-type: circle;
font-size: 25px;
line-height: 44px;
}

@media (Max-width: 1100px){
.earthWithGradientWrapper ul{
font-size: 16px;
}
}

@media (max-width: 725px){
.earthWithGradientWrapper ul{
line-height: 25px;
background: #000000ba;
padding: 2% 2% 2% 39px;
}
.earthWithGradientWrapper{
padding: 39% 0;
margin: 0 -6%;
}
}

/*INSIDE PAGES > flex production page styles end*/

/*INSIDE PAGES > ABOUT > Management Team styles begin*/

.gradientDividerTeam{
border-top: 1px solid white;
border-image: linear-gradient(90deg, transparent, white, transparent)11;
width: 100%;
padding-top: 40px;
}

/*INSIDE PAGES > ABOUT > Management Team styles end*/

/*INSIDE PAGES > ABOUT > Mission Statement page styles begin*/

.displayFlex.missionStatementWrapper{
background: linear-gradient(90deg,transparent, #0e6ea9, transparent);
column-gap: 30px;
padding: 26px;
}
.displayFlex.missionStatementWrapper .flexItem{
flex: 1;
}

@media (max-width: 1023px){
.displayFlex.missionStatementWrapper{
flex-direction: column;
}
}

/*INSIDE PAGES > ABOUT > Mission Statement page styles end*/

/*INSIDE PAGES > ABOUT > History page styles begin*/

.gradientDivider{
width: 40%;
border-top: 1px solid white;
border-image: linear-gradient(45deg, transparent, white, transparent) 11;
margin: auto;
padding-bottom: 40px;
}
.noTopSpace{
padding-top: 0px;
margin-top: -16px;
}

/*INSIDE PAGES > ABOUT > History page styles end*/

/*INSIDE PAGES > ABOUT > Graduate Studies page style begin*/

.displayFlex.partners a{
flex-basis: 250px;
padding: 20px 0px;
text-align: center;
}
.displayFlex.partners img{
max-height: 100px;
width: auto;
}

@media (max-width: 560px){
.displayFlex.partners{
justify-content: center;
}
}

/*INSIDE PAGES > ABOUT > Graduate Studies page style end*/

/*INSIDE PAGE > Mission page styles begin*/

.customSolutions{
font-size: larger;
font-family: 'Magistral', sans-serif;
font-style: italic;
}

.displayFlex.missions{
gap: 40px;
}
.displayFlex.missions p{
display: none;
/*remove <p>&nbsp;</p> that classic editor insists on putting in when switching into visual mode*/
}
.displayFlex.missions .flexItem.displayFlex.flexDirectionColumn {
flex-basis: 248px;
background: #191919;
padding: 10px;
border-radius: 4px;
}
.displayFlex.missions .flexItem.displayFlex.flexDirectionColumn .displayFlex h2.subFlexItem{
font-size: 18px;
padding: 0 0 0 5px;
}
.displayFlex.missions .flexItem.displayFlex.flexDirectionColumn .flexItemColumn.missionText{
font-size: 16px;
line-height: 22px;
padding-top: 5px;
}
table.heritage{
line-height: normal;
font-size: 16px;
border-collapse: collapse;
width: 100%;
}
table.heritage tr:nth-of-type(even) td{
background: #191919;
}
table.heritage tr.specialBackground{
background: linear-gradient(90deg, transparent -10%, #116ea9 50%, transparent 121%);
background-repeat: no-repeat;
}
table.heritage td, table.heritage th{
text-align: center;
padding: 15px 10px;
border: 1px solid #413f3f;
}
table.heritage th{
font-family: 'Magistral', sans-serif;
font-size: 18px;
}

@media (max-width: 945px) {
table.heritage th{
font-size: 16px;
}
}

@media (max-width: 500px){
table.heritage th{
font-size: 14px;
padding-left: 0px;
padding-right: 0px;
}
table.heritage td{
padding-left: 0px;
padding-right: 0px;
}
table.heritage{
font-size: 14px;
}
}

@media (max-width: 359px){
table.heritage th{
font-size: 12px;
}
table.heritage{
font-size: 12px;
}
}

/*INSIDE PAGE > Missions page styles end*/

/*INSIDE PAGE STYLES END*/

/*BLOG STYLES BEGIN*/

.blogWrapper.mainPage{
margin-top: 150px;
}
.blogWrapper.mainPage h1{
font-family: 'Magistral', sans-serif;
}
.blogWrapper.mainPage article{
margin-bottom: 50px;
}
.displayFlex.blogWrapper main.flexItem h1{
font-size: 30px;
}
.displayFlex.blogWrapper main.flexItem{
flex: 1;
}
.moretag{
display: none !important;
/*corrects a db anaomlay on one blog article excerpt on main articles page "Join SFL at the Virtual SmallSat 2020"*/
}
.displayFlex.blogWrapper main.flexItem article.blogFixedWidth h2{
padding-top: 0px;
}
.displayFlex.blogWrapper main.flexItem img{
max-width: 100%;
height: auto;
display: block;
}
.displayFlex.blogWrapper main.flexItem img.alignright, .displayFlex.blogWrapper main.flexItem img.alignleft{
/*remove align left and right float styles for blog excerpts as it screws up the layout*/
float: none;
margin: auto;
margin-bottom: 30px;
} 

@media (max-width: 1023px){
.displayFlex.blogWrapper{
flex-direction: column;
}
.displayFlex.blogWrapper main.flexItem{
padding-right: 0px;
}
}

.displayFlex.mainBlog .flexItem.excerptTextContent{
flex: 1;
background: #141414;
padding: 18px;
border-radius: 7px;
border: #3cb5ff solid 1px;
box-shadow: 0px 1px 7px 1px #8ccef6;
}
.displayFlex.mainBlog .flexItem.excerptTextContent h2{
font-size: 28px;
padding-top: 0px;
}
.displayFlex.sidebarRecentPosts{
background: #000000de;
}
h2.sideBarLatestArticles {
font-family: 'Magistral', sans-serif;
}

/*BLOG STYLES > styles for pagination at bottom of posts main page begin*/

nav.pagination{
text-align: center;
padding: 30px;
font-size: 22px;
}
nav.pagination .page-numbers{
padding: 3px 10px 3px 10px;
border: 1px solid #959393;
border-radius: 4px;
display: inline-block;
min-width: 20px;
}
nav.pagination .page-numbers.current{
background: #a7a6a6;
color: white;
}

/*BLOG STYLES > styles for pagination at bottom of posts main page end*/

/*BLOG STYLES > styles for search form on main blog pages begin*/

form.searchInCategory{
background: unset;
border: unset;
padding-bottom: unset;
max-width: unset;
margin-bottom: 30px;
}
form.searchInCategory input[type="text"].flexItem{
max-width: 44%;
height: 30px;
background: black;
color: whitesmoke;
}
form.searchInCategory input[type="submit"].flexItem{
width: 20%;
margin: unset;
background: #106ca6;
height: 30px;
padding: 0px;
font-size: 16px;
border: 1px white solid;
transition: .4s background ease-in-out;
}
form.searchInCategory input[type="submit"].flexItem:hover{
background: grey;
}

@media (max-width: 600px){
form.searchInCategory input[type="text"].flexItem{
Max-width: 60%;
}
form.searchInCategory input[type="submit"].flexItem{
width: 40%;
}
}


/*BLOG STYLES > styles for search form on main blog pages end*/

/*BLOG STYLES > styles for previous/next post navigation NOT pagination begin*/

.previousPost, .nextPost{
display: inline-flex;
border: 2px solid #0f7ec3;
padding: 3px;
border-radius: 50%;
text-align: center;
width: 30px;
height: 30px;
}
.previousPost a, .nextPost a{
position: relative;
font-family: 'Open Sans', sans-serif;
}
.previousPost a{
left: 7px;
}
.nextPost a{
left: 4px;
}

/*BLOG STYLES > styles for previous/next post navigation NOT pagination end*/

/*BLOG STYLES > sidebar styles begin*/

.displayFlex.blogWrapper .flexItem.sidebar{
flex: 0 1 313px;
}
.displayFlex.sidebarRecentPosts{
margin-bottom: 25px;
}
.displayFlex.sidebarRecentPosts .flexItem.sidebarRecentPostsThumbnail img{
min-width: 150px;
}
.displayFlex.sidebarRecentPosts .flexItem.sidebarRecentPostsTextContent{
padding-left: 20px;
font-size: 16px;
line-height: 20px;
}

/*BLOG STYLES > sidebar styles end*/

.archive h2{
/*fixes picture floating issues in posts*/
clear: both;
padding-top: 50px;
}

/* BLOG STYLES > single.php styles begin*/

.displayFlex.postNavigationWrapper{
margin-top: 150px;
font-family: 'Magistral', san-serif;
font-size: 35px;
color: #0f7ec3;
}
.displayFlex.postNavigation{
font-family: 'Magistral', san-serif;
font-size: 35px;
color: #0f7ec3;
}

@media (max-width: 767px){
.displayFlex.postNavigationWrapper{
flex-direction: column;
}
.displayFlex.postNavigation{
margin-top: 25px;
}
}

.displayFlex.blogWrapper main.flexItem .singleBlogTitle{
font-family: 'Magistral', sans-serif;
}
body.single{
background-image: url('http://thewebsitehere.com/wp-content/uploads/starBackgroundDoubleSize.webp');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
body.single .paddingTopBottom.withGradient{
background: rgb(17,109,167);
background: linear-gradient(180deg, rgba(17,109,167,1) 0%, transparent 20%, transparent 80%, rgba(17,109,167,1) 100%);
}
/* BLOG STYLES > single.php styles end*/

/*BLOG STYLES END*/

/*FOOTER STYLES BEGIN*/
.footer {
background-image: url(http://thewebsitehere.com/wp-content/uploads/lowerStarBackgroundDoubleSize.webp);
background-size: cover;
color: white;
background-attachment: fixed;
}
.negativeMarginForTopFooterImage{
margin-top: calc(-7px - 11vw);
}
.footerImage{
width: 100%;
display: block;
}
.footer .displayFlex.footerLogo {
column-gap: 30px;
}
.footer .displayFlex.footerLogo .flexItem.footerLogoWords{
color: white;
font-size: 30px;
width: 196px;
line-height: normal;
}

@media (max-width: 479px){
.footer .displayFlex.footerLogo .flexItem.footerLogoWords{
font-size: 6vw;
}
}

.footer .displayFlex.footerLogo .flexItem.footerLogoWords span.flight{
color: #b1b3b6;
}
.footer .displayFlex.footerLogo .flexItem.footerLogoWords span.laboratory{
color: #d92927;
}
.footer .fixedWidth.footerContact{
text-align: center;
background: linear-gradient(90deg, transparent, #116faa, transparent);
margin-top: 50px;
line-height: 144%;
padding: 30px 0;
position: relative; /*so shadow of earth image doesn't appear overtop*/
}
.footer .footerContact h3{
font-family: 'Magistral', sans-serif;
font-size: 25px;
display: inline-block;
border-bottom: 1px solid white;
padding-bottom: 10px;
padding-top: 0px;
border-image: linear-gradient(82deg, #0988d4, white, #0988d4) 1;
margin-bottom: 12px;
}
.footer .footerContact a{
color: white;
transition: color .4s ease-in-out;
}
.footer .footerContact a:hover{
color: #4cb6f6;
}
.footer .footerContact a.address{
display: inline-block;
margin: 20px 0;
}
.footer .footerContact .footerSocial svg{
width: 30px;
height: 30px;
fill: white;
margin-right: 5px;
vertical-align: -9px;
transition: fill .4s ease-in-out;
}
.footer .footerContact .footerSocial svg:hover{
fill: #4cb6f6
}
.footer .footerContact .displayFlex.footerContactInfo{
padding-bottom: 20px;
}
.footer .footerContact .displayFlex.footerContactInfo .flexItem span{
padding: 0 5px;
}

@media (max-width: 773px){
.footer .footerContact .displayFlex.footerContactInfo .flexItem span.three{
visibility: hidden;
}
}

@media (max-width: 523px){
.footer .footerContact .displayFlex.footerContactInfo .flexItem span{
visibility: hidden;
}
}

.footer .displayFlex.copywriteAndLinks{
padding-top: 30px;
}

@media (max-width: 900px){
.footer .displayFlex.copywriteAndLinks{
flex-direction: column;
}
}

.footer .displayFlex.copywriteAndLinks .copyright{
font-size: 12px;
color: white;
padding: 0 20px;
text-align: center;
line-height: normal;
}

/*FOOTER STYLES END*/