/* =============================================================================
   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;
	background:rgba(0,0,0,.8);
}
.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;
}
.screens a:before,
.screens a:after {
	content:'';
	display:block;
	width:126px;
	height:61px;
	position: absolute;
	top:0;
	z-index:10;
}
.screens a:before {
	left:0;
	background: url(../img/deco-block-left.png) no-repeat center center;
}
.screens a:after {
	right:0;
	background: url(../img/deco-block-right.png) no-repeat center center;
}

.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 */
.screens a[data-type="video"]:before, .screens a[data-type="video"]:after{
	top: 15%;
}
.screens a[data-type="image"] .hover {
	background: rgba(0,0,0,0.6) url('../img/zoom.png') no-repeat center center;
}
.screens a[data-type="image"] img {	
	position:relative;
	display:block;
	width: 100%;
}

/* VIDEOS */
.youtube_title {
	position: absolute;
	z-index:3;
	width: 100%;
	left:0px;
	bottom: -3px;
	font-size: 16px;
	text-align:center;
	padding:12px 20px 10px;
	color:#111;
	font-family: 'fuji-reg', 'Times New Roman', serif;
	background: url(../img/pattern_background_block.png) no-repeat center center;
	text-transform: uppercase;
	text-shadow: 0 1px 1px rgba(0,0,0,.6);
  color: #222;
}
.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:0;
	left:0;
	right:0;
	bottom: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;
	} 
	.media-nav .media-type  {
		float:none;	
		margin:auto;
	} 
	.media-nav .desktop {
		display:none;
	} 
	.media-nav.mobile {
		display:block;
	} 

}