/* === Opening message and photo === */
article:nth-child(1){
    background-color: #F0F0F0;
    height: 40vw;
    position: relative;
}

article:nth-child(1) h1{
    color: #0F1425;
    font-size: 4vw;
    font-weight: 350;
    left: 5vw;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    position: absolute;
    top: 8vw;
}

article:nth-child(1) div.paragraph-separator{
    background-color: #0F1425;
    left: 5vw;
    position: absolute;
    top: 21vw;
}

article:nth-child(1) p{
    color: #0F1425;
    font-size: 1.5vw;
    font-weight: 350;
    left: 5vw;
    line-height: 2.5vw;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    position: absolute;
    width: 40vw;
}

article:nth-child(1) p:nth-child(3){
    top: 23vw;
}

article:nth-child(1) p:nth-child(4){
    top: 27vw;
}

article:nth-child(1) img{
    height: 40vw;
    mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0));
    -webkit-mask-image: -webkit-gradient(linear, right bottom, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    position: absolute;
    right: 0;
    top: 0;
}

@media only screen and (max-device-width: 480px){
    article:nth-child(1){
        height: 105vw;
    }

    article:nth-child(1) h1{
        font-size: 9vw;
        top: 10vw;
    }

    article:nth-child(1) div.paragraph-separator{
        top: 32vw;
    }

    article:nth-child(1) p{
        font-size: 3.9vw;
        line-height: 6.5vw;
        width: 90vw;
    }

    article:nth-child(1) p:nth-child(3){
        top: 36vw;
    }

    article:nth-child(1) p:nth-child(4){
        top: 43vw;
    }

    article:nth-child(1) img{
        height: auto;
        left: 0;
        mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
        -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
        top: 46.735vw;
        width: 100vw;
    }
}

/* === GCSE === */
article:nth-child(2){
    background-color: #ACBBC6;
    height: 46vw;
    position: relative;
}

article:nth-child(2) h2{
    color: #0F1425;
    font-size: 3vw;
    font-weight: 350;
    position: absolute;
    left: 60vw;
    top: 5vw;
}

article:nth-child(2) div.paragraph-separator{
    background-color: #0F1425;
    left: 60vw;
    position: absolute;
    top: 18vw;
}

article:nth-child(2) p{
    color: #0F1425;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    position: absolute;
}

article:nth-child(2) p:nth-child(3){
    font-size: 2vw;
    font-weight: 700;
    left: 23.5vw;
    line-height: 3.3vw;
    top: 7.7vw;
    width: 25vw;
    z-index: 2;
}

article:nth-child(2) p:nth-child(4){
    font-size: 1.5vw;
    font-weight: 350;
    left: 60vw;
    line-height: 2.5vw;
    top: 20vw;
    width: 30vw;
}

article:nth-child(2) img{
    border-top-right-radius: 0.3vw;
    border-bottom-right-radius: 0.3vw;
    left: 0;
    position: absolute;
    top: 6vw;
    width: 50vw;
    z-index: 1;
}

article:nth-child(2) a{
    position: absolute;
    left: 66.5vw;
    top: 36vw;
}

@media only screen and (max-device-width: 480px){
    article:nth-child(2){
        height: 164.632vw;
    }

    article:nth-child(2) h2{
        font-size: 6.5vw;
        left: 5vw;
        top: 10vw;
    }

    article:nth-child(2) div.paragraph-separator{
        left: 5vw;
        top: 32vw;
    }

    article:nth-child(2) p:nth-child(3){
        font-size: 4vw;
        left: 47vw;
        line-height: 6.6vw;
        top: 101.4vw;
        width: 50vw;
    }

    article:nth-child(2) p:nth-child(4){
        font-size: 3.9vw;
        left: 5vw;
        line-height: 6.5vw;
        top: 36vw;
        width: 90vw;
    }

    article:nth-child(2) img{
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        left: 0;
        top: 98vw;
        width: 100vw;
    }

    article:nth-child(2) a{
        left: 15vw;
        top: 78vw;
    }
}

/* === A Level === */
article:nth-child(3){
    background-color: #F0F0F0;
    height: 46vw;
    position: relative;
}

article:nth-child(3) h2{
    color: #0F1425;
    font-size: 3vw;
    font-weight: 350;
    position: absolute;
    left: 10vw;
    top: 5.5vw;
}

article:nth-child(3) div.paragraph-separator{
    background-color: #0F1425;
    left: 10vw;
    position: absolute;
    top: 18.5vw;
}

article:nth-child(3) p{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    position: absolute;
}

article:nth-child(3) p:nth-child(3){
    color: #F0F0F0;
    font-size: 2vw;
    font-weight: 700;
    left: 56vw;
    line-height: 3.3vw;
    top: 9vw;
    width: 17vw;
    z-index: 2;
}

article:nth-child(3) p:nth-child(4){
    color: #0F1425;
    font-size: 1.5vw;
    font-weight: 350;
    left: 10vw;
    line-height: 2.5vw;
    top: 20.5vw;
    width: 30vw;
}

article:nth-child(3) img{
    border-top-left-radius: 0.3vw;
    border-bottom-left-radius: 0.3vw;
    position: absolute;
    right: 0;
    top: 6vw;
    width: 50vw;
    z-index: 1;
}

article:nth-child(3) a{
    position: absolute;
    left: 16.5vw;
    top: 36vw;
}

@media only screen and (max-device-width: 480px){
    article:nth-child(3){
        height: 158.132vw;
    }

    article:nth-child(3) h2{
        font-size: 6.5vw;
        left: 5vw;
        top: 10vw;
    }

    article:nth-child(3) div.paragraph-separator{
        left: 5vw;
        top: 32vw;
    }

    article:nth-child(3) p:nth-child(3){
        font-size: 4vw;
        left: 12vw;
        line-height: 6.6vw;
        top: 97vw;
        width: 34vw;
    }

    article:nth-child(3) p:nth-child(4){
        font-size: 3.9vw;
        left: 5vw;
        line-height: 6.5vw;
        top: 36vw;
        width: 90vw;
    }

    article:nth-child(3) img{
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        left: 0;
        top: 91.5vw;
        width: 100vw;
    }

    article:nth-child(3) a{
        left: 15vw;
        top: 71.5vw;
    }
}

/* === University Applications === */
article:nth-child(4){
    background-color: #0F1425;
    height: 45vw;
    position: relative;
}

article:nth-child(4) h2{
    color: #F0F0F0;
    font-size: 3vw;
    font-weight: 350;
    position: absolute;
    left: 60vw;
    top: 5vw;
}

article:nth-child(4) div.paragraph-separator{
    background-color: #F0F0F0;
    left: 60vw;
    position: absolute;
    top: 18vw;
}

article:nth-child(4) p{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    position: absolute;
}

article:nth-child(4) p:nth-child(3){
    color: #0F1425;
    font-size: 2vw;
    font-weight: 700;
    left: 4vw;
    line-height: 3.3vw;
    text-shadow: 0 0 0.4vw rgba(250, 250, 250, 0.5);
    top: 31vw;
    width: 40vw;
    z-index: 2;
}

article:nth-child(4) p:nth-child(4){
    color: #F0F0F0;
    font-size: 1.5vw;
    font-weight: 350;
    left: 60vw;
    line-height: 2.5vw;
    top: 20vw;
    width: 30vw;
}

article:nth-child(4) img{
    border-top-right-radius: 0.3vw;
    border-bottom-right-radius: 0.3vw;
    left: 0;
    position: absolute;
    top: 6vw;
    width: 50vw;
    z-index: 1;
}

article:nth-child(4) a{
    position: absolute;
    left: 66.5vw;
    top: 35.5vw;
}

@media only screen and (max-device-width: 480px){
    article:nth-child(4){
        height: 156.5vw;
    }

    article:nth-child(4) h2{
        font-size: 6.5vw;
        left: 5vw;
        top: 10vw;
    }

    article:nth-child(4) div.paragraph-separator{
        left: 5vw;
        top: 32vw;
    }

    article:nth-child(4) p:nth-child(3){
        font-size: 4vw;
        left: 8vw;
        line-height: 6.6vw;
        top: 141.5vw;
        width: 80vw;
    }

    article:nth-child(4) p:nth-child(4){
        font-size: 3.9vw;
        left: 5vw;
        line-height: 6.5vw;
        top: 36vw;
        width: 90vw;
    }

    article:nth-child(4) img{
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        left: 0;
        top: 91.5vw;
        width: 100vw;
    }

    article:nth-child(4) a{
        left: 15vw;
        top: 71.5vw;
    }
}

/* === Common Entrance and 11+ === */
article:nth-child(5){
    background-color: #F0F0F0;
    height: 46vw;
    position: relative;
}

article:nth-child(5) h2{
    color: #0F1425;
    font-size: 3vw;
    font-weight: 350;
    position: absolute;
    left: 7vw;
    top: 6.5vw;
}

article:nth-child(5) div.paragraph-separator{
    background-color: #0F1425;
    left: 7vw;
    position: absolute;
    top: 19.5vw;
}

article:nth-child(5) p{
    color: #0F1425;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    position: absolute;
}

article:nth-child(5) p:nth-child(3){
    font-size: 2vw;
    font-weight: 700;
    left: 54vw;
    line-height: 3.3vw;
    top: 31vw;
    width: 44vw;
    z-index: 2;
}

article:nth-child(5) p:nth-child(4){
    font-size: 1.5vw;
    font-weight: 350;
    left: 7vw;
    line-height: 2.5vw;
    top: 21.5vw;
    width: 36vw;
}

article:nth-child(5) img{
    border-top-left-radius: 0.3vw;
    border-bottom-left-radius: 0.3vw;
    position: absolute;
    right: 0;
    top: 6vw;
    width: 50vw;
    z-index: 1;
}

article:nth-child(5) a{
    position: absolute;
    left: 16.5vw;
    top: 34.5vw;
}

@media only screen and (max-device-width: 480px){
    article:nth-child(5){
        height: 158.03vw;
    }

    article:nth-child(5) h2{
        font-size: 6.5vw;
        left: 5vw;
        top: 10vw;
    }

    article:nth-child(5) div.paragraph-separator{
        left: 5vw;
        top: 32vw;
    }

    article:nth-child(5) p:nth-child(3){
        font-size: 4vw;
        left: 8vw;
        line-height: 6.6vw;
        top: 141.5vw;
        width: 88vw;
    }

    article:nth-child(5) p:nth-child(4){
        font-size: 3.9vw;
        left: 5vw;
        line-height: 6.5vw;
        top: 36vw;
        width: 90vw;
    }

    article:nth-child(5) img{
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        left: 0;
        top: 91.5vw;
        width: 100vw;
    }

    article:nth-child(5) a{
        left: 15vw;
        top: 71.5vw;
    }
}

/* === Degree === */
article:nth-child(7){
    background-color: #0F1425;
    height: 43vw;
    position: relative;
}

article:nth-child(7) h2{
    color: #F0F0F0;
    font-size: 3vw;
    font-weight: 350;
    position: absolute;
    left: 60vw;
    top: 3.5vw;
}

article:nth-child(7) div.paragraph-separator{
    background-color: #F0F0F0;
    left: 60vw;
    position: absolute;
    top: 16.5vw;
}

article:nth-child(7) p{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    position: absolute;
}

article:nth-child(7) p:nth-child(3){
    color: #F0F0F0;
    font-size: 2vw;
    font-weight: 700;
    left: 2vw;
    line-height: 3.3vw;
    text-shadow: 0 0 0.4vw rgba(15, 20, 37, 0.5);
    top: 8.5vw;
    width: 45vw;
    z-index: 2;
}

article:nth-child(7) p:nth-child(4){
    color: #F0F0F0;
    font-size: 1.5vw;
    font-weight: 350;
    left: 60vw;
    line-height: 2.5vw;
    top: 18.5vw;
    width: 30vw;
}

article:nth-child(7) img{
    border-top-right-radius: 0.3vw;
    border-bottom-right-radius: 0.3vw;
    left: 0;
    position: absolute;
    top: 7vw;
    width: 50vw;
    z-index: 1;
}

article:nth-child(7) a{
    position: absolute;
    left: 66.5vw;
    top: 34vw;
}

@media only screen and (max-device-width: 480px){
    article:nth-child(7){
        height: 147.724vw;
    }

    article:nth-child(7) h2{
        font-size: 6.5vw;
        left: 5vw;
        top: 10vw;
    }

    article:nth-child(7) div.paragraph-separator{
        left: 5vw;
        top: 32vw;
    }

    article:nth-child(7) p:nth-child(3){
        font-size: 4vw;
        left: 4vw;
        line-height: 6.6vw;
        top: 94.5vw;
        width: 90vw;
    }

    article:nth-child(7) p:nth-child(4){
        font-size: 3.9vw;
        left: 5vw;
        line-height: 6.5vw;
        top: 36vw;
        width: 90vw;
    }

    article:nth-child(7) img{
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        left: 0;
        top: 91.5vw;
        width: 100vw;
    }

    article:nth-child(7) a{
        left: 15vw;
        top: 71.5vw;
    }
}

/* === Primary === */
article:nth-child(8){
    background-color: #ACBBC6;
    height: 46vw;
    position: relative;
}

article:nth-child(8) h2{
    font-size: 3vw;
    font-weight: 350;
    position: absolute;
    left: 10vw;
    top: 6.5vw;
}

article:nth-child(8) div.paragraph-separator{
    background-color: #0F1425;
    left: 10vw;
    position: absolute;
    top: 19.5vw;
}

article:nth-child(8) p{
    color: #0F1425;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    position: absolute;
}

article:nth-child(8) p:nth-child(3){
    font-size: 2vw;
    font-weight: 700;
    left: 65vw;
    line-height: 3.3vw;
    text-shadow: 0 0 0.4vw rgba(250, 250, 250, 0.5);
    top: 32vw;
    width: 30vw;
    z-index: 2;
}

article:nth-child(8) p:nth-child(4){
    font-size: 1.5vw;
    font-weight: 350;
    left: 10vw;
    line-height: 2.5vw;
    top: 21.5vw;
    width: 30vw;
}

article:nth-child(8) img{
    border-top-left-radius: 0.3vw;
    border-bottom-left-radius: 0.3vw;
    position: absolute;
    right: 0;
    top: 6vw;
    width: 50vw;
    z-index: 1;
}

article:nth-child(8) a{
    position: absolute;
    left: 16.5vw;
    top: 34.5vw;
}

@media only screen and (max-device-width: 480px){
    article:nth-child(8){
        height: 151.632vw;
    }

    article:nth-child(8) h2{
        font-size: 6.5vw;
        left: 5vw;
        top: 10vw;
    }

    article:nth-child(8) div.paragraph-separator{
        left: 5vw;
        top: 32vw;
    }

    article:nth-child(8) p:nth-child(3){
        font-size: 4vw;
        left: 30vw;
        line-height: 6.6vw;
        top: 137vw;
        width: 60vw;
    }

    article:nth-child(8) p:nth-child(4){
        font-size: 3.9vw;
        left: 5vw;
        line-height: 6.5vw;
        top: 36vw;
        width: 90vw;
    }

    article:nth-child(8) img{
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        left: 0;
        top: 85vw;
        width: 100vw;
    }

    article:nth-child(8) a{
        left: 15vw;
        top: 65vw;
    }
}
