/*Font name star*/
h2{font-size: 45px;line-height: 1.1;}
.zplay-footer h2{font-size:42px}
h2,.nav-sticky li:first-child a,.field-body h1{font-family: var(--zf-secondary-bold);}
.nav-sticky .nav-num{ font-family: var(--zf-primary-semibold);}
.nav-num{font-family: var(--zf-secondary-regular);}
.nav-title li .nav-txt{font-family: var(--zf-secondary-semibold);}
.nav-sticky a, .nav-sticky .nav-num{font-size: 18px;}
/*fonr name end*/
/*common section start */
.product-header-top{display:none}
.field-body .content-wrap{max-width: 1170px;}
.field-body h1{font-size: 64px;}
.intro p,.nav-num{font-size:20px}
.grid-wrap p{font-size: 19px;}
.grid-wrap p,.intro p{margin-bottom: 25px;}
.grid-55{width:55%;}
.grid-45{width: 45%;}
.grid-55 p,.grid-55 .play-list{max-width: 594px;}
p.high-light span {
    background-color: rgb(241, 245, 125);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 10%, rgb(241, 245, 125) 10%,rgb(241, 245, 125) 75%, rgba(255, 255, 255, 0) 75%);
}
ul.play-list li:after {
	width: 16px;
	height: 16px;
	border: 2px solid #77a983;
	left: 0px;
	top: 6px;
	border-radius: 50%;
}
ul.play-list li:before {
	width: 4px;
	height: 8px;
	border: 2px solid #77a983;
	border-left: unset;
	border-top: unset;
	left: 7px;
	transform: rotate(45deg);
	top: 10px;
}
.banner .content-wrap,.intro,.grid-wrap{display: flex;flex-wrap: wrap;}
.banner::before, .banner::after, #block-panels-mini-product-menu::before,#block-panels-mini-product-menu::after{position:absolute;content: "";height: 100%;}
ul.play-list li::before,ul.play-list li::after{position:absolute;content: "";}
.section .content-wrap{padding: 80px 0px;}
#intro .content-wrap{padding:100px 0px 60px}
.grid-full{width:100%}
.section h2{margin-bottom:30px}
/*common section end */


/* banner  section start */
.banner,#block-panels-mini-product-menu,ul.play-list li{position: relative;}
ul.play-list li{padding-left: 34px;}
.banner::before,#block-panels-mini-product-menu::before{left: 0;width: 0%;background-color: #a5e8b1;animation: greenmove 2s;animation-fill-mode: forwards;z-index: -1;animation-delay: 1000ms;}
.banner::after,#block-panels-mini-product-menu::after{width: 0%;background-color: #ebed38;right: 0;top: 0;animation: yellowmove 2s;animation-fill-mode: forwards;z-index: -1;animation-delay: 1000ms;}
.banner{width:100%;max-width:2600px;}
.banner .content-wrap{padding: 120px 0px 160px;align-items: center;}
.ban-title{width: 67%;}
.ban-img{width: 33%;text-align: right;}
.ban-title h1{max-width: 740px;transform: translateX(-7%);}
h1 span{
    padding-left: 12px;
    padding-right: 10px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 6%, rgba(223,243,236,1) 6%, rgba(223,243,236,1) 90%, rgba(255, 255, 255, 0) 90%);
    display: inline-block;
}
/* banner  section end */

/* intro  section start */
#intro{
    padding-top:80px;
}
.section:last-child{
    background-color: #d3fece;
}
.section:last-child .content-wrap{padding: 80px 0px 60px;margin-top: 40px;}
.nav-title li .nav-txt{
    background-color: #dff3ec;
    color: #000;
    font-size: 18px;
    padding: 10px 20px;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    display: inline-block;
    margin: 10px 0px 10px 20px;
}
.nav-title{margin:auto;display: inline-block;}
.intro .right {text-align:center;}
.intro .right li{text-align:left}
.intro .right li a, .nav-sticky li:not(:last-child) a{color:#000;}
.field-body .content-wrap.nav-sticky {
padding: 10px 0px;
right: 0;
margin: auto;
background-color: white;
}
.sticky{left: 0px;position:fixed;border-bottom: 1px solid #E0E0E0;display: inline-block;width: 100%;z-index: 9;top: -72px;transition: all 300ms;}
    .sticky.active{
        top: -1px;
        background-color: #fff;
    }
/* intro  section end */

/* page nav start */
.nav-sticky ul li{margin: 0px 20px;position: relative;align-self: center;}
.nav-sticky ul li:last-child{margin: auto;position: absolute;right: 0;}
.nav-sticky ul{
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0px 8px;
}
.nav-sticky ul li .act-btn{
    padding: 8px 20px;
    font-size: 16px;
}
.nav-sticky ul li:first-child{margin-left: 0px;}
.nav-sticky .nav-txt{position:absolute;opacity:0;left: -50%;transform: translateX(-50%);right: 0;top: 40px;margin: auto;width: 200px;font-size: 14px;}

.nav-sticky li:hover:not(:last-child) a,.nav-sticky li:not(:last-child) a.active{color:green;}
.nav-sticky li a:after,.nav-sticky li a:after{position:absolute;content:"";width: 0%;height: 2px;background-color: green;left: 0;bottom: 1px;transition: all 0.5s;}
.nav-sticky li:hover:not(:last-child) a:after,.nav-sticky li:not(:last-child) a.active:after{
    width: 100%;
}
.nav-sticky a:hover .nav-txt{opacity: 0;}
/* intro nav end */
.grid-45.zd-right>p,.zd-right .play-list{width: 85%;}
.grid-45.zd-left p{width: 95%;}
.zd-right.grid-45 p,.zd-right .play-list{margin-left: auto;}
.zd-left img,.zd-right img{padding: 20px;border-radius: 5px;}
.zd-left img{width: calc(96% - 40px);background-color:#a2e3ae;}
.zd-left img, div.image-bg-green img{background-color:#a2e3ae;}
.zd-right img, div.image-bg-yellow img{background-color:#e9eb38;}
.zd-right img{width: calc(96% - 60px);float:right;max-width:500px;}
.max-img-440 img{max-width:440px}
.max-img-360 img{max-width:360px}
.max-img-360 .image-only{text-align:center}
.max-img-360 .image-only img{float:none}
.max-img-320 img{max-width:320px}
.max-img-440 .grid-45.zd-left p{
    width: 100%;
}

ul+picture img,p+picture img{
	margin-top:10px;
}


@media screen and (max-width:1400px){
.ban-title h1{
    transform: translateX(0%);
}
}


@media screen and (max-width:1140px){
    .field-body h1 {
    font-size: 58px;
}
    .sticky.active {
    top: 0px;
}
}

@media screen and (max-width:991px){
    .field-body .content-wrap{
        max-width:760px;
        width:90%;
    }    
    .section .content-wrap,#intro .content-wrap {
    padding: 20px 0px 10px;
}
.section .content-wrap img{margin-bottom:20px}
    .grid-55, .grid-45, .grid-45.zd-right p, .nav-title,.zd-right .play-list{
   width:100% 
}

.ban-title{width:100%;}
.ban-img{display:none}

.grid-55 p,.grid-45.zd-left p{max-width:100%;width: 100%;}
.zd-right img{float:none}
.intro .right ul{text-align:left}
.intro .right li{display:inline-block}
.banner .content-wrap { padding: 100px 0px;}
.nav-title li .nav-txt {
    font-size: 17px;
    padding: 10px 10px 10px;
    margin: 10px 20px 10px 10px;
    }
}
@media screen and (max-width:767px){
        .field-body h1 {
        font-size: 41px;
    }
    h2 {
    line-height: 1.2;
}
}
@media screen and (max-width:500px){
    #intro{
    padding-top:20px;
}
.right.grid-45{display:none}
.section h2 {
    margin-bottom:20px;
}
.section .content-wrap {
    padding: 10px 0px;
}
    h2,.zplay-footer h2{font-size: 32px;}
        .field-body h1 {
        font-size: 30px;
    }
    .banner .content-wrap {
    padding: 40px 0px;
}
.zd-left img, .zd-right img {padding: 12px;}
.intro p,.nav-num,.grid-wrap p{font-size: 18px;}
}

/*For this page*/
#divide img{
    width: calc(84% - 60px);
}
@media screen and (max-width:991px){
#divide img{width:70%;}
.sticky{display:none}
}
@media screen and (max-width:400px){
    h1 span{padding: 0px;}
}


@keyframes greenmove {
  from {width:0%}
  to {width:100%}
}

@keyframes yellowmove {
  from {width:0%}
  to {width:65%}
}
.ban-img img{
	transform:scale(0);
	animation: scaleimage 1s;
	animation-fill-mode: forwards;
	animation-delay: 500ms;
	width: 85%;
}
@keyframes scaleimage {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

.zplay-footer.content-wrap {
    max-width: 720px;
    margin: auto;
}

.zplay-footer h2{
}
.zplay-footer ul li p{
    font-size: 20px;
}
.zplay-footer ul{
    display:flex;
    flex-wrap:wrap;
}
.zplay-footer ul li{
    width: 30%;
    padding-top: 56px;
    position: relative;
    margin-top: 20px;
}
.zplay-footer ul li:not(:first-child){
	margin-left: 5%;
}

.zplay-footer ul li:nth-child(3){
	margin-left: 2%;
}
.zplay-footer ul li::before{
    position:absolute;
    content:"";
    width: 50px;
    height: 50px;
    top: 0px;
    background-image: url(/sites/default/files/desk/desk-playbook-sprite-icons.png);
    background-size: auto 50px;
}
.manage::before{background-position: -150px 0px;}
.offer::before{background-position: -100px 0px;}
.improve::before{transform: scale(1.15) translateY(-5px);background-position: -50px 12px;}
.zplay-footer ul li p{
    display: inline-block;
    position: relative;
}
.zplay-footer ul li p{
	position:relative;
	line-height: 26px;
}
.zplay-footer ul li p span{
	padding: 0px 10px 0px 0px;
	position: relative;
	display: inline-block;
}
.zplay-footer ul p:hover span{
	
background-color: rgb(241, 245, 125);
	
background: linear-gradient(0deg, rgba(255, 255, 255, 0) 10%, #eaea4b 10%,#eaea4b 55%, rgba(255, 255, 255, 0) 55%);
}

.zplay-footer ul a{
	width:100%;
	height:100%;
	position:absolute;
	background-color: #ffffff00;
	z-index: 10;
}
@media screen and (min-width: 991px){
	.right li{
		opacity:0;
		transform:translateX(-10%);
		transition:all 500ms;
	}
	.middle-animated .right li{
		opacity:1;
		transform:translateX(0%);
	}
	.middle-animated .right li:nth-child(1){	
transition-delay: 200ms;
	}
	.middle-animated .right li:nth-child(2){
		transition-delay: 400ms;
	}.middle-animated .right li:nth-child(3){
		transition-delay: 600ms;
	}
	.middle-animated .right li:nth-child(4){
		transition-delay: 800ms;
	}
	.middle-animated .right li:nth-child(5){
		transition-delay: 1000ms;
	}
		.middle-animated .right li:nth-child(6){
		transition-delay: 1200ms;
	}
	.middle-animated .right li:nth-child(7){
		transition-delay: 1400ms;
	}
		.middle-animated .right li:nth-child(9){
		transition-delay: 1600ms;
	}
		.middle-animated .right li:nth-child(9){
		transition-delay: 1800ms;
	}
		.middle-animated .right li:nth-child(10){
		transition-delay: 2000ms;
	}
  .section img{opacity:0;transition:all 500ms;transform:translateY(10%)}
  .section .middle-animated  img{opacity:1;transform:translateY(0%);}
}
@media screen and (max-width:992px){
	.zplay-footer ul li,.zplay-footer ul li:not(:first-child){
         width:50%;
         margin-left: 0%;
 }
 .zplay-footer ul li p{
 	width:90%
 }
}


@media screen and (max-width:767px){
	.zplay-footer ul li, .zplay-footer ul li:not(:first-child){
         width: 100%;
 }
 .zplay-footer ul{
	max-width: 330px;
}
}
@media screen and (max-width:480px){
	.main-container-wrapper #mini-panel-product_menu .menu-icon-help-header{
		float:left;
		margin-left:5%;
	}
	.zplay-footer ul {
    max-width: 280px;
}
	.zplay-footer ul li p{
    font-size: 24px;
    line-height: 30px;
}
.zplay-footer ul li{
	margin-top: 12px;
}
.section:last-child .content-wrap {
    padding: 60px 0px;
}
}