body { font-family: 'Roboto', sans-serif; margin: 0px; } .tab_content { color: #fff; text-align: center; visibility: hidden; max-width: 750px; /*margin: 0 auto;*/ padding: 10px; position: absolute; /*left: 50%; margin-left: -380px;*/ } .tab_content.current { /*display: block;*/ visibility: visible; } .schedule .tabs { list-style: none; padding-left: 0px; margin: 0px; background: rgba(69, 155, 143, 0.8); } .schedule .tabs li { width: 105px; height: 80px; display: inline-block; font-size: 14px; padding: 15px; box-sizing: border-box; cursor: pointer; } .schedule .tabs li span { font-size: 30px; display: block; } .schedule .tabs li.active { background: #459B8F; } .schedule .tabs li.active:hover { background: #459B8F; } .schedule .tabs li:hover { background: rgba(69, 155, 143, 0.6) } .schedule_content { background: rgba(0, 0, 0, 0.3); max-height: 290px; transition: max-height 2s ease; overflow-y: auto; overflow-x: hidden; text-overflow: ellipsis; /*transition-delay: 1s;*/ } .schedule.current .schedule_content { /*height: 50%; overflow-y: auto;*/ max-height: 700px; overflow-y: auto; } .schedule_item { display: none; font-size: 17px; text-align: left; text-transform: uppercase; padding: 30px 40px; } .schedule_item.active { display: block; } .schedule_item .row { padding-top: 10px; padding-bottom: 10px; } .empty-schedule { text-transform: none; text-align: center; } .schedule_item div.time_grid { /*padding-right: 10px;*/ width: 30%; font-weight: 300; color: #AAAAAA; display: inline-block; } .schedule_item div.name_grid { overflow: hidden; text-overflow: ellipsis; padding-left: 10px; width: 67%; display:inline-block; vertical-align: middle; } @media (max-width: 730px) { .tab_content { margin-top: 0px; width: auto; max-width: 100%; margin-left: auto; left: 10px; right: 10px; } .schedule .tabs li { width: 64px; height: 64px; padding: 6px; } } @media (max-width: 630px) { .schedule_item div.time_grid { width: 37%; } .schedule_item div.name_grid { width: 58%; } } @media (max-width: 530px) { .schedule_item { padding: 10px 20px; font-size: 14px; } .schedule_item div.time_grid { width: 35%; } .schedule_item div.name_grid { width: 60%; } } @media (max-width: 500px) { .schedule_item div.time_grid { width: 40%; } .schedule_item div.name_grid { width: 55%; } } @media (max-width: 400px) { .schedule_item div.time_grid { width: 95%; } .schedule_item div.name_grid { width: 95%; } }