section.whats-new { 
	padding: 20px 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

section.whats-new .carousel-wrapper { 
	font-size: 0;
}

section.whats-new .carousel-container {
	display: inline-block;
	vertical-align: top;
	width: calc(75% - 6px);
}

section.whats-new .see-all-panel.desktop {
	display: inline-block;
	width: calc(25% + 6px);
	background-color: transparent;
	padding: 0 0 0 20px;
	font-size: 35px;
	font-weight: 600;

	background-color: transparent;
	color: #ffffff;
}

section.whats-new .see-all-panel p {
	font: inherit;
	color: inherit;
}

section.whats-new .btn-see-all.desktop {
	font-family: Roobert, sans-serif;
	font-size: 35px;
	font-weight: 600;
	color: var(--hl-light-green);
	background-color: var(--hl-dark-green);
	align-items: end;
	text-decoration: none;
	padding: 20px;
	transition: all 0.2s;
	display: flex;
	flex-direction: row;
	gap: 10px;
	justify-content: space-between;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

section.whats-new .btn-see-all.desktop:hover { 
	background-color: var(--hl-light-green);
	color: var(--hl-dark-green);
}

section.whats-new .btn-see-all.desktop:hover div.text-container div.indicator { 
	background-image: url("/_assets/icon-line-arrow-hl-dark-green.png");

}

section.whats-new .btn-see-all.desktop div.text-container {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: end;
	gap: 10px;
	justify-content: space-between;
}

section.whats-new .btn-see-all.desktop div.text-container div.indicator { 
	width: 22px;
	height: 22px;
	background-image: url("/_assets/icon-line-arrow-hl-light-green.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	transform: rotate(-45deg);
	flex-shrink: 0;
}

section.whats-new .btn-see-all.desktop div.text-container div.text {
}

section.whats-new .btn-see-all.desktop div.text-container div.text > :last-child { 
	margin-bottom: 0; 
}

.knowhow-panel.standard-knowhow-panel .inner { 
	background-color: var(--hl-light-taupe);
}

.knowhow-panel.standard-knowhow-panel .inner:hover { 
	background-color: var(--hl-dark-green)!important;
	color: #ffffff;
}

.knowhow-panel.standard-knowhow-panel .inner:hover .tag .type,
.knowhow-panel.standard-knowhow-panel .inner:hover .content .date,
.knowhow-panel.standard-knowhow-panel .inner:hover .content div.title p {
	color: inherit;
}

section.whats-new div.see-all-panel.mobile {
	display: none;
}

section.whats-new a.btn-see-all.mobile {
	background-color: var(--hl-dark-green);
	font-size: 15px;
	color: #ffffff;
	padding: 0.7em 1em;
	text-decoration: none;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	transition: all 0.2s;
}

section.whats-new a.btn-see-all.mobile:hover {
	background-color: var(--hl-light-green);
	color: var(--hl-dark-green);
}

section.whats-new a.btn-see-all.mobile:after {
	content: "";
	width: 12px;
	height: 12px;
	background-image: url("/_assets/icon-line-arrow-hl-light-green.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 0.2s;
}

section.whats-new a.btn-see-all.mobile:hover:after {
	background-image: url("/_assets/icon-line-arrow-hl-dark-green.png");
	transform: translateX(5px);
}

/*** Themes ***/

/*
	dark-green
	multi-gradient
	purple-light-green-gradient
	taupe
	teal-light-green-gradient
	teal-purple-gradient
	white
*/

section.whats-new.tpp-theme-dark-green div.section-title { 
	color: #ffffff;
}

section.whats-new.tpp-theme-dark-green .slick-arrow { 
	border-color: var(--hl-light-green);
	background-image: url("/_assets/icon-line-arrow-hl-light-green.png");
}

section.whats-new.tpp-theme-dark-green .slick-arrow:hover { 
	background-color: var(--hl-light-green);
	background-image: url("/_assets/icon-line-arrow-hl-dark-green.png");
}

section.whats-new.tpp-theme-dark-green .knowhow-panel.standard-knowhow-panel .inner:hover {
	background-color: var(--hl-light-green) !important;
	color: var(--hl-dark-green);
}

section.whats-new.tpp-theme-dark-green a.btn-see-all { 
	background-color: var(--hl-light-green);
	color: var(--hl-dark-green);
}

section.whats-new.tpp-theme-dark-green a.btn-see-all.desktop div.text-container div.indicator,
section.whats-new.tpp-theme-dark-green a.btn-see-all.mobile:after { 
	background-image: url("/_assets/icon-line-arrow-hl-dark-green.png");
}

section.whats-new.tpp-theme-multi-gradient .knowhow-panel.standard-knowhow-panel .inner:hover {
	background-color: var(--hl-light-green) !important;
	color: var(--hl-dark-green);
}

section.whats-new.tpp-theme-dark-green .knowhow-panel.standard-knowhow-panel .inner,
section.whats-new.tpp-theme-multi-gradient .knowhow-panel.standard-knowhow-panel .inner,
section.whats-new.tpp-theme-purple-light-green-gradient .knowhow-panel.standard-knowhow-panel .inner,
section.whats-new.tpp-theme-taupe .knowhow-panel.standard-knowhow-panel .inner,
section.whats-new.tpp-theme-teal-purple-gradient .knowhow-panel.standard-knowhow-panel .inner {
	background-color: #ffffff;
}

section.whats-new.tpp-theme-taupe {
	background-color: var(--hl-taupe);
}

/*section.whats-new.tpp-theme-teal-light-green-gradient { 
	background-image: url("/template-tool/_assets/bg-teal-lime-green-gradient.jpg");
}

section.whats-new.tpp-theme-teal-purple-gradient {
	background-image: url("/template-tool/_assets/bg-teal-purple-gradient.jpg");
}*/

section.whats-new.tpp-theme-white .slick-arrow,
section.whats-new.tpp-theme-teal-purple-gradient .slick-arrow {
	border-color: var(--hl-light-green);
}

/*** Browse Button Themes ***/

/*
	dark-green
	purple-light-green-gradient
*/

section.whats-new .btn-see-all.desktop.tpp-theme-purple-light-green-gradient { 
	background-image: url("/template-tool/_assets/bg-purple-light-green-gradient-vertical.jpeg");
	color: var(--hl-dark-green);
}

section.whats-new .btn-see-all.desktop.tpp-theme-purple-light-green-gradient .text-container .indicator { 
	background-image: url("/_assets/icon-line-arrow-hl-dark-green.png");
}

section.whats-new .btn-see-all.desktop.tpp-theme-purple-light-green-gradient:hover {
	background-image: none;
	background-color: var(--hl-dark-green);
	color: var(--hl-light-green);
}

section.whats-new .btn-see-all.desktop.tpp-theme-purple-light-green-gradient:hover .text-container .indicator {
	background-image: url("/_assets/icon-line-arrow-hl-light-green.png");
}

@media (max-width: 1020px) {
	section.whats-new .carousel-container { 
		width: calc(66% - 6px);
	}

	section.whats-new .see-all-panel.desktop {
		width: calc(33% + 6px);
	}
}

@media (max-width: 780px) {
	section.whats-new .carousel-container {
		width: calc(50% - 10px);
	}

	section.whats-new .see-all-panel.desktop {
		width: calc(50% + 10px);
	}

}

@media (max-width: 740px) {
	section.whats-new .carousel-container { 
		width: 100%;
	}

	section.whats-new .see-all-panel.desktop { 
		display: none;
	}

	section.whats-new div.see-all-panel.mobile { 
		display: block;
	}
}