.banner {
    flex-direction:column;
    justify-content:center;
    align-items:center;
    display:-webkit-flex;
    -webkit-flex-direction:column;
    -webkit-justify-content:center;
    -webkit-align-items:center;
    width:100%;
    background-size:100% auto
}
.banner h1, .banner h2 {
    margin-left:-10000px
}
.content {
    margin:70px auto;
    min-height:0;
    width:85%
}
.content div {
    display:inline-block;
    width:33%;
    padding:30px 20px;
    vertical-align:top;
    font-size:15px
}
.content div h2 {
    margin:10px 0 15px;
    color:#000;
    font-size:20px
}
.content div span {
    display:block;
    margin-left:50px;
    color:#666;
    line-height:24px;
    text-align:justify;
    word-wrap:break-word;
    word-break:break-all;
    white-space:pre-wrap
}
.content div i {
    float:left;
    margin-right:14px;
    font-size:36px;
    color:#24bde5
}
.blockly {
    width:100%;
    background-image:url(../../img/index/banner-blockly.jpg);
    background-size:cover;
    background-attachment:fixed;
    text-align:center
}
.blockly h2 {
    color:#fff;
    margin:0 auto;
    padding:20px 0 0;
    text-align:center;
    font-size:36px
}
.blockly span {
    display:inline-block;
    padding:5px 0;
    font-size:18px;
    color:#aaa
}
.blockly span:first-child {
    padding-top:50px
}
.blockly span i {
    color:#ccc;
    text-decoration:underline
}
.blockly a.button {
    display:inline-block;
    color:#fff;
    outline:0;
    font-size:22px;
    background-image:linear-gradient(top, #f30, #f90);
    background-image:-moz-linear-gradient(top, #f30, #f90);
    background-image:-webkit-linear-gradient(top, #f30, #f90);
    border:none;
    width:200px;
    height:50px;
    border-radius:5px;
    line-height:50px;
    box-shadow:inset #f90 0 0 10px;
    text-shadow:#a30 0 0 10px;
    margin:0 auto 50px;
    transition:.3s;
    -webkit-transition:.3s;
    -moz-transition:.3s
}
.blockly a.button i {
    width:22px;
    height:22px;
    margin-left:-30px;
    opacity:0;
    transition:.3s;
    -webkit-transition:.3s;
    -moz-transition:.3s
}
.blockly a.button.b2 {
    margin-left:10px;
    background-image:-webkit-linear-gradient(#09c, #0cf);
    background-image:-o-linear-gradient(#09c, #0cf);
    background-image:linear-gradient(#09c, #0cf);
    text-shadow:#036 0 0 10px;
    box-shadow:inset #069 0 0 10px
}
.blockly a.button:hover i {
    margin-left:10px;
    opacity:1
}
.blockly img {
    width:100%;
    max-width:939px
}
.resources, .tutorials-menu {
    display:table;
    width:100%
}
.resources h2, .resources span, .tutorials-menu h2, .tutorials-menu span {
    display:block;
    width:100%;
    text-align:center
}
.resources h2, .tutorials-menu h2 {
    margin-top:30px;
    margin-bottom:10px;
    font-size:30px;
    font-family:Arial
}
.resources span, .tutorials-menu span {
    margin-bottom:40px;
    font-size:18px
}
.resources .no, .tutorials-menu .no {
    opacity:.3
}
.tutorials-menu {
    border-top:5px solid #ddd
}
.tutorials-menu .menu-content {
    display:table;
    width:100%;
    margin:0 auto;
    text-align:center
}
.tutorials-menu .menu-content div {
    z-index:2;
    float:left;
    overflow:hidden;
    width:25%;
    margin:0;
    padding:0;
    vertical-align:top
}
.tutorials-menu .menu-content div:after, .tutorials-menu .menu-content div:before {
    pointer-events:none;
    width:100%;
    transition:.3s;
    -webkit-transition:.3s;
    -moz-transition:.3s
}
.tutorials-menu .menu-content div:before {
    z-index:3;
    content:attr(data-title);
    color:#fff;
    height:50px;
    line-height:50px;
    font-size:15px;
    bottom:-50px;
    background:rgba(0, 0, 0, .8)
}
.tutorials-menu .menu-content div:after {
    z-index:2;
    height:100%;
    top:0;
    left:0;
    background:rgba(0, 0, 0, .2)
}
.tutorials-menu .menu-content div img {
    transition:.3s;
    -webkit-transition:.3s;
    -moz-transition:.3s;
    width:100%;
    height:100%
}
.tutorials-menu .menu-content div:hover {
    z-index:3
}
.tutorials-menu .menu-content div:hover img {
    margin-top:-2%;
    margin-left:-2%;
    height:104%;
    width:104%
}
.tutorials-menu .menu-content div:hover:after {
    background:0 0
}
.tutorials-menu .menu-content div:hover:before {
    bottom:0
}
.tutorials-menu .goto-tutorials {
    padding:50px;
    background:#6b58cd;
    box-shadow:inset rgba(0, 0, 0, .1)0 5px 0 0;
    border-bottom:5px solid #ccc
}
.tutorials-menu .goto-tutorials h2 {
    margin:0 0 20px;
    color:#fff
}
.tutorials-menu .goto-tutorials a {
    display:block;
    width:200px;
    height:50px;
    margin:0 auto;
    color:#fff;
    font-size:20px;
    line-height:50px;
    text-align:center;
    border:1px solid #fff;
    transition:.3s;
    -webkit-transition:.3s;
    -moz-transition:.3s
}
.tutorials-menu .goto-tutorials a .fa {
    opacity:0;
    margin-left:-20px;
    transition:.3s;
    -webkit-transition:.3s;
    -moz-transition:.3s
}
.tutorials-menu .goto-tutorials a:hover {
    background:rgba(255, 255, 255, .1)
}
.tutorials-menu .goto-tutorials a:hover .fa {
    opacity:1;
    margin-left:6px
}
.resources {
    padding:80px 0 50px;
    text-align:center;
    background:#f1f1f1
}
.resources h2 {
    margin-bottom:30px
}
.resources a {
    display:inline-block;
    width:21%;
    padding:20px;
    vertical-align:top;
    color:#555
}
.resources a div, .resources a div:before {
    width:90px;
    height:90px;
    border-radius:50%
}
.resources a div {
    line-height:90px;
    background:#e1e1e1;
    margin:0 auto;
    font-size:26px;
    color:#555;
    transition:.3s;
    -webkit-transition:.3s;
    -moz-transition:.3s
}
.resources a div:before {
    border:1px solid #000;
    top:0;
    left:0;
    opacity:0;
    transition:.2s;
    -webkit-transition:.2s;
    -moz-transition:.2s
}
.resources a h3 {
    color:#000;
    font-size:18px;
    margin:30px 0 10px
}
.resources a span {
    color:#888;
    font-size:15px;
    text-align:justify;
    line-height:22px
}
.resources a:hover div {
    background:#000;
    color:#fff
}
@media (max-width:1000px) {
    .content {
        margin:30px auto
    }
    .content div {
        width:48%;
        padding:20px
    }
    /*.banner {
        height:450px
    }*/
    .banner h1 {
        font-size:60px
    }
    .banner h2 {
        font-size:50px
    }
}
@media (max-width:800px) {
    /*.banner {
        height:400px
    }*/
    .tutorials-menu .menu-content div {
        width:50%
    }
    .tutorials-menu .menu-content div:before {
        opacity:.8;
        bottom:0
    }
    .tutorials-menu .menu-content div:after {
        opacity:0
    }
    .blockly h2 {
        font-size:24px
    }
    .blockly span {
        font-size:18px
    }
    .resources a {
        width:45%
    }
}
@media (max-width:600px) {
    .content div {
        width:100%;
        padding:10px 20px 20px 0
    }
    /*.banner {
        height:300px
    }*/
    .tutorials-menu h2 {
        font-size:26px
    }
    .blockly h2 {
        font-size:20px
    }
    .blockly span {
        font-size:14px;
        padding:0 0 10px
    }
    .blockly a.button {
        width:300px;
        font-size:18px;
        margin:0 auto 10px
    }
    .blockly a.button.b2 {
        margin:0 auto 30px
    }
    .resources a {
        width:90%
    }
}
@media (max-width:500px) {
    /*.banner {
        margin-top:40px;
        height:200px
    }*/
    .tutorials-menu .menu-content div {
        width:100%
    }
}