:root {
--col1: 300px;
--grijs: #f7f7f7;
--groen: #009f39;
--zwart: #303030;
}
body {
width: 100vw;
overflow-x: hidden;
}
.ttp_header {
width: 100vw;
min-height: 700px;
height: calc(100vh - 100px);
max-height: 900px;
display: grid;
grid-template-columns: var(--col1) 1fr;
grid-gap: 0px;
background-color: var(--grijs);
}
.ttp_header_col {}
.ttp_header_intro {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
padding-left: 30px;
}
.ttp_header_col.ttp_header_intro>* {
width: 160px;
}
.ttp_header_intro>* {
font-family: 'Exo', sans-serif;
font-size: 17px;
text-align: left;
line-height: 42px !important;
color: #5e5e5e;
padding: 0;
}
div#ttp_diensten_home {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.ttp_header_dienst {
position: relative;
background: radial-gradient(circle, #afafaf 0%, #efefef00 60%) !important;
}
.ttp_header_dienst>h2 {
font-family: 'Exo', sans-serif;
color: #636363 !important;
font-size: 43px;
font-weight: 800;
margin: 0px !important;
position: absolute;
left: 10px;
top: 10px;
width: 100%;
}
.ttp_header_dienst>h2:last-of-type {
font-weight: 500;
left: 10px;
top: 50px;
}
.ttp_header_dienst_img {
position: absolute;
width: 100%;
height: 75%;
bottom: 0px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.ttp_sectie {
width: 100vw;
display: grid;
grid-template-columns: var(--col1) 1fr;
grid-gap: 0px;
}
.ttp_sectie_col1 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto minmax(300px, 1fr);
background-color: #0b0b0b;
}
.ttp_sectie_titel {
background-color: var(--groen);
padding: 15px;
}
.ttp_sectie_titel>h2 {
margin: 0px;
padding: 0px;
font-size: 25px !important;
letter-spacing: 1px !important;
font-weight: 600 !important;
font-family: 'Exo', sans-serif;
color: #fff !important;
line-height: 30px;
text-align: right;
}
.ttp_sectie_cover {
background-color: #808080;
background-size: cover;
max-height: 500px;
background-position: center;
}
.ttp_sectie_col2 {
display: flex;
padding: 20px 10%;
align-content: center;
align-items: stretch;
justify-content: center;
flex-direction: column;
flex-wrap: nowrap;
}
.ttp_sectie_row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 35px;
}
.ttp_home_element {
padding: 15px;
display: flex;
flex-direction: column;
align-content: center;
align-items: stretch;
justify-content: flex-start;
gap: 20px;
}
.ttp_home_element>h3 {
font-family: 'Exo', sans-serif;
font-size: 23px;
color: #636363 !important;
text-align: center;
}
.ttp_home_element>span>p {
font-family: 'Exo', sans-serif;
font-size: 15px;
color: #8a8a8a !important;
line-height: 28px;
text-align: left;
padding-bottom: 5px !important;
}
.ttp_sectie_image {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 80px;
}
.ttp_teamsectie>.ttp_home_element {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
padding: 0px;
padding-top: 10px;
}
.ttp_team {
width: 100%;
background-image:  url(//ttpreclame.nl/wp-content/uploads/2023/01/TTP-banner-wit-2023-V2-1.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
}
.ttp_sectie_row.ttp_teamsectie {
height: calc(100% + 40px) !important;
}
.ttp_teamsectie>.ttp_home_element>p {
text-align: center;
margin-top: 10px;
}
@media only screen and (max-width: 1100px) {
.ttp_header_dienst>h2 {
font-size: 28px;
}
}
@media only screen and (max-width: 800px) {
.ttp_header_intro {
margin-top: 30px;
}
.ttp_header {
max-height: auto !important;
height: unset !important;
}
.ttp_header,
.ttp_sectie {
grid-template-columns: 1fr;
grid-template-rows: 200px 1fr;
}
.ttp_header_col.ttp_header_intro>* {
width: 100%;
}
.ttp_sectie_col1 {
grid-template-columns: 200px 1fr;
grid-template-rows: 1fr;
display: grid;
align-items: stretch;
}
.ttp_home_element {
grid-template-rows: auto 220px !important;
}
.ttp_sectie_titel {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
}
.ttp_header_dienst>h2 {
font-size: 26px;
}
.ttp_header_dienst>h2:last-of-type {
top: 33px;
}
div#ttp_diensten_home {
min-height: 700px;
}
}
@media only screen and (max-width: 600px) {
.ttp_header {
padding-top: 100px;
max-height: unset !important;
height: unset !important;
}
body{
}
div#ttp_diensten_home {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
}
.ttp_header, .ttp_sectie {
grid-template-rows: auto minmax(300px, 1fr);
}
.ttp_sectie_col1 {
grid-template-columns: 1fr;
grid-template-rows: 1fr 180px;
}
.ttp_team {
grid-template-rows: auto 120px !important;
width: calc(100% + 50px);
margin-left: -25px;
}
.ttp_sectie_titel>h2 {
text-align: center;
}
div#ttp_diensten_home>* {
min-height: 200px;
}
.ttp_header_intro>* {
padding: 10px;
}
}
.footer_content {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
padding-top: 10px !important;
align-items: stretch;
}
.footer_content>* {
box-sizing: border-box;
padding: 20px;
}
.footer_content>.cta>.telefoon {
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
}
.footer_content>*>*>h4,
.footer_content>*>h4 {
font-family: 'Exo', sans-serif;
font-size: 23px;
font-weight: 400;
margin-top: 0px !important;
margin-bottom: 10px !important;
grid-column: 1 / span 2;
}
.offerte_aanvragen>span,
.footer_content>.cta>.telefoon>a {
font-family: 'Exo', sans-serif;
font-size: 20px;
margin-left: 20px;
line-height: 40px;
color: #009F39 !important;
cursor: pointer;
}
.openingstijden {
margin-top: 10px;
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 50px 30px 30px 30px;
}
.offerte_aanvragen {
float: left;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
margin-top: 20px;
width: 100%;
}
.offerte_aanvragen>span {
text-align: center;
margin: 0px !important;
}
.offerte_aanvragen>img {
width: 50px;
margin: auto !important;
}
.cta>span {
display: grid;
grid-template-columns: 30px 1fr;
grid-gap: 10px;
margin-bottom: 10px;
align-items: center;
}
.cta>span>a {
font-size: 16px;
font-family: 'Exo', sans-serif;
color: rgb(68, 68, 68);
font-weight: 600;
}
.ttpd_header {
width: 100vw;
display: grid;
grid-template-columns: 1fr 1fr;
background-color: var(--grijs);
}
.ttpd_header>.ttpd_col>h1 {
font-family: 'Exo', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 60px;
line-height: 45px;
}
.ttpd_header>.ttpd_col>h1:last-of-type {
font-weight: 400;
}
.ttpd_col {
display: flex;
flex-direction: column;
align-content: center;
align-items: stretch;
justify-content: center;
padding-top: 100px;
padding-bottom: 100px;
}
.ttpd_col>* {
text-align: right;
font-family: 'Exo', sans-serif;
font-size: 20px;
}
.ttpd_col>*>span>strong,
.ttpd_col>*>strong {
font-weight: 600 !important;
color: #636363 !important;
}
.ttpd_col:first-of-type {
align-items: end;
}
.ttpd_col:first-of-type>p {
max-width: 600px;
}
.ttpd_section {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
}
.ttd_bekijken>img,
.ttd_cta>img {
width: 30px;
margin: 0px 10px;
}
.ttd_cta,
.ttd_bekijken {
padding: 20px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
font-size: 20px;
line-height: 30px;
font-family:
font-weight: 600;
padding-top: 40px;
padding-bottom: 40px;
background-color: white;
}
.ttd_bekijken {
background-color: var(--zwart);
color: white;
}
.ttd_bekijken:hover,
.ttd_cta:hover {
filter: brightness(0.7) !important;
cursor: pointer;
}
.ttp_dienst:nth-child(1) {
animation-delay: 100ms;
}
.ttp_dienst:nth-child(2) {
animation-delay: 150ms;
}
.ttp_dienst:nth-child(3) {
animation-delay: 200ms;
}
.ttp_dienst:nth-child(4) {
animation-delay: 250ms;
}
.ttp_dienst:nth-child(5) {
animation-delay: 300ms;
}
.ttp_dienst:nth-child(6) {
animation-delay: 350ms;
}
.ttp_dienst:nth-child(7) {
animation-delay: 400ms;
}
.ttp_dienst:nth-child(8) {
animation-delay: 450ms;
}
.ttp_dienst:nth-child(9) {
animation-delay: 500ms;
}
.ttp_dienst:nth-child(10) {
animation-delay: 550ms;
}
.ttp_dienst:nth-child(11) {
animation-delay: 600ms;
}
.ttp_dienst:nth-child(12) {
animation-delay: 650ms;
}
.cta>span {
cursor: pointer;
}
.ttp_dienst {
cursor: pointer;
}
.ttp_dienst>* {
transition: all 500ms cubic-bezier(0.675, -0.215, 0.180, 1.345); transition-timing-function: cubic-bezier(0.675, -0.215, 0.180, 1.345); }
.ttp_dienst:hover>.ttp_header_dienst_img {
height: 90%;
}
.ttp_dienst:hover>h2 {
transform: translateY(20px);
}
.a_1 {
animation-delay: 100ms;
}
.a_2 {
animation-delay: 200ms;
}
.a_3 {
animation-delay: 300ms;
}
.a_4 {
animation-delay: 400ms;
}
.a_5 {
animation-delay: 500ms;
}
.ttpd_col>h1 {
color: #4b4b4b;
}.ttp_menu {
position: fixed;
top: 0px;
left: 0px;
width: 250px;
padding: 20px;
height: 100vh;
background-color: var(--zwart);
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
transform: translateX(-250px);
z-index: 9999999999999999999999;
}
.ttp_menu > .ttp_menu_logo {
width: 190px;
height: 210px;
margin-bottom: 20px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: url(//ttpreclame.nl/wp-content/uploads/2022/11/ttp-volledig-blokje-compressed.png);
}
.ttp_menu > .ttp_menu_items {
list-style-type: none!important;
padding: 0px;
margin: 0px;
width: 190px;
}
.ttp_menu > .ttp_menu_items > li{
list-style-type: none!important;
padding: 0px;
margin: 0px;
margin-bottom: 10px;
color: white;
font-family: 'Exo', sans-serif;
font-size: 15px;   
}
.ttp_menu > .ttp_menu_items > li > a{
color: white;
font-weight: 500;
font-size: 16px;
}
.ttp_badge{
z-index: 999999999999999;
top: 35px;
left: 35px;
width: 160px;
height: 180px;
position:fixed;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
grid-gap: 15px;
transition: all 400ms cubic-bezier(0.265, 0.940, 0.720, 0.980); transition-timing-function: cubic-bezier(0.265, 0.940, 0.720, 0.980); opacity: 1;
}
.ttp_badge_mini{
width: 100px;
grid-gap: 6px;
}
.ttp_badge_mini > .ttp_menu_btn{
font-size: 16px;
}
.ttp_menu_btn{
background-color: red;
color: white;
padding: 15px;
border-radius: 10px;
font-family: 'Exo', sans-serif;
position: relative;
background-color: #fff!important;
padding-left: 50px;
font-size: 25px;
color: #404040;
font-weight: 600;
cursor: pointer;
}
.ttp_menu_btn:after {
content: "";
background-image: url(//ttpreclame.nl/wp-content/uploads/2022/11/menu.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: absolute;
filter: saturate(0);
left: 10px;
top: 15px;
width: 30px;
height: 25px;
}
#et-main-area, .ttp_badge , .ttp_menu , .ttp_page_fade, .ttp_badge_mini > .ttp_menu_btn{
transition: all 400ms cubic-bezier(0.265, 0.940, 0.720, 0.980); transition-timing-function: cubic-bezier(0.265, 0.940, 0.720, 0.980); }
.ttp_move_page_menu{
transform: translateX(250px);
}
.ttp_move_badge{
transform: translateX(350px);
opacity: 0;
}
.ttp_menu_show{
transform: translateX(0px);
}
.ttp_page_fade{
background-color: rgba(0,0,0,0.4);
position: fixed;
left: 250px;
top: 0px;
z-index: 99999999999;
width: calc(100vw + 250px);
height: 100vh;
opacity: 0;
pointer-events: none;
transform: translate(-250px);
}
.ttp_fade_show{
opacity: 1;
transform: translate(0);
pointer-events: all!important;
}
.ttp_close {
padding: 10px;
background-color: #1a1a1a;
color: #fff;
border-radius: 6px;
cursor: pointer;
position: absolute;
right: 15px;
top: 15px;
font-family: 'Exo', sans-serif;
font-size: 18px;
font-weight: 600;
cursor: pointer;
}
@media only screen and (max-width: 600px) {
.ttp_badge {
grid-template-columns: 55px 1fr;
grid-template-rows: 55px;
}
.ttp_menu_logo{
display: none;
}
}.ttp_form{
}
.ttp_form > h2{
font-family: 'Exo', sans-serif;
font-weight: 600!important;
font-size: 35px;
text-align: center!important;
color: grey;
}
.ttp_information_basic {
float: left;
width: 100%;
position: relative;
margin-bottom: 16px!important;
}
.ttp_information_extended, .ttp_information_basic {
margin-top: 0px!important;
display: grid;
grid-gap: 16px;
grid-template-columns: 1fr 1fr;
}
.span2{
grid-column: 1 / span 2!important;
}
.ttp_input, .ttp_cover {
background-color: #fff!important;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: stretch;
position: relative;
cursor: pointer;
}
.ttp_cover > span,
.ttp_input > span{
font-family: 'Exo', sans-serif;
font-weight: 600!important;
font-size: 16px!important;
}
.cover_big,.cover_small{
font-family: 'Exo', sans-serif;
font-weight: 800;
font-size: 20px;
}
.cover_small{
font-weight: 300;
}
.ttp_cover > span{
position:Absolute;
left: 0px;
top: 0px;
}
.ttp_input > textarea, .ttp_input > input[type="text"] {
margin-top: 5px!important;
border-radius: 5px!important;
border: 2px solid #919191!important;
padding: 7px;
}
.ttp_input > textarea{
padding: 5px!important;
}
.ttp_cover {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-end;
align-content: center;
justify-content: center;
}
.cover_big, .cover_small {
font-size: 38px;
line-height: 34px;
}
.ttp_submit {
grid-column: 3 / span 1;
font-size: 23px!important;
font-family: 'Exo', sans-serif;
font-weight: 600!important;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
padding-top: 30px!important;
padding-bottom: 30px!important;
cursor: pointer;
}
.ttp_submit > span{
color: white!important;
font-size: 20px!important;
font-family: 'Exo', sans-serif;
font-weight: 600!important;
}
.ttp_submit > img{
height: 35px!important;
margin-left: 10px!important;
}
.ttp_submit:hover{
filter: brightness(0.9);
}
.spinner{
position:absolute;
top: 5px;
right: 5px;
height: 24px;
width: 24px;
animation: rotation 2s infinite linear;
transition: all 500ms cubic-bezier(0.885, 0.045, 0.045, 0.930); transition-timing-function: cubic-bezier(0.885, 0.045, 0.045, 0.930); }
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
.ttp_form > * {
float: none!important;
}
.ttp_submit {
float: right!important;
background-color: #009f39!important;
width: 286px;
height: 35px;
padding: 26px 0px!important;
margin: 10px!important;
position: relative;
}
.ttp_submit > span{
color: white!important;
}
.ttp_submit > img{ }
.ttp_form {
display: block;
float: left;
width: 100%;
max-width: 1080px;
}
.ttp_form_body {
padding-top: 60px;
padding-bottom: 100px;
width: 100vw;
display: flex;
flex-direction: row;
float: left;
justify-content: center;
}
.ttp_portfolio {
display: grid;
grid-template-columns: 80px 1fr 80px;
max-width: 1500px;
background-color: var(--zwart);
width: 100%;
height: 100%;
grid-template-rows: 100%!important;
}
.ttp_portfolio > *{
width: 100%;
overflow: hidden;
}
.ttp_next, .ttp_prev{
background-size: 30px;
background-image: url(//ttpreclame.nl/wp-content/uploads/2022/11/driehoek.svg);
background-repeat: no-repeat;
background-position:center;
cursor: pointer;
}
.ttp_prev{
transform: rotate(180DEG);
}
.ttp_next:hover, .ttp_prev:hover{
background-size: 40px;
filter: brightness(0.9);
}
.ttp_next:active, .ttp_prev:active{
background-size: 50px;
filter: brightness(0.8);
}
.ttp_slider_wrapper {
float: left;
width: 100%;
background-color: var(--zwart);
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
align-items: center;
position: relative;
}
.slick-list.draggable {
width: 100%;
height: 100%;
}
.slick-list.draggable {
width: 100%;
height: 100%;
position: relative;
}
@media only screen and (max-width: 700px)
{
.ttpd_header {
grid-template-columns: 1fr;
padding: 0px 20px;
display: flex;
flex-direction: column-reverse;
align-items: stretch;
padding-top: 100px!important;
}
.ttpd_col{
padding-top: 30px;
padding-bottom: 20px;
}
.ttpd_col , .ttpd_col > *  ,.ttpd_col:first-of-type{
align-items: start;
text-align: left;
animation-delay: 0s!important;
}
.ttpd_section {
display: flex;
flex-direction: column-reverse;
align-content: center;
align-items: stretch;
}
.ttp_portfolio {
margin-top: -1px;
grid-template-columns: 40px 1fr 40px;
}
div#app > * {
display: flex;
flex-direction: column;
padding-left: 20px;
padding-right: 20px;
}
.ttp_submit {
float: left!important;
width: calc(100% - 40px);
display: flex;
flex-direction: row!important;
justify-content: center;
margin-top: 20px!important;
margin: 20px 20px!important;
}
.ttpd_col:first-of-type{
margin-top: 40px!important;
}
.ttp_portfolio {
}
.ttp_portfolio > .ttp_next,
.ttp_portfolio > .ttp_prev{
display: block!important;
}
}
@media only screen and (max-width: 500px){
.ttpd_header>.ttpd_col>h1{
font-size: 55px;
}
}