/* Title: CSS for The Flyover State Template Author: https://agentartifact.com */ /* =Reset default browser CSS. -------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } img { border: 0px; } li { list-style-type: none; } button.forward-tab, button.reverse-tab, button.forward-landing, button.reverse-landing, button.forward-tab-entry, button.reverse-tab-entry, button.forward-landing-entry, button.reverse-landing-entry { clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); padding: 0 !important;border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; position: absolute; outline: none !important; } :focus { outline: 0; } :root { /* Primary Colors */ --flyRed: #e63535; --flyRedLight: #eb6565; --flyRedDark: #cc1a1a; --link: #1966ff; --caFlyBlue: #215c82; --caFlyBlueLight: #2e80b5; --caFlyBlueDark: #14384f; --caFlyGold: #eca50a; --caFlyGoldLight: #ffbf33; --caFlyGoldDark: #b98108; --caFlyGoldDark2: #9f6f07; --caFlyBrown: #574628; --caFlyBrownLight: #8a6f3f; --caFlyBrownDark: #241d11; /* Tertiary */ --white: #ffffff; --gray1: #f8f9fa; --gray2: #f6f7f8; --gray3: #eeeff0; --gray4: #e0e5ec; --gray5: #d7d7de; --gray6: #c7c7d1; --gray7: #b6b6c4; --gray8: #a7a7b8; --gray9: #9898ab; --gray10: #89899e; --gray11: #7b7b91; --gray12: #707085; --gray13: #646478; --gray14: #58586b; --gray15: #4c4c5e; --gray16: #454253; --gray17: #383645; --gray18: #2d2b38; --gray19: #23212b; --gray20: #18171f; --gray21: #0e0d12; /* Other Neutrals */ --black: #000000; --twhite: var(--gray1); --twhite2: var(--gray2); --twhite3: var(--gray3); --whiteTranslucent: rgba(255,255,255,.7); --whiteTranslucent2: rgba(255,255,255,.9); /* Most Used Colors */ --primaryTextColor: var(--caFlyBrownDark); /* Used for regular text and headlines */ --secondaryTextColor: var(--caFlyBrownLight); /* Used on all sub headlines */ --primaryColor: var(--caFlyBlue); /* Primary Red */ --primaryColorLight: var(--caFlyBlueLight); --primaryColorDark: var(--caFlyBlueDark); --primaryColorDark2: var(--caFlyBlueDark2); --secondaryColor: var(--caFlyGold); /* Primary dark background and navy */ --secondaryColorLight: var(--caFlyGoldLight); --secondaryColorDark: var(--caFlyGoldDark); --secondaryColorDark2: var(--caFlyGoldDark2); /* Shadows */ --pageShadow: 0 0 60px rgba(0,0,0,.5); --primaryBoxShadow: 0 0 30px rgba(0,0,0,.15); --secondaryBoxShadow: 0 0 30px rgba(0,0,0,.1); --cardBoxShadow: 0 0 20px rgba(0,0,0,.075); --smallBoxShadow: 0 0 20px rgba(0,0,0,.15); --avatarBoxShadow: 0 0 15px rgba(0,0,0,.15); /* Fonts */ --primaryFont: Inter, Helvetica, Arial, Sans-serif; --secondaryFont: Newsreader, Georgia, 'Times New Roman', Serif; --primaryMonospaceFont: 'Source Code Pro', 'Courier New', Courier, monospace; --blockquoteFont: Georgia, Sans-serif; } /* ================== EVERYTHING is BOX-SIZED - position relative ================== */ * { position: relative; box-sizing: border-box; -webkit-text-size-adjust: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; } /* ================== EVERYTHING is BOX-SIZED - position relative ================== */ * { -webkit-text-size-adjust: none; } /* Disable iOS gettin' in muh business */ html { height: 100%; scroll-behavior: smooth; } body { height: 100%; font-size: 16px; font-family: var(--primaryFont); color: var(--primaryTextColor); line-height: 1.5em; margin: 0; background: var(--white); } body.noscroll { overflow-y: hidden; } .clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; } /* On the rare occasion you need to use a float */ .clearright { clear: right; } /* Titles, Text Sizing, Colors, Links, Buttons ============================================== */ /* Headings & Text */ h1, h2, h3, h4, h5, h6, .huge, .xxlarge, .xlarge, .large, .medium, .h1, .h2, .h3, .h4, .h5, .h6 { font-size: 16px; -webkit-font-smoothing: antialiased; line-height: 1.25em; font-family: var(--primaryFont); letter-spacing: -.03em; } h1, .huge, .h1 { font-size: 32px; font-weight: bold; } h2, .xxlarge, .h2 { font-size: 24px; } h3, .xlarge, .h3 { font-size: 22px; } h4, .large, .h4 { font-size: 20px; } h5, .medium , .h5 { font-size: 18px; } h6, .small, .h6 { font-size: 16px; letter-spacing: 0px; } /* Weights, Italics, Underlines, Strikes */ strong, .strong, .weight700 { font-weight: bold; } .lightweight, .weight300 { font-weight: 300; } .normalweight, .weight400 { font-weight: normal; } .midweight, .semiweight, .weight600 { font-weight: 600; } .heavyweight, .weight800 { font-weight: 800; } .blackweight, .weight900 { font-weight: 900; } em, .italic { font-style: italic; } .stritalic { font-weight: bold; font-style: italic; } .underline { text-decoration: underline; } .strike { text-decoration: line-through; } /* Character Spacing & Casing */ tt { font-family: var(--primaryMonospaceFont); } .tight { letter-spacing: -.03em; } .tight2 { letter-spacing: -.06em; } .upper { text-transform: uppercase; } .lower { text-transform: none; } /* Text Alignment */ .center, .centertext { text-align: center; } .indent { margin-left: 30px; margin-bottom: 30px; } /* Basic Paragraph Rules */ p { line-height: 1.7em; margin-bottom: 30px; } p:last-child { margin-bottom: 0; padding-bottom: 0; } p.nobot, p.mclear { margin-bottom: 0; } /* Block Quote */ blockquote { border-left: 10px solid var(--primaryColor); padding-left: 40px; margin-bottom: 30px; font-family: var(--blockquoteFont); font-style: italic; } blockquote p:last-child { padding-bottom: 0; } cite { font-size: 14px; font-style: normal; } /* Color Palette */ .white { color: var(--white); } .whiteb { background: var(--white); } .black { color: var(--black); } .blackb { background: var(--black); } .twhite { color: var(--twhite); } /* Not Quite White */ .twhite2 { color: var(--twhite2); } /* Not Quite White 2 */ .twhite3 { color: var(--twhite3); } /* Definitely not White, but still fairly light */ .twhitebg { background-color: var(--twhite); } .twhitebg2 { background-color: var(--twhite2); } .red1, .bred1 { color: var(--flyRed); } /* Red */ .red2, .bred2 { color: var(--flyRedLight); } /* Red Tint */ .red3, .bred3 { color: var(--flyRedDark); } /* Red Hover */ .gray1 { color: var(--gray1); } .gray2 { color: var(--gray2); } .gray3 { color: var(--gray3); } .gray4 { color: var(--gray4); } .gray5 { color: var(--gray5); } .gray6 { color: var(--gray6); } .gray7 { color: var(--gray7); } .gray8 { color: var(--gray8); } .gray9 { color: var(--gray9); } .gray10 { color: var(--gray10); } .gray11 { color: var(--gray11); } .gray12 { color: var(--gray12); } .gray13 { color: var(--gray13); } .gray14 { color: var(--gray14); } .gray15 { color: var(--gray15); } .gray16 { color: var(--gray16); } .gray17 { color: var(--gray17); } .gray18 { color: var(--gray18); } .gray19 { color: var(--gray19); } .gray20 { color: var(--gray20); } .gray21 { color: var(--gray21); } /* Links */ a, a:visited { color: var(--link); text-decoration: none; cursor: pointer; transition:color .15s linear; } a:hover { color: var(--gray10); transition:color .15s linear; } .iconright { padding-right: 27px; position: relative; } .iconright i { position: absolute; top: 1px; right: 0; } .iconleft { padding-left: 27px; position: relative; } .iconleft i { position: absolute; top: 1px; left: 0; } /* Displays */ .hide, .hidden { display: none; } .eclipse { height: 0; overflow: hidden; padding: 0; margin: 0; } .hidestrong { position: absolute !important; overflow: hidden !important; display: inline !important; height: 1px !important; width: 1px !important; z-index: -1000 !important; padding: 0 !important; visibility: hidden !important; opacity: .01 !important; } .req, .required, .wpforms-required-label { color: var(--primaryColorDark); font-weight: bold; } .req:after, .required:after { content: " * "; } /* Buttons */ /* The 'button' HTML element is reset to look like text in case I need a button that looks like a normal link */ button { padding: 0; margin: 0; border: 0; line-height: inherit; background: transparent; } /* Standard Button Dimensions - requires the class '.button', or be a Submit button */ .button, a.button, button[type=submit], input[type=submit], input[type=submit].wpforms-submit { font-family: var(--primaryFont); padding: 8px 19px; border: 1px solid transparent; border-radius: 3px; font-size: 14px; line-height: 16px; text-align: center; overflow: hidden; margin: 0px; color: var(--primaryTextColor); font-weight: bold; display: inline-block; background: var(--secondaryColor); transition: .15s linear all; } .button:hover, a.button:hover, button[type=submit]:hover, input[type=submit]:hover, input[type=submit].wpforms-submit:hover { cursor: pointer; background: var(--secondaryColorLight); transition: .15s linear all; } /* Red Button Override */ .button.red, a.button.red, button[type=submit].red, input[type=submit].red, input[type=submit].wpforms-submit.red { background: var(--primaryColor); color: #fff; } .button.red:hover, a.button.red:hover, button[type=submit].red:hover, input[type=submit].red:hover, input[type=submit].wpforms-submit.red:hover { background: var(--primaryColorDark); } /* Disabled Button Override */ .button.disabled, a.button.disabled, button[type=submit].disabled, input[type=submit].disabled, input[type=submit].wpforms-submit.disabled { opacity: .5; filter: grayscale(100%); pointer-events: none; } /* Medium Sized Button */ .button.medium, a.button.medium, button[type=submit].medium, input[type=submit].medium, input[type=submit].wpforms-submit.medium { font-size: 16px; padding: 14px 29px; } /* Large Sized Button */ .button.large, a.button.large, button[type=submit].large, input[type=submit].large, input[type=submit].wpforms-submit.large { font-size: 20px; padding: 24px 44px; } /* Rounded Buttons */ .button.rounded, a.button.rounded, button[type=submit].rounded, input[type=submit].rounded, input[type=submit].wpforms-submit.rounded { border-radius: 17px; } .button.rounded.medium, a.button.rounded.medium, button[type=submit].rounded.medium, input[type=submit].rounded.medium, input[type=submit].wpforms-submit.rounded.medium { border-radius: 24px; } .button.rounded.large, a.button.rounded.large, button[type=submit].rounded.large, input[type=submit].rounded.large, input[type=submit].wpforms-submit.rounded.large { border-radius: 33px; } /* Form Basics */ textarea { font-size: 14px; font-family: var(--primaryFont); } input[type=text], input[type=email], textarea { -webkit-appearance: none; } /* Rmemoves iOS Styling */ ::-webkit-input-placeholder { color: var(--gray10); } ::-moz-placeholder { color: var(--gray10); } /* firefox 19+ */ :-ms-input-placeholder { color: var(--gray10); } /* ie */ input:-moz-placeholder { color: var(--gray10); } label:hover { cursor: pointer; font-family: var(--primaryFont); } input[type=text], input[type=search], input[type=email], select, textarea, input#email, input#url, input[type=url] { color: var(--primaryTextColor); width: 100%; line-height: 20px; border-radius: 5px; padding: 6px 12px 6px 12px; background: var(--gray1); font-size: 16px; border: 1px solid transparent; font-weight: 600; font-family: var(--primaryFont); } textarea { height: auto; border-radius: 2px; -webkit-overflow-scrolling:touch; padding: 15px; font-weight: normal; } ::-webkit-search-cancel-button { display: none; } /* Removes the clear / cancel / x "button" in the search field */ .wpforms-confirmation-container { width: 100%; padding: 15px; border: 1px solid var(--gray2); background: var(--gray1); margin-bottom: 30px; text-align: center; font-weight: 600; font-size: 16px; } /* WP Forms */ .wpforms-field { width: 100%; display: flex; margin-bottom: 20px; flex-wrap: wrap; } .wpforms-field input[type=text], .wpforms-field input[type=search], .wpforms-field input[type=email], .wpforms-field input#email, .wpforms-field input#url, .wpforms-field textarea, .wpforms-field select, .wpforms-field input[type=url] { padding: 15px 20px; background-color: var(--white); border: 1px solid var(--gray4); box-shadow: 10px 10px 20px rgba(0,0,0,.05); align-self: start; max-width: 100%; color: var(--primaryTextColor); } .wpforms-field label { width: 35%; line-height: 20px; padding: 15px 0; font-weight: bold; cursor: pointer; } .subscribe-wrap .wpforms-field input[type=text], .subscribe-wrap .wpforms-field input[type=search], .subscribe-wrap .wpforms-field input[type=email], .subscribe-wrap .wpforms-field input#email, .subscribe-wrap .wpforms-field input#url, .subscribe-wrap .wpforms-field textarea, .subscribe-wrap .wpforms-field select, .subscribe-wrap .wpforms-field input[type=url] { background-color: var(--white); border-width: 1px; border-style: solid; } .wpforms-field.wpforms-field-textarea { display: block; } .wpforms-field.wpforms-field-textarea label { width: 100%; display: block; padding-bottom: 15px; } .wpforms-field textarea { min-height: 160px; border-radius: 5px; width: 100%; min-width: 100%; padding: 20px; font-weight: normal; } .wpforms-field.wpforms-has-error { display: block; } .wpforms-field label.wpforms-error { font-weight: normal; font-size: 14px; color: var(--primaryColor); display: block; width: 100%; } .wpforms-field .iti { max-width: 65%; } .wpforms-field input.wpforms-smart-phone-field { padding: 15px 20px; background: var(--white); border: 1px solid var(--twhite3); box-shadow: 10px 10px 20px rgba(0,0,0,.05); align-self: start; font-size: 14px; font-family: var(--primaryFont); } .wpforms-field input.phone { max-width: 200px; align-self: start; max-width: 65%; } .wpforms-field input[type=url] { width: 100%; } .wpforms-field-description { width: 100%; font-size: 14px; line-height: 1.3em; display: block; padding-left: 35%; margin-top: 5px; } .wpforms-field-textarea .wpforms-field-description { padding-left: 0; } .wpforms-field-address { display: block; } .wpforms-field-address div { display: flex; flex-wrap: wrap; width: 100%; margin-top: 10px; flex-direction: row-reverse; } .wpforms-field-address div.wpforms-field-medium { flex-direction: row; } .wpforms-field-address div.wpforms-one-half { width: 50%; flex-direction: row-reverse; } .wpforms-field-address div.wpforms-field-medium div.wpforms-one-half:first-child { padding-right: 15px; } .wpforms-field-address div.wpforms-field-medium div.wpforms-one-half:nth-child(2) { padding-left: 15px; } div.wpforms-container div.wpforms-uploader { width: 65%; } .wpforms-recaptcha-container { margin-bottom: 20px; } .wpforms-field label.wpforms-label-hide { position: absolute; top: -99999px; z-index: -999999; height: 0; overflow: hidden; } #wpforms-error-noscript { display: none; } /* Lightboxes */ .blackcover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; background: rgba(0,0,0,.8); opacity: 0; visibility: hidden; pointer-events: none; transition: .15s linear all; } .blackcover.active { opacity: 1; visibility: visible; pointer-events: all; transition: .15s linear all; } .lightbox { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 400px; max-width: 100%; height: 500px; max-height: 100%; margin: auto; z-index: 110; padding: 30px; background-color: var(--white); border-radius: 5px; box-shadow: var(--primaryBoxShadow); opacity: 0; visibility: hidden; pointer-events: none; transition: .15s linear all; } .lightbox.active { visibility: visible; opacity: 1; pointer-events: all; transition: .15s linear all; } button.close-button.close-lightbox { position: absolute; top: 20px; right: 20px; cursor: pointer; transition: .15s linear all; background-color: rgba(0,0,0,.5); } button.close-button.close-lightbox:hover { opacity: .7; transition: .15s linear all; } button.close-button.close-lightbox svg { width: 30px; height: 30px; } .lightbox-title { font-weight: bold; } .lightbox button.close-button { color: var(--primaryTextColor); pointer-events: all; top: 0; right: 0; z-index: 10; } .lightbox button.close-button:hover { opacity: .5; } .lightbox.image { width: auto; height: auto; top: 30px; right: 30px; bottom: 30px; left: 30px; background-color: transparent; padding: 0; pointer-events: none; } .lightbox.image button.close-button { color: var(--white); } .lightbox-image-wrap { overflow: hidden; margin: auto; max-width: 100%; max-height: 100%; pointer-events: all; top: 0; right: 0; bottom: 0; left: 0; position: absolute; } .lightbox-image-wrap img { object-fit: cover; cursor: zoom-in; transition: transform 0.3s ease; height: 100%; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; max-width: 100%; } .lightbox-image-wrap.zoomed { overflow: auto; } .lightbox-image-wrap.zoomed img { transform: scale(1); cursor: zoom-out; transition: transform 0.3s ease; top: auto; bottom: auto; width: 100%; height: auto; max-width: 1704px; margin: auto; } button.image-prev, button.image-next { position: absolute; z-index: 10; position: absolute; width: 40px; height: 40px; top: 0; bottom: 0; margin: auto 0; cursor: pointer; pointer-events: all; transition: .15s linear all; background-color: rgba(0,0,0,.5); } button.image-prev:hover, button.image-next:hover { opacity: .7; transition: .15s linear all; } button.image-prev img, button.image-next img { width: 40px; height: 40px; } button.image-prev { left: 0; } button.image-next { right: 0; } /* STRUCTURE ============================================== */ /* Wrappers */ #fill { width: 100%; height: 100%; margin: 0 auto; display: flex; flex-direction: column; } #container { width: 100%; flex-grow: 1; margin: 0 auto; } .bgcolor { background: #d9f9ff; background: linear-gradient(180deg, rgba(217, 249, 255, 1) 0%, rgba(255, 255, 255, 1) 100%); } /* Stripes (Sections) */ .stripe { } /* Empty Wrapper */ .stripe-inside { width: 100%; max-width: 1200px; padding-left: 30px; padding-right: 30px; margin: 0 auto; display: block; } .reading-pane { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; } .reading-pane.left { margin: 0; max-width: 100%; } .hero-pane { width: 100%; max-width: 900px; margin-left: auto; margin-right: auto; } .page-wrap { background: rgb(218,214,208);background: linear-gradient(90deg, rgba(218,214,208,1) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 75%, rgba(218,214,208,1) 100%); width: 100%; box-shadow: var(--pageShadow); border-radius: 3px; overflow: hidden; } h1.stripe-title, h2.stripe-title { font-size: 32px; line-height: 1.1em; width: 100%; color: var(--primaryColor); } h2.stripe-subtitle, h3.stripe-subtitle, h2.post-subtitle, h3.post-subtitle { color: var(--secondaryColorDark); } /* Columns */ .columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 100px; } .columns.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .columns.three { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 80px; } .columns.four { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 40px; } .columns.five { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 20px; } .columns.six { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 20px; } .column { display: flex; align-items: center; width: 100%; height: 100%; } .column-inside, .footer-column { width: 100%; } /* Reading Pane */ .reading-pane { width: 100%; max-width: 760px; margin: 0 auto; } /* Header */ header.main { transition: .15s linear all; background-color: transparent; width: 100%; } header.main .stripe-inside { display: flex; align-items: center; justify-content: space-between; height: 100%; flex-direction: column; gap: 30px; } button.hamburger { background: transparent; color: var(--primaryTextColor); position: fixed; top: 10px; text-transform: uppercase; left: 20px; cursor: pointer; margin: 0; z-index: 100; font-weight: 700; font-family: var(--primaryFont); font-size: 14px; padding: 10px 15px 8px 35px; line-height: 1em; transition: .15s linear all; border: 1px solid var(--gray4); border-radius: 5px; display: none; } button.hamburger:hover { opacity: .7; transition: .15s linear all; } button.hamburger svg { width: 18px; position: absolute; top: 7px; left: 10px; transition: .15s linear all; } body.showmobile button.hamburger svg { filter: invert(100%); transition: .15s linear all; } body.showmobile button.hamburger:hover { color: var(--white); opacity: .7; } a.logo { width: 280px; display: block; max-width: 100%; } a.logo img { width: 100%; float: left; filter: drop-shadow(0 0 30px rgba(0,0,0,.25)); } a.logo-icon { width: 50px; position: absolute; left: 0; right: 0; margin: auto; display: none; } a.logo-icon img { width: 100%; display: block; } .logo-icon-menu { display: none; width: 100%; padding: 40px; position: absolute; bottom: 0; text-align: center; } .logo-icon-menu img { filter: invert(40%) sepia(7%) saturate(50%) hue-rotate(260deg) brightness(130%) contrast(95%); opacity: .3; width: 100%; } .menuwrap { justify-content: flex-end; align-items: center; display: flex; gap: 20px; z-index: 10; } .menuwrap a { font-size: 14px; font-family: var(--primaryFont); font-weight: 600; color: var(--primaryColor); letter-spacing: -.02em; line-height: 1.1em; justify-content: center; text-align: center; } .menuwrap a:hover { color: var(--secondaryColorDark); } .menu-primary-container { height: 100%; display: inline-flex; } /* Level 1 Menus */ ul.menu { height: 100%; } ul.menu li { height: 100%; list-style-type: none; width: auto; display: block; width: auto; display: inline-flex; margin: 0 40px 0 0; } ul.menu li.hide { display: none; } ul.menu li a { line-height: 16px; color: var(--secondaryColor); width: auto; height: 100%; display: block; font-size: 14px; display: inline-flex; font-weight: 500; -webkit-font-smoothing: antialiased; transition: .15s linear all; opacity: 1; border-bottom: 2px solid transparent; border-top: 2px solid transparent; padding-bottom: 16px; padding-top: 20px; } ul.menu li a:hover { opacity: .7; transition: .15s linear all; } ul.menu li.current-menu-item > a, ul.menu li.current-menu-ancestor > a { border-bottom: 2px solid var(--primaryColor); } body.tax-subject ul.menu li.work /*, body.single-work ul.menu li.work, body.single-post ul.menu li.blog */ { border-bottom: 2px solid var(--primaryColor); } ul.menu li.mobilehome { display: none; } .button.cta { display: inline-block; } /* Content */ /* Subscribe Stripe */ .subscribe-wrap { max-width: 600px; } .stripe.subscribe .subscribe-wrap { max-width: 700px; } .subscribe-wrap .wpforms-form { display: flex; align-items: center; width: 100%; justify-content: space-between; gap: 15px; } .subscribe-wrap .wpforms-field-container { width: 100%; } .subscribe-wrap .wpforms-field-container .wpforms-field { display: block; margin: 0; } .subscribe-wrap .wpforms-field-container .wpforms-field input { max-width: 100%; margin: 0; transition: .15s linear all; } .subscribe-wrap .wpforms-field-container .wpforms-field input:focus { border: 1px solid var(--secondaryColor); transition: .15s linear all; } .subscribe-wrap .wpforms-submit-container { min-width: 150px; max-width: 150px; } .subscribe-wrap .wpforms-submit-container button { width: 100%; height: 52px; } .subscribe-wrap.home { margin: 0 auto; margin-top: 30px; } .subscribe-message { padding-right: 165px; text-align: center; margin-top: 10px; } .stripe.subscribe { background-color: var(--twhite2); } body.home .stripe.subscribe { background-color: var(--white); } .stripe.subscribe h2.stripe-title { font-size: 46px; font-weight: bold; margin-bottom: 0; color: var(--primaryColor); } .stripe.subscribe h3.stripe-subtitle { font-weight: 300; font-size: 26px; color: var(--secondaryColorDark); margin-bottom: 10px; } .columns.subscribe { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); gap: 60px; } .sticky .columns.subscribe { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .columns.subscribe .column { display: flex; align-items: center; width: 100%; } .columns.subscribe .column .column-content { width: 100%; } .stripe.subscribe .subscribe-wrap { margin-top: 15px; } body.single .stripe.subscribe.sticky { position: fixed; left: 0; right: 0; width: 100%; bottom: 0; visibility: hidden; opacity: 0; transition: .15s linear all; } body.single .stripe.subscribe.sticky .stripe-inside { padding: 30px; width: 100%; max-width: 1200px; } body.single .stripe.subscribe.sticky .stripe-inside h3.stripe-subtitle { margin-top: 0; } body.single .stripe.subscribe.sticky .columns.five.subscribe { gap: 0px; } body.single .stripe.subscribe.sticky.active { opacity: 1; visibility: visible; transition: .15s linear all; } /* Banner */ .stripe.banner h1.stripe-title { font-size: 44px; } .stripe.banner h2.stripe-subtitle { margin-top: 10px; font-size: 26px; font-weight: normal; } .stripe.banner .shortcode-wrap { } .stripe.banner .subscribe-message { margin-top: 10px; } .stripe.banner .subscribe-message-inside { display: inline-block; } /* Description */ .stripe.description { width: 100%; } .stripe.description .columns.three { gap: 60px; } .stripe.description .column { width: 100%; height: 100%; text-align: center; flex-shrink: 0; flex-direction: column; } .description .column .icon-wrap { width: 100px; display: inline-block; margin-bottom: 40px; } .description .column .icon-wrap.wide { width: 149px; } .description .column .icon-wrap img { width: 100%; } .description .column h2.stripe-title { font-weight: bold; margin-bottom: 15px; } .column-image-wrap { border-width: 0px; border-style: solid; width: 100px; height: 100px; margin: 0 auto; margin-bottom: 20px; } .column-image-wrap.wide { width: 150px; height: 100px; } .column-image-wrap img { width: 100%; float: left; } .column-image-wrap.wide img { padding-top: 20px; } .column-content-wrap h2 { margin-bottom: 15px; } /* Page */ .stripe.page-content { } #page-header { margin-bottom: 40px; text-align: center; } /* Branded Header */ .stripe.branded .columns .column { justify-content: center; } .columns.collage { margin: 0 auto; margin-top: 40px; width: 100%; max-width: 800px; grid-template-columns: 1fr; } .columns.collage .column-content img { width: 100%; } .stat-wrap { width: 100%; grid-template-columns: repeat(4, 1fr); display: grid; } .stat { width: 100%; display: flex; align-items: center; gap: 10px; flex-direction: column; } .stat-value { font-weight: 300; font-size: 40px; letter-spacing: -.03em; color: var(--white); line-height: 1em; flex-shrink: 0; text-align: center; } .stat-label { font-weight: bold; font-size: 14px; text-transform: uppercase; line-height: 1.2em; color: var(--gray4); text-align: center; } .columns.dimmed { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 80px; max-width: 800px; margin: 0 auto; margin-top: 60px; text-align: center; } .dim { color: var(--gray10); font-size: 22px; font-weight: 300; text-align: center; font-family: var(--secondaryFont); line-height: 1.1em; text-align: center;} .branded-banner { width: 100%; height: 500px; padding: 3px; background-color: var(--white); box-shadow: var(--primaryBoxShadow); margin-top: 40px; border-radius: 7px; overflow: hidden; } .branded-banner img { width: 100%; height: 100%; object-fit: cover; float: left; border-radius: 4px; overflow: hidden; } .stripe.stats { background-color: var(--flyDark); } /* Blog Index / Today's Briefing */ h1.page-title { font-size: 44px; text-align: center; margin-bottom: 40px; } .entry-header { margin-bottom: 30px; } .reading-pane { width: 100%; max-width: 700px; margin: 0 auto; } .reading-pane.wide { max-width: 1000px; } .no-comments { display: none; } .navigation { margin-top: 30px; margin-bottom: 30px; height: 30px; width: 100%; display: block; } .navigation.top { margin-bottom: 0; } .navigation .nav-previous, .navigation .nav-next { width: auto; } .navigation .nav-previous { float: left; } .navigation .nav-next { float: right; } .navigation .nav-previous a, .navigation .nav-next a { padding: 5px 10px; background: var(--white); border-radius: 3px; box-shadow: 0 0 15px rgba(0,0,0,.1); color: var(--flyDark); } .navigation .nav-previous a:hover, .navigation .nav-next a:hover { color: var(--flySemiDark); } /* Single Post */ .entry-content ul, .entry-content ol { margin-bottom: 30px; } .entry-content ul:last-child, .entry-content ol:last-child { margin-bottom: 0; } .entry-content ul li, .entry-content ol li { list-style-type: disc; margin: 10px 0 10px 30px; } .entry-content ul li:last-child, .entry-content ol li:last-child { margin-bottom: 0; } .entry-content ol li { list-style-type: decimal; } table tr td img { height: auto; } /* Footer */ .stripe.footer { } .stripe.footer .stripe-inside { display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; } .footer-menu-wrap {} .footer-menu-wrap a, a.latest { transition: .15s linear all; font-size: 13px; } .footer-menu-wrap ul.menu { display: flex; align-items: center; text-align: center; margin: 0 auto; gap: 30px; } .footer-menu-wrap ul.menu li { width: 100%; display: block; margin: 0; } .footer-menu-wrap ul.menu li a { margin: 0; padding: 0; } .footer-menu-wrap ul.menu li a { border: 0; } .footer-menu-wrap ul.menu li.current-menu-item > a, .footer-menu-wrap ul.menu li.current-menu-ancestor > a { border-bottom: 2px solid var(--primaryColorLight); padding-bottom: 3px; font-size: 13px; } .footer-menu-inside { display: flex; align-items: center; gap: 30px; } .footer-menu-inside a { display: block; flex-shrink: 0;} .footer-menu-inside ul.menu { flex-shrink: 0; } .footer-menu-inside ul.menu li { height: auto; line-height: 1em; } .stripe.footer { font-size: 12px; } .stripe.footer a { color: var(--primaryColor); font-weight: 600; font-size: 14px; letter-spacing: -.02em; } .stripe.footer a:hover { color: var(--secondaryColor); } .social-buttons-inside { display: flex; align-items: center; gap: 20px; } a.social { width: 20px; height: 20px; display: inline-block; } a.social svg { width: 100%; float: left; transition: .15s linear all; opacity: 1; } a.social:hover svg { transition: .15s linear all; opacity: .7; } .footer-right-side { text-align: right; width: 100%; } .logo-wrap.footer, body.scrolled .logo-wrap.footer { width: 200px; display: inline-block; position: relative; top: auto; left: auto; } .footer-right-side p { font-size: 12px; } .footer-right-side a { } .footer-right-side a:hover { } .stripe.footer .block-wrap .block-inside { background: var(--gaBrownDark); background: linear-gradient(135deg, var(--gaBrownLight) 0%, var(--gaBrownDark) 100%); } /* Begin Overrides */ a > img.aligncenter { overflow: auto; display: block; float: none; } img.aligncenter { display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px; } img.alignleft { float: left; margin-left: 0px; margin-right: 15px; margin-bottom: 10px; } /* Default is scaling */ img.alignright { float: right; margin-left: 20px; margin-bottom: 10px; } img.alignnone { margin: 0px; } img.imagefull { clear: both; width: 100%; border: 0px; padding: 0px; margin: 0px; margin-bottom: 30px; } .reading-pane img { max-width: 100%; } .reading-pane img.alignright, .reading-page img.alignleft { max-width: 50%; height: auto; } .entry-content iframe { width: 100%; max-width: 100%; } .wp-block-image { margin-bottom: 30px !important; } figure { max-width: 100%; width: 100%; } figure img { width: 100%; object-fit: cover; } figcaption { font-size: 13px; margin-top: 5px; margin-bottom: 30px; width: 100%; } figure.alignright { float: right; max-width: 50%; margin: 0; margin-left: 20px; margin-bottom: 30px; } figure.alignleft { float: left; max-width: 50%; margin: 0; margin-right: 20px; margin-bottom: 30px; } figure.alignleft img, figure.alignright img { width: 100%; height: auto; } .reading-pane h1, .reading-pane h2, .reading-pane h3, .reading-pane h4, .reading-pane h5, .reading-pane h6 { margin-bottom: 10px; } input[disabled] { opacity: .5; } input.notop { margin-top: 0; } .nocursor { cursor: default; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignleft { float: left; } .alignright { float: right; } .aligntextleft { text-align: left; } .aligntextright { text-align: right; } .aligntextcenter, .center { text-align: center; } .fill { width: 100%; } .inlineblock { display: inline-block; } .breathe { padding-top: 90px; padding-bottom: 90px; } .breathetop { padding-top: 90px; } .breathebottom { padding-bottom: 90px; } .breathemedium { padding-top: 60px; padding-bottom: 60px; } .breathetopmedium { padding-top: 60px; } .breathebottommedium { padding-bottom: 60px; } .breatheless { padding-top: 30px; padding-bottom: 30px; } .breathetopless { padding-top: 30px; } .breathebottomless { padding-bottom: 30px; } .mclear { margin-top: 0px; margin-bottom: 0px; } .mtop0 { margin-top: 0; } .mtop5 { margin-top: 5px; } .mtop10 { margin-top: 10px; } .mtop15 { margin-top: 15px; } .mtop20 { margin-top: 20px; } .mtop25 { margin-top: 25px; } .mtop30 { margin-top: 30px; } .mtop40 { margin-top: 40px; } .mtop50 { margin-top: 50px; } .mtop60 { margin-top: 60px; } .mbot0 { margin-bottom: 0; } .mbot5 { margin-bottom: 5px; } .mbot10 { margin-bottom: 10px; } .mbot15 { margin-bottom: 15px; } .mbot20 { margin-bottom: 20px; } .mbot25 { margin-bottom: 25px; } .mbot30 { margin-bottom: 30px; } .mbot40 { margin-bottom: 40px; } .mbot50 { margin-bottom: 50px; } .mbot60 { margin-bottom: 60px; } /* Lengths */ .w40 { width: 40px; } .w50 { width: 50px; } .w60 { width: 60px; } .w70 { width: 70px; } .w80 { width: 80px; } .w100 { width: 100px; } .w125 { width: 125px; } .w150 { width: 150px; } .w200 { width: 200px; } .w300 { width: 300px; } .w350 { width: 350px; } .w400 { width: 400px; } .w50p { width: 50%; } .w60p { width: 60%; } .w70p { width: 70%; } .w80p { width: 80%; } .w90p { width: 90%; } /* End Overrides */ /* Media Queries */ /* Touch Screens */ @media (hover:none) { } /* Small Desktop - Max content width = 940px with 30px gutters totalling 1000px */ /* Optimized for the 1024px CSS screen resolution */ @media only screen and (max-width: 1220px) { h1, .huge, .h1 { font-size: 32px; font-weight: bold; } h2, .xxlarge, .h2 { font-size: 24px; } h3, .xlarge, .h3 { font-size: 22px; } h4, .large, .h4 { font-size: 20px; } h5, .medium , .h5 { font-size: 18px; } h6, .small, .h6 { font-size: 16px; letter-spacing: 0px; } /* Stripes */ #container { } /* Stripe Headings */ h1.stripe-title, h2.stripe-title, h2.entry-title { font-size: 30px; } h2.stripe-subtitle, h3.stripe-subtitle { font-size: 20px; } .stripe.banner h1.stripe-title { font-size: 38px; } .stripe.banner h2.stripe-subtitle { font-size: 22px; } /* Menu */ ul.menu li { margin-right: 25px; } a.logo { width: 150px; } /* Description */ .stripe.description .columns.three { gap: 30px; } } @media only screen and (max-width: 1018px) { /* Header */ /* Stripes */ .stripe-inside { width: 100%; } /* Stripe Headings */ .stripe-inside { padding-left: 30px; padding-right: 30px; } .stripe.banner .stripe-inside { padding-top: 60px; padding-bottom: 50px; } /* Banner */ .stripe.banner { background-color: var(--vaTan); border-top: 10px solid var(--vaSkyDark); } .stripe.banner .stripe-inside { } .subscribe-wrap.home { margin-top: 10px; } .stripe.banner .shortcode-wrap { background-color: transparent; } .stripe.banner .subscribe-message-inside { background-color: transparent; color: var(--primaryColor); } /* Description */ .stripe.description .columns.three { grid-template-columns: 1fr; gap: 60px; } .stripe.description .columns.three .column { width: 100%; max-width: 450px; margin: 0 auto; } /* Subscribe */ .columns.subscribe, .sticky .columns.subscribe { grid-template-columns: minmax(0, 1fr); gap: 0; } h2.stripe-title { text-align: center; } h3.stripe-subtitle { text-align: center; } .stripe.subscribe .subscribe-wrap { margin: 0 auto; margin-top: 10px; max-width: 600px; padding: 10px; } .stripe.subscribe h2.stripe-title { font-size: 38px; } .stripe.subscribe h3.stripe-subtitle { font-size: 22px; margin-top: 10px; } .subscribe-message-inside { padding: 5px 0; } .columns.subscribe, .sticky .columns.subscribe { grid-template-columns: minmax(0, 1fr); gap: 20px; } .breathe { padding-top: 80px; padding-bottom: 80px; } .breathetop { padding-top: 80px; } .breathebottom { padding-bottom: 80px; } .breathemedium { padding-top: 50px; padding-bottom: 50px; } .breathetopmedium { padding-top: 50px; } .breathebottommedium { padding-bottom: 50px; } .breatheless { padding-top: 30px; padding-bottom: 30px; } .breathetopless { padding-top: 30px; } .breathebottomless { padding-bottom: 30px; } .breathe.withbordertop { padding-top: 90px; } .breathetop.withbordertop { padding-top: 90px; } .breathemedium.withbordertop { padding-top: 60px; } .breathetopmedium.withbordertop { padding-top: 60px; } .breatheless.withbordertop { padding-top: 40px; } .breathetopless.withbordertop { padding-top: 40px; } } @media only screen and (max-width: 860px) { header.main { } a.logo img { filter: drop-shadow(0 0 50px rgba(255,255,255,.5)); } } @media only screen and (max-width: 767px) { h1, .huge, .h1 { font-size: 28px; } h2, .xxlarge, .h2 { font-size: 20px; } #container { padding: 0; } /* Header */ header.main { position: relative; height: auto; } body.scrolled header.main { background-color: transparent; } header.main .stripe-inside { flex-direction: column; gap: 20px; padding-top: 30px; padding-bottom: 30px; } /* Buttons */ .button.medium, a.button.medium, button[type=submit].medium, input[type=submit].medium, input[type=submit].wpforms-submit.medium { padding: 10px 24px; } .button.medium.rounded, a.button.medium.rounded, button[type=submit].medium.rounded, input[type=submit].medium.rounded, input[type=submit].wpforms-submit.medium.rounded { border-radius: 21px; } /* Stripes */ .menuwrap a { font-size: 13px; } .subscribe-wrap .wpforms-submit-container { min-width: 110px; } .subscribe-message { padding-right: 125px; } body.single .stripe.subscribe.sticky .stripe-inside { padding: 20px; box-shadow: var(--primaryBoxShadow); } body.single .stripe.subscribe.sticky h2.stripe-title { font-size: 20px; } body.single .stripe.subscribe.sticky .columns { gap: 15px; } body.single .stripe.subscribe.sticky h3.stripe-subtitle { font-size: 16px; } body.single .stripe.subscribe.sticky p.subscribe-message { font-size: 14px; padding-right: 0; } body.single .stripe.subscribe.sticky .subscribe-wrap { padding: 0; } body.single .stripe.subscribe.sticky .wpforms-field input[type=email] { padding-top: 10px; padding-bottom: 10px; } body.single .stripe.subscribe.sticky .subscribe-wrap .wpforms-submit-container button { height: 42px; } /* Stripe Headings */ h1.stripe-title, h2.stripe-title, h2.entry-title { font-size: 28px; } h2.stripe-subtitle, h3.stripe-subtitle { font-size: 18px; } .footer-menu-inside { flex-wrap: wrap; row-gap: 10px; align-items: center; justify-content: center; } } @media only screen and (max-width: 600px) { #container { } /* Stripe Headings */ h1.stripe-title, h2.stripe-title, h2.entry-title { font-size: 26px; margin-bottom: 20px; } h2.stripe-subtitle, h3.stripe-subtitle { font-size: 16px; letter-spacing: 0; margin-top: 20px; margin-bottom: 20px; } /* Header */ .logo-wrap { display: none; } .logo-icon { display: block; } .menuwrap { justify-content: center; width: 100%; } /* Stripe Headings */ .stripe.banner .stripe-inside { padding-top: 50px; padding-bottom: 40px; } .breathe { padding-top: 60px; padding-bottom: 60px; } .breathetop { padding-top: 60px; } .breathebottom { padding-bottom: 60px; } .breathemedium { padding-top: 40px; padding-bottom: 40px; } .breathetopmedium { padding-top: 40px; } .breathebottommedium { padding-bottom: 40px; } .breatheless { padding-top: 20px; padding-bottom: 20px; } .breathetopless { padding-top: 20px; } .breathebottomless { padding-bottom: 20px; } .breathe.withbordertop { padding-top: 70px; } .breathetop.withbordertop { padding-top: 70px; } .breathemedium.withbordertop { padding-top: 50px; } .breathetopmedium.withbordertop { padding-top: 50px; } .breatheless.withbordertop { padding-top: 30px; } .breathetopless.withbordertop { padding-top: 30px; } } @media only screen and (max-width: 420px) { .header-image { height: 237px; } .header-image img { height: 100%; } } /* Mobile View */ @media only screen and (max-device-width: 415px) { #fill { width: 100%; } /* Width specified for iPhone 7s */ #container { width: 100%; } /* Width specified for iPhone 7s */ } /* Mobile Landscape Only - Max content width = 696px with 20px gutters totalling 736px; */ @media only screen and (max-device-width: 737px) and (orientation: landscape) { #fill { width: 100%; } #container { width: 100%; } }