/*
Copyright (C) Xantec Solutions <hello@xantec.com.my>
This file is part of BIGBROTHER, cannot be copied and/or 
distributed without the express permisson of Xantec Solutions
*/
/* 
    Created on : Jan 22, 2016, 2:01:26 PM
    Author     : Ping
*/

::selection { background: rgba(255,255,255,0.1); color: #71675f; }
::-moz-selection { background: rgba(255,255,255,0.1); color: #71675f; }

* {
    border: none;
    margin: 0;
    padding: 0;
}

body {
    font-family: Roboto, sans-serif;
    font-size: 18px;
    color: #333;
    background: #333;
    line-height: 1.14;
    font-weight: 400;
    overflow-y: scroll;
}

a {
    cursor: pointer;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

a:hover { color: #000; }

b { font-weight: 500; }

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

h1,h2,h3,h4,h5,h6,th {
    font-weight: 500;
    font-family: Ubuntu, sans-serif;
}

h1 { font-size: 32px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 12px; }

p { line-height: 1.5; }

table { border-spacing: 0; }

.holder {
    overflow: hidden;
    background: #fff;
}

.page {
    position: relative;
    left: 0;
    width: 100%;
    padding-top: 50px;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.container {
    width: 100%;
    padding: 0 60px;
    margin: 0 auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.row {
    overflow: hidden;
    margin: 0 -15px;
}

.narrow { margin: 0 -8px; }
.nospace { margin: 0; }

.row > div {
    float: left;
    min-height: 1px;
    padding: 0 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.grid0 { display: none; }
.grid1 { width: 8.333333%; }
.grid2 { width: 16.666666%; }
.grid3 { width: 25%; }
.grid4 { width: 33.333333%; }
.grid5 { width: 41.666666%; }
.grid6 { width: 50%; }
.grid7 { width: 58.333333%; }
.grid8 { width: 66.666666%; }
.grid9 { width: 75%; }
.grid10 { width: 83.333333%; }
.grid11 { width: 91.666666%; }
.grid12 { width: 100%; }

.narrow > div { padding: 0 8px; }
.nospace > div { padding: 0; }

.space { height: 30px; }

.narrow .space { height: 16px; }

/* header */

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    background: rgba(255,255,255,0.95);
    border-bottom: 1px #71675f solid;
    z-index: 2;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.bars {
    display: none;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

.bars span {
    position: absolute;
    height: 2px;
    width: 16px;
    background: #333;
    left: 17px;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.bars .bar1 { top: 20px; }
.bars .bar2 { top: 24px; }
.bars .bar3 { top: 28px; }

.bars:hover .bar1 {
    top: 19px;
    left: 12px;
    transform: rotate(-225deg);
    -moz-transform: rotate(-225deg);
    -ms-transform: rotate(-225deg);
    -webkit-transform: rotate(-225deg);
}

.bars:hover .bar2 {
    width: 20px;
    transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

.bars:hover .bar3 {
    top: 29px;
    left: 12px;
    transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.bars.active .bar1 {
    top: 24px;
    left: 17px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.bars.active .bar2 {
    opacity: 0;
    filter: Alpha(Opacity=0);
    transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
}

.bars.active .bar3 {
    top: 24px;
    left: 17px;
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.logo {
    display: block;
    float: left;
    padding: 8px 0;
}

.logo img { height: 34px; }

.underline {
    position: fixed;
    top: 50px;
    left: 0;
    height: 1px;
    background:  #71675f;
    border-left: 15px #fff solid;
    border-right: 15px #fff solid;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.underline i {
    position: absolute;
    top: -11px;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: 32px;
    line-height: 32px;
    text-align: center;
    color: #71675f;
}

.nav {
    list-style: none;
    float: right;
    margin-right: -15px;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.nav li {
    position: relative;
    float: left;
    z-index: 1;
}

.nav li+li:after {
    content: "/";
    position: absolute;
    color: #ccc;
    top: 13px;
    font-size: 20px;
}

.nav a {
    display: block;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    padding: 0 30px;
    font-weight: 300;
}

.nav li.hover a { color: #71675f; }

.nav li div {
    position: absolute;
    top: 10px;
    left: -100px;
    right: -100px;
    width: 270px;
    margin: 0 auto;
    padding-top: 15px;
    visibility: hidden;
    opacity: 0;
    filter: Alpha(Opacity=0);
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.nav li.hover div {
    top: 50px;
    visibility: visible;
    opacity: 1;
    filter: Alpha(Opacity=100);
}

.nav li div a {
    float: none;
    width: 100%;
    background: #333;
    color: #fff;
    padding: 0;
    transform: rotateY(-270deg) scale(0);
    -moz-transform: rotateY(-270deg) scale(0);
    -ms-transform: rotateY(-270deg) scale(0);
    -webkit-transform: rotateY(-270deg) scale(0);
}

.nav li div a:hover {
    background: #71675f;
    color: #333;
}

.nav li div a+a { border-top: 0; }

.nav li div a:nth-child(2) {
    margin-top: -50px;
    transition: .6s ease;
    -moz-transition: .6s ease;
    -o-transition: .6s ease;
    -webkit-transition: .6s ease;
}

.nav li div a:nth-child(3) {
    margin-top: -50px;
    transition: .7s ease;
    -moz-transition: .7s ease;
    -o-transition: .7s ease;
    -webkit-transition: .7s ease;
}

.nav li.hover div a {
    margin-top: 1px;
    color: #efb51a;
    transform: rotateY(0deg) scale(1);
    -moz-transform: rotateY(0deg) scale(1);
    -ms-transform: rotateY(0deg) scale(1);
    -webkit-transform: rotateY(0deg) scale(1);
}

/* banner */

.slider {
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.loading {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 94px;
    height: 94px;
    margin: -47px auto 0;
    border: 2px #efb51a solid;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transition: 2s ease;
    -moz-transition: 2s ease;
    -o-transition: 2s ease;
    -webkit-transition: 2s ease;
}

.loading.show {
    transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
}

@keyframes loading {
    0% { width: 0; transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
    25% { width: 75px; transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); }
    50% { width: 0; transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); }
    75% { width: 75px; transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -webkit-transform: rotate(225deg); }
    100% { width: 0; transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); }
}

@-webkit-keyframes loading {
    0% { width: 0; transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
    25% { width: 75px; transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); }
    50% { width: 0; transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); }
    75% { width: 75px; transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -webkit-transform: rotate(225deg); }
    100% { width: 0; transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); }
}

.loading span {
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: 0;
    right: 0;
    background: #fff;
    display: block;
    margin: 0 auto;
    animation: loading 3s infinite;
    -moz-animation: loading 3s infinite;
    -webkit-animation: loading 3s infinite;
}

.timer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 5px;
    background: #efb51a;
    z-index: 1;
    opacity: 0.7;
    filter: Alpha(Opacity=0.7);
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-size: cover;
    perspective: 2000px;
    -webkit-perspective: 2000px;
}

.slide > div {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    transition: 1s ease;
    -moz-transition: 1s ease;
    -o-transition: 1s ease;
    -webkit-transition: 1s ease;
    visibility: hidden;
    opacity: 0;
    filter: Alpha(Opacity=0);
}

.slide > .left {
    left: 0;
    background-position: right center;
    transform-origin: right center;
    -moz-transform-origin: right center;
    -ms-transform-origin: right center;
    -webkit-transform-origin: right center;
    transition-delay: .5s;
    -moz-transition-delay: .5s;
    -o-transition-delay: .5s;
    -webkit-transition-delay: .5s;
}

.backward .slide > .left {
    transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -webkit-transition-delay: 0s;
}

.slide > .right {
    right: 0;
    background-position: left center;
    transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -webkit-transform-origin: left center;
}

.backward .slide > .right {
    transition-delay: .5s;
    -moz-transition-delay: .5s;
    -o-transition-delay: .5s;
    -webkit-transition-delay: .5s;
}

.slide > .right, .slide.past > .right {
    transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    -ms-transform: rotateY(-90deg);
    -webkit-transform: rotateY(-90deg);
}

.slide.past > .left, .slide.present > div, .slide.future > .right {
    transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
}

.slide.present > div {
    visibility: visible;
    opacity: 1;
    filter: Alpha(Opacity=100);
}

.slide.future > .left {
    transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -webkit-transform: rotateY(90deg);
}

.design-store .left { background-position: center center; }

.design-store > div > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.design-store > div:hover > div {
    filter: blur(30px);
    -webkit-filter: blur(30px);
}

.design-store .left .layer div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    transition-delay: 2s;
    -moz-transition-delay: 2s;
    -o-transition-delay: 2s;
    -webkit-transition-delay: 2s;
    transition: 3s ease;
    -moz-transition: 3s ease;
    -o-transition: 3s ease;
    -webkit-transition: 3s ease;
}

.design-store.present .left .layer .layer1 { left: -50px; }
.design-store.present .left .layer .layer2 { left: -100px; }
.design-store.present .left .layer .layer3 { left: -150px; }
.design-store.present .left .layer .layer4 { left: -200px; }

.design-store .right { background-position: center center; }

.slide table {
    position: absolute;
    height: 33.333333%;
    bottom: 0;
    width: 100%;
    text-align: center;
    opacity: 0;
    filter: Alpha(Opacity=0);
    transition: 3s ease;
    -moz-transition: 3s ease;
    -o-transition: 3s ease;
    -webkit-transition: 3s ease;
}

.slide.present table {
    opacity: 1;
    filter: Alpha(Opacity=100);
}

/*.design-store .right { color: #fff; }*/
/*.design-store .left table { text-shadow: 0 0 3px #fff; }*/

.design-store.present table { bottom: 0; }

.responsive table { text-shadow: 0 0 3px #fff; }

.responsive.present table { bottom: 25%; }

.slide h1 { font-size: 64px; }

.slide h2 {
    padding-bottom: 30px;
    position: relative;
}

.slide h2 span {
    position: absolute;
    bottom: 14px;
    height: 2px;
    width: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: #333;
    transition: 3s ease;
    -moz-transition: 3s ease;
    -o-transition: 3s ease;
    -webkit-transition: 3s ease;
}

.slide.present h2 span { width: 200px; }

.design-store .right h2 span { background: #fff; }

.slide h4 {
    font-family: Roboto, sans-serif;
    padding: 0 75px;
    font-weight: 400;
}

.link {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    color: inherit;
    text-decoration: none;
}

.link:hover { color: inherit; }

.design-link { left: 0; }
.ecommerce-link { right: 0; }

.link b {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 45px #efb51a solid;
    opacity: 0;
    filter: Alpha(Opacity=0);
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.link:hover b {
    opacity: .3;
    filter: Alpha(Opacity=30);
    transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
}

.link span {
    position: absolute;
    top: 49px;
    left: 49px;
    right: 49px;
    bottom: 49px;
    background: #efb51a;
    opacity: 0;
    filter: Alpha(Opacity=0);
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.link:hover span {
    opacity: .3;
    filter: Alpha(Opacity=30);
    transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
}

.link > h1 {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -36px;
    font-size: 36px;
    opacity: 0;
    filter: Alpha(Opacity=0);
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.link:hover > h1 {
    opacity: 1;
    filter: Alpha(Opacity=100);
}

.link > h1 i {
    display: block;
    margin-top: 15px;
    font-size: 52px;
}

.scrolldown {
    position: absolute;
    bottom: 3px;
    left: 0;
    right: 0;
    width: 200px;
    text-align: center;
    font-size: 16px;
    line-height: 19px;
    padding: 13px 0;
    margin: 0 auto;
    z-index: 2;
    color: #333;
    font-weight: 500;
    font-family: Raleway, sans-serif;
    opacity: .7;
    filter: Alpha(Opacity=70);
}

.scrolldown:hover {
    color: #333;
    opacity: 1;
    filter: Alpha(Opacity=100);
}

.scrolldown span {
    position: absolute;
    top: 0;
    height: 2px;
    width: 50%;
    background: #333;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.scrolldown .left { left: 0; }
.scrolldown .right { right: 0; }

.scrolldown:hover .left {
    left: 3px;
    transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
}

.scrolldown:hover .right {
    right: 3px;
    transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
}

.slide-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 90px;
    background: #fff;
    margin: -45px auto 0;
    overflow: hidden;
    z-index: 3;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transition: 2s ease;
    -moz-transition: 2s ease;
    -o-transition: 2s ease;
    -webkit-transition: 2s ease;
}

.slide-nav.show { top: 75px; }

.slide-nav.hide {
    opacity: 0;
    filter: Alpha(Opacity=0);
    visibility: hidden;
    transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
}

.slide-nav.show { background: rgba(255,255,255,0.1); }

.slide-nav:hover { background: rgba(255,255,255,0.9); }

.slide-nav a {
    display: block;
    float: left;
    width: 45px;
    line-height: 90px;
    text-align: center;
    font-size: 32px;
    color: #333;
}

.slide-nav a:hover { color: #efb51a; }

.slide-pag {
    position: absolute;
    top: 125px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 2;
    visibility: hidden;
    transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.slide-pag.show {
    visibility: visible;
    transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transition-delay: 1.5s;
    -moz-transition-delay: 1.5s;
    -o-transition-delay: 1.5s;
    -webkit-transition-delay: 1.5s;
}

.slide-pag a {
    display: block;
    float: left;
    width: 5px;
    height: 20px;
    margin: 5px;
    background: #fff;
}

.slide-pag a.active {
    background: #efb51a;
    height: 30px;
    margin: 0 5px;
}

.slide-pag a:hover { background: #efb51a; }

.banner {
    position: relative;
    background: #71675f url(../img/banner/general.jpg);
    background-size: cover;
    overflow: hidden;
    border-bottom: 1px #f1f1f1 solid;
}

#particles-js {
    position: absolute;
    top: -150px;
    left: -150px;
    right: -150px;
    bottom: -150px;
}

.banner .container {
    position: relative;
    height: 200px;
}

.banner h1 {
    color: #fff;
    position: absolute;
    bottom: 34px;
    left: 320px;
    right: 15px;
}

.banner h1 i { margin: 0 30px; }

.banner span {
    position: absolute;
    top: -50px;
    left: -200px;
    height: 400px;
    width: 400px;
    background: #fff;
    background: rgba(255,255,255,0.9);
    box-shadow: 6px -3px 6px rgba(0,0,0,0.3);
    -webkit-box-shadow: 6px -3px 6px rgba(0,0,0,0.3);
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

/* footer */

.footer {
    background: #333;
    font-size: 12px;
    color: #999;
    padding-top: 18px;
}

.footer .container > p {
    padding: 18px 0;
    text-align: center;
}

.footer .container > p a {
	position: relative;
	color: #999;
	padding-left: 21px;
	text-decoration: none; }

.footer .container > p a:before {
	content: "";
	position: absolute;
	width: 3px;
	height: 3px;
	top: 6px;
	left: 9px;
	background: #666;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}

.footer .container > p a:after {
	content: "\f0c2";
	font-family: FontAwesome;
	position: absolute;
	line-heigh: 14px;
	top: 0;
	left: 21px;
	width: 21px;
	text-align: center;
	color: #efb51a;
	opacity: 0;
	filter: Alpha(Opacity=0);
	transition: .5s ease;
	-moz-transition: .5s ease;
	-o-transition: .5s ease;
	-webkit-transition: .5s ease;
}

.footer .container > p a:last-child:after {
	color: #56d8d1;
}

.footer .container > p a:hover:after {
	left: 0;
	opacity: 1;
	filter: Alpha(Opacity=100);
}

.footer-link {
    border-bottom: 1px #444 solid;
    padding-bottom: 18px;
}

.footer-link h5 {
    line-height: 16px;
    padding: 30px 0 12px;
    font-family: Roboto, sans-serif;
    font-weight: 400;
    color: #efb51a;
}

.footer-link ul {
	list-style: none;
}

.footer-link li > a {
    display: block;
    line-height: 1.5;
    color: #999;
    text-decoration: none;
}

.footer-link li > a:hover { color: #efb51a; }

.sociallink { overflow: hidden; }

.sociallink img {
    height: 34px;
    padding-top: 18px;
    padding-bottom: 8px;
    margin: 0;
}

.footer-link .sociallink > a {
    float: left;
    margin-top: 6px;
}

.footer-link .sociallink > a+a { margin-left: 3px; }

.footer-link .sociallink > a i {
    display: block;
    width: 24px;
    text-align: center;
    line-height: 24px;
    font-size: 18px;
    color: #fff;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.footer-link .sociallink > a:hover i {
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
}

.footer-link .sociallink > a .fa-facebook {
    background: #3b5998;
    border: 3px #3b5998 solid;
}

.footer-link .sociallink > a:hover .fa-facebook {
    background: #fff;
    color: #3b5998;
}

.footer-link .sociallink > a .fa-google-plus {
    background: #dc4e41;
    border: 3px #dc4e41 solid;
}

.footer-link .sociallink > a:hover .fa-google-plus {
    background: #fff;
    color: #dc4e41;
}

.footer-link .sociallink > a .fa-linkedin {
    background: #0077b5;
    border: 3px #0077b5 solid;
}

.footer-link .sociallink > a:hover .fa-linkedin {
    background: #fff;
    color: #0077b5;
}

.footer-link .sociallink > p {
	color: #666;
}

.footer-link .sociallink > p a {
	text-decoration: none;
    color: #999; }

.footer-link .sociallink > p a:hover { color: #efb51a; }

/* home */

.brands {
    border-top: 1px #f1f1f1 solid;
    border-bottom: 1px #f1f1f1 solid;
}

.brands .page-title {
    display: none;
    margin: 15px 0 30px;
}

.brands .item {
    padding: 15px;
    background: #f1f1f1;
}

.brands .owl-item+.owl-item .item { border-left: 1px #ccc solid; }

.owl-theme .owl-controls .owl-buttons div i {
    opacity: 0;
    filter: Alpha(Opacity=0);
}

.owl-theme .owl-controls .owl-buttons div.owl-prev i { left: -48px; }
.owl-theme .owl-controls .owl-buttons div.owl-next i { right: -48px; }

.owl-theme:hover .owl-controls .owl-buttons div i {
    left: 0;
    right: 0;
    opacity: 1;
    filter: Alpha(Opacity=100);
}

.what-we-do {
    position: relative;
    background: #f1f1f1;
}

.what-we-do table {
    position: absolute;
    height: 33.333333%;
    width: 50%;
    top: 0;
    left: 0;
    display: block;
}

.what-we-do .page-title {
    position: absolute;
    width: 50%;
    top: 16.666666%;
    left: 0;
    margin-top: -51px;
}

.what-we-do .row > div { position: relative; }

.what-we-do .row > div span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5px 0;
    text-align: center;
    color: #fff;
    font-size: 16px;
}

.afterthis {
    text-align: center;
    background: #f1f1f1;
    color: #999;
}

.afterthis i { font-size: 48px; }

.home-domain-hosting {
    position: relative;
    text-align: center;
    color: #fff;
    overflow: hidden;
    background: #000;
}

.home-domain-hosting .background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(../img/server.jpg) no-repeat center center;
    background-size: cover;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.home-domain-hosting:hover .background {
    filter: blur(11px);
    -webkit-filter: blur(11px);
}

.home-domain-hosting .container {
    position: relative;
    z-index: 1;
}

.home-domain-hosting table {
    margin: 0 auto;
    color: #333;
}

.home-domain-hosting table tr th {
    padding: 15px;
    background: rgba(255,255,255,0.7);
}

.home-domain-hosting table tr td {
    text-align: left;
    padding: 15px;
    background: rgba(255,255,255,0.7);
}

.home-domain-hosting table tr:first-child th, .home-domain-hosting table tr:first-child td {
    background: #f1f1f1;
    background: rgba(241,241,241,0.7);
}

.testimonial { position: relative; }

.testimonial .item {
    position: relative;
    margin: 60px;
}

.testimonial .item p {
    margin-right: 230px;
}

.testimonial .item img {
    position: absolute;
    top: 0;
    right: 0;
}

.testimonial .item em {
    display: block;
    padding-top: 15px;
    color: #999;
}

.testimonial .item em:before { content: '- '; }
.testimonial .item em:after { content: ' -'; }

.testimonial .fa-quote-left {
    position: absolute;
    top: 30px;
    left: 30px;
}

.testimonial .fa-quote-right {
    position: absolute;
    bottom: 30px;
    right: 30px;
}

/* main */

.page-title {
    position: relative;
    display: block;
    opacity: 0.9;
    filter: Alpha(Opacity=90);
}

.center { text-align: center; }

.page-title.white { color: #fff; }

.page-title h1 {
    font-size: 56px;
    padding: 15px 0;
}

.page-title h2, .page-title h3, .page-title h4, .page-title h5, .page-title h6 { padding: 15px 0; }

.page-title:after {
    content: "";
    width: 60px;
    height: 6px;
    background: #efb51a;
    position: absolute;
    bottom: -3px;
    left: 0;
    margin: 0 auto;
}

.page-title.center:after { right: 0; }

.page-title.white:after { background: #fff; }

.link-btn {
    display: block;
    line-height: 36px;
    width: 140px;
    padding-right: 20px;
    font-size: 14px;
    text-align: center;
    font-weight: 500;
    color: #efb51a;
    border: 2px #efb51a solid;
    position: relative;
    text-decoration: none;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}

.link-btn.enlarge {
    font-size: 24px;
    line-height: 56px;
    width: 230px;
    padding-right: 50px;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
}

.link-btn:hover { color: #fff; }

.link-btn span {
    position: relative;
    z-index: 1;
}

.link-btn i {
    position: absolute;
    right: -2px;
    top: -2px;
    line-height: 40px;
    width: 26px;
    padding-right: 14px;
    text-align: right;
    font-size: 24px;
    color: #fff;
    background: #efb51a;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.link-btn.enlarge i {
    line-height: 60px;
    width: 40px;
    padding-right: 20px;
    font-size: 34px;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
}

.link-btn.enlarge .fa-desktop {
    padding-right: 15px;
    width: 45px;
    font-size: 28px;
    padding-top: 5px;
    line-height: 55px;
}

.link-btn.center { margin: 0 auto; }

.link-btn:hover i { width: 150px; }

.link-btn.enlarge:hover i { width: 265px; }
.link-btn.enlarge:hover .fa-desktop { width: 270px; }

.ecommerce-function i {
    font-size: 32px;
    width: 90px;
    line-height: 120px;
    border: 10px #f1f1f1 solid;
    text-align: center;
    color: #999;
    margin: 0 auto 15px;
    display: block;
}

.ecommerce-function .fa-facebook-official, .ecommerce-function .fa-envelope-o { font-size: 36px; }
.ecommerce-function .fa-mobile { font-size: 56px; }
.ecommerce-function .fa-shopping-cart { font-size: 40px; }

.ecommerce-function p {
    text-align: center;
    margin-bottom: 30px;
}

.grey { background: #f1f1f1; }

.t2l2 img { width: 100%; }

.t3s1l1, .t4s1l1 { text-align: center; }

.benefits-list {
    list-style: none;
    padding: 45px 0;
    margin: 0 -15px;
}

.benefits-list > li {
    position: relative;
    overflow: hidden;
    padding: 45px 0;
}

.benefits-list > li:nth-child(even) { background: url(../img/shadow-top.png) center top no-repeat, url(../img/shadow-bottom.png) center bottom no-repeat; }

.benefits-list .image {
    position: relative;
    z-index: 1;
    width: 33.333333%;
    overflow: hidden;
    background: #f6f6f6;
    border: 1px #ccc solid;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 45px 0 45px 0;
    -moz-border-radius: 45px 0 45px 0;
    -webkit-border-radius: 45px 0 45px 0;
}

.benefits-list .imageleft .image {
    float: left;
    margin-left: 15px;
}
.benefits-list .imageright .image {
    float: right;
    margin-right: 15px;
}

.benefits-list .imageleft .paragraph {
    padding: 0 15px 0 45px;
    margin-left: 33.333333%;
}
.benefits-list .imageright .paragraph {    
    padding: 0 45px 0 15px;
    margin-right: 33.333333%;
}

.benefits-list .paragraph h1 {
    margin-bottom: 15px;
    padding-top: 1px;
    padding-bottom: 6px;
    position: relative;
}

.benefits-list .paragraph h1:after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 1px;
    background: #ccc;
    border-bottom: 1px #fff solid;
}

.benefits-list .imageleft .paragraph h1:after {
    left: -100%;
    right: -15px;
}

.benefits-list .imageright .paragraph h1:after {
    left: -15px;
    right: -100%;
}

.gst-benefit { background: #f6f6f6; }

.gst-benefit h4 {
    background: #71675f;
    color: #fff;
    font-family: Roboto, sans-serif;
    font-weight: normal;
    line-height: 50px;
}

.gst-benefit h4 i {
    display: block;
    width: 50px;
    line-height: 50px;
    float: left;
    text-align: center;
    margin-right: 15px;
    border-right: 1px #efb51a solid;
}

.gst-benefit p {
    padding: 15px 15px 18px;
    min-height: 108px;
}

.full-feature-link {
    position: relative;
    line-height: 45px;
    color: #fff;
    background: #71675f;
    width: 200px;
    padding-right: 45px;
    margin: 0 auto;
    text-decoration: none;
    text-align: center;
    display: block;
    border: 2px #71675f solid;
    font-size: 20px;
}

.full-feature-link:hover {
    background: #efb51a;
    color: #fff;
}

.full-feature-link i {
    background: #f1f1f1;
    color: #71675f;
    position: absolute;
    line-height: 45px;
    top: 0;
    right: 0;
    width: 45px;
    font-size: 32px;
    text-align: center;
}

.package-detail {
    background: #222;
    padding: 15px 15px 30px;
    color: #fff;
    position: relative;
}

.package-detail.special { background: #71675f; }

.package-detail h1 {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    padding-bottom: 15px;
    margin-bottom: 15px;
    position: relative;
}
.package-detail h1.center {
	text-align: center;
}

.package-detail h1:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 2px;
    width: 90px;
    background: #fff;
    opacity: 0.7;
    filter: Alpha(Opacity=70);
}
.package-detail h1.center:after {
	display: none;
}

.package-detail p {
    font-size: 16px;
    line-height: 24px;
    min-height: 72px;
}

.package-price {
    padding: 15px;
    background: rgba(255,255,255,0.1);
    margin: 0 -15px 30px;
}

.package-price h2 {
    font-family: Roboto, sans-serif;
    font-weight: 300;
}

.package-price h2 em { font-size: 20px; }

.package-price h6 {
    font-family: Roboto, sans-serif;
    font-weight: 300;
    padding-top: 5px;
    line-height: 24px;
    overflow: hidden;
}

.package-price h6 span {
    display: block;
    float: left;
    margin-right: 5px;
}

.package-price h6 em {
    display: block;
    float: left;
    padding: 0 5px;
    background: #222;
    text-decoration: line-through;
}

.package-detail.special .package-price h6 em { background: #71675f; }

.offer {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 28px;
    text-align: right;
    color: #fff;
    width: 75px;
    height: 75px;
    padding: 5px 10px 15px 15px;
    overflow: hidden;
}

.offer div {
    position: absolute;
    background: #d40000;
    top: -85px;
    right: -75px;
    width: 150px;
    height: 150px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.offer span { position: relative; }

.offer small { margin-left: 3px; }

.offer em {
    font-size: 20px;
    display: block;
    position: relative;
}

.order-btn {
    color: #fff;
    border: 2px #fff solid;
}

.order-btn:hover { color: #222; }
.package-detail.special .order-btn:hover { color: #71675f; }

.order-btn i {
    color: #222;
    background: #fff;
}
.package-detail.special .order-btn i { color: #71675f; }

.package-feature { list-style: none; }

.package-feature li {
    border: 1px #ccc solid;
    border-top: 0;
    padding: 15px;
}

.package-feature li:nth-child(even) { background: #f6f6f6; }

.package-general-feature { list-style: none; }

.package-general-feature li {
    padding: 10px 0 10px 40px;
    position: relative;
}

.package-general-feature li i {
    position: absolute;
    width: 30px;
    line-height: 30px;
    top: 5px;
    left: 0;
    text-align: center;
    color: #999;
    background: #f1f1f1;
}

.video {
    margin-top: 15px;
    border: 10px #222 solid;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

.video iframe { display: block; }

.contact { position: relative; }

.contact-info {
    padding: 60px;
    background: #71675f;
    color: #fff;
}

.contact-info > em {
    display: block;
    font-weight: 300;
    font-size: 12px;
    padding: 5px 0 15px;
}

.contact-info a {
    display: block;
    font-size: 16px;
    line-height: 20px;
    padding: 6px 0;
    padding-left: 40px;
    text-decoration: none;
    position: relative;
    color: #fff;
}

.contact-info a:hover { background: #655c56; }

.contact-info i {
    position: absolute;
    top: 0;
    left: 0;
    line-height: 32px;
    width: 32px;
    text-align: center;
}

.contact-info i.fa-mobile { font-size: 20px; }
.contact-info i.fa-fax { font-size: 14px; }
.contact-info i.fa-envelope-o { font-size: 14px; }

.contact-info span {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 30px;
    width: 1px;
    background: #efb51a;
}

.contact-info p {
    position: relative;
    font-size: 16px;
    line-height: 20px;
    padding: 3px 0;
    padding-left: 40px;
}

.contact-info p em {
    font-size: 12px;
    font-weight: 300;
    display: block;
}

.map {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 33.333333%;
    right: 0;
}

.map iframe {
    width: 100%;
    height: 100%;
}

.contact-form {
    padding: 60px;
    height: 500px;
}

.contact-form .page-title h2 { padding-top: 0; }

.contact-form ul {
    list-style: none;
    margin-top: 30px;
}

.contact-form li {
    position: relative;
    margin-top: 10px;
}

.contact-form li label {
    position: absolute;
    top: 0;
    left: 0;
    color: #999;
    line-height: 40px;
    padding: 0 15px;
    font-size: 14px;
    font-weight: 300;
}

.contact-form li input, .contact-form li textarea {
    width: 100%;
    border: 1px #f1f1f1 solid;
    line-height: 38px;
    font-size: 14px;
    color: #333;
    padding: 0 15px;
    text-align: right;
    outline: none;
    font-family: Roboto, sans-serif;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.contact-form li input#name { text-transform: capitalize; }

.contact-form li textarea {
    line-height: 1.14;
    padding: 40px 15px 12px;
    text-align: left;
    height: 100px;
    resize: none;
    overflow: auto;
}

.contact-form li input:focus, .contact-form li textarea:focus { border-bottom: 1px #71675f solid; }

.contact-form li > i {
    font-size: 12px;
    position: absolute;
    width: 15px;
    line-height: 15px;
    text-align: center;
    top: 0;
    right: 0;
    color: #ccc;
}

.contact-form li > i.fa-asterisk { color: #00d400; }
.contact-form li > i.fa-times { color: #d40000; }
.contact-form li > i.fa-check { color: #0000d4; }

.contact-form li button {
    margin-top: 30px !important;
    display: block;
    width: 164px;
    background: #fff;
    outline: none;
    cursor: pointer;
}

.contact-form li button i {
    font-size: 16px;
}

.recaptcha {
    background: #f9f9f9;
    height: 90px;
    border: 1px #f1f1f1 solid;
    overflow: hidden;
}

.recaptcha span {
    overflow: hidden;
    display: block;
    width: 298px;
    height: 72px;
    position: absolute;
    top: 9px;
    left: -4px;
    right: -4px;
    margin: 0 auto;
}

.recaptcha .g-recaptcha { margin: -2px; }

.map iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.submissionpage div {
    background: #71675f;
    color: #fff;
    margin-top: 100px;
}

.submissionpage p {
    max-width: 768px;
    padding: 30px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    text-align: justify;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.submissionpage a {
    display: block;
    float: right;
    color: #fff;
    border: 2px #fff solid;
}

.submissionpage a:hover { color: #71675f; }

.submissionpage a i {
    font-size: 14px;
    color: #71675f;
    background: #fff;
}

.performance {
    list-style: none;
    margin-top: 15px;
    font-size: 14px;
}

.performance li {
    position: relative;
    margin-top: 3px;
}

.performance li div {
    position: absolute;
    left: 100px;
    right: 0;
    top: 0;
    bottom: 0;
    background: #222;
    border: 1px #fff solid;
    opacity: 0.3;
    filter: Alpha(Opacity=30);
}

.special .performance li div { background: #71675f; }

.performance li div span {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: #fff;
}

.domainlist {
    background: #fff;
    margin-bottom: 30px;
}

.domainlist h4 {
    text-align: center;
    padding: 30px 15px;
}

.domainlist table {
    font-size: 14px;
    table-layout: fixed;
    width: 100%;
    position: relative;
}

.domainlist table th {
    background: #71675f;
    color: #fff;
    border-left: 1px #f1f1f1 solid;
    padding: 10px 15px;
    font-weight: 500;
}

.domainlist table th:first-child { border: none; }

.domainlist table td {
    text-align: center;
    padding: 10px 15px;
    height: 36px;
    border-bottom: 1px #ddd solid;
}

.domainlist table td:nth-child(2) { background: #f9f9f9; }

.domainlist table td b {
    display: block;
    font-size: 16px;
    color: #cd2129;
    font-weight: 400;
}

.domainlist table td.countdown {
    display: table-cell;
    background: transparent;
    font-style: normal;
    font-weight: normal;
    text-align: center;
    padding: 5px 15px;
    background: #cd2129;
    color: #fff;
    font-size: 14px;
}

.domainlist table td div {
    position: absolute;
    right: 0;
    color: #fff;
    display: none;
    border: 1px #246880 solid;
    margin-top: 15px;
}

.domainlist table td span {
    background: #3fa09a;
    border: 1px #246880 solid;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    display: block;
    width: 10px;
    height: 10px;
    right: 5px;
    position: absolute;
    top: -5px;
}

.domainlist table td p {
    padding: 6px 12px;
    background: #3fa09a;
    position: relative;
    text-align: right;
    max-width: 240px;
}

.domainlist table td:hover div { display: block; }

.mynic {
    border-bottom: 1px #ddd solid;
    padding-bottom: 57px;
    position: relative;
}

.mynic img { margin: 31px auto 75px; }

.mynic .highlight {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    font-size: 14px;
    padding: 20px 15px;
    line-height: 1.5;
    color: #fff;
    background: #cd2129;
    text-align: center;
}

.mynic .highlight span {
    display: block;
    background: #fff;
    color: #cd2129;
    width: 180px;
    font-weight: 700;
    font-family: Ubuntu, sans-serif;
    margin: 0 auto;
    font-size: 16px;
}

.searchdomain {
    height: 35px;
    position: relative;
    overflow: hidden;
    margin-top: 30px;
}

.searchdomain button {
    float: none;
    height: 35px;
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    font-weight: 400;
    background: #71675f;
    color: #fff;
    cursor: pointer;
    outline: none;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.searchdomain button:hover {
    background: #efb51a;
}

.searchdomain select {
    font-size: 16px;
    right: 103px;
    position: absolute;
    top: 0;
    outline: none;
    background: #fff;
    border: 1px #ddd solid;
    margin: 0;
    padding: 0 0 0 5px;
    width: 95px;
    height: 35px;
    font-family: Roboto, sans-serif;
}

.searchdomain span {
    position: absolute;
    right: 197px;
    left: 0;
}

.searchdomain input[type="text"] {
    outline: none;
    text-align: center;
    background: #fff;
    border: 1px #ddd solid;
    border-right: 0;
    margin: 0;
    padding: 0;
    height: 35px;
    width: 100%;
    font-family: Roboto, sans-serif;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.searchdomain label {
    font-size: 16px;
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    line-height: 33px;
    text-align: center;
    font-weight: 400;
    cursor: text;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.searchdomain label.hide {
    visibility: hidden;
    opacity: 0;
    filter: Alpha(Opacity=0);
}

.t5s1l3 ol { padding-left: 20px; }

.t5s1l3 ol li {
    margin-bottom: 15px;
    font-size: 16px;
}

.t3s2l2, .t4s2l2, .t5s1l4 { border-top: 1px #f1f1f1 solid; }

.stars { overflow: hidden; }

.stars span {
    display: block;
    float: right;
}

.stars span img { display: inline; }

.rating-text {
    display: block;
    font-size: 14px;
    line-height: 20px;
}

.overlay {
    background: #000;
    opacity: 0;
    filter: Alpha(Opacity=0);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    visibility: hidden;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.overlay.active {
    visibility: visible;
    opacity: 0.7;
    filter: Alpha(Opacity=70);
}

.lightbox {
    position: fixed;
    top: 100px;
    left: 100%;
    width: 100%;
    max-height: 100%;
    background: #655c56;
    z-index: 3;
    overflow: auto;
    opacity: 0;
    filter: Alpha(Opacity=0);
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.lightbox.active {
    left: 0;
    opacity: 1;
    filter: Alpha(Opacity=100);
}

.lightbox .container {
    position: relative;
    max-width: 768px;
    padding: 0 15px;
}

.field { position: relative; }

.field label {
    position: absolute;
    top: 0;
    left: 0;
    color: #999;
    line-height: 40px;
    padding: 0 15px;
    font-size: 14px;
    font-weight: 300;
}

.field input {
    width: 100%;
    line-height: 38px;
    font-size: 14px;
    color: #333;
    padding: 0 15px;
    text-align: right;
    outline: none;
    font-family: Roboto, sans-serif;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.field > i {
    font-size: 12px;
    position: absolute;
    width: 15px;
    line-height: 15px;
    text-align: center;
    top: 0;
    right: 0;
    color: #ccc;
}

.field > i.fa-asterisk { color: #00d400; }
.field > i.fa-times { color: #d40000; }
.field > i.fa-check { color: #0000d4; }

.field button {
    position: relative;
    display: block;
    height: 38px;
    width: 100%;
    border: 2px #fff solid;
    background: #655c56;
    color: #fff;
    font-size: 16px;
    font-family: Ubuntu, sans-serif;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    padding-left: 36px;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.field button:hover {
    background: #efb51a;
    border: 2px #efb51a solid;
}

.field button i {
    position: absolute;
    line-height: 34px;
    width: 34px;
    border-right: 2px #655c56 solid;
    padding-right: 2px;
    text-align: center;
    background: #fff;
    color: #655c56;
    top: 0;
    left: 0;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.field button:hover i {
    background: #efb51a;
    color: #fff;
}

.close-btn {
    position: absolute;
    right: 15px;
    top: -36px;
    width: 30px;
    height: 30px;
    overflow: hidden;
}

.close-btn span {
    position: absolute;
    height: 2px;
    background: #fff;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 14px;
    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;
}

.close-btn span:first-child {
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.close-btn:hover span {
    transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.close-btn:hover span:first-child {
    transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.portfolio-form .page-title {
    opacity: 1;
    filter: Alpha(Opacity=100);
}

.portfolio-form .page-title:after {
    height: 2px;
    bottom: -1px;
}

.portfolio {
    position: relative;
    display: block;
}

.portfolio div {
    background: #000;
    opacity: 0;
    filter: Alpha(Opacity=0);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.portfolio:hover div {
    opacity: .9;
    filter: Alpha(Opacity=90);
}

.portfolio span {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    margin-top: -25px;
    opacity: 0;
    filter: Alpha(Opacity=0);
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.portfolio:hover span {
    top: 50%;
    opacity: 1;
    filter: Alpha(Opacity=100);
}

.portfolio span i {
    display: block;
    width: 50px;
    line-height: 50px;
    background: #fff;
    color: #333;
    margin: 0 auto 15px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.client-logo img {
    padding: 15px 0;
    transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.client-logo img:hover {
    transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
}

.page-link {
    display: block;
    background: #fff;
    margin: 30px 0;
    text-decoration: none;
    color: #333;
}

.page-link:hover {
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.page-link h3 {
    position: relative;
    padding: 15px 30px;
    margin-top: -57px;
    color: #fff;
    background: rgba(0,0,0,0.3);
}

.page-link h3:after {
    content: "";
    width: 60px;
    height: 2px;
    background: #efb51a;
    position: absolute;
    bottom: -1px;
    left: 15px;
    margin: 0 auto;
}

.page-link p {
    padding: 30px;
    font-size: 16px;
}

.phone {
    position: fixed;
    cursor: pointer;
    width: 200px;
    height: 200px;
    z-index: 3;
    top: 100%;
    left: 100%;
    cursor: pointer;
    opacity: 0;
    filter: Alpha(Opacity=0);
}

.phone.active {
    opacity: .7;
    filter: Alpha(Opacity=70);
    transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -wekbit-transform: scale(1);
}

.phone:hover {
    opacity: 1;
    filter: Alpha(Opacity=100);
}

@keyframes wave1 {
    0% { top: 70px; left: 70px; bottom: 70px; right: 70px; }
    20% { top: 50px; left: 50px; bottom: 50px; right: 50px; opacity: 1; filter: Alpha(Opacity=100); }
    100% { top: 0px; left: 0px; bottom: 0px; right: 0px; opacity: 0; filter: Alpha(Opacity=0); }
}

@-webkit-keyframes wave1 {
    0% { top: 70px; left: 70px; bottom: 70px; right: 70px; }
    20% { top: 50px; left: 50px; bottom: 50px; right: 50px; opacity: 1; filter: Alpha(Opacity=100); }
    100% { top: 0px; left: 0px; bottom: 0px; right: 0px; opacity: 0; filter: Alpha(Opacity=0); }
}

.phone div {
    border: 1px #efb51a solid;
    position: absolute;
    top: 70px;
    left: 70px;
    bottom: 70px;
    right: 70px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    animation: wave1 1.5s infinite;
    -moz-animation: wave1 1.5s infinite;
    -webkit-animation: wave1 1.5s infinite;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.phone:hover div {
    border: 1px #71675f solid;
    animation: wave1 1s infinite;
    -moz-animation: wave1 1s infinite;
    -webkit-animation: wave1 1s infinite;
}

@keyframes wave2 {
    0% { top: 70px; left: 70px; bottom: 70px; right: 70px; opacity: 0; filter: Alpha(Opacity=0); }
    50% { top: 50px; left: 50px; bottom: 50px; right: 50px; opacity: .3; filter: Alpha(Opacity=30); }
    100% { top: 70px; left: 70px; bottom: 70px; right: 70px; opacity: 0; filter: Alpha(Opacity=0); }
}

@-webkit-keyframes wave2 {
    0% { top: 70px; left: 70px; bottom: 70px; right: 70px; opacity: 0; filter: Alpha(Opacity=0); }
    50% { top: 50px; left: 50px; bottom: 50px; right: 50px; opacity: .3; filter: Alpha(Opacity=30); }
    100% { top: 70px; left: 70px; bottom: 70px; right: 70px; opacity: 0; filter: Alpha(Opacity=0); }
}

.phone span {
    position: absolute;
    background: #efb51a;
    top: 70px;
    left: 70px;
    bottom: 70px;
    right: 70px;
    opacity: .3;
    filter: Alpha(Opacity=30);
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    animation: wave1 1.5s infinite;
    -moz-animation: wave2 1.5s infinite;
    -webkit-animation: wave2 1.5s infinite;
    transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    -webkit-transition: .5s ease;
}

.phone:hover span {
    background: #71675f;
    animation: wave1 1s infinite;
    -moz-animation: wave2 1s infinite;
    -webkit-animation: wave2 1s infinite;
}

.phone i {
    position: absolute;
    background: #efb51a;
    top: 70px;
    left: 70px;
    bottom: 70px;
    right: 70px;
    line-height: 60px;
    text-align: center;
    color: #fff;
    font-size: 24px;
    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;
}

@keyframes vibrate {
    0% { transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
    10% { transform: rotate(-22deg); -moz-transform: rotate(-22deg); -ms-transform: rotate(-22deg); -webkit-transform: rotate(-22deg); }
    20% { transform: rotate(22deg); -moz-transform: rotate(22deg); -ms-transform: rotate(22deg); -webkit-transform: rotate(22deg); }
    30% { transform: rotate(-22deg); -moz-transform: rotate(-22deg); -ms-transform: rotate(-22deg); -webkit-transform: rotate(-22deg); }
    40% { transform: rotate(22deg); -moz-transform: rotate(22deg); -ms-transform: rotate(22deg); -webkit-transform: rotate(22deg); }
    50% { transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
}

@-webkit-keyframes vibrate {
    0% { transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
    10% { transform: rotate(-22deg); -moz-transform: rotate(-22deg); -ms-transform: rotate(-22deg); -webkit-transform: rotate(-22deg); }
    20% { transform: rotate(22deg); -moz-transform: rotate(22deg); -ms-transform: rotate(22deg); -webkit-transform: rotate(22deg); }
    30% { transform: rotate(-22deg); -moz-transform: rotate(-22deg); -ms-transform: rotate(-22deg); -webkit-transform: rotate(-22deg); }
    40% { transform: rotate(22deg); -moz-transform: rotate(22deg); -ms-transform: rotate(22deg); -webkit-transform: rotate(22deg); }
    50% { transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
}

.phone:hover i {
    background: #71675f;
	color: #efb51a;
    animation: vibrate 1s infinite;
    -moz-animation: vibrate 1s infinite;
    -webkit-animation: vibrate 1s infinite;
}

.container-benefit{
	padding:20px 350px;
	margin-left:45px;
}

.homepage_content{
	padding:60px 140px 60px 140px;
}