.caseDetail .fullwidth.fullwidthorange { color:#000; }
.caseDetail .fullwidth.fullwidthorange h1, .caseDetail .fullwidth.fullwidthorange h2, .caseDetail .fullwidth.fullwidthorange h3, .caseDetail .fullwidth.fullwidthorange h4, .caseDetail .fullwidth.fullwidthorange h5, .caseDetail .fullwidth.fullwidthorange h6 { color:#000; }

/* detail */
.Case.Detail { color:#a7a7a7; line-height:1; }
.Case.Detail h3 { font-size:110%;margin:0 0 5px;font-weight:500}
.Case.Detail figure { margin:0;clear:both;float:none}
.Case.Detail figure img { width:100%; -moz-transition:all .22s ease-in;-o-transition:all .22s ease-in;-webkit-transition:all .22s ease-in;transition:all .22s ease-in}
.Case.Detail .inner figure { margin-bottom:10px}
.fullwidth > .container > .Case.Detail { position: relative; }
.fullwidth > .container > .Case.Detail .inner figure { float:left; max-width:40%; margin:0 15px 0 0;}
.fullwidth > .container > .Case.Detail h3 { font-size: 138%; }
.fullwidth > .container > .Case.Detail main { padding-bottom:15px; }

.Case.Detail .ontop-hover:after{content:'Bekijk case'}

.Case.Detail:hover figure img{-ms-transform:scale(1.1);-webkit-transform:scale(1.1);transform:scale(1.1)}

/* overview */
.Cases.Overview {margin:-10px -10px 10px;padding:10px}
.Cases.Overview .block-grid { margin:-10px -35px -10px -5px;padding:10px}
.Cases.Overview .block-grid > li { padding-bottom:5px}

.Cases.Overview .Case.Detail {position:relative;display:block;overflow:hidden;background:#fff;color:#7b7b7b;-webkit-box-shadow:rgba(0,0,0,0.15) 0 2px 2px;-moz-box-shadow:rgba(0,0,0,0.15) 0 2px 2px;box-shadow:rgba(0,0,0,0.15) 0 2px 2px;-moz-transition:everything .22s ease;-o-transition:all .22s ease;-webkit-transition:all .25s ease;transition:all .22s ease;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px}
.Cases.Overview .Case.Detail .inner{font-size:108%}
.Cases.Overview .Case.Detail .inner .linkdiv { margin-bottom:5px; }
.Cases.Overview .Case.Detail .inner p:last-child{margin:0;padding:0}
.Cases.Overview .Case.Detail figure .brand{position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.3);background-repeat:no-repeat;background-position:center center;z-index:99;background-size:50%;-moz-background-size:50%;-webkit-background-size:50%;-o-background-size:50%;-moz-transition:background-color .22s ease;-o-transition:background-color .22s ease;-webkit-transition:background-color .25s ease;transition:background-color .22s ease}
.Cases.Overview .Case.Detail:hover {background:#fff;color:#000;-webkit-box-shadow:rgba(0,0,0,0.25) 0 2px 10px;-moz-box-shadow:rgba(0,0,0,0.25) 0 2px 10px;box-shadow:rgba(0,0,0,0.25) 0 2px 10px}
.Cases.Overview .Case.Detail:hover .brand{background-color:rgba(0,0,0,0)}

.Cases.Overview .caseSlider{margin:-10px}
.Cases.Overview .caseSlider .block-grid{margin:0 -25px 0 5px}

.blokkenRow1 .Cases.Overview{margin-left:-50px;margin-right:-50px;padding-left:50px;padding-right:50px}

/* sidecolumn */
.sidecolumn .Cases.Overview .block-grid>li{width:100%;clear:both;float:none}

/* banner */
#smallbanner.flexslider .ontopcontainer figure.desktop{padding:14px 23px 129px 14px;background:url(/web/templates/www/img/case_desktop.png) no-repeat left top}
#smallbanner.flexslider .ontopcontainer figure.laptop{padding:11px 40px 33px 40px;background:url(/web/templates/www/img/case_laptop.png) no-repeat left top}
#smallbanner.flexslider .ontopcontainer figure.tablet{padding:21px 42px 60px 35px;background:url(/web/templates/www/img/case_tablet.png) no-repeat left top}
#smallbanner.flexslider .ontopcontainer figure.phone{padding:26px 18px 43px 15px;background:url(/web/templates/www/img/case_phone.png) no-repeat left top}
#smallbanner.flexslider .ontopcontainer .Images{position:static}
.brand-in{margin-top:20px;opacity:0}
.desktop-in{position:absolute;bottom:-300px;margin-left:105px}
.laptop-in{position:absolute;bottom:10px;margin-left:310px;opacity:0}
.tablet-in{position:absolute;bottom:-20px;margin-left:-150px;opacity:0}
.phone-in{position:absolute;bottom:-204px;margin-left:122px}

/* examples */
.Cases.Examples .block-grid{margin-right:-10px}
.Cases.Examples .block-grid>li{position:relative;padding-right:10px}
.Cases.Examples .block-grid>li>a{display:block;overflow:hidden;background:#000;margin-bottom:10px}
.Cases.Examples .block-grid>li>a img{-moz-transition:all .22s ease-in;-o-transition:all .22s ease-in;-webkit-transition:all .22s ease-in;transition:all .22s ease-in}
.Cases.Examples .block-grid>li>a:hover img{opacity:.6}
.Cases.Examples .block-grid>li>a:after{content:'+';-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;position:absolute;top:50%;left:50%;width:60px;height:60px;line-height:60px;z-index:99;background:#fff;margin-top:-30px;margin-left:-40px;display:block;font-size:300%;text-align:center;font-weight:bold;opacity:0;-moz-transition:all .22s ease-in;-o-transition:all .22s ease-in;-webkit-transition:all .22s ease-in;transition:all .22s ease-in}
.Cases.Examples .block-grid>li>a:hover:after{opacity:1}

.caseSlider .flex-direction-nav .flex-prev { left:-20px!important; }
.caseSlider .flex-direction-nav .flex-next { right:-20px!important; }


@media(max-width:1030px){
	.Case.Detail h3{font-size:115%}
}
@media(max-width:767px){
	.Cases.Overview .block-grid { margin-right:-20px; }
	.Cases.Overview .block-grid>li {width:100%;float:none;clear:both}
	.Cases.Overview .caseSlider .block-grid{margin-right:-15px}
	.Cases.Overview .caseSlider .block-grid>li{margin-bottom:15px}
	.Cases.Overview .caseSlider .flex-direction-nav{display:none}
	
	#smallbanner.flexslider .ontopcontainer .Images{-ms-transform:scale(0.7,0.7);-webkit-transform:scale(0.5,0.7);transform:scale(0.7,0.7);position:relative;top:100px;right:-30px}
	#smallbanner.flexslider .container.ontopcontainer .Logo{display:none}
	
	.Cases.Examples .block-grid>li{width:50%;clear:none}
	.Cases.Examples .block-grid>li:nth-child(2n+1){clear:both}
}
@media(max-width:550px){
	#smallbanner.flexslider .ontopcontainer .Images{-ms-transform:scale(0.5,0.5);-webkit-transform:scale(0.5,0.5);transform:scale(0.5,0.5);position:relative;top:100px}
	
	.Cases.Examples .block-grid>li{width:100%;clear:both;float:none}
}
