:root {
	--canguro-yellow:#f9b800;
	--canguro-dark-yellow:#d39b00;
	--canguro-light-yellow:#ffd84d;

	--canguro-light-grey:#fbfbfd;
	--canguro-grey:#f2f2f2;
	--canguro-mid-grey:#e0e0e0;
	--canguro-low-grey:#cfcfcf;
	--canguro-dark-grey:#707070;
	--canguro-black-grey:#4d4d4d;

	--canguro-red:#e53935; 
	--canguro-dark-red:#c62828;
	--canguro-light-red:#ff6b6b;

	--canguro-green:#43a047; 
	--canguro-dark-green:#2e7d32;
	--canguro-light-green:#66bb6a;
	
    --cgr-transition-slow: 500ms ease-out;
	--cgr-transition-fast: 150ms ease-out;

    --cgr-gap:1rem;
    --cgr-20-radius:20px;
	--cgr-5-radius:5px;

    --cgr-popup-background:rgba(0, 0, 0, 0.5);

    --cgr-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);

	--cgr-button-padding:15px 20px;

}


/* =================================================================================================== */
/* ICONS
/* =================================================================================================== */

.lucide {
	display: inline-block;
	width:1rem;
	height:1rem;
	flex-shrink: 0;
	margin-right:0.35rem;
	vertical-align:middle;
}


/* =================================================================================================== */
/* PILLS
/* =================================================================================================== */

.elementor .cgr-duration-pill,
.cgr-duration-pill{
  position:absolute; right:1rem; bottom:1rem;
  background:#000; color:#fff;
  border-radius:10rem;
  padding:0.2rem 0.5rem;
  font-size:0.9rem;
}

.cgr-duration-pill p {
    margin-block-end:0;
}

.cgr-info-pill-grey {
	padding:0.5rem 1rem; border-radius:10rem; color:var(--canguro-black-grey); background:var(--canguro-mid-grey);
	font-size:0.8rem;
}
.cgr-info-pill-yellow {
	padding:0.5rem 1rem; border-radius:10rem; color:#000; background:var(--canguro-yellow);
	font-size:0.8rem;
}
.cgr-info-pill-white {
	padding:0.5rem 1rem; border-radius:10rem; color:#000; background:#fff;
	font-size:0.8rem;
	border:1px solid var(--canguro-mid-grey);
	box-shadow:0 2px 2px rgb(0 0 0 / .1);
}


/* =================================================================================================== */
/* H1, H2, H3, H4 HEADINGS
/* =================================================================================================== */

.cgr-h1-heading h1,
.cgr-h1-heading {
	font-family:"Lexend";
	font-weight:600;
	font-size:2rem;
}
.cgr-h2-heading h2,
.cgr-h2-heading {
	font-family:"Lexend";
	font-weight:600;
	font-size:1.5rem;
}
.cgr-h3-heading h3,
.cgr-h3-heading {
	font-family:"Lexend";
	font-weight:600;
	font-size:1.2rem;
}
.cgr-h4-heading h4,
.cgr-h4-heading {
	font-family:"Lexend";
	font-weight:600;
	font-size:1rem;
}

.cgr-sub-heading {
	font-family:"Lexend";
	font-weight:400;
	font-size:1rem;
	color: var(--canguro-black-grey);
}

.cgr-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cgr-loading__lottie {
  width: 100px;
  height: 100px;
}


/* =================================================================================================== */
/* BUTTONS
/* =================================================================================================== */

.cgr-button-white,
.elementor-element.canguro-v2-white .elementor-button {
background: #fff;
color:#000; 
font-weight: 400;
font-size: 16px;
border-style: solid;
border-radius:5px;
border-width:1px;
border-color:var(--canguro-dark-grey); 
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1)!important;
padding: 15px 20px 15px 20px;
	text-decoration: none;
	cursor: pointer;
}

.cgr-button-white:hover,
.elementor-element.canguro-v2-white .elementor-button:hover {
background: var(--canguro-yellow);
color:#000;
text-decoration: none;
}

.cgr-button-yellow,
.elementor-element.canguro-v2-yellow .elementor-button {
background: var(--canguro-yellow); 
color:#000;
font-weight: 400;
font-size: 16px;
border-style: solid;
border-radius:5px;
border-width:1px;
border-color:var(--canguro-dark-yellow); 
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1)!important;
padding: 15px 20px 15px 20px;
text-decoration: none;
	cursor: pointer;
}

.cgr-button-yellow:hover,
.elementor-element.canguro-v2-yellow .elementor-button:hover {
background: var(--canguro-light-yellow);
color:#000;
text-decoration: none;
}

.cgr-button-red,
.elementor-element.canguro-v2-red .elementor-button {
background: var(--canguro-red); 
color:#fff!important;
font-weight: 400;
font-size: 16px;
border-style: solid;
border-radius:5px;
border-width:1px;
border-color:var(--canguro-dark-red); 
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1)!important;
padding: 15px 20px 15px 20px;
text-decoration: none;
	cursor: pointer;
}

.cgr-button-red:hover,
.elementor-element.canguro-v2-red .elementor-button:hover {
background: var(--canguro-light-red);
color:#fff!important;
text-decoration: none;
}

.cgr-button-green,
.elementor-element.canguro-v2-green .elementor-button {
background: var(--canguro-green); 
color:#fff!important;
font-weight: 400;
font-size: 16px;
border-style: solid;
border-radius:5px;
border-width:1px;
border-color:var(--canguro-dark-green);
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1)!important;
padding: 15px 20px 15px 20px;
text-decoration: none;
	cursor: pointer;
}

.cgr-button-green:hover,
.elementor-element.canguro-v2-green .elementor-button:hover {
background: var(--canguro-light-green);
color:#fff!important;
text-decoration: none;
}

.cgr-button-grey,
.elementor-element.canguro-v2-grey .elementor-button {
background: var(--canguro-mid-grey); 
color:var(--canguro-dark-grey)!important;
font-weight: 400;
font-size: 16px;
border-style: solid;
border-radius:5px;
border-width:1px;
border-color:var(--canguro-low-grey);
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1)!important;
padding: 15px 20px 15px 20px;
text-decoration: none;
	cursor: pointer;
}

.cgr-button-grey:hover,
.elementor-element.canguro-v2-grey .elementor-button:hover {
background: var(--canguro-mid-grey);
color:var(--canguro-dark-grey)!important;
text-decoration: none;
}

/* =================================================================================================== */
/* PLAY BUTTON ROLLOVER
/* =================================================================================================== */

.cgr-video-thumb-hover {
  aspect-ratio: 16 / 9;
}

.cgr-video-thumb-hover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background-color .25s ease;
  pointer-events: none;
}

.cgr-video-thumb-hover::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'>\<defs><mask id='cut'><rect width='56' height='56' fill='white'/><polygon points='24,18 24,38 40,28' fill='black'/></mask></defs>\<circle cx='28' cy='28' r='28' fill='white' fill-opacity='.7' mask='url(%23cut)'/>\</svg>");
}

.cgr-video-thumb-hover:hover::before,
.cgr-video-thumb-hover:focus-visible::before {
  background: rgba(0,0,0,.3);
}

.cgr-video-thumb-hover:hover::after,
.cgr-video-thumb-hover:focus-visible::after {
  opacity: 1;
}