/*--- Document/Root Styles */
/* Fluid Typography: https://www.smashingmagazine.com/2016/05/fluid-typography/ */
/* Older browsers */
html { font-family: 'Raleway', 'Century Gothic', sans-serif; font-size: 16px; }

/* Modern browsers only need this one */
@media screen and (min-width: 25em){
    html { font-size: calc( 16px + (24 - 16) * (100vw - 640px) / (1168 - 640) ); }
}
  
/* Safari <8 and IE <11 */
@media screen and (min-width: 25em){
    html { font-size: calc( 16px + (24 - 16) * (100vw - 640px) / (1168 - 640) ); }
}
@media screen and (min-width: 50em){
    html { font-size: calc( 16px + (24 - 16) * (100vw - 640px) / (1168 - 640) ); }
}

/* Caps the min-size */
@media screen and (max-width: 640px){
    html { font-size: 16px; }
}
/* Caps the max-size */
@media screen and (min-width: 1168px){
    html { font-size: 24px; }
}

body {
    --coa-blue: #1596D1;
    --navy: #00496B;
    --dark-grey: #414042;
    --yellow: #E1CD00;
    --green: #007540;
    --purple: #6F5091;
}

body {
    /*-webkit-font-smoothing: antialiased;
    color: #212121;*/
    background-color: #FAFAFA;
    color: #424242;
    line-height: 1.24;
    margin: 0;
    overflow-y: scroll;
    position: relative;
}
main {
    display: block;
    position: relative;
}
body > main::after {
    /*@apply(--clear-fix)*/
    content: "";
    display: table;
    clear: both;
}

/*--- Scrollbar */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track:hover {
    background: rgba(0,0,0,.1);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,.5);
}

::-webkit-scrollbar-track {
    background: rgba(0,0,0,.05);
}

::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.25);
}

/* Resets */
button {
    color: inherit;
    font-family: inherit;
	font-size: inherit;
}
sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub { 
  top: 0.4em; 
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* Employee Links (for hidden links for those logged in) */
employee-links {
    display: none !important;
}
employee-links[visible] {
    display: block !important;
	background: #525252;
    font-size: 15px;
	padding: 0.5rem;
	text-align: right;
}
employee-links[visible] a {
    color: #FFF;
    margin: 0.5rem;
    padding: 0.5rem;
    text-decoration: none;
}

/* White-space/font-Sizing (weight, padding, margin) */
h1 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 2rem;
    margin: 0;
    text-rendering: optimizeLegibility;
}
main h2 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.5rem;
    margin: 1.5rem 0 1rem 0;
    text-rendering: optimizeLegibility;
    /* Theme */
    color: #1596D1;
    color: var(--coa-blue);
}
main p {
  margin: 0 0 1.5rem 0;
  margin: 1rem 0;
}
/* ??? */
main site-article-content h4,
main site-article-content p {
  padding: 0 1.5rem;
}

iframe,
image,
[data-ce-tag=img],
img,
video {
    /*clear: both;*/
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}
/* Polyfills */
[hidden] {
    display: none !important;
}

/* Helpers */
.align-right {
    clear: initial;
	float: right;
	margin-left: 0.5em;
}
.align-left {
    clear: initial;
	float: left;
	margin-right: 0.5em;
}
.text-center {
    text-align: center;
}
/* Hack for Houstons ACTIVE Network registration */
.text-center + table {
    width: 100%;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}
.clear-left {
    clear: left !important;
}
a.clear-left {
    display: block;
}
.clear-right {
    clear: right !important;
}
.clear {
    clear: both !important;
}
.group:after {
  content: "";
  display: table;
  clear: both;
}
.grid-center {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    width: calc(100% - 2em);
    position: relative;
}
.grid-center > * {
    display: block;
    color: initial;
    margin: 0 auto 0.318rem auto;
    text-align: center;
    max-width: 100%;
}
.grid {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    width: calc(100% - 2em);
    position: relative;
}
.grid.md-three > a {
    color: initial;
    display: block;
    margin-bottom: 8px;
    text-decoration: none;
}
.grid figure {
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
@media screen and (min-width: 1024px) {
    .grid.md-three > a {
        width: 33%;
    }
    .grid figure {
        height: 300px;
    }
    .grid figure img {
        border-radius: 4px;
        margin: 0 auto;
        margin-bottom: 5px;
        max-height: 240px;
    }
    .grid figure figcaption {
        min-height: 2.5em;
    }
}
    
/* App-Button (removed ::content from these as it breaks IE/Edge) */
app-button,
.button {
  display: inline-block;
}

    app-button > *,
    a[app-button],
    a.button {
        box-sizing: border-box;
        height: 100%;
        -webkit-appearance: none;
        outline: none;
        width: 100%;
        /* Not sure about these */
        font-weight: 600;
        padding: 0.309em 0.618em;
        text-transform: uppercase;
        text-align: center;
        /* Even less sure about these */
        border-radius: 0;
        border: 2px solid transparent;
    }
    app-button > a,
    a[app-button],
    a.button {
        color: #1596D1;
        color: var(--coa-blue);
        display: inline-block;
        text-decoration: none;
    }
    app-button > button {
        background: transparent;
        color: inherit;
        cursor: pointer;
    }
    
/* Iron-Image */
iron-image {
    background-repeat: no-repeat;
    display: inline-block;
    overflow: hidden;
    position: relative;
}
iron-image[sizing='cover'] {
    background-size: cover;
}
iron-image[sizing='contain'] {
    background-size: contain;
}
iron-image[position='center'],
iron-image[position='center center'],
iron-image:not([position]) {
    background-position: center center;
}
/* If browser support then set center center default and adjust x/y independantly here */
iron-image[position='top'] {
    background-position: top center;
}
iron-image[position='bottom'] {
    background-position: bottom center;
}
iron-image[position='left'] {
    background-position: center left;
}
iron-image[position='right'] {
    background-position: center right;
}
    
/* Content (Page) Header */
main > header {
    align-items: center;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
    /*pointer-events: none;*/
    z-index: 0;
}

/* HERO IMAGE */
/* Basically just trying to emulate background image with position: center center; */
main > header img {
    height: auto;
    min-height: 100%;
    width: auto !important;
    min-width: 100%;
    position: absolute;
    max-width: none !important;  /*Override default (responsive) img styling */
}
main > header iron-image {
    height: 100%;
    width: 100vw;
}
main > header iron-image[style] img {
    display: none !important;
}
/* Only IE as it doesn't handle flex justify-content center with absolute position children correctly  */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   main > header img {
        transform: translate(-50%,-50%);
   }
}
/* ContentTools Selector*/
main > header div.ce-element.ce-element--type-image {
	background-position: center center;
    height: 100% !important;/* Override ContentTools */
    width: 100% !important;/* Override ContentTools */
    position: absolute;
    -webkit-background-size: initial;
}

/* breadcrumb-nav (Breadcrumb) */
breadcrumb-nav {
    display: block;
}
    page-title + breadcrumb-nav {
        margin-top: 0.38rem;
    }
breadcrumb-nav ol {
	display: flex;
	flex-direction: row;
    list-style: none;
    font-size: 0.9rem;
    margin: 0;
    padding: 0;
}
/* Mostly doing this for browser/editing consistency */
breadcrumb-nav li {
	display: flex;
	flex-direction: row;
}
    breadcrumb-nav li + li::before {
        display: inline-block;
        content: '\2f';
        padding: 0 6px;
    }
breadcrumb-nav a,
breadcrumb-nav a:visited,
breadcrumb-nav a:focus,
breadcrumb-nav a:active {
    color: #FAFAFA;
    text-decoration: none;
}
breadcrumb-nav a:hover {
    text-decoration: underline;
}

/* Hero Image (pretty sure this is obsolete) */
hero-image {
    display: block;
    height: 100%;
    position: relative;
}
    hero-image img {
        height: auto;
        min-height: 100%;
        min-width: 100%;
        position: absolute;
        transform: translateY(-36%);
        transform: translateY(calc(-50% + 228px));
        width: auto;
        max-width: none;
    }
    hero-image::after {
        background-image: linear-gradient(rgba(0, 0, 0, 0.85)
                                        , rgba(0, 0, 0, 0.5) 64px
                                        , rgba(0, 0, 0, 0) 61%);
        height: 100%;
        left: 0;
        margin: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
@media all and (max-width: 768px) and (orientation:portrait) {
  /* Styles for Portrait screen */
  hero-image img {
        height: 100%;
        width: auto;
        transform: translateY(calc(-50% + 228px));
    }
}
@media all and (max-width: 768px) and (orientation:landscape) {
  /* Styles for Landscape screen */
  hero-image img {
        height: auto;
        width: 100%;
        transform: translateY(calc(-50% + 228px));
    }
}
    
/* CONTACT SECTIONS (common-parts) */
address {
    box-sizing: content-box;
    display: inline-block;
    font-style: normal;
    line-height: 1.5;
    padding: 0.618rem;
}
    address img.align-left { 
        margin-left: 0;
    }
    address img,
    address iron-image {
        box-sizing: content-box;
        clear: initial;
	    float: left;
        height: 64px;
        margin: 0 0.5rem 0.5rem 0;
        width: 64px;
    }
    address div.ce-element--type-image {
        background-position: center center;
        background-size: 64px 64px;
    	height: 64px !important;
        width: 64px !important;
	    margin: 0 0.5rem 0.5rem 0;
    }
    address p {
        margin: 0;
    }
    address p[itemprop="name"] {
        display: inline-block;
	    /*white-space: nowrap; For Human Resources*/
	    font-size: 1rem;
    }
    address p[itemprop="jobTitle"] {
        font-style: italic;
    }
    address span[itemprop="openingHoursSpecification"] {
        white-space: pre;
    }
    address ol {
        clear: left;
        list-style: none;
        margin: 0;
	    padding: 0 0.4em 0.8em 0;
    }
    address > div + div {
        margin-top: 12px;
    }

    address ol strong {
        display: inline-block;
        font-weight: 700;
        text-align: right;
        width: 3.4em !important;
    }

    address ol li {
        min-height: 1em;
    }
/*https://github.com/bendavis78/paper-chip/blob/master/paper-chip.html*/
@media screen and (max-width: 2056px) {
    address {
    	box-sizing: border-box;
    	position: relative;
    	float: none;
        /*height: 32px;*/
        /*@apply(--layout-horizontal);*/
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;
    }
    address paper-chip {
        box-sizing: border-box;
        display: inline-block;
        font-size: 16px;
    	/*width: 33%; needed until I fix the markup. When div below controls width it works well until it needs to go to position: absolute; */
    	min-width: 350px;
    	cursor: default;
    	
    	/*transition: 200ms ease-in;*/
    	position: relative;
    }
    address paper-chip > div {
    	background-color: #E6E6E6;
    	color: #666;
    	vertical-align: top;
    	padding-right: 0.5rem;
    	position: relative;
    	outline: none;
    }
    /*
    address paper-chip img {
    	width: 32px;
    	height: 32px;
    	line-height: 32px;
    	border-radius: 100%;
    	overflow: hidden;
    	text-align: center;
    	vertical-align: middle;
    	margin: 0;
    }
    address paper-chip div.ce-element--type-image {
        background-size: 32px 32px;
        width: 32px !important;
    	height: 32px !important;
    	margin: 0;
    }*/
}
/*@media screen and (min-width: 768px) and (max-width: 1600px) {*/
@media screen and (min-width: 1601px) and (max-width: 1600px) {
    address paper-chip:hover,
    address paper-chip:hover img,
    address paper-chip:hover iron-image,
    address paper-chip:hover p, 
    address paper-chip:hover ol, 
    address paper-chip:hover > div {
        transition-delay: 400ms;
    }
    address paper-chip:not(:hover) img,
    address paper-chip:not(:hover) iron-image{
    	border-radius: 32px;
    	width: 32px;
    	height: 32px;
    	line-height: 32px;
    }
    address paper-chip:not(:hover) div.ce-element--type-image {
        background-size: 32px 32px;
        border-radius: 32px;
    	line-height: 32px;
    	width: 32px !important;
    	height: 32px !important;
    	padding: 0;
    }
    address paper-chip:hover img {
        border-radius: 0;
        box-sizing: content-box;
        height: 64px;
        margin: 0 0.5rem 0.5rem 0;
        width: 64px;
    }
    address paper-chip:hover div.ce-element--type-image {
        box-sizing: content-box;
        height: 64px !important;
        margin: 0 0.5rem 0.5rem 0;
        width: 64px !important;
        background-size: 64px 64px;
    }
    address paper-chip:not(:hover) p {
        line-height: 32px;
    	padding: 0 16px 0 8px;
    }
    address paper-chip:not(:hover) p:last-of-type, 
    address paper-chip:not(:hover) ol {
        display: none;
    }
    address paper-chip:not(:hover) > div {
        border-radius: 32px;
        display: inline-block !important;
    }
    address paper-chip:hover > div {
        border-radius: 0;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
        display:block;
        max-width: 100%;
    	position: absolute;
    	top: 0;
    	width: 300px;
    	z-index: 1;
    }
}
@media screen and (max-width: 767px) {
    address {
    	height: auto;
    	flex-wrap: wrap;
    }
    address paper-chip {
        width: 100%;
        min-width: auto;
    }
    address paper-chip > div {
        position: relative;
    }
    address paper-chip div img,
    address paper-chip div iron-image,
    address paper-chip div div.ce-element--type-image {
    	width: 32px;
    	height: 32px;
    	line-height: 32px;
    }
}
@media screen and (max-width: 411px) {
    address {
    	padding: 0;
    }
}

address div[itemtype="http://schema.org/Place"] ol li:last-child {
    display: flex;
}

/* PAGE-FOOTER */
footer-nav {
    background-color: #009DDC;
    display: block;
    color: #FFF;
    padding: 1.5rem 1rem 1rem 1rem;
}

    footer-nav > h4 {
        margin-top: 0;
    }
    footer-nav  h4  a {
        text-decoration: none;
    }

    footer-nav a {
        color: #FFF;
    }

        footer-nav a:hover {
            background: rgba(0,0,0,.18);
            border: 1px solid #000;
            border-width: 0 0 1px 0;
            color: #000;
        }
    
    footer-nav nav {
        display: flex;
        flex-wrap: wrap;
        /*justify-content: space-around;*/
        margin-right: -0.75rem;
    }
    footer-nav nav coa-list {
        /* @apply(--app-grid) *modified */
        -ms-flex: 1 1 100%;
        -webkit-flex: 1;
        flex: 1;
        box-sizing: border-box;
        -webkit-flex-basis: calc((100% - 0.1px - (0.75rem * 4)) / 4);
        flex-basis: calc((100% - 0.1px - (0.75rem * 4)) / 4);
        max-width: calc((100% - 0.1px - (0.75rem * 4)) / 4);
        margin-right: 0.75rem;
    }
@media (max-width: 1400px) {
    footer-nav nav {
        margin-right: -0.5rem;
    }
    footer-nav nav coa-list {
        /* @apply(--app-grid) *modified */
        -webkit-flex-basis: calc((100% - 0.1px - (0.5rem * 3)) / 3);
        flex-basis: calc((100% - 0.1px - (0.5rem * 3)) / 3);
        max-width: calc((100% - 0.1px - (0.5rem * 3)) / 3);
        margin-right: 0.5rem;
    }
}
@media (max-width: 1128px) {
    footer-nav nav coa-list {
        /* @apply(--app-grid) *modified */
        -webkit-flex-basis: calc((100% - 0.1px - (0.5rem * 2)) / 2);
        flex-basis: calc((100% - 0.1px - (0.5rem * 2)) / 2);
        max-width: calc((100% - 0.1px - (0.5rem * 2)) / 2);
    }
}
@media (max-width: 480px) {
    footer-nav nav coa-list {
        /* @apply(--app-grid) *modified */
        -webkit-flex-basis: calc((100% - 0.1px - (0.5rem * 1)) / 1);
        flex-basis: calc((100% - 0.1px - (0.5rem * 1)) / 1);
        max-width: calc((100% - 0.1px - (0.5rem * 1)) / 1);
    }
}
    
/* Form Default Styles */
main form {
    font-size: 16px; /*paper-input doesn't like our font-sizes */
}
paper-input,
paper-textarea {
    display: block;
    /*height: 62px; no idea why this was here but it caused me all sorts of problems!!! */
}
form .text-right button[type="submit"] {
	border: none;
	border-radius: 2px;
	background: #4caf50;
	color: #FAFAFA;
	cursor: pointer;
	letter-spacing: 0.49px;
	outline: none;
	padding: 10px;
	text-transform: uppercase;
}

/* COA-LIST */
coa-list heading {
    	display: flex;
	align-items: center;
}
coa-list h6 {
    display: inline-block;
    font-size: 1.2rem;
    margin: 0 0 0 4px;
    padding: 0;
    vertical-align: text-top;
}
coa-list a {
    text-decoration: none;
}
coa-list ul {
    list-style: none;
    margin-top: 6px;
    padding-left: 2.5rem;
}
    
    coa-list ul li {
        margin-bottom: 0.318em;
    }
    coa-list ul a {
        text-decoration: none;
    }

coa-list iron-icon,
coa-list coa-icon {
    border-radius: 1px;
    display: inline-block;
    padding: 6px;
    width: 2.66rem;
    height: 2.66rem;
}
    coa-list iron-icon.square,
    coa-list coa-icon.square {
        background: rgba(0,0,0,.18);
    }
    
/* IRON-ICON */
/* <style> */
    iron-icon,
    coa-icon {
        display: -ms-inline-flexbox;
    	display: -webkit-inline-flex;
    	display: inline-flex;
    	-ms-flex-align: center;
    	-webkit-align-items: center;
    	align-items: center;
    	-ms-flex-pack: center;
    	-webkit-justify-content: center;
        justify-content: center;
    	position: relative;
    	vertical-align: middle;
    	fill: currentcolor;
    	stroke: none;
    	/* Required in IE/Edge - now breaks Edge */
        width: 100%; 
        height: 100%;
    }
    iron-icon.paper-dropdown-menu {
        height: 24px;
        width: 24px;
    }
    iron-icon svg,
    coa-icon svg {
        pointer-events: none; 
        display: block; 
        width: 100%; 
        height: 100%;
    }
/* </style> */
    
/* Civic Services */
civic-services {
    display: block;
    background: #1596D1;
    background: var(--coa-blue);
    color: #FFF;
    max-width: 100%;
    overflow-x: auto;
}

/* PRINT */
@media print {
    html, body {
        border: 1px solid white;
        display: none;
        height: 99%;
        page-break-after: avoid;
        page-break-before: avoid;
    }
    body > header,
    body > footer,
    main > header {
        display: none;
    }/* //BUG - main doesn't seem to resize before render leaving a blank last page in many cases*/
    main > article {
        margin-top: 0;
    }
    html, body {
        border: 1px solid white;
        display: block;
        min-height:initial !important;
        height: 99%;
        page-break-after: avoid;
        page-break-before: avoid;
    }
    img { display: none; } /* Helps with PDF size, I think, maybe get something with display alt tag instead */
    .ct-app { display: none; }
}