@font-face {
    font-family: 'Digital';
    src: url('../fonts/digital-7-webfont.woff2') format('woff2'),
         url('../fonts/digital-7-webfont.woff') format('woff'),
         url('../fonts/digital-7-webfont.ttf') format('truetype'),
         url('../fonts/digital-7-webfont.svg#digital-7_monomono') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
	font-family: 'DIN Condensed';
	src: url('../fonts/din-condensed.eot');
	src: url('../fonts/din-condensed.woff') format('woff'), 
		 url('../fonts/din-condensed.ttf') format('truetype'), 
		 url('../fonts/din-condensed.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}


body { margin:0; padding:0; font-family:'DIN Condensed',Sans-Serif; height:100%; background: #000; }
html { height:100%; }


#lego-batman-container { position: relative; background: #000; height: calc(100% - 160px); }
#lego-batman-container.fullscreen { height: 100%; }
#lego-batman {  width:100%; min-width: 300px; max-width:1600px; position: relative; overflow:hidden; }
#lego-batman * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); }

@media (max-height: 600px) {
	#lego-batman-container { height:500px; }
}

#lego-batman ul { padding:0; margin:0; }
#lego-batman li { padding:0; margin:0; list-style:none; }
#lego-batman a, #lego-batman a:focus, #lego-batman button:focus  { outline: 0; }
#lego-batman input::-moz-focus-inner { border: 0;  }

#lego-batman-view { display:block; width:100%; height:auto; }
#debug { display:block; position:absolute; top:0; left:0; pointer-events: none; }
#lego-batman progress { display:none; }

#click-trap { display:none; width:100%; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); }
#code-panel { display:none; font-family:Helvetica, Arial, sans-serif; padding:40px; background:#fff; position:absolute; width:40%; height:40%; left:50%; margin-left:-20%; top:50%; margin-top:-15%; }
#code-panel h2 { margin:0; text-transform:uppercase; }
#code-panel input { margin-top:20px; width:100%; font-size:25px; }
#code-panel button { width:40%; font-size:25px; float:right; margin-top:20px; text-transform:uppercase;
	background-color:#949494;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	-webkit-appearance:none;
	border:0;
}
#code-panel button:hover {
	background-color:#7a7a7a;
}
#code-panel button:active {
	position:relative;
	top:1px;
}

#lego-batman-video { display:none; }

#not-supported { position:absolute; top:0; left:0; right:0; bottom:0; background:#383838; color: #fcd900; text-align:center; display:none; }
#not-supported.show { display:block; }
#not-supported-content { display:table; width:100%; height:100%; }
#not-supported-content span { display:table-cell; vertical-align:middle; width:100%; height:100%; }

#rotate-device { position:absolute; top:0; left:0; right:0; bottom:0; background:#383838; display:none; }
#rotate-device.show { display:block; }
#rotate-device #rotate-device-icon { background:url(../images/rotate-device.png) no-repeat center top; width:120px; height:120px; position:absolute; top:40%; left:50%; margin-left:-60px; margin-top:-70px; text-align: center; color: #fcd900; padding-top: 150px; font-size:12px; }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
	#rotate-device #rotate-device-icon { background:url(../images/rotate-device@2x.png) no-repeat; background-size:contain; }
}
#rotate-device .close {
    background: url(../images/close.png) no-repeat;
    background-size: 100% auto;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 20px;
    right: 30px;
	cursor:pointer;
}
#rotate-device .close:hover,
#rotate-device .close:active {
    background-position: bottom left
}

#lego-batman #footer { display:none; }
#lego-batman #footer .music {
    width: 26px;
    height: 12px;
    font-size: 0;
    position: absolute;
    bottom: 10px;
	left:20px;
    z-index: 300;
}
#lego-batman #footer .music span {
    display: block;
    width: 2px;
    height: 2px;
    background-color: #ffffff;
    margin-right: 2px;
    position: absolute;
    bottom: 0
}
#lego-batman #footer .music span:last-child {
    margin-right: 0
}
#lego-batman #footer .music:hover span {
    background-color: #FFF
}
#lego-batman #footer .music.paused span {
    animation: none!important;
    background-color: #bc8c0a
}
#lego-batman #footer .music span:nth-child(1) {
    height: 4px;
    left: 0;
    animation: musicBar1 1.04s infinite
}
#lego-batman #footer .music span:nth-child(2) {
    height: 8px;
    left: 4px;
    animation: musicBar2 1.43s infinite
}
#lego-batman #footer .music span:nth-child(3) {
    height: 12px;
    left: 8px;
    animation: musicBar3 1326ms infinite
}
#lego-batman #footer .music span:nth-child(4) {
    height: 8px;
    left: 12px;
    animation: musicBar4 1456ms infinite
}
#lego-batman #footer .music span:nth-child(5) {
    height: 12px;
    left: 16px;
    animation: musicBar5 1183ms infinite
}
#lego-batman #footer .music span:nth-child(6) {
    height: 8px;
    left: 20px;
    animation: musicBar6 1552ms infinite
}
#lego-batman #footer .music span:nth-child(7) {
    height: 4px;
    left: 24px;
    animation: musicBar7 1.05s infinite
}


#lego-batman #footer {
    font-size: 11px;
    color: #FFF
}
#lego-batman #footer a {
    color: #878787;
	text-decoration:none;
}
#lego-batman #footer .primary-links {
    position: absolute;
    z-index: 100;
    right: 20px;
    bottom: 10px
}
#lego-batman #footer .primary-links li {
	display:inline-block;
}
#lego-batman #footer .primary-links a {
    margin: 0 .5em;
    color: #FFF;
	text-transform:uppercase;
}
.no-touchevents #lego-batman #footer .primary-links a:hover,
.touchevents #lego-batman #footer .primary-links a:active {
    color: #f7ca2c
}
@media (max-width: 659px) {
	#lego-batman {padding-bottom:30px; }
    #lego-batman #footer .primary-links {
        text-align: center;
        width: 100%;
        bottom: 0;
        right: 0;
        height:30px;
        line-height: 30px;
        padding-bottom: 0;
        background-color: #000
    }
	#lego-batman #footer .music { bottom:38px; z-index:100; } 
	
}
#lego-batman #footer .drawer {
    padding: 30px 30px 0;
    text-align: center;
    background-color: #000;
    width: 100%;
    position: absolute;
    bottom: -150%;
    z-index: 200;
	transition:bottom 0.6s cubic-bezier(0.46, 0.03, 0.52, 0.96);
	-webkit-text-size-adjust: none;
}
#lego-batman #footer .drawer.open {
	bottom: 0;
}
#lego-batman #footer .drawer .close {
    background: url(../images/close.png) no-repeat;
    background-size: 100% auto;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 20px;
    right: 30px;
	cursor:pointer;
}
#lego-batman #footer .drawer .close:hover,
#lego-batman #footer .drawer .close:active {
    background-position: bottom left
}
#lego-batman #footer .drawer .rating {
    margin: 1em 0 0
}
#lego-batman #footer .drawer .secondary-links {
    margin: 1em 0;
}
#lego-batman #footer .drawer .secondary-links li {
	display:inline-block;
}
#lego-batman #footer .drawer .secondary-links a {
    margin: 0 .5em;
	text-transform:uppercase;
}


.lego-batman-billing { width:100%; height:auto; }


	.lb-copyright {
	    font-size: 8px;
	}


@media (max-width: 500px) {
	
	#lego-batman #footer .drawer {
		padding: 30px 5% 0;
	}
	#lego-batman #footer .drawer .close {
		right: 5%;
	}
	.lb-copyright {
	    font-size: 8px;
	}
}


@keyframes musicBar1 {
    0%, 100% {
        height: 4px
    }
    21% {
        height: 6px
    }
    53% {
        height: 2px
    }
    85% {
        height: 7px
    }
}
@keyframes musicBar2 {
    0%, 100% {
        height: 8px
    }
    21% {
        height: 4px
    }
    53% {
        height: 12px
    }
    85% {
        height: 2px
    }
}
@keyframes musicBar3 {
    0%, 100%, 50% {
        height: 12px
    }
    25% {
        height: 6px
    }
    75% {
        height: 5px
    }
}
@keyframes musicBar4 {
    0%, 100% {
        height: 8px
    }
    25% {
        height: 11px
    }
    50% {
        height: 5px
    }
    75% {
        height: 12px
    }
}
@keyframes musicBar5 {
    0%, 100% {
        height: 12px
    }
    25% {
        height: 3px
    }
    50% {
        height: 10px
    }
    75% {
        height: 4px
    }
}
@keyframes musicBar6 {
    0%, 100% {
        height: 8px
    }
    25% {
        height: 11px
    }
    50% {
        height: 5px
    }
    75% {
        height: 9px
    }
}
@keyframes musicBar7 {
    0%, 100% {
        height: 4px
    }
    25% {
        height: 7px
    }
    50% {
        height: 2px
    }
    75% {
        height: 6px
    }
}