.slider-container {
    position: relative;
    width: 100%;
}

.slider-container .laptop-container {
    position: absolute;
    top: -6px;
    left: 50%;
    z-index: 2
}

.slider-container .laptop-container .laptop {
    position: relative;
    width: 280px;
    margin-left: -140px;
}

.slider-container .slider-toggle-container {
    position: relative;
    z-index: 4;
    width: 216px!important;
    margin: 0 auto;
}


@media (min-width: 576px) {
    .slider-container .laptop-container {
	    top: -11px;
	}
    .slider-container .laptop-container .laptop {
	    width: 550px;
	    margin-left: -275px;
	}
    .slider-container .slider-toggle-container {
        width: 422px!important;
    }
}
@media (min-width: 768px) {
	.slider-container .laptop-container {
	    top: -15px;
	}
	.slider-container .laptop-container .laptop {
	    width: 693px;
	    margin-left: -345px;
	}
    .slider-container .slider-toggle-container {
        width: 535px!important;
    }
}


.slider-container .slider-toggle-container .twentytwenty-overlay {
    display: none!important
}

.slider-container .slider-toggle-container.is-word .twentytwenty-handle {
    border-color: #215097
}

.slider-container .slider-toggle-container.is-word .twentytwenty-left-arrow {
    border-right-color: #215097
}

.slider-container .slider-toggle-container.is-word .twentytwenty-right-arrow {
    border-left-color: #215097
}

.slider-container .slider-toggle-container.is-word .twentytwenty-handle:after,
.slider-container .slider-toggle-container.is-word .twentytwenty-handle:before {
    background-color: #215097;
    -webkit-box-shadow: 0 3px 0 #215097, 0 0 12px rgba(51, 51, 51, .5);
    -moz-box-shadow: 0 3px 0 #215097, 0 0 12px rgba(51, 51, 51, .5);
    box-shadow: 0 3px 0 #215097, 0 0 12px rgba(51, 51, 51, .5)
}

.slider-container .slider-toggle-container.is-powerpoint .twentytwenty-handle {
    border-color: #d34828
}

.slider-container .slider-toggle-container.is-powerpoint .twentytwenty-left-arrow {
    border-right-color: #d34828
}

.slider-container .slider-toggle-container.is-powerpoint .twentytwenty-right-arrow {
    border-left-color: #d34828
}

.slider-container .slider-toggle-container.is-powerpoint .twentytwenty-handle:after,
.slider-container .slider-toggle-container.is-powerpoint .twentytwenty-handle:before {
    background-color: #d34828;
    -webkit-box-shadow: 0 3px 0 #d34828, 0 0 12px rgba(51, 51, 51, .5);
    -moz-box-shadow: 0 3px 0 #d34828, 0 0 12px rgba(51, 51, 51, .5);
    box-shadow: 0 3px 0 #d34828, 0 0 12px rgba(51, 51, 51, .5)
}

.slider-container .slider-toggle-container.is-excel .twentytwenty-handle {
    border-color: #197447
}

.slider-container .slider-toggle-container.is-excel .twentytwenty-left-arrow {
    border-right-color: #197447
}

.slider-container .slider-toggle-container.is-excel .twentytwenty-right-arrow {
    border-left-color: #197447
}

.slider-container .slider-toggle-container.is-excel .twentytwenty-handle:after,
.slider-container .slider-toggle-container.is-excel .twentytwenty-handle:before {
    background-color: #197447;
    -webkit-box-shadow: 0 3px 0 #197447, 0 0 12px rgba(51, 51, 51, .5);
    -moz-box-shadow: 0 3px 0 #197447, 0 0 12px rgba(51, 51, 51, .5);
    box-shadow: 0 3px 0 #197447, 0 0 12px rgba(51, 51, 51, .5)
}

.toggle-product-container {
    position: relative;
    margin-top: 60px;
    width: 100%;
    text-align: center
}


@media (min-width: 576px) {
    .toggle-product-container {
        margin-top: 90px
    }
}

@media (min-width: 768px) {
    .toggle-product-container {
        margin-top: 105px
    }
}

@media (min-width: 992px) {
    .toggle-product-container {
        margin-top: 115px
    }
}




.toggle-product-container .inner {
    position: relative;
    display: inline-block
}

.toggle-product-container .toggle-product {
    position: relative;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    width: 85px;
    text-align: left
}

@media all and (max-width:767px) {
    .toggle-product-container .toggle-product {
        width: 65px
    }
}

.toggle-product-container .toggle-product img {
    position: relative;
    width: 65px
}

@media all and (max-width:767px) {
    .toggle-product-container .toggle-product img {
        width: 50px
    }
}

.toggle-product-container .toggle-product .active-line {
    position: relative;
    margin-top: 5px;
    width: 0%;
    height: 5px;
    transition: all 350ms ease
}

.toggle-product-container .toggle-product.is-active .active-line {
    width: 65px
}

@media all and (max-width:767px) {
    .toggle-product-container .toggle-product.is-active .active-line {
        width: 50px
    }
}

.toggle-product-container .toggle-product--word .active-line {
    background-color: #24589c
}

.toggle-product-container .toggle-product--powerpoint .active-line {
    background-color: #d34828
}

.toggle-product-container .toggle-product--excel .active-line {
    background-color: #197447
}
.toggle-product-container .toggle-product--teams .active-line {
    background-color: #545baa
}

.toggle-product-container .toggle-product--bookings .active-line {
    background-color: #148172
}

.toggle-product-container .toggle-product--ocm .active-line {
    background-color: #0d7ad2
}