/* Base Color Palette */
:root { 
    --aquamarine: #82EFCC;
    --honeydew: #d9ebe1;
    --emerald: #429A6B;
    --slategray: #406173;
}

/* Override */
#navigation-block #cd-lateral-nav .col-md-4 {
    position: initial;
}
#navigation-block ul.breadcrumbs-container {
    height: 60px;
    overflow: visible;
}
#generic-article .article-header h1 {
    padding: 25px;
}
.bc-section {
    display: none!important;
}
.article-header {
    position: relative;
    width: 100%;
    padding-top: 45%;
    min-height: 445px;
    max-height: 830px;
}
.main-row {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.para-block {
    padding: 0 15px;
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: center; */
    margin-bottom: 7.5vw !important;
}
.main-row div {
    height: 100%;
}
.section-padding {
    padding: 0 !important;
}
.cai-header {
    background: url(../img/cai-hero.jpg) top center no-repeat;
    background-size: cover;
}
.block {
    background-color: var(--emerald);
    width: 80%;
    height: 80%;
    opacity: .2;
    position: absolute;
    margin-left: 10%;
    margin-top: 10%;
}
.block.right {
    background-color: var(--slategray);
    opacity: .2;
}
.item {
    position: relative;
    padding: 110px 0 0 !important;
}
.item img {
    position: relative;
    box-shadow: 0px 3px 20px #00000029;
}
/* .item.left {
    display: flex;
    justify-content: end;
} */
/* .item.right {
    display: flex;
    justify-content: start;
} */

.title {
    font-family: Oswald,'Franklin Gothic Medium Condensed',sans-serif;
    font-size: 24px;
    line-height: 36px;
    font-weight: 300;
    color: var(--slategray);
    padding: 20px 0 10px;
}

.group {
    position: relative;
}

.group.left{
    width: 70%;
    margin-left: 20%;
}
.group.right {
    width: 70%;
    margin-left: 10%;
}

.group img {
    box-shadow: 0px 3px 20px #00000029;
    width: 100%;
}

.item.left .text {
    padding-right: 10%;
}
.item.right .text {
    padding-left: 10%;
}

.text.left {
    padding-right: 10%;
}
.text.right {
    padding-left: 10%;
}
.cai-intro {
    margin-bottom: 110px;
    text-align: justify;
}

.cai-heading {
    font-family: Oswald,'Franklin Gothic Medium Condensed',sans-serif;
    font-size: 40px;
    font-weight: 300;
    line-height: 60px;
    letter-spacing: 20px;
    text-transform: uppercase;
    color: var(--aquamarine);
    position: absolute;
    z-index: 1;
    top: 25px;
    left: 25px
}

.box {
    width: 100%;
    height: 18vw;
    position: absolute;
    top: 0;
}
.box.dark {
    background: var(--slategray);
}
.box.lite {
    background: var(--slategray);
    opacity: .5;
}

#cai-image {
    background: url(../img/cai.svg) no-repeat right top;
    background-size: contain;
    position: absolute;
    top: -30px;
    right: 35%;
    height: 80%;
    width: 55%;
    opacity: .5;
}

.main-title {
    position: absolute;
    bottom: 12%;
    right: 5%;
    font-size: 4vw;
    width: 30%;
    font-weight: 300;
    line-height: 1.1;
    margin-bottom: 0 !important;
    background-color: rgba(0, 0, 0, .3);
}

.main-title span {
    display: block;
    font-size: 2vw;
    color: var(--aquamarine);
    letter-spacing: 2px;
    margin-bottom: 5px;
}

#cai-text {
    background: var(--honeydew);
    padding: 110px 0;
}

#cai-list {
    position: relative;
    margin-top: -110px;
    mix-blend-mode: multiply;
}

@media (min-width: 1200px) {
    .block {
        height: calc(18vw + 80px);
        transition: all .3s ease-in-out;
    }
    .item p {
        opacity: 0;
        transition: all .3s ease-in-out;
    }
    .item:hover .block {
        height: 80%;
    }
    .item:hover p {
        opacity: 1;
    }
}

@media (max-width: 1199.98px) {
    #cai-text {
        padding: 55px 0 110px;
    }
    #cai-image {
        width: 80%;
        top: -5px;
        right: 15px;
    }
    .cai-heading {
        letter-spacing: 10px;
    }
    .cai-intro {
        margin-bottom: 55px;
    }
    .box {
        height: 25vw;
    }
    .main-title {
        left: 0;
        width: 80%;
        padding-left: 40px !important;
    }
}

@media (max-width: 991.98px) {
    .col-xs-6 {
        width: 50%; /* Navigation row override */
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .para-block {
        padding: 0 30px;
        margin-bottom: 0 !important;
    }
    .main-title {
        font-size:  max(6vw, 40px);
    }
    .main-title span {
        font-size:  max(3vw, 20px);
    }

    .cai-intro {
        padding-left: 25px !important;
        padding-right: 25px !important;
        text-align: initial;
    }
    .cai-docs {
        padding: 0 !important;
    }
    .cai-heading {
        position: relative;
        letter-spacing: 5px;
        background-color: var(--slategray);
        top: 0;
        left: 0;
        padding: 25px;
        z-index: 0;
        padding-bottom: 110px;
    }
    .item {
        padding-top: 55px !important;
    }
    .title {
        color: white;
    }
    .box {
        height: 100%; /* 50vw; */
    }
    .block {
        display: none;
    }
    .group.left,
    .group.right {
        width: 80%;
        margin: 0 10%;
        margin-top: -110px;
    }
    .item.left .text,
    .item.right .text {
        padding: 0;
    }
    .text.left,
    .text.right {
        padding-left: 0;
        color: white !important;
        margin-bottom: 110px;
    }

}