html { color: #222; } a:visited { color: #551a8b; } a:hover { color: #06e; } img { vertical-align: middle; } html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } footer, header, main, nav, section { display: block; } a { background: 0 0; } a:active, a:hover { outline: 0; } b, strong { font-weight: 700; } img { border: 0; } pre { overflow: auto; } code, pre { font-family: monospace,monospace; font-size: 1em; } button { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button { text-transform: none; } button { -webkit-appearance: button; cursor: pointer; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } blockquote { margin: 0; } *, *::before, *::after { -ms-box-sizing: border-box; box-sizing: border-box; } html, body, button { -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } body { font-size: 16px; line-height: 1.625em; color: #404040; } body::after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; z-index: 9; display: none; background-image: linear-gradient(top,rgba(0,0,0,.15)95%,rgba(0,0,0,.15)100%); -ms-background-size: 100% 26px; background-size: 100% 26px; } pre { background: #f0f0f0; padding: 13px; } .container { -ms-box-sizing: content-box; box-sizing: content-box; position: relative; padding-left: 5%; padding-right: 5%; margin-left: auto; margin-right: auto; } @media only screen and (min-width:620px) { .container { padding-left: 4.8%; padding-right: 4.8%; max-width: 688px; } } @media only screen and (min-width:800px) { .container { padding-left: 4.4%; padding-right: 4.4%; max-width: 864px; } } @media only screen and (min-width:620px) { .container-medium { -ms-box-sizing: content-box; box-sizing: content-box; position: relative; padding-left: 5%; padding-right: 5%; margin-left: auto; margin-right: auto; } } @media only screen and (min-width:620px) and (min-width:620px) { .container-medium { padding-left: 4.8%; padding-right: 4.8%; max-width: 688px; } } @media only screen and (min-width:620px) and (min-width:800px) { .container-medium { padding-left: 4.4%; padding-right: 4.4%; max-width: 864px; } } @media only screen and (max-width:619px) { .container-small { -ms-box-sizing: content-box; box-sizing: content-box; position: relative; padding-left: 5%; padding-right: 5%; margin-left: auto; margin-right: auto; } } @media only screen and (max-width:619px) and (min-width:620px) { .container-small { padding-left: 4.8%; padding-right: 4.8%; max-width: 688px; } } @media only screen and (max-width:619px) and (min-width:800px) { .container-small { padding-left: 4.4%; padding-right: 4.4%; max-width: 864px; } } @font-face { font-family: "icons"; src: url("../../images/icons/icons.eot"); src: url("../../images/icons/icons.eot?#iefix") format("embedded-opentype"),url("../../images/icons/icons.woff2") format("woff2"),url("../../images/icons/icons.woff") format("woff"),url("../../images/icons/icons.ttf") format("truetype"),url("../../images/icons/icons.svg?#icons") format("svg"); font-weight: 400; font-style: normal; } .icon { font-family: "icons"; display: inline-block; vertical-align: top; line-height: 1; font-weight: 400; font-style: normal; speak: none; text-decoration: inherit; text-transform: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-bullet::before, ul li::before, ul.list-links a::before, .list-anchor a::before { content: "\e001"; } .icon-chevron-down::before { content: "\e002"; } .icon-chevron-large::before { content: "\e003"; } .icon-chevron-left::before, .article-nav-link--prev::before { content: "\e004"; } .icon-chevron-right::before, .article-nav-link--next::before, ul.list-links.list-links--primary a::before { content: "\e005"; } .icon-chevron-up::before { content: "\e006"; } .icon-close::before { content: "\e007"; } .icon-cog::before { content: "\e008"; } .icon-diamond::before { content: "\e009"; } .icon-exclamation::before { content: "\e00a"; } .icon-google-dev::before { content: "\e00b"; } .icon-hash::before { content: "\e00c"; } .icon-introduction-to-media::before { content: "\e00d"; } .icon-lessons::before { content: "\e00e"; } .icon-menu::before { content: "\e00f"; } .icon-minus::before { content: "\e010"; } .icon-multi-device-layouts::before { content: "\e011"; } .icon-performance::before { content: "\e012"; } .icon-plus::before { content: "\e013"; } .icon-question::before { content: "\e014"; } .icon-slash::before { content: "\e015"; } .icon-star::before { content: "\e016"; } .icon-tick::before { content: "\e017"; } .icon-user-input::before { content: "\e018"; } .highlight-module { overflow: hidden; margin-top: 52px; margin-bottom: 26px; position: relative; } .highlight-module::after { background: #f0f0f0; content: ""; height: 100%; position: absolute; top: 0; bottom: 0; z-index: 0; width: 100%; right: 0; left: 0; } .highlight-module ul { padding-left: 0; } .highlight-module__container { -ms-box-sizing: content-box; box-sizing: content-box; padding-left: 5%; padding-right: 5%; margin-left: auto; margin-right: auto; padding-bottom: 78px; z-index: 1; position: relative; } @media only screen and (min-width:620px) { .highlight-module__container { padding-left: 4.8%; padding-right: 4.8%; max-width: 688px; } } @media only screen and (min-width:800px) { .highlight-module__container { padding-left: 4.4%; padding-right: 4.4%; max-width: 864px; } } .highlight-module__container::before { display: none; } @media only screen and (min-width:620px) { .highlight-module__container::before { display: block; position: absolute; top: 106px; right: 45px; font-family: "icons"; font-size: 130px; line-height: 1px; text-align: center; height: 100%; width: 30.3%; color: #fff; } } .highlight-module--left .highlight-module__container::before { right: auto; left: 45px; } @media only screen and (min-width:800px) { .highlight-module__container::before { top: 134px; width: 22.2%; font-size: 180px; } } @media only screen and (min-width:620px) { .highlight-module__container { padding-bottom: 52px; } } @media only screen and (min-width:800px) { .highlight-module__container { min-height: 208px; } } .highlight-module__title { font-family: "Roboto Condensed",Helvetica,sans-serif; font-size: 68px; font-weight: 300; line-height: 1.1471em; padding-bottom: 0; padding-top: 26px; } @media only screen and (min-width:800px) { .highlight-module__title { font-family: "Roboto Condensed",Helvetica,sans-serif; font-size: 110px; font-weight: 300; line-height: 1.19em; padding-top: .2364em; padding-bottom: 0; } } @media only screen and (min-width:800px) { .highlight-module__title { font-family: "Roboto Condensed",Helvetica,sans-serif; font-size: 42px; font-weight: 300; line-height: 1.2381em; padding-top: .619em; padding-bottom: 0; } } @media only screen and (min-width:800px) and (min-width:800px) { .highlight-module__title { font-family: "Roboto Condensed",Helvetica,sans-serif; font-size: 68px; font-weight: 300; line-height: 1.1471em; padding-top: .3824em; padding-bottom: 0; } } .highlight-module--learning { color: #fff; } .highlight-module--learning::after { background-color: #da2e75; } .highlight-module--remember { color: #fff; } .highlight-module--remember::after { background-color: #09829a; } .highlight-module--code { overflow: visible; margin-bottom: 52px; } .highlight-module--code pre { margin: 0; font-size: 14px; line-height: 26px; padding: 26px 0 0; } .highlight-module--code pre span { margin: 0; padding: 0; display: inline-block; } .highlight-module--code code { margin: 0; padding: 0; word-spacing: -2px; display: block; } .highlight-module--code .highlight-module__container { padding-bottom: 0; } @media only screen and (min-width:800px) { .highlight-module--left::after { width: 80%; right: 20%; } } @media only screen and (min-width:800px) { .highlight-module--right::after { width: 80%; left: 20%; } } @media only screen and (min-width:800px) { .highlight-module--right.highlight-module--code::after { width: 100%; left: 0; } } .highlight-module--inline { color: #404040; overflow: visible; margin: 26px 0 0; } .highlight-module--inline .highlight-module__container { padding-bottom: 0; } .highlight-module--inline .highlight-module__container::before { display: none; } .highlight-module--inline .highlight-module__content { border-color: #e0e0e0; border-style: solid; border-width: 1px; border-left-width: 0; border-right-width: 0; margin-bottom: -2px; padding: 0 0 26px; } .highlight-module--inline .highlight-module__title { font-size: 20px; font-weight: 300; line-height: 1.3em; padding-top: 1.3em; padding-bottom: 0; } @media only screen and (min-width:800px) { .highlight-module--inline .highlight-module__title { font-family: "Roboto Condensed",Helvetica,sans-serif; font-size: 26px; font-weight: 300; line-height: 1em; padding-top: 1em; padding-bottom: 0; } } .highlight-module--inline.highlight-module--remember .highlight-module__title, .highlight-module--inline.highlight-module--remember li::before { color: #09829a; } .highlight-module--inline.highlight-module--learning .highlight-module__title, .highlight-module--inline.highlight-module--learning li::before { color: #da2e75; } .highlight-module--inline::after { display: none!important; } code .highlight { background: 0 0; } code .highlight .cp { color: #737373; } code .highlight .s { color: #da2e75; } code .highlight .na { color: teal; } code .highlight .nt { color: #09829a; } .editorial-header { overflow: hidden; } .editorial-header .breadcrumbs, .editorial-header .breadcrumbs a { color: #3372df; } @media only screen and (min-width:620px) { .editorial-header .container { position: relative; } .editorial-header .container::before { content: "\e003"; font-family: "icons"; font-size: 1000px; line-height: 0; display: block; position: absolute; top: 0; right: 100%; color: #f0f0f0; margin: 168px -35px 0 0; } } .editorial-header__excerpt { font-size: 20px; font-weight: 300; line-height: 1.3em; padding-top: 1.3em; padding-bottom: 0; font-family: "Roboto Condensed",Helvetica,sans-serif; } .editorial-header .tag { padding-top: 52px; } .editorial-header__subtitle { font-family: "Roboto Condensed",Helvetica,sans-serif; font-size: 42px; font-weight: 300; line-height: 1.2381em; padding-bottom: 0; padding-top: 0; color: #3372df; } @media only screen and (min-width:800px) { .editorial-header__subtitle { font-family: "Roboto Condensed",Helvetica,sans-serif; font-size: 68px; font-weight: 300; line-height: 1.1471em; padding-top: .3824em; padding-bottom: 0; } } @media only screen and (min-width:620px) { .editorial-header__subtitle { padding-top: 0; padding-bottom: 26px; } } .summary-header { background-color: #3372df; padding-bottom: 78px; color: #fff; margin-bottom: 26px; -ms-box-shadow: inset 0 2px 0 0 #fff; box-shadow: inset 0 2px 0 0 #fff; } .summary-header__anchor-list { margin-top: 52px; } .summary-header__anchors-item a { color: #fff; } .articles-section { background: #f0f0f0; text-align: center; padding: 26px 0 104px; } .articles-count { color: #3372df; font-family: "Roboto Condensed",Helvetica,sans-serif; font-weight: 400; } .guides-section { background: #f0f0f0; padding: 26px 0 104px; } .guides-section, .page-header { text-align: center; } .page-header .breadcrumbs { text-align: left; color: #3372df; } .page-header .breadcrumbs a { color: #3372df; } .page-header h3 { color: #404040; padding-top: 52px; } .page-header__excerpt { position: relative; padding-top: 0; } .page-header__excerpt:last-child { padding-bottom: 78px; } .featured-section { background: #f0f0f0; } .featured-spotlight { background: #404040; color: #fff; overflow: hidden; padding-bottom: 77px; margin-top: 52px; } .featured-spotlight p { padding-bottom: 26px; } .featured-spotlight .cta--primary { color: #fff; } .featured-spotlight .cta--primary:hover { color: #fff; } .featured-spotlight__container { position: relative; } @media only screen and (max-width:619px) { .featured-spotlight__img { padding-top: 58.4%; padding-bottom: 0; height: 0; overflow: hidden; position: relative; width: 100%; } } .featured-spotlight__img img { display: block; width: 100%; position: absolute; left: 0; top: 0; margin: 0; } @media only screen and (min-width:620px) { .featured-spotlight__img img { width: auto; max-width: none; left: 109%; } } @media only screen and (min-width:800px) { .featured-spotlight__img img { left: 107.4%; } } .quote__content { position: relative; font-family: "Roboto Condensed",Helvetica,sans-serif; font-size: 16px; line-height: 1.625em; padding-bottom: 0; padding-top: 104px; padding-left: 26px; } @media only screen and (min-width:800px) { .quote__content { font-size: 20px; font-weight: 300; line-height: 1.3em; padding-top: 1.3em; padding-bottom: 0; } } @media only screen and (min-width:620px) { .quote__content { padding-top: 52px; padding-left: 0; } } .quote__content p { border-top: 1px solid #e0e0e0; text-align: right; font-weight: 500; margin-top: 12px; padding-top: 13px; } .quote__content::before { content: open-quote; display: block; position: absolute; font-family: "Roboto Condensed",Helvetica,sans-serif; font-weight: 700; color: #f0f0f0; top: 90px; left: 26px; font-size: 260px; } @media only screen and (min-width:620px) { .quote__content::before { top: 225px; left: -210px; font-size: 540px; } } .article-nav { overflow: hidden; position: relative; } .article-nav::before { content: ""; border-left: 2px solid #e0e0e0; height: 100%; position: absolute; top: 0; left: 50%; } .article-nav-link { padding: 26px 32px; float: left; width: 50%; position: relative; } .article-nav-link::before { position: absolute; top: 21px; font-family: "Roboto Condensed",Helvetica,sans-serif; font-size: 20px; font-weight: 400; } @media only screen and (min-width:620px) { .article-nav-link::before { top: 25px; font-size: 26px; display: block; padding: 13px 10px; color: #fff; background: #3372df; } } .article-nav p { padding: 0; margin: 0; } .article-nav-link--prev { text-align: right; } .article-nav-link--prev::before { font-family: "icons"; left: 32px; } @media only screen and (min-width:620px) { .article-nav-link--prev p { padding-left: 52px; } } .article-nav-link--next::before { font-family: "icons"; right: 32px; } @media only screen and (min-width:620px) { .article-nav-link--next p { padding-right: 52px; } } .article-nav-count { font-size: 20px; line-height: 1.3em; padding-top: 1.3em; padding-bottom: 0; font-weight: 700; } @media only screen and (min-width:800px) { .article-nav-count { font-family: "Roboto Condensed",Helvetica,sans-serif; font-size: 26px; font-weight: 300; line-height: 1em; padding-top: 1em; padding-bottom: 0; } } @media only screen and (min-width:620px) { .article-nav-count { font-weight: 400; } } .toc__title { font-size: 16px; line-height: 1.625em; padding-top: 1.625em; font-family: "Roboto Condensed",Helvetica,sans-serif; padding-bottom: 13px; margin-bottom: 12px; border-bottom: 1px solid #e0e0e0; } @media only screen and (min-width:800px) { .toc__title { font-size: 20px; font-weight: 300; line-height: 1.3em; padding-top: 1.3em; padding-bottom: 0; } } @media only screen and (min-width:620px) { .toc__title { padding-bottom: 13px; margin-bottom: 13px; } } .toc__list { padding-top: 0; border-bottom: 1px solid #e0e0e0; padding-bottom: 12px; margin-bottom: 13px; } .toc__list a { display: block; } .next-lessons { background: #404040; padding: 26px 26px 52px; margin-top: 26px; color: #fff; position: relative; } @media only screen and (min-width:620px) { .next-lessons h3 i { display: none; } } .next-lessons::before, .next-lessons::after { color: rgba(255,255,255,.5); position: absolute; display: none; } @media only screen and (min-width:620px) { .next-lessons::before, .next-lessons::after { display: inline-block; } } @media only screen and (min-width:620px) { .next-lessons::before { content: attr(data-current-lesson); font-family: "Roboto Condensed",Helvetica,sans-serif; font-size: 16px; font-weight: 400; line-height: 1; background: #404040; display: inline-block; padding: 5px 7px; right: 127px; top: 143px; z-index: 1; color: rgba(255,255,255,.5); } } @media only screen and (min-width:800px) { .next-lessons::before { font-size: 20px; padding-left: 15px; padding-right: 15px; top: 126px; right: 230px; } } @media only screen and (min-width:620px) { .next-lessons::after { content: "\e00e"; font-family: "icons"; font-size: 150px; right: 40px; top: 185px; } } @media only screen and (min-width:800px) { .next-lessons::after { font-size: 210px; right: 120px; } } @media only screen and (min-width:620px) and (max-width:799px) { .g-medium--1 { float: left; margin-right: 4.5%; width: 30.3%; } .g-medium--push-1 { margin-left: 34.8%; } .g-medium--pull-1 { margin-right: 34.8%; } .g-medium--2 { float: left; margin-right: 4.5%; width: 65.1%; } .g-medium--push-2 { margin-left: 69.6%; } .g-medium--full { float: left; margin-right: 0; width: 100%; } .g--third { float: left; margin-right: 4.5%; width: 30.3%; } .g--half, .g-medium--half { float: left; margin-right: 4.5%; width: 47.75%; } .g-medium--last { margin-right: 0; } .g-medium--last+.g-medium--half { clear: left; } .g--pull-half { margin-right: 52.25%; } } @media only screen and (min-width:800px) { .g-wide--1 { float: left; margin-right: 3.7%; width: 22.2%; } .g-wide--push-1 { margin-left: 25.9%; } .g-wide--pull-1 { margin-right: 25.9%; } .g-wide--2 { float: left; margin-right: 3.7%; width: 48.1%; } .g-wide--push-2 { margin-left: 51.8%; } .g-wide--3 { float: left; margin-right: 3.7%; width: 74%; } .g-wide--push-3 { margin-left: 77.7%; } .g-wide--last, .g-wide--full { margin-right: 0; } .g-wide--full { float: left; width: 100%; } .g--third { float: left; margin-right: 3.7%; width: 30.8%; } .g--half { float: left; margin-right: 3.7%; width: 48.15%; } .g--pull-half { margin-right: 51.85%; } } .g--last { margin-right: 0; } .g--centered { float: none; margin-left: auto; margin-right: auto; } h1, h2, h3, h4, p { margin: 0; } .small { font-size: 13px; line-height: 2em; padding-top: 2em; padding-bottom: 0; } .base, p, ul, ol, .medium, h4 { line-height: 1.625em; padding-top: 1.625em; padding-bottom: 0; } .medium, h4 { font-size: 16px; } @media only screen and (min-width:800px) { .medium, h4 { font-size: 20px; font-weight: 300; line-height: 1.3em; padding-top: 1.3em; padding-bottom: 0; } } .large, h3 { font-size: 20px; font-weight: 300; line-height: 1.3em; padding-top: 1.3em; padding-bottom: 0; } @media only screen and (min-width:800px) { .large, h3 { font-family: "Roboto Condensed",Helvetica,sans-serif; font-size: 26px; font-weight: 300; line-height: 1em; padding-top: 1em; padding-bottom: 0; } } .xlarge, h2 { font-family: "Roboto Condensed",Helvetica,sans-serif; font-size: 26px; font-weight: 300; line-height: 1em; padding-top: 1em; padding-bottom: 0; } @media only screen and (min-width:800px) { .xlarge, h2 { font-family: "Roboto Condensed",Helvetica,sans-serif; font-size: 42px; font-weight: 300; line-height: 1.2381em; padding-top: .619em; padding-bottom: 0; } } .xxlarge, h1 { font-family: "Roboto Condensed",Helvetica,sans-serif; font-size: 42px; font-weight: 300; line-height: 1.2381em; padding-top: .619em; padding-bottom: 0; } @media only screen and (min-width:800px) { .xxlarge, h1 { font-family: "Roboto Condensed",Helvetica,sans-serif; font-size: 68px; font-weight: 300; line-height: 1.1471em; padding-top: .3824em; padding-bottom: 0; } } .huge { font-family: "Roboto Condensed",Helvetica,sans-serif; font-size: 68px; font-weight: 300; line-height: 1.1471em; padding-top: .3824em; padding-bottom: 0; } @media only screen and (min-width:800px) { .huge { font-family: "Roboto Condensed",Helvetica,sans-serif; font-size: 110px; font-weight: 300; line-height: 1.19em; padding-top: .2364em; padding-bottom: 0; } } li>p { padding-top: 0; } .button--primary, .button--secondary, .button--secondary-variation { display: inline-block; padding: 12px 32px; margin-bottom: 13px; margin-top: 13px; min-height: 26px; text-align: center; font-family: "Roboto Condensed",Helvetica,sans-serif; font-weight: 600; text-decoration: none; outline: 0; transition: none; } .button--primary:hover, .button--secondary:hover, .button--secondary-variation:hover { background: #4d4d4d; color: #fff; border: 1px solid #4d4d4d; text-decoration: none; } .button--primary { background: #4285f4; color: #fff; border: 1px solid #1266f1; } .button--secondary, .button--secondary-variation { background: #fff; color: #3372df; border: 1px solid #e6e6e6; } .button--secondary-variation { border-color: transparent; } ul, ol { list-style: none; margin: 0; } @media only screen and (max-width:619px) { ul, ol { padding-left: 0; } } ul li { position: relative; padding-left: 16px; } ul li::before { font-family: "icons"; display: block; font-weight: 400; position: absolute; top: 0; left: 0; line-height: 26px; font-size: 4px; } ol { counter-reset: list; } ol>li { position: relative; padding-left: 32px; } ol>li::before { counter-increment: list; content: "0" counter(list); color: inherit; font-weight: 400; display: inline-block; position: absolute; left: 0; } ol>li:nth-child(10n)~li::before, ol>li:nth-child(10n)::before { content: counter(list); } ul ol { padding-top: 0; } ul.list-links li::before { display: none; } ul.list-links a { font-weight: 400; } ul.list-links a::before { font-family: "icons"; display: block; font-weight: 400; position: absolute; top: 0; left: 0; line-height: 26px; font-size: 4px; } ul.list-links.list-links--primary a { font-weight: 400; font-family: "Roboto Condensed",Helvetica,sans-serif; line-height: 1; text-decoration: none; } ul.list-links.list-links--primary a::before { font-family: "icons"; font-size: 13px; display: block; font-weight: 400; position: absolute; top: 0; left: 0; line-height: 26px; } ol.list-links li::before { display: none; } ol.list-links li a { display: inline-block; font-weight: 300; } ol.list-links li a::before { counter-increment: list; content: "0" counter(list); color: inherit; font-weight: 400; display: inline-block; position: absolute; left: 0; } ol.list-links li:nth-child(10n)~li a::before, ol.list-links li:nth-child(10n) a::before { content: counter(list); } ol.list-links.list-links--secondary a::before { display: none; } .list-links--secondary { font-size: 16px; line-height: 1.625em; padding-top: 1.625em; padding-bottom: 0; padding-left: 0; } .list-links--secondary li, .list-anchor { padding-left: 0; } .list-anchor li { font-size: 16px; line-height: 1.625em; padding-bottom: 0; padding-top: 0; padding-left: 0; } .list-anchor li::before { display: none; } .list-anchor a { line-height: 1; display: inline-block; padding-left: 16px; } .list-anchor a::before { font-family: "icons"; display: block; font-weight: 400; position: absolute; top: 0; left: 0; line-height: 26px; font-size: 4px; } @media only screen and (min-width:620px) { .list-small li { font-size: 13px; line-height: 2em; padding-bottom: 0; padding-top: 0; } } .list-centered { text-align: center; padding-left: 0; } .featured-list { padding-top: 78px; padding-bottom: 78px; } .featured-list__item { background: #fff; padding-left: 0; padding-top: 26px; padding-bottom: 26px; margin-top: 26px; } @media only screen and (min-width:620px) { .featured-list__item { min-height: 338px; padding: 52px 32px; } } .featured-list__item:first-child { margin-top: 0; } .featured-list__item p { margin-bottom: 26px; } .featured-list__img-wrapper { display: none; position: relative; padding-top: 26px; margin: 0 -5%; } @media only screen and (min-width:620px) { .featured-list__img-wrapper { display: block; padding-top: 0; margin: 0; } } @media only screen and (min-width:620px) { .featured-list__img { padding-top: 60.8%; padding-bottom: 0; height: 0; overflow: hidden; position: absolute; width: 100%; } } .featured-list__img img { display: block; margin: 0 auto; max-width: 100%; } @media only screen and (min-width:620px) { .featured-list__img img { margin: 0; position: absolute; top: 0; height: 100%; width: 100%; left: 0; } } .list--reset, .list--reset li { padding-left: 0; } .list--reset li::before { display: none!important; } .list-lessons { padding-left: 0; } .list-lessons a { color: #fff; } .list-lessons .current, .list-lessons .current a { text-decoration: none; cursor: default; } .list-lessons .current .icon { font-size: 13px; display: inline-block; background: rgba(0,0,0,.2); border-radius: 100%; width: 26px; line-height: 26px; text-align: center; margin-left: 7px; } .list-guides-intro { margin-bottom: 52px; } @media only screen and (max-width:619px) { .list-guides-intro { padding-top: 52px; } } .list-guides-intro li { border-bottom: 1px solid #e0e0e0; padding-bottom: 51px; margin-bottom: 52px; } @media only screen and (min-width:620px) { .list-guides-intro li { border-color: transparent; padding-bottom: 0; } } .list-guides-intro li:last-child { border-bottom: transparent; margin-bottom: 0; } a { color: #3372df; } a:hover { text-decoration: none; } .cta--primary { font-family: "Roboto Condensed",Helvetica,sans-serif; color: #3372df; font-weight: 400; display: inline-block; line-height: 1; text-decoration: none; } .cta--primary:hover { color: #404040; } .cta--primary::before { display: inline-block; padding-right: 10px; font-family: "icons"; line-height: 25px; font-size: 13px; content: "\e005"; } .cta--secondary { font-family: "Roboto Condensed",Helvetica,sans-serif; color: #3372df; font-weight: 400; display: inline-block; line-height: 1; } .cta--secondary:hover { color: #404040; } table { margin-top: 26px; width: 100%; } table thead { background: #3372df; color: #fff; } table th { text-align: center; display: none; font-family: "Roboto Condensed",Helvetica,sans-serif; font-size: 16px; line-height: 1.625em; padding-top: 1.625em; padding-bottom: 0; } @media only screen and (min-width:800px) { table th { font-size: 20px; font-weight: 300; line-height: 1.3em; padding-top: 1.3em; padding-bottom: 0; } } @media only screen and (min-width:620px) { table tr { border-bottom: 1px solid #fff; } } table tbody { background: #f0f0f0; } table td { display: block; padding-top: 13px; padding-bottom: 13px; } table td::before { content: attr(data-th)" :"; display: inline-block; color: #fff; background: #3372df; border-right: 2px solid #fff; position: absolute; top: 0; left: 0; bottom: 0; width: 100px; max-height: 100%; font-family: "Roboto Condensed",Helvetica,sans-serif; font-size: 16px; font-weight: 400; padding-left: 13px; padding-top: 13px; } @media only screen and (min-width:620px) { table td::before { display: none; } } table th, table td { position: relative; padding-left: 140px; } @media only screen and (min-width:620px) { table th, table td { display: table-cell; } } @media only screen and (min-width:620px) { table th { padding: 13px 26px 12px; } } @media only screen and (min-width:620px) { table td { padding: 26px 26px 25px; } } td:last-child::after { content: ""; display: block; background: #fff; height: 1px; left: 0; position: absolute; bottom: 0; width: 100%; } @media only screen and (min-width:620px) { td:last-child::after { display: none; } } .table-2 col { width: 344px; } @media only screen and (min-width:800px) { .table-2 col { width: 432px; } } @media only screen and (min-width:620px) { .table-2 th:first-child, .table-2 td:first-child { border-right: 2px solid #fff; } } .table-3 col { width: 229.3333333333px; } @media only screen and (min-width:800px) { .table-3 col { width: 288px; } } @media only screen and (min-width:620px) { .table-3 th:nth-child(2), .table-3 td:nth-child(2) { border-left: 2px solid #fff; border-right: 2px solid #fff; } } .table-4 col { width: 172px; } @media only screen and (min-width:800px) { .table-4 col { width: 216px; } } @media only screen and (min-width:620px) { .table-4 th:nth-child(2), .table-4 th:nth-child(3), .table-4 td:nth-child(2), .table-4 td:nth-child(3) { border-left: 2px solid #fff; border-right: 2px solid #fff; } } img { max-width: 100%; } .breadcrumbs { display: none; position: relative; z-index: 1; } @media only screen and (min-width:620px) { .breadcrumbs { display: block; } } .breadcrumbs p { padding-top: 26px; } .breadcrumbs p, .breadcrumbs__link { font-size: 13px; line-height: 2em; padding-bottom: 0; } .breadcrumbs__link { color: #000; font-weight: 400; padding-top: 0; } @media only screen and (min-width:620px) { .breadcrumbs__link { padding-top: 0; } } .subsection-title { color: #404040; margin-top: 52px; } .subsection-number { font-size: 16px; line-height: 1.625em; padding-bottom: 0; padding-top: 0; display: block; } .articles-list { padding-left: 0; } .articles-list__item { padding-bottom: 52px; padding-left: 0; } .articles-list__item:last-child { padding-bottom: 53px; } .articles-list__item::before { content: ""; display: block; width: 40%; height: 1px; box-shadow: inset 0 1px 0 0 #e0e0e0; margin-right: 0; margin-left: 30%; } .articles-list__item h3 a:hover { text-decoration: none; } .articles-list__item p { margin-top: 26px; margin-bottom: 26px; } .articles-list__item:first-child { padding-top: 0; } @media only screen and (min-width:620px) { .articles-list__item:first-child { padding-top: 24px; } } .articles-list__item:first-child::before { display: none; } .guides-list { overflow: hidden; } @media only screen and (min-width:620px) { .guides-list { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding-top: 52px; } } .guides-list__item { padding: 0; background: #fff; margin-top: 26px; margin-bottom: 0; } @media only screen and (min-width:620px) { .guides-list__item { display: -webkit-flex; display: flex; flex-direction: column; -webkit-flex-direction: column; flex-wrap: wrap; -webkit-flex-wrap: wrap; } } .guides-list__item h3 { margin: 0 32px; } .guides-list__item p { margin: 26px 32px 0; } @media only screen and (min-width:620px) { .guides-list__item .primary-content { flex: 1; -webkit-flex: 1; } } .guides-list__item .secondary-content { position: relative; margin-top: 51px; border-top: 1px solid #e0e0e0; } @media only screen and (min-width:620px) { .guides-list__item .secondary-content { width: 100%; } } .guides-list__item .secondary-content .icon-circle { position: absolute; top: -28px; left: 50%; margin-left: -21px; border: 2px solid #fff; } .guides-list__item .secondary-content .icon-circle i { font-size: 23px; } .guides-list__item ol { padding: 52px 0; margin: 0; } .guides-list__item::before { display: none; } .icon-circle { position: relative; padding: 22px; margin: 4px auto; } .icon-circle, .icon-circle--large { height: 0; width: 0; background: #737373; display: block; border-radius: 100%; font-size: 0; } .icon-circle i { font-size: 26px; } .icon-circle i, .icon-circle--large i { position: absolute; line-height: 0; top: 50%; width: 100%; left: 0; text-align: center; color: #fff; } .icon-circle--large { margin: 0 auto; padding: 26px; position: relative; } .icon-circle--large i { font-size: 26px; } @media only screen and (min-width:620px) { .icon-circle--large i { font-size: 42px; } } @media only screen and (min-width:620px) { .icon-circle--large { padding: 37px; border: 2px solid #fff; } a .icon-circle--large { padding: 38px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.42); border: 1px solid; -webkit-transition: all 100ms linear; -webkit-transform: translateZ(0); } .no-touch a:hover .icon-circle--large { box-shadow: inset 0 0 0 1px #fff; -webkit-transform: scale(1.1); } } .theme--multi-device-layouts .themed { color: #297ea9; } .theme--introduction-to-media .themed { color: #cf423a; } .theme--user-input .themed { color: #2c8566; } .theme--performance .themed { color: #7b5294; } .theme--multi-device-layouts .themed--background { background-color: #297ea9; } .theme--introduction-to-media .themed--background { background-color: #cf423a; } .theme--user-input .themed--background { background-color: #2c8566; } .theme--performance .themed--background { background-color: #7b5294; } .page--styleguide section { margin-bottom: 52px; border-bottom: 1px solid #ccc; padding-bottom: 77px; } .page--styleguide .styleguide__color-list { text-align: center; } .page--styleguide .styleguide__color-list li { border-bottom: 52px solid; margin-bottom: 26px; position: relative; } .page--styleguide .styleguide__breadcrumb .breadcrumbs { display: block; } .page--styleguide .styleguide__lists ul, .page--styleguide .styleguide__lists ol { margin-bottom: 26px; } .page--styleguide .styleguide__inverted-block { background: #e8e8e8; padding: 0 13px; } .demo { margin-bottom: 26px; margin-top: 26px; } .demo [class*="g-"] { background-color: #eee; position: relative; margin-bottom: 26px; min-height: 156px; } .demo [class*="g-"]::before, .demo [class*="g-"]::after { font-size: 13px; line-height: 2em; padding-top: 2em; padding-bottom: 0; display: block; margin: 0 10px; } .demo [class*="g-"]::before { content: "HTML classes: "; font-weight: 700; } .demo [class*="g-"]::after { content: attr(class); word-spacing: 15px; } .clear::before, .clear::after { content: ""; display: table; } .clear::after { clear: both; } .color--blue { color: #3372df; } .color--red { color: #cb4437; } .color--green { color: #0f9d58; } .color--yellow { color: #f4b400; } .color--blue-secondary { color: #b7cdf4; } .color--red-secondary { color: #ebb6b0; } .color--green-secondary { color: #56efa5; } .color--yellow-secondary { color: #ffd45b; } .color--gray-background { color: #f0f0f0; } .color--gray-keyline { color: #e0e0e0; } .color--gray { color: #737373; } .color--gray-dark, .color--text { color: #404040; } .color--highlight { color: #3372df; } .color--warning { color: #ffd45b; } .color--danger { color: #cb4437; } .color--muted { color: #737373; } .color--remember { color: #09829a; } .color--learning { color: #da2e75; } .color--layouts { color: #297ea9; } .color--user { color: #2c8566; } .color--media { color: #cf423a; } .color--performance { color: #7b5294; } .color--layouts-secondary { color: #89c4e2; } .color--user-secondary { color: #78d2b3; } .color--media-secondary { color: #edb8b5; } .color--performance-secondary { color: #c4add2; } .text-divider { position: relative; margin-bottom: 26px; } .text-divider::after { content: ""; display: block; position: absolute; width: 40%; height: 1px; box-shadow: 0 1px 0 0 #e0e0e0; left: 30%; bottom: -13px; } .text-divider.xxlarge { margin-bottom: 78px; } .text-divider.xxlarge::after { bottom: -39px; } .tag { font-size: 13px; line-height: 2em; padding-top: 2em; padding-bottom: 0; font-family: "Roboto Condensed",Helvetica,sans-serif; text-transform: uppercase; font-weight: 700; display: inline-block; text-decoration: none; } .tag:hover { color: #404040; } .tag::before { content: "# "; display: inline-block; } html { width: 100%; } html, body { height: 100%; margin: 0; padding: 0; } body { position: relative; font-family: 'Roboto Condensed','Helvetica','Arial',sans-serif; font-weight: 300; background-color: #fff; box-sizing: border-box; min-height: 100%; } body, .app-bar { width: 100%; overflow: hidden; } .app-bar { display: block; position: fixed; top: 0; left: 0; background-color: #4285f4; z-index: 1; } .app-bar-container { display: -webkit-flex; display: flex; width: 100%; height: 60px; position: relative; -webkit-flex-direction: row; flex-direction: row; margin: 0 auto; } .app-bar.open, .app-bar.open~main { -webkit-transform: translate(250px,0); transform: translate(250px,0); } .app-bar .logo { -webkit-flex: 1; flex: 1; font-size: 2em; margin: 0 16px; padding: 0; color: #fefefe; float: none; max-width: none; font-weight: 300; line-height: 60px; } .app-bar-actions { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; z-index: 2; } .app-bar button { background-image: none; background-color: transparent; border: none; padding: 0; transition: background-color .2s ease-out; -webkit-tap-highlight-color: transparent; } .app-bar button, .app-bar button img { width: 60px; height: 60px; } .app-bar button:hover { background-color: rgba(255,255,255,.1); } .app-bar button:focus { background-color: rgba(255,255,255,.2); outline: 0; } .app-bar button:active { background-color: rgba(255,255,255,.4); } button.menu img { height: 24px; width: 24px; } .promote-layer { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .base, p, ul, ol { font-size: 19px; } .navdrawer-container { z-index: 1; position: fixed; top: 0; bottom: 0; width: 250px; height: 100%; background-color: #3367D6; color: #fefefe; -webkit-transform: translate(-250px,0); transform: translate(-250px,0); overflow-y: scroll; } .navdrawer-container.open { -webkit-transform: translate(0,0); transform: translate(0,0); } .app-bar, .navdrawer-container, main { transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; } .navdrawer-container h4, .navdrawer-container ul li a { height: auto; padding: 17px 20px; line-height: 1.4; } .navdrawer-container h4 { background-color: #fff; color: #3367D6; } .navdrawer-container ul { padding: 0; margin: 0; list-style-type: none; } .navdrawer-container ul li a { display: block; text-decoration: none; color: #fff; transition: background-color .2s ease-out; white-space: nowrap; } .navdrawer-container ul li { border-bottom-style: solid; border-width: 1px; border-color: #fff; padding: 0; } .navdrawer-container ul li::before { content: none; } .navdrawer-container ul li a:hover { background-color: rgba(255,255,255,.2); } .navdrawer-container ul li a:focus { background-color: rgba(255,255,255,.3); outline: 0; } .navdrawer-container ul li a:active { background-color: rgba(255,255,255,.4); } main { margin: 0 auto; padding: 60px 16px 16px; min-height: 100%; } @media all and (min-width:1200px) { .app-bar { position: relative; } .app-bar-container { display: block; height: 130px; max-width: 864px; padding: 0 16px; box-sizing: border-box; background-color: #4285f4; } .app-bar .logo { float: left; margin: 0; padding: 0; line-height: 130px; font-size: 46px; } .app-bar-actions { float: right; } .app-bar::after { content: ' '; display: block; height: 0; overflow: hidden; clear: both; } button.menu { display: none; } nav { display: block; margin-top: 130px; } .navdrawer-container { width: 100%; height: auto; -webkit-transform: translate(0,0); transform: translate(0,0); transition: none; overflow-y: auto; } .navdrawer-container h4 { display: none; } .navdrawer-container ul { display: -webkit-flex; display: flex; max-width: 864px; margin: 0 auto; -webkit-flex-direction: row; flex-direction: row; } .navdrawer-container ul li { border: none; } main { max-width: 864px; padding-top: 0; min-height: initial; } body { overflow-y: scroll; } .navdrawer-container { position: relative; margin-top: 0; } } @media all and (min-width:1200px) and (max-width:800px) { .app-bar .logo { float: none; width: 100%; line-height: normal; text-align: center; padding-top: 36px; } .app-bar-container { height: auto; } .app-bar-actions { width: 100%; } .navdrawer-container { padding: 0 16px; overflow-y: auto; } .navdrawer-container li { -webkit-flex: 1; flex: 1; text-align: center; } }