@charset "utf-8";
/* CSS Document */

/*
Theme Name: Metro Style Windows 8 App Presentation Website Template
Version: 1.0
Author: Surjith SM
Author URI: http://themeforest.net/user/surjithctly
*/


/******************  Table of Contents  *****************************

1. GLOBAL STYLES
2. TOP BAR
	2.1 NAVIGATION BAR
3. HEADER
4. KEYFRAME ANIMATION
	4.1 SMALL PHONE
	4.2 MEDIUM PHONE
	4.3 BIG PHONE
	4.4 CALLING CSS3 ANIMATION
5. HEADER DESCRIPTION
	5.1. BUTTONS
6. FEATURES
7. TESTIMONIALS
8. FOOTER
9. COMMON SUBPAGE STYLES
10. ABOUT AND TEAM PAGE
11. CUSTOM MEDIA QUERIES
12. CUSTOM FOR FI


If you having trouble in editing css. please send a mail to mail@surjithctly.in - i will really help you

*/




/*==========1. GLOBAL STYLES==============*/


body {
	font-family:"Open Sans", Arial, Helvetica, sans-serif;
	background:#FFF;
}

h3 {
	font-size:34px;
	font-weight:300;
	margin:25px 0;
	color:#000000;
}

h4 {
	font-size:24px;
	font-weight:300;
	margin:0;
	margin-bottom:15px;
	color:#000000;
}

p {
	font-size:16px;
	font-weight:300;
	color:#373737;
	line-height: 120%;
	margin-top: 10px;
}

a {
	color:#414141;
}

a:hover {
	color:#ff2e12;
}

p a {
	color: #2374B0;
	text-decoration: underline;
}

/*==========2. TOP BAR==============*/



.TopBar {
	margin-top:20px;
}



/*==========2.1 NAVIGATION BAR==========*/


.navbar .nav > li > a {
  float: none;
  padding: 25px 15px 25px;
  color: #777777;
  text-decoration: none;
  font-size:18px;
}

.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
  color: #ff2e12;
  text-decoration: none;
  background-color: #FFF;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
}






/*==========3. HEADER==============*/

.jumbotron {
	text-align: left;
	/*background: url(/img/metro/header-bg-2.jpg) no-repeat #eeeeee;*/ /* Old browsers */
	/*background-size:100% 100%;*/
	height:500px;
	overflow:hidden;


	background: url(/img/metro/showroom.jpg) top center repeat-x #eeeeee;

}


.jumbotron .PhoneBlock {
	position:relative;
	height: 500px;
}


.jumbotron .phone {
	position:absolute;
}

.jumbotron .phone.phonesmall {
	top:-250px;
	z-index:1;
}

.jumbotron .phone.phonemed {
	top:-340px;
	left:80px;
	z-index:2;
}

.jumbotron .phone.phonebig {
	top:-410px;
	left:180px;
	z-index:3;
}


/*Phone on mobile*/
.MobilePhone {
	padding-top: 50px;
	text-align:center;
}


/*==========4. KEYFRAME ANIMATION==============*/

/*=====4.1 SMALL PHONE=========*/

@-webkit-keyframes smallanim {
from {top: -250px;}
to {top: 150px;}
}
@-moz-keyframes smallanim {
from {top: -250px;}
to {top: 150px;}
}
@-o-keyframes smallanim {
from {top: -250px;}
to {top: 150px;}
}
@keyframes smallanim {
from {top: -250px;}
to {top: 150px;}
}

/*=====4.2 MEDIUM PHONE=========*/

@-webkit-keyframes medanim {
from {top: -340px;}
to {top: 100px;}
}
@-moz-keyframes medanim {
from {top: -340px;}
to {top: 100px;}
}
@-o-keyframes medanim {
from {top: -340px;}
to {top: 100px;}
}
@keyframes medanim {
from {top: -340px;}
to {top: 100px;}
}


/*=====4.3 BIG PHONE=========*/



@-webkit-keyframes biganim {
from {top: -410px;}
to {top: 50px;}
}
@-moz-keyframes biganim {
from {top: -410px;}
to {top: 50px;}
}
@-o-keyframes biganim {
from {top: -410px;}
to {top: 50px;}
}
@keyframes biganim {
from {top: -410px;}
to {top: 50px;}
}

/*=====4.4 CALLING CSS3 ANIMATION=========*/

.jumbotron .phonesmall.animate {
animation: smallanim 1s 1 ease-out;
-moz-animation: smallanim 1s 1 ease-out; /* Firefox */
-webkit-animation: smallanim 1s 1 ease-out; /* Safari and Chrome */
-o-animation: smallanim 1s 1 ease-out; /* Opera */
top:150px;
}



.jumbotron .phonemed.animate {
animation: medanim 1s 1 ease-out;
-moz-animation: medanim 1s 1 ease-out; /* Firefox */
-webkit-animation: medanim 1s 1 ease-out; /* Safari and Chrome */
-o-animation: medanim 1s 1 ease-out; /* Opera */
top:100px;
}



.jumbotron .phonebig.animate {
animation: biganim 1s 1 ease-out;
-moz-animation: biganim 1s 1 ease-out; /* Firefox */
-webkit-animation: biganim 1s 1 ease-out; /* Safari and Chrome */
-o-animation: biganim 1s 1 ease-out; /* Opera */
top:50px;
}





/*==========5. HEADER DESCRIPTION==============*/


.masthead {
	margin-bottom: 0;
}
.masthead h1 {
	font-size: 46px;
	line-height: 1;
	font-weight: 300;
	color:#FFF;
	text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
	/* ZAG added */
	font-weight: bold;
}

.masthead h2 {
	font-size: 28px;
	line-height: 1.3;
	font-weight: 300;
	color:#FFF;
	text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
}

.masthead p {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5;
	color:#FFF;
	text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
}

.masthead .JumboDesc {
	padding-top:80px;
}

.masthead .JumboDesc a.customers {
	color: #FFF;
	text-decoration: underline;
}



/*==========5.1. BUTTONS==============*/

.jumbotron .btn-large {
white-space: nowrap;
text-align:left;
text-transform:uppercase;
font-size:26px;
padding-top: 17px;
font-weight:400;
margin-right:15px;
margin-top:10px;
}

.jumbotron .btn-large span {
	font-size:14px;
	font-weight:300;
}

.jumbotron .btn-large i {
display:inline-block;
float:right;
}

.jumbotron .btn-large img {
	padding:10px 0 10px 20px;
}




.btn-large {
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

.btn-danger {
  color: #ffffff;
  background-color: #ff2e12;
  background-image: none;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.btn-danger.disabled,
.btn-danger[disabled] {
  background-color: #e3280f;
}

.btn-danger:active,
.btn-danger.active {
  background-color: #d72912;
}




.btn-inverse {
  color: #ffffff;
  background-color: #3c3c3c;
  background-image: none;
}

.btn-inverse:hover,
.btn-inverse:focus,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
  background-color: #2f2f2f;
}

.btn-inverse:active,
.btn-inverse.active {
  background-color: #323232;
}




/*==========6. FEATURES==============*/

.features {
margin-bottom:50px;
}


.features img {
	margin-right:25px;
}




/*==========7. TESTIMONIALS==============*/

.testimonials {
	background:#eeeeee;
}


.testimonials blockquote {
	border:0;
	padding-left:0;
	margin-bottom:40px;
}

.testimonials blockquote p {
	font-style:italic;
	font-size:20px;
	color:#373737;
}

blockquote small {
line-height: 33px;
font-size: 14px;
}


/*==========8. FOOTER==============*/


.footer {
	background:#eeeeee;
	margin-top:50px;
	padding:30px 0;
}

.footer p {
	font-size:16px;
	color:#414141;
}

.footer p a {
	font-size:14px;
}


.SocialIcons {
	text-align:right;
}


.SocialIcons a:hover {
	opacity:0.8;
}





/*==========9. COMMON SUBPAGE STYLES==============*/


.SubHead {
	background:#eee;
	padding: 15px 0;
}


.SubHead h1 {
	font-size: 46px;
	line-height: 1;
	font-weight: 300;
	color:#2c2b2b;
}

.SubHead h2 {
	font-size: 28px;
	line-height: 1.3;
	font-weight: 300;
	color:#4d4d4d;
}




/*==========10. ABOUT AND TEAM PAGE==============*/




.Description {
	font-size:16px;
	line-height: 1.5;
}


.ourStory blockquote {
	margin:40px 0;
}


ul.thumbnails li.span3:nth-child(4n + 5) {
  margin-left : 0px;
}

.thumbnail {
	padding:0;
	border:0;
	text-align:center;
}

.thumbnail > img {
	margin-bottom:10px;
}

.thumbnail h3 {
	font-size:20px;
	color:#000000;
	margin:0;
	font-weight:300;
	line-height: 30px;
}

.thumbnail p {
	font-size:14px;
	color:#373737;
	font-weight:300;
	margin:0;
	margin-bottom: 20px;
}

/*==========11. CUSTOM MEDIA QUERIES==============*/


/*MEDIA QUERIES*/


@media (min-width: 1200px) {
.jumbotron .PhoneBlock {
margin-left: 90px;
}

.Asseenon img {
	padding-right:30px;
}

}


@media (max-width: 979px) and (min-width: 768px) {
.jumbotron {
height:auto;
}

.navbar .nav {
	background:#eee;
}
.navbar .nav > li > a {
  padding: 10px 15px 10px;
}

.navbar .nav > .active > a {
	background-color:transparent;
}

.navbar .btn-navbar {
	margin-top:20px;
}

}

@media (max-width: 767px) {
.jumbotron {
padding: 20px 20px;
margin-top: -20px;
margin-right: -20px;
margin-left: -20px;
height:auto;
}

.testimonials, .footer, .SubHead {
padding: 10px 10px;
margin-right: -20px;
margin-left: -20px;
}

.TopBar {
margin-top: 0;
}

.navbar .nav {
	background:#eee;
}
.navbar .nav > li > a {
  padding: 10px 15px 10px;
}

.navbar .nav > .active > a {
	background-color:transparent;
}


.navbar .btn-navbar {
	margin-top:20px;
}

.SocialIcons {
	text-align:center;
}

.footer p {
	text-align:center;
}


}

@media (max-width: 480px) {

.navbar .brand {
float: none;
}

.brand img {
	max-width:70%;

}

.navbar .btn-navbar {
	margin-top:15px;
}
.features img {
	margin-right:0;
	float: none;
margin-bottom: 20px;
width: 100%;
}

}


/******
 * Custom home and features
 ******/

/**
 * Home
 */
img.customer-logo {
	max-height: 120px;
	max-width: 225px;
	margin-right: 15px;
}


.fb_edge_widget_with_comment, .fb-like {
	padding: 24px 15px 0;
}

.features h4 {
	margin-top: 0;
}

.jumbotron.splash {
	height:auto;
	min-height:410px;
}

.jumbotron.splash h1 {
	font-size: 40px;
}

.jumbotron.splash a.customers {
	color: #FFFFFF;
	text-decoration:underline;
}

.jumbotron.splash .tagline {
	padding: 60px 0 30px 0;
}

img.computer-demo {
	margin-top:15px;
}

.announce-banner {
	background:#dff0d8;
	text-align:center;
	border-bottom:1px solid #468847;
	border-top:1px solid #468847;
}

.announce-banner .label {
	position:relative;
	top:-3px;
}

.announce-banner h4 {
	 color:#468847;
	 font-size:20px;
}

.announce-banner a {
	color: #2374B0;
	text-decoration: underline;
}

/**
 * Monuments
 */

.designer-demo-backdrop {
	width: 500px;
}

.designer-demo {
	position:absolute;
	font-size: 24px;
	padding: 15px 30px;
	margin-top: 170px;
	margin-left: -401px;
}

/**
 * Team
 */
p.role {
   font-weight: bold;
}

.bio p {
	text-align: left;
}

.ourTeam .thumbnail {
	padding: 10px;
}

.ourTeam .thumbnail img {
   width: 100%;
}

/**
 * Solutions - Social Media
 */

img.promo-logo {
	float: right;
	margin-left:20px;
	max-width: 400px;
}

img.img-polaroid-noborder {
	padding: 5px;
}

h4 {
	margin-top: 15px;
	color: #2374B0;
}

.reach_count {
	text-align: center;
}

.center {
	text-align: center;
}

#promoCarousel {
	margin-top: 40px;
}

#promoCarousel .carousel-inner {
	height: 310px;
}

.carousel-inner .promo {
	margin-left: 50px;
	float: left;
	width: 430px;
}

.carousel-inner .promo-img {
	max-width: 575px;
	max-height: 300px;
	margin: 0 auto;
}

.carousel-inner .item {
	padding: 0 50px;
}

.carousel-indicators li {
	background-color: #CCC;
}

.carousel-indicators .active {
	background-color: #999;
}


.testimonial_logos .logo {
	float: left;
	margin-right: 30px;
	width: 160px;
}

.testimonial_logos .logo img {
	width:200px;
}

/**
 * Pricing Tables
 */

.pricing-table .plan {
  border-radius: 5px;
  text-align: center;
  background-color: #f3f3f3;
  -moz-box-shadow: 0 0 6px 2px #b0b2ab;
  -webkit-box-shadow: 0 0 6px 2px #b0b2ab;
  box-shadow: 0 0 6px 2px #b0b2ab;
}

 .plan:hover {
  background-color: #fff;
  -moz-box-shadow: 0 0 12px 3px #b0b2ab;
  -webkit-box-shadow: 0 0 12px 3px #b0b2ab;
  box-shadow: 0 0 12px 3px #b0b2ab;
}

 .plan {
  padding: 20px;
  color: #ff;
  background-color: #5e5f59;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
}

.plan-name-bronze {
  padding: 20px;
  color: #fff;
  background-color: #665D1E;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
 }

.plan-name-silver {
  padding: 20px;
  color: #fff;
  background-color: #AAAAAA;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
 }

.plan-name-gold {
  padding: 20px;
  color: #fff;
  background-color: #FFC900;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
  }

.pricing-table-bronze  {
  padding: 20px;
  color: #fff;
  background-color: #f89406;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
}

.pricing-table .plan .plan-name span {
  font-size: 20px;
}

.pricing-table .plan ul {
  list-style: none;
  margin: 0;
  -moz-border-radius: 0 0 5px 5px;
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}

.pricing-table .plan ul li.plan-feature {
  padding: 15px 10px;
  border-top: 1px solid #c5c8c0;
}

.pricing-three-column {
  margin: 0 auto;
  width: 80%;
}

.pricing-variable-height .plan {
  float: none;
  margin-left: 2%;
  vertical-align: bottom;
  display: inline-block;
  zoom:1;
  *display:inline;
}

.plan-mouseover .plan-name {
  background-color: #4e9a06 !important;
}

.btn-plan-select {
  padding: 8px 25px;
  font-size: 18px;
}