.homeanimation-canvas { width: 100%; height: 350px; padding: 0; margin: -40px 0 0 0; } .vidContain { width: 100%; min-height: 400px; position: relative; display: inline-block; overflow: hidden; background-image: url("/vid/head-video-frame1.jpeg"); background-size: cover; } .vid { position: absolute; bottom: 0; width: 100%; height: 100%; z-index: -1; background-size: cover; } .action-btn { border: 2px solid #81a966; padding: 10px 30px; letter-spacing: 1px; text-transform: uppercase; } .action-btn:hover { border-color: #5f8943; } @media (max-height: 630px) and (min-width: 768px) { .vidContain { height: 360px; } } @media (max-height: 630px) and (min-width: 992px) { .vidContain { height: 360px; } .homeanimation-canvas { margin: -140px 0 0 0; background: transparent; } .vid { top: -100px; } } @media (min-width: 992px) { .homeanimation-canvas { margin: -180px 0 0 0; } .vid { top: -150px; } } @media (min-width: 1200px) and (min-height: 910px) { .vidContain { } .homeanimation-canvas { margin: -100px 0 0 0; } .vid { } } @media (max-width: 768px) { .vid { right: -100px; } .head-video { height: 100%; } } @media (max-width: 668px) { .vid { right: -200px; } } @media (max-width: 568px) { .vid { right: -280px; } } .head-video { min-width: 100%; width: auto; height: auto; min-height: 400px; z-index: 0; } .head-video-overlay { height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.43); z-index: 1; display: inline-block; color: #fff; }