/*!
Theme Name: _ftm
Theme URI:
Author:
Author URI:
Description:
License URI:
Version: 20.7
Text Domain: _ftm
Tags:
*/







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-size: var(--font_size_text);
	font-family: var(--text_font, sans-serif);
	color: var(--text_color, inheirt);
	line-height: var(--line_height_text);
}

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


/* 1-24-20 SVG Icons */
.ft-icon {
	display: inline-block;
	line-height: 1;	
}
.ft-icon svg {
	fill: currentColor;	
}


/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers
 */
audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}


hr {
	display: block;
	height: 1px;
	margin: 1em 0;
	padding: 0;
	border: 0;
	/*border-top: 1px solid #ccc;*/
	background-color: var(--border_color);
}

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;*/ /* 1-14-22 - Antech */
}

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



/*
7-6-20 - moved to critical.css
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;
}




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

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



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








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






.menu a:not(.button) {
	color: inherit;
}

.main-navigation li.toggled-on-load > .sub-menu,
.main-navigation li.toggled > .sub-menu {
	position: static;
}


/* Menu toggle button */
.mobile-menu-toggle {
	background: none;
	border: none;
	background-color: transparent;
	border-radius: 0;

	width: 32px;
	height: 32px;
	padding: 0 2px;

	z-index: 12;
}
.navicon-bar {
	display: block;
	height: 4px;
	margin: 4px 0;
	border-radius: 4px;
	background-color: var(--primary_color);
}
.toggled > .hamburger-middle {
	opacity: 0;
}
.toggled > .hamburger-top {
	transform: translateY(8px) rotate(-45deg);
}
.toggled > .hamburger-bottom {
	transform: translateY(-8px) rotate(45deg);
}



/* Main Navigation */

/* .toggle-parents get relative positioning but we probably don't want that for the site nav? */
.main-navigation.toggle-parent {
	position: static;
}




/* Slide the menu down behind the header? */
/*
.site-branding {
	background-color: white;
}

.mobile-menu {
	background-color: white;
	box-shadow: var(--box_shadow);
	width: 100%;
	padding: var(--space_small) 0;
	z-index: 10;
	top: 100%;
	left: 0;
	transform: translateY(-100%);
}
.mobile-menu.toggled-on {
	position: absolute;
	transform: translateY(0);
}
*/


.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;
	background-color: transparent;
	color: inherit;
	border: none;
}
.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;
}
/* For really long texts running into the toggle button */
/*
.menu-item-has-children > a {
	max-width: calc(100% - 50px);
}
*/

/* TODO: Should these just get the toggles & toggled-off classes? */
/*
.main-navigation .sub-menu {
	position: absolute;
	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);
}
*/
/* Keeps the buttons aligned no matter how many levels deep */
.main-navigation .sub-menu li {
	padding-right: 0;
}




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

.entry-header-wrapper,
.entry-content-wrapper,
.entry-footer-wrapper {
	max-width: var(--max_width_wide);
	margin: 0 auto;
}
.entry-content:empty {
	display: none;	
}
*/

/* 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);*/ /* 6-17-20 (Foley) */
}

.site-aside .widget {
	/* margin: var(--space_large) auto;*/ /* 6-18-20 (Foley) */ 
}

.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_big) 0; 
	padding: 0 var(--gutter_width);
	*/
}




/* Post Meta Menus */
dl.ftm-post-meta,
.ftm-post-meta dd {
	margin: 0;
}
.ftm-post-meta dl > dd {
	display: inline;
}
.ftm-post-meta dd.not-last-term:after {
	content: ',';
}
.ftm-post-meta a {
	text-decoration: none;
}


/* Post sharing menus */
/*
.ftm-post-share {
	margin: var(--space_normal) 0;
	padding: 0 var(--gutter_width);
}
.ftm-post-share-wrapper {
	max-width: var(--max_width_article);
	margin: 0 auto;
}
.ftm-post-share-inner .menu.inline {
	white-space: nowrap;
}

.entry-header .ftm-post-share,
.entry-content .ftm-post-share,
.entry-footer .ftm-post-share,
.archive-entry-header .ftm-post-share,
.archive-entry-content .ftm-post-share,
.archive-entry-footer .ftm-post-share {
	padding: 0;
}

.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;
}
.post-share-reddit {
	color: #ff4500;
}
/* More? */




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


.comments-area {
	margin: var(--space_normal) 0;
	padding: 0 var(--gutter_width);
}
.comments-area-inner {
	max-width: var(--max_width_article);
	margin: 0 auto;
}

ol.comment-list {
	list-style: none;
	padding: 0;
}
ol.children {
	list-style: none;
	padding: 0;
	margin-bottom: 0;
	margin-left: 0;
}

.comment-list li {
	border-radius: var(--border_radius);
	border: 1px solid var(--border_color);
	padding: var(--space_normal);
}

.comment-list li + li {
	margin-top: var(--space_normal);
}

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

.bypostauthor {
	display: block;
}



/*--------------------------------------------------------------
## Archives
--------------------------------------------------------------*/
/*
.archive-posts-wrapper {
	padding: 0 var(--gutter_width);
}
.archive-posts-inner {
	max-width: var(--max_width_wide);
	margin-left: auto;
	margin-right: auto;
}
*/



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


/*--------------------------------------------------------------
## Reels
--------------------------------------------------------------*/
.reel-scrolling-active {
  position: relative;
}
.reel-scrolling-active::after {
  content: " ";
  font-size: 0;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
}
.reel-scrolling-active>* {
  pointer-events: none;
  user-select: none;
}



/*--------------------------------------------------------------
## Site Footer
--------------------------------------------------------------*/
























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