/* TEST */ // LOAD LIBARY @import "lib/source"; @import "settings"; @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700,700i&display=swap'); // ============================================================================ // TEMPLATE VARIABLES // ============================================================================ // colors & fonts @hand: 'Nothing You Could Do', cursive; @tienne: 'Tienne', serif; @text: #707070; @red: #770310; @orange: #f29100; @brown: #ca998a; @grey: #DCE2ED; // sizes @header: 230; @menubar: 28; @footer: 110; // ============================================================================ // TEMPLATE BASE // ============================================================================ // basic html,body { .h(100%); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;} html { .fs(62.5%); .ofy(scroll); } body { font-size: 16px;line-height: 140%; font-family: 'Roboto', sans-serif; background-image: url(/images/back.png); background-position: top center; background-repeat: no-repeat; background-color: #eeeff0; } // structure .grid(3,4,5,12); #container { .h(n,100%,n); .ps(relative); } .wrapper { .clf(); } .row { .clf(); } .inner { .m(10); } [class^="grid"] { .fl(left); } .hidden { .o(none); } // typo .headings(26,24,20,18,14,12); h1,h2,h3,h4,h5,h6,legend { .ff(@tienne); .fw(normal); .c(mix(@red,white,80%)); } p { .lh(160%); } // links a { color: #000; transition: 0.3 ease-in-out; &:hover, &:active, &:focus { outline: 1; transition: 0.3 ease-in-out;} &:hover, { transition: 0.3 ease-in-out;} img { .b(0); } } // buttons .button { .bgc(@red); .ff(@tienne); .brad(8); .b(0); .t(16,22,white); .p(4,12); &:hover { .bgc(@orange); .tr(background-color 0.2s ease-in); } } // tables table { width:100%; } // list ul,ol { .pl(20); } // forms input[type='text'], input[type='password'], textarea { .brad(2); .bs(2,2,2,fade(black,10)); .b(1,solid,@grey); .p(6,8); &:focus { .bs(0,0,4,fade(#26ACE6,80)); .tr(all 0.2s ease-in); outline: none } } fieldset { .b(0); .mp(0); } legend { .fs(26); .mb(10) } button, input[type='submit'] { .button; } // icons .icon { .s(20); .bgc(@red); .ps(absolute,0,0,n,n); .brad(3); .icon_top, .icon_bottom { .o(block); .w(5); .m(2,auto); } .icon_top { .bgc(@orange); .h(5); .brad(50%); } .icon_bottom { .bgc(white); .h(9); } } // ============================================================================ // TEMPLATE DEFAULT ELEMENTS // ============================================================================ // background effect .bg-effect { .ps(absolute,0,n,n,0); .w(50%,500); .h(auto); .z(-1); } // header #header { .ps(relative); float: left; width: 100%; height: 480px; background-image: url(/images/sunset.jpg); background-position: right center; background-size: cover; .wrapper { .w(100%); margin: 0 auto !important;} .wrapper, [class^="grid"], .inner { .m(0); float: left;} } .erfenis #header{background-image: url(/images/erfenis.jpg);} .schenking #header{background-image: url(/images/coins.jpg); background-position: 50% 60%;} .contact #header{background-image: url(/images/surf.jpg); background-position: 50% 60%;} #header .wrapper.row{height: auto; float: left; width: 100%; background-image: url(/images/grey.png); background-position: 51% 63%; background-repeat: no-repeat;} #header .wrapinner{ max-width: 1500px; margin: 0 auto; } #header .grid3{width: 40%; float: left;} // logo #logo { .w(n,250); margin-top: 31px !important; a { .o(block); .ta(center); } h1 { .notext(); .m(0); } p { .m(0); .pt(5);padding-top: 5px; display: table; float: left; margin: 0 0 0 0; } img { width: 270px; margin-left: 10%} &:hover { .op(0.85); .tr(opacity 0.2s ease-in); } } // slogan #slogan { .w(n,660); margin: 35px 20px 0px 0px!important; h3,h2 { .ts(0,0,4,white); } h3 { .t(24,32,darken(@brown,10)); .m(0); .pt(56); /*.ff(@hand);*/ } h2 { .t(17,38,#cecece); .mt(5); font-family: 'Arvo', serif; text-shadow: none; /*.ff(@tienne);*/ } } // slideshow #slides { .ps(relative); .z(-1); float: left; width: 100%; top: 12px; .wk-slideshow { .size(460,@header); } /*.mask { .ps(absolute,0,n,0,0); .size(200,i); .hgrad(white,fade(white,0)); .z(999); }*/ } #slides .uk-flex-center{background-size: cover; background-position: center !important;} // language .lang { .ps(absolute,(@menubar / 2),8,n,n); .h(@menubar); ul { .lst(none); .mp(0); .h(i); li { .fl(left); .h(i); a { .o(block); .t(12,@menubar,white); .p(0,4); .td(none); &:hover { .c(@red); } } &.lang-active a { .c(@red); } } } } .es-deactivate ul li:nth-child(3) {.o(none);} // menubar .menubar-bg { .h(@menubar); .bg(fade(@red,20)); .ps(absolute,(@menubar / 2),0,n,0); .z(-1); .ta(right); } .menubar { .w(100%); .m(0,auto); ul { .fl(right); .hmenu(@menubar,10,8,level1);.pl(40); .m(0,-5,0,0); a.level1 { .t(18,@menubar,#01587a); .ls(1); font-weight: 400; text-transform: uppercase; padding: 15px 25px; &:hover, &.active { text-decoration: none; background-image: url(/images/square.png); background-repeat: no-repeat; background-position: center left;} } } .menubar-right { .fl(left); .s(35%,@menubar); .hgrad(@red,rgba(256,256,256,0)); } } .inline-menu{ float: right; /*min-width: 50%; background-color: #dddee0;*/ } // top #top { .bg(fade(@red,80)); .brad(20,20,0,0); .inner { .m(n,0,0,0); .pl(90); } ul { .o(block); .hmenu(38,8%,0,level1); .h(60); .mp(0); .mt(30); li { .w(25%); a.level1 { .ta(center); .t(22,38,n,n,uppercase,white); .ff(@tienne); .c(lighten(@brown,20)); .brad(8,8,0,0); &:hover, &.active { .bgc(#E9F2FD); .c(@red); .tr(all 0.2s ease-in); } } } } } // main #main { .ps(relative); .pb(50); float: left; width: 100%; margin-top: -100px; .wrapper { .w(60%,830); .m(40,auto,0,auto); .ps(relative); } #middle { .bg(white); .clf(); .p(20,35,0,100); -webkit-box-shadow: 0px 0px 7px 3px rgba(0,0,0,0.19); -moz-box-shadow: 0px 0px 7px 3px rgba(0,0,0,0.19); box-shadow: 0px 0px 7px 3px rgba(0,0,0,0.19); &.noLeft { .pl(20);} } #content h1 { .mt(0); } .bgfade { .h(60); .vgrad(fade(white,80),fade(white,0)); .mb(35); } &.nosubpage #middle { .brad(0); } &.subpage #middle { .pl(100); } } // left #left { .w(180); .ps(absolute,68,n,n,-89); .bg(fade(@red,50)); .inner { .m(0); } ul { .mp(0); .vmenu(auto,0,5,level2); .bb(1,solid,white); a.level2 { .o(block); .b(1,1,0,1,solid,white); .ff(@tienne); .t(14,20,white); .ta(center); .p(5); &:hover, &.active { .bgc(@red); .tr(background-color 0.2s ease-in); } } .level3 { .o(none); } } } // footer #footer { .h(auto); border-bottom: 10px solid #01587a; float: left; width: 100%;; /*.footerbottom { .bgc(@red); .h(@footer - @menubar); }*/ .wrapper{max-width: 1200px; margin: 15px auto; position: relative; color: #01587a; font-size: 16px; .blokje{position: absolute; right: 0; bottom: 0;} .copyright{float: right; margin: 0; width: 100%; text-align: center; a{color: white; text-decoration: none;font-size: 14px;} } } } #footer > .wrapper{height: 40px;} .sponsors { .m(0,15); a {.o(table-cell);} //img {.maxw(125); .h(auto);} .maxwidth { //img {.minw(253); .h(auto);} } } // ============================================================================ // ZOO APPLICATIONS // ============================================================================ // default zoo elements .media-left { .fl(left); .m(n,20,5,n) } .pos-meta { .mt(0); .c(@brown); } .pos-title { .mb(0); } .pos-bottom { .mt(20); } // news overview .news.overview { &.mod { .p(5,0,25,0); .m(0,15); .b(1,n,solid,@red); } .row { .bt(1,dotted,mix(@brown,white,50%)); .pt(20) } .media-left { .mt(5); } .pos-title, .pos-meta { .o(inline); .m(0); } .pos-title a { .t(16,16,n,n,n,none); } .pos-content p { .m(0); } .pos-links { .ta(right); .mt(5); .pr(28); .ps(relative); } } // meta .pos-meta { a { .c(@brown); .td(none); &:hover { .c(@red); } &:before { content:"- "; } } } // pages overview #pages.frontpage { .teaser-item { .ta(center); .p(0,15,20,15); .ps(relative); .head { .m(0,auto); .s(80%,275); .w(n,180,220); .bgc(lighten(@grey,2)); .pt(12); .ff(@sans); h2.pos-title { .mt(0); a { .t(22,22,n,n,uppercase,none,mix(@red,white,65%)); .ts(0,0,5,white); } } .pos-image { .mt(15); a { .o(block); .w(110%); .brad(50%); .of(hidden); .ml(-5%); .b(1,solid,white); .bs(0,2,8,fade(black,30)); .lh(0); } img { .s(100%,auto); } } &:hover { .bgc(darken(@grey,2%)); .tr(all 0.4s ease-in); h2.pos-title { a { .c(@red); .tr(all 0.2s ease-in); } } .pos-image a { .b(1,solid@orange); .m(-3,-10%,3,n); .w(120%); .bs(0,4,16,fade(black,60)); .tr(all 0.2s ease-in); } } .lt-ie9 & { .h(auto); .pos-image { .pb(15); } &:hover { .pos-image a { .w(110%); .m(0,0,0,-5%); } } } } .pos-links { .mt(20); a { .button; .td(none); .mt(20); } } .pos-description { .ta(left); } } } // gallerijen #pictures { .zoo-gallery { .mt(25); } .teaser-item { .m(0,15,15,0); .ps(relative); a { .o(block); .lh(0); .td(none); img { width:100% !important; height:auto !important; } &:after { content:" "; .ps(absolute,0,0,0,0); background: url("/expospanje/media/widgetkit/widgets/spotlight/images/magnifier.png") no-repeat scroll 50% 50% rgba(0, 0, 0, 0.5); .op(0); } } h2 { .ps(absolute,0,0,n,0); .t(16,18); .bgc(fade(white,70)); .p(4,8); .z(99); a { .lh(18); &:after { .o(none); } } } &:hover { h2 { .bgc(fade(white,90)); .tr(background-color 0.3s ease-in); } a:after { .op(1); .tr(opacity 0.3s ease-in); } } } } // sprekers overview #sprekers { .spreker { .clf(); .mb(25); } .pos-media { .fl(left); .w(20%); .mr(3%); img { .s(100%,auto); } } .pos-content { .fl(left); .w(77%); h3,p { .m(0,n,10,n); } } h1 { .mb(20); } &.detail { h1 { .mb(0); } .pos-content { .fl(none); .w(auto); .mt(20); } } } // ============================================================================ // TABLE LISTINGS // ============================================================================ table.listings { .bb(1,dotted,mix(@brown,white,50%)); td { .t(16,20,bold); .p(4,0); .bt(1,dotted,mix(@brown,white,50%)); &.col1 { .c(@red); } &.col3 a { .c(@text); &:hover { .c(@red); } } } } table#downloads { .bgc(fade(@red,10)); .m(20,n); td { .p(6); .fw(normal); .c(@red); .bb(1,solid,#EFF5F7); a { .fl(right); .brad(6); .bgc(darken(@grey,20)); .t(12,white); .td(none); .p(3,6); &:hover { .bgc(@red); .tr(background-color 0.2s ease-in); } } } } // ============================================================================ // MODULES // ============================================================================ // sponsors .sponsors { h2 { .ff(@sans); .fs(16); &:after { content:":"; } } a { .mr(10); img { } &:hover { .op(0.8); .tr(opacity 0.2s ease-in); } } object embed { width:415px; .m(10,0,0);} } // seminars .seminars { .mb(30); h2 { .bgc(mix(@red,white,60%)); .c(lighten(@brown,30)); .t(22,26); .p(4,8); } table.listings { .col1 { .w(20%); } .col2,.col3 { .w(40%); } .col2,.col3,.col3 a { .fw(normal); } .col3 a { .c(@red); &:hover { .c(@orange); } } } } // resister btn .register {.s(230,auto); .fl(right); .mr(155);.mt(-37); img {.s(100%,auto);} } .video-box {.s(170,auto); .fl(right); .mr(3); .mb(-70); .ps(relative,-55,n,n,n); .z(20);} .fair-box {.s(170,auto); .fl(right); .mr(-170); .mb(-100); .ps(relative,-100,n,n,n); .z(20);} // ============================================================================ // RSFORMS // ============================================================================ fieldset.formFieldset { ol { .lst(none); .mp(0); li { .mb(10); } .formCaption, .formBody { .o(inline-block); } .formCaption { .w(150); } span.formClr { .pl(10); .c(red); .formNoError { .o(none); } } input[type="text"], textarea { .w(400); } input[type="submit"]{ .mt(15); } .rsform-block-intro { .mb(25); .formCaption { .o(none); } } .rsform-block-days { .formCaption { .pl(153); .w(350); .o(block); .fl(none); .c(@red); .mt(20) } .formBody { .pl(153); .cl(both); .mt(10); } label { .mr(8); } } } } .social { .ps(absolute,0,80,n,n); .z(99); .w(70); a { .o(inline-block,32,32); .brad(50%); .bs(0,0,3,fade(black,5)); .mb(4); .bgc(fade(white,50)); .ta(center); &:hover { .bs(0,0,3,fade(black,30)); .bgc(fade(white,70)); .tr(background-color 0.2s); } img { .mt(5); } } } // ============================================================================ // WIDGETKIT // ============================================================================ .wk-slideset { .m(10,8); } .wk-slideset-default > div:hover .next, .wk-slideset-default > div:hover .prev, .wk-slideset .next, .wk-slideset .prev { background:none; .bg(@red); .brad(50%); .s(30); .pst(50%); .mt(-15); } .wk-slideset-default > div:hover .next, .wk-slideset .next { .psr(-23); } .wk-slideset-default > div:hover .prev, .wk-slideset .prev { .psl(-23); } .zoo-gallery-wall.margin > * { .m(0); } .zoo-gallery-wall.margin { .mr(0); } .spotlight { .s(20%,auto); .m(n,0,15,0); } .spotlight > * { width:90% !important; height: auto !important; .ps(n,10%,0,n); .mb(15); } // ============================================================================ // MQ // ============================================================================ #mobile-menubar {.o(none);} @media (min-width: 1500px) { #pages.frontpage .teaser-item .head { .h(300); } } @media (min-width: 1600px) { #pages.frontpage .teaser-item .head { .h(320); } } // SCROLL TO TOP .scrollup { .s(40); .ps(fixed,n,10,10,n); .o(none); .ti(-9999); .bg(fade(#325064,60),"scrolltop.png",no-repeat,center,center); .brad(50%); .bs(0,0,3,fade(black,30)); &:hover { .bgc(@red); .tr(background-color 0.2s); } } // ============================================================================ // BODYCLASSES // ============================================================================ /* body.kortingbg #main #middle { .bg(fade(white,80),"korting.png",no-repeat,top,right); } */ // ============================================================================ // CROSSBROWSER // ============================================================================ html.lt-ie9 { .wk-slideset { .o(none); } } html.lt-ie8 { #main .wrapper { .pt(40); } #left { .pst(108); } .pos-bottom { .cl(both) } } .language-wrapper{ float: right; margin-top: 0px; margin-right: 20px; } .language-wrapper a{ width: 30px; height: 30px; text-align: center; line-height: 30px; background: #325064; display: block; border-radius: 50%; color: white; font-size: 14px; } .page-header{ width: 60%; } .page-header h2{ font-family: 'Arvo', serif; font-weight: 400; color: black; font-size: 36px; text-transform: uppercase; line-height: 120%; } .frontpage #main.nosubpage #middle{ width: 63%; float: left; margin-top: 30px; } #main.nosubpage #middle{ width: 90%; float: left; margin-top: 30px; padding: 7% 5% 3%; } #main #right.grid3{ float: right; width: 30%; margin-top: 115px; } #main #right.grid3 .inner h2{ font-family: 'Roboto', sans-serif; font-weight: 600; color: black; } #main #right.grid3 .inner ul{ padding-left: 35px; } #main #right.grid3 .inner li{ list-style-image: url(/images/arrow.png); margin-bottom: 2%; } #main #bottom{ border-top: 1px solid #e6e6e6; float: left; width: 100%; margin-top: 80px; padding-top: 40px; } #main #bottom .grid12 .inner .uk-overlay-fade { opacity: 0.5; } #main #bottom .grid12 .inner .uk-row-first{ padding-left: 0; } .col1, .col2, .col3, .col4{ width: 40%; /*float: left;*/ margin: 2%; display: inline-block; } #innerbottom .cols{ float: right; width: 75%; text-align: center; } .col1{ margin-left: -10px; } .col3{ display: none; } .col4{ margin-right: 0; } .cols .head{ background-color: #46879f; color: white; text-transform: uppercase; text-align: center; padding: 15px 30px; font-size: 20px; line-height: 120%; background-image: url(/images/blad.svg); background-repeat: no-repeat; background-position: left; background-size: contain; position: relative; } .cols .head::after{ height: 14px; content: ""; background-image: url(/images/arrowdown.png); background-repeat: no-repeat; background-position: center; width: 100%; display: block; position: absolute; left: 0; right: 0; bottom: -12px; } .cols .content{ text-align: center; border-bottom: 2px solid #01587a; padding: 15px 20px; font-size: 16px; font-weight: 300; } .cols .leesmeer{ text-align: center; padding: 5px 0px; font-size: 15px; font-weight: 300; margin-top: 17px; letter-spacing: .5px; } .cols .leesmeer a{ color: #01587a; text-decoration: none; text-transform: uppercase; padding-right: 0px; background-image: url(/images/arrowdown2.png); background-repeat: no-repeat; background-position: bottom center; padding-bottom: 20px; } #innerbottom { width: 100%; float: left; } #yoo-zoo .items h1.pos-title{ font-family: 'Roboto', sans-serif; font-weight: 600; letter-spacing: 1px; } #yoo-zoo .items h2.pos-subtitle, .yoo-zoo h3 { font-family: 'Roboto', sans-serif; font-weight: 600; text-transform: none; margin: 10px 0px !important; font-size: 18px; color: black; line-height: 160%; } .pos-bedrijven span, .pos-omzet span, .pos-tewerk span{ font-weight: 600; } .yoo-zoo h3{ font-style: italic; } #yoo-zoo .items div.teaser-item-bg { padding: 0px 0px 40px 0px; } #yoo-zoo .items div.teaser-item { padding: 0px 7px 40px 7px; } .inside #contentWrapper { background-color: white; margin-top: 60px; float: left; width: 100%; } .inside #contentWrapper .wrapper { width: 60%; min-width: 830px; margin: 0px auto 0 auto; position: relative; } .leden #yoo-zoo .details div.heading { padding-bottom: 5px; border-bottom: solid 0px #323232; text-align: right; } .leden #yoo-zoo .details div.heading h1{ font-size: 32px; padding-right: 15px; font-family: 'Roboto', sans-serif; } .breadcrumb{ margin-top: -40px; margin-left: -10px; position: relative; padding: 0; } .breadcrumb::after{ width: 20px; height: 1px; position: absolute; left: 0; bottom: -15px; background-color: #7cbfe9; content: ""; } .breadcrumb a{ font-weight: 600; text-decoration: none; } .breadcrumb a:hover, .breadcrumb a:focus{ color: #7cbfe9; } .breadcrumb li{ display: inline-block; } .breadcrumb li .divider{ font-weight: 800; color: yellow; margin: 0 10px; } .breadcrumb li:first-child{ display: none; } .col3 .pos-adres{ background-image: url(/images/marker.png); background-repeat: no-repeat; background-position: 0 5px; padding-left: 30px; } .col3 .pos-tel{ background-image: url(/images/phone.png); background-repeat: no-repeat; background-position: 0 5px; padding-left: 30px; } .col3 .pos-website{ background-image: url(/images/web.png); background-repeat: no-repeat; background-position: 0 6px; padding-left: 30px; } .col3 .pos-mail{ background-image: url(/images/mail.png); background-repeat: no-repeat; background-position: 0px 8px; padding-left: 30px; } .col3 .pos-website a, .col3 .pos-mail a{ text-decoration: underline; } .col3 .pos-website a:hover, .col3 .pos-mail a:hover{ color: #325064; } .topbar{ height: 60px; background-image: url(/images/topbar.png); background-repeat: repeat-x; background-position: top; } .topbar .topleft{ float: left; font-size: 14px; color: white; margin: 2px 0; width: 100%; text-align: right; font-weight: 300 } .topbar .topleft .leftinner{ max-width: 1500px; padding: 0 20px; margin: 0 auto; } .topbar .topright{ float: left; font-size: 14px; background-color: rgba(255,255,255, 0.6); margin: 0; width: 40%; text-align: right; height: 60px; display: none; } .topbar .topleft p{ margin: 0.2% 2%; font-weight: 300 } .menubar ul li.level1 { float: left; position: relative; margin-right: 10px; height: auto; } .menubar ul.level1 { height: auto; list-style: none; } #absolute .inner a{ display: block; /* background-color: white; */ /* padding: 12px 30px; */ width: 550px; font-size: 20px; color: #01587a; text-decoration: none; /* border-bottom: 3px solid #01587a; */ position: absolute; right: 0; /* -webkit-box-shadow: 0px 10px 12px -10px rgb(0 0 0 / 48%); -moz-box-shadow: 0px 10px 12px -10px rgba(0, 0, 0, 0.48); */ /* box-shadow: 0px 10px 12px -10px rgb(0 0 0 / 48%); */ margin-right: 40px; } #absolute .inner { width: 61%; min-width: 830px; margin: 0px auto 0 auto; position: relative; } #absolute{ position: relative; z-index: 9; } .pos-content{ float: right; width: 65%; } #yoo-zoo .item div.media-right { margin: 0; float: left; width: 20%; } #yoo-zoo .item div.media-right img{ width: 100%; height: auto; } .floatbox .pos-content { float: right; width: 75%; } .schenking .floatbox .pos-content { float: left; width: 100%; } #yoo-zoo .item div.pos-content .element-itemname{ margin: 0; font-size: 22px; color: #01587a; font-weight: 400; } .yoo-zoo p { margin-top: 10px; margin-bottom: 15px; font-weight: 300; font-size: 16px; } #yoo-zoo .item div.pos-content .element #bannerR{ display: none; } .contact #main.nosubpage #middle { width: 90%; float: left; margin-top: -160px; padding: 4% 5%; } .schenking .module{ float: left; width: 100%; } .schenking .module > h2{ width: 35%; float: left; background-color: #01587a; color: white; font-family: 'Roboto', sans-serif; text-transform: uppercase; font-size: 18px; padding: 2px; text-align: center; } .schenking .module ul{ width: 60%; float: right; margin-top: 14px; } .schenking .module ul li{ line-height: 25px; vertical-align: text-bottom; padding: 7px 20px 5px; display: block; position: relative; margin-bottom: 5px; } .schenking .module ul li:hover{ line-height: 25px; vertical-align: text-bottom; padding: 7px 20px 5px; display: block; position: relative; background-color: #edf3f6; margin-bottom: 5px; } .schenking .module ul li::before{ content: url(/images/list.png); position: absolute; display: inline-block } .schenking .module ul li a{ color: #01587a; margin-left: 35px; text-decoration: none; text-transform: uppercase; font-weight: 300; } .backbutton{ background-color: #01587a; color: white; font-family: 'Roboto', sans-serif; text-transform: uppercase; font-size: 18px; padding: 10px 30px; text-align: center; text-decoration: none; margin-left: 34%; margin-top: 2%; float: left; } .backbutton:hover{ background-color: #dddee0; color: #01587a; } .contact #left { width:auto; position: absolute; top: 200px; right: 100px; left: auto; background-color: transparent !important; } .contact #left h2{ color: #01587a; text-transform: uppercase; font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 18px; margin-bottom: 0px; } .formResponsive .formHorizontal .formControls { display: inline-block; padding-left: 20px; margin-left: 12%; margin-left: 0; } .formResponsive .formHorizontal .formControlLabel { float: left; width: 10%; padding-top: 5px; text-align: left; } .formResponsive input, .formResponsive textarea { max-width: 490px !important; width: 490px !important; font-size: 18px !important; padding: 10px !important; } .formResponsive > h2{ font-family: 'Roboto', sans-serif; color: #01587a; padding-bottom: 15px; border-bottom: 2px solid #01587a; display: inline-block; margin-bottom: 80px; } .formResponsive input[type="submit"], .formResponsive button[type="submit"] { background-color: #01587a; *background-color: #01587a; background-image: none; background-image: none; background-image: none; background-image: none; background-image: none; background-image: none; background-repeat: repeat-x; border-color: #01587a; border-color: #01587a; filter: none; filter: none; color: #ffffff; text-shadow: none; font-family: 'Roboto', sans-serif; text-transform: uppercase; border: none; padding: 10px 30px; font-size: 18px; border-radius: 0; } .pos-content { float: left; width: 100%; } .bannerknop{ float: left; width: 100%; height: 250px; text-align: center; } .bannerknop img{ height: 200px; width: auto; } #innerbottom .module > h2 { width: 35%; float: left; background-color: #01587a; color: white; font-family: 'Roboto', sans-serif; text-transform: uppercase; font-size: 18px; padding: 2px; text-align: center; } #innerbottom .module ul { width: 60%; float: right; margin-top: 14px; } #innerbottom .module ul li::before { content: url(list.png); position: absolute; display: inline-block; } #innerbottom .module ul li { line-height: 25px; vertical-align: text-bottom; padding: 7px 20px 5px; display: block; position: relative; margin-bottom: 5px; } #innerbottom .module ul li a { color: #01587a; margin-left: 35px; text-decoration: none; text-transform: uppercase; font-weight: 300; } #innerbottom .module ul li:hover { line-height: 25px; vertical-align: text-bottom; padding: 7px 20px 5px; display: block; position: relative; background-color: #edf3f6; margin-bottom: 5px; } // ============================================================================ // TEMPLATE VARIABLES // ============================================================================ @breakpoint-tablet : 768px; @breakpoint-phone : 300px; // Tablet Styles @media only screen and (max-width: 1024px) { body {.w(n,640,n); /*background:#daf0fd;*/ } #header { .h(140); .bgc(white); #slides {.z(-100); .o(none); .wk-slideshow {.h(140); .slides {height: 140px !important; width: 280px !important; * , &>* {height: 140px !important; width: 280px !important;} } } } #logo { .w(135); .mp(0); .minw(0); .m(25,20); h1 { .o(none); } img { .w(auto); .h(auto); .maxh(90); } p { .mp(0); .fl(none); .o(block); } } #slogan { /*.o(none);*/ .ps(absolute); .psl(30%); .pst(25); h3 { .mp(0); font-size: 13px !important; top:0 !important; .lh(20); } h2, h2 span {.mp(0); font-size: 18px !important; top:0 !important; .lh(25);} } } .menubar { .w(100%); .ps(relative); .m(0); .of(hidden); ul.level1 { .w(70%); .ml(15); } .menubar-right { .ps(absolute,n,-55,n,n);} } .sponsors { img { .maxw(150); .h(auto);} a {.o(inline-block);} } #main { .wrapper { .w(100%);.minw(640);.m(40,auto,0,auto);.ps(relative);} #middle { .w(96%); .m(0 auto); .p(0);} } .lang, .social, .register, .video-box, .fair-box { .o(none); } .lang { .o(block); .pst(0);} .social { .o(block); .s(32); p { .m(0);} } .register { .o(block); .m(-95,5,0,0); .ps(relative); .z(100);} div.register { .o(block); .w(50%);.fl(none); .m(0, auto); .ta(center); .ps(relative, 20,n,n,n); img { .w(auto);} } .video-box { .o(block); .m(0,5,0,0); .ps(absolute,-125,0,n,n); .z(100); .w(120); img { .maxw(100%); .h(auto);} } .fair-box { .o(block); .m(0); .ps(relative); .z(100); .w(120); .pst(0); .mt(-160); .psl(-185); } #main.subpage #middle {.mp(0,auto,0,0);} #top {.w(96%); .m(0, auto); .inner { .m(0);} ul {.m(0);} } #top ul li a.level1 {.fs(15);} #left {.psl(14); .pst(85);} #content, #innerbottom {.m(13,3%,0,3%); &.noLeft {.m(13,0,0);} } #pages.frontpage .teaser-item .head .pos-image a { .w(100%); .mp(0);} } @media only screen and (max-width: 1550px) { .contact #left { width: auto; position: absolute; top:485px; right: 10px; left: 50px; background-color: transparent !important; bottom: 25px; } .contact #main.nosubpage #middle { width: 90%; float: left; margin-top: -160px; padding: 4% 5% 15%; } } @media only screen and (max-width: 1250px) { #header .grid3 { min-width: 35%; float: left; } .erfenis #header { background-image: url(/images/erfenis.jpg); background-position: center right; } } @media only screen and (max-width: 1200px) { .inline-menu { float: right; background-color: #dddee0; } #header .wrapper.row { background-image: none; } } @media only screen and (max-width: 1100px) { #main .wrapper { width: 90%; min-width: 830px; margin: 40px auto 0 auto; position: relative; } .cols .content { text-align: center; border-bottom: 2px solid #01587a; padding: 15px 20px; font-size: 16px; font-weight: 300; min-height: 120px; } .contact #left { width: auto; position: absolute; top: auto; right: 10px; left: 50px; background-color: transparent !important; bottom: 25px; } .contact #main.nosubpage #middle { width: 90%; float: left; margin-top: -160px; padding: 4% 5% 150px; } #slogan { min-width: auto; } } @media only screen and (max-width: 1024px) { #header { height: 450px; background-color: #ffffff; } .menubar ul a.level1 { font-size: 16px; line-height: 28px; color: #01587a; letter-spacing: 1px; font-weight: 400; text-transform: uppercase; padding: 15px 20px; } .menubar ul.level1 { width: 100%; margin-left: 0; } .menubar { width: 100%; position: relative; margin: 0; overflow: hidden; } .inline-menu { float: right; min-width: 50%; background-color: #dddee0; margin-top: 3%; padding-left: 15px; } #header #logo { min-width: 35%; margin: 0; padding: 0; margin: 25px 0px 25px 20px; } #header #logo img { width: 300px; height: auto; max-height: 90px; margin-left: 0; } .col1, .col2, .col3, .col4 { width: 45%; float: left; margin: 2% !important; } .cols .content { text-align: center; border-bottom: 2px solid #01587a; padding: 15px 20px; font-size: 16px; font-weight: 300; min-height: 65px; } .schenking .module { float: right; width: 100%; } .contact #main.nosubpage #middle { width: 90%; float: left; margin-top: -100px; padding: 4% 5% 150px; } } @media only screen and (max-width: 900px) { .topbar .topright { display: none; } .topbar .topleft { float: right; font-size: 14px; color: white; margin: 2px 0; width: 100%; text-align: right; font-weight: 300; } .inline-menu { float: right; min-width: 200px; background-color: #dddee0; margin-top: 2%; } .menubar ul.level1 { width: 50px; margin-left: 0; float: left; } } // Phone Styles @media only screen and (max-width: 800px) { body {.w(n,0,@breakpoint-tablet); /*background:#daf0fd;*/ } [class^="grid"] { .o(block); .fl(none); .w(100%);} #main { .wrapper { .w(100%);.minw(250);.m(20,auto,0,auto);.ps(relative);} #middle { .w(96%); .m(0 auto); .p(0);} } .lang, .social, .register, .video-box, .fair-box, #slides { .o(none); } .fair-box { .o(block); .fl(none); .m(0,auto); .pst(0); .w(96%);.ta(center); .bg(rgba(255, 255, 255, 0.6)); .brad(20); img {.m(0); .p(15,n); vertical-align: middle; .w(75%); .h(auto);} } div.register {.o(block); .w(100%);.fl(none); .m(0); .pst(0);} .lang { display: block; top: 0; right: 0; position: relative; float: right; margin-top: -33px; margin-right: 10px; ul li.lang-active a {.c(white); .fw(bold);}} #header {.h(350); .wrapper { margin: 30px auto !important; float: none} #slogan {.o(inline-block); .bg(n); .minw(0); .ta(center); .p(15,0); .ps(absolute,0,0,n,inherit); .w(60%); h2 { font-size:16px !important; .p(0); .lh(20); top:0 !important;} /*h3 { .o(none);}*/ } #logo { .w(275px); .mp(0); .minw(0); .m(50%,auto,0,auto); float: none; h1 { .o(none); } img { .w(100%); .h(auto); .maxh(90); } p { .mp(0); .fl(none); .o(block); } } } .menubar-bg {.o(none);} #menubar {.o(block); .mp(0); .w(100%); .bg(@red); ul { .o(none);} } #pages.frontpage { .pos-description, .pos-links { .o(none);} .teaser-item .head { margin: 0 auto; width: 80%; height: 50px; min-width: 0; max-width: 100%; h2.pos-title { .ta(right); a { font-size: 16.5px; line-height: 22px; .mr(10); .fw(bold); } } .pos-image a, .pos-image a:active { .w(40%); .mt(-70); .maxw(75);} &:hover { .pos-image a { .w(40%); .mt(-70); .maxw(75); } } } .grid4:nth-child(2) { .teaser-item .head { h2.pos-title { .ta(left); a { .ml(10); } } .pos-image { .ps(relative);} .pos-image a { .ps(absolute,n,-15,n,n);} } } } .news.overview { .o(none);} .sponsors { .ta(center); a {.o(inline-block); .m(0 auto); .bs(0,0,20px,10px,white);} } #menubar {.o(none);} #mobile-menubar {.o(block); .mp(0); .bg(#01587a); .w(100%); .c(white); .minh(40); .lh(40); position: fixed; top: 0; z-index: 99; a.mobileToggle { .c(white); .td(none); .fw(bold); &:before{ content:''; .o(inline-block); .s(20); background-size:cover; .fl(left); .m(10); background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAkCAYAAAAQC8MVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkMxMTM5RDJEODdBNzExRTU4MzhBQzA2Qjg2MjU5OTIwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkMxMTM5RDJFODdBNzExRTU4MzhBQzA2Qjg2MjU5OTIwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzExMzlEMkI4N0E3MTFFNTgzOEFDMDZCODYyNTk5MjAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzExMzlEMkM4N0E3MTFFNTgzOEFDMDZCODYyNTk5MjAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz76K+RRAAAApklEQVR42uyXUQ2AMBBDbwQDs4AFLGABJOBlEkACGpDALEwCkzBuMCQsWZM2abLPl8uu6ZmU0iQim9pKuwrqxSjs3TjoL59hk2AodgIkwtaE9SCs74LlJFgbT4SodgYnDLhghCVsVfUlsmCi69LHCDDYk62LC4YIG0FYg0E7GPlnCUtYwn6tK2sAaF0hwx7qGWCwDql1BaQ/a5kGhC2XggOB3R8BBgAXtji9PAS+ggAAAABJRU5ErkJggg=='); } } &.active { a.mobileToggle:before { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAkCAYAAAAQC8MVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE3RjNFOUY3ODdBOTExRTU4OTNEOEVGM0ZGMjIwMzY0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE3RjNFOUY4ODdBOTExRTU4OTNEOEVGM0ZGMjIwMzY0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTdGM0U5RjU4N0E5MTFFNTg5M0Q4RUYzRkYyMjAzNjQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTdGM0U5RjY4N0E5MTFFNTg5M0Q4RUYzRkYyMjAzNjQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Yv01EAAABcUlEQVR42tTYi23CMBAGYOINsgIrZAU6QleAETqLGQFGOEbwCmEEGMF1JFdKrTzu8cdtLJ1QjLh8itDdxU2M8bCX5Wb22xQ+RcifLeBeXznfTZ1veLJFtCn6+HuFvH9QBhX5XimO0jwcqBVMM/nEYC5UC6aVfCKwBCoFEzMfGyxNzAVL8/USrGbNgUmZ77SG/Sldb0Uh6VJQUYaG65OytD25dfaqvMEYbIHeOdjxY/ZRv16G35K2zlrAm0KnsDXBZO1gtcCkadtLX/r/BF3DbgFWQzlYJNgE5WIRYDN03MHW1tE4eLeIAZ6DtXSmpdYMxyKgMLCrBIWAXUWoGewqQ01g9wdQNdjVGpwh4Fxwb4CCb2kcYet3sKnOZAF3qA42tR4pPoq9i+EVabO/AYFniSAdZAJ4KOGCe+4pT7kRwNOTR0HnRsQAHvM8Aro0zwbwPOqt0CGahZPvcy7aj3wIYV1Dw/nMDeSqOQVq9nRM/y3AAOpIdApp1j4wAAAAAElFTkSuQmCC'); } } .popup{.o(none);} &.active { .ps(fixed); .popup {.o(block); background:#daf0fd; .ps(absolute); .z(999); .w(100%); .ta(center); .c(@red); ul { .mp(0); li{ .bb(1,solid, white); .lst(none); .mp(0); a{ .c(@red); .fw(bold); .td(none); .fs(18);} } } .video-box {display: block; .p(15,0); float: none; top: 0; margin: 0 auto; background: @red; width: 100%; p { .m(0);} } } } } #left { width: 100%; position: relative; top: 0; left: 0; ul.level2.moved { .bb(15,solid,white);} } #main.subpage #middle { padding-left: 0; } #mobile-menubar.active .popup ul li a { color: #770310; font-weight: 400; text-decoration: none; font-size: 26px; padding: 15px; display: block; } .erfenis #header { background-image: url(/images/erfenis.jpg); background-position: 75% 0; } table.listings td { .fs(14);.p(10,9); &.col3 {.ta(center); .mb(20);} } footer {.menubar {.o(none);}} .seminars table.listings td { &.col1, &.col2, &.col3 {.o(block); .w(100%);}} fieldset.formFieldset ol .formCaption, fieldset.formFieldset ol .formBody {.w(100%);} fieldset.formFieldset ol input[type="text"], fieldset.formFieldset ol textarea { .w(90%);} .wrapper.row{ ul.submenu { .bg(rgba(119, 3, 16, 0.5)); .mp(0); .vmenu(auto,0,5,level2); .bb(15,solid,white); a { .o(block); .b(1,1,0,1,solid,white); .ff(@tienne); .t(14,20,white); .ta(center); .p(5); &:hover, &.active { .bgc(@red); .tr(background-color 0.2s ease-in); } } .level3 { .o(none); } } } #main .bgfade { .o(none);} #absolute .inner { width: 100%; min-width: 100%; margin: 0px auto 0 auto; position: relative; } .col1, .col2, .col3, .col4 { width: 96%; float: left; margin: 2%; } #main { position: relative; padding-bottom: 50px; float: left; width: 100%; margin-top: -55px !important; } .topbar{display: none; } #yoo-zoo .item div.media-right{display: none;} #yoo-zoo .item div.pos-content{width: 100%;float: left; margin-top: 50px} #footer { /*height: 100px;*/ border-bottom: 10px solid #01587a; float: left; width: 100%; padding-bottom: 50px; } #footer > .wrapper { height: 40px; margin: 5%; } .schenking .module { float: right; width: 100%; } .schenking .module > h2 { width: 100%; } .schenking .module ul { width: 100%; } .contact #left { width: auto; position: absolute; top: auto; right: 10px; left: 35px; background-color: transparent !important; bottom: 0px; } .contact #main.nosubpage #middle { width: 90%; float: left; margin-top: -160px; padding: 4% 5% 25%; } .formResponsive input, .formResponsive textarea { max-width: 270px !important; width: 100% !important; font-size: 18px !important; padding: 10px !important; } #g-recaptcha-response{display: none !important} .formResponsive .formHorizontal .formControls{ padding-left: 0 !important; display: block !important; width: 100%; } .formResponsive .formHorizontal .formControlLabel { float: left; width: 100%; padding-top: 5px; text-align: left; padding-bottom: 10px; } .formResponsive .formHorizontal input, .formResponsive .formHorizontal textarea, .formResponsive .formHorizontal select, .formResponsive .formHorizontal .formValidation, .formResponsive .formHorizontal .uneditable-input, .formResponsive .formHorizontal .input-prepend, .formResponsive .formHorizontal .input-append { display: block !important; *display: inline; margin-bottom: 0; *zoom: 1; } } .topbar a{ color: white !important; } .cc-banner.cc-bottom { background-color: #01587a !important; } .cc-compliance>.cc-btn { background-color: #949598 !important; } .mobile{display: none;} .desktop{display: block;} .desktop.kantoorbutton img{ width: 100%; padding: 0 0px 20px; margin: 0 auto; } @media only screen and (max-width: 550px){ .mobile{display: block;} .desktop{display: none;} .mobile.kantoorbutton img{ /*max-width: 227px;*/ max-width: 100% !important; } #main.nosubpage #middle { width: 90%; float: left; margin-top: -195px; padding: 25% 5%; } #absolute .inner a { display: block; /* background-color: white; */ /* padding: 12px 30px; */ width: 80%; font-size: 20px; color: #01587a; text-decoration: none; /* border-bottom: 3px solid #01587a; */ position: relative; right: auto; /* -webkit-box-shadow: 0px 10px 12px -10px rgb(0 0 0 / 48%); -moz-box-shadow: 0px 10px 12px -10px rgba(0, 0, 0, 0.48);*/ /* box-shadow: 0px 10px 12px -10px rgb(0 0 0 / 48%); */ /* margin-right: 40px; */ top: -30px; margin: 0 auto; display: block; } /*------- enkel als de banner niet getoond wordt --------*/ #main.nosubpage > .relative{ height: 155px; } #main.nosubpage #middle { width: 90%; float: left; margin-top: -195px; padding: 0% 5%; } } @import "event-booking"; @import "responsive";