*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.clearfix:before {
    clear: both;
    content: "";
    display: block;
}

.clear {
    clear: both;
}

:focus {
    outline: 0
}
.simple_box_theme .simple_title_l {
    display:block;
    padding:15px 15px 10px;
    min-height:75px;
    line-height:1.8
}
body.portal_index h1, body.portal_index h2 {
    color: #3a4d5f !important;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    direction: rtl;
}

::selection {
    background: #B2D3FA;
    color: #000
}

::-moz-selection {
    background: #B2D3FA;
    color: #000
}

a, a:hover {
    outline: none;
    color: #666;
    text-decoration: none !important;
}

@font-face {
    font-family: 'IRANSans';
    src: url('../fonts/WebYekan.eot');
    src: url('../fonts/WebYekan.eot@#iefix') format('embedded-opentype'),
    url('../fonts/WebYekan.woff') format('woff'),
    url('../fonts/WebYekan.ttf') format('truetype'),
    url('../fonts/WebYekan.svg#WebYekan') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/IRANSansWeb_Bold.eot');
    src: url('../fonts/IRANSansWeb_Bold.eot@#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/IRANSansWeb_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('../fonts/IRANSansWeb_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/IRANSansWeb_Bold.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/IRANSansWeb_Medium.eot');
    src: url('../fonts/IRANSansWeb_Medium.eot@#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/IRANSansWeb_Medium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('../fonts/IRANSansWeb_Medium.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/IRANSansWeb_Medium.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/IRANSansWeb_Light.eot');
    src: url('../fonts/IRANSansWeb_Light.eot@#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/IRANSansWeb_Light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('../fonts/IRANSansWeb_Light.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/IRANSansWeb_Light.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/IRANSansWeb_UltraLight.eot');
    src: url('../fonts/IRANSansWeb_UltraLight.eot@#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/IRANSansWeb_UltraLight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('../fonts/IRANSansWeb_UltraLight.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/IRANSansWeb_UltraLight.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/IRANSansWeb.eot');
    src: url('../fonts/IRANSansWeb.eot@#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/IRANSansWeb.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('../fonts/IRANSansWeb.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/IRANSansWeb.ttf') format('truetype');
}

body {
    /* letter-spacing: -0.05rem; */
    /* transition: all 200ms; */
}
.portal_index .mainheader {
    margin: 3rem 0 6rem;
}
.vvvv {
    transform: translateY(45px) translateX(100px) scale(.85);
}
.topslider {
    z-index:5;
}
#onesignal-popover-container #onesignal-popover-dialog .popover-body-icon {float:right !important}
#onesignal-popover-container #onesignal-popover-dialog .popover-body-message,#onesignal-popover-container #onesignal-popover-dialog .popover-button.primary,#onesignal-popover-container #onesignal-popover-dialog .popover-button.secondary,.onesignal-bell-launcher-message {direction:rtl;font-family:'IRANSans' !important;font-weight:normal !important;font-size:15px}
#onesignal-popover-container #onesignal-popover-dialog .popover-body-message {padding:0 !important;width:calc(100% - 100px) !important;line-height:1.9 !important;font-size:16px !important}
#onesignal-popover-container #onesignal-popover-dialog .align-right {float:left !important}
#onesignal-popover-container #onesignal-popover-dialog .popover-body-icon img {height: 80px !important; border-radius: 3px; width: 80px !important; float: right;}
#onesignal-popover-container #onesignal-popover-dialog .popover-body-icon {width:100px !important;height:40px !important}
#onesignal-popover-container #onesignal-popover-dialog .popover-footer{margin:20px 0 0 0 !important}
body #onesignal-popover-container #onesignal-popover-dialog {padding:30px !important;border-radius:0 0 3px 3px !important;box-shadow:0 2px 60px rgba(0,0,0,.15) !important}


.labelblue {
    color: #fff;
    background: linear-gradient(to right, #4b64d8 , #5368cc);
    margin-right: 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 300;
    display: inline-block;
    transform: translateY(-2px);
    padding: 1px 0.75rem;
}
.labelgrey {
    color: #777;
    background: #f5f5f5;
    border-radius: 99px;
    padding: 1px 0.75rem;
}
.its_newshop span{
    color: white;
    font-size: 11px;
    display: inline-block;
    transform: translate(-2px, -2px);
    background: rgb(243, 114, 75);
    border-radius: 100px;
    padding: 2px 10px;
}

.top-nav {
    /* background: white; */
    padding: 4.5rem 0 0;
    font-size: 1.7rem;
    /* position: absolute; */
    /* position: fixed; */
    position: relative;
    /* top: -100px; */
    transition: all 200ms;
    width: 100%;
    /* border-bottom: 1px solid #eee; */
    z-index: 10010;
    font-weight: 300;
    line-height: 2;
    /* box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.05); */
}

.fixed {
    position: fixed;
    right: 0;
    top: 0;
    padding:1.5rem 0 0 0 !important;
    background: white;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.fiexd .awe-navbar-body li {
	padding-bottom:26px !important;
}
.fixed .loginnow {
    color: #666 !important;
}
.padding-top {
    padding-top: 107px;
}

.top-nav a:hover {
    text-decoration: none;
    color: #111
}
.shortlink {
    padding: 30px 40px 10px;
    border-top: 1px solid #eee
}

.shortlink a {
    display:block;
    font-size:14px;
    margin:0;
    padding:0
}

.logo-brand {

    width: 70px;
    height: 32px;
    font-size: 0px;
    float: right;
    margin: 15px 0px 0px 0px;
}

.logo-brand a {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 0px
}

.awe-navbar-body li {
    padding-bottom: 35px;
}

.awe-navbar-body li ul li {
    padding: 20px 15px 0px;
}

.topmenu {
    margin-top: 15px;
    font-size: 16px;
    font-weight: 3000;
    margin-bottom: 0px !important;
}

.topmenu .col-lg-9 a {
    font-weight: 400;
    font-size: 16px;
}

.topmenu li ul p {
    font-size: 14px;
    color: #666;
}

.topmenu .caret-down {
    margin: 0px 5px 0px 0px;
}

.topmenu > li > ul {
    width: 460px;
    top: 100%;
    padding: 15px 0px;
    list-style: none;
    background: white;
    border-radius: 3px;
    animation: menuB 0.5s 1;
    /* border-top: 1px solid #eee; */
    box-shadow: 0px 10px 25px rgba(0,0,0,0.1);
}

@keyframes menuB {
    0% { opacity : 0}
    150% { opacity : 1}
}

.topmenu > li > ul > li {
    list-style: none;
    margin: 0 !important;
}

.topmenu > li > ul > li a {
    padding: 5px 0;
    display: block;
}

.topmenu li {
    /* margin: 0 0 0 4.5rem !important; */
}
.topmenu li ul li a{
    padding: 0px 0px 0px 0px;
    color: #333;
    font-size: 16px;
    font-weight: 500;
}
.topmenu li .topico {
    width: 52px;
    height: 52px;
    margin: 0px auto;
}

.topmenu li .topico1 {
    background: url('../images/portal-sprite.png') no-repeat -348px -270px;
}

.topmenu li .topico2 {
    background: url('../images/portal-sprite.png') no-repeat -400px -270px;
}

.topmenu li .topico3 {
    background: url('../images/portal-sprite.png') no-repeat -452px -270px;
}

.topmenu li a {
    color: #666;
    padding: 0.65rem 0.75rem;
}

.loginbar_mobile {
    background: linear-gradient(to bottom, #82DCE6 25%, #5db0e8 100%);
    padding: 20px;
    margin-bottom: 5px;
    display: none;
}

.metaportal {
    margin-top: 5px;
    text-align: left;
}

.loginnow {
    padding: 0.65rem 1.866rem;
    /* border: 1px solid #62B3E9; */
    color: #ffffff;
    margin: 0 0 0 10px;
    border-radius: 4px;
    display: inline-block;
}

.loginnow:hover {
    color: white !important;
    background: #62B3E9;
}

.metaportal .dropdown-item {
	padding: 5px 10px;
	display: block;
}

.metaportal .dropdown-item:hover {
	background: #f5f5f5;
}

.registernow {
    background: linear-gradient(to right, #FBCB3C , #FCB81B);
    color: #000;
    padding: 0.65rem 2rem;
    border-radius: 4px;
    box-shadow: 0px 12px 10px -10px #04040414;
    font-weight: 400;
    display: inline-block;
}
.registernow .test_free {
font-size: 13px;
    border-radius: 3px;
    background: white;
    padding: 2px 10px;
    display: inline-block;
    transform: translateY(-1px);
    margin-right: 5px;
}
.registernow:hover {
    box-shadow:0px 2px 5px #ffd262;
	background:#f2cb69;
}
a.phone-no {
    background: url('../images/portal-sprite.png') no-repeat left top;
    padding: 0 0 0 4.75rem;
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    line-height: 34px;
    height: 34px;
    margin: 4px 0 0 15px;
}

.registernow i {
    font-size: 12px;
    margin-right: 5px;
}
.mainheader .nopadding {
    position:relative;
    z-index:2
}
h1.main_title strong {
    color: #4B64D8 !important;
}
.mainheader .padding-top40 {
    padding-top:55px
}
.mainheader {
    padding: 8rem 0 18.5rem;
    /* overflow: hidden; */
    background-size: cover;
    min-height: 612px;
    border-bottom: 1px solid #edf7fc;
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 25%, rgba(242, 248, 255, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(25%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(242, 248, 255, 1)));
    /* background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 25%, rgba(242, 248, 255, 1) 100%); */
    background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 25%, rgba(242, 248, 255, 1) 100%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 25%, rgba(242, 248, 255, 1) 100%);
    /* background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 25%, rgba(242, 248, 255, 1) 100%); */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f8ff', GradientType=0);
}
.mainheader p a {
margin-left: 10px;
}

.mainheader .container-xl {
    position: relative;
}

.mainheader .white-radius {
    content: "";
    height: 660px;
    width: 660px;
    background: rgba(255, 255, 255, 0.5);
    position: absolute;
    bottom: -300px;
    border-radius: 280px;
    right: -10%;
    -webkit-transform: rotate(43deg); /* Chrome, Safari, Opera */
    transform: rotate(43deg);
    z-index: 0;
}

.sprite {
    display: inline-block;
}

.caret-down {
    background: url('../images/portal-sprite.png') no-repeat -1060px top;
    height: 10px;
    width: 10px;
}

.caret-left {
    background: url('../images/portal-sprite.png') no-repeat -1050px top;
    height: 10px;
    width: 10px;
}

.mainheader .yellow-radius {
    background: linear-gradient(to bottom, #e4eaff , #ffffff00);
    transform: skew(200deg);
    position: absolute;
    /* border-radius: 150px; */
    width: 340px;
    height: 280px;
    position: absolute;
    z-index: 1;
    left:205px;
    top:200px;
    /* -webkit-transform: rotate(-43deg); */
    /* transform: rotate(-43deg); */
    z-index: 2;
    /* animation: sacle10 10s infinite; */
}

.simple-article .yellow-radius {
    background: #FFD262;
    position: absolute;
    top: 291px;
    border-radius: 50px;
    height: 160px;
    width: 160px;
    left: 38%;
    z-index: 0;
    animation: sacle 10s infinite;
}

.simple-article .yellow-radius {
    top: 500px;
}

@keyframes sacle {
    0% {
        transform: rotate(-43deg);
    }
    33% {
        transform: rotate(-40deg);
    }
    66% {
        transform: rotate(-46deg);
    }
    100% {
        transform: rotate(-43deg);
    }
}

.mainheader .blue-radius {

background: linear-gradient(to bottom, #345BDC , #1729AA);

transform: skew(200deg);

position: absolute;

/* border-radius: 150px; */

width: 520px;

height: 480px;

position: absolute;

z-index: 3;

left: 30px;

top: -280px;

/* -webkit-transform: rotate(-43deg); */ /* Chrome, Safari, Opera */

/* transform: rotate(-43deg); */

z-index: 3;

/* animation: sacle10 10s infinite; */
}


@media (min-width:1200px) {
.mainheader .blue-radius:before {

background: linear-gradient(to bottom, #466bec , #243fc0);

transform: skew(180deg);

position: absolute;

content:"";
width: 100px;

height: 480px;

position: absolute;

z-index: 1;

left: 400px;
top: -150px;
z-index: 0;
}
.mainheader .yellow-radius:after {

background: linear-gradient(to top, #466bec , #243fc0);

transform: skew(-36deg);

position: absolute;

content:"";

width: 410px;

height: 830px;

position: absolute;

z-index: 1;

left: -330px;

top: -500px;
}
}
@keyframes sacle10 {
    0% {
        transform: rotate(-43deg);
    }
    33% {
        transform: rotate(-40deg);
    }
    66% {
        transform: rotate(-46deg);
    }
    100% {
        transform: rotate(-43deg);
    }
}
.text-blue-t {
    color: #4B64D8 !important;
}
.subtitle {
    font-size: 19px;
    font-weight: 400;
    color: #314354ad;
    margin: 5px 0px;
}

.maintitle {
    letter-spacing: -1px;
    font-size: 33px;
    margin: 10px 0;
    font-weight: 500;
}

.maintitle span {
    color: #efc04c;
    padding: 0px 5px
}

.float-img {
    max-width: 100%;
    height: auto;
}

.nopadding {
    padding: 0px !important;
}

.maintitle-section {
    /* letter-spacing: -1px; */
    font-size: 28px;
    margin-bottom: 2rem;
    font-weight: 600;
}

.maindesc {
    font: 300 17px/2 'IRANSans', tahoma;
    color: #2d465fb8;
    margin: 1rem 0 3.75rem;
}

.maindesc2 {
    font: 300 16px/2 'IRANSans', tahoma;
    color: #5f6f7f;
    /* text-align:  justify; */
    margin: 1rem 0 3rem 2rem;
}

.simple-subtitle {
    margin: 0;
    color: #677888;
    line-height: 1;
    font-weight: 400;
    font-size: 19px !important;
    margin-bottom: 0;
}

.bluebtn {
    background: linear-gradient(to right, #578AE5 , #2651DB);
    color: white;
    padding: 0.65rem 2rem;
    border-radius: 4px;
    box-shadow: 0px 12px 10px -10px rgba(87, 138, 229, 0.6);
    color: #fff;
    padding: 1.3rem 2.5rem;
    border-radius: 3px;
    -webkit-transition: all 0.2s; /* Safari 3.1 to 6.0 */
    transition: all 0.2s;
}

.bluebtn:hover, .bluebtn:focus, .bluebtn:visited {
    background-color: #23ACFE;
    color: #fff !important;
}
.bluebtn2 {
    border: 1px solid #48b8fe;
    color: #48b8fe;
    padding: 1.3rem 2.5rem;
    border-radius: 3px;
    -webkit-transition: all 0.2s; /* Safari 3.1 to 6.0 */
    transition: all 0.2s;
}
.bluebtn2:hover, .bluebtn2:focus {
    background-color: #23ACFE;
    color: #fff
}
.yellowbtn {
    background: linear-gradient(to right, #FBCB3C , #FCB81B);
    color: #000;
    padding:10px 30px;
    border-radius: 4px;
    box-shadow: 0px 12px 10px -10px #f1c53085;
    font-weight: 400;
    -webkit-transition: all 0.2s; /* Safari 3.1 to 6.0 */
    transition: all 0.2s;
}

.yellowbtn:hover {
    background-color: #f6c552;
    color: #1A150A;
    box-shadow: 0px 3px 10px rgba(238, 193, 97, 0.4)
}

.dashedbtn {
    color: #666;
    padding: 1.3rem 0.5rem;
    border-bottom: 1px dashed #ddd;
    margin-left: 1.5rem;
}

.dashedbtn:hover {
    color: #222;
    border-bottom: 1px dashed #f6c552;
}

.dashedbtn svg {
    margin-left: 10px;
    transform: translateY(8px);
}

.topslider .owl-dots {
    display: none;
}

#customer-stories-desc .owl-prev:before, .topslider .owl-prev:before {
    content: " ";
    height: 10px;
    width: 2px;
    background: #1a3969;
    border-radius: 2px;
    display: block;
    transform: rotate(-45deg);
}

#customer-stories-desc .owl-prev:after, .topslider .owl-prev:after {
    content: " ";
    height: 10px;
    width: 2px;
    background: #1a3969;
    display: block;
    border-radius: 2px;
    transform: rotate(45deg) translate(-2px, -3px);
}

#customer-stories-desc .owl-prev, #customer-stories-desc .owl-next,
.topslider .owl-prev, .topslider .owl-next, #feat-slsh .owl-next, #feat-slsh .owl-prev {
    font-size: 0px;
    width: 40px;
    height: 40px;
    padding: 8px;
    position: absolute;
    z-index: 200
}

.topslider .owl-prev {
    right: -28px;
    top: 180px;
}

.topslider .owl-next {
    left: 30px;
    top: 180px;
}

#customer-stories-desc .owl-next:before, .topslider .owl-next:before {
    content: " ";
    height: 10px;
    width: 2px;
    background: #1a3969;
    border-radius: 2px;
    display: block;
    transform: rotate(45deg)
}

#customer-stories-desc .owl-next:after, .topslider .owl-next:after {
    content: " ";
    height: 10px;
    width: 2px;
    background: #1a3969;
    display: block;
    border-radius: 2px;
    transform: rotate(-45deg) translate(2px, -2px);
}

#feat-slsh .owl-prev:before {
    content: " ";
    height: 10px;
    width: 2px;
    background: #1a3969;
    display: block;
    border-radius: 2px;
    transform: rotate(-45deg)
}

#feat-slsh .owl-prev:after {
    content: " ";
    height: 10px;
    width: 2px;
    background: #1a3969;
    display: block;
    border-radius: 2px;
    transform: rotate(45deg) translate(-2px, -2px);
}

#feat-slsh .owl-next:before {
    content: " ";
    height: 10px;
    width: 2px;
    background: #1a3969;
    display: block;
    border-radius: 2px;
    transform: rotate(45deg)
}

#feat-slsh .owl-next:after {
    content: " ";
    height: 10px;
    width: 2px;
    background: #1a3969;
    display: block;
    border-radius: 2px;
    transform: rotate(-45deg) translate(2px, -2px);
}

#sync1 {
    background: url('../images/laptop.png');
    height: 420px;
    width: 700px;
    position: absolute;
    background-size: 100% 100%;
    left: 0;
    padding: 44px 105px 83px 125px;
}

#sync2 {
    background: url(../images/portal-sprite.png) no-repeat right -482px white;
    height: 254px;
    width: 125px;
    overflow: hidden;
    padding: 29px 8px 29px 7px;
    margin-top: 158px;
    border-radius: 17px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    margin-right: 2px;
}

.testiimg {
    float: right;
    margin-right: 10px;
    margin-left: 20px;
}

.testiimg img {
    border: 2px solid white;
    border-radius: 99px;
    box-shadow: 0px 4px 10px
}

.testiname {
    float: right;

}

.testiname h4 {
    font-weight: 500;
    color: white;
}

.testiname {
    font-size: 13px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.5);
}

.testitext {
    font-size: 18px;
    color: white;
    line-height: 2;
    font-weight: 300;
    text-align: justify;
    padding-top: 2.5rem;
}

.all-stories {
    padding-top: 4rem;
    position: absolute;
    top: 40px;
    left: 0;
    height: 100px;
    padding-right: 1.5rem;
    z-index: 9980;
}

.all-stories a {
    font-size: 15px;
    border-radius: 99px;
    background: #476d93;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 300;
    padding: 0.75rem 2.5rem;
}

.all-stories a:hover {
    font-size: 15px;
    border-radius: 99px;
    background: white;
    color: #333;
}

#feat-slsh .owl-next {
    /* top: 140px; */
    /* right: -20px; */
    top: 140px;
    left: 5px;
    background: #fff;
    padding: 11px 20px;
    border-radius: 999px;
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1);
}

#feat-slsh .owl-prev {
    top: 140px;
    right: 5px;
    background: #fff;
    padding: 11px 18px;
    border-radius: 999px;
    /* color: #999; */
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1);
}
.padding-top10 {
    padding-top: 1rem !important;
}

.padding-top15 {
    padding-top: 1.5rem !important;
}

.padding-top30 {
    padding-top: 3rem
}

.padding-top25 {
    padding-top: 2.5rem
}

.padding-top40 {
    padding-top: 4rem
}

.simple-article {
    padding: 7.5rem 0;
}

.simple-article5 {
    padding:6rem 0 7rem;
}

.feat_coc {
    color: #434343;
    font-size: 17px;
}

.simple-article4 {
    padding: 2.5rem 0 7.5rem;
}

.simple-article-short {
    padding: 5rem 0;
}

.yellow-radius2 {
    background: rgba(255, 210, 98, 0.27);
    position: absolute;
    top: 350px;
    border-radius: 85px;
    height: 300px;
    -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
    transform: rotate(30deg);
    width: 300px;
    right: 0px;
    z-index: 0;
    display: none;
}

.yellow-radius20 {
    border: 5px solid rgba(255, 210, 98, 0.27);
    position: absolute;
    top: -150px;
    border-radius: 200px;
    height: 900px;
    -webkit-transform: rotate(-30deg); /* Chrome, Safari, Opera */
    transform: rotate(-30deg);
    width: 900px;
    left: -850px;
    z-index: 0;
}

.yellow-radius30 {
    border: 5px solid rgba(255, 210, 98, 0.27);
    position: absolute;
    top: 20px;
    border-radius: 200px;
    height: 900px;
    -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
    transform: rotate(30deg);
    width: 900px;
    right: -850px;
    z-index: 0;
}

.yellow-radius40 {
    background: linear-gradient(to bottom, #e2e9ff , #ffffff);
    /* border: 10px solid rgba(77, 173, 198, 0.05); */
    position: absolute;
    top: 570px;
    border-radius: 200px;
    height: 900px;
    -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
    transform: rotate(30deg);
    width: 900px;
    left: -850px;
    z-index: 0;
}

.yellow-radius50 {
    background: rgb(253, 219, 133);
    /* border: 10px solid rgba(77, 173, 198, 0.05); */
    5) * / position: absolute;
    top: 100px;
    border-radius: 80px;
    height: 290px;
    position: absolute;
    -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
    transform: rotate(30deg);
    width: 210px;
    right: 240px;
    z-index: 1;
}

.blue-radius50 {
    background: #68C6FE;
    /* border: 10px solid rgba(77, 173, 198, 0.05); */
    top: 160px;
    border-radius: 90px;
    height: 280px;
    position: absolute;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    width: 280px;
    right: 60px;
    z-index: 1;
}

#sync1 {
    background: url('../images/laptop.png') center center;
    height: 420px;
    /* width: 100%; */
    margin: 0px auto;
}

.feature-list {
    padding: 6.5rem 0;
    border-bottom: 1px solid #eee;
}

.featurebody {
    border-radius: 4px;
    padding: 3rem 0rem 4rem;
    line-height: 1;
    color: #5f778ee3;
    margin: 25px 0px 0px;
    font-size: 15px;
    box-shadow:0px 10px 40px rgba(47, 92, 135, 0.1);
    font-weight: 300;
}

.ico {
    width: 48px;
    margin: 15px 20px 0px 0px;
    height: 48px;
}

.ico1 {
    background: url('../images/portal-sprite.png') no-repeat -1152px -270px;
}

.ico2 {
    background: url('../images/portal-sprite.png') no-repeat -1104px -270px;
}

.ico3 {
    background: url('../images/portal-sprite.png') no-repeat -1056px -270px;
}

.ico4 {
    background: url('../images/portal-sprite.png') no-repeat -1008px -270px;
}

.ico5 {
    background: url('../images/portal-sprite.png') no-repeat -960px -270px;
}

.ico6 {
    background: url('../images/portal-sprite.png') no-repeat -912px -270px;
}

.ico7 {
    background: url('../images/portal-sprite.png') no-repeat -864px -270px;
}

.ico8 {
    background: url('../images/portal-sprite.png') no-repeat -816px -270px;
}

.ico9 {
    background: url('../images/portal-sprite.png') no-repeat -764px -270px;
}

.ico10 {
    background: url('../images/portal-sprite.png') no-repeat -716px -270px;
}

.ico11 {
    background: url('../images/portal-sprite.png') no-repeat -668px -270px;
}

.ico12 {
    background: url('../images/portal-sprite.png') no-repeat -620px -270px;
}

.ico13 {
    background: url('../images/portal-sprite.png') no-repeat -572px -270px;
}

.ico14 {
    background: url('../images/portal-sprite.png') no-repeat -476px -270px;
}

.price-table-index .ico {
    border: 1px solid #159AE9;
    border-radius: 4px;
    margin-top: 4px;
}

.nomargin {
    margin: 0 !important;
}

.simple-feat .ico {
    margin: 0 0 20px;
}

.featurebody .col-lg-2 .fa-life-ring {
    color: #ff5722
}

.featurebody .col-lg-2 .fa-address-book-o {
    color: #2196F3
}

.featurebody .col-lg-2 .fa-star {
    color: #FFC107
}

.featurebody .col-lg-2 .fa-money {
    color: #2cd379
}

.featurebody h5 {
    color: #5f778e;
    font-weight: 500;
    font-size: 19px;
    margin: 14px 0px 8px;
}

.featurebody i.fa {
    font-size: 36px;
    padding-top: 1.25rem;
    /* background: #fdfdfd; */
    display: block;
    line-height: 1;
    width: 56px;
    border-radius: 4px;
    padding: 13px;
    /* border-bottom: 2px solid #eee; */
    margin-top: 5px;
    height: 56px;
    /* box-shadow: 0px 2px 5px #080808; */
}

.supico {
    width: 64px;
    height: 64px;
    display: block;
    margin: 0px auto 1.5rem;
}

.supico1 {
    background: url('../images/portal-sprite.png') no-repeat -1136px -80px;
}

.supico2 {
    background: url('../images/portal-sprite.png') no-repeat -1072px -80px;
}

.supico3 {
    background: url('../images/portal-sprite.png') no-repeat -1008px -80px;
}

.supico4 {
    background: url('../dist/static_sprite.png') no-repeat -936px -400px;
}

.supico5 {
    background: url('../dist/static_sprite.png') no-repeat -872px -400px;
}

.supico6 {
    background: url('../dist/static_sprite.png') no-repeat -808px -400px;
}

.tetris-bg .package_contact_us_phone {
    margin: 0px !important;
    padding: 0px !important;
    /* transform: translateY(-20px); */
}

.tetris-bg {
    background: #1d3b6e;
    padding: 10rem 0rem !important;
    border-top: 1px solid #eee;
    position: relative;
    overflow: hidden;
    /**animation: tetrisbg 400s infinite linear**/
}

.tetris-bg video {
    position: absolute;
    opacity: 0.03;
    /* top: 0; */
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

section.tetris-bg h2, .tetris-bg h5, .tetris-bg {
    color: white !important;
}

.tetris-bg p, .tetris-bg h4 {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 17px;
    padding: 0px 25px;
    line-height: 2
}

@keyframes tetrisbg {
    0% {
        background: url('../images/tetris-bg.png') repeat-x 1000px bottom #565656
    }
    50% {
        background: url('../images/tetris-bg.png') repeat-x -1000px bottom #565656
    }
    100% {
        background: url('../images/tetris-bg.png') repeat-x 1000px bottom #565656
    }
}

.tetris-bg h5 {
    color: #5f778e;
    font-size: 20px;
    /* margin: 2rem 0 3rem; */
    font-weight: 400;
}

.tetris-bg p {
    color: #778da2;
}

.test-bg {
    border-bottom: 1px solid #eee;
    background: linear-gradient(45deg, rgba(38, 80, 121, 1) 0%, rgba(57, 105, 150, 1) 100%);
    position: relative;
}
.test-bg .simple-article-short {
    padding:5rem 0 3rem
}

.test-bg .owl-prev {
    position: absolute;
    right: -20px;
    top: 25px;
    font-size: 0px;
    padding: 4px;
    width: 40px;
    height: 40px;
    padding-: 7px;
}

.test-bg .owl-prev:before {
    content: " ";
    height: 10px;
    width: 2px;
    background: rgba(255,255,255,0.5);
    border-radius: 2px;
    display: block;
    transform: rotate(-45deg);
}

.test-bg .owl-prev:after {
    content: " ";
    height: 10px;
    width: 2px;
    background: rgba(255,255,255,0.5);
    display: block;
    border-radius: 2px;
    transform: rotate(45deg) translate(-2px, -3px);
}

.test-bg .owl-next {
    position: absolute;
    right: 21.5%;
    top: 25px;
    width: 40px;
    height: 40px;
    padding: 7px;
    font-size: 0px;
}

.test-bg .owl-next:before {
    content: " ";
    height: 10px;
    width: 2px;
    background: rgba(255,255,255,0.5);
    border-radius: 2px;
    display: block;
    transform: rotate(45deg);
}

.test-bg .owl-next:after {
    content: " ";
    height: 10px;
    width: 2px;
    background: rgba(255,255,255,0.5);
    display: block;
    border-radius: 2px;
    transform: rotate(-45deg) translate(2px, -2px);
}

.simple-article-grey {
    background: #f5f7f9;
    overflow: hidden;
}

.simple-article2 {
    padding: 5rem 0
}

.center p {
    padding: 3rem 0 1rem;
    font-size: 18px;
    font-weight: 400;
    display: block !important;
}

#feat-slsh p {
    display: none;
}

#feat-slsh {
    position: relative;
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
    text-align: center;
    margin: 4rem auto 0px;
}

#feat-slsh:before {
    content: "";
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 20%, rgb(255, 255, 255) 100%);
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 180px;
    z-index: 1;
}

#feat-slsh:after {
    content: "";
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 20%, rgb(255, 255, 255) 100%);
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 180px;
    z-index: 190;
}

#feat-slsh .owl-item {
    opacity: 0.7;
}

#feat-slsh .active {
    opacity: 1;
}

.feat-slsh {
    width: 300px;
    height: 300px;
    margin: 0px auto;
    background-size: 100% 100%;
}

.feat-slsh-1 {
    background: url("../images/feats.png") no-repeat 0 0;
}

.feat-slsh-2 {
    background: url("../images/feats.png") no-repeat 0 -300px;
}

.feat-slsh-3 {
    background: url("../images/feats.png") no-repeat 0 -600px;
}

.feat-slsh-4 {
    background: url("../images/feats.png") no-repeat 0 -900px;
}

.feat-slsh-5 {
    background: url("../images/feats.png") no-repeat 0 -1200px;
}

.feat-slsh-6 {
    background: url("../images/feats.png") no-repeat 0 -1500px;
}

.feat-slsh-7 {
    background: url("../images/feats.png") no-repeat 0 -1800px;
}

.owl-dots, .owl-nav {
    text-align: center;
    padding: 5px 0px 10px;
    -webkit-tap-highlight-color: transparent;
}

#sync2 .owl-dots {
    display: none;
}

.owl-dots .owl-dot {
    display: inline-block;
    zoom: 1;
}

.owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    background: #c5cbd6;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity .2s ease;
    border-radius: 30px;
}

.owl-dots .active span {
    background: #f2de7b
}

.shop-banner {
    background: linear-gradient(to bottom, #82DCE6 25%, #5db0e8 40%, white 40%);
    border-radius: 4px;
    padding: 4rem 2rem;
    position: relative;
    z-index: 10;
    box-shadow: 0px 10px 40px rgba(47, 92, 135, 0.1);
}

.shop-mobile {
    background: url('../images/portal-sprite.png') -660px -464px no-repeat;
    width: 271px;
    height: 260px;
    margin: 0px auto;
}

.shop-banner::before {
    animation: kf-scale-circle 2s linear 0.5s infinite;
    width: 300px;
    height: 300px;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    content: "";
    display: block;
    top: 37px;
    left: 11%;
}

.shop-banner::after {
    animation: kf-scale-circle 2s linear 0.5s infinite;
    width: 240px;
    height: 240px;
    top: 68px;
    left: 19%;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    content: "";
    display: block;
}

@keyframes kf-scale-circle {
    0% {
        -webkit-transform: scale3d(1);
        transform: scale3d(1);
        opacity: 0
    }
    50% {
        opacity: 1
    }
    100% {
        -webkit-transform: scale3d(1.1);
        transform: scale3d(1.1);
        opacity: 0
    }
}

.shop-banner-box {
    padding: 10px 15px 10px 10px !important;
    position: relative;
}

.shop-banner-box .blue-radius2 {
    width: 220px;
    height: 220px;
    background: #FFD262;
    position: absolute;
    top: -10px;
    border-radius: 50px;
    left: -20px;
    -webkit-transform: rotate(-43deg); /* Chrome, Safari, Opera */
    transform: rotate(-43deg);
    z-index: 0;
}

.shop-banner-box .blue-radius3 {
    width: 120px;
    height: 120px;
    background: -moz-linear-gradient(top, #82DCE6 25%, #5db0e8 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(25%, #82DCE6), color-stop(100%, #5db0e8));
    background: -webkit-linear-gradient(top, #82DCE6 25%, #5db0e8 100%);
    background: -o-linear-gradient(top, #82DCE6 25%, #5db0e8 100%);
    background: -ms-linear-gradient(top, #82DCE6 25%, #5db0e8 100%);
    background: linear-gradient(to bottom, #82DCE6 25%, #5db0e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#82DCE6', endColorstr='#5db0e8', GradientType=0);
    position: absolute;
    bottom: -20px;
    border-radius: 20px;
    right: 0;
    opacity: 0.5;
    -webkit-transform: rotate(-43deg); /* Chrome, Safari, Opera */
    transform: rotate(-43deg);
    z-index: 0;
}

.shop-banner h4 {
    color: #555555;
    font-size: 20px;
    margin: 2.5rem 0 1.5rem;
    font-weight: 500;
}

.simple-feat {
    padding-bottom: 2rem !important;
    padding-left: 3rem !important;
}

.simple-feat-section {
    padding: 7rem 8rem 0 0 !important;
}

.simple-feat {
    line-height: 2;
    color: #959595;
    font-size: 17px;
}

.simple-feat h4 {
    color: #435464;
    font-size: 20px;
    margin: 2.5rem 0 1.15rem;
    font-weight: 500;
}

.simple-feat i.fa {
    font-size: 42px;
    line-height: 1;
}

.simple-feat i.fa-money {
    color: #ff5722
}

.simple-feat i.fa-address-book {
    color: #2196F3
}

.simple-feat i.fa-camera {
    color: #9876d4;
}

.solution-desc {
    padding: 2.5rem 0px 0px 0rem;
}

.fright-wide {
    float: right;
    width: 50%;
    padding: 6rem 3rem;
    min-height: 435px;
}

.fright-wide-c {
    float: left;
    width: 660px
}

.customers-anim .fright-wide-c {
    /* background: #E7F7FF !important; */
    height: 505px;
}

#customer-stories-desc .owl-prev {
    right: -670px;
    top: 130px;
}

#customer-stories-desc .owl-next {
    left: -50px;
    top: 130px;
}

#customer-stories-thumb {
    padding: 50px 80px;
}
#customer-stories-thumb .owl-stage-outer{
  box-shadow:0px 20px 40px rgba(0,0,0,0.1) ;
  border-radius: 5px
}
.fleft-wide {
    float: left;
    width: 50%;
    /* padding: 1rem 3rem; */
}

.stories-desc {
    float: right;
    width: 640px;
    padding: 10rem 1rem 0px 3rem;
}

.fleft-wide-support {
    /* background: #FFF1CE; */
}

.abs1000 {
    position: absolute;
    left: -150px;
    top: 20px;
}

.abs1200 {
    position: absolute;
    left: 80px;
    top: 440px;
}

.abs1300 {
    position: absolute;
    left: 120px;
    top: 50px;
}

.abs1400 {
    position: absolute;
    left: -100px;
    top: 350px;
}

.abs1500 {
    position: absolute;
    left: -180px;
    top: 200px;
    display: none;
}

.abs10000 {
    position: absolute;
    right: -150px;
    top: 20px;
}

.abs12000 {
    position: absolute;
    right: 80px;
    top: 440px;
}

.abs13000 {
    position: absolute;
    right: 120px;
    top: 50px;
}

.abs14000 {
    position: absolute;
    right: -100px;
    top: 350px;
}

.abs15000 {
    position: absolute;
    right: -180px;
    top: 200px;
}

.fright-wide-blue {
    background: #58ADE7;
}

.solution-anim {
    background: white !important;
    margin: 95px 20% 0px;
    min-height: 290px;
    width: 37%;
    border-radius: 5px;
    position: relative;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 4;
}

.fleft-wide-c {
    float: right;
    width: 680px;
    padding: 6rem 3rem;
    /* background: #fff1ce; */
}

.fleft-wide-c:before {
    position: absolute;
    top: 95px;
    left: 100px;
    background: url(../images/solution-anim.png) no-repeat;
    width: 225px;
    height: 332px;
    content: "";
    z-index: 2;
}

.solution-text {
    font-size: 28px;
    margin-bottom: 2rem;
    font-weight: 600;
    line-height: 2;
    color: #314354 !important;
    margin-bottom: 15px;
}

.solution {
    padding: 10rem 0px 5rem;
}
.solution2  {
    padding: 7.5rem 0px 7.5rem !important;
}

.phone-no2 {
    padding: 10px 50px 10px 0px;
    color: #777;
    font-weight: 500;
    font-size: 22px;
    border-bottom: 1px dashed #eee;
    background: url('../images/portal-sprite.png') right -180px no-repeat;
}

.phone-no2 span {
    font-size: 13px;
    margin-right: 10px;
}

.customer-anim {
    margin: 0px auto;
    height: 375px;
    width: 475px;
}

.customer-anim .fright-wide-c {
    background: #e7f7ff !important;
}

.customersbody {
    min-height: 435px;
    background-color: #fdfdff;
    padding: 5rem 0;
    overflow: hidden;
    /* margin-top: 5rem; */
}

.customersbody .owl-dots {
    display: none;
}

.simplelink {
    border-bottom: 1px dashed #839bf5;
    color: #6e83e3;
    letter-spacing: -0.05rem;
    padding-bottom: 10px;
}

.black-side {
    background: #3C2F58;
    position: relative;
    overflow: hidden;
    padding: 7.5rem 0 10rem 0 !important;
}

.black-side2 {
    background: #3C2F58;
    position: relative;
    overflow: hidden;
    padding: 7.5rem 0 !important;
}

.black-side video {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    top: 0
}

.black-side-title, .price-table-tabs, .align-center {
    text-align: center;
}

.black-side-title h4 {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 300;
    font-size: 17px;
}

hgroup.black-side-title h3 {
    color: white !important;
    font-weight: 500;
    font-size: 30px;
}

.price-table-tabs {
    padding: 4.5rem 0 2rem;
    font-size: 17px;
    font-weight: 300;
}

.price-table-tabs a {
    padding: 1rem 2rem;
    color: rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    margin: 0px 10px;
    background: rgba(255, 255, 255, 0.1);
}

.price-table-tabs a:hover, .price-table-tabs a.active, .price-table-index a:nth-child(1) {
    color: white !important;
    background: #4FC2DB
}

.price-table-index {
    padding: 4.5rem 2.5rem 2.5rem;
    background: rgba(44, 37, 70, 0.56);
    border-radius: 4px;
    color: white;
    border-top: 2px solid #0db1d2;
    position: relative;
}

.price-table-index-vip:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    background: url('../images/portal-sprite.png') left -225px;
}

.price-table-index-vip .ico {
    border: 1px solid #f0c029 !important;
}

.vip-box {
    padding-top: 5rem
}

.price-table-index span {
    font-size: 14px;
    font-weight: 300;
    display: block;
    line-height: 1;
    color: rgba(255, 255, 255, 0.5);
}

.price-table-index h4 {
    font-size: 22px;
    font-weight: 400;
    color: white;
}

.price-table-index > p {
    font-size: 17px;
    font-weight: 300;
    padding: 2rem 0 3rem;
    line-height: 2;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.price-table-index i.blue {
    width: 48px;
    height: 48px;
    border: 1px solid #6ecefb;
    color: #6ecefb;
    font-size: 20px;
    padding: 14px;
    border-radius: 4px;
    margin-top: 5px;
}

.price-table-index i.yellow {
    width: 48px;
    height: 48px;
    border: 1px solid #FED65A;
    color: #FED65A;
    font-size: 20px;
    padding: 14px;
    border-radius: 4px;
    margin-top: 5px;
}

.price-table-index-vip {
    border-top: 2px solid #FED65A !important;
}

.price-buy {
    color: rgba(255, 255, 255, 0.75);
    padding: 15px 0px 10px;
}

.price-table-index a,
.price-table-index a:hover {
    color: rgba(255, 255, 255, 0.86);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.86);
    padding-bottom: 5px;
}

.price-table-index-vip a, .price-table-index-vip a:hover {
    color: #f6c552;
    border-bottom: 1px dashed #f6c552;
    padding-bottom: 5px;
}

#simple_price,
#shop_price {
    width: 50%;
    float: right;
    padding: 0
}

.priceframe {
    overflow: hidden;
    margin: 5rem 0 0
}

.priceframe-wrap {
    width: 200%;
    transition: all 1s;
}

.name-list, .email-list {
    width: 70%;
    margin: 2.5rem auto;
    position: relative;
}

.name-list::before,
.email-list::before {
    right: 5px;
    top: 16px;
    height: 24px;
    width: 24px;
    content: "";
    position: absolute;
}

.name-list::before {
    background: url('../images/portal-sprite.png') no-repeat -931px -100px;
}

.email-list::before {
    background: url('../images/portal-sprite.png') no-repeat -889px -100px;
}

.name-list input, .email-list input {
    width: 100%;
    border: 0;
    border-bottom: 2px solid #ECECFB;
    padding: 1.8rem 4rem 1.7rem 1rem;
    font-size: 16px;
    font-weight: 300;
    -webkit-transition: all 0.2s; /* Safari 3.1 to 6.0 */
    transition: all 0.2s;
}

.name-list input:focus, .email-list input:focus {
    border-bottom: 2px solid #0badfc;
    color: #222
}

.join-us {
    position: relative;
    background: #1d3e70;
    padding: 7.5rem 0;
}

.join-us-form {
    background: white;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 5rem;
    z-index: 100;
}

.join-us h3 {
    color: #485151;
    font-weight: 500;
    font-size: 25px;
}

.subtitle-span {
    font-size: 20px;
    color: #a9a9a9;
    font-weight: 200;
}

.join-us-form::before {
    background: url('../images/portal-sprite.png') left -100px;
    top: 0;
    left: 0;
    width: 190px;
    position: absolute;
    height: 115px;
    content: "";
    display: block;
}

.login-button {
    border: none;
    border-radius: 99px;
    padding: 1.5rem 5rem;
    -webkit-transition: all 0.2s; /* Safari 3.1 to 6.0 */
    transition: all 0.2s;
    background-color: #39d17c;
    color: white;
    margin: 1rem 0 0;
}

.login-button:hover {
    transform: scale(1.05);
}

/*** Tetris ***/

.tetris-item {
    width: 132px;
    height: 132px;
    position: absolute;
}

.tetris-yellow span {
    display: block;
    width: 40px;
    height: 40px;
    margin: 2px;
    float: right;
    background: rgba(255, 231, 168, 0.67)
}

.tetris-blue span:hover {
    background: rgba(255, 231, 168, 1)
}

.tetris-blue span {
    display: block;
    width: 40px;
    height: 40px;
    margin: 2px;
    float: right;
    background: rgba(240, 245, 251, 0.79) !important;
}

.relativediv {
    position: relative;
}

.overflowdiv {
    overflow-y: hidden;
}

.tetris-item span.hidev {
    visibility: hidden;
    background: transparent !important;
}

.abs1 {
    right: 31.4%;
    top: -100px;
    animation: abs1 5s 1 linear forwards;
}

@keyframes abs1 {
    0% {
        top: -100px;
        opacity: 0;
        transform: rotate(0deg);
    }
    47% {
        top: 92px;
        opacity: 0.5;
        transform: rotate(0deg);
    }
    50% {
        top: 100px;
        opacity: 1;
        transform: rotate(-90deg);
    }
    100% {
        top: 429px;
        opacity: 1;
        transform: rotate(-90deg);
    }
}

.abs10 {
    right: 264px;
    top: -100px;
    animation: abs10 5s 1 linear forwards;
    animation-delay: 5s;
}

@keyframes abs10 {
    0% {
        top: -100px;
        transform: rotate(0deg);
    }
    47% {
        top: 92px;
        transform: rotate(0deg);
    }
    50% {
        top: 100px;
        transform: rotate(90deg);
        opacity: 1
    }
    100% {
        top: 439px;
        opactiy: 1;
        transform: rotate(90deg);
    }
}

.abs20 {
    right: 352px;
    top: -100px;
    animation: abs20 5s 1 linear forwards;
    animation-delay: 7.5s;
    opacity: 0;
}

@keyframes abs20 {
    0% {
        top: -100px;
        transform: rotate(90deg);
    }
    47% {
        top: 92px;
        opacity: 0.5;
        transform: rotate(90deg);
    '
    }
    50% {
        top: 100px;
        opacity: 1;
        transform: rotate(0deg);
    }
    100% {
        top: 483px;
        transform: rotate(0deg);
        opacity: 1;
    }
}

.abs30 {
    right: 0%;
    top: -100px;
    animation: abs30 5s 1 linear forwards;
    animation-delay: 2.5s;
    opacity: 0;
}

@keyframes abs30 {
    0% {
        top: -100px;
    }
    47% {
        top: 92px;
        opacity: 0.5;
    }
    50% {
        top: 100px;
        opacity: 1;
        transform: rotate(0deg);
    }
    100% {
        top: 439px;
        transform: rotate(0deg);
        opacity: 1;
    }
}

.abs40 {
    right: 71px;
    top: -100px;
    animation: abs40 5s 1 linear forwards;
    animation-delay: 10s;
    opacity: 0;
}

@keyframes abs40 {
    0% {
        top: -100px;
    }
    46% {
        top: 92px;
        opacity: 0.5;
    }
    48% {
        top: 100px;
        opacity: 1;
        right: 0%;
        transform: rotate(0deg);
    }
    55% {
        top: 96px;
        opacity: 1;
        right: 0%;
        transform: rotate(0deg);
    }
    62% {
        top: 96px;
        opacity: 1;
        right: 132px;
        transform: rotate(0deg);
    }
    100% {
        top: 439px;
        right: 132px;
        transform: rotate(0deg);
        opacity: 1;
    }
}

.abs50 {
    right: 130px;
    top: -100px;
    animation: abs50 5s 1 linear forwards;
    animation-delay: 12.5s;
    opacity: 0;
}

@keyframes abs50 {
    0% {
        top: -100px;
    }
    47% {
        top: 92px;
        opacity: 0.5;
    }
    50% {
        top: 100px;
        opacity: 1;
        transform: rotate(0deg);
    }
    100% {
        top: 439px;
        transform: rotate(0deg);
        opacity: 1;
    }
}

.abs60 {
    right: 87px;
    top: -100px;
    animation: abs60 5s 1 linear forwards;
    animation-delay: 15s;
    opacity: 0;
}

@keyframes abs60 {
    0% {
        top: -100px;
    }
    46% {
        top: 92px;
        opacity: 0.5;
    }
    47% {
        top: 100px;
        opacity: 1;
        transform: rotate(0deg);
    }
    50% {
        top: 100px;
        opacity: 1;
        right: 87px;
        transform: rotate(180deg);
    }
    100% {
        top: 439px;
        right: 87px;
        transform: rotate(180deg);
        opacity: 1;
    }
}

.abs70 {
    right: 87px;
    top: -100px;
    animation: abs70 5s 1 linear forwards;
    animation-delay: 17.5s;
    opacity: 0;
}

@keyframes abs70 {
    0% {
        top: -100px;
    }
    46% {
        top: 92px;
        opacity: 0.5;
    }
    47% {
        top: 100px;
        opacity: 1;
        right: 87px;
        transform: rotate(0deg);
    }
    50% {
        top: 100px;
        opacity: 1;
        right: 87px;
    }
    100% {
        top: 394px;
        right: 87px;
        opacity: 1;
    }
}

.abs100 {
    position: absolute;
    top: 100px;
    right: 50px;
}

.abs200 {
    position: absolute;
    top: 100px;
    right: 280px;
}

.abs300 {
    position: absolute;
    top: 30px;
    left: 160px;
}

.abs400 {
    position: absolute;
    top: 160px;
    left: 50px;
}

.abs500 {
    position: absolute;
    top: 200px;
    right: 160px;
}

.best-choice {
    animation: bc 1s 1 linear forwards;
    animation-delay: 22.5s;
}

@keyframes bc {
    20% {
        color: #333333
    }
    50% {
        color: #efc04c
    }
    80% {
        color: #333333
    }
}

.autorotate {
    animation: autorotate 8s 100 linear;
    display: block;
    right: -60px;
    top: 15px;
    opacity: 0.5;
    position: absolute;
}

@keyframes autorotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(300deg);
    }
}

.comings {
    text-align: center;
    color: #999;
    background: white;
    padding: 2.75rem 1.5rem;
    border-radius: 50%;
    margin: 0px auto 0;
    width: 120px;
    box-shadow: 0px 3px 14px rgba(0, 0, 0, 0.2);
    height: 120px;
}

.hourglass {
    animation: hourglass 5s 100 linear;
    display: block;
    margin: 0px auto 15px;
    height: 32px;
    width: 32px;
}

@keyframes hourglass {
    25% {
        transform: rotate(0deg);
    }
    30% {
        transform: rotate(180deg);
    }
    80% {
        transform: rotate(180deg);
    }
    85% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.typed-cursor {
    font-size: 24px;
    color: #999;
    margin-right: 2px;
    animation: typedjsBlink 1.2s infinite;
}

@keyframes typedjsBlink {
    50% {
        opacity: 0.0;
    }
}

@-webkit-keyframes typedjsBlink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.0;
    }
    100% {
        opacity: 1;
    }
}

.abs2 {
    right: -150px;
    top: 120px
}

.abs3 {
    right: -10px;
    top: 20px
}

.abs4 {
    left: 10px;
    top: 230px;
    display: none;
    animation: abs4v 5s ease-in-out infinite;
}

@keyframes abs4v {
    0% {
        top: 50px;
        transform: rotate(-15deg);
    }
    65% {
        top: 80px;
        transform: rotate(-5deg);
    }
    100% {
        top: 50px;
        transform: rotate(-15deg);
    }
}

.abs5 {
    left: 10px;
    top: 80px;
    animation: abs5v 10s linear infinite;
}

@keyframes abs5v {
    24% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(90deg);
    }
    49% {
        transform: rotate(90deg);
    }
    50% {
        transform: rotate(180deg);
    }
    74% {
        transform: rotate(180deg);
    }
    75% {
        transform: rotate(270deg);
    }
    99% {
        transform: rotate(270deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.float-img2 {
    position: absolute;
}

.middle-title {
    margin-top: 8rem
}

.simple-article3 {
    padding: 6.5rem 0 8rem;
}

.first-article {
    padding-bottom: 2.5rem !important;
    padding-top: 9rem;
}

.owl-carousel, .owl-carousel .owl-item {
    -webkit-tap-highlight-color: transparent;
    position: relative
}

.owl-carousel {
    display: none;
    width: 100%;
    z-index: 1
}

.testi-wrap {
    padding: 0px 20px;
    direction: ltr;
}

.test-bg .abs3 {
    animation: abs5v 10s linear infinite
}

.testi-wrap .item {
    direction: rtl !important;
}

.owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
    -moz-backface-visibility: hidden
}

.owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}

.owl-carousel .owl-stage-outer {
    position: relative;
    box-shadow: 0px 10px 50p;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
}

.owl-carousel .owl-item, .owl-carousel .owl-wrapper {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0)
}

.owl-carousel .owl-item {
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-touch-callout: none
}

.owl-carousel .owl-item img {
    display: block;
    width: 100%
}

.owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled {
    display: none ;
    z-index: 9999;
}

.no-js .owl-carousel, .owl-carousel.owl-loaded {
    display: block
}

.owl-carousel .owl-dot, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev {
    cursor: pointer;
    cursor: hand;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.owl-carousel.owl-loading {
    opacity: 0;
    display: block
}

.owl-carousel.owl-hidden {
    opacity: 0
}

.owl-carousel.owl-refresh .owl-item {
    visibility: hidden
}

.owl-carousel.owl-drag .owl-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.owl-carousel.owl-grab {
    cursor: grab;
    cursor: move
}

.owl-carousel.owl-rtl {
    direction: rtl
}

.owl-carousel.owl-rtl .owl-item {
    float: right;
    /* background: white; */
}

.owl-carousel .animated {
    animation-duration: 1s;
    animation-fill-mode: both
}

.owl-carousel .owl-animated-in {
    z-index: 0
}

.owl-carousel .owl-animated-out {
    z-index: 1
}

.owl-carousel .fadeOut {
    animation-name: fadeOut
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

.owl-height {
    transition: height .5s ease-in-out
}

.owl-carousel .owl-item .owl-lazy {
    opacity: 0;
    transition: opacity .4s ease
}

.owl-carousel .owl-item img.owl-lazy {
    transform-style: preserve-3d
}

.owl-carousel .owl-video-wrapper {
    position: relative;
    height: 100%;
    background: #000
}

.owl-carousel .owl-video-play-icon {
    position: absolute;
    height: 80px;
    width: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    background: url(owl.video.play.png) no-repeat;
    cursor: pointer;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    transition: transform .1s ease
}

.owl-carousel .owl-video-play-icon:hover {
    -ms-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3)
}

.owl-carousel .owl-video-playing .owl-video-play-icon, .owl-carousel .owl-video-playing .owl-video-tn {
    display: none
}

.owl-carousel .owl-video-tn {
    opacity: 0;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: opacity .4s ease
}

.owl-carousel .owl-video-frame {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%
}

/********** Footer **********/
.er-footer-contact {
    padding: 20px 0;
}

.er-footer-contact-text {
    font-size: 20px;
}

.er-footer-contact-text span {
    display: block;
    font-size: 14px;
    color: #999;
}

.er-footer-contact-info {
    text-align: left;
}

.awe-navbar-body ul {

}

.er-footer-contact-info i.fa {
    float: left;
    width: 58px;
    height: 58px;
    text-align: center;
    line-height: 58px;
    background: #4fc2db;
    color: #fff;
    font-size: 20px;
    border-radius: 50%;
    margin-right: 15px;
    margin-top: 5px;
    vertical-align: middle;
}

.er-footer-contact-info-text {
    font-size: 20px;
}

.er-footer-contact-info-text span {
    display: block;
    font-size: 14px;
    color: #999;
}

footer .awe-navbar-body ul {
    width: 300px;
    border-radius: 4px;
    padding: 10px 0px;
    background: #262733
}

footer .awe-navbar-body ul li a {
    display: block;
    padding: 15px;
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
}

footer .awe-navbar-body ul li a:hover {
    color: white;
    background: #1e1e29;
}

footer .awe-navbar-body li ul li {
    margin: 0;
    padding: 0px;
}

.er-footer-buttons {
    text-align: left;
}

.er-footer-buttons-start {
    /* padding: 0 20px; */
    vertical-align: middle;
}

.er-footer-menu {
    padding: 50px 0 15px;
    background: #3b3b49;
}

.er-footer-menu ul.awe-navbar-body > li > a {
    color: #999;
}

.er-footer-menu ul.awe-navbar-body > li > a:hover, .er-footer-menu ul.awe-navbar-body > li.active > a:hover, .er-footer-menu ul.awe-navbar-body > li[data-subset]:hover > a {
    color: #fff;
}

.er-footer-bottom {
    padding: 60px 0 20px;
    background: #343543;
    position: relative;
    line-height: 2;
}

.er-footer-bottom-title {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    padding-bottom: 10px;
}

.er-footer-bottom-links {
    margin-bottom: 30px;
}

.er-footer-bottom-links ul {
    margin: 0;
    padding: 0;
    font-size: 0;
}

.er-footer-bottom-links ul li {
    padding: 3px 0;
    display: inline-block;
    width: 50%;
}

.er-footer-bottom-links ul li a {
    color: #999;
    font-size: 15px;
}

.er-footer-bottom-links ul li a:hover {
    color: #fff;
}

.er-footer-bottom-links ul li a span {
    display: inline-block;
    margin-right: 5px;
    font-size: 11px;
    background: #00b2b2;
    color: #fff;
    border-radius: 15px;
    padding: 0 10px;
}

.er-footer-bottom-list {
    margin-bottom: 30px;
    color: #999
}

.er-footer-bottom-list ul {
    margin: 0;
    padding: 0;
}

.er-footer-bottom-list ul li {
    padding: 3px 0;
}

.er-footer-bottom-list ul li a {
    color: #999;
    font-weight: 300;
    font-size: 16px;
}

.er-footer-bottom-list ul li a:hover {
    color: #fff;
}

.er-footer-bottom-contact {
    color: #999;
    margin-bottom: 20px;
}

.er-footer-bottom-contact > div {
    margin-bottom: 5px;
}

.er-footer-bottom-contact > div span {
    color: #ddd;
    display: inline-block;
    margin-left: 10px;
}

.er-footer-bottom-fields {
    color: #999;
    margin-bottom: 30px;
}

.er-footer-fields-btn {
    display: block;
    border-radius: 4px;
    padding: 5px 15px;
    font-size: 14px;
    background: #414150;
    color: #ddd;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}

.er-footer-fields-btn:hover, .er-footer-fields-btn:hover i {
    background: #515160;
    color: #fff;
}

.er-footer-fields-btn i {
    vertical-align: middle;
}

.er-footer-fields-btn i.fa-th {
    font-size: 10px;
    margin-left: 10px;
    vertical-align: -2px;
    color: #ddd;
}

.er-footer-fields-btn i.fa-angle-left {
    float: left;
    margin-top: 5px;
    color: #ddd;
    font-size: 18px;
}

.er-footer-copyright {
    padding: 30px 0;
    background: #31323e;
    color: #777;
}

.er-footer-social {
    text-align: left;
}

.er-footer-social a {
    color: #999;
    display: inline-block;
    margin-left: 2px;
    width: 30px;
    height: 30px;
    line-height: 30px;
}

.er-footer-social a:hover, .er-footer-social a:hover i {
    color: #fff;
}

.er-footer-social a.telegram {
    font-size: 13px;
}

.er-footer-fields {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 30px 0;
    background: #343543;
    display: none;
}

.er-footer-fields-items {
    margin-top: 30px;
}

.er-footer-fields-item {
    margin-bottom: 10px;
}

.er-footer-fields-item a {
    color: #999;
}

.er-footer-fields-item a:hover, .er-footer-fields-item a:hover i {
    color: #fff;
}

.er-footer-fields-item a i {
    margin-left: 8px;
    font-size: 8px;
}

.er-footer-fields-close {
    display: inline-block;
    margin-right: 20px;
    border-radius: 4px;
    padding: 5px 15px;
    font-size: 14px;
    background: #414150;
    color: #ddd;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.er-footer-fields-close i {
    color: #ddd;
    vertical-align: -2px;
    margin-left: 5px;
}

.er-footer-fields-close:hover, .er-footer-fields-close:hover i {
    background: #515160;
    color: #fff;
}

/** Animation **/
.animtop {
    text-align: center;
    z-index: 10;
    display: block;
}

.animation-top {
    min-height: 480px !important;
    width: 583px !important;

}

.animtop::before {
    background: url('../images/tetris-bg.png') bottom center white repeat-x;
    content: "";
    position: absolute;
    min-height: 405px;
    box-shadow: 0px 10px 40px rgba(47, 92, 135, 0.1);
    right: 0;
    top: 0px;
    display: block;
    width: 100%;
    border-radius: 4px;
}

.animtop .blue-radius {
    height: 200px;
    width: 200px;
    background: linear-gradient(to bottom, #82DCE6 25%, #5db0e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#82DCE6', endColorstr='#5db0e8', GradientType=0);
    position: absolute;
    top: -50px;
    border-radius: 50px;
    left: -2.5%;
    -webkit-transform: rotate(-43deg); /* Chrome, Safari, Opera */
    transform: rotate(-43deg);
    z-index: -1
}

.animtop .yellow-radius {
    background: #e1e6f9;
    position: absolute;
    top: 0;
    border-radius: 10;
    height: 84%;
    width: 100%;
    left: 0;
    z-index: -1;
    transform: rotate(3deg);
}

.animtop-chapter {
    z-index: 10;
    position: absolute;
    width: 100%;
    right: 0;
    padding: 6.5rem 4rem 0rem;
    top: 0;
}

.chapter1 img {
    background: white;
    border: 1px solid #eee;
    border-radius: 4px;
    width: 100%;
    height: auto;
}

.cursor-move {
    position: absolute;
    z-index: 1000000;
    animation: cm 20s ease-out 999;
}

@keyframes cm {
    0% {
        top: 150px;
        left: 49%;
    }
    4% {
        top: 150px;
        left: 49%;
    }
    6% {
        top: 150px;
        left: 100px;
    }
    8% {
        top: 150px;
        left: 100px;
    }
    12% {
        top: 170px;
        left: 350px;
    }
    14% {
        top: 170px;
        left: 350px;
    }
    16% {
        top: 170px;
        left: 280px;
    }
    17% {
        top: 170px;
        left: 280px;
    }

    19% {
        top: 260px;
        left: 300px;
    }

    20% {
        top: 260px;
        left: 300px;
    }

    21.5% {
        top: 305px;
        left: 370px;
    }
    22.5% {
        top: 300px;
        left: 380px;
    }
    24% {
        top: 300px;
        left: 300px;
    }
    26% {
        top: 300px;
        left: 300px;
    }
    28% {
        top: 300px;
        left: 220px;
    }
    30% {
        top: 300px;
        left: 220px;
    }
    39% {
        top: 300px;
        left: 220px;
    }
    42% {
        top: 110px;
        left: 280px;
    }
    68% {
        top: 110px;
        left: 280px;
    }

    80% {
        top: 110px;
        left: 280px;
    }
    82% {
        top: 210px;
        left: 280px;
    }
    100% {
        top: 210px;
        left: 280px;
    }
}

.chapter1 {
    animation: chapter1 20s ease-out 999;
}

@keyframes chapter1 {
    0% {
        opacity: 0;
    }
    1% {
        opacity: 1;
    }
    40% {
        opacity: 1;
    }
    41% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.chapter2 {
    animation: chapter2 20s ease-out 9999;
}

@keyframes chapter2 {
    0% {
        opacity: 0;
    }
    12% {
        opacity: 0;
        padding: 8rem 4rem 0rem
    }
    13% {
        opacity: 1;
        padding: 4.25rem 4rem 0rem
    }
    38% {
        opacity: 1;
        padding: 4.25rem 4rem 0rem
    }
    39% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        padding: 4.25rem 4rem 0rem
    }
}

.default-img {
    position: absolute;
    animation: di 20s ease-out 9999;
}

@keyframes di {
    0% {
        opacity: 0;
    }
    13% {
        opacity: 0;
    }
    14% {
        opacity: 1;
    }
    19% {
        opacity: 1;
    }
    20% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.selected-img {
    position: absolute;
    animation: si 20s ease-out 9999;
}

@keyframes si {
    0% {
        opacity: 0;
    }
    13% {
        opacity: 0;
    }
    20% {
        opacity: 0;
        transform: scale(0.8)
    }
    22% {
        opacity: 1;
        transform: scale(1.25)
    }
    39% {
        opacity: 1;
        transform: scale(1)
    }
    40% {
        opacity: 1;
        transform: scale(1)
    }
    100% {
        opacity: 0;
    }
}

.default-text {
    position: absolute;
    animation: dt 20s ease-out 9999;
}

@keyframes dt {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 0;
    }
    16% {
        opacity: 1;
    }
    22% {
        opacity: 1;
    }
    23% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.selected-text {
    position: absolute;
    animation: st 20s ease-out 999;
}

@keyframes st {
    0% {
        opacity: 0;
    }
    13% {
        opacity: 0;
    }
    22% {
        opacity: 0;
        transform: scale(0.8)
    }
    23% {
        opacity: 1;
        transform: scale(1.25)
    }
    39% {
        opacity: 1;
        transform: scale(1)
    }
    40% {
        opacity: 1;
        transform: scale(1)
    }
    100% {
        opacity: 0;
    }
}

.like-input {
    border: 1px solid #e1e1e1;
    box-shadow: 0px 2px 6px #eee;
    background: #f7f8f9;
    border-radius: 4px;
    padding: 5px 10px;
}

.selectedanim {
    animation: chapter1-1 20s ease-out 999;
}

@keyframes chapter1-1 {
    0% {
        transform: scale(1)
    }
    4% {
        transform: scale(1)
    }
    5% {
        transform: scale(1.15)
    }
    15% {
        transform: scale(1.15)
    }

}

.chapter1 img {
    width: 140px;
    height: 140px;
}

.chapter1 .zoomout {
    animation: chapa1 20s ease-out 999;
}

@keyframes chapa1 {
    0% {
        transform: scale(0)
    }
    1% {
        transform: scale(1.3)
    }
    2% {
        transform: scale(0.8)
    }
    3% {
        transform: scale(1.1)
    }
    4% {
        transform: scale(1);

    }
    5% {
        transform: scale(1);
        opacity: 1
    }
    7% {
        transform: scale(1);
        opacity: 0.6;
    }
    9% {
        transform: scale(0);
    }
    19% {

        display: block;
        opacity: 0.6;
    }
    20% {
        display: none;
        opacity: 0;
        transform: scale(0);
    }
    100% {
        transform: scale(0)
    }
}

.chapter1 .zoomout2 {
    animation: zoomout2 20s ease-out 9999;
    position: relative;
}

@keyframes zoomout2 {
    0% {
        transform: scale(0)
    }
    1% {
        transform: scale(1.3)
    }
    2% {
        transform: scale(0.8)
    }
    3% {
        transform: scale(1.1)
    }
    4% {
        transform: scale(1)
    }
    5% {
        transform: scale(1)
    }
    6% {
        transform: scale(1.1)
    }
    7% {
        transform: scale(1.1)
    }
    9% {
        transform: scale(1.8) translate(95px, 0)
    }
    11% {
        transform: scale(1.8) translate(95px, 20px)
    }
    12% {
        transform: scale(1.8) translate(95px, 20px)
    }
    39% {
        transform: scale(1.8) translate(95px, 20px)
    }
    100% {
        transform: scale(1.8) translate(95px, 20px)
    }
}

.first-title {
    animation: first-title 20s ease-out 9999;
}

@keyframes first-title {
    0% {
        opacity: 0;
    }
    1% {
        opacity: 1;
    }
    9% {
        opacity: 1;
    }
    10% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.chapter3 {
    padding-top: 7.5rem !important;
    animation: chapter3 20s ease-out 999;
}

.banner-gif {
    position: relative;
    width: 310px;
    height: 280px;
    top: -284px;
    right: 16.2%
}

@keyframes chapter3 {
    0% {
        opacity: 0;
    }
    42% {
        opacity: 0;
        padding: 5rem 4rem 0rem
    }
    43% {
        opacity: 1;
        padding: 5rem 4rem 0rem
    }
    68% {
        padding: 5rem 4rem 0rem
    }
    69% {
        padding: 10rem 4rem 0rem
    }
    70% {
        opacity: 1;
    }
    71% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        padding: 5rem 4rem 0rem
    }
}

.theme3-1 img,
.theme3-2 img,
.theme3-3 img,
.theme3-4 img,
.theme3-5 img,
.theme3-6 img {
    width: 100%;
    height: auto;
    transform: scale(1)
}

.theme3-1 {
    position: absolute;
    top: 104px;
    right: 70px;
    width: 64px;
    height: 55px;
    background: #eee;
    animation: theme3-1 20s ease-out 9999;
}

@keyframes theme3-1 {
    0% {
        opacity: 0;
    }
    13.5% {
        opacity: 0;
        transform: scale(0)
    }
    15.5% {
        opacity: 1;
        transform: scale(1.1)
    }
    16.5% {
        opacity: 1;
        transform: scale(1)
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
}

.theme3-2 {
    position: absolute;
    top: 103px;
    right: 143px;
    width: 135px;
    height: 45px;
    background: #F3F5F7;
    animation: theme3-2 20s ease-out 9999;
    padding: 5px;
    font-size: 10px;
    text-align: right;
    color: #777
}

.theme3-2 .h6,
.theme3-3 .h6 {
    font-size: 11px;
    margin: 0px 0px 4px
}

@keyframes theme3-2 {
    0% {
        opacity: 0;
    }
    15.5% {
        opacity: 0;
        transform: scale(0)
    }
    17.5% {
        opacity: 1;
        transform: scale(1.05)
    }
    18.5% {
        opacity: 1;
        transform: scale(1)
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
}

.theme3-3 {
    position: absolute;
    top: 190px;
    right: 70px;
    width: 195px;
    height: 35px;
    background: white;
    animation: theme3-3 20s ease-out 9999;
    font-size: 10px;
    text-align: center;
}

@keyframes theme3-3 {
    0% {
        opacity: 0;
    }
    17.5% {
        opacity: 0;
        transform: scale(0)
    }
    19.5% {
        opacity: 1;
        transform: scale(1.1)
    }
    20% {
        opacity: 1;
        transform: scale(1)
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
}

.theme3-4 {
    position: absolute;
    top: 231px;
    right: 74px;
    width: 44px;
    height: 32px;
    background: #fff;
    animation: theme3-4 20s ease-out 999;
}

@keyframes theme3-4 {
    0% {
        opacity: 0;
    }
    21% {
        opacity: 0;
        transform: scale(0)
    }
    22.5% {
        opacity: 1;
        transform: scale(1.1)
    }
    23.5% {
        opacity: 1;
        transform: scale(1)
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
}

.theme3-5 {
    position: absolute;
    top: 231px;
    right: 145px;
    width: 44px;
    height: 32px;
    background: #fff;
    text-align: center;
    color: white;
    padding: 5px;
    font-size: 12px;
    animation: theme3-5 20s ease-out 999;
}

@keyframes theme3-5 {
    0% {
        opacity: 0;
    }
    24.5% {
        opacity: 0;
        transform: scale(0)
    }
    25.5% {
        opacity: 1;
        transform: scale(1.1)
    }
    26.5% {
        opacity: 1;
        transform: scale(1)
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
}

.theme3-6 {
    position: absolute;
    top: 231px;
    right: 214px;
    width: 44px;
    height: 32px;
    background: #fff;
    text-align: center;
    color: white;
    padding: 5px;
    font-size: 12px;
    animation: theme3-6 20s ease-out 9999;
}

@keyframes theme3-6 {
    0% {
        opacity: 0;
    }
    27.6% {
        opacity: 0;
        transform: scale(0)
    }
    28.5% {
        opacity: 1;
        transform: scale(1.2)
    }
    29.5% {
        opacity: 1;
        transform: scale(1)
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
}

.chapter4 .text-center {
    border: 1px solid #e1e1e1;
    /* margin: 5px; */
    border-radius: 4px;
    padding-bottom: 10px;
    background: #fff;
    box-shadow: 0px 2px 8px #eee;

}

.chapter4 {
    padding-top: 4.5rem !important;
    animation: chapter4 20s ease-out 999;
}

@keyframes chapter4 {
    0% {
        opacity: 0;
    }
    71% {
        opacity: 0;
    }
    72% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

.rocket {
    background: url("../images/portal-sprite.png") left -525px;
    width: 144px;
    height: 142px;
    margin: 0px auto;
    animation: rocket 20s ease-out 9999;

}

@keyframes rocket {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    41% {
        opacity: 1;
    }
    63% {
        transform: translate(0px, 10px) rotate(0deg);
    }
    66% {
        transform: translate(0px, -500px) rotate(12deg);
        opacity: 1;
    }
    70% {
        opacity: 0
    }
    100% {
        opacity: 0;
    }
}

.chapter3title {
    animation: c3t 20s ease-out 9999;

}

@keyframes c3t {
    67% {
        opacity: 1;
        transform: translate(0px, 0px);
    }
    69% {
        opacity: 0;
        transform: translate(-100px, 0px);
    }
    100% {
        opacity: 0;
    }
}

.domainname {
    animation: domainame 20s ease-out 9999;
    background: #f9f9f9;
    padding: 8px 10px;
    border: 1px solid #e1e1e1;
    box-shadow: 0px 2px 4px #f1f1f1;
    border-radius: 4px;
    margin: 10px 20%;
}

@keyframes domainame {
    0% {
    }
    40% {
        transform: translate(100px, 0px);
        opacity: 1;
    }
    42% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
    68% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
    70% {
        transform: translate(0px, 0px);
        opacity: 0;
    }
    100% {
        opacity: 0;
        transform: translate(-100px, 0px);
    }
}

.chart-link {
    position: relative;
    background: url("../images/portal-sprite.png") left -915px;
    width: 290px;
    height: 160px;
    margin: 25px auto 0
}

.chart-link:before {
    width: 99.58%;
    content: "";
    right: 0;
    top: 0;
    height: 95%;
    background: white;
    position: absolute;
    animation: chart-link 20s ease-out 999
}

@keyframes chart-link {
    0% {
        width: 99.58%;
    }
    74% {
        width: 99.58%;
    }
    79% {
        width: 0%
    }
    100% {
        width: 0%
    }
}

.fire {
    background: url("../images/portal-sprite.png") left -700px;
    width: 139px;
    height: 54px;
    position: absolute;
    z-index: -10;
    animation: fireanimate 0.3s ease-in-out infinite;
}

@keyframes fireanimate {
    0% {
        transform: scale(1) translate(10px, 110px);
    }
    25% {
        transform: scale(0.95) translate(10px, 110px);
    }
    50% {
        transform: scale(1.05) translate(10px, 110px);
    }
    100% {
        transform: scale(1) translate(10px, 110px);
    }
}

.abs5 {
    left: 10px;
    top: 80px;
}

.colorgrey {
    color: #7e7e88 !important;
}

.green-lined {
    border: 1px solid #2cd379;
    color: #2cd379;
    padding: 5px 15px;
    border-radius: 50px;
}

.grey-lined {
    border-bottom: 1px dashed #e1e1e1;
    padding: 5px 15px;
    color: #666
}

.solution {
    overflow: hidden;
}

@media only screen and (min-width: 980px) {

    .mobile_version, .getback, .call_mobile {
        display: none !important
    }
    .fixed_c {
        position: fixed;
        top:0;
    }
    .ul-box {
        /* border-radius: 0px 0px 4px 4px; */
        /* box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1); */
        /* background: url('../images/tetris-bg.png') repeat-x bottom white; */
        line-height: 2;
        padding-bottom: 20px;
        position: relative;
        font-size: 15px;
    }

    .ul-box a {
        display: block;
    }

    .ul-box-links {
        padding: 15px !important;
    }

    .ul-box-links li {
        padding: 10px 45px 0px 10px !important;
    }

    .ul-box:before {
        content: "";
        width: 12px;
        display: block;
        top: -12px;
        right: 12px;
        height: 12px;
        position: absolute;
        /* background: url('../images/portal-sprite.png') no-repeat right -350px; */
    }
}

.ul-box-links li:nth-child(2) {
    background: url('../images/portal-sprite.png') right -890px no-repeat;
}

.ul-box-links li:nth-child(3) {
    background: url('../images/portal-sprite.png') right -930px no-repeat;
}

.ul-box-links li:nth-child(4) {
    background: url('../images/portal-sprite.png') right -970px no-repeat;
}

.ul-box-links li:nth-child(5) {
    background: url('../images/portal-sprite.png') right -1010px no-repeat;
}

.ul-box-links li:nth-child(6) {
    background: url('../images/portal-sprite.png') right -1050px no-repeat;
}

.show-video {
    position: fixed; /* right: auto; */
    left: 50%;
    padding: 1;
    top: 50%;
    overflow: hidden;
    width: 640px;
    height: auto;
    z-index: 9999;
    transform: translate(-50%, -50%) scale(1); /* background:white; */
    display: none;
}
#commentform {
    position: fixed; /* right: auto; */
    left: 50%;
    padding: 20px;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
    border-radius: 4px;
    top: 50%;
    overflow: hidden;
    width: 640px;
    height: auto;
    background:white;
    z-index: 99999;
    transform: translate(-50%, -50%) scale(1); /* background:white; */
    display: none;
}

.show-video iframe {
    border: 0
}

#mask2 {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    display: none;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9990;
}

.how-many-user {
    /* animation: tetrisbg 400s infinite linear; */
    line-height: 2.2;
    text-align: center;
    color: #5c5c5c;
    padding: 6.5rem 0;
    background: url(../images/tetris-bg.png) bottom repeat-x #eff0f2e8;
    font-size: 21px;
    font-weight: 300;
}

.how-many-user strong {
    color: #FFC107;
    font-size: 27px;
    background: white;
    /* border-bottom: 1px dashed #FFC107; */
    padding: 5px 15px;
    font-weight: 400;
    border-radius: 100px;
    margin: 0px 10px;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
}
/*** package new **/
.tabs_simple_price a {
    display: block;
    width: 50%;
    float: right;
    padding: 20px;
    text-align: center;
    color: rgba(255,255,255,0.8)
}
.tabs_simple_price a:hover {
    background: rgba(0,0,0,0.1);
    color: rgba(255,255,255,0.8)
}
.tabs_simple_price .activet{
    background: white;
    color: #10213F;
}
.price_Box ul.feat_list {
    font-size: 14px !important;
}
.price_Box .colorgrey span ,.price_Box .colorgrey {
    padding: 20px 20px 10px 0px;font-size: 14px;
}
.price_box {
    overflow: hidden;
}
.feat_lists {
    margin-top: 30px;
    padding: 30px 15px 0px;
    border-top:1px solid #DAE9FA;
}
.price_box_blue {
    border: 2px solid #DAE9FA;
    border-radius: 4px;
    position: relative;
    padding-bottom: 40px;
}
.price_box_yellow {
    border: 2px solid #F7ECD2;
    border-radius: 4px;
    position: relative;
    padding-bottom: 40px;
}
.price_box_blue:before {
    background: url('../dist/static_sprite.png') no-repeat top left;
    width: 660px;
    height: 72px;
    content:"";
    display: block;
    position: absolute;
    z-index:0;
    bottom: 0px;
    left: 0;
}
.price_box_yellow:before {
    background: url('../dist/static_sprite.png') no-repeat left -110px;
    width: 660px;
    height: 72px;
    content:"";
    display: block;
    position: absolute;
    z-index:0;
    bottom: 0px;
    left: 0;
}
/*** Package ***/
.package_header {
    background: url('../dist/bg-top.png') #122A54;
    background-size: cover;
    padding: 8rem 0 0rem !important;
}

.package_tabs {
    text-align: center;
    display: block;
    padding: 4rem 0 3.5rem
}

.package_tabs {
    text-align: center;
    display: block;
    padding: 4rem 0 3.5rem
}

.package_tabs a {
    padding: 1.25rem 3rem;
    background-color: #0C1C36;
    color: #DBDBEA;
}

.package_our_notice {
    color: rgba(255, 255, 255, 0.88);
    /* padding: 2rem 0 8rem; */
}

.package_tabs a:first-child {
    border-radius: 0px 4px 4px 0px;
}

.package_tabs a:last-child {
    border-radius: 4px 0px 0px 4px;
}

.package_tabs a:hover {
    background-color: #FFD262;
    color: #222;
}

.package_table_item {
    background: white;
    position: relative;
    min-height: 710px;
    text-align: center;
}

.package_list_p {
    min-height: 258px;
}

.package_table_item .package_tetris span {
    animation: abs5v 10s linear infinite;
}

.package_table_item1 {
    transform: translateX(-22px);
}

.package_table_item2 {
    transform: translateX(-11px);
}

.package_table_item .colorgrey {
    color: #494949 !important;
    font-weight: 300;
	font-size:15px;
}
.registerfreetest {
	color:#333333;
	font-size:14px;
	font-weight:300;
	display:block;
	position:relative;
	text-align:center;
	padding:5px 0 15px;
	z-index:999;
}
.registerfootertest {
	padding:15px 0;
}
.package_table_item p {
    /* padding-right:2rem; */
    /* padding-left: 2rem; */
    line-height: 2 !important;
    color: #666;
	font-weight:500;
}

.package_table_item .buy_now {
    color: white;
    box-shadow: 0px 2px 5px #eee;
    padding: 1rem 2.5rem;
    border-radius: 4px;
    z-index: 10;
    /* display: block; */
    font-size: 15px;
    position: relative;
    background: linear-gradient(to bottom, #03A9F4 0%, #5A93F6 100%);
}

.package_table_item header {
    padding: 2rem 0px;
    background: #f8f9f8;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid #e1e1e1;
}

.package_table_item_vip header {
    background: #fffbf1;
}

.package_table_item::after {
    background: url('../dist/static_sprite.png') no-repeat left top;
    position: absolute;
    bottom: 0px;
    right: 0;
    width: 100%;
    height: 75px;
    content: "";
    display: block;
    z-index: 0;
}

.package_table_item h4 {
    font-size: 19px;
    font-weight: bold;
    color: #3d3e41;
	margin:15px 0 15px;
	display:inline-block;
}

.package_table_item_vip {
    transform: translateY(-20px);
    height: 750px;
}

.package_table_item_vip header {
    padding: 2.5rem 0 2.5rem;
    /* margin-bottom: 2.5rem; */
    border-top: 10px solid #ffde87;
}

.package_table_item_vip::after {
    background: url('../dist/static_sprite.png') no-repeat left -109px;
}

.package_table_item_vip .buy_now {
    background: linear-gradient(to bottom, #FFD262 0%, #f1be38 100%);
    color: #222;
}

.portal_plus_desc {
    padding: 2rem 0 6rem;
	color:#ffffff;
}

.portal_plus_desc:before {
    display: inline-block;
    width: 23px;
    height: 23px;
    content: "";
    margin-left: 10px;
    transform: translateY(7px);
    background: url('../dist/static_sprite.png') no-repeat right top;
}

.package_tetris {
    width: 66px;
    height: 44px;
    /* transform: translateX(-22px); */
    margin: 20px auto 35px;
}

.package_tetris span {
    width: 20px;
    margin: 1px;
    height: 20px;
    display: block;
    float: right;
}

.package_tetris span {
    background: none;
}

.package_tetris span.blue-sq {
    background: #1EA2E8 !important;
}

.package_tetris span.yellow-sq {
    background: #FFC733
}

.package_table_price {
    color: #999
}
.package_table_price strike {
    font-size: 26px;
    margin-left: 5px;
    font-weight: 400;
}
.package_table_price span {
    color: #222;
    font-size: 30px;
}

.package_contact_us {
    padding: 3rem 0px 5rem;
    color:#64686d;
}

.package_contact_us_phone {
    margin-right: 2.5rem;
    padding-top: 5px;
    display: inline-block;
	color:#ffffff;
}

.package_contact_us .dashedbtn {
    border: 1px solid #ffffff;
    color: #2f2f2f;
    background: #ffcb40;
    padding: 1rem 2.25rem;
    border-radius: 4px;
}

.package_contact_us .dashedbtn:hover {
    border: 1px solid #ffffff;
    color: #2f2f2f;
    background: #ffd156;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.22);
}

.package_contact_us_phone strong {
    margin:0 1rem;
}
.package_contact_us_phone:before {
    content: "";
    width: 51px;
    height: 51px;
    background: url('../dist/static_sprite.png') no-repeat right -50px;
    display: inline-block;
    margin-left: 10px;
    transform: translateY(24px);
}

.package_ico {
    width: 64px;
    height: 64px;
    display: block;
    margin: 3rem auto 2rem;
}

.package_ico1 {
    background: url('../dist/static_sprite.png') no-repeat -936px -115px;
}

.package_ico2 {
    background: url('../dist/static_sprite.png') no-repeat -872px -115px;
}

.package_ico3 {
    background: url('../dist/static_sprite.png') no-repeat -808px -115px;
}

.package_ico4 {
    background: url('../dist/static_sprite.png') no-repeat -936px -179px;
}

.package_ico5 {
    background: url('../dist/static_sprite.png') no-repeat -872px -179px;
}

.package_ico6 {
    background: url('../dist/static_sprite.png') no-repeat -808px -179px;
}

.package_ico7 {
    background: url('../dist/static_sprite.png') no-repeat -936px -243px;
}

.package_ico8 {
    background: url('../dist/static_sprite.png') no-repeat -872px -243px;
}

.package_article p {
    color: #777;
    font-size: 16px;
    line-height: 2;
    margin-top: 5px
}

.package_article img {
    border-radius: 4px;
    margin-top: 11px;
    margin: 17px auto 0px;
    border: 3px solid #ffffff80;
    box-shadow: 0px 2px 5px #ccc;
}

.package_article h4 a {
    color: #444 !important;
    font-weight: 500;
    font-size: 18px;
}

.package_article a {
    color: #05A0FE !important;
    /* border-bottom: 1px dashed #ccc; */
}

/*** Packages Table ***/
.er-packages-details-table tr.title {
    padding: 50px 0px;
    line-height: 4;
    font-weight: bold;
}

.reg .er-btn i {
    font-size: 10px;
    color: white;
    padding-right: 4px;
}

.er-packages-details {
    padding: 0 0 100px;
}

.er-table-responsive { /* margin:0px 100px */
    overflow: hidden; /* width: 90%; */
}

.er-packages-details-table {
    width: 95%;
	margin:0 auto;
}

.er-packages-details-table td:first-child {
    width: 30%;
}

.er-packages-details-table td:nth-child(n+2):nth-child(-n+5) {
    text-align: center;
}

.er-packages-details-table td:nth-child(4), .er-packages-details-table th:nth-child(4) {
    background: #fafafa11;
}

.er-packages-details-table td.popular {
    background: #ffcb49; /* border-top: 2px solid #ffcb49; */
    padding: 0;
}

.er-packages-details-table h3.title {
    padding: 15px 20px 15px;
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 2;
    color: #555;
    text-align: center;
}

.er-packages-details-table h3.title span {
    display: block;
    font-size: 14px;
    color: #999;
    font-weight: 400;
}

.er-packages-details-table tr.title td {
    padding: 20px;
    font-size: 19px !important;
    font-weight: 500 !important;
    border-top: 1px solid #eee;
    background: #fff;
}

.er-packages-details-table tr.title td i {
    font-size: 34px;
    color: #aaa;
    vertical-align: middle;
    margin-left: 10px;
}

.er-packages-details-table tr td {
    padding: 10px;
    font-size: 15px;
    font-weight: 300;
    color: #494949;
}

.er-packages-details-table tr td:first-child {
    color: #525252;
	line-height:30px;
    font-weight: 300;
}

.er-packages-details-table thead tr:first-child td, .er-packages-details-table tfoot tr:last-child td {
    padding: 5px;
}

.er-packages-details-table tr.bg-diffrent td { /* background: #f9f9f9; */
}

.er-packages-details-table thead tr:first-child:hover td, .er-packages-details-table tfoot tr:last-child:hover td {
    background: none;
}

.er-packages-details-table thead tr:first-child:hover td:nth-child(3) {
    background: #fbfbfb;
}

.er-packages-details-table tr:hover:not(.title) td {
    background: #f3f9ff;
}

.er-packages-details-table tfoot tr:last-child td {
    background: #fff !important;
}

.er-packages-details-table tfoot tr td.popular {
    background: #fbfbfb !important;
    border-bottom: 2px solid #ffd262;
    padding: 0;
    border-top: none;
}

.er-packages-details-table tr {
    border-bottom: 1px solid #dbdbdb;
}

.er-packages-details-table .bg-diffrent {
    background: #fafafa;
}

.package-help {
    display: block;
    position: relative;
    z-index: 0;
    float: left;
}

.package-help-icon i.fa {
    cursor: pointer;
    background: #fff;
    border: 1px solid #aaa;
    height: 19px;
    width: 19px;
    line-height: 17px;
    text-align: center;
    color: #bbb;
    border-radius: 50%;
    font-size: 16px;
    vertical-align: middle;
    transform: scaleX(-1);
    transition: all .3s ease;
}

.package-help-icon i.fa:hover {
    background: #fff;
    color: #999;
}

.package-help-text {
    display: none;
    position: absolute;
    right: 24px;
    top: 12px;
    width: 300px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.07);
    border-radius: 3px;
    font-size: 13px;
    line-height: 2;
    color: #777;
}

.package-help-text h3 {
    font-size: 16px;
    margin: 5px 0 15px;
    color: #555;
}

.package-help-text a.close {
    position: absolute;
    left: 20px;
    top: 24px;
    font-size: 12px;
}

.table_nav_fixed {
    padding: 20px 0;
    background: white;
    text-align: center;
    display: none;
    position: fixed;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid #e1e1e1;
    right: 0;
    width: 100%;
}

/*** Sample ***/
.sampleheader {
    padding: 10rem 0 16rem;
    overflow: hidden;
    background: url('../dist/city.gif') repeat-x bottom center;
    min-height: 650px;
}

.sampleheader .sample-desc {
    /* position: relative; */
    z-index: 10;
}

.sampleheader .maintitle {
    line-height: 1.8;
    margin: 70px 0px 30px;
    text-align: justify;
}

.sampleheader .blue_radius_sample {
    content: "";
    height: 660px;
    width: 660px;
    background: -moz-linear-gradient(top, #82DCE6 25%, #5db0e8 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(25%, #82DCE6), color-stop(100%, #5db0e8));
    background: -webkit-linear-gradient(top, #82DCE6 25%, #5db0e8 100%);
    background: -o-linear-gradient(top, #82DCE6 25%, #5db0e8 100%);
    background: -ms-linear-gradient(top, #82DCE6 25%, #5db0e8 100%);
    background: linear-gradient(to bottom, #82DCE6 25%, #5db0e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#82DCE6', endColorstr='#5db0e8', GradientType=0);
    position: absolute;
    bottom: -350px;
    border-radius: 150px;
    right: -1%;
    -webkit-transform: rotate(-43deg); /* Chrome, Safari, Opera */
    transform: rotate(-43deg);
    z-index: 0;
}

.sampleheader .circle_bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 0;
}

.sample_stats {
    font-size: 24px;
    padding: 2.5rem 0 7.5rem
}

.sample_stats strong {
    color: #333;
    font-size: 28px;
    padding: 0px 10px;
}

.browser {
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: #f6f8f9;
    min-height: 347px;
    padding-top: 25px;
    margin: 0px 15px 55px;
    /* border: 1px solid #ccc; */
    overflow: hidden;
}

.browser::before {
    position: absolute;
    content: "0 0 0";
    font-size: 18px;
    left: 20px;
    top: 0px;
    color: #aaa
}

.sample_item_desc {
    position: absolute;
    top: -20px;
    right: 0;
    width: 100%;
    height: 100%;
    transition: all 0.2s ease-out;
    background: rgba(255, 255, 255, 0.95);
    text-align: center;
    padding: 10rem 2rem 0;
    opacity: 0;
}

.browser:hover .sample_item_desc {
    top: 0;
    opacity: 1;
}

.browser img {
    width: 100%;
    border-top: 1px solid #eee;
    height: auto;
    position: absolute;;
}

.testimonial_sample {
    margin: 0px 15px 55px;
    padding: 4rem 2.5rem 5.5rem;
    border-radius: 10px;
    box-shadow: 0px 2px 5px #eee;
    background: linear-gradient(45deg, rgba(38, 80, 121, 1) 0%, rgb(96, 148, 197) 100%);
}

.sample_testi_text {
    font-size: 16px;
    padding: 4rem 1.5rem 0;
    line-height: 2.5;
    color: rgba(255, 255, 255, 0.8);
}

#sample_slide {
    width: 1400px;
}

#sample_slide .yellowbtn {
    position: absolute;
    left: 0px;
    top: 227px;
    z-index: 99999;
}

#sample_slide img {
    width: 100%;
    height: auto;
}

/* Feel free to change duration  */
.animated {
    -webkit-animation-duration: 1000ms;
    animation-duration: 1000ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* .owl-animated-out - only for current item */
/* This is very important class. Use z-index if you want move Out item above In item */
.owl-animated-out {
    z-index: 1
}

/* .owl-animated-in - only for upcoming item
/* This is very important class. Use z-index if you want move In item above Out item */
.owl-animated-in {
    z-index: 0
}

/* .fadeOut is style taken from Animation.css and this is how it looks in owl.carousel.css:  */
.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/***faq***/
.faq_box {
    width: 60%;
    margin: 0px auto;
}

.faq_article {
    margin: 10px 0px;
    border: 1px solid #e1e1e1;
    padding: 15px;
    border-radius: 4px;
}

.faq_article a {
    color: #666
}

.faq_article .sprite {
    margin-right: 10px;
}

.rotates i {
    transform: rotate(180deg);
}

.faq_box dt {
    font-weight: 400 !important;
}

.faq_box dd {
    font-size: 15px;
    color: #444;
    line-height: 2;
    padding: 15px;
    background: #f6f8f8;
}

#mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 400;
    display: none;
    background: rgba(0, 0, 0, 0.6);
}

.bar {
    position: relative;
    display: block;
    width: 30px;
    height: 5px;
    margin: 6px auto 6px;
    background-color: #0ab0d1;
    border-radius: 10px;
    -webkit-transition: .3s;
    transition: .3s;
}

.menu-button {
    display: none;
    float: left;
    /* margin-top: 3px; */
}

.lg-hide {
    display: none !important
}

.close2 {
    display: none;
}

.s_a_chapter1 {
    animation: s_a_chapter1 7s ease-out 9999;
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding: 3rem 2rem
}

@keyframes s_a_chapter1 {
    0% {
        opacity: 0;
        top: -50px
    }
    4% {
        opacity: 1;
        top: 0px
    }
    47% {
        opacity: 1;
        top: 0px
    }
    49% {
        opacity: 0;
        top: 50px
    }
    100% {
        opacity: 0;
        top: 50px
    }
}

.ringing-phone {
    animation: cellphone 3500ms linear 500ms 5;
    width: 40px;
    height: 40px;
    display: block;
    margin-bottom: 25px;
}

@keyframes cellphone {
    0% {
        transform: rotate(0deg);
    }
    4% {
        transform: rotate(-30deg);
    }
    8% {
        transform: rotate(30deg);
    }
    12% {
        transform: rotate(-30deg);
    }
    16% {
        transform: rotate(30deg);
    }
    20% {
        transform: rotate(-30deg);
    }
    24% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.s_a_chapter1_man {
    width: 35%;
    height: auto;
    left: 20px;
    position: absolute;
    bottom: 20px
}

.s_a_chapter1_man_pm {
    width: 35%;
    height: 80px;
    right: 20px;
    position: absolute;
    bottom: 30px;
    padding: 23px 10px 0;
    background: #eee;
    border-radius: 10px 10px 10px 10px;
}

.s_a_chapter1_man_pm::before {
    content: '';
    position: absolute;
    left: 0;
    top: 80%;
    width: 0;
    height: 0;
    border: 15px solid transparent;
    border-right-color: #eee;
    border-left: 0;
    border-bottom: 0;
    margin-top: -10px;
    margin-left: -10px;
}

.s_a_chapter1_man_pm span {
    width: 100%;
    height: 6px;
    margin-bottom: 10px;
    background: #999;
    border-radius: 10px;
    display: block;
}

.s_a_chapter1_man_pm span {
    width: 0;
    height: 6px;
    margin-bottom: 10px;
    background: #ccc;
    border-radius: 10px;
    display: block;
    animation: s_a_chapter1_man_pm 7s ease-out 1000;
}

@keyframes s_a_chapter1_man_pm {
    5% {
        opacity: 0;
    }
    20% {
        width: 100%;
        opacity: 1;
    }
    50% {
        width: 100%;
    }
    100% {

    }
}

.s_a_chapter2 {
    animation: s_a_chapter2 7s ease-out 9999;
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding: 3rem 2rem
}

@keyframes s_a_chapter2 {
    0% {
        opacity: 0;
    }
    51% {
        opacity: 0;
        top: 50px
    }
    55% {
        opacity: 1;
        top: 0px
    }
    95% {
        opacity: 1;
        top: 0px
    }
    100% {
        opacity: 0;
        top: 50px
    }
}

.ticket {
    width: 40px;
    height: 40px;
    display: block;
    margin-bottom: 25px;
}

.ticket_form span {
    width: 100%;
    height: 4px;
    margin-bottom: 10px;
    background: #ccc;
    border-radius: 10px;
    display: block;
}

.ticket_form span:nth-child(1) {
    width: 80%;
    animation: s_a_chapter2_ticket_line_1 7s linear 100;
}

.ticket_form span:nth-child(2) {
    width: 40%;
    animation: s_a_chapter2_ticket_line_2 7s linear 100;
}

.ticket_form span:nth-child(3) {
    width: 60%;
    animation: s_a_chapter2_ticket_line_3 7s linear 100;
}

.ticket_form span:nth-child(4) {
    width: 30%;
    animation: s_a_chapter2_ticket_line_4 7s linear 100;
}

@keyframes s_a_chapter2_ticket_line_1 {
    50% {
        width: 0
    }
    55% {
        width: 80%
    }
}

@keyframes s_a_chapter2_ticket_line_2 {
    55% {
        width: 0
    }
    60% {
        width: 40%
    }
}

@keyframes s_a_chapter2_ticket_line_3 {
    60% {
        width: 0
    }
    65% {
        width: 60%
    }
}

@keyframes s_a_chapter2_ticket_line_4 {
    65% {
        width: 0
    }
    70% {
        width: 30%
    }
}

@media only screen and (max-width: 550px) {
    .package_table_item {
        min-height: auto !important;
        padding-bottom: 40px !important;
        margin-bottom: 20px
    }

    .package_table_item_vip {
        transform: none;
    }

    .solution-text {
        font-size: 20px;
    }

    .testiimg {
        margin-right: 0
    }

    .solution {
        min-height: 530px;
    }

    .show-video {
        position: fixed;
        right: 5%;
        top: 20%;
        width: 90%;
        height: auto;
        z-index: 9999;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
        border-radius: 5px;
        display: none;
    }

    .animation-top {
        width: 100% !important
    }

    @keyframes zoomout2 {
        0% {
            transform: scale(0)
        }
        1% {
            transform: scale(1.3)
        }
        2% {
            transform: scale(0.8)
        }
        3% {
            transform: scale(1.1)
        }
        4% {
            transform: scale(1)
        }
        5% {
            transform: scale(1)
        }
        6% {
            transform: scale(1.1)
        }
        7% {
            transform: scale(1.1)
        }
        9% {
            transform: scale(1.8) translate(65px, 0)
        }
        11% {
            transform: scale(1.8) translate(65px, 20px)
        }
        12% {
            transform: scale(1.8) translate(65px, 20px)
        }
        39% {
            transform: scale(1.8) translate(65px, 20px)
        }
        100% {
            transform: scale(1.8) translate(65px, 20px)
        }
    }  .animtop-chapter {
           padding: 6.5rem 0rem 0rem;
       }

    .all-stories {
        position: static;
        float: left;
        padding: 0px;
        height: auto;
    }

    .all-stories a {
        display: block;
        text-align: center;
        padding: 15px 30px;
    }

    .test-bg .owl-next, .test-bg .owl-prev {
        position: static;
        float: right;
        /* background: #476d93; */
        /* color: rgba(255, 255, 255, 0.85); */
        padding-top: 5px;
        padding: 10px 15px;
        border-radius: 40px;
    }

    .shop-banner-box .blue-radius2 {
        display: none;
    }

    .mainheader .yellow-radius {
        top: 260px;
        left: 23%
    }

    .mainheader a.smooth {
        display: block;
        margin-bottom: 15px;
        text-align: center
    }
}

.s_a_chapter2 .green-btn {
    font-size: 12px;
    color: white;
    padding: 5px 20px;
    border-radius: 99px;
    background-color: #2CD379;
}

/*** res ***/
.dark_res_sq {
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    height: 600px;
    width: 600px;
    position: absolute;
    bottom: -200px;
    transform: rotate(45deg);
    right: -500px;
}

.dark_res_sq span {
    display: block;
    border: inherit;
    border-radius: 10px;
    height: 80%;
    width: 80%;
    margin: 10%;
}

.dark_res_sq2 {
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    height: 300px;
    width: 300px;
    position: absolute;
    top: 200px;
    transform: rotate(45deg);
    left: -100px;
}

.dark_res_sq2 span {
    display: block;
    border: inherit;
    border-radius: 10px;
    height: 80%;
    width: 80%;
    margin: 10%;
}

.dark_res_sq3 {
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    height: 700px;
    width: 700px;
    position: absolute;
    top: 200px;
    transform: rotate(45deg);
    right: 100px;
}

.dark_res_sq3 span {
    display: block;
    border: inherit;
    border-radius: 10px;
    height: 80%;
    width: 80%;
    margin: 10%;
}

.dark_res {
    background: linear-gradient(to bottom, #244A8A 0%, #1a2a55 100%);
    position: relative;
    z-index: 10;
    overflow: hidden;
}
.dark_res .simple-article5 {
    padding-bottom: 2rem !important;
}
.dark_res .col-lg-10 {
    padding: 0px 15px 0px 30px;
}

.dark_res div > p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 2;
    margin: 25px 0p 15px;
}

.dark_res h4 {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.dark_res .dark_res_item {
    padding: 0px 0px 75px !important;
}

.dark_res .has_monitor {
    min-height: 240px;
}

.dr_ico {
    width: 54px;
    height: 54px;
    margin-top: 5px;
}

.dr_ico1 {
    background: url('../dist/static_sprite.png') no-repeat -946px -500px;
}

.dr_ico2 {
    background: url('../dist/static_sprite.png') no-repeat -892px -500px;
}

.dr_ico3 {
    background: url('../dist/static_sprite.png') no-repeat -838px -500px;
}

.dr_ico4 {
    background: url('../dist/static_sprite.png') no-repeat -784px -500px;
}

.dr_ico5 {
    background: url('../dist/static_sprite.png') no-repeat -730px -500px;
}

.dr_ico6 {
    background: url('../dist/static_sprite.png') no-repeat -676px -500px;
}

.dr_ico7 {
    background: url('../dist/static_sprite.png') no-repeat -622px -500px;
}

.dr_ico8 {
    background: url('../dist/static_sprite.png') no-repeat -568px -500px;
}

.dr_ico9 {
    background: url('../dist/static_sprite.png') no-repeat -514px -500px;
}

.dr_ico10 {
    background: url('../dist/static_sprite.png') no-repeat -460px -500px;
}

.dr_ico11 {
    background: url('../dist/static_sprite.png') no-repeat -406px -500px;
}

.dr_ico12 {
    background: url('../dist/static_sprite.png') no-repeat -352px -500px;
}
.reseller_all_feat {
    overflow: hidden;
}
.reseller_all_feat .simple-feat {
    padding-left: 0 !important;
}
.start_reseller .white_box {
    background: white;
    padding: 5rem 2.5rem;
    border-radius: 4px;
    border-top: 4px solid #e8d71d;
    position: relative;
    z-index: 10;
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.18);
}
.start_reseller .white_box  strike {
    font-size: 26px;
    margin-left: 5px;
    font-weight: 400;
}
.start_reseller .black_box {
    background: linear-gradient(to bottom, #716a6a 0%, #525356 100%);
    padding: 5rem 2.5rem;
    position: relative;
    z-index: 5;
    margin-top: 20px;
    border-radius: 4px 0px 0px 4px;
    box-shadow: 0px 3px 10px #c0c0c0;
}

.start_reseller .black_box a {
    background: #505050;
    color: #fff;
    padding: 1.2rem 2.5rem;
    /* display:inline-block; */
    border-radius: 3px;
}
.start_reseller {
    overflow: hidden;
}
.border-top1px {
    border-top: 1px solid #eee;
}

.colorwhite {
    color: rgba(255, 255, 255, 0.925) !important;
}

.colorwhite2 {
    color: rgba(255, 255, 255, 0.65) !important;
}

.dark_artile {
    background: #313140;
    overflow: hidden;
}

.dark_artile p {
    line-height: 2;
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
}

.reseller_header {
    /* text-align:  center; */
    background: linear-gradient(to bottom, #FAFAFA 0%, #F7F8F8 100%);
    min-height: 400px;
    overflow: hidden;
    padding: 10rem 0 5rem;
}
.reseller_header:before {
    content:"";
    display:block;
    background:url('../dist/top_res.png');
    width: 550px;
    position:absolute;
    top:0;
    right: -135px;
    height:235px;
}
.reseller_header .container-xl:before {
        content: "";
    width: 200px;
    height: 250px;
    position: absolute;
    left:400px;
    top: -140px;
    background: linear-gradient(to bottom, #fafafa , #EFF0F1);
    transform: skew(-200deg);
}

.blue_rh {
    content: "";
    height: 600px;
    width: 600px;
    background: -moz-linear-gradient(top, #82DCE6 25%, #5db0e8 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(25%, #82DCE6), color-stop(100%, #5db0e8));
    background: -webkit-linear-gradient(top, #82DCE6 25%, #5db0e8 100%);
    background: -o-linear-gradient(top, #82DCE6 25%, #5db0e8 100%);
    background: -ms-linear-gradient(top, #82DCE6 25%, #5db0e8 100%);
    background: linear-gradient(to bottom, #82DCE6 25%, #5db0e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#82DCE6', endColorstr='#5db0e8', GradientType=0);
    position: absolute;
    top: -400px;
    border-radius: 150px;
    left: -1%;
    -webkit-transform: rotate(-43deg); /* Chrome, Safari, Opera */
    transform: rotate(-43deg);
    z-index: 0;
}

.blue_rh3 {
    content: "";
    height: 500px;
    width: 500px;
    background: -moz-linear-gradient(top, #82DCE6 25%, #5db0e8 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(25%, #82DCE6), color-stop(100%, #5db0e8));
    background: -webkit-linear-gradient(top, #82DCE6 25%, #5db0e8 100%);
    background: -o-linear-gradient(top, #82DCE6 25%, #5db0e8 100%);
    background: -ms-linear-gradient(top, #82DCE6 25%, #5db0e8 100%);
    background: linear-gradient(to bottom, #82DCE6 25%, #5db0e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#82DCE6', endColorstr='#5db0e8', GradientType=0);
    position: absolute;
    top: -350px;
    border-radius: 20px;
    right: -1%;
    -webkit-transform: rotate(-43deg); /* Chrome, Safari, Opera */
    transform: rotate(-43deg);
    z-index: 0;
}

.reseller_header .white_rh {
    content: "";
    height: 600px;
    width: 600px;
    background: rgba(255, 255, 255, 0.1);
    position: absolute;
    bottom: -400px;
    border-radius: 150px;
    right: -30%;
    -webkit-transform: rotate(-43deg); /* Chrome, Safari, Opera */
    transform: rotate(-43deg);
    z-index: 0;
}

.white_desc {
    font: 300 18px/2 'IRANSans', tahoma;
    color: rgba(251, 255, 251, 0.9);
    margin: 1rem 0 3rem;
}

.white_desc p {
    margin: 1rem 0;
}

.white_desc h4 {
    font-size: 20px;
    line-height: 1;
    margin: 0;
    color: rgba(251, 255, 251, 0.9);
}

.white_desc h1 {
    font-size: 36px;
    color: white;
    letter-spacing: -1px;
    margin: 2.5rem 0;
    font-weight: 500
}

.reseller_header .circle_svg {
    position: absolute;
    bottom: -50px;
    width: 100%;
    z-index: 0;
}

.why_res p {
    padding: 2rem 4rem;
    /* line-height: 1.9; */
    color: #777;
    font-size: 17px;
}

.why_res h4 {
    margin: 30px 0px 0px;
    font-weight: 500;
}

.res_yellow_square {
    position: absolute;
    width: 900px;
    height: 1100px;
    transform: rotate(75deg);
    background:linear-gradient(to bottom, #f2f3f4 , #ffffff);
    border-radius: 20px;
    right: -800px;
    top: 100px;
    z-index: 0;
}

.padding-top100 {
    padding-top: 100px;
}

.portal_res_float {
    position: relative;
    top: 40px;
    z-index: 10;
}
/** SHOP **/
.shop_header {
    min-height: 400px;
    overflow: hidden;
    background:#F7F7FB;
    padding: 10rem 0 15rem;
}
.shop_header {
    min-height: 400px;
    overflow: hidden;
    background:#F7F7FB;
    padding: 10rem 0 15rem;
}
.shop_radius {
    background: url("../dist/shop_sprite.png") top center;
    width:750px;
    height: 468px;
    position: absolute;
    top: -100px;
    left: -100px;
}
.shop_header .circle_svg {
    position: absolute;
    bottom: -50px;
    width: 100%;
    z-index: 0;
}
.theme_head {
    padding: 8.5rem 0 0;
    position: relative;
    overflow: hidden;
}
.theme_head .item {
    padding-bottom: 7rem;
}
#themegallery .owl-nav {
    position: absolute;
    left: 10px;
    z-index: 100;
    top: 53.25%;
}
.theme_box_shad1 {
    background: #FFF1CE;
    padding: 40px 40px;
    line-height:2;
    border-radius: 2px;
}
.theme_box_shad2 {
    background: #E4F5FA;
    padding: 40px 40px;
    border-radius: 2px;
    line-height:2;
}
.theme_box_shad1 h5,
.theme_box_shad2 h5 {
    font-weight:bold;
}
.theme_box_shad1:before {
    display: block;
    content:"";
    margin: 0px auto 30px;
    background: url("../dist/static_sprite.png") no-repeat -820px -640px;
    width: 180px;
    height:110px;
}
.theme_box_shad2:before {
    display: block;
    content:"";
    margin: 0px auto 30px;
    background: url("../dist/static_sprite.png") no-repeat -640px -640px;
    width: 180px;
    height:110px;
}
.theme_round1 {
    top:150px;
    width: 450px;
    height: 450px;
    border-radius: 30px;
    right: 70px;
    position: absolute;
    transform: rotate(30deg);
}
.theme_round2 {
    top:100px;
    width: 550px;
    height: 550px;
    border-radius: 30px;
    right: 150px;
    position: absolute;
    transform: rotate(-20deg);
}
.theme_round_pink {
    background: #EE7179;
    opacity: 0.15;
}
.theme_feat {
    background: linear-gradient(45deg, rgba(38, 80, 121, 1) 0%, rgba(57, 105, 150, 1) 100%);
}
.theme_feat .dr_ico {
    margin: 0px auto
}
.theme_feat h2.maintitle-section,
.theme_feat h4 {
    color: white !important;
}
.theme_feat h5 {
    color: rgba(255, 255, 255, 0.8);
    font-size: 19px;
}
.theme_desc .icon {
    height: 30px;
    margin-left: 10px;
    width: 30px;
    opacity:0.6;
}
.theme_preview_item {
    background: white;
    overflow: hidden;
    border: 1px solid #e1e1e2;
    position: relative;
    border-radius: 3px;
    margin-bottom: 30px;
    box-shadow:0px 2px 4px #eee;
}
.theme_preview_item:hover {
    border: 1px solid #ccc;
}
.theme_preview_item .hover_theme_name {
    background: white;
    width: 96px;
    height: 96px;
    position: absolute;
    top: 270px;
    right: 4.5%;
    border-radius: 3px;
    text-align: center;
    padding-top:20px;
    box-shadow:0px 2px 10px rgba(0,0,0,0.15);
}
.theme_preview_item .hover_theme_prev {
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 300px;
    text-align: center;
    color: white;
    padding-top: 100px;
    right:0px;
    position: absolute;
    opacity:0;
    transition: all 500ms;
    top: -50px;
}
.theme_nav a {
    padding: 20px 0px;
    color: #888;

}
.theme_nav a:nth-child(1) {
    color: #333 !important;
    box-shadow:0px -2px 8px rgba(0, 0, 0, 0.05);
    background: white;
}
.theme_nav a:hover {
    background:rgba(0,0,0,0.02);
    color: #111;
}
.theme_preview_item:hover .hover_theme_prev {
    top: 0px;
    opacity:1;
}
.theme_preview_item .hover_theme_prev p:nth-child(1) {
    font-size: 20px;
}
.theme_preview_item img.show_vi {
    width: 100%;
    height: 300px;
    transition: all 200ms;
}
.theme_desc {
    padding: 35px 28% 25px 20px;
}
.theme_desc .pull-left a {
    padding: 8px 15px;
    color: #48B8FE;
    border: 1px solid #48B8FE;
    border-radius: 4px;
}
.theme_desc .pull-right a {
    color: #666
}
.themegallery img {
    max-width: 90%;
}
.themegallery .owl-prev {
    padding: 0.75rem 1.8666rem;
    background: #ffd262;
    border-radius: 4px;
	margin-top: 15px;
    color: #222 !important;
}
#themegallery2 {
    position: absolute;
    height: 400px;
}
#themegallery2 .owl-stage-outer{
    height: 400px;
}
#shop_slider .owl-dots {
    position: absolute;
}
.browser_shop {
    background: white;
    min-height: 200px;
    border-radius: 4px;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.15);
}
.browser_shop:before {
    content:"000";
    letter-spacing: 10px;
    color: #999;
    text-align: left;
    padding: 4px 20px;
    display: block;
    border-bottom: 1px solid #e1e1e1;
}
.browser_shop_ico1 {
    background: url("../dist/shop_sprite.png") no-repeat 0 -500px;
    width: 100px;
    height: 130px;
    position: absolute;
    right: 0px;
    z-index:10;
    bottom: 0px;
}
.browser_shop_ico2 {
    background: url("../dist/shop_sprite.png") no-repeat -100px -500px;
    width: 150px;
    height: 65px;
    position: absolute;    z-index:10;
    right: 40px;
    bottom: 10px;
}
.browser_shop_ico3 {
    background: url("../dist/shop_sprite.png") no-repeat -288px -571px;
    width: 51px;
    height: 102px;
    position: absolute;
    z-index: 20;
    right: 30px;
    bottom: 2px;
}
.browser_shop_ico4 {
    background: url("../dist/shop_sprite.png") no-repeat -345px -555px;
    width: 182px;
    height: 118px;
    position: absolute;    z-index:10;
    right: 40px;
    bottom: 10px;
}
.browser_shop_ico5 {
    background: url("../dist/shop_sprite.png") no-repeat -546px -555px;
    width: 60px;
    height: 109px;
    position: absolute;
    z-index: 13;
    right: 40px;
    bottom: 10px;
}
.browser_shop_ico6 {
    background: url("../dist/shop_sprite.png") no-repeat -612px -582px;
    width: 60px;
    height: 80px;
    position: absolute;
    z-index:10;
    right: 9px;
    bottom: 10px;
}
div.blue_shop_bg h2 {
    color: white !important;
    line-height:1.5;
    font-size: 30px;
}
div.blue_shop_bg p {
    color: rgba(255,255,255,0.8) !important;
    line-height:2;
    font-size: 18px;
}
.theme_feat_op {
    color: rgba(8, 35, 80, 0.7);
    margin: 25px 0px;
}
.theme_feat_op h4 {
    font-size: 20px !important;
font-weight: bold;
    padding-top: 15px;    color: rgba(5, 38, 99, 0.7);
}
.theme_feat_ico100 {
    background: url('../dist/shop_feat_sprite.png');
    width: 100px;
    height: 100px;
    display: block;
}
.theme_feat_ico100_1 {
    background-position: 0px 0px;
}
.theme_feat_ico100_2 {
    background-position: -100px 0px;
}
.theme_feat_ico100_3 {
    background-position: -200px 0px;
}
.theme_feat_ico100_4 {
    background-position: -300px 0px;
}
.theme_feat_ico100_5 {
    background-position: -400px 0px;
}
span.yellow_line {
    border-bottom:2px solid #FBCC33;

}
footer {
    overflow:hidden;
}

.yellow_small {
    background:  #FFC631;
    height: 250px;
    width: 250px;
    border-radius: 40px;
    transform: rotate(20deg);
    position: absolute;
    top: 100px;
    z-index: 2;
    left: 0
}
.fleft-wide-c2 {
    float: right;
    width: 680px;
    padding: 15.8rem 5rem 16.5rem;
}
.fright-wide-c2 {
    float: left;
    width: 680px;
    padding: 10rem 5rem 5rem 5rem;
}
.blue_shop_bg {
    background: linear-gradient(to bottom, #48B8FE 0%, #3B92CB 100%);
    min-height: 500px;
}
.grey_shop_bg {
    background-color: #f6f6f6;
}
#shop_slider_2 .owl-dots, #shop_slider_2 .owl-nav {
    margin-top: 70px
}

.shop_iphone {
    width: 210px;
    height: 434px;
    background:#EEEEEE;
    position: relative;
    z-index:10;
    border: 1px solid white;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
    border-radius: 20px;
}
.shop_iphone:before {
    margin: 20px auto;
    content:"";
    display: block;
    background:#ccc;
    width: 15%;
    height: 3px;
    border-radius: 20px;
}
.iphone_inner {
    background: #fff;
    border: 1px solid #e1e1e1;
    height: 340px;
    width: 90%;
    margin: 20px auto 5px;
}
.shop_iphone:after {
    margin: 10px auto;
    content:"";
    display: block;
    background:#ccc;
    width: 30px;
    height: 30px;
    border-radius: 30px;
}

.shop_pr_ex {
    background: url("../dist/shop_sprite.png") no-repeat -106px -575px;
    width: 133px;
    height: 100px;
}
.shop_pr_ex2 {
    background: url('../images/tetris-bg2.png') repeat-x left bottom white;
    border-radius: 3px;
    width: 400px;
    height: 300px;
    position: relative;
    overflow:hidden;
    padding: 20px 20px;
    margin: 25px auto 0px;
    box-shadow: 0px 3px 6px #ccc;
    animation: EX0 15s infinite;
}
@keyframes EX0 {
    0% {
        background: url('../images/tetris-bg2.png') repeat-x left bottom white;
    }
    100% {
        background: url('../images/tetris-bg2.png') repeat-x right bottom white;
    }
}
.ex_an1 {
    animation: EX1 15s infinite;
    position: absolute;
    width: 100%;
    right:0;
    top:40px;
}
@keyframes EX1 {
    0% {
        transform: translateY(-150px);
    }
    3% {
        transform: translateY(0px);
    }
    20% {
        transform: translateY(0px);
    }
    23% {
        transform: translateY(-150px);
    }
    100% {
        transform: translateY(-150px);
    }

}
.ex_an2 {
    animation: EX2 15s infinite;
    position: absolute;
    display: block;
    top: 150px;
    width: 50%;
    height: 50%;
    right: 25%;
}
@keyframes EX2 {
    0% {
        transform: translateY(210px);
    }
    3% {
        transform: translateY(0px);
    }
    20% {
        transform: translateY(0px);
    }
    23% {
        transform: translateY(210px);
    }
    100% {
        transform: translateY(210px);
    }

}
.ex_an3 {
    animation: EX3 15s infinite;
    position: absolute;
    width: 100%;
    display: block;
    right: 0;
    top: 40px;
}
@keyframes EX3 {
    0% {
        opacity: 0
    }
    22% {
        opacity: 0
    }
    25% {
        opacity: 1
    }
    55% {
        opacity: 1
    }
    58% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}
.ex_an4 {
    animation: EX4 15s infinite;
    position: absolute;
    width: 100%;
    top: 160px;
    display: block;
    right: 15px;
    font-size: 13px;
}
.ex_an4 img {
    width: 40%;
    height: auto;
    margin: 0px auto 20px;
    display: block;
}
.ex_no {
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    background: #427DF5;
    color: white;
    padding-top: 12px;
    border-radius: 60px;
    margin: 0px auto 15px;
}
@keyframes EX4 {
    0% {
        opacity: 0
    }
    20% {
        opacity: 0
    }
    23% {
        opacity: 1
    }
    55% {
        opacity: 1
    }
    58% {
        opacity: 0
    }
    100% {
        opacity: 0
    }
}

.ex_an5 {
    animation: EX5 15s infinite;
    position: absolute;
    width: 100%;
    top: 30px;
    display: block;
    right: 0;
    font-size: 13px;
}
@keyframes EX5 {
    0% {
        opacity: 0
    }
    60% {
        opacity: 0
    }
    63% {
        opacity: 1
    }
    80% {
        opacity: 1;
        top:30px;
    }
    83% {
        top:-150px;  opacity: 0
    }
    100% {
        top:-150px;
    }
}

.ex_an6 {
    animation: EX6 15s infinite;
    position: absolute;
    width: 324px;
    top: 30px;
    background: url('../dist/shop_sprite.png') left -679px;
    display: block;
    right: 10%;
    height: 194px;
    font-size: 13px;
    z-index:10;
}
@keyframes EX6 {
    0% {
        opacity: 0
    }
    62% {
        top: 480px;opacity: 0
    }
    64% {
        top:150px;  opacity: 1;
    }

    80% {
        top:150px;  opacity: 1;
    }
    83% {
        top:60px;  opacity: 1;
    }
    100% {
        opacity: 1;
        top:60px;
    }
}

.ex_an7 {
    position: absolute;
    background: url(../images/portal-sprite.png) left -915px;
    width: 290px;
    height: 160px;
    animation: EX7 15s infinite;
    margin: 25px auto 0;
}
@keyframes EX7 {
    0% {
        opacity: 0
    }
    83% {
        opacity: 0;
    }
    86% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

.feat_list {
    list-style: none;
    color: #63636E;
    font-size: 18px
}
.feat_list li {
    margin-bottom: 2rem;
}
.feat_list li:before{
    content:"";
    width: 21px;
    display: block;
    height: 21px;
    float: right;
    margin-left: 2rem;
    background: url("../dist/shop_sprite.png") right -500px;
}
.get_shop {
    border-top:1px solid #e1e1e1;
    margin-top: 20px;
}
.get_shop a {
    margin-left: 20px;
}
.shop_theme_gallery {
    padding-right: 0% !important;
    padding-left: 0%!important;
    /* border-radius: 4px; */
    margin-top: 0px;
    margin-bottom: 20px;
    overflow: hidden;
}
.shop_theme_gallery .desc {
    display: block;
    position: absolute;
    padding-top: 125px;
    top:-20px;
    background: rgba(0,0,0,0.8);
    width: 95%;
    color: rgba(255,255,255,0.6);
    height: 100%;
    text-align: center;
    opacity:0;
    transition: all 0.2s;
    right:2.5%;
}
.er-footer-menu {
    padding: 50px 0px 15px !important;
}
.shop_theme_gallery .desc p {
    margin-bottom: 40px;
}
.shop_theme_gallery img {
    width: 100%;
    border-radius: 3px 3px 0px 0px;
}
.shop_theme_gallery:hover .desc {
    top: 0px;
    opacity: 1;
}

.shop_page .package_table_item_vip {
    min-height: 450px !important;
    height: 450px !important;
    text-align: right !important;
}
.shop_page .package_table_item {
    min-height: 410px;
    height: 410px;
    text-align: right !important;
}
.shop_page .small {

    font-size: 14px !important;
}
.shop_page .buy_now {
    margin-top: 5px !important;
    display: inline-block;
}
@media only screen and (min-width: 1440px) {
    .res_yellow_square {
        width: 130%;
        height: 100%;
        right: -72%;
        top: 950px;
    }
}

@media only screen and (max-width: 1440px) {
    .logo-brand {
        margin:0px !important
    }

    .test-bg .owl-prev {
        right: -35px;
    }

    .animation-top {
        min-height: 480px !important;
        width: 583px !important;
        float: none;
        margin: 0px auto;
    }

    .container-xl {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }

    .fright-wide-c, .fleft-wide-c, .stories-desc {
        width: 100%;
    }

    .fright-wide {
        padding: 2.5rem 1.5rem 2rem;
    }

    .loginnow {
        margin: 0
    }

    #sample_slide {
        width: 100% !important;
    }
}

@media only screen and (max-width: 1080px) {
    .solution2 {
        padding: 0rem 1rem 7.5rem !important;
    }
    .animation-top {
        float: none;
        margin: 0px auto
    }
    .start_reseller {
        padding: 5rem 1.5rem !important;
    }
    .reseller_header .circle_svg {
        bottom: 0;
        right: 0
    }
    .res_yellow_square, .cursor-move {
        display: none;
    }

    .join-us {
        overflow: hidden
    }
    .dark_res .dark_res_item {
        padding: 0px 10px 40px !important;
    }
    .dr_ico {
        margin: 20px;
    }
    .join-us-form {
        padding: 3rem
    }

    .name-list input, .email-list input {
        width: 100%;
    }

    .featurebody {
        /* background: #faf8f9 !important; */
    }

    .mainheader {
        padding-top: 5rem;
        text-align: center;
        overflow: hidden;
        padding-bottom: 5rem;
    }

    .test-bg .owl-next {
        left: 200px
    }

    #sync1 {
        position: static;
    }

    #sync2 {
        position: absolute;
        z-index: 99999;
        top: 0;
        right: 10%;
    }

    .fright-wide {
        min-height: auto
    }

    .price-table-index {
        margin-bottom: 20px !important;
    }

    .price-table-index .col-lg-10 {
        padding: 0 !important
    }

    .fright-wide, .fleft-wide {
        width: 100%;
        float: none;
    }
    .portal_res_float {
        display: block;
        top:0;
        margin: 0px auto 40px;
    }
    .fleft-wide-support {
        display: none;
    }

    .solution {
        padding: 0px 0px 5rem;
        min-height: auto;
    }

    .customersbody {
        padding: 0;
        min-height: auto;
    }

    .customersbody {
        padding-bottom: 4rem !important;
    }

    .slideshow {
        margin: 0px auto
    }

    .chapter1 .col-xl-4 {
        width: 33%;
        float: right;
    }

    #slideshow {
        margin: 20px auto;
    }

    .blue-radius {
        top: 500px !important;
        display: none;
    }
}

@media only screen and (max-width: 980px) {
    .its_newshop span {
        display:none
    }
    .theme_head .padding-top100 {
        padding-top: 25px;
    }
    .theme_head {
        padding: 0px 0px 2.5rem;
        text-align: center;
    }
    .theme_head .item {
        padding-bottom: 20px;
    }
    #themegallery .owl-nav {
        position: static;
    }
    .themegallery img {
        margin-top: 30px;
        max-width: 95%;
    }
    .theme_round1, .theme_round2 {
        top: -100px;
        width: 200px;
        height: 200px;
        bottom: auto;
    }
    .ul-box-links li:nth-child(2) {
        background: url('../images/portal-sprite.png') right -890px no-repeat;
        padding:8px 40px 8px !important
    }

    .ul-box-links li:nth-child(3) {
        background: url('../images/portal-sprite.png') right -930px no-repeat;
        padding:8px 40px 8px !important
    }

    .ul-box-links li:nth-child(4) {
        background: url('../images/portal-sprite.png') right -970px no-repeat;
        padding:8px 40px 8px !important
    }

    .ul-box-links li:nth-child(5) {
        background: url('../images/portal-sprite.png') right -1010px no-repeat;
        padding:8px 40px 8px !important
    }

    .ul-box-links li:nth-child(6) {
        background: url('../images/portal-sprite.png') right -1050px no-repeat;
        padding:8px 40px 8px !important
    }

    .package_table_item_vip::after,
    .package_table_item::after {
        display:  none;
    }
    .fright-wide-c2,
    .fleft-wide-c2{
        padding: 5rem 1.5rem
    }
    .shop_header {
        text-align: center;
    }
    .shop_pr_ex {
        margin: 0px auto;
    }
    .shop_radius {
        bottom: -150px;
        left: -100px;
        top: auto;
        transform: rotate(180deg);
    }
    .fright-wide-c2,
    .fleft-wide-c2 {
        width: 100%;
        float: none;
    }
    .yellow_small {
        left: 30%;
    }
    .fright-wide-c2 .padding-top100 {
        padding-top: 40px;
    }
    .why_res svg {
        margin: 30px 0px 0px;
    }
    .simple-article5 {
        padding: 5rem 0
    }

    .package_ico {
        margin: 20px auto 10px
    }

    .sample_stats {
        font-size: 18px;
        line-height: 2;
        padding-right: 20px;
        padding-left: 20px;

    }

    .sampleheader .blue_radius_sample {
        display: none;
    }

    .package_article {
        text-align: center;
    }

    #customer-stories-thumb {
        padding: 50px 10px
    }

    .faq_box {
        width: 90% !important;
    }

    .customers-anim .fright-wide-c {
        height: 300px;
        overflow: hidden
    }

    p.headercall {
        line-height: 2
    }

    .vvvv {
        transform: translateY(396px);
    }

    .solution {
        min-height: 480px
    }

    #feat-slsh p {
        display: block !important;
        text-align: center
    }

    .er-footer-buttons {
        text-align: center;
        padding: 30px 0px
    }

    .all-stories {
        left: 20px;
        top: 255px;
    }

    .er-header-logo {
        text-align: center;
    }

    .test-bg {
        padding: 0rem 0 3rem;
    }

    .test-bg .owl-nav {
        transform: translateY(35px)
    }

    .shop-banner-box {
        padding: 0 !important
    }

    .simple-article {
        padding: 5rem 0
    }

    .close2 {
        float: left;
        display: block;
        margin-top: 15px
    }

    .close2 span:nth-child(1) {
        width: 20px;
        height: 3px;
        background: #1c3c6e;
        display: block;
        border-radius: 3px;
        transform: rotate(45deg);
    }

    .close2 span:nth-child(2) {
        width: 20px;
        height: 3px;
        background: #1c3c6e;
        display: block;
        border-radius: 3px;
        transform: rotate(-45deg) translate(2px, -2px);
    }

    .lg-hide {
        display: block
    }

    .ul-box {
        position: fixed;
        top: 144px;
        background: white;
        height: 100%;
        right: 100%;
        width: 80%;
        transition: all 0.5s;
        text-align: right !important;
    }

    .ul-box-links li a {
        padding: 10px 40px !important;
        margin: 5px !important;
        display: block;
    }

    .ul-box a {
        text-align: right !important;
        padding: 10px 0px !important
    }

    .loginbar_mobile {
        display: block;
    }

    .portal_white {
        width: 100px;
        height: 30px;
        background: url('../images/portal-sprite.png') no-repeat right -1200px;
        margin: 5px 0px 25px;
        float: right;
    }

    .portal_white a {
        display: block;
        font-size: 0
    }

    .loginbar_mobile a.close {
        display: block;
        float: left;
        content: "x"
    }

    footer .awe-navbar {
        display: none;
    }

    .loginbar_mobile a.login1 {
        float: right;
        display: block;
        width: 33%;
        margin-left: 10px;
        padding: 8px;
        border-radius: 4px;
        font-size: 14px;
        text-align: center;
        color: white;
        padding: 10px;
        background: #379aca;
    }

    .loginbar_mobile a.register1 {
        background: #ffcc4d;
        float: left;
        padding: 10px;
        color: #111;
        display: block;
        width: 27%;
        padding: 10px;
        border-radius: 4px;
        font-size: 15px;
        text-align: center;
    }

    .all-stories {

    }

    #sync2 {
        position: static
    }

    #sync2 .owl-nav {
        display: none;
    }

    .price-table-tabs a {
        display: block;
        margin-top: 25px
    }

    .test-bg .owl-prev {
        right: -2%;
        top: 249px;
    }

    .test-bg .owl-next {
        left: 89%;
        top: 245px;
    }

    .stories-desc, .price-table-tabs {
        padding: 2rem !important;
    }

    .simple-feat-section, .simple-feat {
        padding: 2rem 10px !important;
    }

    .black-side .col-lg-10 {
        margin: 20px 0px 10px !important;
    }

    #sync2 {
        margin: 20px auto 0px !important;
    }

    #sync1,
    .banner-gif, .green-lined {
        display: none;
    }

    .mainheader .yellow-radius {
        top: 190px;
        left: 37%;
        height: 200px;
        width: 200px;
    }

    .top-nav {
        padding: 3rem 0;
        /* overflow: hidden; */
    }

    .metaportal {
        border-top: 1px solid #eee;
        padding: 25px 0px 15px;
    }

    .menu-button {
        display: block;
        /* position: fixed; */
        /* left: 15px; */
        border-radius: 4px;
        width: 30px;
        float: left;
        height: 30px;
    }

    .chapter1 img {
        width: 150px;
        height: 150px;
    }

    .testi-wrap {
        padding: 2rem 0
    }

    .topmenu {
        display: block;
        transition: all 0.5s;
        position: fixed;
        width: 81%;
        line-height:2;
        right: -100%;
        top: -20px;
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.25);
        overflow: hidden;
        /* padding-top: 15px; */
        background: white;
        z-index: 99999;
        height: 103%;
    }

    .topmenu li {
        display: block;
        padding: 0 !important;
        margin: 0px !important;
        text-align:  right !important;
    }

    a.getback {
        font-size: 12px;
        border-bottom: 1px solid #eee;
        margin-bottom: 15px;
        display: block;
        text-align: left !important;
        padding-left: 10px !important;
        margin-bottom: 20px !important;
    }

    .topmenu li a {
        padding: 13px;
        /* text-align: center; */
        display: block;
        font-size: 15px;
        margin: 0 20px;
        border-bottom: 1px solid #eee;
    }
    .topmenu li ul li  {

        padding:0px 0px 15px !important;
        /* margin: 0 50px !important; */
        border-bottom: none;
    }
    .topmenu li ul li a {
        padding: 13px;
        text-align: center;
        display: block;
        font-size: 15px;
        padding:0px 0px 5px !important;
        margin: 0px !important;
        border-bottom: none;
    }
    .metaportal {
        text-align: center;
        display: none;
    }

    .call_mobile {
        background: url('../images/portal-sprite.png') no-repeat left -1100px;
        display: block;
        /* width:30px; */
        height: 30px;
        float: left;
        padding: 0px 30px 0px 40px;
        /* margin-left:10px; */
        /* background: red; */
        margin: 5px 0px 0px 15px;
    }

    .metaportal a {
        margin: 0px 5px;
    }

    a.phone-no {
        padding: 0.5423rem 0rem 0rem 4rem;
    }
    .reseller_header {
        text-align: center;
        padding: 5rem 1rem 12rem;
    }
}

@media only screen and (max-width: 800px) {
    .footer_nav {
        display:none;
    }

    .shop_page .text-left {
        text-align: center !important;
    }
    .shop_iphone {
        float: none;
        margin: 30px auto 50px;
    }
    .fright-wide, .fleft-wide {
        overflow: hidden;
        text-align: center;
    }
    .fleft-wide-c2 .padding-top30 {
        padding-top:0;
    }
    .shop_header {
        padding: 5rem 0 10rem
    }
    .browser_shop {
        margin-top: 30px;
    }
    hgroup.black-side-title h3 {
        font-size: 24px;
    }
    .shop_page .package_table_item, .shop_page .package_table_item_vip {
        min-height: auto !important;
        height: auto !important;
        text-align: right !important;
    }
    .package_our_notice {
        padding: 10px 20px 30px;
        line-height: 2
    }

    .package_table_item header {
        padding: 1rem 0px;
        background: #f8f9f8;
        margin-bottom: 2.5rem;
    }

    .package_tetris {
        margin: 20px auto 20px
    }

    .sampleheader {
        padding: 5rem 0;
        min-height: auto;
    }

    .sampleheader .maintitle {
        margin: 20px 20px;
        text-align: center;
        font-size: 20px;
    }

    .package_list_p {
        min-height: auto !important
    }

    #sample_slide .yellowbtn {
        top: 298px;
        left: 20px;
    }

    .dashedbtn {
        margin-right: 20px
    }

    .browser, .testimonial_sample {
        margin: 0px 0px 40px;
        min-height: 230px !important
    }

    .sample_item_desc {
        padding: 40px 0px 0px;
    }

    .package_contact_us .dashedbtn,
    .package_table_item a {
        display: block;
        margin: 0px 30px
    }

    .package_article img {
        margin: 40px auto 30px !important
    }
    .theme_feat .dr_ico {
        margin: 50px auto 15px;
    }
    .chapter1 img {
        width: 100px;
        height: 100px;
    }

    #sync1 {
        width: 100%;
    }

    .tetris-bg .supico {
        margin: 50px auto 30px;
    }

    #feat-slsh:before,
    #feat-slsh:after {
        display: none;
    }

    .package_contact_us_phone {
        margin: 0px 0px !important;
    }

    .price_package_blue_tet .padding-top40 {
        padding-top: 0px !important;
    }

    .price_package_blue_tet {
        padding: 5rem 0 !important;
    }

    .price_package_blue_tet h5 {
        margin: 0px 0px 10px;
        font-size: 18px;
    }

    .price_package_blue_tet p, .price_package_blue_tet h4 {
        font-size: 14px !important;
    }

    .price_package_blue_tet .package_contact_us_phone {
        transform: translateY(-20px);
    }

    .price_package_blue_tet .supico {
        margin: 50px auto 15px !important;
    }
}
.banner {
    background: url('../images/portal_bg.gif') repeat-x;
    text-align:center;
    width:100%;
}
.banner img {
    width:100%;
}
.banner-mob {
    display:none;
}
@media (max-width: 575px) {
        .top-nav {
        padding: 2rem 0 0 !important
    }

    .loginbar_mobile .login1 {
    width:48% !important;
    display:Block;
    margin:0px 1% !important;
    float: right !important;
}
    .loginbar_mobile .register1 {
    width:98% !important;
    display:Block;
    margin:15px 1% 0px !important;
    float: none;
    clear:both;

}
 .call_mobile {
        padding: 2px 00px 0px 40px;
        margin: 5px 0px 0px 15px;
        font-size:15px
    }
    .topmenu > li > ul {
        display:none
    }

    .get_shop a:nth-child(1) {
        display: block;
        margin-bottom: 40px;
    }
    .theme_preview_item .hover_theme_name {
        right: 34%;
        top: 240px
    }
    .theme_desc {
        padding: 80px 20px 30px
    }
    .shop_theme_gallery {
        margin-bottom: 40px;
    }

    .banner {
        display:none;
    }
    .banner-mob {
        display:block;
        width:100%;
        text-align:center;
    }
    .banner-mob img {
        width:100%;
        height:auto;
    }
}

/** footer **/
.footer_nav {
    background: url("../img/dotted2.gif") repeat-x bottom #313140;
    font-weight: 300
}
.footer_nav ul {
    width: 60%;
    margin: 0px auto;
}
.footer_nav li a {
    text-align: center;
    display: block;
    padding: 2rem 2rem;
    color: rgba(255,255,255,0.8);
    border-bottom:2px solid #313140
}
.footer_nav li a:hover {
    color: #FDDCA3;
    border-bottom: 2px solid #FDDCA3
}
.footer_nav li svg {
    display: block;
    margin: 0px auto 8px;
}
.footer_nav li a i{
    display: block;
    font-size: 28px;
    margin: 5px auto;
}
.footer_nav li.relative:before {
    background: rgba(16, 16, 20, 0.1);
    display: block;
    content:"";
    width: 90%;
    position: absolute;
    height: 80%;
    border-radius: 4px;
    z-index:0;
    margin: 10% 5% 0 0
}
.footer_li i {
    float: right;
    display: block;
    margin-left: 15px;
    font-size: 24px;
    transform: translateY(-3px);
    color: rgba(255,255,255,0.5)
}
.footer_tra {
    background: rgba(255, 255, 255, 0.1);
    color: #eee;
    padding: .5em 1.5em;
    border-radius: 3px;
}
.footer_tra:hover {
    background: rgba(255,255,255,0.2);
    color: #fff
}
.copyright {
    color: rgba(255,255,255,0.5);
    padding: 35px 0px 0px;
    margin-top: 35px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.social-box {
    font-size: 26px;
    line-height: 1;
}
.social-box a:hover{
    color: white;
}
.footer_body {
    background: #2D2D39;
    padding: 3.5rem 0 2.25rem;
    color: rgba(255,255,255,0.8)
}
.footer_body li .small {
    font-size: 13px;
    color: #aaa;
    border-bottom: 1px dashed #555
}
.footer_body h3{
    color: #ccc;
    line-height:40px;
}
.h3_has_logo:before {
    background: url('../img/sprite.png') no-repeat right top;
    display: block;margin-left: 10px;
    width: 25px;
    content:"";
    float: right;
    height: 40px;
}
.footer_li {
    padding: 25px 0px 0px;
    color: rgba(255,255,255,0.7)
}
.footer_li li {
    padding: 0px 0px 15px;
    font-weight: 200;
    font-size:15px;
}
.footer_li a  {
    color: rgba(255,255,255,0.7)
}

.footer_li a:hover  {
    color: white
}

.show-contact {
    position: fixed; /* right: auto; */
    left: 50%;
    padding: 1;
    top: 50%;
    overflow: hidden;
    width: 960px;
    height: auto;
    z-index: 9999;
    transform: translate(-50%, -50%) scale(1); /* background:white; */
    display: none;
}
.show-contact-left {
    position: relative;
    padding: 75px 40px;
    background: linear-gradient(to bottom, #345BDC , #1729AA);
}
.show-contact-left:before {
    content:"";
    width: 280px;
    height: 480px;
    position: absolute;
    z-index: 0;
    left: -50px;
    top: 0;
    background: #4b64d80f;
    transform: skew(15deg);
}
.show-contact-right:before {
    content:"";
    width: 280px;
    height: 580px;
    position: absolute;
    z-index: 0;
    right: -50px;
    top: 0;
    background: linear-gradient(to bottom, white,  rgba(65, 95, 235, 0.05));
    transform: skew(-15deg);
}
.yellowtouch {
	    background-color: #FFD262;
		color: #222;
		padding: 5px 15px;
		border-radius: 100px;
		display: inline-block;
}
.form_input_row i {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
}
.knockout-around {
    position: relative;
    z-index: 10;
    font-size:20px;
    color: white;
}
.knockout-around p:nth-child(1){
    font-size:15px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
}
.form_adres {
    color: white;
    font-size: 16px;
    font-weight: 200
}
.form_adres i {
    font-size: 20px;
    margin-left: 10px;
    display: inline-block;
}
.phone-ico-2:hover span {
    width: 150px;
    opacity: 1;
}
  .d-lg-flex {
display: flex 
  }

@media (max-width:1130px) {
.topslider {
 clear:both !important;
 z-index:5
}
.portal_index .mainheader {
    margin:0rem 1rem
}
.blue-radius {
    display:none
}
.yellow-radius {
display:none 
}
a.loginnow {
color: #777;
padding:5px 5px;
}
.awe-navbar-body > li {
    margin: 0px 2px;
}
a.phone-no {
    color:#999;
}
.top-nav {
    box-shadow:0px 5px 10px rgba(0,0,0,0.1);
}
}