/* Theme Name: Luke Halls Studio Theme URI: Description: Author: design: FLOK | programming: André Pahl | maintainance from 2024: Samuel Holyhead Author URI: Version: 1.0 */ /* ============================================================================= Plugins ============================================================================= */ /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none} /* always adjust paths for blank.gif, grab.png, grabbing.png !! */ /* Royalslider CSS v1.0.6 http://dimsemenov.com/plugins/royal-slider/ http://dimsemenov.com/plugins/royal-slider/royalslider/royalslider.css */ .royalSlider{width:600px;height:400px;position:relative;direction:ltr}.royalSlider>*{float:left}.rsWebkit3d .rsSlide,.rsWebkit3d .rsContainer,.rsWebkit3d .rsThumbs,.rsWebkit3d .rsPreloader,.rsWebkit3d img,.rsWebkit3d .rsOverflow,.rsWebkit3d .rsBtnCenterer,.rsWebkit3d .rsAbsoluteEl,.rsWebkit3d .rsABlock,.rsWebkit3d .rsLink{-webkit-backface-visibility:hidden}.rsFade.rsWebkit3d .rsSlide,.rsFade.rsWebkit3d img,.rsFade.rsWebkit3d .rsContainer{-webkit-transform:none}.rsOverflow{width:100%;height:100%;position:relative;overflow:hidden;float:left;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rsVisibleNearbyWrap{width:100%;height:100%;position:relative;overflow:hidden;left:0;top:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rsVisibleNearbyWrap .rsOverflow{position:absolute;left:0;top:0}.rsContainer{position:relative;width:100%;height:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rsArrow,.rsThumbsArrow{cursor:pointer}.rsThumb{float:left;position:relative}.rsArrow,.rsNav,.rsThumbsArrow{opacity:1;-webkit-transition:opacity .3s linear;-moz-transition:opacity .3s linear;-o-transition:opacity .3s linear;transition:opacity .3s linear}.rsHidden{opacity:0;visibility:hidden;-webkit-transition:visibility 0s linear .3s,opacity .3s linear;-moz-transition:visibility 0s linear .3s,opacity .3s linear;-o-transition:visibility 0s linear .3s,opacity .3s linear;transition:visibility 0s linear .3s,opacity .3s linear}.rsGCaption{width:100%;float:left;text-align:center}.royalSlider.rsFullscreen{position:fixed!important;height:auto!important;width:auto!important;margin:0!important;padding:0!important;z-index:2147483647!important;top:0!important;left:0!important;bottom:0!important;right:0!important}.royalSlider .rsSlide.rsFakePreloader{opacity:1!important;-webkit-transition:0s;-moz-transition:0s;-o-transition:0s;transition:0s;display:none}.rsSlide{position:absolute;left:0;top:0;display:block;overflow:hidden;height:100%;width:100%}.royalSlider.rsAutoHeight,.rsAutoHeight .rsSlide{height:auto}.rsContent{width:100%;height:100%;position:relative}.rsPreloader{position:absolute;z-index:0}.rsNav{-moz-user-select:-moz-none;-webkit-user-select:none;user-select:none}.rsNavItem{-webkit-tap-highlight-color:rgba(0,0,0,0.25)}.rsThumbs{cursor:pointer;position:relative;overflow:hidden;float:left;z-index:22}.rsTabs{float:left;background:none!important}.rsTabs,.rsThumbs{-webkit-tap-highlight-color:rgba(0,0,0,0)}.rsVideoContainer{width:auto;height:auto;line-height:0;position:relative}.rsVideoFrameHolder{position:absolute;left:0;top:0;background:#141414;opacity:0;-webkit-transition:.3s}.rsVideoFrameHolder.rsVideoActive{opacity:1}.rsVideoContainer iframe,.rsVideoContainer video,.rsVideoContainer embed,.rsVideoContainer .rsVideoObj{position:absolute;z-index:50;left:0;top:0;width:100%;height:100%}.rsVideoContainer.rsIOSVideo iframe,.rsVideoContainer.rsIOSVideo video,.rsVideoContainer.rsIOSVideo embed{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding-right:44px}.rsABlock{left:0;top:0;position:absolute;z-index:15}img.rsImg{max-width:none}.grab-cursor{cursor:url(assets/gfx/royalslider/grab.png) 8 8,move}.grabbing-cursor{cursor:url(assets/gfx/royalslider/grabbing.png) 8 8,move}.rsNoDrag{cursor:auto}.rsLink{left:0;top:0;position:absolute;width:100%;height:100%;display:block;z-index:20;background:url(assets/gfx/royalslider/blank.gif)} /*! other helpers some taken from Boilerplate Author: Aaron T. Grogg, based on the work of Paul Irish, Divya Manian, and Elliot Jay Stocks http://aarontgrogg.com/ */ .hidden{display:none!important;visibility:hidden}.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}@media print{*{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100%!important}@page{margin:.5cm}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}} /* ============================================================================= LET'S GO! ========================================================================== */ @font-face { font-family: 'apercu-bold'; src: url('assets/fonts/apercu-bold.eot'); src: url('assets/fonts/apercu-bold.eot?#iefix') format('embedded-opentype'), url('assets/fonts/apercu-bold.woff') format('woff'), url('assets/fonts/apercu-bold.woff2') format('woff2'), url('assets/fonts/apercu-bold.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'apercu-regular'; src: url('assets/fonts/apercu-regular.eot'); src: url('assets/fonts/apercu-regular.eot?#iefix') format('embedded-opentype'), url('assets/fonts/apercu-regular.woff') format('woff'), url('assets/fonts/apercu-regular.woff2') format('woff2'), url('assets/fonts/apercu-regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* ----------------------------------------------- General ----------------------------------------------- */ html, button, input, select, textarea { color: #000; } html { font-size:100%; /* base 16px = 1em/rem */ } body { font-family: 'apercu-regular', sans-serif; font-style: normal; font-weight: normal; font-size: 1.375em; /* 22 px */ line-height: 1.31818em; /* 29 px -> 29/16 / 1.375 */ overflow-x: hidden; overflow-y: scroll; text-rendering: optimizeLegibility; } div, article, section, aside, nav, figure { position:relative; } figure { margin:0; } p { margin-top:0; } table { border-collapse:collapse; border-spacing:0; } table td { vertical-align:top; text-align:left; padding:0; margin:0; } .table_view { display:table; table-layout:fixed; } .table_view_nonfix { display:table; } .table_cell_mid { display:table-cell; vertical-align:middle; } .table_row { display:table-row; } .table_cell { display:table-cell; vertical-align:top; } ul, ol { list-style:none; list-style-image:none; margin: 0; padding: 0; } .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail { max-width: 100%; height: auto; } *, *:before, *:after { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing: border-box; } *::selection { background:#eee; color:#000; text-shadow:none; } *::-moz-selection { background:#eee; color:#000; text-shadow:none; } * { outline:0; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-focus-ring-color:rgba(0, 0, 0, 0); } a:active, a:focus { outline: 0 /* firefox needs it */ } .clickable { cursor:pointer; touch-action: manipulation; -ms-touch-action: manipulation; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; user-select: none; } .noselect { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; user-select: none; } a, .like_link { color:#000; text-decoration:none; /* -ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; */ touch-action: manipulation; -ms-touch-action: manipulation; } .underline { text-decoration:underline; } .no-touch a.underline:hover, .no-touch a .underline:hover, .no-touch .like_link.underline:hover, .no-touch .clickable.underline:hover { text-decoration:none; } .uppercase { text-transform:uppercase; } a[x-apple-data-detectors], a[href^="tel"] { color:inherit !important; text-decoration:inherit !important; font-size:inherit !important; font-family:inherit !important; font-weight:inherit !important; line-height:inherit !important; } .nowrap { white-space:nowrap; } .nowrap a { -ms-word-break:keep-all; word-break:keep-all; -webkit-hyphens:none; -moz-hyphens:none; hyphens:none; } .hw_acc { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .faded_out { opacity:0!important; } .faded_soft { opacity:0.3!important; } .v_center_parent { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .v_center { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /* input styling & placeholders */ textarea, input { -webkit-appearance:none; /* for iOS */ border-radius:0; } input, textarea { border:0; width:100%; background:transparent; -webkit-appearance:none; border-radius:0; padding:0; display:inline-block; } textarea { padding:5px; resize:none; } /* ----------------------------------------------- animations ----------------------------------------------- */ .opacity_fade03 { -webkit-transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; -ms-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; } .opacity_fade06 { -webkit-transition: opacity .6s ease-in-out; -moz-transition: opacity .6s ease-in-out; -o-transition: opacity .6s ease-in-out; -ms-transition: opacity .6s ease-in-out; transition: opacity .6s ease-in-out; } .opacity_fade10 { -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } .transform_all_03 { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .transform_all_06 { -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; transition: all .6s ease-in-out; } .transform_all_10 { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #loading_message { position:fixed; width:180px; height:180px; top:50%; left:50%; margin-top:-90px; margin-left:-90px; z-index:100009; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } #loading_line1 { background-color: #000; position: absolute; top:0px; left:0px; width:56px; height:0; } body.night #loading_line1 { background-color: #fff; } /* https://matthewlein.com/ceaser/ */ .loading_ani_active #loading_line1 { -webkit-animation: l1_ani 4s infinite; -moz-animation: l1_ani 4s infinite; -o-animation: l1_ani 4s infinite; animation: l1_ani 4s infinite; -webkit-transition-timing-function: cubic-bezier(0.045, 0.545, 0.285, 0.980); -moz-transition-timing-function: cubic-bezier(0.045, 0.545, 0.285, 0.980); -o-transition-timing-function: cubic-bezier(0.045, 0.545, 0.285, 0.980); transition-timing-function: cubic-bezier(0.045, 0.545, 0.285, 0.980); } @-webkit-keyframes l1_ani { 0% { top:0px; height:0%} 15% { top:0px; height:100% } 87% { top:0px; height:100% } 100% { top:100%; height:0% } } @-moz-keyframes l1_ani { 0% { top:0px; height:0%} 15% { top:0px; height:100% } 87% { top:0px; height:100% } 100% { top:100%; height:0% } } @-o-keyframes l1_ani { 0% { top:0px; height:0%} 15% { top:0px; height:100% } 87% { top:0px; height:100% } 100% { top:100%; height:0% } } @keyframes l1_ani { 0% { top:0px; height:0%} 15% { top:0px; height:100% } 87% { top:0px; height:100% } 100% { top:100%; height:0% } } #loading_line2 { background-color: #000; position: absolute; bottom:0px; left:0px; width:0; height:56px; } body.night #loading_line2 { background-color: #fff; } .loading_ani_active #loading_line2 { -webkit-animation: l2_ani 4s infinite; -moz-animation: l2_ani 4s infinite; -o-animation: l2_ani 4s infinite; animation: l2_ani 4s infinite; -webkit-transition-timing-function: cubic-bezier(0.045, 0.545, 0.285, 0.980); -moz-transition-timing-function: cubic-bezier(0.045, 0.545, 0.285, 0.980); -o-transition-timing-function: cubic-bezier(0.045, 0.545, 0.285, 0.980); transition-timing-function: cubic-bezier(0.045, 0.545, 0.285, 0.980); } @-webkit-keyframes l2_ani { 0% { left:0px; width:0%} 17% { left:0px; width:0%} 32% { left:0px; width:100% } 87% { left:0px; width:100% } 100% { left:100%; width:0% } } @-moz-keyframes l2_ani { 0% { left:0px; width:0%} 17% { left:0px; width:0%} 32% { left:0px; width:100% } 87% { left:0px; width:100% } 100% { left:100%; width:0% } } @-o-keyframes l2_ani { 0% { left:0px; width:0%} 17% { left:0px; width:0%} 32% { left:0px; width:100% } 87% { left:0px; width:100% } 100% { left:100%; width:0% } } @keyframes l2_ani { 0% { left:0px; width:0%} 17% { left:0px; width:0%} 32% { left:0px; width:100% } 87% { left:0px; width:100% } 100% { left:100%; width:0% } } /* ----------------------------------------------- Typography reflect changes in custom-editor-style.css ----------------------------------------------- */ h1, h2, h3 { margin-top:0px; font-style:normal; font-weight:normal; } i, em { font-family: 'apercu-regular', serif; font-style:normal; font-weight:normal; } b, strong { font-family: 'apercu-bold', sans-serif; font-style:normal; font-weight:normal; } b i, strong i, b em, em b, i b, i strong { font-family: 'apercu-bold', sans-serif; font-style:normal; font-weight:normal; } table td { padding-right:26px !important; } .type_credits { font-family: 'orator-std', monospace; font-style: normal; font-weight: 400; font-size: 14px; font-size: 0.875rem; line-height: 26px; line-height: 1.625rem; text-transform: uppercase; } .grey { color: #4b596a; } body.night .grey { color: #8f98a2; } .trigger_projects { cursor:pointer; touch-action: manipulation; -ms-touch-action: manipulation; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; user-select: none; border-bottom:2px solid; } .p_no_bm { margin-bottom:0 !important; } .orator { font-family: 'orator-std', monospace; font-style: normal; font-weight: 400; } .orator_small_uc { font-family: 'orator-std', monospace; font-style: normal; font-weight: 400; text-transform: uppercase; font-size:14px; font-size:0.875rem; line-height:17px; line-height:1.0625rem; } /* etc */ .p_no_bm { margin-bottom:0 !important; } /* end editor */ /* ----------------------------------------------- Images / Videos ----------------------------------------------- */ img { width:100%; max-width:100%; height:auto; } .lazy_img_cont { overflow:hidden; } .lazy_img_cont img { position:absolute; z-index:2; top:0px; left:0px; width:100%; opacity:0; -webkit-transition: opacity .6s ease-in-out; -moz-transition: opacity .6s ease-in-out; -o-transition: opacity .6s ease-in-out; -ms-transition: opacity .6s ease-in-out; transition: opacity .6s ease-in-out; } .lazy_img_cont.is_svg img { position:relative; } .lazy_img_cont .lazy_bg { position:absolute; z-index:2; top:-1px; left:-1px; right:-1px; bottom:-1px; width:auto; background-size:cover; background-position:center center; background-repeat:no-repeat; opacity:0; -webkit-transition: opacity .6s ease-in-out; -moz-transition: opacity .6s ease-in-out; -o-transition: opacity .6s ease-in-out; -ms-transition: opacity .6s ease-in-out; transition: opacity .6s ease-in-out; line-height: 0; } .video_container { -webkit-backface-visibility:hidden; height:0; overflow:hidden; width:100%; position:relative; } .aspect1609 { padding-bottom:56.25%; } .video_container iframe, .video_container object, .video_container embed, .video_container video { position:absolute; top:0; left:0; width:100%!important; height:100%!important; z-index:1; } .max_w_wrap { display:inline-block; width:100%; } /* ----------------------------------------------- parallax elements ----------------------------------------------- */ #logo { position: fixed; width:100%; margin: 0 auto; left:0px; right:0px; top:120px; top:7.5rem; display: inline-block; text-align: center; padding-top: 0px; height: 50px; overflow: hidden; z-index: 2001; background-color: transparent; -webkit-transition: width .45s ease-in-out, height .45s ease-in-out, color .45s ease-in-out, padding-top .45s ease-in-out; -moz-transition: width .45s ease-in-out, height .45s ease-in-out, color .45s ease-in-out, padding-top .45s ease-in-out; -o-transition: width .45s ease-in-out, height .45s ease-in-out, color .45s ease-in-out, padding-top .45s ease-in-out; -ms-transition: width .45s ease-in-out, height .45s ease-in-out, color .45s ease-in-out, padding-top .45s ease-in-out; transition: width .45s ease-in-out, height .45s ease-in-out, color .45s ease-in-out, padding-top .45s ease-in-out; } #logo svg { width:274px; /* viewbox svg 136 14 = 9.714285714285714 */ height:29px; -webkit-transition: all .45s ease-in-out; -moz-transition: all .45s ease-in-out; -o-transition: all .45s ease-in-out; -ms-transition: all .45s ease-in-out; transition: all .45s ease-in-out; position: relative; top: 6px; } #logo svg path { -webkit-transition: all .45s ease-in-out; -moz-transition: all .45s ease-in-out; -o-transition: all .45s ease-in-out; -ms-transition: all .45s ease-in-out; transition: all .45s ease-in-out; } body.other_page #logo, body.single #logo, #logo.smaller { padding-top: 10px; margin-top: -2px !important; } body.other_page #logo svg, body.single #logo svg, #logo.smaller svg { /* viewbox svg 136 14 = 9.714285714285714 */ width:140px; height:15px; top:5px; } body.other_page #logo svg path, body.single #logo svg path, #logo.smaller svg path { fill:#000!important; } body.other_page.night #logo svg path, body.single.night #logo svg path, body.night #logo.smaller svg path { fill:#fff!important; } body.other_page #logo, body.single #logo { top:0px !important; -webkit-transform: translate3d(0, 0, 0) !important; -moz-transform: translate3d(0, 0, 0)!important; -ms-transform: translate3d(0, 0, 0)!important; transform: translate3d(0, 0, 0)!important; } #logo.has_bg { background-color: #fff; } body.night #logo.has_bg { background-color: #000; } #logo h1 { font-size: inherit; font-weight: inherit; display: inline-block; padding: 0; margin: 0; } #logo a { color:inherit; } #parallax_bg { height:1000px; /* gets overwritten with .js */ width:100%; background-color: #000; } body.single #parallax_bg, body.other_page #parallax_bg { display: none; } .parallax_item { position: fixed; padding: 20px; backface-visibility: hidden; left:0; right:0; } .parallax_item.pos_mid { margin-left: auto; margin-right: auto; } body.single .parallax_item, body.other_page .parallax_item { display: none; } .parallax_item .image { /* http://www.cssmatic.com/box-shadow */ -webkit-box-shadow: 6px 5px 15px 0px rgba(0,0,0,0.41); -moz-box-shadow: 6px 5px 15px 0px rgba(0,0,0,0.41); box-shadow: 6px 5px 15px 0px rgba(0,0,0,0.41); line-height: 0; } .parallax_item.pos_mid { margin-left: auto; margin-right: auto; left:0px; right:0px; } .parallax_item.type_text { font-family: 'apercu-regular', sans-serif; font-size:28px; font-size:1.75rem; line-height:36px; line-height:2.25rem; color:#fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .parallax_item.type_text a { color:#fff; } .parallax_item .text p:last-child { margin-bottom: 0; } /* ----------------------------------------------- menu [mmm] + Overlay close X ----------------------------------------------- */ /* hamburger / X */ #main_menu_trigger { display:block; position:fixed; top:0px; left:0px; height:74px; z-index:3501; } #overlay_x_trigger { display:block; position:fixed; top:0px; right:0px; height:74px; z-index:3501; } #overlay_x, #main_menu_lines { width:112px; /* 32 + 40*2 (content_padding) */ height:80px; /* needs to be bigger because X is bigger and more down */ position:absolute; top:0px; padding-top: 16px; z-index: 100; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #main_menu_lines { left:0; padding-left: 40px; /* same as .content_padding */ } #overlay_x { right: 0; top:-3px; padding-top: 0; } #overlay_x .line, #main_menu_trigger .line { height: 2px; width: 32px; margin-bottom: 7px; background: #fff; top:0; -webkit-transition: all .4s ease-out 0.2s; -moz-transition: all .4s ease-out 0.2s; -ms-transition: all .4s ease-out 0.2s; transition: all .4s ease-out 0.2s; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } #main_menu_trigger .line { left: 0px; opacity: 0; } #overlay_x .line { opacity:1; } #main_menu_trigger .line2 { -webkit-transition: all .4s ease-out 0.2s, opacity .15s ease-out 0.2s; -moz-transition: all .4s ease-out 0.2s, opacity .15s ease-out 0.2s; -ms-transition: all .4s ease-out 0.2s, opacity .15s ease-out 0.2s; transition: all .4s ease-out 0.2s, opacity .15s ease-out 0.2s; } body.other_page #main_menu_trigger .line, body.single #main_menu_trigger .line, #main_menu_trigger.black .line { background: #000; } #overlay_x .line { background: #000; } body.other_page.night #main_menu_trigger .line, body.single.night #main_menu_trigger .line, body.night #main_menu_trigger.black .line { background: #fff; } body.night #overlay_x .line { background: #fff; } #main_menu_trigger.active .line { background: #fff !important; } body.night #main_menu_trigger.active .line { background: #000 !important; } #overlay_x .line1, #main_menu_trigger.active .line1 { width:50px; top:30px; -webkit-transform: rotate(45deg) translate3d(5px, 5px, 0); -o-transform: rotate(45deg) translate3d(5px, 5px, 0); -ms-transform: rotate(45deg) translate3d(5px, 5px, 0); -moz-transform: rotate(45deg) translate3d(5px, 5px, 0); transform: rotate(45deg) translate3d(5px, 5px, 0); } #main_menu_trigger.active .line1 { left:-4px; } #overlay_x .line2, #main_menu_trigger.active .line2 { opacity: 0 !important; width:50px; top:30px; left:-4px; } #overlay_x .line3, #main_menu_trigger.active .line3 { width:50px; top:30px; -webkit-transform: rotate(-45deg) translate3d(8px, -8px, 0); -o-transform: rotate(-45deg) translate3d(8px, -8px, 0); -ms-transform: rotate(-45deg) translate3d(8px, -8px, 0); -moz-transform: rotate(-45deg) translate3d(8px, -8px, 0); transform: rotate(-45deg) translate3d(8px, -8px, 0); } #main_menu_trigger.active .line3 { left:-4px; } #overlay_x .line1, #overlay_x .line3 { right: -50px; } /* menu content */ #main_menu { position:fixed; top:0px; left:0px; width:40%; max-width:500px; min-width:320px; height:100vh; height:100%; background-color:#000; border:20px solid #fff; border:1.25rem solid #fff; padding:0; z-index:3500; /* http://www.cssmatic.com/box-shadow */ -webkit-box-shadow: 7px 10px 10px 0px rgba(0,0,0,0.41); -moz-box-shadow: 7px 10px 10px 0px rgba(0,0,0,0.41); box-shadow: 7px 10px 10px 0px rgba(0,0,0,0.41); -webkit-transition: width 0.6s ease-in-out, transform 0.6s ease-in-out, background-color 1s ease-out, border 1s ease-out; -moz-transition: width 0.6s ease-in-out, transform 0.6s ease-in-out, background-color 1s ease-out, border 1s ease-out; -o-transition: width 0.6s ease-in-out, transform 0.6s ease-in-out, background-color 1s ease-out, border 1s ease-out; -ms-transition: width 0.6s ease-in-out, transform 0.6s ease-in-out, background-color 1s ease-out, border 1s ease-out; transition: width 0.6s ease-in-out, transform 0.6s ease-in-out, background-color 1s ease-out, border 1s ease-out; -webkit-transform: translate3d(-105%, 0, 0); -moz-transform: translate3d(-105%, 0, 0); -ms-transform: translate3d(-105%, 0, 0); transform: translate3d(-105%, 0, 0) } body.night #main_menu { background-color:#fff; border:20px solid #000; border:1.25rem solid #000; } #main_menu.active { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #main_menu_bg { position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:3499; /* background-color: rgba(0,255,0,0.5); */ } #main_menu_inner { text-align: center; top: 50%; margin-top: -22px; margin-top: -1.375rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #main_menu.active { display:block; } #main_menu ul { margin:0 auto; padding:0; } #main_menu li { font-family: 'orator-std', monospace; font-style: normal; font-weight: 400; font-size:30px; font-size:1.875rem; line-height:30px; line-height:1.875rem; margin-bottom: 56px !important; margin-bottom: 3.5rem !important; text-transform: uppercase; margin:0; padding:0; letter-spacing: 1px; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #menu-main-menu .menu-item:last-child { margin-bottom: 26px !important; margin-bottom: 1.625rem !important; } #menu-main-menu a { color:#fff; position: relative; -webkit-transition: color 1s ease-out; -moz-transition: color 1s ease-out; -o-transition: color 1s ease-out; -ms-transition: color 1s ease-out; transition: color 1s ease-out; } body.night #menu-main-menu a { color:#000; } #menu-main-menu a::before { content: ''; border-bottom: 1px solid; position:absolute; left:51%; right:51%; bottom:2px; -webkit-transition: right 0.3s ease, left 0.3s ease; -moz-transition: right 0.3s ease, left 0.3s ease; -o-transition: right 0.3s ease, left 0.3s ease; transition: right 0.3s ease, left 0.3s ease; } body.night #menu-main-menu a::before { border-bottom: 2px solid; } #menu-main-menu .current-menu-item a::before, .no-touch #menu-main-menu a:hover::before { left:2px; right:2px; } /* main menu text bottom */ #main_menu_text { position: absolute !important; bottom:48px; bottom:3rem; /* viewbox svg 136 14 = 9.714285714285714 */ width:140px; height:17px; margin: 0 auto; left:0; right:0; padding: 0; line-height: 0; z-index: 1000; } #main_menu_text svg path { -webkit-transition: fill 1s ease-out; -moz-transition: fill 1s ease-out; -o-transition: fill 1s ease-out; -ms-transition: fill 1s ease-out; transition: fill 1s ease-out; } body.night #main_menu_text svg path { fill:#000 !important; } /* ---------------------------------------------------------------------------------------------- project / page content [ccc] --------------------------------------------------------------------------------------------- */ #content { position:absolute; min-height: 100%; top:0px; left:0px; width:100%; z-index:2000; color:#000; background-color: #fff; -webkit-transition: color 1s ease-out, background-color 1s ease-out; -moz-transition: color 1s ease-out, background-color 1s ease-out; -o-transition: color 1s ease-out, background-color 1s ease-out; -ms-transition: color 1s ease-out, background-color 1s ease-out; transition: color 1s ease-out, background-color 1s ease-out; } body.night #content { background-color: #000; color:#fff; } #content_cover { position:fixed; height: 110%; top:0px; left:0px; width:100%; z-index:2001; background-color: #fff; } body.night #content_cover { background-color: #000; } body.start_page #content { display: none; } #content.fixed { position:fixed !important; height:100% !important; } .content_max_w { width:100%; max-width: 1550px; /* also ajust parallax_max_width in .js if changed */ margin-left: auto; margin-right: auto; } .content_padding { padding-left: 4%; /* 40px; */ padding-right: 4%; /* 40px; */ } .mobile_padding { padding:0; } /* shows content of wysiwyg editor */ .editor_content a { text-decoration:none; border-bottom:1px solid; } body.night .editor_content a { color:#fff; } .no-touch .editor_content a:hover { border-bottom:1px solid transparent; } .editor_content p:last-child { margin-bottom:0; } /* content module bottom margin */ .mb_bigger { margin-bottom:144px; margin-bottom:9rem; } .mb_normal { margin-bottom:100px; margin-bottom:6.25rem; } .mb_smaller { margin-bottom:48px; margin-bottom:3rem; } .mb_none { margin-bottom:0; } /* helpers */ #is_mobile_view { display: none; position: absolute; top:-10px; left:-10px; width:1px; height:1px; overflow: hidden; } #ml_body_class { display:none; } /* ---------------------------------------------------------------------------------------------- start page: work grid ---------------------------------------------------------------------------------------------- */ #sp_content_inner { padding-bottom: 120px; padding-bottom: 7.5rem; } #sp_content { padding-top: 76px; padding-top: 4.75rem; background-color: #fff; color:#000; -webkit-transition: color 1s ease-out, background-color 1s ease-out; -moz-transition: color 1s ease-out, background-color 1s ease-out; -o-transition: color 1s ease-out, background-color 1s ease-out; -ms-transition: color 1s ease-out, background-color 1s ease-out; transition: color 1s ease-out, background-color 1s ease-out; } body.night #sp_content { background-color: #000; color:#fff; } body.other_page #sp_content { position: fixed; overflow: hidden; height:100%; top:0px; opacity: 0 !important; } #project_filter { text-align: center; margin-bottom: 15px; margin-bottom: 0.90625rem; } .filter_trigger { display: inline-block; margin: 0 40px; margin: 0 1rem; } .no-touch .filter_trigger:hover, .filter_trigger.active { border-bottom:1px solid; } #work_grid { margin: 0 auto; width:100%; } #work_grid .grid_item { display: inline-block; vertical-align: top; padding: 0 0 28px 0; /* same as .box_grid .box */ width: 33.3333%; -webkit-transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; -ms-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; } #work_grid .grid_item_inner { overflow: hidden; height: 0; width: 100%; padding-bottom: 50%; } #work_grid .grid_image { height: 100%; width: calc(100% - 28px); /* same as .box_grid .box_inner */ margin-left: 14px; margin-right: 14px; position: absolute; top: 0; left: 0; } .is-touch #work_grid .grid_image { background-color:#000; } #work_grid .lazy_img_cont { top:0px; height:100%; opacity: 1; position: absolute; width:100%; background-color: #000; -webkit-transition: opacity .5s ease-out; -moz-transition: opacity .5s ease-out; -o-transition: opacity .5s ease-out; -ms-transition: opacity .5s ease-out; transition: opacity .5s ease-out; } #work_grid .lazy_img_cont .lazy_bg { /* background-position:top center; */ } #work_grid .slide_text { position:absolute; top:0px; left:0px; right:0px; width:100%; height:100%; text-align:center; padding:30px 40px; padding:1.875rem 2.5rem; color:#000; opacity:1; z-index:3; -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; -o-transition: color 0.5s ease-out; -ms-transition: color 0.5s ease-out; transition: color 0.5s ease-out; } .is-touch #work_grid .slide_text, body.night #work_grid .slide_text { color:#fff; } #work_grid .slide_text h3 { font-size: 22px; font-size: 1.375rem; line-height: 29px; line-height: 1.8125rem; font-family: 'apercu-regular'; font-weight: normal; font-style: normal; margin: 0; text-transform: uppercase; letter-spacing: 1px; -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; color: #fff !important; opacity: 1; text-shadow: 0px 1px 48px rgba(0, 0, 0, 0.96); } /* work grid mouseovers */ .no-touch #work_grid .slide_text:hover h3 { opacity: 0; } .is-touch #work_grid .grid_item .lazy_img_cont { /* always show images on touch devices & make them darker to read the title */ height:100%; top:0; opacity: 0.75; } .is-touch #work_grid .slide_text h3 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---------------------------------------------------------------------------------------------- start page: box links bottom ---------------------------------------------------------------------------------------------- */ .box_grid { width:100%; margin: 60px auto 0 auto; margin: 3.75rem auto 0 auto; } .box_grid .box { width:33.3333%; padding: 0 14px 28px 0 !important; /* same as #work_grid .grid_item */ display: inline-block; vertical-align: top; } .box_grid .box_inner { overflow:hidden; height:0; width: calc(100% - 14px); /* same as #work_grid .grid_image */ margin-left: 14px; margin-right: 14px; padding-bottom: 50%; border:5px solid #000; border:0.3125rem solid #000; background-color: #fff; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -ms-transition: all 1s ease-out; transition: all 1s ease-out; } body.night .box_grid .box_inner { border:5px solid #fff; border:0.3125rem solid #fff; background-color: #000; } .box_grid .box_inner a { color:#000; -webkit-transition: color 1s ease-out; -moz-transition: color 1s ease-out; -o-transition: color 1s ease-out; -ms-transition: color 1s ease-out; transition: color 1s ease-out; } body.night .box_grid .box_inner a { color:#fff; } .box_grid .box_text { position:absolute; top:0px; left:0px; right:0px; width:100%; height:100%; text-align:center; padding: 30px 40px; padding: 1.875rem 2.5rem; } .box_grid .box_text h3 { font-family: 'orator-std', monospace; font-style: normal; font-weight: 400; font-size:27px; font-size:1.6875rem; line-height:30px; line-height:1.875rem; letter-spacing: 1.6px; letter-spacing: 0.1rem; text-transform: uppercase; } .no-touch .box_grid .box:hover .box_inner { background-color:#000; } .no-touch body.night .box_grid .box:hover .box_inner { background-color:#fff; } .no-touch .box_grid .box:hover .box_inner a { color:#fff; } .no-touch body.night .box_grid .box:hover .box_inner a { color:#000; } /* ---------------------------------------------------------------------------------------------- project page ---------------------------------------------------------------------------------------------- */ #page_spacer { height:80px; } #page_title { text-align: center; } body.other_page #page_title { margin-bottom: 48px; margin-bottom: 3rem; } body.single #page_title { margin-bottom: 68px; margin-bottom: 4.25rem; } #page_title h1 { font-family: 'apercu-bold', sans-serif; font-style:normal; font-weight:normal; font-size:28px; font-size:1.75rem; line-height:36px; line-height:2.25rem; } body.night #page_title h1 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #info_credits_outer { text-align: center; margin-bottom: 44px; margin-bottom: 2.75rem; } #info_credits_spacer { height: 58px; height: 3.625rem; } #info_credits_trigger { display: inline-block; margin: 0 auto; border-bottom: 1px solid; } #info_credits_trigger::after { content:''; position: absolute; width:11px; height:6px; background-image: url(assets/gfx/arr_sm_down_black.svg); background-repeat: none; top:6px; top:0.375rem; right:-19px; opacity:1; -webkit-transition: opacity .3s ease-out; -moz-transition: opacity .3s ease-out; -o-transition: opacity .3s ease-out; -ms-transition: opacity .3s ease-out; transition: opacity .3s ease-out; } body.night #info_credits_trigger::after { background-image: url(assets/gfx/arr_sm_down_white.svg); background-repeat: none; } #info_credits_trigger.active, .no-touch #info_credits_trigger:hover { border-bottom: 1px solid transparent; } #info_credits_trigger.active::after { opacity:0; } #info_credits_inner { padding-top: 29px; padding-top: 1.8125rem; } #info_credits .col { display: inline-block; vertical-align: top; width:50%; text-align: left; } #info_credits .col1 { padding-left: 7.568%; padding-right: 20px; } body.night #info_credits .col1 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #info_credits .col2 { padding-left: 20px; padding-right: 7.568%; } #info_credits .no_credits .col1 { padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; display: block; } #info_credits_close { width:36px; height:20px; display: block; margin: 60px auto 0 auto; margin: 3.75rem auto 0 auto; /* opacity: 0; */ /* todo? */ } .no-touch #info_credits_close:hover svg polyline { stroke:#000 !important; } .no-touch body.night #info_credits_close:hover svg polyline { stroke:#fff !important; } .no-touch #info_credits_close:hover svg { -webkit-transform: translateY(-4px); -moz-transform: translateY(-4px); -o-transform: translateY(-4px); -ms-transform: translateY(-4px); transform: translateY(-4px); } #next_project { margin-top: -60px; margin-top: -3.75rem; margin-bottom: 144px; margin-bottom: 9rem; text-align: center; } #next_project a { margin: 0 20px; margin: 0 1.25rem; position: relative; color:#000; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -ms-transition: all 1s ease-out; transition: all 1s ease-out; } body.night #next_project a { color:#fff; } #next_project a::before { content: ''; border-bottom: 2px solid; position:absolute; left:2px; right:2px; bottom:0px; -webkit-transition: right 0.3s ease, left 0.3s ease; -moz-transition: right 0.3s ease, left 0.3s ease; -o-transition: right 0.3s ease, left 0.3s ease; transition: right 0.3s ease, left 0.3s ease; } #next_project a:hover::before { left:51%; right:51%; } /* ---------------------------------------------------------------------------------------------- module: Text ---------------------------------------------------------------------------------------------- */ .cm_txt .one_col.col { width: 50%; margin-left: auto; margin-right: auto; } .cm_txt .four_col { float:left; width:25%; padding-right: 30px; padding-right: 1.875rem; } .cm_txt .two_col.col1 { float:left; width:50%; padding-right: 30px; padding-right: 1.875rem; } .cm_txt .two_col.col2 { float:left; width:50%; padding-left: 30px; padding-left: 1.875rem; } .cm_txt .four_col .col_inner { max-width: 270px; } /* ---------------------------------------------------------------------------------------------- module: Text + image ---------------------------------------------------------------------------------------------- */ .cm_img_txt .col { float:left; width:50%; } .cm_img_txt .col1 { padding-right: 30px; padding-right: 1.875rem; } .cm_img_txt .col2 { padding-left: 30px; padding-left: 1.875rem; } .cm_img_txt.img_text .col2 { padding-right: 7.568%; } body.night .cm_img_txt .col1, body.night .cm_img_txt .col2 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---------------------------------------------------------------------------------------------- module: Job ---------------------------------------------------------------------------------------------- */ .cm_job .col { float:left; width:50%; } .cm_job .col1 { padding-right: 30px; padding-right: 1.875rem; } .cm_job .col2 { padding-left: 30px; padding-left: 1.875rem; } body.night .cm_job .col2 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .cm_job .box { width:100%; height:0px; padding-bottom:100%; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -ms-transition: all 1s ease-out; transition: all 1s ease-out; } .cm_job .box_wrap { position: absolute; height:100%; width:100%; top:0px; left:0px; -webkit-transition: color 1s ease-out, background-color 1s ease-out; -moz-transition: color 1s ease-out, background-color 1s ease-out; -o-transition: color 1s ease-out, background-color 1s ease-out; -ms-transition: color 1s ease-out, background-color 1s ease-out; transition: color 1s ease-out, background-color 1s ease-out; overflow: hidden; } .cm_job .box_wrap.border { border:10px solid #fff; } .cm_job .box_wrap.shadow { -webkit-box-shadow: 2px 4px 11px 1px rgba(0,0,0,0.41); -moz-box-shadow: 2px 4px 11px 1px rgba(0,0,0,0.41); box-shadow: 2px 4px 11px 1px rgba(0,0,0,0.41); } .cm_job .box_image, .cm_job .box_image .lazy_img_cont { position: absolute; top:0px; left:0px; width:100%; height:100%; z-index:1; background-color: #000; } .cm_job .box_text { text-align: center; font-size:28px; font-size:1.75rem; line-height:36px; line-height:2.25rem; text-transform: uppercase; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: color 1s ease-out; -moz-transition: color 1s ease-out; -o-transition: color 1s ease-out; -ms-transition: color 1s ease-out; transition: color 1s ease-out; z-index: 2; } .cm_job .box_text.white { color:#fff; } .cm_job .box_text.black { color:#000; } /* ---------------------------------------------------------------------------------------------- module: images / videos ---------------------------------------------------------------------------------------------- */ .cm_images_videos { width:auto; margin-left:-10px; margin-right: -10px; } .cm_images_videos .img_wrap { padding: 0 10px 29px 10px; padding: 0 10px 1.8125rem 10px; display: inline-block; vertical-align: top; overflow: hidden; } .cm_images_videos .img_wrap.clickable { cursor: zoom-in !important; } .cm_images_videos .img_wrap.full_width { width:100%; } .cm_images_videos .img_wrap.half_width { width:50%; } .cm_images_videos .img_wrap.less_full { width:75%; margin-left:12.5%; } .cm_images_videos .video_play { width:72px; width:4.5rem; height:72px; height:4.5rem; background-color: #fff; border-radius: 100%; position: absolute; bottom:58px; bottom:3.625rem; left:44px; left:2.75rem; z-index: 10; text-align: center; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .no-touch .cm_images_videos .video_play:hover { width:82px; width:5.125rem; height:82px; height:5.125rem; bottom:53px; bottom:3.3125rem; left:39px; left:2.4375rem; background-color: #000; } .video_play_arr { width: 0; height: 0; left:3px; border-style: solid; border-width: 20px 0 20px 33px; border-width: 1.25rem 0 1.25rem 2.0625rem; border-color: transparent transparent transparent #000; display: inline-block; } .no-touch .cm_images_videos .video_play:hover .video_play_arr { border-color: transparent transparent transparent #fff; } .video_content { position: absolute; top:0px; left:10px; right:10px; width:auto; z-index: 12; } .video_content.direct { position: relative; left:0; right:auto; } /* ---------------------------------------------------------------------------------------------- lightbox overlay ---------------------------------------------------------------------------------------------- */ /* general slideshow */ #slideshow { position: fixed; top:0px; left:0px; width:100%; height:100vh; z-index:4002; } #slideshow_bg { position: fixed; top:0px; left:0px; width:100%; height:100vh; z-index:4001; background-color: #fff; -moz-transition: background-color .6s ease-out; -o-transition: background-color .6s ease-out; -ms-transition: background-color .6s ease-out; transition: background-color .6s ease-out; } body.night #slideshow_bg { background-color: #000; } .cm_slideshow .slider_wrap { position: absolute; left:20px; right:20px; width:auto; height:100vh; } /* add white 1px line to slide wrap to fix rounding errors blitzer */ .cm_slideshow .slider_wrap::before { content:''; position: absolute; z-index: 100; height:100%; width:2px; background-color: transparent; left:-1px; top:0px; } .cm_slideshow .slider_wrap::after { content:''; position: absolute; z-index: 100; height:100%; width:2px; background-color: transparent; right:-1px; top:0px; } #slideshow .arr_l { width: 43px; height: 38px; position: absolute; bottom:20px; left:20px; z-index: 1000; } .no-touch #slideshow .arr_l:hover { -webkit-transform: translateX(-4px); -moz-transform: translateX(-4px); -o-transform: translateX(-4px); -ms-transform: translateX(-4px); transform: translateX(-4px); } #slideshow .arr_r { width: 43px; height: 38px; position: absolute; bottom:20px; right:20px; z-index: 1000; } .no-touch #slideshow .arr_r:hover { -webkit-transform: translateX(4px); -moz-transform: translateX(4px); -o-transform: translateX(4px); -ms-transform: translateX(4px); transform: translateX(4px); } #slideshow .arr_l svg line, #slideshow .arr_l svg polyline, #slideshow .arr_r svg line, #slideshow .arr_r svg polyline { -moz-transition: all .6s ease-out; -o-transition: all .6s ease-out; -ms-transition: all .6s ease-out; transition: all .6s ease-out; } body.night #slideshow .arr_l svg line, body.night #slideshow .arr_l svg polyline, body.night #slideshow .arr_r svg line, body.night #slideshow .arr_r svg polyline { stroke:#fff !important; } /* slider */ .cm_slideshow .royalSlider, .cm_slideshow .like_royalSlider { position:absolute; top:0; left:0; width:100%; height:100vh; } .rsOverflow { width:100% !important; height:100vh !important; } .cm_slideshow .rsSlide { width:100%!important; height:100vh!important; } .cm_slideshow .rsContainer .video_container, .cm_slideshow .rsContainer .lazy_img_cont { margin: 0 auto; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /* ---------------------------------------------------------------------------------------------- footer ---------------------------------------------------------------------------------------------- */ #footer { position: fixed; width: 100%; height: 44px; bottom: -60px; background-color: #fff; padding:0 53px; color:#000; border-top: 1px solid #000; -moz-transition: all .6s ease-out; -o-transition: all .6s ease-out; -ms-transition: all .6s ease-out; transition: all .6s ease-out; z-index: 2002; } body.night #footer { border-top: 1px solid #fff; color:#fff; background-color: #000; } #footer.active { bottom: 0; } #footer_left { position: absolute; top:-7px; left:0px; z-index: 10; } #footer_middle { position: absolute; top:-6px; left:0px; right:0px; margin: 0 auto; display: inline-block; /* viewbox svg 136 14 = 9.714285714285714 */ width:121px; height:13px; z-index: 9; line-height:0; } #footer_middle svg path { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } body.night #footer_middle svg path { fill:#fff!important; } #footer_right { position: absolute; top:-7px; right:0px; z-index: 10; } #footer_right a { margin-left:48px; margin-left:3rem; padding:15px 0; padding:0.9375rem 0; position: relative; } #footer a { color:#000; -webkit-transition: color 1s ease-out; -moz-transition: color 1s ease-out; -o-transition: color 1s ease-out; -ms-transition: color 1s ease-out; transition: color 1s ease-out; } body.night #footer a { color:#fff; } #footer_right a::before { content: ''; border-bottom: 1px solid; position:absolute; left:0; right:0; bottom:13px; -webkit-transition: right 0.3s ease, left 0.3s ease; -moz-transition: right 0.3s ease, left 0.3s ease; -o-transition: right 0.3s ease, left 0.3s ease; transition: right 0.3s ease, left 0.3s ease; } .no-touch #footer_right a:hover::before { left:51%; right:51%; } /* ---------------------------------------------------------------------------------------------- google maps ---------------------------------------------------------------------------------------------- */ .google_maps_aspect { padding-bottom:56.25%; } .google_maps { position:absolute; top:0; left:0; width:100%!important; height:100%!important; z-index:1; } /* ---------------------------------------------------------------------------------------------- responsive [rrr] ---------------------------------------------------------------------------------------------- */ @media only screen and (max-width : 1279px) { /* < small Laptop */ html { font-size:96%; } } @media only screen and (max-width : 1024px) { /* ipad landscape */ html { font-size:95%; } #loading_message { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } #logo svg { width:260px; /* viewbox svg 136 14 = 9.714285714285714 */ height:27px; } body.other_page #logo svg, body.single #logo svg, #logo.smaller svg { width:133px; height:14px; top:3px; } #main_menu_text { width:133px; height:14px; } #work_grid .grid_item { width: 50%; } #work_grid .grid_item { padding: 0 0 20px 0; } .box_grid .box { padding: 0 10px 20px 0 !important; } #work_grid .grid_image, .box_grid .box_inner { width: calc(100% - 20px); margin-left: 10px; margin-right: 10px; } .cm_txt .one_col.col { width: 75%; } } @media only screen and (max-width : 1023px) { /* smaller than ipad landscape */ /* .js will adjust height to balance them, also adjust there if this breakpoint changes */ .cm_txt .four_col { width:50%; } #info_credits .no_credits .col1 { width: 75%; } .cm_txt .four_col .col_inner { max-width: 1000px; } .cm_txt .four_col { margin-bottom:1.8125rem; } #footer { padding: 0 40px; /* same as .content_padding */ } } @media only screen and (max-width : 840px) { #work_grid .grid_image, .box_grid .box_inner { width:100%; margin-left: 0; margin-right: 0; } .box_grid .box, #work_grid .grid_item { padding: 10px; } .box_grid .box_text h3 { font-size: 1.4rem; line-height: 1.5555rem; } } @media only screen and (max-width : 768px) { /* ipad portrait */ html { font-size:83%; } #loading_message { -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -o-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); } .content_padding { padding-left:30px; padding-right:30px; } .parallax_item { padding: 15px; } /* menu */ #main_menu_text { width:116px; height:12px; } #main_menu_lines { width:94px; height:70px; padding-left: 30px; /* same as .content_padding */ } #overlay_x { width:94px; height:70px; padding-right: 30px; /* same as .content_padding */ } body.night #menu-main-menu a::before { border-bottom: 1px solid; } #overlay_x .line1, #overlay_x .line2, #overlay_x .line3, #main_menu_trigger.active .line1, #main_menu_trigger.active .line2, #main_menu_trigger.active .line3 { width:40px; top:20px; } #overlay_x .line1, #overlay_x .line3 { right: -40px; } /* logo */ #logo svg { width:227px; /* viewbox svg 136 14 = 9.714285714285714 */ height:24px; } body.other_page #logo svg, body.single #logo svg, #logo.smaller svg { /* viewbox svg 136 14 = 9.714285714285714 */ width:124px; height:13px; top:3px; } /* rest */ #footer_middle { top: -5px; /* viewbox svg 136 14 = 9.714285714285714 */ width: 105px; height: 11px; } .google_maps_aspect { padding-bottom:100%; } } @media only screen and (max-width : 767px) { /* < ipad portrait */ /* menu */ body.landscape #main_menu_text { display: none; } body.landscape #main_menu_inner { margin-top: 0; } body.landscape #main_menu li { margin-bottom:1.6rem !important; } /* texts */ .cm_txt .two_col.col1, .cm_txt .two_col.col2 { width:100%; padding-left: 0; padding-right:0; } .cm_txt .two_col.col1 { margin-bottom:1.8125rem; } /* jobs */ .cm_job .col { width:100%; } .cm_job .col1, .cm_job .col2 { padding-left: 0; padding-right:0; } .cm_job .col1 { margin-bottom:1.8125rem; } .cm_job .box { padding-bottom: 66%; } #slideshow .arr_l, #slideshow .arr_r { width: 34px; height: 31px; } } @media only screen and (max-width : 736px) { /* iphone 6+ landscape */ #loading_message { -webkit-transform: scale(0.4); -moz-transform: scale(0.4); -o-transform: scale(0.4); -ms-transform: scale(0.4); transform: scale(0.4); } #logo { height:43px; } #main_menu { border:1rem solid #fff; } body.night #main_menu { border:1rem solid #000; } .content_padding { padding-left:20px; padding-right:20px; } .parallax_item { padding: 10px; } body.single #page_title { margin-bottom: 29px; margin-bottom: 1.8125rem; } /* menu */ #main_menu_lines { width:70px; height:54px; padding-top: 12px; padding-left: 20px; /* same as .content_padding */ } #overlay_x { width:70px; height:54px; padding-top: 12px; } #main_menu_trigger.active .line1, #main_menu_trigger.active .line2, #main_menu_trigger.active .line3 { width:36px; top:12px; } #overlay_x .line1, #overlay_x .line2, #overlay_x .line3 { width:36px; top:12px; right: -20px; } } @media only screen and (max-width : 735px) { /* < iphone 6+ landscape */ /* project text/credits */ #info_credits .col { width:100%; } #info_credits .col1, #info_credits .col2 { padding-left:0; padding-right:0; } #info_credits .col1 { margin-bottom:1.8125rem; } #info_credits_close { width:36px; height:20px; opacity: 1; } /* module: Text + image */ .cm_img_txt .col { float:left; width:100%; } .cm_img_txt .col1 { padding-right: 0; margin-bottom:1.8125rem; } .cm_img_txt .col2 { padding-left: 0; } .cm_img_txt.img_text .col2 { padding-right: 7.568%; } body.night .cm_img_txt .col1, body.night .cm_img_txt .col2 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* work list */ .filter_trigger { margin: 0 16px; } /* footer */ #footer_middle { display: none; } #footer a { color:#7f7f7f; } #footer { width:100%; height:36px; } } @media only screen and (max-width : 667px) { /* iphone 6 landscape */ } @media only screen and (max-width : 666px) { /* < iphone 6 landscape */ html { font-size: 84%; } .orator_small_uc { font-size: 13px; line-height: 15px; } .box_grid .box_text h3 { font-size:1.6875rem; line-height:1.875rem; } .box_grid .box, #work_grid .grid_item { width:100%; padding-left: 0; padding-right: 0; padding-top: 6px; } #work_grid .grid_image, .box_grid .box_inner { width:100%; margin-left: 0; margin-right: 0; } .box_grid .box_inner { padding-bottom: 25%; } #work_grid .slide_text h3 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* text */ .cm_txt .one_col.col { width: 100%; } /* rest */ #next_project a::before { border-bottom: 1px solid; } } @media only screen and (max-width : 568px) { /* iphone 5 landscape */ body.landscape #main_menu li { margin-bottom:1.2rem !important; } } @media only screen and (max-width : 567px) { /* < iphone 5 landscape MOBILE VIEW */ #is_mobile_view { display: block; } .hide_mobile { display: none; } .mobile_padding, .content_padding { padding-left:16px; padding-right:16px; } /* no padding for projects */ #content.content_padding { padding-left: 0; padding-right: 0; } /* no padding for projects on start page */ #sp_content { padding-left: 0; padding-right: 0; } #sp_content .box_grid { padding-left: 16px; padding-right: 16px; } .parallax_item { padding: 8px; } /* menu */ #main_menu_lines { width:70px; height:50px; padding-top: 12px; padding-left: 16px; /* same as .content_padding */ } #overlay_x { width:70px; height:50px; padding-top: 12px; padding-right: 16px; /* same as .content_padding */ } #main_menu_trigger.active .line1, #main_menu_trigger.active .line2, #main_menu_trigger.active .line3 { width:36px; top:14px; left:0px; } #overlay_x .line1, #overlay_x .line2, #overlay_x .line3 { width: 36px; top: 14px; right: -20px; } /* projects */ .cm_images_videos { margin-left:0; margin-right:0; } .cm_images_videos .img_wrap { padding: 0 0 1.8125rem 0; } .cm_images_videos .img_wrap { width:100% !important; margin-left:0 !important; } .cm_images_videos .img_wrap { padding-bottom: 18px; } #info_credits_close { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } /* footer */ #footer { width:100%; height:54px; } #footer_left { position: relative; top:-3px; } #footer_right { position: relative; top:0; right:auto; left:0; } #footer_right a { top: 3px; margin-left:0; margin-right:16px; padding:14px 0; position: relative; } #slideshow, #slideshow_bg { display: none !important; } body.single-post .img_wrap.clickable { cursor: default; } } @media only screen and (max-width : 480px) { /* module: Text */ .cm_txt .four_col { width:100%; padding-right: 0; height:auto!important; } .cm_txt .four_col.col1, .cm_txt .four_col.col2 { margin-bottom:1.8125rem; } } @media only screen and (max-width : 414px) { /* iphone 6+ portrait */ #logo { top: 5.5rem; } #info_credits .no_credits .col1 { width: 100%; } } @media only screen and (max-width : 413px) { /* < iphone 6+ portrait */ .filter_trigger { margin: 0 12px; } #logo svg { width:219px; /* viewbox svg 136 14 = 9.714285714285714 */ height:23px; top:12px; } body.other_page #logo svg, body.single #logo svg, #logo.smaller svg { /* viewbox svg 136 14 = 9.714285714285714 */ width:112px; height:12px; top:1px; } } @media only screen and (max-width : 375px) { /* iphone 6 portrait */ #loading_message { -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -o-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); } #logo { height:40px; } #logo svg { width:190px; /* viewbox svg 136 14 = 9.714285714285714 */ height:21px; } #overlay_x .line, #main_menu_trigger .line { height: 2px; width: 28px; margin-bottom: 6px; } #main_menu_trigger.active .line1, #main_menu_trigger.active .line2, #main_menu_trigger.active .line3 { width:34px; top:14px; left:0px; } #overlay_x .line1, #overlay_x .line2, #overlay_x .line3 { width:34px; top:14px; right: -20px; } #overlay_x .line3, #main_menu_trigger.active .line3 { -webkit-transform: rotate(-45deg) translate3d(7px, -6px, 0); -o-transform: rotate(-45deg) translate3d(7px, -6px, 0); -ms-transform: rotate(-45deg) translate3d(7px, -6px, 0); -moz-transform: rotate(-45deg) translate3d(7px, -6px, 0); transform: rotate(-45deg) translate3d(7px, -6px, 0); } .box_grid .box_text h3 { font-size:1.4rem; line-height:1.5555rem; } } @media only screen and (max-width : 320px) { /* iphone 5 portrait */ #loading_message { -webkit-transform: scale(0.2); -moz-transform: scale(0.2); -o-transform: scale(0.2); -ms-transform: scale(0.2); transform: scale(0.2); } } @media only screen and (max-width : 319px) { #main_menu { min-width:100%; } }