@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


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:14px;
	font-weight:300;
	color:#373737;
}	

a {
	color:#414141;	
}

a:hover {
	color:#ae0e40;	
}

/*==========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: #ae0e40;
  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(../images/bannerBG.png) no-repeat #eeeeee; /* Old browsers */
	background-size:100% 100%;
	height:500px;
	overflow:hidden;
}


.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: 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);
}

.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: 16px;
	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;	
}




/*==========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: #ae0e40;
  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:#fff;	
	padding: 20px 0;
}


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

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

.SubHead p {
	color:#284c6e;
}




/*==========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 {

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%;
}

}