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

Style.css | Version:1.0

    Table of contents
    01. Google Font
    02. PreLoader
    03. Reset
    04. Typography
    05. Background Colors
    06. Navigation
    07. Hero Img Settings
    08. Counter
    09. Portfolio
    10. Skills
    11. Testimonials
    12. Contact Form
    13. Footer
    14. Icons
    15. Buttons
    16. Scroll to top
    17. Paddings and Margin
    18. Custom Settings

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

/* -------------------------------
   01 - Google Fonts
------------------------------- */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Ubuntu:300,400,500,700);

/* -------------------------------
   02 - Pre Loader
------------------------------- */
.preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #474747; z-index: 9999; }
.preloader img { width: 100px; height: 100px; margin: auto; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; }

/* -------------------------------
   03 - Reset
------------------------------- */
section { padding: 140px 0px; }
a { color: #000; }
a:hover { color: #292929; }
ul, ol, dl {list-style-position: outside;}
body{ font-size:13px; -webkit-font-smoothing: antialiased; letter-spacing: 0.03em; line-height:24px; color:#6d6c6c; font-family: 'Open Sans', sans-serif; }
img { -webkit-backface-visibility: hidden; max-width:100%; height:auto; }
ul { padding: 0px; list-style: none outside none; margin: 0px;}
input, select{ border: 1px solid #e8e8e8; padding: 9px 16px; width: 100%; resize: none; letter-spacing: 1px; font-size: 11px; max-width: 100%; margin-bottom: 20px; }
textarea{ border: 1px solid #e2e2e2; letter-spacing: 1.2px; font-size: 11px; height: 160px; resize: none; padding: 9px 16px; width: 100%; max-width: 100%; margin-bottom: 20px;}
input[type="text"], textarea { border-radius: 0;  -webkit-appearance: none; }
input:focus, textarea:focus{   outline: none; border: 1px solid #c8c8c8; border: 1px solid #989898; background-color: #fbfafa;  }
select::-ms-expand{ display:none;}
* { transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-duration: .2s; -moz-transition-duration: .2s; -webkit-transition-duration: .2s; -o-transition-duration: .2s; }
::selection { background:#000; color:#fff; }
::-moz-selection { background:#000; color:#fff; }
::-webkit-input-placeholder { color: #9e9d9d; text-overflow: ellipsis; }
::-moz-placeholder { color: #9e9d9d !important; text-overflow: ellipsis; opacity:1; } 
:-ms-input-placeholder { color: #9e9d9d !important; text-overflow: ellipsis; opacity:1; }
:-moz-placeholder { color: #9e9d9d !important; text-overflow: ellipsis; opacity:1; }
::-webkit-scrollbar { width:9px;}
::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3); -moz-box-shadow:inset 0 0 6px rgba(0,0,0,.3); box-shadow:inset 0 0 6px rgba(0,0,0,.3); }
::-webkit-scrollbar-thumb { background:rgba(210,210,210,.8); -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.5); -moz-box-shadow:inset 0 0 6px rgba(0,0,0,.5); box-shadow:inset 0 0 6px rgba(0,0,0,.5); }
::-webkit-scrollbar-thumb:window-inactive { background:rgba(210,210,210,.4) }
.animated { -moz-transition-duration: 0s !important;  }
@media screen\0 { input { /* ie7, ie9, ie10, ie11+ only */ padding-bottom: 18px; } }
.center-col{ float:none !important; margin-left:auto !important; margin-right:auto !important; }

/* -------------------------------
   04 - Typography
------------------------------- */
/* Section Heading */
.section-heading {text-transform: uppercase; font-size: 27px; letter-spacing: 2px; line-height: 25px; color: #000; font-weight: 700; font-family: 'Open Sans', sans-serif; } 

/* Different text sizes */
.small-text { font-size:9px !important; line-height:14px !important; }
.md-text { font-size: 16px !important; line-height: 21px !important; letter-spacing: 1.7px; }
.light-text { font-size: 15px; line-height: 23px; font-weight:lighter; letter-spacing: 1.7px; }
.lg-text { font-size:21px; line-height:31px;}

/* Headings */
h1 { font-size:47px; line-height:44px; letter-spacing: 1.9px;}
h2 { font-size:39px; line-height:44px; letter-spacing:inherit;}
h3 { font-size:33px; line-height:39px; letter-spacing: 1.9px;}
h4 { font-size:24px; line-height:29px; letter-spacing: 1px;}
h5 { font-size:21px; line-height:24px; letter-spacing: 1.9px;}
h6 { font-size:19px; line-height:24px; letter-spacing: 1px;}
h1, h2, h3, h4, h5, h6 { color: #000; text-transform: uppercase; margin:0px; padding:0px; }

/* Text color */
.text-white {color: #fff; }
.text-black {color: #000; }
.text-gray {color: #898888; }
.text-light-gray { color: #4c4c4c; }

/* Letter spacing */
.zero-letter-space { letter-spacing: 0px !important; }
.letter-space1 { letter-spacing:1px ; }
.letter-space2 { letter-spacing:2px ; }

/* Font weight */
.font-w6 { font-weight:600; }
.font-w5 { font-weight:500; }

/* Alternate font */
.ub-font {font-family: 'Ubuntu', sans-serif; }

/* -------------------------------
   05 - Background colors
------------------------------- */
.white-background { background: #fff !important; }
.black-background { background: #000 !important; }
.light-gray-background { background: #fbfafa !important; }
.gray-background{background: #6d6d6d !important;}

/* -------------------------------
   06 - Navigation
------------------------------- */
.navbar { top: 0; display: inline-table; position: fixed; z-index: 10; border-radius:0; width: 100%; border: none; }
.nav li { margin: 16px 21px; }
nav .container { height: 77px; display: table-cell; vertical-align: middle; position: relative; }
nav.shrink .container { height: 62px;}
.navbar-nav a:focus { background: transparent !important; color: #fff !important; }
.navbar-nav a:hover { background: transparent !important; color: #cccbcb !important; }
.side-container { padding-left: 239px; }
.navbar-brand img {  z-index: 2; position: relative; max-width: 156px; top: -5px; }
nav.shrink { border: none !important; background: rgba(0,0,0,1);}
.navbar li.active a { border-bottom: none; }
.side-navigation { width: 245px; height: 100%; }
.side-navigation .navbar-header {background: none;}
nav.side-navigation .container { padding:70px 45px; vertical-align: top; }
.side-navigation .navbar-nav li {width: 100%; margin: 0px; padding: 18px 0px; }
.side-navigation .navbar-nav li a { color: #a09f9f !important; border-bottom: none; font-weight: 600; }
.side-navigation .navbar-nav li:last-child { border-bottom: none; }
.side-navigation .navbar-nav li a:hover, .side-navigation .navbar-nav li.active a { padding: 0px 0px 0px 15px !important; color: #000 !important; }
.navbar-nav a { padding: 0px !important; text-transform: capitalize; font-weight: 500; font-size: 16px; font-family: 'Ubuntu', sans-serif !important; color: #fff !important; }

/* -------------------------------
   07 - Hero image settings
------------------------------- */
.mid-text-settings { text-align: center; height: 100%; width: 100%; display: table; }
.mid-text { display: table-cell; vertical-align: middle; }
.mid-text span { text-align: center !important; }
.text-settings { right: 0; left: 0; height: 100%; width: 100%; position: absolute; z-index: 1; }
.hero-img { left: 0; right: 0; position: absolute; }
.hero-img span { display: table; z-index: 999; } 
.hero-img .text-settings { z-index: inherit !important; }
.setting-parallax { background-size: cover !important; background-attachment: fixed !important; background-repeat: no-repeat !important; overflow: hidden; position: relative;  background-position: center center; transition-duration: .2s; -moz-transition-duration: .2s; -webkit-transition-duration: .2s; -o-transition-duration: .2s; transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -webkit-transition-timing-function: ease-in; -o-transition-timing-function: ease-in;}
.img-text { letter-spacing:1px !important;  color:#fff !important; position: relative !important; z-index: 5; font-size:28px !important; line-height:34px !important; font-family: 'Ubuntu', sans-serif !important; }
.freelancer-name{ font-family: 'Ubuntu', sans-serif !important; font-size:50px !important; text-transform: uppercase; position: relative !important; z-index: 5; line-height:50px !important; color: #fff; letter-spacing: 4px; font-weight: 600 !important; }
.freelancer-title { text-transform: uppercase; position: relative !important; font-weight: lighter; color: #d4d2d2; margin-top:1.5% !important; z-index: 5; letter-spacing: 5px;  }

/* -------------------------------
   08 - Counter
------------------------------- */
.count-settings .counting-num { font-size: 37px;}
.counting-typo { line-height:30px; font-size:33px; }
.counting-title { font-size:12px !important; line-height:22px!important; display: inline-block !important; color: #000; letter-spacing:2px !important; text-transform: uppercase;  display: block !important; font-family: 'Ubuntu', sans-serif !important; margin:1.5% !important; margin-left: 0 !important; margin-right: 0 !important; }
.career { font-family: 'Montserrat', sans-serif !important; text-transform: uppercase !important; color:#4c4c4c; position: relative !important; z-index: 5; top: -5px !important; display: block !important; }
.work { font-size: 15px; letter-spacing: 1px; margin-top:6% !important;  color: #000; text-transform: uppercase !important; font-weight:700 !important; display: block !important; }
.year { font-weight: 500 !important; color: #000; font-size:29px !important; line-height:35px !important; text-transform: uppercase; font-family: 'Ubuntu', sans-serif !important; }

/* -------------------------------
   09 - Portfolio
------------------------------- */
.grid { margin: 0px auto; }
.grid img { width:100%}
.portfolio-nav li a { line-height: 15px; margin: 0px;}
.portfolio-wd .grid li { width: 33.333%; float: left;}
ul.filter-portfolio { border-bottom: none; }
.filter-portfolio li { top:1px; display: inline-block; float: inherit; position: relative; margin: 0px 14px !important; }
.filter-portfolio li:first-child { margin-left:  0px !important; }
.filter-portfolio li:last-child  { margin-right: 0px !important; }
.filter-portfolio li a { color: #9b9b9b; border-radius:0px; border: none !important; padding: 6px 14px; }
.filter-portfolio li a:hover, .filter-portfolio li:active, .filter-portfolio li.active a { border-radius: 5%; border-bottom: none; color: #fff !important; background-color: #787878 !important; }
.grid li  {transition-duration: 0s; -moz-transition-duration: 0s; -webkit-transition-duration: 0s; -o-transition-duration: 0s;}
.portfolio-item { opacity: 1; overflow: hidden; transition: all 0.3s ease 0s; }
.portfolio-item a { display: block; z-index: 2; position: relative; }
.md-masonry-grid .img-portfolio ul { margin-left: -22px}
.md-masonry-grid .grid li { padding: 0px 0px 20px 20px;}
.masonry-grid .grid figure { -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }
.masonry-grid .grid figcaption {  height: calc(100% - 60px); width: calc(100% - 60px); text-align: center; opacity: 0px; position: absolute; top: 30px; left: 30px;}
.masonry-grid .grid figcaption h3 { font-size: 17px; text-align: center; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: relative; width: 100%; top: 50%; padding: 0px 14px; margin: 0px; line-height: 24px;}
.img-portfolio { clear: both; float: left; width: 100%; }
.img-portfolio figure { position: relative; margin: 0px; }
.img-portfolio ul { padding: 0px; list-style: none; }
.img-portfolio figure img { width: 100%;  cursor: pointer; opacity: 1; display: block; }
.img-portfolio figcaption h3 { text-transform:uppercase; padding:0px; margin: 0px 0px 9px; }
.grid li { display: inline-table; margin: 0px; float: left; box-sizing: border-box;}
.grid figure:hover img { -ms-transform: scale(1.03,1.03); -webkit-transform: scale(1.03,1.03);  transform: scale(1.03,1.03); transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; cursor:url("../images/icon-zoom.png"), pointer; opacity:0.13; }
.grid figure:hover figcaption { transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; opacity: 1;}

/* -------------------------------
   10 - Skills
------------------------------- */
.skills-bg{ background-color: #a5a5a5 !important; }
.skill-name{ font-size: 11px; font-weight: 400; margin: 5px 0px 14px; text-transform: uppercase; letter-spacing: 2.6px; }
.skill-name strong { font-weight: 400; color: #000;}
.skills-bar .progress { background-color: #dedede; box-shadow: none; height: 15px; border-radius: 0; margin-bottom: 0px; overflow: visible;}
.skills-bar .progress-bar { position: relative; overflow: visible; }
.skills-bar .progress-bar span { color: #000; font-size: 11px; position: absolute; right: 0; text-align: right; top: 21px;}
.skills-bar .skill-name { margin: 6px 0px 19px;}

/* -------------------------------
   11 - Testimonials
------------------------------- */
.testimonial-bg{background: #4f4f4f !important; }
.testimonial p {  font-size:12px; line-height:21px;  margin:20px 0px 19px; letter-spacing: 1px; }
.testimonial img { margin-top: 10px; border-radius: 50%; max-width: 120px; box-shadow: 0 0 0 3px #989898}
.testimonial span { color: #fff;}
.fix-background{ background-position: center center; background-attachment: fixed !important; background-repeat: no-repeat !important; background-size: cover !important; position: relative; overflow: hidden; }
.person{ margin-left: 0 !important; font-weight:700 !important; text-transform: uppercase; margin-right: 0px !important;}
.opacity-seven{ opacity: 0.7; top:0; left: 0; position: absolute; width: 100%; height: 100%; z-index: 1; }
.opacity-five{ opacity: 0.5; top:0; left: 0; position: absolute; width: 100%; height: 100%; z-index: 1; }

/* -------------------------------
   12 - Contact Form 
------------------------------- */
.contact-form { font-size: 13px !important; border:1px solid rgba(0,0,0,.1); padding: 11px 23px; }
.contact-form:focus {border: 1px solid rgba(0,0,0,.3) !important; }
#alert { border: none; clear: both; background-color: #003d63; text-align: center; margin: 0 13px 23px;  padding-top: 17px; padding-bottom: 18px; color: #fff; }

/* -------------------------------
   13 - Footer
------------------------------- */
footer { clear:both; }
.footer-icons .fa { font-size: 14px; height: 30px !important; vertical-align: middle; width: 30px; color: #fff; background: none;  display: table-cell; text-align: center; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; line-height: 1; }
.footer-icons .fa-facebook { background-color: #b1b1b1; border-radius: 50%; }
.footer-icons .fa-facebook:hover { background-color: #395694; border-radius: 0px; }
.footer-icons .fa-twitter { background-color: #b1b1b1; border-radius: 50%; }
.footer-icons .fa-twitter:hover { background-color: #00a8e8; border-radius: 0px; }
.footer-icons .fa-linkedin { background-color: #b1b1b1; border-radius: 50%; }
.footer-icons .fa-linkedin:hover { background-color: #0077b0;  border-radius: 0px; }
.footer-icons .fa-google-plus { background-color: #b1b1b1; border-radius: 50%; }
.footer-icons .fa-google-plus:hover { background-color: #da4937; border-radius: 0px; }

/* -------------------------------
   14 - Icons
------------------------------- */
i { color: #919090; margin: 0px 3px; }
.icon-sm { font-size: 33px; }

/* -------------------------------
   15 - Buttons
------------------------------- */
.btn i { margin-right: 7px; }
.button { margin-bottom: 0px; margin-top: 0px; }
.btn.sm-btn { font-size: 13px; padding: 10px 27px;}
.black-btn:hover, .black-btn:focus { color:#000; border: 1px solid #000; background-color: transparent;}
.dark-btn:hover, .dark-btn:focus { background-color: transparent; color: #000; border: 1px solid #000; border-radius: 0px;}
.black-btn { font-size: 13px; border:1px solid #000; display: inline-block; padding: 5px 18px 7px; color:#fff; background-color: #000; }
.dark-btn { color: #fff; border: 1px solid #a4a3a3; border-radius: 10px; display: inline-block; padding: 5px 18px 7px; width: auto; background-color: #a4a3a3;}
.btn { border-radius: 0px; margin-right: 20px; border:1px solid transparent; display: inline-block; font-weight: 600; letter-spacing: 1px; width: auto; text-transform: uppercase; }

/* -------------------------------
   16 - Scroll Top to Header
------------------------------- */
.topScroll { display: none; font-weight: bold; height: auto; border-radius: 50%; padding: 0; position: fixed; right: 30px; text-align: center; text-decoration: none; top: 91%; width: auto; background-color: rgba(127, 129, 124, 0.4); z-index: 555;  }
.topScroll i { font-size: 17px; margin: 0px 6px; color: #fff; }
.topScroll:hover { background-color: #000; }
.topScroll:hover i { position: relative; }

/* -------------------------------
   17 - Padding and Margins
------------------------------- */
/* Paddings */
.zero-padding { padding:0px !important; }
.padding-1 { padding:1%; }
.zero-padding-top { padding-top: 0px !important; }
.zero-padding { padding:0px !important; }
.zero-padding-left { padding-left:0px !important; }
.padding-nine { padding:5%; }
.padding-btm { padding-bottom:4% !important; }
.zero-lr-padding{ padding-left: 0px !important; padding-right: 0px !important; }
.zero-tb-padding{ padding-bottom: 0px !important; padding-top: 0px !important; }

/* Margins */
.margin-six-all{ margin:6% !important;}
.margin-five-all {margin:5%;}
.margin-eight-all{ margin:8% ;}
.margin-top-six{margin-top:6% !important;}
.margin-top-three{ margin-top:3% ;}
.margin-three-all{margin:3% ;}
.margin-eleven-all{ margin:11% ;}
.margin-seven-all{ margin:7%;}
.margin-two-all{margin:2%;}
.zero-margin{ margin:0px;}
.zero-margin-bottom{ margin-bottom: 0px !important; }
.zero-margin-top{ margin-top:0px !important; }
.auto-lr-margin { margin-right:auto !important; margin-left:auto !important; }
.zero-lr-margin{ margin-left: 0px !important; margin-right: 0px !important; }

/* -------------------------------
   18 - Custom Settings
------------------------------- */
/* about me */
.bio li { padding: 8px 0px;}
ul.bio {  margin-left:26px; list-style:inside disc;}
ul.bio-icon { list-style: none; }

/* display block */
.display-block { display: block !important; }

/* overflow */
.overflow-hidden{ overflow: hidden !important; }

/* positioning */
.position-relative { z-index: 5; position: relative !important; }

/* For Webkit Browsers only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
}