.cccSection{min-height:600px}

.cccSection .textPic{position:relative}

#page .cccSection .galWrap{position:absolute;top:100px;left:0;z-index:0;margin:0 auto;width:70rem!important}
#page .cccSection .galWrap .imgRow{margin-right:55%;width:45%;height:100%;display:flex;flex-wrap:nowrap;flex-direction:column;justify-content:center;align-items:center}
#page .cccSection .galWrap .imgCol{display:inline-block}
#page .cccSection .galWrap img{margin:0!important}

.cccSection .txtWrap{position:relative;z-index:1;padding-left:0!important;width:100%!important}

.cccItem .cccText{display:none;width:48%}
.cccItem.act .cccText{display:inline-block}
.cccItem .cccText .textBox{padding-bottom:30px}

.cccItem .cccImage{display:inline-block;width:48%}
.cccItem .cccImage picture{position:absolute;z-index:6;background-color:#fff;border:2px solid transparent;cursor:pointer;transition:all .4s}
.cccItem .cccImage picture.rounded{border-radius:50%}
.cccItem.inact .cccImage picture{background-color:#fff!important}
.cccItem.inact .cccImage picture:hover{opacity:.6}
.cccItem:nth-child(1) .cccImage picture{top:310px;left:-4px}
.cccItem:nth-child(2) .cccImage picture{top:62px;left:7px}
.cccItem:nth-child(3) .cccImage picture{top:50px;left:390px}
.cccItem:nth-child(4) .cccImage picture{top:245px;left:405px}
.cccItem:nth-child(5) .cccImage picture{top:355px;left:310px}
.cccItem.inact .cccImage picture:nth-child(1){display:none}
.cccItem.act .cccImage picture:nth-child(2){display:none}
.cccItem .cccImage picture img{width:60%!important;height:auto}

.cccWrap.animated .cccItem.inact .cccImage picture::before{content:'';position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;border-radius:50%;animation:ringPulse 2.5s ease-out infinite}
.cccWrap.animated .cccItem.inact .cccImage picture:hover{transition:all .4s}
.cccWrap.animated .cccItem.inact .cccImage picture{animation:popPulse 1s infinite;animation-delay:0s;animation-direction:normal;animation-delay:1.5s;animation-direction:alternate-reverse}

@keyframes ringPulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}
@keyframes popPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* --- OLD --- */

.clickChange{position:relative}

.clickChange .bodyWrap{height:100%}

.clickChange .galWrap{display:inline-block;position:relative;width:45%;height:500px;background-size:auto;background-position:center center;background-repeat:no-repeat;transition:all .4s}

.clickChange .txtWrap{display:none;position:relative;z-index:5;width:48%;height:100%}
.clickChange .txtWrap.cur{display:inline-block}
.clickChange .txtWrap.flexCol.cur{display:flex!important}

.clickChange .txtWrap .hGroup::after{display:none!important}

.clickChange .txtWrap .buttonBox .btn{text-align:center}
.clickChange .txtWrap .buttonBox .btn a{font-size:var(--font-size-l);font-weight:normal;font-family:regular,arial,helvetica,awesome,sans-serif}
.clickChange .txtWrap .buttonBox .btn i{position:relative;top:2px;margin:0 0 0 10px}
.clickChange .txtWrap .buttonBox .btn.btnDefault a {font-size:var(--font-size-m)}
.clickChange .txtWrap .buttonBox .btn.btnSmall a {font-size:var(--font-size-s)}


/* ---- BUBBLES --- */

.clickChange.bubbleType .galWrap div.cccPic{display:block;position:absolute;z-index:6;border-radius:50%;border:2px solid;cursor:pointer;transition:all .4s}
.clickChange.bubbleType .galWrap div.cccPic:nth-child(1){bottom:70px;left:10px;width:120px;height:120px}
.clickChange.bubbleType .galWrap div.cccPic:nth-child(2){top:75px;left:20px;width:95px;height:95px}
.clickChange.bubbleType .galWrap div.cccPic:nth-child(3){top:65px;right:20px;width:105px;height:105px}
.clickChange.bubbleType .galWrap div.cccPic:nth-child(4){top:245px;right:25px;width:85px;height:85px}
.clickChange.bubbleType .galWrap div.cccPic:nth-child(5){bottom:85px;right:135px;width:65px;height:65px}
.clickChange.bubbleType .galWrap div.cccPic.inact{background-color:#fff!important}

.clickChange.bubbleType .galWrap div.cccPic.cur{transform:scale(1.1);transition:all .4s;animation:none!important}

.clickChange.bubbleType .galWrap div.cccPic::before{content:'';position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;border-radius:50%}
.clickChange.bubbleType .galWrap div.cccPic.cur::before{display:none!important}

.clickChange.bubbleType .galWrap div.cccPic img{position:absolute;z-index:7;top:20%;left:20%;width:60%!important;height:60%!important;transition:all .4s}
.clickChange.bubbleType .galWrap div.cccPic:hover img:nth-child(1),.clickChange.bubbleType .galWrap div.cccPic img:nth-child(2),.clickChange.bubbleType .galWrap div.cccPic.cur img{opacity:0}
.clickChange.bubbleType .galWrap div.cccPic:hover img:first-child + img,.clickChange.bubbleType .galWrap div.cccPic.cur img + img{display:block;opacity:1}


/* --- SQUARES --- */

.clickChange.squareType .galWrap div.cccPic{display:block;position:absolute;z-index:6;width:170px;height:auto;cursor:pointer;transition:all .4s}
.clickChange.squareType .galWrap div.cccPic:nth-child(1){bottom:70%;left:-100px}
.clickChange.squareType .galWrap div.cccPic:nth-child(1) img{box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.clickChange.squareType .galWrap div.cccPic:nth-child(2){bottom:32%;right:-10px}
.clickChange.squareType .galWrap div.cccPic:nth-child(2) img{box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.clickChange.squareType .galWrap div.cccPic:nth-child(3){bottom:25%;left:0}
.clickChange.squareType .galWrap div.cccPic:nth-child(3) img{box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}

.clickChange.squareType .galWrap div.cccPic img{position:absolute;z-index:7;top:20%;left:20%;padding:10px 20px;width:100%!important;height:auto!important;background-color:#fff;border-radius:10px;transition:all .4s}


/* --- HORIZONTAL BUTTONS --- */

.clickChangeButtonsMenu{gap:10px;margin:40px 0 30px}
.clickChangeButtonsMenu > *{width:20%}
.clickChangeButton{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;width:100%;font-size:var(--font-size-s);font-family:os-regular,arial,helvetica,awesome,sans-serif;border:1px solid #3a3a3a;cursor:pointer}
.clickChangeButton:hover,.clickChangeButton.act{border-color:var(--main-color)!important}
.clickChangeButton.act{color:var(--main-color)}
#page .clickChangeButtonsContent .grid-row{display:block;margin:0;width:100%}
#page .clickChangeButtonsContent .gridItem{display:none;margin:0;width:100%;opacity:0}
#page .clickChangeButtonsContent .gridItem.act{display:block;opacity:1;animation:clickChangeFadeIn 1s ease both}
@keyframes clickChangeFadeIn{
    from{opacity:0}to{opacity:1}
}
#page .clickChangeButtonsContent .galWrap{position:static;width:100%!important}
#page .clickChangeButtonsContent .galWrap .imgRow{margin:0;width:100%!important}
#page .clickChangeButtonsContent .galWrap .imgCol{display:inline-block;width:76%!important}
#page .clickChangeButtonsContent .bodyWrap .hGroup{display:none}
#page .clickChangeButtonsContent .bodyWrap .txtWrap{margin-top:0!important;padding:0 18%!important;min-height:120px}
#page .clickChangeButtonsContent .bodyWrap .txtWrap *{font-size:var(--font-size-r)!important}