/*
 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.1
 Text Domain:  bricks
*/


:root {
  --transition: all 0.5s linear;
  --slide-up-5px: translatey(-5px);
  --site-bg: #FFF;
}

.vertical {
  writing-mode: vertical-rl;
  /*max-height: 20ch;*/
  border-right: 7px solid var(--base);
  transform-origin: center;
  transform: rotateZ(180deg);
  margin: 0;
  text-align: center;
  opacity: 0.5;
}


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

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

.up-btn,
.up-btn-outline,
[type="submit"] {
  transition: var(--transition);
  isolation: isolate;
  position: relative;
  background-clip: padding-box;
  border: 3px solid var(--action) !important;
  border-radius: var(--radius-xs);
  text-decoration: none !important;
}
.up-btn {
  color: white !important;
  background-color: transparent;
}
.up-btn-outline {
  background-color: var(--site-bg) !important;
  color: var(--primary) !important;
  outline: 1px solid var(--site-bg) !important;
}





/** step 2 of 4 **/

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

/** step 3 of 4 **/

.up-btn:after,
.up-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: var(--radius-xs);
  background-image: linear-gradient(
    135deg,
    var(--action) 0%,
    var(--action) 30%,
    var(--primary-ultra-light) 47%,
    var(--primary) 59%,
    var(--action) 100%
  );
  background-size: 500% 100%;
  background-position: 0% 0;
}


/** step 4 of 4 **/

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



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

/**** Ribbon link ***/
.ros-ribbon{
  transition: var(--transition);
  background-clip: padding-box;
  text-decoration: none !important;
  color: var(--primary);
   background-image: linear-gradient(
    135deg,
    var(--accent) 0%,
    var(--accent) 40%,
    var(--white) 49%,
	var(--white) 52%,
    var(--accent) 59%,
    var(--accent) 100%
  );
  background-size: 500% 100%;
  background-position: 0% 0;
}

.ros-ribbon:hover{
  transition: var(--transition);
  text-decoration: none !important;
  background-position: 100% 0;
  color: var(--action);
}


/**** Links *****/

.logo,
.logo:hover {
  transition: var(--transition);
}
.logo:hover {
  transform: var(--slide-up-5px);
}

a:not(.up-btn-outline, .prev-post, .next-post, .no-underline) {
  text-decoration: underline 0.1em var(--action);
  transition: var(--transition);
  text-underline-offset: 0.1em;
  font-weight:600;
}
a:hover {
	text-decoration-color: transparent !important;
  text-underline-offset: 0.4em;
}


.brxe-nav-menu a{
  text-decoration: underline 0.15em rgba(0, 0, 0, 0);
  transition: var(--transition);
  text-underline-offset: 0.4em;
  font-weight:400;
}
.brxe-nav-menu a:hover {
	text-decoration-color: var(--action) !important;
	text-underline-offset: 0.2em;
 
  
}

a.no-underline:{
  text-decoration:none !important;
}

.ros-footer-menu a:hover{
	text-decoration-color: var(--accent) !important;
	text-underline-offset: 0.2em;
	color: var(--accent) !important;
}  

.prev-post,
.next-post {
  transition: var(--transition);
  text-decoration: none;
}
.prev-post:hover,
.next-post:hover {
  transform: var(--slide-up-5px);
  transition: var(--transition);
  text-decoration: unset;
}





/**** Other styles *****/
[data-balloon]:after {
  font-size: 0.8em !important;
  background-color: var(--base-dark) !important;
}
.brxe-nav-menu .bricks-mobile-menu-toggle span {
  height: 4px;
}
.brxe-nav-menu .bricks-mobile-menu-wrapper ul.bricks-mobile-menu {
  padding-top: 3em;
}

.fa-star,
.rating-star-checked {
  color: var(--action);
}

.ma-boxshadow {
  position: relative;
}

.ma-boxshadow:before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(-45deg, var(--primary) 0%, var(--action) 100%);
  transform: translate3d(0px, 20px, 0) scale(0.95);
  filter: blur(20px);
  opacity: var(0.7);
  transition: opacity 0.3s;
  border-radius: inherit;
}

/* 
* Prevents issues when the parent creates a 
* stacking context. (For example, using the transform
* property )
*/
.ma-boxshadow::after {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
  border-radius: inherit;
}


/* Submit button styles in Sureforms */
#srfm-submit-btn{
	/*font-family: "Oswald";*/
	position:relative;
	isolation:isolate;
}
#srfm-submit-btn::after{
	    content: "";
    transition: var(--transition);
    position: absolute;
    top: -3px;
    right: -3px;
    bottom: -3px;
    left: -3px;
    inset: -3px;
    z-index: -1;
    border-radius: var(--radius-xs);
    background-image: linear-gradient(135deg, var(--action) 0%, var(--action) 30%, var(--primary-ultra-light) 47%, var(--primary) 59%, var(--action) 100%);
    background-size: 500% 100%;
    background-position: 0 0;
}
#srfm-submit-btn:hover{
	    transition: var(--transition);
    box-shadow: 0 5px 10px -5px var(--primary);
    background-color: initial;
    color: #fff !important;
    border-color: transparent;
    text-decoration: none !important;
}
#srfm-submit-btn:hover::after{
	background-position: 100% 0;
}
.srfm-form-container.srfm-form-container{
	padding:2.5rem;
}


/***** Media queries - Please leave last ******/

@media (max-width: 767px) {
  .vertical {
    writing-mode: unset;
    transform: unset;
    border-right: unset;
    border-bottom: 7px solid var(--base);
    margin-bottom: 1rem;
  }
}