@import url("https://use.typekit.net/ynj8txd.css");
.theme {}
.theme body { font-family: 'helvetica', sans-serif; font-family: 400; height: 100%; }
.theme footer {}
.theme h1 { font-family: 'linotype-didot', serif; font-size: 6em; font-weight: 600; line-height: 1em; text-transform: uppercase; }
.theme h2 { font-family: 'quasimoda', sans-serif; font-size: 2.5em; font-style: normal; font-weight: 300; letter-spacing: 0.1em; line-height: 1.5em; text-transform: uppercase; }
.theme h3 { font-family: 'quasimoda', sans-serif; font-size: 1.8em; font-weight: 300; line-height: 1.3em; letter-spacing: 0.1em; margin-bottom: 0.5em; text-transform: uppercase; }
.theme h4 { font-size: 1.1em; font-weight: 200; letter-spacing: 0.1em; margin-bottom: 0.5em; margin-top: 0; text-transform: uppercase; }
.theme h5 { font-family: 'quasimoda', sans-serif; font-size: 0.9em; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; }
.theme nav { font-family: 'helvetica', sans-serif; font-size: 1em; letter-spacing: 0.04em; text-transform: uppercase; }
.theme p { color: #333; font-family: 'helvetica', sans-serif; font-family: 400; font-size: 1.1em; letter-spacing: 0.04em; }
.theme table { border-bottom: solid 3px #000; border-top: solid 3px #000; }
.theme table td { padding: 2em 0 2em 0; }
.theme table td p { font-size: 1.5em; }
.theme table td span { color: #000; font-size: 1em; letter-spacing: 0.2em; text-transform: uppercase; }
.theme table tr { border-bottom: solid 3px #000; }
.theme #contact_info { padding: 5em 0 5em 0; }
.theme #contact_info h4 { margin-top: 2em; margin-bottom: 0.2em; }
.theme #contact_info h5 { font-size: 0.75em; }
.theme #contact_info p { font-size: 0.95em; }
.theme #contact_info .logo_boe { margin-top: 2em; max-width: 150px; }
.theme #work_header { height: 10vh; overflow: visible; position: relative; top: 5%; width: 100%; z-index: 998; }
.theme #work_header .billboard { left: -8%; opacity: 0.85; overflow: visible; position: absolute; top: 10em; max-width: 475px; z-index: 999; }
.theme #work_header .marquee { animation: marquee 45s linear infinite; animation-play-state: running; /* display: flex; */ display: none; height: auto; opacity: 0.03; position: fixed; top: 8em; transform: translate3d(var(--move-initial), 0, 0); width: fit-content; z-index: 2; }
.theme #work_header .marquee span { font-size: 16vw; font-style: italic; font-weight: 600; line-height: 0.9em; padding: 0 0.2em 0 0.2em; text-transform: uppercase; width: auto; }
.theme #work_projects {}
.theme #work_projects {} .wrap { max-width: 1600px; }
.theme #work_projects [class*='teaser_'] { position: relative; }
.theme #work_projects [class*='teaser_'] .block_image { filter: brightness(1.0); padding: 2em 2em 1em 2em; transition: 0.30s all ease; width: 100%; }
.theme #work_projects [class*='teaser_'] .block_image:hover { filter: brightness(1.4); transition: 0.30s all ease; transform: }
.theme #work_projects [class*='teaser_'] .block_text { bottom: 10%; left: 10%; position: absolute; width: 100%; z-index: 999; }
.theme #work_projects [class*='teaser_'] .block_text h2 { color: #000; font-family: 'quasimoda', sans-serif; font-size: 3vw; font-weight: 300; letter-spacing: 0.08em; text-transform: uppercase; }
.theme #work_projects [class*='teaser_'] .block_text p { color: #fff; font-family: 'quasimoda', sans-serif; font-size: 1.3vw; font-weight: 300; letter-spacing: 0.08em; text-transform: uppercase; }
.theme #work_clients { z-index: 999; }
.theme #work_clients .wrap { padding: 0 2em 0 2em; max-width: 960px; }
/*
—————————————————————
Article
—————————————————————*/
.theme article { }
.theme article section { padding: 5em 0 5em 0; }
.theme article section.hero { padding: 0 0 0 0; }
.theme article section.hero [class*='block_'] { padding-bottom: 0; }
.theme article .block_header { padding: 0 0 5em 0; width: 100%; }
.theme article .block_header h1 { color: #fff; font-size: 8vw; margin: auto; left: 0; position: absolute; right: 0; text-align: center; top: 30%; max-width: 85%; z-index: 9999; }
.theme article .block_header h2 { font-size: 3em; }
.theme article .block_header hgroup { padding-top: 2em; margin: auto; }
.theme article .block_header img { height: 100vh; }
.theme article .block_header .dek { padding: 5em 0 2em 0; max-width: 100%; }
.theme article .block_header .dek p { font-size: 1.8em; line-height: 1.3em; width: 100%; }
.theme article .block_lead-image { filter: brightness(0.7); height: 100vh; max-width: 100%; /* max-width: 1240px; */ }
.theme article .parallax { background-position: center center; }
.theme article .share { display: none; }
.theme article .wrap { padding: 0 1em 0 1em; max-width: 1240px; }
.theme article #press { margin: auto; max-width: 960px; }
.theme article #press img { padding: 1.3em; }
.theme article #newsletter { display: none; }
.theme article { margin: auto; }
.theme [id*='home_'] .block_text p { font-size: 2.5rem; font-weight: 350; letter-spacing: 0; line-height: 1.3em; }
.theme .height_100 { height: 100vh; }
.theme .skew { transition: transform .20s; will-change: transform; }
.theme .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.theme .video-container iframe, .theme .video-container object, .theme .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.theme .wrap { padding: 0 2em 0 2em; }
.theme #common_footer { background: #fafafa; padding: 5em 2em 0 2em; text-align: left; text-transform: uppercase; }
.theme #common_footer a { font-weight: 300; }
.theme #common_footer h3 { margin-bottom: 2em; }
.theme #common_footer p { font-size: 0.95em; }
.theme #about { /* background: linear-gradient(180deg, #ece6e5 85%, #ffffff 85%); */ padding: 5em 0 5em 0; }
.theme #about .block_text { max-width: 960px; z-index: 999; }
.theme #about .dropcap_img { left: -10%; opacity: 0.8; position: absolute; top: 1%; max-width: 980px; z-index: 2; }
.theme #about_boe { background: #121212; min-height: 100vh; padding: 10em 0 10em 0; }
.theme #about_boe .block_text { margin-top: 2.5em; max-width: 800px; }
.theme #about_boe .block_text h3 { color: #fff; margin-bottom: 0.5em; }
.theme #about_boe .block_text a { color: #fff; font-weight: bold; text-decoration: none; }
.theme #about_boe .block_text p { color: #fff; }
.theme #about_boe .logo_boe { width: 80%; max-width: 400px; }
.theme #about_press { background: #ffffff; padding: 5em 0 5em 0; }
.theme #about_press img { padding: 15%; }
.theme #home_headline { background: #f2f2f2; }
.theme #home_headline .block_text { padding: 10em 0 5em 0; text-align: left; max-width: 980px; }
.theme #home_headline .block_text h2 { font-size: 2.8rem; letter-spacing: 0.2em; line-height: 1.5em; }
.theme #home_about { background: linear-gradient(180deg, #f2f2f2 85%, #ffffff 85%); padding-bottom: 4em; }
.theme #home_about_billboard { left: -8%; opacity: 0.85; position: absolute; top: -12%; max-width: 500px; z-index: 998; }
.theme #home_about_portrait .block_image {}
.theme #home_about_portrait .block_image img { padding-top: 8em; }
.theme #home_about_text .block_text { background: rgba(0, 0, 0, 0.8); box-shadow: 0.8em 0.8em 0 rgba(0,0,0,0.65); left: 12%; padding: 5em; position: absolute; top: 20%; width: 50%; z-index: 999; }
.theme #home_about_text .block_text p { color: #fff; font-size: 2rem; }
.theme #home_hero { background: #000; height: auto; margin: auto; overflow: hidden; position: relative; width: 100%; }
.theme #home_hero .block_code { height: 100vh; padding: 0 0 0 0; text-align: center; }
.theme #home_hero .block_code video { height: 100%; opacity: 50%; }
.theme #home_hero .logo { bottom: 0; height: 35%; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 100%; max-width: 90%; z-index: 100; }
.theme #home_hero .logo h1 { color: #fff; font-family: 'linotype-didot', sans-serif; font-size: 13vh; font-weight: 600; }
.theme #home_hero .block_text { bottom: 0; height: 60%; margin: auto; position: absolute; top: 0; width: 100%; z-index: 100; }
.theme #home_hero .block_text h1 { color: #fff; font-size: 20vw; opacity: 1.0; }
.theme #home_hero .block_text p { color: #fff; font-size: 1.6em; letter-spacing: 0.9em; margin-top: 0.5em; }
.theme #home_press { padding-bottom: 5em; z-index: 999; }
.theme #home_press_links { padding-bottom: 10em; z-index: 999; }
.theme #home_press_links .block_image { padding: 1em 0 1em 0; }
.theme #home_work { background: none; padding: 0 0 1em 0; z-index: 999; }
.theme #home_work h4 { display: none; }
.theme #hero { height: 100vh; overflow: hidden; position: relative; width: 100%; }
.theme #home_work_featured { padding: 0 0 3em 0; z-index: 10; }
.theme #home_work_featured .block_teaser { height: 100%; width: 100%; }
/* Carousel */
.theme #home_work_featured .block_teaser .carousel { height: 100%; overflow: visible; position: relative; width: 100%; z-index: 99; }
.theme #home_work_featured .block_teaser .carousel .slide { height: 100%; margin: 0 1% 0 0; overflow: visible; position: relative; width: 100%; }
.theme #home_work_featured .block_teaser .carousel .slide img { /* animation: animation_kenburns 40s ease infinite; */ height: 80vh; filter: brightness(1.0); object-fit: cover; transition: 0.60s all ease; width: 100%; }
.theme #home_work_featured .block_teaser .carousel .slide img:hover { filter: brightness(1.2); transition: 0.60s all ease; }
.theme #home_work_featured .block_teaser .carousel .slide .copy { bottom: 10%; height: auto; left: 5%; margin: auto; opacity: 0; position: absolute; text-align: left; transform: scale(1.0); transition: 0.60s all ease; width: auto; z-index: 9999 !important; }
.theme #home_work_featured .block_teaser .carousel .slide:hover .copy { opacity: 1.0; transition: 0.60s all ease; }
.theme #home_work_featured .block_teaser .carousel .slide .copy h1 { color: #fff; font-size: 1.2em; font-family: 'helvetica', sans-serif; font-weight: 400; margin-bottom: 0.2em; opacity: 1.0 }
.theme #home_work_featured .block_teaser .carousel .slide .copy h2 { color: #fff; font-size: 0.9em; font-family: 'helvetica', sans-serif; font-weight: 400; }
.theme #home_work_featured .block_teaser .carousel .slide .copy h4 { color: #fff; font-family: 'linotype-didot', serif; font-size: 1.2em; letter-spacing: 0.4em }
.theme #home_work_featured .block_teaser .carousel .slider_control_next { bottom: 0; position: absolute; right: 0; top: 0; z-index; 99; }
.theme #home_work_featured .block_teaser .carousel .slick-slider { position: relative; }
.theme #home_work_featured .block_teaser .carousel .slick-arrow { background: none; border: none; bottom: -10%; height: 100px; margin: auto; outline: none; position: absolute; top: auto; width: 60px; z-index: 99; }
.theme #home_work_featured .block_teaser .carousel .slick-next { background-image: url('/img/icon_arrow-right-2.svg'); background-position: center center; background-repeat: no-repeat; background-size: 70% 70%; padding-right: 1em; opacity: 0.75; right: 5%; text-indent:-9999px; transition: 0.60s all ease; }
.theme #home_work_featured .block_teaser .carousel .slick-next:hover { opacity: 1.0; transition: 0.60s all ease; }
.theme #home_work_featured .block_teaser .carousel .slick-prev { background-image: url('/img/icon_arrow-left-2.svg'); background-position: center center; background-repeat: no-repeat; background-size: 70% 70%; opacity: 0.75; padding-left: 1em; right: 10%; text-indent:-9999px; transition: 0.60s all ease; }
.theme #home_work_featured .block_teaser .carousel .slick-prev:hover { opacity: 1.0; transition: 0.60s all ease; }
/* Slider */
.theme #hero .block_teaser .slider { height: 100%; overflow: hidden; position: relative; width: 100%; z-index: 998; }
.theme #hero .block_teaser .slider .slide { height: 100vh; margin: 0; overflow: hidden; position: relative; width: 100%; }
.theme #hero .block_teaser .slider .slide img { animation: animation_kenburns 40s ease infinite; height:100vh; filter: brightness(1.0); object-fit: cover; width: 100%; }
.theme #hero .block_teaser .slider .slide .copy { bottom: 40%; height: auto; left: 0; margin: auto; opacity: 1.0; position: absolute; right: 0; text-align: center; transform: scale(1.0); transition: 0.60s all ease; width: 100%; z-index: 9999 !important; }
.theme #hero .block_teaser .slider .slide .copy h1 { color: #fff; font-size: 7vw; font-family: 'linotype-didot', sans-serif; font-weight: 400; margin-bottom: 0.2em; opacity: 1.0 }
.theme #hero .block_teaser .slider .slide .copy h2 { color: #fff; font-size: 1.2em; font-family: 'helvetica', sans-serif; font-weight: 400; letter-spacing: 0.8em; }
.theme #hero .block_teaser .slider .slide .copy h4 { color: #fff; font-family: 'linotype-didot', serif; font-size: 1.2em; letter-spacing: 0.4em }
.theme #hero .block_teaser .slider .slider_control_next { bottom: 0; position: absolute; right: 0; top: 0; z-index; 99; }
.theme #hero .block_teaser .slider .slick-slider { position: relative; }
.theme #hero .block_teaser .slider .slick-slider .slick-dots { bottom: 10%; left: 0; margin: auto; position: absolute; right: 0; width: 100%; z-index: 10; }
.theme #hero .block_teaser .slider .slick-arrow { background: none; border: none; bottom: 0; height: 100px; margin: auto; outline: none; position: absolute; top: 0; width: 60px; z-index: 99; }
.theme #hero .block_teaser .slider .slick-next { background-image: url('/img/icon_chevron-right-white.svg'); background-position: center center; background-repeat: no-repeat; background-size: 70% 70%; opacity: 0.75; right: 2em; text-indent:-9999px; transition: 0.60s all ease; }
.theme #hero .block_teaser .slider .slick-next:hover { opacity: 1.0; transition: 0.60s all ease; }
.theme #hero .block_teaser .slider .slick-prev { background-image: url('/img/icon_chevron-left-white.svg'); background-position: center center; background-repeat: no-repeat; background-size: 70% 70%; left: 2em; opacity: 0.75; text-indent:-9999px; transition: 0.60s all ease; }
.theme #hero .block_teaser .slider .slick-prev:hover { opacity: 1.0; transition: 0.60s all ease; }
.theme #hero .block_teaser .slider .slick-dots { bottom: 2em; left: 0; margin: auto; position: absolute; right: 0; text-align: center; width: auto; }
.theme #hero .block_teaser .slider .slick-dots li { display: inline; list-style-type: none; }
.theme #hero .block_teaser .slider .slick-dots li button { background: none; border: solid 1px #fff; border-radius: 10em; font-size: 0.1em; height: 10px; line-height: 0; outline: none; padding: 0; text-indent:-9999px; width: 10px; }
.theme #hero .block_teaser .slider .slick-dots li.slick-active button { background: #fff; border: solid 1px #fff; }
.theme #hero .title { bottom: 0; height: 80%; margin: auto; position: absolute; top: 0; width: 100%; }
.theme .pos #container_column_2 { }
.theme .pos #container_column_2 .col_1 { padding-top: 15%; }
.theme .pos #container_column_2 .col_2 { padding-top: 0; }
.theme .pos #container_column_2 .col_2 #block_194 { padding-top: 5%; }
.theme .pos #container_column_3 { }
.theme .pos #container_column_3 .col_1 { padding-top: 0; }
.theme .pos #container_column_3 .col_2 { padding-top: 20%; }
.theme .pos #container_column_3 .col_3 { }
.theme #press { padding: 10em 0 15em 0; text-align: center; }
.theme #press img { height: 80px; padding: 1em 0 1em 0; width: auto; }
.theme .logo_project { margin: 0 auto 0 auto; max-width: 400px; }
.theme .vline { background: url('/domain/img/ui_line.svg'); background-position: center top; background-repeat: repeat-y; background-size: 1px auto; height: 200px; margin-bottom: 1em; }
.theme .wrap_none { max-width: 100%; }
/*
—————————————————————
Block_Button
—————————————————————*/
.theme .block_button { }
.theme .block_button .color_primary { background: none; color: #000; }
.theme .block_button .button { border: solid 1px #000; color: #000; font-family: 'helvetica', sans-serif; font-size: 0.8em; letter-spacing: 0.4em; text-transform: uppercase; }
/*
—————————————————————
Block_Teaser
—————————————————————*/
.theme .block_teaser { align-content: flex-start; align-items: flex-start ; display: flex; flex-direction: column; flex-wrap: wrap; height: 100%; justify-content: flex-start; position: relative; width: 100%; }
.theme .block_teaser .rubric { display: none; }
.theme .block_teaser .grid_columns_2 { height: 100%; flex-grow: 0; /* <- stop single column from stretching to 100% width */ margin: 0 0 0 0; padding: 0 0 0 0; }
.theme .block_teaser .grid_columns_2:nth-child(even) {}
.theme .block_teaser .grid_columns_2 .copy { background: none; bottom: 2em; height: auto; left: 2em; padding: 0 0 0 0; position: absolute; text-align: left; top: auto; width: 100%; }
.theme .block_teaser .grid_columns_2 .copy h3 { color: #fff; font-size: 1.3em; margin-bottom: 0.1em; }
.theme .block_teaser .grid_columns_2 .copy h4 { color: #fff; font-size: 0.9em; }
.theme .block_teaser .grid_columns_2 .image { height: 100%; margin: 0; padding: 0.5em; }
.theme .block_teaser .grid_columns_2 .image img { height: auto; }
.theme .block_teaser .grid_columns_2 .image img:hover {filter: brightness(1.2); transform: scale(1.0); }
.theme .block_teaser .grid_columns_3 { height: 100%; flex-grow: 0; /* <- stop single column from stretching to 100% width */ margin: 0 0 0 0; padding: 0 0 0 0; }
.theme .block_teaser .grid_columns_3:nth-child(even) {}
.theme .block_teaser .grid_columns_3 .copy { background: none; bottom: 2em; height: auto; left: 2em; padding: 0 0 0 0; position: absolute; text-align: left; top: auto; width: 100%; }
.theme .block_teaser .grid_columns_3 .copy h3 { color: #fff; font-size: 1.1em; margin-bottom: 0.1em; }
.theme .block_teaser .grid_columns_3 .copy h4 { color: #fff; font-size: 0.8em; }
.theme .block_teaser .grid_columns_3 .image { height: 100%; margin: 0; padding: 0.5em; }
.theme .block_teaser .grid_columns_3 .image img { height: auto; }
.theme .block_teaser .grid_columns_3 .image img:hover {filter: brightness(1.2); transform: scale(1.0); }
/*
—————————————————————
Block_Text
—————————————————————*/
.theme .block_text { padding-bottom: 0; }
.theme .block_text h2 { margin-top: 0; }
.theme .block_text h3 { margin-top: 0; }
.theme .block_text h4 { margin-bottom: 0.5em; margin-top: 0; }
.theme .block_text p { font-size: 1.1em; font-weight: 200; letter-spacing: 0.08em; line-height: 2em; margin-bottom: 0.5; }
/*
—————————————————————
ANIMATION
—————————————————————*/
.theme [data-aos=fade-up] { transform: translate3d(0,75px,0); }
.animation_marquee { position: relative; overflow: hidden; --offset: 100vw; --move-initial: calc(1% + var(--offset)); --move-final: calc(-98% + var(--offset)); width: 100%; }
@-webkit-keyframes marquee {
0% {
transform: translate3d(var(--move-initial), 0, 0);
}
100% {
transform: translate3d(var(--move-final), 0, 0);
}
}
@keyframes marquee {
0% {
transform: translate3d(var(--move-initial), 0, 0);
}
100% {
transform: translate3d(var(--move-final), 0, 0);
}
}
.animation_rotate-center { -webkit-animation: rotate-center 30s linear infinite both; animation: rotate-center 30s linear infinite both; }
@-webkit-keyframes rotate-center {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate-center {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.animation_scale-in-hor-center { -webkit-animation: scale-in-hor-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: scale-in-hor-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }
@-webkit-keyframes scale-in-hor-center {
0% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
opacity: 1;
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
opacity: 1;
}
}
@keyframes scale-in-hor-center {
0% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
opacity: 1;
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
opacity: 1;
}
}
.animation_scale-in-center { animation: scale-in-center 0.8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; -webkit-animation: scale-in-center 0.8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; }
@-webkit-keyframes scale-out-center {
0% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
opacity: 0;
}
100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 1;
}
}
@keyframes scale-in-center {
0% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
opacity: 0;
}
100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 1;
}
}
.animation_scale-out-center { animation: scale-out-center 0.8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; -webkit-animation: scale-out-center 0.8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; }
@-webkit-keyframes scale-out-center {
0% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 1;
}
100% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
opacity: 1;
}
}
@keyframes scale-out-center {
0% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 1;
}
100% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
opacity: 1;
}
}
.animation_slide_in { animation: slide-in 1.4s cubic-bezier(0.29, 0.98, 0.73, 0.99) ; -webkit-animation: slide-in 1.4s cubic-bezier(0.29, 0.98, 0.73, 0.99); }
@-webkit-keyframes slide-in {
0% {
-webkit-transform: translateY(2%);
transform: translateY(2%);
opacity: 0.5;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1.0;
}
}
@keyframes slide-in {
0% {
-webkit-transform: translateY(2%);
transform: translateY(2%);
opacity: 0.5;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1.0;
}
}
.animation_slide_in_bottom { animation: slide-in-bottom 1.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both; -webkit-animation: slide-in-bottom 1.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
@-webkit-keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
opacity: 1;
}
100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
opacity: 1;
}
}
@keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
opacity: 1;
}
100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
opacity: 1;
}
}
.animation_slide-out-top {
-webkit-animation: slide-out-top 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: slide-out-top 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@-webkit-keyframes slide-out-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
opacity: 0;
}
}
@keyframes slide-out-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
opacity: 0;
}
}
.animation_kenburns { overflow: hidden; }
.animation_kenburns img { animation: animation_kenburns 40s ease infinite; position: absolute; }
@-webkit-keyframes animation_kenburns {
0% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
100% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
}
@keyframes animation_kenburns {
0% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
100% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
}
.animation_shadow-pop-br { -webkit-animation: shadow-pop-br 0.8s ease-in both; animation: shadow-pop-br 0.8s ease-in both; }
@-webkit-keyframes shadow-pop-br {
0% {
-webkit-box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
100% {
-webkit-box-shadow: 1px 1px #3e3e3e, 2px 2px #3e3e3e, 3px 3px #3e3e3e, 4px 4px #3e3e3e, 5px 5px #3e3e3e, 6px 6px #3e3e3e, 7px 7px #3e3e3e, 8px 8px #3e3e3e;
box-shadow: 1px 1px #3e3e3e, 2px 2px #3e3e3e, 3px 3px #3e3e3e, 4px 4px #3e3e3e, 5px 5px #3e3e3e, 6px 6px #3e3e3e, 7px 7px #3e3e3e, 8px 8px #3e3e3e;
-webkit-transform: translateX(-8px) translateY(-8px);
transform: translateX(-8px) translateY(-8px);
}
}
@keyframes shadow-pop-br {
0% {
-webkit-box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
100% {
-webkit-box-shadow: 1px 1px #3e3e3e, 2px 2px #3e3e3e, 3px 3px #3e3e3e, 4px 4px #3e3e3e, 5px 5px #3e3e3e, 6px 6px #3e3e3e, 7px 7px #3e3e3e, 8px 8px #3e3e3e;
box-shadow: 1px 1px #3e3e3e, 2px 2px #3e3e3e, 3px 3px #3e3e3e, 4px 4px #3e3e3e, 5px 5px #3e3e3e, 6px 6px #3e3e3e, 7px 7px #3e3e3e, 8px 8px #3e3e3e;
-webkit-transform: translateX(-8px) translateY(-8px);
transform: translateX(-8px) translateY(-8px);
}
}
.animation_tracking-in-contract {
-webkit-animation: tracking-in-contract 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
animation: tracking-in-contract 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
@-webkit-keyframes tracking-in-contract {
0% {
letter-spacing: 1em;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
letter-spacing: normal;
opacity: 1;
}
}
@keyframes tracking-in-contract {
0% {
letter-spacing: 1em;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
letter-spacing: normal;
opacity: 1;
}
}
/*
—————————————————————
Navigation
—————————————————————*/
.theme #common_nav { background: rgba(0,0,0,0.5) /* linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.0) 100%) */; padding: 1em 0 1em 0; position: fixed; z-index: 9999; }
.theme #common_nav .nav_primary { display: block; font-family: 'helvetica', sans-serif; font-size: 0.8em; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.theme #common_nav .nav_primary_link { color: #fff !important; margin: auto; padding: 0 0.5em 0 0.5em; text-align: middle; text-transform: uppercase; vertical-align: middle; }
.theme #common_nav .nav_secondary { display: block !important; }
.theme #common_nav .nav_tertiary { background: rgba(0,0,0,0.95); }
.theme #common_nav .nav_tertiary_link { color: #fff; font-family: 'linotype-didot'; font-size: 6em; text-transform: uppercase; }
.theme #common_nav .nav_tertiary .ui_icon_logo { display: none; }
.theme #common_nav .nav_tertiary .ui_icon_close { margin: 0 0 0 0; padding: 2em; }
.theme #common_nav .wrap { margin: auto; width: 100%; }
@media screen and (min-width: 45.000em) and (max-width: 63.999em) {
/*
—————————————————————————————————————
BREAKPOINT DETAILS
Min-Width: 720px
Max-Width: 1024px
Target Device: Tablet
Orientation: Portait
—————————————————————————————————————*/
.theme #home_about_billboard { left: -5%; opacity: 0.85; top: -8%; max-width: 400px; }
.theme #home_about_text .block_text { left: 5%; width: 60%; }
.theme #home_about_text .block_text p { font-size: 1.8rem; }
.theme #work_header .billboard { left: -160px; opacity: 0.85; top: 20em; max-width: 300px; }
}
@media screen and (min-width: 18.750em) and (max-width: 44.999em) {
/*
—————————————————————————————————————
BREAKPOINT DETAILS
Min-Width: 300px
Max-Width: 720px
Target Device: Smartphone
Orientation: Portait & Landscape
—————————————————————————————————————*/
.theme h2 { font-size: 1.6rem; }
.theme h3 { font-size: 1.3rem; }
.theme h4 { font-size: 0.9rem; }
.theme footer p { font-size: 0.8em; }
.theme nav { font-size: 0.9em; }
.theme [class*='span_'] { display: block; width: auto; }
.theme .block_text { width: 80%; }
.theme .block_text p { font-size: 0.9em; }
.theme .wrap { padding: 0 1em 0 1em; width: 100%; max-width: 100%; }
.theme #about .dropcap_img { left: -25%; top: 10%; max-width: 200px; }
.theme #about .block_text h2 { font-size: 1.1rem; }
.theme .theme #common_nav .nav_primary_link { padding: 0 0.5em 0 0.5em; }
.theme #home_about_billboard { left: -20%; opacity: 0.85; top: -10%; max-width: 300px; }
.theme #home_about_text .block_text { margin-bottom: 2em; left: 0; padding: 2em; position: relative; top: 0; width: 100%; }
.theme #home_about_text .block_text p { font-size: 1.3rem; font-weight: 300; }
.theme #home_headline .block_text { padding: 5em 0 5em 0; }
.theme #home_headline .block_text h2 { font-size: 1.8rem; text-align: center; }
.theme #home_hero .logo { height: 40%; max-width: 90%; }
.theme #home_hero .logo h1 { font-size: 10vh; }
.theme #home_work h4 { display: none; } /* hide view all links */
.theme #home_work_featured { padding: 0 0 5em 0; }
.theme #home_work_featured .block_teaser .carousel .slide { margin: 0 1em 0 0; }
.theme #home_work_featured .block_teaser .carousel .slide img { height: 60vh; }
.theme #home_work_featured .block_teaser .carousel .slide .copy { bottom: 10%; height: auto; left: 5%; opacity: 1.0; }
.theme #home_work_featured .block_teaser .carousel .slide .copy h1 { color: #fff; font-size: 0.9em; font-family: 'quasimoda', sans-serif; font-weight: 300; letter-spacing: 0.08em; }
.theme #home_work_featured .block_teaser .carousel .slide .copy h2 { color: #fff; font-size: 0.6em; font-family: 'quasimoda', sans-serif; font-weight: 300; letter-spacing: 0.08em; }
.theme #home_work_featured .block_teaser .carousel button { display: none !important; } /* hide prev/next buttons, since carousel is draggable */
/*
.theme #home_work_featured .block_teaser .carousel .slick-arrow { bottom: -20%; height: 100px; margin: auto; outline: none; position: absolute; top: auto; width: 60px; z-index: 99; }
.theme #home_work_featured .block_teaser .carousel .slick-next { background-size: 70% 70%; padding-right: 1em; opacity: 1.0; right: 5%; }
.theme #home_work_featured .block_teaser .carousel .slick-prev { background-size: 70% 70%; opacity: 1.0; padding-left: 1em; left: 5%; }
*/
.theme #home_press { padding-bottom: 2em; }
.theme #home_press_links { padding-bottom: 5em; }
.theme #home_press_links .wrap { padding: 1em; max-width: 80%; }
.theme #work_header .billboard { left: -180px; opacity: 0.85; top: 20em; max-width: 300px; }
}
";