@keyframes FadeIn { 
	0% {
		opacity: 0;
		margin-top:133px;
	}
	100% {
		margin-top:0px;
		opacity: 1;
	}
}

@keyframes SlideOut { 
	0% {
		margin-top:0px;
	}
	100% {
		margin-top:30%;
	}
}

@keyframes SlideIn { 
	0% {
		margin-top:30%;
	}
	80% {
		margin-top:-3.5%;
	}
	100% {
		margin-top:0px;
	}
}

.myChannel {
	width:70%;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	cursor:pointer;
	margin-bottom:100px;
	display: flex;
    flex-wrap: wrap;
	-webkit-box-pack: center;
    justify-content: center;
}

.myChannel > div {
	display:flex;
	position:relative;
	padding: 20px;
	animation: FadeIn 0.09s linear;
	animation-fill-mode: both;
	width:20%;
	box-sizing: border-box;
	overflow:hidden;
	min-width:240px;
	max-width:340px;
}

.myChannel > div div {
	position:relative;
	width:100%;
	overflow:hidden;
}

.myChannel img:first-child {
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	transition: all .3s linear;
}

.myChannel div:hover > img:first-child {
	margin-top:-5%;
	margin-bottom:5%;
}

.myChannel img:nth-child(2) {
	position:absolute;
	top:0px;
	margin-top:30%;
	left:0px;
	width:100%;
	animation: SlideOut .3s ease-out;
	animation-fill-mode: both;
}

.myChannel div:hover > img:nth-child(2) {
	animation: SlideIn .3s ease-out;
	animation-fill-mode: both;
}

.myChannelClose {
	position:absolute;
	display:block;
	top:55px;
	right:55px;
}

.myChannel div:nth-child(1) { animation-delay: .5s; }
.myChannel div:nth-child(2) { animation-delay: .6s; }
.myChannel div:nth-child(3) { animation-delay: .7s; }
.myChannel div:nth-child(4) { animation-delay: .8s; }
.myChannel div:nth-child(5) { animation-delay: .9s; }
.myChannel div:nth-child(6) { animation-delay:  1s; }
.myChannel div:nth-child(7) { animation-delay: 1.1s; }
.myChannel div:nth-child(8) { animation-delay: 1.2s; }
.myChannel div:nth-child(9) { animation-delay: 1.3s; }
.myChannel div:nth-child(10) { animation-delay: 1.4s; }

.hide-mobile-channel {
	display:flex;
}

.show-mobile-channel {
	display:none;
}

.myChannelTitle {
	position:fixed;
	top:0px;
	left:0px;
	height:0px;
	width:100%;
	background:rgba(5,10,21,0.9);
	color:white;
	text-align:center;
	overflow:auto;
	display:none;
	padding-top:55px;
	animation:all 2s linear;
	z-index: 100000001;
}

@media only screen and (max-width: 768px) {
	.myChannel > div {
		width:50%;
	}
}

@media only screen and (max-width: 571px) {
	.myChannel {
		width:92%;
	}
}

@media only screen and (max-width: 450px) {
	.myChannelTitle {
		padding-top:10px;
	}
	
	.myChannelClose {
		top:10px;
		right:10px;
	}
	
	.myChannelClose img {
		height: 28px;
	}
	
	.myChannelTitle h2 {
		padding-bottom:10px;
	}
	
	body  {
		padding:0px;
		margin:0px;
	}

	.myChannel2 div:nth-child(1) { animation-delay: .5s; }
	.myChannel2 div:nth-child(2) { animation-delay: .6s; }
	.myChannel2 div:nth-child(3) { animation-delay: .7s; }
	.myChannel2 div:nth-child(4) { animation-delay: .8s; }
	.myChannel2 div:nth-child(5) { animation-delay: .9s; }
	.myChannel2 div:nth-child(6) { animation-delay:  1s; }
	.myChannel2 div:nth-child(7) { animation-delay: 1.1s; }
	.myChannel2 div:nth-child(8) { animation-delay: 1.2s; }
	.myChannel2 div:nth-child(9) { animation-delay: 1.3s; }
	.myChannel2 div:nth-child(10) { animation-delay: 1.4s; }

	.hide-mobile-channel {
		display:none;
	}

	.show-mobile-channel {
		display:block;
	}

	.myChannel2 {
		width:100%;
		text-align:center;
		margin-left:auto;
		margin-right:auto;
		cursor:pointer;
		margin-bottom:0px;
		overflow-x: hidden;
	}

	.myChannel2 > div {
		width:100%;
		height:100px;
		padding:0px;
		margin:0px;
		animation: FadeIn 0.05s linear;
		animation-fill-mode: both;
		display:block;
	}
	
	.myChannel2 a {
		display:block;
		position:relative;
	}

	.myChannel2 img:first-child {
		height:100px;
		width:auto;
		display:block;
	}
	
	.myChannel2 img:last-child {
		position:absolute;
		top:0px;
		right:0px;
		width:auto;
		height:auto;
		display:block;
		margin-top: 10%;
    	margin-right: 11px;
	}
}