/* -----------------------------------------------------------------------------
   GENERIC ELEMENTS
   ----------------------------------------------------------------------------- */

article, aside, details, figcaption, figure,
footer, header, hgroup, main, nav, section, summary {
    display: block;
}

*, *:before, *:after {
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    box-sizing:         border-box;
}

html, body {
    font-size: 100%;
}

body {
    margin:         0;
    padding:        0;
    line-height:    1.1;
    position:       relative;
}

body {
    color:            		var(--body-text-color, #000000);
	background-color: 		var(--body-color, #ffffff);
    background-image:      	var(--body-image);
    background-repeat:     	no-repeat;
    background-attachment: 	fixed;
    background-position:   	center center;
    background-size:       	cover;
	font-family:			var(--body-font-family, Times, serif);
	font-size:   			var(--body-font-size, 1.125rem);
}

/* images never overflow their container */
img, object, embed {
    max-width: 100%;
    height:    auto;
}

img {
    display:              inline-block;
    vertical-align:       middle;
    border:               0;
    -ms-interpolation-mode: bicubic;
}

textarea {
    height:     auto;
    min-height: 122px;
}

a {
    text-decoration:	none;
    line-height:    	inherit;
    color:          	var(--link-color);
}
a:hover, a:focus {
    color: 				var(--link-hover-color);
}

a:focus {
    outline: none;
}

div {
    margin:    0;
    padding:   0;
    direction: ltr;
}

.font-smallest 	{ font-size: var(--font-smallest); }
.font-smaller	{ font-size: var(--font-smaller); }
.font-small		{ font-size: var(--font-small); }
.font-normal	{ font-size: var(--font-default); }
.font-big		{ font-size: var(--font-big); }
.font-bigger	{ font-size: var(--font-bigger); }
.font-biggest	{ font-size: var(--font-biggest); }
.font-light  	{ font-weight: var(--font-light); }
.font-heavy  	{ font-weight: var(--font-heavy); }

p {
    margin:      		0 0 1em;
    padding:     		0;
    direction:   		ltr;
    line-height: 		inherit;
	background-color: 	var(--p-color);
    color:            	var(--p-color-text);
}

h1, h2, h3, h4, h5, h6 {
	font-family:		var(--h-font-family, Arial, Helvetica, sans-serif);
	font-weight:		var(--font-heavy);
    padding:            0;
    direction:          ltr;
    text-rendering:     optimizeLegibility;
    /*line-height:        inherit;*/
    border-bottom: 0;
	/*margin:           0.2em 0 0.5em;*/
	margin:        0;
}

h1 { font-size: var(--font-biggest); }
h2 { font-size: var(--font-bigger); }
h3 { font-size: var(--font-big); }
h4 { font-size: var(--font-default); }

ul, ol, dl {
    /*line-height:           1.6;*/
    margin:                0 0 1.25em;
    list-style-position:   inside;
    font-family:           inherit;
    padding:               0;
    direction:             ltr;
}
ul { font-size: 100%; }

li {
    margin: 0;
}

hr {
    border:       solid #ddd;
    border-width: 1px 0 0;
    clear:        both;
    margin:       1.25em 0 1.1875em;
    height:       0;
}

.word-break {
    -ms-word-break:  break-all;
    word-break:      break-word;
    word-wrap:       break-word;
    -webkit-hyphens: auto;
    -moz-hyphens:    auto;
    hyphens:         auto;
}

/* -----------------------------------------------------------------------------
   UTILITIES
   ----------------------------------------------------------------------------- */
/* aligns inline content: text, img, etc. */
.text-left    { text-align: left !important; }
.text-right   { text-align: right !important; }
.text-center  { text-align: center !important; }
.text-justify { text-align: justify !important; }

/* floats element left or right; other elements wrapp around */
.float-left  { float: left !important; }
.float-right { float: right !important; }

/*  centers the block itself */
.block-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* creates an invisible pseudo-element after all the container's content that forces the container to extend and contain its float elements (otherwise the container has zero height); modern alternative: clear:both;*/
.clear-fix:after {
    height:     0;
    clear:      both;
    content:    " ";
    font-size:  0;
    display:    block;
    visibility: hidden;
}

.hide        { display: none; }
.antialiased { -webkit-font-smoothing: antialiased; }

.overflow_hidden {
    overflow: hidden;
}

.transparent-bg {
    background-color: transparent;
}

/* Drop shadow */
.drop-shadow {
    box-shadow:	0 8px 6px -6px rgba(0, 0, 0, 0.3);
}
.drop-shadow-large {
    box-shadow:	0 4px 8px 0px rgba(0, 0, 0, 0.3);
}

/* -----------------------------------------------------------------------------
   FLEX GRID
   ----------------------------------------------------------------------------- */

/* flex row container */
.flex-row {
    display: 	flex;
    flex-wrap: 	wrap;
    /*gap: 		var(--flex-gap, 8px);*/
	
    padding-left:  8px;
    padding-right: 8px;
}

[class*="flex-col-"] {
    flex: 		0 0 auto;
	padding:    4px;
}

.flex-col-10 { flex-basis: 10%; width: 10%; }
.flex-col-20 { flex-basis: 20%; width: 20%; }
.flex-col-25 { flex-basis: 25%; width: 25%; }
.flex-col-30 { flex-basis: 30%; width: 30%; }
.flex-col-33 { flex-basis: 33.333%; width: 33.333%; }
.flex-col-40 { flex-basis: 40%; width: 40%; }
.flex-col-50 { flex-basis: 50%; width: 50%; }
.flex-col-60 { flex-basis: 60%; width: 60%; }
.flex-col-70 { flex-basis: 70%; width: 70%; }
.flex-col-75 { flex-basis: 75%; width: 75%; }
.flex-col-80 { flex-basis: 80%; width: 80%; }
.flex-col-100 { flex-basis: 100%; width: 100%; }

/* Mobile media: all full width */
@media (max-width: 568px) {
    [class*="flex-col-"] {
        flex-basis: 100% !important;
        width: 100% !important;
    }
}

/* -----------------------------------------------------------------------------
   SECTIONS
   ----------------------------------------------------------------------------- */

/* Full-width section wrapper */
.section-holder {
    width:    100%;
    position: relative;
    z-index:  2;
}

/* row for page content with fixed max width; padding from old columns */
.row-container {
    max-width: var(--row-width, 62.5em);
    margin: 0 auto;
    padding: 0 0.9375em;
    width: 100%;
}

/* -----------------------------------------------------------------------------
   BANNER
   ----------------------------------------------------------------------------- */
.section-holder.banner-holder {
    background-image: var(--banner-image);
	background-color: var(--banner-color, #000000);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;	

    width: 100%;
    height: var(--banner-height, 35vw);
    min-height: var(--banner-min-height, 56vh);
}

.row-banner {
    padding: 0;
}
/* -----------------------------------------------------------------------------
  MENU
  ----------------------------------------------------------------------------- */
.section-holder.menu-holder {
    background-color: var(--menu-color);
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 97;
}

.menu-container {
}

.menu-container ul {
	color: var(--menu-text-color);
    font-family: var(--menu-font-family);
    font-size: var(--menu-font-size);
    font-weight: var(--menu-link-weight);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--menu-gap, 8px);
    min-height: inherit;
}

/* reset list items */
.menu-container li {
    margin: 10px 10px 5px 0;
    padding: var(--menu-link-padding);
    list-style: none;
}

.menu-container li a,
.menu-container li span {
	color: var(--menu-link-color);
	border-bottom: 3px solid transparent;    
    display: inline-block;
    text-decoration: none;
    transition: all 0.1s ease;
}

.menu-container li a:hover {
    color: var(--menu-link-hover-color);
    border-bottom: var(--menu-link-hover-border, 3px solid #529ECC);
}

/* right-aligned items - not working well because of margin li*/
.menu-right-group {
    margin-left: auto;
}

/* -----------------------------------------------------------------------------
  NAVIGATORS
  ----------------------------------------------------------------------------- *
/* anchor for back-to-top */
#backtotop {
    position: absolute;
    left:     0;
    top:      0;
}

/* Back-to-top button is displayed from JS when scrolled down */
#top-scroller {
    display: none;
/*	transition: opacity 0.3s ease, visibility 0.3s ease; */
}

#top-scroller.visible {
    display: inline-block;
}

/* -----------------------------------------------------------------------------
   POSTCARDS
   ----------------------------------------------------------------------------- */
.section-holder.postcards-holder {
	background-color: transparent;
}

.postcards-container {
    padding: var(--postcards-container-top) 0 0;
}

.postcard {
	background-color: var(--postcard-color);
    color:            var(--postcard-text-color);
	background-image: var(--postcard-image);
    background-size:  var(--postcard-image-size, 100% 100%);
	
    width: 100%; /*@AIDO: needed?*/
	border-radius: 4px;
	margin-bottom: var(--post-spacing, 40px);
	
	box-shadow:         0 8px 6px -6px rgba(0, 0, 0, 0.3);
}

/* content area inside a postcard */
.postcard-content {
	padding-top:		var(--post-sub-top, 12px);
    padding-bottom:		var(--post-sub-bottom, 30px);
}

/* use for postcard-content tight (no large bottom) */
.postcard-content-tight {
	padding-top:		var(--post-sub-top, 12px);
	padding-bottom:		var(--post-sub-top, 12px);
}

/* clear-fix floaters from content */
.postcard-content::after {
    content: "";
    display: table;
    clear: both;
}

.postcard img {
    width: 100%;
    height: auto;
    /*display: block;*/
}

/* menu jumps to postcard labels withan offset to compensate for sticky menu height */
.postcard-label {
    scroll-margin-top: 80px;
}

/* -----------------------------------------------------------------------------
   FOOTER
   ----------------------------------------------------------------------------- */

.section-holder.footer-holder {
    border-top: 1px solid var(--footer-top-color);
    background-color: var(--footer-color);
    color: var(--footer-text-color);
}

/* -----------------------------------------------------------------------------
   SPACERS & DIVIDERS
   ----------------------------------------------------------------------------- */
.spc {
    clear:  both;
    width:  100%;
    height: 12px;
}

.spc_med {
    clear:      both;
    width:      100%;
    min-height: 24px;
}

.spc_dot {
    clear:         both;
    width:         100%;
    border-bottom: 1px dashed var(--divider-color);
    margin:        12px 0;
    padding:       0;
}

.dot_b {
    border-bottom: 1px dashed var(--divider-color);
}

/* -----------------------------------------------------------------------------
   SOCIAL ICON SIZE
   Optional: can change size to save space
   ----------------------------------------------------------------------------- */

.icosocial {
    width: 100px;
}

/* Mobile media */
@media (max-width: 568px) {
    .icosocial {
        width: 100px; /*80*/
    }
}

/* -----------------------------------------------------------------------------
   RESPONSIVE VIDEO (YouTube / Vimeo embeds)
   ----------------------------------------------------------------------------- */

.flex-video {
    position:        relative;
    padding-top:     1.5625em;
    padding-bottom:  67.5%;
    height:          0;
    margin-bottom:   1em;
    overflow:        hidden;
}

.flex-video.widescreen {
    padding-bottom: 57.25%;
}

.flex-video.vimeo {
    padding-top: 0;
}

.flex-video iframe,
.flex-video object,
.flex-video embed,
.flex-video video {
    position: absolute;
    top:      0;
    left:     0;
    width:    100%;
    height:   100%;
}

/* use with flex-video widescreen classes to reset margins on the flex-video wrapper for tight layouts */
.vid1 {
    padding-top:   0;
    margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   FORMS
   Input and textarea background matches panel color.
   Placeholder color uses accent variable.
   @TODO: Used in other projects?
   ----------------------------------------------------------------------------- */

input[type="text"],
textarea {
    background-color: var(--textarea-color);
    color:            white;
}

.form-field {
    border-width: 0;
    padding:      5px;
    width:        100%;
}

/* -----------------------------------------------------------------------------
   BUTTONS
   ----------------------------------------------------------------------------- */

/* Button generic scale on hover; inline-block prevents layout shift */
.button-scale {
    display: inline-block;
    transition: transform 0.15s ease;
    transform: scale(1);
}

.button-scale:hover {
    transform: scale(1.05);
}

/* Button image scale on hover; inline-block prevents layout shift */
/*
.button-scale {
    display: inline-block;
}

.button-scale img {
    display:    block;
    width:      100%;
    height:     auto;
    transition: transform 0.1s ease-in-out;
}

.button-scale:hover img {
    transform: scale(1.05);
}
*/