/* ============================================================================= GENERAL STYLES ========================================================================== */ body { background-color: white; color: #333333; background-color: #0c0c0c; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 1.5; margin: 0; padding: 0; } h1 { font-size: 24px; color: #ddd; margin: 80px auto 0 auto; padding: 0 0px; line-height: 38px; } .section { text-align: center; overflow: hidden; } .bgimage { position: absolute; right: 0; bottom: 0; top: 0; right: 0; width: 100%; height: 100%; background-size: 100% 100%; background-color: black; /* in case the video doesn't fit the whole page*/ background-position: center center; background-size: contain; object-fit: cover; /*cover video background */ z-index: 3; } .logo { height: 130px; width: 100%; } /* Layer with position absolute in order to have it over the video */ .layer { position: absolute; z-index: 4; width: 100%; left: 0; top: 30%; padding: 0 40px; /* Preventing flicker on some browsers See http://stackoverflow.com/a/36671466/1081396 */ -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* ============================================================================= RESPONSIVE CSS ========================================================================== */ /***************** 1200px *****************/ @media (max-width: 1200px) {} /***************** 1100px *****************/ @media (max-width: 1100px) {} /***************** 991px *****************/ @media (max-width: 991px) {} /***************** 768px *****************/ @media (max-width: 768px) {} /***************** 767px *****************/ @media (max-width: 767px) {} /***************** 697px *****************/ @media (max-width: 697px) {} /***************** 668px *****************/ @media (max-width: 668px) {} /***************** 640px *****************/ @media (max-width: 640px) {} /***************** 600px *****************/ @media (max-width: 600px) { h1 { max-width:280px; } } /***************** 520px *****************/ @media (max-width: 520px) {} /***************** 400px *****************/ @media (max-width: 400px) {} /***************** 320px *****************/ @media (max-width: 320px) {} /***************** 300px *****************/ @media (max-width: 300px) {}