/*
Home CSS
*/

/* General
========================= */
body.home { background-image: url(/media/home_bg.jpg); background-repeat: no-repeat; }
.home .site-inner { display: flex; min-height: 100%; }
.company-logo { display: flex; justify-content: center; align-items: center; margin-bottom: 4em; width: 100%; }
.company-logo span { color: #333; font-family: 'Lora'; font-size: 1.6rem; font-weight: 600; line-height: 1.4em; }
.company-logo video { width: 500px; -webkit-mask-image: -webkit-radial-gradient(white, black); }

/* Responsive
--------------------------------------------- */
@media only screen and (min-width: 1980px) {
.company-logo video { width: 550px; }
}

@media only screen and (min-width: 2500px) {
.company-logo video { width: 600px; }
}

@media only screen and (max-width: 1480px) {
.company-logo video { width: 475px; }
}

@media only screen and (max-width: 1280px) {
.company-logo video { width: 450px; }
}

@media only screen and (max-width: 1140px) {
.company-logo video { width: 425px; }
}

@media only screen and (max-width: 1024px) {
.company-logo { margin-bottom: 3em; }
.company-logo video { width: 400px; }
}

@media only screen and (max-width: 768px) {
.company-logo { margin-bottom: 2em; }
.company-logo video { width: 375px; }
}

@media only screen and (max-width: 719px) {
.company-logo video { width: 350px; }
}

@media only screen and (max-width: 640px) {
.company-logo { margin-bottom: 1.5em; }
.company-logo video { width: 325px; }
}

@media only screen and (max-width: 480px) {
.company-logo { margin-bottom: 1em; }
.company-logo video { width: 300px; }
}

@media only screen and (max-width: 420px) {
.company-logo video { width: 275px; }
}