@font-face { 
font-family: 'HelveticaNeue'; 
src: url(https://philippecolette.com/wp-content/themes/philippe-colette/fonts/HelveticaNeueLight.otf), url(https://philippecolette.com/wp-content/themes/philippe-colette/fonts/HelveticaNeueLight.woff) format('woff'); 
font-weight: 400; 
}
@font-face { 
font-family: 'HelveticaNeue'; 
src: url(https://philippecolette.com/wp-content/themes/philippe-colette/fonts/HelveticaNeueUltraLight.otf), url(https://philippecolette.com/wp-content/themes/philippe-colette/fonts/HelveticaNeueUltraLight.woff) format('woff'); 
font-weight: 100; 
}
@font-face { 
font-family: 'HelveticaNeue'; 
src: url(https://philippecolette.com/wp-content/themes/philippe-colette/fonts/HelveticaNeueThin.otf), url(https://philippecolette.com/wp-content/themes/philippe-colette/fonts/HelveticaNeueThin.woff) format('woff');  
font-weight: 200; 
}
@font-face { 
font-family: 'HelveticaNeue'; 
src: url(https://philippecolette.com/wp-content/themes/philippe-colette/fonts/HelveticaNeueMedium.otf), url(https://philippecolette.com/wp-content/themes/philippe-colette/fonts/HelveticaNeueMedium.woff) format('woff'); 
font-weight: 300; 
}
#wpadminbar {
z-index: 10;
}
:root {
--colorBasis1: #cc3333;
--colorBasis2: #3399cc;
}
.grecaptcha-badge{
visibility: hidden;
}
.page-id-139 main, .page-id-140 main{
padding: 5%;
} .scroll--wcreate {
width: 50px;
height: 50px;
background-color: #000;
border: 1px solid #000;
transition: 0.8s ease-in-out;
}
.scrollToTop {
position: fixed;
right: 2%;
bottom: 5%;
display: none;
transition: 0.5s ease;
z-index: 5;
}
a.scrollToTop svg {
width: 50px;
transition: 0.8s ease-in-out;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.pijl{
fill: #fff;
}
.scroll--wcreate:hover .pijl{
fill: #000 !important;
transition: 0.8s ease;
}
a.scrollToTop:hover .scroll--wcreate{
background-color: #fff;
border: 1px solid #000;
transition: 0.8s ease;
} body{
font-family: 'HelveticaNeue', Arial, Helvetica, sans-serif; 
font-size: 16px;
font-weight:200;
overflow-x: hidden;
}
#page-wrapper{
margin-top: 100px; }
.wrapper {
padding: 0px;
}
h1, .h1 {
font-size: 3vw;
margin-bottom: 2rem;
font-weight: 600;
}
h2, .h2 {
font-weight: 700;
font-size: 2.4vw;
margin-bottom: 1rem;
}
h3, .h3 {
font-weight: 700;
font-size: 1.2vw;
margin-bottom: 1rem;
}
.hero--bg{
height: 80vh;
background-size: cover;
background-repeat: no-repeat;
}
.hero--bg--small{
height: 40vh;
background-size: cover;
background-repeat: no-repeat;
}
img{width: 100%;}
.relative{
position:relative;
} .uppercase{text-transform: uppercase;}
.lowercase{text-transform: lowercase;}
.capitalize{text-transform: capitalize;}
.normal--case{text-transform: none;}
.align--right{text-align: right;}
.center{text-align: center;} a{
letter-spacing: 1px;
}
a.black{
color: #000 !important;
}
p, ul li {
font-size: 1vw;
letter-spacing: 1px;
}
.f--md{font-size:1.4vw}
.f--l{font-size:1.8vw}
.f--xl{font-size:2.5vw}
.f--xxl{font-size:3.5vw}
.m--i--r{position: relative;}
.v--c {
height: 100%;
justify-content: center;
display: flex;
flex-direction: column;
}
.wcreate--tekst{
font-size: 0.9vw;
margin-top: 2rem;
margin-bottom: 2rem;
}
.t--w{
color: #fff;
} button:focus {
outline: 0px dotted;
outline: 0px auto -webkit-focus-ring-color;
}
.knop--zwart {
color: #454545;
text-transform: uppercase;
background: transparent;
border: 1px solid #454545;
padding: 10px 30px;
font-size: 0.7vw;
font-weight: 600;
transition: 0.5s ease;
display: inline-block;
cursor: pointer;
font-weight:200;
position:relative;
}
.knop--zwart:hover {
color: #FFF;
text-transform: uppercase;
border: 1px solid #454545;
background: #454545;
text-decoration: none;
}
.knop--zwart svg {
position: absolute;
right: -10px;
top: 50%;
transition: 0.5s ease;
transform: translateY(-50%);
}
a.knop--zwart:hover svg {
top: 50%;
transition: 0.5s ease;
right: -20px;
transform: translateY(-50%);
}
.knop--wit {
color: #1D1B1B;
text-transform: uppercase;
background: #fff;
border: 1px solid #fff;
padding: 15px 30px;
font-size: 0.9vw;
font-weight: 600;
transition: 0.5s ease;
}
.knop--wit:hover {
color: #fff;
text-transform: uppercase;
border: 1px solid #fff;
background: #1D1B1B;
padding: 15px 30px;
font-size: 0.9vw;
text-decoration: none;
}
.knop--gewoon{
color: #000;
text-decoration: underline;
font-size: 0.9vw;
}
.knop--gewoon:hover{
color: #000;
text-decoration: none;
font-size: 0.9vw;
} .f--r{
display: flex;
flex-wrap: wrap;
}
.a--i {align-items: center;}
.a--str {align-items: stretch;}
.a--s {align-items: flex-start;}
.a--e {align-items: flex-end;}
.j--c {justify-content: center;}
.j--s {justify-content: flex-start;}
.j--e {justify-content: flex-end;}
.j--b{justify-content: space-between;}
.f--c {flex: 0.5;}
.f--c--2{flex: 0.2;}
.f--c--8{flex: 0.8;}
.f--c--4{flex: 0.4;}
.f--c--6{flex: 0.6;}
.f--c--3{flex: 0.3;}
.f--c--7{flex: 0.7} .p--0{padding: 0%;}
.p--2{padding:2%;}
.px--2, .pl--2{padding-left:2%;}    
.px--2, .pr--2{padding-right:2%;}
.py--2, .pt--2{padding-top:2%;}
.py--2, .pb--2{padding-bottom:2%;}
.p--5{padding:5%;}
.px--5, .pl--5{padding-left:5%;}
.px--5, .pr--5{padding-right:5%;}
.py--5, .pt--5{padding-top:5%;}
.py--5, .pb--5{padding-bottom: 5%;}
.p--10{padding:10%;}
.px--10, .pl--10{padding-left:10%;}
.px--10, .pr--10{padding-right:10%;}
.py--10, .pt--10{padding-top:10%;}
.py--10, .pb--10{padding-bottom: 10%;}
.p--15{padding:15%;}
.px--15, .pl--15{padding-left:15%;}
.px--15, .pr--15{padding-right:15%;}
.py--15, .pt--15{padding-top:15%;}
.py--15, .pb--15{padding-bottom: 15%;} .m--auto{margin: auto;}
.m--0{margin:0%;}
.mx--0, .ml--0{margin-left:0%;}
.mx--0, .mr--0{margin-right:0%;}
.my--0, .mt--0{margin-top:0%;}
.my--0, .mb--0{margin-bottom:0%;}
.m--2{margin:2%;}
.mx--2, .ml--2{margin-left:2%;}
.mx--2, .mr--2{margin-right:2%;}
.my--2, .mt--2{margin-top:2%;}
.my--2, .mb--2{margin-bottom:2%;}
.m--5{margin:5%;}
.mx--5, .ml--5{margin-left:5%;}
.mx--5, .mr--5{margin-right:5%;}
.my--5, .mt--5{margin-top:5%;}
.my--5, .mb--5{margin-bottom: 5%;}
.m--10{margin:10%;}
.mx--10, .ml--10{margin-left:10%;}
.mx--10, .mr--10{margin-right:10%;}
.my--10, .mt--10{margin-top:10%;}
.my--10, .mb--10{margin-bottom: 10%;} .h--100{height:100vh;}
.h--90{height:90vh;} .w--20{width:20%;}
.w--30{width:30%;}
.w--33{width:33.333%;}
.w--40{width:40%;}
.w--50{width:50%;}
.w--60{width:60%;}
.w--70{width:70%;}
.w--80{width:80%;}
.w--100{width:100%;} .bg--basis1{background-color: var(--colorBasis1);}
.bg--basis2{background-color:var(--colorBasis2);}
.bg--black{background-color: #000000;}
.bg--transparant{background-color: transparent;} .fit-cover{
width: 100%;
object-fit: cover;
}
.auto--size{
height:100%;
object-fit:cover;
} .animate--up{
position: inherit;
opacity: 0;
transition-property: opacity;
transition-duration: 3s !important;
transform: translate(0%, 1%);
}
.beweegtniet{
opacity: 1 !important;
margin-top: 0px;
transition: 5s ease;
-webkit-transition: 5s ease;
} .img--hero{
max-height: 1000px;
object-position: bottom;
}
.playfair{
font-family: "Playfair Display", serif;
}
h1.main-title {
background: #FFF;
padding: 5%;
position: absolute;
right: 0;
font-size: 6vw;
font-weight:100;
text-transform: uppercase;
font-family: "Playfair Display", serif;
width: 75vw;
text-align: center;
}
.tekst-hero{
position:absolute;
bottom: 4vw;
left:50%;
}
.text--background {
font-size: 9vw;
color: #E0E0E0;
line-height: 1.2;
position: absolute;
left: -2%;
bottom:10%;
}
.background--afwerking{
background: #F0F0F0;
position: absolute;
top: 20%;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.text-slider{
left: -10vw;
position: absolute;
top: -15vw;
z-index: 2;
font-size: 7vw;
line-height: 1;
color: #454545;
}
.owl-nav{
position: absolute;
left: 5%;
top: -80px;
}
button.owl-prev, .owl-next {
border: 1px solid #454545 !important;
width: 60px;
height: 60px;
border-radius: 50%;
margin-right:15px;
transition:all .3s ease;
}
button.owl-prev:hover, .owl-next:hover{
background:#454545 !important;
}
button.owl-prev:hover span, .owl-next:hover span{
color:#FFF !important;
}
button.owl-prev span, .owl-next span{
font-size: 2rem;
line-height: 1;
color:#454545 !important;
}
.slider-counter{
position: absolute;
bottom: 5%;
right: 0;
}
.arrow--down{
position: absolute;
right: 5vw;
bottom: 11vw;
}
.wpforms-container input::placeholder, .wpforms-container textarea::placeholder, .wpforms-container select::placeholder {
text-transform: uppercase;
color: #454545;
opacity: 1 !important;
font-family: 'Helvetica-Neue';
}
.wpforms-container select {
text-transform: uppercase !important;
color: #454545 !important;
opacity: 1 !important;
font-family: 'Helvetica-Neue' !important;
}
.wpforms-container select option{
text-transform: uppercase !important;
color: #454545 !important;
opacity: 1 !important;
font-family: 'Helvetica-Neue' !important;
}
.wpforms-submit {
background: #454545 !important;
border-radius: 0 !important;
float: right !important;
font-family: 'Helvetica-Neue' !important;
text-transform: uppercase !important;
} .scroll--clip img {
clip-path: inset(0 50%); } @media only screen and (max-width: 811px) {
.wcreate--tekst{
font-size: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;
}
body {
font-size: 1.2rem;
}
h1 {
font-size: 1.5rem;
margin-bottom: 2rem;
}
h2, .h2 {
font-weight: 700;
font-size: 1.8rem;
margin-bottom: 1rem;
}
h3, .h3 {
font-weight: 700;
font-size: 1.2rem;
margin-bottom: 1rem;
} .w--m--100{
width: 100%;
}
.w--m--50{
width: 50%;
} .f--c {
flex: auto;
width: 100%;
}
.f--c--2, .f--c--3, .f--c--4, .f--c--5, .f--c--6, .f--c--7 {
flex: auto;
width: 100%;
}
.column--reverse{
flex-direction: column-reverse;
} .p--m--0{
padding: 0px;
}
.pl--m--0{
padding-left:0;
}
.p--m--5{
padding: 5%;
}
.px--m--5, .pl--m--5{
padding-left:5%;
}
.px--m--5, .pr--m--5{
padding-right:5%;
}
.py--m--5, .pt--m--5{
padding-top:5%;
}
.py--m--5, .pb--m--5{
padding-bottom: 5%;
}
.pb--m--10{
padding-bottom:10%;
} .m--m--0{
margin: 0px;
}
.m--m--5{
margin: 5%;
} .knop--zwart {
font-size: 0.9rem;
}
.knop--zwart:hover {
font-size: 0.9rem;
}
.knop--wit {
font-size: 0.9rem;
}
.knop--wit:hover {
font-size: 0.9rem;
}
.knop--gewoon {
color: #000;
text-decoration: underline;
font-size: 0.9rem;
} p{font-size: 1rem;}
ul li{font-size: 1rem;}
.f--md{font-size:1.2rem;}
.f--l{font-size:1.4rem;}
.f--xl{font-size:2rem;}
.f--xxl{font-size:3rem;} .tekst-hero{
position:relative;
bottom:auto;
left:auto;
}
.arrow--down, .text--background{
display:none;
}
.background--afwerking{
top:10%;
}
.owl-nav{
right:0;
left:auto;
}
.slider-counter{
bottom:-15%;
}
.text-slider{
position:relative;
left:auto;
top:auto;
}
}