/* button inside slider */
.cfosj-button a, .cfosj-button a:before, 
a.cfosj-button, a.cfosj-button:before,
.elementor-4004 .elementor-element.elementor-element-cdb564b .gsc-image-content.skin-v1 .read-more a,
.elementor-4004 .elementor-element.elementor-element-cdb564b .gsc-image-content.skin-v1 .read-more a:before,


/* oxpitan button */
a.btn-theme, a.btn-theme::before,
a.btn-theme-second, a.btn-theme-second::before,

a.btn, a.btn::before, 
a.btn-give-theme, a.btn-give-theme::before, 
a.button.give-btn, a.button.give-btn::before,
a.btn-black, a.btn-black::before,

.wpcf7-form input[type*="submit"],
.wpcf7-form button.wpcf7-submit, .wpcf7-form button.wpcf7-submit::before,
/* .wpcf7-form input[type*="submit"], .wpcf7-form input[type*="submit"]::before, */
/* .elementor .elementor-button */
a.elementor-button, a.elementor-button::before
{
   margin-top: 0px;
   background-color: var(--cfosj-cream) ;
   color: var(--cfosj-black);
   padding: 13px 41px 12px 42px;
   font-size: 16px;
   font-weight: bold;
   font-stretch: normal;
   font-style: normal;
   line-height: normal;
   letter-spacing: 1.5px;
   text-align: center;
   text-transform: none;
   position: relative;
   z-index: 9;
   text-decoration: none;
   border: none;
   line-height: 2rem;
}

/* remove margin from the before psudoelement */
.cfosj-button a:before, a.cfosj-button:before,
.elementor-4004 .elementor-element.elementor-element-cdb564b .gsc-image-content.skin-v1 .read-more a:before,
a.btn-theme::before,
a.btn-theme-second::before,
a.btn::before, 
a.btn-give-theme::before, 
a.button.give-btn::before,
a.btn-black::before,

/* .wpcf7-form input[type*="submit"]::before, */
.wpcf7-form button.wpcf7-submit::before,

a.elementor-button::before
{
   margin-top: 0px;
   content: "";
   position: absolute;
   display: block;
   width: 100%;
   height: 100%;
   top: 0;
   left: 1px;
   z-index: -1;
   text-transform: none;
   background-color: var(--cfosj-cream) ;
   -webkit-transform-origin: bottom left;
   transform-origin: bottom left;
   -webkit-transform: skew(-12deg, 0deg);
   transform: skew(-12deg, 0deg);
   -webkit-transition: all 0.35s !important;
   transition: all 0.35s !important;
   -moz-transition: all 0.35s !important;
   -ms-transition: all 0.35s !important;
}

/* special case for elementor buttons*/
.elementor-button:focus, .elementor-button:hover, .elementor-button:visited{
   color: var(--cfosj-black);
}



/* button on hover */
.cfosj-button a:hover, .cfosj-button a:hover::before, a.cfosj-button:hover, a.cfosj-button:hover::before,

a.btn-theme:hover, a.btn-theme:hover::before,
a.btn-theme-second:hover, a.btn-theme-second:hover::before,


a.btn:hover, a.btn:hover::before, 
a.btn-give-theme:hover, a.btn-give-theme:hover::before, 
a.button.give-btn:hover, a.button.give-btn:hover::before,
a.btn-black:hover, a.btn-black:hover::before,

.elementor-4004 .elementor-element.elementor-element-cdb564b .gsc-image-content.skin-v1 .read-more a:hover,
.elementor-4004 .elementor-element.elementor-element-cdb564b .gsc-image-content.skin-v1 .read-more a:hover::before,

/* donation form button in home page */
/* .wpcf7-form input[type*="submit"]:hover, */
.wpcf7-form button.wpcf7-submit:hover, .wpcf7-form button.wpcf7-submit:hover::before,

/* .wpcf7-form input[type*="submit"]:hover, .wpcf7-form input[type*="submit"]:hover::before, */


a.elementor-button:hover, a.elementor-button:hover::before

{
   background-color: var(--cfosj-yellow) ;
   color: var(--cfosj-black);
}


/* button on the topbar right child */
.header-bottom a.btn-theme-second, .header-bottom a.btn-theme-second::before{
   margin-top: 0;
   padding: 0 30px 0 35px;
   font-size: 12px;
   line-height: 46px;
   letter-spacing: 1px;
}



/* CTA BUTTON 
*
*
*
*
*
*
*/
/* this first line is to change the daotion button to be a cta button */
a.btn-give-theme, a.btn-give-theme::before, 
.cfosj-button-cta a, .cfosj-button-cta a:before, 
a.cfosj-button-cta, a.cfosj-button-cta:before,
.elementor a.cfosj-button-cta
{
   background-color: var(--cfosj-black) ;
   color: var(--cfosj-cream) ;
}
.cfosj-button-cta a:before, a.cfosj-button-cta:before{
   margin-top: 0px;
}

.cfosj-button-cta .elementor-button:focus, .cfosj-button-cta .elementor-button:hover, .cfosj-button-cta .elementor-button:visited{
   color: var(--cfosj-cream) ;
}


/* cta button on hover */
a.btn-give-theme:hover, a.btn-give-theme:hover::before, 
.cfosj-button-cta a:hover, .cfosj-button-cta a:hover::before, a.cfosj-button-cta:hover, a.cfosj-button-cta:hover::before{
   background-color: var(--cfosj-purple) ;
   color: var(--cfosj-cream) ; 
}



/* special case for donation forms. it needs to have */
.wpcf7-form button.wpcf7-submit::before,
.wpcf7-form button.wpcf7-submit
{
   -webkit-transition: all 0.35s !important;
   transition: all 0.35s !important;
}


/* add this class as parent to the input submit on cf7 to create a similar cfosj button */
/* .cfosj-contact-button-overlay{
   position: relative;
   border: 1px solid green;
}

.cfosj-contact-button-overlay::before{
   border: 1px solid black;
   margin-top: 0px;
   content: "";
   position: absolute;
   display: block;
   height: 100%;
   width: 131px;
   top: -1px;
   left: 0;
   z-index: -1;
   text-transform: none;
   background-color: var(--cfosj-cream) ;
   -webkit-transform-origin: bottom left;
   transform-origin: bottom left;
   -webkit-transform: skew(-12deg, 0deg);
   transform: skew(-12deg, 0deg);
   -webkit-transition: all 0.35s !important;
   transition: all 0.35s !important;
   -moz-transition: all 0.35s !important;
   -ms-transition: all 0.35s !important;
}