/*
Theme Name: Kanzlei Hervol (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.0.6a
License: 
License URI: 
Text Domain: 
Tags: 
*/

:root{
	--color-white       : rgb( 250, 250, 245 );
	--color-white       : rgb( 255, 255, 255 );
	--color-red         : rgb( 200,  10,  50 );
	--color-green       : rgb(10, 200, 105); /* <- nur für UI Elemente */
	--color-gray-light  : rgb( 230, 235, 240 );
	--color-gray        : rgb( 130, 140, 150 );
	--color-gray-dark   : rgb( 110, 110, 110 );
	--color-black       : rgb(  40,  55,  60 );

	--font-size-title   : 50px;
	--font-size-h1      : 50px;
	--font-size-h2      : 30px;
	--font-size-h3      : 25px;
	--font-size-h4      : 20px;
	--font-size-body    : 16px;
	--font-size-smaller : 0.875em; /* 14px bei 16px Base Font Size */
	--line-height       : 1.625em;
	--line-height-list  : 1.625em;

	--font-sans         : Helvetica, "Helvetica Neue", Roboto, Arial, sans-serif;
	--font-serif        : "EB Garamond", Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif;
}
	@media screen and ( max-width : 567px ){
		:root{		
			--font-size-title   : 26px;
			--font-size-h1      : 26px;
			--font-size-h2      : 22px;
			--font-size-h3      : 22px;
			--font-size-h4      : 16px;
			--font-size-body    : 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 24px 0px;
	padding        : 0px 0px 0px 0px;
	font-family    : var(--font-serif);
	color          : var( --color-black );
	text-transform : none;
}

h1,
.h1{
	font-size   : var(--font-size-h1);
	line-height : 1.27em;
	font-weight : 600;
}


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

p,
.p{
	margin         : 0px 0px 24px 0px;
	padding        : 0px 0px 0px 0px;
}
	p:last-child,
	.p:last-child{
		margin     : 0px 0px 0px 0px;
	}

ul{
	margin      : 0px 0px 0px 0px;
	padding     : 0px 0px 0px 16px;
}
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-transform  : uppercase;
	color           : var(--color-black);
	transition      : color 200ms;
}
	a:hover{
		color : var(--color-red);
	}

input,
textarea{
	padding          : 10px 16px 10px 12px;
	font-family      : var(--font-sans);
	font-size        : var(--font-size-smaller);
	color            : var(--color-gray-dark);
	border           : none;
	outline          : none;
	box-shadow       : none;
	border-left      : 4px solid var(--color-white);
	background-color : rgb(245,245,245);
	transition       : border-left-color 200ms;
	background-image : none;
	background-size  : 18px 18px;
	background-position : calc( 100% - 10px ) 10px;
}
	input:focus,
	textarea:focus{
		outline           : none;
		border-left-color : var(--color-red);  
		background-color  : rgb(255,255,255);
		background-image  : none !important;
	}
	.contact-form__form input.valid,
	.contact-form__form textarea.valid{ 
		border-left-color : var(--color-green);
		background-image : url( 'assets/gfx/icons/icon-check-green.svg' );
	}
	.contact-form__form input.invalid,
	.contact-form__form textarea.invalid{ 
		border-left-color : var(--color-red);
		background-image : url( 'assets/gfx/icons/icon-cross-red.svg' );
	}


.font-color-red{
	color : var(--color-red);
}
.leading-title{
	margin-bottom  : 0px;
	font-family    : var(--font-sans);
	font-size      : var(--font-size-smaller);
	color          : var(--color-gray);
	font-weight    : 600;
	text-transform : uppercase;
}
.leading-title + h1,
.leading-title + h2,
.leading-title + h3,
.leading-title + h4{
	margin-top : 0px;
}

.button{
	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-bottom-left-radius : 15px;
	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[disabled="true"]{
		cursor  : not-allowed;
		opacity : 0.2;
	}
	.button[disabled="true"]:hover{
		filter  : brightness(100%);
	}

.message{
	margin           : 16px 0px 16px 0px;
	padding          : 10px 10px 10px 6px;
	display          : block;
	width            : 100%;
	max-width        : 100%;
	border-left      : 10px solid var( --color-gray );
	background-color : var( --color-gray-light );
}
	.message.hidden{
		display : none;
	}
	.message.message--success{
		border-color     : rgb(10,55, 0);
		background-color : rgb(25,115,0);
	}
	.message.message--success p{
		color            : rgb(255, 255, 255);
	}
	.message.message--error{
		border-color     : rgb(55, 0, 0);
		background-color : rgb(180, 0, 0);
	}
	.message.message--error p{
		color            : rgb(255, 255, 255);
	}

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

	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;
}

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


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

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

\* =================================== */
.elementor-element[data-element_type="container"]{
	padding : 0px 0px 0px 0px;
}
			


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

	G R I D  

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

.inner-row{
	display   : flex;
	width     : 1000px;
	max-width : 100vw;
}
	@media screen and ( max-width : 1040px ){
		.inner-row{
			width     : calc( 100vw - 32px - 32px );
			max-width : 100vw;
		}
	}



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

	E L E M E N T E 

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

/* NAVBAR */
.fixed-header-placholder{
	display : block;
	height  : 95px;
}
.header-navbar{
	position         : fixed;
	top              : 0px;
	left             : 0px;
	z-index          : 100;
	width            : 100%;
	height           : 95px;
	align-items      : center;
	background-color : var(--color-white);
}
	@media screen and ( max-width : 920px ){
		.fixed-header-placholder,
		.header-navbar{
			height  : 52px;
		}
	}

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

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

	.header-navbar__logo{
		display             : block;
		width               : 240px;
		height              : 55px;
		background-size     : contain;
		background-position : center center;
	}
		@media screen and ( max-width : 920px ){
			.header-navbar__logo{
				display             : block;
				width               : 156px;
				height              : 36px;
			}
		}
		
	/* === MAIN MENU === */
	ul.header-navbar__menu {
		padding         : 0px 0px 0px 0px;
		margin          : 0px 0px 0px 0px;
		width           : calc( 100% - 240px );
		height          : 55px;
		list-style-type : none;
		display         : flex;
		justify-content : flex-end;
	}
		@media screen and ( max-width : 920px ){
			ul.header-navbar__menu { display : none; }
		}
	
	ul.header-navbar__menu > li{
		position        : relative;
		float           : left;
		font-size       : 14px;
		text-transform  : uppercase;      
	}
	ul.header-navbar__menu > li.menu-item-has-children{
		padding-right       : 12px;
		background-image    : url( 'assets/gfx/icons/icon-arrow-down-black.svg' );
		background-position : right center;
		background-size     : 18px 18px;
		
	}
	ul.header-navbar__menu > li > a{
		padding         : 10px 12px 10px 12px;
		display         : block;
		text-decoration : none;
		color           : var(--color-black);   
	}
	ul.header-navbar__menu > li > a:hover{
		color           : var(--color-red);   
	}

	/* --- SUBMENU --- */
	ul.header-navbar__menu ul.sub-menu{
		padding                   : 0px 0px 0px 0px;
		margin                    : 0px 0px 0px 0px;
		display                   : none;
		position                  : absolute;
		right                     : 0px;
		list-style-type           : none;
		background-color          : rgba(255,255,255,0.9);
		border-bottom-left-radius : 20px;
		box-shadow                : 0px 3px 6px rgba(0,0,0,0.2);
	}
	ul.header-navbar__menu > li.menu-item-has-children:hover ul.sub-menu{
		display          : block;
	}
	ul.header-navbar__menu ul.sub-menu > li {
		margin           : 0px 0px 0px 0px;
		text-align       : right;
	}
	ul.header-navbar__menu ul.sub-menu > li > a{
		display          : block; 
		padding          : 10px 24px 10px 24px;
		width            : 100%;
		font-size        : 14px;
		text-decoration  : none;
		color            : var(--color-black);
		background-color : var(--color-white);
		transition       : background-color 200ms;
	}
	ul.header-navbar__menu ul.sub-menu > li:last-child > a{ /* Letzter Link im Submenu */
		border-bottom-left-radius : 20px;
	}

	ul.header-navbar__menu ul.sub-menu > li > a:hover{
		color           : var(--color-red); 
		background-color : var(--color-gray-light);
	}



/* MOBILE MENU BUTTON */
.header-navbar__button-mobile-menu{
	margin              : 0px 0px 0px 0px;
	display             : none;
	width               : 40px;
	height              : 40px;
	float               : right;
	background-image    : url( 'assets/gfx/icons/icon-mobilemenu-gray.svg' );
	background-size     : 28px 16px;
	background-position : center center;
	cursor              : pointer;
}
	@media screen and ( max-width : 920px ){
		.header-navbar__button-mobile-menu { display : block; }
	}


/* === OFFCANVAS ELEMENT === */
.enable-offcanvas-menu{
	max-width  : 100vw;
	max-height : 100vh;
	overflow   : hidden;
}
.enable-offcanvas-menu .offcanvas-menu__overlay{
	display : flex;
}


.offcanvas-menu__overlay{
	display          : none;
	justify-content  : flex-end;
	align-items      : flex-start;
	position         : fixed;
	top              : 0px;
	left             : 0px;
	width            : 100vw;
	max-width        : 100vw;
	height           : 100dvh;
	max-height       : 100dvh;
	background-color : rgba( 130,140,150,0.0 );
	z-index          : 150;
	transition       : background-color 500ms;
}
	.fly-in-offcanvas-menu .offcanvas-menu__overlay{ /* Animation : Hintergrund Einblenden */
		background-color : rgba( 130,140,150,0.7 );
	}

.offcanvas-menu__wrapper{
	padding                   : 20px 40px 40px 40px;
	display                   : flex;
	flex-wrap                 : nowrap;
	flex-direction            : column;
	width                     : 310px;
	max-width                 : 310px;
	height                    : 100dvh;
	max-height                : 100dvh;
	border-bottom-left-radius : 40px;
	background-color          : rgb( 255,255,255 );
	box-shadow                : 0px 3px 6px rgba(0,0,0,0.2);
	overflow                  : hidden;
	transform                 : translateX( 100% );
	transition                : transform 750ms;
}
	.fly-in-offcanvas-menu .offcanvas-menu__wrapper{ /* Animation : Menü herein fahren */
		transform : translateX( 0% );
	}

.offcanvas-menu__actions-wrapper{
	height      : 52px;
	flex-basis  : 52px;
	flex-grow   : 0;
	flex-shrink : 0;
}
	.offcanvas-menu__button-close{
		margin              : 0px 0px 0px 0px;
		display             : block;
		width               : 40px;
		height              : 40px;
		float               : right;
		background-image    : url( 'assets/gfx/icons/icon-mobilemenu-x.svg' );
		background-size     : 16px 16px;
		background-position : center center;
		cursor              : pointer;
	}

.offcanvas-menu__menu-wrapper{
	height      : calc( 100vh - 52px );
	flex-basis  : calc( 100vh - 52px );
	flex-grow   : 1;
	flex-shrink : 1;
	overflow-y  : auto;
}

.offcanvas-menu__meta-wrapper{
	height      : auto;
	flex-basis  : auto;
	flex-grow   : 1;
	flex-shrink : 0;
	font-size   : 10px;
}
	.offcanvas-menu__logo-wrapper{}
	.offcanvas-menu__logo{
		margin    : 0px 0px 8px 0px;
		width     : 190px;
		max-width : 100%;
	}

/* === MOBILE MENU === */
ul.offcanvas-menu__menu{
	padding         : 0px 0px 0px 0px;
	margin          : 0px 0px 0px 0px;
	list-style-type : none;
}
	ul.offcanvas-menu__menu > li{
		padding     : 0px 0px 0px 0px;
		margin      : 0px 0px 24px 0px;
	}
	ul.offcanvas-menu__menu > li > a{
		display     : block;
		font-size   : 14px;
		font-weight : 500;
	}
ul.offcanvas-menu__menu ul.sub-menu{
	padding         : 0px 0px 0px 0px;
	margin          : 0px 0px 0px 0px;
	list-style-type : none;
}
	ul.offcanvas-menu__menu ul.sub-menu > li{
		padding     : 16px 0px 0px 16px;
		margin      : 0px 0px 0px 0px;
	}
	ul.offcanvas-menu__menu ul.sub-menu > li > a{
		display     : block;
		font-size   : 14px;
		font-weight : 300;
	}







/* ==================================== *\
	HERO HEADER 
\* ==================================== */
.hero-header{
	height              : calc( 90vh - 95px );
	background-position : center center;
	background-size     : cover;

	display             : flex;
	justify-content     : center;
	align-items         : center;
}
	.hero-header__inner-wrapper{
		display         : flex;
		justify-content : flex-end;
		align-items     : center;
		height          : 100%;
	}
	.hero-header__title{
		margin                    : 0px 0px 0px 0px;
		padding                   : 50px 50px 50px 50px;
		width                     : auto;
		background-color          : rgba(255,255,255,0.80);
		border-bottom-left-radius : 45px;
	}

	@media screen and ( max-width : 920px ){
		.hero-header{
			max-height : 50vh;
		}
		.hero-header__title{
			padding : 32px 32px 32px 32px;
		}
	}


/* ==================================== *\
	LARGE IMAGE 
\* ==================================== */	
.large-image{
	padding             : 60px 0px 60px 0px;
	height              : 50vh;

	background-size     : cover;
	background-position : center center;
}
	@media screen and ( min-width : 1920px ){
		.large-image{
			height : 65vh;
		}
	}
	
	.large-image__inner-wrapper{
		display : flex;
	}
		.large-image--copy-hor-pos-left   .large-image__inner-wrapper{ justify-content : flex-start; }
		.large-image--copy-hor-pos-center .large-image__inner-wrapper{ justify-content : center; }
		.large-image--copy-hor-pos-right  .large-image__inner-wrapper{ justify-content : flex-end; }

		.large-image--copy-ver-pos-top    .large-image__inner-wrapper{ align-items     : flex-start; }
		.large-image--copy-ver-pos-center .large-image__inner-wrapper{ align-items     : center; }
		.large-image--copy-ver-pos-bottom .large-image__inner-wrapper{ align-items     : flex-end; }

	.large-image__copy{
		padding                   : 30px 45px 30px 45px; 
		background-color          : rgba( 40, 55, 60, 0.75);
		border-bottom-left-radius : 45px;
		color                     : var(--color-white);
		font-family               : var(--font-serif);
		font-size                 : var(--font-size-h3);
		line-height               : var(--line-height);
	}
	.large-image--has-copy .large-image__copy{}
	.large-image--empty-copy .large-image__copy{
		display : none;
	}


/* ==================================== *\
	TEXT BLOCK
\* ==================================== */	
.text-block{
	padding : 60px 0px 60px 0px;
}
	.text-block--white{
		background-color : var(--color-white);
	}
	.text-block--gray-light{
		background-color : var(--color-gray-light);
	}
	.text-block--black{
		background-color : var(--color-black);
	}
		.text-block--black h1, 
		.text-block--black h2, 
		.text-block--black h3, 
		.text-block--black h4, 
		.text-block--black p,
		.text-block--black a{
			color            : var(--color-white);
		}


	.text-block__inner-wrapper{
		display : flex;
	}
	.text-block__title{
		flex-basis : calc( 33% - 18px );
	}
	.text-block__copy{
		flex-basis : 66%;
	}

	@media screen and ( max-width : 920px ){
		.text-block__inner-wrapper{
			flex-wrap : nowrap;
		}
		.text-block__title{
			flex-basis : calc( 50% - 18px );
		}
		.text-block__copy{
			flex-basis : 50%;
		}
	}
	@media screen and ( max-width : 576px ){
		.text-block__inner-wrapper{
			flex-wrap : wrap;
		}
		.text-block__title{
			flex-basis : calc( 100% );
		}
		.text-block__copy{
			flex-basis : 100%;
		}
	}


/* ==================================== *\
	BIG BANNER
\* ==================================== */	
.big-banner{
	padding             : 60px 0px 60px 0px;
	background-size     : cover;
	background-position : center center;
}
	.big-banner--font-color-black,
	.big-banner--font-color-black h1,
	.big-banner--font-color-black h2,
	.big-banner--font-color-black h3,
	.big-banner--font-color-black p{
		color : var(--color-black); 
	}
	.big-banner--font-color-white h1,
	.big-banner--font-color-white h2,
	.big-banner--font-color-white h3,
	.big-banner--font-color-white p,
	.big-banner--font-color-white li, 
	.big-banner--font-color-white a{ 
		color : var(--color-white); 
	}

	.big-banner__inner-wrapper{
		display : flex;
	}
	.big-banner__copy-left{
		width : 50%;
	}
	.big-banner__copy-right{
		width : 50%;
	}
	.big-banner .button{
		margin-top : 16px;
	}

	@media screen and ( max-width : 576px ){
		.big-banner__inner-wrapper{
			flex-wrap : wrap;
		}
		.big-banner__copy-left{
			width : 100%;
		}
		.big-banner__copy-right{
			margin-top : 50px;
			width      : 100%;
		}
	
	}

/* ==================================== *\
	EMPLOYEES
\* ==================================== */	
.employees{
	padding : 60px 0px 60px 0px;
}
	.employees__inner-wrapper{}

.employee{
	width : 33%;
}
	.employee__avatar{
		width      : 100%;
		max-width  : 100%;
	}
	.employee__name{
		margin     : 0px 0px 0px 0px;
		color      : var(--color-red);
		text-align : center;
	}
	.employee__special{
		margin     : 0px 0px 0px 0px;
		text-align : center;
		color      : var(--color-black);
	}

	@media screen and ( max-width : 576px ){
		.employees__inner-wrapper{
			flex-wrap       : wrap;
			justify-content : center;
		}
		.employee{
			width     : 90%;
			max-width : 360px;
		}
	
	}


/* ==================================== *\
	CONTACT FORM
\* ==================================== */	
.contact-form{
	padding             : 60px 0px 60px 0px;
	background-size     : cover;
	background-position : center center;
}

	.contact-form--font-color-black{}

	.contact-form--font-color-white,
	.contact-form--font-color-white h1,
	.contact-form--font-color-white h2,
	.contact-form--font-color-white h3,
	.contact-form--font-color-white p,
	.contact-form--font-color-white li, 
	.contact-form--font-color-white a{ 
		color : var(--color-white); 
	}

	.contact-form__side-left{
		width : 50%;
	}
	.contact-form__side-right{
		width : 50%;
	}

	@media screen and ( max-width : 920px ){
		.contact-form__inner-wrapper{
			flex-wrap : wrap;
		}
		.contact-form__side-left{
			width : 100%;
		}
		.contact-form__side-right{
			width : 100%;
		}
	}

	.contact-form__form{

	}
	.contact-form__row-inputs{
		display         : flex;
		justify-content : space-between;
		align-items     : center;
	}

	.contact-form__form input{
		display     : block;
		flex-basis  : calc( 50% - 8px );
		height      : 38px;
		max-height  : 38px;
	}


	@media screen and ( max-width : 576px ){
		.contact-form__row-inputs{
			flex-wrap       : wrap;
			justify-content : flex-start;
			align-items     : flex-start;
		}

		.contact-form__form input{
			margin      : 16px 0px 0px 0px;
			display     : block;
			flex-basis  : 100%;
		}
	}

	.contact-form__form textarea{
		margin      : 16px 0px 0px 0px;
		display     : block;
		width       : 100%;
		height      : 98px;
		resize      : vertical;
	}

	.contact-form__form button{
		margin      : 16px 0px 0px 0px;
	}



/* ==================================== *\
	PAGES CAROUSEL
\* ==================================== */	
.pages-carousel{}
	.pages-carousel__inner-wrapper{}
	.pages-carousel__carousel{
		width           : 100%;
		max-width       : 100%;
		overflow        : hidden;
	}

.carousel{

	margin          : 45px 0px 60px 0px;
	display         : flex;
	flex-wrap       : wrap;
	justify-content : space-evenly;
	align-items     : stretch;
}
	.carousel__item{
		display                   : flex;
		flex-direction            : column;
		flex-grow                 : 0;
		flex-shrink               : 0;
		flex-basis                : calc( 33% - 8px - 8px ); /* Breite Minus den Margin left & right */
		width                     : calc( 33% - 8px - 8px );
		margin                    :  0px  8px 16px  8px;
		padding                   : 32px 32px 32px 32px;
		border-bottom-left-radius : 32px;
		background-color          : var(--color-gray-light);
	}
	.carousel__item.slick-slide,
	.slick-initialized .carousel__item.slick-slide{
		display                   : flex;
	}
		/* 
			Slick-Slider Breakpoints muss mit Responsive Setup 
			in assets/js/PageCarousel.js übereinstimmen.
			Sonst kann es zu Berechnungsfehlern in der Item
			Höhe kommen.
		*/
		@media screen and ( max-width : 600px ){ 
			.carousel__item{
				flex-basis : calc( 50% - 8px - 8px );
				width      : calc( 50% - 8px - 8px );
			}
		}
		@media screen and ( max-width : 480px ){ 
			.carousel__item{
				flex-basis : calc( 100% - 8px - 8px );
				width      : calc( 100% - 8px - 8px );
			}
		}

	.carousel__item-title{
		color : var(--color-red);
	}
	.carousel__item-copy{
		flex-grow   : 1;
		flex-shrink : 1;
		flex-basis  : 100%;
	}
	.carousel__item-link{
		font-weight : 600;
	}

	/* Slick Slider Stylin */
	.carousel ul.slick-dots{
		margin          : 30px 0px 0px 0px;
		padding         : 0px 0px 0px 0px;
		display         : block;
		list-style-type : none;
	}
	.carousel ul.slick-dots li{
		margin  : 0px 10px 0px 0px;
		padding : 0px 0px 0px 0px;
		float   : left;
	}
	.carousel ul.slick-dots li.slick-active{}
	
	.carousel ul.slick-dots li button{
		margin           : 0px 0px 0px 0px;
		padding          : 0px 0px 0px 0px;
		display          : block;
		width            : 15px;
		height           : 15px;
		font-size        : 0;
		border           : 0px solid transparent;
		outline          : 0px solid transparent;
		background-color : var(--color-gray);
		border-radius    : 15px;
		overflow         : hidden;
	}
	.carousel ul.slick-dots li.slick-active button{
		background-color : var(--color-red);
	}



/* ==================================== *\
	ACCORDION
\* ==================================== */	
.accordion{}
	.accordion-item{
		margin                    :  0px  0px 24px  0px;
		padding                   : 24px 48px 24px 48px;
		width                     : 100%;
		max-width                 : 100%;
		background-color          : var(--color-gray-light);
		border-bottom-left-radius : 35px;		
	}
	.accordion-item__title{
		display         : flex;
		align-items     : center;
		justify-content : space-between;
		height          : 30px;
		cursor          : pointer;
	}
		.accordion-item__title-text{
			flex-grow   : 0;
			flex-shrink : 0;
			width       : calc( 100% - 14px );
		}
		.accordion-item__title-text h4{
			margin      : 0px 0px 0px 0px;
			padding     : 0px 0px 0px 0px;
			font-family : var(--font-serif);
		}

		.accordion-item__title-icon{
			margin      : 0px 0px 0px 0px;
			padding     : 0px 0px 0px 0px;
			flex-grow   : 0;
			flex-shrink : 0;
			width       : 14px;
			height      : 14px;
		}
		.accordion-item__title-icon svg{
			margin      : 0px 0px 0px 0px;
			padding     : 0px 0px 0px 0px;
			display     : block;
			width       : 14px;
			height      : 14px;
		}
		
	.accordion-item__copy{
		margin       : 0px 0px 0px 0px;
		padding      : 0px 0px 0px 0px;
		height       : auto;
		transition   : height 1s;
		overflow     : hidden;
	}
		.accordion-item--opend  .accordion-item__copy{ height : auto; }
		.accordion-item--closed .accordion-item__copy{ height : 0px; }

	.accordion-item__copy__inner-content{
		margin       :  0px 0px 0px 0px;
		padding      : 24px 0px 0px 0px;
	}


/* ==================================== *\
	IMAGE AND ACCORDION
\* ==================================== */	
.pages-carousel{}	
	.image-and-accordion{}
	.image-and-accordion__inner-wrapper{
		display : flex;
		
	}

	.image-and-accordion__image-left{
		flex-grow       : 0;
		flex-shrink     : 0;
		flex-basis      : calc(33% - 18px);
		width           : calc(33% - 18px);
		display         : flex;
		justify-content : center;
		align-items     : flex-start;
	}
		.image-and-accordion__image{
			display : block;
			width   : auto;
			height  : auto;
		}

	.image-and-accordion__accordion-right{
		flex-grow       : 0;
		flex-shrink     : 0;
		flex-basis      : 66%;
		width           : 66%;
	}
	.image-and-accordion__accordion{}
	.image-and-accordion__accordion-item{}
	.image-and-accordion__accordion-item__title{}
	.image-and-accordion__accordion-item__copy{}

	@media screen and ( max-width : 576px ){
		.image-and-accordion__inner-wrapper{
			flex-wrap       : wrap;
		}
		.image-and-accordion__image-left{
			flex-basis : 100%;
			width      : 100%;
			max-width  : 360px;
		}
		.image-and-accordion__accordion-right{
			flex-basis : 100%;
			width      : 100%;
		}
	
	}

/* ==================================== *\
	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         : 5px 0px 5px 0px;
		list-style-type : none;
	}
	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;
		border-right    : 1px solid white;
	}
	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;
	}