/* Layout blocks */
#block-hello {
    height: 470px;
    background: url("../img/bg-yellow.jpg");
}
#block-hello ul {
    margin-top: 60px;
}
#block-hello li {
    list-style: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}
#block-hello .right {
    height: 470px;
    background: url("../img/jll-memoji.png");
    background-repeat: no-repeat;
    background-position: top left;
}

#block-accreds {
    background-color: #F4F4F4;
    color: #fff;
    padding: 20px 0 20px 0;
}
#block-accreds .inner .left {
    border-right: #D0D0D0 2px dotted;
    width: 49%;
}
#block-accreds .inner ul {
    text-align: right;
}
#block-accreds .inner li {
    display: inline-block;
    margin: 0 15px 0 15px;
}
#block-accreds .inner li img {
    height: 130px;
    vertical-align: middle;
}
#appleteacher {
    margin-top: 65px;
}
#appleteacher-small {
    display: none;
}
#blocks, #block-hello, #block-websites, #block-accreds {
    width: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
}
/* Extra small devices (phones, 480px and down) */
@media only screen and (max-width: 480px) {
    #block-hello .left {
        width: 100%;
    }
    #block-hello ul {
        margin-top: 0;
    }
    #block-hello .right {
        display: none;
    }
    #block-accreds .left {
        display: none;
    }
    #block-accreds .right {
        width: 100%;
        float: none;
        clear: both;
    }
    #block-accreds .inner ul {
        text-align: center;
    }

    #appleteacher-small {
        display: block;
        width: 65%;
        margin: 15px auto 10px auto;
    }
}
/* Small devices (portrait tablets and large phones, 768px and up) */
@media only screen and (min-width: 481px) and (max-width: 768px) {
    #block-hello {
        height: 300px;
    }
    #block-hello .left {
        width: 50%;
    }
    #block-hello ul {
        margin-top: 0;
        font-size: 60%;
    }
    #block-hello .right {
        width: 50%;
        height: 300px;
        background-size: cover;
    }
    #block-accreds li {
        height: 85px;
        width: 85px;
    }
    #block-accreds .inner li img {
        height: 100%;
    }
    #appleteacher {
        margin-top: 45px;
        width: 75%;
    }
}