You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

639 lines
8.7 KiB
CSS

* {
-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';
}
hr {
border-top: 3px black double;
}
.logo {
max-width: 150px;
display: inline-block;
}
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;
}
h2.white{ color:white;
font-size: 20px;
font-weight: bold;
}
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;*/
font-size: 40px;
}
.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;
}
#sideBarDescInner li {
padding: 5px;
line-height: 1.4;
font-size: 15px;
font-family: "inconsolata", monospace;
}
#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:0px 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: 0px;
}
.colophon, .highlight {
color: white;
padding-top: 40px;
font-size: 15px !important;
font-family: "inconsolata", monospace;
-webkit-columns: 1;
-moz-columns: 1;
columns: 1;
}
.logo {
width: 100px;
display: inline;
}
@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;
}
}