div[data-device='mobile'][data-transparent]{
    position: relative;
}

.sub-visual {
    margin: 0 auto ;
    position: relative;
    width:100%;
    overflow: hidden;
}

.sub-visual .title-area{
    position: relative;
    z-index: 10;
}
.sub-visual .title-wrapper{
    padding: 60px 0;

}

.sub-visual h2{
    color:white;
    text-align: center;
    font-size: 40px;
}
.sub-visual p{
    text-align: left;
    margin-bottom: 0;
    z-index: 10;
    position: relative;
    font-size: 18px;
    color: white;
    font-weight: 400;
}

.parallax-mirror{
    /*filter: blur(4px);*/
}
.parallax-window {
    min-height: 400px;
    background: transparent;
}

.sub-visual .background-wrapper {
    position: absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
}
.sub-visual .background-wrapper .filter{
    position: absolute;top:0;left:0;height:100%;width:100%;
    background: rgba(0,0,0,.1);
    /*filter:blur(4px);*/
}
.sub-visual .bubble_1{position: absolute;bottom:-20px;left:30px;background:#ff0047;height:15px;width:15px;border-radius: 30px;animation: left-bubble 20s linear infinite;}
.sub-visual .bubble_2{position: absolute;bottom:-20px;right:30px;background:#ff0047;height:15px;width:15px;border-radius: 30px;animation: right-bubble 20s 10s linear infinite;}
.sub-visual .bubble_3{position: absolute;bottom:-20px;right:50%;background:#ff0047;height:15px;width:15px;border-radius: 30px;animation: center-bubble 20s 15s linear infinite;}
.sub-visual .squar{
    position: absolute;
    bottom: -100px;
    left: 20px;
    background: #d23f30;
    width: 8vw;
    height: 8vw;
    border-radius: 5px;
    transform: rotate(30deg);
}
.sub-visual .squar:hover{
    animation: boomit 3s linear;
}
ul {
    list-style: none;
}

.clear:after {
    display: block;
    clear: both;
    content: '';
}

.breadcrumb-wrapper{
    border-bottom: 1px solid #e0e0e0;
    background:white;
}
#grve-breadcrumbs{
    padding: 7px 0;
    min-height: 41px;
}

#grve-breadcrumbs ul {margin-bottom:0;padding-left: 0;}
#grve-breadcrumbs ul li {display: inline-block;margin-bottom:0;}
#grve-breadcrumbs ul li::after{
    content: "/";
    display: inline-block;
    margin-right: 10px;
    opacity: .5;
}

#grve-breadcrumbs ul li:last-child::after{
    display: none;}
#grve-breadcrumbs ul li span{  margin-right: 10px;  display: inline-block;}
#grve-breadcrumbs svg{
    margin-right: 5px;
    fill:var(--linkInitialColor);
}
#grve-breadcrumbs a:hover svg {fill:var(--linkHoverColor);}


#main-container .site-main{background:white;}

@media (max-width: 999.9px){
    .sub-visual .background-wrapper{filter:blur(4px);}
}

@media screen and (max-width: 767px) {
    .sub-visual h2{
        padding: 20px 0;
        font-size: 30px;
    }
    .sub-visual:before{
        width: 20vw;
        height: 20vw;
        top: -5vw;
        left: -10vw;
    }
    .sub-visual h2 span:after{
        width:20vw;
        height:20vw;
    }
    .sub-visual .squar{
        width: 28vw;
        height: 28vw;
        left: -100px;
        top: 120px;
    }
    .sub-visual .container{
        transform:translateX(0);
    }
    .sub-visual .breadcrumbs .home{
        display: none;
    }
    .sub-visual .breadcrumbs > li{
        width: 120px;
        font-size: 13px;
        height: 48px;
    }
    .sub-visual .breadcrumbs > li > span{
        line-height: 48px;
    }
}


@keyframes left-bubble {
    0%{top:-20px;left:40px;background:#ffbdd2;}
    10%{left:70px}
    20%{left:60px}
    30%{left:50px}
    40%{left:40px}
    50%{left:60px;background:#c22925;}
    60%{left:70px}
    70%{left:80px;opacity:1;}
    80%{left:60px}
    90%{left:50px}
    100%{top:100%;left:40px;background:#ffbdd2;opacity:0.4;}
}
@keyframes right-bubble {
    0%{top:-20px;right:40px;background:#ffbdd2;}
    10%{right:70px}
    20%{right:60px}
    30%{right:50px}
    40%{right:40px}
    50%{right:60px;background:#c22925;}
    60%{right:70px}
    70%{right:80px;opacity:1;}
    80%{right:60px}
    90%{right:50px}
    100%{top:100%;right:40px;background:#ffbdd2;opacity:0.4;}
}
@keyframes center-bubble {
    0%{top:-20px;right:40%;background:#ffbdd2;}
    10%{right:45%}
    20%{right:50%}
    30%{right:55%}
    40%{right:60%}
    50%{right:55%;background:#c22925;}
    60%{right:50%}
    70%{right:45%;opacity:1;}
    80%{right:40%}
    90%{right:35%}
    100%{top:100%;right:30%;background:#ffbdd2;opacity:0.4;}
}
@keyframes boomit {
    0%{transform: scale(1)}
    8%{transform: scale(1)}
    10%{transform: scale(0.9)}
    15%{transform: scale(1.1)}
    18%{transform: scale(0.9)}
    20%{transform: scale(1)}
    100%{transform: scale(1)}
}

@keyframes spin{
    0%{transform: rotate(0)}
    10%{transform: rotate(360deg)}
    25%{transform: rotate(720deg)}
}