/*! normalize.css v3.0.2 | MIT License | git.io/normalize */img,legend{border:0}legend,td,th{padding:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0}

/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* https://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Base Styles
- Grid
- Typography
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {	
	color: #555;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.7em; /* currently ems cause chrome bug misinterpreting rems on body element */
	font-weight: 400;
	background: #fff;
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	background-color: #fff;
	
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	text-rendering: optimizeLegibility;
	font-smoothing: antialiased;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	text-shadow: rgba(0,0,0,.01) 0 0 1px;	
}
  
  
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  /* RELEASE ITEM 11d, PROPOSAL 10: 1180px -> 1320px. At a 1440px viewport the
     page stopped at 1180 and left 260px empty. Nothing was BROKEN there -
     measured, no sideways scroll, no overlap, no new contrast failure - so
     this is filling space rather than fixing a fault.

     ⚠️ IT ONLY WORKS BECAUSE PROPOSAL 7 WENT FIRST. Widening the container
     without capping the text would have taken the line from 81 characters to
     past 90, which is the opposite of the readability this pass is for. The
     text caps at 66rem; the tables, images and panels take the extra width. */
  max-width: 1320px;
  margin: 40px auto 0;
  padding: 0px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 100%; }
  .container.narrow {
    max-width: 1000px; }
}

/* For devices larger than 550px */
@media (min-width: 750px) {
  .container {
    width: 96%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}




/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  /* RELEASE ITEM 11d, PROPOSAL 2: was 400, the same weight as body text.
     700 rather than the 600 the proposal sheet mocked - 400 and 700 are the
     only weights this site loads, so 600 would be a synthesised bold. The
     rule that actually governs ARTICLE headings is `.content h1..h5` in
     dft.css, which is more specific than this and had to change too. */
  font-weight: 700; }
/* RELEASE ITEM 11d, PROPOSAL 1. BUGS.md P3-58.
   These two read `letter-spacing: -.0.3rem` - TWO decimal points, which is not
   a number, so a browser discarded the whole declaration and said nothing.
   Confirmed by reading the value back off a rendered h1 rather than by reading
   this file: it computed to `normal` at 375px and at 1200px.

   ⚠️ SO THIS IS NOT A RESTORATION. Nobody has ever seen the tightening these
   lines ask for, on any page, and there is no "before" to return to. -0.02em is
   chosen rather than the -0.03rem the typo probably intended: em is
   proportional, so one value serves both levels and keeps working if a size
   changes, and at 34px it is -0.68px, the conventional optical correction for
   text that large. The other reading of the typo, -0.3rem, would be -3px per
   character and is obviously not what anyone wanted. */
h1 { font-size: 3.4rem; line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-size: 2.5rem; line-height: 1.25; letter-spacing: -0.02em; }
h3 { font-size: 2.0rem; line-height: 1.3; }
h4 { font-size: 1.7rem; line-height: 1.35; }
h5 { font-size: 1.5rem; line-height: 1.4; }
/* PROPOSAL 4: h6 was the only 13px text on the site at 1.4 leading. */
h6 { font-size: 1.3rem; line-height: 1.6; }

/* RELEASE ITEM 11d, PROPOSAL 6. Nothing in the article column responded to
   screen size at all: the page heading measured 34px at 375px wide AND at
   1440px, and the whole type inventory came back byte-identical at all four
   widths. A 34px heading on a 375px screen takes three lines.

   Each level steps DOWN ONE STEP of the same six-step scale - 34->25, 25->20,
   20->17 - rather than to a new set of phone-only sizes, so proposal 4 still
   holds on a phone. h4, h5 and h6 are left alone: they are already at the
   bottom of the scale and stepping them down would put text under 13px.

   ⚠️ BODY TEXT IS DELIBERATELY NOT TOUCHED. 17px is right on a phone, and the
   proposal said so. Shrinking it is the reflex that makes phone pages worse. */
@media (max-width: 550px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2.0rem; }
  h3 { font-size: 1.7rem; }
}

/* RELEASE ITEM 11d, PROPOSAL 2. BUGS.md P3-59.
   The @media (min-width: 550px) block that stood here re-declared all six
   levels and is DELETED, not edited. It was the cause of the defect rather
   than a casualty of the fix: it pushed h6 from 1.5rem up to 1.8rem, which is
   exactly h4's and h5's size, so on any screen wider than 550px three heading
   levels rendered identically. Four of its six declarations restated the value
   already above it and changed nothing at all.

   The scale is now 34 / 25 / 20 / 17 / 15 / 13, one step between each level,
   and it is the same six sizes proposal 4 uses for the whole site - the
   headings are not a separate system.

   ⚠️ WEIGHT IS THE OTHER HALF AND IT IS NOT COSMETIC. Every level was weight
   400 - the same as body text - so the only thing marking a heading was its
   size, and between h1 and h2 that was 4px. See the font-weight above. */
h1.inline, h2.inline, h3.inline, h4.inline, h5.inline, h6.inline {
  display: inline-block;
  margin: 0 0.3em 0 0; }

p {
  margin-top: 0; }



/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  padding: 12px 30px;
  color: #555;
  /* OWNER, 2026-08-19: "give them a font weight of 700".
     Not a reversal of the earlier "too bold" note, and worth saying why: that
     complaint was ALL CAPS with letter-spacing, and with those gone the labels
     read light. 700 is also a weight this site actually loads - 400 and 700 are
     the only two - so nothing here is a browser-synthesised bold. */
  font-weight: 700;
  text-align: center;
  /* OWNER, 2026-08-19, item 11e2: "the text isn't clear in them and they are
     too bold".

     THE CAUSE IS NOT WEIGHT. Every button on the site computes to 400 -
     measured across an airline page, a route page, the contact page and the
     home page, 50-odd buttons, all w400. What reads as bold is ALL CAPS with
     letter-spacing, and on the related-links chips that is 13px all-caps:
     capitals strip the word shape a reader recognises, and at 13px there is no
     room to put it back. "BANGKOK DON MUANG" is genuinely harder to read than
     "Bangkok Don Muang".

     letter-spacing goes with it: 0.5px is a trick for setting capitals, and it
     works against lower case.

     ⚠️ ONE BUTTON STAYS SHOUTING AND CSS CANNOT FIX IT: the flight search
     submit is <span class="submit-text"> SEARCH</span> in
     includes/inc.flight-search.php - the capitals are in the MARKUP, not in a
     text-transform. Left alone here; it is a content change, not a style one. */
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  background-color: transparent;
  border: 1px solid #555;
  cursor: pointer;
  border-radius: 3px;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #000;
  border-color: #000;
  /* OWNER, 2026-08-19: `.button` goes to 700. This hover/focus rule restated
     400, so a button would have UN-BOLDED under the cursor - a weight change
     on hover also reflows the label and nudges everything beside it. It has to
     match the resting weight, or be deleted; matching is the smaller diff. */
  font-weight: 700;
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #fff;
  /* item 11e2: the border was `1px #222 solid` - a near-black outline drawn
     round a saturated red block, which is most of what made the primary button
     look heavy. The button already has a shape; it does not need an outline in
     a colour that appears nowhere else on it. Same red, so nothing about the
     4.90:1 white-on-red contrast changes. */
  background-color: #CE3A36;
  border: 1px solid #CE3A36; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;border: 1px #222 solid;
  opacity: 1;
  box-shadow: 0px 0px 5px 2px rgba(255,85,86,1); }

.button.fullw,
button.fullw,
input.fullw,
textarea.fullw,
select.fullw {
	width: 100%;
}

/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  font-weight: 400;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #2A72A8;
  outline: 0; }
label {
	cursor: pointer;
}
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 700; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem; }
li {
  margin-bottom: 1rem; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}