* {
    box-sizing: content-box
}

h1 {
    font-size: 98px;
    line-height: 1;
    margin-bottom: 0
}

h2 {
    font-size: 47px;
    line-height: .8
}

h3,.ui-elements h3 {
    font-size: 33px;
    margin-bottom: 0;
    font-family: var(--primaryfont-regular)
}

.banner-content h3 {
    font-size: 47px
}

p {
    font-size: 18px
}

.logo-area h4,.z-typography h3 {
    font-family: var(--secondaryfont-regular);
    font-size: 36px
}

#block-block-3 {
    display: none
}

.banner-content {
    padding: 100px 0 110px;
}

.bg-gray {
    background-color: #f8f8f8;
    /* padding: 40px 0 80px */
}

.content-wrap {
    max-width: 1170px
}

.bg-gray .content-wrap {
    /* padding: 60px 0 0 */
}

.logo-area {
    display: flex;
    /* flex-wrap: wrap; */
    gap: 50px;
    flex-flow: row;
}

.logo-area .cont-part {
    width: 49%
}

.cont-part p {
    margin-top: 20px
}

.cont-part .download-btn-box {
    /* margin-top: 40px */
}

.cont-part-in {
    /* padding-right: 85px; */
    padding-top: 20px;
}

.logo-area .image-part {
    width: 49%;
    position: relative
}

.bg-gray.valuable-brand-section .content-wrap, .dos-donts-section .content-wrap {
    /* padding-top: 20px; */
    padding: 100px 0;
}

.dos-donts-section .content-wrap{
    padding-top: 0;
}

.ui-screenshot-section .content-wrap{
    padding: 100px 0;
}

.download {
    background: #393939;
    font-family: var(--zf-secondary-medium);
    display: inline-block;
    color: white;
    position: relative
}

.download:not(.zs-logo) {
    padding: 10px 25px 10px 45px;
    border: 1px solid #a7a7a7;
    position: relative;
    margin: 24px 5px 0;
}

.zweb {
    margin-right: 19px
}

.zsign-logo {
    /* width: 427px;
    height: 426px; */
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    display: inline-block;
    /* position: absolute; */
    bottom: 0;
    right: 0;
    padding: 40px;
    box-sizing: border-box;
    width: 100%;
    line-height: 0;

}

h2 {
    position: relative
}

h2 span {
    font-family: var(--primaryfont-regular);
    font-size: 22px;
    width: 100%;
    display: inherit;
    top: -10px;
    position: absolute;
    left: 0
}

.inner-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 0 45px
}

.inner-wrap.dos {
    margin-bottom: 60px;
}

.zs-title {
    width: 30%
}

.zs-title h2 {
    padding-top: 20px;
    font-size: 42px;
    padding-left: 40px;
    top: 20px
}

.zs-title h2::before {
    position: absolute;
    content: "";
    width: 32px;
    height: 32px;
    left: 0;
    bottom: 0
}

.zs-logo {
    width: 68%
}

.zs-logo ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.zs-logo ul li {
    border-radius: 7px;
    position: relative
}

.zs-logo ul li:not(.download) {
    border: 1px solid #e6e6e6
}

.sign-logo .zs-logo ul li {
    /* width: 136px; */
    /* width: 200px;
    height: 142px */
    width: 175px;
    height: 100px;
}

.z-sign-logo .zs-logo ul li {
    width: 216px;
    height: 100px;
    position: relative
}

.zs-logo ul li span {
    text-align: left;
    letter-spacing: 0;
    color: #000000;
    font-size: 12px;
    display: inline-block;
    position: absolute;
    /* bottom: -40px; */
    width: 100%;
    top: calc(100% + 15px);
}

.zs-logo ul li.z-shadows span{
    bottom: -60px;
}

.cross,.cross::before,.cross::after {
    position: absolute;
    content: "";
    width: 100%
}

.cross {
    height: 100%
}

.cross::before,.cross::after {
    width: 1.5px;
    background-color: red;
    inset: 0;
    margin: auto
}

.cross::before {
    transform: rotate(45deg)
}

.cross::after {
    transform: rotate(-45deg)
}

.z-typography {
    margin-top: 80px
}

.z-typography,.colors,.ui-elements {
    /* padding: 70px 0 */
}

.z-typography h3 {
    /*! font-size:30px; */
    margin-bottom: 20px;
    /*! font-family:var(--zf-secondary-bold) */
}

.z-typography .title-wrap {
    max-width: 860px;
    position: relative
}

.z-typography h2 {
    font-size: 80px;
    font-family: var(--zf-secondary-bold);
    margin-bottom: 30px
}

.z-typography p {
    margin-bottom: 40px;
    max-width: 680px
}

.z-typography .num {
    font-size: 30px;
    margin-bottom: 60px;
    display: block
}

.zfontsect {
    max-width: 1020px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.zfont {
    border: 1px solid #eee;
    padding: 15px 35px;
    width: 31%;
    margin-bottom: 30px;
    box-sizing: border-box
}

.zfont em {
    font-style: normal;
    font-size: 24px
}

.zfont span {
    font-size: 80px
}

.zlight {
    font-family: var(--zf-secondary-light)
}

.zreg {
    font-family: var(--zf-secondary-regular)
}

.zmed {
    font-family: var(--zf-secondary-medium)
}

.zsemi {
    font-family: var(--zf-secondary-semibold)
}

.zbold {
    font-family: var(--zf-secondary-bold)
}

.zextbold {
    font-family: var(--zf-secondary-extrabold)
}

.colors h2 {
    font-family: var(--primaryfont-bold)
}

.box {
    width: 233px;
    height: 237px;
    border-radius: 15px;
    opacity: 1;
    overflow: hidden;
    margin-bottom: 15px;
    position: relative
}

.box .max {
    display: inline-block;
    width: 100%;
    height: 100%
}

.box ul {
    flex-wrap: wrap;
    position: relative;
    top: -7px;
    display: none
}

.box ul li {
    width: 20%;
    height: 58px
}

.rgb,.cmyk {
    display: block;
    padding-top: 8px
}

.rgb,.cmyk,.ui-elements p {
    color: #8e8e8e;
    font-size: 16px
}

.rgb em,.cmyk em {
    font-style: normal
}

.blue .max {
    background: #236eb4
}

.blue .color-1 {
    background: #236eb4
}

.blue .color-2 {
    background: #197bd6
}

.blue .color-3 {
    background: #2691f5
}

.blue .color-4 {
    background: #65b5ff
}

.blue .color-5 {
    background: #bbddfd
}

.yellow .max {
    background: #f7b21b
}

.yellow .color-1 {
    background: #f7b21b
}

.yellow .color-2 {
    background: #ffbb34
}

.yellow .color-3 {
    background: #fdc963
}

.yellow .color-4 {
    background: #fce1ad
}

.yellow .color-5 {
    background: #faf1df
}

.green .max {
    background: #1da586
}

.green .color-1 {
    background: #1da586
}

.green .color-2 {
    background: #1aac80
}

.green .color-3 {
    background: #04c392
}

.green .color-4 {
    background: #00d9a7
}

.green .color-5 {
    background: #90ffe1
}

.light-blue {
    background: #eff6fd
}

.gray {
    background: #fafafa
}

.white {
    background: #fff;
    border: 1px solid #ebebeb
}

.primary-wrap {
    margin-bottom: 100px
}

.primary,.secondary,.ui-elements ul {
    display: flex;
    flex-wrap: wrap
}

.wrapper {
    margin-right: 30px;
    margin-top: 60px
}

.colors h2 {
    margin: 10px auto 0
}

.ui-elements ul {
    flex-wrap: wrap;
    justify-content: space-between
}

.ui-elements ul li {
    width: 43%;
    margin-top: 80px
}

.ui-elements h4 {
    margin-bottom: 5px
}

.ui-elements ul li img {
    /* margin-top: 25px; */
    border: 1px solid #f0efef;
    box-shadow: #ececec 0px 0px 10px
}

.copy-wrap {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    z-index: 11
}

.copy-wrap .copy {
    width: 24px;
    height: 29px;
    background-position: -454px -30px;
    margin-bottom: 8px
}

.copy-wrap:not(.black) .copy {
    filter: brightness(1) invert(1)
}

.copy-wrap .copy,.download::before,.zdo::before,.zdot::before {
    display: inline-block;
    cursor: pointer;
    user-select: none;
    background-repeat: no-repeat
}

li.zs-logo::before {
    position: absolute;
    content: "";
    width: 80px;
    height: 90px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto
}

ul li.zs-blue {
    background: #236eb4
}

ul li.zs-bg-white{
    background: #ffffff;
}

ul li.zs-yellow {
    background: #f7b22a
}

ul li.zohosign.black {
    background: #000
}

.copy-wrap .copy,.download::before,.zdo::before,.zdot::before{
    background-image: url(/sites/zweb/images/sign/branding-guide/zs-branding-sprite.png);
    background-size: 893px auto;
    background-repeat: no-repeat
}

li.zs-logo::before {
    background-image: var(--zp-sign);
    width: 135px;
    height: 60px;
    background-repeat: no-repeat;
}
li.zs-logo-dark::before{
    background-image: var(--zp-sign-dark);
}

.ui-elements ul li>a:hover::before {
    background-image: url(/sites/zweb/images/sign/branding-guide/zs-branding-sprite.png);
    background-size: 893px auto;
    background-position: -417px -30px;
    transform: scale(1.4)
}

.copy-wrap em {
    font-style: normal
}

.zs-title .zdo::before {
    background-position: -825px -30px;
    width: 40px;
    transform: scale(0.8) translateX(-3px)
}

.zdot::before {
    background-position: -864px -30px
}

.copy-wrap .hex {
    width: 100%;
    display: inline-block;
    font-size: 18px
}

.copy-wrap:not(.black) .hex {
    color: white
}

.download.font {
    position: absolute;
    right: 0;
    bottom: 0
}

.download::before {
    position: absolute;
    content: "";
    width: 18px;
    height: 20px;
    top: 0;
    bottom: 0;
    margin: auto 0 auto -26px;
    filter: brightness(1) invert(1);
    background-position: -422px -34px
}

.download.font {
    position: absolute;
    right: 0;
    bottom: 0
}

.copied {
    display: inline-block;
    font-family: var(--primaryfont-semibold);
    color: white;
    background-color: black;
    padding: 4px 24px;
    font-size: 15px;
    border-radius: 16px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 60px;
    top: 40px;
    transform: scale(0.5);
    opacity: 0;
    animation-name: jump;
    animation-duration: 2s
}

@keyframes jump {
    0% {
        transform: scale(0.5);
        opacity: 0
    }

    50% {
        transform: scale(1);
        opacity: 1
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

li.zs-logo.zsign::before,li.zs-logo.rotate::before,li.zs-logo.scale::before {
    /* background-position: 0 -90px */
}

li.zs-logo.zs-blue::before {
    /* background-position: -485px 0 */
}

li.zs-logo.zs-yellow::before {
    /* background-position: -567px 0 */
    filter: brightness(0) saturate(100%);
}

li.zs-logo.rotate::before {
    /* transform: rotate(-15deg) */
    /* background-image: url(image/sign-orientation.png); */
    background-image: url(/sites/zweb/images/sign/branding-guide/sign-orientation.png);
    background-size: 100% auto;
    height: 68px;
}

li.zs-logo.scale::before {
    /* transform: scale(1.15,1) */
    background-image: url(/sites/zweb/images/sign/branding-guide/sign-proportion.png);
    background-size: 100% auto;
    height: 68px;
}

li.zs-logo.strichx::before {
    /* width: 58px */
    background-image: url(/sites/zweb/images/sign/branding-guide/sign-shadow.png);
    background-size: 100% auto;
    height: 68px;
}

li.zs-logo.zohosign::before {
    width: 166px;
    height: 46px;
    background-position: -654px -22px
}

li.zs-logo.zohosign.black::before {
    background-position: -78px -84px
}

li.zs-logo.z-wrong::before,li.zs-logo.z-strichx::before,li.zs-logo.z-shadows::before {
    width: 166px;
    height: 46px
}

li.zs-logo.z-wrong::before {
    background-position: -69px -20px
}

li.zs-logo.z-strichx::before {
    width: 166px;
    height: 46px;
    background-position: -654px -22px;
    transform: scale(1,0.8)
}

li.zs-logo.z-shadows::before {
    width: 166px;
    height: 46px;
    background-position: -247px -20px
}


.z-sign-logo .cross {
    transform: scale(1.3,1)
}

.ui-elements {
    /* margin-bottom: 80px */
}

.ui-elements ul li>a {
    position: relative;
    display: inline-block;
    margin-top: 10px;
    line-height: 0;
}

.ui-elements ul li>a:hover::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #000000b0;
    left: 0;
    top: 0
}

.ui-elements ul li>a:hover::before {
    position: absolute;
    content: "";
    width: 30px;
    height: 30px;
    background-color: white;
    z-index: 1;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
    top: 0
}

@media screen and (min-width: 992px) {


.ui-elements ul li:nth-child(6) p {
    max-width: 360px;
    width: 100%
}


}

@media screen and (max-width: 1440px) {
    .content-wrap {
        max-width:1000px
    }
.zfontsect{
    justify-content: left;
}
    .zfont {
        padding: 15px 25px;
        width: 31%;
        min-width: 248px;
    }
    .zfontsect .zfont{
        margin-right: 20px;
    }
}

@media screen and (max-width: 991px) {
    p {
        font-size:17px
    }

    .zs-title h2,h2 {
        font-size: 32px
    }

    .zs-title h2::before {
        transform: scale(0.9)
    }

    h1 {
        font-size: 70px
    }

    .banner-content h3 {
        font-size: 37px
    }

    .z-typography,.colors,.ui-elements {
        max-width: 800px;
        padding: 70px 0 30px
    }
    .z-typography{
        padding-top:0px
    }
    .banner-content {
        padding: 80px 0 90px 0;
    }

    .banner-content .content-wrap {
        max-width: 600px
    }

    .bg-gray {
        /* padding: 0 0 80px */
    }

    .logo-area .cont-part,.logo-area .image-part {
        width: 100%;
        text-align: center
    }

    .zs-title {
        margin-bottom: 50px
    }

    .zs-title,.zs-logo {
        width: 100%
    }
.sign-logo .zs-logo ul li{
    /* margin-right:10px; */
    /* margin-bottom: 40px; */
}
    .logo-area .cont-part {
        /* margin-bottom: 50px */
    }

    .zsign-logo {
        position: relative;
        width: 327px;
        /* height: 326px */
        max-width: 100%;
    }

    .logo-area {
        max-width: 620px
    }

    .bg-gray .content-wrap {
        max-width: 600px
    }

    .z-sign-logo .zs-logo ul li {
        width: 186px;
        height: 80px
    }
 .z-sign-logo .zs-logo ul li{
     margin-right:10px
 ;
     margin-bottom: 10px;
 }
    .z-sign-logo .donts .zs-logo ul li{
        margin-bottom: 50px;
    }
    .zs-logo ul {
        /* max-width: 385px; */
        justify-content: left;
    }
    

    .inner-wrap {
        /* padding-bottom: 60px */
    }

    .inner-wrap.dos {
        margin-bottom: 40px;
    }

    .zfont span,.z-typography h2 {
        font-size: 50px
    }

    .ui-elements ul li {
        margin-top: 50px
    }

    /*  */
    .cont-part-in{
        padding-top: 0;
    }
    .logo-area{
        flex-flow: column;
    }
    .bg-gray.valuable-brand-section .content-wrap, .dos-donts-section .content-wrap {
        padding: 70px 0;
    }
    .zs-logo ul{
        flex-flow: row;
        gap: 20px;
    }
    .zs-title{
        text-align: center;
    }
    .zs-title h2{
        display: inline-block;
    }
    .zs-title h2 span{
        width: 165px;
        left: 50%;
        transform: translateX(-50%);
    }
    .zs-title h2.zdo::before {
        bottom: -3px;
    }
    .zs-title h2.zdot::before {
        bottom: -4px;
    }
    .zs-logo ul li span{
        text-align: center;
    }
    .dos-donts-section .content-wrap{
        padding-top: 0;
    }
    .ui-elements ul li{}
    .ui-screenshot-section .content-wrap {
        padding: 75px 0 70px 0;
    }
    .banner-content{
        text-align: center;
    }
}

@media screen and (max-width: 767px) {
    .ui-elements ul li {
        width:100%
    }
    .zs-logo ul {
        flex-flow: column;
        gap: 70px;
        justify-content: center;
        align-items: center;
    }
    .ui-elements h3{
        text-align: center;
    }
    .ui-elements ul li {
        text-align: center;
    }
}

@media screen and (max-width: 480px) {

h1 {
    font-size: 35px;
}

.banner-content h3 {
    font-size: 28px;
}

.banner-content {
    padding: 60px 0 65px 0;
}

.bg-gray.valuable-brand-section .content-wrap, .dos-donts-section .content-wrap {
    padding: 60px 0;
}
.ui-screenshot-section .content-wrap {
    padding: 65px 0 60px 0;
}

.dos-donts-section .content-wrap {
    padding-top: 0;
}

}

.footer-sec-wrap.two-column {
    display: none
}

li.zs-logo.download {
    background-color: unset;
    text-align: center
}
li.zs-logo.download::before {
    background-image: unset
}