@media (max-width: 1440px) {
/*
    #p1{
    transform-origin: top left;
         width:  7vw;
       right: -10vw;
    top: 35vh;
    
}

#p2{
    transform-origin: top left;
 width: 5vw;
    right: -25vw;
    top: 30vh;
    
}
#p3{
     transform-origin: top left;
     width: 1vw;
    

    
    top: 60vh;
    right: 20vw;
}

    #p4{
    left: 40vw;
    top: 60vh;
    transform-origin: top left;
}
#p5{
    left: 50vw;
    top: 55vh;
    transform-origin: top left;
}



*/
    
    
}
    
@media (max-width: 1200px) {
    #intro h1{
        font-size: 2.5em;
    }
/*
    #p3{
        right: 25vw;
    }
*/
    .project-title h1{
        font-size: 2em !important;
    }
    .cat {
        font-size: 0.8em;
    }
    .count p{
         font-size: 0.8em;
    }
}

@media (max-width: 992px) {}

@media (max-width: 768px) {
     #p1,#p2{ 
        display: none;
    }
/*
    #p1{
      top: 50vh;
        width: 9vw;
    }
    
    #p2{
       top: 50vh; 
         width: 4vw;
    }
    
    #p3{
       top: 73vh;
         width: 3vw;
    }
    
    #p4 {
        
      width: 2vw;  
        
    }
    
     #p5 {
        
        width: 4vw;
        
    }
    
     #p6 {
    
         width: 8vw;
        
        
    }
    
     #p7 {
        
       width: 5vw; 
        
    }
*/
    
    .project-info-wrapper{
        top: 100%;
        background-color: white;
        color: #171819;
        position: relative;
    }
    
    .project-info {
       opacity: 1; 
        background-color: white;
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        transform: translateY(-15%);
    -webkit-transform: translateY(-15%);
    -moz-transform: translateY(-15%);
    -ms-transform: translateY(-15%);
    -o-transform: translateY(-15%);
        
        border-radius: 0 0 5px 5px;
        padding: 15px;
   
        
    }
    
    .project-wrapper:hover .project-info {
 color: #171819 !important;
    opacity: 1;
    
        
}
.hp:hover {
    transform: none;
    z-index: 1000;
}
    
 .persona:hover {
    transform: none;
    z-index: 1000;
    position: relative;
}   
    
    
    
    
    
    
    
    
    
    
    
       .project-title h1{
        font-size: 2em !important;
    }
    .cat p{
     font-size: 1.3em;
    }
    .count p{
        display: none;
    }
    .overview{
        padding:20px;
    }
    .work-post-title h1{
        font-size: 2.4em !important;
    }
    .overview h2{
        font-size: 1.5em !important;
    }
    .work-post-title h4{
        font-size: 1.2em !important;
    }
    .post-text{
    padding: 0 10% !important;
    }
    #thumb img{
    padding: 120px 0;
    
}
    
    
    
   /*beat the heat*/
    .b-container{
        
    }
    .b-overview{
        padding: 25px 0;
    }
    .bth-m{
        margin-top: 25px;
    }
    .bth-video{
        width:100% ;
    }
    .bth-process{
        width:100%;
    }
    
    
    /*beat the heat*/
    
    
    /* chapter*/
    
    .c-overview{
        padding: 25px 0;
    }
    .c-video{
        width: 75%;
    }
    .c-container{
        padding: 50px 0;
    }
    /* chapter*/
    
    
    
    
}

@media (max-width: 576px) {
    .navbar-logo{
        font-size: 25px;
    
        
    }
    
    #intro h1{
        
        font-size: 25px;
    }
    #intro h3{
        font-size: 1.4em !important;
    }
    .abt-img{
 background: none !important;
        
}
    .abt-img img{
        display: inline-block;
        width: 100%;
    }
  .about h2{
      font-weight: 600;
    left: 0;
    top: 0;
    
} 
    
/*
    #p1{
      top: 65vh;  
    }
    
    #p2{
       top: 65vh; 
    }
    #p3{
        width: 3px;
        
    }
    #p4{
        top: 60vh;
    }
    #p5{
       top: 57vh; 
    }
*/
    
    
    .project-title h1{
 font-size:1.3em !important;
        text-align: left;
    }
 .cat p{
     line-height: 1.5em;
     font-size: 1em;
     text-align: left !important;
    }
    .count p{
        display: none;
    }
}