/* section with blue stripe */ 
#content .section.bg-dkblue{background-color: #002449;}
#content .section.bg-ltblue{background-color: #004677;}
#content .section.bg-dkblue p, #content .section.bg-dkblue p.arrow a, #content .bg-dkblue p a, #content .section.bg-dkblue h3{color:#ffffff;}
#content .section.bg-dkblue p.arrow a {font-weight: 600 !important;}	
#content .section.bg-dkblue hr.ltblue {margin: 16px auto; background-color: #009DDB; height: 1px;}
#content .section.bg-ltblue p, #content .section.bg-ltblue h2 {color:#ffffff;}


/* 2024-marketing-outlook-report  */
#content .section.bg-dkblue ul {list-style: none;}
#content .section.bg-dkblue ul li{cursor:pointer;padding-left: 20px;}
#content .section.bg-dkblue ul li a { color: #ffffff; text-decoration:none;}
/* Template style overide */
#content .section.bg-dkblue ul li:before{display:none;}
#content .section.bg-dkblue ul li a:before {display: block; content: '\25b8'; color: #238FBE; position: absolute; margin-left: -24px;transition: all .25s ease-in-out;top: 0px;}
#content .section.bg-dkblue ul li a:hover:before {transform: scale(1.5);}


#content .section.bg-dkblue p a{color:#ffffff; font-weight:unset;}
#content .section.bg-dkblue p a.arrow {font-weight:800; color:#238FBE;}


#content .section.bg-dkblue h4{color:#009DDB;font-weight:600;text-transform:uppercase;font-size: 1.375rem; margin-bottom:8px;}
#content p.larger{font-size: 1.375rem;}



/* report pages order list */
#content ol {list-style: none; margin: 0px 0px 16px 0px; padding: 0px;}
#content ol.number{counter-reset: mycounter;}
#content ol li {list-style: none;padding: 0px;position: relative; }
#content ol.number li {display: flex;align-items: center;padding-left: 48px;margin-bottom: 16px;}
#content ol.number li a{text-decoration:underline;font-weight: unset;color:#009DDB;}
#content ol.number li a:hover{text-decoration:none;}
#content ol.number li:last-child{margin-bottom:0px;}
#content ol.number li:before{content: counter(mycounter); counter-increment: mycounter;font-size: 2rem;font-weight: 700; font-family: Montserrat;width: 32px; text-align: right; display: inline-block;vertical-align: middle;position: absolute;left: 0;}  
#content ol.number.ltblue li:before{color: #009DDB;}


/* 2024-cpg-and-grocery-consumer-report */
#content .shopper-strategies ul{margin-bottom:25px;}
#content .shopper-strategies img{border: 3px dotted #a4a4a4;}


/* report page report vitals */
.vitals{border:1px Solid #009DDB;padding:32px;}
.vitals h2{border-bottom:1px Solid #009DDB;font-size:1.75rem;padding-bottom:8px;}
.vitals p strong{font-size:1.25rem;font-family:Montserrat;margin-right:8px;}
#content .vitals ul li{margin-left: 35px;}


/* Dounut chart */  
.cchart .circle-bg {fill: none;stroke:#002449; stroke-width: 2.8px;}
.cchart .circle{fill: none;stroke-width: 2.8; stroke-linecap: round;}
.cchart .circle.ltblue{stroke: #00B3FA;}
.cchart .percentage {font-size: .5rem;text-anchor: middle;font-weight: bold;fill: #000;}
.cchart.animated .circle{animation: progress 1s linear forwards;}
@keyframes progress {0% {stroke-dasharray: 0 100; }}
.cchart {margin: 0 auto;width: 200px;}



/* angle with blue stripe */
section.angledivider {position: relative;}
section.angledivider .angle {position:absolute;right:0px;top:50%;transform: translateY(-50%);height:200%;}
section.angledivider .angle svg{height:250px; fill: none;stroke: #009DDB;stroke-linecap: square;stroke-miterlimit: 10;stroke-width:0.2px;height:100%;}

#content .section.angledivider p, #content p.arrow a {font-size:1rem !important; text-transform:uppercase; font-weight:unset !important;}
#content .section.angledivider h4 {color:#ffffff; font-size: 1.5rem; font-weight:300; text-transform:none; margin-bottom:16px;}
#content .section.angledivider p.arrow a:after {width: 14px;top:0;}
#content .section.angledivider p.arrow a, #content .section.angledivider p.arrow a:after {font-weight:unset !important;}
#content .section.angledivider p:first-child {letter-spacing: 2px;}

/* #content .section.angledivider p.arrow a:after {font-weight:unset !important;} */


/* numbers with rectangle box animation */
#content h3.small{font-size:1.25rem;margin-bottom:8px;}
#content hr{margin:48px auto;}
.col_full + .col_full{margin-top:32px;}


/* horizontal chart label placed on top */
.hchart{display:table;position:relative;width:100%;margin-bottom:16px;}
.hchart label{font-size:1rem;color:#002449;}
.hchart .hchart_item{display:table-row;}
.hchart_label{display:table-cell;vertical-align:middle; width:240px;padding:8px 0;text-align:right;}
.hchart_label label{display:block;margin-right:8px;}
.hchart_value{display:table-cell;vertical-align:middle;padding:4px 0;}
.hchart_value span{background-color:#002449;height:36px;display:block;float:left;color:#fff;line-height:36px;font-weight:bold;text-align:right;font-size:1.1875rem; width:0%;padding:0;word-break: break-all;transition:all 1s ease-in-out;}
.hchart_value span label{display:inline;color:#fff;font-size:1.1875rem;font-weight:bold;padding-right:8px;}
.hchart_value span.brtblue {background: #004677; background: linear-gradient(90deg,rgba(0, 70, 119, 1) 0%, rgba(0, 179, 250, 1) 50%, rgba(105, 203, 208, 1) 100%);}
	 

/* horizontal chart lable placed on left */
.hchart.stack .hchart_item{display:block;}
.hchart.stack .hchart_label{display:block;width:100%;text-align:left;line-height:1.25;padding-bottom:0px;}
.hchart.stack .hchart_value{display:block;height:32px;margin-bottom:16px;background-color:#e9e9e9;background-color:transparent;}

.hchart.stack .hchart_value span strong{float: left;font-size: 1rem; margin-left: 10px;}
.hchart.stack .hchart_value span.graphAnimate.animated strong{display: block;}
.cgp-grocery-report .hchart.stack .hchart_value + .hchart_label {margin-bottom:16px;}	
#content .hchart.stack .hchart_item p {font-size:1rem;}
.hchart.stack.top-factor-hchart .hchart_value, .hchart.stack.video-screens .hchart_value{height: 36px; padding: 0; margin-bottom:0;}




.hchart_value span.berry{background-color:#A50050;}
.hchart_value span.ltblue{background-color:#238fbe;}
.hchart_value span.dkblue{background-color:#004677;}
.hchart_value span.teal{background-color:#13958d;}
.hchart_value span.green{background-color:#689400;}
.hchart_value span.brown{background-color:#776E64;}


/* Vertical chart start */



.vchart:after{content:'';clear:both;float:none;display:block;}
.vchart_item {display: inline-block; width: calc(20% - 12.8px); text-align: center; float: left; margin-right: 16px;}
.vchart_item:last-child{margin-right:0px;}
.vchart_value span {transition: all 1s ease-in-out;}
.vchart_value span {display: block; background-color: #002449; height: 300px; position: relative; margin: 0px auto; max-width: 48px; top: 100%;}
.vchart_value span.ltblue {background-color: #009DDB;}
.vchart_value span.animated label {color:#000000;}

/*
.vchart_label label.icon span{display:none;}
.vchart_label label.icon.teal svg{fill:#002449;display:block;height:48px;width:48px;margin:0px auto;margin-top:12px;}
*/

.cgp-grocery-report .vchart_item {width: calc(33.33% - 12.8px);}
.cgp-grocery-report .vchart {margin-bottom: 8px; position: relative; top: -36px;}
.cgp-grocery-report .vchart_value {height: 300px; position: relative; overflow: hidden;}
.cgp-grocery-report .vchart_label {line-height: 1.25; margin-top: 6px;}


.cgp-grocery-report .vchart_value span label {font-family: Montserrat; font-size: 1.25rem; font-weight: bold; color: #002449; line-height: 32px; position: absolute; transition: all 1s ease-in-out; opacity: 0; display: block; text-align: center; top: 0;width: 100%;}
.cgp-grocery-report .vchart_value span.animated label {top: -32px;opacity: 1;}


/* 2024-cpg-and-grocery-consumer-report page*/
#content .cgp-grocery-report .vchart + p {text-align:center;color:#009DDB;font-size:1.188rem;position:relative;padding-top:16px;margin-bottom:.5rem;line-height:1.25;}
#content .cgp-grocery-report .vchart + p + p {font-size:0.875rem; text-align:center;}
#content .cgp-grocery-report .vchart + p:before {content: "\2193"; font-size: 2rem;line-height: 1.2;display: block; position: absolute; top:-35px;width: 20px;text-align:center;left:50%;margin-left:-10px;color:#000;}


/* transperant layer on image */
.imgbox {padding: 0;background: url(/img/2024-marketing-outlook-report/managing-security.jpg);background-position: center;background-repeat: no-repeat;background-size: cover;}
.imgbox .transparent {background-color: #009DDB; color:#ffffff; opacity: 0.9;padding: 48px; text-align:center}
.imgbox p strong {font-size: 1.4rem;}
#content .imgbox p {color:#ffffff; margin:0;font-size:1.25rem;}
#content .imgbox p.large {font-size:1.5rem;}
.transparent .nb_large + p {margin: 0 0 16px 0;}
.nb_large{font-size:4.5rem;line-height:72px;font-weight:bold;font-family:Montserrat;}
.nb_large + p{max-width:400px;/*margin:0px auto;margin-top:16px;*/}
#content .nb_large.ltblue {color:#009DDB;}



/* report page expert take section */
#content .callout {background-color: #f2f2f2;padding: 1rem;}
#content .callout div {display: flex;align-items: center;}
#content .callout div img {display: block; height: 96px; width: 96px; border-radius: 50%; border: 4px Solid #002449; float: left; margin-right: 16px;}
#content .callout div img.ltblue {border-color: #009DDB;}
#content .callout p:last-child {margin-bottom:0;}

/* foot note */
#content .footnote {font-size: 14px;} 


/*Numbers with percentage start*/	  
/* .nb_large + p {margin: 0 0 16px 0;} */
.nb_medium {font-size: 2rem; line-height: 48px; font-weight: bold; font-family: Montserrat;}
#content .nb-right {display: flex; position: relative; align-items: center;margin-bottom: 10px;}
#content .nb-right .nb_medium {padding-right: 30px; width:100px; text-align:left;}
#content .nb-right .nb_tright {flex:1;} 
#content .nb-right .nb_tright p {margin:0;}


/*Numbers in circle with percentage*/
.numblock {width: 185px; height: 185px; padding: 22px 16px; border-radius: 50%; margin: 10% auto; background-color: #238fbe;}
.numblock .nb_large {color: #ffffff; margin: 22% 0;}


/*Box with traingel */
.cgp-grocery-report .box {padding: 13%; text-align:center; color: #FFFFFf;}
.cgp-grocery-report .box.ltblue {background-color:#009DDB;}
#content .cgp-grocery-report .box h3 {color:#ffffff;margin-bottom:0; font-size: 2.7rem; font-weight: 600;}
#content .cgp-grocery-report .box h3 + p {font-size: 1.2rem;line-height: 0.5;}	
.cgp-grocery-report .box .triangle { width: 0; height: 0; position:relative;top: -8px; left: 40%; border-left: 20px solid transparent; border-right: 20px solid transparent;border-bottom: 40px solid #A50050;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;border-top-left-radius: 30px;border-top-right-radius: 10px;border-radius:0px;}  
.cgp-grocery-report .box .triangle span{position: absolute; top: 9px; left: -4px; font-weight: bold; font-size: 1.3rem;}


/* 2024-marketing-outlook-report table */
table {border-collapse: collapse;width: 100%;border: 1px solid #b7b4b4;}
td {text-align: left; padding: 8px; font-size:1.1rem; font-weight:600;}
tr {background-color:#ffffff; height:50px;}
tr:nth-child(even) {background-color: #004677;color:#ffffff;}



/* chart/circle image with text right start */
.trightarea {display: flex;position: relative;align-items: center;}
.trightarea .cchart {flex: 1.4;padding: 10px;}
.trightarea .cchart svg {vertical-align: middle;}
#content .trightarea .cchart svg + p {font-size:1.5rem; font-weight:700; text-align:center;margin-bottom: 0;}
.trightarea .iright {flex: 1.6;padding: 10px;}
.d-chart .trightarea .cchart {flex: 1;}
.d-chart .trightarea .iright {flex: 2;}
.circle-img .trightarea .iright {margin: 20px 30px;}
#content .circle-img img{border-radius: 50%; width: 280px; border: 4px solid #004677;}
/* chart/image with text right end */
			

	

/* report page text with arrow hover animation*/
#content p.arrow a{font-family:Montserrat;text-decoration:none;font-weight:600;font-size:1.175rem;letter-spacing:1px;text-transform:uppercase;position:relative;line-height:1;color:#004677;}
#content p.arrow a:after{white-space: nowrap;content: '\279E'; font-size: 1.5rem; line-height: 1.5rem; display: inline; margin-left:6px;position: relative; top: 2px;transition: all .25s ease-in-out;font-weight:500; width:26px;}
#content p.arrow a:before{content: ''; display: block; width: 0%; left:50%; background-color: #009DDB;transition: all .25s ease-in-out; position: absolute; bottom: -0.25rem; height: 2px;}
#content p.arrow a:hover:before{width:calc(100% - 27px);left:0px;}
#content p.arrow a:after{height:16px;width:16px; display: inline-block;margin-left:10px;}
#content p.arrow a:after{content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path style="fill:%23004677;" d="M7.3,14.9c-0.1,0-0.3-0.1-0.4-0.2l-0.8-0.8C6,13.8,6,13.7,6,13.5s0.1-0.3,0.2-0.4L10,9.3H2.5C2.2,9.3,2,9,2,8.7V7.6c0-0.3,0.2-0.5,0.5-0.5H10L6.1,3.2C6,3.1,6,2.9,6,2.8S6,2.5,6.1,2.4l0.8-0.8C7,1.5,7.2,1.5,7.3,1.5s0.3,0.1,0.4,0.2l6.2,6.2C13.9,7.9,14,8,14,8.2s-0.1,0.3-0.2,0.4l-6.2,6.2C7.6,14.8,7.4,14.9,7.3,14.9z"/></svg>');}

/* report page text with arrow hover animation on blue overlap */
#content .section.bg-dkblue p.arrow a:after{ content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path style="fill:%23ffffff;" d="M7.3,14.9c-0.1,0-0.3-0.1-0.4-0.2l-0.8-0.8C6,13.8,6,13.7,6,13.5s0.1-0.3,0.2-0.4L10,9.3H2.5C2.2,9.3,2,9,2,8.7V7.6c0-0.3,0.2-0.5,0.5-0.5H10L6.1,3.2C6,3.1,6,2.9,6,2.8S6,2.5,6.1,2.4l0.8-0.8C7,1.5,7.2,1.5,7.3,1.5s0.3,0.1,0.4,0.2l6.2,6.2C13.9,7.9,14,8,14,8.2s-0.1,0.3-0.2,0.4l-6.2,6.2C7.6,14.8,7.4,14.9,7.3,14.9z"/></svg>');}


/* Template override */
.col_half.dividerright.border-none {border: none;}


/* common class */
.d-mb-48 {margin-bottom: 48px;}
.pl-32 { padding-left: 32px;}
.pr-32 { padding-right: 32px;}	

/*Number list 2024-cpg-and-grocery-consumer-report*/
.anchormap.mshow {display:none;}


@media (max-width: 1120px) {
	.col_half.dividerright {border-right: none;padding-right: 0%;}
	.col_half.dividerright + .col_half.col_last {padding-left: 0%;border: none;}
	#content .trightarea .cchart svg+p {font-size: 1.4rem;}
}

@media (max-width:1024px){
	.d-chart .trightarea .iright {flex: 1;}
}

@media (max-width: 900px) {
	.col_half.dividerright {float:none;width:100%;margin-right:0px;padding:0;margin-bottom:16px !important;}
	.col_half.dividerright + .col_half.col_last {float:none;width:100%;margin-right:0px;padding:0;}
    #content .col_half.dividerright{margin-bottom: 32px!important; border-right: unset;}
	#content .cgp-grocery-report .box h3 + p{line-height: 1.2;}
	
	#content .cgp-grocery-report .vchart_item {width: calc(33.33% - 12.8px);}
	
	/* common class */
	.m-tleft {text-align:left !important;}
	.trightarea { display: block; text-align: center; }
}

@media (max-width: 940px) {
    .nb_large + p {max-width: unset; width:100%;}	
	.imgbox .transparent .nb_large {font-size:3.5rem;}
	#content ol.number.anchormap li {display:block;}
	 .anchormap.mshow {display:block;}
}

@media (max-width: 880px) {
	.hchart_label{width:100px;}
}

@media (max-width: 800px) {
	section .angle{display:none;}
}

@media (max-width: 760px) {
	.nb_medium, .nb_large{display:block;text-align:center;}
	.hchart.stack .hchart_label{width:100%;}
    .nb_large + p {text-align:center;}
    .cgp-grocery-report .box .triangle{left: 46%;} 
    
	/* common class */
	.tcenter {text-align:center;}
    .m-tcenter {text-align:center;}
    .m-mb-32 {margin-bottom:32px !important}
    .d-mb-48 {margin-bottom:0;}
	.pl-32 { padding-left: 0;}
    .pr-32 { padding-right: 0;}

    /* 2024-cpg-and-grocery-consumer-report */
	#content .vitals ul li {margin-left:0;}	
}

@media (max-width: 600px) {
	#content ol.number li {display:block;}
	
	.hchart .hchart_item{display:block;}
	.hchart .hchart_label{display:block;width:100%;text-align:left;line-height:1.25;padding-bottom:0px;}
	.hchart .hchart_value{display:block;height:32px;margin-bottom:16px;background-color:transparent;}
	
	.vchart_label {display:block;position:relative;height:100px;}
	.vchart_label label:not(.icon){display:block;width:100px;transform:rotate(90deg);text-align:left;position: absolute;transform-origin: center;top: 42px;height: 40px;left: 50%;margin-left: -48px;}
	
	/* 2024-cpg-and-grocery-consumer-report */
	.top-factor-hchart.hchart .hchart_item {position:relative;padding-top:36px;}
	.top-factor-hchart.hchart.stack .hchart_value span.graphAnimate strong {color:#000;position:absolute;top:0px;margin-left:0px;font-size:1rem;}
}

@media (max-width: 450px){
	 .cgp-grocery-report .box .triangle{left: 44%;}		
}