/* --------------------------------------
   1. Global Styles
-----------------------------------------*/
body {
  background-color: #fff;
}

.main-img {
  border: 3px solid #1c1c1d;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -mz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.area-bg {
  background-color: #f4f4f5;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #f4f4f5 inset !important;
}

input:-webkit-autofill {
  -webkit-text-fill-color: #50575f !important;
}

.main-btn {
  border: 2px solid #fefcfc;
  border-right-color: #f0f0f1;
  border-bottom-color: #f0f0f1;
  -webkit-box-shadow: inset 5px 5px 5px #e1e1e2,inset -3px -3px 3px #fffdfd;
  -mz-box-shadow: inset 5px 5px 5px #e1e1e2,inset -3px -3px 3px #fffdfd;
  box-shadow: inset 5px 5px 5px #e1e1e2,inset -3px -3px 3px #fffdfd;
}
.main-btn:hover {
  -webkit-box-shadow: inset 6px 6px 6px #e1e1e2,inset -4px -4px 4px #fffdfd;
  -mz-box-shadow: inset 6px 6px 6px #e1e1e2,inset -4px -4px 4px #fffdfd;
  box-shadow: inset 6px 6px 6px #e1e1e2,inset -4px -4px 4px #fffdfd;
}

.main-title h2 {
  color: #3e3d3d;
}
.main-title h3 {
  -webkit-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  -mz-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
}

/* --------------------------------------
   2. Loading
-----------------------------------------*/
.preloader {
  background-color: #f4f4f5;
}
.preloader .preloader-item {
  background-color: #fff;
}

/* --------------------------------------
   3. Color Switcher
-----------------------------------------*/
.switch-button {
  background: #f4f4f5;
  -webkit-box-shadow: inset 3px 3px 3px #eeeef1,inset -3px -3px 3px #fffdfd;
  -mz-box-shadow: inset 3px 3px 3px #eeeef1,inset -3px -3px 3px #fffdfd;
  box-shadow: inset 3px 3px 3px #eeeef1,inset -3px -3px 3px #fffdfd;
}

.switched-styles {
  background: #f4f4f5;
  color: #343a40;
  -webkit-box-shadow: inset 6px 6px 6px #eeeef1,inset -6px -6px 6px #fffdfd;
  -mz-box-shadow: inset 6px 6px 6px #eeeef1,inset -6px -6px 6px #fffdfd;
  box-shadow: inset 6px 6px 6px #eeeef1,inset -6px -6px 6px #fffdfd;
}
.switched-styles h4 {
  color: #50575f;
  border-bottom: 1px solid rgba(10, 10, 10, 0.05);
}
.switched-styles ul li {
  -webkit-box-shadow: 2px 2px 2px #eeeef1,-2px -2px 2px #fffdfd;
  -mz-box-shadow: 2px 2px 2px #eeeef1,-2px -2px 2px #fffdfd;
  box-shadow: 2px 2px 2px #eeeef1,-2px -2px 2px #fffdfd;
}
.switched-styles .hide-button {
  color: #50575f;
}

/* --------------------------------------
   4. Navbar
-----------------------------------------*/
.vertical-nav {
  background-color: #f4f4f5;
  -webkit-box-shadow: 3px 3px 3px #e1e1e2,-3px -3px 3px #fffdfd;
  -mz-box-shadow: 3px 3px 3px #e1e1e2,-3px -3px 3px #fffdfd;
  box-shadow: 3px 3px 3px #e1e1e2,-3px -3px 3px #fffdfd;
}
@media (min-width: 1200px) {
  .vertical-nav.demo2 {
    -webkit-box-shadow: 3px 0px 3px #e1e1e2,-3px 0px 3px #fffdfd;
    -mz-box-shadow: 3px 0px 3px #e1e1e2,-3px 0px 3px #fffdfd;
    box-shadow: 3px 0px 3px #e1e1e2,-3px 0px 3px #fffdfd;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .vertical-nav.demo2 {
    -webkit-box-shadow: 3px 0px 3px #e1e1e2,-3px 0px 3px #fffdfd;
    -mz-box-shadow: 3px 0px 3px #e1e1e2,-3px 0px 3px #fffdfd;
    box-shadow: 3px 0px 3px #e1e1e2,-3px 0px 3px #fffdfd;
  }
}
.vertical-nav .mini-menu ul li a {
  -webkit-box-shadow: 3px 3px 3px #e1e1e2,-3px -3px 3px #fffdfd;
  -mz-box-shadow: 3px 3px 3px #e1e1e2,-3px -3px 3px #fffdfd;
  box-shadow: 3px 3px 3px #e1e1e2,-3px -3px 3px #fffdfd;
}
.vertical-nav .mini-menu ul li a:hover, .vertical-nav .mini-menu ul li a.active {
  -webkit-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  -mz-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
}

/* --------------------------------------
   5. Home
-----------------------------------------*/
.home {
  background: url(../../../images/home2.jpg) top center no-repeat;
  background-size: cover;
}
.home .area-bg {
  background: rgba(244, 244, 245, 0.1);
}
.home .home-intro h3 {
  color: #4a4949;
}
.home .home-intro h1 {
  color: transparent;
  -webkit-text-stroke: 1px #343a40;
}
.home .home-intro p {
  color: #4a4949;
}
.home .home-intro .main-btn {
  background-color: #f4f4f5;
}

/* --------------------------------------
   6. About Me
-----------------------------------------*/
.about .about-me {
  color: #343a40;
}
.about .about-me .about-image {
  background: linear-gradient(-50deg, rgba(170, 170, 170, 0.1) 45%, transparent 25%);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -mz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.about .about-me .about-image img {
  opacity: 1;
}
.about .about-me .about-image img:hover {
  opacity: 1;
}
.about .about-me .about-info h3 {
  color: #50575f;
}
.about .about-me .about-info > p {
  color: #737c84;
}
.about .about-me .about-info .personal-info .about-item h4 {
  color: #50575f;
}
.about .about-me .about-info .personal-info .about-item h4 span {
  background: #f4f4f5;
  -webkit-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  -mz-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
}

/* --------------------------------------
   7. Services
-----------------------------------------*/
.services .service {
  border: 2px solid #fefcfc;
  border-right-color: #f0f0f1;
  border-bottom-color: #f0f0f1;
  -webkit-box-shadow: inset 4px 4px 4px #e1e1e2,inset -3px -3px 3px #fffdfd;
  -mz-box-shadow: inset 4px 4px 4px #e1e1e2,inset -3px -3px 3px #fffdfd;
  box-shadow: inset 4px 4px 4px #e1e1e2,inset -3px -3px 3px #fffdfd;
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .services .service.four {
    border: 2px solid #fefcfc !important;
  }
}
.services .service:hover {
  -webkit-box-shadow: inset 6px 6px 6px #e1e1e2,inset -6px -6px 6px #fffdfd;
  -mz-box-shadow: inset 6px 6px 6px #e1e1e2,inset -6px -6px 6px #fffdfd;
  box-shadow: inset 6px 6px 6px #e1e1e2,inset -6px -6px 6px #fffdfd;
}
.services .service .service-icon {
  background: #f4f4f5;
  -webkit-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  -mz-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
}
.services .service .service-icon i:before {
  -webkit-box-shadow: 3px 3px 3px #e1e1e2,-3px -3px 3px #fffdfd;
  -mz-box-shadow: 3px 3px 3px #e1e1e2,-3px -3px 3px #fffdfd;
  box-shadow: 3px 3px 3px #e1e1e2,-3px -3px 3px #fffdfd;
}
.services .service h4 {
  color: #50575f;
}
.services .service p {
  color: #737c84;
}

/* --------------------------------------
   8. Skills
-----------------------------------------*/
.skills .skills-content {
  -webkit-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  -mz-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
}
.skills .skills-content h3 {
  color: #50575f;
}
.skills .skills-content h3 i {
  -webkit-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  -mz-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
}
.skills .progress-container .percent {
  color: #737c84;
}
.skills .progress-container .progress {
  background-color: #e2e2e2;
}
.skills .progress-container h4 {
  color: #737c84;
}

/* --------------------------------------
   9. Resume
-----------------------------------------*/
.resume {
  color: #343a40;
}
.resume .resume-content .education,
.resume .resume-content .experience {
  -webkit-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  -mz-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
}
.resume .resume-content .education i,
.resume .resume-content .experience i {
  background: #f4f4f5;
  -webkit-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  -mz-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
}
.resume .resume-content .education i:before,
.resume .resume-content .experience i:before {
  -webkit-box-shadow: 3px 3px 3px #e1e1e2,-3px -3px 3px #fffdfd;
  -mz-box-shadow: 3px 3px 3px #e1e1e2,-3px -3px 3px #fffdfd;
  box-shadow: 3px 3px 3px #e1e1e2,-3px -3px 3px #fffdfd;
}
.resume .resume-content .education .resume-item span,
.resume .resume-content .experience .resume-item span {
  color: #3e3d3d;
}
.resume .resume-content .education .resume-item h4,
.resume .resume-content .experience .resume-item h4 {
  color: #50575f;
}
.resume .resume-content .education .resume-item p,
.resume .resume-content .experience .resume-item p {
  color: #737c84;
}

/* --------------------------------------
   10. Portfolio
-----------------------------------------*/
.portfolio {
  color: #343a40;
}
.portfolio .portfolio-content .item {
  -webkit-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  -mz-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
}
.portfolio .portfolio-content .item:before {
  -webkit-box-shadow: 3px 3px 3px #e1e1e2,-3px -3px 3px #fffdfd;
  -mz-box-shadow: 3px 3px 3px #e1e1e2,-3px -3px 3px #fffdfd;
  box-shadow: 3px 3px 3px #e1e1e2,-3px -3px 3px #fffdfd;
}

/* --------------------------------------
   11. Blog
-----------------------------------------*/
.blog .post .post-content {
  -webkit-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  -mz-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
}
.blog .post .post-content .post-date {
  background: #f4f4f5;
  -webkit-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  -mz-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
}
.blog .post .post-content .post-title h4 {
  color: #50575f;
}
.blog .post .post-content .post-text p {
  color: #737c84;
  border-top: 1px solid #e4e4e6;
}

/* --------------------------------------
   12. Contact
-----------------------------------------*/
.contact .contact-boxes {
  -webkit-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  -mz-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
}
.contact .contact-boxes .contact-box p {
  color: #50575f;
}
.contact .contact-boxes .contact-box p > i {
  background-color: #f4f4f5;
  -webkit-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  -mz-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
}
.contact .contact-boxes .contact-box p span a i {
  -webkit-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  -mz-box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
  box-shadow: inset 3px 3px 3px #e1e1e2,inset -3px -3px 3px #fffdfd;
}
.contact .contact-boxes .contact-box p span a i:hover:after {
  -webkit-box-shadow: 2px 2px 2px #e1e1e2,-2px -2px 2px #fffdfd;
  -mz-box-shadow: 2px 2px 2px #e1e1e2,-2px -2px 2px #fffdfd;
  box-shadow: 2px 2px 2px #e1e1e2,-2px -2px 2px #fffdfd;
}
.contact .contact-boxes .contact-box p span a .fa-facebook {
  color: #3b5998;
}
.contact .contact-boxes .contact-box p span a .fa-twitter {
  color: #1da1f2;
}
.contact .contact-boxes .contact-box p span a .fa-google-plus {
  color: #db4437;
}
.contact .contact-boxes .contact-box p span a .fa-behance {
  color: #0057ff;
}
.contact .contact-form .form-group .form-control {
  background-color: #f4f4f5;
  color: #50575f;
  border-bottom: 1px solid #d7d7ea;
}
.contact .contact-form .form-group label {
  color: #9d9fa2;
}
.contact .contact-form .contact-btn:focus {
  -webkit-box-shadow: inset 6px 6px 6px #e1e1e2,inset -4px -4px 4px #fffdfd;
  -mz-box-shadow: inset 6px 6px 6px #e1e1e2,inset -4px -4px 4px #fffdfd;
  box-shadow: inset 6px 6px 6px #e1e1e2,inset -4px -4px 4px #fffdfd;
}
.contact .copyright {
  color: #50575f;
  font-weight: 600;
  border-top: 1px solid #d7d7ea;
}

/*# sourceMappingURL=light-theme.css.map */