@import url(https://fonts.googleapis.com/css?family=Amaranth);

body {
	width:100%;
	height:110%;
	overflow:hidden;
	margin:0;
	padding:0;
	overflow-y: scroll;
	}

#video {
	display:none;
	width:100%;
	height:100%;
	background-color:#000000;
}

.synopsis {
	padding-top:20px;
	font-family: 'Amaranth', sans-serif;
	width:60%;
	margin: 0 auto;
	z-index:-1; 
}

.hover {
	display:none;
	position:absolute;
	background-color:#718f93;
	opacity:0.3;
	top: 0; bottom: 0;
    left: 0; right: 0;
	width:100vw; 
	height: 100vh;
}

#main-piece {
	z-index:-1;
	margin-left: -9px; 
	background-color:#ffffff;
	overflow:hidden;
}

#main-piece:hover > .hover {
    display: block;
}

.play-video {
	font-size: 50px!important;
	margin-top:25%;
	margin-left:50%;
}

@media screen and (max-width: 1024px) {
.hover {
display: block;

}
.play-video {
font-size: 50px !important;
margin-top: 28%;
margin-left: 50%;
}

}

@media screen and (max-width: 768px) {

.play-video {
font-size: 50px !important;
margin-top: 55%;
margin-left: 50%;
}
}
@media screen and (max-width: 768px) {
.hover {
	display:block;
	position:absolute;
	background-color:#718f93;
	opacity:0.3;
	top: 0; bottom: 0;
    left: 0; right: 0;
	width:100vw; 
	height: 110%;
}
.synopsis {
	padding-top:20px;
	font-family: 'Amaranth', sans-serif;
	width:80%;
	margin: 0 auto;
	z-index:-1; 
}
.play-video {
font-size: 50px !important;
margin-top: 170%;
margin-left: 50%;
}

}