@media (max-width: 640px) {
	* {
		box-sizing: border-box;
	}
    
    /* Projects page*/
    #projects h1{
        font-size: 2.5em;
    }

    #projects h2{
        margin: 0;
        padding: 0;
        color: #333;
        font-size: 1.2em;
    }

    #projects p{
        margin: 0;
        padding: 5px;
        color: #333;
    }



    /* Image gallery*/
    #overview{
        margin: 2% 10%;
        padding: 3% 3%;
    }

    .responsive{
        padding: 2%;
        float: left;
        width: 49.99999%;	
    }

    .line:after{
        content: "";
        display: table;
        clear:both;
    }
    
    @media only screen and (max-width: 850px){
        .responsive{
            width: 100%;	
            padding: 5%;
        }
    }

    .responsive:hover{
        padding: 0;
        cursor: pointer;
        transition: ease 0.3s;
    }

    .responsive:hover img{
        opacity: 0.7;
        transition: ease 0.3s;
    }




    /* The Modal (background) */
    .modal {
        padding-top: 70px; /* Location of the box */
    }
    
    .modal-content {
        width: 100%;
        max-width: 640px;
    }
    
    #caption{
        max-width: 640px;  
        padding: 1% 3%;
    }

    #caption h2{
        color: #f2f2f2;
        font-size: 30px;
        margin: 2% 0;
    }

    #caption p{
        color: #f2f2f2;
        font-size: 0.9em;
        line-height: 1.5em;
        text-indent: 0;
    }
    
    #caption a{
        color: #f2f2f2;
        font-size: 0.9em;
    }


    /* The Close Button */
    .close {
        top: 5px;
        right: 25px;
    }
}