/* === 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: 60vw;
}

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

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)));
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

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

    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) 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: 40vw;
        width: 100vw;
    }
}

/* === Tutor Registration Form === */
article:nth-child(2){
    background-color: #0F1425;
    height: 28vw;
    position: relative;
}

article:nth-child(2) h2{
    color: #F0F0F0;
    font-size: 4vw;
    font-weight: 350;
    left: 0;
    margin: 0 0 0 0;
    position: absolute;
    text-align: center;
    top: 7vw;
    width: 100vw;
}

fieldset#tutor-registration-form{
    position: absolute;
    top: 17vw;
    left: 20vw;
}

fieldset#tutor-registration-form li{
    margin: 0 4.2vw 0 0;
}

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

    article:nth-child(2) h2{
        position: absolute;
        font-size: 7vw;
        top: 7vw;
    }

    fieldset#tutor-registration-form{
        left: 0;
        top: 28vw;
        width: 100vw;
    }

    fieldset#tutor-registration-form li{
        display: block;
        margin: 0 0 13vw 14.185vw;
    }
}

/* === Why Blue Tutors === */
article:nth-child(3){
    background-color: #ACBBC6;
    height: 50.5vw;
    overflow: hidden;
    position: relative;
}

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

article:nth-child(3) p{
    color: #0F1425;
    font-size: 1.5vw;
    font-weight: 350;
    left: 42vw;
    line-height: 2.5vw;
    position: absolute;
    width: 51vw;
}

article:nth-child(3) p:nth-child(2){
    top: 18vw;
}

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

article:nth-child(3) img{
    width: 35vw;
    position: absolute;
    left: 0;
    top: 5vw;
    border-top-right-radius: 0.3vw;
    border-bottom-right-radius: 0.3vw;
}

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

    article:nth-child(3) h2{
        font-size: 9vw;
        text-align: center;
        left: 0;
        top: 8vw;
        width: 100vw;
    }

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

    article:nth-child(3) p:nth-child(2){
        top: 21vw;
        width: 50vw;
        left: 45vw;
    }

    article:nth-child(3) p:nth-child(3){
        top: 76vw;
        left: 5vw;
        width: 90vw;
    }

    article:nth-child(3) img{
        width: 40vw;
        top: 28vw;
        border-top-right-radius: 0.45vw;
        border-bottom-right-radius: 0.45vw;
    }
}

/* === Tutor Registration Values === */
article:nth-child(4){
    background-color: #0F1425;
    position: relative;
    overflow: hidden;
    padding: 7vw 15vw 7vw 15vw;
}

article:nth-child(4) p{
    color: #F0F0F0;
    font-size: 1.5vw;
    font-weight: 350;
    line-height: 2.5vw;
    margin: 1vw 0 5vw 0;
}

article:nth-child(4) div.paragraph-separator{
    background-color: #F0F0F0;
}

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

    article:nth-child(4) p{
        font-size: 3.9vw;
        line-height: 6.5vw;
        margin: 3vw 0 15vw 0;
    }
}


/* === Should you Join === */
article:nth-child(5){
    background-color: #ECECEC;
    padding: 7vw 15vw 10vw 15vw;
}

article:nth-child(5) h2{
    font-size: 4vw;
    font-weight: 350;
    margin: 0 0 3vw 0;
    text-align: center;
}

article:nth-child(5) p{
    font-size: 1.5vw;
    line-height: 2.5vw;
}

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

    article:nth-child(5) h2{
        font-size: 9vw;
        text-align: center;
        margin: 0 0 5vw 0;
    }

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

/* === Application Process === */
article:nth-child(6){
    background-color: #374255;
    height: 67vw;
    padding: 7vw 15vw 10vw 15vw;
    position: relative;
}

article:nth-child(6) h2{
    color: #F0F0F0;
    font-size: 4vw;
    font-weight: 350;
    text-align: center;
}

article:nth-child(6) p{
    color: #F0F0F0;
    font-size: 1.5vw;
    line-height: 2.5vw;
}

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

article:nth-child(6) ol li{
    color: #F0F0F0;
    border: 0.1vw #ECECEC solid;
    border-radius: 8vw;
    text-align: center;
    vertical-align: middle;
    font-size: 1.2vw;
    line-height: 1.666vw;
    position: absolute;
    width: 10vw;
}

article:nth-child(6) ol li:nth-child(1){
    height: 10vw;
    padding: 3vw 3vw 3vw 3vw;
    left: 42vw;
    top: 29vw;
}

article:nth-child(6) ol li:nth-child(2){
    height: 3.333vw;
    padding: 6.333vw 3vw 6.333vw 3vw;
    left: 18vw;
    top: 39vw;
}

article:nth-child(6) ol li:nth-child(3){
    height: 6.666vw;
    padding: 4.666vw 3vw 4.666vw 3vw;
    left: 66vw;
    top: 39vw;
}

article:nth-child(6) ol li:nth-child(4){
    height: 5vw;
    padding: 5.5vw 3vw 5.5vw 3vw;
    left: 42vw;
    top: 49vw;
}

div#arrow12a, div#arrow12b, div#arrow2a3, div#arrow2b3{
    display: block;
    width: 5vw;
    height: 2.5vw;
    background-repeat: no-repeat;
	background-size: 5vw 2.5vw;
    background-position: center center;
    position: absolute;
}

div#arrow12a{
    background-image: url(../images/arrows/arrow-white-aw-129.png);
    top: 35vw;
    left: 32vw;
}

div#arrow12b{
    background-image: url(../images/arrows/arrow-white-cw-123.png);
    top: 35vw;
    left: 63vw;
}

div#arrow2a3{
    background-image: url(../images/arrows/arrow-white-aw-96.png);
    top: 56.5vw;
    left: 32vw;
}

div#arrow2b3{
    background-image: url(../images/arrows/arrow-white-cw-36.png);
    top: 56.5vw;
    left: 63vw;
}

article:nth-child(6) a{
    position: absolute;
    left: 41.4vw;
    top: 70vw;
}

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

    article:nth-child(6) h2{
        font-size: 7vw;
        text-align: center;
    }

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

    article:nth-child(6) ol li{
        width: 29vw;
        border: 0.415vw #ECECEC solid;
        border-radius: 20vw;
        font-size: 3.2vw;
        line-height: 5vw;
    }

    article:nth-child(6) ol li:nth-child(1){
        height: 30vw;
        padding: 5vw 5vw 5vw 5vw;
        left: 30vw;
        top: 80vw;
    }

    article:nth-child(6) ol li:nth-child(2){
        height: 10vw;
        padding: 15vw 5vw 15vw 5vw;
        left: 5vw;
        top: 120vw;
    }

    article:nth-child(6) ol li:nth-child(3){
        height: 20vw;
        padding: 10vw 5vw 10vw 5vw;
        left: 55vw;
        top: 120vw;
    }

    article:nth-child(6) ol li:nth-child(4){
        height: 15vw;
        padding: 12.5vw 5vw 12.5vw 5vw;
        left: 30vw;
        top: 160vw;
    }

    div#arrow12a, div#arrow12b, div#arrow2a3, div#arrow2b3{
        width: 9vw;
        height: 18vw;
    	background-size: 9vw 18vw;
    }

    div#arrow12a{
        top: 99vw;
        left: 18vw;
    }

    div#arrow12b{
        top: 99vw;
        left: 73vw;
    }

    div#arrow2a3{
        top: 163vw;
        left: 18vw;
    }

    div#arrow2b3{
        top: 163vw;
        left: 73vw;
    }

    article:nth-child(6) a{
        left: 14.585vw;
        top: 210vw;
    }
}


/* === Tutor FAQs === */
article:nth-child(7){
    background-color: #ACBBC6;
    padding: 7vw 15vw 10vw 15vw;
}

article:nth-child(7) h2{
    color: #0F1425;
    font-size: 4vw;
    font-weight: 350;
    margin: 1vw 0 7vw 0;
    text-align: center;
}

article:nth-child(7) ul{
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0;
}

article:nth-child(7) ul span{
    display: block;
    font-size: 0;
}

article:nth-child(7) ul span:nth-child(2n+1){
    height: 3.8vw;
    line-height: 3.8vw;
    margin: 0 0 0 0;
}

article:nth-child(7) ul span:nth-child(2n+1):hover{
    cursor: pointer;
}

article:nth-child(7) ul li{
    display: inline-block;
    vertical-align: middle;
}

article:nth-child(7) ul span:nth-child(2n+1) li:nth-child(1){
    width: 2vw;
    margin: 0 1.5vw 0 0;
    font-size: 3vw;
    font-weight: 700;
    position: relative;
    text-align: center;
    top: -0.3vw;
}

article:nth-child(7) ul span:nth-child(2n+1) li:nth-child(2){
    margin: 0 0 0 0;
    font-size: 1.5vw;
}

article:nth-child(7) ul span:nth-child(2n) li{
    width: 70vw;
    height: 0;
    line-height: 2.5vw;
    font-size: 1.5vw;
    border-top: 0.1vw #0F1425 solid;
    border-bottom: 0 #0F1425 solid;
    overflow: hidden;
    transition: border-bottom 0.8s, height 0.8s;
}

article:nth-child(7) ul span:nth-child(2n) li.visible{
    border-bottom: 0.1vw #0F1425 solid;
}

article:nth-child(7) ul span:nth-child(2n) li#answer1.visible{
    height: 8vw;
}

article:nth-child(7) ul span:nth-child(2n) li#answer2.visible{
    height: 5.5vw;
}

article:nth-child(7) ul span:nth-child(2n) li#answer3.visible{
    height: 5.5vw;
}

article:nth-child(7) ul span:nth-child(2n) li#answer4.visible{
    height: 8vw;
}

article:nth-child(7) ul span:nth-child(2n) li#answer5.visible{
    height: 10.5vw;
}

article:nth-child(7) ul span:nth-child(2n) li#answer6.visible{
    height: 15.5vw;
}

article:nth-child(7) ul span:nth-child(2n) li#answer7.visible{
    height: 5.5vw;
}

article:nth-child(7) ul span:nth-child(2n) li#answer8.visible{
    height: 13vw;
}

article:nth-child(7) ul span:nth-child(2n) li#answer9.visible{
    height: 10.5vw;
}

article:nth-child(7) ul span:nth-child(2n) li#answer10.visible{
    height: 18vw;
}

article:nth-child(7) ul span:nth-child(2n) li#answer11.visible{
    height: 8vw;
}

article:nth-child(7) ul span:nth-child(2n) li#answer12.visible{
    height: 5.5vw;
}

article:nth-child(7) ul span:nth-child(2n) li#answer13.visible{
    height: 8vw;
}

article:nth-child(7) ul span:nth-child(2n) li#answer14.visible{
    height: 8vw;
}

article:nth-child(7) ul span:nth-child(2n) li#answer15.visible{
    height: 10.5vw;
}

article:nth-child(7) ul span:nth-child(2n) li#answer16.visible{
    height: 10.5vw;
}

article:nth-child(7) ul span:nth-child(2n) li#answer17.visible{
    height: 8vw;
}

article:nth-child(7) ul span:nth-child(2n) li#answer18.visible{
    height: 5.5vw;
}

article:nth-child(7) ul span:nth-child(2n) li#answer19.visible{
    height: 15.5vw;
}

article:nth-child(7) ul span:nth-child(2n) li#answer20.visible{
    height: 10.5vw;
}

article:nth-child(7) ul span:nth-child(2n) li#answer21.visible{
    height: 13vw;
}

article:nth-child(7) ul span:nth-child(2n) li#answer22.visible{
    height: 18vw;
}

article:nth-child(7) ul span:nth-child(2n) li#answer23.visible{
    height: 8vw;
}

article:nth-child(7) ul span:nth-child(2n) li#answer24.visible{
    height: 8vw;
}

article:nth-child(7) ul span:nth-child(2n) li#answer25.visible{
    height: 8vw;
}

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

    article:nth-child(7) h2{
        font-size: 9vw;
        margin: 1vw 0 7vw 0;
    }

    article:nth-child(7) ul span:nth-child(2n+1){
        height: 9.9vw;
        line-height: 9.9vw;
    }

    article:nth-child(7) ul span:nth-child(13), article:nth-child(7) ul span:nth-child(25), article:nth-child(7) ul span:nth-child(29), article:nth-child(7) ul span:nth-child(31), article:nth-child(7) ul span:nth-child(35), article:nth-child(7) ul span:nth-child(37), article:nth-child(7) ul span:nth-child(41), article:nth-child(7) ul span:nth-child(43), article:nth-child(7) ul span:nth-child(45), article:nth-child(7) ul span:nth-child(47), article:nth-child(7) ul span:nth-child(49){
        height: 13vw;
        line-height: 6.5vw;
        margin: 1.65vw 0 1.65vw 0;
    }

    article:nth-child(7) ul span:nth-child(2n+1) li:nth-child(1){
        width: 5.2vw;
        margin: 0 3vw 0 0;
        font-size: 7.2vw;
        top: -0.72vw;
    }

    article:nth-child(7) ul span:nth-child(2n+1) li:nth-child(2){
        font-size: 3.9vw;
        width: 81.8vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li{
        width: 90vw;
        line-height: 6.5vw;
        font-size: 3.9vw;
        border-top: 0.3vw #0F1425 solid;
    }

    article:nth-child(7) ul span:nth-child(2n) li.visible{
        border-bottom: 0.3vw #0F1425 solid;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer1.visible{
        height: 32.5vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer2.visible{
        height: 26vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer3.visible{
        height: 19.5vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer4.visible{
        height: 39vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer5.visible{
        height: 58.5vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer6.visible{
        height: 71.5vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer7.visible{
        height: 32.5vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer8.visible{
        height: 71.5vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer9.visible{
        height: 58.5vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer10.visible{
        height: 97.5vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer11.visible{
        height: 39vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer12.visible{
        height: 26vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer13.visible{
        height: 39vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer14.visible{
        height: 39vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer15.visible{
        height: 52vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer16.visible{
        height: 52vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer17.visible{
        height: 39vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer18.visible{
        height: 26vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer19.visible{
        height: 71.5vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer20.visible{
        height: 45.5vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer21.visible{
        height: 65vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer22.visible{
        height: 84.5vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer23.visible{
        height: 39vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer24.visible{
        height: 32.5vw;
    }

    article:nth-child(7) ul span:nth-child(2n) li#answer25.visible{
        height: 32.5vw;
    }
}