@media only screen and (max-width: 576px) { 
    /* cover */
  .content {
      display: flex;
      background-image: url('/asset/1x4.jpg');
      background-size: cover;
      height: 100vh;
      color: rgb(214, 214, 214) !important;
  }
  #sideBar {
      border: none !important;
  }
  .content__main {
    display: flex;
    flex-direction: column;
    margin-top: 100px;
  }
  .content__main .foto #headPhoto {
      display: none;
  }
  .content__main .foto-responsive .foto-mobile {
    display: block;
    width: 200px;
  }
  .content__main .foto-responsive {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .content__main h3,
  .content__main p {
      color: black;
  }

  #namaText {
      position: relative !important;
  }
  #namaText h1 {
      letter-spacing: 8px !important;
      line-height: 20px;
  }
  #namaText .animate{
      font-size: 30px;
  }

  .content__main .text {
      margin-top: 80px !important;
  }

  .content__main .text p {
      margin-top: 30px !important;
      padding-right: 40px !important;
      width: 100% !important;
      line-height: 25px !important;
  }

  .typed-cursor{
    font-size: 30px;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}

  .medsos img {
      width: 24px;
  }

  .toggleWeb {
      position: absolute;
      z-index: 2;
  }
  .menu.show {
      position: absolute;
  }
  .expandSidebar {
      width: 1% !important;
  }
  .content__sidebar {
      width: 1% !important;
  }
  .menu {
    position: absolute;
    top: 10%;
    z-index: 2;
  }
  .menu li a {
      color: white !important;
  }
  .menu li .nav-active {
      color: #04997e !important;
  }
  .bgNavMob {
      z-index: 1;
  }
  .bgNavMob#bgNav {
    height: 100vh;
    background-color: #222222;
    position: absolute;
    width: 70%;
    transition: 0.8s linear;
  }

  /* about */
  .about {
    display: flex;
    flex-direction: column;
  }
  .about .foto {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    margin-top: 80px;
  }
  .about .foto .foto-desktop {
      display: none;
  }
  .about #aboutContent p { 
      margin-top: 35px !important;
  }
  .about #aboutContent .btn-hire { 
      margin-top: 100px !important;
  }
  .about #aboutContent { 
      padding: 35px !important;
      margin-top: 0 !important;
  }
  .btn-hire #hireBtn {
      padding: 5px 15px !important;
  }

  /* skill */ 
  .skill #title {
      margin: 0 !important;
      padding: 35px !important;
      padding-bottom: 20px !important;
  }
  .skill .album {
      padding: 0 !important;
  }
  .skill .album #appImg {
      margin-left: 16px;
  }
  .skill .album #webImg {
      margin-left: 32px !important;
  }
  .skill .album #fullImg {
      margin-left: 36px !important;
  }
  .skill .album #engImg {
      margin-left: 32px !important;
  }

  /* project */
  .project #title {
      margin: 0 !important;
      padding: 35px !important;
      padding-bottom: 20px !important;
  }
  .tab .nav {
      margin: 0 8px;
  }

  .carousel-inner img {
      width: inherit;
  }
  .project .album {
      display: none;
  }

  /* teknologi */
  .skillTeknologi #title {
      margin: 0 !important;
      padding: 35px !important;
      padding-bottom: 20px !important;
  }
  .skillTeknologi .album .col-6 {
      text-align: center;
  }

  /* footer */
  .footer #footerContent {
      margin: 0 !important;
  }
}