<link rel="import" href="/components/iron-flex-layout/iron-flex-layout.html">
<dom-module id="part-jumbotron">
  <template>
    <style>
      :host {
        display: block;
        width: 100%;
        height: auto;
        position: relative;
      }

      #background {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        @apply(--jumbotron-background);
      }

      #overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: 0.25;
        @apply(--jumbotron-overlay);
      }

      #content {
        display: flex;
        position: absolute;
        width: 100%;
        height: 100%;
        @apply(--jumbotron-content);
      }

    </style>

    <div id="background">
      <div id="overlay"></div>
      <div id="content">
        <content></content>
      </div>
    </div>

  </template>
</dom-module>

<script>
  Polymer({

    is: 'part-jumbotron'

  });
</script>