/* CSS Document */

body.menu header{background-color: #467ca7; height:5rem; }
body.menu main .text {text-align: center; width: 60%; margin-left: auto; margin-right: auto; font-size:0.8rem;}
h1{color:#ffffff; text-align:center; line-height: 1; font-size: 2rem; margin-top: 0px; margin-bottom: 0px; padding-top: 0.75rem;}
body.menu main .column:nth-child(odd) {text-align: right;}
#logo {background-image: url("/assets/images/logo-ts-white.webp"); top:1rem;}
body.menu h1:after{border-bottom:0px solid;}
.subtitle {text-align: center; color:#ffffff;}
.children-menu {max-width: 50%; display: block; margin-left: auto; margin-right: auto;}
.lesson-tile {width: 46%; background-image: url("/assets/images/header-tile-1.webp"); background-repeat:no-repeat; margin: 0px 1%; display: inline-block; border: 2px solid var(--darkblue); padding: 3.2rem 0.5rem 0.5rem 0.625rem; background-size:contain; box-sizing: border-box; background-color: #ffffff; box-shadow: 0.2rem 0.2rem 0.2rem rgba(100,100,100,0.5);}
.lesson-tile:nth-child(even)  {background-image: url(/assets/images/header-tile-2.webp);}
a.lesson-tile {text-decoration: none; color: var(--darkblue); vertical-align: top;}
.lesson-tile h3 {font-size: 0.8rem; margin-bottom: 0.25rem; font-style: normal; font-weight: bold;}
.lesson-tile h4 {font-size: 0.5rem; color: #000000; margin-top: 0.25rem;}
li.leerdoel {font-size: 0.5rem;}
.lesson-tile-btn {color: #ffffff; background-color: var(--lightgreen); border: 1px solid var(--darkgreen); border-radius: 6px; box-shadow: 0.2rem 0.2rem 0.2rem rgba(100, 100, 100, 0.5); padding: 0.5rem 1rem; display: inline-block; font-family: inherit; cursor: pointer; font-size: 0.625rem; float: right; margin-right: 0.5rem; animation-name: appearOpacity; animation-duration: 2s; animation-fill-mode: forwards;}
ul{padding-left: 0.5rem; margin-block-start: 0px; margin-block-end: 1rem; padding-inline-start: 0px; margin-left: 0.5rem;}
footer:before {opacity: 0.4; width: 100%; height: 6rem; left: 0px; top: -6rem; background-image: url(/assets/images/banner-arts.webp); background-size: cover; z-index: -2; animation-name: appearOpacity4; animation-duration: 5s; animation-fill-mode: forwards;}


@media screen and (max-width: 960px){
	.children-menu {max-width: 72%;} body.menu main .text{width:70%;}
}
@media screen and (max-width: 800px){
	.children-menu {max-width: 84%;} body.menu main .text{width:80%;}
}
@media screen and (max-width: 640px){
	.children-menu {max-width: 100%; text-align: center;} 
	body.menu main .text{width:90%;}
	.lesson-tile {width: 80%; margin: 0px auto 0.5rem auto; padding-top:19vw; text-align: left;}
	.lesson-tile h3 {font-size: 0.8rem;}
	.lesson-tile h4 {font-size: 0.625rem;}
	li.leerdoel {font-size: 0.625rem;}
}

/* test */