/* rood: #a20429 */ /* lichtaqua: #cbdfde */ /* donkeraqua: #005455 */ html{ overflow-y: scroll; } em, small { letter-spacing: 0 } body, li, p { line-height: 1.5em } div.clear{ clear: both;} .DNNEmptyPane { display: none!important } .paneOutline { border: 1px dashed #ccc } a, a img, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, time, tt, u, ul, var, video { border: 0 } .TB_Wrapper, .TB_Wrapper *, .dnnActionMenu, .dnnActionMenu *, .dnnActionMenu:after, .dnnActionMenu:before, .dnn_mact, .dnn_mact *, .dnn_mact:after, .dnn_mact:before, [id*=ControlPanel], [id*=ControlPanel] *, [id*=ControlPanel]:after { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box } [class*=RadAjaxPanel] *, [class*=Digital] * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box } html { font-size: 20px } #particles-js { width: 100%; right:0;left:0; top:0;bottom:80px;position: fixed; } @media (max-width: 500px) { #particles-js { display: none!important;} } @media (min-width: 992px) { .row.row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; align-items: center; } } .pt30{padding-top: 30px;} .pb30{padding-bottom: 30px;} .pt20{padding-top: 20px;} .pb20{padding-bottom: 20px;} ol.list-unstyled, ol.list-unstyled>li, ul.list-unstyled, ul.list-unstyled>li { list-style: none; margin: 0 } ul.row { margin-left: -15px; margin-right: -15px } ol, ul { list-style: none } ul li { list-style-type: disc } ul li li { list-style-type: circle } ol li { list-style-type: decimal; list-style-position: inside } .nav li { list-style: none!important } a,input { outline: 0!important } a { color: #a20429; text-decoration: underline; } a:hover, a:focus { color: #000; text-decoration: underline; } ul#myTab { padding: 0; margin: 0 } .popover { z-index: 999 } .tweekoloms{-webkit-column-count: 2;-moz-column-count: 2;column-count: 2; margin-bottom: 30px;} @media (max-width: 992px) { .tweekoloms{-webkit-column-count: 1;-moz-column-count: 1;column-count: 1;} } .mark, mark { padding: 0; background-color: transparent } .bs-callout-danger, .bs-callout-info, .bs-callout-primary, .bs-callout-success, .bs-callout-warning { display: block; padding: 15px 30px 15px 15px } body { background: #fff; color: #333; font-weight: 300; font-size: inherit; } .CommandButton, .Head, .Normal, .NormalBold, .NormalDisabled, .NormalRed, .NormalTextBox, .SubHead, .SubSubHead, a:hover, a:link, a:visited, body, h1, h2, h3, h4, h5, h6, input, table, td, th { font-family: 'Roboto', Arial, Helvetica, sans-serif } .SubHead { color: #000 } Body #Form { height: 100% } embed, img, object { max-width: 100% } [class*=map] img, [class*=Map] img, [id*=map] img, [id*=Map] img, table img { max-width: none!important } img { height: auto } em { font-style: italic } strong { font-weight: 700 } small { font-size: 12px } p { margin: 0 0 20px } ol li>ol li { list-style-type: lower-latin } [class^="col-"] {transition: all 0.1s ease-in-out;} [class^="col-"] {transition: height none;} .DnnModule-4857 .DNNContainer_Title_h3.wit, .DnnModule-5002 .DNNContainer_Title_h3.wit{background: url(/Portals/57/Skins/Ockham/Images/bg-intro.png) no-repeat 25% 60%;transition: all 0.1s ease-in-out;} @media (max-width: 992px) { .DnnModule-4857 .DNNContainer_Title_h3.wit, .DnnModule-5002 .DNNContainer_Title_h3.wit{background: url(/Portals/57/Skins/Ockham/Images/bg-intro.png) no-repeat 50% 50%;} } .bs-callout-primary { margin: 20px 0; border-left: 5px solid #337ab7; background-color: #dbe9f5 } .bs-callout-primary h1, .bs-callout-primary h2, .bs-callout-primary h3, .bs-callout-primary h4, .bs-callout-primary h5, .bs-callout-primary h6 { margin-top: 0; color: #337ab7 } .bs-callout-primary p:last-child { margin-bottom: 0 } .bs-callout-primary .highlight, .bs-callout-primary code { background-color: #fff } .bs-callout-danger { margin: 20px 0; border-left: 5px solid #d9534f; background-color: #f4cecd } .bs-callout-danger h1, .bs-callout-danger h2, .bs-callout-danger h3, .bs-callout-danger h4, .bs-callout-danger h5, .bs-callout-danger h6 { margin-top: 0; color: #d9534f } .bs-callout-danger p:last-child { margin-bottom: 0 } .bs-callout-danger .highlight, .bs-callout-danger code { background-color: #fff } .bs-callout-warning { margin: 20px 0; border-left: 5px solid #f0ad4e; background-color: #fceedb } .bs-callout-warning h1, .bs-callout-warning h2, .bs-callout-warning h3, .bs-callout-warning h4, .bs-callout-warning h5, .bs-callout-warning h6 { margin-top: 0; color: #f0ad4e } .bs-callout-warning p:last-child { margin-bottom: 0 } .bs-callout-warning .highlight, .bs-callout-warning code { background-color: #fff } .bs-callout-info { margin: 20px 0; border-left: 5px solid #5bc0de; background-color: #daf1f8 } .bs-callout-info h1, .bs-callout-info h2, .bs-callout-info h3, .bs-callout-info h4, .bs-callout-info h5, .bs-callout-info h6 { margin-top: 0; color: #5bc0de } .bs-callout-info p:last-child { margin-bottom: 0 } .bs-callout-info .highlight, .bs-callout-info code { background-color: #fff } .bs-callout-success { margin: 20px 0; border-left: 5px solid #5cb85c; background-color: #c7e6c7 } .bs-callout-success h1, .bs-callout-success h2, .bs-callout-success h3, .bs-callout-success h4, .bs-callout-success h5, .bs-callout-success h6 { margin-top: 0; color: #5cb85c } .bs-callout-success p:last-child { margin-bottom: 0 } .bs-callout-success .highlight, .bs-callout-success code { background-color: #fff } h1, h2, h3, h4, h5, h6 { color: #020202; line-height: 1.3em; margin: 0 0 10px } h1 { font-size: 2rem } h1.h3kop { font-size: 1.375rem } h2 { font-size: 1.5rem } h3 { font-size: 1.375rem } h4 { font-size: 1.25rem } h5 { font-size: 1.125rem } h6 { font-size: 1rem } @media screen and (min-width:500px) { html { font-size: 14px } } @media screen and (min-width:570px) { html { font-size: 15px } } @media screen and (min-width:620px) { html { font-size: 16px } } @media screen and (min-width:680px) { html { font-size: 17px } } @media screen and (min-width:720px) { html { font-size: 18px } } @media screen and (min-width:800px) { html { font-size: 19px } } @media screen and (min-width:860px) { html { font-size: 20px } } @media screen and (min-width:920px) { html { font-size: 21px } } @media screen and (min-width:1000px) { html { font-size: 22px } } .buttons-wrapper { text-align: center } a.cta-button-primary, button.cta-button-primary { background: #7ca0c0; border: 1px solid #7ca0c0; color: #fff; transition: background-color 300ms ease-out 0s } a.cta-button, a.cta-button-primary, button.cta-button, button.cta-button-primary { text-align: center; text-decoration: none; text-transform: uppercase; cursor: pointer; font-family: 'Roboto', Arial, Helvetica, sans-serif; position: relative; display: inline-block; font-size: 18px; font-weight: 700; line-height: normal; margin: 0 5px 5px 0; min-width: 200px; padding: 10px 0; -webkit-transition: background-color 300ms ease-out 0s; -o-transition: background-color 300ms ease-out 0s } a.cta-button-primary:hover, button.cta-button-primary:hover { background: #91afca; border-color: #91afca } a.cta-button, button.cta-button { background: 0 0; border: 1px solid #7ca0c0; color: #7ca0c0; transition: background-color 300ms ease-out 0s } a.cta-button:hover, button.cta-button:hover { color: #fff; background: #7ca0c0; border-color: #91afca } #login { padding-right: 10px } @media only screen and (max-width:768px) { #login { padding-right: 21px } } #login .loginGroup, #login .loginGroup *, #login .registerGroup, #login .registerGroup * { display: block } #login .loginGroup, #login .registerGroup { float: right; padding: 0; margin: 0 } #login .loginGroup a, #login .registerGroup a { display: block; position: relative; height: 34px; min-width: 12px; padding: 7px 15px 0; color: #fff; font-size: 11px; vertical-align: middle } #login .loginGroup a:hover, #login .registerGroup a:hover { background: #d7d7d7; color: #333; text-decoration: none } #login .loginGroup a:active, #login .registerGroup a:active { color: #333 } #login .loginGroup a strong, #login .registerGroup a strong { display: block; position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; font-size: 11px; text-indent: -9999px } #login .registerGroup li { float: left; line-height: 1.2em } #login .registerGroup li:first-child:hover { border-left: #222 } #login .registerGroup .buttonGroup { margin-right: 0 } #login .registerGroup .userProfileImg a { min-width: 25px; min-height: 32px; padding: 0; background: 0 0 } #login .registerGroup a span { display: inline-block; position: absolute; right: 2px; top: -9px; min-width: 7px; margin-right: 3px; background: #3b96b6; text-align: center; font-size: 11px; color: #fff; -webkit-text-shadow: 0 1px 0 #333; text-shadow: 0 1px 0 #333 } #login .registerGroup a img { height: 32px; width: 32px; background: #333 } #login .userNotifications { border-left: 1px solid #ccc; border-right: 1px solid #ccc } #login .userNotifications strong { height: 100%; background: url(images/notification_icon.png) center center no-repeat } #login .userMessages strong { height: 100%; background: url(images/message_icon.png) center center no-repeat } #login .userMessages a, #login .userNotifications a { padding: 0 18px } #login .userMessages a span, #login .userNotifications a span { display: inline-block; margin-top: 9px; margin-right: 0; background-color: transparent; font-size: 10px } .hamburger { z-index: 9;position: fixed; right: 0; top: 20px; font: inherit; display: block; width: 70px; height: 60px; overflow: visible; margin-left: -35px; padding: 15px; cursor: pointer; transition-timing-function: linear; transition-duration: .15s; transition-property: opacity, filter; text-transform: none; color: inherit; border: 0; } .hamburger:hover { opacity: .7 } .hamburger-box { position: relative; display: inline-block; width: 40px; height: 24px } .hamburger-inner { top: 50%; display: block; margin-top: -2px } .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before { position: absolute; width: 40px; height: 4px; transition-timing-function: ease; transition-duration: .15s; transition-property: transform; border-radius: 4px; background-color: #fff } .hamburger-inner:after, .hamburger-inner:before { display: block; content: "" } .hamburger-inner:before { top: -10px } .hamburger-inner:after { bottom: -10px } .hamburger--vortex .hamburger-inner { transition-timing-function: cubic-bezier(.19, 1, .22, 1); transition-duration: .2s } .hamburger--vortex .hamburger-inner:after, .hamburger--vortex .hamburger-inner:before { transition-delay: .1s; transition-timing-function: linear; transition-duration: 0s } .hamburger--vortex .hamburger-inner:before { transition-property: top, opacity } .hamburger--vortex .hamburger-inner:after { transition-property: bottom, transform } .hamburger--vortex.is-active .hamburger-inner { transition-timing-function: cubic-bezier(.19, 1, .22, 1); transform: rotate(765deg) } .hamburger--vortex.is-active .hamburger-inner:after, .hamburger--vortex.is-active .hamburger-inner:before { transition-delay: 0s } .hamburger--vortex.is-active .hamburger-inner:before { top: 0; opacity: 0 } .hamburger--vortex.is-active .hamburger-inner:after { bottom: 0; transform: rotate(90deg) } .home .affix-top .hamburger.is-active .hamburger-inner, .home .affix-top .hamburger.is-active .hamburger-inner:after, .home .affix-top .hamburger.is-active .hamburger-inner:before, .hamburger .hamburger-inner, .hamburger .hamburger-inner:after, .hamburger .hamburger-inner:before { background-color: #a20429; } .home .affix-top .hamburger .hamburger-inner, .home .affix-top .hamburger .hamburger-inner:after, .home .affix-top .hamburger .hamburger-inner:before { background-color: #fff } #hamburgercontent { z-index: 8; position: fixed; top: 0;right:0; width: 400px; background: #fff; height: 0px; overflow: hidden; -webkit-box-shadow: -10px 10px 32px -10px rgba(0,0,0,0.67); -moz-box-shadow: -10px 10px 32px -10px rgba(0,0,0,0.67); box-shadow: -10px 10px 32px -10px rgba(0,0,0,0.67); } .hamburgerpanelactive #hamburgercontent {border-bottom: solid 1px #f3f3f3;} #hamburgercontent .inner { min-height: 100%; overflow: hidden; } #hamburgercontent #topmenu { margin: 0px; padding: 0px; display: block; position: absolute; right: 170px; top: 10px; list-style: none; } #hamburgercontent #topmenu li { font-family: 'didact_gothicregular'; padding: 0px; float: left; display: block; margin: 0px 15px; text-transform: uppercase; } #hamburgercontent #topmenu li span.actief { font-weight: bold;} #hamburgercontent #topmenu li a { font-family: 'didact_gothicregular';color: #999;display: inline-block;border-bottom: none; line-height: 25px; height: 25px; -webkit-transition: color 0.3s linear; -moz-transition: color 0.3s linear; -o-transition: color 0.3s linear; -ms-transition: color 0.3s linear; transition: color 0.3s linear; } #hamburgercontent #topmenu li a i { font-style: italic; } #hamburgercontent #topmenu li a:hover { color: #333; border-bottom: 1px solid #333; } #hamburgercontent #topmenu li a.active { color: #333; } #hamburgercontent #menu { margin-top: 140px; } #hamburgercontent #HeroMenu {} #hamburgercontent #HeroMenu ul { margin: 0px; list-style: none;padding: 0px 38px 0px 0px; } #hamburgercontent #HeroMenu ul li { margin: 0px 0px 30px 0px; padding: 0px;list-style: none;font-size: 54px; } #hamburgercontent #HeroMenu ul li a {color: #964B9F; text-decoration: underline; border-bottom:none;font-family: 'aqua_grotesqueregular', sans-serif; line-height: 1; padding: 0px 0px 0px 75px; background-image: url(../Images/ul_XL_paars.png); background-repeat: no-repeat; background-position: 0 20px; -webkit-transition: color 0.3s linear; -moz-transition: color 0.3s linear; -o-transition: color 0.3s linear; -ms-transition: color 0.3s linear; transition: color 0.3s linear; } #hamburgercontent #HeroMenu ul li a:hover { color: #000; text-decoration: underline;background-image: url(../Images/ul_XL_zwart.png);-webkit-animation: mymove .4s infinite; animation: mymove .4s infinite;} #hamburgercontent #HeroMenu ul li a.active { color: #000; background-image: url(../Images/ul_XL_zwart.png); } @-webkit-keyframes mymove { 50% {background-position: 0 20px;} } @keyframes mymove { 50% {background-position: 3px 20px;} } .no-padding { padding: 0; } .navbar{min-height: 100px;} .navbar-header{margin-top: 28px;} #logo_1 {transition: all 0.5s;display: inline-block;background: url(/Portals/57/Skins/Ockham/Images/logo.png) no-repeat;background-size: cover; background-position: center;} .affix-top #logo_1 {background: url(/Portals/57/Skins/Ockham/Images/logo.png) no-repeat;background-size: cover; background-position: center;} .home .affix-top #logo_1 {background: url(/Portals/57/Skins/Ockham/Images/logo-home.png) no-repeat;background-size: cover; background-position: center;} #logo_1 img {max-width: 200px;} @media (max-width: 768px) { #logo_1 {margin-left: 15px;} .affix-top #logo_1 {background: url(/Portals/57/Skins/Ockham/Images/logo.png) no-repeat;background-size: cover; background-position: center;} .home .affix-top #logo_1 {background: url(/Portals/57/Skins/Ockham/Images/logo-home.png) no-repeat;background-size: cover; background-position: center;} } .navbar-default { background-color: #f8f8f8; border-color: rgba(34, 34, 34, 0); -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } @media (min-width: 768px) { .home .navbar-default.affix-top, .navbar-default { background-color: transparent; border-color: rgba(255, 255, 255, 0); } .navbar-default.details, .navbar-default.affix { background-color: #f8f8f8; border-color: rgba(34, 34, 34, 0.05); } .navbar-default.affix-top { border-color: rgba(34, 34, 34, 0); } } .home .navbar-default.affix-top { background-color: transparent; border-color: rgba(255, 255, 255, 0); } .inner .navbar-default.affix-top { background-color: #f8f8f8; border-color: rgba(34, 34, 34, 0.05); } header { position: relative; width: 100%; min-height: 550px; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; background-position: center; text-align: center; } body.home header { background-image: url('../Ockham/Images/header3.jpg');} body.projects header { background-image: url('../Ockham/Images/header3.jpg');} header .header-content { position: absolute; top: 120px; width: 100%; } header .header-content .header-content-inner h1 { font-weight: 700; text-transform: uppercase; margin-top: 0; margin-bottom: 0; font-size: 30px; } .hoofdcontent{padding-top: 130px;} body.home .hoofdcontent, body.projects .hoofdcontent{padding-top: 0px;} @media only screen and (max-width:768px) { .main-navigation { height: auto; width: 100% } } @media only screen and (min-width:767px) { #navbar { float: right } } #dnnMenu ul{padding-left: 80px;} #dnnMenu ul li{list-style: none; font-size: 130%; position: relative; font-weight: 400;transition: all 0.1s ease-in-out;} #dnnMenu ul li:before{transition: all 0.1s ease-in-out;position: absolute;content: ""; opacity: 0; left: -46px; top:0px; width: 26px; height:36px;background: url(Images/h2-arrow.png) no-repeat 50% 50%;} #dnnMenu ul li.active:before{position: absolute;content: ""; opacity: 1; left: -46px; top:0px; width: 26px; height:36px;background: url(Images/h2-arrow.png) no-repeat 50% 50%;} #dnnMenu ul li:hover:before{position: absolute;content: ""; opacity: 1; left: -46px; top:0px; width: 26px; height:36px;background: url(Images/h2-arrow.png) no-repeat 50% 50%;} #dnnMenu ul li a{text-decoration: none; color: inherit;transition: all 0.1s ease-in-out;} #dnnMenu ul li:hover a{color: #666;} #dnnMenu ul li.active a{font-weight: 700;} body.Page-Project #dnnMenu ul li.Projects:before, body.Page-Project #dnnMenu ul li.Projecten:before{position: absolute;content: ""; opacity: 1; left: -46px; top:0px; width: 26px; height:36px;background: url(Images/h2-arrow.png) no-repeat 50% 50%;} main { min-height: 350px } main.no-bg { background: 0 0 } .dnnpane>[class*=col-md], .dnnpane>[class^=col-md] { padding: 0 15px } .image-wrapper { position: relative } .image-wrapper img { display: block; max-width: 100% } .image-wrapper .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; text-align: center } .grid, .grid figure, .grid figure img { position: relative } .image-wrapper .overlay h2 { color: #fff; font-weight: 700; margin-top: 8%; -webkit-text-shadow: 0 2px 2px rgba(0, 0, 0, .1); text-shadow: 0 2px 2px rgba(0, 0, 0, .1); text-transform: uppercase } .content-intro { padding-top: 30px; font-size: 26px; line-height: 30px } .content-intro p { font-size: 22px } .grid { clear: both; margin: 0 auto; max-width: 1000px; list-style: none; text-align: center } .grid figure { float: left; overflow: hidden; margin: 10px 0; max-height: 360px; width: 100%; height: auto; background: #3085a3; text-align: center; cursor: pointer } .grid figure img { display: block; min-height: 100%; max-width: 100%; opacity: .8; width: 100% } .grid figure figcaption { padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden } .grid figure figcaption .grid figure figcaption::after, .grid figure figcaption::before { pointer-events: none } .grid figure figcaption, .grid figure figcaption>a { position: absolute; top: 0; left: 0; width: 100%; height: 100% } figure.hover-effect { background: #333 } figure.hover-effect h2, figure.hover-effect img { -webkit-transition: all .35s ease-in-out; -o-transition: all .35s ease-in-out; transition: all .35s ease-in-out } figure.hover-effect img { -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden } figure.hover-effect h2 { font-size: 30px; color: #7ca0c0; -webkit-text-shadow: 0 2px 2px rgba(0, 0, 0, .4); -moz-text-shadow: 0 2px 2px rgba(0, 0, 0, .4); text-shadow: 0 2px 2px rgba(0, 0, 0, .4) } figure.hover-effect h2>span { color: #fff; font-weight: 700 } figure.hover-effect h2, figure.hover-effect p { position: absolute; bottom: 0; left: 0; padding: 5px; text-align: center; width: 100% } figure.hover-effect p { text-transform: none; font-size: 24px; opacity: 0; padding: 15px; -moz-transition: opacity .35s, -webkit-transform .35s; -webkit-transition: opacity .35s, -webkit-transform .35s; -o-transition: opacity .35s, -webkit-transform .35s; transition: opacity .35s, transform .35s; -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0) } figure.hover-effect:hover h2, figure.hover-effect:hover img { -webkit-transform: translate3d(0, -100px, 0); transform: translate3d(0, -100px, 0) } figure.hover-effect:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .content-block-news, .content-block-reg { margin-bottom: 20px } .content-block-news .article-layout .item { display: block; float: left; position: relative } .content-block-news .article-layout .item .item-image { display: block; position: relative; width: 100%; overflow: hidden; background: -webkit-linear-gradient(bottom right, #c55f1e 0, #66d6ff 100%); background: -o-linear-gradient(bottom right, #c55f1e 0, #66d6ff 100%); background: linear-gradient(to top left, #c55f1e 0, #66d6ff 100%) } .content-block-news .article-layout .item .item-image img { max-width: 100%; width: 100%; height: auto; opacity: .7; filter: alpha(opacity=70); -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0) } .content-block-news .article-layout .item .item-image .item-header { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; color: #fff; background: rgba(0, 0, 0, .1); -webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, .4); -moz-text-shadow: 0 1px 0 rgba(0, 0, 0, .4); text-shadow: 0 1px 0 rgba(0, 0, 0, .4); -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s } .content-block-news .article-layout .item .item-image .item-header strong { color: #fff; display: block; position: absolute; bottom: 15px; left: 15px; right: 15px; font-size: 16px; line-height: 130%; font-weight: 400; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s } .content-block-news .article-layout .item .item-image .item-header .item-meta { display: block; color: #fff; padding: 10px 0 17px; font-size: 11px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; left: 15px; right: 15px; bottom: -40px; border-top: 1px solid rgba(255, 255, 255, .3); opacity: 0; filter: alpha(opacity=0); -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s } .content-block-news .article-layout .item .item-image .item-header .item-meta i.fa { padding-right: 7px } .content-block-news .article-layout .item .item-image .item-header .item-meta span { display: block; color: #fff } .content-block-news .article-layout .item .item-image .item-header .item-category { display: block; font-size: 18px; font-weight: lighter; left: 15px; position: absolute; right: 15px; text-transform: none; top: 15px } .content-block-news .article-layout .item .item-image .item-header .item-category span { border: 1px solid #fff; color: #000; font-size: 24px; display: inline-block; padding: 6px 10px 5px; line-height: 100%; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s } .content-block-news .article-layout .item .item-content { display: block; background: #f4f4f4; width: 100%; font-size: 14px; line-height: 150%; color: #737373; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .content-block-news .article-layout .item .item-content .item-text { display: block; padding: 15px } .content-block-news .article-layout .item .item-content .item-footer-more { display: block; padding: 15px 0; margin: 0 15px; text-align: center; font-size: 14px; text-transform: uppercase; border-top: 1px solid rgba(0, 0, 0, .06); letter-spacing: .3px; color: #737373 } .content-block-news .article-layout .item:hover .item-header .item-meta { bottom: 0; opacity: 1 } .content-block-news .article-layout .item:hover .item-header .item-category span { background: #7ca0c0; border-color: transparent!important; color: #fff } .content-block-news .article-layout .item:hover .item-image img { opacity: 1 } .content-block-news .article-layout .item:hover .item-image .item-header { background: rgba(81, 81, 81, .7) } .content-block-news .article-layout .item:hover .item-image .item-header strong { bottom: 50px } .content-block-news .article-layout .item:hover .item-content { background: #fff; -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, .03); -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, .03); box-shadow: 0 3px 0 rgba(0, 0, 0, .03) } .content-block-news .article-layout .item:hover .item-content .item-footer-more { color: inherit; font-weight: 700; letter-spacing: 0; padding-right: 1px } .content-block-news .item a:hover .item-content { background: rgba(37, 38, 41, .8) } .content-block-news .article-layout:after { display: block; clear: both; content: '' } .contact-form .form-control { border: 1px solid #e3e3e3; border-radius: 0; -webkit-box-shadow: initial; -moz-box-shadow: initial; box-shadow: initial; height: 50px; padding: 12px 15px 15px } .contact-form::-webkit-input-placeholder { color: #e3e3e3 } .contact-form:-moz-placeholder { color: #e3e3e3 } .contact-form::-moz-placeholder { color: #e3e3e3 } .contact-form:-ms-input-placeholder { color: #e3e3e3 } footer {z-index: 1;} footer .footer-above { background: #333333; padding-top: 65px; padding-bottom: 45px; } footer .footer-above p { padding-right: 60px; } @media (max-width: 768px) { footer .footer-above p { padding-right: 0px; } } footer .footer-above p, footer a:link, footer a:visited, footer .language-object { color: #eee; font-size: 14px; text-decoration: none;} footer a.taallink, footer a:hover { color: #eee; text-decoration: underline; } footer .language-object { text-transform: uppercase; } footer .language-object a:link, footer .language-object a:visited { color: #eee; font-size: 14px; font-weight: 700; } footer .footer-below, footer .terms-priv a:link, footer .terms-priv a:visited { color: #d2d2d2; font-size: 12px } #FooterMenu ul { margin: 0 0 24px 0; padding: 0; line-height: 21px;} #FooterMenu li { line-height: 21px; } @media (max-width: 768px) { #FooterMenu li { line-height: 32px; } footer span.telefoon { text-decoration: underline;line-height: 32px; } } footer .footer-col { margin-bottom: 25px } footer .footer-below { background-color: #000; padding: 15px 0 } footer .copyright { float: left } footer .terms-priv { float: right } footer .copyright, footer .terms-priv { padding-left: 15px; padding-right: 15px } footer .links-list ul li { float: left; width: 100%; font-size: 15px; line-height: 1.5em } footer .links-list ul li a:active, footer .links-list ul li a:link, footer .links-list ul li a:visited { color: #fff } footer .links-list ul li a:hover { color: #f0f0f0 } footer .links-list ul li a:before { content: ""; display: inline-block; width: 0; height: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 3px solid #383838; position: relative; bottom: 1px; padding-right: 9px } #dnn_footer_25_2,#dnn_footer_25_3{margin-top: 4px;} .latest-articles { display: block } .latest-articles .item { display: block; border-bottom: 1px solid rgba(255, 255, 255, .08); padding-bottom: 20px; margin-bottom: 20px } .latest-articles .item-header { display: block; float: left; width: 60px } .latest-articles .item-header a { position: relative; display: block } .latest-articles .item-header span { display: block; width: 100%; padding: 0; margin: 0 } .latest-articles .item-header img { border: 2px solid #fff } .latest-articles .item-content { display: block; margin-left: 85px } .latest-articles .item-content p { font-size: 15px; margin-bottom: 15px } .latest-articles .item-content>strong { display: block; font-weight: 700; line-height: 11px; margin-bottom: 5px } .latest-articles .item-content a { color: #d3d3d3; font-weight: 400; font-size: 14px } .latest-articles .publish-date { color: #d3d3d3; font-weight: 400 } .latest-articles .publish-date span { font-size: 12px; font-weight: 400; text-transform: uppercase } .contactus ul { margin-left: 0 } .contactus ul li { color: #fff; font-size: 15px; font-weight: 300; margin-bottom: 5px; list-style: none } .contactus ul li img { margin-right: 5px } .contactus a:link { color: #fff; text-decoration: none } .contactus a:active, .contactus a:hover { text-decoration: underline } .btn-social { background: url(/Portals/0/Images/social-sprite.png); display: inline-block; height: 34px; width: 34px } .btn-social.facebook { background-position: 0 } .btn-social.twitter { background-position: -40px } .btn-social.googleplus { background-position: -80px } .btn-social.linkedin { background-position: -120px } .dnnPrimaryAction, .btn { border: 1px solid transparent; border-radius: 0px; text-decoration: none; font-size: 80%; font-weight: 700; padding: 12px 34px; transition: all 0.1s ease-in-out; } .btn-sm, .btn-group-sm > .btn { padding: 5px 10px; font-size: 12px; line-height: 1.5; } .jplist-items-per-page .btn { font-size: 80%; padding: 9px 34px; } .btn:hover, .btn:focus, .btn.focus { color: #333; text-decoration: none; } .dnnPrimaryAction, .btn-default { color: #fff; background-color: #a20429; border-color: #a20429; } .btn-primary { color: #333; background-color: #cbdfde; border-color: #cbdfde; } .btn-primary:hover { color: #fff; background-color: #005455; border-color: #005455; } .dnnPrimaryAction:hover, .dnnPrimaryAction:focus, .dnnPrimaryAction:active, .btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { color: #fff; background-color: #000; text-decoration: none; border-color: #000; } .open > .dropdown-toggle.btn-primary { color: #fff; background-color: #005455; text-decoration: none; border-color: #005455; } .dnnSecondaryAction { border: 1px solid transparent; border-radius: 0px; text-decoration: none; font-size: 80%; font-weight: 700; padding: 12px 34px; transition: all 0.1s ease-in-out; color: #fff; background-color: #aaa; border-color: #aaa; } .dnnSecondaryAction:hover, .dnnSecondaryAction:focus, .dnnSecondaryAction:active{ color: #fff; background-color: #000; text-decoration: none; border-color: #000; } .cc-btn {text-decoration: none!important; font-family: "Roboto", Arial, Helvetica, sans-serif!important; font-size: 16px!important; } /* lichtaqua: #cbdfde */ /* donkeraqua: #005455 */ .pagination > li > a, .pagination > li > span { color: #999; background-color: #fff; border: 1px solid #ddd; } .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { color: #333; background-color: #eee; border-color: #ddd; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { color: #333; background-color: #cbdfde; border-color: #cbdfde; } .container-content { padding: 10px 15px 15px } .jplist.container .selectproject {display: none;} .jplist.container .panel-collapse.collapse {display: block;} .DNNContainer_Title_h2{padding-top: 100px; padding-bottom: 80px;} @media (max-width: 768px) { .DNNContainer_Title_h2{padding-top: 50px; padding-bottom: 40px;} } @media (max-width: 500px) { .DNNContainer_Title_h2{padding-top: 0px; padding-bottom: 40px;} .jplist.container .heading_wrapper {display: none;} .jplist.container .selectproject {display: block;} .jplist.container .panel-collapse.collapse {display: none;} .jplist.container .panel-collapse.collapse.in{display: block;} .jplist.container .selectproject.selectprojectbtn{margin-bottom: 60px;} .jplist.container .selectproject.anchorspacer {height: 50px;} } .row.article h2.title, .DNNContainer_Title_h3 h2, .DNNContainer_Title_h2 h2{color: #333333; font-size: 50px; font-weight: 700;} .row.article.heroarticle h2.title{color: #fff;} .row.article.heroarticle .caption {color: #fff;} @media (max-width: 768px) { .row.article h2.title, .DNNContainer_Title_h3 h2, .DNNContainer_Title_h2 h2{font-size: 36px;} } .row.article h2.title:before, .DNNContainer_Title_h3 h2:before, .DNNContainer_Title_h2 h2:before{position: absolute;content: ""; left: -20px; top:14px; width: 26px; height:36px;background: url(Images/h2-arrow.png) no-repeat 50% 50%;} @media (max-width: 768px) { .DNNContainer_Title_h3 h2:before, .DNNContainer_Title_h2 h2:before{position: absolute;content: ""; left: 5px; top:12px; width: 16px; height:22px;background: url(Images/h2-arrow.png) no-repeat;background-size: cover; background-position: center;} } .DNNContainer_Title_h3{padding-top: 100px; padding-bottom: 100px;} .DNNContainer_Title_h3 h1, .DNNContainer_Title_h3 h3{color: #a20429; font-size: 22px; font-weight: 400; text-transform: uppercase;} .DNNContainer_noTitle.wit{background-color: #fff; } .DNNContainer_noTitle.grijs1{background-color: #f8f8f8;} .DNNContainer_noTitle.grijs2{background-color: #eeeeee;} .DNNContainer_Title_h2.wit{background-color: #fff;} .DNNContainer_Title_h2.grijs1{background-color: #f8f8f8;} .DNNContainer_Title_h2.grijs2{background-color: #eeeeee;} .DNNContainer_Title_h3.wit{background-color: #fff;} .DNNContainer_Title_h3.grijs1{background-color: #f8f8f8;} .DNNContainer_Title_h3.grijs2{background-color: #eeeeee;} .heading_wrapper { padding-left: 0; padding-right: 0 } .row.article h2.title{ display: block; } body.home .DNNContainer_Title_h2 h2 .TitleH2, body.home .DNNContainer_Title_h3 h1 .TitleH3, body.home .DNNContainer_Title_h3 h3 .TitleH3, body.home .DNNContainer_Title_h4 h4 .TitleH4, body.projects .DNNContainer_Title_h2 h2 .TitleH2, body.projects .DNNContainer_Title_h3 h1 .TitleH3, body.projects .DNNContainer_Title_h3 h3 .TitleH3, body.projects .DNNContainer_Title_h4 h4 .TitleH4 { display: block; margin-bottom: 70px } body.inner .DNNContainer_Title_h2 h2 .TitleH2, body.inner .DNNContainer_Title_h3 h1 .TitleH3, body.inner .DNNContainer_Title_h3 h3 .TitleH3, body.inner .DNNContainer_Title_h4 h4 .TitleH4 { display: block; margin-bottom: 50px } .DNNContainer_Title_h2 h2 .TitleH2.centered, .DNNContainer_Title_h3 h1 .TitleH3.centered, .DNNContainer_Title_h3 h3 .TitleH3.centered, .DNNContainer_Title_h4 h4 .TitleH4.centered { text-align: center } .lms_heading_1, .lms_heading_2, .lms_heading_3, .lms_heading_4, .lms_heading_5, .lms_heading_6 { text-align: center } .lms_heading_1 .lms_heading_title, .lms_heading_2 .lms_heading_title, .lms_heading_3 .lms_heading_title, .lms_heading_5 .lms_heading_title, .lms_heading_6 .lms_heading_title { border-bottom: 1px solid #7b7878; font-weight: 400; margin-bottom: 17px; margin-top: 17px; padding: 0 32px 28px; position: relative } .lms_heading_1 .lms_heading_title:after { content: ""; position: absolute; top: 100%; margin: -10px 0 0 -5px; left: 50%; width: 10px; height: 20px; background: #fff; border-left: 2px solid #7b7878; border-right: 2px solid #7b7878; -webkit-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20deg); transform: rotate(20deg) } .lms_heading_4 .lms_heading_title { margin-bottom: 17px; margin-top: 17px; padding: 0 30px 10px } .subtle-line { display: block; border: none; color: #fff; height: 1px; width: 100%; background: -webkit-radial-gradient(#7b7878 1%, #bbb 30%, #ccc 40%, #fff 70%); background: -o-radial-gradient(#7b7878 1%, #bbb 30%, #ccc 40%, #fff 70%); background: -moz-radial-gradient(#7b7878 1%, #bbb 30%, #ccc 40%, #fff 70%); background: radial-gradient(#7b7878 1%, #bbb 30%, #ccc 40%, #fff 70%); margin-bottom: 32px } .cat_holderholder{ padding-top: 40px;} .cat_holderholder>.col-xs-12.col-sm-6.col-md-4.col-lg-3{ cursor: pointer;} .cat_imageholder{padding: 40px;background-color: #cbdfde; /*background-color: #f0e2ef;background-color: #6f217b;*/transition: all 0.2s;} .Page-Themes .cat_imageholder{padding: 40px;background-color: #cbdfde;} .cat_image{display: block; background-size:contain; background-position: 50% 50%; background-repeat: no-repeat;} .cat_imageholder:hover {opacity: 0.8;} .cat_holder h5 {margin-top: 10px;} .cat_holder.employees {background: url(/Portals/57/Skins/Ockham/Images/bg-intro.png) no-repeat 30% 50%;transition: all 0.1s ease-in-out; padding-bottom: 30px;} @media (max-width: 768px) { .cat_holder.employees{background-image: none;} } .cat_title{} .cat_desc{ padding-bottom: 20px;} .herocontainer { margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .herocontainer { width: 750px; } } @media (min-width: 992px) { .herocontainer { width: 970px; } } @media (min-width: 1200px) { .herocontainer { width: 1170px; } } .row.article.heroarticle {position: relative; cursor: pointer;} .hero_catimg {} .hero_imageholder{padding: 10px; max-width: 180px; display: none; margin-right: 60px;} .hero_image{display: block; background-size:contain; background-position: 50% 50%; background-repeat: no-repeat;} .home .hero_image, .projects .hero_image {-webkit-filter: invert(100%) !important;} .height320{min-height: 320px;} a.carousel-control, a.carousel-control:visited, a.carousel-control:link, a.carousel-control:focus, a.carousel-control:active{ color: #fff; background: none; display : block; align-items : center; } @media (max-width: 768px) { a.carousel-control{display: none!important;} } .carousel-control .fa-angle-left {font-size: 50px; top: 50%; left: 60px; margin-top: -30px; margin-left: -30px;} .carousel-control .fa-angle-right {font-size: 50px; top: 50%; right: 60px; margin-top: -30px; margin-right: -30px;} .carousel-control .fa {background-color: transparent;width: 60px; height: 60px;font-size: 50px; top: 50%; margin-top: -30px; vertical-align: middle;} .carousel.slide .caption {text-align: left;} .carousel.slide .row.article{display: flex;align-items: center;} .carousel-indicators {bottom: -150px;} @media only screen and (max-width: 800px) { .carousel-indicators {bottom: -75px;} } .carousel .carousel-indicators li { height: 10px; width: 10px; } .carousel .carousel-indicators .active { height: 10px; width: 10px; background-color: #ccc; } @media only screen and (max-width: 600px) { .carousel .carousel-indicators .active { height: 10px; width: 10px; background-color: #ccc; } } .carousel-indicators li { background-color: #f2f2f2; border: 0px solid #f2f2f2; } .jplist-group ul.tags{padding: 0;} .jplist-group ul.tags li span{cursor:pointer;} .jplist-group div.checkbox {margin-bottom: 20px;} .jplist-group div.checkbox label{display: flex; align-items: center; line-height: 1.25} @media only screen and (max-width: 992px) { .jplist-group div.checkbox {display: inline-block;} } .list.row.text-shadow {padding-right: 5%;} @media only screen and (max-width: 768px) { .list.row.text-shadow {padding-right: 0;} } .row.latest_holder {cursor: pointer;transition: all 0.3s ease-in-out;} .row.latest_holder:nth-child(even) {background: #f3f3f3;border:solid 1px #f3f3f3;} .row.latest_holder:nth-child(odd) {background: #fff;border:solid 1px #fff;} .row.latest_holder:hover {border:solid 1px #ccc;} .row.latest_holder:last-child {margin-bottom: 40px;} .latest_imageholder {padding-top: 25px;display: none;} .latest_image{display: block; background-size:contain; background-position: 50% 50%; background-repeat: no-repeat;} .latest_title{display: block;} .latest_title h3{ font-weight: 700;} .latest_title h3 a{ color: inherit; text-decoration: none;} .row.latest_holder .latest_title{padding-top: 20px;} .latest_title a.latest_cat {font-size: 85%; margin-right: 15px;} .article .theme{text-align: right; margin-top: 20px; margin-bottom: 30px; font-size: 90%;} .article .theme a{margin-right: 20px;} .article .theme a img{max-height: 50px;padding-right: 10px;} @media (max-width: 768px) { .article .theme{text-align: inherit; margin-top: 20px; padding-bottom: 50px; font-size: 90%;} .article .theme a{margin-right:inherit; display: block; width: 100%; float: left;padding-top: 0px;padding-bottom: 10px;} .article .theme a img{max-width: 55px; max-height: inherit; padding-right: 10px;} .article .theme a:last-child {padding-bottom: 30px;} } .download_holder{ padding: 20px 0px 20px 0px;} .row.docrow:nth-child(even) {background: #f8f8f8;} .row.docrow:nth-child(odd) {background: #f3f3f3;} .row.docrow p:first-child {margin-top: 20px;} .download_imageholder{padding: 40px;background-color: #cbdfde;} .download_imageholder:hover {-webkit-filter: invert(100%) !important;} .download_image{display: block; background-size:contain; background-position: 50% 50%; background-repeat: no-repeat;} /*DNNForm*/ .LoginPanel {width: inherit!important;} .dnnForm { width: 100%; } .dnnForm fieldset { clear: none; position: relative; margin-bottom: 18px; text-align: left; } .dnnForm fieldset fieldset { width: 100%; } .dnnForm .dnnFormItem { clear: both; width: 100%; display: block; position: relative; text-align: left; } .dnnFormItem input[type="text"], .dnnFormItem select, .dnnFormItem textarea, .dnnFormItem input[type="email"], .dnnFormItem input[type="search"], .dnnFormItem input[type="password"] { margin-bottom: 18px; padding: 8px; -webkit-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.8), inset 0px 1px 2px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.8), inset 0px 1px 2px 0px rgba(0, 0, 0, 0.1); color: #333; font-size: 16px; } #dnn_ctr5072_Login_Login_DNN_lblLogin, .dnnLoginRememberMe{display: none; visibility: hidden;} .dnnLoginActions ul.dnnActions{padding: 0!important;margin: 0!important;} .dnnLoginActions ul.dnnActions li{list-style:none; } @media (max-width: 768px) { blockquote.pull-right { padding-right: 30px; } .container { padding-right: 30px; padding-left: 30px; } .container-fluid { padding-right: 30px; padding-left: 30px; } .row { margin-right: -30px; margin-left: -30px; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { padding-right: 30px; padding-left: 30px; } } .EditableArticle {font-size: 80%;} .EditableArticle .publishstatus {display: inline-block; min-width: 100px;} .EditableArticle .publishstatus.statuspublished {color: darkgreen;} .EditableArticle .publishstatus.statusdraft {color:darkorange;}