CINXE.COM

<!doctype html><html lang="en" amp i-amphtml-binding i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1"><head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("https://amp.dev/","20211117033346","https://web.archive.org/","web","/_static/", "1637120026"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="preload" href="/web/20211117033346/https://amp.dev/static/fonts/poppins-v5-latin-700.woff2" as="font" crossorigin><link rel="preload" href="/web/20211117033346/https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff2" as="font" crossorigin><meta name="theme-color" content="#005af0"><meta name="description" content="Whether you are a publisher, e-commerce company, storyteller, advertiser or email sender, AMP makes it easy to create great experiences on the web. Use AMP to build websites, stories, ads and emails."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:description" content="Whether you are a publisher, e-commerce company, storyteller, advertiser or email sender, AMP makes it easy to create great experiences on the web. Use AMP to build websites, stories, ads and emails."><meta name="twitter:title" content="AMP - a web component framework to easily create user-first web experiences"><meta name="twitter:creator" content="@ampproject"><meta name="twitter:site" content="@ampproject"><meta name="twitter:image" content="https://web.archive.org/web/20211117033346im_/https://amp.dev/static/img/sharing/default-600x314.png"><meta property="og:title" content="AMP - a web component framework to easily create user-first web experiences"><meta property="og:url" content="https://web.archive.org/web/20211117033346/https://amp.dev/index-2021/"><meta property="og:image" content="https://web.archive.org/web/20211117033346im_/https://amp.dev/static/img/sharing/default-600x314.png"><meta property="og:image:width" content="600"><meta property="og:image:height" content="314"><meta name="supported-amp-formats" content="websites,stories,ads,email"><meta name="page-locale" content="en,de,fr,ar,es,it,id,ja,ko,pt_br,ru,tr,zh_cn,pl,vi"><style amp-runtime i-amphtml-version="012110290545003">html{overflow-x:hidden!important}html.i-amphtml-fie{height:100%!important;width:100%!important}html:not([amp4ads]),html:not([amp4ads]) body{height:auto!important}html:not([amp4ads]) body{margin:0!important}body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y pinch-zoom;touch-action:pan-y pinch-zoom}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}#i-amphtml-wrapper+body{visibility:visible}#i-amphtml-wrapper+body .i-amphtml-lightbox-element,#i-amphtml-wrapper+body[i-amphtml-lightbox]{visibility:hidden}#i-amphtml-wrapper+body[i-amphtml-lightbox] .i-amphtml-lightbox-element{visibility:visible}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}amp-instagram{padding:54px 0px 0px!important;background-color:#fff}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}amp-experiment,amp-live-list>[update]{display:none}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list [fetch-error],amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-list[diffable] div[role=list]{display:block}amp-story-page,amp-story[standalone]{min-height:1px!important;display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#000!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .amp-active>div,amp-story .i-amphtml-loader-background{display:none!important}amp-story-page:not(:first-of-type):not([distance]):not([active]){transform:translateY(1000vh)!important}amp-autocomplete{position:relative!important;display:inline-block!important}amp-autocomplete>input,amp-autocomplete>textarea{padding:0.5rem;border:1px solid rgba(0,0,0,0.33)}.i-amphtml-autocomplete-results,amp-autocomplete>input,amp-autocomplete>textarea{font-size:1rem;line-height:1.5rem}[amp-fx^=fly-in]{visibility:hidden}amp-script[nodom],amp-script[sandboxed]{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden} /*# sourceURL=/css/ampdoc.css*/[hidden]{display:none!important}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;pointer-events:none}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][heights]:not([layout]):not(.i-amphtml-layout-responsive),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic,[layout=intrinsic][width][height]:not(.i-amphtml-layout-intrinsic){display:inline-block;position:relative;max-width:100%}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]:not(.i-amphtml-layout-fixed-height){display:block;position:relative}.i-amphtml-layout-fill,.i-amphtml-layout-fill.i-amphtml-notbuilt,[layout=fill]:not(.i-amphtml-layout-fill),body noscript>*{display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}body noscript>*{position:absolute!important;width:100%;height:100%;z-index:2}body noscript{display:inline!important}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}@supports (aspect-ratio:1/1){i-amphtml-sizer.i-amphtml-disable-ar{display:none!important}}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*,[width][height][heights]:not([layout]):not(.i-amphtml-element)>*,[width][height][sizes]:not([layout]):not(.i-amphtml-element)>*{display:none}amp-img:not(.i-amphtml-element)[i-amphtml-ssr]>img.i-amphtml-fill-content{display:block}.i-amphtml-notbuilt:not(.i-amphtml-layout-container),[layout]:not([layout=container]):not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){color:transparent!important;line-height:0!important}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder],[width][height][heights]:not([layout]):not(.i-amphtml-element)>[placeholder],[width][height][sizes]:not([layout]):not(.i-amphtml-element)>[placeholder]{display:block;line-height:normal}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}amp-img[i-amphtml-ssr]:not(.i-amphtml-element)>[placeholder]{z-index:auto}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden;display:initial;line-height:normal}.i-amphtml-layout-size-defined>[overflow]{position:absolute}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-analytics,amp-auto-ads,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}html.i-amphtml-fie>amp-analytics{position:initial!important}[visible-when-invalid]:not(.visible),form [submit-error],form [submit-success],form [submitting]{display:none}amp-accordion{display:block!important}@media (min-width:1px){:where(amp-accordion>section)>:first-child{margin:0;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}:where(amp-accordion>section)>:last-child{margin:0}}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}amp-accordion,amp-accordion>section{margin:0}amp-accordion:not(.i-amphtml-built)>section>:last-child{display:none!important}amp-accordion:not(.i-amphtml-built)>section[expanded]>:last-child{display:block!important} /*# sourceURL=/css/ampshared.css*/</style><script async src="https://web.archive.org/web/20211117033346jm_/https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://web.archive.org/web/20211117033346js_/https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script><script async src="https://web.archive.org/web/20211117033346jm_/https://cdn.ampproject.org/v0/amp-analytics-0.1.mjs" custom-element="amp-analytics" type="module" crossorigin="anonymous"></script><script async nomodule src="https://web.archive.org/web/20211117033346js_/https://cdn.ampproject.org/v0/amp-analytics-0.1.js" crossorigin="anonymous" custom-element="amp-analytics"></script><script async src="https://web.archive.org/web/20211117033346jm_/https://cdn.ampproject.org/v0/amp-animation-0.1.mjs" custom-element="amp-animation" type="module" crossorigin="anonymous"></script><script async nomodule src="https://web.archive.org/web/20211117033346js_/https://cdn.ampproject.org/v0/amp-animation-0.1.js" crossorigin="anonymous" custom-element="amp-animation"></script><script async src="https://web.archive.org/web/20211117033346jm_/https://cdn.ampproject.org/v0/amp-autocomplete-0.1.mjs" custom-element="amp-autocomplete" type="module" crossorigin="anonymous"></script><script async nomodule src="https://web.archive.org/web/20211117033346js_/https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js" crossorigin="anonymous" custom-element="amp-autocomplete"></script><script async src="https://web.archive.org/web/20211117033346jm_/https://cdn.ampproject.org/v0/amp-base-carousel-0.1.mjs" custom-element="amp-base-carousel" type="module" crossorigin="anonymous"></script><script async nomodule src="https://web.archive.org/web/20211117033346js_/https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js" crossorigin="anonymous" custom-element="amp-base-carousel"></script><script async src="https://web.archive.org/web/20211117033346jm_/https://cdn.ampproject.org/v0/amp-bind-0.1.mjs" custom-element="amp-bind" type="module" crossorigin="anonymous"></script><script async nomodule src="https://web.archive.org/web/20211117033346js_/https://cdn.ampproject.org/v0/amp-bind-0.1.js" crossorigin="anonymous" custom-element="amp-bind"></script><script async src="https://web.archive.org/web/20211117033346jm_/https://cdn.ampproject.org/v0/amp-consent-0.1.mjs" custom-element="amp-consent" type="module" crossorigin="anonymous"></script><script async nomodule src="https://web.archive.org/web/20211117033346js_/https://cdn.ampproject.org/v0/amp-consent-0.1.js" crossorigin="anonymous" custom-element="amp-consent"></script><script async src="https://web.archive.org/web/20211117033346jm_/https://cdn.ampproject.org/v0/amp-form-0.1.mjs" custom-element="amp-form" type="module" crossorigin="anonymous"></script><script async nomodule src="https://web.archive.org/web/20211117033346js_/https://cdn.ampproject.org/v0/amp-form-0.1.js" crossorigin="anonymous" custom-element="amp-form"></script><script async src="https://web.archive.org/web/20211117033346jm_/https://cdn.ampproject.org/v0/amp-fx-collection-0.1.mjs" custom-element="amp-fx-collection" type="module" crossorigin="anonymous"></script><script async nomodule src="https://web.archive.org/web/20211117033346js_/https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js" crossorigin="anonymous" custom-element="amp-fx-collection"></script><script async src="https://web.archive.org/web/20211117033346jm_/https://cdn.ampproject.org/v0/amp-geo-0.1.mjs" custom-element="amp-geo" type="module" crossorigin="anonymous"></script><script async nomodule src="https://web.archive.org/web/20211117033346js_/https://cdn.ampproject.org/v0/amp-geo-0.1.js" crossorigin="anonymous" custom-element="amp-geo"></script><script async src="https://web.archive.org/web/20211117033346jm_/https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.mjs" custom-element="amp-install-serviceworker" type="module" crossorigin="anonymous"></script><script async nomodule src="https://web.archive.org/web/20211117033346js_/https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js" crossorigin="anonymous" custom-element="amp-install-serviceworker"></script><script async src="https://web.archive.org/web/20211117033346jm_/https://cdn.ampproject.org/v0/amp-lightbox-0.1.mjs" custom-element="amp-lightbox" type="module" crossorigin="anonymous"></script><script async nomodule src="https://web.archive.org/web/20211117033346js_/https://cdn.ampproject.org/v0/amp-lightbox-0.1.js" crossorigin="anonymous" custom-element="amp-lightbox"></script><script async src="https://web.archive.org/web/20211117033346jm_/https://cdn.ampproject.org/v0/amp-list-0.1.mjs" custom-element="amp-list" type="module" crossorigin="anonymous"></script><script async nomodule src="https://web.archive.org/web/20211117033346js_/https://cdn.ampproject.org/v0/amp-list-0.1.js" crossorigin="anonymous" custom-element="amp-list"></script><script async src="https://web.archive.org/web/20211117033346jm_/https://cdn.ampproject.org/v0/amp-mustache-0.2.mjs" custom-template="amp-mustache" type="module" crossorigin="anonymous"></script><script async nomodule src="https://web.archive.org/web/20211117033346js_/https://cdn.ampproject.org/v0/amp-mustache-0.2.js" crossorigin="anonymous" custom-template="amp-mustache"></script><script async src="https://web.archive.org/web/20211117033346jm_/https://cdn.ampproject.org/v0/amp-position-observer-0.1.mjs" custom-element="amp-position-observer" type="module" crossorigin="anonymous"></script><script async nomodule src="https://web.archive.org/web/20211117033346js_/https://cdn.ampproject.org/v0/amp-position-observer-0.1.js" crossorigin="anonymous" custom-element="amp-position-observer"></script><script async src="https://web.archive.org/web/20211117033346jm_/https://cdn.ampproject.org/v0/amp-selector-0.1.mjs" custom-element="amp-selector" type="module" crossorigin="anonymous"></script><script async nomodule src="https://web.archive.org/web/20211117033346js_/https://cdn.ampproject.org/v0/amp-selector-0.1.js" crossorigin="anonymous" custom-element="amp-selector"></script><link rel="shortcut icon" href="/web/20211117033346im_/https://amp.dev/static/img/favicon.png"><link rel="canonical" href="https://web.archive.org/web/20211117033346/https://amp.dev/index-2021/"><link rel="alternate" hreflang="x-default" href="https://web.archive.org/web/20211117033346/https://amp.dev/index-2021/"><link rel="alternate" hreflang="de" href="https://web.archive.org/web/20211117033346/https://amp.dev/de/index-2021/"><link rel="alternate" hreflang="fr" href="https://web.archive.org/web/20211117033346/https://amp.dev/fr/index-2021/"><link rel="alternate" hreflang="ar" href="https://web.archive.org/web/20211117033346/https://amp.dev/ar/index-2021/"><link rel="alternate" hreflang="es" href="https://web.archive.org/web/20211117033346/https://amp.dev/es/index-2021/"><link rel="alternate" hreflang="it" href="https://web.archive.org/web/20211117033346/https://amp.dev/it/index-2021/"><link rel="alternate" hreflang="id" href="https://web.archive.org/web/20211117033346/https://amp.dev/id/index-2021/"><link rel="alternate" hreflang="ja" href="https://web.archive.org/web/20211117033346/https://amp.dev/ja/index-2021/"><link rel="alternate" hreflang="ko" href="https://web.archive.org/web/20211117033346/https://amp.dev/ko/index-2021/"><link rel="alternate" hreflang="pt_BR" href="https://web.archive.org/web/20211117033346/https://amp.dev/pt_br/index-2021/"><link rel="alternate" hreflang="ru" href="https://web.archive.org/web/20211117033346/https://amp.dev/ru/index-2021/"><link rel="alternate" hreflang="tr" href="https://web.archive.org/web/20211117033346/https://amp.dev/tr/index-2021/"><link rel="alternate" hreflang="zh_CN" href="https://web.archive.org/web/20211117033346/https://amp.dev/zh_cn/index-2021/"><link rel="alternate" hreflang="pl" href="https://web.archive.org/web/20211117033346/https://amp.dev/pl/index-2021/"><link rel="alternate" hreflang="vi" href="https://web.archive.org/web/20211117033346/https://amp.dev/vi/index-2021/"><style amp-custom>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText-Light"),local(".HelveticaNeueDeskInterface-Light"),local(".LucidaGrandeUI"),local("Ubuntu Light"),local("Segoe UI Light"),local("Roboto-Light"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:300;src:local(".SFNSText-LightItalic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Light Italic"),local("Segoe UI Light Italic"),local("Roboto-LightItalic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:400;src:local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:400;src:local(".SFNSText-Italic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Italic"),local("Segoe UI Italic"),local("Roboto-Italic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:500;src:local(".SFNSText-Medium"),local(".HelveticaNeueDeskInterface-MediumP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium"),local("Segoe UI Semibold"),local("Roboto-Medium"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:500;src:local(".SFNSText-MediumItalic"),local(".HelveticaNeueDeskInterface-MediumItalicP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium Italic"),local("Segoe UI Semibold Italic"),local("Roboto-MediumItalic"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:normal;font-weight:700;src:local(".SFNSText-Bold"),local(".HelveticaNeueDeskInterface-Bold"),local(".LucidaGrandeUI"),local("Ubuntu Bold"),local("Roboto-Bold"),local("DroidSans-Bold"),local("Segoe UI Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:700;src:local(".SFNSText-BoldItalic"),local(".HelveticaNeueDeskInterface-BoldItalic"),local(".LucidaGrandeUI"),local("Ubuntu Bold Italic"),local("Roboto-BoldItalic"),local("DroidSans-Bold"),local("Segoe UI Bold Italic"),local("Tahoma Bold")}@font-face{font-family:Noto Sans;font-style:normal;font-weight:400;font-display:optional;src:local("Noto Sans"),local("NotoSans"),url(https://web.archive.org/web/20211117033346im_/https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff2) format("woff2"),url(https://web.archive.org/web/20211117033346im_/https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff) format("woff")}@font-face{font-family:Noto Sans;font-style:normal;font-weight:700;font-display:optional;src:local("Noto Sans Bold"),local("NotoSans-Bold"),url(https://web.archive.org/web/20211117033346im_/https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff2) format("woff2"),url(https://web.archive.org/web/20211117033346im_/https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff) format("woff")}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:optional;src:local("Poppins Bold"),local("Poppins-Bold"),url(https://web.archive.org/web/20211117033346im_/https://amp.dev/static/fonts/poppins-v5-latin-700.woff2) format("woff2"),url(https://web.archive.org/web/20211117033346im_/https://amp.dev/static/fonts/poppins-v5-latin-700.woff) format("woff")}@font-face{font-family:Fira Mono;font-style:normal;font-weight:400;font-display:optional;src:local("Fira Mono"),local("FiraMono"),url(https://web.archive.org/web/20211117033346im_/https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff2) format("woff2"),url(https://web.archive.org/web/20211117033346im_/https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff) format("woff")}*{box-sizing:border-box}body,html{padding:0;margin:0;min-width:240px;color:#48525c;background-color:#fff;font-size:16px;font-family:Noto Sans,system;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation}@media(max-width:240px){body,html{font-size:14px}}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button{width:3em;height:3em;border-radius:50%;box-shadow:0 10px 15px 0 rgba(0,0,0,.4);transition:.4s;background-color:#fff;position:relative;box-sizing:border-box;margin:1em;border-style:none;background-position:50% 50%;background-repeat:no-repeat;z-index:10;pointer-events:all}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0'%3E%3Cpath d='M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0' %3E%3Cpath d='M9 3L7.94 4.06l4.19 4.19H3v1.5h9.13l-4.19 4.19L9 15l6-6z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button:hover{cursor:pointer;box-shadow:0 20px 30px 0 rgba(0,0,0,.2);background-color:#fff}:target:before{content:"";display:block;visibility:hidden;height:120px;margin-top:-120px}@media(min-width:1024px){h1:target:before{height:75px;margin-top:-75px}h2:target:before{height:81px;margin-top:-81px}h3:target:before{height:87px;margin-top:-87px}h4:target:before{height:90px;margin-top:-90px}h5:target:before{height:93px;margin-top:-93px}h6:target:before{height:97px;margin-top:-97px}}h1,h2,h3,h4,h5{margin-top:1.5rem;margin-bottom:.75em;font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a}h1{font-size:2.2rem;margin-top:3rem}section.-t h1:first-of-type{margin-top:0}@media(min-width:768px){section.-t h1:first-of-type{margin-bottom:2rem}}h2{font-size:1.8rem;margin-top:2rem}h3{font-size:1.414rem;margin-top:1.8rem}h4{font-size:1.2rem}h5{font-size:1rem}.-t .intro,.ap--section .intro{font-size:1rem;padding:0}.-t .intro *,.ap--section .intro *{font-size:inherit}.-t p,.ap--section p{line-height:1.6rem;font-weight:400;color:#48525c;display:block;margin-top:1.1em;margin-bottom:0;font-size:1rem}.-t p small,.ap--section p small{font-size:.875rem}.-t code,.ap--section code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em}.-t code,.-t p,.ap--section code,.ap--section p{overflow-wrap:break-word}.-t a,.ap--section a{position:relative;z-index:10}.-t a code,.ap--section a code{color:#005af0;z-index:-1}.-t pre,.ap--section pre{font-family:Fira Mono,monospace;font-weight:500;font-size:1rem;white-space:pre-wrap}.-t>ol,.-t>ul,.ap--section>ol,.ap--section>ul{line-height:1.6rem;font-weight:400;color:#48525c;display:block;padding-left:2em;margin:1.5em 0}.-t>ol ol,.-t>ol ul,.-t>ul ol,.-t>ul ul,.ap--section>ol ol,.ap--section>ol ul,.ap--section>ul ol,.ap--section>ul ul{padding-left:2em;margin:0}.-t>ol li,.-t>ul li,.ap--section>ol li,.ap--section>ul li{padding-left:.5em}.-t>ol li p,.-t>ul li p,.ap--section>ol li p,.ap--section>ul li p{font-size:1em}.-t figure figcaption,.ap--section figure figcaption{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;margin-top:.3em}.-t hr,.ap--section hr{height:1px;margin:.75em 0;background-color:#ebebf0;border:none}.-n{display:flex;align-items:center;text-decoration:none;padding:0 0 1.5em;margin:0}.-r{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-weight:700;color:#005af0;line-height:1.3;transition:transform .3s ease}.-i{fill:#005af0;padding:.438em 0;margin-bottom:auto;margin-right:.625em;box-sizing:initial;transition:transform .3s ease}.-n:hover .-i,.-n:hover .-r{transform:translateX(10px)}.-s{border-bottom:1px solid #ebebf0}.-s .-r{font-size:1rem;font-family:Poppins,system;font-weight:700;color:#000;padding-left:10px}.-s .-i{width:1.375em;height:1.375em;fill:#fff;background-color:#005af0;overflow:hidden;padding:.563em}.-s .-i,.-s:hover .-i{box-shadow:0 10px 20px 0 rgba(0,0,0,.25)}.-s:hover .-i svg{animation:duepduep .3s ease}a{font-weight:700;text-decoration:none;color:#005af0}a code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em;color:#005af0}.ap-a-ico{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:1em;height:1em}.ap-a-btn{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:1em;color:#fff;display:inline-block;max-width:100%;width:auto;height:auto;padding:.75em 1.75em;margin:0;text-decoration:none;text-align:center;border-radius:3px;background-color:#005af0;border:none;cursor:pointer;box-shadow:0 15px 35px -5px rgba(0,0,0,.25);transition:transform .3s ease,box-shadow .3s ease}.ap-a-btn:hover{transform:translateY(-.125em);box-shadow:0 25px 20px -15px rgba(0,0,0,.15)}@media(min-width:768px){.ap-a-btn{padding:1em 2em}}.-o{right:20px;left:auto;bottom:20px;width:calc(100% - 40px);padding:15px;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;background-color:#fff;box-shadow:0 15px 30px 0 rgba(0,0,0,.15);border-radius:8px}@media(min-width:768px){.-o{max-width:500px}}.-u{position:absolute;right:15px;top:15px;-webkit-appearance:none;background-color:transparent;border:none;padding:0}.-u svg{width:10px;height:10px}.-o button{cursor:pointer}.ap--footer{position:relative;z-index:15;padding:3em 0 2em;line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem;color:#fff;background:linear-gradient(45deg,#48525c,#20202a)}.-a{width:100%;max-width:1440px;padding:0 20px;margin:0 auto}.-f{padding-bottom:4em}@media(min-width:768px){.-f{display:flex;align-items:center}}.-l{display:flex;flex-direction:column;margin-left:auto}@media(min-width:1024px){.-l{flex-direction:row}}.-c{margin:3em 2em 1em 0;color:#fff}@media(min-width:768px){.-c{margin:auto 2em auto 1em}}.-h{display:flex;list-style:none;padding:0;margin:0}.-p{flex:1 0 auto}@media(min-width:768px){.-p{margin:16px}}.-d{width:2.5em;height:2.5em;fill:#fff}@media(max-width:240px){.-d{font-size:14px}}@media(min-width:768px){.-v{display:grid;grid-gap:30px;grid-template-columns:repeat(12,1fr)}}.-m{flex:1 1 100%}.-m:nth-child(odd){grid-column:span 3}@media(max-width:1023px){.-m:nth-child(odd){grid-column:span 6}}.-m:nth-child(2n+2){grid-column:span 3}@media(max-width:1023px){.-m:nth-child(2n+2){grid-column:span 6}}.-g{color:#fff}.-y{list-style:none;padding:0}@media(min-width:768px){.-y+.-g{margin-top:2.5em}}.-b{position:relative}.-w{padding-left:35px;font-size:.8125rem;color:#fff}.-x{position:absolute;left:10px;top:8px;width:12px;height:12px;fill:#fff}.-k{display:flex;flex-direction:column;padding-top:4em}@media(min-width:768px){.-k{flex-direction:row;align-items:flex-end}}.-_{width:50%;max-width:200px;margin-bottom:40px;margin-right:auto}@media(min-width:768px){.-_{margin-bottom:0}}.-j{list-style:none;padding:0;margin:0}.-q{display:inline-block;margin-right:1em}.-z{font-size:.8125rem;font-weight:400;color:#fff}.-te{display:block;font-size:.875rem;margin-top:2em;color:#e2e5e6}.-te a{color:#fafafc}.-tt{z-index:9999}.-tn{position:fixed;left:0;top:0;right:0;bottom:0;opacity:.6;background:#000}.-tr{position:relative;width:90vw;padding:23px 0 0;margin:0;background:#fafafc;box-shadow:0 2px 50px 0 rgba(0,0,0,.5)}@media(min-width:1024px){.-tr{width:100%;max-width:900px;padding:32px 60px 0;margin:0 auto}}@media(min-width:1280px){.-tr{max-width:1060px;padding:32px 140px 0}}@media(min-width:1440px){.-tr{max-width:1200px;padding:32px 210px 0}}.-ti{position:relative;z-index:2}.-ts{width:100%}@media(max-width:1023px){.-ts{width:calc(100% - 40px);left:15px}}.-ts div[role=listbox]{width:100%;max-height:210px;margin-top:-4px;margin-left:0;border-radius:0 0 4px 4px;box-shadow:0 15px 20px 0 rgba(0,0,0,.1)}.-ts div[role=listbox]:not(:empty):before{content:"";display:block;position:sticky;position:-webkit-sticky;left:10px;top:0;width:calc(100% - 20px);height:1px;background:#ceced2;z-index:1}@media(min-width:1024px){.-ts div[role=listbox]:not(:empty):before{left:60px;width:calc(100% - 90px)}}.-ts div[role=option]{padding:14px 60px;font-family:Poppins,system;font-weight:700;color:#20202a}@media(max-width:1023px){.-ts div[role=option]{padding:14px 40px}}.-ts div[role=option]:hover,.-ts div[role=option][aria-selected=true]{color:#005af0;background:none}.-to{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:1.8rem;line-height:1.4em;width:100%;padding:18px 160px 18px 60px;margin:0;border:none;border-radius:4px;background:transparent}@media(max-width:1023px){.-to{font-size:1.125rem;padding:20px 20px 20px 40px}}.-to::-webkit-input-placeholder{color:#ceced2}.-to::-moz-placeholder{color:#ceced2}.-to:focus{outline:none;background:#fff;box-shadow:0 15px 20px 0 rgba(0,0,0,.1)}.-tu{position:absolute;left:30px;top:32px;width:17px;height:17px}@media(max-width:1023px){.-tu{width:18px;height:18px;left:11px;top:23px}}.-ta{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:1em;color:#fff;display:inline-block;max-width:100%;width:auto;height:auto;padding:.75em 1.75em;margin:0;text-decoration:none;text-align:center;border-radius:3px;background-color:#005af0;border:none;cursor:pointer;box-shadow:0 15px 35px -5px rgba(0,0,0,.25);transition:transform .3s ease,box-shadow .3s ease;opacity:0;pointer-events:none;position:absolute;top:11px;right:10px;box-shadow:none}.-ta:hover{transform:translateY(-.125em);box-shadow:0 25px 20px -15px rgba(0,0,0,.15)}@media(min-width:768px){.-ta{padding:1em 2em;padding:.75em 1.75em}}@media(min-width:1024px){.-ta{top:13px;right:30px;padding:1em 2em}}.-ta:hover{box-shadow:none}.-ta[disabled]{background-color:#e2e5e6;transform:none}@media(min-width:1024px){.-to:focus+.-ta,.-ta:focus{opacity:1;pointer-events:auto}}.-tf{overflow-x:hidden;overflow-y:auto;height:100vh;min-height:60vh;max-height:calc(100vh - 88px);padding:0 0 30px;-webkit-overflow-scrolling:touch;outline:none}@media(min-width:1024px){.-tf{max-height:calc(100vh - 108px);margin-right:30px}.-tf::-webkit-scrollbar{width:6px;height:6px}.-tf::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.-tf::-webkit-scrollbar-corner{background-color:transparent}.-tf::-webkit-scrollbar-thumb{background:#e2e5e6}}.-tf:before{content:"";display:block;height:2em;position:sticky;position:-webkit-sticky;top:0;background:linear-gradient(0deg,rgba(250,250,252,0),#fafafc);z-index:1}.-tf .amp-active{position:relative;height:60vh}.-tl:last-child .-tc:last-child{margin-bottom:30px}.-tl .-th{margin-top:30px}.-tp{padding:30px 0 0;margin:1.5rem 25px 10px;color:#ceced2;border-top:1px solid #ceced2}@media(min-width:1024px){.-tp{margin:1.5rem 60px 10px}}.-tp:first-child{margin-top:0;padding:0;border:none}.-tc{margin:0 10px;border-radius:4px}@media(min-width:1024px){.-tc{margin:0 45px}.-tc:hover{background:#fff;box-shadow:0 15px 20px 0 rgba(0,0,0,.1)}}@media(max-width:1023px){.-td{margin:10px 25px;background:#fff;box-shadow:0 15px 20px 0 rgba(0,0,0,.1)}}.-tc .-tv:focus .-tm,.-tc:hover .-tm{opacity:1}.-tc:focus-within .-tm{opacity:1}.-tv{display:block;padding:15px;line-height:1.6rem;font-weight:400;color:#48525c}.-tm{display:flex;justify-content:flex-end;padding:0 0 5px;margin:0 15px;border-top:1px solid #e8e8e9}@media(min-width:1024px){.-tm{padding:0;margin-top:-15px;border:none;opacity:0}}.-tg{padding:0}@media(min-width:1024px){.-tg{padding-bottom:5px;margin-right:1.5rem}}.-tg .-r{font-size:.75rem}.-tg .-i{width:12px;height:12px;margin-right:5px}.-tg svg{width:100%}@media(max-width:1023px){.-ty{display:none}}.-tb{margin:0;font-size:1rem;color:#005af0}.-tw{font-size:.875rem;line-height:1.6;margin:0}.-tx{display:flex;justify-content:center;margin-bottom:2rem}.-tx .ap-a-btn{padding:.5rem 2rem;font-size:.875rem;color:#005af0;border:2px solid #005af0;background:transparent;box-shadow:none;opacity:.6}.-tx .ap-a-btn:hover{transform:none;opacity:1}.amp-notsupported .-tx{display:none}.-th{padding:0 25px;font-size:.75rem}@media(min-width:1024px){.-th{padding:0 60px}}.-tk{padding:14vh 15px 0;text-align:center}.-t_,.-tj{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:16vw;margin:0;color:#ebebf0}@media(min-width:768px){.-t_,.-tj{font-size:13vw}}@media(min-width:1024px){.-t_,.-tj{font-size:100px}}.-t_{font-family:Arial,Helvetica,sans-serif}.-tq{margin:0 0 2em}.-tt .empty{overflow:hidden;height:0}.-tz{font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#000}@media(min-width:1024px){.-tz{font-size:1rem}}.-ne{line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem}@media(min-width:1024px){.-ne{font-size:.875rem}}.-ne.active{text-decoration:underline}.-tz:hover{color:#005af0}.-tz.active{font-weight:700;color:#005af0}.ap--header{width:100%;max-width:2020px;margin:0 auto;position:-webkit-sticky;position:sticky;top:0;z-index:1001;background-color:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}.ap--header.mainmenuopen{z-index:1004}.ap--header.mainmenuopen~.ap--main{max-width:100vw;overflow-x:hidden}@media(min-width:1024px){.ap--header{top:0}.ap--header.has-banner{top:-31px}}.ap-o-header{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;max-width:1460px;padding:10px 0 0 20px;margin:0 auto}@media(min-width:1024px){.ap-o-header{display:flex;padding-left:30px}}.ap-o-header-home{position:-webkit-sticky;position:sticky;top:10px;display:flex;align-items:center;margin-right:auto;padding-bottom:10px;overflow:hidden}.ap-o-header-home-logo{height:30px;margin-right:6px;width:30px}.ap-o-header-home-sub-title,.ap-o-header-home-title{margin-left:4px;font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#005af0}@media(min-width:1024px){.ap-o-header-home-sub-title,.ap-o-header-home-title{font-size:1.125rem}}.ap-o-header-home-sub-title{color:#000;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ap-o-header-main{display:none;flex:1 1 auto;padding:0 30px}@media(min-width:1024px){.ap-o-header-main{display:flex}}.ap-o-header-main-item{position:relative;display:flex;align-items:center;margin:0 18px -5px}.ap-o-header-main-link{display:flex;align-items:center;padding:0 0 14px;border:0;background:none}.ap-o-header-main-link-icon{font-size:8px;margin-left:5px;transform:rotate(0deg);transition:transform .2s ease}.ap-o-header-flyout:hover,.ap-o-header-main-link:focus~.ap-o-header-flyout,.ap-o-header-main-link:hover~.ap-o-header-flyout{opacity:1;pointer-events:all;transition:opacity .2s ease}.ap-o-header-flyout:focus-within{opacity:1;pointer-events:all;transition:opacity .2s ease}.ap-o-header-flyout{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);position:absolute;top:95%;left:0;margin:0;padding:0 0 10px;pointer-events:none;opacity:0;list-style:none;background:#fff;border-radius:0 0 4px 4px;transition:opacity .2s ease}.ap-o-header-flyout:before{content:"";display:block;background:linear-gradient(180deg,rgba(0,0,0,.07) 0,hsla(0,0%,100%,.07));height:8px;margin-bottom:10px}.ap-o-header-flyout-item-secondary{margin:20px 0;white-space:nowrap;min-width:200px}.ap-o-header-flyout-item-secondary a:hover{color:#005af0}.ap-o-header-flyout-item-title{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-family:Poppins,system;font-weight:700;color:#000;line-height:1.4em}.ap-o-header-flyout-item-title.secondary{padding:0 15px}.ap-o-header-flyout-item-description{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;opacity:.75;line-height:1.25em}.ap-o-header-flyout-primary-item{position:relative;width:300px}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);background-color:#005af0}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info>*{color:#fff}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-stories .ap-o-header-flyout-item-description,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-stories .ap-o-header-flyout-item-title{color:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-email .ap-o-header-flyout-item-description,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-email .ap-o-header-flyout-item-title{color:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon{fill:#fff}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon.email,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon.stories{fill:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.websites{background:linear-gradient(225deg,#00dcc0,#005af0 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.stories{background:linear-gradient(225deg,#ec6600,#ffdc00 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.ads{background:linear-gradient(225deg,#eb49e1,#5500d7 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.email{background:linear-gradient(225deg,#09a600,#e1eb64 75%)}.ap-o-header-flyout-primary-item-link{display:flex;align-items:center;border-radius:4px;padding:10px;margin:0 5px}.ap-o-header-flyout-primary-item-link-info{margin:0 20px 0 15px}.ap-o-header-flyout-primary-item-link-icon{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:2em;height:2em}.ap-o-header-flyout-primary-item-link-icon.websites{fill:url(/web/20211117033346im_/https://amp.dev/#gradient-websites) #000}.ap-o-header-flyout-primary-item-link-icon.stories{fill:url(/web/20211117033346im_/https://amp.dev/#gradient-stories) #000}.ap-o-header-flyout-primary-item-link-icon.ads{fill:url(/web/20211117033346im_/https://amp.dev/#gradient-ads) #000}.ap-o-header-flyout-primary-item-link-icon.email{fill:url(/web/20211117033346im_/https://amp.dev/#gradient-email) #000}#blm-banner{background:#111;color:#eee;display:block;text-align:center;padding:.5em}.ap-section{grid-column:2/22;margin-top:120px;width:100%}@media(min-width:768px){.ap-section{margin-top:160px}}@media(min-width:1024px){.ap-section{margin-top:200px}}.ap-section:first-child{margin-top:80px}@media(min-width:1280px){.ap-section:first-child{margin-top:140px}}.ap-section:last-child{margin-bottom:100px}@media(min-width:1280px){.ap-section:last-child{margin-bottom:150px}}@media(min-width:768px){.ap-section.--col-4-15{grid-column:2/15}}@media(min-width:1280px){.ap-section.--col-4-15{grid-column:4/15}.ap-section.--col-3-22{grid-column:2/22}}@media(min-width:768px){.ap-section.--col-4-23{grid-column:2/23}}@media(min-width:1280px){.ap-section.--col-4-23{grid-column:4/23}}.ap-section.--col-left,.ap-section.--col-right,.ap-section.--offset{grid-column:2/24}@media(min-width:768px){.ap-section.--col-left{grid-column:2/16}}@media(min-width:1024px){.ap-section.--col-left{grid-column:4/16}}@media(min-width:768px){.ap-section.--col-right{grid-column:9/23}}@media(min-width:1024px){.ap-section.--col-right{grid-column:10/23}}.ap-section.--fullscreen{grid-column:1/-1;margin:0}.ap-section.--offset{max-width:1440px}@media(min-width:1680px){.ap-section.--offset{grid-column:1/-1;margin-left:auto;margin-right:auto}}.ap-text-media{display:flex;flex-direction:column}@media(min-width:768px){.ap-text-media{flex-direction:row}}.ap-text-media-col{margin-bottom:20px}@media(min-width:768px){.ap-text-media-col{min-width:300px;width:50%}.ap-text-media-col:last-child{margin:0 0 0 8%}.ap-text-media-col:only-child{margin:0}.ap-text-media.--thirds .ap-text-media-col:first-child{width:30%}.ap-text-media.--thirds .ap-text-media-col:last-child{width:62%}}.ap-text-media.--reverse{flex-direction:column-reverse}@media(min-width:768px){.ap-text-media.--reverse{flex-direction:row-reverse}.ap-text-media.--reverse .ap-text-media-col:first-child{margin:0 0 0 8%}.ap-text-media.--reverse .ap-text-media-col:last-child{margin:0}}.ap-text-media.--mobile-reverse{flex-direction:column-reverse}@media(min-width:768px){.ap-text-media.--mobile-reverse{flex-direction:row}.ap-text-media.--center{align-items:center}}.ap-text-block{margin-bottom:50px;max-width:690px}.ap-text-block:last-child{margin-bottom:0}.ap-text-block p{color:#48525c}.ap-text-block h1,.ap-text-block h2,.ap-text-block h3,.ap-text-block h4{max-width:90%}.ap-text-block h1:first-of-type,.ap-text-block h2:first-of-type,.ap-text-block h3:first-of-type,.ap-text-block h4:first-of-type{margin-top:0}.ap-button{-webkit-appearance:none;background:#005af0;border:none;border-radius:3px;box-shadow:0 15px 35px -5px rgba(0,0,0,.25);color:#fff;cursor:pointer;display:inline-block;font-family:Poppins,system;font-size:1em;margin:0 0 50px;max-width:100%;padding:.75em 1.75em;text-align:center;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease}.ap-button:hover{box-shadow:0 25px 20px -15px rgba(0,0,0,.15);transform:translateY(-.125em)}.ap-button.--inactive,.ap-button.--inverted{background:#fff;color:#005af0}.ap-button.--inactive{color:inherit}.ap-pie-charts{margin-bottom:50px}.ap-pie-charts-chart{background:#e2e5e6;border-radius:50%;font-family:Poppins,system;height:var(--size);margin-left:auto;position:relative;width:var(--size)}.ap-pie-charts-chart:nth-child(odd){--size:180px}@media(min-width:1024px){.ap-pie-charts-chart:nth-child(odd){--size:340px}}.ap-pie-charts-chart:nth-child(2n){--size:160px;margin-left:0;margin-top:-10%}@media(min-width:1024px){.ap-pie-charts-chart:nth-child(2n){--size:240px;margin-top:-5%}}.ap-pie-charts-chart-clip{clip:rect(0,var(--size),var(--size),calc(var(--size)/2));height:var(--size);left:0;position:absolute;top:0;transform:rotate(var(--rotation));width:var(--size)}.ap-pie-charts-chart-clip:first-child{transform:rotate(0)}.ap-pie-charts-chart-part{clip:rect(0,calc(var(--size)/2),var(--size),0);background:#005af0;border-radius:50%;height:var(--size);position:absolute;transform:rotate(var(--rotation));width:var(--size)}.ap-pie-charts-chart-overlay{background:#fff;border-radius:50%;box-shadow:0 5px 15px 10px rgba(0,0,0,.2);color:#20202a;display:flex;flex-direction:column;font-weight:700;height:70%;justify-content:center;left:15%;line-height:1.1;position:absolute;text-align:center;top:15%;width:70%}.ap-pie-charts-chart-overlay span{font-size:45px}@media(min-width:1024px){.ap-pie-charts-chart-overlay span{font-size:65px}}.ap-pie-charts-caption{line-height:1.71;margin-left:auto;margin-top:50px}@media(min-width:1024px){.ap-pie-charts-caption{max-width:80%}}.ap-highlight-stripes{display:flex;justify-content:center;min-height:121px;position:relative;width:100%}.ap-highlight-stripes:after{background:linear-gradient(233deg,#00dcc0 10%,#005af0 50%);clip-path:url(/web/20211117033346im_/https://amp.dev/#highlight-stripes);content:"";flex:1 0 auto;max-width:1920px;transform:skewY(-4.5deg);width:100vw}.ap-header{grid-gap:15px;background:#fff;display:grid;grid-template-columns:repeat(24,1fr);margin:0 auto;position:sticky;top:0;z-index:1001}.ap-header:after{background:linear-gradient(180deg,rgba(0,0,0,.07),transparent);content:"";display:block;height:8px;margin-bottom:10px;pointer-events:none;position:absolute;top:100%;width:100%}.ap-header-main{align-items:center;display:flex;flex-wrap:nowrap;grid-column:2/24;height:50px;margin:0 auto;width:100%}@media(min-width:1680px){.ap-header-main{grid-column:4/22}}.ap-header-home{align-items:center;display:flex;margin-right:auto}.ap-header-home-logo{height:30px;margin-right:10px;max-width:30px;min-width:30px}.ap-header-home-title{color:#005af0;font-family:Poppins,system;font-size:24px;font-weight:700}@media(min-width:1024px){.ap-header-home-title{font-size:18px}}.ap-header-nav{background:#fff;height:calc(100vh - 100%);left:0;opacity:0;padding:30px;pointer-events:none;position:absolute;top:100%;transition:opacity .2s ease-in-out;width:100%}@media(min-width:1024px){.ap-header-nav{align-items:center;display:flex;flex:1 1 auto;height:100%;opacity:1;padding:0 30px;pointer-events:auto;position:relative;top:0}}.ap-header-nav-item{display:flex;flex-direction:column;margin-bottom:16px;position:relative}@media(min-width:1024px){.ap-header-nav-item{align-items:center;flex-direction:row;height:100%;margin-bottom:0}}.ap-header-nav-link{align-items:center;background:none;border:0;display:flex;height:100%}@media(min-width:1024px){.ap-header-nav-link{padding:0 18px}}.ap-header-nav-link-icon{height:8px;margin-left:5px;transform:rotate(0deg);transition:transform .2s ease-in-out;width:8px}.ap-header-nav-link:hover .ap-header-nav-link-icon{transform:translateY(2px)}.--mainmenuopen .ap-header-nav{opacity:1;pointer-events:auto}.ap-header-flyout{background:#fff;border-radius:0 0 4px 4px;display:none;list-style:none;margin:0;padding:15px 5px;transition:opacity .2s ease-in-out}@media(min-width:1024px){.ap-header-flyout{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);left:18px;opacity:0;pointer-events:none;position:absolute;top:100%}}.ap-header-flyout-item{min-width:200px}.ap-header-flyout-item+.ap-header-flyout-item{margin-top:16px}.ap-header-flyout-item-link{align-items:center;border-radius:4px;display:flex}@media(min-width:1024px){.ap-header-flyout-item-link{margin:0 5px;padding:10px}}.ap-header-flyout-item-link-icon{box-sizing:initial;display:flex;display:none;font-size:medium;height:32px;justify-content:center;width:32px}@media(min-width:1024px){.ap-header-flyout-item-link-icon{display:block}}.ap-header-flyout-item-link-icon svg{height:100%;width:100%}.websites .ap-header-flyout-item-link-icon svg{fill:url(/web/20211117033346im_/https://amp.dev/#gradient-websites) #000}.stories .ap-header-flyout-item-link-icon svg{fill:url(/web/20211117033346im_/https://amp.dev/#gradient-stories) #000}.ads .ap-header-flyout-item-link-icon svg{fill:url(/web/20211117033346im_/https://amp.dev/#gradient-ads) #000}.email .ap-header-flyout-item-link-icon svg{fill:url(/web/20211117033346im_/https://amp.dev/#gradient-email) #000}@media(min-width:1024px){.ap-header-flyout-item-link-info{margin:0 20px 0 15px}}.ap-header-flyout-item-title{color:#48525c;font-size:16px;font-weight:400}@media(min-width:1024px){.ap-header-flyout-item-title{color:#000;font-size:14px;font-weight:700}}.ap-header-flyout-item-description{color:#48525c;display:none;font-size:13px;font-weight:400;line-height:1.25}@media(min-width:1024px){.ap-header-flyout-item-description{display:block}.ap-header-flyout-item.--secondary{padding:0 15px}}.ap-header-flyout-item.--primary{border-radius:4px;width:300px}@media(min-width:1024px){.ap-header-flyout-item.--primary{margin-top:0}}@media(pointer:fine){.ap-header-flyout-item:hover.--secondary a{color:#005af0}.ap-header-flyout-item:hover.--primary{background:#005af0}.ap-header-flyout-item:hover.--primary .ap-header-flyout-item-description,.ap-header-flyout-item:hover.--primary .ap-header-flyout-item-title{color:#fff}.ap-header-flyout-item:hover.--primary svg{fill:#fff}.ap-header-flyout-item:hover.websites{background:linear-gradient(225deg,#00dcc0,#005af0 75%)}.ap-header-flyout-item:hover.stories{background:linear-gradient(225deg,#ec6600,#ffdc00 75%)}.ap-header-flyout-item:hover.stories .ap-header-flyout-item-description,.ap-header-flyout-item:hover.stories .ap-header-flyout-item-title{color:#20202a}.ap-header-flyout-item:hover.stories svg{fill:#20202a}.ap-header-flyout-item:hover.ads{background:linear-gradient(225deg,#eb49e1,#5500d7 75%)}.ap-header-flyout-item:hover.email{background:linear-gradient(225deg,#09a600,#e1eb64 75%)}.ap-header-flyout-item:hover.email .ap-header-flyout-item-description,.ap-header-flyout-item:hover.email .ap-header-flyout-item-title{color:#20202a}.ap-header-flyout-item:hover.email svg{fill:#20202a}}.amp-mode-keyboard .ap-header-flyout:hover,.amp-mode-keyboard .ap-header-nav-link:focus~.ap-header-flyout,.amp-mode-keyboard .ap-header-nav-link:hover~.ap-header-flyout,.amp-mode-mouse .ap-header-flyout:hover,.amp-mode-mouse .ap-header-nav-link:focus~.ap-header-flyout,.amp-mode-mouse .ap-header-nav-link:hover~.ap-header-flyout,.amp-mode-touch .ap-header-flyout.active{display:block;opacity:1;pointer-events:auto}.ap-header-flyout:focus-within{opacity:1;pointer-events:auto}.ap-header-burger{margin-left:20px}@media(min-width:1024px){.ap-header-burger{display:none}}.ap-header-burger-icon{height:30px;width:30px}.ap-format-toggle{display:none;height:44px;position:relative;z-index:12}.ap-format-toggle-link,.ap-format-toggle-selected{align-items:center;border-radius:4px;box-shadow:0 5px 15px -5px rgba(0,0,0,.25);color:#000;display:flex;font-family:Poppins,system;font-size:12px;font-weight:700;min-height:34px;overflow:hidden;padding:5px 8px;text-align:left;transition:opacity .2s ease;width:100%;z-index:3}.ap-format-toggle-link .ap-icon,.ap-format-toggle-selected .ap-icon{height:14px;margin-right:8px;width:14px}.ap-format-toggle-link{background:#ebebf0;color:#000;margin-top:2px}.ap-format-toggle-angle{margin-left:auto;margin-right:0;width:10px}.ap-format-toggle-formats{opacity:0;pointer-events:none;position:absolute;transform:translateY(-20px);transition:transform .2s ease-in-out,opacity .2s ease-in-out;transition-delay:.05s;width:100%;z-index:2}.--sidebaropen .ap-format-toggle{display:block}.ap-format-toggle-formats:focus-within,.ap-format-toggle-formats:hover,.ap-format-toggle-selected:hover+.ap-format-toggle-formats{opacity:1;pointer-events:auto;transform:translateY(0)}.ap-format-toggle-link:hover.--websites,.ap-format-toggle-selected.--websites{background:linear-gradient(225deg,#00dcc0,#005af0 75%);color:#fff}.ap-format-toggle-link:hover.--websites svg,.ap-format-toggle-selected.--websites svg{fill:currentColor}.ap-format-toggle-link:hover.--stories,.ap-format-toggle-selected.--stories{background:linear-gradient(225deg,#ec6600,#ffdc00 75%);color:#20202a}.ap-format-toggle-link:hover.--stories svg,.ap-format-toggle-selected.--stories svg{fill:currentColor}.ap-format-toggle-link:hover.--ads,.ap-format-toggle-selected.--ads{background:linear-gradient(225deg,#eb49e1,#5500d7 75%);color:#fff}.ap-format-toggle-link:hover.--ads svg,.ap-format-toggle-selected.--ads svg{fill:currentColor}.ap-format-toggle-link:hover.--email,.ap-format-toggle-selected.--email{background:linear-gradient(225deg,#09a600,#e1eb64 75%);color:#20202a}.ap-format-toggle-link:hover.--email svg,.ap-format-toggle-selected.--email svg{fill:currentColor}.ap-banner{background-color:#005af0;color:#fff;display:flex;font-size:14px;justify-content:center;min-height:32px;padding:3px 15px}@media(min-width:768px){.ap-banner{align-items:center}}.ap-banner .ap-icon{fill:currentColor;display:inline;height:1em;margin-right:5px;width:.9em}.ap-language-selector{display:none;height:100%;position:relative}@media(min-width:1024px){.ap-language-selector{display:flex}}.ap-language-selector:after{background:#fff;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%2320202A'%3E%3Cpath d='M59.863 17.14 64 22.628 32 46.86 0 22.628l4.137-5.488L32 38.248z'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;content:"";height:8px;pointer-events:none;position:absolute;right:5px;top:calc(50% - 4px);width:8px}.ap-language-selector select{font-family:Poppins,system;font-size:16px;font-weight:700;height:100%;padding:0 15px 0 5px}.--mainmenuopen .ap-language-selector{display:flex}.ap-search-trigger{align-items:center;display:flex;height:100%;margin:0 0 0 20px;padding:5px 0}.ap-search-trigger-close{fill:#fff;background:#005af0;border-radius:50%;box-shadow:0 6px 10px 0 rgba(0,0,0,.14);left:calc(90vw - 18px);margin:0;padding:12px;position:fixed;top:35px;z-index:3}@media(min-width:1024px){.ap-search-trigger-close{left:auto;position:absolute;right:10px;top:52px}}@media(min-width:1280px){.ap-search-trigger-close{right:52px}}@media(min-width:1680px){.ap-search-trigger-close{right:87px}}.ap-search-trigger-close .ap-search-trigger-icon{height:12px;width:12px}.ap-search-trigger-icon{height:18px;width:18px}.ap-nav-link{color:#000;font-family:Poppins,system;font-size:24px;font-weight:700}@media(min-width:1024px){.ap-nav-link{font-size:16px}}.ap-nav-link .ap-icon{font-size:8px}.ap-nav-link:hover{color:#005af0}.ap-nav-link.active{color:#005af0;font-weight:700}.ap-icon{box-sizing:initial;display:flex;font-size:medium;justify-content:center}.-nt{--spacing:50px;grid-gap:15px;color:#fff;display:grid;grid-column:1/-1;grid-template-columns:repeat(24,1fr);padding:var(--spacing) 0;position:relative}@media(min-width:768px){.-nt{--spacing:100px}}.-nt:before{background:linear-gradient(225deg,#00dcc0,#005af0 75%);clip-path:polygon(0 0,100% 0,100% calc(100% - 3em),0 100%,0 100%);color:#fff;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.-nt:before svg{fill:currentColor}@media(min-width:768px){.-nt:before{height:calc(100% - var(--spacing))}}.-nn,.-nr,.-ni{position:relative;z-index:1}.-ni{grid-column:2/24;margin-bottom:var(--spacing)}@media(min-width:768px){.-ni{grid-column:2/span 11;grid-row:1}}.-ni p{color:inherit}.-nr{align-self:flex-end;grid-column:1/-1;grid-row:1;margin-bottom:var(--spacing);overflow:hidden;padding-bottom:105%;z-index:0}.-nr amp-img img{object-fit:cover}@media(min-width:768px){.-nr{height:669px;margin-bottom:calc(var(--spacing)*-1);padding-bottom:unset;padding-top:var(--spacing);top:20%;width:1100px}}@media(min-width:1024px){.-nr{grid-column:6/-1;top:0}}@media(min-width:1280px){.-nr{grid-column:9/-1}}@media(min-width:1680px){.-nr{grid-column:11/-1}}.-nn{display:none}@media(min-width:1024px){.-nn{align-self:center;display:block;grid-column:14/-1;grid-row:1}}.-nn amp-img,.-nn svg{width:100%}.-nn svg{height:100%}@media(min-width:1024px){.-nn{margin-top:-25%}.-nn svg{height:auto;width:auto}}@media(min-width:1280px){.-nn{grid-column:14/span 8}}.-nt .ap-button{margin-top:50px}.ap-center-stage{--spacing:50px;grid-gap:15px;background:linear-gradient(180deg,#00dcc0 -45%,#005af0 161%);color:#fff;display:grid;grid-column:1/-1;grid-template-columns:repeat(24,1fr);padding:var(--spacing) 0;position:relative}@media(min-width:768px){.ap-center-stage{--spacing:100px}}.ap-section+.ap-center-stage{margin-top:100px}.ap-center-stage-content{align-items:center;display:flex;flex-direction:column;grid-column:2/24;text-align:center}.ap-center-stage .ap-button{margin:50px auto 0;width:max-content}.ap-cards{grid-gap:15px;display:grid;grid-column:1/-1;grid-template-columns:repeat(24,1fr);position:relative}.ap-center-stage+.ap-cards{margin-top:-30px}.ap-section+.ap-cards{margin-top:100px}.ap-cards.--no-background:after{display:none}.ap-cards:after{background:#0080e3;content:"";height:100%;height:75%;left:0;position:absolute;top:0;width:100%}.ap-cards-item{background:#fff;border-radius:8px;box-shadow:0 15px 25px 0 rgba(0,0,0,.15);color:#20202a;display:flex;flex-direction:column;min-height:320px;padding:20px}.ap-cards-item-icon{height:64px;margin-bottom:20px;width:64px}.ap-cards-item-icon svg{max-width:none}.ap-cards-item p{flex-grow:2}.ap-cards-grid{grid-gap:15px;display:grid;grid-column:2/span 22;grid-template-columns:repeat(2,1fr);margin:0 auto;max-width:1440px;position:relative;z-index:1}@media(max-width:767px){.ap-cards-grid{display:none}}@media(min-width:1024px){.ap-cards-grid{grid-template-columns:repeat(3,1fr)}}.ap-cards-carousel{border-radius:8px;display:flex;grid-column:1/-1;position:relative;z-index:1}@media(min-width:768px){.ap-cards-carousel{display:none}}.ap-cards-carousel-pagination{grid-column:1/-1;margin:0 auto}@media(min-width:768px){.ap-cards-carousel-pagination{display:none}}.ap-cards-carousel-pagination-item{background-color:#e2e5e6;border-radius:50%;display:inline-block;height:10px;margin:0 5px;width:10px}.ap-cards-carousel-pagination-item:first-child{margin-left:0}.ap-cards-carousel-pagination-item:last-child{margin-right:0}.ap-cards-carousel-pagination-item[option][selected]{outline:none}.ap-cards-carousel-pagination-item[selected]{background:linear-gradient(225deg,#00dcc0,#005af0 75%);color:#fff}.ap-cards-carousel-pagination-item[selected] svg{fill:currentColor}.ap-cards-carousel .ap-cards-item{box-shadow:none;box-shadow:0 15px 25px 0 rgba(0,0,0,.15);width:90vw}.ap-cards-carousel .ap-cards-item-wrapper{display:flex;justify-content:center;padding-bottom:10px}.-ns{--spacing:50px;grid-gap:15px;color:#20202a;display:grid;grid-column:1/-1;grid-template-columns:repeat(24,1fr);margin:0 auto;max-width:1440px;padding:var(--spacing) 0;position:relative;text-align:center}@media(min-width:1024px){.-ns{--spacing:100px;padding:var(--spacing) 0 60px;text-align:left}}.-no{grid-column:2/24}@media(min-width:768px){.-no{grid-column:4/22}}@media(min-width:1024px){.-no{grid-column:2/16;grid-row:1}}@media(min-width:1280px){.-no{grid-column:3/15}}.-nu{align-items:center;display:flex;grid-column:1/-1;justify-content:center}.-nu svg{height:52vw;max-height:194px;max-width:194px;width:52vw}@media(min-width:1024px){.-nu{grid-column:16/24;grid-row:1}.-nu svg{max-height:341px;max-width:341px;position:absolute}}@media(min-width:1280px){.-nu{grid-column:15/-1}.-nu svg{max-height:514px;max-width:514px}}.ap-formats{--width:100vw;--skew-angle:4deg;--skew-tan:0.034963406;--skew-padding:calc(var(--width)*var(--skew-tan));display:flex;flex-direction:column;grid-column:1/-1;margin:0 auto;max-width:1440px;position:relative}@media(min-width:1024px){.ap-formats{grid-gap:10px;flex-direction:row;flex-wrap:wrap;grid-column:2/22;padding:0 10px}.ap-formats+.ap-section{margin-top:200px}}@media(min-width:1280px){.ap-formats{grid-column:1/-1}}.ap-formats-navigation{height:100%;left:20px;padding:136px 0 137px;position:absolute;top:0;z-index:1}@media(min-width:768px){.ap-formats-navigation{left:84px;padding:168px 0 154px}}@media(min-width:1024px){.ap-formats-navigation{display:none}}.ap-formats-navigation-wrapper{display:flex;flex-direction:column;left:0;position:sticky;top:25vh}.ap-formats-navigation-icon{fill:#fff;align-items:center;display:flex;height:68px;justify-content:center;width:68px}.ap-formats-navigation-icon-wrapper{position:relative}.ap-formats-navigation-icon.active{background-color:#fff;border-radius:50%;bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;visibility:hidden}.ap-formats-navigation-icon.active.websites{fill:url(/web/20211117033346im_/https://amp.dev/#gradient-websites) #000}.ap-formats-navigation-icon.active.stories{fill:url(/web/20211117033346im_/https://amp.dev/#gradient-stories) #000}.ap-formats-navigation-icon.active.ads{fill:url(/web/20211117033346im_/https://amp.dev/#gradient-ads) #000}.ap-formats-navigation-icon.active.email{fill:url(/web/20211117033346im_/https://amp.dev/#gradient-email) #000}.ap-formats-navigation-icon svg{height:40px;width:40px}.ap-formats-format{color:#20202a;flex:1;overflow:hidden;position:relative;transform:skewY(calc(var(--skew-angle)*-1))}.ap-formats-format-content{display:flex;flex-direction:column;height:100%;padding:136px 20px 137px 109px;position:relative;transform:skewY(var(--skew-angle))}.ap-formats-format-content .ap-h5{flex-grow:2;margin:15px 0 40px}.ap-formats-format-content .ap-link{color:inherit;padding-bottom:0}.ap-formats-format-content .ap-link-text{color:inherit}.ap-formats-format.websites .cta{display:none}.ap-formats-format.ads,.ap-formats-format.websites{color:#fff}@media(min-width:768px){.ap-formats-format-content{padding:168px 83px 154px 207px}}@media(min-width:1024px){.ap-formats-format{border-radius:4px;box-shadow:0 15px 25px 0 rgba(0,0,0,.15);flex:1 0 calc(50% - 20px);transform:skewY(0deg);transition:box-shadow .3s ease-in-out,transform .3s ease-in-out}.ap-formats-format:focus,.ap-formats-format:focus-within,.ap-formats-format:hover{box-shadow:0 5px 10px 0 rgba(0,0,0,.1);transform:translateY(-.125em)}.ap-formats-format-content{padding:50px 30px 30px;transform:skewY(0deg)}.ap-formats-format-content h1{font-size:28px}.ap-formats-format-content .cta{margin-bottom:19px}.ap-formats-format:nth-child(2n){top:-24px}.ap-formats-format:nth-child(odd){top:24px}.ap-formats-format.websites .cta{display:inline-block}}@media(min-width:1280px){.ap-formats-format{flex:1 0 calc(25% - 40px)}}.ap-formats-logo{display:none;height:50px;margin-bottom:15px;width:50px}@media(min-width:1024px){.ap-formats-logo{display:initial}.ads .ap-formats-logo,.websites .ap-formats-logo{fill:#fff}}.ap-formats-background{bottom:calc(var(--skew-padding)*-1);left:0;position:absolute;right:0;top:calc(var(--skew-padding)*-1);transform:skewY(var(--skew-angle))}@media(min-width:1024px){.ap-formats-background{bottom:0;top:0;transform:skewY(0deg)}.ap-formats-background svg{display:none}}.websites .ap-formats-background{background:linear-gradient(225deg,#00dcc0,#005af0 75%);color:#fff}.websites .ap-formats-background svg{fill:currentColor}.stories .ap-formats-background{background:linear-gradient(225deg,#ec6600,#ffdc00 75%);color:#20202a}.stories .ap-formats-background svg{fill:currentColor}.email .ap-formats-background{background:linear-gradient(225deg,#09a600,#e1eb64 75%);color:#20202a}.email .ap-formats-background svg{fill:currentColor}.ads .ap-formats-background{background:linear-gradient(225deg,#eb49e1,#5500d7 75%);color:#fff}.ads .ap-formats-background svg{fill:currentColor}.ap-formats-background svg{bottom:calc(var(--skew-padding)*-1);height:100%;left:50%;opacity:.1;position:absolute;width:80%}.-na{--spacing:43px;grid-gap:15px;grid-row-gap:unset;display:grid;grid-column:1/-1;grid-template-columns:repeat(24,1fr);max-width:1440px;position:relative}.-na:last-child{margin-bottom:100px}@media(max-width:767px){.-na .-nf:first-child{padding-left:15px}.-na .-nf:last-child{padding-right:15px}}@media(min-width:768px){.-na{grid-gap:22px;margin:0 auto;padding:0 15px}.-na:last-child{margin-bottom:200px}}.-na.--news .-nl{min-height:438px}.-na.--success-stories .-nl{min-height:493px}.-nc{grid-column:1/-1;grid-row:1}.-nh{display:none;left:0}.-nh.--prev{grid-column:1}.-nh.--next{grid-column-end:-1}.-nh>button.amp-carousel-button{background-size:19px 19px;box-shadow:0 15px 25px 0 rgba(0,0,0,.15);height:var(--spacing);left:0;margin:0;width:var(--spacing)}@media(min-width:1024px){.-nh>button.amp-carousel-button{background-size:18px 18px}}@media(min-width:1280px){.-nh>button.amp-carousel-button{background-size:28px 28px}}.-nh>button.amp-carousel-button:hover{box-shadow:0 5px 10px 0 rgba(0,0,0,.1)}.-nh>button.amp-carousel-button-prev{transform:scaleX(-1)}.-nh>button.amp-carousel-button-next,.-nh>button.amp-carousel-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23005af0'%3E%3Cpath d='M43.16 10.18c-.881-.881-2.322-.881-3.203 0s-.881 2.322 0 3.203l16.335 16.335H2.241A2.238 2.238 0 0 0-.001 31.96c0 1.281.961 2.322 2.242 2.322h54.051L39.877 50.617c-.881.881-.881 2.322 0 3.203s2.322.881 3.203 0l20.259-20.259a2.271 2.271 0 0 0 0-3.203L43.16 10.179z'/%3E%3C/svg%3E")}@media(min-width:768px){.-nh{align-self:center;display:initial;grid-row:1;position:relative}}.-np{grid-column:1/-1;grid-row:2;margin:0 auto}@media(min-width:768px){.-np{display:none}}.-nd{background-color:#e2e5e6;border-radius:50%;display:inline-block;height:10px;margin:0 5px;width:10px}.-nd:first-child{margin-left:0}.-nd:last-child{margin-right:0}.-nd[option][selected]{outline:none}.-nd[selected]{background:linear-gradient(225deg,#00dcc0,#005af0 75%);color:#fff}.-nd[selected] svg{fill:currentColor}@media(min-width:768px){.-nc{padding:0 var(--spacing)}.-na .-nf{padding-bottom:25px}.-na .-nf:nth-child(3n+1){align-items:center}.-na .-nf:nth-child(3n+2){align-items:flex-end}.-na .-nf:nth-child(3n+3){align-items:flex-start}}@media(min-width:1024px){.-na{--spacing:47px}}@media(min-width:1280px){.-na{--spacing:68px}}.-nf{align-items:center;display:flex;justify-content:center}.-nl{border-radius:8px;box-shadow:0 15px 25px 0 rgba(0,0,0,.15);color:#20202a;display:flex;flex-direction:column;max-width:calc(100% - 10px);transition:box-shadow .3s ease-in-out,transform .3s ease-in-out;white-space:normal}@media(min-width:768px){.-nl{max-width:calc(100% - 30px)}}.-nl:focus,.-nl:focus-within,.-nl:hover{box-shadow:0 5px 10px 0 rgba(0,0,0,.1);transform:translateY(-.125em)}.-nv{align-items:center;display:flex;padding:10px 30px}.-nm{height:26px;margin-right:10px;width:26px}.-ng{filter:brightness(97%);height:220px;position:relative}.-ng amp-img img{object-fit:cover}.-ny{height:40px;margin:5px 0 10px;position:relative}.-ny amp-img img{object-fit:contain;object-position:left center}.-nb{display:flex;flex-direction:column;flex-grow:2;padding:20px 30px}.-nw{flex-grow:2}.-nx{color:#48525c;font-size:14px;font-weight:400;text-transform:capitalize}.-nk{align-items:center;display:flex;height:100%;justify-content:center;padding:calc(28.125% - 2em) 0;width:100%}.-nl .ap-a-ico{box-sizing:initial;display:flex;font-size:medium;height:4em;justify-content:center;width:4em}.-n_{color:#20202a;margin-bottom:36px}.-n_ h1{margin-bottom:20px}.-n_ p{margin-bottom:40px}.-n_ .-s{border-bottom:none}@media(min-width:1024px){.-n_{margin-bottom:1.5em}}.ap-components-showcase{height:100%;position:relative}.ap-components-showcase-buttons{grid-gap:.625rem;display:grid;grid-template-columns:repeat(1,1fr);margin:3.75rem 0 1.875rem}.ap-components-showcase-buttons button{margin-bottom:0}@media(min-width:768px){.ap-components-showcase-buttons{grid-template-columns:repeat(2,1fr);margin-top:1.1em}}.ap-components-showcase-demos{margin-bottom:150px}.ap-components-showcase-demos .show{display:block;height:455px;opacity:1;transition:.3s ease-in-out;visibility:visible}.ap-components-showcase-demos .hide{opacity:0;pointer-events:none;visibility:hidden}.ap-components-showcase-demo{position:relative}.ap-components-showcase-demo-code{height:100%;left:0;max-height:420px;position:absolute;top:0;top:20px;width:100%;width:95%}@media(min-width:768px){.ap-components-showcase-demo-code{width:65%}}.ap-components-showcase-demo-code-snippet{height:92%}.ap-components-showcase-demo-code:before{background:#20202a;border-bottom:2px solid #48525c;bottom:calc(100% - 20px);color:#fff;content:attr(title);font-family:Poppins,system;font-size:12px;font-weight:700;padding:12px 20px;position:absolute;width:calc(100% - 40px)}.ap-components-showcase-demo-code code{color:#fff}.ap-components-showcase-demo-code .grap-lnk{margin-top:20px;width:100%}@media(min-width:768px){.ap-components-showcase-demo-code .grap-lnk{margin-top:15px;width:50%}}@media(min-width:1024px){.ap-components-showcase-demo-code .grap-lnk{margin-top:10px;width:100%}}.ap-components-showcase-demo-code[title=amp-carousel] .grap-lnk{margin-top:300px}@media(min-width:768px){.ap-components-showcase-demo-code[title=amp-carousel] .grap-lnk{margin-top:15px}}.ap-components-showcase-demo-code[title=amp-accordion] .grap-lnk{margin-top:140px}@media(min-width:768px){.ap-components-showcase-demo-code[title=amp-accordion] .grap-lnk{margin-top:15px}}.ap-components-showcase-demo-code[title=amp-autocomplete] .grap-lnk{margin-top:90px}@media(min-width:768px){.ap-components-showcase-demo-code[title=amp-autocomplete] .grap-lnk{margin-top:15px}}.ap-components-showcase-demo-ui{background:#fff;bottom:0;height:80%;max-height:330px;position:absolute;right:0;width:95%}@media(min-width:768px){.ap-components-showcase-demo-ui{width:55%}}.ap-components-showcase-demo-ui:before{border:3px solid;border-image-slice:1;border-image-source:linear-gradient(225deg,#00dcc0,#005af0 75%);content:"";height:100%;left:0;left:-3px;pointer-events:none;position:absolute;top:0;top:-3px;width:100%}.ap-components-showcase-demo-ui:after{background:linear-gradient(225deg,#00dcc0,#005af0 75%);bottom:calc(100% + 3px);color:#fff;content:attr(title);font-family:Fira Mono,monospace;font-size:12px;font-weight:700;left:-3px;line-height:1.42rem;padding:3px 6px;position:absolute}.ap-components-showcase-demo-ui:after svg{fill:currentColor}.ap-components-showcase-demo-ui.--carousel amp-carousel{height:100%}.ap-components-showcase-demo-ui.--carousel amp-carousel .amp-carousel-button{margin:0;position:absolute}.ap-components-showcase-demo-ui.--carousel amp-carousel amp-img img{object-fit:cover}.ap-components-showcase-demo-ui button{margin:50px 0 0}.ap-components-showcase-demo-ui.--animation{bottom:20px}@media(min-width:768px){.ap-components-showcase-demo-ui.--animation{bottom:0}}.ap-components-showcase-demo-ui.--animation #animatedImage{max-height:330px;z-index:2}.ap-components-showcase-demo-ui.--animation .anim-button{bottom:0;left:0;position:absolute;z-index:2}.ap-components-showcase-demo-ui.--accordion{height:auto;max-height:none}.ap-components-showcase-demo-ui.--accordion amp-accordion{background-color:#fafafc;height:100%;padding:20px}.ap-components-showcase-demo-ui.--accordion amp-accordion section{margin-bottom:20px;position:relative}.ap-components-showcase-demo-ui.--accordion amp-accordion section:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M1.927 12.41a1.087 1.087 0 0 1-1.579 0 1.277 1.277 0 0 1 0-1.752L7.211 3.59a1.086 1.086 0 0 1 1.578 0l6.863 7.068c.224.23.348.54.348.876 0 .335-.124.644-.348.876a1.087 1.087 0 0 1-1.579 0L8 6.155 1.927 12.41z' fill='%2348525C' fill-rule='evenodd'/%3E%3C/svg%3E");background-repeat:no-repeat;content:"";height:16px;pointer-events:none;position:absolute;right:8px;top:12px;width:16px}@media(min-width:768px){.ap-components-showcase-demo-ui.--accordion amp-accordion section:after{right:16px}}.ap-components-showcase-demo-ui.--accordion amp-accordion section[expanded]{box-shadow:0 15px 35px -5px rgba(0,0,0,.25)}.ap-components-showcase-demo-ui.--accordion amp-accordion section[expanded]:after{transform:rotate(180deg)}.ap-components-showcase-demo-ui.--accordion amp-accordion section>h2,.ap-components-showcase-demo-ui.--accordion amp-accordion section>p{background-color:#fff;padding:10px 20px}.ap-components-showcase-demo-ui.--accordion amp-accordion section>h2{font-size:1em}.ap-components-showcase-demo-ui.--accordion amp-accordion section[expanded]>h2{border:none}.ap-components-showcase-demo-ui.--autocomplete{bottom:35%;height:160px;padding:0 26px}@media(min-width:768px){.ap-components-showcase-demo-ui.--autocomplete{bottom:25%}}.ap-components-showcase-demo-ui.--autocomplete amp-autocomplete{width:100%}.ap-components-showcase-demo-ui.--autocomplete amp-autocomplete form{margin-top:5px}.ap-components-showcase-demo-ui.--autocomplete amp-autocomplete input{border:none;box-shadow:0 15px 35px -5px rgba(0,0,0,.25);width:100%}.ap-components-showcase-demo-ui.--autocomplete amp-autocomplete>div[role=listbox]{box-shadow:0 15px 35px -5px rgba(0,0,0,.25);right:0;width:100%}.ap-components-showcase-demo-ui.--autocomplete amp-autocomplete>div[role=listbox] div{padding:15px}.ap-code-snippet{background:#20202a;color:#fff;display:flex;font-size:.9em;line-height:1.3em;margin:1.1rem 0 0;overflow-x:auto;padding:0 1em}.ap-code-snippet:after{content:" ";-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ap-code-snippet::-webkit-scrollbar{height:6px;width:6px}.ap-code-snippet::-webkit-scrollbar-thumb{background-color:#91979d;border-radius:3px}.ap-code-snippet::-webkit-scrollbar-corner{background-color:transparent}.ap-code-snippet::-webkit-scrollbar-thumb{border-radius:0}@media(min-width:768px){.ap-code-snippet{margin-right:-30px;max-width:100%}}.ap-code-snippet pre{font-size:.9rem;white-space:pre}.ap-code-snippet .hll{background-color:#49483e}.ap-code-snippet .c{color:#75715e}.ap-code-snippet .k{color:#66d9ef}.ap-code-snippet .l{color:#ae81ff}.ap-code-snippet .n{color:#f8f8f2}.ap-code-snippet .o{color:#f15a5a}.ap-code-snippet .p{color:#f8f8f2}.ap-code-snippet .c1,.ap-code-snippet .ch,.ap-code-snippet .cm,.ap-code-snippet .cp,.ap-code-snippet .cpf,.ap-code-snippet .cs{color:#75715e}.ap-code-snippet .gd{color:#f15a5a}.ap-code-snippet .ge{font-style:italic}.ap-code-snippet .gi{color:#a6e22e}.ap-code-snippet .gs{font-weight:700}.ap-code-snippet .gu{color:#75715e}.ap-code-snippet .kc,.ap-code-snippet .kd{color:#66d9ef}.ap-code-snippet .kn{color:#f15a5a}.ap-code-snippet .kp,.ap-code-snippet .kr,.ap-code-snippet .kt{color:#66d9ef}.ap-code-snippet .ld{color:#e6db74}.ap-code-snippet .m{color:#ae81ff}.ap-code-snippet .s{color:#e6db74}.ap-code-snippet .na{color:#a6e22e}.ap-code-snippet .nb{color:#f8f8f2}.ap-code-snippet .nc{color:#a6e22e}.ap-code-snippet .no{color:#66d9ef}.ap-code-snippet .nd{color:#a6e22e}.ap-code-snippet .ni{color:#f8f8f2}.ap-code-snippet .ne,.ap-code-snippet .nf{color:#a6e22e}.ap-code-snippet .nl,.ap-code-snippet .nn{color:#f8f8f2}.ap-code-snippet .nx{color:#fff}.ap-code-snippet .py{color:#f8f8f2}.ap-code-snippet .nt{color:#f15a5a}.ap-code-snippet .nv{color:#f8f8f2}.ap-code-snippet .ow{color:#f15a5a}.ap-code-snippet .w{color:#f8f8f2}.ap-code-snippet .mb,.ap-code-snippet .mf,.ap-code-snippet .mh,.ap-code-snippet .mi,.ap-code-snippet .mo{color:#ae81ff}.ap-code-snippet .dl,.ap-code-snippet .s2,.ap-code-snippet .sa,.ap-code-snippet .sb,.ap-code-snippet .sc,.ap-code-snippet .sd{color:#e6db74}.ap-code-snippet .se{color:#ae81ff}.ap-code-snippet .s1,.ap-code-snippet .sh,.ap-code-snippet .si,.ap-code-snippet .sr,.ap-code-snippet .ss,.ap-code-snippet .sx{color:#e6db74}.ap-code-snippet .bp{color:#f8f8f2}.ap-code-snippet .fm{color:#a6e22e}.ap-code-snippet .vc,.ap-code-snippet .vg,.ap-code-snippet .vi,.ap-code-snippet .vm{color:#f8f8f2}.ap-code-snippet .il{color:#ae81ff}.ap-circular-icon{background:none;border-radius:50%;min-height:20px;min-width:20px;padding-bottom:100%;position:relative;width:100%}.ap-circular-icon svg{left:50%;max-height:50%;max-width:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.ap-circular-icon.--websites{background:linear-gradient(225deg,#00dcc0,#005af0 75%);color:#fff}.ap-circular-icon.--websites svg{fill:currentColor}.ap-circular-icon.--stories{background:linear-gradient(225deg,#ec6600,#ffdc00 75%);color:#20202a}.ap-circular-icon.--stories svg{fill:currentColor}.ap-circular-icon.--email{background:linear-gradient(225deg,#09a600,#e1eb64 75%);color:#20202a}.ap-circular-icon.--email svg{fill:currentColor}.ap-circular-icon.--ads{background:linear-gradient(225deg,#eb49e1,#5500d7 75%);color:#fff}.ap-circular-icon.--ads svg{fill:currentColor}.ap-logo-stage{--spacing:50px;--gap:20px;grid-gap:15px;color:#20202a;display:grid;grid-column:2/24;grid-template-columns:repeat(24,1fr);padding:var(--spacing) 0;position:relative}@media(min-width:768px){.ap-logo-stage{--spacing:100px;grid-column:1/-1}}.ap-logo-stage-content{display:flex;flex-direction:column;gap:var(--gap);grid-column:1/-1}@media(min-width:768px){.ap-logo-stage-content{--gap:30px;flex-direction:row;grid-column:3/23}}@media(min-width:1680px){.ap-logo-stage-content{grid-column:2/24}}.ap-logo-stage-logo{flex:1 0 25%;max-width:168px}@media(min-width:768px){.ap-logo-stage-logo{max-width:180px}}.ap-logo-stage-headline{text-align:left}.ap-text-aside{grid-row-gap:20px;color:#20202a;display:grid;grid-column:2/-1;grid-template-columns:40px 1fr 30px;position:relative}@media(min-width:1024px){.ap-text-aside{grid-column-gap:60px;grid-column:3/-1;grid-template-columns:repeat(2,1fr)}}@media(min-width:1680px){.ap-text-aside{grid-column:2/24}}.ap-text-aside:before{background:linear-gradient(225deg,#00dcc0,#005af0 75%);color:#fff;content:"";grid-column:1;grid-row:2/span 2;width:2px}.ap-text-aside:before svg{fill:currentColor}@media(min-width:1024px){.ap-text-aside:before{margin-left:28px}}.ap-text-aside-item{position:relative}.ap-text-aside-item.--start{grid-column:1/span 2;grid-row:1}@media(min-width:1024px){.ap-text-aside-item.--start{grid-column:1;grid-row:1}}.ap-text-aside-item.--right{background-color:#e2e5e6;grid-column:2/-1;grid-row:2/span 2;margin:40px 0 80px;max-width:630px;padding:40px 30px 0}@media(min-width:1024px){.ap-text-aside-item.--right{grid-column:2;grid-row:1/span 2;margin:0 0 110px;padding:40px 60px 0}}.ap-text-aside-item.--end{grid-column:1/span 2;grid-row:4}@media(min-width:1024px){.ap-text-aside-item.--end{grid-column:1}}.ap-link{align-items:center;display:flex;line-height:1.3;margin:0;padding:0 0 1.5em}.ap-link-text,.ap-link:before{transition:transform .3s ease}.ap-link:hover .ap-link-text,.ap-link:hover:before{transform:translateX(10px)}.ap-link.--external:before,.ap-link.--internal:before{background-color:currentColor;background-position:50%;background-repeat:no-repeat;content:"";height:1em;margin-bottom:auto;margin-right:.625em;mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;padding:.438em 0;width:1em}.ap-link.--internal:before{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M43.16 10.18c-.881-.881-2.322-.881-3.203 0s-.881 2.322 0 3.203l16.335 16.335H2.241A2.238 2.238 0 0 0-.001 31.96c0 1.281.961 2.322 2.242 2.322h54.051L39.877 50.617c-.881.881-.881 2.322 0 3.203s2.322.881 3.203 0l20.259-20.259a2.271 2.271 0 0 0 0-3.203L43.16 10.179z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M43.16 10.18c-.881-.881-2.322-.881-3.203 0s-.881 2.322 0 3.203l16.335 16.335H2.241A2.238 2.238 0 0 0-.001 31.96c0 1.281.961 2.322 2.242 2.322h54.051L39.877 50.617c-.881.881-.881 2.322 0 3.203s2.322.881 3.203 0l20.259-20.259a2.271 2.271 0 0 0 0-3.203L43.16 10.179z'/%3E%3C/svg%3E")}.ap-link.--external:before{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M28.879 11.24a2.156 2.156 0 0 0-3.048 3.048l15.543 15.543H2.133A2.127 2.127 0 0 0 0 31.964c0 1.219.914 2.207 2.133 2.207h39.241L25.758 49.714a2.156 2.156 0 0 0 3.048 3.048l19.273-19.279a2.156 2.156 0 0 0 0-3.048l-19.2-19.194zm30.55 16.152c2.511 0 4.571 2.06 4.571 4.571s-2.06 4.571-4.571 4.571-4.571-2.06-4.571-4.571 2.06-4.571 4.571-4.571z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M28.879 11.24a2.156 2.156 0 0 0-3.048 3.048l15.543 15.543H2.133A2.127 2.127 0 0 0 0 31.964c0 1.219.914 2.207 2.133 2.207h39.241L25.758 49.714a2.156 2.156 0 0 0 3.048 3.048l19.273-19.279a2.156 2.156 0 0 0 0-3.048l-19.2-19.194zm30.55 16.152c2.511 0 4.571 2.06 4.571 4.571s-2.06 4.571-4.571 4.571-4.571-2.06-4.571-4.571 2.06-4.571 4.571-4.571z'/%3E%3C/svg%3E")}.ap-link.--square{border-bottom:1px solid #ebebf0;color:#20202a;font-family:Poppins,system}.ap-link.--square:before{background-color:#005af0;background-size:1.375em;box-shadow:0 15px 25px 0 rgba(0,0,0,.15);height:1.375em;margin-right:.9375em;mask-image:unset;-webkit-mask-image:unset;overflow:hidden;padding:.563em;width:1.375em}.ap-link.--square.--internal:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23fff'%3E%3Cpath d='M43.16 10.18c-.881-.881-2.322-.881-3.203 0s-.881 2.322 0 3.203l16.335 16.335H2.241A2.238 2.238 0 0 0-.001 31.96c0 1.281.961 2.322 2.242 2.322h54.051L39.877 50.617c-.881.881-.881 2.322 0 3.203s2.322.881 3.203 0l20.259-20.259a2.271 2.271 0 0 0 0-3.203L43.16 10.179z'/%3E%3C/svg%3E")}.ap-link.--square.--external:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23fff'%3E%3Cpath d='M28.879 11.24a2.156 2.156 0 0 0-3.048 3.048l15.543 15.543H2.133A2.127 2.127 0 0 0 0 31.964c0 1.219.914 2.207 2.133 2.207h39.241L25.758 49.714a2.156 2.156 0 0 0 3.048 3.048l19.273-19.279a2.156 2.156 0 0 0 0-3.048l-19.2-19.194zm30.55 16.152c2.511 0 4.571 2.06 4.571 4.571s-2.06 4.571-4.571 4.571-4.571-2.06-4.571-4.571 2.06-4.571 4.571-4.571z'/%3E%3C/svg%3E")}.ap-link.--square:hover:before{animation:duepduep2021 .3s ease}@keyframes duepduep2021{0%{background-position-x:center}49%{background-position-x:40px}50%{background-position-x:-40px}to{background-position-x:center}}.ap-newsletter{display:flex}.amp-geo-group-doubleOptIn .ap-newsletter,.amp-geo-pending .ap-newsletter,.ap-newsletter-double{display:none}.amp-geo-group-doubleOptIn .ap-newsletter-double,.amp-geo-pending .ap-newsletter-double{display:flex}body,html{color:#20202a}main{grid-gap:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:grid;grid-template-columns:repeat(24,1fr);margin:0 auto;padding:0;width:100%}@media(min-width:1280px){main{grid-gap:30px;max-width:1920px}}.ap-container{display:flex;grid-column:2/24;position:relative}@media(min-width:1680px){.ap-container{grid-column:4/22}}h1,h2,h3,h4,h5,h6{color:inherit;margin-bottom:.3em;margin-top:0}@media(min-width:768px){.ap-h1,h1{font-size:52px}}.ap-h2,h2{font-size:2.4em}.ap-h3,h3{font-size:20px}.ap-h4,h4{font-size:18px;line-height:24px}.ap-h5,h5{font-size:16px}.ap-h5,.ap-h6,h5,h6{letter-spacing:.5px;line-height:22px}.ap-h6,h6{font-size:14px}.ap-p,a,p{font-size:16px}.ap-p,p{color:inherit;line-height:1.625;margin-bottom:0;margin-top:1.1em;max-width:920px}.ap-p-large{font-size:18px;line-height:1.78}button{-webkit-appearance:none;background:transparent;border:none;box-shadow:none;cursor:pointer;padding:0}code,p code{color:#000;display:inline;font-family:Fira Mono,monospace;font-size:.9em;font-weight:500;padding:2px 4px;word-break:normal}code{max-width:100%;overflow:hidden;word-break:break-word}ul{list-style:none}li,ul{padding:0}li{line-height:1.63}select{-webkit-appearance:none;background:transparent;border:none}figure{margin:0}svg{max-height:100%;max-width:100%}hr{background:#ebebf0;border:none;height:1px;margin:12px 0}</style><title>AMP - a web component framework to easily create user-first web experiences - amp.dev</title><script type="application/ld+json">{"@context":"https://web.archive.org/web/20211117033346/http://schema.org","@type":"Webpage","url":"https://web.archive.org/web/20211117033346/https://amp.dev/index-2021/ ","name":"amp.dev","headline":"AMP - a web component framework to easily create user-first web experiences","description":"Whether you are a publisher, e-commerce company, storyteller, advertiser or email sender, AMP makes it easy to create great experiences on the web. Use AMP to build websites, stories, ads and emails.","mainEntityOfPage":{"@type":"WebPage","@id":"https://web.archive.org/web/20211117033346/https://amp.dev"},"publisher":{"@type":"Organization","name":"AMP Project","logo":{"url":"https://web.archive.org/web/20211117033346/https://amp.dev/static/img/icons/icon-512x512.png","width":512,"height":512,"@type":"ImageObject"}},"image":{"@type":"ImageObject","url":"https://web.archive.org/web/20211117033346/https://amp.dev/static/img/sharing/default-600x314.png","width":600,"height":314}}</script><link rel="manifest" href="/web/20211117033346/https://amp.dev/manifest.json"></head><body class="ap--websites"> <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><symbol id="stackoverflow" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 19 25"><path d="M14.2 14.7h1.6V25H0V14.7h1.6v8.6h12.5c.1-2.8.1-5.7.1-8.6zM9.5 3.2c1.8 2.7 3.6 5.4 5.4 8.2.6-.4 1.1-.8 1.7-1.2C14.8 7.5 13 4.8 11.2 2c-.5.5-1.1.8-1.7 1.2zm5.1 8.5c-2.8-1.7-5.5-3.3-8.2-5-.4.6-.7 1.2-1.1 1.8 2.7 1.7 5.5 3.3 8.2 5 .4-.6.8-1.2 1.1-1.8zM17.4 0c-.7.1-1.3.2-2 .4.5 3.2 1.1 6.5 1.6 9.7.7-.1 1.3-.2 2-.4-.5-3.2-1.1-6.5-1.6-9.7zm-4 14.1c-3.1-.9-6.2-1.7-9.2-2.6-.2.7-.4 1.4-.5 2 3.1.9 6.2 1.7 9.2 2.6.1-.6.3-1.3.5-2zm-.9 5.5H3v2.1h9.5v-2.1zm.3-2.7c-3.2-.3-6.3-.6-9.5-.9-.1.7-.1 1.4-.2 2.1 3.2.3 6.3.6 9.5.9 0-.8.1-1.4.2-2.1z"/></symbol><symbol id="github" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 64 64"> <path d="M32 0.792c-17.68 0-32 14.328-32 32 0 14.141 9.168 26.133 21.88 30.36 1.6 0.301 2.187-0.688 2.187-1.539 0-0.76-0.027-2.773-0.040-5.44-8.901 1.931-10.779-4.293-10.779-4.293-1.456-3.693-3.56-4.68-3.56-4.68-2.899-1.984 0.224-1.944 0.224-1.944 3.213 0.224 4.901 3.296 4.901 3.296 2.853 4.893 7.491 3.48 9.32 2.661 0.288-2.069 1.112-3.48 2.027-4.28-7.107-0.8-14.576-3.552-14.576-15.813 0-3.493 1.24-6.347 3.293-8.587-0.36-0.808-1.44-4.061 0.28-8.469 0 0 2.68-0.859 8.8 3.28 2.56-0.712 5.28-1.064 8-1.080 2.72 0.016 5.44 0.368 8 1.080 6.080-4.139 8.76-3.28 8.76-3.28 1.72 4.408 0.64 7.661 0.32 8.469 2.040 2.24 3.28 5.093 3.28 8.587 0 12.293-7.48 15-14.6 15.787 1.12 0.96 2.16 2.923 2.16 5.92 0 4.283-0.040 7.723-0.040 8.763 0 0.84 0.56 1.84 2.2 1.52 12.803-4.197 21.963-16.197 21.963-30.317 0-17.672-14.328-32-32-32z"/> </symbol><symbol id="wordpress" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 64 64"><path d="M57.251 18.2A28.688 28.688 0 0 1 60.766 32c0 10.611-5.749 19.883-14.301 24.867l8.787-25.405c1.64-4.107 2.187-7.389 2.187-10.304 0-1.08-.069-2.08-.187-2.96zm-21.283.277c1.725-.08 3.285-.28 3.285-.28 1.552-.2 1.371-2.48-.179-2.397 0 0-4.68.36-7.68.36-2.837 0-7.6-.4-7.6-.4-1.56-.08-1.763 2.28-.2 2.36 0 0 1.44.163 3 .24l4.48 12.28-6.32 18.88L14.277 18.4c1.731-.08 3.291-.267 3.291-.267 1.56-.2 1.376-2.48-.173-2.389 0 0-4.656.368-7.664.368-.533 0-1.168-.021-1.84-.04C13.096 8.4 21.96 3.24 32 3.24a28.642 28.642 0 0 1 19.429 7.555c-.123-.008-.243-.024-.376-.024-2.827 0-4.832 2.461-4.832 5.104 0 2.373 1.368 4.381 2.827 6.749 1.096 1.92 2.373 4.381 2.373 7.939 0 2.44-.944 5.317-2.189 9.277l-2.867 9.56-10.4-30.96.003.037zM32 60.757c-2.824 0-5.549-.408-8.128-1.165l8.632-25.083 8.84 24.232c.064.141.133.269.208.397A28.794 28.794 0 0 1 32 60.762zM3.229 32c0-4.171.896-8.133 2.493-11.707L19.439 57.89C9.85 53.226 3.231 43.389 3.228 31.999zM32 0C14.36 0 0 14.36 0 32s14.36 32 32 32 32-14.36 32-32S49.64 0 32 0z"/></symbol><symbol id="youtube" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 64 64"><path d="M62.664 16.542c-.773-2.708-2.862-4.797-5.514-5.556l-.057-.014c-4.989-1.336-25.065-1.336-25.065-1.336s-20.026-.027-25.065 1.337c-2.708.773-4.797 2.862-5.556 5.514l-.014.057C.507 21.107 0 26.354 0 31.72l.001.327v-.017.252a83.84 83.84 0 0 0 1.475 15.695l-.083-.521c.773 2.708 2.862 4.797 5.513 5.556l.057.014c4.983 1.339 25.065 1.339 25.065 1.339s20.023 0 25.065-1.339c2.708-.773 4.797-2.862 5.556-5.514l.014-.057c.85-4.469 1.336-9.609 1.336-14.863l-.002-.595v.03c.002-.184.002-.403.002-.621 0-5.255-.486-10.396-1.416-15.38l.08.515zM25.621 41.608V22.42l16.71 9.609z"/></symbol><symbol id="twitter" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 64 64"> <path d="M63.875 12.186c-2.36 1.037-4.88 1.744-7.533 2.067 2.704-1.629 4.784-4.197 5.768-7.261-2.536 1.48-5.346 2.557-8.338 3.157-2.389-2.557-5.794-4.157-9.576-4.157-7.245 0-13.119 5.874-13.119 13.111 0 1.040 0.12 2.040 0.339 2.997-10.906-0.515-20.572-5.752-27.042-13.669-1.139 1.925-1.776 4.162-1.776 6.6 0 4.56 2.32 8.568 5.834 10.922-2.152-0.069-4.176-0.661-5.941-1.643v0.163c0 6.36 4.514 11.663 10.522 12.871-1.101 0.296-2.264 0.456-3.456 0.456-0.837 0-1.64-0.080-2.443-0.229 1.683 5.208 6.52 9.005 12.277 9.112-4.48 3.517-10.157 5.613-16.271 5.613-1.040 0-2.077-0.061-3.12-0.179 5.837 3.717 12.714 5.89 20.151 5.89 24.143 0 37.329-19.989 37.329-37.294 0-0.557 0-1.12-0.040-1.68 2.563-1.837 4.8-4.16 6.56-6.794l-0.125-0.053z"/> </symbol><symbol id="download" viewbox="0 0 64 64"> <path d="M8.8 62.32c0-0.88 0.72-1.68 1.68-1.68 10.8 0 32.32 0 43.040 0 0.88 0 1.68 0.72 1.68 1.68 0 0.88-0.72 1.68-1.68 1.68-10.8 0-32.32 0-43.040 0-0.96 0-1.68-0.72-1.68-1.68z"/> <path d="M49.44 34.56c0.72-0.72 0.72-1.84 0-2.56s-1.84-0.72-2.56 0l-13.040 13.040v-43.28c0-0.96-0.88-1.76-1.84-1.76-1.040 0-1.84 0.8-1.84 1.76v43.28l-13.040-13.12c-0.72-0.72-1.84-0.72-2.56 0s-0.72 1.84 0 2.56l16.24 16.24c0.72 0.72 1.84 0.72 2.56 0l16.080-16.16z"/> </symbol><symbol id="news" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 93 72"><path d="M17.9 38.9h-1.6l1.6-10h-5.1c-.5 0-.8-.4-.8-.9l.2-.6 9-15.4h1.7l-1.7 10H26.4c.5 0 .8.4.8.9l-.2.5-9.1 15.5z"/><path d="M61 15H34c-.6 0-1-.4-1-1s.4-1 1-1h27c.6 0 1 .4 1 1s-.4 1-1 1zm-27-1.5v.5-.5zM61 26H34c-.6 0-1-.4-1-1s.4-1 1-1h27c.6 0 1 .4 1 1s-.4 1-1 1zm-27-1.5v.5-.5zM61 37H34c-.6 0-1-.4-1-1s.4-1 1-1h27c.6 0 1 .4 1 1s-.4 1-1 1zm-27-1.5v.5-.5zM61 48H13c-.6 0-1-.4-1-1s.4-1 1-1h48c.6 0 1 .4 1 1s-.4 1-1 1zm-48-1.5v.5-.5zM61 59H13c-.6 0-1-.4-1-1s.4-1 1-1h48c.6 0 1 .4 1 1s-.4 1-1 1zm-48-1.5v.5-.5zM82 20c.6 0 1 .4 1 1v37c0 .6-.4 1-1 1s-1-.4-1-1V21c0-.6.4-1 1-1z"/><path d="M93 21c0-.6-.4-1-1-1s-1 .4-1 1v40c0 5-4 9-9 9s-9-4-9-9V2.6c0-.7 0-1.1-.3-1.5-.2-.3-.4-.6-.8-.8-.4-.3-.7-.3-1.5-.3H2.6C1.8 0 1.5 0 1 .3.7.4.4.7.3 1c-.3.5-.3.8-.3 1.6v59.2c0 3.2.2 4.6 1.1 6.2a7.2 7.2 0 0 0 3 3c1.5.8 3 1.1 6.2 1.1h71.8c6 0 10.9-5 10.9-11V21zM10.3 70c-3.1 0-4.2-.3-5.2-.8S3.4 67.9 2.9 67c-.6-1.1-.9-2.1-.9-5.3V2.6 2h69v59c0 3.7 1.9 7 4.7 9H10.3z" class="st1"/></symbol><symbol id="close" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 64 64"> <path d="M39.503 32l22.963-22.963c2.046-2.046 2.046-5.457 0-7.503s-5.456-2.046-7.503 0l-22.963 22.963-22.963-22.963c-2.046-2.046-5.457-2.046-7.503 0s-2.046 5.457 0 7.503l22.963 22.963-22.963 22.963c-2.046 2.046-2.046 5.456 0 7.503s5.457 2.046 7.503 0l22.963-22.963 22.963 22.963c2.046 2.046 5.456 2.046 7.503 0s2.046-5.456 0-7.503l-22.963-22.963z"/> </symbol><symbol id="internal" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 64 64"><path d="M43.16 10.18c-0.881-0.881-2.322-0.881-3.203 0s-0.881 2.322 0 3.203l16.335 16.335h-54.051c-1.281 0-2.242 1.041-2.242 2.242 0 1.281 0.961 2.322 2.242 2.322h54.051l-16.415 16.335c-0.881 0.881-0.881 2.322 0 3.203s2.322 0.881 3.203 0l20.259-20.259c0.881-0.881 0.881-2.322 0-3.203l-20.179-20.179z"/></symbol><symbol id="menu" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 64 64"> <path d="M2.133 13.867h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> <path d="M2.133 28.8h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> <path d="M2.133 43.733h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> </symbol><symbol id="magnifier" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 64 64"><path d="M61.925 58.24l-15.2-15.84c3.92-4.64 6.080-10.48 6.080-16.64-0.080-14.16-11.6-25.76-25.84-25.76s-25.84 11.6-25.84 25.84 11.6 25.84 25.84 25.84c5.36 0 10.4-1.6 14.8-4.64l15.36 15.92c0.64 0.64 1.52 1.040 2.4 1.040s1.68-0.32 2.32-0.96c1.36-1.28 1.36-3.44 0.080-4.8zM26.965 6.72c10.56 0 19.12 8.56 19.12 19.12s-8.64 19.040-19.12 19.040-19.12-8.56-19.12-19.040 8.56-19.12 19.12-19.12z"/></symbol><symbol id="wrench" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 64 64"> <path d="M64 18.267c0 1.608-0.214 3.21-0.636 4.767l0.008 0.169c0.028 0.598-0.186 1.18-0.592 1.619-2.713 7.035-9.527 11.712-17.107 11.712-1.852 0-3.671-0.275-5.427-0.819l-25.943 25.854c-1.573 1.567-3.667 2.431-5.889 2.431s-4.318-0.864-5.89-2.431l-0.087-0.087c-3.25-3.238-3.25-8.508 0-11.747l23.75-23.669c0.66-0.657 1.046-1.529 1.090-2.456l0.173-3.404c-0.070-0.657-0.105-1.308-0.105-1.939 0-10.074 8.221-18.267 18.327-18.267 3.298 0 6.532 0.883 9.353 2.555 0.602 0.357 1.005 0.979 1.083 1.675 0.011 0.098 0.017 0.161 0.020 0.237 0.044 1.158-0.297 1.536-9.858 10.586l3.847 3.921c1.149-1.058 3.185-2.929 8.997-8.27 0.542-0.497 1.293-0.697 2.010-0.534 0.719 0.163 1.311 0.668 1.583 1.351 0.856 2.147 1.291 4.418 1.292 6.745zM59.819 22.4c0.395-1.346 0.595-2.737 0.594-4.132 0-1.194-0.141-2.367-0.422-3.507-2.922 2.685-8.959 8.231-9.040 8.307-0.536 0.494-1.37 0.474-1.88-0.046l-6.953-7.087c-0.252-0.258-0.39-0.605-0.384-0.965s0.158-0.702 0.42-0.95c2.985-2.825 7.47-7.107 9.54-9.166-1.884-0.84-3.936-1.278-6.022-1.278-8.129 0-14.742 6.59-14.742 14.691 0 0.533 0.032 1.090 0.096 1.654 0.007 0.071 0.010 0.142 0.007 0.214l-0.174 3.646c-0.087 1.818-0.847 3.528-2.138 4.816l-23.75 23.668c-1.85 1.844-1.85 4.844 0 6.688l0.087 0.087c0.897 0.893 2.088 1.385 3.356 1.385s2.46-0.492 3.355-1.385l26.429-26.338c0.2-0.199 0.419-0.39 0.693-0.601 0.377-0.292 0.882-0.363 1.326-0.187 1.743 0.692 3.578 1.044 5.456 1.044 6.243 0 11.831-3.943 13.905-9.811 0.044-0.126 0.107-0.244 0.187-0.351-0.002-0.134 0.016-0.268 0.054-0.396z"/> </symbol><symbol id="template" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 64 64"><path d="M1.44 0h62.56v64h-64v-64h1.44zM20.64 60.88v-39.52h-17.76v39.6h17.76zM23.44 21.36v39.6h37.44v-39.6h-37.44zM2.88 18.24h58.080v-15.36h-58.080v15.36z"/></symbol><symbol id="learn" viewbox="0 0 64 64"> <path d="M57.674 35.257c0 1.779 1.416 3.221 3.163 3.221s3.163-1.442 3.163-3.221c0-1.155-0.602-2.16-1.498-2.728v-8.973c0-0.682-0.401-1.297-1.018-1.563l-29.585-12.716c-0.413-0.178-0.881-0.178-1.295 0l-29.586 12.716c-0.617 0.265-1.018 0.881-1.018 1.563s0.401 1.297 1.018 1.562l6.662 2.863v17.587c0 4.624 7.288 9.29 23.571 9.29s23.571-4.666 23.571-9.29v-17.587l4.349-1.869v6.417c-0.896 0.569-1.497 1.573-1.497 2.728zM51.491 45.567c0 1.575-4.797 5.898-20.24 5.898s-20.24-4.323-20.24-5.898v-16.155l19.593 8.421c0.207 0.089 0.427 0.134 0.647 0.134s0.441-0.045 0.647-0.134l19.593-8.421v16.155zM31.251 34.43l-25.303-10.875 25.303-10.875 25.302 10.875-25.302 10.875z"/> </symbol><symbol id="examples-flyout" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 26 20"><g><path d="M20 19.3a.9.9 0 1 1 0-1.7 1.9 1.9 0 0 0 1.9-1.9v-3a3.6 3.6 0 0 1 1.3-2.7 3.6 3.6 0 0 1-1.3-2.8v-3A1.9 1.9 0 0 0 20 2.3a.9.9 0 1 1 0-1.7 3.6 3.6 0 0 1 3.6 3.6v3a1.9 1.9 0 0 0 2 2v1.6a1.9 1.9 0 0 0-2 2v3a3.6 3.6 0 0 1-3.6 3.5zm-14 0a3.6 3.6 0 0 1-3.6-3.6v-3a1.9 1.9 0 0 0-2-1.9V9.1a1.9 1.9 0 0 0 2-1.9v-3A3.6 3.6 0 0 1 6 .6a.9.9 0 1 1 0 1.8A1.9 1.9 0 0 0 4 4.2v3A3.6 3.6 0 0 1 2.8 10a3.6 3.6 0 0 1 1.3 2.7v3A1.9 1.9 0 0 0 6 17.6a.9.9 0 1 1 0 1.7z"/><g transform="translate(5.8 8.5)"><circle cx="12.3" cy="1.4" r="1.4"/><circle cx="7.3" cy="1.4" r="1.4"/><circle cx="2.2" cy="1.4" r="1.4"/></g></g></symbol><symbol id="components-flyout" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 28 22"><path d="M8.7 17l-2.5-2.2-4-3.5-.9-.8v1l2.5-2.2 4-3.5 1-.8c.2-.3.2-.8 0-1a.8.8 0 0 0-1.2 0L5.1 6l-4 3.6-.8.8c-.3.2-.3.8 0 1l2.5 2.2 4 3.6.8.8c.3.2.8.3 1.1 0 .3-.3.3-.8 0-1.1zM19.3 5l2.5 2.2 4 3.5.9.8v-1l-2.5 2.2-4 3.5-.9.8c-.3.3-.3.8 0 1 .3.4.8.3 1 0L23 16l4-3.6.9-.8c.3-.2.3-.8 0-1l-2.5-2.3-4-3.5-1-.8c-.2-.3-.7-.3-1 0-.3.3-.3.8 0 1zm-8 16.4l.7-2 1.6-5a3563.7 3563.7 0 0 1 2-5.8l1.7-5.1.8-2.5c.2-.4-.1-.9-.5-1a.8.8 0 0 0-1 .6c-.1.7-.4 1.3-.6 2l-1.6 4.9-2 5.9-1.7 5-.8 2.6c-.2.4.1.8.5 1a.8.8 0 0 0 1-.6z"/></symbol><symbol id="guides-documents" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 31 32"><path d="M6.7 28H1.2c-.4 0-.6-.4-.6-.8L.5.7c0-.4.3-.7.7-.7h21.1c.5 0 .7.3.7.7V2c0 .5-.2.7-.7.7-.4 0-.6-.2-.6-.7v-.6H1.8L2 26.6h4.8c.4 0 .7.2.7.6 0 .4-.3.7-.7.7z"/><path d="M8 6.8H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 10.9H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 15H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 19H6c-.4 0-.7-.2-.7-.6 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7z"/><path d="M29.8 4H8.7c-.5 0-.7.4-.7.8v26.5c0 .4.3.7.7.7h21.1c.4 0 .7-.3.7-.7V4.8c0-.4-.3-.7-.7-.7zm-.6 26.6H9.4V5.4h19.8v25.2z"/><path d="M18.1 22.8h-.6l.6-3.8h-1.9c-.2 0-.3-.1-.3-.3v-.2l3.4-5.8h.7l-.7 3.8h2c.2 0 .3.1.3.3v.2L18 22.8z"/></symbol><symbol id="start" viewbox="0 0 64 64"> <path d="M63.195 1.874c-0.143-0.52-0.549-0.926-1.069-1.069-10.765-2.978-20.385 2.978-24.355 6.948l-11.452 11.452-5.421-1.756c-3.551-1.163-7.454-0.217-10.078 2.443l-3.359 3.359c-0.582 0.594-0.582 1.544 0 2.138l7.329 7.329-4.199 6.948c-0.343 0.593-0.25 1.342 0.229 1.832l11.681 11.605c0.471 0.504 1.223 0.63 1.832 0.305l6.948-4.123h0.076l7.329 7.329c0.594 0.582 1.544 0.582 2.138 0l3.359-3.359c2.66-2.624 3.606-6.527 2.443-10.078l-1.756-5.421 11.452-11.452c3.894-4.047 9.849-13.666 6.871-24.431zM23.799 50.126l-9.925-9.925 3.13-5.268 12.063 12.063-5.268 3.13zM54.109 24.015l-12.139 12.139c-0.4 0.399-0.547 0.987-0.382 1.527l2.061 6.337c0.783 2.448 0.136 5.128-1.68 6.948l-2.29 2.29-29.012-29.012 2.29-2.29c1.819-1.815 4.5-2.463 6.948-1.68l6.337 2.061c0.54 0.165 1.128 0.018 1.527-0.382l12.216-12.063c3.436-3.359 11.452-8.398 20.461-6.337 2.061 9.085-2.978 17.102-6.337 20.461z"/> <path d="M10.667 51.195l-9.009 9.009c-0.478 0.358-0.703 0.963-0.576 1.547s0.583 1.040 1.167 1.167c0.584 0.127 1.188-0.098 1.547-0.576l9.009-9.009c0.456-0.608 0.396-1.459-0.142-1.996s-1.388-0.598-1.996-0.142z"/> <path d="M11.66 63.563c0.594 0.582 1.544 0.582 2.138 0l4.581-4.581c0.456-0.608 0.395-1.459-0.142-1.996s-1.388-0.598-1.996-0.142l-4.581 4.581c-0.582 0.594-0.582 1.544 0 2.138z"/> <path d="M1.505 52.798c0.403-0.006 0.787-0.17 1.069-0.458l4.581-4.581c0.478-0.358 0.703-0.963 0.576-1.547s-0.583-1.040-1.167-1.167c-0.584-0.127-1.188 0.098-1.547 0.576l-4.581 4.581c-0.428 0.436-0.554 1.086-0.322 1.65s0.78 0.937 1.391 0.945z"/> <path d="M43.726 13.021c-2.003 2.003-2.003 5.25 0 7.253s5.25 2.003 7.253 0c2.003-2.003 2.003-5.25 0-7.253s-5.25-2.003-7.253 0zM48.841 18.136c-0.699 0.692-1.79 0.794-2.605 0.243s-1.127-1.601-0.745-2.508c0.382-0.907 1.351-1.417 2.315-1.219s1.653 1.050 1.646 2.033c-0.004 0.545-0.223 1.067-0.611 1.451z"/> </symbol><symbol id="amp-email" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 64 64"> <defs> <lineargradient id="gradient-email" x1="76.2776137%" x2="20.8316146%" y1="-25.8400575%" y2="121.578822%"> <stop offset="0%" stop-color="#F1F068"/> <stop offset="46.2139774%" stop-color="#96D64F"/> <stop offset="100%" stop-color="#2DB932"/> </lineargradient> </defs> <path d="M64 14.080c0-3.291-2.56-5.851-5.851-5.851h-52.297c-3.291 0-5.851 2.56-5.851 5.851v35.84c0 3.291 2.56 5.851 5.851 5.851h52.297c3.291 0 5.851-2.56 5.851-5.851v-35.84zM5.851 11.154h52.297c0.183 0 0.366 0 0.549 0l-24.503 25.417c-0.549 0.549-1.28 0.914-2.194 0.914-0.731 0-1.646-0.366-2.194-0.914l-24.32-25.417c0 0 0.183 0 0.366 0zM2.926 14.080c0-0.366 0-0.731 0.183-1.097l15.36 16.091-15.543 19.2v-34.194zM58.149 52.846h-52.297c-0.731 0-1.646-0.366-2.194-0.914l16.823-20.663 7.131 7.497c1.097 1.097 2.56 1.829 4.206 1.829s3.109-0.731 4.206-1.829l6.583-6.949 17.371 20.114c-0.366 0.549-1.097 0.914-1.829 0.914v0zM61.074 48.274l-16.091-18.834 15.909-16.64c0.183 0.366 0.183 0.731 0.183 1.097v34.377z"/> </symbol><symbol id="amp-ads" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 64 64"> <defs> <lineargradient id="gradient-ads" x1="100%" x2="14.5415777%" y1="0%" y2="123.368881%"> <stop offset="0%" stop-color="#FF52E1"/> <stop offset="100%" stop-color="#5500D7"/> </lineargradient> </defs> <path d="M56.399 14.68c3.654-3.846 9.616-10.963 6.924-13.847-2.885-2.885-10.001 3.269-13.847 6.731l-0.577-0.577c-0.385-0.385-0.962-0.577-1.539-0.385l-15.963 3.077c-0.385 0-0.577 0.192-0.769 0.385l-30.195 30.195c-0.577 0.577-0.577 1.731 0 2.308l20.963 20.963c0.385 0.385 0.769 0.385 1.154 0.385s0.769-0.192 1.154-0.385l30.003-30.003c0.192-0.192 0.385-0.577 0.385-0.769v0l3.077-15.963c0.192-0.577 0-1.154-0.385-1.539l-0.385-0.577zM53.899 16.988l-2.885 14.424-28.464 28.656-18.655-18.655 28.656-28.656 14.424-2.885c-1.539 1.731-4.039 4.423-5.962 7.116-1.923-0.192-3.654 0.385-5.193 1.923-2.5 2.5-2.5 6.731 0 9.232s6.731 2.5 9.232 0c1.346-1.346 2.116-3.27 1.923-5.193-0.192-1.154-0.577-2.308-1.154-3.077-0.192-0.385-0.385-0.577-0.769-0.769-0.192-0.192-0.577-0.577-0.769-0.769 1.154-1.731 2.885-3.654 5.193-5.962l2.5 2.5 1.923 2.116zM43.321 24.873c-0.192 0.385-0.385 0.577-0.577 0.962-1.346 1.346-3.27 1.346-4.616 0s-1.346-3.27 0-4.616c0.192-0.192 0.577-0.385 0.962-0.577 1.154-0.577 2.308-0.385 3.462 0.385 0.192 0 0.192 0.192 0.385 0.192 0 0 0.192 0.192 0.192 0.385 0.577 0.962 0.769 2.116 0.192 3.27zM54.091 12.372l-2.5-2.5c4.039-3.846 7.308-5.77 8.847-6.347-0.577 1.539-2.5 4.616-6.347 8.847z"/> </symbol><symbol id="amp-stories" viewbox="0 0 36 32"> <defs> <lineargradient id="gradient-stories" x1="81.726943%" x2="23.7165981%" y1="-28.3832685%" y2="119.978062%"> <stop offset="0%" stop-color="#FFF300"/> <stop offset="100%" stop-color="#FF8F00"/> </lineargradient> </defs> <path d="M7.111 0h21.333v32h-21.333v-32zM9.481 2.37v27.259h16.593v-27.259h-16.593zM0 4.741h2.37v22.519h-2.37v-22.519zM33.185 4.741h2.37v22.519h-2.37v-22.519z"/> </symbol><symbol id="amp-websites" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 64 64"> <defs> <lineargradient id="gradient-websites" x1="81.8129399%" x2="33.8766928%" y1="0%" y2="94.4849088%"> <stop offset="0%" stop-color="#00DCC0"/> <stop offset="100%" stop-color="#005AF0"/> </lineargradient> </defs> <path d="M63.196 4.646h-62.253c-0.566 0-0.943 0.377-0.943 0.755v53.010c0 0.566 0.377 0.943 0.943 0.943h62.253c0.566 0 0.755-0.377 0.755-0.755v-53.198c0.189-0.377-0.189-0.755-0.755-0.755zM3.395 18.040h57.348v33.202h-57.348v-33.202zM60.744 7.853v6.98h-57.348v-6.98h57.348zM3.395 56.147v-1.509h57.348v1.509h-57.348zM9.055 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM12.828 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM18.487 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM51.123 39.734l-11.13-13.96c-0.189-0.189-0.377-0.377-0.755-0.377v0c-0.189 0-0.566 0-0.755 0.377l-8.3 9.621-4.716-6.225c-0.189-0.189-0.377-0.377-0.755-0.377s-0.566 0-0.755 0.377l-8.866 10.376c-0.377 0.377-0.189 0.943 0 1.132s0.377 0.189 0.566 0.189c0.189 0 0.566 0 0.754-0.377l8.3-9.621 4.528 5.471-2.452 3.018c-0.377 0.377-0.189 0.943 0 1.132 0.377 0.189 0.943 0.189 1.132 0l11.319-13.017 10.376 13.205c0.189 0.189 0.377 0.377 0.755 0.377 0.189 0 0.377 0 0.566-0.189 0.377-0.377 0.566-0.943 0.189-1.132zM27.165 26.718c1.509 0 2.641-1.132 2.641-2.641 0-1.321-1.132-2.641-2.641-2.641s-2.641 1.132-2.641 2.641c0 1.509 1.132 2.641 2.641 2.641zM27.165 23.322c0.566 0 0.943 0.377 0.943 0.943s-0.377 0.943-0.943 0.943-0.943-0.377-0.943-0.943c0-0.566 0.377-0.943 0.943-0.943z"/> </symbol><symbol id="angle-down-solid" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 64 64"> <path d="M56.293 16.003c1.761-1.645 4.553-1.645 6.314 0 1.857 1.734 1.857 4.623 0 6.357l-27.45 25.638c-1.761 1.645-4.553 1.645-6.314 0l-27.45-25.638c-0.899-0.839-1.393-1.963-1.393-3.178s0.494-2.339 1.393-3.178c1.761-1.645 4.553-1.645 6.314 0l24.293 22.689 24.293-22.689z"/> </symbol><symbol id="logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30"><g fill="none" fill-rule="evenodd"><path fill="#FFF" d="M0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15C6.716 0 0 6.716 0 15z"/><path fill="#005AF0" fill-rule="nonzero" d="M13.85 24.098h-1.14l1.128-6.823-3.49.005h-.05a.57.57 0 0 1-.568-.569c0-.135.125-.363.125-.363l6.272-10.46 1.16.005-1.156 6.834 3.508-.004h.056c.314 0 .569.254.569.568 0 .128-.05.24-.121.335L13.85 24.098zM15 0C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15z"/></g></symbol></defs></svg> <header class="ap-header" [class]="'ap-header' + (mainmenuopen ? ' --mainmenuopen' : '')" i-amphtml-binding> <div class="ap-header-main"> <a class="ap-header-home" href="/web/20211117033346/https://amp.dev/"> <svg class="ap-header-home-logo"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#logo"/></svg> <span class="ap-header-home-title">AMP</span> </a> <nav class="ap-header-nav"> <div class="ap-header-nav-item"> <button class="ap-header-nav-link ap-nav-link " on="tap:AMP.setState({activeAbout: !activeAbout})"> About <div class="ap-icon ap-header-nav-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#angle-down-solid"/></svg> </div> </button> <ul class="ap-header-flyout" [class]="activeAbout ? 'ap-header-flyout active' : 'ap-header-flyout'" i-amphtml-binding> <li class="ap-header-flyout-item --primary websites"> <a class="ap-header-flyout-item-link" href="/web/20211117033346/https://amp.dev/about/websites/"> <div class="ap-header-flyout-item-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#amp-websites"/></svg> </div> <div class="ap-header-flyout-item-link-info"> <div class="ap-header-flyout-item-title">AMP Websites</div> <div class="ap-header-flyout-item-description">Create flawless web experiences</div> </div> </a> </li> <li class="ap-header-flyout-item --primary stories"> <a class="ap-header-flyout-item-link" href="/web/20211117033346/https://amp.dev/about/stories/"> <div class="ap-header-flyout-item-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#amp-stories"/></svg> </div> <div class="ap-header-flyout-item-link-info"> <div class="ap-header-flyout-item-title">Web Stories</div> <div class="ap-header-flyout-item-description">Snackable Stories for everyone</div> </div> </a> </li> <li class="ap-header-flyout-item --primary ads"> <a class="ap-header-flyout-item-link" href="/web/20211117033346/https://amp.dev/about/ads/"> <div class="ap-header-flyout-item-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#amp-ads"/></svg> </div> <div class="ap-header-flyout-item-link-info"> <div class="ap-header-flyout-item-title">AMP Ads</div> <div class="ap-header-flyout-item-description">Super fast ads on the web</div> </div> </a> </li> <li class="ap-header-flyout-item --primary email"> <a class="ap-header-flyout-item-link" href="/web/20211117033346/https://amp.dev/about/email/"> <div class="ap-header-flyout-item-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#amp-email"/></svg> </div> <div class="ap-header-flyout-item-link-info"> <div class="ap-header-flyout-item-title">AMP Email</div> <div class="ap-header-flyout-item-description">Next gen email</div> </div> </a> </li> <li class="ap-header-flyout-item --secondary"> <a class="ap-header-flyout-item-title" href="/web/20211117033346/https://amp.dev/about/page-experience/">Page Experience</a> </li> <li class="ap-header-flyout-item --secondary"> <a class="ap-header-flyout-item-title" href="/web/20211117033346/https://amp.dev/about/how-amp-works/">How AMP works</a> </li> <li class="ap-header-flyout-item --secondary"> <a class="ap-header-flyout-item-title" href="/web/20211117033346/https://amp.dev/about/mission-and-vision/">Vision & Mission</a> </li> <li class="ap-header-flyout-item --secondary"> <a class="ap-header-flyout-item-title" href="/web/20211117033346/https://amp.dev/about/use-cases/">Use cases</a> </li> <li class="ap-header-flyout-item --secondary"> <a class="ap-header-flyout-item-title" href="/web/20211117033346/https://amp.dev/success-stories/">Success Stories</a> </li> </ul> </div> <div class="ap-header-nav-item"> <button class="ap-header-nav-link ap-nav-link " on="tap:AMP.setState({activeDocumentation: !activeDocumentation})"> Documentation <div class="ap-icon ap-header-nav-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#angle-down-solid"/></svg> </div> </button> <ul class="ap-header-flyout" [class]="activeDocumentation ? 'ap-header-flyout active' : 'ap-header-flyout'" i-amphtml-binding> <li class="ap-header-flyout-item --secondary"> <a class="ap-header-flyout-item-title" href="/web/20211117033346/https://amp.dev/documentation/">Get Started</a> </li> <li class="ap-header-flyout-item --primary "> <a class="ap-header-flyout-item-link" href="/web/20211117033346/https://amp.dev/documentation/guides-and-tutorials/"> <div class="ap-header-flyout-item-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#guides-documents"/></svg> </div> <div class="ap-header-flyout-item-link-info"> <div class="ap-header-flyout-item-title">Guides & Tutorials</div> <div class="ap-header-flyout-item-description">Get started with AMP</div> </div> </a> </li> <li class="ap-header-flyout-item --primary "> <a class="ap-header-flyout-item-link" href="/web/20211117033346/https://amp.dev/documentation/components/"> <div class="ap-header-flyout-item-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#components-flyout"/></svg> </div> <div class="ap-header-flyout-item-link-info"> <div class="ap-header-flyout-item-title">Components</div> <div class="ap-header-flyout-item-description">The complete AMP library</div> </div> </a> </li> <li class="ap-header-flyout-item --primary "> <a class="ap-header-flyout-item-link" href="/web/20211117033346/https://amp.dev/documentation/examples/"> <div class="ap-header-flyout-item-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#examples-flyout"/></svg> </div> <div class="ap-header-flyout-item-link-info"> <div class="ap-header-flyout-item-title">Examples</div> <div class="ap-header-flyout-item-description">Hands-on introduction to AMP</div> </div> </a> </li> <li class="ap-header-flyout-item --primary "> <a class="ap-header-flyout-item-link" href="/web/20211117033346/https://amp.dev/documentation/courses/"> <div class="ap-header-flyout-item-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#learn"/></svg> </div> <div class="ap-header-flyout-item-link-info"> <div class="ap-header-flyout-item-title">Courses</div> <div class="ap-header-flyout-item-description">Learn AMP with free courses</div> </div> </a> </li> <li class="ap-header-flyout-item --primary "> <a class="ap-header-flyout-item-link" href="/web/20211117033346/https://amp.dev/documentation/templates/"> <div class="ap-header-flyout-item-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#template"/></svg> </div> <div class="ap-header-flyout-item-link-info"> <div class="ap-header-flyout-item-title">Templates</div> <div class="ap-header-flyout-item-description">Ready to use</div> </div> </a> </li> <li class="ap-header-flyout-item --primary "> <a class="ap-header-flyout-item-link" href="/web/20211117033346/https://amp.dev/documentation/tools/"> <div class="ap-header-flyout-item-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#wrench"/></svg> </div> <div class="ap-header-flyout-item-link-info"> <div class="ap-header-flyout-item-title">Tools</div> <div class="ap-header-flyout-item-description">Begin building</div> </div> </a> </li> </ul> </div> <div class="ap-header-nav-item"> <button class="ap-header-nav-link ap-nav-link " on="tap:AMP.setState({activeCommunity: !activeCommunity})"> Community <div class="ap-icon ap-header-nav-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#angle-down-solid"/></svg> </div> </button> <ul class="ap-header-flyout" [class]="activeCommunity ? 'ap-header-flyout active' : 'ap-header-flyout'" i-amphtml-binding> <li class="ap-header-flyout-item --secondary"> <a class="ap-header-flyout-item-title" href="/web/20211117033346/https://amp.dev/documentation/guides-and-tutorials/contribute/">Contribute</a> </li> <li class="ap-header-flyout-item --secondary"> <a class="ap-header-flyout-item-title" href="/web/20211117033346/https://amp.dev/community/roadmap/">Roadmap</a> </li> <li class="ap-header-flyout-item --secondary"> <a class="ap-header-flyout-item-title" href="/web/20211117033346/https://amp.dev/community/governance/">Governance</a> </li> <li class="ap-header-flyout-item --secondary"> <a class="ap-header-flyout-item-title" href="/web/20211117033346/https://amp.dev/community/working-groups/access-subscriptions/">Working Groups</a> </li> </ul> </div> <div class="ap-header-nav-item"> <button class="ap-header-nav-link ap-nav-link " on="tap:AMP.setState({activeEvents: !activeEvents})"> Events <div class="ap-icon ap-header-nav-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#angle-down-solid"/></svg> </div> </button> <ul class="ap-header-flyout" [class]="activeEvents ? 'ap-header-flyout active' : 'ap-header-flyout'" i-amphtml-binding> <li class="ap-header-flyout-item --secondary"> <a class="ap-header-flyout-item-title" href="/web/20211117033346/https://amp.dev/events/amp-fest-2020/">AMP Fest 2020</a> </li> <li class="ap-header-flyout-item --secondary"> <a class="ap-header-flyout-item-title" href="/web/20211117033346/https://amp.dev/events/amp-roadshow/">AMP Roadshow</a> </li> </ul> </div> <div class="ap-header-nav-item"> <a class="ap-header-nav-link ap-nav-link" href="https://web.archive.org/web/20211117033346/https://blog.amp.dev/">Blog</a> </div> <div class="ap-header-nav-item"> <button class="ap-header-nav-link ap-nav-link " on="tap:AMP.setState({activeSupport: !activeSupport})"> Support <div class="ap-icon ap-header-nav-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#angle-down-solid"/></svg> </div> </button> <ul class="ap-header-flyout" [class]="activeSupport ? 'ap-header-flyout active' : 'ap-header-flyout'" i-amphtml-binding> <li class="ap-header-flyout-item --secondary"> <a class="ap-header-flyout-item-title" href="/web/20211117033346/https://amp.dev/support/">Help</a> </li> <li class="ap-header-flyout-item --secondary"> <a class="ap-header-flyout-item-title" href="/web/20211117033346/https://amp.dev/support/faq/">FAQ</a> </li> </ul> </div> </nav> <div class="ap-language-selector"> <select on="change:AMP.navigateTo(url=event.value)"> <option value="/index-2021/" selected> EN </option> <option value="/de/index-2021/"> DE </option> <option value="/fr/index-2021/"> FR </option> <option value="/ar/index-2021/"> AR </option> <option value="/es/index-2021/"> ES </option> <option value="/it/index-2021/"> IT </option> <option value="/id/index-2021/"> ID </option> <option value="/ja/index-2021/"> JA </option> <option value="/ko/index-2021/"> KO </option> <option value="/pt_br/index-2021/"> PT </option> <option value="/ru/index-2021/"> RU </option> <option value="/tr/index-2021/"> TR </option> <option value="/zh_cn/index-2021/"> ZH </option> <option value="/pl/index-2021/"> PL </option> <option value="/vi/index-2021/"> VI </option> </select> </div> <button id="searchTriggerOpen" class="ap-search-trigger" on="tap:searchLightbox" role="button" aria-label="Search" tabindex="0"> <div class="ap-icon ap-search-trigger-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#magnifier"/></svg> </div> </button> <button class="ap-header-burger" on="tap:AMP.setState({mainmenuopen: !mainmenuopen, noScrollState: !noScrollState})" [class]="'ap-header-burger ' + (mainmenuopen ? '--mainmenuopen ' : '')" tabindex="0" aria-label="Burger Menu" i-amphtml-binding> <div class="ap-icon ap-header-burger-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#menu"/></svg> </div> </button> </div> </header> <amp-state id="query" src="https://amp.dev/search/latest-query" class="i-amphtml-layout-container" i-amphtml-layout="container"></amp-state> <amp-state id="clear" [src]="clear ? 'https://amp.dev/search/clear-latest-query' : ''" i-amphtml-binding class="i-amphtml-layout-container" i-amphtml-layout="container"></amp-state> <amp-lightbox id="searchLightbox" class="-tt i-amphtml-layout-nodisplay" layout="nodisplay" on="lightboxOpen:searchInput.focus,AMP.setState({clear: false}); lightboxClose:searchTriggerOpen.focus" scrollable hidden="hidden" i-amphtml-layout="nodisplay"> <div class="-tn" role="button" tabindex="0" on="tap:searchLightbox.close"></div> <div class="-tr"> <div class="ap-m-search-trigger ap-m-search-trigger-close" on="tap:searchLightbox.close,AMP.setState({clear: true, query: null})" role="button" tabindex="0"> <div class="ap-a-ico ap-m-search-trigger-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#close"/></svg> </div> </div> <div class="ap-o-search-field"> <form action-xhr="https://amp.dev/documentation/examples/api/echo" class="-ti" id="searchForm" method="POST" on="submit:AMP.setState({ query: throttledValue }),searchResult.focus,searchList.changeToLayoutContainer" target="_top"> <amp-autocomplete class="-ts i-amphtml-layout-container" filter="substring" min-characters="1" on="select:AMP.setState({ query: event.value })" submit-on-enter="false" src="https://amp.dev/search/autosuggest" i-amphtml-layout="container"> <div class="ap-a-ico -tu"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#magnifier"/></svg> </div> <input id="searchInput" class="-to" name="q" placeholder="What are you looking for?" on="input-throttled:AMP.setState({ throttledValue: event.value })" [value]="query == null ? '' : query" required i-amphtml-binding> <button class="-ta" type="submit" name="search-submit" disabled [disabled]="!throttledValue" i-amphtml-binding>Search</button> </amp-autocomplete> </form> <div class="-tf" id="searchResult" tabindex="-1"> <amp-state id="search" src="https://amp.dev/search/highlights?locale=en" [src]="query == null || clear ? 'https://amp.dev/search/highlights?locale=en' : 'https://amp.dev/search/do?q=' + encodeURIComponent(query) + '&locale=en'" i-amphtml-binding class="i-amphtml-layout-container" i-amphtml-layout="container"></amp-state> <amp-list id="searchList" src="https://web.archive.org/web/20211117033346js_/https://amp.dev/search/highlights?locale=en" [src]="query == null || clear ? 'https://amp.dev/search/highlights?locale=en' : 'https://amp.dev/search/do?q=' + encodeURIComponent(query) + '&locale=en'" binding="no" items="." height="80vh" layout="fixed-height" load-more="auto" load-more-bookmark="nextUrl" reset-on-refresh single-item i-amphtml-binding class="i-amphtml-layout-fixed-height i-amphtml-layout-size-defined" style="height:80vh;" i-amphtml-layout="fixed-height"> <template type="amp-mustache" id="searchResultTemplate"> <div class="-tl"> {{^prevUrl}} {{#result.components.length}} <h4 class="-tp">{{#initial}}Important Components{{/initial}}{{^initial}}Components{{/initial}}</h4> {{/result.components.length}} {{/prevUrl}} {{#result.components}} <div class="-tc -td"> <a class="-tv" href="{{url}}"> <h4 class="-tb">{{#initial}}<{{title}}>{{/initial}}{{^initial}}{{title}}{{/initial}}</h4> <p class="-tw">{{description}}</p> </a> {{#exampleUrl}} <div class="-tm"> <a class="-tg ap-o-search-result-linklist-item-example -n" href="{{exampleUrl}}"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#internal"/></svg> </div> <span class="-r">Open example</span> </a> {{#playgroundUrl}} <a class="-tg -ty -n" href="{{playgroundUrl}}" target="_blank"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#internal"/></svg> </div> <span class="-r">Open in playground</span> </a> {{/playgroundUrl}} </div> {{/exampleUrl}} </div> {{/result.components}} {{^prevUrl}} {{#result.pages.length}} <h4 class="-tp">{{#initial}}Popular Articles{{/initial}}{{^initial}}Results{{/initial}}</h4> {{/result.pages.length}} {{/prevUrl}} {{#result.pages}} <div class="-tc"> <a class="-tv" href="{{url}}"> <h4 class="-tb">{{title}}</h4> <p class="-tw">{{description}}</p> </a> </div> {{/result.pages}} {{#result.isTruncated}} <div class="-th"> Although there are {{result.totalResults}} hits in total we cannot show more than 100. </div> {{/result.isTruncated}} </div> </template> <amp-list-load-more load-more-button class="i-amphtml-layout-container" i-amphtml-layout="container"> <div class="-tx" overflow> <button class="ap-a-btn">Load more</button> </div> </amp-list-load-more> <amp-list-load-more class="-th i-amphtml-layout-container" load-more-failed i-amphtml-layout="container"> Something went wrong while trying to load more search results.<br> We apologize for the inconvenience caused.<br> Please try again later. </amp-list-load-more> <div class="-tk" fallback> <h2 class="-tj">;(</h2> <h3 class="ap-o-search-result-error-headline">Something went wrong…</h3> <p class="-tq"> …while trying to load the search results.<br> We apologize for the inconvenience caused.<br> Please try again later. </p> </div> </amp-list> <div class="-tk" [hidden]="search.initial == true || search.result.totalResults != 0" hidden i-amphtml-binding> <h2 class="-t_">¯\_(ツ)_/¯</h2> <h3 class="ap-o-search-result-error-headline">No results found.</h3> <p class="-tq">We could not find any results matching your search query.</p> </div> </div> </div> </div> </amp-lightbox> <main class="ap--main"> <section class="-ns"> <div class="-nu"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 194 194"> <defs> <lineargradient id="hnk2zvh1ka" x1="100%" x2="0%" y1="0%" y2="100%"> <stop offset="0%" stop-color="#00DCC0"/> <stop offset="100%" stop-color="#005AF0"/> </lineargradient> </defs> <g fill="none" fill-rule="evenodd"> <g fill="url(#hnk2zvh1ka)" transform="translate(-91 -83)"> <path d="M188 83c53.572 0 97 43.428 97 97s-43.428 97-97 97-97-43.428-97-97 43.428-97 97-97zm0 2.533c-52.173 0-94.467 42.294-94.467 94.467s42.294 94.467 94.467 94.467 94.467-42.294 94.467-94.467S240.173 85.533 188 85.533zM193.88 124l8.969.037-6.742 41.065 18.96-.023.31-.005.177.002c2.472.072 4.446 2.15 4.446 4.697 0 1.007-.345 1.937-.952 2.77l.043-.06L182.03 236h-8.853l6.577-41.007-18.856.028-.277.005-.173-.001c-2.472-.073-4.449-2.153-4.449-4.698 0-.37.076-.76.208-1.185.071-.23.158-.465.257-.705.156-.378.312-.697.445-.944L193.88 124zm1.435 2.562L159.1 188.754l-.067.132-.1.21c-.05.106-.099.217-.145.33-.071.172-.132.336-.178.485-.015.05-.029.096-.04.14l-.029.118-.017.094c-.003.026-.005.048-.005.064 0 1.187.928 2.143 2.062 2.143l.19-.003 21.947-.035-6.579 41.011h4.454l36.39-62.366.038-.053c.305-.42.458-.832.458-1.25 0-1.19-.925-2.143-2.06-2.143l-22.288.032 6.744-41.082-4.561-.019z"/> </g> </g> </svg> </div> <div class="-no"> <h1 class="ap-h1">AMP is a web component framework to easily create user-first experiences for the web.</h1> </div> </section> <section class="ap-formats"> <aside class="ap-formats-navigation"> <div class="ap-formats-navigation-wrapper"> <amp-animation id="switchIcon-websites" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":"500ms","fill":"both","animations":[{"selector":".ap-formats-navigation-icon.active.websites","keyframes":[{"visibility":"hidden","opacity":"0"},{"visibility":"visible","opacity":"1"}]},{"selector":".ap-formats-navigation-icon.inactive.websites","keyframes":[{"visibility":"visible","opacity":"1"},{"visibility":"hidden","opacity":"0"}]}]}</script> </amp-animation> <button class="ap-formats-navigation-icon-wrapper" on="tap:ap-formats-format-websites.scrollTo(duration=300)"> <div class="ap-formats-navigation-icon inactive websites"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#amp-websites"/></svg> </div> <div class="ap-formats-navigation-icon active websites"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#amp-websites"/></svg> </div> </button> <amp-animation id="switchIcon-stories" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":"500ms","fill":"both","animations":[{"selector":".ap-formats-navigation-icon.active.stories","keyframes":[{"visibility":"hidden","opacity":"0"},{"visibility":"visible","opacity":"1"}]},{"selector":".ap-formats-navigation-icon.inactive.stories","keyframes":[{"visibility":"visible","opacity":"1"},{"visibility":"hidden","opacity":"0"}]}]}</script> </amp-animation> <button class="ap-formats-navigation-icon-wrapper" on="tap:ap-formats-format-stories.scrollTo(duration=300)"> <div class="ap-formats-navigation-icon inactive stories"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#amp-stories"/></svg> </div> <div class="ap-formats-navigation-icon active stories"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#amp-stories"/></svg> </div> </button> <amp-animation id="switchIcon-email" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":"500ms","fill":"both","animations":[{"selector":".ap-formats-navigation-icon.active.email","keyframes":[{"visibility":"hidden","opacity":"0"},{"visibility":"visible","opacity":"1"}]},{"selector":".ap-formats-navigation-icon.inactive.email","keyframes":[{"visibility":"visible","opacity":"1"},{"visibility":"hidden","opacity":"0"}]}]}</script> </amp-animation> <button class="ap-formats-navigation-icon-wrapper" on="tap:ap-formats-format-email.scrollTo(duration=300)"> <div class="ap-formats-navigation-icon inactive email"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#amp-email"/></svg> </div> <div class="ap-formats-navigation-icon active email"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#amp-email"/></svg> </div> </button> <amp-animation id="switchIcon-ads" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":"500ms","fill":"both","animations":[{"selector":".ap-formats-navigation-icon.active.ads","keyframes":[{"visibility":"hidden","opacity":"0"},{"visibility":"visible","opacity":"1"}]},{"selector":".ap-formats-navigation-icon.inactive.ads","keyframes":[{"visibility":"visible","opacity":"1"},{"visibility":"hidden","opacity":"0"}]}]}</script> </amp-animation> <button class="ap-formats-navigation-icon-wrapper" on="tap:ap-formats-format-ads.scrollTo(duration=300)"> <div class="ap-formats-navigation-icon inactive ads"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#amp-ads"/></svg> </div> <div class="ap-formats-navigation-icon active ads"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#amp-ads"/></svg> </div> </button> </div> </aside> <div class="ap-formats-format websites" id="ap-formats-format-websites"> <amp-position-observer on="enter:switchIcon-websites.start;exit:switchIcon-websites.start,switchIcon-websites.reverse" intersection-ratios="0.9" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <div class="ap-formats-background"> <svg amp-fx="parallax" data-parallax-factor="0.95"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#amp-websites"/></svg> </div> <div class="ap-formats-format-content"> <div class="ap-formats-logo"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#amp-websites"/></svg> </div> <h1>AMP Websites</h1> <h5 class="ap-h5">Easily create websites with a great page experience out-of-the-box using AMP’s ready-to-go web components.</h5> <a href="/web/20211117033346/https://amp.dev/documentation/" class="ap-button --inverted cta">Get started</a> <a class="ap-link --internal" href="/web/20211117033346/https://amp.dev/about/websites.html"> <span class="ap-link-text">All about AMP Websites</span> </a> </div> </div> <div class="ap-formats-format stories" id="ap-formats-format-stories"> <amp-position-observer on="enter:switchIcon-stories.start;exit:switchIcon-stories.start,switchIcon-stories.reverse" intersection-ratios="0.9" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <div class="ap-formats-background"> <svg amp-fx="parallax" data-parallax-factor="0.95"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#amp-stories"/></svg> </div> <div class="ap-formats-format-content"> <div class="ap-formats-logo"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#amp-stories"/></svg> </div> <h1>Web Stories</h1> <h5 class="ap-h5">Immerse readers in visual and tappable stories they can share anywhere on the open web.</h5> <a class="ap-link --internal" href="/web/20211117033346/https://amp.dev/about/stories.html"> <span class="ap-link-text">All about Web Stories</span> </a> </div> </div> <div class="ap-formats-format email" id="ap-formats-format-email"> <amp-position-observer on="enter:switchIcon-email.start;exit:switchIcon-email.start,switchIcon-email.reverse" intersection-ratios="0.9" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <div class="ap-formats-background"> <svg amp-fx="parallax" data-parallax-factor="0.95"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#amp-email"/></svg> </div> <div class="ap-formats-format-content"> <div class="ap-formats-logo"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#amp-email"/></svg> </div> <h1>AMP Emails</h1> <h5 class="ap-h5">Send emails of the future with personalized dynamic content and interactive elements that engage readers.</h5> <a class="ap-link --internal" href="/web/20211117033346/https://amp.dev/about/email.html"> <span class="ap-link-text">All about AMP Emails</span> </a> </div> </div> <div class="ap-formats-format ads" id="ap-formats-format-ads"> <amp-position-observer on="enter:switchIcon-ads.start;exit:switchIcon-ads.start,switchIcon-ads.reverse" intersection-ratios="0.9" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <div class="ap-formats-background"> <svg amp-fx="parallax" data-parallax-factor="0.95"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#amp-ads"/></svg> </div> <div class="ap-formats-format-content"> <div class="ap-formats-logo"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#amp-ads"/></svg> </div> <h1>AMP Ads</h1> <h5 class="ap-h5">Serve lightning fast and secure eye-catching creatives.</h5> <a class="ap-link --internal" href="/web/20211117033346/https://amp.dev/about/ads.html"> <span class="ap-link-text">All about AMP Ads</span> </a> </div> </div> </section> <section class="-n_ ap-section --col-left"> <h1>The latest news</h1> <p>Don't want to miss any of the great stuff that happens around AMP? Then always be first in line and subscribe to our newsletter!</p> <a class="ap-link --internal --square ap-newsletter-double" href="https://web.archive.org/web/20211117033346/https://services.google.com/fb/forms/ampnewsletter-doubleopt-in/"> <span class="ap-link-text">Subscribe</span> </a> <a class="ap-link --internal --square ap-newsletter" href="https://web.archive.org/web/20211117033346/https://services.google.com/fb/forms/ampnewsletter/"> <span class="ap-link-text">Subscribe</span> </a> </section> <section class="-na --news"> <div class="-nc"> <amp-base-carousel id="teaser-carousel-news" height="523" layout="fixed-height" role="region" snap-align="(min-width: 768px) start, center" visible-count="(min-width: 1024px) 3, (min-width: 768px) 2, 1.05" aria-label="News" on="slideChange:teaser-carousel-pagination-news.toggle(index=event.index, value=true)" class="i-amphtml-layout-fixed-height i-amphtml-layout-size-defined" style="height:523px;" i-amphtml-layout="fixed-height"> <a href="https://web.archive.org/web/20211117033346/https://blog.amp.dev/2021/09/15/web-stories-call-to-action-buttons-get-an-upgrade/" class="-nf --news"> <div class="-nl"> <div class="-nv"> <h6>Stories</h6> </div> <div class="-ng"> <amp-img class="i-amphtml-layout-fill i-amphtml-layout-size-defined" src="/web/20211117033346im_/https://amp.dev/static/remote/?url=https%3A%2F%2Fblog.amp.dev%2Fwp-content%2Fuploads%2F2021%2F09%2Fimage4-768x384.jpg" layout="fill" alt="Stories" i-amphtml-layout="fill"> </amp-img> </div> <div class="-nb"> <h4 class="-nw">Web Stories call to action buttons get an upgrade</h4> <div class="-nx">September 15, 2021</div> </div> </div> </a> <a href="https://web.archive.org/web/20211117033346/https://blog.amp.dev/2021/09/13/easy-tiktok-embedding-with-the-new-amp-tiktok/" class="-nf --news"> <div class="-nl"> <div class="-nv"> <h6>Websites</h6> </div> <div class="-ng"> <div class="-nk"> <div class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#news"/></svg> </div> </div> </div> <div class="-nb"> <h4 class="-nw">Easy TikTok embedding with the new amp-tiktok</h4> <div class="-nx">September 13, 2021</div> </div> </div> </a> <a href="https://web.archive.org/web/20211117033346/https://blog.amp.dev/2021/08/26/richer-interactions-in-web-stories/" class="-nf --news"> <div class="-nl"> <div class="-nv"> <h6>Stories</h6> </div> <div class="-ng"> <amp-img class="i-amphtml-layout-fill i-amphtml-layout-size-defined" src="/web/20211117033346im_/https://amp.dev/static/remote/?url=https%3A%2F%2Fblog.amp.dev%2Fwp-content%2Fuploads%2F2021%2F08%2Fimage7-768x384.jpg" layout="fill" alt="Stories" i-amphtml-layout="fill"> </amp-img> </div> <div class="-nb"> <h4 class="-nw">Richer interactions in Web Stories</h4> <div class="-nx">August 26, 2021</div> </div> </div> </a> <a href="https://web.archive.org/web/20211117033346/https://blog.amp.dev/2021/08/24/better-video-performance-in-web-stories/" class="-nf --news"> <div class="-nl"> <div class="-nv"> <h6>Stories</h6> </div> <div class="-ng"> <amp-img class="i-amphtml-layout-fill i-amphtml-layout-size-defined" src="/web/20211117033346im_/https://amp.dev/static/remote/?url=https%3A%2F%2Fblog.amp.dev%2Fwp-content%2Fuploads%2F2021%2F08%2Fimage1-1-768x384.png" layout="fill" alt="Stories" i-amphtml-layout="fill"> </amp-img> </div> <div class="-nb"> <h4 class="-nw">Better video performance in Web Stories</h4> <div class="-nx">August 24, 2021</div> </div> </div> </a> <a href="https://web.archive.org/web/20211117033346/https://blog.amp.dev/2021/08/18/preview-your-web-stories-across-all-devices/" class="-nf --news"> <div class="-nl"> <div class="-nv"> <h6>Stories</h6> </div> <div class="-ng"> <amp-img class="i-amphtml-layout-fill i-amphtml-layout-size-defined" src="/web/20211117033346im_/https://amp.dev/static/remote/?url=https%3A%2F%2Fblog.amp.dev%2Fwp-content%2Fuploads%2F2021%2F08%2Fimage3-768x384.png" layout="fill" alt="Stories" i-amphtml-layout="fill"> </amp-img> </div> <div class="-nb"> <h4 class="-nw">Preview your Web Stories across all devices</h4> <div class="-nx">August 18, 2021</div> </div> </div> </a> <a href="https://web.archive.org/web/20211117033346/https://blog.amp.dev/2021/08/16/an-update-on-how-amp-is-served-at-the-openjs-foundation/" class="-nf --news"> <div class="-nl"> <div class="-nv"> <h6>Developer Experience</h6> </div> <div class="-ng"> <div class="-nk"> <div class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#news"/></svg> </div> </div> </div> <div class="-nb"> <h4 class="-nw">An update on how AMP is served at the OpenJS Foundation</h4> <div class="-nx">August 16, 2021</div> </div> </div> </a> <button slot="next-arrow"></button> <button slot="prev-arrow"></button> </amp-base-carousel> </div> <div class="-nh --prev"> <button on="tap: teaser-carousel-news.prev()" class="amp-carousel-button amp-carousel-button-prev" aria-label="Previous"></button> </div> <div class="-nh --next"> <button on="tap: teaser-carousel-news.next()" class="amp-carousel-button amp-carousel-button-next" aria-label="Next"></button> </div> <amp-selector class="-np i-amphtml-layout-container" id="teaser-carousel-pagination-news" layout="container" on="select: teaser-carousel-news.goToSlide(index=event.targetOption)" i-amphtml-layout="container"> <div class="-nd" option="0" selected></div> <div class="-nd" option="1"></div> <div class="-nd" option="2"></div> <div class="-nd" option="3"></div> <div class="-nd" option="4"></div> <div class="-nd" option="5"></div> </amp-selector> </section> <section class="-n_ ap-section --col-right"> <div class="ap-text-block"> <h1>Explore AMP success stories</h1> <p>Don’t take our word for it - read case studies from industry success stories and see how AMP has produced positive results.</p> <a class="ap-link --internal --square" href="/web/20211117033346/https://amp.dev/success-stories/"> <span class="ap-link-text">See all success stories</span> </a> </div> </section> <section class="-na --success-stories"> <div class="-nc"> <amp-base-carousel id="success-stories" height="573" layout="fixed-height" role="region" snap-align="(min-width: 768px) start, center" visible-count="(min-width: 1024px) 3, (min-width: 768px) 2, 1.05" aria-label="Success stories" on="slideChange:teaser-carousel-pagination-success-stories.toggle(index=event.index, value=true)" class="i-amphtml-layout-fixed-height i-amphtml-layout-size-defined" style="height:573px;" i-amphtml-layout="fixed-height"> <a href="/web/20211117033346/https://amp.dev/success-stories/washingtonpost/" class="-nf --success-story"> <div class="-nl"> <div class="-nv"> <div class="-nm"> <svg fill="url(#gradient-websites)"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#amp-websites"/></svg> </div> <h6>websites</h6> </div> <div class="-ng"> <amp-img class="i-amphtml-layout-fill i-amphtml-layout-size-defined" src="/web/20211117033346im_/https://amp.dev/static/img/success-stories/washington_post/teaser_washington_post.jpg" layout="fill" alt="Washington Post" i-amphtml-layout="fill"> </amp-img> </div> <div class="-nb"> <div class="-ny"> <amp-img src="/web/20211117033346im_/https://amp.dev/static/img/success-stories/washington_post/washington_post_logo.png" layout="fill" alt="Washington Post" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <h4 class="-nw">AMP helps the Washington Post increase returning users from mobile search by 23%</h4> <div class="-nx">publishers</div> </div> </div> </a><a href="/web/20211117033346/https://amp.dev/success-stories/teads/" class="-nf --success-story"> <div class="-nl"> <div class="-nv"> <div class="-nm"> <svg fill="url(#gradient-websites)"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#amp-websites"/></svg> </div> <h6>websites</h6> </div> <div class="-ng"> <amp-img class="i-amphtml-layout-fill i-amphtml-layout-size-defined" src="/web/20211117033346im_/https://amp.dev/static/img/success-stories/teads/teaser_teads.jpg" layout="fill" alt="Teads" i-amphtml-layout="fill"> </amp-img> </div> <div class="-nb"> <div class="-ny"> <amp-img src="/web/20211117033346im_/https://amp.dev/static/img/success-stories/teads/teads_logo.png" layout="fill" alt="Teads" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <h4 class="-nw">Teads brings AMP'd mobile video inventory to nearly 100 publishers</h4> <div class="-nx">advertisers</div> </div> </div> </a><a href="/web/20211117033346/https://amp.dev/success-stories/carved/" class="-nf --success-story"> <div class="-nl"> <div class="-nv"> <div class="-nm"> <svg fill="url(#gradient-websites)"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#amp-websites"/></svg> </div> <h6>websites</h6> </div> <div class="-ng"> <amp-img class="i-amphtml-layout-fill i-amphtml-layout-size-defined" src="/web/20211117033346im_/https://amp.dev/static/img/success-stories/carved/teaser_carved.jpg" layout="fill" alt="Carved" i-amphtml-layout="fill"> </amp-img> </div> <div class="-nb"> <div class="-ny"> <amp-img src="/web/20211117033346im_/https://amp.dev/static/img/success-stories/carved/carved_logo.png" layout="fill" alt="Carved" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <h4 class="-nw">Carved increases conversion rate by 75% with AMP and PWA</h4> <div class="-nx">e-commerce</div> </div> </div> </a><a href="/web/20211117033346/https://amp.dev/success-stories/wompmobile/" class="-nf --success-story"> <div class="-nl"> <div class="-nv"> <div class="-nm"> <svg fill="url(#gradient-websites)"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#amp-websites"/></svg> </div> <h6>websites</h6> </div> <div class="-ng"> <amp-img class="i-amphtml-layout-fill i-amphtml-layout-size-defined" src="/web/20211117033346im_/https://amp.dev/static/img/success-stories/womp/teaser_wompmobile.jpg" layout="fill" alt="WompMobile" i-amphtml-layout="fill"> </amp-img> </div> <div class="-nb"> <div class="-ny"> <amp-img src="/web/20211117033346im_/https://amp.dev/static/img/success-stories/womp/wompmobile_logo.png" layout="fill" alt="WompMobile" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <h4 class="-nw">WompMobile consistently improves e-commerce clients’ conversion rates with AMP sites</h4> <div class="-nx">e-commerce</div> </div> </div> </a> <button slot="next-arrow"></button> <button slot="prev-arrow"></button> </amp-base-carousel> </div> <div class="-nh --prev"> <button on="tap: success-stories.prev()" class="amp-carousel-button amp-carousel-button-prev" aria-label="Previous"></button> </div> <div class="-nh --next"> <button on="tap: success-stories.next()" class="amp-carousel-button amp-carousel-button-next" aria-label="Next"></button> </div> <amp-selector class="-np i-amphtml-layout-container" id="teaser-carousel-pagination-success-stories" layout="container" on="select: success-stories.goToSlide(index=event.targetOption)" i-amphtml-layout="container"> <div class="-nd" option="0" selected></div> <div class="-nd" option="1"></div> <div class="-nd" option="2"></div> <div class="-nd" option="3"></div> </amp-selector> </section></main> <footer class="ap--footer"> <div class="-a"> <div class="-f"> <div class="ap-o-footer-hint">Of course, this site is made with AMP!</div> <div class="-l"> <h5 class="-c">Follow us</h5> <ul class="-h"> <li class="-p"> <a class="ap-a-ico -d" href="https://web.archive.org/web/20211117033346/https://twitter.com/AMPhtml" rel="noopener" title="Twitter"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#twitter"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://web.archive.org/web/20211117033346/https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw" rel="noopener" title="YouTube"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#youtube"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://web.archive.org/web/20211117033346/https://blog.amp.dev/" rel="noopener"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#wordpress" title="WordPress"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://web.archive.org/web/20211117033346/https://github.com/ampproject" title="GitHub"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#github"/></svg> </a></li> <li class="-p"> <a class="ap-a-ico -d" href="https://web.archive.org/web/20211117033346/https://stackoverflow.com/questions/tagged/amp-html" rel="noopener" title="Stackoverflow"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#stackoverflow"/></svg></a> </li> </ul> </div> </div> <div class="-v"> <div class="-m"> <h5 class="-g">Overview</h5> <ul class="-y"> <li class="-b"><a href="/web/20211117033346/https://amp.dev/about/websites/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#internal"/></svg></div>AMP Framework</a></li> <li class="-b"><a href="/web/20211117033346/https://amp.dev/about/use-cases/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#internal"/></svg></div>Use Cases</a></li> <li class="-b"><a href="/web/20211117033346/https://amp.dev/success-stories/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#internal"/></svg></div>Success stories</a></li> <li class="-b"><a href="/web/20211117033346/https://amp.dev/about/how-amp-works/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#internal"/></svg></div>Functionality</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Docs</h5> <ul class="-y"> <li class="-b"><a href="/web/20211117033346/https://amp.dev/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#internal"/></svg></div>Get Started</a></li> <li class="-b"><a href="/web/20211117033346/https://amp.dev/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#internal"/></svg></div>Guides and Tutorials</a></li> <li class="-b"><a href="/web/20211117033346/https://amp.dev/documentation/components/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#internal"/></svg></div>Components</a></li> <li class="-b"><a href="/web/20211117033346/https://amp.dev/documentation/examples/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#internal"/></svg></div>Examples</a></li> <li class="-b"><a href="/web/20211117033346/https://amp.dev/documentation/templates/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#internal"/></svg></div>Design Templates</a></li> <li class="-b"><a href="/web/20211117033346/https://amp.dev/documentation/tools/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#internal"/></svg></div>Tools</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Community</h5> <ul class="-y"> <li class="-b"><a href="/web/20211117033346/https://amp.dev/support/faq/platform-and-vendor-partners/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#internal"/></svg></div>Platform and Vendor Partners</a></li> <li class="-b"><a href="/web/20211117033346/https://amp.dev/documentation/guides-and-tutorials/contribute/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#internal"/></svg></div>Contribute</a></li> <li class="-b"><a href="/web/20211117033346/https://amp.dev/community/roadmap/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#internal"/></svg></div>Roadmap</a></li> </ul> <h5 class="-g">OpenJS Foundation</h5> <ul class="-y"> <li class="-b"><a class="-w" href="https://web.archive.org/web/20211117033346/https://openjsf.org/" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#internal"/></svg></div>The OpenJS Foundation</a></li> <li class="-b"><a class="-w" href="https://web.archive.org/web/20211117033346/https://bylaws.openjsf.org/" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#internal"/></svg></div>OpenJS Foundation Bylaws</a></li> <li class="-b"><a class="-w" href="https://web.archive.org/web/20211117033346/https://trademark-policy.openjsf.org/" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#internal"/></svg></div>Trademark Policy</a></li> <li class="-b"><a class="-w" href="https://web.archive.org/web/20211117033346/https://trademark-list.openjsf.org/" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#internal"/></svg></div>Trademark List</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Events</h5> <ul class="-y"> <li class="-b"><a href="https://web.archive.org/web/20211117033346/https://blog.amp.dev/2020/02/20/amp-conf-2020-return-to-nyc/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#internal"/></svg></div>AMP Conf 2020</a></li> <li class="-b"><a href="/web/20211117033346/https://amp.dev/events/amp-cs-2019/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#internal"/></svg></div>AMP Contributor Summit 2019</a></li> </ul> <h5 class="-g">AMP Brand Materials</h5> <ul class="-y"> <li class="-b"><a href="/web/20211117033346/https://amp.dev/static/files/brand-material/AMP_Mini_Styleguide.pdf" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#download"/></svg></div>Styleguide</a></li> <li class="-b"><a href="/web/20211117033346/https://amp.dev/static/files/brand-material/AMP_Logo_Rebrush.zip" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#download"/></svg></div>Logos</a></li> </ul> </div> </div> <div class="-k"> <div class="-_"> <amp-img src="/web/20211117033346im_/https://amp.dev/static/img/logo-openjsf.svg" alt="Logo of the OpenJS Foundation" width="315" height="100" layout="responsive" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer style="display:block;padding-top:31.746%"></i-amphtml-sizer></amp-img> </div> <ul class="-j"> <li class="-q"><a class="-z" href="https://web.archive.org/web/20211117033346/https://terms-of-use.openjsf.org/" rel="noopener">Terms of Use</a></li> <li class="-q"><a class="-z" href="https://web.archive.org/web/20211117033346/https://privacy-policy.openjsf.org/" rel="noopener">Privacy Policy</a></li> <li class="-q"><a class="-z" href="https://web.archive.org/web/20211117033346/https://www.linuxfoundation.org/cookies" rel="noopener">Cookie Policy</a></li> </ul> </div> <div class="-te"> © <a href="https://web.archive.org/web/20211117033346/https://openjsf.org/">OpenJS Foundation</a> and AMP Project contributors. All rights reserved. The <a href="https://web.archive.org/web/20211117033346/https://openjsf.org/">OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://web.archive.org/web/20211117033346/https://openjsf.org/">OpenJS Foundation</a>, please see our <a href="https://web.archive.org/web/20211117033346/https://trademark-policy.openjsf.org/">Trademark Policy</a> and <a href="https://web.archive.org/web/20211117033346/https://trademark-list.openjsf.org/">Trademark List</a>. Trademarks and logos not indicated on the <a href="https://web.archive.org/web/20211117033346/https://trademark-list.openjsf.org/">list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. <br><br> The services available at <a href="https://web.archive.org/web/20211117033346/https://cdn.ampproject.org/">cdn.ampproject.org</a> are provided by Google and the respective <a href="https://web.archive.org/web/20211117033346/https://policies.google.com/privacy?hl=en">privacy policy</a> applies. </div> </div> </footer> <amp-analytics type="gtag" data-credentials="include" data-block-on-consent class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:1px;height:1px;" i-amphtml-layout="fixed"> <script type="application/json">{"extraUrlParams":{"cd2":"${ampdocHost}"},"requests":{"CWV_EVENT":"${base}?v=1\u0026t=event\u0026tid=${gtag_id}\u0026cid=0\u0026ec=cwv","base":"https://web.archive.org/web/20211117033346/https://google-analytics.com/collect/"},"triggers":{"banner":{"on":"click","selector":"#top-banner","vars":{"event_action":"click","event_category":"other","event_label":"banner","event_name":"banner"}},"cls":{"extraUrlParams":{"cls":"${cumulativeLayoutShift}"},"on":"visible","request":"CWV_EVENT"},"defaultPageview":{"on":"visible","request":"pageview","vars":{"title":"{{title}}"}},"fid":{"extraUrlParams":{"fid":"${firstInputDelay}"},"on":"visible","request":"CWV_EVENT"},"lcp":{"extraUrlParams":{"lcp":"${largestContentfulPaint}"},"on":"visible","request":"CWV_EVENT"},"navigation":{"on":"click","selector":".ap--header a, .ap-o-burger-menu-link","vars":{"event_action":"link","event_category":"other","event_label":"navigation","event_name":"navigation"}},"scrolledEnd":{"on":"scroll","scrollSpec":{"verticalBoundaries":[90]},"vars":{"event_action":"end","event_category":"other","event_label":"scroll","event_name":"scroll"}},"scrolledHalf":{"on":"scroll","scrollSpec":{"verticalBoundaries":[50]},"vars":{"event_action":"half","event_category":"other","event_label":"scroll","event_name":"scroll"}},"searchButton":{"on":"click","selector":"#searchTriggerOpen","vars":{"event_action":"open","event_category":"search","event_label":"search","event_name":"search"}}},"vars":{"config":{"UA-67833617-1":{"groups":"default"}},"gtag_id":"UA-67833617-1"}}</script> </amp-analytics> <amp-geo layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"ISOCountryGroups":{"eu":["preset-eea"],"doubleOptIn":["de","at","no","gr","lu"]}}</script> </amp-geo> <amp-consent id="consent" class="-o i-amphtml-layout-nodisplay" layout="nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"consentInstanceId":"consent","promptUI":"consent-popup","consentRequired":false,"geoOverride":{"eu":{"consentRequired":true}}}</script> <div id="consent-popup" class="consent-popup"> <button type="reset" class="-u" on="tap:consent.dismiss" role="button" tabindex="0" aria-label="Dismiss consent"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/web/20211117033346im_/https://amp.dev/#close"/></svg> </button> <p class="ap-o-consent-text"> We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our <a href="https://web.archive.org/web/20211117033346/https://policies.google.com/technologies/cookies">use of cookies</a> and <a href="https://web.archive.org/web/20211117033346/https://policies.google.com/privacy">privacy policy</a>. </p> <button on="tap:consent.accept" class="ap-a-btn" role="button" aria-label="Accept use of cookies">Got it!</button> </div> </amp-consent> <amp-install-serviceworker src="/web/20211117033346js_/https://amp.dev/serviceworker.js" data-iframe-src="https://web.archive.org/web/20211117033346if_/https://amp.dev/serviceworker.html" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"></amp-install-serviceworker> <style amp-keyframes>@keyframes duepduep{0%{transform:translate(0)}49%{transform:translate(40px)}50%{transform:translate(-40px)}to{transform:translate(0)}}</style></body></html>