/******************************************************************************
* Base 
*
* This ITCSS layer is for unclassed element selectors and base styles.
* 
* Some of these defaults are from HTML5 Boilerplate
*
* ITCSS layers from most generic to most specific:
*  normalize -> base -> objects -> components -> utilities
******************************************************************************/

/* Typography using a modular scale of 1.2 ("minor third") */

/* CSS variables to handle colors */
:root {
    --sky-700: #1c2a31;
    --sky-600: #1f4457;
    --sky-500: #2a5c76;
    --sky-200: #a4d7f2;
    --sky-100: #daecf6;

	--fern-600: #4a6438;
    --fern-500: #517737;
    --fern-100: #e6f2dc;

    --cheese-700: #5c3e1a;
    --cheese-600: #bd5f11;
    --cheese-500: #d17c28;
    --cheese-400: #fbaf3b;
    --cheese-300: #fec46b;

	--brick-100: #de704e;
	--brick-200: #bd5f41;
	--brick-300: #8a412a;

	--teal-100: #05828b;
	--teal-200: #03656b;
	--teal-300: #025b61;

	--lime-100: #d2de38;
	--lime-200: #929c38;
	--lime-300: #666f2f;

    --grey-800: #323e44;
    --grey-700: #43535c;
    --grey-600: #627985;
    --grey-500: #95a5ad;
    --grey-400: #c0c9ce;
    --grey-300: #e0e4e7;
    --grey-200: #f1f2f3;
    --grey-100: #f9fbfb;
    --white: #ffffff;
}

/* =========================================================================
   Mobile (default): 20px baseline, 16px base font 
   ========================================================================= */
body {
    color: var(--grey-700);
	font-family: 'Helvetica Neue', Helvetica;
    font-size: 1rem;       /* 16px */
    line-height: 1.25;  /* 20px */
}

h1 {
	color: var(--grey-800);
	font-family: 'Helvetica Neue Thin';
	font-size: 2.073625rem;   /* 33.178px */
	line-height: 1.055;   /* 35px */
	margin: 0.3125rem 0 0 0;  /* One line = 40px */
}

h2 {
	color: var(--white);
	font-family: 'Helvetica Neue Medium';
	font-size: 1.728rem;  /* 27.648px */
}

h3 {
	color: var(--fern-500);
	font-family: 'Helvetica Neue Condensed Bold';
	font-size: 1.728rem;  /* 27.648px */
	line-height: 1.085;   /* 30px */
	margin: 1.875rem 0 0.3125rem 0;  /* One line = 40px + 20px base */
}

h4 {
	color: var(--grey-600);
	font-size: 1.1875rem;
}

h4,
button {
	font-family: 'Helvetica Neue Condensed Bold';
	margin: 0;
}

button {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

label {
	cursor: pointer; 
}

table,
small {
	font-size: 0.8333125rem;  /* 13.333px */
	line-height: 1.125;   /* 15px */
}

.font-smaller {
	font-size: 0.688rem;  /* 11px; made smaller to fit airborne line groups  */
}

.font-xs {
	font-size: 0.5625rem;  /* 9px; made smaller to fit airborne dates */
	letter-spacing: -0.02em;
}

/* 
* In HTML5, any line-height below the font-size is ignored, like for <small>. 
* It defaults to the parent block element's line height (which was too large 
* for <small>). To get around this, give <small> an inline-block so it can set
* its own line-height.
*/
small {
	display: inline-block;  
}

p {
	margin: 0 0 1.25rem 0;
}

b {
	font-family: 'Helvetica Neue Bold';
}

a {
	color: var(--cheese-500);
}

a:focus,
input:focus {
	border: 1px dashed var(--sky-200);
}

main ul,
main ol {
	margin: 0 0 1.25rem 0;
	padding: 0 0 0 1.25rem;
}

table {
	border-spacing: 0;
}

tr:nth-child(even) {
	background: var(--grey-200);
}

th {
	background: var(--fern-500);
	padding: 1.25rem 0.3125rem;
	text-align: left;
}

th,
th h4 {
	color: var(--fern-100);
}

td {
	padding: 0.3125rem;
	text-align: left;
}

video {
	max-width: 100%;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--grey-300);
    margin: 2.5rem 1.25rem;
    padding: 0;
}


/* =========================================================================
   Tablet: 25px baseline, 20px font
   ========================================================================= */
@media only screen and (min-width: 885px) {

	body {
		font-size: 1.25rem;      /* 20px */
		line-height: 1.25;  /* 25px */
	}

	h1 {
		font-size: 2.592rem;  /* 41.472px */
		line-height: 1.085;   /* 45px */
		margin: 0.3125rem 0 0 0;  /* One line = 50px */
	}

	h2 {
		font-size: 2.16rem; /* 34.56px */
	}
	
	h3 {
		font-size: 2.16rem;   /* 34.56px */
		line-height: 1.1574;  /* 40px */
		margin: 2.1875rem 0 0.3125rem 0;  /* One line = 50px + 25px base */
	}

	h4 {
		font-size: 1.5rem;    /* 24px */
		line-height: 1.0417;  /* 25px */
	}

	table,
	small {
		font-size: 1.0416875rem;  /* 16.667px */
		line-height: 1.2;     /* 20px */
	}

	.font-smaller {
		font-size: 0.825rem;  /* 13.2px */
	}

	.font-xs {
		font-size: 0.723rem;  /* 11.574px */ 
	}

	p {
		margin: 0 0 1.5625rem 0;
	}

	main ul,
	main ol {
		margin: 0 0 1.5625rem 0;
		padding: 0 0 0 1.5625rem;
	}

	table {
		margin: 0 1.5625rem 1.5625rem 1.5625rem;
	}

	th {
		padding: 1.5625rem 0.625rem;
	}

	td {
		padding: 0.625rem;
	}

	hr {
		margin: 3.125rem 1.5625rem;
	}

}


/* =========================================================================
   Desktop: 30px baseline, 23px font
   ========================================================================= */
@media only screen and (min-width: 1060px) {

	body {
		font-size: 1.4375rem;   /* 23px */
		line-height: 1.30434782609; /* 30px */
	}

	h1 {
		font-size: 2.9808125rem;  /* 47.693px */
		line-height: 1.0484;    /* 50px */
		margin: 0.625rem 0 0 0;   /* One line = 60px */
	}

	h2 {
		font-size: 2.484rem; /* 39.744px */
	}
	
	h3 {
		font-size: 2.484rem;  /* 39.744px */
		line-height: 1.006;  /* 40px */
		margin: 3.125rem 0 0.3125rem 0;  /* One line = 60px + 30px base */
	}

	h4 {
		font-size: 1.725rem;  /* 27.6px */
		line-height: 1.087;   /* 30px */
	}

	table,
	small {
		font-size: 1.1979375rem;  /* 19.167px */
		line-height: 1.1478;      /* 22px */
	}

	.font-smaller {
		font-size: 1.125rem;  /* 18px */
	}

	.font-xs {
		font-size: 0.998rem;  /* 15.972px */  
	}

	p {
		margin: 0 0 1.875rem 0;
	}

	main ul,
	main ol {
		margin: 0 0 1.875rem 0;
		padding: 0 0 0 1.875rem;
	}

	table {
		margin: 0 1.875rem 1.875rem 1.875rem;
	}

	th {
		padding: 1.875rem 0.625rem;
	}

	hr {
		margin: 3.75rem 1.875rem;
	}

}


/* =========================================================================
   From HTML5 Boilerplate
   ========================================================================= */

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

/*
 * Browser upgrade prompt
 */
.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================= */
@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster */
        -webkit-box-shadow: none !important;
        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:
     * 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;
    }
}