/*
 Theme Name:   Katrina Photography Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Child theme of Bricks. Don't delete the parent!
 Author:       Mainsail Web Design
 Author URI:   https://www.mainsailwebdesign.com/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/*** colors ***/

/* Primary: #2786fa
 * Accent: #d9c68d --accent
 * 
 * Base: #060949
 * 
 * 
*/


:root {
  --transition: all 0.5s linear;
  --slide-up-5px: translatey(-5px);
  --site-bg: #fff;
  --gold-gradient: linear-gradient(135deg, #d9c68d 17%, #ffecb3 40%, #d9c68d 78%);
	--blue-gradient: linear-gradient(135deg, var(--primary) 17%, var(--primary-light) 40%, var(--primary) 78%);
}

/* Gold heading */

.kp-intro__heading{
  background:  var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent-semi-dark);
}


/***** Button styles ******/
button {
  transition: var(--transition);
}
button:hover:not(.bricks-mobile-menu-toggle) {
  transition: var(--transition);
  box-shadow: 0px 5px 20px -5px var(--accent-dark);
}

/*** Hover effect - add classes here **/
/** step 1 of 4 **/

.kp-btn,
.kp-btn-outline,
[type="submit"] {
  transition: var(--transition);
  isolation: isolate;
  position: relative;
  background-clip: padding-box;
  border: 3px solid var(--accent) !important;
  border-radius: 10px;
  text-decoration: none !important;
  text-transform: capitalize;
	font-weight: bold;
}
.kp-btn {
  color: white !important;
  /*background-color: transparent;*/
	
}
.kp-btn-outline {
  background-color: var(--site-bg) !important;
  color: var(--primary) !important;
  outline: 1px solid var(--site-bg) !important;
}





/** step 2 of 4 **/

.kp-btn:hover,
.kp-btn-outline:hover,
[type="submit"]:hover
{
  transition: var(--transition);
  box-shadow: 0px 5px 10px -5px var(--accent);
  background-color: transparent;
  color: white !important;
  border-color: transparent;
  text-decoration: none !important;
}

/** step 3 of 4 **/

.kp-btn:after,
.kp-btn-outline:after,
[type="submit"]:after
{
  content: "";
  transition: var(--transition);
  position: absolute;
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  inset: -3px;
  z-index: -1;
  border-radius: 10px;
  background-image: var(--gold-gradient);
  background-size: 400% 100%;
  background-position: 0% 0;
}
.kp-btn-blue:after{
	background-color: var(--primary);
	background-image: var(--blue-gradient);
   /* background-blend-mode:overlay, multiply; */
	
}

/** step 4 of 4 **/

.kp-btn:hover:after,
.kp-btn-outline:hover:after,
[type="submit"]:hover:after
{
  background-position: 100% 0;
}



.kp-btn-outline:after {
  opacity: 0;
}
.kp-btn-outline:hover:after {
  opacity: 1;
}