/* ===========================
   General
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, sans-serif;
    background:#f5f5f5;
    color:#222;
    line-height:1.6;
}

/* ===========================
   Header
=========================== */

.header{
    background:#0b5ed7;
    text-align:center;
    padding:25px 15px;
}

.logo{
    width:250px;
    max-width:100%;
    height:auto;
    display:block;
    margin:0 auto;
}

h1{
    font-size:38px;
    margin-bottom:10px;
}

.subtitle{
    color:#2116a6 !important;
    margin-bottom:15px;
}

/* ===========================
   Sections
=========================== */

section{
    width:95%;
    max-width:1100px;
    margin:20px auto;
    background:#fff;
    padding:20px;
    border-radius:8px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

section h2{
    margin-bottom:15px;
}

/* ===========================
   Tables
=========================== */

.table-wrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

table{
    width:100%;
    min-width:800px;
    border-collapse:collapse;
}

th,
td{
    border:1px solid #dcdcdc;
    padding:10px;
    text-align:center;
    white-space:nowrap;
}

th{
    background:#0b5ed7;
    color:#fff;
}

/* ===========================
   Footer
=========================== */

.footer{
    background:#111;
    color:#fff;
    text-align:center;
    padding:50px 20px;
    margin-top:40px;
}

.footer h2{
    margin-bottom:20px;
    font-size:32px;
}

.footer p{
    margin:10px 0;
}

.footer a{
    color:#fff;
    text-decoration:none;
}

.footer a:hover{
    color:#ffd700;
}

.footer hr{
    width:80%;
    margin:30px auto;
    border:1px solid rgba(255,255,255,.2);
}

/* ===========================
   Tablet
=========================== */

@media (max-width:768px){

    body{
        font-size:18px;
    }

    section{
        width:100%;
        margin:10px 0;
        padding:15px;
    }

    h1{
        font-size:32px;
    }

    h2{
        font-size:26px;
    }

    p,
    td,
    th,
    a{
        font-size:18px;
    }

    .logo{
        width:180px;
        height:auto;
    }

    .table-wrap{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    table{
        min-width:900px;
    }
}

/* ===========================
   Mobile
=========================== */

@media (max-width:480px){

    .logo{
        width:150px;
    }

    h1{
        font-size:24px;
    }

    .subtitle{
        font-size:15px;
    }

    section{
        padding:12px;
    }

    table{
        min-width:700px;
    }

    th,
    td{
        padding:8px;
        font-size:13px;
    }

    .footer{
        padding:35px 15px;
    }

    .footer h2{
        font-size:24px;
    }

}
html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

/* Responsive Fix */
html,body{overflow-x:hidden;}
.table-wrap{display:block;overflow-x:auto;width:100%;}
@media (max-width:768px){
body{font-size:16px;}
section{width:100%;margin:12px 0;border-radius:0;}
h1{font-size:30px;line-height:1.2;}
h2{font-size:24px;}
p{font-size:16px;}
table{width:max-content;min-width:900px;}
th,td{font-size:15px;padding:12px 14px;}
}
@media (max-width:480px){
body{font-size:15px;}
h1{font-size:20px;}
h2{font-size:20px;}
p{font-size:15px;}
.logo{width:140px;}
table{min-width:850px;}
th,td{font-size:14px;padding:12px;}
}