/** animation for the success stories */
@keyframes activetransition {
    0% {
        z-index: 3;
        position: absolute;
        left: 25%;
        width: 50vw;
        top: 100px;
        height:300px;
    }
    50% {
        z-index: 3;
        position: absolute;
        left: 0%;
        width:100vw;
    }
    100% {
        z-index: 3;
                position: absolute;
                    left: 0%;
                    width: 100vw;
                    top: 70px;
                    height:550px;
    }
}


.activetransition {
    animation: activetransition 1.3s ease;
    animation-fill-mode: forwards;

}
.activetransition figure{
    opacity: 0;
}
.activetransition .otrs-storycontent-inner2{
    opacity: 0;
}
.sidebar-success-nav-inner{
    position:sticky;
    top:180px;
}
body.admin-bar .sidebar-success-nav-inner{
    top:210px;
}
.solution-link{
    color: #222 !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 1.5em !important;
    text-decoration: underline !important;
    display: block;
}
.solution-headline{
    font-weight: 500;
}
#prev-story{
    margin-right:10px;
}
#navigationsection .storynav:hover{
    background-color: #f3f2ee !important;
cursor: pointer;
}
.otrs-successtory-grid #gridlabel{
        background-color: #f3f2ee !important;
}
.otrs-successtory-list #listlabel{
    background-color: #f3f2ee !important;
}
.otrs-sidenav-item-inviewport{
    background-color: #868686 !important;
}
.bgimg-1{
    background-image: url('../jpg/1.jpg') !important;
}
.bgimg-2{
    background-image: url('../jpg/2.jpg') !important;
}
.bgimg-3{
    background-image: url('../jpg/3.jpg') !important;
}
.bgimg-4{
    background-image: url('../jpg/4.jpg') !important;
}
.bgimg-5{
    background-image: url('../jpg/5.jpg') !important;
}
.bgimg-6{
    background-image: url('../jpg/6.jpg') !important;
}
.bgimg-7{
    background-image: url('../jpg/7.jpg') !important;
}

/* color filter for class bgimg-7 */
.bgimg-1:before {
    content: "" !important;
    background-color: #74c0d0 !important;
    opacity: 0.8 !important;
    z-index: 1 !important;
    position: absolute !important;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}
.bgimg-2:before {
    content: "" !important;
    background-color: #ba3247 !important;
    opacity: 0.4 !important;
    z-index: 1 !important;
    position: absolute !important;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}
.bgimg-3:before {
    content: "" !important;
    background-color: #345669 !important;
    opacity: 0.8 !important;
    z-index: 1 !important;
    position: absolute !important;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}
.bgimg-4:before {
    content: "" !important;
    background-color: #96615b !important;
    opacity: 0.5 !important;
    z-index: 1 !important;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.bgimg-5:before {
    content: "" !important;
    background-color: #74c0d0 !important;
    opacity: 0.4 !important;
    z-index: 1 !important;
    position: absolute !important;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.otrs-storycontent{
    cursor:pointer;
}
/* color overlay for background images */
.otrs-ajax-loaded-content{
    opacity: 1;
    transition: all 0.3s ease;
}
.ajaxloaded-hidden{
    opacity: 0 !important;
    transition: all 0.3s ease;
}
.otrs-storycontent-inner blockquote[cite]::before {
    content: " ";
}
.otrs-storycontent-inner blockquote[cite]::after {
    content: "« ";
}

.storycontent-left .img-responsive{
    width: 100%;
    height: 45px;
    object-fit: contain;
}

.otrs-storycontent{
    height:40vh;
    min-height: 630px;
    background-color: #f3f2ee;
    border-radius: 8px;
    margin-bottom: 30px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}
.story-term-head{
    margin-bottom: 30px;
    font-size: 18px;
    font-weight: 600;
    line-height: 15px;
}
.story-term-head:before{
    content:"";
    display:inline-block;
    width: 45px;
    height:15px;
    background-color:#D8D8D8;
    border-radius: 8px;
    margin-right: 10px;

}

.otrs-storycontent-inner{
    display:flex;
    z-index: 2;
}

.otrs-storycontent-inner figure{
font-size: 22px;
    font-weight: 500;
    line-height: 1.5em;
    color: #fff;
    padding: 0;
    text-align: center;
    max-width: 750px;
    margin: auto !important;
}
.otrs-storycontent-inner figcaption{
    font-size:14px;
}

.otrs-storycontent-inner2{
    display:flex;
    width:100%;
    column-gap: 2%;
    z-index: 2;
}
.otrs-storycontent {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
}

.storycontent-left {
    background: #ffffffb5;
        min-height: 200px;
        width: 30%;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        padding:15px;
}
.companydetails-1 h3{
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5em !important;
    margin: 0 !important;

}
.companydetails-1 p{
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 1.5em !important;
    margin: 0 !important;

}
.storycontent-right {
    background: #ffffffb5;
        min-height: 200px;
        width: 70%;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
}
.storycontent-right-inner{
    padding: 15px 30px 0 30px;
    width: 100%;
}
.storycontent-right-inner h4{
font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5em !important;
    margin: 0 !important;
    color: #222;
}
.storycontent-right-inner p{
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 1.5em !important;
    margin: 0;
    color: #222;
}
.otrs-ajax-loaded-content{
    max-width: 100%;
}
div#successstoriescontainer {
    max-width: 1440px;
    width:100%;
    margin: auto;
    display: flex;
    padding-top:80px;
    margin-left:15px;
    margin-right:15px;
}
div#sidebar-success-nav {
    max-width: 20%;
    width:100%;
}
div#successstories-outer {
    display: flex;
    padding-left:0;
    padding-right:0;
    justify-content: center;
}
div#main-content-stories{
    max-width: 80%;
    width: 100%;
    padding-left: 20px;
}

#fullwidth-topbar{
            background-color: #f3f2ee;
            display: flex;
            padding:15px;
            position: sticky;
            top: 83px;
            z-index: 3;
}
body.admin-bar #fullwidth-topbar{
    top:115px;
}
#navigationsection{
            display: flex;
            width: 100%;
            flex-direction: row;
            justify-content: space-between;
            background-color: #f3f2ee;
            max-width:1440px;
            margin: 0 auto;
}
.storynav{
    background-color: #fff !important;
        width: 40px;
        height: 40px;
        line-height: 40px !important;
        padding: 0px !important;
        margin: 0px;
        border: 1px solid #D6D6D6;
        box-shadow: none !important;
        border-radius: 8px !important;
        color: #222;
        display: inline-block;
        min-width: 40px;
        text-align: center;
}
.storynav i{
    color:#222 !important;
}
.storynav input[type="radio"]{
    display:none;
}
#successstories-outer{

}
div#s1 {
    display: flex;
    align-items: center;
}
div#publishedcounter {
    width: 87px;
    height: 40px;
    background: #fff;
    line-height: 40px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid #D6D6D6;
    margin-right: 15px;
}
div#s2 {
    display: flex;
    align-content: center;
    align-items: center;
    grid-column-gap:10px;
}
#s2 .nice-select{
    margin-bottom:0px;
    height:40px;
    line-height:40px;
    min-width:300px;
}
@media screen and (max-width:768px){
#s2 .nice-select{
 min-width:200px;
}
}
#s2 .nice-select .option{
    padding: 0px 15px;
    font-size: 14px;
    line-height: 1.5em;
}
.bulletholder{
    display: flex;
margin-bottom:1.5em;
}
.successbullet{
    margin-right: 5px;
    width:45px;
    height:15px;
    background-color:#D8D8D8;
    border-radius: 8px;
    transition: all 0.3s ease;
}
.otrs-sidenav-item h4{
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 1em !important;
    margin-top:0px !important; 
    margin-bottom: 1em !important;
}

.story-term-head {
  /*  position: absolute;
    visibility: hidden;
    transition: all 0.3s ease;
    width: 1px;*/
}
.successbullet{
    cursor: pointer;
}
.successbullet:hover{
    background-color: #868686 !important;
}
.singlestory-nextnav .elementor-post-navigation__link a:hover{
    background-color: #f3f2ee !important;
}

/** GRID view */
.otrs-successtory-grid .otrs-storycontent{
    width:50%;
}
.otrs-successtory-grid #main-content-stories {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.otrs-successtory-grid #main-content-stories .otrs-storycontent{
    width: calc(50% - 15px);
}
.otrs-successtory-grid .storycontent-left{
width: 60%;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 0px;
    margin-top: 4em;
    margin-right: 2em;
}
.otrs-successtory-grid .otrs-storycontent-inner blockquote{
    margin-top: 3em;

}
.otrs-successtory-grid #sidebar-success-nav {
    max-width: 12%;
    width: 100%;
}
.otrs-successtory-grid #main-content-stories {
    max-width: 88%;
    width: 100%;
    padding-left: 20px;
}
.otrs-successtory-grid .bulletholder{
    display:none;
}
.otrs-successtory-grid .otrs-sidenav-item h4{
    width: 45px;
    height:23px;
    background-color:#d8d8d800;
    border-radius: 8px;
    display: inline-block;
}
.otrs-sidenav-item a{
    color: #222;
}
.otrs-successtory-grid .otrs-sidenav-item h4 a:before{
    content:"";
    display:inline-block;
    width: 45px;
    height:15px;
    background-color:#D8D8D8;
    border-radius: 8px;
}
.otrs-successtory-grid .otrs-sidenav-item:hover h4 a:before {
    content: "";
        position: absolute;
        display: inline-block;
        width: 45px;
        height: 15px;
        background-color: #ffffff;
        border-radius: 8px;
        top: 4px;
        left: 6px;
}
.otrs-successtory-grid .otrs-sidenav-item:hover h4{
width: auto;
    background-color: #D8D8D8;
    position: relative;
    border-radius: 14px;
    margin-left:-6px;
}
.otrs-successtory-grid .otrs-sidenav-item:hover span{
    display: block;
        padding-left: 60px;
        font-size: 13px;
        padding-right: 10px;
        line-height: 23px;
        white-space: nowrap;
}
.otrs-successtory-grid .otrs-sidenav-item h4 span{
    display:none;

}
.otrs-successtory-grid .storycontent-right{
    display: none;
}
.otrs-successtory-grid .otrs-storycontent {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto;
    min-height: auto;
}

.otrs-successtory-grid .otrs-storycontent-inner2 {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}



.otrs-successtory-grid .story-term-head{
    width:100%;
    visibility: visible;
    position: relative;
    transition: all 0.3s ease;

}


/** MOBILE */
@media screen and (max-width:768px) {
    .otrs-ajax-loaded-content{
        margin-top:34px;
    }
    #sidebar-success-nav{
        display:none;
    }
        div#main-content-stories{
            padding-left:0;
            max-width:100%;
        }
                .otrs-storycontent-inner figcaption{
                    line-height: 1.3em;
                    padding-left:15px;
                    padding-right:15px;
                    padding-bottom:15px;
                }
            
    #publishedcounter{
        display:none;
    }
                .backtooverview-button {
                    position: absolute;
                }
    #fullwidth-topbar {
        top: 52px;
    }
    #s2 .storynav{
        display:none;
    }
    .otrs-storycontent{
        height:inherit;
    }
    .storycontent-right{
        display: none;
    }
        .storycontent-left{
            width: 100%;
        }
}


.showaslist ul ul{
    padding-left: 0;
}