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;
	perspective: 10000px !important;
	height: auto;
	width: auto;
	padding: 0;
	overflow: unset;
}

.cube__side,
.no-js .cube {
	/* border: unset; */
	border: 3px solid rgba(191, 193, 201, 1);
	outline: 1px solid #fff;
	/* background-image: url(../img/c2.png); */
	font-size: small;
	background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	background-color: white;
    aspect-ratio: 1 / 1;
}

.cube--inactive .cube__side,
.no-js .cube--inactive {
	background: #e6e6e6;
}

.cube__side--front {
	position: relative;
	-webkit-transform: translateZ(3vw);
	transform: translateZ(3vw);
}

.cube__side--back {
	-webkit-transform: rotateY(180deg) translateZ(3vw);
	transform: rotateY(180deg) translateZ(3vw);
}

.cube__side--right {
	-webkit-transform: rotateY(90deg) translateZ(3vw);
	transform: rotateY(90deg) translateZ(3vw);
}

.cube__side--left {
	-webkit-transform: rotateY(-90deg) translateZ(3vw);
	transform: rotateY(-90deg) translateZ(3vw);
}

.cube__side--top {
	-webkit-transform: rotateX(90deg) translateZ(3vw);
	transform: rotateX(90deg) translateZ(3vw);
}

.cube__side--bottom {
	-webkit-transform: rotateX(-90deg) translateZ(3vw);
	transform: rotateX(-90deg) translateZ(3vw);
}


/* 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;
}

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

.js .calendar{
	padding: 0;
}

.cube{
	width: 6vw;
	height: 6vw;
	margin: 0.5vw;
}

.js .cube{
	-webkit-flex: none;
    -ms-flex: none;
    flex: none;
}

.js .cube:first-child{
	margin: 0.5vw;
}

.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;
    position: fixed;
    left: 3vw;
    bottom: 3vw;
    right: auto;
    top: auto;
    z-index: 9999;

    background: linear-gradient(90deg, rgba(10, 15, 30, 0.95) 0%, rgba(10, 15, 30, 0.6) 45%, transparent 100%);
    padding: 8px 80px 8px 16px; 
    border-left: 4px solid #58c7fa;     
    box-shadow: inset 15px 0 20px -15px rgba(88, 199, 250, 0.6);
}

.title::before {
    content: attr(data-number);
    display: inline-block;
    margin-right: 0.8em;
    color: #ff2a6d;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 42, 109, 0.6);
}

.title::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    
    background-image: radial-gradient(circle, #58c7fa 1px, transparent 1.5px);
    background-size: 6px 6px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 40%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 40%, transparent 100%);
    
    opacity: 0.7;
    z-index: -1;
}

.hologram-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
    box-sizing: border-box;
    padding: 10px;
    
    background: rgba(10, 15, 30, 0.9);
    border: 1px solid #58c7fa;
    box-shadow: inset 0 0 15px rgba(88, 199, 250, 0.2);
    color: #e0f7fa;
    font-family: 'Courier New', Courier, monospace; 
    font-size: 0.85rem;
}

.hologram-panel .panel-header {
    color: #58c7fa;
    font-weight: bold;
    border-bottom: 1px dashed #58c7fa;
    margin-bottom: 8px;
    padding-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%;
}

.hologram-panel .panel-body p {
    margin: 3px 0;
    line-height: 1.2;
}

.hologram-panel .panel-body span {
    color: #ff2a6d;
    font-weight: bold;
    margin-right: 4px;
}

@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;
	}
}