.section.portfolio{padding:0; margin:250px 0; text-align:center;}
.section.portfolio .inner{width:1024px; margin:0 auto;}
.section.portfolio .inner .item{position:relative; float:left; width:33.333%; height:300px; padding:0 3px 3px 0; opacity:0.2; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; overflow:hidden;}
.section.portfolio .inner .item .image{position:relative; float:left; width:100%; height:100%; background:#000;}
.section.portfolio .inner .item .image p{position:absolute; bottom:-50%; left:0; width:90%; margin:0; padding:0 5% 20px; color:#fff; text-transform:uppercase; letter-spacing:1px; font-size:14px; line-height:24px; z-index:4;}
.section.portfolio .inner .item .image a.play{position:absolute; top:50%; left:50%; margin:-15px 0 0 -13px; width:29px; height:32px; background:url(/img/icons/play.png) no-repeat; cursor:pointer; z-index:3; opacity:0;}
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
.section.portfolio .inner .item .image a.play{background:url(/img/icons/play@2x.png) no-repeat; background-size:29px 32px;}
}
.section.portfolio .inner .item .image .schaduw{position:absolute; left:0; bottom:0; width:100%; height:246px; background:url(/img/schaduw.png) repeat-x bottom; z-index:2; opacity:0;}
.section.portfolio .inner .item .image .foto{position:absolute; left:0; bottom:0; width:100%; height:100%; background-size:auto 110%; background-position:center; z-index:1; -webkit-filter:grayscale(100%); filter:grayscale(1);}
.section.portfolio .inner .item .image.text{line-height:260px; color:#fff; text-transform:uppercase; font-size:13px;}
.section.portfolio .inner .item .image.social{background:no-repeat #000 center / 60px 60px;}
.section.portfolio .inner .item .image.social.youtube{background-image:url(/img/icons/social/youtube_large.png);}
.section.portfolio .inner .item .image.social.vimeo{background-image:url(/img/icons/social/vimeo_large.png);}
.section.portfolio .inner .item .image.social.website{background-image:url(/img/logo-culieye@2x.png); background-size:100px 100px;}
/* hover */
.section.portfolio .inner .item.show{opacity:1;}
.section.portfolio .inner .item.show .image .foto{-webkit-filter:grayscale(0%); filter:grayscale(0);}
.section.portfolio .inner .item.show:hover .image .foto{background-size:auto 100%;}
.section.portfolio .inner .item.show:hover .image a.play{opacity:1;}
.section.portfolio .inner .item.show:hover .image a.play:hover{-webkit-animation:grow 0.3s linear 1; animation:grow 0.3s linear 1;}
@-webkit-keyframes grow{50%{-webkit-transform:scale(1.2); transform:scale(1.2);}}
@keyframes grow{50%{-webkit-transform:scale(1.2); transform:scale(1.2);}}
.section.portfolio .inner .item.show:hover .image p{bottom:0;}
.section.portfolio .inner .item.show:hover .image .schaduw{opacity:1;}

@media screen and (max-width:1600px) {
.section.portfolio .inner{width:940px;}
.section.portfolio .inner .item{height:235px;}
.section.portfolio .inner .item .image.text{line-height:235px;}
}
@media screen and (max-width:1440px) {
.section.portfolio{margin:200px 0;}
.section.portfolio .inner{width:800px;}
.section.portfolio .inner .item{width:33.33%; height:260px;}
.section.portfolio .inner .item .image.text{line-height:260px;}
}
@media screen and (max-width:1280px) {
.section.portfolio .inner{width:700px;}
.section.portfolio .inner .item{height:240px;}
.section.portfolio .inner .item .image.text{line-height:240px;}
}
@media screen and (max-width:1024px) {
.section.portfolio{margin:120px 0;}
.section.portfolio .inner{width:650px;}
.section.portfolio .inner .item{width:33.33%; height:215px;}
.section.portfolio .inner .item .image.text{line-height:215px;}
.section.portfolio .inner .item.show .image a.play{opacity:1;}
.section.portfolio .inner .item.show .image a.play:hover{-webkit-animation:grow 0.3s linear 1; animation:grow 0.3s linear 1;}
.section.portfolio .inner .item.show .image p{bottom:0; font-size:13px; line-height:22px;}
.section.portfolio .inner .item.show .image .schaduw{opacity:1;}
}
@media screen and (max-width:1010px) {
.section.portfolio{margin:10px 0 30px;}
.section.portfolio .inner{width:99%; margin:0 0.5%;}
.section.portfolio .inner .item{width:49%; margin:0 0.5% 10px; height:240px; padding:0;}
.section.portfolio .inner .item .image.text{line-height:240px;}
.section.portfolio .inner .item.show .image .foto{background-size:cover;}
.section.portfolio .inner .item.show .image:hover .foto{background-size:cover;}
}
@media screen and (max-width:750px) {
.section.portfolio{margin:5px 0 30px;}
.section.portfolio .inner .item{height:170px; margin:0 0.5% 5px;}
.section.portfolio .inner .item.fuller{width:99%;}
.section.portfolio .inner .item .image.social.website{background-size:80px 80px;}
.section.portfolio .inner .item .image.text{line-height:170px; font-size:12px;}
.section.portfolio .inner .item .image p{padding:0 5% 10px;}
.section.portfolio .inner .item .image a.play{background:url(/img/icons/play@2x.png) no-repeat; background-size:22px 24px;}
.section.portfolio .inner .item.show .image a.play{opacity:0.5;}
}

.section.overons {padding:0 20px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
.section.overons h2{color:#000; margin-bottom:20px;}
.section.overons .inner{float:left; width:100%; padding:350px 0; background-color:#000; background-size:100% auto; background-position:0 0; text-align:center; color:#fff; font-size:20px; line-height:40px; font-weight:300;}
.section.overons .inner .text{width:900px; margin:0 auto; text-align:center;}
.section.overons .inner .text .icon{display:inline-block; width:40px; height:50px; background:url(/img/icons/beeldmerk.png) no-repeat center;}
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
.section.overons .inner .text .icon{background:url(/img/icons/beeldmerk@2x.png) no-repeat center; background-size:40px 50px;}
}
.section.overons .inner .text p{margin:40px 0 0 0;}
.section.overons .inner .text p.color{color:#eda615; width:66%; margin:40px 17% 0; font-style:italic;}
.section.overons .inner .text p small{display:inline-block; font-size:15px; line-height:25px; color:#aaa;}
.section.overons .inner .text a{color:#aaa; text-decoration:underline;}
.section.overons .inner .text a:hover{color:#eda615;}
.section.overons .inner .text a.readmore{position:relative; display:inline-block; width:100px; height:45px; padding:0; font-size:19px; line-height:45px; color:#fff; margin-top:60px; cursor:pointer; text-decoration:none;}
.section.overons .inner .text a.readmore span.first{position:absolute; left:50%; bottom:0; width:50%; height:1px; margin-left:-25%; background:#eda615;}
.section.overons .inner .text a.readmore span.second{position:absolute; left:50%; bottom:0; width:50%; height:1px; margin-left:-25%; background:#eda615; opacity:0;}
.section.overons .inner .text a.readmore:hover span{bottom:100%; width:100%; left:0%; margin-left:0;}
.section.overons .inner .text a.readmore.down span.first{margin-left:0%; left:45%; height:3px; -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg);}
.section.overons .inner .text a.readmore.down span.second{margin-left:0%; left:45%; height:3px; opacity:1; -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
.section.overons .inner .text a.readmore.down:hover span{bottom:0; width:50%; left:45%; margin-left:0; background:#fff;}
.section.overons .inner .text .hidden{display:none;}
@media screen and (max-width:1440px) {
.section.overons .inner{padding:250px 0; font-size:18px; line-height:36px;}
.section.overons .inner .text a.readmore{font-size:17px;}
}
@media screen and (max-width:1024px) {
.section.overons .inner{padding:120px 0;}
.section.overons .inner .text{width:756px;}
}
@media screen and (max-width:1010px) {
.section.overons .inner .text{width:80%; margin:0 auto; text-align:center;}
}
@media screen and (max-width:750px) {
.section.overons {padding:0 5px;}
.section.overons .inner{padding:80px 0; font-size:16px; line-height:28px;}
.section.overons .inner .text{width:86%;}
.section.overons .inner .text a.readmore{font-size:16px; margin-top:30px;}
}

.section.recommendations{padding:0 20px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
.section.recommendations .wrapper{float:left; width:100%; padding:250px 0; background-color:#f3f3f3;}
.section.recommendations .inner{width:990px; margin:0 auto; text-align:center;}
.section.recommendations .inner span.vertical{display:inline-block; width:1px; height:60px; margin:70px 0; background:#ddd;}
.section.recommendations .inner .item{float:left; width:100%; margin:0 0 30px; text-align:left;}
.section.recommendations .inner .item:last-child{margin-bottom:0;}
.section.recommendations .inner .item .image{float:left; width:15%;}
.section.recommendations .inner .item .image img{display:inline-block; width:100px; height:100px; margin-top:10px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;}
.section.recommendations .inner .item .text {float:left; width:85%; text-align:left;}
.section.recommendations .inner .item .text p {font-size:17px; line-height:30px; margin:0;}
.section.recommendations .inner .item .text p strong{color:#eda615;}
.section.recommendations .inner .item span.horizontal{display:inline-block; width:60px; height:1px; margin:20px 0 15px 0; background:#ddd; vertical-align:top;}
@media screen and (max-width:1200px) {
.section.recommendations .inner{width:960px;}
}
@media screen and (max-width:1100px) {
.section.recommendations .inner{width:860px;}
}
@media screen and (max-width:1024px) {
.section.recommendations .wrapper{padding:80px 0;}
.section.recommendations .inner{width:800px;}
.section.recommendations .inner .item .image{width:20%;}
.section.recommendations .inner .item .text {width:80%;}
.section.recommendations .inner .item .text p {font-size:16px; line-height:28px;}
}
@media screen and (max-width:1010px) {
.section.recommendations .inner{width:80%;}
.section.recommendations .inner span.vertical{margin:40px 0;}
.section.recommendations .inner .item .image{width:25%;}
.section.recommendations .inner .item .text {width:75%;}
}
@media screen and (max-width:750px) {
.section.recommendations{padding:0 5px;}
.section.recommendations .wrapper{padding:50px 0;}
.section.recommendations .inner{width:90%;}
.section.recommendations .inner span.vertical{height:30px; margin:30px 0 25px;}
.section.recommendations .inner .item{text-align:center;}
.section.recommendations .inner .item .image{width:100%;}
.section.recommendations .inner .item .image img{margin-top:0;}
.section.recommendations .inner .item .text, .section.recommendations .inner .item .text p {width:100%; text-align:center;}
.section.recommendations .inner .item .text p:first-child{ text-align:center;}
}

.section.klanten{text-align:center;}
.section.klanten .inner{width:990px; margin:0 auto; text-align:center;}
.section.klanten .inner span.vertical{display:inline-block; width:1px; height:60px; margin:70px 0; background:#ddd;}
.section.klanten .inner .logos{float:left; width:100%;}
.section.klanten .inner .logos a{float:left; display:block; width:20%; height:180px; border-right:1px solid #ddd; background-size:75%; background-position:center; background-repeat:no-repeat; border-bottom:1px solid #ccc; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
.section.klanten .inner .logos a:nth-child(5n){border-right:0px;}
.section.klanten .inner .logos a.last{border-bottom:0;}
.section.klanten .inner .logos a.amstel{background-image:url(/img/klanten/amstel-bier.png); background-size:50%;}
.section.klanten .inner .logos a.grolsch{background-image:url(/img/klanten/grolsch.png); background-size:70%;}
.section.klanten .inner .logos a.texels{background-image:url(/img/klanten/texels.png); background-size:70%;}
.section.klanten .inner .logos a.leffe{background-image:url(/img/klanten/leffe.png); background-size:53%;}
.section.klanten .inner .logos a.jupiler{background-image:url(/img/klanten/jupiler.png); background-size:50%;}
.section.klanten .inner .logos a.bacardi{background-image:url(/img/klanten/bacardi.png); background-size:70%;}
.section.klanten .inner .logos a.cocacola{background-image:url(/img/klanten/coca-cola.png); background-size:70%;}
.section.klanten .inner .logos a.carlsberg{background-image:url(/img/klanten/carlsberg.png)}
.section.klanten .inner .logos a.marnier{background-image:url(/img/klanten/grandmarnier.png);}
.section.klanten .inner .logos a.heineken{background-image:url(/img/klanten/heineken.png);}
.section.klanten .inner .logos a.ketel1{background-image:url(/img/klanten/ketel1.png); background-size:70%;}
.section.klanten .inner .logos a.lindeboom{background-image:url(/img/klanten/lindeboom.png); background-size:65%;}
.section.klanten .inner .logos a.hertogjan{background-image:url(/img/klanten/hertogjan.png);}
.section.klanten .inner .logos a.duvel{background-image:url(/img/klanten/duvel.png); background-size:70%;}
.section.klanten .inner .logos a.corona{background-image:url(/img/klanten/corona.png); background-size:70%;}
.section.klanten .inner .logos a.palm{background-image:url(/img/klanten/palm.png); background-size:70%;}
.section.klanten .inner .logos a.liefmans{background-image:url(/img/klanten/liefmans.png);}
.section.klanten .inner .logos a.guinness{background-image:url(/img/klanten/guinness.png);}
.section.klanten .inner .logos a.tuborg{background-image:url(/img/klanten/tuborg-beer.png); background-size:70%;}
.section.klanten .inner .logos a.affligem{background-image:url(/img/klanten/affligem.png);}
.section.klanten .inner .logos a.baphoe{background-image:url(/img/klanten/baphoe.png);}
.section.klanten .inner .logos a.bols{background-image:url(/img/klanten/bols.png);}
.section.klanten .inner .logos a.desperados{background-image:url(/img/klanten/desperados.png);}
.section.klanten .inner .logos a.fayrouz{background-image:url(/img/klanten/fayrouz.png);}
.section.klanten .inner .logos a.strongbow{background-image:url(/img/klanten/strongbow.png);}
.section.klanten .inner .logos a.charlies{background-image:url(/img/klanten/charlies.png);}
.section.klanten .inner .logos a.cerveza{background-image:url(/img/klanten/cerveza-dos-equis.png);}
.section.klanten .inner .logos a.warsteiner{background-image:url(/img/klanten/warsteiner.png); background-size:50%;}
.section.klanten .inner .logos a.applebandit{background-image:url(/img/klanten/apple-bandit.png); background-size:60%;}
.section.klanten .inner .logos a.edelweiss{background-image:url(/img/klanten/edelweiss.png); background-size:65%;}
.section.klanten .inner .logos a.tiger{background-image:url(/img/klanten/tiger.png); background-size:60%;}
.section.klanten .inner .logos a.lachouffe{background-image:url(/img/klanten/lachouffe.png); background-size:60%;}
.section.klanten .inner .logos a.birramoretti{background-image:url(/img/klanten/birramoretti.png); background-size:65%;}
.section.klanten .inner .logos a.bavaria{background-image:url(/img/klanten/bavaria.png); background-size:70%;}
.section.klanten .inner .logos a.swinckels{background-image:url(/img/klanten/swinckels.png); background-size:65%;}
.section.klanten .inner .logos a.hollandia{background-image:url(/img/klanten/hollandia.png); background-size:65%;}
.section.klanten .inner .logos a.brand{background-image:url(/img/klanten/brand.png); background-size:65%;}
.section.klanten .inner .logos a.victoria{background-image:url(/img/klanten/victoria.png); background-size:65%;}
.section.klanten .inner .logos a.tripel-karmeliet{background-image:url(/img/klanten/tripel-karmeliet.png); background-size:65%;}
.section.klanten .inner .logos a.kwak{background-image:url(/img/klanten/kwak.png); background-size:65%;}
.section.klanten .inner .logos a.stella-artois{background-image:url(/img/klanten/stella-artois.png); background-size:75%;}
.section.klanten .inner .merken{float:left; width:100%; text-align:center;}
.section.klanten .inner .merken span.horizontal{display:inline-block; width:60px; height:1px; margin:90px auto 80px; background:#ddd; vertical-align:top;}
.section.klanten .inner .merken p{margin:0; font-size:14px; line-height:35px; letter-spacing:3px; text-transform:uppercase; color:#777; font-weight:300; text-align:center;}
.section.klanten .inner .merken p a{color:#777;}
.section.klanten .inner .merken p a:hover{color:#777; text-decoration:underline;}
@media screen and (max-width:1024px) {
.section.klanten .inner{width:960px;}
}
@media screen and (max-width:1010px) {
.section.klanten .inner{width:90%;}
.section.klanten .inner span.vertical{margin:40px 0;}
.section.klanten .inner .merken span.horizontal{margin:50px auto 40px;}
.section.klanten .inner .logos a{height:120px;}
.section.klanten .inner .merken p{font-size:12px; line-height:28px;}
}
@media screen and (max-width:750px) {
.section.klanten .inner span.vertical{height:30px;}
.section.klanten .inner .logos a{width:50%; height:120px;}
.section.klanten .inner .logos a:nth-child(5), .section.klanten .inner .logos a:nth-child(10), .section.klanten .inner .logos a:nth-child(15), .section.klanten .inner .logos a:nth-child(20), .section.klanten .inner .logos a:nth-child(25), .section.klanten .inner .logos a:nth-child(30), .section.klanten .inner .logos a:nth-child(35){border-right:1px solid #ddd;}
.section.klanten .inner .logos a.last{border-bottom:1px solid #ddd;}
.section.klanten .inner .logos a.last.small{border-bottom:0;}
.section.klanten .inner .logos a:nth-child(2n){border-right:0px;}
.section.klanten .inner .merken p{font-size:12px; letter-spacing:2px;}
}