@charset "utf-8";
/* CSS Document */

/* 
html5 reset
*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; outline:0; font-size:100%;    vertical-align:baseline; background:transparent;}
.og-grid *,
.og-grid *:after,
.og-grid *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
body {line-height:1;}
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block;}
ul,li {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none;}
table {border-collapse:collapse;border-spacing:0;}
hr {display:block;height:1px;border:0;   border-top:1px solid #cccccc;margin:1em 0;padding:0;}
input, select {vertical-align:middle;}
.clear{clear:both}
img {
  /* Responsive images (ensure images don't scale beyond their parents) */

  max-width: 100%;
  /* Part 1: Set a maxium relative to the parent */

  width: auto\9;
  /* IE7-8 need help adjusting responsive images */

  height: auto;
  /* Part 2: Scale the height according to the width, otherwise you get stretching */

  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

/* -------------------------------------------------------
				Main Wrapers
--------------------------------------------------------- */
/* 100% height */
HTML, body, .mainWrapper, section{width:100%; height:100%; }
section{width:100%; display:block}
#home, #about, #work, #contact{min-height:100%; position:relative; padding:0px 0 0 0; width:100%;}
#home{padding-top:0}
.container{max-width:960px; margin:0 auto}
body{background:url(../images/bg.png); font-family:"Open Sans", Arial, Helvetica, sans-serif}
.home{background:#0fc799; text-align:center;color:#fff; line-height:1.5;font-family: 'Lato', sans-serif;}
/* -------------------------------------*/ 

/* -------------------------------------------------------
				Header Styles
--------------------------------------------------------- */
.logo-txt{text-align:center; padding:10px 0; font-size:45px; font-weight:600; }
.home .logo-txt{padding-top:10%}
.message-text{font-size:35px;}
.jcarousel-clip{width:676px; height:447px; margin:0 auto; padding:40px 0 48px 0}
.header{background:#d3422e; padding:10px 0; width:100%; position:absolute; left:0; z-index:9999; display:none}
	.logo{display:none; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25)}
	.logo a{display:block; color:#F5F5F5; font-size:22px; font-weight:600; text-decoration:none}
	/*.logo a span{color:#F5ECB8}*/
	.navbar{margin-bottom:0}
	.navbar-nav{font-size:14px; margin:0 auto; text-align:center; float:none}
	.navbar-nav li{display:inline-block; padding:0 20px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;  -ms-transition: all 0.3s ease; transition: all 0.3s ease; float:none}
	.navbar-nav a{color:#dcdcdc; padding:5px 10px; display:block; text-decoration:none }
	.nav>li>a:hover, .nav>li>a:focus{color:#333}
	
.header.sticky{height:60px; display:block}
.sticky{position:fixed; top:0;}
.sticky .top-nav{float:right; width:auto}
.sticky .top-nav li{padding:0}
.sticky .logo{display:block; margin-top:7px; margin-left:20px}
.sticky .navbar-collapse{float:right;margin-top: -35px;}
.profile-pic{margin:0 auto; border-radius:50%; width:10%}
.scroolTo, .scroolTo:hover{color:#fff;}

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

/* -------------------------------------------------------
				Body content Styles
--------------------------------------------------------- */
.pro-carousel, .jcarousel-skin-tango {width:100%}
/*{width:693px; height:444px; padding:30px 0 0 72px;}*/
.pro-carousel li{width:676px; height:445px;}
.body-content{padding-top:50px; color:#b4b4b4;  font-size:18px; line-height:1.5}
.body-content h2{margin:10px 0; font-weight:700; font-size:38px; text-align:center;line-height:1.5;font-family: 'Lato', sans-serif; }
.divider{border-bottom:2px dotted #464646; padding-bottom:20px; margin-bottom:20px;}

.wordpress, .html-css, .jquery, .webdesign, .frontend {width:0%;}
.skills li{width:100%; margin-bottom:20px; color:#fff;}
.skills li .skill-det{font-weight:400; text-transform:uppercase; color:#c9c9c9; margin: 5px 0 6px 5px;}
.skills li .skill-percent{margin:5px 0 0 0; text-shadow:1px 0px 1px RGBA(0,0,0,0.4); color:#8F8F8F}

.percent-bar{width:90%; height:24px; background:#ebebeb; border-radius:16px; -moz-border-radius:16px; box-shadow:4px 4px 6px RGBA(0,0,0,0.2) inset; border:solid 1px #4b4b4b}
.pecent-in-bar{height:24px; border-radius:16px; -moz-border-radius:16px; }
.red-clr{background: rgb(207,48,54);
background: -moz-linear-gradient(top,  rgb(207,48,54) 0%, rgb(231,68,68) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(207,48,54)), color-stop(100%,rgb(231,68,68)));
background: -webkit-linear-gradient(top,  rgb(207,48,54) 0%,rgb(231,68,68) 100%);
background: -o-linear-gradient(top,  rgb(207,48,54) 0%,rgb(231,68,68) 100%);
background: -ms-linear-gradient(top,  rgb(207,48,54) 0%,rgb(231,68,68) 100%);
background: linear-gradient(to bottom,  rgb(207,48,54) 0%,rgb(231,68,68) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cf3036', endColorstr='#e74444',GradientType=0 );
}
.green-clr{background-color: #a1ce5b;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#a1ce5b), to(#91ba52));
	background-image: -webkit-linear-gradient(top, #a1ce5b, #91ba52);
	background-image: -moz-linear-gradient(top, #a1ce5b, #91ba52);
	background-image: -ms-linear-gradient(top, #a1ce5b, #91ba52);
	background-image: -o-linear-gradient(top, #a1ce5b, #91ba52);
	background-image: linear-gradient(top, #a1ce5b, #91ba52);
}
.pink-clr{background-color: #f674a4;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f674a4), to(#e06995));
	background-image: -webkit-linear-gradient(top, #f674a4, #e06995);
	background-image: -moz-linear-gradient(top, #f674a4, #e06995);
	background-image: -ms-linear-gradient(top, #f674a4, #e06995);
	background-image: -o-linear-gradient(top, #f674a4, #e06995);
	background-image: linear-gradient(top, #f674a4, #e06995);
}
.yellow-clr{background-color: #f0bb4b;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f0bb4b), to(#d9aa44));
	background-image: -webkit-linear-gradient(top, #f0bb4b, #d9aa44);
	background-image: -moz-linear-gradient(top, #f0bb4b, #d9aa44);
	background-image: -ms-linear-gradient(top, #f0bb4b, #d9aa44);
	background-image: -o-linear-gradient(top, #f0bb4b, #d9aa44);
	background-image: linear-gradient(top, #f0bb4b, #d9aa44);
}
.blue-clr{background: rgb(67,96,185);
	background: -moz-linear-gradient(top,  rgb(67,96,185) 0%, rgb(83,138,221) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(67,96,185)), color-stop(100%,rgb(83,138,221)));
	background: -webkit-linear-gradient(top,  rgb(67,96,185) 0%,rgb(83,138,221) 100%);
	background: -o-linear-gradient(top,  rgb(67,96,185) 0%,rgb(83,138,221) 100%);
	background: -ms-linear-gradient(top,  rgb(67,96,185) 0%,rgb(83,138,221) 100%);
	background: linear-gradient(to bottom,  rgb(67,96,185) 0%,rgb(83,138,221) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4360b9', endColorstr='#538add',GradientType=0 );
}
.pattern-overlay{background:url(../images/pattern.png); height:24px; border-radius:16px; -moz-border-radius:16px; opacity:0.5; filter:alpha(opacity=50);}

/* Contact Form */
.contact-form{background: rgba(255,255,255,0.05)}
.contact-form form{padding:20px;}
.contact-form label{display:block}
.contact-form .txt-field{padding:8px; border:solid 1px #7b7b7b; background:#a1a1a1; font-size:16px; font-family:"Open Sans", Arial, Helvetica, sans-serif; width:90%}
.contact-form .txt-field:focus{background:#d8d8d8}
.contact-form p{margin-bottom:10px;}
.submit-btn{background:#e44e35; border:solid 2px #bb341d; border-bottom-width:4px; cursor:pointer; padding:5px 20px; font-size:14px; font-weight:700; color:#fff; font-family:"Open Sans", Arial, Helvetica, sans-serif;}
.submit-btn:hover{background:#bb341d}

.reach-me{padding:20px;}
.contact-me a{color:#b4b4b4;}
.contact-me li{padding:4px 0 4px 45px;}
.contact-me li.email{background:url(../images/icons.png) left top no-repeat; }
.contact-me li.phone{background:url(../images/icons.png) left -40px no-repeat; }
.social-media li{float:left; margin-right:10px;}
.social-media li, .social-media li a{width:42px; height:42px; display:inline-block; }
.social-media li a{text-indent:-999em}
.social-media li {background-image:url(../images/icons.png); background-repeat:no-repeat; transition: all 0.50s ease-in-out; -moz-transition: all 0.50s ease-in-out; -webkit-transition: all 0.50s ease-in-out; }
.social-media li.facebook{background-position:-53px -95px;  }
.social-media li.in{background-position:-3px -95px;}
.social-media li.twitter{background-position:-103px -95px;}
.social-media li:hover{opacity:0.5; filter:alpha(opacity=50);}
.fa-remove:before, .fa-close:before, .fa-times:before{content: "\f00d" !important;}

@media (max-width:768px){
	.home .logo-txt{padding-top:10%}
	.navbar-nav li{display:block; text-align:left }
	header{height:60px;}
	.sticky .navbar-collapse{float:none; margin:0 -5px; background:#d3422e; }
	.navbar-toggle{margin:0}
	.message-text{padding:0 20px;}
	
	.contact-form{margin-bottom:30px;}
	.profile-pic{width:100px}
}
@media screen and (max-width: 650px){
	.logo-txt{    font-size:40px;}
	.message-text{font-size:35px}
	.body-content h2{font-size:30px;}
	.og-grid li{width:45%; height:auto}
	.og-fullimg, .og-details{display:block; float:none; height:auto}	
	.og-fullimg,  .og-details{width:80%; margin:0 0 0 3%;}
	.og-expander h3{font-size:20px; margin:10px 0; padding:0}
	.og-details a{margin-top:10px}
}