img{
    max-width: 100%;
}

body{
    background-color: #f2f2f2;
    font: normal 100% Arial, Helvetica, sans-serif;
}

#main{
    padding-bottom: 32px;
}

#container{
    background-color: #fff;
}

header{
    background: url(../images/header-bg.jpg) no-repeat;
}

figure{
    padding-top: 52px;
    width: 53.125%;
    margin: 0 23.4375%;
}

#content{
    width: 77.5%;
    margin: 0 11.25%;
}

h1{
    color: #1f75ae;
    font-weight: bold;
    text-align: center;
    font-size: 1.0625em; /* 17px / 16px */
    margin: 32px 0;
}

#cp_container_1{
    width: 200px; /* 55.625% */
    margin: 0 11.25% 25px 11.25%; /* 0 22.1875% 25px 22.1875% */
}

p{
    color: #666;
    font-size: 0.875em; /* 14px / 16px */
    margin-bottom: 20px;
}

.txt-by{
    display: inline-block;
    padding-top: 20px;
}


@media screen and (min-width: 640px) {
    #main{
        padding-bottom: 32px;
    }
    
    #main:after{
        display: table;
        content: "";
        clear: both;
    }
    
    #container{
        margin:auto;
        max-width: 797px;
    }
    
    figure{
        width: 29.61104140527%;
        margin-left: 4.767879548306%;
    }
    
    h1{
        text-align: left;
        margin: 32px 0 32px 33.124215809285%;
    }
    
    #cp_container_1{
        float: left;
        width: 13.048933500627%;
        margin: 0 0 0 4.015056461731%;
    }
    
    #content{
        width: 59.849435382685%;
        margin: 0 0 0 4.015056461731%;
        float: left;
    }
}