/* Medium devices (landscape tablets, 700px and up) */
@media only screen and (max-width: 700px) {
    	

    /* HERO CONTAINER ------------------------ */

    /* NAV ----------- */

    .hero-nav__menu {
        display: none;
    }

    .hamburger-icon {
        margin-right: 50px;
        font-size: 30px;
        cursor: pointer;
        display: block;
    }

    .hero-nav--responsive {
        height: 0%;
        width: 100%;
        position: fixed;
        z-index: 5;
        top: 0;
        left: 0;
        background-color: rgb(0,0,0);
        background-color: rgba(0, 0, 0, 0.933);
        overflow-y: hidden;
        transition: 0.5s;
        display: flex;
        align-items: center;
    }

    .hero-nav__content--responsive {
        position: relative;
        margin: 20% 0;
        width: 100%;
        text-align: center;
        margin: auto 0;
    }

    .hero-nav--responsive a {
        padding: 8px;
        text-decoration: none;
        font-size: 36px;
        color: #9b9b9b;
        display: block;
        transition: 0.3s;
    }

    .hero-nav--responsive a:hover {
        color: #FE6263;
    }

    .hero-nav--responsive a:focus {
        color: #EB1515;
    }

    .hero-nav--responsive .closebtn {
        position: absolute;
        right: 40px;
        top: -10px;
        font-size: 60px;
    }

      /* HERO CONTENT ---------- */

    .hero-container {
        width: 90%;
        height: fit-content;
        margin: 0 auto;
        justify-content: space-between;
        align-items: center;
        gap: 0;
    }

    .hero-content {
        width: 100%;
    }

    .hero-content--responsive {
        width: fit-content;
    }

    .hero-content__title {
        margin: 50px 0 0 0;
    }

    .hero-container__text {
        margin: 10px 20px;
    }

    .hero-content__contact, .hero-content__btns {
        display: none;
    }

    .hero-content__contact--responsive {
        display: block;
        margin: 30px 0 10px 0;
    }

    .hero-content__contact--responsive .contact-item {
        margin: 10px 0;
    }

    .hero-content__btns--responsive {
        display: flex;
        margin: 20px 0;
        gap: 20px;   
    }

    .hero-content__btns--responsive a {
        padding: 8px;
    }

    .hero-img {
        height: 50vh;
        margin: 20px;
    }

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

      .about__img {
          width: 180px;
      }
    
      /* SKILLBARS --------- */

    .skillbar__title {
        font-size: 12px;
        width: 75px;
    }

    .bar {
        width: 70%;
    }

    /* HOBBIES ----- */

    .hobby-circles {
        width: 75%;
        gap: 20px;
        margin: 0 auto;
    }

    .hobby-circle i {
        padding: 20px;
    }

    /* PROJECTS CONTAINER ------------------- */

    /* WEBS --------- */
    
    .webs__thumb .image {
        width: 12em;
    }

    .fa-circle-arrow-left {
        margin: 5.5em 0;
        left: 20px;
    }

    .fa-circle-arrow-right {
        margin: 5.5em 0;
        right: 20px;
    }

    /* GALLERY ----------- */

    .photogallery-img {
        width: 250px;
    }

    /* FOOTER ------------------------------ */

    .footer-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        justify-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .footer__logo {
        width: 350px;
    }

    .footer-section {
        margin: 0;
    }

    .footer-section:first-of-type { 
        margin-top: 20px;
    }
    .footer-section:last-of-type { 
        margin-bottom: 20px;
    }
}