.cta{
    color: var(--color-black);
    text-transform: uppercase;
    display: flex;
    font-family: var(--font-primary-bold);
    font-size: var(--cta-font-size);
    line-height: var(--cta-font-line-height);
    align-items: center;
}
.cta.with-border{
    border: 1px solid var(--color-black);
    padding: var(--cta-spacing);
}
.cta:before{
    content: '';
    width: 60px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="29" viewBox="0 0 60 29"> <g id="Group_5674" data-name="Group 5674" transform="translate(-2488 -1953)"> <rect id="Rectangle_1916" data-name="Rectangle 1916" width="60" height="29" transform="translate(2488 1953)" fill="none"/> <g id="Group_5673" data-name="Group 5673" transform="translate(-0.651 0.5)"> <g id="Group_5672" data-name="Group 5672" transform="translate(13.502)"> <g id="Group_5041" data-name="Group 5041" transform="translate(2475.149 1964.862)"> <path id="Path_1225" data-name="Path 1225" d="M0,0H54.681" fill="none" stroke="%23232323" stroke-width="2"/> </g> <g id="Group_5042" data-name="Group 5042" transform="translate(2475.149 1969.398)"> <path id="Path_1226" data-name="Path 1226" d="M0,0H54.681" fill="none" stroke="%23232323" stroke-width="2"/> </g> </g> <g id="Group_5043" data-name="Group 5043" transform="translate(2532.626 1954.5)"> <path id="Path_1227" data-name="Path 1227" d="M0-12,12.63-24.63,0-37.26" transform="translate(0 37.26)" fill="none" stroke="%23232323" stroke-width="4"/> </g> </g> </g> </svg>');
    margin-right: var(--cta-spacing);
    background-repeat: no-repeat;
    display: block;
    flex-grow: 0;
    flex-shrink: 0;
    height: 29px;
}


.cta.theme-red{
    color: var(--color-red);
}
.cta.with-border.theme-red{
    border: 1px solid var(--color-red);
}

.cta.theme-red:before{
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="29" viewBox="0 0 60 29"> <g id="Group_5674" data-name="Group 5674" transform="translate(-2488 -1953)"> <rect id="Rectangle_1916" data-name="Rectangle 1916" width="60" height="29" transform="translate(2488 1953)" fill="none"/> <g id="Group_5673" data-name="Group 5673" transform="translate(-0.651 0.5)"> <g id="Group_5672" data-name="Group 5672" transform="translate(13.502)"> <g id="Group_5041" data-name="Group 5041" transform="translate(2475.149 1964.862)"> <path id="Path_1225" data-name="Path 1225" d="M0,0H54.681" fill="none" stroke="%23FF4646" stroke-width="2"/> </g> <g id="Group_5042" data-name="Group 5042" transform="translate(2475.149 1969.398)"> <path id="Path_1226" data-name="Path 1226" d="M0,0H54.681" fill="none" stroke="%23FF4646" stroke-width="2"/> </g> </g> <g id="Group_5043" data-name="Group 5043" transform="translate(2532.626 1954.5)"> <path id="Path_1227" data-name="Path 1227" d="M0-12,12.63-24.63,0-37.26" transform="translate(0 37.26)" fill="none" stroke="%23FF4646" stroke-width="4"/> </g> </g> </g> </svg>');
}


.cta-show-all{

    color: var(--color-red);
    text-transform: uppercase;
    display: flex;
    font-family: var(--font-primary-bold);
    font-size: var(--cta-font-size);
    line-height: var(--cta-font-line-height);
    align-items: center;
    cursor: pointer;

}
.cta-show-all:after{
    content: '';
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><defs><clipPath id="a"><path data-name="Path 1341" d="M.6-18A17.4 17.4 0 0 0 18-.6 17.4 17.4 0 0 0 35.4-18 17.4 17.4 0 0 0 18-35.4 17.4 17.4 0 0 0 .6-18" fill="none"/></clipPath><clipPath id="b"><path data-name="Path 1343" d="M0 0h36v-36H0Z" fill="none"/></clipPath></defs><g data-name="Group 6896"><g data-name="Group 5431" transform="translate(0 36)"><g data-name="Group 5429"><path data-name="Path 1339" d="M26-18H10" fill="none" stroke="%23ff4644" stroke-width="1.2"/></g><g data-name="Group 5430"><path data-name="Path 1340" d="M18-10v-16" fill="none" stroke="%23ff4644" stroke-width="1.2"/></g></g><g data-name="Group 5433" transform="translate(0 36)"><g data-name="Group 5432"><path data-name="Path 1342" d="M18-.6A17.4 17.4 0 0 0 35.4-18 17.4 17.4 0 0 0 18-35.4 17.4 17.4 0 0 0 .6-18 17.4 17.4 0 0 0 18-.6Z" fill="none" stroke="%23ff4644" stroke-width="1.2"/></g></g></g></svg>');
    background-repeat: no-repeat;
    display: block;
    flex-grow: 0;
    flex-shrink: 0;
    width: 36px;
    margin-left: 12px;
    height: 36px;
}
.cta-show-less{

    color: var(--color-red);
    text-transform: uppercase;
    display: none;
    font-family: var(--font-primary-bold);
    font-size: var(--cta-font-size);
    line-height: var(--cta-font-line-height);
    align-items: center;
    cursor: pointer;

}
.cta-show-less:after{
    content: '';
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36" viewBox="0 0 36 36"><defs><clipPath id="a"><path d="M.6-18A17.4,17.4,0,0,0,18-.6h0A17.4,17.4,0,0,0,35.4-18h0A17.4,17.4,0,0,0,18-35.4h0A17.4,17.4,0,0,0,.6-18" fill="none"/></clipPath><clipPath id="b"><path d="M0,0H36V-36H0Z" fill="none"/></clipPath></defs><g transform="translate(0 36)"><g><g transform="translate(26 -18)"><path d="M0,.6H-16V-.6H0Z" fill="%23ff4644"/></g></g><g><g transform="translate(18 -0.6)"><path d="M0,.6A17.889,17.889,0,0,1-7.007-.815a17.938,17.938,0,0,1-5.721-3.857,17.938,17.938,0,0,1-3.857-5.721A17.889,17.889,0,0,1-18-17.4a17.889,17.889,0,0,1,1.415-7.007,17.938,17.938,0,0,1,3.857-5.721,17.938,17.938,0,0,1,5.721-3.857A17.888,17.888,0,0,1,0-35.4a17.888,17.888,0,0,1,7.007,1.415,17.938,17.938,0,0,1,5.721,3.857,17.938,17.938,0,0,1,3.857,5.721A17.889,17.889,0,0,1,18-17.4a17.889,17.889,0,0,1-1.415,7.007,17.938,17.938,0,0,1-3.857,5.721A17.938,17.938,0,0,1,7.007-.815,17.889,17.889,0,0,1,0,.6ZM0-34.2A16.819,16.819,0,0,0-16.8-17.4,16.819,16.819,0,0,0,0-.6,16.819,16.819,0,0,0,16.8-17.4,16.819,16.819,0,0,0,0-34.2Z" fill="%23ff4644"/></g></g></g></svg>');
    background-repeat: no-repeat;
    display: block;
    flex-grow: 0;
    flex-shrink: 0;
    width: 36px;
    margin-left: 12px;
    height: 36px;
}
@media (max-width: 480px) {

    .cta:before{
        content: '';
        width: 36px;
        height: 18px;
        background-size: 36px;
    }

}
@media (min-width: 481px) and (max-width: 860px){

    .cta:before {
        content: '';
        width: 42px;
        margin-right: var(--cta-spacing);
        background-repeat: no-repeat;
        display: block;
        flex-grow: 0;
        flex-shrink: 0;
        height: 18px;
        background-size: 39px;
    }

}