.frame
	.agenda
		.date
			.slide
				p.day Friday
				p.number 15
		.date
			.slide
				p.day Saturday
				p.number 16
		.date
			.slide
				p.day Sunday
				p.number 17
		.date
			.slide
				p.day Monday
				p.number 18

// delete the following line if no text is used
// edit the line if you wanna use other fonts
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

body {
	background: #8C9EFF;
}

// use only the available space inside the 400x400 frame
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: #fff;
  color: #eee;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.agenda {
  display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: 100%;
	background: #536DFE;
	
	.date {
		width: 50%;
		height: 50%;
		display:flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
			
		&:hover {
			.slide {
				animation-name: flip;
				animation-duration: 0.75s;
			}
		}
		
		.slide {
			width: 100%;
			height: 100%;
			background: #304FFE;
			transition: 200ms;
			display:flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			
			p {
				margin: 0;
			}
			
			.number {
				font-size: 60px;
				font-weight: bold;
			}
		}
	}
}


@keyframes flip {
	0%, 100% {
		transform: scale(1, 1) scaleX(1);
		box-shadow: 0;
	}
	50% {
		transform: scale(0.8, 0.8) scaleX(0);
		box-shadow: inset 0 0 50px #304FFE;
	}
}