body {
    height: auto;
}

.header {
    height: 4.5pc;
}

.middle .content h3 {
    font-weight: 100;
    text-align: justify;
}

.middle .content h1 {
    padding: .7pc;
    text-transform: uppercase;
    letter-spacing: .2pc;
    font-weight: 400;
    border-bottom: 1px solid #d1d0d0;
    margin: 2pc 0;
    text-align: left;
}

.middle .content p {
    position: relative;
    font-size: 1.2pc;
    text-align: justify;
    padding: 0 3.5pc;
}

.middle .content ol {
    padding: 2pc 7pc;
    list-style-type: square;
}

.middle .content ol li {
    font-size: 1.05pc;
}

.middle a {
    color: #0000EE;
}

.footer a {
    color: whitesmoke;
}

/* ---------Mobile-------- */

@media only screen and (max-width: 850px) {
    .middle .content {
        padding: 5pc 3pc;
    }

    .middle .content h1 {
        padding: .4pc;
    }

    .middle .content p {
        font-size: 1.2pc;
        padding: 0 2pc;
    }

    .middle .content ol {
        padding: 2pc 5pc;
    }
}

@media only screen and (max-width: 700px) {
    .middle .content {
        padding: 5pc 2pc;
    }

    .middle .content p {
        padding: 0 1pc;
    }

    .middle .content ol {
        padding: 1.5pc 3pc;
    }
}

@media only screen and (max-width: 600px) {
    .middle .content h1 {
        text-align: center;
    }
}

@media only screen and (max-width: 450px) {
    .middle .content {
        padding: 5pc 1pc;
    }

    .middle .content h1 {
        font-size: 1.7pc;
        font-weight: 400;
    }

    .middle .content p , h3{
        font-size: 1.1pc;
    }
}

@media only screen and (max-width: 400px) {
.middle .content {
        padding: 5pc 1pc;
    }

    .middle .content p {
        padding: 0 .4pc;
    }

    .middle .content ol {
        padding: 1.5pc 2pc;
    }    
}