body {
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
    background-color: #D9D9D9;
}

img {
    max-width: 100%;
}

a {
    color: #2A9DDF;
    text-decoration: none;
}
hr {
    border-width: 2px;
    border-style: solid;
    border-color: #2A9DDF;
}

.wrapper {
    background-color: #F5F5F5;
    margin: 0 auto;
    max-width: 70%;
    min-height: 100vh;
}

.content {
    margin: inherit;
    max-width: 80%;
}

.blue_border {
    padding: 12px;
    border: 3px solid #2A9DDF;
    background-color: #fff;
}

#logo {
    width: 180px;
}

.img_desktop {
    display: block;
}

.img_mobile {
    display: none;
}

/* MEDIA QUERIES */
@media only screen and (max-width: 1280px) {
    .wrapper {
        max-width: 95%;
    }

    .content {
        max-width: 95%;
    }
}

@media only screen and (max-width: 480px) {
    #logo {
        margin: 16px 0 24px 0;
    }
    .img_desktop {
        display: none;
    }
    .img_mobile {
        display: block;
    }
}

/*
 * RESPONSIVE GRID
 * http://www.responsivegridsystem.com/
 *
*/

/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  COLUMN SETUP  */
.col {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
}

.col:first-child {
    margin-left: 0;
}

/*  GROUPING  */
.group:before,
.group:after {
    content: "";
    display: table;
}

.group:after {
    clear: both;
}

.group {
    zoom: 1;
    /* For IE 6/7 */
}

/*  GRID OF TWO  */
.span_2_of_2 {
    width: 100%;
}

.span_1_of_2 {
    width: 49.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .col {
        margin: 1% 0 1% 0%;
    }
}

@media only screen and (max-width: 480px) {

    .span_2_of_2,
    .span_1_of_2 {
        width: 100%;
    }
}