/*
	Theme Name: EPC Jobs Template
	Version: 1.0
	Description: A theme for EPC Jobs
	Author: We Design
	Author URI: https://www.wedesigngroup.ca
*/


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

:root {
	--global-kb-font-size-sm: clamp(0.875rem, 0.1vw + 0.8rem, 0.95rem); 
	--global-kb-font-size-md: clamp(1rem, 0.2vw + 0.9rem, 1.25rem);
	--global-kb-font-size-lg: clamp(1.25rem, 0.3vw + 1.1rem, 1.5rem);
	--global-kb-font-size-xl: clamp(1.75rem, 0.6vw + 1.4rem, 2.5rem); 
	--global-kb-font-size-xxl: clamp(2.25rem, 1vw + 1.8rem, 3.125rem); 
	--global-kb-font-size-xxxl: clamp(2.75rem, 1.2vw + 2.2rem, 3.75rem); 

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


/* 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: #0A3168; background-color: #ffffff; font-weight: normal; font-family: 'Helvetica', '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%; }

h1 { font-size: 3.125rem; font-size: var(--global-kb-font-size-xxl); line-height: 1.1em; }
h2 { font-size: 2.5rem; font-size: var(--global-kb-font-size-xl); }
h3 { font-size: 1.5rem; font-size: var(--global-kb-font-size-lg); }
h4 { font-size: 1.25rem; font-size: var(--global-kb-font-size-md); }
h5 { font-size: 0.95rem; font-size: var(--global-kb-font-size-sm); }
h6 { font-size: 0.95rem; 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%; height: auto; display: block;  }

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

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

a		{ color: #183E7C; 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; }

.full_width_image { width: 100%; }

.directory-table table { width: 100%; }
.directory-table tr:nth-child(even) td { padding-top: 15px; padding-bottom: 15px; }
.directory-table tr th:first-child,
.directory-table tr td:first-child { border-radius: 13px 0 0 13px; }
.directory-table tr th:last-child,
.directory-table tr td:last-child{ border-radius:  0 13px 13px 0; }
.directory-table tr th p,
.directory-table tr td p { padding: 0; }

.icon-button .kb-svg-icon-wrap { background-color: #ffffff; border-radius: 100%; margin-right: 25px;  }

.icon-block .kb-svg-icon-wrap { height: 80px; width: 80px; }


.wp-block-list { list-style: none; padding-left: 28px; margin-left: 0; } 
.wp-block-list li { position: relative; margin-bottom: 5px; }
.wp-block-list li::before { content: " "; color: #B2C62F; font-size: 30px; position: absolute; height: 11px; width: 11px; background-color: #B2C62F; border-radius: 100%; left: -22px; top: 7px; line-height: 1; }

.kb-splide .splide__pagination, .kb-splide ul.splide__pagination.splide__pagination { bottom: 10px !important; }


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

header { width: 100%; background-color: transparent; padding: 0; top: 0; left: 0; z-index: 5; }

.menu-open header { position: fixed; }
.menu-open main { padding-top: 110px; }
.menu-open.admin-bar header {  top: 32px; }
@media screen and (max-width: 782px) { .menu-open.admin-bar header { top: 46px; }  }

#header-wrapper	{ width: 100%;  }

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

#logo { display: block; margin: 15px 0 15px 0px; padding: 5px; margin-right: 70px; max-width: 230px; width: 70%; 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-between; align-items: center; 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: #183E7C; position: relative; font-weight: 700; font-size: 1.3rem; }
#main-navigation li.current_page_ancestor a,
#main-navigation li.current_page_item a,
#main-navigation li:hover a,
#main-navigation a:hover			{ color: #183E7C; text-decoration: underline; }


#menu-button { display: none; margin: 0px 5px 0 auto; padding-bottom: 5px; height: 31px; min-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: #183E7C;
  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;
}


#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(0,0,0,0.75); 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: #183E7C;  }

#popup-menu-content { flex-grow: 1;  width: calc(100% - 70px); padding: 140px 25px 20px 0; overflow: hidden; 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: #ffffff; }
#popup-main-navigation-wrapper::-webkit-scrollbar			{ width: 4px; background-color: #ffffff; }
#popup-main-navigation-wrapper::-webkit-scrollbar-thumb	{ background-color: #737373; }

#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; text-align: right; }	
#popup-main-navigation li a		{ font-weight: bold; text-transform: uppercase; font-size: var(--global-kb-font-size-lg, 2rem); line-height: 140%; text-decoration: none; color: #ffffff;  width: calc(100% - 10px); padding: 5px 0 5px 10px; text-align: right; line-height: 100%; transition: color .4s ease-in-out; }	


#popup-main-navigation li.current-menu-item > a,
#popup-main-navigation li a:hover	{ color: #ffffff; text-decoration: underline; }

#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 { width: 100%;   }



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

#footer-content-block { }

#copyright { padding: 20px 20px; text-align: center; color: #ffffff; background-color: #183E7C; font-size: 1rem; font-size: var(--global-kb-font-size-sm); }
#copyright a { text-decoration: none; color: #ffffff; }
#copyright a:hover { text-decoration: underline; color: #ffffff; }

#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: #ffffff; color: #d41121; text-decoration: none; line-height: 50px; font-size: 20px; font-weight: 700; text-align: center; justify-content: center; align-items: center; fill: #b2c62f; border-style: solid; border-width: 2px; border-color:  #b2c62f; transition: all .3s ease-in-out; }
#back-to-top svg { height: 100%; width: 100%; }
#back-to-top:hover	{ cursor: pointer; background-color: #b2c62f; color: #ffffff; border-color: #b2c62f; fill: #ffffff; }

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


/* CLEAR STYLES 
---------------------------------------------------------------------------*/

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

#wpadminbar { position: fixed; }





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

	#header-content-wrapper { gap: 0px; }

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

	#logo { margin-left: 0px; width: 100%; }
	#logo img { height: 70px; width: auto; }
}


@media screen and (max-width: 340px) {

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