@media only screen and (max-width: 1200px) {
    div.code {
        font-size: 9pt;
        padding: 10px 15px 10px 15px;
    }

    div.javascript:before {
        display: none;
    }
}

@media only screen and (max-width: 900px) {
    body {
        display: block;
        /*min-width: 100px;*/
        background: #333533;
    }

    h1 {
       margin-top: 100px;
       margin-bottom: 50px;
    }

    h1#coding_h1 {
       visibility: hidden;
    }

    h1#coding_h1:after {
        position: absolute;
        content:'phil.me.it'; 
        visibility: visible;
        top: 0px;
        left: 0px;
    }

    h1#design_h1 {
       display: none;
    }

    div.bg_column2 {
        display: none;
    }

    div.row2 {
        margin-top: 50px;
    }

    div.row3 {
        margin-top: 50px;
    }

    div.row4 {
        margin-top: 50px;
        min-height: 1px;
    }

    div.row5 {
        margin-top: 50px;
    }

    div.row6 {
        margin-top: 40px;
    }

    div.row6 .code{
        margin-top: 240px;
    }

    div.row6 a img {
        margin: 0px 20px 0px 20px;
    }

    div.column_wrapper img {
        width: 96%;
        border: 10px solid #f8f8f8;
    }

    div#card img {
        width: 100%;
        /*max-width: 600px;*/
    }
   
    div.bg_column {
        height: 0px;
    }

    div.bg_column1 {
        background: #333533;
        color: #e8eddf;
    }


    div.column_wrapper { 
        display: block;
    }
    
    div.column1 {
        color: #e8eddf;
    }

    div.text_wrapper_column1 {
        text-align: left;
        margin-left: 8%;
        color: #e8eddf;
    }

    div.text_wrapper_column2 {
       margin-right: 8%;
    }

    div.code {
        position: relative;
        padding-left: 8%;
        margin-top: 30px;
        font-size: 10pt;
        padding: 15px 20px 15px 20px;
    }

    div.javascript:before {
        display: block;
    }
    
    div.column_wrapper img.overlay1 {
        width: 96%;
    }

    div.column_wrapper img.overlay2 {
        width: 96%;
    }

    div.footer_right {
        display: none;
    }

    div.footer_left {
        position: relative;
        width: 100%;
        /*border: 1px solid red;*/
        background: #242423; 
        float: left;
        height: 480px;
    }

    div.footer_left img {
        position: absolute;
        margin: 40px 40px 0px 0px;
        border: none;
        height: 400px;
        width: auto;
    }

    div.footer_text {
        margin: 36px 339px 0px 0px;
        text-align: right;
    }
}


@media only screen and (max-width: 640px) {
    
    div.column_wrapper img {
        width: 100%;
        border: none;
    }

    div.column_wrapper img.overlay1 {
        width: 100%;
    }

    div.column_wrapper img.overlay2 {
        width: 100%;
    }

    div.column_wrapper .row6 p img {
        width: 220px;
        float: none;
        margin-left: 20px;
        margin-bottom: 0px;
    }

    div.column_wrapper .row6 a {
        background: none;
    }

    .front, .back {
        position: relative;
        backface-visibility: visible;
    }

    .back {
        top: 40px;
    }

    div.row6 {
        margin-top: 60px;
    }

    div.row6 .code{
        margin-top: 80px;
    }

    div.footer {
        height: 800px;
        display: block;
        margin-top: 60px;
        background: #242423; 
    }
    
    div.footer_right {
        display: none;
    }

    div.footer_left img {
        position: relative;
        margin: 40px 0px 0px 40px;
        border: none;
        height: 400px;
        width: auto;
    }

    div.footer_text {
        position: relative;
        margin: 0px 0px 0px 40px;
        color: #e8eddf;
        text-align: left;
        width: 70%;
    }

    div.footer_left div:last-of-type {
        display: none;
    }
}