@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,800,700);
@import url("normalize.css");
@import url("grid.css");
@import url("modal.css");


.fullscreen-video {
	display: none;
	visibility: visible;
	position: absolute; 
	left: 0;
	right: 0; 
	top: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	margin: auto;
	z-index: 0;
        height: 100%;
}

@media ( min-width: 1200px ) {
	
	.fullscreen-video  {
		display: initial;
                white:100%;
                height: 100%;
                 visibility: visible;
	}
	
/*	.ueno-no-video .fullscreen-video,
	.ueno-no-video .hero-overlay {
		display: initial;
                visibility: visible;
	}*/

}


@media (min-width: 300px) and (max-width: 1199px) {
	
	.fullscreen-video  {
		display: initial;
                white:100%;
                height: 100%;
                 visibility: visible;
	}
	
/*	.ueno-no-video .fullscreen-video,
	.ueno-no-video .hero-overlay {
		display: initial;
                visibility: visible;
	}*/

}


.loaded .fullscreen-video {
	visibility: visible;
        height: 100%;
}

.modal-video {
	background: #000;
        height: 100%
}

@media ( max-width: 767px ) {
	.modal-video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		opacity: 0;
	}
	
	.modal-video.active {
		opacity: 1;
		z-index: 100;
	}
	
	.modal-video video {
		position: absolute;
		width: 100%;
		height: 300px;
		top: 50%;
		margin: -150px auto 0;
		background: #000;
	}
}

@media ( min-width: 768px ) {
	.modal-video {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 100%;
		z-index: 4;
		visibility: visible;
		opacity: 0;
		-webkit-transition: visibility .5s, opacity .5s;
		transition: visibility .5s, opacity .5s;
	}

	.modal-video.active {
		opacity: 1;
		visibility: visible;
	}


	 .modal-video .video-player video {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		margin: auto;
		min-width: 100%;
		min-height: 100%;
	}

}

@media ( min-width: 768px ) and ( max-aspect-ratio: 4/3 ) {

	.modal-video .video-player video {
		width: 100%;
                height: 100%;
		height: auto;
		min-height: 0;
		min-width: 0;
	}

}
