/*********** Build Version: 1.435.2944.6209, Date: Wed, 08 May 2024 08:12:10 GMT ******************/ /*********** Elements & Resets ********************************************************************/ a, body, div, h1, h2, h3, html, iframe, img, p { border: none; margin: 0; padding: 0 } body { background-color: #202123; font-family: Montserrat, Arial, "Helvetica Neue", Helvetica, sans-serif; position: relative; color: #E8EAED } a { text-decoration: none } @font-face { font-family: 'traveling__typewriterregular'; src: url('travelingtypewriter-webfont.woff2') format('woff2'), url('travelingtypewriter-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } h1, h2, h3 { font-family: traveling__typewriterregular; color: #E8EAED } p { color: #E8EAED } /*********** Header *******************************************************************************/ .main-header { background-color: #171717; line-height: 100% } .top-nav { background-color: #0D0D0D; font-size: 19px; height: 31px } .top-nav > div { width: 1466px; margin-left: auto; margin-right: auto; text-align: right; padding-top: 5px } .top-nav > div a { vertical-align: middle; display: inline-block; margin-left: 17px } .top-nav > div > a.imdb img { height: 15px; width: auto; vertical-align: middle } .top-nav > div > a.imdb-pro img { width: auto; height: 15px; vertical-align: middle } .top-nav > div > a.access img { width: 39px; height: auto; vertical-align: middle } .top-nav > div a i { vertical-align: middle; font-size: 17px; color: #202123 } .main-nav { width: 1466px; margin-left: auto; margin-right: auto; text-align: right } .main-nav ul { margin: 0; margin-left: auto; margin-right: auto; display: inline-block; padding: 31px 0 } .main-nav li { display: inline-block; border-left: 1px solid #FFFFFF; padding: 10px 20px } .main-nav li:first-of-type { border-left: none } .main-nav li:last-of-type { border-right: 1px solid #FFFFFF } .main-nav li a { color: #FFFFFF; text-transform: uppercase; text-decoration: none; line-height: 100%; font-size: 20px; vertical-align: middle; letter-spacing: 2px; font-family: traveling__typewriterregular } .main-header a { color: #FFFFFF; -moz-transition-duration: 0.2s; -webkit-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; line-height: 100% } .main-header a:hover { color: #C4B87C } .active-page-link, .main-header a.active-page-link { color: #C4B87C } .top-nav > div a.mobile-only { display: none } #btn-toggle { display: none; z-index: 1; color: #E8EAED } li .flag { margin-left: 10px; display: inline-block } li .flag img { height: 19px; vertical-align: middle; display: inline-block; -o-filter: grayscale(84.1%); -ms-filter: grayscale(84.1%); -moz-filter: grayscale(84.1%); -webkit-filter: grayscale(84.1%); filter: grayscale(84.1%) } #mobile-menu li .flag { margin-left: 10px } .menu-sp { height: 18px; width: auto } /*********** Mobile Menu **************************************************************************/ #btn-close-menu { font-size: 38px; position: absolute; top: 20px; right: 35px; cursor: pointer; z-index: 10; color: #FFFFFF } #mobile-menu { display: none; background-color: #171717; position: absolute; right: 0; left: 0; top: 101px; z-index: 1; -moz-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2); padding: 15px; filter: alpha(opacity=0); opacity: 0.0; -moz-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s } #mobile-menu.visible { display: block } #mobile-menu.showing { filter: alpha(opacity=100); opacity: 1.0 } #mobile-menu ul { list-style-type: none; padding: 0; margin: 0 } #mobile-menu ul li { -o-transform: rotate(-50deg) translate(-250px); -ms-transform: rotate(-50deg) translate(-250px); -moz-transform: rotate(-50deg) translate(-250px); -webkit-transform: rotate(-50deg) translate(-250px); transform: rotate(-50deg) translate(-250px); -moz-transition-duration: 0.2s; -webkit-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; -o-transition-delay: 0s; -moz-transition-delay: 0s; -webkit-transition-delay: 0s; transition-delay: 0s; filter: alpha(opacity=0); opacity: 0.0 } #mobile-menu ul li a { font-size: 22px; line-height: 200%; font-family: traveling__typewriterregular } #mobile-menu ul li a.script { font-size: 27px; line-height: 150% } #mobile-menu ul.visible li { -o-transform: rotate(0deg) translate(0); -ms-transform: rotate(0deg) translate(0); -moz-transform: rotate(0deg) translate(0); -webkit-transform: rotate(0deg) translate(0); transform: rotate(0deg) translate(0); -moz-transition-duration: 0.2s; -webkit-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; filter: alpha(opacity=100); opacity: 1.0 } #mobile-menu ul.visible li:nth-child(2) { -o-transition-delay: 50ms; -moz-transition-delay: 50ms; -webkit-transition-delay: 50ms; transition-delay: 50ms } #mobile-menu ul.visible li:nth-child(3) { -o-transition-delay: 75ms; -moz-transition-delay: 75ms; -webkit-transition-delay: 75ms; transition-delay: 75ms } #mobile-menu ul.visible li:nth-child(4) { -o-transition-delay: 100ms; -moz-transition-delay: 100ms; -webkit-transition-delay: 100ms; transition-delay: 100ms } #mobile-menu ul.visible li:nth-child(5) { -o-transition-delay: 125ms; -moz-transition-delay: 125ms; -webkit-transition-delay: 125ms; transition-delay: 125ms } #mobile-menu ul.visible li:nth-child(6) { -o-transition-delay: 150ms; -moz-transition-delay: 150ms; -webkit-transition-delay: 150ms; transition-delay: 150ms } .mobile-header { background-color: #171717; height: 70px; -moz-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); display: none; justify-content: end; box-sizing: border-box; padding: 16px 20px } /*********** Main Content *************************************************************************/ .script { font-family: "Dancing Script", Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 26px } .main-nav li a.script { letter-spacing: 1px; text-transform: none } /*********** Footer *******************************************************************************/ .granvia { line-height: 99.88%; text-align: center; padding-left: 20px; font-size: 12px; margin: 50px 0 30px; color: #E8EAED } .granvia a { color: #867937; text-decoration: none; font-size: 12px } /*********** Home *********************************************************************************/ body.home { background-color: #000000; color: #FFFFFF; background-image: url('../../img/home-bg-3.jpg'); background-position: center; background-size: cover } .home-content { height: calc(100vh - 127px) } body.home .top-nav { background-color: #000000 } body.home .main-header { background-color: transparent; height: 127px } .home-footer { background-color: #000000; position: fixed; bottom: 0; right: 0; left: 0; z-index: 5 } .home-footer > div { margin-left: auto; margin-right: auto; width: 960px; text-align: center; color: #FFFFFF; padding: 50px 0 } .home-footer > div a { display: inline-block; color: #FFFFFF; font-size: 42px; text-transform: uppercase; line-height: 100%; letter-spacing: 2px; -moz-transition-duration: 0.2s; -webkit-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s } .home-footer > div a:hover { color: #C4B87C } .home-footer > div a:first-of-type { border-right: 2px solid #FFFFFF; padding-right: 30px; margin-right: 30px } .signature { width: 100%; height: auto } #bgvid { position: fixed; z-index: -100; top: 50%; left: 50%; width: auto; height: auto; min-width: 100%; min-height: 100%; -o-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); background-image: url('../../img/home-bg-3.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; -moz-transition: opacity 1s; -webkit-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s } .sig-wrapper { position: absolute; bottom: 186px; right: 100px; height: 208px; width: 500px } .home .granvia { display: none } .home-footer > div a img { height: 20px } /*********** Bio **********************************************************************************/ .about-content { text-align: right; width: 1400px; display: flex; margin-left: auto; margin-right: auto; justify-content: space-between; padding-top: 50px } .about-content > div { vertical-align: top; text-align: left; display: inline-block } .about-content > div:first-of-type { width: 60% } .about-content > div:last-of-type { width: 60%; height: 1100px; box-sizing: border-box } .about-content > div p { font-size: 20px; margin-bottom: 20px; color: #E8EAED; line-height: 150% } .about-content > div p:last-of-type { margin-bottom: 30px } .about-content h1 { font-size: 42px; line-height: 100%; margin-bottom: 30px } .quote { color: #E8EAED; font-family: traveling__typewriterregular; font-size: 26px; margin: 0; line-height: 150%; position: relative; padding-left: 48px } .quote span { font-style: italic; display: block; margin-top: 5px } .quote:after, .quote:before { font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; font-size: 100px; top: -3px; left: 0; content: '“'; color: #454746; position: absolute; line-height: 100% } .quote:after { content: '”'; top: initial; bottom: -51px; right: -35px; left: initial } .about-images { position: relative } .about-images img { vertical-align: top; position: absolute } .about-images img:nth-child(1) { top: 0; right: 474px } .about-images img:nth-child(2) { top: 0; right: 0 } .about-images img:nth-child(3) { top: 522px; right: 474px } .about-images img:nth-child(4) { right: 0; top: 697px } .about-images-2023 { padding-left: 70px } .about-images-2023 img { width: 100% } .about-content .quote { width: 480px; margin-top: 30px; text-align: right; margin-left: auto; margin-right: auto } .about-content .quote span { display: block; text-align: right } .about-content .quote:after { right: -55px; top: 0 } a.link-bold { color: #C4B87C; font-weight: bold } a.link-bold:hover { color: #C6B873 } /*********** More *********************************************************************************/ .more-content { text-align: center; position: relative; margin-left: auto; margin-right: auto; width: 1400px; padding-top: 40px; padding-bottom: 60px } .more-content h1 { font-size: 32px; text-transform: uppercase; text-align: center; line-height: 100%; display: inline-block; position: relative; margin-bottom: 30px; padding: 10px 2px 0 } .more-content h1:after, .more-content h1:before { border-top: 2px solid #E8EAED; border-bottom: 1px solid #E8EAED; height: 4px; width: 170px; content: ""; position: absolute; right: -185px; bottom: 12px } .more-content h1:after { right: initial; left: -185px } .more-content p { font-family: Montserrat, Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 22px; line-height: 150% } .more-content p.intro { padding: 0 30px; max-width: 907px; margin: 0 auto 30px; text-align: left } body.more blockquote { font-size: 22px; position: relative; display: inline-block; padding: 0; margin: 0 } body.more blockquote span { display: block; font-size: 28px; margin-top: 10px } body.more blockquote:before,body.more blockquote:after { content: '“'; font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; font-size: 100px; line-height: 100%; position: absolute; top: -6px; left: -55px; color: #ACADAC; font-weight: bold } body.more blockquote:after { content: '”'; left: initial; right: -45px; top: 20px; height: 50px } .more-content .logos { margin: 30px auto 30px; min-height: 83px } .more-content .logos img { vertical-align: middle } .more-content .logos img:nth-child(2) { margin: 0 170px } /*********** Slider *******************************************************************************/ .sp-slider { height: 340px; position: relative } .sp-slider > div { padding-right: 0; cursor: pointer } .sp-slider > div img { width: auto; height: 340px; margin-right: 15px; -moz-transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s } .slick-arrow { position: absolute; z-index: 1; left: 0; top: 50%; height: 50px; border: none; content: "\f007"; color: transparent; font-family: "Font Awesome 5 Free"; outline-style: none; width: 100px; margin: -25px 0 0 0; cursor: pointer; background-color: transparent } .slick-next { right: 0; left: initial } .slick-arrow:before { font-size: 50px; content: "\f137"; line-height: 100%; filter: alpha(opacity=60); opacity: 0.6; color: #FFFFFF; font-weight: bold; position: absolute; top: 0; left: 10px } .slick-next:before { content: "\f138"; left: initial; right: 10px } .sp-slider > div:focus { outline-style: none; outline-color: transparent } .sp-slider > div video { height: 340px; width: auto; background-color: #000000; margin-right: 15px; min-height: 340px } a.slide-link { overflow: hidden; display: inline-block } a.slide-link:hover { background-size: 110% } .slick-slide img { -o-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -moz-transition-duration: 0.4s; -webkit-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s } .slick-slide img:hover { -o-transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1) } /*********** More Slider **************************************************************************/ .more-slider { margin-top: 40px; margin-bottom: 50px } .sp-slider > div video { background-image: url('../../img/more/poster-about.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; cursor: pointer } .more-slider .slick-slide { padding-right: 27px } .more-slider .slick-slide a { overflow: hidden; display: inline-block } .more-slider > div img { margin-right: 0 } .more-slider > div video { margin-right: 0 } /*********** Resume *******************************************************************************/ .resume-content { width: 1440px; text-align: center; margin: 70px auto 0; padding-bottom: 77px; display: flex; justify-content: center } .resume-content > div:nth-child(2) { text-align: right; width: 45% } .resume-content > div h1 { font-size: 30px; text-transform: uppercase; letter-spacing: 1px; line-height: 100%; display: inline-block; height: 27px; width: 480px } .resume-form { position: relative; text-align: center; margin-top: 50px } .resume-content > div h1:after, .resume-content > div h1:before { border-top: 2px double #000000; border-bottom: 1px solid #000000; height: 4px; width: 150px; content: ""; position: relative; left: -152px; top: 15px; display: none; margin: 0; padding: 0 } .resume-content > div h1:after { left: 342px; top: -20px } .resume-form input[type="email"], .resume-form input[type="text"] { border: 1px solid #000000; width: 250px; text-align: center; height: 40px; font-size: 16px; font-family: Montserrat, Arial, "Helvetica Neue", Helvetica, sans-serif; color: #FFFFFF !important; line-height: 100%; margin: 0; padding: 0; -moz-transition-duration: 0.2s; -webkit-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; background-color: #000000 } .resume-form form { padding-top: 23px } #btn-submit { display: block; background-color: #000000; color: #FFFFFF; text-transform: uppercase; border: none; font-family: Montserrat, Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 14px; font-weight: bold; line-height: 100%; cursor: pointer; margin: 20px auto 0; -moz-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; padding: 17px 20px; letter-spacing: 1px } #btn-submit:hover { background-color: #454746 } #btn-submit:focus { outline-color: #C4B87C } .resume-content .logos { text-align: center } .resume-content .logos img:nth-child(2) { vertical-align: middle } .resume-content .logos .tas { display: block; margin-right: auto; margin-bottom: 30px; margin-left: auto } .resume-content .logos .flex { display: flex; align-items: center; justify-content: center } .resume-content .logos .flex img:first-child { margin-right: 40px } .resume-form #txt-name { margin-right: 20px } input:disabled { filter: alpha(opacity=46); opacity: 0.46 } #btn-submit:hover:disabled { background-color: #000000; cursor: wait } .stella { display: block; margin: 0 auto } .resume-screenshots { margin-top: 100px; display: flex } .resume-screenshots img.resume-screenshot { height: auto; width: 290px; vertical-align: top } .resume-screenshots > div.resume-quote { box-sizing: border-box; padding: 0 50px; display: flex; align-items: center; max-width: 467px } body.resume .granvia { padding: 0; text-align: center } .resume-screenshots img.resume-flag { height: 20px; display: block; margin: 0 auto 25px; -o-filter: grayscale(100%); -ms-filter: grayscale(100%); -moz-filter: grayscale(100%); -webkit-filter: grayscale(100%); filter: grayscale(100%) } .sag { width: 250px; margin-top: 20px } figure { padding: 0; margin: 0; text-align: center } figure figcaption { font-style: italic; margin-top: 10px; text-align: center } figure img { width: 100% } .resume-screenshots > div.resume-quote .quote { font-size: 25px; margin: 0; padding-left: 0; text-align: center } .resume-screenshots > div.resume-quote .quote span { text-align: center; margin-top: 10px } .resume-screenshots > div.resume-quote .quote:after, .resume-screenshots > div.resume-quote .quote:before { display: none } .resume-form input[type="email"]::placeholder, .resume-form input[type="text"]::placeholder { color: #E8EAED } .resume-screenshots a.download { display: block; color: #C4B87C; font-weight: bold; margin: 15px 0 0 } /*********** Contact ******************************************************************************/ body.contact { background-size: cover; background-position: center 125px; background-repeat: no-repeat; margin: 0; padding-bottom: 120px } body.contact h1 { font-size: 40px; line-height: 100%; letter-spacing: 1px; text-transform: uppercase; margin-top: 30px } .contact-content { padding-top: 60px } .contact-content > div { text-align: center; margin: 0 } .contact-content > div > div.form-wrapper { position: relative; width: 100%; margin-right: auto; margin-bottom: 30px; margin-left: auto } body.contact input[type="email"], body.contact input[type="text"], body.contact textarea { border: 1px solid #000000; font-family: Montserrat, Arial, "Helvetica Neue", Helvetica, sans-serif; line-height: 100%; font-size: 16px; text-align: center; background-color: rgba(0, 0, 0, 0.65); color: #FFFFFF; -moz-transition-duration: 0.2s; -webkit-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; font-weight: bold; outline-width: 2px; outline-color: rgba(196, 184, 124, 0.0); outline-offset: 0; outline-style: solid; padding: 15px 10px } body.contact form { width: 660px; margin: 0 0 0 auto } #txt-message { width: 100%; box-sizing: border-box; display: block; height: 334px; margin-bottom: 30px; text-align: left; padding: 20px } #btn-submit-contact:hover { background-color: #454746; cursor: pointer } .contact-form-group { margin-bottom: 22px } .contact-form-group input[type="email"], .contact-form-group input[type="text"] { width: 298px } #btn-submit-contact { background-color: #000000; border: none; color: #FFFFFF; font-family: Montserrat, Arial, "Helvetica Neue", Helvetica, sans-serif; text-transform: uppercase; font-weight: bold; font-size: 16px; letter-spacing: 1px; -moz-transition-duration: 0.2s; -webkit-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; padding: 20px 20px; outline-width: 2px; outline-color: rgba(196, 184, 124, 0.0); outline-style: solid; outline-offset: 0 } #btn-submit-contact:focus { outline-color: #C4B87C } .contact-form-group input[type="text"]:first-of-type { margin-right: 20px } body.contact input[type="email"]:focus, body.contact input[type="text"]:focus, body.contact textarea:focus { outline-color: #C4B87C; outline-width: 2px; outline-style: solid } ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: white; opacity: 1; /* Firefox */ } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: white; } ::-ms-input-placeholder { /* Microsoft Edge */ color: white; } body.resume ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: black; opacity: 1; /* Firefox */ } body.resume :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: black; } body.resume ::-ms-input-placeholder { /* Microsoft Edge */ color: black; } body.contact blockquote { font-size: 31px; width: 500px; display: inline-block; position: relative; color: #E8EAED } body.contact blockquote:after, body.contact blockquote:before { font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; font-size: 100px; top: -16px; content: '“'; color: #454746; position: absolute; line-height: 100% } body.contact blockquote:after { left: initial; right: -30px; content: '”'; top: 12px } .contact-sp { height: 62px; width: 460px; background-image: url('../../img/sp.png'); background-repeat: no-repeat; background-position: center; position: relative; margin-top: 20px; margin-right: auto; margin-left: auto } .contact-sp:after, .contact-sp:before { height: 5px; border-top: 2px solid #000000; border-bottom: 1px solid #000000; position: relative; content: ""; display: block; width: 186px; top: 26px } .contact-sp:after { left: 274px; top: 17px } #btn-submit-contact:disabled { cursor: wait } #btn-submit-contact:disabled:hover { background-color: #000000 } #txt-message:disabled { filter: alpha(opacity=46); opacity: 0.46 } .contact-content div.insta { background-image: none; margin: 0 auto; text-align: center; display: block } .contact-content div.insta > div { margin-left: auto; margin-right: auto } body.contact .granvia { position: absolute; text-align: center; bottom: 0; display: none } body.contact .granvia a { color: #FFFFFF } .management { justify-content: center; align-content: center; padding: 0; margin-top: 0 } .management > div { display: block; color: #FFFFFF; width: 420px; padding: 20px; background-color: rgba(0, 0, 0, 0.65); border: 1px solid #000000; margin-right: auto; margin-bottom: 20px; margin-left: 0 } .management h5 { font-size: 16px; line-height: 100%; margin: 0 auto 15px; color: #FFFFFF } .management p { margin-bottom: 6px } .management a { color: #FFFFFF } body.contact .columns { display: flex; width: 1200px; margin: 0 auto; align-items: start; padding-top: 50px } body.contact .columns > div { width: 40% } body.contact .columns > div:last-child { width: 60% } .quote-section { display: flex; justify-content: center; width: 800px; margin-left: auto; margin-right: auto; padding-top: 50px } .quote-section .globe { height: 350px } p.caption { font-size: 12px; font-style: italic } .management > div address { font-size: 14px } /*********** Reels ********************************************************************************/ body.reels { background-color: #202123 } .headshot-grid > div a { width: 100%; line-height: 0 } .reel-content { margin-left: auto; margin-right: auto; width: 1340px; padding: 80px 0 0; min-height: 550px } .reel-content blockquote { font-size: 32px; width: 100%; position: relative; padding: 0; margin: 50px auto 50px 0 } .reel-content blockquote > span { text-align: right; display: block; margin-top: 25px } .reel-content blockquote:after, .reel-content blockquote:before { display: none } .reel-content > div { margin-bottom: 50px } .reel-content h1, .reel-content h2, .press-content h1 { font-size: 33px; color: #C6B873; font-family: traveling__typewriterregular; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; line-height: 100%; margin-bottom: 30px } .reel-content .videos { cursor: pointer } .reel-content .videos > div > div { display: inline-block; width: 50%; text-align: center; letter-spacing: 2px; padding-right: 8px; box-sizing: border-box } .reel-content .videos > div > div:last-child { padding-right: 0; padding-left: 8px } .reel-content .videos video { width: 100%; background-color: #000000; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url('../../img/reels/poster-acting-2.jpg') } .reel-content .videos > div > div h3 { text-transform: uppercase; font-family: Montserrat, Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 21px; line-height: 100%; font-weight: 300; letter-spacing: 3px; margin-top: 15px } .reels-slider .slick-slide { height: 290px; padding-right: 27px } .reel-content .videos video[data-video-id="2"] { background-image: url('../../img/reels/poster-commercial-2.jpg') } body.reels blockquote:after, body.reels blockquote:before { font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; font-size: 100px; top: -16px; left: 31px; content: '“'; color: #ACADAC; position: absolute; line-height: 100% } body.reels blockquote:after { left: initial; right: 351px; content: '”'; top: 52px } .headshot-grid { display: block; -moz-columns: ; -webkit-columns: ; columns: 4; column-gap: 0 } .headshot-grid > div { flex: auto; box-sizing: border-box; page-break-inside: avoid-column; -webkit-column-break-inside: avoid-column; break-inside: avoid; display: flex; padding: 5px } .headshot-grid > div img { width: 100%; height: auto; -o-filter: ; -ms-filter: ; -moz-filter: ; -webkit-filter: ; filter: } .press-content h1, .reel-content h1, .reel-content h2 { color: #E8EAED } .reel-content iframe { display: block } body.reels h2 { text-align: left; font-size: 21px; margin-bottom: 10px } body.reels .reel-content .videos { cursor: default } /*********** Press ********************************************************************************/ body.press { background-color: #202123 } .press-content { box-sizing: border-box; padding: 50px 30px } .press-content h2 { margin-bottom: 10px; max-width: 844px } .press-content > div { margin-left: auto; margin-right: auto; max-width: 1200px } .press-content p { margin-bottom: 20px; max-width: 850px } .press-slider { overflow: hidden; display: flex; justify-self: left } .press-slider > div { display: inline-flex; background-color: rgba(32, 33, 35, 0.0) } .press-slider img { height: 350px; display: block; margin-right: 5px } [data-slides] { animation: scroll 120s linear infinite; animation-play-state: running; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } body.press .granvia { padding: 0 } .press-content ul { color: #E8EAED; margin: 0 auto 30px; list-style-position: inside; padding: 0 } .press-content ul a { color: #E8EAED; font-size: 20px; -moz-transition-duration: 0.2s; -webkit-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s } .press-content ul a:hover { color: #C4B87C } .press-content ul li { padding: 5px 5px; font-size: 20px } body.press .quote { margin: 60px auto 0; max-width: 700px } /* Max 1700 */ @media screen and (max-width:1700px) { /*********** Bio *********************************************************************************/ .about-content { text-align: center } /*********** Resume ******************************************************************************/ .resume-content { width: auto } .resume-content .logos { text-align: center } /*********** Contact *****************************************************************************/ .contact-content div.insta { left: -407px } } /* Max 1500 */ @media screen and (max-width:1500px) { /*********** Header ******************************************************************************/ .main-nav { width: auto; padding-right: 20px; padding-left: 20px } .top-nav > div { width: auto; padding-right: 20px; padding-left: 20px } /*********** Footer ******************************************************************************/ .granvia { position: relative; text-align: center; margin-right: auto; margin-bottom: 30px; margin-left: auto } .granvia a { font-size: 16px } /*********** Bio *********************************************************************************/ .about-content { width: auto; box-sizing: border-box; padding: 40px } .about-content > div { display: block; margin-left: auto; margin-right: auto } .about-content > div:first-of-type { margin-bottom: 50px; width: 70% } .about-content > div:last-of-type { width: 30% } .about-content .quote { font-size: 16px; width: 100%; box-sizing: border-box; padding-left: 20px } .quote:after, .quote:before { font-size: 62px } .quote:after { top: 71px } .about-content .quote:after, .about-content .quote:before { font-size: 60px } .about-content .quote:after { display: none } /*********** More ********************************************************************************/ .more-content { width: 100% } .more-content .logos img:nth-child(2) { margin: 0 5% } .more-content .logos img { width: 25%; max-width: initial } body.more blockquote { margin: 0 100px } /*********** Resume ******************************************************************************/ .resume-content { box-sizing: border-box; padding: 0 40px 80px } .resume-content > div:nth-child(2) { width: 40%; padding-left: 40px; box-sizing: border-box } .resume-content > div:nth-child(2) img { width: 100%; height: auto } /*********** Contact *****************************************************************************/ body.contact { padding-bottom: 260px } .contact-content { padding-top: 50px } .contact-content > div { margin: 0 auto; height: 940px } .contact-content > div > div { margin: 0 auto } .contact-content div.insta { top: initial; bottom: -429px; left: 50%; width: auto; height: auto } body.contact .granvia { display: none } /*********** Reels *******************************************************************************/ .reel-content { width: 90% } } /* Min 1201 */ @media screen and (min-width:1201px) { /*********** Main Content ************************************************************************/ .mobile-only { display: none } /*********** Resume ******************************************************************************/ .resume-content > div.mobile-only { display: none; text-align: center; width: auto; margin-top: 50px } } /* Max 1200 */ @media screen and (max-width:1200px) { /*********** Header ******************************************************************************/ .main-nav li { padding: 10px 15px } .main-nav li a { font-size: 18px } /*********** Bio *********************************************************************************/ .about-content .quote { text-align: center } /*********** Resume ******************************************************************************/ .resume-content { display: block; text-align: center } .resume-content > div.mobile-only { display: block; text-align: center; margin-top: 50px } .resume-content > div:nth-child(2) { width: auto; margin: 0 auto; padding: 0; text-align: center } .resume-content .logos img { display: block; margin-right: auto; margin-bottom: 33px; margin-left: auto } .resume-content > div:nth-child(2) img { width: 500px } .resume-screenshots { margin: 100px auto; width: 100% } .resume-content .logos .flex { display: block } .resume-content .logos .flex img:first-child { margin: 0 auto 30px } .resume-content .logos .flex img { margin-bottom: 30px; max-width: 350px } .resume-content > div .logos > img:first-child { width: 150px } /*********** Contact *****************************************************************************/ body.contact .columns { display: block; width: auto } body.contact .columns > div { margin: 0 auto; width: auto } .management > div { margin: 0 auto 24px } body.contact .columns > div:last-child { width: auto } body.contact form { margin: 0 auto } .quote-section { display: block; width: auto } .quote-section > div { margin: 0 auto; width: auto } /*********** Reels *******************************************************************************/ body.reels blockquote:after, body.reels blockquote:before { top: -21px; left: -25px } body.reels blockquote:after { right: -18px; top: 73px; left: inherit } } /* Max 1000 */ @media screen and (max-width:1000px) { /*********** Elements & Resets *******************************************************************/ body { padding-top: 101px } /*********** Header ******************************************************************************/ .main-nav { text-align: center } .main-nav li { padding: 10px 8px } .main-nav li a { font-size: 15px } .main-nav li:first-of-type { border-left: none } .main-nav li:last-of-type { border-right: none } #btn-toggle { font-size: 40px; display: block; cursor: pointer } .main-nav { display: none; padding: 0 0 } .main-header { position: fixed; top: 0; right: 0; left: 0; z-index: 5; -moz-box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04); -webkit-box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04) } .mobile-header { display: flex } body.home .main-header { height: 31px } body.home .mobile-header { display: none } /*********** Mobile Menu *************************************************************************/ /*********** Home ********************************************************************************/ .signature { position: relative } .sig-wrapper { text-align: center; right: 0; left: 0 } .home-footer > div { width: auto } .home-content { height: calc(100vh - 101px) } /*********** Bio *********************************************************************************/ .about-content { display: block; padding: 30px } .about-content > div:first-of-type { height: auto; width: auto } .about-content > div:last-of-type { width: auto; text-align: center; height: auto; padding: 0 } .about-images img { position: relative; display: block; top: initial; right: initial; width: 450px; margin-right: auto; margin-bottom: 20px; margin-left: auto } .about-images img:nth-child(1),.about-images img:nth-child(2),.about-images img:nth-child(3),.about-images img:nth-child(4) { top: 0; right: 0 } .about-content .quote { width: 100%; max-width: 600px; font-size: 30px; text-align: right } .about-content .quote:after, .about-content .quote:before { font-size: 70px } .about-content .quote:after { display: block } /*********** More ********************************************************************************/ body.more blockquote { font-size: 30px } /*********** Resume ******************************************************************************/ .resume-screenshots { display: block; text-align: center } .resume-screenshots > div.resume-quote { margin: 50px auto } /*********** Contact *****************************************************************************/ body.contact { background-position: center top; padding-bottom: 428px } .contact-content > div { width: 620px; height: 980px; margin: 0 auto } .contact-content > div > div.form-wrapper { width: auto; padding: 0 30px } body.contact input[type="email"], body.contact input[type="text"] { width: 248px } .contact-content div.insta { bottom: -500px; display: none } body.contact form { width: auto } .management { display: block } .management > div { width: auto } .contact-content { padding-top: 0 } /*********** Reels *******************************************************************************/ .reel-content { padding: 30px 0 0 } /*********** Press *******************************************************************************/ .press-content { padding: 30px 20px } } /* Max 800 */ @media screen and (max-width:800px) { /*********** Bio *********************************************************************************/ .about-images img { width: 90% } .about-content .quote { width: auto; text-align: center } .about-content .quote:after, .about-content .quote:before { display: none } .about-content .quote span { text-align: center } /*********** More ********************************************************************************/ body.more blockquote { font-size: 22px; margin: 0 75px } body.more blockquote:after, body.more blockquote:before { font-size: 66px } /*********** Resume ******************************************************************************/ .resume-content > div:nth-child(2) { width: auto } .resume-content > div.mobile-only { width: auto } .resume-content > div.mobile-only img { width: 90%; height: auto } .resume-content > div:nth-child(2) img:first-child { width: 80% } .resume-content > div h1:after, .resume-content > div h1:before { border-top: 2px double #000000; border-bottom: 1px solid #000000; height: 4px; width: 170px; content: ""; position: relative; left: -170px; top: 15px; display: none; margin: 0; padding: 0 } .resume-content > div h1:after { left: 338px; top: -20px } .resume-form { margin-top: 50px; padding-left: 0 } .resume-form #txt-name { margin-right: auto; margin-bottom: 15px } .resume-form input[type="email"], .resume-form input[type="text"] { display: block; margin: 0 auto } .resume-content .logos { text-align: center; padding-top: 0 } .resume-content > div .logos img { display: block; margin-left: auto; margin-right: auto } .resume-content > div .logos img:first-child { margin-right: auto; margin-bottom: 30px; max-width: 365px } .resume-screenshots { display: block } .resume-screenshots > div { margin: 0 auto 30px } /*********** Contact *****************************************************************************/ body.contact { background-repeat: repeat; padding-bottom: 420px } /*********** Reels *******************************************************************************/ .reels-slider .slick-slide { padding-right: 10px } .reel-content { width: 94% } .reel-content h1, .reel-content h2 { margin-bottom: 20px } .reel-content .videos > div > div { display: block; width: 100%; padding: 0 } .reel-content .videos > div > div:last-child { padding: 0 } .reel-content video { height: 334px } .reel-content blockquote { font-size: 26px } body.reels blockquote:after, body.reels blockquote:before { top: -13px; left: -5px; filter: alpha(opacity=20); opacity: 0.2; z-index: -10 } body.reels blockquote:after { right: -2px; top: 110px; left: inherit } .reel-content iframe { aspect-ratio: 16 / 9; width: 100%; height: auto } /*********** Press *******************************************************************************/ .press-slider img { height: 225px } } /* Min 641 */ @media screen and (min-width:641px) { /*********** Contact *****************************************************************************/ } /* Max 640 */ @media screen and (max-width:640px) { /*********** Elements & Resets *******************************************************************/ body { padding-top: 117px } /*********** Header ******************************************************************************/ .top-nav { height: auto } .top-nav > div a { margin: 0 15px } .top-nav > div a i { font-size: 27px } .top-nav > div { text-align: center; padding: 10px 7px } .top-nav > div > a.imdb img { height: 20px; width: auto } .top-nav > div > a.imdb-pro img { width: auto; height: 20px } .top-nav > div > a.access img { width: auto; height: 20px } #mobile-menu { top: 117px } /*********** Main Content ************************************************************************/ .desktop-only { display: none } /*********** Home ********************************************************************************/ .signature { width: 100%; height: auto } .sig-wrapper { height: 150px } .home-footer > div a { font-size: 32px } /*********** Bio *********************************************************************************/ .quote { font-size: 20px } .about-content .quote:after { display: none } /*********** More ********************************************************************************/ .more-content h1:after, .more-content h1:before { width: 100px; right: -110px } .more-content h1:after { left: -110px } .more-content p { font-size: 18px; text-align: left } .more-content .logos img { display: block; margin: 0 auto 30px; width: 70% } .more-content .logos img:nth-child(2) { margin: 0 auto 30px } body.more blockquote span { font-size: 24px; margin-top: 10px } /*********** Resume ******************************************************************************/ .headshot-grid { -moz-columns: 3; -webkit-columns: 3; columns: 3 } /*********** Contact *****************************************************************************/ body.contact { background-position: center top; background-size: cover; padding-bottom: 430px } .contact-content > div { width: auto; height: 1091px; margin: 0 auto; background-position: center bottom; background-size: 200px } .contact-content > div > div { width: auto; padding: 0 30px } body.contact input[type="email"], body.contact input[type="text"] { width: 100%; display: block; box-sizing: border-box; margin: 0 auto 10px } body.contact blockquote { max-width: 340px; font-size: 27px } .contact-form-group input[type="text"]:first-of-type { margin-right: auto } .contact-form-group { margin-bottom: 0 } .contact-sp { width: 420px; margin-top: 0 } .contact-sp:after, .contact-sp:before { position: absolute; top: 26px; left: 0; width: 166px } .contact-sp:after { right: 0; left: initial } /*********** Reels *******************************************************************************/ .reel-content blockquote { font-size: 20px } .reel-content blockquote br { display: none } /*********** Press *******************************************************************************/ .press-slider img { height: 200px } } /* Max 480 */ @media screen and (max-width:480px) { /*********** Header ******************************************************************************/ .top-nav { height: 42px } .top-nav > div a { margin: 0 9px } .top-nav > div a i { font-size: 22px } .top-nav > div > a.imdb img { height: 18px } .top-nav > div > a.imdb-pro img { width: auto; height: 18px } .top-nav > div > a.access img { width: auto; height: 18px } #mobile-menu { top: 112px } /*********** Home ********************************************************************************/ .home-content { position: relative } .home-footer { height: 132px } .sig-wrapper { left: 0; text-align: center; right: inherit; width: 100% } .sig-wrapper img { width: 80% } /*********** Bio *********************************************************************************/ .about-content .quote { width: 100%; font-size: 22px; padding: 0; margin-top: 30px } .quote:after, .quote:before { top: -34px; filter: alpha(opacity=10); opacity: 0.1; font-size: 200px } .quote:after { right: 0; left: initial; bottom: -121px; top: initial; line-height: 100%; z-index: -2 } .about-content > div p { font-size: 18px } .about-content { padding: 20px 20px } /*********** More ********************************************************************************/ .more-content p.intro { padding: 0 20px } body.more blockquote { margin: 0 30px } /*********** Slider ******************************************************************************/ .slick-arrow { display: none } .slick-arrow:before { display: none } /*********** More Slider *************************************************************************/ .more-slider { height: 250px } .sp-slider > div { text-align: center } .sp-slider > div img { height: 250px; margin-right: 0 } body.more blockquote:after, body.more blockquote:before { left: -20px; display: none } body.more blockquote:after { right: -305px } .more-content h1:after, .more-content h1:before { width: 40px; left: -45px } .more-content h1:after { right: -45px; left: initial } .sp-slider > div video { height: 250px; min-height: 250px; vertical-align: middle; margin: 0; max-width: 75% } .video-slide { background-color: #000000 } .more-content h1 { padding: 0 2px 0 } /*********** Resume ******************************************************************************/ .resume-content { padding: 30px 15px } .resume-form input[type="email"], .resume-form input[type="text"] { width: 90% } #btn-submit { width: 90% } .resume-content > div h1 { width: auto; font-size: 23px } .stella { width: 90%; margin-top: 10px } .resume-content { margin-top: 0; padding-top: 30px } .resume-content > div .logos img, .resume-content > div .logos img:first-child { width: 90% } #btn-submit, .resume-form input[type="email"], .resume-form input[type="text"] { width: 100% } .resume-screenshots > div { width: auto; text-align: center } .resume-screenshots img.resume-flag { display: block; margin: 0 auto 10px } .resume-screenshots img.resume-screenshot { width: 100% } .resume-content > div .logos > img:first-child { width: 150px } .resume-screenshots > div.resume-quote { padding: 0 } .resume-screenshots > div.resume-quote .quote { font-size: 18px; padding: 0 } /*********** Contact *****************************************************************************/ .contact-content > div { background-size: 200px; height: 1078px } .contact-content > div > div { padding: 0 15px 20px } body.contact blockquote { font-size: 22px; margin: 0; padding: 0; width: 100% } .contact-sp { width: 310px } .contact-sp:after, .contact-sp:before { width: 120px } .management a { word-break: break-word } .contact-content > div > div.form-wrapper { padding: 0 20px } #btn-submit-contact { width: 100%; display: block } body.contact blockquote:after, body.contact blockquote:before { display: none } /*********** Reels *******************************************************************************/ .reel-content h1, .reel-content h2 { font-size: 28px } /*********** Press *******************************************************************************/ body.press .quote { padding: 0; font-size: 18px; margin-top: 40px } } /* Max 340 */ @media screen and (max-width:340px) { /*********** Header ******************************************************************************/ .top-nav > div a { margin: 0 5px } /*********** Home ********************************************************************************/ .home-footer > div a { font-size: 24px } /*********** Contact *****************************************************************************/ .contact-sp { width: 290px } .contact-sp:after, .contact-sp:before { width: 110px } body.contact blockquote { width: 210px } }