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

    /* Common Colours */
    --color-blue: #3b71ca;
    --color-green: #20630f;
    --color-orange: #ff8503;
    --color-red: #dc3545;
    --color-black: #33312E;
    --color-grey: #B0BBBF;

    /* Brand Colour */
    --color-brandText: #33312E;

    /* Body */
    --body-backgroundColour: #FFB703;

    /* 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} */


@font-face{font-family:'Outfit-Regular';src:url('/fonts/Outfit-Regular.ttf') format('truetype')}
@font-face{font-family:'Outfit-Bold';src:url('/fonts/Outfit-Bold.ttf') format('truetype')}
@font-face{font-family:'Outfit-Light';src:url('/fonts/Outfit-Light.ttf') format('truetype')}
@font-face{font-family:'Outfit-Medium';src:url('/fonts/Outfit-Medium.ttf') format('truetype')}
@font-face{font-family:'Outfit-Thin';src:url('/fonts/Outfit-Thin.ttf') format('truetype')}
*{font-family:'Outfit-Regular',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 ***************/


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

/* Main */
.page-main {
    height: 80vh;
}

/* Footer */
footer {
    text-align: center;
    width: 100vw;
}

footer p {
    margin: 5px 0;
    font: 0.8rem "Outfit-Thin", sans-serif;
    font-weight: 100;
}

@keyframes svg-col {
    /* 20% {fill:var(--color-black) }
    40% {fill:var(--color-red)}
    60% {fill:var(--color-green)}
    80% {fill:var(--color-blue)}
    100% {fill:var(--color-black)} */
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(180deg);
    }

}

.site-logo {
    width: 256px;
    height: 256px;
    fill: var(--color-black);
    animation: svg-col 4s linear infinite;
}

.site-title {
    display: block;
    margin: 0;
    font: 6rem "Outfit-Regular", sans-serif;
    line-height: 10vh;
    white-space: nowrap;
}


.waviy span {
    position: relative;
    font: 1.6rem "Outfit-Thin", sans-serif;
    font-weight: 100;
    color: var(--color-brandText);
}

@keyframes rotation {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(359deg);
    }
}
@-webkit-keyframes rotation {
    0% {
        transform: rotate(0);
    }
    100% {
        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.2s * var(--i));
}
@keyframes flip {
    0%,
    80% {
        transform: rotateY(360deg);
    }
}
.rotate {
    animation: 8s linear infinite rotation;
}

.letter {
    display: inline-block;
    font: 8rem "Outfit-Bold", sans-serif;
}

.emailaddr {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}

.emailaddr svg {
    fill: var(--color-black);
}

.emailaddr span {
    font: 1.6rem "Outfit-Thin", sans-serif;
    font-weight: 100;
    margin-left: 10px;
}

body main .hp-introduce_logo {
    text-align: center;
}

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