@charset "UTF-8";

   :root { 
--grid-size-xl: 160rem;
--grid-size-lg: 144rem;
--grid-size-md: 120rem;
--grid-size-sm: 78rem;
--grid-size-xs: ;
--grid-padding: 4rem;
--color-darkgrey: #191919;
--color-bodytext-grey: #EEEEEE;    
--color-yellow: #FFF100;
}
* {
box-sizing: border-box;
}
*:focus {
outline: none;
}
html, body {
margin: 0;
overflow-x: hidden;
}
html {
font-size: 62.5%;
} 
body {
background-color: var(--color-darkgrey);
font-family: 'Inter Tight', sans-serif; 
font-size: 2rem;
font-weight: 300;
line-height: 1.5;
color: var(--color-bodytext-grey);
} h1,
h2,
h3,
h4 {
margin: 0 0 2rem;
font-family: 'Agrandir';
font-weight: 400;
color: white;
}
h1 {
font-size: clamp( 8rem, 6.25vw, 10rem );
line-height: 1;
}
h1.small,
h2 {
font-size: clamp( 5.6rem, 4.375vw, 7rem );
line-height: 1.1;
}
h3 {
font-size: clamp( 3rem, 2.5vw, 4rem );
line-height: 1.1;
}
h4 {
margin: 0 0 1rem;
font-family: 'Inter Tight', sans-serif; 
font-size: 2rem;
font-weight: 300;
line-height: 1.3;
}
.big {
max-width: 80%;
font-size: clamp( 8rem, 6.25vw, 10rem );
line-height: 1;
} p {
margin: 0 0 3rem;
}
p:empty {
display: none;
}
p:last-child {
margin: 0;
}
a {
color: var(--color-bodytext-grey);
text-decoration: underline;
transition: .3s;
} ul,
ol {
margin: 0 0 3rem;
padding-left: 2rem;
} section {
padding: 0 var(--grid-padding);
}
figure {
margin: 0;
padding: 0;
}
.row-fw,
.row-xl,
.row-lg,
.row-md,
.row-sm,
.row-xs {
width: 100%;
margin: 0 auto;
}
.row-xl {
max-width: var(--grid-size-xl);
}
.row-lg {
max-width: var(--grid-size-lg);
}
.row-md {
max-width: var(--grid-size-md);
}
.row-sm {
max-width: var(--grid-size-sm);
}
.row-xs {
max-width: var(--grid-size-xs);
}
.pt-xl {
padding-top: 23rem;
}
.pt-lg {
padding-top: 15rem;
}
.pt-md {
padding-top: 12rem;
}
.pt-sm {
padding-top: 7rem;
}
.pt-none {
padding-top: 0;
}
.pb-lg {
padding-bottom: 15rem;
}
.pb-md {
padding-bottom: 12rem;
}
.pb-sm {
padding-bottom: 7rem;
}
.pb-none {
padding-bottom: 0;
} .btn {
position: relative;
display: inline-block;
margin-top: 3rem;
padding: 1.2rem 3rem;
border: .1rem solid var(--color-yellow);
border-radius: 5rem;
background-color: transparent;
font-size: 1.6rem;
text-transform: uppercase;
text-decoration: none;
color: white;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -101%;
width: 100%;
height: 100%;
background-color: var(--color-yellow);
transform: skewX(-15deg);
transition: left .4s, background-color .4s;
}
.btn:hover::before {
left: -1%;
width: 102%;
}
.btn span {
position: relative;
z-index: 1;
padding-left: 2.2rem;
}
.btn span::before {
content: '';
position: absolute;
top: .2rem;
left: 0;
width: 1.5rem;
height: 1.4rem;
background-image: url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/images/icon-arrow-white.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.btn:hover span {
color: var(--color-darkgrey);
transition: .3s;
}
.btn:hover span::before {
background-image: url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/images/icon-arrow-black.svg);
} .socials {
margin-top: 2rem;
display: flex;
gap: 1rem;
}
.socials a {
width: 5rem;
height: 5rem;
border: .1rem solid #777;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #777 !important;
text-decoration: none !important;
transition: .3s;
}
.socials a:hover {
border-color: var(--color-yellow);
background-color: var(--color-yellow);;
color: var(--color-darkgrey) !important;
} header .logo-wrapper {
position: fixed;
z-index: 10;
top: 3rem;
left: var(--grid-padding);
width: 14rem;
height: 14rem;
}
header .logo-wrapper a {
display: flex;
}
header .logo-wrapper img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
header .hamburger {
position: fixed;
z-index: 10;
top: 3rem;
right: var(--grid-padding);
width: 5rem;
height: 5rem;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .3s;
}
header .hamburger img {
width: 2.8rem;
height: 1.8rem;
}
header.scrolled .hamburger {
background-color: var(--color-darkgrey);
}   footer .top {
padding: 0 var(--grid-padding);
}
footer .top .container {
padding: 14rem 0;
display: grid;
grid-template-columns: 1fr 1fr;
} footer .top ul.menu {
list-style-type: none;
margin: 0;
padding: 0;
}
footer .top ul.menu li:not(:first-child) {
margin-top: 1rem;
}
footer .top ul.menu a {
font-size: clamp( 5rem, 3.75vw, 6rem );
line-height: 1;
font-family: 'Agrandir';
font-weight: 400;
color: #575757;
text-decoration: none;
}
footer .top ul.menu a:hover,
footer .top ul.menu li.current-menu-item a {
color: white;
} footer .top .cols {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 5rem;
line-height: 2;
color: white;
}
footer .top h4 {
color: #777;
}
footer .top .contact-wrapper a {
color: white;
text-decoration: none;
}
footer .top .contact-wrapper a:hover {
text-decoration: underline;
} footer .bottom {
padding: 0 var(--grid-padding);
}
footer .bottom .container {
padding: 5rem 0;
display: grid;
grid-template-columns: 1fr 1fr;
font-size: 1.6rem;
color: #777;
}
.page-id-31 footer .bottom .container {
padding-top: 30rem;
}
footer .bottom .container > div:last-child {
text-align: right;
}
footer .bottom a {
color: #777;
text-decoration: none;
}
footer .bottom a:hover {
text-decoration: underline;
} @media (max-width: 1440px) { :root { 
--grid-size-xl: 128rem;
--grid-size-lg: 110rem;
--grid-size-md: 110rem;
}
body {
font-size: 1.8rem;
line-height: 1.6;
} h1 {
font-size: clamp( 6rem, 5.556vw, 8rem );
}
h1.small,
h2 {
font-size: clamp( 4.5rem, 3.889vw, 5.6rem );
}
h3 {
font-size: 3rem;
}
.big {
font-size: clamp( 4.5rem, 5.556vw, 8rem );
line-height: 1.1;
} .btn {
padding: .95rem 3rem;
font-size: 1.5rem;
} header .logo-wrapper {
width: 12rem;
height: 12rem;
}   footer .top ul.menu a {
font-size: clamp( 2rem, 3.472vw, 5rem );
}
}
@media (max-width: 1180px) {  footer .top .container {
padding: 10rem 0;
}
}
@media (max-width: 1024px) {  .pt-xl {
padding-top: 19rem;
}
.pt-lg {
padding-top: 10rem;
}
.pt-md {
padding-top: 7rem;
}
.pt-sm {
padding-top: 4rem;
}
.pb-lg {
padding-bottom: 10rem;
}
.pb-md {
padding-bottom: 7rem;
}
.pb-sm {
padding-bottom: 4rem;
}  footer .top .cols {
grid-template-columns: 1fr;
grid-gap: 3rem;
} footer .bottom .container {
grid-template-columns: 1fr;
grid-gap: .5rem;
}
.page-id-31 footer .bottom .container {
padding-top: 20rem;
}
footer .bottom .container > div:last-child {
text-align: left;
}
}
@media (max-width: 767px) { :root {
--grid-padding: 1.5rem;
}
body {
font-size: 1.6rem;        
} h1 {
font-size: 6rem;
}
h1.small,
h2 {
font-size: 4.5rem;
}
.big {
max-width: inherit;
font-size: 4.5rem;
} .btn {
padding: .9rem 3rem;
background-color: var(--color-yellow);
font-size: 1.4rem;
color: var(--color-darkgrey);
}
.btn span {
padding-left: 1.8rem;
}
.btn span::before {
top: .25rem;
width: 1.2rem;
height: 1.1rem;
} .socials a {
border-color: white;
color: white !important;
}
.btn span::before {
background-image: url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/images/icon-arrow-black.svg);
} header .logo-wrapper {
top: 1.5rem;
width: 10rem;
height: 10rem;
}
header .hamburger {
top: 1.5rem;
width: 4rem;
height: 4rem;
}
header .hamburger img {
width: 2.2rem;
height: 1.4rem;
}  footer .top .container {
padding: 0;
grid-template-columns: 1fr;
grid-gap: 5rem;
text-align: center;
} footer .top ul.menu a {
font-size: 2rem;
} .socials {
justify-content: center;
} footer .bottom .container {     
font-size: 1.3rem;
text-align: center;
}
.page-id-31 footer .bottom .container {
padding-top: 10rem;
}
footer .bottom .container > div:last-child {
text-align: center;
}
} @keyframes rotateSlowly {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} @font-face {
font-family: 'Agrandir';
src: url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/fonts/Agrandir/400/Agrandir-Regular.eot);
src: url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/fonts/Agrandir/400/Agrandir-Regular.eot?#iefix) format('embedded-opentype'),
url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/fonts/Agrandir/400/Agrandir-Regular.woff2) format('woff2'),
url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/fonts/Agrandir/400/Agrandir-Regular.woff) format('woff'),
url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/fonts/Agrandir/400/Agrandir-Regular.ttf) format('truetype'),
url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/fonts/Agrandir/400/Agrandir-Regular.svg#Agrandir-Regular) format('svg');
font-weight: 400;
font-style: normal;
font-display: swap;
}.hero-image-video-large {
position: relative;
height: 100vh;
max-height: 86rem;
display: flex;
align-items: flex-end;
}
.hero-image-video-large.media-video {
max-height: 100rem;
}
.hero-image-video-large.media-video::before {
content: '';
position: absolute;
right: var(--grid-padding);
bottom: 0;
width: 60rem;
height: 60rem;
background-image: url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/images/pattern01-white.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: .5;
}
.hero-image-video-large.media-video.flip-yes::before {
left: var(--grid-padding);
right: inherit;
}
.hero-image-video-large .media-wrapper {
position: absolute;
z-index: -1;
top: 0;
right: 0;
width: calc( 50% + 35rem );
height: 100%;
overflow: hidden;
}
.hero-image-video-large.media-video .media-wrapper {
height: calc( 100% - 14rem );
}
.hero-image-video-large.flip-yes .media-wrapper {
left: 0;
right: inherit;
}
.hero-image-video-large .media-wrapper .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-image-video-large .media-wrapper iframe {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}
.hero-image-video-large .container {
position: relative;
max-width: 57.5rem;
padding: 10rem 0 8rem;
}
.hero-image-video-large.media-video .container {
padding: 10rem 0 22rem;
}
.hero-image-video-large.flip-yes .container {
margin-left: auto;
}
.hero-image-video-large h1 {
font-size: clamp( 9rem, 7.5vw, 12rem );
}
.hero-image-video-large.media-video .container::before {
content: '';
position: absolute;
bottom: -6rem;
left: 8rem;
width: .1rem;
height: 20rem;
background-color: var(--color-yellow);
}
.hero-image-video-large.media-video.flip-yes .container::before {
left: inherit;
right: 8rem;
} .hero-project {
position: relative;
height: 100vh;
max-height: 86rem;
display: flex;
align-items: flex-end;
}
.hero-project .media-wrapper {
position: absolute;
z-index: -1;
top: 0;
right: 0;
width: calc( 50% + 35rem );
height: 100%;
overflow: hidden;
}
.hero-project .media-wrapper .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-project .media-wrapper iframe {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}
.hero-project .container {
position: relative;
max-width: 57.5rem;
padding: 10rem 0 8rem;
}
.hero-project .content-wrapper {
display: flex;
border: .1rem solid #444;
background-color: var(--color-darkgrey);
text-decoration: none;
}
.hero-project .sidebar-wrapper {
flex: 0 0 5rem;
position: relative;
border-right: .1rem solid #444;
}
.hero-project .sidebar-wrapper .text {
position: absolute;
top: 2.4rem;
left: 1.6rem;
font-size: 1.6rem;
line-height: 1;
white-space: nowrap;
color: #aaa;
text-transform: uppercase;    
transform: rotate(90deg);
transform-origin: bottom left;
}
.hero-project .text-wrapper {
flex: 1 1 auto;
}
.hero-project h1 {
margin: 0;
padding: 4rem 4rem 2.5rem;
border-bottom: .1rem solid #444;
font-size: clamp( 4.6rem, 3.75vw, 6rem );
line-height: 1;
}
.hero-project .text-wrapper .text {
padding: 3.5rem 4rem 4rem;
font-size: 1.8rem;
line-height: 1.6;
color: #aaa;
} .hero-team-member {
position: relative;
padding-top: 12rem;
}
.hero-team-member .container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 8rem;
}
.hero-team-member .image {
position: relative;
width: 100%;
height: 0;
padding-top: 150%;
}
.hero-team-member .stamp-wrapper {
position: absolute;
z-index: 1;
right: -13rem;
bottom: 10rem;
width: 26rem;
height: 26rem;
animation: rotateSlowly 60s infinite linear;
}
.hero-team-member .image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-team-member .content-wrapper {
padding-top: 18rem;
}
.hero-team-member h1 {
margin: 0;
font-size: clamp( 9rem, 7.5vw, 12rem );
}
.hero-team-member .position {
margin-top: -.5rem;
font-size: 2.4rem;
color: #767676;
}
.hero-team-member .text-wrapper {
margin-top: 2rem;
}
.hero-team-member .ticker {
position: absolute;
z-index: -1;
bottom: -15rem;
left: 0;
width: 100%;
display: block;
font-family: 'Agrandir';
font-size: clamp( 19rem, 14.375vw, 23rem );    
font-weight: 400;
white-space: nowrap;
color: #393939;
} .hero-contact {
position: relative;
padding-top: 12rem;
}
.hero-contact::before {
content: '';
position: absolute;
z-index: -1;
right: -35rem;
bottom: -35rem;
width: 70rem;
height: 70rem;
background-image: url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/images/stamp-storytellingcampaigns-grey.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
animation: rotateSlowly 60s infinite linear;
}
.hero-contact .container {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 8rem;
}
.hero-contact .container::before {
content: '';
position: absolute;
bottom: -18rem;
left: -12rem;
width: 16rem;
height: 16rem;
background-image: url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/images/pattern03-grey.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.hero-contact .media-wrapper {
position: relative;
width: 100%;
height: 0;
padding-top: 120%;
overflow: hidden;
}
.hero-contact .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-contact .video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hero-contact iframe {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}
.hero-contact .content-wrapper {
margin-left: 30%;
padding-top: 14rem;
line-height: 2;
}
.hero-contact h4 {
color: #777;
}
.hero-contact a {
text-decoration: none;
}
.hero-contact a:hover {
text-decoration: underline;
} @media (max-width: 1440px) { .hero-image-video-large {
max-height: 70rem;
}
.hero-image-video-large.media-video {
max-height: 76.8rem;
}
.hero-image-video-large.media-video::before {
width: 43rem;
height: 43rem;
}
.hero-image-video-large.media-video .media-wrapper {
height: calc( 100% - 6.8rem );
}
.hero-image-video-large.media-video .container {
padding: 10rem 0 14.8rem;
}
.hero-image-video-large h1 {
font-size: clamp( 6rem, 6.25vw, 9rem );
}
.hero-image-video-large.media-video .container::before {
left: 6rem;
height: 12.8rem;
}
.hero-image-video-large.media-video.flip-yes .container::before {
right: 6rem;
} .hero-project {
max-height: 70rem;
}
.hero-project .sidebar-wrapper {
flex: 0 0 4rem;
}
.hero-project .sidebar-wrapper .text {
top: 1.4rem;
left: 1.2rem;
font-size: 1.5rem;
}
.hero-project h1 {
padding: 3rem 3rem 2rem;
font-size: clamp( 3rem, 3.194vw, 4.6rem );
line-height: 1.1;
}
.hero-project .text-wrapper .text {
padding: 2.5rem 3rem 3rem;
font-size: 1.6rem;
} .hero-team-member .stamp-wrapper {
right: -11rem;
width: 22rem;
height: 22rem;
}
.hero-team-member h1 {
font-size: clamp( 6rem, 6.25vw, 9rem );
}
.hero-team-member .ticker {
font-size: clamp( 12rem, 13.194vw, 19rem );
} .hero-contact::before {        
right: -28rem;
bottom: -28rem;
width: 56rem;
height: 56rem;
}
.hero-contact .container::before {
bottom: -15rem;
left: -9rem;
width: 13rem;
height: 13rem;
}
}
@media (max-width: 1180px) { .hero-image-video-large .container {
max-width: 45rem;
} .hero-project .container {
max-width: 45rem;
} .hero-contact::before {        
right: -17rem;
bottom: -17rem;
width: 34rem;
height: 34rem;
}
.hero-contact .content-wrapper {
margin-left: 15%;
}
}
@media (max-width: 1024px) { .hero-image-video-large,
.hero-image-video-large.media-video {
height: inherit;
min-height: inherit;
max-height: inherit;
padding-bottom: 0;
}
.hero-image-video-large.media-video::before {
top: 30rem;
bottom: inherit;
width: 30rem;
height: 30rem;
}
.hero-image-video-large .media-wrapper,
.hero-image-video-large.media-video .media-wrapper {
width: 100%;
height: 56rem;
}  
.hero-image-video-large .container,
.hero-image-video-large.media-video .container  {
padding: 51.8rem 0 0;
}
.hero-image-video-large.flip-yes .container {
margin-left: 0;
}
.hero-image-video-large h1 {
font-size: 6rem;
}
.hero-image-video-large.media-video .container::before {
display: none;
} .hero-project {
height: inherit;
min-height: inherit;
max-height: inherit;
padding-bottom: 0;
}
.hero-project .media-wrapper {
width: 100%;
height: 56rem;
}
.hero-project .container {
padding: 50rem 0 0;
}
.hero-project .content-wrapper {
max-width: 46.9rem;
}
.hero-project h1 {
font-size: 3rem;
} .hero-team-member .stamp-wrapper {
right: -7.5rem;
bottom: 7.5rem;
width: 15rem;
height: 15rem;
}
.hero-team-member h1 {
font-size: 6rem;
}
.hero-team-member .position {
font-size: 2rem;
}
.hero-team-member .ticker {
bottom: -10rem;
font-size: 12rem;
} .hero-contact .container::before {
display: none;
}
}
@media (max-width: 899px) { .hero-team-member .stamp-wrapper {
right: -6rem;
bottom: 6rem;
width: 12rem;
height: 12rem;
}
.hero-team-member .content-wrapper {
padding-top: 10rem;
} .hero-contact .content-wrapper {
padding-top: 10rem;
}
}
@media (max-width: 767px) { .hero-image-video-large.media-video::before {
display: none;
} .hero-team-member {
padding-top: 8rem;
} .hero-contact {
padding-top: 8rem;
}
.hero-contact::before {        
right: -11rem;
bottom: -11rem;
width: 22rem;
height: 22rem;
}
.hero-contact .content-wrapper {
margin-left: 0;
}
.hero-contact .socials {
justify-content: flex-start;
}
}
@media (max-width: 599px) { .hero-project .content-wrapper {
max-width: inherit;
}
.hero-project .sidebar-wrapper .text {
top: .7rem;
left: 1.3rem;
font-size: 1.3rem;
}
.hero-project h1 {
padding: 2rem 2rem 1.25rem;
}
.hero-project .text-wrapper .text {
padding: 2rem;
font-size: 1.5rem;
} .hero-team-member {
padding: 0;
}
.hero-team-member .image {
padding-top: 55rem;
}
.hero-team-member .stamp-wrapper {
right: -10rem;
bottom: -10rem;
width: 20rem;
height: 20rem;
}
.hero-team-member .container {
grid-template-columns: 1fr;
grid-gap: 5rem;
}
.hero-team-member .content-wrapper {
padding: 0 var(--grid-padding);
}
.hero-team-member .ticker {
display: none;
} .hero-contact .container {
grid-template-columns: 1fr;
grid-gap: 5rem;
}
.hero-contact .media-wrapper {
left: calc( var(--grid-padding) * -1 );
width: 65%;
padding-top: 78%;
}
.hero-contact .content-wrapper {
padding-top: 0;
}
}.content-image-text .container {
display: grid;
grid-template-columns: 2fr 3fr;
grid-gap: 20rem;
}
.content-image-text.flip-yes .container {
grid-template-columns: 3fr 2fr;
}
.content-image-text.flip-yes .outer-image-wrapper {
order: 2;
}
.content-image-text .image-wrapper {
position: relative;
}
.content-image-text .image-wrapper .image {
width: 100%;
height: 100%;
object-fit: contain;
object-position: top;
}
.content-image-text .stamp-wrapper {
position: absolute;
right: -14rem;
bottom: 10rem;
width: 28rem;
height: 28rem;
animation: rotateSlowly 60s infinite linear;
}
.content-image-text.flip-yes .stamp-wrapper {
left: -14rem;
right: inherit;
}
.content-image-text .stamp-wrapper img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom;
}
.content-image-text .text-wrapper {
padding: 7.5rem 8rem 0 0;
}
.content-image-text.flip-yes .text-wrapper {
order: 1;
padding: 7.5rem 0 0 8rem;
} .content-project-large {
overflow: hidden;
}
.content-project-large .container {
display: flex;
align-items: center;
}
.content-project-large .media-wrapper {
flex: 0 0 75%;
position: relative;
display: block;
width: 100%;
height: 0;
padding-top: 51%; text-decoration: none;
overflow: hidden;
}
.content-project-large .media-wrapper .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.content-project-large .media-wrapper .video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.content-project-large .media-wrapper .video .clickable {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.content-project-large .media-wrapper iframe {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}
.content-project-large .content-wrapper {
flex: 0 0 calc( 25% + 20rem );
display: flex;
position: relative;
z-index: 1;
margin-left: -20rem;
border: .1rem solid #444;
background-color: var(--color-darkgrey);
text-decoration: none;
transition: .3s;
}
.content-project-large .media-wrapper[href]:hover + .content-wrapper,
.content-project-large .content-wrapper[href]:hover {
background-color: var(--color-yellow);
}
.content-project-large .sidebar-wrapper {
flex: 0 0 5rem;
position: relative;
border-right: .1rem solid #444;
transition: .3s;
}
.content-project-large .media-wrapper[href]:hover + .content-wrapper .sidebar-wrapper,
.content-project-large .content-wrapper[href]:hover .sidebar-wrapper {
border-right-color: var(--color-darkgrey);
}
.content-project-large .sidebar-wrapper .text {
position: absolute;
top: 2.4rem;
left: 1.6rem;
font-size: 1.6rem;
line-height: 1;
white-space: nowrap;
color: #aaa;
text-transform: uppercase;    
transform: rotate(90deg);
transform-origin: bottom left;
transition: .3s;
}
.content-project-large .media-wrapper[href]:hover + .content-wrapper .sidebar-wrapper .text,
.content-project-large .content-wrapper[href]:hover .sidebar-wrapper .text {
color: var(--color-darkgrey);
}
.content-project-large .text-wrapper {
flex: 1 1 auto;
}
.content-project-large h3 {
margin: 0;
padding: 4rem 4rem 2.5rem;
border-bottom: .1rem solid #444;
font-size: clamp( 4.6rem, 3.75vw, 6rem );
line-height: 1;
transition: .3s;
}
.content-project-large .media-wrapper[href]:hover + .content-wrapper h3,
.content-project-large .content-wrapper[href]:hover h3 {
border-bottom-color: var(--color-darkgrey);
color: var(--color-darkgrey);
}
.content-project-large .text-wrapper .text {
padding: 3.5rem 4rem 4rem;
font-size: 1.8rem;
line-height: 1.6;
color: #aaa;
transition: .3s;
}
.content-project-large .media-wrapper[href]:hover + .content-wrapper .text-wrapper .text,
.content-project-large .content-wrapper[href]:hover .text-wrapper .text {
color: var(--color-darkgrey);
} .content-text {
position: relative;
}
.content-text.stamp-yes::before {
content: '';
position: absolute;
z-index: -1;
top: -15rem;
right: -15rem;
width: 60rem;
height: 60rem;
background-image: url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/images/stamp-storytellingcampaigns-grey.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
animation: rotateSlowly 60s infinite linear;
}
.content-text .row-lg .container {
max-width: 120rem;
}
.content-text .row-md .container {
max-width: 95rem;
}
.content-text .container.center-yes {
margin: 0 auto;
}
.content-text h1:not(.small) {
margin-bottom: 5rem;
} .content-media .container {
display: grid;
grid-template-columns: 4fr 5fr;
grid-gap: 17rem;
}
.content-media .left {
position: relative;
}
.content-media .left::before {
content: '';
position: absolute;
bottom: 0;
left: calc( 50% - 8rem );
width: 16rem;
height: 16rem;
background-image: url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/images/pattern03-grey.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.content-media .right {
padding-top: 17rem;
}
.content-media .media-wrapper {
position: relative;
width: 100%;
height: 0;
padding-top: 120%;
overflow: hidden;
}
.content-media .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.content-media .video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.content-media iframe {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
} .content-media-full-width {    
padding-left: 0;
padding-right: 0;
}
.content-media-full-width .container {
position: relative;
}
.content-media-full-width .container::before {
content: '';
position: absolute;
z-index: 1;
top: -30rem;
right: -30rem;
width: 60rem;
height: 60rem;
background-image: url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/images/stamp-brandingidentity-white.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
animation: rotateSlowly 60s infinite linear;
}
.content-media-full-width .media-wrapper {
position: relative;
height: 90rem;
}
.content-media-full-width .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.content-media-full-width .video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.content-media-full-width iframe {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
} .content-services .item {
position: relative;
max-width: calc( 100% - 20rem );
display: grid;
grid-template-columns: 4fr 5fr;
}
.content-services .item:not(:last-child) {
padding-bottom: 20rem;
}
.content-services .item:nth-child(even) {
margin-left: auto;
grid-template-columns: 5fr 4fr;
}
.content-services .item:first-child::before {
content: '';
position: absolute;
bottom: 0;
left: 15%;
width: 16rem;
height: 16rem;
background-image: url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/images/pattern03-grey.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.content-services .item:nth-child(even) .image-wrapper {
order: 2;
}
.content-services .image-wrapper img {
width: 100%;
}
.content-services .content-wrapper {
width: calc( 100% + 3rem );
margin-left: -3rem;
padding-top: 17rem;
}
.content-services .item:nth-child(even) .content-wrapper {
order: 1;
position: relative;
z-index: 1;    
width: calc( 100% + 8rem );
margin-left: inherit;
margin-right: -8rem;
}
.content-services h2.big {
max-width: inherit;
}
.content-services ul.services,
.content-services-list ul.services {
list-style-type: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1rem 10rem;
}
.content-services ul.services {
margin-top: 10rem;
}
.content-services .item:nth-child(odd) ul.services {
margin-left: 33.33%;
}
.content-services .item:nth-child(even) ul.services {
margin-right: 33.33%;
}
.content-services ul.services a,
.content-services-list ul.services a {
position: relative;
font-size: 2rem;
color: #767676;
text-decoration: none;
}
.content-services ul.services a::before,
.content-services-list ul.services a::before {
content: '';
position: absolute;
top: .7rem;
left: 0;
width: 1.1rem;
height: 1rem;
background-image: url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/images/icon-arrow-white.svg);
background-size: 1.1rem 1rem;
background-repeat: no-repeat;
background-position: center;
opacity: 0;
transition: .3s;
}
.content-services ul.services a:hover,
.content-services-list ul.services a:hover {
padding-left: 1.6rem;
color: white;
}
.content-services ul.services a:hover::before,
.content-services-list ul.services a:hover::before {
opacity: 1;
} .content-images-overlapping {
position: relative;
overflow: hidden;
}
.content-images-overlapping .container {
padding-bottom: 8rem;
display: grid;
grid-template-columns: 3fr 2fr;
align-items: flex-end;
}
.content-images-overlapping .image-wrapper {
position: relative;
width: 100%;
height: 0;
padding-top: 66.67%;
}
.content-images-overlapping .image-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.content-images-overlapping .image-wrapper:last-child {
width: calc( 100% + 8rem );
margin: 0 0 -8rem -8rem;
padding-top: 77.79%;
box-shadow: -1.5rem 1rem 4rem rgba(0,0,0,.16);
}
.content-images-overlapping .ticker {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
display: block;
font-family: 'Agrandir';
font-size: clamp( 19rem, 14.375vw, 23rem );    
font-weight: 400;
white-space: nowrap;
color: #393939;
} .content-video .video-wrapper {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%;
}
.content-video .video-wrapper::before {
content: '';
position: absolute;
z-index: -1;
top: -18rem;
left: -18rem;
width: 36rem;
height: 36rem;
background-image: url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/images/stamp-storytellingcampaigns-grey.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
animation: rotateSlowly 60s infinite linear;
}
.content-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.content-video .caption {
margin-top: 1rem;
font-size: 1.8rem;
color: #767676;
} .content-testimonial .text-wrapper {
font-family: 'Agrandir';
font-size: clamp( 2.4rem, 2.5vw, 4rem );
font-weight: 400;
line-height: 1.3;
color: white;
}
.content-testimonial .caption {
margin-top: 1rem;
font-size: 1.8rem;
color: #767676;
} .content-awards {
position: relative;
}
.content-awards .container {
padding-top: 10rem;
}
.content-awards .list {
position: relative;
}
.content-awards .list::before {
content: '';
position: absolute;
z-index: -1;
right: 5rem;
bottom: -7rem;
width: 22rem;
height: 19.3rem;
background-image: url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/images/pattern04-grey.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.content-awards .item {
display: block;    
padding-bottom: 2rem;
border-bottom: .1rem solid #707070;
text-decoration: none;
}
.content-awards .item:not(:last-child) {
margin-bottom: 2rem;
}
.content-awards .item[href]:hover h3 {
color: var(--color-yellow);
}
.content-awards h3 {
margin: 0;
font-size: clamp( 2.6rem, 3.125vw, 5rem );
}
.content-awards .caption {
margin-top: 1rem;
font-size: 2rem;
color: #767676;
}
.content-awards .ticker {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
display: block;
font-family: 'Agrandir';
font-size: clamp( 19rem, 14.375vw, 23rem );    
font-weight: 400;
white-space: nowrap;
color: #393939;
} .content-quote .row-sm {
max-width: 95rem;
}
.content-quote .text-wrapper {
position: relative;
font-family: 'Agrandir';    
font-weight: 400;
line-height: 1;
}
.content-quote .text-wrapper.font-size-lg {
font-size: clamp( 8rem, 6.25vw, 10rem );
}
.content-quote .text-wrapper.font-size-md {
font-size: clamp( 5.6rem, 4.375vw, 7rem );
}
.content-quote .text-wrapper.font-size-sm {
font-size: clamp( 3rem, 3.472vw, 5rem );
line-height: 1.3;
}
.content-quote .text {
color: #393939;
}
.content-quote .overlay-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: white;
animation: clipPathAnimation 10s ease-in-out infinite;
}
@keyframes clipPathAnimation {
0% {
clip-path: polygon(-50% 0, 0% 0, -25% 100%, -75% 100%);
}
100% {
clip-path: polygon(125% 0, 175% 0, 150% 100%, 100% 100%);
}
} @media (max-width: 1440px) { .content-image-text .container {
grid-gap: 16rem;
}
.content-image-text .stamp-wrapper {
right: -11rem;
width: 22rem;
height: 22rem;
}
.content-image-text.flip-yes .stamp-wrapper {
left: -11rem;
}
.content-image-text .text-wrapper {
padding: 7.5rem 9rem 0 0;
}
.content-image-text.flip-yes .text-wrapper {
padding: 7.5rem 0 0 9rem;
}
.content-project-large h3 {
font-size: clamp( 3rem, 3.194vw, 4.6rem );
} .content-project-large .content-wrapper {
flex: 0 0 calc( 25% + 15rem );
margin-left: -15rem;
}
.content-project-large .sidebar-wrapper {
flex: 0 0 4rem;
}
.content-project-large .sidebar-wrapper .text {
top: 1.4rem;
left: 1.2rem;
font-size: 1.5rem;
}
.content-project-large h3 {
padding: 3rem 3rem 2rem;
}
.content-project-large .text-wrapper .text {
padding: 2.5rem 3rem 3rem;
font-size: 1.6rem;
} .content-text.stamp-yes::before {
top: -12.5rem;
right: -25rem;
width: 50rem;
height: 50rem;
}
.content-text .row-md .container {
max-width: var(--grid-size-sm);
} .content-media .container {
grid-gap: 13rem;
}
.content-media .left::before {
left: calc( 50% - 6.5rem );
width: 13rem;
height: 13rem;
} .content-media-full-width .container::before {
top: -25rem;
right: -25rem;
width: 50rem;
height: 50rem;
}
.content-media-full-width .media-wrapper {
height: 70rem;
} .content-services .item {
max-width: calc( 100% - 10rem );
}
.content-services .item:first-child::before {
width: 12rem;
height: 12rem;
}
.content-services .content-wrapper {
padding-top: 13rem;
}
.content-services ul.services a,
.content-services-item ul.services a {
font-size: 1.8rem;
} .content-images-overlapping .ticker {
font-size: clamp( 12rem, 13.194vw, 19rem );
} .content-video .video-wrapper::before {
top: -13rem;
left: -13rem;
width: 26rem;
height: 26rem;
} .content-awards .container {
padding-top: 7rem;
}
.content-awards .list::before {
width: 18.2rem;
height: 16rem;
}
.content-awards .ticker {
font-size: clamp( 12rem, 13.194vw, 19rem );
} .content-quote .text-wrapper.font-size-lg {
font-size: clamp( 4.5rem, 5.556vw, 8rem );
line-height: 1.1;
}
.content-quote .text-wrapper.font-size-md {
font-size: clamp( 4.5rem, 3.889vw, 5.6rem );
line-height: 1.1;
}
}
@media (max-width: 1180px) { .content-image-text .text-wrapper {        
padding: 7.5rem 0 0;
}
.content-image-text.flip-yes .text-wrapper {
padding: 7.5rem 0 0;
} .content-text.stamp-yes::before {
top: -5rem;
right: -20rem;
width: 40rem;
height: 40rem;
} .content-media .container {
grid-gap: 10rem;
} .content-media-full-width .container::before {
top: -20rem;
right: -20rem;
width: 40rem;
height: 40rem;
}
}
@media (max-width: 1024px) { .content-image-text .container {
grid-gap: 10rem;
}
.content-image-text .stamp-wrapper {
right: -7.5rem;
bottom: 7.5rem;
width: 15rem;
height: 15rem;
}
.content-image-text.flip-yes .stamp-wrapper {
left: -7.5rem;
right: inherit;
} .content-project-large .container {
display: block;
}
.content-project-large .media-wrapper {
padding-top: 56.25%;
}
.content-project-large .content-wrapper {
max-width: 46.9rem;
margin: -7rem -2rem 0 auto;
} .content-media .right {
padding-top: 12rem;
} .content-media-full-width .container::before {
top: -12rem;
right: -12rem;
width: 24rem;
height: 24rem;
}
.content-media-full-width .media-wrapper {
height: 50rem;
} .content-services .item:not(:last-child) {
padding-bottom: 10rem;
}
.content-services ul.services {
margin-top: 7rem;
}
.content-services .item:nth-child(odd) ul.services {
margin-left: 0;
}
.content-services .item:nth-child(even) ul.services {
margin-right: 0;
}
.content-services-list ul.services {
margin: 0;
} .content-images-overlapping .ticker {
font-size: 12rem;
} .content-video .video-wrapper::before {
display: none;
} .content-awards .container {
padding-top: 0;
}
.content-awards h3 {
font-size: 2.6rem;
}
.content-awards .ticker {
font-size: 12rem;
}
}
@media (max-width: 767px) { .content-image-text .container {
grid-template-columns: 1fr;
grid-gap: 3rem;
}
.content-image-text.flip-yes .container {
grid-template-columns: 1fr;
}
.content-image-text.flip-yes .outer-image-wrapper {
order: 1;
}
.content-image-text .image-wrapper {
left: calc( var(--grid-padding) * -1 );
width: 65%;
}
.content-image-text .stamp-wrapper {
right: -10rem;
bottom: calc( 50% - 10rem );
width: 20rem;
height: 20rem;
}
.content-image-text.flip-yes .stamp-wrapper {
left: calc( 100% - 10rem );
}
.content-image-text .text-wrapper {        
padding: 0;
}
.content-image-text.flip-yes .text-wrapper {
order: 2;
padding: 0;
} .content-text h1 {
margin-bottom: 2rem;
font-size: 4.5rem;
}
.content-text.stamp-yes::before {
top: 0;
right: -12rem;
width: 24rem;
height: 24rem;
} .content-media .container {
grid-gap: 6rem;
}
.content-media .left::before {
left: calc( 50% - 5rem );
width: 10rem;
height: 10rem;
} .content-media-full-width .media-wrapper {
height: 37.5rem;
} .content-services .item {
max-width: 100%;
}
.content-services .item:first-child::before {
left: 10%;
}
.content-services ul.services {
margin-top: 5rem;
} .content-images-overlapping .container {
padding-bottom: 3rem;
}
.content-images-overlapping .image-wrapper:last-child {
width: calc( 100% + 3rem );
margin: 0 0 -3rem -3rem;
} .content-video .caption {
font-size: 1.6rem;
} .content-testimonial .text-wrapper {
font-size: 2.4rem;
}
.content-testimonial .caption {
font-size: 1.6rem;
} .content-awards .list::before {
right: -10rem;
} .content-quote .text-wrapper.font-size-lg,
.content-quote .text-wrapper.font-size-md { 
font-size: 4.5rem;
line-height: 1.3;
}
.content-quote .text-wrapper.font-size-sm { 
font-size: 3rem;
}
}
@media (max-width: 599px) { .content-project-large .media-wrapper {
padding-top: 120%;
}
.content-project-large .content-wrapper {
max-width: inherit;
margin: -7rem -2rem 0 2rem;
}
.content-project-large .sidebar-wrapper .text {
top: .7rem;
left: 1.3rem;
font-size: 1.3rem;
}
.content-project-large h3 {
padding: 2rem 2rem 1.25rem;
}
.content-project-large .text-wrapper .text {
padding: 2rem;
font-size: 1.5rem;
} .content-media .container {
grid-template-columns: 1fr;
grid-gap: 3rem;
}
.content-media .left {
width: 65%;
}
.content-media .left::before {
display: none;
}
.content-media .right {
width: 75%;
margin-left: auto;
padding-top: 0;
} .content-media-full-width .container::before {
top: -8rem;
right: -8rem;
width: 16rem;
height: 16rem;
}
.content-media-full-width .media-wrapper {
height: 22rem;
} .content-services .item {
display: grid;
grid-template-columns: 1fr;
}
.content-services .item:not(:last-child) {
padding-bottom: 8rem;
}
.content-services .item:nth-child(even) {
margin-left: 0;
grid-template-columns: 1fr;
}
.content-services .item:first-child {
padding-bottom: 20rem;
}
.content-services .item:first-child::before {
left: calc( 50% - 6rem );
bottom: 5rem;
}
.content-services .image-wrapper {
width: 75%;
}
.content-services .item:nth-child(even) .image-wrapper {
order: 1;
}
.content-services .content-wrapper {
width: inherit;
margin: -3rem 0 0 0;
padding-top: 0;
}
.content-services .item:nth-child(even) .content-wrapper {
order: 2;
width: inherit;
margin-right: 0;
}
.content-services .content {
padding-left: 3rem;
}
.content-services ul.services {
margin-top: 3rem;
}
.content-services ul.services,
.content-services-list ul.services {
grid-gap: 1rem 3rem;
}
}.slider-media {
padding-left: 0;
padding-right: 0;
}
.slider-media .swiper-slide {
width: auto;
}
.slider-media .swiper-slide:nth-child(2) {
margin: 10rem 0 0 -20rem;
}
.slider-media .swiper-slide:nth-child(3) {
margin-top: 10rem;
}
.slider-media .swiper-slide:nth-child(3) > div {
height: 40rem;
}
.slider-media .swiper-slide:nth-child(5) {
margin: 10rem 0 0 -20rem;
}
.slider-media .swiper-slide:nth-child(5) > div {
height: 40rem;
}
.slider-media .swiper-slide:nth-child(7) {
margin: 10rem 0 0 -20rem;
}
.slider-media .swiper-slide:nth-child(9) > div {
height: 40rem;
}
.slider-media .swiper-slide:nth-child(9) {
margin: 10rem 0 0 -20rem;
}
.slider-media .video-wrapper {
position: relative;
height: 59rem;
background-color: #111;
display: flex;
justify-content: center;
align-items: center;
}
.slider-media iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider-media .image-wrapper {
position: relative;
height: 59rem;
}
.slider-media .image {
height: 100%;
} .slider-media .swiper-button-prev,
.slider-media .swiper-button-next {
width: 8rem;
height: 8rem;
border-radius: 50%;
background-color: #393939;
opacity: .5;
transition: .3s;
}
.slider-media .swiper-button-prev {
left: var(--grid-padding);
}
.slider-media .swiper-button-next {
right: var(--grid-padding);
}
.slider-media .swiper-button-prev::before, 
.slider-media .swiper-button-next::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/images/icon-arrow-white.svg);
background-size: 2rem 1.7rem;
background-position: center;
background-repeat: no-repeat;
}
.slider-media .swiper-button-prev::before {
transform: rotate(180deg);
}
.slider-media .swiper-button-prev::after, 
.slider-media .swiper-button-next::after {
display: none;
}
.slider-media .swiper-button-prev:hover,
.slider-media .swiper-button-next:hover {
opacity: 1;
}
.slider-media .swiper-button-next.swiper-button-disabled, 
.slider-media .swiper-button-prev.swiper-button-disabled {
opacity: 0;
} .slider-services {
overflow: hidden;
}
.slider-services .container {
position: relative;
min-height: 16rem;
}
.slider-services .image-wrapper {
position: absolute;
top: 0;
left: 0;
width: 16rem;
height: 16rem;
}
.slider-services .image-wrapper img {
width: 100%;
height: 100%;
object-fit: contain;
}
.slider-services .swiper-container {
width: 75%;
margin-left: auto;
}
.slider-services ul {
list-style-type: none;
margin: 1.5rem 0 0;
padding: 0;
}
.slider-services ul li:not(:first-child) {
margin-top: .5rem;
}
.slider-services ul a {
color: white;
text-decoration: none;
}
.slider-services ul a:hover {
text-decoration: underline;
} .slider-clients {
overflow: hidden;
}
.slider-clients .swiper-slide {
display: flex;
align-items: center;
text-decoration: none;
}
.slider-clients .swiper-slide img {
width: 15rem;
height: 10rem;
object-fit: contain;
object-position: center;
opacity: .25;
transition: .3s;
}
.slider-clients .swiper-slide[href]:hover img {
opacity: 1;
} @media (max-width: 1440px) { .slider-media .swiper-slide:nth-child(2) {
margin: 6rem 0 0 -16rem;
}
.slider-media .swiper-slide:nth-child(3) {
margin-top: 6rem;
}
.slider-media .swiper-slide:nth-child(3) > div {
height: 30rem;
}
.slider-media .swiper-slide:nth-child(5) {
margin: 6rem 0 0 -16rem;
}
.slider-media .swiper-slide:nth-child(5) > div {
height: 30rem;
}
.slider-media .swiper-slide:nth-child(7) {
margin: 6rem 0 0 -16rem;
}
.slider-media .swiper-slide:nth-child(9) > div {
height: 30rem;
}
.slider-media .swiper-slide:nth-child(9) {
margin: 6rem 0 0 -16rem;
}
.slider-media .video-wrapper {
height: 44rem;
}
.slider-media .image-wrapper {
height: 44rem;
} .slider-media .swiper-button-prev,
.slider-media .swiper-button-next {
width: 6.4rem;
height: 6.4rem;
}
.slider-media .swiper-button-prev::before, 
.slider-media .swiper-button-next::before {
background-size: 2rem 1.6rem;
} .slider-clients .swiper {
overflow: visible;
}
}
@media (max-width: 1024px) { .slider-media .swiper-slide:nth-child(2) {
margin: 6rem 0 0 -11rem;
}
.slider-media .swiper-slide:nth-child(3) {
margin-top: 6rem;
}
.slider-media .swiper-slide:nth-child(3) > div {
height: 20rem;
}
.slider-media .swiper-slide:nth-child(5) {
margin: 6rem 0 0 -11rem;
}
.slider-media .swiper-slide:nth-child(5) > div {
height: 20rem;
}
.slider-media .swiper-slide:nth-child(7) {
margin: 6rem 0 0 -11rem;
}
.slider-media .swiper-slide:nth-child(9) > div {
height: 20rem;
}
.slider-media .swiper-slide:nth-child(9) {
margin: 6rem 0 0 -11rem;
}
.slider-media .video-wrapper {
height: 30rem;
}
.slider-media .image-wrapper {
height: 30rem;
} .slider-services {
padding-left: 0;
padding-right: 0;
}
.slider-services .container {
min-height: 20rem;
}
.slider-services .image-wrapper {
position: absolute;
left: -10rem;
width: 20rem;
height: 20rem;
}
.slider-services .swiper-container {
width: calc( 100% - 15rem );
}
.slider-services ul {
margin: 3rem 0 0;
}
}
@media (max-width: 767px) { .slider-services ul {
margin: 4rem 0 0;
} .slider-clients .swiper-slide img {
width: 12rem;
height: 8rem;
}
}
@media (max-width: 499px) { .slider-media .swiper-slide:nth-child(2) {
margin: 4rem 0 0 -9rem;
}
.slider-media .swiper-slide:nth-child(3) {
margin-top: 6rem;
}
.slider-media .swiper-slide:nth-child(3) > div {
height: 10rem;
}
.slider-media .swiper-slide:nth-child(5) {
margin: 4rem 0 0 -9rem;
}
.slider-media .swiper-slide:nth-child(5) > div {
height: 10rem;
}
.slider-media .swiper-slide:nth-child(7) {
margin: 4rem 0 0 -9rem;
}
.slider-media .swiper-slide:nth-child(9) > div {
height: 10rem;
}
.slider-media .swiper-slide:nth-child(9) {
margin: 4rem 0 0 -9rem;
}
.slider-media .video-wrapper {
height: 17rem;
}
.slider-media .image-wrapper {
height: 17rem;
} .slider-media .swiper-button-prev,
.slider-media .swiper-button-next {
width: 4rem;
height: 4rem;
}
.slider-media .swiper-button-prev::before, 
.slider-media .swiper-button-next::before {
background-size: 1.4rem 1.2rem;
}
}.grid-projects,
.grid-blog {
overflow: hidden;
}
.grid-projects .tiles.grid-col-2 {
padding-right: 12rem;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 17rem;
}
.grid-projects .tiles.grid-col-3,
.grid-blog .tiles {
padding-right: 12rem;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 7rem 10rem;
}
.grid-projects .tiles.grid-col-2 .item {
position: relative;
}
.grid-projects .tiles.grid-col-2 .item:nth-child(odd)::before {
content: '';
position: absolute;
bottom: 0;
left: calc( 50% - 8rem );
width: 16rem;
height: 16rem;
background-image: url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/images/pattern03-grey.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.grid-projects .tiles.grid-col-2 .item:nth-child(even) {
margin-top: 30rem;
}
.grid-projects a,
.grid-blog a {
display: block;
text-decoration: none;
}
.grid-projects .image-wrapper,
.grid-blog .image-wrapper {
position: relative;
width: 100%;
height: 0;    
}
.grid-projects .image-wrapper {
padding-top: 120%;
}
.grid-blog .image-wrapper {
padding-top: 66.67%;
}
.grid-projects .tiles.grid-col-2 .item:nth-child(2) .image-wrapper::before {
content: '';
position: absolute;
top: -18rem;
right: -18rem;
width: 36rem;
height: 36rem;
background-image: url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/images/stamp-storytellingcampaigns-grey.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
animation: rotateSlowly 60s infinite linear;
}
.grid-projects .image-wrapper img,
.grid-blog .image-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.grid-projects .content-wrapper,
.grid-blog .content-wrapper {
position: relative;
z-index: 1;    
margin: -7rem -4rem 0 auto;
padding: 4rem;
border: .1rem solid #444;
background-color: var(--color-darkgrey);
transition: .3s;
}
.grid-projects .tiles.grid-col-2 .content-wrapper {
width: calc( 100% - 10rem );
}
.grid-projects .tiles.grid-col-3 .content-wrapper,
.grid-blog .tiles .content-wrapper {
width: 100%;
}
.grid-projects .image-wrapper:hover + .content-wrapper,
.grid-projects .content-wrapper:hover,
.grid-blog .image-wrapper:hover + .content-wrapper,
.grid-blog .content-wrapper:hover {
border-color: var(--color-darkgrey);
background-color: var(--color-yellow);
}
.grid-projects h3,
.grid-blog h3 {
margin: 0;
transition: .3s;
}
.grid-blog h3 {
font-size: 2.6rem;
line-height: 1.2;
}
.grid-projects .image-wrapper:hover + .content-wrapper h3,
.grid-projects .content-wrapper:hover h3,
.grid-blog .image-wrapper:hover + .content-wrapper h3,
.grid-blog .content-wrapper:hover h3 {
color: var(--color-darkgrey);
}
.grid-projects .cats {
margin-top: .5rem;
font-size: 1.6rem;
line-height: 1.3;
color: #aaa;
text-transform: uppercase;
}
.grid-projects .image-wrapper:hover + .content-wrapper .cats,
.grid-projects .content-wrapper:hover .cats {
color: var(--color-darkgrey);
} .grid-team {
position: relative;
overflow: hidden;
}
.grid-team .container {
padding-right: 12rem;
}
.grid-team .tiles {
width: calc( 100% - 12rem );
display: grid;
grid-template-columns: repeat( 2, 1fr );
grid-gap: 5rem 29rem;
}
.grid-team .item {
position: relative;
display: block;
width: 100%;
height: 0;
padding-top: 150%;    
text-decoration: none;
}
.grid-team .item:nth-child(even) {
margin-top: 21rem;
}
.grid-team .item:nth-child(4n+3),
.grid-team .item:nth-child(4n+4) {
margin-left: 12rem;
}
.grid-team .item:nth-child(4n+4)::before {
content: '';
position: absolute;
z-index: -1;
top: -18rem;
left: -18rem;
width: 36rem;
height: 36rem;
background-image: url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/images/stamp-storytellingcampaigns-grey.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
animation: rotateSlowly 60s infinite linear;
}
.grid-team .item img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.grid-team .content-wrapper {
position: absolute;
right: 8rem;
bottom: 8rem;
transform: translateX(100%);
max-width: 30rem;
}
.grid-team h3 {
margin: 0;
font-size: clamp( 5rem, 4.375vw, 7rem );
line-height: 1;
}
.grid-team .position {
margin-left: 2rem;
font-size: 2rem;
}
.grid-team .ticker {
position: absolute;
z-index: -1;
top: 0;   
left: 0;
width: 100%;
display: block;
font-family: 'Agrandir';
font-size: clamp( 19rem, 14.375vw, 23rem );    
font-weight: 400;
white-space: nowrap;
color: #393939;
} .grid-images .container {
margin-top: -4rem;
}
.grid-images .container > div {
padding-top: 4rem;
}
.grid-images .images-2,
.grid-images .images-3 {
display: grid;
grid-gap: 4rem;
}
.grid-images .images-2 {    
grid-template-columns: 1fr 1fr;    
}
.grid-images .images-3 {    
grid-template-columns: 1fr 1fr 1fr;    
}
.grid-images .image {
position: relative;
width: 100%;
height: 0;
padding-top: 67%;
}
.grid-images .images-3 .image {
padding-top: 120%;
}
.grid-images .image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
} @media (max-width: 1440px) { .grid-projects .tiles.grid-col-2 {
padding-right: 9rem;
grid-gap: 13rem;
}
.grid-projects .tiles.grid-col-3,
.grid-blog .tiles {
padding-right: 9rem;
}
.grid-projects .tiles.grid-col-2 .item:nth-child(odd)::before {
left: calc( 50% - 6.5rem );
width: 13rem;
height: 13rem;
}
.grid-projects .tiles.grid-col-2 .item:nth-child(2) .image-wrapper::before {
top: -14.5rem;
right: -14.5rem;
width: 29rem;
height: 29rem;
}
.grid-projects .content-wrapper,
.grid-blog .content-wrapper {
margin: -6rem -4rem 0 auto;
padding: 3rem;
}
.grid-projects .cats {
font-size: 1.4rem;
} .grid-team .container {
padding-right: 9rem;
}
.grid-team .tiles {
width: calc( 100% - 9rem );
grid-gap: 5rem 22rem;
}
.grid-team .item:nth-child(4n+3),
.grid-team .item:nth-child(4n+4) {
margin-left: 9rem;
}
.grid-team .item:nth-child(4n+4)::before {
top: -13rem;
left: -13rem;
width: 26rem;
height: 26rem;
}
.grid-team .position {
font-size: 1.8rem;
}
.grid-team .ticker {
font-size: clamp( 12rem, 13.194vw, 19rem );
}
}
@media (max-width: 1180px) { .grid-projects .tiles.grid-col-2 {
padding-right: 4rem;
grid-gap: 10rem;
}
.grid-projects .tiles.grid-col-3,
.grid-blog .tiles {
padding-right: 4rem;
grid-template-columns: 1fr 1fr;
} .grid-team .tiles {
grid-gap: 5rem 17rem;
}
.grid-team .content-wrapper {
max-width: 20rem;
}
}
@media (max-width: 1024px) { .grid-projects .tiles.grid-col-2,
.grid-projects .tiles.grid-col-3,
.grid-blog .tiles {
padding-right: 0;
}
.grid-projects .tiles.grid-col-2 .item:nth-child(even) {
margin-top: 20rem;
}
.grid-projects .content-wrapper,
.grid-blog .content-wrapper {        
margin: -5rem -2rem 0 2rem;
}
.grid-projects .tiles.grid-col-2 .content-wrapper,
.grid-projects .tiles.grid-col-3 .content-wrapper,
.grid-blog .tiles .content-wrapper {
width: inherit;
} .grid-team .container {
padding-right: 0;
}
.grid-team .tiles {
grid-gap: 5rem 14rem;
}
.grid-team .item:nth-child(4n+3),
.grid-team .item:nth-child(4n+4) {
margin-left: 0;
}
.grid-team .item:nth-child(4n+4)::before {
top: -10rem;
left: -10rem;
width: 20rem;
height: 20rem;
}
.grid-team .ticker {
font-size: 12rem;
}
}
@media (max-width: 767px) { .grid-projects .tiles.grid-col-2,
.grid-projects .tiles.grid-col-3,
.grid-blog .tiles {
grid-gap: 6rem;
} .grid-team .tiles {
width: 100%;
grid-template-columns: 1fr;
grid-gap: 3rem;
}
.grid-team .item {
width: 65%;
padding-top: 97.5%;
}
.grid-team .item:nth-child(even) {
margin: 0 0 0 auto;
}
.grid-team .item:nth-child(4n+4)::before {
display: none;
}
.grid-team .content-wrapper {
max-width: 30rem;
}
.grid-team .item:nth-child(even) .content-wrapper {
left: -8rem;
right: inherit;
transform: none;
}
.grid-team h3 {
font-size: 5rem;
} .grid-images .container {
margin-top: -1.5rem;
}
.grid-images .container > div {
padding-top: 1.5rem;
}
.grid-images .images-2,
.grid-images .images-3 {
grid-gap: 1.5rem;
}
.grid-images .images-2,
.grid-images .images-3 {    
grid-template-columns: 1fr;    
}
}
@media (max-width: 599px) { .grid-projects .tiles.grid-col-2 { 
position: relative;       
padding-bottom: 17rem;   
grid-template-columns: 1fr;
grid-gap: 7rem;     
}
.grid-projects .tiles.grid-col-3,
.grid-blog .tiles {
position: relative;
grid-template-columns: 1fr;
}
.grid-projects .tiles.grid-col-2::before {
content: '';
position: absolute;
bottom: 0;
left: calc( 50% - 6rem );
width: 12rem;
height: 12rem;
background-image: url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/images/pattern03-grey.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.grid-projects .tiles.grid-col-2 .item:nth-child(odd)::before {
display: none;
}
.grid-projects .tiles.grid-col-2 .item:nth-child(even) {
margin-top: 0;
}
.grid-projects .tiles.grid-col-2 .item:nth-child(2) .image-wrapper::before {
display: none;
}
.grid-projects .content-wrapper,
.grid-blog .content-wrapper {
padding: 2rem;
}
.grid-projects .cats {
font-size: 1.3rem;
}
}
@media (max-width: 499px) { .grid-team .position {
margin-left: 0;
}
}.gform_wrapper.gravity-theme {
margin-top: 3rem;
} .gform_wrapper.gravity-theme .gform_fields {
grid-column-gap: 2rem !important;
grid-row-gap: 1rem !important;
} .gform_wrapper.gravity-theme .gform_heading {
display: none;
} .gform_wrapper.gravity-theme .gfield_label {
font-family: 'Inter Tight', sans-serif;
font-size: 1.4rem !important;
font-weight: 400 !important;
text-transform: uppercase;
}
.gform_wrapper.gravity-theme .gfield_error label {
color: inherit !important;
} .gform_wrapper.gravity-theme .gfield_required {
color: white !important;
} .gform_wrapper.gravity-theme input[type=email], 
.gform_wrapper.gravity-theme input[type=text], 
.gform_wrapper.gravity-theme textarea {
padding: 1rem !important;
border: .1rem solid #313131 !important;
background-color: #313131 !important;
font-family: 'Inter Tight', sans-serif !important;
font-size: 1.8rem !important;    
color: white !important;
}
.gform_wrapper.gravity-theme input[type=email]:focus, 
.gform_wrapper.gravity-theme input[type=text]:focus, 
.gform_wrapper.gravity-theme textarea:focus {
border-color: #777 !important;
}
.gform_wrapper.gravity-theme .gfield_error input[type=email],
.gform_wrapper.gravity-theme .gfield_error input[type=text],
.gform_wrapper.gravity-theme .gfield_error textarea {
border-color: var(--color-yellow) !important;
} .gform_wrapper.gravity-theme .gform_footer, 
.gform_wrapper.gravity-theme .gform_page_footer {
margin: 1.2rem 0 0 !important;
padding: 0 !important;
} .gform_wrapper.gravity-theme .gform_footer input {
margin: 0 !important;
padding: 1.2rem 3rem !important;
border: 0 !important;
border-radius: 5rem !important;
background-color: var(--color-yellow) !important;
font-size: 1.6rem !important;
text-transform: uppercase !important;
text-decoration: none !important;
color: var(--color-darkgrey) !important;
cursor: pointer;
} .gform_wrapper.gravity-theme .gform_validation_errors,
.gform_wrapper.gravity-theme .gfield_validation_message, 
.gform_wrapper.gravity-theme .validation_message {
display: none;
} .grecaptcha-badge {
visibility: hidden;
opacity: 0;
} @media (max-width: 641px) { .gform_wrapper.gravity-theme input:not([type=radio]):not([type=checkbox]):not([type=image]):not([type=file]) {
min-height: inherit !important;
padding: .6rem !important;
line-height: inherit !important;        
} .gform_wrapper.gravity-theme .gform_footer input {
width: 100% !important;
padding: .8rem 3rem !important;
}
}.post-section {
position: relative;
overflow: hidden;
}
.post-section::before {
content: '';
position: absolute;
z-index: -1;
top: -15rem;
right: -15rem;
width: 60rem;
height: 60rem;
background-image: url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/images/stamp-storytellingcampaigns-grey.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
animation: rotateSlowly 60s infinite linear;
}
.post-section img {
width: 100%;
margin-bottom: 3rem;
} @media (max-width: 1440px) { .post-section::before {
top: -12.5rem;
right: -25rem;
width: 50rem;
height: 50rem;
}
}
@media (max-width: 1180px) { .post-section::before {
top: -5rem;
right: -20rem;
width: 40rem;
height: 40rem;
}
}
@media (max-width: 767px) { .post-section::before {
top: 0;
right: -12rem;
width: 24rem;
height: 24rem;
}
}.footer-cta {
position: relative;
}
.footer-cta::before {
content: '';
position: absolute;
top: calc( 50% - 35rem );
right: -35rem;
width: 70rem;
height: 70rem;
background-image: url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/images/stamp-storytellingcampaigns-grey.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
animation: rotateSlowly 60s infinite linear;
}
.footer-cta .container {
position: relative;
z-index: 1;
padding: 20rem 0;
text-align: center;
}
.footer-cta h3 {
font-size: clamp( 5rem, 3.75vw, 6rem );
} .word-carousel {
opacity: 0;
animation: fade-in-out 2s infinite;
}
@keyframes fade-in-out {
1%, 99% {
opacity: 0;
}
21%, 79% {
opacity: 1;
}
} .other-ticker {
padding-left: 0;
padding-right: 0;
overflow: hidden;
}
.other-ticker .ticker {
display: block;
font-family: 'Agrandir';
font-size: clamp( 19rem, 14.375vw, 23rem );    
font-weight: 400;
white-space: nowrap;
color: #393939;
} @media (max-width: 1440px) { .footer-cta::before {
top: calc( 50% - 28rem );
right: -28rem;
width: 56rem;
height: 56rem;
}
.footer-cta h3 {
font-size: clamp( 3.5rem, 3.889vw, 5.6rem );
} .other-ticker .ticker {
font-size: clamp( 12rem, 13.194vw, 19rem );
}
}
@media (max-width: 1180px) { .footer-cta::before {
top: calc( 50% - 25rem );
right: -25rem;
width: 50rem;
height: 50rem;
}
.footer-cta .container {
padding: 15rem 0;
}
}
@media (max-width: 1024px) { .other-ticker .ticker {
font-size: 12rem;
}
}
@media (max-width: 767px) { .footer-cta::before {
top: calc( 50% - 17rem );
right: -17rem;
width: 34rem;
height: 34rem;
}
.footer-cta .container {
padding: 13rem 0;
}
.footer-cta h3 {
font-size: 3.5rem;
}
}.mobile-menu {
position: fixed;
z-index: 20;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
background-color: var(--color-darkgrey);
overflow: hidden;
display: none;
}
.mobile-menu::before {
content: '';
position: absolute;
right: -17.5rem;
bottom: -35rem;
width: 70.1rem;
height: 70rem;
background-image: url(//conceptgod.nl/wp-content/themes/conceptgod-theme/assets/images/stamp-storytellingcampaigns-grey.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
animation: rotateSlowly 60s infinite linear;
} .mobile-menu .header {
position: relative;
z-index: 21;
}
.mobile-menu .header .logo-wrapper {
position: absolute;
top: 3rem;
left: var(--grid-padding);
width: 14rem;
height: 14rem;
}
.mobile-menu .header .logo-wrapper a {
display: flex;
}
.mobile-menu .header .logo-wrapper img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.mobile-menu .header .close {
position: absolute;
top: 3rem;
right: var(--grid-padding);
width: 5rem;
height: 5rem;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.mobile-menu .header .close img {
width: 2.2rem;
height: 2.2rem;
} .mobile-menu .main {
position: relative;
z-index: 1;
min-height: 100%;
padding: 0 var(--grid-padding);
display: flex;
align-items: center;
}
.mobile-menu .main .container {
padding: 14rem 0;
display: grid;
grid-template-columns: 2fr 1fr;
} .mobile-menu .main ul.menu {
list-style-type: none;
padding: 0;
}
.mobile-menu .main ul.menu li:not(:first-child) {
margin-top: 2rem;
}
.mobile-menu .main ul.menu a {
font-size: clamp( 4rem, 5.625vw, 9rem );
line-height: .9;
font-family: 'Agrandir';
font-weight: 400;
color: #575757;
text-decoration: none;
}
.mobile-menu .main ul.menu a:hover,
.mobile-menu .main ul.menu li.current-menu-item a {
color: white;
} .mobile-menu .main .container {
line-height: 2;
color: white;
}
.mobile-menu .main .col:not(:first-child) {
margin-top: 3rem;
}
.mobile-menu .main h4 {
color: #777;
}
.mobile-menu .main .contact-wrapper a {
color: white;
text-decoration: none;
}
.mobile-menu .main .contact-wrapper a:hover {
text-decoration: underline;
} @media (max-width: 1440px) {  .mobile-menu .header .logo-wrapper {
width: 12rem;
height: 12rem;
}
}
@media (max-width: 767px) { .mobile-menu::before {
right: -18rem;
bottom: -9rem;
width: 36rem;
height: 36rem;
} .mobile-menu .header .logo-wrapper {
top: 1.5rem;
width: 10rem;
height: 10rem;
}
.mobile-menu .header .close {
top: 1.5rem;
width: 4rem;
height: 4rem;
}
.mobile-menu .header .close img {
width: 1.8rem;
height: 1.8rem;
} .mobile-menu .main .container {
padding: 5rem 0;
display: block;
} .mobile-menu .main ul.menu li {
text-align: center;
}
.mobile-menu .main ul.menu a {
font-size: 4rem;
line-height: 1;
} .mobile-menu .main .contact-wrapper {
display: none;
}
}