/* === Name, Rating and Photo === */
article:nth-child(1){
    background-color: #F0F0F0;
    height: 32vw;
    position: relative;
}

article:nth-child(1) h1{
    color: #0F1425;
    font-size: 4vw;
    font-weight: 350;
    left: 15vw;
    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: 15vw;
    position: absolute;
    top: 21.5vw;
}

article:nth-child(1) div#star-rating-div{
    left: 15vw;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    position: absolute;
    top: 23vw;
}

article:nth-child(1) div#star-rating-div img{
    display: inline-block;
    width: 3vw;
}

article:nth-child(1) span.tutor-profile-photo{
    border-radius: 0.3vw;
    display: inline-block;
    height: 26vw;
    left: 65vw;
    overflow: hidden;
    position: relative;
    top: 3vw;
    width: 20.8vw;
}

article:nth-child(1) img.desktop-image{
    display: block;
}

article:nth-child(1) img.mobile-image{
    display: none;
}

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

    article:nth-child(1) h1{
        font-size: 7vw;
        left: 5vw;
        top: 15vw;
    }

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

    article:nth-child(1) div#star-rating-div{
        left: 5vw;
        top: 45vw;
    }

    article:nth-child(1) div#star-rating-div img{
        width: 6vw;
    }

    article:nth-child(1) span.tutor-profile-photo{
        border-radius: 1.25vw;
        height: 51.25vw;
        left: 53vw;
        top: 4.375vw;
        width: 43vw;
    }

    article:nth-child(1) img.desktop-image{
        display: none;
    }

    article:nth-child(1) img.mobile-image{
        display: block;
    }
}

/* === Tutor Introduction, Tutoring Ideas and Interests === */
article:nth-child(2){
    background-color: #F0F0F0;
    margin: 0 0 0 0;
    padding: 0 0 5vw 0;
}

article:nth-child(2) p{
    font-size: 1.2vw;
    font-weight: 350;
    line-height: 2vw;
    margin: 2vw 10vw 2vw 10vw;
    padding: 0 0 0 0;
    width: 80vw;
}

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

    article:nth-child(2) p{
        font-size: 3.3vw;
        line-height: 5.5vw;
        margin: 5vw 3vw 5vw 3vw;
        text-align: justify;
        width: 94vw;
    }
}

/* === Qualifications === */
article:nth-child(3){
    background-color: #0F1425;
    color: #F0F0F0;
    font-weight: 350;
    margin: 0 0 0 0;
    padding: 5vw 5vw 7vw 5vw;
}

article:nth-child(3) header{
    font-size: 2vw;
    line-height: 3.5vw;
    margin: 0 0 3vw 0;
}

article:nth-child(3) ol.qualification{
    list-style: none;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

article:nth-child(3) ol.qualification li{
    display: block;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

article:nth-child(3) ol.qualification li ul{
    list-style: none;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

article:nth-child(3) ol.qualification li ul li{
    display: inline-block;
    font-size: 1.2vw;
    height: 2vw;
    line-height: 2vw;
    overflow: hidden;
    vertical-align: middle;
}

article:nth-child(3) ol.qualification li ul li:nth-child(5n+1){
    width: 24vw;
}

article:nth-child(3) ol.qualification li ul li:nth-child(5n+2){
    width: 25vw;
}

article:nth-child(3) ol.qualification li ul li:nth-child(5n+3){
    width: 10vw;
}

article:nth-child(3) ol.qualification li ul li:nth-child(5n+4){
    width: 27vw;
}

article:nth-child(3) ol.qualification li ul li:nth-child(5n){
    width: 4vw;
}

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

    article:nth-child(3) header{
        font-size: 5.5vw;
        line-height: 8.5vw;
        margin: 0 0 6vw 5vw;
    }

    article:nth-child(3) ol.qualification li ul li{
        font-size: 3.3vw;
        height: 5.5vw;
        line-height: 5.5vw;
    }

    article:nth-child(3) ol.qualification li ul li:nth-child(5n+1), article:nth-child(3) ol.qualification li ul li:nth-child(5n+2){
        width: 47vw;
    }

    article:nth-child(3) ol.qualification li ul li:nth-child(5n+3), article:nth-child(3) ol.qualification li ul li:nth-child(5n+4), article:nth-child(3) ol.qualification li ul li:nth-child(5n){
        display: none;
    }
}

/* === Experience === */
article:nth-child(4){
    background-color: #ACBBC6;
    color: #0F1425;
    font-weight: 350;
    margin: 0 0 0 0;
    padding: 5vw 5vw 7vw 5vw;
}

article:nth-child(4) header{
    font-size: 2vw;
    line-height: 3.5vw;
    margin: 0 0 3vw 0;
}

article:nth-child(4) ol.experience{
    list-style: none;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

article:nth-child(4) ol.experience li{
    display: block;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

article:nth-child(4) ol.experience li ul{
    list-style: none;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

article:nth-child(4) ol.experience li ul li{
    display: inline-block;
    font-size: 1.2vw;
    height: 2vw;
    line-height: 2vw;
    overflow: hidden;
    vertical-align: middle;
}

article:nth-child(4) ol.experience li ul li:nth-child(4n+1){
    width: 14vw;
}

article:nth-child(4) ol.experience li ul li:nth-child(4n+2){
    width: 53vw;
}

article:nth-child(4) ol.experience li ul li:nth-child(4n+3){
    width: 16vw;
}

article:nth-child(4) ol.experience li ul li:nth-child(4n){
    width: 7vw;
}

@media only screen and (max-device-width: 480px){
    article:nth-child(4){
        padding: 5vw 3vw 7vw 3vw;
    }

    article:nth-child(4) header{
        font-size: 5.5vw;
        line-height: 8.5vw;
        margin: 0 0 6vw 5vw;
    }

    article:nth-child(4) ol.experience li ul li{
        font-size: 3.3vw;
        height: 5.5vw;
        line-height: 5.5vw;
    }

    article:nth-child(4) ol.experience li ul li:nth-child(4n+1){
        width: 36vw;
    }

    article:nth-child(4) ol.experience li ul li:nth-child(4n+2){
        display: none;
    }

    article:nth-child(4) ol.experience li ul li:nth-child(4n+3){
        width: 36vw;
    }

    article:nth-child(4) ol.experience li ul li:nth-child(4n){
        width: 22vw;
    }
}