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


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

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

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

@font-face {
    font-family: 'DIN 2014';
    src: url('fonts/DIN2014-Light.woff2') format('woff2'),
        url('fonts/DIN2014-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Baloo Da 2';
    src: url('fonts/BalooDa2-Regular.woff2') format('woff2'),
        url('fonts/BalooDa2-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Baloo Da 2';
    src: url('fonts/BalooDa2-Medium.woff2') format('woff2'),
        url('fonts/BalooDa2-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Baloo Da 2';
    src: url('fonts/BalooDa2-SemiBold.woff2') format('woff2'),
        url('fonts/BalooDa2-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: 'Baloo Da 2';
    src: url('fonts/BalooDa2-ExtraBold.woff2') format('woff2'),
        url('fonts/BalooDa2-ExtraBold.woff') format('woff');
    font-weight: 900;
    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);
}


/* 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: #4E4949; background-color: #ffffff; font-weight: normal; font-family: 'DIN 2014', '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: 'Baloo Da 2', 'Arial', sans-serif; }

h1 { font-size: 3.7222rem; font-size: var(--global-kb-font-size-xxl); color: #038896; 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: #038896; 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; }

.slider-content > .kt-inside-inner-col { overflow-x: auto; display: flex; align-items: flex-start; flex-direction: row; flex-wrap: nowrap; cursor: grab;  }
.slider-content > .kt-inside-inner-col.active {    cursor: grabbing; }
.slider-content > .kt-inside-inner-col > .wp-block-kadence-column { min-width: 275px; }
.slider-content.slider-gallery > .kt-inside-inner-col > .wp-block-kadence-image { min-width: 310px; }

.slider-content > .kt-inside-inner-col::-webkit-scrollbar-track	{ display: none; background-color: #eaeaea; border-radius: 5px; }
.slider-content > .kt-inside-inner-col::-webkit-scrollbar			{ display: none; height: 6px; background-color: #707070; border-radius: 5px; }
.slider-content > .kt-inside-inner-col::-webkit-scrollbar-thumb	{ display: none; height: 4px; background-color: #707070; border-radius: 5px; }




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

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

#header-wrapper	{ width: 100%;  }

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

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

#menu-button { margin: 35px 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: #953092;
  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: #953092;
}

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


#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,231,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-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='669.544' height='1080' viewBox='0 0 669.544 1080'%3E%3Cpath id='Path_311' data-name='Path 311' d='M-93.248,1080S51.516,941.152-7.52,732.164s-43.385-299.84,0-459.873S-62.452,13.23-80.565,0H576.3V1080Z' transform='translate(93.248)' fill='%23fff'/%3E%3C/svg%3E%0A"); background-size: cover;  }

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

#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; font-size: 2.2222rem; font-size: var(--global-kb-font-size-xl); line-height: 140%; font-family: 'Baloo Da 2', 'Arial', sans-serif; text-decoration: none; color: #038896;  width: calc(100% - 10px); padding: 5px 0 5px 10px; display: block; line-height: 100%; transition: color .4s ease-in-out; }	



#popup-main-navigation > li > a { position: relative; text-align: right; display: flex; justify-content: flex-end; align-items: center; gap: 5px; }

#popup-main-navigation li	.sub-menu { display: none; }
#popup-main-navigation li.open .sub-menu { display: block;  margin: 10px 0 0 35px; }

#popup-main-navigation li .sub-menu li	{ margin-bottom: 5px;  }
#popup-main-navigation li .sub-menu a		{ color: #565656; font-size: 1rem; width: auto; }


/*#popup-main-navigation li.current-menu-item > a,*/
#popup-main-navigation li a:hover	{ color: #953092; 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%;   }


/* map */ 

.indii-kids-map {  width: 100%; height: 700px; max-height: 60vH; margin: 0; border: 1px solid #d1d1d1; border-radius: 12px; -webkit-box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.09);  box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.09); }
.indii-kids-map img { max-width: inherit !important; }
.indii-kids-map .marker { display: none; }

.store-locations-search-field { margin: 10px 0; }
.store-locations-search-field label { display: none; font-weight: normal; }
.store-locations-search-field input[type="text"] { padding: 8px 20px; max-width: 210px; font-size: 24px; font-size: clamp(1rem, 1rem + 0.1389vw, 1.3333rem); background-color: transparent;  border: 1px solid #038896; border-radius: 30px;  font-family: inherit; color: #4E4949; letter-spacing: 1.25px; line-height: 140%;  }


.frames-video { width: 1000px; margin-left: -15%; }


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

#footer-content-block { margin-top:-100px; }

#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: #000000; border-style: solid; border-width: 2px; border-color:  rgba(149,52,145, 1); transition: all .3s ease-in-out; }
#back-to-top svg { height: 100%; width: 100%; }
#back-to-top:hover	{ cursor: pointer; background-color: rgba(149,52,145, 1); color: #ffffff; border-color: #ffffff; fill: #ffffff; }

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


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

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







/* RESPONSIVE STYLES 
---------------------------------------------------------------------------*/
@media screen and (max-width: 1100px) {
	.frames-video { margin-left: -35%; }
}

@media screen and (max-width: 1024px) {
	.frames-video { margin-left: -10%; margin-bottom: -190px; }
}

@media screen and (max-width: 800px) {
	.frames-video { margin-left: -20%;  }
}

@media screen and (max-width: 782px) {
	#logo { max-width: 70px; }

}

@media screen and (max-width: 767px) {
	.frames-video { margin-bottom: -170px; }
}

@media screen and (max-width: 660px) {
	.frames-video { margin-left: -20%; width: 120vW; }
}

@media screen and (max-width: 600px) {
	html #wpadminbar { top: -46px; }
}

@media screen and (max-width: 580px) {
	.frames-video { margin-bottom: -100px; }
}

@media screen and (max-width: 450px) {
	#popup-menu-content { max-width: 250px; padding-right: 10px; }
}