/******************************************************************************
* Block
******************************************************************************/
#mg .block {
    width: 100%;
    background-position: 100% 0 !important;
    position: relative;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

#mg .block .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(/crosslab/assets/images/block-overlay.png) no-repeat 100% 0 scroll transparent;
    z-index: 1;
    -webkit-transition: all 700ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
    -moz-transition: all 700ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
    -ms-transition: all 700ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
    -o-transition: all 700ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
    transition: all 700ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}

#mg .block:hover .overlay {
    opacity: 0;
}

#mg .block:hover a.btn {
    color: #0b6092 !important;
}

#mg .block:hover a.btn .ss-icon {
    display: inline-block;
    -webkit-animation-name: bounceArrow;
    animation-name: bounceArrow;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

#mg .block > a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

#mg .block .content {
    float: left;
    background: url(/crosslab/assets/images/block-left.png) no-repeat 100% 0 scroll transparent;
    height: 275px;
    width: 50%;
    padding: 40px 60px 0;
    position: relative;
    z-index: 3;
    overflow: hidden;
}

#mg .block .content h3 {
    position: relative;
}

#mg .block .content h3 .icon {
    position: absolute;
    top: 5px;
    left: -45px;
    display: block;
    width: 34px;
    height: 17px;
    -webkit-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 0s;
    -moz-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 0s;
    -ms-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 0s;
    -o-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 0s;
    transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 0s;
    -webkit-transform: translateX(-213px);
    -moz-transform: translateX(-213px);
    -o-transform: translateX(-213px);
    -ms-transform: translateX(-213px);
    transform: translateX(-213px);
}

#mg .block:hover .content h3 .icon {
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

#mg .block > .icon {
    float: right;
    height: 275px;
    width: 50%;
    position: relative;
    z-index: 2;
}

#mg .block > .icon .icon-inner {
    background: url(/crosslab/assets/images/ellipse-circle.png) no-repeat 50% 50% scroll transparent;
}

#mg .block > .icon div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 0s;
    -moz-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 0s;
    -ms-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 0s;
    -o-transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 0s;
    transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 0s;
}

#mg .block:hover > .icon > div {
    -webkit-transform: translateX(-285px);
    -moz-transform: translateX(-285px);
    -ms-transform: translateX(-285px);
    -o-transform: translateX(-285px);
    transform: translateX(-285px);
}

#mg .block.tools > .icon .icon-inner > div {
    background: url(/crosslab/assets/images/icons/tools.png) no-repeat 50% 50% scroll transparent;
}

#mg .block.globe > .icon .icon-inner > div {
    background: url(/crosslab/assets/images/icons/globe.png) no-repeat 50% 50% scroll transparent;
}

#mg .block.links > .icon .icon-inner > div {
    background: url(/crosslab/assets/images/icons/links.png) no-repeat 50% 50% scroll transparent;
}

#mg .block.shield > .icon .icon-inner > div {
    background: url(/crosslab/assets/images/icons/shield.png) no-repeat 50% 50% scroll transparent;
}

#mg .block.graph > .icon .icon-inner > div {
    background: url(/crosslab/assets/images/icons/graph.png) no-repeat 50% 50% scroll transparent;
}

#mg .block.workflow > .icon .icon-inner > div {
    background: url(/crosslab/assets/images/icons/workflow.png) no-repeat 50% 50% scroll transparent;
}

#mg .block.hat > .icon .icon-inner > div {
    background: url(/crosslab/assets/images/icons/hat.png) no-repeat 50% 50% scroll transparent;
}

#mg .block .btn {
    padding-left: 0;
    display: block;
}

#mg .block:hover .btn {
    color: #0b6092;
}

#mg .block.tools .content h3 .icon {
    background: url(/crosslab/assets/images/icons/tools-sm.png) no-repeat 100% 0 scroll transparent;
}

#mg .block.globe .content h3 .icon {
    background: url(/crosslab/assets/images/icons/globe-sm.png) no-repeat 100% 0 scroll transparent;
}

#mg .block.links .content h3 .icon {
    background: url(/crosslab/assets/images/icons/links-sm.png) no-repeat 100% 0 scroll transparent;
}

#mg .block.shield .content h3 .icon {
    background: url(/crosslab/assets/images/icons/shield-sm.png) no-repeat 100% 0 scroll transparent;
}

#mg .block.graph .content h3 .icon {
    background: url(/crosslab/assets/images/icons/graph-sm.png) no-repeat 100% 0 scroll transparent;
}

#mg .block.workflow .content h3 .icon {
    background: url(/crosslab/assets/images/icons/workflow-sm.png) no-repeat 100% 0 scroll transparent;
}

#mg .block.hat .content h3 .icon {
    background: url(/crosslab/assets/images/icons/hat-sm.png) no-repeat 100% 0 scroll transparent;
}

#mg .block.right {
    background-position: 0 0 !important;
}

#mg .block.right .overlay {
    background-position: 0 0;
}

#mg .block.right > .content {
    float: right;
    background-image: url(/crosslab/assets/images/block-right.png);
    background-position: 0 0;
}

#mg .block.right > .icon {
    float: left;
}

#mg .block.right:hover > .icon > div {
    -webkit-transform: translateX(285px);
    -moz-transform: translateX(285px);
    -ms-transform: translateX(285px);
    -o-transform: translateX(285px);
    transform: translateX(285px);
}
