CINXE.COM

<!doctype html><html lang="en" amp i-amphtml-binding i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="preload" href="/static/fonts/poppins-v5-latin-700.woff2" as="font" crossorigin><link rel="preload" href="/static/fonts/noto-sans-v7-latin-700.woff2" as="font" crossorigin><meta name="theme-color" content="#005af0"><meta name="description" content="AMP is a simple and robust format to ensure your website is fast, user-first, and makes money. AMP provides long-term success for your web strategy with distribution across ..."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:description" content="AMP is a simple and robust format to ensure your website is fast, user-first, and makes money. AMP provides long-term success for your web strategy with distribution across ..."><meta name="twitter:title" content="AMP Websites"><meta name="twitter:creator" content="@ampproject"><meta name="twitter:site" content="@ampproject"><meta name="twitter:image" content="https://amp.dev/static/img/sharing/about-websites-600x314.png"><meta property="og:title" content="AMP Websites"><meta property="og:url" content="https://amp.dev/about/websites-2021/"><meta property="og:image" content="https://amp.dev/static/img/sharing/about-websites-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="012502032353000">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,.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}amp-story{visibility:hidden!important}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://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script><script async src="https://cdn.ampproject.org/v0/amp-accordion-0.1.mjs" custom-element="amp-accordion" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js" crossorigin="anonymous" custom-element="amp-accordion"></script><script async src="https://cdn.ampproject.org/v0/amp-analytics-0.1.mjs" custom-element="amp-analytics" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" crossorigin="anonymous" custom-element="amp-analytics"></script><script async src="https://cdn.ampproject.org/v0/amp-animation-0.1.mjs" custom-element="amp-animation" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-animation-0.1.js" crossorigin="anonymous" custom-element="amp-animation"></script><script async src="https://cdn.ampproject.org/v0/amp-autocomplete-0.1.mjs" custom-element="amp-autocomplete" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js" crossorigin="anonymous" custom-element="amp-autocomplete"></script><script async src="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://cdn.ampproject.org/v0/amp-base-carousel-0.1.js" crossorigin="anonymous" custom-element="amp-base-carousel"></script><script async src="https://cdn.ampproject.org/v0/amp-bind-0.1.mjs" custom-element="amp-bind" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" crossorigin="anonymous" custom-element="amp-bind"></script><script async src="https://cdn.ampproject.org/v0/amp-carousel-0.1.mjs" custom-element="amp-carousel" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" crossorigin="anonymous" custom-element="amp-carousel"></script><script async src="https://cdn.ampproject.org/v0/amp-consent-0.1.mjs" custom-element="amp-consent" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-consent-0.1.js" crossorigin="anonymous" custom-element="amp-consent"></script><script async src="https://cdn.ampproject.org/v0/amp-form-0.1.mjs" custom-element="amp-form" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-form-0.1.js" crossorigin="anonymous" custom-element="amp-form"></script><script async src="https://cdn.ampproject.org/v0/amp-geo-0.1.mjs" custom-element="amp-geo" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-geo-0.1.js" crossorigin="anonymous" custom-element="amp-geo"></script><script async src="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://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js" crossorigin="anonymous" custom-element="amp-install-serviceworker"></script><script async src="https://cdn.ampproject.org/v0/amp-selector-0.1.mjs" custom-element="amp-selector" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-selector-0.1.js" crossorigin="anonymous" custom-element="amp-selector"></script><link rel="shortcut icon" href="/static/img/favicon.png"><link rel="canonical" href="https://amp.dev/about/websites-2021/"><link rel="alternate" hreflang="x-default" href="https://amp.dev/about/websites-2021/"><link rel="alternate" hreflang="de" href="https://amp.dev/de/about/websites-2021/"><link rel="alternate" hreflang="fr" href="https://amp.dev/fr/about/websites-2021/"><link rel="alternate" hreflang="ar" href="https://amp.dev/ar/about/websites-2021/"><link rel="alternate" hreflang="es" href="https://amp.dev/es/about/websites-2021/"><link rel="alternate" hreflang="it" href="https://amp.dev/it/about/websites-2021/"><link rel="alternate" hreflang="id" href="https://amp.dev/id/about/websites-2021/"><link rel="alternate" hreflang="ja" href="https://amp.dev/ja/about/websites-2021/"><link rel="alternate" hreflang="ko" href="https://amp.dev/ko/about/websites-2021/"><link rel="alternate" hreflang="pt_BR" href="https://amp.dev/pt_br/about/websites-2021/"><link rel="alternate" hreflang="ru" href="https://amp.dev/ru/about/websites-2021/"><link rel="alternate" hreflang="tr" href="https://amp.dev/tr/about/websites-2021/"><link rel="alternate" hreflang="zh_CN" href="https://amp.dev/zh_cn/about/websites-2021/"><link rel="alternate" hreflang="pl" href="https://amp.dev/pl/about/websites-2021/"><link rel="alternate" hreflang="vi" href="https://amp.dev/vi/about/websites-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://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff2) format("woff2"),url(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://amp.dev/static/fonts/noto-sans-v7-latin-700.woff2) format("woff2"),url(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://amp.dev/static/fonts/poppins-v5-latin-700.woff2) format("woff2"),url(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://amp.dev/static/fonts/fira-mono-v7-latin-500.woff2) format("woff2"),url(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}.-tw{font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#000}@media(min-width:1024px){.-tw{font-size:1rem}}.-tx{line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem}@media(min-width:1024px){.-tx{font-size:.875rem}}.-tx.active{text-decoration:underline}.-tw:hover{color:#005af0}.-tw.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(#gradient-websites) #000}.ap-o-header-flyout-primary-item-link-icon.stories{fill:url(#gradient-stories) #000}.ap-o-header-flyout-primary-item-link-icon.ads{fill:url(#gradient-ads) #000}.ap-o-header-flyout-primary-item-link-icon.email{fill:url(#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){margin-left:0;margin-top:-10%;--size:160px}@media(min-width:1024px){.ap-pie-charts-chart:nth-child(2n){margin-top:-5%;--size:240px}}.ap-pie-charts-chart-clip{height:var(--size);left:0;position:absolute;top:0;width:var(--size);clip:rect(0,var(--size),var(--size),calc(var(--size)/2));transform:rotate(var(--rotation))}.ap-pie-charts-chart-clip:first-child{transform:rotate(0)}.ap-pie-charts-chart-part{height:var(--size);position:absolute;width:var(--size);clip:rect(0,calc(var(--size)/2),var(--size),0);background:#005af0;border-radius:50%;transform:rotate(var(--rotation))}.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(#highlight-stripes);content:"";flex:1 0 auto;max-width:1920px;transform:skewY(-4.5deg);width:100vw}.ap-header{display:grid;grid-template-columns:repeat(24,1fr);grid-gap:15px;background:#fff;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(#gradient-websites) #000}.stories .ap-header-flyout-item-link-icon svg{fill:url(#gradient-stories) #000}.ads .ap-header-flyout-item-link-icon svg{fill:url(#gradient-ads) #000}.email .ap-header-flyout-item-link-icon svg{fill:url(#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{display:inline;height:1em;margin-right:5px;width:.9em;fill:currentColor}.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' fill='%2320202A' viewBox='0 0 64 64'%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{left:calc(90vw - 18px);margin:0;padding:12px;position:fixed;top:35px;fill:#fff;background:#005af0;border-radius:50%;box-shadow:0 6px 10px 0 rgba(0,0,0,.14);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}.-tk{--spacing:50px;display:grid;grid-template-columns:repeat(24,1fr);position:relative;grid-gap:15px;color:#fff;grid-column:1/-1;padding:var(--spacing) 0}@media(min-width:768px){.-tk{--spacing:100px}}.-tk: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%}.-tk:before svg{fill:currentColor}@media(min-width:768px){.-tk:before{height:calc(100% - var(--spacing))}}.-t_,.-tj,.-tq{position:relative;z-index:1}.-tq{grid-column:2/24;margin-bottom:var(--spacing)}@media(min-width:768px){.-tq{grid-column:2/span 11;grid-row:1}}.-tq p{color:inherit}.-tj{align-self:flex-end;grid-column:1/-1;grid-row:1;margin-bottom:var(--spacing);overflow:hidden;padding-bottom:105%;z-index:0}.-tj amp-img img{object-fit:cover}@media(min-width:768px){.-tj{height:669px;margin-bottom:calc(var(--spacing)*-1);padding-bottom:unset;padding-top:var(--spacing);top:20%;width:1100px}}@media(min-width:1024px){.-tj{grid-column:6/-1;top:0}}@media(min-width:1280px){.-tj{grid-column:9/-1}}@media(min-width:1680px){.-tj{grid-column:11/-1}}.-t_{display:none}@media(min-width:1024px){.-t_{align-self:center;display:block;grid-column:14/-1;grid-row:1}}.-t_ amp-img,.-t_ svg{width:100%}.-t_ svg{height:100%}@media(min-width:1024px){.-t_{margin-top:-25%}.-t_ svg{height:auto;width:auto}}@media(min-width:1280px){.-t_{grid-column:14/span 8}}.-tk .ap-button{margin-top:50px}.ap-center-stage{--spacing:50px;display:grid;grid-template-columns:repeat(24,1fr);position:relative;grid-gap:15px;background:linear-gradient(180deg,#00dcc0 -45%,#005af0 161%);color:#fff;grid-column:1/-1;padding:var(--spacing) 0}@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{display:grid;grid-column:1/-1;grid-template-columns:repeat(24,1fr);position:relative;grid-gap:15px}.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{display:grid;grid-column:2/span 22;position:relative;z-index:1;grid-gap:15px;grid-template-columns:repeat(2,1fr);margin:0 auto;max-width:1440px}@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}.-tz{--spacing:50px;display:grid;grid-template-columns:repeat(24,1fr);position:relative;grid-gap:15px;color:#20202a;grid-column:1/-1;margin:0 auto;max-width:1440px;padding:var(--spacing) 0;text-align:center}@media(min-width:1024px){.-tz{--spacing:100px;padding:var(--spacing) 0 60px;text-align:left}}.-ne{grid-column:2/24}@media(min-width:768px){.-ne{grid-column:4/22}}@media(min-width:1024px){.-ne{grid-column:2/16;grid-row:1}}@media(min-width:1280px){.-ne{grid-column:3/15}}.-nt{align-items:center;display:flex;grid-column:1/-1;justify-content:center}.-nt svg{height:52vw;max-height:194px;max-width:194px;width:52vw}@media(min-width:1024px){.-nt{grid-column:16/24;grid-row:1}.-nt svg{max-height:341px;max-width:341px;position:absolute}}@media(min-width:1280px){.-nt{grid-column:15/-1}.-nt 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{flex-direction:row;flex-wrap:wrap;grid-gap:10px;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(#gradient-websites) #000}.ap-formats-navigation-icon.active.stories{fill:url(#gradient-stories) #000}.ap-formats-navigation-icon.active.ads{fill:url(#gradient-ads) #000}.ap-formats-navigation-icon.active.email{fill:url(#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%}.-nn{--spacing:43px;display:grid;grid-template-columns:repeat(24,1fr);position:relative;grid-gap:15px;grid-row-gap:unset;grid-column:1/-1;max-width:1440px}.-nn:last-child{margin-bottom:100px}@media(max-width:767px){.-nn .-nr:first-child{padding-left:15px}.-nn .-nr:last-child{padding-right:15px}}@media(min-width:768px){.-nn{grid-gap:22px;margin:0 auto;padding:0 15px}.-nn:last-child{margin-bottom:200px}}.-nn.--news .-ni{min-height:438px}.-nn.--success-stories .-ni{min-height:493px}.-ns{grid-column:1/-1;grid-row:1}.-no{display:none;left:0}.-no.--prev{grid-column:1}.-no.--next{grid-column-end:-1}.-no>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){.-no>button.amp-carousel-button{background-size:18px 18px}}@media(min-width:1280px){.-no>button.amp-carousel-button{background-size:28px 28px}}.-no>button.amp-carousel-button:hover{box-shadow:0 5px 10px 0 rgba(0,0,0,.1)}.-no>button.amp-carousel-button-prev{transform:scaleX(-1)}.-no>button.amp-carousel-button-next,.-no>button.amp-carousel-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23005af0' 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.24 2.24 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.27 2.27 0 0 0 0-3.203z'/%3E%3C/svg%3E")}@media(min-width:768px){.-no{align-self:center;display:initial;grid-row:1;position:relative}}.-nu{grid-column:1/-1;grid-row:2;margin:0 auto}@media(min-width:768px){.-nu{display:none}}.-na{background-color:#e2e5e6;border-radius:50%;display:inline-block;height:10px;margin:0 5px;width:10px}.-na:first-child{margin-left:0}.-na:last-child{margin-right:0}.-na[option][selected]{outline:none}.-na[selected]{background:linear-gradient(225deg,#00dcc0,#005af0 75%);color:#fff}.-na[selected] svg{fill:currentColor}@media(min-width:768px){.-ns{padding:0 var(--spacing)}.-nn .-nr{padding-bottom:25px}.-nn .-nr:nth-child(3n+1){align-items:center}.-nn .-nr:nth-child(3n+2){align-items:flex-end}.-nn .-nr:nth-child(3n+3){align-items:flex-start}}@media(min-width:1024px){.-nn{--spacing:47px}}@media(min-width:1280px){.-nn{--spacing:68px}}.-nr{align-items:center;display:flex;justify-content:center}.-ni{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){.-ni{max-width:calc(100% - 30px)}}.-ni:focus,.-ni:focus-within,.-ni:hover{box-shadow:0 5px 10px 0 rgba(0,0,0,.1);transform:translateY(-.125em)}.-nf{align-items:center;display:flex;padding:10px 30px}.-nl{height:26px;margin-right:10px;width:26px}.-nc{filter:brightness(97%);height:220px;position:relative}.-nc amp-img img{object-fit:cover}.-nh{height:40px;margin:5px 0 10px;position:relative}.-nh amp-img img{object-fit:contain;object-position:left center}.-np{display:flex;flex-direction:column;flex-grow:2;padding:20px 30px}.-nd{flex-grow:2}.-nv{color:#48525c;font-size:14px;font-weight:400;text-transform:capitalize}.-nm{align-items:center;display:flex;height:100%;justify-content:center;padding:calc(28.125% - 2em) 0;width:100%}.-ni .ap-a-ico{box-sizing:initial;display:flex;font-size:medium;height:4em;justify-content:center;width:4em}.-ng{color:#20202a;margin-bottom:36px}.-ng h1{margin-bottom:20px}.-ng p{margin-bottom:40px}.-ng .-s{border-bottom:none}@media(min-width:1024px){.-ng{margin-bottom:1.5em}}.ap-components-showcase{height:100%;position:relative}.ap-components-showcase-buttons{display:grid;grid-template-columns:repeat(1,1fr);grid-gap:.625rem;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 fill='%2348525C' fill-rule='evenodd' 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.876s-.124.644-.348.876a1.087 1.087 0 0 1-1.579 0L8 6.155z'/%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;display:grid;grid-template-columns:repeat(24,1fr);position:relative;grid-gap:15px;color:#20202a;grid-column:2/24;padding:var(--spacing) 0}@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{display:grid;grid-column:2/-1;grid-template-columns:40px 1fr 30px;position:relative;grid-row-gap:20px;color:#20202a}@media(min-width:1024px){.ap-text-aside{grid-column:3/-1;grid-template-columns:repeat(2,1fr);grid-column-gap:60px}}@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.24 2.24 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.27 2.27 0 0 0 0-3.203z'/%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.24 2.24 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.27 2.27 0 0 0 0-3.203z'/%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.571'/%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.571'/%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' fill='%23fff' 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.24 2.24 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.27 2.27 0 0 0 0-3.203z'/%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' fill='%23fff' 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.571'/%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{display:grid;grid-template-columns:repeat(24,1fr);grid-gap:15px;margin:0 auto;padding:0;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@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 Websites - amp.dev</title><script type="application/ld+json">{"@context":"http://schema.org","@type":"Webpage","url":"https://amp.dev/about/websites-2021/ ","name":"amp.dev","headline":"AMP Websites","description":"AMP is a simple and robust format to ensure your website is fast, user-first, and makes money. AMP provides long-term success for your web strategy with distribution across ...","mainEntityOfPage":{"@type":"WebPage","@id":"https://amp.dev"},"publisher":{"@type":"Organization","name":"AMP Project","logo":{"url":"https://amp.dev/static/img/icons/icon-512x512.png","width":512,"height":512,"@type":"ImageObject"}},"image":{"@type":"ImageObject","url":"https://amp.dev/static/img/sharing/about-websites-600x314.png","width":600,"height":314}}</script><link rel="manifest" href="/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="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="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="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="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="/"> <svg class="ap-header-home-logo"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#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 active" 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="#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="/about/websites/"> <div class="ap-header-flyout-item-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#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="/about/stories/"> <div class="ap-header-flyout-item-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#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="/about/ads/"> <div class="ap-header-flyout-item-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#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="/about/email/"> <div class="ap-header-flyout-item-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#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="/about/how-amp-works/">How AMP works</a> </li> <li class="ap-header-flyout-item --secondary"> <a class="ap-header-flyout-item-title" href="/about/mission-and-vision/">Vision & Mission</a> </li> <li class="ap-header-flyout-item --secondary"> <a class="ap-header-flyout-item-title" href="/about/use-cases/">Use cases</a> </li> <li class="ap-header-flyout-item --secondary"> <a class="ap-header-flyout-item-title" href="/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="#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="/documentation/">Get Started</a> </li> <li class="ap-header-flyout-item --primary "> <a class="ap-header-flyout-item-link" href="/documentation/guides-and-tutorials/"> <div class="ap-header-flyout-item-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#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="/documentation/components/"> <div class="ap-header-flyout-item-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#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="/documentation/examples/"> <div class="ap-header-flyout-item-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#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="/documentation/courses/"> <div class="ap-header-flyout-item-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#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="/documentation/templates/"> <div class="ap-header-flyout-item-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#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="/documentation/tools/"> <div class="ap-header-flyout-item-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#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="#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="/documentation/guides-and-tutorials/contribute/">Contribute</a> </li> <li class="ap-header-flyout-item --secondary"> <a class="ap-header-flyout-item-title" href="/community/roadmap/">Roadmap</a> </li> <li class="ap-header-flyout-item --secondary"> <a class="ap-header-flyout-item-title" href="/community/governance/">Governance</a> </li> <li class="ap-header-flyout-item --secondary"> <a class="ap-header-flyout-item-title" href="/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="#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="/events/amp-fest-2020/">AMP Fest 2020</a> </li> <li class="ap-header-flyout-item --secondary"> <a class="ap-header-flyout-item-title" href="/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://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="#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="/support/">Help</a> </li> <li class="ap-header-flyout-item --secondary"> <a class="ap-header-flyout-item-title" href="/support/faq/">FAQ</a> </li> </ul> </div> </nav> <div class="ap-language-selector"> <select on="change:AMP.navigateTo(url=event.value)"> <option value="/about/websites-2021/" selected> EN </option> <option value="/de/about/websites-2021/"> DE </option> <option value="/fr/about/websites-2021/"> FR </option> <option value="/ar/about/websites-2021/"> AR </option> <option value="/es/about/websites-2021/"> ES </option> <option value="/it/about/websites-2021/"> IT </option> <option value="/id/about/websites-2021/"> ID </option> <option value="/ja/about/websites-2021/"> JA </option> <option value="/ko/about/websites-2021/"> KO </option> <option value="/pt_br/about/websites-2021/"> PT </option> <option value="/ru/about/websites-2021/"> RU </option> <option value="/tr/about/websites-2021/"> TR </option> <option value="/zh_cn/about/websites-2021/"> ZH </option> <option value="/pl/about/websites-2021/"> PL </option> <option value="/vi/about/websites-2021/"> VI </option> </select> </div> <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="#menu"/></svg> </div> </button> </div> </header> <main> <section class="-tk"> <div class="-tq"> <div class="ap-text-block"> <h2>AMP Websites</h2> <h1>A framework that amplifies page experience.</h1> <p class="ap-p-large"> AMP is a simple and robust web components framework that makes it easy to build fast websites that are user-first and make money. AMP provides long-term success for your web strategy with distribution across popular platforms and reduced operating costs. </p> <a class="ap-button --inverted" href="/documentation/"> Get started with AMP </a> </div> </div> <div class="-t_"> <svg width="457" height="457"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/frontend/sprite.svg#deco-foundation"/> </svg> </div> <div class="-tj"> <amp-img data-hero src="/static/img/about/websites-amp-sidebar.png" layout="fill" alt="A screenshot showing amp-sidebar." i-amphtml-ssr class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"><img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" alt="A screenshot showing amp-sidebar." src="/static/img/about/websites-amp-sidebar.png"></amp-img> </div> </section> <section class="ap-section --offset"> <div class="ap-text-block"> <h2 class="ap-h1">Grab-and-go components</h2> </div> <div class="ap-text-media --thirds"> <div class="ap-text-media-col"> <div class="ap-text-block"> <p> Quickly build pages with AMP’s extensive component library. These components are copy-and-pastable and meet a wide range of UI and functionality needs. They are customizable in behavior and style through attributes and CSS. Best of all, they have a team of engineers working full-time behind the scenes to guarantee a great performance. </p> </div> <a class="ap-link --internal --square" href="/documentation/components/"> <span class="ap-link-text">See the full component library</span> </a> <p> Want just the components without the AMP ecosystem? <a href="https://bentojs.dev/get-started/">Check out Bento AMP</a>! </p> </div> <div class="ap-text-media-col"> <article class="ap-components-showcase"> <div class="ap-components-showcase-buttons" role="list"> <button [class]="[componentsShowcase] == 'carousel' ? 'ap-button' : 'ap-button --inactive' " on="tap:AMP.setState({componentsShowcase: 'carousel' })" class="ap-button" i-amphtml-binding>Carousel</button> <button [class]="[componentsShowcase] == 'animation' ? 'ap-button' : 'ap-button --inactive'" on="tap:AMP.setState({componentsShowcase: 'animation' })" class="ap-button --inactive" i-amphtml-binding>Animation</button> <button [class]="[componentsShowcase] == 'accordion' ? 'ap-button' : 'ap-button --inactive'" on="tap:AMP.setState({componentsShowcase: 'accordion' })" class="ap-button --inactive" i-amphtml-binding>Accordion</button> <button [class]="[componentsShowcase] == 'autocomplete' ? 'ap-button' : 'ap-button --inactive'" on="tap:AMP.setState({componentsShowcase: 'autocomplete' })" class="ap-button --inactive" i-amphtml-binding>Autocomplete</button> </div> <div class="ap-components-showcase-demos"> <div [class]="componentsShowcase == 'carousel' ? 'ap-components-showcase-demo --carousel show' : 'ap-components-showcase-demo hide' " class="ap-components-showcase-demo show" i-amphtml-binding> <div class="ap-components-showcase-demo-code" title="amp-carousel"> <div class="ap-code-snippet"> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-carousel</span> <span class="na">layout</span><span class="o">=</span><span class="s">"fill"</span> <span class="na">type</span><span class="o">=</span><span class="s">"slides"</span> <span class="na">role</span><span class="o">=</span><span class="s">"region"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Basic carousel"</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/inline-examples/images/image1.jpg"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"fill"</span><span class="p">></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/inline-examples/images/image2.jpg"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"fill"</span><span class="p">></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/inline-examples/images/image3.jpg"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"fill"</span><span class="p">></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-carousel</span><span class="p">></span> </code></pre></div> </div> <a href="/documentation/components/{format}/amp-carousel/" class="-n grap-lnk"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All about this component</span> </a> </div> <div class="ap-components-showcase-demo-ui --carousel" title="<amp-carousel>"> <amp-carousel layout="fill" type="slides" role="region" aria-label="Basic carousel" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> <amp-img src="/static/inline-examples/images/image1.jpg" layout="fill" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"></amp-img> <amp-img src="/static/inline-examples/images/image2.jpg" layout="fill" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"></amp-img> <amp-img src="/static/inline-examples/images/image3.jpg" layout="fill" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"></amp-img> </amp-carousel> </div> </div> <div [class]="componentsShowcase == 'animation' ? 'ap-components-showcase-demo --animation show' : 'ap-components-showcase-demo hide' " class="ap-components-showcase-demo hide" i-amphtml-binding> <div class="ap-components-showcase-demo-code" title="amp-animation"> <div class="ap-code-snippet"> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"scale-image-window"</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">id</span><span class="o">=</span><span class="s">"animatedImage"</span> <span class="na">width</span><span class="o">=</span><span class="s">"450"</span> <span class="na">height</span><span class="o">=</span><span class="s">"300"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"responsive"</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/samples/img/elephant.jpg"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"Picture of an elephant"</span><span class="p">></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:scaleUpAnimation.restart"</span> <span class="na">class</span><span class="o">=</span><span class="s">"ap-button anim-button"</span><span class="p">></span>Click to scale up the image'<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-animation</span> <span class="na">id</span><span class="o">=</span><span class="s">"scaleUpAnimation"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"nodisplay"</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/json"</span><span class="p">></span> <span class="p">{</span> <span class="s2">"duration"</span><span class="o">:</span> <span class="s2">"0.5s"</span><span class="p">,</span> <span class="s2">"fill"</span><span class="o">:</span> <span class="s2">"both"</span><span class="p">,</span> <span class="s2">"direction"</span><span class="o">:</span> <span class="s2">"normal"</span><span class="p">,</span> <span class="s2">"animations"</span><span class="o">:</span> <span class="p">[</span> <span class="p">{</span> <span class="s2">"selector"</span><span class="o">:</span> <span class="s2">"#animatedImage"</span><span class="p">,</span> <span class="s2">"keyframes"</span><span class="o">:</span> <span class="p">[</span> <span class="p">{</span> <span class="s2">"transform"</span><span class="o">:</span> <span class="s2">"scale(1)"</span> <span class="p">},</span> <span class="p">{</span> <span class="s2">"transform"</span><span class="o">:</span> <span class="s2">"scale(1.2)"</span> <span class="p">},</span> <span class="p">{</span> <span class="s2">"transform"</span><span class="o">:</span> <span class="s2">"scale(1)"</span> <span class="p">}</span> <span class="p">]</span> <span class="p">}</span> <span class="p">]</span> <span class="p">}</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-animation</span><span class="p">></span> </code></pre></div> </div> <a href="/documentation/components/{format}/amp-animation/" class="-n grap-lnk"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All about this component</span> </a> </div> <div class="ap-components-showcase-demo-ui --animation" title="<amp-animation>"> <div class="scale-image-window"> <amp-img id="animatedImage" width="450" height="300" layout="responsive" src="/static/samples/img/elephant.jpg" alt="Picture of an elephant" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:66.6667%"></i-amphtml-sizer></amp-img> </div> <button on="tap:scaleUpAnimation.restart" class="ap-button anim-button">Click to scale up the image</button> <amp-animation id="scaleUpAnimation" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":"0.5s","fill":"both","direction":"normal","animations":[{"selector":"#animatedImage","keyframes":[{"transform":"scale(1)"},{"transform":"scale(1.2)"},{"transform":"scale(1)"}]}]}</script> </amp-animation> </div> </div> <div [class]="componentsShowcase == 'accordion' ? 'ap-components-showcase-demo --accordion show' : 'ap-components-showcase-demo hide' " class="ap-components-showcase-demo hide" i-amphtml-binding> <div class="ap-components-showcase-demo-code" title="amp-accordion"> <div class="ap-code-snippet"> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-accordion</span> <span class="na">disable-session-states</span><span class="p">></span> <span class="p"><</span><span class="nt">section</span> <span class="na">expanded</span><span class="p">></span> <span class="p"><</span><span class="nt">h2</span><span class="p">></span>Section 1<span class="p"></</span><span class="nt">h2</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Content in section 1.<span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"></</span><span class="nt">section</span><span class="p">></span> <span class="p"><</span><span class="nt">section</span><span class="p">></span> <span class="p"><</span><span class="nt">h2</span><span class="p">></span>Section 2<span class="p"></</span><span class="nt">h2</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Content in section 2.<span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"></</span><span class="nt">section</span><span class="p">></span> <span class="p"><</span><span class="nt">section</span><span class="p">></span> <span class="p"><</span><span class="nt">h2</span><span class="p">></span>Section 3<span class="p"></</span><span class="nt">h2</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Content in section 3.<span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"></</span><span class="nt">section</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-accordion</span><span class="p">></span> </code></pre></div> </div> <a href="/documentation/components/{format}/amp-accordion/" class="-n grap-lnk"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All about this component</span> </a> </div> <div class="ap-components-showcase-demo-ui --accordion" title="<amp-accordion>"> <amp-accordion disable-session-states class="i-amphtml-layout-container" i-amphtml-layout="container"> <section expanded> <h2>Section 1</h2> <p>Content in section 1.</p> </section> <section> <h2>Section 2</h2> <p>Content in section 2.</p> </section> <section> <h2>Section 3</h2> <p>Content in section 3.</p> </section> </amp-accordion> </div> </div> <div [class]="componentsShowcase == 'autocomplete' ? 'ap-components-showcase-demo --autocomplete show' : 'ap-components-showcase-demo hide' " class="ap-components-showcase-demo hide" i-amphtml-binding> <div class="ap-components-showcase-demo-code" title="amp-autocomplete"> <div class="ap-code-snippet"> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-autocomplete</span> <span class="na">filter</span><span class="o">=</span><span class="s">"substring"</span> <span class="na">id</span><span class="o">=</span><span class="s">"myAutocomplete"</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Search for<span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"><</span><span class="nt">form</span> <span class="na">class</span><span class="o">=</span><span class="s">"sample-form"</span> <span class="na">method</span><span class="o">=</span><span class="s">"post"</span> <span class="na">action-xhr</span><span class="o">=</span><span class="s">"https://amp.dev/documentation/examples/api/echo"</span> <span class="na">target</span><span class="o">=</span><span class="s">"_top"</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-autocomplete</span> <span class="na">filter</span><span class="o">=</span><span class="s">"substring"</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/samples/json/amp-autocomplete-cities.json"</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-autocomplete</span><span class="p">></span> <span class="p"></</span><span class="nt">form</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-autocomplete</span><span class="p">></span> </code></pre></div> </div> <a href="/documentation/components/{format}/amp-autocomplete/" class="-n grap-lnk"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All about this component</span> </a> </div> <div class="ap-components-showcase-demo-ui --autocomplete" title="<amp-autocomplete>"> <amp-autocomplete filter="substring" id="myAutocomplete" class="i-amphtml-layout-container" i-amphtml-layout="container"> <p>Search for</p> <form class="sample-form" method="post" action-xhr="https://amp.dev/documentation/examples/api/echo" target="_top"> <amp-autocomplete filter="substring" src="/static/samples/json/amp-autocomplete-cities.json" class="i-amphtml-layout-container" i-amphtml-layout="container"> <input> </amp-autocomplete> </form> </amp-autocomplete> </div> </div> </div> </article> </div> </div> </section> <section class="ap-center-stage"> <div class="ap-center-stage-content"> <h2 class="ap-h2">How AMP works for you</h2> <p class="ap-center-stage-copy ap-p-large"> AMP meets you exactly where you are. Whether you're building a site from scratch, using a CMS or optimizing an in-house solution, AMP can help! AMP’s built-in validation system guides your development process, ensuring your page is performant and user-first. AMP comes with built-in accessibility and compatibility across browsers. </p> <a class="ap-button --inverted" href="/about/how-amp-works/"> Learn how AMP works </a> </div> </section> <section class="ap-cards"> <div class="ap-cards-grid" role="list"> <div class="ap-cards-item" role="listitem"> <svg class="ap-cards-item-icon" width="30" height="30"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/frontend/sprite.svg#icon-flash"/> </svg> <h3>Lightning Speed</h3> <p>AMP pages load near instantly – across all devices and platforms.</p> </div> <div class="ap-cards-item" role="listitem"> <svg class="ap-cards-item-icon" width="30" height="30"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/frontend/sprite.svg#icon-build"/> </svg> <h3>Easy Building</h3> <p>You can often convert your entire archive in days – especially when using common CMS like WordPress or Drupal.</p> </div> <div class="ap-cards-item" role="listitem"> <svg class="ap-cards-item-icon" width="30" height="30"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/frontend/sprite.svg#icon-flexible"/> </svg> <h3>Maintain flexibility</h3> <p>You can use CSS to customize your styling and dynamic data to fetch the freshest data where needed.</p> </div> <div class="ap-cards-item" role="listitem"> <svg class="ap-cards-item-icon" width="30" height="30"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/frontend/sprite.svg#icon-performance"/> </svg> <h3>Ensure performance</h3> <p>It takes a lot of time and effort to build a great website. AMP components are already optimized for the best performance.</p> </div> <div class="ap-cards-item" role="listitem"> <svg class="ap-cards-item-icon" width="30" height="30"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/frontend/sprite.svg#icon-touch-points"/> </svg> <h3>Various web touch points</h3> <p>Used by global platforms like Google, Bing and Twitter, AMP allows users a native-feeling experience across all platforms by defaulting to AMP pages when available.</p> </div> <div class="ap-cards-item" role="listitem"> <svg class="ap-cards-item-icon" width="30" height="30"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/frontend/sprite.svg#icon-heart"/> </svg> <h3>Open web</h3> <p>The AMP Project is an open source initiative to protect the future of the web by delivering a better, faster and more user-friendly experience.</p> </div> </div> <amp-base-carousel id="cards-carousel" class="ap-cards-carousel i-amphtml-layout-fixed-height i-amphtml-layout-size-defined" role="list" layout="fixed-height" height="350" controls="never" on="slideChange:cards-carousel-pagination.toggle(index=event.index, value=true)" style="height:350px;" i-amphtml-layout="fixed-height"> <div class="ap-cards-item-wrapper"> <div class="ap-cards-item" role="listitem"> <svg class="ap-cards-item-icon" width="30" height="30"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/frontend/sprite.svg#icon-flash"/> </svg> <h3>Lightning Speed</h3> <p>AMP pages load near instantly – across all devices and platforms.</p> </div> </div> <div class="ap-cards-item-wrapper"> <div class="ap-cards-item" role="listitem"> <svg class="ap-cards-item-icon" width="30" height="30"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/frontend/sprite.svg#icon-build"/> </svg> <h3>Easy Building</h3> <p>You can often convert your entire archive in days – especially when using common CMS like WordPress or Drupal.</p> </div> </div> <div class="ap-cards-item-wrapper"> <div class="ap-cards-item" role="listitem"> <svg class="ap-cards-item-icon" width="30" height="30"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/frontend/sprite.svg#icon-flexible"/> </svg> <h3>Maintain flexibility</h3> <p>You can use CSS to customize your styling and dynamic data to fetch the freshest data where needed.</p> </div> </div> <div class="ap-cards-item-wrapper"> <div class="ap-cards-item" role="listitem"> <svg class="ap-cards-item-icon" width="30" height="30"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/frontend/sprite.svg#icon-performance"/> </svg> <h3>Ensure performance</h3> <p>It takes a lot of time and effort to build a great website. AMP components are already optimized for the best performance.</p> </div> </div> <div class="ap-cards-item-wrapper"> <div class="ap-cards-item" role="listitem"> <svg class="ap-cards-item-icon" width="30" height="30"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/frontend/sprite.svg#icon-touch-points"/> </svg> <h3>Various web touch points</h3> <p>Used by global platforms like Google, Bing and Twitter, AMP allows users a native-feeling experience across all platforms by defaulting to AMP pages when available.</p> </div> </div> <div class="ap-cards-item-wrapper"> <div class="ap-cards-item" role="listitem"> <svg class="ap-cards-item-icon" width="30" height="30"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/frontend/sprite.svg#icon-heart"/> </svg> <h3>Open web</h3> <p>The AMP Project is an open source initiative to protect the future of the web by delivering a better, faster and more user-friendly experience.</p> </div> </div> </amp-base-carousel> <amp-selector class="ap-cards-carousel-pagination i-amphtml-layout-container" id="cards-carousel-pagination" layout="container" on="select: cards-carousel.goToSlide(index=event.targetOption)" i-amphtml-layout="container"> <div class="ap-cards-carousel-pagination-item" option="0" selected></div> <div class="ap-cards-carousel-pagination-item" option="1"></div> <div class="ap-cards-carousel-pagination-item" option="2"></div> <div class="ap-cards-carousel-pagination-item" option="3"></div> <div class="ap-cards-carousel-pagination-item" option="4"></div> <div class="ap-cards-carousel-pagination-item" option="5"></div> </amp-selector> </section> <section class="ap-section --offset"> <div class="ap-text-block"> <h2 class="ap-h1">Frameworks and CMSs</h2> </div> <div class="ap-text-media --thirds --center --mobile-reverse"> <div class="ap-text-media-col"> <div class="ap-text-block"> <p> Select a ready-to-go framework or integration-enabled CMS to get an AMP valid site up and running, fast. These platforms give you all the benefits of AMP without all the built-from-scratch hassle. </p> </div> <a class="ap-link --internal --square" href="/support/faq/platform-and-vendor-partners/"> <span class="ap-link-text">See supported platforms</span> </a> </div> <div class="ap-text-media-col"> <figure> <amp-img alt="Supported CMS’ and frameworks" src="/static/img/frameworks.jpg" width="714" height="288" layout="responsive" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:40.3361%"></i-amphtml-sizer> </amp-img> </figure> </div> </div> </section> <section class="ap-section --col-4-23"> <div class="ap-text-media --thirds --center --mobile-reverse"> <div class="ap-text-media-col"> <div class="ap-text-block"> <h2 class="ap-h1">Check out AMP in action</h2> <p>Exemplary websites built with AMP out in the wild.</p> </div> </div> </div> </section> <section class="-nn --success-stories"> <div class="-ns"> <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="/success-stories/washingtonpost/" class="-nr --success-story"> <div class="-ni"> <div class="-nf"> <div class="-nl"> <svg fill="url(#gradient-websites)"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </div> <h6>websites</h6> </div> <div class="-nc"> <amp-img class="i-amphtml-layout-fill i-amphtml-layout-size-defined" src="/static/img/success-stories/washington_post/teaser_washington_post.jpg" layout="fill" alt="Washington Post" i-amphtml-layout="fill"> </amp-img> </div> <div class="-np"> <div class="-nh"> <amp-img src="/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="-nd">AMP helps the Washington Post increase returning users from mobile search by 23%</h4> <div class="-nv">publishers</div> </div> </div> </a><a href="/success-stories/teads/" class="-nr --success-story"> <div class="-ni"> <div class="-nf"> <div class="-nl"> <svg fill="url(#gradient-websites)"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </div> <h6>websites</h6> </div> <div class="-nc"> <amp-img class="i-amphtml-layout-fill i-amphtml-layout-size-defined" src="/static/img/success-stories/teads/teaser_teads.jpg" layout="fill" alt="Teads" i-amphtml-layout="fill"> </amp-img> </div> <div class="-np"> <div class="-nh"> <amp-img src="/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="-nd">Teads brings AMP'd mobile video inventory to nearly 100 publishers</h4> <div class="-nv">advertisers</div> </div> </div> </a><a href="/success-stories/carved/" class="-nr --success-story"> <div class="-ni"> <div class="-nf"> <div class="-nl"> <svg fill="url(#gradient-websites)"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </div> <h6>websites</h6> </div> <div class="-nc"> <amp-img class="i-amphtml-layout-fill i-amphtml-layout-size-defined" src="/static/img/success-stories/carved/teaser_carved.jpg" layout="fill" alt="Carved" i-amphtml-layout="fill"> </amp-img> </div> <div class="-np"> <div class="-nh"> <amp-img src="/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="-nd">Carved increases conversion rate by 75% with AMP and PWA</h4> <div class="-nv">e-commerce</div> </div> </div> </a><a href="/success-stories/wompmobile/" class="-nr --success-story"> <div class="-ni"> <div class="-nf"> <div class="-nl"> <svg fill="url(#gradient-websites)"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </div> <h6>websites</h6> </div> <div class="-nc"> <amp-img class="i-amphtml-layout-fill i-amphtml-layout-size-defined" src="/static/img/success-stories/womp/teaser_wompmobile.jpg" layout="fill" alt="WompMobile" i-amphtml-layout="fill"> </amp-img> </div> <div class="-np"> <div class="-nh"> <amp-img src="/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="-nd">WompMobile consistently improves e-commerce clients’ conversion rates with AMP sites</h4> <div class="-nv">e-commerce</div> </div> </div> </a> <button slot="next-arrow"></button> <button slot="prev-arrow"></button> </amp-base-carousel> </div> <div class="-no --prev"> <button on="tap: success-stories.prev()" class="amp-carousel-button amp-carousel-button-prev" aria-label="Previous"></button> </div> <div class="-no --next"> <button on="tap: success-stories.next()" class="amp-carousel-button amp-carousel-button-next" aria-label="Next"></button> </div> <amp-selector class="-nu 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="-na" option="0" selected></div> <div class="-na" option="1"></div> <div class="-na" option="2"></div> <div class="-na" option="3"></div> </amp-selector> </section> <section class="ap-section --offset"> <div class="ap-text-media"> <div class="ap-text-media-col"> <amp-img alt="AMP Contributors in front of GitHub issues" src="/static/img/about/start-contributing.jpg" width="924" height="656" layout="responsive" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:70.9957%"></i-amphtml-sizer> </amp-img> </div> <div class="ap-text-media-col"> <div class="ap-text-block"> <h2 class="ap-h1">Get involved</h2> <p> AMP is open source! This means it’s built by the community, for the community with the OpenJS foundation. There are many ways to contribute, including implementing features, fixing bugs and writing documentation! </p> </div> <a class="ap-link --internal --square" href="/documentation/guides-and-tutorials/contribute/"> <span class="ap-link-text">Start contributing</span> </a> </div> </div> </section> <section class="ap-center-stage"> <div class="ap-center-stage-content"> <h2 class="ap-h2 ap-center-stage-headline">Get started</h2> <p class="ap-center-stage-copy ap-p-large"> Ready to start building websites with AMP? Click the button below to find step one of your AMP journey! </p> <a class="ap-button --inverted" href="/documentation/"> Get started with AMP </a> </div> </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://twitter.com/AMPhtml" rel="noopener" title="Twitter"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw" rel="noopener" title="YouTube"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#youtube"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://blog.amp.dev/" rel="noopener"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wordpress" title="WordPress"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://github.com/ampproject" title="GitHub"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"/></svg> </a></li> <li class="-p"> <a class="ap-a-ico -d" href="https://stackoverflow.com/questions/tagged/amp-html" rel="noopener" title="Stackoverflow"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#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="/about/websites/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>AMP Framework</a></li> <li class="-b"><a href="/about/use-cases/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Use Cases</a></li> <li class="-b"><a href="/success-stories/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Success stories</a></li> <li class="-b"><a href="/about/how-amp-works/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Functionality</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Docs</h5> <ul class="-y"> <li class="-b"><a href="/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Get Started</a></li> <li class="-b"><a href="/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Guides and Tutorials</a></li> <li class="-b"><a href="/documentation/components/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Components</a></li> <li class="-b"><a href="/documentation/examples/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Examples</a></li> <li class="-b"><a href="/documentation/templates/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Design Templates</a></li> <li class="-b"><a href="/documentation/tools/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Tools</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Community</h5> <ul class="-y"> <li class="-b"><a href="/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="#internal"/></svg></div>Platform and Vendor Partners</a></li> <li class="-b"><a href="/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="#internal"/></svg></div>Contribute</a></li> <li class="-b"><a href="/community/roadmap/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Roadmap</a></li> </ul> <h5 class="-g">OpenJS Foundation</h5> <ul class="-y"> <li class="-b"><a class="-w" href="https://openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>The OpenJS Foundation</a></li> <li class="-b"><a class="-w" href="https://bylaws.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>OpenJS Foundation Bylaws</a></li> <li class="-b"><a class="-w" href="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="#internal"/></svg></div>Trademark Policy</a></li> <li class="-b"><a class="-w" href="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="#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://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="#internal"/></svg></div>AMP Conf 2020</a></li> <li class="-b"><a href="/events/amp-cs-2019/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#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="/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="#download"/></svg></div>Styleguide</a></li> <li class="-b"><a href="/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="#download"/></svg></div>Logos</a></li> </ul> </div> </div> <div class="-k"> <div class="-_"> <amp-img src="/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 slot="i-amphtml-svc" style="display:block;padding-top:31.746%"></i-amphtml-sizer></amp-img> </div> <ul class="-j"> <li class="-q"><a class="-z" href="https://terms-of-use.openjsf.org" rel="noopener">Terms of Use</a></li> <li class="-q"><a class="-z" href="https://privacy-policy.openjsf.org" rel="noopener">Privacy Policy</a></li> <li class="-q"><a class="-z" href="https://www.linuxfoundation.org/cookies" rel="noopener">Cookie Policy</a></li> </ul> </div> <div class="-te"> © <a href="https://openjsf.org">OpenJS Foundation</a> and AMP Project contributors. All rights reserved. The <a href="https://openjsf.org">OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org">OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org">Trademark Policy</a> and <a href="https://trademark-list.openjsf.org">Trademark List</a>. Trademarks and logos not indicated on the <a href="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://cdn.ampproject.org">cdn.ampproject.org</a> are provided by Google and the respective <a href="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://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":{"G-TYM9BH1XCX":{"groups":"default"}},"gtag_id":"G-TYM9BH1XCX"}}</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="#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://policies.google.com/technologies/cookies">use of cookies</a> and <a href="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="/serviceworker.js" data-iframe-src="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>