@import "../components/Headers/defaultHeader.css";
@import "../components/4-cell-grid.css";
@import "../components/team-grid.css";

#time-table .five-col-grid {
    border-radius: 1.302vw; /*25*/
    box-shadow: 1px 1.732px 75px 0px rgba(0, 0, 0, 0.08);
}
#time-table .five-col-grid .cell {
    border-right: 1px solid var(--color-off-gray);
    padding-bottom: 1.563vw; /*30*/
}
#time-table .five-col-grid .cell:last-of-type {
    border-right: 0;
}
#time-table .day h3 {
    border-bottom: 1px solid var(--color-off-gray);

    padding: 2.083vw; /*40*/
    margin: 0;
}
#time-table .five-col-grid p,
#time-table .five-col-grid a {
    margin: 0;
    width: 100%;
}

#time-table .address {
    background: #f8e8c8;
    height: 11.458vw; /*220*/
    min-height: 160px;
    padding: 1em;
}

.course-info {
    border-radius: 1.042vw; /*20*/
    padding: 1em;
    margin: 1em;
    height: 9.375vw; /*180*/
    min-height: 140px;
}
.entrenamiento-course {
    background-color: #ffad71;
}
.beginners-course {
	background-color: #caffbc;
}
.fundamental-course {
    background-color: #ff6dc3;
}
.private-course {
	background-color: #f0c7c7;
}
.intermediate-course {
    background-color: #92c5ff;
}
.deepening-course {
	background-color: #fe9393;
}
.monthly-course {
	background-color: #cd9bff;
}
.sunday-course {
	background-color: #ffe12b;
}

p.course-name, 
p.course-time {
    font-family: var(--text-font-semibold);
}

#time-table .five-col-grid p.course-teacher {
    line-height: 1.2;
    margin-top: 5px;
    font-family: var(--text-font-medium);
}
#time-table .five-col-grid p.course-name-info {
    font-family: var(--text-font-semibold);
    margin-bottom: 5px;
}
.scroll-down-arrow {
    bottom: -5.208vw; /*-100*/
    left: 50%;
    -webkit-transform: translatex(-50%);
    transform: translatex(-50%);
}

/* Big Laptops - Ok until 1441 px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1690px) {
    .scroll-down-arrow {
        zoom: 0.9;
    }
}

/* Standard Laptops - Ok until 1281px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1440px) {
    .scroll-down-arrow {
        zoom: 0.8;
    }
}

/* Small Laptops - Ok until 1150px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1280px) {
    .scroll-down-arrow {
        zoom: 0.7;
        bottom: -9vw;
    }
    .course-info {
        padding: 0.5em;
        margin: 0.5em;
    }
}

/* Small Laptops - Ok until 993px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1150px) {
    .scroll-down-arrow {
        zoom: 0.6;
        bottom: -10vw;
    }
}

/* Mobile Start ok until 768px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 992px) {
    #time-table {
        max-width: 100%;
        padding-left: 2em;
        padding-right: 2em;
    }
    #time-table .five-col-grid {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    #time-table .five-col-grid .cell {
        padding-bottom: 0;
    }

    #time-table .day h3 {
        font-size: 20px;
        padding: 1em 0.5em;
    }
    #time-table .five-col-grid p, 
    #time-table .five-col-grid a {
        font-size: 11px;
    }
    #time-table .address {
        padding: 10px;
        min-height: 180px;
    }
    .course-info {
        margin: 0;
        margin-top: 1px;
        padding: 10px;
        min-height: 180px;
        border-radius: 0;
    }
    .scroll-down-arrow {
        bottom: -15vw;
    }
    #teachers-contacts .apply-pad {
        padding: 0;
    }
}

/* Mobile Landscape
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
    #time-table .five-col-grid {
        overflow-x: scroll;
        overflow-y: hidden;
        display: flex;
        flex-flow: nowrap;
    }
    #time-table .five-col-grid .cell {
        min-width: 200px;
    }
    .scroll-down-arrow {
        bottom: -108px;
    }
}

/* Mobile port
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 600px) {

}