/* Grayscale effect */ .blogitem .afbeelding img { /*filter: url("data:image/svg+xml;utf8,#grayscale"); filter: gray; -webkit-filter: grayscale(100%);*/ } a.catwraplink { display: block; margin: 0 0 30px 0; } a.catwraplink:hover, a.catwraplink:focus, a.catwraplink:active { text-decoration: none; } .catwrapper h2.title { font-size: 25px; line-height: 25px; font-weight: 700; text-transform: uppercase; border-top: 5px solid #F2F2F2; padding: 15px 0; margin: 0 0 15px 0; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } a.catwraplink:hover .catwrapper h2.title, a.catwraplink:focus .catwrapper h2.title, a.catwraplink:active .catwrapper h2.title { border-top: 5px solid #DC1C23; } .catwrapper .imgcatwrap { display: block; width: 100%; height: 200px; z-index: 8; } .catwrapper .imgcolorbox { position: relative; display: block; width: 100%; height: 200px; z-index: 9; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .catwrapper .imgcolorbox:before { position: absolute; content: "⌕"; font-size: 80px; color: rgba(255, 255, 255, 0); top: 50%; margin-top: -22px; left: 50%; margin-left: -22px; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } a.catwraplink:hover .catwrapper .imgcolorbox, a.catwraplink:focus .catwrapper .imgcolorbox, a.catwraplink:active .catwrapper .imgcolorbox { background: rgba(47, 46, 46, 0.5); } a.catwraplink:hover .catwrapper .imgcolorbox:before, a.catwraplink:focus .catwrapper .imgcolorbox:before, a.catwraplink:active .catwrapper .imgcolorbox:before { color: rgba(255, 255, 255, 1); } /* Title/hover effects */ .introtekst { float: right; width: 50%; padding-left: 15px; } .blogitem .afbeelding .imagetitle { width: 100%; display: block; } .blogitem a.imagetitle, .blogitem a.imagetitle h3 { margin-top: 0px; } .blogitem .afbeelding .imagetitle h2 { } @media(max-width:768px){ .blogitem .afbeelding .imagetitle h2 { font-size:20px !important; } } .blogitem:hover .imagetitle { } .noimage { opacity: 0.4; } .fbthumb { position: relative; float: left; margin: 5px 10px 10px 0px; max-width: 150px; } .blogitem .fbimage { width: 100%; } .btn.btn-default.fbreadmore { background: none; background-color: #3a5795; color: #FFFFFF !important; } .btn.btn-default.fbreadmore i { font-weight: bold; font-size: 18px; margin-right: 15px; } .btn.btn-default.fbreadmore:hover { background-color:#5370AD; } .btn.btn-default.instareadmore { background: none; background-color: #125688; color: #FFFFFF !important; } .btn.btn-default.instareadmore i { font-weight: bold; font-size: 18px; margin-right: 15px; } /* Main css */ .blogitem { position: relative; } .blogitem .afbeelding { position: relative; width: 50%; float: left; padding: 0px 15px 0px 0px; } .blogitem .content { } .blogbtn { } .well.blogitem h2 { margin: 0; } .well.blogitem .blogbtn { margin-right: 0px; margin-bottom: 0px; } ul.catlist { list-style-type: none; padding-left: 0; margin: 0; } ul.sublist { margin: 5px 0 0 0; } ul.catlist li { position: relative; font-size: 16px; color: #333; margin: 0 0 5px 0; } ul.catlist li:last-child { margin: 0; } ul.catlist li a.catitem { position: relative; display: block; padding: 5px 20px; font-size: 16px; font-weight: 700; color: rgba(44, 44, 44, 1); border: 1px solid rgba(44, 44, 44, 1); z-index: 1; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } ul.catlist li a.catitem:hover { color: #FFF; text-shadow: 2px 2px 5px rgba(0,0,0,0.55); text-decoration: none; } ul.catlist li a.catitem:focus, ul.catlist li a.catitem:active { color: rgba(44, 44, 44, 1); text-decoration: none; } ul.catlist li a.catitem:before { content: " "; display: block; position: absolute; background: #DC1C23; bottom: 0; left: 0%; width: 0%; height: 100%; margin: 0 auto; transition: all 0.5s; z-index: -1; } ul.catlist li a.catitem:hover:before { width: 100%; height: 100%; left: 0%; } ul.catlist li.active a { color: #FFF; text-shadow: 2px 2px 5px rgba(0,0,0,0.55); text-decoration: none; } ul.catlist li.active a:hover { color: rgba(44, 44, 44, 1); text-shadow: 2px 2px 5px rgba(0,0,0,0); text-decoration: none; } ul.catlist li.active a.catitem:before { width: 100%; height: 100%; left: 0%; } ul.catlist li.active a.catitem:hover:before { width: 0%; height: 100%; } ul.catlist li .adminoptions { position: absolute; display: block; background: #FFF; padding: 0 5px; z-index: 3; top: -4px; right: 0px; -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); -ms-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); -o-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25); } ul.catlist li.active ul.sublist li a.catitem { color: rgba(44, 44, 44, 1); text-shadow: 2px 2px 5px rgba(0,0,0,0); } ul.catlist li.active ul.sublist li a.catitem:hover { color: #FFF; text-shadow: 2px 2px 5px rgba(0,0,0,0.55); } ul.catlist li.active ul.sublist li a.catitem:before { background: #DC1C23; width: 0%; height: 100%; } ul.catlist li.active ul.sublist li a.catitem:hover:before { width: 100%; height: 100%; left: 0%; } .vacaturebtn { position: absolute; left: 15px; top: -120px; } .blogwrap { margin: 0 0 30px 0; } .blogwrap .imagewrap { z-index: 1; position: relative; } /*.blogwrap .imagewrap .adminoptions { position: absolute; top: 5px; left: 10px; z-index: 4; }*/ .blogwrap .imagewrap .linkedin { position: absolute; bottom: 15px; right: 15px; } .blogwrap .imagewrap .linkedin a { font-size: 40px; color: #FFF; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .blogwrap .imagewrap .linkedin a:hover, .blogwrap .imagewrap .linkedin a:focus, .blogwrap .imagewrap .linkedin a:active { color: rgba(220, 28, 35, 1); } .blogwrap h2.title { position: relative; font-size: 40px; line-height: 40px; font-weight: 700; text-transform: uppercase; margin-top: -60px; margin-left: 10px; z-index: 2; text-shadow: 2px 2px 10px rgba(0,0,0,0.75); } .blogwrap h2.smalltitle { font-size: 30px; } .blogwrap h2.title a { color: #FFF; } .blogwrap h2.title a:hover, .blogwrap h2.title a:focus, .blogwrap h2.title a:active { color: #DC1C23; text-decoration: none; } .blogwrap .btnwrap { text-align: right; line-height: 60px; margin: 15px 0 0 0; } ul.projectinfo { list-style-type: none; padding-left: 0; margin: 0; } ul.projectinfo li { margin: 0 0 4px 0; } ul.projectinfo li .svg-inline--fa { margin: 0 15px 0 0; min-width: 20px; } ul.pagernew { list-style: none; padding-left: 0; margin: 60px 0 0 0; text-align: center; } ul.pagernew .previous a { float: left; } ul.pagernew .next a { float: right; } ul.pagernew .disabled a { pointer-events: none; background: white; color: rgba(44, 44, 44, 1); } h3.relatedtitle { font-size: 40px; line-height: 40px; font-weight: 700; text-transform: uppercase; margin: 60px 0 0 0; color: #FFF; text-shadow: 2px 2px 10px rgba(0,0,0,0.75); } .tagbox h3.tagtitle { font-size: 38px; margin: 0 0 30px 0; } .tagbox a { font-size: 16px; font-weight: 700; text-transform: uppercase; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .tagbox a:hover, .tagbox a:focus, .tagbox a:active { text-decoration: none; color: rgba(44, 44, 44, 1); } section.tags { margin: 5px 0; } section.tags .label { padding: 0; } section.tags .labelromein a { padding: 5px 10px; display: block; color: #FFF; background: #DC1C23; text-transform: uppercase; font-size: 14px; font-weight: 700; border: 1px solid #DC1C23; border-radius: 0; margin: 0 5px 5px 0; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } section.tags .labelromein a:hover, section.tags .labelromein a:focus, section.tags .labelromein a:active { background: #FFF; color: #DC1C23; text-decoration: none; } /* Beheer */ #tags li:hover { background: rgba(200, 200, 200, 0.1); } #tags li { transition: all 0.7s ease-out; padding: 8px 12px; } /* Weergave */ .tags .label { display: inline-block; } #tagSuggests a { padding: 6px 12px; display: inline-block; background: #b4b4b433; margin: 3px 0px; } #tagSuggests { margin-top: 5px; }