-

TRENDING NEW MATERIAL DESIGN
The material environment is a 3D space, all objects have x, y, and z dimensions.
VIEW ALL FEATURES
-

EXPERIENCE THEME
VISUAL, MOTION AND INTERACTION
Material Design’s new suite of tools and guidelines all in one place.
#rev_slider_3_1_wrapper .tp-loader.spinner2{ background-color: #FFFFFF !important; } .tp-loop-wrap,.rev-btn{box-shadow:0 2px 1px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.3)}@media(max-width:480px){center{white-space:normal !important; text-align:center !important; font-size:24px !important; line-height:1.4em !important}} .ares.tp-bullets{}.ares.tp-bullets:before{content:” “;position:absolute;width:100%;height:100%;background:transparent;padding:10px;margin-left:-10px;margin-top:-10px;box-sizing:content-box}.ares .tp-bullet{width:13px;height:13px;position:absolute;background:rgba(229,229,229,1);border-radius:50%;cursor:pointer;box-sizing:content-box}.ares .tp-bullet:hover,.ares .tp-bullet.selected{background:rgba(255,255,255,1)}.ares .tp-bullet-title{position:absolute; color:136,136,136; font-size:12px; padding:0px 10px; font-weight:600; right:27px; top:-4px; background:rgba(255,255,255,0.75); visibility:hidden; transform:translatex(-20px); -webkit-transform:translatex(-20px); transition:transform 0.3s; -webkit-transition:transform 0.3s; line-height:20px; white-space:nowrap}.ares .tp-bullet-title:after{width:0px;height:0px;border-style:solid;border-width:10px 0 10px 10px;border-color:transparent transparent transparent rgba(255,255,255,0.75);content:” “; position:absolute; right:-10px;top:0px}.ares .tp-bullet:hover .tp-bullet-title{visibility:visible; transform:translatex(0px); -webkit-transform:translatex(0px)}.ares .tp-bullet.selected:hover .tp-bullet-title{background:rgba(255,255,255,1)}.ares .tp-bullet.selected:hover .tp-bullet-title:after{border-color:transparent transparent transparent rgba(255,255,255,1)}.ares.tp-bullets:hover .tp-bullet-title{visibility:hidden}.ares.tp-bullets:hover .tp-bullet:hover .tp-bullet-title{visibility:visible; transform:translateX(0px) translatey(0px); -webkit-transform:translateX(0px) translatey(0px)}.ares.nav-dir-vertical.nav-pos-hor-left .tp-bullet-title{right:auto; left:27px; transform:translatex(20px); -webkit-transform:translatex(20px)}.ares.nav-dir-vertical.nav-pos-hor-left .tp-bullet-title:after{border-width:10px 10px 10px 0 !important; border-color:transparent rgba(255,255,255,0.75) transparent transparent; right:auto !important; left:-10px !important}.ares.nav-dir-vertical.nav-pos-hor-left .tp-bullet.selected:hover .tp-bullet-title:after{border-color:transparent rgba(255,255,255,1) transparent transparent !important}.ares.nav-dir-horizontal.nav-pos-ver-center .tp-bullet-title,.ares.nav-dir-horizontal.nav-pos-ver-bottom .tp-bullet-title{top:-35px; left:50%; right:auto; transform:translateX(-50%) translateY(-10px);-webkit-transform:translateX(-50%) translateY(-10px)}.ares.nav-dir-horizontal.nav-pos-ver-center .tp-bullet-title:after,.ares.nav-dir-horizontal.nav-pos-ver-bottom .tp-bullet-title:after{border-width:10px 10px 0px 10px; border-color:rgba(255,255,255,0.75) transparent transparent transparent; right:auto; left:50%; margin-left:-10px; top:auto; bottom:-10px}.ares.nav-dir-horizontal.nav-pos-ver-center .tp-bullet.selected:hover .tp-bullet-title:after,.ares.nav-dir-horizontal.nav-pos-ver-bottom .tp-bullet.selected:hover .tp-bullet-title:after{border-color:rgba(255,255,255,1) transparent transparent transparent}.ares.nav-dir-horizontal.nav-pos-ver-center .tp-bullet:hover .tp-bullet-title,.ares.nav-dir-horizontal.nav-pos-ver-bottom .tp-bullet:hover .tp-bullet-title{transform:translateX(-50%) translatey(0px); -webkit-transform:translateX(-50%) translatey(0px)}.ares.nav-dir-horizontal.nav-pos-ver-top .tp-bullet-title{top:25px; left:50%; right:auto; transform:translateX(-50%) translateY(10px);-webkit-transform:translateX(-50%) translateY(10px)}.ares.nav-dir-horizontal.nav-pos-ver-top .tp-bullet-title:after{border-width:0 10px 10px 10px; border-color:transparent transparent rgba(255,255,255,0.75) transparent; right:auto; left:50%; margin-left:-10px; bottom:auto; top:-10px}.ares.nav-dir-horizontal.nav-pos-ver-top .tp-bullet.selected:hover .tp-bullet-title:after{border-color:transparent transparent rgba(255,255,255,1) transparent}.ares.nav-dir-horizontal.nav-pos-ver-top .tp-bullet:hover .tp-bullet-title{transform:translateX(-50%) translatey(0px); -webkit-transform:translateX(-50%) translatey(0px)}