/* Theme Name: Reclamebureau RAM Theme URI: https:// Description: CSS Reclamebureau RAM Author: Reclamebureau RAM Author URI: https://www.reclamebureauram.nl/ Version: 1.1 */ /* ------------------------------------------------------------------------------------------ */ /* -------------------------------------- HEADER 05/2024 ------------------------------------ */ /* ------------------------------------------------------------------------------------------ */ .hione {background: url("images/RAM Reclamebureau feb 2024-8.jpg") no-repeat ; background-position: top; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 50%; height: 100%; position: absolute; /*top: 0;*/ right: 0; --bs-gutter-x: 0;} .hione::before {position: absolute; width: 100%; height: 100%; content: ""; /*background-color: var(--purple);*/ /*opacity: 0.45;*/} .hst1 {background: url("images/patroon-roze-op.png") no-repeat; background-size: auto; background-size: 100%; /*padding: 40px 0px;*/} .hitwo {background: url("images/RAM Reclamebureau feb_-8.jpg") no-repeat ; background-position: top; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 50%; height: 80%; position: absolute; /*top: 0;*/ right: 50px; --bs-gutter-x: 0; margin-top:10%; box-shadow: 10px 10px 5px #ccc;} .hst2 {background: url("images/patroon-wit.png") no-repeat; background-size: auto; background-size: 100%; /*padding: 40px 0px;*/} .wn3 {max-width: 1250px; /*margin: 0 auto;*/ -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; /*align-items: center;*/ height: 100%;} /* ------------------------------------------------------------------------------------------ */ /* --------------------------------- END HEADER 05/2024 ------------------------------------- */ /* ------------------------------------------------------------------------------------------ */ .cmplz-cookiebanner {width:auto !important;} /* --------- STANDARDS ------- */ .container_full {/* remember to set a width */margin-right: auto; margin-left: auto;} .container_size {/* remember to set a width */ margin-right: auto; margin-left: auto;} html,body {height:100%; margin:0; background: #fefefe; } body{position:relative; overflow-x: hidden; } body.home{overflow-x:hidden !important;} html,body, ul, p {font-family: 'Roboto-Thin', sans-serif !important; font-size: 20px; /*color: #949494;*/ font-weight:300; width:100%; height :100%;} div {font-family: 'Roboto-Thin', sans-serif !important; font-size: 15px; color: #000; font-weight:300; width:100%; } a {text-decoration: none !important;} p {height: unset !important;} b, strong {font-weight: 700;} .row.no-gutters {margin-right: 0; margin-left: 0;} .row.no-gutters > [class^="col-"],.row.no-gutters > [class*=" col-"] {padding-right: 0;padding-left: 0;} .no-padding {padding:0 !important;} .stdr {padding:200px 0px;} .stdrrow {max-width: 1024px; margin:0 auto;} /* --------- END ------- */ /* ------------ FONTS --------- */ @font-face { font-family: AktivGrotesk-Light; src: url(https://reclamebureauram.nl/wp-content/themes/ram24/fonts/AktivGrotesk-Light.ttf); font-weight: normal; font-display: swap; } @font-face { font-family: AktivGrotesk-Bold; src: url(https://reclamebureauram.nl/wp-content/themes/ram24/fonts/AktivGrotesk-Bold.ttf); font-weight: normal; font-display: swap; } @font-face { font-family: AktivGrotesk-Black; src: url(https://reclamebureauram.nl/wp-content/themes/ram24/fonts/AktivGrotesk-Black.ttf); font-weight: normal; font-display: swap; } @font-face { font-family: AktivGrotesk-Regular; src: url(https://reclamebureauram.nl/wp-content/themes/ram24/fonts/AktivGrotesk-Regular.ttf); font-weight: normal; font-display: swap; } @font-face { font-family: Continuo; src: url(https://reclamebureauram.nl/wp-content/themes/ram24/fonts/Continuo.ttf); font-weight: normal; font-display: swap; } @font-face { font-family: Roboto-Light; src: url(https://reclamebureauram.nl/wp-content/themes/ram24/fonts/Roboto-Light.ttf); font-weight: normal; font-display: swap; } @font-face { font-family: Roboto-Medium; src: url(https://reclamebureauram.nl/wp-content/themes/ram24/fonts/Roboto-Medium.ttf); font-weight: normal; font-display: swap; } /* --------- END ------- */ /* ------------ COLORS --------- */ :root { --purple: #572a71 /*#5f00c8*/; --purplelight: #d9bdf9; --purpleop: #5f00c85e; --green: #00d441 /*#01ff54*/; --greenlight: #b3f6c9; --greenop: #01ff545e; --pink: /*#e31969 ORG*/ #ff007e; --pinklight: #ffc1e0; --pinkop: #ff007e5e; --white: #fff; --black: #000; --blackop: #0000005e; --grey: #efefef; --shadow-color: #FF9E9E; --shadow-color-light: white; --sandybeach: #faf0e6; --violet: #f3f3fd; } .bpurple {background-color: var(--purple);} .bpurplelight {background-color: var(--purplelight);} .bgreen {background-color: var(--green);} .bgreenlight {background-color: var(--greenlight);} .bgreenop {background-color: var(--greenop);} .bpink {background-color: var(--pink);} .bpinklight {background-color: var(--pinklight);} .bpinkop {background-color: var(--pinkop);} .bwhite {background-color: var(--white);} .bblack {background-color: var(--black);} .bgrey {background-color: var(--grey);} .bsandybeach {background-color: var(--sandybeach);} .tpurple {color: var(--purple)!important;} .tpurplelight {color: var(--purplelight);} .tgreen {color: var(--green);} .tgreenlight {color: var(--greenlight);} .tpink {color: var(--pink);} .tpinklight {color: var(--pinklight);} .twhite, .hwhite, .pwhite {color: var(--white);} .twhite a {color: var(--black); text-decoration: underline !important;} .hwhite a {color: var(--white); text-decoration: underline !important;} .pwhite a {color: var(--white); text-decoration: underline !important;} .hwblack {color: var(--black)!important;} h1.hwblack {color: var(--black)!important; font-size: 42px !important;} .hwblack h2 {color: var(--black)!important; font-size: 22px;} .hwblack a {color: var(--black)!important; text-decoration: underline !important;} .hwblack p {color: var(--black)!important; } .twhite a:hover, .hwhite a:hover, .pwhite a:hover {color: var(--white); text-decoration: underline !important;} .tblack {color: var(--black);} .tsandybeach {background-color: var(--sandybeach);} /* --------- END ------- */ /* ------------ SCROLL --------- */ @keyframes scroll_2 { 0% { transform: translateY(0); opacity: 1; } 25% { opacity: 1; } 75% { transform: translateY(.75em); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } } .example.example--2 {position: absolute; bottom: 40px; z-index: 2;margin: 0 auto; left:50%;} .example--2 {background:transparant;} .scroll-icon__dot { display: block; position: absolute; left: 50%; background: #fff; height: 0.8em; width: 0.8em; top: .6em; margin-left: -.4em; border-radius: 50%; transform-origin: top center; backface-visibility: hidden; animation: scroll_2 2s ease-out infinite; } .scroll-icon { display: block; position: relative; height: 4em; width: 2em; border: .25em solid #fff; border-radius: 1em; } /* --------- END ------- */ /* ------------ BUTTONS MENU HOMEPAGE --------- */ .icon-barhd {text-align:right; margin-top:10px; right: 0px /*10px*/; position:absolute;} .iconhd {background-color: var(--green); padding:35px 15px 15px; color: #fff;} .iconhd:hover {background-color: var(--pink) !important; color: var(--white); } .iconhd .fa-whatsapp {font-size:2.5em !important;} .emalhd {background-color: var(--green); padding:15px /*35px*/ 15px 15px; color: var(--white); position: absolute; top:150px; right: 0px;} .emalhd:hover {background-color: var(--pink) !important; color: var(--white);} .emalhd .fa-envelope-open {font-size:2.5em !important;} .phnehd {background-color: var(--green); padding:15px 19px 15px; color: var(--white); position: absolute; top:225px; right: 0px;} .phnehd:hover {background-color: var(--pink) !important; color: var(--white);} .porthd {background-color: var(--green); padding:15px 17px 15px; color: var(--white); position: absolute; top:293px; right: 0px;} .porthd:hover {background-color: var(--pink) !important; color: var(--white);} /* --------- END ------- */ /* ------------ BUTTONS MENU HOMEPAGE PAYOFF --------- */ .icon-bardk {width: 100%; /* Full-width */ overflow: unset; /*CHANGED 02122022 */ /* auto Overflow due to float */ justify-content: center; display: flex; height: unset; margin-top:40px;} .icon-bardk a {float: left; text-align: center; } .icondk {background-color: var(--pink); padding:20px; margin-right:10px; color: #fff;} .icondk:hover {background-color: #fff !important; color: var(--pink) !important;} .emaldk {background-color: #fff; padding:20px; margin-right:10px; color: var(--pink);} .emaldk:hover {background-color: var(--pink) !important; color: #fff !important;} .phnedk {background-color: #fff; padding:20px; margin-right:10px; color: var(--pink);} .phnedk:hover {background-color: var(--pink) !important; color: #fff !important;} .portdk {background-color: #fff; padding:20px; margin-right:10px; color: var(--pink);} .portdk:hover {background-color: var(--pink) !important; color: #fff !important;} /* --------- END ------- */ /* ------------ BUTTONS MENU PAGE --------- */ .icon-bardkp {text-align:right; margin-top:10px; right: 0px; position:absolute;} .icondkp {background-color: var(--pink); padding:35px 15px 15px; color: var(--white);} .icondkp:hover {background-color: var(--green) !important; color: var(--white); } .icondkp .fa-whatsapp {font-size:2.5em !important;} .emaldkp {background-color: var(--purple); padding:15px /*35px*/ 15px 15px; color: var(--white); position: absolute; top:150px; right: 0px;} .emaldkp:hover {background-color: var(--pink) !important; color: var(--white);} .emaldkp .fa-envelope-open {font-size:2.5em !important;} .phnedkp {background-color: var(--purple); padding:15px 19px 15px; /*padding:35px 15px 15px;*/ color: var(--white); position: absolute; top:225px; right: 0px;} .phnedkp:hover {background-color: var(--pink) !important; color: var(--white);} .portdkp {background-color: var(--purple); padding:15px 17px 15px; /*padding:35px 15px 15px;*/ color: var(--white); position: absolute; top:293px; right: 0px;} .portdkp:hover {background-color: var(--pink) !important; color: var(--white);} /* --------- END ------- */ /* ------------ HEADLINES --------- */ h1 {font-family: 'AktivGrotesk-Black'; font-size: 160px; color: #fff; } h1.tpw {text-align: center;} h1.tpw a{text-decoration: none; color: var(--green); text-align: center; /*font-family: 'Continuo' ; font-size: 170px;*/} h1.pg {color: var(--black);} h1.sphead {font-family: 'Continuo' ; font-size: 90px; /*padding: 40px 15px;*/} h1.hcasin {font-family: 'Continuo' ; font-size: 120px; margin-bottom: 60px; color: #fff;} h1.hdr {font-family: 'AktivGrotesk-Black'; font-size: 100px; text-transform: uppercase;} h2 {font-family: 'AktivGrotesk-Black'; font-size: 80px; color: #fff; text-transform: uppercase;} h2.rtm {} h2.us {font-family: 'AktivGrotesk-Black'; font-size: 100px; color: var(--green);} h2.acta {font-family: 'AktivGrotesk-Black'; font-size: 80px; color: var(--purple);} h2.tca {font-family: 'AktivGrotesk-Black'; font-size: 60px; color: var(--white);} h2.caco {font-size: 40px;} h2.cacoli {font-size: 24px; text-transform: none;} h3 {font-family: 'Continuo' ; font-size: 60px; color: var(--white); } h3.tmtit {font-family: 'neonoir', sans-serif; font-size: 70px; color: var(--white); position:absolute; bottom: 80px; left:0; right:0; margin-left:auto; margin-right:auto; transform: translate(0px, -5px) rotate(-6deg);} h3.cas {font-family: 'neonoir', sans-serif; font-size: 70px; /*color: var(--black)*/ /*#fff*/; transform: translate(0px, -5px) rotate(-6deg); margin-bottom: 40px; } h3.carus {color: var(--pink); letter-spacing: 10px; } h3.stca {font-family: 'AktivGrotesk-Bold', sans-serif;font-size: 24px; color: var(--white); } h3.tmusp {font-family: 'AktivGrotesk-Black', sans-serif;font-size: 48px; color: var(--white); text-transform: uppercase;} h3.tmusp1 {font-family: 'AktivGrotesk-Black', sans-serif;font-size: 48px; color: var(--purple); text-transform: uppercase;} h3.tmusp2 {font-family: 'AktivGrotesk-Black', sans-serif;font-size: 48px; color: var(--green); text-transform: uppercase;} h3.cntusp {font-family: 'AktivGrotesk-Black', sans-serif;font-size: 48px; text-transform: uppercase;padding:40px 15px 60px;} h3.casoow {font-family: 'Continuo', sans-serif;font-size: 48px; text-transform: uppercase;padding:40px 15px 60px;} h4 {font-family: 'Continuo' ; font-size: 30px; /*color: var(--black);*/ } h4.cntaf {font-family: 'AktivGrotesk-Black', sans-serif;font-size: 32px; text-transform: uppercase; padding-bottom: 20px;} h4.casoow {font-family: 'AktivGrotesk-Black', sans-serif;font-size: 32px; text-transform: uppercase; padding-bottom: 20px;} h5 {font-family: 'Roboto-Light' ; font-size: 20px; font-weight: 700; color: var(--white);} h5.dcarus {font-family: 'Roboto-Medium' ;letter-spacing: 2.5px; font-size: 40px; text-transform: uppercase; color: var(--white);} h5.bcta {font-family: 'Continuo' ; font-size: 50px; color: var(--pink); letter-spacing: 10px;} h5.fpri {font-family: 'Roboto-Light' ;letter-spacing: 2.5px; font-size: 24px; text-transform: uppercase; color: var(--purple);} h5.fdis {font-family: 'AktivGrotesk-Regular' ;letter-spacing: 2px; font-weight: 400; font-size: 14px; color: #949494;} h6 {font-family: 'Roboto-Light' ; font-size: 22px; font-weight: 400; color: #fff; letter-spacing: 1.5px; margin:40px 0px;} h6.pcarus {font-family: 'Roboto-Light' ; font-size: 18px; font-weight: 400; color: #fff; letter-spacing: 1.5px; margin:40px 0px;} /* --------- END ------- */ /* ------------ SPECIAL CSS --------- */ .typewrite > .wrap {animation: typing 3.5s steps(60, end), blink-caret .65s step-end 5; white-space: nowrap; border-right: .15em solid transparent; padding-top:-15px;} .neonText {animation: flicker 1.5s steps(15, end); animation-iteration-count: infinite; animation-timing-function: linear; /*color: #fff;*/} .neonTextwh {animation: flickerwh 1.5s steps(15, end); animation-iteration-count: infinite; animation-timing-function: linear; /*color: #fff;*/} .neonTextpu {animation: flickerpu 1.5s steps(15, end); animation-iteration-count: infinite; animation-timing-function: linear; /*color: #fff;*/} /* Flickering animation neonText */ @keyframes flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { text-shadow: 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 2px #ff007e, 0 0 2px #ff007e, 0 0 2px #ff007e, 0 0 3px #ff007e, 0 0 3px #ff007e; } 20%, 24%, 55% { text-shadow: none; } } /* Flickering animation neonTextwh */ @keyframes flickerwh { 0%, 18%, 22%, 25%, 53%, 57%, 100% { text-shadow: 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 3px #fff; } 20%, 24%, 55% { text-shadow: none; } } /* Flickering animation neonTextwh */ @keyframes flickerpu { 20%, 24%, 55% { text-shadow: 0 0 1px var(--purple), 0 0 1px var(--purple), 0 0 1px var(--purple), 0 0 2px var(--purple), 0 0 2px var(--purple), 0 0 2px var(--purple), 0 0 3px var(--purple), 0 0 3px var(--purple); } 0%, 18%, 22%, 25%, 53%, 57%, 100% { text-shadow: none; } } /* --------- END ------- */ /* ---------------- ANIMATIONS ---------------- */ @keyframes neon { 0% { text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light), 0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light), 0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color); } 50% { text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light), 0 0 5px var(--shadow-color-light), 0 0 15px var(--shadow-color-light), 0 0 25px var(--shadow-color-light), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 60px var(--shadow-color), 0 0 80px var(--shadow-color), 0 0 110px var(--shadow-color), 0 0 210px var(--shadow-color); } 100% { text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light), 0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light), 0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color); } } @keyframes neonlight { 0% { text-shadow: 0 0 7px #fff, 0 0 10px #fff, } } 50% { text-shadow: 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, } 100% { text-shadow: 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; } } @keyframes typing { from { width: 0 } to { width: 500px } } @keyframes blink-caret { from, to { border-color: #fff } 50% { border-color: transparent; } } #fade { opacity: 0.8; color: #fff; text-shadow: 2px 2px 1px rgba(0,0,0,0.3), 0 0px 15px #fff, 0 0 10px #fff, 0 0 50px #fff; -webkit-animation: fade 3s infinite alternate; -moz-animation: fade 3s infinite alternate; -o-animation: fade 3s infinite alternate; animation: fade 3s infinite alternate; } /* --------- END ------- */ /* --------- LOGO ------- */ .logo:hover {animation-name: rotate; animation-duration: 0.7s; animation-iteration-count: 2;} .logo2:hover {animation-name: rotate;animation-duration: 0.7s; animation-iteration-count: 2;} .logo-1 {color: var(--white); animation: neon 3s infinite;} .hide {display:none; -webkit-animation: fadeh 2s forwards; /* Safari 4+ */ -moz-animation: fadeh 2s forwards; /* Fx 5+ */ -o-animation: fadeh 2s forwards; /* Opera 12+ */ animation: fadeh 2s forwards; /* IE 10+, Fx 29+ */} @keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @keyframes fadeh { from {background-color:rgba(255, 255, 255, 0.1);} to {background-color:rgba(255, 255, 255, 1);} } /* --------- END ------- */ /* --------- IMAGES ------- */ .paof {width:60%;} .imggrid {object-fit:cover; object-position: center; width:853.33px; /*848.333px*/ max-width:100%; aspect-ratio: 1/1; /*637.5px*/ /*640px*/; /*padding: 5px;*/} .imggridcs {object-fit:cover; object-position: center; width:477px /*640px*/;} a.nn:hover {color: white; animation: neon 3s infinite;} .boxram {position:relative;} .boxram .box-content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: all .5s ease 0s; text-align: center;} .box-content::before {position: absolute; content: ""; width: 100%; height: 100%; border-top: 20px solid var(--green); border-right: 20px solid var(--green); left:0;} .box-content::after {position: absolute; content: ""; width: 100%; height: 100%; border-bottom: 20px solid var(--purple); border-left: 20px solid var(--purple); left:0;} /* --------- END ------- */ /* --------- MENU HOMEPAGE ------- */ .hcr {text-align: left;} .affix { width:100%; z-index: 1024;; border-bottom: 1px solid #99999952; -webkit-animation: fadeh 2s forwards; /* Safari 4+ */ -moz-animation: fadeh 2s forwards; /* Fx 5+ */ -o-animation: fadeh 2s forwards; /* Opera 12+ */ animation: fadeh 2s forwards; /* IE 10+, Fx 29+ */ } .hi {/*background: url("images/RAM Reclamebureau feb 2024-8.jpg") no-repeat ; background-position: top; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 0; --bs-gutter-x: 0;*/} .hi::before { position: absolute; width: 100%; height: 100%; content: ""; /8background-color: var(--purple);*/ opacity: 0.85; /*background: url("images/headergr.webp") no-repeat ; background-position: top; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; height: 100%;*/ background-image: linear-gradient(to right, var(--pink),var(--pink), rgba(255,0,126,0.4), rgba(255,0,126,0)); z-index:1; } #navbar {padding-top:25px; margin-right:20px; } .navbarleft {float:right;} .navbarright {float:left;} .nav-link { margin: 5px 20px 5px; padding: 0px !important; text-transform:uppercase; border-bottom: 1px solid transparent; font-size: 28px; color: #fff; font-family: 'AktivGrotesk-Light' ; letter-spacing: 1.9px; font-weight: bold;} .nav-link:hover, /*.nav-link:active,*/ .nav-link:focus { color: var(--green); font-family: 'Continuo' ; font-size: 31px; margin: -9px 20px; font-weight:normal; letter-spacing: 2px;} .nav-linkaf a { margin: 0px 20px 5px; padding: 0px !important; text-transform:uppercase; border-bottom: 1px solid transparent; font-size: 28px; color: var(--purple) /*#949494*/; font-family: 'AktivGrotesk-Light' ; letter-spacing: 1.9px; font-weight: normal;} .nav-linkaf a:hover, /*.nav-linkaf:active,*/ .nav-linkaf:focus { color: var(--purple); font-family: 'Continuo' ; font-size: 31px; margin: -8px 16px 0px; /* -9px 20px 5px */ font-weight:normal; letter-spacing: 2px;} .nav-link>active>a, .nav-linkaf>.active>a {color: var(--pink); font-family: 'Continuo' ; font-size: 31px; margin: -9px 20px 5px; } .hs {height:120px /*220px*/; /*position:absolute; z-index:1; top: 0;*/} .headerclass { height: auto; min-height: 100vh;} .hs1 { position:absolute; z-index:0; top: 0; text-transform: uppercase; padding-top: 12%;} div.hs1 {height:100%;} .indent-content { position: absolute; width: 100%; height: 100%;} .wn { max-width: 1250px; margin: 0 auto; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; height: 100%; } .hr {max-width: 1500px; margin: 0 auto;/*padding-top:50px;*/ position: relative;} .hcl {text-align: right;} .hcln {text-align:center;} .hcm {text-align:center; padding-top:25px;} .menu {padding-top: 100px !important; } .menu li {text-transform: uppercase; font-size:15px; padding-right: 15px !important; margin-left: 0px !important; list-style: none!important; float:left; padding-left:0px!important; font-weight: 500; width:100%;} .toggle-menu {width:60px; height: 60px; top: 0px !important; right: 0 !important; position: relative; z-index: 1003; display: inline-block; /*border: 2px solid var(--white);*/ background: var(--pink);} .toggle-menu:hover, .toggle-menuv2:active, .toggle-menuv2:focus {background: var(--green); /*border: 2px solid var(--green);*/} .toggle-menu i {position: absolute; display: block; height: 4px; background: var(--white); width: 40px; /*left: 5px;*/ -webkit-transition: all .3s; transition: all .3s; color: var(--white); top:5px;} .toggle-menu:hover i, .toggle-menu:active i {background: var(--white); } .toggle-menu:focus i {background: var(--white); } a .toggle-menu {color: var(--green);} .toggle-menu i:nth-child(1) {top: 18px; width: 28px /*13px*/;} .toggle-menu i:nth-child(2) {top: 28px; width: 28px;} .toggle-menu i:nth-child(3) {top: 38px; width: 28px /*21px*/;} .toggle-menu.active i:nth-child(1) {top: 28px; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); background: var(--white); width:28px;} .toggle-menu.active i:nth-child(2) {background: transparent;} .toggle-menu.active i:nth-child(3) {top: 28px; -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); background: var(--white); width:28px;} .overlay {height: 0%; width: 100%; position: fixed; z-index: 998; /*top: 95px;*/ right: 0; background-color: var(--pink); overflow-x: hidden; transition: 0.5s; text-align: left;} .overlay-content {position: relative; top: 15%; width: 100%; text-align: left; /*margin-top: 30px;*/} .overlay a {padding: 8px; text-decoration: none; font-size: 18px; color: #fff; display: block; } .overlay a:hover, .overlay a:focus, .overlay a:active {color: var(--add2);} .overlay .menu .li {list-style:none !important;} .overlay .closebtn {/*position: absolute; top: -35px; right: 20px; font-size: 72px;*/ color:#fff;margin-right:15px; position: absolute; top: 15px; left: 0px; font-size:24px; z-index: 1002; display:inline-block;} .open {height: 100%;} .icon-bar {/*width: 100%;*/ position: absolute; right: 0px; /*bottom: 5px;*/ text-align: right; z-index: 999; top:10px; padding-right: 0px !important; /*left:10px;*/} .icon-bar i {color: var(--white);} .icon-bar .btn-oned:hover i, .icon-bard .btn-threed:hover i {color: var(--black); } .icon-bar .btn-twod i {color: var(--black);} .icon-bar .btn-twod:hover i {color: var(--white); } .hmm {position:absolute; z-index: 999; /*left: 50%; margin-right: -50%; transform: translate(-50%, -50%);*/ text-align:center; padding-top:5px;} .fixed-topm { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } /* --------- END ------- */ /* --------- HOMEPAGE PAYOFF ------- */ .hi4 {background: url("https://reclamebureauram.nl/wp-content/uploads/2024/07/RAM-Reclamebureau-feb_-2.jpg") /*url("images/RAM Reclamebureau feb 2024-8.jpg")*/ no-repeat ; background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 70%; height: 100%; position: absolute; top: 0; right: 0px; --bs-gutter-x: 0; /*margin-top:15%;*/ /*box-shadow: -10px 10px 15px #f0eeee;*/ /*border-radius: 20px;*/ } .hi4::after {/*content:""; background-color: var(--pink); width:105%; height: 105%; display:inline-block; position: absolute; z-index: -1; margin-left: -7%; margin-top: 2.5%; border-radius: 20px; transform: rotate(-8deg);*/} .grbg4 {background: url("images/headergr.webp") no-repeat ; background-position: center;} .hst4 {background: url("images/patroon-wit.png") no-repeat;background-size: auto; background-size: 100%; /*padding: 40px 0px;*/} .wn4 {max-width: 1250px; margin: 0 auto; -ms-flex-direction: column;flex-direction: column; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; /*align-items: center;*/ height: 100%; position:relative; z-index:2; /*background: var(--pinklight);*/ } .paof4 {display:none;} h1.tpw4 {text-align: center; font-size: 120px; text-transform: uppercase; line-height: 0.72;} h1.tpw4 a{text-decoration: none; color: var(--green); text-align: center; /*font-family: 'Continuo' ; font-size: 170px;*/} h3.bur4 { font-size: 40px;} .emaldk4 {background-color: var(--white); padding: 10px; margin-right: 10px; color: var(--pink);} .emaldk4:hover {background-color: var(--green); color: var(--white);} .icondk4 {background-color: var(--green); padding: 10px; margin-right: 10px; color: var(--white);} .phnedk4 {background-color: var(--white); padding: 10px; margin-right: 10px; color: var(--pink);} .phnedk4:hover {background-color: var(--green); color: var(--white);} .portdk4 {background-color: var(--white); padding: 10px; margin-right: 10px; color: var(--pink);} .portdk4:hover {background-color: var(--green); color: var(--white);} /* --------- END ------- */ /* --------- HOMEPAGE CASES ------- */ div.hsc {/*height: 330px;*/} .hsc {/*margin-top: 100vh;*/ padding:0px;} .hrc {max-width: 1500px; margin: 0 auto;/*padding-top:50px;*/ position: relative; padding:200px 15px 0px;} .hrc1 {/*max-width: 1500px;*/ margin: 0 auto;/*padding-top:50px;*/ position: relative;} .hrc2 {/*max-width: 1500px;*/ margin: 0 auto;/*padding-top:50px;*/ position: relative; padding: 0px;} div.hcc {height: unset !important; text-align: center;} div.hcc1 {margin:0 auto; text-align: right; padding: 0px 15px;} /* --------- END ------- */ /* --------- BOX CASES ------- */ .colcas {padding-left: 0px; padding-right: 0px;} .boxrampo{position:relative} /*.boxrampo img{width:600px;height:600px; aspect-ratio: 1/1;}*/ /*.boxrampo .boxpo-content{width:100%;height:100%;position:absolute;top:0;left:0;transition:all .5s ease 0s; text-align: center; padding:0px 50px; /*background-color:rgba(255, 255, 255, 0.8);*//*}*/ .boxrampo:hover .boxpo-content{background-color:var(--pink); /*rgba(255,242,242,.8)*/ } .boxrampo:active .boxpo-content{background-color:rgba(95, 0, 200, 0.8); /*rgba(255,242,242,.8)*/ } .boxrampo .boxpo-content, .boxrampops .boxpo-content, .boxrampopsri .boxpo-content { position:absolute; inset:0; width:100%; height:100%; transition: background-color .5s ease; text-align:center; padding:0 50px; overflow:hidden; /* voorkomt uitlekken */ } /* Start: pijltje onzichtbaar, gecentreerd */ .boxrampo .boxpo-content::before, .boxrampops .boxpo-content::before, .boxrampopsri .boxpo-content::before { content:""; position:absolute; inset:0; pointer-events:none; /* klikjes gaan door */ opacity:0; /* Pijl als bg, zodat we positie kunnen animeren */ background-image: url("images/pijl-rechtboven-wit.svg"); background-repeat: no-repeat; background-size: clamp(80px, 12vw, 150px) auto; /* responsief formaat */ background-position: center; /* start in het midden */ transition: opacity .6s ease .3s, background-position .8s ease .3s; /* vloeiende verplaatsing */ } /* Hover: kleur en pijltje naar 15px van top & right */ .boxrampo:hover .boxpo-content, .boxrampops:hover .boxpo-content, .boxrampopsri:hover .boxpo-content { background-color: var(--pink); } .boxrampo:active .boxpo-content, .boxrampops:active .boxpo-content, .boxrampopsri:active .boxpo-content { background-color: rgba(95,0,200,.8); } .boxrampo:hover .boxpo-content::before, .boxrampo:active .boxpo-content::before, .boxrampops:hover .boxpo-content::before, .boxrampops:active .boxpo-content::before, .boxrampopsri:hover .boxpo-content::before, .boxrampopsri:active .boxpo-content::before { opacity:1; background-position: right 15px top 15px; } .boxrampo .boxpo-content::after, .boxrampops .boxpo-content::after, .boxrampopsri .boxpo-content::after { content:""; position:absolute; inset:0; /* vult de hele kaart */ pointer-events:none; z-index:1; /* boven de bg-kleur van .boxpo-content */ opacity:0; /* SVG als achtergrond, zodat we positie kunnen animeren */ background-image: url("images/pijl-linksonder-groen.svg"); background-repeat: no-repeat; background-position: center; /* start in het midden */ background-size: clamp(80px, 12vw, 150px) auto; /* responsief formaat */ transition: opacity .6s ease .3s, background-position .8s ease .3s, background-size .8s ease .3s; } /* Hover/active: naar linksonder op 15px */ .boxrampo:hover .boxpo-content::after, .boxrampo:active .boxpo-content::after, .boxrampops:hover .boxpo-content::after, .boxrampops:active .boxpo-content::after, .boxrampopsri:hover .boxpo-content::after, .boxrampopsri:active .boxpo-content::after { opacity:1; background-position: left 15px bottom 15px; background-size: clamp(90px, 13vw, 170px) auto; /* optionele kleine “pop” */ } /* .boxrampo .boxpo-content:after{content: url("images/pijl-linksonder-groen.svg");width:150px;height:100px;position:absolute;opacity:0;transform:scale(1.0); transition:all .6s ease .3s; top:40%;left:37.5%;} .boxrampo .boxpo-content:before{content: url("images/pijl-rechtboven-wit.svg");width:150px;height:100px;position:absolute;opacity:0;transform:scale(1.0); transition:all .6s ease .3s; top:40%;right:45%; } .boxrampo:hover .boxpo-content:after,.boxrampo:active .boxpo-content:after{opacity:1;transform:scale(1); transform:translate(-300px, 220px); transition:all 1s ease 10ms; } .boxrampo:hover .boxpo-content:before,.boxrampo:active .boxpo-content:before{opacity:1;transform:scale(1); transform:translate(360px, -240px); transition:all 1s ease 10ms;} */ .boxrampo .title{/*font-size:22px;*/ color:var(--purple);margin:0;position:relative;/*top:39%/ /*0*/;opacity:0;transition:all 0.5s ease 10ms; top: 40%; left: 50%; transform: translate(-50%, -40%);} .boxrampo:hover .title{color:var(--white);top:39%;opacity:1;transition:all .5s cubic-bezier(1,-.53,.405,1.425) 10ms; text-align: center;} .boxrampo:active .title{color:var(--white);top:39%;opacity:1;transition:all .5s cubic-bezier(1,-.53,.405,1.425) 10ms; text-align: center;} /*.boxram .title:after{content:"";width:0;height:1px;background:#040404;position:absolute;bottom:-8px;left:0;right:0;margin:0 auto;transition:all 1s ease 0s}*/ .boxrampo:hover .title:after{width:80%;transition:all 1s ease .8s; } .boxrampo:active .title:after{width:80%;transition:all 1s ease .8s; } .boxrampo .icon{width:100%;margin:0 auto;position:absolute;bottom:0;opacity:0;transition-duration:.6s;transition-timing-function:cubic-bezier(1,-.53,.405,1.425);transition-delay:.1s} .boxrampo:hover .icon{bottom:39%;opacity:1} .boxrampo:active .icon{bottom:39%;opacity:1} .boxrampo .icon li{display:inline-block} .boxrampo .icon li a{display:block;width:40px;height:40px;line-height:40px;border-radius:50%;font-size:18px;color:#000;border:1px solid #000;margin-right:5px;transition:all .3s ease-in-out 0s} .boxrampo .icon li a:hover{background:#000;color:#fff} .boxrampo .icon li a:active{background:#000;color:#fff} .boxwork {/*margin-top: -40px !important;*/ margin-bottom:40px !important; font-family: 'Blikfang-DEMO', sans-serif !important; font-size:28px !important; /*color: #999898 !important;*/} .boxrampops{position:relative} /*.boxrampo img{width:600px;height:600px; aspect-ratio: 1/1;}*/ .boxrampops .boxpo-content{width:100%;height:100%;position:absolute;top:0;left:0;transition:all .5s ease 0s; text-align: center; padding:0px 20px /*50px*/; /*background-color:rgba(255, 255, 255, 0.8);*/} .boxrampops:hover .boxpo-content{background-color:var(--pink); /*rgba(255,242,242,.8)*/ } .boxrampops:active .boxpo-content{background-color:rgba(95, 0, 200, 0.8); /*rgba(255,242,242,.8)*/ } /*.boxrampops .boxpo-content:after{content: url("images/pijl-linksonder-groen.svg");width:150px;height:100px;position:absolute;opacity:0;transform:scale(1.0); transition:all .6s ease .3s; top:40%;left:36.5%;} .boxrampops .boxpo-content:before{content: url("images/pijl-rechtboven-wit.svg");width:150px;height:100px;position:absolute;opacity:0;transform:scale(1.0); transition:all .6s ease .3s; top:40%;right:40%; } .boxrampops:hover .boxpo-content:after,.boxrampops:active .boxpo-content:after{opacity:1;transform:scale(1); transform:translate(-215px, 220px); transition:all 1s ease 10ms; } .boxrampops:hover .boxpo-content:before,.boxrampops:active .boxpo-content:before{opacity:1;transform:scale(1); transform:translate(235px, -240px); transition:all 1s ease 10ms;}*/ .boxrampops .title{/*font-size:22px;*/ color:var(--purple);margin:0;position:relative;/*top:39%/ /*0*/;opacity:0;transition:all 0.5s ease 10ms; top: 40%; left: 50%; transform: translate(-50%, -40%);} .boxrampops:hover .title{color:var(--white);top:39%;opacity:1;transition:all .5s cubic-bezier(1,-.53,.405,1.425) 10ms; text-align: center;} .boxrampops:active .title{color:var(--white);top:39%;opacity:1;transition:all .5s cubic-bezier(1,-.53,.405,1.425) 10ms; text-align: center;} /*.boxram .title:after{content:"";width:0;height:1px;background:#040404;position:absolute;bottom:-8px;left:0;right:0;margin:0 auto;transition:all 1s ease 0s}*/ .boxrampops:hover .title:after{width:80%;transition:all 1s ease .8s; } .boxrampops:active .title:after{width:80%;transition:all 1s ease .8s; } .boxrampops .icon{width:100%;margin:0 auto;position:absolute;bottom:0;opacity:0;transition-duration:.6s;transition-timing-function:cubic-bezier(1,-.53,.405,1.425);transition-delay:.1s} .boxrampops:hover .icon{bottom:39%;opacity:1} .boxrampops:active .icon{bottom:39%;opacity:1} .boxrampops .icon li{display:inline-block} .boxrampops .icon li a{display:block;width:40px;height:40px;line-height:40px;border-radius:50%;font-size:18px;color:#000;border:1px solid #000;margin-right:5px;transition:all .3s ease-in-out 0s} .boxrampops .icon li a:hover{background:#000;color:#fff} .boxrampops .icon li a:active{background:#000;color:#fff} .boxrampopsri{position:relative} /*.boxrampo img{width:600px;height:600px; aspect-ratio: 1/1;}*/ .boxrampopsri .boxpo-content{width:100%;height:100%;position:absolute;top:0;left:0;transition:all .5s ease 0s; text-align: center; padding:0px 50px; /*background-color:rgba(255, 255, 255, 0.8);*/} .boxrampopsri:hover .boxpo-content{background-color:var(--purple); /*rgba(255,242,242,.8)*/ } .boxrampopsri:active .boxpo-content{background-color:rgba(95, 0, 200, 0.8); /*rgba(255,242,242,.8)*/ } /* .boxrampopsri .boxpo-content:after{content: url("images/pijl-linksonder-groen.svg");width:150px;height:100px;position:absolute;opacity:0;transform:scale(1.0); transition:all .6s ease .3s; top:40%;left:36.5%;} .boxrampopsri .boxpo-content:before{content: url("images/pijl-rechtboven-wit.svg");width:150px;height:100px;position:absolute;opacity:0;transform:scale(1.0); transition:all .6s ease .3s; top:40%;right:40%; } .boxrampopsri:hover .boxpo-content:after,.boxrampopsri:active .boxpo-content:after{opacity:1;transform:scale(1); transform:translate(-215px, 220px); transition:all 1s ease 10ms; } .boxrampopsri:hover .boxpo-content:before,.boxrampopsri:active .boxpo-content:before{opacity:1;transform:scale(1); transform:translate(235px, -240px); transition:all 1s ease 10ms;} */ .boxrampopsri .title{/*font-size:22px;*/ color:var(--purple);margin:0;position:relative;/*top:39%/ /*0*/;opacity:0;transition:all 0.5s ease 10ms; top: 40%; left: 50%; transform: translate(-50%, -40%);} .boxrampopsri:hover .title{color:var(--white);top:39%;opacity:1;transition:all .5s cubic-bezier(1,-.53,.405,1.425) 10ms; text-align: center;} .boxrampopsri:active .title{color:var(--white);top:39%;opacity:1;transition:all .5s cubic-bezier(1,-.53,.405,1.425) 10ms; text-align: center;} /*.boxram .title:after{content:"";width:0;height:1px;background:#040404;position:absolute;bottom:-8px;left:0;right:0;margin:0 auto;transition:all 1s ease 0s}*/ .boxrampopsri:hover .title:after{width:80%;transition:all 1s ease .8s; } .boxrampopsri:active .title:after{width:80%;transition:all 1s ease .8s; } .boxrampopsri .icon{width:100%;margin:0 auto;position:absolute;bottom:0;opacity:0;transition-duration:.6s;transition-timing-function:cubic-bezier(1,-.53,.405,1.425);transition-delay:.1s} .boxrampopsri:hover .icon{bottom:39%;opacity:1} .boxrampopsri:active .icon{bottom:39%;opacity:1} .boxrampopsri .icon li{display:inline-block} .boxrampopsri .icon li a{display:block;width:40px;height:40px;line-height:40px;border-radius:50%;font-size:18px;color:#000;border:1px solid #000;margin-right:5px;transition:all .3s ease-in-out 0s} .boxrampopsri .icon li a:hover{background:#000;color:#fff} .boxrampopsri .icon li a:active{background:#000;color:#fff} .greyscale { filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ } .greyscale:hover {filter: none; -webkit-filter: grayscale(0%);} /* --------- END ------- */ /* --------- HOMEPAGE TEAM ------- */ .hst {background: url("images/patroon-roze-op.png") repeat ; background-size: 100px; padding:/*40px*/ 0px;} .hrt {padding: 200px 0px; /*padding-bottom: 80px;*/ max-width:1500px; /*max-width: 100%;*/ margin: 0 auto; text-align: center;} .hct {/*max-width:1700px;*/ margin: 0 auto; text-align:right;} .hstr1 {/*max-width:1700px;*/ margin: 0 auto; text-align:right;} .hsstcol {margin-top:auto; margin-bottom: auto;} .imggridtm {object-fit:cover; object-position: top; margin-top:15px; margin-bottom: 40px; border-top: 40px solid var(--purple); border-right: 40px solid var(--purple); border-bottom: 40px solid var(--green); border-left: 40px solid var(--green); box-shadow: 10px 10px 5px #ccc; max-width:100%;} .imggridtm:hover {box-shadow: 1em -1em 70px var(--purpleop), -1em 1em 70px var(--greenop);} .imgtmtxt {text-align: center; padding-right: 50px;} .tmti {position:absolute; bottom: -20px; z-index: 1;} .tmcol {position:relative;} /* --------- END ------- */ /* --------- HOMEPAGE USP ------- */ .hsu1 {background: var(--purple); padding: 120px 0px 0px;} .hsu2 {background: var(--purple); padding: 0px 0px 120px;} .hsur {margin: 0 auto; max-width: 1700px; text-align:center;} .carousel-indicators {bottom: -40px; width: auto;} .carousel-indicators [data-bs-target] {width:20px; height: 20px; margin-right: 20px;} /* --------- END ------- */ /* --------- HOMEPAGE CTA ------- */ .hsct { padding: 120px 0px 0px;} .hsctr {margin: 0 auto; max-width: 1700px; text-align:center;} .imgplan {margin:20px 0px 120px;} .imgplan:hover {transform: scale(1.2);} /* --------- END ------- */ /* --------- PAGE ------- */ #ps1 {position:relative; /*margin-top: 120px;*/} #ps1 .hsct {background: transparent /*var(--pink)*/; margin-top: 120px;} .psc {} .dvdr {height:120px;margin-top:120px;} .prc {max-width:930px; margin: 0 auto; text-align: center; padding-top: 80px; padding-bottom: 80px; } .prc1 {max-width:1700px; margin:0 auto; padding: 100px 0px;} .pcccol p {/*color: var(--white);*/} .pcccol {padding:100px 60px;} .list-group-item {background: transparent !important; color: #fff !important; border-bottom: 1px solid #f1f1f1; border-top: none !important;border-left: none !important;border-right: none !important;font-size: 22px;} .card-header {border-bottom: none !important;} .card-header p {color: #fff !important; } .carcol1 .card-header p {color: var(--purple) !important;} .carcol1 .list-group-item {color: var(--purple) !important;} .pspurple {background: url("images/patroonpu.png") repeat ; background-size: 400px; /*padding:80px 0px;*/} .cardimgtm {border-radius:50%; margin-top :40px ;margin-left: 15px; margin-right: 10px;} /* --------- END ------- */ @media (min-width: 768px) { .navbar-expand-md .navbar-navpg { flex-direction: row; } } .navbar-navpg { --bs-nav-link-padding-x: 0; --bs-nav-link-padding-y: 0.5rem; --bs-nav-link-font-weight: ; --bs-nav-link-color: var(--bs-navbar-color); --bs-nav-link-hover-color: var(--bs-navbar-hover-color); --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color); display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none; } /* --------- PAGE DIENSTEN ------- */ .psd {} .psd1 {padding:0px;} .prd {max-width: 930px; margin: 0 auto; margin-top: 0px; padding-top: 80px; position: relative; text-align: center;} .prd1 { margin: 0 auto; /*padding: 100px 0px;*/ /*margin-top:-50px;*/} .prd2 {max-width: 1700px; margin: 0 auto; /*padding: 100px 0px;*/ /*margin-top:-150px;*/ position: relative;} .pcd {max-width: 930px; margin: 0 auto; text-align: center; padding-top: 80px; /*padding-bottom: 80px;*/} .pid {width: 2700px; height: 1000px; object-fit: cover; object-position: center right; padding:0px; } .pid::before {content:""; background: var(--white); width:100%; height: auto; opacity: 0.5; position: absolute; } .sil {min-width: 24px;} /* --------- END ------- */ /* --------- PAGE TEAM ------- */ .hsttp {padding-top: 80px; padding-bottom: 80px; margin-bottom:40px !important; max-width:930px; margin: 0 auto; text-align: center; color: var(--white); text-align: center;} .hstppa {background: url("images/patroonpi2.png") repeat ; background-size: 400px; /*padding:80px 0px;*/ padding-bottom: 50px;} .hsttp p {/*color: var(--white);*/ padding: 100px 60px 0px;} .masonry-columnpg {max-width: 510px; margin:0 auto; /*background-color: var(--pinklight);*/ padding: 0px 20px;*/ border-radius: 20px; margin-bottom: 120px;} .masonry-columnpgp { max-width: 510px; margin:0 auto; /*background-color: var(--greenlight);*/ padding: 0px 20px; border-radius: 20px; margin-top:120px;} .masonry-columnpgp3 { max-width: 510px; margin:0 auto; /*background-color: var(--pinklight); */ padding: 0px 20px; border-radius: 20px; margin-top:60px; margin-bottom: 60px;} .imggridtmpg {object-fit:cover; object-position: top; margin-top:15px; margin-bottom: 40px; /*border-top: 40px solid var(--pink); border-right: 40px solid var(--pink); border-bottom: 40px solid var(--purple); border-left: 40px solid var(--purple); box-shadow: 0px 0px 20px 5px #fff*/ /*#f0eeee*/; align-content: center; display: flex; border-radius: 20px 20px 0px 0px; /*transform: rotate(-4deg);*/} .imggridtmpg1 {object-fit:cover; object-position: top; margin-top:15px; margin-bottom: 40px; /*border-top: 40px solid var(--pink); border-right: 40px solid var(--pink); border-bottom: 40px solid var(--purple); border-left: 40px solid var(--purple); box-shadow: 0px 0px 20px 5px #fff*/ /*#f0eeee*/; align-content: center; display: flex; border-radius: 20px 20px 0px 0px; /*transform: rotate(4deg);*/} .imggridtmpg:hover {/*box-shadow: 1em -1em 70px var(--pinkop), -1em 1em 70px var(--purpleop);*/} .imgtmtxtpg {text-align: center; padding: 20px 15px; background: var(--pink); border-radius: 0px 0px 20px 20px;} .imgtmtxtpg1 {text-align: center; padding: 20px 15px; background: var(--green); border-radius: 0px 0px 20px 20px;} .imgtmtxtpg2 {text-align: center; padding: 20px 15px; background: var(--purple); border-radius: 0px 0px 20px 20px;} .imgtmtxtpg3 {text-align: center; padding: 20px 15px; background: var(--pink); border-radius: 0px 0px 20px 20px;} .imgtmtxtpg4 {text-align: center; padding: 20px 15px; background: var(--green); border-radius: 0px 0px 20px 20px;} .imgtmtxtpg5 {text-align: center; padding: 20px 15px; background: var(--purple); border-radius: 0px 0px 20px 20px;} .boxrampg {margin-bottom: 60px;position: relative; background: var(--pink); border-radius: 20px 20px 20px 20px; box-shadow: 0px 0px 10px 2px #999; } .boxrampg1 {margin-bottom: 60px;position: relative; background: var(--green); border-radius: 20px 20px 20px 20px; box-shadow: 0px 0px 10px 2px #999;} .boxrampg2 {margin-bottom: 60px;position: relative; background: var(--purple); border-radius: 20px 20px 20px 20px; box-shadow: 0px 0px 10px 2px #999;} .boxrampg3 {margin-bottom: 60px;position: relative; background: var(--pink); border-radius: 20px 20px 20px 20px; box-shadow: 0px 0px 10px 2px #999;} .boxrampg4 {margin-bottom: 60px;position: relative; background: var(--green); border-radius: 20px 20px 20px 20px; box-shadow: 0px 0px 10px 2px #999;} .boxrampg5 {margin-bottom: 60px;position: relative; background: var(--purple);border-radius: 20px 20px 20px 20px; box-shadow: 0px 0px 10px 2px #999;} .boxrampg p, .boxrampg2 p, .boxrampg3 p, .boxrampg5 p {color: var(--white); padding:30px;} .boxrampg1 p, .boxrampg4 p {color: var(--purple); padding:30px;} .hstrcascol {text-align:center;} /* --------- END ------- */ /* --------- PAGE CASES ------- */ .hstrcas {max-width:1900px; margin: 0 auto; padding:100px 60px;margin-top: 100px; margin-bottom:100px; } .hstrcas1 {max-width:1200px; margin: 0 auto; padding:100px 60px;margin-top: 100px; margin-bottom:100px; } .hscas {background: url("images/patroong2.png") repeat ; background-size: 400px; /*padding:40px 0px;*/} .hscaspink {background: url("images/patroon-roze-light.png") repeat ; background-size: 400px; /*padding:80px 0px;*/ padding-bottom: 50px;} .hstrsphead {margin: 0 auto; max-width: 1700px; text-align:center; /*margin-top: 40px;*/ padding:100px 60px; margin-bottom:100px; } .imggridpg {object-fit:cover; object-position: center; width: 848.333px; max-width: 100%; aspect-ratio: 1/1; /*640px*/; /*padding: 5px;*/} .hstrsps1 {margin: 0 auto; max-width: 1200px; text-align:center; margin-top: 40px; background: var(--purple); padding:50px 50px; margin-top: 50px; margin-bottom:50px;} .pscr { max-width: 1900px; margin: 0 auto; } .pscr1 {max-width: 930px; margin: 0 auto; text-align:center;/*margin-top:100px*/; padding-top: 80px; padding-bottom: 80px;} .pscr1 p {/*background: var(--purple);*/ min-height: 200px; padding: 40px; /*border-radius: 20px;*/ /*color: #fff;*/ padding:100px 60px 0px;} .prcas {max-width:1275px; margin:0 auto; padding: 60px 0px;} .imggridcs {object-fit:cover; object-position: center; width:470px; max-width: 100%; aspect-ratio: 1/1; /*640px;*/ /*border-radius: 20px;*/ /*margin-top:40px; margin-left:20px;*/ max-height: 800px; box-shadow: 0px 0px 20px 5px #fff; border-top: 40px solid var(--white); border-right: 40px solid var(--white); border-bottom: 40px solid var(--pinklight); border-left: 40px solid var(--pinklight);} .imggridcs:hover {box-shadow: 0px 0px 50px 25px #fff;} .imggridcs1 {object-fit:cover; object-position: center; width:470px; max-width: 100%; aspect-ratio: 1/1; /*640px;*/ /*border-radius: 20px;*/ /*margin-top:40px; margin-left: -80px*/; max-height: 800px; box-shadow: 0px 0px 20px 5px #fff; border-top: 40px solid var(--white); border-right: 40px solid var(--white); border-bottom: 40px solid var(--pinklight); border-left: 40px solid var(--pinklight);} .imggridcs1:hover {box-shadow: 0px 0px 50px 25px #fff;} .imggridcs2 {object-fit:cover; object-position: center; width:470px; max-width: 100%; aspect-ratio: 1/1; /*640px;*/ /*border-radius: 20px;*/ /*margin-top:-40px; margin-left: -80px;*/ max-height: 800px; box-shadow: 0px 0px 20px 5px #fff; border-top: 40px solid var(--white); border-right: 40px solid var(--white); border-bottom: 40px solid var(--greenlight); border-left: 40px solid var(--greenlight);} .imggridcs2:hover {box-shadow: 0px 0px 50px 25px #fff;} .imggridcs3 {object-fit:cover; object-position: center; width:470px; max-width: 100%; aspect-ratio: 1/1; /*640px;*/ /*border-radius: 20px;*/ /*margin-top: 100px; margin-left: 20px;*/ max-height: 800px; box-shadow: 0px 0px 20px 5px #fff; border-top: 40px solid var(--white); border-right: 40px solid var(--white); border-bottom: 40px solid var(--greenlight); border-left: 40px solid var(--greenlight);} .imggridcs3:hover {box-shadow: 0px 0px 50px 25px #fff;} .imggridcs4 {object-fit:cover; object-position: center; width:470px; max-width: 100%; aspect-ratio: 1/1; /*640px;*/ /*border-radius: 20px;*/ /* margin-top:40px; margin-right: -40px;*/ max-height: 800px; box-shadow: 0px 0px 20px 5px #fff; border-top: 40px solid var(--white); border-right: 40px solid var(--white); border-bottom: 40px solid var(--purplelight); border-left: 40px solid var(--purplelight);} .imggridcs5 {object-fit:cover; object-position: center; width:470px; max-width: 100%; aspect-ratio: 1/1; /*640px;*/ /*border-radius: 20px;*/ /* margin-top:40px; margin-right: -40px;*/ max-height: 800px; box-shadow: 0px 0px 20px 5px #fff; border-top: 40px solid var(--white); border-right: 40px solid var(--white); border-bottom: 40px solid var(--purplelight); border-left: 40px solid var(--purplelight);} .box-txt p, .box-txt1 p {color: var(--white);} .box-txt2 p, .box-txt3 p {color: var(--purple);} .box-txt4 p, .box-txt5 p {color: var(--white);} .masonry-columnpc {max-width: 610px; margin:0 auto; /*background-color: var(--pink);*/ padding: 0px 20px; /*border-radius: 20px;*/ margin-top: 100px;} .masonry-columnpc1 { max-width: 610px; margin:0 auto; /*background-color: var(--green);*/ padding: 0px 20px; /*border-radius: 20px;*/ margin-top:180px;} .masonry-columnpc2 { max-width: 610px; margin:0 auto; /*background-color: var(--green);*/ padding: 0px 20px; /*border-radius: 20px;*/ margin-top:60px; } .masonry-columnpc3 {max-width: 610px; margin:0 auto; /*background-color: var(--purple);*/ padding: 0px 20px; /*border-radius: 20px;*/ margin-top:80px; margin-bottom: 120px;} .masonry-columnpc4 { max-width: 610px; margin:0 auto; /*background-color: var(--pink);*/ padding: 0px 20px; /*border-radius: 20px;*/ margin-top:120px;} .masonry-columnpc4 h4, .masonry-columnpc5 h4 {color:var(--white);} .masonry-columnpc8 { max-width: 610px; margin:0 auto; /*background-color: var(--green);*/ padding: 0px 20px; /*border-radius: 20px;*/ margin-top:260px;} .masonry-columnpctxt { max-width: 610px; margin: auto; text-align: center;} .box-cas {position:relative; text-align: center; /*padding: 60px 20px;*/} .box-cas iframe {max-width: 485px;} /*.box-cas::before { content: url("images/pijl-rechtboven-wit.svg"); width: 100px; height: 50px; position: absolute; opacity: 1; transform: scale(1.0); transform: scale(1.5); transition: all .6s ease .3s; border-right: 2px solid #fff; border-top: 2px solid #fff; top: 0%; right: -20px;}*/ .imgrevsin { object-fit:cover; object-position: center; width:100%; height:100%; aspect-ratio: 1/1; /*width:509px; height:auto;*/ /*640px*/; /*border-radius: 20px;*/ /*margin-top:40px; margin-left:20px; margin-bottom:-40px;*/ /*max-height: 800px;*/ /*box-shadow: 0px 0px 20px 5px #fff;*/} .imgrevsin1 { object-fit:cover; object-position: center; width:509px; height:auto; /*640px*/; /*border-radius: 20px;*/ /*margin-top:-40px; margin-left:20px; max-height: 800px;*/ /*box-shadow: 0px 0px 20px 5px #fff;*/} .imgrevsin2 { object-fit:cover; object-position: center; width:509px; height:auto; /*640px*/; /*border-radius: 20px;*/ /*margin-top:40px; margin-left:-40px; margin-bottom:-40px;*/ max-height: 800px; /*box-shadow: 0px 0px 20px 5px #fff;*/} .imgrevsins { object-fit:cover; object-position: center; width: 100%; height: 100%; aspect-ratio: 1/1; /*509px*/; /*height:auto;*/ /*640px*/ /*border-radius: 20px;*/ /*margin-top:40px; margin-left:-40px; margin-bottom:-40px;*/ /*max-height: 800px;*/ /*box-shadow: 0px 0px 20px 5px #fff;*/} /* --------- END ------- */ /* --------- PAGE CONTACT ------- */ .pscolor {background: url("images/patroonc4.png") repeat ; background-size: 400px; /*padding:40px 0px;*/} .prcnt {margin: 0 auto; max-width:930px; padding-top: 80px; /*padding-bottom: 80px;*/ text-align:center;} .prcnt1 {margin: 0 auto; max-width:1900px; padding-top: 80px; padding-bottom: 80px; text-align:center; margin-top:100px; margin-bottom: 100px;} .icon-bardkcnt{width: 100%; /* Full-width */ overflow: unset; /*CHANGED 02122022 */ /* auto Overflow due to float */ justify-content: center; display: flex; height: unset; margin-top:40px;} .icon-bardkcnt a {float: left; text-align: center; } .emaldk4cnt{background-color: var(--purple); padding:20px; margin-right:10px; color: var(--white);} .emaldk4cnt:hover {background-color: var(--pink) !important; color: #fff !important;} .icondk4cnt{background-color: var(--pink); padding:20px; margin-right:10px; color: var(--white);} .icondk4cnt:hover {background-color: var(--green) !important;} .phnedk4cnt{background-color: var(--purple); padding:20px; margin-right:10px; color: var(--white);} .phnedk4cnt:hover {background-color: var(--pink) !important; color: #fff !important;} .pccntcol1 p {padding:40px 80px; color: var(--white);} .pccntcol2 {padding-bottom:40px; margin-bottom: 40px;} .pccntcol2 a {color: var(--pink);} .pccntcol2 a:hover, .pccntcol2 a:active, .pccntcol2 a:focus {color: var(--purple);} .pccntcol2 p, .pccntcol4 p { color: var(--purple);} .box-casct {position:relative; text-align: center; padding: 60px 20px;} .btn-ramcnt { background: var(--white); border-radius: 20px; font-size: 18px; padding:20px 30px 15px; margin-top:40px; border: 2px solid var(--pinklight); box-shadow: 0px 0px 20px 5px #fff; color: var(--black);} .btn-ramcnt:hover {border: 2px solid #fff; background: var(--white); box-shadow: 0px 0px 20px 5px var(--white); color: var(--pink);} .btn-ramcnt1 {background: var(--white); border-radius: 20px; font-size: 18px; padding:20px 30px 15px; margin-top:40px; border: 2px solid var(--greenlight); box-shadow: 0px 0px 20px 5px var(--greenlight); color: var(--black);} .btn-ramcnt1:hover {border: 2px solid #fff; background: var(--white); box-shadow: 0px 0px 20px 5px var(--white); color: var(--green);} .cntimg {/*padding: 40px 15px 15px;*/} /* --------- END ------- */ /* --------- SINGLE PAGE ------- */ .sps {} .spr {max-width:1700px; margin: 0 auto; text-align:center;} .spr {margin: 0 auto; max-width: 1700px; text-align:center; /*margin-top: 40px;*/ /*padding:50px 50px;*/ /*margin-top: 50px;*/ margin-bottom:50px; } .spr1 {margin: 0 auto; max-width: 1200px; text-align:center; /*margin-top: 40px;*/ /*padding:50px 50px;*/ margin-top: 50px; margin-bottom:50px; } .spr2 {margin: 0 auto; max-width: 1200px; text-align:center; /*margin-top: 40px;*/ /*padding:50px 50px;*/ margin-top: 50px; margin-bottom:50px; } .spr3 {margin: 0 auto; max-width: 1200px; text-align:center; /*margin-top: 40px;*/ /*padding:50px 50px;*/ margin-top: 50px; margin-bottom:50px; } .spr4 {margin: 0 auto; max-width: 1200px; text-align:center; /*margin-top: 40px;*/ /*padding:50px 50px;*/ margin-top: 50px; margin-bottom:50px; } .spr4a {margin: 0 auto; max-width: 1200px; text-align:center; /*margin-top: 40px;*/ /*padding:50px 50px;*/ margin-top: 50px; margin-bottom:50px; } .spr5 {margin: 0 auto; max-width: 1700px; text-align:center; /*margin-top: 40px;*/ /*background: var(--pink);*/ margin-top: 50px; margin-bottom:50px;} .spr6 {margin: 0 auto; max-width: 1200px; text-align:center; /*margin-top: 40px;*/ /*padding:50px 50px;*/ margin-top: 50px; margin-bottom:50px; } .spr7 {margin: 0 auto; max-width: 1912.5px; /*text-align:center;*/ /*margin-top: 40px;*/ /*padding:50px 50px;*/ margin-top: 250px; margin-bottom:50px; } .masonry-columnscn {background: var(--purplelight); min-height: 200px; padding: 40px; border-radius: 20px; color: #000;} .masonry-columnsp {/*max-width: 525px;*/ margin:0 auto; /*background-color: var(--greenlight);*/ padding: 0px ; /*border-radius: 20px;*/ /*margin-bottom: 120px; margin-right:20px;*/} .masonry-columnsp1 { /*max-width: 525px;*/ margin:0 auto; background-color: var(--sandybeach); padding: 0px /*20px*/; /*border-radius: 20px;*/ /*margin-top:120px; margin-right:20px;*/} .masonry-columnsp2 { max-width: 525px; margin:0 auto; /*background-color: var(--purplelight);*/ padding: 0px 20px; /*border-radius: 20px;*/ /*margin-top:100px; margin-bottom: 60px; margin-right:20px;*/} .masonry-columnsp3 {max-width: 525px; margin:0 auto; /*background-color: var(--purple);*/ padding: 0px 20px; /*border-radius: 20px;*/ /*margin-top:80px; margin-bottom: 120px; margin-right:20px;*/} .masonry-columnsp4 { max-width: 525px; margin:0 auto; /*background-color: var(--pink);*/ padding: 0px 20px; /*border-radius: 20px;*/ /*margin-top:120px; margin-right:20px;*/} .masonry-columnsp5 {/*max-width: 525px;*/ margin:0 auto; background-color: var(--violet); padding: 0px ; /*border-radius: 20px;*/ /*margin-bottom: 120px; margin-right:20px;*/} .masonry-columnsp6 { /*max-width: 525px;*/ margin:0 auto; /*background-color: var(--purplelight);*/ padding: 0px 20px; /*border-radius: 20px;*/ /*margin-top:100px; margin-bottom: 60px; margin-right:20px;*/ margin: auto; text-align:center;} .spcol {padding: 40px; } .stb1 {padding:20px; border-radius: 20px; /*margin-bottom: 60px;*/ font-size: 18px; text-align:left;} .stb1 p {color: #000 !important; font-size: 20px;} .stb1 h2 {color: #000 !important; font-family: 'Continuo' ; font-size: 50px } .stb1 h3 {color: #000 !important; font-family: 'AktivGrotesk-Regular'; font-size: 20px;} .stb2 {padding:20px; border-radius: 20px; font-size: 24px; text-align:left;} .stb2 p {color: #000 !important; font-size: 20px;} .stb3 {padding:100px 60px; border-radius: 20px; text-align:left;} .stb3 p {font-size: 20px; /*color: #fff !important;*/} .stb3 h2 {/*color: #fff !important;*/ font-family: 'Continuo' ; font-size: 50px; margin-bottom:20px; } .stb3 h3 {/*color: #fff !important;*/ font-family: 'AktivGrotesk-Regular'; font-size: 20px;} .spcol3 {/*margin-top: 140px;*/} .stb4 {padding:20px; border-radius: 20px; margin: 60px 0px; font-size: 18px; text-align:left;} .stb4 p {font-size: 20px; /*color: #fff !important; */} .stb4 h2 {/*color: #fff !important;*/ font-family: 'Continuo' ; font-size: 50px; margin-bottom:20px; font-weight: 700; } .stb4 h3 {/*color: #fff !important;*/ font-family: 'Continuo'; font-size: 36px; font-weight: 700; margin-top: 40px;} .stb4 h4 {/*color: #fff !important;*/ font-family: 'AktivGrotesk-Bold'; font-size: 28px; font-weight: 700; margin-top: 20px; text-transform: uppercase;} .stb4a {padding:20px; border-radius: 20px; margin: 60px 0px; font-size: 18px; text-align:left;} .stb4a p {font-size: 20px; /*color: #fff !important; */} .stb4a h2 {/*color: #fff !important;*/ font-family: 'Continuo' ; font-size: 50px; margin-bottom:20px; font-weight: 700; } .stb4a h3 {/*color: #fff !important;*/ font-family: 'Continuo'; font-size: 50px; font-weight: 700; margin-top: 40px; margin-bottom:60px;} .stb4a h4 {/*color: #fff !important;*/ font-family: 'AktivGrotesk-Bold'; font-size: 32px; font-weight: 700; margin-top: 20px; /*text-transform: uppercase;*/} .btn-ram { border-radius: 20px; font-size: 22px; padding:10px 30px 5px; text-transform: uppercase; margin-top:40px; border: 2px solid var(--pinklight); box-shadow: 0px 0px 20px 5px #fff; color: var(--white);} .btn-ram:hover {border: 2px solid #fff; background: var(--purple); box-shadow: 0px 0px 20px 5px var(--pinklight); color: var(--white);} /* --------- END ------- */ /* --------- FOOTER ------- */ .hsf1 {padding: 80px 0px;} .hsf1 a {color: var(--purple); text-decoration: none !important;} .hsf1 a:hover, .hsf1 a:active, .hsf1 a:focus {color: var(--white); text-decoration: none !important;} .hsf1r {margin: 0 auto; max-width: 1700px; text-align:center; } .hsf1c {} .flogo {margin-bottom: 25px;} .hsf2 {position:relative;} .hsf2r {margin: 0 auto; max-width: 125px; text-align:center; position:relative;} .hsf2c {margin-top: -25px;} .fabo {background: url('images/facebook-icon.svg') no-repeat; background-position: top; background-repeat: no-repeat; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; width: 50px; height: 50px; position: absolute; top: -25px; left: 0px;} .fabo:hover {background: url('images/facebook-icon-active.svg') no-repeat;} .liin {background: url('images/linkedin-icon.svg') no-repeat; background-position: top; background-repeat: no-repeat; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; width: 50px; height: 50px; position: absolute; top: -25px; left: 80px;} .liin:hover {background: url('images/linkedin-icon-active.svg') no-repeat;} .hsf3 {padding: 40px 0px;} .hsf3 a {color: var(--pink); text-decoration: none !important;} .hsf3 a:hover, .hsf3 a:active, .hsf3 a:focus {color: var(--green); text-decoration: none !important;} .hsf3r {margin: 0 auto; max-width: 1700px; text-align:center; } .hsf3c {} /* --------- END ------- */ /* -------------------------- */ /* --------- Lightbox ------- */ /* -------------------------- */ .collage-item { opacity: 0; transform: scale(0.9) rotate(var(--rotation, 0deg)); animation: fadeZoomIn 1s ease forwards; transition: transform 0.3s ease, box-shadow 0.3s ease; } @keyframes fadeZoomIn { to { opacity: 1; transform: scale(1) rotate(var(--rotation, 0deg)); } } /* Hover effect */ /*.collage-item:hover { transform: scale(1.05) rotate(calc(var(--rotation, 0deg) + 1deg)); box-shadow: 0 12px 28px rgba(0,0,0,0.35); z-index: 999; /* even boven de rest */ /*}*/ /* stagger effect */ .collage-item:nth-child(1) { animation-delay: 0.1s; } .collage-item:nth-child(2) { animation-delay: 0.3s; } .collage-item:nth-child(3) { animation-delay: 0.5s; } .collage-item:nth-child(4) { animation-delay: 0.7s; } .collage-item:nth-child(5) { animation-delay: 0.9s; } .collage-item:hover { transform: scale(1.05) rotate(calc(var(--rotation, 0deg) + 1deg)); box-shadow: 0 0 10px rgba(255,0,126,0.6), 0 0 20px rgba(255,0,126,0.5), 0 0 40px rgba(255,0,126,0.4); z-index: 999 !important; } .collage-item { opacity: 0; transform: scale(0.9) rotate(var(--rotation, 0deg)); animation: fadeZoomIn 1s ease forwards; transition: transform 0.3s ease, box-shadow 0.3s ease; } @keyframes fadeZoomIn { to { opacity: 1; transform: scale(1) rotate(var(--rotation, 0deg)); } } /* --------- RESPONSIVE ------- */ /* Large devices (desktops, 992px and up) */ @media (max-width: 1530px) { } /* Large devices (desktops, 992px and up) */ @media (min-width: 1201px) and (max-width: 1500px) { .boxrampopsri .title.tca {font-size: 44px;} .boxrampopsri .title.stca {font-size: 22px;} } /* Large devices (desktops, 992px and up) */ @media (min-width: 1200px) { /*.navbar {margin-left: 40px;}*/ .nav-link {/*margin: 5px 9px 5px 9px;*/} } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { .mobile {display:none !important;} .icon-bardk {display:none !important;} } /* Small devices (desktops, 992px and up) */ @media (min-width: 992px) and (max-width: 1199px) { /*.navbar {margin-left: 90px;}*/ .nav-linkaf a {margin: 5px 9px 5px 5px;} .menunavbar {padding-left: 0px; padding-right: 0px;} .mobile {display:none !important;} .ctaimg {margin-bottom: 20px;} .nav-linkaf a:hover, .nav-linkaf:focus, .nav-linkaf > .active a {margin: -4px 5px 0px;} .boxrampopsri .title.tca {font-size: 42px !important;} } /* Small devices (desktops, 992px and up) */ @media (max-width: 991px) { .desktop, .phnedk4 {display:none !important;} h1.tpw4 {font-size: 90px;} h1.hdr {font-size: 90px;} h1.sphead {font-size: 60px;} h2 {font-size: 60px;} h2.us {font-size: 60px;} h2.tblack {font-size: 60px;} h2.acta {font-size: 50px;} h3.tmtit {font-size: 60px;} h3.stca {font-size: 28px;} h3.bur4 {font-size: 32px;} h3.cas {font-size: 40px;} h3.carus {font-size: 40px;} h4.tpink {font-size: 32px;} h5.dcarus {font-size: 40px;} h5.bcta {font-size: 40px;} h5.fpri {font-size: 24px;} .title.tca {font-size: 42px !important;} .bpink, .bgreen, .bpurple {margin-bottom: 20px;} .overlay a {font-size: 24px;} /* CASES */ .imggridpg {width: 953px;} /* TEAM */ .dvdr {margin-top:0;} .hsttp p {padding: 40px 60px 0px;} .hstrcas, .hstrcas1 {padding: 100px 20px;} .masonry-columnpc, .masonry-columnpc1, .masonry-columnpc4, .masonry-columnpc5 {margin-top: 80px;} /* CONTACT */ .prcnt1 {margin-top: 0px;} /* CTA */ .ctaimg {margin-bottom: 20px;} /* SOCIALS */ .fabo, .liin {top: -45px;} } /* Small devices (desktops, 992px and up) */ @media (min-width: 577px) and (max-width: 991px) { .icon-bardk {display:none !important;} } /* Small devices (desktops, 992px and up) */ @media (max-width: 767px) { .imgplan, .ctaimg {margin-bottom: 20px;} /* CASES */ .pscr1 p {padding: 40px 15px;} } /* Small devices (desktops, 992px and up) */ @media (max-width: 576px) { .ctaimg {max-width:100%;} .pcccol {padding:15px;} .boxrampo .boxpo-content::before, .boxrampo .boxpo-content::after {display:none;} h1.tpw4 {font-size: 50px;} h1.hdr {font-size: 50px;} h1.sphead {font-size: 50px;} h2 {font-size: 42px;} h2.us {font-size: 42px;} h2.tblack {font-size: 42px;} h2.acta {font-size: 30px;} h3.tmtit {font-size: 48px;} h3.stca {font-size: 18px;} h3.bur4 {font-size: 25px;} h3.cas {font-size: 30px;} h3.carus {font-size: 30px;} h4.tpink {font-size: 24px;} h5.dcarus {font-size: 28px;} h5.bcta {font-size: 28px;} h5.fpri {font-size: 16px;} .title.tca {font-size: 32px !important;} .spcol {padding: 40px 15px 0px !important;} .stb1 {padding: 50px 25px;} .stb3 {padding: 50px 25px;} .stb3 h2 {font-size: 42px;} .stb4 {padding: 50px 25px;} .stb4 h2 {font-size: 42px;} .stb4a {padding: 50px 25px;} .stb4a h2 {font-size: 42px;} .stb4a h3 {font-size: 36px;} .img-check {width:25px; height: 25px;} /*.boxrampo .boxpo-content {padding-left:15px; padding-right: 15px; background: var(--blackop);*/ .boxrampo .title {color: var(--white); top: 39%; opacity: 1; transition: all .5s cubic-bezier(1,-.53,.405,1.425) 10ms; text-align: center;} .hcc {padding: 0px !important;} .icon-bar {top:0px;} .emalhd, .emaldkp {top:0; /*display:none;*/ padding: 14px;} .emalhd .fa-envelope-open, .emaldkp .fa-envelope-open {font-size: 2em !important;} .phnehd {top: 65px; /*top:0px;*/ padding: 14px; background-color: var(--pink); } .phnedkp {top: 65px;/*top:0px;*/ padding: 14px; background-color: var(--purple); } .phnehd:hover {top: 65px;/*top:0px;*/ padding: 14px; background-color: var(--green) !important; } .phnedkp:hover {top: 65px;/*top:0px;*/ padding: 14px; background-color: var(--green) !important; } .porthd, .portdkp {top: 130px; /*display:none;*/ padding:12px;} .emalhd .fa-envelope-open, .phnehd .fa-phone-flip, .phnehd .fa-folder-open {/*font-size: 1em !important;*/} .imggridtm {height: 375px;} .hrc {padding-top: 75px;} .hrt {padding: 75px 0px;} /* TEAM */ h3.tmusp, h3.tmusp1, h3.tmusp2 {font-size: 36px;} h3.neonTextwh {font-size: 48px;} .hsttp p {padding: 40px 15px 0px;} .masonry-columnpc, .masonry-columnpc1, .masonry-columnpc2, .masonry-columnpc3, .masonry-columnpc4, .masonry-columnpc5 {padding:0px 0px;} /* CONTACT */ .pccntcol1 p {padding: 40px 15px;} h3.cntusp {font-size: 36px;} /* CTA */ .ctacolimg {padding: 0px !important;} }