/* TOP BAR (override styles of foundation) starts */
  
.top-bar .toggle-topbar {
    position: 				relative !important;	
    right: 					0;
    top: 					0; 
}

.top-bar {
	background-color:		transparent;
	height: 				50px;
	margin-bottom: 			0;
	overflow: 				hidden;
	position: 				relative;
	z-index:				99;
}

.top-bar .title-area {
	margin:					0 0 100px 0;
}

.top-bar.expanded .title-area {
	background: 			none;
}
	
.top-bar.expanded {
	background: 			none;
	margin-bottom:			30px;
}

.top-bar.expanded .top-bar-section ul li {
	width:					auto;
	z-index:				99999 !important;
}

.top-bar.expanded .top-bar-section ul{
	margin-top:				-55px;
	z-index:				99999 !important;
}	
	
.top-bar-section ul {
    background-color:		transparent;
    display: 				block;    
    font-size: 				16px;
    margin:					0;
	position:				relative;
	width: 					100%;
	z-index:				99999 !important;
}

.top-bar-section ul li {
	width:					12.5%;
}

.top-bar-section ul li > a {
    background: 			none; 
	color:					;
	display: 				block;
    padding: 				0;
    font-family:			'helvetica-neue-cn' !important ;
    font-size: 				16px;
    font-weight: 			normal;
    text-transform: 		none;
}

.top-bar-section ul li > a.button {
	background-color: 		none;
	background: 			none; 	
    color:					#FFF;
	font-size: 				18px;
	line-height:			24px;
    padding-right: 			0px;
    padding-left: 			0px;  
}

.top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
	background: 			none;
	background-repeat:		no-repeat;
	background-position:	center;
	color:					#FFF;
	padding: 				7px 0px;
	text-align:				center;
    width:					auto;
}
	
.top-bar-section ul li > a.active {
	background-image:		url(../imgs/hover.png);
	background-repeat:		no-repeat;
	background-position:	center;
    color:					#FFF;
	font-size: 				19px;
	line-height:			24px;
    padding-right: 			0px;
    padding-left: 			0px;  
}	

.top-bar-section ul li > a.arc{
	background-color: 		none;
	background: 			none; 	
    color:					#ffbf00;
	font-size: 				18px;
	line-height:			24px;
    padding-right: 			0px;
    padding-left: 			0px;  
}

.top-bar-section ul li > a.arc:hover, .top-bar-section ul li > a.arc:focus {
	background: 			url(../imgs/hover.png);
	background-repeat:		no-repeat;
	background-position:	center;
	color:					#FFF;
	padding: 				7px 0px;	
	text-align:				center;
    width:					auto;
}

/* TOP BAR (override styles of foundation) ends */



/* general */

*, *:after, *:before { 
	-webkit-box-sizing: 	border-box; 
	   -moz-box-sizing: 	border-box; 
			box-sizing: 	border-box; 
}

body, html { 
	font-family:			'helvetica-neue-cn';
	font-size: 				100%; 
	padding: 				0; 
	margin: 				0;
}

.box {
	margin-bottom:			180px;
}

.grey {
	background-color:		#dbdde0;
}

#map_canvas {
	height:					480px;
	margin:					0;
	padding:				0;	
}	

#menu, .sticky {
	background-color:		#0157a4;
}	

p {
	color:					#0157a4;
}

/* home page services circles */

.clearfix:before,
.clearfix:after { 			content: " "; display: table; }

.clearfix:after { 			clear: both; }

.ch-grid {
	margin: 				20px 0 0 0;
	padding: 				0;
	list-style: 			none;
	display: 				block;
	text-align: 			center;
	width: 					100%;
}

.ch-grid:after,
.ch-item:before {
	content: 				'';
    display: 				table;
}

.ch-grid:after {
	clear: 					both;
}

.ch-grid li {
	width: 					280px;
	height: 				280px;
	display: 				inline-block;
	margin: 				20px;
}

.ch-item {
	width: 					100%;
	height: 				100%;
	border-radius: 			50%;
	position: 				relative;
	box-shadow: 			0 1px 2px rgba(0,0,0,0.1);
	cursor: 				default;
}

.ch-info-wrap{
	position: 				absolute;
	width: 					240px;
	height: 				240px;
	border-radius: 			60%;
	top: 					20px;
	left: 					20px;

	-webkit-perspective: 	800px;
	   -moz-perspective: 	800px;
		-ms-perspective: 	800px;
		 -o-perspective: 	800px;
			perspective: 	800px;

	-webkit-transition: 	all 0.4s ease-in-out;
	   -moz-transition: 	all 0.4s ease-in-out;
   		-ms-transition: 	all 0.4s ease-in-out;
		 -o-transition: 	all 0.4s ease-in-out;
			transition: 	all 0.4s ease-in-out;
}

.ch-info{
	position: 				absolute;
	width: 					240px;
	height: 				240px;
	border-radius: 			50%;

	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
		
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.ch-info > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;

	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.ch-info .ch-info-back {
	-webkit-transform: rotate3d(0,1,0,180deg);
	-moz-transform: rotate3d(0,1,0,180deg);
	-o-transform: rotate3d(0,1,0,180deg);
	-ms-transform: rotate3d(0,1,0,180deg);
	transform: rotate3d(0,1,0,180deg);
	
	background: #fff;
	
	color:#0157a4;
}

.ch-img-1 { 
	background:#f5b800;
	
}

.ch-img-2 { 
	background:#f5b800;
}

.ch-img-3 { 
	background:#f5b800;
}

.ch-info h3 {
	color: #0157a4;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
	margin: 0 15px;
	padding: 40px 0 0 0;
	height: 90px;
	font-family: 'helvetica-neue-cn', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	color: #0157a4;
	padding: 10px 5px;
	font-style:normal;
	margin: 48px 13px 0px 13px;	
	font-size: 14px;

}

.ch-info p.circle-name {
	color: #0157a4;
	padding: 10px 5px;
	font-style:normal;
	margin: 0 30px;
	margin-top:90px;
	font-size: 22px;

}

.ch-info a.circle-more {
	color: #fff;
	padding: 10px 18px;
	font-style:normal;
	margin: 0 30px;
	margin-top:90px;
	font-size: 16px;
	border:#fff 1px solid;
}

.ch-info p a {
	display: block;
	color: #f5b800;	
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'helvetica-neue-cn' , Arial, sans-serif;
}

.ch-info p a:hover {
	color: #f5b800;
}

.ch-item:hover .ch-info-wrap {
	box-shadow: 
		0 0 0 0 rgba(255,255,255,0.8), 
		inset 0 0 3px rgba(115,114, 23, 0.8);
}

.ch-item:hover .ch-info {
	-webkit-transform: rotate3d(0,1,0,-180deg);
	-moz-transform: rotate3d(0,1,0,-180deg);
	-o-transform: rotate3d(0,1,0,-180deg);
	-ms-transform: rotate3d(0,1,0,-180deg);
	transform: rotate3d(0,1,0,-180deg);
}

/*-Carousel start-*/

#flexiselDemo3 {
}
	
.para{
	width:300px;
}

.nbs-flexisel-container {
    position:relative;
    max-width:100%;
	z-index:0;
}

.nbs-flexisel-ul {
	list-style-type:none;   
	margin:0px;
	padding:0px;
    position:relative;   
    text-align:center;
	width:9999px; 
}

.nbs-flexisel-inner {
	float:left;
    overflow:hidden;  
	margin:0 0 0 20px; 
    width:calc(100% - 40px);   
}

.nbs-flexisel-item {
	cursor:pointer;
    float:left;
    margin:0px;
    padding:0px;    
    position:relative; 
}

.nbs-flexisel-item img {
    cursor: pointer;
	margin-bottom: 10px;
    margin-top: 10px;    
    max-width:320px;
    max-height:240px;
	position: relative;
}

.nbs-flexisel-item img {
	margin-top:				50%;
}

.nbs-flexisel-item img:empty {
	left: 					50%;
	top: 					50%;
	
	-webkit-transform: 		translate(-50%, -50%);
	   -moz-transform: 		translate(-50%, -50%);
		-ms-transform: 		translate(-50%, -50%);
		 -o-transform: 		translate(-50%, -50%);
			transform: 		translate(-50%, -50%);

}

/* Carousel navigation-start */

.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
	cursor: pointer;   
    height: 22px;
	opacity: 0.8; 
    position: absolute; 
	width: 22px;
	z-index: 				100;
}

.nbs-flexisel-nav-left {    
    background:				url(../imgs/button-previous.png) no-repeat;
	left: 					10px;	 
	z-index: 				100;
}

.nbs-flexisel-nav-right {    
    background:				url(../imgs/button-next.png) no-repeat;
	right: 					5px;
}
/* Carousel navigation-end */
/*-Carousel end-*/

/* filters accordion starts */

.filters dl {
	margin:					0px 0px 10px 0px;
	padding:				0px;	
}

.filters dl dd{
	height: 				0px;
	margin:					10px 0px 0px 0px;
	overflow:				hidden;
	padding:				0px;
	z-index: 				10;

	-webkit-transition: 	height 0.3s ease-in-out, box-shadow 0.6s linear;
	   -moz-transition: 	height 0.3s ease-in-out, box-shadow 0.6s linear;
	    -ms-transition: 	height 0.3s ease-in-out, box-shadow 0.6s linear;
	     -o-transition: 	height 0.3s ease-in-out, box-shadow 0.6s linear;
		    transition: 	height 0.3s ease-in-out, box-shadow 0.6s linear;
}

.filters dl dd:hover{
	
}

.filters dl label {
	background-color:		#44b1da;
	color:					#fff;
	cursor: 				pointer;
	display: 				block;
	margin:					0;
	padding:				5px;
	position: 				relative;
	z-index: 				20;
}

.filters dl input + label::after {
	content:				"▾";
	float:					right;
}

.filters dl input:checked + label::after {
	content:				"▴";
	float:					right;
}

.filters dl label:before {	
	content: 				" ";
	float:					right;
	height: 				0;
	left: 					0px;
	pointer-events: 		none;
	position:				relative;
	top: 					3px;
	width: 					0;
}

.filters dl dd label {
	font-size:				14px;
	margin-bottom:			10px;
}

.filters dl dd label:before {	
	
}

/* --- filters accordion starts (uses input field) --- */

.filters label:hover{
	
}

.filters input:checked + label,
.filters input:checked + label:hover{

}

.filters input.filter-input{
	display: 				none;
}

.filters label:hover:after,
.filters input:checked + label:hover:after{
	
}

.filters input:checked ~ dd{
	height: 				auto;
	
	-webkit-transition: 	height 0.5s ease-in-out, box-shadow 0.1s linear;
	   -moz-transition: 	height 0.5s ease-in-out, box-shadow 0.1s linear;
	    -ms-transition: 	height 0.5s ease-in-out, box-shadow 0.1s linear;
	     -o-transition: 	height 0.5s ease-in-out, box-shadow 0.1s linear;
		    transition: 	height 0.5s ease-in-out, box-shadow 0.1s linear;
}

/* --- filters accordion ends --- */

.button-icon {
	display: 				inline-block;
	font-family: 			'helvetica-neue-cn';
	font-size:				30px !important;
	height:					40px;
	line-height:			31px;
	margin:					5px auto;
	padding:				0;
	width:					40px;
	
	-webkit-border-radius: 	20px;
	   -moz-border-radius: 	20px;
			border-radius: 	20px;
}

.button-style {
	background-color: 		none !important;
	border: 				#f5b800 solid 2px;
	color:					#f5b800;
	cursor: 				pointer;
	display: 				inline-block;
	font-size: 				24px;
	margin: 				1rem 0;
	padding: 				1rem 2rem;
	position: 				relative; 
	text-align: 			center;
	text-decoration: 		none;
	
	transition: 			background-color 300ms ease-out;
}

.button-style:hover {
	background-color:		#f5b800;
}
	
.circle-about {
	border: 				5px solid #f5b800;
    border-radius: 			120px;
    height: 				210px;
	margin:					5px auto;
	width: 					210px;
}

.circle-about.prashant {
	background-image:		url(../imgs/about-prashant.jpg);
}

.circle-about.priyadarshani {
	background-image:		url(../imgs/about-priyadarshani.jpg);
}

.circle-about.vivek {
	background-image:		url(../imgs/about-vivek.jpg);
}

.circle-about.pravin{
	background-image:		url(../imgs/about-pravin.jpg);
}

.circle-about.ronak{
	background-image:		url(../imgs/about-ronak.jpg);
}

.circle-about.raja{
	background-image:		url(../imgs/about-raja.jpg);
}
	
footer {
	background-color:		#dbdde0;
	padding:				50px 0;
}
	
footer p {
	font-size:				12px;
}

footer ul li {
	border: 				1px solid #f5b800;
	display:				inline-block;
	font-size:				14px;
	padding:				0px 10px;
	text-align:				center;
}
	
footer ul li a {
	color:					#0157a4;
}
	
footer ul li a:hover {
	color:					#f5b800;	
}

#logo {
	margin:					100px auto 0 auto;
	left:					calc(50% - 300px);
	position:				fixed;
	z-index:				100;
	width:					600px;
	
	-webkit-transition: 	all 0.5s ease;
	   -moz-transition: 	all 0.5s ease;
		 -o-transition: 	all 0.5s ease;
			transition: 	all 0.5s ease;
}

#logo img {		
	height:					240px;
	
	-webkit-transition: 	all 0.5s ease;
	   -moz-transition: 	all 0.5s ease;
		 -o-transition: 	all 0.5s ease;
			transition: 	all 0.5s ease;
}	

#logo.shrink {
	height:					60px;
	left:					calc(50% - 120px);
	margin:					-45px auto auto auto;
	position:				fixed;
	z-index:				100;
	width:					240px;
}
	
#logo.shrink img{
	height:					40px;
}

#page-about h2 {
	border-bottom:			#f5b800 2px solid;
	color:					#0157a4;	
	font-family:			'helvetica-neue-cn';
	font-size:				24px;
	margin:					15px auto;
	text-align:				center;
}

#page-about h2#team {
	width:					100px;
}

#page-about #team .button-icon {
	border:					2px solid #f5b800;
	color:					#f5b800;
}

#page-about .team-member {
	background-color:		#E9E9E9;	
	color:					#fff;
	font-size:				18px;
	height:					360px !important; 
	padding: 				15px 0 0 0;
	position:				relative;
}

#page-about .team-member .team-member-text {
	background-color:		#0157a4;		
	height:					200px;
	padding:				18px;
	position:				absolute;
	overflow:				hidden;
	top:					310px;
	
	-webkit-transition: all 1s ease-in-out;
	   -moz-transition: all 1s ease-in-out;
		-ms-transition: all 1s ease-in-out;
		 -o-transition: all 1s ease-in-out;
			transition: all 1s ease-in-out;
}


#page-about .team-member:hover .team-member-text{
	height:					510px;
	overflow:				hidden;
	top:					0px;
}

#page-about .team-member .team-member-text h2 {
	color:					#fff;
	font-family:			'helvetica-neue-cn';
	font-size:				24px;
}

#page-about .team-member .team-member-text p{
	color:					#fff !important;
	font-size:				16px;
	line-height:			22px !important;
}
	
#page-about .team-member .team-member-text p.designation{
	color:					#f5b800;
	font-size:				18px;
}

#page-clients #clients img {
	position: 				relative;
	margin-top:				50%;
}

#page-clients #clients img:empty {
	left: 					50%;
	top: 					50%;
	
	-webkit-transform: 		translate(-50%, -50%);
	   -moz-transform: 		translate(-50%, -50%);
		-ms-transform: 		translate(-50%, -50%);
		 -o-transform: 		translate(-50%, -50%);
			transform: 		translate(-50%, -50%);
}

#page-contact .bkgrd-blue {
	background-color:		#0157a4;
}

#page-contact .bkgrd-blue h2 {
	color: 					#fff;
	font-size:				24px;
}

#page-contact .bkgrd-blue h3 {
	color: 					#fff;
	font-size:				18px;
}

#page-contact .bkgrd-blue p {
	color:					#ccc;
}

#page-contact .button-style{
	background-color:		#0157a4;
	float:					right;
}  

#page-home .button-scroll {
	margin-top:				-180px;	
	position:				absolute !important;
	width:					100%;
	z-index:				1 !important;
}

#page-home div#about p {
	color:					#0157a4;
	font-size:				18px;
	font-family:			'helvetica-neue-cn';		
}

#page-home div#about h2 {
	border-bottom:			#f5b800 2px solid;
	color:					#0157a4;	
	font-family:			'helvetica-neue-cn';
	font-size:				24px;
	margin:					15px auto;
	text-align:				center;
	width:					180px;
}

#page-home div#contact {
	background-color:		#0157a4;
	font-family:			'helvetica-neue-cn'
}

#page-home div#contact h2 {
	color:					#fff;	
	font-family:			'helvetica-neue-cn';
	font-size:				18px;
}	

#page-home div#contact p {
	color:					#ccc;
	font-family:			'helvetica-neue-cn'	;
	font-size:				14px;	
}	

#page-home div#services {
	background-color:		#dbdde0;
	height:					auto;
	font-family:			'helvetica-neue-cn';
	margin-top:				35px;
}

#page-home div#services .button-icon {
	border:					2px solid #fff;
	color:					#fff;
}

#page-home div#services .button-style {
	font-size: 				12px;
	margin: 				.5rem 0;
	padding: 				.5rem 1rem;
}

#page-services .circle-services {
    background-color:		#dbdde0;
	border-radius: 			50%;
	border:					20px solid  #f5b800 ;
	color: 					#f5b800 ;
	float: 					left;
	font-size:				36px;
	font-family:			'helvetica-neue-cn' !important;   
    height: 				250px;   
    padding: 				85px 3px 0 3px;
    position: 				relative;
    text-align: 			center;
	width: 					250px;
}

#page-services #services .row {
	margin:					30px auto;
}

#page-work #work .filters h2, #work .sorting h2 {
	color:					#0157a4;
	font-size:				14px;
	text-transform:			uppercase;
}

#page-work #work .filters p, #work .sorting p {
	font-size:				12px;
	text-transform:			uppercase;
}

#page-work #work .filters .filter-button-group .button {
	background:				none;
	color:					#0157a4;	
	clear:					left;
	display:				block;
	font-family:			'helvetica-neue-cn' !important;  
	font-size:				14px;
	padding:				5px;
	margin:					2px;
	text-align:				left;
	width:					100%;
}

#page-work #work .filters .filter-button-group .button:hover {
	background:				#dbdde0;
	border-bottom:			none;
	color:					#0157a4;
	clear:					left;
	display:				block;
	font-size:				14px;
	padding:				5px;
	margin:					2px;
	text-align:				left;
	width:					100%;
}

#page-work #work .filters .filter-button-group .button.is-checked {
	background:				#f5b800;
	color:					#fff;
	clear:					left;
	display:				block;
	font-size:				14px;
	padding:				5px;
	margin:					2px;
	text-align:				left;
	width:					100%;
}

#page-work #work .filters .filter-button-group .button::before {
	float:					left;
	margin:					0 5px 0 0;
}

#page-work #work .grid {
	margin-top:				25px;	
	margin-bottom:			355px;
}

#page-work #work .item {
	float:					left;
	margin:					15px 8px;
	overflow:				hidden !important;
	position:				relative;	
}

#page-work #work .item a {
	color:					#ffbd00;
	font-size:				18px;
	text-transform:			uppercase;
}

#page-work #work .item .item-img {
	height:					auto;
	width:					auto;
	display:				block;
	z-index:				-1;
}

#page-work #work h2 {
	color:					#0157a4;
	font-family:			'helvetica-neue-cn' !important;   
	font-size:				14px;
	text-transform:			uppercase;
}	

/* header tags */

#page-home h1, #page-about h1, #page-clients h1, #page-contact h1, #page-services h1, #page-work h1, #page-legal h1 {
	border-bottom:			#f5b800 2px solid;
	color:					#0157a4;	
	font-family:			'helvetica-neue-cn';
	font-size:				30px;
	margin:					15px auto;
	text-align:				center;
}

#page-home h1#about, #page-about h1#about{
	width:					100px;
}

#page-home h1#services, #page-services h1#services{
	width:					130px;
}

#page-home .map-container {
	height:					300px;
	margin:					0;
	padding:				0;
	overflow:				hidden;	
}

#page-clients h1#clients{
	width:					100px;
}

#page-legal h1#legal{
	width:					100px;
}

#page-work h1#work {
	width:					80px;
}

#page-contact h1#contact{
	width:					135px;
}	
	
#page-home h1#contact{
	color:					#fff;
	width:					135px;
}	

/* Sizes for devices */

@media screen and (max-width: 1140px) {	
	#page-home .button-scroll{	
		margin-top:			-220px;	
	}	
}

@media screen and (max-width: 960px) {
	#page-home .button-scroll{	
		margin-top:			-120px;	
	}	
}

@media screen and (max-width: 600px) {	
	#logo {
		left:				calc(50% - 280px);
		width:				550px;
	}

	#logo img {		
		height:				180px;
	}		
	
	.arrow{
		margin-bottom:		8px;
		z-index:			1 !important;
	}
		
	#page-home .button-scroll{	
		margin-top:			-130px;	
	}	
	
	#page-home .button-scroll .button-style{
		font-size: 			18px;
		margin: 			1rem 0;
		padding:			1rem 2rem;
	}	
}
	

@media screen and (max-width: 480px) {
	#logo {
		left:				calc(50% - 150px);
		width:				305px;
	}

	#logo img {		
		height:				105px;
	}		
		
	#page-home .button-scroll{	
		margin-top:			-95px !important;	
	}
	
	#page-home .button-scroll .button-style{
		font-size: 			15.5px;
		margin: 			11px 0;
		padding:			11px 22px;
	}
}

@media screen and (max-width: 360px) {
	#page-home .button-scroll{		
		margin-top:			-95px !important;	
	}
}	