File: D:/HostingSpaces/SBogers10/verhoevenfourage.komma.pro/wwwroot/css-js/screen.css
* {
outline: 0; }
body, html, h1, h2, h3, h4, p, ul, ol, li, img {
margin: 0;
padding: 0;
border: 0; }
body {
font-family: "DIN1451W01-Mittelschrif", Arial, sans-serif;
font-size: 11px;
color: #E2E2E2;
background-color: #dddddd; }
::selection {
background: #EB3232;
/* Safari */
color: #ffffff; }
::-moz-selection {
background: #EB3232;
/* Firefox */
color: #ffffff; }
li {
vertical-align: text-top; }
.clear_left {
clear: left; }
.clear_both {
clear: both; }
.right {
float: right; }
.left {
float: left; }
.paddingNul {
padding-bottom: 0; }
strong {
font-weight: 700; }
.disableSelection {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none; }
.error {
color: red; }
h1 {
float: left;
width: 100%;
font-size: 20px;
text-transform: uppercase;
font-weight: 600;
line-height: 26px;
color: #fff; }
h2 {
float: left;
width: 100%;
font-size: 13px;
text-transform: uppercase;
font-weight: normal;
line-height: 19px;
color: #EB3232; }
h3 {
float: left;
width: 100%;
font-size: 16px;
text-transform: uppercase;
font-weight: normal;
line-height: 26px;
color: #fff; }
h3 a {
color: #fff; }
#textCTA {
color: #AC9F8E;
text-decoration: none;
display: block; }
p {
color: #4F4F4F;
font-size: 13px;
line-height: 19px;
padding-bottom: 19px;
width: 100%;
font-family: "HelveticaNeueW01-55Roma", Arial, sans-serif;
float: left; }
p strong {
font-family: "HelveticaNeueW01-65Medi", Arial, sans-serif;
font-style: normal;
font-weight: normal; }
p em {
font-family: "HelveticaNeueW01-56It", Arial, sans-serif;
font-style: normal;
font-weight: normal; }
a {
color: #363731; }
a:hover {
text-decoration: none; }
#mainframe {
margin: 0 auto;
position: relative;
max-width: 980px;
z-index: 1; }
#headerBackground {
width: 100%;
position: absolute;
left: 0;
top: 0;
background: #ffffff;
height: 150px; }
#mainframeLeft {
width: 300px;
float: left;
position: relative; }
#logo {
width: 190px;
height: 98px;
float: left;
margin-top: 15px; }
#logo a {
display: block;
width: 100%;
height: 100%; }
#logo a img.mobile {
display: none; }
#hoofdmenu {
float: left;
margin-top: 206px;
clear: left;
width: 250px; }
#hoofdmenu.fixed {
position: fixed;
top: 46px;
margin-top: 0; }
#hoofdmenu li {
list-style: none;
padding-top: 4px;
padding-bottom: 4px;
position: relative;
cursor: pointer; }
#hoofdmenu li a {
font-size: 18px;
line-height: 22px;
color: #fff;
font-weight: normal;
text-decoration: none;
text-transform: uppercase;
width: 100%;
display: block;
position: relative; }
#hoofdmenu li.active a {
left: 22px; }
#hoofdmenu li a span {
position: absolute;
display: block;
width: 0;
height: 11px;
background: url(/img/sprite_verhoeven.png) no-repeat -98px -132px;
top: 5px;
left: -22px; }
#hoofdmenu li.active a span {
width: 12px; }
#submenu {
margin-left: 22px;
margin-top: 5px;
display: none;
position: relative; }
#hoofdmenu li.active #submenu {
display: block; }
#hoofdmenu #submenu li a {
font-size: 15px;
line-height: 18px;
color: #fff;
font-weight: normal;
text-decoration: none;
text-transform: uppercase;
position: relative;
left: 0; }
#hoofdmenu #submenu li.notActive2 a {
left: 0; }
#hoofdmenu #submenu li.active a {
left: 22px; }
#hoofdmenu li.active #submenu li a span {
display: block;
position: absolute;
left: -22px;
top: 4px;
width: 0;
height: 11px;
background: url(/img/sprite_verhoeven.png) no-repeat -98px -132px; }
#hoofdmenu li.active #submenu li.active a span {
width: 12px; }
#mainframeMiddle {
width: 340px;
float: left;
position: relative; }
#mainframeMiddle .titleBlock {
margin-left: 10px;
float: left;
background-color: #EB3232;
padding-top: 70px;
padding-bottom: 21px;
width: 330px;
position: relative; }
#mainframeMiddle .titleBlockSide {
position: absolute;
width: 10px;
height: 120px;
background-color: #EB3232;
right: 0;
bottom: -120px; }
#mainframeMiddle .redCorner {
position: absolute;
width: 10px;
height: 10px;
background: url(/img/sprite_verhoeven.png) no-repeat 0 -118px;
right: 0;
bottom: -10px; }
#mainframeMiddle .citaat {
padding-left: 20px;
width: 270px;
padding-right: 40px;
border-bottom: 4px solid #E10000;
padding-bottom: 30px;
font-size: 33px;
line-height: 40px;
color: #fff;
text-transform: uppercase;
display: block;
margin-bottom: 35px; }
#mainframeMiddle .breed {
width: 290px;
padding-right: 20px; }
#mainframeMiddle h1 {
margin-left: 20px;
width: 250px;
position: relative;
font-weight: normal; }
#mainframeMiddle h1 .arrow {
position: absolute;
right: -40px;
top: 7px;
width: 12px;
height: 15px;
background: url(/img/sprite_verhoeven.png) no-repeat -135px -106px; }
#mainframeMiddle .columnContent {
float: left;
width: 330px;
background-color: #fff;
position: relative;
z-index: 20; }
#videoplayer {
position: relative;
float: left;
width: 330px;
height: 186px; }
#fotogalerie {
position: relative;
float: left;
width: 330px;
height: 220px;
overflow: hidden; }
#fotogalerie .vergrootIcon {
position: absolute;
right: 10px;
top: 10px;
width: 15px;
height: 15px;
background: url(/img/sprite_verhoeven.png) no-repeat 0 -99px;
z-index: 10;
opacity: 0;
filter: alpha(opacity=0); }
#fotogalerie ul {
width: 330px;
height: 220px;
position: relative; }
#fotogalerie li {
position: absolute;
left: 0;
top: 0;
display: none; }
#mainframeMiddle .columnContent .text {
width: 260px;
float: left;
margin-top: 25px;
margin-bottom: 40px;
padding-left: 30px; }
.text ul {
float: left;
padding-bottom: 19px; }
.text li {
list-style: none;
float: left;
width: 100%;
color: #4F4F4F;
font-family: "HelveticaNeueW01-55Roma", Arial, sans-serif;
font-size: 13px;
line-height: 19px; }
.text li span {
float: left;
padding-right: 20px; }
.text a, a.textLink {
color: #EB3232; }
#mainframeMiddle .columnFooter {
float: left;
width: 330px;
height: 100px;
position: relative;
margin-bottom: 65px;
z-index: 10; }
#mainframeMiddle .arrowAndShadow {
background: url(/img/sprite_verhoeven.png) no-repeat 0 -218px;
width: 330px;
height: 60px;
float: left;
position: relative;
z-index: 10; }
#columnLabel {
position: absolute;
left: 10px;
top: -80px;
width: 310px;
background: #EB3232;
text-align: center;
font-size: 15px;
line-height: 18px;
color: #fff;
padding-top: 50px;
padding-bottom: 24px;
z-index: 5; }
#columnLabel .labelBackgr {
position: absolute;
left: 0;
bottom: -44px;
width: 310px;
height: 44px;
background: url(/img/sprite_verhoeven.png) no-repeat 0 -278px; }
#columnLabel a {
color: #fff;
text-decoration: none; }
#columnLabel a:hover {
text-decoration: underline; }
#mainframeRight {
width: 340px;
float: left;
position: relative; }
#mainframeRight .keurmerken {
width: 175px;
height: 150px;
float: left; }
#mainframeRight .gmp {
float: left;
display: block;
width: 68px;
height: 68px;
position: relative;
margin-left: 55px;
margin-top: 42px; }
#mainframeRight .gmp span {
position: absolute;
left: 0;
top: 0;
width: 68px;
height: 68px; }
#mainframeRight .gmp .up {
background: url(/img/sprite_verhoeven.png) no-repeat -249px 0; }
#mainframeRight .gmp .hover {
opacity: 0;
filter: alpha(opacity=0);
background: url(/img/sprite_verhoeven.png) no-repeat -249px -68px; }
#talen {
width: 78px;
height: 150px;
float: left;
margin-left: 87px; }
#talen a {
cursor: pointer;
text-decoration: none; }
#talen ul {
float: left;
margin-top: 65px; }
#talen li {
list-style: none;
float: left;
width: 19px;
height: 20px;
position: relative;
margin-left: 7px; }
#talen li .up {
width: 19px;
height: 20px;
float: left;
background: url(/img/sprite_verhoeven.png) no-repeat; }
#talen li .hover {
width: 19px;
height: 20px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
background: url(/img/sprite_verhoeven.png) no-repeat; }
#talen li .ballon {
position: absolute;
bottom: -30px;
left: -5px;
padding-left: 6px;
padding-top: 7px;
background: url(/img/sprite_verhoeven.png) no-repeat -98px -103px;
opacity: 0;
filter: alpha(opacity=0);
width: 23px;
height: 15px;
text-transform: uppercase;
color: #fff;
font-size: 9px; }
#talen li.nl .up {
background-position: -47px -103px; }
#talen li.nl .hover {
background-position: -47px -124px; }
#talen li.uk .up {
background-position: -70px -103px; }
#talen li.uk .hover {
background-position: -70px -124px; }
#talen li.de .up {
background-position: -24px -103px; }
#talen li.de .hover {
background-position: -24px -124px; }
#mainframeRight .columnContent {
float: left;
margin-top: 320px;
width: 330px;
margin-left: 10px;
background-color: #bcb1a0; }
#mainframeRight #red.columnContent {
background-color: #EB3232; }
#red.columnContent {
margin-top: 381px; }
#red .citaat {
font-size: 20px;
line-height: 24px;
text-transform: uppercase;
margin-left: 30px;
margin-top: 25px;
margin-bottom: 25px;
width: 260px;
color: #fff;
display: block;
float: left; }
#red .columnBlock {
width: 330px; }
#red .blockContent {
float: left;
margin-top: 25px;
margin-bottom: 5px;
margin-left: 30px;
width: 270px; }
#overig.columnContent {
margin-top: 381px; }
#overig .columnBlock {
width: 330px; }
#overig .blockContent {
float: left;
margin-top: 20px;
margin-bottom: 25px;
margin-left: 30px;
width: 270px; }
#overig #google_maps {
margin-bottom: 25px; }
#overig #google_maps .blockContent {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
overflow: hidden;
float: left;
width: 330px;
height: 336px; }
#overig .cta_productLinks {
float: left;
margin-top: 15px;
margin-bottom: 3px;
margin-left: 20px; }
#overig .cta_product {
float: left;
color: #FFFFFF;
font-size: 16px;
line-height: 26px;
position: relative;
text-transform: uppercase;
width: 230px;
display: block;
margin-bottom: 4px; }
#overig .cta_product span {
background: url(/img/sprite_verhoeven.png) no-repeat -98px -132px;
height: 11px;
right: -49px;
top: 7px;
width: 12px;
position: absolute; }
#overig p {
font-size: 13px;
line-height: 26px;
text-transform: uppercase;
width: 230px;
position: relative;
display: block;
margin-bottom: 4px;
padding-bottom: 0;
color: #AC9F8E;
font-family: "DIN1451W01-Mittelschrif", Arial, sans-serif; }
#mainframeRight .columnContent h2 {
padding-left: 20px;
width: 310px;
background-color: #ac9f8e;
border-bottom: 4px solid #9A8F7F;
color: #fff;
font-size: 20px;
line-height: 26px;
padding-top: 11px;
padding-bottom: 11px; }
#overig .citaat {
padding: 25px 30px 25px 20px;
width: 280px;
background-color: #ac9f8e;
border-bottom: 4px solid #9A8F7F;
color: #fff;
font-size: 20px;
line-height: 24px;
display: block;
float: left;
text-transform: uppercase; }
#overig li {
list-style: none;
text-transform: uppercase;
color: #AC9F8E;
font-size: 13px;
line-height: 26px; }
#overig li span {
float: left;
padding-right: 20px; }
#mainframeRight h3 {
color: #fff;
font-size: 16px;
line-height: 26px;
text-transform: uppercase;
width: 230px;
margin-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
position: relative; }
#mainframeRight h3 .arrow {
position: absolute;
right: -50px;
top: 10px;
width: 10px;
height: 12px;
background: url(/img/sprite_verhoeven.png) no-repeat -136px -128px; }
#mainframeRight .columnBlock {
position: relative;
float: left;
background: #fff;
left: -10px;
margin-bottom: 5px; }
#mainframeRight .columnBlock .shadow {
position: absolute;
width: 334px;
height: 13px;
left: -2px;
bottom: -13px;
background: url(/img/sprite_verhoeven.png) no-repeat 0 -323px; }
#absoluteBlock {
position: relative;
height: 120px;
float: left; }
#absoluteBlock .contentBlock {
position: absolute;
left: 0;
top: 0; }
#mainframeRight .columnContent .footer {
width: 330px;
height: 20px;
background: url(/img/sprite_verhoeven.png) no-repeat 0 -192px;
position: absolute;
left: 10px;
bottom: -20px;
z-index: -1; }
#mainframeRight #red.columnContent .footer {
background: url(/img/sprite_verhoeven.png) no-repeat 0 -167px; }
#mainframeRight .columnBlock .productenLijst {
margin-left: 30px;
float: left;
margin-top: 30px;
margin-bottom: 22px; }
#mainframeRight .columnBlock .productenLijst li {
float: left;
list-style: none;
width: 150px;
margin-bottom: 5px;
cursor: pointer; }
#mainframeRight .columnBlock .productenLijst li a {
color: #C0B19D;
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
line-height: 12px; }
#fourageProducten .columnBlock {
padding-left: 30px;
padding-top: 15px;
width: 300px;
position: relative;
overflow: hidden; }
#fourageProducten .columnBlock p {
padding-bottom: 15px;
width: 170px; }
#fourageProducten .productImage {
position: absolute;
width: 110px;
height: 225px;
background: no-repeat left top;
top: 0;
right: 0; }
#fourageProducten #absoluteBlock {
height: 65px;
width: 100%; }
#fourageProducten #absoluteBlock .columnBlock {
position: absolute;
top: 0; }
#strooiselProducten a.cta_product {
color: #FFFFFF;
display: block;
float: left;
font-size: 16px;
line-height: 26px;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
text-transform: uppercase;
width: 230px;
margin-left: 20px; }
#strooiselProducten a.cta_product span {
background: url(/img/sprite_verhoeven.png) no-repeat -98px -132px;
position: absolute;
height: 11px;
right: -60px;
top: 10px;
width: 12px; }
#strooiselProducten .columnBlock {
padding-left: 30px;
padding-top: 30px;
padding-bottom: 30px;
width: 300px;
position: relative;
overflow: hidden;
cursor: pointer; }
#strooiselProducten .columnBlock a {
padding-bottom: 15px;
line-height: 20px;
height: 20px;
font-size: 10px;
color: #EB3232;
text-transform: uppercase;
text-decoration: none; }
#strooiselProducten .productImage {
position: absolute;
width: 300px;
height: 80px;
background: no-repeat left top;
top: 0;
right: 0; }
.stroOpsomming li {
float: left;
width: 100%;
list-style-image: url(/img/li_dot.png);
margin-left: 11px; }
#backgroundPhotos {
position: absolute;
left: 0;
top: 150px;
width: 100%;
overflow: hidden;
display: none; }
#backgroundPhotos img {
position: relative;
width: auto;
height: auto; }
#footer {
float: left;
background: #fff;
width: 100%; }
#footerContent {
margin: 70px auto;
width: 930px;
padding-bottom: 70px; }
#footermenu {
float: left;
margin-top: 2px; }
#footermenu li {
list-style: none;
margin-bottom: 13px; }
#footermenu li.minderMargin {
margin-bottom: 4px; }
#footermenu .submenu {
margin-left: 20px;
display: block;
margin-top: 13px;
padding-bottom: 1px; }
#footermenu .submenu li {
list-style: none;
margin-bottom: 13px; }
#footermenu li a {
color: #AC9F8E;
font-size: 12px;
line-height: 14px;
text-decoration: none;
text-transform: uppercase; }
#footermenu li.active a {
color: #EB3232; }
#footermenu .submenu li a {
font-size: 10px;
line-height: 12px;
color: #AC9F8E; }
#footermenu .submenu li.active a {
color: #EB3232; }
#contactgegevens {
float: right;
color: #AC9F8E;
font-size: 12px;
line-height: 18px;
text-transform: uppercase;
text-align: right; }
#contactgegevens strong {
font-size: 12px;
font-weight: normal;
line-height: 20px; }
#contactgegevens a {
text-decoration: none;
color: #AC9F8E; }
#contactgegevens a:hover {
color: #EB3232; }
#sideMenu {
float: right;
clear: right;
margin-top: 134px; }
#sideMenu li {
list-style: none;
text-align: right;
margin-bottom: 13px; }
#sideMenu li a {
color: #AC9F8E;
font-size: 12px;
line-height: 14px;
text-decoration: none;
text-transform: uppercase; }
#sideMenu li.active a {
color: #EB3232; }
#komma {
float: right;
clear: right;
cursor: pointer;
margin-top: 10px; }
#komma a {
color: #AC9F8E;
font-size: 10px;
line-height: 17px;
text-decoration: none;
text-transform: uppercase;
float: right;
text-align: right;
margin-right: 10px;
transition: color 0.2s ease-in-out;
cursor: pointer; }
#komma .komma_logo {
float: right;
width: 30px;
height: 30px;
position: relative;
cursor: pointer; }
#komma .komma_logo svg .cls-1 {
fill: #ac9f8e;
transition: fill 0.2s ease-in-out; }
#komma:hover {
cursor: pointer; }
#komma:hover a {
color: #28348a; }
#komma:hover .komma_logo svg .cls-1 {
fill: #28348a; }
#komma .komma_logo div {
width: 30px;
height: 30px;
position: absolute;
top: 0;
left: 0; }
#routeForm {
position: relative;
float: left;
margin-bottom: 30px; }
#routeForm input[type="text"] {
background: #EFEFEF;
border: 1px solid #BCB1A0;
height: 16px;
line-height: 16px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 10px;
width: 260px;
color: #AC9F8E; }
#routeForm .submitBtn {
position: absolute;
right: 0;
top: 0;
background: url(/img/sprite_verhoeven.png) no-repeat -200px -102px;
width: 30px;
height: 30px;
cursor: pointer; }
#routeForm .submitBtn:hover {
background: url(/img/sprite_verhoeven.png) no-repeat -200px -132px; }
#google_maps .blockContent {
float: left;
width: 330px;
height: 336px; }
#google_maps .blockContent .gmnoprint {
display: none !important; }
#map_canvas {
float: left;
width: 330px;
height: 380px; }
#colorbox, #cboxOverlay, #cboxWrapper {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
overflow: hidden; }
#cboxOverlay {
position: fixed;
width: 100%;
height: 100%; }
#cboxMiddleLeft, #cboxBottomLeft {
clear: left; }
#cboxContent {
position: relative; }
#cboxLoadedContent {
overflow: auto; }
#cboxTitle {
margin: 0; }
#cboxLoadingOverlay, #cboxLoadingGraphic {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
cursor: pointer; }
.cboxPhoto {
float: left;
margin: auto;
border: 0;
display: block;
max-width: none; }
.cboxIframe {
width: 100%;
height: 100%;
display: block;
border: 0; }
#colorbox, #cboxContent, #cboxLoadedContent {
box-sizing: content-box; }
#cboxOverlay {
background: #ffffff; }
#colorbox #cboxContent {
margin-top: 32px;
overflow: visible; }
.cboxIframe {
background: #fff; }
#cboxError {
padding: 50px;
border: 1px solid #ccc; }
#cboxLoadedContent {
background: #EB3232; }
#cboxLoadingGraphic {
background: url(/img/loading.gif) no-repeat center center; }
#cboxLoadingOverlay {
background: #EB3232; }
#cboxTitle {
position: absolute;
top: -22px;
left: 0;
color: #000; }
#cboxCurrent {
position: absolute;
top: -22px;
right: 205px;
text-indent: -9999px; }
#cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose {
text-indent: -9999px;
width: 20px;
height: 20px;
position: absolute;
top: -20px;
background: url(/img/controls.png) no-repeat 0 0; }
#cboxPrevious {
background-position: 0 0;
right: 44px; }
#cboxPrevious:hover {
background-position: 0px -25px; }
#cboxNext {
background-position: -25px 0px;
right: 22px; }
#cboxNext:hover {
background-position: -25px -25px; }
#cboxClose {
background-position: -50px 0px;
right: 0; }
#cboxClose:hover {
background-position: -50px -25px; }
.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious {
right: 66px; }
.cboxSlideshow_on #cboxSlideshow {
background-position: -75px -25px;
right: 44px; }
.cboxSlideshow_on #cboxSlideshow:hover {
background-position: -100px -25px; }
.cboxSlideshow_off #cboxSlideshow {
background-position: -100px 0px;
right: 44px; }
.cboxSlideshow_off #cboxSlideshow:hover {
background-position: -75px -25px; }
#taalPopUp {
max-width: 500px; }
#taalPopUp .titel {
font-size: 33px;
line-height: 40px;
text-transform: uppercase;
color: #fff;
padding-left: 50px;
padding-top: 37px;
display: block;
padding-bottom: 33px;
float: left; }
#taalPopUp ul {
float: left;
width: 100%;
margin-bottom: 50px; }
#taalPopUp li {
list-style: none;
width: 100%;
float: left;
position: relative;
cursor: pointer; }
#taalPopUp li a {
float: left;
height: 55px;
width: 100%;
text-decoration: none;
position: relative;
cursor: pointer; }
#taalPopUp li a .text {
font-size: 20px;
line-height: 55px;
color: #fff;
text-transform: uppercase;
text-decoration: none;
margin-left: 85px; }
#taalPopUp li.nederlands {
background-color: #bd0f35; }
#taalPopUp li.english {
background-color: #b40e32; }
#taalPopUp li.deutsch {
background-color: #a90e2f; }
#taalPopUp li .arrow {
width: 6px;
height: 6px;
background: url(/img/sprite_verhoeven.png) no-repeat -119px -135px;
position: absolute;
right: 50px;
top: 24px; }
#taalPopUp li .up {
position: absolute;
left: 50px;
top: 17px;
width: 19px;
height: 20px;
background: url(/img/sprite_verhoeven.png) no-repeat; }
#taalPopUp li .hover {
position: absolute;
left: 50px;
top: 18px;
width: 19px;
height: 20px;
opacity: 0;
filter: alpha(opacity=0);
background: url(/img/sprite_verhoeven.png) no-repeat; }
#taalPopUp li.nederlands .up {
background-position: -47px -103px; }
#taalPopUp li.nederlands .hover {
background-position: -47px -124px; }
#taalPopUp li.english .up {
background-position: -70px -103px; }
#taalPopUp li.english .hover {
background-position: -70px -124px; }
#taalPopUp li.deutsch .up {
background-position: -24px -103px; }
#taalPopUp li.deutsch .hover {
background-position: -24px -124px; }
#sitemap_ul {
padding-bottom: 40px; }
#sitemap_ul li {
float: left;
width: 100%;
list-style-image: url(/img/li_dot.png);
margin-left: 11px; }
#sitemap_ul li.marginTop {
margin-top: 19px; }
#sitemap_ul .subSitemap {
margin-left: 22px;
padding-bottom: 0; }
#sitemap_ul li a {
color: #4F4F4F;
text-decoration: none; }
#sitemap_ul li a:hover {
color: #EB3232; }
#mainframeRight .columnContent h2.textH2 {
color: #EB3232;
background: none;
font-size: 13px;
font-weight: normal;
line-height: 19px;
text-transform: uppercase;
border: none;
width: 100%;
padding: 0 0 0 0; }
p.marginBottom {
margin-bottom: 200px; }
#niwo {
float: left;
display: block;
width: 112px;
height: 46px;
position: relative;
margin-top: 10px; }
#niwo span {
background: url(/img/sprite_verhoeven.png) no-repeat;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0; }
#niwo .up {
background-position: 0 -340px; }
#niwo .hover {
background-position: 0 -386px;
opacity: 0;
filter: alpha(opacity=0); }
#evo {
float: left;
display: block;
width: 117px;
height: 42px;
position: relative;
margin-top: 14px;
margin-left: 31px; }
#evo span {
background: url(/img/sprite_verhoeven.png) no-repeat;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0; }
#evo .up {
background-position: -113px -340px; }
#evo .hover {
background-position: -113px -382px;
opacity: 0;
filter: alpha(opacity=0); }
.preventScroll {
overflow: hidden;
overflow-y: scroll;
position: fixed;
width: 100%; }
.mobile-navigation {
position: fixed;
z-index: 1000;
height: 100vh;
display: none;
width: 100%;
left: 0;
top: 0;
pointer-events: none;
font-family: "HelveticaNeueW01-55Roma", Arial, sans-serif; }
.mobile-navigation .bar {
padding: 25px 0 55px 0;
pointer-events: all;
position: relative;
z-index: 4;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: all 0.3s;
background: white; }
.mobile-navigation .bar .toggle-menu {
width: 60px;
height: 100%;
z-index: 3;
border: rgba(255, 255, 255, 0.1);
cursor: pointer;
position: relative;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center; }
.mobile-navigation .bar .toggle-menu .icon span {
position: relative;
width: 25px;
height: 3px;
margin-bottom: 3px;
background-color: #EB3232;
border-radius: 9999px;
display: block;
transition: all 0.3s; }
.mobile-navigation .bar .toggle-menu .icon span:last-of-type {
margin-bottom: 0;
width: 17px;
bottom: 0; }
.mobile-navigation .bar .toggle-menu .icon span:first-of-type {
top: 0; }
.mobile-navigation .bar .toggle-menu:hover .icon span:last-of-type {
width: 25px; }
.mobile-navigation .bar .logo {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center; }
.mobile-navigation .bar .logo a {
position: relative;
top: -3px;
width: calc(100% - 140px);
height: 50%;
display: inline-block;
background-position: center;
background-size: contain;
background-repeat: no-repeat; }
.mobile-navigation .bar .contact-button {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 60px;
z-index: 5; }
.mobile-navigation .bar .contact-button a {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
height: 100%; }
.mobile-navigation .bar .contact-button a:before {
content: "";
background-size: 502px 423px;
width: 23px;
height: 25px;
display: inline-block; }
.mobile-navigation .shader {
width: 100%;
box-sizing: border-box;
height: 100%;
position: absolute;
left: 0;
top: 95px;
background-color: #EB3232;
opacity: 0; }
.mobile-navigation .menu {
height: calc(100% - 95px);
width: 80%;
left: 0;
top: 95px;
background-color: #EB3232;
min-width: 275px;
position: absolute;
pointer-events: all;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
z-index: 5;
transition: all 0.3s;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); }
@media screen and (max-width: 500px) {
.mobile-navigation .menu {
width: 90%; } }
.mobile-navigation nav {
margin-top: 50px;
padding: 0 10px 80px 60px; }
.mobile-navigation nav h3 {
font-size: 1.3rem;
color: white; }
.mobile-navigation nav ul {
padding: 0;
list-style: none;
font-size: 1.3rem;
text-transform: uppercase; }
.mobile-navigation nav ul.locations {
margin-bottom: 45px; }
.mobile-navigation nav ul.locations, .mobile-navigation nav ul.business {
margin-top: 5px; }
.mobile-navigation nav ul li {
margin-bottom: 4px; }
.mobile-navigation nav ul li a, .mobile-navigation nav ul li span {
color: white;
position: relative;
display: inline-block;
text-decoration: none;
transition: color 0.2s;
cursor: pointer;
line-height: 3rem; }
.mobile-navigation nav ul li #submenu {
display: block;
padding-left: 20px;
font-size: 0.85em;
overflow: hidden;
opacity: 1;
transition: height 0.5s, opacity 0.2s; }
.mobile-navigation nav ul li #submenu li a {
line-height: 2rem; }
.mobile-navigation nav ul li #submenu li.active a {
color: white !important; }
.mobile-navigation nav ul li.active a, .mobile-navigation nav ul li.active span {
color: white; }
.mobile-navigation nav ul li.active > a {
border-bottom: solid 2px;
width: 100%; }
.mobile-navigation.active .bar .toggle-menu {
border-left: 1px solid rgba(255, 255, 255, 0.1); }
.mobile-navigation.active .bar .toggle-menu .icon span {
opacity: 0; }
.mobile-navigation.active .bar .toggle-menu .icon span:first-of-type {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
opacity: 1;
top: 6px;
left: -2px; }
.mobile-navigation.active .bar .toggle-menu .icon span:last-of-type {
width: 25px;
opacity: 1;
bottom: 6px;
left: -2px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg); }
.mobile-navigation.active .menu {
z-index: 1100;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.mobile-navigation.shader-active .shader {
opacity: 0.4;
pointer-events: all; }
.mobile-navigation.allow-animation .shader {
transition: all 0.2s; }
.mobile-navigation.allow-animation .menu {
transition: all 0.3s;
transition-timing-function: ease-in-out; }
@media screen and (max-width: 994px) {
.mobile-navigation {
display: block; }
.mobile-navigation header {
height: 60px;
visibility: hidden;
overflow: hidden; }
.mobile-navigation .sticky-header, .mobile-navigation .sticky-header.show {
display: none; } }
@media screen and (max-width: 400px) {
.mobile-navigation nav {
padding-left: 30px; }
.mobile-navigation nav ul {
font-size: 1.2rem; } }
@media screen and (max-width: 994px) {
body {
background: none; }
#backgroundPhotos {
top: 100px; }
#mainframeLeft, #mainframeMiddle, #mainframeRight {
float: none;
margin: 0 auto; }
#mainframeLeft h1, #mainframeLeft h2, #mainframeLeft h3, #mainframeMiddle h1, #mainframeMiddle h2, #mainframeMiddle h3, #mainframeRight h1, #mainframeRight h2, #mainframeRight h3 {
width: 100%;
box-sizing: border-box;
margin-left: 0;
padding: 0 22px; }
#mainframeLeft h1 .arrow, #mainframeLeft h2 .arrow, #mainframeLeft h3 .arrow, #mainframeMiddle h1 .arrow, #mainframeMiddle h2 .arrow, #mainframeMiddle h3 .arrow, #mainframeRight h1 .arrow, #mainframeRight h2 .arrow, #mainframeRight h3 .arrow {
right: 20px; }
#mainframeLeft {
width: 400px; }
#mainframeMiddle {
width: 90%;
top: 100px; }
#mainframeMiddle .titleBlock {
margin: 0;
width: 100%; }
#mainframeMiddle .citaat {
width: auto;
padding-left: 22px; }
#mainframeMiddle .titleBlockSide {
display: none; }
#mainframeMiddle .columnContent, #mainframeMiddle .columnFooter {
width: 100%; }
#mainframeMiddle .columnContent #fotogalerie {
width: 100%;
overflow: hidden;
height: 58vw; }
#mainframeMiddle .columnContent #fotogalerie ul {
width: 100%; }
#mainframeMiddle .columnContent #fotogalerie ul li {
width: 100%; }
#mainframeMiddle .columnContent img {
width: 100%; }
#mainframeMiddle .columnContent img.large {
display: block; }
#mainframeMiddle .columnContent img.small {
display: none; }
#mainframeMiddle .columnContent .text {
width: auto;
padding: 5% 10% 0 10%;
position: relative; }
#mainframeMiddle .columnContent .text #anchor {
position: absolute;
top: -175px; }
#mainframeMiddle .columnContent .text p, #mainframeMiddle .columnContent .text h2, #mainframeMiddle .columnContent .text li {
font-size: 18px;
line-height: 26px; }
#mainframeMiddle .columnContent .text h2 {
padding: 0; }
#mainframeMiddle .columnContent .text .stroOpsomming li {
list-style-image: none;
list-style-type: disc; }
#mainframeMiddle .columnContent #videoplayer {
width: 100%;
height: 49vw; }
#mainframeMiddle .arrowAndShadow {
background: url(/img/sprite_verhoeven_mobile.png) no-repeat 0 0;
width: 100%;
background-size: 201%;
height: 16vw;
top: -1px; }
#mainframeMiddle .columnFooter {
margin-bottom: 40%; }
#mainframeMiddle .columnFooter #columnLabel {
padding-top: 70px;
position: static;
left: 0;
width: 96%;
margin: 0 auto;
font-size: 3vw;
line-height: 4vw; }
#mainframeMiddle .columnFooter #columnLabel .labelBackgr {
position: absolute;
left: auto;
bottom: auto;
width: 97%;
height: 14vw;
background: transparent url(/img/sprite_verhoeven_mobile.png) no-repeat 101.1% 0;
background-size: 200%;
z-index: -1; }
#logo {
float: none;
margin: 23px auto;
z-index: 1001;
position: fixed;
width: 55%;
max-width: 400px; }
#logo a img.mobile {
display: block; }
#logo a img.normal {
display: none; }
#mainframeRight .columnContent h2 {
width: 100%; }
#mainframeRight .columnContent .footer {
left: auto; }
#mainframeRight .keurmerken, #hoofdmenu, #footerContent #footermenu, #footerContent #contactgegevens {
display: none; }
#footerContent {
width: 100%;
padding-bottom: 0; }
#footerContent #sideMenu {
margin-top: 0;
float: none; }
#footerContent #sideMenu li {
text-align: center; }
#footerContent #komma {
float: none;
width: 190px;
margin: 40px auto; }
#mainframeRight {
width: 90%;
position: initial; }
#mainframeRight .columnContent {
margin-top: 20vw;
margin-left: 0;
width: 100%; }
#mainframeRight .columnContent .citaat {
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 25px 30px; }
#mainframeRight .columnContent .columnBlock, #mainframeRight .columnContent #absoluteBlock {
width: 100%;
box-shadow: 0 8px 10px -10px black;
border-collapse: separate; }
#mainframeRight .columnContent .columnBlock .shadow, #mainframeRight .columnContent #absoluteBlock .shadow {
background: none; }
#mainframeRight .columnContent .columnBlock img, #mainframeRight .columnContent #absoluteBlock img {
width: 100%; }
#mainframeRight .columnContent .columnBlock .productenLijst li, #mainframeRight .columnContent #absoluteBlock .productenLijst li {
width: 150px;
margin-bottom: 15px; }
#mainframeRight .columnContent .columnBlock .productenLijst li a, #mainframeRight .columnContent #absoluteBlock .productenLijst li a {
font-size: 18px;
line-height: 24px; }
#mainframeRight .columnContent .blockContent {
width: 93%; }
#mainframeRight .columnContent .blockContent p {
font-size: 18px;
line-height: 26px;
border-collapse: separate; }
#mainframeRight .columnContent #absoluteBlock {
height: auto; }
#mainframeRight #fourageProducten .blockContent p {
width: 73%;
padding: 10px 0 25px 0; }
#mainframeRight #fourageProducten #absoluteBlock {
height: 120px; }
#overig #google_maps .blockContent {
width: 100%; }
#overig #google_maps .blockContent #map_canvas {
width: 100%; }
#overig .cta_productLinks .cta_product {
max-width: 40%;
min-width: 200px;
padding-right: 30px; }
#overig .cta_productLinks .cta_product span {
right: 5px; }
#talen {
position: fixed;
z-index: 1000;
right: 25px;
top: 0; }
#talen ul {
margin: 25px 0; }
#colorbox, #cboxWrapper, #cboxTopCenter, #cboxContent, #cboxBottomCenter, #cboxLoadedContent {
max-width: 500px !important;
width: 100% !important; }
#taalPopUp .titel {
font-size: 27px; } }
@media screen and (max-width: 994px) and (min-width: 400px) {
#taalPopUp .titel {
font-size: calc(27px + 6 * (100vw - 400px) / 594); } }
@media screen and (max-width: 994px) and (min-width: 994px) {
#taalPopUp .titel {
font-size: 33px; } }
@media screen and (max-width: 768px) {
#mainframeRight .columnContent .columnBlock .productenLijst li, #mainframeRight .columnContent #absoluteBlock .productenLijst li {
width: 125px; }
#mainframeRight .columnContent .columnBlock .productenLijst li a, #mainframeRight .columnContent #absoluteBlock .productenLijst li a {
font-size: 14px; } }
@media screen and (max-width: 640px) {
#mainframeLeft {
width: 65%; } }
@media screen and (max-width: 425px) {
#mainframeMiddle .citaat {
font-size: 21px;
line-height: 34px; }
#mainframeMiddle .columnFooter {
margin-bottom: 50%; }
#mainframeMiddle .columnFooter #columnLabel {
font-size: 18px;
line-height: 24px; }
#mainframeMiddle .columnContent .text p, #mainframeMiddle .columnContent .text h2, #mainframeMiddle .columnContent .text li {
font-size: 16px;
line-height: 24px; }
#mainframeRight .columnContent .blockContent {
width: 85%; }
#mainframeRight .columnContent .footer {
background: url(/img/sprite_verhoeven.png) no-repeat 0 -148px;
background-size: 100%;
width: 256px; }
#mainframeRight #red.columnContent .footer {
background: url(/img/sprite_verhoeven.png) no-repeat 0 -129px;
background-size: 100%;
height: 17px;
bottom: -16px; }
#mainframeRight #fourageProducten .productImage, #mainframeRight #strooiselProducten .productImage {
width: 25%; }
#mainframeRight #fourageProducten .blockContent p, #mainframeRight #strooiselProducten .blockContent p {
font-size: 16px;
line-height: 24px; }
#taalPopUp .titel {
font-size: 20px; }
#talen {
right: 20px; } }
@media (min-width: 500px) {
#colorbox {
left: calc(50% - 250px) !important; } }
/*# sourceMappingURL=screen.css.map */