/* Small tablet to big tablet: from 768px to 1023px */
@media only screen and (max-width: 1023px){
    .portfolio__entry { margin-top: 10%}
    .portfolio__nav { margin: 3% auto 2% auto; }
    .portfolio__nav_thumb { width: 25%;}
}

/* Small phones small tablets: from 481px to 767px */
@media only screen and (max-width: 787px){
    .portfolio__nav { margin: 5% auto 2% auto; }
    .portfolio__nav_thumb { width: 24%;}
}

/* Screen limit for mobile nav and JS animations */
@media only screen and (max-width: 620px)
 {
     #logo { display: none; }
     
     #circle-text { display: none; }
     
     .hidden-nav { display: none; }
     
     .mobile-nav-icon {
         display: inline-block;
         font-size: 15px;
     }
    
     .sticky .main-nav li a{
         margin-right: 500px;
     }
     
     .sticky .main-nav li{
         padding-right: 20px;
         font-weight: 400;
         font-size: 100%;
         margin: 5%;
     }
     
    .contact:hover {
         color: #b10235;
     }
     
     .sticky .contact .tooltip {
        display: none;
     }
     
     .sticky .contact {
         cursor: none;
     }
     
     .home-content { 
         position: relative; 
         top: 35%;
         margin-left: -4%;
     }
     
     #js--home-nav .mobile-nav-icon{
         display: none;
     }
     #js--home-nav .hidden-nav {
         font-size: 120%;
         display: block;
         width: 120%;
         margin-top: 20%;
         margin-left: -7%;
     }
     
     #js--sticky-nav .mobile-nav-icon{
         display: block;
     }
     
     /*---------Portfolio-Mobile--------*/
     #portfolio-section h1 {
         font-size: 50px;
     }
    
    .portfolio__entry{
        flex-direction: column;
        margin-bottom: 50px;
    }
     
     .portfolio__entry h3{
         font-size: 25px;
         padding: 4% 0;
     }
    
    .entry__img{
        width: 100%;
        border-radius: 5px 5px 0 0;
    }
    
    .entry__content{
        font-size: 150%;
        padding-bottom: 25px;
    }
     
     .entry__links {
         border-radius: 0 0 5px 5px;
     }
    
    .entry__links h3 {
        padding: 4% 0;
     }
     
    .entry__links ul{
        font-size: 150%;
        padding-top: 0;
     }
     
     /*------Portfolio-Mobile------*/
     #portfolio-section {
         overflow-y: auto;
     }
     .portfolio {
         display:table;
     }
     .portfolio__entry {
         display: block;
         margin-bottom: 7%;
     }
     .entry__description{
         padding: 0 3%;
     }
     .entry__description h3{
        font-size: 140%;
     }
     .entry__links ul li{
        margin-bottom: 3%;
     }
     .portfolio__nav {
         display: none;
     }
     .portfolio__more {
         font-size: 120%;
         text-align: center;
     }
     
     /*---------About-Mobile--------*/
     .profile {
         flex-direction: column;
         padding-top: 30px;
     }
     
     .profile__img img {
         width: 45%;
     }
     
     .profile__links {
        text-align: right;
        margin: 5% 10% 0 0;
     }
     
     .resume-btn {
         font-size: 20px;
         padding: 2% 4%;
     }
     
     .profile__bio {
         font-size: 150%;
         padding-bottom: 20px;
         border-right: 0px;
         border-bottom:4px solid black;
         border-radius: 0px;
     }
}

/* Small phones: from 0 to 480px */
@media only screen and (max-width: 480px) {
    #wrapper {
        min-width: 480px;
    }
    page {
        width: 100%;
    }
    .home-content {
        font-size: 150%;
        display: block;
        top: 20%;
        width: 80%;
        margin-left: 3%;
    }
    .name {
        font-size: 150%;
    }
    
    #portfolio-section h1{
        font-size: 40px;
    }
    
    #social-bottom { 
    display: none}
}