/*-------------------
---- Main Styles ----
---------------------*/

html,body{
	height:100%;
}

body{
	font-family:'Source Sans Pro',Arial,sans-serif;
	font-size: 16px;
	color: #89949C;
	letter-spacing: .01em;
	overflow-x: hidden;
	word-wrap: break-word;
}

h1,h2,h3,h4,h5,h6{
	color: #39444C;
}

#main-content{
	position: relative;
	background: #fff;
	box-shadow: 0 -5px 5px rgba(0,0,0,.2);
	z-index: 10;
}

a:focus,
button:focus{
  outline: none !important;
}

a{
	color: #036cc3;
	-webkit-transition:color .15s ease-out;
	transition:color .15s ease-out;
}

a:hover,
a:focus{
	color: #89949C;
	text-decoration: none;
}

.lead{
	margin-bottom: 30px;
	font-size: 28px;
	font-weight: 300;
	color: #39444C;
}

.big-padding{
	padding-top:100px;
	padding-bottom: 100px;
}

.small-padding{
	padding-top:60px;
	padding-bottom: 60px;
}

.section-title{
	margin-bottom: 50px;
	margin-top: 0;
	font-size: 62px;
	font-weight: 400;
	color: #39444C;
	text-align: center;
}

.section-title span{
	position: relative;
	top:-20px;
	font-size:42px;
	font-weight: 400;
}

.section-title + .subtitle{
	margin:-40px 0 50px;
	font-size: 21px;
	text-align: center;
}

.margin-top{
	margin-top: 60px !important;
}

.row-title{
	color:#39444C;
	font-weight: 400;
}

.push-down{
	margin-top:120px;
}

.img-center{
	margin: 0 auto;
}

.margin-grid{
	margin-bottom: 30px;
}

hr{
	border-color:#b9c4cC;
	margin:80px 0 80px;
}

.flexslider{
	margin:0;
	padding:0;
	border:none;
	box-shadow:none;
	background:transparent;
}
/*------------------
------ Colors ------
--------------------*/

.main-color{
	color:#036cc3 !important;
}

.bg-main-color{
	background:#036cc3;
	color:#fff;
}

.dark-bg{
	background:#11161b;
	color:#a9b4bC;
}

.gray-bg{
	background: #fbfbfc;
}

.white-bg{
	background: #fff;
}

.light-typo *{
	color: #fff;
}

/*---------------
---- Buttons ----
-----------------*/

.btn-dc{
	position: relative;
	padding:10px 50px;
	font-size:21px;
	border:2px solid;
	border-radius: 30px;
	-webkit-transition:padding .2s ease-out;
	transition:padding .2s ease-out;
}

.btn-dc.btn-small{
	position: relative;
	padding:7px 30px;
	margin-top: 20px;
	font-size:18px;
	border:2px solid;
	border-radius: 30px;
	-webkit-transition:padding .2s ease-out;
	transition:padding .2s ease-out;
}

.btn-dc:after{
	position: absolute;
	margin-left:10px;
	content:"\f061";
	font-family: fontAwesome;
	opacity:0;
	-webkit-transition:all .2s ease-out .0s;
	transition:all .2s ease-out .0s;
}

.btn-dc:hover{
	padding-right:70px;
}

.btn-dc.btn-small:hover{
	padding-right:50px;
}

.btn-dc:hover:after{
	margin-left:30px;
	opacity:1;
}

.btn-dc.btn-small:hover:after{
	margin-left:15px;
	opacity:1;
}

.btn-white,
.btn-white:hover,
.btn-white:focus{
	color:#fff;
	border-color:#fff;
}

.btn-dc.btn-main-color,
.btn-dc.btn-main-color:hover,
.btn-dc.btn-main-color:focus{
	color: #036cc3;
}

/*-----------------------
---- Preloader Styles ----
-------------------------*/
#page-loader{
	position: fixed;
	right:0;
	bottom: 0;
	top: 0;
	width:100%;
	background: #fff;
	z-index: 99999;
}

#page-loader .page-loader-gif{
	display: block;
	width:64px;
	height:64px;
	position: absolute;
	top:50%;
	left:50%;
	margin:-32px 0 0 -32px;
	background: url('../images/preloader.gif') no-repeat;
}

/*------------------
---- Nav Styles ----
--------------------*/

#main-nav{
	padding:0;
	background: transparent;
	-webkit-transition: all .3s ease-out;
	transition: all .3s ease-out;
}

#main-nav .container{
	padding-top:25px;
	padding-bottom:25px;
	-webkit-transition: padding .3s ease-out;
	transition: padding .3s ease-out;
}

#main-nav.scrolled .container{
	padding-top:12px;
	padding-bottom:12px;
}

#main-nav.scrolled{
	background: #fff;
	border-bottom:1px solid #b9c4cC;
}

.navbar > .container .navbar-brand{
	padding: 10px 0 5px 15px;
}

.navbar-brand{
	position: relative;
}

#main-nav.scrolled .navbar-brand:after{
	position: absolute;
	height:30px;
	right:-30px;
	top:50%;
	margin-top:-5px;
	font-family: fontAwesome;
	content:"\f062";
	color:#d9e4eC !important;
	opacity: 0;
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-transition: all .2s ease-out;
	transition: all .2s ease-out;
}

#main-nav.scrolled .navbar-brand:hover:after{
	opacity:1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

#site-nav a{
	padding:7px 30px;
	min-width:120px;
	font-size: 16px;
	font-weight: 6400;
	color:#89949C;
	text-align: center;
	background: none;
	-webkit-transition: color .2s ease-out, padding .3s ease-out;
	transition: color .2s ease-out, padding .3s ease-out; 
}

#site-nav .active a,
#site-nav a:hover,
#site-nav a:focus{
	padding-top: 4px;
	padding-bottom:10px;
	color:#036cc3 !important;
	background: none;
}
#site-nav a .fa{
	display: block;
	margin-bottom: 5px;
	font-size: 21px;
	text-align: center;
}

#site-nav ul li + li{
	border-left:1px solid #b9c4cC;
}

/*---------------------
---- Header Styles ----
-----------------------*/

#home{
	position: relative;
	height:100%;
	min-height:860px;
	margin-bottom:-64px;
	background: url('../images/header-bg.png') no-repeat;
	background-attachment: fixed;
	background-size: 100%;
	background-size: cover;
	overflow: hidden;
}

#home .container{
	position: fixed;
	width:100%;
	height:100%;
	min-height:860px;
	z-index: 2;
}

#home .row{
	margin:0;
	position: absolute;
	width:100%;
	left:0;
	top:15%;
}

#home h1{
	margin:0;
	margin-bottom: 10px;
	font-size: 72px;
	font-weight: 400;
	color:#39444C;
}

#home h2{
	margin:0;
	margin-bottom: 30px;
	font-size: 32px;
	font-weight: 400;
	color:#89949C;
}

#home .header-img{
	position: absolute;
	top: 35%;
	left: 50%;
	width:390px;
	margin-left:-195px;
	z-index: -1;
}

.scroll-down{
	margin-bottom: -60px;
	text-align: center;
}

.scroll-down a{
	display: inline-block;
	padding:10px 50px;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: .02em;
	color:#89949C;
	text-align: center;
	-webkit-transition:all .2s ease-out;
	transition:all .2s ease-out;
}

.scroll-down a:after{
	display: block;
	margin-top:-7px;
	content:"\f0d7";
	font-family: fontAwesome;
	font-size: 21px;
}

.scroll-down a:focus,
.scroll-down a:active{
	color:#89949C;
}

.scroll-down a:hover{
	padding-top: 11px;
	padding-bottom: 9px;
	color:#036cc3;
}
/*-----------------------
---- Services Styles ----
-------------------------*/

.service-item{
	margin:30px 0;
	padding:0 45px;
	text-align: center;
}

.service-item:nth-child(2){
	border-left: 1px solid #eee;
	border-right: 1px solid #eee;
}

.service-item .service-icon{
	display: block;
	margin:0 auto 30px;
	width:180px;
	height:180px;
	border:1px solid #ddd;
	color:#89949C;
	border-radius: 50%;
	overflow: hidden;
	-webkit-transition: all .2s ease-in;
	transition: all .2s ease-in;
}

.service-item .fa{
	font-size: 82px;
	line-height: 180px;
	-webkit-transition: all .3s ease-in;
	transition: all .3s ease-in;
}

.service-item:hover .service-icon{
	color:#036cc3;
	border-color:transparent;
}

.service-item h3{
	font-size: 21px;
	font-weight: 400;
	color:#39444C;
}

.btn-group{
	margin-bottom: 80px;
}

.btn-group .btn{
	padding:7px 60px;
	font-size: 16px;
	background: none;
	border-color:#b9c4cC;
	color:#858a95;
	-webkit-transition: all .2s ease-out;
	transition: all .2s ease-out;
}

.btn-group .btn:hover{
	color:#39444C;
}

.btn-group .btn.active{
	color:#036cc3;
	background:#fff;
	box-shadow: none;
}

.btn-group .btn:first-child{
	border-top-left-radius: 7px;
	border-bottom-left-radius: 7px;
}

.btn-group .btn:last-child{
	border-top-right-radius: 7px;
	border-bottom-right-radius: 7px;
}

.tab-content{
	opacity:1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition:all .3s ease-out;
	transition:all .3s ease-out;
}

.tab-content.fadeOut{
	opacity:0;
	-webkit-transform: translateY(30px);
	transform: translateY(30px);
	-webkit-transition:none;
	transition:none;
}

/*----------------------
---- Call to Action ----
------------------------*/

.cta{
	padding:120px 0;
	color:#fff;
	background-image: url(../images/polygon.png);
}

.cta p{
	margin-bottom: 50px;
	font-size: 32px;
	font-weight: 400;
}


/*---------------------
---- About Styles ----
-----------------------*/

#about{
	background:url(../images/about.jpg) no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

.profile-img{
	max-width:250px;
	margin:0 auto 0;
	border:15px solid #fff;
}

#about .profile{
	font-size: 18px;
	color:#79848C;
}

#about .profile h2{
	margin-top:30px;
	margin-bottom: 5px;
	color:#036cc3;
}

#about .profile h3{
	margin:0;
	font-size: 21px;
	color:#39444C;
}

.hover-wrapper{
	display: inline-block;
	position: relative;
}

.hover-wrapper .hover-text{
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	line-height: 250px;
	text-align: center;
	color:#fff;
	z-index:2;
	opacity:0;
	-webkit-transform:translateY(-20px);
	transform:translateY(-20px);
	-webkit-transition:all .2s ease-out;
	transition:all .2s ease-out;
}

.hover-wrapper:hover .hover-text{
	-webkit-transform:translateY(0);
	transform:translateY(0);
	opacity:1;
}

.hover-wrapper:after{
	position: absolute;
	display: block;
	content: "";
	width:100%;
	height:100%;
	background: #036cc3;
	top:0;
	border:15px solid #fff;
	border-radius: 50%;
	opacity:0;
	z-index:1;
	-webkit-transition: opacity .3s ease-out;
	transition: opacity .3s ease-out;
}

.hover-wrapper:hover:after{
	opacity:.8;
}

/*---------------------
---- Skills Styles ----
-----------------------*/
#skills{
	background-image: url('../images/bars-bg.png');
	background-repeat: no-repeat;
	background-position: bottom center;
}

.chart{
	position:relative;
	margin:30px 0;
}

.chart .percent{
	position: absolute;
	width:100%;
	font-size: 42px;
	color:#fff;
	text-align:center;
}

.chart .percent:after{
	content:"%";
	font-size: 70%;
}

.skills h2{
	margin: 0 0 20px;
	font-size: 21px;
	color: #69747C;
}

.skills .chart{
	display: inline-block;
	margin-bottom: 20px !important;
	height:200px;
}

.skills .plus-symbol:after,
.skills .equal-symbol:after{
	position: absolute;
	right:-95px;
	content: "+";
	font-size: 42px;
	font-weight: 100;
	color:#fff;
}

.skills .equal-symbol:after{
	content: "=";
}

/*---------------------
---- Twitter Styles ---
-----------------------*/

#twitter-feeds{
	padding:80px 0 100px;
	color:#fff;
	background-image: url(../images/polygon.png);
}

#twitter-feeds h1{
	margin:0 0 10px;
	font-size: 24px;
	letter-spacing: .02em;
}

#twitter-feeds .fa-twitter{
	font-size: 42px;
}

#twitter-feeds p{
	font-size:18px;
}

#twitter-feeds .tweet{
	margin-bottom: 40px;
	font-size: 24px;
	font-weight: 300;
}

#twitter-feeds .timePosted{
	margin-bottom: 0px;
}

#twitter-feeds a{
	color:#39444C;
	opacity:.7;
	-webkit-transition: opacity .15s ease-out;
	transition: opacity .15s ease-out;
}

#twitter-feeds a:hover{
	opacity:1;
}

#twitter-slider{
	margin:50px 0 0;
	padding:0;
	border:none;
	box-shadow:none;
	background:transparent;
}

/* Control Nav */
#twitter-slider .flex-control-nav {bottom: -90px;}
#twitter-slider .flex-control-nav li {margin: 0 4px;}
#twitter-slider .flex-control-paging li a {width:10px; height:10px; margin:2px 0;background: #fff;box-shadow:none; border: none; opacity: 1;}
#twitter-slider .flex-control-paging li a:hover { }
#twitter-slider .flex-control-paging li a.flex-active { width:14px; height:14px;background: transparent;border: 2px solid #fff;}

/*-----------------------
--- Portfolio Styles  ---
-------------------------*/

.btn-group .btn{
	position: relative;
}

.project-count{
	position: absolute;
	display: inline-block;
	top:-25px;
	left:50%;
	margin:5px 0 0 -13px;
	width:25px;
	height:25px;
	font-size: 14px;
	line-height: 23px;
	text-align: center;
	border-radius: 50%;
	color:#fff;
	background:#89949C;
	opacity:0;
	-webkit-transition: all .4s ease-out;
	transition: all .4s ease-out;
}

.btn-group .btn:hover .project-count{
	margin-top: -5px;
	opacity: 1;
}

.masonry-wrapper{
    overflow:hidden;
}

#projects-container {
	margin: 0 0 80px;
	background:#fff;
	-webkit-transition: none;
	transition: none;
}

#projects-container .project-item{
	display:block;
	position:relative;
	margin:0;
	padding:0 1px;
	margin-bottom: 2px;
	overflow:hidden;
	cursor: pointer;
	background:#fff;
}

#projects-container{
	-webkit-transform:scale(1) translateY(0);
	transform:scale(1) translateY(0);
	opacity:1;
	-webkit-transition:opacity .6s ease-out,-webkit-transform .3s ease-out;
	transition:opacity .6s ease-out,transform .3s ease-out;
}

#projects-container.anim-out{
	-webkit-transform:scale(.96) translateY(40px);
	transform:scale(.96) translateY(40px);
	opacity:0;
	-webkit-transition:opacity .4s ease-out,-webkit-transform .4s ease-out;
	transition:opacity .4s ease-out,transform .4s ease-out;
}

#projects-container .project-item .project-image{
	-webkit-transition: all .4s ease-out;
	transition: all .4s ease-out;
}

#projects-container .project-item:hover .project-image{
	opacity:.3;
}
/* 
.hover-title{
	position: absolute;
	top:10%;
	left:10%;
	width: 80%;
	height:80%;
	padding:20px 0;
	text-align: center;
	color:#fff;
	z-index: 2;
	opacity:0;
	-webkit-transform: translateY(20px);
	transform: translateY(20px);
	-webkit-transition: all .4s ease-out;
	transition: all .4s ease-out;
}

.project-item:hover .hover-title{
	opacity:1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition: all .4s ease-out;
	transition: all .4s ease-out;
}

.hover-title:before{
	position: absolute;
	display: block;
	content: "";
	width:100%;
	height:100%;
	top:0;
	left:0;
	background: #036cc3;
	opacity: .9;
	z-index: -1;
}

.hover-title h2{
	position: absolute;
	width:100%;
	bottom:50%;
	margin:0 0 10px;
	font-size: 21px;
	line-height:21px;
	color:#fff;
}

.hover-title h2:after{
	position: absolute;
	display: block;
	content: "";
	width:25px;
	height:2px;
	bottom:-13px;
	left:50%;
	margin-left:-12px;
	background: #fff;
}

.hover-title p{
	position: absolute;
	width:100%;
	top:50%;
	margin:10px 0 0;
	font-size: 16px;
	line-height:21px;
	font-style: italic;
} */

/*----------------------
---- Project Viewer ----
-----------------------*/

#project-viewer{
	background: url('../images/header-bg.png') no-repeat;
	background-attachment: fixed;
	background-size: 100%;
	background-size: cover;
}

#project-viewer .container{
	display: none;
}

#close-project-viewer{
	position: absolute;
	padding:0 20px;
	right:20px;
	top:20px;
	font-size: 98px;
	line-height: 78px;
	font-weight: 100;
	cursor: pointer;
	-webkit-transition: color .2s ease-out;
	transition: color .2s ease-out;
}

#close-project-viewer:hover{
	color: #036cc3;
}

#project-viewer-content {
	padding-top: 100px;
	z-index: 999;
}

#project-viewer-content .project-title{
	position: relative;
	margin-bottom: 70px;
	margin-top: 0;
	font-size: 52px;
	font-weight: 400;
	color: #39444C;
	text-align: center;
}

#project-viewer-content .project-title span{
	position: relative;
	top:-25px;
	left:5px;
	font-size:24px;
	font-weight: 400;
	color: #036cc3;
}

#project-viewer-content .project-title + .project-subtitle{
	margin:-70px 0 70px;
	font-size: 19px;
	text-align: center;
}

#project-viewer-content .project-media{
	margin-bottom: 70px;
}

#project-viewer-content .project-media.video-container{
	background: url(../images/video-loader.gif) center center no-repeat;
	background-color: #000;
}

.project-slider .flex-control-nav {bottom: -50px;}
.project-slider .flex-control-nav li {margin: 0 4px;}
.project-slider .flex-control-paging li a {width:10px; height:10px; margin:2px 0;background: #036cc3;box-shadow:none; border: none; opacity: 1;}
.project-slider .flex-control-paging li a:hover { }
.project-slider .flex-control-paging li a.flex-active { width:14px; height:14px;background: transparent;border: 2px solid #036cc3;}


#project-viewer-footer{
	position: relative;
	margin-top: 70px;
	padding: 0 0 70px;
	text-align: center;
}

#project-viewer-footer .project-nav{
	position: relative;
	padding: 30px 0;
	border-top:1px solid #c4c8cb;
	border-bottom:1px solid #c4c8cb;
}

#project-viewer-footer .project-nav span{
	padding:0 5px;
	font-size: 24px;
	cursor: pointer;
	-webkit-transition: color .15s ease-out;
	transition: color .15s ease-out;
}

#project-viewer-footer .project-nav span:hover{
	color:#036cc3;
}

#project-viewer-footer .project-nav .previous-project{
	position: absolute;
	left:50%;
	margin-left:-114px;
}

#project-viewer-footer .project-nav .next-project{
	position: absolute;
	left:50%;
	margin-left:80px;
}

/*---------------------
---- Testimonials  ----
-----------------------*/

#testimonials-slider{
	position: relative;
	margin-bottom: 30px;
}

#testimonials-slider.flexslider .slides img {width: auto;}

#testimonials-slider li{
	opacity: 0;
	-webkit-transition:opacity .3s ease-out;
	transition:opacity .3s ease-out;
}

#testimonials-slider li.flex-active-slide{
	opacity: 1;
	-webkit-transition:opacity .6s ease-out .6s;
	transition:opacity .6s ease-out .6s;
}

#testimonials .media-body,
#testimonials .media-left img{
	-webkit-transform: translateX(-50px);
	transform: translateX(-50px);
	-webkit-transition: -webkit-transform .6s ease-out 0s;
	transition: transform .6s ease-out 0s;
}

#testimonials .media-left + .media-body,
#testimonials .media-right img{
	-webkit-transform: translateX(50px);
	transform: translateX(50px);
	-webkit-transition: -webkit-transform .6s ease-out 0s;
	transition: transform .6s ease-out 0s;
}

#testimonials-slider li.flex-active-slide .media-body,
#testimonials-slider li.flex-active-slide .media-left + .media-body,
#testimonials-slider li.flex-active-slide .media-left img,
#testimonials-slider li.flex-active-slide .media-right img{
	-webkit-transform: translateX(0);
	transform: translateX(0);
	-webkit-transition: -webkit-transform .6s ease-out .4s;
	transition: transform .6s ease-out .4s;
}

.touch #testimonials .media-body,
.touch #testimonials .media-left img,
.touch #testimonials .media-left + .media-body,
.touch #testimonials .media-right img{
	-webkit-transform: translateX(0) !important;
	transform: translateX(0) !important;
}

.testimonial-controls{
	margin:-10px 0 20px;
	text-align: center;
}

.testimonial-controls span{
	display: inline-block;
	width:45px;
	height:45px;
	border:2px solid;
	border-radius:50%;
	font-size: 38px;
	line-height: 38px;
	text-align: left;
	margin:0 5px;
	cursor:pointer;
	-webkit-transition: color .2s ease-out;
	transition: color .2s ease-out;
}

.testimonial-controls .previous{
	padding-left:12px; 
}

.testimonial-controls .next{
	padding-left:15px; 
}

.testimonial-controls span:hover{
	color:#036cc3;
}

#testimonials .media{
	margin:0 0 100px;
	padding:10px 0;
}

#testimonials .media:last-child{
	margin-bottom: 0;
}

#testimonials .media-left img{
	margin-right:40px;
	max-width:180px;
}

#testimonials .media-right img{
	margin-left: 40px;
	max-width:180px;
}

#testimonials .media-body{
	position: relative;
	padding:30px 60px 40px;
	background: #fff;
	border:2px solid #e9ecf0;
	border-radius: 5px;
}

#testimonials .media-body:before{
	display: block;
	position: absolute;
	content:"";
	width:0;
	height:0;
	top:60px;
	right:-36px;
	border:14px solid transparent;
	border-left:20px solid #e9ecf0;
}

#testimonials .media-body:after{
	display: block;
	position: absolute;
	content:"";
	width:0;
	height:0;
	top:60px;
	right:-33px;
	border:14px solid transparent;
	border-left:20px solid #fff;
}

#testimonials .media-left + .media-body:before{
	display: block;
	position: absolute;
	content:"";
	width:0;
	height:0;
	top:60px;
	left:-36px;
	border:14px solid transparent;
	border-right:20px solid #e9ecf0;
}

#testimonials .media-left + .media-body:after{
	display: block;
	position: absolute;
	content:"";
	width:0;
	height:0;
	top:60px;
	left:-33px;
	border:14px solid transparent;
	border-right:20px solid #fff;
}

#testimonials .testimonial{
	font-size: 18px;
}

#testimonials .testimonial:before{
	margin-left: -13px;
	margin-right: 3px;
	font-size: 24px;
	content: "\201C";
}

#testimonials .testimonial:after{
	margin-left: 3px;
	font-size: 24px;
	content: "\201D";
}

#testimonials .client{
	margin-bottom: 0;
	font-style: italic;
	text-align:right;
}

.client-logo{
	margin:30px 0;
	opacity: .5;
	-webkit-transition: opacity .2s ease-out;
	transition: opacity .2s ease-out;
}

.client-logo:hover{
	opacity: 1;
}

/*-----------------------
---- Contact Styles  ----
-------------------------*/

#contact{
	position: relative;
	background: url(../images/map.jpg) center center no-repeat;
}

.color-overlay:before{
	position: absolute;
	display: block;
	content: "";
	width:100%;
	height:100%;
	top:0;
	left:0;
	background: #07141f;
	opacity:.9;
	z-index: 1;
}

#contact .container{
	position: relative;
	z-index: 2;
}

#contact .row{
	margin-top: 100px;
}

#contact p{
	font-size: 18px;
	margin-bottom: 30px;
}

#contact .lead{
	font-size: 21px;
	font-weight: 400;
}

#contact .mail-styled{
	display: inline-block;
	margin-bottom: 50px;
	padding: 0;
	font-size: 38px;
	font-weight: 400;
	color:#036cc3;
	border-bottom: 2px solid;
}

#contact .mail-styled:hover,
#contact .mail-styled:focus,
#contact .mail-styled:active{
	border-bottom-color: transparent;
	text-decoration: none;
}

#contact .social-links{
	margin:30px 0;
	font-size: 28px;
}

#contact .social-links .fa{
	-webkit-transition:color .15s ease-out;
	transition:color .15s ease-out;
}

#contact .social-links a:hover .fa{
	color:#036cc3 !important;
}

#contact-form .form-group{
	position: relative;
}

#contact-form .form-group label{
	position: absolute;
	top:10px;
	font-size:18px;
	line-height:24px;
	font-weight:400;
	color:#88949C;
	z-index: -1;
	-webkit-transition: all .25s ease-out;
	transition: all .25s ease-out;
}

#contact-form .form-control:focus + label{
	top:-20px;
	color:#fff;
}

#contact-form .form-control.input-filled + label{
	top:-20px;
}

#contact-form .form-control{
	padding:10px 0;
	margin-bottom: 40px;
	font-size: 18px;
	height:auto;
	background: none;
	border:none;
	border-radius: 0;
	border-bottom: 2px solid;
	box-shadow: none !important;
	-webkit-transition: border .55s ease-out;
	transition: border .55s ease-out;
}

#contact-form .form-control:focus{
	border-bottom: 2px solid #036cc3;
}

#contact-form textarea{
	max-width: 100%;
	min-width: 100%;
}

#contact-form .form-control::-webkit-input-placeholder { /* WebKit browsers */
    color:    #fff;
    opacity:.5;
}
#contact-form .form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #fff;
    opacity:.5;
}
#contact-form .form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #fff;
    opacity:.5;
}
#contact-form .form-control:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #fff;
    opacity:.5;
}

#contact-form .form-control:focus::-webkit-input-placeholder {
    opacity:1;
}

#contact-form .form-control:focus:-moz-placeholder {
    opacity:1;
}

#contact-form .form-control:focus::-moz-placeholder {
    opacity:1;
}

#contact-form .form-control:focus:-ms-placeholder {
    opacity:1;
}

#contact-form .btn,
#contact-form .btn:focus{
	float:right;
	margin-top: -30px;
	padding: 0;
	font-size: 21px;
	color:#fff;
	background: none !important;
	-webkit-transition: all .15s ease-out;
	transition: all .15s ease-out;
}

#contact-form .btn:hover,
#contact-form .btn:active{
	color:#036cc3;
}

#contact-form .form-group .error-message{
	margin-left:8px;
	color:#036cc3 !important;
}

#contact-form{
	position: relative;
}

#contact-form .contact-form-message{
	position: absolute;
	right:15px;
	top:100%;
	margin-top: 3px;
	font-size: 16px;
	opacity:.7;
}

#contact-form .contact-form-message .fa{
	margin-right: 5px;
}
/*----------------------
---- Footer Styles  ----
------------------------*/
#main-footer{
	padding:40px 0;
	background: #fff;
}


#main-footer a,
#main-footer a:hover,
#main-footer a:focus{
	color:#abb3ba;
	text-decoration: none;
	-webkit-transition:color .2s ease-out;
	transition:color .2s ease-out;
}

#main-footer a:hover{
	color:#036cc3;
}

#main-footer .footer-nav{
	padding: 0;
	margin:0;
	width: 100%;
	text-align: center;
	list-style: none;
}

#main-footer .footer-nav li{
	display: inline-block;
	margin:0 15px;
}

#main-footer a{
	padding:10px;
	font-size: 18px;
	font-weight:900;
	line-height:37px;
	letter-spacing: .07em;
	text-transform: uppercase;
}

#main-footer .social-links a{
	padding:10px 3px;
}

#main-footer .logo-link{
	padding: 0;
}

/*------------------------
---Scrolling animations---
-------------------------*/

.scrollimation.fade-in{
	opacity:0;
	-webkit-transition:opacity 1.2s ease-out;
	transition:opacity 1.2s ease-out;
}

.scrollimation.fade-in.in{
	opacity:1;
}

.scrollimation.scale-in{
	opacity:0;
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform:scale(0.5);
	-webkit-transition: -webkit-transform .6s cubic-bezier(.17,.89,.67,1.57), opacity .6s ease-out;
	transition: transform .6s cubic-bezier(.17,.89,.67,1.57), opacity .6s ease-out;
}

.scrollimation.scale-in.in{
	opacity:1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform:scale(1);
}

.scrollimation.fade-right{
	opacity:0;
	-webkit-transform: translateX(-60px);
	-moz-transform: translateX(-60px);
	-ms-transform: translateX(-60px);
	transform:translateX(-60px);
	-webkit-transition: -webkit-transform 1.2s ease-out,opacity 1.2s ease-out;
	transition: transform 1.2s ease-out,opacity 1.2s ease-out;
}

.scrollimation.fade-right.in{
	opacity:1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform:translateX(0px);
}

.scrollimation.fade-left{
	opacity:0;
	-webkit-transform: translateX(60px);
	-moz-transform: translateX(60px);
	-ms-transform: translateX(60px);
	transform:translateX(60px);
	-webkit-transition: -webkit-transform 1.2s ease-out,opacity 1.2s ease-out;
	transition: transform 1.2s ease-out,opacity 1.2s ease-out;
}

.scrollimation.fade-left.in{
	opacity:1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform:translateX(0px);
}

.scrollimation.fade-up{
	opacity:0;
	-webkit-transform: translateY(60px);
	-moz-transform: translateY(60px);
	-ms-transform: translateY(60px);
	transform:translateY(60px);
	-webkit-transition: -webkit-transform 1.2s ease-out,opacity 1.2s ease-in;
	transition: transform 1.2s ease-out,opacity 1.2s ease-in-out;
}

.scrollimation.fade-up.in{
	opacity:1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform:translateY(0px);
}

.scrollimation.fade-down{
	opacity:0;
	-webkit-transform: translateY(-60px);
	-moz-transform: translateY(-60px);
	-ms-transform: translateY(-60px);
	transform:translateY(-60px);
	-webkit-transition: -webkit-transform 1.2s ease-out,opacity 1.2s ease-in;
	transition: transform 1.2s ease-out,opacity 1.2s ease-in-out;
}

.scrollimation.fade-down.in{
	opacity:1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform:translateY(0px);
}

.scrollimation.d1{
	transition-delay:.3s;
}

.scrollimation.d2{
	transition-delay:.6s;
}

.scrollimation.d3{
	transition-delay:.9s;
}

.scrollimation.d4{
	transition-delay:1.2s;
}

.touch .scrollimation.fade-in{
	opacity:1;
}

.touch .scrollimation.scale-in{
	opacity:1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform:scale(1);
}

.touch .scrollimation.fade-right{
	opacity:1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform:translateX(0px);
}

.touch .scrollimation.fade-left{
	opacity:1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform:translateX(0px);
}

.touch .scrollimation.fade-up{
	opacity:1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform:translateY(0px);
}

.touch .scrollimation.fade-down{
	opacity:1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform:translateY(0px);
}
/*----------------------
---- Media Queries  ----
------------------------*/

@media (min-width:1500px){
	.container{
		width:1500px;
	}
	
	#project-viewer .container{
		width:1170px;
	}
	
}

@media (max-width:1499px){
	
	#home{
		min-height:810px;
		margin-bottom:-64px;
	}

	#home .container{
		padding-top: 100px;
		min-height:810px;
	}

	#home .row{
		top:12%;
	}
	
	.skills .plus-symbol:after,
	.skills .equal-symbol:after{
		right:-60px;
	}
}

@media (max-width:1199px){
	
	.push-down{
		margin-top:60px;
	}
			
	#home{
		min-height:768px;
		margin-bottom:-64px;
	}

	#home .container{
		padding-top: 100px;
		min-height:768px;
	}

	#home .row{
		top:15%;
	}

	.service-item{
		padding:0 15px;
	}
	.skills .plus-symbol:after,
	.skills .equal-symbol:after{
		right:-32px;
	}
}

@media (max-width:991px){
		
	.push-down{
		margin-top:0;
	}
		
	#home{
		min-height:810px;
		margin-bottom:-64px;
	}

	#home .container{
		padding-top: 100px;
		min-height:810px;
	}
			
	#home .row{
		top:20%;
	}
	
	#home .header-img{
		top: 40%;
	}

	.service-item .service-icon{
		width:150px;
		height:150px;
	}

	.service-item .fa{
		font-size: 62px;
		line-height: 150px;
		-webkit-transition: all .3s ease-in;
		transition: all .3s ease-in;
	}

	.skills .plus-symbol:after,
	.skills .equal-symbol:after{
		display: none;
	}
	
	#contact .mail-styled{
		font-size: 28px;
	}

	#main-footer .footer-nav li{
		margin:0 5px;
	}

	#main-footer a{
		padding:5px;
		font-size: 17px;
	}

}

@media (max-width:767px){
	
	.big-padding{
		padding:80px 0;
	}
	
	.push-down{
		margin-bottom:60px;
		text-align: center;
	}
	
	.section-title{
		margin-bottom: 30px;
		font-size: 38px;
	}

	.section-title span{
		top:-15px;
		font-size:28px;
	}

	.section-title + .subtitle{
		margin:-30px 0 40px;
		font-size: 18px;
	}

	.row-title{
		font-size: 24px;
	}
	
	.lead{
		margin-bottom: 30px;
		font-size: 24px;
	}
	
	.btn-dc{
		padding:8px 40px;
		font-size:18px;
	}
	
	.btn-dc:hover{
		padding-right:50px;
	}
	
	.btn-dc:after{
		margin-left:5px;
	}
	
	.btn-dc:hover:after{
		margin-left:15px;
	}
	
	.icon-bar{
		background: #39444C;
	}
	
	#main-nav .container, #main-nav.scrolled .container{
		padding-top:5px;
		padding-bottom:5px;
	}

	#main-nav, #main-nav.scrolled{
		background: #fff;
		border-bottom:1px solid #b9c4cC;
	}
	
	.navbar > .container .navbar-brand{
		padding: 5px 0 5px 15px;
	}
	
	#main-nav .navbar-brand:after{
		display: none !important;
	}
	
	#site-nav a{
		padding:10px 30px;
		font-size: 18px;
	}

	#site-nav .active a,
	#site-nav a:hover,
	#site-nav a:focus{
		padding:10px 30px;
		color:#036cc3 !important;
		background: none;
	}
	
	#site-nav a .fa{
		display: none;
	}
	
	#home{
		min-height:650px;
		margin-bottom:0;
		max-height: 500px;
	}

	#home .container{
		min-height: 480px;
	}
			
	#home .row{
		top:80px;
	}
	
	#home h1{
		font-size: 42px;
	}

	#home h2{
		font-size: 21px;
	}
	
	#home .header-img{
		width: 290px;
		margin-left: -145px;
		top: 26%;
	}
	
	.btn-group{
		margin-bottom: 40px;
	}
	
	.btn-group .btn{
		padding:7px 30px;
	}

	#filter-works{
		margin-bottom: 60px;
	}
	
	#filter-works .btn{
		float:none;
		margin:2px 0;
		border-radius: 0 !important;
	}
	
	#filter-works .project-count{
		display: none;
	}
	
	.cta{
		padding:80px 0;
	}
	
	.cta p{
		margin-bottom: 40px;
		font-size: 24px;
	}
	
	.service-item{
		margin-bottom: 50px;
	}
	
	#skills{
		background-image: none;
	}
	
	#twitter-feeds .tweet{
		font-size: 21px;
	}
	
	.project-item{
		max-width:360px;
		margin: 2px auto !important;
	}
	
	#project-viewer-content {
		padding-top: 80px;
	}
	
	#close-project-viewer{
		padding:0 10px;
		right:50%;
		margin-right: -38px;
		top:15px;
		font-size: 76px;
		line-height: 58px;
	}

	#project-viewer-content .project-title{
		margin-bottom: 40px;
		font-size: 32px;
	}

	#project-viewer-content .project-title span{
		font-size:18px;
		top:-12px;
	}

	#project-viewer-content .project-title + .project-subtitle{
		margin:-40px 0 40px;
	}

	.client-logo{
		width:100%;
		max-width: 260px;
		margin: 40px auto !important;
	}
	
	#testimonials .media-left,
	#testimonials .media-right{
		display: none;
	}

	#testimonials .media-body:after,
	#testimonials .media-body:before{
		display: none !important;
	}
	
	#testimonials .media-body{
		padding:15px 30px;
		border-width: 1px;
	}
	
	#testimonials .testimonial{
		font-size: 16px;
	}
	
	#testimonials .media{
		margin-bottom: 40px;
	}
	
	#contact-form .contact-form-message{
		margin-top: 40px;
	}
	
	#main-footer{
		padding:30px 0 20px;
	}
	
	#main-footer .social-links{
		margin-top: 20px;
		text-align: center;
	}
	
	#main-footer .logo-link img{
		margin:0 auto 15px;
	}
	
}

.service-icon > img {
	top: 50px;
    position: relative;
}
@media (max-width: 991px) {
	.service-icon > img {
		top: 40px;
		position: relative;
	}
}