#workshops {
	max-width: 800px;
	margin: auto;
	text-align: center;

	.ws_title {
		border-bottom: 2px solid $col_main_1;
		margin-bottom: 1em;
	}
	
	#ws_data .ws_list {
		.ws_item {
			color: $col_main_1;
			background: $gray-400;
			border-radius: 3px;
			margin-bottom: 1em;
			margin-right: 1em;
			width: 100px;
			height: 100px;
			display: inline-block;
			overflow: hidden;
			position: relative;
			
			&:not(.opened):hover {
				background: $col_main_2;
				color: $gray-300;
			}
		
			span {
				display: inline-block;
				text-align: center;
				width: 100%;
				
				&.title {
					border-bottom: 1px solid $gray-300;
					font-weight: bold;
				}
			
				&.previous {
					display: none;
				}
			}
		
			.courses {
				display: none;
				width: 100%;
				text-align: left;
			}
		
			&.opened {
				width: auto;
				height: auto;
				
				span.title {
					color: $gray-300;
					background: $col_main_1;
				}
			
				span.previous {
					display: block;
					position: absolute;
					top: 0;
					left: 5px;
					width: auto;
					color: $gray-300;
					
					&:hover {
						color: $col_main_2;
					}
				}
				
				span.dates {
					display: none;
				}
				
				.courses {
					display: inline-block;
					
					.course {
						border-bottom: 1px solid $gray-300;
						padding: 1em;

						&:last-child {
							border-bottom: none;
						}
					
						&:hover {
							background: $col_main_2;
							color: $gray-300;
						}
					}
				}
			}
		}
	} 
}