html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;line-height:initial;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;transition:all 0.5s ease}.screen-reader-text{clip:rect(1px, 1px, 1px, 1px);position:absolute !important} .aside-toggle { background: none; width: 50px; height: 45px; position: fixed; top: 0px; left: 0px; border: none; padding: 11px 9px; z-index: 2; cursor: pointer; } .aside-toggle span { background: #111; display: block; width: 32px; height: 2px; border-radius: 1px; margin-bottom: 8px; } .aside-close { width: 45px; height: 45px; background: none; border: none; position: absolute; right: 5px; top: 0px; padding: 12px 12px; z-index: 1 } .aside-close span { background: #111; display: block; width: 32px; height: 2px; } .aside-close span:nth-child(1) { transform: rotate(45deg); } .aside-close span:nth-child(2) { transform: rotate(-45deg); margin-top: -2px; } .no-scroll{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; } #sidebar { height: 100vh; width: 320px; position: fixed; top: 0; bottom: 0; left: -335px; background: #fff; z-index: 11; box-shadow: 0 0 15px rgba(0,0,0, 0.8); } #blayer { background: rgba(0,0,0, 0.88); box-shadow: inset 0px 0px 150px rgba(0,0,0, 0.8); position: fixed; top: 0; right: 0; bottom: 0; left: 0px; display: none; z-index: 4; } a { text-decoration: none; } #header, #container, #above-content, #below-content, #footer, p { -webkit-animation: fadein 1.75s; -moz-animation: fadein 1.75s; -ms-animation: fadein 1.75s; -o-animation: fadein 1.75s; animation: fadein 1.75s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } article { display: inline-block; } .credits { position: absolute; bottom: 8px; left: 8px; width: 100%; font-size: 0.7em; color: rgb(0,0,0, 0.7); } .credits a { color: rgb(0,0,0, 0.7); } @font-face { font-family: 'Josefin Sans'; font-style: normal; font-weight: 400; src: url('fonts/josefin-sans-v17-latin-regular.eot'); src: local(''), url('fonts/josefin-sans-v17-latin-regular.eot?#iefix') format('embedded-opentype'), url('fonts/josefin-sans-v17-latin-regular.woff2') format('woff2'), url('fonts/josefin-sans-v17-latin-regular.woff') format('woff'), url('fonts/josefin-sans-v17-latin-regular.ttf') format('truetype'), url('fonts/josefin-sans-v17-latin-regular.svg#JosefinSans') format('svg'); } @font-face { font-family: 'Josefin Sans'; font-style: normal; font-weight: 500; src: url('fonts/josefin-sans-v17-latin-500.eot'); src: local(''), url('fonts/josefin-sans-v17-latin-500.eot?#iefix') format('embedded-opentype'), url('fonts/josefin-sans-v17-latin-500.woff2') format('woff2'), url('fonts/josefin-sans-v17-latin-500.woff') format('woff'), url('fonts/josefin-sans-v17-latin-500.ttf') format('truetype'), url('fonts/josefin-sans-v17-latin-500.svg#JosefinSans') format('svg'); } @font-face { font-family: 'Josefin Sans'; font-style: normal; font-weight: 600; src: url('fonts/josefin-sans-v17-latin-600.eot'); src: local(''), url('fonts/josefin-sans-v17-latin-600.eot?#iefix') format('embedded-opentype'), url('fonts/josefin-sans-v17-latin-600.woff2') format('woff2'), url('fonts/josefin-sans-v17-latin-600.woff') format('woff'), url('fonts/josefin-sans-v17-latin-600.ttf') format('truetype'), url('fonts/josefin-sans-v17-latin-600.svg#JosefinSans') format('svg'); } @font-face { font-family: 'Josefin Sans'; font-style: normal; font-weight: 700; src: url('fonts/josefin-sans-v17-latin-700.eot'); src: local(''), url('fonts/josefin-sans-v17-latin-700.eot?#iefix') format('embedded-opentype'), url('fonts/josefin-sans-v17-latin-700.woff2') format('woff2'), url('fonts/josefin-sans-v17-latin-700.woff') format('woff'), url('fonts/josefin-sans-v17-latin-700.ttf') format('truetype'), url('fonts/josefin-sans-v17-latin-700.svg#JosefinSans') format('svg'); } html { font-family: 'Josefin Sans', 'Trebuchet MS', Helvetica, sans-serif; color: #111; margin-top: 0px !important; font-size: 18px; } body { width: 100%; height: 100vh; background: #000; } .aside-toggle { background: rgba(0,0,0, 0.7); position: fixed; } .aside-toggle span { background: #fff; } .aside-close span { background: #fff; } #branding { width: 100%; height: 138px; position: absolute; top: 42px; display: flex; justify-content: center; align-items: center; } /* #site-title { background: transparent url("img/logo.png") center center no-repeat; font-size: 0px; display: block; margin: auto; } */ #site-title { width: 150px; height: 150px; background-size: 100% 100%; } #aside-title { width: 100%; height: 200px; background-size: 150px 150px; padding: 45px; } #header { width: 100%; height: 38vh; background: #000 url("img/background.jpg") center center no-repeat; background-size: cover; object-fit: cover; margin: auto; display: block; overflow: hidden; } #container { max-width: 768px; display: block; margin: 0 auto; padding: 45px 12px; color: #fff; } #content { margin-top: -100px; } article { width: 100%; height: 100%; background: #000; padding: 50px; margin: 0 auto; text-align: center; font-size: 22px; display: flex; flex-direction: column; } h1 { font-size: 1em; text-align: center; padding: 24px 18px 18px 18px; color: #fff; line-height: 1.5; } h2 { font-size: 15px; } p { margin-bottom: 22.5px; line-height: 1.5em; margin-top: 50px; } a { color: #fff; } #sidebar { background: #111; color: #fff; box-shadow: unset; } #sidebar .block { padding: 4px; } #info, ul#social { width: inherit; display: flex; margin: 25px auto; position: absolute; bottom: 0; justify-content: center; align-items: center; } #info { padding: 5px; } .adres { color: #fff; position: absolute; bottom: 100px; text-align: center; width: 320px; display: block; margin: auto; text-transform: uppercase; font-size: 12px; letter-spacing: 4px; line-height: 1.5; } aside h2 { text-align: center; margin-bottom: 0; margin-top: 50px; } .contactformulier { height: 400px; width: 100%; overflow: hidden; } aside li { width: 36px; height: 36px; float: right; margin: 0px 8px; padding: 4px; background: transparent; list-style-type: none; } #social svg { fill: #fff; } #footer { width: 100%; text-align: center; margin-bottom: 100px; } .site-description { font-size: 1.25em; font-weight: bold; text-transform: uppercase; margin: 50px auto; } #copyright { font-size: 0.6em; color: #666; margin: 50px auto; } #menu-bottom { height: 50px; position: fixed; right: 0; bottom: 0; left: 0; box-shadow: 0px 0px 6px #000; } #menu-bottom a { width: 100vw; height: 50px; color: #fff; background: #000; font-size: 18px; Text-transform: uppercase; text-align: center; display: table-cell; vertical-align: middle; background-color: #27d698; background-image: linear-gradient(to bottom right, #27d698, black); } .logolink { width: auto; margin: auto; display: block; padding: 50px 12px 0px 12px; } .logolink img { width: 120px; height: 120px; } @media screen and (min-width: 768px) { #container { padding: 45px 45px 0px 45px; } h1 { font-size: 1.5em; letter-spacing: 5px; } #menu-bottom { display: none; } /* article { height: calc(100vh - 195px); } */ .logolink { width: unset; height: auto; display: flex; justify-content: center; align-items: center; margin-top: auto; } #footer { margin-bottom: 0; } } @media screen and (min-width: 1024px) { body { box-shadow: inset 0 0 200px rgba(0,0,0, 0.8); } #social li:hover svg { fill: #27d698; } button:hover span { background: #27d698; } a:hover { color: #27d698; } a:hover img, #site-title:hover { filter: invert(59%) sepia(73%) saturate(624%) hue-rotate(107deg) brightness(133%) contrast(92%); } }