@import"http://fonts.googleapis.com/css?family=RobotoDraft:400,300";@media screen and (min-width:650px){.row:after{content:"";display:table;clear:both}[class*=span-]{display:block;float:left;width:100%}.span-1{width:8.33333333333%}.span-2{width:16.6666666667%}.span-3{width:25%}.span-4{width:33.3333333333%}.span-5{width:41.6666666667%}.span-6{width:50%}.span-7{width:58.3333333333%}.span-8{width:66.6666666667%}.span-9{width:75%}.span-10{width:83.3333333333%}.span-11{width:91.6666666667%}.span-12{width:100%}.gutter [class*=span-]{margin-right:2%}.gutter [class*=span-]:last-child{margin-right:0}.gutter .span-1{width:6.5%}.gutter .span-2{width:15%}.gutter .span-3{width:23.5%}.gutter .span-4{width:32%}.gutter .span-5{width:40.5%}.gutter .span-6{width:49%}.gutter .span-7{width:57.5%}.gutter .span-8{width:66%}.gutter .span-9{width:74.5%}.gutter .span-10{width:83%}.gutter .span-11{width:91.5%}.gutter .span-12{width:100%}}.clearfix:before,.clearfix:after{content:"";display:table}.clearfix:after{clear:both}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}footer,header,section{display:block;-moz-box-sizing:border-box;box-sizing:border-box}img{border:0}h1{font-size:2.5em;font-weight:400;color:#3f3f3f;margin:40px 0}h2{font-size:2.3em;font-weight:400;color:#3f3f3f;margin:1em auto;text-align:center}strong{font-weight:bold}body{background:#fafafa;font-family:"RobotoDraft",sans-serif;font-weight:400;font-size:14px;line-height:24px;color:#777;margin:0;padding:0;width:100%;height:100%;overflow-x:hidden}a{background:transparent;color:#02a8f3;text-decoration:none}a:active,a:hover{outline:0}svg{position:absolute;z-index:1}section{padding:0 0 30px}.section-wrapper{margin:0 auto;max-width:1440px}.paper-button:before,.paper-button:after{background:no-repeat 50% 50%;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;-moz-box-shadow:0 2px 10px 0 rgba(0,0,0,.16);-webkit-box-shadow:0 2px 10px 0 rgba(0,0,0,.16);box-shadow:0 2px 10px 0 rgba(0,0,0,.16);content:"";height:50px;left:0;position:absolute;right:0;top:0;-moz-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-moz-transition:all .28s cubic-bezier(.4,0,.2,1);-webkit-transition:all .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1);width:50px}.paper-button:before{-moz-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);box-shadow:0 2px 5px 0 rgba(0,0,0,.26)}.paper-button:hover:before{-moz-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);box-shadow:0 2px 5px 0 rgba(0,0,0,.26)}.paper-button:hover:after{-moz-box-shadow:0 8px 17px 0 rgba(0,0,0,.2);-webkit-box-shadow:0 8px 17px 0 rgba(0,0,0,.2);box-shadow:0 8px 17px 0 rgba(0,0,0,.2)}.btn-next{background:#fff;color:#000;display:block;left:0;pointer-events:all;position:absolute;right:0;top:-25px}.btn-next:before{background:#fff}.btn-next:after{background:url(../images/arrow-down.png) no-repeat 50% 50%;-webkit-background-size:100%;background-size:100%;opacity:.5}.btn-next:hover:after{opacity:1}.btn-next span{display:block;width:0;height:0;overflow:hidden}header{background-color:#03a9f4}header .section-wrapper{position:relative;padding-bottom:35%}header h1{bottom:35%;color:#fff;font-size:4em;height:1em;left:0;line-height:1;margin:auto;position:absolute;text-align:left;width:auto}.intro{padding-top:90px;position:relative}.intro p{color:#6c6c6c;font-size:1.429em;font-weight:400;line-height:1.8}.intro .span-9{float:none;width:100%}.resources{margin:0 auto;padding-top:30px}.resource-tile{-moz-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-moz-transition:all .2s cubic-bezier(.4,0,.2,1);-webkit-transition:all .2s cubic-bezier(.4,0,.2,1);transition:all .2s cubic-bezier(.4,0,.2,1)}.resource-tile-wrapper{-moz-box-sizing:border-box;box-sizing:border-box;border:2px solid #fff}.resource-tile>a{color:#fff;display:block;overflow:hidden;padding-bottom:50%;position:relative;-moz-transition:all .2s;-webkit-transition:all .2s;transition:all .2s;-moz-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.resource-tile:hover{-moz-box-shadow:0 17px 50px 0 rgba(0,0,0,.19);-webkit-box-shadow:0 17px 50px 0 rgba(0,0,0,.19);box-shadow:0 17px 50px 0 rgba(0,0,0,.19);position:relative;z-index:100}.resource-tile:hover a{-moz-box-shadow:0 12px 15px 0 rgba(0,0,0,.24);-webkit-box-shadow:0 12px 15px 0 rgba(0,0,0,.24);box-shadow:0 12px 15px 0 rgba(0,0,0,.24)}.google-spec a{background-color:#ff4081}.google-spec .bg{background:url(../images/google_spec.png) no-repeat 50% 50%}.material-reel a{background-color:#ab47bc}.material-reel .bg{background:url(../images/materialreel.png) no-repeat 50% 50%}.design-principles a{background-color:#00bcd4}.design-principles .bg{background:url(../images/principles.png) no-repeat 50% 50%}.doodle-archive a{background-color:#ffcd40}.doodle-archive .bg{background:url(../images/doodlearchive.png) no-repeat 50% 50%}.google-plus a{background-color:#36C3FF}.google-plus .bg{background:url(../images/googleplus.png) no-repeat 50% 50%}.design-minutes a{background-color:#ff5252}.design-minutes .bg{background:url(../images/design-minutes.png) no-repeat 50% 50%}.google-cast a{background-color:#4527a0}.google-cast .bg{background:url(../images/cast.png) no-repeat 50% 50%}.glass-design a{background-color:#ffab91}.glass-design .bg{background:url(../images/glass.png) no-repeat 50% 50%}.web-designer a{background-color:#8bc34a}.web-designer .bg{background:url(../images/webdesigner.png) no-repeat 50% 50%}.resource-tile .bg{-webkit-background-size:100%;background-size:100%;display:block;height:100%;position:absolute;-moz-transition:-moz-transform .2s cubic-bezier(.4,0,.2,1);-webkit-transition:-webkit-transform .2s cubic-bezier(.4,0,.2,1);transition:transform .2s cubic-bezier(.4,0,.2,1);width:100%;z-index:1}.resource-tile.span-6 .bg{-webkit-background-size:70%;background-size:70%}.resource-tile .cover{-webkit-background-size:cover;background-size:cover}.resource-tile .title{bottom:1em;color:#fff;display:block;font-size:1.329em;font-weight:400;left:0;line-height:1.3em;margin:0 auto;padding:0 1.5em;position:absolute;right:0;text-align:left;z-index:10}.pdf-title{padding-right:.35em;line-height:1.1}.pdf-text{color:rgba(255,255,255,.6);font-size:.8em;line-height:1em}.backtotop{display:none}.backtotop a{background-color:#e4e4e4}.backtotop .bg{background:url(../images/arrow-up-mobile_2x.png) no-repeat 50% 50%}.ripple{-moz-transform-origin:50%;-webkit-transform-origin:50%;transform-origin:50%}#principles-gallery-links{font-size:1.4em;margin:1em 0 2em;text-align:center}#principles-gallery-links li{display:inline-block;padding:0 .7em}.google-js #principles-gallery-links{display:none}.careers{margin:80px auto}.careers h2{line-height:1em;margin-top:0;text-align:left}.careers .span-3{-moz-box-sizing:border-box;box-sizing:border-box;float:left;padding-right:2em}.careers a,.more-design-links h2{color:#3f3f3f;display:block;font-size:1.429em;padding:.4em 0 0 35px;position:relative}.more-design-links a:hover,.careers a:hover{text-decoration:underline}.careers a:before{background:no-repeat 0 50%;content:"";height:40px;left:0;position:absolute;top:0;width:30px}.careers p{color:#979797;line-height:1.7em}.careers .jobs a:before{background-image:url(../images/find-a-job.png)}.careers .students a:before{background-image:url(../images/student.png)}.careers .life a:before{background-image:url(../images/life-at-google.png)}.more-design-links{background:#eee}.more-design-links .section-wrapper{padding:50px 0}.more-design-links h2{color:#6c6c6c;padding-left:0;text-align:left}.more-design-links ul{-moz-column-count:3;-webkit-column-count:3;column-count:3;list-style-type:none;margin:0;padding:0}.more-design-links li{margin:0;padding-right:1.5em}.more-design-links a{color:#666;line-height:1.4em;display:inline-block}footer{background:#444;height:125px}footer ul{margin:0;padding:51px 0 0;text-align:right}footer li{display:inline;line-height:2.19;list-style:none;margin:auto}footer a{color:#f3f3f3;font-size:.9em;font-weight:400}footer a:hover{text-decoration:underline}footer li+li:before{content:"·";padding:0 4px 0 3px}.logo{content:-webkit-image-set(url(../images/google-logo-grey.png) 1x,url(../images/google-logo-grey_2x.png) 2x);display:inline-block;float:left;margin-top:45px;width:96px}@media screen and (max-width:1200px){.intro{padding-top:8%}.btn-next{margin:-.1% 6.5% 0}}@media screen and (max-width:1200px){.material-reel .bg{-webkit-background-size:85%;background-size:85%;background-position:50% 20%}}@media screen and (max-width:950px){.resource-tile .title{bottom:.6em;font-size:1.3em;padding:0 1em}.careers .span-3{width:33.33333%}.more-design-links .span-9{width:100%}}@media screen and (max-width:840px){.resource-tile .title{bottom:.7em;font-size:1.229em;line-height:1.2;padding:0 1em}.careers{margin:55px auto}.careers .span-3{width:33%}.paper-button:before,.paper-button:after{height:40px;width:40px}.careers h2{text-align:center}.more-design-links a{padding:.6em 0}}@media screen and (max-width:649px){body{font-size:13px}header h1{bottom:0;top:0}.resources:after{content:"";display:table;clear:both}.resource-tile-wrapper{float:left;width:50%}.resource-tile-wrapper.span-6 .bg{-webkit-background-size:200%;background-size:200%}.resource-tile-last{clear:both;float:none;margin:0 auto}.resource-tile a{padding-bottom:100%}.resource-tile .cover{margin:0;width:100%;-webkit-background-size:cover;background-size:cover}.resource-tile .title{font-size:1.2em}.backtotop{display:block}.backtotop .title{visibility:hidden}.careers a{font-size:1.2em;line-height:1.5em;padding:35px 0 0;text-align:center}.careers a:before{background-position:50%;margin:0 auto;right:0}.careers .span-3{padding-right:1.5em}}@media screen and (max-width:520px){header .section-wrapper{padding-bottom:40%}header h1{font-size:2.7em}.careers p{display:none}.more-design-links ul{-moz-column-count:2;-webkit-column-count:2;column-count:2}.more-design-links a{display:inline-block;padding:.8em 0}}@media screen and (max-width:400px){header,section,footer{padding-left:1em;padding-right:1em}h2{font-size:2em;margin-bottom:1em}.paper-button:before,.paper-button:after{height:30px;width:30px}.btn-next{margin:.6em 1em}.intro{padding-top:16%}.intro p{font-size:1.3em;line-height:1.55}.resource-tile .title{font-size:1em}.pdf-title{padding-right:.1em}.careers .span-3{padding-right:0}.more-design-links .section-wrapper{padding:25px 0}.more-design-links ul{-moz-column-count:1;-webkit-column-count:1;column-count:1}footer{padding-top:25px}footer ul{clear:both;padding:0;text-align:center}footer a{font-size:1em}.logo{display:block;float:none;margin:0 auto}.resource-tile-wrapper .google-spec .bg{-webkit-background-size:160%;background-size:160%;background-position:50% 20%}.material-reel .bg{-webkit-background-size:80%;background-size:80%;background-position:50% 20%}}@media screen and (max-width:320px){header h1{font-size:2.3em}.careers a{font-size:1.1em}}@media screen and (min-width:401px) and (max-width:1439px){header,section,footer{padding-left:6.5%;padding-right:6.5%}}@media screen and (min-width:650px){.careers h2{display:none}.span-6 .resource-tile>a{padding-bottom:49.405%}.span-3 .resource-tile>a{padding-bottom:100%}.google-plus .bg{-webkit-background-size:cover;background-size:cover}}@media screen and (min-width:841px){header h1{font-size:4em}.intro .span-9{width:75%}.span-6 .resource-tile>a{padding-bottom:49.545252%}}@media screen and (min-width:1024px){.span-6 .resource-tile>a{padding-bottom:49.547511%}}@media screen and (min-width:1201px) and (min-height:800px){header .section-wrapper{padding-bottom:512px}.span-6 .resource-tile>a{padding-bottom:49.6805%}.intro{margin-bottom:1.8%}.careers{margin:135px auto}.more-design-links .section-wrapper{padding:90px 0}.footer{margin-top:150px}}@media screen and (min-width:1201px){.btn-next{margin-left:6.5%}}@media screen and (min-width:1440px){.section-wrapper{max-width:1260px}.btn-next{margin-left:0}}@media screen and (min-width:1000px) and (max-height:700px){header .section-wrapper{padding-bottom:25%}}@media screen and (min-resolution:192dpi){.careers .jobs a:before{background-image:url(../images/find-a-job_2x.png)}.careers .students a:before{background-image:url(../images/student_2x.png)}.careers .life a:before{background-image:url(../images/life-at-google_2x.png)}.careers a:before{-webkit-background-size:22px;background-size:22px}}@media screen and (min-resolution:192dpi) and (min-width:768px){.google-spec .bg{background-image:url(../images/google_spec_2x.png)}.material-reel .bg{background-image:url(../images/materialreel_2x.png)}.design-principles .bg{background-image:url(../images/principles_2x.png)}.doodle-archive .bg{background-image:url(../images/doodlearchive_2x.png)}.google-plus .bg{background-image:url(../images/googleplus_2x.png)}.design-minutes .bg{background-image:url(../images/design-minutes_2x.png)}.google-cast .bg{background-image:url(../images/cast_2x.png)}.glass-design .bg{background-image:url(../images/glass_2x.png)}.web-designer .bg{background-image:url(../images/webdesigner_2x.png)}.gweb-lightbox-prev span{background-image:url(../images/left_2x.png)}.gweb-lightbox-next span{background-image:url(../images/right_2x.png)}}@media screen,projection{.gweb-lightbox-bg{background:rgba(30,30,30,.8);left:0;position:fixed;top:0;z-index:9998}.gweb-lightbox-title-text{display:block;font-family:RobotoDraft;padding:0 31px 5px 0}.gweb-lightbox-title-text span{font-weight:normal;padding:0 8px}.gweb-lightbox-title-close{background:url(../images/close.png) no-repeat 50% 50%;color:#fff;cursor:pointer;position:absolute;right:-45px;display:block;top:-45px;z-index:100;height:20px;width:20px}.gweb-lightbox-title-close:hover{color:#f0f0f0}#gweb-lightbox-video-link.gweb-lightbox,.gweb-lightbox{background:#fff;border:65px solid #fff;color:#000;font:13px/1.4 Arial,sans-serif;outline:none;overflow:hidden;position:absolute;z-index:9999;-moz-transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-transition:all .3s cubic-bezier(.4,0,.2,1);transition:all .3s cubic-bezier(.4,0,.2,1)}#gweb-lightbox-video-link .gweb-lightbox-title,.gweb-lightbox-title{color:#000;cursor:pointer;display:block;font-size:1.1em;font-weight:normal;position:absolute;top:0;width:100%}#gweb-lightbox-video-link .gweb-lightbox-title-text{color:#333;display:block;font-size:1em;font-weight:bold;padding:0 31px 5px 0}#gweb-lightbox-video-link .gweb-lightbox-video-link-caption,#gweb-lightbox-video-link-iframe{max-width:100%}#gweb-lightbox-video-link .gweb-lightbox-content{display:block;margin:0;min-height:330px;min-width:590px;overflow:hidden;padding:0;position:relative;text-align:center}#gweb-lightbox-video-link .gweb-lightbox-caption{font-family:RobotoDraft;left:0;max-width:100%;padding:0;position:absolute;text-align:left;top:0}.gweb-lightbox-nav{border:0;cursor:pointer;display:block;margin:0;outline:none;padding:0;position:absolute;text-decoration:none;top:0;width:35%;z-index:1000}.gweb-lightbox-next{right:0;text-align:right}.gweb-lightbox-prev{left:0;text-align:left}.gweb-lightbox-nav span{background:no-repeat 50% 50%;-webkit-background-size:16px 16px;background-size:16px 16px;color:transparent;display:block;font-size:2em;font-weight:normal;position:absolute;top:48%;-moz-transition:all 150ms ease-out;-webkit-transition:all 150ms ease-out;transition:all 150ms ease-out;visibility:visible}.gweb-lightbox-prev span{background-image:url(../images/left.png);padding:3px 1em 3px 1em}.gweb-lightbox-next span{background-image:url(../images/right.png);padding:3px 1em 3px 1em;right:0}.gweb-lightbox-nav:hover span{padding:3px .7em;visibility:visible !important}#gweb-lightbox-principles-gallery .gweb-lightbox-caption{font-family:RobotoDraft;margin:0;text-align:left;width:100% !important}#gweb-lightbox-principles-gallery-image{max-width:100%}}@media screen and (max-width:840px){#gweb-lightbox-video-link.gweb-lightbox,.gweb-lightbox{border-width:35px}.gweb-lightbox-title-close{right:0;top:0}}@media screen and (max-width:767px){#gweb-lightbox-principles-gallery.gweb-lightbox{border-width:10px;width:100% !important;left:0 !important}#gweb-lightbox-principles-gallery-image{width:100% !important;height:auto !important}#gweb-lightbox-principles-gallery .gweb-lightbox-caption{bottom:6px;position:relative;background:#fff}}@media screen and (max-width:400px){.gweb-lightbox-nav span{top:150px}}@media screen and (max-height:600px){#gweb-lightbox-principles-gallery.gweb-lightbox{max-width:600px}}