/*
Theme Name: Skeehan
Theme URI: https://www.inklab.com.au/
Description: Custom website theme
Version: 2.3
Author: Inklab
Author URI: https://www.inklab.com.au/
*/

@font-face { font-family: 'MaisonNeue'; src: url('fonts/MaisonNeue-Book.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'MaisonNeue'; src: url('fonts/MaisonNeue-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'GarnettTrial'; src: url('fonts/GarnettTrial-Medium.otf') format('opentype'); font-weight: normal; font-style: normal; }

html, body {
	margin: 0;
	padding: 0;
	font-size: 17px;
	font-size: calc( 16px + 3 * (100vw - 766px) / 1440 );
	font-family: 'MaisonNeue'; 
	font-weight: normal;
	min-width: 320px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.25;
}
body{
	transition: background 0.75s ease;
}


h1, h2, h3, h4, h5{
	font-family: 'MaisonNeue'; 
	margin: 1rem 0;
	font-weight: normal;
	text-transform: uppercase;
}
	h1, h2{ font-size: 3.82rem; }
	h2.h2, .h2{ font-size: 2.47rem; }
	h3, h2.h3{ font-size: 1.64rem; }
	h4, h5{ font-size: 1rem; }

.text-banner{ 
	font-size: 12rem; margin: 0; 
	font-family: 'GarnettTrial';
}
.text-largest{ font-size: 3.82rem; /*margin: 1rem 0;*/ }
.text-larger{ font-size: 2.47rem; /*margin: 1rem 0;*/ }
.text-large{ font-size: 1.64rem; /*margin: 1rem 0;*/ }
small, .text-small{ font-size: 0.82rem; /*margin: 1rem 0;*/ }

h1.text-initial, h2.text-initial, h3.text-initial, h4.text-initial, h5.text-initial{
	font-size: 1rem; font-weight: normal;
}

.text-left{ text-align: left; }
.text-right{ text-align: right; }
.text-center{ text-align: center; }
.text-upper{ text-transform: uppercase; }

/*---------------------------------------------------------Clearfix */
.group { zoom: 1; position: relative; }
.group::before, .group::after { content: ''; display: table; clear: both; } 
.unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

*:focus { outline: none; }
*::selection{ background-color: rgba(0, 0, 0, 0.2); }
*::-moz-selection{ background-color: rgba(0, 0, 0, 0.2); }

img{ max-width: 100%; height: auto; box-shadow: #000 0em 0em 0em; border: 0; }
input, input[type="submit"], button{ border-radius: 0; -webkit-appearance: none; -webkit-border-radius:0px; }

div, nav, aside, section, header, footer{ box-sizing: border-box; }
address,abbr{ font-style: normal; text-decoration: none; }
img{ max-width: 100%; height: auto; box-shadow: #000 0em 0em 0em; border: 0; }
img.alignleft{ display: block; margin-left: 0; margin-right: auto; }
img.alignright{ display: block; margin-left: auto; margin-right: 0; }
img.aligncenter{ display: block; margin-left: auto; margin-right: auto; }
img.block, a.block{ display: block; width: 100%; box-sizing: border-box; }

iframe{ display: block; width: 100%; max-width: 100%; }
video{ display: block; width: 100%; max-width: 100%; height: auto; object-fit: cover; object-position: center; }
input, input[type="submit"], button, select{
	font-family: 'MaisonNeue',sans-serif; border-radius: 0; -webkit-appearance: none; -webkit-border-radius: ; 
}

blockquote{ font-size: 1.64rem; font-weight: normal; margin: 2rem 0; }
blockquote p{ display: block; padding-left: 2rem; }


table{ width: 100%; margin: 1em 0; }
table.alignright, table.alignleft{ width: auto; }
td, th{ padding: 4px; }

ul, ol{ margin: 0.8em 0; }
ul li, ol li{ margin: 0.2em 0; }

ul.no-bullets{
	margin: 0.5em 0; padding: 0;
	list-style-type: none;
}
ul.no-bullets li{
	margin: 0.5em 0; padding: 0;
}


a{ color: inherit; transition: all 0.35s ease 0s; }
a:hover{ cursor: pointer; transition: all 0.35s ease 0s; }

.table{ display: table; width: 100%; height: 100%; }
.table .table-cell{ display: table-cell; text-align: left; vertical-align: middle; }
.table .table-cell.bottom{ vertical-align: bottom; }

div.btn p,
div.readmore p{ margin: 0; }

a.btn,
div.btn a{
	text-decoration: none;
    /*padding: 0.8rem 1rem;*/
    padding: 15px 30px;
    border: 1px solid; 
    border-radius: 0;
    display: inline-block;
    vertical-align: baseline;
    text-transform: uppercase; font-size: 1rem;
}
a.btn:hover,
div.btn a:hover{
	text-decoration: none;
	color: #000;	
	background-color: #fff;
	border-color: #fff;
	opacity: 1!important;
}
	.section.bg-white a.btn:hover,
	.section.bg-white div.btn a:hover{
		text-decoration: none;
		color: #fff;	
		background-color: #000;
		border-color: #000;
	}


div.btn a{
	margin: 1em 0 0 0;
}
div.readmore a,
a.readmore{
	display: inline-block;
    vertical-align: baseline;
	margin: 1em 0; 
	padding-top: 15px;
}


p > a:not([class]):hover,
#product-info-content a:hover{
	opacity: 0.5;
	/*color: rgba(128, 128, 128, 0.5);*/
}



/*--------------------------------------------------------- Wrapper / Inner */
		
.section { width: 100%; margin: 0 auto; clear: both; position: relative; }
.section .inner{ /*max-width: 1950px;*/ max-width: 100%; width: 100%; margin: 0 auto; padding: 0 15px; position: relative; }

.bg-white{ background-color: #fff; color: #000; border-color: #000; }
.bg-black{ background-color: #000; color: #fff; border-color: #fff; }

.bg-charcoal{ background-color: #1d1d1d; color: #fff; border-color: #fff; }
.section.text-color-black{ color: #000; border-color: #000; }
.section.text-color-white{ color: #fff; border-color: #fff; }
	.bg-white .fill-primary,
	.section.text-color-black .fill-primary{ fill: #000; }
	.bg-charcoal .fill-primary,
	.section.text-color-white .fill-primary{ fill: #fff; }


.screenheight{ height: 100vh; height: calc(var(--vh) * 100); }

/*--------------------------------------------------------- Flex grid */

.flex-container{
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	position: relative;
	box-sizing: border-box;
	align-items: flex-start; 
	align-content: flex-start; 
	justify-content: flex-start;
	max-width: 100%;
	/*overflow: hidden;*/
}
.flex-container.flex-list-container{
	height: auto;
}


	.flex-container.flex-wrap{ flex-wrap: wrap; }
	.flex-container.flex-nowrap{ flex-wrap: nowrap!important; }
	.flex-container.flex-row-normal{ flex-direction: row; }
	.flex-container.flex-row-reverse{ flex-direction: row-reverse; }
	.flex-container.flex-col-normal{ flex-direction: column; }
	.flex-container.flex-col-reverse{ flex-direction: column-reverse; }
	.flex-container.flex-edges{ align-items: flex-start;  align-content: space-between; justify-content: space-between; }
	.flex-container.flex-end{ align-items: flex-end; align-content: flex-end; justify-content: flex-start; }
	.flex-container.flex-end-justify{ align-items: flex-end; align-content: flex-end; justify-content: flex-end; }
	.flex-container.flex-stretch{ align-items: stretch; align-content: stretch; justify-content: stretch; }
	.flex-container.flex-center{ align-items: center; align-content: center; justify-content: center; }
		/* note IE can't handle left/right padding on flex-item - ignores border-box */
		.flex-container .flex-item{
			display: block;
			flex-basis: auto;
			flex-grow: 0;
			flex-shrink: 0;
			position: relative;
			box-sizing: border-box;
			box-shadow: none;
			text-decoration: none;
			border: 0px none;
			margin: 0 0px;
			padding: 0 0px;
			max-width: 100%;
		}
			.flex-container .flex-item.selfalign-end{
				align-self: flex-end; justify-self: flex-end;
			}

			.flex-container .flex-item.flex-parts-100{ flex-basis: 100%; width: 100%; }
			.flex-container .flex-item.flex-parts-75{ flex-basis: 75%; width: 75%; }
			.flex-container .flex-item.flex-parts-50{ flex-basis: 50%; width: 50%; }
			.flex-container .flex-item.flex-parts-25{ flex-basis: 25%; width: 25%; }
			.flex-container .flex-item.flex-parts-66{ flex-basis: 66.66%; width: 66.66%; }
			.flex-container .flex-item.flex-parts-33{ flex-basis: 33.33%; width: 33.33%; }

			.flex-container .flex-item.flex-parts-g2{ flex-basis: calc(var(--fw)/12*2); width: calc(var(--fw)/12*2); }
			.flex-container .flex-item.flex-parts-g6{ flex-basis: calc(var(--fw)/12*6); width: calc(var(--fw)/12*6); }

			/*			
			.flex-container .flex-item.grid-width-1{ flex-basis: 8.33%; width: 8.33%; }
			.flex-container .flex-item.grid-width-2{ flex-basis: 16.66%; width: 16.66%; }
			.flex-container .flex-item.grid-width-3{ flex-basis: 25%; width: 25%; }
			.flex-container .flex-item.grid-width-4{ flex-basis: 33.33%; width: 33.33%; }
			.flex-container .flex-item.grid-width-5{ flex-basis: 41.66%; width: 41.66%; }
			.flex-container .flex-item.grid-width-6{ flex-basis: 50%; width: 50%; }
			.flex-container .flex-item.grid-width-7{ flex-basis: 58.33%; width: 58.33%; }
			.flex-container .flex-item.grid-width-8{ flex-basis: 66.66%; width: 66.66%; }
			.flex-container .flex-item.grid-width-9{ flex-basis: 75%; width: 75%; }
			.flex-container .flex-item.grid-width-10{ flex-basis: 83.33%; width: 83.33%; }
			.flex-container .flex-item.grid-width-11{ flex-basis: 91.66%; width: 91.66%; }
			.flex-container .flex-item.grid-width-12{ flex-basis: 100%; width: 100%; }
				.flex-container .flex-item.grid-offset-0{ margin-left: 0; }
				.flex-container .flex-item.grid-offset-1{ margin-left: 8.33%; }
				.flex-container .flex-item.grid-offset-2{ margin-left: 16.66%; }
				.flex-container .flex-item.grid-offset-3{ margin-left: 25%; }
				.flex-container .flex-item.grid-offset-4{ margin-left: 33.33%; }
				.flex-container .flex-item.grid-offset-5{ margin-left: 41.66%; }
				.flex-container .flex-item.grid-offset-6{ margin-left: 50%; }
			*/
			.flex-container .flex-item.grid-width-1{ flex-basis: calc(var(--fw)/12*1); width: calc(var(--fw)/12*1); }
			.flex-container .flex-item.grid-width-2{ flex-basis: calc(var(--fw)/12*2); width: calc(var(--fw)/12*2); }
			.flex-container .flex-item.grid-width-3{ flex-basis: calc(var(--fw)/12*3); width: calc(var(--fw)/12*3); }
			.flex-container .flex-item.grid-width-4{ flex-basis: calc(var(--fw)/12*4); width: calc(var(--fw)/12*4); }
			.flex-container .flex-item.grid-width-5{ flex-basis: calc(var(--fw)/12*5); width: calc(var(--fw)/12*5); }
			.flex-container .flex-item.grid-width-6{ flex-basis: calc(var(--fw)/12*6); width: calc(var(--fw)/12*6); }
			.flex-container .flex-item.grid-width-7{ flex-basis: calc(var(--fw)/12*7); width: calc(var(--fw)/12*7); }
			.flex-container .flex-item.grid-width-8{ flex-basis: calc(var(--fw)/12*8); width: calc(var(--fw)/12*8); }
			.flex-container .flex-item.grid-width-9{ flex-basis: calc(var(--fw)/12*9); width: calc(var(--fw)/12*9); }
			.flex-container .flex-item.grid-width-10{ flex-basis: calc(var(--fw)/12*10); width: calc(var(--fw)/12*10); }
			.flex-container .flex-item.grid-width-11{ flex-basis: calc(var(--fw)/12*11); width: calc(var(--fw)/12*11); }
			.flex-container .flex-item.grid-width-12{ flex-basis: calc(var(--fw)); width: calc(var(--fw)); }
				.flex-container .flex-item.grid-offset-0{ margin-left: 0; }
				.flex-container .flex-item.grid-offset-1{ margin-left: calc(var(--fw)/12*1); }
				.flex-container .flex-item.grid-offset-2{ margin-left: calc(var(--fw)/12*2); }
				.flex-container .flex-item.grid-offset-3{ margin-left: calc(var(--fw)/12*3); }
				.flex-container .flex-item.grid-offset-4{ margin-left: calc(var(--fw)/12*4); }
				.flex-container .flex-item.grid-offset-5{ margin-left: calc(var(--fw)/12*5); }
				.flex-container .flex-item.grid-offset-6{ margin-left: calc(var(--fw)/12*6); }

				.flex-container.flex-col-normal .flex-item,
				.flex-container.flex-col-reverse .flex-item{
					flex-basis: auto;
				}

			/* do not resize */
			.flex-container .flex-item.grid-width-1.initial{ flex-basis: calc(var(--fwi)/12*1); width: calc(var(--fwi)/12*1); }
			.flex-container .flex-item.grid-width-2.initial{ flex-basis: calc(var(--fwi)/12*2); width: calc(var(--fwi)/12*2); }


				.flex-container .flex-item .content{ display: block; padding: 0 15px; }



/*------------------------------------------------------ PARTS-ASIDE \ WIDTH SLIDE-SIDE */

#site-container{ width: 100vw; overflow: hidden; opacity: 1; transition: opacity 0.4s ease, background 0.4s ease; }
body #site-container.flex-container > .flex-item.flex-parts-100{
	transition: all 0.35s ease;
}

body #site-container .flex-container .flex-item{
	transition: all 0.35s ease;
}
body #site-container #site-header-shadow .flex-container .flex-item{
	transition: none;
}

/*------------------------------------------------------ WEBSITE Page styles */
.section{ overflow: hidden; }

section{ padding: 30px 0; }
main section{ padding: calc(var(--fw)/12) 0; }
main section.bg-product + section.bg-product,
main section.bg-white + section.bg-white,
main section.bg-charcoal + section.bg-charcoal{
	padding-top: 0;
}

main section.grid_row_images,
main section.grid_row_images + section.grid_row_images{
	padding: 15px 0;
}


h1.stack, h2.stack, h3.stack{ display: block; width: 100%; box-sizing: border-box; position: relative; line-height: 1em;  }
h1.stack span:nth-of-type(1),
h2.stack span:nth-of-type(1),
h3.stack span:nth-of-type(1){ display: block; height: 1em; white-space: nowrap; float: left; }
h1.stack span:nth-of-type(2),
h2.stack span:nth-of-type(2),
h3.stack span:nth-of-type(2){ display: block; overflow: hidden; padding-top: 1em; }

.flex-item.border-top{ /*border-top: 1px solid;*/ position: relative; }
.flex-item.border-top::before{
	content: ''; display: block; position: absolute; top: 0; left: 15px;
	width: calc(100% - 30px);
	border-top: 1px solid;
}

.flex-item.border-top-header{
	padding-top: 15px; 
}
.flex-item.border-top-header::before{ 
	content: ''; display: block; position: absolute; top: 0; left: 15px;
	width: calc(100% - 30px);
	border-top: 1px solid;
}


.schemes{}
.schemes .scheme{
	width: 50px; height: 50px;
	display: inline-block;
    vertical-align: middle;
    margin: 0 10px 15px 0;
    position: relative; 
    overflow: visible;
}
.schemes .scheme .sample{
	width: 50px; height: 50px; border-radius: 50%; overflow: hidden;
	background-repeat: no-repeat; background-position: center; background-size: 50px 50px;
	position: relative;
}
.schemes .scheme .tag{
    opacity: 1; transition: all 0.2s ease;
    width: 160px; height: 60px; border-radius: 50px;
    padding: 8px 10px 8px 60px;
    background-color: rgba(255,255,255,1);
    /*font-size: 0.82rem;*/ font-size: 12px;
    position: absolute;
    top: -5px; left: -5px;
    border: 1px solid #bbb; overflow: hidden;
    display: table;
}
.schemes .scheme .tag span{
	display: table-cell;
	vertical-align: middle;
}


/*.schemes .scheme:hover*/
.schemes .scheme.hover{
	cursor: pointer; z-index: 50;
}
/*.schemes .scheme:not(:hover) .tag*/
.schemes .scheme:not(.hover) .tag{ opacity: 0; transition: all 0.2s ease; }


#product-info-slide{
	z-index: 100;
	height: 100vh; height: calc(var(--vh) * 100); min-height: 100%;
	width: 100%; max-width: 100%;
    position: fixed; top: 0; padding: 0;  
    /*left: 101%;*/ transition: left 0.6s ease;
    overflow: auto;
}
#product-info-slide .inner{ /*overflow: hidden;*/ overflow: visible; padding: 0; }
#product-info-slide.open{
	z-index: 200;
	/*left: 0;*/ left: auto; transition: left 0.35s ease;
}

#product-info-slide:not(.open) #prod-info-toggle{
	display: none;
}
#product-info-slide.open #prod-info-toggle{
	position: fixed;  top: 0; left: 0;
    height: 100%; width: 50vw;
}


#product-info-slide .info-main.bg-white{
	/*padding: 15px 0 15px 15px;*/ padding: 0 0 0 15px; box-sizing: content-box;
	min-height: 100vh; min-height: calc(var(--vh) * 100);
}
#product-info-slide .info-main.bg-white .content-container{
	padding: 15px 0;
}
#product-info-slide .info-main.bg-white::after{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 15px;
    /*width: calc(var(--fw)/2);*/
    height: 100%;
    background-color: #fff;
}

#product-info-slide.content.info{
	margin: 15px 0;
}
#product-info-slide .content.info::before{
    content: '';
    display: block; position: absolute; top: 0; left: 15px;
    width: calc(100% - 30px); height: 1px; border-top: 1px solid; box-sizing: border-box;
}


#product-info-slide #product-info-toggle{
	position: fixed; width: auto;
    right: calc(var(--fw)/12*-1 - 15px); transition: right 0.35s ease;
 	/*height: auto; top: calc(var(--fw)/12*1); */
    height: 100vh; height: calc(var(--vh) * 100); top: 0;
}
	#product-info-toggle:hover,
	#product-info-toggle-mobi:hover{ cursor: pointer; }


#product-info-slide #product-info-toggle.open{
	right: 0; transition: right 0.35s ease;
}
#product-info-slide #product-info-toggle-mobi{
		display: none;
		width: 100%;
		position: fixed;
		left: 0;
	    bottom: auto;		
    	padding: 0;
    	z-index: 190;
    	height: calc( 1rem + 30px );
    	top: calc( (var(--vh) * 100) - 1rem - 30px);
    	overflow: hidden;
	}
	#product-info-slide #product-info-toggle-mobi .content{ 
		padding: 15px 15px; 
		margin: 0; font-size: 1rem;
    	height: calc( 1rem + 30px );
    	white-space: nowrap;
	}


#product-info-slide #product-info-toggle svg{ display: block; width: 100%; height: auto; }
#product-info-slide #product-info-toggle svg .open,
#product-info-slide #product-info-toggle-mobi .open{ display: inline; }
#product-info-slide #product-info-toggle svg .close,
#product-info-slide #product-info-toggle-mobi .close{ display: none; }

#product-info-slide.open #product-info-toggle svg .open,
#product-info-slide.open #product-info-toggle-mobi .open{ display: none; }
#product-info-slide.open #product-info-toggle svg .close,
#product-info-slide.open #product-info-toggle-mobi .close{ display: inline; }

.filter-container{ 
	z-index: 199; overflow: hidden;
}
.filter-container #filter-toggle{ 
	display: none; 
    position: fixed;
    height: 3rem;
    line-height: 3rem;
    white-space: nowrap;
    top: calc(100% - 3rem);
    left: 0;
    width: 100%;
    background: #fff;
    color: #000;
    text-align: center;
    text-transform: uppercase;
    z-index: 10;
}
.filter-container #filter-toggle:hover{ cursor: pointer; }
.filter-container #filter-toggle .open{ display: block }
.filter-container #filter-toggle .close{ ;display: none; }
	.filter-container.open #filter-toggle .open{ display: none; }
	.filter-container.open #filter-toggle .close{ display: block; }


.filter-container .filters{}
.filter-container.open .filters{}
.filters .filter{
	border-top: 1px solid;
	margin-bottom: 15px; padding-bottom: 15px; 
}
.filters .filter ul{
	margin: 0.5rem 0; padding: 0; list-style-type: none;
}
.filters .filter ul li{
	margin: 0.5rem 0; padding: 0; 
}
.filters .filter ul li.current{
	font-weight: bold;
}
.filters .filter ul li:hover{
	cursor: pointer;
}
	.filters .filter ul li::before{
		content: '';
		/*display: inline-block; vertical-align: middle;*/
		display: block; float: left;
		height: 18px; width: 18px; border-radius: 50%; margin-right: 15px;
		overflow: hidden; border: 1px solid; box-sizing: border-box;
		transition: border 0.35s ease;
	}
	.filters .filter ul li span{
		display: block; overflow: hidden;
	}

	.filters .filter ul li.current::before,
	.filters .filter ul li:hover::before{
		border: 9px solid;
		transition: border 0.35s ease;
	}


.list .list-item:not(:last-of-type){ margin-bottom: 15px; padding-bottom: 15px; }
.list .list-item a{ border-top: 1px solid; }
.list .list-item a .article-title{ transition: all 0.35s ease; }
.list .list-item a:hover .article-title{ opacity: 0.5; transition: all 0.35s ease; }


a.article-link .article-image{ position: relative; }
a.article-link .article-image .article-image-hover{
	opacity: 0; transition: opacity 0.35s ease;
	width: 100%; height: 100%;
	position: absolute; top: 0; left: 0;
	background-repeat: no-repeat; background-position: center; background-size: cover;
}

@media (hover: hover) {
	a.article-link:hover .article-image .article-image-hover{
		opacity: 1; transition: opacity 0.35s ease;
	}
}



.section.grid_row_slider{}
.section.grid_row_slider .slick-slide{ padding: 1px; }


.section.grid_row_slider .sli-nav{
	padding: 15px 0;
}
.section.grid_row_slider .sli-nav .sli-counter{}
.section.grid_row_slider .sli-nav .sli-arrow{
	text-align: right;
}
.section.grid_row_slider .sli-nav .sli-arrow:hover{
	cursor: pointer;
}

.section.grid_row_slider .sli-nav .sli-arrow svg{
	display: inline-block; vertical-align: middle; height: 1.25rem;
}
.section.grid_row_slider .sli-nav .sli-arrow.sli-next{}
.section.grid_row_slider .content.text p{ margin-bottom: 15px; }

.section.layout_mixedcolumn_content{}
.section.layout_mixedcolumn_content .content.heading h2{ margin: 0; }

.section.layout_mixed_content .flex-item.sub_layout_list{}
.section.layout_mixed_content .flex-item.sub_layout_list .flex-container.flex-list-container{
	padding-top: 8px; padding-bottom: 7px;
}
.section.layout_mixed_content .flex-item.sub_layout_list .flex-container.flex-list-container::before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 15px;
    color: inherit;
    width: calc(100% - 30px);
    height: 1px;
    box-sizing: border-box;
    border-top: 1px solid;
}
.section.layout_mixed_content .flex-item.sub_layout_list .flex-container.flex-list-container:last-of-type::after{
	content: '';
    display: block;
    position: absolute;
    bottom: -1px;
    left: 15px;
    color: inherit;
    width: calc(100% - 30px);
    height: 1px;
    box-sizing: border-box;
    border-top: 1px solid;
}



/* header */
#site-header{
	position: absolute; /*position: fixed;*/
	top: 0; left: 0;
	z-index: 200;
}

#site-header.scrolling{
	position: fixed;
	background-color: #fff; color: #000; border-color: #000;
	top: 0; transition: top 0.2s ease;
}
	#site-header.scrolling .fill-primary,
	#site-header.scrolling.text-color-white .fill-primary{ fill: #000; }

	#site-header.scrolling .content.tagline{ line-height: 0; }
	#site-header.scrolling #site-tagline{ display: none; }

#site-header.scrolling:not(.up),
body.aside-open #site-header.scrolling.up{
	top: calc((2.96rem + 60px)*-1); transition: top 0.2s ease;
}

	.bg-charcoal #site-header.scrolling,
	body.page #site-header.scrolling,
	#site-header.scrolling.text-color-white{ color: #000; border-color: #000; }
	.bg-charcoal #site-header.scrolling .fill-primary,
	#site-header.scrolling.text-color-white .fill-primary,
	body.page #site-header.scrolling .fill-primary{ fill: #000; }


#site-header .inner,
#site-header-shadow .inner{ padding-top: 30px; padding-bottom: 30px; }
#site-header .content.tagline,
#site-header-shadow .content.tagline{ font-size: 2.47rem; line-height: 2.96rem; }

#site-header .content.tagline .site-logo-link,
#site-header-shadow .content.tagline .site-logo-link{
	display: inline-block; vertical-align: baseline; height: auto; line-height: 0;
}
#site-header .content.tagline #site-logo,
#site-header-shadow .content.tagline #site-logo{ 
	display: inline-block; vertical-align: baseline; height: 1.98rem; width: auto; margin-right: 0.1rem; 
	max-width: 100%;
}


#site-nav #site-nav-toggle,
#site-header #site-menu-toggle{
	display: inline-block; vertical-align: middle;
	width: 24px; height: 24px; 
	border-radius: 50%; overflow: hidden;
	border-width: 1px;
	border-style: solid; 
	box-sizing: border-box;
	color: inherit; border-color: inherit;
}
	#site-nav #site-nav-toggle:hover,
	#site-header #site-menu-toggle:hover{
		cursor: pointer;
		border: 12px solid;
	}
body.menu-open #site-nav #site-nav-toggle,
body.menu-open #site-header #site-menu-toggle{
	border: 12px solid;
}
body.menu-open #site-header #site-menu-toggle{ visibility: hidden; opacity: 0; }



#site-nav{
	position: fixed;
	top: 0; z-index: 202;
	height: 100vh; height: calc(var(--vh) * 100);
	width: 100%;
	left: auto; 
	/*opacity: 0;*/ /*display: none; */
	transition: all 0.35s ease;
}
body.menu-open #site-nav{
	/*left: 0; opacity: 1; transition: left 0.35s ease;*/
	/*display: block;*/ transition: all 0.35s ease;
}
#site-nav .inner{ 
	padding-left: 0; padding-right: 30px; 
	height: 100%;
}
#site-nav #site-nav-bg{
	position: fixed;
    top: 0;
    left: 0;
    width: calc(var(--fw) + 30px);
    height: 100%;
}
#site-nav #site-nav-bg .hover{
	position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


#site-nav #site-nav-items{
    position: relative;
}
#site-nav #site-nav-items.bg-white::after{
	content:'';
	display: block;
	position: absolute; top: 0; left: 100%;
	width: calc(var(--fw)/2); height: 100%; background-color: #fff;
}
#site-nav #site-nav-toggle{
	position: absolute;
    top: 30px; right: 0; z-index: 50;
}

#site-nav #site-nav-items .content{ padding: 0; height: 100%; }

ul#mainnav{
	height: 100%; width: 100%; margin: 0; padding: 0 0 0 30px;
}
ul#mainnav li{
	display: block;
	flex-basis: 100%; width: 100%;
	flex-grow: 0; flex-shrink: 0;
	position: relative; box-sizing: border-box; box-shadow: none; text-decoration: none;
	border: 0px none; margin: 0 0px; padding: 0 0px; max-width: 100%;
}
ul#mainnav li:not(:last-of-type){ border-bottom: 1px solid; }

ul#mainnav li a{ 
	padding: 15px 0;
	text-decoration: none; 
}


/* banner */
.section.layout_banner,
.section.layout_banner .banner-slide{ 
	padding: 0; margin: 0;
	height: 100vh; min-height: 100%; height: calc(var(--vh) * 100);
	background-repeat: no-repeat; background-position: center; background-size: cover; 
}
.section.layout_banner .inner{
	height: 100%;
}
.section.layout_banner .inner.lay_banner_scroll{
	position: absolute; top: 0; left: 0; width: 100%;
}

.section.layout_banner .inner.lay_banner_scroll svg{
	display: inline-block; vertical-align: middle; width: auto;
	padding: 30px 0; 
	position: relative; animation: scroll_bounce 0.9s infinite ease-in-out;
}
@keyframes scroll_bounce{ 0%,100%{ top: 0; } 50%{ top: -7px; } }

.section.layout_banner_filler{
	min-height: 260px;
	/*height: calc(var(--fw)/12*3);*/ 
	padding: 0 0;
}


#page-banner{ transition: all 0.35s ease; }
body.page #site-header{ color: #fff; }
	body.page #site-header.text-color-black{ color: #000; }
body.page #site-header .fill-primary,
body.page #page-banner .fill-primary{ fill: #fff; }
	body.page #site-header.text-color-black .fill-primary,
	body.page #page-banner.text-color-black .fill-primary{ fill: #000; }


#page-banner .banner-slider{
	background-color: #000;
}

#toggle-scroll-down:hover{ cursor: pointer; }

/* section layouts */

.section.layout_mixed_content .flex-container.flex-row-normal .grid-width-12 + .grid-width-12{
	padding-top: calc(var(--fw)/12*1);
}
.section.layout_mixed_content .flex-container.flex-col-reverse .grid-width-12 + .grid-width-12{
	padding-bottom: calc(var(--fw)/12*1);
}

.section.layout_aggregated_content .acci-nav{

}
.section.layout_aggregated_content .acci-nav:hover{
	cursor: pointer;
}
.section.layout_aggregated_content .acci-nav:not(.current){
	opacity: 0.47;
}

.section.layout_projects_feature .content.heading,
.section.layout_products_feature .content.heading{
	padding-bottom: 15px;
}
.section.layout_aggregated_content .acci-nav h3{
	margin: 0.2rem; text-transform: none;
}

.section.layout_related_posts h2{
	margin-top: 0;
}
	

article a{ text-decoration: none; }

.lay_media_grid_1 .content.media.media-3{
	padding-top: 30px;
}
.lay_media_grid_2 .content.media.media-1{
	padding-bottom: 30px;
}

.slick-initialized:not([data-slides="1"]) .slick-list.draggable:hover{ cursor: grab; }


.lay_mixed_media .sli-nav{ font-size: 1.64rem; }
.lay_mixed_media .sli-nav .sli-arrow{ padding: 15px 0; transition: opacity 0.35s ease; }
.lay_mixed_media .sli-nav .sli-arrow:hover{ 
	cursor: pointer; opacity: 0.5; transition: opacity 0.35s ease;
}
.lay_mixed_media .sli-nav .sli-arrow.sli-prev{ display: none!important; }
.lay_mixed_media .sli-nav .sli-arrow.sli-next{ text-align: right; }
.lay_mixed_media .sli-nav .sli-arrow svg{ height: 1.64rem; width: auto; display: inline-block; vertical-align: middle; }
.lay_mixed_media .sli-nav .sli-counter{ padding: 15px 0; }


.layout_text .flex-item:not(.flex-parts-100) .content.text{ padding-top: 30px; }


/* footer */
#site-footer{
	padding: 30px 0 calc(var(--fw)/24) 0;
}
#site-footer .divline{
	padding-top: 30px;
}
#site-footer .divline::before{ 
	content: '';
	display: block;
	position: absolute;
	top: 0; left: 15px; color: inherit;
	width: calc(100% - 30px); height: 1px; box-sizing: border-box; border-top: 1px solid; 
}

/*
#site-footer .flex-item:nth-of-type(1) .content{
	padding-top: 15px;
}

#site-footer .flex-item:nth-of-type(1) .content::before{ 
	content: '';
	display: block;
	position: absolute;
	top: 0; left: 15px; color: inherit;
	width: calc(100% - 30px); height: 1px; box-sizing: border-box; border-top: 1px solid; 
}
*/

/*---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/
/*-------------------------------------------------------- RESPONSIVE STYLES */
/*---------------------------------------------------------------------------*/
@media only screen and (min-width : 1950px) {
	#product-info-slide .info-main.bg-white::after{
		width: calc((100vw - 1950px)/2 + 15px);
    	right: calc(((100vw - 1950px)/2) * -1);
	}
}


@media only screen and (min-width : 1025px) {
	body:not(.aside-open) #site-container .site-part.site-part-nav{ display: none; }
	body:not(.modal-open) #site-container .site-part.site-part-info{ /*display: none;*/ }	
	body.aside-open #site-container.flex-container > .flex-item.flex-parts-100,
	body.modal-open #site-container.flex-container > .flex-item.flex-parts-100{ 
		flex-basis: 50%; width: 50%; 
		transition: all 0.35s ease;
	}
}

@media only screen and (max-width : 1024px) {
	h1, h2{ font-size: 1.64rem; }
	h2.h2, .h2{ font-size: 1.64rem; }
	ul#mainnav .h2{ font-size: 2.26rem; }

	h3, h2.h3{ font-size: 1.26rem; }
	h4, h5{ font-size: 1rem; }
	.text-banner{ font-size: 8rem; }	
	.text-largest{ font-size: 1.26rem; }
	.text-larger{ font-size: 1.26rem; }
	.text-large{ font-size: 1.14rem; }
	/*small, .text-small{ font-size: 0.82rem; }*/
	a.btn, div.btn a{ font-size: 0.82rem; }

	#site-footer .text-large{ font-size: 1.64rem; }

	.lay_mixed_media .sli-nav{ font-size: 1rem; }
	.lay_mixed_media .sli-nav .sli-arrow svg{ height: 1rem; }	

	#site-header .content.tagline #site-logo,
	#site-header-shadow .content.tagline #site-logo{ height: 1.64rem; }
	#site-header .content.tagline,
	#site-header-shadow .content.tagline{ font-size: 1.47rem; line-height: 1.25; }


	/* nav mobile */
	#site-header.menu-open{/* z-index: 0; */}
	html.menu-open, body.menu-open,
	html.filter-open, body.filter-open,
	html.modal-open, body.modal-open{
		overflow: hidden;
	}
	body #site-container .site-part{ z-index: 200; }
	body #site-container .site-part.site-part-info #product-info-slide,
	body #site-container .site-part.site-part-nav{
		position: fixed; top: 0; left: 100vw; transition: left 0.35s ease;
	}
	body.modal-open #site-container .site-part.site-part-info #product-info-slide,
	body.aside-open #site-container .site-part.site-part-nav{
		left: 0; transition: left 0.35s ease;
	}

	#site-nav #site-nav-bg{ display: none!important; }

	/* body aside mobile */
	#product-info-slide #product-info-toggle{ display: none; }

	#product-info-slide .info-main.bg-white{ 
		padding: 0 15px; 
	}	
	#product-info-slide .info-main.bg-white .content-container{
		padding-bottom: calc(1rem + 45px);
	}
	#product-info-slide .info-main.bg-white::after{ display: none; }

	#product-info-slide #product-info-toggle-mobi{  
		display: block; opacity: 0;
		top: calc( (var(--vh) * 100) + 1rem + 30px); 
		transition: top 0.35s ease, opacity 0.35s ease;  
	}

	#product-info-slide.down #product-info-toggle-mobi,
	#product-info-slide.open #product-info-toggle-mobi,
	#product-info-slide.open.up #product-info-toggle-mobi{ 
		display: block; opacity: 1;
		top: calc( (var(--vh) * 100) - 1rem - 30px); 
		transition: top 0.35s ease, opacity 0.35s ease;
	}
	#product-info-slide .inner{ padding: 0; }
	#product-info-slide .flex-item.grid-width-7.info-side.bg-clear{ display: none; }

	/* prod/proj filter */
	.filter-container #filter-toggle,
	.filter-container #filter-toggle.close{  
		display: block; 
		top: calc(100% + 3rem); transition: top 0.35s ease;
	}
		body.down .filter-container #filter-toggle:not(.close),
		body:not(.down) .filter-container.open #filter-toggle:not(.close){
			top: calc(100% - 3rem); transition: top 0.35s ease;
		}

	.filter-container .filters{
		position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    padding: 30px 30px;
	    padding-bottom: calc(3rem + 30px);
	    height: 100%;
	    overflow: auto;
	    background: #fff;
	    color: #000;
	}
	.filter-container:not(.open) .filters{ 
		top: 100vh; transition: top 0.35s ease;
	}
	.filter-container.open .filters{
		top: 0; transition: top 0.35s ease;
	}


	/* mid-style fix */
	.flex-container.lay_grid-archive_container{
		align-items: flex-start;
    	align-content: flex-start;
    	justify-content: flex-start;
    	flex-wrap: wrap;
	}
	.flex-container.lay_grid-archive_container .grid-width-2.lay_grid-archive,
	.flex-container.lay_grid-archive_container .grid-width-10.lay_grid-archive{
		flex-basis: calc(var(--fw));
    	width: calc(var(--fw));
	}
	#list-products.flex-container .flex-item.grid-width-5,
	#list-projects.flex-container .flex-item.grid-width-5{
		flex-basis: calc(var(--fw)/12*6);
    	width: calc(var(--fw)/12*6);
	}
}

/*
@media only screen and (min-width : 981px) {
	#site-footer .flex-item:nth-of-type(2) .content{
		padding-top: 15px;
	}
	#site-footer .flex-item:nth-of-type(2) .content::before{ 
		content: '';
		display: block;
		position: absolute;
		top: 0; left: 15px; color: inherit;
		width: calc(100% - 30px); height: 1px; box-sizing: border-box; border-top: 1px solid; 
	}

	#site-part-main.mobi-view #site-footer .flex-item:nth-of-type(2) .content{ padding-top: 0; }
	#site-part-main.mobi-view #site-footer .flex-item:nth-of-type(2) .content::before{ display: none; }
}
*/
@media only screen and (max-width : 980px) {
	.text-banner{ font-size: 4rem; }	
	#site-header .content.tagline,
	#site-header-shadow .content.tagline{ font-size: 1.2rem; line-height: 1.25; }
	#site-header .content.tagline #site-logo,
	#site-header-shadow .content.tagline #site-logo{ height: 1.32rem; }
	#site-header .content.tagline #site-tagline,
	#site-header-shadow .content.tagline #site-tagline{
		display: block; margin-top: 6px;
    	width: calc(var(--fw) - 30px);
	}


	#site-header.scrolling .content.tagline #site-tagline{ display: none; }

	.section.layout_banner .inner.lay_banner_scroll svg{ height: 1.67rem; }

	#site-header .flex-container .flex-item.grid-width-11{
		flex-basis: calc(var(--fw)/12*9);
    	width: calc(var(--fw)/12*9);
	}
	#site-header .flex-container .flex-item.grid-width-1{
		flex-basis: calc(var(--fw)/12*3);
    	width: calc(var(--fw)/12*3);
	}

	#site-nav #site-nav-bg{ display: none; }
	#site-nav #site-nav-items .content{ padding: 0; }
	ul#mainnav li a{ display: block; }


	#site-nav #site-nav-toggle, #site-header #site-menu-toggle{ width: 20px; height: 20px; }
	body.menu-open #site-nav #site-nav-toggle, body.menu-open #site-header #site-menu-toggle{ border: 10px solid; }
	body.menu-open.scrolling #site-nav #site-nav-items{ padding: 15px 0; }

	#site-footer { padding-top: 15px; }

	.section.layout_projects_feature .content.heading, .section.layout_products_feature .content.heading{ padding-bottom: 0; }

	.flex-container .flex-item.grid-offset-1,
	.flex-container .flex-item.grid-offset-2,
	.flex-container .flex-item.grid-offset-3,
	.flex-container .flex-item.grid-offset-4,
	.flex-container .flex-item.grid-offset-5,
	.flex-container .flex-item.grid-offset-6{ margin-left: 0; }

	.flex-container:not(.flex-nowrap){ flex-wrap: wrap; }
/*	.flex-container:not(.flex-nowrap) .flex-item.flex-parts-66,
	.flex-container:not(.flex-nowrap) .flex-item.flex-parts-33,
	.flex-container:not(.flex-nowrap) .flex-item.flex-parts-50{ flex-basis: 100%;  width: 100%; }
	.flex-container:not(.flex-nowrap) .flex-item.flex-parts-25{ flex-basis: 50%;  width: 50%; }	*/

	/* from 8 to 12 */
	.flex-container .flex-item.flex-parts-g2{ flex-basis: calc(var(--fw)/12*4); width: calc(var(--fw)/12*4); }
	.flex-container .flex-item.flex-parts-g6{ flex-basis: calc(var(--fw)/12*8); width: calc(var(--fw)/12*8); }

	.sli-nav.flex-container .flex-item.flex-parts-50,
	.sli-nav.flex-container.flex-wrap .flex-item.flex-parts-50{ flex-basis: 50%;  width: 50%; }

	.flex-container .flex-item.grid-width-1,
	.flex-container .flex-item.grid-width-2,
	.flex-container .flex-item.grid-width-3,
	.flex-container .flex-item.grid-width-4,
	.flex-container .flex-item.grid-width-5,
	.flex-container .flex-item.grid-width-6,
	.flex-container .flex-item.grid-width-7,
	.flex-container .flex-item.grid-width-8,
	.flex-container .flex-item.grid-width-9,
	.flex-container .flex-item.grid-width-10,
	.flex-container .flex-item.grid-width-11{ flex-basis: calc(var(--fw)); width: calc(var(--fw)); }
	#list-products.flex-container .flex-item.grid-width-5,
	#list-projects.flex-container .flex-item.grid-width-5{
		flex-basis: calc(var(--fw));
    	width: calc(var(--fw));
	}

	.section.grid_row_images .flex-item + .flex-item .content{ padding-top: 30px; }
	.lay_media_grid_1 .content.media.media-2{ padding-top: 30px; }
	.lay_media_grid_2 .content.media.media-2{ padding-bottom: 30px; }

	.section.layout_mixedcolumn_content .content.media{ padding-bottom: 30px; }
}
@media only screen and (max-width : 680px) {
	.flex-container:not(.flex-nowrap) .flex-item.flex-parts-66,
	.flex-container:not(.flex-nowrap) .flex-item.flex-parts-33,
	.flex-container:not(.flex-nowrap) .flex-item.flex-parts-50{ flex-basis: 100%;  width: 100%; }
	.flex-container:not(.flex-nowrap) .flex-item.flex-parts-25{ flex-basis: 50%;  width: 50%; }	

/*	.flex-container .flex-item.flex-parts-g2{ flex-basis: 33.33%; width: 33.33%; }
	.flex-container .flex-item.flex-parts-g6{ flex-basis: 66.66%; width: 66.66%; }*/
}

@media only screen and (max-width : 360px) {
	ul#mainnav .h2{ font-size: 1.47rem; }
	#site-header .content.tagline,
	#site-header-shadow .content.tagline{ font-size: 1rem; }	

	#site-footer .text-large{ font-size: 1.47rem; }
}


/* ********************************************************** */
/* RESPONSIVE STYLES @ SIDENAV OPEN .site-part.site-part-main */
#site-part-main.mobi-view{}
@media only screen and (min-width : 979px) {

	#site-part-main.mobi-view  #site-footer { padding-top: 15px; }

	#site-part-main.mobi-view  .section.layout_projects_feature .content.heading, 
	#site-part-main.mobi-view  .section.layout_products_feature .content.heading{ padding-bottom: 0; }

	#site-part-main.mobi-view  .flex-container .flex-item.grid-offset-1,
	#site-part-main.mobi-view  .flex-container .flex-item.grid-offset-2,
	#site-part-main.mobi-view  .flex-container .flex-item.grid-offset-3,
	#site-part-main.mobi-view  .flex-container .flex-item.grid-offset-4,
	#site-part-main.mobi-view  .flex-container .flex-item.grid-offset-5,
	#site-part-main.mobi-view  .flex-container .flex-item.grid-offset-6{ margin-left: 0; }

	#site-part-main.mobi-view .flex-container:not(.flex-nowrap){ flex-wrap: wrap; }
	#site-part-main.mobi-view .flex-container:not(.flex-nowrap) .flex-item.flex-parts-66,
	#site-part-main.mobi-view .flex-container:not(.flex-nowrap) .flex-item.flex-parts-33,
	#site-part-main.mobi-view .flex-container:not(.flex-nowrap) .flex-item.flex-parts-50{ flex-basis: 100%;  width: 100%; }
	#site-part-main.mobi-view .flex-container:not(.flex-nowrap) .flex-item.flex-parts-25{ flex-basis: 50%;  width: 50%; }

	#site-part-main.mobi-view .sli-nav.flex-container .flex-item.flex-parts-50,
	#site-part-main.mobi-view .sli-nav.flex-container.flex-wrap .flex-item.flex-parts-50{ flex-basis: 50%;  width: 50%; }

	#site-part-main.mobi-view .flex-container .flex-item.grid-width-1,
	#site-part-main.mobi-view .flex-container .flex-item.grid-width-2,
	#site-part-main.mobi-view .flex-container .flex-item.grid-width-3,
	#site-part-main.mobi-view .flex-container .flex-item.grid-width-4,
	#site-part-main.mobi-view .flex-container .flex-item.grid-width-5,
	#site-part-main.mobi-view .flex-container .flex-item.grid-width-6,
	#site-part-main.mobi-view .flex-container .flex-item.grid-width-7,
	#site-part-main.mobi-view .flex-container .flex-item.grid-width-8,
	#site-part-main.mobi-view .flex-container .flex-item.grid-width-9,
	#site-part-main.mobi-view .flex-container .flex-item.grid-width-10,
	#site-part-main.mobi-view .flex-container .flex-item.grid-width-11{ flex-basis: calc(var(--fw)); width: calc(var(--fw)); }

	#site-part-main.mobi-view .section.grid_row_images .flex-item + .flex-item .content{ padding-top: 30px; }
	#site-part-main.mobi-view .lay_media_grid_1 .content.media.media-2{ padding-top: 30px; }
	#site-part-main.mobi-view .lay_media_grid_2 .content.media.media-2{ padding-bottom: 30px; }

	#site-part-main.mobi-view .section.layout_mixedcolumn_content .content.media{ padding-bottom: 30px; }

}