Untitled

 avatar
unknown
plain_text
a year ago
55 kB
3
Indexable
/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1,h2,h3,h4,h5,h6 {
    font-family: $font-heading;
    margin: 0;
    clear: both;
    font-weight: 700;
    color: $headingcolor;
}
.page-content h3, 
.page-content h2 {
    margin-bottom: 10px;
}
h1 {
    font-size: 42px;
    line-height: 1.3;
}
h2 {
    font-size: 36px;
    line-height: 1.3;
}
h3 {
    font-size: 28px;
    line-height: 1.3;
}
h4 {
    font-size: 20px;
    line-height: 1.4;
}
h5 {
    font-size: 18px;
    line-height: 1.3;
}
h6 {
    font-size: 1px;
    line-height: 1.2;
}

.xpo-main-title {
    font-size: 48px;
    font-weight: 900;
}
.xpo-main-title32 {
    font-size: 32px;
    font-weight: 900;
}
.xpo-main-title36 {
    font-size: 36px;
    font-weight: 900;
}
.xpo-main-title42 {
    font-size: 42px;
    font-weight: 900;
}
.xpo-main-title44 {
    font-size: 44px;
    font-weight: 900;
}
.xpo-main-title64 {
    font-size: 64px;
    font-weight: 900;
}
.xpo-main-title54 {
    font-size: 54px;
    font-weight: 900;
}
.xpo-title22 {
    font-size: 22px;
}
.xpo-title24 {
    font-size: 24px;
}
.xpo-title20 {
    font-size: 20px;
}
.xpo-title18 {
    font-size: 18px;
}
.xpo-title16 {
    font-size: 16px;
}
.xpo-title14 {
    font-size: 14px;
}
.xpo-title12 {
    font-size: 12px;
}
strong {
    font-weight: 900;
}
.xpo-mb10 {
    margin-bottom: 10px;
}
.xpo-mb15 {
    margin-bottom: 15px;
}
.xpo-mb20 {
    margin-bottom: 20px;
}
.xpo-mb25 {
    margin-bottom: 25px;
}
.xpo-mb30 {
    margin-bottom: 30px;
}
.xpo-mb40 {
    margin-bottom: 40px;
}
.xpo-mb50 {
    margin-bottom: 50px;
}
.xpo-mb60 {
    margin-bottom: 60px;
}
.xpo-mb80 {
    margin-bottom: 80px;
}
.xpo-mb100 {
    margin-bottom: 100px;
}
.xpo-mt20 {
    margin-top: 20px;
}
.xpo-mt40 {
    margin-top: 40px;
}
.xpo-mt60 {
    margin-top: 60px;
}
.xpo-mtp100 {
    margin-top: 100px;
}
.xpo-space-pt150 {
    padding-top: 150px;
}
.xpo-space-pt130 {
    padding-top: 130px;
}
.xpo-pb-100 {
    padding-bottom: 100px;
}
.xpo-pb-60 {
    padding-bottom: 60px;
}
.xpo-single-content .wp-block-embed iframe {
    width: 100%;
}
.xpo-icon-close {
    position: relative;
    &:after,
    &:before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 14px;
        width: 2px;
        transform: rotate(-45deg);
        background: red;
        margin-top: -7px;
    }
    &:after {
        transform: rotate(45deg);
    }
    &:before {
        transform: rotate(-45deg);
    }
}
.xpo-icon-yes {
    position: relative;
    &:before {
        content: "";
        position: absolute;
        background-color: transparent;
        left: 0;
        margin-top: -7px;
        width: 8px;
        border-bottom: 2px solid $primarycolor;
        height: 12px;
        border-right: 2px solid $primarycolor;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
}
.xpo-icon-yes2 {
    height: 30px;
    position: relative;
    width: 30px;
    background: #dfece7;
    display: inline-block;
    border-radius: 100px;
    &:before {
        content: "";
        position: absolute;
        background-color: transparent;
        left: 11px;
        margin-top: 6px;
        width: 8px;
        border-bottom: 2px solid $greencolor;
        height: 14px;
        border-right: 2px solid $greencolor;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
}
.xpo-icon-close2 {
    height: 30px;
    position: relative;
    width: 30px;
    background: #f1e3e3;
    display: inline-block;
    border-radius: 100px;
    &:after,
    &:before {
        content: "";
        position: absolute;
        left: 14px;
        right: 0;
        height: 14px;
        width: 2px;
        transform: rotate(-45deg);
        background: $redcolor;
        margin-top: 8px;
    }
    &:after {
        transform: rotate(45deg);
    }
    &:before {
        transform: rotate(-45deg);
    }
}
.xpo-arrow-right {
    border: solid #fff;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);

}
.image-left-100 {
    margin-right: -100px; 
}
.xpo-width1000 {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.xpo-width960 {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}
.xpo-width930 {
    max-width: 930px;
    margin-left: auto;
    margin-right: auto;
}
.xpo-width850 {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}
.xpo-width700 {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.xpo-width750 {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}
.xpo-width780 {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}
.xpo-width800 {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.xpo-title-header {
    max-width: 750px;
    margin: 0 auto 50px;
    .xpo-btn {
        display: inline-block;
        margin-top: 35px;
    }
}
.xpo-btn-video {
    a.xpo-video-popup {
        display: inline-block;
        justify-content: center;
    }
}
.xpo-video-popup-icon {
    position: relative;
    padding-right: 25px;
    &::before {
        content: "";
        border-radius: 100%;
        position: absolute;
        top: -1px;
        left: 0;
        padding: 10px;
        border: 2px solid $primarycolor;
    }
    &:after {
        content: "";
        position: absolute;
        border-top: 5px solid transparent;
        border-left: 8px solid $postxcolor;
        border-bottom: 5px solid transparent;
        top: 6px;
        left: 9px;
    }
}
body {
    margin: 0;
    padding: 0;
    background: #F5F7F9;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    font-family: $font-body;
    font-size: $font-size-base;
    line-height: $line-height-base;
    color: $bodycolor2;
    font-weight: 400;
}
.single.single-post {
    background: #fff;
}
a {
    text-decoration: none;
    transition: 400ms;
    color: $primarycolor;
}
p {
	margin-bottom: 10px;
}
dfn, cite, em, i {
	font-style: italic;
}
blockquote {
	margin: 0 1.5em;
}
address {
	margin: 0 0 1.5em;
}
.wp-block-quote {
    &.is-style-large {
        margin: 40px 0;
        padding: 40px;
        background: #fff;
        border-radius: 5px;
        border: 1px solid rgba(229, 229, 229, .7);
        box-shadow: 10px 30px 70px 0 rgba(0, 0, 0, .1);
        > p {
            margin-bottom: 0;
        } 
    }
}
.wp-block-pullquote {
    margin: 30px 0;
    padding: 2em 0;
    blockquote {
        > p {
            margin-bottom: 0;
        } 
    }
}
.xpo-waring {
    background-color: #fff3cd;
    color: #664d03;
    border-left: 4px solid #ffe69c;
    padding: 10px 15px;
    line-height: 1.5;
    font-size: 16px;
    border-radius: 4px;
}
.xpo-success {
    background-color: #d1e7dd;
    color: #156e46;
    border-left: 4px solid #a3cfbb;
    padding: 10px 15px;
    line-height: 1.5;
    font-size: 16px;
    border-radius: 4px;
}

pre {
	background: #fff;
    border: 1px solid rgba(229, 229, 229, .7);
    box-shadow: 10px 30px 70px 0 rgba(0, 0, 0, .1);
	font-size: 18px;
	line-height: 1.6;
	max-width: 100%;
	overflow: auto;
    padding: 1.6em;
    font-family: $font-body;
    border-radius: 5px;
    &.wp-block-code {
        padding: 30px;
        border-radius: 0;
        background: #ffffff;
        background: -moz-linear-gradient(top, #ffffff 50%, #fafafa 50%);
        background: -webkit-linear-gradient(top, #ffffff 50%,#fafafa 50%);
        border-radius: 4px;
        // background: -o-linear-gradient(top, #ffffff 50%,#fafafa 50%);
        // background: linear-gradient(top, #ffffff 50%,#fafafa 50%);
        background-size: 32px 37px;
        font-size: 18px;
        line-height: 34px;
        border: 1px solid rgba(229, 229, 229, .7);
        box-shadow: 10px 30px 70px 0 rgba(0, 0, 0, .1);
        margin-top: 25px;
        transition: 400ms;
        font-family: $font-body;
        white-space: pre-wrap;
        &:hover {
            box-shadow: 0 5px 10px 0 rgba(141,141,141,.3);
        }
    }
}
code, kbd, tt, var {
	font-size: 16px;
    white-space: pre-wrap;
}
abbr, acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}
mark, ins {
	background: #fff9c0;
	text-decoration: none;
}
big {
	font-size: 125%;
}
/* button */
.btn {
    padding: 10px 25px;
}
.xpo-orange {
    color: $orangecolor;
}
.xpo-green {
    color: $greencolor;
}
.xpo-red {
    color: $redcolor;
}
.xpo-pink {
    color: $pinkcolor;
}
.xpo-cyn {
    color: $cyncolor;
}
.xpo-yellow {
    color: $yellowcolor;
}
.xpo-yellow2 {
    color: $yellowcolo2;
}
.xpo-main-color {
    color: $primarycolor;
}
.xpo-gcolor {
    color: $metacolor;
}
.xpo-bcolor2 {
    color: $bodycolor2;
}
.xpo-bcolor {
    color: $bodycolor;
}
.xpo-productx-color {
    color: $productxcolor;
}
.xpo-white {
    color: #fff;
    .xpo-main-title {
        color: #fff;
    }
}
.xpo-card {
    padding: 30px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
    background: #fff;
    border-radius: 4px;
    .xpo-btn {
        display: inline-block;
        margin-top: 30px;
    }
    span {
        display: block;
    }
    h3 {
        font-size: 28px;
        margin-bottom: 15px;
    }
    h4 {
        font-size: 20px;
        margin-bottom: 10px;
    }
    img {
        margin-bottom: 12px;
    }
    &.xpo-primary-card {
        background: $primarycolor;
        color: #fff;
        box-shadow: 0 20px 20px -15px rgba(20, 155, 255, 0.3);
        h3 {
            color: #fff;
        }
    }
}

.xpo-info-box {
    display: flex;
    flex-wrap: wrap;
    &.xpo-center {
        justify-content: center;
        align-items: center;
    }
    img {
        width: 80px;
    }
    h4 {
        width: 100%;
    }
}
.xpo-info-box2 {
    img {
        margin-bottom: 25px;
    }
    h4 {
        margin-bottom: 12px;
        padding: 0 15px;
    }
    div {
        padding: 0 15px;
        color: $metacolor;
    }
}

.xpo-whitebg {
    background: #fff;
}
.xpo-blackbg {
    background: $headingcolor;
}
.xpo-productxbg {
    background: $productxcolor;
}
.xpo-gradientbg {
    background-color: #e4c9e4;
    background-image: linear-gradient( 133deg,#e4c9e4 0,#ffe8c9 100%);
}

.xpo-pink-gradientbg {
    background-color: #FFE4E3;
    background-image: linear-gradient(180deg, #FFE4E3 60%, #F0F2F4 100%);
}

.xpo-container-gray-gradient {
    background-image: linear-gradient(180deg, #DADFE5 12%, #F0F2F4 100%);
}

.xpo-yellow-gradientbg {
    background-image: linear-gradient(180deg, #E9E5BA 0%, #F0F2F4 99%);
}

.xpo-green-gradientbg {
    background-image: linear-gradient(180deg, #A0EADE 0%, #F0F2F4 98%);
}

.xpo-violet-gradientbg {
    background-image: linear-gradient(180deg, #DEC0E3 0%, #F0F2F4 100%);
}
.xpo-stories {
    background-image: linear-gradient(133deg, #F8DBD7 0%, #FFF2E1 100%);
}
.xpo-red-green-gradientbg {
    background-image: linear-gradient(133deg,#ffd7ce 0,#affff3 100%);
}

.xpo-graybg {
    background: $graycolor;
}
.xpo-primarybg {
    background: $primarycolor;
}
.xpo-section-padding {
    padding-top: 100px;
    padding-bottom: 100px;
}
.xpo-section-padding80 {
    padding-top: 80px;
    padding-bottom: 80px;
}
.xpo-section-space {
    margin-bottom: 100px;
}
.xpo-layout-title-wrap {
    &.xpo-title-header {
        max-width: 850px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .xpo-layout-title {
            max-width: 600px;
            .xpo-sub-title {
                max-width: 100%;
                margin-right: 60px;
                max-width: 100%;
            }
            + div {
                margin-left: auto;
            }
        }
        .xpo-btn {
            margin-top: 0;
            margin-left: auto;
        }
    }
}

.left-half-circle,
.xpo-compare-wrapper,
.xpo-productx-overview,
.xpo-category-wrapper,
.xpo-landing-info,
.xpo-feature-wrapper,
.xpo-core-feature-wrapper,
.xpo-productx-cta-testimonial {
    position: relative;
    &:after {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        content: "";
        background-repeat: no-repeat;
    }
    .xpo-container,
    .xpo-title-header {
        position: relative;
        z-index: 1;
    }
}

.left-half-circle,
.right-wishlist-img,
.xpo-layout-wrapper,
.xpo-compare-bg,
.xpo-productx-cta-testimonial {
    position: relative;
    &:before {
        right: 0;
        top: 0;
        position: absolute;
        content: "";
        background-repeat: no-repeat;
    }
    .xpo-container,
    .xpo-title-header {
        position: relative;
        z-index: 1;
    }
}

.xpo-productx-cta-testimonial {
    &:after {
        width: 96px;
        height: 81px;
        background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/left-quote.png');
        left: 70px;
        top: 40px
    }
}
.left-half-circle {
    &:after {
        width: 241px;
        height: 233px;
        background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/half-circle.png');
        
    }
}
.xpo-landing-info {
    &:after {
        background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/no-coding-bg.png');
        background-size: 1500px auto;
        background-position: center 50px;
    }
}
.xpo-feature-wrapper {
    &:after {
        background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/exclusive-feature-bg.png');
        background-size: 1200px auto;
        background-position: center;
        background-repeat: repeat;
        opacity: 0.7;
    }
}
.xpo-core-feature-wrapper {
    &:after {
        background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/core-feature-bg.png');
        background-size: 1500px auto;
        background-position: center;
        background-repeat: no-repeat;
    }
}
.xpo-compare-wrapper {
    &:after {
        width: 240px;
        height:421px;
        background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/compare-icon-min.png');
    }
}

.xpo-productx-overview {
    &:after {
        top: 60px;
        background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/gift-icon-img.png');
        width: 318px;
        height: 343px;
        background-size: cover;
    }
}
.xpo-category-wrapper {
    &:after {
        left: 100px;
        width:833px;
        height: 394px;
        background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/circle-img2.png');
        background-size: cover;
    }  
}

.xpo-productx-cta-testimonial {
    &:before {
        width: 99px;
        height: 81px;
        background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/right-quotation.png');
        top: auto;
        bottom: 60px;
        right: 60px;
    }
}

.left-half-circle {
    &:before {
        right: 60px;
        top: 60px;
        width: 150px;
        height: 150px;
        background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/cirlce.png');
    }
}
.right-wishlist-img {
    &:before {
        width: 341px;
        height: 322px;
        background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/wishlist-icon-bg.png');
        background-size: cover;
    }
}

.xpo-layout-wrapper {
    &:before {
        width: 340px;
        height: 480px;
        background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/rectangle-icon.png');
        background-size: cover;
    }
}

.xpo-compare-bg {
    &:before {
        width: 342px;
        height: 305px;
        background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/product-slider-icon.png');
        background-size: cover;
    }
    .xpo-core-feature {
        position: relative;
        z-index: 1;
    }
}



/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
	line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    box-sizing: border-box;
    margin-top: 0;
}
*,
*:before,
*:after {
	/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}
.xpo-video {
    width: 100%;
}
hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul, ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5em 1.5em;
}

img {
	height: auto;
	/* Make sure images are scaled correctly. */
	max-width: 100%;
	/* Adhere to container width. */
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Screen Reader Text ------------------------ */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
    word-break: normal;
    &:focus {
        background-color: #f1f1f1;
        border-radius: 3px;
        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
        clip: auto !important;
        -webkit-clip-path: none;
        clip-path: none;
        color: $primarycolor;
        display: block;
        font-size: 0.875rem;
        font-weight: 700;
        height: auto;
        right: 5px;
        line-height: normal;
        padding: 15px 23px 14px;
        text-decoration: none;
        top: 5px;
        width: auto;
        z-index: 100000;
    }
}

.xpo-iframe-video {
    padding-bottom: 56.25%;
    position: relative;
    iframe {
        max-width: 100%;
        margin: 0;
        line-height: 1;
        border: none;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
    }
}

//video popup within image
.xpo-video-popup-image {
    position: relative;
    line-height: 0;
    .xpo-video-popup {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        span {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -40px;
            margin-left: -40px;
            &:after {
                content: "";
                position: absolute;
                border-top: 15px solid transparent;
                border-left: 25px solid #fff;
                border-bottom: 15px solid transparent;
                top: 25px;
                left: 30px;
            }
            &:before {
                content: "";
                border-radius: 100%;
                position: absolute;
                top: 0;
                left: 0;
                padding: 40px;
                box-shadow: 0 0 0 15px rgba(65, 81, 255, 0.15);
                background: $primarycolor;
            }
        }
    }
}
.xpo-postx-builder-image {
    .xpo-video-popup {
        position: initial;
        width: auto;
        height: auto;
        span {
            margin-top: -90px;
            margin-left: -90px;
            width: 180px;
            height: 180px;
            border-radius: 100px;
            padding: 0;
            // -webkit-animation: pulse 1.2s ease infinite;
            // animation: pulse 1.2s ease infinite;
            // background: #857fff;
            &:before {
                padding: 50px;
                box-shadow: 0 3px 10px 2px #b496e5, 0 0 0 18px rgb(255 255 255), 0 0 0 40px rgb(122 114 255 / 33%);
                background: #5415ff;
                background-image: linear-gradient(28deg, #5415ff 13%, #857fff 90%);
                border: none;
                top: 40px;
                left: 40px;
            } 
            &:after {
                border-top: 15px solid transparent;
                border-left: 25px solid #fff;
                border-bottom: 15px solid transparent;
                top: 75px;
                left: 80px;
            }
            .xpo-popup-btn-bg {
                -webkit-animation: pulse 1.2s ease infinite;
                animation: pulse 1.2s ease infinite;
                background: #857fff;
                position: absolute;
                width: 120px;
                height: 120px;
                border-radius: 100%;
                top: 16%;
                left: 19%;
                margin-left: -3px;
                margin-top: 3px;
            }
        }
    }
}

.xpo-postx-builder-image.xpo-productx-builder-image .xpo-video-popup span:before {
    box-shadow: 0 3px 10px 2px #f26654, 0 0 0 18px #fff, 0 0 0 40px rgba(255, 118, 49, 0.35);
    background: #FF3F45;
    background-image: linear-gradient(28deg,#FF3F45 13%,#FF987F 90%);
}
.xpo-postx-builder-image.xpo-productx-builder-image .xpo-video-popup span .xpo-popup-btn-bg {
    background: #FF987F;
}

.xpo-feature-video {
    .xpo-video-popup-image {
        .xpo-video-popup span {
            margin-left: 0;
            left: -8%;
        }
    }
}

//list style
.xpo-list {
    list-style: none;
    padding: 0;
    margin: 0;
    li {
        display: inline-block;
        padding: 0 12px;
        margin: 0 12px;
        position: relative;
        &:after {
            content: "";
            background-color: transparent;
            position: absolute;
            left: -8px;
            top: 8px;
            width: 6px;
            border-bottom: 2px solid $primarycolor;
            height: 9px;
            border-right: 2px solid $primarycolor;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }
        &:before {
            position: absolute;
            content: "";
            width: 20px;
            height: 20px;
            border: 1px solid $primarycolor;
            left: -15px;
            top: 4px;
            border-radius: 100px;
        }
        // &.xpo-list-close {
        //     &:after {
        //         border: none !important;
        //         content: "\f335";
        //         font-family: dashicons;
        //         top: 2px;
        //         transform: rotate(0deg);
        //         -webkit-transform: rotate(0deg);
        //         left: -13px;
        //         height: auto;
        //         width: auto;
        //         color: #ff190c;
        //     }
        //     &:before {
        //        border: 1px solid #ff190c !important;  
        //     }
        // }
    }
    &.xpo-list-inline {
        li {
            display: block;
            margin-bottom: 10px;
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
    &.xpo-list-gray {
        li {
            &:after {
                border-bottom: 2px solid $metacolor;
                border-right: 2px solid $metacolor;
            }
            &:before {
                border: 1px solid $metacolor; 
            }
        }
    }
    &.xpo-list-white {
        li {
            &:after {
                border-bottom: 2px solid #fff;
                border-right: 2px solid #fff;
            }
            &:before {
                border: 1px solid #fff; 
            }
        }
    }
}

.xpo-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    li {
        position: relative;
        display: inline-block;
        padding-left: 35px;
        margin-bottom: 20px;
        &:after {
            content: "";
            background-color: transparent;
            position: absolute;
            left: 7px;
            top: 8px;
            width: 6px;
            border-bottom: 2px solid $primarycolor;
            height: 9px;
            border-right: 2px solid $primarycolor;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }
        &:before {
            position: absolute;
            content: "";
            width: 20px;
            height: 20px;
            border: 1px solid $primarycolor;
            left: 0px;
            top: 4px;
            border-radius: 100px;
        }
    }
    &.xpo-check-list-col {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-flow: row wrap;
        -moz-box-orient: horizontal;
        -moz-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        li {
            width: 47%;
        }
    }
}
.xpo-check-fill-green li:before {
    background: #76D055;
    border: 1px solid #76D055;
}
.xpo-check-fill-green li:after {
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
}

.xpo-list-check {
    list-style: none;
    padding: 0;
    margin: 0;
    li {
        position: relative;
        display: inline-block;
        padding-left: 35px;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #e5e5e5;
        line-height: 24px;
        font-size: 16px;
        &:after {
            content: "";
            background-color: transparent;
            position: absolute;
            left: 8px;
            top: 5px;
            width: 7px;
            height: 11px;
            border-bottom: 2.5px solid $primarycolor;
            border-right: 2.5px solid $primarycolor;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }
        &:before {
            position: absolute;
            content: "";
            width: 24px;
            height: 24px;
            left: 0px;
            top: 0px;
            border-radius: 100px;
        }
        &:last-child {
            border-bottom: none;
            padding-bottom: 0;
            margin-bottom: 0;
        }
    }
    &.xpo-list-graybg {
        li {
            &:before {
                background: #F5F5F5;
            }
        }
    }
}


//new landing page
.xpo-postx-start {
    background-color: #E6F2FF;
    background-image: linear-gradient(to bottom, #e5f1ff 1%, #fff 99%);
    padding-top: 150px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding-bottom: 350px;
    &:after {
        background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/postx-hero-bg.png");
        background-size: cover;
        background-position: center 30px;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        content: "";
    }
    .xpo-container,
    .xpo-featured-on {
        position: relative;
        z-index: 1;
    }
}

.xpo-productx-start {
    background-color: #FFFBF8;
    padding-top: 150px;
    position: relative;
    padding-bottom:100px;
    &:after {
        background-image: url("https://www.wpxpo.com/wp-content/uploads/2023/02/productx-hero-bg.png");
        background-size: cover;
        background-position: center -50px;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        content: "";
    }
    .xpo-container {
        position: relative;
        z-index: 1;
    }
}
.xpo-productx-start-header {
    .xpo-btn-xlg {
        font-size: 20px;
        display: inline-block;
    }
}
.xpo-productx-start-header a.xpo-video-popup {
    color: $headingcolor;
}
.xpo-productx-start-header .xpo-video-popup-icon::before {
    border: 2px solid $productxcolor;
}
.xpo-productx-start-header .xpo-video-popup-icon:after {
    border-left: 9px solid $productxcolor;
}


.xpo-satisfy-items.xpo-grid-col3 {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
.xpo-satisfy-item {
    display: grid;
    text-align: left;
    padding: 10px 15px;
    background: #fff;
    border-radius: 4px;
    grid-template-columns: auto 1fr;
    grid-gap: 10px;
    font-size: 14px;
    align-items: center;
    box-shadow: 0 0 30px 4px rgba(0, 0, 0, 0.08);
    svg {
        width: 50px;
    }
}
.xpo-satisfy-info2 {
    padding: 20px;
    border-radius: 10px;
}
.xpo-satisfy-item2 {
    grid-template-columns: auto 1fr;
    display: grid;
    grid-gap: 10px;
    svg {
        width: 50px;
    }
}

.xpo-productx-builder-wrapper {
    position: relative;
    &:after {
        background-image: url("https://www.wpxpo.com/wp-content/uploads/2023/02/builder-bg-shape.png");
        background-size: 1500px auto;
        background-position: center 250px;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        content: "";
    }
    .xpo-container {
        position: relative;
        z-index: 1;
    }
}

.xpo-productx-query-wrapper {
    position: relative;
    &:after {
        background-image: url("https://www.wpxpo.com/wp-content/uploads/2023/02/productx-query-sort-bg.png");
        background-size: 1600px auto;
        background-position: center 250px;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        content: "";
    }
    .xpo-container {
        position: relative;
        z-index: 1;
    }
}

.xpo-productx-feature-wrapper {
    position: relative;
    &:after {
        background-image: url("https://www.wpxpo.com/wp-content/uploads/2023/02/productx-grow-feature-bg.png");
        background-size: 1600px auto;
        background-position: center 250px;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        content: "";
    }
    .xpo-container {
        position: relative;
        z-index: 1;
    }
}



.xpo-postx-overview {
    margin-top: -450px;
}
.xpo-featured-on {
    max-width: 1350px;
    position: relative;
}
.xpo-featured-on-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    grid-gap: 80px;
    padding: 30px 100px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 0 36px rgba(0, 0, 0, 0.05);
    .xpo-featured-title {
        color: #D5D5D5;
    }
}
.xpo-feature-item-wrapper {
    background: #D9ECFF;
    position: relative;
    &:after {
        background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/postx-promo-bg.png");
        background-size: cover;
        background-position: center 0px;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        content: "";
    }
    .xpo-postx-overview,
    .xpo-container {
        position: relative;
        z-index: 1;
    }
}
.xpo-feature-items.xpo-grid-col2 {
    grid-column-gap: 60px;
    grid-row-gap: 70px;
}
.xpo-feature-item {
    img {
        height: 45px;
    }
    .xpo-feature-content {
        background: #fff;
        padding: 30px;
        border-radius: 10px;
    }
}
.xpo-productx-promo-items {
    border: 1px solid #62293F;
    border-radius: 20px;
    overflow: hidden;
}
.xpo-productx-promo-items .xpo-feature-item {
    border-bottom: 1px solid #62293F;
    border-right: 1px solid #62293F;
    &.xpo-border-right-none {
        border-right: none;
    }
    &.xpo-border-bottom-none {
        border-bottom: none;
    }
    .xpo-feature-content {
        border-radius: 0;
        transition: 400ms;
        color: #5D5D5D;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        .xpo-feature-header {
            display: flex;
            align-items: center;
            img {
                width: 40px;
                margin: 0 15px 0 0;
            }
        }
        a {
            display: inline-block;
            color: #FF6845;
            transition: 400ms;
            border-bottom: 1px solid;
            margin-top: auto;
            font-weight: 700;
        }
        &:hover {
            background: #62293F; 
            h4 {
                color: #fff;
            }
            color: #fff;
            a {
                color: #fff;
            }
        }
    }
}

//xpo-postx-blocks-addons
.xpo-postx-blocks-addons {
    background: radial-gradient(circle, rgba(19,25,142,1) 0%, rgba(48,56,227,1) 62%, rgba(116,122,255,1) 100%);
    position: relative;
    &:after {
        background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/postx-block-addon-bg.png");
        background-size: 1920px auto;
        background-position: center 0px;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        content: "";
    }
    .xpo-container {
        position: relative;
        z-index: 1;
    }
}
.xpo-postx-blocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 60px;
    grid-row-gap: 40px;
    background: #fff;
    padding: 55px 55px 0;
    margin-bottom: 50px;
    border-radius: 20px;
    align-items: center;
    &:last-child {
        margin-bottom: 0;
    }
}
.xpo-postx-blocks-content {
    max-width: 400px;
}
.xpo-postx-blocks-image {
    line-height: 0;
}

//postx slider 
.xpo-postx-slider-wrapper {
    background: #D9ECFF;
    position: relative;
    &:after {
        background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/postx-slider-bg.png");
        background-size: 1920px auto;
        background-position: center;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        content: "";
    }
    .xpo-container {
        position: relative;
        z-index: 1;
    }
}

.xpo-postx-slider {
    background: #fff;
    border-radius: 6px;
    padding: 12px 35px;
    margin-bottom: 25px;
    margin-top: 70px;
}
.xpo-slider-check {
    list-style: none;
    padding: 0;
    margin: 0;
}

.xpo-slider-check li {
    display: inline-block;
    margin-right: 30px;
    position: relative;
    padding-left: 20px;
    font-weight: 700;
    font-size: 14px;
}
.xpo-slider-check li:last-child {
    margin-right: 0;
}
.xpo-slider-check li:before {
    position: absolute;
    content: "";
    width: 12px;
    height: 12px;
    left: 0;
    top: 6px;
    border-radius: 100px;
    background: #5bc467;
}
.xpo-slider-check li:after{
    content: "";
    background-color: transparent;
    position: absolute;
    left: 4px;
    top: 8px;
    width: 4px;
    height: 6px;
    border-bottom: 1.5px solid #fff;
    border-right: 1.5px solid #fff;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}


//xpo-postx-feature-wrapper
.xpo-postx-feature-wrapper {
    background: #EFF5FD;
    position: relative;
    &:after {
        background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/postx-feature-bg.png");
        background-size: 1570px auto;
        background-position: center 180px;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        content: "";
    }
    .xpo-container {
        position: relative;
        z-index: 1;
    }
}
.xpo-feature-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 60px;
    grid-row-gap: 40px;
    border-radius: 20px;
    align-items: center;
}
.xpo-productx-blocks-addons .xpo-feature-left {
    grid-column-gap: 100px;
}
.xpo-card-feature {
    border-radius: 20px;
    padding: 55px;
}
.xpo-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 60px;
}
.xpo-feature-grid .xpo-card-feature {
    padding: 35px 55px;
}
.xpo-feature-grid .xpo-postx-blocks-content {
    max-width: 100%;
}
.xpo-card-feature .xpo-postx-blocks-image {
    margin: -30px -55px 30px;
    padding: 30px 55px;
    border-radius: 20px 20px 0 0;
}

.xpo-tap-content .xpo-card-feature .xpo-postx-blocks-image {
    margin: 0;
    padding: 0;
}

.xpo-cta-wrapper {
    padding: 70px 90px;
    background-color: #000B8B;
    background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/cta-bg.png");
    background-size: 1570px auto;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
}
.xpo-cta-wrapper2 {
    background-color: #5b40f4;
    background-image: url("https://www.wpxpo.com/wp-content/uploads/2023/03/productx-cta-middle.png");
}
.xpo-cta-left {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-column-gap: 90px;
    align-items: center;
}

//xpo-postx-list-wrapper
.xpo-postx-list-wrapper {
    background-color: #EFF5FD;
    position: relative;
    &:after {
        background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/postx-feature2.png");
        background-size: cover;
        background-position: center 120px;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        content: "";
    }
    .xpo-container {
        position: relative;
        z-index: 1;
    }
}
.xpo-postx-list {
    padding: 0;
    margin: 0;
    text-align: center;
}
.xpo-postx-list li {
    display: inline-block;
    padding: 18px 40px;
    border-radius: 10px;
    box-shadow: 3px 3px 6px 0 rgba(3, 127, 255, 0.20);
    background: #fff;
    font-size: 24px;
    font-weight: 700;
    margin: 10px;
    text-align: center;
}
.xpo-productx-list li {
    font-size: 16px;
    padding: 15px 30px;
    margin: 5px;
    border-radius: 5px;
}

//xpo-offer-faq-wrapper
.xpo-offer-faq-wrapper {
    background: #EFF5FD;
    position: relative;
    &:after {
        background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/postx-faq-bg.png");
        background-size: 1920px auto;
        background-position: center 100px;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        content: "";
    }
    .xpo-container {
        position: relative;
        z-index: 1;
    }
}
.productx-cta-wrapper:after {
    display: none;
}

//xpo-postx-builder
.xpo-postx-builder-wrapper {
    background: #EFF5FD;
}

.xpo-web-creation {
    padding: 100px 0;
    background: #fff;
}
.xpo-creation-content {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 70px auto 0;
}

.xpo-creation-content {
    ul {
        padding: 0;
        margin: 0px;
        width: 750px;
        li {
            list-style: none;
            text-align: center;
            font-family: $font-heading;
            line-height: 24px;
            margin: 10px 0 10px 0;
            color: $headingcolor;
            cursor: pointer;
            text-align: left;
        }
    }
}

.xpo-creation-content {
    > ul {
        li {
            font-size: 22px;
            span {
                padding: 12px 22px;
                display: inline-block;
                font-weight: 700;
                em {
                    font-style: inherit;
                    font-size: 14px;
                    line-height: 18px;
                    margin-top: 10px;
                    display: none;
                }
            }
            &.active {
                span {
                    em {
                        display: block;
                    }
                    background: #00174B;
                    color: #fff;
                    border-radius: 2px;
                    // margin-left: 22px;
                    position: relative;
                    &::before {
                        content: "";
                        position: absolute;
                        right: -24px;
                        top: 50%;
                        margin-top: -12px;
                        border-style: solid;
                        border-color: transparent transparent transparent #00174B;
                        border-width: 12px 12px;
                    }
                }
            }
        }
    }
    .xpo-creation-more {
        font-size: 22px;
        margin-left: 20px;
        color: rgba(0, 0, 0, 0.4);
        text-decoration: underline;
    }
}

.xpo-web-creation-productx .xpo-creation-content>ul li.active span::before {
    border-color: transparent transparent transparent #FFCFAC;
}
.xpo-web-creation-productx .xpo-creation-content>ul li.active span {
    background: #FFCFAC;
    color: $headingcolor;
}

.xpo-creation-image {
    margin-left: auto;
    text-align: right;
    ul {
        width: auto !important;
        li {
            margin: 0;
            text-align: right;
            display: none;
            &.active {
                display: block;
            }
        }
    }
    img {
        max-width: 95%;
    }
    .xpo-live-video {
        width: 90%;
    }
}

//xpo-tap-content-nav
.xpo-tap-content-nav {
    ul {
        padding: 0;
        margin: 0 0 30px;
        list-style: none;
        text-align: center;
        > li {
            display: inline-block;
            margin: 0 15px;
            > span {
                padding: 10px 20px;
                display: inline-block;
                box-shadow: 0 3px 6px 0 rgba(0, 109, 222, 0.47);
                border-radius: 100px;
                font-size: 16px;
                cursor: pointer;
                background: #fff;
            }
            &.active {
                > span {
                    background: #00174B;
                    color: #fff;
                    position: relative;
                    box-shadow: 5px 10px 20px 0 rgba(13, 3, 255, 0.24);
                    &:after {
                        content: "";
                        border-width: 20px 20px;
                        border-style: solid;
                        border-color: transparent transparent #fff transparent;
                        position: absolute;
                        top: 34px;
                        left: 50%;
                        margin-left: -20px;
                    }
                }
            }
        }
    }
}

.xpo-tap-content {
    ul {
        text-align: left;
        margin-bottom: 0;
        li {
            display: none;
            &.active {
                display: block;
            }
        }
    }
}
.xpo-tap-content-nav.xpo-productx-content-nav ul>li.active>span {
    background: #f66e50;
    box-shadow: 5px 10px 20px 0 rgba(246, 110, 80, .40);
}
.xpo-tap-content-nav.xpo-productx-content-nav ul>li>span {
    box-shadow: 0 3px 6px 0 rgba(246, 110, 80, .60);
}

//review
.xpo-review-container {
    padding: 20px;
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-gap: 70px;
    align-items: center;
    &.xpo-container {
        padding: 50px 80px;
        border-radius: 20px;
        border: 1px solid #b6c2e5;
        background: #fff;
    }
}
.xpo-review-img {
    display: block;
}
.xpo-review-content {
    width: 100%;
    > div {
        padding-top: 50px;
    }
}
.xpo-review-content .xpo-review-quate {
    position: relative;
}
.xpo-review-content .xpo-review-quate::after {
    content: '“';
    position: absolute;
    height: 0px;
    top: -70px;
    text-align: left;
    font-family: $font-heading;
    font-size: 150px;
    font-weight: bold;
    color: $primarycolor;
}
.xpo-review-content .xpo-review-text {
    margin-bottom: 20px;
    text-align: left;
    font-family: $font-heading;
    font-size: 28px;
    color: $headingcolor;
}
.xpo-review-content .xpo-review-name {
    text-align: left;
    font-family: $font-heading;
    font-size: 18px;
    color: #070c1a;
} 
.xpo-review-content .xpo-reviewer-position {
    text-align: left;
    font-family: $font-heading;
    font-size: 18px;
    color: $primarycolor;
}

//postx feature landing
.postx-feature-landing-1,
.postx-feature-landing-2,
.postx-feature-landing-3,
.postx-feature-landing-4 {
    position: relative;
    &:after {
        background-repeat: no-repeat;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        content: "";
    }
    .xpo-container {
        position: relative;
        z-index: 1;
    }
}
.postx-feature-landing-1 {
    &:after {
        background-size: 1444px auto;
        background-position: center 100px;
        background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/postx-feature-landing-bg1.png");
    }
}

.postx-feature-landing-2 {
    &:after {
        background-size: 1500px auto;
        background-position: center 100px;
        background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/postx-feature-landing-bg2.png");
    }
}

.postx-feature-landing-3 {
    &:after {
        background-size: 1444px auto;
        background-position: center 150px;
        background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/postx-feature-landing-bg3.png");
    }
}

.postx-feature-landing-4 {
    &:after {
        background-size: 1600px auto;
        background-position: center 150px;
        background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/postx-feature-landing-bg4.png");
    }
}

//Progress Bar
.xpo-progressbar-wrapper {
    background: #000B62;
    position: relative;
    &:after {
        background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/postx-performance-bg.png");
        background-size: cover;
        background-position: center 0px;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        content: "";
    }
    .xpo-container {
        position: relative;
        z-index: 1;
    }
}

.xpo-progressbar {
    position: relative;
    max-width: 180px;
    text-align: center;
    margin: 0 auto;
}
.xpo-progressbar svg {
    width: 180px;
    height: 180px;
    margin: 0 auto;
    text-align: center;
}
.progressbar-value {
    font-size: 32px;
    font-weight: 700;
    position: absolute;
    top: 61%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
}
.progressbar-title {
    display: inline-block;
    margin-bottom: 20px;
    font-size: 28px;
    color: #fff;  
    font-weight: 700;
}  
.xpo-bar-1,
.xpo-bar-2,
.xpo-bar-3,
.xpo-bar-4 {
    fill: none;
    stroke-width: 8px;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
  }
.xpo-bar-bg {
    fill: none;
    stroke-width: 36px;
    stroke: #001138;
}
.xpo-bar-1 {
    stroke: #41C5FF;
    filter: drop-shadow(0 0px 5px #2196f3);
}
.xpo-bar-2 {
    stroke: #00FFB1;
    filter: drop-shadow(0 0px 5px #00FFB1);
}
.xpo-bar-3 {
    stroke: #FFD972;
    filter: drop-shadow(0 0px 5px #FFD972);
}
.xpo-bar-1,
.xpo-bar-2,
.xpo-bar-3 {
    stroke-dasharray: 440;
    stroke-dashoffset: 0;
    animation: progress-2 .75s ease-out;
}
.xpo-bar-4 {
    stroke: #FF71A7;
    stroke-dasharray: 470;
    stroke-dashoffset: 50;
    animation: progress-2 .75s ease-out;
    filter: drop-shadow(0 0px 5px #FF71A7);
}
  
@keyframes progress-1 {
      from {
          stroke-dashoffset: 440;
      }
      to {
          stroke-dashoffset: 0;
      }
}
  
@keyframes progress-2 {
    from {
      stroke-dashoffset: 470;
    }
    to {
      stroke-dashoffset: 50;
    }
}

.xpo-live-video {
    pointer-events: none;
    // border: 15px solid #fff;
    border-radius: 8px;
    // box-shadow: 0 20px 80px -12px rgb(50 50 93 / 30%), 0 20px 40px -20px rgb(0 0 0 / 30%), 0 -15px 50px -10px rgb(0 0 0 / 35%);
    width: 100%;
}

//footer
.xpo-footer-brand {
    img {
        max-width: 70%;
        margin-bottom: 20px;
    }
    color: rgba(255,255,255,.6);
    font-size: 14px;
    line-height: 25px;
    >div {
        padding-right: 20px;
    }
}

.xpo-title-shape {
    position: relative;
    &:after {
        position: absolute;
        left: 0;
        bottom: 6px;
        height: 17px;
        width: calc(100% + 12px);
        background: #ffce96;
        content: "";
        border-radius: 10px;
        z-index: -1;
        margin-left: -6px;
        transform: skewX(-30deg);
    }
}

@media (max-width: 1200px) {
    .xpo-tap-content-nav ul>li>span {
        padding: 7px 12px;
        font-size: 14px;
    }
    .xpo-tap-content-nav ul>li {
        margin: 0 5px;
    }
    .video-bg { 
        margin-left: -53px;
    }
    .xpo-review-container {
        grid-template-columns: 200px 1fr;
        grid-gap: 50px;
    }
}

@media (max-width: 992px) {
    .xpo-main-title42,
    .xpo-main-title44 {
        font-size: 32px;
    }
    .xpo-space-pt130 {
        padding-top: 100px;
    }
    .xpo-space-pt150 {
        padding-top: 110px;
    }
    .xpo-postx-start {
        padding-top: 110px;
        padding-bottom: 150px;
    }
    .xpo-postx-overview {
        margin-top: -250px;
    }
    .xpo-featured-on-item {
        grid-gap: 20px;
        padding: 20px 50px;
    }
    .video-bg { 
        max-width: 100%;
        height: auto;
        padding: 83px;
        background-position: 50% 59%;
        background-size: 723px;
        margin-left: 0;
        margin-top: -30px;
    }
    .xpo-satisfy-item {
        > img {
            display: none;
        }
    }
    .xpo-postx-builder-image .xpo-popup-btn-bg {
        top: 25%;
        left: 39%;
    }
    .xpo-tap-content-nav ul>li>span {
        padding: 6px 10px;
        font-size: 13px;
    }
    .xpo-tap-content-nav ul>li {
        margin: 0 5px 10px;
    }
    .xpo-tap-content-nav ul>li.active>span:after {
        display: none;
    }
    .xpo-feature-item .xpo-feature-content {
        padding: 25px;
    }
    .xpo-feature-item .xpo-feature-content h4  {
        font-size: 18px;
    }
    .xpo-feature-item .xpo-feature-content span {
        font-size: 14px;
    }
    .xpo-creation-content ul li {
        margin: 5px 0 5px 0;
    }
    .xpo-creation-content>ul li span {
        padding: 8px 20px;
    }
    .xpo-postx-blocks {
        padding: 30px 30px 0;
    }
    .xpo-postx-blocks .xpo-main-title42 {
        font-size: 24px;
    }
    .xpo-postx-blocks .xpo-title20 {
        font-size: 16px;
    }
    .xpo-slider-check li {
        margin-right: 20px;
    }
    .xpo-card-feature {
        padding: 30px;
    }
    .xpo-feature-grid .xpo-card-feature {
        padding: 30px;
    }
    .xpo-card-feature .xpo-postx-blocks-image {
        margin: -30px -30px 30px;
    }
    .xpo-postx-blocks-content .xpo-main-title42 {
        font-size: 24px;
    }
    .xpo-feature-grid {
        grid-column-gap: 50px;
    }
    .xpo-cta-wrapper {
        padding: 40px;
    }
    .xpo-cta-left .xpo-cta-content {
        margin-bottom: 40px;
    }
    .xpo-cta-left {
        display: block;
    }
    .xpo-postx-list li {
        margin: 5px;
        font-size: 20px;
        padding: 10px 20px;
    }
    .xpo-sm-mb20 {
        margin-bottom: 20px;
    }
    .xpo-sm-mb25 {
        margin-bottom: 25px;
    }
    .xpo-sm-mb40 {
        margin-bottom: 40px;
    }
    .xpo-sm-mb50 {
        margin-bottom: 50px;
    }
    .xpo-sm-mt50 {
        margin-top: 50px;
    }
    .xpo-btn-group {
        .xpo-btn-postx-light {
            &:last-child {
                margin-top: 10px;
                margin-left: 0 !important;
            }
        }
    }
    //compare
    .postx-compare-hero .xpo-feature-left {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .video-bg { 
        max-width: 100%;
        height: auto;
        padding: 60px;
        background-position: 50% 57%;
        background-size: 480px;
        margin-top: 0;
    }
    .xpo-main-title42 {
        font-size: 32px;
    }
    .xpo-title22 {
        font-size: 18px;
    }
    .xpo-satisfy-item {
        > img {
            display: none;
        }
    }
    .xpo-reviews-rating h4 {
        font-size: 16px;
    }
    .xpo-feature-left {
        grid-template-columns: 1fr;
    }
    .xpo-review-container {
        grid-template-columns: 1fr;
        grid-gap: 40px;
    }
    .xpo-featured-on-item {
        grid-template-columns: 1fr;
    }
    .xpo-postx-blocks {
        grid-template-columns: 1fr;
        padding: 30px;
    }
    .xpo-feature-grid {
        grid-template-columns: 1fr;
        grid-gap: 50px;
    }
    .xpo-btn-group {
        .xpo-btn-postx-light {
            &:last-child {
                margin-top: 0;
                margin-left: 10px !important;
            }
        }
    }
    .xpo-feature-video .xpo-video-popup-image .xpo-video-popup span {
        margin-left: -90px;
        left: 50%;
    }
}

.xpo-landing-footer {
    background: #f8f8f8;
    border-top: 1px solid #e5e5e5;
    .xpo-footer-inner {
        padding: 50px 0;
        .xpo-footer-img {
            img {
                width: 250px;
            }
            margin-bottom: 40px;
        }
        .xpo-footer-brand {
            p {
                margin: 0;
                font-size: 20px;
                a {
                    text-decoration: underline;
                    font-weight: 700;
                }
            }
            margin-bottom: 60px;
        }
        .xpo-footer-menu {
            list-style: none;
            margin: 0;
            padding: 0;
            li {
                display: inline-block;
                margin: 0 20px;
                font-size: 22px;
                a {
                    color: $metacolor;
                    transition: 400ms;
                    &:hover {
                        color: $primarycolor;
                    }
                }
            }
        }
    }
}
span.typed-text {
    color: #ff5845;
}
span.cursor {
    display: inline-block;
    background-color: red;
    margin-left: 0.1rem;
    width: 2px;
    animation: blink 1s infinite;
    line-height: 1;
  }
span.cursor.typing {
    animation: none;
}
@keyframes blink {
    0%  { background-color: #ff5845; }
    49% { background-color: #ff5845; }
    50% { background-color: #ff5845; }
    99% { background-color: #ff5845; }
    100%  { background-color: #ff5845; }
}
Leave a Comment