.material-grid, .material-icon {
    font-family: Roboto, Arial !important
}

@-webkit-keyframes materialResponse {
    0% {
        width: 0;
        height: 0;
        margin: 0;
        background: rgba(255, 255, 255, .1)
    }
    100% {
        width: 250%;
        height: 250%;
        margin: -125%;
        background: rgba(255, 255, 255, .4)
    }
}

@keyframes materialResponse {
    0% {
        width: 0;
        height: 0;
        margin: 0;
        background: rgba(255, 255, 255, .1)
    }
    100% {
        width: 250%;
        height: 250%;
        margin: -125%;
        background: rgba(255, 255, 255, .4)
    }
}

.material-grid {
    width: 360px;
    height: 360px;
    margin: 40px auto
}

.material-grid section, section.material-standalone-section {
    width: 180px;
    padding: 0;
    height: 180px;
    float: left;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.material-grid section:before, section.material-standalone-section:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 999px;
    cursor: pointer
}

.material-grid section:active:before, section.material-standalone-section:active:before {
    -webkit-animation: materialResponse .4s ease;
    animation: materialResponse .4s ease;
    z-index: 3
}

section.material-standalone-section {
    margin: 0 20px 20px 0
}

.material-icon {
    width: 70px;
    height: 70px;
    margin: 55px;
    position: relative
}

.material-icon, .material-icon span {
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease
}

.material-icon span {
    background-color: #fff;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1
}

.material-icon:after, .material-icon:before {
    content: "1";
    background: 0 0;
    display: block;
    position: absolute;
    top: -50px;
    left: 0;
    width: 100px;
    height: 40px;
    -webkit-transform: translateY(0);
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
    z-index: 2;
    font-weight: 700;
    color: transparent
}

.failed-loader .third, .loader-only-trailer .second, .no-mask .material-icon:after, .no-mask .material-icon:before {
    display: none
}

.material-icon:after {
    content: "2";
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
    top: auto;
    bottom: -10px
}

.arrow span, .hamburger span {
    height: 10px;
    -webkit-transform: translateY(29px);
    transform: translateY(29px)
}

.hamburger .second {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.hamburger .third {
    -webkit-transform: translateY(60px);
    transform: translateY(60px)
}

.arrow {
    -webkit-transform: rotate(180deg) translateX(-3px);
    transform: rotate(180deg) translateX(-3px)
}

.arrow .second, .arrow .third {
    -webkit-transform: rotate(-45deg) translateY(56px);
    transform: rotate(-45deg) translateY(56px);
    width: 40px
}

.arrow .second {
    -webkit-transform: rotate(45deg) translateY(-15px) translateX(40px);
    transform: rotate(45deg) translateY(-15px) translateX(40px)
}

.not-play, .pause {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.not-play span, .pause span {
    height: 25px
}

.not-play .second, .pause .second {
    -webkit-transform: translateY(45px);
    transform: translateY(45px)
}

.not-play .first {
    -webkit-transform: translateY(15px) translateX(15px) rotate(60deg);
    transform: translateY(15px) translateX(15px) rotate(60deg)
}

.not-play .third {
    -webkit-transform: translateY(15px) translateX(-15px) rotate(-60deg);
    transform: translateY(15px) translateX(-15px) rotate(-60deg)
}

.stop {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg)
}

.play span, .stop span {
    height: 35px
}

.play .second, .stop .second {
    height: 45px;
    -webkit-transform: translateY(25px);
    transform: translateY(25px)
}

.play {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.play:before {
    -webkit-transform: translateY(26px) translateX(-17px) rotate(-26deg);
    transform: translateY(26px) translateX(-17px) rotate(-26deg)
}

.play:after {
    -webkit-transform: translateY(11px) translateX(-22px) rotate(26deg);
    transform: translateY(11px) translateX(-22px) rotate(26deg)
}

.plus-one .first, .plus-one .second, .plus-two .first, .plus-two .second {
    width: 30px;
    height: 6px;
    -webkit-transform: translateY(32px);
    transform: translateY(32px)
}

.plus-one .second, .plus-two .first {
    -webkit-transform: translateY(32px) rotate(90deg);
    transform: translateY(32px) rotate(90deg)
}

.plus-two .second {
    -webkit-transform: translateY(32px) rotate(180deg);
    transform: translateY(32px) rotate(180deg)
}

.plus-one:after, .plus-one:before, .plus-two:after, .plus-two:before {
    text-align: center !important;
    background: 0 0 !important
}

.plus-one:before, .plus-two:after {
    color: #fff;
    font-size: 52px;
    line-height: 70px;
    font-weight: 700;
    -webkit-transform: translateY(45px) translateX(0);
    transform: translateY(45px) translateX(0)
}

.plus-two:after {
    -webkit-transform: translateY(-45px) translateX(0);
    transform: translateY(-45px) translateX(0)
}

.material-green, .material-green .material-icon:after, .material-green .material-icon:before {
    background: #4CAF50
}

.material-amber, .material-amber .material-icon:after, .material-amber .material-icon:before {
    background: #FFC107
}

.material-blue, .material-blue .material-icon:after, .material-blue .material-icon:before {
    background: #2196F3
}

.material-red, .material-red .material-icon:after, .material-red .material-icon:before {
    background: #F44336
}

.visible-masks .material-icon:after, .visible-masks .material-icon:before {
    background: #000;
    background: rgba(0, 0, 0, .5)
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes spin {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes leader {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    12% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        border-bottom-color: transparent
    }
    12.00001% {
        border-bottom-color: #fff
    }
    25% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border-bottom-color: #fff
    }
    37.5% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border-bottom-color: #fff;
        border-right-color: transparent
    }
    37.50001%, 50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border-bottom-color: transparent;
        border-right-color: transparent
    }
    67.5% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
        border-bottom-color: transparent;
        border-right-color: transparent
    }
    67.50001% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
        border-bottom-color: #fff;
        border-right-color: transparent
    }
    75%, 87.5% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border-bottom-color: #fff;
        border-right-color: transparent
    }
    100%, 87.50001% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border-bottom-color: transparent;
        border-right-color: transparent
    }
}

@keyframes leader {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    12% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        border-bottom-color: transparent
    }
    12.00001% {
        border-bottom-color: #fff
    }
    25% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border-bottom-color: #fff
    }
    37.5% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border-bottom-color: #fff;
        border-right-color: transparent
    }
    37.50001%, 50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border-bottom-color: transparent;
        border-right-color: transparent
    }
    67.5% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
        border-bottom-color: transparent;
        border-right-color: transparent
    }
    67.50001% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
        border-bottom-color: #fff;
        border-right-color: transparent
    }
    75%, 87.5% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border-bottom-color: #fff;
        border-right-color: transparent
    }
    100%, 87.50001% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border-bottom-color: transparent;
        border-right-color: transparent
    }
}

@-webkit-keyframes trailer {
    0%, 25% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    37.5% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border-bottom-color: transparent;
        border-right-color: transparent
    }
    75% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
    87.5% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border-bottom-color: transparent;
        border-right-color: transparent
    }
}

@keyframes trailer {
    0%, 25% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    37.5% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border-bottom-color: transparent;
        border-right-color: transparent
    }
    75% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
    87.5% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border-bottom-color: transparent;
        border-right-color: transparent
    }
}

.failed-loader {
    -webkit-animation: spin 3s infinite .5s linear;
    animation: spin 3s infinite .5s linear
}

.failed-loader span {
    width: 58px;
    height: 58px;
    border: 6px solid #fff;
    background: 0 0;
    border-radius: 70px;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-right-color: transparent;
    -webkit-animation: trailer 1.5s linear .5s infinite;
    animation: trailer 1.5s linear .5s infinite
}

.failed-loader .first {
    -webkit-animation: leader 1.5s linear .5s infinite;
    animation: leader 1.5s linear .5s infinite
}

.loader-step-one, .loader-step-three, .loader-step-two {
    border: 6px solid #fff;
    border-top-color: transparent
}

.loader-step-three, .loader-step-two {
    border-radius: 50px
}

.loader-step-three {
    -webkit-animation: spin 3s infinite .5s linear;
    animation: spin 3s infinite .5s linear
}

video {
    max-width: 360px;
    margin: auto;
    width: 98%;
    display: block
}