body { 
  background-color: #FFF8EB;
}

h1, h2, h3, h4, h5, h6 {
    color: #27327F;
}

.header__top {
	background-color: transparent;
}

.header {
	background-color: transparent;
}

.header__bottom {
  background-color: rgb(255 255 255 / 60%);
}

footer.footer:before {
	display: none;
}

footer.footer {
	background-image: url("/sites/default/files/2024-03/playbrain-bg-footer.png");
	background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.footer .wyeth_footer_block__wrapper {
	max-width: 980px;
  margin: 0 auto;
  color: #fff;
}

.footer .wyeth_footer_block__wrapper_menu ul li a {
	color: #fff;
}

.page-node-type-complex-page .content-area {
    margin-top: 3rem;
}

.hero .logo {
	margin-right:auto;
	margin-left:auto;
	margin-bottom:1rem;
}


.hero .qr-codes,
.hero .links {
	margin-top:1rem;
}

/*.hero-area-inner .hero-area-image-text {*/
/*	position: unset;*/
/*  width: 100%;*/
/*  transform: none;*/
/*  padding: 0;*/
/*}*/

/*.hero-area-inner .hero-area-image-text .links.hide-desktop {*/
/*    position: absolute;*/
/*    top: 3rem;*/
/*    right: 3rem;*/
/*}*/
/*.hero-area-inner .hero-area-image-text .links.hide-desktop img,*/
/*.hero-area-inner .hero-area-image-text .qr-code img {*/
/*    border-radius: 0;*/
/*    object-fit: contain;*/
/*    min-height: auto;*/
/*}*/

/*.hero-area-inner .hero-area-image-text .qr-codes {*/
/*	position: absolute;*/
/*  right: 2rem;*/
/*	top: 2rem;*/
/*  gap: 2rem;*/
/*	font-size: 0.75rem;*/
/*  line-height: 1;*/
/*}*/

/*.hero-area-inner .hero-area-image-text .qr-codes .qr-code img {*/
/*    max-width: 100px;*/
/*}*/

/*.hero-area-inner .banner-text {*/
/*	  position: absolute;*/
/*    top: 5rem;*/
/*    left: 3rem;*/
/*    width: 300px;*/
/*    font-weight: 500;*/
/*    text-align: left;*/
/*    font-size: 1.125rem;*/
/*}*/

/*.hero-area-inner .banner-text .logo {*/
/*	  width: 100%;*/
/*    height: auto;*/
/*    object-fit: contain;*/
/*    border-radius: 0;*/
/*    min-height: auto;*/
/*    margin-bottom: 2rem;*/
/*}*/

.page-component-items.item-3,
.page-component-items.item-4 {
	margin-bottom: 0;
}

.roundGradBox {
  	background-image: url("/sites/default/files/2024-03/playbrain-bg-footer.png");
		background-size: cover;
	  background-position: center;
	  background-repeat: no-repeat;
    border-radius: 20px;
    margin: 2rem auto;
}

.roundGradBox h3 {
    color: white;
    margin: 1rem 0;
    padding: 2rem 5rem 0 5rem;
    text-align: center;
}

.roundGradBox p {
	   padding: 0 5rem 1.25rem 5rem;
    color: #fff;
    text-align: center;
}

.roundWhiteBox {
    display: flex;
    background-color: white;
    border-radius: 0 0 18px 18px;
    text-align: left;
    padding: 1rem 0;
}

.roundWhiteBox>div:first-of-type {
    box-shadow: 1px 0px 0px 0px #2A3581;
}

.roundWhiteBox>div {
    padding: 0 3rem 1rem;
    width: 50%;
}

.roundWhiteBox h3 {
    color: #2F3A74;
    margin: 0 0 1rem;
    padding: 1rem 0 0;
    text-align: left;
}

.roundWhiteBox li {
    list-style: disc;
}

.references {
	font-size: 0.875rem;
	line-height: 1.5;
}

.references,
.references a {
	color: rgba(0, 0, 0, 0.60);
}

.block-1 .container {
	display: flex;
	margin-bottom: 3rem;
}

.block-1 {
	 color: #27327F;
		font-size: 1.125rem;
		font-weight: 600;
		line-height: 1.75;
		text-align: center;
}

.block-1 .container .left-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    text-align: left;
  	padding-top: 3rem;
  	flex-basis: 40%;
}

.block-1 .container .right-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3rem;
    flex-basis: 60%;
}

.block-1 .container .right-block img:last-child {
	width: 90%;
}

.block-2.benefits {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
}

.block-2.benefits .benefits__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-basis: calc((100% - 4rem) / 3);
}

.block-2.benefits .benefits__item:nth-child(1) h3 {
	color: #D73333;
	font-weight: 600;
}

.block-2.benefits .benefits__item:nth-child(2) h3 {
	color: #007955;
	font-weight: 600;
}

.block-2.benefits .benefits__item:nth-child(3) h3 {
	color: #6148A8;
	font-weight: 600;
}

.block-2.benefits .benefits__item img {
	height: 6.5rem;
  width: auto;
}

.block-2.benefits .benefits__item .image {
	margin-bottom: 1.5rem;
}

.CallToAction {
	text-align: center;
}

.block-5 .CallToAction h3 {
	color: #fff;
}

.block-6 .carousel__snapper {
	text-align: center;
}

.block-6 .carousel__snapper img {
	border-radius: 16px;
	border: 8px solid #FFF;
}

.qr-codes  {
	display: flex;
  gap: 5rem;
  justify-content: center;
}

.block-5 .qr-code {
	color: #fff;
}

.qr-code img {
	max-width: 200px;
	height: auto;
}

.qr-code img.image-store {
	margin-top: 0.75rem;
}

.links.hide-desktop {
	display: none;
}

@media (min-width: 768px) {
	.paragraph--type--np-text.wide-content--np-text.wide-background, 
	.paragraph--type--np-tint-integration.wide-content--np-text.wide-background {
    width: 100vw;
	}
}

@media (max-width: 600px) {
	.hero-area-inner .banner-text {
		top: 1rem;
    left: 1rem;
    width: 180px;
    font-size: 0.875rem;
    line-height: 1.6;
	}
	
	.hero-area-inner .banner-text .logo {
		margin-bottom: 1rem;
		width: 70%;
	}
	
	.hero-area-inner .hero-area-image-text img.code {
		max-width: 6rem !important;
    top: 1rem;
    right: 1rem;
    height: 6rem;
	}
}

@media (max-width: 768px) {
	.block-1 .container,
	.block-2.benefits,
	.roundWhiteBox {
		flex-direction: column;
	}
	
	.block-1 .container .left-block {
		padding-top: 0;
	}
	
	.roundGradBox h3 {
		padding: 2rem 1rem 0 1rem;
	}
	
	.roundGradBox p {
		padding: 0 1rem 1rem 1rem;
	}
	
	.roundWhiteBox>div:first-of-type {
    box-shadow: none;
	}
	
	.roundWhiteBox>div {
    padding: 0 1rem 1rem;
    width: 100%;
	}
	
	.hero-area-inner .hero-area-image-text .links.hide-desktop {
		top: auto;
    right: auto;
    bottom: 1rem;
    left: 0;
	}
}

@media (min-width: 600px) and (max-width: 1024px) {
	.hero-area-inner .hero-area-image-text .links.hide-desktop {
		top: auto;
    right: auto;
    bottom: 1rem;
    left: 1.5rem;
	}
	
	.hero-area-inner .banner-text {
		top: 1rem;
		width: 230px;
	}
	
	.hero-area-inner .hero-area-image-text img.code {
		max-width: 8rem !important;
    top: 1rem;
    right: 1rem;
    height: 8rem;
	}
}

@media (max-width: 1024px) {
	.CallToAction h3 {
		display: none;
	}
	.links.hide-desktop {
		display: flex;
		justify-content: center;
    gap: 2rem;
    max-width: 400px;
    margin: 0 auto;
	}
	
	.links.hide-desktop .link-store {
		width: 40%;
	}
	
	
	.links.hide-desktop .link-store img {
		width: 100%;
	}
	
	.qr-codes {
		display: none;
	}
}

.slick-arrow.slick-next:before {
	content: "\eac9";
	position: unset;
	width: auto;
	height: auto;
	font-family: "Material Symbols";
  font-weight: normal;
	font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  background: none;
  transform: none;
  transform: none;
  text-indent: initial;
  font-size: 3rem;
  color: #fff;
  opacity: 1;
}

.slick-arrow.slick-prev:before {
	content: "\eac3";
	position: unset;
	width: auto;
	height: auto;
	font-family: "Material Symbols";
  font-weight: normal;
	font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  background: none;
  transform: none;
  text-indent: initial;
  font-size: 3rem;
  color: #fff;
  opacity: 1;
}

.slick-arrow.slick-next,
.slick-arrow.slick-prev {
		width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: #27327F;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    opacity: 1;
    transition: 0.5ms;
  	top: calc((100% - 4rem) / 2);
   box-shadow: 0px 8px 24px 0px #EFE4CE;
}

.slick-arrow.slick-next {
	right: -3rem;
}

.slick-arrow.slick-prev {
left: -3rem;
}

.slick-dots {
	display: flex !important;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.5rem !important;
}

.slick-dots li {
	margin: 0;
  width: 1.5rem;
	height: 1.5rem;
}

.slick-dots li button {
  	border: 3px solid #27327F;
  	width: 1.5rem;
  	height: 1.5rem;
}

.slick-dots li.slick-active button:before {
	display:none;
}

.slick-dots li.slick-active button {
	background: #27327F;
}

.playbrain-slider.paragraph {
	  width: 70%;
    margin: 0 auto;
    padding: 0;
    border-radius: 0;
} 

.playbrain-slider .slick-caption {
	  border-radius: 24px;
    background: radial-gradient(50% 50% at 50% 50%, #FFF8EB 0%, #EECF9B 100%);
    padding: 1rem;
    width: 100%;
    margin: 1.5rem auto 0 auto;
    text-align: center;	
}

.playbrain-slider .slick-slide img {
   box-shadow: 0px 8px 24px 0px #EFE4CE;
}


@media (max-width: 1024px) {
	.playbrain-slider .slick-slide {
		padding: 0 1.5rem;
	}
}

@media (min-width: 1024px) {
	.slick-arrow.slick-next:hover,
	.slick-arrow.slick-prev:hover {
		opacity: 0.9;
	}
	
	.playbrain-slider .slick-caption {
    width: 90%;
	  transition: 0.5s;
	  opacity: 0;
	}
	
	.playbrain-slider .slick-slide.slick-current.slick-active.slick-center .slick-caption {
		opacity: 1;
	}
	
	.playbrain-slider .slick-slide {
		margin: 0;
		transform: scale(0.75);
	  transition: 0.5s;
	}
	
	.playbrain-slider .slick-slide.slick-current.slick-active.slick-center {
	  transform: scale(1);
	}
}


/* css carousel */
.carousel__snapper h3 {
    margin: 10px 1rem 20px;
    text-align: center;
}

.carousel__snapper p {  margin: 0; } 

ol.carousel__viewport {
    display: flex;
    gap: 2rem;
    padding-bottom: 1rem;
}

a.carousel__next,
a.carousel__prev {
    display: none;
    text-decoration:none;
}

.carousel__snapper video { 
  border-radius: 10px; 
  box-shadow: 0px 3px 4px 0px rgb(0 0 0 / 30%);
  
}

@keyframes tonext {
  75% {
    left: 0;
  }
  95% {
    left: 100%;
  }
  98% {
    left: 100%;
  }
  99% {
    left: 0;
  }
}

@keyframes tostart {
  75% {
    left: 0;
  }
  95% {
    left: -300%;
  }
  98% {
    left: -300%;
  }
  99% {
    left: 0;
  }
}

@keyframes snap {
  96% {
    scroll-snap-align: center;
  }
  97% {
    scroll-snap-align: none;
  }
  99% {
    scroll-snap-align: none;
  }
  100% {
    scroll-snap-align: center;
  }
}
ol, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 768px) {
	.fixed-section-button {
		display: none;
	}
}

.carousel__viewport::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.carousel__viewpor {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}


@media screen and (max-width: 767px) {
  .carousel {
    position: relative;
    filter: drop-shadow(0 0 10px #0003);
    perspective: 100px;    
    width: 100%;
    margin: 0 auto;
  }
  
  .carousel__viewport {
    position: unset;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: scroll;
    /*counter-reset: item;*/
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
  }
  
  .carousel__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    padding: 0 4rem;
    /*background-color: #f99;*/
    /*counter-increment: item;*/
  }
  
  .carousel__slide:nth-child(even) {
    /*background-color: #99f;*/
  }
  
  .carousel__slide:before {
    /*content: counter(item);*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-40%,70px);
    color: #fff;
    font-size: 2em;
  }
  
  .carousel__snapper {
    position: realative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    scroll-snap-align: center;
  }

  .carousel:hover .carousel__snapper,
  .carousel:focus-within .carousel__snapper {
    animation-name: none;
  }
  
  .carousel__navigation {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
  }
  
  .carousel__navigation-list,
  .carousel__navigation-item {
    display: inline-block;
  }
  
  .carousel__navigation-button {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-color: #333;
    background-clip: content-box;
    border: 0.25rem solid transparent;
    border-radius: 50%;
    font-size: 0;
    transition: transform 0.1s;
  }
  
  .carousel__prev {
  	position: absolute;
    text-indent: -9999px;
    text-decoration: none;
    left: 0;
  	width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: #27327F;
    display: flex !important;
    justify-content: center;
    align-items: center;
    color: #fff;
    opacity: 1;
    transition: 0.5ms;
    top: 25%;
    box-shadow: 0px 8px 24px 0px #EFE4CE;
  }
  
  .carousel__prev::before {
  	content: "\eac3";
    position: unset;
    width: auto;
    height: auto;
    font-family: "Material Symbols";
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    background: none;
    transform: none;
    text-indent: initial;
    font-size: 2rem;
    color: #fff;
    opacity: 1;
  }
  
  .carousel__next {
  	position: absolute;
    text-indent: -9999px;
    text-decoration: none;
  	right: 0;
  	width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: #27327F;
    display: flex !important;
    justify-content: center;
    align-items: center;
    color: #fff;
    opacity: 1;
    transition: 0.5ms;
    top: 25%;
    box-shadow: 0px 8px 24px 0px #EFE4CE;
  }
  
  .carousel__next::before {
  	content: "\eac9";
    position: unset;
    width: auto;
    height: auto;
    font-family: "Material Symbols";
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    background: none;
    transform: none;
    transform: none;
    text-indent: initial;
    font-size: 2rem;
    color: #fff;
    opacity: 1;
  }
  
  .slick-arrow.slick-next {
  	right: -2rem;
  	width: 3rem;
    height: 3rem;
  }
  
  .slick-arrow.slick-prev {
  	left: -2rem;
  	width: 3rem;
    height: 3rem;
  }
  
  .slick-arrow.slick-prev:before,
  .slick-arrow.slick-next:before {
  	font-size: 2rem;
  }
}

.playbrain-activity h2 {
	text-align: center;
}

.playbrain-activity .slick-slide {
	padding: 0 1rem;
}

.playbrain-activity .slick-slide img {
	border-radius: 16px;
  border: 8px solid #FFF;
}

.playbrain-activity .slick-slide .slick-caption {
	margin-top: 1.5rem;
}

@media (max-width: 1024px) {
	.playbrain-activity .slick-slide {
		padding: 0 1.5rem;
	}
	
	.paragraph.playbrain-activity {
	 width: 85%;
    margin: 0 auto;
    padding: 0;
	}
}

@media (min-width: 1024px) {
	.paragraph.playbrain-activity {
		padding: 0;
    width: calc(100% + 2rem);
    margin-left: -1rem;
	}
	
	.paragraph.playbrain-activity .slick-track {
		margin: 0;
	}
}

aside.carousel__navigation {
	display: none;
}

@media (min-width: 1500px) {
	.hero-area-inner .banner-text {
		width: 400px;
	}
	
	.hero-area-inner .hero-area-image-text .qr-codes {
	  gap: 3rem;
	}
	
	.hero-area-inner .hero-area-image-text .qr-codes .qr-code img {
	   max-width: 150px;
	}
}


@media (hover: hover) {
  /*.carousel__snapper {*/
  /*  animation-name: tonext, snap;*/
  /*  animation-timing-function: ease;*/
  /*  animation-duration: 4s;*/
  /*  animation-iteration-count: infinite;*/
  /*}*/

  .carousel__slide:last-child .carousel__snapper {
    animation-name: tostart, snap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__snapper {
    animation-name: none;
  }
}

ol.carousel__viewport li {
    flex-basis: 100%;
  
}

/*End CSS Carousel */
#np_text-33476,
#np_text-33474 {
	padding: 3rem;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 248, 235, 0.40) 0%, rgba(238, 207, 155, 0.40) 100%);
  border-radius: 1.5rem;
}

#np_text-33479 {
	background: url(https://www.mamaclub.wyethnutrition.hk/sites/default/files/paragraphs-behavior-background/playbrain-bg-footer.png) no-repeat center center;
  background-size: cover;
  border-radius: 1.5rem;
}

@media (max-width: 768px) {
	#np_text-33476,
	#np_text-33474 {
		padding: 3rem 1.25rem;
	}
}