/*************************
    Split Box
*************************/
.splitBox-holder{
    position: relative;

    overflow: hidden;
    height: 100%;
}

.splitBox-holder .image-holder{
    height: 100%;
    width: 50%;
    top: 0;
    position: absolute;
    background-size: cover;
    background-position: center center;
    transform: scale(1.1);
    z-index: 1;
    transition:transform .3s;
}

.splitBox-holder:hover .image-holder {
    transform: scale(1);
}

.splitBox-holder .text-holder{
    height: 100%;
    width: 50%;
    top: 0;
    position: relative;
    z-index: 2;
}

.splitBox-holder .text-holder .subtitle{
    font-weight: bold;
    font-size: 15px;
    line-height: 19px;
    width: 100%;
}

.splitBox-holder .text-holder .title{
    width: 100%;
}
.splitBox-holder .text-holder p{
    font-weight: normal;
    font-size: 15px;
    line-height: 24px;
    margin-top: 15px;
    width: 100%
}
.splitBox-holder .splitBox-button{
    margin-top: 25px;
}

.splitBox-holder .arrow-right {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid;
    position: absolute;
    top: calc(50% - 15px);
    z-index: 2;
    margin-left: 0;
}

.md-splitBox.sb-left .text-holder .fixed-width {
    margin-left: 0;
    transition: margin-left .3s;
}

.md-splitBox.sb-left .splitBox-holder:hover .fixed-width {
    margin-left: 50px;
}

.md-splitBox.sb-right .text-holder .fixed-width {
    margin-right: 0;
    transition: margin-right .3s;
}

.md-splitBox.sb-right .splitBox-holder:hover .fixed-width {
    margin-right: 50px;
}

.md-splitBox.sb-left  .image-holder{
    left: 50%;
}

.md-splitBox.sb-right  .image-holder{
    left: 0;
}

.md-splitBox.sb-left .splitBox-holder .text-holder {
    left: 0;
    padding: 0 95px 0 70px;
    transition: width 0.3s;
    display: flex;
    align-items: center;
}

.md-splitBox.sb-right .splitBox-holder .fixed-width{
    display: inline-block;
}

.md-splitBox.sb-right .splitBox-holder .text-holder{
    left: 50%;
    text-align: left;
    padding: 0 95px 0 70px;
    float: left;
    margin-left: 0;
    transition: width 0.3s,margin-left 0.3s;
    display: flex;
    align-items: center;
}

.md-splitBox.sb-right .splitBox-holder:hover .text-holder{
    margin-left: -50px;
}

.md-splitBox.sb-right .splitBox-holder .arrow-right{
    transform: rotateY(180deg);
    left: 50%;
    margin-left: -15px;
    transition: left 0.3s,margin-left 0.3s;
}

.md-splitBox.sb-left .splitBox-holder .arrow-right{
    left: 50%;
    transition: left 0.3s;
}
