Widget:Front page banner

<style>

 .ocp-banner-section {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   position: relative;
   overflow: hidden;
   margin-top: -30px;
   min-height:700px;
   background-color:black;
 }

 .ocp-banner-section video {
   position: absolute;
   left: 50%;
   top: 60%;
   transform: translate(-50%, -60%);
   min-width: 100%;
   min-height: 100%;
   filter:opacity(60%);
 }

 .ocp-banner-text-container {
   position: relative;
   z-index: 100;
   color: white;
   text-align: center;
   max-width: 340px;
 }

 .ocp-banner-title {
   font-size: 3rem;
   font-weight: 300;
   right:10px;
   top:10px;
   color:white;
 }

 .ocp-banner-subtitle {
   font-size: 1rem;
   font-weight: 300;
   max-width: 500px;
   color:white
 }

@media (max-width: 576px) {

.ocp-banner-section { min-height:auto; background-color:white; margin-top: 0px; }

       .ocp-banner-section video{
         display: none;
       }
     }

</style>

       <header>

<img src="/logo/open-csp_2.svg" id="Open CSP Logo" style="height:100px;"/>

The open source content services platform

       </header>

 <video id="hero-vid" autoplay="" loop="" muted>

   Your browser does not support the video tag.
 </video>