﻿.zig-zag-container {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 20px;
}

.zig-zag-container .zig-zag-item {
    display: flex;
    padding: 40px;
    align-items: center;
}

.zig-zag-container .zig-zag-item:nth-child(even) {
    flex-direction: row;
    background-color:#ffffff;
}

.zig-zag-container .zig-zag-item:nth-child(odd) {
    flex-direction: row-reverse;
}

.bg-blue .zig-zag-container .zig-zag-item:nth-child(odd) {
    background-color: #005a73;
}

.bg-yellow .zig-zag-container .zig-zag-item:nth-child(odd) {
    background-color: #fdb728;
}

.bg-grey .zig-zag-container .zig-zag-item:nth-child(odd) {
    background-color: #b0bbc3;
}

.bg-tahunasands .zig-zag-container .zig-zag-item:nth-child(odd) {
    background-color: #FAF7D6;
}

.bg-red .zig-zag-container .zig-zag-item:nth-child(odd) {
    background-color: #ff5454;
}

.bg-lightgray .zig-zag-container .zig-zag-item:nth-child(odd) {
    background-color: #d0d0d0;
}

.bg-lightblue .zig-zag-container .zig-zag-item:nth-child(odd) {
    background-color: #94d3da;
}

.zig-zag-item .btn{
    background-color: #fff;
}

.zig-zag-rte-block {
    width: 70%;
    padding: 0px 30px;
}

.zig-zag-rte-block .rte-block ul,
.zig-zag-rte-block .rte-block ul li {
    list-style-type: disc;
    margin-left: 20px;
}

.zig-zag-rte-block .rte-block ul li,
.zig-zag-rte-block .rte-block ol li {
   color: #605f5f;
   font-size: 16px;
   line-height: 22px;
   margin: 0 0 20px 0;
}

.zig-zag-rte-block .text-blue * {
    color: #005a73;
}
.zig-zag-rte-block .text-black * {
    color: #000000;
}
.zig-zag-rte-block .text-white * {
    color: #eceeee;
}
.zig-zag-rte-block .text-yellow *{
    color: #fdb728;
}

.zig-zag-rte-block .text-gray *{
    color: #b0bbc3;
}

.zig-zag-rte-block .text-lightgray * {
    color: #d0d0d0;
}

.zig-zag-rte-block .text-lightblue * {
    color: #94d3da;
}

.zig-zag-container .zig-zag-item .zig-zag-image-block {
    width: 50%;
    height: 390px;
    position: relative;
    margin: 0 auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 35%);
    border-radius: 5px;
}

.zig-zag-container .zig-zag-item .zig-zag-video-block {
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 35%);
    border-radius: 5px;
    background-position: center;
    background-size: cover;
}

.zig-zag-rte-block .rte-block.text-blue ul li,
.zig-zag-rte-block .rte-block.text-blue ol li {
    color: #005a73;
}
.zig-zag-rte-block .rte-block.text-black ul li,
.zig-zag-rte-block .rte-block.text-black ol li {
    color: #000000;
}
.zig-zag-rte-block .rte-block.text-white ul li,
.zig-zag-rte-block .rte-block.text-white ol li {
    color: #eceeee;
}
.zig-zag-rte-block .rte-block.text-yellow ul li,
.zig-zag-rte-block .rte-block.text-yellow ol li {
    color: #fdb728;
}
.zig-zag-rte-block .rte-block.text-gray ul li,
.zig-zag-rte-block .rte-block.text-gray ol li {
    color: #b0bbc3;
}
.zig-zag-rte-block .rte-block.text-lightgray ul li,
.zig-zag-rte-block .rte-block.text-lightgray ol li {
    color: #d0d0d0;
}
.zig-zag-rte-block .rte-block.text-lightblue ul li,
.zig-zag-rte-block .rte-block.text-lightblue ol li {
    color: #94d3da;
}

    @media (max-width: 1023px) {
        .zig-zag-rte-block {
            padding: 12px;
        }
    }

    @media (max-width: 639px) {
        .zig-zag-container .zig-zag-item:nth-child(even) {
            flex-direction: column;
            padding: 0px;
            padding-bottom: 30px;
        }

        .zig-zag-container .zig-zag-item:nth-child(odd) {
            flex-direction: column;
            padding: 0px;
            padding-bottom: 30px;
        }

        .zig-zag-rte-block {
            width: 100%;
            padding: 12px 0px;
        }

        .zig-zag-container .zig-zag-item .zig-zag-image-block {
            width: 100%;
        }
    }