#visuals-cnt {
    background-color: #2ac6d1;
}

#visuals-cnt #banner-img-cnt img {
    width: 60%;
    position: absolute;
    bottom: 0;
    right: -9%;
}

.visuals-page #side-widget {
    border: #2ac6d1 solid 0.1vw;
}

.visuals-page #widget-title-cnt {
    border-bottom: #2ac6d1 solid 0.1vw;
}


.logo-variant-cnt {
    position: relative;
}

#avertra-download-btn, #micustomer-download-btn {
    position: absolute;
    bottom: 12%;
    right: 3%;
    z-index: 1;
}

#modules-download-btn {
    position: absolute;
    bottom: 3%;
    right: 3%;
    z-index: 1;
}

#modules-link-btn {
    position: absolute;
    bottom: 3%;
    left: 3%;
    z-index: 1;
}

#avertra-dark-img, #micustomer-dark-img {
    position: absolute;
    top: 0;
    left: 0;
}

.radio-variant-cnt {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

input[type="radio"] {
    appearance: none;
    width: 2vw;
    height: 2vw;
    /* border: 4px solid #000; */
    border-radius: 50%;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.726);
    margin: 0;
}

input[type="radio"]:checked {
    border: 0.4vw solid #2ac6d1;
}

input[type="radio"]#avertra-radio-1, input[type="radio"]#micustomer-radio-1 {
    background: #fff;
}

input[type="radio"]#avertra-radio-2, input[type="radio"]#micustomer-radio-2 {
    background: #000;
    margin-left: 1%;
}

.logo-variant-cnt > img {
    width: 100%;
}

.grey-bg-padded {
    position: relative;
    background-color: #f4fdfc;
    width: 80%;
    padding: 10%;
    border-radius: 10px;
    margin-bottom: 5%;
}

.single-img-cnt {
    background-color: #f4fdfc;
    width: 100%;
    margin-bottom: 5%;
}

.single-img-cnt img {
    width: 100%;
}

.double-div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}

.cs-single-cnt {
    position: relative;
    width: 30%;
    background-color: white;
    border: black 1px solid;
    
}

.left-cs-single-cnt {
    padding: 5% 10% 5% 2.5%;
}

.right-cs-single-cnt {
    padding: 4% 10% 5% 4%;
    
}

#content-cnt .cs-single-cnt h3 {
    font-size: 1.5vw;
    margin: 0;
    position: relative;
    z-index: 1;
    line-height: 1;
    padding-bottom: 10%;
}

#content-cnt .cs-single-cnt p {
    font-size: 0.9vw;
    margin: 0;
    line-height: 1;
}

.cs-mini-logo {
    width: 30%;
    position: absolute;
    top: 0;
    left: 0;
}

#micustomer-logos .cs-mini-logo {
    width: 40%;
}

#checkmark-cnt, #cross-cnt {
    width: 20%;
    height: 4.7vw;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: -10%;
    bottom: -10%;
}

#checkmark-cnt img {
    width: 60%;
}

#cross-cnt img {
    width: 40%;
}

.triple-clm-cnt {
    width: 80%;
    display: flex;
    flex-direction: column;
}

.tri-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.tri-cnt {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    align-self: stretch;
    margin: 0 auto;
}

.tri-cnt img {
    width: 100%;
}

.separator {
    width: 100%;
    border-top: solid 1px #161e3534;
    margin: 10% 0;
}

.modules-cnt > img {
    width: 100%;
}


#logo-kit-cnt {
    display: flex;
    flex-direction: row;
}

#logo-kit-cnt div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#logo-kit-cnt div:nth-child(1) {
    width: 40%;
}

#logo-kit-cnt div:nth-child(2) {
    width: 60%;
    justify-content: center;
}

#logo-kit-cnt div:nth-child(2) img {
    width: 100%;
}

.color-cards-cnt {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.color-card {
    width: 25%;
    padding: 2.5%;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    margin: 5% auto;
}

.color-cnt {
    height: 14vw;
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 5%;
}

.color-name-cp {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

#brand-colors .color-name-cp > p {
    color: white;
}

#white-clr-cnt .color-name-cp > p {
    color: #161E35;
}

.gradient-row {
    padding: 5%;
    display: flex;
    justify-content: flex-end;
    position: relative;
    width: 90%;
}

.gradient-row img {
    height: 1.5vw;
    cursor: pointer;
}

.copy-message {
    position: absolute;
    bottom: -2vw;
    right: -2.5vw;
    background-color: #E1E1E1;
    border-radius: 25px;
    padding: 1% 10%;
    z-index: 2;
}

.color-cnt .copy-message {
    bottom: -2.5vw;
    right: -3vw;
}

.copy-message p {
    color: black;
    font-style: italic;
    margin: 0;
}

#white-clr-cnt {
    border: solid 1px black;
}

.color-name-cp p {
    margin: 0;
}

.color-name-cp img {
    width: 12.5%;
}

.color-name-cp img:hover {
    cursor: pointer;
}

#purple-clr-cnt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    position: relative;
}

#boxed-cnt {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#colors-box {
    width: 100%;
    display: flex;
    flex-direction: row;
    background-color: #f4fdfc;
    border-radius: 10px;
    padding: 5%;
}

#colors-box div {
    position: relative;
}

#colors-box p {
    margin: 0;
    color: white;
    position: absolute;
    bottom: 5%;
    left: 5%;
}

#colors-box > div {
    width: 50%;
    height: 30vw;
}

#colors-box > div:nth-child(2) {
    display: flex;
    flex-direction: column;
}

#colors-box > div:nth-child(2) > div:nth-child(2) {
    display: flex;
    flex-direction: row;
    width: 100%;
}

#cyan-box {
    background-color: #2AC6D1;
    margin-right: 2%;
}

#cyan-box p {
    font-size: 2vw;
}

#blue-box {
    background-color: #0844BC;
    height: 20vw;
    width: 100%;
    margin-bottom: 4%;
}

#blue-box p {
    font-size: 2vw;
}

#blue-box .box-prec {
    font-size: 4vw;
}

#purple-box {
    background-color: #5523B7;
    width: 60%;
    margin-right: 4%;
    height: 10vw;
}

#purple-box p, #magenta-box p {
    font-size: 1.2vw;
    line-height: 1.2;
}

#purple-box .box-prec {
    font-size: 3vw;
    bottom: 0;
    top: unset;
}

#colors-box #purple-box p:first-child, #colors-box #magenta-box p:first-child {
    top: 7.5%;
    left: 5%;
}

#magenta-box {
    background-color: #C9239C;
    width: 40%;
    height: 10vw;
}

#magenta-box .box-prec {
    font-size: 3vw;
    top: unset;
    bottom: 0;
}

#typo-cnt {
    background-color: #fafbfe;
    width: 100%;
    display: flex;
    flex-direction: row;
    border-radius: 10px;
    margin-bottom: 10%;
}

#typo-demo-cnt {
    width: 50%;
}

#typo-txt-cnt {
    position: relative;
    width: 40%;
    padding: 5%;
}

#typo-txt-cnt ul {
    padding-left: 5%;
    list-style-position: outside;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin: 0;
}

#typo-txt-cnt li {
    color: black;
    margin-bottom: 10%;
}

#typo-txt-cnt a {
    background-color: #abafbc;
    position: absolute;
    bottom: 5%;
    right: 5%;
}

#typo-txt-cnt a p {
    font-size: 0.9vw;
    margin: 1vw 0 1vw 1vw;
    color: white;
}

#typo-txt-cnt a img {
    width: 2vw;
}

#abc {
    color: #ebf4fb;
}

#typo-a {
    font-size: 20vw;
    line-height: 0.7;
    font-weight: bold;
}

#typo-b {
    font-size: 10vw;
    line-height: 0.7;
    font-weight: bold;
}

#typo-c {
    font-size: 8vw;
    line-height: 0.7;
    font-weight: bold;
}

#txt-ex-cnt {
    width: 90%;
    padding: 5%;
}

#txt-ex-cnt p {
    margin: 5% 0 5%;
}


footer {
    background-color: #2ac6d1;
}

@media (max-width: 727px) {

    #mobile-nav-cnt {
        background-color: #1f9199;
    }

    .color-cards-cnt p {
        font-size: 3vw;
    }

    .color-card {
        width: 40%;
    }

    #gradient-cnt p {
        font-size: 18px;
    }

    #typo-cnt {
        flex-direction: column;
    }

    #typo-txt-cnt {
        padding: 5%;
        width: 90%;
    }

    #typo-demo-cnt {
        width: 100%;
        padding: 0;
    }

    #typo-txt-cnt a {
        position: static;
    }

    #typo-txt-cnt a p {
        font-size: 18px;
    }

    #typo-txt-cnt a img {
        width: 4vw;
    }

    input[type="radio"]:checked {
        border: 6px solid #2ac6d1;
    }

    input[type="radio"] {
        width: 24px;
        height: 24px;
    }

    input[type="radio"]#avertra-radio-2, input[type="radio"]#micustomer-radio-2 {
        margin-left: 5%;
    }

    .double-div {
        flex-direction: column;
    }


    .left-cs-single-cnt {
        width: 87.5%;
        margin-bottom: 40px;
        padding-top: 10%;
    }

    .right-cs-single-cnt {
        width: 85%;
        padding-top: 6%;
    }

    #content-cnt .cs-single-cnt h3 {
        font-size: 18px;
    }

    #content-cnt .cs-single-cnt p {
        font-size: 16px;
    }

    #logo-kit-cnt {
        flex-direction: column;
        position: relative;
    }

    #logo-kit-cnt div:nth-child(1) {
        width: 100%;
        z-index: 1;
    }

    #logo-kit-cnt div:nth-child(2) {
        width: 100%;
    }

    .tri-cnt {
        width: 48%;
    }

    .tri-cnt p {
        font-size: 12px;
    }

    #boxed-cnt {
        flex-direction: column;
    }

    #colors-box {
        width: 90%;
    }

    #blue-box .box-prec {
        font-size: 4vw;
    }

    #cyan-box p {
        font-size: 4vw;
    }

    #blue-box p {
        font-size: 4vw;
    }

    #purple-box p, #magenta-box p {
        font-size: 2vw;
    }

    #checkmark-cnt, #cross-cnt {
        height: 15vw;
    }

    .color-cnt {
        height: 28vw;
    }

    .gradient-row img {
        height: 3.5vw;
    }

    #logo-kit-cnt div:nth-child(2) img {
        width: 110%;
        margin-left: -8.5%;
    }

}