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


#lightbox{color: #1c2d3f;}
#lightbox{max-width: 500px;}
.fancybox-caption{display: none;}
.fancybox-container .fancybox-bg{background: #1c2d3f;}

.cube__side,
.no-js .cube {
	border: 3px solid #fff;
	outline: 1px solid #fff;
	background: #f0f0f0 url(../img/c1.png) no-repeat center center;
}

.cube:not(.cube--inactive):nth-child(2n) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(2n) {
	background-image: url(../img/c2.png);
}

.cube:not(.cube--inactive):nth-child(3n) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(3n) {
	background-image: url(../img/c3.png);
}

.cube:not(.cube--inactive):nth-child(4n) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(4n) {
	background-image: url(../img/c4.png);
}

.cube:not(.cube--inactive):nth-child(5n) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(5n) {
	background-image: url(../img/c5.png);
}

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

.video{
    position: relative;
    max-width: 80%;
    padding-bottom: 45%; /* 16:9 */
    height: 0;
}

.video iframe{
      position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.logo{background: url(../img/log.svg) no-repeat center center; z-index:99999999!important; width: 280px; height: 120px; position: fixed; top: 20px; left: 20px; background-size: contain;}

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

.ho{width: 1200px; height: 1200px; position: fixed; opacity: 0.05;}
.ho.h1{left: -30%; bottom: -30%;animation: move1 40s infinite linear;}
.ho.h2{right: -30%; top: -30%;animation: move2 40s infinite linear;}
.ho div{position: absolute; width: 100%; height: 100%; background: url(../img/house.svg) no-repeat center center; background-size: contain;}
.ho.h1 div{animation: turner1 40s infinite linear;}
.ho.h2 div{animation: turner2 40s infinite linear;}

@keyframes turner1{
    0%{  transform: rotate(0deg) }
    100%{  transform: rotate(-1080deg)}
}
@keyframes move1{
    0%, 100%{  transform: translateX(0%) translateY(0%) }
    25%{  transform: translateX(130%) translateY(10%)}
    50%{  transform: translateX(110%) translateY(-100%)}
    75%{  transform: translateX(0%) translateY(-90%)}
}

@keyframes move2{
    0%, 100%{  transform: translateX(0%) translateY(0%) }
    25%{  transform: translateX(-130%) translateY(10%)}
    50%{  transform: translateX(-110%) translateY(100%)}
    75%{  transform: translateX(0%) translateY(90%)}
}

@keyframes turner2{
    0%{  transform: rotate(0deg)}
    100%{  transform: rotate(1800deg)}
}

@media screen and (max-width: 100em) {
  .logo{width: 200px; height: 85px;}
}

@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;
	}
	.video{
    position: relative;
    max-width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.logo{width: 140px; height: 60px; position: fixed; bottom: 20px; right: 20px; left: auto; top: auto; background-size: contain;}

}