:root {--blue:#112033;
--light: #d1d5db;
--light2: #c8cdd4;
}
table#cronograma{
  font-family:sans-serif;
		  width: 100%;
		  border-spacing: 0;
	  	border-collapse: separate;
		  table-layout: fixed;
		  margin-bottom: 50px;
}
table#cronograma thead tr th{
	background: var(--blue);
	color: var(--light);
	padding: 0.5em;
	overflow: hidden;
	text-align:center;
}


table#cronograma thead tr th .day{
		display: block;
		font-size: 1.2em;
		border-radius: 50%;
		width: 30px;
		height: 30px;
		margin: 0 auto 5px;
		padding: 5px;
		line-height: 1.8;
}
table#cronograma thead tr th .active{
		background: var(--light);
		color: var(--blue);
}


table#cronograma thead tr th .short{
		display: none;
}

table#cronograma thead tr th i{
	vertical-align: middle;
		font-size: 2em;
}


table#cronograma tbody tr{
	background: var(--light);
}

	table#cronograma tbody tr:nth-child(odd){
			background:var(--light2);
	}
	table#cronograma tbody tr:last-of-type{
		
					border-bottom:1px solid var(--blue);
			}
		
		table#cronograma tbody tr td{
		text-align: center;
		vertical-align: middle;
		border-left: 1px solid var(--blue);
		position: relative;
		height: 35px;
		cursor: pointer;
		}
		table#cronograma tbody tr:last-of-type{
				border-right:1px solid var(--blue);
		}
		table#cronograma tbody tr td.hour{
						          font-size: 2em;
						          padding: 0;
						          color: var(--blue);
						          background:#fff;
					          	border-bottom:1px solid var(--blue);
						          border-collapse: separate;
						          min-width: 100px;
						          cursor: default;
		}
		table#cronograma tbody tr td.hour			span{
							            display: block;

	          					}
					        
				      
  		@media(max-width:60em){

    		table#cronograma	thead tr th .long{
						          
							            display: none;
						          }

          						table#cronograma	thead tr th .short{
							            display: block;
						          }

        				
				      
			    

				table#cronograma tbody  tr td.hour  span{
							           
								              transform:rotate(270deg);
              								-webkit-transform:rotate(270deg);
             								 -moz-transform:rotate(270deg);
							            }
						          
        		
				      
			    
		  }

	  	@media(max-width:27em){
    		table#cronograma	thead tr  th{
								  font-size: 65%;
			}
			table#cronograma	thead tr  th       .day{
									 display: block;
							            font-size: 1.2em;
							            border-radius: 50%;
							            			width: 20px;
							            height: 20px;
							            margin: 0 auto 5px;
							            padding: 5px;
			}
			table#cronograma	thead tr  th  .day.active{
							              	background: var(--light);
								              color: var(--blue);
							            }
						          
					        
				      }
			    
				table#cronograma  tbody   tr  td.hour{
										font-size: 1.7em;
								  }

			@media(max-width:992px) {
				table#cronograma  tbody  tr td.hour  span{
					transform:translateY(16px) rotate(270deg);
-webkit-transform:translateY(16px) rotate(270deg); 
-moz-transform:translateY(16px) rotate(270deg);
				  }
			}