/*
Theme Name: Markus Hecht (2024)
Theme URI: https://www.brandgrad.com
Author: brandgrad° GmbH (Johannes Gehrke)
Author URI: https://www.brandgrad.com
Description: Wordpress Theme für die Kanzlei Uta Hervol München
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 8.1
Version: 1.2.2a
License: 
License URI: 
Text Domain: 
Tags: 
*/

:root{
	--color-white        : rgb( 255, 255, 255 );
	--color-red          : rgb( 185,  76,  39 );
	--color-gray-light   : rgb( 239, 241, 242 );
	--color-gray         : rgb( 220, 223, 226 );
	--color-gray-dark    : rgb( 217, 218, 219 );
	--color-gray-darker  : rgb( 197, 199, 200 );
	--color-gray-darkest : rgb(  75,  74,  77 );
	--color-black        : rgb(  20,  18,  21 );

	--font-size-h1      : 60px;
	--font-size-h2      : 40px;
	--font-size-h3      : 24px;
	--font-size-h4      : 16px;
	--font-size-body    : 16px;

	--line-height       : 1.625em;
	--line-height-list  : 1.625em;

	--font-sans         : 'Jost', Helvetica, "Helvetica Neue", Roboto, Arial, sans-serif;
	--f-weight-light    : 300;
	--f-weight-regular  : 400;
	--f-weight-semi     : 500;
	--f-weight-bold     : 600;

	--row-width         : 1004px;
	--gap-width         :   16px;
}
	@media screen and ( max-width : 1020px ){
		:root{		
			--font-size-h1      : 45px;
			--font-size-h2      : 35px;
			--font-size-h3      : 24px;
			--font-size-h4      : 16px;
		}
	}
	@media screen and ( max-width : 480px ){
		:root{		
			--font-size-h1      : 32px;
			--font-size-h2      : 24px;
			--font-size-h3      : 20px;
			--font-size-h4      : 16px;
		}
	}



html {
	scroll-behavior : smooth;
}


/* =================================== *\

	T Y P O   &   F O N T S

\* =================================== */

body{
	font-family      : var(--font-sans);
	font-size        : var(--font-size-body);
	line-height      : var(--line-height);
	font-weight      : 400;
	color            : var(--color-black);
	background-color : var(--color-white);
	width            : 100vw;
	max-width        : 100vw;
	overflow-x       : hidden;

}
body.admin-bar{
	/* padding-top : 32px; */
}

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
	margin         : 0px 0px calc( var(--gap-width) * 1 ) 0px;
	padding        : 0px 0px 0px 0px;
	font-family    : var(--font-sans);
	color          : var( --color-red );
	text-transform : none;
}

h1,
.h1{
	font-size   : var(--font-size-h1);
	line-height : 1.36em;
	font-weight : var(--f-weight-bold);
}


h2,
.h2{
	font-size   : var(--font-size-h2);
	line-height : 1.36em;
	font-weight : var(--f-weight-bold);
}
h3,
.h3{
	font-family : var(--font-sans);
	font-size   : var(--font-size-h3);
	line-height : 1.36em;
	font-weight : var(--f-weight-bold);
}
h4,
.h4{
	font-family : var(--font-sans);
	font-size   : var(--font-size-h4);
	line-height : 1.36em;
	font-weight : var(--f-weight-bold);
}

strong,
.strong{
	font-weight : var(--f-weight-semi);
}

p,
.p{
	margin         : 0px 0px calc( var(--gap-width) * 2 ) 0px;
	padding        : 0px 0px 0px 0px;
	font-weight    : 300;
}
	p:last-child,
	.p:last-child{
		margin     : 0px 0px 0px 0px;
	}

ul{
	margin      : 0px 0px 0px 0px;
	padding     : 0px 0px 0px var(--gap-width);
}
ul li{
	margin      : 0px 0px 12px 0px;
	font-size   : var(--font-size-body);
	line-height : var(--line-height-list);
}
	ul li:last-child{
		margin      : 0px 0px 0px 0px;
	}


a{
	text-decoration : none;
	/*
	text-decoration : underline;
	text-decoration-color : rgba(255,255,255,0);
	*/
	text-transform  : uppercase;
	font-weight     : var(--f-weight-semi);
	color           : var(--color-red);
	filter          : brightness(100%);
	transition      : color 200ms, filter 200ms, text-decoration-color 200ms;
}
	a:hover{
		color  : var(--color-red);
		filter : brightness(120%);
		/* text-decoration-color : var(--color-red); */
	}
	
	.blog-post.is-highlight a{
		display                   : inline-block;
		color                     : rgba(255,255,255,0.9);
		text-decoration           : underline;
		text-decoration-style     : solid;
		text-decoration-thickness : 1px;
		text-underline-offset     : 5px;
		text-decoration-color     : rgba(255, 255, 255, 0.6);
		transition                : all 250ms;
	}
	.blog-post.is-highlight a:hover{
		color                     : var(--color-white);
		text-decoration-color     : rgba(255, 255, 255, 1);
	}

input,
textarea{
	margin           : 0px 0px 0px 0px;
	padding          : 10px 16px 10px 12px;
	font-family      : var(--font-sans);
	font-size        : var(--font-size-smaller);
	color            : var(--color-black);
	border           : none;
	outline          : none;
	box-shadow       : none;
	border-left      : 4px solid var(--color-white);
	border-radius    : 8px;
	background-color : rgb(2425,245,245);
	transition       : border-left-color 200ms;
}
	input:focus,
	textarea:focus{
		outline           : none;
		border-left-color : rgb(0, 128, 255);  
		background-color  : var(--color-white);
	}


.font-color-red{
	color : var(--color-red) !important;
}
.font-color-black{
	color : var(--color-black) !important;
}
.leading-title{
	margin         : 0px 0px calc( var(--gap-width) * 1 ) 0px;
	font-family    : var(--font-sans);
	color          : var(--color-black);
	text-transform : uppercase;
}
.leading-title + h1,
.leading-title + h2,
.leading-title + h3,
.leading-title + h4{
	margin-top : 0px;
}

.block-title{
	color          : var(--color-red);
	text-transform : uppercase;
}

.link--arrow-right{
	margin              : 0px 0px 0px 0px;
	padding             : 0px calc(12px + var(--gap-width)) 0px 0px; /* 12px - Arrow Breite */
	display             : inline-block;
	height              : 14px;
	line-height         : 14px;
	color               : var(--color-red);
	background-image    : url( 'assets/gfx/icons/icon-arrow-right-red.svg' );
	background-position : right top;
	background-size     : 12px 14px;
}

.link--square{
	margin              : 0px 0px 0px 0px;
	padding             : 0px calc(12px + var(--gap-width)) 0px 0px; /* 12px - Arrow Breite */
	display             : inline-block;
	height              : 14px;
	line-height         : 14px;
	color               : var(--color-red);
	background-image    : url( 'assets/gfx/icons/icon-square-red.svg' );
	background-position : right top;
	background-size     : 12px 14px;
}

.link--arrow-down{
	margin              : 0px 0px 0px 0px;
	padding             : 0px 0px 0px calc(12px + var(--gap-width)); /* 12px - Arrow Breite */
	display             : inline-block;
	height              : 14px;
	line-height         : 14px;
	color               : var(--color-black);
	background-image    : url( 'assets/gfx/icons/icon-arrow-down-black.svg' );
	background-position : left top;
	background-size     : 12px 14px;
}
	.link--arrow-down:hover{
		color           : var(--color-black);
		filter          : brightness(200%);
	}

.button{
	margin                    : 0px 0px 0px 0px;
	padding                   : 10px 32px 10px 32px;
	display                   : inline-block;
	font-size                 : var(--font-size-smaller);
	text-transform            : uppercase;
	color                     : var(--color-white);
	background-color          : var(--color-gray);
	border                    : none;
	outline                   : none;
	border-radius             : 8px;
	filter                    : brightness(100%);
	transition                : filter 200ms;
	cursor                    : pointer;
}
	.button:hover{
		filter                : brightness(120%);
	}

	.button-gray{
		text-transform   : uppercase;
		color            : var(--color-white);
		background-color : var(--color-gray);
	}
	.button-red{
		text-transform   : uppercase;
		color            : var(--color-white);
		background-color : var(--color-red);
	}
	.button--hollow{
		background-color : rgba( 255,255,255,0 );
		border           : 2px solid rgba( 255,255,255,1 );
	}

.background-white{
	background-color : var(--color-white);
}
.background-red{
	background-color : var(--color-red);
}
.background-gray-light{
	background-color : var(--color-gray-light);
}
.background-gray{
	background-color : var(--color-gray);
}
.background-black{
	background-color : var(--color-black);
}
	.background-red,
	.background-red h1,
	.background-red h2,
	.background-red h3,
	.background-red h4,
	.background-red h5,
	.background-red p,
	.background-red .leading-title,
	.background-black,
	.background-black h1,
	.background-black h2,
	.background-black h3,
	.background-black h4,
	.background-black h5,
	.background-black p,
	.background-black .leading-title
	{
		color : var(--color-white);
	}

body .container.padding-top-none{
	padding-top : 0px;
}
body .container.padding-bottom-none{
	padding-bottom : 0px;
}
body .container.padding-both-none{
	padding-top : 0px;
	padding-bottom : 0px;
}


/* =================================== *\

	H E L P E R

\* =================================== */

/* Ankerpunkt für Scrollen, unsichtbar */
.scroll_anchor{
	position : relative;
	top      : -48px;
	left     : 0px;
	width    : 100%;
	height   : 0px;
	opacity  : 0;
}


.hidden{
	display : none;
}


/* Styling der Debug-Ausgabe für Programmierung */
.debug{
	display          : block;
	margin           : 22px;
	padding          : 11px;
	max-width        : calc( 100% - 44px );
	background-color : rgb(255 245 225);
	border-left      : 11px solid rgb(255,200,0);
}
	.debug__title{
		margin      : 0px 0px 22px 0px;
		font-family : -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
		font-weight : 600;
		font-size   : 18px;
		line-height : 22px;
		color       : rgb(255,200,0);
		text-shadow : 1px 1px 2px rgba(125,100,0,0.3);
	}
	.debug__details{
		font-family : Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
		font-size   : 10px;
		line-height : 16px;
	}
	.debug__print{
		margin      : 0px;
		padding     : 0px;
		font-family : Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
		color       : rgb(90,90,90);
		font-size   : 12px;
		line-height : 22px;
	}


/* =================================== *\

	G U T E N B E R G 
	O V E R W R I T E S  

\* =================================== */

/* --- Bildunterschrift */
body .wp-block-gallery.has-nested-images figure.wp-block-image figcaption{
    margin           : 0px 0px 0px 0px;
    padding          : 12px 8px 12px 8px;
    font-size        : 10px;
    line-height      : 12px;
    font-weight      : 400;
	background-color : rgba(0, 0, 0, 0.7);
}

/* =================================== *\

	E L E M E N T O R
	O V E R W R I T E S  

\* =================================== */
body .elementor-element[data-element_type="container"]{
	padding : 0px 0px 0px 0px;
}
			
body .elementor-column-gap-default>.elementor-column>.elementor-element-populated {
    padding : 0px 0px 0px 0px;
}

body .elementor-widget:not(:last-child){
	margin : 0px 0px 0px 0px;
}




/* =================================== *\

	G R I D  

\* =================================== */
.container{
	display         : flex;
	justify-content : center;
}

.inner-row{
	display         : flex;
	flex-wrap       : nowrap;
	justify-content : space-between;
	width           : var(--row-width);
	max-width       : 100vw;
}
	@media screen and ( max-width : 1040px ){
		.inner-row{
			width     : calc( 100vw - 32px - 32px );
			max-width : 100vw;
		}
	}
	@media screen and ( max-width : 560px ){
		.inner-row{
			flex-wrap : wrap;
		}
	}

.column{
	flex : 0 1 calc( 50% - calc( var(--gap-width) / 2 ) );
}
	@media screen and ( max-width : 560px ){
		.column{
			flex : 1 0 100%;
		}
	}

div.padding-top-bottom-none{
	padding : 0px 0px 0px 0px;
}

/* =================================== *\

	E L E M E N T E 

\* =================================== */

/* ------------------------------------ *\
	MENU / NAVBAR / HEADER SPACER
\* ------------------------------------ */

.menu-spacer{
	height : 80px;
}

/* ------------------------------------ *\
	HEADER - NAVBAR
\* ------------------------------------ */

.header-navbar{
	position         : fixed;
	top              : 0px;
	left             : 0px;
	z-index          : 100;
	width            : 100%;
	height           : 80px;
	align-items      : center;
	background-color : rgba(255,255,255,0);
	box-shadow       : 0px 1px 10px rgba(0, 0, 0, 0);
	transition       : background-color 250ms, box-shadow 250ms;
}
	.header-navbar--bg-white .header-navbar{
		background-color : rgba(255,255,255,1);
		box-shadow       : 0px 1px 10px rgba(0, 0, 0, 0.05);
	}

	@media screen and ( max-width : 920px ){
		.fixed-header-placholder,
		.header-navbar{
			height  : 60px;
		}
	}

body.admin-bar .header-navbar{
	top : 32px;
}

	.header-navbar__inner-wrapper{
		align-items     : center;
		justify-content : space-between;
	}

	/* --- LOGO (Desktop) --- */
	.header-navbar__logo{
		flex                : 0 0 320px;
		display             : block;
		height              : 45px;
		background-size     : contain;
		background-position : left center;
	}
	.header-navbar__logo--mobile{
		flex                : 0 1 60px;
		display             : none;
		height              : 45px;
		background-size     : contain;
		background-position : left center;
	}
		@media screen and ( max-width : 920px ){
			.header-navbar__logo{
				display             : block;
				width               : 156px;
				height              : 36px;
			}
		}
		@media screen and ( max-width : 560px ){
			.header-navbar__logo{
				display             : none;
			}
			.header-navbar__logo--mobile{
				display             : block;
			}
		}

	/* --- BUTTON : MAIN MENU --- */
	.header-navbar__menu-button{
		margin  : 0px 0px 0px 16px;
		padding : 0px 0px 0px  0px;
		flex    : 0 0 45px;
		display : block;
		height  : 45px;
	}
		.header-navbar__menu-button svg{
			width   : 45px;
			height  : 45px;
		} 
		

/* --- SECONDARY MENU - 2. MENÜ links neben Menü-Button */
ul.header-navbar__menu-secondary{
	margin          : 0px 0px 0px 0px;
	padding         : 0px 0px 0px 0px;
	flex            : 2 2 100%;
	display         : flex;
	justify-content : flex-end;
	align-items     : center;
	height          : 45px;
	list-style-type : none;
}	
	@media screen and ( max-width : 920px ){
		ul.header-navbar__menu-secondary{
			display : none;
		}
	}

	ul.header-navbar__menu-secondary li.menu-item{
		margin  : 0px 0px 0px 0px;
		padding : 0px 0px 0px 0px;
		display : flex;
		height  : 100%;
	}
	ul.header-navbar__menu-secondary li.menu-item a{
		margin      : 0px 0px 0px 16px;
		padding     : 0px 0px 0px 0px;
		display     : block;
		height      : 100%;
		line-height : 45px;
	}




/* ------------------------------------ *\
	OffCanvas Menu
\* ------------------------------------ */
.offcanvas-menu{
	position         : fixed;
	top              : 0px;
	left             : 0px;
	width            : 100dvw;
	height           : 100dvh;
	opacity          : 1;
	background-color : var(--color-black);
	overflow         : hidden;
	z-index          : 100;

	display          : none;
	opacity          : 0;
	transition       : opacity 250ms;
}
	body.offcanvas-menu--enabled .offcanvas-menu{ display : block; }
	body.offcanvas-menu--fade-in .offcanvas-menu{ opacity : 1; }
	
	body.offcanvas-menu--fade-in #GROUP-DOTS{
		transform        : rotate(-90deg);
	}

	.header-navbar--bg-white .offcanvas-menu .header-navbar{
		background-color : rgba(255,255,255,0);
	}

.offcanvas-menu__wrapper{}

.offcanvas-menu__menus{
	display         : flex;
	flex-wrap       : wrap;
	justify-content : flex-start;
	align-items     : center;
	align-content   : center;
	height          : 100dvh;
}



.offcanvas-menu__menus ul.header-navbar__menu-main,
.offcanvas-menu__menus ul.header-navbar__menu-secondary{
	margin  : 0px 0px 0px 0px;
	padding : 0px 0px 0px 0px;
	flex    : 1 0 100%;
	display : block;
	height  : auto;
}
.offcanvas-menu__menus ul.header-navbar__menu-main li,
.offcanvas-menu__menus ul.header-navbar__menu-secondary li{
	margin  : 0px 0px 0px 0px;
	padding : 0px 0px 0px 0px;
	display : block;
	width   : 100%;
	height  : calc( 50px + 16px + 16px );
}
.offcanvas-menu__menus ul.header-navbar__menu-main li a{
	color : var(--color-white);
}
.offcanvas-menu__menus ul.header-navbar__menu-main li a,
.offcanvas-menu__menus ul.header-navbar__menu-secondary li a{
	margin      : 0px 0px 0px 0px;
	padding     : 16px 0px 16px 0px;
	display     : block;
	width       : 100%;
	height      : 20px;
	font-size   : 50px;
	line-height : 20px;
} 

	/* 
		Schrift verkleinern, wenn Screen zu klein wird 
		und Navi nach oben orientieren
	*/
	@media screen and (max-width: 768px), 
		screen and (max-height: 750px) {
			.offcanvas-menu__menus{
				padding-top     : 80px;
				/*
				align-items     : flex-start;
				align-content   : flex-start;
				*/

			}

		.offcanvas-menu__menus ul.header-navbar__menu-main li,
		.offcanvas-menu__menus ul.header-navbar__menu-secondary li{
			height  : calc( 20px + 16px + 16px ) !important;
		}
		.offcanvas-menu__menus ul.header-navbar__menu-main li a,
		.offcanvas-menu__menus ul.header-navbar__menu-secondary li a{
			height      : 20px;
			font-size   : 20px;
			line-height : 20px;
		} 

	}





/* ------------------------------------ *\
	VideoHeader
\* ------------------------------------ */
.video-header{}
	.video-header.screen-is-large{}
	.video-header.screen-is-wide{}

	.video-header__wrapper{
		position        : relative;
		display         : flex;
		justify-content : flex-start;
		align-items     : center;
		width           : 100%;
		max-width       : 100%;
		height          : 100vh;
		max-height      : 100vh;
		overflow        : hidden;

		/* Erstmal Default 16:9 size */
		width      : 100vw;
		height     : calc( 100vw / 16 * 9 );
		min-width  : auto;
		min-height : auto;
	}
		.screen-is-large .video-header__wrapper,
		.screen-is-wide  .video-header__wrapper{
			width      : 100vw;
			height     : calc( 100vw / 16 * 9 );
			min-width  : auto;
			min-height : auto;
		}

	/* --- Video --- */
	.video-header__video{
		position   : absolute;
		z-index    : 0;
		width      : auto;
		height     : auto;
		object-fit : cover;
	}
	.screen-is-wide .video-header__video{
		min-width      : 100dvw;
		min-height     : 100dvh;
	}

	/* --- Controls --- */
	.video-header__controls{
		position    : absolute;
		bottom      : 0px;
		z-index     : 20;
		left        : 50%;
		max-width   : 50%;
		width       : 50%;
		margin-left : calc( 1024px / -2 + var(--gap-width) );
	}
		@media screen and (max-width: 1040px) {
			.video-header__controls{
				position    : absolute;
				bottom      : 0px;
				left        : 0px;
				margin-left : var(--gap-width);
			}
		}


		.video-header__control-start-video,
		.video-header__control-stop-video{
			margin              : 0px 0px calc( var(--gap-width) * 6 ) 0px;
			padding             : 16px 48px 16px 32px;
			width               : auto;
			line-height         : 4px;
			border              : 3px solid var(--color-red);
			border-radius       : 4px;
			background-position : calc(100% - 16px) center;
		}
		@media screen and ( max-width : 1020px){
			.video-header__control-start-video,
			.video-header__control-stop-video{
				margin              : 0px 0px var(--gap-width) 0px;
			}
		}

		.video-header__control-scroll-down{
			margin :  var(--gap-width) 0px 0px 0px;
		}

	/* --- Headline --- */
	.video-header__headline-overlay{
		position    : absolute;
		z-index     : 10;
		left        : 50%;
		margin-left : calc( var(--row-width) / -2 ); /* Damit es zentriert ist, bei left:50% */
		max-width   : calc( var(--row-width) / 1.8 );  /* 1.8 ist bissl mehr als 50% breite. Gut für Typo, dass es nicht zu schnell umbricht */
		width       : 100%;
	}
	@media screen and ( max-width : 1020px ){
		.video-header__headline-overlay{
			left        : 0%;
			margin-left : var(--gap-width);
			max-width   : calc( 50% - var(--gap-width) );
		}
	}

	h1.video-header__title{
		margin         : 0px 0px 0px 0px;
		padding        : 0px 0px 0px 0px;
		font-size      : var(--font-size-h2);
		line-height    : 1.3em;
		text-transform : uppercase;
		color          : var(--color-black);
	}
	h2.video-header__headline{
		margin         : 0px 0px 0px 0px;
		padding        : 0px 0px 0px 0px;
		font-size      : var(--font-size-h1);
		line-height    : 1.3em;
		text-transform : none;
		color          : var(--color-red);
	}
	@media screen and ( max-width : 820px ){
		h1.video-header__title{
			font-size      : 35px;
		}
		h2.video-header__headline{
			font-size      : 35px;
		}
	}
	@media screen and ( max-width : 760px ){
		h1.video-header__title{
			font-size      : 28px;
		}
		h2.video-header__headline{
			font-size      : 28px;
		}
	}
	@media screen and ( max-width : 560px ){
		h1.video-header__title{
			font-size      : 16px;
		}
		h2.video-header__headline{
			font-size      : 16px;
		}
	}


/* ------------------------------------ *\
   ImageHeader
\* ------------------------------------ */
.image-header{
	background-color    : var(--color-gray);
	background-size     : cover;
	background-position : center center;
	background-repeat   : no-repeat;
}
	@media screen and ( max-width : 1040px ){
		.image-header{
			background-image : none !important;
		}
	}

	.image-header__wrapper{
		position        : relative;
		display         : flex;
		justify-content : flex-start;
		align-items     : center;
		width           : 100%;
		max-width       : 100%;
		height          : 100vh;
		max-height      : 100vh;
		overflow        : hidden;

		/* Erstmal Default 16:9 size - Nav-Header-Höhe */
		width      : 100vw;
		height     : calc( 100vw / 16 * 9 - 80px);
		min-width  : auto;
		min-height : auto;
	}
	.image-header__overlay{
		flex            : 1024px 0 1;
		display         : flex;
		justify-content : flex-start;
		align-items     : center;

		position        : absolute;
    	left            : 50%;
		margin-left     : calc( 1024px / -2 + var(--gap-width) );
	}

	.image-header__content{
		flex : 50% 0 1;
	}
	
	.image-header__content h1{
		font-size   : 50px;
		line-height : 1.36em;
	}
	.image-header__content p{
		font-size   : 2em;
		line-height : 1.4em;
	}
		@media screen and ( max-width : 1040px ){
			.image-header__wrapper{
				padding     : 32px 32px 32px 32px;
				min-height  : calc( 100vw / 16 * 9 - 80px);
				height      : auto;
			}
			.image-header__overlay{
				flex        : 100% 0 1;
				position    : relative;
				left        : 0;
				margin-left : 0;
			}
			.image-header__content{
				flex : 100% 1 1;
			}
		}
		@media screen and ( max-width : 767px ){
			.image-header__content h1{
				font-size   : 35px;
				line-height : 1.36em;
			}
			.image-header__content p{
				font-size   : 16px;
				line-height : 1.4em;
			}
		}
		

/* ------------------------------------ *\
   TextColumns (.text-columns)
\* ------------------------------------ */
.text-columns{
	padding : calc( var(--gap-width) * 3 ) 0px calc( var(--gap-width) * 3 ) 0px;
}
	@media screen and ( max-width : 560px ){
		.text-columns.has-background-visual {
			background-image:none !important;
		}
	}


	.text-columns__wrapper{}
	.text-columns__column{}
	.text-columns__column--left{}
	.text-columns__column--right{}



/* ------------------------------------ *\
   Image (.image)
   
   Image Wrapper Element, nicht das
   normale HTML-IMG-Tag
\* ------------------------------------ */
.image{
	padding : calc( var(--gap-width) * 3 ) 0px calc( var(--gap-width) * 3 ) 0px;
}
	.image__wrapper{
		display         : flex;
		justify-content : space-around;
		align-items     : center;
	}
	.image__image{
		display : block;
		flex    : 1 1 100%
	}


/* ------------------------------------ *\
   Colored Items (.colored-items)
\* ------------------------------------ */
.colored-item-columns{
	padding : var(--gap-width) 0px var(--gap-width) 0px;
}
.colored-items{
	display         : flex;
	flex-wrap       : nowrap;
	justify-content : space-between;
	align-items     : stretch;
	align-content   : stretch;
}
	.colored-items__item{
		padding       : var(--gap-width) var(--gap-width) var(--gap-width) var(--gap-width);
		margin        : 0px 0px var(--gap-width) 0px;
		flex          : 0 1 calc( 25% - var(--gap-width) );
		border-radius : 8px;
	}
	.colored-items__item-title{
		font-size      : var(--font-size-body);
		text-transform : uppercase;
		color          : var(--color-black);
	}
	.colored-items__item-content{}

	@media screen and ( max-width : 1040px ){
		.colored-items{
			flex-wrap : wrap;
		}
		.colored-items__item{
			flex      : 0 0 calc( 50% - 8px );
		}
	}
	@media screen and ( max-width : 760px ){
		.colored-items{
			flex-wrap : wrap;
		}
		.colored-items__item{
			flex      : 0 0 calc( 100% - 8px );
		}
	}



/* ------------------------------------ *\
   Customer Quotes Slides
   (.customer-quotes-slider)
\* ------------------------------------ */
.customer-quotes-slider{
	padding : var(--gap-width) 0px var(--gap-width) 0px;
}
	.customer-quotes-slider__wrapper{ width: 100%; max-width : 100%; }
	.customer-quotes-slider__slider{ width: 100%; max-width : 100%; }
	.customer-quote{}

.customer-quote{
	background-color : var(--color-red);
}

.customer-quotes-slider__slider{
	width : var(--row-width);
}

.customer-quotes-slider .slick-track{
	display     : flex;
	align-items : center;
}

.customer-quotes-slider__controls{
	margin        : var(--gap-width) 0px 0px 0px;
	display       : flex;
	justify-items : space-between;
	height        : 50px;
}

.customer-quotes-slider__arrow{
	display             : block;
	width               : 14px;
	height              : 14px;
	font-size           : 0px;
	color               : rgba(255,255,255,0);
	background-size     : 14px 14px;
	background-position : center center;
}
.customer-quotes-slider__arrow.customer-quotes-slider__arrow--prev{
	margin           : 0px var(--gap-width) 0px 0px;
	background-image : url( 'assets/gfx/icons/icon-arrow-prev-red.svg' );
}
.customer-quotes-slider__arrow.customer-quotes-slider__arrow--next{
	margin           : 0px 0px 0px 0px;
	background-image : url( 'assets/gfx/icons/icon-arrow-next-red.svg' );
}


.customer-quote,
.slick-initialized .slick-slide.customer-quote{
	padding         : var(--gap-width) var(--gap-width) var(--gap-width) var(--gap-width);
	display         : flex;
	flex-wrap       : nowrap;
	justify-content : space-between;
	align-items     : center;
	border-radius   : 8px;
}
	.customer-quote__avatar{
		flex                : 0 0 170px;
		width               : 170px;
		height              : 170px;
		border-radius       : 170px;
		background-position : center center;
		background-size     : cover;
	}
	.customer-quote__content{
		margin : 0px 0px 0px var(--gap-width);
		flex   : 1 1 calc( 100% - 170px - var(--gap-width) );
	}
		.customer-quote__name{
			margin : 0px 0px 0px 0px;
			color  : var(--color-white);
			font-weight : var(--f-weight-semi)
		}
		.customer-quote__description{
			margin : 0px 0px 0px 0px;
			color  : var(--color-white);
			font-weight : var(--f-weight-semi)
		}
		.customer-quote__quote{
			margin : 0px 0px 0p 0px;
			color  : var(--color-white);
		}

@media screen and ( max-width : 576px ){
	.customer-quote,
	.slick-initialized .slick-slide.customer-quote{
		flex-direction : column;
		align-items    : flex-start;
	}
	.customer-quote__avatar{
		margin              : 0px 0px 16px 16px;
		flex                : 0 0 80px;
		width               : 80px;
		height              : 80px;
		border-radius       : 80px;
	}
	.customer-quote__name{
		margin              : 0px 0px 16px 0px;
	}
	.customer-quote__description{
		margin              : 0px 0px 16px 0px;
	}
}

/* ------------------------------------ *\
   Blog Posts (.blog-posts)
   Das das Modul in dem die Teaser sind
   nicht die einzelnen Posts
\* ------------------------------------ */
.blog-posts{
	padding: 0px 0px calc(var(--gap-width)* 3) 0px;
}
.blog-posts .inner-row{
	flex-wrap : wrap;
}

	.blog-posts__wrapper{
		width : 100%;
	}
	.blog-posts__teasers{
		display         : flex;
		justify-content : flex-start;
		align-items     : stretch;
		flex-wrap       : wrap;
	}
	.blog-posts__wrapper{
		flex : 1 1 100%;
	}
	.blog-posts__actions{
		flex : 1 1 100%;
	}
	a.blog-posts__link-to-blog{
		padding             : 0px 22px 0px 0px;
		display             : inline-block;
		font-size           : 14px;
		background-image    : url( 'assets/gfx/icons/icon-arrow-right-red.svg' );
		background-size     : 14px 12px;
		background-position : right center;
	}


	/* Pagination */
	.pagination{
		margin          : 0px 0px 0px 0px;
		padding         : 0px 0px 0px 0px;
		list-style-type : none;
	}
	.pagination__page{
		margin          : 0px 8px 0px 0px;
		padding         : 0px 0px 0px 0px;
		float           : left;
	}
		.pagination__page#page-id-0{
			display : none;
		}

	.pagination__clickable{
		margin      : 0px 0px 0px 0px;
		padding     : 0px 0px 0px 0px;
		display     : block;
		width       : 32px;
		height      : 32px;
		line-height : 32px;
		font-size   : var(--font-size-smaller );
		font-weight : var(--f-weight-semi);
		color       : var(--color-red);
		text-align  : center;
		cursor      : pointer;
	}

	.pagination__clickable.active{
		color            : var(--color-white);
		background-color : var(--color-red);
	}


/* ------------------------------------ *\
   Educations Slider (.education-slider)
\* ------------------------------------ */
.education-slider{
	flex-wrap : wrap;
}
	.education-slider .inner-row{
		flex-grow   : 0;
		flex-shrink : 0;
	}

	.education-slider__introduction-copy{
		padding : 0px 0px 32px 0px;
	}

	.education-slider__wrapper{
		max-width   : 100%;
	}

	.education-slider__slider{
		display   : block;
		max-width : 100%;
	}

	/* --- SLIDES --- */
	.education-slider__slider .slick-track .slick-slide .education-slide__inner-wrapper{
		transform  : scale(0.9);
		box-shadow : 0px 1px 2px rgba(0,0,0,0.1);
		transition : transform 1000ms, box-shadow 1000ms;
	}
	.education-slider__slider .slick-track .slick-slide.slick-active .education-slide__inner-wrapper{
		transform  : scale(0.9);
		box-shadow : 0px 2px 3px rgba(0,0,0,0.2);
	}
	.education-slider__slider .slick-track .slick-slide.slick-active.slick-center .education-slide__inner-wrapper{
		transform  : scale(1.0);
		box-shadow : 0px 4px 6px rgba(0,0,0,0.2);
	}


	/* --- DOTS --- */
	.education-slider__slider ul.slick-dots {
		margin          : 16px 0px 16px 0px;
		padding         : 0px 0px 0px 0px;
		list-style-type : none;
		display         : flex;
		align-items     : center;
		justify-content : center;
	}

	.education-slider__slider ul.slick-dots li {
		margin : 0px 8px 0px 8px;
		display : block;
		flex    : 0 0 16px;
		width   : 16px;
		height  : 16p;
	}
	.education-slider__slider ul.slick-dots li button  {
		display          : block;
		width            : 16px;
		height           : 16px;
		border-radius    : 16px;
		font-size        : 1px;
		color            : var(--color-gray-light);
		background-color : var(--color-gray-light);
		border           : none;
		outline          : none;
		box-shadow       : none;
		overflow         : hidden;
		transition       : color 1000ms, background-color 1000ms;
	}
	.education-slider__slider ul.slick-dots li.slick-active button{
		color            : var(--color-red);
		background-color : var(--color-red);
	}

	/* --- ARROWS --- */
	.education-slider__actions{
		margin          : 0px 0px 0px 0px;
		padding         : 16px 0px 16px 0px;
		display         : none;
		align-items     : center;
		justify-content : center;
	}
		@media screen and ( max-width : 1004px ){
			.education-slider__actions{
				display : flex;
			}
		}

	.education-slider__arrow{
		display             : block;
		width               : 14px;
		height              : 14px;
		font-size           : 0px;
		color               : rgba(255,255,255,0);
		background-size     : 14px 14px;
		background-position : center center;
	}
	.education-slider__arrow.education-slider__arrow--prev{
		margin              : 0px var(--gap-width) 0px 0px;
		background-image    : url( 'assets/gfx/icons/icon-arrow-prev-red.svg' );
	}
	.education-slider__arrow.education-slider__arrow--next{
		margin              : 0px 0px 0px 0px;
		background-image    : url( 'assets/gfx/icons/icon-arrow-next-red.svg' );
	}


	/* --- SINGLE EDUCATION ITEMS --- */
	.education-slide{
		margin  : 0px 0px 0px 0px;
		padding : 8px 8px 8px 8px;
	}
	.education-slide__inner-wrapper{
		margin  : 0px 0px 0px 0px;
		padding : 16px 16px 16px 16px;
		background-color : var(--color-gray-light);
	}
	.education-slide__inner-wrapper b:first-child{
		font-size : 24px;
	}




/* ------------------------------------ *\
   Post Teaser (.post-teaser)
\* ------------------------------------ */
.post-teaser{
	flex             : 0 0 calc( 25% - var(--gap-width) );
	margin           : 0px var(--gap-width) var(--gap-width) 0px;
	display          : flex;
	justify-content  : space-between;
	align-items      : stretch;
	height           : 336px;
	border-radius    : 8px;
	background-color : var(--color-gray-light);
	
}
	.background-gray-light .post-teaser{
		background-color : var(--color-white);
	}


	@media screen and ( max-width : 760px ){
		.post-teaser{
			flex : 0 0 calc( 50% - var(--gap-width) );
		}
	}
	@media screen and ( max-width : 480px ){
		.post-teaser{
			flex : 0 0 calc( 100% - var(--gap-width) );
		}
	}


	.post-teaser__link-wrapper{
		flex           : 1 1 100%;
		display        : flex;
		flex-direction : column;
		height         : 100%;
	}
	.post-teaser__thumbnail{
		flex                    : 0 0 160px;
		height                  : 160px;
		border-top-right-radius : 8px;
		border-top-left-radius  : 8px;
		background-size         : cover;
		background-position     : center center;
	}

	.post-teaser__content{
		flex            : 1 0 auto;
		padding         : 8px var(--gap-width) 8px var(--gap-width);
		display         : flex;
		flex-direction  : column;
		justify-content : stretch;
		align-items     : stretch;
		align-content   : stretch;
		color           : var(--color-black);
	}
		.post-teaser__meta{
			flex        : 0 0 auto;
			margin      : 0px 0px 0px 0px;
			padding     : 0px 0px 0px 0px;
			font-size   : 10px;
			font-weight : var(--f-weight-semi);
		}
			.post-teaser__meta-date{}
			.post-teaser__meta-category{}

		.post-teaser__title{
			flex               : 1 1 auto;
			display            : block;
			margin             : 0px 0px 0px 0px;
			padding            : 0px 0px 0px 0px;
			font-size          : 14px;
			line-height        : 24px;
			color              : var(--color-black);
			font-weight        : var(--f-weight-semi);
		}
		.post-teaser__read-more{
			flex        : 0 0 auto;
			font-size   : 14px;
			color       : var(--color-red);
			font-weight : var(--f-weight-semi);
		}
		.post-teaser__read-more span::after{
			content             : '';
			margin              : 0px 0px 0px 8px;
			display             : inline-block;
			position            : relative;
			top                 : 1px;
			width               : 12px;
			height              : 12px;
			background-image    : url( 'assets/gfx/icons/icon-arrow-right-red.svg' );
			background-size     : contain;
			background-position : center center;
		}


	/* --- HIGHLIGHT POSTS --- */
	.post-teaser.is-highlight,
	.background-gray-light  .post-teaser.is-highlight{
		background-color : var(--color-red);
	}
	.post-teaser.is-highlight .post-teaser__content{
		color : var(--color-white);
	}
	.post-teaser.is-highlight .post-teaser__title{
		color : var(--color-white);
	}
	.post-teaser.is-highlight .post-teaser__read-more{
		color : var(--color-white);
	}
	.post-teaser.is-highlight .post-teaser__read-more span::after{
		background-image : url( 'assets/gfx/icons/icon-arrow-right-white.svg' );
	}




/* ------------------------------------ *\
	Blog Post (single view)
	(.blog-post)
\* ------------------------------------ */
.blog-post{
	margin           : 0px 0px 0px 0px;
	padding          : 0px 0px calc(var(--gap-width)* 3) 0px;
	background-color : var(--color-gray-light);
}


.blog-post__inner-wrapper{
	flex-wrap       : wrap;
	align-items     : flex-start;
	justify-content : space-between;
}
	.blog-post__header{
		flex : 1 0 100%;
	}
	.blog-post__column-title{
		flex   : 1 1 calc( 50% - 8px );
		margin : 0px 8px 0px 0px;
	}
	.blog-post__column-content{
		flex   : 1 1 calc( 50% - 8px );
		margin : 0px 0px 0px 8px;
	}
		@media screen and ( max-width:480px ){
			.blog-post__column-title{
				flex   : 1 0 calc( 100% );
				margin : 0px 0px 0px 0px;
			}
			.blog-post__column-content{
				flex   : 1 0 calc( 100% );
				margin : 16px 0px 0px 0px;
			}
		}

	.blog-post__meta{
		margin         : 0px 0px 0px 0px;
		padding        : calc( 2 * var(--gap-width) ) 0px var(--gap-width) 0px;
		font-weight    : var(--f-weight-semi);
		text-transform : uppercase;
	}
	.blog-post__header-image{
		margin              : 0px 0px calc( 3 * var(--gap-width ) ) 0px;
		height              : 384px;
		border-radius       : 8px;
		background-size     : cover;
		background-position : center center;
	}
		@media screen and ( max-width:1040px ){
			.blog-post__header-image{
				height              : auto;
				width               : 100%;
				aspect-ratio        : 1040 / 384;
			}
		}
		@media screen and ( max-width:480px ){
			.blog-post__header-image{
				margin              : 0px 0px calc( 1 * var(--gap-width ) ) 0px;
			}
		}

	.blog-post__metabox-description{
		margin      : 0px 0px 0px 0px;
		padding     : 0px 0px 0px 0px;
		font-weight : var(--f-weight-semi);
	}
	.blog-post__title{
		margin  : 0px 0px 0px 0px;
		padding : 0px 0px 0px 0px;
	}



	/* --- Highlight Modifikation --- */
	.blog-post.is-highlight{
		background-color : var(--color-red);
	}
	.blog-post.is-highlight{
		color : var(--color-white);
	}
	.blog-post.is-highlight .blog-post__title{
		color : var(--color-white);
	}


/* ------------------------------------ *\
	Further Blog Posts
	unter einem Single View Blog Post
	(.further-posts)
\* ------------------------------------ */
.further-posts{
	margin  : 0px 0px 0px 0px;
	padding : calc( var(--gap-width) * 3 ) 0px calc( var(--gap-width) * 3 ) 0px;
}
	.further-posts__wrapper{}
	.further-posts__title{
		margin         : 0px 0px 0px 0px;
		padding        : 0px 0px 0px 0px;
		color          : var( --color-black );
		text-transform : uppercase;
	}
	.further-posts__teasers{
		margin         : calc( var(--gap-width) * 3 ) 0px 0px 0px;
		padding        : 0px 0px 0px 0px;
	}



/* ------------------------------------ *\
	ProcedureBlocks
	(.procedure-blocks)
\* ------------------------------------ */

.procedure-blocks{
}
	.procedure-blocks__wrapper{}
	.procedure-blocks__blocks{
		padding          : 16px 0px 32px 0px;
		width            : 100%;
		max-width        : 100%;
		display          : flex;
		flex-wrap        : wrap;
		justify-content  : flex-start;
		align-items      : flex-start;
	}


	/* -- Single Block */
	.procedure-blocks__block{
		flex             : calc( 33% - 16px ) 1 1;
		margin           : 0px 16px 16px 0px;
		max-width        : 100%;
	}
	.procedure-blocks__block:nth-child(3n){
		margin-right     : 0px;
	}
		/* -- -- Responsive Versions */
		@media screen and ( max-width:1040px ){
			.procedure-blocks__block{
				flex             : calc( 50% - 16px ) 0 1 !important;
				margin           : 0px 16px 16px 0px !important;
			}
			.procedure-blocks__block:nth-child(2n){
				margin-right     : 0px !important;
			}
		}
		@media screen and ( max-width:767px ){
			.procedure-blocks__block{
				flex             : calc( 100% ) 0 1 !important;
				margin           : 0px 0px 16px 0px !important;
			}
		}

	.procedure-blocks__block-title{
		padding          : 10px 16px 10px 24px;
		max-width        : 100%;
		font-weight      : var(--f-weight-regular) !important;
		text-transform   : uppercase;
		border-radius    : 7px 7px 0px 0px;
	}
	.procedure-blocks__block-content{
		padding          : 14px 16px 14px 24px;
		max-width        : 100%;
		font-weight      : var(--f-weight-regular) !important;
		background-color : var(--color-white);
	}
		.procedure-blocks__block-content p{
			margin       : 0px 0px 14px 0px;
		}
		.procedure-blocks__block-content p:last-child{
			margin       : 0px 0px 0px 0px;
		}
	.procedure-blocks__block-footer{
		padding          : 10px 16px 10px 24px;
		max-width        : 100%;
		text-transform   : uppercase;
		font-weight      : var(--f-weight-regular) !important;
		border-radius    : 0px 0px 7px 7px;
	}


	/* -- Single Block Default (Light) */
	.procedure-blocks__block{}
	.procedure-blocks__block-title{
		color            : var(--color-white);
		background-color : var(--color-red);
	}
	.procedure-blocks__block-content{
		background-color : var(--color-white);
	}
	.procedure-blocks__block-footer{
		color            : var(--color-black);
		background-color : var(--color-gray);
	}

 
	/* -- Single Block Dark */
	.procedure-blocks__block.procedure-blocks--dark{}
	.procedure-blocks--dark .procedure-blocks__block-title{
		color            : var(--color-white);
		background-color : var(--color-gray-darkest);
	}
	.procedure-blocks--dark .procedure-blocks__block-content{
		background-color : var(--color-gray);
	}
	.procedure-blocks--dark .procedure-blocks__block-footer{
		background-color : var(--color-gray-darker);
	}


/* ------------------------------------ *\
	Tags
\* ------------------------------------ */	
.tags{}
	.tags__wrapper{}
	.tags__items{
		display         : flex;
		flex-wrap       : wrap;
		justify-content : flex-start;
		align-items     : flex-start;
		max-width       : 85%;
	}
	.tags__item{
		flex-basis       : auto 0 0;
		margin           : 0px 16px 16px 0px;
		padding          : 10px 16px 10px 16px;
		font-size        : var(--font-size-h4);
		text-transform   : uppercase;
		background-color : var(--color-gray);
		border-radius    : 7px 7px 7px 7px;
	}


/* ------------------------------------ *\
	TeamList
	(.team-list)
\* ------------------------------------ */	

/* --- Team List Wrapper --- */
.team-list{
	padding : 64px 0px 32px 0px;
}
	.team-list__wrapper{}
	.team-list__introduction{
		margin : 0px 0px 32px 0px;
	}
	.team-list__items{
		display         : flex;
		flex-wrap       : wrap;
		justify-content : space-between;
		align-items     : flex-start;
	}
	.team-list__item{
		flex   : calc( 50% - 32px ) 0 0;
		margin : 0px 0px 46px 0px;
		width  : 50%;
	}

	@media screen and ( max-width : 767px ){
		.team-list__item{
			flex   : calc( 100% - 0px ) 0 1;
			margin : 0px 0px 46px 0px;
			width  : 100%;
		}
	}

/* --- Single Team Member --- */
.team-member{
	display         : flex;
	flex-wrap       : nowrap;
	justify-content : flex-start;
	align-items     : flex-start;
}
	@media screen and ( max-width : 480px ){
		.team-member{
			flex-direction : column;
		}
	}

	.team-member__avatar-column{
		flex       : 150px 0 0;
		margin     : 0px 16px 16px 0px;
		min-height : 150px;
		min-width  : 150px;
	}
	.team-member__avatar{
		width               : 100%;
		height              : auto;
		aspect-ratio        : 1 / 1;
		background-size     : cover;
		background-position : center center;
		background-repeat   : no-repeat;
		border-radius       : 100%;
	}

	.team-member__content-column{}
	.team-member__name{
		margin         : 0px 0px 8px 0px;
		text-transform : uppercase;
		color          : var(--color-red);
	}
	.team-member__job-title{
		margin         : 0px 0px 8px 0px;
	}
	.team-member__description{
		color : var(--color-gray-darkest);
	}

/* ------------------------------------ *\
	Footer Contact-Form
\* ------------------------------------ */	
.footer-contact{
	margin  : 0px 0px 0px 0px;
	padding : calc( var(--gap-width) * 6 ) 0px calc( var(--gap-width) * 6 ) 0px;
}
	.footer-contact__wrapper{}
	.footer-contact__column{}
	.footer-contact__column--left{}
	.footer-contact__column--right{}

	.footer-contact__title{
		margin         : 0px 0px calc( var(--gap-width) * 1 ) 0px;
		padding        : 0px 0px 0px 0px;
		font-size      : var(--font-size-h2);
		text-transform : uppercase;
	}
	.footer-contact__lead{
		margin         : 0px 0px calc( var(--gap-width) * 1 ) 0px;
		padding        : 0px 0px 0px 0px;
		font-size      : var(--font-size-h2);
		font-weight    : var(--f-weight-bold);
		text-transform : none;
		line-height    : 1.15em;
	}
	.footer-contact__copy{
		margin         : 0px 0px calc( var(--gap-width) * 1 ) 0px;
		padding        : 0px 0px 0px 0px;

	}
		body .footer-contact a{
			color           : var(--color-white);	
			text-decoration : none;
			text-transform  : none;
		}
		.footer-contact__details{
			margin     : 0px 0px 0px 0px;
			padding    : 0px 0px 0px 0px;
			list-style : none;
		}
		.footer-contact__detail-phone{
			margin              : 0px 0px 0px 0px;
			padding             : 8px 0px 8px 0px;
			text-indent         : 24px;
			background-image    : url( 'assets/gfx/icons/icon-phone-fill-white.svg' );
			background-size     : 16px 16px;
			background-position : left center;
			background-repeat   : no-repeat;
		}
		.footer-contact__detail-email{
			margin              : 0px 0px 0px 0px;
			padding             : 8px 0px 8px 0px;
			text-indent         : 24px;
			background-image    : url( 'assets/gfx/icons/icon-mail-send-line-white.svg' );
			background-size     : 16px 16px;
			background-position : left center;
			background-repeat   : no-repeat;
		}
		.footer-contact__detail-linkedin{
			margin              : 0px 0px 0px 0px;
			padding             : 8px 0px 8px 0px;
			text-indent         : 24px;
			background-image    : url( 'assets/gfx/icons/icon-linkedin-box-fill-white.svg' );
			background-size     : 16px 16px;
			background-position : left center;
			background-repeat   : no-repeat;
		}

	.contact-icon{}
		.contact-form__row-inputs{
			margin  : 0px 0px 16px 0px;
			padding : 0px 0px 0px 0px;
			display : flex;
			justify-content: space-between;
			width   : 100%;
		}
		.contact-form input[type="text"],
		.contact-form input[type="email"]{
			flex : 0 1 calc( 50% - 8px );
		}
			@media screen and ( max-width : 480px ){
				.contact-form__row-inputs{
					flex-direction: column;
				}
				.contact-form input[type="text"],
				.contact-form input[type="email"]{
					flex : 1 1 calc( 100% );
				}
				.contact-form input[type="text"]{
					margin : 0px 0px 16px 0px;
				}
			}

		.contact-form textarea{
			width  : 100%;
			height : 160px;
			resize : vertical;
		}

		.contact-form .button{
			margin : 8px 0px 0px 0px;
			float  : right;

		}

		.contact-form .button{
			opacity    : 1;
			transition : all 200ms;
		}
		.contact-form .button[disabled="true"]{
			opacity : 0.5;
			cursor  : not-allowed;
		}




/* ==================================== *\
	FOOTER
\* ==================================== */	
.footer{
	min-height       : 60px;
	color            : var(--color-white);
	background-color : var(--color-red);
}
	.footer__inner-wrapper{
		display         : flex;
		justify-content : center;
		align-items     : center;
		min-height      : 60px;
	}
	.footer__content{}
	.footer__content a {
		text-transform : none;
		color          : var(--color-white);
	}

.footer-meta{
	color            : var(--color-white);
	background-color : var(--color-black);
}
	.footer-meta__inner-wrapper{
		display         : flex;
		justify-content : center;
		align-items     : center;
		min-height      : 30px;
	}
	@media screen and ( max-width : 576px ){
		.footer__content{
			font-size  : 10px;
			text-align : center;
		}
	}

ul.footer__menu {
		margin          : 0px 0px 0px 0px;
		padding         : 0px 0px 0px 0px;
		list-style-type : none;
		text-align      : right;
	}
	ul.footer__menu li{
		margin          : 0px 0px 0px 0px;
		padding         : 0px 0px 0px 0px;
		display         : inline-block;
		font-size       : 0.75em;
		line-height     : 1.00em;
	}


	ul.footer__menu li:last-child{
		border-right    : none;
	}
	ul.footer__menu li a{
		padding         : 0px 15px 2px 15px;
		display         : inline-block;
		color           : var(--color-white);
		text-transform  : uppercase;
		font-size       : 1.00em;
		line-height     : 1.00em;
	}
		@media screen and ( max-width : 576px ){
			ul.footer__menu li a{ padding : 10px 5px 10px 5px; }
		}


/* === Primary Footer === */
.footer-primary{
	margin           : 0px 0px 0px 0px;
	padding          : calc(var(--gap-width) * 2) 0px calc(var(--gap-width) * 2) 0px;
	background-color : var(--color-black);
}
	.footer-primary__inner-wrapper{}
	.footer-primary__column{}
	.footer-primary__column--left{}
	.footer-primary__column--right{}
	
	@media screen and ( max-width : 576px ){
		.footer-primary__column--left{ flex: 1 1 60px; }
		.footer-primary__column--right{ flex: 1 1 calc( 100% - 60px ); }
	}


	.footer-navbar__logo{ /* Logo */
		flex                : 0 0 224px;
		display             : block;
		height              : 32px;
		background-size     : contain;
		background-position : left center;
	}
	.footer-navbar__logo--mobile{
		flex                : 0 1 60px;
		display             : none;
		height              : 45px;
		background-size     : contain;
		background-position : left center;
	}
		@media screen and ( max-width : 576px ){
			.footer-navbar__logo{ display : none; }
			.footer-navbar__logo--mobile{ display : block; }
		}


/* === Secondary Footer === */
.footer-secondary{
	margin           : 0px 0px 0px 0px;
	padding          : calc(var(--gap-width) * 1) 0px calc(var(--gap-width) * 2) 0px;
	background-color : rgb(0,0,0);
}
	.footer-secondary-wrapper{}
	.footer-secondary__column{
		justify-content: flex-end;
		align-items: flex-end;
	}
	.footer-secondary__column--left{}
	.footer-secondary__column--left * {
		color : var(--color-white);
	}
	.footer-secondary__column--right{
		display         : flex;
		justify-content : flex-end;
		align-items     : flex-start;
	}


	@media screen and ( max-width : 576px ){
		.footer-secondary-wrapper{}
		.footer-secondary__column--left{
			order      : 2;
			text-align : center;
			font-size  : 12px;
		}
		.footer-secondary__column--right{
			order : 1;
		}
	}