@charset "utf-8";
/* CSS Document */

/*reset*/
*{margin:0; padding:0; outline:none; box-sizing:border-box;}
img,fieldset{border:0px; display:block;}
br.clear, div.clear{clear:both; font-size:0px;}
ul, ol{list-style:none;}
textarea, input.text, input[type="text"], input[type="button"], input[type="submit"], .input-checkbox, button{-webkit-appearance:none; border-radius:0;}

header, nav, article, aside, section, footer{display:block; overflow:hidden;}
header, section, footer{width:100%; height:auto; position:relative;}

/*template*/
html{width:100%; height:100%; font-size:62.5%;}
body{width:100%; height:100%; font-family:'Source Sans Pro', sans-serif; font-size:1.8rem; line-height:1.628571; color:#2D2E83; overflow-x:hidden; overflow-y:scroll; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}


/*text*/
h1, h2, h3, h4, h5, h6{width:100%; height:auto; line-height:1.2; font-weight:bold; font-family:'Chelsea Market', cursive; color:#2D2E83; text-transform:uppercase;}
h1{font-size:4.0rem; margin-bottom:32px;}
h2{font-size:3.0rem; margin-bottom:32px;}
h3{font-size:2.0rem; margin-bottom:16px;}
h4{font-size:1.6rem; font-family:'Source Sans Pro', sans-serif; font-weight:normal; text-transform:unset;}
h1.dotted,h2.dotted,h3.dotted,h4.dotted{border-bottom:4px dotted #2D2E85; padding-bottom:8px;}
h1.dotted-top,h2.dotted-top,h3.dotted-top,h4.dotted-top{border-top:4px dotted #2D2E85; padding-top:8px;}
h1.center,h2.center,h3.center,h4.center{text-align:center;}
a, a *{color:#03B6E1; text-decoration:none;}
small{font-size:1.4rem;}
article ul,
article ol{list-style:disc outside; margin:0px 0px 30px 20px;}

/*floats*/
.left{float:left;}
.right{float:right;}
.center{text-align:center;}
/*video*/
.video-container{position:relative; padding-bottom:56.25%; height:0; overflow:hidden;}
.video-container iframe, .video-container object, .video-container embed{position:absolute; top:0; left:0; width:100%; height:100%;}

/*main-container*/
main{width:100%; max-width:1920px; min-height:100vh; margin:0px auto;} 
.container{max-width:1260px; margin:0px auto; padding: 0 24px; position:relative;}

/*header*/
header{width:100%; max-width:1920px; height:auto; aspect-ratio:1920 / 441; overflow:visible; background:url('../images/header-theater-lapstok.svg') no-repeat center / cover;}
header.songs{ background:url('../images/header-theater-lapstok-liedjes.webp') no-repeat center / cover;}
header .grid{display:grid; grid-template-columns:1fr 507px 1fr; column-gap:32px; padding:32px 24px; width:100%; height:100%;}
header .grid .logo{grid-area:1/2/1/3;}
header.songs .grid .logo img{display:none;}
header .grid .logo img{width:100%; object-fit:contain; object-position:top;}
header .grid .icons{grid-area:1/3/1/4; display:flex; flex-direction:column; justify-content: flex-end;}
header .grid .icons .wrapper .newsletter{height:64px; width:64px; display:block; float:right; background: url("../images/ico-nieuwsbrief-01.svg") no-repeat 0 0;}
header .grid .icons .wrapper .newsletter:hover{background: url("../images/ico-nieuwsbrief-02.svg") no-repeat 0 0;}
header .grid .icons .wrapper .newsletter img{height:100%; width:100%; object-fit:cover;}
header .grid .icons .wrapper .contact{height:64px; width:64px; display:block; float:right; margin-left:12px; background: url("../images/ico-contact-02.svg") no-repeat; background-size:cover;}
header .grid .icons .wrapper .contact:hover{background: url("../images/ico-contact-01.svg") no-repeat; background-size:cover;}
header .grid .icons .wrapper .contact img{height:100%; width:100%; object-fit:cover;}
header .grid .icons .wrapper .news{height:64px; width:64px; display:block; float:right; margin-right:12px; background: url("../images/ico-nieuws-02.svg") no-repeat;}
header .grid .icons .wrapper .news:hover{background: url("../images/ico-nieuws-01.svg") no-repeat 0 0;}
header .grid .icons .wrapper .news img{height:100%; width:100%; object-fit:cover;}

nav ul{display:flex; justify-content:center;}
nav ul li a{height:60px; display:block;}
nav ul li a.voorstellingen{width:248px; background:url('../images/nav-voorstellingen.svg') no-repeat center;}
nav ul li a.voorstellingen:hover{background:url('../images/nav-voorstellingen-hover.svg') no-repeat center;}
nav ul li a.voorstellingen.on{background:url('../images/nav-voorstellingen-on.svg') no-repeat center;}
nav ul li a.straattheater{width:207px; background:url('../images/nav-straattheater.svg') no-repeat center;}
nav ul li a.straattheater:hover{background:url('../images/nav-straattheater-hover.svg') no-repeat center;}
nav ul li a.straattheater.on{background:url('../images/nav-straattheater-on.svg') no-repeat center;}
nav ul li a.speelnest{width:148px; background:url('../images/nav-speelnest.svg') no-repeat center;}
nav ul li a.speelnest:hover{background:url('../images/nav-speelnest-hover.svg') no-repeat center;}
nav ul li a.speelnest.on{background:url('../images/nav-speelnest-on.svg') no-repeat center;}
nav ul li a.team{width:92px; background:url('../images/nav-team.svg') no-repeat center;}
nav ul li a.team:hover{background:url('../images/nav-team-hover.svg') no-repeat center;}
nav ul li a.team.on{background:url('../images/nav-team-on.svg') no-repeat center;}
nav ul li a.wie-zijn-we{width:175px; background:url('../images/nav-wie-zijn-we.svg') no-repeat center;}
nav ul li a.wie-zijn-we:hover{background:url('../images/nav-wie-zijn-we-hover.svg') no-repeat center;}
nav ul li a.wie-zijn-we.on{background:url('../images/nav-wie-zijn-we-on.svg') no-repeat center;}
nav ul li a.kinderliedjes{width:198px; background:url('../images/nav-kinderliedjes.svg') no-repeat center;}
nav ul li a.kinderliedjes:hover{background:url('../images/nav-kinderliedjes-hover.svg') no-repeat center;}
nav ul li a.kinderliedjes.on{background:url('../images/nav-kinderliedjes-on.svg') no-repeat center;}

nav .mobicons{display:none;}
header .grid .menu{display:none;}

/*generals*/
.color-white{color:#ffffff;}
.color-blue{color:rgba(0,151,144,.4);}
.color-green{color:rgba(144,209,163,1);}
.color-yellow{color:rgba(255,227,0,.44);}
.color-red{color:rgba(223,78,27,.84);}
.color-purple{color:rgba(72,72,138,.48);}
.color-pink{color:rgba(223,78,27,.28)}
.bg-none{background: none !important;}
.bg-blue{background-color:rgba(0,151,144,.4);}
.bg-lightgreen{background-color:rgba(144,209,163,.38)}
.bg-lightpink{background-color:#f9dcd1}
.bg-green{background-color:rgba(144,209,163,1);}
.bg-yellow{background-color:rgba(255,227,0,.44)}
.bg-lightyellow{background-color:#fff49c}
.bg-purple{background-color:rgba(72,72,138,.48);}
.bg-lila{background-color:rgba(45,46,128,.20);}
.bg-red{background-color:rgba(223,78,27,.84);}
.bg-pink{background-color:rgba(223,78,27,.28);}
.marker{margin:0 -0.4em; padding:0.1em 0.4em; border-radius:0.8em 0.3em; background:transparent; background-image:linear-gradient(to right, rgba(255, 225, 0, 0.1), rgba(255, 225, 0, 0.7) 4%, rgba(255, 225, 0, 0.3)); -webkit-box-decoration-break:clone; box-decoration-break:clone;}
.marker.blue{background-image:linear-gradient(to right, rgba(0, 151, 144, 0.1), rgba(0, 151, 144, 0.7) 4%, rgba(0, 151, 144, 0.3));}
.marker.green{background-image:linear-gradient(to right, rgba(144,209,163, 0.1), rgba(144,209,163, 0.7) 4%, rgba(144,209,163, 0.3));}
.marker.yellow{background-image:linear-gradient(to right, rgba(255, 227, 0, 0.1), rgba(255, 227, 0, 0.7) 4%, rgba(255, 227, 0, 0.3));}
.marker.red{background-image:linear-gradient(to right, rgba(223,78,27, 0.1), rgba(223,78,27, 0.7) 4%, rgba(223,78,27, 0.3));}
.marker.purple{background-image:linear-gradient(to right, rgba(72,72,138, 0.1), rgba(72,72,138, 0.7) 4%, rgba(72,72,138, 0.3));}
.marker.pink{background-image:linear-gradient(to right, rgba(223,78,27, 0.1), rgba(223,78,27, 0.7) 4%, rgba(223,78,27, 0.3));}
p.lift{margin-top:12px;}

/*forms*/
.formintro{min-height:200px; position:relative; background:url('../images/contact-form.png') no-repeat center rgba(144,209,163,.38); padding:24px 144px;}
.formintro.pink{background:url('../images/contact-form.png') no-repeat center #f9dcd1;}
.formintro h1{line-height:1; position:absolute; bottom:16px; margin-bottom:0px; width:unset; }
form.form-grid{padding:24px 144px; margin-bottom:44px;}
form.form-grid.nomargin{margin-bottom:0px;}
form.form-grid .wide{grid-column-end:span 2;}
form.form-grid .fit{display:grid; grid-template-columns:max-content auto; gap:16px;}
form.form-grid h2{margin-top:35px; margin-bottom:0px; font-size:2.4rem;}
form.form-grid h3{margin-top:35px; margin-bottom:0px; font-size:2.0rem;}
form.form-grid div{padding:8px 0px;}
form.form-grid div.row{}
form.form-grid div.noborder{}
form.form-grid div.message{font-family:'Chelsea Market', cursive; padding:0px 8px; font-size:1.8rem;}
form.form-grid div.label{padding:0px 8px;}
form.form-grid div.label span{border-bottom:16px solid #90D1A3; color:#2D2E80; font-family:'Chelsea Market', cursive; padding:0px 8px; font-size:1.8rem;}
form.form-grid div.row label.red{color:#e2001a;}
form.form-grid div span{display:block; height:32px; line-height:32px; color:#a3a3a3; font-size:1.2rem;}
form.form-grid div input[type="text"],
form.form-grid div input[type="number"],
form.form-grid div input[type="date"],
form.form-grid div input[type="email"],
form.form-grid div input[type="time"],
form.form-grid div input[type="datetime-local"]{width:100%; height:24px; line-height:24px; padding:16px; border:1px solid #ffffff; color:#2D2E83; font-family:'Chelsea Market', cursive; background:#ffffff;}
form.form-grid div select{width:100%; height:24px; line-height:24px; font-size:1.4rem; padding:16px; color:#2D2E83; border:1px solid #ffffff; background:#ffffff; color:#2D2E80; font-family:'Chelsea Market', cursive;}
form.form-grid div select{height:unset; line-height:unset; padding:8px 16px;}
form.form-grid div select option{color:#555555;}
form.form-grid div input[type="text"].red,
form.form-grid div input[type="number"].red,
form.form-grid div input[type="date"].red,
form.form-grid div input[type="email"].red,
form.form-grid div input[type="time"].red,
form.form-grid div select.red,
form.form-grid div input[type="datetime-local"].red{border:1px solid #e2001a;}
form.form-grid div textarea{width:100%; height:300px; line-height:24px; color:#2D2E83; font-family:'Chelsea Market', cursive; padding:16px; background:#ffffff; border:1px solid #ffffff;} 
form.form-grid div textarea:focus{border:1px solid #303030;}
form.form-grid div textarea.red{border:1px solid #e2001a;}
form.form-grid div.submit{display:grid; grid-template-columns:1fr 1fr;}
form.form-grid div.submit .button-left input[type=button],
form.form-grid div.submit .button-left input[type=submit]{border:0px; font-family:'Source Sans Pro', sans-serif; color:#555555; background-color:#eae9e9; font-size:1.4rem; padding:15px 25px; border-radius:5px; text-decoration:none; float:left; cursor:pointer;}
form.form-grid div.submit .button-right input[type=button],
form.form-grid div.submit .button-right input[type=submit]{border:0px; font-family:'Chelsea Market', cursive; color:#2D2E80; background-color:#90D1A3; font-size:1.8rem; padding:15px 25px; border-radius:5px; text-decoration:none; float:right; cursor:pointer;}
form.form-grid div.submit .button-right input[type=submit].grey{color:#f1f1f1; background-color:#444444;}
form.form-grid div.submit .button-right input[type=submit].lightpink{color:#f1f1f1; background-color:#f1c3b7;}

/*sections*/
section{padding:32px 0;}
section.no-padding{padding:0px !important;}

section .return{height:50px; width:200px; background: url('../images/return.svg') no-repeat top left; margin-bottom:32px; }
section .return a{height:100%; width:100%; display:block; object-fit:cover; text-indent:-4000px;}
section .return:hover{cursor:pointer;}

section.intro h1{margin-bottom:12px;}
section.intro.splash .container{display:grid; grid-template-columns:2fr 3fr; gap:48px;}
section.intro.splash h1{width:100%; height:auto; border:none; text-indent:-4000px;}
section.intro.splash h1.home{background:url('../images/title-welkom.webp') no-repeat top left / contain;}
section.intro.splash h1.about{background:url('../images/title-about-us.webp') no-repeat top left / contain;}
section.intro.splash article{overflow:visible; margin-bottom:96px;}
section.intro.splash article .ico-songs{width:140px; height:160px; display:block; position:absolute; bottom:-48px; right:40px; background:url("../images/ico-songs-1.svg") no-repeat top left; cursor:pointer; text-indent:-40000px; rotate:3deg;}
section.intro.splash article .ico-songs:hover{background:url("../images/ico-songs-2.svg") no-repeat top left;}
section.intro.splash article .ico-songs a{width:100%; height:100%; display:block;}
section.intro article.advise{padding:24px 144px;}
section.intro.bird .container{display:grid; grid-template-columns:1fr 300px; gap:48px;}
section.intro.bird .container .image{margin-bottom:40px;}
section.intro.bird .container .image img{width:100%; height:100%; object-fit:contain;}
section.intro .grid{display:grid; grid-template-columns:0.4fr 0.6fr;}
section.intro .grid article{grid-area:1/2/1/2; padding:64px 0px;}
section.intro .review{width:1212px; height:859px; display:block; background:url('../images/title-review.jpg') no-repeat; background-size:contain;}
section.intro .song-grid{display:grid; grid-template-columns:auto 800px; grid-gap:16px; margin-top:32px;}
section.intro .song-grid h1{grid-column-end:span 2;}
section.intro .song-grid .video{width:800px; height:442px; display:block; padding:66px 126px;}
section.intro .song-grid .video.player-1{background:url('../images/background-video-1.webp') no-repeat center; background-size:contain;}
section.intro .song-grid .video.player-2{background:url('../images/background-video-2.webp') no-repeat center; background-size:contain;}
section.intro .song-grid .video.player-3{background:url('../images/background-video-3.webp') no-repeat center; background-size:contain;}
section.intro .song-grid .video.player-4{background:url('../images/background-video-4.webp') no-repeat center; background-size:contain;}
section.intro .song-grid .icons{margin-top:48px; display:grid; grid-template-columns:1fr 60px;}
section.intro .song-grid .icons .download{width:100%; height:48px; display:block; float:left; margin-bottom:8px;}
section.intro .song-grid .icons .spotify{width:100%; height:48px; display:block; float:right; background:url("../images/ico-spotify-1.svg") no-repeat top left; grid-area:1/2/3/2;}
section.intro .song-grid .icons .spotify:hover{background:url("../images/ico-spotify-3.svg") no-repeat top left;}
section.intro .song-grid .icons .download.ideas{background:url("../images/download-ideas-1.svg") no-repeat top left; grid-area:3/1/3/2;}
section.intro .song-grid .icons .download.ideas:hover{background:url("../images/download-ideas-2.svg") no-repeat top left;}
section.intro .song-grid .icons .download.chords{background:url("../images/download-chords-1.svg") no-repeat top left; grid-area:2/1/2/2;}
section.intro .song-grid .icons .download.chords:hover{background:url("../images/download-chords-2.svg") no-repeat top left;}
section.intro .song-grid .icons .download.songtext{background:url("../images/download-songtext-1.svg") no-repeat top left; grid-area:1/1/1/2;}
section.intro .song-grid .icons .download.songtext:hover{background:url("../images/download-songtext-2.svg") no-repeat top left;}
section.intro .song-grid .icons .download:nth-of-type(1){rotate:3deg;}
section.intro .song-grid .icons .download:nth-of-type(1):hover{rotate:0deg;}
section.intro .song-grid .icons .download:nth-of-type(2){rotate:-1deg;}
section.intro .song-grid .icons .download:nth-of-type(2):hover{rotate:0deg;}
section.intro .song-grid .icons .download:nth-of-type(3){rotate:-3deg;}
section.intro .song-grid .icons .download:nth-of-type(3):hover{rotate:0deg;}
section.pop-up img{width:100%; height:100%; object-fit:contain;}

section.reviews{padding:64px 0;}
section.reviews .review{text-align:center; max-width:fit-content; padding:24px;}
section.reviews .wrapper{margin: 0 auto; position:relative; height:300px;}
section.reviews .review{position:absolute; z-index:10;}
section.reviews .review:nth-of-type(5n){background-color:#1b1909; color:white; transform:rotate(-2deg)translateX(-50%); width:90%; padding:11px; bottom:0; left:50%;}
section.reviews .review:nth-of-type(5n+1){background-color:#90D1A3;transform:rotate(10deg); width:45%; padding:14px; bottom:62%; left:4%;}
section.reviews .review:nth-of-type(5n+2){background-color:#f9dcd1;transform:rotate(-10deg); width:48%; padding:18px; bottom:75%; right:4%;}
section.reviews .review:nth-of-type(5n+3){background-color:#A8A7C7;transform:rotate(6deg); width:53%; padding:8px; bottom:26%; left:0%}
section.reviews .review:nth-of-type(5n+4){background-color:#E56939; transform:rotate(-7deg); width:48%; padding:10px; color:white; bottom:39%; right:0%;}
section.reviews .bg-branch{background-color:#A7D5D3; width:90%; height:30px; position:absolute; z-index:9;}
section.reviews .bg-branch.one{width:90%; bottom:65%; left:5%; transform:rotate(-2deg); }
section.reviews .bg-branch.two{width:80%; bottom:48%; left:15%;transform:rotate(2deg); }
section.reviews .bg-branch.three{width:64%; bottom:33%; right:18%;transform:rotate(-2deg); }
section.reviews .bg-branch.four{width:50%; bottom:20%; right:25%;transform:rotate(-1deg); }
section.reviews .bg-branch.five{width:40%; bottom:0; right:30%;transform:rotate(1deg); }

section.filter{height:128px; overflow:visible; z-index:900;}
section.filter .panel form{display:grid; grid-template-columns:repeat(4,25%); grid-gap:16px; padding:24px 0px;}
section.filter .panel form .group{padding:16px; border-radius:8px;}
section.filter .panel form .group h3{font-size:1.4rem; border-bottom:2px dotted #2D2E83; padding-bottom:8px; margin-bottom:16px; position:relative; cursor:pointer;}
section.filter .panel form .group h3 i{position:absolute; right:0; font-size:2.0rem;}
section.filter .panel form .wrapper .group{border:4px solid white;}
section.filter .panel form .wrapper:nth-of-type(1) .group{rotate:-1deg; background-color:#d5eedc;}
section.filter .panel form .wrapper:nth-of-type(2) .group{rotate:1deg; background-color:#f9dcd1;}
section.filter .panel form .wrapper:nth-of-type(3) .group{rotate:-1deg; background-color:#fff49c;}
section.filter .panel form .group .row label{font-size:1.4rem; margin-left:12px;}
section.filter .panel form .group .filters{max-height:300px; overflow-y:scroll; }
section.filter .panel form .group .filters::-webkit-scrollbar{width: 6px;}
section.filter .panel form .group .filters::-webkit-scrollbar-track{background:rgba(255,255,255,0.2);}
section.filter .panel form .group .filters::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.6);}
section.filter .panel form .group .filters::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.8);}

section.cat-circles .grid{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:16px;}
section.cat-circles .grid .circle{width:100%; display:block; position:relative;}
section.cat-circles .grid .circle .image{width:100%; aspect-ratio:1/1; position:relative; margin-bottom:16px;}
section.cat-circles .grid .circle .image img{width:100%; height:100%; object-fit:cover;}
section.cat-circles .grid .circle .image .overlay{width:100%; height:100%; display:block; background:url("../images/background-artist.webp") center / contain; background-size:100% 100%; position:absolute; top:0; left:0;}
section.cat-circles .grid .circle:hover .image .overlay{background:url("../images/background-artist-hover.webp") center / contain;}
section.cat-circles .grid .circle h3{color:#2D2E83;}

section.cat-squares .grid{display:grid; grid-template-columns:1fr 1fr 1fr; column-gap:24px; row-gap:56px;}
section.cat-squares .grid .square{width:100%; height:auto; display:block; aspect-ratio:124/150; padding:56px 32px 0px 32px; position:relative;}
section.cat-squares .grid .square.bg-green{background:url('../images/frame-green.svg') no-repeat top center / 100%;}
section.cat-squares .grid .square.bg-blue{background:url('../images/frame-blue.svg') no-repeat top center / 100%;}
section.cat-squares .grid .square.bg-yellow{background:url('../images/frame-yellow.svg') no-repeat top center / 100%;}
section.cat-squares .grid .square.bg-pink{background:url('../images/frame-pink.svg') no-repeat top center / 100%;}
section.cat-squares .grid .square:nth-of-type(4n+1){transform:rotate(2deg);}
section.cat-squares .grid .square:nth-of-type(3n+3){transform:rotate(-2deg);}
section.cat-squares .grid .square:nth-of-type(4n+2){transform:rotate(-2deg);}
section.cat-squares .grid .square .age{background-repeat:no-repeat; background-position:0 0; width:64px; height:64px; position:absolute; top:-16px; left:50%; transform: translate(-50%, 0);}
section.cat-squares .grid .square.bg-green:hover .age{background-image:url("../images/frame-eye-green.svg") !important;}
section.cat-squares .grid .square.bg-blue:hover .age{background-image:url("../images/frame-eye-blue.svg") !important;}
section.cat-squares .grid .square.bg-yellow:hover .age{background-image:url("../images/frame-eye-yellow.svg") !important;}
section.cat-squares .grid .square.bg-red:hover .age{background-image:url("../images/frame-eye-pink.svg") !important;}
section.cat-squares .grid .square.bg-pink:hover .age{background-image:url("../images/frame-eye-pink.svg") !important;}
section.cat-squares .grid .square .image{width:100%; position:relative; margin-bottom:8px;}
section.cat-squares .grid .square .image img{height:100%; width:100%; object-fit:cover;}
section.cat-squares .grid .square h3{color:#2D2E83; margin:0; line-height:1;}


section.product .grid{width:100%; display:grid; grid-template-columns:repeat(6,1fr); column-gap:16px; row-gap:48px; padding-top:16px; border-top:4px dotted #2d2e83;}
section.product .grid .image{grid-column-end:span 3;}
section.product .grid .image img{width:100%; object-fit:cover;}
section.product .grid .legend{grid-column-end:span 3;}
section.product .grid .legend .tags{display:grid; grid-template-columns:repeat(4,1fr); grid-gap:24px;}
section.product .grid .legend .tags .icon{width:auto; display:inline-block; position:relative; float:none; margin:0px 0px 0px 10px; cursor:pointer;}
section.product .grid .legend .tags .icon img{width:100%; object-fit:cover;}
section.product .grid .legend .tags .icon img:hover{cursor:pointer;}
section.product .grid .legend .tags .icon .tooltiptext{visibility:hidden; width:320px; height:unset; background:rgba(144,209,163,1); color:#2D2E83; text-align:center; padding:12px; border-radius:8px; line-height:unset; font-weight:normal; position:absolute; z-index:1; bottom:107%; left:50%; margin-left:-160px; opacity:0; transition:opacity 0.3s;}
section.product .grid .legend .tags .icon .tooltiptext::after{content:''; position:absolute; top:100%; left:50% ; margin-left:-5px; border-width:5px; border-style:solid; border-color:rgba(144,209,163,1) transparent transparent transparent;}
section.product .grid .legend .tags .icon:hover .tooltiptext{visibility:visible; opacity:1;}
section.product .grid .legend .icons{margin-top:32px;}
section.product .grid .legend .icons .download{width:129px; height:48px; display:block; float:left; margin-bottom:8px;}
section.product .grid .legend .icons .download.factsheet{background:url("../images/download-factsheet-1.svg") no-repeat top left; grid-area:1/1/1/2;}
section.product .grid .legend .icons .download.factsheet:hover{background:url("../images/download-factsheet-2.svg") no-repeat top left;}
section.product .grid .legend .icons .download.lesbrief{background:url("../images/download-lesbrief-1.svg") no-repeat top left; grid-area:1/1/1/2;}
section.product .grid .legend .icons .download.lesbrief:hover{background:url("../images/download-lesbrief-2.svg") no-repeat top left;}
section.product .grid .title{grid-column-end:span 6;}
section.product .grid .title *{margin:0px !important;}
section.product .grid .title h2{font-weight:normal; font-family:'Source Sans Pro', sans-serif;}
section.product .grid article{grid-column-end:span 6;}
section.product .grid .media{grid-column-end:span 2; max-height:300px;}
section.product .grid .media.hide{display:none; visibility:hidden;}
section.product .grid .media a{display:block; width:100%; max-height:300px;}
section.product .grid .media img{height:100%; max-height:300px; width:100%; object-fit:contain; margin:0px auto;}
section.product .grid .media iframe{width:100%; height:100%;}
section.product .grid .actions{grid-column-end:span 6; display:grid; grid-template-columns:150px 150px auto; grid-gap:32px;}
section.product .grid .actions p{grid-column-end:span 3; font-family:'Chelsea Market', cursive; }
section.product .grid .actions .contact{height:150px; width:150px; display:block; background:url('../images/ico-boekdirect-01.svg') no-repeat center / cover; text-indent:-4000px;}
section.product .grid .actions .contact:hover{background:url('../images/../images/ico-boekdirect-02.svg') no-repeat top right;}
section.product .grid .actions .advies{height:150px; width:150px; display:block; background:url('../images/ico-advies-01.svg') no-repeat center / cover; text-indent:-4000px;}
section.product .grid .actions .advies:hover{background:url('../images/ico-advies-02.svg') no-repeat top right;}

section.symbols .item{display:grid; grid-template-columns:80px auto; grid-gap:24px; width:80%; margin:12px auto;}
section.symbols .item .icon img{width:100%; height:100%; object-fit:contain;}
section.symbols .item .about h2{line-height:80px;}

section.brochure object{height:100vh;}
section.brochure h2{padding-top:48px;}
section.brochure .actions{width:696px; display:grid; grid-template-columns:200px 200px 200px; grid-gap:48px; padding-top:24px; margin:0px auto;}
section.brochure .actions div:nth-of-type(1){width:200px; height:auto; transform:rotate(-4deg);}
section.brochure .actions div:nth-of-type(2){width:200px; height:auto; transform:rotate(3deg);}
section.brochure .actions div:nth-of-type(2){width:200px; height:auto; transform:rotate(-2deg);}
section.brochure .actions div img{width:100%; object-fit:cover;}

section.news .grid .newsitem{display:grid; grid-template-columns:160px auto; grid-gap:32px;}
section.news .grid .newsitem .image img{object-fit:cover; transform:rotate(-2deg);}
section.news .grid .newsitem:nth-of-type(odd){grid-template-columns:auto 160px; }
section.news .grid .newsitem:nth-of-type(odd) .image{grid-area:1/2/1/3;}
section.news .grid .newsitem:nth-of-type(odd) .image img{transform:rotate(3deg);}

/*footer*/
footer{padding:32px 0;}
footer a{color:#3738a0;}
footer a:hover{color:#2D2E83;}
footer .grid{display:grid; grid-template-columns:1fr 1fr 1fr; grid-gap:32px;}
footer .grid h4{text-transform:uppercase; margin-bottom:12px;}
footer .grid .info a{display:block; text-decoration:underline; font-size:1.4rem;}
footer .grid .newsletter{height:96px; width:96px; background: url("../images/ico-nieuwsbrief-01.svg") no-repeat 0 0; margin: 0 auto;}
footer .grid .newsletter:hover{height:96px; width:96px; background: url("../images/ico-nieuwsbrief-02.svg") no-repeat 0 0;}
footer .grid .contact{text-align:right;}
footer .grid .contact a{font-size:1.4rem;}
footer .grid .contact .socialicons{display:flex; justify-content:flex-end; margin-top:32px;}
footer .grid .contact .socialicons a{margin:auto 0;}
footer .grid .contact .socialicons a:not(:last-child){margin-right:16px;}
footer .grid .contact .socialicons a img{height:32px; width:32px;}
footer .grid .copyright{grid-column-end:span 3; display:grid; grid-template-columns:1fr 1fr; grid-gap:16px;}
footer .grid .copyright *{font-size:1.2rem;}
footer .grid .copyright div:last-of-type{text-align:right;}
footer .grid .copyright a{margin-left:12px;}

/*laptop*/
@media only screen and (max-width:1220px) 
{   
    header .grid{grid-template-columns:1fr 392px 1fr;}

}
/*laptop*/
@media only screen and (max-width:1024px) 
{   
    body{font-size:1.6rem;}
    h1{font-size:3.0rem;}
    h2{font-size:2.2rem;}

    form.form-grid{padding:24px;}
    form.form-grid div.label span{font-size:1.4rem;}

    header .grid{grid-template-columns:1fr 253px 1fr;}
    header .grid .icons .wrapper .news,
    header .grid .icons .wrapper .newsletter,
    header .grid .icons .wrapper .contact{width:48px; height:48px;}
    
    nav ul li a{height:40px;}
    nav ul li a.voorstellingen{width:164px;}
    nav ul li a.straattheater{width:138px;}
    nav ul li a.speelnest{width:98px;}
    nav ul li a.team{width:61px;}
    nav ul li a.wie-zijn-we{width:117px;}
    nav ul li a.kinderliedjes{width:132px;}

    section.filter .panel form{grid-template-columns:1fr 1fr 1fr;}

    section.intro .song-grid{grid-template-columns:1fr;}
    section.intro .song-grid h1{grid-column-end:unset;}
    section.intro .song-grid .video{width:721px; height:398px; display:block; padding:60px 113px;}





    section.reviews{padding:32px 0;}
    section.reviews .review{padding:24px;}
    section.reviews .wrapper{height:300px;}
    section.reviews .review:nth-of-type(5n){bottom:0; left:50%;}
    section.reviews .review:nth-of-type(5n+1){transform:rotate(4deg); bottom:69%; left:0%;}
    section.reviews .review:nth-of-type(5n+2){transform:rotate(0deg); bottom:77%; right:5%;}
    section.reviews .review:nth-of-type(5n+3){transform:rotate(2deg); bottom:50%; left:0%}
    section.reviews .review:nth-of-type(5n+4){transform:rotate(-6deg); bottom:39%; right:5%;}
    section.reviews .bg-branch{width:80%; height:25px;}
    section.reviews .bg-branch.one{width:78%; bottom:66%; left:5%;}
    section.reviews .bg-branch.two{bottom:48%; left:14%;}
    section.reviews .bg-branch.three{bottom:24%; right: 4%;}
    section.reviews .bg-branch.four,
    section.reviews .bg-branch.five{display:none;}
}
/*tablet*/
@media only screen and (max-width:920px) 
{   
    section.reviews .wrapper{max-width:100%;} 
    
    section.cat-squares .grid{grid-template-columns:1fr 1fr;}
    section.cat-squares .grid .square{padding:56px 40px 0px 40px;}
    section.cat-squares .grid .square .age{background-repeat:no-repeat; background-position:0 0; position:absolute; top:-8px; left:50%; transform: translate(-50%, 0);}
    section.cat-squares .grid .square.bg-green:hover .age{background-image:url("../images/eye-green.svg") !important;}
    section.cat-squares .grid .square.bg-purple:hover .age{background-image:url("../images/eye-purple.svg") !important;}
    section.cat-squares .grid .square.bg-yellow:hover .age{background-image:url("../images/eye-yellow.svg") !important;}
    section.cat-squares .grid .square.bg-red:hover .age{background-image:url("../images/eye-pink.svg") !important;}
}

/*tablet*/
@media only screen and (max-width:768px) 
{   
    body{font-size:1.4rem;}
    h1{font-size:2.5rem;}
    h2{font-size:2.0rem;}
    h3{font-size:1.8rem;}
    h4{font-size:1.8rem;}
    small{font-size:1.2rem;}
    
    .formintro{padding:24px; background:url('../images/contact-form.png') no-repeat center right rgba(144,209,163,.38)}   
    form.form-grid{padding:24px;}
    form.form-grid div.label span{border-bottom:12px solid #90D1A3; font-size:1.4rem;}
    form.form-grid .fit{grid-template-columns:1fr;}
    form.form-grid div.submit .button-right input[type=button], 
    form.form-grid div.submit .button-right input[type=submit]{font-size:1.4rem;}

    header{z-index:200;}
    header .grid{grid-template-columns:1fr 138px 1fr; padding:12px 24px;}
    header .grid .menu{display:unset; display:block; text-align:right; grid-area:1/3/1/4;}
    header .grid .menu a{width: 40px; height:40px; display:block; float:right; line-height:40px; text-align:center; border-radius:50%; background:#dcf0ef;} 
    header .grid .menu a i{font-size:2.2rem; color:#7a83b1; line-height:40px; rotate:3deg;}    
    header .grid .icons{display:none;}
    header .grid .icons .wrapper{display:none;}
    header .grid .icons .wrapper .socialicons{display:none;}
    header .grid .icons .wrapper .searchbar{display:none;}
    header .grid .icons .wrapper .newsletter{display:none;}
    header .grid .icons .wrapper .artist{display:none;}
    header .grid .icons .wrapper .news{display:none;}
    header .grid .icons .wrapper .presentatiedag{display:none;}
    
    nav{width:100%; height:auto; display:block; float:none; left:0; top:-800px; position:absolute; -webkit-transform:translateY(-140%); transform:translateY(-140%); -webkit-transition:-webkit-transform 0.5s, visibility 0s 0.5s; transition:transform 0.5s, visibility 0s 0.5s;}
    nav.open{width:100vw; height:100vh; display:block; float:none; left:0px; top:0px; background:rgba(0,0,0,0.2); z-index:110; position:absolute; margin:0px !important; -webkit-transform:translateY(0%); transform:translateY(0%); -webkit-transition:-webkit-transform 0.5s; transition:transform 0.5s;}
    nav .container{display:grid; grid-template-columns:1fr 64px; gap:16px;}
    nav ul{width:100%; height:auto; display:block; position:relative; float:left; padding:12px; margin-top:calc(100vw / 4.3537 + 24px); background:#dcf0ef;}
    nav ul li.green{width:100%; background-position:top right;}
    nav ul li.green:hover,
    nav ul li.green.on{background-position:top right;}
    nav ul li.blue{width:100%;background-position:top right;}
    nav ul li.blue:hover,
    nav ul li.blue.on{background-position:top right;}
    nav ul li.pink{width:100%;background-position:top right;}
    nav ul li.pink:hover,
    nav ul li.pink.on{background-position:top right;}
    nav ul li.yellow{width:100%;background-position:top right;}
    nav ul li.yellow:hover,
    nav ul li.yellow.on{background-position:top right;}
    nav ul li.lightblue{width:100%;background-position:top right;}
    nav ul li.lightblue:hover,
    nav ul li.lightblue.on{background-position:top right;}
    nav ul li.red{width:100%;background-position:top right;}
    nav ul li.red:hover,
    nav ul li.red.on{background-position:top right;}
    nav ul li{width:100%; height:auto; height:25px; display:block; float:left; margin:0px; text-align:right; margin: 12px 0;}
    nav .mobicons{width:100%; height:auto; display:block; float:left; padding:8px; margin-top:calc(100vw / 4.3537 + 24px); background:#dcf0ef;}
    nav.open .mobicons a{margin-bottom:12px;}
    nav.open .mobicons .newsletter{height:48px; width:48px; display:block; float:right; background: url("../images/ico-nieuwsbrief-01.svg") no-repeat 0 0;}
    nav.open .mobicons .newsletter:hover{background: url("../images/ico-nieuwsbrief-02.svg") no-repeat 0 0;}
    nav.open .mobicons .newsletter img{height:100%; width:100%; object-fit:cover;}
    nav.open .mobicons .contact{height:48px; width:48px; display:block; float:right; background: url("../images/ico-contact-01.svg") no-repeat 0 0;}
    nav.open .mobicons .contact:hover{background: url("../images/ico-contact-02.svg") no-repeat 0 0;}
    nav.open .mobicons .contact img{height:100%; width:100%; object-fit:cover;}
    nav.open .mobicons .news{height:48px; width:48px; display:block; float:right; background: url("../images/ico-nieuws-02.svg") no-repeat 0 0;}
    nav.open .mobicons .news:hover{background: url("../images/ico-nieuws-01.svg") no-repeat 0 0;}
    nav.open .mobicons .news img{height:100%; width:100%; object-fit:cover;}

    section.intro.splash .container{grid-template-columns:1fr; gap:16px;}
    section.intro.splash h1.home,
    section.intro.splash h1.about{height:80px;}
    section.intro.bird .container{grid-template-columns:1fr;}
    section.intro.bird .container .image img{width:140px; float:right;}
    
    section.filter{height:unset; overflow:hidden; z-index:unset;}
    section.filter .panel form{grid-template-columns:1fr;}
    section.filter .panel form .wrapper .group .filters{display:block;}
    section.filter .panel form .wrapper .group .filters .row{display:inline-block; padding:4px 8px; border-radius:4px; background:rgba(255,255,255,0.4); border:1px solid rgba(255,255,255,0.8); margin:0px 4px 4px 0px;}
    section.cat-circles .grid{grid-template-columns:1fr 1fr 1fr;}
    section.cat-circles .grid .circle h3{font-size:1.4rem;}

    section.intro .song-grid .icons{margin-top:32px; grid-template-columns:1fr;}
    section.intro .song-grid .icons .download.chords,
    section.intro .song-grid .icons .download.ideas,
    section.intro .song-grid .icons .download.spotify,
    section.intro .song-grid .icons .download.songtext{grid-area:unset;}
    section.intro .song-grid .icons .download{height:32px;}
    section.intro .song-grid .video{width:378px; height:209px; display:block; padding:32px 60px;}

    section.product .grid .actions .contact{height:80px; width:80px; text-indent:-4000px;}




    section .return{height:50px; width:200px; background: url('../images/return.svg') no-repeat top left; margin-bottom:24px;}
    section.intro article.advise{padding:24px 96px;}

    section.product .grid{width:100%; display:grid; grid-template-columns:repeat(3,1fr); column-gap:16px; row-gap:48px; padding-top:16px; border-top:4px dotted #2d2e83;}
    section.product .grid .image{grid-column-end:span 3;}
    section.product .grid .image img{width:100%; object-fit:cover;}
    section.product .grid .title{grid-column-end:span 3;}
    section.product .grid .title *{margin:0px !important;}
    section.product .grid .title h2{font-weight:normal; font-family:'Source Sans Pro', sans-serif;}
    section.product .grid article{grid-column-end:span 3;}
    section.product .grid .media{grid-column-end:span 3; max-height:unset;}
    section.product .grid .media img{width:100%; object-fit:cover;}
    section.product .grid .media iframe{width:100%; height:100%;}
    section.product .grid .actions{grid-column-end:span 3;}
    /*section.product .grid .actions .contact:hover{background:url('../images/ico-contacteer-artiest-02.svg') no-repeat top right;}*/
    section.product .grid .actions .advies{height:150px; width:150px; text-indent:-4000px;}
    /*section.product .grid .actions .advies:hover{background:url('../images/ico-advies-02.svg') no-repeat top right;}*/

    section.reviews{padding:32px 0;}
    section.reviews .review{padding:24px; width:100%; position: relative; margin:20px auto;}
    section.reviews .wrapper{max-width:100%; height:unset;}
    section.reviews .review:nth-of-type(5n){bottom:0; left:50%;}
    section.reviews .review:nth-of-type(5n+1){transform:rotate(4deg); bottom:unset; left:unset;}
    section.reviews .review:nth-of-type(5n+2){transform:rotate(0deg); bottom:unset; right:unset;}
    section.reviews .review:nth-of-type(5n+3){transform:rotate(2deg); bottom:unset; left:unset;}
    section.reviews .review:nth-of-type(5n+4){transform:rotate(-6deg); bottom:unset; right:unset;}
    section.reviews .bg-branch{width:450px; height:25px;}
    section.reviews .bg-branch.one{width: 80%; transform:rotate(4deg); bottom:78%; left:2%;}
    section.reviews .bg-branch.two{width: 93%; transform:rotate(2deg); bottom:48%; left:4%;}
    section.reviews .bg-branch.three{width: 88%; transform:rotate(-4deg); bottom:24%; right: 5%;}

    footer{padding:24px 0;}
    footer .grid .newsletter{height:64px; width:64px;}
    footer .grid .newsletter:hover{height:64px; width:64px;}
    footer .grid .contact .socialicons{display:flex; justify-content:flex-end; margin-top:24px;}
    footer .grid .copyright a:first-of-type{margin-left:0px;}
}

/*mobile l*/
@media only screen and (max-width:631px)
{
    section.cat-squares .grid{column-gap:16px; row-gap:16px;}
    section.cat-squares .grid .square{padding:56px 24px 0px 24px;}
    section.cat-squares .grid .square h3{font-size:1.4rem;}
}
/*mobile l*/
@media only screen and (max-width:425px)
{
    body{font-size:1.4rem;}
    h1{font-size:2.0rem;}
    h2{font-size:1.6rem;}
    h3{font-size:1.4rem;}
    h4{font-size:1.4rem;}

    form.smaller{width:100%;}
    form.form-grid{grid-template-columns:1fr;}
    form.form-grid .wide{grid-column-end:unset;}
    form.form-grid .label{border-bottom:0px !important}    
    form.form-grid div{padding:0px;}
    .formintro{padding:24px; background:url('../images/contact-form.png') no-repeat right rgba(144,209,163,.38);}
    .formintro h1{}
    form.form-grid{padding:24px;}
    form.form-grid div.label span{border-bottom:8px solid #90D1A3; font-size:1.4rem;}    
    form.form-grid .message{min-height:72px;}
    form.form-grid .fit{grid-template-columns:1fr; gap:8px;}
    
    header .grid{grid-template-columns:1fr 115px 1fr; padding:12px;}

    .container{padding:0px 12px;}

    section .return{height:32px; margin-top:12px;}

    section.intro{padding-top:16px;}
    section.intro .song-grid .video{width:unset; height:unset; padding:0px;}
    section.intro .song-grid .video.player-1,
    section.intro .song-grid .video.player-2,
    section.intro .song-grid .video.player-3,
    section.intro .song-grid .video.player-4{background:none;}
    section.intro.splash article{margin-bottom:unset;}
    section.intro.splash article .ico-songs{width:100%; height:180px; background-position:top right; background-size:140px 160px; position:relative; bottom:unset; right:unset; }
    section.intro.splash article .ico-songs:hover{background-position:top right; background-size:140px 160px;}


    section.cat-circles .grid{grid-template-columns:1fr 1fr;}
    section.cat-circles .grid .circle h3{font-size:1.6rem;}

    section.cat-squares .grid{grid-template-columns:1fr;}
    section.cat-squares .grid .square{padding:64px 32px 0px 32px;}
    section.cat-squares .grid .square h3{font-size:1.6rem;}


    section.filter .panel form{grid-template-columns:1fr;}

    section.product .grid{grid-template-columns:1fr; row-gap:24px;}
    section.product .grid .image{grid-column-end:unset;}
    section.product .grid .legend{grid-column-end:unset;}
    section.product .grid .legend .tags{display:grid; grid-template-columns:repeat(4,1fr); grid-gap:12px;}
    section.product .grid .title{grid-column-end:unset;}
    section.product .grid article{grid-column-end:unset;}
    section.product .grid .media{grid-column-end:unset; max-height:unset; margin-bottom:24px;}
    section.product .grid .media img{width:100%; object-fit:cover;}
    section.product .grid .media iframe{width:100%; height:100%;}
    section.product .grid .actions{grid-column-end:unset; grid-template-columns:1fr 1fr; grid-gap:12px;}
    section.product .grid .actions p{grid-column-end:span 2;}
    section.product .grid .actions .contact{height:60px; width:60px;}
    section.product .grid .actions .advies{height:60px; width:60px;}

    section.news .grid .newsitem:nth-of-type(odd),
    section.news .grid .newsitem{grid-template-columns:1fr;}
    section.news .grid .newsitem:nth-of-type(odd) .image{grid-area:unset;}

    




    
    section.intro{padding-bottom:0px;}
    section.intro.padding-bottom{padding-bottom:32px;}
    section.intro.splash{min-height:unset;}
    section.intro.splash .container{min-height:unset; background:none;}
    section.intro.splash article{width:100%;}
    section.intro.splash h1{height:100px; margin-bottom:12px; background:url('../images/title-speelnest.png') no-repeat top right / contain;}
    section.intro article.advise{padding:24px;}

    section.intro .grid{display:block;}
    section.intro .grid article{padding:unset; }
    
    section.bird{padding:32px 0px 0px 0px;}
    section.bird h1{width:100%; height:90px; margin:0px !important; background-size:80%; }
    section.bird h1.lappie{height:160px; background-size:90%;}
    section.bird .split{display:grid; grid-template-columns:1fr; grid-gap:24px;}
    section.bird .split .image img{width:100%; height:100%; object-fit:contain;}
    section.bird .split.switch{grid-template-columns:1fr;}
    section.bird .split.switch .image{grid-area:unset; width:80%; height:80%; }

    section.reviews{padding:32px 0;}
    section.reviews .review{padding:24px; width:100%; position: relative; margin:20px auto;}
    section.reviews .wrapper{max-width:100%; height:unset;}
    section.reviews .review:nth-of-type(5n){bottom:0; left:50%;}
    section.reviews .review:nth-of-type(5n+1){transform:rotate(4deg); bottom:unset; left:unset;}
    section.reviews .review:nth-of-type(5n+2){transform:rotate(0deg); bottom:unset; right:unset;}
    section.reviews .review:nth-of-type(5n+3){transform:rotate(2deg); bottom:unset; left:unset;}
    section.reviews .review:nth-of-type(5n+4){transform:rotate(-6deg); bottom:unset; right:unset;}
    section.reviews .bg-branch{width:450px; height:25px;}
    section.reviews .bg-branch.one{width: 80%; transform:rotate(4deg); bottom:78%; left:2%;}
    section.reviews .bg-branch.two{width: 93%; transform:rotate(2deg); bottom:48%; left:4%;}
    section.reviews .bg-branch.three{width: 88%; transform:rotate(-4deg); bottom:24%; right: 5%;}
    
    section.brochure object{display:none;}
    section.brochure .actions{width:100%; grid-template-columns:1fr 1fr; grid-gap:24px;}
    section.brochure .actions div{width:100% !important;}

    footer{padding:16px 0;}
    footer .grid{display:grid; grid-template-columns:1fr 1fr; grid-gap:16px;}
    footer .grid .newsletter{display:none;}
    footer .grid .contact .socialicons{display:flex; justify-content:flex-end; margin-top:8px;}
    footer .grid .copyright{grid-column-end:span 3; display:grid; grid-template-columns:1fr; grid-gap:8px;}
    footer .grid .copyright div{text-align:center !important;}
}