.site-banner {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: 100%;
	padding: 70px 0px;
	position: relative;
}

.site-banner .content-banner {
	max-width: 100%;
	color: var(--white);
}

.site-banner .content-banner h1 {
	line-height: var(--lineheight-xxs);
}

.content-banner {
	position: relative;
	z-index: 2;
}

/* breadcrumb */
.site-banner .site-breadcrumbs {
    position: absolute;
    top: 24px;
    left: var(--padding-container);
}

.site-banner .breadcrumb-wrapper {
	width: auto;
	color: var(--white);
}

/* button slider */
.site-banner.width-button-slider .container {
	margin-top: auto;
}

.slider-button {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	   -moz-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	position: relative;
	z-index: 2;
}

.wrapper-slider-button > a {
	display: inline-block;
	padding: 10px 21px;
}

.wrapper-slider-button > a.active {
	font-weight: 600;
}

.wrapper-slider-button,
.wrapper-slider-button > a {
	-webkit-border-radius: var(--rounded-xxl);
	   -moz-border-radius: var(--rounded-xxl);
	        border-radius: var(--rounded-xxl);
}

.wrapper-slider-button {
	background-color: var(--black);
	color: var(--white);
	border: 8px solid var(--white);
}

.btn-blue-slider.active {
	background-color: var(--soft-blue);
}

.btn-red-slider.active {
	background-color: var(--red-400);
}  

/* button banner */
.content-banner .button-group-banner {
	margin-top: 32px;
}

.wrapper-btn-group-banner {
	margin: -12px;
}

.wrapper-btn-group-banner .btn-banner {
	margin: 12px;
}

.button-group-banner .btn-banner {
	display: inline-block;
}

/* general */
.banner-simple:before,
.banner-menu-transparent:before,
.banner-menu-transparent:after {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	z-index: 1;
}

/* content banner transparent */
.banner-menu-transparent:after {
	right: 0;
	width: 100vw;
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.30)), to(rgba(0, 0, 0, 0.00)));
	background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
	background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
	background: -o-linear-gradient(top, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
}

.banner-menu-transparent h1 {
	margin-bottom: 24px;
}

.banner-menu-transparent .content-banner {
	--lineheight-s: 1.444;
	font-size: var(--text-md);
	line-height: var(--lineheight-s);
}

.banner-menu-transparent .btn-banner-primary,
.site-banner .btn-banner-secondary {
	-webkit-transition: var(--duration);
	-o-transition: var(--duration);
	-moz-transition: var(--duration);
	transition: var(--duration);
}

.banner-menu-transparent .btn-banner-primary {
	color: var(--black);
	background-color: var(--cream);
}

.banner-menu-transparent .btn-banner-primary:hover {
	background-color: var(--blue);
	color: var(--white);
}

.site-banner .btn-banner-secondary {
	color: var(--cream);
	background-color: var(--transparent);
	border-color: var(--cream);
}

.site-banner .btn-banner-secondary:hover {
	background-color: var(--cream);
	color: var(--black);
}


/* banner simple */
.banner-simple:before {
	max-width: 1344px;
	width: 100%;
	height: 100%;
	background: url(/wp-content/themes/whello/assets/images/pattern/Ellipse-banner-simple-large.svg) right/cover no-repeat;
}

.banner-simple .btn-banner-primary {
	background-color: var(--blue);
	border-color: var(--blue);
}


/* ------------------------------
		RESPONSIVE
----------------------------------*/
@media all and (min-width: 601px) {
	/* content banner transparent */
	.banner-menu-transparent:before {
		background: url(/wp-content/themes/whello/assets/images/pattern/overlay-banner-transparent.svg) right/cover no-repeat;
	}
}



@media all and (min-width: 1600px) {
	.site-banner.width-button-slider {
		padding-top: 9vw;
		max-height: calc(100vh - 126px);
	}

	.site-banner.width-button-slider .slider-button {
		margin-top: 3vw;
	}
}


@media all and (min-width: 1025px) and (max-width: 1599px) {
	.site-banner.width-button-slider {
		padding-top: 80px;
		max-height: 100vh;
	}

	.site-banner.width-button-slider .slider-button {
		margin-top: 2vw;
	}
}

@media all and (min-width: 1025px) {
	.site-banner.banner-size-large:not(.width-button-slider) {
		min-height: 893px;
	}

	.site-banner {
		padding-top: 190px;
		padding-bottom: 140px;
	}

	.site-banner.banner-size-medium {
		min-height: 430px;
	}
	
}


@media all and (min-width: 901px) and (max-width: 1024px) {
	.site-banner:not(.banner-menu-transparent).banner-size-large {
		padding-top: 100px;
	}

	.site-banner.banner-menu-transparent {
		padding-top: 150px;
		padding-bottom: 100px;
	}

	.site-banner.banner-size-medium {
		padding-top: 60px;
		padding-bottom: 110px;
		min-height: 400px;
	}

	.vc_row.row-card-info>.wpb_column>.vc_column-inner>.wpb_wrapper img {
		max-width: 50px;
	}

	.site-banner.width-button-slider .slider-button {
		margin-top: 3vw;
	}
}

@media all and (min-width: 901px) {
	.site-banner.width-button-slider {
		padding-bottom: 87px;
	}

	.site-banner .content-banner {
		max-width: 656px;
	}

	.banner-menu-transparent .content-banner p {
		max-width: 525px;
	}

	.site-banner .content-banner p+p {
		margin-top: 32px;
	}

	/* content banner transparent */
	.banner-menu-transparent:before {
		width: 100vw;
		height: 925px;
		max-width: 1025px;
	}

	.banner-menu-transparent:after {
		height: 190px;
	}

	.banner-menu-transparent.banner-size-large h1 {
		--lineheight-xxs: .9;
		--text-5xl: 95px;
		line-height: var(--lineheight-xxs);
	}

	.banner-menu-transparent.banner-size-large h1 strong {
		font-size: 80px;
	}

	.site-banner.banner-size-medium h1 {
		--text-5xl: 60px;
	}

	.banner-size-medium h1 strong {
		font-size: 53.33px;
	}

	.wrapper-slider-button {
		padding: 3px;
	}
}


@media all and (max-width: 900px) {
	.banner-menu-transparent:after {
		height: 120px;
	}

	.banner-size-large h1 {
		--text-5xl: 48px;
	}

	.banner-size-large h1 strong {
		font-size: 40px;
	}

	.banner-size-medium h1 {
		--text-5xl: 36px;
	}

	.banner-size-medium h1 strong {
		font-size: 32px;
	}

	.site-banner {
		padding-bottom: 32px;
	}

	.site-banner .slider-button {
		position: fixed;
		bottom: 16px;
		left: 0;
		right: 0;
		width: 100vw;
	}

	.wrapper-slider-button {
		border-width: 2px;
		padding: 2px;
	}

	.wrapper-slider-button > a {
		font-size: 10.24px;
	}

	.banner-simple:after {
		position: absolute;
		content: '';
		top: 0;
		right: 0;
		width: 100vw;
		height: 95px;
		background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.30)), to(rgba(0, 0, 0, 0.00)));
		background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
		background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
		background: -o-linear-gradient(top, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
	}
}


@media all and (min-width: 601px) and (max-width: 900px) {
	.site-banner.banner-size-large {
		min-height: 600px;
	}

	.banner-menu-transparent:before {
		width: 100vw;
		height: 600px;
		max-width: 580px;
	}

	.card-groups.slick-slider .slick-next.slick-arrow {
		right: 9.5%;
	}

	.site-banner.banner-size-medium {
		min-height: 270px;
	}

	.banner-simple:before {
		max-width: 540px;
	}

	.vc_row.content-specification>.wpb_column {
		width: 50%;
	}

}


@media all and (max-width: 600px) {
	.site-banner:not(.banner-size-medium):not(.banner-menu-transparent) {
		min-height: 450px;
	}

	.site-banner.banner-menu-transparent {
		min-height: 515px;
	}

	.site-banner.banner-size-medium {
		min-height: 270px;
	}

	.site-banner .container {
		margin-top: auto;
	}

	.site-banner .content-banner p {
		display: none;
	}

	.site-banner:before {
		top: unset;
		bottom: 0;
		background-image: url(/wp-content/themes/whello/assets/images/pattern/pattern-banner-mobile.svg);
	}

	.site-banner.banner-size-large:before {
		height: 350px;
		background-position: bottom;
	}

	.site-banner.banner-size-medium:before {
		height: 270px;
		background-position: top;
	}

	.site-banner.banner-size-medium {
		background-position: left !important;
	}

	.wrapper-btn-group-banner {
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		   -moz-box-orient: vertical;
		   -moz-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}

	.wrapper-btn-group-banner a {
		width: -webkit-fit-content;
		width: -moz-fit-content;
		width: fit-content;
	}

	.wrapper-btn-group-banner {
		margin: -6px;
	}

	.wrapper-btn-group-banner .btn-banner {
		margin: 6px;
	}

}

@media all and (min-width: 401px) and (max-width: 600px) {
	.site-banner.banner-size-large:before {
    	height: 100%;
	}
}