body {
	text-align: center;
	padding-top:15px;
	overflow-y:scroll;
	border-top:2px solid crimson;
}
h1 {
	font-family: 'Raleway', sans-serif;
	font-size: 20px;
	margin:0;
	text-align: center;
	margin:15px 0;
	min-height: 50px;
	text-decoration: none;
	color:purple;
	display:flex;
	justify-content: center;
	align-items:center;
	transition:.3s all ease-in-out;
}
img {
	max-width:100%;
}
.tv {
	display:flex;
	flex-wrap:wrap;
	justify-content: space-around;
}
.tv-show {
	width: 300px;
	margin:20px;
	display: inline-block;
	text-decoration: none;
	cursor:pointer;
}
.tv-show .body {
	position: relative;
	display:flex;
	height: 450px;
	overflow: hidden;
}
.tv-show img {
	position: relative;
	z-index:100;
	transition:.3s all ease-in-out;
}
.tv-show:hover img {
	transform:scale(1.05);
	filter:grayscale(70%);
}

.tv-show .body:before {
	content:'';
	width: 100%;
	height: 100%;
	position: absolute;
	bottom:-150px;
	right:-150px;
	z-index:200;
	transition:.3s all ease-in-out;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ef2f7f+0,6d396d+100&0+39,1+100 */
	background: -moz-linear-gradient(-45deg,  rgba(239,47,127,0) 0%, rgba(188,51,120,0) 39%, rgba(109,57,109,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  rgba(239,47,127,0) 0%,rgba(188,51,120,0) 39%,rgba(109,57,109,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  rgba(239,47,127,0) 0%,rgba(188,51,120,0) 39%,rgba(109,57,109,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ef2f7f', endColorstr='#6d396d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.pop {
	position: absolute;
	top:0;
	left:150px;
	width: 100%;
	height: 100%;
	display:flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items:flex-end;
	text-align: right;
	padding:15px;
	box-sizing:border-box;
	color:white;
	font-weight:normal;
	font-family: 'Dosis', sans-serif;
	font-weight: 300;
	opacity:0;
	line-height:25px;
	transition:.5s all cubic-bezier(0.68, -0.55, 0.265, 1.55) .2s;
	z-index:1000;
}
.pop span {
	font-size: 30px;
}
.tv-show:hover .pop {
	opacity:1;
	left:0;
}
.tv-show:hover h1 {
	letter-spacing:0.05em;
}
.tv-show:hover .body:before {
	bottom:0;
	right:0;
}
.tv-show .body img {
	display:block;
}
.change {
	text-decoration: none;
	border:1px solid purple;
	display: inline-block;
	padding:15px 20px;
	border-radius:5px;
	transition:.2s ease-in-out all;
	background: white;
	color:purple;
	cursor:pointer;
	outline: none;
}
.change:hover, .change.active {
	background:purple;
	color:white;
}
.loader {
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background: white;
	display:none;
}

.spinner {
    border: 5px solid #f3f3f3; /* Light grey */
    border-top: 5px solid #333; /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

nav {
	position: relative;
	z-index:5000;
}

.single-tv {
	position: fixed;
	top:100%;
	left:100px;
	right:100px;
	bottom:100px;
	background:white;
	box-shadow:0 0 200px rgba(0,0,0,0.3);
	box-sizing:border-box;
	padding:100px;
	display:flex;
	transition:0.7s all cubic-bezier(0.68, -0.55, 0.265, 1.55);
	z-index:6000;
}
.single-tv.active {
	top:100px;
}
.single-tv div:nth-of-type(1) {
	width: 30%;
	margin-right:10%;
}
.single-tv div:nth-of-type(2) {
	width: 70%;
	text-align:left;
}
.single-tv p {
	font-style:italic;
}
.single-tv h1 {
	font-size: 30px;
}
.close {
	position: fixed;
	top:150px;
	right:150px;
	height: 64px;
	width: 64px;
	background:url('https://cdn1.iconfinder.com/data/icons/nuove/128x128/actions/fileclose.png') no-repeat center;
	background-size:50%;
	cursor:pointer;
	border:none;
	transition:0.7s all cubic-bezier(0.68, -0.55, 0.265, 1.55);
	opacity:0;
	outline:none;
	z-index:6001;
}
.close.active {
	opacity:1;
}
.top-img {
	margin:50px 0;
}

@media screen and (max-width:1024px) {
	.single-tv {
		flex-direction:column;
		top:350px;
		left:20px;
		right:20px;
		bottom:initial;
		padding:25px;
		position: absolute;
		opacity:0;
		visibility: hidden;
	}
	.single-tv div:nth-of-type(1), .single-tv div:nth-of-type(2) {
		width: 100%;
	}
	.single-tv.active {
		opacity:1;
		top:350px;
		visibility: visible;
	}
	.close {
		position: absolute;
   		top: 340px;
   	 	right: 0px;
	}
}