.site-banner {
	position: relative;
	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;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: 100%;
	overflow: hidden;
	margin-top: -webkit-calc(var(--height-header) * -1 );
	margin-top: -moz-calc(var(--height-header) * -1 );
	margin-top: calc(var(--height-header) * -1 );
}

.site-banner:before {
	content: '';
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 65%;
	z-index: 1;
	pointer-events: none;
	background: -webkit-gradient(linear, left bottom, left top, from(rgba(242, 239, 228, 0)), color-stop(43%, rgba(242, 239, 228, 1)), to(rgba(242, 239, 228, 1)));
	background: -webkit-linear-gradient(bottom, rgba(242, 239, 228, 0) 0%, rgba(242, 239, 228, 1) 43%, rgba(242, 239, 228, 1) 100%);
	background: -moz-linear-gradient(bottom, rgba(242, 239, 228, 0) 0%, rgba(242, 239, 228, 1) 43%, rgba(242, 239, 228, 1) 100%);
	background: -o-linear-gradient(bottom, rgba(242, 239, 228, 0) 0%, rgba(242, 239, 228, 1) 43%, rgba(242, 239, 228, 1) 100%);
	background: linear-gradient(0deg, rgba(242, 239, 228, 0) 0%, rgba(242, 239, 228, 1) 43%, rgba(242, 239, 228, 1) 100%);
}

.site-banner:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
  	-webkit-backdrop-filter: blur(3px);
  	backdrop-filter: blur(3px);
}

.site-banner .media-banner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.site-banner .media-banner img {
	height: 100%;
}

.site-banner .content-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;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	text-align: center;
	width: 100%;
	max-width: 810px;
	margin: 0 auto;
	color: var(--purple);
	position: relative;
	z-index: 3;
	font-size: var(--text-md);
}

.wrapper-label-news,
.wrapper-label-bottom,
.icon-bottom-banner {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.wrapper-label-news {
	margin-bottom: 26px;
	padding: 7px 8px;
	padding-right: 23px;
	background-color: var(--purple-5);
	-webkit-border-radius: var(--rounded-full);
	   -moz-border-radius: var(--rounded-full);
	        border-radius: var(--rounded-full);
	overflow: hidden;
}

.wrapper-label-news > span {
	display: inline-block;
	font-weight: 600;
	line-height: var(--lineheight-s);
	font-size: var(--text-xs);
}

.wrapper-label-news > span:first-of-type {
	background-color: var(--white);
	padding: 5px 9px;
	color: var(--light-purple);
	-webkit-border-radius: var(--rounded-full);
	   -moz-border-radius: var(--rounded-full);
	        border-radius: var(--rounded-full);
}

.wrapper-label-news > span:last-of-type {
	padding-left: 8px;
	color: var(--purple);
	opacity: 0.5;
}

.wrapper-label-bottom {
	margin-top: 31px;
	font-size: var(--text-xs);
	opacity: 0.5;
}

.icon-bottom-banner {
	margin: -4px;
	padding-left: 14px;
}

.icon-bottom-banner a {
	margin: 4px;
	width: 24px;
	height:24px;
	display: inline-block;
}

.media-frame-ipad {
	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;
}

.media-frame-ipad-inner {
	margin-top: 52px;
	max-width: 960px;
    position: relative;
    width: 100%;
    height: 555px;	
	z-index: 2;
}

.frame-ipad {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	-o-object-fit: contain;
	   object-fit: contain;
	-o-object-position: bottom;
	   object-position: bottom;
}

.content-banner .button-group-banner {
	margin: -9px;
	margin-top: 35px;
}

.content-banner .button-group-banner .whbutton-wrapper {
	margin: 9px;
}

 .button-group-banner .cta-whbutton .label-cta {
	font-weight: 600;
}
.button-group-banner .cta-whbutton {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);	
}

.media-inner-frame {
	--rounded: 20px;
	position: absolute;
	top: 36px;
	left: 36px;
	width: -webkit-calc(100% - 72px);
	width: -moz-calc(100% - 72px);
	width: calc(100% - 72px);
	height: 95%;
	-webkit-border-top-left-radius: var(--rounded);
	   -moz-border-radius-topleft: var(--rounded);
	        border-top-left-radius: var(--rounded);
	-webkit-border-top-right-radius: var(--rounded);
	   -moz-border-radius-topright: var(--rounded);
	        border-top-right-radius: var(--rounded);
	background-color: var(--light-gray);
	z-index: 2;
}

.pattern-frame {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	position: absolute;
	z-index: 3;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	   -moz-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	width: 100%;
	height: -webkit-fit-content;
	height: -moz-fit-content;
	height: fit-content;
	pointer-events: none;
}

.pattern-frame-top-left {
	width: 212px;
    height: 154px;
    position: relative;
    top: -85px;
    left: -75px;
}

.pattern-frame-top-right {
	position: relative;
	width: 316px;
	height: 316px;
	top: -152px;
	right: -201px;
}

.pattern-frame-top-right span {
	--text-md: 17px;
	position: absolute;
	color: var(--purple);
	top: 50%;
	left: 50%;
	z-index: 3;
	font-size: var(--text-md);
	font-family: var(--fontfamily-playChickens);
	-webkit-transform: translate(-50%, -50%);
	   -moz-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	     -o-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	line-height: var(--lineheight-xs);
	text-align: center;
}

.pattern-frame-top-right span strong {
	--text-2xl: 30px;
	font-size: var(--text-2xl);
}

.site-banner.banner-frame .media-inner-frame > ul {
	list-style-type: none;
	padding-left: 0;
	height: 100%;
}

.site-banner.banner-frame .media-inner-frame > ul li +li {
	margin-top: 0;
}

.site-banner.banner-frame .media-inner-frame > ul > .slick-list >.slick-track> li,
.site-banner.banner-frame .media-inner-frame > ul >  .slick-list >.slick-track> li > img,
.site-banner.banner-frame .media-inner-frame .slick-list,
.site-banner.banner-frame .media-inner-frame .slick-track  {
	height: 100%;
}

.media-inner-frame .slick-slider {
    --position-arrow: -webkit-calc((6vw - 32px) + var(--padding-container));
    --position-arrow: -moz-calc((6vw - 32px) + var(--padding-container));
    --position-arrow: calc((6vw - 32px) + var(--padding-container));
}

.media-inner-frame .slick-slider.slick-dotted .slick-arrow {
	top: unset;
	bottom: 216px;
}

.media-inner-frame .slick-dots {
	position: absolute;
    top: 271px;;
    -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;
    width: 10px;
	right: -webkit-calc(5.8vw + var(--padding-container));
	right: -moz-calc(5.8vw + var(--padding-container));
	right: calc(5.8vw + var(--padding-container));
}

.media-inner-frame .slick-slider .slick-dots li:not(:last-child) {
	margin-right: 0;
	margin-bottom: 10px;
}

.site-banner.banner-simple {
	padding-bottom: 80px;
}


@media all and (min-width: 901px) {
	.site-banner {
		padding-top: -webkit-calc(65px + var(--height-header));
		padding-top: -moz-calc(65px + var(--height-header));
		padding-top: calc(65px + var(--height-header));
	}

	.site-banner.banner-frame {
		min-height: 600px;
	}

	.site-banner.banner-simple {
		min-height: 420px;
	}
}

@media all and (min-width: 901px) and (max-width: 1299px) {
	.pattern-frame-top-right {
        width: 293px;
        right: -95px;
    }
}

@media all and (max-width: 900px) {
	.site-banner .content-banner {
		padding-top: -webkit-calc(48px + var(--height-header));
		padding-top: -moz-calc(48px + var(--height-header));
		padding-top: calc(48px + var(--height-header));
	}
}

@media all and (min-width: 601px) and (max-width: 900px) {
    .media-frame-ipad-inner {
        height: 54vw;
    }
	
	.pattern-frame-top-left {
		left: -48px;
	}

	.pattern-frame-top-right {
		right: -90px;
	}

	.site-banner:before {
		height: 70%;
	}
}

@media all and (max-width: 600px) {
	.site-banner:before {
		height: 85%;
	}

    .media-frame-ipad-inner {
        height: 50vw;
    }

	.pattern-frame-top-left {
		width: 175px;
		height: 89px;
		position: relative;
		top: -43px;
		left: -42px;
	}
	.pattern-frame-top-right {
		position: relative;
        min-width: 210px;
        max-width: 210px;
        height: 210px;
        top: -74px;
        right: -68px;
	}

	.pattern-frame-top-right span {
		--text-md: 15px;
	}

	.pattern-frame-top-right span strong {
		--text-2xl: 22px;
	}	
	
}

@media all and (min-width: 481px) and (max-width: 600px) {
	    .media-inner-frame {
        --rounded: 8px;
        top: 32px;
        left: 36px;
        width: calc(100% - 72px);
    }
}

@media all and (max-width: 480px) {
	    .media-inner-frame {
        --rounded: 8px;
		top: 18px;
		left: 18px;
		width: calc(100% - 36px);
    }
}