body {
	background: #cc0019;
	color: #fceeb8;
	font-family: 'BioRhyme', serif;
}

a {
	color: #fff;
}

a:hover,
a:focus {
	color: #fceeb8;
}

.codrops-header {
	background: none;
}

.codrops-header__tagline,
.codrops-demos,
.content__description,
.content__meta {
	font-family: 'Roboto Condensed', sans-serif;
}

.codrops-demos a.current-demo {
	color: #fceeb8;
}

.calendar {
	-webkit-perspective: 2500px;
	perspective: 2500px;
}

.cube__side,
.no-js .cube {
	border: 1px solid #234358;
	outline: 1px solid #cb9749;
	background: #234358 url(../img/avvento-01.png) no-repeat center center;
}

.cube:not(.cube--inactive):nth-child(2n) .cube__side{
	background-image: url(../img/avvento-02.png);
}

.cube:not(.cube--inactive):nth-child(3n) .cube__side{
	background-image: url(../img/avvento-03.png);
}

.cube:not(.cube--inactive):nth-child(4n) .cube__side{
	background-image: url(../img/avvento-04.png);
}

.cube:not(.cube--inactive):nth-child(5n) .cube__side{
	background-image: url(../img/avvento-05.png);
}

.cube:not(.cube--inactive):nth-child(6n) .cube__side{
	background-image: url(../img/avvento-06.png);
}

.cube:not(.cube--inactive):nth-child(7n) .cube__side{
	background-image: url(../img/avvento-07.png);
}
.cube:not(.cube--inactive):nth-child(8n) .cube__side{
	background-image: url(../img/avvento-08.png);
}
.cube:not(.cube--inactive):nth-child(9n) .cube__side{
	background-image: url(../img/avvento-09.png);
}
.cube:not(.cube--inactive):nth-child(10n) .cube__side{
	background-image: url(../img/avvento-10.png);
}
.cube:not(.cube--inactive):nth-child(11n) .cube__side{
	background-image: url(../img/avvento-11.png);
}
.cube:not(.cube--inactive):nth-child(12n) .cube__side{
	background-image: url(../img/avvento-12.png);
}
.cube:not(.cube--inactive):nth-child(13n) .cube__side{
	background-image: url(../img/avvento-13.png);
}
.cube:not(.cube--inactive):nth-child(14n) .cube__side{
	background-image: url(../img/avvento-14.png);
}
.cube:not(.cube--inactive):nth-child(15n) .cube__side{
	background-image: url(../img/avvento-15.png);
}
.cube:not(.cube--inactive):nth-child(16n) .cube__side{
	background-image: url(../img/avvento-16.png);
}
.cube:not(.cube--inactive):nth-child(17n) .cube__side{
	background-image: url(../img/avvento-17.png);
}
.cube:not(.cube--inactive):nth-child(18n) .cube__side{
	background-image: url(../img/avvento-18.png);
}
.cube:not(.cube--inactive):nth-child(19n) .cube__side{
	background-image: url(../img/avvento-19.png);
}
.cube:not(.cube--inactive):nth-child(20n) .cube__side{
	background-image: url(../img/avvento-20.png);
}
.cube:not(.cube--inactive):nth-child(21n) .cube__side{
	background-image: url(../img/avvento-21.png);
}
.cube:not(.cube--inactive):nth-child(22n) .cube__side{
	background-image: url(../img/avvento-22.png);
}
.cube:not(.cube--inactive):nth-child(23n) .cube__side{
	background-image: url(../img/avvento-23.png);
}
.cube:not(.cube--inactive):nth-child(24n) .cube__side{
	background-image: url(../img/avvento-24.png);
}
.cube:not(.cube--inactive):nth-child(25n) .cube__side{
	background-image: url(../img/avvento-25.png);
}







.cube--inactive .cube__side,
.no-js .cube--inactive {
	background-image: url(../img/avvento.png);
	
	/*background: #cb9749;*/
}


/* With JS we insert a number span into the cube */

.cube__number,
.no-js .cube::after {
	font-weight: 700;
	color: #cc0019;
	background: #fff;
	width: 100%;
	text-align: center;
	top: 50%;
	height: 1.5em;
	line-height: 1.5;
	bottom: auto;
	margin: -0.75em 0 0;
	opacity: 0;
}

.cube--inactive .cube__number,
.no-js .cube--inactive::after {
	color: #cac9c9;
}

.js .content__block {
	width: 100%;
	padding: 0 5vw 0 20vw;
}

.js .content__description {
	padding: 0 0 0 4vw;
}

.content__number {
	color: #000;
	font-weight: bold;
	line-height: 0.5;
	letter-spacing: -0.175em;
	font-size: 30vw;
	left: -5vw;
	bottom: 8vh;
}

.content__title {
	font-size: 6vw;
}

.title {
	color: #fceeb8;
	right: auto;
	left: 3vw;
}

@media screen and (max-width: 50.75em) {
	.js .content__block {
		padding: 4em 2em 0;
		-webkit-justify-content: flex-start;
		-ms-flex-pack: start;
		justify-content: flex-start;
	}
	.content__number {
		bottom: 30vh;
	}
}