/*!
Theme Name: _ftm
Theme URI: 
Author: 
Author URI: 
Description: 
License URI: 
Text Domain: _ftm
Tags: 
*/
@font-face {
  font-family: 'ftm';
  src:
    url('fonts/ftm.ttf?e9qd3z') format('truetype'),
    url('fonts/ftm.woff?e9qd3z') format('woff'),
    url('fonts/ftm.svg?e9qd3z#ftm') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="ftmicon-"], [class*=" ftmicon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'ftm' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ftmicon-user:before {
  content: "\f007";
}
.ftmicon-search-plus:before {
  content: "\f00e";
}
.ftmicon-shopping-cart:before {
  content: "\f07a";
}
.ftmicon-dollar:before {
  content: "\f155";
}
.ftmicon-instagram:before {
  content: "\f16d";
}
.ftmicon-pinterest:before {
  content: "\f231";
}
.ftmicon-shopping-basket:before {
  content: "\f291";
}
.ftmicon-search:before {
  content: "\f002";
}
.ftmicon-email:before {
  content: "\f003";
}
.ftmicon-heart:before {
  content: "\f004";
}
.ftmicon-check:before {
  content: "\f00c";
}
.ftmicon-close:before {
  content: "\f00d";
}
.ftmicon-play-circle-o:before {
  content: "\f01d";
}
.ftmicon-phone:before {
  content: "\f095";
}
.ftmicon-twitter:before {
  content: "\f099";
}
.ftmicon-facebook:before {
  content: "\f09a";
}
.ftmicon-facebook-f:before {
  content: "\f09a";
}
.ftmicon-credit-card:before {
  content: "\f09d";
}
.ftmicon-linkedin:before {
  content: "\f0e1";
}
.ftmicon-angle-left:before {
  content: "\f104";
}
.ftmicon-angle-right:before {
  content: "\f105";
}
.ftmicon-angle-up:before {
  content: "\f106";
}
.ftmicon-angle-down:before {
  content: "\f107";
}
.ftmicon-mobile:before {
  content: "\f10b";
}
.ftmicon-mobile-phone:before {
  content: "\f10b";
}
.ftmicon-calendar:before {
  content: "\f133";
}
.ftmicon-youtube:before {
  content: "\f167";
}
.ftmicon-support:before {
  content: "\e904";
}
.ftmicon-first-tracks:before {
  content: "\e900";
}





/* CSS Variables - These may be overwritten by child theme */
:root {
	
	--max_width_text: 45em;
	--max_width_wide: 1200px;
	--max_width_article: 790px;
	
	/* Default vertical spacing unit is 16px */
	--space_unit: 1em;
	--space_xxxsmall: calc( 0.125 * var(--space_unit, 1em) ); /* 2px */
	--space_xxsmall: calc( 0.25 * var(--space_unit, 1em) );   /* 4px */
	--space_xsmall:   calc( 0.5 * var(--space_unit, 1em) );   /* 8px */
	--space_small:    calc( 0.75 * var(--space_unit, 1em) );  /* 12px */
	--space_normal:   var(--space_unit, 1em);                 /* 16px */
	--space_medium:   calc( 1.25 * var(--space_unit, 1em) );  /* 20px */
	--space_large:    calc( 1.5 * var(--space_unit, 1em) );   /* 24px */
	--space_xlarge:  calc( 2.5 * var(--space_unit, 1em) );    /* 40px */
	--space_xxlarge: calc( 4 * var(--space_unit, 1em) );      /* 64px */
	--space_xxxlarge: calc( 5.5 * var(--space_unit, 1em) );   /* 88px */
	
	/* Elastic gutters - These could be redifined if needed inside components */
	--gutter_width: 6.25%;
	
	--border_radius: 3px;
	
	/* This sort of thing seems useful... */
	--max_width_plus_gutters: calc( var(--max_width) + (var(--gutter_width) * 2) );
	
	
	/* Given a primary color, can we use vars to set up some default colors? */
	/* NOTE: This does not work in IE - see this: 
		https://caniuse.com/#search=calc
	*/
	/*
	--primary_hue: 185;
	--primary_saturation: 86%;
	--primary_lightness: 46%;
	
	--contrast_hue: calc( var(--primary_hue) + 180 );
	
	--darker_lightness: calc( var(--primary_lightness) - 10%);
	--lighter_lightness: calc( var(--primary_lightness) + 10%);
	
	
	--primary_color: hsla( var(--primary_hue), var(--primary_saturation), var(--primary_lightness), 1);
	--primary_color_darker: hsla( var(--primary_hue), var(--primary_saturation), var(--darker_lightness), 1);
	--primary_color_lighter: hsla( var(--primary_hue), var(--primary_saturation), var(--lighter_lightness), 1);
	
	--contrast_color: hsla( var(--contrast_hue), var(--primary_saturation), var(--primary_lightness), 1);
	--contrast_color_darker: hsla( var(--contrast_hue), var(--primary_saturation), var(--darker_lightness), 1);
	--contrast_color_lighter: hsla( var(--contrast_hue), var(--primary_saturation), var(--lighter_lightness), 1);
	*/
	
	/* Probably better to just define things simple */
	--primary_color_light: #1CE; /* light blue */
	--primary_color: #10ADED;    /* blue */
	--secondary_color: #BADA55;  /* light green */
	--contrast_color: #FB1;      /* yellow */
	--error_color: #B00B1E;      /* red */
	--success_color: #60DE55;    /* green */
	--notice_color: #FB1;
	
	/* 6-6-19 - let's take advantage of css color keywords: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value */
	--color_success: green;
	--color_error: red;
	--color_notice: wheat;
	
	--gray_xxlight: #fafafa;
	--gray_xlight: #f8f8f8;
	--gray_light: #efefef;
	--gray: #ececec;
	--gray_dark: #ababab;  
	--gray_xdark: #666;
	
	--text_color: #1A1A1A;
	--heading_color: #111;
	
	--text_font: roboto;
	
	--link_color: var(--primary_color);
	--border_color: var(--gray_light);
	
	--button_text_color: #fff;
	
	--box_shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
	
	
	
	--font_size_h1: 2rem;
	--font_size_h2: 1.5rem;
	--font_size_h3: 1.25rem;
	--font_size_h4: 1rem;


	
}


html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}

body {
	min-width: 320px;
	font-family: var(--text_font, sans-serif);
	color: var(--text_color, inheirt);
}

h1,h2,h3,h4,h5,h6 {
	font-family: var(--heading_font, inherit);
	color: var(--heading_color, inherit);
	margin: 1rem 0;	
}



hr {
	background-color: var(--border_color);
	border: 0;
	height: 1px;
}

ul, ol {
	margin: var(--space_normal) 0;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

.menu,
.sub-menu {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Utility class - move? */
.menu.inline {
	margin: -0.5em;	
}
.menu.inline li {
	display: inline-block;
	margin: 0.5em;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dl {
	margin: var(--space_normal) 0;	
}
dl dl {
	margin: 0;	
}
dt {
	font-weight: bold;
}

dd {
	margin: 0 0 0 1em;
}

dl.inline dt,
dl.inline dd {
	display: inline;
	margin: 0;	
}
dl.inline dd:after {
	content: '\A';
	white-space: pre;	
}


dl.spread dt {
	float: left;
	clear: both;	
}
dl.spread dd {
	float: right;	
}
dl.spread:after {
	content: '';
	display: table;
	clear: both;	
}

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

figure {
	margin: var(--space_normal) 0;
	/* Extra wide images within figure tags don't overflow the content area. */
}

/* Not inside galleries */
.gallery figure {
	margin: 0;
	box-sizing: border-box; /* For inside swiper galleries */	
}

table {
	margin: var(--space_normal) 0;
	width: 100%;
	height: auto;
}



.strong,
.bold {
	font-weight: bold;	
}

.bigger {
	font-size: 1.25em;	
}

.ajax-updating {
	opacity: 0.5;	
}


/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
	color: var(--link_color, royalblue);
}

a:visited {
	
}

a:hover, a:focus, a:active {
	
}

a:focus {
	outline: thin dotted;
}

a:hover, a:active {
	outline: 0;
}

button,
.button {
	text-decoration: none;
	display: inline-block;
	border-radius: var(--border_radius);
	padding: var(--space_xsmall) var(--space_small);
	background-color: var(--primary_color);
	color: inherit;
	line-height: inherit;
	color: var(--button_text_color);
	border: var(--space_xxsmall) solid rgba(0,0,0,0.125);	
}

button.ghost,
.button.ghost {
	background-color: transparent;
	color: inherit;
	border: 1px solid currentColor;	
}

button.white,
.button.white {
	background-color: white;
	color: var(--primary_color);	
}

button.accordion,
.button.accordion {
	background-color: transparent;
	color: inherit;
	border: 1px solid var(--border_color);
	width: 100%;
	text-align: left;
	display: flex;
	align-items: center;
	border-radius: var(--border_radius);	
}
button.accordion:after,
.button.accordion:after {
	font-family: 'ftm' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	content: "\f107";
	margin-left: auto;
}
button.accordion.toggled:after,
.button.accordion.toggled:after {
	content: "\f106";
}


.angle-right {
	display: flex;
	align-items: center;
	text-decoration: none;
	/* color: inherit; /* Not sure about this, but seems right... Not the type of link to be used in content. */
}
.angle-right:after {
	font-family: 'ftm' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	
	
	content: "\f105";
	margin-left: 0.5rem;
}


.disabled, [disabled] {
	opacity: 0.5;	
}


.edit-link {
	float: right;
	margin: 0;	
}


/*--------------------------------------------------------------
## Utility class to use toggling elements
--------------------------------------------------------------*/
.toggles-element-container {
	position: relative;	
}
.toggles {
	transform-origin: top right;
	transition: transform 0.25s ease-out, opacity 0.25s ease-out 0.12s;	
}

.toggled-off {
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: -9999em;
	transform: scale(0);
	opacity: 0;
}
.toggled-on {
	visibility: visible;
	position: static;
	transform: scale(1);
	opacity: 1;
}



/*--------------------------------------------------------------
## Pagination 
--------------------------------------------------------------*/
.ftm-posts-pagination-nav {
	margin: var(--space_xlarge) 0;
	padding: 0 var(--gutter_width);
}
.ftm-posts-pagination-nav-inner {
	max-width: var(--max_width_wide);
	margin: 0 auto;	
}
.ftm-posts-pagination {
	display: flex;
	justify-content: space-between;	
}
.ftm-posts-pagination a {
	text-decoration: none;
	color: inherit;	
}

/* WC Specific */
.wc-product-columns .ftm-posts-pagination-nav {
	padding: 0;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/

/* NOTE: This will likely change */

.site-header-main {
	position: relative;	
}

.main-navigation .sub-menu {
	position: absolute;
	top: -9999em;
	left: -9999em;
}
.main-navigation li.toggled-on-load > .sub-menu,
.main-navigation li.toggled > .sub-menu {
	position: static;
}


/* Menu toggle button */
.menu-toggle {
	background: none;
	border: none;
	background-color: transparent; 
	border-radius: 0;
	position: absolute;
	top: 50%;
	right: var(--gutter_width);
	width: 32px;
	height: 32px;
	padding: 0 2px;
	transform: translateY(-50%);
	z-index: 12;
}
.menu-toggle-bar {
	display: block;
	height: 4px;
	margin: 4px 0;
	border-radius: 4px;
	background-color: var(--primary_color);	
	
	/*transition: 0.25s ease-out;*/
}
.toggled > .hamburger-middle {
	opacity: 0;
}
.toggled > .hamburger-top {
	transform: translateY(8px) rotate(-45deg);
}
.toggled > .hamburger-bottom {
	transform: translateY(-8px) rotate(45deg);
}


/* Main Navigation */
.mobile-menu {
	visibility: hidden;
	position: absolute;
	top: -9999em;
	left: -9999em;
	background-color: #fff;
	box-shadow: var(--box_shadow);
	width: 100%;
	padding: var(--space_large) 0;
	transform: scale(0);
	transform-origin: top right;
	transition: transform 0.25s ease-out;
	z-index: 10;
}
.mobile-menu.toggled {
	visibility: visible;
	top: 100%;
	left: auto;
	right: 0;
	transform: scale(1);	
}


.main-navigation li {
	padding: var(--space_small) var(--gutter_width);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
.main-navigation .menu > li.toggled {
	padding-bottom: 0;
}
.main-navigation .sub-menu-toggle {
	margin-left: auto;
	padding: 0;
	width: 30px;
	font-size: 1.25em;
	background-color: transparent;
	color: inherit;
	align-self: center;
}
.sub-menu-toggle:after {
	font-family: 'ftm' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.sub-menu-toggle[aria-expanded="false"]:after {
	content: "\f107";
}
.sub-menu-toggle[aria-expanded="true"]:after {
	content: "\f106";
}
.main-navigation a:not(.button) {
	text-decoration: none;
	color: inherit;	
}
.menu-item-has-children > a {
	max-width: calc(100% - 50px);	
}

.main-navigation .sub-menu {
	width: 100%;
	visibility: hidden;
	transition: transform 0.25s ease-out;
	transform: scale(0);
	transform-origin: top right;	
}
.main-navigation .toggled-on-load > .sub-menu,
.main-navigation .toggled > .sub-menu {
	visibility: visible;
	transform: scale(1);
}
.main-navigation .sub-menu li {
	padding-right: 0;	
}


/*--------------------------------------------------------------
# Site Notices
--------------------------------------------------------------*/

/*
.ft-notice-bar {
	background-color: var(--contrast_color);
	padding: 0 var(--gutter_width);	
}

.ft-notice-bar-inner {
	display: flex;
	flex-direction: row-reverse;
	max-width: var(--max_text_width);
	margin: 0 auto;
}
*/

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.entry-header,
.entry-content,
.entry-footer {
	padding: 0 var(--gutter_width);
	margin: var(--space_normal) auto;
}

.entry-header-wrapper,
.entry-content-wrapper,
.entry-footer-wrapper {
	width: 100%;
	max-width: var(--max_width_article);
	margin: auto;
}

.blog .entry-header-wrapper,
.archive .entry-header-wrapper {
	max-width: var(--max_width_wide);	
}


/* Posts / Comment Navs */
.site-main .comment-navigation, 
.site-main .posts-navigation, 
.site-main .post-navigation {
	margin: 0 1em; 
	overflow: hidden; /* Test this - does it contain the floats? */
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	float: left;
	width: 20%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	float: right;
	text-align: right;
	width: 20%;
}


/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/

.site-aside {
	padding: 0 var(--gutter_width);	
}

.widget {
	margin: var(--space_large), auto;
}

.widget select {
	max-width: 100%;
}





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

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/







/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
	max-width: 50%;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
	max-width: 50%;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}




/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
/*
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}
*/

.entry-content:after,
.entry-footer:after {
	content: '';
	display: table;
	clear: both;
}




/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
	display: block;
}

/*
.hentry {
	margin: 0 0 1.5em;
}
*/
/*
.updated:not(.published) {
	display: none;
}
*/

.page-links {
	clear: both;
}









/* Featured images get there own styling, eventually they might be wider than the rest of the content */
.single-post-featured-image {
	margin: var(--space_large) auto;
	padding: 0 var(--gutter_width);
	
	max-width: calc( var(--max_width_article) + (var(--gutter_width) * 2) );
}




/* Post sharing menus */

.ftm-post-share {
	margin: var(--space_normal) 0
}
article > .ftm-post-share {
	--max_width: var(--max_width_article);
	padding: 0 var(--gutter_width);
	max-width: calc( var(--max_width_article) + (var(--gutter_width) * 2) );
	margin-left: auto;
	margin-right: auto;
}
.ftm-post-share-heading {
	margin: 0;
}
.ftm-post-share a {
	display: block;
	line-height: 1;
	text-decoration: none;
	font-size: 1.25em;
	color: inherit;
}


/* Color links with their brand colors? This should probably be easily overridden or put in child theme */
.post-share-facebook {
	color: #2d448b;	
}
.post-share-twitter {
	color: #21a7f3;	
}
.post-share-linkedin {
	color: #1364a8;	
}
.post-share-google-plus {
	color: #c53022;	
}
/* More? */




/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/

.comments-area {
	margin: 0 20px; 	
}

.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}


/*--------------------------------------------------------------
## Archives
--------------------------------------------------------------*/

.archive-filters {
	padding: 0 var(--gutter_width);
	margin: var(--space_normal) auto;	
}

.archive-posts-wrapper {
	padding: 0 var(--gutter_width);	
}
.archive-posts-inner {
	max-width: var(--max_width_wide);
	margin-left: auto;
	margin-right: auto;		
}
.archive-posts {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
  	grid-gap: var(--space_xlarge);
}





/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}



/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
	max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.wp-caption-text {
	margin: 0.8075em 0;
}


/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/


/* 6-3-19 - wp default gallery styles - These all need to be updated/changed */

.gallery {
	margin-bottom: 1.5em;
}
.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}
.gallery-columns-2 .gallery-item {
	max-width: 50%;
}
.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
	max-width: 25%;
}
.gallery-columns-5 .gallery-item {
	max-width: 20%;
}
.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}
.gallery-caption {
	display: block;
}


/* 6-3-19 - Added layout options to WP Gallery shortcode / functions */

/* Slider layout */
/* TODO: Remove this once the above styles get refactored */
.gallery.gallery-layout-slider {
	margin: 0;	
}

/* This maybe should exist in child theme? */
.ftm-gallery-slider-nav {
	display: flex;
	align-items: center;
	justify-content: center;	
}

/* Need to override some default swiper css */
.ftm-gallery-slider-nav .slider-pagination {
	width: auto;
	margin: 0 var(--space_large);	
}

.ftm-gallery-slider-nav .slider-button-prev,
.ftm-gallery-slider-nav .slider-button-next {
	color: var(--primarry_color);
	font-size: 1.125em;	
}







/*--------------------------------------------------------------
# Site Notices
--------------------------------------------------------------*/
.site-notice-remove {
	text-decoration: none;	
}
.site-notice.top {
	position: relative;
}
.site-notice.top .page-section {
	padding: 0;
	margin: 0;
}
.site-notice.top .site-notice-remove {
	position: absolute;
	top: var(--space_normal);
	right: var(--gutter_width);
	color: white;
}


.site-notice.top .simple-callout-inner {
	max-width: none;
	border-radius: 0;
	padding-top: var(--space_small);
	padding-bottom: var(--space_small);	
}

.site-notice.top .simple-callout-inner p {
	margin-top: var(--space_small);
	margin-bottom: 0;	
}





/*--------------------------------------------------------------
## Swiper
--------------------------------------------------------------*/
/* Swiper doesn't seem to apply styles corectly when doing fade and loop (2-27-19 swiper version:4.4.2) */
/* Styles are inline-applied to elements - but everything gets opacity 1 so you see inactive slides under the active one :( */
.swiper-container-fade .swiper-slide {
	opacity: 0 !important;
}
.swiper-container-fade .swiper-slide-active {
	opacity: 1 !important;
}



/*--------------------------------------------------------------
## Site Footer
--------------------------------------------------------------*/
.site-footer {
	margin-top: var(--space_xlarge);	
}
























/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
	outline: 0;
}















/* Following taken from HTML5 boilerplate template: https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css */

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

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