@charset "UTF-8";

/* CSS rules go below */


@media screen and (min-width: 570px) and (max-width: 799px) { /* @media with min- and max-width */

    .container-achtergrond { /* image in box to be able to edit the properties at once */ 
  background-image: url("../../content/centered_circle_01.png");
    }
}

@media screen and (min-width: 800px) and (max-width: 1029px) {

    .container-achtergrond {
  background-image: url("../../content/centered_circle_02.png");
    }
}

@media screen and (min-width: 1030px) and (max-width: 1259px) {

    .container-achtergrond {
  background-image: url("../../content/centered_circle_03.png");
    }
}

@media screen and (min-width: 1260px) and (max-width: 1489px) {

    .container-achtergrond {
  background-image: url("../../content/centered_circle_04.png");
    }
}

@media screen and (min-width: 1490px) and (max-width: 1599px) {

    .container-achtergrond {
  background-image: url("../../content/centered_circle_05.png");
    }

}

@media screen and (min-width: 570px) and (max-width: 1720px) {

  .container-introduction { 
    background-image: url("../../content/introduction_01_01.png");
  }
}

@media screen and (max-width: 1029px) {
  .container-pijl { 
    display: none; 
  }
}

@media screen and (min-width: 1650px) {
  .container-pijl { 
    display: block; 
    background-image: url("../../content/pijl_01.png");
  }
}

@media screen and (max-width: 650px) {
  .container-pijl { 
    display: block; 
    background-image: url("../../content/pijl_02.png");
  }
}

.container-achtergrond { 
    background-position: center;
   z-index: 0;

   display: flex;
   justify-content: center; 
   align-items: center;

   min-height: 100vh;
   width: 100%;
   height: 100%;

   background-size: cover;
   background-repeat: no-repeat;
}


.container-pattern {
   position: fixed;
    z-index: 2;

    top:0;
    right:0;
    width: 1710px;
    height: 920px;

    background-size: cover;
    background-repeat: no-repeat;
  
    background-image: url("../../content/pattern.png");
}

.container-introduction {
    position: fixed;
    z-index: 3;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
    
}

.container-pijl {
    position: fixed;
    z-index: 500;

    bottom: 0;
    right: 0; 
    width: 3563px;
    height: 917px;

    background-position: right bottom;
    background-size: contain;
    background-repeat: no-repeat;

   
}