File: D:/HostingSpaces/SBogers10/verhoevenfourage.komma.pro/wwwroot/css-js/screen.sass
@charset "utf-8"
@import "_prefixer.scss"
//Colors used in Mobile Menu
$fontColor: #333
$mainColor: #EB3232
$activeColor: white
$barColor: #1b71dd
$hoverColor: #98a0b3
$blue: #1b71dd
$borderColor: rgba(255,255,255, .1)
*
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%
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
svg
.cls-1
fill: rgb(172, 159, 142)
transition: fill 0.2s ease-in-out
#komma:hover
cursor: pointer
a
color: #28348a
.komma_logo
svg
.cls-1
fill: #28348a
#komma .komma_logo div
width: 30px
height: 30px
position: absolute
top: 0
left: 0
//#komma .komma_logo .up
// background: url(/img/spirte/komma_logo.svg) no-repeat
//
//#komma .komma_logo .hover
// opacity: 0
// filter: alpha(opacity=0)
// background: url(/img/spirte/komma_logo.svg) no-repeat -156px -132px
#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 Core Style:
// The following CSS is consistent between example themes and should not be altered.
#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
//
// User Style:
// Change the following styles to modify the appearance of ColorBox. They are
// ordered & tabbed in a way that represents the nesting of the generated HTML.
#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)
// ------------- Mobile Menu mixins ---------------- //
=flex($justify: space-between, $alignItem: initial)
display: -ms-flexbox /* TWEENER - IE 10 */
display: -webkit-flex /* NEW - Chrome */
display: flex
+prefixer(justify-content, $justify, webkit moz ms)
+prefixer(align-items, $alignItem, webkit moz ms)
=respond-to-width($width)
$width : $width + 'px'
@media screen and (max-width: $width)
@content
@mixin transform($property: none)
// none | <transform-function>
@include prefixer(transform, $property, webkit moz ms o spec)
=translate3d($horizontal: 0, $vertical: 0, $z: 0)
+transform(translate3d($horizontal, $vertical, $z))
$spriteWidth: 502px
$spriteHeight: 423px
=sprite($position, $width: auto, $height: auto)
//background: url("/img/zuiderbos-sprite.min.svg?v=2") $position no-repeat
background-size: $spriteWidth $spriteHeight
width: $width
height: $height
@function strip-unit($value)
@return $value / ($value * 0 + 1)
@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value)
@each $property in $properties
#{$property}: $min-value
@media screen and (min-width: $min-vw)
@each $property in $properties
#{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})
@media screen and (min-width: $max-vw)
@each $property in $properties
#{$property}: $max-value
// ------------------------------------ //
.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
.bar
padding: 25px 0 55px 0
pointer-events: all
position: relative
z-index: 4
+translate3d(0,0,0)
transition: all 0.3s
//transition-delay: 0.4s
background: white
.toggle-menu
width: 60px
height: 100%
z-index: 3
border: $borderColor
cursor: pointer
position: relative
+flex(center, center)
.icon
span
position: relative
width: 25px
height: 3px
margin-bottom: 3px
background-color: $mainColor
border-radius: 9999px
display: block
transition: all 0.3s
&:last-of-type
margin-bottom: 0
width: 17px
bottom: 0
&:first-of-type
top: 0
&:hover
.icon
span:last-of-type
width: 25px
.logo
height: 100%
width: 100%
position: absolute
left: 0
top: 0
+flex(center, center)
a
position: relative
top: -3px
width: calc(100% - 140px)
height: 50%
display: inline-block
background-position: center
background-size: contain
background-repeat: no-repeat
//background-image: url("/img/mobile-logo.svg")
.contact-button
position: absolute
right: 0
top: 0
height: 100%
width: 60px
z-index: 5
a
+flex(center, center)
height: 100%
&:before
content: ''
+sprite(-99px -397px, 23px, 25px)
display: inline-block
.shader
width: 100%
box-sizing: border-box
height: 100%
position: absolute
left: 0
top: 95px
background-color: $mainColor
opacity: 0
//transition-delay: 0.4s
.menu
height: calc(100% - 95px)
width: 80%
left: 0
top: 95px
background-color: $mainColor
min-width: 275px
position: absolute
pointer-events: all
overflow-x: auto
-webkit-overflow-scrolling: touch
z-index: 5
transition: all 0.3s
+translate3d(-100%, 0, 0)
+respond-to-width(500)
width: 90%
nav
margin-top: 50px
padding: 0 10px 80px 60px
h3
font-size: 1.3rem
color: white
ul
padding: 0
list-style: none
font-size: 1.3rem
text-transform: uppercase
&.locations
margin-bottom: 45px
&.locations, &.business
margin-top: 5px
li
margin-bottom: 4px
a, span
color: white
position: relative
display: inline-block
text-decoration: none
transition: color 0.2s
cursor: pointer
line-height: 3rem
#submenu
display: block
padding-left: 20px
font-size: 0.85em
overflow: hidden
opacity: 1
transition: height 0.5s, opacity 0.2s
li
a
line-height: 2rem
&.active
a
color: $activeColor !important
&.active
a, span
color: $activeColor
>a
border-bottom: solid 2px
width: 100%
&.active
.bar
.toggle-menu
border-left: 1px solid $borderColor
.icon
span
opacity: 0
&:first-of-type
+transform(rotate(45deg))
opacity: 1
top: 6px
left: -2px
&:last-of-type
width: 25px
opacity: 1
bottom: 6px
left: -2px
+transform(rotate(-45deg))
.menu
z-index: 1100
+translate3d(0, 0, 0)
&.shader-active
.shader
opacity: 0.4
pointer-events: all
&.allow-animation
.shader
transition: all 0.2s
.menu
transition: all 0.3s
transition-timing-function: ease-in-out
+respond-to-width(994)
display: block
header
height: 60px
visibility: hidden
overflow: hidden
.sticky-header, .sticky-header.show
display: none
//.mobile-navigation
//display: block
+respond-to-width(400)
nav
padding-left: 30px
ul
font-size: 1.2rem
+respond-to-width(994)
body
background: none
#backgroundPhotos
top: 100px
#mainframeLeft, #mainframeMiddle, #mainframeRight
float: none
margin: 0 auto
h1, h2, h3
width: 100%
box-sizing: border-box
margin-left: 0
padding: 0 22px
.arrow
right: 20px
#mainframeLeft
width: 400px
#mainframeMiddle
width: 90%
top: 100px
.titleBlock
margin: 0
width: 100%
.citaat
width: auto
padding-left: 22px
.titleBlockSide
display: none
.columnContent, .columnFooter
width: 100%
.columnContent
#fotogalerie
width: 100%
overflow: hidden
height: 58vw
ul
width: 100%
li
width: 100%
img
width: 100%
&.large
display: block
&.small
display: none
.text
width: auto
padding: 5% 10% 0 10%
position: relative
#anchor
position: absolute
top: -175px
p, h2, li
font-size: 18px
line-height: 26px
h2
padding: 0
.stroOpsomming
li
list-style-image: none
list-style-type: disc
#videoplayer
width: 100%
height: 49vw
.arrowAndShadow
background: url(/img/sprite_verhoeven_mobile.png) no-repeat 0 0
width: 100%
background-size: 201%
height: 16vw
top: -1px
.columnFooter
margin-bottom: 40%
#columnLabel
padding-top: 70px
position: static
left: 0
width: 96%
margin: 0 auto
font-size: 3vw
line-height: 4vw
.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
a
img
&.mobile
display: block
&.normal
display: none
#mainframeRight
.columnContent
h2
width: 100%
.footer
left: auto
#mainframeRight .keurmerken, #hoofdmenu, #footerContent #footermenu, #footerContent #contactgegevens
display: none
#footerContent
width: 100%
padding-bottom: 0
#sideMenu
margin-top: 0
float: none
li
text-align: center
#komma
float: none
width: 190px
margin: 40px auto
#mainframeRight
width: 90%
position: initial
.columnContent
margin-top: 20vw
margin-left: 0
width: 100%
.citaat
width: 100%
box-sizing: border-box
margin: 0
padding: 25px 30px
.columnBlock, #absoluteBlock
width: 100%
box-shadow: 0 8px 10px -10px black
border-collapse: separate
.shadow
background: none
img
width: 100%
.productenLijst
li
width: 150px
margin-bottom: 15px
a
font-size: 18px
line-height: 24px
.blockContent
width: 93%
p
font-size: 18px
line-height: 26px
border-collapse: separate
#absoluteBlock
height: auto
#fourageProducten
.blockContent
p
width: 73%
padding: 10px 0 25px 0
#absoluteBlock
height: 120px
#overig
#google_maps
.blockContent
width: 100%
#map_canvas
width: 100%
.cta_productLinks
.cta_product
max-width: 40%
min-width: 200px
padding-right: 30px
span
right: 5px
#talen
position: fixed
z-index: 1000
right: 25px
top: 0
ul
margin: 25px 0
#colorbox, #cboxWrapper, #cboxTopCenter, #cboxContent, #cboxBottomCenter, #cboxLoadedContent
max-width: 500px !important
width: 100% !important
#taalPopUp
.titel
@include fluid-type(font-size, 400px, 994px, 27px, 33px)
+respond-to-width(768)
#mainframeRight
.columnContent
.columnBlock, #absoluteBlock
.productenLijst
li
width: 125px
a
font-size: 14px
+respond-to-width(640)
#mainframeLeft
width: 65%
+respond-to-width(425)
#mainframeMiddle
.citaat
font-size: 21px
line-height: 34px
.columnFooter
margin-bottom: 50%
#columnLabel
font-size: 18px
line-height: 24px
.columnContent
.text
p, h2, li
font-size: 16px
line-height: 24px
#mainframeRight
.columnContent
.blockContent
width: 85%
.footer
background: url(/img/sprite_verhoeven.png) no-repeat 0 -148px
background-size: 100%
width: 256px
#red.columnContent
.footer
background: url(/img/sprite_verhoeven.png) no-repeat 0 -129px
background-size: 100%
height: 17px
bottom: -16px
#fourageProducten, #strooiselProducten
.productImage
width: 25%
.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