/*
	Theme Name: LLF Lawyers Template
	Version: 2.0
	Description: A theme for LLF Lawyers
	Author: We Design
	Author URI: https://www.wedesigngroup.ca
*/


/* Fonts
---------------------------------------------------------------------------*/

@font-face {
    font-family: 'LLF Font';
    src: url('fonts/llf-Regular.woff2') format('woff2'),
        url('fonts/llf-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LLF Font';
    src: url('fonts/llf-Bold.woff2') format('woff2'),
        url('fonts/llf-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


/* VARIABLES
---------------------------------------------------------------------------*/

:root {
	--global-kb-font-size-sm: clamp(0.8889rem, 0.08vw + 0.8rem, 1rem);
	--global-kb-font-size-md: clamp(1rem, 0.15vw + 0.9rem, 1.3333rem);
	--global-kb-font-size-lg: clamp(1.4444rem, 0.3vw + 1.2222rem, 1.8333rem);
	--global-kb-font-size-xl: clamp(1.8333rem, 0.6vw + 1.5556rem, 2.2222rem);
	--global-kb-font-size-xxl: clamp(3.0556rem, 1.2vw + 2.7778rem, 3.7222rem);
	--global-kb-font-size-xxxl: clamp(3.6111rem, 1.5vw + 3.2222rem, 4.6667rem);

	--wp--preset--font-size--small: var(--wp--preset--font-size--small);
	--wp--preset--font-size--medium: var(--global-kb-font-size-md);
	--wp--preset--font-size--large: var(--global-kb-font-size-lg);
	--wp--preset--font-size--x-large: var(--global-kb-font-size-xl);

	--global-color-green: #044B37;
	--global-color-blue: #193046;
	--global-color-beige: #BBAE7B;
	--global-color-beige-light: #EBE4C8;
}


/* TAG STYLES 
---------------------------------------------------------------------------*/

*	{ margin: 0; padding: 0; }

html	{ position: relative; }

body	{ position: relative; font-size: 24px; font-size: clamp(1rem, 1rem + 0.1389vw, 1.3333rem); color: #000000; background-color: #ffffff; font-weight: normal; font-family: 'LLF Font', 'Arial', sans-serif; line-height: 140%; }

.menu-open { overflow-x: hidden;position: fixed; width: 100%; overflow-y: scroll; }

header	{ position: relative; z-index: 2; }
main	{ position: relative; z-index: 1; }
footer	{ position: relative; z-index: 1; }

iframe { display: block; max-width: 100%; }

h1, h2, h3, h4, h5, h6 { padding: 0 0 var(--wp--preset--font-size--lg); line-height: 140%; font-family: 'LLF Font', 'Arial', sans-serif; }

h1 { font-size: 3.7222rem; font-size: var(--global-kb-font-size-xxl); line-height: 1.1em; }
h2 { font-size: 2.2222rem; font-size: var(--global-kb-font-size-xl); }
h3 { font-size: 1.8333rem; font-size: var(--global-kb-font-size-lg); }
h4 { font-size: 1.3333rem; font-size: var(--global-kb-font-size-md); }
h5 { font-size: 1rem; font-size: var(--global-kb-font-size-sm); }
h6 { font-size: 1rem; font-size: var(--global-kb-font-size-sm); }


p	{ padding-bottom: 25px; line-height: 140%; }

ul,
ol	{ margin: 0 0 20px 30px; }

ul li,
ol li	{ line-height: 150%; padding-bottom: 0px; }

img	{ border: none; max-width: 100%; width: auto; height: auto; display: block;  }

figure,
.wp-block-kadence-image	{  }

.wp-block-video { display: block; margin: 0; }
video { display: block; }

a		{ color: #064B38; text-decoration: none; }
a:hover	{ text-decoration: underline; }
a.kb-button:hover	{ text-decoration: none; }


i span { display: none;  }

iframe { background-color: #ffffff; }

strong { font-weight: 700; }





/* COMMON STYLES 
---------------------------------------------------------------------------*/

.bulletless-menu	{ list-style: none; margin: 0; }
.bulletless-menu li	{ padding-bottom: 3px; }

.no_padding { padding: 0; }

.max_width_image  img { width: 100vW; }

.standard-button { color: #ffffff; background: #044B37; font-weight: bold;  border-radius: 15px; padding-top: var(--global-kb-spacing-xxs, 0.5rem); padding-right: var(--global-kb-spacing-md, 2rem); padding-bottom: var(--global-kb-spacing-xxs, 0.5rem); padding-left: var(--global-kb-spacing-md, 2rem); }
.standard-button:hover { text-decoration: none; background: #193046; }

.center-button { display: block; width: 175px; text-align: center; margin-left: auto; margin-right: auto; }

.content-row { padding-top: var(--global-kb-spacing-lg, 3rem); padding-bottom: var(--global-kb-spacing-lg, 3rem); }
.standard-content-width { max-width: 1600px; margin: 0 auto; padding-right: var(--global-kb-spacing-xs, 1rem); padding-left: var(--global-kb-spacing-xs, 1rem); }

.content-block { margin-bottom: 20px; }

.background-green { background-color: var(--global-color-green); }
.background-beige { background-color: var(--global-color-beige); }
.background-beige-light { background-color: var(--global-color-beige-light); }
.background-blue { background-color: var(--global-color-blue); }

.standard-title { margin-bottom: var(--global-kb-spacing-sm, 1.5rem); font-style: normal; color: #064b38; font-size: 2.2222rem; font-size: var(--global-kb-font-size-xl); }
.standard-lg-title { margin-bottom: var(--global-kb-spacing-sm, 1.5rem); font-style: normal; color: #064b38; font-size: 1.8333rem; font-size: var(--global-kb-font-size-lg); }

.display-flex { display: flex; }

.page-header{ display: block; height: 315px; width: 100%; position: relative; z-index: 0; overflow: hidden; }
.page-header-image { position: absolute; display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; opacity: 0.5;  }
.page-header-overlay { position: absolute; display: block; height: 100%; width: 100%; background-color: #193046; opacity: 0.6; }


/* HEADER STYLES 
---------------------------------------------------------------------------*/

header { width: 100%; background-color: #064b38; padding: 0; top: 0; left: 0; z-index: 5; border-radius: 0 0 0 125px; position: fixed; }

#header-wrapper	{ width: 100%;  }

#header-content-wrapper { max-width: 1600px; display: flex; position: relative; justify-content: space-between; align-items: center;  margin: 0 auto; padding: 0 var(--global-content-edge-padding, 15px); }

#logo { display: block; margin: 10px 0 10px 80px; padding: 5px; max-width: 150px; width: 60%; position: relative; z-index: 10; }
#logo img { width: 100%; height: auto; }

#main-menu { flex: 1; }

#main-navigation				{  list-style: none; margin: 0; padding: 0; height: 100%; display: flex; justify-content: space-around; font-weight: normal; }
#main-navigation li				{  display: block; height: 100%; padding: 0 10px; position: relative; }
#main-navigation a				{  display: block; text-align: center; text-decoration: none; height: 100%; color: #ffffff; position: relative; font-weight: 700; }
#main-navigation li.current_page_ancestor a,
#main-navigation li.current_page_item a,
#main-navigation li:hover a,
#main-navigation a:hover			{ color: #BBAE7B; }


#menu-button { display: none; margin: 0px 5px 0 auto; padding-bottom: 5px; height: 31px; width: 33px; position: relative; z-index:10; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; }
#menu-button:hover	{ cursor: pointer; }


#menu-button span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: #ffffff;
  border-radius: 20px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

.header-style-white #menu-button span {
  background: #ffffff;
}

#menu-button span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#menu-button span:nth-child(2) {
  top: 13px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#menu-button span:nth-child(3) {
  top: 26px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#menu-button.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 0px;
  left: 0px;
  width: 110%;
  background: #ffffff;
}

#menu-button.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#menu-button.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 25px;
  left: 0px;
  width: 110%;
  background: #ffffff;
}


#popup-menu-wrapper				{ display: none; position: fixed; z-index: 5; top: 0; right: 0; height: 100vH; padding: 0; width: 100%;    }
#popup-menu-filler { display: flex; width: 100vW; height: 100vH;  background-color: rgba(255,255,255,0.31); z-index: 12;  }
#popup-menu				{ display: flex; position: fixed; z-index: 15; top: 0; right: 0; height: calc(100% - 30px); padding: 30px 0 0px; width: 100%; max-width: 540px; justify-content: space-between; flex-direction: column; background-color: #064b38;  }

#popup-menu-content { flex-grow: 1;  width: calc(100% - 70px); padding: 90px 25px 20px 0; overflow: hidden; max-width: 350px; margin: 0 0 0 auto;}

#popup-main-navigation-wrapper { overflow-y: auto; overflow-x: hidden; direction: rtl; height: calc(100% - 10px); max-height: 100%; width: calc( 100% - 24px); padding: 20px 0px 10px 20px;  scrollbar-width: thin;  display: flex; flex-direction: column;}

#popup-main-navigation-wrapper::-webkit-scrollbar-track	{ background-color: #064b38; }
#popup-main-navigation-wrapper::-webkit-scrollbar			{ width: 4px; background-color: #064b38; }
#popup-main-navigation-wrapper::-webkit-scrollbar-thumb	{ background-color: #BBAE7B; }

#popup-main-navigation { direction: ltr; }
#popup-main-navigation ul			{ list-style: none; margin: 0; padding: 0;direction: ltr; }
#popup-main-navigation			{ list-style: none; margin: 0; padding: 0; }
#popup-main-navigation li			{ margin-bottom: 20px;  }	
#popup-main-navigation li a		{ font-weight: bold; line-height: 140%; text-decoration: none; color: #ffffff;  width: calc(100% - 10px); padding: 5px 0 5px 10px; text-align: right; display: block; line-height: 100%; transition: color .4s ease-in-out; }	


/*#popup-main-navigation li.current-menu-item > a,*/
#popup-main-navigation li a:hover	{ color: #BBAE7B; text-decoration: none; }

#popup-menu-footer		{ padding: 0; align-self: flex-end; margin: auto 0 0 auto; }






/* CONTENT STYLES 
---------------------------------------------------------------------------*/

#before-content-block	{ width: 100%; }

#contentWrapper { width: 100%; overflow: hidden;  }

#after-content-block	{ width: 100%;  }

.single-post {  }
.archive-title,
.single-post h1 { margin-bottom: 25px;   }
.single-post .date { font-style: italic;   }


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

#back-to-top		{ display: none; z-index: 100; position: fixed; bottom: 30px; right: 30px; height: 20px; width: 20px; padding: 10px; border-radius: 5px; background-color: #064b38; color: #bbae7b; text-decoration: none; line-height: 50px; font-size: 20px; font-weight: 700; text-align: center; justify-content: center; align-items: center; fill: #064b38; border-style: solid; border-width: 2px; border-color:  #bbae7b; transition: all .3s ease-in-out; }
#back-to-top svg { height: 100%; width: 100%; }
#back-to-top:hover	{ cursor: pointer; background-color: #064b38; color: #ffffff; border-color: #ffffff; fill: #ffffff; }

#back-to-top .back-to-top-path { fill: #bbae7b; }
#back-to-top:hover .back-to-top-path { fill: #ffffff; }

rgb(187 174 123)
/* CLEAR STYLES 
---------------------------------------------------------------------------*/

.clearfix:after	{ content: ""; display: table; clear: both; }







/* RESPONSIVE STYLES 
---------------------------------------------------------------------------*/
@media screen and (max-width: 1245px) {

	#main-menu { display: none; }
	#menu-button { display: block; }

	#logo { margin-left: 50px; }
	#logo img { height: 50px; width: auto; }
}