/* ------------------------------------------------------------------------------

	Based on the Template Name: Coming soon
	Based on Template URI: http://themeforest.net/item/flato-responsive-resume-personal-portfolio-temp/6486867
	Description: Full Screen Coming Soon Template
	Author: Andy
	Author URI: http://www.themeelite.com
	License: GNU General Public License version 3.0
	License URI: http://www.gnu.org/licenses/gpl-3.0.html
	Version: 1.0
	
	1.  CSS Reset
	2.	Document Setup
	3.	Header Part
		3.1 Slide show background control
	4.  Background slider CSS style
	5.	Menu Style
	6.	About me Style
	7.	testimonials Skills Style
	8.	Work Experience Style
	9.	Education Style
	10. portfolio Style
	11. Get in tuch Style
	12. Footer Style
	13. Responsive style
	14. Projects details style
		
---------------------------------------------------------------------------------
/* 1. CSS Reset
-------------------------------------------------------------------------------*/
* {
	padding:0;
	margin:0;
}

body {
	color:#fff;
	font-family: 'ff-meta-web-pro', sans-serif;
	font-weight: 300;
	position:relative;
	background:#474d5d;
	width:100%;
	height:100%;
	overflow: scroll;
	overflow-x: hidden;
}
a {
	text-decoration:none;
	color:#008efe;
	outline:none;
}
/*----------------------------------------------------
 2.	Document Setup
------------------------------------------------------*/
.wrapper {
	width:100%;
}
.spHeight {
	padding-top:63px;
}
.noMar {
	margin:0 !important;
}
.noPadd {
	padding:0px !important;
}
.container .row {
	margin:0px;
}
p {
	font-family: 'ff-meta-web-pro', sans-serif;
	font-size:1em;
	line-height:21px;
	font-weight:400;
	padding-bottom:22px;
	margin:0px;
}
h1 {
	font-family: 'Proxima-Nova-Condensed-Light', sans-serif;
	font-size:80pt;
	line-height:90px;
	font-weight:100;
	margin:0px;
	padding-bottom:8px;
}
h2 {
	font-family: 'Proxima-Nova-Condensed-Light', sans-serif;
	font-size:36px;
	line-height:38px;
	padding-bottom:0px;
	font-weight:300;
	text-transform:uppercase;
	margin:0px;
}
h3 {
	font-family: 'Proxima-Nova-Condensed-Light', sans-serif;
	font-size:24px;
	line-height:30px;
	padding-bottom:6px;
	font-weight:400;
	margin:0px;
}
h4 {
	font-family: 'Proxima-Nova-Condensed-Light', sans-serif;
	font-size:19px;
	line-height:24px;
	padding-bottom:6px;
	font-weight:600;
	margin:0px;
}
h5 {
	font-family: 'Proxima-Nova-Condensed-Light', sans-serif;
	font-size:16px;
	line-height:24px;
	padding-bottom:6px;
	font-weight:400;
	margin:0px;
}
h4.subHeading {
	font-family: 'ff-meta-web-pro', sans-serif;
	font-size:1.2em;
	line-height:21px;
	font-weight:600;
	padding-bottom:22px;
}
.heading {
	text-align:center;
	padding-bottom:30px;
}
.topmar {
	margin-top:20px;
}
/*----------------------------------------------------
 3.	Header Part
------------------------------------------------------*/
header {
    position:relative;
	background:#262b37;
}
.banner {
	overflow:hidden;
	margin:0 auto !important;
	background:#fff;
}
.bannerText {
	position:absolute;
	left:0;
	right:0;
	top:55%;
	text-align:center;
	padding:30px 0 30px;
	max-width:960px;
	background: rgba(0, 0, 0, 0);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000);
	zoom: 1;
}
.bannerText h1 {
	text-transform:uppercase;
}
.bannerText h2 {
	font-size:34px;
	text-transform:none;
}
/*---------------------------------------------------------------------------------
 X. New SlideShow
-------------------------------------------------------------------------------*/
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1400px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 5px;
  width: 100%;
  text-align: left;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 6s;
}

@keyframes fade {
  from {opacity: .5} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

/*------------------------------------
	3.1 Slide show background control
--------------------------------------*/ 
.cb-slideshow {
	background:#1b1f2b;
}
.cb-slideshow li {
	opacity:0.5;
	filter:alpha(opacity=50); /* For IE8 and earlier */
}
/*---------------------------------------------------------------------------------
 4. Background slider CSS style
-------------------------------------------------------------------------------*/
.ri-grid {
	margin:0px auto;
	position: relative;
	height: auto;
}
.ri-grid ul {
	list-style: none;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}
.ri-grid ul:before, .ri-grid ul:after {
	content: '';
	display: table;
}
.ri-grid ul:after {
	clear: both;
}
.ri-grid ul {
	zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.ri-grid ul li {
	-webkit-perspective: 400px;
	-moz-perspective: 400px;
	-o-perspective: 400px;
	-ms-perspective: 400px;
	perspective: 400px;
	margin: 0;
	padding: 0;
	float: left;
	position: relative;
	display: block;
	overflow: hidden;
	background: #000;
}
.ri-grid ul li a {
	display: block;
	outline: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #333;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
/* Grid wrapper sizes */
.ri-grid-size-1 {
	width: 55%;
}
.ri-grid-size-2 {
	width: 100%;
}
.ri-grid-size-3 {
	width: 100%;
	margin-top: 0px;
}
/* Shadow style */
.ri-shadow:after, .ri-shadow:before {
	content: "";
	position: absolute;
	z-index: -2;
	bottom: 15px;
	left: 10px;
	width: 50%;
	height: 20%;
	max-width: 300px;
	max-height: 100px;
	box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
.ri-shadow:after {
	right: 10px;
	left: auto;
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	transform: rotate(3deg);
}
.ri-grid-loading:after, .ri-grid-loading:before {
	display: none;
}
.ri-loading-image {
	display: none;
}
.ri-grid-loading .ri-loading-image {
	position: relative;
	width: 30px;
	height: 30px;
	left: 50%;
	margin: 100px 0 0 -15px;
	display: block;
}


/*----------------------------------------------------
 5.	Menu Style
------------------------------------------------------*/
.isStuck {
	left:0px;
	width:100%;
}
.menu {
	margin-top:0px;
	position: static;
	left:0px;
	right:0px;
}
.navwrapper .container {
	padding:0;
	width:auto;
}
.navbar-header {
	display:none;
}
.nav > li > a {
	display:inline-block;
}
.navbar-nav > li {
	float: none;
	display: inline;
}
.navbar-nav {
	margin: 0 auto;
	text-align: center;
	float: none;
}
.navbar-toggle {
	margin-top:14px;
}
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
	margin-top:0px;
	position: relative;
	z-index: 15;
	background:#262b37;
}
.navbar-wrapper .container {
	padding:0px;
}
.navbar-collapse {
	padding:0;
}
.navbar-collapse.in {
	max-height:100%;
}
.navbar.navbar-inverse.navbar-static-top {
	margin:0px auto;
	background:#262b37;
	color:#c3c8d6;
	border:none;
	font-family: 'Proxima-Nova-Condensed-Light', sans-serif;
	letter-spacing: 0.1em;
	font-size:14px;
	text-transform:uppercase;
}
.navbar.navbar-inverse.navbar-static-top a {
	color:#c3c8d6;
	padding:22px 25px;
	line-height:18px;
	text-align:center;
}
.navbar.navbar-inverse.navbar-static-top a:hover {
	color:#fff;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus {
	background:#1b1f29;
	color:#c3c8d6;
}
.navbar-inverse .navbar-nav>.active>a:hover {
	background:#1b1f29;
	color:#fff;
}
.hideClass {
	display:none;
}
.carousel {
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
	z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
	height: 600px;
	background-color: #0A64A4;
}
.carousel-inner > .item > img {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100%;
}
/*----------------------------------------------------
 6.	About me Style
------------------------------------------------------*/
.aboutme {
	background:#474d5d; /*#00bdbd*/
	color:#000;
	position:relative;
}
.aboutme .container {
	padding-top:85px;
	padding-bottom:93px;
}
.aboutme  .heading p{
	padding-bottom:20px;
	color:#84868d;
}
.aboutme  h3{
	color:#000000;
	font-family: 'Proxima-Nova-Condensed-Light', sans-serif;
	text-transform:uppercase;
	font-size:22px;
	font-weight: bold;
	line-height:24px;
	letter-spacing: 0.08em;
	padding-top:30px;
	padding-bottom:8px;
	font-weight:400;
	margin:0px;
}
.aboutme  h4{
	color:#000000;
	font-family: 'Proxima-Nova-Condensed-Light', sans-serif;
	font-size:22px;
	line-height:24px;
	letter-spacing: 0.08em;
	padding-bottom:20px;
	font-weight:400;
	margin:0px;
}
.aboutme p {
	color:#ffffff;
	font-size:14px;
	line-height:20px;
	padding-bottom:20px;
}



.aboutTop {
	background:#00bdbd;
	height:60px;
}

.spHeight .aboutTop {
	margin-top:-62px !important;
}
.bntDownload {
	font-size:1.2em;
	font-family: 'ff-meta-web-pro', sans-serif;
	background:#3c414f;
	padding:16px 22px;
	display:inline-block;
	color:#cccccc;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	border: 1px solid #b2b2b2;	
}
.bntDownload:hover {
	background:#3db295;
	color:#fff;
	text-decoration:none;
}
/*----------------------------------------------------
 7.	Technical Skills Style
------------------------------------------------------*/
.addspace{
	height:60px;
	background:#fff;
}

.technical{
	background:#474d5d;
	color:#474d5d;
}
.technical .container{
	padding-top:85px ;
	padding-bottom:69px ;
}
.technical .heading p{
	padding-bottom:41px;
	color:#84868d;
}

.technical p{
	color:#474d5d;
}
.technical h2{
	color:#000;
	letter-spacing: 0.08em
}

.technical .skillsArea{
	padding:0px;
}
.technical .skills{
	margin:0 auto;
	margin-bottom:23px;
	text-align:center;
	padding:0px;
	float:none;
}
.technical .skills p{
	color:#84868d;
	font-size:0.9em;
	line-height:1.3em;
	text-align:center;
}
.technical .skills img{
	margin:0 auto;
	margin-bottom:33px;
	width:100%;
	max-width:152px;
}

.technical .skills h4{
	text-transform:uppercase;
	letter-spacing: 0.08em
}

.skilBg{
	background:url(../images/skills.png) no-repeat 0 0;
}

.chart {
	position: relative;
	display: inline-block;
	width: 152px;
	height: 152px;
	margin-bottom: 26px;
	text-align: center;
}
.chart canvas {
	position: absolute;
	top: 0;
	left: 0;
}
.percent {
	display: inline-block;
	font-size:2em;
	color:#474d5d;
	line-height: 152px;
	z-index: 2;
}
.percent:after {
	content: '%';
	margin-left: 0.1em;
	font-size: .8em;
}
.angular {
	margin-top: 100px;
}
.angular .chart {
	margin-top: 0;
}

/*----------------------------------------------------
 8.	Work Experience Style
------------------------------------------------------*/
.exprience {
	background:#474d5d;
}
.exprience .container {
	padding-top:85px;
	padding-bottom:90px;
}
.exprience h2 {
	color:#000;
	letter-spacing: 0.08em
}
.exprience p {
	color:#84868d;
	line-height:1.5em;
}
.exprience .heading p {
	padding-bottom:41px;
}
.exprience h4 {
	font-weight:100;
}
.workDetails .rightArea {
	border-left: solid 1px #eaeaea;
	padding-bottom:47px;
}
.workDetails:last-child .rightArea {
	padding-bottom:0px;
}
.workYear {
	font-size:17px;
	color:#fff;
	background:#dc6634;
	text-align:center;
	width:120px;
	height:120px;
	padding:40px 0 40px 0;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
.arrowpart {
	float:left;
	width:15px;
	height:50px;
	background:url(../images/arrow-left.png) no-repeat 0 23px;
}
.exCon {
	width:auto;
	background:#f3f3f3;
	border-bottom:solid 4px #eeeeee;
	padding:22px 47px 6px 47px;
	margin-left:15px;
	text-align:left;
}
.exCon p {
	color:#84868d;
	line-height:21px;
}
.exCon ul {
	color:#84868d;
	line-height:21px;
}
.exCon h4 {
	color:#474d5d;
	padding-bottom:3px;
}
.exCon h5 {
	color:#474d5d;
}

/*----------------------------------------------------
 9.	Education Style
------------------------------------------------------*/
.education {
	background:#474d5d;
}
.education .container {
	padding-top:85px;
	padding-bottom:90px;
}
.education h2 {
	color:#000;
	letter-spacing: 0.08em
	}
.education p {
	color:#84868d;
	/*font-size:13px;*/
	line-height:18px;
}
.education .heading p {
	padding-bottom:41px;
}
.education h4 {
	font-weight:700;
}
.education .arrowpart {
	background:url(../images/arrow-left-light.png) no-repeat 0 23px;
}
.education .exCon {
	background:#fafafa;
	border-bottom:solid 4px #e8e7e7;
}
.education .workDetails .rightArea {
	border-left-color:#e5e4e4;
}
/*----------------------------------------------------
 10. galleria Style
------------------------------------------------------*/
.galleria{ 
	background: #474d5d;
	display:block;
	margin:0 auto;
	text-align: center;
	min-height:500px;	
	max-height:1000px;
	padding-top:5px;
	padding-bottom:0px;
}
.modal-content {
	width: 100%; 
	height: 100%;
	background: #474d5d;
}

.modal-footer .button {
	padding: 7px 18px;
	background:#3c414f;
	display:inline-block;
	color:#fff;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}
.modal-footer .button:hover {
	background:#5d657a;
	color:#fff;
	text-decoration:none;
}


---------------------------------------------------------------------------------
/* 10. Projects details style
-------------------------------------------------------------------------------*/
.portfolio {
	background:#474d5d;
}
.portfolio .container-fluid {
	padding-top:85px;
	padding-bottom:20px;
	text-align: left;
	margin:10px;
}
.portfolio h2 {
	color:#000;
	letter-spacing: 0.08em
	}
.portfolio p {
	color:#84868d;
	/*font-size:13px;*/
	line-height:18px;
}
.portfolio .heading p {
	padding-bottom:41px;
}

.project .row {
	padding-bottom:21px;
}
.project .col{
	padding-left:21px;
}
.project  h2{
	color:#000000;
	font-family: 'Proxima-Nova-Condensed-Light', sans-serif;
	text-transform:uppercase;
	font-size:22px;
	line-height:24px;
	letter-spacing: 0.08em;
	padding-bottom:6px;
	font-weight:400;
	margin:0px;
}
.project p {
	color:#84868d;
	/*font-size:13px;*/
	line-height:18px;
	padding-bottom:5px;
}

.project ul {
	color:#ffffff;

	line-height:18px;
	padding-left:20px;
}


.project img {
  -webkit-filter: brightness(100%);
    vertical-align: middle;
	padding-bottom:5px;	
	display:block;
} 

.project img:hover {
  -webkit-filter: brightness(30%);
  opacity: 0.4;
  display:block;
}


/*----------------------------------------------------
 Creative Market
------------------------------------------------------*/
.bannerCreativeMarket{
	text-align: center;
}

.bannerCreativeMarket a:hover{
	opacity: .8
}
/*----------------------------------------------------
 11. Get in touch style
------------------------------------------------------*/
.contact {
	background:#474d5d;
}
.contact .container {
	padding-top:85px;
	padding-bottom:90px;
	
}
.contact h2 {
	color:#000;
	letter-spacing: 0.08em
	}
.contact p {
	color:#84868d;
	/*font-size:13px;*/
	line-height:18px;
}
.contact .heading p {
	padding-bottom:5px;
}
.contact h4 {

}
.topCon {
	padding-bottom:0px !important;
}

.contactDetails {
	background:#474d5d;
}
.contactDetails .container {
	padding-top:30px;
	padding-bottom:100px;
	padding-left:15%;
}
.contactDetails h3 {
	padding-bottom:15px;
}
.contactDetails p {
	color:#93959c;
	font-size:13px;
	line-height:19px;
	padding-bottom:14px;
}
.contactDetails p a {
	color:#93959c;
}
.contactDetails p a:hover {
	color:#a9abb0;
	text-decoration:none;
}
.contactDetails i {
	padding-right:10px;
}

.contactDetails  img {
	padding-top:60px;
	padding-bottom:150px;
	display:block;
	margin:0 auto;
	vertical-align: middle;
	horizontal-align: middle;
}



.textGroup {
	position:relative !important;
	display: inline-block;
	padding-left:0px !important;
}
#success_page {
	color: #00bdbd;
	font-weight: 500;
}
.error_message {
	color: #ff675f;
	padding-bottom: 15px;
	font-weight: 500;
}
#success_page h3 {
	font-size:17px;
}
/*----------------------------------------------------
 12. Footer Style
------------------------------------------------------*/
.footer {
	background:#474d5d;
}
.footer .container {
	padding:40px 0;
	text-align:center;
}
.footer ul {
	margin:0 auto;
	text-align:center;
	list-style-type:none;
}
.footer ul li {
	display:inline-block;
	text-align:center;
	background:#ffffff;
	color:#474d5d;
	line-height:42px;
	margin:0 6px;
	width:42px !important;
	height:42px !important;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
.footer ul li:hover {
	background:#474d5d;
}
.footer ul li:hover a {
	color:#fff;
}
.footer ul li a {
	color:#474d5d;
	width:42px !important;
	height:42px !important;
}
.footer ul li a i {
	line-height:42px !important;
}
	
/*---------------------------------------------------------------------------------
 13. Responsive style
-------------------------------------------------------------------------------*/
.rwdimg {
  display: block;
  height: auto;
  margin: 0 auto 1.5rem auto;
  width: 100%; 
}
@media screen and (min-width: 1200px) {
 .workYear {
 width:140px;
 height:140px;
 padding-top:50px;
}
 .education .workYear {
 padding-top:58px;
}
}
 @media screen and (max-width: 991px) {
 .navbar.navbar-inverse.navbar-static-top a {
 padding-left:18px;
 padding-right:18px;
}
 .bannerText {
 padding-left:25px;
 padding-right:25px;
}
 .bannerText h1 {
 font-size:65px;
 line-height:71px;
}
 .bannerText h2 {
 font-size:28px;
}
 .proPic {
 text-align:center;
}
}
 @media screen and (max-width: 810px) {
 body {
 min-height:700px;
}
 #header h3 {
 font-size: 38px;
}
 #header h3 span {
 font-size: 16px;
}
 .abc {
 width:100%;
}
 .navbar.navbar-inverse.navbar-static-top a {
 padding-left: 17px;
}
}
 @media screen and (min-width: 768px) {
 .conForm input.col-sm-6 {
 width: 48.5%;
}
 .conForm input.col-lg-6 {
 width: 48.5%;
}
}
 @media screen and (max-width: 768px) {
 .navbar-wrapper .container,  .navwrapper .container {
 padding-right: 15px;
 padding-left: 15px;
}
 ul.portfolioContainer li.col-xs-6 {
 width:49%;
 min-height: 85px;
}
}
 @media screen and (max-width: 767px) {
 .navbar-header {
 display:block;
}
 .workYear {
 margin:0 auto;
}
 .workDetails .rightArea {
 border-left:none;
}
 .arrowpart {
 float:none;
 width:100%;
 height:40px;
 background:url(../images/arrow-top.png) no-repeat 50% 100%;
}
 .education .arrowpart {
 background:url(../images/arrow-top-light.png) no-repeat 50% 100%;
}
 .exCon {
 margin-left:0px;
}
 ul.navbar-nav li a {
 display:block;
}
}
 @media screen and (max-width: 650px) {
 #wrapper {
 top: 200px !important;
}
 .upbox {
 transform: translate(0px, -70px);
 -ms-transform: translate(0px, -70px); /* IE 9 */
 -webkit-transform: translate(0px, -70px); /* Safari and Chrome */
}
 .bannerText {
 top: 25%;
 padding-top:15px;
 padding-bottom:15px;
}
 .bannerText h1 {
 font-size: 42px;
 line-height: 48px;
}
 .bannerText h2 {
 font-size: 18px;
 line-height:24px;
}
}
 @media screen and (max-width: 480px) {
 .navbar.navbar-inverse.navbar-static-top a {
 line-height: 17px;
 padding-top:11px;
 padding-bottom:11px;
}
}
 @media screen and (max-width: 400px) {
 #loopedSlider, #newsSlider {
 min-height: 650px;
 height: 100%;
}
 ul.slides {
 min-height: 600px;
 height: 100%;
}
 .item {
 width: 19%;
}
 .item p {
 font-size: 36px;
}
 .aboutme img {
 width:100%;
}
 ul.portfolioContainer li.col-xs-6 {
 width:100%;
}
.bntDownload {
	font-size: 1.2em;
	padding: 16px 14px;
}
 .conForm textarea {
 margin-bottom:20px;
}
 .textGroup {
 display:block;
 padding:0 0 40px 0;
}
 .nameError,  .emailError {
 left:0px;
 top:0px;
}