body, html {
  height: 100%;
  margin: 0px;
  font-family: 'Quicksand', sans-serif;
  overflow-x: hidden;
}

/* -----------------------------------------------------------------------------
  STYLE
------------------------------------------------------------------------------*/

.row {
  margin: 0px !important;
}

.p-fixed {
  position: fixed;
}

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

img:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  transition: 1.2s ease;
}

.btn-primary {
  border: none !important;
  border-radius: 0px !important;
  background-color: #000814;
}

.btn-primary:hover {
  background-color: #000814;
}

.btn-primary:focus {
  background-color: #000814 !important;
}

#avatar {
  height: auto;
  width: 75%;
}

/* -----------------------------------------------------------------------------
  BACKGROUND COLORS
------------------------------------------------------------------------------*/

.bg-black {
  background-color: #000814;
}

.bg-grey {
  background-color: rgba(141, 141, 141, 0.1)
}

/* -----------------------------------------------------------------------------
  COLORS
------------------------------------------------------------------------------*/

.c-dark {
  color: #000814;
}

.c-grey {
  color: #8b9096 !important;
}

.c-white {
  color: #ffffff;
}

/* -----------------------------------------------------------------------------
  FONT STYLE & SIZE
------------------------------------------------------------------------------*/

h1 {
  font-size: 1.6rem !important;
}

h2 {
  font-size: 1.3rem !important;
}

.uppercase {
  text-transform: uppercase;
}

.font-bold {
  font-weight: 700;
}

.font-italic {
  font-style: italic;
}

.font-normal {
  font-weight: 500;
}

.font-light {
  font-weight: 400;
}

.font-tiny {
  font-weight: 300;
}

.name-link, .name-link:hover {
  color: #000814;
  text-decoration: none;
}

/* -----------------------------------------------------------------------------
  ABOUT
------------------------------------------------------------------------------*/

#about {
  padding: 0px 180px 130px 180px;
}

#navigation-project {
  padding: 0px 180px 0px 180px;
}

.navigation {
  margin: 50px 0px 100px 0px !important;
  padding: 0px 15px 0px 15px;
}

.navigation > .col-12 {
  padding: 0px;
}

.left-box {
  align-items: center;
  justify-content: center;
  padding-bottom: 30px;
}

#heading {
  width: 100%;
  text-align: center;
}

.right-box {
  justify-content: center;
}

.navigation-c-p {
  text-align: center;
}

.navigation-links, .social-links {
  font-size: 1.1rem;
  margin-top: 30px;
  cursor: pointer;
}

.navigation-links > a {
  margin: 0px 8px 0px 8px;
  color: #000814;
  text-decoration: none;
}

.navigation-links > a:hover {
  margin: 0px 8px 0px 8px;
  color: #000814;
  text-decoration: none;
}

.fab:hover, .far:hover {
  color: #000814 !important;
}

.mr-custom  {
  margin-right: 30px;
}

#projects > .row > .col-6 {
  padding: 0px 15px 0px 15px;
}

.card {
  margin: 30px 0px 0px 0px;
  border-radius: 0px !important;
}

.card-img {
  border-radius: 0px !important;
}

/* -----------------------------------------------------------------------------
  SERVICES
------------------------------------------------------------------------------*/

#services {
  margin-top: 20px;
}

/* -----------------------------------------------------------------------------
  ANIMATIONS
------------------------------------------------------------------------------*/

.slideInRight {
  -webkit-animation: slideInRight 1s both;
  animation:  slideInRight 1s both;
}

@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
} 

.slideOutRight {
  -webkit-animation: slideOutRight 1s both;
  animation: slideOutRight 1s both;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }

}

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
} 

/* -----------------------------------------------------------------------------
  MEDIA QUERY
------------------------------------------------------------------------------*/

/***** For xl device > 1199px *****/

@media all and (min-width: 1199px) {

  #heading {
    text-align: left;
  }

  .left-box {
    align-items: center;
    justify-content: start;
  }
  
  .right-box {
    justify-content: flex-end;
  }

  .navigation-c-p {
    display: none;
  }

  .navigation-r-p {
    display: block !important;
  }

}

/***** For lg device < 1199px *****/

@media all and (min-width: 992px) and (max-width: 1199px) {

  .navigation {
    margin: 50px 0px 80px 0px !important;
    padding: 0px 15px 0px 15px;
  }

  #services {
    padding-top: 30px;
    text-align: center;
  }

  .services-title {
    font-size: 1.1rem !important;
  }

}

/***** For md device < 991px *****/

@media all and (min-width: 768px) and (max-width: 991px) { 

  #about {
    padding: 0px 100px 80px 100px;
  }
  

  #navigation-project {
    padding: 0px 100px 0px 100px;
  }

  .navigation {
    margin: 50px 0px 50px 0px !important;
    padding: 0px 15px 0px 15px;
  }

  #services {
    padding-top: 30px;
    text-align: center;
  }

  .services-title {
    font-size: 1.1rem !important;
  }

}

/***** For sm device < 767px *****/

@media all and (min-width: 576px) and (max-width: 767px) { 
  
  #about {
    padding: 0px;
  }

  #navigation-project {
    padding: 0px;
  }

  .navigation {
    margin: 50px 0px 50px 0px !important;
    padding: 0px 15px 0px 15px;
  }

  #projects, #services {
    padding: 0px 100px 80px 100px;
  }

  #project-next-steps {
    margin-bottom: 80px !important;
  }

  #services {
    padding-top: 30px;
    text-align: center;
  }

  .services-title {
    font-size: 1.1rem !important;
  }

}

/***** For sm device < 575px *****/

@media all and (min-width: 437px) and (max-width: 575px) {

  #about {
    padding: 0px;
  }

  #navigation-project {
    padding: 0px;
  }

  .navigation {
    margin: 50px 0px 50px 0px !important;
    padding: 0px 15px 0px 15px;
  }

  .navigation-links, .social-links {
    font-size: 1rem;
  }

  .mr-custom  {
    margin-right: 20px;
  }

  #projects, #services {
    padding: 0px 50px 80px 50px;
  }

  #services {
    padding-top: 30px;
    text-align: center;
  }

  .services-title {
    font-size: 1rem !important;
  }

  #project-next-steps {
    margin-bottom: 80px !important;
  }

}

/***** For xs device < 436px *****/

@media (max-width: 436px) {

  #about {
    padding: 0px;
  }

  #navigation-project {
    padding: 0px;
  }

  .navigation {
    margin: 50px 0px 50px 0px !important;
    padding: 0px 15px 0px 15px;
  }

  .navigation-links, .social-links {
    font-size: 1rem;
  }

  .mr-custom  {
    margin-right: 20px;
  }

  #projects, #services {
    padding: 0px 30px 80px 30px;
  }

  #services {
    padding-top: 30px;
    text-align: center;
  }

  .services-title {
    font-size: 1rem !important;
  }

  .services-name {
    font-size: 0.8rem !important;
  }

  #project-next-steps {
    margin-bottom: 80px !important;
  }

}