/*
Copyright (C) Xantec Solutions <hello@xantec.com.my>
This file is part of bigbrother, cannot be copied and/or 
distributed without the express permission of Xantec Solutions
*/
/* 
    Created on : Apr 25, 2017, 3:30:33 PM
    Author     : Xantec
*/

* {
    border: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box; }

body {
    line-height: 1.14;
    color: #333;
    overflow: hidden;
    font-family: Quicksand;
    font-size: 16px; }

.hideNav {
    overflow-y: scroll; }

a {
    cursor: pointer; }

button {
    outline: none;
    cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
    font-family: "Fredericka the Great";
    text-align: center;
    margin-bottom: 15px;
    font-weight: normal; }
h1 { font-size: 40px; }
h2 { font-size: 36px; }
h3 { font-size: 32px; }
h4 { font-size: 28px; }
h5 { font-size: 24px; }
h6 { font-size: 20px; }

img {
    display: block;
    max-width: 100%;
    margin: 0 auto; }

p {
    text-align: justify;
    line-height: 1.5;
    letter-spacing: 1px; }

.page {
    position: relative;
    overflow: hidden;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.page > div {
    opacity: 0;
    filter: Alpha(Opacity=0); }
.pace-done .page > div {
    opacity: 1;
    filter: Alpha(Opacity=100); }

.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none; }

.pace.pace-inactive .pace-progress {
    display: none; }

.pace .pace-progress {
    position: fixed;
    z-index: 2000;
    top: 30px;
    right: 30px;
    height: 5rem;
    width: 5rem;
    -webkit-transform: translate3d(0, 0, 0) !important;
    -ms-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important; }

.pace .pace-progress:after {
    display: block;
    position: absolute;
    top: 0;
    right: .5rem;
    content: attr(data-progress-text);
    font-family: "Fredericka the Great", sans-serif;
    font-weight: 100;
    font-size: 5rem;
    line-height: 1;
    text-align: right;
    color: #fff; }

.row {
    list-style: none;
    overflow: hidden;
    margin: 0 auto;
    max-width: 1024px; }

.row > li {
    position: relative;
    float: left;
    padding: 0 15px;
    min-height: 1px; }

.col0 { width: 0; }
.col1 { width: 8.333333%; }
.col2 { width: 16.666666%; }
.col3 { width: 25%; }
.col4 { width: 33.333333%; }
.col5 { width: 41.666666%; }
.col6 { width: 50%; }
.col7 { width: 58.333333%; }
.col8 { width: 66.666666%; }
.col9 { width: 75%; }
.col10 { width: 83.333333%; }
.col11 { width: 91.666666%; }
.col12 { width: 100%; }

.pushCol0 { margin-left: 0; }
.pushCol1 { margin-left: 8.333333%; }
.pushCol2 { margin-left: 16.666666%; }
.pushCol3 { margin-left: 25%; }
.pushCol4 { margin-left: 33.333333%; }
.pushCol5 { margin-left: 41.666666%; }
.pushCol6 { margin-left: 50%; }
.pushCol7 { margin-left: 58.333333%; }
.pushCol8 { margin-left: 66.666666%; }
.pushCol9 { margin-left: 75%; }
.pushCol10 { margin-left: 83.333333%; }
.pushCol11 { margin-left: 91.666666%; }
.pushCol12 { margin-left: 100%; }

.owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0; }
.owl-nav i {
    position: absolute;
    top: 0;
    margin-top: -30px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg); }
.owl-nav .owl-prev i {
    left: 15px; }
.owl-nav .owl-next i {
    right: 15px; }
.owl-nav i:before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    opacity: .3;
    filter: alpha(Opacity=30);
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.owl-nav > div:hover > i:before {
    opacity: 1;
    filter: alpha(Opacity=100); }
.owl-nav .owl-prev i:before {
    border-top: 15px transparent solid;
    border-right: 15px transparent solid;
    border-bottom: 15px #efb51a solid;
    border-left: 15px #efb51a solid; }
.owl-nav .owl-next i:before {
    border-top: 15px #efb51a solid;
    border-right: 15px #efb51a solid;
    border-bottom: 15px transparent solid;
    border-left: 15px transparent solid; }
.owl-nav i:after {
    content: "";
    position: absolute;
    top: 15px;
    right: 15px;
    display: block;
    width: 24px;
    height: 24px;
    background: #efb51a;
    margin: 3px;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.owl-nav .disabled i:before {
    border: 15px transparent solid; }
.owl-nav .disabled i:after {
    background: #000;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%; }

.owl-dots {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    text-align: center; }
.owl-dots .owl-dot {
    margin: 3px;
    display: inline-block; }
.owl-dots .owl-dot span {
    display: block;
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    box-shadow: 0 0 6px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 0 6px rgba(0,0,0,.3); }

.space {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: 400%;
    background: #080232;
    background: -webkit-radial-gradient(circle, #87ceeb, #080232);
    background: -o-radial-gradient(circle, #87ceeb, #080232);
    background: -moz-radial-gradient(circle, #87ceeb, #080232);
    background: radial-gradient(circle, #87ceeb, #080232); }

.stars {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    bottom: -25%; }

.page > .space {
    opacity: 1;
    filter: Alpha(Opacity=100); }

.hidespace .space,
.hidespace .stars {
    z-index: 1; }

.stars i {
    position: absolute;
    color: #fff;
    opacity: 1;
    filter: Alpha(Opacity=100);
    transition: 1s ease;
    -moz-transition: 1s ease;
    -o-transition: 1s ease;
    -webkit-transition: 1s ease; }
.stars i:nth-child(1n+0) {
    transition-delay: .6s;
    -moz-transition-delay: .6s;
    -o-transition-delay: .6s;
    -webkit-transition-delay: .6s; }
.stars i:nth-child(2n+0) {
    transition-delay: .7s;
    -moz-transition-delay: .7s;
    -o-transition-delay: .7s;
    -webkit-transition-delay: .7s; }
.stars i:nth-child(3n+0) {
    transition-delay: .5s;
    -moz-transition-delay: .5s;
    -o-transition-delay: .5s;
    -webkit-transition-delay: .8s; }
.stars i:nth-child(4n+0) {
    transition-delay: .5s;
    -moz-transition-delay: .5s;
    -o-transition-delay: .5s;
    -webkit-transition-delay: .9s; }
.stars i:nth-child(5n+0) {
    transition-delay: 1s;
    -moz-transition-delay: 1s;
    -o-transition-delay: 1s;
    -webkit-transition-delay: 1s; }
.pace-running .stars i {
    opacity: 0;
    filter: Alpha(Opacity=0);
    top: 40% !important;
    left: 50% !important; }

.home {
    position: relative;
    z-index: 10;
    transition: 1s ease;
    -moz-transition: 1s ease;
    -o-transition: 1s ease;
    -webkit-transition: 1s ease;
    transition-delay: .5s;
    -moz-transition-delay: .5s;
    -o-transition-delay: .5s;
    -webkit-transition-delay: .5s; }
.home img {
    position: fixed;
    left: 0;
    right: 0;
    max-width: 480px; }

.intro {
    position: fixed;
    top: 50%;
    bottom: 0;
    left: -100%;
    right: -100%; }
.intro h1 {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 30px;
    color: #fff;
    opacity: 0;
    filter: Alpha(Opacity=0); }

.team {
    position: relative;
    z-index: 10; }
.team h1 {
    margin-bottom: 60px;
    color: #fff; }
.team .image {
    margin: 0 6px; }
.team .image img {
    max-width: 150px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%; }
.team h6 {
    color: #fff;
    margin: 15px 0;
    text-align: center; }
.team p {
    text-align: center;
    line-height: 1.14;
    height: 108px;
    color: #fff; }

.sky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    filter: Alpha(Opacity=0);
    background: #87ceeb; }

.client {
    position: relative;
    z-index: 10;
    margin-top: 150px;
    padding-top: 120px; }
.client h1 {
    margin-bottom: 60px; }

.topcloud {
    position: absolute;
    overflow: hidden;
    top: -245px;
    left: 0;
    right: 0;
    height: 365px; }
.topcloud > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-image: url(img/cloud-top.png);
    background-repeat: repeat-x;
    background-position: left bottom; }

.bottomcloud {
    position: relative;
    overflow: hidden;
    height: 128px; }

.centercloud {
    background: #fff; }
.centercloud > .row {
    max-width: none;
    margin: 0 15px; }

.bottomcloud > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #87ceeb;
    background-image: url(img/cloud-bottom.png);
    background-repeat: repeat-x;
    background-position: left top; }

@keyframes moveCloud {
    from { width: 3600px; }
    to { width: 7200px; }
}
@-webkit-keyframes moveCloud {
    from { width: 3600px; }
    to { width: 7200px; }
}
.cloud1 {
    animation: moveCloud 83s infinite linear;
    -moz-animation: moveCloud 83s infinite linear;
    -webkit-animation: moveCloud 83s infinite linear; }
.cloud2 {
    opacity: .6;
    filter: Alpha(Opacity=60);
    animation: moveCloud 149s infinite linear;
    -moz-animation: moveCloud 149s infinite linear;
    -webkit-animation: moveCloud 149s infinite linear; }
.cloud3 {
    opacity: .3;
    filter: Alpha(Opacity=30);
    animation: moveCloud 199s infinite linear;
    -moz-animation: moveCloud 199s infinite linear;
    -webkit-animation: moveCloud 199s infinite linear; }

.portfolio {
    position: relative;
    z-index: 10;
    padding: 120px 6px 0;
    overflow: hidden;
    background: #87ceeb;
    background: -webkit-linear-gradient(#87ceeb, #fff);
    background: -o-linear-gradient(#87ceeb, #fff);
    background: -moz-linear-gradient(#87ceeb, #fff);
    background: linear-gradient(#87ceeb, #fff); }
.portfolio h1 {
    padding-bottom: 60px; }
.portfolio .owl-carousel .owl-nav {
    top: 210px; }
.portfolio .owl-carousel a {
    overflow: hidden;
    display: block;
    color: #fff;
    position: relative; }
.portfolio .owl-carousel a:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 480px;
    opacity: 0;
    filter: Alpha(Opacity=0);
    z-index: 1;
    background: #000;
    background: rgba(0,0,0,.3);
    background: -webkit-linear-gradient(#000, transparent);
    background: -o-linear-gradient(#000, transparent);
    background: -moz-linear-gradient(#000, transparent);
    background: linear-gradient(#000, transparent);
    transition: .3s ease;
    -moz-transition: .3s ease;
    -o-transition: .3s ease;
    -webkit-transition: .3s ease; }
.portfolio .owl-carousel a:hover:before {
    opacity: 1;
    filter: Alpha(Opacity=100); }
.portfolio .owl-carousel a span,
.portfolio .owl-carousel a b,
.portfolio .owl-carousel a u,
.portfolio .owl-carousel a i {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    filter: Alpha(Opacity=0);
    z-index: 1; }
.portfolio .owl-carousel a:hover span,
.portfolio .owl-carousel a:hover b,
.portfolio .owl-carousel a:hover u,
.portfolio .owl-carousel a:hover i {
    top: 0;
    opacity: 1;
    filter: Alpha(Opacity=100); }
.portfolio .owl-carousel a span {
    margin-top: 30px;
    height: 48px;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transition: .3s ease;
    -moz-transition: .3s ease;
    -o-transition: .3s ease;
    -webkit-transition: .3s ease; }
.portfolio .owl-carousel a b {
    margin-top: 96px;
    transition: .6s ease;
    -moz-transition: .6s ease;
    -o-transition: .6s ease;
    -webkit-transition: .6s ease; }
.portfolio .owl-carousel a u {
    margin-top: 117px;
    transition: .9s ease;
    -moz-transition: .9s ease;
    -o-transition: .9s ease;
    -webkit-transition: .9s ease; }
.portfolio .owl-carousel a i {
    margin-top: 150px;
    border: 2px #fff solid;
    color: #fff;
    width: 36px;
    line-height: 32px;
    font-size: 18px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    transition: 1.2s ease;
    -moz-transition: 1.2s ease;
    -o-transition: 1.2s ease;
    -webkit-transition: 1.2s ease; }
.portfolio .owl-carousel a i:hover {
    background: #fff;
    color: #000; }

.earth {
    position: relative;
    margin: 0 -6px;
    padding-top: 210px; }
.earth .land {
    position: relative;
    border-top: 3px #46d967 solid;
    background: #84591c;
    height: 84px; }
.earth .trees {
    position: absolute;
    bottom: 84px;
    left: 33.333333%;
    right: 0; }
.earth .trees i {
    position: absolute;
    color: #00a572;
    bottom: 0;
    line-height: 1;
    text-align: center; }
.mountain {
    position: absolute;
    bottom: -150px;
    right: -60px; }
.mountain .fa-caret-up {
    font-size: 800px;
    color: #46d967; }
.mountain .fa-caret-up:first-child {
    position: absolute;
    bottom: 0;
    right: 320px;
    font-size: 600px; }
.signalmachine {
    position: absolute; }
.sender {
    opacity: .9;
    filter: Alpha(Opacity=90);
    bottom: 84px;
    left: 96px; }
.receiver {
    bottom: 81px;
    left: 180px; }
.signalmachine .dish {
    position: absolute;
    border-bottom: 15px  #666 solid;
    height: 45px;
    width: 120px;
    background: #ccc;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%; }
.sender .dish {
    bottom: 132px;
    right: 63px;
    transform: rotate(-12deg);
    -moz-transform: rotate(-12deg);
    -ms-transform: rotate(-12deg);
    -webkit-transform: rotate(-12deg); }
.receiver .dish {
    bottom: 78px;
    right: -9px;
    transform: rotate(24deg);
    -moz-transform: rotate(24deg);
    -ms-transform: rotate(24deg);
    -webkit-transform: rotate(24deg); }
.signalmachine .dish i {
    position: absolute;
    display: block;
    border-top: 2px #666 solid;
    border-left: 2px #666 solid;
    width: 60px;
    height: 60px;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 0;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg); }
.signalmachine .dish span {
    position: absolute;
    width: 6px;
    height: 12px;
    top: -18px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: #666; }
.signalmachine .dish span:before,
.signalmachine .dish span:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%; }
.sender .dish span:before,
.sender .dish span:after {
    border: 1px #ff0000 solid; }
.receiver .dish span:before,
.receiver .dish span:after {
    border: 1px #00ff00 solid; }
@keyframes waveout {
    from { opacity: 1; filter: Alpha(Opacity=100); width: 0; height: 0; top: 2px; left: 2px; }
    to { opacity: 0; filter: Alpha(Opacity=0); width: 200px; height: 200px; top: -98px; left: -98px; }
}
@-webkit-keyframes waveout {
    from { opacity: 1; filter: Alpha(Opacity=100); width: 0; height: 0; top: 2px; left: 2px; }
    to { opacity: 0; filter: Alpha(Opacity=0); width: 200px; height: 200px; top: -98px; left: -98px; }
}
.sender .dish span:before {
    animation: waveout 2.1s infinite;
    -moz-animation: waveout 2.1s infinite;
    -webkit-animation: waveout 2.1s infinite; }
.sender .dish span:after {
    animation: waveout 2.1s infinite;
    -moz-animation: waveout 2.1s infinite;
    -webkit-animation: waveout 2.1s infinite;
    animation-delay: .3s;
    -moz-animation-delay: .3s;
    -webkit-animation-delay: .3s; }
@keyframes wavein {
    from { opacity: 0; filter: Alpha(Opacity=0); width: 200px; height: 200px; top: -98px; left: -98px; }
    to { opacity: 1; filter: Alpha(Opacity=100); width: 0; height: 0; top: 2px; left: 2px; }
}
@-webkit-keyframes wavein {
    from { opacity: 0; filter: Alpha(Opacity=0); width: 100px; height: 100px; top: -48px; left: -48px; }
    to { opacity: 1; filter: Alpha(Opacity=100); width: 0; height: 0; top: 2px; left: 2px; }
}
.receiver .dish span:before {
    animation: wavein 2.1s infinite;
    -moz-animation: wavein 2.1s infinite;
    -webkit-animation: wavein 2.1s infinite;
    animation-delay: .3s;
    -moz-animation-delay: .3s;
    -webkit-animation-delay: .3s; }
.receiver .dish span:after {
    animation: wavein 2.1s infinite;
    -moz-animation: wavein 2.1s infinite;
    -webkit-animation: wavein 2.1s infinite;
    animation-delay: .6s;
    -moz-animation-delay: .6s;
    -webkit-animation-delay: .6s; }

.dishstand {
    position: absolute;
    width: 120px;
    height: 90px; }
.sender .dishstand {
    bottom: 45px;
    right: 60px; }
.receiver .dishstand {
    bottom: -3px;
    right: 0; }

.dishstand span {
    position: absolute;
    display: block;
    width: 30px;
    height: 90px; }
.dishstand .left {
    left: 36px;
    border-left: 3px #666 solid;
    transform: rotate(12deg);
    -moz-transform: rotate(12deg);
    -ms-transform: rotate(12deg);
    -webkit-transform: rotate(12deg); }
.dishstand .right {
    right: 36px;
    border-right: 3px #666 solid;
    transform: rotate(-12deg);
    -moz-transform: rotate(-12deg);
    -ms-transform: rotate(-12deg);
    -webkit-transform: rotate(-12deg); }
.dishstand span:before {
    content: "";
    position: absolute;
    height: 3px;
    background: #666; }
.dishstand .left:before {
    top: 15px;
    left: 0;
    width: 33px;
    transform: rotate(-12deg);
    -moz-transform: rotate(-12deg);
    -ms-transform: rotate(-12deg);
    -webkit-transform: rotate(-12deg); }
.dishstand .right:before {
    top: 45px;
    right: 0;
    width: 45px;
    transform: rotate(12deg);
    -moz-transform: rotate(12deg);
    -ms-transform: rotate(12deg);
    -webkit-transform: rotate(12deg); }
.dishstand span:after {
    content: "";
    position: absolute;
    height: 3px;
    background: #666; }
.dishstand .left:after {
    top: 30px;
    left: 0;
    width: 48px;
    transform: rotate(27deg);
    -moz-transform: rotate(27deg);
    -ms-transform: rotate(27deg);
    -webkit-transform: rotate(27deg); }
.dishstand .right:after {
    top: 30px;
    right: 0;
    width: 48px;
    transform: rotate(-27deg);
    -moz-transform: rotate(-27deg);
    -ms-transform: rotate(-27deg);
    -webkit-transform: rotate(-27deg); }

.signalmachine .fa-industry {
    position: relative;
    z-index: 1;
    color: #666;
    padding-right: 72px; }
.sender .fa-industry {
    font-size: 114px; }
.receiver .fa-industry {
    font-size: 120px; }

.sender .channel {
    position: absolute;
    height: 36px;
    left: -99px;
    width: 144px;
    top: 100%;
    border-right: 6px #666 solid;
    border-bottom: 6px #666 solid; }
@keyframes signalin {
    0% { left: -12px; top: 27px; }
    75% { left: 135px; top: 27px; }
    100% { left: 135px; top: -12px; }
}
@-webkit-keyframes signalin {
    0% { left: -12px; top: 27px; }
    75% { left: 135px; top: 27px; }
    100% { left: 135px; top: -12px; }
}
.sender .channel:before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px #666 solid;
    background: #ff0000;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    animation: signalin 2.1s infinite;
    -moz-animation: signalin 2.1s infinite;
    -webkit-animation: signalin 2.1s infinite; }
.receiver .channel {
    position: absolute;
    height: 81px;
    width: 6px;
    background: #666;
    left: 54px;
    top: 100%; }
@keyframes signalout {
    from { top: -12px; }
    to { top: 100%; }
}
@-webkit-keyframes signalout {
    from { top: -12px; }
    to { top: 100%; }
}
.receiver .channel:before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    left: -3px;
    border: 1px #666 solid;
    background: #00ff00;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    animation: signalout 2.1s infinite;
    -moz-animation: signalout 2.1s infinite;
    -webkit-animation: signalout 2.1s infinite; }

.feature {
    position: relative;
    z-index: 1;
    overflow: hidden; }

.feature .owl-carousel {
    position: fixed;
    top: 0;
    right: 60px;
    bottom: 0;
    left: 0;
    width: auto; }

.feature .item {
    position: relative;
    overflow: hidden; }
.feature .item .description {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
.feature .item .preview {
    position: absolute;
    top: 50%;
    right: 60%;
    margin: -160px 60px 0 0;
    width: 320px;
    height: 320px;
    z-index: 1;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.feature .item .preview.fullscreen {
    top: 0;
    right: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius:0; }
.feature .item .preview span {
    cursor: pointer;
    position: absolute;
    top: 120px;
    left: 120px;
    width: 80px;
    height: 80px;
    text-align: center;
    background: #000;
    background: rgba(0,0,0,.1);
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    transition: .2s ease;
    -moz-transition: .2s ease;
    -o-transition: .2s ease;
    -webkit-transition: .2s ease; }
.feature .item .preview:hover span {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7); }
.feature .item .preview.fullscreen span {
    top: 15px;
    left: 15px;
    width: 50px;
    height: 50px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg); }
.feature .item .preview.fullscreen:hover span {
    top: 15px;
    left: 15px;
    width: 50px;
    height: 50px; }
.feature .item .preview span:before,
.feature .item .preview span:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.feature .item .preview span:before {
    width: 30px;
    height: 2px;
    margin: -1px 0 0 -15px; }
.feature .item .preview span:after {
    width: 2px;
    height: 30px;
    margin: -15px 0 0 -1px; }
.feature .item .preview:hover span:before {
    width: 60px;
    margin-left: -30px; }
.feature .item .preview:hover span:after {
    height: 60px;
    margin-top: -30px; }
.feature .item .preview.fullscreen:hover span:before {
    width: 30px;
    margin-left: -15px; }
.feature .item .preview.fullscreen:hover span:after {
    height: 30px;
    margin-top: -15px; }
.feature .item h1 {
    position: absolute;
    text-align: left;
    left: 40%;
    right: 85px;
    bottom: 50%;
    color: #fff; }
.feature .item p {
    position: absolute;
    text-align: left;
    top: 50%;
    left: 40%;
    max-width: 640px;
    font-size: 20px;
    right: 85px;
    color: #fff; }

.feature .owl-dots {
    height: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
    transition-delay: .5s;
    -moz-transition-delay: .5s;
    -o-transition-delay: .5s;
    -webkit-transition-delay: .5s; }
.hideFeatures .feature .owl-dots {
    visibility: hidden;
    opacity: 0;
    filter: Alpha(Opacity=0); }

.feature .owl-dots .owl-dot {
    position: absolute;
    margin: 0;
    width: 25%;
    height: 50%; }
.feature.portrait .owl-dots .owl-dot {
    width: 50%;
    height: 25%; }
.feature .owl-dots .icon0 { top: 0; left: 0; }
.feature .owl-dots .icon1 { top: 0; left: 25%; }
.feature .owl-dots .icon2 { top: 0; left: 50%; }
.feature .owl-dots .icon3 { top: 0; left: 75%; }
.feature .owl-dots .icon4 { top: 50%; left: 0; }
.feature .owl-dots .icon5 { top: 50%; left: 25%; }
.feature .owl-dots .icon6 { top: 50%; left: 50%; }
.feature .owl-dots .icon7 { top: 50%; left: 75%; }
.feature.portrait .owl-dots .icon0 { top: 0; left: 0; }
.feature.portrait .owl-dots .icon1 { top: 0; left: 50%; }
.feature.portrait .owl-dots .icon2 { top: 25%; left: 0; }
.feature.portrait .owl-dots .icon3 { top: 25%; left: 50%; }
.feature.portrait .owl-dots .icon4 { top: 50%; left: 0; }
.feature.portrait .owl-dots .icon5 { top: 50%; left: 50%; }
.feature.portrait .owl-dots .icon6 { top: 75%; left: 0; }
.feature.portrait .owl-dots .icon7 { top: 75%; left: 50%; }
.feature .owl-dots .owl-dot.active {
    z-index: 2; }
.hideFeatures .feature .owl-dots .owl-dot.active {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.feature .owl-dots .owl-dot span {
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: none;
    -webkit-box-shadow: none; }
.feature .owl-dots .owl-dot i {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50%;
    display: block;
    color: #fff;
    font-size:64px;
    opacity: .3;
    filter: Alpha(Opacity=30); }
.feature .owl-dots .owl-dot p {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 18px;
    padding: 0 15px; }
.feature .owl-dots .owl-dot a {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    color: #fff;
    opacity: .3;
    filter: Alpha(Opacity=30);
    width: 120px;
    display: block;
    text-align: center;
    padding: 6px 0;
    z-index: 1;
    margin: 66px auto 0; }

.feature .item p a {
    position: relative;
    display: block;
    width: 180px;
    padding: 6px;
    font-size: 16px;
    opacity: .3;
    filter: Alpha(Opacity=30);
    color: #fff;
    margin-top: 15px; }

.feature .item p a:before,
.feature .owl-dots .owl-dot a:before {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    height: 1px;
    background: #fff;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.feature .item p a:hover:before,
.feature .owl-dots .owl-dot a:hover:before {
    right: -15px; }
.feature .item p a:after,
.feature .owl-dots .owl-dot a:after {
    content: "";
    position: absolute;
    width: 1px;
    height: 15px;
    background: #fff;
    bottom: -2px;
    right: 5px;
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.feature .item p a:hover:after,
.feature .owl-dots .owl-dot a:hover:after {
    right: -10px; }

.feature .item0 .preview,
.item0 .preview span:before,
.item0 .preview span:after,
.item0, .icon0, .skype {
    background-color: #3bb2d0; }
.feature .item1 .preview,
.item1 .preview span:before,
.item1 .preview span:after,
.item1, .icon1 , .training{
    background-color: #3887be; }
.feature .item2 .preview,
.item2 .preview span:before,
.item2 .preview span:after,
.item2, .icon2 {
    background-color: #8a8acb; }
.feature .item3 .preview,
.item3 .preview span:before,
.item3 .preview span:after,
.item3, .icon3, .whatsapp {
    background-color: #56b881; }
.feature .item4 .preview,
.item4 .preview span:before,
.item4 .preview span:after,
.item4, .icon4, .user-guide {
    background-color: #41afa5; }
.feature .item5 .preview,
.item5 .preview span:before,
.item5 .preview span:after,
.item5, .icon5 {
    background-color: #f9886c; }
.feature .item6 .preview,
.item6 .preview span:before,
.item6 .preview span:after,
.item6, .icon6, .phone {
    background-color: #e55e5e; }
.feature .item7 .preview,
.item7 .preview span:before,
.item7 .preview span:after,
.item7, .icon7, .email {
    background-color: #ff9f1c; }

.showMoreFeatures {
    overflow: hidden; }

.morefeature {
    position: fixed;
    top: 0;
    left: 100%;
    z-index: 1;
    height: 100%;
    width: 100%;
    margin-left: -60px;
    background: #000;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }

.showMoreFeatures .morefeature {
    background: #fff;
    left: 0;
    margin-left: 0; }

.morefeature > a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60px;
    color: #fff;
    z-index: 1; }
.showMoreFeatures .morefeature > a {
    color: #333; }
.morefeature > a span {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: 45px;
    line-height: 60px;
    width: 60px;
    letter-spacing: 3px;
    white-space: nowrap;
    transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg); }
.morefeature > a button {
    position: absolute;
    bottom: 50%;
    margin-bottom: 75px;
    left: 23px;
    width: 15px;
    height: 1px;
    background: #fff;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.showMoreFeatures .morefeature > a button {
    background: #333; }
.morefeature > a button:before,
.morefeature > a button:after {
    content: "";
    position: absolute;
    top: -7px;
    left: 7px;
    background: inherit;
    height: 15px;
    width: 1px;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.morefeature:hover > a button {
    width: 30px;
    left: 15px; }
.morefeature:hover > a button:before {
    top: -12px;
    left: 24px;
    transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg); }
.morefeature:hover > a button:after {
    top: -2px;
    left: 24px;
    transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg); }

.morefeature .viewport {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto; }

.morefeature .items {
    max-width: 1114px;
    overflow: hidden;
    margin: 0 auto;
    padding: 30px 0 30px 90px; }

.morefeature .items ul {
    list-style: none;
    margin: 0;
    float: left;
    width: 25%; }

.morefeature .items ul li {
    position: relative;
    line-height: 16px;
    font-size: 12px;
    margin-bottom: 15px;
    padding: 7px 30px 7px 45px; }
.morefeature .items ul li:before {
    content: "";
    background: #f4f4f1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 30px; }
.morefeature .items ul li:after {
    content: "";
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 0;
    height: 1px;
    background: #f4f4f1; }
.morefeature .items ul li i {
    color: #ccc;
    position: absolute;
    top: 50%;
    left: 0;
    width: 30px;
    line-height: 30px;
    margin-top: -15px;
    text-align: center; }

.device {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f4f4f1;
    overflow: hidden;
    z-index: 1; }

.device .receiver .channel {
    top: 0;
    left: 120px; }

.device .router {
    position: absolute;
    top: 81px;
    left: 96px;
    background: #333;
    display: block;
    width: 108px;
    height: 33px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px; }

.device .router:before,
.device .router:after {
    content: "";
    background: #f4f4f1;
    position: absolute;
    top: 9px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%; }
.device .router:before { left: 9px; }
.device .router:after { left: 33px; }

.device .router .signal {
    position: absolute;
    width: 6px;
    height:66px;
    bottom: 0;
    right: 15px;
    background: #333;
    border-radius: 50% 50% 0 0;
    -moz-border-radius: 50% 50% 0 0;
    -webkit-border-radius: 50% 50% 0 0; }
.device .router .signal:before,
.device .router .signal:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 1px #00ff00 solid;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%; }
.device .router .signal:before {
    animation: waveout 2.1s infinite;
    -moz-animation: waveout 2.1s infinite;
    -webkit-animation: waveout 2.1s infinite; }
.device .router .signal:after {
    animation: waveout 2.1s infinite;
    -moz-animation: waveout 2.1s infinite;
    -webkit-animation: waveout 2.1s infinite;
    animation-delay: .3s;
    -moz-animation-delay: .3s;
    -webkit-animation-delay: .3s; }

.thedevice {
    position: absolute;
    top: -100%;
    left: -100%;
    right: -100%;
    bottom: -100%;
    transform: scale(.3);
    -moz-transform: scale(.3);
    -ms-transform: scale(.3);
    -webkit-transform: scale(.3); }

.thedevice .screen {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border: 60px #333 solid; }

.thedevice .screen:before {
    content: "";
    position: absolute;
    bottom: -150px;
    left: -150px;
    right: -150px;
    height: 60px;
    background: #333;
    border-radius: 0 0 30% 30%;
    -moz-border-radius: 0 0 30% 30%;
    -webkit-border-radius: 0 0 30% 30%; }
.thedevice.notPC .screen:before {
    bottom: -150px;
    height: 120px;
    left: -60px;
    right: -60px;
    border-radius: 0 0 30px 30px;
    -moz-border-radius: 0 0 30px 30px;
    -webkit-border-radius: 0 0 30px 30px; }
.thedevice.notPC.landscape .screen:before {
    width: 120px;
    left: auto;
    right: -150px;
    height: auto;
    top: -60px;
    bottom: -60px;
    border-radius: 0 30px 30px 0;
    -moz-border-radius: 0 30px 30px 0;
    -webkit-border-radius: 0 30px 30px 0; }
.thedevice.notPC .screen:after {
    content: "";
    position: absolute;
    background: #f4f4f1;
    width: 90px;
    height: 90px;
    bottom: -120px;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%; }
.thedevice.notPC.landscape .screen:after {
    bottom: auto;
    top: 50%;
    margin-top: -45px;
    left: auto;
    right: -120px; }

.thedevice .screen div {
    position: relative;
    background: #fff; }

.thedevice .screen div:before,
.thedevice .screen div:after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 0;
    width: 50%;
    z-index: 1;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.thedevice .screen div:after {
    left: 0;
    background: #08c6a2; }
.thedevice .screen div:before {
    right: 0;
    background: #826ea1;
    transition-delay: .1s;
    -moz-transition-delay: .1s;
    -o-transition-delay: .1s;
    -webkit-transition-delay: .1s; }
.thedevice.loaded .screen div:before,
.thedevice.loaded .screen div:after {
    height: 100%;
}
.thedevice .screen div span {
    font-size: 128px;
    text-align: center;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -64px;
    line-height: 1;
    left: 0;
    right: 0; }

.package {
    position: relative;
    z-index: 10;
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
    filter: Alpha(Opacity=0);
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -wekbit-transition: .5s ease; }
.pace-done .page > .package {
    opacity: 0;
    filter: Alpha(Opacity=0);
}
.pace-done .page > .package.visible {
    visibility: visible;
    opacity: 1;
    filter: Alpha(Opacity=100); }

.package1 {
    background: #08c6a2; }
.package2 {
    background: #826ea1; }

.package .item {
    position: relative;
    color: #fff; }

.package .item img {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 320px; }

.package .package1 h1 {
    padding: 143px 0 22px; }
.package .package2 h1 {
    padding: 120px 0 0; }

.package .item ul {
    max-width: 340px;
    margin: 0 auto;
    list-style: none; }
.package .item .packagedetails {
    position: relative;
    padding: 30px 0 480px; }
.package .item .packagedetails ul li {
    position: relative;
    padding: 6px 0 6px 45px;
    margin-bottom: 10px; }
.package .item .packagedetails ul li i {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    opacity: .3;
    filter: Alpha(Opacity=30);
    line-height: 30px;
    text-align: center; }
.package .item .packagedetails p {
    text-align: center; }
.package .item .packagedetails .fa-plus {
    font-size: 64px;
    display: block;
    padding: 15px 0;
    text-align: center;
    opacity: .3;
    filter: Alpha(Opacity=30); }

.package .item .price {
    position: absolute;
    bottom: 360px;
    left: 0;
    right: 0;
    z-index: 1;
    text-align: center;
    padding: 6px 0;
    margin: 0 auto; }
.package .item .price b {
    font-family: "Fredericka the Great";
    font-weight: normal;
    font-size: 40px; }
.package .item .price u {
    position: absolute;
    top: 12px;
    right: 50%;
    margin-right: 60px; }
.package .item .price:before,
.package .item .price:after {
    content: "";
    position: absolute;
    background: #fff;
    height: 1px;
    opacity: .3;
    filter: Alpha(Opacity=30);
    background: -webkit-linear-gradient(left, transparent, #fff, transparent);
    background: -o-linear-gradient(right, transparent, #fff, transparent);
    background: -moz-linear-gradient(right, transparent, #fff, transparent);
    background: linear-gradient(to right, transparent, #fff, transparent); }
.package .item .price:before{
    top: 0;
    left: 90px;
    right: 90px; }
.package .item .price:after {
    bottom: 0;
    left: 30px;
    right: 30px; }

.package .item .price a {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 15px 0;
    font-size: 18px;
    margin: 0 auto;
    text-align: center;
    display: block; }
.package .item .price a:before {
    content: "";
    position: absolute;
    top: -75px;
    left: -75px;
    right: -75px;
    margin: 0 auto;
    width: 150px;
    height: 150px;
    background: #fff;
    opacity: .1;
    filter: Alpha(Opacity=10);
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg); }

.addon {
    position: fixed;
    bottom: -333px;
    left: 50%;
    z-index: 1;
    padding: 60px 0 12px;
    width: 320px;
    margin-left: -141px;
    color: #fff;
    background: #000;
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    box-shadow: 0 0 6px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 0 6px rgba(0,0,0,.3);
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.addon.unlock {
    position: absolute; }
.addon.showit {
    bottom: 15px;
    margin-left: -160px;
    transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }

.addon ul {
    list-style: none;
    opacity: 0;
    filter: Alpha(Opacity=0); }
.addon.showit ul {
    opacity: 1;
    filter: Alpha(Opacity=100); }
.addon ul li {
    position: relative;
    padding: 6px 30px; }
.addon ul li:before {
    content: "";
    position: absolute;
    left: 30px;
    right: 30px;
    top: 15px;
    display: block;
    opacity: .3;
    filter: Alpha(Opacity=30);
    border-bottom: 1px #fff dotted; }
.addon ul li span {
    position: relative;
    padding-right: 6px;
    background: #000; }
.addon ul li > b {
    position: relative;
    background: #000;
    letter-spacing: 1px;
    float: right; }
.addon ul li > b span {
    font-size: 12px;
    position: absolute;
    top: 1px;
    right: 100%;
    padding-right: 6px;
    padding-left: 6px;
    font-weight: normal; }

.addon > a {
    position: absolute;
    top: 9px;
    right: -30px;
    z-index: 1;
    color: #fff;
    width: 150px;
    height: 70px;
    display: block;
    text-align: center;
    font-size: 18px;
    margin: 0 auto;
    padding: 35px 0 15px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg); }
.addon > a span {
    position: absolute;
    right: 44px;
    top: 35px;
    white-space: nowrap;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.addon.showit > a span {
    top: 0;
    opacity: 0;
    filter: Alpha(Opacity=0); }
.addon > a button {
    position: absolute;
    bottom: 50px;
    left: 75px;
    width: 1px;
    height: 15px;
    background: #fff;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.addon > a button:before,
.addon > a button:after {
    content: "";
    position: absolute;
    top: 7px;
    left: -7px;
    background: inherit;
    height: 1px;
    width: 15px;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.addon > a:hover button {
    height: 30px; }
.addon.showit > a:hover button {
    transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg); }
.addon > a:hover button:before {
    top: 9px;
    left: -25px;
    width: 30px;
    transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg); }
.addon > a:hover button:after {
    top: 9px;
    left: -4px;
    width: 30px;
    transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg); }

.support {
    position: relative;
    z-index: 10;
    background: #fff;
    font-size: 18px;
    padding: 120px 0 60px; }

.support p {
    text-align: center;
    padding: 0 15px; }

.support .row {
    padding: 3px;
    margin-top: 15px;
    margin-bottom: 60px; }
.support .row > li {
    padding: 3px; }

.support .row > li div,
.support .row > li a {
    display: block;
    height: 142px;
    margin: 0 auto;
    overflow: hidden;
    position: relative; }
.support .row > li span {
    position: absolute;
    bottom: 66.666666%;
    color: #fff;
    left: 0;
    right: 0;
    padding: 0 15px; }
.support .row > li i {
    font-size: 128px;
    position: absolute;
    line-height: 144px;
    width: 144px;
    text-align: center;
    bottom: -30px;
    right: -30px;
    opacity: .1;
    filter: Alpha(Opacity=10);
    color: #fff;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.support .row > li a:hover i {
    font-size: 30px;
    bottom: 0;
    right: 0;
    line-height: 60px;
    width: 60px;
    opacity: 1;
    filter: Alpha(Opacity=100); }
.support .row > li ul {
    position: absolute;
    top: 60px;
    left: 21px;
    color: #fff;
    list-style: none; }
.support .row > li ul li {
    position: relative;
    padding: 3px 18px;
    letter-spacing: 1px;
    opacity: .7;
    filter: Alpha(Opacity=70); }
.support .row > li ul li:before {
    content: "";
    position: absolute;
    top: 13px;
    left: 0;
    height: 1px;
    width: 12px;
    background: #fff;
    opacity: .7;
    filter: Alpha(Opacity=70); }
.support .row > li ul li:after {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    height: 7px;
    width: 6px;
    border-top: 1px #fff solid;
    border-bottom: 1px #fff solid;
    opacity: .7;
    filter: Alpha(Opacity=70); }

.methodology {
    position: relative;
    z-index: 10;
    padding: 120px 0 0;
    background: #f4f4f1; }
.methodology h1 {
    display: none; }
.methodology p {
    text-align: center;
    font-size: 18px; }
.methodology ul {
    margin-top: 15px;
    padding-bottom: 60px; }
.methodology ul li {
    float: left;
    line-height: 2;
    padding: 30px 30px 30px 84px; }
.methodology ul li.col6 {
    padding-top: 0; }
.methodology ul li:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 63px;
    width: 1px;
    background: #ccc;
    background: -webkit-linear-gradient(transparent, #ccc, transparent);
    background: -o-linear-gradient(transparent, #ccc, transparent);
    background: -moz-linear-gradient(transparent, #ccc, transparent);
    background: linear-gradient(transparent, #ccc, transparent); }
.methodology ul li span {
    font-family: "Fredericka the Great";
    font-size: 64px;
    color: #ccc;
    position: absolute;
    top: 0;
    left: 15px; }
.methodology .item {
    padding-top: 120px; }

.methodology .owl-nav {
    top: 42px;
    max-width: 1024px;
    z-index: 1;
    margin: 0 auto; }
.methodology .owl-nav i {
    margin-top: -21px; }
.methodology .owl-nav .owl-prev i {
    left: 15px; }
.methodology .owl-nav .owl-next i {
    right: 15px; }
.methodology .owl-nav .owl-prev i:before {
    border-top: 1px transparent solid;
    border-right: 1px transparent solid;
    border-bottom: 1px #333 solid;
    border-left: 1px #333 solid; }
.methodology .owl-nav .owl-next i:before {
    border-top: 1px #333 solid;
    border-right: 1px #333 solid;
    border-bottom: 1px transparent solid;
    border-left: 1px transparent solid; }
.methodology .owl-nav i:after {
    display: none; }
.methodology .owl-nav i:before {
    opacity: .7;
    filter: Alpha(Opacity=70); }
.methodology .owl-nav .disabled i:before {
    opacity: .1;
    filter: Alpha(Opacity=10); }

.methodology .owl-dots {
    bottom: auto;
    top: 0; }
.methodology .owl-dots .owl-dot p {
    position: relative;
    font-size: 40px;
    line-height: 60px;
    padding: 0 15px 24px;
    white-space: nowrap;
    opacity: .1;
    filter: Alpha(Opacity=10);
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.methodology .owl-dots .owl-dot.active p {
    opacity: 1;
    filter: Alpha(Opacity=100); }
.methodology .owl-dots .owl-dot p:after {
    content: "";
    position: absolute;
    left: 60px;
    right: 60px;
    bottom: 0;
    height: 2px;
    background: #333;
    border-radius: 1px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px; }
.methodology .owl-dots .owl-dot span {
    background: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.faq {
    position: relative;
    z-index: 11;
    background: #333;
    padding: 120px 0;
    color: #fff; }
.callfaq {
    position: relative;
    display: block;
    width: 320px;
    margin: 0 auto;
    height: 60px; }
.callfaq:before {
    content: "";
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    height: 1px;
    opacity: .3;
    filter: Alpha(Opacity=30);
    background: #fff;
    background: -webkit-linear-gradient(left, transparent, #fff, transparent);
    background: -o-linear-gradient(right, transparent, #fff, transparent);
    background: -moz-linear-gradient(right, transparent, #fff, transparent);
    background: linear-gradient(to right, transparent, #fff, transparent); }
.callfaq:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    background: #333;
    border: 1px #fff solid;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%; }
.callfaq button {
    z-index: 1;
    position: absolute;
    left: 0;
    right: 0;
    top: 30px;
    width: 30px;
    margin: 0 auto;
    height: 1px;
    background: #fff; }
.callfaq button:before,
.callfaq button:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 1px;
    background: #fff;
    transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.callfaq:hover button:before {
    width: 15px;
    left: 17px;
    top: -5px;
    transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -webkit-transform: rotate(225deg); }
.callfaq:hover button:after {
    width: 15px;
    left: 17px;
    top: 5px;
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); }

.showFaqs {
    overflow: hidden; }

.qna {
    background: #333;
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    bottom: 0;
    overflow-y: auto;
    padding: 60px 0;
    z-index: 1;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }

.showFaqs .qna {
    left: 0; }

.qna > a {
    position: fixed;
    top: 0;
    left: -100%;
    width: 60px;
    height: 60px;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.showFaqs .qna > a {
    left: 0; }
.qna > a button {
    position: absolute;
    top: 30px;
    width: 0;
    height: 1px;
    right: 15px;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.qna > a:hover button {
    width: 30px; }
.qna > a button:before,
.qna > a button:after {
    content: "";
    position: absolute;
    right: 0;
    height: 1px;
    width: 30px;
    background: #fff;
    top: 0;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.qna > a button:before {
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg); }
.qna > a button:after {
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); }
.qna > a:hover button:before {
    width: 15px;
    right: 17px;
    top: -5px;
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); }
.qna > a:hover button:after {
    width: 15px;
    right: 17px;
    top: 5px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg); }

.qna .viewport {
    max-width: 1084px;
    overflow: hidden;
    margin: 0 auto;
    padding: 30px 15px; }

.qna .viewport ul {
    list-style: none;
    width: 50%;
    padding: 0 15px;
    float: left; }

.qna .viewport ul li {
    color: #999;
    padding: 0 0 60px 30px; }
.qna .viewport ul li h6 {
    color: #ccc;
    text-align: left; }

.contact {
    position: relative;
    background: #fff;
    overflow: hidden;
    padding-bottom: 120px;
    z-index: 10; }
.contact h1 {
    font-family: Quicksand;
    padding: 120px 0 60px; }
.contact .row > li {
    padding: 0 60px 0 0; }
.contact .row > li:first-child {
    padding-left: 60px; }

.contact b {
    display: block;
    margin-bottom: 15px;
    line-height: 1.5;
    font-size: 18px; }
.contact p {
    margin-bottom: 35px; }
.contact em {
    display: block;
    font-size: 12px;
    line-height: 1; }
.contact a {
    position: relative;
    padding: 8px 0 8px 45px;
    display: block;
    margin: 0 auto 6px;
    color: #333;
    text-decoration: none; }
.contact a i {
    display: block;
    background: #f4f4f1;
    color: #333;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 36px;
    width: 36px; }

.contact label {
    position: relative;
    line-height: 1.5;
    color: #999;
    padding-bottom: 24px;
    display: block; }
.contact input, .contact textarea {
    display: block;
    height: 48px;
    font-size: 18px;
    font-family: "Quicksand";
    letter-spacing: 3px;
    color: #000;
    width: 100%;
    padding: 0 15px;
    outline: none;
    background: #f4f4f1;
    border-bottom: 1px #333 solid;
    transition: .2s ease;
    -moz-transition: .2s ease;
    -o-transition: .2s ease;
    -webkit-transition: .2s ease; }
.contact input:focus,
.contact textarea:focus {
    padding-left: 0;
    padding-right: 0;
    background: #fff; }
.contact .incorrect input,
.contact .incorrect textarea {
    border-bottom: 1px #e55e5e solid; }
.contact label:before,
.contact label:after {
    content: "";
    position: absolute;
    z-index: 1;
    background: #009e55;
    opacity: 0;
    filter: Alpha(Opacity=0);
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transition: .1s ease;
    -moz-transition: .1s ease;
    -o-transition: .1s ease;
    -webkit-transition: .1s ease; }
.contact label:before {
    top: 54px;
    right: 6px;
    width: 3px;
    height: 0; }
.contact .correct:before {
    height: 10px;
    opacity: 1;
    filter: Alpha(Opacity=100); }
.contact label:after {
    top: 54px;
    right: 8px;
    width: 0;
    height: 3px;
    transition-delay: .1s;
    -moz-transition-delay: .1s;
    -o-transition-delay: .1s;
    -webkit-transition-delay: .1s; }
.contact .correct:after {
    right: -18px;
    width: 26px;
    opacity: 1;
    filter: Alpha(Opacity=100); }
.contact .correct input,
.contact .correct textarea {
    background: #fff; }
.contact textarea {
    resize: none;
    overflow-y: auto;
    line-height: 1.5;
    padding: 15px;
    height: 112px; }
.contact .g-recaptcha {
    margin: 15px 0 30px; }
.contact .g-recaptcha > div {
    margin: 0 auto; }
.contact button {
    position: relative;
    background: transparent;
    display: block;
    font-size: 18px;
    letter-spacing: 3px;
    font-family: "Quicksand";
    margin: 0 auto;
    width: 150px;
    height: 54px;
    border: 1px #333 solid;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.contact button:hover {
    color: #fff;
    background: #333; }
.contact button:before,
.contact button:after {
    content: "";
    display: block;
    position: absolute;
    border-bottom: 1px #fff solid;
    top: 50%;
    left: 6px;
    width: 0;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.contact button:hover:before {
    width: 30px; }
.contact button:after {
    height: 15px;
    margin-top: -8px;
    border-top: 1px #fff solid;
    transition-delay: .1s;
    -moz-transition-delay: .1s;
    -o-transition-delay: .1s;
    -webkit-transition-delay: .1s; }
.contact button:hover:after {
    width: 18px; }
#name,
#company {
    text-transform: capitalize; }

.footer {
    background: #333;
    position: relative;
    z-index: 10; }
.footer p {
    text-align: center;
    padding: 30px 0;
    color: #666; }

.keypad {
    position: fixed;
    bottom: 21px;
    right: 21px;
    width: 156px;
    height: 106px;
    z-index: 12; }
.keypad.notPC {
    width: 50px; }
.keypad a {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #fff;
    box-shadow: 0 0 6px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 0 6px rgba(0,0,0,.3);
    transition: 1s ease;
    -moz-transition: 1s ease;
    -o-transition: 1s ease;
    -webkit-transition: 1s ease; }
.keypad a.up {
    top: 200px;
    left: 56px;
    transition-delay: 1s;
    -moz-transition-delay: 1s;
    -o-transition-delay: 1s;
    -webkit-transition-delay: 1s; }
.pace-done .keypad a.up {
    top: 0; }
.keypad.notPC a.up {
    left: 0; }
.keypad a.left {
    left: 0;
    transition-delay: 1.1s;
    -moz-transition-delay: 1.1s;
    -o-transition-delay: 1.1s;
    -webkit-transition-delay: 1.1s; }
.keypad.notPC a.left {
    display: none; }
.keypad a.down {
    left: 56px;
    transition-delay: 1.2s;
    -moz-transition-delay: 1.2s;
    -o-transition-delay: 1.2s;
    -webkit-transition-delay: 1.2s; }
.keypad.notPC a.down {
    left: 0; }
.keypad a.right {
    left: 112px;
    transition-delay: 1.3s;
    -moz-transition-delay: 1.3s;
    -o-transition-delay: 1.3s;
    -webkit-transition-delay: 1.3s; }
.keypad.notPC a.right {
    display: none; }
.keypad a.left,
.keypad a.down,
.keypad a.right {
    bottom: -200px; }
.pace-done .keypad a.left,
.pace-done .keypad a.down,
.pace-done .keypad a.right {
    bottom: 0; }

.keypad i {
    display: block;
    line-height: 50px;
    width: 50px;
    text-align: center;
    font-size: 24px; }
.keypad a.disabled {
    color: #ccc;
    background: #eee;
    box-shadow: none;
    -webkit-box-shadow: none; }

.navigation {
    position: fixed;
    z-index: 13;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.hideNav .navigation {
    width: 60px;
    height: 60px; }

.navigation .background {
    background: #fff;
    position: absolute;
    top: -960px;
    right: -960px;
    width: 1920px;
    height: 1920px;
    box-shadow: 0 0 6px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 0 6px rgba(0,0,0,.3);
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.hideNav .navigation .background {
    top: -60px;
    right: -60px;
    width: 120px;
    height: 120px; }
.hideNav.darktheme .navigation .background {
    background: #333; }

.navigation > a {
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px; }
.navigation > a button {
    position: absolute;
    top: 21px;
    right: 9px;
    width: 0;
    height: 1px;
    background: #333;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.navigation > a:hover button {
    width: 30px; }
.hideNav .navigation > a button {
    width: 18px; }
.hideNav.darktheme .navigation > a button {
    background: #fff; }
.hideNav .navigation > a:hover button {
    width: 30px; }
.navigation > a button:before,
.navigation > a button:after {
    content: "";
    position: absolute;
    right: 0;
    width: 30px;
    height: 1px;
    background: inherit;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.navigation > a button:before {
    top: 0;
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); }
.navigation > a button:after {
    top: 0;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg); }
.navigation > a:hover button:before {
    width: 15px;
    top: 6px;
    right: -1px;
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); }
.navigation > a:hover button:after {
    width: 15px;
    top: -6px;
    right: -1px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg); }
.hideNav .navigation > a button:before,
.hideNav .navigation > a button:after {
    width: 18px;
    transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg); }
.hideNav .navigation > a button:before {
    top: -6px; }
.hideNav .navigation > a button:after{
    top: 6px; }
.hideNav .navigation > a:hover button:before {
    right: 15px;
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); }
.hideNav .navigation > a:hover button:after {
    right: 15px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg); }

.navigation ul {
    position: fixed;
    top: 120px;
    right: 120px;
    max-width: 640px;
    list-style: none; }

.hideNav .navigation ul {
    top: -120px;
    right: -120px;
    border: 1px #fff solid;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;    
    width: 240px;
    height: 240px;
    transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease; }
.hideNav.darktheme .navigation ul {
    border-color: #333; }
.showNav .navigation ul {
    transform: rotate(0deg) !important;
    -moz-transform: rotate(0deg) !important;
    -ms-transform: rotate(0deg) !important;
    -webkit-transform: rotate(0deg) !important; }

.navigation ul li {
    float: left;
    width: 50%; }
.hideNav .navigation ul li {
    float: none;
    position: absolute;
    top: -30px;
    bottom: -30px;
    left: 50%;
    margin-left: -50px;
    width: 100px; }
.hideNav .navigation ul li.ready { z-index: 1; }
.hideNav .navigation ul .link0 {
    transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -webkit-transform: rotate(225deg); }
.hideNav .navigation ul .link3 {
    transform: rotate(189deg);
    -moz-transform: rotate(189deg);
    -ms-transform: rotate(189deg);
    -webkit-transform: rotate(189deg); }
.hideNav .navigation ul .link4 {
    transform: rotate(153deg);
    -moz-transform: rotate(153deg);
    -ms-transform: rotate(153deg);
    -webkit-transform: rotate(153deg); }
.hideNav .navigation ul .link5 {
    transform: rotate(117deg);
    -moz-transform: rotate(117deg);
    -ms-transform: rotate(117deg);
    -webkit-transform: rotate(117deg); }
.hideNav .navigation ul .link6 {
    transform: rotate(81deg);
    -moz-transform: rotate(81deg);
    -ms-transform: rotate(81deg);
    -webkit-transform: rotate(81deg); }
.hideNav .navigation ul .link7 {
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg); }
.hideNav .navigation ul .link8 {
    transform: rotate(9deg);
    -moz-transform: rotate(9deg);
    -ms-transform: rotate(9deg);
    -webkit-transform: rotate(9deg); }
.hideNav .navigation ul .link9 {
    transform: rotate(333deg);
    -moz-transform: rotate(333deg);
    -ms-transform: rotate(333deg);
    -webkit-transform: rotate(333deg); }
.hideNav .navigation ul .link10 {
    transform: rotate(297deg);
    -moz-transform: rotate(297deg);
    -ms-transform: rotate(297deg);
    -webkit-transform: rotate(297deg); }
.hideNav .navigation ul .link11 {
    transform: rotate(261deg);
    -moz-transform: rotate(261deg);
    -ms-transform: rotate(261deg);
    -webkit-transform: rotate(261deg); }

.navigation ul li a {
    position: relative;
    text-align: right;
    display: block;
    margin-left: 60px;
    padding: 15px 0;
    font-size: 24px;
    color: #333;
    font-family: "Fredericka the Great"; }

.hideNav .navigation ul li a {
    text-align: center;
    color: #fff;
    font-size: 12px;
    padding: 0;
    margin-left: 0;
    line-height: 30px;
    font-family: "Quicksand";
    opacity: .3;
    filter: Alpha(Opacity=30); }
.hideNav.darktheme .navigation ul li a {
    color: #000; }

.navigation ul li.active a:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #333; }
.hideNav .navigation ul li a:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    width: 1px;
    height: 9px;
    margin: 0 auto;
    bottom: -9px;
    background: #fff; }
.hideNav.darktheme .navigation ul li a:after {
    background: #333; }

.hideNav .navigation ul li.active a {
    opacity: 1;
    filter: Alpha(Opacity=100); }

@media (min-width:1280px) {
    .team > .row > .col4 {
        width: 20%; }
    .team > .row > .col4:first-child {
        margin-left: 10%; }
    .centercloud > .row > .col3 {
        width: 16.666666%; } }

@media (max-width:1279px) {
    .feature .item .preview {
        width: 240px;
        height: 240px;
        margin-top: -120px; }
    .feature .item .preview span {
        top: 80px;
        left: 80px; }
    .feature .item h1 {
        bottom: 55%; }
    .feature .item p {
        top: 45%; } }

@media (max-width:1023px) {
    .colL0 { width: 0; }
    .colL1 { width: 8.333333%; }
    .colL2 { width: 16.666666%; }
    .colL3 { width: 25%; }
    .colL4 { width: 33.333333%; }
    .colL5 { width: 41.666666%; }
    .colL6 { width: 50%; }
    .colL7 { width: 58.333333%; }
    .colL8 { width: 66.666666%; }
    .colL9 { width: 75%; }
    .colL10 { width: 83.333333%; }
    .colL11 { width: 91.666666%; }
    .colL12 { width: 100%; }

    .pushColL0 { margin-left: 0; }
    .pushColL1 { margin-left: 8.333333%; }
    .pushColL2 { margin-left: 16.666666%; }
    .pushColL3 { margin-left: 25%; }
    .pushColL4 { margin-left: 33.333333%; }
    .pushColL5 { margin-left: 41.666666%; }
    .pushColL6 { margin-left: 50%; }
    .pushColL7 { margin-left: 58.333333%; }
    .pushColL8 { margin-left: 66.666666%; }
    .pushColL9 { margin-left: 75%; }
    .pushColL10 { margin-left: 83.333333%; }
    .pushColL11 { margin-left: 91.666666%; }
    .pushColL12 { margin-left: 100%; }

    .intro {
        left: 15px;
        right: 15px; }

    .feature .item .preview {
        top: auto;
        bottom: 50%;
        right: 50%;
        width: 320px;
        height: 320px;
        margin-top: 0;
        margin-right: -160px; }
    .feature .item .preview span {
        top: 120px;
        left: 120px; }
    .feature .item h1 {
        bottom: 36%;
        left: 85px;
        text-align: center; }
    .feature .item p {
        top: 65%;
        left: 85px; }
    .feature .item p a {
        margin-left: auto;
        margin-right: auto; }

    .morefeature .items ul {
        width: 50%; }

    .thedevice .screen div:before,
    .thedevice .screen div:after {
        width: 100%; }
    .qna .viewport ul {
        width: 100%; }

    .hideNav .navigation ul {
        top: -75px;
        right: -75px;
        width: 150px;
        height: 150px; }
    .methodology .owl-dots .owl-dot {
        overflow: hidden;
        width: 0; }
    .methodology .owl-dots .owl-dot.active { width: auto; } }

@media (max-width:767px) {
    .colM0 { width: 0; }
    .colM1 { width: 8.333333%; }
    .colM2 { width: 16.666666%; }
    .colM3 { width: 25%; }
    .colM4 { width: 33.333333%; }
    .colM5 { width: 41.666666%; }
    .colM6 { width: 50%; }
    .colM7 { width: 58.333333%; }
    .colM8 { width: 66.666666%; }
    .colM9 { width: 75%; }
    .colM10 { width: 83.333333%; }
    .colM11 { width: 91.666666%; }
    .colM12 { width: 100%; }

    .pushColM0 { margin-left: 0; }
    .pushColM1 { margin-left: 8.333333%; }
    .pushColM2 { margin-left: 16.666666%; }
    .pushColM3 { margin-left: 25%; }
    .pushColM4 { margin-left: 33.333333%; }
    .pushColM5 { margin-left: 41.666666%; }
    .pushColM6 { margin-left: 50%; }
    .pushColM7 { margin-left: 58.333333%; }
    .pushColM8 { margin-left: 66.666666%; }
    .pushColM9 { margin-left: 75%; }
    .pushColM10 { margin-left: 83.333333%; }
    .pushColM11 { margin-left: 91.666666%; }
    .pushColM12 { margin-left: 100%; }

    .pace .pace-progress {
        top: 15px;
        right: 15px; }

    .showNav .navigation ul {
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        overflow-y: auto;
        padding: 45px 60px;
        padding-left: 0; }

    .home img {
        max-width: 240px; }
    .intro h1 {
        font-size: 32px !important; }

    .feature .owl-carousel {
        right: 0; }
    .feature .owl-dots {
        right: 60px; }
    .hideFeatures .morefeature {
        margin-left: 0; }
    .feature .owl-dots .owl-dot i {
        bottom: 60%;
        font-size: 32px; }
    .feature .owl-dots .owl-dot p {
        top: 40%;
        font-size: 12px;
        padding-top: 6px;
        line-height: 1.14; }
    .feature .owl-dots .owl-dot a {
        font-size: 12px;
        width: 90px;
        margin-top: 30px; }
    .feature .item .preview {
        bottom: 55%;
        right: auto;
        left: 85px;
        width: 120px;
        height: 120px;
        margin-top: 0;
        margin-right: 0; }
    .feature .item .preview span {
        top: 20px;
        left: 20px; }
    .feature .item h1 {
        bottom: 55%;
        left: 225px;
        font-size: 24px;
        text-align: left; }
    .feature .item p {
        top: 45%;
        padding-top: 15px;
        font-size: 12px; }
    .feature .item p a {
        font-size: 12px;
        text-align: center;
        width: 150px; }

    .morefeature > a span {
        font-size: 12px;
        margin-top: 6px; }

    .keypad.notPC {
        width: 106px;
        height: 50px; }
    .keypad.notPC a.down {
        left: 56px; }
    
    .methodology ul li {
        padding-right: 15px; }
    .methodology ul li span {
        line-height: 102px; }
    .methodology .item {
        padding-top: 93px; }

    .contact h1 {
        padding-bottom: 30px; }
    .contact .row > li {
        padding: 0 15px; }
    .contact .row > li:first-child {
        padding-left: 15px; } }

@media (max-width:567px) {
    .colS0 { width: 0; }
    .colS1 { width: 8.333333%; }
    .colS2 { width: 16.666666%; }
    .colS3 { width: 25%; }
    .colS4 { width: 33.333333%; }
    .colS5 { width: 41.666666%; }
    .colS6 { width: 50%; }
    .colS7 { width: 58.333333%; }
    .colS8 { width: 66.666666%; }
    .colS9 { width: 75%; }
    .colS10 { width: 83.333333%; }
    .colS11 { width: 91.666666%; }
    .colS12 { width: 100%; }

    .pushColS0 { margin-left: 0; }
    .pushColS1 { margin-left: 8.333333%; }
    .pushColS2 { margin-left: 16.666666%; }
    .pushColS3 { margin-left: 25%; }
    .pushColS4 { margin-left: 33.333333%; }
    .pushColS5 { margin-left: 41.666666%; }
    .pushColS6 { margin-left: 50%; }
    .pushColS7 { margin-left: 58.333333%; }
    .pushColS8 { margin-left: 66.666666%; }
    .pushColS9 { margin-left: 75%; }
    .pushColS10 { margin-left: 83.333333%; }
    .pushColS11 { margin-left: 91.666666%; }
    .pushColS12 { margin-left: 100%; }

    .navigation ul li {
        width: 100%; }

    .morefeature .items {
        padding-left: 60px; }
    .morefeature .items ul {
        width: 100%; }
    .morefeature .items ul li {
        padding-right: 15px; }

    .feature .item .preview {
        bottom: 50%;
        right: 50%;
        left: auto;
        width: 150px;
        height: 150px;
        margin-right: -75px;
        margin-bottom: 90px; }
    .feature .item .preview span {
        top: 35px;
        left: 35px; }
    .feature .item h1 {
        bottom: 50%;
        left: 0;
        right: 0;
        height: 81px;
        padding-top: 15px;
        margin-bottom: 0;
        font-size: 24px;
        text-align: center; }
    .feature .item h1:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 85px;
        right: 85px;
        height: 1px;
        display: block;
        background: #fff;
        background: -webkit-linear-gradient(left, transparent, #fff, transparent);
        background: -o-linear-gradient(right, transparent, #fff, transparent);
        background: -moz-linear-gradient(right, transparent, #fff, transparent);
        background: linear-gradient(to right, transparent, #fff, transparent); }

    .feature .item p {
        top: 50%;
        padding-top: 30px;
        left: 15px;
        right: 15px;
        font-size: 12px; }
    .feature .item p a {
        font-size: 12px;
        text-align: center;
        width: 150px; }

    .morefeature > a span {
        font-size: 12px;
        margin-top: 6px; }
    .addon.showit {
        bottom: 0; }
    
    .methodology p {
        font-size: 14px; }
    .methodology ul li {
        font-size: 14px;
        padding-top: 15px;
        padding-bottom: 15px; }
    .methodology .owl-dots .owl-dot p {
        font-size: 24px;
        padding: 6px 15px 9px; }
    
    .faq h1 {
        font-size: 24px; }
    .qna .viewport ul li {
        padding-left: 0; } }