/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: local('Montserrat Light'), local('Montserrat-Light'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_cJD3gfD_vx3rCubqg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: local('Montserrat Light'), local('Montserrat-Light'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_cJD3gnD_vx3rCs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_ZpC3gfD_vx3rCubqg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_ZpC3gnD_vx3rCs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_bZF3gfD_vx3rCubqg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_bZF3gnD_vx3rCs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_dJE3gfD_vx3rCubqg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_dJE3gnD_vx3rCs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_c5H3gfD_vx3rCubqg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_c5H3gnD_vx3rCs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* .container {
  width:100%;
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto; } */

.col-xs-1, .col-sm-1, .col-md-1, .col-sm-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-sm-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-sm-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-sm-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-sm-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-sm-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-sm-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-sm-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-sm-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-sm-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-sm-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-sm-12 {
  position: relative;
  height:100%;
  min-height: 1px;
  padding-right: 1px;
  padding-left: 1px; }

.row {
  margin-right: 0;
  margin-left: 0; }

strong {
  font-weight: 600;
}

html {
  width: 100%;
	height: 100%;
  margin:0px;
  padding: 0px;
}

body {
  color:hsl(0, 0%, 30%);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 13px;
  margin: 0px;
  line-height: 1.65em;
}

h1 {
    font-weight: 500;
    font-size: 1.15em;
  }

span {
    font-size: 10px;
    margin-bottom: 1em;
  }

.logo {
  width: 6em;
  display: flex;
  display: block;
  margin-top: 2em;
  margin-left: 2em;
  position: fixed;
  bottom: 38px;
}

 /* .payoff {
  background-color: hsl(336, 100%, 45%);
  color: white;
  margin-top: 1em;
  padding: 0.25em 1em;
  display: flex;
  display: block;
  max-width: 15em;
  height: auto;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 14px;
  border: black 5px solid;
} */

.column-dubbel {
  display: flex;
  max-width: 960px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  width: 100%;
  /* border-bottom: solid 1px black; */
}


.column {
  display: flex;
  flex-direction: column;
  padding: 3em;
  background-color:#fff7f8;
  line-height: 1.7em;
  width: 100%;
	max-width: 500px;
}

.column2 {
  display: flex;
  background-color: #fff0f2;
  flex-direction: column;
  line-height: 1.5em;
  width: 100%;
	max-width: 500px;
  height: auto;
}

.column2 img
{
  width: 100%;
  height: auto;
}


.titel {
  display: flex;
  justify-content: center;
  padding: 3em;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
}

.afstand {
height: 8em;
background: white;
}

.tekstblok-intro {
  max-width: 450px;
  height: 100%;
  /* width: 100%; */
  margin-left: auto;
  margin-right: auto;
  padding: 4em;
  display: flex;
  flex-direction: column;
  /* border: black solid 1px; */
  background-color: white;
}

.kleurblok{
  background-color: #62807C;
  max-width: 960px;
  padding:10em 10em 10em 10em;
  margin-top: 4em;
  margin-bottom: 4em;
  display: flex;
  margin-right: auto;
  margin-left: auto;
  }

  .kleurblok1{
    background-color: #3C8078;
    width: 100%;
    height: 50px;
    margin-bottom: 100px;
    }


/* HEADER SCREEN EN MOBILE___________________________________________________ */
.container-nav {
  display: flex;
  justify-content: center;
  margin-top: 0px;
}

header {
  position: fixed;
  margin-top: 0px;
  height: 0px;
  width: 100%;
  top: 0px;
  background-color: black;
  z-index: 1;
}

header ul li {
  background-color: black;
  color: hsl(360, 100%, 100%);
  margin: 2em 1em;
  padding: 0.35em;
  width: 9em;
  text-align: center;
}

ul a {
  text-decoration: none;
}

.topnav .icon {
  display: none;
}

.topnav a  {
  display: none;
}

@media screen and (max-width: 820px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }

  header {
    display: none;
  }

.topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }

.topnav i {
  color: black;
  padding: .33em .4em;
  border-radius:1em;
}

.topnav i:hover {
  color: black;
  background-color: hsl(336, 100%, 95%);
}

.topnav img {
  max-width: 2.5em;
}

  .topnav a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 7px 7px;
    text-decoration: none;
    font-size: 14px;
    font-family: arial;
  }
  .topnav {
    color:white;
    overflow: hidden;
    margin-right: auto;
    margin-left: auto;
    max-width: 100%;
  }
}

/* EINDE HEADER SCREEN EN MOBILE______________________________________________*/

/* PAGINA CONTACT____________________________________________________________*/

.contact-container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 6em;
position: relative;
transform: rotate(2deg);
}

.contact-container ul {
  padding: 1em;
  background-color: white;
  line-height: 2em;
  border: black 10px solid;
}

.contact-container-mobile {
  display: none;
}

.achtergrond-pink1 {
background: papayawhip;
position: absolute;
width:100%;
height: auto;
top:0px;
}

.achtergrond-pink2 {
background: linear-gradient(110deg, hsl(336, 100%, 45%) 40%, #FFF 20%);
position: absolute;
width:100%;
height: 200%;
top:0px;
}

.quote {
  width: 6em;
  display: flex;
  display: block;
  margin-right: 2em;
  margin-left: auto;
  margin-top: 5em;
  margin-bottom: 5em;
  background-color: white;
  padding: 1em;
}

@media only screen and (max-width:460px){

  .contact-container {
    display: none;
  }

  .contact-container-mobile{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4em;
  position: relative;
  transform: rotate(1deg);
  max-width: 280px;
}

  .contact-container-mobile a{
    color:blue;
  }

.contact-container-mobile ul {
  background-color: white;
  padding: 0.5em;
}
}
/* EINDE PAGINA CONTACT________________________________________________________*/


/* BUTTONS___________________________________________________________________ */

a:link {
  text-decoration: none;
}

.lijn {
  border-bottom: 1.5px hsl(336, 100%, 80%) solid;
}

.zwart {
  background-color: black;
}

#black {
  background-color: black;
}



.color-1:hover {
  background-color: hsl(336, 100%, 45%);
  color: hsl(360, 100%, 100%);
}

.color-2:hover {
  background-color:	hsl(336, 100%, 50%);
  color: hsl(360, 100%, 100%);
}

.color-3:hover {
  background-color:	hsl(336, 100%, 60%);
  color: hsl(360, 100%, 100%);
}

.color-33 {
  background-color:	hsl(336, 100%, 60%);
  color: hsl(360, 100%, 100%);
}

.color-4:hover {
  background-color:	hsl(336, 100%, 77%);
  color: hsl(360, 100%, 100%);
}

.color-5:hover {
  background-color:	hsl(336, 100%, 80%);
  color: hsl(360, 100%, 100%);
}

.color-6:hover {
  background-color:	hsl(336, 100%, 90%);
  color: hsl(360, 100%, 100%);
}

.color-7:hover {
  color:hsl(336, 100%, 45%);
}

.color-8:hover {
  background-color: black;
}

.btn-pijl {
color: black;
padding: .25em;
/* margin-top: 1em;
margin-bottom: 1em; */
background-color:	hsl(336, 100%, 90%);
}

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

.btn-pijl1 {
color: black;
padding: .25em;
margin-top: 1em;
margin-bottom: 1em;
}

.no-padding {
  padding: 0.5em;
  line-height: 0.5em;
  /* margin-top: 3em; */
  margin-left: 2em;
  position: fixed;
}

.anchor{
  display: block;
  height: 50px;
  margin-top: -50px;
  visibility: hidden;
}

/* EINDE BUTTONS_____________________________________________________________ */


/* BOOTSTRAP_________________________________________________________________ */
.container-fluid{
  padding: 0px;
  margin-top: 2em;
}

.extra-marge {
  margin-top: 4em;
}

.row img {
  width:100%;
  height: auto;
}

@media screen and (max-width: 820px) {

  .extra-marge {
    margin-top: 0em;
  }

.container-fluid{
    padding: 0px;
    margin-top: 0em;
  }

  /* .btn-pijl{
    display:none;
  } */

.afstand {
  height: 4em;
}


}

/* EINDE BOOTSTRAP__________________________________________________________ */

/* ANIMATIE PAGINA----------------------------------------------------------- */

.background-color {
    color:hsl(0, 0%, 41%);
    padding-bottom:0.5em;
    padding-left: 0.5em;
    }

.animation-box {
  margin-top: 5em;
  max-width: 960px;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  z-index: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.titel-animatie {
  display: flex;
  justify-content: center;
  padding-bottom: 0.5em;
  padding-top: 0.5em;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
  background-color: #fff0f2;
  width: 100%;
}


/* .animation-box2 {
  margin-top: 1em;
  max-width: 1080px;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  z-index: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
} */


.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}
.iframe-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* .animation p {
  text-align: left;
} */

.tekstblok {
  background-color: white;
  max-width: 1080px;
  /* border-right: 470px solid #62807C;
  border-left: 10px solid hsl(336, 100%, 90%); */
  width: 100%;
  padding: 1em;
  margin-top: 2em;
}

/* .tekstblok1 {
  background-color: white;
  max-width: 1080px;
  border-right: 470px solid white;
  border-left: 10px solid #62807C;
  width: 100%;
  padding: 1em;
  margin-top: 2em;
} */

@media screen and (max-width: 820px) {

  .tekstblok-intro {
    margin-top: 1em;
    margin-bottom: 2em;
    margin-left: auto;
    margin-right: auto;
    padding: 2em;
    max-width: 100%;
    background-color: white;

}

.tekstblok {
  background-color: white;
  max-width: 1080px;
  width: 100%;
  padding: 3em;
  margin-top: 2em;
  border-right: 0px ;
  border-left: 0px ;
}

.tekstblok1 {
  background-color: white;
  max-width: 1080px;
  width: 100%;
  padding: 3em;
  margin-top: 2em;
  border-right: 0px ;
  border-left: 0px ;
}

.kleurblok {
  margin-top: 0px;
  padding: 2em;
}

  .payoff {
    margin-top: 1em;
  }

  .animation-box {
    margin-top: 0em;
  }
}

@media only screen and (max-width: 960px) {
.column-dubbel {
    flex-direction: column;
    font-size: 14px;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}
}


/* EINDE ANIMATIE PAGINA------------------------------------------------------*/

/* PAGINA DIGITAL -------------------------------------------------------------*/
.digital {
  max-width: 960px;
  display: flex;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}


.titel-digital {
  display: flex;
  justify-content: center;
  padding-bottom: 0.5em;
  padding-top: 0.5em;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
  background-color: #255959;
  color: white;
  max-width: 960px;
  margin-top: 4em;
}


/* .tekstblok-digital {
  background-color:white;
  max-width: 960px;
  width: 100%;
  padding: 1em;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4em;
} */

@media screen and (max-width: 820px) {

  .digital {
    margin-top: 0em;
  }
}

/* EINDE PAGINA DIGITAL------------------------------------------------------- */


/* PROJECTPAGINA= project per pagina uitgelicht */
.project-pagina {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6em;
  margin-bottom: 8em;
  max-width: 960px;
  /* height: auto; */
  width: 100%;
  justify-content: center;
  align-items: center;
}

 .project-pagina img {
  max-width: 960px;
  width: 100%;
  margin-top: 2em;
  margin-bottom:2em;
}

#zonder-marge {
margin-bottom: 0px;
}

@media screen and (max-width: 820px) {
  .project-pagina {
    margin-top: 0em;
  }
  .project-pagina img {
    margin-top: 0em;
  }
}
/* EINDE PROJECTPAGINA= project per pagina uitgelicht */


.tekstblok-about {
  max-width: 800px;
  margin-top: 4em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4em;
  padding: 8em;
  text-align: left;
  background-color: white;
  border: solid 3px black;
  display:flex;
  flex-direction: column;
}

@media screen and (max-width: 820px) {
  .tekstblok-about {
    padding: 2.5em;
  }
}

.nelly {
  height: auto;
  max-width: 100%;
  align-items: center;
  justify-content: center;
}

footer {
       position: fixed;
       left:0px;
       bottom: 0px;
       width: 100%;
       height: 39px;
       background-color:black;
       display: flex;
       justify-content: center;
       align-items: center;
       color: dimgrey;
       font-weight: 500;
}


footer p {
  color:hsl(210, 13%, 35%);
}

footer i {
  margin-left: 0.125em;
  color:hsl(210, 13%, 35%);
}