/* titillium-web-regular - latin */
@font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 400; src: url("../fonts/titillium-web-v15-latin-regular.eot"); /* IE9 Compat Modes */ src: local(""), url("../fonts/titillium-web-v15-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/titillium-web-v15-latin-regular.woff2") format("woff2"), url("../fonts/titillium-web-v15-latin-regular.woff") format("woff"), url("../fonts/titillium-web-v15-latin-regular.ttf") format("truetype"), url("../fonts/titillium-web-v15-latin-regular.svg#TitilliumWeb") format("svg"); /* Legacy iOS */ }

/* titillium-web-600 - latin */
@font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 600; src: url("../fonts/titillium-web-v15-latin-600.eot"); /* IE9 Compat Modes */ src: local(""), url("../fonts/titillium-web-v15-latin-600.eot?#iefix") format("embedded-opentype"), url("../fonts/titillium-web-v15-latin-600.woff2") format("woff2"), url("../fonts/titillium-web-v15-latin-600.woff") format("woff"), url("../fonts/titillium-web-v15-latin-600.ttf") format("truetype"), url("../fonts/titillium-web-v15-latin-600.svg#TitilliumWeb") format("svg"); /* Legacy iOS */ }

/* titillium-web-200 - latin */
@font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 200; src: url("../fonts/titillium-web-v15-latin-200.eot"); /* IE9 Compat Modes */ src: local(""), url("../fonts/titillium-web-v15-latin-200.eot?#iefix") format("embedded-opentype"), url("../fonts/titillium-web-v15-latin-200.woff2") format("woff2"), url("../fonts/titillium-web-v15-latin-200.woff") format("woff"), url("../fonts/titillium-web-v15-latin-200.ttf") format("truetype"), url("../fonts/titillium-web-v15-latin-200.svg#TitilliumWeb") format("svg"); /* Legacy iOS */ }

html, body { padding: 0; margin: 0; background-color: #101010; }

body { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100vh; }

#acting-background, #art-background { grid-row: 1; }

#acting-background a, #art-background a { display: block; width: 100%; height: 100%; }

#acting-background { grid-column: 1; background-image: url(../images/acting-background_400w.jpg); background-size: cover; background-position: 50% 15%; }

#acting-background:hover ~ hgroup span:first-child { transform: scale(1.2); }

#art-background { grid-column: 2; background-image: url(../images/art-background_400w.jpg); background-size: cover; background-position: 25% 15%; }

#art-background:hover ~ hgroup span:last-child { transform: scale(1.2) translate(0, 1rem); }

hgroup { z-index: 1; grid-row: 1; grid-column-start: 1; grid-column-end: -1; justify-self: stretch; align-self: flex-end; margin-bottom: 30vh; line-height: 1; text-transform: uppercase; font-family: 'Titillium Web',lucida sans unicode,lucida grande,sans-serif; color: #fff; pointer-events: none; }

hgroup > * { display: grid; grid-template-columns: 1fr 1fr; }

hgroup > * :first-child { justify-self: end; text-align: right; padding-right: 0.3rem; transition: transform 1s ease-in-out; transform-origin: bottom right; }

hgroup > * :last-child { justify-self: start; padding-left: 0.3rem; transition: transform 1s ease-in-out; transform: translate(0, 1rem); transform-origin: top left; }

hgroup h1 { margin: 0; font-weight: 600; font-size: 1.5em; }

hgroup div { font-weight: 200; font-size: 1.5em; }

.language-selector { z-index: 1; grid-row: 1; grid-column-start: 1; grid-column-end: -1; justify-self: end; align-self: flex-start; list-style: none; display: inline-block; margin: 1em; }

.language-selector li { display: inline-block; margin: 0.3em; transition: transform 1s ease-in-out; }

.language-selector li:hover { transform: scale(1.2); }

.language-selector img { width: 2em; border: 2px solid #fff; border-radius: 50%; }

@media screen and (min-width: 25em) { hgroup h1, hgroup div { font-size: 6vw; } }

@media screen and (min-width: 50em) { hgroup h1, hgroup div { font-size: 3em; } #acting-background { background-image: url(../images/acting-background_960w.jpg); } #art-background { background-image: url(../images/art-background_960w.jpg); } }

@media screen and (min-height: 75em) { #acting-background { background-image: url(../images/acting-background_960w.jpg); } #art-background { background-image: url(../images/art-background_960w.jpg); } }

@media (hover: hover) { #acting-background, #art-background { filter: grayscale(50%); transition: filter 1s ease-in-out; } #acting-background:hover, #art-background:hover { filter: grayscale(0%); } }

/*# sourceMappingURL=index.css.map */