/* Theme Name: made in KL Theme URI: http://virtualdesign.io Author: Philipp Arnold Author URI: https://phil-arno.com Version: 1.2.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: madeinkl */ /* COLORS */ /* FONT SIZES */ /* PARTIALS */ /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ html { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, footer, header, nav, section { display: block; } h1 { font-size: 2em; margin: .67em 0; } figcaption, figure, main { display: block; } figure { margin: 1em 40px; } hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace,monospace; font-size: 1em; } a { background-color: transparent; -webkit-text-decoration-skip: objects; } abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } b, strong { font-weight: inherit; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace,monospace; font-size: 1em; } dfn { font-style: italic; } mark { background-color: #ff0; color: #222; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -.25em; } sup { top: -.5em; } audio, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } img { border-style: none; } svg:not(:root) { overflow: hidden; } button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, html [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 0.0625rem dotted ButtonText; } fieldset { padding: .35em .75em .625em; } legend { -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { display: inline-block; vertical-align: baseline; } textarea { overflow: auto; } [type=checkbox], [type=radio] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; outline-offset: -0.125rem; } [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details, menu { display: block; } summary { display: list-item; } canvas { display: inline-block; } template { display: none; } [hidden] { display: none; } /* CSS Document */ /* open-sans-300 - latin-ext_latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-300.eot"); /* IE9 Compat Modes */ src: local("Open Sans Light"), local("OpenSans-Light"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-300.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-300.woff2") format("woff2"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-300.woff") format("woff"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-300.ttf") format("truetype"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-300.svg#OpenSans") format("svg"); /* Legacy iOS */ } /* open-sans-regular - latin-ext_latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-regular.eot"); /* IE9 Compat Modes */ src: local("Open Sans Regular"), local("OpenSans-Regular"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-regular.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-regular.woff2") format("woff2"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-regular.woff") format("woff"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-regular.ttf") format("truetype"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-regular.svg#OpenSans") format("svg"); /* Legacy iOS */ } /* open-sans-300italic - latin-ext_latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300; src: url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-300italic.eot"); /* IE9 Compat Modes */ src: local("Open Sans Light Italic"), local("OpenSans-LightItalic"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-300italic.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-300italic.woff2") format("woff2"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-300italic.woff") format("woff"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-300italic.ttf") format("truetype"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-300italic.svg#OpenSans") format("svg"); /* Legacy iOS */ } /* open-sans-italic - latin-ext_latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-italic.eot"); /* IE9 Compat Modes */ src: local("Open Sans Italic"), local("OpenSans-Italic"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-italic.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-italic.woff2") format("woff2"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-italic.woff") format("woff"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-italic.ttf") format("truetype"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-italic.svg#OpenSans") format("svg"); /* Legacy iOS */ } /* open-sans-600 - latin-ext_latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-600.eot"); /* IE9 Compat Modes */ src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-600.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-600.woff2") format("woff2"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-600.woff") format("woff"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-600.ttf") format("truetype"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-600.svg#OpenSans") format("svg"); /* Legacy iOS */ } /* open-sans-700 - latin-ext_latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-700.eot"); /* IE9 Compat Modes */ src: local("Open Sans Bold"), local("OpenSans-Bold"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-700.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-700.woff2") format("woff2"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-700.woff") format("woff"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-700.ttf") format("truetype"), url("/wp-content/themes/madeinkl/fonts/open-sans-v15-latin-ext_latin-700.svg#OpenSans") format("svg"); /* Legacy iOS */ } /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ /* GENERAL DESIGN ** ***** */ /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ .touch-detector { display: none; } .user-is-touching .touch-detector { display: block; } ::-moz-selection { background: #222; color: #f5f5f5; text-shadow: none; } ::selection { background: #222; color: #f5f5f5; text-shadow: none; } html { font-size: 100%; line-height: 1.8em; -ms-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; -webkit-text-decoration-skip: ink; text-decoration-skip: ink; font-family: 'Open Sans', sans-serif; color: #757575; font-weight: 300; background-color: #f5f5f5; } a { text-decoration: none; color: #222; position: relative; } /* a:hover { color:$background-color; background:$highlight-color; } */ a:after { content: ''; /* content ist leer... */ position: absolute; bottom: 0; left: 0; width: 0%; border-bottom: 1px solid #333333; -webkit-transition: 0.6s; -o-transition: 0.6s; transition: 0.6s; } a:hover:after { width: 100%; } .noc-grid a:after, .site-title a:after { border-bottom: none; } h1, h2, h3 { font-weight: 300; line-height: 1.3; color: #222; } h4, h5, h6 { font-weight: 700; color: #222; } h1 { font-size: 2.4375rem; } h2 { font-size: 2.0625rem; } h3 { font-size: 1.6875rem; } h4 { font-size: 1.3125rem; } h5 { font-size: 1.125rem; } h6 { font-size: 1rem; } img { width: 100%; height: auto; } blockquote { font-style: italic; font-weight: 700; } figure { margin: 0; } cite { font-weight: 400; } dt { font-weight: 700; } dd { font-style: italic; } button, input[type="submit"] { background: #222; color: #f5f5f5; border: 0.0625rem solid #222; cursor: pointer; padding: 0.375rem 0.9375rem; } button:hover, .expand button, input[type="submit"]:hover { background: #f5f5f5; color: #222; } select { width: 12.5rem; border-radius: 0; cursor: pointer; border: 0.0625rem solid #bbb; padding-left: 0.75rem; background: #f5f5f5; } /* HELPER CLASSES */ .visuallyhidden, .pagination h2 { border: 0; clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 0.0625rem; margin: -0.0625rem; overflow: hidden; padding: 0; position: absolute; width: 0.0625rem; white-space: nowrap; /* 1 */ } .video-container { position: relative; padding-bottom: 56.25%; padding-top: 1.875rem; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* FONT AWESOME */ .fa-facebook-square:hover { color: #3b5999; } .fa-youtube-square:hover { color: #cd201f; } .fa-instagram:hover { color: #e4405f; } .fa-twitter-square:hover { color: #55acee; } @media only screen and (min-width: 48rem) { h1 { font-size: 3.375rem; } h2 { font-size: 2.625rem; } h3 { font-size: 2.25rem; } h4 { font-size: 1.6875rem; } h5 { font-size: 1.3125rem; } h6 { font-size: 1.125rem; } } /* ANIMATIONS */ a, a:hover, i, i:hover, button, button:hover, input, input:hover, .navbar .sub-menu, h3, figcaption, .noc-grid .content, .noc-grid p, .highlight, .highlight:hover { -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; text-decoration: none; } /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ /* GENERAL LAYOUT ** ***** */ /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ *, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; } .block { padding: 0 0.5625rem; margin-top: 3.75rem; } .container-md > .block, .container-sm > .block { margin-top: 0; } .container-md { max-width: 80rem; margin: 2.8125rem auto 0 auto; } .container-sm { max-width: 50rem; margin: 3.75rem auto 0 auto; } .flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .flex-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .width-2-3 { width: 66%; } .width-1-3 { width: 30%; } .jc-sb { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .jc-sa { -ms-flex-pack: distribute; justify-content: space-around; } .jc-right { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .ai-c { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .flex-ai-fe { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } @media only screen and (min-width: 48rem) { .flex-1st { display: -webkit-box; display: -ms-flexbox; display: flex; } .flex-wrap-1st { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-jc-sb-1st { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .flex-ai-fe-1st { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .jc-sb-1st { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .jc-fe-1st { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .width-2-3-1st { width: 70%; } .width-1-3-1st { width: 30%; } .width-1-2-1st { width: 50%; } } @media only screen and (min-width: 67.5rem) { .width-1-4-2nd { width: 25%; } } /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ /* CONTENT BLOCK *** ***** */ /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ .content-block header { width: 100%; margin-bottom: 2.25rem; } .content-block h1 { margin-top: 0; } .sidebar h6:first-child, .sidebar p:first-child { margin-top: 0; } .name::after { content: ','; } .name:last-child::after { content: ''; } /* ***** ***** ***** ***** ***** */ /* ***** ***** ***** ***** ***** */ /* WORDPRESS DEFAULT STYLES **** */ /* ***** ***** ***** ***** ***** */ /* ***** ***** ***** ***** ***** */ .alignnone { margin: 0.3125rem 1.25rem 1.25rem 0; } .aligncenter, div.aligncenter { display: block; margin: 0.3125rem auto 0.3125rem auto; } .alignright { float: right; margin: 0.3125rem 0 0 1.875rem; } .alignleft { float: left; margin: 0.3125rem 1.875rem 0 0; } a img.alignright { float: right; margin: 0.3125rem 0 0 1.875rem; } a img.alignnone { margin: 0.3125rem 1.25rem 1.25rem 0; } a img.alignleft { float: left; margin: 0.3125rem 1.875rem 0 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } /* MENUS */ .current-menu-item { font-weight: 700; } .gallery .gallery-item img { display: block; border: none; } .gallery-caption { display: none; } /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ /* PAGINATION ***** ***** */ /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ .pagination { text-align: center; margin: 2.4375rem 0; font-size: 1.125rem; } .page-numbers { padding: 0.1875rem 0.375rem; } .pagination .current { background: #e3e3e3; color: #222; } /* GALLERY STYLES */ .gallery-item { padding: 0; display: block; } .gallery-columns-1 .gallery-item { width: 100% !important; margin: 0.5% !important; } .gallery-columns-2 .gallery-item .gallery-columns-4 .gallery-item { width: 49% !important; margin: 0.5%; } .gallery-columns-3 .gallery-item, .gallery-columns-5 .gallery-item, .gallery-columns-6 .gallery-item, .gallery-columns-7 .gallery-item, .gallery-columns-8 .gallery-item, .gallery-columns-9 .gallery-item { width: 32% !important; margin: 0.5% !important; } .gallery-item figcaption { display: none; } @media only screen and (min-width: 48rem) { .gallery { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .gallery-columns-2 .gallery-item { width: 49% !important; margin: 0.5% !important; } .gallery-columns-3 .gallery-item { width: 32.3333333333% !important; margin: 0.5% !important; } .gallery-columns-4 .gallery-item { width: 24% !important; margin: 0.5% !important; } .gallery-columns-5 .gallery-item { width: 19% !important; margin: 0.5% !important; } .gallery-columns-6 .gallery-item, .gallery-columns-7 .gallery-item, .gallery-columns-8 .gallery-item, .gallery-columns-9 .gallery-item { width: 16%; margin: 0.3%; } } /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ /* SITE HEADER ***** ***** */ /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ #site-header { margin-top: 1.125rem; background: #f5f5f5; width: 100%; margin-top: 0; z-index: 99999999; } #site-header .nav-wrapper { margin-top: 0; padding: 9px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .site-title { margin: 0; text-align: center; font-size: 1.125rem; font-weight: 400; padding: 0.375rem 0; } .site-title a:hover { background: #f5f5f5; color: #222; } .hs-logo { text-align: center; margin-top: 1rem; margin-bottom: 1rem; } .hs-logo.container-md { margin: inherit 0; } @media only screen and (min-width: 48rem) { .hs-logo { margin-bottom: 45px; } } /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ /* NAVBAR ***** ***** */ /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ /* DESIGN */ .navbar { text-align: center; } .navbar li a { padding: 0.375rem 0.75rem; display: block; } .navbar .menu-item-has-children > a:after { content: "\002B"; padding-left: 0.3125rem; } #navbar-toggle { margin-top: 0.9375rem; } .navbar .sub-menu li a { font-size: 0.875rem; font-style: italic; } .nav-items { display: block; z-index: 1; visibility: hidden; opacity: 0; } .expand .nav-items { visibility: visible; opacity: 1; } /* LAYOUT */ .navbar ul { list-style: none; padding: 0; } .nav-items { display: none; margin: 0; } .expand .nav-items { display: block; } /* ADDITIONAL */ @media only screen and (min-width: 48rem) { #site-header { width: 100%; margin-top: 0; padding: 0; z-index: 999; } #navbar-toggle { display: none; } .navbar ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; text-align: left; } .navbar .sub-menu { display: block; position: absolute; z-index: 1; visibility: hidden; opacity: 0; border: 0.0625rem solid #222; } .navbar .sub-menu li a { font-size: 1rem; font-style: normal; } .nav-items { visibility: visible; opacity: 1; } .navbar .menu-item-has-children:hover > .sub-menu { visibility: visible; opacity: 1; } /* DESIGN */ .navbar .sub-menu, .navbar .sub-menu a, .navbar .navbar li:hover > a { background: #222; color: #f5f5f5; } .navbar .sub-menu a { position: relative; } .navbar .sub-menu a:before { content: ""; position: absolute; width: 80%; margin-left: 10%; height: 0.0625rem; bottom: 0.4375rem; left: 0; background-color: #f5f5f5; visibility: hidden; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .navbar .sub-menu a:hover:before { visibility: visible; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } } /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ /* FOOTER **** ***** ***** */ /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ /* DESIGN */ #site-footer { background: #f5f5f5; color: #222; padding: 0.375rem 0 0.75rem 0; margin-top: 2.4375rem; width: 100%; } #site-footer a { padding: 0.375rem 0.75rem; display: block; } #site-footer ul { list-style-type: none; padding: 0; margin: 0; } footer ul { list-style-type: none; } /* SOCIAL MENU */ #site-footer .social-menu { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 2rem; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 1rem; } .social-menu a:after { border-bottom: none; } #site-footer .social-menu a { padding: 0; margin-right: 1.125rem; } /* LAYOUT */ #site-footer .site-title { display: none; } /* ADDITIONAL */ #site-footer .container-md { margin-top: 0; padding: 0 1%; } @media only screen and (min-width: 48rem) { #site-footer .site-title { display: block; } #site-footer .social-menu { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-bottom: 0; } } /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ /* PAGE ***** ***** ***** */ /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ /* DESIGN */ .keyphrase { font-size: 2rem; font-weight: 300; line-height: 1.01em; letter-spacing: 0.08em; color: #222; } .page .keyphrase { margin: 1rem 0; } .keyphrase strong { font-weight: 600; } /* LAYOUT */ @media only screen and (min-width: 48rem) { .keyphrase { font-size: 3.0625rem; color: #222; } } /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ /* TEAM ***** ***** ***** */ /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ .team-img { width: 9.375rem; } /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ /* TEAM-GRID * ***** ***** */ /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ @media only screen and (min-width: 48rem) { .archive.post-type-archive-vd_team .masonry, .page-id-2633 .masonry { display: -webkit-box; display: -ms-flexbox; display: flex; } .archive.post-type-archive-vd_team .masonry__item, .page-id-2633 .masonry__item { width: 20%; } @supports ((display: -ms-grid) or (display: grid)) { .archive.post-type-archive-vd_team .masonry, .page-id-2633 .masonry { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 0.1875rem; } .archive.post-type-archive-vd_team .masonry__item, .page-id-2633 .masonry__item { width: auto; -ms-grid-column-span: 1; grid-column: span 1; -ms-grid-row-span: 1; grid-row: span 1; } } } /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ /* SEARCH & FILTER * ***** */ /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ .postform, .searchandfilter label:before, .postform label:before { background-color: #f5f5f5; color: #757575; border: 0.0625rem solid #e3e3e3; } .postform:hover { color: #222; } .searchandfilter select.postform { padding: 0.75rem; padding: 0.375rem; } .searchandfilter .sf-field-submit input { width: 12.5rem; padding: 0.53125rem 0; } @supports (pointer-events: none) and ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) { .searchandfilter label { position: relative; display: inline-block; vertical-align: middle; } .postform { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .searchandfilter label:before, .searchandfilter label:after { content: ""; position: absolute; pointer-events: none; } .searchandfilter label:after { content: "\25BC"; height: 1rem; font-size: 0.75rem; line-height: 1; right: 0.625rem; top: 50%; margin-top: -0.3125rem; } .searchandfilter label:before { width: 2rem; right: 0; top: 0; bottom: 0; } .postform[disabled] { color: rgba(0, 0, 0, 0.3); } .searchandfilter label.custom-dropdown--disabled:after { color: rgba(0, 0, 0, 0.1); } ndfilter label:after { color: rgba(0, 0, 0, 0.9); } @-moz-document url-prefix() { .postform { padding-right: .9rem; } } } .searchandfilter { text-align: center; margin-bottom: 1.875rem; } .searchandfilter ul, .searchandfilter li[data-sf-field-input-type=checkbox] label { padding-left: 0; } @media only screen and (min-width: 48rem) { .filter-area form ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .filter-area .searchandfilter li { margin: 0 0.375rem; } } /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ /* MASONRY IMAGE GRID **** */ /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ .masonry img { vertical-align: middle; } .masonry__item { width: 100%; margin-bottom: 1%; } .masonry figure, .page-template-template-info figure { position: relative; overflow: hidden; vertical-align: middle; } .masonry figcaption, .page-template-template-info .info-page figcaption { position: absolute; bottom: 0.375rem; left: 2%; width: 96%; opacity: 0; background: #f5f5f5; padding: 0.1875rem 0.375rem; } .masonry img, .page-template-template-info a.info-page img { vertical-align: middle; -webkit-transition: -webkit-transform 0.4s; transition: -webkit-transform 0.4s; -o-transition: transform 0.4s; transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: block; } .masonry a { background: #f5f5f5; } .masonry a:hover img, .page-template-template-info a.info-page:hover img { -webkit-transform: translate3d(0, 0, 0) scale(1.125); transform: translate3d(0, 0, 0) scale(1.125); } .masonry h3, .masonry figcaption p, .page-template-template-info .info-page h3, .page-template-template-info .info-page figcaption p { margin: 0; font-weight: 300; font-size: 0.8125rem; line-height: 1.3; } .masonry a:hover figcaption p, .page-template-template-info a.info-page:hover figcaption p { color: #222; } .masonry h3 span { font-size: 0.875rem; font-style: italic; } .masonry a:hover figcaption, .page-template-template-info a.info-page:hover figcaption, .user-is-touching .masonry a figcaption, .user-is-touching a.info-page figcaption { opacity: 1; } /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ /* HOME-MASONRY-GRID ***** */ /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ .home .masonry__item, .home-video { margin: 0.0625rem; width: 100%; } @media only screen and (min-width: 48rem) { .home .masonry { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .home .masonry__item .figure, .home .masonry__item, .home-video { margin: 0; } .home .masonry__item:first-child { width: 100%; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .home .masonry__item:nth-child(2), .home .masonry__item:nth-child(3), .home .masonry__item:nth-child(4), .home .masonry__item:nth-child(5) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .home .masonry__item:nth-child(5) .figure { margin-left: 0; margin-right: 0; } .home .masonry__item:nth-child(5n+1) .figure { margin-left: 0; } .home .masonry__item:nth-child(5n+4) .figure { margin-right: 0; } .home .masonry__item { width: 25%; margin: 0; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .home .masonry__item:first-child figcaption { width: 99%; left: 0.5%; } @supports ((display: -ms-grid) or (display: grid)) { .home .masonry { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 0.1875rem; } .home-video { margin-bottom: 0.1875rem; } .home .masonry__item { width: auto; -ms-grid-column-span: 1; grid-column: span 1; } .home .masonry__item:first-child { width: auto; -ms-grid-column-span: 4; grid-column: span 4; } } } /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ /* PORTFOLIO-MASONRY-GRID */ /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ .archive .masonry__item, .page-id-2633 .masonry__item, .hero { margin: 0.25%; } .archive .hero, .tax-project_taxonomy .hero { width: 99.5%; display: block; } /*TAGS*/ .my_term-archive { text-align: center; list-style: none; } .my_term-archive .current-menu-item { font-weight: 700; } .my_term-archive .current-menu-item .sub-menu { font-weight: 300; } .my_term-archive li { display: none; } .my_term-archive .current-menu-parent, .my_term-archive .current-menu-parent li, .my_term-archive .current-menu-item, .my_term-archive .current-menu-item > .sub-menu li, .my_term-archive ul, .my_term-archive > li { display: inline; } .my_term-archive ul { padding: 0; margin: 0; } .my_term-archive a { padding: 3px 6px; display: inline-block; margin: 6px 3px; } @media only screen and (min-width: 48rem) { .archive .masonry { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .archive .masonry__item { width: 50%; margin: 0; } .archive .masonry__item:nth-child(6n+3) figcaption, .archive .masonry__item:nth-child(6n+6) figcaption { width: 98%; left: 1%; } .archive.category-research .masonry figcaption { left: 2%; width: 96%; } @supports ((display: -ms-grid) or (display: grid)) { .archive .masonry { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 0.1875rem; } .archive .masonry__item:nth-child(6n+1), .archive .masonry__item:nth-child(6n+2), .archive .masonry__item:nth-child(6n+5), .archive .masonry__item:nth-child(6n+6) { -ms-grid-column-span: 1; grid-column: span 1; -ms-grid-row-span: 1; grid-row: span 1; width: auto; } .archive .masonry__item:nth-child(6n+3), .archive .masonry__item:nth-child(6n+4) { -ms-grid-column-span: 2; grid-column: span 2; -ms-grid-row-span: 2; grid-row: span 2; width: auto; } } } /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ /* INFO-GRID * ***** ***** */ /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ a.info-page { padding-bottom: 0.125rem; display: block; } .info-page figure { position: relative; } a.info-page:hover { background-color: transparent; } @media only screen and (min-width: 48rem) { .page-template-template-info .info-page { padding: 0.165625rem; display: block; } .page-template-template-info .landscape-8x3 { width: 100%; } .page-template-template-info .landscape-4x3 { width: 50%; } .page-template-template-info .landscape-8x3 figcaption { width: 99%; left: 0.5%; } .page-template-template-info .landscape-4x3 figcaption { width: 98%; left: 1%; } } /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ /* TEAM ***** ***** ***** */ /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ .team-img { width: 9.375rem; } /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ /* TEAM-GRID * ***** ***** */ /* ***** ***** ***** ***** */ /* ***** ***** ***** ***** */ @media only screen and (min-width: 48rem) { .archive.post-type-archive-vd_team .masonry, .page-id-2633 .masonry { display: -webkit-box; display: -ms-flexbox; display: flex; } .archive.post-type-archive-vd_team .masonry__item, .page-id-2633 .masonry__item { width: 20%; } @supports ((display: -ms-grid) or (display: grid)) { .archive.post-type-archive-vd_team .masonry, .page-id-2633 .masonry { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 0.1875rem; } .archive.post-type-archive-vd_team .masonry__item, .page-id-2633 .masonry__item { width: auto; -ms-grid-column-span: 1; grid-column: span 1; -ms-grid-row-span: 1; grid-row: span 1; } } } .noc-grid .flex-wrapper { 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; } .noc-grid .thumb { margin: 0.5%; background-position: center center; background-size: cover; background-repeat: no-repeat; position: relative; } .noc-grid .thumb:nth-child(4n+1) > .aspect, .noc-grid .thumb:nth-child(4n+2) > .aspect, .noc-grid .thumb:nth-child(4n+3) > .aspect, .noc-grid .thumb:nth-child(4n+4) > .aspect { padding-bottom: 56.25%; } .noc-grid .thumb:nth-child(4n+1), .noc-grid .thumb:nth-child(4n+4), .noc-grid .thumb:nth-child(4n+2), .noc-grid .thumb:nth-child(4n+3) { width: 100%; } .noc-grid .content { position: absolute; top: 0; left: 0; padding: 0 24px; opacity: 0; z-index: 1; width: 100%; height: 100%; background: -webkit-linear-gradient(125deg, #fff 0%, #535353 100%); background: -o-linear-gradient(125deg, #fff 0%, #535353 100%); background: linear-gradient(325deg, #fff 0%, #535353 100%); } .noc-grid a:hover .content { opacity: 0.9; } .noc-grid a:hover p { opacity: 1; } .noc-grid .thumb p { position: absolute; top: 6.625rem; left: 1.5rem; z-index: 2; opacity: 0; color: #f5f5f5; width: 66%; } .noc-grid .thumb h3, .noc-grid small { position: absolute; top: 0.75rem; left: 1.375rem; z-index: 2; color: #f5f5f5; text-transform: uppercase; } .noc-grid .thumb h3 { top: 1.25rem; margin: 0; font-weight: 700; font-style: italic; } .noc-grid .thumb .awards { position: absolute; bottom: 0; right: 0; z-index: 2; } .noc-grid .awards img { max-width: 65px; padding: 5px 10px; } @media only screen and (min-width: 62.5rem) { .noc-grid .thumb:nth-child(4n+1), .noc-grid .thumb:nth-child(4n+4) { width: 59%; } .noc-grid .thumb:nth-child(4n+2), .noc-grid .thumb:nth-child(4n+3) { width: 39%; } }