* {
    box-sizing: border-box;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    #wrapper {
        margin:auto;
        width:400px;
        padding:0 10px 0 10px;
    }
    
    h1 {
        margin:auto;
        padding:10px 0 10px; 0;;
        font-size: 30px;
        line-height: 22pt;
    }
    
    img {
        width: 380px;
        height: auto;
    }
    
    .tableimg {
        width:100%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
            display: block; 
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
            position: absolute;
            top: -9999px;
            left: -9999px;
    }

    td { 
            /* Behave  like a "row" */
            border: none;
            position: relative;
            padding-left: 50%; 
    }

    td:before { 
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%; 
            padding-right: 10px; 
            white-space: nowrap;
    }
} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 768px) {
    #wrapper {
        margin:auto;
        width:600px;
        padding:0 10px 0 10px;
    }
    
    h1 {
        margin:auto;
        padding:10px 0 10px; 0;;
        font-size: 25px
    }
    
    img {
        width: 580px;
        height: auto;
    }
    
    .tableimg {
        width: 100%;
        height: auto;
    }
    
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
            display: block; 
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
            position: absolute;
            top: -9999px;
            left: -9999px;
    }

    td { 
            /* Behave  like a "row" */
            border: none;
            position: relative;
            padding-left: 50%; 
    }

    td:before { 
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%; 
            padding-right: 10px; 
            white-space: nowrap;
    }
} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    #wrapper {
        margin:auto;
        width:768px;
        padding:0 10px 0 10px;
    }
    
    h1 {
        margin:auto;
        padding:10px 0 10px; 0;;
        font-size: 30px
    }
    
    img {
        width: 370px;
        height: auto;
    }
    
    .tableimg {
        width: 150px;
        height: auto;
    }
    
    table {
        border-collapse: collapse;
        width:745px;
    }
    
    th, td {
        width:33%;
    }
    
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    #wrapper {
        margin:auto;
        width:992px;
        padding:0 10px 0 10px;
    }
    
    h1 {
        margin:auto;
        padding:20px 0 10px; 0;;
        font-size: 40px
    }
    
    img {
        width: 480px;
        height: auto;        
    }
    
    .tableimg {
        width: 200px;
        height: auto;
    }
    
    table {
        border-collapse: collapse;
        width:992px;
    }
    
    th, td {
        width:33%;
    }
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    #wrapper {
        margin:auto;
        width:1200px;
        padding:0 10px 0 10px;
    }
    
    #footer {
        margin:auto;
        width:1500px;
        padding:0 10px 0 10px;
    }
    
    h1 {
        margin:auto;
        padding:30px 0 10px 0;;
        font-size: 50px
    }
    
    img.img2 {
        width: 580px;
        height: auto; 
        text-align:center;
    }
    
    table {
        border-collapse: collapse;
        width:100%;
    }
    
    th, td {
        width:33%;
    }
    
    .button {
        width:30%;
    }
    
}

h1, h2, h3 {
    color: #232323;
}

.tableimg {
    width: 100%;
    height: auto;
}

.box {
    width:450px; 
    position:absolute;
    top:30%;
    margin-left:35%; 
    border:5px solid #009FE3; 
    padding:20px;
    background-color:white;
}
    
#header {
    height:50px;
    margin-bottom:20px;
    background-color: #232323;
    color:white;
}

#wrapper {
    margin-top:30px;
    padding-top:20px;
    background-color: #fff;
}

#footer {
    background-color: #232323;
    color:#f4f4f4;
    padding:0 10px; 0 10px;
}

a {
    text-decoration: none;
    color: #f4f4f4;
}

body {
    background-color: #f4f4f4;
    font: normal normal 300 18px/130% "Source Sans Pro",sans-serif;
    color: #595457
}

table, thead, tbody, th, td, tr { 
        display: overflow; 
}

table, th, td {
    border-bottom: 1px solid #f1f1f1;
}

th, td {
    padding: 15px;
    text-align: left;
    vertical-align: top;
}


tr:nth-child(even) {background-color: #f4f4f4;}

.button {
    background-color: red;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.button:hover {
  background-color: #9b1d20;
  cursor: pointer;
}

.centered {
    text-align: center;
}

    .cover {
        width:200px;
        height: auto;
    }