body { font-family: 'Roboto', sans-serif; margin: 0px; } .tab_content { color: #fff; text-align: center; visibility: hidden; max-width: 750px; /*margin: 0 auto;*/ margin-bottom: 140px; 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(170, 170, 170, 0.9); } .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: rgba(150, 150, 150, 0.9); } .schedule .tabs li.active:hover { background: rgba(170, 170, 170, 0.9); background: #aaa } .schedule .tabs li:hover { background: rgba(160, 160, 160, 0.7); } .schedule_content { background: rgba(53, 53, 53, 0.9); max-height: 0px; transition: max-height 2s ease; overflow-y: auto; overflow-x: hidden; text-overflow: ellipsis; /*transition-delay: 1s;*/ } .schedule.current .schedule_content { max-height: 300px; } .schedule_content table { opacity: 0; /*transition: all 1s ease;*/ } .schedule.current .schedule_content table { opacity: 1; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .schedule_item { display: none; font-size: 17px; text-align: left; text-transform: uppercase; padding: 10px 30px; } .schedule_item.active { display: block; } .schedule_item .time_grid { font-weight: 300; color: #AAAAAA; } .schedule_item .time_grid div { /*padding-right: 10px;*/ width:120px; } .schedule_item .name_grid div { /*padding-right: 10px;*/ overflow: hidden; text-overflow: ellipsis; } .schedule_item .name_grid { padding-left: 10px; } .schedule_item h4 { margin: 10px 0px; font-weight: 400; overflow: hidden; text-overflow:ellipsis; overflow-x: hidden; } .weekly-schedule-widget-footer { border-top: 1px solid #aaaaaa; text-align: right; padding: 4px 16px; background: rgba(53, 53, 53, 0.9); } .weekly-schedule-widget-footer a { color: #fff; text-decoration: none; } .weekly-schedule-widget-footer span { color: #ff5d1a; } @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: 520px) { .schedule_item { padding: 0px 10px; } .schedule_item .time_grid, .schedule_item .name_grid { font-size: 14px; } }