* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body{ padding: 0; margin: 0; -webkit-overflow-scrolling : touch; } body { font-family: 'texgyreheroscnbold'; } h1, p { padding: 0; margin: 0; } h2 { line-height: 22px; font-size: 16px; font-family: "inconsolata", monospace; font-weight: normal; border-bottom: 3px double black; padding: 10px; margin: 0; } a:visited { color:black} .hiddenOverflow{ position: fixed; overflow-y:scroll; width: 100%; } body { font-family: 'texgyreheroscnbold'; font-size: 18px; line-height: 18px; } img#promotion{ margin-left: 50px; } .fixedsticky { top: 0px; } #zwartIntro{ height: auto; overflow: hidden; } .zwartArea{ background-color: black; width: 80%; float: right; position:relative; } .zwartAreaIntro img { max-width: 100%; height:auto; } .zwartAreaText{ color: white; } .zwartAreaWhite{ background-color: white; } #logoWhite { display:none; } /* IMPORTANT */ .zwartAreaFull{ margin:0; margin-left: 10%; margin-bottom: 10%; padding: 0; overflow: hidden; width: 80%; background-color: black; } .zwartAreaFull a{ color: white!important; } .zwartColophon { margin: 10%; } .zwartColophon h1:first-of-type { padding-top: 0; } .zwartAreaFull p, h1{ padding: 15px; font-weight: normal; font-size: 32px; line-height: 1.3; color: white; } .zwartAreaFull h1{ text-indent: 50px; } .zwartAreaFull h1.highlight{ margin-top: -30px !important; } .closeSidebar { display: none; } .colophon, .highlight{ color: white; padding-top: 40px; font-size: 25px !important; line-height: 1.5 !important; font-family: "texgyreheroscnbold", monospace; } p.colophon {5px!important;} .project p a { color: white; border-bottom: 3px double white; text-decoration: none; } .colophon a { color: white!important; text-decoration: none; border-bottom: 3px solid white; } .colophon ul { color: white!important; text-decoration: none; border-bottom: 3px solid white; } #sortArea label{ margin-right: 6px; } #sortArea input{ display: none; } .closeSidebar img{ height: 16px; margin-top: 4px; } #sidebar{ position: fixed; left: 0; top: 0; width: 20%; height: 100%; /*overflow-y:auto;*/ } .sidebarMobile{ position: relative; left: 0; overflow: hidden; width: 100%; } #sidebar #logo{ width: 99%; padding: 10px; padding-bottom: 0px; } .sidebarBorderLeft{ border-left: 3px solid black; } #sidebarInner{ display: none; } #sideBarDescInfo{ border-bottom: 3px solid black; } #sideBarDescInfo p{ padding: 10px; font-size: 25px; line-height: 1.1; margin: 0; } #sideBarDescInnerToggle{ display: block; } #sideBarDescInner{ /*height: calc(100vh - 47px);*/ overflow: auto; } #sideBarDescInner p{ padding: 10px; line-height: 1.4; font-size: 16px; font-family: "inconsolata", monospace; border-bottom: 3px double black; } #sideBarDescInner a{ color: black; text-decoration: none; } .relative{ position: relative !important; } .filterDesc u{ text-decoration: none; text-transform: capitalize; margin-right: 20px; margin-left: 20px; } #sideBarDesc .filterDesc{ display: none; margin-top: 6px; padding-bottom: 20px; } #filter{ width:100%; float: right; line-height: 1.1; background-color: white; color: black; z-index: 999; border-bottom: 3px solid black; font-size: 25px; font-family: 'texgyreheroscnbold'; padding: 10px; } label{ float: left; } /* ---- isotope ---- */ .isotope { margin-top: 50px; z-index: 1; width: 100%; overflow: hidden; color: black; transition-delay: 0.2s !important; -webkit-transition: ease-out 1s; -moz-transition: ease-out 1s; -o-transition: ease-out 1s; transition: ease-out 1s; } .isotope h1 { color: black; font-size: 45px; line-height: 1.1; letter-spacing: -1px; display: inline-block; vertical-align: middle; } /*.isotope>div{ width: 33.333%; }*/ /* ---- isotope items ---- */ #section02 { padding-bottom: 20px; } .item, .grid-sizer { width: 33.333%; } .item { float: left; height: 500px; /*margin: 0 auto;*/ text-align: center; padding: 30px; line-height: 500px; } /*.item>*{ position: relative; top: 50%; transform: translateY(-50%); } */ .item.widthA { width: 66.666%; } /* clear fix */ .isotope:after { content: ''; display: block; clear: both; } .isotope img { max-width: 100%; max-height: 100%; vertical-align: middle; width:500px; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; /* IE 6-9 */ } @media only screen and (max-width:1600px){ .isotope h1 { font-size: 35px; } #sideBarDescInfo p { font-size: 20px; } #filter { font-size: 20px; } #sideBarDescInner p, h2 { margin-bottom: 5px; padding-bottom: 5px; line-height: 21px; font-size: 15px; font-family: "inconsolata", monospace; border-bottom: 3px double black; } #sidebar { width: 25%; } #section02, .zwartArea{ width: 75%; } } @media only screen and (max-height:768px){ .colophon, .highlight { -webkit-columns: 1; -moz-columns: 1; columns: 1; } .zwartAreaFull p { font-size: 28px; } } @media only screen and (max-width:1280px){ .item { width: 100%; } .item.widthA { width: 100%; } .grid-sizer { width: 100%; } #sideBarDescInfo p { font-size: 20px; } #filter { font-size: 20px; } #sideBarDescInner p, h2 { margin-bottom: 5px; padding-bottom: 5px; line-height: 21px; font-size: 15px; font-family: "inconsolata", monospace; border-bottom: 3px double black; } #sidebar { width: 30%; } #section02, .zwartArea { width: 70%; } .zwartAreaFull p { font-size: 20px; line-height: 1.2; } .zwartAreaFull h1{ font-size: 30px; text-indent: 20px; } .colophon, .highlight { color: white; padding-top: 40px; font-size: 15px !important; font-family: "inconsolata", monospace; -webkit-columns: 1; -moz-columns: 1; columns: 1; } @media only screen and (max-width: 768px){ #sidebar{ width: 100%; top:40px; overflow: auto; height: auto; background-color: white; z-index: 9999999; } .sidebarBorderLeft{ border-left: 0px solid black; } #sidebar{ overflow-y: auto; overflow-x:hidden; max-height: calc(100vh - 40px); } #logoWhite { padding-left:15px; padding-top:15px; display:block; } .closeSidebar { float: right; cursor: pointer; } .zwartAreaFull { bottom: initial; } .zwartAreaMobile { display: none; } #section02, .zwartArea { width: 100%; } .sidebarBorder { border-right: 0; } .zwartAreaFull h1 { text-indent: 0 !Important; } .zwartAreaFull { width: 90%; margin: 5%; } .zwartArea { min-height : initial; } #filter { width: 100%; height: 40px; } #logoWrap { display: none; } #sideBarDescInfo p{ font-size: 20px; } #sideBarDescInfo { display: none; } #sortArea { height: 40px; } #sideBarDescInner { border-bottom: 3px solid black; } #sideBarDescInnerToggle{ display: block; } #sideBarDescInner p { border:0; padding-bottom: 10x; } br { display: none; } .colophon, .highlight{ color: white; padding-top: 40px; font-size: 15px !important; font-family: "inconsolata", monospace; -webkit-columns: 1; -moz-columns: 1; columns: 1; -webkit-column-gap: 75px; -moz-column-gap: 75px; column-gap: 75px; } } @media only screen and (min-width:460px) and (max-width:767px){ h1{ font-size: 20px; } body { font-size: 12px; line-height: 12px; } .zwartAreaFull p{ font-size: 20px; } .zwartAreaFull h1{ font-size: 20px; text-indent: 12px; } #filter{ font-size: 20px; } } @media only screen and (min-width:0px) and (max-width:459px){ h1{ font-size: 16px; } body { font-size: 8px; line-height: 8px; } .zwartAreaFull p{ font-size: 16px; } .zwartAreaFull h1{ font-size: 16px; text-indent: 8px; } #filter{ font-size: 16px; } #sideBarDescInfo p { font-size: 16px; } }