/*
Theme Name: KPD26
Theme URI: 
Author: 
Author URI: 
Description: A block theme child of Twenty Twenty-Five, with a custom color palette (background #3547ed, text #ff6a66) and three custom typefaces: Ohno Softie Variable (Adobe Fonts), Roboto Mono (Google Fonts), and Dreamboat (Adobe Fonts).
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.0
Text Domain: kpd26
*/



html {
	scroll-behavior: smooth;
	
}

.contact {max-width: 799px!important;
}


.orange {
color: var(--wp--preset--color--background);
background-color: var(--wp--preset--color--text);
}

.scheme-blue-orange   { --wp--preset--color--background: #3547ed; --wp--preset--color--text: #ff6a66; }
.scheme-black-white   { --wp--preset--color--background: #FFFFFF; --wp--preset--color--text: #000000; }
.scheme-white-black   { --wp--preset--color--background: #000000; --wp--preset--color--text: #FFFFFF; }


.scheme-button-row {
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--background);
padding: 0 0 0 20px;
	position: fixed;
	z-index: 100;
	bottom: 30px;
	right: 85px;
}

.scheme-button-row a {
  padding: 10px;  
  text-decoration: none;
  color: inherit;
}
.scheme-button-row button {
	transition: all .1s ease-in-out;
  width: 15px;
	padding: 0 0 0 0!important;
	background-color: transparent!important;
	border: 0!important;
  text-decoration: none;
  color: inherit;
	
	cursor: pointer;
}
 .scheme-button-row img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
  }

.ms-custom-button {
color: var(--wp--preset--color--background)!important;
background-color: var(--wp--preset--color--text)!important;
}

.top-list {
	list-style: none;
	    padding-inline-start: 0px;

}

.top-list li {
	margin-top: 0;
}
.kp-button {
color: var(--wp--preset--color--text)!important;
background-color: var(--wp--preset--color--background)!important;
	display: inline-block;
   font-weight: bold;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.kp-button:hover {
	opacity: 0.8;
}

#bottle {

z-index: -1;
height: 394px;

width: 130px;		 background-color: var(--wp--preset--color--text);
			 position: absolute;
			


			overflow: hidden;
		}


.top-line {
	width: 30%;
}
.bottle img
	 {

width: 130px;
}
.web-slides {
	padding: 0 100px;
}
h2 { line-height: 1!important; }

@media (max-width: 845px) {
	.web-slides {
	padding: 0 0;
}
	.scheme-button-row {

	bottom: 20px;
	right: 75px;
}
	
	.kp-img img {
		max-width: 325px;
	}
	.top-list li {
	margin-top: 7px;
		line-height: 1.2;
}
	
	.bottle img
	 {

width: 80px;
}
	#bottle {
	height: 241px;
        width: 80px;
	}
	.top-line {
	width: 45%;
		
	}.bottle-text {padding-bottom: 25px;}
	.bottle-line {
height: 35px;
		width: 40px;
}

	
	.nogap {
		gap: 0;
	}
	.kp-img  {
		padding: 0 30px!important;
	}
	.flavours, .bottled {
		padding-bottom: 0!important;
	}
	
	.flavours p, .flavours h2  { 
		
		text-align: left!important;
	}
	.about-txt { padding:  0 30px!important;}
	.pop-box {
    padding: 0 25px;
   
}
	.pop-col {
    padding: 0;
   display: flex;
    align-items: center;
    justify-content: center;
}
	
}

/* Bubbles */
.bubbles {

  background-color: var(--wp--preset--color--background);
 

}

  
  .pop-box {
	 
	  padding: 25px;
    position: relative;
    width: 250px;

    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;    
    justify-content: center; 
    text-align: center;
	      gap: 0; 
  }


  .icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
	  

  }



.pop-text {
	 background-color: var(--wp--preset--color--text);
	border-radius: 20px;
	z-index: 50;
    padding: 8 15px;
}

  .pop-t1 {
	 
    position: relative;
    z-index: 1;
	  text-shadow: 
	  -2px -2px 0 var(--wp--preset--color--text),
    0   -2px 0 var(--wp--preset--color--text),
    2px -2px 0 var(--wp--preset--color--text),
    2px  0   0 var(--wp--preset--color--text),
    2px  2px 0 var(--wp--preset--color--text),
    0    2px 0 var(--wp--preset--color--text),
    -2px  2px 0 var(--wp--preset--color--text),
    -2px  0   0 var(--wp--preset--color--text); 
    margin: 0;
	  padding-top: 20px;
    font-size: 2em;
  line-height: 0.25; 
    display: block; 
	      font-family: var(--wp--preset--font-family--ohno-softie-variable);
    color: var(--wp--preset--color--background);
  font-weight: 700;
	  text-transform: uppercase;
  }

  .pop-t2 {
    animation: popScale 2.5s ease-in-out 0s infinite; 
  text-shadow: 
	  -2px -2px 0 var(--wp--preset--color--text),
    0   -2px 0 var(--wp--preset--color--text),
    2px -2px 0 var(--wp--preset--color--text),
    2px  0   0 var(--wp--preset--color--text),
    2px  2px 0 var(--wp--preset--color--text),
    0    2px 0 var(--wp--preset--color--text),
    -2px  2px 0 var(--wp--preset--color--text),
    -2px  0   0 var(--wp--preset--color--text); 
  position: relative;
    z-index: 1;
    margin: 0;
    font-family: var(--wp--preset--font-family--ohno-softie-variable);
    font-size: 5em;
    font-weight: 900;
    color: var(--wp--preset--color--background);
    letter-spacing: 2px;
	   line-height: 1; 
    display: block; 
  }

  ul.bursts {
    list-style-type: none;
    width: 0;
    height: 220px;
    margin: 0;
    padding: 0;
    position: absolute;
    left: calc(50% - 2px);
    top: calc(50% - 110px);
    z-index: 0;
  }

  ul.bursts li {
    width: 2px;
    height: 100%;
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
  }

  ul.bursts li::after {
    content: '';
    width: 2px;
    height: 50%;
    background: var(--wp--preset--color--background); 
    position: absolute;
    bottom: 50%;
    animation: lightBursts 2.5s ease-in-out 0s infinite;
  }

  /* rotate each burst ray around the center point */
  ul.bursts li.deg0   { transform: rotate(0deg); }
  ul.bursts li.deg36  { transform: rotate(36deg); }
  ul.bursts li.deg72  { transform: rotate(72deg); }
  ul.bursts li.deg108 { transform: rotate(108deg); }
  ul.bursts li.deg144 { transform: rotate(144deg); }
  ul.bursts li.deg180 { transform: rotate(180deg); }
  ul.bursts li.deg216 { transform: rotate(216deg); }
  ul.bursts li.deg252 { transform: rotate(252deg); }
  ul.bursts li.deg288 { transform: rotate(288deg); }
  ul.bursts li.deg324 { transform: rotate(324deg); }

  @keyframes lightBursts {

    0%, 54%, 100% {
      height: 0%;
      bottom: 100%;
    }
    6% {
      height: 0%;
      bottom: 80%;
    }
    21% {
      height: 30%;
      bottom: 80%;
    }
  }

@keyframes popScale {
   
    0%, 6%, 54%, 100% {
      transform: scale(1);
    }
    21% {
      transform: scale(1.3);
    }
  }

.jb-bg {
	background-image: url(https://kimpotter.design/wp-content/themes/kpd26/assets/imgs/reactive-backdrop-design.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom center;
}

.snapshot-text {

		border:  1px solid var(--wp--preset--color--text);

	padding: 20px;
}

.snapshot-text-2 {

		border:  1px solid var(--wp--preset--color--background);

	padding: 20px;
}

.jbslider .slides  {
 display: flex !important;
    align-items: center;
	
}

  #bottle1, #bottle2, #bottle3 {
    display: none;
	
  }
  #bottle1 {
    display: block;
  }

  #kp1, #kp2 {
    display: none;
	  width: 100%;

  }
  #kp1 {
    display: block;
  }
 #lid1, #lid2, #lid3 {
    display: none;
	   width: 80px;
    height: 80px;
  }
  #lid1 {
    display: block;
  }
  #fixed-button {
    position: fixed;
    top: 0;
    right: 20px;
    z-index: 30;       
    width: 80px;
    height: 80px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
	   transition: all .2s ease-in-out;
  }
  #fixed-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
	  
  }

#fixed-button:hover {
	transform: rotate(10deg);
}

.scheme-button-row button:hover {
	transform: scale(1.2);
}