/*
Theme Name: GRANITE -  BLUE - Version: 2
Description:  Designed by josweb.
Author:  Jo
Purchase:  http://themeforest.net/user/josweb

01. GENERAL STYLING
02. SECTIONS + PARALLAX SECTIONS
03. MENU
04. SLIDER REVOLUTION
05. TEAM - TEAM, WE LIKE TICKER
06: WORK/PROJECTS - MODAL BOX
07: WORK/PORTFOLIO GRID
08. CONTACT SECTION
09. SECTION DIVIDERS
10. BUTTONS
11. SKILL BARS
12. PRICING TABLES
13. BLOG
14. CSS3 ANIMATIONS
15. MEDIA QUERIES
*/

/*-----------------------------------------------------------------------------------*/
/*	01: GENERAL STYLING
/*-----------------------------------------------------------------------------------*/	

body {
	font-family:'Open Sans', sans-serif;
	font-size:15px;
	line-height:24px;
	color:#8e939a!important;
	font-weight:400;
	background:#2a2f36;
	overflow-x:hidden!important;
	text-rendering:optimizeLegibility;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	-webkit-font-smoothing:subpixel-antialiased;
}

html { 
	font-size:100%;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
}

a, a:visited, a:hover, a:active, a:focus, input, select, textarea { outline:none; text-decoration:none; }
a, li { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
:focus { outline: 0; }
ul{  list-style-type:none; padding:0; margin:0 0 10px 0px;}
ol { padding:0; margin:0 0 20px 20px;}
ul.unstyled,ol.unstyled{margin-left:0;list-style:none; }
ul.inline,ol.inline{margin-left:0;list-style:none;}
ul.inline>li,ol.inline>li{display:inline-block;*display:inline; *zoom:1; padding-left:5px; padding-right:5px; }
::-moz-selection { color #fff; background:#2A2F36; }
::selection { color:#fff; background:#8A939A; }
code{ color:#384049; }
img { vertical-align:top; ms-interpolation-mode:bicubic; opacity:1.0; }
iframe { border: 0; }
.well { border:none; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; }
.center { margin:0 auto; }
img { display:block; height:auto; max-width:100%; }
ul { list-style-type: none; color:#8e939a;}
.jumbotron { background:#fff;}
.pull-left { margin-right:10px; }
.pull-right { margin-left:10px; }

a{	
	color:#3bb3e0;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
a:hover, a:focus{ color:#8e939a; }

/**** CAROUSEL ****/
.carousel-indicators{ top:0px; }
.carousel-control { 
   position: absolute;
	top:50%;
	left:15px;
	width:50px;
	height:50px;
	font-size:25px;
	outline:none; 
	webkit-transition:none;  
    -moz-transition:none;  
    -o-transition:none;
	transition:none;
	 border: 0px none;
	-webkit-border-radius: 0px;
	-moz-border-radius:0px;
	border-radius: 0px;
}
.carousel-control.right { right:0px; left:auto; top:45%; background-image: none!important; filter: none!important; }
.carousel-control.left { left:0px; right:auto; top:45%; background-image: none!important; filter: none; }
	
/**** ICONS LIST ****/
.fa-li { margin-left:-8px; padding-top:4px; }

/**** TOOLTIP ****/
.tooltip-inner { margin:0 0 10px; padding:7px 12px; color:#fff; background-color:#3bb3e0; font-weight:400;}
.tooltip.top .tooltip-arrow { margin:0 0 10px; border-top-color:#3bb3e0; }

/**** BLOCKQUOTE ****/
blockquote { border-left:4px solid #8e939a!important; color:#8e939a!important; padding: 10px; }

/**** VIDEO ****/
.vendor { position: relative; padding:0 0 56.25%; height: 0; margin 0 0; }
.vendor iframe { position:absolute; top:0; left:0; width:100%; height:100%; } 

/**** ACCORDIAN ****/
#accordion { padding:0px 15px; background-color: transparent; }
.panel-heading { 
	border-bottom:1px solid #fff;
	background-color: #7F8C8D;
	padding: 10px 20px 10px!important;
	-webkit-border-radius: 0px!important;
	-moz-border-radius: 0px!important;
	border-radius: 0px!important;
}
.panel-heading h6 a { color: #f1f1f1;  letter-spacing:1px;}
.panel-heading h6 { font-size:15px!important; margin:0px 0px; font-weight:400; }
.panel-heading h6 a:hover { color: #fff; }
.panel-collapse { color: #8e939a; padding: 0 0px 30px!important; }


/**** TABS ****/
.nav-tabs { border-bottom: 1px solid #bbb; }
.nav-tabs a:link { color: #fff!important;  margin-left:2px;}
.nav-tabs a {
	background-color: #7F8C8D!important;
	-webkit-border-radius: 0px!important;
	-moz-border-radius: 0px!important;
	border-radius: 0px!important;
	border: 0 none!important;
}
.tab-pane { margin-top:20px; }
.nav-tabs .active a, .nav-tabs a:hover, .nav-tabs .active  a:focus { background-color: #3bb3e0!important;}

/**** PADDING ****/
.pad90 { padding-top:90px; }
.pad60 { padding-top:60px; }
.pad45 { padding-top:45px; }
.pad30 { padding-top:30px; }
.pad25 { padding-top:25px; }
.pad15 { padding-top:15px; }
.pad10 { padding-top:10px; }
.pad5 { padding-top:5px; }
.pad-right5 { padding-right:5px; }
.pad-left5 { padding-left:5px; }
.pad-bottom5 { padding-bottom: 15px; }
.pad2 { padding-top:2px; }

/**** COLOURS ****/
.asphalt { background:#384049; }
.asphalt2 { color:#384049; }
.red { background:#E84E41; }	  
.red2 { color: #E84E41; }
.grey { color:#8e939a; }
.yellow  { background: #F4A62A; }
.yellow2 { color:#F4A62A; }
.blue { color:#3bb3e0; }
.azure { background: #3bb3e0; }
.green { color:#2ECC71; }
.emerald { background: #2ECC71; }
.light { color: #E9E6E1!important; }
.darkgrey { color:#666; }
.white{ color:#fff; }

/**** TYPOGRAPHY ****/
h1, h2, h3,h4,h5,h6 { font-family: 'Open Sans', sans-serif; color:#555; }
h1 { font-size:48px; font-weight:800!important; line-height:60px; }
h2 { font-size:32px; line-height:1.2em; margin-bottom: 20px; font-weight:300!important; }
h3 { font-size:30px; line-height:1.2em; margin-bottom: 20px; font-weight:300!important; }
h4 { font-size:28px; line-height:1.2em; margin-bottom: 20px; font-weight:300!important; }
h5 { font-size:24px; line-height:1.5em; margin-bottom:20px; font-weight:300!important; }
h6 { font-size:20px; line-height:1.5em; margin-bottom:20px; font-weight:300!important; }

p {
	font-size:15px;
	line-height:24px;
	margin-bottom:20px;
	color:#8e939a!important;
	font-weight: 400;
}

.lead{
	font-size:24px;
	line-height:36px;
	font-weight:300;
	margin:20px auto 70px;
	color:#555;
}

.jumbotron_title {
	line-height:1.2em;
	font-size:35px;
	color:#555;
	margin-bottom:25px;
	font-weight:700!important;
}

h2.contact_title {
	font-size:28px;
	line-height:38px!important;
	margin:0 0 20px;
	font-weight:300!important;
}
	
h6.skill {
	font-weight:400!important;
	font-size:13px;
	color:#8e939a!important;
	line-height:10px;
}

h6.project_title {
	font-size:16px;
	font-weight:400!important;
	color:#fff!important;
	text-transform:uppercase;
	margin:20px auto 30px;
	letter-spacing:2px;
}
.counter{ color:#3bb3e0; font-size:48px; font-weight:800!important; line-height:60px; }

/*-----------------------------------------------------------------------------------*/
/*	02: SECTIONS
/*-----------------------------------------------------------------------------------*/	
#Section-1 { background:#f1f1f1; padding:90px 0 140px; }
#Section-2 { background:#fff; padding-top:90px; margin-top:-90px; }
#Section-3 { background:#3bb3e0; padding:90px 0 0px; margin-top:-90px; }  	
#Section-4 { background:#f1f1f1; padding:90px 0 0px; } 
#Section-5 { background:#f1f1f1; padding-top:90px; } 
#Section-6 { background:#FFF; color:#E9E6E1; padding:90px 0 170px; margin-top:-90px; } 
#Section-7 { background:#2a2f36; padding:20px 0 20px; } 
#Section-8 { background:#2a2f36; padding:50px 0 20px; } 

/**** SECTION COLOUR CHANGES ****/
#Section-3 h1, #Section-2 .well h1 { color:#fff!important; } 
.lead-light { color:#f1f1f1!important; } 
#Section-7 h3{ color:#8e939a!important;} 

/**** PARALLAX SECTIONS ****/
.parallax-section {
	width: 100%;
	background-attachment: fixed;
	background-position: center center;
	-webkit-background-size: cover!important;
    -moz-background-size: cover!important;
    -o-background-size: cover!important;
    background-size: cover!important;
}

/**** LOGOS ****/
#Section-2 .well {	
	background: url(../img/parallax-1.jpg) 50% 0% fixed no-repeat;
	margin:0px 0px 90px;
	padding:100px 0 200px;
	-webkit-background-size: cover!important;
    -moz-background-size: cover!important;
    -o-background-size: cover!important;
    background-size: cover!important;
}

/**** BIG BUTTON ****/
#big_button{ 
	background: url(../img/parallax-2.jpg) 50% 0% fixed no-repeat;
	padding:60px 0 ;
	margin:0  0px;
}
#big_button .lead {
	color:#E9E6E1!important;
	text-align:left;
	font-weight:700;
	padding:90px 0 40px 0;
}
.cta.btn { padding:20px; color:#fff!important; font-weight:700; margin:0 0px 0 10px; }

/**** QUOTES ****/
#Section-5 .well {
	background: url(../img/parallax-3.jpg) 0% 0% fixed no-repeat;
	margin:0px 0px;
	padding:150px 0 250px;
	-webkit-background-size: cover!important;
    -moz-background-size: cover!important;
    -o-background-size: cover!important;
    background-size: cover!important;
}

/**** QUOTES/TESTIMONIALS ****/
.carousel2 { padding:10px 0px; margin:0px auto 60px; }
.quote{ margin:10px auto 10px; text-align:center; }
.quote p{ 
	font-size:22px;
	line-height:30px;
	margin:15px auto;
	color:#E9E6E1!important;
	font-weight:700;
	text-transform:uppercase;
}
.quote-small { font-size:18px; line-height:30px; color:#777; text-align:center; font-weight:400; }
.quote-small a { font-size:14px; font-weight:400; text-align:center;}

/*-----------------------------------------------------------------------------------*/
/*	03: MENU
/*-----------------------------------------------------------------------------------*/	
.navbar {
 	background-color:#fff;
	position:fixed;
	width:100%;
	z-index:999;
	min-height:85px;
	top: 0;
	-webkit-border-radius: 0px;
	-moz-border-radius:0px;
	border-radius: 0px;
	box-shadow:0 1px 2px rgba(0, 0, 0, 0.1);
}

.navbar .navbar-toggle {
	top:25px;
	right:28px;
	height:35px;
	width: auto;
	color: #fff!important;
	line-height:40px;
	background-color:#292C37;
	-webkit-transition: background-color 0.2s;
	-moz-transition: background-color 0.2s;
	-o-transition: background-color 0.2s;border:0 none;
	transition: background-color 0.2s;
}
.navbar .navbar-toggle:hover { background-color:#3bb3e0; color:#fff!important; }

.navbar .navbar-brand {
   margin: 4px 0 0;
	opacity:1.0;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.navbar-brand:hover { opacity:0.7; }

.navbar .navbar-nav { min-height:80px; }
.navbar .navbar-nav li { margin-top:20px; margin-left:10px; padding:12px 10px; }
.navbar .navbar-nav li a {
	font-size:13px;
	color: #666;
	letter-spacing:1px;
	font-weight:700;
	background:transparent;
	padding:0;
	text-transform:uppercase;
	-webkit-transition:color 0.5s;
	-moz-transition:color 0.5s;
	-o-transition:color 0.5s;
	transition:color 0.5s;
}
.navbar .navbar-nav li:hover:before{
	content:" ";
	position:absolute;
	width:20px;
	height:1px;
	bottom:8px;
	display:block;
	background:#3bb3e0;
}
.navbar .navbar-nav li a:hover { color:#7F8C8D; background-color:transparent; }
.navbar .navbar-nav li.active a { color:#3bb3e0; background-color:transparent!important; }
.navbar .navbar-nav li.active a:hover, .navbar .navbar-nav li:hover, .navbar .navbar-nav li.visited { 
	background-color:transparent!important;
	text-decoration:none;
}

/*-----------------------------------------------------------------------------------*/
/*	04: SLIDER REVOLUTION
/*-----------------------------------------------------------------------------------*/	
#revolution_slider { padding:85px 0 0; }
.fullwidthbanner-container {
	width: 100%!important;
	max-height:610px!important;
	position: relative;
	padding: 0;
	overflow:hidden!important;
	margin:0px 0px;
}
.fullscreenvideo iframe { max-height:610px!important; }

.fullwidthbanner a {  color:#fff!important; }
.fullwidthbanner ul { visibility:hidden; margin:0; list-style:none; }
.rev-text { color: #fff; margin:40px; }
.rev-title { margin 0px; color:#E9E6E1!important; }
.rev-left { margin-left:20px; }
.rev-right { margin-right:20px; }
.rev-title.big{ font-size:40px; }
.rev-title-sub{ font-size:28px; color:#8e939a; letter-spacing:3px; font-weight:400;}
.rev-title-sub2{ font-size:28px; color:#d5d4d3; letter-spacing:3px; font-weight:700!important;}
#revolution_slider h2{ font-size:36px; margin:0 0; }

.rev-title.bold{
	font-size:60px!important;
    line-height:1;
    font-weight:700!important;
    text-transform:uppercase;
   	padding:0 0!important; 
}

.tp-caption.bg { background:#323A45; padding:15px 22px 22px; }

.tp-leftarrow.default, .tp-rightarrow.default {
	height:48px!important;
	width:auto!important;
	line-height:45px;
	top:50%!important;
	padding:0px 10px;
	font-size:30px;
	color:#bbb;
}
.tparrows:before {
    font-family: 'FontAwesome';
    font-style:normal;
    font-weight:normal;
    speak:none;
    display:inline-block;
    text-decoration:inherit;
    text-align:center;
}
.tp-leftarrow.default:before { content: '\f053'; }
.tp-rightarrow.default:before { content: '\f054'; }
.tparrows:hover { opacity: 0.7; }
.tp-bannertimer.tp-bottom {
    width:100%;
    height:4px!important;
    background:url(../img/timer.png);
    position:absolute;
    z-index:200;
}
.tp-loader 	{
	width:64px!important;
	height:64px!important;
	margin-left:0px;
	margin-top:0px;
	position:absolute;
	top:50%;
	left:50%;
	background: url(../img/loader.gif) center no-repeat!important;
	z-index:10000;
}
	
/*-----------------------------------------------------------------------------------*/
/*	05: THE TEAM SECTION 
/*-----------------------------------------------------------------------------------*/
/**** TEAM ****/
.grid {	
	max-width:1170px;
	margin:0 auto;
	padding:0;
	list-style:none;
	text-align:center;
}
.grid li {
	display:inline-block;
	width:350px;
	margin:0px 5px 10px 0px;
	padding:0px;
	text-alignleft;
	position: relative;
}
.grid figure { margin:0; position:relative; }
.grid figure img { max-width:100%; display:block; position:relative; }
.grid figcaption {
	position:absolute;
	top:0;
	left:0;
	padding:20px;
	background:#2a2f36;
}
.grid figcaption h3 {color:#8E939A!important; font-size:22px; margin:0; padding:0;  }
.grid figcaption span {
font-size:15px;
	padding:0px;
	color:#3bb3e0;
	margin:0 0 12px;
	display:inline-block;
	width:100%;
	font-weight:400;
}

/**** WE LIKE TICKER ****/
.we_like { background:#3bb3e0; }
h1.like{
	color:#fff!important;
	text-transform:uppercase;
	font-size:35px!important;
	line-height:1.2em;
	font-weight:800!important;
	padding:35px 0;
}
.ticker { text-transform:uppercase; font-weight:300!important; }

/*-----------------------------------------------------------------------------------*/
/*	06: WORK/PROJECTS - MODAL BOX
/*-----------------------------------------------------------------------------------*/	
.bigmodal { width:100%; height:100%; left:0; margin:0; }
.bigmodal.fade.in { top:0; }
.bigmodal .modal-body { max-height:none; }

.modal {
	background:#fff!important;
	overflow-x:hidden;
	border:0px;
	-webkit-border-radius:0px;
	-moz-border-radius:0px;
	border-radius:0px;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
}
.modal-body { background: #fff!important; padding:20px 0px; }
.modal img { min-width:100%; height:auto; }

.close{
	font-size:38px;
	background:transparent;
	color:#333;
	float:none;
	cursor:pointer;
	border:0;
	-webkit-appearance:none;
	-webkit-transition:0.2s;
	-moz-transition:0.2s;
	-o-transition:0.2s;
	transition:0.2s;
	-webkit-text-shadow: none;
	-moz-text-shadow: none;
	-o-text-shadow:none;
	text-shadow:none;
}
.close:hover {
	color:#666;
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);
	transform:rotate(-90deg);
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}

.modal-backdrop { display: none !important; }
.modal-backdrop, .modal-backdrop.fade.in { z-index: 0; }

/*-----------------------------------------------------------------------------------*/
/*	07: WORK/PORTFOLIO GRID + HOVER EFFECT (WORK + TEAM)
/*-----------------------------------------------------------------------------------*/	
.grida {	
	max-width:1170px;
	padding:0;
	margin 0 auto;
	list-style:none;
	text-align:center;
}
.grida li {
	display:inline-block;
	width:350px;
	margin:0px 5px 10px 0px;
	padding:0;
	text-align:left;
	position:relative;
}
.grida figure { margin:0; position:relative; }
.grida figure img { max-width 100%; display block; position:relative; }

.grida figcaption {
	text-align:center;
	position:absolute;
	top:0;
	left:0;
	background:#2a2f36;

	padding:10px 0;
}
.grida figcaption h4 {
	font-size:15px;
	font-weight:400!important;
	margin:0;
	padding:5px 0 15px 0;
	color:#8E939A!important; 
}
.cs-style figure { overflow: hidden; width: 100%; }

.cs-style img {
	-webkit-transition: -webkit-transform 0.4s;
	-moz-transition: -moz-transform 0.4s;
	-o-transition: -o-transform 0.4s;
	transition: transform 0.4s;
}
.no-touch .cs-style figure:hover img,
.cs-style figure.cs-hover img  {
	-webkit-transform: translateY(-50px);
	-moz-transform: translateY(-50px);
	-ms-transform: translateY(-50px);
	transform: translateY(-50px);
}
.cs-style figcaption {
	width:100%;
	top:62%;
	bottom:0;
	opacity:0;
	filter: alpha(opacity=0);
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-ms-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
	transition: transform 0.4s, opacity 0.1s 0.3s;
}
.no-touch .cs-style figure:hover figcaption,
.cs-style figure.cs-hover figcaption {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s;
	transition: transform 0.4s, opacity 0.1s;
}
.cs-style figcaption a { margin: 0 auto; color:#3bb3e0; }
.cs-style figcaption a:hover { color:#8e939a; }

/*-----------------------------------------------------------------------------------*/
/*	08: CONTACT SECTION
/*-----------------------------------------------------------------------------------*/
.google-maps { height:450px; margin:0px 0 70px; }

#ajax-contact-form textarea { height:150px!important;}
.form_info {
	color:#555!important;
	text-transform:uppercase;
	font-weight:400;
	font-size:14px;
	margin-bottom:0px;
	height: 30px;
	margin-left:-14px;
}
#ajax-contact-form input, #ajax-contact-form  textarea {
	background:#f0f0f0;
	color:#555;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
	border: 0px none;
	margin-bottom:3px;
	height:30px;
	font-weight:400;
}
#ajax-contact-form input:focus, #ajax-contact-form  textarea:focus { background:#E9E7E7; color:#555; }

#ajax-contact-form input.btn { 
	border:none;
	margin:20px 5px 0 0;
	-webkit-border-radius: 4px;
	-moz-border-radius:4px;
	border-radius: 4px;
	padding:5px 15px;
}

.notification_error {
	color: #fff;
	background-color:#333;
	height: auto;
    margin: 0 0 9px 0;
    padding: 10px;
    text-align: left;
}
.notification_ok {
    color: #fff;
	background-color: #333;
	font-weight: 400;
    height: auto;
    margin: 0 0 9px 0;
    padding: 10px;
    text-align: center;
	font-size: 13px;
	text-transform: uppercase;
}
.required { color:#3bb3e0;}

/*-----------------------------------------------------------------------------------*/
/*	09: SECTION DIVIDERS
/*-----------------------------------------------------------------------------------*/	
section { position:relative; }
/* Common style for pseudo-elements */
section::before,
section::after {
	position: absolute;
	content: '';
	pointer-events: none;
}

/**** Rounded Center Split and Bottom Rounded  ****/
.ss-style-roundedsplit::before,
.ss-style-roundedsplit::after {
	top:-70px;
	left 0;
	z-index:10;
	width:50%;
	height:70px;
	background:inherit;
}
.ss-style-roundedsplit::before { border-radius:0 80px 0 0; }
.ss-style-roundedsplit::after { left:50%; border-radius:80px 0 0 0; }

/**** Half Circle ****/
.ss-style-halfcircle::before,
.ss-style-halfcircle::after {
	left: 50%;
	z-index: 10;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: inherit;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.ss-style-halfcircle::before { top: -50px; }
.ss-style-halfcircle::after { bottom: -50px; }

/**** Inverted Rounded Corners - Footer Bottom  ****/
.ss-style-invertedrounded {
	margin-bottom: 90px;
	padding: 13em 10% 10em;
	-webkit-border-radius: 0 0 0 90px;
	-moz-border-radius:0 0 0 90px;
	border-radius: 0 0 0 90px;
}
.ss-style-invertedrounded::before,
.ss-style-invertedrounded::after {
	left: 0;
	z-index: -1;
	height: 90px;
	background:#3bb3e0;
}
.ss-style-invertedrounded::before {
	top: 100%;
	width: 100%;
	-webkit-border-radius: 0 90px 0 0;
	-moz-border-radius:0 90px 0 0;
	border-radius: 0 90px 0 0;
} 
.ss-style-invertedrounded::after {
	bottom: 0;
	z-index: -1;
	width: 50%;
}

/*-----------------------------------------------------------------------------------*/
/*	10: BUTTONS
/*-----------------------------------------------------------------------------------*/
/**** OUTLINE BUTTON ****/
.btn.btn-outline, .btn.btn-outline:active, .btn.btn-outline:focus  {
	border:2px solid #fff;
	color:#fff!important;
	background:transparent;
	-webkit-box-shadow: none;
	-moz-box-shadow:none;
	-o-box-shadow: none;
	box-shadow: none;
}
.btn.btn-outline:hover{
	color:#3bb3e0!important;
	background:#fff!important;
	border:2px solid #fff;
	-webkit-box-shadow: none;
	-moz-box-shadow:none;
	-o-box-shadow: none;
	box-shadow: none;
}

/**** COLOUR OUTLINE BUTTON ****/
.btn.btn-outline-colour, .btn.btn-outline-colour:active, .btn.btn-outline-colour:focus  {
	border:2px solid #3bb3e0!important;
	color:#3bb3e0!important;
	background:transparent!important;
	-webkit-box-shadow: none;
	-moz-box-shadow:none;
	-o-box-shadow: none;
	box-shadow: none;
}
.btn.btn-outline-colour:hover{
	color:#fff!important;
	background:#3bb3e0!important;
	border:2px solid #3bb3e0;
	-webkit-box-shadow: none;
	-moz-box-shadow:none;
	-o-box-shadow: none;
	box-shadow: none;
}

/**** DEFAULT ****/
.btn, #ajax-contact-form input.btn{
	border:none;
	color:#fff!important;
	background:#34495e;
	font-size:14px;
	font-weight:400!important;
	min-width:80px;
	text-decoration:none;
	text-shadow:none;
	-webkit-transition: 0.25s ease-in;
	-moz-transition: 0.25s ease-in;
	-o-transition: 0.25s ease-in;
	transition: 0.25s ease-in;
	-webkit-backface-visibility:hidden;
	-webkit-box-shadow: 0px 4px 0px 0px #293a4b;
	-moz-box-shadow: 0px 4px 0px 0px #293a4b;
	-o-box-shadow: 0px 4px 0px 0px #293a4b;
	box-shadow: 0px 4px 0px 0px #293a4b;
	-webkit-font-smoothing:subpixel-antialiased;
}
.btn:hover, .btn:focus{ 
	background-color:#435d77;
	color:#fff;
	outline:0; 
	-webkit-transition: 0.25s ease-out;
	-moz-transition: 0.25s ease-out;
	-o-transition: 0.25s ease-out;
	transition: 0.25s ease-out;
}

.btn:active, .btn.active {
	background-color:#34495e;
	color:rgba(255, 255, 255, 0.75);
	-webkit-box-shadow: 0px 2px 0px 0px #293a4b;
	-moz-box-shadow: 0px 2px 0px 0px #293a4b;
	-o-box-shadow: 0px 2px 0px 0px #293a4b;
	box-shadow: 0px 2px 0px 0px #293a4b; 
}
.btn.disabled, .btn[disabled] { background-color: #95a5a6; color:#fff; }
	
.btn-lg {
  padding:15px 20px;
  font-size:18px;
  line-height:1.33;
  border-radius:6px;
}
.btn-md {
  padding:15px 20px;
  font-size:14px!important;
  line-height:1.33;
  border-radius:6px;
font-weight:400!important;
}
.btn-sm,
.btn-xs {
  padding:5px 10px;
  font-size:12px;
  line-height:1.5;
  border-radius:3px;
}
.btn-xs {  padding: 1px 5px; }

/**** BLUE ****/
.btn.btn-info, #ajax-contact-form input.btn{
	background-color:#3bb3e0;
	-webkit-box-shadow: 0px 4px 0px 0px #3088a9;
	-moz-box-shadow: 0px 4px 0px 0px #3088a9;
	-o-box-shadow: 0px 4px 0px 0px #3088a9;
	box-shadow: 0px 4px 0px 0px #3088a9;
}
.btn.btn-info:hover, .btn.btn-info:focus, #ajax-contact-form input.btn:hover, #ajax-contact-form input.btn:focus { background-color:#4dc2ee;  }
.btn.btn-info:active,  .btn.btn-info.active, #ajax-contact-form input.btn:active {
	background-color:#3bb3e0!important;
	-webkit-box-shadow: 0px 2px 0px 0px #3088a9;
	-moz-box-shadow: 0px 2px 0px 0px #3088a9;
	-o-box-shadow: 0px 2px 0px 0px #3088a9;
	box-shadow: 0px 2px 0px 0px #3088a9;
}

/**** RED ****/
.btn.btn-danger{
	background-color:#e74c3c; 
	-webkit-box-shadow: 0px 4px 0px 0px #be382a;
	-moz-box-shadow: 0px 4px 0px 0px #be382a;
	-o-box-shadow: 0px 4px 0px 0px #be382a;
	box-shadow: 0px 4px 0px 0px #be382a;
}
.btn.btn-danger:hover, .btn.btn-danger:focus  { 
background-color:#f45c4d!important;
}
.btn.btn-danger:active, .btn.btn-danger.active {
	background-color: #e74c3c!important;
	-webkit-box-shadow: 0px 2px 0px 0px #be382a;
	-moz-box-shadow: 0px 2px 0px 0px #be382a;
	-o-box-shadow: 0px 2px 0px 0px #be382a;
	box-shadow: 0px 2px 0px 0px #be382a;
}

/**** GREEN ****/
.btn.btn-success {
	background-color:#2ecc71; 
	-webkit-box-shadow: 0px 4px 0px 0px #25ae5f;
	-moz-box-shadow: 0px 4px 0px 0px #25ae5f;
	-o-box-shadow: 0px 4px 0px 0px #25ae5f;
	box-shadow: 0px 4px 0px 0px #25ae5f;
}
.btn.btn-success:hover, .btn.btn-success:focus { background-color:#34d879; }
.btn.btn-success:active,  .btn.btn-success.active {
	background-color:#2ecc71!important;
	-webkit-box-shadow: 0px 2px 0px 0px #25ae5f;
	-moz-box-shadow: 0px 2px 0px 0px #25ae5f;
	-o-box-shadow: 0px 2px 0px 0px #25ae5f;
	box-shadow: 0px 2px 0px 0px #25ae5f;
}

/**** YELLOW ****/
.btn.btn-warning {
	background-color: #ffaa49; 
	-webkit-box-shadow: 0px 4px 0px 0px #ce8430;
	-moz-box-shadow: 0px 4px 0px 0px #ce8430;
	-o-box-shadow: 0px 4px 0px 0px #ce8430;
	box-shadow: 0px 4px 0px 0px #ce8430;
}
.btn.btn-warning:hover, .btn.btn-warning:focus { background-color: #f9b05e; }
.btn.btn-warning:active,  .btn.btn-warning.active {
	background-color: #FFAA49!important;
	-webkit-box-shadow: 0px 2px 0px 0px #ce8430;
	-moz-box-shadow: 0px 2px 0px 0px #ce8430;
	-o-box-shadow: 0px 2px 0px 0px #ce8430;
	box-shadow: 0px 2px 0px 0px #ce8430;
}
	 
/*-----------------------------------------------------------------------------------*/
/*	11: SKILL BARS
/*-----------------------------------------------------------------------------------*/
.bar-main-container {
  width: 100%;
  height: 40px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
 line-height:30px;
  font-size: 14px;
  color: #FFF;
}
.wrap { padding: 5px 10px 10px; }
.bar-percentage { float: left; padding: 0px 0px; width:10%; text-align:left; }
.bar-container {
  float: right;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  height: 10px;
  background: rgba(0,0,0,0.13);
  width: 87%;
  margin: 10px 0px;
  overflow: hidden;
}
.bar {
  float: left;
  background: #FAFAF8;
  height: 100%;
  -webkit-border-radius: 10px 0px 0px 10px;
  -moz-border-radius: 10px 0px 0px 10px;
  border-radius: 10px 0px 0px 10px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
}

/*-----------------------------------------------------------------------------------*/
/*	12: PRICING TABLE
/*-----------------------------------------------------------------------------------*/
.pricing-table {  text-align: center; margin-bottom:20px; }
.pricing-table ul { margin:0; padding:0; list-style:none; }
h2.price {
	font-size:18px!important;
	font-weight:400!important;
	margin:0 auto;
	text-align:center;
	color:#3bb3e0!important;
}
.pricing-header-row-1 {
	text-align:center;
	height:125px;
	font-size:20px;
	padding:13px 0 14px;
	font-weight:400;
	background-color:#fff;
	color:#555;
	-webkit-border-radius: 6px 6px 0px 0px;
    -moz-border-radius: 6px 6px 0px 0px;
   border-radius: 6px 6px 0px 0px;
}
.pricing-header-row-2 {
	text-align:center;
	height:45px;
	margin-top:0px;
	padding:10px 0 ;
	border-top:none;
	background-color:#ddd;
}
.pricing-content-row-odd,.pricing-content-row-even {
	background-color:#fff;
	padding:10px 0;
	color:#8e939a;
}
.pricing-content-row-even { padding:0px 0 ; }
.pricing-footer {
 	height:80px;
	background-color:#ddd;
	padding:20px 0 0;
	-webkit-border-radius: 0px 0px 6px 6px;
    -moz-border-radius: 0px 0px 6px 6px;
	border-radius: 0px 0px 6px 6px;
}

/* Pricing Table Icons */
.intro-icon-disc i{
	text-align:center;
	margin:0px auto;
	font-size:30px;	
}
.intro-icon-disc.cont-large { padding:15px; text-align:center; width:60px; height:60px; margin:0 auto 15px; }
.intro-icon-large:before{  font-size:35px; padding-left:0px; margin:0px 0 0 -3px; color: #3bb3e0;}
.intro-icon-disc {
	webkit-transition: border .5s;
	-moz-transition: border .5s;
	-o-transition: border .5s;
	-ms-transition: border .5s;
	transition: border .5s;
	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius:50%;
	-webkit-box-shadow:none;
	-moz-box-shadow: 0 0 0 30px transparent;
	box-shadow: 0 0 0 30px transparent;
	background: rgba(85,85,85, 0.2);
	-webkit-transition: box-shadow .6s ease-in-out;
	-moz-transition: box-shadow .6s ease-in-out;
	-o-transition: box-shadow .6s ease-in-out;
	-ms-transition: box-shadow .6s ease-in-out;
	transition: box-shadow .6s ease-in-out;
}
.intro-icon-disc:hover {
	box-shadow: 0 0 0 0 rgba(85,85,85,0.2);
	-webkit-transition: box-shadow .4s ease-in-out;
	-moz-transition: box-shadow .4s ease-in-out;
	-o-transition: box-shadow .4s ease-in-out;
	-ms-transition: box-shadow .4s ease-in-out;
	transition: box-shadow .4s ease-in-out;
}

/*-----------------------------------------------------------------------------------*/
/*	13: BLOG
/*-----------------------------------------------------------------------------------*/
#blog { background:#fff;} 
#blog-footer { background:#fff; padding:50px 0 20px;} 
.blog-body { background:#fff;} 
.date { border-top:1px solid #535d67; width:30px; margin:-10px 0 10px; }
.date-bottom { margin:0px 0 -10px; }
.post-title { margin:20px 0; }
.readmore  { font-size:13px; }

.post-meta ul {
	margin:0px 0 25px 0;
	padding: 0 0;
	list-style:none;
	text-transform:uppercase;
	font-size:12px;
	clear:both;
}
.post-meta li { margin:0; display:inline; }
.post-meta a { color:#bbb; }
.post-meta a:hover { color:#747474; }

.pager li a { background:#384049; border:0 none; color:#a3a8af; }
.pager li a:hover{ background:#535d67; border:0 none; color:#b6bdc7; }
.panel{
	background:#f1f1f1;
	border:0 none;
	-webkit-box-shadow: 0px;
	box-shadow: 0px ;
}

#contact-form2 textarea { height:150px!important;}
#contact-form2 .form_info {
	color:#555!important;
	text-transform:uppercase;
	font-weight:400;
	font-size:14px;
	margin-bottom:0px;
	height: 30px;
	margin-left:-14px;
}
#contact-form2 input, #contact-form2  textarea {
	background:#f1f1f1;
	color:#777;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
	border: 0px none;
	margin-bottom:3px;
	height:30px;
	font-weight:400;
}
#contact-form2 .btn {  margin:20px 5px 0 0; }

/*-----------------------------------------------------------------------------------*/
/*	14: CSS3 ANIMATIONS
/*-----------------------------------------------------------------------------------*/
/**** HIDE ELEMENTS UNTIL SCROLLED TO ****/
.jumbotron, .hi-icon, .grid,  .grida, #myCarousel, .carousel2, .pricing, #bar-1, #bar-2, #bar-3, #bar-4 { visibility: hidden; }
	
/**** SLIDE LEFT ****/
.slideLeft{
	animation-name: slideLeft;
	-webkit-animation-name: slideLeft;	
	animation-duration: 2s;	
	-webkit-animation-duration: 2s;
	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		
	visibility: visible !important;	
}
@keyframes slideLeft {
	0% { transform: translateX(150%); }
	50%, 65%, 80%, 95%, 100% { transform: translateX(0%); }
}
@-webkit-keyframes slideLeft {
	0% { -webkit-transform: translateX(150%); }
	50%, 65%, 80%, 95%, 100%{ -webkit-transform: translateX(0%); }
}

/**** SLIDE RIGHT ****/
.slideRight{
	animation-name: slideRight;
	-webkit-animation-name: slideRight;	
	animation-duration: 2s;	
	-webkit-animation-duration: 2s;
	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out	;	
	visibility: visible !important;	
}
@keyframes slideRight {
	0% { transform: translateX(-150%); }
	50%, 65%, 80%, 95%, 100% { transform: translateX(0%); }
}
@-webkit-keyframes slideRight {
	0% { -webkit-transform: translateX(-150%); }
	50%, 65%, 80%, 95%, 100% { -webkit-transform: translateX(0%); }
}

/**** SLIDE UP ****/
.slideUp{
	animation-name: slideUp;
	-webkit-animation-name: slideUp;	
	animation-duration: 2s;	
	-webkit-animation-duration: 2s;
	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;
	visibility: visible !important;			
}

@keyframes slideUp {
	0% { transform: translateY(100%); }
50%, 65%, 80%, 95%, 100% { transform: translateY(0%); }
}
@-webkit-keyframes slideUp {
	0% { -webkit-transform: translateY(100%); }
	50%, 65%, 80%, 95%, 100% { -webkit-transform: translateY(0%); }
}

/**** FADEIN  ****/
.fadeIn{
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;	
	animation-duration: 2.0s;	
	-webkit-animation-duration: 2.0s;
	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		
	visibility: visible !important;	
}
@keyframes fadeIn {
	0% { transform: scale(0); opacity: 0.0;	}
	60% { transform: scale(1); }
	80%, 100% { transform: scale(1); opacity: 1; }	
}
@-webkit-keyframes fadeIn {
	0% { -webkit-transform: scale(0); opacity: 0.0;	}
	60% { -webkit-transform: scale(1); }
	80%, 100% { -webkit-transform: scale(1); opacity: 1; }	
}

/**** BOUNCE ****/
.bounce{
	animation-name: bounce;
	-webkit-animation-name: bounce;	
	animation-duration: 1.6s;	
	-webkit-animation-duration: 1.6s;
	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	
	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%; 	
}
@keyframes bounce {
	0% { transform: translateY(0%) scaleY(0.1); }
	60%{ transform: translateY(-30%) scaleY(1.1); }
	70%{ transform: translateY(0%) scaleY(0.95) scaleX(1.05); }
	80%{ transform: translateY(0%) scaleY(1.05) scaleX(1); }	
	90%{ transform: translateY(0%) scaleY(0.95) scaleX(1); }				
	100%{ transform: translateY(0%) scaleY(1) scaleX(1); }	
}
@-webkit-keyframes bounce {
	0% { -webkit-transform: translateY(0%) scaleY(0.1); }
	60%{ -webkit-transform: translateY(-0%) scaleY(1.1); }
	70%{ -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05); }
	80%{ -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1); }	
	90%{ -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1); }				
	100%{ -webkit-transform: translateY(0%) scaleY(1) scaleX(1); }		
}

/**** HEART ****/
.heart {
  position: relative;
  width: 100px;
  height: 90px;
  margin: 30px auto 10px;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transition: all 1s; 
}
.heart {  
  -webkit-animation-delay:1s;
  -moz-animation-delay:1s;
  -ms-animation-delay:1s;
  -o-animation-delay:1s;
  animation-dely:1s;
}
.heart.animated {
  -webkit-animation: 1600ms pulsate infinite alternate ease-in-out;
  -moz-animation: 1600ms pulsate infinite alternate ease-in-out;
  -ms-animation: 1600ms pulsate infinite alternate ease-in-out;
  -o-animation: 1600ms pulsate infinite alternate ease-in-out;
  animation: 1600ms pulsate infinite alternate ease-in-out;
}
.heart:before,
.heart:after { 
  position: absolute; 
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: #E34834;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 50px 50px 0 0;
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
     -moz-transform-origin: 0 100%;
      -ms-transform-origin: 0 100%;
       -o-transform-origin: 0 100%;
          transform-origin: 0 100%;
}
.heart:after {
  left: 0;
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
     -moz-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
       -o-transform-origin: 100% 100%;
          transform-origin :100% 100%;
}
@keyframes pulsate {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
@-webkit-keyframes pulsate {
  0% { -webkit-transform: scale(1); }
  50% { -webkit-transform: scale(1.3); }
  100% { -webkit-transform: scale(1); }
}
@-moz-keyframes pulsate {
  0% { -moz-transform: scale(1); }
  50% { -moz-transform: scale(1.3); }
  100% { -moz-transform: scale(1); }  
}
@-ms-keyframes pulsate {
  0% { -ms-transform: scale(1); }
  50% { -ms-transform: scale(1.3); }
  100% { -ms-transform: scale(1); }  
}
@-o-keyframes pulsate {
  0% { -o-transform: scale(1); }
  50% { -o-transform: scale(1.3); }
  100% { -o-transform: scale(1); }  
}

/*-----------------------------------------------------------------------------------*/
/*	15: MEDIA QUERIES
/*-----------------------------------------------------------------------------------*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
#Section-2 .well, #big_button, #Section-5 .well { background-position: 50% 0px!important; background-attachment: scroll!important; }
.carousel2 { height:auto; }
}

@media only screen
and (min-width: 1000px)
and (max-width: 1030px){
#Section-2 .well, #big_button, #Section-5 .well { background-position: 50% 0px!important; background-attachment: scroll!important; }
}

@media screen and (max-width: 979px){
#Section-2 .well, #big_button, #Section-5 .well { background-position: 50% 0px!important; background-attachment: scroll!important; }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
.navbar .navbar-nav li { margin-left:0px; }
.navbar .navbar-nav li a { font-size:13px; }
.rev-title.bold { margin-top:0px; }
.we_like{display:none;}
}

@media screen and (max-width: 767px) {
.container{ padding-right:20px; padding-left:20px; }
.navbar { position:relative; margin-bottom:0; }
#revolution_slider { padding:0px 0px; }
.cta.btn {  float:none; margin: -20px auto 20px; display:block; min-width:45%; }
.notice p { margin: 0 auto 0px; text-align:center!important; }
}

@media screen and (min-width: 480px) and (max-width: 768px){
.rev-title { font-size:16px; line-height:22px; } 
.rev-title.big { font-size:24px; line-height:28px;}
.grid li { width:47%; margin-left:0px; }
.grida li { width:47%; margin-left:0px; }
.rev-title.bold { font-size:40px!important; letter-spacing:4px; margin-top:0px; }
.btn-mobile { padding:10px 12px; font-size:15px; }
#revolution_slider h2 { font-size:25px; margin:0 0;  }
.we_like{display:none;}
.quote { min-height:150px!important; }
}

@media screen and (max-width: 480px){
.quote { min-height:225px!important;  }
#revolution_slider { padding:0px 0px; }
.mobile-top { padding-top:0px;}
}

@media screen and (max-width: 479px){
#revolution_slider{ padding:0px 0px; }
.rev-title { font-size:10px; line-height:14px; }
.rev-title.big { font-size:16px; line-height:20px; }
#revolution_slider h2 { font-size:20px; margin:0 0;  }
.mobile-top { padding-top:0px;}
}

@media screen and (max-width: 31.5em) {
.quote{min-height:225px!important; }
.grid { padding: 0px 0px 10px; }
.grid li { width:80%; min-width:280px; margin-left:-3px; }
.grida { padding:0px 0px 10px; }
.grida li { width:80%; min-width:280px; margin-left:-3px; }
#revolution_slider{ padding:0px 0px; }
#revolution_slider h2{ font-size:20px; margin:0 0; }
.rev-title.bold { font-size:20px!important; letter-spacing:4px; margin-top:0px; }
.rev-title { font-size:12px; }
.rev-title-sub2 { margin-top:10px!important;}
.btn-mobile { padding:5px 12px; font-size:12px;}
.social-mobile { padding:5px 0; }
.we_like{display:none;}
.mobile-top { padding-top:0px;}
}

@media screen and (max-width: 320px) {
.quote { min-height:225px!important; }
.grid { padding: 0px 0px 10px; }
.grid li { width:80%; min-width:280px; margin-left:-3px; }
.grida { padding:0px 0px 10px; }
.grida li { width:80%; min-width:280px; margin-left:-3px; }
#revolution_slider{ padding:0px 0px; }
#revolution_slider h2{ font-size:20px; margin:0 0; }
.rev-title.bold { font-size:20px!important; letter-spacing:4px; margin-top:0px; }
.rev-title { font-size:12px; }
.rev-title-sub2 {margin-top:10px!important; }
.btn-mobile { padding:5px 12px; font-size:12px;}
.social-mobile { padding:5px 0; }
.cta.btn {  float:none; margin: -20px auto 20px; display:block!important; }
.we_like{display:none;}
.mobile-top { padding-top:0px;}
}