/*------------------------------------------------------------------
[Master Stylesheet]

Project:	ARISTA - CREATIVE ONE PAGE TEMPLATE
Version:	V1.0
Last change:	02/07/14 
Author:	abmathasuriya on themeforest.
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table of contents]

1. IMPORT GOOGLE FONT
2. COMMON STYLE
	2.1 BUTTON ELEMENT
	2.2 PARALLAX STYLE
	2.3 HOME SCROLL DOWN
3. NAVIGATION
4. PRELOADER	
5. HOME SECTION
6. ABOUT SECTION
	6.1 FLEX SLIDER STYLE
	6.2 INTRO NAVIGATION
7. NUMBER SECTION
8. TEAM SECTION
9. CLIENT SECTION
10. SERVICE SECTION
	10.1 PROCESS BLOCK
11. PORTFOLIO SECTION
	11.1 TESTIMONIAL
12. BLOG POST
13. SUBSCRIBE CUBOID
14. CONTACT SECTION	
	14.1. TWITTER SECTION
15. FOOTER SECTION	
16. MEDIA QUERY 
	
-------------------------------------------------------------------*/

/* 1. IMPORT GOOGLE FONT
-------------------------*/

@import url(https://fonts.googleapis.com/css?family=Oswald:400,500,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300);

/* 2. COMMON STYLE
-------------------------*/
html {font-size: 62.5%;}
body {
	height: 100%;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	line-height: 1.7;
	color: #666;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	background: #000;
}
a {color: #333;text-decoration: none;}
a:hover,a:focus {
	color: #FFF;
	text-decoration: none;
}
img{max-width:100%;}
h1,h2,h3,h4,h5,h6 {margin: 1em 0;font-weight: 400;line-height: 1.3;text-transform: uppercase;text-rendering:optimizelegibility;}
h1 {font-size: 52px;}
h2 {font-size: 30px;}
h3 {font-size: 24px;}
h4 {font-size: 21px;}
h5 {font-size: 18px;}
h6 {font-size: 14px;}
p {margin: 0 0 1em;}
ul, ol {list-style: none outside none;margin: 0;padding: 0;}

.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-delay: 0s;animation-delay: 0s;}
.text-center{text-align:center;}
.text-left{text-align:left;}
.container {padding: 0;}
.row {margin:0;}
.section-heading{padding-bottom:40px;max-width:850px;margin:0 auto;}
.section-heading .title{  margin: 0;font-size: 4.5em;font-weight: 900;letter-spacing: -3px;font-family:open sans;line-height:1;color:#000;}
.section-heading .title span{display: inline-block;padding: 0 30px;}
.section-heading .subtitle{color: #000;font-size: 1.3em;font-weight: 300;letter-spacing: 0;line-height: 1em;margin: 10px 0;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.04);
    text-transform: uppercase;}
	
/* 2.1 BUTTON ELEMENT
-------------------------*/
.btn {text-transform: uppercase;font-weight: 400;-webkit-border-radius:0px;-moz-border-radius: 0px;-ms-border-radius: 0px;-o-border-radius:0px;border-radius: 0px;
  border: 0;-webkit-transition: all 0.4s;-moz-transition: all 0.4s;-ms-transition: all 0.4s;-o-transition: all 0.4s;transition: all 0.4s;}
.btn:hover {color: #fff;}
.btn-default {color: #fff;background: #556270;}
.btn-default:hover {background: #FF6B6B;}
button,a {border: none;}

/* 2.2 PARALLAX STYLE
-------------------------*/
.parallax {padding: 0;font-size: 2em;color: #fff;text-align: center;background-attachment: fixed;background-position: 50% 0;-webkit-background-size: cover;background-size: cover;background-repeat: no-repeat;position:static;}
@media only screen and (max-width: 1024px) {
  .parallax {background-attachment: scroll !important; background-position: center top !important;}
}
.parallax .container {position: relative;margin: 0 auto;padding: 0px 0;z-index: 0;}
@media (min-width: 768px) {
  .parallax .container {padding: 0;}
}
.parallax .bx-wrapper .bx-controls .bx-pager {
  top: 20px;
}
.background-overlay {opacity:.2;-webkit-opacity:.2;-moz-opacity:.2;filter: alpha(opacity=30);position: absolute;z-index: 0;height: 100%;width: 100%;background-color: #000; background-repeat:repeat;}

/* 2.3 HOME SCROLL DOWN
-------------------------*/
#home .go,#home-down .go {bottom: 40px;height: 20px;left: 50%;margin: 0 auto 0 -38px;position: fixed;width: 76px;z-index: 100;border:5px solid #fff;text-align:center;
	transition: all 0.8s ease 0s;-moz-transition: all 0.8s ease 0s;-o-transition: all 0.8s ease 0s;
	-webkit-transition: all 0.8s ease 0s;
	border-radius: 50% 50% 50% 50%;
	-webkit-border-radius: 50% 50% 50% 50%;
}
#home .go i,#home-down .go i{color: #FFFFFF;font-size: 28px;line-height: 1px;text-align:center;

	-webkit-animation-delay:0s;
	animation-delay:0s;
	-moz-animation-delay:0s;
	-ms-animation-delay:0s;
	-o-animation-delay:0s;
	
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	-o-animation-duration: 2s;
	animation-duration: 2s;
	
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	
	-webkit-animation-name: down;
	-moz-animation-name: down;
	-o-animation-name: down;
	-ms-animation-name: down;
	animation-name: down;
	
    animation-timing-function: bounce;
	-webkit-animation-timing-function: bounce;
	-moz-animation-timing-function: bounce;
	-o-animation-timing-function: bounce;	
	transition: all 0.8s ease 0s;-moz-transition: all 0.8s ease 0s;-o-transition: all 0.8s ease 0s;
	-webkit-transition: all 0.8s ease 0s;
}
@keyframes down {
0%, 20%, 50%, 80%, 100% {transform:translateY(0)}
40% {transform:translateY(-30px);}
60%{transform:translateY(-15px);}
}
@-webkit-keyframes down {
0%, 20%, 50%, 80%, 100% {-webkit-transform:translateY(0)}
40% {-webkit-transform:translateY(-30px);}
60%{-webkit-transform:translateY(-15px);}
}
@-moz-keyframes down {
0%, 20%, 50%, 80%, 100% {-moz-transform:translateY(0)}
40% {-moz-transform:translateY(-30px);}
60%{-moz-transform:translateY(-15px);}
}
@-o-keyframes down {
0%, 20%, 50%, 80%, 100% {-o-transform:translateY(0)}
40% {-o-transform:translateY(-30px);}
60%{-o-transform:translateY(-15px);}
}
#home .go:hover, #home-down .go:hover{border:5px solid #FFC229;color:#FFC229;}
#home .go:hover i{color:#FFC229 !important}
#home-down{position:relative;overflow:hidden;height:100%;width:100%;}

/* 3. NAVIGATION
-------------------------*/
#header {padding: 35px 0;position: fixed;top: 0;width: 100%;z-index:2;transition: all 0.5s ease 0s;-webkit-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;}
.header-inner {margin: auto;position: relative; width: 85%;}
.nav-logo {
	background: url("../images/MH_logo.png") no-repeat scroll 0 0 transparent;
	height: 64px;
	margin-top: 5px;
	width: 260px;
	float: left;
}
#header .navicon {background: url("../images/navicon-icon.png") no-repeat scroll 0 -28px transparent;height: 27px;width: 36px;cursor: pointer;float: right;}
#header.scrolled {background:#000; padding:20px 0;}
#header.scrolled .logo {margin-top:4px;}
#nav {background:#000;padding: 40px 0 0;position: fixed;top: -380px;width: 100%;z-index: 3;}
.hidden-con{display: none;}
#nav .close {background: url("../images/nav-close.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);height: 28px;width: 29px;cursor: pointer;float: right;opacity:1;}
#nav .menunav-container{float: left;position: relative;width: 100%;text-align: center;}
#menu-main-nav {height: 255px;padding: 85px 0 0;width: 100%;list-style: none outside none;margin: 0;border: medium none;display: inline-block;}
#nav li {float: left;width: 14%;}
#nav li a {color: #fff;font-size: 16px;padding-bottom: 10px;text-transform: uppercase;font-style: normal;font-weight: 600;letter-spacing: 2px;outline: 0 none;
    text-decoration: none;}
#nav li a .sub {background:rgba(0, 0, 0, 0);border: medium none;float: left;font-size: 14px;font-weight: normal;letter-spacing: 1px;margin-top:0px;opacity: 0;
    padding: 20px 0 0;text-transform: none;width: 100%;}
#nav li a:hover {border-bottom: 2px solid #fff;}	
#nav li a:hover .sub {opacity: 1;}


/* 4. PRELOADER
-------------------------*/
#preloader {background-color: #000;bottom: 0;left: 0;position: fixed;right: 0;top: 0;z-index: 2147483647;}
#status {height: 100%;position: relative;width: 100%;}
#status div {left: 50%;margin: -25px 0 0 -25px;top: 50%;}
.loader1 {border: 2px solid #FFC229;border-radius:46px;-webkit-border-radius:46px;height: 46px;position: absolute;width: 46px;

	-webkit-animation-delay:0s;
	animation-delay:0s;
	-moz-animation-delay:0s;
	-ms-animation-delay:0s;
	-o-animation-delay:0s;
	
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	-o-animation-duration: 2s;
	animation-duration: 2s;
	
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	
	-webkit-animation-name: loader;
	-moz-animation-name: loader;
	-o-animation-name: loader;
	-ms-animation-name: loader;
	animation-name: loader;
	
    animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-o-animation-timing-function: linear;	
}
.loader2 {
    	-webkit-animation-delay:0.5s;
	animation-delay:0.5s;
	-moz-animation-delay:0.5s;
	-ms-animation-delay:0.5s;
	-o-animation-delay:0.5s;
	
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
		
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	
    -webkit-animation-name: loader;
    -moz-animation-name: loader;
    -o-animation-name: loader;
	-ms-animation-name: loader;
    animation-name: loader;
    
	animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-o-animation-timing-function: linear;
    border: 2px solid #FFC229;
    border-radius: 46px 46px 46px 46px;
    height: 46px;
    position: absolute;
    transform: scale(0);-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);-ms-transform: scale(0);
    width: 46px;
}
.loader3 {
    	-webkit-animation-delay:1s;
	animation-delay:1s;
	-moz-animation-delay:1s;
	-ms-animation-delay:1s;
	-o-animation-delay:1s;
	
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
		
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	
    -webkit-animation-name: loader;
    -moz-animation-name: loader;
    -o-animation-name: loader;
	-ms-animation-name: loader;
    animation-name: loader;
    
	animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-o-animation-timing-function: linear;
    border: 2px solid #FFC229;
    border-radius: 46px 46px 46px 46px;
    height: 46px;
    position: absolute;
    transform: scale(0);-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);-ms-transform: scale(0);
    width: 46px;
}
.loader4 {
    -webkit-animation-delay:1.5s;
	animation-delay:1.5s;
	-moz-animation-delay:1.5s;
	-ms-animation-delay:1.5s;
	-o-animation-delay:1.5s;
	
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	-o-animation-duration: 2s;
	animation-duration: 2s;
	
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	
	-webkit-animation-name: loader;
	-moz-animation-name: loader;
	-o-animation-name: loader;
	-ms-animation-name: loader;
	animation-name: loader;
	
    animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	
    border: 2px solid #FFC229;background:#FFC229;border-radius:46px;-webkit-border-radius:46px;height: 46px;position: absolute;width: 46px;
    transform: scale(0);-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);-ms-transform: scale(0);
}
#status p {
    color: white;font-size: 0.8em;font-weight: 900;left: 50%;letter-spacing: 3px;line-height: 1em;margin-left: -55px;position: absolute;text-align: center;text-decoration: none;text-transform: uppercase;top: 55%;}
@keyframes loader {
0%  {-webkit-transform:scale(0); -moz-transform: scale(0); transform: scale(0); -o-transform:scale(0);opacity: 0;}
70% {opacity: 1;}
100%{-webkit-transform:scale(1); -moz-transform: scale(1); transform: scale(1); -o-transform:scale(1);	opacity: 0;	}
}
@-moz-keyframes loader {
0%  {-webkit-transform:scale(0); -moz-transform: scale(0); transform: scale(0); -o-transform:scale(0);opacity: 0;}
70% {opacity: 1;}
100%{-webkit-transform:scale(1); -moz-transform: scale(1); transform: scale(1); -o-transform:scale(1);opacity: 0;}
}

@-webkit-keyframes loader {
0%  {-webkit-transform:scale(0); -moz-transform: scale(0); transform: scale(0); -o-transform:scale(0);opacity: 0;}
60% {opacity: 1;}
100%{-webkit-transform:scale(1); -moz-transform: scale(1); transform: scale(1); -o-transform:scale(1);opacity: 0;}
}

@-o-keyframes loader {
0%  {-webkit-transform:scale(0); -moz-transform: scale(0); transform: scale(0); -o-transform:scale(0);opacity: 0;}
70% {opacity: 1;}
100%{-webkit-transform:scale(1); -moz-transform: scale(1); transform: scale(1); -o-transform:scale(1);opacity: 0;}
}
/* 5. HOME SECTION
-------------------------*/

#home {height: 100%;width: 100%;min-height:400px;background-color:#000;display:block;}
.home-slider{background-color:transparent !important;}
#home.bg1 {background-image:url("../images/sliderimg/homebg1.jpg");}
.bg-overlay { opacity: 0.01;-webkit-opacity:0.01;-moz-opacity:0.01;filter: alpha(opacity=30);position: absolute;z-index: 0;height: 100%;width: 100%;background-color: #000; background-repeat:repeat; background-image: url("../images/bganimated.gif");}
#home .title {margin: 10px 0 0;font-size: 2em;}
.bg {background-attachment: fixed;background-position: center top;background-size: cover;display: none;height: 100%;left: 0;position: fixed;top: 0;width: 100%;
    z-index: -3;}
.player {display: block;height: 100%;left: 0;position: fixed;top: 0;width: 100%;z-index: -3;}
#home .slideshow-home {position: fixed;z-index: 0;height: 100%;width: 100%;min-height:400px;overflow: hidden;padding: 0;list-style: none;}
.wrapper {
height: auto;left: 50%;position: absolute;top: 50%;width:850px;transform: translateX(-50%) translateY(-50%);-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);-o-transform: translateX(-50%) translateY(-50%);z-index:-1;
}
.wrapper .inner {
  display: table-cell;
  vertical-align: middle;
}
.page-content{position:relative;z-index:1;}
#home hr{width:80%;margin:0 auto;}
#heading-slider-style1 {margin: 0 auto;width: 850px;	position:relative;}
#heading-slider-style1 .owl-controls .owl-buttons .owl-prev {background: url("../images/prev.png") no-repeat scroll 0 0 transparent;left: 0;cursor: pointer;height: 59px;margin-top: -40px;outline: 0 none;position: absolute;
    text-indent: -9999px;top: 50%;width: 59px;z-index: 18;}
#heading-slider-style1  .owl-controls .owl-buttons .owl-next {background: url("../images/next.png") no-repeat scroll 0 0 transparent;right: 0;cursor: pointer;height: 59px;margin-top: -40px;outline: 0 none;position: absolute;
    text-indent: -9999px;top: 50%;width: 59px;z-index: 18;}
	
.item-container{color: #FFFFFF;margin: 0 auto;padding: 0px 40px 0;position: relative;text-align: center;transition: opacity 2s ease 1s;-webkit-transition: opacity 2s ease 1s;-moz-transition: opacity 2s ease 1s;-o-transition: opacity 2s ease 1s;}
.item-container h4{color: #FFFFFF;font-size: 96px;font-weight: 800;letter-spacing: 0;margin-bottom: 20px;text-transform: uppercase;line-height: 1em;margin-top: 0px;
	font-family:'Oswald',sans-serif;text-shadow:1px 1px 1px rgba(0, 0, 0, .8);transition: all 0.2s ease-out 0.2s;-webkit-transition: all 0.2s ease-out 0.2s;-moz-transition: all 0.2s ease-out 0.2s;-o-transition: all 0.2s ease-out 0.2s;}
.item-container p{color: #FFFFFF;font-size: 28px;font-weight: 400;letter-spacing: 0;margin-bottom: 20px;text-transform: uppercase;line-height: 1em;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.004);}
.owl-fade-in .item-container h4 {color:#ffc229;transition: opacity 2s ease 1s;-webkit-transition: opacity 2s ease 1s;-moz-transition: opacity 2s ease 1s;-o-transition: opacity 2s ease 1s;}


/* 6. ABOUT SECTION
-------------------------*/
section#aboutWrapper {
	background: #fff;
	color: #000000;
	display: block;
	position: relative;
	padding-top: 50px;
	padding-right: 0;
	padding-bottom: 50px;
	padding-left: 0;
}
section#aboutWrapper .section-heading{padding:0;}
section#introWrapper {
	display: block;
	min-height: 400px;
	position: relative;
	width: 100%;
	background-color: #000000;
	background-image: url("../images/home_background.jpg");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
}
section#introWrapper .intro-nav{background:rgba(255,255,255,1)}
.intro-container {
	height: auto;
	left: 865px;
	position: absolute;
	top: 200px;
	width: 650px;
	transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
}
.intro-container h2 {font-size: 3em;font-weight: 900;line-height: 70px;margin: 0 0 0px;text-align: center;text-transform: uppercase;color:#000;font-family: open sans;}
.intro-container p {color: #000000;font-size: 14px;font-weight: 400;line-height: 28px;text-align: center;}

/* 6.1 FLEX SLIDER STYLE */
.slider .flex-direction-nav {z-index: 10;}
.slider .flex-next {display: block;position: absolute;right: -26px;top: 50%;z-index: 999;}
.slider .flex-prev {display: block;position: absolute;left: -26px;top: 50%;z-index: 999;}
.slider .flex-prev i, .slider .flex-next i{color:#999;font-size:38px;}
.slider .flex-prev i:hover, .slider .flex-next i:hover{color:#333;}
.pane {color: #323131;float: left;padding: 0 ;}
.pane h3 {font-size: 2.8em;font-weight: 900;margin: 0.65em 0 0.3em;font-family: open sans;letter-spacing:-1px;text-align:center;}
.pane h3  span{color:#000;text-align:center;padding:0 10px;-webkit-transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s;-ms-transition:all 0.3s ease 0s;
  -o-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;}
.pane h3  span:hover{background:#FFC229;}
.pane .details {margin: 0 auto;max-width: 630px;padding: 0 20px;text-align:center;}

/* 6.2 INTRO NAVIGATION */
.aboutintro-nav {-moz-box-sizing: border-box;text-align: center;width: 100%;}
.aboutintro-nav li {-moz-box-sizing: border-box;display: inline-table;margin: 0;width: auto;position:relative;}
@media screen and (min-width: 570px) {
.aboutintro-nav li {padding:0;}
}
.aboutintro-nav li a {background:#000;box-sizing: border-box;color: #fff;display: block;font-weight: 300;line-height: 1;margin: 0 auto;outline: 0 none;padding: 20px;
    text-align: left;font-size: 1.6em;font-weight: 900;text-transform: uppercase;transition: all 0.4s ease-in-out 0s;-webkit-transition: all 0.4s ease-in-out 0s;
	-moz-transition: all 0.4s ease-in-out 0s;-o-transition: all 0.4s ease-in-out 0s;-ms-transition: all 0.4s ease-in-out 0s;}
.aboutintro-nav li.active a{background:#FFC229;color:#000;transition: all 0.4s ease-in-out 0s;-webkit-transition: all 0.4s ease-in-out 0s;-moz-transition: all 0.4s ease-in-out 0s;-o-transition: all 0.4s ease-in-out 0s;-ms-transition: all 0.4s ease-in-out 0s;}
.aboutintro-nav li.active a span{visibility:hidden;}


/* 7. NUMBER SECTION */
#counter {background:#000;color: #fff;left: 0;position: relative;text-align: center;width: 100%;}
.counterblock {display: block;margin: 0 auto;padding: 60px 0;position: relative;}
.counterblock h2 {color: #fff;font-family: open sans;font-size: 5em;font-weight: 900;letter-spacing: -2px;margin: 0 0 20px 0;text-align: center;text-transform: uppercase;
    line-height: 1;}
.counterblock p{text-transform:uppercase;font-weight:300;margin:0;font-size:20px;}

/* 8. TEAM SECTION */

#team-block{
	background: #fff;
	position: relative;
	padding-top: 50px;
	padding-right: 0;
	padding-bottom: 50px;
	padding-left: 0;
}
#teamgrid {display: block;position: relative;}
#teamgrid .team {
	display: block;
	float: left;
	height: 465px;
	position: relative;
	text-align: center;
	width: 25%;
}
.teamimg1{
	background-image: url(../images/team/01_r.jpg);
}
.teamimg2{
	background-image: url(../images/team/02_r.jpg);
}
.teamimg3{
	background-image: url(../images/team/03_r.jpg);
}
.teamimg4{
	background-image: url(../images/team/04_r.jpg);
}
#teamgrid .team .image {
	background-position: center bottom;
	background-repeat: no-repeat;
	bottom: 0;
	display: block;
	height: 465px;
	opacity: 1;
	position: absolute;
	width: 100%;
	transition: all 0.3s ease-in-out 0s;
	-webkit-transition: all 0.3s ease-in-out 0s;
	-ms-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
}
#teamgrid .team:hover .image{opacity:.1;bottom:-140px}
#teamgrid .team .text {color: #3A4046;opacity: 0;padding: 0 20%;position: absolute;text-align: left;top: 170px;transition: all 0.3s ease-in-out 0s;-webkit-transition: all 0.3s ease-in-out 0s;-moz-transition: all 0.3s ease-in-out 0s;-o-transition: all 0.3s ease-in-out 0s;-ms-transition: all 0.3s ease-in-out 0s;}
#teamgrid .team .text {padding: 0 10%;}
#teamgrid .team .text h3 {line-height: 1;margin: 0 0 5px;font-family: open sans;font-size: 2.4em;font-weight: 900;letter-spacing: -1px;}
#teamgrid .team .text p.title {font-size: 18px;font-style: normal;font-weight: 400;line-height: 22px;text-transform: uppercase;}
#teamgrid .team .text p {font-size: 14px;line-height: 24px;}
#teamgrid .team .text a {background: none repeat scroll 0 0 #FFC229;border-radius: 50%;-webkit-border-radius: 50%;color: #000000;font-size: 1.4em;height: 40px;line-height: 40px;margin-right: 2px;width: 40px;display: inline-block;text-align: center;transition: all 0.3s ease-in-out 0s;-webkit-transition: all 0.3s ease-in-out 0s;-o-transition: all 0.3s ease-in-out 0s;-moz-transition: all 0.3s ease-in-out 0s;-ms-transition: all 0.3s ease-in-out 0s;}
#teamgrid .team .text a:hover{background:#000;color:#fff;}
#teamgrid .team:hover .text {opacity:1;top:90px;}


/* 9. CLIENT SECTION
-------------------------*/
#clients:after{background:rgba(255,255,255,.2);position:absolute;width:100%;height:100%;top:0;}
#clients {
	padding: 50px 0;
	background: url(../images/patt-custom-4c.jpg) #F2F2F2;
	text-align: center;
	position: relative;
}
#clients img {
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  -ms-transition: all 0.25s;
  -o-transition: all 0.25s;
  transition: all 0.25s;
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  filter: gray;
  -webkit-filter: grayscale(100%);
 }
#clients img:hover {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  filter: none;
  -webkit-filter: grayscale(0%);
  transform:scale(1.1);
  -webkit-transform:scale(1.1);
  -o-transform:scale(1.1);
  -ms-transform:scale(1.1);
}

.client-partner ul {margin: 40px auto 0;}
.client-partner ul, .client-partner li {list-style: none outside none;margin: 0;padding: 0;}
.client-partner li {display: inline-block;height: 150px;width: 200px;}
.client-partner li a {display: inline-block;height: 150px;width: 200px;}

/* 10. SERVICE SECTION
-------------------------*/
#services{
	background: #000;
	position: relative;
	padding: 50px 0;
	color: #fff;
}
#services .subtitle{color:#fff;}
#services .section-heading .title span{background:none;color:#fff;}
#service-slider{margin-top:60px;}
.service {background: #111;border-radius: 50% 50% 50% 50%;-webkit-border-radius: 50% 50% 50% 50%;-ms-border-radius: 50% 50% 50% 50%;-o-border-radius: 50% 50% 50% 50%;
    height: 26em;margin-bottom: 40px;overflow: hidden;padding: 40px;position: relative;text-align: center;width: 26em;margin:0 auto;}
.visiblefull{width:30em;height:30em;}
.service .service-title { position: relative;}
.service .service-title .title {display: table;font-size: 2em;font-weight: 900;line-height: normal;margin: 0 auto;padding: 5px 10px;font-family: open sans;line-height: 1;
    letter-spacing: -1px;-webkit-transition: all 0.25s;-moz-transition: all 0.25s;-ms-transition: all 0.25s;-o-transition: all 0.25s;transition: all 0.25s;}
.service:hover .navbar{background-image:none;}
.service:hover .service-title .title{color:#fff;}
.service:hover .service-title i {color: rgba(255, 255, 255, 0.9); opacity:0.2;-webkit-opacity:0.2;-moz-opacity:0.2;}
.service .service-title .arrow-down {top: -1px;left: 50%;margin-left: -20px;}
.service .service-title i {opacity:0.04;-webkit-opacity:0.04;-moz-opacity:0.04;position: absolute;top: 30px;left: 0;width: 100%;font-size: 15em;color: #000;}
.service .service-subtitle{display: block;font-weight: 400;padding: 0px 0 20px;text-transform: uppercase;}
.service p{color:#050F1E;}
.service .description {position: relative;display: inline-block;margin: 0;padding: 0px 0 30px;color:#fff;}
.service .btn {background: none repeat scroll 0 0 transparent;border: 1px solid #FFC229;border-radius: 50% 50% 50% 50%;-webkit-border-radius: 50% 50% 50% 50%;-ms-border-radius: 50% 50% 50% 50%;color: #FFC229;font-size: 3em;height: 100px;line-height: 38px;position: absolute;width: 100px;bottom: -48px;left: 50%;margin-left: -50px;}
.service .btn:hover,.service .btn:active {background: #FFC229;border:1px solid #FFC229;color:#000;}
.service-moredetail{display: none;padding: 80px 0 0 0;position: relative;}
.service-moredetail .close-service i{color:#fff;}
.s-detail h3{color:#fff;float:left; font-size: 2em;font-weight: 900;font-family: open sans;line-height: 1;letter-spacing: -1px;}
.s-detail p{color:#fff;}
.s-detail .service-subtitle {display: block;font-weight: 900;padding: 0px 0;color:#fff;font-weight: 400;text-transform: uppercase;}
.s-detail i{color: #FFFFFF;float: left;font-size: 4em;line-height: 73px;padding-right: 15px;}
.s-detail ul{list-style-type:none}
.s-detail ul li{float:left;padding:10px 20px;margin:0 0 10px 10px;background-color:rgba(255,255,255,.2);font-size:1em;letter-spacing: 0.1em;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);text-transform: uppercase;font-weight: 300;color: #fff; transition: all 0.2s linear 0s;-webkit-transition: all 0.2s linear 0s;-moz-transition: all 0.2s linear 0s;-o-transition: all 0.2s linear 0s;}
.s-detail ul li:hover{background-color:rgba(255,255,255,.1);}

.close-service {cursor: pointer;position: absolute;right: 12px;top: 90px;z-index:2}
.close-service i {border-color: #73E0B8;color: #73E0B8;}
.close-service i{border: 2px solid;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;-o-border-radius: 50%;-ms-border-radius: 50%;
    color: #73E0B8;display: block;font-size: 1.2em;height: 42px;line-height: 40px;text-align: center;transition: all 0.2s linear 0s;-webkit-transition: all 0.2s linear 0s;-moz-transition: all 0.2s linear 0s;-o-transition: all 0.2s linear 0s;width: 42px;}
.close-service:hover{color: #1A1A1A;text-decoration: none;}

/* 10.1 PROCESS BLOCK */

#process {padding:4px 0;background-color:#f2f2f2;position:relative;display:block;}
#process .section-heading{padding:0;}
.process-left {-moz-box-sizing: border-box;float: left;height: 100%;position: relative;width: 33.33%;height:350px;}
.process-right {float: left;width: 66.67%;height: 350px;}
.process-left .our-process {-moz-box-sizing: border-box;display: table;height: 100%;padding-left: 10%;padding-right: 7%;text-align: left;width: 100%;}
.process-left .middle {display: table-cell;vertical-align: middle;}
#process .container{padding:75px 0;}
.p-wrapper {
  display: table;
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
}
.p-wrapper .p-inner {
  display: table-cell;
  vertical-align: middle;
}

.process-container-bg {background: none repeat scroll 0 0 rgba(255, 255, 255, 1);display: inline-block;height: 350px;overflow: hidden;width: 24.5%;position: relative;
	 transition: all 0.4s ease-in-out 0s;	-webkit-transition: all 0.4s ease-in-out 0s;-moz-transition: all 0.4s ease-in-out 0s;-o-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;}
.p-icon{color: #FFC229;font-size: 4em;height: 80px;line-height: 80px;padding:0;width: 80px;margin:0 auto;-webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;}
.process-container-bg h5 {color: #000000;font-family: 'Open Sans',sans-serif !important;font-size: 1.4em;font-weight: 900;letter-spacing: -1px;line-height: 1;padding-top: 0;transition:all 0.2s ease-out 0.2s;-webkit-transition:all 0.2s ease-out 0.2s;-moz-transition:all 0.2s ease-out 0.2s;-o-transition:all 0.2s ease-out 0.2s;	-ms-transition:all 0.2s ease-out 0.2s;}
.process-back {color: #000;font-size:14px;line-height: 22px;padding: 0 10px;transform: scale(0);display:none;
	-webkit-transform: scale(0);-o-transform: scale(0);	-ms-transform: scale(0);-moz-transform: scale(0);transition: all 0.2s ease-out 0.2s;-webkit-transition: all 0.2s ease-out 0.2s;-o-transition: all 0.2s ease-out 0.2s;-moz-transition: all 0.2s ease-out 0.2s;-ms-transition: all 0.2s ease-out 0.2s; width: 100%;	backface-visibility: hidden;-webkit-backface-visibility: hidden;}
.process-container-bg:hover {background-color:#ffc229;}
.process-container-bg:hover h5 {padding-top: 40px;transition: all 0.2s ease-out 0.2s;-webkit-transition: all 0.2s ease-out 0.2s;-ms-transition: all 0.2s ease-out 0.2s;-o-transition: all 0.2s ease-out 0.2s;-moz-transition: all 0.2s ease-out 0.2s;}
.process-container-bg:hover .p-icon {display:none;}
.process-container-bg:hover .process-back {transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);display:block}

/* 11. PORTFOLIO SECTION
-------------------------*/
#portfolio{
	padding: 50px 0;
	position: relative;
	display: block;
	background: #fff;
}
#portfolio .container{margin-bottom:60px;}
.cbp-l-filters-button {text-align: center;}
.cbp-l-filters-button .cbp-filter-counter:before {border-top: 4px solid #ffc229;}
.cbp-l-filters-button .cbp-filter-counter {background-color: #ffc229;}
.cbp-l-filters-button .cbp-filter-item.cbp-filter-item-active {background-color: #ffc229;border-color: #ffc229;color: #000;}
.cbp-l-filters-button .cbp-filter-item {
    background-color: #000;
    border: 2px solid #000;
    color: #888;
    cursor: pointer;
    display: inline-block;
    font: 400 14px/29px "Open Sans",sans-serif;
    margin: 10px 10px 0 0;
    overflow: visible;
    padding: 8px 35px;
    position: relative;
    transition: all 0.3s ease-in-out 0s;
    font-weight: 400;
    text-transform: uppercase;
    color: #fff;
}
.cbp-l-filters-button {margin: 0 auto 100px;}
.cbp-caption-overlayBottomPush .cbp-caption-activeWrap { background: none repeat scroll 0 0 #ffc229;}
.cbp-l-grid-projects-title {
    color: #333;
    font-size: 21px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -1px;
    line-height: 1;
}
/* 11.1 TESTIMONIAL
-------------------------*/
#testimonials {background: url("../images/parallax-bg.jpg") repeat-x scroll left bottom;height:14em;overflow:hidden;position:relative;display:block;}
#testimonials .background-overlay{opacity:1;-webkit-opacity:1;-moz-opacity:1;background-color: rgba(0, 0, 0, 0.5);background-image:none;}
#testimonials .container{padding:140px 0;}
blockquote {margin: 0 auto;padding: 0;border: none;text-transform: uppercase;}
blockquote p { font-size: 1em;font-weight: 900;letter-spacing: 0;line-height: 1;margin: 0;text-transform: none;letter-spacing: -1px;}
blockquote cite {font-size: 0.5em;font-weight: 700;}

#action-penal{padding: 80px 5%;background:#FFC229;position:relative;display:block;}
.center-cont {margin: auto;position: relative;}
.center-cont h5,.center-cont h2 {color: #000000;font-family: open sans;font-weight: 600;line-height: 1;}
.center-cont h5{letter-spacing: 5px;margin: 0;font-size: 12px;}
.center-cont h2{font-weight: 900;letter-spacing: -1px;margin: 5px 0 0;}
.center-cont a{background: none repeat scroll 0 0 transparent;border: 2px solid #000;color: #000;font-size: 14px;min-width: 290px;padding: 20px 30px;
    text-align: center;text-transform: uppercase;display: block;font-weight: 900;transition: all 0.2s ease-out 0.2s;-webkit-transition: all 0.2s ease-out 0.2s;
	-moz-transition: all 0.2s ease-out 0.2s;-ms-transition: all 0.2s ease-out 0.2s;-o-transition: all 0.2s ease-out 0.2s;}
.center-cont a:hover{background:#000;color:#fff;}

/* 12. BLOG POST */
#blog-post{padding:0;background:#fff;display:block;position:relative;}
#blog-slider article{background:#f1f1f1;padding:60px 40px;}
#blog-slider article.postbg{background:#fff !important;}
#blog-slider article h5{color: #000;font-family: open sans;font-size: 14px;font-weight: 300;letter-spacing: 2px;margin: 0 0 40px;text-align: center;}
#blog-slider article h2{color: #000;font-family: open sans;font-size: 30px;font-weight: 900;letter-spacing: -1px;line-height: 1;margin: 0 0 20px;}
#blog-slider article p{margin-bottom:40px;}
#blog-slider article a{background: none repeat scroll 0 0 transparent;border: 2px solid #000;color: #000;display: block;font-size: 14px;font-weight: 900;width: 290px;
	margin:0 auto;padding: 20px 30px;text-align: center;text-transform: uppercase;transition: all 0.2s ease-out 0.2s;-webkit-transition: all 0.2s ease-out 0.2s;-o-transition: all 0.2s ease-out 0.2s;-moz-transition: all 0.2s ease-out 0.2s;-ms-transition: all 0.2s ease-out 0.2s;}
#blog-slider article a:hover{background:#000;color:#fff;}

/* 13. SUBSCRIBE CUBOID */
#cuboid {width: 100%;position:relative; margin: 0 auto;background:#000;perspective: 1000px;-webkit-perspective: 1000px;-moz-perspective: 1000px;-o-perspective: 1000px;-ms-perspective: 1000px;}
#cuboid form {
	/*counter translate*/
	/*propogate 3d space for children*/
	transform-style: preserve-3d;-webkit-transform-style: preserve-3d;
	/*prevent height collapse as children are absolutely positioned*/
	height: 80px;
	/*for smooth animations*/
	transition: all 0.35s;-webkit-transition: all 0.35s;-ms-transition: all 0.35s;-moz-transition: all 0.35s;-o-transition: all 0.35s;}
#blog-detail{background:#fff;padding-bottom:80px;}
/*faces*/
.cuboid-text {
	/*each face will be 40px high*/
	line-height: 80px; height: 80px;background: #000;margin:0;color:#fff;font-weight:900;letter-spacing:2px;text-align:center;font-size:14px;text-transform:uppercase;
}
.loader {
	background: #FFC229;
	animation: phase 1s infinite;-webkit-animation: phase 1s infinite;-moz-animation: phase 1s infinite;-o-animation: phase 1s infinite;-ms-animation: phase 1s infinite;
}
/*Lets create a pulsating animation for the loader face*/
@keyframes phase {50% {background: hsl(0, 0%, 0%);}}
@-webkit-keyframes phase{50% {background: hsl(0, 0%, 0%);}}
@-moz-keyframes phase{50% {background: hsl(0, 0%, 0%);}}
@-o-keyframes phase{50% {background: hsl(0, 0%, 0%);}}

#email {background: none repeat scroll 0 0 #FFC229;border: 0 none;color: #000000;display: block;font: inherit;outline: medium none;padding: 0 10px;text-align: center;
    width: 100%;font-weight: 900;}
#submit {display: none;}
.submit-icon, .reset-icon {color: #FFFFFF !important;cursor: pointer;line-height: 80px;padding: 0 20px;position: absolute;right: 0;top: 0;font-size:21px;
    transition: all 0.5s ease 0s;-webkit-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;}
/*.active = when the user is typing something*/
.submit-icon.active {color: hsl(120, 40%, 30%);}
.reset-icon {font-size: 14px;}

#cuboid section{width:100%;margin:0 auto;position:relative;}
#cuboid div {position: absolute; top: 0; left: 0; width: 100%;}
/*3D transforms. Each face will be rotated in multiples of -90deg and moved 20px(half of their 40px height) out*/
#cuboid div:nth-child(1) {transform: rotateX(0deg) translateY(0px);z-index:4}
#cuboid div:nth-child(2) {transform: rotateX(0deg) translateY(0px);z-index:5}
#cuboid div:nth-child(3) {transform: rotateX(0deg) translateY(0px);z-index:3}
#cuboid div:nth-child(4) {transform: rotateX(0deg) translateY(0px);z-index:2}
#cuboid form.loading div:nth-child(3) {transform: translateY(0px) rotateX(0deg);z-index:5}
#cuboid form.complete div:nth-child(4) {transform: translateY(0px) rotateX(0deg);z-index:5}
/*the form will have 4 states/classes(default+3) for rotation*/
#cuboid:hover{background:#FFC229}
#cuboid form:hover, 
#cuboid form.ready {transform: translateY(0px) rotateX(0deg);z-index:5}
#cuboid form.loading {transform: translateY(0px) rotateX(0deg);z-index:5}
#cuboid form.complete {transform: translateY(0px) rotateX(0deg);z-index:5}


/* 14. CONTACT SECTION
-------------------------*/

#contact{
	position: relative;
	display: block;
	background: #fff;
	padding-top: 50px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}
#contact .section-heading{
	padding-bottom: 50px;
}
#contact .contact-address{
	position: static;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-color: #fff;
	padding-top: 30px;
	padding-right: 0;
	padding-bottom: 30px;
	padding-left: 0;
}
.address-wrap{display:block;}
.address-wrap h2{text-transform:none;}
.address-wrap h5{letter-spacing: 5px;margin: 0 0 5px 0;font-size: 12px;font-family:open sans;color:#000;}
.address-wrap h2{color: #000;
    font-family: open sans;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1;
    margin: 0 0 0px;}
.address-wrap a.loc{background: none repeat scroll 0 0 transparent;
    border: 2px solid #000;
    color: #000;
    display: block;
    font-size: 14px;
    font-weight: 900;
    width: 290px;
	margin-top:20px;
    padding: 20px 30px;
    text-align: center;
    text-transform: uppercase;
    transition: all 0.2s ease-out 0.2s;-webkit-transition: all 0.2s ease-out 0.2s;-moz-transition: all 0.2s ease-out 0.2s;-o-transition: all 0.2s ease-out 0.2s;}
.address-wrap a.loc:hover{background:#000;color:#fff;}	
.address-wrap ul{list-style-type:none;margin:20px 0 0 0 ;padding:0;}
.address-wrap ul li{display:inline-block;margin-right:10px;}
.address-wrap ul li a{color:#000;font-size:28px;line-height:30px;transition: all 0.2s ease-out 0.2s;-webkit-transition: all 0.2s ease-out 0.2s;-moz-transition: all 0.2s ease-out 0.2s;-o-transition: all 0.2s ease-out 0.2s;}
.address-wrap ul li a:hover{color:#ffc229;}

.contact-form{
	background: #ffc229;
	display: block;
	position: relative;
	padding-top: 30px;
	padding-right: 0;
	padding-bottom: 30px;
	padding-left: 0;
}
.contact-form h5.form-title {
    background: none repeat scroll 0 0 #ffc229;
    margin: -7px 0 0 30px;
    padding: 0 2px 0 4px;
    position: absolute;
	z-index:1;
	letter-spacing: 5px;font-size: 12px;font-family:open sans;color:#000;
}
#contactform{
border: 2px solid #000;    
    padding: 30px 25px;
    width: 100%;
}
.mail-message {font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    text-align: left;}
.mail-message [contenteditable="true"] {opacity:0.8;-webkit-opacity:0.8;-moz-opacity:0.8; background:none repeat scroll 0 0 rgba(0, 0, 0, 0.04);
    color: #000;display: block;outline: medium none;padding: 15px;}
.mail-message [contenteditable="true"]{margin-bottom:25px;}
.contact_brief{height: 100px;overflow: auto;margin-bottom:0px !important;}
.ie8 .mail-message [contenteditable="true"] {color: #556270;}
.mail-message .js-populated[contenteditable="true"] {background:rgba(0, 0, 0, 0.09);}
.ie8 .mail-message .js-populated[contenteditable="true"] {color: #FFFFFF;}
.mail-message .js-error[contenteditable="true"] {background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3);
    color: #fff;
    opacity: 1;}
.js-hidden {display: none !important;}
@media only screen and (max-width: 1023px) {
	.mail-message [contenteditable="true"] {border-bottom-width: 3px;}
}
@media not all {
.mail-message [contenteditable="true"] {border-bottom-width: 3px;}
}
@media only screen and (max-width: 480px) {
.mail-message [contenteditable="true"] {border-bottom-width: 3px;}
}
@media not all {
.mail-message [contenteditable="true"] {border-bottom-width: 3px;}
}
#contactform .btn-default{background: none repeat scroll 0 0 #000;padding: 15px 40px;width: 100%;font-size: 14px;
    font-weight: 900;text-transform:uppercase;transition: all 0.2s ease-out 0.2s;-webkit-transition: all 0.2s ease-out 0.2s;-moz-transition: all 0.2s ease-out 0.2s;-o-transition: all 0.2s ease-out 0.2s;}
#contactform .btn-default:hover{background:#fff;color:#000;}
#contactform {position: relative;margin-top:40px;}
#contactform label {margin-bottom: 10px;text-transform: uppercase;}
#contactform .required {position: absolute;bottom: -20px;right: 0;}
#contactform .error {display: none;padding: 10px;color: #bf0000;background-color: #ffeded;}
#contactform .success {display: none;padding: 10px;color: #20bf00;background-color: #e7fee8;}
#contactform #mailfail,#contactform #mailsuccess {margin-bottom: 15px;}
#contactform #form-captcha label {margin-top: 10px;}
#contactform #form-captcha .form-control {float: right;width: auto;}
#contactform #submit_contact_form {padding: 12px;}

/* 14.1. TWITTER SECTION
-------------------------*/
.twrap{
	background: none repeat scroll 0 0 #111;
	overflow: hidden;
	position: relative;
	display: block;
	}
.twitter{height: 210px;position: relative;text-align: center;}
#twitter-box{color: #FFFFFF;font-size: 14px;font-weight: 200;line-height: 27px;margin: 0 auto;max-width: 850px;padding-top: 100px;letter-spacing: 1px;}
#twitter-box a{ color: #FFC229;}
#twitter-box a:hover{ color: #fff;}
.tweet_list{text-align:center !important;}
.tweet_list{transition: all 0.8s ease 0s;-webkit-transition: all 0.8s ease 0s;-moz-transition: all 0.8s ease 0s;-ms-transition: all 0.8s ease 0s;-o-transition: all 0.8s ease 0s;}
.comm-name{display:inline-block;}
.cust-name h2{font-size:20px !important;font-weight:600 !important;color:#ffeb00 !important;padding-top:22px;padding-left:30px;}
#twitter-background{ color:rgba(255,255,255,.07);
    cursor: pointer;
    font-size: 125px;
    left: 20px;
    line-height: 60px;
    position: absolute;
    transition: all 0.27s cubic-bezier(0, 0, 0.58, 1) 0s;-webkit-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1) 0s;-moz-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1) 0s;-o-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1) 0s;
    z-index: 3;
    transform: translateY(50%);-webkit-transform: translateY(50%);-moz-transform: translateY(50%);-o-transform: translateY(50%);-ms-transform: translateY(50%);}
	
/* 15. FOOTER SECTION
-------------------------*/

footer{width:100%;position:relative;height:40px;text-align:center;color:#fff;background:#000;}
footer p{ font-size: 12px;margin: 0;line-height: 40px;}

/* 16. MEDIA QUERY 
-------------------------*/

@media (max-width : 1224px) {
	#teamgrid .team {width:33.33%;}
	.item-container h4 {font-size: 76px;}
	#home hr {width: 70%;}
	.item-container p{font-size:26px;}
	
	.process-left {
	height: auto;
	position: relative;
	width: 100%;
	padding: 50px 0;
	text-align: center;
}
	.process-right {float: left;height: auto;width: 100%;}
	.process-container-bg {width: 25%;float: left;}
	.text-left{text-align:center;}
	.center-cont a {min-width: 100%;margin-top: 40px;}
	.address-wrap {margin-bottom: 40px;}
}
@media (max-width: 767px){
	.item-container h4 {font-size: 56px;}
	#home hr {width: 50%;}
	.item-container p{font-size:24px;}
	
	#nav li {float:none;width: 100%; padding:0 20px; text-align:center;margin-bottom:10px;}
	#nav li a .sub{display:none;}
	#menu-main-nav {padding: 50px 0 0;}
	
	.section-heading .title {font-size: 2.8em;letter-spacing: -2px;text-align:center;}
	.section-heading .subtitle {padding: 0 20px;text-align:center;}
	
	.intro-container{width:100% !important;position:relative;transform:none;-webkit-transform:none;left:auto;top:0;display:block;padding:40px 0}
	.aboutintro-nav li{width:30%}
	.aboutintro-nav li a{font-size: 1.4em; text-align:center;}
	.pane h3{font-size: 2.4em;}
	
	.counterblock {padding: 40px 0;}
	.counterblock h2 {font-size: 4em;}
	.bg-overlay{background-image:none;}
	#team-block {padding:100px 0 !important;}
	#teamgrid .team {height: 278px;margin-bottom: 140px;width:33.33%;}
	#teamgrid .team .image {background-size: auto 90%;height: 278px;width: 100%;}
	#teamgrid .team .text {display: block;opacity: 1;padding: 0;text-align: center;top: 300px;width: 100%;}
	#teamgrid .team .text h3 {font-size: 16px;line-height: 18px;text-align: center;}
	#teamgrid .team .text p.title {display: block;font-size: 16px;line-height: 18px;text-align: center;}
	#teamgrid .team .text p{display:none;}
	#teamgrid .team:hover .text {opacity:1;top:300px;}
	#teamgrid .team:hover .image{opacity:1;bottom:auto;}
	.slider .flex-prev{left:10px}
	.slider .flex-next {right:10px;}
	
	.process-left {height:auto;position: relative; width: 100%;padding:100px 0;text-align:center;}
	.process-right {float: left;height: auto;width: 100%;}
	.process-container-bg {width: 50%;float: left;}
	
	#action-penal {padding: 80px 0%;}
	blockquote p {font-size: .9em;}
	.address-wrap {margin-bottom:0px;}
	.address-wrap h2{font-size:1.6em;}
	.address-wrap a.loc{width:200px;margin-bottom:40px;}
}

@media (max-width: 480px){
	.item-container h4 {font-size: 46px;}
	#home hr {width: 40%;}
	.item-container p{font-size:21px;}
	
	#nav li {float:none;width: 100%; padding:0 20px; text-align:center;margin-bottom:10px;}
	#nav li a .sub{display:none;}
	#menu-main-nav {padding: 50px 0 0;}
	
	.section-heading .title {font-size: 2em;letter-spacing: -2px;}
	.section-heading .subtitle {font-size: 1em;letter-spacing: 0;line-height: normal;margin: 10px 0;padding: 0 20px;}
	
	.aboutintro-nav li{width:100%}	
	.aboutintro-nav li a{font-size: 1.4em; text-align:center;}
	.pane h3{font-size: 2em;}
	.pane h3 span{padding:0;}
	.slider .flex-prev{left:0}
	.slider .flex-next {right: 0;}
	.process-container-bg {width: 100%;float: left;}
	blockquote {padding: 0 20px;}
	blockquote p {font-size: 0.8em;font-weight: 700;}
	.client-partner li {height: 100px;width: 100px;}
	.counterblock {padding: 40px 0;}
	.counterblock h2 {font-size: 3.6em;}
	
	#teamgrid .team {width:100%;}
	
	.service {height: 20em;width: 20em;}
	.service .service-title .title {font-size: 1.5em;}
	.service .service-title i {font-size: 10em;}
	.service-smalldesc{display:none;}
	.s-detail h3 {font-size:16px;}
	.s-detail i {font-size: 3em;line-height: 53px;}
	
	#contactform {padding: 30px 5px;}
	#contactform .btn-default {font-weight: 800;padding: 15px 20px;}
}
@media (max-width : 320px) {

	.item-container h4 {font-size: 26px;}
	#home hr {width: 25%;}
	.item-container p{font-size:18px;}
	
	.aboutintro-nav li{width:100%}
	.aboutintro-nav li a{font-size: 1em; text-align:center;}
	.pane h3{font-size: 1.6em;}
	
	.counterblock {padding: 40px 0;}
	.counterblock h2 {font-size: 3em;}
	
	.service {height: 18em;width: 18em;}
	.service .service-title .title {font-size: 1.5em;}
	.service .service-title i {font-size: 10em;}
	.service-smalldesc{display:none;}
	.s-detail h3 {font-size:16px;}
	.s-detail i {font-size: 3em;line-height: 53px;}
	
	#testimonials .container {padding: 100px 0;}
	blockquote {padding: 0 20px;}
	blockquote p {font-size: 0.8em;font-weight: 600;}
		
	#blog-slider article {padding: 60px 20px;}
	#blog-slider article h2{font-size:1.6em;}
	#blog-slider article a{width:100%;}
	
	.address-wrap h2{font-size:1.6em;}
	.address-wrap a.loc{width:100%;margin-bottom:40px;}
		
}