@media screen and (max-width: 700px) {
    
    header .logo{
       width: 50%;
        display: block;
        float: none;  
        margin: 0 auto;
    }
    
    header nav{
        width:100%;
        display: block;
        text-align:center;
        height: auto;
    }
    header nav a{
        display: inline-block;
        font-size: 1.2em;
        width: 40%;
        border: none;
        text-align: center;
        line-height:80px;
        margin:0;
    }
    .btn_home {
        display: none;
    }
    .content {
    width:90%;
    padding: 0px 5%;
    margin:0 auto;
    }
    
    .button { 
        width:97%;
    }
    .button a {
    display:block;
    text-align: center;

    font-size:1em;
    }

    #intro .keyline_large{
        width: 35px;
        height: 3px;
        background: #DB003E;
        margin: 0 auto 25px auto;
    }
    /*INTRO*/
    #intro .content_intro {
        padding-top:20px;
        padding-bottom:10px;
    }
    
    #intro {
        padding-top:30px;
        padding-bottom:10px;
    }
     
    #intro .txt_intro {
        width:90%;
        padding: 5%; 
          
    }
    #intro h1{ 
        font-size: 1.9em; 
        text-align: center;
        
    }
    #intro p{
    font-size:0.9em;
        text-align: center;
       
    }
    
    /**/
    #projects .project_detail, #projects_list .project_detail  {
        width: 95%;
        display: block;
        margin-right: 0px;
        margin-bottom: 16px;
        color: #333;
        border: none;
        text-align: left;
    }

    
    #projects .project_detail img, #projects_list .project_detail img{
        width: 35%;
        margin:0 15px 0 0;
        display: inline-block;
        vertical-align: middle;
    }
    #projects .project_detail .project_title, .project_detail .project_title {
        display: inline-block;
        vertical-align: middle;
        width: 55%;
    }
    #projects .project_detail .category, #projects_list .project_detail .category {
    font-size: 12px;
        line-height: 12px;
    color: #666;
    }
    #projects .project_detail h3, #projects_list .project_detail h3 {
        font-size: 16px;
        margin: 0px;

    }
#projects .project_detail p, #projects_list .project_detail p {
    margin:  10px 0px 15px 0px;

}
    
    #project_page .img_small_right, #project_page .img_med_right, #project_page .img_med_left, #project_page .img_half, #project_page .img_3 {

    float: none;
    width: 100%;
    margin-left: 0;
    margin-bottom: 10px;
        margin-top: 10px;

    }
    
    #project_page .box_highlights {
    float: none;
    width: 92%;
    margin-left: 0;
    margin-bottom: 0;
    }
    
    .project_overview .column {
    width: 100%;    
    float: none;
}
.project_overview p.right_col {
    padding-left: 0;
    float: none;
    border-left: none;
}
    
    /*SUMMARY*/
    
    #summary h2 {
    font-size:1.8em;
    
    }
    
    #summary .content{
        width: 86%;
    }
    #summary ul  {
        color: #444;
        float: none;
        font-size: 1em;
        margin-right: 0;
        font-weight: 300;
        width: 100%;
        margin-left: 0;
        list-style-type: none;
        margin-bottom: 20px;
        text-align: center;
    }
    
    #summary .button { 
        width:90%;
        margin-top: 20px;
    }
    #summary .button a {
        font-size:1em;
        display: inline-block;
        width:85%;
        margin-top: 20px;
    }

    #summary .button a .ic_dl {
      display: none;
        
    }
    
    
    .project_page_content_intro .project_type{
        text-align: center;
        display: block;
    }
    /*FOOTER*/
    footer {
	padding: 2.5em 0 0 0;
    text-align: center;
    }
    
    footer .contact {
    padding:0 0 2em 0;
    border-left:none;

    }
    footer p{
    font-size:0.9em;
    }
    footer h2{
    font-size:1.4em;
    color:#ff3c7c;
    }
    footer a{
        font-size:1.2em;
        line-height: 40px;
    }
    footer p a.email:hover{
        background-position:-35px center;
        padding-left:0;
    }
    .illu_footer {
    position:relative;
    width: 80%;
    margin-bottom: -5px;
    }
    
   
    
    /*ABOUT*/
    .about-categories {
        text-align: center;
        background: rgba(255,255,255,0.5);
        border: 1px solid rgba(255,255,255,0.7);
        border-radius: 10px;
        margin: 8px 0;
        padding: 20px;
        width: 90%;
        font-size: 14px;
        line-height: 150%;
        display: inline-block;
        vertical-align: top;
        color: #444;
        box-shadow: 0 0 20px rgba(120,120,120,0.1)
    }
}