/* Vanaf hier: MENU css */

.menuset {
  width: 100%;
  overflow: hidden; /* Clearfix alternative */
  background-color: black;
  color: white;
}

.menublok {
      float: left;
      width: 33.33%;
      color: white;
      box-sizing: border-box;
}

#breedmenu {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
  z-index: 7;
display: block;
}

#smalmenu {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
  z-index: 7;
display: none;
}


/* Vanaf hier: PAGINA css */

* {
  box-sizing: border-box;
}

/*
.flex-container { border: 1px solid blue;}
.flex-item3 { border: 1px solid red;}
.flex-item2 { border: 1px solid red;}
.item3 { border: 1px solid red;}
.fixeditem3 { border: 1px solid red;}
.sector {border: 2px solid green;}
.6size {border: 2px solid black;}
.circle{ border:1px solid #ccc;}
*/

.flex-container { border: 0px solid blue;}
.flex-item3 { border: 0px solid red;}
.flex-item2 { border: 0px solid red;}
.item3 { border: 0px solid red;}
.fixeditem3 { border: 0px solid red;}
.sector {border: 0px solid green;}
.6size {border: 0px solid black;}
.circle{ border:0px solid #ccc;}

@font-face {
    font-family: 'Urbanist';
    src: url('./xxfonts/Urbanist Light.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('./fonts/Urbanist-Light.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}  

body {
  font:inherit;
  font-family: Urbanist;
  margin: 0px;
  z-index: 1;
  font-size: 18px;
  font-style: normal;
  background-color: #feeada;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  font-size: 17px;
  text-align: left;
}

.flex-item3 {
  background-color: #feeada;
  padding: 10px;
  flex: 31%;
 line-height: 1.6;
}

.flex-item2 {
  background-color: #feeada;
  padding: 10px;
  flex: 49%;
 line-height: 1.6;
}

.item3 {
  background-color: #feeada;
  padding: 10px;
  flex: 33%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fixeditem3 {
  background-color: #feeada;
  padding: 10px;
  flex: 33%;
  display: flex;
  justify-content: center;
}

h1 {font-size: 50px;}

h3 {font-size: 30px;}

.blue {color: darkblue;}

.sector {
  display: flex;
  justify-content: center;
  align-items: center;
}

.schrijfruimte {
  width: 80%;
  justify-content: center;
  align-items: center;
}

.groot {
  height: 220px;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  text-align: left;
  padding-left: -300px;
  font-size: 200px;
}

.img1 {
  width: 90%;
  border-radius: 20px;
}

.img2 {
  width: 350px;
  border-radius: 20px;
}


.img3 {
  max-width: 45%;
  height: 200px;
  border-radius: 20px;
}


.img3:hover {
  transform: scale(1.03);
}

.img4 {
  width: 50%;
  border-radius: 20px;
}

.img4:hover {
  transform: scale(1.03);
}

.boxje {
background-color: #feeada !important;
}

#accordion {
  color: black;
  cursor: pointer;
  background-color: #feeada !important;
  padding: 5px 20px 10px 20px;
  width: 300px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  border-radius: 10px;
}

.accordion-header {
  text-decoration: underline;
  border: 0px solid black !important;
color: black;
}

.accordion > h3 {
  margin-top: 10px;
  border: 0px solid black !important;
  background-color: white !important;
}


/* 
padding: 25px 50px 75px 100px;
    top padding is 25px
    right padding is 50px
    bottom padding is 75px
    left padding is 100px
*/


.ui-accordion-content-active {
  padding: 0 !important;
  border-style: none;
  background-color: transparent;
  background-image: none;
  border: 0px solid black !important;
}

.rond1 {
  border-radius: 50%;
  width: 222px;
}

.rond1:hover {
  transform: scale(1.03);
}

.links {
  width: 250px;
  text-align: left !important;
}

.centreer {
  display: block;
  margin: auto;
  width: 50%;
}


#concept {
  height: 65px;
  width: 320px;
  line-height: 60px;
  text-align: center;
  background-color: #7573bb;
  font-size: 24px;
  color: white;
  border-radius: 10px;
}

.6size {
  width: 300px;
  display: block;
}

.naarbeneden {
  width: 300px;
  display: block;
}

.contain {
  display: block;
  height: 250px;
  width: 100%;
  border: 0px solid blue;
  padding: 0px;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}

.groot2 {
  font-size: 8vw;
  width: 110%;
  padding: 0px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  left: -45px;
  line-height: 250px; 
}

.donker {
  background-color: black;
  color: white;
  padding-left: -200px;
}

.licht {
  color: darkblue;
  padding-left: -200px;
}

.circle{
 -webkit-border-radius:8px;
 -moz-border-radius:8px;
 border-radius:8px;
 width:8px;
 height:8px;
}

#myVideo {
  opacity: 0.3;
}

.filmtext {
  position: relative;

  color: darkblue;
  width: 80%;
margin-top: -600px;
padding: 10px;
}

#paulmenu {
position: fixed;
top: 40%;
left: 40%;
border: 3px solid red;
background-color: white;
padding: 5px;
display: none;
}

.uitlijnrechts {
text-align: right;
}


.filler {
height: 46px;
}


.smal {
border: 0px solid green;
}

.linkersmal {
width: 48%;
border: 0px solid red;
text-align: left;
float: left;
}

.rechtersmal {
width: 48%;
border: 0px solid red;
text-align: right;
float: left;
color: white;
}

#minimenu {
background-color: #feeada;
padding: 10px;
text-align: left;
color: black;
display: none;
}


#bandblok {
border: 0px solid black;
}

.bandoneon {
  border: 0px solid red;
}

#hoofdmenu {
display: block;
  z-index: 8;
}

.banditem {
border: 0px solid green;
font-weight: bold;
padding: 15px;
 line-height: 1.6;
}

.banddetail {
background-color: #feeada;;
display: none;
font-weight: normal;
padding: 10px;
}

.toonknop {
heigth: 20px;
padding: 20px;
  border-radius: 20px;

}

.toonknop:hover {
  background-color: #7573bb;
color: white !important;
}

#learn {
 display: flex;
padding: 10px 0px 10px 0px;
  justify-content: center;
  align-items: center;
width: 120px;
}

#learn:hover {
  background-color: #7573bb;
  border-radius: 4px;
}

#aboutme:hover {
  background-color: #7573bb;
  color: white !important;
  border-radius: 4px;
}

#locatie:hover {
  background-color: #7573bb;
color: white !important;
}

.menuhulp {
position: fixed;
top: 0px;
left: 0px;
border: 0px solid red;
  font-size: 32px;
width:100%;
height:35px;
  z-index: 2;
text-align: right;
  justify-content: right;
  align-items: right;
}

#hidemini {
position: fixed;
top: 0px;
right: 0px;
border: 0px solid red;
display: block;
}

#spank {
color:darkblue;
 font-size: 36px;
  margin: auto;
  width: 80%;
}

.item2text {
color:black; 
font-size: 24px;
width: 90%;
 line-height: 1.2;
}

#stoelblok {
width: 100%;
height: 1000px;
overflow: hidden;
  z-index: 1;
}



#lets {
position: sticky;
display: flex;
top: 200px;
left: 10%;
  z-index: 2;
  color: darkblue;
padding-left: 10vw;
border: 0px solid green;
}

#cont{
position: sticky;
display: flex;
top: 300px;
left: 100px;
  z-index: 2;
  color: darkblue;
padding-left: 40vw;
border: 0px solid green;
}

.parallelogram {
	width: 100px;
	height: 40px;
	transform: skew(-20deg);
	background: darkblue;
}

#knop2 {
height: 60px;
width: 300px;
  border-radius: 20px;
background-color: #7573bb;
color: white;
font-size: 16px;
}


#knop2:hover {
color: black !important;
border: 2px solid black;
}


#pijlblok {
float: left;
width: 98%;
}

.galinks {
float: left;
text-align: left;
border: 0px solid red;
width: 50%;
color: blue;
}

.garechts {
float: right;
text-align: right;
border: 0px solid red;
width: 50%;
color: blue;
}




/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-item3, .flex-item2 {
    flex: 100%;
  }
#smalmenu {display: block}
#breedmenu {display: none}
#hidemini {display: none}
#checkbreedte (width: 50px}
.filmtext (width: 100% !important}

}