/*  VARIABLES */
:root {
    --col-dark:   rgb( 45, 45, 47);
    --col-red:    rgb(182, 72, 45);
    --col-orange: rgb(234,175, 95);
    --col-yellow: rgb(246,223,119);
    --col-blue:   rgb( 94,132,109);
    --col-shadow: rgb(104, 73, 42);
    --col-ocre:   rgb(158,131, 78);
    --col-cream:  rgb(219,198,169);
    --col-clear:  rgb(246,240,226);
    --col-white:  rgb(252,250,245);
    --col-cyan:   rgb( 31, 84,150);
}
/* VARIABLES */

/* CALENDAR */
/* ----- Calendar ----- */
section.grid-cont-1-m-1{
    display: grid;
    position: relative;
    perspective-origin: 50% 50%;
    grid-template-columns: 25% auto 25%;
    grid-template-areas: "left main right";
    padding: 20px 20px 30px 20px;
    perspective: 50vw;
    overflow: hidden;
}
.calendar-cont{
    display: grid;
    grid-template-rows: 120px auto auto;
    border: 2px solid var(--col-dark);
    box-shadow: 0 10px 20px rgba(0,0,0, 0.6);
}
.calendar-cover{
    background-color: var(--col-dark);
    color: var(--col-white);
    text-align: center;
    display: grid;
    vertical-align: middle;
}
.calendar-cover p{
    font-size: 24px;
    margin: 8px 0;
    vertical-align: bottom;
}
.calendar-weekdays{
    background-color: var(--col-blue);
    color: var(--col-white);
    display: grid;
    grid-template-columns: repeat(1fr, 7);
    grid-template-areas: "day-mo  day-tu  day-we  day-th  day-fr  day-sa  day-su ";
}
.calendar-table,
.calendar-weekdays,
.calendar-cover {
    align-items: center;
}
.calendar-table p { 
    padding: 3px;
    margin: 11px 0 0 0;
    height: 29px;
    font-size: 24px;
}
.calendar-table > div:hover{ 
    border: 1px solid var(--col-dark);
    transform: translateZ(20px);
    box-shadow: 0 3px 10px rgba(0,0,0, 0.6);
}
.calendar-table > div:hover p{ 
    transform: scale(1.3);
    font-weight: bold;
}
.calendar-table > div, .calendar-weekdays > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
}
.calendar-table{
    background-color: var(--col-shadow);
    display: grid;
    grid-template-rows: repeat(1fr, 5);
    grid-template-columns: repeat(1fr, 7);
    grid-template-areas: "cal-1-1 cal-2-1 cal-3-1 cal-4-1 cal-5-1 cal-6-1 cal-7-1"
                         "cal-1-2 cal-2-2 cal-3-2 cal-4-2 cal-5-2 cal-6-2 cal-7-2"
                         "cal-1-3 cal-2-3 cal-3-3 cal-4-3 cal-5-3 cal-6-3 cal-7-3"
                         "cal-1-4 cal-2-4 cal-3-4 cal-4-4 cal-5-4 cal-6-4 cal-7-4"
                         "cal-1-5 cal-2-5 cal-3-5 cal-4-5 cal-5-5 cal-6-5 cal-7-5";
}
.calendar-table > div{ 
    background-color: var(--col-white);
}
div[class|="cal-6"], div[class|="cal-7"]{
    background-color: var(--col-cream);
}
div.today{
    background-color: var(--col-cyan);
    color: var(--col-white);
    font-size: 24px;
}
div.current-day{
    background-color: var(--col-red);
    color: var(--col-white);
    font-size: 24px;
}
div.current-day p{
    margin: 11px 0 0 0;
    height: 29px;
}
div.selected-day{
    background-color: var(--col-red);
    color: var(--col-white);
}
/* ----- Calendar ----- */

/* ----- Triptic ----- */
.calendar-previous, .calendar-next{
    width: calc(203.65% + 66.81px);
    transition-duration: .4s;
}
.calendar-next{
    position: absolute;
    right: 0%;
    transform: translateZ(-180px) translateX(12%) scaleX(0.85);
}
.calendar-previous{
    transform: translateZ(-180px) translateX(-12%) scaleX(0.85);
}
.calendar-main{
    z-index: 2;
    display: static;
    box-shadow: 0 20px 40px rgba(0,0,0, 0.6);
    transition-duration: .4s;
}
/* ----- Triptic ----- */

/* ----- Responsive ----- */
@media screen and (max-width: 1100px){
    .calendar-previous, .calendar-next{
        display: none;
    }
    .calendar-main{
        transform: translateX(0px);
    }
}
/* ----- Responsive ----- */
/* CALENDAR */

/* TIMETABLE */
/* ---------- Main ---------- */
.grid-cont-week{
    display: grid;
    padding: 0 0px;
    margin: 0 60px 20px 60px;
    border: 1px solid var(--col-dark);
    box-shadow: 0px 1px 5px rgba(0,0,0, .5);
    background-color: var(--col-white); 
    grid-template-columns: 90px 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 50px auto 40px auto;
    grid-template-areas: "week-week       week-mon      week-tue      week-wed      week-thu      week-fri      week-sat"
                         "week-timetable  week-mon-sch  week-tue-sch  week-wed-sch  week-thu-sch  week-fri-sch  week-sat-sch"
                         "week-timetable  week-mon-sch  week-tue-sch  week-wed-sch  week-thu-sch  week-fri-sch  week-sun"
                         "week-timetable  week-mon-sch  week-tue-sch  week-wed-sch  week-thu-sch  week-fri-sch  week-sun-sch";
}
.grid-cont-week > div{
    justify-items: center;
    align-items: center;
    text-align: center;
    border: 1px solid var(--col-shadow);
}
/* ---------- Main ---------- */

/* ---------- Timetable ---------- */
.grid-cell-week{
    background: var(--col-dark);
    color: var(--col-cream);
    font-size: 30px;
    font-weight: bold;
}
.grid-cell-week > div{
    padding: 8px
}
.grid-cell-day{
    background: var(--col-dark);
    color: var(--col-cream);
    display: grid;
    font-weight: bold;
    grid-template-columns: 1fr 60px;
}
.day-n{
    font-size: 30px;
    text-align: end;
    color: var(--col-white);
}
.grid-cont-timetable, .grid-cont-hours{
    display: grid;
    grid-template-rows: repeat(1fr, 20);
    perspective: 400px;
}
.grid-cont-timetable > div:nth-child(even), .grid-cont-hours > div:nth-child(even){
    border-bottom: 1px solid rgba(0,0,0, .3);
}
.grid-cont-timetable > div, .grid-cont-hours > div{
    height: 20px;
    width: 100%;
    transition-duration: .05s;
}
.grid-cont-timetable p, .grid-cont-hours p{
    margin: 0;
    padding: 4px 15px;
    font-size: 16px;
}
.grid-cont-timetable p{
    visibility: hidden;
}
#week-sat-timetable, #week-sun-timetable{
    background-color: var(--col-cream);
}
/* ---------- Timetable ---------------- */

/* ---------- Current day ---------- */
.current-day{
    background-color: var(--col-red);
}
.current-timetable{
    background-color: var(--col-orange);
}
/* ---------- Current day ---------- */

/* ---------- Hovers ---------------- */
.grid-cont-hours > div:hover{
    background-color: var(--col-blue);
    transform: translateZ(5px);
    border: .5px solid var(--col-shadow);
    box-shadow: 0px 1px 5px rgba(0,0,0, .3);
}
.grid-cont-timetable > div:hover, .time-cell-over{
    background-color: var(--col-red);
    transform: translateZ(5px);
    border: .5px solid var(--col-shadow);
    box-shadow: 0px 1px 5px rgba(0,0,0, .3);
}
/* ---------- Hovers ---------------- */
/* TIMETABLE */