/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.0
 Text Domain:  bricks
*/


.btn-p{
  z-index: 0;
  color: var(--color-2);
  background:none;
  position: relative;
  overflow:hidden;
  border: solid 1px var(--color-2) !important;
  cursor: pointer;
}

.btn-p::after {
  content: '';
  width: 0px;
  aspect-ratio: 1/1;
  background-color: var(--color-2);
  border-radius: 100vmax;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  transition: width 0.3s ease-out;
}

.btn-p:hover::after, .btn-p:focus-visible::after {
  width: 220%;
}

.btn-p:hover {
  color: var(--light);
}


.btn-2{
  z-index: 0;
  color: var(--light) !important;
  background:none;
  position: relative;
  overflow:hidden;
  border: solid 1px var(--color-9) !important;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

.btn-2::before {
	content: '';
	width: 100%;
	height: 100%;
	background-color: var(--color-9);
	position: absolute;
	z-index: -2;
}

.btn-2::after {
  content: '';
  width: 0px;
  aspect-ratio: 1/1;
  background-color: var(--color-2);
  border-radius: 100vmax;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  z-index:-1;
  pointer-events: none;
  transition: width 0.3s ease-out;
}

.btn-2:hover::after, .btn-1:focus-visible::after {
  width: 220%;
}

.btn-2:hover {
	border: solid 1px var(--color-2) !important;
}


.btn-1{
  z-index: 0;
  color: var(--light);
  background:var(--color-2);
  position: relative;
  overflow:hidden;
  border: solid 1px var(--color-2) !important;
  cursor: pointer;
}

.btn-1::before {
	content: '';
	width: 100%;
	height: 100%;
	background-color: var(--color-13);
	position: absolute;
	z-index: -2;
}

.btn-1::after {
  content: '';
  width: 0px;
  aspect-ratio: 1/1;
  background-color: var(--color-2);
  border-radius: 100vmax;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  z-index:-1;
  pointer-events: none;
  transition: width 0.3s ease-out;
}

.btn-1:hover::after, .btn-1:focus-visible::after {
  width: 220%;
}

.btn-1:hover {
	border: solid 1px var(--color-2) !important;
}

.btn-4{
  z-index: 0;
  color: var(--light);
  background:none;
  position: relative;
  overflow:hidden;
  border: solid 1px var(--light) !important;
  cursor: pointer;
}

.btn-4::before {
	content: '';
	width: 100%;
	height: 100%;
	background-color: none;
	position: absolute;
	z-index: -2;
}

.btn-4::after {
  content: '';
  width: 0px;
  aspect-ratio: 1/1;
  background-color: var(--color-2);
  border-radius: 100vmax;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  z-index:-1;
  pointer-events: none;
  transition: width 0.3s ease-out;
}

.btn-4:hover::after, .btn-4:focus-visible::after {
  width: 220%;
}

.btn-4:hover {
	border: solid 1px var(--color-2) !important;
}

.img-not{
	user-select: none;
	pointer-events: none;
}