pzimediadesign/web/css/style.css

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

html body{
    padding: 0;
    margin: 0;
      
}

h1, p {
  padding: 0;
  margin: 0;
}

h1{
  font-size: 32px;
}

.hiddenOverflow{
  position: fixed; 
  overflow-y:scroll;
  width: 100%;
}


body {
  font-family: 'texgyreheroscnbold';
  font-size: 18px;
  line-height: 18px;
}

#zwartIntro{

    height: auto;
    overflow: hidden;

}


.zwartArea{
  min-height: 100vh;
  background-color: black;
  width: 70%;
  float: right;
      transition-delay: 0.2s !important;
    -webkit-transition: ease-out 1s;
    -moz-transition:  ease-out 1s;
    -o-transition: ease-out 1s;
    transition: ease-out 1s;
}

.zwartArea p, h1{
  
  /*font-size: 26px;*/
  padding: 10px;

  font-weight: normal;
  line-height: 1.1;
  /*font-family: 'texgyreheroscnbold';*/
}

.zwartAreaText{
  color: white;
  padding-top: 10px;
}

.zwartAreaWhite{
  background-color: white;
}

.zwartAreaFull{
  width: 80%;
  float: left;
  
  margin-left: 10%;
  padding-top: 40px;
  padding-bottom: 60px;
}

.zwartAreaFull p{
  font-size: 32px;
  line-height: 1.3;
}
.zwartAreaFull h1{
  font-size: 32px;
  text-indent: 20px;
}



.zwartAreaColLeft{
  width: 80%;
  float: left;
  
  margin-left: 10%;
  padding-top: 40px;
  padding-bottom: 60px;
}

.zwartAreaColLeft p{
  font-size: 32px;
  line-height: 1.3;
}
.zwartAreaColLeft h1{
  font-size: 32px;
  text-indent: 20px;
}



.zwartAreaColRight{
  width: 50%;
  float: right;
  padding-left: 20px;
}

.highlight{
  color: white;
  font-family: Vollkorn !important;
  padding-top: 40px;
}

.colophon{
  color: white;
  font-family: arial !important;
  padding-top: 40px;
  font-size: 22px !important;
    -webkit-columns: 100px 2; /* Chrome, Safari, Opera */
    -moz-columns: 100px 2; /* Firefox */
    columns: 100px 2;
}



#logo{
  width: 25%;
  position: fixed;
  bottom: 10px;
  left: 10px;
}

.underlineFilter{ 
  transform: scaleX(2) translateX(25%);
  -webkit-transform: scaleX(2) translateX(25%);
  -moz-transform: scaleX(2) translateX(25%);
  -o-transform: scaleX(2) translateX(25%);
  

}

#sortArea{
  line-height: 56px;
}

#sortArea label{
  margin-right: 6px; 
}

#sortArea input{
  display: none;
}
#sidebar{
  width: 25%;
  /*position: absolute;*/
  position: fixed;
  top: 0px;
  padding-left: 10px;
  /*border-bottom: 1px solid black;*/

}

#sideBarDesc{
  display: none
}

#sideBarDesc .filterDesc{
  display: none;
  margin-top: 6px;
  margin-bottom: 20px;
}

#sideBarDescInfo{
  width:100%;
  height: 60px;
  line-height: 30px;
  background-color: white;
  color: black;
  z-index: 9999999;
  border-bottom: 4px solid black;
  font-size: 26px;

}

#sideBarDescInfo p{
  height: 56px;
  line-height: 56px;
}


.filterDesc u{
  text-decoration: none;
  text-transform: capitalize;
  margin-right: 20px;
  margin-left: 20px;
}



#filter{
  width:70%;
  float: right;
  /*left: 250px;*/
  padding-left: 10px;
  height: 60px;
  line-height: 30px;
  /*top: 0px;*/
  /*position: fixed;*/
  background-color: white;
  color: black;
  z-index: 9999999;
  /*padding: 10px;*/
  border-bottom: 4px solid black;
  /*border-top: 4px solid black;*/

  font-size: 26px;
  font-family: 'texgyreheroscnbold';

}


label{
  float: left;
}

.fixedBar{
  position: fixed;
  right: 0;
  top: 0;
}



/* ---- isotope ---- */

.isotope {
  margin-top: 50px;
  /*background: #ddd;*/
  z-index: 1;
  width: 100%;
  overflow: hidden;
  color: black;
  /*min-height: 100vh;*/
    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>div{
  width: 33.333%;
}*/

/* ---- isotope items ---- */



.item,
.grid-sizer {
  width: 33.333%;
}

.item {
  float: left;
  height: 500px;
  margin: 0 auto;
  text-align: center;
  padding: 30px;
  
  /*border: 2px solid black;*/
  /*border-color: hsla(0, 0%, 0%, 0.7);*/
  /*display: table; */

}


.item>*{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}



.item.widthA { width: 66.666%; }
/*.item.height2 { height: 200px; }*/


/* clear fix */
.isotope:after {
  content: '';
  display: block;
  clear: both;
}

img {
  max-width: 100%;
  max-height: 100%;

  -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 (max-width: 768px) {
  .item {
    width: 100%;
  }
  .item.widthA { width: 100%; }
  .grid-sizer {
    width: 100%;
  }
  .zwartAreaText{
    padding-left: 10px;
    padding-right: 10px;
    color: white;
  }

}

@media (max-width: 500px) {

}