/*************** VARIABLES ***************/
:root {

    /* Common Colours */
    --color-info: #3b71ca;
    --color-success: #20630f;
    --color-warning: #ff8503;
    --color-danger: #dc3545;

    /* Brand Colour */
    --jm-topnavbg: #000D0F;
    --jm-black: #000D0F;
    --jm-yellow: #b8af08;
    --jm-green: #1ea306;
    --jm-red: #af0909;
    --jm-gold: #c4990c;

    --color-brandMain: #303D4E;
    --color-brandText: #c4990c;
    --color-brandMainRGB: 32, 99, 15;

    --color-textWithBrandBackground: #ffffff;

    /* Body */
    --body-backgroundColour: #161c20;

    /* Text Configs */
    --text-lightColour: #ffffff;
    --text-darkColour: #000000;

    /* Icon Configs */
    --icon-lightFill: #ffffff;
    --icon-darkFill: #000000;
    --icon-fadedFill: #d7d7d7;

    /* Spacings */
    --spacing-tiny: 5px;
    --spacing-small: 10px;
    --spacing-medium: 20px;
    --spacing-large: 30px;
    --spacing-extralarge: 40px;
   
    /* Footer Configs */
    --footer-textFontSize: 0.75rem;
    --footer-infoFontSize: 0.75rem;
   
}

@media only screen and (min-width: 2560px) {
    :root {
        font-size: 24px;
    }
}

/*************** EASEPICK STYLING ***************/


/*************** DEFAULT STYLING ***************/

@font-face{font-family:'Product Sans';src:url('/fonts/Product Sans Regular.ttf') format('truetype')}
*{font-family:'Product Sans',sans-serif}
html {
    color: var(--color-brandText);
}
body {
    display: grid;
    grid-template-rows: max-content auto min-content;
    min-height: 100vh;
    margin: 0px;
    color: var(--color-brandText);
    background: var(--body-backgroundColour);
}

h1,
h2,
h3,
h4,
h5,
dt {
    color: var(--color-brandText);
}


/*************** GENERIC STYLES ***************/


/* Icons */
.icon {
    cursor: pointer;
    fill: var(--icon-lightFill);
}

.icon-dark {
    cursor: pointer;
    fill: var(--icon-darkFill);
}

.icon-faded {
    fill: var(--icon-fadedFill);
}

.icon-success {
    fill: var(--color-success);
}

.icon-danger {
    fill: var(--color-danger);
}

.icon-info {
    fill: var(--color-info);
}

.icon-warning {
    fill: var(--color-warning);
}

.icon-hover-dark:hover {
    cursor: pointer;
    fill: var(--icon-darkFill);
}

/*************** SPECIFIC STYLES ***************/

/* Main */
.page-main {
    padding: 0;
}

.main-content {
    padding: 1%;
}


.dj-info-block {
    margin-top: 20px;
    padding: 40px 120px;
    color: var(--text-lightColour);
    border: 1px solid var(--jm-gold);
    line-height: 1.5rem;
}

.dj-info-block.golden {
    background-color: var(--jm-gold);
    color: var(--jm-black); 
    border: none;
}

audio::-webkit-media-controls-panel {
    background-color: var(--jm-gold);
  }
  
  audio::-webkit-media-controls-time-remaining-display {
    color: #fff;
  }


/* Nav */
/* Add a black background color to the top navigation */
.dj-topnav {
    background-color: var(--jm-topnavbg);
    overflow: hidden;
    border-bottom: 1px solid var(--jm-gold);

}

/* Style the links inside the navigation bar */
.dj-topnav a {
    float: left;
    display: block;
    color: var(--jm-gold);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.dj-topnav a:hover {
    background-color: var(--jm-black);
}

/* Hide the link that should open and close the topnav on small screens */
.dj-topnav .icon {
    display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .dj-topnav a:not(:first-child) {display: none;}
  .dj-topnav a.icon {
    float: right;
    display: block;
  }

  .dj-info-block {
    padding: 40px 80px;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .dj-topnav.responsive {position: relative;}
  .dj-topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .dj-topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


/* Footer */
.page-footer {
    background: var(--color-brandMain);
    padding: var(--spacing-small);
}

.footer_mail {
    color: var(--jm-gold);
}

.page-footer_heading {
    color: var(--color-textWithBrandBackground);
}

.page-footer_text {
    color: var(--color-textWithBrandBackground);
    font-size: var(--footer-textFontSize);
}

.page-footer_text a[href^="tel"] {
    color: inherit;
    text-decoration: none;
}

.page-footer_info {
    display: flex;
    flex-wrap: wrap;

    flex-direction: column;

    column-gap: var(--spacing-medium);
    row-gap: var(--spacing-small);

    font-size: var(--footer-infoFontSize);
}


.align-center,.waviy, body footer {
    text-align: center;
}
.waviy span, body footer {
    position: relative;
}

@font-face {
    font-family: "Product Sans";
    src: url("/fonts/Product Sans Regular.ttf") format("truetype");
}
* {
    font-family: "Product Sans", sans-serif;
}
@keyframes rotation {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(359deg);
    }
}
@-webkit-keyframes rotation {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(359deg);
    }
}

* {
  box-sizing: border-box;
}

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.ticker-wrap {
  position: fixed;
  top: 0;
  width: 100%;
  overflow: hidden;
  background-color: #455060;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #27303f;
  padding-left: 100%;
  box-sizing: content-box;
}
.ticker-wrap .ticker {
  display: inline-block;
  white-space: nowrap;
  padding-right: 100%;
  box-sizing: content-box;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 60s;
  animation-duration: 60s;
}
.ticker-wrap .ticker__item {
  display: inline-block;
  color: white;
  margin-right: 40px;
}

.ticker-wrap .ticker__item .flight-no {
  color: #FF0000;
  font-weight: 600;
  margin-right: 10px;
}

.ticker-wrap .ticker__item .flight-dets {
  color: #FFFFFF;
  font-weight: 500;
  margin-right: 10px;
}

.ticker-wrap .ticker__item .flight-plane {
  color: #989EA7;
  font-weight: 500;
  margin-right: 10px;
}

.waviy {
    position: relative;
}
.waviy span {
    display: inline-block;
    font-size: 2em;
    text-transform: uppercase;
    animation: 10s infinite flip;
    animation-delay: calc(0.1s * var(--i));
}
@keyframes flip {
    0%,
    80% {
        transform: rotateY(360deg);
    }
}
.rotate {
    animation: 8s linear infinite rotation;
}

.letter {
    display: inline-block;
    font: bold 8rem "Product Sans", sans-serif;
}
body main .hp-introduce_logo {
    text-align: center;
}

body main .bg-topimage {
    background: url('/images/hp-banner.webp') no-repeat; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (max-width: 600px) {
    .letter {
        display: inline-block;
        font: bold 4rem "Product Sans", sans-serif;
    }
    .waviy span {
        font-size: 1.4em;
    }
    body main .hp-introduce_logo {
	text-align: center;
    }
}
.bounce {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font: bold 8rem "Product Sans", sans-serif;
    white-space: nowrap;
}
.tagline {
    font: bold 2rem "Product Sans", sans-serif;
}
.letter:nth-child(5) {
    transform: rotate(0deg);
}
.letter:nth-child(5):hover {
    transform: rotate(-30deg);
}