/*
Theme Name: Failcon 11
Version: 1.0
Author: ProgressionStudios
*/
@import url(css/reset.css);
@import url(css/standard.css);
@import url(css/fancybox.css);
ul.video-list {
	margin-bottom: 25px;
	margin-top: 35px;
}
ul.video-list li {
	display: inline-block;
	text-align: center;
	width: 30%;
	margin-bottom: 14px;
}
hr.new {
	background: transparent !important;
	border-bottom: 1px solid #ddd !important;
	border-top: none !important;
	border-left: none !important;
	margin: 20px 0px;
}
.clearboth, .clearfix {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
h6.author-byline {
	position: relative;
	bottom: 10px;
	direction: rtl;
}
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	margin-bottom: 10px;
	overflow: hidden;
	border: 5px solid #fff;
	-moz-box-shadow: 1px 1px 5px #a6a6a6;
	-webkit-box-shadow: 1px 1px 5px #a6a6a6;
	box-shadow: 1px 1px 5px #a6a6a6;
}
.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.progression-grid3column ul#sub-navigation {
	margin-left: 20px;
	margin-top: 0px;
	direction: rtl
}
ul#sub-navigation li#video-nav {
	padding: 13px 24px 13px 10px;
	font-weight: bold;
	color: #000;
	direction: rtl;
}
/*
=============================================== 05. Columns ===============================================
*/

.progression-grid3column img, .progression-grid2column img {
	max-width: 96%;
	height: auto;
}
.progression-grid2column, .progression-grid3column, .progression-grid3-twothirds, .progression-grid4column, .progression-grid4-threefourths, .progression-grid5column, .progression-grid5-twofifths, .progression-grid5-threefifths, .progression-grid5-fourfifth, .progression-grid6column, .progression-grid6-fivesixths {
	float: left;
	margin-right: 2%;
}
.progression-grid2column {
	width: 49%;
}
.progression-grid3column {
	width: 31%;
	margin-bottom: 15px;
	direction: rtl;
	
}
.progression-grid3-twothirds {
	width: 66%;
}
.progression-grid4column {
	width: 23.5%;
}
.lt-ie8 .progression-grid4column {
	width: 23%;
}
.progression-grid4-threefourths {
	width: 74.5%;
}
.lt-ie8 .progression-grid4-threefourths {
	width: 74.3%;
}
.progression-grid5column {
	width: 18.35%;
}
.progression-grid5-twofifths {
	width: 38.8%;
}
.progression-grid5-threefifths {
	width: 59.1%;
}
.progression-grid5-fourfifth {
	width: 79.5%;
}
.progression-grid6column {
	width: 15%;
}
.progression-grid6-fivesixths {
	width: 83%;
}
body .progression-lastcolumn {
	margin-right: 0% !important;
	position: relative;
	left: -10px;
	float: left;
}



/* Animation */

		#animHolder {
		/* width: 1250px; */
		width: 960px;
		height: 350px;
		background: #fafafa;
		margin: 30px auto;
		overflow: hidden;
		position: relative;
		}
		div.back
		{
		left:0;
		width:960px;
		height: 350px;
		background:url(../images/back.jpg) no-repeat transparent;
		position: absolute;			
		}

		div.man
		{
		left:-766px;
		top: 0;
		width:766px;
		height: 350px;
		z-index:2;
		background:url(../images/man.png) no-repeat transparent;
		position: absolute;			
		animation:man 1s;
		-webkit-animation:man 1s; /* Safari and Chrome */
		-webkit-animation-fill-mode: forwards;
		-moz-animation-fill-mode: forwards;
		-o-animation-fill-mode: forwards;
		-ms-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 1s;
		-moz-animation-delay: 1s;
		-o-animation-delay: 1s;
		-ms-animation-delay: 1s;
		animation-delay: 1s;
		}
		@keyframes man
		{
		from {left:-766px;}
		to {left: 0px;}
		}
		@-webkit-keyframes man /* Safari and Chrome */
		{
		from {left:-766px;}
		to {left: 0px;}
		}	
		div.quotes
		{		
		/*
		left:416px;
		top: 40px;
		*/
		left:269px;
		top: 40px;
		width:684px;
		height: 195px;
		z-index:3;
		opacity: 0;
		background:url(../images/quotes.png) no-repeat transparent;
		position: absolute;			
		animation:quotes 1s;
		-webkit-animation:quotes 1s; /* Safari and Chrome */
		-webkit-animation-fill-mode: forwards;
		-moz-animation-fill-mode: forwards;
		-o-animation-fill-mode: forwards;
		-ms-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 3s;
		-moz-animation-delay: 3s;
		-o-animation-delay: 3s;
		-ms-animation-delay: 3s;
		animation-delay: 3s;
		}
		@keyframes quotes
		{
			0% {
				display:none; 
				opacity: 0;
			}

			1% {
				display: block ; 
				opacity: 0;
			}

			100% {
				display: block ; 
				opacity: 1;
			}
		}
		@-webkit-keyframes quotes /* Safari and Chrome */
		{
			0% {
				display:none; 
				opacity: 0;
			}

			1% {
				display: block ; 
				opacity: 0;
			}

			100% {
				display: block ; 
				opacity: 1;
			}
		}		
		div.text1
		{
		/*left:441px;*/
		left:292px;
		top: 350px;
		width:650px;
		height: 190px;
		z-index:4;
		background:url(../images/text1.png) no-repeat transparent;
		position: absolute;			
		animation:text1 1s;
		-webkit-animation:text1 1s; /* Safari and Chrome */
		-webkit-animation-fill-mode: forwards;
		-moz-animation-fill-mode: forwards;
		-o-animation-fill-mode: forwards;
		-ms-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 2s;
		-moz-animation-delay: 2s;
		-o-animation-delay: 2s;
		-ms-animation-delay: 2s;
		animation-delay: 2s;
		}
		@keyframes text1
		{
		from {top:350px;}
		to {top: 60px;}
		}
		@-webkit-keyframes text1 /* Safari and Chrome */
		{
		from {top:350px;}
		to {top: 60px;}
		}
		div.text2
		{
		left:1300px;
		top: 300px;
		width:310px;
		height: 26px;
		z-index:4;
		background:url(../images/text2.png) no-repeat transparent;
		position: absolute;			
		animation:text2 1s;
		-webkit-animation:text2 1s; /* Safari and Chrome */
		-webkit-animation-fill-mode: forwards;
		-moz-animation-fill-mode: forwards;
		-o-animation-fill-mode: forwards;
		-ms-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 3s;
		-moz-animation-delay: 3s;
		-o-animation-delay: 3s;
		-ms-animation-delay: 3s;
		animation-delay: 3s;
		}
		@keyframes text2
		{
		from {left:1300px;}
		to {left: 780px;}
		}
		@-webkit-keyframes text2 /* Safari and Chrome */
		{
		from {left:1300px;}
		to {left: 780px;}
		}
		div.button1
		{
		left:588px;
		top: 350px;
		width:243px;
		height: 42px;
		cursor:pointer;
		z-index:5;
		background:url(../images/button1.png) no-repeat transparent;
		position: absolute;			
		animation:button1 1s;
		-webkit-animation:button1 1s; /* Safari and Chrome */
		-webkit-animation-fill-mode: forwards;
		-moz-animation-fill-mode: forwards;
		-o-animation-fill-mode: forwards;
		-ms-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 3.5s;
		-moz-animation-delay: 3.5s;
		-o-animation-delay: 3.5s;
		-ms-animation-delay: 3.5s;
		animation-delay: 3.5s;
		}
		@keyframes button1
		{
		from {top:350px;}
		to {top: 292px;}
		}
		@-webkit-keyframes button1 /* Safari and Chrome */
		{
		from {top:350px;}
		to {top: 292px;}
		}	
		div.button2
		{
		left:771px;
		top: 350px;
		width:170px;
		height: 42px;
		cursor:pointer;
		z-index:5;
		background:url(../images/button2.png) no-repeat transparent;
		position: absolute;			
		animation:button2 1s;
		-webkit-animation:button2 1s; /* Safari and Chrome */
		-webkit-animation-fill-mode: forwards;
		-moz-animation-fill-mode: forwards;
		-o-animation-fill-mode: forwards;
		-ms-animation-fill-mode: forwards;
		animation-fill-mode: forwards;	
		-webkit-animation-delay: 4s;
		-moz-animation-delay: 4s;
		-o-animation-delay: 4s;
		-ms-animation-delay: 4s;
		animation-delay: 4s;
		}
		@keyframes button2
		{
		from {top:350px;}
		to {top: 292px;}
		}
		@-webkit-keyframes button2 /* Safari and Chrome */
		{
		from {top:350px;}
		to {top: 292px;}
		}