@font-face {
    font-family: "Weisenhoff Grotesk Light";
    src: url("/Oceanside/fonts/WeissenhofGrotesk-Light.woff2");
    src:  url("/Oceanside/fonts/WeissenhofGrotesk-Light.woff2") format("woff2"), url("/Oceanside/fonts/WeissenhofGrotesk-Light.woff") format("woff");
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: "Weisenhoff Grotesk Medium";
    src: url();
    src:  url("/Oceanside/fonts/WeissenhofGrotesk-Medium.woff2") format("woff2"), url("/Oceanside/fonts/WeissenhofGrotesk-Medium.woff") format("woff");
    font-weight: normal;
    font-style: normal;
  }



.video-wrapper {
        background: #000;
        overflow: hidden;
        position: relative;
        z-index: 1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
}

.video-container {
        position: absolute!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        -webkit-animation-name: title-block-image-fade-in;
        animation-name: title-block-image-fade-in;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-timing-function: 'ease-out';
        animation-timing-function: 'ease-out';
        -webkit-animation-delay: .3s;
        animation-delay: .3s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        background: #000;
        z-index: -1; 
}

.backup-image {
display: none;
position: absolute!important;
top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        -webkit-animation-name: title-block-image-fade-in;
        animation-name: title-block-image-fade-in;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-timing-function: 'ease-out';
        animation-timing-function: 'ease-out';
        -webkit-animation-delay: .3s;
        animation-delay: .3s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        background: #000;
        z-index: -1; 
}


@media only screen and (max-width: 767.99px){           
    .main-vid{
    display: none;
  }

  .backup-image {
    display: block;
    position: absolute!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        -webkit-animation-name: title-block-image-fade-in;
        animation-name: title-block-image-fade-in;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-timing-function: 'ease-out';
        animation-timing-function: 'ease-out';
        -webkit-animation-delay: .3s;
        animation-delay: .3s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        background: rgb(51, 62, 72);
        z-index: -1; 
        height: 100% !important;
  }
}

.video-fit {
    height: 100%;
    overflow: hidden;
    object-fit: cover;
}

.l-container {
        box-sizing: border-box;
        margin: 0 auto;
        max-width: 1480px;
        height: 600px;
        padding: 0;
}

@media screen and (max-width: 767.99px)
{ .l-container-content {
    padding-top: 60px;
    padding-bottom: 60px;}
    .l-container-content .a-heading {
    -webkit-animation-name: title-block-heading;
    animation-name: title-block-heading;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    color: white;
    font-size:40px;
    text-align: left !important;
    }
    .l-container-content .text {
        font-size:22px;
        -webkit-animation-name: title-block-text;
    animation-name: title-block-text;
    -webkit-animation-duration: 2s;
    font-family: "Weisenhoff Grotesk Light";
    text-align: left !important;
    animation-duration: 2s;
    margin: 1em 0 0;
    color: white;
    }
}

@media screen and (min-width: 768px) {
.l-container-content {
    padding: 150px 16px;
    }
    .l-container-content .a-heading {
        -webkit-animation-name: title-block-heading;
        animation-name: title-block-heading;
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
        color: white;
        font-size:52px;
        padding-left: 48px;
    text-align: left !important;}
        .l-container-content .text {
            font-size:28px;
            -webkit-animation-name: title-block-text;
            font-family: "Weisenhoff Grotesk Light";
        animation-name: title-block-text;
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
        margin: 1em 0 0;
        color: white;
        padding-left: 48px;
        }
}









/*! CSS Used keyframes */
@-webkit-keyframes title-block-image-fade-in{0%{opacity:0;}100%{opacity:1;}}
@keyframes title-block-image-fade-in{0%{opacity:0;}100%{opacity:1;}}
@-webkit-keyframes title-block-heading{0%,40%{-webkit-transform:translateY(20px);transform:translateY(20px);opacity:0;}80%,100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1;}}
@keyframes title-block-heading{0%,40%{-webkit-transform:translateY(20px);transform:translateY(20px);opacity:0;}80%,100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1;}}
@-webkit-keyframes title-block-text{0%,60%{-webkit-transform:translateY(20px);transform:translateY(20px);opacity:0;}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1;}}
@keyframes title-block-text{0%,60%{-webkit-transform:translateY(20px);transform:translateY(20px);opacity:0;}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1;}}