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


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

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

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


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

:root {
	--global-kb-font-size-sm: clamp(0.8rem, 0.08vw + 0.72rem, 0.9rem);
	--global-kb-font-size-md: clamp(1.1111rem, 0.1667vw + 1rem, 1.3889rem);
	--global-kb-font-size-lg: clamp(1.3889rem, 0.2885vw + 1.175rem, 1.7639rem);
	--global-kb-font-size-xl: clamp(1.6667rem, 0.5455vw + 1.4141rem, 2.0202rem);
	--global-kb-font-size-xxl: clamp(2.7778rem, 1.0909vw + 2.5253rem, 3.3838rem);
	--global-kb-font-size-xxxl: clamp(3.2828rem, 1.3636vw + 2.9293rem, 4.2424rem);

	--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: 20px; font-size: var(--global-kb-font-size-md); color: #000000; background-color: #ffffff; font-weight: normal; font-family: 'Capture Font', 'Helvetica', 'Arial', sans-serif; }

.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: 2.5rem; font-size: var(--global-kb-font-size-xxl); line-height: 1.1em; }
h2 { font-size: 1.875rem; font-size: var(--global-kb-font-size-xl); }
h3 { font-size: 1.5625rem; 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.875rem; font-size: var(--global-kb-font-size-sm); }
h6 { font-size: 0.875rem; 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	{ padding-bottom: 10px; }

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

s {  text-decoration: none;  position: relative; }

s::after { content: ''; position: absolute; left: -5%; top: 50%; width: 110%; height: 2px; background: #FF0000; transform: rotate(-10deg); }



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

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

.no_padding { padding: 0; }

.full_width_image { width: 100%; }

.kb-splide li { padding: 0; }
.kb-splide[data-slider-dots=true] { margin-bottom: 0; }

.kb-splide .splide__pagination, 
.kb-splide ul.splide__pagination.splide__pagination { bottom: 30px; }


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

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

.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%; position: relative; z-index: 10; background-color: #0a0c32;  }

#header-content-wrapper { max-width: 1000px; 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: 20px 0 20px 0px; padding: 5px; margin-right: 30px; max-width: 258px; width: 70%; 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: flex-end; align-items: center; font-weight: normal; }
#main-navigation li				{  display: flex; height: 100%; padding: 0 15px; position: relative; border-right: 1px solid #ffffff; }
#main-navigation li:last-child	{  border-right: none;  }
#main-navigation a				{  text-align: center; text-decoration: none; text-transform: uppercase; height: 100%; color: #ffffff; position: relative; font-weight: 700; font-size: 0.875rem; font-size: var(--global-kb-font-size-sm); }
#main-navigation li.current_page_ancestor a,
#main-navigation li.current_page_item a,
#main-navigation li:hover a,
#main-navigation a:hover			{ color: #00ff10; text-decoration: none; }


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

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


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

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



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

#footer-content-block {  }

#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: #CE989C; border-style: solid; border-width: 2px; border-color:  #CE989C; transition: all .3s ease-in-out; }
#back-to-top svg { height: 100%; width: 100%; }
#back-to-top:hover	{ cursor: pointer; background-color: #CE989C; color: #ffffff; border-color: #ECD1D4; fill: #ffffff; }

#back-to-top .back-to-top-path { fill: #CE989C; }
#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: 825px) {

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

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

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