*:not(text) { margin:0; padding:0; border:none; font-size:inherit; font-family:inherit; line-height:inherit; vertical-align:baseline; box-sizing:border-box; } article, aside, figure, footer, header, hgroup, menu, nav, section, address, meter, main { display:block; } html { height:100%; width:100%; overflow:visible; font-size:62.5%; line-height:1.5; font-family:Verdana, Arial, sans-serif; -ms-touch-action:manipulation; touch-action:manipulation; } @media (max-width:800px) { html { width:100vw; } } body { height:100%; width:100%; min-width:100%; max-width:100%; position:relative; float:left; overflow:visible; -webkit-overflow-scrolling:touch; } hr { border:none; border-top:1px #ebebeb solid; margin:5px 0px 15px; position:relative; float:left; clear:both; width:100%; } b, strong { font-weight:bold; } i, em { font-style:italic; } sup { vertical-align:super; } sub { vertical-align:sub; } sup,sub { line-height:0; font-size:50% !important; padding-left:1px; } .rtl sup, .rtl sub { padding-left:0px; padding-right:1px; } h1, h2, h3, h4 { line-height:1.2; } h1, h2, h3, h4, h5, h6, td h1, td h2, td h3, td h4, td h5 { margin-bottom:11px; } h1 *, h2 *, h3 *, h4 *, h5 *, h6 * { font-size:inherit; color:inherit; } * { outline:none; } a { text-decoration:none; font:inherit; outline:none; } a * { cursor:pointer; } figure { line-height:0; } img { outline:none; color:#777; } br { clear:both; } a:focus, object, embed { outline:none; } object, embed, iframe { vertical-align:middle; } input[type="radio"]:focus, input[type="checkbox"]:focus { outline:thin dotted; } select:focus, select option:focus, input[type="reset"]:focus, input[type="button"]:focus, input[type="submit"]:focus, input[type="file"] > input[type="button"]:focus { outline:none; } select::-moz-focus-inner, select option::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { outline:none; border:0; } select:-moz-focusring { color:transparent; text-shadow:0 0 0 #000; } table { border-spacing:0px; } table, tr, td, th, tf { border-collapse :collapse; } table, tr, td, th, tf, span { font-size:inherit; font:inherit; font-style:inherit; color:inherit; font-weight:inherit; line-height:inherit; text-transform:inherit; } td, th, tf { text-align:left; vertical-align:top; padding:0px 3px 3px 0px; min-height:11px; } optgroup, .fakeOptGroup { font-weight:bold; font-style:italic; padding:5px; } optgroup option { font-weight:normal; text-indent:10px; } li, ul, ol { height:auto; } .clear { clear:both; } .hide { display:none; } .hideVis, .invisible { visibility:hidden; } .tabHide { position:absolute; left:0; top:0; height:100%; width:3px; display:block; } .tabHide:focus { background-color:#9F9F9F; } .clearfix:after { content:" "; visibility:hidden; display:block; height:0; clear:both; } .noTransition { -moz-transition:none !important; -webkit-transition:none !important; -o-transition:none !important; -ms-transition:none !important; transition:none !important; } .noSelect { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none; } .vCenter:before { content:''; display:inline-block; height:100%; vertical-align:middle; margin-right:-0.3em; } .floater { position:relative; float:left; clear:both; width:100%; } textarea { overflow:auto; } p, h1, h2, h3, h4, h5, table, ul, ol { position:relative; width:100%; float:left; clear:both; } :root { --app-theme:#2B2B2A; --app-theme-lighter:#52524F; --app-theme-lighter-2:#C5C5C1; --app-theme-contrast:#ffffff; --app-body:#fafafa; } @-webkit-keyframes passing-through { 0% { opacity:0; -webkit-transform:translateY(40px); -moz-transform:translateY(40px); -ms-transform:translateY(40px); -o-transform:translateY(40px); transform:translateY(40px); } 30%, 70% { opacity:1; -webkit-transform:translateY(0px); -moz-transform:translateY(0px); -ms-transform:translateY(0px); -o-transform:translateY(0px); transform:translateY(0px); } 100% { opacity:0; -webkit-transform:translateY(-40px); -moz-transform:translateY(-40px); -ms-transform:translateY(-40px); -o-transform:translateY(-40px); transform:translateY(-40px); } } @-moz-keyframes passing-through { 0% { opacity:0; -webkit-transform:translateY(40px); -moz-transform:translateY(40px); -ms-transform:translateY(40px); -o-transform:translateY(40px); transform:translateY(40px); } 30%, 70% { opacity:1; -webkit-transform:translateY(0px); -moz-transform:translateY(0px); -ms-transform:translateY(0px); -o-transform:translateY(0px); transform:translateY(0px); } 100% { opacity:0; -webkit-transform:translateY(-40px); -moz-transform:translateY(-40px); -ms-transform:translateY(-40px); -o-transform:translateY(-40px); transform:translateY(-40px); } } @keyframes passing-through { 0% { opacity:0; -webkit-transform:translateY(40px); -moz-transform:translateY(40px); -ms-transform:translateY(40px); -o-transform:translateY(40px); transform:translateY(40px); } 30%, 70% { opacity:1; -webkit-transform:translateY(0px); -moz-transform:translateY(0px); -ms-transform:translateY(0px); -o-transform:translateY(0px); transform:translateY(0px); } 100% { opacity:0; -webkit-transform:translateY(-40px); -moz-transform:translateY(-40px); -ms-transform:translateY(-40px); -o-transform:translateY(-40px); transform:translateY(-40px); } } @-webkit-keyframes slide-in { 0% { opacity:0; -webkit-transform:translateY(40px); -moz-transform:translateY(40px); -ms-transform:translateY(40px); -o-transform:translateY(40px); transform:translateY(40px); } 30% { opacity:1; -webkit-transform:translateY(0px); -moz-transform:translateY(0px); -ms-transform:translateY(0px); -o-transform:translateY(0px); transform:translateY(0px); } } @-moz-keyframes slide-in { 0% { opacity:0; -webkit-transform:translateY(40px); -moz-transform:translateY(40px); -ms-transform:translateY(40px); -o-transform:translateY(40px); transform:translateY(40px); } 30% { opacity:1; -webkit-transform:translateY(0px); -moz-transform:translateY(0px); -ms-transform:translateY(0px); -o-transform:translateY(0px); transform:translateY(0px); } } @keyframes slide-in { 0% { opacity:0; -webkit-transform:translateY(40px); -moz-transform:translateY(40px); -ms-transform:translateY(40px); -o-transform:translateY(40px); transform:translateY(40px); } 30% { opacity:1; -webkit-transform:translateY(0px); -moz-transform:translateY(0px); -ms-transform:translateY(0px); -o-transform:translateY(0px); transform:translateY(0px); } } @-webkit-keyframes pulse { 0% { -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); } 10% { -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1); } 20% { -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); } } @-moz-keyframes pulse { 0% { -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); } 10% { -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1); } 20% { -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); } } @keyframes pulse { 0% { -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); } 10% { -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1); } 20% { -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); } } .dropzone, .dropzone * { box-sizing:border-box; } .dropzone { min-height:150px; border:2px solid rgba(0, 0, 0, 0.3); background:white; padding:20px 20px; } .dropzone.dz-clickable { cursor:pointer; } .dropzone.dz-clickable * { cursor:default; } .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * { cursor:pointer; } .dropzone.dz-started .dz-message { display:none; } .dropzone.dz-drag-hover { border-style:solid; } .dropzone.dz-drag-hover .dz-message { opacity:0.5; } .dropzone .dz-message { text-align:center; margin:2em 0; } .dropzone .dz-message .dz-button { background:none; color:inherit; border:none; padding:0; font:inherit; cursor:pointer; outline:inherit; } .dropzone .dz-preview { position:relative; display:inline-block; vertical-align:top; margin:16px; min-height:100px; } .dropzone .dz-preview:hover { z-index:1000; } .dropzone .dz-preview:hover .dz-details { opacity:1; } .dropzone .dz-preview.dz-file-preview .dz-image { border-radius:20px; background:#999; background:linear-gradient(to bottom, #eee, #ddd); } .dropzone .dz-preview.dz-file-preview .dz-details { opacity:1; } .dropzone .dz-preview.dz-image-preview { background:white; } .dropzone .dz-preview.dz-image-preview .dz-details { -webkit-transition:opacity 0.2s linear; -moz-transition:opacity 0.2s linear; -ms-transition:opacity 0.2s linear; -o-transition:opacity 0.2s linear; transition:opacity 0.2s linear; } .dropzone .dz-preview .dz-remove { font-size:14px; text-align:center; display:block; cursor:pointer; border:none; } .dropzone .dz-preview .dz-remove:hover { text-decoration:underline; } .dropzone .dz-preview:hover .dz-details { opacity:1; } .dropzone .dz-preview .dz-details { z-index:20; position:absolute; top:0; left:0; opacity:0; font-size:13px; min-width:100%; max-width:100%; padding:2em 1em; text-align:center; color:rgba(0, 0, 0, 0.9); line-height:150%; } .dropzone .dz-preview .dz-details .dz-size { margin-bottom:1em; font-size:16px; } .dropzone .dz-preview .dz-details .dz-filename { white-space:nowrap; } .dropzone .dz-preview .dz-details .dz-filename:hover span { border:1px solid rgba(200, 200, 200, 0.8); background-color:rgba(255, 255, 255, 0.8); } .dropzone .dz-preview .dz-details .dz-filename:not(:hover) { overflow:hidden; text-overflow:ellipsis; } .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span { border:1px solid transparent; } .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span { background-color:rgba(255, 255, 255, 0.4); padding:0 0.4em; border-radius:3px; } .dropzone .dz-preview:hover .dz-image img { -webkit-transform:scale(1.05, 1.05); -moz-transform:scale(1.05, 1.05); -ms-transform:scale(1.05, 1.05); -o-transform:scale(1.05, 1.05); transform:scale(1.05, 1.05); -webkit-filter:blur(8px); filter:blur(8px); } .dropzone .dz-preview .dz-image { border-radius:20px; overflow:hidden; width:120px; height:120px; position:relative; display:block; z-index:10; } .dropzone .dz-preview .dz-image img { display:block; } .dropzone .dz-preview.dz-success .dz-success-mark { -webkit-animation:passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); -moz-animation:passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); -ms-animation:passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); -o-animation:passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); animation:passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); } .dropzone .dz-preview.dz-error .dz-error-mark { opacity:1; -webkit-animation:slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); -moz-animation:slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); -ms-animation:slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); -o-animation:slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); animation:slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); } .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark { pointer-events:none; opacity:0; z-index:500; position:absolute; display:block; top:50%; left:50%; margin-left:-27px; margin-top:-27px; } .dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg { display:block; width:54px; height:54px; } .dropzone .dz-preview.dz-processing .dz-progress { opacity:1; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -ms-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; } .dropzone .dz-preview.dz-complete .dz-progress { opacity:0; -webkit-transition:opacity 0.4s ease-in; -moz-transition:opacity 0.4s ease-in; -ms-transition:opacity 0.4s ease-in; -o-transition:opacity 0.4s ease-in; transition:opacity 0.4s ease-in; } .dropzone .dz-preview:not(.dz-processing) .dz-progress { -webkit-animation:pulse 6s ease infinite; -moz-animation:pulse 6s ease infinite; -ms-animation:pulse 6s ease infinite; -o-animation:pulse 6s ease infinite; animation:pulse 6s ease infinite; } .dropzone .dz-preview .dz-progress { opacity:1; z-index:1000; pointer-events:none; position:absolute; height:16px; left:50%; top:50%; margin-top:-8px; width:80px; margin-left:-40px; background:rgba(255, 255, 255, 0.9); -webkit-transform:scale(1); border-radius:8px; overflow:hidden; } .dropzone .dz-preview .dz-progress .dz-upload { background:#333; background:linear-gradient(to bottom, #666, #444); position:absolute; top:0; left:0; bottom:0; width:0; -webkit-transition:width 300ms ease-in-out; -moz-transition:width 300ms ease-in-out; -ms-transition:width 300ms ease-in-out; -o-transition:width 300ms ease-in-out; transition:width 300ms ease-in-out; } .dropzone .dz-preview.dz-error .dz-error-message { display:block; } .dropzone .dz-preview.dz-error:hover .dz-error-message { opacity:1; pointer-events:auto; } .dropzone .dz-preview .dz-error-message { pointer-events:none; z-index:1000; position:absolute; display:block; display:none; opacity:0; -webkit-transition:opacity 0.3s ease; -moz-transition:opacity 0.3s ease; -ms-transition:opacity 0.3s ease; -o-transition:opacity 0.3s ease; transition:opacity 0.3s ease; border-radius:8px; font-size:13px; top:130px; left:-10px; width:140px; background:#be2626; background:linear-gradient(to bottom, #be2626, #a92222); padding:0.5em 1.2em; color:white; } .dropzone .dz-preview .dz-error-message:after { content:''; position:absolute; top:-6px; left:64px; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid #be2626; } .slbOverlay, .slbWrapOuter, .slbWrap { position:fixed; top:0; right:0; bottom:0; left:0; } .slbOverlay { overflow:hidden; z-index:2000; background-color:#000; opacity:0.7; -webkit-animation:slbOverlay 0.5s; -moz-animation:slbOverlay 0.5s; animation:slbOverlay 0.5s; } .slbWrapOuter { overflow-x:hidden; overflow-y:auto; z-index:2010; } .slbWrap { position:absolute; text-align:center; } .slbWrap:before { content:""; display:inline-block; height:100%; vertical-align:middle; } .slbContentOuter { position:relative; display:inline-block; vertical-align:middle; margin:0px auto; padding:0 1em; box-sizing:border-box; z-index:2020; text-align:left; max-width:100%; } .slbContentEl .slbContentOuter { padding:5em 1em; } .slbContent { position:relative; } .slbContentEl .slbContent { -webkit-animation:slbEnter 0.3s; -moz-animation:slbEnter 0.3s; animation:slbEnter 0.3s; background-color:#fff; box-shadow:0 0.2em 1em rgba(0, 0, 0, 0.4); } .slbImageWrap { -webkit-animation:slbEnter 0.3s; -moz-animation:slbEnter 0.3s; animation:slbEnter 0.3s; position:relative; } .slbImageWrap:after { content:""; position:absolute; left:0; right:0; top:5em; bottom:5em; display:block; z-index:-1; box-shadow:0 0.2em 1em rgba(0, 0, 0, 0.6); background-color:#FFF; } .slbDirectionNext .slbImageWrap { -webkit-animation:slbEnterNext 0.4s; -moz-animation:slbEnterNext 0.4s; animation:slbEnterNext 0.4s; } .slbDirectionPrev .slbImageWrap { -webkit-animation:slbEnterPrev 0.4s; -moz-animation:slbEnterPrev 0.4s; animation:slbEnterPrev 0.4s; } .slbImage { width:auto; max-width:100%; height:auto; display:block; line-height:0; box-sizing:border-box; padding:5em 0; margin:0 auto; } .slbCaption { display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; font-size:1.4em; position:absolute; left:0; right:0; bottom:0; padding:0.71429em 0; color:#fff; color:rgba(255, 255, 255, 0.7); text-align:center; } .slbCloseBtn, .slbArrow { margin:0; padding:0; border:0; cursor:pointer; background:none; } .slbCloseBtn::-moz-focus-inner, .slbArrow::-moz-focus-inner { padding:0; border:0; } .slbCloseBtn:hover, .slbArrow:hover { opacity:0.5; } .slbCloseBtn:active, .slbArrow:active { opacity:0.8; } .slbCloseBtn { -webkit-animation:slbEnter 0.3s; -moz-animation:slbEnter 0.3s; animation:slbEnter 0.3s; font-size:3em; width:1.66667em; height:1.66667em; line-height:1.66667em; position:absolute; right:-0.33333em; top:0; color:#fff; color:rgba(255, 255, 255, 0.7); text-align:center; } .slbLoading .slbCloseBtn { display:none; } .slbLoadingText { font-size:1.4em; color:#fff; color:rgba(255, 255, 255, 0.9); } .slbArrows { position:fixed; top:50%; left:0; right:0; } .slbLoading .slbArrows { display:none; } .slbArrow { position:absolute; top:50%; margin-top:-5em; width:5em; height:10em; opacity:0.7; text-indent:-999em; overflow:hidden; } .slbArrow:before { content:""; position:absolute; top:50%; left:50%; margin:-0.8em 0 0 -0.8em; border:0.8em solid transparent; } .slbArrow.next { right:0; } .slbArrow.next:before { border-left-color:#fff; } .slbArrow.prev { left:0; } .slbArrow.prev:before { border-right-color:#fff; } .slbIframeCont { width:80em; height:0; overflow:hidden; padding-top:56.25%; margin:5em 0; } .slbIframe { position:absolute; top:0; left:0; width:100%; height:100%; box-shadow:0 0.2em 1em rgba(0, 0, 0, 0.6); background:#000; } @-webkit-keyframes slbOverlay { from { opacity:0; } to { opacity:0.7; } } @-moz-keyframes slbOverlay { from { opacity:0; } to { opacity:0.7; } } @keyframes slbOverlay { from { opacity:0; } to { opacity:0.7; } } @-webkit-keyframes slbEnter { from { opacity:0; -webkit-transform:translate3d(0, -1em, 0); } to { opacity:1; -webkit-transform:translate3d(0, 0, 0); } } @-moz-keyframes slbEnter { from { opacity:0; -moz-transform:translate3d(0, -1em, 0); } to { opacity:1; -moz-transform:translate3d(0, 0, 0); } } @keyframes slbEnter { from { opacity:0; -webkit-transform:translate3d(0, -1em, 0); -moz-transform:translate3d(0, -1em, 0); -ms-transform:translate3d(0, -1em, 0); -o-transform:translate3d(0, -1em, 0); transform:translate3d(0, -1em, 0); } to { opacity:1; -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); } } @-webkit-keyframes slbEnterNext { from { opacity:0; -webkit-transform:translate3d(4em, 0, 0); } to { opacity:1; -webkit-transform:translate3d(0, 0, 0); } } @-moz-keyframes slbEnterNext { from { opacity:0; -moz-transform:translate3d(4em, 0, 0); } to { opacity:1; -moz-transform:translate3d(0, 0, 0); } } @keyframes slbEnterNext { from { opacity:0; -webkit-transform:translate3d(4em, 0, 0); -moz-transform:translate3d(4em, 0, 0); -ms-transform:translate3d(4em, 0, 0); -o-transform:translate3d(4em, 0, 0); transform:translate3d(4em, 0, 0); } to { opacity:1; -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); } } @-webkit-keyframes slbEnterPrev { from { opacity:0; -webkit-transform:translate3d(-4em, 0, 0); } to { opacity:1; -webkit-transform:translate3d(0, 0, 0); } } @-moz-keyframes slbEnterPrev { from { opacity:0; -moz-transform:translate3d(-4em, 0, 0); } to { opacity:1; -moz-transform:translate3d(0, 0, 0); } } @keyframes slbEnterPrev { from { opacity:0; -webkit-transform:translate3d(-4em, 0, 0); -moz-transform:translate3d(-4em, 0, 0); -ms-transform:translate3d(-4em, 0, 0); -o-transform:translate3d(-4em, 0, 0); transform:translate3d(-4em, 0, 0); } to { opacity:1; -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); } } html,body { width:100vw; } body { background:var(--app-body); overflow-x:hidden; min-width:320px; } img { position:relative; float:left; max-width:100%; height:auto !important; } .app { position:relative; margin:0 auto; min-height:100vh; max-width:1000px; } .app::after { content:''; position:relative; display:table; clear:both; } .header, .content { position:relative; float:left; clear:both; width:100%; z-index:1; } .header { text-align:center; padding:20px 0 2vw; } a.logo { position:relative; display:inline-block; width:70vw; max-width:200px; } a.hamburger { position:absolute; top:10px; right:10px; z-index:11; padding:4px 5px !important; transition:all 200ms ease-out 0ms; } a.hamburger span { position:relative; float:left; clear:both; display:block; width:2.0rem; height:0.4rem; margin-bottom:0.3rem; background-color:var(--app-theme); transition:background-color 200ms ease-out 100ms, transform 200ms ease-out 0ms; } a.hamburger span.line_3 { margin-bottom:0; } a.hamburger.active span { background-color:var(--app-theme-contrast); } a.hamburger.active span.line_1 { visibility:hidden; } a.hamburger.active span.line_2 { transform:rotate(45deg); } a.hamburger.active span.line_3 { transform:rotate(-45deg) translate3d(25%,-125%,0) } a.hamburger.active { border-color:var(--app-body); } .content { padding:20px 10px; } .subInfo { position:relative; float:left; clear:both; width:100%; text-align:right; opacity:0.5; font-size:1.1rem; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nav { position:relative; float:left; clear:both; width:100%; margin-bottom:30px; } #projectsList h2[onclick] { padding-right:20px; cursor:pointer; transition:opacity 200ms ease-out 0ms; } #projectsList h2[onclick]:hover { opacity:0.8; } #projectsList h2[onclick]::after { content:'\276F'; position:absolute; right:0; top:0; transform:rotate(90deg); transform-origin:50% 50%; } #projectsList h2[onclick].active::after { transform:rotate(-90deg) } .nav.toggle-visibility { display:none; } #projectsList h2[onclick].active + .nav.toggle-visibility { display:block; } .nav ul, .nav li { list-style:none; list-style-image:none; } .nav li { position:relative; float:left; clear:both; width:100%; margin-bottom:10px; } .nav.navDelete li, div.navDelete { padding-right:2rem; } a.navLink { position:relative; float:left; clear:both; width:100%; padding:7px 10px !important; font-size:2rem; } a.navLink.actionLink { width:auto; } a.navLink.button { clear:both; margin:10px auto; float:none; display:inline-block; } #mobileNav { position:fixed; top:0; left:0; right:0; bottom:0; min-width:320px; background-color:var(--app-theme); z-index:10; margin:0; padding:7.0rem 0; overflow-x:hidden; overflow-y:auto; display:none; } a.hamburger.active + #mobileNav { display:block; } #mobileNav .navWrap { max-width:500px; margin:0 auto; float:none; padding:10px; } #mobileNav .navWrap a { text-align:center; } #mobileNav .nav li.logout { margin-top:3rem; text-align:center; } a.navDel { position:absolute; right:0; width:auto !important; top:1rem; line-height:1; font-size:1.6rem; color:#B70000 !important; } a.posRemove { width:auto !important; padding:10px; line-height:1; font-size:1.6rem; color:#B70000 !important; } .position-row-template:first-of-type a.posRemove { color:#9F9F9F !important; cursor:not-allowed; pointer-events:none; } .navDelTopPadding a.navDel { top:2.7rem; } .flex-cols.navDelete a.navDel { margin-right:-2rem; } .responsiveTable a.navDel { position:static; right:auto; top:auto; } #positionTable .initially-hidden { display:none !important; } .navToggle { position:relative; float:left; clear:both; width:100%; padding:10px 10px 0; background-color:var(--app-theme-lighter); display:none; } .navToggle.navToggleImages { padding:0 5px 10px; } a.navLink.active + .navToggle { display:block; } a.navLink.active + .navToggle.navToggleImages { display:flex; flex-wrap:wrap; align-items:center; } .navToggle.navToggleImages > a { padding:10px 5px 0; width:25%; } .navToggle.navToggleImages > a img { width:100%; height:auto; } .navToggle a.navLink { margin-bottom:10px; } a.button.back { position:absolute !important; top:10px; left:10px; padding:4px 7px 6px; line-height:1.6rem; font-size:3.0rem; } .only-mobile { display:none; } @media(max-width:800px) { .header, .content { width:100vw; } .navToggle.navToggleImages > a { width:33.3333%; } #searchInput { margin-top:-39px !important; } } @media(max-width:420px) { .only-desktop { display:none; } .only-mobile { display:block; } a.navLink.actionLink { width:100%; } .header { padding-top:50px; } #searchInput, #export_wochenkarte, #export_wochenkarte button { width:100% !important; clear:both; } #searchInput { margin-top:0 !important; } a.navLink { padding:7px 5px !important; text-align:center; line-height:1.4 !important; } .navToggle.navToggleImages > a { width:100%; } } .clearFloat { position:relative; float:left; clear:both; width:100%; } .margin-bottom { margin-bottom:30px; } fieldset.project-comment { position:relative; float:left; clear:both; width:100%; margin:0 0 20px; padding:0; border:1px var(--app-theme) solid; } fieldset.project-comment legend { float:right; color:white; background-color:var(--app-theme); padding:3px 20px; font-size:1.2rem; border-bottom-left-radius:1em; } fieldset.project-comment p { padding:0 10px 10px; font-style:italic; } fieldset.project-comment a.navDel { top:0; right:3px; font-size:1.8rem !important; } .loading::after { content:''; width:20px; height:20px; position:absolute; top:50%; left:50%; margin-top:-10px; margin-left:-10px; border:3px #333 solid; border-top:3px #ccc solid !important; border-radius:50%; animation:wbm-modal-preloader 1500ms linear infinite; } @keyframes wbm-modal-preloader { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } } #projectsList { position:relative; float:left; clear:both; width:100%; } #project-position-gallery { position:relative; float:left; width:100%; display:grid; grid-template-columns:repeat(4,minmax(0, 1fr)); gap:20px; margin-bottom:3rem; } #project-position-gallery a { transition:opacity 200ms ease-out 0ms; } #project-position-gallery a:hover { opacity:0.7; } .slbCaption { position:fixed; font-size:1em; }form { position:relative; clear:both; margin:20px auto; max-width:100%; } input, select, textarea, .fileUpload { position:relative; float:left; clear:both; width:100%; } input[type="text"], input[type="number"], input[type="email"], input[type="date"], input[type="password"], input[type="date"], textarea, select, .fileUpload { border:2px var(--app-theme) solid; color:var(--app-theme); padding:7px 10px 4px; min-height:3.7rem; margin-bottom:10px; line-height:1; transition:all 200ms ease-out 0ms; } .slimForm input[type="text"], .slimForm input[type="number"], .slimForm input[type="email"], .slimForm input[type="date"], .slimForm input[type="password"], .slimForm input[type="date"], .slimForm textarea, .slimForm select, .slimForm .fileUpload { border:none; padding:0; min-height:0; margin-bottom:0; background:transparent; } input[type="text"].invert, input[type="number"].invert, input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="date"]:focus, input[type="password"]:focus, input[type="date"]:focus, textarea:focus, { background-color:var(--app-theme); color:var(--app-theme-contrast); } .slimForm input[type="text"].invert, .slimForm input[type="number"].invert, .slimForm input[type="text"]:focus, .slimForm input[type="number"]:focus, .slimForm input[type="email"]:focus, .slimForm input[type="date"]:focus, .slimForm input[type="password"]:focus, .slimForm input[type="date"]:focus, .slimForm textarea:focus, { background-color:var(--app-theme); color:var(--app-theme-contrast); } input[type="text"].invert:focus, input[type="number"].invert:focus { background-color:var(--app-theme-lighter); } #export_wochenkarte { position:relative; float:left; margin-top:-46px; } #export_wochenkarte button { margin-top:0; } #export_wochenkarte button:hover, #export_wochenkarte button:focus { color:var(--app-theme-contrast); background-color:var(--app-theme); } #searchInput { position:relative; float:right; width:227px; margin-top:-46px; margin-bottom:20px; } #searchInput input { padding-right:36px; position:relative; float:left; margin-bottom:0; } #searchInput button { position:absolute; right:0; top:0; width:36px; height:100%; padding:5px; margin:0; display:flex; } #searchInput button > svg { width:100%; } #searchInput button > svg path { fill:#fff; } #searchInput button:hover > svg path { fill:#000; } .fileUpload { background-color:var(--app-theme); color:var(--app-theme-contrast); padding:0; line-height:1.2; transition:background-color 200ms ease-out 0ms; } .fileUploadList { background-color:var(--app-theme); color:var(--app-theme-contrast); padding:10px; justify-content:flex-start !important; } .fileUploadList img { cursor:pointer; transition:opacity 200ms ease-out 0ms; } .fileUploadList img:hover { opacity:0.5; } .fileUpload.dz-drag-hover { background-color:var(--app-theme-lighter); } .fileUpload span.placeholder, .fileUpload span.drag_over { position:relative; float:left; clear:both; width:100%; padding:22px 10px 20px; text-align:center; font-style:italic; pointer-events:none; } .fileUpload.report span.placeholder, .fileUpload.report span.drag_over { padding-top:10px; padding-bottom:8px; } .fileUpload span.drag_over { display:none; } .fileUpload.dz-drag-hover span.placeholder { display:none; } .fileUpload.dz-drag-hover span.drag_over { display:block; } .fileUpload .dz-preview { position:relative; float:left; clear:both; width:100%; padding:10px 10px 0; transition:background-color 200ms ease-out 0ms; } .fileUpload .dz-preview > * { position:relative; float:left; margin:0 10px 10px 0; } .fileUpload .dz-details, .fileUpload .dz-progress, .fileUpload .dz-error-message { padding-left:10px; } .fileUpload .dz-success-mark { display:none; } .fileUpload .dz-error-mark svg { position:relative; float:left; width:100%; height:auto; } .fileUpload .dz-error-mark { position:absolute; right:10px; top:10px; margin:0; width:20px; height:20px; opacity:0.2; transition:opacity 200ms ease-out 0ms; cursor:pointer; display:none; } .fileUpload.report .dz-error-mark { display:block; } @media(hover:hover) { .fileUpload:not(.dz-started):hover, .fileUpload .dz-preview:hover { background-color:var(--app-theme-lighter); } .dz-preview:hover .dz-error-mark { opacity:1; } } form label[for] { position:relative; float:left; clear:both; width:100%; margin-bottom:1px; font-size:1.4rem; color:#9F9F9F; transition:color 200ms ease-out 0ms; } form label[for].active { color:var(--app-theme); } .responsiveTable { position:relative; float:left; clear:both; width:100%; overflow-x:auto; } .responsiveTable table { min-width:600px; } .responsiveTable table td, .responsiveTable table th { padding:3px 5px 1px; } .responsiveTable tr.title:not(.firstTitle) td { padding-top:30px; } .responsiveTable tr:not(.labels):not(.title) { background-color:transparent; transition:all 200ms ease-out 0ms; } @media(hover:hover) { .responsiveTable tr:not(.labels):not(.title):hover { background-color:var(--app-theme-lighter-2); } .responsiveTable tr:not(.labels):not(.title):hover a { } } tr.labels td { font-size:1.4rem; color:#9F9F9F; font-style:italic; } .unitLabel, .queryLabel { font-size:1.4rem; color:#9F9F9F; display:block; width:100%; } .unitLabel { position:absolute; right:0; bottom:0; margin-bottom:-1rem; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; text-align:right; } .queryLabel { position:relative; float:left; clear:both; text-align:left; margin-bottom:1.4rem; } .queryLabel table { width:auto; } .queryLabel table td { padding:0 1.4rem 0 0; } form input[type="radio"], form input[type="checkbox"] { position:absolute; display:none; pointer-events:none; opacity:0; width:auto; left:0; top:0; } form input[type="radio"] + label, form input[type="checkbox"] + label { position:relative; float:left; padding-left:4.5rem; padding-top:0.7rem; margin-bottom:10px; min-height:3.5rem; font-size:1.6rem; color:var(--app-theme); user-select:none; } form.slimForm input[type="radio"] + label, form.slimForm input[type="checkbox"] + label { width:1.5rem; height:1.5rem; min-height:1.5rem; margin-bottom:0; padding-left:0; } form input[type="radio"] + label::before, form input[type="checkbox"] + label::before, form input[type="radio"] + label::after, form input[type="checkbox"] + label::after { content:''; position:absolute; top:0; left:0; width:3.0rem; height:3.0rem; pointer-events:none; } form.slimForm input[type="radio"] + label::before, form.slimForm input[type="checkbox"] + label::before, form.slimForm input[type="radio"] + label::after, form.slimForm input[type="checkbox"] + label::after { width:1.5rem; height:1.5rem; } form input[type="radio"] + label::before, form input[type="checkbox"] + label::before { border:2px var(--app-theme) solid; line-height:1; transition:all 200ms ease-out 0ms; z-index:1; } form input[type="radio"] + label::after, form input[type="checkbox"] + label::after { top:2px; left:2px; content:''; z-index:2; display:none; background-color:var(--app-theme); background-image:url("data:image/svg+xml;utf8,%3Csvg width='10px' height='10px' viewbox='0 0 10 10' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.22756 0L4.99772 4.23093L0.768963 0L0 0.768963L4.22984 4.9988L0 9.22864L0.768963 9.99869L4.99772 5.76885L9.22756 9.99869L9.99652 9.22864L5.76668 4.9988L9.99652 0.768963L9.22756 0Z' fill='%23FFFFFF' fill-rule='evenodd' stroke='none' /%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:50% 50%; background-size:70% auto; } form input[type="radio"]:checked + label::after, form input[type="checkbox"]:checked + label::after { display:block; } button, .button, a.navLink { border:2px var(--app-theme) solid; color:var(--app-theme); padding:9px 20px 7px; line-height:1; cursor:pointer; transition:all 200ms ease-out 0ms; } a.navLink.invert { border-color:var(--app-body); } a.navLink.foreman { background-color:#878787 !important; } a.navLink.light, button.navLink.light { background-color:var(--app-body); } h1.button, h2.button, h3.button { cursor:default; } button[type="submit"], a.navLink:not(.light), .button.dark { background-color:var(--app-theme); color:var(--app-theme-contrast); } button[type="submit"].green { background-color:#005700; } button.floatLeft { position:relative; float:left; clear:both; margin-top:15px; margin-bottom:10px; } button[type="submit"] { position:relative; float:right; clear:both; margin-top:15px; margin-bottom:10px; } h2.projectMediaLabel { margin:-3rem 0 0; } .button.small, button.small { font-size:1.6rem; padding:6px 10px 4px; } @media(hover:hover) { a.navLink.light.invert:hover { border-color:var(--app-body); } a.button:hover, a.navLink.light:hover, button:hover { background-color:var(--app-theme); color:var(--app-theme-contrast); } button[type="submit"]:hover, a.navLink:not(.light):hover, .button.dark:not(h2):hover { background-color:var(--app-theme-contrast) !important; color:var(--app-theme); opacity:1; } } form a { font-size:1.4rem; margin-bottom:10px; } .formError, .formStatus { position:relative; float:left; clear:both; width:100%; margin-bottom:10px; padding:10px 10px 7px; color:#fff; font-size:1.6rem; text-align:center; cursor:pointer; } .formError { background-color:#B70000; } .formStatus { background-color:#005700; } .flex-bottom { position:relative; float:left; clear:both; width:100%; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; } .flex-cols { position:relative; float:left; clear:both; width:100%; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; } .flex-cols.flex-cols-top { align-items:flex-start; } .flex-cols > * { position:relative; float:left; margin-right:2%; } .flex-cols > *:last-of-type { margin-right:0; } .flex-cols-50-50 > * { width:49%; } .flex-cols-30-70 > *:first-of-type { width:29%; } .flex-cols-30-70 > *:last-of-type { width:69%; } .flex-cols-70-30 > *:first-of-type { width:69%; } .flex-cols-70-30 > *:last-of-type { width:29%; } .flex-cols-33-33-33 > * { width:32%; } .flex-cols-25-25-25-25 > * { width:23%; } .flex-cols-20-20-20-20-20 > * { width:18.4%; } .flex-project.flex-cols-20-20-20-20-20 >*:nth-child(1) { flex:1 1 0; } .flex-project.flex-cols-20-20-20-20-20 >*:nth-child(2) { flex:2 2 0; } .flex-project.flex-cols-20-20-20-20-20 >*:nth-child(3) { flex:1 1 0; } .flex-project.flex-cols-20-20-20-20-20 >*:nth-child(4) { flex:2 2 0; } .flex-project.flex-cols-20-20-20-20-20 >*:nth-child(5) { flex:2 2 0; } .flex-project.report.flex-cols-20-20-20-20-20 >*:nth-child(1) { flex:1 1 0; } .flex-project.report.flex-cols-20-20-20-20-20 >*:nth-child(2) { flex:2 2 0; } .flex-project.report.flex-cols-20-20-20-20-20 >*:nth-child(3) { flex:2 2 0; } .flex-project.report.flex-cols-20-20-20-20-20 >*:nth-child(4) { flex:1 1 0; } .formMarginTop { position:relative; float:left; clear:both; width:100%; margin-top:30px; } table.displayTable { position:relative; float:left; clear:both; width:100%; margin-bottom:30px; } table.displayTable td, table.dispayTable th { padding:5px 5px 5px 0; width:50%; } td.label { font-weight:bold; width:40%; } .onlyDesktop { display:block; } .onlyMobile { display:none; } @media(max-width:800px) { input[type="text"], input[type="number"], input[type="email"], input[type="date"], input[type="password"], input[type="date"], select, .fileUpload { padding-left:5px; padding-right:5px; } } @media(max-width:620px) { .flex-cols-20-20-20-20-20 > * { flex-basis:30% !important; } .flex-project.flex-cols-20-20-20-20-20 >*:nth-child(3) { margin-right:0; } } @media(max-width:460px) { button[type="submit"] { width:100%; } .flex-cols > * { margin-right:0 !important; width:100% !important; } .flex-cols.flex-group { padding-bottom:10px; margin-bottom:20px; border-bottom:1px var(--app-theme-lighter) solid; } .onlyMobile { display:block; } .onlyDesktop { display:none; } .navDelTopPadding_mobile a.navDel { top:2.7rem; } .flex-cols-20-20-20-20-20 > * { flex-basis:100% !important; margin-right:0 !important; } } .slbArrows .prev, .slbArrows .next { background-color:#000; } .slbImageWrap a.dl { position:absolute; top:5px; left:5px; color:#fff !important; border:1px #fff solid; padding:5px 10px; } .exportPreview { position:relative; float:left; clear:both; width:100%; margin:30px 0; } table.exportPreview th { font-weight:bold; } table.exportPreview.hours th, table.exportPreview.hours td { width:33.33333%; } table.exportPreview.hours tr.total td { padding-top:5px; padding-bottom:5px; } table.exportPreview.hours tr.total { border-top:1px #000 solid; border-bottom:1px #000 solid; font-weight:bold; text-transform:uppercase; } .projectExportConfig { position:relative; float:left; clear:both; width:100%; background-color:#E6E6E6; display:none; } .dayInfo { padding:5px 5px 4px; color:#fff; font-size:1.2rem; line-height:1; text-align:center; } .dayInfo.red { background-color:#B70000; } .dayInfo.orange { background-color:#D1981F; } .dayInfo.green { background-color:#005700; } tr.red { color:#B70000; } tr.orange { color:#D1981F; } tr.green { color:#005700; } @font-face { font-family:'ReplicaPro'; src:url('../fonts/ReplicaPro.woff2') format('woff2'), url('../fonts/ReplicaPro.woff') format('woff'), url('../fonts/ReplicaPro.ttf') format('truetype'); font-weight:normal; font-style:normal; font-display:swap; } body { font-family:'ReplicaPro',Verdana,sans-serif; color:var(--app-theme); font-size:1.6rem; line-height:1.2; } a:not(.logo):not(.button):not(.navLink) { color:var(--app-theme); transition:opacity 200ms ease-out 0ms; } a.extLink::after { content:' \2197'; opacity:0.5; font-size:1.2rem; vertical-align:top; } @media(hover:hover) { a:not(.logo):not(.button):not(.navLink):hover { opacity:0.7; } a.hamburger:hover span { background-color:var(--app-theme-contrast); } a.hamburger.active:hover { opacity:0.7; } } @media(max-width:800px){ html { font-size:55%; } } hr { position:relative; float:left; clear:both; width:100%; background:none; border:none; border-top:1px var(--app-theme-lighter) solid; padding:0; margin:30px 0; } h1, h2, h3 { position:relative; float:left; clear:both; width:100%; margin-bottom:2.0rem; font-weight:normal; } h1.pageTitle { margin-bottom:3.0rem; display:flex; justify-content:space-between; align-items:baseline; align-content:center; flex-wrap:wrap; min-height:6.8rem; } h1.pageTitle > * { position:relative; float:left; margin-bottom:3.0rem; } h1.pageTitle > span.title { padding-right:10px; } h1 { font-size:2.6rem; } h2 { font-size:2.0rem; } h3 { font-size:1.6rem; } @media(max-width:420px) { h1.pageTitle > * { width:100%; } h1, h2:not(.tableTitle), h3 { text-align:center; } }