/*=========================================================================
Colors
========================================================================== */
:root {
--clr--green: #5cdcb8;
--clr-orange: #f67a29;
--clr-blue: #33bee5;
--clr-yellow: #f9be20;
--clr-pink: #de5c8d;
--clr--green-transparent: #5cdcb882;
--clr-orang-transparent: #f67b2981;
--clr-blue-transparent: #33bee57d;
--clr-yellow-transparent: #f9bf2083;
--clr-pink-transparent: #de5c8e81;
--clr-black: #000;
--clr-white: #fff;
--theme-heading-color: var(--clr-black);
}
/*=========================================================================
Transitions
========================================================================== */
/*=========================================================================
Breakpoints
========================================================================== */
/*=========================================================================
Variabels
========================================================================== */
html, p, a, li, button {
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
color: var(--clr-black);
}
a {
text-decoration: none;
}
strong {
font-weight: 700;
}
.barlow-condensed-thin {
font-family: "Barlow Condensed", sans-serif;
font-weight: 100;
font-style: normal;
}
.barlow-condensed-extralight {
font-family: "Barlow Condensed", sans-serif;
font-weight: 200;
font-style: normal;
}
.barlow-condensed-light {
font-family: "Barlow Condensed", sans-serif;
font-weight: 300;
font-style: normal;
}
.barlow-condensed-regular {
font-family: "Barlow Condensed", sans-serif;
font-weight: 400;
font-style: normal;
}
.barlow-condensed-medium, h3, h4 {
font-family: "Barlow Condensed", sans-serif;
font-weight: 500;
font-style: normal;
}
.barlow-condensed-semibold {
font-family: "Barlow Condensed", sans-serif;
font-weight: 600;
font-style: normal;
}
.barlow-condensed-bold, h1, h2 {
font-family: "Barlow Condensed", sans-serif;
font-weight: 700;
font-style: normal;
color: var(--clr-black);
}
.barlow-condensed-extrabold {
font-family: "Barlow Condensed", sans-serif;
font-weight: 800;
font-style: normal;
}
.barlow-condensed-black {
font-family: "Barlow Condensed", sans-serif;
font-weight: 900;
font-style: normal;
}
.barlow-condensed-thin-italic {
font-family: "Barlow Condensed", sans-serif;
font-weight: 100;
font-style: italic;
}
.barlow-condensed-extralight-italic {
font-family: "Barlow Condensed", sans-serif;
font-weight: 200;
font-style: italic;
}
.barlow-condensed-light-italic {
font-family: "Barlow Condensed", sans-serif;
font-weight: 300;
font-style: italic;
}
.barlow-condensed-regular-italic {
font-family: "Barlow Condensed", sans-serif;
font-weight: 400;
font-style: italic;
}
.barlow-condensed-medium-italic {
font-family: "Barlow Condensed", sans-serif;
font-weight: 500;
font-style: italic;
}
.barlow-condensed-semibold-italic {
font-family: "Barlow Condensed", sans-serif;
font-weight: 600;
font-style: italic;
}
.barlow-condensed-bold-italic {
font-family: "Barlow Condensed", sans-serif;
font-weight: 700;
font-style: italic;
}
.barlow-condensed-extrabold-italic {
font-family: "Barlow Condensed", sans-serif;
font-weight: 800;
font-style: italic;
}
.barlow-condensed-black-italic {
font-family: "Barlow Condensed", sans-serif;
font-weight: 900;
font-style: italic;
}
h1{
font-size: 50px;
}
h2{
font-size: 40px;
}
h3{
font-size: 30px;
}
h4{
font-size: 20px;
}
@media (min-width: 768px) {
h1{
font-size: 64px;
}
h2{
font-size: 48px;
}
h3{
font-size: 36px;
}
h4{
font-size: 24px;
}
}
/* figures */
.figure, .figure-on-img img{
position: relative;
z-index: 1;
}
.figure::after, .figure-on-img img::after {
content: "";
display: inline-block;
padding: 8px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
z-index: -1;
right: 0;
right: -50px;
}
.figure-small::after, .figure-on-img-small img::after {
width: 30px;
height: 30px;
right:-30px;
}
.figure-big::after, .figure-on-img-big img::after {
width: 250px;
height: 250px;
right:-250px;
}
@media (min-width: 768px) {
.figure::after, .figure-on-img img::after{
width: 75px;
height: 75px;
right:-75px;
}
.figure-small::after, .figure-on-img-small img::after {
width: 50px;
height: 50px;
right:-50px;
}
.figure-big::after, .figure-on-img-big img::after {
width: 300px;
height: 300px;
right:-300px;
}
}
.figure-yellow::after, .figure-on-img-yellow img::after {
background-image: url('data:image/svg+xml,');
}
.figure-pink::after, .figure-on-img-pink img::after {
background-image: url('data:image/svg+xml,');
}
.figure-green::after, .figure-on-img-green img::after {
background-image: url('data:image/svg+xml,');
}
.figure-blue::after, .figure-on-img-blue img::after {
background-image: url('data:image/svg+xml,');
}
.figure-orange::after, .figure-on-img-orange img::after {
background-image: url('data:image/svg+xml,');
}
.arrow::after {
content: "";
display: block;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 25px;
height: 25px;
background-image: url('data:image/svg+xml,');
}
/* mask */
.mask-image img{
mask-image: url('https://talentprimair-live-d1de27bb949945f49f64-cadf8d3.divio-media.com/filer_public/36/9e/369e3638-e1b6-4c64-acb0-e1b8bc91fb56/mask.png');
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
/* Lists */
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
ul li {
display: flex;
gap: 8rem;
align-items: flex-start;
}
ul:not(.cms-toolbar-item ) li::before {
content: "";
background-image: url('data:image/svg+xml,');
width: 20px;
height: 20px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
/* Header */
ul li.nav-item::before{
content: none;
}
.icon-row{
display: none;
}
/* content */
main{
overflow: hidden;
width: 100%;
}
main > .container{
max-width: 100%;
}
.section-fullwidth{
}
.main-content{
margin: 0;
}
/* Hero's */
.hero-main-page .multicolumn2{
align-items: center;
}