/*
    Template Name: Nipp - personal portfolio template
    Author: 
    Author URI: 
    Description: A personal portfolio landing page template
    Version: 1.0
*/


/* Table of Content
==================================================
1.  Global Styles
2.  Typography
3.  Common styles
4.  Navigation
5.  Header area
6.  Section about
7.  Section service
8.  Section portfolio
9.  Section blog
10. Section testimonial
11. Section contact
12. Section footer


*/


/* 1 - Google Font
------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,600,700|Roboto+Condensed:300,400,700');

@import url('https://fonts.googleapis.com/css?family=Ubuntu');

@font-face {
	font-family: 'ElegantIcons';
	src: url('fonts/ElegantIcons.html');
	src: url('fonts/ElegantIconsd41d.html?#iefix') format('embedded-opentype'), 
		url('fonts/ElegantIcons-2.html') format('woff'), 
		url('fonts/ElegantIcons-3.html') format('truetype'), 
		url('fonts/ElegantIcons-4.html#ElegantIcons') format('svg');
	font-weight: normal;
	font-style: normal;
}


/* 2 - General styles
------------------------------------------------------------------------*/


/* input palceholder text style*/

:-moz-placeholder {
	color: #FFF;
	letter-spacing: 2px;
	font-size: 12px;
	text-transform: uppercase;
}

::-moz-placeholder {
	/* Firefox 19+ */
	color: #FFF;
	letter-spacing: 2px;
	font-size: 12px;
	text-transform: uppercase;
}

:-ms-input-placeholder {
	color: #FFF;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

::-webkit-input-placeholder {
	color: #FFF;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

body {
	width: 100%;
	height: 100%;
	line-height: 24px;
	color: #000030;
	font-size: 13px;
	font-family: 'Raleway', sans-serif;
	font-weight: normal;
	letter-spacing: 1px;
}

html {
	width: 100%;
	height: 100%;
}

.no-padding {
	padding: 0;
}

a,
a:focus,
a:active,
a:link,
img {
	outline: none;
}

a {
	color: #555;
	-webkit-transition: color .2s ease;
	-moz-transition: color .2s ease;
	-ms-transition: color .2s ease;
	-o-transition: color .2s ease;
	transition: color .2s ease;
}

a {
	cursor: pointer;
	text-decoration: none;
	color: #cccccc;
	transition: all 0.25s ease 0s;
	-moz-transition: all 0.25s ease 0s;
	-webkit-transition: all 0.25s ease 0s;
	-o-transition: all 0.25s ease 0s;
}

a:hover {
	color: #cccccc;
	text-decoration: none;
	transition: all 0.25s ease 0s;
	-moz-transition: all 0.25s ease 0s;
	-webkit-transition: all 0.25s ease 0s;
	-o-transition: all 0.25s ease 0s;
}

a:focus {
	outline: none;
	outline-offset: 0;
}

a:link,
a:visited {
	text-decoration: none;
}

p {
	line-height: 26px;
	font-size: 14px;
	font-weight: 400;
	color: #000030;
}

img {
	height: auto;
	max-width: 100%;
	border: none;
	outline: none;
	transition: all 0.2s ease 0s;
	-moz-transition: all 0.2s ease 0s;
	-webkit-transition: all 0.2s ease 0s;
	-o-transition: all 0.2s ease 0s;
}

iframe,
audio {
	width: 100%;
	height: auto;
	border: none;
}

ul,
li {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}



/* 2.1 - Headings 
--------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #000030;
	font-family: "Raleway", sans-serif;
	font-weight: 700;
	margin-top: 0px;
	margin-bottom: 10px;
	color: #000030;
	text-transform: uppercase;
}

h1 {
	font-size: 43px;
	letter-spacing: 2px;
	line-height: 40px;
}

h2 {
	font-size: 27px;
	line-height: 37px;
	margin-bottom: 20px;
	padding-top: 10px;
}

h3 {
	font-size: 21px;
	line-height: 32px;
}

h4 {
	font-size: 17px;
	line-height: 28px;
	font-weight: 700;
}

h5 {
	font-size: 15px;
	line-height: 23px;
	font-weight: 600;
}

h6 {
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
}


/* buttons style */

.btn {
	padding: 14px 40px;
	font-size: 13px;
	font-weight: 700;
	border-radius: 25px;
	text-transform: uppercase;
}

.btn-primary {
	border: 2px solid transparent;
	border-color: #FF7E60;
	background: #FF7E60;
	color: #fff;
	-webkit-transition: all .3s ease 0s;
	-o-transition: all .3s ease 0s;
	transition: all .3s ease 0s;
}

.btn-primary:hover {
	background: #fff;
	border: 2px solid #777777;
	color: #2A2A2A;
}

.btn-black {
	background: #fff;
	border: 2px solid #2A2A2A;
	color: #2A2A2A;
	-webkit-transition: all .3s ease 0s;
	-o-transition: all .3s ease 0s;
	transition: all .3s ease 0s;
}

.comment-style {
	border: 1px solid #777;
	border-radius: 5px;
}

.btn-black:hover {
	border-color: #777;
	background: #000030;
	color: #fff;
}

.btn-grey {
	border-color: #eee;
	background: #FAFAFA;
	color: #2A2A2A;
	padding: 12px 40px;
	margin-top: 20px;
	-webkit-transition: all .3s ease 0s;
	-o-transition: all .3s ease 0s;
	transition: all .3s ease 0s;
}

.btn-grey:hover {
	background: #2A2A2A;
	color: #fff;
	border-color: #2A2A2A;
}

.btn-feature {
	background: #2A2A2A;
	border: 1px solid#2A2A2A;
	color: #fff;
	-webkit-transition: all .3s ease 0s;
	-o-transition: all .3s ease 0s;
	transition: all .3s ease 0s;
}

.btn-feature:hover {
	background: #fff;
	color: #2A2A2A;
	border-color: #999;
}



/*==================== section heading ========================*/

.section-heading {
	margin-bottom: 70px;
}

.mid-title {
	font-size: 40px;
}

.subtitle {
	font-size: 26px;
	text-transform: uppercase;
	line-height: 36px;
	font-weight: 400;
}

.section-padding {
	padding-bottom: 80px;
}

.parallx-overlay {
	position: absolute;
	content: "";
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	height: 100%;
}

.parallx-overlay.black {
	position: absolute;
	background: rgba(0, 0, 0, 0.95);
}

.parallx-overlay.grey {
	position: absolute;
	background: rgba(255, 255, 255, 0.95);
	background: rgba(0, 0, 0, 0.85);
}

.section-padding {
	padding: 90px 0px;

}


/*======================================================
     navigation 
==========================================================*/

.navbar-custom {
	margin-bottom: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .3);
	text-transform: uppercase;
	font-family: "Roboto Condensed", sans-serif;
}

.navbar-custom .navbar-brand {
	font-weight: 700;
}

.navbar-custom .navbar-brand:focus {
	outline: 0;
}

.navbar-custom .navbar-brand .navbar-toggle {
	padding: 4px 6px;
	font-size: 16px;
	color: #fff;
}

.navbar-custom .navbar-brand .navbar-toggle:focus,
.navbar-custom .navbar-brand .navbar-toggle:active {
	outline: 0;
}

.navbar-custom a {
	color: #fff;
	font-size: 13px;
	letter-spacing: 3px;
}

.navbar-custom .nav li a {
	-webkit-transition: background .3s ease-in-out;
	-moz-transition: background .3s ease-in-out;
	transition: background .3s ease-in-out;
}

.navbar-custom .nav li a:hover {
	outline: 0;
	color: rgba(255, 255, 255, .8);
	background-color: transparent;
}

.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:active {
	outline: 0;
	background-color: transparent;
}

.navbar-custom .nav li.active {
	outline: 0;
}

@media(min-width:768px) {
	.navbar-custom {
		padding: 20px 0;
		border-bottom: 0;
		letter-spacing: 1px;
		background: 0 0;
		-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
		-moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
		transition: background .5s ease-in-out, padding .5s ease-in-out;
	}
	.navbar-custom.top-nav-collapse {
		-webkit-box-shadow: 0px 0px 2px #777;
		box-shadow: 0px 0px 2px #777;
		background: #111 none repeat scroll 0 0;
		box-shadow: -5px 10px 12px -10px rgba(201, 201, 201, 0.67);

	}
	.navbar-custom.top-nav-collapse .nav li a {
		color: #777777;
		font-weight: bold;

	}
	.navbar-custom.top-nav-collapse .nav li.active a {
		background-color: transparent;
		color: #cccccc!important;

	}
	.navbar-custom.top-nav-collapse .navbar-brand {
		color: #fff;
	}
}


/*============================================
    SLIDER SECTION
===============================================*/

#section-intro {
	height: 100%;
	background: #222 url("../images/bg/banner.jpg") no-repeat fixed 50% 50% / cover;
	padding: 0px;
	position: relative;
	overflow: hidden;
}

.intro-caption {
	width: 100%;
	text-align: center;
	position: absolute;
	color: #fff;
	padding-top: 250px;
}

.intro-caption h1 {
	font-size: 60px;
	color: #fff;
	line-height: 50px;
	margin: 30px 0px;
	text-transform: inherit;
}

.intro-caption .subtitle {
	letter-spacing: 5px;
	margin-bottom: 20px;
}

.intro-caption .btn-container {
	margin-top: 40px;
}


/*================================================================
        section about
===============================================================*/

.about-wrap {}

.about-wrap h4 {
	text-transform: capitalize;
	font-family: "Raleway", sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 34px;
	margin: 20px 0px 40px;
	width: 80%;
}

.about-wrap h4 span {
	font-weight: 700;
}

.about-wrap a {
	margin-top: 40px;
}


/*======================================================
    section service
============================================================*/

#section-services {
	background: #f9f9f9;
}

.section-heading {
	text-align: center;
}

.service-box {
	border-bottom: 5px solid transparent;
	background-color: #fff;
	padding: 25px 30px;
	
}

.service-box i {
	font-size: 50px;
	text-align: center;
	height: 80px;
	padding-top: 10px;
	-webkit-transition: all .3s ease 0s;
	-o-transition: all .3s ease 0s;
	transition: all .3s ease 0s;
}

.service-box:hover i {
	color: #cccccc;
	padding: 0px;
}


.service-box h4 {
	margin: 20px 0px;
}


/*============================================
   SECTION PORTFOLIO 
===============================================*/


.work {
    background: #fff;
}

.work-inner {
	margin-top: 60px;
}

.work-inner .mix {
   padding: 0;
}

ul.work {
    padding: 0;
    list-style: none;
    margin-left: 8px;
    text-align: center;
}

ul.work li {
   border: 1px solid #ccc;
color: #777;
cursor: pointer;
display: inline-block;
font-size: 13px;
font-weight: bold;
padding: 6px 25px;
text-transform: uppercase;
}

ul.work li.active {
    border: none;
    color: #000;
}

.work .item {
    position: relative;
}

.work .item img {
    width: 100%;
    z-index: 99999;
}

.portfolio-caption {
    color: #333333;
}

.portfolio-caption {
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    height: 100%;
    width: 100%;
    /*background: rgba(255, 255, 255, .8);*/
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

.portfolio-caption h4 {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 900;
    color: #fff;
    -webkit-transition: .3s;
    transition: .3s;
    border: 1px solid #fff;
    padding: 10px 10px;
    display: inline-block;
}

.work .item:hover .portfolio-caption {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -webkit-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

.work .item:hover .portfolio-caption h4 {
    margin-top: 150px;
    -webkit-transition: .3s;
    transition: .3s;
}

/*====================================================
    section blog
==========================================================*/

#section-blog {
	padding-bottom: 90px;
	background: #f9f9f9;
}

.feature-heading {
	padding: 0 0 40px 0;
}

.feature-wrap h4{
	margin: 20px 0 5px;
}

.blog-info {
  color: #777;
  letter-spacing: 2px;
  font-size: 14px;
}

.one-blog p{
	margin-top: 15px;
}




/*====================================================
   SECTION SINGLE BLOG POST
==========================================================*/

#single-post {
	padding: 90px  0;
}

#single-section-intro {
	height: 50%;
	background: #222 url("../images/about/banner.png") no-repeat fixed 50% 50% / cover;
	padding: 0px;
	position: relative;
	overflow: hidden;
}

.single-intro-caption {
	width: 100%;
	text-align: center;
	position: absolute;
	color: #fff;
	padding-top: 100px;
}

.single-post-area h4 {
  margin: 0px 0 5px;
}

.blog-image img {
  margin: 30px 0;
}

.media-object {
  border-radius: 70px;
}

.single-intro-caption h4 {
	font-size: 30px;
	color: #fff;
	line-height: 50px;
	margin: 65px 0px;
	text-transform: inherit;
}
.widget {
	border: 1px solid #f0f0f0;
	margin-top: 30px;
	padding: 30px;
}

.widget-title {
	text-align: center;
}

.socials {
	text-align: center;
}

.socials a {
	padding: 10px;
	color: #777;
}

.about-widget {
	text-align: center;
}

.widget > h4 {
  background: #777 none repeat scroll 0 0;
  color: #fff;
  margin-bottom: 0;
  padding: 7px;
  text-align: center;
}

.about-widget  h4 {
	margin-top: 30px;
}

.instagram img {
	margin-right: -5px;
	width: 33.3%;
}

.signup p{
	text-align: center; 
}

#comments {
	padding: 60px;
}

.comment-form{
	padding: 60px 0;
}


.signup form input {
  background: #f6f6f6 none repeat scroll 0 0;
  border: 1px solid #ccc;
  color: #9f9f9f;
 /* font-size: 12px;*/
  margin-bottom: 10px;
  padding: 12px 16px;
  width: 100%;
}

.signup form button {
  background: #777 none repeat scroll 0 0;
  border: 0 none;
  color: #fff;
 /* font-size: 11px;*/
  font-weight: 600;
  letter-spacing: 1px;
  padding: 12px 20px;
  text-transform: uppercase;
  width: 100%;
}

.widget:first-child{
	margin-top: 0;
}

.widget > ul {
  margin-bottom: -12px;
  margin-top: -12px;
  width: 100%;
}

.widget li {
  border-bottom: 1px solid #f0f0f0;
  color: #353535;
 /* font-size: 13px;*/
  padding: 12px 0;
  width: 100%;
}
.widget ul li a{
	color: #777;
}

.widget > ul li:last-child {
  border: 0 none;
}

.widget li span {
  color: #b4b4b4;
  float: right;
}


.tags > a {
  border: 1px solid #777;
  color: #777;
  line-height: 44px;
  margin: 0;
  padding: 10px;
}

/*=====================================================
    SECTION TESTIMONIAL
==========================================================*/

#section-testimonial {
	padding: 90px 0;
	background: url("../images/bg/banner.jpg") no-repeat fixed 50% 50%;
	-webkit-background-size: cover;
	background-size: cover;
	position: relative;
}

#testimonial-carousel .item {
	text-align: center;
	color: #fff;
}

#testimonial-carousel .item p,
#testimonial-carousel .item h4,
#testimonial-carousel .item h5 {
	color: #fff;
}

#testimonial-carousel .item p {
	width: 70%;
	margin: 20px auto;
	color: #ccc;
}

#testimonial-carousel .item i {
	font-size: 45px;
	text-align: center;
	line-height: 45px;
	width: 100%;
	margin: 0px auto 30px;
	border: 1px solid #ffffff;
	width: 65px;
	height: 65px;
	border-radius: 50px;
}

#testimonial-carousel .carousel-indicators {
	bottom: -45px;
}

#testimonial-carousel .carousel-indicators li {
	margin: 5px;
	cursor: pointer;
	opacity: 0.4;
	transition: all 0.4s;
	border-color: #fff;
}

#testimonial-carousel .carousel-indicators .active {
	opacity: 1;
	background: #fff;
}


/*=====================================================
    SECTION CONTACT
==========================================================*/

.contact-info {
  text-align: center;
  margin-bottom: 70px;
}

.contact-info i {
  background: #000 none repeat scroll 0 0;
  border-radius: 50px;
  color: #fff;
  font-size: 20px;
  height: 60px;
  margin-bottom: 15px;
  padding-top: 20px;
  text-align: center;
  width: 60px;
}

.contact-info p {
  line-height: 20px;
}

.section-sub-heading {
	padding-top: 80px;
}

#section-contact {
	padding-bottom: 90px;
}

.form-control {
	border-radius: 2px;
	box-shadow: none!important;
	height: 45px;
	border-left: 0;
	border-right: 0;
	border-top: 0px;
}

#contactform .form-group {
	margin-bottom: 30px;
}


/*=====================================================
    SECTION FOOTER
==========================================================*/

#section-footer {
	padding: 70px 0px;
	background: #111;
}

.footer-socail {
	margin: 20px 0px 0px;
}

.footer-socail a {
  color: #fff;
  font-size: 15px;
  margin: 0 15px;
  transition: all 0.3s ease 0s;
}

.footer-socail li a {
	text-transform: uppercase;
	color: #fff;
	font-weight: 700;
}

.footer-socail a:hover {
	color: #777777;
}

.footer-link p {
	width: 70%;
	margin: 10px auto 0px;
	color: #ccc;
}

.copy {
	color: #eee;
	text-transform: capitalize;
}