/* CSS variables */ :root { --main-white-color: white; /* for owl */ --main-black-color: black; /* for owl */ --margin-gap: 2vw; /* main interface margin gap */ --logo-multiplier: 9; /* use this to size the remagination logo, and then we can size the buttons as a given fraction of the width to keep them sized */ --logo-re-ratio: 0.18069904; /* ratio of re>remagination in logo width */ --button-sqA: calc( var(--logo-multiplier) * var(--logo-re-ratio)); --button-sq: calc( var(--logo-multiplier) * var(--logo-re-ratio) * 1rem); /* calculate the button square based on logo */ --button-sq-mini: calc( var(--logo-multiplier) * var(--logo-re-ratio) * 0.8rem); /* calculate the button square based on logo */ --button-stretched: calc( var(--button-sq) + var(--margin-gap)); /* calculate the button rectangle based on square and margin gap */ --button-spacing: 0.1; /* spacing as % of button width in nav buttons */ --button-gap: calc( var(--button-sq) * var(--button-spacing)); --socbutton-sq: calc( var(--logo-multiplier) * var(--logo-re-ratio) * 0.65rem); /* calculate the button square based on logo */ --newssocbutton-sq: calc( var(--logo-multiplier) * var(--logo-re-ratio) * 0.45rem); /* calculate the button square based on logo */ --logo_width: calc( var(--logo-multiplier) * 1rem); --logo_small_width: calc( (var(--button-sq) * 4) + (var(--button-gap) * 3)); --buttonsq_smalllogo: calc(var(--logo-re-ratio) * var(--logo_small_width)); --sectionAbout-bgcol: #f6f6f6; /* about section currently */ --sectionWork-bgcol: #3e3e3e; /* work section currently */ --highlight: 225,14,186; --highlight-col: rgb(var(--highlight)); /* highlight */ --proj_margin: calc(var(--margin-gap) + var(--button-sq) + calc(0.5 * var(--button-gap))); --proj_margin: calc(var(--button-sq) + calc(2 * var(--margin-gap))); --proj_margin_half: calc(0.5 * calc(var(--margin-gap) + var(--button-sq) + calc(0.5 * var(--button-gap)))); --mainLeftMargin: 12.5%; --bottomNavonRight: 55%; } /* UI structure */ html { height: 100%; margin: 0; font-size: calc(0.6em + 1vw); } /* used to make font size more fluid, and whole layout will stretch better */ body { background:var(--sectionC-bgcol); height: 100%; overflow: scroll; font-family: 'Merriweather','Roboto','Montserrat', sans-serif; -webkit-overflow-scrolling: touch; } .hidemenow { display:none !important; } a { outline:none; } /* ::-webkit-scrollbar { display: none; } */ /* logo, ui, nav etc */ .remagination_logo { z-index:200000; position: fixed; top: var(--margin-gap); left: var(--margin-gap); -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .remagination_logo { width: var(--logo_width); -webkit-transition-timing-function: cubic-bezier(.445,.05,.55,.95); -o-transition-timing-function: cubic-bezier(.445,.05,.55,.95); transition-timing-function: cubic-bezier(.445,.05,.55,.95); -webkit-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s; } .remagination_logo_sm { width: var(--logo_small_width); -webkit-transition-timing-function: cubic-bezier(.445,.05,.55,.95); -o-transition-timing-function: cubic-bezier(.445,.05,.55,.95); transition-timing-function: cubic-bezier(.445,.05,.55,.95); -webkit-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s; } .remagination_logo_90 { -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; top:calc(var(--logo_small_width) + var(--margin-gap)); left:calc(0.6 * var(--margin-gap)); -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition-timing-function: cubic-bezier(.445,.05,.55,.95); -o-transition-timing-function: cubic-bezier(.445,.05,.55,.95); transition-timing-function: cubic-bezier(.445,.05,.55,.95); -webkit-transition-duration: .35s; -o-transition-duration: .35s; transition-duration: .35s; } .remagination_logo_wh svg path { fill: #fff; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;} .remagination_logo_bl svg path { fill: #000; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;} .remagination_logo_bl_delay svg path { fill: #000; -webkit-transition: all 0.5s 0.25s; -o-transition: all 0.5s 0.25s; transition: all 0.5s 0.25s;;} .remagination_logo_pink svg path { fill: var(--highlight-col); -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s;} .remagination_logo_gr svg path { fill: #999; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;} /* logo fills / strokes etc */ /* .remagination_logo svg path#R { fill: #000; } */ /* .remagination_logo svg path { stroke-width: 0.1; stroke: #666; } border:2px solid rgba(255, 255, 255, 0.9); s*/ /* hamburger spinny menu */ #nav-menu { width: 70%; height: 100%; margin: auto; position: relative; cursor: pointer; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; } #nav-menu span { display: block; position: absolute; height: 0.08em; height: 1.5px; width: 100%; background: #333; border-radius: 0.08em; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } #nav-menu.invert span { background: #fff; } #nav-menu span:nth-child(1) { top: 0.4em; } #nav-menu span:nth-child(2) { top: 0.8em; } #nav-menu span:nth-child(3) { top: 1.2em; } #nav-menu.open span:nth-child(1) { top: 0.8em; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } #nav-menu.open span:nth-child(2) { opacity: 0; left: -60px; } #nav-menu.open span:nth-child(3) { top: 0.8em; -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } .buttons_wrapper { pointer-events: none; position: absolute; width:100%; height:100%; z-index:1; top:0; left:0; } .nav_strip_horiz { pointer-events: auto; display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; left:var(--margin-gap); bottom: var(--margin-gap); z-index:1000; -webkit-transition: .25s ease-in-out .5s; -o-transition: .25s ease-in-out .5s; transition: .25s ease-in-out .5s; } /*.nav_strip_horiz.nudgedup { bottom: calc(var(--margin-gap) + 50px); }*/ .nav_strip_vert { pointer-events: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: absolute; left:var(--margin-gap); bottom: calc(var(--button-stretched) + var(--button-gap)); z-index:1000; -webkit-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } /*.nav_strip_vert.nudgedup { bottom: calc(var(--button-stretched) + var(--button-gap) + 50px); }*/ .nav_strip_vert_shiftup { bottom: calc(var(--button-stretched) + var(--button-sq) + var(--button-gap) + var(--button-sq) + var(--button-gap) + var(--button-gap)); -webkit-transition: .25s ease-in-out .5s; -o-transition: .25s ease-in-out .5s; -webkit-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } .nav_strip_horizvert_shift { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: absolute; left:var(--margin-gap); bottom: var(--margin-gap); z-index:1000; -webkit-transition: .25s ease-in-out .5s; -o-transition: .25s ease-in-out .5s; transition: .25s ease-in-out .5s;} .nav_strip_vert_right { pointer-events: auto; opacity:1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: absolute; right:var(--margin-gap); bottom: calc(var(--button-stretched) + var(--button-gap)); z-index:1000; -webkit-transition: all 0.25s 0.25s; -o-transition: all 0.25s 0.25s; transition: all 0.25s 0.25s; } /*.nav_strip_vert_right.nudgedup { bottom: calc(var(--button-stretched) + var(--button-gap) + 50px);}*/ .nav_strip_vert_right_nudge { opacity:0; bottom: calc(var(--button-stretched) + var(--button-gap) + var(--button-sq) + var(--button-gap)); -webkit-transition: all 0.25s 0.1s; -o-transition: all 0.25s 0.1s; transition: all 0.25s 0.1s; } .nav_strip_vert_right_scroll { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: fixed; right:var(--margin-gap); bottom: var(--margin-gap); z-index:999; } .button_sq { overflow:hidden; cursor:pointer; width: var(--button-sq); height:var(--button-sq); position: relative; background-color:rgba(255, 255, 255, 0.5); bottom: 0; margin-right:var(--button-gap); -webkit-transition: all 0.25s; -o-transition: all 0.25s; transition: all 0.25s; } .nav_strip_horizvert_shift .button_sq { margin-top: var(--button-gap);} .button_sq_insetbdr { -webkit-box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.6); } .button_sq_light { background-color:#fff; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .button_stretched { height:var(--button-stretched); bottom: 0; } .btn_up { background-color:rgba(255, 255, 255, 0.5); background-size: cover; background-position: center; } .btn_down { background-color:rgba(255, 255, 255, 0.5); background-size: cover; background-position: center; } .btn_prev { background-color:rgba(255, 255, 255, 0.5); background-size: cover; background-position: center; } .btn_next { background-color:rgba(255, 255, 255, 0.5); background-size: cover; background-position: center; } .btn_scrollup { margin-right:0; background-color:rgba(255, 255, 255, 0.5); background-size: cover; background-position: center; } .btn_scrolldown { margin-right:0; margin-top:var(--button-gap); background-color:rgba(255, 255, 255, 0.5); background-size: cover; background-position: center; } .button_scroll_pair { opacity:1; z-index:1001; bottom:var(--margin-gap); -webkit-transition: .25s ease-in-out .5s; -o-transition: .25s ease-in-out .5s; transition: .25s ease-in-out .5s; } .button_scroll_pair_off { opacity:0; z-index:999; -webkit-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } .btn_plus, .btn_menu_bgr { margin-right:0; } .btn_plus { opacity:1; -webkit-transition: .25s ease-in-out .5s; -o-transition: .25s ease-in-out .5s; transition: .25s ease-in-out .5s; } .btn_plus_mini { background:none; width:var(--button-sq-mini); height:var(--button-sq-mini); margin:0 auto; opacity:1; -webkit-transition: .25s ease-in-out .5s; -o-transition: .25s ease-in-out .5s; transition: .25s ease-in-out .5s; } .btn_plus_mini svg { vertical-align: middle; -webkit-transition: .15s ease-in-out; -o-transition: .15s ease-in-out; transition: .15s ease-in-out; } .nav_strip_vert .button_sq { margin-top:var(--button-gap);} .button_sq_top { background-color: rgba(255, 255, 255, 0.7); -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .button_sq_dark { background-color:rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.6); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.6); -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;} .button_sq_downtoup svg { cursor:pointer; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; } .button_sq_uptodown svg { cursor:pointer; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; } .btn_plus_plustocross svg { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } .btn_plus_minus45 svg { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: .15s ease-in-out; -o-transition: .15s ease-in-out; transition: .15s ease-in-out; } .btn_plus_crosstoplus svg { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } .btn_plus_fadeout___ { opacity:0; -webkit-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } .btn_menu { display:none; margin-right:0; background-color:rgba(255, 255, 255, 0.8); width:calc(2 * var(--button-sq)); text-align:center; color: #333; line-height: var(--button-sq); font-size:0.6rem; font-weight:500; letter-spacing: 0.2em; text-transform:uppercase; } .btn_menu_sq { margin-right:0; background-color:rgba(255, 255, 255, 0.8); text-align:center; color: #333; padding-top: calc(0.2 * var(--button-sq)); line-height: calc(0.4 * var(--button-sq)); font-size:0.6rem; font-weight:500; letter-spacing: 0.2em; text-transform:uppercase; } .button_sq_top { position: fixed; z-index: 10001; top: var(--margin-gap); bottom: auto; right:var(--margin-gap); } .button_sq_close { margin-right:0; opacity:0; position: fixed; z-index: 4; top: calc(var(--margin-gap) + var(--button-sq) + var(--button-gap) + var(--button-sq) + var(--button-gap)); bottom: auto; right:var(--margin-gap); -webkit-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } .button_sq_close svg { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } .button_sq_close_on { opacity:1; top: calc(var(--margin-gap) + var(--button-sq) + var(--button-gap)); -webkit-transition: .25s ease-in-out 0.5s; -o-transition: .25s ease-in-out 0.5s; transition: .25s ease-in-out 0.5s; } .button_sq_close_on svg { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } .button_sq_news_close { width:var(--buttonsq_smalllogo); height:var(--buttonsq_smalllogo); background:none; opacity:1; position: absolute; z-index: 10006; top: var(--margin-gap); bottom: auto; right:var(--margin-gap); margin-right:0; } .button_sq_news_close svg { vertical-align: top; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } .button_sq_news_close_on svg { vertical-align: top; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } .button_sq_news_close_insetbdr { -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); } /* hovers */ .button_sq_dark:hover { background-color:rgba(0, 0, 0, 0.2) !important; -webkit-box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.6) !important; box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.6) !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;} .button_sq:not(.button_sq_disabled):hover { -webkit-box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.6); background-color:rgba(255, 255, 255, 0.8); -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;} .button_sq:not(.button_sq_disabled):hover svg polyline { stroke: var(--highlight-col); -webkit-transition: all 0.25s; -o-transition: all 0.25s; transition: all 0.25s;} .button_sq:not(.button_sq_disabled):hover svg path { fill: var(--highlight-col); -webkit-transition: all 0.25s; -o-transition: all 0.25s; transition: all 0.25s;} .button_sq:not(.button_sq_disabled):hover svg line { stroke: var(--highlight-col); -webkit-transition: all 0.25s; -o-transition: all 0.25s; transition: all 0.25s;} .button_sq:not(.button_sq_disabled):hover svg polyline { stroke: var(--highlight-col); -webkit-transition: all 0.25s; -o-transition: all 0.25s; transition: all 0.25s;} .btn_menu_bgr_hover span { background: var(--highlight-col) !important; -webkit-transition: all 0.25s; -o-transition: all 0.25s; transition: all 0.25s;} .button_sq_close:not(.button_sq_disabled):hover svg line { stroke: var(--highlight-col); -webkit-transition: all 0.25s; -o-transition: all 0.25s; transition: all 0.25s;} .button_sq_news_close:not(.button_sq_disabled):hover { -webkit-box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3); background:none; -webkit-transition: all 0.25s; -o-transition: all 0.25s; transition: all 0.25s;} .button_sq_news_close:not(.button_sq_disabled):hover svg line { stroke: #fff; -webkit-transition: all 0.25s; -o-transition: all 0.25s; transition: all 0.25s;} .btn_plus_mini:not(.button_sq_disabled):hover svg line { stroke: var(--highlight-col); -webkit-transition: all 0.25s; -o-transition: all 0.25s; transition: all 0.25s;} .btn_plus_mini:not(.button_sq_disabled):hover { -webkit-box-shadow: none; box-shadow: none; background:none; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;} /* disabled buttons */ .button_sq_disabled svg polyline { pointer: arrow; pointer-events: none; stroke: #666; -webkit-transition: all 0.25s; -o-transition: all 0.25s; transition: all 0.25s;} .button_sq_disabled svg polyline { pointer: arrow; pointer-events: none; stroke: #666; -webkit-transition: all 0.25s; -o-transition: all 0.25s; transition: all 0.25s;} .button_sq_disabled span { pointer-events: none; background: #666 !important; -webkit-transition: all 0.25s; -o-transition: all 0.25s; transition: all 0.25s;} .button_sq_disabled { cursor: default; } @-webkit-keyframes glow { to { /*border-color: #69c800;*/ -webkit-box-shadow: inset 0 0 7px 7px rgba(236, 0, 189, 0.2); box-shadow: inset 0 0 7px 7px rgba(236, 0, 189, 0.2); } } .button_glow { /*border: 1px solid transparent;*/ -webkit-animation: glow 1.0s infinite alternate; -webkit-transition: border 1.0s linear, box-shadow 1.0s linear; -webkit-transition: border 1.0s linear, -webkit-box-shadow 1.0s linear; transition: border 1.0s linear, -webkit-box-shadow 1.0s linear; -o-transition: border 1.0s linear, box-shadow 1.0s linear; transition: border 1.0s linear, box-shadow 1.0s linear; transition: border 1.0s linear, box-shadow 1.0s linear, -webkit-box-shadow 1.0s linear; } /* Fullpages dots navigation */ #fp-nav { top: auto; width: var(--button-sq); bottom: calc( var(--margin-gap) + calc(2 * var(--button-sq)) + calc(2 * var(--button-gap)));-webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /*#fp-nav.nudgedup { bottom: calc( var(--margin-gap) + calc(2 * var(--button-sq)) + 50px + calc(2 * var(--button-gap))); } */ #fp-nav.fp-nav-budgeup { bottom: calc( var(--margin-gap) + calc(4 * var(--button-sq)) + calc(4 * var(--button-gap))); -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #fp-nav ul { width:100%; margin-left: auto; margin-right: auto; } #fp-nav ul li { width:100%; margin-left: auto; margin-right: auto; } #fp-nav.fp-left { left:var(--margin-gap); } .fp-slidesNav { opacity:1; height: var(--button-sq); bottom:var(--margin-gap) !important; } .fp-slidesNav_off { opacity:0; } .fp-slidesNav ul { height: 100%; margin-left:calc( var(--margin-gap) + calc(3 * var(--button-sq)) + calc(3 * var(--button-gap))); } .fp-slidesNav ul li { line-height: var(--button-sq); height:100%; padding:0; margin-top: 0; } #fp-nav ul li a span, .fp-slidesNav ul li a span { background: #fff; } #fp-nav ul li a.active span { margin:0; height: 0.075em; width: 75%; border-radius: 0; } #fp-nav ul li:hover a.active span { margin:0; height: 0.075em; width: 100%; border-radius: 0; } .fp-slidesNav ul li a.active span { margin:0; height: 75%; width: 0.075em; border-radius: 0; } .fp-slidesNav ul li:hover a.active span { margin:0; height: 100%; width: 0.075em; border-radius: 0; } #fp-nav ul li a span { margin:0; border-radius: 0; position: absolute; z-index: 1; height: 0.075em; width: 60%; border: 0; background: rgba(255, 255, 255, 0.7); left: 0; top: 50%; -webkit-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .fp-slidesNav ul li a span { margin:0; border-radius: 0; position: absolute; z-index: 1; height: 60%; width: 0.075em; border: 0; background: rgba(255, 255, 255, 0.7); left: 0; top:auto; bottom:0; -webkit-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } #fp-nav ul li:hover a span { background:var(--highlight-col); margin:0; width: 100%; height: 0.075em; border-radius: 0;} .fp-slidesNav ul li:hover a span { background:var(--highlight-col); margin:0; width: 0.075em; height: 100%; border-radius: 0;} #fp-nav ul li { height: var(--button-sq); margin:0; } .fp-slidesNav ul li { line-height: var(--button-sq); height: 100%; padding: 0; margin-top: 0; margin-left: 0.6em; margin-right: 0.6em; } #fullnav { background:rgba(37,37,37,1); z-index:10001; width:100%; height: 100%; position:fixed; top:0; } .fullnav_off { left:100%; -webkit-transition-timing-function: cubic-bezier(.445,.05,.55,.95); -o-transition-timing-function: cubic-bezier(.445,.05,.55,.95); transition-timing-function: cubic-bezier(.445,.05,.55,.95); -webkit-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s;} .fullnav_on { left:0; -webkit-transition-timing-function: cubic-bezier(.445,.05,.55,.95); -o-transition-timing-function: cubic-bezier(.445,.05,.55,.95); transition-timing-function: cubic-bezier(.445,.05,.55,.95); -webkit-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s;} /* slides */ .slidebg { position: relative; width:100%; height:100%; } /* auto 100%; */ .slide .fp-bg .object-fit { width:100%; height:100%; margin:0; padding:0; display: block; -o-object-fit: cover; object-fit: cover;} #about_slide2 .fp-bg { width:100%; height:100%; background-color: var(--sectionAbout-bgcol); } #about_slide5 .fp-bg { width:100%; height:100%; background-color:var(--sectionAbout-bgcol);} .label_wrap { position: absolute; right:var(--margin-gap); bottom: var(--margin-gap); } .slide_label_bh, .slide_label_ph, .slide_label_wr { font-family:'Montserrat'; position: relative; width: 100%; height: 100%; color:#fff; font-size:0.5rem; font-weight:500; letter-spacing: 0.2em; text-transform:uppercase;} .slide_label_bh:before { content: "The Boathouse. 2018"; position: absolute; white-space:nowrap; right: 0; bottom: 0; -webkit-transform: rotate(-90deg) translate(100%, 0); -ms-transform: rotate(-90deg) translate(100%, 0); transform: rotate(-90deg) translate(100%, 0); -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; } .slide_label_ph:before { content: "The Penthouse. 2013"; position: absolute; white-space:nowrap; right: 0; bottom: 0; -webkit-transform: rotate(-90deg) translate(100%, 0); -ms-transform: rotate(-90deg) translate(100%, 0); transform: rotate(-90deg) translate(100%, 0); -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; } .slide_label_wr:before { content: "The Hotel - Wanderooms. 2014"; position: absolute; white-space:nowrap; right: 0; bottom: 0; -webkit-transform: rotate(-90deg) translate(100%, 0); -ms-transform: rotate(-90deg) translate(100%, 0); transform: rotate(-90deg) translate(100%, 0); -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; } .slide_hdr { text-align:right; z-index: 3; margin:0; padding:0; position: absolute; bottom:var(--margin-gap); right:var(--margin-gap); color:#fff; font-family:'Montserrat'; font-weight:400; font-size:1.1rem; letter-spacing: 0.30rem; -webkit-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; } .slide_hdr span, .slide_hdr_txtblock .ttl span, .slide_hdr_project_wrapper .ttl span { letter-spacing: 0; } .slide_hdr .wdrttl { letter-spacing: 0.30rem; } .slide_hdr_block { overflow: hidden; position:absolute; z-index: 2; top:100%; left:100%; width:65%; height:0%; background: rgba(255, 255, 255, 0.9); -webkit-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; } .slide_hdr_block_wrap { position:relative; height:100%; } .slide_hdr_block_open { top: 40%; left:35%; height:60%; -webkit-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; } .slide_hdr_block_open_full { top: 0%; left:0%; height:100%; width:100%; -webkit-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; } /*.slide_hdr_open { bottom: 50%; color:#000; font-family:'Montserrat'; font-weight:500; font-size:2.1rem; letter-spacing: 0.4rem; -webkit-transition: .6s ease-in-out; -moz-transition: .6s ease-in-out; -o-transition: .6s ease-in-out; transition: .6s ease-in-out; }*/ .text_fader { opacity:0; -webkit-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;} .slide_hdr_txtblock { position:absolute; cursor:pointer; z-index: 3; top:0%; left:0%; width:100%; height:100%; -webkit-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; } .slide_hdr_txtblock_right { left:100%; width:100%; height:100%; -webkit-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } .slide_hdr_block .ttl { font-family:'Montserrat'; color:#000; font-weight:500; font-size:2.1rem; letter-spacing: 0.4rem; } /* .slide_hdr_txtblock .ttl { display:inline-block; position: absolute; right:var(--margin-gap); padding-top:2rem; padding-bottom:2rem; -webkit-transition: .5s ease-in-out 0.1s; -moz-transition: .5s ease-in-out 0.1s; -o-transition: .5s ease-in-out 0.1s; transition: .5s ease-in-out 0.1s;} */ .slide_hdr_txtblock .ttl { display:inline-block; position: absolute; padding-left: 3rem; padding-top:2rem; padding-bottom:2rem; -webkit-transition: .5s ease-in-out 0.1s; -o-transition: .5s ease-in-out 0.1s; transition: .5s ease-in-out 0.1s;} .slide_hdr_txtblock .block { padding-right:9rem; margin-top: 6.5rem; padding-left: 3rem; font-family: 'Merriweather'; color:#333; font-weight: 300; font-size: 0.8rem; line-height: 1.2rem; } .slide_hdr_project_wrapper .block { font-family: 'Merriweather'; color:#333; font-weight: 300; font-size: 0.8rem; line-height: 1.2rem; } .slide_hdr_project_wrapper .block .project_summary_block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding:0 var(--proj_margin) 0 var(--proj_margin); max-height: 0; overflow:hidden; -webkit-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } .slide_hdr_project_wrapper .block .project_summary_block_open { max-height: 1000px; -webkit-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; } .slide_hdr_project_wrapper .block .project_summary_block div { -webkit-box-flex:1; -ms-flex:1; flex:1; padding: 0; text-align:left; } .slide_hdr_project_wrapper .block .project_summary_block > div:nth-of-type(1) { padding: 0.5% 2% 4% 4%; } .slide_hdr_project_wrapper .block .project_summary_block > div:nth-of-type(2) { padding: 0.5% 4% 4% 2%; } #slide_hdr_project_hotel .project_summary_block { display:block; } #slide_hdr_project_hotel.slide_hdr_project_wrapper .block .project_summary_block div.project_summary_block_fullwidth { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 0; text-align: center; } #slide_hdr_project_hotel .project_summary_block_inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding:0 var(--proj_margin) 0 var(--proj_margin); overflow:hidden;} #slide_hdr_project_hotel .block .project_summary_block_inner div { -webkit-box-flex:1; -ms-flex:1; flex:1; padding: 0; text-align:left; } #slide_hdr_project_hotel.slide_hdr_project_wrapper .block .project_summary_block { padding: 0; } #slide_hdr_project_hotel.slide_hdr_project_wrapper .block .project_summary_block_inner > div:nth-of-type(1) { padding: 2% 2% 4% 4%; } #slide_hdr_project_hotel.slide_hdr_project_wrapper .block .project_summary_block_inner > div:nth-of-type(2) { padding: 2% 4% 4% 2%; } .slide_hdr_project_wrapper { overflow:scroll; height:100%; padding:0; width:100%; margin:0 auto; text-align:center; position:absolute; z-index:1; top:0; left:0; opacity:0; -webkit-transition: .5s ease-in-out 0.1s; -o-transition: .5s ease-in-out 0.1s; transition: .5s ease-in-out 0.1s; } .slide_hdr_project_wrapper_on { opacity:1; -webkit-transition: .5s ease-in-out 0.5s; -o-transition: .5s ease-in-out 0.5s; transition: .5s ease-in-out 0.5s; } .slide_hdr_project_wrapper .ttl { padding-top:10% } .summary_expander { display:inline-block; margin:0 auto; margin-bottom:3%; } .project_block_bg_dark .ttl { color:#fff; padding-top: 0; padding-bottom: 4%;} .about_bg { position: absolute; width:100%; height:100%; background:var(--sectionAbout-bgcol); opacity:0.75; } #about_slide2 .about_bg { position: absolute; width:100%; height:100%; background:var(--sectionAbout-bgcol); opacity:0.25; } #about_slide3 .about_bg { position: absolute; width:100%; height:100%; background:var(--sectionAbout-bgcol); } #about_slide4 .about_bg { position: absolute; width:100%; height:100%; background:var(--sectionAbout-bgcol); } #about_slide5 .about_bg { position: absolute; width:100%; height:100%; background:var(--sectionAbout-bgcol); opacity:0.75; } .about_bgfade { position: absolute; width:100%; height:100%; background-image: /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6f6f6+29,f6f6f6+87,f6f6f6+100&0+26,1+93 */ background: -moz-linear-gradient(left, rgba(246,246,246,0) 26%, rgba(246,246,246,0.04) 29%, rgba(246,246,246,0.91) 87%, rgba(246,246,246,1) 93%, rgba(246,246,246,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(246,246,246,0) 26%,rgba(246,246,246,0.04) 29%,rgba(246,246,246,0.91) 87%,rgba(246,246,246,1) 93%,rgba(246,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(246,246,246,0) 26%,rgba(246,246,246,0.04) 29%,rgba(246,246,246,0.91) 87%,rgba(246,246,246,1) 93%,rgba(246,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f6f6f6', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */ } #about_slide3 .about_bgfade, #about_slide4 .about_bgfade { position: absolute; width:100%; height:100%; } #about_slide3 .about_bgfade { position: absolute; width:100%; height:100%; background-image: /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6f6f6+32,f6f6f6+43,f6f6f6+99&1+26,1+26,0+81 */ background: -moz-linear-gradient(left, rgba(246,246,246,1) 26%, rgba(246,246,246,0.89) 32%, rgba(246,246,246,0.69) 43%, rgba(246,246,246,0) 81%, rgba(246,246,246,0) 99%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(246,246,246,1) 26%,rgba(246,246,246,0.89) 32%,rgba(246,246,246,0.69) 43%,rgba(246,246,246,0) 81%,rgba(246,246,246,0) 99%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(246,246,246,1) 26%,rgba(246,246,246,0.89) 32%,rgba(246,246,246,0.69) 43%,rgba(246,246,246,0) 81%,rgba(246,246,246,0) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#00f6f6f6',GradientType=1 ); /* IE6-9 */ } #about_slide2 .about_bgfade, #about_slide5 .about_bgfade { position: absolute; width:100%; height:100%; background-image: /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6f6f6+8,f6f6f6+14,f6f6f6+14,f6f6f6+14,f6f6f6+15,f6f6f6+54,f6f6f6+54&1+1,1+1,1+3,1+9,0+38 */ background: -moz-linear-gradient(left, rgba(246,246,246,1) 1%, rgba(246,246,246,1) 3%, rgba(246,246,246,1) 8%, rgba(246,246,246,1) 9%, rgba(246,246,246,0.83) 14%, rgba(246,246,246,0.8) 15%, rgba(246,246,246,0) 38%, rgba(246,246,246,0) 54%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(246,246,246,1) 1%,rgba(246,246,246,1) 3%,rgba(246,246,246,1) 8%,rgba(246,246,246,1) 9%,rgba(246,246,246,0.83) 14%,rgba(246,246,246,0.8) 15%,rgba(246,246,246,0) 38%,rgba(246,246,246,0) 54%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(246,246,246,1) 1%,rgba(246,246,246,1) 3%,rgba(246,246,246,1) 8%,rgba(246,246,246,1) 9%,rgba(246,246,246,0.83) 14%,rgba(246,246,246,0.8) 15%,rgba(246,246,246,0) 38%,rgba(246,246,246,0) 54%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#00f6f6f6',GradientType=1 ); /* IE6-9 */ } .about_section_wrap { position: relative; color:#000; overflow-x:scroll; min-width: 100%; width:auto; height:100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; } .about_fullwidth_wrap { min-width: 100%; width:100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; height:100%;} .hero_text_wrap, .workhero_text_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: 'Montserrat','Roboto'; min-width: 100%; height:75%; } .workhero_text_wrap { position:relative; } .hero_text_wrap div.hlwrap { width:100%; padding-bottom:5%; padding-left:var(--mainLeftMargin); padding-right:12.5%; } .copyblockwrap { padding-bottom:8%; padding-left:12.5%; padding-right:12.5%; } #work .copyblockwrap { background: none; } #about_slide3 .copyblockwrap { padding-left:10%; padding-right:20%; padding-bottom:0; background:none; } #about_slide3 .copyblockwrap .subhdrtitle { margin-bottom: 0; } #about_slide4 .copyblockwrap { padding-left:5%; padding-right:30%; background:none; } #about_slide5 .copyblockwrap { padding-left:5%; padding-right:30%; background:none; } #about_slide6 .copyblockwrap { padding-left:5%; padding-right:30%; } #about_slide3 .copyblockwrap h2, #about_slide3 .copyblockwrap h3 { padding-left:10%; padding-right: 30%; } #about_slide4 .copyblockwrap h2, #about_slide4 .copyblockwrap h3 { padding-left:15%; } #about_slide5 .copyblockwrap h2, #about_slide5 .copyblockwrap h3 { padding-left:15%; } #about_slide6 .copyblockwrap h2, #about_slide6 .copyblockwrap h3 { padding-left:15%; } /*#work .copyblockwrap { background:none; } #work .copyblockwrap h2, #work .copyblockwrap h3 { padding-left:10%; }*/ .hero_text_wrap h1, .workhero_text_wrap h1 { font-weight: 900; } .hero_text_wrap { min-width: 100%; height:75%; } .workhero_text_wrap { min-width: 100%; height:100%; display: block; } .hero_text_wrap2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: 'Montserrat','Merriweather','Roboto'; min-width: 100%; height:75%; } .hero_text_wrap3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: 'Montserrat','Merriweather','Roboto'; min-width: 100%; height:75%; } .herotext_l1 { font-size: 4.5vw; line-height: 4vw; } .herotext_l2 { font-size: 4.5vw; line-height: 4vw; } .herotext_l3 { font-size: 4.5vw; line-height: 4vw; } .copyblockwrap h2 { font-family: 'Montserrat'; font-weight: 800; font-size: 2.4vw; line-height: 3vw; } .copyblockwrap h3 { font-family: 'Merriweather'; color:#333; font-weight: 300; font-size: 1.5vw; line-height: 2.4vw; } .arrowscribble { width:100%; height:10.3%; } .subhdrtitle_wrap { position: relative; width: 100%; height:100%; } .subhdrtitle_ttl_wrap { position: absolute; left:12.5%; bottom: 4%; } .subhdrtitle { font-family: 'Montserrat','Roboto'; font-size: 6vw; font-weight: 900; position: relative; color:#000; } .subhdrtitle____:before { content: "remagineers"; position: absolute; white-space:nowrap; right: 0; bottom: 0; -webkit-transform: rotate(-90deg) translate(100%, 0); -ms-transform: rotate(-90deg) translate(100%, 0); transform: rotate(-90deg) translate(100%, 0); -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; } .subhdrtitle_team { font-size: 2vw; font-weight: 300; line-height: 3vw; height: 50%; position: absolute; left:25%; width: 70%; border:1px solid orange; } .remagineer { white-space:nowrap; } /* projects page carousel */ /*#c-carousel { height: auto; padding: 0; margin: 0; min-width: 100%; bottom: 0; position: absolute; } #c-carousel { background: #fff; } #c-carousel * { font-family: Arial, Geneva, SunSans-Regular, sans-serif; font-size: 14px; color: #222; line-height: 20px; } */ #wrapper { height: 100%; width: 100%; min-height: 30%; min-width: 900px; padding-top: 1px; } #slider { margin: 0 0 0 0; height: 100%; overflow: hidden; background: url('/img/ajax-loader.gif') center center no-repeat; } #slider .p2_slide { position: relative; display: none; height: 100%; float: left; background-position: center right; cursor: pointer; border-left: 1px solid #fff; } #slider .p2_slide:first-child { border: none; } #slider .p2_slide.active { cursor: default; } #slider .slide-block { position: absolute; left: var(--margin-gap); top: 0px; display: inline-block; width: calc( (var(--button-sq) * 4) + (var(--button-gap) * 3)); background-color: #fff; background-color: rgba(255,255,255, 0.8); font-size: 14px; color: #134B94; border: 1px solid #fff; overflow: hidden; } #slider .slide-block h4 { font-size: 36px; font-weight: bold; margin: 0 0 10px 0; line-height: 1; } #slider .slide-block p { margin: 0; } /* Nav menu */ .navmenu_container { height:100%; display:-webkit-box; display:-ms-flexbox; display:flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .navmenu_wrap { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; padding-left:10%; padding-right:10%; } /* height:50%; */ .navmenu_panel { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .navmenu_panel ul { margin-left:0; padding-left:0; list-style:none; font-family: 'Montserrat','Roboto'; font-weight: 700; font-size: 2.7vw; line-height: 4.5vw; } .navmenu_panel ul li.hdr { line-height: 1.5vw; } .navmenu_panel ul li.hdr a { text-decoration:none; color:#6c6c6c; font-weight: 600; font-size: 1.2vw; } .navmenu_panel ul li a { text-decoration:none; color:#fff;} .navmenu_panel ul li a.reducedtxt { text-decoration:none; color:#fff; font-size: 1.8vw;position: relative;top:-0.1vw; } .navmenu_panel ul li a.disable:hover { color:#6c6c6c; cursor:default; } .navmenu_panel ul li.besocial { padding-top:2.4vw; } .navmenu_panel ul li a:hover { color:#ccc; } .menu { position: relative; z-index: 10; } .menu__item { position: relative; display: block; outline: none; } /* margin: 0 0 1.5em; */ .menu__item-name { position: relative; display: inline-block; } .menu--adsila .menu__item { } /* margin: 0 0 1em; */ .menu--adsila .menu__item-name { padding: 0 0.35em; left:-0.35em; -webkit-transition: color 0.5s; -o-transition: color 0.5s; transition: color 0.5s; -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1); -o-transition-timing-function: cubic-bezier(0.2,1,0.3,1); transition-timing-function: cubic-bezier(0.2,1,0.3,1); } .menu--adsila .menu__item-name::before { content: ''; position: absolute; z-index: -1; width: 100%; height: 50%; left: 0; bottom: 0; opacity: 0.5; -webkit-transform: scale3d(0,1,1); transform: scale3d(0,1,1); -webkit-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; -o-transition: transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1); -o-transition-timing-function: cubic-bezier(0.2,1,0.3,1); transition-timing-function: cubic-bezier(0.2,1,0.3,1); } .menu--adsila .menu__item:nth-child(odd) .menu__item-name::before { background: var(--highlight-col); } .menu--adsila .menu__item:nth-child(even) .menu__item-name::before { background: var(--highlight-col); } /* Hover */ /*.menu--adsila .menu__item:nth-child(odd):hover, .menu--adsila .menu__item:nth-child(odd):focus { color: #fe628e; } .menu--adsila .menu__item:nth-child(even):hover, .menu--adsila .menu__item:nth-child(even):focus { color: #6265fe; }*/ .menu--adsila .menu__item:hover .menu__item-name::before, .menu--adsila .menu__item:focus .menu__item-name::before { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); } .navmenu_legals { position: absolute; bottom:var(--margin-gap); left:var(--margin-gap); } .navmenu_legals ul { margin:0; padding-left:0; list-style:none; color: #6c6c6c; font-size: 1.1vw; text-decoration: none; font-family: 'Montserrat','Roboto'; font-weight: 600; line-height: 4.5vw; } .navmenu_legals ul li { line-height: 1.5vw; } .navmenu_legals ul li a { text-decoration:none; font-size: 1.1vw; color:#6c6c6c; font-weight: 600; outline:none; } .navmenu_legals ul li a:hover { cursor:pointer; color: var(--highlight-col);} ul.social li { width: var(--socbutton-sq); height:var(--socbutton-sq); } ul.social li a { display:inline-block; width: 100%; height:100%; } ul.social li a svg { vertical-align: top; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; } ul.social li a.svg svg path, ul.social li a.svg svg rect { fill: #fff; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; } ul.social li a:hover svg path, ul.social li a:hover svg rect { fill: var(--highlight-col); -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; } #credits_panel { display:none; width:80%; height: auto; padding:5%; font-size:0.7rem; line-height:1.4rem; } #privacy_panel { display:none; width:80%; height: auto; padding:5%; font-size:0.7rem; line-height:1.4rem; } #privacy_panel a, #credits_panel a { color:var(--highlight-col); text-decoration:none; border:0; outline:none; } .fancybox-slide--html .fancybox-close-small:hover { color:var(--highlight-col); } /* cookies */ #cookies { padding:5%; background:var(--highlight-col); z-index:10000; width:35%; position:fixed; top:15%; font-family: 'Merriweather','Roboto'; line-height: 1.8vw; font-weight: 300; font-size: 1.3vw; } .cookiettl { font-family: 'Montserrat','Roboto'; line-height: 1.6vw; text-decoration:none; color:#fff; font-weight: 600; font-size: 1.2vw; } .cookies_off { left:100%; -webkit-transition-timing-function: cubic-bezier(.445,.05,.55,.95); -o-transition-timing-function: cubic-bezier(.445,.05,.55,.95); transition-timing-function: cubic-bezier(.445,.05,.55,.95); -webkit-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s; } .cookies_on { left:55%; -webkit-transition-timing-function: cubic-bezier(.445,.05,.55,.95); -o-transition-timing-function: cubic-bezier(.445,.05,.55,.95); transition-timing-function: cubic-bezier(.445,.05,.55,.95); -webkit-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s;} #cookies a { color:#222; font-weight:400; text-decoration:none; } #cookies a:hover { color:#999;text-decoration:underline; } /* slide on news section */ #newsslide { background:var(--highlight-col); z-index:10000; width:35%; height: 100%; position:fixed; top:0; } .newsslide_off { left:-40%; -webkit-transition-timing-function: cubic-bezier(.445,.05,.55,.95); -o-transition-timing-function: cubic-bezier(.445,.05,.55,.95); transition-timing-function: cubic-bezier(.445,.05,.55,.95); -webkit-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s; -webkit-transition-delay:0.20s; -o-transition-delay:0.20s; transition-delay:0.20s} .newsslide_on { left:0; -webkit-transition-timing-function: cubic-bezier(.445,.05,.55,.95); -o-transition-timing-function: cubic-bezier(.445,.05,.55,.95); transition-timing-function: cubic-bezier(.445,.05,.55,.95); -webkit-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s;} .newsslide_wrap { position: relative; padding-top:0; overflow: hidden; height:100%; margin:0 auto; display:flex; flex-direction:column; } .newsslide_newscontainer { position: relative; margin-left: var(--margin-gap); margin-right: 5%; overflow: auto; flex:1; border-top: 1px solid rgba(0, 0, 0, 0.3); border-bottom: 1px solid rgba(0, 0, 0, 0.3); } .newsslide_newsitems { display: block; height:100%;overflow: auto; padding-right: 3%; } /* border-bottom: 1px solid rgba(0, 0, 0, 0.3); */ .newsslide_topmargin { height: 20%; min-height:80px; } .newsslide_topmargin div { } .newsslide_bottommargin { height:3% } .newsslide_wrap .newshdr { display:inline-block; font-family: 'Montserrat','Roboto'; line-height: 2.5vw; text-decoration:none; color:#fff; font-weight: 600; font-size: 1.0vw; } .newsslide_wrap .followusthen { text-align:right; } .newsslide_wrap .followusthen a { text-transform:uppercase; margin-top: 0.5em; font-family: 'Montserrat','Roboto'; line-height: 1.4vw; text-decoration:none; color:#fff; font-weight: 600; font-size: 1.0vw; } .newsslide_socialwrap .newshdr { float:left; } .newsitem p { font-family: 'Merriweather','Roboto'; line-height: 1.6vw; text-decoration:none; color:#000; font-weight: 300; font-size: 1.1vw; margin-top: 0.5em; } .newsitem span.linker { white-space:nowrap; } /*.newsslide_newsitems .newsitem { margin-top: 1.5em;}*/ /*.newsslide_newsitems .newsitem:first-of-type { margin-top: 5%; }*/ .newsslide_newsitems a { color: #000; text-decoration:none; } .newsslide_newsitems a:hover { color: #fff; } .newsslide_socialscontainer { overflow: hidden; margin-left:var(--margin-gap); margin-right:var(--margin-gap); height:30%; min-height: 127px; } .newsslide_socialscontainer .news_social { margin-top: 0.5em;} .newsslide_socialwrap { margin-top: 4px; } .newsfader { display:none; z-index:10005; position:absolute; bottom: 25%; height: 15%; background: -webkit-gradient( linear, left top, left bottom, from(rgba(var(--highlight), 0)), to(rgba(var(--highlight), 1)) ); background: -webkit-linear-gradient( rgba(var(--highlight), 0) 0%, rgba(var(--highlight), 1) 100% ); background: -o-linear-gradient( rgba(var(--highlight), 0) 0%, rgba(var(--highlight), 1) 100% ); background: linear-gradient( rgba(var(--highlight), 0) 0%, rgba(var(--highlight), 1) 100% ); width: 100%; } .newsfader_logo { display:none; z-index:10005; position:absolute; top: 0; height: 25%; background: -webkit-gradient( linear, left top, left bottom, color-stop(75%, rgba(var(--highlight), 1)), to(rgba(var(--highlight), 0)) ); background: -webkit-linear-gradient( rgba(var(--highlight), 1) 75%, rgba(var(--highlight), 0) 100% ); background: -o-linear-gradient( rgba(var(--highlight), 1) 75%, rgba(var(--highlight), 0) 100% ); background: linear-gradient( rgba(var(--highlight), 1) 75%, rgba(var(--highlight), 0) 100% ); width: 100%; } .newshdr_socials { float:right; display:inline-block; } #newsslide ul.social { list-style: none; padding:0; margin:0; height:var(--newssocbutton-sq); } #newsslide ul.social li { display: inline-block; margin:0 0.75vw 0 0; padding:0; width: var(--newssocbutton-sq); height:var(--newssocbutton-sq); } #newsslide ul.social li:last-child { margin:0 0 0 0; } #newsslide ul.social li a { display:inline-block; width: 100%; height:100%; } #newsslide ul.social li a svg { vertical-align: top; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; } #newsslide ul.social li a.soc_twit svg { margin-top: 2px; } #newsslide ul.social li a:hover svg path { fill: #000; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; } #newsslide ul.social li.social_highlight a { cursor: default} #newsslide ul.social li.social_highlight a svg path { fill:rgba(255,255,255, 0.7); -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .fadeout { position: relative; bottom: 4em; height: 4em; background-image: -ms-linear-gradient( rgba(var(--highlight), 0) 0%, rgba(var(--highlight), 1) 100% ); background: -webkit-linear-gradient( rgba(var(--highlight), 0) 0%, rgba(var(--highlight), 1) 100% ); background-image: -moz-linear-gradient( rgba(var(--highlight), 0) 0%, rgba(var(--highlight), 1) 100% ); background-image: -o-linear-gradient( rgba(var(--highlight), 0) 0%, rgba(var(--highlight), 1) 100% ); background-image: linear-gradient( rgba(var(--highlight), 0) 0%, rgba(var(--highlight), 1) 100% ); } .feedwrap { position:relative; } .news_social { position:absolute; } .news_social_insta { opacity:1; top:0; left: 100%; width: 100%; -webkit-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;} .news_social_twit { opacity:1; top:0; left: 100%; width: 100%; -webkit-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;} .news_social_on { left: 0%; opacity:1; -webkit-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;} .news_social_fadeout { left: 100%; opacity:0; -webkit-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;} .news_social_twit .twitterbox { width:100%; height:0; overflow:scroll; border-bottom:1px solid #333; } /* Work */ .work_section_container { display:-webkit-box; display:-ms-flexbox; display:flex; background-color:var(--sectionWork-bgcol); width:100%; height:auto !important; min-height:300%; } .work_section_wrap { -webkit-box-flex: 75%; -ms-flex: 75%; flex: 75%; } .work_section_wrap_inner { padding:15% 0% 20% 18.2%; } .work_section_wrap .subhdrtitle { color:#fff; padding:0; margin:0;width:auto; display:inline-block; } .work_section_wrap .copyblockwrap { color:#fff; padding:0; padding-right: 20%; padding-left: 5%; padding-top: 5% } .work_section_wrap .copyblockwrap h3 { color:#fff; padding-left: 0%; } .work_projects_container { -webkit-box-flex: 25%; -ms-flex: 25%; flex: 25%; min-height:100%; width:25%; padding-bottom:10%; } .work_item { position: relative; border-top:2px solid var(--sectionWork-bgcol); width:100%; height: auto; } .work_item:first-of-type { border-top:none; } .work_item_padd { height:10%; } .workmenu_lbl { font-family: 'Montserrat'; padding:0 0 0.5em 0.7em; color:#fff; font-size:0.5rem; font-weight:500; letter-spacing: 0.2em; text-transform:uppercase; color:#fff; position: absolute; bottom:0; left:0; } .copyblockwrap_commissions { } .copyblockwrap_commissions .ttl_label { font-family:'Montserrat'; position: relative; width: 100%; height: 100%; color:#fff; font-size:1rem; font-weight:500; letter-spacing: 0.2em; text-transform:uppercase;} .copyblockwrap_commissions .ttl_label:before { content: "commissions"; position: absolute; white-space:nowrap; right: 0; bottom: 0; -webkit-transform: rotate(-90deg) translate(100%, 0); -ms-transform: rotate(-90deg) translate(100%, 0); transform: rotate(-90deg) translate(100%, 0); -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; } .copyblockwrap_commissions a { color:#fff; text-decoration:underline;} .project_block_bg { background:rgba(255, 255, 255, 1); } .project_block_bg_dark { background:rgba(0, 0, 0, 0.85); } .project_block_bg_grey { background:rgba(200, 200, 200, 0.8); } .project_block { padding:var(--proj_margin); } .removetoppad { padding-top: 0; } .project_image_full { width:100%; } .project_image_50 { width:50%; float:left; } .project_image_33 { width:33%; float:left; } .project_image_25 { width:25%; float:left; } .project_topmarg { margin-top:var(--proj_margin); } .project_topmarg_half { padding-top:calc(2 * var(--proj_margin_half)); } .project_halfmarg_sideright { padding-right:var(--proj_margin_half); } .project_halfmarg_sideleft { padding-left:var(--proj_margin_half); } .project_grid2 { width:100%; height:25vw; display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .project_grid2 .project_grid_element { width:calc(50% - var(--proj_margin_half));position: relative; height:100%; } .project_grid2 img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .project_grid3_portrait { width:100%; height:42vw; display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .project_grid3_portrait .project_grid_element { width:calc(33% - var(--proj_margin_half));position: relative; height:100%; } .project_grid3_portrait img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .project_grid3_lscape { width:100%; height:20vw; display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .project_grid3_lscape div { width:calc(33% - var(--proj_margin_half));position: relative; height:100%; } .project_grid3_lscape img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .project_grid4_port { width:100%; height:28vw; display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .project_grid4_port div { width:calc(25% - var(--proj_margin_half));position: relative; height:100%; } .project_grid4_port img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .project_team_details { margin: 0 auto; display:table; font-family: 'Merriweather','Roboto'; text-decoration:none; color:#fff; font-weight: 300; font-size: 1.5vw; } .project_team_details > * { display: table-row; } .project_team_details .hdr { display: table-cell; text-align:left; line-height: 2.3vw; color:#eee; white-space: nowrap; padding-right:10%; } .project_team_details .sub { display: table-cell; text-align:left; line-height: 2.3vw; font-weight: 500; white-space: nowrap; padding-left:5%; } .project_team_details .spacerrow div { padding-top:1.5vw; } .project_team_details .sub a { color:#fff; text-decoration:none; } .project_team_details .sub a:hover { color:var(--highlight-col); text-decoration:none; } .wanderoomslogo { height:1.2rem; width:15%; margin:0 auto; margin-bottom:1.4%;margin-top:1.5%; } #about_slide6 .about_section_wrap .hero_text_wrap2 { display:-webkit-box; display:-ms-flexbox; display:flex; } #about_slide6 .about_section_wrap .hero_text_wrap2 .copyblockwrap { -webkit-box-flex:1; -ms-flex:1; flex:1; padding:0; margin:0; text-align:right;position:relative; } #about_slide6 .about_section_wrap .hero_text_wrap2 .copyblockwrap img.blist { width:70%; border: 10px solid black; } #about_slide6 .about_section_wrap .hero_text_wrap2 .copyblockwrap2 { -webkit-box-flex:1; -ms-flex:1; flex:1; text-align:left; padding:0; margin:0;padding-bottom: 5%; } #about_slide6 .about_section_wrap .hero_text_wrap2 .copyblockwrap3 { background:none; } #about_slide6 .about_section_wrap .hero_text_wrap2 .copyblockwrap2 h3 { padding-left: 10%; padding-right: 10%;} #about_slide6 .about_section_wrap .hero_text_wrap2 .copyblockwrap2 h3.padder { padding-top:8%; } .loadbuild { height:auto; overflow:hidden; display:inline-block; margin-top:5%; margin-bottom:2%; font-family:'Montserrat'; color:var(--highlight-col); border:2px solid var(--highlight-col); font-weight:500; font-size:1.5rem; letter-spacing: 0.4rem; padding:2%; } .loadbuild:hover { cursor:pointer; color:#fff; border-color:rgba(255,255,255,0.4); } .loadbuildviz { height:0; padding:0; border:0; -webkit-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } .copyblockwrap a { color: #333; font-weight: 600; cursor:pointer; text-decoration:none; } .copyblockwrap a:hover { color: var(--highlight-col); } /* Portrait iPhones 6+, 7+, 8+ Portrait */ /*@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {*/ @media only screen and (max-width: 414px) /* and (height : 736px) */ /* and (-webkit-device-pixel-ratio : 3) */ and (orientation: portrait) { .copyblockwrap h2 { font-size: 4vw; line-height: 5vw; } .copyblockwrap h3 { font-size: 3.3vw; line-height: 4.5vw; } .subhdrtitle { font-size: 9vw; } h1 { font-size: 10.5vw; margin: 7.5vw 0; } .navmenu_wrap { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: auto; } .navmenu_panel ul { font-size: 5vw; line-height: 6vw; } .navmenu_panel ul li a.reducedtxt { font-size: 3.8vw;} .navmenu_panel ul li.hdr { line-height: 4vw } .navmenu_panel ul li.hdr a { font-size: 2.75vw; } .navmenu_legals ul li, .navmenu_legals ul li a { font-size: 2.75vw; } .navmenu_legals ul li { line-height: 3.5vw; } #newsslide { width:100%; z-index: 10005;} .newsslide_off { left:-100%; } .newsslide_on { } .newsslide_wrap .newshdr { font-size: 2.5vw; } .newsitem p { font-size: 2.5vw; line-height: 3.2vw;} .newsslide_wrap .followusthen a { font-size: 2.5vw; } .remagination_logo_sm { width: var(--logo_width); } .button_sq_news_close { width: var(--button-sq); height:var(--button-sq); } .slide_hdr_project_wrapper .ttl { padding-top: 15%; } .slide_hdr_block .ttl { font-size: 1.8rem; line-height: 2.3rem; } .project_team_details { font-size: 2.75vw; margin-top: 4vw; } .project_team_details .hdr, .project_team_details .sub { line-height: 3.75vw; } #hero .fp-slidesNav { display:none; } #slide_hdr_project_hotel.slide_hdr_project_wrapper .block .project_summary_block { padding-left:5%; padding-right:5%; } #slide_hdr_project_hotel .project_summary_block_inner { padding:0;} .wanderoomslogo { width:25%; } #about_slide6 .about_section_wrap .hero_text_wrap2 { -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; } #about_slide6 .about_section_wrap .hero_text_wrap2 .copyblockwrap { text-align:center; } #about_slide6 .about_section_wrap .hero_text_wrap2 .copyblockwrap h1 { margin:0;} #about_slide6 .about_section_wrap .hero_text_wrap2 .copyblockwrap img { width:60%; } #cookies { background:var(--highlight-col); z-index:10000; width:auto; position:fixed; top:15%; font-family: 'Merriweather','Roboto'; line-height: 4vw; font-weight: 300; font-size: 3.5vw; } .cookies_off { left:100%; -webkit-transition-timing-function: cubic-bezier(.445,.05,.55,.95); -o-transition-timing-function: cubic-bezier(.445,.05,.55,.95); transition-timing-function: cubic-bezier(.445,.05,.55,.95); -webkit-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s; } .cookies_on { left:0%; -webkit-transition-timing-function: cubic-bezier(.445,.05,.55,.95); -o-transition-timing-function: cubic-bezier(.445,.05,.55,.95); transition-timing-function: cubic-bezier(.445,.05,.55,.95); -webkit-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s;} .cookiettl { line-height: 3.6vw; font-size: 3vw; } .loadbuild { line-height:2.5rem; } #hero_hotel div.slide_hdr span.wdrttl { display: none; } #hero_hotel div.slide_hdr:after { content: 'THE HOTEL'; margin-right:-0.30rem; } .project_team_details .sub { white-space: normal; } #newsslide ul.social li a.soc_twit svg { margin-top: 1px; } /* .newsslide_topmargin { height:10%; } */ .newsslide_socialscontainer { height: 25%; } } /* iPhone 6, 7, & 8, X in landscape */ @media only screen and (min-width : 375px) and (max-width : 812px) and (orientation: landscape) { .loadbuild { line-height:2.5rem; } #cookies { width: 40%; top: 25%; } .cookies_on { left: 50%; } /* bump nav to always be vertical */ .project_team_details .sub { white-space: normal; } .section { } .fp-slidesNav, #fp-nav { display:none;} #newsslide ul.social li a.soc_twit svg { margin-top: 1px; } /*.newsslide_newsitems { margin-top: 35%; height: 65%; } .newsslide_newscontainer { height: 55%; } .newsslide_socialscontainer height 25*/ #about_slide6 .about_section_wrap .hero_text_wrap2 .copyblockwrap img.blist { width: 50%; border: 5px solid black; } #about_slide6 .about_section_wrap .hero_text_wrap2 .copyblockwrap .subhdrtitle { margin-top:0; margin-bottom:0.05em; } #about_slide4 .about_section_wrap .hero_text_wrap2 .copyblockwrap .subhdrtitle { margin-top:0; margin-bottom:0; } #about_slide3 .about_section_wrap .hero_text_wrap2 .copyblockwrap .subhdrtitle { margin-top:0.025em; margin-bottom:0; } .copyblockwrap { padding-bottom:0%; } } @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) { .newsslide_socialscontainer { height: 15%; } } @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) { .newsslide_socialscontainer { height: 25%; } } @media only screen and (min-width : 834px) and (max-width : 1112px) and (orientation : landscape) { .newsslide_socialscontainer { height: 25%; } } @media only screen and (min-width : 1024px) and (max-width : 1366px) and (orientation : landscape) { .newsslide_socialscontainer { height: 25%; min-height: 230px; } } @media only screen and (max-width: 768px) and (max-height : 1024px) /* and (-webkit-device-pixel-ratio : 3) */ and (orientation: portrait) { .navmenu_wrap { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: auto; } .navmenu_panel ul { font-size: 4vw; line-height: 5vw; } .navmenu_panel ul li a.reducedtxt { font-size: 3vw;} .navmenu_panel ul li.hdr { line-height: 3.5vw } .navmenu_panel ul li.hdr a { font-size: 2vw; } .navmenu_legals ul li, .navmenu_legals ul li a { font-size: 1.75vw; } .navmenu_legals ul li { line-height: 2.5vw; } }