:root {
 --timetable-color-main: #00722c;
 --timetable-color-grey: #888;
 --timetable-color-dark-grey: #313131;
 --timetable-color-light-grey: #f4f4f4;
 --timetable-color-green: #267c01;
 --timetable-color-red: #ca0000;
 --timetable-color-black: #000;
 --timetable-color-white: #fff;
 
 --vcenter: translate(-50%,0);
 --hcenter: translate(0,-50%);
 --center: translate(-50%,-50%);
}

.timetable { position:relative; display:block; padding:1em 0; margin:0; }
.timetable ul { display:table; padding:0; margin:0.5em 0; text-align:center; list-style-type:none; list-style-image:none; width:100%; height:100%; }
.timetable ul li { position:relative; margin:0; padding:0; border:0; display:table-cell; height:100%; vertical-align:top; overflow:visible; list-style:none; width:14.28%; height:100%; }
.timetable ul li .inner { display:block; height:100%; margin:0 0.2em 0.1em; border:1px solid var(--timetable-color-light-grey); }

/* header */
.timetable .caption { position:relative; border:0; border-bottom:1px solid var(--timetable-color-light-grey); padding:1em 0.5em; margin:1em 0.2em; font-size:1.4em; line-height:1.1em; text-align:center; }
.timetable .caption h2 { font-size:1.6em; text-align:center; }
.timetable .caption ul { padding:0; margin:0; text-align:left; list-style-type:none; list-style-image:none; width:auto; float:none; }
.timetable .caption ul li { padding:0; margin:0; overflow:hidden; list-style:none; text-align:center; }
.timetable .caption li.previous,.timetable .caption li.next { position:absolute; top:50%; transform:var(--hcenter); display:block; width:50px; height:50px; }
.timetable .caption li.previous { left:0 }
.timetable .caption li.next { right:0;}
.timetable .caption .previous a:link,.timetable .caption .previous a:visited,
.timetable .caption .next a:link,.timetable .caption .next a:visited { display:block; height:100%; width:100%; color:var(--timetable-color-white); background:var(--timetable-color-black); transition-duration:0.6s;}
.timetable .caption .previous a:before,.timetable .caption .next a:before{ font-family:"Consolas", monospace; content:"<"; font-size:1.2em; line-height:1em; position:absolute; top:50%; transform:var(--hcenter); left:0; width:100%; text-align:center; }
.timetable .caption .next a:before { content:">"; }
.timetable .caption .previous a:active,.timetable .caption .previous a:hover,.timetable .caption .previous a:focus,
.timetable .caption .next a:active,.timetable .caption .next a:hover,.timetable .caption .next a:focus { color:var(--timetable-color-white); background:var(--timetable-color-main); }
.timetable .caption .previous span,.timetable .caption .next span { position:absolute; top:0; left:-1000em; width:100%; height:100%; display:block; font-size:3em; text-indent:0; }

/* card */
.timetable .label { position:relative; display:block; margin:0; padding:0; font-size:1em; }
.timetable .label span.weekday { position:relative; display:block; margin:0; padding:0.9em 0.5em; font-size:1.2em; line-height:1em; font-weight:normal; text-align:right; border-bottom:1px solid var(--timetable-color-light-grey);}
.timetable .label.holyday span.weekday { background-color:var(--timetable-color-red); color:var(--timetable-color-white);}
.timetable .label.currentDay span.weekday { background-color:var(--timetable-color-green); color:var(--timetable-color-white);}
.timetable .label span.day {position:relative; display:block; margin:0; padding:0.3em 0.1em; font-size:3em; line-height:1em; font-weight:bold; text-align:left;}

.timetable a:link,.timetable a:visited {display:block; text-decoration:none; padding:0.6em; font-size:0.9em; line-height:1em; text-align:left;}
.timetable a:hover,.timetable a:focus { text-decoration:none;}
.timetable a.w { color:var(--timetable-color-red);}

/* events */
ul.event { display:block; height:auto; width:100%; padding:0; margin:0; border:0; }
ul.event li { display:block; width:100%; height:auto; padding:0; margin:0; border:0;text-align:left; overflow:visible; }
ul.event li .content { position:relative; margin:0; padding:0; box-sizing:border-box; height:auto; text-align:center; border-bottom:1px solid var(--timetable-color-light-grey); }
ul.event li:last-child .content { border-bottom:0; }
ul.event li h3 { position:relative; display:block; padding:0 0 1em 0; margin:0; font-size:1.3em; line-height:1em; font-weight:700; text-align:left; }
ul.event li p { position:relative; padding:0; margin:0; font-size:1.2em; line-height:1em; text-align:left; }
ul.event li a:link,ul.event li a:visited { position:relative; display:block; padding:1em; margin:0 0 0.3em 0; height:auto; overflow:hidden; transition-duration:0.9s; }
ul.event li a:hover,ul.event li a:focus { color:var(--timetable-color-white); transition-duration:0.6s; }
ul.event li a:hover h3,ul.event li a:active h3,ul.event li a:focus h3 { color:var(--timetable-color-white); text-decoration:none; transition:all 0.8s ease-out; }
ul.event li .imgwraper { position:absolute; top:0; left:0; width:100%; height:100%; display:block; opacity:1; margin:0; padding:0; overflow:hidden; background-position:center center; background-size:cover; }
ul.event li .imgwraper:before { position:absolute; top:0; left:0; width:100%; height:100%; padding:0; overflow:hidden; display:block; content:""; z-index:0; transition:all 0.3s ease-out;}
ul.event li.is_hover .imgwraper:before { background:var(--timetable-color-dark-grey);}
ul.event li.is_hover *,ul.event li.is_hover a,ul.event li.is_hover a:before { color:var(--timetable-color-white); border-color:var(--timetable-color-white);}

/* RVD */
@media only screen and (max-width: 576px) {
 .timetable ul.head { display:none;}
 .timetable ul { display:block; }
 .timetable ul li { display:block; width:auto;}
}