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

html,body{
	/*height:100%;*/
	max-width: 100%;
	overflow-x: hidden;
}

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: #202C36;
}

#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: #202C36;
	-webkit-transition:color .15s ease-out;
	transition:color .15s ease-out;
}

.logo-box{
	font-family: "Megrim", sans-serif;
	font-size: 40px;
	margin-top: 15px;
}

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

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

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

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

.section-title{
	margin-bottom: 20px;
	margin-top: 0;
	font-size: 62px;
	font-weight: 400;
	color: #202C36;
	text-align: center;
}

.section-sub-title {
	margin-bottom: 50px;
}

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

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

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

.row-title{
	color:#202C36;
	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:#202C36 !important;
}

.bg-main-color{
	background:black;
	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:"\f060";*/
	/*font-family: fontAwesome;*/
	/*opacity:0;*/
	/*-webkit-transition:all .2s ease-out .0s;*/
	/*transition:all .2s ease-out .0s;*/
/*}*/

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

.hvr-shadow {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: box-shadow;
	transition-property: box-shadow;
}
.hvr-shadow:hover, .hvr-shadow:focus, .hvr-shadow:active {
	box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}

/*.btn-dc.btn-small:hover{*/
	/*padding-right:50px;*/
	/*display: inline-block;*/
	/*vertical-align: middle;*/
	/*-webkit-transform: perspective(1px) translateZ(0);*/
	/*transform: perspective(1px) translateZ(0);*/
	/*box-shadow: 0 0 1px transparent;*/
	/*-webkit-transition-duration: 0.3s;*/
	/*transition-duration: 0.3s;*/
	/*-webkit-transition-property: box-shadow;*/
	/*transition-property: box-shadow;*/
/*}*/

/*.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: #202C36;
}

/*-----------------------
---- 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;
}

/*------------------
---- 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-bottom:5px;
}

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

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

.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: 100;
	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:#202C36 !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/Mountain.jpg') 0 0 / cover;;
	/*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: 200px;
	margin-bottom: 10px;
	font-size: 72px;
	font-weight: 400;
	color:#202C36;
}

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

#home .header-img{
	position: absolute;
	bottom: 0;
	left:50%;
	width:900px;
	margin-left:-450px;
	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:#202C36;
}

.portfolio-name {
	font-family: 'Megrim', sans-serif;
	text-transform: uppercase;
}
/*-----------------------
---- Skills 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;
}

.dev-icon {
	font-size: 100px;
}

.dev-icon-list {
	font-size: 50px;
}

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

.service-item:hover .fa{
	font-size: 112px;
	-webkit-transform:rotate(-15deg);
	transform:rotate(-30deg);
}

.service-item:hover .service-icon{
	color:#202C36;
	border-color:transparent;
}

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

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

.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:#202C36;
}

.btn-group .btn.active{
	color:#202C36;
	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;
}


/*iPhone Skills*/
#iphone {
	background-image: url('../images/iphone7.png');
	width: 350px;
	height: 700px;
	margin: 0 auto;
}

#screen {
	width: 306px;
    height: 541px;
	background: url('../images/NSCONF.PNG') center;
    position: relative;
    top: 79px;
    left: 23px;
    overflow: hidden;
}
#iphone ul {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: auto;
	position: relative;
	height: 414px;
	top : 0;
	z-index: 3;
}
#iphone ul.noscroll { overflow: hidden; }
#iphone ul:first-child { height: 464px; }
#iphone ul:first-child > li { height: 464px; }
#iphone ul:first-child > li > a.title { text-align: center; }
#iphone ul:first-child > li > a span { margin: 0; }
#iphone ul > li {
	overflow: hidden;
	height: 50px;
	width: 100%;
	border-bottom: 1px solid #EEE;
	line-height: 50px;
	box-sizing: border-box;
}
#iphone ul > li > a {
	display: block;
	padding: 0 10px;
	box-sizing: border-box;
	text-decoration: none;
	color: black;
	z-index: 20;
	position: relative;
	background: #FFF;
	-webkit-transition: all .5s linear;
	cursor: pointer;
}
#iphone ul > li > a:active { background: #EEE; }
#iphone ul > li > a > span { margin-left: 40px; }

#iphone ul > li > a i.arrows {
	position: absolute;
	right: 10px;
	opacity: .2;
	font-size: 30px;
	top: 10px;
	-webkit-transition: -webkit-transform .5s linear;
}
#iphone ul > li > a.title i.arrows {
	-webkit-transform: rotate(90deg);
	opacity: .7
}
#iphone .title {
	color: #FFF;
}
#iphone .title.color1 {
	background: #EEE;
	color: #202C36;
}
#iphone .title.color2 {
	background: #202C36;
}
#iphone .title.color3 {
	background: #202C36;
}


#iphone .phone-icons {
	font-size: 40px;
}

#iphone .phone-icons-express {
	width: 40px;
}

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

.cta{
	padding: 75px 0px 75px 0px;
	color:#FFF;
}

.experience-education p{
	/*margin-bottom: 100px;*/
	font-size: 40px;
	font-weight: 600;
}

.experience-education h2 {
	color: #FFFFFF;
}

.experience-education h3 {
	color: #FFFFFF;
}


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

#about{
	/*background-size: cover;*/
	background-attachment: fixed;
}

.profile-img{
	max-width:250px;
	margin:0 auto 0;
}

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

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

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

.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: #202C36;
	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 ----
-----------------------*/
.subheader {
	border: 3px solid #202C36;
}

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



/* 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: 15px;
	margin-right: 15px;
	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: #202C36;
	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-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: #202C36;
}

#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: #202C36;
	text-align: center;
}

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

#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-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: #202C36;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 #202C36;}


#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:#202C36;
}

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


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

#contact{
	position: relative;
	background: black;
}

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

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

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

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

#contact .mail-styled{
	display: inline-block;
	margin-bottom: 50px;
	padding: 0;
	font-size: 38px;
	font-weight: 400;
	color:#202C36;
	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: 40px;
}

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

#contact .social-links a:hover .fa{
	color:#202C36 !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 .25s ease-out;
	transition: border .25s ease-out;
}

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

#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 .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:#202C36;
}

#contact-form .form-group .error-message{
	margin-left:8px;
	color:#202C36;
}

#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:#202C36;
}

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

.footer-logo {
	height: 43px;
	fill: #ABB3BA;
}

#Symbol {
	fill: #ABB3BA;

}

/*------------------------
---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);
}
.skills{
	font-size: 65px;
}
.skills-title{
	font-size: 20px;
}
.skills-row{
	padding-top: 10px;
}
/*----------------------
---- 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%;
	}

	#home .header-img{
		width:800px;
		margin-left:-400px;
	}

	.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{
		width:760px;
		margin-left:-380px;
	}

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

	.service-item:hover .fa{
		font-size: 92px;
		-webkit-transform:rotate(-15deg);
		transform:rotate(-30deg);
	}

	.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){
	.skills-text{
		display: none;
	}

	.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: #202C36;
	}

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

	#main-nav, #main-nav.scrolled{
		background: #FFF;
		padding-top: 10px;
		padding-right: 10px;
		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:#202C36 !important;
		background: none;
	}

	#site-nav a .fa{
		display: none;
	}

	#home{
		min-height:480px;
		margin-bottom:0;
	}

	#home .container{
		min-height:480px;
	}

	#home .row{
		top:80px;
	}

	#home h1{
		font-size: 40px;
		display: -webkit-box;
		margin-left: 109px;
	}

	#home h2{
		font-size: 21px;
	}

	#home .header-img{
		width:100%;
		left:0;
		margin-left:0;
	}

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

	#the-rave .tweet{
		font-size: 21px;
	}

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

}






.con img {
    height: 100%;
    position: absolute;
}

.coverImage {
    position: absolute;
    background-size: auto 100%;
    width: 50%;
    height: 100%;
}

.coverImage2 {
    position: absolute;
    background-size: auto 100%;
    width: 50%;
    height: 100%;
}

.handle, .handle2 {
    width: 0px;
    height: 100%;
    border-left: 12px solid #202C36;
    position: absolute;
    left: 50%;
    cursor: move;
}

.handle:after, .handle2:after {
    content: "◀︎ ▶︎";
    display: block;
    width: 60px;
    height: 60px;
    border: 2px solid #202C36;
    border-radius: 50%;
    color: #202C36;
    line-height: 60px;
    font-weight: 600;
    text-align: center;
    background: #EEE;
    position: absolute;
    left: -36px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.logo-img {
	width: 50px;
}

/* Project Cards */
.widget {
  width: 100%;
  max-width: 350px;
  height: 450px !important;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: #FFF;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  -webkit-box-shadow: 0px 7px 30px 0px rgba(50, 50, 50, 0.32);
  -moz-box-shadow: 0px 7px 30px 0px rgba(50, 50, 50, 0.32);
  box-shadow: 0px 7px 30px 0px rgba(50, 50, 50, 0.32);
  -webkit-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  margin-right: 15px;
  margin-bottom: 15px;
}

.widget-photo1 {
  width: 100%;
  height: 335px;
  -webkit-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.widget-photo1:after {
  -webkit-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 10;
}

.widget-photo2 {
  width: 100%;
  height: 335px;
  -webkit-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.widget-photo2:after {
  -webkit-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 10;
}

.widget-photo3 {
  width: 100%;
  height: 335px;
  -webkit-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.widget-photo3:after {
  -webkit-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 10;
}


.widget-photo4 {
  width: 100%;
  height: 335px;
  -webkit-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.widget-photo4:after {
  -webkit-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 10;
}

.widget-details {
  padding: 20px;
  position: relative;
}

.widget-headline {
  font-family: "McClatchy Slab", Georgia, sans-serif;
  font-size: 22px;
  color: #202C36;
  font-weight: 600;
  width: 100%;
  display: block;
  /* Fallback for non-webkit */
  display: -webkit-box;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 35px;
  /* Fallback for non-webkit */
}

.widget-highlights span {
  color: rgba(0, 0, 0, 0.7);
  font-size: 16px;
  display: none;
  width: 100%;
  margin-bottom: 4px;
  border-bottom: 2px dotted #CCC;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.widget-highlights span:first-of-type {
  margin-top: 15px;
}
.widget-highlights span:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.widget-overlay {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.widget-button {
  cursor: pointer;
  -webkit-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: absolute;
  margin: 0 auto;
  padding: 10px 0;
  width: 70%;
  background-color: #202C36;
  border-radius: 4px;
  color: #FFF;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  font-size: 14px;
  left: 0;
  right: 0;
  top: -40px;
}

.widget-button a {
  color: #FFF;
}

.widget:hover .widget-button {
  top: 110px;
  font-family: "McClatchy Sans Cond", "Roboto Condensed", sans-serif;
  text-transform: uppercase;
  z-index: 10;
}


.widget:hover .widget-photo1 {
  height: 50px;
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3);
}

.widget:hover .widget-photo2 {
  height: 50px;
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3);
}

.widget:hover .widget-photo3 {
  height: 50px;
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3);
}

.widget:hover .widget-photo4 {
  height: 50px;
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3);
}

.widget:hover .widget-headline {
  -webkit-line-clamp: 3;
  height: 99px;
  /* Fallback for non-webkit */
}
.widget:hover .widget-overlay {
  visibility: visible;
  opacity: 1;
}
.widget:hover .widget-highlights span {
  display: block;
}

.project-dev-icon {
	font-size: 45px;
}