/* 2 - 1 - 1 blokkenstructuur aka : DSSBLOKKEN*/

#dssblokken{
  /*display: none;*/
  font-size: 14px;
}
#dssblokken div div{
  display: block;
}
#dssblokken .text:nth-child(odd) .textImage{
  float: left;
}
#dssblokken .text:nth-child(odd) .textText{
  float: right;
}
#dssblokken .text:nth-child(even) .textImage{
  float: right;
}
#dssblokken .text:nth-child(even) .textText{
  float: left;
}
#dssblokken .text .textText .otherhalf{
  background-color: #004a99;
}
#dssblokken .text:nth-child(even) .textText .otherhalf{
  background-color: #0d0c0a;
}
#dssblokken .text{
  height: 500px;
  clear:both;
}
#dssblokken .text .button{
  margin-top: 25px;
  font-size: 1.5em;
}
.textImage{
  width: 50%;
  height: 500px;
  background-size: cover;
  background-position: center;
}

.textText{
  height: auto;
  width: 50%;
  
}
#dssblokken .half{
  width: 50%;
  height: 500px;
  float: right;
  padding: 25px;
  text-align: right;
}
#dssblokken .otherhalf{
  width: 50%;
  height: 500px;
  float: left;
  position: relative;
  text-align: center;

}
#dssblokken .otherhalf p{
  color: white;
  font-size: 2.5em;
  position: absolute;
  top: 15%;
  text-align: center;
  width: 100%;
  font-family: 'berthold', sans-serif;
  line-height: 1.15em;
  padding: 25px 45px;

}
#dssblokken .otherhalf p:nth-child(2) {
  top: 50%;
}

.textText .titel{
  font-size: 2em;
  line-height: 125%;
  font-weight: bold;
  text-transform: uppercase;
  overflow: hidden;
}
.line{
  margin:10px 0;
}
.textText .half .tekst{
  font-size: 1.5em;
}
.textText .tekst{
  font-size: 1.25em;
}


@media all and (max-width: 1400px){

  .textText .titel{
    font-size: 1.5em;
  }
  #dssblokken .textImage{
    width: 100%;
  }
  #dssblokken .textText{
    width: 100%;
    height: auto;

  }
  #dssblokken .textText .titel{
    font-size: 2em;
  }
  #dssblokken .textText .half .tekst{
    font-size: 1.5em;
  }
  .otherhalf p{
    font-size: 3em;
    top: 15%;
  }
  .otherhalf p:nth-child(2) {
    top: 60%;
    display: block;
  }
}



@media all and (max-width: 1200px){

  .textText .tekst{
    font-size: 1em;
  }
  .textText .half .tekst{
    font-size: 1.25em;
  }
  .textText .titel{
    font-size: 1.4em;
  }

  #dssblokken .text .button{
    font-size: 1.25em;
  }
  .sectiontextTitel{  
    font-size: 3.5em;
  }
  .sectiontextTekst{  
    font-size: 2em;
  }
  .sectiontext .button{
    font-size: 2em;
  }
  #dssblokken .otherhalf p:nth-child(2){
    top: 50%;
  }

}


@media all and (max-width: 900px){

  .sectiontextTitel{  
    font-size: 3em;
  }
  .sectiontextTekst{  
    font-size: 1.75em;
  }
  .sectiontext .button{
    font-size: 1.75em;
  }
  #dssblokken .text:nth-child(odd) .textImage{
    float: left;
  }
  #dssblokken .text:nth-child(odd) .textText{
    float: left;
  }
  #dssblokken .text:nth-child(even) .textImage{
    float: left;
  }
  #dssblokken .text:nth-child(even) .textText{
    float: left;
  }

}

@media all and (max-width: 750px){
  
  .sectiontextTitel{  
    font-size: 2em;
  }
  .sectiontextTekst{  
    font-size: 1.75em;
  }
  .sectiontext .button{
    font-size: 1.75em;
  }
  figure.effect-bubba{
    height: 33.33vh;
  }
  #dssblokken .otherhalf p{
    font-size: 2em;
  }
}


@media all and (max-width: 650px){

  .sectiontextTitel{
    font-size: 1.75em;
  }
  .sectiontextTekst{
    font-size: 1em;
  }

}
@media all and (max-width: 600px){

  #dssblokken .textText .titel{
    font-size: 1.65em;
  }
  #dssblokken .half{
    overflow: hidden;
  }
}
@media all and (max-width: 550px){

  .textImage{
    height: 350px;
  }
  .textImage img{
    height: 350px;
  }

}

@media all and (max-width: 500px){
  #dssblokken .half{
    padding: 10px;
    width: 100%;
    height: auto;
  }
  #dssblokken .otherhalf{
    display: none;
  }
  #dssblokken .text{
    height: auto;
  }
  #dssblokken .textText .titel{
    font-size: 2em;
  }
  #dssblokken .textText .half .tekst{
    font-size: 1.25em;
    font-weight: normal;
  }

}

@media all and (max-width: 450px){

  .sectiontextTekst{
    display: none;
  }
  .sectiontextTitel{
    display: none;
  }
  .link p{
    font-size: 1.5em;
  }
  .sectiontext{
    bottom: -50vh;
    width: 100%;
  }

}


@media all and (max-width: 1400px){
  #dssblokken .text .textText .half
  {
    height: auto;
  }
}


@media all and (max-width: 500px){
  #dssblokken .text .textText .half
  {
    padding: 50px;
  }

  #dssblokken .textText .titel
  {
    font-size: 1.4em;
  }
}