/********** General **********/
a {
   transition: all .3s ease-in-out !important;
}
/********** General End **********/


/********** Header **********/
body header {
   background: url(../img/banner.jpg) no-repeat bottom right;
   background-size: cover;
}
body .intro-text {
   padding-left: 20px;
   padding-right: 20px;
}
/********** Header End **********/


/********** About **********/
body #about-section p:first-child {
   margin-top: 0;
}
/********** About End **********/


/********** Portfolio **********/
#works-section .categories {
   padding-bottom: 10px;
}
#works-section .type {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}
#works-section .type li {
   display: flex;
   margin-bottom: 20px;
}
/********** Portfolio End **********/


/********** 991px and below **********/
@media (max-width: 991px) {
   /***** Header *****/
   body #menu.on {
      padding: 0 20px !important;
   }
   body #menu .container {
      width: 100%;
      padding: 0;
   }
   body #menu a.navbar-brand {
      font-size: 18px;
   }
   body .nav > li > a {
      padding-left: 9px;
      padding-right: 9px;
   }
   /***** Header End *****/
}
/********** 991px and below End **********/


/********** 576px and below **********/
@media (max-width: 576px) {
   /***** Header *****/
   body .intro-text h1 {
      font-size: 40px;
   }
   body header p {
      font-size: 18px;
   }
   /***** Header End *****/
}
/********** 576px and below End **********/


/********** 390px and below **********/
@media (max-width: 390px) {
   /***** Header *****/
   body #menu a.navbar-brand {
      font-size: 16px;
   }
   body .intro-text h1 {
      font-size: 35px;
   }
   /***** Header End *****/
}
/********** 390px and below End **********/


/********** 390px and below **********/
@media (max-width: 390px) {
   /***** Header *****/
   body #menu a.navbar-brand {
      font-size: 14px;
   }
   body .navbar-toggle {
      padding: 6px 6px;
   }
   /***** Header End *****/
}
/********** 390px and below End **********/