* {
outline: none;
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
margin: 0;
padding: 0;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
mark {
background: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
border-radius: 0;
}
input[type="checkbox"],
input[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
border-radius: 0;
}
optgroup {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
/* ========================================================================= */
#privacypolicy {
position: fixed;
right: 0;
bottom: 0;
background: #dad9d9;
color: #faf9f6;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 15px 30px;
width: 100%;
font-size: 11px;
line-height: 22px;
opacity: 0;
-webkit-transform: translate(0, 30px);
-ms-transform: translate(0, 30px);
transform: translate(0, 30px);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
pointer-events: none;
}
#privacypolicy.active {
opacity: 1;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
pointer-events: auto;
}
#privacypolicy a {
color: #faf9f6;
}
#privacypolicy .privacy-btn {
background-image: url('../images/privacy-close.svg');
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
position: absolute;
top: 15px;
right: 10px;
width: 15px;
height: 15px;
cursor: pointer;
}
/* CMS ========================================================================= */
.uniform__potty {
position: absolute;
left: -9999px;
}
@font-face {
font-family: 'NeueKaine';
src: url('../fonts/NeueKaine/NeueKaine.woff2') format('woff2-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue LT Std';
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Bd.eot');
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Bd.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Bd.woff2') format('woff2'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Bd.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue LT Std';
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-BdEx.eot');
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-BdEx.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-BdEx.woff2') format('woff2'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-BdEx.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue LT Std';
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Cn.eot');
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Cn.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Cn.woff2') format('woff2'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Cn.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue LT Std';
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-BlkEx.eot');
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-BlkEx.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-BlkEx.woff2') format('woff2'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-BlkEx.woff') format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue LT Std';
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-ThIt.eot');
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-ThIt.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-ThIt.woff2') format('woff2'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-ThIt.woff') format('woff');
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue LT Std';
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-BlkIt.eot');
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-BlkIt.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-BlkIt.woff2') format('woff2'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-BlkIt.woff') format('woff');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue LT Std';
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Md.eot');
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Md.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Md.woff2') format('woff2'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Md.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue LT Std';
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-UltLtIt.eot');
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-UltLtIt.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-UltLtIt.woff2') format('woff2'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-UltLtIt.woff') format('woff');
font-weight: 200;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue LT Std';
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-MdIt.eot');
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-MdIt.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-MdIt.woff2') format('woff2'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-MdIt.woff') format('woff');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue LT Std';
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-It.eot');
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-It.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-It.woff2') format('woff2'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-It.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue LT Std';
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-UltLt.eot');
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-UltLt.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-UltLt.woff2') format('woff2'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-UltLt.woff') format('woff');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue LT Std';
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Lt.eot');
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Lt.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Lt.woff2') format('woff2'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Lt.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue LT Std';
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Roman.eot');
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Roman.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Roman.woff2') format('woff2'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Roman.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue LT Std';
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Blk.eot');
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Blk.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Blk.woff2') format('woff2'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Blk.woff') format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue LT Std';
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-BdIt.eot');
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-BdIt.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-BdIt.woff2') format('woff2'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-BdIt.woff') format('woff');
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue LT Std';
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-LtIt.eot');
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-LtIt.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-LtIt.woff2') format('woff2'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-LtIt.woff') format('woff');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue LT Std';
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Th.eot');
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Th.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Th.woff2') format('woff2'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Th.woff') format('woff');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue LT Std';
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-HvIt.eot');
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-HvIt.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-HvIt.woff2') format('woff2'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-HvIt.woff') format('woff');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue LT Std';
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Hv.eot');
src: url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Hv.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Hv.woff2') format('woff2'), url('../fonts/HelveticaNeue/HelveticaNeueLTStd-Hv.woff') format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}
/* ANIMATIONS ====================================================================== */
/*.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
&.visible {
opacity: 1;
transform: translateY(0);
}
}*/
.letter {
display: inline-block;
opacity: 0;
-webkit-transform: translateY(40px);
-ms-transform: translateY(40px);
transform: translateY(40px);
}
.word {
display: inline-block;
white-space: nowrap;
}
/* STYLES ====================================================================== */
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
html {
height: 100%;
margin: 0;
padding: 0;
font-size: 32px;
}
body {
background-color: #000000;
color: #faf9f6;
height: 100%;
max-width: 3000px;
margin: 0 auto;
padding: 0;
font-family: "Helvetica Neue LT Std", sans-serif;
font-weight: 300;
font-size: 18px;
letter-spacing: -0.005em;
line-height: 1.16;
/*&:before{
content: '';
position: fixed;
top: 0;
left: 50%;
width: 1px;
height: 100%;
background-color: yellow;
z-index: 1000;
}*/
cursor: none;
}
.cursor {
position: fixed;
border-radius: 50%;
pointer-events: none;
z-index: 10000;
background-color: #FAF9F6;
/* Offwhite kleur */
height: 20px;
width: 20px;
/* Transition alleen voor de grootte en opacity, niet voor de positie */
-webkit-transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease, font-size 0.3s ease;
transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease, font-size 0.3s ease;
will-change: transform;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: transparent;
font-size: 0;
text-align: center;
overflow: hidden;
font-weight: 300;
padding-top: 6px;
}
.cursor.button-hover {
opacity: 0;
/* Maak cursor onzichtbaar over buttons */
}
.cursor.opennav {
background-color: #000000;
}
.cursor.hover-project {
/*width: 140px;
height: 140px;*/
height: 30px;
width: 30px;
color: #000;
font-size: 14px;
text-transform: uppercase;
background-color: #FAF9F6;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
p {
margin-top: 0;
line-height: 1.38;
}
p:last-of-type {
margin-bottom: 0;
}
p a {
text-decoration: underline;
}
p a:hover {
text-decoration: none;
}
a {
color: #faf9f6;
text-decoration: none;
-webkit-transition: color 0.3s ease-in-out;
transition: color 0.3s ease-in-out;
}
a:not(.nohoverchange):not(.button):hover {
color: #A68F97;
text-decoration: underline;
}
img {
display: block;
width: 100%;
height: auto;
}
.button,
input[type="submit"] {
display: inline-block;
font-family: "Helvetica Neue LT Std", sans-serif;
font-weight: 400;
font-size: 18px;
letter-spacing: -0.005em;
line-height: 1;
text-transform: uppercase;
text-align: center;
color: #fff;
padding: 20px 60px 18px;
border: 1px solid #fff;
border-radius: 20px;
text-decoration: none;
overflow: hidden;
z-index: 1;
cursor: pointer;
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.button:hover,
input[type="submit"]:hover,
.button.hovered,
input[type="submit"].hovered {
text-decoration: none;
color: #000000;
background-color: #fff;
}
/*
.button, .input-button-wrapper{
.fill-circle {
position: absolute;
border-radius: 50%;
background-color: @white;
width: 0;
height: 0;
transform: translate(-50%, -50%);
transition: width 0.6s ease-out, height 0.6s ease-out;
z-index: -1;
box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.3);
filter: blur(3px);
}
}*/
/*
.button.hovered .fill-circle{
width: 300%;
height: 300%;
}*/
.input-button-wrapper:hover {
/*.fill-circle{
width: 300%;
height: 300%;
}*/
}
.input-button-wrapper:hover input[type="submit"] {
color: #000000 !important;
background-color: #fff !important;
}
.input-button-wrapper {
border-radius: 20px;
}
.plg-imagecontainer {
position: relative;
width: 100%;
overflow: hidden;
}
.plg-logo-jaysstudio {
width: 150px;
margin: 0 auto;
}
#form-success {
display: none;
}
#feedback.erroneous,
#feedback.error {
padding: 10px;
text-align: center;
background-color: crimson;
color: #fff;
margin-bottom: 10px;
font-weight: bold;
}
#contact-form input[type="text"],
#newsletter-form input[type="text"],
#contact-form input[type="email"],
#newsletter-form input[type="email"],
#contact-form textarea,
#newsletter-form textarea {
-webkit-appearance: none;
padding: 20px 40px 18px;
border: 0;
border: 1px solid #fff;
border-radius: 20px;
background-color: transparent;
width: 100%;
}
#contact-form input[type="text"]::-webkit-input-placeholder, #newsletter-form input[type="text"]::-webkit-input-placeholder, #contact-form input[type="email"]::-webkit-input-placeholder, #newsletter-form input[type="email"]::-webkit-input-placeholder, #contact-form textarea::-webkit-input-placeholder, #newsletter-form textarea::-webkit-input-placeholder {
color: #676767;
text-transform: uppercase;
}
#contact-form input[type="text"]::-moz-placeholder, #newsletter-form input[type="text"]::-moz-placeholder, #contact-form input[type="email"]::-moz-placeholder, #newsletter-form input[type="email"]::-moz-placeholder, #contact-form textarea::-moz-placeholder, #newsletter-form textarea::-moz-placeholder {
color: #676767;
text-transform: uppercase;
}
#contact-form input[type="text"]:-ms-input-placeholder, #newsletter-form input[type="text"]:-ms-input-placeholder, #contact-form input[type="email"]:-ms-input-placeholder, #newsletter-form input[type="email"]:-ms-input-placeholder, #contact-form textarea:-ms-input-placeholder, #newsletter-form textarea:-ms-input-placeholder {
color: #676767;
text-transform: uppercase;
}
#contact-form input[type="text"]::-ms-input-placeholder, #newsletter-form input[type="text"]::-ms-input-placeholder, #contact-form input[type="email"]::-ms-input-placeholder, #newsletter-form input[type="email"]::-ms-input-placeholder, #contact-form textarea::-ms-input-placeholder, #newsletter-form textarea::-ms-input-placeholder {
color: #676767;
text-transform: uppercase;
}
#contact-form input[type="text"]::placeholder,
#newsletter-form input[type="text"]::placeholder,
#contact-form input[type="email"]::placeholder,
#newsletter-form input[type="email"]::placeholder,
#contact-form textarea::placeholder,
#newsletter-form textarea::placeholder {
color: #676767;
text-transform: uppercase;
}
#contact-form input[type="text"].erroneous,
#newsletter-form input[type="text"].erroneous,
#contact-form input[type="email"].erroneous,
#newsletter-form input[type="email"].erroneous,
#contact-form textarea.erroneous,
#newsletter-form textarea.erroneous {
border-color: crimson;
}
#contact-form input[type="text"].erroneous::-webkit-input-placeholder, #newsletter-form input[type="text"].erroneous::-webkit-input-placeholder, #contact-form input[type="email"].erroneous::-webkit-input-placeholder, #newsletter-form input[type="email"].erroneous::-webkit-input-placeholder, #contact-form textarea.erroneous::-webkit-input-placeholder, #newsletter-form textarea.erroneous::-webkit-input-placeholder {
color: crimson;
}
#contact-form input[type="text"].erroneous::-moz-placeholder, #newsletter-form input[type="text"].erroneous::-moz-placeholder, #contact-form input[type="email"].erroneous::-moz-placeholder, #newsletter-form input[type="email"].erroneous::-moz-placeholder, #contact-form textarea.erroneous::-moz-placeholder, #newsletter-form textarea.erroneous::-moz-placeholder {
color: crimson;
}
#contact-form input[type="text"].erroneous:-ms-input-placeholder, #newsletter-form input[type="text"].erroneous:-ms-input-placeholder, #contact-form input[type="email"].erroneous:-ms-input-placeholder, #newsletter-form input[type="email"].erroneous:-ms-input-placeholder, #contact-form textarea.erroneous:-ms-input-placeholder, #newsletter-form textarea.erroneous:-ms-input-placeholder {
color: crimson;
}
#contact-form input[type="text"].erroneous::-ms-input-placeholder, #newsletter-form input[type="text"].erroneous::-ms-input-placeholder, #contact-form input[type="email"].erroneous::-ms-input-placeholder, #newsletter-form input[type="email"].erroneous::-ms-input-placeholder, #contact-form textarea.erroneous::-ms-input-placeholder, #newsletter-form textarea.erroneous::-ms-input-placeholder {
color: crimson;
}
#contact-form input[type="text"].erroneous::placeholder,
#newsletter-form input[type="text"].erroneous::placeholder,
#contact-form input[type="email"].erroneous::placeholder,
#newsletter-form input[type="email"].erroneous::placeholder,
#contact-form textarea.erroneous::placeholder,
#newsletter-form textarea.erroneous::placeholder {
color: crimson;
}
#contact-form .policy,
#newsletter-form .policy {
margin-bottom: 25px;
}
#contact-form .policy label,
#newsletter-form .policy label {
position: relative;
color: #faf9f6;
margin-left: 25px;
text-transform: uppercase;
font-size: 11px;
}
#contact-form .policy label a,
#newsletter-form .policy label a {
color: #faf9f6;
}
#contact-form .policy label a:hover,
#newsletter-form .policy label a:hover {
text-decoration: none;
}
#contact-form .policy:not(#IE8) label:before,
#newsletter-form .policy:not(#IE8) label:before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
position: absolute;
left: -25px;
top: 50%;
border: 1px solid #fff;
cursor: pointer;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}
#contact-form .policy:not(#IE8) input[type="checkbox"],
#newsletter-form .policy:not(#IE8) input[type="checkbox"] {
display: none;
}
#contact-form .policy:not(#IE8) input[type="checkbox"]:checked + label:before,
#newsletter-form .policy:not(#IE8) input[type="checkbox"]:checked + label:before {
content: "\2713";
line-height: 0.8;
font-size: 16px;
font-family: system-ui;
font-weight: normal;
}
@media screen and (min-width: 0 \0) {
#contact-form .policy:not(#IE8) input[type="checkbox"]:checked + label:before,
#newsletter-form .policy:not(#IE8) input[type="checkbox"]:checked + label:before {
line-height: 8px;
}
}
#contact-form .policy.error:not(#IE8) label:before,
#newsletter-form .policy.error:not(#IE8) label:before {
border: 1px solid crimson !important;
}
#contact-form .policy.error label,
#newsletter-form .policy.error label {
color: crimson;
}
#contact-form .policy.error label a,
#newsletter-form .policy.error label a {
color: crimson;
}
#contact-form input[type="submit"],
#newsletter-form input[type="submit"] {
background: none;
color: #fff;
font: inherit;
outline: inherit;
text-align: center;
text-transform: uppercase;
cursor: pointer;
border: 1px solid #fff;
border-radius: 20px;
padding: 20px 60px 18px;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
/*&:hover {
background-color: @white;
color: @black;
}*/
}
#contact-form .error-text,
#newsletter-form .error-text {
color: crimson;
margin: 10px 0;
}
#contact-form .form-group.error input,
#newsletter-form .form-group.error input {
border-bottom: 1px solid crimson;
}
#contact-form .form-group.error input::-webkit-input-placeholder, #newsletter-form .form-group.error input::-webkit-input-placeholder {
color: crimson !important;
}
#contact-form .form-group.error input::-moz-placeholder, #newsletter-form .form-group.error input::-moz-placeholder {
color: crimson !important;
}
#contact-form .form-group.error input:-ms-input-placeholder, #newsletter-form .form-group.error input:-ms-input-placeholder {
color: crimson !important;
}
#contact-form .form-group.error input::-ms-input-placeholder, #newsletter-form .form-group.error input::-ms-input-placeholder {
color: crimson !important;
}
#contact-form .form-group.error input::placeholder,
#newsletter-form .form-group.error input::placeholder {
color: crimson !important;
}
#newsletter-form {
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: start;
-ms-flex-align: start;
align-items: flex-start;
}
#newsletter-form input[type="email"] {
padding: 19px 40px 18px;
}
#feedback,
#feedback-newsletter {
display: none;
}
.plg-container,
.plg-header-container,
.plg-container-small {
display: block;
width: 100%;
margin: 0 auto;
padding: 0 64px;
}
.plg-container-small {
padding: 0 204px;
max-width: 1800px;
}
section {
background-color: #000000;
/*plg-container,.plg-container-small{
background-color: @black;
}*/
z-index: 5;
}
header {
padding: 64px 0;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
-webkit-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
header .plg-header-container {
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-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
header nav {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
z-index: 99;
opacity: 0;
visibility: hidden;
pointer-events: none;
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-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
/* Voorkom dat items buiten container verschijnen */
}
header nav::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
background-color: #FAF9F6;
border-radius: 0 0 0 100%;
-webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: -1;
}
header nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
header nav ul li {
padding: 0;
/*opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
transition-delay: 0.6s;
visibility: hidden;
&:nth-child(2) { transition-delay: 0.65s; }
&:nth-child(3) { transition-delay: 0.7s; }
&:nth-child(4) { transition-delay: 0.75s; }
&:nth-child(5) { transition-delay: 0.8s; }
&:nth-child(6) { transition-delay: 0.85s; }
&:nth-child(7) { transition-delay: 0.9s; }
&:nth-child(8) { transition-delay: 0.95s; }
&:nth-child(9) { transition-delay: 1s; }
&:nth-child(10) { transition-delay: 1.05s; }*/
}
header nav ul li a {
font-family: "NeueKaine", sans-serif;
color: #A68F97;
font-weight: 800;
font-size: 60px;
text-transform: uppercase;
}
header nav ul li a:hover {
color: #A68F97;
}
header nav ul li:last-child {
margin: 0;
}
header nav .mainnav {
width: 50%;
opacity: 0;
-webkit-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
header nav .secondnav {
position: absolute;
bottom: 64px;
left: 64px;
width: auto;
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: center;
-ms-flex-align: center;
align-items: center;
opacity: 0;
/* Hele secondnav wordt als groep vertraagd */
-webkit-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
header nav .secondnav li {
margin-right: 64px;
/*opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
transition-delay: 1.2s;
&:nth-child(2) { transition-delay: 1.25s; }
&:nth-child(3) { transition-delay: 1.3s; }
&:nth-child(4) { transition-delay: 1.35s; }
&:nth-child(5) { transition-delay: 1.4s; }*/
}
header nav .secondnav li a {
font-family: "Helvetica Neue LT Std", sans-serif;
font-size: 18px;
font-weight: 300;
}
header nav .secondnav li:last-child {
margin: 0;
}
header nav .pagenavitem + li:not(.pagenavitem) {
margin-top: 90px;
}
header.opennav nav {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
header.opennav nav::before {
width: 250%;
/* Vergroot om zeker te zijn dat het de hele pagina bedekt */
height: 250%;
}
header.opennav nav .mainnav {
opacity: 1;
}
header.opennav nav .mainnav li {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
visibility: visible;
}
header.opennav nav .secondnav {
opacity: 1;
}
header.opennav nav .secondnav li {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
visibility: visible;
}
header.opennav .logo {
opacity: 1 !important;
visibility: visible !important;
}
header.opennav .logo .jayseba path {
fill: #A68F97;
}
header.opennav .logo .studio path {
fill: #A68F97;
}
header.startwnlogo .logo {
opacity: 0;
visibility: hidden;
}
header.header-hidden {
opacity: 0;
visibility: hidden;
}
.plg-headerspacer {
height: 178px;
}
.logo {
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: start;
-ms-flex-align: start;
align-items: flex-start;
z-index: 100;
}
.logo .jayseba {
display: inline-block;
width: 354px;
height: auto;
}
.logo .studio {
display: inline-block;
width: 64px;
height: auto;
margin-left: 20px;
}
.menu-toggle {
z-index: 100;
width: 42px;
height: 42px;
position: relative;
cursor: pointer;
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;
/* Hover effect circle */
/*&::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: @white;
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.3s ease, height 0.3s ease;
z-index: -1;
}
&:hover {
.menu-line {
background-color: @lightgrey;
}
&::before {
width: 60px;
height: 60px;
}
}*/
}
.menu-toggle .menu-line {
height: 4px;
background-color: white;
border-radius: 10px;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
position: absolute;
left: 0;
}
.menu-toggle .menu-line:nth-child(1) {
width: 70%;
top: calc(50% - 8px);
right: auto;
left: auto;
margin-left: 30%;
/* Recht uitgelijnd */
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
}
.menu-toggle .menu-line:nth-child(2) {
width: 100%;
top: calc(50% + 4px);
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
}
.menu-toggle.active {
/* Reset hover effect when menu is active */
/*&:hover {
.menu-line {
background-color: @lightgrey;
}
&::before {
width: 0;
height: 0;
}
}*/
}
.menu-toggle.active .menu-line {
background-color: #A68F97;
}
.menu-toggle.active .menu-line:nth-child(1) {
width: 100%;
margin-left: 0;
top: 50%;
-webkit-transform: translateY(-50%) rotate(45deg);
-ms-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
}
.menu-toggle.active .menu-line:nth-child(2) {
top: 50%;
-webkit-transform: translateY(-50%) rotate(-45deg);
-ms-transform: translateY(-50%) rotate(-45deg);
transform: translateY(-50%) rotate(-45deg);
}
.plg-homesection1 {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.plg-homesection1 .plg-imagecontainer {
height: 100%;
}
.plg-homesection1 .plg-imagecontainer picture {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.plg-homesection1 .plg-imagecontainer img,
.plg-homesection1 .plg-imagecontainer video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.plg-homesection1 .plg-imagecontainer.woverlay:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
background-color: rgba(0, 0, 0, 0.17);
}
.plg-homesection1 .plg-bts-title {
z-index: 3;
position: absolute;
left: 64px;
bottom: 64px;
width: auto;
text-transform: uppercase;
font-size: 18px;
font-weight: 300;
}
.plg-homesection2 {
z-index: 10;
min-height: 100vh;
text-align: center;
position: relative;
background-color: transparent;
/*.extratxt{
width: 100%;
max-width: 1100px;
text-align: center;
margin: 200px auto 0 auto;
*{
font-family: @fonttitle;
font-size: 60px;
font-weight: @weightregular;
text-transform: uppercase;
}
a{
text-decoration: none;
&:hover{
text-decoration: none;
}
}
}*/
}
.plg-homesection2 .plg-h2-container {
padding: 280px 0;
background-color: #000000;
z-index: 2;
}
.plg-homesection2 .plg-container-small {
height: 100%;
}
.plg-homesection2 h1 {
text-align: center;
color: #A68F97;
text-transform: uppercase;
font-weight: 800;
font-size: 100px;
font-family: "NeueKaine", sans-serif;
margin: 0;
line-height: 1.08;
}
.plg-homesection2 h1 + .txt {
margin-top: 130px;
}
.plg-homesection2 .txt {
width: 100%;
max-width: 780px;
margin: 0 auto;
font-size: 35px;
}
.plg-homesection2 .txt * {
line-height: 1.43;
}
.plg-homesection2 .list {
text-align: center;
width: 100%;
max-width: 1100px;
margin: 200px auto 0 auto;
}
.plg-homesection2 .list ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.plg-homesection2 .list ul li {
margin: 0;
padding: 0;
}
.plg-homesection2 .list ul li a {
font-family: "NeueKaine", sans-serif;
font-size: 60px;
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: font-weight 0.3s ease-out;
transition: font-weight 0.3s ease-out;
}
.plg-homesection2 .list ul li a:hover {
text-decoration: none;
color: #faf9f6;
font-weight: 700;
}
.plg-homesection2 .plg-logo-jaysstudio {
margin: 130px auto 0;
}
.plg-homesection2::before {
content: '';
display: block;
height: 100vh;
}
.plg-homesection2::after {
content: '';
display: block;
height: 100vh;
}
.plg-homesection2 + .plg-fullhimagevideo {
position: fixed;
top: 0;
left: 0;
visibility: hidden;
z-index: 0;
}
.plg-fullhimagevideo {
/*position: fixed;
top: 0;
left: 0;*/
height: 100vh;
width: 100%;
z-index: 0;
visibility: visible;
}
.plg-fullhimagevideo .plg-imagecontainer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.plg-fullhimagevideo .plg-imagecontainer picture {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.plg-fullhimagevideo .plg-imagecontainer img,
.plg-fullhimagevideo .plg-imagecontainer video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.plg-fullhimagevideo .txt {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
max-width: 770px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
font-size: 35px;
z-index: 1;
}
.plg-fullhimagevideo + section,
.plg-fullhimagevideo + div,
.plg-fullhimagevideo + footer {
position: relative;
z-index: 15;
background-color: #000000;
}
.plg-works,
.plg-imagesgrid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr;
grid-template-columns: repeat(12, 1fr);
gap: 8px;
padding: 8px 8px 0;
cursor: none;
position: relative;
/*&:before {
content: '';
position: absolute;
width: 148px;
height: 148px;
background-image: url('/assets/images/projectcursor.png');
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
z-index: 10;
display: none;
transform: translate(-50%, -50%);
}
&.show-cursor::before {
display: block;
left: var(--cursor-x);
top: var(--cursor-y);
}*/
}
.plg-works .plg-workitem,
.plg-imagesgrid .plg-workitem,
.plg-works .plg-ig-item,
.plg-imagesgrid .plg-ig-item {
-ms-grid-column-span: 3;
grid-column: span 3;
overflow: hidden;
position: relative;
cursor: none;
text-decoration: none;
color: #faf9f6;
}
.plg-works .plg-workitem .plg-imagecontainer,
.plg-imagesgrid .plg-workitem .plg-imagecontainer,
.plg-works .plg-ig-item .plg-imagecontainer,
.plg-imagesgrid .plg-ig-item .plg-imagecontainer {
height: 0;
padding-bottom: 150%;
width: 100%;
pointer-events: none;
-webkit-transition: -webkit-transform 0.3s ease-out;
transition: -webkit-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
overflow: hidden;
border-radius: 5px;
}
.plg-works .plg-workitem .plg-imagecontainer:before,
.plg-imagesgrid .plg-workitem .plg-imagecontainer:before,
.plg-works .plg-ig-item .plg-imagecontainer:before,
.plg-imagesgrid .plg-ig-item .plg-imagecontainer:before,
.plg-works .plg-workitem .plg-imagecontainer:after,
.plg-imagesgrid .plg-workitem .plg-imagecontainer:after,
.plg-works .plg-ig-item .plg-imagecontainer:after,
.plg-imagesgrid .plg-ig-item .plg-imagecontainer:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, left top, right top, from(rgba(39, 39, 39, 0.6)), to(rgba(255, 255, 255, 0.6)));
background: linear-gradient(to right, rgba(39, 39, 39, 0.6), rgba(255, 255, 255, 0.6));
pointer-events: none;
z-index: 5;
mix-blend-mode: multiply;
}
.plg-works .plg-workitem .plg-imagecontainer:after,
.plg-imagesgrid .plg-workitem .plg-imagecontainer:after,
.plg-works .plg-ig-item .plg-imagecontainer:after,
.plg-imagesgrid .plg-ig-item .plg-imagecontainer:after {
background: -webkit-gradient(linear, left top, right top, from(rgba(39, 39, 39, 0.6)), to(rgba(255, 255, 255, 0.6)));
background: linear-gradient(to right, rgba(39, 39, 39, 0.6), rgba(255, 255, 255, 0.6));
opacity: 0;
}
.plg-works .plg-workitem .plg-imagecontainer picture,
.plg-imagesgrid .plg-workitem .plg-imagecontainer picture,
.plg-works .plg-ig-item .plg-imagecontainer picture,
.plg-imagesgrid .plg-ig-item .plg-imagecontainer picture {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.plg-works .plg-workitem .plg-imagecontainer img,
.plg-imagesgrid .plg-workitem .plg-imagecontainer img,
.plg-works .plg-ig-item .plg-imagecontainer img,
.plg-imagesgrid .plg-ig-item .plg-imagecontainer img,
.plg-works .plg-workitem .plg-imagecontainer video,
.plg-imagesgrid .plg-workitem .plg-imagecontainer video,
.plg-works .plg-ig-item .plg-imagecontainer video,
.plg-imagesgrid .plg-ig-item .plg-imagecontainer video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: -webkit-transform 0.3s ease-out;
transition: -webkit-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}
.plg-works .plg-workitem .plg-workitem-title,
.plg-imagesgrid .plg-workitem .plg-workitem-title,
.plg-works .plg-ig-item .plg-workitem-title,
.plg-imagesgrid .plg-ig-item .plg-workitem-title {
position: absolute;
bottom: 32px;
left: 32px;
z-index: 6;
}
.plg-works .plg-workitem .plg-workitem-title .title,
.plg-imagesgrid .plg-workitem .plg-workitem-title .title,
.plg-works .plg-ig-item .plg-workitem-title .title,
.plg-imagesgrid .plg-ig-item .plg-workitem-title .title {
margin: 0;
padding: 0;
font-family: "Helvetica Neue LT Std", sans-serif;
font-size: 14px;
font-weight: 300;
text-transform: uppercase;
line-height: 1.2;
color: #faf9f6;
max-width: 140px;
}
.plg-works .plg-workitem .plg-workitem-title .year,
.plg-imagesgrid .plg-workitem .plg-workitem-title .year,
.plg-works .plg-ig-item .plg-workitem-title .year,
.plg-imagesgrid .plg-ig-item .plg-workitem-title .year {
margin: 10px 0 0 0;
padding: 0;
font-size: 18px;
}
.plg-works .plg-workitem .plg-workitem-jobtypes,
.plg-imagesgrid .plg-workitem .plg-workitem-jobtypes,
.plg-works .plg-ig-item .plg-workitem-jobtypes,
.plg-imagesgrid .plg-ig-item .plg-workitem-jobtypes {
position: absolute;
top: 50%;
left: 50%;
z-index: 6;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 32px;
font-family: "NeueKaine", sans-serif;
font-weight: 800;
text-transform: uppercase;
line-height: 1.7;
color: #A68F97;
text-align: center;
width: 100%;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.plg-works .plg-workitem.horizontal,
.plg-imagesgrid .plg-workitem.horizontal,
.plg-works .plg-ig-item.horizontal,
.plg-imagesgrid .plg-ig-item.horizontal {
-ms-grid-column-span: 6;
grid-column: span 6;
}
.plg-works .plg-workitem.horizontal .plg-imagecontainer,
.plg-imagesgrid .plg-workitem.horizontal .plg-imagecontainer,
.plg-works .plg-ig-item.horizontal .plg-imagecontainer,
.plg-imagesgrid .plg-ig-item.horizontal .plg-imagecontainer {
height: 0;
padding-bottom: 74%;
}
.plg-works .plg-workitem.highlightme,
.plg-imagesgrid .plg-workitem.highlightme,
.plg-works .plg-ig-item.highlightme,
.plg-imagesgrid .plg-ig-item.highlightme {
-ms-grid-column-span: 12;
grid-column: span 12;
}
.plg-works .plg-workitem.highlightme .plg-imagecontainer,
.plg-imagesgrid .plg-workitem.highlightme .plg-imagecontainer,
.plg-works .plg-ig-item.highlightme .plg-imagecontainer,
.plg-imagesgrid .plg-ig-item.highlightme .plg-imagecontainer {
height: 0;
padding-bottom: 57%;
}
.plg-works .plg-workitem:not(.nohover):hover,
.plg-imagesgrid .plg-workitem:not(.nohover):hover,
.plg-works .plg-ig-item:not(.nohover):hover,
.plg-imagesgrid .plg-ig-item:not(.nohover):hover {
color: #faf9f6;
}
.plg-works .plg-workitem:not(.nohover):hover .plg-imagecontainer,
.plg-imagesgrid .plg-workitem:not(.nohover):hover .plg-imagecontainer,
.plg-works .plg-ig-item:not(.nohover):hover .plg-imagecontainer,
.plg-imagesgrid .plg-ig-item:not(.nohover):hover .plg-imagecontainer {
height: 100%;
width: 100%;
pointer-events: none;
-webkit-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
border-radius: 20px;
/*&:before{
opacity: 0;
transition: all .6s ease-out;
}*/
/*&:after{
opacity: 1;
transition: all 0.3s ease-in;
}*/
/*&:before {
background: rgba(39, 39, 39, 0.8);
transition: all 0.6s ease-in;
}*/
}
.plg-works .plg-workitem:not(.nohover):hover .plg-imagecontainer img,
.plg-imagesgrid .plg-workitem:not(.nohover):hover .plg-imagecontainer img,
.plg-works .plg-ig-item:not(.nohover):hover .plg-imagecontainer img,
.plg-imagesgrid .plg-ig-item:not(.nohover):hover .plg-imagecontainer img,
.plg-works .plg-workitem:not(.nohover):hover .plg-imagecontainer video,
.plg-imagesgrid .plg-workitem:not(.nohover):hover .plg-imagecontainer video,
.plg-works .plg-ig-item:not(.nohover):hover .plg-imagecontainer video,
.plg-imagesgrid .plg-ig-item:not(.nohover):hover .plg-imagecontainer video {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.plg-works .plg-workitem:not(.nohover):hover .plg-workitem-jobtypes,
.plg-imagesgrid .plg-workitem:not(.nohover):hover .plg-workitem-jobtypes,
.plg-works .plg-ig-item:not(.nohover):hover .plg-workitem-jobtypes,
.plg-imagesgrid .plg-ig-item:not(.nohover):hover .plg-workitem-jobtypes {
opacity: 1;
visibility: visible;
}
.plg-works .plg-workitem:not(.nohover):hover.highlightme .plg-imagecontainer,
.plg-imagesgrid .plg-workitem:not(.nohover):hover.highlightme .plg-imagecontainer,
.plg-works .plg-ig-item:not(.nohover):hover.highlightme .plg-imagecontainer,
.plg-imagesgrid .plg-ig-item:not(.nohover):hover.highlightme .plg-imagecontainer {
-webkit-transform: scale(0.98);
-ms-transform: scale(0.98);
transform: scale(0.98);
}
.plg-works .plg-workitem:not(.nohover):hover.highlightme .plg-imagecontainer img,
.plg-imagesgrid .plg-workitem:not(.nohover):hover.highlightme .plg-imagecontainer img,
.plg-works .plg-ig-item:not(.nohover):hover.highlightme .plg-imagecontainer img,
.plg-imagesgrid .plg-ig-item:not(.nohover):hover.highlightme .plg-imagecontainer img,
.plg-works .plg-workitem:not(.nohover):hover.highlightme .plg-imagecontainer video,
.plg-imagesgrid .plg-workitem:not(.nohover):hover.highlightme .plg-imagecontainer video,
.plg-works .plg-ig-item:not(.nohover):hover.highlightme .plg-imagecontainer video,
.plg-imagesgrid .plg-ig-item:not(.nohover):hover.highlightme .plg-imagecontainer video {
-webkit-transform: scale(1.07);
-ms-transform: scale(1.07);
transform: scale(1.07);
}
.plg-works.onlyverticals .plg-workitem,
.plg-imagesgrid.onlyverticals .plg-workitem {
-ms-grid-column-span: 3;
grid-column: span 3;
}
.plg-works.onlyverticals .plg-workitem .plg-imagecontainer,
.plg-imagesgrid.onlyverticals .plg-workitem .plg-imagecontainer {
height: 0;
padding-bottom: 150%;
}
.plg-imagesgrid {
padding-top: 0;
padding-bottom: 0;
}
.plg-homesection4 {
position: relative;
padding: 280px 0;
/*.plg-imagecontainer{
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 80%;
height: 100%;
background: linear-gradient(to right, rgba(39, 39, 39, 0.6), rgba(255, 255, 255, 0.6));
pointer-events: none;
z-index: 5;
mix-blend-mode: multiply;
}
}*/
}
.plg-homesection4 h2 {
margin: 0;
margin-bottom: 210px;
font-family: "NeueKaine", sans-serif;
font-size: 72px;
font-weight: 800;
text-transform: uppercase;
text-align: center;
}
.plg-homesection4 .plg-h4-ctacontainer {
display: inline-block;
width: 100%;
margin-top: 200px;
padding: 130px 100px;
border: 1px solid #faf9f6;
border-radius: 10px;
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-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.plg-homesection4 .plg-h4-ctacontainer .plg-h4-cta {
display: inline-block;
font-family: "NeueKaine", sans-serif;
font-size: 105px;
font-weight: 800;
text-transform: uppercase;
text-align: center;
max-width: 900px;
width: 100%;
color: #A68F97;
text-decoration: none;
}
.plg-homesection4 .plg-h4-ctacontainer .plg-h4-cta:hover {
text-decoration: none;
}
.plg-highlightedbrands .txt {
text-align: center;
font-size: 35px;
padding: 0 140px;
}
.plg-highlightedbrands .plg-hb-logos {
margin-top: 100px;
overflow: hidden;
position: relative;
width: 100%;
}
.plg-highlightedbrands .plg-hb-logos::before,
.plg-highlightedbrands .plg-hb-logos::after {
content: '';
position: absolute;
top: 0;
width: 150px;
height: 100%;
z-index: 2;
pointer-events: none;
}
.plg-highlightedbrands .plg-hb-logos::before {
left: 0;
background: -webkit-gradient(linear, left top, right top, from(#000000), to(rgba(0, 0, 0, 0)));
background: linear-gradient(to right, #000000 0%, rgba(0, 0, 0, 0) 100%);
}
.plg-highlightedbrands .plg-hb-logos::after {
right: 0;
background: -webkit-gradient(linear, right top, left top, from(#000000), to(rgba(0, 0, 0, 0)));
background: linear-gradient(to left, #000000 0%, rgba(0, 0, 0, 0) 100%);
}
.plg-highlightedbrands .plg-hb-logos .logos-scroll {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
white-space: nowrap;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
-webkit-animation: marquee 20s linear infinite;
animation: marquee 20s linear infinite;
padding-left: 40px;
padding-right: 40px;
}
.plg-highlightedbrands .plg-hb-logos .plg-hb-logo {
padding: 0 40px;
margin: 0 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100px;
/* vaste hoogte voor alle logo containers */
}
.plg-highlightedbrands .plg-hb-logos .plg-hb-logo img {
width: auto;
height: auto;
max-width: 80px;
max-height: 80px;
}
@-webkit-keyframes marquee {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
}
@keyframes marquee {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
}
.plg-homesection6 {
padding-top: 280px;
padding-bottom: 50px;
}
.plg-homesection6 .plg-h6-grid {
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-align: center;
-ms-flex-align: center;
align-items: center;
}
.plg-homesection6 .txt {
font-family: "NeueKaine", sans-serif;
font-size: 72px;
font-weight: 800;
text-transform: uppercase;
text-align: center;
color: #A68F97;
}
.plg-homesection6 .button {
margin: 100px 0 0 0;
}
.footersubscribeblock {
width: 100%;
padding: 100px 20px;
border: 1px solid #fff;
border-radius: 20px;
text-align: center;
}
.footersubscribeblock .plg-fsb-grid {
max-width: 800px;
margin: 0 auto;
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-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.footersubscribeblock .title {
color: #A68F97;
font-family: "NeueKaine", sans-serif;
font-weight: 400;
font-size: 60px;
text-transform: uppercase;
margin: 0 0 40px 0;
}
.footersubscribeblock .txt {
font-size: 30px;
font-weight: 300;
margin: 0 0 40px 0;
}
.footersubscribeblock form {
/*input[type="submit"]{
margin-left: 20px;
}*/
}
.footersubscribeblock form input[type="email"] {
min-width: 300px;
}
.footersubscribeblock form .input-button-wrapper {
margin-left: 20px;
}
.plg-aboutsection1 {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.plg-aboutsection1 .plg-imagecontainer {
height: 100%;
width: 100%;
}
.plg-aboutsection1 .plg-imagecontainer picture {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.plg-aboutsection1 .plg-imagecontainer img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.plg-aboutsection1 .plg-a1-overlaytext {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50%;
z-index: 2;
}
.plg-aboutsection1 .plg-a1-overlaytext .plg-container {
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-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.plg-aboutsection1 .plg-a1-overlaytext .jaysebalogo {
width: 100%;
max-width: 1100px;
}
.plg-aboutsection1 .plg-a1-overlaytext .plg-a1-overlaytext-bottom {
margin-top: 50px;
}
.plg-aboutsection1 .plg-a1-overlaytext .plg-a1-overlaytext-bottom .signature img {
width: 200px;
height: auto;
}
.plg-aboutsection1 .plg-a1-overlaytext .plg-a1-overlaytext-bottom .txt {
position: absolute;
right: -50px;
top: 50%;
-webkit-transform: translate(100%, -50%);
-ms-transform: translate(100%, -50%);
transform: translate(100%, -50%);
text-transform: uppercase;
color: #A68F97;
font-weight: 300;
font-size: 12px;
}
.plg-aboutsection2 {
background-color: transparent;
}
.plg-aboutsection2 .plg-container {
padding-top: 200px;
background-color: #000000;
}
.plg-aboutsection2 .plg-a2-intro {
margin: 0 0 200px 0;
width: 100%;
}
.plg-aboutsection2 .plg-a2-intro .largetext {
font-size: 35px;
line-height: 1.42;
letter-spacing: -0.012em;
color: #A68F97;
width: 100%;
max-width: 75%;
}
.plg-aboutsection2 .plg-a2-intro .txt {
width: 100%;
max-width: 50%;
}
.plg-aboutsection2 .plg-a2-intro .largetext + .txt {
margin-top: 100px;
}
.plg-aboutsection2 .plg-a2-grid {
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-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.plg-aboutsection2 .plg-a2-grid .plg-a2-item.text {
width: 50%;
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;
}
.plg-aboutsection2 .plg-a2-grid .plg-a2-item.text .image {
margin: auto 0;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.plg-aboutsection2 .plg-a2-grid .plg-a2-item.text .image img {
width: 130px;
height: auto;
margin: 0 auto;
}
.plg-aboutsection2 .plg-a2-grid .plg-a2-item.text .txt {
margin: auto 0 0 0;
font-size: 12px;
font-weight: 300;
text-transform: uppercase;
color: #A68F97;
}
.plg-aboutsection2 .plg-a2-grid .plg-a2-item.image {
width: 50%;
border-radius: 20px;
overflow: hidden;
}
.plg-aboutsection2 .plg-a2-secondgrid {
margin-top: 200px;
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-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.plg-aboutsection2 .plg-a2-secondgrid .plg-a2-item.text {
width: 50%;
}
.plg-aboutsection2 .plg-a2-secondgrid .plg-a2-item.largetext {
width: 50%;
padding-right: 70px;
font-size: 35px;
line-height: 1.125;
letter-spacing: -0.012em;
color: #A68F97;
font-weight: 800;
font-family: "NeueKaine", sans-serif;
}
.plg-aboutsection2::before {
content: '';
display: block;
height: 100vh;
}
.plg-aboutsection3 {
padding-top: 200px;
}
.plg-aboutsection3 .plg-a3-grid {
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-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.plg-aboutsection3 .plg-a3-grid .plg-a3-item.text {
width: 50%;
}
.plg-aboutsection3 .plg-a3-grid .plg-a3-item.text .largetext {
font-size: 40px;
line-height: 1.125;
letter-spacing: -0.005em;
max-width: 500px;
}
.plg-aboutsection3 .plg-a3-grid .plg-a3-item.text .txt {
font-size: 12px;
font-weight: 300;
text-transform: uppercase;
max-width: 500px;
}
.plg-aboutsection3 .plg-a3-grid .plg-a3-item.text .largetext + .txt {
margin-top: 20px;
}
.plg-aboutsection3 .plg-a3-grid .plg-a3-item.image {
width: 25%;
border-radius: 20px;
overflow: hidden;
}
.plg-aboutsection3 .plg-a3-grid .plg-a3-item.image .plg-imagecontainer {
height: 0;
width: 100%;
padding-bottom: 150%;
overflow: hidden;
}
.plg-aboutsection3 .plg-a3-grid .plg-a3-item.image .plg-imagecontainer picture {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.plg-aboutsection3 .plg-a3-grid .plg-a3-item.image .plg-imagecontainer img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
.plg-aboutsection3 .plg-a3-centertext {
margin: 200px auto 0;
text-align: center;
width: 100%;
max-width: 600px;
}
.plg-aboutsection4 {
z-index: 10;
min-height: 100vh;
}
.plg-aboutsection4 .plg-container {
padding-top: 200px;
padding-bottom: 200px;
background-color: #000000;
z-index: 2;
}
.plg-aboutsection4 .plg-a4-grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: calc(100% + 8px);
margin-left: -4px;
margin-right: -4px;
}
.plg-aboutsection4 .plg-a4-grid .plg-a4-item {
width: calc(50% - 8px);
margin: 8px 4px 0;
padding: 100px;
border: 1px solid #faf9f6;
border-radius: 20px;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-decoration: none;
}
.plg-aboutsection4 .plg-a4-grid .plg-a4-item p {
margin: 0;
}
.plg-aboutsection4 .plg-a4-grid .plg-a4-item .title {
text-transform: uppercase;
font-family: "NeueKaine", sans-serif;
font-size: 60px;
letter-spacing: -0.005em;
font-weight: 400;
color: #A68F97;
margin: 0 0 50px 0;
}
.plg-aboutsection4 .plg-a4-grid .plg-a4-item .desc {
font-size: 30px;
margin: 0 0 50px 0;
}
.plg-aboutsection4 .plg-a4-grid .plg-a4-item .button {
margin: auto auto 0;
}
.plg-aboutsection4 .plg-a4-grid .plg-a4-item.fullwidth {
width: 100%;
}
.plg-aboutsection4 .plg-a4-grid .plg-a4-item.fullwidth .title {
margin: 0;
}
.plg-aboutsection4 .plg-a4-grid .plg-a4-item:hover {
text-decoration: none;
}
.plg-aboutsection4::after {
content: '';
display: block;
height: 100vh;
}
.plg-aboutsection4 + .plg-fullhimagevideo {
position: fixed;
top: 0;
left: 0;
visibility: hidden;
z-index: 0;
}
.template-work .plg-works .plg-workitem .plg-imagecontainer:before {
display: none;
}
.plg-workisection1 {
height: 100%;
width: 100%;
}
.plg-workisection1 .plg-imagecontainer {
height: 100%;
width: 100%;
}
.plg-workisection1 .plg-imagecontainer picture {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.plg-workisection1 .plg-imagecontainer img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.plg-workisection2 {
padding: 200px 0 0;
}
.plg-workisection2 .plg-wi2-grid {
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-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.plg-workisection2 .plg-wi2-grid .plg-wi2-item {
width: 25%;
color: #faf9f6;
}
.plg-workisection2 .plg-wi2-grid .plg-wi2-item h1 {
font-size: 40px;
font-family: "NeueKaine", sans-serif;
font-weight: 800;
margin: 0;
color: #A68F97;
}
.plg-workisection2 .plg-wi2-grid .plg-wi2-item .year {
font-size: 12px;
margin: 0 0 40px 0;
}
.plg-workisection2 .plg-wi2-grid .plg-wi2-item.titleblock {
width: 100%;
}
.plg-workisection2 .plg-wi2-grid .plg-wi2-item.yearblock {
width: 100%;
margin: 0;
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-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.plg-workisection2 .plg-wi2-grid .plg-wi2-item.yearblock .yearitem {
width: 25%;
margin: 0;
}
.plg-workisection2 .plg-wi2-grid .plg-wi2-item.descblock {
width: 50%;
}
.plg-workisection2 .plg-wi2-grid .plg-wi2-item.creditsblock {
width: 25%;
font-size: 12px;
}
.block {
margin-top: 200px;
}
.block.block-fullwimage .video-container {
position: relative;
width: 100%;
height: 100%;
}
.block.block-fullwimage .video-container video {
display: block;
width: 100%;
max-width: 100%;
}
.block.block-fullwimage .video-container .sound-button {
position: absolute;
right: 20px;
bottom: 20px;
z-index: 10;
cursor: pointer;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
width: 40px;
height: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
/*&.sound-on .sound-icon {
opacity: 1;
}
&.sound-off .sound-icon {
opacity: 0.5;
}*/
}
.block.block-fullwimage .video-container .sound-button:hover {
background: rgba(0, 0, 0, 0.8);
}
.block.block-fullwimage .video-container .sound-button .sound-icon {
width: 24px;
height: 24px;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.block.block-fullwimage .video-container .sound-button .sound-icon.on {
display: none;
}
.block.block-fullwimage .video-container .sound-button.sound-off .sound-icon.on {
display: none;
}
.block.block-fullwimage .video-container .sound-button.sound-off .sound-icon.off {
display: block;
}
.block.block-fullwimage .video-container .sound-button.sound-on .sound-icon.on {
display: block;
}
.block.block-fullwimage .video-container .sound-button.sound-on .sound-icon.off {
display: none;
}
.block.block-fullwimage .video-container .plg-customthumb {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 8;
}
.block.block-fullwimage .video-container.playing .play-button {
display: none;
}
.block.block-fullwimage .video-container.playing .plg-customthumb {
display: none;
}
.block.block-fullwimage .video-container:hover .plg-imagecontainer .arrow.right img {
-webkit-transform: translate(0%, -50%);
-ms-transform: translate(0%, -50%);
transform: translate(0%, -50%);
}
.block.block-fullwimage .video-container .play-button {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 10;
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: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-transform: uppercase;
font-size: 34px;
font-weight: 300;
color: #fff;
text-wrap: nowrap;
white-space: nowrap;
cursor: pointer;
}
.block.block-fullwimage .video-container .play-button img {
width: 60px;
height: auto;
}
.block.block-imagesgrid .plg-b-grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr;
grid-template-columns: repeat(12, 1fr);
gap: 8px;
}
.block.block-imagesgrid .plg-b-grid .plg-b-item {
-ms-grid-column-span: 3;
grid-column: span 3;
}
.block.block-textrow {
display: -ms-grid;
display: grid;
}
.block.block-textrow .plg-b-grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr;
grid-template-columns: repeat(12, 1fr);
-ms-grid-rows: auto;
grid-template-rows: auto;
gap: 8px;
}
.block.block-textrow .plg-b-grid > *:nth-child(1) {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.block.block-textrow .plg-b-grid > *:nth-child(2) {
-ms-grid-row: 1;
-ms-grid-column: 3;
}
.block.block-textrow .plg-b-grid > *:nth-child(3) {
-ms-grid-row: 1;
-ms-grid-column: 5;
}
.block.block-textrow .plg-b-grid > *:nth-child(4) {
-ms-grid-row: 1;
-ms-grid-column: 7;
}
.block.block-textrow .plg-b-grid > *:nth-child(5) {
-ms-grid-row: 1;
-ms-grid-column: 9;
}
.block.block-textrow .plg-b-grid > *:nth-child(6) {
-ms-grid-row: 1;
-ms-grid-column: 11;
}
.block.block-textrow .plg-b-grid > *:nth-child(7) {
-ms-grid-row: 1;
-ms-grid-column: 13;
}
.block.block-textrow .plg-b-grid > *:nth-child(8) {
-ms-grid-row: 1;
-ms-grid-column: 15;
}
.block.block-textrow .plg-b-grid > *:nth-child(9) {
-ms-grid-row: 1;
-ms-grid-column: 17;
}
.block.block-textrow .plg-b-grid > *:nth-child(10) {
-ms-grid-row: 1;
-ms-grid-column: 19;
}
.block.block-textrow .plg-b-grid > *:nth-child(11) {
-ms-grid-row: 1;
-ms-grid-column: 21;
}
.block.block-textrow .plg-b-grid > *:nth-child(12) {
-ms-grid-row: 1;
-ms-grid-column: 23;
}
.block.block-textrow .rowitem {
-ms-grid-column: 1;
grid-column: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.block.block-textrow .rowitem.coloredtext {
color: #A68F97;
}
.block.block-textrow .rowitem .largetext {
text-transform: uppercase;
font-size: 40px;
font-family: "NeueKaine", sans-serif;
font-weight: 800;
letter-spacing: -0.005em;
line-height: 1.125;
}
.block.block-textrow .rowitem .largetext.colored {
color: #A68F97;
}
.block.block-textrow .rowitem .text.colored {
color: #A68F97;
}
.block.block-textrow .rowitem .smalltext {
font-size: 12px;
font-weight: 300;
text-transform: uppercase;
margin: auto 0 0 0;
}
.block.block-textrow .rowitem .smalltext.colored {
color: #A68F97;
}
.block.block-textrow .rowitem .textitem + .textitem {
margin-top: 25px;
}
.block.block-textrow .rowitem.widthone {
-ms-grid-column: 1;
grid-column: 1;
}
.block.block-textrow .rowitem.widthtwo {
-ms-grid-column-span: 2;
grid-column: span 2;
}
.block.block-textrow .rowitem.widththree {
-ms-grid-column-span: 3;
grid-column: span 3;
}
.block.block-textrow .rowitem.widthfour {
-ms-grid-column-span: 4;
grid-column: span 4;
}
.block.block-textrow .rowitem.widthfive {
-ms-grid-column-span: 5;
grid-column: span 5;
}
.block.block-textrow .rowitem.widthsix {
-ms-grid-column-span: 6;
grid-column: span 6;
}
.block.block-textrow .rowitem.widthseven {
-ms-grid-column-span: 7;
grid-column: span 7;
}
.block.block-textrow .rowitem.widtheight {
-ms-grid-column-span: 8;
grid-column: span 8;
}
.block.block-textrow .rowitem.widthnine {
-ms-grid-column-span: 9;
grid-column: span 9;
}
.block.block-textrow .rowitem.widthten {
-ms-grid-column-span: 10;
grid-column: span 10;
}
.block.block-textrow .rowitem.widtheleven {
-ms-grid-column-span: 11;
grid-column: span 11;
}
.block.block-textrow .rowitem.widthtwelve {
-ms-grid-column-span: 12;
grid-column: span 12;
}
.block.block-centertext .plg-b-grid {
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: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.block.block-centertext .plg-b-grid .txt {
width: 100%;
max-width: 650px;
margin: 0 auto;
text-align: center;
}
.plg-workinav {
padding-top: 200px;
}
.plg-workinav .plg-win-grid {
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-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.plg-workinav .plg-win-grid .button {
margin: 10px 4px;
}
.plg-otherworksection {
padding-top: 280px;
}
.plg-otherworksection .titlestyle {
font-size: 80px;
font-weight: 800;
color: #fff;
text-transform: uppercase;
font-family: "NeueKaine", sans-serif;
text-align: center;
margin: 0 0 200px 0;
}
.plg-servicessection1 {
height: 100%;
width: 100%;
}
.plg-servicessection1 .plg-imagecontainer {
height: 100%;
width: 100%;
}
.plg-servicessection1 .plg-imagecontainer picture {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.plg-servicessection1 .plg-imagecontainer img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.plg-servicessection1 .plg-ss1-overlaytext {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50%;
z-index: 2;
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: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: 130px;
}
.plg-servicessection1 .plg-ss1-overlaytext .txt {
text-align: center;
font-size: 80px;
font-family: "NeueKaine", sans-serif;
font-weight: 800;
color: #A68F97;
text-transform: uppercase;
}
.plg-servicessection2 {
padding: 200px 0;
}
.plg-servicessection2 .plg-ss2-grid {
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-align: center;
-ms-flex-align: center;
align-items: center;
}
.plg-servicessection2 .txt {
width: 100%;
max-width: 850px;
margin: 0 auto;
font-size: 35px;
font-weight: 400;
color: #A68F97;
text-align: center;
line-height: 1.428;
}
.plg-servicessection2 .plg-logo-jaysstudio {
margin: 200px auto 0;
}
.plg-accordions {
width: 100%;
}
.plg-accordions .plg-accordionitem {
width: 100%;
}
.plg-accordions .plg-accordionitem h2 {
margin: 0;
font-size: 80px;
font-family: "NeueKaine", sans-serif;
font-weight: 800;
color: #A68F97;
text-align: center;
text-transform: uppercase;
}
.plg-accordions .plg-accordionitem .desc {
font-size: 35px;
font-weight: 400;
text-align: center;
max-width: 850px;
margin: 0 auto;
margin-top: 100px;
}
.plg-accordions .plg-accordioninnergrid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
max-width: 1200px;
width: 100%;
margin: 0 auto;
margin-top: 200px;
}
.plg-accordions .plg-accordioninnergrid.centercontent {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.plg-accordions .plg-accordioninnergrid .plg-accordioninneritem {
width: 50%;
padding-right: 140px;
}
.plg-accordions .subtitle {
text-transform: uppercase;
font-size: 18px;
font-weight: 400;
margin: 0 0 20px 0;
}
.plg-accordions .txt {
line-height: 1.38;
}
.plg-accordions ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.plg-accordions ul li {
margin: 0;
padding: 0;
}
.plg-accordions .serviceprojectlist .serviceproject {
text-transform: uppercase;
font-family: "NeueKaine", sans-serif;
font-weight: 400;
font-size: 25px;
line-height: 1.333;
}
.plg-accordions .serviceprojectlist .serviceproject a,
.plg-accordions .serviceprojectlist .serviceproject p {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.plg-accordions .serviceprojectlist .serviceproject .number {
min-width: 70px;
}
.plg-accordions .smallsubtitle {
font-size: 12px;
font-weight: 300;
text-transform: uppercase;
margin: 60px 0 0 0;
line-height: 1.25;
}
.plg-accordions .plg-servicehprojects {
width: 100%;
max-width: 1400px;
margin: 200px auto 0;
}
.plg-accordions .plg-servicebuttons {
margin-top: 200px;
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-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.plg-accordionitem {
padding: 100px;
border-bottom: 1px solid #faf9f6;
}
.plg-accordionitem .plg-accordion-title {
cursor: pointer;
}
.plg-accordionitem .plg-accordion-title .plus {
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.plg-accordionitem .plg-accordion-title .plus span {
display: block;
height: 4px;
width: 20px;
border-radius: 20px;
background-color: #272727;
z-index: 2;
}
.plg-accordionitem .plg-accordion-title .plus span:nth-child(2) {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 20px;
width: 4px;
}
.plg-accordionitem .plg-accordion-title .plus:after {
content: '';
width: 50px;
height: 50px;
background-color: #A68F97;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 100%;
z-index: 0;
}
.plg-accordionitem .plg-accordion-content {
display: none;
}
.plg-accordionitem.toggled .plg-accordion-content {
display: block;
}
.plg-accordionitem.toggled .plg-accordion-title .plus span:nth-child(2) {
opacity: 0;
}
.plg-servicessection3 + .plg-highlightedbrands {
margin-top: 250px;
}
.plg-abouthighlight {
width: 100%;
background-color: #000000;
overflow: hidden;
}
.plg-abouthighlight .plg-ah-background {
width: 100%;
z-index: 0;
}
.plg-abouthighlight .plg-ah-tvlight {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.plg-abouthighlight .plg-ah-tv {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 3;
}
.plg-abouthighlight .plg-ah-tv .plg-ah-tvframe {
width: 100%;
}
.plg-abouthighlight .plg-ah-tv .plg-ah-tvcontent {
position: absolute;
left: 50%;
top: 48%;
width: 31%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: -1;
border-radius: 20px;
overflow: hidden;
}
.plg-abouthighlight .plg-ah-tv .plg-ah-tvcontent .plg-imagecontainer {
width: 100%;
height: 0;
padding-bottom: 75%;
position: relative;
}
.plg-abouthighlight .plg-ah-tv .plg-ah-tvcontent .plg-imagecontainer picture {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.plg-abouthighlight .plg-ah-tv .plg-ah-tvcontent .plg-imagecontainer img,
.plg-abouthighlight .plg-ah-tv .plg-ah-tvcontent .plg-imagecontainer video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.plg-abouthighlighttext {
padding-top: 100px;
}
.plg-abouthighlighttext .plg-container-small {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.plg-abouthighlighttext .txt {
text-align: center;
width: 100%;
max-width: 850px;
margin: 0 auto;
font-size: 35px;
font-weight: 400;
line-height: 1.428;
color: #fff;
}
.plg-abouthighlighttext .jayicon {
width: 130px;
height: auto;
margin: 130px auto 0;
}
.plg-abouthighlighttext .button {
margin: 200px auto 0;
}
.plg-errorsection1 {
height: 100%;
width: 100%;
}
.plg-errorsection1 .plg-imagecontainer {
height: 100%;
width: 100%;
}
.plg-errorsection1 .plg-imagecontainer .numbersoverlay {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0.15;
text-align: center;
text-transform: uppercase;
color: #A68F97;
font-size: 375px;
font-family: "NeueKaine", sans-serif;
font-weight: 800;
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: center;
-ms-flex-align: center;
align-items: center;
}
.plg-errorsection1 .plg-imagecontainer .numbersoverlay span {
margin-right: 12vw;
}
.plg-errorsection1 .plg-imagecontainer .numbersoverlay span:last-child {
margin: 0;
}
.plg-errorsection1 .plg-e1-overlaycontent {
position: absolute;
left: 0;
top: 0;
width: 100%;
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;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.plg-errorsection1 .plg-e1-text {
text-align: center;
text-transform: uppercase;
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;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.plg-errorsection1 .plg-e1-text h1 {
font-family: "Helvetica Neue LT Std", sans-serif;
font-size: 44px;
font-weight: 400;
letter-spacing: -0.012em;
text-transform: uppercase;
color: #A68F97;
margin: 0 0 20px 0;
}
.plg-errorsection1 .plg-e1-text .button {
position: absolute;
bottom: -200px;
display: inline-block;
}
.template-error .plg-homesection6 {
display: none !important;
}
.template-error footer {
display: none !important;
}
footer {
margin-top: 0;
padding-top: 50px;
padding-bottom: 225px;
z-index: 5;
background-color: #000000;
}
footer > .plg-container {
padding-top: 280px;
background-color: #000000;
}
footer .logostudio {
display: inline-block;
width: 100%;
height: auto;
/*margin-top: 50px;
margin-bottom: 80px;*/
margin-top: 225px;
margin-bottom: 200px;
}
footer .plg-f-grid {
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-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
footer .plg-f-grid .plg-f-item a {
text-transform: uppercase;
}
footer .plg-f-grid .plg-f-item .tagline {
font-size: 40px;
font-weight: 400;
text-transform: uppercase;
font-family: "NeueKaine", sans-serif;
}
footer .plg-f-grid .plg-f-item .contactlink {
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: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
line-height: 1.125;
margin: 0;
}
footer .plg-f-grid .plg-f-item .contactlink span {
text-transform: uppercase;
font-size: 14px;
font-weight: 300;
}
footer .plg-f-grid .plg-f-item .contactlink a {
font-size: 40px;
font-weight: 400;
margin-left: 40px;
}
footer .plg-f-grid .plg-f-item ul {
list-style-type: none;
margin: 0;
padding: 0;
}
footer .plg-f-grid .plg-f-item ul li {
margin: 0;
padding: 0;
}
footer .plg-f-grid .plg-f-item:nth-child(2) {
text-align: right;
}
footer .plg-f-grid.bottomgrid,
footer .plg-f-grid.credits {
margin-top: 50px;
}
footer .plg-f-grid.bottomgrid *,
footer .plg-f-grid.credits * {
font-size: 14px;
font-weight: 200;
}
footer .plg-f-grid.bottomgrid strong,
footer .plg-f-grid.credits strong {
font-weight: 500;
}
footer .plg-f-grid.credits {
margin-top: 30px;
}
/* MEDIA QUERY'S =============================================================== */