/* stylepimopheij_spek&boontje POP 2020 */

@font-face {
  font-family: pimopheij_spekenboontje;
  src: url(../font/calibril.ttf);
}

/* Content */
.content{
  display: block;
  position: relative;
  height: auto;
  padding-top: 70px;
}

.category{
  position: relative;
  height: 100%;
  padding: 30px; 
}

@media screen and (max-width: 466px){
.category{
  position: relative;
  height: 100%;
  padding-left: 30px; 
  padding-top: 100px;
}
}

.recepten{
  display: grid;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
  padding: 10px;
  width: 98%;
}

@media screen and (max-width: 420px){
.recepten{
  display: grid;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
  padding: 10px;
  width: 98%;
}
}

.recept{
  position: relative;
}

.img{
  width: 100%;
}

.link_img{
  display: block;
}

.receptname{
  font-family: pimopheij_spekenboontje;
  color: rgb(255,255,255);
  font-weight: bold;
  font-size: 25px;
  position: absolute;
  margin-left: 8px;
  margin-right: 10px;
  margin-top: 8px;
  z-index: 99;
  text-decoration: none; 
  background-color: rgba(109,110,106,0.2);
}

.receptname2{
  font-family: pimopheij_spekenboontje;
  color: rgb(255,255,255);
  font-weight: bold;
  font-size: 25px;
  position: absolute;
  display: inline-block;
  margin-left: 8px;
  margin-right: 30px;
  margin-top: 40px;
  z-index: 99;
  text-decoration: none; 
  background-color: rgba(109,110,106,0.2);
}

.categorytitel{
  font-family: pimopheij_spekenboontje;
  color: rgb(0,0,0);
  font-size: 24px;
  font-weight: bold;
  float: left;
  line-height: 40px;
  padding:0px 15px;
  text-decoration: none;
}
/* End content */

/* Homepage */
.homecontainer{
  display: block;
  position: relative;
  width: 100%;
  top: 0px;
  bottom: 30px;
}

.homefood{
  display: block; 
  position: relative;
  float: left;
  height: 140px; 
}

@media screen and (max-width: 537px){
.homefood{
  height: 90px; 
}
}

@media screen and (max-height: 420px){
.homefood{ 
  height: 90px; 
}
} 

.homecontainer1{
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 140px;
  justify-items: center;
  position: relative;
  padding-top: 300px;
  left: 20%;
  width: 60%;
}

@media screen and (max-width: 537px){
.homecontainer1{
  grid-template-rows: 90px;
}
}

@media screen and (max-width: 800px){
.homecontainer1{
  left: 5%;
  width: 90%;
}
}

@media screen and (max-height: 420px){
.homecontainer1{
  padding-top: 100px;
  grid-template-rows: 90px;
}
}


.homecontainer11{
  display: block; 
  position: relative;
  width: 140px;
}

@media screen and (max-width: 537px){
.homecontainer11{
  width: 90px;
}
}

@media screen and (max-height: 420px){
.homecontainer11{
  width: 90px;
}
}

.homecontainer2{
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 140px;
  justify-items: center;
  position: relative;
  padding-top: 50px;
  padding-bottom: 50px; 
  width: 40%;
  left: 30%;
}

@media screen and (max-width: 537px){
.homecontainer2{
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 90px;
  justify-items: center;
  position: relative;
  padding-top: 50px;
  padding-bottom: 50px; 
  width: 40%;
  left: 30%;
}
}

@media screen and (max-width: 800px){
.homecontainer2{
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 140px;
  justify-items: center;
  position: relative;
  padding-top: 50px;
  padding-bottom: 50px; 
  width: 60%;
  left: 20%;
}
}

@media screen and (max-height: 420px){
.homecontainer2{
  padding-top: 100px;
  grid-template-rows: 90px;
  padding-top: 20px;
}
}
/* End Homepage */

/* Over Marije */
.overcontainer{
  font-family: pimopheij_spekenboontje;
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 100px;
  padding-bottom: 30px;
}

@media screen and (max-width: 537px){
.overcontainer{
  font-family: pimopheij_spekenboontje;
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 150px;
  padding-bottom: 30px;
}
}

.overcontainer1{
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: 40px auto;
  position: relative;
  left: 10%;
  width: 80%;
}

@media screen and (max-width: 537px){
.overcontainer1{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 40px auto;
  position: relative;
  left: 5%;
  width: 90%;
}
}

.overtitel{
  display: block;
  position: relative;
  grid-column: 1;
  font-size: 40px;
  font-weight: bold;
}

.overtext{
  display: block;
  position: relative;
  grid-column: 1;
  padding-top: 10px;
}

.overtext p{
  font-size: 17px;
  padding-top: 10px;
}

.overfoto{
  display: block;
  position: relative;
  grid-column: 2;
  grid-row: 1/3;
  width: 80%;
  padding-top: 15px;
  margin-left: auto;
  margin-right: auto;
  justify-self: center;
}

@media screen and (max-width: 537px){
.overfoto{
  display: block;
  position: relative;
  grid-column: 1;
  grid-row: 3/4;
  width: 80%;
  padding-top: 15px;
  margin-left: auto;
  margin-right: auto;
  justify-self: center;
}
}
/* End Over Marije */

/* slidshowpimopheij POP 2020*/
.slideshow,
.slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}

.slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
  -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 60s linear infinite 0s;
    -moz-animation: imageAnimation 60s linear infinite 0s;
    -o-animation: imageAnimation 60s linear infinite 0s;
    -ms-animation: imageAnimation 60s linear infinite 0s;
    animation: imageAnimation 60s linear infinite 0s; 
}

.slideshow li:nth-child(1) span { 
    background-image: url(../content_home/1.jpg) 
}

.slideshow li:nth-child(2) span { 
    background-image: url(../content_home/2.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}

.slideshow li:nth-child(3) span { 
    background-image: url(../content_home/3.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}

.slideshow li:nth-child(4) span { 
    background-image: url(../content_home/4.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}

.slideshow li:nth-child(5) span { 
    background-image: url(../content_home/5.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}

.slideshow li:nth-child(6) span { 
    background-image: url(../content_home/6.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}

.slideshow li:nth-child(7) span { 
    background-image: url(../content_home/7.jpg);
    -webkit-animation-delay: 36s;
    -moz-animation-delay: 36s;
    -o-animation-delay: 36s;
    -ms-animation-delay: 36s;
    animation-delay: 36s; 
}

.slideshow li:nth-child(8) span { 
    background-image: url(../content_home/8.jpg);
    -webkit-animation-delay: 42s;
    -moz-animation-delay: 42s;
    -o-animation-delay: 42s;
    -ms-animation-delay: 42s;
    animation-delay: 42s; 
}

.slideshow li:nth-child(9) span { 
    background-image: url(../content_home/9.jpg);
    -webkit-animation-delay: 48s;
    -moz-animation-delay: 48s;
    -o-animation-delay: 48s;
    -ms-animation-delay: 48s;
    animation-delay: 48s; 
}

.slideshow li:nth-child(10) span { 
    background-image: url(../content_home/10.jpg);
    -webkit-animation-delay: 54s;
    -moz-animation-delay: 54s;
    -o-animation-delay: 54s;
    -ms-animation-delay: 54s;
    animation-delay: 54s; 
}

@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* End slidshowpimopheij POP 2020*/

/* stylepimopheij_spek&boontje POP 2020*/