<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <meta property="title" content="<%= ampStory.title%>">
  <meta property="og:title" content="<%= ampStory.title%>">
  <% if (ampStory.description) {%>
    <meta property="description" content="<%=ampStory.description%>">
    <meta property="og:description" content="<%=ampStory.description%>">
  <% } %>
  <script async custom-element="amp-video" src=<%=ampVideoPath%>></script>
  <script async src=<%=v0Path%>></script>
  <% snippets.map(snippet => { %>
    <%- Buffer.from(snippet.headCode || '', 'base64').toString() %>
  <% })%>
  <script async custom-element="amp-story" src=<%=ampStoryPath%>></script>
  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  <% if (ampAnimationPath !== null) { %>
    <script async custom-element="amp-animation" src=<%=ampAnimationPath%>></script>
  <% } %>
  <title><%= ampStory.title%></title>
  <link rel="canonical" href="<%=bookendLink || 'http://127.0.0.1:3978/amp'%>" />
  <% if (publisherDetails) { %><link href="<%=publisherDetails.favIconLogo%>" rel="shortcut icon"> <% } %>
  <% include ./fonts/googleFonts.ejs %>
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <style amp-custom>
        <% include ./fonts/custom.ejs %>
        <% if ((ampStory.fromPreview || !v0Path.includes('https')) && !zipExport) { %>
        <% include ./fonts/montserrat.ejs %>
        .drag-item {
            position: absolute;
            top: 50%;
            left: 35%;
            pointer-events: none!important;
        }
        .drag-item-content, .dg-controls {
            pointer-events: auto;
        }

        .guid-lines-container {
            position: absolute;
        }
        .guid-line {
            position: absolute;
            height: 0;
            display: none;
            width: 0;
            z-index: 100;
        }
        .guid-line-x {
            width: 100vw;
            z-index: 100;
            border-top: 1.5px dotted rgba(51, 122, 255, 0.51);
        }
        .guid-line-y {
            height: 100vh;
            z-index: 100;
            border-left: 1.5px dotted rgba(51, 122, 255, 0.51);
        }
        .center-x {
            width: 100vw;
            top: 50vh;
        }
        .center-y {
            left: 50vw;
        }

        <% } %>

        amp-story.single-slide > div {
            display: none;
        }
        amp-story-grid-layer:not(#full-screen) {
            padding: 0;
        }
        .container:not(#full-screen) {
            background-color: #eeeeee;
        }
        amp-img.small-image img {
            object-fit: fill;
        }
        .fullscreen img, .fullscreen video{
            object-fit: cover;
        }
        .text-container {
            position: relative;
            opacity: 1;
        }
        .text-container p {
            white-space: nowrap;
        }

        img {
            object-fit: fill;
            width: 100%;
            height: 100%;
            pointer-events: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            user-select: none;
        }
        amp-img {
            pointer-events: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            user-select: none;
        }

        video {
            object-fit: fill;
        }

        .small-image img {
            width: 100%;
            height: 100%;
        }

        .drag-item {
            position: absolute;
            top: 50%;
            left: 35%;
        }

        .rotate-wrapper {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .single-text div {
            font-family: Montserrat;
            font-weight: 500;
            white-space: nowrap;
            text-rendering: auto;
            line-height: 1;
        }

        .single-text * {
            white-space: pre-wrap;
            word-break: break-word;
            background-color: inherit;
        }

        .layer-border {
            box-shadow: 0 0 2px 2px white;
            outline: 1px solid black;
        }

        .cta-link {
            margin: auto;
            padding: 0.6em 1em;
            font-size: 0.8em;
            font-family: 'Verdana';
            text-decoration: none;
            text-align: center;
            cursor: default;
            transform-origin: center;

            position: absolute;
            left: 50%;
            transform: translateX(-50%);

            bottom: 20%;
            max-width: 35%;
            word-wrap: break-word;
        }

        @media screen and (max-width: 1023px) {
            .single-text {
                font-size: 2.6vw;
            }
            .animate, .cta-link {
                font-size: 3.434vw;
            }
            .rotate-wrapper {
                font-size: 3.434vw;
            }
        }
        @media (max-width: 1023px) {
            @media screen and (min-aspect-ratio: 9/12) {
                .single-text {
                    font-size: 1.46vh ;
                }
                .animate, .cta-link {
                    font-size: 1.94vh;
                }
                amp-story-grid-layer {
                    height: 100vh;
                    margin: auto;
                    width: 56.25vh;
                }
                .rotate-wrapper {
                    font-size: 2vh;
                }
            }

            @media screen and (max-aspect-ratio: 9/20) {
                .single-text {
                    font-size: 2.62vw;
                }
                div.animate, .cta-link {
                    font-size: 3.48vw;
                }
                amp-story-grid-layer {
                    height: 177.69vw;
                    margin: auto;
                    width: 100vw;
                }
            }
        }
        @media screen and (min-width: 1024px) {
            .single-text {
                font-size: 1.55vh;
            }
            div.animate, .cta-link {
                font-size: 2.06vh;
            }
        }
    </style>
  <% if ((ampStory.fromPreview || !v0Path.includes('https')) && !zipExport) { %>
    <link rel="stylesheet" href="/resize-files?path=amp-to-html/dist/style/subjx.css"/>
  <% } %>
</head>
