﻿.min-height-500 {
    min-height: 500px;
}

.color-pink {
    background-color: #ec068d !important;
}

    .color-pink:hover {
        background-color: #ca0679 !important;
    }
/*===================== START COMMON SHAPED BOX styles =========================*/
.two-side-shaped-box {
    -webkit-clip-path: polygon(0 0, 91% 0%, 100% 15%, 100% 100%, 10% 100%, 0% 86%);
    clip-path: polygon(0 0, 91% 0%, 100% 15%, 100% 100%, 10% 100%, 0% 86%);
    background-color: #c5c5d9;
}


.col-md-6 .two-side-shaped-box {
    height: 280px;
}

.col-md-4 .two-side-shaped-box {
    height: 200px;
}

.two-side-shaped-box.bg-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.two-side-shaped-box .content-container {
    background-color: #f0f0f5;
    margin-left: 8%;
    margin-right: 8%;
    padding: 4% 3%;
    text-decoration: none;
    color: #000;
}

.two-side-shaped-box.bg-image .content-container {
    background-color: rgba(255, 255, 255, 0.78);
}

.two-side-shaped-box .content-container:hover {
    background-color: #fff;
    box-shadow: 5px 5px 19px rgb(35, 35, 35);
}

.two-side-shaped-box .content-container .text {
    text-align: center;
}

    .two-side-shaped-box .content-container .text p {
        font-weight: 600;
        font-size: 16px;
        text-transform: uppercase;
    }

.two-side-shaped-box .content-container .arrow-img {
    width: 10%;
}

    .two-side-shaped-box .content-container .arrow-img img {
        width: 100%;
    }


.three-side-shaped-box-long {
    -webkit-clip-path: polygon(0 0, 98% 0, 100% 29%, 100% 73%, 98% 100%, 2% 100%, 0 73%);
    clip-path: polygon(0 0, 98% 0, 100% 29%, 100% 73%, 98% 100%, 2% 100%, 0 73%);
    background-color: #8dc641;
    height: 75px;
}

    .three-side-shaped-box-long:hover {
        background-color: #83bb39
    }

    .three-side-shaped-box-long a {
        color: #fff;
        text-decoration: none;
        font-weight: 700;
    }

        .three-side-shaped-box-long a img {
            width: 3%;
            margin-left: 1%;
        }

.two-side-shaped-box-opposite {
    -webkit-clip-path: polygon(98% 0%, 100% 32%, 100% 100%, 2% 100%, 0% 68%, 0 0);
    clip-path: polygon(98% 0%, 100% 32%, 100% 100%, 2% 100%, 0% 68%, 0 0);
    background-color: #f0f0f5;
    height: 75px;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}




/*.common-shaped-box-bg-image {
    -webkit-clip-path: polygon(0 0, 91% 0%, 100% 15%, 100% 100%, 10% 100%, 0% 86%);
    clip-path: polygon(0 0, 91% 0%, 100% 15%, 100% 100%, 10% 100%, 0% 86%);
    background-color: #c5c5d9;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    text-align: center;
}

    .common-shaped-box-bg-image a {
        text-decoration: none;
        font-weight: 700;
        background-color: rgba(255, 255, 255, 0.78);
        margin: auto;
        padding: 9% 7% 9% 9%;
        color: #000;
        line-height: 200px;
    }

        .common-shaped-box-bg-image a:hover {
            background-color: rgba(255, 255, 255, 1);
            box-shadow: 5px 5px 19px rgb(80, 80, 80);
        }

        .common-shaped-box-bg-image a img {
            width: 3rem;
        }*/


.downloadable-docs .doc-container {
    text-align: center;
}

    .downloadable-docs .doc-container .guide-title {
        color: #2aabe1;
        text-transform: uppercase;
        text-align: center;
       height: 75px;
    }

    .downloadable-docs .doc-container .shaped-box {
        -webkit-clip-path: polygon(0 0, 88% 0%, 100% 20%, 100% 100%, 12% 100%, 0% 84%);
        clip-path: polygon(0 0, 88% 0%, 100% 20%, 100% 100%, 12% 100%, 0% 84%);
        background-color: #c5c5d9;
        height: 250px;
        padding: 95px 13%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

        .downloadable-docs .doc-container .shaped-box .download-link {
            background-color: #f0f0f5;
            color: #ec008c;
            text-align: center;
            padding: 4%;
            width: 100%;
            width: 100%;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            border: 0;
        }

            .downloadable-docs .doc-container .shaped-box .download-link:hover {
                background-color: #fff;
                box-shadow: 5px 5px 14px #828294;
            }

            .downloadable-docs .doc-container .shaped-box .download-link img {
                transform: rotate(90deg);
            }


/*===================== END COMMON SHAPED BOX styles =========================*/



@media (max-width: 767.98px) {

    .three-side-shaped-box-long {
        -webkit-clip-path: polygon(0 0, 94% 0, 100% 24%, 100% 70%, 95% 100%, 5% 100%, 0 73%);
        clip-path: polygon(0 0, 94% 0, 100% 24%, 100% 70%, 95% 100%, 5% 100%, 0 73%);
    }

        .three-side-shaped-box-long a img {
            width: 5%;
            margin-left: 2%;
        }
}

@media (max-width: 360px) {

    .three-side-shaped-box-long a img {
        display: none;
    }
}

.loadingWrapper {
    width: 100%;
    height: 100%;
    display: table;
    z-index: 2;
    text-align: center;
    position: absolute;
    background-color: rgba(232, 232, 232, 0.6);
}

    .loadingWrapper .loadingBg {
        display: table-cell;
        height: 100%;
        vertical-align: middle;
        font-weight: bold;
    }