@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Regular.ttf") format("ttf");
}
html {
  scroll-behavior: smooth;
  font-family: "Lato";
}

#header{
  background-color: #1d212a;
}

#mod-custom116 {
  display: flex;
  justify-content: left;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  color: #fff;
  background-size: cover;
}
#mod-custom116 .bg {
  width: 100%;
}
#mod-custom116 .bg > div {
  margin-left: 5%;
}
#mod-custom116 .bg > div p {
  margin-top: 30px;
}
#mod-custom116 .bg > div p a {
  background-color: #f7812a;
  padding: 15px;
  text-decoration: none;
  color: #fff;
}

.navigation {
  position: fixed;
  z-index: 1;
  width: 100%;
  background-color: #1d212a;
}
@media only screen and (max-width: 767px) and (orientation: portrait) {
  .navigation {
    position: relative;
  }
}
.navigation .nav-item {
  float: left;
}
@media only screen and (max-width: 767px) and (orientation: portrait) {
  .navigation .nav-item {
    width: 100%;
  }
}
.navigation .nav-item a {
  color: #fff;
  text-decoration: none;
}
.navigation .nav-item a:hover {
  background-color: transparent;
}

@media only screen and (max-width: 575.98px) and (orientation: portrait) {
  h1 {
    font-size: 2rem;
  }
}

#projects {
  background-color: #1d212a;
  color: #fff;
  padding-bottom: 50px;
}
@media only screen and (max-width: 575.98px) and (orientation: portrait) {
  #projects {

  }
}
@media only screen and (max-width: 991.98px) and (orientation: landscape) {
  #projects {

  }
}
#projects h1 {
  border-bottom: 3px solid #f7812a;
  float: left;
  padding-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 3px;
}
#projects h2 {
  padding-bottom: 10px;
}
#projects #mod-custom117 {
  margin-top: 150px;
}
@media only screen and (max-width: 575.98px) and (orientation: portrait) {
  #projects #mod-custom117 {
    margin-top: 50px;
  }
}
@media only screen and (max-width: 991.98px) and (orientation: landscape) {
  #projects #mod-custom117 {
    margin-top: 50px;
  }
}
#projects > div:nth-of-type(2) {
  margin-top: 50px;
}
#projects > div:nth-of-type(2) h2 {
  float: left;
}
#projects > div:nth-of-type(2) ul {
  float: left;
}
@media only screen and (max-width: 575.98px) and (orientation: portrait) {
  #projects > div:nth-of-type(2) ul {
    width: 100%;
  }
}
#projects #mod-custom121 h2 {
  border-bottom: 3px solid #6ea4a4;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) and (orientation: landscape) {
  #projects #mod-custom121 ul {
    width: 100%;
  }
}
#projects #mod-custom122 h2 {
  border-bottom: 3px solid #e0308b;
}
@media only screen and (max-width: 575.98px) and (orientation: portrait) {
  #projects #mod-custom122 h2 {
    margin-top: 50px;
  }
}
#projects #mod-custom122 p {
  margin-top: 10px;
  margin-left: 40px;
  float: left;
}
#projects #mod-custom122 p a {
  background-color: #e0308b;
  padding: 15px;
  text-decoration: none;
  color: #fff;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
  #projects #mod-custom122 p a {
    display: none;
  }
}
@media only screen and (max-width: 991.98px) and (orientation: landscape) {
  #projects #mod-custom122 p a {
    display: none;
  }
}
#projects #mod-custom123 h2 {
  border-bottom: 3px solid #d4ce9a;
}
@media only screen and (max-width: 575.98px) and (orientation: portrait) {
  #projects #mod-custom123 h2 {
    margin-top: 50px;
  }
}

@media only screen and (max-width: 575.98px) and (orientation: portrait) {
  #skillset {


  }
}
@media only screen and (max-width: 991.98px) and (orientation: landscape) {
  #skillset {

  }
}
@media only screen and (max-width: 575.98px) and (orientation: portrait) {
  #skillset .container {
    padding-left: 0px;
    padding-right: 0px;
  }
}
#skillset h1 {
  letter-spacing: 3px;
  border-bottom: 3px solid #f7812a;
  float: left;
  margin-top: 150px;
  margin-bottom: 50px;
  text-transform: uppercase;
}
@media only screen and (max-width: 575.98px) and (orientation: portrait) {
  #skillset h1 {
    margin-top: 50px;
    margin-left: 15px;
  }
}
@media only screen and (max-width: 991.98px) and (orientation: landscape) {
  #skillset h1 {
    margin-top: 50px;
  }
}
#skillset .table .thead-dark th {
  background-color: #1d212a;
}

#contact {
  background-color: #1d212a;
}
@media only screen and (max-width: 575.98px) and (orientation: portrait) {
  #contact {
    
  }
}
@media only screen and (max-width: 991.98px) and (orientation: landscape) {
  #contact {
  
  }
}
#contact #mod-custom128 {
  width: 100%;
  float: left;
}
#contact h1 {
  color: #fff;
  margin-top: 150px;
  border-bottom: 3px solid #f7812a;
  float: left;
  letter-spacing: 3px;
  text-transform: uppercase;
}
@media only screen and (max-width: 575.98px) and (orientation: portrait) {
  #contact h1 {
    margin-top: 50px;
  }
}
@media only screen and (max-width: 991.98px) and (orientation: landscape) {
  #contact h1 {
    margin-top: 50px;
  }
}
#contact label {
  color: #fff;
  margin-top: 0.5rem;
  margin-bottom: 0px;
}
#contact textarea {
  height: 100%;
}
#contact button {
  margin-top: 0.5rem;
  background-color: #1d212a;
  border-color: #f7812a;
}
@media only screen and (max-width: 575.98px) and (orientation: portrait) {
  #contact button {
    margin-top: 50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) and (orientation: landscape) {
  #contact button {
    margin-top: 50px;
  }
}

footer {
  background-color: #1d212a;
}
footer a {
  color: #fff;
  text-decoration: none;
}
footer a:hover {
  text-decoration: none;
  color: #fff;
}

#skillset .col-lg-12{
  float: left;
}

#skillset{
  width: 100%;
  background-color: #fff;
  float: left;
}

#skillset .col-lg-12 .col-4{
  float: left;
}

#skillset div > div:nth-of-type(2) .col-4{
  background-color: #1d212a;
  color: #fff;
  padding: 20px;
  margin-bottom: 20px;
}
#skillset div > div {padding: 10px;}


#mobile{
  width: 50px;
  height: 30px;
  background-color: #1d212a;
  color: #fff;
  display: none;

}

@media only screen and (max-width: 1023px) {
  .mobile {
    display: block !important;
  }

  .navigation {
    display: none;
  }

  .navigation li {
    width: 100%;
  }
}

#contact{
  width: 100%;
  float: left;
}
/*# sourceMappingURL=template.css.map */

@media only screen and (min-width: 1023px){
  #projects div:nth-of-type(2){
    margin-bottom: 50px;
  }
}