*,
*:after,
*::before {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#st-trigger-effects .icon{
    float: right;
    width:20%;
}
#st-trigger-effects label {
    color: #007fff !important;
    font-weight: 700;
    font-size: .8rem;
    position: relative;
    float: right;
    margin-top: 9%;
    width: 60%;
    margin-right: 25px;
    width:60%;
}
.serviceIcon{
    font-size: 100px !important;
    padding: 20px  !important;
}
.customer-logo{
    font-size: 125px;
    position: relative;
    margin: 0 auto;
    top: 52px;
    color: #2dc3e8;
}

html,
body,
.st-container,
.st-pusher,
.st-content {
    height: 100%;
}
.st-container{
    cursor: pointer;
}
.st-content {
    overflow-y: scroll;
    background: #ffffff;
    overflow: hidden;
    border-radius: 10px;
}

.main-body{
    width: 70%;
    margin: 0 auto;
    text-align: right;
    direction: rtl;
}

.st-content,
.st-content-inner {
    margin-top: 11%;
    position: relative;
}

.st-container {
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin: 5px 5px;
    width:250px;
    height: 145px;
}

.st-pusher {
    position: relative;
    left: 0;
    z-index: 99;
    perspective: 1000px;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    height: 120px;
}

.st-pusher::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    background: rgba(0,0,0,0.2);
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}

.st-menu-open .st-pusher::after {
    width: 100%;
    height: 100%;
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.st-menu {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 100;
    visibility: hidden;
    width: 210px;
    height: 120px;
    background: #2dc3e8;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    font-size: 12px;
    direction: rtl;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 5px;
}

.st-menu::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    content: '';
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.st-menu-open .st-menu::after {
    width: 0;
    height: 0;
    opacity: 0;
    -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}

/* content style */

.st-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-menu h2 {
    margin: 0;
    padding: 1em;
    color: rgba(0,0,0,0.4);
    text-shadow: 0 0 1px rgba(0,0,0,0.1);
    font-weight: 300;
    font-size: 2em;
}

.st-menu ul li a {

    display: block;
    padding: 1.2em 1.2em 1.2em 1.2em;
    outline: none;
    box-shadow: inset 0 -32px rgba(16,16,16,0.2) !important;
    color: #ffffff;
    font-weight:bold !important;
    text-transform: uppercase;
    text-shadow: 0 0 1px rgba(255,255,255,0.1);
    letter-spacing: 1px;
    font-weight: 400;
    -webkit-transition: background 0.3s, box-shadow 0.3s;
    transition: background 0.3s, box-shadow 0.3s;
    font-size: 12px;
    text-decoration: none;
    line-height: 8px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-menu ul li:first-child a {
    box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2);
}

.st-menu ul li a:hover {
    background: rgba(16,16,16,0.2);
    box-shadow: inset 0 -32px rgba(16,16,16,0.2) !important;
    color: #fff;
}
/* Effect 11: Scale and rotate pusher */

.st-effect-11.st-container {
    -webkit-perspective: 300px;
    perspective: 300px;
}

.st-effect-11 .st-pusher {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.st-effect-11.st-menu-open .st-pusher {
    -webkit-transform: translate3d(100px, 0, -800px) rotateY(-40deg);
    transform: translate3d(-250px, 0, -600px) rotateY(40deg);
}

.st-effect-11.st-menu {
    opacity: 1;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

.st-effect-11.st-menu-open .st-effect-11.st-menu {
    visibility: visible;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.st-effect-11.st-menu::after {
    display: none;
}

.no-csstransforms3d .st-pusher,
.no-js .st-pusher {
    padding-left: 300px;
}

@media only screen
and (max-device-width: 320px)
and (orientation: portrait)
{
    .main-body{
        width: 100%;
        margin: 0 auto;
    }
    .st-container {
        margin: 5px 0px;
        width: 100%;
    }
    .st-menu ul li a
    {
        font-size: 13px;
    }
    .st-menu {
        width: 171px;
    }
    .st-effect-11.st-menu-open .st-pusher {
        -webkit-transform: translate3d(-199px, 0, -431px) rotateY(40deg);
        transform: translate3d(-199px, 0, -431px) rotateY(40deg);
    }
}
/***********************************************************/
@media only screen
and (max-device-width: 320px)
and (min-aspect-ratio: 1/1)
{

    .main-body{
        width: 100%;
        margin: 0 auto;
    }
    .st-container {
        margin: 5px 0px;
        width: 100%;
    }
    .st-menu ul li a
    {
        font-size: 13px;
    }
    .st-menu {
        width: 171px;
    }
    .st-effect-11.st-menu-open .st-pusher {
        -webkit-transform: translate3d(-199px, 0, -431px) rotateY(40deg);
        transform: translate3d(-199px, 0, -431px) rotateY(40deg);
    }

}
/*******************************/
@media only screen
and (min-device-width: 321px)
and (max-device-width: 400px)
and (orientation: portrait)
{
    .main-body{
        width: 100%;
        margin: 0 auto;
    }
    .st-container {
        margin: 5px 0px;
        width: 100%;
    }
    .st-menu ul li a
    {
        font-size: 13px;
    }
    .st-menu {
        width: 171px;
    }
    .st-effect-11.st-menu-open .st-pusher {
        -webkit-transform: translate3d(-199px, 0, -431px) rotateY(40deg);
        transform: translate3d(-199px, 0, -431px) rotateY(40deg);
    }
}
/************************************************************/
@media only screen
and (min-device-width: 321px)
and (max-device-width: 400px)
and (min-aspect-ratio: 1/1)
{
    .st-container {
        position: relative;
        overflow: hidden;
        display: inline-block;
        margin: 5px 0px;
        width: 100%;
        height: 250px;
    }
    .main-body{
        width: 100%;
        margin: 0 auto;
    }
    .st-effect-11.st-menu-open .st-pusher {
        -webkit-transform: translate3d(-40%, 0, -400px) rotateY(40deg);
        transform: translate3d(-40%, 0, -400px) rotateY(40deg);
    }
}
/******************************tablet*****************************/
@media only screen
and (min-device-width: 400px)
and (max-device-width: 550px)
and (orientation: portrait)
{
    .st-container {
        position: relative;
        overflow: hidden;
        display: inline-block;
        margin: 5px 0px;
        width: 100%;
        height: 250px;
    }
    .main-body{
        width: 100%;
        margin: 0 auto;
    }
    .st-effect-11.st-menu-open .st-pusher {
        -webkit-transform: translate3d(-59%, 0, -480px) rotateY(32deg);
        transform: translate3d(-59%, 0, -480px) rotateY(32deg);
    }
}
/******************************************************************************/
@media only screen
and (min-device-width: 400px)
and (max-device-width: 550px)
and (min-aspect-ratio: 1/1)
{
    .st-container {
        position: relative;
        overflow: hidden;
        display: inline-block;
        margin: 5px 0px;
        width: 100%;
        height: 250px;
    }
    .main-body{
        width: 100%;
        margin: 0 auto;
    }
    .st-effect-11.st-menu-open .st-pusher {
        -webkit-transform: translate3d(-40%, 0, -400px) rotateY(40deg);
        transform: translate3d(-40%, 0, -400px) rotateY(40deg);
    }
}
/******************************tablet*****************************/
@media only screen
and (min-device-width: 550px)
and (max-device-width: 700px)
and (orientation: portrait)
{
    .st-container {
        position: relative;
        overflow: hidden;
        display: inline-block;
        margin: 5px 0px;
        width: 100%;
        height: 250px;
    }
    .main-body{
        width: 100%;
        margin: 0 auto;
    }
    .st-effect-11.st-menu-open .st-pusher {
        -webkit-transform: translate3d(-20%, 0, -301px) rotateY(40deg);
        transform: translate3d(-20%, 0, -301px) rotateY(40deg);
    }
}
/******************************************************************************/
@media only screen
and (min-device-width: 550px)
and (max-device-width: 700px)
and (min-aspect-ratio: 1/1)
{
    .st-container {
        position: relative;
        overflow: hidden;
        display: inline-block;
        margin: 5px 0px;
        width: 100%;
        height: 250px;
    }
    .main-body{
        width: 100%;
        margin: 0 auto;
    }
    .st-effect-11.st-menu-open .st-pusher {
        -webkit-transform: translate3d(-20%, 0, -301px) rotateY(40deg);
        transform: translate3d(-20%, 0, -301px) rotateY(40deg);
    }
}
/******************************************************************************/
@media only screen
and (min-device-width: 700px)
and (max-device-width: 800px)
and (orientation: portrait)
{
    .st-container {
        position: relative;
        overflow: hidden;
        display: inline-block;
        margin: 5px 0px;
        width: 100%;
        height: 250px;
    }
    .main-body{
        width: 100%;
        margin: 0 auto;
    }
    .st-effect-11.st-menu-open .st-pusher {
        -webkit-transform: translate3d(-17%, 0, -290px) rotateY(31deg);
        transform: translate3d(-17%, 0, -290px) rotateY(31deg);
    }
}
/*******************************************************************************/
@media only screen
and (min-device-width: 700px)
and (max-device-width: 800px)
and (min-aspect-ratio: 1/1)
{
    .st-container {
        position: relative;
        overflow: hidden;
        display: inline-block;
        margin: 5px 0px;
        width: 100%;
        height: 250px;
    }
    .main-body{
        width: 100%;
        margin: 0 auto;
    }
    .st-effect-11.st-menu-open .st-pusher {
        -webkit-transform: translate3d(-17%, 0, -290px) rotateY(31deg);
        transform: translate3d(-17%, 0, -290px) rotateY(31deg);
    }
}
/**********************************************************************************/
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1100px)
and (orientation: portrait)
{
    .st-container {
        margin: 5px 5px;
        width: 48%;
        height: 250px;
    }
    .main-body{
        width: 100%;
        margin: 0 auto;
    }
}
/****************************************************************************/

@media only screen
and (min-device-width: 800px)
and (max-device-width: 1100px)
and (min-aspect-ratio: 1/1)
{
    .st-container {
        margin: 5px 5px;
        width: 48%;
        height: 250px;
    }
    .main-body{
        width: 100%;
        margin: 0 auto;
    }
}