/* =============================================================================
   CONTENT
   ========================================================================== */
#media {
	position: relative;
	float: left;
	width:100%;
	color:#fff;
	padding-top:10px;
}

#media-content {
	position: relative;
	width:100%;	
	height:auto;
	/*display: none;*/
}

#loader{
	position: absolute;
	background: url(../img/loading.gif) top center no-repeat;
	width: 100%;
	height: 100%;	
}

/* =============================================================================
   MEDIA NAV
   ========================================================================== */
  
.media-nav {
	position: relative;	
	display:block;
	width:100%;
	height:40px;
	padding-left:10px;
} 
.media-nav.mobile {
	position: relative;	
	display:block;
	width:100%;
	height:40px;
	text-align:center;
	display:none;
	margin-bottom:30px;
} 
.button-group {
	position: relative;
	display:inline-block;
	width:auto;
	float:left;
}
.button-group.media-page {
	float:right;
	padding-right:1%;
}
.media-nav.mobile .button-group.media-page  {
	float:none;	
	margin:auto;
} 
.button {
	position: relative;
	display:inline-block;
	width:auto;
	height:37px;
	font-size: 14px;
	text-align: center;
	color: #fff;
	padding: 8px 12px;
	background-color: transparent;
	border: 1px solid #fff;
	text-transform: uppercase;
	cursor: pointer;
	transition: 0.5s all ease-in-out; 
	margin-right:5px;
}
.button:hover, 
.button.is-checked {
	background-color: #fff;
	color: #000;
}


/* =============================================================================
   SCREENS
   ========================================================================== */
.screens {
  position: relative;
	display: inline-block;  
	width: 23%;
	margin: 1% 1% 1% 1%;
	color: #000;
	text-align: center;	
	overflow:hidden;
	visibility: hidden;
	border:1px solid #fff;
}

.screens a {
	position: relative;
	display:block;
	width:100%;
}
.hover {
	background: rgba(0,0,0,0.6);
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity:0;
	cursor: pointer;
	transition: all 0.3s ease;
	border:#75a6ad 1px solid;
}

/* IMAGES & MANGA */
.screens a[data-type="image"] .hover, 
.screens a[data-type="manga"] .hover {
	background: rgba(0,0,0,0.6) url('../img/zoom.png') no-repeat center center;
}
.screens a[data-type="image"] img, 
.screens a[data-type="manga"] img {	
	position:relative;
	display:block;
	width: 100%;
}

/* VIDEOS */
.youtube_title {
	position: absolute;
	z-index:3;
	width: 100%;
	left:0px;
	bottom: 0px;
	font-size: 12px;
	text-align:center;
	padding:12px 20px 10px;
	color:#111;
	font-family: 'charlemagne-std-bold', 'Times New Roman', serif;
	background-color: rgba(4,32,44,.8);
	text-transform: uppercase;
	box-shadow: 0 2px 2px rgba(0,0,0,0.5);
    color: #fff;
    border-top:1px solid #fff;
}
.youtube_img {
	position: relative;
	width: 100%;
	height:0;
	padding-bottom: 66.25%;
	vertical-align:middle;
}
.youtube_img img {
	position:relative;
	display:block;
	width: 100%;
	margin-top:-10%;
	z-index:0; 
}
.youtube_play {
	position:absolute;  
	width:45px;
	height:30px;	
	top:40%;
	left:0;
	right:0;
	margin:auto;
	z-index:2;
	opacity:0.8;
	transition: all 0.3s ease;
	background: rgba(30,30,30,0.95);
	border-radius: 7px;	
	padding:5px 0px 0px 2px;
}
.youtube_play i {	
  font-size: 18px;
	color: #fff;
}

/* OVER EFFECT */
.screens:hover, 
.screens.active {
	opacity:1;
}
.screens:hover .hover {
	opacity:1;
}
.screens:hover .youtube_play, 
.screens.active .youtube_play {
	opacity:0.95;
	background: #CC181E;
}


/* =============================================================================
   MEDIA QUERIES
   ========================================================================== */ 
@media screen and (min-width: 1100px) and (max-width: 1360px) {
	#media {
		padding-right:70px;
	}
}
@media screen and (max-width: 768px) {

	.button-group.media-page {
		padding-right:1.525%;
	}
	/* SCREENS */
	.screens {
		width:30%;
		margin:1% 1.525% 2% 1.525%;
	}

}

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

	/* SCREENS */
	.screens {
		width: 47%;
		margin: 1% 1.5% 2% 1.5%;
	}
	
	.media-nav {
		margin:15px 0px;
		text-align:center;
		height: 90px;
	} 
	.media-nav .media-type  {
		float:none;	
		margin:auto;
	} 
	.media-nav .desktop {
		display:none;
	} 
	.media-nav.mobile {
		display:block;
	} 
	.button{
		margin-top: 5px;
	}

	.youtube_title {
		display: none;
	}
}