/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* - - - - - - - GLOBAL - START - - - - - - - */

:root {
  
  --black: #000000;
  --red: #ef4123;
  --grey: #6d6e70;
  --midgrey: #bcbdc0;
  --lightgrey: #d9d9dc;

  --headerheight: 102px;

}

@font-face {font-family: 'Styrene A Web Light'; src: url("fonts/StyreneA-Light-Web.woff2") format("woff2"),url("fonts/StyreneA-Light-Web.woff") format("woff"); font-weight: 300; font-style: normal; font-stretch: normal}
@font-face {font-family: 'Styrene A Web Regular'; src: url("fonts/StyreneA-Regular-Web.woff2") format("woff2"),url("fonts/StyreneA-Regular-Web.woff") format("woff"); font-weight: 400; font-style: normal; font-stretch: normal}
@font-face {font-family: 'Styrene A Web Medium'; src: url("fonts/StyreneA-Medium-Web.woff2") format("woff2"),url("fonts/StyreneA-Medium-Web.woff") format("woff"); font-weight: 500; font-style: normal; font-stretch: normal}
@font-face {font-family: 'Styrene A Web Bold'; src: url("fonts/StyreneA-Bold-Web.woff2") format("woff2"),url("fonts/StyreneA-Bold-Web.woff") format("woff"); font-weight: 700; font-style: normal; font-stretch: normal}

@font-face {font-family: 'KNF Damryl'; src: url("fonts/KNF_Damryl.otf"); font-style: normal; font-weight: 400; text-rendering: optimizeLegibility}

html,
body {font-family: 'Styrene A Web Light'; font-size: 14px; line-height: 1.7; -webkit-font-smoothing: antialiased; color: var(--black); overflow-x:hidden}

header,
footer,
div,
section,
form {box-sizing: border-box}

img {height: auto; max-width: 100%}

a {color: var(--red); text-decoration: none}

strong {font-family: 'Styrene A Web Medium'; font-weight: 500}

h1,
.h1 {font-family: 'KNF Damryl'; line-height: 0.9; font-size: 42px; word-spacing: -20px}
h2,
.h2 {font-family: 'Styrene A Web Light'; font-weight: 300; font-size: 36px; line-height: 1.4; margin: 35px 0; display: block; word-spacing: 0px}
h3,
.h3 {font-family: 'Styrene A Web Regular'; font-weight: 400; line-height: 1.4; font-size: 21px; margin: 25px 0; display: block}

a.h2,
a.h3 {color: var(--black); transition: color 0.4s}
a.h2:hover,
a.h3:hover {color: var(--red)}

p {margin: 23px 0}

ul {list-style: none; padding: 0; margin: 23px 0}
li {background: url(/assets/svg/bullet.svg) no-repeat 0px 12px; padding: 3px 0 3px 12px; background-size: 6px 2px; line-height: 1.4}

figure {margin: 23px 0}
figure.sm {max-width: 425px}
blockquote {margin: 0 0 23px}
figcaption {display: flex; gap: 12px}

hr {display: block; height: 1px; border: 0; border-top: 1px solid var(--midgrey); margin: 90px 0; padding: 0}
hr.red-separator {border-color: var(--red)}
hr.transparent {border-color: rgba(0, 0, 0, 0);}

.red-txt {color: var(--red)}

video {width: 100%; height: auto}

.entrance-anim {visibility: hidden}
[data-entrance] {visibility: hidden}
.js [data-entrance] {visibility: hidden}

@media (max-width: 767px) {
  h1,
  .h1 {font-size: 32px}
  h2,
  .h2 {font-size: 31px}

  hr {margin: 50px 0}
}


/* Buttons
------------------------ */

.btn,
button,
.triangle-btn,
input[type="submit"] {font-family: 'Styrene A Web Medium'; text-transform: uppercase; font-size: 15px; color: var(--red); text-decoration: none; background: url(/assets/svg/red-triangle.svg) no-repeat right center; padding: 4px 23px 4px 0; background-size: 12px 24px; line-height: 1; border: none; transition: transform 0.3s; cursor: pointer; -webkit-appearance:button}

.btn:hover,
button:hover,
.triangle-btn:hover,
input[type="submit"]:hover {transform: scaleX(1.25) scaleY(1.25)}

.btn-reverse {background-image: url(/assets/svg/red-triangle-reverse.svg); background-position: left center; padding: 4px 0 4px 23px}
.triangle-btn {padding: 0; width: 12px; display: inline-block; height: 24px}

.btn-reveal {background: none; padding: 4px 0 4px 23px; position: relative}
.btn-reveal:before {content: ''; background: url(/assets/svg/red-triangle.svg) no-repeat center center; background-size: 12px 24px; position: absolute; top: 0; left: 0; width: 12px; height: 24px}
.btn-reveal.active:before {transform: rotate(90deg)}


/* Forms
------------------------ */

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: var(--grey);
}
::-moz-placeholder { /* Firefox 19+ */
  color: var(--grey);
}
:-ms-input-placeholder { /* IE 10+ */
  color: var(--grey);
}
:-moz-placeholder { /* Firefox 18- */
  color: var(--grey);
}

::placeholder { /* Most modern browsers support this now. */
  color: var(--grey);
}

select {color: #000; border: solid 1px var(--grey); padding: 8px 17px; appearance: none; line-height: 24px; background: #FFFFFF url(/assets/img/chevron.png) no-repeat right 1rem center; background-size: 10px 6px; width: 100%}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {color: var(--black); border: solid 1px var(--grey); border-radius: 0px; padding: 7px 14px 8px; line-height: 24px; width: 100%; box-sizing: border-box}
textarea {min-height: 185px}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {color: var(--black); border-color: var(--black); border-width: 2px; outline: none}

input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="url"]:focus-visible,
input[type="password"]:focus-visible,
input[type="search"]:focus-visible,
input[type="number"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="range"]:focus-visible,
input[type="date"]:focus-visible,
input[type="month"]:focus-visible,
input[type="week"]:focus-visible,
input[type="time"]:focus-visible,
input[type="datetime"]:focus-visible,
input[type="datetime-local"]:focus-visible,
input[type="color"]:focus-visible,
input[type="checkbox"]:focus-visible,
select:focus-visible {outline-color: var(--black); border-radius: 0}

.form-group.checkbox {display: flex; align-items: center; gap: 7px}
input[type="checkbox"] {background: #FFFFFF; appearance: none; padding: 0px; width: 18px; height: 18px; cursor: pointer; border: solid 1px var(--grey)}
input[type="checkbox"]:checked::after {content: ''; background: url(/assets/svg/tick.svg) no-repeat center center; background-size: 14px 11px; width: 16px; height: 17px; display: block}

.form-group {padding-bottom: 18px}


/* Wrappers
------------------------ */

.container {width: 100%; max-width: 1300px; margin: 0 auto}
.page-top {padding-top: var(--headerheight)}

.corner-cutoff:before {content: ''; position: absolute; top: 0; right: 0; border-top: 73px solid #FFFFFF; border-left: 73px solid transparent; width: 0; z-index: 2}
.corner-cutoff-reverse:before {right: auto; left: 0; border-left: none; border-right: 73px solid transparent}
/* note. removed "background: url(/assets/img/cockpit-page-header.jpg) no-repeat center center;" from below */
.page-header {background: none no-repeat center center; background-size: cover; color: #FFFFFF; display: flex; flex-direction: column; justify-content: flex-end; height: 670px; padding: 0 0 90px 115px; position: relative}
.page-header {height: 600px}
.page-header-sm {height: 400px}
.page-header h1 {margin-bottom: 20px}
.page-header p {margin: 0; display: block; max-width: 400px; font-family: 'Styrene A Web Medium'; font-size: 13px; font-weight: 500; line-height: 1.5}

@media (max-width: 1359px) {
  .container {max-width: 728px}

  .page-header {padding: 75px; height: 450px}
  .page-header-sm {height: 350px}
}

@media (max-width: 767px) {
  .container {padding: 0 20px}
  .page-top {padding-top: var(--headerheight)}

  .page-header {padding: 35px 20px; height: 325px}
  .page-header-sm {height: 275px}
}


/* Owl Carousel
------------------------ */

.owl-theme .owl-nav {margin: 0}
.owl-carousel .owl-nav button {margin: 0!important; width: 14px; height: 30px; background-repeat: no-repeat; background-size: 14px 30px; position: absolute; bottom: 53%}
.owl-carousel.owl-theme .owl-nav button:hover {background-color: transparent}
.owl-carousel.owl-theme .owl-nav button.owl-prev {background-image: url(/assets/svg/arrow-grey-left.svg); left: -45px}
.owl-carousel.owl-theme .owl-nav button.owl-next {background-image: url(/assets/svg/arrow-grey-right.svg); right: -45px}
.owl-carousel .owl-nav button span {display: none}
.owl-theme .owl-dots {padding-top: 90px}
.owl-theme .owl-dots .owl-dot span {background: var(--lightgrey)}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {background: var(--red)}


/* Common Sections
------------------------ */

.section {margin: 90px 0; position: relative}
.section.lg-vertical-space {margin: 120px 0}
.section.reduced-width {padding: 0 8%}

.section.centered {text-align: center}

.section.half {width: 50%}

.two-col-img-txt {display: flex; gap: 9%}
.two-col-img-txt .col-1 {width: 48%}
.two-col-img-txt .col-2 {width: 43%; padding: 0 5% 0 0}

.two-col-img-txt.reduced-width {display: flex; gap: 11%}
.two-col-img-txt.reduced-width .col-1 {width: 49%}
.two-col-img-txt.reduced-width .col-2 {width: 40%}

.two-col-img-txt.reverse-layout {flex-direction: row-reverse}

.two-col-img-txt h2:first-child,
.two-col-img-txt figure:first-child {margin-top: 0}
.two-col-img-txt .col p:last-child,
.two-col-img-txt .col ul:last-child,
.two-col-img-txt .col figure:last-child {margin-bottom: 0}
.two-col-img-txt img {width: 100%}

.two-col-txt {display: grid; grid-template-columns: repeat(2, 1fr); gap: 75px}
.two-col-txt .col p:first-of-type {margin-top: 0}

.grey-overlap-section {width: 100%; background: url(/assets/img/grey-diagonal-bg.png) bottom center no-repeat #FFFFFF; background-size:2560px 613px}
.grey-overlap-sections .grey-overlap-section:nth-child(even) {background-image: none}
.grey-overlap-section .page-banner {margin-bottom: 0}

.page-link {padding: 0 0 60px}
.page-link .h2 {font-size: 29px; margin-top: 0}

.page-link-icon {background: url(/assets/img/placeholder-square.png) no-repeat; background-size: 60px 60px; padding: 0 0 0 85px}
.plane-icon {background-image: url(/assets/svg/plane-icon.svg); background-size: 60px auto}
.tower-icon {background-image: url(/assets/svg/tower-icon.svg); background-size: 18px auto; background-position: 21px 0px} 
.dial-icon {background-image: url(/assets/svg/dial-icon.svg); background-size: 48px auto; background-position: 6px 0px}  
.presentation-icon {background-image: url(/assets/img/presentation-icon-grey.png); background-size: 48px 48px; background-position: 0px 0px}
.plane-route-icon {background-image: url(/assets/img/plane-route-icon-grey.png); background-size: 53px auto; background-position: 5px 6px}
.plane-electric-icon {background-image: url(/assets/img/plane-electric-icon-grey.png); background-size: 48px auto; background-position: 8px 0px}
.plane-formation-icon {background-image: url(/assets/img/plane-formation-icon-grey.png); background-size: 51px auto; background-position: 0px 0px}
.red-force-icon {background-image: url(/assets/img/red-force-icon.png); background-size: 50px auto; background-position: 0px 0px}
.arrow-target-icon {background-image: url(/assets/svg/arrow-target-icon-grey.svg); background-size: 50px auto; background-position: 0px 0px}
.speed-icon {background-image: url(/assets/svg/speed-icon-grey.svg); background-size: 44px auto; background-position: 8px 0px}
.padlock-icon {background-image: url(/assets/svg/padlock-icon-grey.svg); background-size: 34px auto; background-position: 16px 0px} 

.list-icon {padding: 0 0 0 20px; background-repeat: no-repeat; margin-top: 6px; font-size: 13px}
.location-icon {background-image: url(/assets/svg/pin-icon-red.svg); background-size: 11px auto; background-position: 0px 1px}
.time-icon {background-image: url(/assets/svg/time-icon-red.svg); background-size: 12px auto; background-position: 0px 3px}
.calendar-icon {background-image: url(/assets/svg/calendar-icon-red.svg); background-size: 12px auto; background-position: 0px 3px}

.text-trio {display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: 30px}
.text-trio .col {padding: 0 60px}
.text-trio h2 {margin: 0 0 20px}
.text-trio p {margin: 0}

.center-vertically {align-items: center}
.vertical-align-end {align-items: flex-end}

.filter-btn {display: none; margin-bottom: 30px; transition: margin 0.4s!important; margin-left: 0px}
.filter-btn:before {transition: transform 0.4s}
.filter-btn.active {transform: none; margin-left: 8px}
.filter-btn:hover {transform: none}

.filters {padding-bottom: 5px}
.filters h2 {margin: 15px 0}
.filters .form-group.checkbox {gap: 10px; padding-bottom: 4px}
.filters label {font-size: 13px}
.filters input[type="checkbox"] {width: 13px; height: 13px}
.filters input[type="checkbox"]:checked::after {background-size: 10px auto; width: 12px; height: 12px}

.listings .listing:last-child {border-bottom: solid 1px var(--midgrey)}
.listing {border-top: solid 1px var(--midgrey); padding: 15px 45px 20px 0}
.listing h2 {margin: 0 0 20px}
.listing ul {margin: 0}
.listing-content {display: flex; justify-content: space-between; align-items: flex-end}

.img-frame-hover-grow {overflow: hidden; display: block}
.img-frame-hover-grow img {object-fit: cover; object-position: center center; transition: transform 0.4s}
.img-frame-hover-grow:hover img {transform: scale(1.2)}

.btn-wrapper {padding: 25px 0 0; width: 100%}
.btn-wrapper.align-right {display: flex; justify-content: flex-end}

#about-cta {background-image: url(/assets/img/engineer-duo-red-landscape.jpg)} 

@media (max-width: 1359px) {
  .section.reduced-width {padding: 0} 

  .two-col-img-txt,
  .two-col-img-txt.reverse-layout,
  .two-col-img-txt.reduced-width {flex-direction: column-reverse; gap: 35px}
  .two-col-img-txt .col,
  .two-col-img-txt.reduced-width .col {width: 100%; padding: 0}
  .two-col-img-txt .square-img {max-width: 500px}

  .grey-overlap-section {background-image: url(/assets/img/grey-diagonal-bg-tablet.png); background-size:1360px 561px}

  .text-trio {gap: 60px}
  .text-trio .col {padding: 0}
}

@media (max-width: 767px) {
  .section {margin: 50px 0}
  .section.lg-vertical-space {margin: 50px 0}

  .two-col-txt {grid-template-columns: 1fr; gap: 0}

  .grey-overlap-section,
  .grey-overlap-sections .grey-overlap-section:nth-child(even) {background-image: url(/assets/img/grey-diagonal-bg-mob.png); background-size:767px 206px}

  .text-trio {grid-template-columns: 1fr}

  .filter-btn {display: block}

  .listing {padding-right: 0}
}


/* sidebar layout */
.sidebar-layout {display: flex; padding-bottom: 60px}
.sidebar-layout aside {width: 23%; border-right: solid 1px var(--red)}
.sidebar-layout .content {width: 77%; padding: 0 0 0 125px} 

@media (max-width: 1359px) {
  .sidebar-layout aside {width: 33%}
  .sidebar-layout .content {width: 67%; padding: 0 0 0 45px} 
}

@media (max-width: 767px) {
  .sidebar-layout {display: block}
  .sidebar-layout aside {width: 100%; border:none; display: none}
  .sidebar-layout .content {width: 100%; padding: 0} 
  .sidebar-layout aside .filters:first-child h2 {margin-top: 0}
  .sidebar-layout aside .filters:last-child {padding-bottom: 30px}
}


/* page banners */
.page-banner {background: url(/assets/img/cockpit-page-header.jpg) no-repeat center center; background-size: cover; color: #FFFFFF; display: flex; flex-direction: column; justify-content: flex-end; height: 430px; padding: 0 33% 90px 115px; position: relative; gap: 25px}
.page-banner h2,
.page-banner .h2 {margin: 0; font-family: 'Styrene A Web Regular'; font-size: 44px; font-weight: 400; line-height: 1.1}
.page-banner p,
.page-banner span {margin: 0; font-family: 'Styrene A Web Bold'; font-size: 15px; font-weight: 700; line-height: 1.7}

.cta.page-banner {box-sizing: border-box; align-items: flex-end; padding: 0 115px 90px 0; gap: 15px}
.cta.page-banner span:not(.ti-cursor, .h2) {max-width: 310px; width: 100%; font-size: 13px}
.cta.page-banner .h2 {font-family: 'KNF Damryl'; line-height: 1; font-size: 42px; word-spacing: -20px; max-width: 310px; width: 100%}

@media (max-width: 1359px) {
  .page-banner {padding: 75px}

  .cta.page-banner {padding: 90px}
  .cta.page-banner span {text-align: right}
}

@media (max-width: 767px) {
  .page-banner,
  .cta.page-banner {padding: 20px 20px 30px 20px; height: 350px; gap: 10px}
  .page-banner h2 {font-size: 26px}
  .page-banner p {font-size: 13px}

  .cta.page-banner .h2 {font-size: 32px}
}


/* page links */
.page-links {display: flex; gap: 6%}
.page-links .col {width: 20.5%}
.page-links .h2,
.page-links .h3 {margin: 0 0 15px}
.page-links p {margin: 0 0 28px}

.page-link-section {display: flex; gap: 120px; justify-content: space-between; width: 980px; margin: 0 auto; align-items: center; padding: 63px 0}
.page-link-section .col-1 {width: 535px}
.page-link-section .col-2 {width: 280px}
.page-link-section img {width: 280px; height: 280px}

@media (max-width: 1359px) {
  .page-link-section {width: 728px; gap: 40px}
  .page-link-section .col-1 {width: 440px}
  .page-link-section .col-2 {width: 230px}
  .page-link-section img {width: 230px; height: 230px}
}

@media (max-width: 767px) {
  .page-link {padding: 0}

  .page-link-icon {padding: 85px 0 0 0}

  .page-links {gap: 10%; flex-wrap: wrap; row-gap: 40px}
  .page-links .col {width: 40%}

  .page-link-section {width: 100%; flex-direction: column}
  .page-link-section .col {width: 100%}
  .page-link-section .col-2 {display: flex; justify-content: center}
}


/* post slider */
.post-slider-section {padding: 0 8%} 
.post-slider-section h2 {margin-top: 0}
.post-slider .h2 {margin: 15px 0}
.post-slider p {margin-bottom: 60px} 
.post-slider.owl-carousel .owl-nav button.owl-prev {left: -125px}
.post-slider.owl-carousel .owl-nav button.owl-next {right: -125px}
.post-slider .img-frame-hover-grow {width: 100%; height: 275px}

@media (max-width: 1359px) {
  .post-slider.owl-carousel .owl-nav button.owl-prev {left: -60px} 
  .post-slider.owl-carousel .owl-nav button.owl-next {right: -60px}
  .post-slider .img-frame-hover-grow {height: 150px}
}

@media (max-width: 767px) {
  .post-slider.owl-carousel .owl-nav button.owl-prev {left: -35px}  
  .post-slider.owl-carousel .owl-nav button.owl-next {right: -35px}
  .post-slider .img-frame-hover-grow {height: auto}
}


/* - - - - - - - GLOBAL - END - - - - - - - - */





/* - - - - - - - HEADER - START - - - - - - - */

.site-header {position: fixed; top: 0; z-index: 3; width: 100%; background: #FFFFFF; padding: 0 20px}
.admin-bar .site-header {top:32px}
.site-header .container {display: flex; align-items: center}
#header-container {height: var(--headerheight)}
.site-header img {display: block}
.site-header li {background: none; padding: 0}
.site-header .col.logo {width: 20%}
.site-header .col.nav {width: 60%}
.site-header .col.social {width: 20%}

.site-header .logo img {width: 140px; height: auto}

.site-header .nav {height: var(--headerheight)}
.site-header .nav ul {display: flex; align-items: center; gap:40px; justify-content: center; height: var(--headerheight); margin: 0}
.site-header .nav ul li {height: var(--headerheight); display: flex; align-items: center}
.site-header .nav a {text-transform: uppercase; color: var(--black); font-size: 11px; letter-spacing: 2px; position: relative; padding: 0 0 0 2px}
.site-header .nav a:after {-webkit-transition: -webkit-transform .3s ease-out,border-color .3s ease-out; position: absolute; display: block; left: 0; width: 100%; -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); border-top: 1px solid var(--red); content: ""; padding-bottom: inherit; transform-origin: 0 0; transition: transform .35s cubic-bezier(.52,.01,.16,1); bottom: -8px}
.site-header .nav a:hover:after,
.site-header .nav a.selected:after {transform: scaleX(1); backface-visibility: hidden}

.mega-menu-nav {position: relative}
.mega-menu-nav:after {content: ''; background: url(/assets/svg/red-triangle-up.svg) no-repeat; background-size: 20px 10px; width: 20px; height: 10px; position: absolute; bottom: 0px; left: 50%; margin-left: -10px; opacity: 0; transition: opacity 0.3s}
.mega-menu-nav:hover:after,
.mega-menu-nav.highlight:after {opacity: 1; transition: opacity 0.3s}

.site-header .social ul {display: flex; gap: 15px; align-items: center; justify-content: flex-end}

.social-icon img {width: 15px; height: auto}
.social-icon.envelope img {width: 18px}
.social-icon.pin img {width: 13px}

.site-header .menu-btn {display: none; background: none; padding: 0}
.site-header .menu-btn img {display: block; width: 23px; height: auto}

.mega-menu {position: absolute; width: 100%; left: 0; background: #FFFFFF; z-index: 2; opacity: 0; transition: opacity 0.4s; pointer-events: none}
.mega-menu.enabled {opacity: 1; transition: opacity 0.4s; top: var(--headerheight); pointer-events: auto}
.mega-menu .container {max-width: 1360px; border: solid 1px var(--lightgrey); padding: 40px 20px 45px; align-items: flex-start; height: 605px; box-sizing: border-box}
.mega-menu a,
.mega-menu .heading,
.mega-menu .subheading {font-size: 12px; display: block}
.mega-menu .col {padding: 0 0 0 45px; height: 100%; display: flex; flex-direction: column}
.mega-menu .col .heading,
.mega-menu .col .subheading,
.mega-menu .col nav {opacity: 0.3; transition: opacity 0.4s}
.mega-menu .col.highlight .heading,
.mega-menu .col.highlight .subheading,
.mega-menu .col.highlight nav {opacity: 1; transition: opacity 0.4s}
.mega-menu .col-1 {width: 15%}
.mega-menu .col-2 {width: 24%}
.mega-menu .col-3 {width: 20%}
.mega-menu .col-4 {width: 24%}
.mega-menu .col-5 {width: 17%; justify-content: space-between}
.mega-menu .nav-wrapper {border-right: solid 1px var(--red); padding: 0 45px 0 0; flex: 1}
.mega-menu .nav-wrapper nav:last-of-type {margin-bottom: 0}
.mega-menu .col-5 .nav-wrapper {border-right: none; display: flex; flex-direction: column; justify-content: space-between}
.mega-menu .heading {padding-bottom: 25px; font-family: 'Styrene A Web Medium'}
.mega-menu .subheading {font-family: 'Styrene A Web Medium'; padding-bottom: 5px}
.mega-menu nav {margin-bottom: 20px}
.mega-menu ul {margin: 0}
.mega-menu li {margin: 0 0 15px}
.mega-menu li a {padding: 5px 0; font-family: 'Styrene A Web Medium'; color: var(--black); transition: color 0.4s}
.mega-menu li a:hover {color: var(--red)}
.mega-menu .condensed li {margin: 0 0 2px}
.mega-menu .condensed li a {font-family: 'Styrene A Web Light'; padding: 2px 0}
.mega-menu .selected .heading {color: var(--red)}

.search-form {display: flex}
.search-form input[type="text"] {font-size: 12px; border: solid 1px var(--grey); height: 28px; padding: 0 10px}
.search-form button {background: none; padding: 4px 8px; border: solid 1px var(--grey); border-left: 0; height: 28px; transition: background 0.3s}
.search-form button:hover {background: var(--red); transform: none}
.search-form img {width: 14px; height: auto; display: block; background: none; padding: 0}

#mobile-menu-close-btn {position: fixed; top: 15px; right: 15px; cursor: pointer; opacity: 0}
#mobile-menu-close-btn img {width: 15px; height: auto; display: block}
.is-menu #mobile-menu-close-btn {opacity: 1}

#mobile-menu {visibility: hidden; transition: .6s; position: fixed; top: 0; bottom: 0; right: -100vw; width: 100%; background: #FFFFFF; display: flex; padding: 0; overflow-y: auto; z-index: 5; flex-direction: column; justify-content: flex-start; overscroll-behavior: contain}
.admin-bar #mobile-menu {top:32px}
.is-menu #mobile-menu {opacity: 1; visibility: visible; right: 0}

#mobile-menu-dropdowns {padding: 60px 30px 30px}
#mobile-menu-dropdowns a {color: var(--black)}
#mobile-menu-dropdowns ul {margin: 0}
#mobile-menu-dropdowns li {background: none; padding-left: 0; margin: 15px 0 0}
#mobile-menu-dropdowns ul ul {padding-left: 15px; display: none}
.menu-dropdown,
#mobile-menu-dropdowns > ul > li > a {display: block; width: 100%; position: relative; font-family: 'Styrene A Web Medium'}
.menu-dropdown:before,
#mobile-menu-dropdowns > ul > li > a:before {content:''; background: url(/assets/svg/red-triangle.svg) no-repeat top right; background-size: 8px 16px; width: 8px; height: 16px; display: block; position: absolute; right:0; top: 0; transition: transform 0.4s}
.menu-dropdown.active:before {transform: rotate(90deg)}

#mobile-menu-btm {width: 100%; padding: 30px}
#mobile-menu-btm .social {display: flex; padding: 30px 0 0; gap: 10px; margin: 0}
#mobile-menu-btm .social li {background: none; padding: 0} 


/* CSS FOR VIEWPORT MOBILE MENU - START */ 

/*

#mobile-menu-close-btn {position: fixed; top: 15px; left: 15px; cursor: pointer}
#mobile-menu-close-btn img {width: 15px; height: auto; display: block}

#mobile-menu {opacity: 0; visibility: hidden; transition: .3s; position: fixed; top: 0; bottom: 0; left: -300px; width: 300px; background: #FFFFFF; display: flex; padding: 0; overflow-y: auto; z-index: 5; flex-direction: column; justify-content: flex-start; overscroll-behavior: contain}
.admin-bar #mobile-menu {top:32px}
.is-menu #mobile-menu {opacity: 1; visibility: visible; left: 0}


#mobile-menu-btm {width: 100%; height: 20%; background: var(--beige); overflow: hidden; padding: 30px 15px 0 15px}
#mobile-menu-btm .social {display: flex; padding: 30px 0 0; gap: 10px; margin: 0}
#mobile-menu-btm .social li {background: none; padding: 0} 

#mobile-menu-viewport {width: 100%; height: 80%; overflow: hidden; padding: 15% 0 0}

#mobile-menu-back-btn-wrapper {height: 50px; padding: 15px; opacity: 0; transition: opacity 0.3s; visibility: hidden}
#mobile-menu-back-btn-wrapper.active {opacity: 1; visibility: visible}
#mobile-menu-back-btn {display: flex; align-items: center; gap: 5px; cursor: pointer}
#mobile-menu-back-btn img {transform: rotate(90deg);}

#mobile-menus {position: relative; height: calc(100% - 50px); width: 100%}
#mobile-menus-wrapper {position: absolute; top:0; left: 0; width: 900px; height: 100%; transition: left 0.4s}
#mobile-menus-wrapper.view-1 {left:0; transition: left 0.4s}
#mobile-menus-wrapper.view-2 {left:-300px; transition: left 0.4s}
#mobile-menus-wrapper.view-3 {left:-600px; transition: left 0.4s}
.mobile-menu {position: absolute; top: 0; left:0; width: 300px; padding:5px 20px 0}
.mobile-menu.view-2 {left: 300px; opacity: 0; visibility: hidden}
.mobile-menu.view-3 {left: 600px; opacity: 0; visibility: hidden}

.mobile-menu ul {padding: 0; margin: 0; list-style: none}
.mobile-menu.inner-view ul {padding-left: 15px}
.mobile-menu.inner-view ul li {margin: 3px 0}
.mobile-menu li {margin: 5px 0; background: none; padding: 5px 0}
.mobile-menu .heading,
.mobile-menu li.open-menu,
.mobile-menu a {color: #272727; text-decoration: none; display: block; padding: 5px 25px 5px 0; font-size: 14px; cursor: pointer; background: url(/assets/svg/red-triangle.svg) right center no-repeat; background-size: 6px 12px}
.mobile-menu .heading {font-family: 'Styrene A Web Regular'}
.mobile-menu li.open-menu {padding: 10px 0}
.mobile-menu a.no-arrow {background: none}
.mobile-menu .heading {cursor: auto; background: none}
*/

/* CSS FOR VIEWPORT MOBILE MENU - END */ 


#overlay {position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); z-index: 4; opacity: 0; visibility: hidden; transition: opacity 0.4s; cursor: pointer}
.is-menu #overlay {opacity: 1; visibility: visible; transition: opacity 0.4s}

@media (max-width: 1359px) {
  .site-header .container {justify-content: space-between}

  .site-header .col.logo {width: 50%}
  .site-header .nav {display: none}

  .site-header .social {display: none}

  .site-header .menu-btn {display: block}
}

@media (max-width: 767px) {
  #header-container {padding: 0}
}

/* - - - - - - - HEADER - END - - - - - - - - */


/* - - - - - - - FOOTER - START - - - - - - - */
/*
    notes. 
    new css added so footer links hover red. line 713
    css for copyright msg revised lines 727-729, 749-751. Ta on page also revised from span to classed div.
*/

.site-footer {background: var(--black); color: #FFFFFF; padding-top: 90px; padding-bottom: 125px}
.site-footer a {color: #FFFFFF; display: block}
.site-footer a:hover {color: var(--red);}
.site-footer li {background: none; padding: 0}
.site-footer .container {display: flex; flex-wrap: wrap}
.site-footer .col {width: 50%}
/* padding revised below from "padding: 0 0 90px;" to "padding: 0 0 45px;"*/
.site-footer .col.nav {display: flex; justify-content: flex-end; gap: 100px; padding: 0 0 45px}
.site-footer .col.nav ul {margin: 0}
.site-footer .col.nav ul li {margin-bottom: 5px}

.site-footer .social {padding: 30px 0 0}
.site-footer .social ul {display: flex; gap: 30px; align-items: center; margin: 0}

.site-footer .terms-copyright {font-size: 12px; padding: 30px 0 0}
.site-footer .terms-copyright ul {display: flex; align-items: center; gap:10px; justify-content: flex-end; margin: 0; padding: 0 0 3px}
/*.site-footer .terms-copyright span {width: 100%; text-align: right; display: block;}*/
.site-footer .terms-copyright div.copyright { width: 100%;text-align: right;display: block;}
.site-footer .terms-copyright div.copyright a {display: inherit;}

@media (max-width: 767px) {
  .site-footer {padding-top: 60px; padding-bottom: 60px}
  .site-footer .container {flex-direction: column}
  .site-footer .col {width: 100%}
  .site-footer .col.logo {order:1}
  .site-footer .col.social {order:2}
  .site-footer .col.nav {order:3}
  .site-footer .col.terms-copyright {order:4}

  .site-footer .col.logo a {max-width: 162px; margin: 0 auto}

  .site-footer .social ul {justify-content: center; margin-bottom: 35px}

  .site-footer .col.nav {flex-direction: column; gap: 0; text-align: center; padding: 0 0 45px}
  .site-footer .col.nav ul li {margin-bottom: 13px}

  .site-footer .terms-copyright {padding: 0}
  .site-footer .terms-copyright ul {justify-content: center; flex-wrap: wrap; max-width: 200px; margin: 0 auto 35px; row-gap: 5px}
  /*.site-footer .terms-copyright span {width: 100%; display: block; text-align: center;}*/
  .site-footer .terms-copyright div.copyright {width: 100%;display: block;text-align: center;}
  .site-footer .terms-copyright div.copyright a {display:inherit;}
}

/* - - - - - - - FOOTER - END - - - - - - - - */





/* - - - - - - - HOMEPAGE - START - - - - - - - */

#homepage-banner-slider {margin: 0}
/* Note. removed "" from entry below "background: url(/assets/img/plane-front-air.jpg) no-repeat center center;" */
.banner-slide {background: none; background-size: cover; color: #FFFFFF; display: flex; flex-direction: column; justify-content: flex-end; height: 672px; padding: 0 33% 90px 115px; position: relative; gap: 25px}
.banner-slide h1,
.banner-slide .h1 {margin: 0}
.banner-slide p {margin: 0; font-family: 'Styrene A Web Bold'; font-size: 13px; font-weight: 700; line-height: 1.7; max-width: 375px}
.banner-slide a.btn {color: #FFFFFF; background-image: url(/assets/svg/white-triangle.svg); font-size: 13px; font-family: 'Styrene A Web Bold'; background-size: 7px 14px; padding-right: 15px}
.banner-slider .owl-dots {padding-top: 0; position: absolute; width: 100%; bottom: 20px}
.banner-slider.owl-theme .owl-dots .owl-dot span {background: #FFFFFF; opacity: 0.75}
.banner-slider.owl-theme .owl-dots .owl-dot.active span,
.banner-slider.owl-theme .owl-dots .owl-dot:hover span {background: #FFFFFF; opacity: 1}
.banner-slider.owl-carousel .owl-nav button {bottom: 47%}

#homepage-page-links {flex-wrap: wrap; gap: 8%}
#homepage-page-links .col {width: 28%}
#homepage-page-links .col:first-child {width: 100%}
#homepage-page-links h2 {margin: 0 0 50px}
#homepage-page-links .h2 {margin-bottom: 40px}
#homepage-page-links p {margin-bottom: 40px}

#homepage-cta-banner {background-image: url(/assets/img/meeting.jpg)}

@media (max-width: 1359px) {
  .banner-slide {padding:75px; height: 450px}
}

@media (max-width: 767px) {
  .banner-slide {padding:20px 20px 60px 20px; height: 350px}
  .banner-slider .owl-dots {bottom:15px}

  #homepage-page-links {row-gap: 30px}
  #homepage-page-links .col {width: 100%}
  #homepage-page-links h2 {margin: 0 0 15px}
  #homepage-page-links .h2 {margin-bottom: 15px; font-size: 28px}
  #homepage-page-links p {margin-bottom: 15px}
}

/* - - - - - - - HOMEPAGE - END - - - - - - - - */





/* - - - - - - - ABOUT - START - - - - - - - */

#about-page-header {background-image: url(/assets/img/helicopter-side-red-landscape.jpg)}

#about-page-banner {background-image: url(/assets/img/pilot-cockpit-red-landscape.jpg)}

/* - - - - - - - ABOUT - START - - - - - - - */





/* - - - - - - - OUR PEOPLE - START - - - - - - - */

#our-people-page-header {background-image: url(/assets/img/engineer-wheel-red-landscape.jpg)}

#about-page-banner {background-image: url(/assets/img/plane-front-flying-red-landscape.jpg)}

.profiles-section h2 {margin: 0 0 45px}

.profiles {display: grid; grid-template-columns: 1fr 1fr 1fr; gap:60px}

.profile {display: flex; flex-direction: column; height: 100%; padding: 30px 30px 60px; transition: all 0.4s}
.profile.active {background: var(--red); color: #FFFFFF; transition: all 0.4s}
.profile h3 {font-family: 'Styrene A Web Light'; font-weight: 300; margin: 15px 0 8px}
.profile .role {color: var(--red); display: block; margin-bottom: 10px}
.profile.active .role {color: #FFFFFF}
.profile div {margin-top: auto}
.profile .btn {margin-left: 0px; transition: 0.4s margin}
.profile .btn-reveal:before {transition: 0.4s transform}
.profile.active .btn {color: #FFFFFF; margin-left: 8px}
.profile.active .btn-reveal:before {background-image: url(/assets/svg/white-triangle.svg)}
.profile .btn-reveal span {opacity: 0; transition: 0.4s opacity}
.profile .btn-reveal:hover {transform: none; margin-left: 8px}
.profile .btn-reveal:hover:before {transform: rotate(90deg)}
.profile .btn-reveal:hover span {opacity: 1}
.profile.active .btn-reveal span {opacity: 1}

.profile-content {color: #FFFFFF; background: var(--red); padding: 30px; position: relative; display: none}
.profile-content-desktop-tablet {padding: 60px 75px 40px 40px}
.profile-content-desktop-tablet.corner-cutoff-reverse {padding: 60px 40px 40px 75px}
.profile-content-mobile {display: none; padding: 30px 0 0; background: transparent}
.profile-content-desktop-tablet p {font-size: 15px}
.profile-content p:first-child {margin-top: 0}
.profile-content p:last-child {margin-bottom: 0}

@media (max-width: 1359px) {
  .profiles {gap:0}
}

@media (max-width: 767px) {
  .profiles {grid-template-columns: 1fr; gap: 30px}
  .profile {padding: 30px}
}

/* - - - - - - - OUR PEOPLE - END - - - - - - - - */





/* - - - - - - - OUR HISTORY - START - - - - - - - */

#our-history-page-header {background-image: url(/assets/img/plane-ground-landscape-red.jpg)}

#our-history-intro {max-width: 525px; margin: 60px auto; text-align: center}
#our-history-intro h2 {margin-bottom: 20px}

.timeline {background: url(/assets/img/red-pixel.png) repeat-y center center; padding: 15px 0}
.timeline .item {display: flex; align-items: flex-end; padding: 75px 0}
.timeline .reverse {flex-direction: row-reverse; text-align: right}
.timeline .col {width: 50%}
.timeline .col-l {padding: 0 80px 0 0}
.timeline .reverse .col-l {padding: 0 0 0 80px}
.timeline h3 {padding: 0 80px 20px; display: block; color: var(--grey); text-transform: uppercase; line-height: 1; font-size: 14px; letter-spacing: 2px}
.timeline .date-wrapper {display: block; position: relative; padding: 0 80px}
.timeline .date-wrapper:before {content: ''; display: block; border-radius: 50%; width: 26px; height: 26px; background: var(--red); position: absolute; left: -13px; animation: pulse-red 2s infinite; top: 10px}
.timeline .date {display: block; font-family: 'KNF Damryl'; line-height: 1; font-size: 60px; word-spacing: -20px}
.timeline .reverse .date-wrapper:before {left: auto; right: -13px} 
.timeline p {padding: 0 80px; margin: 10px 0}

@keyframes pulse-red {
  0% {transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 65, 35, 0.7)}  
  70% {transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 0, 0, 0)}
  100% {transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0)}
}

@media (max-width: 1359px) {
  .timeline .item {align-items: center}
  .timeline h3 {padding: 0 0 0 80px}
  .timeline .reverse h3 {padding: 0 80px 0 0}
  .timeline p {padding: 0 0 0 80px}
  .timeline .reverse p {padding: 0 80px 0 0}
}

@media (max-width: 767px) {
  #our-history-intro {margin: 45px auto; text-align: left}

  .timeline {background-position: 30px 0; padding: 0}
  .timeline .item {flex-direction: column-reverse; padding: 45px 0; gap: 30px}
  .timeline .reverse {text-align: left}
  .timeline .col {width: 100%}
  .timeline .col-l,
  .timeline .reverse .col-l {padding: 0}
  .timeline .date-wrapper {padding: 0 0 0 80px}
  .timeline .date-wrapper:before {left: 17px}
  .timeline .reverse .date-wrapper:before {left: 17px}
  .timeline .reverse h3,
  .timeline .reverse p {padding: 0 0 0 80px}
}

/* - - - - - - - OUR HISTORY - END - - - - - - - - */





/* - - - - - - - JOBS - START - - - - - - - */

#job-listings {padding-bottom: 120px}

.job-search-form {max-width: 800px; margin: 45px auto; display: flex; flex-wrap: wrap; gap:16px; justify-content: flex-end}
.job-search-form input {width: 392px}

#job-listings .listings-nav {text-align: right; padding: 0 120px 0 0}

@media (max-width: 1359px) {
  .job-search-form input {width: 356px}
}

@media (max-width: 767px) {
  .job-search-form input {width: 100%}

  #job-listings .listings-nav {padding: 0}
}

/* - - - - - - - JOBS - END - - - - - - - - */





/* - - - - - - - ADVERSARY TRAINING - START - - - - - - - */

#adversary-training-page-header {background-image: url(/assets/img/plane-side-red-landscape.jpg)}
#adversary-training-page-header h1 {max-width: 325px}
#adversary-training-page-banner {background-image: url(/assets/img/plane-flying-logo-red-landscape.jpg)}

@media (max-width: 767px) {
  #adversary-training-page-header {background-position: bottom left}
}

/* - - - - - - - ADVERSARY TRAINING - END - - - - - - - - */





/* - - - - - - - ISR SERVICES - START - - - - - - - */

#isr-services-page-header {background-image: url(/assets/img/engineer-torch-red-landscape.jpg)}
#isr-services-page-banner {background-image: url(/assets/img/cockpit-page-header.jpg)}

/* - - - - - - - ISR SERVICES - END - - - - - - - - */





/* - - - - - - - CONTACT US - START - - - - - - - */

#contact-us .page-header {background-image: url(/assets/img/plane-takeoff-front-red-landscape.jpg)}

.enquiry-form {max-width: 730px; margin: 0 auto; padding: 75px 0 45px}
.enquiry-form p {text-align: center; display: block; max-width: 575px; margin: 0 auto 45px}
.enquiry-form .row-1 {display: grid; grid-template-columns: 1fr 1fr; gap: 20px}
.enquiry-form .row-2 {display: flex; justify-content: space-between; align-items: center; padding-top: 30px}
.enquiry-form .row-2 .form-group {padding-bottom: 0}
.enquiry-form label {font-weight: 500; font-family: 'Styrene A Web Medium'}

#contact-us .two-col-img-txt p {margin-top: 0}

#contact-us .location {margin-top: 35px}
#contact-us .location span {display: block}
#contact-us .location .title {font-weight: 500; font-family: 'Styrene A Web Medium'}
#contact-us .location .address {display: block; padding-bottom: 15px}

@media (max-width: 767px) {
  .enquiry-form .row-1,
  .enquiry-form .row-2 {display: block}
  .enquiry-form .row-2 .form-group {padding-bottom: 30px}
}

/* - - - - - - - CONTACT US - END - - - - - - - - */





/* - - - - - - - LATEST NEWS - START - - - - - - - */

#latest-news-banner-1 {gap: 0; background-image: url(/assets/img/plane-flying-logo-red-landscape.jpg)}
#latest-news-banner-1 h1 {margin-bottom: 20px}

/* - - - - - - - LATEST NEWS - END - - - - - - - - */





/* - - - - - - - NEWS POST - START - - - - - - - */

article.single-post header {position: relative}
article.single-post header h1 {display: block; padding: 0 8%; margin-top: 60px}
article.single-post .content {padding: 0 8%}

@media (max-width: 767px) {
  article.single-post header h1 {padding: 0; margin-top: 45px}
  article.single-post .content {padding: 0}
}

/* - - - - - - - NEWS POST - END - - - - - - - - */





/* - - - - - - - SUPPLIER INFORMATION - START - - - - - - - */

#supplier-information-page-header {background-image: url(/assets/img/ship-red-landscape.jpg)}
#supplier-information-page-header h1 {max-width: 375px}

/* - - - - - - - SUPPLIER INFORMATION - END - - - - - - - - */





/* - - - - - - - STATUTORY INFORMATION - START - - - - - - - */

#statutory-information-page-header {background-image: url(/assets/img/plane-hangar-front-red-landscape.jpg)}
#statutory-information-page-header h1 {max-width: 375px}

/* - - - - - - - STATUTORY INFORMATION - END - - - - - - - - */





/* - - - - - - - SEARCH - START - - - - - - - */

#search .page-header {background-image: url(/assets/img/engineer-duo-red-landscape.jpg)}
#search .search-listings {padding: 60px 5% 75px}

.search-listings .submit-wrapper {width: 100%; display: flex; justify-content: flex-end}
.search-term {display: block; font-size: 20px; font-family: 'Styrene A Web Regular'; font-weight: 400; padding: 0 30px 45px}
.search-listings .listing {padding: 35px 45px 35px 30px; display: flex; align-items: flex-end; justify-content: space-between; gap: 15px}
.search-listings .listing .h3 {margin: 0 0 10px}
.search-listings .listings-nav {display: flex; justify-content: flex-end; padding: 45px 0 0}

@media (max-width: 767px) {
  #search .search-listings {padding: 45px 0 60px}

  .search-term {padding: 20px 0 35px}
  .search-listings .listing {padding: 35px 0px 35px}
}

/* - - - - - - - SEARCH - END - - - - - - - - */



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
   * Printing Tables:
   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}