/*
Theme Name: Ikelos : Default 
Description:  video jammer styles!
Author: Beecher & Avery (@radicalmedia)
Version: 1.0
*/

/* ===== LAYOUT ====== */

@font-face {
	font-family: 'ikelos_def';
	src:url('../fonts/ikelos_def.eot');
	src:url('../fonts/ikelos_def.eot?#iefix') format('embedded-opentype'),
		url('../fonts/ikelos_def.woff') format('woff'),
		url('../fonts/ikelos_def.ttf') format('truetype'),
		url('../fonts/ikelos_def.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

.ikls_vid_uber_wrap {
	position: relative;
	display: block;
	overflow: hidden;
}

	.ikls_vid_uber_wrap img,
	.ikls_vid_uber_wrap video,
	.ikls_vid_uber_wrap object,
	.ikls_vid_uber_wrap embed {
		position: relative;
		display: block;
		width: 100%;
		max-width: 100%;
		display: block;
	}

	.ikls_vid_uber_wrap * {
		position: relative;
		display: block;
	}
	
	.ikls_vid_uber_wrap span {display: inline-block;}
	.ikls_vid_uber_wrap a {text-decoration: none;}

.ikls_placeholder {
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgba(0,0,0,0.3);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	cursor: pointer;
}
		
	.ikls_placeholder:focus .ikls_big_play,
	.ikls_placeholder:hover .ikls_big_play {opacity: 1;}

	.ikls_big_play {
		position: absolute;
		top:50%;
		left:50%;
		font-size: 1.5em;
		margin-top:-1.6em;
		margin-left:-1.6em;
		width: 3em;
		height: 3em;
		background: #000;
		border:0.1em solid #999;
		text-align: center;
		border-radius: 100%;
		opacity: 0.8;
		box-shadow: 0px 0px 5px #000;
		-moz-transition: all 0.4s ease;
		-webkit-transition: all 0.4s ease;
		-o-transition: all 0.4s ease;
		-ms-transition: all 0.4s ease;
		transition: all 0.4s ease;
	}
	
		.ikls_big_play_button.ikls_ui {
			padding:0 0.35em;
			background: transparent;
		}
		
			.ikls_big_play_button.ikls_ui:before,
			.ikls_big_play_button .ikls_icon_jammed { line-height: 1.5em; }

.ikls_captions_wrap {
	position: absolute;
	display: none;
	left:0px;
	bottom: 0px;
	width: 100%;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	transition:all 0.3s ease;
	-moz-transition-delay: 0.5s;
	-webkit-transition-delay: 0.5s;
	-o-transition-delay: 0.5s;
	-ms-transition-delay: 0.5s;
	transition-delay: 0.5s;
}

	.ikls_show_caps .ikls_captions_wrap {display: block;}

	.ikls_vid_uber_wrap:hover .ikls_captions_wrap {
		bottom:2.42em;
		-moz-transition-delay: 0s;
		-webkit-transition-delay: 0s;
		-o-transition-delay: 0s;
		-ms-transition-delay: 0s;
		transition-delay: 0s;
	}

	.ikls_captions_wrap_inner {
		padding:1em;
		display: none;
		background: #000;
		background: rgba(0,0,0,0.75);
		color:#fff;
		text-align: center;
	}

.ikls_vid_controls_wrap {
	width: 100%;
	height: 3.2em;
	position: absolute;
	bottom: -3.2em;
	left: 0px;
	font-family: sans-serif;
	font-size: 12px;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	transition:all 0.3s ease;
	-moz-transition-delay: 0.5s;
	-webkit-transition-delay: 0.5s;
	-o-transition-delay: 0.5s;
	-ms-transition-delay: 0.5s;
	transition-delay: 0.5s;
}

	.ikls_vid_uber_wrap:hover .ikls_vid_controls_wrap {
		bottom: 0px;
		-moz-transition-delay: 0s;
		-webkit-transition-delay: 0s;
		-o-transition-delay: 0s;
		-ms-transition-delay: 0s;
		transition-delay: 0s;
	}

	.ikls_vid_controls_wrap,
	.ikls_vid_wrap,
	.ikls_settings_tray,
	.ikls_volume_tray {background: #333;}

	.ikls_vid_wrap {
		float: left;
		clear: none;
	}
	
		.ikls_right {float: right;}
	
	.ikls_vid_wrap_left,
	.ikls_vid_wrap_right {
		width: 4.55em;
	}
	
	.ikls_vid_wrap_center {
		width: 50%;
		height: 100%;
	}
	
	.ikls_ui {
		text-align: center;
		font-size: 2em;
		padding:0 0.65em;
		height: 1.6em;
		background: #333;
		color:#999;
		text-decoration: none;
		-moz-transition:all 0.3s ease;
		-webkit-transition:all 0.3s ease;
		-o-transition:all 0.3s ease;
		-ms-transition:all 0.3s ease;
		transition:all 0.3s ease;
	}
	
		.ikls_ui:focus,
		.ikls_ui:hover {
			color:#fff;
			cursor: pointer;
		}
	
	.ikls_scrubber_wrap {
		height: 100%;
		overflow: visible;
		cursor: pointer;
	}
	
		.ikls_scrubber_line {
			position: absolute;
			top:50%;
			margin-top: -0.1em;
			width: 100%;
			height: 0.2em;
			background: #666;
		}
		
			.ikls_scrubber_buffered {
				position: absolute;
				top:0px;
				left:0px;
				height: 100%;
				width: 0%;
				background: #ccc;
			}
		
			.ikls_scrubber_progress {
				height: 100%;
				width: 0%;
				background: #BD1C7C;
			}
		
		.ikls_scrubber_handle {
			position: absolute;
			font-size: 1.5em;
			width: 1em;
			height: 1em;
			top:50%;
			margin-top: -0.5em;
			margin-left: -0.5em;
			background: red;
			border-radius: 100%;
			box-shadow: 0px 0px 10px rgba(0,0,0,1);
			z-index: 1000;
			-moz-transform:translateX(0);
			-webkit-transform:translateX(0);
			-o-transform:translateX(0);
			-ms-transform:translateX(0);
			transform:translateX(0);
			-moz-transition: -moz-transform 0.3s ease;
			-webkit-transition: -webkit-transform 0.3s ease;
			-o-transition: -o-transform 0.3s ease;
			-ms-transition: -ms-transform 0.3s ease, left 0.3s ease;
			transition: transform 0.3s ease;
		}
			
			.ikls_scrubbing .ikls_scrubber_wrap,
			.ikls_scrubber_handle:hover {cursor:move;}
			
			.ikls_scrubber_handle:hover {
				-moz-transform: scale(1.2);
				-webkit-transform: scale(1.2);
				-o-transform: scale(1.2);
				-ms-transform: scale(1.2);
				transform: scale(1.2);
			}
			
		.ikls_time_wrap {
			position: absolute;
			display: none;
			top: 0px;
			min-width: 7em;
			text-align: center;
			z-index: 900;
			opacity: 0;
			-moz-transition:top 0.3s ease 0.25s, opacity 0.3s ease 0.25s, left 0.3s ease;
			-webkit-transition:top 0.3s ease 0.25s, opacity 0.3s ease 0.25s, left 0.3s ease;
			-o-transition:top 0.3s ease 0.25s, opacity 0.3s ease 0.25s, left 0.3s ease;
			-ms-transition:top 0.3s ease 0.25s, opacity 0.3s ease 0.25s, left 0.3s ease;
			transition:top 0.3s ease 0.25s, opacity 0.3s ease 0.25s, left 0.3s ease;
		}
		
			.ikls_vid_uber_wrap:hover .ikls_time_wrap {
				top: -1.5em;
				opacity: 1;
			}
			
			.ikls_time_inner {
				background: orange;
				padding: 0.25em 0.25em 0.05em;
			}
			
			.ikls_time_wrap:after {
				content:"";
				text-indent: -9999em;
				overflow: hidden;
				width: 0; 
				height: 0; 
				position: absolute;
				bottom:-0.5em;
				left:50%;
				margin-left: -0.5em;
				border-left: 0.5em solid transparent;
				border-right: 0.5em solid transparent;
				border-top: 0.5em solid orange;
			}		
	
	.ikls_vid_uber_wrap [data-icon]:before,
	.ikls_icon {
		font-family: 'ikelos_def';
		content: attr(data-icon);
		speak: none;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1.6em;
		-webkit-font-smoothing: antialiased;
	}
	.ikls_icon {font-family: 'ikelos_def';}

/* === */

	.ikls_play_pause_restart:before {content: "\e005";}
	.ikls_vid_paused .ikls_play_pause_restart:before {content: "\e005";}
	.ikls_vid_playing .ikls_play_pause_restart:before {content: "\e006";}
	.ikls_vid_ended .ikls_play_pause_restart:before {content: "\e000";}
	
	.ikls_fullscreen:before {content: "\e001";}
		/* .ikls_is_fullscreen .ikls_fullscreen:before {content: "\e003";} */
	
	.ikls_settings_uber_wrap {}
		
		.ikls_settings_tray {
			position: absolute;
			bottom:-500%;
			right:0px;
			-moz-transition:all 0.5s ease;
			-webkit-transition:all 0.5s ease;
			-o-transition:all 0.5s ease;
			-ms-transition:all 0.5s ease;
			transition:all 0.5s ease;
		}
			
			.ikls_settings_uber_wrap.ikls_open .ikls_settings_tray,
			.ikls_settings_uber_wrap:focus .ikls_settings_tray,
			.ikls_settings_uber_wrap:hover .ikls_settings_tray {bottom:3.2em;}
			
			.ikls_row {}
			
			.ikls_cc:before {content: "\e010";}	
			
	.ikls_volume_tray {
		position: absolute;
		height: 400%;
		width: 100%;
		bottom:-400%;
		-moz-transition:all 0.5s ease;
		-webkit-transition:all 0.5s ease;
		-o-transition:all 0.5s ease;
		-ms-transition:all 0.5s ease;
		transition:all 0.5s ease;
	}
	
		.ikls_volume_uber_wrap.ikls_open .ikls_volume_tray,
		.ikls_volume_uber_wrap:focus .ikls_volume_tray,
		.ikls_volume_uber_wrap:hover .ikls_volume_tray {bottom:3.2em;}
		
		.ikls_volume_padder {
			height: 75%;
			margin:40% 0;
		}
		
		.ikls_volume_line {
			position: absolute;
			left:50%;
			margin-left: -0.1em;
			height: 100%;
			width: 0.2em;
			background: #ccc;
		}
		
			.ikls_volume_level {
				position: absolute;
				bottom:0px;
				height: 100%;
				width: 100%;
				background: #BD1C7C;
			}
			
		.ikls_volume_handle {
			position: absolute;
			font-size: 1.5em;
			width: 1em;
			height: 1em;
			left:50%;
			top:0%;
			margin-top: -0.5em;
			margin-left: -0.5em;
			background: red;
			border-radius: 100%;
			box-shadow: 0px 0px 10px rgba(0,0,0,1);
			-moz-transform:translateX(0);
			-webkit-transform:translateX(0);
			-o-transform:translateX(0);
			-ms-transform:translateX(0);
			transform:translateX(0);
			-moz-transition: -moz-transform 0.3s ease, top 0.3s ease;
			-webkit-transition: -webkit-transform 0.3s ease, top 0.3s ease;
			-o-transition: -o-transform 0.3s ease, top 0.3s ease;
			-ms-transition: -ms-transform 0.3s ease, top 0.3s ease;
			transition: transform 0.3s ease, top 0.3s ease;
		}
		
			.ikls_scrubbing .ikls_volume_padder,
			.ikls_volume_handle:hover {cursor:move;}
			
			.ikls_volume_handle:hover {
				-moz-transform: scale(1.2);
				-webkit-transform: scale(1.2);
				-o-transform: scale(1.2);
				-ms-transform: scale(1.2);
				transform: scale(1.2);
			}
			
		.ikls_volume:before {content: "\e007";}
		.ikls_muted .ikls_volume:before {content: "\e00a";}
		
	.ikls_2ndary_tray {
		position: absolute;
		right:100%;
		bottom:0px;
		opacity: 0;
		background: #333;
		color:#ccc;
		visibility: hidden;
		z-index: 1100;
		-moz-transition: opacity 0.3s ease;
		-webkit-transition: opacity 0.3s ease;
		-o-transition: opacity 0.3s ease;
		-ms-transition: opacity 0.3s ease;
		transition: opacity 0.3s ease;
	}
	
		.ikls_no_cssBefore .ikls_2ndary_tray {
			top:auto;
			bottom:0px;
		}
	
		.ikls_row:focus .ikls_2ndary_tray,
		.ikls_row:hover .ikls_2ndary_tray {
			visibility: visible;
			opacity: 1;
		}
	
		.ikls_text_button,
		.ikls_text_button_nohover {
			position: relative;
			display: block;
			padding:0em 0.75em 0.5em;
			white-space: nowrap;
			text-align: center;
			background: #333;
			color:#999;
			z-index: 1100;
			cursor: pointer;
			-moz-transition: color 0.3s ease;
			-webkit-transition: color 0.3s ease;
			-o-transition: color 0.3s ease;
			-ms-transition: color 0.3s ease;
			transition: color 0.3s ease;
		}
		
		.ikls_first {padding-top: 0.5em;}
		
		.ikls_text_button:focus,
		.ikls_text_button:hover,
		.ikls_active {color:#fff;}
		
		
		.ikls_download_wrap .ikls_2ndary_tray {
			width: 200%;
		}
		
		.ikls_dlg_wrap {
			padding:0 0.5em 0.5em;
			text-align: center;
		}
			
			.ikls_dlg_name {
				clear:both;
				text-transform: uppercase;
			}
		
		a.ikls_download_option {
			display: inline;
			width: auto;
			padding: 0px;
		}
		
/* =================================== bg video ==== */

.ikls_bg_video_contain,
.ikls_cover_wrap {
	position: absolute;
	display: block;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
}

.ikls_cover_wrap {
	overflow: hidden;
}

	.ikls_bg_video_cover {		
		position: absolute;
		display: block;
		top:0px;
		left:0px;
		min-width: 100%;
		min-height: 100%;
	}
	
/* ===================================  utilities */

.ikls_screen_reader_only {
	overflow: hidden;
	text-indent: -99999em;
	position: absolute;
	left:-99999px;
	top:-99999px;
	height: 0px;
	width: 0px;
}
	
.ikls_clearfix {
	position:relative;
	display:block;
	width:100%;
	height:0px;
	float:none;
	clear:both;
	line-height:0px;
	padding:0px;
	margin:0;
	overflow:hidden;
	background:transparent none;
	outline:none;
	visibility:hidden;
}

.ikls_75,
.ikls_50,
.ikls_30,
.ikls_25,
.ikls_20,
.ikls_15,
.ikls_10,
.ikls_5 {
	float: left;
	clear: none;
}

.ikls_75 {width:75%;}
.ikls_50 {width:50%;}
.ikls_30 {width:30%;}
.ikls_25 {width:25%;}
.ikls_20 {width:20%;}
.ikls_15 {width:15%;}
.ikls_10 {width:10%;}
.ikls_5 {width:5%;}

/* ===================================  Media */

.ikls_vid_uber_wrap video,
.ikls_vid_uber_wrap object,
.ikls_vid_uber_wrap embed {
	max-width: 100%;
	width: 100%;
	display: block;
	background: #000;
}

	figcaption {
		padding:0.5em 0;
	}