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


/* 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(2.4rem, 1vw + 1.8rem, 3rem);
	--global-kb-font-size-xxxl: clamp(3rem, 1.5vw + 2.4rem, 3.5rem);

	--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: #000000; font-weight: normal; font-family: "Montserrat", '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: 3rem; 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%; height: auto; display: block;  }

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

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

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


i span { display: none;  }

iframe { background-color: #0F0F0F; }

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


#popup-main-navigation .call-button { padding-top: 10px; }

#main-navigation .call-button a,
#popup-main-navigation .call-button a,
.call-button a { position: relative; text-transform: none; color: #000000; font-size: 1.2rem; padding: 7px 15px 7px 35px; border-radius: 9px; background-color: #FFCB08; }
#main-navigation .call-button a:hover,
#popup-main-navigation .call-button a:hover,
.call-button a:hover { background-color: #FFFFFF; color: #000000; text-decoration: none; }

.call-button a::before { content: ""; display: inline-block; position: absolute; top: 12px; left: 10px; width: 17px; height: 17px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17.044' height='17.044' viewBox='0 0 17.044 17.044'%3E%3Cpath d='M16.558,12.044l-3.728-1.6a.8.8,0,0,0-.932.23l-1.651,2.017a12.339,12.339,0,0,1-5.9-5.9L6.365,5.144a.8.8,0,0,0,.23-.932L5,.483A.8.8,0,0,0,4.081.021L.619.819A.8.8,0,0,0,0,1.6,15.445,15.445,0,0,0,15.446,17.045a.8.8,0,0,0,.779-.619l.8-3.462A.809.809,0,0,0,16.558,12.044Z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; }


.extended-underline { display: inline-block;  padding-right: 40px; }


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

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

#header-wrapper	{ width: 100%;  }

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

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

#main-menu { flex: 1; max-width: 60%;}

#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: #FFCB08; position: relative; font-weight: 700; text-transform: uppercase; font-size: var(--global-kb-font-size-lg, 2rem); }
#main-navigation li.current_page_ancestor a,
#main-navigation li.current_page_item a,
#main-navigation li:hover a,
#main-navigation a:hover			{ color: #FFCB08; 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: #FFCB08;
  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: #FFCB08;
}

#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: #FFCB08;
}


#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: #000000;  }

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


.swap-hover-image .hover-image { display: none; }
.swap-hover-image:hover .hover-image { display: block; }
.swap-hover-image:hover .normal-image { display: none; }


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

#footer-content-block {  }

#designed-by { padding: 20px 20px; text-align: center; color: #ffffff; background-color: #292929; }
#designed-by a { text-decoration: none; color: #ffffff; }
#designed-by a:hover { text-decoration: none; color: #FFCB08; }

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

#back-to-top .back-to-top-path { fill: #FFCB08; }
#back-to-top:hover .back-to-top-path { fill: #000000; }


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