/*
 Theme Name:   Theme from Denis
 Description:  Wordpress Theme From Denis
 Author:       Denis R
 Version: 1.0
*/

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html,
  body {
    font-family: "Open Sans";
    font-weight: 400;
    font-size: 14px;
    color: #222;
    line-height: normal;
    min-height: 100vh;
    overflow-x: hidden;
  }

  body {
    position: relative;
    overflow-y: hidden;
  }

  a {
    text-decoration: none !important;
  }

  a:hover {
  }

  img {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
  }

  button {
    cursor: pointer;
  }
  
  .fa {
    font-family: fontAwesome;
  }

  h1, h2, h3, h4, h6 {

  }

  p {
    margin-bottom: 10px;
  }

  .flexed {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
  }

  .flexed--between {
      justify-content: space-between;
  }

  .flexed--around {
      justify-content: space-around;
  }

  .flexed--top {
      align-items: flex-start;
  }

  .portfolio-container-wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
  }

  .portfolio-item {
      width: 340px;
      margin-bottom: 40px;
  }

  .portfolio-item--desc2 {
      background: #333;
      padding: 10px;
  }

  ul.post-categories {
      display: flex;
      justify-content: space-around;
  }

  ul.post-categories a {
      color: #bbb;
  }

  .portfolio-item--desc-in2 {
      text-align: center;
  }

  .portfolio-item--content {
    margin-bottom: -5px;
  }

  .single-portfolio section#home {
      height: 200px;
  }

  .single-portfolio .section-about {
    margin-top: 0 !important;
    opacity: 1 !important;
    visibility: visible;
  }

  .section-about .portfolio-img img {
      max-width: 100%;
      width: 600px;
      height: auto;
      border-radius: 10px;
      margin: 25px auto;
  }

  .portfolio-info {
      font-size: 21px;
  }

  .portfolio-links a {
      display: inline-block;
      margin: 10px 0;
      background: #1D1209;
      color: #fff;
      padding: 10px;
      border-radius: 5px;
      font-size: 16px;
  }

  .ng-scope {
      margin-bottom: 25px;
  }

  .ng-scope strong {
      color: #333;
      font-weight: 700;
  }

  .p-xs-top span {
      margin-right: 20px;
      color: #fff;
      font-size: 16px;
      background: #676767;
      padding: 5px 10px;
      position: relative;
  }

  p.m-md-bottom {
      line-height: 32px;
  }

  .p-xs-top span:not(:last-child):after {content: ',';position: absolute;right: -5px;color: #000;font-size: 20px;bottom: -5px;}

  .single-portfolio nav.navbar {
    display: block !important;
    opacity: 1 !important;
}

.about-desc-cv {
    margin-top: 50px;
}

.about-desc-cv a {
    color: #666;
    border: 1px solid;
    padding: 15px 25px;
    border-radius: 4px;
    transition: 0.2s;
}

.about-desc-cv a i {
    padding-right: 5px;
}

.about-desc-cv a:hover {
    background: #666;
    color: #fff;
}

ul.post-categories {
    width: 100%;
}

.portfolio-item--desc-in2 {
    width: 100%;
}

a.portfolio-item--content {
    position: relative;
}

a.portfolio-item--content:hover:after {content: 'View Project';padding: 12px 30px;font-size: 12px;font-weight: 400;transition: all 0.5s;letter-spacing: 2px;text-transform: uppercase;outline: none !important;box-shadow: 0px 10px 40px 0px rgba(0,0,0,0.2);border-radius: 2px;min-width: 140px;background-color: transparent;color: #fff;border: 1px solid rgba(255, 255, 255, 0.8);position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 10;}

a.portfolio-item--content:hover:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.cta-back {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.section-freelance .container {
    position: relative;
    z-index: 5;
}

.section-freelance:after {
    z-index: 2;
}

.cta-back img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.services-list-front {
    position: relative;
    overflow: hidden;
}

.services-list-front-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.services-list-front-img img {
    /* transform: scale(1.3); */
    object-fit: cover;
    height: 100%;
}

footer.footer.section.section-light {
    padding: 0px 0 40px;
}

.single-portfolio h1 {
    text-align: center;
}

.single-portfolio .navbar-nav .nav-link.active {
  color: rgba(0,0,0,.7) !important;
}

.single-portfolio .section-about-wrap {
  padding: 50px 15px;
}

.single-portfolio footer.footer.section.section-light {
  padding: 20px 0;
}

@media screen and (max-width: 1200px) {
  .portfolio-container-wrapper {
      justify-content: center;
  }

  .portfolio-item {
      margin: 20px;
  }
  .overlay h1 {
      font-size: 78px;
  }
  .p-xs-top {
      display: flex;
      flex-wrap: wrap;
  }

  .p-xs-top > span {
      margin-bottom: 20px;
  }
}

@media screen and (max-width: 768px) {
  .section-contact .section-subHead {
    text-align: center;
  }
  .section-about-wrap > .row {
      display: flex;
      flex-direction: column-reverse;
  }

  .section-about-wrap > .row .col-md-5 {
      display: block !important;
      margin-top: -200px;
      margin-bottom: 30px;
  }

  .section-about img {
      height: auto;
  }
  #resume.section-dark .b-box {
      height: 90%;
  }
}

@media screen and (max-width: 500px) {
  .portfolio-item {
      margin: 20px 0;
      max-width: 300px;
  }

  .portfolio-item--img img {
      height: 220px;
  }

  ul.post-categories {
      width: 100%;
      display: block;
  }
  .overlay h1 {
      font-size: 50px;
  }
}